View-aware GA with WHO biometry formulas

backend/app/routes/gestational_age.py

@@ -1,14 +1,23 @@
 from fastapi import APIRouter, UploadFile, File, Query, HTTPException
 from fastapi.responses import JSONResponse
+from typing import Optional
 from ..services.model import model_service
 
 router = APIRouter(prefix="/api/v1/gestational-age", tags=["Gestational Age"])
 
+# Views that support GA estimation (match keys from prompt_fetal_view.json)
+GA_ELIGIBLE_VIEWS = [
+    "brain",    # Head Circumference
+    "abdomen",  # Abdominal Circumference
+    "femur",    # Femur Length
+]
+
 
 @router.post("/")
 async def estimate_gestational_age(
     file: UploadFile = File(..., description="Fetal brain ultrasound file (DICOM or image)"),
-    pixel_size: float = Query(default=0.1, ge=0.01, le=1.0, description="Pixel size in mm/pixel")
+    pixel_size: float = Query(default=0.1, ge=0.01, le=1.0, description="Pixel size in mm/pixel"),
+    view: Optional[str] = Query(default=None, description="Anatomical view of the ultrasound")
 ):
     """
     Estimate gestational age from fetal brain ultrasound.
@@ -19,8 +28,18 @@ async def estimate_gestational_age(
     For DICOM files, pixel spacing is automatically extracted from metadata.
     For image files, you must provide the pixel_size parameter.
     
+    The view parameter is optional but recommended. If provided, it will be
+    validated to ensure it's a brain view suitable for GA estimation.
+    
     Returns estimated gestational age and head circumference percentiles.
     """
+    # Validate view if provided
+    if view and view not in GA_ELIGIBLE_VIEWS:
+        raise HTTPException(
+            status_code=400, 
+            detail=f"View '{view}' is not supported for GA estimation. Supported views: {GA_ELIGIBLE_VIEWS}"
+        )
+    
     try:
         # Read file bytes
         contents = await file.read()
@@ -28,14 +47,19 @@ async def estimate_gestational_age(
         
         # Estimate GA with automatic preprocessing
         ga_results, preprocessing_info = model_service.estimate_ga_from_file(
-            contents, filename, pixel_size=pixel_size
+            contents, filename, pixel_size=pixel_size, view=view or "brain"
         )
         
-        return JSONResponse(content={
+        # Add view info to response
+        result = {
             "success": True,
             **ga_results,
+            "view": view,
             "preprocessing": preprocessing_info
-        })
+        }
+        
+        return JSONResponse(content=result)
     
     except Exception as e:
         raise HTTPException(status_code=500, detail=str(e))
+

backend/app/services/model.py

@@ -14,14 +14,30 @@ MODEL_NAME = "numansaeed/fetalclip-model"
 INPUT_SIZE = 224
 TOP_N_PROBS = 15
 
-# GA Text prompts
-GA_TEXT_PROMPTS = [
-    "Ultrasound image at {weeks} weeks and {day} days gestation focusing on the fetal brain, highlighting anatomical structures with a pixel spacing of {pixel_spacing} mm/pixel.",
-    "Fetal ultrasound image at {weeks} weeks, {day} days of gestation, focusing on the developing brain, with a pixel spacing of {pixel_spacing} mm/pixel, highlighting the structures of the fetal brain.",
-    "Fetal ultrasound image at {weeks} weeks and {day} days gestational age, highlighting the developing brain structures with a pixel spacing of {pixel_spacing} mm/pixel, providing important visual insights for ongoing prenatal assessments.",
-    "Ultrasound image at {weeks} weeks and {day} days gestation, highlighting the fetal brain structures with a pixel spacing of {pixel_spacing} mm/pixel.",
-    "Fetal ultrasound at {weeks} weeks and {day} days, showing a clear view of the developing brain, with an image pixel spacing of {pixel_spacing} mm/pixel."
-]
+# GA Text prompts - view-specific prompts for brain, abdomen, and femur
+GA_TEXT_PROMPTS = {
+    "brain": [
+        "Ultrasound image at {weeks} weeks and {day} days gestation focusing on the fetal brain, highlighting anatomical structures with a pixel spacing of {pixel_spacing} mm/pixel.",
+        "Fetal ultrasound image at {weeks} weeks, {day} days of gestation, focusing on the developing brain, with a pixel spacing of {pixel_spacing} mm/pixel, highlighting the structures of the fetal brain.",
+        "Fetal ultrasound image at {weeks} weeks and {day} days gestational age, highlighting the developing brain structures with a pixel spacing of {pixel_spacing} mm/pixel, providing important visual insights for ongoing prenatal assessments.",
+        "Ultrasound image at {weeks} weeks and {day} days gestation, highlighting the fetal brain structures with a pixel spacing of {pixel_spacing} mm/pixel.",
+        "Fetal ultrasound at {weeks} weeks and {day} days, showing a clear view of the developing brain, with an image pixel spacing of {pixel_spacing} mm/pixel."
+    ],
+    "abdomen": [
+        "Fetal ultrasound at {weeks} weeks and {day} days gestation, focusing on the abdominal area, highlighting structural development with a pixel spacing of {pixel_spacing} mm/pixel.",
+        "Ultrasound image at {weeks} weeks and {day} days gestation, focusing on the fetal abdomen, with pixel spacing of {pixel_spacing} mm/pixel, highlighting the structural development in this stage of gestation.",
+        "Ultrasound image of the fetal abdomen at {weeks} weeks and {day} days gestational age, highlighting anatomical structures with a pixel spacing of {pixel_spacing} mm/pixel.",
+        "Ultrasound image of the fetal abdomen at {weeks} weeks and {day} days gestational age, highlighting the development of abdominal structures, with a pixel spacing of {pixel_spacing} mm/pixel.",
+        "Fetal ultrasound image at {weeks} weeks and {day} days gestational age, focusing on the abdomen with a pixel spacing of {pixel_spacing} mm/pixel."
+    ],
+    "femur": [
+        "Ultrasound image at {weeks} weeks and {day} days gestation, focusing on the developing fetal femur, with a pixel spacing of {pixel_spacing} mm/pixel, highlighting bone length and structure.",
+        "The ultrasound image highlights the fetal femur at {weeks} weeks and {day} days of gestation, with a pixel spacing of {pixel_spacing} mm/pixel, providing a detailed view of the developing bone.",
+        "Ultrasound image at {weeks} weeks and {day} days gestation, focusing on the fetal femur, highlighting skeletal development at a pixel spacing of {pixel_spacing} mm/pixel.",
+        "Fetal ultrasound image at {weeks} weeks and {day} days gestation, highlighting the femur with a pixel spacing of {pixel_spacing} mm/pixel, providing a detailed view of bone development.",
+        "Ultrasound image at {weeks} weeks and {day} days gestation, highlighting the fetal femur with a pixel spacing of {pixel_spacing} mm/pixel."
+    ]
+}
 
 LIST_GA_IN_DAYS = [weeks * 7 + days for weeks in range(14, 39) for days in range(0, 7)]
 
@@ -182,19 +198,55 @@ class FetalCLIPService:
         tmp = sorted(tmp, key=lambda x: x[0])
         return tmp[n // 2][0]
 
-    def _get_hc_from_days(self, t: int, quartile: str = '0.5') -> float:
-        """Calculate head circumference from gestational age."""
-        t = t / 7
-        params = {
-            '0.025': [1.59317517131532e+0, 2.9459800552433e-1, -7.3860372566707e-3, 6.56951770216148e-5, 0e+0],
-            '0.500': [2.09924879247164e+0, 2.53373656106037e-1, -6.05647816678282e-3, 5.14256072059917e-5, 0e+0],
-            '0.975': [2.50074069629423e+0, 2.20067854715719e-1, -4.93623111462443e-3, 3.89066000946519e-5, 0e+0],
+    def _get_biometry_from_ga(self, ga_days: int, biometry_type: str, percentile: str = '0.5') -> float:
+        """
+        Calculate expected fetal biometry from gestational age using WHO coefficients.
+        
+        Formula: measurement = exp(b0 + b1*GA + b2*GA² + b3*GA³ + b4*GA⁴)
+        where GA is in weeks.
+        
+        Args:
+            ga_days: Gestational age in days
+            biometry_type: 'HC', 'AC', or 'FL'
+            percentile: '0.025', '0.5', or '0.975'
+        
+        Returns:
+            Expected measurement in mm
+        """
+        ga_weeks = ga_days / 7
+        
+        # WHO Fetal Growth Coefficients (from coefficientsGlobalV3.csv)
+        WHO_COEFFICIENTS = {
+            # Head Circumference (mm)
+            'HC': {
+                '0.025': [1.59317517131532e+0, 2.9459800552433e-1, -7.3860372566707e-3, 6.56951770216148e-5, 0e+0],
+                '0.5':   [2.09924879247164e+0, 2.53373656106037e-1, -6.05647816678282e-3, 5.14256072059917e-5, 0e+0],
+                '0.975': [2.50074069629423e+0, 2.20067854715719e-1, -4.93623111462443e-3, 3.89066000946519e-5, 0e+0],
+            },
+            # Abdominal Circumference (mm)
+            'AC': {
+                '0.025': [1.19202778944614e+0, 3.14756681991964e-1, -8.01581308902169e-3, 7.51395976546808e-5, 0e+0],
+                '0.5':   [1.58552931028045e+0, 2.89936781915424e-1, -7.32651929135797e-3, 6.9261631643994e-5, 0e+0],
+                '0.975': [2.03674472691951e+0, 2.57138461817474e-1, -6.34918788914223e-3, 6.0053745113196e-5, 0e+0],
+            },
+            # Femur Length (mm) - uses all 5 coefficients
+            'FL': {
+                '0.025': [-7.27187176976836e+0, 1.28298928826162e+0, -5.80601892487905e-2, 1.21314319801879e-3, -9.60171505470123e-6],
+                '0.5':   [-5.54922620776446e+0, 1.09559990166124e+0, -5.01310925949098e-2, 1.0678072569586e-3, -8.63970606288493e-6],
+                '0.975': [-3.64483930811801e+0, 8.57028131514986e-1, -3.84005685481303e-2, 8.12062784461527e-4, -6.55932416998498e-6],
+            },
         }
-        b0, b1, b2, b3, b4 = params[quartile]
-        return np.exp(b0 + b1*t + b2*t**2 + b3*t**3 + b4*t**4)
+        
+        if biometry_type not in WHO_COEFFICIENTS:
+            raise ValueError(f"Unknown biometry type: {biometry_type}")
+        if percentile not in WHO_COEFFICIENTS[biometry_type]:
+            raise ValueError(f"Unknown percentile: {percentile}")
+        
+        b0, b1, b2, b3, b4 = WHO_COEFFICIENTS[biometry_type][percentile]
+        return np.exp(b0 + b1*ga_weeks + b2*ga_weeks**2 + b3*ga_weeks**3 + b4*ga_weeks**4)
 
-    def estimate_gestational_age(self, image: Image.Image, pixel_size: float) -> Dict:
-        """Estimate gestational age from preprocessed fetal brain ultrasound."""
+    def estimate_gestational_age(self, image: Image.Image, pixel_size: float, view: str = "brain") -> Dict:
+        """Estimate gestational age from preprocessed fetal ultrasound."""
         if self.model is None:
             raise RuntimeError("Model not loaded. Call load_model() first.")
         
@@ -209,10 +261,11 @@ class FetalCLIPService:
             image_features = self.model.encode_image(img_tensor)
             image_features /= image_features.norm(dim=-1, keepdim=True)
             
-            # Get text features for all prompts
+            # Get text features for all prompts for the specified view
+            view_prompts = GA_TEXT_PROMPTS.get(view, GA_TEXT_PROMPTS["brain"])
             text_features_list = [
                 self._get_ga_text_features(template, pixel_spacing)
-                for template in GA_TEXT_PROMPTS
+                for template in view_prompts
             ]
             
             text_dot_prods = self._get_unnormalized_dot_products(image_features, text_features_list)
@@ -225,10 +278,33 @@ class FetalCLIPService:
         pred_weeks = pred_day // 7
         pred_days = pred_day % 7
         
-        # Compute HC percentiles
-        q025 = self._get_hc_from_days(pred_day, '0.025')
-        q500 = self._get_hc_from_days(pred_day, '0.500')
-        q975 = self._get_hc_from_days(pred_day, '0.975')
+        # Map view to biometry type
+        VIEW_TO_BIOMETRY = {
+            "brain": "HC",
+            "abdomen": "AC",
+            "femur": "FL"
+        }
+        biometry_type = VIEW_TO_BIOMETRY.get(view, "HC")
+        
+        # Compute view-specific biometry percentiles using WHO formulas
+        q025 = self._get_biometry_from_ga(pred_day, biometry_type, '0.025')
+        q500 = self._get_biometry_from_ga(pred_day, biometry_type, '0.5')
+        q975 = self._get_biometry_from_ga(pred_day, biometry_type, '0.975')
+        
+        # Biometry labels for response
+        BIOMETRY_LABELS = {
+            "HC": "head_circumference",
+            "AC": "abdominal_circumference", 
+            "FL": "femur_length"
+        }
+        biometry_key = BIOMETRY_LABELS.get(biometry_type, "head_circumference")
+        
+        # Biometry units
+        BIOMETRY_UNITS = {
+            "HC": "mm",
+            "AC": "mm",
+            "FL": "mm"
+        }
         
         return {
             "gestational_age": {
@@ -236,14 +312,15 @@ class FetalCLIPService:
                 "days": pred_days,
                 "total_days": pred_day
             },
-            "head_circumference": {
+            "view": view,
+            biometry_key: {
                 "p2_5": round(q025, 2),
                 "p50": round(q500, 2),
                 "p97_5": round(q975, 2)
             }
         }
 
-    def estimate_ga_from_file(self, file_bytes: bytes, filename: str, pixel_size: float) -> Tuple[Dict, Dict]:
+    def estimate_ga_from_file(self, file_bytes: bytes, filename: str, pixel_size: float, view: str = "brain") -> Tuple[Dict, Dict]:
         """
         Estimate GA from raw file bytes with automatic preprocessing.
         
@@ -257,8 +334,8 @@ class FetalCLIPService:
         if preprocessing_info["type"] == "dicom":
             pixel_size = preprocessing_info["metadata"].get("pixel_spacing", pixel_size)
         
-        # Estimate GA
-        ga_results = self.estimate_gestational_age(processed_image, pixel_size)
+        # Estimate GA with the specified view
+        ga_results = self.estimate_gestational_age(processed_image, pixel_size, view)
         
         return ga_results, preprocessing_info
 

backend/app/services/preprocessing.py

@@ -336,11 +336,9 @@ def preprocess_dicom(file_bytes: bytes) -> Tuple[Image.Image, Dict]:
     else:
         median = np.clip(dst * 255, 0, 255).astype(np.uint8)
     
-    # Pad to square
+    # Pad to square (model will resize to 224×224)
     img = pad_to_square(median)
-    
-    # Resize
-    img = cv2.resize(img, TARGET_SIZE, interpolation=INTERPOLATION)
+    padded_size = max(img.shape[:2])
     
     # Extract metadata
     try:
@@ -360,8 +358,9 @@ def preprocess_dicom(file_bytes: bytes) -> Tuple[Image.Image, Dict]:
         'original_size': (rows, columns),
         'original_pixel_spacing': orig_pixel_spacing,
         'fan_size': (fan.shape[0], fan.shape[1]),
-        'pixel_spacing': orig_pixel_spacing[0] if orig_pixel_spacing else 1.0,
-        'processed_size': TARGET_SIZE,
+        'padded_size': padded_size,
+        'pixel_spacing': orig_pixel_spacing[0],  # Original spacing, model.py adjusts for resize
+        'processed_size': (padded_size, padded_size),
     }
     
     # Convert to PIL
@@ -381,7 +380,6 @@ def preprocess_dicom(file_bytes: bytes) -> Tuple[Image.Image, Dict]:
         "inpainting",
         "denoising" if SKIMAGE_AVAILABLE else "normalization",
         "square_padding",
-        "resize_512"
     ]
     
     return img_pil, {

frontend/src/App.tsx

@@ -5,6 +5,7 @@ import { Tabs } from './components/Tabs';
 import { ClassificationPage } from './pages/ClassificationPage';
 import { GestationalAgePage } from './pages/GestationalAgePage';
 import { HelpPage } from './pages/HelpPage';
+import { ImageProvider } from './lib/ImageContext';
 import { checkHealth, getFeedbackStats } from './lib/api';
 
 const tabs = [
@@ -52,46 +53,49 @@ function App() {
   }, [loadFeedbackStats]);
 
   return (
-    <div className="h-screen flex flex-col bg-dark-bg overflow-hidden">
-      {/* Header - fixed height */}
-      <Header isConnected={isConnected} feedbackStats={feedbackStats} />
+    <ImageProvider>
+      <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} />
+        {/* 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>
+        {/* 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 */}
-      <footer className="flex-shrink-0 px-6 py-3 border-t border-dark-border bg-white">
-        <div className="flex items-center justify-between text-xs">
-          <span className="text-text-secondary">FetalCLIP • Foundation Model for Fetal Ultrasound Analysis</span>
-          <div className="flex items-center gap-4">
-            <a
-              href="https://huggingface.co/numansaeed/fetalclip-model"
-              target="_blank"
-              rel="noopener noreferrer"
-              className="text-accent-blue hover:text-accent-blue-hover transition-colors font-medium"
-            >
-              🤗 Model Hub
-            </a>
-            <a
-              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
-            </a>
+        {/* Footer - fixed height, always visible */}
+        <footer className="flex-shrink-0 px-6 py-3 border-t border-dark-border bg-white">
+          <div className="flex items-center justify-between text-xs">
+            <span className="text-text-secondary">FetalCLIP • Foundation Model for Fetal Ultrasound Analysis</span>
+            <div className="flex items-center gap-4">
+              <a
+                href="https://huggingface.co/numansaeed/fetalclip-model"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="text-accent-blue hover:text-accent-blue-hover transition-colors font-medium"
+              >
+                🤗 Model Hub
+              </a>
+              <a
+                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
+              </a>
+            </div>
           </div>
-        </div>
-      </footer>
-    </div>
+        </footer>
+      </div>
+    </ImageProvider>
   );
 }
 
 export default App;
+

frontend/src/components/FeedbackSection.tsx

@@ -12,6 +12,7 @@ interface FeedbackSectionProps {
   imageHash?: string;
   preprocessedImageBase64?: string;
   onFeedbackSubmitted?: () => void;
+  onViewCorrected?: (correctedLabel: string) => void;
   disabled?: boolean;
 }
 
@@ -25,6 +26,7 @@ export function FeedbackSection({
   imageHash,
   preprocessedImageBase64,
   onFeedbackSubmitted,
+  onViewCorrected,
   disabled = false,
 }: FeedbackSectionProps) {
   const [feedbackState, setFeedbackState] = useState<'none' | 'correct' | 'incorrect' | 'not_sure'>('none');
@@ -85,6 +87,7 @@ export function FeedbackSection({
   const handleSubmitCorrection = async () => {
     if (!correctLabel) return;
     await submitFeedbackData(false, correctLabel, notes);
+    onViewCorrected?.(correctLabel);
   };
 
   const handleSubmitNotSure = async () => {
@@ -207,8 +210,8 @@ export function FeedbackSection({
               onClick={handleSubmitCorrection}
               disabled={!correctLabel || isSubmitting}
               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'
+                ? 'bg-gray-200 text-gray-400 cursor-not-allowed'
+                : 'bg-green-600 hover:bg-green-700 text-white'
                 }`}
             >
               {isSubmitting ? (

frontend/src/lib/ImageContext.tsx

@@ -0,0 +1,133 @@
+import { createContext, useContext, useState, ReactNode, useCallback } from 'react';
+import { ClassificationResult } from './api';
+
+export interface ImageState {
+    // Current image
+    file: File | null;
+    preview: string | null;
+    processedImage: string | null;
+
+    // Classification results
+    classificationResults: ClassificationResult[] | null;
+
+    // View (corrected takes priority)
+    predictedView: string | null;
+    correctedView: string | null;
+
+    // Session ID for feedback
+    sessionId: string;
+}
+
+interface ImageContextType extends ImageState {
+    // Actions
+    setFile: (file: File | null, preview: string | null) => void;
+    setClassificationResults: (results: ClassificationResult[] | null, processedImage?: string | null) => void;
+    setCorrectedView: (view: string | null) => void;
+    resetState: () => void;
+
+    // Computed
+    currentView: string | null; // Returns correctedView if set, otherwise topPrediction
+    isViewGAEligible: boolean;
+}
+
+// GA-eligible views (match keys from prompt_fetal_view.json)
+export const GA_ELIGIBLE_VIEWS = [
+    "brain",    // Head Circumference
+    "abdomen",  // Abdominal Circumference
+    "femur",    // Femur Length
+];
+
+// Display names for GA biometry types
+export const GA_BIOMETRY_LABELS: Record<string, string> = {
+    "brain": "Head Circumference (HC)",
+    "abdomen": "Abdominal Circumference (AC)",
+    "femur": "Femur Length (FL)",
+};
+
+const generateSessionId = () => {
+    return Math.random().toString(36).substring(2, 10);
+};
+
+const initialState: ImageState = {
+    file: null,
+    preview: null,
+    processedImage: null,
+    classificationResults: null,
+    predictedView: null,
+    correctedView: null,
+    sessionId: generateSessionId(),
+};
+
+const ImageContext = createContext<ImageContextType | null>(null);
+
+export function ImageProvider({ children }: { children: ReactNode }) {
+    const [state, setState] = useState<ImageState>(initialState);
+
+    const setFile = useCallback((file: File | null, preview: string | null) => {
+        setState(prev => ({
+            ...prev,
+            file,
+            preview,
+            processedImage: null,
+            classificationResults: null,
+            predictedView: null,
+            correctedView: null,
+        }));
+    }, []);
+
+    const setClassificationResults = useCallback((
+        results: ClassificationResult[] | null,
+        processedImage: string | null = null
+    ) => {
+        setState(prev => ({
+            ...prev,
+            classificationResults: results,
+            processedImage: processedImage || prev.processedImage,
+            predictedView: results && results.length > 0 ? results[0].label : null,
+        }));
+    }, []);
+
+    const setCorrectedView = useCallback((view: string | null) => {
+        setState(prev => ({
+            ...prev,
+            correctedView: view,
+        }));
+    }, []);
+
+    const resetState = useCallback(() => {
+        setState({
+            ...initialState,
+            sessionId: generateSessionId(),
+        });
+    }, []);
+
+    // Computed: current view (corrected takes priority)
+    const currentView = state.correctedView || state.predictedView;
+
+    // Computed: is view eligible for GA estimation
+    const isViewGAEligible = currentView ? GA_ELIGIBLE_VIEWS.includes(currentView) : false;
+
+    return (
+        <ImageContext.Provider
+            value={{
+                ...state,
+                setFile,
+                setClassificationResults,
+                setCorrectedView,
+                resetState,
+                currentView,
+                isViewGAEligible,
+            }}
+        >
+            {children}
+        </ImageContext.Provider>
+    );
+}
+
+export function useImageContext() {
+    const context = useContext(ImageContext);
+    if (!context) {
+        throw new Error('useImageContext must be used within an ImageProvider');
+    }
+    return context;
+}

frontend/src/lib/api.ts

@@ -58,11 +58,16 @@ export async function classifyImage(file: File, topK: number = 5): Promise<Class
   return response.json();
 }
 
-export async function estimateGestationalAge(file: File, pixelSize: number): Promise<GestationalAgeResponse> {
+export async function estimateGestationalAge(file: File, pixelSize: number, view?: string): Promise<GestationalAgeResponse> {
   const formData = new FormData();
   formData.append('file', file);
 
-  const response = await fetch(`${API_BASE}/api/v1/gestational-age/?pixel_size=${pixelSize}`, {
+  let url = `${API_BASE}/api/v1/gestational-age/?pixel_size=${pixelSize}`;
+  if (view) {
+    url += `&view=${encodeURIComponent(view)}`;
+  }
+
+  const response = await fetch(url, {
     method: 'POST',
     body: formData,
   });
@@ -286,19 +291,19 @@ export async function deleteFeedback(feedbackId: string): Promise<void> {
   }
 }
 
-// List of all fetal view labels
+// List of all fetal view labels (must match keys in prompt_fetal_view.json)
 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)"
+  "abdomen",
+  "brain",
+  "femur",
+  "heart",
+  "kidney",
+  "lips_nose",
+  "profile_patient",
+  "spine",
+  "cervix",
+  "cord",
+  "diaphragm",
+  "feet",
+  "orbit"
 ];

frontend/src/pages/ClassificationPage.tsx

@@ -1,13 +1,12 @@
 import { useState, useCallback, useEffect } from 'react';
-import { Search, ChevronLeft, ChevronRight, FolderOpen } from 'lucide-react';
+import { Search, ChevronLeft, ChevronRight, FolderOpen, Upload, AlertTriangle } from 'lucide-react';
 import { Panel } from '../components/Panel';
 import { FileUpload } from '../components/FileUpload';
-import { Button } from '../components/Button';
-import { Slider } from '../components/Slider';
 import { ResultsCard } from '../components/ResultsCard';
 import { PreprocessingBadge } from '../components/PreprocessingBadge';
 import { FeedbackSection } from '../components/FeedbackSection';
 import { SessionHistory } from '../components/SessionHistory';
+import { useImageContext } from '../lib/ImageContext';
 import {
   classifyImage,
   getFilePreview,
@@ -24,6 +23,8 @@ interface ClassificationPageProps {
 }
 
 export function ClassificationPage({ onFeedbackUpdate }: ClassificationPageProps) {
+  const imageContext = useImageContext();
+
   // Session state
   const [sessionId, setSessionId] = useState<string>('');
   const [feedbackRefresh, setFeedbackRefresh] = useState(0);
@@ -33,7 +34,7 @@ export function ClassificationPage({ onFeedbackUpdate }: ClassificationPageProps
   const [preview, setPreview] = useState<string | null>(null);
   const [isLoadingPreview, setIsLoadingPreview] = useState(false);
 
-  // Multiple files state (folder)
+  // Multiple files state
   const [files, setFiles] = useState<File[]>([]);
   const [currentIndex, setCurrentIndex] = useState(0);
 
@@ -48,7 +49,7 @@ export function ClassificationPage({ onFeedbackUpdate }: ClassificationPageProps
   // Image view tab
   const [imageTab, setImageTab] = useState<'input' | 'processed'>('input');
 
-  // Initialize session on mount
+  // Initialize session
   useEffect(() => {
     const initSession = async () => {
       try {
@@ -62,13 +63,11 @@ export function ClassificationPage({ onFeedbackUpdate }: ClassificationPageProps
   }, []);
 
   const loadPreview = useCallback(async (selectedFile: File) => {
-    // For regular images, create local preview
     if (!isDicomFile(selectedFile.name)) {
       setPreview(URL.createObjectURL(selectedFile));
       return;
     }
 
-    // For DICOM, fetch preview from backend
     setIsLoadingPreview(true);
     try {
       const response = await getFilePreview(selectedFile);
@@ -99,10 +98,8 @@ export function ClassificationPage({ onFeedbackUpdate }: ClassificationPageProps
     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/') ||
-      isDicomFile(f.name)
+      f.type.startsWith('image/') || isDicomFile(f.name)
     ).sort((a, b) => a.name.localeCompare(b.name));
 
     if (validFiles.length > 0) {
@@ -150,13 +147,18 @@ export function ClassificationPage({ onFeedbackUpdate }: ClassificationPageProps
       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}`);
+      const processedImageData = response.preprocessing.processed_image_base64
+        ? `data:image/png;base64,${response.preprocessing.processed_image_base64}`
+        : null;
+
+      if (processedImageData) {
+        setProcessedImage(processedImageData);
       }
       setImageTab('processed');
 
-      // Record image analyzed for session stats
+      imageContext.setFile(file, preview);
+      imageContext.setClassificationResults(response.predictions, processedImageData);
+
       if (sessionId) {
         await recordImageAnalyzed(sessionId);
       }
@@ -175,20 +177,22 @@ export function ClassificationPage({ onFeedbackUpdate }: ClassificationPageProps
   };
 
   const fileType = file ? getFileType(file.name) : null;
+  const displayImage = imageTab === 'processed' && processedImage ? processedImage : preview;
 
   return (
     <div className="flex flex-1 min-h-0 overflow-hidden">
-      {/* Left Panel - Image */}
-      <div className="w-1/2 border-r border-dark-border bg-white flex flex-col min-h-0">
-        <Panel title="Image" className="flex-1 flex flex-col min-h-0">
-          <div className="flex flex-col h-full gap-3 overflow-hidden">
-            {/* Image Tabs */}
-            <div className="flex-shrink-0 flex gap-1 bg-dark-input p-1 rounded-xl">
+      {/* Left Panel - Image (60%) */}
+      <div className="w-3/5 border-r border-dark-border bg-slate-900 flex flex-col min-h-0">
+        {/* Compact Header */}
+        <div className="flex-shrink-0 px-4 py-2 bg-slate-800 border-b border-slate-700 flex items-center justify-between">
+          <div className="flex items-center gap-3">
+            {/* Image Tab Toggle */}
+            <div className="flex gap-1 bg-slate-700 p-0.5 rounded-lg">
               <button
                 onClick={() => setImageTab('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'
+                className={`px-3 py-1 text-xs font-medium rounded-md transition-all ${imageTab === 'input'
+                  ? 'bg-nvidia-green text-white'
+                  : 'text-slate-400 hover:text-white'
                   }`}
               >
                 Input
@@ -196,144 +200,160 @@ export function ClassificationPage({ onFeedbackUpdate }: ClassificationPageProps
               <button
                 onClick={() => setImageTab('processed')}
                 disabled={!processedImage}
-                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'
+                className={`px-3 py-1 text-xs font-medium rounded-md transition-all ${imageTab === 'processed'
+                  ? 'bg-nvidia-green text-white'
+                  : 'text-slate-400 hover:text-white disabled:opacity-40 disabled:cursor-not-allowed'
                   }`}
               >
                 Processed
               </button>
             </div>
 
-            {/* Image Display */}
-            <div className="flex-1 min-h-0 overflow-hidden">
-              {imageTab === 'input' ? (
-                <FileUpload
-                  onUpload={handleSingleUpload}
-                  preview={preview}
-                  currentFile={file}
-                  isLoading={isLoadingPreview}
-                />
-              ) : (
-                <div className="h-full w-full bg-slate-900 border border-dark-border rounded-xl overflow-hidden flex items-center justify-center">
-                  {processedImage ? (
-                    <img
-                      src={processedImage}
-                      alt="Processed"
-                      className="max-w-full max-h-full w-full h-full object-contain"
-                    />
-                  ) : (
-                    <p className="text-white/60 text-sm">Run classification to see processed image</p>
-                  )}
-                </div>
-              )}
-            </div>
+            {/* File info */}
+            {file && (
+              <span className="text-xs text-slate-400 truncate max-w-[150px]">
+                {file.name}
+              </span>
+            )}
 
-            {/* Controls Section */}
-            <div className="flex-shrink-0 space-y-3">
-              {/* Folder Upload */}
-              <label className="flex items-center gap-2 px-4 py-2.5 bg-dark-input border border-dark-border rounded-xl cursor-pointer hover:border-nvidia-green/50 hover:bg-nvidia-green/5 transition-all">
-                <FolderOpen className="w-4 h-4 text-text-secondary" />
-                <span className="text-sm text-text-secondary font-medium">Load folder...</span>
-                <input
-                  type="file"
-                  webkitdirectory=""
-                  directory=""
-                  multiple
-                  className="hidden"
-                  onChange={handleFolderUpload}
-                />
-              </label>
-
-              {/* Navigation */}
-              {files.length > 1 && (
-                <div className="flex items-center justify-between bg-dark-input rounded-xl px-4 py-2.5 border border-dark-border">
-                  <Button
-                    variant="secondary"
-                    onClick={() => navigateImage('prev')}
-                    disabled={currentIndex === 0}
-                    className="!px-2 !py-1 !shadow-none"
-                  >
-                    <ChevronLeft className="w-4 h-4" />
-                  </Button>
-                  <span className="text-sm text-text-secondary font-medium">
-                    {currentIndex + 1} / {files.length}
-                  </span>
-                  <Button
-                    variant="secondary"
-                    onClick={() => navigateImage('next')}
-                    disabled={currentIndex === files.length - 1}
-                    className="!px-2 !py-1 !shadow-none"
-                  >
-                    <ChevronRight className="w-4 h-4" />
-                  </Button>
-                </div>
-              )}
+            {/* DICOM badge */}
+            {fileType === 'dicom' && (
+              <span className="px-2 py-0.5 bg-nvidia-green/20 text-nvidia-green text-xs rounded-full font-medium">
+                DICOM
+              </span>
+            )}
+          </div>
 
-              {/* File name */}
-              {file && (
-                <div className="text-xs text-text-muted truncate px-1 font-medium">
-                  {file.name}
-                </div>
-              )}
+          {/* Folder navigation */}
+          {files.length > 1 && (
+            <div className="flex items-center gap-2">
+              <button
+                onClick={() => navigateImage('prev')}
+                disabled={currentIndex === 0}
+                className="p-1 text-slate-400 hover:text-white disabled:opacity-40"
+              >
+                <ChevronLeft className="w-4 h-4" />
+              </button>
+              <span className="text-xs text-slate-400">
+                {currentIndex + 1}/{files.length}
+              </span>
+              <button
+                onClick={() => navigateImage('next')}
+                disabled={currentIndex === files.length - 1}
+                className="p-1 text-slate-400 hover:text-white disabled:opacity-40"
+              >
+                <ChevronRight className="w-4 h-4" />
+              </button>
+            </div>
+          )}
+        </div>
+
+        {/* Image Display - fills remaining space */}
+        <div className="flex-1 min-h-0 p-4">
+          {displayImage ? (
+            <img
+              src={displayImage}
+              alt="Ultrasound"
+              className="w-full h-full object-contain rounded-lg"
+            />
+          ) : (
+            <FileUpload
+              onUpload={handleSingleUpload}
+              preview={null}
+              currentFile={null}
+              isLoading={isLoadingPreview}
+            />
+          )}
+        </div>
+
+        {/* Compact Control Bar */}
+        <div className="flex-shrink-0 px-4 py-3 bg-slate-800 border-t border-slate-700">
+          <div className="flex items-center gap-3">
+            {/* Upload/Folder buttons */}
+            <label className="flex items-center gap-1.5 px-3 py-1.5 bg-slate-700 hover:bg-slate-600 rounded-lg cursor-pointer transition-colors">
+              <Upload className="w-3.5 h-3.5 text-slate-300" />
+              <span className="text-xs text-slate-300 font-medium">Upload</span>
+              <input
+                type="file"
+                accept="image/*,.dcm,.dicom"
+                className="hidden"
+                onChange={(e) => e.target.files?.[0] && handleSingleUpload(e.target.files[0])}
+              />
+            </label>
+
+            <label className="flex items-center gap-1.5 px-3 py-1.5 bg-slate-700 hover:bg-slate-600 rounded-lg cursor-pointer transition-colors">
+              <FolderOpen className="w-3.5 h-3.5 text-slate-300" />
+              <span className="text-xs text-slate-300 font-medium">Folder</span>
+              <input
+                type="file"
+                webkitdirectory=""
+                directory=""
+                multiple
+                className="hidden"
+                onChange={handleFolderUpload}
+              />
+            </label>
 
-              {/* Preprocessing Badge */}
-              {(fileType || preprocessingInfo) && (
-                <PreprocessingBadge
-                  info={preprocessingInfo}
-                  fileType={fileType}
-                  compact
-                />
-              )}
+            <div className="w-px h-6 bg-slate-600" />
 
-              {/* Settings */}
-              <Slider
-                label="Top Predictions"
+            {/* Top-K selector */}
+            <div className="flex items-center gap-1.5">
+              <span className="text-xs text-slate-400">Top</span>
+              <select
                 value={topK}
-                onChange={setTopK}
-                min={1}
-                max={13}
-                info="Number of predictions to display"
-              />
-
-              {/* Classify Button */}
-              <Button
-                onClick={handleClassify}
-                disabled={!file}
-                isLoading={isLoading}
-                icon={<Search className="w-4 h-4" />}
+                onChange={(e) => setTopK(parseInt(e.target.value))}
+                className="px-2 py-1 bg-slate-700 border border-slate-600 rounded text-xs text-white"
               >
-                Classify View
-              </Button>
+                {[3, 5, 10, 13].map(k => (
+                  <option key={k} value={k}>{k}</option>
+                ))}
+              </select>
+            </div>
 
-              {error && (
-                <div className="p-3 bg-red-50 border border-red-200 rounded-xl">
-                  <p className="text-red-600 text-xs font-medium">{error}</p>
-                </div>
+            <div className="flex-1" />
+
+            {/* Classify Button */}
+            <button
+              onClick={handleClassify}
+              disabled={!file || isLoading}
+              className={`flex items-center gap-2 px-4 py-1.5 rounded-lg text-sm font-semibold transition-all ${!file
+                ? 'bg-slate-600 text-slate-400 cursor-not-allowed'
+                : 'bg-nvidia-green text-white hover:bg-nvidia-green-hover shadow-lg'
+                }`}
+            >
+              {isLoading ? (
+                <div className="w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin" />
+              ) : (
+                <Search className="w-4 h-4" />
               )}
-            </div>
+              Classify
+            </button>
           </div>
-        </Panel>
+
+          {/* Error row */}
+          {error && (
+            <div className="mt-2 p-2 rounded-lg flex items-center gap-2 text-xs bg-red-500/10 text-red-400">
+              <AlertTriangle className="w-3.5 h-3.5 flex-shrink-0" />
+              {error}
+            </div>
+          )}
+        </div>
       </div>
 
-      {/* Right Panel - Results */}
-      <div className="w-1/2 bg-dark-bg flex flex-col min-h-0">
-        <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'
-                  : 'bg-amber-500/10 text-amber-600'
-                }`}>
-                {preprocessingInfo.pipeline === 'full' ? 'Full Pipeline' : 'Basic Pipeline'}
-              </span>
-            )
-          }
-          className="flex-1 flex flex-col min-h-0"
-        >
-          <div className="flex-1 overflow-y-auto space-y-4 pb-6">
-            <ResultsCard results={results} isLoading={isLoading} />
+      {/* Right Panel - Results (40%) */}
+      <div className="w-2/5 bg-white flex flex-col min-h-0">
+        <Panel title="Results" className="flex-1 flex flex-col min-h-0">
+          <div className="flex-1 overflow-y-auto space-y-4">
+            {/* Preprocessing Badge */}
+            {(fileType || preprocessingInfo) && (
+              <PreprocessingBadge info={preprocessingInfo} fileType={fileType} />
+            )}
+
+            {/* Results Card */}
+            <ResultsCard
+              results={results}
+              isLoading={isLoading}
+            />
 
             {/* Feedback Section */}
             {results && results.length > 0 && file && (
@@ -345,6 +365,7 @@ export function ClassificationPage({ onFeedbackUpdate }: ClassificationPageProps
                 topPrediction={results[0]}
                 preprocessedImageBase64={processedImage ? processedImage.split(',')[1] : undefined}
                 onFeedbackSubmitted={handleFeedbackSubmitted}
+                onViewCorrected={(correctedLabel) => imageContext.setCorrectedView(correctedLabel)}
               />
             )}
 

frontend/src/pages/GestationalAgePage.tsx

@@ -1,23 +1,37 @@
-import { useState, useCallback } from 'react';
-import { BarChart3, ChevronLeft, ChevronRight, FolderOpen } from 'lucide-react';
+import { useState, useCallback, useEffect } from 'react';
+import { BarChart3, ChevronLeft, ChevronRight, FolderOpen, AlertTriangle, CheckCircle, Upload } from 'lucide-react';
 import { Panel } from '../components/Panel';
 import { FileUpload } from '../components/FileUpload';
-import { Button } from '../components/Button';
-import { NumberInput } from '../components/NumberInput';
 import { GAResultsCard } from '../components/GAResultsCard';
 import { PreprocessingBadge } from '../components/PreprocessingBadge';
-import { estimateGestationalAge, getFilePreview, getFileType, isDicomFile, type GestationalAgeResponse, type PreprocessingInfo } from '../lib/api';
+import { useImageContext, GA_ELIGIBLE_VIEWS, GA_BIOMETRY_LABELS } from '../lib/ImageContext';
+import {
+  estimateGestationalAge,
+  getFilePreview,
+  getFileType,
+  isDicomFile,
+  FETAL_VIEW_LABELS,
+  type GestationalAgeResponse,
+  type PreprocessingInfo
+} from '../lib/api';
 
 export function GestationalAgePage() {
-  // File state
+  // Shared context
+  const imageContext = useImageContext();
+
+  // File state (local for this tab's independent uploads)
   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);
-  
+
+  // View selection state
+  const [selectedView, setSelectedView] = useState<string>('');
+  const [viewSource, setViewSource] = useState<'classification' | 'corrected' | 'manual' | null>(null);
+
   // Settings & results
   const [pixelSize, setPixelSize] = useState(0.1);
   const [results, setResults] = useState<GestationalAgeResponse | null>(null);
@@ -25,18 +39,40 @@ export function GestationalAgePage() {
   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');
 
+  // Sync with shared context when it has data from Classification tab
+  useEffect(() => {
+    if (imageContext.file && imageContext.classificationResults) {
+      setFile(imageContext.file);
+      setPreview(imageContext.preview);
+      setProcessedImage(imageContext.processedImage);
+      setFiles([]);
+      setCurrentIndex(0);
+      setResults(null);
+      setPreprocessingInfo(null);
+      setError(null);
+
+      if (imageContext.correctedView) {
+        setSelectedView(imageContext.correctedView);
+        setViewSource('corrected');
+      } else if (imageContext.predictedView) {
+        setSelectedView(imageContext.predictedView);
+        setViewSource('classification');
+      }
+    }
+  }, [imageContext.file, imageContext.classificationResults, imageContext.correctedView, imageContext.predictedView, imageContext.preview, imageContext.processedImage]);
+
+  const isViewEligible = selectedView ? GA_ELIGIBLE_VIEWS.includes(selectedView) : false;
+
   const loadPreview = useCallback(async (selectedFile: File) => {
-    // For regular images, create local preview
     if (!isDicomFile(selectedFile.name)) {
       setPreview(URL.createObjectURL(selectedFile));
       return;
     }
-    
-    // For DICOM, fetch preview from backend
+
     setIsLoadingPreview(true);
     try {
       const response = await getFilePreview(selectedFile);
@@ -60,18 +96,20 @@ export function GestationalAgePage() {
     setProcessedImage(null);
     setError(null);
     setImageTab('input');
+    setSelectedView('');
+    setViewSource(null);
     loadPreview(uploadedFile);
   }, [loadPreview]);
 
   const handleFolderUpload = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
     const fileList = e.target.files;
     if (!fileList) return;
-    
-    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);
@@ -81,20 +119,22 @@ export function GestationalAgePage() {
       setProcessedImage(null);
       setError(null);
       setImageTab('input');
+      setSelectedView('');
+      setViewSource(null);
       loadPreview(validFiles[0]);
     }
   }, [loadPreview]);
 
   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]);
@@ -102,22 +142,28 @@ export function GestationalAgePage() {
       setPreprocessingInfo(null);
       setProcessedImage(null);
       setImageTab('input');
+      setSelectedView('');
+      setViewSource(null);
       loadPreview(files[newIndex]);
     }
   }, [files, currentIndex, loadPreview]);
 
+  const handleViewChange = (view: string) => {
+    setSelectedView(view);
+    setViewSource('manual');
+  };
+
   const handleEstimate = async () => {
-    if (!file) return;
+    if (!file || !selectedView || !isViewEligible) return;
 
     setIsLoading(true);
     setError(null);
 
     try {
-      const response = await estimateGestationalAge(file, pixelSize);
+      const response = await estimateGestationalAge(file, pixelSize, selectedView);
       setResults(response);
       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}`);
       }
@@ -133,180 +179,251 @@ export function GestationalAgePage() {
 
   const fileType = file ? getFileType(file.name) : null;
 
+  const getButtonTooltip = () => {
+    if (!file) return 'Upload an image first';
+    if (!selectedView) return 'Select a view type';
+    if (!isViewEligible) return 'Only brain, abdomen, femur supported';
+    return '';
+  };
+
+  const isButtonDisabled = !file || !selectedView || !isViewEligible;
+  const displayImage = imageTab === 'processed' && processedImage ? processedImage : preview;
+
   return (
     <div className="flex flex-1 min-h-0 overflow-hidden">
-      {/* Left Panel - Image */}
-      <div className="w-1/2 border-r border-dark-border bg-white flex flex-col min-h-0">
-        <Panel title="Image" className="flex-1 flex flex-col min-h-0">
-          <div className="flex flex-col h-full gap-3 overflow-hidden">
-            {/* Image Tabs */}
-            <div className="flex-shrink-0 flex gap-1 bg-dark-input p-1 rounded-xl">
+      {/* Left Panel - Image (60%) */}
+      <div className="w-3/5 border-r border-dark-border bg-slate-900 flex flex-col min-h-0">
+        {/* Compact Header */}
+        <div className="flex-shrink-0 px-4 py-2 bg-slate-800 border-b border-slate-700 flex items-center justify-between">
+          <div className="flex items-center gap-3">
+            {/* Image Tab Toggle */}
+            <div className="flex gap-1 bg-slate-700 p-0.5 rounded-lg">
               <button
                 onClick={() => setImageTab('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'
-                }`}
+                className={`px-3 py-1 text-xs font-medium rounded-md transition-all ${imageTab === 'input'
+                  ? 'bg-nvidia-green text-white'
+                  : 'text-slate-400 hover:text-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'
-                    ? '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'
-                }`}
+                className={`px-3 py-1 text-xs font-medium rounded-md transition-all ${imageTab === 'processed'
+                  ? 'bg-nvidia-green text-white'
+                  : 'text-slate-400 hover:text-white disabled:opacity-40 disabled:cursor-not-allowed'
+                  }`}
               >
                 Processed
               </button>
             </div>
 
-            {/* Image Display */}
-            <div className="flex-1 min-h-0 overflow-hidden">
-              {imageTab === 'input' ? (
-                <FileUpload
-                  onUpload={handleSingleUpload}
-                  preview={preview}
-                  currentFile={file}
-                  isLoading={isLoadingPreview}
-                />
-              ) : (
-                <div className="h-full w-full bg-slate-900 border border-dark-border rounded-xl overflow-hidden flex items-center justify-center">
-                  {processedImage ? (
-                    <img
-                      src={processedImage}
-                      alt="Processed"
-                      className="max-w-full max-h-full w-full h-full object-contain"
-                    />
-                  ) : (
-                    <p className="text-white/60 text-sm">Run estimation to see processed image</p>
-                  )}
-                </div>
-              )}
+            {/* File info */}
+            {file && (
+              <span className="text-xs text-slate-400 truncate max-w-[150px]">
+                {file.name}
+              </span>
+            )}
+
+            {/* DICOM badge */}
+            {fileType === 'dicom' && (
+              <span className="px-2 py-0.5 bg-nvidia-green/20 text-nvidia-green text-xs rounded-full font-medium">
+                DICOM
+              </span>
+            )}
+          </div>
+
+          {/* Folder navigation */}
+          {files.length > 1 && (
+            <div className="flex items-center gap-2">
+              <button
+                onClick={() => navigateImage('prev')}
+                disabled={currentIndex === 0}
+                className="p-1 text-slate-400 hover:text-white disabled:opacity-40"
+              >
+                <ChevronLeft className="w-4 h-4" />
+              </button>
+              <span className="text-xs text-slate-400">
+                {currentIndex + 1}/{files.length}
+              </span>
+              <button
+                onClick={() => navigateImage('next')}
+                disabled={currentIndex === files.length - 1}
+                className="p-1 text-slate-400 hover:text-white disabled:opacity-40"
+              >
+                <ChevronRight className="w-4 h-4" />
+              </button>
             </div>
+          )}
+        </div>
 
-            {/* Controls Section */}
-            <div className="flex-shrink-0 space-y-3">
-              {/* Folder Upload */}
-              <label className="flex items-center gap-2 px-4 py-2.5 bg-dark-input border border-dark-border rounded-xl cursor-pointer hover:border-nvidia-green/50 hover:bg-nvidia-green/5 transition-all">
-                <FolderOpen className="w-4 h-4 text-text-secondary" />
-                <span className="text-sm text-text-secondary font-medium">Load folder...</span>
-                <input
-                  type="file"
-                  webkitdirectory=""
-                  directory=""
-                  multiple
-                  className="hidden"
-                  onChange={handleFolderUpload}
-                />
-              </label>
-
-              {/* Navigation */}
-              {files.length > 1 && (
-                <div className="flex items-center justify-between bg-dark-input rounded-xl px-4 py-2.5 border border-dark-border">
-                  <Button
-                    variant="secondary"
-                    onClick={() => navigateImage('prev')}
-                    disabled={currentIndex === 0}
-                    className="!px-2 !py-1 !shadow-none"
-                  >
-                    <ChevronLeft className="w-4 h-4" />
-                  </Button>
-                  <span className="text-sm text-text-secondary font-medium">
-                    {currentIndex + 1} / {files.length}
-                  </span>
-                  <Button
-                    variant="secondary"
-                    onClick={() => navigateImage('next')}
-                    disabled={currentIndex === files.length - 1}
-                    className="!px-2 !py-1 !shadow-none"
-                  >
-                    <ChevronRight className="w-4 h-4" />
-                  </Button>
-                </div>
-              )}
+        {/* Image Display - fills remaining space */}
+        <div className="flex-1 min-h-0 p-4">
+          {displayImage ? (
+            <img
+              src={displayImage}
+              alt="Ultrasound"
+              className="w-full h-full object-contain rounded-lg"
+            />
+          ) : (
+            <FileUpload
+              onUpload={handleSingleUpload}
+              preview={null}
+              currentFile={null}
+              isLoading={isLoadingPreview}
+            />
+          )}
+        </div>
 
-              {/* File name */}
-              {file && (
-                <div className="text-xs text-text-muted truncate px-1 font-medium">
-                  {file.name}
-                </div>
-              )}
+        {/* Compact Control Bar */}
+        <div className="flex-shrink-0 px-4 py-3 bg-slate-800 border-t border-slate-700">
+          <div className="flex items-center gap-3">
+            {/* Upload/Folder buttons */}
+            <label className="flex items-center gap-1.5 px-3 py-1.5 bg-slate-700 hover:bg-slate-600 rounded-lg cursor-pointer transition-colors">
+              <Upload className="w-3.5 h-3.5 text-slate-300" />
+              <span className="text-xs text-slate-300 font-medium">Upload</span>
+              <input
+                type="file"
+                accept="image/*,.dcm,.dicom"
+                className="hidden"
+                onChange={(e) => e.target.files?.[0] && handleSingleUpload(e.target.files[0])}
+              />
+            </label>
 
-              {/* Preprocessing Badge */}
-              {(fileType || preprocessingInfo) && (
-                <PreprocessingBadge 
-                  info={preprocessingInfo} 
-                  fileType={fileType}
-                  compact 
-                />
+            <label className="flex items-center gap-1.5 px-3 py-1.5 bg-slate-700 hover:bg-slate-600 rounded-lg cursor-pointer transition-colors">
+              <FolderOpen className="w-3.5 h-3.5 text-slate-300" />
+              <span className="text-xs text-slate-300 font-medium">Folder</span>
+              <input
+                type="file"
+                webkitdirectory=""
+                directory=""
+                multiple
+                className="hidden"
+                onChange={handleFolderUpload}
+              />
+            </label>
+
+            <div className="w-px h-6 bg-slate-600" />
+
+            {/* View Selector */}
+            <div className="flex items-center gap-2 flex-1">
+              {viewSource && (
+                <span className={`text-xs px-1.5 py-0.5 rounded ${viewSource === 'corrected' ? 'bg-blue-500/20 text-blue-400' :
+                  viewSource === 'classification' ? 'bg-green-500/20 text-green-400' :
+                    'bg-slate-600 text-slate-400'
+                  }`}>
+                  {viewSource === 'corrected' ? 'Corrected' :
+                    viewSource === 'classification' ? 'Auto' : 'Manual'}
+                </span>
               )}
 
-              {/* Settings - Pixel Size (only for non-DICOM) */}
-              {fileType !== 'dicom' && (
-                <NumberInput
-                  label="Pixel Size"
+              <select
+                value={selectedView}
+                onChange={(e) => handleViewChange(e.target.value)}
+                className="flex-1 px-2 py-1.5 bg-slate-700 border border-slate-600 rounded-lg text-xs text-white focus:outline-none focus:ring-1 focus:ring-nvidia-green"
+              >
+                <option value="">Select view...</option>
+                <optgroup label="GA-Eligible">
+                  {GA_ELIGIBLE_VIEWS.map((view) => (
+                    <option key={view} value={view}>
+                      {view} ({GA_BIOMETRY_LABELS[view]})
+                    </option>
+                  ))}
+                </optgroup>
+                <optgroup label="Other">
+                  {FETAL_VIEW_LABELS.filter(v => !GA_ELIGIBLE_VIEWS.includes(v)).map((view) => (
+                    <option key={view} value={view}>{view}</option>
+                  ))}
+                </optgroup>
+              </select>
+            </div>
+
+            {/* Pixel size (non-DICOM only) */}
+            {file && fileType !== 'dicom' && (
+              <div className="flex items-center gap-1.5">
+                <span className="text-xs text-slate-400">px:</span>
+                <input
+                  type="number"
                   value={pixelSize}
-                  onChange={setPixelSize}
-                  min={0.01}
-                  max={1}
-                  step={0.01}
-                  unit="mm/px"
-                  info="Physical size of each pixel"
-                  compact
+                  onChange={(e) => setPixelSize(parseFloat(e.target.value) || 0.1)}
+                  step="0.01"
+                  min="0.01"
+                  max="1"
+                  className="w-16 px-2 py-1 bg-slate-700 border border-slate-600 rounded text-xs text-white"
                 />
-              )}
-              
-              {fileType === 'dicom' && (
-                <div className="px-4 py-3 bg-nvidia-green/10 border border-nvidia-green/20 rounded-xl">
-                  <p className="text-xs text-nvidia-green font-medium">
-                    ✓ Pixel spacing will be extracted from DICOM metadata
-                  </p>
-                </div>
-              )}
+                <span className="text-xs text-slate-500">mm</span>
+              </div>
+            )}
 
-              {/* Estimate Button */}
-              <Button
+            {/* Estimate Button */}
+            <div className="relative group">
+              <button
                 onClick={handleEstimate}
-                disabled={!file}
-                isLoading={isLoading}
-                icon={<BarChart3 className="w-4 h-4" />}
+                disabled={isButtonDisabled || isLoading}
+                className={`flex items-center gap-2 px-4 py-1.5 rounded-lg text-sm font-semibold transition-all ${isButtonDisabled
+                  ? 'bg-slate-600 text-slate-400 cursor-not-allowed'
+                  : 'bg-nvidia-green text-white hover:bg-nvidia-green-hover shadow-lg'
+                  }`}
               >
-                Estimate Age
-              </Button>
-
-              {error && (
-                <div className="p-3 bg-red-50 border border-red-200 rounded-xl">
-                  <p className="text-red-600 text-xs font-medium">{error}</p>
+                {isLoading ? (
+                  <div className="w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin" />
+                ) : (
+                  <BarChart3 className="w-4 h-4" />
+                )}
+                Estimate
+              </button>
+              {isButtonDisabled && getButtonTooltip() && (
+                <div className="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 px-2 py-1 bg-slate-900 text-white text-xs rounded opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap">
+                  {getButtonTooltip()}
                 </div>
               )}
             </div>
           </div>
-        </Panel>
-      </div>
 
-      {/* Right Panel - Results */}
-      <div className="w-1/2 bg-dark-bg flex flex-col min-h-0">
-        <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' 
-                  : 'bg-amber-500/10 text-amber-600'
+          {/* Error/Warning row */}
+          {(error || (selectedView && !isViewEligible)) && (
+            <div className={`mt-2 p-2 rounded-lg flex items-center gap-2 text-xs ${error ? 'bg-red-500/10 text-red-400' : 'bg-amber-500/10 text-amber-400'
               }`}>
-                {preprocessingInfo.pipeline === 'full' ? 'Full Pipeline' : 'Basic Pipeline'}
-              </span>
-            )
-          }
+              <AlertTriangle className="w-3.5 h-3.5 flex-shrink-0" />
+              {error || 'Only brain, abdomen, and femur views are supported for GA estimation'}
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* Right Panel - Results (40%) */}
+      <div className="w-2/5 bg-white flex flex-col min-h-0">
+        <Panel
+          title="Results"
           className="flex-1 flex flex-col min-h-0"
         >
           <div className="flex-1 overflow-y-auto">
             <GAResultsCard results={results} isLoading={isLoading} />
+
+            {/* View info in results */}
+            {results && selectedView && (
+              <div className="mt-4 p-3 bg-slate-50 rounded-xl border border-slate-200">
+                <div className="flex items-center gap-2 mb-2">
+                  <CheckCircle className="w-4 h-4 text-nvidia-green" />
+                  <span className="text-sm font-medium text-slate-700">Estimation Complete</span>
+                </div>
+                <div className="space-y-1 text-xs text-slate-600">
+                  <p><span className="font-medium">View:</span> {selectedView}</p>
+                  <p><span className="font-medium">Biometry:</span> {GA_BIOMETRY_LABELS[selectedView]}</p>
+                  {preprocessingInfo?.metadata?.pixel_spacing && (
+                    <p><span className="font-medium">Pixel Spacing:</span> {preprocessingInfo.metadata.pixel_spacing.toFixed(3)} mm/px</p>
+                  )}
+                </div>
+              </div>
+            )}
+
+            {/* Preprocessing Badge - same style as Classification */}
+            {preprocessingInfo && (
+              <div className="mt-4">
+                <PreprocessingBadge info={preprocessingInfo} fileType={fileType} />
+              </div>
+            )}
           </div>
         </Panel>
       </div>