Fix AI report: JSON field mapping, local dev proxy, dotenv loading, fuller exam data sent to LLM

.env.example

@@ -1,7 +1,7 @@
 # Gemini API Key for LLM functionality
 # Get your API key from: https://makersuite.google.com/app/apikey
-GEMINI_API_KEY=your_gemini_api_key_here
-VITE_GEMINI_API_KEY=your_gemini_api_key_here
+GEMINI_API_KEY=AIzaSyD9rMJVxxop-FusPIDfcdhJkIIdxa3X4vc
+VITE_GEMINI_API_KEY=AIzaSyD9rMJVxxop-FusPIDfcdhJkIIdxa3X4vc
 
 # Optional: Model Configuration
 # GEMINI_MODEL=gemini-1.5-flash

README.md

@@ -15,21 +15,74 @@ A comprehensive React-based colposcopy assistant application with image annotati
 
 ## Local Development
 
-1. Install dependencies:
+The app has two parts that need to run at the same time:
+- **Backend** – FastAPI (Python) on `http://localhost:8000`
+- **Frontend** – Vite dev server (React) on `http://localhost:5173`
+
+Vite is pre-configured to proxy all `/api/*` and `/infer/*` requests to the backend.
+
+### Step 1 – Set up your Gemini API key
+
+Copy `.env.example` to `.env` and fill in your key:
+
+```bash
+cp .env.example .env   # or rename a copy manually on Windows
+```
+
+Edit `.env`:
+```
+GEMINI_API_KEY=your_actual_gemini_api_key_here
+```
+
+Get a free key at: https://makersuite.google.com/app/apikey
+
+### Step 2 – Install Python dependencies (backend)
+
+It is recommended to use a virtual environment:
+
+```bash
+# Create and activate a virtual environment (Windows)
+python -m venv .venv
+.venv\Scripts\activate
+
+# Install backend packages
+pip install -r backend/requirements.txt
+```
+
+### Step 3 – Start the FastAPI backend
+
+From the **project root folder**, run:
+
+```bash
+uvicorn backend.app:app --host 0.0.0.0 --port 8000 --reload
+```
+
+The API will be available at `http://localhost:8000`.
+You can test the health endpoint: `http://localhost:8000/health`
+
+### Step 4 – Install Node.js dependencies (frontend)
+
 ```bash
 npm install
 ```
 
-2. Run development server:
+### Step 5 – Start the Vite dev server
+
+In a **separate terminal**, from the project root:
+
 ```bash
 npm run dev
 ```
 
-3. Build for production:
+The app will be available at `http://localhost:5173`.
+
+### Step 6 – Build for production
+
 ```bash
 npm run build
 ```
 
+
 ## Deploy to Hugging Face Spaces
 
 This project is configured for deployment on Hugging Face Spaces using Docker runtime.

backend/app.py

@@ -13,7 +13,33 @@ import uvicorn
 import traceback
 import json
 from typing import List, Dict, Optional
-from .inference import infer_aw_contour, analyze_frame, analyze_video_frame, infer_cervix_bbox
+
+# Load .env file for local development.
+# Search from this file's directory upward so it works whether the server
+# is launched from project root (uvicorn backend.app:app) or from
+# inside the backend/ folder (python app.py).
+try:
+    from dotenv import load_dotenv
+    _here = os.path.dirname(os.path.abspath(__file__))
+    # Try backend/.env first, then project root .env
+    for _env_path in [
+        os.path.join(_here, ".env"),
+        os.path.join(_here, "..", ".env"),
+    ]:
+        if os.path.isfile(_env_path):
+            load_dotenv(_env_path)
+            print(f"✅ Loaded .env from: {os.path.abspath(_env_path)}")
+            break
+    else:
+        print("⚠️  No .env file found. Set GEMINI_API_KEY in your environment.")
+except ImportError:
+    pass
+
+
+try:
+    from .inference import infer_aw_contour, analyze_frame, analyze_video_frame, infer_cervix_bbox
+except ImportError:
+    from inference import infer_aw_contour, analyze_frame, analyze_video_frame, infer_cervix_bbox
 
 # Import Google Gemini (optional - graceful degradation if not installed)
 try:

src/pages/ReportPage.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useRef, useState } from 'react';
 import { ArrowLeft, Download, FileText, CheckCircle, Camera, Sparkles, Loader2 } from 'lucide-react';
 import html2pdf from 'html2pdf.js';
-import { SYSTEM_PROMPT, DEMO_STEP_FINDINGS } from '../config/geminiConfig';
+import { SYSTEM_PROMPT } from '../config/geminiConfig';
 import { sessionStore } from '../store/sessionStore';
 
 
@@ -97,26 +97,7 @@ export function ReportPage({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [JSON.stringify(formData)]);
 
-  /** Convert a data-URL or object-URL to a Gemini-compatible base64 image part */
-  const toImagePart = async (src: string): Promise<{ inlineData: { data: string; mimeType: string } } | null> => {
-    try {
-      const res = await fetch(src);
-      const blob = await res.blob();
-      return new Promise(resolve => {
-        const reader = new FileReader();
-        reader.onloadend = () => {
-          const dataUrl = reader.result as string;
-          const [header, data] = dataUrl.split(',');
-          const mimeType = header.match(/:(.*?);/)?.[1] ?? 'image/png';
-          resolve({ inlineData: { data, mimeType } });
-        };
-        reader.onerror = () => resolve(null);
-        reader.readAsDataURL(blob);
-      });
-    } catch {
-      return null;
-    }
-  };
+
 
   // On mount: restore all previously saved session data into the form
   useEffect(() => {
@@ -177,11 +158,10 @@ export function ReportPage({
     setAiError(null);
 
     try {
-      // Prepare data for backend API
       const session = sessionStore.get();
       const mergedFindings = { ...(session.stepFindings ?? {}), ...(stepFindings as Record<string, any>) };
 
-      // Prepare patient data
+      // Build patient data payload
       const patientDataPayload = {
         name: formData.name,
         age: formData.age,
@@ -194,21 +174,24 @@ export function ReportPage({
         patientHistory: session.patientHistory,
       };
 
-      // Prepare exam findings
+      // Build exam findings payload — include ALL steps + acetic categories + biopsy/swede
       const examFindingsPayload = {
-        native: mergedFindings.native || {},
+        native: mergedFindings.native || session.nativeFindings || {},
         acetowhite: mergedFindings.acetowhite || {},
         greenFilter: mergedFindings.greenFilter || {},
         lugol: mergedFindings.lugol || {},
+        aceticFindings: session.aceticFindings || {},
+        biopsyMarkings: session.biopsyMarkings || {},
       };
 
-      // Call backend API
+      // Call backend — send SYSTEM_PROMPT so Gemini returns strict JSON
       const response = await fetch('/api/generate-report', {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({
           patient_data: patientDataPayload,
           exam_findings: examFindingsPayload,
+          system_prompt: SYSTEM_PROMPT,   // ← tells Gemini to return JSON
         }),
       });
 
@@ -218,21 +201,42 @@ export function ReportPage({
       }
 
       const data = await response.json();
-      
       if (data.status !== 'success' || !data.report) {
         throw new Error('Invalid response from backend');
       }
 
-      // Parse the report text and extract fields
-      // The backend returns a formatted report, we'll try to parse it
-      const reportText = data.report;
-      
-      // For now, put the entire report in colposcopicFindings
-      // In the future, you could add more sophisticated parsing
+      // Strip possible markdown code fences before parsing
+      let reportText: string = data.report.trim();
+      if (reportText.startsWith('```')) {
+        reportText = reportText.replace(/^```[a-z]*\n?/i, '').replace(/```\s*$/, '').trim();
+      }
+
+      // Parse structured JSON returned by Gemini
+      let parsed: Record<string, string> = {};
+      try {
+        parsed = JSON.parse(reportText);
+      } catch {
+        // If Gemini didn't return valid JSON, fall back: put full text into colposcopicFindings
+        console.warn('AI response was not valid JSON, using as plain text:', reportText);
+        setFormData(prev => ({ ...prev, colposcopicFindings: reportText }));
+        return;
+      }
+
+      // Map every JSON key to the correct form field
       setFormData(prev => ({
         ...prev,
-        colposcopicFindings: reportText,
+        examQuality: parsed.examQuality ?? prev.examQuality,
+        transformationZone: parsed.transformationZone ?? prev.transformationZone,
+        acetowL: parsed.acetowL ?? prev.acetowL,
+        nativeFindings: parsed.nativeFindings ?? prev.nativeFindings,
+        aceticFindings: parsed.aceticFindings ?? prev.aceticFindings,
+        colposcopicFindings: parsed.colposcopicFindings ?? prev.colposcopicFindings,
+        treatmentPlan: parsed.treatmentPlan ?? prev.treatmentPlan,
+        followUp: parsed.followUp ?? prev.followUp,
+        biopsySites: parsed.biopsySites ?? prev.biopsySites,
+        biopsyNotes: parsed.biopsyNotes ?? prev.biopsyNotes,
       }));
+
     } catch (err: any) {
       console.error('Gemini error:', err);
       const msg = err?.message || err?.toString() || 'Unknown error';
@@ -242,6 +246,7 @@ export function ReportPage({
     }
   };
 
+
   const handleExportPDF = () => {
     if (!reportContentRef.current) return;
 
@@ -477,7 +482,7 @@ export function ReportPage({
                   >
                     <CheckCircle className="w-4 h-6" />
                     Save & Continue
-                    
+
                   </button>
                 </div>
                 {aiError && (
@@ -584,21 +589,21 @@ export function ReportPage({
                         const session = sessionStore.get();
                         const ph = session.patientHistory;
                         if (!ph) return <p className="text-gray-500 italic text-xs">No patient history recorded</p>;
-                        
+
                         const symptoms = [
                           ph.postCoitalBleeding && 'Post-coital bleeding',
                           ph.interMenstrualBleeding && 'Inter-menstrual bleeding',
                           ph.persistentDischarge && 'Persistent discharge',
                         ].filter(Boolean).join(', ');
-                        
+
                         const pastProc = ph.pastProcedures
                           ? Object.entries(ph.pastProcedures).filter(([, v]) => v).map(([k]) => k.toUpperCase()).join(', ')
                           : '';
-                        
+
                         const immunoList = ph.immunosuppression
                           ? Object.entries(ph.immunosuppression).filter(([, v]) => v).map(([k]) => k.toUpperCase()).join(', ')
                           : '';
-                        
+
                         return (
                           <div className="space-y-1.5 text-xs">
                             {/* Pregnancy Status */}
@@ -606,32 +611,32 @@ export function ReportPage({
                             {ph.pregnancyStatus === 'Pregnant' && ph.gestationalAgeWeeks && <p><strong>Gestational Age:</strong> {ph.gestationalAgeWeeks} weeks</p>}
                             {ph.pregnancyStatus === 'Postpartum' && ph.monthsSinceLastDelivery && <p><strong>Months Since Last Delivery:</strong> {ph.monthsSinceLastDelivery}</p>}
                             {ph.pregnancyStatus === 'Post-abortion' && ph.monthsSinceAbortion && <p><strong>Months Since Abortion:</strong> {ph.monthsSinceAbortion}</p>}
-                            
+
                             {/* Demographics & Lifestyle */}
                             {ph.menstrualStatus && <p><strong>Menstrual Status:</strong> {ph.menstrualStatus}</p>}
                             {ph.sexualHistory && <p><strong>Sexual History:</strong> {ph.sexualHistory}</p>}
-                            
+
                             {/* HPV Information */}
                             {ph.hpvStatus && <p><strong>HPV Status:</strong> {ph.hpvStatus}</p>}
                             {ph.hpvVaccination && <p><strong>HPV Vaccination:</strong> {ph.hpvVaccination}</p>}
                             {ph.hpvDnaTypes && <p><strong>HPV DNA Types:</strong> {ph.hpvDnaTypes}</p>}
-                            
+
                             {/* Presenting Symptoms */}
                             {symptoms && <p><strong>Presenting Symptoms:</strong> {symptoms}</p>}
                             {ph.symptomsNotes && <p><strong>Additional Symptoms:</strong> {ph.symptomsNotes}</p>}
-                            
+
                             {/* Screening History */}
                             {ph.papSmearResult && <p><strong>PAP Smear Result:</strong> {ph.papSmearResult}</p>}
                             {ph.screeningNotes && <p><strong>Screening Notes:</strong> {ph.screeningNotes}</p>}
-                            
+
                             {/* Past Procedures */}
                             {pastProc && <p><strong>Past Cervical Procedures:</strong> {pastProc}</p>}
-                            
+
                             {/* Risk Factors */}
                             {ph.smoking && <p><strong>Smoking History:</strong> {ph.smoking}</p>}
                             {immunoList && <p><strong>Immunosuppression:</strong> {immunoList}</p>}
                             {ph.riskFactorsNotes && <p><strong>Risk Factors Notes:</strong> {ph.riskFactorsNotes}</p>}
-                            
+
                             {/* Additional Patient Notes */}
                             {ph.patientProfileNotes && <p><strong>Patient Profile Notes:</strong> {ph.patientProfileNotes}</p>}
                           </div>
@@ -645,33 +650,72 @@ export function ReportPage({
                     <div className="bg-[#05998c]/8 border-l-4 border-[#05998c] px-4 py-2.5 print:py-1.5">
                       <h3 className="text-xs font-bold text-[#05998c] uppercase tracking-wider print:text-[10px]">Examination Findings</h3>
                     </div>
-                    <div className="p-4 print:p-2 grid grid-cols-1 md:grid-cols-2 gap-4 print:gap-3">
-                      {/* Native Examination Findings */}
-                      <div className="border border-gray-200 rounded-lg p-3 print:border-gray-300">
-                        <h4 className="text-xs font-bold text-[#047569] mb-2 print:mb-1">📷 Native Examination</h4>
-                        {formData.nativeFindings ? (
-                          <div className="text-xs whitespace-pre-wrap">{formData.nativeFindings}</div>
-                        ) : (
-                          <p className="text-gray-500 italic text-xs">Click &quot;Generate with AI&quot; to populate findings</p>
-                        )}
+                    <div className="p-4 print:p-2 space-y-3 print:space-y-2">
+                      {/* Exam Quality / TZ / Acetowhite row */}
+                      <div className="grid grid-cols-1 md:grid-cols-3 gap-3 print:gap-2">
+                        <div>
+                          <span className="text-[10px] font-bold text-[#05998c] uppercase tracking-wide print:text-[9px] block mb-1">Exam Quality</span>
+                          <input
+                            type="text"
+                            value={formData.examQuality}
+                            onChange={(e) => handleFormChange('examQuality', e.target.value)}
+                            placeholder="Adequate / Inadequate"
+                            className="block w-full font-medium text-gray-900 py-1 print:py-0.5 print:text-xs border-b-2 border-gray-200 focus:border-[#05998c] outline-none bg-transparent transition-colors print:border-gray-400"
+                          />
+                        </div>
+                        <div>
+                          <span className="text-[10px] font-bold text-[#05998c] uppercase tracking-wide print:text-[9px] block mb-1">Transformation Zone</span>
+                          <input
+                            type="text"
+                            value={formData.transformationZone}
+                            onChange={(e) => handleFormChange('transformationZone', e.target.value)}
+                            placeholder="Type I / II / III"
+                            className="block w-full font-medium text-gray-900 py-1 print:py-0.5 print:text-xs border-b-2 border-gray-200 focus:border-[#05998c] outline-none bg-transparent transition-colors print:border-gray-400"
+                          />
+                        </div>
+                        <div>
+                          <span className="text-[10px] font-bold text-[#05998c] uppercase tracking-wide print:text-[9px] block mb-1">Acetowhite Lesion</span>
+                          <input
+                            type="text"
+                            value={formData.acetowL}
+                            onChange={(e) => handleFormChange('acetowL', e.target.value)}
+                            placeholder="Present / Absent"
+                            className="block w-full font-medium text-gray-900 py-1 print:py-0.5 print:text-xs border-b-2 border-gray-200 focus:border-[#05998c] outline-none bg-transparent transition-colors print:border-gray-400"
+                          />
+                        </div>
                       </div>
-                      
-                      {/* Acetic Acid Findings */}
-                      <div className="border border-gray-200 rounded-lg p-3 print:border-gray-300">
-                        <h4 className="text-xs font-bold text-[#047569] mb-2 print:mb-1">🔬 Acetic Acid Findings</h4>
-                        {formData.aceticFindings ? (
-                          <div className="text-xs whitespace-pre-wrap">{formData.aceticFindings}</div>
-                        ) : (
-                          <p className="text-gray-500 italic text-xs">Click &quot;Generate with AI&quot; to populate findings</p>
-                        )}
+
+                      {/* Native & Acetic findings side-by-side */}
+                      <div className="grid grid-cols-1 md:grid-cols-2 gap-3 print:gap-2">
+                        <div className="border border-gray-200 rounded-lg p-3 print:border-gray-300">
+                          <h4 className="text-xs font-bold text-[#047569] mb-2 print:mb-1">� Native Examination</h4>
+                          <textarea
+                            value={formData.nativeFindings}
+                            onChange={(e) => handleFormChange('nativeFindings', e.target.value)}
+                            placeholder="Click &quot;Generate with AI&quot; to populate findings"
+                            className="w-full text-gray-900 text-xs border border-gray-200 focus:border-[#05998c] outline-none bg-transparent p-2 print:p-1 resize-none rounded transition-colors"
+                            rows={4}
+                          />
+                        </div>
+                        <div className="border border-gray-200 rounded-lg p-3 print:border-gray-300">
+                          <h4 className="text-xs font-bold text-[#047569] mb-2 print:mb-1">🔬 Acetic Acid Findings</h4>
+                          <textarea
+                            value={formData.aceticFindings}
+                            onChange={(e) => handleFormChange('aceticFindings', e.target.value)}
+                            placeholder="Click &quot;Generate with AI&quot; to populate findings"
+                            className="w-full text-gray-900 text-xs border border-gray-200 focus:border-[#05998c] outline-none bg-transparent p-2 print:p-1 resize-none rounded transition-colors"
+                            rows={4}
+                          />
+                        </div>
                       </div>
                     </div>
                   </div>
 
+
                   {/* ── EXAMINATION IMAGES ──────────────────────────── */}
-                  <div 
+                  <div
                     className="border border-gray-200 rounded-xl overflow-hidden print:rounded-none print:border-gray-300"
-                    style={{  marginTop: '150px' }}
+                    style={{ marginTop: '150px' }}
                   >
                     <div className="bg-[#05998c]/8 border-l-4 border-[#05998c] px-4 py-2.5 print:py-1.5">
                       <h3 className="text-xs font-bold text-[#05998c] uppercase tracking-wider print:text-[10px]">Examination Images</h3>
@@ -769,7 +813,7 @@ export function ReportPage({
                                   <p><strong>Iodine Staining:</strong> {bm.swedeScores.iodineStaining ?? 0}/2</p>
                                 </div>
                               </div>
-                              
+
                               {/* Total Score & Risk */}
                               <div className="bg-gradient-to-br from-[#05998c] to-[#047569] rounded-lg p-3 print:bg-white print:border print:border-teal-200 text-white print:text-gray-900">
                                 <p className="text-[10px] font-bold uppercase tracking-wide mb-2 print:mb-1 opacity-90 print:opacity-100">Total Score</p>
@@ -799,13 +843,13 @@ export function ReportPage({
                         <span className="text-[10px] font-bold text-[#05998c] uppercase tracking-wide print:text-[9px] block mb-1">Colposcopic Findings (Including Swede Score)</span>
                         <textarea value={formData.colposcopicFindings} onChange={(e) => handleFormChange('colposcopicFindings', e.target.value)} placeholder="Describe colposcopic findings and include Swede score interpretation..." className="w-full text-gray-900 print:text-xs border border-gray-200 focus:border-[#05998c] outline-none bg-white p-2 print:p-1 resize-none rounded transition-colors" rows={3} />
                       </div>
-                      
+
                       {/* Treatment Plan */}
                       <div>
                         <span className="text-[10px] font-bold text-[#05998c] uppercase tracking-wide print:text-[9px] block mb-1">Treatment Plan</span>
                         <textarea value={formData.treatmentPlan} onChange={(e) => handleFormChange('treatmentPlan', e.target.value)} placeholder="Recommended treatment plan..." className="w-full text-gray-900 print:text-xs border border-gray-200 focus:border-[#05998c] outline-none bg-transparent p-2 print:p-1 resize-none rounded transition-colors" rows={3} />
                       </div>
-                      
+
                       {/* Follow-up Plan */}
                       <div>
                         <span className="text-[10px] font-bold text-[#05998c] uppercase tracking-wide print:text-[9px] block mb-1">Follow-up Plan</span>

vite.config.ts

@@ -4,4 +4,18 @@ import react from '@vitejs/plugin-react'
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [react()],
+  server: {
+    proxy: {
+      // Forward all /api/* requests to the FastAPI backend
+      '/api': {
+        target: 'http://localhost:8000',
+        changeOrigin: true,
+      },
+      // Forward all /infer/* requests to the FastAPI backend
+      '/infer': {
+        target: 'http://localhost:8000',
+        changeOrigin: true,
+      },
+    },
+  },
 })