Add feedback system with correction logging

Features:
- Correct/Incorrect feedback buttons after classification
- Dropdown to select correct label when prediction is wrong
- Optional notes field for reviewers
- Low confidence warning (< 70%)
- Session tracking with history panel
- CSV export of feedback data
- Feedback counter in header

Components added:
- FeedbackSection.tsx
- SessionHistory.tsx
- feedback.py (service + routes)

backend/app/main.py

@@ -5,7 +5,7 @@ from contextlib import asynccontextmanager
 from pathlib import Path
 import sys
 
-from .routes import classification_router, gestational_age_router
+from .routes import classification_router, gestational_age_router, feedback_router
 from .services.model import model_service
 
 # Get assets directory - handle both development and PyInstaller frozen modes
@@ -71,6 +71,7 @@ app.add_middleware(
 # Include routers
 app.include_router(classification_router)
 app.include_router(gestational_age_router)
+app.include_router(feedback_router)
 
 
 @app.get("/", tags=["Health"])

backend/app/routes/__init__.py

@@ -1,5 +1,6 @@
 from .classification import router as classification_router
 from .gestational_age import router as gestational_age_router
+from .feedback import router as feedback_router
 
-__all__ = ["classification_router", "gestational_age_router"]
+__all__ = ["classification_router", "gestational_age_router", "feedback_router"]
 

backend/app/routes/feedback.py

@@ -0,0 +1,162 @@
+"""
+API routes for feedback management.
+"""
+
+from fastapi import APIRouter, HTTPException, Query
+from fastapi.responses import PlainTextResponse
+from pydantic import BaseModel
+from typing import List, Dict, Optional
+from datetime import datetime
+
+from ..services.feedback import feedback_service
+
+
+router = APIRouter(prefix="/api/v1/feedback", tags=["feedback"])
+
+
+# Pydantic models for request/response
+class PredictionDetail(BaseModel):
+    label: str
+    probability: float
+
+
+class FeedbackCreate(BaseModel):
+    session_id: str
+    filename: str
+    file_type: str
+    predicted_label: str
+    predicted_confidence: float
+    all_predictions: List[PredictionDetail]
+    is_correct: bool
+    correct_label: Optional[str] = None
+    reviewer_notes: Optional[str] = None
+    patient_id: Optional[str] = None
+    image_hash: Optional[str] = None
+
+
+class FeedbackResponse(BaseModel):
+    id: str
+    session_id: str
+    timestamp: str
+    filename: str
+    file_type: str
+    patient_id: Optional[str]
+    image_hash: Optional[str]
+    predicted_label: str
+    predicted_confidence: float
+    all_predictions: List[Dict]
+    is_correct: bool
+    correct_label: Optional[str]
+    reviewer_notes: Optional[str]
+
+
+class SessionCreate(BaseModel):
+    pass  # No parameters needed
+
+
+class SessionResponse(BaseModel):
+    session_id: str
+    created_at: str
+    image_count: int
+    feedback_count: int
+    correct_count: int
+    incorrect_count: int
+
+
+class StatisticsResponse(BaseModel):
+    total_feedback: int
+    correct_count: int
+    incorrect_count: int
+    accuracy: float
+    by_label: Dict
+
+
+# Session endpoints
+@router.post("/session", response_model=Dict)
+async def create_session():
+    """Create a new feedback session."""
+    session_id = feedback_service.create_session()
+    session = feedback_service.get_session(session_id)
+    return {"session_id": session_id, **session}
+
+
+@router.get("/session/{session_id}", response_model=Dict)
+async def get_session(session_id: str):
+    """Get session information."""
+    session = feedback_service.get_session(session_id)
+    if not session:
+        raise HTTPException(status_code=404, detail="Session not found")
+    return {"session_id": session_id, **session}
+
+
+@router.get("/sessions", response_model=Dict)
+async def get_all_sessions():
+    """Get all sessions."""
+    return feedback_service.get_all_sessions()
+
+
+@router.post("/session/{session_id}/image-analyzed")
+async def record_image_analyzed(session_id: str):
+    """Record that an image was analyzed in this session."""
+    feedback_service.update_session_stats(session_id, image_analyzed=True)
+    return {"status": "ok"}
+
+
+# Feedback endpoints
+@router.post("/", response_model=FeedbackResponse)
+async def create_feedback(feedback: FeedbackCreate):
+    """Submit feedback for a prediction."""
+    # Convert pydantic models to dicts
+    all_predictions_dict = [{"label": p.label, "probability": p.probability} for p in feedback.all_predictions]
+    
+    entry = feedback_service.add_feedback(
+        session_id=feedback.session_id,
+        filename=feedback.filename,
+        file_type=feedback.file_type,
+        predicted_label=feedback.predicted_label,
+        predicted_confidence=feedback.predicted_confidence,
+        all_predictions=all_predictions_dict,
+        is_correct=feedback.is_correct,
+        correct_label=feedback.correct_label,
+        reviewer_notes=feedback.reviewer_notes,
+        patient_id=feedback.patient_id,
+        image_hash=feedback.image_hash
+    )
+    
+    return entry
+
+
+@router.get("/", response_model=List[FeedbackResponse])
+async def get_feedback(session_id: Optional[str] = Query(None)):
+    """Get all feedback, optionally filtered by session."""
+    return feedback_service.get_feedback(session_id)
+
+
+@router.get("/statistics", response_model=StatisticsResponse)
+async def get_statistics(session_id: Optional[str] = Query(None)):
+    """Get feedback statistics."""
+    return feedback_service.get_statistics(session_id)
+
+
+@router.get("/export/csv", response_class=PlainTextResponse)
+async def export_csv(session_id: Optional[str] = Query(None)):
+    """Export feedback to CSV format."""
+    csv_content = feedback_service.export_to_csv(session_id)
+    if not csv_content:
+        raise HTTPException(status_code=404, detail="No feedback data to export")
+    
+    return PlainTextResponse(
+        content=csv_content,
+        media_type="text/csv",
+        headers={
+            "Content-Disposition": f"attachment; filename=fetalclip_feedback_{datetime.now().strftime('%Y%m%d_%H%M%S')}.csv"
+        }
+    )
+
+
+@router.delete("/{feedback_id}")
+async def delete_feedback(feedback_id: str):
+    """Delete a feedback entry."""
+    if feedback_service.delete_feedback(feedback_id):
+        return {"status": "deleted", "id": feedback_id}
+    raise HTTPException(status_code=404, detail="Feedback not found")

backend/app/services/feedback.py

@@ -0,0 +1,258 @@
+"""
+Feedback service for storing and managing prediction feedback.
+Stores feedback in a local JSON file for simplicity and privacy.
+"""
+
+import json
+import uuid
+import hashlib
+from datetime import datetime
+from pathlib import Path
+from typing import List, Dict, Optional
+import csv
+import io
+
+
+class FeedbackService:
+    """Service for managing prediction feedback with local JSON storage."""
+    
+    def __init__(self, storage_dir: Optional[Path] = None):
+        """Initialize feedback service with storage directory."""
+        if storage_dir is None:
+            # Default to user's home directory for persistence
+            storage_dir = Path.home() / ".fetalclip"
+        
+        self.storage_dir = Path(storage_dir)
+        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"
+        
+        # Initialize files if they don't exist
+        if not self.feedback_file.exists():
+            self._save_feedback([])
+        if not self.sessions_file.exists():
+            self._save_sessions({})
+    
+    def _load_feedback(self) -> List[Dict]:
+        """Load feedback from JSON file."""
+        try:
+            with open(self.feedback_file, 'r') as f:
+                return json.load(f)
+        except (json.JSONDecodeError, FileNotFoundError):
+            return []
+    
+    def _save_feedback(self, feedback: List[Dict]):
+        """Save feedback to JSON file."""
+        with open(self.feedback_file, 'w') as f:
+            json.dump(feedback, f, indent=2, default=str)
+    
+    def _load_sessions(self) -> Dict:
+        """Load sessions from JSON file."""
+        try:
+            with open(self.sessions_file, 'r') as f:
+                return json.load(f)
+        except (json.JSONDecodeError, FileNotFoundError):
+            return {}
+    
+    def _save_sessions(self, sessions: Dict):
+        """Save sessions to JSON file."""
+        with open(self.sessions_file, 'w') as f:
+            json.dump(sessions, f, indent=2, default=str)
+    
+    def create_session(self) -> str:
+        """Create a new session and return its ID."""
+        session_id = str(uuid.uuid4())[:8]
+        sessions = self._load_sessions()
+        sessions[session_id] = {
+            "created_at": datetime.now().isoformat(),
+            "image_count": 0,
+            "feedback_count": 0,
+            "correct_count": 0,
+            "incorrect_count": 0
+        }
+        self._save_sessions(sessions)
+        return session_id
+    
+    def get_session(self, session_id: str) -> Optional[Dict]:
+        """Get session info by ID."""
+        sessions = self._load_sessions()
+        return sessions.get(session_id)
+    
+    def get_all_sessions(self) -> Dict:
+        """Get all sessions."""
+        return self._load_sessions()
+    
+    def update_session_stats(self, session_id: str, is_correct: Optional[bool] = None, image_analyzed: bool = False):
+        """Update session statistics."""
+        sessions = self._load_sessions()
+        if session_id not in sessions:
+            sessions[session_id] = {
+                "created_at": datetime.now().isoformat(),
+                "image_count": 0,
+                "feedback_count": 0,
+                "correct_count": 0,
+                "incorrect_count": 0
+            }
+        
+        if image_analyzed:
+            sessions[session_id]["image_count"] += 1
+        
+        if is_correct is not None:
+            sessions[session_id]["feedback_count"] += 1
+            if is_correct:
+                sessions[session_id]["correct_count"] += 1
+            else:
+                sessions[session_id]["incorrect_count"] += 1
+        
+        self._save_sessions(sessions)
+    
+    def add_feedback(
+        self,
+        session_id: str,
+        filename: str,
+        file_type: str,
+        predicted_label: str,
+        predicted_confidence: float,
+        all_predictions: List[Dict],
+        is_correct: bool,
+        correct_label: Optional[str] = None,
+        reviewer_notes: Optional[str] = None,
+        patient_id: Optional[str] = None,
+        image_hash: Optional[str] = None
+    ) -> Dict:
+        """Add new feedback entry."""
+        feedback_id = str(uuid.uuid4())[:12]
+        
+        entry = {
+            "id": feedback_id,
+            "session_id": session_id,
+            "timestamp": datetime.now().isoformat(),
+            "filename": filename,
+            "file_type": file_type,
+            "patient_id": patient_id,
+            "image_hash": image_hash,
+            "predicted_label": predicted_label,
+            "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
+        }
+        
+        feedback_list = self._load_feedback()
+        feedback_list.append(entry)
+        self._save_feedback(feedback_list)
+        
+        # Update session stats
+        self.update_session_stats(session_id, is_correct=is_correct)
+        
+        return entry
+    
+    def get_feedback(self, session_id: Optional[str] = None) -> List[Dict]:
+        """Get all feedback, optionally filtered by session."""
+        feedback_list = self._load_feedback()
+        
+        if session_id:
+            feedback_list = [f for f in feedback_list if f.get("session_id") == session_id]
+        
+        return feedback_list
+    
+    def get_feedback_by_id(self, feedback_id: str) -> Optional[Dict]:
+        """Get single feedback entry by ID."""
+        feedback_list = self._load_feedback()
+        for entry in feedback_list:
+            if entry.get("id") == feedback_id:
+                return entry
+        return None
+    
+    def delete_feedback(self, feedback_id: str) -> bool:
+        """Delete feedback entry by ID."""
+        feedback_list = self._load_feedback()
+        original_length = len(feedback_list)
+        feedback_list = [f for f in feedback_list if f.get("id") != feedback_id]
+        
+        if len(feedback_list) < original_length:
+            self._save_feedback(feedback_list)
+            return True
+        return False
+    
+    def export_to_csv(self, session_id: Optional[str] = None) -> str:
+        """Export feedback to CSV format."""
+        feedback_list = self.get_feedback(session_id)
+        
+        if not feedback_list:
+            return ""
+        
+        output = io.StringIO()
+        
+        # Define CSV columns
+        fieldnames = [
+            "timestamp",
+            "session_id", 
+            "filename",
+            "patient_id",
+            "file_type",
+            "predicted_label",
+            "predicted_confidence",
+            "is_correct",
+            "correct_label",
+            "reviewer_notes"
+        ]
+        
+        writer = csv.DictWriter(output, fieldnames=fieldnames, extrasaction='ignore')
+        writer.writeheader()
+        
+        for entry in feedback_list:
+            # Flatten the entry for CSV
+            row = {
+                "timestamp": entry.get("timestamp", ""),
+                "session_id": entry.get("session_id", ""),
+                "filename": entry.get("filename", ""),
+                "patient_id": entry.get("patient_id", ""),
+                "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",
+                "correct_label": entry.get("correct_label", ""),
+                "reviewer_notes": entry.get("reviewer_notes", "")
+            }
+            writer.writerow(row)
+        
+        return output.getvalue()
+    
+    def get_statistics(self, session_id: Optional[str] = None) -> Dict:
+        """Get feedback statistics."""
+        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
+        
+        # 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"] += 1
+            if entry.get("is_correct"):
+                label_stats[label]["correct"] += 1
+            else:
+                label_stats[label]["incorrect"] += 1
+        
+        return {
+            "total_feedback": total,
+            "correct_count": correct,
+            "incorrect_count": incorrect,
+            "accuracy": round(correct / total * 100, 1) if total > 0 else 0,
+            "by_label": label_stats
+        }
+    
+    @staticmethod
+    def compute_image_hash(image_bytes: bytes) -> str:
+        """Compute SHA256 hash of image bytes."""
+        return hashlib.sha256(image_bytes).hexdigest()[:16]
+
+
+# Singleton instance
+feedback_service = FeedbackService()

frontend/src/App.tsx

@@ -1,10 +1,10 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useCallback } from 'react';
 import { Scan, Calendar } from 'lucide-react';
 import { Header } from './components/Header';
 import { Tabs } from './components/Tabs';
 import { ClassificationPage } from './pages/ClassificationPage';
 import { GestationalAgePage } from './pages/GestationalAgePage';
-import { checkHealth } from './lib/api';
+import { checkHealth, getFeedbackStats } from './lib/api';
 
 const tabs = [
   { id: 'classification', label: 'View Classification', icon: <Scan className="w-4 h-4" /> },
@@ -14,6 +14,11 @@ const tabs = [
 function App() {
   const [activeTab, setActiveTab] = useState('classification');
   const [isConnected, setIsConnected] = useState(false);
+  const [feedbackStats, setFeedbackStats] = useState<{
+    total: number;
+    correct: number;
+    incorrect: number;
+  } | null>(null);
 
   useEffect(() => {
     const checkConnection = async () => {
@@ -26,17 +31,35 @@ function App() {
     return () => clearInterval(interval);
   }, []);
 
+  // Load feedback stats
+  const loadFeedbackStats = useCallback(async () => {
+    try {
+      const stats = await getFeedbackStats();
+      setFeedbackStats({
+        total: stats.total_feedback,
+        correct: stats.correct_count,
+        incorrect: stats.incorrect_count
+      });
+    } catch {
+      // Ignore errors - stats are optional
+    }
+  }, []);
+
+  useEffect(() => {
+    loadFeedbackStats();
+  }, [loadFeedbackStats]);
+
   return (
     <div className="h-screen flex flex-col bg-dark-bg overflow-hidden">
       {/* Header - fixed height */}
-      <Header isConnected={isConnected} />
+      <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 />}
+        {activeTab === 'classification' && <ClassificationPage onFeedbackUpdate={loadFeedbackStats} />}
         {activeTab === 'gestational-age' && <GestationalAgePage />}
       </main>
 
@@ -54,7 +77,9 @@ function App() {
               🤗 Model Hub
             </a>
             <a
-              href="https://arxiv.org/abs/2502.14807" target="_blank" rel="noopener noreferrer"
+              href="https://arxiv.org/abs/2502.14807"
+              target="_blank"
+              rel="noopener noreferrer"
               className="text-accent-blue hover:text-accent-blue-hover transition-colors font-medium"
             >
               📄 Paper

frontend/src/components/FeedbackSection.tsx

@@ -0,0 +1,223 @@
+import { useState } from 'react';
+import { Check, X, ChevronDown, Send, MessageSquare } from 'lucide-react';
+import { FETAL_VIEW_LABELS, submitFeedback, FeedbackCreate, ClassificationResult } from '../lib/api';
+
+interface FeedbackSectionProps {
+  sessionId: string;
+  filename: string;
+  fileType: 'dicom' | 'image';
+  predictions: ClassificationResult[];
+  topPrediction: ClassificationResult | null;
+  patientId?: string;
+  imageHash?: string;
+  onFeedbackSubmitted?: () => void;
+  disabled?: boolean;
+}
+
+export function FeedbackSection({
+  sessionId,
+  filename,
+  fileType,
+  predictions,
+  topPrediction,
+  patientId,
+  imageHash,
+  onFeedbackSubmitted,
+  disabled = false,
+}: FeedbackSectionProps) {
+  const [feedbackState, setFeedbackState] = useState<'none' | 'correct' | 'incorrect'>('none');
+  const [correctLabel, setCorrectLabel] = useState<string>('');
+  const [notes, setNotes] = useState<string>('');
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [submitted, setSubmitted] = useState(false);
+  const [showDropdown, setShowDropdown] = useState(false);
+
+  const handleFeedback = async (isCorrect: boolean) => {
+    if (disabled || !topPrediction) return;
+
+    if (isCorrect) {
+      // Submit immediately for correct predictions
+      setFeedbackState('correct');
+      await submitFeedbackData(true);
+    } else {
+      // Show correction form for incorrect predictions
+      setFeedbackState('incorrect');
+      setShowDropdown(true);
+    }
+  };
+
+  const submitFeedbackData = async (isCorrect: boolean, overrideLabel?: string, overrideNotes?: string) => {
+    if (!topPrediction || isSubmitting) return;
+
+    setIsSubmitting(true);
+    try {
+      const feedbackData: FeedbackCreate = {
+        session_id: sessionId,
+        filename,
+        file_type: fileType,
+        predicted_label: topPrediction.label,
+        predicted_confidence: topPrediction.confidence,
+        all_predictions: predictions.map(p => ({
+          label: p.label,
+          probability: p.confidence
+        })),
+        is_correct: isCorrect,
+        correct_label: overrideLabel || correctLabel || undefined,
+        reviewer_notes: overrideNotes || notes || undefined,
+        patient_id: patientId,
+        image_hash: imageHash,
+      };
+
+      await submitFeedback(feedbackData);
+      setSubmitted(true);
+      onFeedbackSubmitted?.();
+    } catch (error) {
+      console.error('Failed to submit feedback:', error);
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  const handleSubmitCorrection = async () => {
+    if (!correctLabel) return;
+    await submitFeedbackData(false, correctLabel, notes);
+  };
+
+  if (submitted) {
+    return (
+      <div className="bg-primary/10 border border-primary/30 rounded-lg p-3">
+        <div className="flex items-center gap-2 text-primary">
+          <Check className="w-4 h-4" />
+          <span className="text-sm font-medium">Feedback recorded</span>
+          {feedbackState === 'correct' ? (
+            <span className="text-xs text-text-muted ml-auto">Confirmed correct</span>
+          ) : (
+            <span className="text-xs text-text-muted ml-auto">Corrected to: {correctLabel}</span>
+          )}
+        </div>
+      </div>
+    );
+  }
+
+  if (disabled || !topPrediction) {
+    return (
+      <div className="bg-surface-secondary rounded-lg p-3 opacity-50">
+        <div className="flex items-center gap-2 text-text-muted">
+          <MessageSquare className="w-4 h-4" />
+          <span className="text-sm">Run classification to provide feedback</span>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="bg-surface-secondary rounded-lg p-3 space-y-3">
+      {/* Feedback header */}
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-2 text-text-muted">
+          <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
+              onClick={() => handleFeedback(true)}
+              className="flex items-center gap-1.5 px-3 py-1.5 bg-green-500/20 hover:bg-green-500/30 text-green-600 rounded-md text-sm font-medium transition-colors"
+            >
+              <Check className="w-3.5 h-3.5" />
+              Correct
+            </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"
+            >
+              <X className="w-3.5 h-3.5" />
+              Incorrect
+            </button>
+          </div>
+        )}
+      </div>
+
+      {/* Correction form */}
+      {feedbackState === 'incorrect' && (
+        <div className="space-y-3 pt-2 border-t border-border">
+          {/* Label dropdown */}
+          <div className="relative">
+            <label className="block text-xs font-medium text-gray-600 mb-1.5">Correct Label</label>
+            <button
+              onClick={() => setShowDropdown(!showDropdown)}
+              className="w-full flex items-center justify-between px-3 py-2.5 bg-white border border-gray-300 rounded-lg text-sm text-left hover:border-primary/50 focus:outline-none focus:ring-2 focus:ring-primary/20 transition-all"
+            >
+              <span className={correctLabel ? 'text-gray-800 font-medium' : 'text-gray-400'}>
+                {correctLabel || 'Select correct view...'}
+              </span>
+              <ChevronDown className={`w-4 h-4 text-gray-400 transition-transform ${showDropdown ? 'rotate-180' : ''}`} />
+            </button>
+            
+            {showDropdown && (
+              <div className="absolute z-50 w-full mt-1 bg-white border border-gray-200 rounded-lg shadow-xl max-h-60 overflow-y-auto">
+                {FETAL_VIEW_LABELS.map((label) => (
+                  <button
+                    key={label}
+                    onClick={() => {
+                      setCorrectLabel(label);
+                      setShowDropdown(false);
+                    }}
+                    className={`w-full px-3 py-2.5 text-sm text-left transition-colors border-b border-gray-100 last:border-b-0
+                      ${label === correctLabel ? 'bg-primary/10 text-primary font-medium' : 'text-gray-700 hover:bg-gray-50'}
+                      ${label === topPrediction?.label ? 'opacity-50 bg-gray-50' : ''}`}
+                  >
+                    {label}
+                    {label === topPrediction?.label && (
+                      <span className="text-xs text-gray-400 ml-2">(predicted)</span>
+                    )}
+                  </button>
+                ))}
+              </div>
+            )}
+          </div>
+
+          {/* 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="Any additional notes about this case..."
+              className="w-full px-3 py-2.5 bg-white border border-gray-300 rounded-lg text-sm text-gray-800 resize-none h-16 focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary/50 transition-all"
+            />
+          </div>
+
+          {/* Submit button */}
+          <div className="flex gap-2">
+            <button
+              onClick={() => {
+                setFeedbackState('none');
+                setCorrectLabel('');
+                setNotes('');
+              }}
+              className="px-3 py-1.5 text-sm text-text-muted hover:text-text-primary transition-colors"
+            >
+              Cancel
+            </button>
+            <button
+              onClick={handleSubmitCorrection}
+              disabled={!correctLabel || isSubmitting}
+              className="flex-1 flex items-center justify-center gap-2 px-3 py-1.5 bg-primary hover:bg-primary-hover text-white rounded-md text-sm font-medium disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+            >
+              {isSubmitting ? (
+                <span>Submitting...</span>
+              ) : (
+                <>
+                  <Send className="w-3.5 h-3.5" />
+                  <span>Submit Correction</span>
+                </>
+              )}
+            </button>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

frontend/src/components/Header.tsx

@@ -1,10 +1,15 @@
-import { Zap } from 'lucide-react';
+import { Zap, Check, X, MessageSquare } from 'lucide-react';
 
 interface HeaderProps {
   isConnected: boolean;
+  feedbackStats?: {
+    total: number;
+    correct: number;
+    incorrect: number;
+  } | null;
 }
 
-export function Header({ isConnected }: HeaderProps) {
+export function Header({ isConnected, feedbackStats }: HeaderProps) {
   return (
     <header className="bg-white border-b border-dark-border px-8 py-4 shadow-sm">
       <div className="flex items-center justify-between">
@@ -22,6 +27,23 @@ export function Header({ isConnected }: HeaderProps) {
           </div>
         </div>
         <div className="flex items-center gap-5">
+          {/* Feedback counter */}
+          {feedbackStats && feedbackStats.total > 0 && (
+            <div className="flex items-center gap-2 px-3 py-1.5 rounded-full bg-dark-input border border-dark-border">
+              <MessageSquare className="w-3.5 h-3.5 text-accent-blue" />
+              <span className="text-xs text-text-secondary">
+                <span className="text-green-600 font-medium">{feedbackStats.correct}</span>
+                <span className="text-text-muted mx-1">/</span>
+                <span className="text-red-500 font-medium">{feedbackStats.incorrect}</span>
+              </span>
+              {feedbackStats.total >= 5 && (
+                <span className="text-xs text-text-muted">
+                  ({Math.round(feedbackStats.correct / feedbackStats.total * 100)}%)
+                </span>
+              )}
+            </div>
+          )}
+          
           <div className="flex items-center gap-2 px-3 py-1.5 rounded-full bg-dark-input border border-dark-border">
             <div
               className={`w-2 h-2 rounded-full transition-colors ${

frontend/src/components/ResultsCard.tsx

@@ -1,12 +1,14 @@
+import { AlertTriangle } from 'lucide-react';
 import { formatLabel } from '../lib/utils';
 import type { ClassificationResult } from '../lib/api';
 
 interface ResultsCardProps {
   results: ClassificationResult[] | null;
   isLoading: boolean;
+  confidenceThreshold?: number; // Default 70%
 }
 
-export function ResultsCard({ results, isLoading }: ResultsCardProps) {
+export function ResultsCard({ results, isLoading, confidenceThreshold = 70 }: ResultsCardProps) {
   if (isLoading) {
     return (
       <div className="space-y-3 animate-pulse">
@@ -38,21 +40,42 @@ export function ResultsCard({ results, isLoading }: ResultsCardProps) {
   }
 
   const topResult = results[0];
+  const isLowConfidence = topResult.confidence < confidenceThreshold;
 
   return (
     <div className="space-y-3 animate-fade-in">
+      {/* Low Confidence Warning */}
+      {isLowConfidence && (
+        <div className="flex items-start gap-2 p-3 bg-yellow-50 border border-yellow-200 rounded-lg">
+          <AlertTriangle className="w-4 h-4 text-yellow-600 flex-shrink-0 mt-0.5" />
+          <div className="text-xs text-yellow-800">
+            <span className="font-semibold">Low Confidence:</span> The model is uncertain about this prediction. 
+            Please verify manually and provide feedback.
+          </div>
+        </div>
+      )}
+
       {/* Top Prediction */}
-      <div className="bg-gradient-to-r from-nvidia-green/10 to-nvidia-green/5 border border-nvidia-green/20 rounded-xl p-4 shadow-card">
+      <div className={`bg-gradient-to-r ${
+        isLowConfidence 
+          ? 'from-yellow-50 to-yellow-50/50 border-yellow-200' 
+          : 'from-nvidia-green/10 to-nvidia-green/5 border-nvidia-green/20'
+      } border rounded-xl p-4 shadow-card`}>
         <p className="text-[10px] uppercase tracking-wider text-text-muted mb-1">
           Top Prediction
         </p>
         <div className="flex items-baseline justify-between">
-          <span className="text-xl font-bold text-nvidia-green">
+          <span className={`text-xl font-bold ${isLowConfidence ? 'text-yellow-700' : 'text-nvidia-green'}`}>
             {formatLabel(topResult.label)}
           </span>
-          <span className="text-lg font-semibold text-text-primary">
-            {topResult.confidence.toFixed(1)}%
-          </span>
+          <div className="flex items-center gap-1.5">
+            {isLowConfidence && <AlertTriangle className="w-4 h-4 text-yellow-600" />}
+            <span className={`text-lg font-semibold ${
+              isLowConfidence ? 'text-yellow-700' : 'text-text-primary'
+            }`}>
+              {topResult.confidence.toFixed(1)}%
+            </span>
+          </div>
         </div>
       </div>
 

frontend/src/components/SessionHistory.tsx

@@ -0,0 +1,171 @@
+import { useState, useEffect } from 'react';
+import { History, Check, X, AlertTriangle, Download, ChevronDown, ChevronUp } from 'lucide-react';
+import { getFeedback, exportFeedbackCSV, FeedbackEntry, FeedbackStats, getFeedbackStats } from '../lib/api';
+
+interface SessionHistoryProps {
+  sessionId: string;
+  onSelectEntry?: (entry: FeedbackEntry) => void;
+  refreshTrigger?: number; // Increment to trigger refresh
+}
+
+export function SessionHistory({ sessionId, onSelectEntry, refreshTrigger }: SessionHistoryProps) {
+  const [entries, setEntries] = useState<FeedbackEntry[]>([]);
+  const [stats, setStats] = useState<FeedbackStats | null>(null);
+  const [isExpanded, setIsExpanded] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+
+  useEffect(() => {
+    loadData();
+  }, [sessionId, refreshTrigger]);
+
+  const loadData = async () => {
+    if (!sessionId) return;
+    
+    setIsLoading(true);
+    try {
+      const [feedbackData, statsData] = await Promise.all([
+        getFeedback(sessionId),
+        getFeedbackStats(sessionId)
+      ]);
+      setEntries(feedbackData);
+      setStats(statsData);
+    } catch (error) {
+      console.error('Failed to load session data:', error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleExport = async () => {
+    try {
+      await exportFeedbackCSV(sessionId);
+    } catch (error) {
+      console.error('Failed to export:', error);
+    }
+  };
+
+  if (entries.length === 0 && !isLoading) {
+    return null; // Don't show anything if no entries
+  }
+
+  return (
+    <div className="bg-surface-secondary rounded-lg overflow-hidden">
+      {/* Header - always visible */}
+      <button
+        onClick={() => setIsExpanded(!isExpanded)}
+        className="w-full flex items-center justify-between px-3 py-2.5 hover:bg-surface-secondary/80 transition-colors"
+      >
+        <div className="flex items-center gap-2">
+          <History className="w-4 h-4 text-accent-blue" />
+          <span className="text-sm font-medium text-text-primary">Session History</span>
+          {stats && (
+            <span className="text-xs text-text-muted">
+              ({stats.total_feedback} reviewed)
+            </span>
+          )}
+        </div>
+        
+        <div className="flex items-center gap-3">
+          {stats && stats.total_feedback > 0 && (
+            <div className="flex items-center gap-2 text-xs">
+              <span className="flex items-center gap-1 text-green-600">
+                <Check className="w-3 h-3" />
+                {stats.correct_count}
+              </span>
+              <span className="flex items-center gap-1 text-red-500">
+                <X className="w-3 h-3" />
+                {stats.incorrect_count}
+              </span>
+              <span className="text-text-muted">
+                ({stats.accuracy}% acc)
+              </span>
+            </div>
+          )}
+          {isExpanded ? (
+            <ChevronUp className="w-4 h-4 text-text-muted" />
+          ) : (
+            <ChevronDown className="w-4 h-4 text-text-muted" />
+          )}
+        </div>
+      </button>
+
+      {/* Expanded content */}
+      {isExpanded && (
+        <div className="border-t border-border">
+          {/* Export button */}
+          {entries.length > 0 && (
+            <div className="px-3 py-2 border-b border-border">
+              <button
+                onClick={handleExport}
+                className="flex items-center gap-1.5 px-2.5 py-1.5 text-xs bg-accent-blue/10 hover:bg-accent-blue/20 text-accent-blue rounded-md transition-colors"
+              >
+                <Download className="w-3.5 h-3.5" />
+                Export to CSV
+              </button>
+            </div>
+          )}
+
+          {/* Entry list */}
+          <div className="max-h-48 overflow-y-auto">
+            {isLoading ? (
+              <div className="px-3 py-4 text-center text-sm text-text-muted">
+                Loading...
+              </div>
+            ) : entries.length === 0 ? (
+              <div className="px-3 py-4 text-center text-sm text-text-muted">
+                No feedback recorded yet
+              </div>
+            ) : (
+              entries.map((entry) => (
+                <div
+                  key={entry.id}
+                  onClick={() => onSelectEntry?.(entry)}
+                  className={`px-3 py-2 border-b border-border/50 last:border-b-0 hover:bg-surface cursor-pointer transition-colors`}
+                >
+                  <div className="flex items-start justify-between gap-2">
+                    <div className="flex-1 min-w-0">
+                      <div className="flex items-center gap-2">
+                        <span className="text-xs font-mono text-text-muted truncate max-w-[120px]">
+                          {entry.filename}
+                        </span>
+                        <span className={`flex items-center gap-0.5 text-xs ${entry.is_correct ? 'text-green-600' : 'text-red-500'}`}>
+                          {entry.is_correct ? (
+                            <Check className="w-3 h-3" />
+                          ) : (
+                            <X className="w-3 h-3" />
+                          )}
+                        </span>
+                      </div>
+                      <div className="text-xs text-text-primary mt-0.5">
+                        {entry.is_correct ? (
+                          entry.predicted_label
+                        ) : (
+                          <span>
+                            <span className="line-through text-text-muted">{entry.predicted_label}</span>
+                            {' → '}
+                            <span className="text-primary">{entry.correct_label}</span>
+                          </span>
+                        )}
+                      </div>
+                    </div>
+                    <div className="flex flex-col items-end">
+                      <span className={`text-xs font-medium ${
+                        entry.predicted_confidence >= 70 ? 'text-green-600' :
+                        entry.predicted_confidence >= 50 ? 'text-yellow-600' : 'text-red-500'
+                      }`}>
+                        {entry.predicted_confidence}%
+                      </span>
+                      {entry.predicted_confidence < 70 && (
+                        <AlertTriangle className="w-3 h-3 text-yellow-600" />
+                      )}
+                    </div>
+                  </div>
+                </div>
+              ))
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

frontend/src/components/index.ts

@@ -9,3 +9,5 @@ export { GAResultsCard } from './GAResultsCard';
 export { Panel } from './Panel';
 export { Tabs } from './Tabs';
 export { PreprocessingBadge } from './PreprocessingBadge';
+export { FeedbackSection } from './FeedbackSection';
+export { SessionHistory } from './SessionHistory';

frontend/src/lib/api.ts

@@ -1,7 +1,4 @@
-// Auto-detect: localhost for dev, empty for HF Spaces (same origin)
-const API_BASE = typeof window !== 'undefined' && window.location.hostname === 'localhost' 
-  ? 'http://localhost:8000' 
-  : '';
+const API_BASE = 'http://localhost:8000';
 
 export interface ClassificationResult {
   label: string;
@@ -119,3 +116,187 @@ export async function checkHealth(): Promise<boolean> {
     return false;
   }
 }
+
+// ==================== Feedback API ====================
+
+export interface PredictionDetail {
+  label: string;
+  probability: number;
+}
+
+export interface FeedbackEntry {
+  id: string;
+  session_id: string;
+  timestamp: string;
+  filename: string;
+  file_type: string;
+  patient_id: string | null;
+  image_hash: string | null;
+  predicted_label: string;
+  predicted_confidence: number;
+  all_predictions: PredictionDetail[];
+  is_correct: boolean;
+  correct_label: string | null;
+  reviewer_notes: string | null;
+}
+
+export interface SessionInfo {
+  session_id: string;
+  created_at: string;
+  image_count: number;
+  feedback_count: number;
+  correct_count: number;
+  incorrect_count: number;
+}
+
+export interface FeedbackStats {
+  total_feedback: number;
+  correct_count: number;
+  incorrect_count: number;
+  accuracy: number;
+  by_label: Record<string, { total: number; correct: number; incorrect: number }>;
+}
+
+export interface FeedbackCreate {
+  session_id: string;
+  filename: string;
+  file_type: string;
+  predicted_label: string;
+  predicted_confidence: number;
+  all_predictions: PredictionDetail[];
+  is_correct: boolean;
+  correct_label?: string;
+  reviewer_notes?: string;
+  patient_id?: string;
+  image_hash?: string;
+}
+
+// Create a new session
+export async function createSession(): Promise<SessionInfo> {
+  const response = await fetch(`${API_BASE}/api/v1/feedback/session`, {
+    method: 'POST',
+  });
+
+  if (!response.ok) {
+    throw new Error('Failed to create session');
+  }
+
+  return response.json();
+}
+
+// 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');
+  }
+
+  return response.json();
+}
+
+// Record image analyzed
+export async function recordImageAnalyzed(sessionId: string): Promise<void> {
+  await fetch(`${API_BASE}/api/v1/feedback/session/${sessionId}/image-analyzed`, {
+    method: 'POST',
+  });
+}
+
+// Submit feedback
+export async function submitFeedback(feedback: FeedbackCreate): Promise<FeedbackEntry> {
+  const response = await fetch(`${API_BASE}/api/v1/feedback/`, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify(feedback),
+  });
+
+  if (!response.ok) {
+    const error = await response.json();
+    throw new Error(error.detail || 'Failed to submit feedback');
+  }
+
+  return response.json();
+}
+
+// Get all feedback
+export async function getFeedback(sessionId?: string): Promise<FeedbackEntry[]> {
+  const url = sessionId 
+    ? `${API_BASE}/api/v1/feedback/?session_id=${sessionId}`
+    : `${API_BASE}/api/v1/feedback/`;
+    
+  const response = await fetch(url);
+
+  if (!response.ok) {
+    throw new Error('Failed to get feedback');
+  }
+
+  return response.json();
+}
+
+// Get feedback statistics
+export async function getFeedbackStats(sessionId?: string): Promise<FeedbackStats> {
+  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) {
+    throw new Error('Failed to get statistics');
+  }
+
+  return response.json();
+}
+
+// Export feedback as CSV
+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) {
+    throw new Error('No feedback data to export');
+  }
+
+  const blob = await response.blob();
+  const downloadUrl = window.URL.createObjectURL(blob);
+  const a = document.createElement('a');
+  a.href = downloadUrl;
+  a.download = `fetalclip_feedback_${new Date().toISOString().slice(0, 10)}.csv`;
+  document.body.appendChild(a);
+  a.click();
+  a.remove();
+  window.URL.revokeObjectURL(downloadUrl);
+}
+
+// Delete feedback entry
+export async function deleteFeedback(feedbackId: string): Promise<void> {
+  const response = await fetch(`${API_BASE}/api/v1/feedback/${feedbackId}`, {
+    method: 'DELETE',
+  });
+
+  if (!response.ok) {
+    throw new Error('Failed to delete feedback');
+  }
+}
+
+// List of all fetal view labels
+export const FETAL_VIEW_LABELS = [
+  "Fetal abdomen",
+  "Fetal brain (Transventricular)",
+  "Fetal brain (Transcerebellar)",
+  "Fetal femur",
+  "Fetal thorax (4-chamber view)",
+  "Fetal face (Lips)",
+  "Fetal brain (Transthalamic)",
+  "Other",
+  "Maternal anatomy",
+  "Fetal face (Profile)",
+  "Fetal thorax (3-vessel view)",
+  "Fetal thorax (LVOT)",
+  "Fetal thorax (RVOT)"
+];

frontend/src/pages/ClassificationPage.tsx

@@ -1,4 +1,4 @@
-import { useState, useCallback } from 'react';
+import { useState, useCallback, useEffect } from 'react';
 import { Search, ChevronLeft, ChevronRight, FolderOpen } from 'lucide-react';
 import { Panel } from '../components/Panel';
 import { FileUpload } from '../components/FileUpload';
@@ -6,9 +6,28 @@ import { Button } from '../components/Button';
 import { Slider } from '../components/Slider';
 import { ResultsCard } from '../components/ResultsCard';
 import { PreprocessingBadge } from '../components/PreprocessingBadge';
-import { classifyImage, getFilePreview, getFileType, isDicomFile, type ClassificationResult, type PreprocessingInfo } from '../lib/api';
+import { FeedbackSection } from '../components/FeedbackSection';
+import { SessionHistory } from '../components/SessionHistory';
+import { 
+  classifyImage, 
+  getFilePreview, 
+  getFileType, 
+  isDicomFile, 
+  createSession,
+  recordImageAnalyzed,
+  type ClassificationResult, 
+  type PreprocessingInfo 
+} from '../lib/api';
 
-export function ClassificationPage() {
+interface ClassificationPageProps {
+  onFeedbackUpdate?: () => void;
+}
+
+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);
@@ -29,6 +48,19 @@ export function ClassificationPage() {
   // Image view tab
   const [imageTab, setImageTab] = useState<'input' | 'processed'>('input');
 
+  // Initialize session on mount
+  useEffect(() => {
+    const initSession = async () => {
+      try {
+        const session = await createSession();
+        setSessionId(session.session_id);
+      } catch (err) {
+        console.error('Failed to create session:', err);
+      }
+    };
+    initSession();
+  }, []);
+
   const loadPreview = useCallback(async (selectedFile: File) => {
     // For regular images, create local preview
     if (!isDicomFile(selectedFile.name)) {
@@ -123,6 +155,11 @@ export function ClassificationPage() {
         setProcessedImage(`data:image/png;base64,${response.preprocessing.processed_image_base64}`);
       }
       setImageTab('processed');
+      
+      // Record image analyzed for session stats
+      if (sessionId) {
+        await recordImageAnalyzed(sessionId);
+      }
     } catch (err) {
       setError(err instanceof Error ? err.message : 'Classification failed');
       setResults(null);
@@ -132,6 +169,11 @@ export function ClassificationPage() {
     }
   };
 
+  const handleFeedbackSubmitted = () => {
+    setFeedbackRefresh(prev => prev + 1);
+    onFeedbackUpdate?.();
+  };
+
   const fileType = file ? getFileType(file.name) : null;
 
   return (
@@ -293,8 +335,28 @@ export function ClassificationPage() {
           }
           className="flex-1 flex flex-col min-h-0"
         >
-          <div className="flex-1 overflow-y-auto">
+          <div className="flex-1 overflow-y-auto space-y-4">
             <ResultsCard results={results} isLoading={isLoading} />
+            
+            {/* Feedback Section */}
+            {results && results.length > 0 && file && (
+              <FeedbackSection
+                sessionId={sessionId}
+                filename={file.name}
+                fileType={fileType || 'image'}
+                predictions={results}
+                topPrediction={results[0]}
+                onFeedbackSubmitted={handleFeedbackSubmitted}
+              />
+            )}
+            
+            {/* Session History */}
+            {sessionId && (
+              <SessionHistory
+                sessionId={sessionId}
+                refreshTrigger={feedbackRefresh}
+              />
+            )}
           </div>
         </Panel>
       </div>