Upgrade to React + FastAPI (Docker-based)

- Replace Gradio with modern React frontend
- Add FastAPI backend with proper API
- Docker-based deployment for HF Spaces
- Professional UI with NVIDIA-inspired theme
- DICOM file support with full preprocessing
- Better performance and UX

Dockerfile

@@ -0,0 +1,66 @@
+# ============================================
+# FetalCLIP - Hugging Face Spaces Docker Image
+# ============================================
+# This Dockerfile creates a container that runs:
+# - FastAPI backend on port 7860 (HF Spaces requirement)
+# - Serves React frontend as static files
+#
+# Deploy to: https://huggingface.co/spaces
+
+FROM python:3.10-slim
+
+# Set working directory
+WORKDIR /app
+
+# Install system dependencies
+RUN apt-get update && apt-get install -y \
+    build-essential \
+    curl \
+    git \
+    libgl1-mesa-glx \
+    libglib2.0-0 \
+    && rm -rf /var/lib/apt/lists/*
+
+# Install Node.js for building frontend
+RUN curl -fsSL https://deb.nodesource.com/setup_18.x | bash - \
+    && apt-get install -y nodejs \
+    && rm -rf /var/lib/apt/lists/*
+
+# Copy backend requirements first (for Docker caching)
+COPY backend/requirements.txt /app/backend/requirements.txt
+RUN pip install --no-cache-dir -r /app/backend/requirements.txt
+
+# Copy assets
+COPY assets /app/assets
+
+# Copy backend code
+COPY backend/app /app/backend/app
+
+# Copy frontend and build
+COPY frontend/package*.json /app/frontend/
+WORKDIR /app/frontend
+RUN npm install
+
+COPY frontend /app/frontend
+RUN npm run build
+
+# Move built frontend to backend for serving
+RUN mkdir -p /app/backend/static && cp -r /app/frontend/dist/* /app/backend/static/
+
+WORKDIR /app
+
+# Copy the HF Spaces specific server
+COPY huggingface-spaces/server.py /app/server.py
+
+# Expose port 7860 (Hugging Face Spaces requirement)
+EXPOSE 7860
+
+# Set environment variables
+ENV PYTHONUNBUFFERED=1
+ENV HF_HOME=/app/.cache
+
+# Create cache directory
+RUN mkdir -p /app/.cache
+
+# Run the server
+CMD ["python", "server.py"]

README.md

@@ -1,14 +1,68 @@
 ---
 title: FetalCLIP
-emoji: 🏆
-colorFrom: indigo
-colorTo: indigo
-sdk: gradio
-sdk_version: 5.28.0
-app_file: app.py
+emoji: 👶
+colorFrom: green
+colorTo: blue
+sdk: docker
 pinned: false
-license: cc-by-nc-4.0
-short_description: ' A Visual-Language Foundation Model for Fetal Ultrasound Ima'
+license: apache-2.0
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# FetalCLIP - Fetal Ultrasound Analysis
+
+**Foundation Model for Zero-Shot Fetal Ultrasound Analysis**
+
+## Features
+
+- 🔬 **View Classification**: Classify ultrasound images into 13 anatomical views
+- 📅 **Gestational Age Estimation**: Estimate gestational age from fetal brain ultrasounds
+- 🏥 **DICOM Support**: Full preprocessing pipeline for medical DICOM files
+- 🖼️ **PNG/JPEG Support**: Basic preprocessing for standard image files
+
+## How to Use
+
+1. Upload a fetal ultrasound image (PNG, JPEG, or DICOM)
+2. Click "Classify View" to identify the anatomical plane
+3. View the top predictions with confidence scores
+
+## Model
+
+This demo uses the FetalCLIP model, a vision-language foundation model trained on fetal ultrasound images.
+
+- **Model**: [numansaeed/fetalclip-model](https://huggingface.co/numansaeed/fetalclip-model)
+- **Architecture**: ViT-L/14 based CLIP model
+- **Training**: Contrastive learning on fetal ultrasound-text pairs
+
+## Supported Views
+
+1. Fetal abdomen
+2. Fetal brain (transventricular)
+3. Fetal brain (transthalamic)
+4. Fetal brain (transcerebellar)
+5. Fetal femur
+6. Fetal heart (4-chamber)
+7. Fetal heart (LVOT)
+8. Fetal heart (RVOT)
+9. Fetal heart (3VV)
+10. Fetal kidney
+11. Fetal face (lips)
+12. Fetal spine (coronal)
+13. Fetal spine (sagittal)
+
+## Citation
+
+If you use this model, please cite:
+
+```bibtex
+@article{fetalclip2024,
+  title={FetalCLIP: A Foundation Model for Fetal Ultrasound Analysis},
+  author={...},
+  year={2024}
+}
+```
+
+## Links
+
+- 📦 [Model Hub](https://huggingface.co/numansaeed/fetalclip-model)
+- 📄 [Paper](#)
+- 💻 [GitHub](#)

app.py

@@ -1,320 +0,0 @@
-import gradio as gr
-import torch
-from huggingface_hub import hf_hub_download
-import open_clip
-from PIL import Image
-import json
-import os
-from utils import make_image_square_with_zero_padding
-from tqdm import tqdm
-import plotly.graph_objects as go
-import numpy as np
-
-# Constants and Configuration
-ASSETS_DIR = "assets"
-EXAMPLES_DIR = "examples"
-PATH_TEXT_PROMPTS = os.path.join(ASSETS_DIR, "prompt_fetal_view.json")
-PATH_FETALCLIP_CONFIG = os.path.join(ASSETS_DIR, "FetalCLIP_config.json")
-MODEL_NAME = "numansaeed/fetalclip-model"
-
-# Helper functions for gestational age estimation
-INPUT_SIZE = 224
-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."
-]
-list_ga_in_days = [weeks * 7 + days for weeks in range(14, 39) for days in range(0, 7)]
-assert sorted(list_ga_in_days) == list_ga_in_days
-TOP_N_PROBS = 15
-
-tokenizer = None  # Make tokenizer global
-
-def load_model():
-    global model, preprocess_test, text_features, list_plane, device, tokenizer
-    device = torch.device("cuda" if torch.cuda.is_available() else "cpu")
-    
-    # Load and register model configuration
-    with open(PATH_FETALCLIP_CONFIG, "r") as file:
-        config_fetalclip = json.load(file)
-    open_clip.factory._MODEL_CONFIGS["FetalCLIP"] = config_fetalclip
-    
-    # Download model weights from Hugging Face Hub
-    weights_path = hf_hub_download(
-        repo_id=MODEL_NAME,
-        filename="FetalCLIP_weights.pt"
-    )
-    
-    # Load the FetalCLIP model and preprocessing transforms
-    model, _, preprocess_test = open_clip.create_model_and_transforms(
-        "FetalCLIP",
-        pretrained=weights_path
-    )
-    tokenizer = open_clip.get_tokenizer("FetalCLIP")
-    
-    model = model.float()
-    model.eval()
-    model.to(device)
-    
-    # Load text prompts
-    with open(PATH_TEXT_PROMPTS, 'r') as json_file:
-        text_prompts = json.load(json_file)
-
-    # Extract text features
-    list_text_features = []
-    list_plane = []
-    with torch.no_grad():
-        for plane, prompts in tqdm(text_prompts.items()):
-            list_plane.append(plane)
-            
-            prompts = tokenizer(prompts).to(device)
-            text_features = model.encode_text(prompts)
-            text_features /= text_features.norm(dim=-1, keepdim=True)
-            
-            text_features = text_features.mean(dim=0).unsqueeze(0)
-            text_features /= text_features.norm(dim=-1, keepdim=True)
-            
-            list_text_features.append(text_features)
-    text_features = torch.stack(list_text_features)[:,0]
-    
-    return model, preprocess_test, text_features, list_plane, device
-
-# Load model and text features at startup
-model, preprocess_test, text_features, list_plane, device = load_model()
-
-def process_image(image, top_k):
-    if image is None:
-        return None
-    
-    try:
-        # Convert top_k to integer and ensure it's within valid range
-        top_k = min(int(top_k), 13)  # Ensure we don't exceed the number of possible classes
-        
-        # Preprocess image
-        img = make_image_square_with_zero_padding(Image.fromarray(image))
-        img = preprocess_test(img).unsqueeze(0).to(device)
-        
-        # Get image features
-        with torch.no_grad():
-            image_features = model.encode_image(img)
-            image_features /= image_features.norm(dim=-1, keepdim=True)
-        
-        # Calculate similarity scores
-        similarity = (99.2198 * image_features @ text_features.T).softmax(dim=-1) #model.logit_scal.exp() = 99.2198
-        values, indices = similarity[0].topk(top_k)
-        
-        # Create bar chart
-        labels = [list_plane[idx] for idx in indices]
-        values = [value.item() * 100 for value in values]  # Convert to percentage
-        
-        # Reverse the order of labels and values to show highest probability at top
-        labels = labels[::-1]
-        values = values[::-1]
-        
-        fig = go.Figure(data=[
-            go.Bar(
-                x=values,
-                y=labels,
-                orientation='h',
-                text=[f'{v:.1f}%' for v in values],
-                textposition='auto',
-            )
-        ])
-        
-        fig.update_layout(
-            title="Classification Results",
-            xaxis_title="Confidence (%)",
-            yaxis_title="Fetal View",
-            xaxis=dict(range=[0, 100]),
-            height=max(300, 50 * len(labels)),
-            margin=dict(l=20, r=20, t=40, b=20)
-        )
-        
-        return fig
-    except Exception as e:
-        print(f"Error in process_image: {str(e)}")  # Add error logging
-        return None
-
-def get_text_prompts(template, pixel_spacing, tokenizer, model, device):
-    prompts = []
-    for weeks in range(14, 39):
-        for days in range(0, 7):
-            prompt = template.replace("{weeks}", str(weeks))
-            prompt = prompt.replace("{day}", str(days))
-            prompt = prompt.replace("{pixel_spacing}", f"{pixel_spacing:.2f}")
-            prompts.append(prompt)
-    with torch.no_grad():
-        prompts = tokenizer(prompts).to(device)
-        text_features = model.encode_text(prompts)
-        text_features /= text_features.norm(dim=-1, keepdim=True) # (n_days, 768)
-    return text_features
-
-def get_unnormalized_dot_products(image_features, list_text_features):
-    text_features = torch.cat(list_text_features, dim=0) # (n_days * n_prompts, 768)
-    text_dot_prods = (100.0 * image_features @ text_features.T)
-    n_prompts = len(list_text_features) # 5 --> 5 text prompts for each day
-    n_days    = len(list_text_features[0])
-    text_dot_prods = text_dot_prods.view(image_features.shape[0], n_prompts, n_days)
-    text_dot_prods = text_dot_prods.mean(dim=1)
-    return text_dot_prods
-
-def find_median_from_top_n(text_dot_prods, n):
-    assert len(text_dot_prods.shape) == 1
-    tmp = [[i, t] for i, t in enumerate(text_dot_prods)]
-    tmp = sorted(tmp, key=lambda x: x[1], reverse=True)[:n]
-    tmp = sorted(tmp, key=lambda x: x[0])
-    median_ind = tmp[n // 2][0]
-    return median_ind
-
-def get_hc_from_days(t, quartile='0.5'):
-    t = t / 7
-    dict_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],
-    }
-    b0, b1, b2, b3, b4 = dict_params[quartile]
-    hc_q50 = np.exp(
-        b0 + b1*t + b2*t**2 + b3*t**3 + b4*t**4
-    )
-    return hc_q50
-
-def estimate_gestational_age(image, pixel_size):
-    try:
-        if image is None or pixel_size is None:
-            return "Please upload an image and enter pixel size.", "--"
-        # Convert image to PIL and preprocess
-        img = Image.fromarray(image)
-        # Calculate effective pixel spacing after resizing
-        pixel_spacing = max(img.size) / INPUT_SIZE * float(pixel_size)
-        img = make_image_square_with_zero_padding(img)
-        img = preprocess_test(img)
-        img = img.unsqueeze(0)
-        img = img.to(device)
-        # Compute image features
-        with torch.no_grad():
-            image_features = model.encode_image(img)
-            image_features /= image_features.norm(dim=-1, keepdim=True)
-            # Compute text features for all prompts
-            values = [get_text_prompts(val, pixel_spacing, tokenizer, model, device) for val in TEXT_PROMPTS]
-            # Compute dot products
-            text_dot_prods = get_unnormalized_dot_products(image_features, values) # (1, n_days)
-        # Compute the GA prediction
-        text_dot_prod = text_dot_prods.detach().cpu().numpy()[0] # (n_days)
-        med_indices = find_median_from_top_n(text_dot_prod, TOP_N_PROBS)
-        pred_day = list_ga_in_days[med_indices]
-        pred_weeks = pred_day // 7
-        pred_days = pred_day % 7
-        # Compute HC interval
-        q025 = get_hc_from_days(pred_day, '0.025')
-        q500 = get_hc_from_days(pred_day, '0.500')
-        q975 = get_hc_from_days(pred_day, '0.975')
-        # Format outputs
-        ga_str = f"Predicted: {pred_weeks} weeks, {pred_days} days"
-        hc_str = f"HC: {q025:.2f} mm [2.5%], {q500:.2f} mm [50%], {q975:.2f} mm [97.5%]"
-        return ga_str, hc_str
-    except Exception as e:
-        print(f"Error in estimate_gestational_age: {str(e)}")
-        return "Error in estimation.", "--"
-
-# Create the Gradio interface
-with gr.Blocks(title="Fetal View Classification") as demo:
-    with gr.Tab("Fetal View Classification"):
-        gr.Markdown("""
-        # Zero-shot Fetal View Classification
-        
-        Upload an ultrasound image to classify the fetal view. The model will predict the most likely views from 13 possible categories:
-        abdomen, brain, femur, heart, kidney, lips_nose, profile_patient, spine, cervix, cord, diaphragm, feet, orbit
-        """)
-        
-        with gr.Row():
-            with gr.Column(scale=1):
-                # Input controls
-                image_input = gr.Image(
-                    label="Upload Ultrasound Image",
-                    type="numpy",
-                    height=400
-                )
-                submit_btn = gr.Button("Classify View", variant="primary")
-                
-            with gr.Column(scale=1):
-                # Output controls and display
-                top_k = gr.Slider(
-                    minimum=1,
-                    maximum=13,
-                    value=5,
-                    step=1,
-                    label="Number of top predictions to show",
-                    info="Adjust how many top predictions to display"
-                )
-                plot_output = gr.Plot(label="Classification Results")
-        
-        # Example images section
-        gr.Examples(
-            examples=[
-                [os.path.join(EXAMPLES_DIR, "Fetal_abdomen_1.png"), 5],
-                [os.path.join(EXAMPLES_DIR, "Fetal_abdomen_2.png"), 5],
-                [os.path.join(EXAMPLES_DIR, "Fetal_brain_1.png"), 5],
-                [os.path.join(EXAMPLES_DIR, "Fetal_brain_2.png"), 5],
-                [os.path.join(EXAMPLES_DIR, "Fetal_femur_1.png"), 5],
-                [os.path.join(EXAMPLES_DIR, "Fetal_femur_2.png"), 5],
-                [os.path.join(EXAMPLES_DIR, "Fetal_orbit_2.png"), 5],
-                [os.path.join(EXAMPLES_DIR, "Fetal_profile_2.png"), 5],
-                [os.path.join(EXAMPLES_DIR, "Fetal_thorax_1.png"), 5],
-                [os.path.join(EXAMPLES_DIR, "Fetal_thorax_2.png"), 5],
-            ],
-            inputs=[image_input, top_k],
-            outputs=plot_output,
-            fn=process_image,
-            cache_examples=True,
-        )
-        
-        # Set up event handler
-        submit_btn.click(
-            fn=process_image,
-            inputs=[image_input, top_k],
-            outputs=plot_output
-        )
-
-        top_k.change(
-            fn=process_image,
-            inputs=[image_input, top_k],
-            outputs=plot_output
-        )
-        image_input.change(
-            fn=process_image,
-            inputs=[image_input, top_k],
-            outputs=plot_output
-        )
-
-    with gr.Tab("Gestational Age Estimation"):
-        gr.Markdown("""
-        # Zero-shot Gestational Age Estimation
-        
-        Upload a fetal brain ultrasound image and enter the pixel size (mm/pixel) to estimate gestational age and head circumference percentiles.
-        """)
-        with gr.Row():
-            with gr.Column(scale=1):
-                ga_image_input = gr.Image(
-                    label="Upload Gestational Age Sample Image",
-                    type="numpy",
-                    height=400
-                )
-                pixel_size_input = gr.Number(
-                    label="Pixel Size (mm/pixel)",
-                    value=0.1
-                )
-                ga_submit_btn = gr.Button("Estimate Gestational Age", variant="primary")
-            with gr.Column(scale=1):
-                ga_output = gr.Textbox(label="Predicted Gestational Age (weeks + days)")
-                hc_output = gr.Textbox(label="Head Circumference (mm) [2.5, 50, 97.5 percentiles]")
-        ga_submit_btn.click(
-            fn=estimate_gestational_age,
-            inputs=[ga_image_input, pixel_size_input],
-            outputs=[ga_output, hc_output]
-        )
-
-if __name__ == "__main__":
-    demo.launch()

assets/FetalCLIP_config.json

@@ -1,16 +1,16 @@
 {
-  "embed_dim": 768,
-  "vision_cfg": {
-    "image_size": 224,
-    "layers": 24,
-    "width": 1024,
-    "patch_size": 14
-  },
-  "text_cfg": {
-    "context_length": 117,
-    "vocab_size": 49408,
-    "width": 768,
-    "heads": 12,
-    "layers": 12
-  }
-}
+    "embed_dim": 768,
+    "vision_cfg": {
+      "image_size": 224,
+      "layers": 24,
+      "width": 1024,
+      "patch_size": 14
+    },
+    "text_cfg": {
+      "context_length": 117,
+      "vocab_size": 49408,
+      "width": 768,
+      "heads": 12,
+      "layers": 12
+    }
+  }

assets/prompt_fetal_view.json

@@ -1,93 +1,94 @@
 {
-  "abdomen": [
-    "Ultrasound image focusing on the fetal abdominal area, highlighting structural development.",
-    "Detailed ultrasound highlighting the fetal abdomen, emphasizing anatomical structures.",
-    "Ultrasound scan of the fetal abdomen, showcasing structural details.",
-    "Focused ultrasound image highlighting the development of the fetal abdominal structures.",
-    "Clear ultrasound of the fetal abdomen, emphasizing its anatomical development."
-  ],
-  "brain": [
-    "Ultrasound image focusing on the fetal brain, highlighting key anatomical features.",
-    "Detailed ultrasound scan of the developing fetal brain, showcasing structural highlights.",
-    "Ultrasound highlighting the fetal brain structures with detailed visualization.",
-    "Focused ultrasound showing the fetal brain and its developing anatomical structures.",
-    "Clear ultrasound of the fetal brain, emphasizing its structural development."
-  ],
-  "femur": [
-    "Ultrasound image focusing on the developing fetal femur, highlighting bone length and structure.",
-    "Detailed ultrasound showcasing the fetal femur, providing a view of skeletal development.",
-    "Ultrasound scan focusing on the fetal femur, emphasizing structural highlights.",
-    "Clear ultrasound image highlighting the fetal femur and its bone development.",
-    "Focused ultrasound showcasing the fetal femur, emphasizing skeletal details."
-  ],
-  "heart": [
-    "Fetal ultrasound image focusing on the heart, highlighting detailed cardiac structures.",
-    "Ultrasound scan showcasing the fetal heart and its developing anatomy.",
-    "Clear ultrasound of the fetal heart, emphasizing detailed structural highlights.",
-    "Detailed ultrasound image highlighting the fetal heart and its development.",
-    "Focused ultrasound scan showing the fetal heart and its anatomical features."
-  ],
-  "kidney": [
-    "Fetal ultrasound focusing on the kidney, showcasing structural details and development.",
-    "Detailed ultrasound scan of the fetal kidney, emphasizing its anatomical position.",
-    "Focused ultrasound highlighting the fetal kidney and its structural characteristics.",
-    "Clear ultrasound image showing the fetal kidney, emphasizing its development.",
-    "Ultrasound scan focusing on the fetal kidney, showcasing anatomical highlights."
-  ],
-  "lips_nose": [
-    "Ultrasound image focusing on the lips and nose, highlighting facial development.",
-    "Detailed ultrasound scan showcasing the fetal lips and nose structures.",
-    "Clear ultrasound image of the fetal lips and nose, emphasizing anatomical features.",
-    "Focused ultrasound highlighting the development of the fetal lips and nose.",
-    "Ultrasound scan showcasing the fetal lips and nose, emphasizing structural details."
-  ],
-  "profile_patient": [
-    "Ultrasound image showing the fetal profile, with clear visualization of facial features.",
-    "Detailed ultrasound scan of the fetal profile, emphasizing facial development.",
-    "Focused ultrasound highlighting the fetal profile and its anatomical details.",
-    "Clear ultrasound image showcasing the fetal profile and facial structure.",
-    "Ultrasound scan emphasizing the fetal profile, highlighting facial features."
-  ],
-  "spine": [
-    "Ultrasound image focusing on the fetal spine, highlighting vertebral alignment.",
-    "Detailed ultrasound scan showcasing the fetal spine and its anatomical structures.",
-    "Focused ultrasound image emphasizing the fetal spine and vertebral development.",
-    "Clear ultrasound showing the fetal spine and its structural highlights.",
-    "Ultrasound scan highlighting the fetal spine, showcasing vertebral anatomy."
-  ],
-  "cervix": [
-    "Ultrasound image highlighting the cervix, showcasing its structure and position.",
-    "Detailed ultrasound scan of the cervix, emphasizing its length and anatomical features.",
-    "Clear ultrasound image focusing on the cervix, providing structural insights.",
-    "Focused ultrasound showcasing the cervical region and its anatomical details.",
-    "Ultrasound image highlighting the cervix, emphasizing its structure and appearance."
-  ],
-  "cord": [
-    "Ultrasound image focusing on the umbilical cord, highlighting its structure and position.",
-    "Detailed ultrasound scan showcasing the umbilical cord in relation to the fetus.",
-    "Focused ultrasound image highlighting the umbilical cord and its anatomical features.",
-    "Clear ultrasound scan emphasizing the umbilical cord structure.",
-    "Ultrasound image highlighting the umbilical cord and its placement near the fetus."
-  ],
-  "diaphragm": [
-    "Ultrasound image focusing on the fetal diaphragm, highlighting its anatomical structure.",
-    "Detailed ultrasound scan showcasing the fetal diaphragm and surrounding anatomy.",
-    "Focused ultrasound image emphasizing the diaphragm in fetal development.",
-    "Clear ultrasound highlighting the fetal diaphragm and its structure.",
-    "Ultrasound scan showcasing the fetal diaphragm with detailed visualization."
-  ],
-  "feet": [
-    "Ultrasound image focusing on the fetal feet, highlighting their development and position.",
-    "Detailed ultrasound scan showcasing the fetal feet and structural features.",
-    "Clear ultrasound image highlighting the fetal feet and their anatomical details.",
-    "Focused ultrasound showing the development of the fetal feet.",
-    "Ultrasound scan emphasizing the fetal feet and their structure."
-  ],
-  "orbit": [
-    "Ultrasound image focusing on the fetal orbit, highlighting ocular structures.",
-    "Detailed ultrasound scan showcasing the fetal orbit and eye development.",
-    "Focused ultrasound highlighting the fetal orbital region and structural features.",
-    "Clear ultrasound image emphasizing the fetal orbit and ocular anatomy.",
-    "Ultrasound scan highlighting the development of the fetal orbit."
-  ]
-}
+    "abdomen": [
+      "Ultrasound image focusing on the fetal abdominal area, highlighting structural development.",
+      "Detailed ultrasound highlighting the fetal abdomen, emphasizing anatomical structures.",
+      "Ultrasound scan of the fetal abdomen, showcasing structural details.",
+      "Focused ultrasound image highlighting the development of the fetal abdominal structures.",
+      "Clear ultrasound of the fetal abdomen, emphasizing its anatomical development."
+    ],
+    "brain": [
+      "Ultrasound image focusing on the fetal brain, highlighting key anatomical features.",
+      "Detailed ultrasound scan of the developing fetal brain, showcasing structural highlights.",
+      "Ultrasound highlighting the fetal brain structures with detailed visualization.",
+      "Focused ultrasound showing the fetal brain and its developing anatomical structures.",
+      "Clear ultrasound of the fetal brain, emphasizing its structural development."
+    ],
+    "femur": [
+      "Ultrasound image focusing on the developing fetal femur, highlighting bone length and structure.",
+      "Detailed ultrasound showcasing the fetal femur, providing a view of skeletal development.",
+      "Ultrasound scan focusing on the fetal femur, emphasizing structural highlights.",
+      "Clear ultrasound image highlighting the fetal femur and its bone development.",
+      "Focused ultrasound showcasing the fetal femur, emphasizing skeletal details."
+    ],
+    "heart": [
+      "Fetal ultrasound image focusing on the heart, highlighting detailed cardiac structures.",
+      "Ultrasound scan showcasing the fetal heart and its developing anatomy.",
+      "Clear ultrasound of the fetal heart, emphasizing detailed structural highlights.",
+      "Detailed ultrasound image highlighting the fetal heart and its development.",
+      "Focused ultrasound scan showing the fetal heart and its anatomical features."
+    ],
+    "kidney": [
+      "Fetal ultrasound focusing on the kidney, showcasing structural details and development.",
+      "Detailed ultrasound scan of the fetal kidney, emphasizing its anatomical position.",
+      "Focused ultrasound highlighting the fetal kidney and its structural characteristics.",
+      "Clear ultrasound image showing the fetal kidney, emphasizing its development.",
+      "Ultrasound scan focusing on the fetal kidney, showcasing anatomical highlights."
+    ],
+    "lips_nose": [
+      "Ultrasound image focusing on the lips and nose, highlighting facial development.",
+      "Detailed ultrasound scan showcasing the fetal lips and nose structures.",
+      "Clear ultrasound image of the fetal lips and nose, emphasizing anatomical features.",
+      "Focused ultrasound highlighting the development of the fetal lips and nose.",
+      "Ultrasound scan showcasing the fetal lips and nose, emphasizing structural details."
+    ],
+    "profile_patient": [
+      "Ultrasound image showing the fetal profile, with clear visualization of facial features.",
+      "Detailed ultrasound scan of the fetal profile, emphasizing facial development.",
+      "Focused ultrasound highlighting the fetal profile and its anatomical details.",
+      "Clear ultrasound image showcasing the fetal profile and facial structure.",
+      "Ultrasound scan emphasizing the fetal profile, highlighting facial features."
+    ],
+    "spine": [
+      "Ultrasound image focusing on the fetal spine, highlighting vertebral alignment.",
+      "Detailed ultrasound scan showcasing the fetal spine and its anatomical structures.",
+      "Focused ultrasound image emphasizing the fetal spine and vertebral development.",
+      "Clear ultrasound showing the fetal spine and its structural highlights.",
+      "Ultrasound scan highlighting the fetal spine, showcasing vertebral anatomy."
+    ],
+    "cervix": [
+      "Ultrasound image highlighting the cervix, showcasing its structure and position.",
+      "Detailed ultrasound scan of the cervix, emphasizing its length and anatomical features.",
+      "Clear ultrasound image focusing on the cervix, providing structural insights.",
+      "Focused ultrasound showcasing the cervical region and its anatomical details.",
+      "Ultrasound image highlighting the cervix, emphasizing its structure and appearance."
+    ],
+    "cord": [
+      "Ultrasound image focusing on the umbilical cord, highlighting its structure and position.",
+      "Detailed ultrasound scan showcasing the umbilical cord in relation to the fetus.",
+      "Focused ultrasound image highlighting the umbilical cord and its anatomical features.",
+      "Clear ultrasound scan emphasizing the umbilical cord structure.",
+      "Ultrasound image highlighting the umbilical cord and its placement near the fetus."
+    ],
+    "diaphragm": [
+      "Ultrasound image focusing on the fetal diaphragm, highlighting its anatomical structure.",
+      "Detailed ultrasound scan showcasing the fetal diaphragm and surrounding anatomy.",
+      "Focused ultrasound image emphasizing the diaphragm in fetal development.",
+      "Clear ultrasound highlighting the fetal diaphragm and its structure.",
+      "Ultrasound scan showcasing the fetal diaphragm with detailed visualization."
+    ],
+    "feet": [
+      "Ultrasound image focusing on the fetal feet, highlighting their development and position.",
+      "Detailed ultrasound scan showcasing the fetal feet and structural features.",
+      "Clear ultrasound image highlighting the fetal feet and their anatomical details.",
+      "Focused ultrasound showing the development of the fetal feet.",
+      "Ultrasound scan emphasizing the fetal feet and their structure."
+    ],
+    "orbit": [
+      "Ultrasound image focusing on the fetal orbit, highlighting ocular structures.",
+      "Detailed ultrasound scan showcasing the fetal orbit and eye development.",
+      "Focused ultrasound highlighting the fetal orbital region and structural features.",
+      "Clear ultrasound image emphasizing the fetal orbit and ocular anatomy.",
+      "Ultrasound scan highlighting the development of the fetal orbit."
+    ]
+  }
+  

backend/app/__init__.py

@@ -0,0 +1,2 @@
+# FetalCLIP Backend
+

backend/app/main.py

@@ -0,0 +1,96 @@
+from fastapi import FastAPI
+from fastapi.middleware.cors import CORSMiddleware
+from fastapi.responses import JSONResponse
+from contextlib import asynccontextmanager
+from pathlib import Path
+import sys
+
+from .routes import classification_router, gestational_age_router
+from .services.model import model_service
+
+# Get assets directory - handle both development and PyInstaller frozen modes
+def get_assets_dir() -> Path:
+    """Get the assets directory, works in both development and frozen (PyInstaller) modes."""
+    if getattr(sys, 'frozen', False):
+        # Running as PyInstaller bundle - assets are in _MEIPASS/assets
+        base_path = Path(sys._MEIPASS)
+        assets = base_path / "assets"
+        print(f"[Frozen Mode] Base path: {base_path}")
+        print(f"[Frozen Mode] Assets path: {assets}")
+        return assets
+    else:
+        # Development mode - assets are in project root
+        assets = Path(__file__).parent.parent.parent / "assets"
+        print(f"[Dev Mode] Assets path: {assets}")
+        return assets
+
+ASSETS_DIR = get_assets_dir()
+
+
+@asynccontextmanager
+async def lifespan(app: FastAPI):
+    """Load model on startup, cleanup on shutdown."""
+    print("🚀 Starting FetalCLIP API...")
+    model_service.load_model(ASSETS_DIR)
+    yield
+    print("👋 Shutting down FetalCLIP API...")
+
+
+app = FastAPI(
+    title="FetalCLIP API",
+    description="""
+    ## FetalCLIP - Foundation Model for Fetal Ultrasound Analysis
+    
+    This API provides two main capabilities:
+    
+    ### 1. Fetal View Classification
+    Classify ultrasound images into 13 anatomical view categories using zero-shot learning.
+    
+    ### 2. Gestational Age Estimation
+    Estimate gestational age from fetal brain ultrasounds with head circumference percentiles.
+    
+    ---
+    
+    Built with ❤️ using PyTorch and OpenCLIP
+    """,
+    version="1.0.0",
+    lifespan=lifespan,
+    docs_url="/docs",
+    redoc_url="/redoc"
+)
+
+# CORS middleware for frontend
+app.add_middleware(
+    CORSMiddleware,
+    allow_origins=["http://localhost:5173", "http://localhost:3000", "http://127.0.0.1:5173", "tauri://localhost"],
+    allow_credentials=True,
+    allow_methods=["*"],
+    allow_headers=["*"],
+)
+
+# Include routers
+app.include_router(classification_router)
+app.include_router(gestational_age_router)
+
+
+@app.get("/", tags=["Health"])
+async def root():
+    """API root - health check."""
+    return JSONResponse(content={
+        "name": "FetalCLIP API",
+        "version": "1.0.0",
+        "status": "healthy",
+        "docs": "/docs"
+    })
+
+
+@app.get("/health", tags=["Health"])
+async def health_check():
+    """Detailed health check."""
+    return JSONResponse(content={
+        "status": "healthy",
+        "model_loaded": model_service.model is not None,
+        "device": str(model_service.device),
+        "available_views": len(model_service.list_plane)
+    })
+

backend/app/routes/__init__.py

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

backend/app/routes/classification.py

@@ -0,0 +1,89 @@
+from fastapi import APIRouter, UploadFile, File, Query, HTTPException
+from fastapi.responses import JSONResponse
+from ..services.model import model_service
+from ..services.preprocessing import get_dicom_preview, is_dicom_file
+
+router = APIRouter(prefix="/api/v1/classify", tags=["Classification"])
+
+
+@router.post("/preview")
+async def get_file_preview(
+    file: UploadFile = File(..., description="File to preview (DICOM or image)")
+):
+    """
+    Get a preview image from a file.
+    For DICOM files, extracts the raw pixel data.
+    For images, returns as base64.
+    """
+    try:
+        contents = await file.read()
+        filename = file.filename or "unknown"
+        
+        if is_dicom_file(contents, filename):
+            preview_base64 = get_dicom_preview(contents)
+            return JSONResponse(content={
+                "success": True,
+                "preview": preview_base64,
+                "type": "dicom"
+            })
+        else:
+            # For regular images, just encode as base64
+            import base64
+            preview_base64 = base64.b64encode(contents).decode('utf-8')
+            # Determine mime type
+            content_type = file.content_type or "image/png"
+            return JSONResponse(content={
+                "success": True,
+                "preview": preview_base64,
+                "type": "image",
+                "mime_type": content_type
+            })
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=str(e))
+
+
+@router.post("/")
+async def classify_fetal_view(
+    file: UploadFile = File(..., description="Ultrasound file (DICOM or image)"),
+    top_k: int = Query(default=5, ge=1, le=13, description="Number of top predictions")
+):
+    """
+    Classify fetal ultrasound view.
+    
+    Supports both DICOM files (full preprocessing) and image files (basic preprocessing).
+    
+    Returns the top-k most likely anatomical views with confidence scores,
+    plus information about the preprocessing applied.
+    
+    Supported views:
+    - abdomen, brain, femur, heart, kidney, lips_nose
+    - profile_patient, spine, cervix, cord, diaphragm, feet, orbit
+    """
+    try:
+        # Read file bytes
+        contents = await file.read()
+        filename = file.filename or "unknown"
+        
+        # Classify with automatic preprocessing
+        predictions, preprocessing_info = model_service.classify_from_file(
+            contents, filename, top_k=top_k
+        )
+        
+        return JSONResponse(content={
+            "success": True,
+            "predictions": predictions,
+            "top_prediction": predictions[0] if predictions else None,
+            "preprocessing": preprocessing_info
+        })
+    
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=str(e))
+
+
+@router.get("/views")
+async def get_available_views():
+    """Get list of all classifiable fetal views."""
+    return JSONResponse(content={
+        "views": model_service.list_plane,
+        "count": len(model_service.list_plane)
+    })

backend/app/routes/gestational_age.py

@@ -0,0 +1,41 @@
+from fastapi import APIRouter, UploadFile, File, Query, HTTPException
+from fastapi.responses import JSONResponse
+from ..services.model import model_service
+
+router = APIRouter(prefix="/api/v1/gestational-age", tags=["Gestational Age"])
+
+
+@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")
+):
+    """
+    Estimate gestational age from fetal brain ultrasound.
+    
+    Supports both DICOM files (full preprocessing, auto pixel spacing) 
+    and image files (basic preprocessing, manual pixel size).
+    
+    For DICOM files, pixel spacing is automatically extracted from metadata.
+    For image files, you must provide the pixel_size parameter.
+    
+    Returns estimated gestational age and head circumference percentiles.
+    """
+    try:
+        # Read file bytes
+        contents = await file.read()
+        filename = file.filename or "unknown"
+        
+        # Estimate GA with automatic preprocessing
+        ga_results, preprocessing_info = model_service.estimate_ga_from_file(
+            contents, filename, pixel_size=pixel_size
+        )
+        
+        return JSONResponse(content={
+            "success": True,
+            **ga_results,
+            "preprocessing": preprocessing_info
+        })
+    
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=str(e))

backend/app/services/__init__.py

@@ -0,0 +1,4 @@
+from .model import FetalCLIPService
+
+__all__ = ["FetalCLIPService"]
+

backend/app/services/model.py

@@ -0,0 +1,267 @@
+import torch
+import open_clip
+import json
+import numpy as np
+from PIL import Image
+from pathlib import Path
+from huggingface_hub import hf_hub_download
+from typing import List, Dict, Tuple, Optional
+
+from .preprocessing import preprocess_file, preprocess_image
+
+# Constants
+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."
+]
+
+LIST_GA_IN_DAYS = [weeks * 7 + days for weeks in range(14, 39) for days in range(0, 7)]
+
+
+class FetalCLIPService:
+    _instance = None
+    _initialized = False
+
+    def __new__(cls):
+        if cls._instance is None:
+            cls._instance = super().__new__(cls)
+        return cls._instance
+
+    def __init__(self):
+        if FetalCLIPService._initialized:
+            return
+        
+        self.device = torch.device("cuda" if torch.cuda.is_available() else "cpu")
+        self.model = None
+        self.preprocess = None
+        self.tokenizer = None
+        self.text_features = None
+        self.list_plane = []
+        
+        FetalCLIPService._initialized = True
+
+    def load_model(self, assets_dir: Path):
+        """Load the FetalCLIP model and precompute text features."""
+        config_path = assets_dir / "FetalCLIP_config.json"
+        prompts_path = assets_dir / "prompt_fetal_view.json"
+        
+        # Load config
+        with open(config_path, "r") as f:
+            config = json.load(f)
+        open_clip.factory._MODEL_CONFIGS["FetalCLIP"] = config
+        
+        # Download weights
+        weights_path = hf_hub_download(
+            repo_id=MODEL_NAME,
+            filename="FetalCLIP_weights.pt"
+        )
+        
+        # Create model
+        self.model, _, self.preprocess = open_clip.create_model_and_transforms(
+            "FetalCLIP",
+            pretrained=weights_path
+        )
+        self.tokenizer = open_clip.get_tokenizer("FetalCLIP")
+        
+        self.model = self.model.float()
+        self.model.eval()
+        self.model.to(self.device)
+        
+        # Load text prompts and compute features
+        with open(prompts_path, 'r') as f:
+            text_prompts = json.load(f)
+        
+        list_text_features = []
+        self.list_plane = []
+        
+        with torch.no_grad():
+            for plane, prompts in text_prompts.items():
+                self.list_plane.append(plane)
+                
+                tokens = self.tokenizer(prompts).to(self.device)
+                features = self.model.encode_text(tokens)
+                features /= features.norm(dim=-1, keepdim=True)
+                
+                features = features.mean(dim=0).unsqueeze(0)
+                features /= features.norm(dim=-1, keepdim=True)
+                
+                list_text_features.append(features)
+        
+        self.text_features = torch.stack(list_text_features)[:, 0]
+        
+        print(f"✓ FetalCLIP model loaded on {self.device}")
+        return True
+
+    def classify_view(self, image: Image.Image, top_k: int = 5) -> List[Dict]:
+        """Classify fetal ultrasound view from preprocessed image."""
+        if self.model is None:
+            raise RuntimeError("Model not loaded. Call load_model() first.")
+        
+        top_k = min(top_k, len(self.list_plane))
+        
+        # Apply model preprocessing (resize to 224, normalize)
+        img_tensor = self.preprocess(image).unsqueeze(0).to(self.device)
+        
+        # Inference
+        with torch.no_grad():
+            image_features = self.model.encode_image(img_tensor)
+            image_features /= image_features.norm(dim=-1, keepdim=True)
+        
+        # Compute similarity
+        similarity = (99.2198 * image_features @ self.text_features.T).softmax(dim=-1)
+        values, indices = similarity[0].topk(top_k)
+        
+        results = []
+        for idx, val in zip(indices, values):
+            results.append({
+                "label": self.list_plane[idx],
+                "confidence": round(val.item() * 100, 2)
+            })
+        
+        return results
+
+    def classify_from_file(self, file_bytes: bytes, filename: str, top_k: int = 5) -> Tuple[List[Dict], Dict]:
+        """
+        Classify from raw file bytes with automatic preprocessing.
+        
+        Returns:
+            Tuple of (predictions, preprocessing_info)
+        """
+        # Preprocess based on file type
+        processed_image, preprocessing_info = preprocess_file(file_bytes, filename)
+        
+        # Classify
+        predictions = self.classify_view(processed_image, top_k)
+        
+        return predictions, preprocessing_info
+
+    def _get_ga_text_features(self, template: str, pixel_spacing: float) -> torch.Tensor:
+        """Generate text features for GA estimation."""
+        prompts = []
+        for weeks in range(14, 39):
+            for days in range(0, 7):
+                prompt = template.format(
+                    weeks=weeks,
+                    day=days,
+                    pixel_spacing=f"{pixel_spacing:.2f}"
+                )
+                prompts.append(prompt)
+        
+        with torch.no_grad():
+            tokens = self.tokenizer(prompts).to(self.device)
+            features = self.model.encode_text(tokens)
+            features /= features.norm(dim=-1, keepdim=True)
+        
+        return features
+
+    def _get_unnormalized_dot_products(self, image_features: torch.Tensor, list_text_features: List[torch.Tensor]) -> torch.Tensor:
+        """Compute dot products between image and text features."""
+        text_features = torch.cat(list_text_features, dim=0)
+        text_dot_prods = (100.0 * image_features @ text_features.T)
+        
+        n_prompts = len(list_text_features)
+        n_days = len(list_text_features[0])
+        
+        text_dot_prods = text_dot_prods.view(image_features.shape[0], n_prompts, n_days)
+        text_dot_prods = text_dot_prods.mean(dim=1)
+        
+        return text_dot_prods
+
+    def _find_median_from_top_n(self, text_dot_prods: np.ndarray, n: int) -> int:
+        """Find median index from top N predictions."""
+        tmp = [[i, t] for i, t in enumerate(text_dot_prods)]
+        tmp = sorted(tmp, key=lambda x: x[1], reverse=True)[:n]
+        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],
+        }
+        b0, b1, b2, b3, b4 = params[quartile]
+        return np.exp(b0 + b1*t + b2*t**2 + b3*t**3 + b4*t**4)
+
+    def estimate_gestational_age(self, image: Image.Image, pixel_size: float) -> Dict:
+        """Estimate gestational age from preprocessed fetal brain ultrasound."""
+        if self.model is None:
+            raise RuntimeError("Model not loaded. Call load_model() first.")
+        
+        # Calculate effective pixel spacing
+        pixel_spacing = max(image.size) / INPUT_SIZE * pixel_size
+        
+        # Apply model preprocessing
+        img_tensor = self.preprocess(image).unsqueeze(0).to(self.device)
+        
+        # Inference
+        with torch.no_grad():
+            image_features = self.model.encode_image(img_tensor)
+            image_features /= image_features.norm(dim=-1, keepdim=True)
+            
+            # Get text features for all prompts
+            text_features_list = [
+                self._get_ga_text_features(template, pixel_spacing)
+                for template in GA_TEXT_PROMPTS
+            ]
+            
+            text_dot_prods = self._get_unnormalized_dot_products(image_features, text_features_list)
+        
+        # Compute prediction
+        text_dot_prod = text_dot_prods.detach().cpu().numpy()[0]
+        med_idx = self._find_median_from_top_n(text_dot_prod, TOP_N_PROBS)
+        pred_day = LIST_GA_IN_DAYS[med_idx]
+        
+        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')
+        
+        return {
+            "gestational_age": {
+                "weeks": pred_weeks,
+                "days": pred_days,
+                "total_days": pred_day
+            },
+            "head_circumference": {
+                "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]:
+        """
+        Estimate GA from raw file bytes with automatic preprocessing.
+        
+        Returns:
+            Tuple of (ga_results, preprocessing_info)
+        """
+        # Preprocess based on file type
+        processed_image, preprocessing_info = preprocess_file(file_bytes, filename)
+        
+        # Use pixel spacing from DICOM if available
+        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)
+        
+        return ga_results, preprocessing_info
+
+
+# Singleton instance
+model_service = FetalCLIPService()

backend/app/services/preprocessing.py

@@ -0,0 +1,514 @@
+"""
+Preprocessing module for FetalCLIP.
+
+Supports two pipelines:
+1. DICOM (Full): US region extraction, fan isolation, text removal, denoising
+2. Image (Basic): Square padding, resize
+"""
+
+import cv2
+import copy
+import numpy as np
+from PIL import Image
+from typing import Tuple, Dict, List, Optional
+from io import BytesIO
+
+# Try importing DICOM-specific libraries
+try:
+    from pydicom import dcmread
+    from pydicom.pixel_data_handlers import convert_color_space
+    DICOM_AVAILABLE = True
+except ImportError:
+    DICOM_AVAILABLE = False
+
+try:
+    from skimage.restoration import denoise_nl_means, estimate_sigma
+    SKIMAGE_AVAILABLE = True
+except ImportError:
+    SKIMAGE_AVAILABLE = False
+
+try:
+    import albumentations as A
+    ALBUMENTATIONS_AVAILABLE = True
+except ImportError:
+    ALBUMENTATIONS_AVAILABLE = False
+
+
+# ============================================================================
+# CONSTANTS
+# ============================================================================
+
+TARGET_SIZE = (512, 512)
+INTERPOLATION = cv2.INTER_LANCZOS4
+
+INTENSITY_THRESHOLD = 0
+SMALL_VIEW_MARGIN_CROP_Y = 1
+
+YELLOW_BOX_BACKGROUND_PIXEL = np.array([57, 57, 57])
+MIN_YELLOW_BOX_RECT_AREA = 2_000
+
+MASK_INPAINTING_DILATE_KERNEL = np.ones((9, 9), np.uint8)
+DENOISE_NL_MEANS_PATCH_KW = dict(
+    patch_size=7,
+    patch_distance=6,
+    channel_axis=-1,
+)
+INPAINT_RADIUS = 5
+
+
+# ============================================================================
+# TEXT DETECTION UTILITIES (from utils_husain.py)
+# ============================================================================
+
+def rgb2gray(rgb: np.ndarray) -> np.ndarray:
+    """Convert RGB to grayscale while keeping 3 channels."""
+    r, g, b = rgb[:, :, 0], rgb[:, :, 1], rgb[:, :, 2]
+    gray = 0.299 * r + 0.5870 * g + 0.1140 * b
+    rgb_grey = rgb.copy()
+    rgb_grey[:, :, 0] = gray
+    rgb_grey[:, :, 1] = gray
+    rgb_grey[:, :, 2] = gray
+    return rgb_grey
+
+
+def mask_filter(image: np.ndarray, grey_threshold: int) -> np.ndarray:
+    """Create binary mask for pixels above threshold."""
+    img = image.copy()
+    grey_img = rgb2gray(img)
+    convert = np.zeros((img.shape[0], img.shape[1], 3))
+    idxs = np.where(
+        (grey_img[:, :, 0] > grey_threshold)
+        & (grey_img[:, :, 1] > grey_threshold)
+        & (grey_img[:, :, 2] > grey_threshold)
+    )
+    convert[idxs] = [255, 255, 255]
+    return np.uint8(convert)
+
+
+def maximize_contrast(img_grayscale: np.ndarray) -> np.ndarray:
+    """Enhance contrast using morphological operations."""
+    height, width = img_grayscale.shape
+    structuring_element = cv2.getStructuringElement(cv2.MORPH_RECT, (3, 3))
+    
+    img_top_hat = cv2.morphologyEx(img_grayscale, cv2.MORPH_TOPHAT, structuring_element)
+    img_black_hat = cv2.morphologyEx(img_grayscale, cv2.MORPH_BLACKHAT, structuring_element)
+    
+    img_plus_top_hat = cv2.add(img_grayscale, img_top_hat)
+    result = cv2.subtract(img_plus_top_hat, img_black_hat)
+    
+    return result
+
+
+def detect_white_annotation(img: np.ndarray) -> np.ndarray:
+    """Detect white text/annotations."""
+    img_gray = cv2.cvtColor(img, cv2.COLOR_BGR2GRAY)
+    dif = maximize_contrast(img_gray)
+    dif_rgb = cv2.cvtColor(dif, cv2.COLOR_GRAY2BGR)
+    masked_img = mask_filter(dif_rgb, 254)
+    dilation = cv2.dilate(masked_img, np.ones((3, 3), np.uint8), iterations=1)
+    mask = cv2.cvtColor(dilation, cv2.COLOR_BGR2GRAY)
+    return mask
+
+
+def detect_cyan(img: np.ndarray) -> np.ndarray:
+    """Detect cyan colored text."""
+    image_hsv = cv2.cvtColor(img, cv2.COLOR_BGR2HSV)
+    lowers = np.uint8([85, 150, 20])
+    uppers = np.uint8([95, 255, 255])
+    mask = np.array(cv2.inRange(image_hsv, lowers, uppers))
+    return mask
+
+
+def detect_purple_text(img: np.ndarray) -> np.ndarray:
+    """Detect purple colored text."""
+    image_hsv = cv2.cvtColor(img, cv2.COLOR_RGB2HSV)
+    lowers = np.uint8([110, 100, 50])
+    uppers = np.uint8([130, 255, 255])
+    mask = np.array(cv2.inRange(image_hsv, lowers, uppers))
+    return mask
+
+
+def detect_orange_text(img: np.ndarray) -> np.ndarray:
+    """Detect orange colored text."""
+    image_hsv = cv2.cvtColor(img, cv2.COLOR_RGB2HSV)
+    lowers = np.uint8([12, 150, 100])
+    uppers = np.uint8([27, 255, 255])
+    mask = np.array(cv2.inRange(image_hsv, lowers, uppers))
+    return mask
+
+
+def detect_green_text(img: np.ndarray) -> np.ndarray:
+    """Detect green colored text."""
+    image_hsv = cv2.cvtColor(img, cv2.COLOR_RGB2HSV)
+    lowers = np.uint8([50, 100, 50])
+    uppers = np.uint8([70, 255, 255])
+    mask = np.array(cv2.inRange(image_hsv, lowers, uppers))
+    return mask
+
+
+def detect_annotation(img: np.ndarray) -> np.ndarray:
+    """Detect all text annotations (white, cyan, orange, purple, green)."""
+    d1 = (detect_white_annotation(img) >= 127).astype(np.float32)
+    d2 = (detect_cyan(img) >= 127).astype(np.float32)
+    d3 = (detect_orange_text(img) >= 127).astype(np.float32)
+    d4 = (detect_purple_text(img) >= 127).astype(np.float32)
+    d5 = (detect_green_text(img) >= 127).astype(np.float32)
+
+    inpaint_mask = d1 + d2 + d3 + d4 + d5
+    inpaint_mask = (inpaint_mask > 0).astype(np.uint8) * 255
+
+    inpaint_mask = maximize_contrast(inpaint_mask)
+    blur = cv2.GaussianBlur(inpaint_mask, (5, 5), 0)
+    ret3, th3 = cv2.threshold(blur, 0, 255, cv2.THRESH_BINARY + cv2.THRESH_OTSU)
+    th3 = cv2.bitwise_or(th3, inpaint_mask)
+    return th3
+
+
+# ============================================================================
+# DICOM UTILITIES (from utils_adam.py)
+# ============================================================================
+
+def remove_text_box(im: np.ndarray, box_background_pixel: np.ndarray, min_rect_area: int = 2000) -> np.ndarray:
+    """Remove yellow/gray text boxes from image."""
+    binary = np.all(im == box_background_pixel, axis=-1).astype(np.uint8)
+    binary = binary * 255
+    contours, hierarchy = cv2.findContours(binary, cv2.RETR_EXTERNAL, cv2.CHAIN_APPROX_NONE)
+    
+    if len(contours) == 0:
+        return im
+
+    contour = max(contours, key=cv2.contourArea)
+    x, y, w, h = cv2.boundingRect(contour)
+
+    if w * h >= min_rect_area:
+        im[y:y+h, x:x+w] = 0
+
+    return im
+
+
+def pad_to_square(im: np.ndarray) -> np.ndarray:
+    """Pad image to square using black padding."""
+    if ALBUMENTATIONS_AVAILABLE:
+        target_size = max(im.shape[:2])
+        return A.PadIfNeeded(min_height=target_size, min_width=target_size,
+                             border_mode=0, value=(0, 0, 0))(image=im)["image"]
+    else:
+        # Fallback without albumentations
+        height, width = im.shape[:2]
+        max_side = max(height, width)
+        
+        if len(im.shape) == 3:
+            result = np.zeros((max_side, max_side, im.shape[2]), dtype=im.dtype)
+        else:
+            result = np.zeros((max_side, max_side), dtype=im.dtype)
+        
+        y_offset = (max_side - height) // 2
+        x_offset = (max_side - width) // 2
+        result[y_offset:y_offset+height, x_offset:x_offset+width] = im
+        
+        return result
+
+
+def get_fan_region(im: np.ndarray, threshold: int = 1) -> np.ndarray:
+    """Extract the ultrasound fan/cone region."""
+    imgray = cv2.cvtColor(im, cv2.COLOR_BGR2GRAY)
+    
+    ret, thresh = cv2.threshold(imgray, threshold, 255, 0)
+    contours, hierarchy = cv2.findContours(thresh, cv2.RETR_EXTERNAL, cv2.CHAIN_APPROX_NONE)
+    
+    if len(contours) == 0:
+        return im
+    
+    contour = max(contours, key=cv2.contourArea)
+    
+    # Create mask
+    filled_image = np.zeros_like(im)
+    cv2.drawContours(filled_image, [contour], -1, (255, 255, 255), thickness=cv2.FILLED)
+    
+    # Crop to bounding box
+    x, y, w, h = cv2.boundingRect(contour)
+    cropped_image = im[y:y+h, x:x+w]
+    filled_image = filled_image[y:y+h, x:x+w]
+    
+    # Apply mask
+    masked_image = cv2.bitwise_and(cropped_image, filled_image)
+    
+    return masked_image
+
+
+def get_us_region_from_dcm(us, sv_mc_y: int = 1) -> np.ndarray:
+    """Extract ultrasound region from DICOM using metadata."""
+    # Initialize default coordinates
+    x0_f, x1_f, y0_f, y1_f = None, None, None, None
+    x0, x1, y0, y1 = 0, us.pixel_array.shape[1], 0, us.pixel_array.shape[0]
+
+    # Check for ultrasound regions metadata
+    if hasattr(us, 'SequenceOfUltrasoundRegions') and len(us.SequenceOfUltrasoundRegions) > 0:
+        regions = us.SequenceOfUltrasoundRegions
+        
+        if len(regions) == 2 and int(regions[0].RegionDataType) == 1 and int(regions[1].RegionDataType) == 1:
+            # Image with small view (picture-in-picture)
+            x0_f = np.min([regions[0].RegionLocationMinX0, regions[1].RegionLocationMinX0])
+            x1_f = np.max([regions[0].RegionLocationMinX0, regions[1].RegionLocationMinX0])
+            y0_f = np.max([regions[0].RegionLocationMinY0, regions[1].RegionLocationMinY0])
+            y1_f = np.max([regions[0].RegionLocationMaxY1, regions[1].RegionLocationMaxY1])
+            
+            x0 = min(regions[0].RegionLocationMinX0, regions[1].RegionLocationMinX0)
+            x1 = max(regions[0].RegionLocationMaxX1, regions[1].RegionLocationMaxX1)
+            y0 = min(regions[0].RegionLocationMinY0, regions[1].RegionLocationMinY0)
+            y1 = max(regions[0].RegionLocationMaxY1, regions[1].RegionLocationMaxY1)
+
+        elif len(regions) >= 1 and int(regions[0].RegionDataType) == 1:
+            x0 = regions[0].RegionLocationMinX0
+            x1 = regions[0].RegionLocationMaxX1
+            y0 = regions[0].RegionLocationMinY0
+            y1 = regions[0].RegionLocationMaxY1
+
+    ds = copy.deepcopy(us.pixel_array)
+    
+    # Handle color space conversion
+    if hasattr(us, 'PhotometricInterpretation'):
+        if 'ybr_full' in us.PhotometricInterpretation.lower():
+            ds = convert_color_space(ds, "YBR_FULL", "RGB", per_frame=True)
+
+    # Remove small view if present
+    if x0_f is not None:
+        ds[y0_f - sv_mc_y:y1_f, x0_f:x1_f, :] = 0
+
+    # Crop to ultrasound region
+    ds = ds[y0:y1, x0:x1, :]
+
+    return ds
+
+
+# ============================================================================
+# MAIN PREPROCESSING FUNCTIONS
+# ============================================================================
+
+def preprocess_dicom(file_bytes: bytes) -> Tuple[Image.Image, Dict]:
+    """
+    Full DICOM preprocessing pipeline.
+    
+    Steps:
+    1. Parse DICOM file
+    2. Extract ultrasound region from metadata
+    3. Remove yellow text boxes
+    4. Extract fan/cone region
+    5. Detect text annotations
+    6. Inpaint to remove text
+    7. Denoise using non-local means
+    8. Pad to square
+    9. Resize to target size
+    
+    Returns:
+        Tuple of (PIL Image, metadata dict)
+    """
+    if not DICOM_AVAILABLE:
+        raise RuntimeError("pydicom not installed. Install with: pip install pydicom")
+    
+    # Parse DICOM
+    us = dcmread(BytesIO(file_bytes))
+    
+    # Extract ultrasound region
+    ds = get_us_region_from_dcm(us, sv_mc_y=SMALL_VIEW_MARGIN_CROP_Y)
+    
+    # Remove text box
+    img = remove_text_box(ds.copy(), box_background_pixel=YELLOW_BOX_BACKGROUND_PIXEL, 
+                          min_rect_area=MIN_YELLOW_BOX_RECT_AREA)
+    
+    # Extract fan region
+    fan = get_fan_region(img, threshold=INTENSITY_THRESHOLD)
+    
+    # Detect annotations
+    image_grey = fan.copy()
+    mask_inpaint = detect_annotation(fan)
+    mask_inpaint = cv2.dilate(mask_inpaint, MASK_INPAINTING_DILATE_KERNEL)
+    
+    # Inpaint to remove text
+    dst = cv2.inpaint(image_grey, mask_inpaint, INPAINT_RADIUS, cv2.INPAINT_TELEA)
+    dst = dst / np.max(dst) if np.max(dst) > 0 else dst
+    
+    # Denoise
+    if SKIMAGE_AVAILABLE:
+        sigma = estimate_sigma(dst, channel_axis=-1, average_sigmas=True)
+        median = denoise_nl_means(dst, h=0.8 * sigma, fast_mode=True, **DENOISE_NL_MEANS_PATCH_KW)
+        median = np.clip(median * 255, 0, 255).astype(np.uint8)
+    else:
+        median = np.clip(dst * 255, 0, 255).astype(np.uint8)
+    
+    # Pad to square
+    img = pad_to_square(median)
+    
+    # Resize
+    img = cv2.resize(img, TARGET_SIZE, interpolation=INTERPOLATION)
+    
+    # Extract metadata
+    try:
+        rows = getattr(us, 'Rows', fan.shape[0])
+        columns = getattr(us, 'Columns', fan.shape[1])
+        
+        if hasattr(us, 'PixelSpacing') and us.PixelSpacing is not None:
+            orig_pixel_spacing = [float(sp) for sp in us.PixelSpacing]
+        else:
+            orig_pixel_spacing = [1.0, 1.0]
+    except Exception:
+        rows = fan.shape[0]
+        columns = fan.shape[1]
+        orig_pixel_spacing = [1.0, 1.0]
+    
+    metadata = {
+        '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,
+    }
+    
+    # Convert to PIL
+    if len(img.shape) == 2:
+        img_rgb = cv2.cvtColor(img, cv2.COLOR_GRAY2RGB)
+    else:
+        img_rgb = cv2.cvtColor(img, cv2.COLOR_BGR2RGB)
+    
+    img_pil = Image.fromarray(img_rgb)
+    
+    steps_applied = [
+        "dicom_parsing",
+        "us_region_extraction",
+        "text_box_removal",
+        "fan_extraction",
+        "annotation_detection",
+        "inpainting",
+        "denoising" if SKIMAGE_AVAILABLE else "normalization",
+        "square_padding",
+        "resize_512"
+    ]
+    
+    return img_pil, {
+        "type": "dicom",
+        "pipeline": "full",
+        "steps_applied": steps_applied,
+        "metadata": metadata
+    }
+
+
+def preprocess_image(image: Image.Image) -> Tuple[Image.Image, Dict]:
+    """
+    Basic image preprocessing pipeline.
+    
+    Steps:
+    1. Convert to RGB if needed
+    2. Pad to square
+    3. (Model will resize to 224)
+    
+    Returns:
+        Tuple of (PIL Image, preprocessing info dict)
+    """
+    # Convert to RGB
+    if image.mode not in ('RGB', 'L'):
+        image = image.convert('RGB')
+    
+    width, height = image.size
+    max_side = max(width, height)
+    
+    # Create square image with black padding
+    padding_color = (0, 0, 0) if image.mode == "RGB" else 0
+    new_image = Image.new(image.mode, (max_side, max_side), padding_color)
+    
+    # Center the original
+    padding_left = (max_side - width) // 2
+    padding_top = (max_side - height) // 2
+    new_image.paste(image, (padding_left, padding_top))
+    
+    # Ensure RGB
+    if new_image.mode == 'L':
+        new_image = new_image.convert('RGB')
+    
+    steps_applied = [
+        "rgb_conversion",
+        "square_padding",
+    ]
+    
+    return new_image, {
+        "type": "image",
+        "pipeline": "basic",
+        "steps_applied": steps_applied,
+        "metadata": {
+            "original_size": (height, width),
+            "processed_size": (max_side, max_side),
+        }
+    }
+
+
+def is_dicom_file(file_bytes: bytes, filename: str) -> bool:
+    """Check if file is a DICOM file."""
+    # Check by extension
+    lower_name = filename.lower()
+    if lower_name.endswith('.dcm') or lower_name.endswith('.dicom'):
+        return True
+    
+    # Check DICOM magic number (DICM at offset 128)
+    if len(file_bytes) > 132:
+        if file_bytes[128:132] == b'DICM':
+            return True
+    
+    return False
+
+
+def image_to_base64(image: Image.Image) -> str:
+    """Convert PIL Image to base64 string."""
+    buffered = BytesIO()
+    image.save(buffered, format="PNG")
+    import base64
+    return base64.b64encode(buffered.getvalue()).decode('utf-8')
+
+
+def get_dicom_preview(file_bytes: bytes) -> str:
+    """Extract raw image from DICOM for preview (no preprocessing)."""
+    if not DICOM_AVAILABLE:
+        raise RuntimeError("pydicom not installed")
+    
+    us = dcmread(BytesIO(file_bytes))
+    ds = us.pixel_array
+    
+    # Handle color space
+    if hasattr(us, 'PhotometricInterpretation'):
+        if 'ybr_full' in us.PhotometricInterpretation.lower():
+            ds = convert_color_space(ds, "YBR_FULL", "RGB", per_frame=True)
+    
+    # Handle video (take first frame)
+    if len(ds.shape) == 4:
+        ds = ds[0]
+    
+    # Normalize to 0-255
+    if ds.max() > 255:
+        ds = ((ds - ds.min()) / (ds.max() - ds.min()) * 255).astype(np.uint8)
+    
+    # Convert to RGB if grayscale
+    if len(ds.shape) == 2:
+        ds = cv2.cvtColor(ds, cv2.COLOR_GRAY2RGB)
+    elif ds.shape[2] == 3:
+        ds = cv2.cvtColor(ds, cv2.COLOR_BGR2RGB)
+    
+    img_pil = Image.fromarray(ds)
+    return image_to_base64(img_pil)
+
+
+def preprocess_file(file_bytes: bytes, filename: str) -> Tuple[Image.Image, Dict]:
+    """
+    Automatically detect file type and apply appropriate preprocessing.
+    
+    Returns:
+        Tuple of (PIL Image, preprocessing info dict with base64 image)
+    """
+    if is_dicom_file(file_bytes, filename):
+        processed_image, info = preprocess_dicom(file_bytes)
+        # Add base64 encoded image for frontend display
+        info["processed_image_base64"] = image_to_base64(processed_image)
+        return processed_image, info
+    else:
+        # Regular image
+        image = Image.open(BytesIO(file_bytes))
+        processed_image, info = preprocess_image(image)
+        info["processed_image_base64"] = image_to_base64(processed_image)
+        return processed_image, info

backend/requirements.txt

@@ -0,0 +1,22 @@
+# Core
+fastapi>=0.104.0
+uvicorn[standard]>=0.24.0
+python-multipart>=0.0.6
+
+# ML & Deep Learning
+torch>=2.0.0
+open-clip-torch>=2.24.0
+huggingface-hub>=0.19.0
+
+# Image Processing
+Pillow>=10.0.0
+numpy>=1.24.0
+opencv-python>=4.8.0
+scikit-image>=0.21.0
+albumentations>=1.3.0
+
+# DICOM
+pydicom>=2.4.0
+
+# Utilities
+pydantic>=2.0.0

examples/ga_notes.txt

@@ -1,6 +0,0 @@
-       filename  pixel size(mm)  head circumference (mm)
-431  351_HC.png        0.144119                   172.10
-759  615_HC.png        0.111789                   178.15
-411  333_HC.png        0.106052                   166.40
-474  385_HC.png        0.133191                   171.12
-722  584_HC.png        0.202031                   185.60

frontend/index.html

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>FetalCLIP - Fetal Ultrasound Analysis</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
+

frontend/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "fetalclip-frontend",
+  "private": true,
+  "version": "1.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview",
+    "tauri": "tauri"
+  },
+  "dependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-dropzone": "^14.2.3",
+    "lucide-react": "^0.309.0",
+    "clsx": "^2.1.0",
+    "tailwind-merge": "^2.2.0"
+  },
+  "devDependencies": {
+    "@tauri-apps/cli": "^1.5.0",
+    "@types/react": "^18.2.43",
+    "@types/react-dom": "^18.2.17",
+    "@vitejs/plugin-react": "^4.2.1",
+    "autoprefixer": "^10.4.16",
+    "postcss": "^8.4.33",
+    "tailwindcss": "^3.4.1",
+    "typescript": "^5.3.3",
+    "vite": "^5.0.10"
+  }
+}
+

frontend/postcss.config.js

@@ -0,0 +1,7 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
+

frontend/src/App.tsx

@@ -0,0 +1,69 @@
+import { useState, useEffect } 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';
+
+const tabs = [
+  { id: 'classification', label: 'View Classification', icon: <Scan className="w-4 h-4" /> },
+  { id: 'gestational-age', label: 'Gestational Age', icon: <Calendar className="w-4 h-4" /> },
+];
+
+function App() {
+  const [activeTab, setActiveTab] = useState('classification');
+  const [isConnected, setIsConnected] = useState(false);
+
+  useEffect(() => {
+    const checkConnection = async () => {
+      const healthy = await checkHealth();
+      setIsConnected(healthy);
+    };
+
+    checkConnection();
+    const interval = setInterval(checkConnection, 10000);
+    return () => clearInterval(interval);
+  }, []);
+
+  return (
+    <div className="h-screen flex flex-col bg-dark-bg overflow-hidden">
+      {/* Header - fixed height */}
+      <Header isConnected={isConnected} />
+      
+      {/* 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 === 'gestational-age' && <GestationalAgePage />}
+      </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="#"
+              className="text-accent-blue hover:text-accent-blue-hover transition-colors font-medium"
+            >
+              📄 Paper
+            </a>
+          </div>
+        </div>
+      </footer>
+    </div>
+  );
+}
+
+export default App;

frontend/src/components/Button.tsx

@@ -0,0 +1,46 @@
+import { cn } from '../lib/utils';
+import { Loader2 } from 'lucide-react';
+
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: 'primary' | 'secondary';
+  isLoading?: boolean;
+  icon?: React.ReactNode;
+}
+
+export function Button({
+  children,
+  variant = 'primary',
+  isLoading = false,
+  icon,
+  className,
+  disabled,
+  ...props
+}: ButtonProps) {
+  return (
+    <button
+      className={cn(
+        'flex items-center justify-center gap-2 px-6 py-3 rounded-lg font-semibold text-sm transition-all duration-200',
+        'disabled:opacity-50 disabled:cursor-not-allowed shadow-card',
+        variant === 'primary' && [
+          'bg-nvidia-green text-white',
+          'hover:bg-nvidia-green-hover hover:-translate-y-0.5 hover:shadow-card-hover',
+          'active:translate-y-0',
+        ],
+        variant === 'secondary' && [
+          'bg-white text-nvidia-green border-2 border-nvidia-green',
+          'hover:bg-nvidia-green/5',
+        ],
+        className
+      )}
+      disabled={disabled || isLoading}
+      {...props}
+    >
+      {isLoading ? (
+        <Loader2 className="w-4 h-4 animate-spin" />
+      ) : (
+        icon
+      )}
+      {children}
+    </button>
+  );
+}

frontend/src/components/FileUpload.tsx

@@ -0,0 +1,106 @@
+import { useCallback } from 'react';
+import { useDropzone } from 'react-dropzone';
+import { Upload, FileImage, FileText, Loader2 } from 'lucide-react';
+import { cn } from '../lib/utils';
+import { isDicomFile } from '../lib/api';
+
+interface FileUploadProps {
+  onUpload: (file: File) => void;
+  preview: string | null;
+  currentFile: File | null;
+  isLoading?: boolean;
+}
+
+export function FileUpload({ onUpload, preview, currentFile, isLoading = false }: FileUploadProps) {
+  const onDrop = useCallback(
+    (acceptedFiles: File[]) => {
+      if (acceptedFiles.length > 0) {
+        onUpload(acceptedFiles[0]);
+      }
+    },
+    [onUpload]
+  );
+
+  const { getRootProps, getInputProps, isDragActive } = useDropzone({
+    onDrop,
+    accept: {
+      'image/*': ['.png', '.jpg', '.jpeg', '.gif', '.bmp', '.webp'],
+      'application/dicom': ['.dcm', '.dicom'],
+      'application/octet-stream': ['.dcm', '.dicom'],
+    },
+    maxFiles: 1,
+  });
+
+  const isDicom = currentFile ? isDicomFile(currentFile.name) : false;
+
+  return (
+    <div className="h-full w-full flex flex-col">
+      <div
+        {...getRootProps()}
+        className={cn(
+          'flex-1 relative border-2 border-dashed rounded-xl transition-all duration-200 cursor-pointer overflow-hidden',
+          'hover:border-nvidia-green hover:bg-nvidia-green/5',
+          isDragActive
+            ? 'border-nvidia-green bg-nvidia-green/10'
+            : 'border-dark-border bg-dark-input'
+        )}
+      >
+        <input {...getInputProps()} />
+        
+        {isLoading ? (
+          // Loading state for DICOM preview
+          <div className="absolute inset-0 flex flex-col items-center justify-center gap-3 bg-slate-900">
+            <Loader2 className="w-8 h-8 text-nvidia-green animate-spin" />
+            <p className="text-white text-sm">Loading DICOM preview...</p>
+          </div>
+        ) : preview ? (
+          // Show preview image - dark background for medical images
+          <div className="absolute inset-0 flex items-center justify-center bg-slate-900 rounded-lg">
+            <img
+              src={preview}
+              alt="Preview"
+              className="max-w-full max-h-full w-full h-full object-contain"
+            />
+            <div className="absolute inset-0 bg-black/60 opacity-0 hover:opacity-100 transition-opacity flex items-center justify-center rounded-lg">
+              <p className="text-white text-sm font-medium">Click or drop to replace</p>
+            </div>
+            {/* File type badge */}
+            <div className={cn(
+              'absolute top-3 right-3 px-2.5 py-1 rounded-full text-xs font-semibold shadow-lg',
+              isDicom ? 'bg-nvidia-green text-white' : 'bg-accent-blue text-white'
+            )}>
+              {isDicom ? 'DICOM' : 'IMAGE'}
+            </div>
+          </div>
+        ) : (
+          // Empty state / upload prompt
+          <div className="absolute inset-0 flex flex-col items-center justify-center gap-4 p-4">
+            <div className="p-4 rounded-full bg-white border border-dark-border shadow-card">
+              <Upload className="w-8 h-8 text-text-muted" />
+            </div>
+            <div className="text-center">
+              <p className="text-text-primary font-medium text-sm mb-1">
+                {isDragActive ? 'Drop file here' : 'Drop or click to upload'}
+              </p>
+              <p className="text-text-muted text-xs">
+                Supports DICOM and image files
+              </p>
+            </div>
+            {/* Format hints */}
+            <div className="flex gap-3 mt-2">
+              <div className="flex items-center gap-1.5 px-3 py-1.5 rounded-full bg-nvidia-green/10 border border-nvidia-green/30">
+                <FileText className="w-3.5 h-3.5 text-nvidia-green" />
+                <span className="text-xs font-medium text-nvidia-green">DICOM</span>
+                <span className="text-[10px] px-1.5 py-0.5 rounded-full bg-nvidia-green text-white">Best</span>
+              </div>
+              <div className="flex items-center gap-1.5 px-3 py-1.5 rounded-full bg-accent-blue/10 border border-accent-blue/30">
+                <FileImage className="w-3.5 h-3.5 text-accent-blue" />
+                <span className="text-xs font-medium text-accent-blue">PNG/JPEG</span>
+              </div>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

frontend/src/components/GAResultsCard.tsx

@@ -0,0 +1,83 @@
+import type { GestationalAgeResponse } from '../lib/api';
+
+interface GAResultsCardProps {
+  results: GestationalAgeResponse | null;
+  isLoading: boolean;
+}
+
+export function GAResultsCard({ results, isLoading }: GAResultsCardProps) {
+  if (isLoading) {
+    return (
+      <div className="space-y-3 animate-pulse">
+        <div className="bg-white border border-dark-border rounded-xl p-4 shadow-card">
+          <div className="h-3 w-24 bg-dark-input rounded mb-2" />
+          <div className="h-8 w-40 bg-dark-input rounded" />
+        </div>
+        <div className="bg-white border border-dark-border rounded-xl p-4 shadow-card">
+          <div className="h-3 w-40 bg-dark-input rounded mb-3" />
+          <div className="grid grid-cols-3 gap-2">
+            {[...Array(3)].map((_, i) => (
+              <div key={i} className="h-16 bg-dark-input rounded-lg" />
+            ))}
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  if (!results) {
+    return (
+      <div className="bg-white border border-dark-border rounded-xl p-8 text-center shadow-card">
+        <p className="text-text-muted text-sm">
+          Upload a fetal brain ultrasound and click "Estimate Age"
+        </p>
+      </div>
+    );
+  }
+
+  const { gestational_age, head_circumference } = results;
+
+  return (
+    <div className="space-y-3 animate-fade-in">
+      {/* Gestational Age */}
+      <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">
+        <p className="text-[10px] uppercase tracking-wider text-text-muted mb-1">
+          Gestational Age
+        </p>
+        <div className="text-2xl font-bold text-nvidia-green">
+          {gestational_age.weeks} weeks, {gestational_age.days} days
+        </div>
+        <p className="text-text-muted text-xs mt-1">
+          Total: {gestational_age.total_days} days
+        </p>
+      </div>
+
+      {/* Head Circumference Percentiles */}
+      <div className="bg-white border border-dark-border rounded-xl p-4 shadow-card">
+        <p className="text-[10px] uppercase tracking-wider text-text-muted mb-3">
+          Head Circumference Percentiles
+        </p>
+        <div className="grid grid-cols-3 gap-3">
+          <div className="bg-dark-input rounded-xl p-3 text-center">
+            <p className="text-[10px] text-text-muted mb-1">2.5th</p>
+            <p className="text-base font-semibold text-text-primary">
+              {head_circumference.p2_5} mm
+            </p>
+          </div>
+          <div className="bg-nvidia-green/10 rounded-xl p-3 text-center border-2 border-nvidia-green">
+            <p className="text-[10px] text-nvidia-green mb-1 font-medium">50th</p>
+            <p className="text-base font-bold text-nvidia-green">
+              {head_circumference.p50} mm
+            </p>
+          </div>
+          <div className="bg-dark-input rounded-xl p-3 text-center">
+            <p className="text-[10px] text-text-muted mb-1">97.5th</p>
+            <p className="text-base font-semibold text-text-primary">
+              {head_circumference.p97_5} mm
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/src/components/Header.tsx

@@ -0,0 +1,50 @@
+import { Zap } from 'lucide-react';
+
+interface HeaderProps {
+  isConnected: boolean;
+}
+
+export function Header({ isConnected }: HeaderProps) {
+  return (
+    <header className="bg-white border-b border-dark-border px-8 py-4 shadow-sm">
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-3">
+          <div className="p-2 rounded-lg bg-nvidia-green/10 border border-nvidia-green/20">
+            <Zap className="w-5 h-5 text-nvidia-green" />
+          </div>
+          <div>
+            <h1 className="text-xl font-semibold text-text-primary tracking-tight">
+              Fetal<span className="text-nvidia-green">CLIP</span>
+            </h1>
+            <p className="text-text-muted text-xs">
+              Foundation model for zero-shot fetal ultrasound analysis
+            </p>
+          </div>
+        </div>
+        <div className="flex items-center gap-5">
+          <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 ${
+                isConnected 
+                  ? 'bg-nvidia-green shadow-[0_0_8px_rgba(118,185,0,0.5)]' 
+                  : 'bg-red-500 animate-pulse'
+              }`}
+            />
+            <span className="text-xs text-text-secondary">
+              {isConnected ? 'Model Ready' : 'Connecting...'}
+            </span>
+          </div>
+          <a
+            href="https://huggingface.co/numansaeed/fetalclip-model"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="flex items-center gap-1.5 text-sm text-accent-blue hover:text-accent-blue-hover transition-colors"
+          >
+            <span>🤗</span>
+            <span>Model Hub</span>
+          </a>
+        </div>
+      </div>
+    </header>
+  );
+}

frontend/src/components/ImageUpload.tsx

@@ -0,0 +1,77 @@
+import { useCallback } from 'react';
+import { useDropzone } from 'react-dropzone';
+import { Upload, Image as ImageIcon } from 'lucide-react';
+import { cn } from '../lib/utils';
+
+interface ImageUploadProps {
+  onUpload: (file: File) => void;
+  preview: string | null;
+  label: string;
+  description: string;
+}
+
+export function ImageUpload({ onUpload, preview, label, description }: ImageUploadProps) {
+  const onDrop = useCallback(
+    (acceptedFiles: File[]) => {
+      if (acceptedFiles.length > 0) {
+        onUpload(acceptedFiles[0]);
+      }
+    },
+    [onUpload]
+  );
+
+  const { getRootProps, getInputProps, isDragActive } = useDropzone({
+    onDrop,
+    accept: {
+      'image/*': ['.png', '.jpg', '.jpeg', '.gif', '.bmp', '.webp'],
+    },
+    maxFiles: 1,
+  });
+
+  return (
+    <div className="h-full flex flex-col gap-1">
+      <label className="flex-shrink-0 text-xs font-medium text-white flex items-center gap-2">
+        <ImageIcon className="w-3 h-3 text-text-secondary" />
+        {label}
+      </label>
+      <div
+        {...getRootProps()}
+        className={cn(
+          'flex-1 relative border-2 border-dashed rounded-lg transition-all duration-200 cursor-pointer',
+          'hover:border-nvidia-green hover:bg-nvidia-green/5',
+          isDragActive
+            ? 'border-nvidia-green bg-nvidia-green/10'
+            : 'border-dark-border bg-dark-input',
+          preview ? 'p-1' : 'p-4'
+        )}
+      >
+        <input {...getInputProps()} />
+        
+        {preview ? (
+          <div className="relative w-full h-full overflow-hidden rounded">
+            <img
+              src={preview}
+              alt="Uploaded preview"
+              className="w-full h-full object-contain bg-black"
+            />
+            <div className="absolute inset-0 bg-black/50 opacity-0 hover:opacity-100 transition-opacity flex items-center justify-center">
+              <p className="text-white text-sm">Click or drop to replace</p>
+            </div>
+          </div>
+        ) : (
+          <div className="h-full flex flex-col items-center justify-center gap-3">
+            <div className="p-3 rounded-full bg-dark-card">
+              <Upload className="w-6 h-6 text-text-muted" />
+            </div>
+            <div className="text-center">
+              <p className="text-white font-medium text-sm">
+                {isDragActive ? 'Drop image here' : 'Drop or click to upload'}
+              </p>
+              <p className="text-text-muted text-xs mt-1">{description}</p>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

frontend/src/components/NumberInput.tsx

@@ -0,0 +1,50 @@
+interface NumberInputProps {
+  label: string;
+  value: number;
+  onChange: (value: number) => void;
+  min?: number;
+  max?: number;
+  step?: number;
+  info?: string;
+  unit?: string;
+  compact?: boolean;
+}
+
+export function NumberInput({
+  label,
+  value,
+  onChange,
+  min,
+  max,
+  step = 0.01,
+  info,
+  unit,
+  compact = false,
+}: NumberInputProps) {
+  return (
+    <div className="space-y-1.5">
+      <label className={`font-semibold text-text-primary ${compact ? 'text-xs' : 'text-sm'}`}>{label}</label>
+      {info && <p className={`text-text-muted ${compact ? 'text-[10px]' : 'text-xs'}`}>{info}</p>}
+      <div className="relative">
+        <input
+          type="number"
+          value={value}
+          onChange={(e) => onChange(Number(e.target.value))}
+          min={min}
+          max={max}
+          step={step}
+          className={`w-full bg-white border border-dark-border rounded-lg text-text-primary focus:border-nvidia-green focus:outline-none focus:ring-2 focus:ring-nvidia-green/20 transition-all ${
+            compact ? 'px-3 py-2 text-sm' : 'px-4 py-3 text-base'
+          }`}
+        />
+        {unit && (
+          <span className={`absolute right-3 top-1/2 -translate-y-1/2 text-text-muted ${
+            compact ? 'text-xs' : 'text-sm'
+          }`}>
+            {unit}
+          </span>
+        )}
+      </div>
+    </div>
+  );
+}

frontend/src/components/Panel.tsx

@@ -0,0 +1,20 @@
+import { cn } from '../lib/utils';
+
+interface PanelProps {
+  title: string;
+  action?: React.ReactNode;
+  children: React.ReactNode;
+  className?: string;
+}
+
+export function Panel({ title, action, children, className }: PanelProps) {
+  return (
+    <div className={cn('flex flex-col', className)}>
+      <div className="flex-shrink-0 flex items-center justify-between px-4 py-2.5 border-b border-dark-border bg-white">
+        <h2 className="text-sm font-semibold text-text-primary">{title}</h2>
+        {action}
+      </div>
+      <div className="flex-1 p-3 overflow-hidden">{children}</div>
+    </div>
+  );
+}

frontend/src/components/PreprocessingBadge.tsx

@@ -0,0 +1,125 @@
+import { CheckCircle, AlertCircle, Info } from 'lucide-react';
+import { useState } from 'react';
+import type { PreprocessingInfo } from '../lib/api';
+
+interface PreprocessingBadgeProps {
+  info: PreprocessingInfo | null;
+  fileType?: 'dicom' | 'image' | null;
+  compact?: boolean;
+}
+
+const STEP_LABELS: Record<string, string> = {
+  dicom_parsing: 'DICOM Parsing',
+  us_region_extraction: 'US Region Extraction',
+  text_box_removal: 'Text Box Removal',
+  fan_extraction: 'Fan Extraction',
+  annotation_detection: 'Annotation Detection',
+  inpainting: 'Inpainting',
+  denoising: 'Denoising',
+  normalization: 'Normalization',
+  square_padding: 'Square Padding',
+  resize_512: 'Resize to 512×512',
+  rgb_conversion: 'RGB Conversion',
+};
+
+export function PreprocessingBadge({ info, fileType, compact = false }: PreprocessingBadgeProps) {
+  const [expanded, setExpanded] = useState(false);
+
+  // Show pending state when file is selected but not yet processed
+  if (!info && fileType) {
+    const isDicom = fileType === 'dicom';
+    return (
+      <div className={`rounded-xl border shadow-card ${isDicom ? 'border-nvidia-green/30 bg-nvidia-green/5' : 'border-accent-blue/30 bg-accent-blue/5'} ${compact ? 'px-3 py-2' : 'px-4 py-3'}`}>
+        <div className="flex items-center gap-2">
+          <div className={`w-2 h-2 rounded-full ${isDicom ? 'bg-nvidia-green' : 'bg-accent-blue'}`} />
+          <span className={`font-semibold ${isDicom ? 'text-nvidia-green' : 'text-accent-blue'} ${compact ? 'text-xs' : 'text-sm'}`}>
+            {isDicom ? 'DICOM' : 'PNG/JPEG'}
+          </span>
+          <span className={`text-text-secondary ${compact ? 'text-xs' : 'text-sm'}`}>
+            • {isDicom ? 'Full Pipeline' : 'Basic Pipeline'}
+          </span>
+        </div>
+        {!compact && (
+          <p className="text-xs text-text-muted mt-1">
+            {isDicom 
+              ? 'Will apply: Fan extraction, text removal, denoising'
+              : 'Will apply: Square padding only. For best accuracy, use DICOM files.'
+            }
+          </p>
+        )}
+      </div>
+    );
+  }
+
+  if (!info) return null;
+
+  const isDicom = info.type === 'dicom';
+  const isFull = info.pipeline === 'full';
+
+  return (
+    <div className={`rounded-xl border shadow-card ${isFull ? 'border-nvidia-green/30 bg-nvidia-green/5' : 'border-amber-500/30 bg-amber-500/5'} ${compact ? 'px-3 py-2' : 'px-4 py-3'}`}>
+      {/* Header */}
+      <button 
+        onClick={() => setExpanded(!expanded)}
+        className="w-full flex items-center justify-between"
+      >
+        <div className="flex items-center gap-2">
+          <div className={`w-2 h-2 rounded-full ${isFull ? 'bg-nvidia-green' : 'bg-amber-500'}`} />
+          <span className={`font-semibold ${isFull ? 'text-nvidia-green' : 'text-amber-600'} ${compact ? 'text-xs' : 'text-sm'}`}>
+            {isDicom ? 'DICOM' : 'PNG/JPEG'}
+          </span>
+          <span className={`text-text-secondary ${compact ? 'text-xs' : 'text-sm'}`}>
+            • {isFull ? 'Full Pipeline' : 'Basic Pipeline'}
+          </span>
+        </div>
+        <Info className={`text-text-muted ${compact ? 'w-3 h-3' : 'w-4 h-4'}`} />
+      </button>
+
+      {/* Expanded Details */}
+      {expanded && (
+        <div className="mt-3 pt-3 border-t border-dark-border">
+          <p className="text-xs text-text-muted mb-2 font-medium">Steps Applied:</p>
+          <div className="space-y-1.5">
+            {info.steps_applied.map((step) => (
+              <div key={step} className="flex items-center gap-2">
+                <CheckCircle className="w-3.5 h-3.5 text-nvidia-green" />
+                <span className="text-xs text-text-primary">
+                  {STEP_LABELS[step] || step}
+                </span>
+              </div>
+            ))}
+          </div>
+
+          {/* Missing steps for basic pipeline */}
+          {!isFull && (
+            <div className="mt-3 pt-3 border-t border-dark-border">
+              <p className="text-xs text-text-muted mb-2 font-medium">Not Applied:</p>
+              <div className="space-y-1.5">
+                {['fan_extraction', 'annotation_detection', 'inpainting', 'denoising'].map((step) => (
+                  <div key={step} className="flex items-center gap-2">
+                    <AlertCircle className="w-3.5 h-3.5 text-amber-500" />
+                    <span className="text-xs text-text-muted">
+                      {STEP_LABELS[step] || step}
+                    </span>
+                  </div>
+                ))}
+              </div>
+              <p className="text-xs text-amber-600 mt-2 font-medium">
+                ⚠️ For best accuracy, use DICOM files from the ultrasound machine.
+              </p>
+            </div>
+          )}
+
+          {/* Metadata */}
+          {info.metadata.pixel_spacing && (
+            <div className="mt-3 pt-3 border-t border-dark-border">
+              <p className="text-xs text-text-muted">
+                Pixel Spacing: <span className="text-text-primary font-medium">{info.metadata.pixel_spacing.toFixed(3)} mm/px</span>
+              </p>
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}