Deploy BioStack RLHF Medical Demo

.do/app.yaml

@@ -0,0 +1,40 @@
+name: biostack-rlhf-demo
+services:
+- name: api
+  source_dir: /
+  github:
+    repo: AE-Shree/Biostack  # Your GitHub repo
+    branch: main
+    deploy_on_push: true
+  run_command: python server.py
+  instance_count: 1
+  instance_size_slug: professional-xs
+  envs:
+  - key: HUGGINGFACE_TOKEN
+    type: SECRET  # Set this in DigitalOcean dashboard
+  health_check:
+    http_path: /health
+  cors:
+    allow_origins:
+      - '*'
+    allow_methods:
+      - GET
+      - POST
+      - PUT
+      - DELETE
+      - OPTIONS
+    allow_headers:
+      - '*'
+
+- name: frontend
+  source_dir: /
+  github:
+    repo: AE-Shree/Biostack  # Your GitHub repo
+    branch: main
+    deploy_on_push: true
+  build_command: npm install && npm run build
+  static_site_generator:
+    github_actions:
+      build_command: npm install && npm run build
+      output_dir: build
+  catchall_document: index.html

.gitignore

@@ -0,0 +1,25 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+models/

Dockerfile

@@ -0,0 +1,30 @@
+FROM python:3.11-slim
+
+# Install Node.js for building React app
+RUN apt-get update && apt-get install -y \
+    nodejs \
+    npm \
+    && rm -rf /var/lib/apt/lists/*
+
+# Set working directory
+WORKDIR /app
+
+# Copy requirements first for better caching
+COPY requirements.txt .
+RUN pip install --no-cache-dir -r requirements.txt
+
+# Copy package files and install dependencies
+COPY package*.json ./
+RUN npm install
+
+# Copy all files
+COPY . .
+
+# Build React app
+RUN npm run build
+
+# Expose port
+EXPOSE 7860
+
+# Run both frontend and backend
+CMD ["python", "server.py"]

README.md

@@ -1,11 +1,64 @@
 ---
-title: BioStack
-emoji: 👁
+title: BioStack - RLHF Medical Report Generation
+emoji: 🩻
 colorFrom: blue
 colorTo: indigo
 sdk: docker
-pinned: false
-license: mit
+app_port: 7860
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# BioStack - RLHF Medical Report Generation
+
+AI-powered medical report generation using Reinforcement Learning from Human Feedback (RLHF).
+
+## Features
+- **SFT Model**: Supervised Fine-Tuning for initial report generation
+- **Reward Model**: Quality assessment of generated reports
+- **PPO Model**: Policy optimization for improved outputs
+- **Modern UI**: Clean React interface with drag-and-drop upload
+
+## Models Used
+- **SFT Model**: `best_model.pt` - Initial report generation
+- **Reward Model**: `reward_model.pt` - Quality scoring
+- **PPO Model**: `rlhf_model.pt` - Optimized generation
+
+All models are automatically downloaded from Hugging Face Hub on first startup.
+
+## Usage
+1. Upload a medical X-ray image
+2. Optionally provide ground truth text for comparison
+3. Click "Run Inference" to generate reports
+4. View results from all three models with quality scores
+
+## Technology Stack
+- **Frontend**: React.js
+- **Backend**: FastAPI (Python)
+- **ML Framework**: PyTorch, Transformers
+- **Models**: T5, CoAtNet, Custom Reward Model
+
+## Local Development
+
+### Prerequisites
+- Python 3.11+
+- Node.js 16+
+- Hugging Face account with access tokens
+
+### Installation
+```bash
+# Install Python dependencies
+pip install -r requirements.txt
+
+# Install Node dependencies
+npm install
+
+# Build React app
+npm run build
+
+# Run server
+python server.py
+```
+
+The app will be available at `http://localhost:7860`
+
+## Deployment
+This app is configured for deployment on Hugging Face Spaces using Docker.

package.json

@@ -0,0 +1,39 @@
+{
+  "name": "rlhf-demo",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
+    "@testing-library/user-event": "^13.5.0",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "react-scripts": "5.0.1",
+    "web-vitals": "^2.1.4"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}

public/index.html

@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="%PUBLIC_URL%/favicon.svg?v=1" type="image/svg+xml" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta
+      name="description"
+      content="BioStack - AI-powered medical report generation using RLHF technology"
+    />
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <!--
+      manifest.json provides metadata used when your web app is installed on a
+      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <title>BioStack</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>

public/manifest.json

@@ -0,0 +1,25 @@
+{
+  "short_name": "BioStack",
+  "name": "BioStack - RLHF Medical Report Generation",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    },
+    {
+      "src": "logo192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "logo512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#2563eb",
+  "background_color": "#ffffff"
+}

public/robots.txt

@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:

server.py

@@ -0,0 +1,496 @@
+import io
+import torch
+import torch.nn as nn
+import timm
+import pickle
+import traceback
+import os
+from PIL import Image
+from fastapi import FastAPI, File, UploadFile
+from fastapi.middleware.cors import CORSMiddleware
+from torchvision import transforms
+from transformers import T5ForConditionalGeneration, T5Tokenizer
+from huggingface_hub import hf_hub_download
+
+# ─────────────────────────────────────────────────────────────────────────────
+# DEVICE
+# ─────────────────────────────────────────────────────────────────────────────
+device = torch.device("cuda" if torch.cuda.is_available() else "cpu")
+print(f"🖥️  Using device: {device}")
+
+# ─────────────────────────────────────────────────────────────────────────────
+# SHARED TOKENIZER
+# ─────────────────────────────────────────────────────────────────────────────
+tokenizer = T5Tokenizer.from_pretrained("t5-small", legacy=False)
+
+# ─────────────────────────────────────────────────────────────────────────────
+# ARCHITECTURE 1 — CoAtNet Encoder  (shared by all three models)
+# Matches BOTH notebooks exactly.
+# ─────────────────────────────────────────────────────────────────────────────
+class CoAtNetEncoder(nn.Module):
+    def __init__(self, model_name="coatnet_1_rw_224", pretrained=False, train_last_stages=2):
+        super().__init__()
+        # pretrained=False at inference time — weights come from .pt file
+        self.backbone = timm.create_model(model_name, pretrained=pretrained)
+
+        for name, param in self.backbone.named_parameters():
+            param.requires_grad = False
+            for i in range(5 - train_last_stages, 5):
+                if f"stages.{i}" in name:
+                    param.requires_grad = True
+                    break
+
+        # Detect feature_dim dynamically (same as RM/PPO notebook Cell 4)
+        with torch.no_grad():
+            dummy = torch.randn(1, 3, 224, 224)
+            features = self.backbone.forward_features(dummy)
+            if len(features.shape) == 4:
+                features = features.mean(dim=[2, 3])
+            self.feature_dim = features.shape[-1]
+
+        print(f"   CoAtNetEncoder feature_dim = {self.feature_dim}")
+
+    def forward(self, x):
+        features = self.backbone.forward_features(x)
+        if len(features.shape) == 4:
+            features = features.mean(dim=[2, 3])
+        return features
+
+
+# ─────────────────────────────────────────────────────────────────────────────
+# ARCHITECTURE 2 — SFT VisionT5Model
+# BUG FIX: Uses self.t5 and self.proj — exactly matching best_model.pt keys
+# from SFT notebook Cell 33. Do NOT rename these to txt_model/img_proj.
+# ─────────────────────────────────────────────────────────────────────────────
+class SFTVisionT5Model(nn.Module):
+    def __init__(self, img_encoder, txt_model_name="t5-small", img_emb_dim=768):
+        super().__init__()
+        self.img_encoder = img_encoder
+        # ← self.t5  (NOT self.txt_model — must match saved keys)
+        self.t5 = T5ForConditionalGeneration.from_pretrained(txt_model_name)
+        # ← self.proj (NOT self.img_proj — must match saved keys)
+        self.proj = nn.Linear(img_emb_dim, self.t5.config.d_model)
+
+        for p in self.t5.shared.parameters():
+            p.requires_grad = False
+
+    def generate_reports(self, pixel_values, max_length=100):
+        self.eval()
+        with torch.no_grad():
+            # Extract + project image features
+            img_feats = self.img_encoder(pixel_values)          # [B, feature_dim]
+            img_feats = self.proj(img_feats)                    # [B, d_model]
+            encoder_hidden_states = img_feats.unsqueeze(1)     # [B, 1, d_model]
+
+            # Encode
+            encoder_outputs = self.t5.encoder(
+                inputs_embeds=encoder_hidden_states
+            )
+
+            attn = torch.ones(
+                encoder_hidden_states.size()[:2], device=pixel_values.device
+            )
+
+            # BUG FIX 3: repetition_penalty + no_repeat_ngram_size breaks
+            # the "Projection: Projection: Projection:" loop
+            generated_ids = self.t5.generate(
+                encoder_outputs=encoder_outputs,
+                attention_mask=attn,
+                max_length=max_length,
+                num_beams=4,
+                early_stopping=True,
+                no_repeat_ngram_size=3,
+                repetition_penalty=1.3,
+            )
+
+        reports = tokenizer.batch_decode(generated_ids, skip_special_tokens=True)
+        # Strip any leading "Projection: X." prefix that leaked from training data
+        cleaned = []
+        for r in reports:
+            if r.lower().startswith("projection:"):
+                # Remove the first "Projection: X." segment
+                parts = r.split(".", 1)
+                r = parts[1].strip() if len(parts) > 1 else r
+            cleaned.append(r)
+        return cleaned
+
+
+# ─────────────────────────────────────────────────────────────────────────────
+# ARCHITECTURE 3 — PPO VisionT5Model
+# Uses self.txt_model and self.img_proj — matching RM/PPO notebook Cell 4.
+# ─────────────────────────────────────────────────────────────────────────────
+class PPOVisionT5Model(nn.Module):
+    def __init__(self, img_encoder, txt_model_name="t5-small", img_emb_dim=768):
+        super().__init__()
+        self.img_encoder = img_encoder
+        # ← self.txt_model (matches PPO notebook Cell 4)
+        self.txt_model = T5ForConditionalGeneration.from_pretrained(txt_model_name)
+        # ← self.img_proj (matches PPO notebook Cell 4)
+        self.img_proj = nn.Linear(img_emb_dim, self.txt_model.config.d_model)
+
+    def generate_reports(self, images, max_length=128):
+        self.eval()
+        with torch.no_grad():
+            img_features = self.img_encoder(images)             # [B, feature_dim]
+            img_emb = self.img_proj(img_features).unsqueeze(1) # [B, 1, d_model]
+
+            batch_size = images.size(0)
+            img_attn = torch.ones(batch_size, 1, device=images.device)
+
+            encoder_outputs = self.txt_model.encoder(
+                inputs_embeds=img_emb,
+                attention_mask=img_attn
+            )
+
+            # BUG FIX 3: same repetition guards as SFT
+            generated = self.txt_model.generate(
+                encoder_outputs=encoder_outputs,
+                attention_mask=img_attn,
+                max_length=max_length,
+                num_beams=4,
+                early_stopping=True,
+                no_repeat_ngram_size=3,
+                repetition_penalty=1.3,
+            )
+
+        reports = tokenizer.batch_decode(generated, skip_special_tokens=True)
+        # Strip any leading "Projection: X." prefix that leaked from training data
+        cleaned = []
+        for r in reports:
+            if r.lower().startswith("projection:"):
+                # Remove the first "Projection: X." segment
+                parts = r.split(".", 1)
+                r = parts[1].strip() if len(parts) > 1 else r
+            cleaned.append(r)
+        return cleaned
+
+
+# ─────────────────────────────────────────────────────────────────────────────
+# ARCHITECTURE 4 — Reward Model
+# Matches RM/PPO notebook Cell 5 exactly.
+# ─────────────────────────────────────────────────────────────────────────────
+class RewardModel(nn.Module):
+    def __init__(self, img_encoder, txt_model_name="t5-small"):
+        super().__init__()
+        self.img_encoder = img_encoder
+        self.txt_encoder = T5ForConditionalGeneration.from_pretrained(txt_model_name).encoder
+        img_dim = img_encoder.feature_dim
+        txt_dim = self.txt_encoder.config.d_model
+        self.img_proj = nn.Linear(img_dim, 512)
+        self.txt_proj = nn.Linear(txt_dim, 512)
+        self.reward_head = nn.Sequential(
+            nn.Linear(1024, 512), nn.ReLU(), nn.Dropout(0.1),
+            nn.Linear(512, 256),  nn.ReLU(), nn.Dropout(0.1),
+            nn.Linear(256, 1)
+        )
+
+    def forward(self, images, input_ids, attention_mask):
+        img_features = self.img_encoder(images)
+        img_emb = self.img_proj(img_features)
+        txt_outputs = self.txt_encoder(input_ids=input_ids, attention_mask=attention_mask)
+        txt_emb = txt_outputs.last_hidden_state.mean(dim=1)
+        txt_emb = self.txt_proj(txt_emb)
+        combined = torch.cat([img_emb, txt_emb], dim=1)
+        return self.reward_head(combined).squeeze(-1)
+
+
+# ─────────────────────────────────────────────────────────────────────────────
+# MODEL LOADER — handles both .pt (state_dict) and .pkl (full model)
+# Prints a key-match diagnostic so you can see exactly what loaded.
+# ─────────────────────────────────────────────────────────────────────────────
+def remap_keys(raw_sd: dict, label: str) -> dict:
+    """
+    Remap state_dict keys to match current model attribute names.
+
+    Known mismatches discovered from diagnostic output:
+      SFT notebook used:
+        img_encoder.encoder.*   →  we use  img_encoder.backbone.*
+        t5.*                    →  we use  t5.*  (already correct for SFTVisionT5Model)
+        proj.*                  →  we use  proj.* (already correct for SFTVisionT5Model)
+      PPO/RM notebooks used:
+        img_encoder.backbone.*  →  already correct ✅
+        txt_model.*             →  already correct ✅
+        img_proj.*              →  already correct ✅
+    """
+    remapped = {}
+    changed = 0
+    for k, v in raw_sd.items():
+        new_k = k
+        # SFT encoder used self.encoder, our CoAtNetEncoder uses self.backbone
+        if "img_encoder.encoder." in new_k:
+            new_k = new_k.replace("img_encoder.encoder.", "img_encoder.backbone.")
+            changed += 1
+        remapped[new_k] = v
+    if changed:
+        print(f"   🔧 Remapped {changed} keys: img_encoder.encoder.* → img_encoder.backbone.*")
+    return remapped
+
+
+def load_model(path: str, model_obj: nn.Module, label: str) -> nn.Module:
+    print(f"\n📂 Loading {label} from: {path}")
+
+    if path.endswith(".pkl"):
+        with open(path, "rb") as f:
+            loaded = pickle.load(f)
+        print(f"   ✅ Loaded full pickle object: {type(loaded)}")
+        return loaded.to(device)
+
+    # .pt state_dict
+    raw_sd = torch.load(path, map_location=device)
+
+    # Print first 5 saved keys for diagnosis
+    saved_keys = list(raw_sd.keys())
+    print(f"   Saved keys (first 5): {saved_keys[:5]}")
+    model_keys = list(model_obj.state_dict().keys())
+    print(f"   Model keys (first 5): {model_keys[:5]}")
+
+    # Remap any mismatched key prefixes
+    raw_sd = remap_keys(raw_sd, label)
+
+    result = model_obj.load_state_dict(raw_sd, strict=False)
+
+    # Ignore known-safe missing keys:
+    #   head.fc.*            - classification head, intentionally removed (num_classes=0)
+    #   num_batches_tracked  - BatchNorm counter, not a learned weight
+    SAFE_MISSING = ("num_batches_tracked", "head.fc.")
+    missing    = [k for k in result.missing_keys    if not any(s in k for s in SAFE_MISSING)]
+    unexpected = [k for k in result.unexpected_keys if "num_batches_tracked" not in k]
+
+    if missing:
+        print(f"   Missing keys: {missing[:5]}{'...' if len(missing)>5 else ''}")
+        print(f"   WARNING: {len(missing)} missing keys - weights NOT loaded for those layers!")
+    if unexpected:
+        print(f"   Unexpected keys: {unexpected[:5]}{'...' if len(unexpected)>5 else ''}")
+    if not missing and not unexpected:
+        print(f"   OK: All keys matched perfectly!")
+
+    return model_obj.to(device)
+
+
+# ─────────────────────────────────────────────────────────────────────────────
+# LOAD ALL THREE MODELS FROM HUGGING FACE HUB
+# Models are downloaded from Shree2604/BioStack repository
+# ─────────────────────────────────────────────────────────────────────────────
+def download_model_from_hf(model_filename: str, local_path: str = "models/") -> str:
+    """Download model from Hugging Face Hub if not exists locally"""
+    os.makedirs(local_path, exist_ok=True)
+    full_path = os.path.join(local_path, model_filename)
+    
+    if not os.path.exists(full_path):
+        print(f" Downloading {model_filename} from Hugging Face Hub...")
+        try:
+            downloaded_path = hf_hub_download(
+                repo_id="Shree2604/BioStack",
+                filename=model_filename,
+                local_dir=local_path,
+                local_dir_use_symlinks=False
+            )
+            print(f" Downloaded {model_filename}")
+            return downloaded_path
+        except Exception as e:
+            print(f" Failed to download {model_filename}: {e}")
+            raise
+    else:
+        print(f" Using local {model_filename}")
+        return full_path
+
+print("\n" + "="*60)
+print("  LOADING MODELS FROM HUGGING FACE HUB")
+print("="*60)
+
+# Download models from Hugging Face
+SFT_MODEL_PATH = download_model_from_hf("best_model.pt")
+REWARD_MODEL_PATH = download_model_from_hf("reward_model.pt")
+PPO_MODEL_PATH = download_model_from_hf("rlhf_model.pt")
+
+# SFT
+_sft_enc  = CoAtNetEncoder(pretrained=False)
+sft_model = load_model(SFT_MODEL_PATH, SFTVisionT5Model(_sft_enc), "SFT Model")
+sft_model.eval()
+
+# Reward
+_rm_enc      = CoAtNetEncoder(pretrained=False)
+reward_model = load_model(REWARD_MODEL_PATH, RewardModel(_rm_enc), "Reward Model")
+reward_model.eval()
+
+# PPO
+_ppo_enc  = CoAtNetEncoder(pretrained=False)
+ppo_model = load_model(PPO_MODEL_PATH, PPOVisionT5Model(_ppo_enc), "PPO Model")
+ppo_model.eval()
+
+print("\n All models loaded and ready!\n" + "="*60 + "\n")
+
+
+# ─────────────────────────────────────────────────────────────────────────────
+# IMAGE PREPROCESSING
+# Matches BOTH notebooks: RGB, 224×224, ImageNet normalisation
+# ─────────────────────────────────────────────────────────────────────────────
+transform = transforms.Compose([
+    transforms.Resize((224, 224)),
+    transforms.ToTensor(),
+    transforms.Normalize(mean=[0.485, 0.456, 0.406],
+                         std=[0.229, 0.224, 0.225])
+])
+
+def preprocess(file_bytes: bytes) -> torch.Tensor:
+    img = Image.open(io.BytesIO(file_bytes)).convert("RGB")
+    return transform(img).unsqueeze(0).to(device)   # [1, 3, 224, 224]
+
+
+# ─────────────────────────────────────────────────────────────────────────────
+# REWARD FEEDBACK GENERATOR
+# ─────────────────────────────────────────────────────────────────────────────
+KEY_MEDICAL_TERMS = [
+    'lung', 'heart', 'normal', 'clear', 'opacity', 'infiltrate',
+    'cardiomegaly', 'pleural', 'pulmonary', 'chest', 'thorax',
+    'pneumonia', 'edema', 'effusion', 'consolidation'
+]
+
+def reward_feedback(report: str, score: float) -> str:
+    rl = report.lower()
+    present = [t for t in KEY_MEDICAL_TERMS if t in rl]
+    missing  = [t for t in KEY_MEDICAL_TERMS if t not in rl]
+    words    = len(report.split())
+    length_q = "good" if 50 <= words <= 150 else ("too short" if words < 50 else "too long")
+
+    # Quality factor assessments based on the score and analysis
+    terminology_score = len(present) / len(KEY_MEDICAL_TERMS)
+    completeness_score = min(1.0, words / 100.0)  # Rough estimate based on length
+    structure_score = 1.0 if 50 <= words <= 150 else 0.5  # Good structure if proper length
+    radiological_score = score  # The overall score represents alignment
+
+    return (
+        f"Reward Score: {score:.2f} | "
+        f"Quality Factors - "
+        f"Medical Terminology: {terminology_score:.1%} | "
+        f"Clinical Completeness: {completeness_score:.1%} | "
+        f"Report Structure: {structure_score:.1%}"
+    )
+
+
+# ─────────────────────────────────────────────────────────────────────────────
+# FASTAPI APP
+# ─────────────────────────────────────────────────────────────────────────────
+app = FastAPI(title="RLHF Medical Demo")
+
+app.add_middleware(
+    CORSMiddleware,
+    allow_origins=["*"],
+    allow_methods=["*"],
+    allow_headers=["*"],
+)
+
+
+@app.get("/health")
+def health():
+    return {"status": "ok", "device": str(device)}
+
+
+@app.post("/sft")
+async def sft_inference(file: UploadFile = File(...)):
+    try:
+        tensor = preprocess(await file.read())
+        report = sft_model.generate_reports(tensor)[0]
+        print(f"[SFT] Generated: {report}")
+        return {"report": report[:81]}
+    except Exception as e:
+        traceback.print_exc()
+        return {"report": f"ERROR: {str(e)}"}
+
+
+@app.post("/reward")
+async def reward_inference(file: UploadFile = File(...)):
+    try:
+        tensor = preprocess(await file.read())
+
+        # First get the SFT report to score
+        sft_report = sft_model.generate_reports(tensor)[0]
+        print(f"[REWARD] Scoring SFT report: {sft_report}")
+
+        if not sft_report.strip():
+            return {"score": 0.0, "feedback": "", "sft_report": ""}
+
+        enc = tokenizer(
+            [sft_report],
+            max_length=128,
+            padding="max_length",
+            truncation=True,
+            return_tensors="pt"
+        )
+        input_ids      = enc.input_ids.to(device)
+        attention_mask = enc.attention_mask.to(device)
+
+        with torch.no_grad():
+            raw_score = reward_model(tensor, input_ids, attention_mask).item()
+
+        # Detailed debug logging
+        print(f"[REWARD] Raw neural network output: {raw_score:.6f}")
+        print(f"[REWARD] Clamping to [0,1] range: max(0.0, min(1.0, {raw_score:.6f})) = {max(0.0, min(1.0, raw_score)):.6f}")
+
+        # Quality assessment details
+        rl = sft_report.lower()
+        present = [t for t in KEY_MEDICAL_TERMS if t in rl]
+        missing  = [t for t in KEY_MEDICAL_TERMS if t not in rl]
+        words    = len(sft_report.split())
+        length_q = "good" if 50 <= words <= 150 else ("too short" if words < 50 else "too long")
+
+        print(f"[REWARD] Report analysis:")
+        print(f"         - Total words: {words} ({length_q})")
+        print(f"         - Medical terms present ({len(present)}/{len(KEY_MEDICAL_TERMS)}): {present}")
+        print(f"         - Medical terms missing: {missing}")
+        print(f"         - Key terms list: {KEY_MEDICAL_TERMS}")
+
+        # Reward model architecture details
+        print(f"[REWARD] Model architecture:")
+        print(f"         - CoAtNet feature dim: {reward_model.img_encoder.feature_dim}")
+        print(f"         - T5 d_model: {reward_model.txt_encoder.config.d_model}")
+        print(f"         - Combined feature dim: 1024 (512 img + 512 text)")
+        print(f"         - Reward head: 1024→512→256→1")
+
+        # Clamped score for display
+        score = float(max(0.0, min(1.0, raw_score)))
+        feedback = reward_feedback(sft_report, score)
+        print(f"[REWARD] Final Score={score:.3f}")
+        return {"score": score, "feedback": feedback, "sft_report": sft_report}
+
+    except Exception as e:
+        traceback.print_exc()
+        return {"score": 0.0, "feedback": f"ERROR: {str(e)}", "sft_report": ""}
+
+
+@app.post("/ppo")
+async def ppo_inference(file: UploadFile = File(...)):
+    try:
+        tensor = preprocess(await file.read())
+        report = ppo_model.generate_reports(tensor)[0]
+        print(f"[PPO] Generated: {report}")
+        return {"report": report}
+    except Exception as e:
+        traceback.print_exc()
+        return {"report": f"ERROR: {str(e)}"}
+
+
+# ─────────────────────────────────────────────────────────────────────────────
+# DIAGNOSTIC ENDPOINT — call GET /debug_keys to verify key names in your files
+# e.g.  curl http://localhost:8000/debug_keys
+# ─────────────────────────────────────────────────────────────────────────────
+@app.get("/debug_keys")
+def debug_keys():
+    import os
+    result = {}
+    for label, path in [("SFT", SFT_MODEL_PATH), ("Reward", REWARD_MODEL_PATH), ("PPO", PPO_MODEL_PATH)]:
+        if not os.path.exists(path):
+            result[label] = f"FILE NOT FOUND: {path}"
+            continue
+        try:
+            sd = torch.load(path, map_location="cpu")
+            keys = list(sd.keys())
+            result[label] = {"first_10_keys": keys[:10], "total_keys": len(keys)}
+        except Exception as e:
+            result[label] = f"ERROR: {e}"
+    return result
+
+
+if __name__ == "__main__":
+    import uvicorn
+    uvicorn.run(app, host="0.0.0.0", port=7860, reload=False)

src/App.css

@@ -0,0 +1,38 @@
+.App {
+  text-align: center;
+}
+
+.App-logo {
+  height: 40vmin;
+  pointer-events: none;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .App-logo {
+    animation: App-logo-spin infinite 20s linear;
+  }
+}
+
+.App-header {
+  background-color: #282c34;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-size: calc(10px + 2vmin);
+  color: white;
+}
+
+.App-link {
+  color: #61dafb;
+}
+
+@keyframes App-logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}

src/App.js

@@ -0,0 +1,641 @@
+import { useState, useRef, useCallback } from "react";
+
+// ─────────────────────────────────────────────────────────
+// THEME DEFINITIONS
+// ─────────────────────────────────────────────────────────
+const THEMES = {
+  dark: {
+    name: "dark",
+    bg:            "#070d14",
+    surface:       "#0f1923",
+    surfaceAlt:    "#0a1520",
+    border:        "#1e2d3d",
+    borderFocus:   "#3b82f6",
+    text:          "#e2e8f0",
+    textMuted:     "#4a6080",
+    textSub:       "#94a3b8",
+    textBody:      "#cbd5e1",
+    inputBg:       "#0a1520",
+    uploadBg:      "#0a1520",
+    uploadHover:   "#1e2d3d",
+    scrollTrack:   "#0f1923",
+    scrollThumb:   "#1e3a5f",
+    infoBg:        "#0a1520",
+    emptyColor:    "#1e3a5f",
+    cardBg:        "#0f1923",
+    barTrack:      "#1e2d3d",
+    btnDisabled:   "#1e2d3d",
+    btnDisabledTxt:"#4a6080",
+    headerShadow:  "none",
+    cardShadow:    "none",
+  },
+  light: {
+    name: "light",
+    bg:            "#f0f4f8",
+    surface:       "#ffffff",
+    surfaceAlt:    "#f8fafc",
+    border:        "#d1dde9",
+    borderFocus:   "#2563eb",
+    text:          "#0f172a",
+    textMuted:     "#64748b",
+    textSub:       "#475569",
+    textBody:      "#334155",
+    inputBg:       "#ffffff",
+    uploadBg:      "#f8fafc",
+    uploadHover:   "#e2eaf4",
+    scrollTrack:   "#e2e8f0",
+    scrollThumb:   "#94a3b8",
+    infoBg:        "#f1f5f9",
+    emptyColor:    "#94a3b8",
+    cardBg:        "#ffffff",
+    barTrack:      "#e2e8f0",
+    btnDisabled:   "#e2e8f0",
+    btnDisabledTxt:"#94a3b8",
+    headerShadow:  "0 1px 6px rgba(0,0,0,0.07)",
+    cardShadow:    "0 1px 4px rgba(0,0,0,0.06)",
+  },
+};
+
+// ─────────────────────────────────────────────────────────
+// ROUGE-L CALCULATION
+// ─────────────────────────────────────────────────────────
+const ROUGE_L = (hyp, ref) => {
+  if (!hyp || !ref) return 0;
+  const hypW = hyp.toLowerCase().split(/\s+/);
+  const refW = ref.toLowerCase().split(/\s+/);
+  const m = hypW.length, n = refW.length;
+  const dp = Array.from({ length: m + 1 }, () => Array(n + 1).fill(0));
+  for (let i = 1; i <= m; i++)
+    for (let j = 1; j <= n; j++)
+      dp[i][j] = hypW[i-1] === refW[j-1]
+        ? dp[i-1][j-1] + 1
+        : Math.max(dp[i-1][j], dp[i][j-1]);
+  const lcs = dp[m][n];
+  const prec = lcs / m, rec = lcs / n;
+  if (prec + rec === 0) return 0;
+  return ((2 * prec * rec) / (prec + rec)).toFixed(4);
+};
+
+// ─────────────────────────────────────────────────────────
+// THEME TOGGLE
+// ─────────────────────────────────────────────────────────
+const ThemeToggle = ({ theme, onToggle }) => {
+  const isDark = theme.name === "dark";
+  return (
+    <button
+      onClick={onToggle}
+      title={`Switch to ${isDark ? "light" : "dark"} mode`}
+      style={{
+        display: "flex", alignItems: "center", gap: 9,
+        background: isDark ? "#1a2d42" : "#e8f0fa",
+        border: `1px solid ${isDark ? "#2d4a6a" : "#c4d4e8"}`,
+        borderRadius: 24, padding: "6px 14px 6px 8px",
+        cursor: "pointer", color: theme.text,
+        fontSize: 12, fontWeight: 600, letterSpacing: 0.4,
+        transition: "background .3s, border-color .3s",
+      }}
+    >
+      {/* Toggle track */}
+      <div style={{
+        width: 42, height: 23, borderRadius: 12,
+        background: isDark ? "#1d4ed8" : "#f59e0b",
+        position: "relative", flexShrink: 0,
+        transition: "background .35s ease",
+      }}>
+        {/* Thumb */}
+        <div style={{
+          position: "absolute",
+          top: "50%", transform: "translateY(-50%)",
+          left: isDark ? 22 : 3,
+          width: 17, height: 17, borderRadius: "50%",
+          background: "#fff",
+          boxShadow: "0 1px 5px rgba(0,0,0,0.25)",
+          display: "grid", placeItems: "center",
+          fontSize: 9,
+          transition: "left .28s ease",
+        }}>
+          {isDark ? "🌙" : "☀️"}
+        </div>
+      </div>
+      <span style={{ color: theme.textMuted, userSelect: "none" }}>
+        {isDark ? "Dark" : "Light"}
+      </span>
+    </button>
+  );
+};
+
+// ─────────────────────────────────────────────────────────
+// SCORE BADGE
+// ─────────────────────────────────────────────────────────
+const ScoreBadge = ({ score }) => {
+  const pct = parseFloat(score) * 100;
+  const color = pct >= 60 ? "#22c55e" : pct >= 35 ? "#f59e0b" : "#ef4444";
+  return (
+    <span style={{
+      background: color + "22", color,
+      border: `1px solid ${color}55`,
+      borderRadius: 6, padding: "2px 10px",
+      fontFamily: "monospace", fontWeight: 700, fontSize: 13,
+    }}>
+      ROUGE-L: {pct.toFixed(1)}%
+    </span>
+  );
+};
+
+// ─────────────────────────────────────────────────────────
+// OUTPUT CARD
+// ─────────────────────────────────────────────────────────
+const OutputCard = ({ title, icon, content, badge, accent, loading, theme }) => (
+  <div style={{
+    background: theme.cardBg,
+    border: `1px solid ${accent}33`,
+    borderRadius: 14, padding: 20,
+    position: "relative", overflow: "hidden",
+    boxShadow: theme.cardShadow,
+    transition: "background .3s, box-shadow .3s",
+  }}>
+    {/* Accent top bar */}
+    <div style={{ position: "absolute", top: 0, left: 0, right: 0, height: 3, background: accent }} />
+
+    {/* Card header */}
+    <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 12 }}>
+      <span style={{ fontSize: 18 }}>{icon}</span>
+      <span style={{
+        fontFamily: "'Courier New', monospace",
+        fontSize: 11, fontWeight: 700, color: accent,
+        textTransform: "uppercase", letterSpacing: 2,
+      }}>{title}</span>
+      {badge && <div style={{ marginLeft: "auto" }}>{badge}</div>}
+    </div>
+
+    {/* Body */}
+    {loading ? (
+      <div style={{ display: "flex", gap: 6, alignItems: "center", color: theme.textMuted, fontSize: 13 }}>
+        {[0, 0.2, 0.4].map((d, i) => (
+          <span key={i} style={{ animation: `pulse 1s infinite ${d}s` }}>●</span>
+        ))}
+        <span style={{ marginLeft: 8 }}>Generating…</span>
+      </div>
+    ) : content ? (
+      <p style={{ margin: 0, fontSize: 14, lineHeight: 1.78, color: theme.textBody, fontFamily: "Georgia, serif" }}>
+        {content}
+      </p>
+    ) : (
+      <p style={{ margin: 0, fontSize: 13, color: theme.textMuted, fontStyle: "italic" }}>
+        Awaiting input…
+      </p>
+    )}
+  </div>
+);
+
+// ─────────────────────────────────────────────────────────
+// MAIN APP
+// ─────────────────────────────────────────────────────────
+export default function App() {
+  const [themeName, setThemeName] = useState("dark");
+  const theme = THEMES[themeName];
+  const toggleTheme = () => setThemeName(t => t === "dark" ? "light" : "dark");
+
+  const [image, setImage] = useState(null);
+  const [imageFile, setImageFile] = useState(null);
+  const [groundTruth, setGroundTruth] = useState("");
+  const [sftOutput, setSftOutput] = useState("");
+  const [rewardOutput, setRewardOutput] = useState("");
+  const [ppoOutput, setPpoOutput] = useState("");
+  const [rewardScore, setRewardScore] = useState(null);
+  const [loading, setLoading] = useState(false);
+  const [dragging, setDragging] = useState(false);
+  const fileRef = useRef();
+
+  const runInference = async () => {
+    if (!image || !imageFile) return;
+    setLoading(true);
+    setSftOutput(""); setRewardOutput(""); setPpoOutput(""); setRewardScore(null);
+
+    const BASE = "http://localhost:8000";
+
+    try {
+      // 1. SFT
+      const sftForm = new FormData();
+      sftForm.append("file", imageFile);
+      const sftRes = await fetch(`${BASE}/sft`, { method: "POST", body: sftForm });
+      const sftData = await sftRes.json();
+      setSftOutput(sftData.report);
+
+      // 2. Reward
+      const rmForm = new FormData();
+      rmForm.append("file", imageFile);
+      const rmRes = await fetch(`${BASE}/reward`, { method: "POST", body: rmForm });
+      const rmData = await rmRes.json();
+      setRewardOutput(rmData.feedback);
+      setRewardScore(rmData.score.toFixed(2));
+
+      // 3. PPO
+      const ppoForm = new FormData();
+      ppoForm.append("file", imageFile);
+      const ppoRes = await fetch(`${BASE}/ppo`, { method: "POST", body: ppoForm });
+      const ppoData = await ppoRes.json();
+      setPpoOutput(ppoData.report);
+
+    } catch (err) {
+      console.error("Inference error:", err);
+      setSftOutput("⚠️ Could not connect to server. Make sure server.py is running on port 8000.");
+    }
+
+    setLoading(false);
+  };
+
+  const handleFile = (file) => {
+    if (!file || !file.type.startsWith("image/")) return;
+    setImageFile(file);
+    const reader = new FileReader();
+    reader.onload = e => setImage(e.target.result);
+    reader.readAsDataURL(file);
+  };
+
+  const onDrop = useCallback((e) => {
+    e.preventDefault(); setDragging(false);
+    handleFile(e.dataTransfer.files[0]);
+  }, []);
+
+  const clearAll = () => {
+    setImage(null); setImageFile(null);
+    setSftOutput(""); setRewardOutput(""); setPpoOutput(""); setRewardScore(null);
+    if (fileRef.current) fileRef.current.value = "";
+  };
+
+  const rougeSFT = groundTruth && sftOutput ? ROUGE_L(sftOutput, groundTruth) : null;
+  const rougePPO = groundTruth && ppoOutput ? ROUGE_L(ppoOutput, groundTruth) : null;
+
+  return (
+    <div style={{
+      minHeight: "100vh",
+      background: theme.bg,
+      color: theme.text,
+      fontFamily: "system-ui, -apple-system, sans-serif",
+      transition: "background .3s ease, color .3s ease",
+    }}>
+
+      {/* ── GLOBAL STYLES ── */}
+      <style>{`
+        @keyframes pulse  { 0%,100%{opacity:.3} 50%{opacity:1} }
+        @keyframes fadeIn { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }
+        * { box-sizing: border-box; margin: 0; padding: 0; }
+        ::-webkit-scrollbar { width: 6px; }
+        ::-webkit-scrollbar-track { background: ${theme.scrollTrack}; }
+        ::-webkit-scrollbar-thumb { background: ${theme.scrollThumb}; border-radius: 3px; }
+        textarea { font-family: system-ui, sans-serif; }
+        textarea:focus {
+          outline: none;
+          border-color: ${theme.borderFocus} !important;
+          box-shadow: 0 0 0 3px ${theme.borderFocus}22;
+        }
+        button { transition: all .22s ease !important; }
+        button:not(:disabled):hover  { filter: brightness(1.1); transform: translateY(-1px); }
+        button:not(:disabled):active { transform: translateY(0px); filter: brightness(0.97); }
+      `}</style>
+
+      {/* ═══════════════════════════════════
+          HEADER
+      ═══════════════════════════════════ */}
+      <header style={{
+        borderBottom: `2px solid ${theme.border}`,
+        padding: "20px 32px",
+        display: "flex", alignItems: "center", gap: 18,
+        background: `linear-gradient(135deg, ${theme.surface} 0%, ${theme.surfaceAlt} 100%)`,
+        boxShadow: "0 4px 20px rgba(0,0,0,0.1)",
+        transition: "background .3s, border-color .3s, box-shadow .3s",
+        position: "sticky", top: 0, zIndex: 100,
+        backdropFilter: "blur(10px)",
+        WebkitBackdropFilter: "blur(10px)",
+      }}>
+        {/* Logo mark */}
+        <div style={{
+          width: 52, height: 52, flexShrink: 0,
+          background: "linear-gradient(135deg,#3b82f6,#06b6d4)",
+          borderRadius: 14, display: "grid", placeItems: "center",
+          fontSize: 24, boxShadow: "0 4px 16px rgba(59,130,246,0.4)",
+          border: "2px solid rgba(255,255,255,0.2)",
+        }}>🫁</div>
+
+        {/* Titles */}
+        <div>
+          <div style={{
+            fontWeight: 900,
+            fontSize: 22,
+            letterSpacing: -0.8,
+            color: theme.text,
+            textShadow: theme.name === "dark" ? "0 1px 2px rgba(0,0,0,0.3)" : "none",
+            marginBottom: 4
+          }}>
+            BioStack
+          </div>
+          <div style={{
+            fontSize: 12,
+            color: theme.textMuted,
+            letterSpacing: 1.2,
+            textTransform: "uppercase",
+            fontWeight: 600,
+            opacity: 0.9
+          }}>
+            RLHF Based Medical Report Generation
+          </div>
+        </div>
+
+        <div style={{ flex: 1 }} />
+
+        {/* 🌙/☀️ Toggle */}
+        <ThemeToggle theme={theme} onToggle={toggleTheme} />
+      </header>
+
+      {/* ═══════════════════════════════════
+          MAIN GRID
+      ═══════════════════════════════════ */}
+      <div style={{
+        display: "grid",
+        gridTemplateColumns: "370px 1fr",
+        height: "calc(100vh - 155px)", // Further decreased for optimal fit
+        overflow: "hidden", // Prevent any overflow
+      }}>
+
+        {/* ══ LEFT PANEL ══ */}
+        <aside style={{
+          borderRight: `1px solid ${theme.border}`,
+          padding: "15px 18px", // Reduced padding
+          display: "flex", flexDirection: "column", gap: 14, // Reduced gap
+          background: theme.surface,
+          overflowY: "auto",
+          transition: "background .3s, border-color .3s",
+          height: "100%", // Ensure full height
+        }}>
+
+          <div style={{ fontSize: 10, color: theme.textMuted, textTransform: "uppercase", letterSpacing: 2, fontWeight: 700 }}>
+            📤 Input
+          </div>
+
+          {/* Upload zone */}
+          <div>
+            <label style={{
+              fontSize: 11, color: theme.textMuted,
+              textTransform: "uppercase", letterSpacing: 1.5,
+              fontWeight: 700, display: "block", marginBottom: 8,
+            }}>Chest X-Ray Image</label>
+
+            <div
+              onClick={() => fileRef.current.click()}
+              onDragOver={e => { e.preventDefault(); setDragging(true); }}
+              onDragLeave={() => setDragging(false)}
+              onDrop={onDrop}
+              style={{
+                border: `2px dashed ${dragging ? "#3b82f6" : image ? "#22c55e66" : theme.border}`,
+                borderRadius: 14, minHeight: 190,
+                display: "flex", flexDirection: "column",
+                alignItems: "center", justifyContent: "center",
+                cursor: "pointer",
+                background: dragging ? theme.uploadHover : theme.uploadBg,
+                transition: "all .22s", overflow: "hidden",
+              }}
+            >
+              {image ? (
+                <img src={image} alt="X-Ray" style={{
+                  width: "100%", height: "100%",
+                  objectFit: "contain", maxHeight: 240, borderRadius: 12,
+                }} />
+              ) : (
+                <>
+                  <div style={{ fontSize: 40, marginBottom: 10, opacity: 0.65 }}>🩻</div>
+                  <div style={{ fontSize: 13, color: theme.textMuted, textAlign: "center", lineHeight: 1.65 }}>
+                    Click or drag & drop<br />
+                    <span style={{ fontSize: 11, color: theme.emptyColor }}>PNG, JPG, DICOM supported</span>
+                  </div>
+                </>
+              )}
+            </div>
+            <input ref={fileRef} type="file" accept="image/*" style={{ display: "none" }}
+              onChange={e => handleFile(e.target.files[0])} />
+          </div>
+
+          {/* Clear button */}
+          {image && (
+            <button onClick={clearAll} style={{
+              background: "transparent",
+              border: `1px solid ${theme.border}`,
+              color: theme.textMuted,
+              borderRadius: 8, padding: "5px 14px",
+              cursor: "pointer", fontSize: 12, alignSelf: "flex-start",
+            }}>
+              ✕ Clear Image
+            </button>
+          )}
+
+          {/* Divider */}
+          <div style={{ height: 1, background: theme.border }} />
+
+          {/* Ground truth */}
+          <div>
+            <label style={{
+              fontSize: 11, color: theme.textMuted,
+              textTransform: "uppercase", letterSpacing: 1.5,
+              fontWeight: 700, display: "block", marginBottom: 8,
+            }}>
+              📋 Ground Truth{" "}
+              <span style={{ color: theme.emptyColor, textTransform: "none", letterSpacing: 0, fontWeight: 400, fontSize: 11 }}>
+                (optional)
+              </span>
+            </label>
+            <textarea
+              value={groundTruth}
+              onChange={e => setGroundTruth(e.target.value)}
+              placeholder="Paste the radiologist ground truth report here to see ROUGE-L scores…"
+              rows={5}
+              style={{
+                width: "100%",
+                background: theme.inputBg,
+                border: `1px solid ${theme.border}`,
+                borderRadius: 10,
+                color: theme.text,
+                padding: "10px 12px",
+                fontSize: 13, resize: "vertical", lineHeight: 1.65,
+                transition: "border .2s, box-shadow .2s, background .3s, color .3s",
+              }}
+            />
+          </div>
+
+          {/* Run button */}
+          <button
+            onClick={runInference}
+            disabled={!image || loading}
+            style={{
+              background: image && !loading
+                ? "linear-gradient(135deg,#1d4ed8,#0891b2)"
+                : theme.btnDisabled,
+              color: image && !loading ? "#fff" : theme.btnDisabledTxt,
+              border: "none", borderRadius: 12,
+              padding: "13px 20px",
+              fontSize: 14, fontWeight: 700,
+              cursor: image && !loading ? "pointer" : "not-allowed",
+              letterSpacing: 0.5, width: "100%",
+              boxShadow: image && !loading ? "0 4px 16px rgba(29,78,216,0.38)" : "none",
+            }}>
+            {loading ? "⏳  Running Pipeline…" : "▶  Run RLHF Pipeline"}
+          </button>
+        </aside>
+
+        {/* ══ RIGHT PANEL ══ */}
+        <main style={{
+          padding: "18px 22px", // Reduced padding
+          display: "flex", flexDirection: "column", gap: 16, // Reduced gap
+          overflowY: "auto",
+          background: theme.bg,
+          transition: "background .3s",
+          height: "100%", // Ensure full height
+        }}>
+
+          <div style={{ fontSize: 10, color: theme.textMuted, textTransform: "uppercase", letterSpacing: 2, fontWeight: 700 }}>
+            📊 Pipeline Outputs
+          </div>
+
+          {/* SFT */}
+          <div style={{ animation: sftOutput ? "fadeIn .4s ease" : "none" }}>
+            <OutputCard theme={theme} title="SFT Model Output — Original" icon="🧠" accent="#3b82f6"
+              content={sftOutput} loading={loading && !sftOutput}
+              badge={rougeSFT !== null && <ScoreBadge score={rougeSFT} />}
+            />
+          </div>
+
+          {/* Reward */}
+          <div style={{ animation: rewardOutput ? "fadeIn .4s ease" : "none" }}>
+            <OutputCard theme={theme} title="Reward Model Output" icon="⚖️" accent="#f59e0b"
+              content={rewardOutput} loading={loading && sftOutput && !rewardOutput}
+              badge={rewardScore && (
+                <span style={{
+                  background: "#f59e0b22", color: "#f59e0b",
+                  border: "1px solid #f59e0b55",
+                  borderRadius: 6, padding: "2px 10px",
+                  fontFamily: "monospace", fontWeight: 700, fontSize: 13,
+                }}>
+                  Reward: {rewardScore}
+                </span>
+              )}
+            />
+          </div>
+
+          {/* PPO */}
+          <div style={{ animation: ppoOutput ? "fadeIn .4s ease" : "none" }}>
+            <OutputCard theme={theme} title="PPO Final Model Output" icon="🎯" accent="#22c55e"
+              content={ppoOutput} loading={loading && rewardOutput && !ppoOutput}
+              badge={rougePPO !== null && <ScoreBadge score={rougePPO} />}
+            />
+          </div>
+
+          {/* ROUGE-L comparison */}
+          {groundTruth && sftOutput && ppoOutput && (
+            <div style={{
+              background: theme.surface,
+              border: `1px solid ${theme.border}`,
+              borderRadius: 14, padding: 20,
+              animation: "fadeIn .5s ease",
+              boxShadow: theme.cardShadow,
+              transition: "background .3s, border-color .3s",
+            }}>
+              <div style={{ fontSize: 10, color: theme.textMuted, textTransform: "uppercase", letterSpacing: 2, fontWeight: 700, marginBottom: 16 }}>
+                📈 ROUGE-L Comparison vs Ground Truth
+              </div>
+              <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
+                {[
+                  { label: "SFT (Original)", score: rougeSFT, color: "#3b82f6" },
+                  { label: "PPO (Final)",    score: rougePPO, color: "#22c55e" },
+                ].map(({ label, score, color }) => (
+                  <div key={label} style={{
+                    background: theme.surfaceAlt, borderRadius: 10, padding: 16,
+                    border: `1px solid ${color}33`,
+                    transition: "background .3s",
+                  }}>
+                    <div style={{ fontSize: 12, color: theme.textMuted, marginBottom: 8 }}>{label}</div>
+                    <div style={{ fontSize: 28, fontWeight: 800, color, fontFamily: "monospace" }}>
+                      {(parseFloat(score) * 100).toFixed(1)}%
+                    </div>
+                    <div style={{ marginTop: 10, height: 5, background: theme.barTrack, borderRadius: 3 }}>
+                      <div style={{
+                        width: `${parseFloat(score) * 100}%`, height: "100%",
+                        background: color, borderRadius: 3,
+                        transition: "width 1.2s ease",
+                      }} />
+                    </div>
+                    {parseFloat(rougePPO) > parseFloat(rougeSFT) && label.includes("PPO") && (
+                      <div style={{ fontSize: 11, color: "#22c55e", marginTop: 7, fontWeight: 600 }}>
+                        ▲ +{((parseFloat(rougePPO) - parseFloat(rougeSFT)) * 100).toFixed(1)}% improvement
+                      </div>
+                    )}
+                  </div>
+                ))}
+              </div>
+            </div>
+          )}
+
+          {/* Ground truth reference */}
+          {groundTruth && (
+            <div style={{
+              background: theme.surface,
+              border: `1px solid ${theme.border}`,
+              borderRadius: 14, padding: 20,
+              boxShadow: theme.cardShadow,
+              transition: "background .3s, border-color .3s",
+            }}>
+              <div style={{ fontSize: 10, color: theme.textMuted, textTransform: "uppercase", letterSpacing: 2, fontWeight: 700, marginBottom: 10 }}>
+                📋 Ground Truth Reference
+              </div>
+              <p style={{ fontSize: 14, lineHeight: 1.78, color: theme.textSub, fontFamily: "Georgia, serif" }}>
+                {groundTruth}
+              </p>
+            </div>
+          )}
+
+          {/* Empty state */}
+          {!image && !loading && (
+            <div style={{
+              flex: 1, display: "flex", flexDirection: "column",
+              alignItems: "center", justifyContent: "center",
+              color: theme.emptyColor, gap: 14, paddingTop: 60,
+            }}>
+              <div style={{ fontSize: 64, opacity: 0.35 }}>🩻</div>
+              <div style={{ fontSize: 14, fontWeight: 600, opacity: 0.45 }}>Upload a chest X-ray to begin</div>
+              <div style={{ fontSize: 12, opacity: 0.3 }}>Results will appear here after running the pipeline</div>
+            </div>
+          )}
+        </main>
+      </div>
+
+      {/* ═══════════════════════════════════
+          FOOTER
+      ═══════════════════════════════════ */}
+      <footer style={{
+        borderTop: `2px solid ${theme.border}`,
+        padding: "18px 32px",
+        background: `linear-gradient(135deg, ${theme.surfaceAlt} 0%, ${theme.surface} 100%)`,
+        textAlign: "center",
+        fontSize: 13,
+        color: theme.textMuted,
+        fontWeight: 600,
+        letterSpacing: 0.5,
+        transition: "background .3s, border-color .3s, color .3s",
+        position: "relative",
+        boxShadow: "0 -2px 10px rgba(0,0,0,0.05)",
+        backdropFilter: "blur(8px)",
+        WebkitBackdropFilter: "blur(8px)",
+      }}>
+        <div style={{
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          gap: 8,
+          opacity: 0.8
+        }}>
+          <span style={{ fontSize: 16 }}>©</span>
+          <span>2026 BioStack. All rights reserved.</span>
+          
+        </div>
+      </footer>
+    </div>
+  );
+}

src/App.test.js

@@ -0,0 +1,8 @@
+import { render, screen } from '@testing-library/react';
+import App from './App';
+
+test('renders learn react link', () => {
+  render(<App />);
+  const linkElement = screen.getByText(/learn react/i);
+  expect(linkElement).toBeInTheDocument();
+});

src/index.css

@@ -0,0 +1,13 @@
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
+}

src/index.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import './index.css';
+import App from './App';
+import reportWebVitals from './reportWebVitals';
+
+const root = ReactDOM.createRoot(document.getElementById('root'));
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);
+
+// If you want to start measuring performance in your app, pass a function
+// to log results (for example: reportWebVitals(console.log))
+// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
+reportWebVitals();

src/reportWebVitals.js

@@ -0,0 +1,13 @@
+const reportWebVitals = onPerfEntry => {
+  if (onPerfEntry && onPerfEntry instanceof Function) {
+    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
+      getCLS(onPerfEntry);
+      getFID(onPerfEntry);
+      getFCP(onPerfEntry);
+      getLCP(onPerfEntry);
+      getTTFB(onPerfEntry);
+    });
+  }
+};
+
+export default reportWebVitals;

src/setupTests.js

@@ -0,0 +1,5 @@
+// jest-dom adds custom jest matchers for asserting on DOM nodes.
+// allows you to do things like:
+// expect(element).toHaveTextContent(/react/i)
+// learn more: https://github.com/testing-library/jest-dom
+import '@testing-library/jest-dom';