Update backend and UI; add models

.gitattributes

@@ -5,3 +5,4 @@
 *.bmp filter=lfs diff=lfs merge=lfs -text
 *.webp filter=lfs diff=lfs merge=lfs -text
 *.mp4 filter=lfs diff=lfs merge=lfs -text
+*.pt filter=lfs diff=lfs merge=lfs -text

.gitignore

@@ -12,6 +12,13 @@ dist
 dist-ssr
 *.local
 
+# Python
+__pycache__/
+*.py[cod]
+*.pyo
+*.pyd
+.venv/
+
 # Editor directories and files
 .vscode/*
 !.vscode/extensions.json

backend/app.py

@@ -0,0 +1,218 @@
+from fastapi import FastAPI, File, UploadFile, HTTPException
+from fastapi.responses import JSONResponse
+from fastapi.middleware.cors import CORSMiddleware
+import cv2
+import numpy as np
+import tempfile
+import os
+from io import BytesIO
+from PIL import Image
+import uvicorn
+from inference import infer_aw_contour, analyze_frame, analyze_video_frame
+
+app = FastAPI(title="Pathora Colposcopy API", version="1.0.0")
+
+# Add CORS middleware to allow requests from frontend
+app.add_middleware(
+    CORSMiddleware,
+    allow_origins=["*"],
+    allow_credentials=True,
+    allow_methods=["*"],
+    allow_headers=["*"],
+)
+
+
+@app.get("/health")
+async def health_check():
+    """Health check endpoint"""
+    return {"status": "healthy", "service": "Pathora Colposcopy API"}
+
+
+@app.post("/api/infer-aw-contour")
+async def infer_aw_contour_endpoint(file: UploadFile = File(...), conf_threshold: float = 0.4):
+    """
+    Inference endpoint for Acetowhite contour detection
+    
+    Args:
+        file: Image file (jpg, png, etc.)
+        conf_threshold: Confidence threshold for YOLO model (0.0-1.0)
+    
+    Returns:
+        JSON with base64 encoded result image
+    """
+    try:
+        # Read image file
+        image_data = await file.read()
+        
+        # Try to open image - this will work regardless of content type
+        try:
+            image = Image.open(BytesIO(image_data))
+        except Exception as e:
+            raise HTTPException(status_code=400, detail=f"Invalid image file: {str(e)}")
+        
+        # Convert to numpy array and BGR format (OpenCV uses BGR)
+        # Handle different image modes
+        if image.mode == 'RGBA':
+            # Convert RGBA to RGB
+            image = image.convert('RGB')
+        elif image.mode != 'RGB':
+            # Convert other modes to RGB
+            image = image.convert('RGB')
+        
+        frame = cv2.cvtColor(np.array(image), cv2.COLOR_RGB2BGR)
+        
+        # Run inference - returns dict with 'overlay', 'contours', 'detections', etc.
+        result = infer_aw_contour(frame, conf_threshold=conf_threshold)
+        
+        # Convert result overlay back to RGB for JSON serialization
+        if result["overlay"] is not None:
+            result_rgb = cv2.cvtColor(result["overlay"], cv2.COLOR_BGR2RGB)
+            result_image = Image.fromarray(result_rgb)
+            
+            # Encode to base64
+            buffer = BytesIO()
+            result_image.save(buffer, format="PNG")
+            buffer.seek(0)
+            import base64
+            image_base64 = base64.b64encode(buffer.getvalue()).decode()
+        else:
+            image_base64 = None
+        
+        return JSONResponse({
+            "status": "success",
+            "message": "Inference completed successfully",
+            "result_image": image_base64,
+            "contours": result["contours"],
+            "detections": result["detections"],
+            "confidence_threshold": conf_threshold
+        })
+    
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=f"Error during inference: {str(e)}")
+
+
+@app.post("/api/batch-infer")
+async def batch_infer(files: list[UploadFile] = File(...), conf_threshold: float = 0.4):
+    """
+    Batch inference endpoint for multiple images
+    
+    Args:
+        files: List of image files
+        conf_threshold: Confidence threshold for YOLO model
+    
+    Returns:
+        JSON with results for all images
+    """
+    results = []
+    
+    for file in files:
+        try:
+            image_data = await file.read()
+            image = Image.open(BytesIO(image_data))
+            
+            # Handle different image modes
+            if image.mode == 'RGBA':
+                image = image.convert('RGB')
+            elif image.mode != 'RGB':
+                image = image.convert('RGB')
+            
+            frame = cv2.cvtColor(np.array(image), cv2.COLOR_RGB2BGR)
+            
+            # Run inference - returns dict with 'overlay', 'contours', 'detections', etc.
+            result = infer_aw_contour(frame, conf_threshold=conf_threshold)
+            
+            if result["overlay"] is not None:
+                result_rgb = cv2.cvtColor(result["overlay"], cv2.COLOR_BGR2RGB)
+                result_image = Image.fromarray(result_rgb)
+                
+                buffer = BytesIO()
+                result_image.save(buffer, format="PNG")
+                buffer.seek(0)
+                import base64
+                image_base64 = base64.b64encode(buffer.getvalue()).decode()
+            else:
+                image_base64 = None
+            
+            results.append({
+                "filename": file.filename,
+                "status": "success",
+                "result_image": image_base64,
+                "contours": result["contours"],
+                "detections": result["detections"]
+            })
+        
+        except Exception as e:
+            results.append({
+                "filename": file.filename,
+                "status": "error",
+                "error": str(e)
+            })
+    
+    return JSONResponse({
+        "status": "completed",
+        "total_files": len(results),
+        "results": results
+    })
+
+
+@app.post("/infer/image")
+async def infer_image(file: UploadFile = File(...)):
+    """
+    Single image inference endpoint for cervix detection/quality.
+    """
+    try:
+        contents = await file.read()
+        nparr = np.frombuffer(contents, np.uint8)
+        frame = cv2.imdecode(nparr, cv2.IMREAD_COLOR)
+
+        result = analyze_frame(frame)
+
+        return JSONResponse(content=result)
+
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=str(e))
+
+
+@app.post("/infer/video")
+async def infer_video(file: UploadFile = File(...)):
+    """
+    Video inference endpoint for cervix detection/quality (frame-by-frame).
+    """
+    try:
+        with tempfile.NamedTemporaryFile(delete=False) as tmp:
+            tmp.write(await file.read())
+            temp_path = tmp.name
+
+        cap = cv2.VideoCapture(temp_path)
+
+        responses = []
+        frame_count = 0
+
+        while True:
+            ret, frame = cap.read()
+            if not ret:
+                break
+
+            result = analyze_video_frame(frame)
+            responses.append({
+                "frame": frame_count,
+                "status": result["status"],
+                "quality_percent": result["quality_percent"]
+            })
+
+            frame_count += 1
+
+        cap.release()
+        os.remove(temp_path)
+
+        return JSONResponse(content={
+            "total_frames": frame_count,
+            "results": responses
+        })
+
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=str(e))
+
+
+if __name__ == "__main__":
+    uvicorn.run(app, host="0.0.0.0", port=8000)

backend/inference.py

@@ -0,0 +1,214 @@
+#------------------------------------------------
+# Acetowhite Contour Inference
+# -----------------------------------------------
+import os
+import cv2
+import numpy as np
+from ultralytics import YOLO
+
+# MODEL LOAD (Safe Backend Path)
+AW_MODEL_PATH = os.path.join(os.path.dirname(__file__), "models", "AW_yolo.pt")
+aw_model = YOLO(AW_MODEL_PATH)
+
+print("Acetowhite model loaded from:", AW_MODEL_PATH)
+
+# CONFIGURABLE PARAMETERS
+MIN_AREA = 150            # minimum contour area (px)
+SMOOTHING_EPSILON = 0.002 # polygon smoothing factor
+DEFAULT_CONF = 0.4        # default confidence threshold
+IMG_SIZE = 640            # inference size
+
+# MAIN INFERENCE FUNCTION
+def infer_aw_contour(frame, conf_threshold=DEFAULT_CONF):
+
+    if frame is None:
+        return {
+            "overlay": None,
+            "contours": [],
+            "detections": 0,
+            "frame_width": 0,
+            "frame_height": 0
+        }
+
+    results = aw_model.predict(
+        frame,
+        conf=conf_threshold,
+        imgsz=IMG_SIZE,
+        verbose=False
+    )[0]
+
+    overlay = frame.copy()
+    contours_list = []
+    detection_count = 0
+
+    if results.masks is not None and len(results.masks.xy) > 0:
+
+        for idx, polygon in enumerate(results.masks.xy):
+
+            confidence = float(results.boxes.conf[idx])
+
+            # Skip low-confidence masks (extra safety layer)
+            if confidence < conf_threshold:
+                continue
+
+            contour = polygon.astype(np.int32)
+
+            area = cv2.contourArea(contour)
+
+            if area < MIN_AREA:
+                continue
+
+            # Optional smoothing
+            epsilon = SMOOTHING_EPSILON * cv2.arcLength(contour, True)
+            contour = cv2.approxPolyDP(contour, epsilon, True)
+
+            # Draw clean contour
+            cv2.polylines(
+                overlay,
+                [contour],
+                isClosed=True,
+                color=(0, 255, 0),
+                thickness=2
+            )
+
+            contours_list.append({
+                "points": contour.tolist(),
+                "area": float(area),
+                "confidence": round(confidence, 3)
+            })
+
+            detection_count += 1
+
+    return {
+        "overlay": overlay,
+        "contours": contours_list,
+        "detections": detection_count,
+        "frame_width": frame.shape[1],
+        "frame_height": frame.shape[0]
+    }
+
+#-----------------------------------------------
+# Cervical and Image Quality Check Inference
+# ----------------------------------------------
+import cv2
+import numpy as np
+from ultralytics import YOLO
+from collections import deque
+
+cervix_MODEL_PATH = os.path.join(os.path.dirname(__file__), "models", "cervix_yolo.pt")
+cervix_model = YOLO(cervix_MODEL_PATH)
+
+print("Cervix model loaded from:", cervix_MODEL_PATH)
+print("Classes:", cervix_model.model.names)
+
+# Stability buffer for video
+detect_history = deque(maxlen=10)
+
+# QUALITY COMPONENT FUNCTIONS
+def compute_focus(gray_roi):
+    focus = cv2.Laplacian(gray_roi, cv2.CV_64F).var()
+    return min(focus / 200, 1.0)
+
+
+def compute_exposure(gray_roi):
+    exposure = np.mean(gray_roi)
+    if 70 <= exposure <= 180:
+        return 1.0
+    return max(0, 1 - abs(exposure - 125) / 125)
+
+
+def compute_glare(gray_roi):
+    _, thresh = cv2.threshold(gray_roi, 240, 255, cv2.THRESH_BINARY)
+    glare_ratio = np.sum(thresh == 255) / gray_roi.size
+
+    if glare_ratio < 0.01:
+        return 1.0
+    elif glare_ratio < 0.03:
+        return 0.7
+    elif glare_ratio < 0.06:
+        return 0.4
+    else:
+        return 0.1
+
+# MAIN FRAME ANALYSIS
+
+def analyze_frame(frame, conf_threshold=0.3):
+
+    if frame is None:
+        return {
+            "detected": False,
+            "detection_confidence": 0.0,
+            "quality_score": 0.0,
+            "quality_percent": 0
+        }
+
+    gray = cv2.cvtColor(frame, cv2.COLOR_BGR2GRAY)
+
+    results = cervix_model.predict(
+        frame,
+        conf=conf_threshold,
+        imgsz=640,
+        verbose=False
+    )
+
+    r = results[0]
+
+    if r.boxes is None or len(r.boxes) == 0:
+        return {
+            "detected": False,
+            "detection_confidence": 0.0,
+            "quality_score": 0.0,
+            "quality_percent": 0
+        }
+
+    # Take highest confidence box
+    box = r.boxes.xyxy.cpu().numpy()[0].astype(int)
+    detection_conf = float(r.boxes.conf.cpu().numpy()[0])
+
+    x1, y1, x2, y2 = box
+    roi = gray[y1:y2, x1:x2]
+
+    if roi.size == 0:
+        return {
+            "detected": False,
+            "detection_confidence": detection_conf,
+            "quality_score": 0.0,
+            "quality_percent": 0
+        }
+
+    # ---- Quality components ----
+    focus_n = compute_focus(roi)
+    exposure_n = compute_exposure(roi)
+    glare_n = compute_glare(roi)
+
+    quality_score = (
+        0.35 * focus_n +
+        0.30 * exposure_n +
+        0.35 * glare_n
+    )
+
+    return {
+        "detected": True,
+        "detection_confidence": round(detection_conf, 3),
+        "quality_score": round(float(quality_score), 3),
+        "quality_percent": int(quality_score * 100),
+        "focus_score": round(float(focus_n), 3),
+        "exposure_score": round(float(exposure_n), 3),
+        "glare_score": round(float(glare_n), 3)
+    }
+
+# VIDEO STABILITY ANALYSIS
+
+def analyze_video_frame(frame, conf_threshold=0.3):
+    result = analyze_frame(frame, conf_threshold)
+    detect_history.append(1 if result["detected"] else 0)
+    stable_count = sum(detect_history)
+
+    if stable_count >= 7:
+        result["status"] = "Cervix Detected (Stable)"
+    elif stable_count > 0:
+        result["status"] = "Cervix Detected (Unstable)"
+    else:
+        result["status"] = "Searching Cervix"
+
+    return result

backend/models/AW_yolo.pt

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:46b5513bc0cc3b416c2f8e89f220cf2715a2282c956a022b0c5ab5e38d54723b
+size 6768948

backend/models/cervix_yolo.pt

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:baf68aff5a06a22124cda181a6c50204efafe2150121b66642c83ba4ea916898
+size 6249194

backend/requirements.txt

@@ -0,0 +1,10 @@
+fastapi==0.109.0
+uvicorn==0.27.0
+opencv-python==4.9.0.80
+numpy==1.24.3
+torch==2.2.0
+torchvision==0.17.0
+ultralytics==8.1.0
+pillow==10.2.0
+python-multipart==0.0.6
+setuptools>=69.0.0

src/components/AceticAnnotator.tsx

@@ -31,12 +31,27 @@ interface AceticAnnotatorProps {
 
 export interface AceticAnnotatorHandle {
   addAIAnnotations: (aiAnnotations: Annotation[]) => void;
+  setImageIndex: (index: number) => void;
+  getCurrentImageIndex: () => number;
+  clearAIAnnotations: () => void;
+  clearAllAnnotations: () => void;
+  resetViewport: () => void;
+  waitForImageReady: () => Promise<void>;
+  runAIAssist: () => Promise<void>;
 }
 
 const AceticAnnotatorComponent = forwardRef<AceticAnnotatorHandle, AceticAnnotatorProps>(({ imageUrl, imageUrls, onAnnotationsChange }, ref) => {
   const canvasRef = useRef<HTMLCanvasElement | null>(null);
   const containerRef = useRef<HTMLDivElement | null>(null);
-  const [annotations, setAnnotations] = useState<Annotation[]>([]);
+  const imageReadyResolveRef = useRef<(() => void) | null>(null);
+  const emptyAnnotationsRef = useRef<Annotation[]>([]);
+  const cachedImagesRef = useRef<Record<string, HTMLImageElement>>({});
+  const pendingDrawAnimationRef = useRef<number | null>(null);
+  const lastDrawStateRef = useRef<string>('');
+  
+  // Store annotations per image index
+  const [annotationsByImage, setAnnotationsByImage] = useState<Record<number, Annotation[]>>({});
+  
   const [tool, setTool] = useState<ShapeType>('rect');
   const [color, setColor] = useState('#05998c');
   const [labelInput, setLabelInput] = useState('');
@@ -63,6 +78,25 @@ const AceticAnnotatorComponent = forwardRef<AceticAnnotatorHandle, AceticAnnotat
   const [annotationIdentified, setAnnotationIdentified] = useState<Record<string, boolean>>({});
   const [annotationAccepted, setAnnotationAccepted] = useState<Record<string, boolean>>({});
   
+  // AI state
+  const [isAILoading, setIsAILoading] = useState(false);
+  const [aiError, setAIError] = useState<string | null>(null);
+  
+  // Get annotations for current image
+  const annotations = annotationsByImage[selectedImageIndex] ?? emptyAnnotationsRef.current;
+  
+  // Helper to update annotations for current image
+  const setAnnotations = (updater: Annotation[] | ((prev: Annotation[]) => Annotation[])) => {
+    setAnnotationsByImage(prev => {
+      const currentAnnotations = prev[selectedImageIndex] || [];
+      const newAnnotations = typeof updater === 'function' ? updater(currentAnnotations) : updater;
+      return {
+        ...prev,
+        [selectedImageIndex]: newAnnotations
+      };
+    });
+  };
+  
   // Predefined label options for Acetic Acid step (ONLY CHANGE from ImageAnnotator)
   const labelOptions = [
     'Acetowhite',
@@ -120,33 +154,384 @@ const AceticAnnotatorComponent = forwardRef<AceticAnnotatorHandle, AceticAnnotat
     }));
   };
 
-  // Expose addAIAnnotations method via ref
+  // Helper function to get bounding box from polygon points
+  const getBoundsFromPoints = (points: any[]) => {
+    if (!points || !Array.isArray(points) || points.length === 0) {
+      console.warn('⚠️ Invalid points array in getBoundsFromPoints:', points);
+      return { x: 0, y: 0, width: 0, height: 0 };
+    }
+    
+    // Handle both array [x, y] and object {x, y} formats
+    const getX = (p: any) => Array.isArray(p) ? p[0] : (p?.x ?? 0);
+    const getY = (p: any) => Array.isArray(p) ? p[1] : (p?.y ?? 0);
+    
+    const xs = points.map(getX).filter(x => typeof x === 'number' && !isNaN(x));
+    const ys = points.map(getY).filter(y => typeof y === 'number' && !isNaN(y));
+    
+    if (xs.length === 0 || ys.length === 0) {
+      console.warn('⚠️ No valid coordinates in points:', points);
+      return { x: 0, y: 0, width: 0, height: 0 };
+    }
+    const minX = Math.min(...xs);
+    const minY = Math.min(...ys);
+    const maxX = Math.max(...xs);
+    const maxY = Math.max(...ys);
+    return { x: minX, y: minY, width: maxX - minX, height: maxY - minY };
+  };
+
+  // AI Assist - Run acetowhite contour detection on current image
+  const runAIAssist = async () => {
+    const images = imageUrls || (imageUrl ? [imageUrl] : []);
+    if (images.length === 0) {
+      setAIError('No images available to analyze');
+      return;
+    }
+
+    const currentImageUrl = images[selectedImageIndex];
+
+    setIsAILoading(true);
+    setAIError(null);
+
+    try {
+      // Ensure image is loaded first
+      if (!imageLoaded || imageDimensions.width === 0 || imageDimensions.height === 0) {
+        console.log('⏳ Waiting for image to load before AI processing...');
+        await new Promise<void>((resolve) => {
+          imageReadyResolveRef.current = resolve;
+        });
+      }
+
+      const response = await fetch(currentImageUrl);
+      const blob = await response.blob();
+
+      const formData = new FormData();
+      formData.append('file', blob, 'image.jpg');
+      formData.append('conf_threshold', '0.4');
+
+      console.log('🚀 Sending to backend with image dimensions:', imageDimensions);
+
+      const backendResponse = await fetch('http://localhost:8000/api/infer-aw-contour', {
+        method: 'POST',
+        body: formData,
+      });
+
+      if (!backendResponse.ok) {
+        throw new Error(`Backend error: ${backendResponse.statusText}`);
+      }
+
+      const result = await backendResponse.json();
+
+      console.log('📥 Backend response received');
+
+      if (result.status !== 'success') {
+        throw new Error(result.error || 'AI inference failed');
+      }
+
+      if (!result.contours || !Array.isArray(result.contours)) {
+        console.warn('⚠️ Invalid contours format:', result.contours);
+        setAIError('Invalid response format from server');
+        setIsAILoading(false);
+        return;
+      }
+
+      const contours = result.contours;
+      if (contours.length === 0) {
+        console.log('ℹ️ No contours detected');
+        setAIError('No contours detected for this image');
+        setIsAILoading(false);
+        return;
+      }
+
+      console.log(`✅ Processing ${contours.length} contour(s)`);
+
+
+      const aiAnnotations = contours
+        .filter((contour: any) => contour !== null && contour !== undefined)
+        .map((contour: any, idx: number) => {
+          let points: { x: number; y: number }[];
+          let area: number | undefined;
+          let confidence: number | undefined;
+
+          if (!contour) {
+            console.warn(`⚠️ Contour ${idx} is null or undefined`);
+            return null;
+          }
+
+          // Handle two formats:
+          // 1. OLD: contour is an array of [x, y] pairs: [[x,y], [x,y], ...]
+          // 2. NEW: contour is an object: {points: [[x,y], ...], area: ..., confidence: ...}
+          
+          if (Array.isArray(contour)) {
+            // OLD FORMAT: contour is directly an array of points
+            try {
+              // Use points directly as-is from backend
+              points = contour as any[];
+              
+              // Handle OpenCV format: [[[x, y]], [[x, y]], ...] (nested arrays)
+              if (Array.isArray(contour[0]) && Array.isArray(contour[0][0])) {
+                points = contour.map((p: any) => {
+                  if (Array.isArray(p) && Array.isArray(p[0])) {
+                    return p[0]; // Extract [x, y] from [[x, y]]
+                  }
+                  return p;
+                });
+              }
+            } catch (e) {
+              console.warn(`⚠️ Error processing contour ${idx}:`, e);
+              return null;
+            }
+            area = undefined;
+            confidence = undefined;
+          } else if (contour && typeof contour === 'object' && contour.points && Array.isArray(contour.points)) {
+            // NEW FORMAT: contour is an object with points property
+            try {
+              // Use points directly as-is from backend
+              points = contour.points as any[];
+              
+              // Handle OpenCV format: [[[x, y]], [[x, y]], ...] (nested arrays)
+              if (Array.isArray(contour.points[0]) && Array.isArray(contour.points[0][0])) {
+                points = contour.points.map((p: any) => {
+                  if (Array.isArray(p) && Array.isArray(p[0])) {
+                    return p[0]; // Extract [x, y] from [[x, y]]
+                  }
+                  return p;
+                });
+              }
+            } catch (e) {
+              console.warn(`⚠️ Error processing contour points ${idx}:`, e);
+              return null;
+            }
+            area = contour.area;
+            confidence = contour.confidence;
+          } else {
+            console.warn(`⚠️ Invalid contour format at index ${idx}:`, contour);
+            return null;
+          }
+
+          if (!points || points.length < 3) {
+            console.warn(`⚠️ Contour ${idx} has insufficient points (${points?.length || 0})`);
+            return null;
+          }
+
+          // Normalize point scale if backend returns normalized (0-1) or percent (0-100) coordinates
+          let scaledPoints = points;
+          
+          if (imageDimensions.width > 0 && imageDimensions.height > 0) {
+            // Helper to extract x from various formats
+            const getX = (p: any) => {
+              if (Array.isArray(p) && typeof p[0] === 'number') return p[0];
+              if (Array.isArray(p) && Array.isArray(p[0])) return p[0][0];
+              if (typeof p === 'object' && p !== null) return p.x;
+              return undefined;
+            };
+            
+            // Helper to extract y from various formats
+            const getY = (p: any) => {
+              if (Array.isArray(p) && typeof p[0] === 'number') return p[1];
+              if (Array.isArray(p) && Array.isArray(p[0])) return p[0][1];
+              if (typeof p === 'object' && p !== null) return p.y;
+              return undefined;
+            };
+            
+            const xValues = points.map(getX).filter(x => typeof x === 'number' && !isNaN(x));
+            const yValues = points.map(getY).filter(y => typeof y === 'number' && !isNaN(y));
+            
+            if (xValues.length === 0 || yValues.length === 0) {
+              // Fallback: assume [x, y] or [[x, y]] array format
+              scaledPoints = points.map((p) => {
+                let x, y;
+                if (Array.isArray(p) && Array.isArray(p[0])) {
+                  x = Number(p[0][0]);
+                  y = Number(p[0][1]);
+                } else if (Array.isArray(p) && p.length >= 2) {
+                  x = Number(p[0]);
+                  y = Number(p[1]);
+                } else {
+                  x = NaN;
+                  y = NaN;
+                }
+                return { x, y };
+              });
+            } else {
+              const maxX = Math.max(...xValues);
+              const maxY = Math.max(...yValues);
+              
+              if (maxX <= 1 && maxY <= 1) {
+                scaledPoints = points.map(p => {
+                  const x = getX(p);
+                  const y = getY(p);
+                  return { x: x * imageDimensions.width, y: y * imageDimensions.height };
+                });
+              } else if (maxX <= 100 && maxY <= 100) {
+                scaledPoints = points.map(p => {
+                  const x = getX(p);
+                  const y = getY(p);
+                  return { x: (x / 100) * imageDimensions.width, y: (y / 100) * imageDimensions.height };
+                });
+              } else {
+                scaledPoints = points.map(p => {
+                  const x = getX(p);
+                  const y = getY(p);
+                  return { x: Number(x), y: Number(y) };
+                });
+              }
+            }
+          } else {
+            // No image dimensions yet, just convert to {x, y} format
+            scaledPoints = points.map(p => {
+              let x, y;
+              if (Array.isArray(p) && Array.isArray(p[0])) {
+                x = Number(p[0][0]);
+                y = Number(p[0][1]);
+              } else if (Array.isArray(p) && p.length >= 2) {
+                x = Number(p[0]);
+                y = Number(p[1]);
+              } else if (typeof p === 'object' && p !== null) {
+                x = Number(p.x);
+                y = Number(p.y);
+              } else {
+                x = NaN;
+                y = NaN;
+              }
+              return { x, y };
+            });
+          }
+
+          const bounds = getBoundsFromPoints(scaledPoints);
+          const annotation = {
+            id: `ai_${Date.now()}_${idx}`,
+            type: 'polygon' as const,
+            x: bounds.x,
+            y: bounds.y,
+            width: bounds.width,
+            height: bounds.height,
+            color: '#05998c',
+            label: 'Acetowhite',
+            points: scaledPoints,
+            source: 'ai' as const,
+            identified: false,
+            accepted: false,
+            confidence: confidence,
+            area: area
+          };
+          
+          return annotation;
+        })
+        .filter(Boolean) as Annotation[];
+
+
+      if (aiAnnotations.length > 0) {
+        // Replace all annotations with new AI annotations
+        // The useEffect will automatically trigger drawCanvas when annotationsByImage updates
+        console.log(`🎨 Setting ${aiAnnotations.length} AI annotations and triggering redraw`);
+        setAnnotations(aiAnnotations);
+      } else {
+        setAIError('No valid contours detected');
+      }
+
+      setIsAILoading(false);
+    } catch (error) {
+      console.error('AI assist error:', error);
+      setAIError(error instanceof Error ? error.message : 'Failed to run AI analysis');
+      setIsAILoading(false);
+    }
+  };
+
+  // Expose annotator methods via ref
   useImperativeHandle(ref, () => ({
     addAIAnnotations: (aiAnnotations: Annotation[]) => {
-      setAnnotations(prev => [...prev, ...aiAnnotations]);
+      setAnnotations(aiAnnotations);
+    },
+    setImageIndex: (index: number) => {
+      setSelectedImageIndex(index);
+    },
+    getCurrentImageIndex: () => {
+      return selectedImageIndex;
+    },
+    clearAIAnnotations: () => {
+      setAnnotations(prev => prev.filter(ann => ann.source !== 'ai'));
+    },
+    clearAllAnnotations: () => {
+      setAnnotations([]);
+      setPolygonPoints([]);
+      setCurrentAnnotation(null);
+    },
+    resetViewport: () => {
+      setSelectedImageIndex(0);
+      setAnnotationsByImage({});  // Clear all images' annotations
+      setPolygonPoints([]);
+      setCurrentAnnotation(null);
+    },
+    runAIAssist: async () => {
+      await runAIAssist();
+    },
+    waitForImageReady: () => {
+      return new Promise<void>((resolve) => {
+        if (imageLoaded) {
+          console.log('✅ Image already ready');
+          resolve();
+        } else {
+          console.log('⏳ Waiting for image to load');
+          imageReadyResolveRef.current = resolve;
+        }
+      });
     }
   }));
 
   const images = imageUrls || (imageUrl ? [imageUrl] : []);
   const currentImageUrl = images[selectedImageIndex];
 
+  // Reset drawing state when switching images (but keep annotations per-image)
+  useEffect(() => {
+    
+    // Clear temporary drawing state only
+    setPolygonPoints([]);
+    setCurrentAnnotation(null);
+    setAnnotationIdentified({});
+    setAnnotationAccepted({});
+    setImageLoaded(false);
+    
+    // Immediately clear the canvas (will be redrawn with correct image's annotations)
+    const canvas = canvasRef.current;
+    if (canvas) {
+      const ctx = canvas.getContext('2d');
+      if (ctx) {
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+      }
+    }
+  }, [selectedImageIndex]);
+
   useEffect(() => {
     const img = new Image();
     img.src = currentImageUrl;
     img.onload = () => {
       setImageDimensions({ width: img.width, height: img.height });
       setImageLoaded(true);
-      drawCanvas();
+      // Resolve waitForImageReady promise if pending
+      if (imageReadyResolveRef.current) {
+        imageReadyResolveRef.current();
+        imageReadyResolveRef.current = null;
+      }
+      // drawCanvas will be called by useEffect when imageLoaded changes
     };
   }, [currentImageUrl]);
 
   useEffect(() => {
     if (imageLoaded) drawCanvas();
-  }, [annotations, currentAnnotation, polygonPoints, imageLoaded]);
+  }, [annotationsByImage, selectedImageIndex, currentAnnotation, polygonPoints, imageLoaded, imageDimensions]);
 
   useEffect(() => {
     if (onAnnotationsChange) onAnnotationsChange(annotations);
   }, [annotations, onAnnotationsChange]);
+  
+  // Cleanup pending draw on unmount
+  useEffect(() => {
+    return () => {
+      if (pendingDrawAnimationRef.current) {
+        cancelAnimationFrame(pendingDrawAnimationRef.current);
+      }
+    };
+  }, []);
 
   const clearAnnotations = () => setAnnotations([]);
   const deleteLastAnnotation = () => setAnnotations(prev => prev.slice(0, -1));
@@ -232,44 +617,82 @@ const AceticAnnotatorComponent = forwardRef<AceticAnnotatorHandle, AceticAnnotat
 
   const cancelPolygon = () => setPolygonPoints([]);
 
-  const getBoundsFromPoints = (pts: Point[]) => {
-    const xs = pts.map(p => p.x);
-    const ys = pts.map(p => p.y);
-    const minX = Math.min(...xs);
-    const minY = Math.min(...ys);
-    const maxX = Math.max(...xs);
-    const maxY = Math.max(...ys);
-    return { x: minX, y: minY, width: maxX - minX, height: maxY - minY };
-  };
-
   const drawCanvas = () => {
     const canvas = canvasRef.current;
     const container = containerRef.current;
     if (!canvas || !container) return;
+    
+    // Cancel previous animation frame if pending
+    if (pendingDrawAnimationRef.current) {
+      cancelAnimationFrame(pendingDrawAnimationRef.current);
+    }
+    
+    // Use requestAnimationFrame for smooth, optimized drawing
+    pendingDrawAnimationRef.current = requestAnimationFrame(() => {
+      performDraw();
+    });
+  };
+  
+  const performDraw = () => {
+    const canvas = canvasRef.current;
+    const container = containerRef.current;
+    if (!canvas || !container) return;
+    
     const ctx = canvas.getContext('2d');
     if (!ctx) return;
-    const img = new Image();
-    img.src = currentImageUrl;
-    img.onload = () => {
-      const containerWidth = container.clientWidth;
-      const aspectRatio = img.height / img.width || 1;
-      const canvasHeight = containerWidth * aspectRatio;
+    
+    // Create state key to prevent redundant draws
+    const currentAnnotations = annotationsByImage[selectedImageIndex] || [];
+    const stateKey = `${selectedImageIndex}-${currentAnnotations.length}-${polygonPoints.length}-${currentAnnotation?.id}`;
+    if (lastDrawStateRef.current === stateKey && canvas.width > 0) {
+      return; // Skip if nothing changed
+    }
+    lastDrawStateRef.current = stateKey;
+    
+    // Get or create cached image
+    let img = cachedImagesRef.current[currentImageUrl];
+    if (!img) {
+      img = new Image();
+      img.src = currentImageUrl;
+      cachedImagesRef.current[currentImageUrl] = img;
+    }
+    
+    // If image not loaded yet, wait for it
+    if (!img.complete) {
+      img.onload = () => performDraw();
+      return;
+    }
+    
+    // Resize canvas if needed
+    const containerWidth = container.clientWidth;
+    const aspectRatio = img.height / img.width || 1;
+    const canvasHeight = containerWidth * aspectRatio;
+    
+    if (canvas.width !== containerWidth || canvas.height !== canvasHeight) {
       canvas.width = containerWidth;
       canvas.height = canvasHeight;
-      ctx.clearRect(0, 0, canvas.width, canvas.height);
-      ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
+    }
+    
+    // Draw image
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
 
-      // draw saved annotations
-      annotations.forEach(a => drawAnnotation(ctx, a, canvas.width, canvas.height));
+    // Draw saved annotations
+    currentAnnotations.forEach((a) => {
+      drawAnnotation(ctx, a, canvas.width, canvas.height);
+    });
 
-      // draw polygon being created
-      if (polygonPoints.length > 0) {
-        drawPreviewPolygon(ctx, polygonPoints, canvas.width, canvas.height, color);
-      }
+    // Draw polygon being created
+    if (polygonPoints.length > 0) {
+      drawPreviewPolygon(ctx, polygonPoints, canvas.width, canvas.height, color);
+    }
 
-      // draw current temp annotation
-      if (currentAnnotation) drawAnnotation(ctx, currentAnnotation, canvas.width, canvas.height);
-    };
+    // Draw current temp annotation
+    if (currentAnnotation) {
+      drawAnnotation(ctx, currentAnnotation, canvas.width, canvas.height);
+    }
+    
+    pendingDrawAnimationRef.current = null;
   };
 
   const drawPreviewPolygon = (ctx: CanvasRenderingContext2D, pts: Point[], canvasWidth: number, canvasHeight: number, col: string) => {
@@ -289,11 +712,13 @@ const AceticAnnotatorComponent = forwardRef<AceticAnnotatorHandle, AceticAnnotat
   };
 
   const drawAnnotation = (ctx: CanvasRenderingContext2D, annotation: Annotation, canvasWidth: number, canvasHeight: number) => {
-    const scaleX = canvasWidth / imageDimensions.width || 1;
-    const scaleY = canvasHeight / imageDimensions.height || 1;
+    const scaleX = imageDimensions.width > 0 ? canvasWidth / imageDimensions.width : 1;
+    const scaleY = imageDimensions.height > 0 ? canvasHeight / imageDimensions.height : 1;
+    
     ctx.strokeStyle = annotation.color;
     ctx.lineWidth = 3;
     ctx.setLineDash([]);
+    
     if (annotation.type === 'rect') {
       ctx.strokeRect(annotation.x * scaleX, annotation.y * scaleY, annotation.width * scaleX, annotation.height * scaleY);
       ctx.fillStyle = annotation.color + '20';
@@ -307,17 +732,34 @@ const AceticAnnotatorComponent = forwardRef<AceticAnnotatorHandle, AceticAnnotat
       ctx.stroke();
       ctx.fillStyle = annotation.color + '20';
       ctx.fill();
-    } else if (annotation.type === 'polygon' && annotation.points) {
+    } else if (annotation.type === 'polygon' && annotation.points && Array.isArray(annotation.points) && annotation.points.length > 0) {
+      console.log(`🎨 Drawing polygon with ${annotation.points.length} points, scale: ${scaleX}x${scaleY}`);
+      
       ctx.beginPath();
+      let validPointsCount = 0;
       annotation.points.forEach((p, i) => {
-        const x = p.x * scaleX;
-        const y = p.y * scaleY;
-        if (i === 0) ctx.moveTo(x, y); else ctx.lineTo(x, y);
+        if (p && typeof p.x === 'number' && typeof p.y === 'number' && Number.isFinite(p.x) && Number.isFinite(p.y)) {
+          const x = p.x * scaleX;
+          const y = p.y * scaleY;
+          if (i === 0) ctx.moveTo(x, y);
+          else ctx.lineTo(x, y);
+          validPointsCount++;
+        } else {
+          console.warn(`⚠️ Invalid point at index ${i}:`, p);
+        }
       });
+      
+      if (validPointsCount < 3) {
+        console.warn(`⚠️ Polygon has only ${validPointsCount} valid points, skipping draw`);
+        return;
+      }
+      
       ctx.closePath();
       ctx.stroke();
       ctx.fillStyle = annotation.color + '20';
       ctx.fill();
+      
+      console.log(`✅ Polygon drawn with ${validPointsCount} points`);
     }
   };
 
@@ -380,30 +822,39 @@ const AceticAnnotatorComponent = forwardRef<AceticAnnotatorHandle, AceticAnnotat
         </div>
       )}
 
-      {/* Tab Switcher */}
-      <div className="flex justify-center">
-        <div className="inline-flex bg-gray-100 rounded-lg p-1 border border-gray-300">
-          <button
-            onClick={() => setActiveTab('annotate')}
-            className={`px-6 py-2 rounded-md font-semibold text-sm transition-all ${
-              activeTab === 'annotate'
-                ? 'bg-[#05998c] text-white shadow-sm'
-                : 'bg-transparent text-gray-700 hover:text-gray-900'
-            }`}
-          >
-            Annotate
-          </button>
-          <button
-            onClick={() => setActiveTab('findings')}
-            className={`px-6 py-2 rounded-md font-semibold text-sm transition-all ${
-              activeTab === 'findings'
-                ? 'bg-[#05998c] text-white shadow-sm'
-                : 'bg-transparent text-gray-700 hover:text-gray-900'
-            }`}
-          >
-            Findings
-          </button>
+      {/* Tab Switcher with AI Assist Button */}
+      <div className="flex justify-between items-center">
+        <div className="flex justify-center flex-1">
+          <div className="inline-flex bg-gray-100 rounded-lg p-1 border border-gray-300">
+            <button
+              onClick={() => setActiveTab('annotate')}
+              className={`px-6 py-2 rounded-md font-semibold text-sm transition-all ${
+                activeTab === 'annotate'
+                  ? 'bg-[#05998c] text-white shadow-sm'
+                  : 'bg-transparent text-gray-700 hover:text-gray-900'
+              }`}
+            >
+              Annotate
+            </button>
+            <button
+              onClick={() => setActiveTab('findings')}
+              className={`px-6 py-2 rounded-md font-semibold text-sm transition-all ${
+                activeTab === 'findings'
+                  ? 'bg-[#05998c] text-white shadow-sm'
+                  : 'bg-transparent text-gray-700 hover:text-gray-900'
+              }`}
+            >
+              Findings
+            </button>
+          </div>
         </div>
+        <button 
+          onClick={runAIAssist} 
+          disabled={isAILoading}
+          className="px-5 py-2.5 text-sm md:text-base font-bold text-white bg-blue-600 border border-blue-600 rounded-lg hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors shadow-md hover:shadow-lg"
+        >
+          {isAILoading ? 'Analyzing...' : '✨ AI Assist'}
+        </button>
       </div>
 
       {/* Annotate Tab */}
@@ -461,6 +912,13 @@ const AceticAnnotatorComponent = forwardRef<AceticAnnotatorHandle, AceticAnnotat
               <button onClick={clearAnnotations} disabled={annotations.length === 0} className="px-3 md:px-4 py-1 md:py-2 text-xs md:text-sm font-medium text-red-600 bg-white border border-red-200 rounded-lg hover:bg-red-50 disabled:opacity-50 disabled:cursor-not-allowed transition-colors">Clear All</button>
             </div>
           </div>
+          
+          {/* AI Error Message */}
+          {aiError && (
+            <div className="bg-red-50 border border-red-200 text-red-700 px-3 py-2 rounded-lg text-xs md:text-sm">
+              {aiError}
+            </div>
+          )}
 
           <div className="flex flex-col">
             <div>

src/components/ImageAnnotator.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState, useRef, useImperativeHandle, forwardRef } from 'react';
-import { Wrench, Trash2, Circle as CircleIcon, Hexagon, Square as SquareIcon, ChevronDown, ChevronUp } from 'lucide-react';
+import { Wrench, Trash2, Circle as CircleIcon, Hexagon, Square as SquareIcon, ChevronDown, ChevronUp, Zap, Loader } from 'lucide-react';
 
 type ShapeType = 'rect' | 'circle' | 'polygon';
 
@@ -27,15 +27,26 @@ interface ImageAnnotatorProps {
   imageUrl?: string;
   imageUrls?: string[];
   onAnnotationsChange?: (annotations: Annotation[]) => void;
+  onAIAssist?: () => Promise<void>;
+  isAILoading?: boolean;
 }
 
 export interface ImageAnnotatorHandle {
   addAIAnnotations: (aiAnnotations: Annotation[]) => void;
+  setImageIndex: (index: number) => void;
+  clearAIAnnotations: () => void;
+  clearAllAnnotations: () => void;
+  resetViewport: () => void;
+  waitForImageReady: () => Promise<void>;
 }
 
-const ImageAnnotatorComponent = forwardRef<ImageAnnotatorHandle, ImageAnnotatorProps>(({ imageUrl, imageUrls, onAnnotationsChange }, ref) => {
+const ImageAnnotatorComponent = forwardRef<ImageAnnotatorHandle, ImageAnnotatorProps>(({ imageUrl, imageUrls, onAnnotationsChange, onAIAssist, isAILoading = false }, ref) => {
   const canvasRef = useRef<HTMLCanvasElement | null>(null);
   const containerRef = useRef<HTMLDivElement | null>(null);
+  const imageReadyResolveRef = useRef<(() => void) | null>(null);
+  const cachedImagesRef = useRef<Record<string, HTMLImageElement>>({});
+  const pendingDrawAnimationRef = useRef<number | null>(null);
+  const lastDrawStateRef = useRef<string>('');
   const [annotations, setAnnotations] = useState<Annotation[]>([]);
   const [tool, setTool] = useState<ShapeType>('rect');
   const [color, setColor] = useState('#05998c');
@@ -79,23 +90,66 @@ const ImageAnnotatorComponent = forwardRef<ImageAnnotatorHandle, ImageAnnotatorP
     label.toLowerCase().includes(labelInput.toLowerCase())
   );
 
-  // Expose addAIAnnotations method via ref
+  // Expose annotator methods via ref
   useImperativeHandle(ref, () => ({
     addAIAnnotations: (aiAnnotations: Annotation[]) => {
-      setAnnotations(prev => [...prev, ...aiAnnotations]);
+      setAnnotations(aiAnnotations);
+    },
+    setImageIndex: (index: number) => {
+      setSelectedImageIndex(index);
+    },
+    clearAIAnnotations: () => {
+      setAnnotations(prev => prev.filter(ann => ann.source !== 'ai'));
+    },
+    clearAllAnnotations: () => {
+      setAnnotations([]);
+      setPolygonPoints([]);
+      setCurrentAnnotation(null);
+    },
+    resetViewport: () => {
+      setSelectedImageIndex(0);
+      setAnnotations([]);
+      setPolygonPoints([]);
+      setCurrentAnnotation(null);
+    },
+    waitForImageReady: () => {
+      return new Promise<void>((resolve) => {
+        if (imageLoaded) {
+          resolve();
+        } else {
+          imageReadyResolveRef.current = resolve;
+        }
+      });
     }
   }));
 
   const images = imageUrls || (imageUrl ? [imageUrl] : []);
   const currentImageUrl = images[selectedImageIndex];
 
+  // Clear annotations when switching to a different image
+  useEffect(() => {
+    console.log('🖼️ Image switched, clearing annotations');
+    setAnnotations([]);
+    setPolygonPoints([]);
+    setCurrentAnnotation(null);
+    setImageLoaded(false);
+  }, [selectedImageIndex]);
+
   useEffect(() => {
     const img = new Image();
     img.src = currentImageUrl;
     img.onload = () => {
+      console.log('✅ Image loaded:', { width: img.width, height: img.height });
       setImageDimensions({ width: img.width, height: img.height });
       setImageLoaded(true);
-      drawCanvas();
+      // Resolve waitForImageReady promise if pending
+      if (imageReadyResolveRef.current) {
+        console.log('🔔 Image ready resolver called');
+        imageReadyResolveRef.current();
+        imageReadyResolveRef.current = null;
+      }
+      // Force immediate canvas redraw with new dimensions
+      setTimeout(() => drawCanvas(), 0);
     };
   }, [currentImageUrl]);
 
@@ -107,6 +161,15 @@ const ImageAnnotatorComponent = forwardRef<ImageAnnotatorHandle, ImageAnnotatorP
     if (onAnnotationsChange) onAnnotationsChange(annotations);
   }, [annotations, onAnnotationsChange]);
 
+  // Cleanup pending draw on unmount
+  useEffect(() => {
+    return () => {
+      if (pendingDrawAnimationRef.current) {
+        cancelAnimationFrame(pendingDrawAnimationRef.current);
+      }
+    };
+  }, []);
+
   const clearAnnotations = () => setAnnotations([]);
   const deleteLastAnnotation = () => setAnnotations(prev => prev.slice(0, -1));
 
@@ -205,30 +268,73 @@ const ImageAnnotatorComponent = forwardRef<ImageAnnotatorHandle, ImageAnnotatorP
     const canvas = canvasRef.current;
     const container = containerRef.current;
     if (!canvas || !container) return;
+    
+    // Cancel previous animation frame if pending
+    if (pendingDrawAnimationRef.current) {
+      cancelAnimationFrame(pendingDrawAnimationRef.current);
+    }
+    
+    // Use requestAnimationFrame for smooth, optimized drawing
+    pendingDrawAnimationRef.current = requestAnimationFrame(() => {
+      performDraw();
+    });
+  };
+  
+  const performDraw = () => {
+    const canvas = canvasRef.current;
+    const container = containerRef.current;
+    if (!canvas || !container) return;
+    
     const ctx = canvas.getContext('2d');
     if (!ctx) return;
-    const img = new Image();
-    img.src = currentImageUrl;
-    img.onload = () => {
-      const containerWidth = container.clientWidth;
-      const aspectRatio = img.height / img.width || 1;
-      const canvasHeight = containerWidth * aspectRatio;
+    
+    // Create state key to prevent redundant draws
+    const stateKey = `${selectedImageIndex}-${annotations.length}-${polygonPoints.length}-${currentAnnotation?.id}`;
+    if (lastDrawStateRef.current === stateKey && canvas.width > 0) {
+      return; // Skip if nothing changed
+    }
+    lastDrawStateRef.current = stateKey;
+    
+    // Get or create cached image
+    let img = cachedImagesRef.current[currentImageUrl];
+    if (!img) {
+      img = new Image();
+      img.src = currentImageUrl;
+      cachedImagesRef.current[currentImageUrl] = img;
+    }
+    
+    // If image not loaded yet, wait for it
+    if (!img.complete) {
+      img.onload = () => performDraw();
+      return;
+    }
+    
+    // Resize canvas if needed
+    const containerWidth = container.clientWidth;
+    const aspectRatio = img.height / img.width || 1;
+    const canvasHeight = containerWidth * aspectRatio;
+    
+    if (canvas.width !== containerWidth || canvas.height !== canvasHeight) {
       canvas.width = containerWidth;
       canvas.height = canvasHeight;
-      ctx.clearRect(0, 0, canvas.width, canvas.height);
-      ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
+    }
+    
+    // Draw image
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
 
-      // draw saved annotations
-      annotations.forEach(a => drawAnnotation(ctx, a, canvas.width, canvas.height));
+    // Draw saved annotations
+    annotations.forEach(a => drawAnnotation(ctx, a, canvas.width, canvas.height));
 
-      // draw polygon being created
-      if (polygonPoints.length > 0) {
-        drawPreviewPolygon(ctx, polygonPoints, canvas.width, canvas.height, color);
-      }
+    // Draw polygon being created
+    if (polygonPoints.length > 0) {
+      drawPreviewPolygon(ctx, polygonPoints, canvas.width, canvas.height, color);
+    }
 
-      // draw current temp annotation
-      if (currentAnnotation) drawAnnotation(ctx, currentAnnotation, canvas.width, canvas.height);
-    };
+    // Draw current temp annotation
+    if (currentAnnotation) drawAnnotation(ctx, currentAnnotation, canvas.width, canvas.height);
+    
+    pendingDrawAnimationRef.current = null;
   };
 
   const drawPreviewPolygon = (ctx: CanvasRenderingContext2D, pts: Point[], canvasWidth: number, canvasHeight: number, col: string) => {
@@ -266,12 +372,14 @@ const ImageAnnotatorComponent = forwardRef<ImageAnnotatorHandle, ImageAnnotatorP
       ctx.stroke();
       ctx.fillStyle = annotation.color + '20';
       ctx.fill();
-    } else if (annotation.type === 'polygon' && annotation.points) {
+    } else if (annotation.type === 'polygon' && annotation.points && Array.isArray(annotation.points) && annotation.points.length > 0) {
       ctx.beginPath();
       annotation.points.forEach((p, i) => {
-        const x = p.x * scaleX;
-        const y = p.y * scaleY;
-        if (i === 0) ctx.moveTo(x, y); else ctx.lineTo(x, y);
+        if (p && typeof p.x === 'number' && typeof p.y === 'number') {
+          const x = p.x * scaleX;
+          const y = p.y * scaleY;
+          if (i === 0) ctx.moveTo(x, y); else ctx.lineTo(x, y);
+        }
       });
       ctx.closePath();
       ctx.stroke();
@@ -383,6 +491,26 @@ const ImageAnnotatorComponent = forwardRef<ImageAnnotatorHandle, ImageAnnotatorP
             )}
           </div>
           <input aria-label="Annotation color" type="color" value={color} onChange={e => setColor(e.target.value)} className="w-10 h-8 p-0 border rounded" />
+          {onAIAssist && (
+            <button 
+              onClick={onAIAssist} 
+              disabled={isAILoading} 
+              className="px-4 md:px-6 py-2 md:py-3 text-sm md:text-base font-bold text-white bg-gradient-to-r from-blue-600 to-blue-700 border border-blue-700 rounded-lg hover:from-blue-700 hover:to-blue-800 disabled:opacity-50 disabled:cursor-not-allowed transition-all shadow-lg hover:shadow-xl flex items-center justify-center gap-2"
+              title="Run AI model to automatically detect annotations"
+            >
+              {isAILoading ? (
+                <>
+                  <Loader className="w-5 h-5 animate-spin" />
+                  <span>Analyzing...</span>
+                </>
+              ) : (
+                <>
+                  <Zap className="w-5 h-5" />
+                  <span>AI Assist</span>
+                </>
+              )}
+            </button>
+          )}
           <button onClick={deleteLastAnnotation} disabled={annotations.length === 0} className="px-3 md:px-4 py-1 md:py-2 text-xs md:text-sm font-medium text-gray-600 bg-white border border-gray-200 rounded-lg hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed transition-colors flex items-center justify-center gap-1 md:gap-2">
             <Trash2 className="w-4 h-4" />
             <span className="hidden md:inline">Undo</span>

src/pages/AcetowhiteExamPage.tsx

@@ -1,6 +1,6 @@
-import { useState, useEffect } from 'react';
-import { Camera, Video, ArrowLeft, ArrowRight, CheckCircle2, Info, Pause, X, Edit2, RotateCcw, Save, ChevronRight } from 'lucide-react';
-import { ImageAnnotator } from '../components/ImageAnnotator';
+import { useState, useEffect, useRef } from 'react';
+import { Camera, Video, ArrowLeft, ArrowRight, CheckCircle2, Info, Pause, X, Edit2, RotateCcw, Save, ChevronRight, Sparkles } from 'lucide-react';
+import { AceticAnnotator, AceticAnnotatorHandle } from '../components/AceticAnnotator';
 import { ImagingObservations } from '../components/ImagingObservations';
 
 type CapturedItem = {
@@ -18,12 +18,17 @@ type Props = {
 };
 
 export function AcetowhiteExamPage({ goBack, onNext }: Props) {
+  const annotatorRef = useRef<AceticAnnotatorHandle>(null);
+  const fileInputRef = useRef<HTMLInputElement>(null);
   const [capturedItems, setCapturedItems] = useState<CapturedItem[]>([]);
   const [isRecording, setIsRecording] = useState(false);
   const [selectedImage, setSelectedImage] = useState<string | null>(null);
   const [annotations, setAnnotations] = useState<any[]>([]);
   const [observations, setObservations] = useState({});
   const [showExitWarning, setShowExitWarning] = useState(false);
+  const [isLiveAILoading, setIsLiveAILoading] = useState(false);
+  const [liveAIResults, setLiveAIResults] = useState<{ cervixDetected: boolean; quality: string; confidence: number } | null>(null);
+  const [liveAIError, setLiveAIError] = useState<string | null>(null);
   
   // Timer states
   const [timerStarted, setTimerStarted] = useState(false);
@@ -131,6 +136,76 @@ export function AcetowhiteExamPage({ goBack, onNext }: Props) {
     }
   };
 
+  const handleUploadClick = () => {
+    fileInputRef.current?.click();
+  };
+
+  const handleFileUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const files = e.target.files;
+    if (files && files.length > 0) {
+      Array.from(files).forEach(file => {
+        const isVideo = file.type.startsWith('video/');
+        const newCapture: CapturedItem = {
+          id: Date.now().toString() + Math.random(),
+          type: isVideo ? 'video' : 'image',
+          url: URL.createObjectURL(file),
+          timestamp: new Date()
+        };
+        setCapturedItems(prev => [...prev, newCapture]);
+      });
+    }
+    e.target.value = '';
+  };
+
+  const mapQualityLabel = (score: number) => {
+    if (score >= 0.8) return 'Excellent';
+    if (score >= 0.6) return 'Good';
+    return 'Bad';
+  };
+
+  // Main page live feed AI Assist handler - quality check only
+  const handleLiveAIAssist = async () => {
+    setLiveAIError(null);
+    setLiveAIResults(null);
+    const imageItems = capturedItems.filter(item => item.type === 'image');
+    const targetItem = imageItems[0];
+
+    setIsLiveAILoading(true);
+
+    try {
+      const response = await fetch(targetItem ? targetItem.url : cervixImageUrl);
+      const blob = await response.blob();
+
+      const formData = new FormData();
+      formData.append('file', blob, 'image.jpg');
+      const backendResponse = await fetch('http://localhost:8000/infer/image', {
+        method: 'POST',
+        body: formData,
+      });
+
+      if (!backendResponse.ok) {
+        throw new Error(`Backend error: ${backendResponse.statusText}`);
+      }
+
+      const result = await backendResponse.json();
+
+      const qualityScore = typeof result.quality_score === 'number'
+        ? result.quality_score
+        : (typeof result.quality_percent === 'number' ? result.quality_percent / 100 : 0);
+
+      setLiveAIResults({
+        cervixDetected: Boolean(result.detected),
+        quality: mapQualityLabel(qualityScore),
+        confidence: qualityScore
+      });
+      setIsLiveAILoading(false);
+    } catch (error) {
+      console.error('Live AI assist error:', error);
+      setLiveAIError(error instanceof Error ? error.message : 'Failed to check image quality');
+      setIsLiveAILoading(false);
+    }
+  };
+
   const selectedItem = selectedImage
     ? capturedItems.find(item => item.id === selectedImage)
     : null;
@@ -251,12 +326,13 @@ export function AcetowhiteExamPage({ goBack, onNext }: Props) {
                       <h4 className="text-sm font-semibold text-gray-700 mb-3">Select Image to Annotate</h4>
                       <div className="grid grid-cols-3 gap-3">
                         {imageCaptures.map(item => (
-                          <div 
-                            key={item.id} 
-                            onClick={() => setSelectedImage(item.id)}
-                            className="relative group cursor-pointer"
-                          >
-                            <div className="aspect-square bg-gray-100 rounded-lg overflow-hidden border-2 border-transparent hover:border-[#05998c] transition-all">
+                          <div key={item.id} className="relative group">
+                            <div 
+                              onClick={() => setSelectedImage(item.id)}
+                              className={`aspect-square bg-gray-100 rounded-lg overflow-hidden border-2 transition-all cursor-pointer ${
+                                selectedImage === item.id ? 'border-blue-600 ring-2 ring-blue-300' : 'border-transparent hover:border-[#05998c]'
+                              }`}
+                            >
                               <img src={item.url} alt="Capture" className="w-full h-full object-cover" />
                               {item.annotations && item.annotations.length > 0 && (
                                 <div className="absolute top-1 right-1 bg-green-500 text-white p-1 rounded">
@@ -264,9 +340,12 @@ export function AcetowhiteExamPage({ goBack, onNext }: Props) {
                                 </div>
                               )}
                             </div>
-                            <div className="absolute inset-0 bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity rounded-lg flex items-center justify-center">
-                              <span className="text-white text-xs font-semibold">Annotate</span>
-                            </div>
+                            <button
+                              onClick={() => handleDeleteCapture(item.id)}
+                              className="absolute top-1 right-1 bg-red-500 text-white p-1 rounded opacity-0 group-hover:opacity-100 transition-opacity"
+                            >
+                              <X className="w-3 h-3" />
+                            </button>
                           </div>
                         ))}
                       </div>
@@ -405,6 +484,57 @@ export function AcetowhiteExamPage({ goBack, onNext }: Props) {
                         {isRecording ? 'Stop' : 'Record'}
                       </button>
                     </div>
+
+                    {/* Centered AI Assist Button */}
+                    <button
+                      onClick={handleLiveAIAssist}
+                      disabled={isLiveAILoading}
+                      className="w-full flex items-center justify-center gap-2 px-6 py-4 rounded-lg bg-gradient-to-r from-blue-600 to-blue-700 text-white font-bold hover:from-blue-700 hover:to-blue-800 transition-all shadow-lg hover:shadow-xl disabled:opacity-50 disabled:cursor-not-allowed text-base"
+                    >
+                      <Sparkles className="w-6 h-6" />
+                      {isLiveAILoading ? 'Checking...' : 'AI Assist'}
+                    </button>
+
+                    <div className="flex gap-2">
+                      <button
+                        onClick={handleUploadClick}
+                        className="flex-1 flex items-center justify-center gap-2 px-6 py-3 rounded-lg bg-green-600 text-white font-semibold hover:bg-green-700 transition-colors"
+                      >
+                        Upload Image
+                      </button>
+                      <input
+                        ref={fileInputRef}
+                        type="file"
+                        accept="image/*,video/*"
+                        multiple
+                        className="hidden"
+                        onChange={handleFileUpload}
+                      />
+                    </div>
+                    
+                    {/* Live AI Results Panel */}
+                    {liveAIResults && (
+                      <div className="p-4 bg-green-50 border border-green-300 rounded-lg">
+                        <div className="flex items-center gap-3 mb-3">
+                          <div className="w-3 h-3 bg-green-500 rounded-full"></div>
+                          <h4 className="font-bold text-green-800">Quality Check Results</h4>
+                        </div>
+                        <div className="space-y-2 text-sm">
+                          <p className="text-gray-700">
+                            <span className="font-semibold">Cervix Detected:</span> {liveAIResults.cervixDetected ? 'Yes' : 'No'} ({((liveAIResults.cervixDetected ? liveAIResults.confidence : 0) * 100).toFixed(1)}%)
+                          </p>
+                          <p className="text-gray-700">
+                            <span className="font-semibold">Quality:</span> {liveAIResults.quality} ({(liveAIResults.confidence * 100).toFixed(1)}%)
+                          </p>
+                        </div>
+                      </div>
+                    )}
+                    
+                    {liveAIError && (
+                      <div className="text-sm text-red-600 bg-red-50 border border-red-200 rounded-lg p-3 text-center">
+                        {liveAIError}
+                      </div>
+                    )}
                     <button onClick={onNext} className="w-full flex items-center justify-center gap-2 px-6 md:px-8 py-2 md:py-3 rounded-xl bg-gray-600 text-white font-bold shadow-lg shadow-gray-500/20 hover:bg-slate-700 hover:shadow-gray-500/30 transition-all text-sm md:text-base">
                       <Save className="w-4 h-4 md:w-5 md:h-5" />
                       <span className="hidden lg:inline">Next</span>
@@ -492,7 +622,8 @@ export function AcetowhiteExamPage({ goBack, onNext }: Props) {
               </div>
             </div>
           ) : (
-            // Annotation View
+            // Selected Image Annotation View
+            selectedImage && (
             <div>
               <div className="mb-4 flex items-center justify-between">
                 <button
@@ -522,16 +653,20 @@ export function AcetowhiteExamPage({ goBack, onNext }: Props) {
 
               <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
                 <div className="lg:col-span-2">
-                  <ImageAnnotator 
-                    imageUrl={selectedItem?.url || cervixImageUrl} 
-                    onAnnotationsChange={setAnnotations} 
-                  />
+                  {selectedItem && (
+                    <AceticAnnotator 
+                      ref={annotatorRef}
+                      imageUrl={selectedItem.url}
+                      onAnnotationsChange={setAnnotations}
+                    />
+                  )}
                 </div>
                 <div className="lg:col-span-1">
                   <ImagingObservations onObservationsChange={setObservations} />
                 </div>
               </div>
             </div>
+            )
           )}
 
           {/* Exit Warning Dialog */}

src/pages/BiopsyMarking.tsx

@@ -282,6 +282,13 @@ const BiopsyMarking: React.FC<BiopsyMarkingProps> = ({ onBack, onNext, capturedI
             <Trash2 className="h-4 w-4 mr-1" />
             Clear
           </Button>
+          <button
+            onClick={handleUpload}
+            className="h-8 px-3 bg-blue-600 text-white hover:bg-blue-700 rounded transition-colors flex items-center gap-2"
+          >
+            <Upload className="h-4 w-4" />
+            Upload
+          </button>
           <Button
             size="sm"
             className="h-8 px-3 bg-gray-600 text-white hover:bg-slate-700"
@@ -483,10 +490,13 @@ const BiopsyMarking: React.FC<BiopsyMarkingProps> = ({ onBack, onNext, capturedI
           <div className="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
             <div className="flex items-center justify-between mb-4">
               <h3 className="font-bold text-[#0A2540]">Images</h3>
-              <Button variant="outline" size="sm" className="h-8 text-xs px-2 border-[#05998c] text-[#05998c] hover:bg-teal-50" onClick={handleUpload}>
-                <Upload className="h-3.5 w-3.5 mr-1" />
+              <button 
+                onClick={handleUpload}
+                className="h-8 px-3 bg-blue-600 text-white hover:bg-blue-700 rounded transition-colors flex items-center gap-2 text-xs"
+              >
+                <Upload className="h-3.5 w-3.5" />
                 Upload
-              </Button>
+              </button>
               <input
                 ref={fileInputRef}
                 type="file"

src/pages/GreenFilterPage.tsx

@@ -1,12 +1,14 @@
-import { useState } from 'react';
-import { Camera, Video, ArrowLeft, ArrowRight, Info, X, Save, ChevronRight } from 'lucide-react';
+import { useState, useEffect, useRef } from 'react';
+import { Camera, Video, ArrowLeft, ArrowRight, Info, X, Save, ChevronRight, Sparkles, Upload } from 'lucide-react';
 import { ImageAnnotator } from '../components/ImageAnnotator';
 import { ImagingObservations } from '../components/ImagingObservations';
+import { applyGreenFilter } from '../utils/filterUtils';
 
 type CapturedItem = {
   id: string;
   type: 'image' | 'video';
   url: string;
+  originalUrl: string;
   timestamp: Date;
   annotations?: any[];
 };
@@ -17,20 +19,81 @@ type Props = {
 };
 
 export function GreenFilterPage({ goBack, onNext }: Props) {
+  const liveVideoRef = useRef<HTMLVideoElement>(null);
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+  const fileInputRef = useRef<HTMLInputElement>(null);
   const [capturedItems, setCapturedItems] = useState<CapturedItem[]>([]);
   const [isRecording, setIsRecording] = useState(false);
   const [selectedImage, setSelectedImage] = useState<string | null>(null);
   const [showExitWarning, setShowExitWarning] = useState(false);
   const [greenApplied, setGreenApplied] = useState(false);
+  const [isLiveAILoading, setIsLiveAILoading] = useState(false);
+  const [liveAIResults, setLiveAIResults] = useState<{ cervixDetected: boolean; quality: string; confidence: number } | null>(null);
+  const [liveAIError, setLiveAIError] = useState<string | null>(null);
+  const [displayedImageUrl, setDisplayedImageUrl] = useState<string>("/C87Aceto_(1).jpg");
   const baseImageUrl = "/C87Aceto_(1).jpg";
-  const greenImageUrl = "/greenC87Aceto_(1).jpg";
-  const liveFeedImage = greenApplied ? greenImageUrl : baseImageUrl;
 
-  const handleCaptureImage = () => {
+  useEffect(() => {
+    const applyFilter = async () => {
+      const imageToFilter = selectedImage || baseImageUrl;
+      if (greenApplied) {
+        try {
+          const filteredUrl = await applyGreenFilter(imageToFilter, 'dataUrl');
+          setDisplayedImageUrl(filteredUrl as string);
+        } catch (error) {
+          console.error('Error applying green filter:', error);
+          setDisplayedImageUrl(imageToFilter);
+        }
+      } else {
+        setDisplayedImageUrl(imageToFilter);
+      }
+    };
+
+    applyFilter();
+  }, [greenApplied, selectedImage, baseImageUrl]);
+
+  const handleCaptureImage = async () => {
+    let rawUrl: string;
+    let displayUrl: string;
+
+    if (selectedImage) {
+      displayUrl = displayedImageUrl;
+      rawUrl = selectedImage;
+    } else {
+      rawUrl = displayedImageUrl;
+      if (liveVideoRef.current && canvasRef.current) {
+        const canvas = canvasRef.current;
+        const ctx = canvas.getContext('2d');
+        const vw = liveVideoRef.current.videoWidth;
+        const vh = liveVideoRef.current.videoHeight;
+        if (ctx && vw > 0 && vh > 0) {
+          canvas.width = vw;
+          canvas.height = vh;
+          ctx.drawImage(liveVideoRef.current, 0, 0);
+          try {
+            rawUrl = canvas.toDataURL('image/png');
+          } catch (secErr) {
+            console.warn('Canvas tainted, falling back to displayedImageUrl', secErr);
+            rawUrl = displayedImageUrl;
+          }
+        }
+      }
+
+      displayUrl = rawUrl;
+      if (greenApplied && rawUrl) {
+        try {
+          displayUrl = await applyGreenFilter(rawUrl, 'dataUrl') as string;
+        } catch {
+          displayUrl = rawUrl;
+        }
+      }
+    }
+
     const newCapture: CapturedItem = {
       id: Date.now().toString(),
       type: 'image',
-      url: liveFeedImage,
+      url: displayUrl,
+      originalUrl: rawUrl,
       timestamp: new Date()
     };
     setCapturedItems(prev => [...prev, newCapture]);
@@ -44,32 +107,83 @@ export function GreenFilterPage({ goBack, onNext }: Props) {
       const newCapture: CapturedItem = {
         id: Date.now().toString(),
         type: 'video',
-        url: liveFeedImage,
+        url: '/live.mp4',
+        originalUrl: '/live.mp4',
         timestamp: new Date()
       };
       setCapturedItems(prev => [...prev, newCapture]);
     }
   };
 
+  const handleUploadClick = () => {
+    fileInputRef.current?.click();
+  };
+
+  const handleFileUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const files = e.target.files;
+    if (files && files.length > 0) {
+      Array.from(files).forEach(async (file) => {
+        const isVideo = file.type.startsWith('video/');
+        const objectUrl = URL.createObjectURL(file);
+
+        if (isVideo) {
+          const newCapture: CapturedItem = {
+            id: Date.now().toString() + Math.random(),
+            type: 'video',
+            url: objectUrl,
+            originalUrl: objectUrl,
+            timestamp: new Date()
+          };
+          setCapturedItems(prev => [...prev, newCapture]);
+        } else {
+          let displayUrl = objectUrl;
+          if (greenApplied) {
+            try {
+              displayUrl = await applyGreenFilter(objectUrl, 'dataUrl') as string;
+            } catch (error) {
+              console.error('Error applying filter:', error);
+              displayUrl = objectUrl;
+            }
+          }
+          const newCapture: CapturedItem = {
+            id: Date.now().toString() + Math.random(),
+            type: 'image',
+            url: displayUrl,
+            originalUrl: objectUrl,
+            timestamp: new Date()
+          };
+          setCapturedItems(prev => [...prev, newCapture]);
+        }
+      });
+    }
+    e.target.value = '';
+  };
+
   const handleSelectImage = (item: CapturedItem) => {
-    setSelectedImage(item.url);
+    setSelectedImage(item.originalUrl || item.url);
   };
 
   const handleAnnotationsChange = (newAnnotations: any[]) => {
     if (selectedImage) {
       setCapturedItems(prev => prev.map(item => 
-        item.url === selectedImage ? { ...item, annotations: newAnnotations } : item
+        (item.originalUrl || item.url) === selectedImage ? { ...item, annotations: newAnnotations } : item
       ));
     }
   };
 
   const handleDeleteImage = (id: string) => {
     setCapturedItems(prev => prev.filter(item => item.id !== id));
-    if (selectedImage === capturedItems.find(item => item.id === id)?.url) {
+    if (selectedImage === (capturedItems.find(item => item.id === id)?.originalUrl || capturedItems.find(item => item.id === id)?.url)) {
       setSelectedImage(null);
     }
   };
 
+  const mapQualityLabel = (score: number) => {
+    if (score >= 0.8) return 'Excellent';
+    if (score >= 0.6) return 'Good';
+    return 'Bad';
+  };
+
   const handleConfirmExit = () => {
     if (capturedItems.length > 0) {
       setShowExitWarning(true);
@@ -78,6 +192,73 @@ export function GreenFilterPage({ goBack, onNext }: Props) {
     }
   };
 
+  const handleGreenFilterMainAIAssist = async () => {
+    setLiveAIError(null);
+    setLiveAIResults(null);
+    const imageItems = capturedItems.filter(item => item.type === 'image');
+    const targetItem = imageItems[0];
+
+    setIsLiveAILoading(true);
+
+    try {
+      let blob: Blob;
+      if (targetItem) {
+        const response = await fetch(targetItem.url);
+        blob = await response.blob();
+      } else {
+        const video = liveVideoRef.current;
+        if (!video || video.videoWidth === 0 || video.videoHeight === 0) {
+          throw new Error('Live feed is not ready yet.');
+        }
+        const canvas = document.createElement('canvas');
+        canvas.width = video.videoWidth;
+        canvas.height = video.videoHeight;
+        const ctx = canvas.getContext('2d');
+        if (!ctx) {
+          throw new Error('Failed to capture live frame.');
+        }
+        ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
+        blob = await new Promise<Blob>((resolve, reject) => {
+          canvas.toBlob(result => {
+            if (!result) {
+              reject(new Error('Failed to capture live frame.'));
+              return;
+            }
+            resolve(result);
+          }, 'image/jpeg', 0.95);
+        });
+      }
+
+      const formData = new FormData();
+      formData.append('file', blob, 'image.jpg');
+      const backendResponse = await fetch('http://localhost:8000/infer/image', {
+        method: 'POST',
+        body: formData,
+      });
+
+      if (!backendResponse.ok) {
+        throw new Error(`Backend error: ${backendResponse.statusText}`);
+      }
+
+      const result = await backendResponse.json();
+
+      const qualityScore = typeof result.quality_score === 'number'
+        ? result.quality_score
+        : (typeof result.quality_percent === 'number' ? result.quality_percent / 100 : 0);
+
+      setLiveAIResults({
+        cervixDetected: Boolean(result.detected),
+        quality: mapQualityLabel(qualityScore),
+        confidence: qualityScore
+      });
+      setIsLiveAILoading(false);
+    } catch (error) {
+      console.error('Live AI assist error:', error);
+      setLiveAIError(error instanceof Error ? error.message : 'Failed to check image quality');
+      setIsLiveAILoading(false);
+    }
+  };
+
   return (
     <div className="min-h-screen bg-gradient-to-br from-gray-50 to-blue-50 p-4 md:p-6">
       {/* Header */}
@@ -130,11 +311,37 @@ export function GreenFilterPage({ goBack, onNext }: Props) {
 
             {/* Image Display */}
             <div className="relative bg-gray-900 rounded-xl overflow-hidden mb-6 border-2 border-gray-700">
-              <img 
-                src={selectedImage || liveFeedImage} 
-                alt="Cervix examination" 
-                className="w-full h-auto"
-              />
+              <div className="aspect-video relative flex items-center justify-center">
+                {selectedImage ? (
+                  <img 
+                    src={displayedImageUrl} 
+                    alt="Selected" 
+                    className="w-full h-full object-contain"
+                  />
+                ) : (
+                  <>
+                    <video
+                      ref={liveVideoRef}
+                      src="/live.mp4"
+                      autoPlay
+                      loop
+                      muted
+                      crossOrigin="anonymous"
+                      className="w-full h-full object-cover"
+                      style={greenApplied ? { filter: 'saturate(0.3) hue-rotate(120deg) brightness(1.1)' } : {}}
+                    />
+                    {greenApplied && (
+                      <div className="absolute inset-0 bg-green-500 opacity-5 pointer-events-none z-10" />
+                    )}
+                  </>
+                )}
+                {!selectedImage && (
+                  <div className="absolute top-4 left-4 flex items-center gap-2 bg-red-500 text-white px-3 py-1 rounded-full text-sm font-semibold z-20">
+                    <div className="w-2 h-2 rounded-full bg-white/70"></div>
+                    Live
+                  </div>
+                )}
+              </div>
             </div>
 
             {/* Capture Controls */}
@@ -169,7 +376,57 @@ export function GreenFilterPage({ goBack, onNext }: Props) {
                       </>
                     )}
                   </button>
+
+                  <button
+                    onClick={handleUploadClick}
+                    className="flex items-center gap-2 px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors shadow-md font-semibold"
+                  >
+                    <Upload className="w-5 h-5" />
+                    Upload
+                  </button>
+                  <input
+                    ref={fileInputRef}
+                    type="file"
+                    accept="image/*,video/*"
+                    multiple
+                    className="hidden"
+                    onChange={handleFileUpload}
+                  />
                 </div>
+
+                {/* Centered AI Assist Button */}
+                <button
+                  onClick={handleGreenFilterMainAIAssist}
+                  disabled={isLiveAILoading}
+                  className="w-full flex items-center justify-center gap-2 px-6 py-4 rounded-lg bg-gradient-to-r from-blue-600 to-blue-700 text-white font-bold hover:from-blue-700 hover:to-blue-800 transition-all shadow-lg hover:shadow-xl disabled:opacity-50 disabled:cursor-not-allowed text-base"
+                >
+                  <Sparkles className="w-6 h-6" />
+                  {isLiveAILoading ? 'Checking...' : 'AI Assist'}
+                </button>
+                
+                {/* Live AI Results Panel */}
+                {liveAIResults && (
+                  <div className="p-4 bg-green-50 border border-green-300 rounded-lg">
+                    <div className="flex items-center gap-3 mb-3">
+                      <div className="w-3 h-3 bg-green-500 rounded-full"></div>
+                      <h4 className="font-bold text-green-800">Quality Check Results</h4>
+                    </div>
+                    <div className="space-y-2 text-sm">
+                      <p className="text-gray-700">
+                        <span className="font-semibold">Cervix Detected:</span> {liveAIResults.cervixDetected ? 'Yes' : 'No'} ({((liveAIResults.cervixDetected ? liveAIResults.confidence : 0) * 100).toFixed(1)}%)
+                      </p>
+                      <p className="text-gray-700">
+                        <span className="font-semibold">Quality:</span> {liveAIResults.quality} ({(liveAIResults.confidence * 100).toFixed(1)}%)
+                      </p>
+                    </div>
+                  </div>
+                )}
+                
+                {liveAIError && (
+                  <div className="text-sm text-red-600 bg-red-50 border border-red-200 rounded-lg p-3 text-center">
+                    {liveAIError}
+                  </div>
+                )}
                 <button className="w-full flex items-center justify-center gap-2 px-4 py-3 bg-gray-600 text-white rounded-lg font-semibold hover:bg-slate-700 transition-colors">
                   Next
                   <ArrowRight className="w-4 h-4" />
@@ -180,14 +437,21 @@ export function GreenFilterPage({ goBack, onNext }: Props) {
             {/* Selected Image Tools */}
             {selectedImage && (
               <div className="space-y-4">
-                <div className="flex justify-end">
+                <div className="flex items-center justify-between gap-3">
+                  <button
+                    onClick={handleCaptureImage}
+                    className="flex items-center gap-2 px-5 py-2 bg-[#05998c] text-white rounded-lg hover:bg-[#048a7d] transition-colors shadow-md font-semibold"
+                  >
+                    <Camera className="w-4 h-4" />
+                    Capture This Image
+                  </button>
                   <button className="px-6 py-2 bg-gray-600 text-white rounded-lg font-semibold hover:bg-slate-700 transition-colors flex items-center gap-2">
                     Next
                     <ArrowRight className="w-4 h-4" />
                   </button>
                 </div>
                 <ImageAnnotator 
-                  imageUrl={selectedImage}
+                  imageUrl={displayedImageUrl}
                   onAnnotationsChange={handleAnnotationsChange}
                 />
                 <ImagingObservations />
@@ -200,8 +464,7 @@ export function GreenFilterPage({ goBack, onNext }: Props) {
         <div className="space-y-6">
           <div className="bg-white rounded-xl shadow-lg p-6 border border-gray-200">
             {/* Green Filter Toggle */}
-            {!selectedImage && (
-              <div className="mb-6 flex items-center justify-between gap-4">
+            <div className="mb-6 flex items-center justify-between gap-4">
                 <div className="flex-1 bg-[#05998c] text-white px-6 py-2 rounded-lg">
                   <span className="font-bold">Green Filter</span>
                 </div>
@@ -223,7 +486,7 @@ export function GreenFilterPage({ goBack, onNext }: Props) {
                   </span>
                 </button>
               </div>
-            )}
+
 
             <h3 className="text-lg font-bold text-gray-800 mb-4">
               Captured Items ({capturedItems.length})
@@ -309,6 +572,8 @@ export function GreenFilterPage({ goBack, onNext }: Props) {
           </div>
         </div>
       )}
+
+      <canvas ref={canvasRef} className="hidden" />
     </div>
   );
 }

src/pages/GuidedCapturePage.tsx

@@ -1,11 +1,12 @@
 import { useState, useEffect, useRef } from 'react';
-import { Camera, Video, ArrowLeft, ArrowRight, CheckCircle2, Info, Pause, X, Edit2, RotateCcw, FileText, Sparkles } from 'lucide-react';
+import { Camera, Video, ArrowLeft, ArrowRight, CheckCircle2, Info, Pause, X, Edit2, RotateCcw, FileText, Sparkles, Upload } from 'lucide-react';
 import { ImageAnnotator, type ImageAnnotatorHandle } from '../components/ImageAnnotator';
 import { AceticAnnotator, type AceticAnnotatorHandle } from '../components/AceticAnnotator';
 import { ImagingObservations } from '../components/ImagingObservations';
 import { BiopsyMarking, type BiopsyCapturedImage } from './BiopsyMarking';
 import { Compare } from './Compare';
 import { ReportPage } from './ReportPage';
+import { applyGreenFilter } from '../utils/filterUtils';
 
 // Simple UI Component replacements
 const Button: React.FC<any> = ({ children, onClick, disabled, variant, size, className, ...props }) => {
@@ -21,6 +22,7 @@ type CapturedItem = {
   id: string;
   type: 'image' | 'video';
   url: string;
+  originalUrl: string;
   timestamp: Date;
   annotations?: any[];
   observations?: any;
@@ -37,6 +39,9 @@ type Props = {
 export function GuidedCapturePage({ onNext, onGoToPatientRecords, initialMode, onCapturedImagesChange, onModeChange }: Props) {
   const imageAnnotatorRef = useRef<ImageAnnotatorHandle>(null);
   const aceticAnnotatorRef = useRef<AceticAnnotatorHandle>(null);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const videoRef = useRef<HTMLVideoElement>(null);
+  const canvasRef = useRef<HTMLCanvasElement>(null);
   const [currentStep, setCurrentStep] = useState<ExamStep>('native');
   const [capturedItems, setCapturedItems] = useState<Record<ExamStep, CapturedItem[]>>({
     native: [],
@@ -52,7 +57,11 @@ export function GuidedCapturePage({ onNext, onGoToPatientRecords, initialMode, o
   const [_observations, setObservations] = useState({});
   const [isAnnotatingMode, setIsAnnotatingMode] = useState(false);
   const [isCompareMode, setIsCompareMode] = useState(false);
-  const [aiDemoImageUrl, setAiDemoImageUrl] = useState<string | null>(null);
+  const [isLiveAILoading] = useState(false);
+  const [liveAIResults, setLiveAIResults] = useState<{ cervixDetected: boolean; detectionConfidence: number; quality: string; qualityConfidence: number } | null>(null);
+  const [liveAIError, setLiveAIError] = useState<string | null>(null);
+  const [isContinuousAIEnabled, setIsContinuousAIEnabled] = useState(false);
+  const continuousAIIntervalRef = useRef<NodeJS.Timeout | null>(null);
   const audibleAlert = true;
   
   // Timer states for Acetowhite step
@@ -147,6 +156,10 @@ export function GuidedCapturePage({ onNext, onGoToPatientRecords, initialMode, o
     setSelectedImage(null);
     setAnnotations([]);
     setObservations({});
+    // Clear AI Assist results when changing steps
+    setLiveAIResults(null);
+    setLiveAIError(null);
+    setIsContinuousAIEnabled(false);
     
     // Reset timer when leaving acetowhite step
     if (currentStep !== 'acetowhite') {
@@ -190,6 +203,103 @@ export function GuidedCapturePage({ onNext, onGoToPatientRecords, initialMode, o
     }
   }, [initialMode]);
 
+  // Continuous AI Quality Checking on Live Feed
+  useEffect(() => {
+    // Compute selectedItem inline to avoid forward reference
+    const computedSelectedItem = selectedImage
+      ? capturedItems[currentStep].find(item => item.id === selectedImage)
+      : null;
+
+    if (!isContinuousAIEnabled || !videoRef.current || !canvasRef.current || computedSelectedItem || isAnnotatingMode || isCompareMode) {
+      // Stop the interval if conditions are not met
+      if (continuousAIIntervalRef.current) {
+        clearInterval(continuousAIIntervalRef.current);
+        continuousAIIntervalRef.current = null;
+      }
+      return;
+    }
+
+    const checkFrameQuality = async () => {
+      try {
+        const canvas = canvasRef.current;
+        const video = videoRef.current;
+
+        if (!canvas || !video) return;
+
+        const ctx = canvas.getContext('2d');
+        const vw = video.videoWidth;
+        const vh = video.videoHeight;
+
+        if (!ctx || vw <= 0 || vh <= 0) return;
+
+        canvas.width = vw;
+        canvas.height = vh;
+        ctx.drawImage(video, 0, 0);
+
+        canvas.toBlob(async (blob) => {
+          if (!blob) return;
+
+          try {
+            const formData = new FormData();
+            formData.append('file', blob, 'frame.jpg');
+
+            const response = await fetch('http://localhost:8000/infer/image', {
+              method: 'POST',
+              body: formData,
+            });
+
+            if (!response.ok) {
+              throw new Error(`Backend error: ${response.statusText}`);
+            }
+
+            const result = await response.json();
+
+            const qualityScore = typeof result.quality_score === 'number'
+              ? result.quality_score
+              : (typeof result.quality_percent === 'number' ? result.quality_percent / 100 : 0);
+            
+            const detectionConf = typeof result.detection_confidence === 'number'
+              ? result.detection_confidence
+              : 0;
+
+            setLiveAIResults({
+              cervixDetected: Boolean(result.detected),
+              detectionConfidence: detectionConf,
+              quality: mapQualityLabel(qualityScore),
+              qualityConfidence: qualityScore
+            });
+            setLiveAIError(null);
+          } catch (error) {
+            console.error('Continuous AI quality check error:', error);
+            // Don't set error for continuous checks to avoid cluttering UI
+          }
+        }, 'image/jpeg', 0.7);
+      } catch (error) {
+        console.error('Frame capture error:', error);
+      }
+    };
+
+    // Start continuous checking with 1-second interval
+    continuousAIIntervalRef.current = setInterval(checkFrameQuality, 1000);
+
+    return () => {
+      if (continuousAIIntervalRef.current) {
+        clearInterval(continuousAIIntervalRef.current);
+        continuousAIIntervalRef.current = null;
+      }
+    };
+  }, [isContinuousAIEnabled, selectedImage, isAnnotatingMode, isCompareMode, currentStep, capturedItems]);
+
+  // Cleanup continuous AI on unmount
+  useEffect(() => {
+    return () => {
+      if (continuousAIIntervalRef.current) {
+        clearInterval(continuousAIIntervalRef.current);
+        continuousAIIntervalRef.current = null;
+      }
+    };
+  }, []);
+
   const handleAceticApplied = () => {
     setAceticApplied(true);
     setTimerStarted(true);
@@ -228,11 +338,51 @@ export function GuidedCapturePage({ onNext, onGoToPatientRecords, initialMode, o
 
   
 
-  const handleCaptureImage = () => {
+  const handleCaptureImage = async () => {
+    let rawUrl: string;
+    let displayUrl: string;
+
+    if (selectedItem) {
+      // Capturing a selected image - use its original and displayed URLs
+      displayUrl = selectedItem.url;
+      rawUrl = selectedItem.originalUrl || selectedItem.url;
+    } else {
+      // Capturing from live feed - grab video frame from canvas
+      rawUrl = liveFeedImageUrl;
+      if (videoRef.current && canvasRef.current) {
+        const canvas = canvasRef.current;
+        const ctx = canvas.getContext('2d');
+        const vw = videoRef.current.videoWidth;
+        const vh = videoRef.current.videoHeight;
+        if (ctx && vw > 0 && vh > 0) {
+          canvas.width = vw;
+          canvas.height = vh;
+          ctx.drawImage(videoRef.current, 0, 0);
+          try {
+            rawUrl = canvas.toDataURL('image/png');
+          } catch (secErr) {
+            console.warn('Canvas capture failed, using fallback', secErr);
+            rawUrl = liveFeedImageUrl;
+          }
+        }
+      }
+
+      displayUrl = rawUrl;
+      // Apply green filter only for green filter step
+      if (currentStep === 'greenFilter' && greenApplied && rawUrl) {
+        try {
+          displayUrl = await applyGreenFilter(rawUrl, 'dataUrl') as string;
+        } catch {
+          displayUrl = rawUrl;
+        }
+      }
+    }
+
     const newCapture: CapturedItem = {
       id: Date.now().toString(),
       type: 'image',
-      url: liveFeedImageUrl,
+      url: displayUrl,
+      originalUrl: rawUrl,
       timestamp: new Date()
     };
     setCapturedItems(prev => ({
@@ -241,83 +391,128 @@ export function GuidedCapturePage({ onNext, onGoToPatientRecords, initialMode, o
     }));
   };
 
-  const handleToggleRecording = () => {
+  const handleToggleRecording = async () => {
     if (!isRecording) {
       setIsRecording(true);
-    } else {
-      setIsRecording(false);
-      const newCapture: CapturedItem = {
-        id: Date.now().toString(),
-        type: 'video',
-        url: liveFeedImageUrl,
-        timestamp: new Date()
-      };
-      setCapturedItems(prev => ({
-        ...prev,
-        [currentStep]: [...prev[currentStep], newCapture]
-      }));
+      return;
     }
-  };
 
-  const handleAIAssist = () => {
-    // Set the AI demo image URL
-    setAiDemoImageUrl('/AI_Demo_img.png');
-    
-    // Enter annotation mode
-    setIsAnnotatingMode(true);
-
-    // Demo AI Annotations for the image
-    const demoAIAnnotations = [
-      {
-        id: 'ai-cervix-' + Date.now(),
-        type: 'rect' as const,
-        x: 72,
-        y: 160,
-        width: 910,
-        height: 760,
-        color: '#22c55e',
-        label: 'Cervix',
-        source: 'ai' as const,
-        identified: false
-      },
-      {
-        id: 'ai-scj-' + Date.now(),
-        type: 'circle' as const,
-        x: 275,
-        y: 310,
-        width: 280,
-        height: 280,
-        color: '#6366f1',
-        label: 'SCJ',
-        source: 'ai' as const,
-        identified: false
-      },
-      {
-        id: 'ai-os-' + Date.now(),
-        type: 'polygon' as const,
-        x: 350,
-        y: 380,
-        width: 150,
-        height: 100,
-        color: '#eab308',
-        label: 'OS',
-        source: 'ai' as const,
-        identified: false,
-        points: [
-          { x: 350, y: 380 },
-          { x: 500, y: 380 },
-          { x: 500, y: 480 },
-          { x: 350, y: 480 }
-        ]
+    setIsRecording(false);
+
+    let rawUrl: string;
+    let displayUrl: string;
+
+    if (selectedItem) {
+      displayUrl = selectedItem.url;
+      rawUrl = selectedItem.originalUrl || selectedItem.url;
+    } else {
+      rawUrl = liveFeedImageUrl;
+      if (videoRef.current && canvasRef.current) {
+        const canvas = canvasRef.current;
+        const ctx = canvas.getContext('2d');
+        const vw = videoRef.current.videoWidth;
+        const vh = videoRef.current.videoHeight;
+        if (ctx && vw > 0 && vh > 0) {
+          canvas.width = vw;
+          canvas.height = vh;
+          ctx.drawImage(videoRef.current, 0, 0);
+          try {
+            rawUrl = canvas.toDataURL('image/png');
+          } catch (secErr) {
+            console.warn('Canvas capture failed, using fallback', secErr);
+          }
+        }
       }
-    ];
 
-    // Add AI annotations to ImageAnnotator after a brief delay to ensure component is ready
-    setTimeout(() => {
-      if (imageAnnotatorRef.current) {
-        imageAnnotatorRef.current.addAIAnnotations(demoAIAnnotations);
+      displayUrl = rawUrl;
+      if (currentStep === 'greenFilter' && greenApplied && rawUrl) {
+        try {
+          displayUrl = await applyGreenFilter(rawUrl, 'dataUrl') as string;
+        } catch {
+          displayUrl = rawUrl;
+        }
       }
-    }, 100);
+    }
+
+    const newCapture: CapturedItem = {
+      id: Date.now().toString(),
+      type: 'video',
+      url: displayUrl,
+      originalUrl: rawUrl,
+      timestamp: new Date()
+    };
+    setCapturedItems(prev => ({
+      ...prev,
+      [currentStep]: [...prev[currentStep], newCapture]
+    }));
+  };
+
+  const handleUploadClick = () => {
+    fileInputRef.current?.click();
+  };
+
+  const handleFileUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const files = e.target.files;
+    if (files && files.length > 0) {
+      Array.from(files).forEach(async (file) => {
+        const isVideo = file.type.startsWith('video/');
+        const objectUrl = URL.createObjectURL(file);
+
+        if (isVideo) {
+          const newCapture: CapturedItem = {
+            id: Date.now().toString() + Math.random(),
+            type: 'video',
+            url: objectUrl,
+            originalUrl: objectUrl,
+            timestamp: new Date()
+          };
+          console.log('File uploaded:', { name: file.name, type: file.type, isVideo, id: newCapture.id });
+          setCapturedItems(prev => ({
+            ...prev,
+            [currentStep]: [...prev[currentStep], newCapture]
+          }));
+        } else {
+          // For images, always store raw objectUrl as originalUrl
+          let displayUrl = objectUrl;
+          if (currentStep === 'greenFilter' && greenApplied) {
+            try {
+              displayUrl = await applyGreenFilter(objectUrl, 'dataUrl') as string;
+            } catch (error) {
+              console.error('Error applying filter:', error);
+              displayUrl = objectUrl;
+            }
+          }
+          const newCapture: CapturedItem = {
+            id: Date.now().toString() + Math.random(),
+            type: 'image',
+            url: displayUrl,
+            originalUrl: objectUrl,
+            timestamp: new Date()
+          };
+          console.log('File uploaded:', { name: file.name, type: file.type, isVideo, id: newCapture.id });
+          setCapturedItems(prev => ({
+            ...prev,
+            [currentStep]: [...prev[currentStep], newCapture]
+          }));
+        }
+      });
+    }
+    e.target.value = '';
+  };
+
+  const mapQualityLabel = (score: number) => {
+    if (score >= 0.8) return 'Excellent';
+    if (score >= 0.6) return 'Good';
+    return 'Bad';
+  };
+
+  const handleMainAIAssist = () => {
+    // Toggle continuous AI assist for live feed
+    setIsContinuousAIEnabled(prev => !prev);
+    if (!isContinuousAIEnabled) {
+      setLiveAIError(null);
+      setLiveAIResults(null);
+    }
   };
 
   const handleDeleteCapture = (id: string) => {
@@ -335,6 +530,15 @@ export function GuidedCapturePage({ onNext, onGoToPatientRecords, initialMode, o
     ? capturedItems[currentStep].find(item => item.id === selectedImage)
     : null;
 
+  // Debug: Log when selectedItem changes
+  useEffect(() => {
+    if (selectedItem) {
+      console.log('Selected item:', { id: selectedItem.id, type: selectedItem.type, url: selectedItem.url });
+    } else {
+      console.log('No item selected');
+    }
+  }, [selectedItem]);
+
   const totalCaptures = capturedItems[currentStep].length;
   const imageCaptures = capturedItems[currentStep].filter(item => item.type === 'image');
   const videoCaptures = capturedItems[currentStep].filter(item => item.type === 'video');
@@ -390,6 +594,7 @@ export function GuidedCapturePage({ onNext, onGoToPatientRecords, initialMode, o
                       {stage === 'Report' && <FileText className="w-4 h-4" />}
                       <span>{stage}</span>
                     </span>
+                    
                   </div>
                   {idx < 3 && <div className="w-1.5 h-1.5 rounded-full bg-gray-300 mx-1" />}
                 </div>
@@ -450,6 +655,28 @@ export function GuidedCapturePage({ onNext, onGoToPatientRecords, initialMode, o
               <h2 className="text-lg font-semibold text-slate-800 flex-1">
                 {steps.find(s => s.key === currentStep)?.label || 'Guided Capture'}
               </h2>
+              <button 
+                onClick={handleMainAIAssist}
+                disabled={isLiveAILoading}
+                className={`px-6 py-3 rounded-lg transition-all font-semibold flex items-center justify-center gap-2 shadow-lg hover:shadow-xl disabled:opacity-50 disabled:cursor-not-allowed min-w-max ${
+                  isContinuousAIEnabled 
+                    ? 'bg-gradient-to-r from-green-500 to-green-600 text-white hover:from-green-600 hover:to-green-700 animate-pulse' 
+                    : 'bg-gradient-to-r from-blue-600 to-blue-700 text-white hover:from-blue-700 hover:to-blue-800'
+                }`}
+                title={isContinuousAIEnabled ? 'Continuous AI quality checking is ON' : 'Enable continuous AI quality checking for live feed'}
+              >
+                <Sparkles className="h-5 w-5" />
+                {isContinuousAIEnabled ? 'AI Live ✓' : 'AI Assist'}
+              </button>
+              <div className="flex items-center gap-2">
+                <button 
+                  onClick={handleUploadClick}
+                  className="h-8 px-3 bg-green-600 text-white hover:bg-green-700 rounded transition-colors flex items-center gap-2"
+                >
+                  <Upload className="h-4 w-4" />
+                  Upload
+                </button>
+              </div>
               <button 
                 onClick={() => {
                   const currentIndex = steps.findIndex(s => s.key === currentStep);
@@ -463,6 +690,69 @@ export function GuidedCapturePage({ onNext, onGoToPatientRecords, initialMode, o
                 Next
                 <ArrowRight className="h-4 w-4" />
               </button>
+              <input
+                ref={fileInputRef}
+                type="file"
+                accept="image/*,video/*"
+                multiple
+                className="hidden"
+                onChange={handleFileUpload}
+              />
+            </div>
+          )}
+
+          {/* Quality Results Display */}
+          {liveAIResults && !isAnnotatingMode && !isCompareMode && currentStep !== 'report' && currentStep !== 'biopsyMarking' && (
+            <div className={`mb-4 p-4 rounded-lg border-2 transition-all ${
+              isContinuousAIEnabled 
+                ? 'bg-gradient-to-r from-green-50 to-emerald-50 border-green-300' 
+                : 'bg-green-50 border-green-200'
+            }`}>
+              <div className="flex items-start gap-3">
+                <div className="flex-1">
+                  <h3 className="font-semibold text-green-900 mb-3 flex items-center gap-2">
+                    {isContinuousAIEnabled ? '🎥 Live Quality Monitoring' : 'Quality Check Results'}
+                    {isContinuousAIEnabled && <span className="inline-block w-2 h-2 bg-green-500 rounded-full animate-pulse"></span>}
+                  </h3>
+                  <div className="space-y-3">
+                    <div>
+                      <div className="flex items-center justify-between mb-1">
+                        <p className="text-sm text-gray-600">Cervix Detected</p>
+                        <p className="text-sm font-medium text-green-700">
+                          {liveAIResults.cervixDetected ? 'Yes' : 'No'} ({(liveAIResults.detectionConfidence * 100).toFixed(1)}%)
+                        </p>
+                      </div>
+                    </div>
+                    <div>
+                      <div className="flex items-center justify-between mb-2">
+                        <p className="text-sm text-gray-600">Image Quality</p>
+                        <p className="text-sm font-semibold">
+                          {liveAIResults.quality} ({(liveAIResults.qualityConfidence * 100).toFixed(1)}%)
+                        </p>
+                      </div>
+                      {/* Progress Bar */}
+                      <div className="w-full bg-gray-200 rounded-full h-3 overflow-hidden shadow-inner">
+                        <div 
+                          className={`h-full rounded-full transition-all duration-500 ${
+                            liveAIResults.qualityConfidence >= 0.8 
+                              ? 'bg-gradient-to-r from-green-500 to-green-600' 
+                              : liveAIResults.qualityConfidence >= 0.6 
+                              ? 'bg-gradient-to-r from-orange-400 to-orange-500' 
+                              : 'bg-gradient-to-r from-red-500 to-red-600'
+                          }`}
+                          style={{ width: `${Math.min(liveAIResults.qualityConfidence * 100, 100)}%` }}
+                        />
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          )}
+
+          {liveAIError && !isAnnotatingMode && !isCompareMode && currentStep !== 'report' && currentStep !== 'biopsyMarking' && (
+            <div className="mb-4 p-4 bg-red-50 border border-red-200 rounded-lg">
+              <p className="text-red-700 font-medium">{liveAIError}</p>
             </div>
           )}
 
@@ -508,39 +798,31 @@ export function GuidedCapturePage({ onNext, onGoToPatientRecords, initialMode, o
                 <button
                   onClick={() => {
                     setIsAnnotatingMode(false);
-                    setAiDemoImageUrl(null);
                   }}
                   className="flex items-center gap-2 px-4 py-2 text-gray-600 hover:bg-gray-100 rounded-lg transition-colors"
                 >
                   <ArrowLeft className="w-4 h-4" />
                   Back to Live Feed
                 </button>
-                <button
-                  onClick={handleAIAssist}
-                  className="flex items-center gap-2 px-6 py-2 bg-[#05998c] text-white rounded-lg font-semibold hover:bg-[#047569] transition-colors"
-                >
-                  <Sparkles className="w-5 h-5" />
-                  AI Assist
-                </button>
               </div>
 
               <div>
                 {currentStep === 'acetowhite' ? (
                   <AceticAnnotator 
                     ref={aceticAnnotatorRef}
-                    imageUrls={aiDemoImageUrl ? [aiDemoImageUrl] : imageCaptures.map(item => item.url)}
+                    imageUrls={imageCaptures.map(item => item.url)}
                     onAnnotationsChange={setAnnotations} 
                   />
                 ) : (
                   <ImageAnnotator 
                     ref={imageAnnotatorRef}
-                    imageUrls={aiDemoImageUrl ? [aiDemoImageUrl] : imageCaptures.map(item => item.url)}
+                    imageUrls={imageCaptures.map(item => item.url)}
                     onAnnotationsChange={setAnnotations} 
                   />
                 )}
               </div>
             </div>
-          ) : !selectedImage ? (
+          ) : (
             // Live Feed View
             <>
             <div className="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6">
@@ -550,26 +832,87 @@ export function GuidedCapturePage({ onNext, onGoToPatientRecords, initialMode, o
                   {/* Live Video Feed */}
                   <div className="relative bg-gray-900 rounded-xl overflow-hidden shadow-2xl border-2 border-gray-700 mb-4">
                     <div className="aspect-video flex items-center justify-center">
-                      <video src="/live.mp4" autoPlay loop muted className="w-full h-full object-cover" />
-                      <div className="absolute top-4 left-4 flex items-center gap-2 bg-red-500 text-white px-3 py-1 rounded-full text-sm font-semibold">
-                        <div className={`w-2 h-2 rounded-full ${isRecording ? 'bg-white animate-pulse' : 'bg-white/70'}`} />
-                        {isRecording ? 'Recording' : 'Live'}
-                      </div>
+                      {selectedItem ? (
+                        selectedItem.type === 'video' ? (
+                          <video 
+                            key={selectedItem.id}
+                            src={selectedItem.url} 
+                            controls 
+                            autoPlay
+                            style={{ width: '100%', height: '100%', objectFit: 'contain' }}
+                            onError={(e) => console.error('Video playback error:', e)}
+                            onLoadedMetadata={() => console.log('Video loaded:', selectedItem.url)}
+                          />
+                        ) : (
+                          <img 
+                            src={selectedItem.url} 
+                            alt="Selected capture" 
+                            className="w-full h-full object-contain"
+                            onError={(e) => console.error('Image load error:', e)}
+                            onLoad={() => console.log('Image loaded:', selectedItem.url)}
+                          />
+                        )
+                      ) : (
+                        <>
+                          <video
+                            ref={videoRef}
+                            src="/live.mp4"
+                            autoPlay
+                            loop
+                            muted
+                            crossOrigin="anonymous"
+                            className="w-full h-full object-cover"
+                            style={currentStep === 'greenFilter' && greenApplied ? { filter: 'saturate(0.3) hue-rotate(120deg) brightness(1.1)' } : {}}
+                          />
+                          {currentStep === 'greenFilter' && greenApplied && (
+                            <div className="absolute inset-0 bg-green-500 opacity-5 pointer-events-none" />
+                          )}
+                        </>
+                      )}
+                      {!selectedItem && (
+                        <div className="absolute top-4 left-4 flex items-center gap-2 bg-red-500 text-white px-3 py-1 rounded-full text-sm font-semibold">
+                          <div className={`w-2 h-2 rounded-full ${isRecording ? 'bg-white animate-pulse' : 'bg-white/70'}`} />
+                          {isRecording ? 'Recording' : 'Live'}
+                        </div>
+                      )}
+                      {selectedItem && (
+                        <>
+                          <button
+                            onClick={() => {
+                              console.log('Back to live feed clicked');
+                              setSelectedImage(null);
+                            }}
+                            className="absolute top-4 left-4 bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors flex items-center gap-2"
+                          >
+                            <ArrowLeft className="w-4 h-4" />
+                            Back to Live Feed
+                          </button>
+                          {selectedItem.type === 'image' && (
+                            <button
+                              onClick={handleCaptureImage}
+                              className="absolute top-4 right-4 bg-[#05998c] text-white px-4 py-2 rounded-lg hover:bg-[#047569] transition-colors flex items-center gap-2 shadow-md font-semibold"
+                            >
+                              <Camera className="w-4 h-4" />
+                              Capture This Image
+                            </button>
+                          )}
+                        </>
+                      )}
                       
 
-                      {currentStep === 'acetowhite' && aceticApplied && (
+                      {!selectedItem && currentStep === 'acetowhite' && aceticApplied && (
                         <div className="absolute top-4 right-4 bg-black/70 text-white px-4 py-2 rounded-lg">
                           <p className="text-2xl font-mono font-bold">{formatTime(seconds)}</p>
                         </div>
                       )}
 
-                      {currentStep === 'lugol' && lugolApplied && (
+                      {!selectedItem && currentStep === 'lugol' && lugolApplied && (
                         <div className="absolute top-4 right-4 bg-black/70 text-white px-4 py-2 rounded-lg">
                           <p className="text-2xl font-mono font-bold">{formatTime(lugolSeconds)}</p>
                         </div>
                       )}
 
-                      {currentStep === 'acetowhite' && showFlash && (
+                      {!selectedItem && currentStep === 'acetowhite' && showFlash && (
                         <div className="absolute inset-0 bg-[#05998c]/30 animate-pulse flex items-center justify-center">
                           <div className="bg-white/90 px-6 py-4 rounded-lg">
                             <p className="text-2xl font-bold text-[#0A2540]">
@@ -579,7 +922,7 @@ export function GuidedCapturePage({ onNext, onGoToPatientRecords, initialMode, o
                         </div>
                       )}
 
-                      {currentStep === 'lugol' && lugolShowFlash && (
+                      {!selectedItem && currentStep === 'lugol' && lugolShowFlash && (
                         <div className="absolute inset-0 bg-[#05998c]/30 animate-pulse flex items-center justify-center">
                           <div className="bg-white/90 px-6 py-4 rounded-lg">
                             <p className="text-2xl font-bold text-[#0A2540]">
@@ -889,7 +1232,13 @@ export function GuidedCapturePage({ onNext, onGoToPatientRecords, initialMode, o
                               {imageCaptures.map(item => (
                                 <div key={item.id} className="relative group">
                                   <div 
-                                    className="aspect-square bg-gray-100 rounded-lg overflow-hidden border-2 border-gray-200 transition-all"
+                                    onClick={() => {
+                                      console.log('Clicked image thumbnail:', item.id);
+                                      setSelectedImage(item.id);
+                                    }}
+                                    className={`aspect-square bg-gray-100 rounded-lg overflow-hidden border-2 transition-all cursor-pointer hover:border-blue-500 ${
+                                      selectedImage === item.id ? 'border-blue-600 ring-2 ring-blue-300' : 'border-gray-200'
+                                    }`}
                                   >
                                     <img src={item.url} alt="Capture" className="w-full h-full object-cover" />
                                     {item.annotations && item.annotations.length > 0 && (
@@ -899,7 +1248,10 @@ export function GuidedCapturePage({ onNext, onGoToPatientRecords, initialMode, o
                                     )}
                                   </div>
                                   <button
-                                    onClick={() => handleDeleteCapture(item.id)}
+                                    onClick={(e) => {
+                                      e.stopPropagation();
+                                      handleDeleteCapture(item.id);
+                                    }}
                                     className="absolute top-1 right-1 bg-red-500 text-white p-1 rounded opacity-0 group-hover:opacity-100 transition-opacity"
                                   >
                                     <X className="w-3 h-3" />
@@ -916,7 +1268,16 @@ export function GuidedCapturePage({ onNext, onGoToPatientRecords, initialMode, o
                             <h4 className="text-xs font-semibold text-gray-500 uppercase mb-2">Videos ({videoCaptures.length})</h4>
                             <div className="space-y-2">
                               {videoCaptures.map(item => (
-                                <div key={item.id} className="relative group bg-gray-50 rounded-lg p-3 flex items-center gap-3">
+                                <div 
+                                  key={item.id} 
+                                  onClick={() => {
+                                    console.log('Clicked video thumbnail:', item.id);
+                                    setSelectedImage(item.id);
+                                  }}
+                                  className={`relative group rounded-lg p-3 flex items-center gap-3 cursor-pointer transition-all ${
+                                    selectedImage === item.id ? 'bg-blue-100 border-2 border-blue-600' : 'bg-gray-50 border-2 border-transparent hover:bg-gray-100'
+                                  }`}
+                                >
                                   <div className="w-12 h-12 bg-gray-200 rounded flex items-center justify-center">
                                     <Video className="w-6 h-6 text-gray-500" />
                                   </div>
@@ -925,7 +1286,10 @@ export function GuidedCapturePage({ onNext, onGoToPatientRecords, initialMode, o
                                     <p className="text-xs text-gray-500">{item.timestamp.toLocaleTimeString()}</p>
                                   </div>
                                   <button
-                                    onClick={() => handleDeleteCapture(item.id)}
+                                    onClick={(e) => {
+                                      e.stopPropagation();
+                                      handleDeleteCapture(item.id);
+                                    }}
                                     className="p-1 hover:bg-red-50 rounded text-red-500"
                                   >
                                     <X className="w-4 h-4" />
@@ -952,41 +1316,11 @@ export function GuidedCapturePage({ onNext, onGoToPatientRecords, initialMode, o
               </div>
             )}
             </>
-          ) : (
-            // Single Image Annotation View
-            <div>
-              <div className="mb-4 flex items-center justify-between">
-                <button
-                  onClick={() => {
-                    setSelectedImage(null);
-                    setAnnotations([]);
-                    setObservations({});
-                  }}
-                  className="flex items-center gap-2 px-4 py-2 text-gray-600 hover:bg-gray-100 rounded-lg transition-colors"
-                >
-                  <ArrowLeft className="w-4 h-4" />
-                  Back to Live Feed
-                </button>
-                <button
-                  onClick={handleAIAssist}
-                  className="flex items-center gap-2 px-6 py-2 bg-[#05998c] text-white rounded-lg font-semibold hover:bg-[#047569] transition-colors"
-                >
-                  <Sparkles className="w-5 h-5" />
-                  AI Assist
-                </button>
-              </div>
-
-              <div>
-                <ImageAnnotator 
-                  ref={imageAnnotatorRef}
-                  imageUrl={selectedItem?.url || liveFeedImageUrl} 
-                  onAnnotationsChange={setAnnotations} 
-                />
-              </div>
-            </div>
           )}
         </div>
       </div>
+
+      <canvas ref={canvasRef} className="hidden" />
     </div>
   );
 }

src/pages/LugolExamPage.tsx

@@ -1,5 +1,5 @@
 import { useState, useEffect } from 'react';
-import { Camera, Video, ArrowLeft, ArrowRight, CheckCircle2, Info, Pause, X, Edit2, RotateCcw, Save, ChevronRight } from 'lucide-react';
+import { Camera, Video, ArrowLeft, ArrowRight, CheckCircle2, Info, Pause, X, Edit2, RotateCcw, Save, ChevronRight, Sparkles } from 'lucide-react';
 import { ImageAnnotator } from '../components/ImageAnnotator';
 
 type CapturedItem = {
@@ -29,6 +29,9 @@ export function LugolExamPage({ goBack, onNext }: Props) {
   const [showFlash, setShowFlash] = useState(false);
   const audibleAlert = true;
   const [timerPaused, setTimerPaused] = useState(false);
+  const [isLiveAILoading, setIsLiveAILoading] = useState(false);
+  const [liveAIResults, setLiveAIResults] = useState<{ cervixDetected: boolean; quality: string; confidence: number } | null>(null);
+  const [liveAIError, setLiveAIError] = useState<string | null>(null);
 
   const cervixImageUrl = "/C87Aceto_(1).jpg";
 
@@ -126,6 +129,54 @@ export function LugolExamPage({ goBack, onNext }: Props) {
     }
   };
 
+  const mapQualityLabel = (score: number) => {
+    if (score >= 0.8) return 'Excellent';
+    if (score >= 0.6) return 'Good';
+    return 'Bad';
+  };
+
+  const handleLugolMainAIAssist = async () => {
+    setLiveAIError(null);
+    setLiveAIResults(null);
+    const imageItems = capturedItems.filter(item => item.type === 'image');
+    const targetItem = imageItems[0];
+
+    setIsLiveAILoading(true);
+
+    try {
+      const response = await fetch(targetItem ? targetItem.url : cervixImageUrl);
+      const blob = await response.blob();
+
+      const formData = new FormData();
+      formData.append('file', blob, 'image.jpg');
+      const backendResponse = await fetch('http://localhost:8000/infer/image', {
+        method: 'POST',
+        body: formData,
+      });
+
+      if (!backendResponse.ok) {
+        throw new Error(`Backend error: ${backendResponse.statusText}`);
+      }
+
+      const result = await backendResponse.json();
+
+      const qualityScore = typeof result.quality_score === 'number'
+        ? result.quality_score
+        : (typeof result.quality_percent === 'number' ? result.quality_percent / 100 : 0);
+
+      setLiveAIResults({
+        cervixDetected: Boolean(result.detected),
+        quality: mapQualityLabel(qualityScore),
+        confidence: qualityScore
+      });
+      setIsLiveAILoading(false);
+    } catch (error) {
+      console.error('Live AI assist error:', error);
+      setLiveAIError(error instanceof Error ? error.message : 'Failed to check image quality');
+      setIsLiveAILoading(false);
+    }
+  };
+
   const selectedItem = selectedImage
     ? capturedItems.find(item => item.id === selectedImage)
     : null;
@@ -399,6 +450,40 @@ export function LugolExamPage({ goBack, onNext }: Props) {
                         {isRecording ? 'Stop' : 'Record'}
                       </button>
                     </div>
+
+                    {/* Centered AI Assist Button */}
+                    <button
+                      onClick={handleLugolMainAIAssist}
+                      disabled={isLiveAILoading}
+                      className="w-full flex items-center justify-center gap-2 px-6 py-4 rounded-lg bg-gradient-to-r from-blue-600 to-blue-700 text-white font-bold hover:from-blue-700 hover:to-blue-800 transition-all shadow-lg hover:shadow-xl disabled:opacity-50 disabled:cursor-not-allowed text-base"
+                    >
+                      <Sparkles className="w-6 h-6" />
+                      {isLiveAILoading ? 'Checking...' : 'AI Assist'}
+                    </button>
+                    
+                    {/* Live AI Results Panel */}
+                    {liveAIResults && (
+                      <div className="p-4 bg-green-50 border border-green-300 rounded-lg">
+                        <div className="flex items-center gap-3 mb-3">
+                          <div className="w-3 h-3 bg-green-500 rounded-full"></div>
+                          <h4 className="font-bold text-green-800">Quality Check Results</h4>
+                        </div>
+                        <div className="space-y-2 text-sm">
+                          <p className="text-gray-700">
+                            <span className="font-semibold">Cervix Detected:</span> {liveAIResults.cervixDetected ? 'Yes' : 'No'} ({((liveAIResults.cervixDetected ? liveAIResults.confidence : 0) * 100).toFixed(1)}%)
+                          </p>
+                          <p className="text-gray-700">
+                            <span className="font-semibold">Quality:</span> {liveAIResults.quality} ({(liveAIResults.confidence * 100).toFixed(1)}%)
+                          </p>
+                        </div>
+                      </div>
+                    )}
+                    
+                    {liveAIError && (
+                      <div className="text-sm text-red-600 bg-red-50 border border-red-200 rounded-lg p-3 text-center">
+                        {liveAIError}
+                      </div>
+                    )}
                     <button className="w-full flex items-center justify-center gap-2 px-4 py-3 bg-gray-600 text-white rounded-lg font-semibold hover:bg-slate-700 transition-colors">
                       Next
                       <ArrowRight className="w-4 h-4" />

src/utils/filterUtils.ts

@@ -0,0 +1,152 @@
+/**
+ * Apply green filter to an image using Canvas API.
+ * Matches the CSS filter: saturate(0.3) hue-rotate(120deg) brightness(1.1)
+ * applied to the live video feed.
+ */
+
+/**
+ * Applies the same pixel-level transformation as the live-feed CSS filter:
+ *   saturate(0.3) → hue-rotate(120deg) → brightness(1.1)
+ *
+ * We compose the three standard color-matrix transforms in one pass.
+ */
+function applyLiveFeedFilter(data: Uint8ClampedArray): void {
+  // --- 1. Saturate(0.3) color matrix ---
+  // Standard W3C/SVG saturate matrix with s = 0.3
+  const s = 0.3;
+  const sr = (1 - s) * 0.2126;
+  const sg = (1 - s) * 0.7152;
+  const sb = (1 - s) * 0.0722;
+
+  const sat = [
+    sr + s, sg, sb,
+    sr, sg + s, sb,
+    sr, sg, sb + s,
+  ];
+
+  // --- 2. Hue-rotate(120deg) color matrix ---
+  // Standard hue-rotation matrix for 120°
+  const cos120 = -0.5;
+  const sin120 = Math.sqrt(3) / 2; // ≈ 0.866
+
+  // W3C hue-rotate matrix components
+  const hue = [
+    0.213 + cos120 * 0.787 - sin120 * 0.213,
+    0.715 - cos120 * 0.715 - sin120 * 0.715,
+    0.072 - cos120 * 0.072 + sin120 * 0.928,
+
+    0.213 - cos120 * 0.213 + sin120 * 0.143,
+    0.715 + cos120 * 0.285 + sin120 * 0.140,
+    0.072 - cos120 * 0.072 - sin120 * 0.283,
+
+    0.213 - cos120 * 0.213 - sin120 * 0.787,
+    0.715 - cos120 * 0.715 + sin120 * 0.715,
+    0.072 + cos120 * 0.928 + sin120 * 0.072,
+  ];
+
+  // --- 3. Compose sat × hue into one 3×3 matrix ---
+  // result[row*3+col] = sum_k sat[row*3+k] * hue[k*3+col]
+  const m = new Array(9).fill(0);
+  for (let row = 0; row < 3; row++) {
+    for (let col = 0; col < 3; col++) {
+      for (let k = 0; k < 3; k++) {
+        m[row * 3 + col] += sat[row * 3 + k] * hue[k * 3 + col];
+      }
+    }
+  }
+
+  // --- 4. Brightness(1.1): just multiply final result by 1.1 ---
+  const brightness = 1.1;
+
+  for (let i = 0; i < data.length; i += 4) {
+    const r = data[i];
+    const g = data[i + 1];
+    const b = data[i + 2];
+
+    data[i] = Math.min(255, Math.max(0, Math.round((m[0] * r + m[1] * g + m[2] * b) * brightness)));
+    data[i + 1] = Math.min(255, Math.max(0, Math.round((m[3] * r + m[4] * g + m[5] * b) * brightness)));
+    data[i + 2] = Math.min(255, Math.max(0, Math.round((m[6] * r + m[7] * g + m[8] * b) * brightness)));
+    // Alpha unchanged
+  }
+}
+
+/**
+ * Apply green filter to an image (async, loads from URL/dataURL).
+ * The result matches the live-feed CSS filter exactly.
+ */
+export async function applyGreenFilter(
+  imageSrc: string,
+  outputFormat: 'dataUrl' | 'blob' = 'dataUrl'
+): Promise<string | Blob> {
+  return new Promise((resolve, reject) => {
+    const img = new Image();
+    // Only set crossOrigin for remote http URLs; blob:// and data:// URLs
+    // don't support the CORS attribute and will fail silently if it is set.
+    if (imageSrc.startsWith('http')) {
+      img.crossOrigin = 'anonymous';
+    }
+
+    img.onload = () => {
+      try {
+        const canvas = document.createElement('canvas');
+        canvas.width = img.width;
+        canvas.height = img.height;
+
+        const ctx = canvas.getContext('2d');
+        if (!ctx) {
+          reject(new Error('Could not get canvas context'));
+          return;
+        }
+
+        ctx.drawImage(img, 0, 0);
+
+        const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+        applyLiveFeedFilter(imageData.data);
+        ctx.putImageData(imageData, 0, 0);
+
+        if (outputFormat === 'blob') {
+          canvas.toBlob(
+            (blob) => {
+              if (blob) {
+                resolve(blob);
+              } else {
+                reject(new Error('Could not convert canvas to blob'));
+              }
+            },
+            'image/png'
+          );
+        } else {
+          resolve(canvas.toDataURL('image/png'));
+        }
+      } catch (error) {
+        reject(error);
+      }
+    };
+
+    img.onerror = () => {
+      reject(new Error(`Failed to load image: ${imageSrc}`));
+    };
+
+    img.src = imageSrc;
+  });
+}
+
+/**
+ * Apply green filter to an already-drawn canvas (e.g. captured video frame).
+ * Matches the live-feed CSS filter: saturate(0.3) hue-rotate(120deg) brightness(1.1)
+ */
+export function applyGreenFilterToCanvas(
+  canvas: HTMLCanvasElement,
+  ctx: CanvasRenderingContext2D
+): void {
+  const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+  applyLiveFeedFilter(imageData.data);
+  ctx.putImageData(imageData, 0, 0);
+}
+
+/**
+ * Check if an image source is valid
+ */
+export function isValidImageSource(src: string): boolean {
+  return !!(src && (src.startsWith('data:') || src.startsWith('http') || src.startsWith('/')));
+}