Add Not Sure feedback, save preprocessed scans, add Help tab

README.md

@@ -64,6 +64,6 @@ If you use this model, please cite:
 
 ## Links
 
-- 📄 [Paper](https://arxiv.org/abs/2502.14807)
 - 📦 [Model Hub](https://huggingface.co/numansaeed/fetalclip-model)
-- 💻 [GitHub](https://github.com/numansaeed/FetalCLIP)
+- 📄 [Paper](https://arxiv.org/abs/2502.14807)
+- 💻 [GitHub](#)

backend/app/routes/feedback.py

@@ -27,11 +27,12 @@ class FeedbackCreate(BaseModel):
     predicted_label: str
     predicted_confidence: float
     all_predictions: List[PredictionDetail]
-    is_correct: bool
+    is_correct: Optional[bool] = None
     correct_label: Optional[str] = None
     reviewer_notes: Optional[str] = None
     patient_id: Optional[str] = None
     image_hash: Optional[str] = None
+    preprocessed_image_base64: Optional[str] = None
 
 
 class FeedbackResponse(BaseModel):
@@ -45,9 +46,10 @@ class FeedbackResponse(BaseModel):
     predicted_label: str
     predicted_confidence: float
     all_predictions: List[Dict]
-    is_correct: bool
+    is_correct: Optional[bool]
     correct_label: Optional[str]
     reviewer_notes: Optional[str]
+    preprocessed_image_path: Optional[str] = None
 
 
 class SessionCreate(BaseModel):
@@ -61,12 +63,14 @@ class SessionResponse(BaseModel):
     feedback_count: int
     correct_count: int
     incorrect_count: int
+    not_sure_count: int = 0
 
 
 class StatisticsResponse(BaseModel):
     total_feedback: int
     correct_count: int
     incorrect_count: int
+    not_sure_count: int = 0
     accuracy: float
     by_label: Dict
 
@@ -102,7 +106,6 @@ async def record_image_analyzed(session_id: str):
     return {"status": "ok"}
 
 
-# Feedback endpoints
 @router.post("/", response_model=FeedbackResponse)
 async def create_feedback(feedback: FeedbackCreate):
     """Submit feedback for a prediction."""
@@ -120,7 +123,8 @@ async def create_feedback(feedback: FeedbackCreate):
         correct_label=feedback.correct_label,
         reviewer_notes=feedback.reviewer_notes,
         patient_id=feedback.patient_id,
-        image_hash=feedback.image_hash
+        image_hash=feedback.image_hash,
+        preprocessed_image_base64=feedback.preprocessed_image_base64
     )
     
     return entry

backend/app/services/feedback.py

@@ -6,6 +6,7 @@ Stores feedback in a local JSON file for simplicity and privacy.
 import json
 import uuid
 import hashlib
+import base64
 from datetime import datetime
 from pathlib import Path
 from typing import List, Dict, Optional
@@ -26,6 +27,8 @@ class FeedbackService:
         self.storage_dir.mkdir(parents=True, exist_ok=True)
         self.feedback_file = self.storage_dir / "feedback.json"
         self.sessions_file = self.storage_dir / "sessions.json"
+        self.images_dir = self.storage_dir / "images"
+        self.images_dir.mkdir(parents=True, exist_ok=True)
         
         # Initialize files if they don't exist
         if not self.feedback_file.exists():
@@ -68,7 +71,8 @@ class FeedbackService:
             "image_count": 0,
             "feedback_count": 0,
             "correct_count": 0,
-            "incorrect_count": 0
+            "incorrect_count": 0,
+            "not_sure_count": 0
         }
         self._save_sessions(sessions)
         return session_id
@@ -91,18 +95,27 @@ class FeedbackService:
                 "image_count": 0,
                 "feedback_count": 0,
                 "correct_count": 0,
-                "incorrect_count": 0
+                "incorrect_count": 0,
+                "not_sure_count": 0
             }
         
+        # Ensure not_sure_count exists for older sessions
+        if "not_sure_count" not in sessions[session_id]:
+            sessions[session_id]["not_sure_count"] = 0
+        
         if image_analyzed:
             sessions[session_id]["image_count"] += 1
         
-        if is_correct is not None:
+        if is_correct is True:
             sessions[session_id]["feedback_count"] += 1
-            if is_correct:
-                sessions[session_id]["correct_count"] += 1
-            else:
-                sessions[session_id]["incorrect_count"] += 1
+            sessions[session_id]["correct_count"] += 1
+        elif is_correct is False:
+            sessions[session_id]["feedback_count"] += 1
+            sessions[session_id]["incorrect_count"] += 1
+        elif is_correct is None:
+            # Not sure case - only increment feedback_count and not_sure_count
+            sessions[session_id]["feedback_count"] += 1
+            sessions[session_id]["not_sure_count"] += 1
         
         self._save_sessions(sessions)
     
@@ -114,15 +127,29 @@ class FeedbackService:
         predicted_label: str,
         predicted_confidence: float,
         all_predictions: List[Dict],
-        is_correct: bool,
+        is_correct: Optional[bool],
         correct_label: Optional[str] = None,
         reviewer_notes: Optional[str] = None,
         patient_id: Optional[str] = None,
-        image_hash: Optional[str] = None
+        image_hash: Optional[str] = None,
+        preprocessed_image_base64: Optional[str] = None
     ) -> Dict:
         """Add new feedback entry."""
         feedback_id = str(uuid.uuid4())[:12]
         
+        # Save preprocessed image if provided
+        preprocessed_image_path = None
+        if preprocessed_image_base64:
+            try:
+                image_data = base64.b64decode(preprocessed_image_base64)
+                image_filename = f"{feedback_id}_{datetime.now().strftime('%Y%m%d_%H%M%S')}.png"
+                image_path = self.images_dir / image_filename
+                with open(image_path, 'wb') as f:
+                    f.write(image_data)
+                preprocessed_image_path = str(image_path)
+            except Exception as e:
+                print(f"Failed to save preprocessed image: {e}")
+        
         entry = {
             "id": feedback_id,
             "session_id": session_id,
@@ -135,8 +162,9 @@ class FeedbackService:
             "predicted_confidence": round(predicted_confidence, 2),
             "all_predictions": all_predictions,
             "is_correct": is_correct,
-            "correct_label": correct_label if not is_correct else None,
-            "reviewer_notes": reviewer_notes
+            "correct_label": correct_label if is_correct is False else None,
+            "reviewer_notes": reviewer_notes,
+            "preprocessed_image_path": preprocessed_image_path
         }
         
         feedback_list = self._load_feedback()
@@ -196,7 +224,8 @@ class FeedbackService:
             "predicted_confidence",
             "is_correct",
             "correct_label",
-            "reviewer_notes"
+            "reviewer_notes",
+            "preprocessed_image_path"
         ]
         
         writer = csv.DictWriter(output, fieldnames=fieldnames, extrasaction='ignore')
@@ -204,6 +233,14 @@ class FeedbackService:
         
         for entry in feedback_list:
             # Flatten the entry for CSV
+            is_correct = entry.get("is_correct")
+            if is_correct is True:
+                is_correct_str = "Yes"
+            elif is_correct is False:
+                is_correct_str = "No"
+            else:
+                is_correct_str = "Not Sure"
+            
             row = {
                 "timestamp": entry.get("timestamp", ""),
                 "session_id": entry.get("session_id", ""),
@@ -212,9 +249,10 @@ class FeedbackService:
                 "file_type": entry.get("file_type", ""),
                 "predicted_label": entry.get("predicted_label", ""),
                 "predicted_confidence": entry.get("predicted_confidence", ""),
-                "is_correct": "Yes" if entry.get("is_correct") else "No",
+                "is_correct": is_correct_str,
                 "correct_label": entry.get("correct_label", ""),
-                "reviewer_notes": entry.get("reviewer_notes", "")
+                "reviewer_notes": entry.get("reviewer_notes", ""),
+                "preprocessed_image_path": entry.get("preprocessed_image_path", "")
             }
             writer.writerow(row)
         
@@ -225,26 +263,35 @@ class FeedbackService:
         feedback_list = self.get_feedback(session_id)
         
         total = len(feedback_list)
-        correct = sum(1 for f in feedback_list if f.get("is_correct"))
-        incorrect = total - correct
+        correct = sum(1 for f in feedback_list if f.get("is_correct") is True)
+        incorrect = sum(1 for f in feedback_list if f.get("is_correct") is False)
+        not_sure = sum(1 for f in feedback_list if f.get("is_correct") is None)
         
         # Count by predicted label
         label_stats = {}
         for entry in feedback_list:
             label = entry.get("predicted_label", "Unknown")
             if label not in label_stats:
-                label_stats[label] = {"total": 0, "correct": 0, "incorrect": 0}
+                label_stats[label] = {"total": 0, "correct": 0, "incorrect": 0, "not_sure": 0}
             label_stats[label]["total"] += 1
-            if entry.get("is_correct"):
+            is_correct = entry.get("is_correct")
+            if is_correct is True:
                 label_stats[label]["correct"] += 1
-            else:
+            elif is_correct is False:
                 label_stats[label]["incorrect"] += 1
+            else:
+                label_stats[label]["not_sure"] += 1
+        
+        # Calculate accuracy only from definite answers (excluding not sure)
+        definite_answers = correct + incorrect
+        accuracy = round(correct / definite_answers * 100, 1) if definite_answers > 0 else 0
         
         return {
             "total_feedback": total,
             "correct_count": correct,
             "incorrect_count": incorrect,
-            "accuracy": round(correct / total * 100, 1) if total > 0 else 0,
+            "not_sure_count": not_sure,
+            "accuracy": accuracy,
             "by_label": label_stats
         }
     

frontend/src/App.tsx

@@ -1,14 +1,16 @@
 import { useState, useEffect, useCallback } from 'react';
-import { Scan, Calendar } from 'lucide-react';
+import { Scan, Calendar, HelpCircle } from 'lucide-react';
 import { Header } from './components/Header';
 import { Tabs } from './components/Tabs';
 import { ClassificationPage } from './pages/ClassificationPage';
 import { GestationalAgePage } from './pages/GestationalAgePage';
+import { HelpPage } from './pages/HelpPage';
 import { checkHealth, getFeedbackStats } from './lib/api';
 
 const tabs = [
   { id: 'classification', label: 'View Classification', icon: <Scan className="w-4 h-4" /> },
   { id: 'gestational-age', label: 'Gestational Age', icon: <Calendar className="w-4 h-4" /> },
+  { id: 'help', label: 'Help', icon: <HelpCircle className="w-4 h-4" /> },
 ];
 
 function App() {
@@ -53,14 +55,15 @@ function App() {
     <div className="h-screen flex flex-col bg-dark-bg overflow-hidden">
       {/* Header - fixed height */}
       <Header isConnected={isConnected} feedbackStats={feedbackStats} />
-      
+
       {/* Tabs - fixed height */}
       <Tabs tabs={tabs} activeTab={activeTab} onChange={setActiveTab} />
-      
+
       {/* Main content - fills remaining space */}
       <main className="flex-1 flex min-h-0 overflow-hidden">
         {activeTab === 'classification' && <ClassificationPage onFeedbackUpdate={loadFeedbackStats} />}
         {activeTab === 'gestational-age' && <GestationalAgePage />}
+        {activeTab === 'help' && <HelpPage />}
       </main>
 
       {/* Footer - fixed height, always visible */}

frontend/src/components/FeedbackSection.tsx

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { Check, X, Send, MessageSquare } from 'lucide-react';
+import { Check, X, Send, MessageSquare, HelpCircle } from 'lucide-react';
 import { FETAL_VIEW_LABELS, submitFeedback, FeedbackCreate, ClassificationResult } from '../lib/api';
 
 interface FeedbackSectionProps {
@@ -10,6 +10,7 @@ interface FeedbackSectionProps {
   topPrediction: ClassificationResult | null;
   patientId?: string;
   imageHash?: string;
+  preprocessedImageBase64?: string;
   onFeedbackSubmitted?: () => void;
   disabled?: boolean;
 }
@@ -22,29 +23,33 @@ export function FeedbackSection({
   topPrediction,
   patientId,
   imageHash,
+  preprocessedImageBase64,
   onFeedbackSubmitted,
   disabled = false,
 }: FeedbackSectionProps) {
-  const [feedbackState, setFeedbackState] = useState<'none' | 'correct' | 'incorrect'>('none');
+  const [feedbackState, setFeedbackState] = useState<'none' | 'correct' | 'incorrect' | 'not_sure'>('none');
   const [correctLabel, setCorrectLabel] = useState<string>('');
   const [notes, setNotes] = useState<string>('');
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [submitted, setSubmitted] = useState(false);
 
-  const handleFeedback = async (isCorrect: boolean) => {
+  const handleFeedback = async (isCorrect: boolean | null) => {
     if (disabled || !topPrediction) return;
 
-    if (isCorrect) {
+    if (isCorrect === true) {
       // Submit immediately for correct predictions
       setFeedbackState('correct');
       await submitFeedbackData(true);
+    } else if (isCorrect === null) {
+      // Show notes form for uncertain predictions
+      setFeedbackState('not_sure');
     } else {
       // Show correction form for incorrect predictions
       setFeedbackState('incorrect');
     }
   };
 
-  const submitFeedbackData = async (isCorrect: boolean, overrideLabel?: string, overrideNotes?: string) => {
+  const submitFeedbackData = async (isCorrect: boolean | null, overrideLabel?: string, overrideNotes?: string) => {
     if (!topPrediction || isSubmitting) return;
 
     setIsSubmitting(true);
@@ -64,6 +69,7 @@ export function FeedbackSection({
         reviewer_notes: overrideNotes || notes || undefined,
         patient_id: patientId,
         image_hash: imageHash,
+        preprocessed_image_base64: preprocessedImageBase64,
       };
 
       await submitFeedback(feedbackData);
@@ -81,6 +87,10 @@ export function FeedbackSection({
     await submitFeedbackData(false, correctLabel, notes);
   };
 
+  const handleSubmitNotSure = async () => {
+    await submitFeedbackData(null, undefined, notes);
+  };
+
   if (submitted) {
     return (
       <div className="bg-primary/10 border border-primary/30 rounded-lg p-3">
@@ -89,6 +99,8 @@ export function FeedbackSection({
           <span className="text-sm font-medium">Feedback recorded</span>
           {feedbackState === 'correct' ? (
             <span className="text-xs text-text-muted ml-auto">Confirmed correct</span>
+          ) : feedbackState === 'not_sure' ? (
+            <span className="text-xs text-text-muted ml-auto">Marked as uncertain</span>
           ) : (
             <span className="text-xs text-text-muted ml-auto">Corrected to: {correctLabel}</span>
           )}
@@ -116,7 +128,7 @@ export function FeedbackSection({
           <MessageSquare className="w-4 h-4" />
           <span className="text-sm font-medium">Is this prediction correct?</span>
         </div>
-        
+
         {feedbackState === 'none' && (
           <div className="flex gap-2">
             <button
@@ -126,6 +138,13 @@ export function FeedbackSection({
               <Check className="w-3.5 h-3.5" />
               Correct
             </button>
+            <button
+              onClick={() => handleFeedback(null)}
+              className="flex items-center gap-1.5 px-3 py-1.5 bg-amber-500/20 hover:bg-amber-500/30 text-amber-600 rounded-md text-sm font-medium transition-colors"
+            >
+              <HelpCircle className="w-3.5 h-3.5" />
+              Not Sure
+            </button>
             <button
               onClick={() => handleFeedback(false)}
               className="flex items-center gap-1.5 px-3 py-1.5 bg-red-500/20 hover:bg-red-500/30 text-red-600 rounded-md text-sm font-medium transition-colors"
@@ -150,8 +169,8 @@ export function FeedbackSection({
             >
               <option value="" disabled>Select correct view...</option>
               {FETAL_VIEW_LABELS.map((label) => (
-                <option 
-                  key={label} 
+                <option
+                  key={label}
                   value={label}
                   disabled={label === topPrediction?.label}
                 >
@@ -187,7 +206,57 @@ export function FeedbackSection({
             <button
               onClick={handleSubmitCorrection}
               disabled={!correctLabel || isSubmitting}
-              className="flex-1 flex items-center justify-center gap-2 px-4 py-2 bg-primary hover:bg-primary-hover text-white rounded-lg text-sm font-medium disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+              className={`flex-1 flex items-center justify-center gap-2 px-4 py-2 rounded-lg text-sm font-medium transition-colors ${!correctLabel || isSubmitting
+                  ? 'bg-gray-200 text-gray-400 cursor-not-allowed'
+                  : 'bg-green-600 hover:bg-green-700 text-white'
+                }`}
+            >
+              {isSubmitting ? (
+                <span>Submitting...</span>
+              ) : (
+                <>
+                  <Send className="w-3.5 h-3.5" />
+                  <span>Submit Correction</span>
+                </>
+              )}
+            </button>
+          </div>
+        </div>
+      )}
+
+      {/* Not Sure form */}
+      {feedbackState === 'not_sure' && (
+        <div className="space-y-3 pt-2 border-t border-border">
+          <p className="text-xs text-amber-600">
+            You can add optional notes to explain your uncertainty.
+          </p>
+
+          {/* Notes input */}
+          <div>
+            <label className="block text-xs font-medium text-gray-600 mb-1.5">Notes (optional)</label>
+            <textarea
+              value={notes}
+              onChange={(e) => setNotes(e.target.value)}
+              placeholder="Why are you unsure about this prediction?"
+              className="w-full px-3 py-2 bg-white border border-gray-300 rounded-lg text-sm text-gray-800 resize-none h-14 focus:outline-none focus:ring-2 focus:ring-amber-500/20 focus:border-amber-500/50 transition-all"
+            />
+          </div>
+
+          {/* Action buttons - inline */}
+          <div className="flex gap-2 items-center">
+            <button
+              onClick={() => {
+                setFeedbackState('none');
+                setNotes('');
+              }}
+              className="px-4 py-2 text-sm text-gray-600 hover:text-gray-800 bg-gray-100 hover:bg-gray-200 rounded-lg transition-colors font-medium"
+            >
+              Cancel
+            </button>
+            <button
+              onClick={handleSubmitNotSure}
+              disabled={isSubmitting}
+              className="flex-1 flex items-center justify-center gap-2 px-4 py-2 bg-amber-500 hover:bg-amber-600 text-white rounded-lg text-sm font-medium disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
             >
               {isSubmitting ? (
                 <span>Submitting...</span>
@@ -204,3 +273,4 @@ export function FeedbackSection({
     </div>
   );
 }
+

frontend/src/lib/api.ts

@@ -1,4 +1,4 @@
-const API_BASE = typeof window !== 'undefined' && window.location.hostname === 'localhost' ? 'http://localhost:8000' : '';
+const API_BASE = window.location.hostname === 'localhost' ? 'http://localhost:8000' : '';
 
 export interface ClassificationResult {
   label: string;
@@ -135,7 +135,7 @@ export interface FeedbackEntry {
   predicted_label: string;
   predicted_confidence: number;
   all_predictions: PredictionDetail[];
-  is_correct: boolean;
+  is_correct: boolean | null;
   correct_label: string | null;
   reviewer_notes: string | null;
 }
@@ -153,8 +153,9 @@ export interface FeedbackStats {
   total_feedback: number;
   correct_count: number;
   incorrect_count: number;
+  not_sure_count: number;
   accuracy: number;
-  by_label: Record<string, { total: number; correct: number; incorrect: number }>;
+  by_label: Record<string, { total: number; correct: number; incorrect: number; not_sure: number }>;
 }
 
 export interface FeedbackCreate {
@@ -164,11 +165,12 @@ export interface FeedbackCreate {
   predicted_label: string;
   predicted_confidence: number;
   all_predictions: PredictionDetail[];
-  is_correct: boolean;
+  is_correct: boolean | null;
   correct_label?: string;
   reviewer_notes?: string;
   patient_id?: string;
   image_hash?: string;
+  preprocessed_image_base64?: string;
 }
 
 // Create a new session
@@ -187,7 +189,7 @@ export async function createSession(): Promise<SessionInfo> {
 // Get session info
 export async function getSession(sessionId: string): Promise<SessionInfo> {
   const response = await fetch(`${API_BASE}/api/v1/feedback/session/${sessionId}`);
-  
+
   if (!response.ok) {
     throw new Error('Session not found');
   }
@@ -222,10 +224,10 @@ export async function submitFeedback(feedback: FeedbackCreate): Promise<Feedback
 
 // Get all feedback
 export async function getFeedback(sessionId?: string): Promise<FeedbackEntry[]> {
-  const url = sessionId 
+  const url = sessionId
     ? `${API_BASE}/api/v1/feedback/?session_id=${sessionId}`
     : `${API_BASE}/api/v1/feedback/`;
-    
+
   const response = await fetch(url);
 
   if (!response.ok) {
@@ -240,7 +242,7 @@ export async function getFeedbackStats(sessionId?: string): Promise<FeedbackStat
   const url = sessionId
     ? `${API_BASE}/api/v1/feedback/statistics?session_id=${sessionId}`
     : `${API_BASE}/api/v1/feedback/statistics`;
-    
+
   const response = await fetch(url);
 
   if (!response.ok) {
@@ -255,7 +257,7 @@ export async function exportFeedbackCSV(sessionId?: string): Promise<void> {
   const url = sessionId
     ? `${API_BASE}/api/v1/feedback/export/csv?session_id=${sessionId}`
     : `${API_BASE}/api/v1/feedback/export/csv`;
-    
+
   const response = await fetch(url);
 
   if (!response.ok) {

frontend/src/pages/ClassificationPage.tsx

@@ -8,15 +8,15 @@ import { ResultsCard } from '../components/ResultsCard';
 import { PreprocessingBadge } from '../components/PreprocessingBadge';
 import { FeedbackSection } from '../components/FeedbackSection';
 import { SessionHistory } from '../components/SessionHistory';
-import { 
-  classifyImage, 
-  getFilePreview, 
-  getFileType, 
-  isDicomFile, 
+import {
+  classifyImage,
+  getFilePreview,
+  getFileType,
+  isDicomFile,
   createSession,
   recordImageAnalyzed,
-  type ClassificationResult, 
-  type PreprocessingInfo 
+  type ClassificationResult,
+  type PreprocessingInfo
 } from '../lib/api';
 
 interface ClassificationPageProps {
@@ -27,16 +27,16 @@ export function ClassificationPage({ onFeedbackUpdate }: ClassificationPageProps
   // Session state
   const [sessionId, setSessionId] = useState<string>('');
   const [feedbackRefresh, setFeedbackRefresh] = useState(0);
-  
+
   // File state
   const [file, setFile] = useState<File | null>(null);
   const [preview, setPreview] = useState<string | null>(null);
   const [isLoadingPreview, setIsLoadingPreview] = useState(false);
-  
+
   // Multiple files state (folder)
   const [files, setFiles] = useState<File[]>([]);
   const [currentIndex, setCurrentIndex] = useState(0);
-  
+
   // Settings & results
   const [topK, setTopK] = useState(5);
   const [results, setResults] = useState<ClassificationResult[] | null>(null);
@@ -44,7 +44,7 @@ export function ClassificationPage({ onFeedbackUpdate }: ClassificationPageProps
   const [processedImage, setProcessedImage] = useState<string | null>(null);
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
-  
+
   // Image view tab
   const [imageTab, setImageTab] = useState<'input' | 'processed'>('input');
 
@@ -67,7 +67,7 @@ export function ClassificationPage({ onFeedbackUpdate }: ClassificationPageProps
       setPreview(URL.createObjectURL(selectedFile));
       return;
     }
-    
+
     // For DICOM, fetch preview from backend
     setIsLoadingPreview(true);
     try {
@@ -98,13 +98,13 @@ export function ClassificationPage({ onFeedbackUpdate }: ClassificationPageProps
   const handleFolderUpload = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
     const fileList = e.target.files;
     if (!fileList) return;
-    
+
     // Accept both images and DICOM files
-    const validFiles = Array.from(fileList).filter(f => 
-      f.type.startsWith('image/') || 
+    const validFiles = Array.from(fileList).filter(f =>
+      f.type.startsWith('image/') ||
       isDicomFile(f.name)
     ).sort((a, b) => a.name.localeCompare(b.name));
-    
+
     if (validFiles.length > 0) {
       setFiles(validFiles);
       setCurrentIndex(0);
@@ -120,14 +120,14 @@ export function ClassificationPage({ onFeedbackUpdate }: ClassificationPageProps
 
   const navigateImage = useCallback((direction: 'prev' | 'next') => {
     if (files.length === 0) return;
-    
+
     let newIndex = currentIndex;
     if (direction === 'prev' && currentIndex > 0) {
       newIndex = currentIndex - 1;
     } else if (direction === 'next' && currentIndex < files.length - 1) {
       newIndex = currentIndex + 1;
     }
-    
+
     if (newIndex !== currentIndex) {
       setCurrentIndex(newIndex);
       setFile(files[newIndex]);
@@ -149,13 +149,13 @@ export function ClassificationPage({ onFeedbackUpdate }: ClassificationPageProps
       const response = await classifyImage(file, topK);
       setResults(response.predictions);
       setPreprocessingInfo(response.preprocessing);
-      
+
       // Use the processed image from backend
       if (response.preprocessing.processed_image_base64) {
         setProcessedImage(`data:image/png;base64,${response.preprocessing.processed_image_base64}`);
       }
       setImageTab('processed');
-      
+
       // Record image analyzed for session stats
       if (sessionId) {
         await recordImageAnalyzed(sessionId);
@@ -186,22 +186,20 @@ export function ClassificationPage({ onFeedbackUpdate }: ClassificationPageProps
             <div className="flex-shrink-0 flex gap-1 bg-dark-input p-1 rounded-xl">
               <button
                 onClick={() => setImageTab('input')}
-                className={`flex-1 px-4 py-2 text-xs font-semibold rounded-lg transition-all ${
-                  imageTab === 'input'
+                className={`flex-1 px-4 py-2 text-xs font-semibold rounded-lg transition-all ${imageTab === 'input'
                     ? 'bg-nvidia-green text-white shadow-md'
                     : 'text-text-secondary hover:text-text-primary hover:bg-white'
-                }`}
+                  }`}
               >
                 Input
               </button>
               <button
                 onClick={() => setImageTab('processed')}
                 disabled={!processedImage}
-                className={`flex-1 px-4 py-2 text-xs font-semibold rounded-lg transition-all ${
-                  imageTab === 'processed'
+                className={`flex-1 px-4 py-2 text-xs font-semibold rounded-lg transition-all ${imageTab === 'processed'
                     ? 'bg-nvidia-green text-white shadow-md'
                     : 'text-text-secondary hover:text-text-primary hover:bg-white disabled:opacity-40 disabled:cursor-not-allowed disabled:hover:bg-transparent'
-                }`}
+                  }`}
               >
                 Processed
               </button>
@@ -281,10 +279,10 @@ export function ClassificationPage({ onFeedbackUpdate }: ClassificationPageProps
 
               {/* Preprocessing Badge */}
               {(fileType || preprocessingInfo) && (
-                <PreprocessingBadge 
-                  info={preprocessingInfo} 
+                <PreprocessingBadge
+                  info={preprocessingInfo}
                   fileType={fileType}
-                  compact 
+                  compact
                 />
               )}
 
@@ -320,15 +318,14 @@ export function ClassificationPage({ onFeedbackUpdate }: ClassificationPageProps
 
       {/* Right Panel - Results */}
       <div className="w-1/2 bg-dark-bg flex flex-col min-h-0">
-        <Panel 
-          title="Results" 
+        <Panel
+          title="Results"
           action={
             preprocessingInfo && (
-              <span className={`text-xs px-2.5 py-1 rounded-full font-semibold ${
-                preprocessingInfo.pipeline === 'full' 
-                  ? 'bg-nvidia-green/10 text-nvidia-green' 
+              <span className={`text-xs px-2.5 py-1 rounded-full font-semibold ${preprocessingInfo.pipeline === 'full'
+                  ? 'bg-nvidia-green/10 text-nvidia-green'
                   : 'bg-amber-500/10 text-amber-600'
-              }`}>
+                }`}>
                 {preprocessingInfo.pipeline === 'full' ? 'Full Pipeline' : 'Basic Pipeline'}
               </span>
             )
@@ -337,7 +334,7 @@ export function ClassificationPage({ onFeedbackUpdate }: ClassificationPageProps
         >
           <div className="flex-1 overflow-y-auto space-y-4 pb-6">
             <ResultsCard results={results} isLoading={isLoading} />
-            
+
             {/* Feedback Section */}
             {results && results.length > 0 && file && (
               <FeedbackSection
@@ -346,10 +343,11 @@ export function ClassificationPage({ onFeedbackUpdate }: ClassificationPageProps
                 fileType={fileType || 'image'}
                 predictions={results}
                 topPrediction={results[0]}
+                preprocessedImageBase64={processedImage ? processedImage.split(',')[1] : undefined}
                 onFeedbackSubmitted={handleFeedbackSubmitted}
               />
             )}
-            
+
             {/* Session History */}
             {sessionId && (
               <SessionHistory

frontend/src/pages/HelpPage.tsx

@@ -0,0 +1,192 @@
+import { HelpCircle, Upload, Scan, Check, X, HelpCircle as UnsureIcon, Download, ArrowRight, Shield, Mail } from 'lucide-react';
+
+export function HelpPage() {
+    return (
+        <div className="flex-1 overflow-y-auto bg-gradient-to-b from-white to-gray-50">
+            <div className="max-w-4xl mx-auto px-8 py-10">
+                {/* Hero Section */}
+                <div className="text-center mb-12">
+                    <div className="inline-flex items-center justify-center w-16 h-16 bg-nvidia-green/10 rounded-2xl mb-4">
+                        <HelpCircle className="w-8 h-8 text-nvidia-green" />
+                    </div>
+                    <h1 className="text-3xl font-bold text-gray-900 mb-3">
+                        FetalCLIP User Guide
+                    </h1>
+                    <p className="text-lg text-gray-600 max-w-2xl mx-auto">
+                        A quick reference guide for using the FetalCLIP fetal ultrasound analysis tool.
+                    </p>
+                </div>
+
+                {/* Quick Start Steps */}
+                <div className="bg-white rounded-2xl border border-gray-200 shadow-sm p-8 mb-8">
+                    <h2 className="text-xl font-semibold text-gray-900 mb-6 flex items-center gap-2">
+                        <span className="w-8 h-8 rounded-lg bg-nvidia-green/10 flex items-center justify-center">
+                            <ArrowRight className="w-4 h-4 text-nvidia-green" />
+                        </span>
+                        Quick Start
+                    </h2>
+
+                    <div className="space-y-4">
+                        <Step number={1} title="Upload an Image">
+                            Upload a fetal ultrasound image (PNG, JPEG) or DICOM file. You can also load an entire folder for batch processing.
+                        </Step>
+
+                        <Step number={2} title="Run Classification">
+                            Click <strong>"Classify View"</strong> to analyze the image. The model will identify the anatomical view and display confidence scores.
+                        </Step>
+
+                        <Step number={3} title="Review & Provide Feedback">
+                            Review the prediction and indicate whether it's correct, incorrect, or uncertain. Your feedback helps improve the model.
+                        </Step>
+                    </div>
+                </div>
+
+                {/* Feedback Options */}
+                <div className="bg-white rounded-2xl border border-gray-200 shadow-sm p-8 mb-8">
+                    <h2 className="text-xl font-semibold text-gray-900 mb-6 flex items-center gap-2">
+                        <span className="w-8 h-8 rounded-lg bg-blue-100 flex items-center justify-center">
+                            <Scan className="w-4 h-4 text-blue-600" />
+                        </span>
+                        Feedback Options
+                    </h2>
+
+                    <div className="grid md:grid-cols-3 gap-4">
+                        <FeedbackCard
+                            icon={<Check className="w-5 h-5" />}
+                            title="Correct"
+                            description="The prediction matches the actual anatomical view."
+                            color="green"
+                        />
+                        <FeedbackCard
+                            icon={<UnsureIcon className="w-5 h-5" />}
+                            title="Not Sure"
+                            description="You're uncertain about the correct classification."
+                            color="amber"
+                        />
+                        <FeedbackCard
+                            icon={<X className="w-5 h-5" />}
+                            title="Incorrect"
+                            description="The prediction is wrong. Select the correct label."
+                            color="red"
+                        />
+                    </div>
+                </div>
+
+                {/* Features Overview */}
+                <div className="grid md:grid-cols-2 gap-6 mb-8">
+                    <FeatureCard
+                        icon={<Upload className="w-5 h-5 text-purple-600" />}
+                        title="Batch Processing"
+                        description="Load a folder of images and navigate through them using the arrow controls. Each image can be classified individually."
+                        color="purple"
+                    />
+                    <FeatureCard
+                        icon={<Download className="w-5 h-5 text-blue-600" />}
+                        title="Export Data"
+                        description="All feedback is automatically saved and can be exported as CSV for further analysis."
+                        color="blue"
+                    />
+                </div>
+
+                {/* Data Privacy Notice */}
+                <div className="bg-green-50 rounded-2xl border border-green-200 p-6 mb-8">
+                    <div className="flex gap-4">
+                        <div className="flex-shrink-0">
+                            <Shield className="w-6 h-6 text-green-600" />
+                        </div>
+                        <div>
+                            <h3 className="font-semibold text-green-900 mb-1">Data Privacy</h3>
+                            <p className="text-green-800 text-sm">
+                                All data is processed locally on your machine. Feedback and images are stored in your home directory
+                                (<code className="bg-green-100 px-1 rounded">~/.fetalclip/</code>) and are not uploaded to any external server.
+                            </p>
+                        </div>
+                    </div>
+                </div>
+
+                {/* Contact Section */}
+                <div className="text-center py-6 border-t border-gray-200">
+                    <div className="flex items-center justify-center gap-2 text-gray-500 text-sm">
+                        <Mail className="w-4 h-4" />
+                        <span>For questions or support, contact the research team.</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+}
+
+interface StepProps {
+    number: number;
+    title: string;
+    children: React.ReactNode;
+}
+
+function Step({ number, title, children }: StepProps) {
+    return (
+        <div className="flex gap-4">
+            <div className="flex-shrink-0 w-8 h-8 rounded-full bg-nvidia-green text-white flex items-center justify-center font-semibold text-sm">
+                {number}
+            </div>
+            <div className="flex-1">
+                <h3 className="font-medium text-gray-900 mb-1">{title}</h3>
+                <p className="text-gray-600 text-sm">{children}</p>
+            </div>
+        </div>
+    );
+}
+
+interface FeedbackCardProps {
+    icon: React.ReactNode;
+    title: string;
+    description: string;
+    color: 'green' | 'amber' | 'red';
+}
+
+function FeedbackCard({ icon, title, description, color }: FeedbackCardProps) {
+    const colorClasses = {
+        green: 'bg-green-50 border-green-200 text-green-600',
+        amber: 'bg-amber-50 border-amber-200 text-amber-600',
+        red: 'bg-red-50 border-red-200 text-red-600',
+    };
+
+    const iconBgClasses = {
+        green: 'bg-green-100',
+        amber: 'bg-amber-100',
+        red: 'bg-red-100',
+    };
+
+    return (
+        <div className={`rounded-xl border p-4 ${colorClasses[color]}`}>
+            <div className={`w-10 h-10 rounded-lg ${iconBgClasses[color]} flex items-center justify-center mb-3`}>
+                {icon}
+            </div>
+            <h3 className="font-semibold text-gray-900 mb-1">{title}</h3>
+            <p className="text-gray-600 text-xs">{description}</p>
+        </div>
+    );
+}
+
+interface FeatureCardProps {
+    icon: React.ReactNode;
+    title: string;
+    description: string;
+    color: 'purple' | 'blue';
+}
+
+function FeatureCard({ icon, title, description, color }: FeatureCardProps) {
+    const bgClasses = {
+        purple: 'bg-purple-50',
+        blue: 'bg-blue-50',
+    };
+
+    return (
+        <div className={`rounded-xl p-5 ${bgClasses[color]}`}>
+            <div className="w-10 h-10 rounded-lg bg-white shadow-sm flex items-center justify-center mb-3">
+                {icon}
+            </div>
+            <h3 className="font-semibold text-gray-900 mb-1">{title}</h3>
+            <p className="text-gray-600 text-sm">{description}</p>
+        </div>
+    );
+}

server.py

@@ -22,7 +22,7 @@ from fastapi.middleware.cors import CORSMiddleware
 from contextlib import asynccontextmanager
 
 # Import the backend app components
-from app.routes import classification_router, gestational_age_router
+from app.routes import classification_router, gestational_age_router, feedback_router
 from app.services.model import model_service
 
 # Assets directory
@@ -60,6 +60,7 @@ app.add_middleware(
 # Include API routers
 app.include_router(classification_router)
 app.include_router(gestational_age_router)
+app.include_router(feedback_router)
 
 
 # Health check endpoint