🚀 Initial deploy of ToothMap Full-Stack App

.dockerignore

@@ -0,0 +1,5 @@
+node_modules/
+.git/
+__pycache__/
+*.pyc
+.env

Dockerfile

@@ -0,0 +1,36 @@
+# Stage 1: Build the React Frontend
+FROM node:18 AS build-frontend
+WORKDIR /app/frontend
+COPY toothmap_frontend/package*.json ./
+RUN npm install
+COPY toothmap_frontend/ ./
+RUN npm run build
+
+# Stage 2: Setup the Python Backend
+FROM python:3.12-slim
+WORKDIR /app
+
+# Install system dependencies required by OpenCV
+RUN apt-get update && apt-get install -y \
+    libgl1-mesa-glx \
+    libglib2.0-0 \
+    && rm -rf /var/lib/apt/lists/*
+
+# Install Python dependencies
+COPY requirements.txt .
+RUN pip install --no-cache-dir -r requirements.txt
+
+# Copy models
+COPY checkpoints/ /app/checkpoints/
+
+# Copy backend code
+COPY toothmap_backend/ /app/
+
+# Copy built React frontend to static folder
+COPY --from=build-frontend /app/frontend/dist /app/static
+
+# Expose Hugging Face default port
+EXPOSE 7860
+
+# Run FastAPI serving both the backend APIs and frontend static files
+CMD ["uvicorn", "main:app", "--host", "0.0.0.0", "--port", "7860"]

checkpoints/frcnn_best.pt

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:527a79f84d68360fd2ee3f60a87b4476c287dec83d1069077eb8c33583bdf6e4
+size 174040805

checkpoints/resnet18_cls_best.pt

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:25d220e93a7e07f365d1646f47b20d114531a93bf7afac31e4bf3a4a8f372783
+size 44852299

checkpoints/unet_resnet34_best.pt

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:56743ec2eafd622bb8637704abacdf490a3fb5fd35fffe367a053d7040c7ceaa
+size 97922503

checkpoints/yolo_best.pt

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:458c476524831cde80ef996b023815b904e5f379cf491122c1821a0e89556dcc
+size 22543466

requirements.txt

@@ -0,0 +1,10 @@
+fastapi==0.110.0
+uvicorn==0.27.1
+python-multipart==0.0.9
+torch==2.5.1
+torchvision==0.20.1
+ultralytics==8.3.40
+segmentation-models-pytorch==0.3.4
+albumentations==1.4.23
+opencv-python-headless==4.10.0.84
+numpy==2.1.3

toothmap_backend/main.py

@@ -0,0 +1,246 @@
+from fastapi import FastAPI, UploadFile, File
+from fastapi.staticfiles import StaticFiles
+from fastapi.responses import HTMLResponse
+import cv2
+import numpy as np
+import torch
+import albumentations as A
+from albumentations.pytorch import ToTensorV2
+from fastapi.middleware.cors import CORSMiddleware
+import models as M
+from ultralytics import YOLO
+import os
+
+app = FastAPI(title="ToothMap AI API")
+
+app.add_middleware(
+    CORSMiddleware,
+    allow_origins=["*"],
+    allow_methods=["*"],
+    allow_headers=["*"],
+)
+
+CKPT_DIR = "/app/checkpoints"
+yolo_model = None
+
+@app.on_event("startup")
+async def startup_event():
+    global yolo_model
+    print("Loading internal PyTorch models...")
+    M.load_models(CKPT_DIR)
+
+    yolo_path = os.path.join(CKPT_DIR, "yolo_best.pt")
+    if os.path.exists(yolo_path):
+        yolo_model = YOLO(yolo_path)
+        print("✅ YOLO loaded.")
+
+# --- Transforms ---
+DET_VAL_TF = A.Compose([
+    A.Normalize(mean=(0.485, 0.456, 0.406), std=(0.229, 0.224, 0.225)),
+    ToTensorV2(),
+])
+
+CLS_VAL_TF = A.Compose([
+    A.Resize(224, 224),
+    A.Normalize(mean=(0.485, 0.456, 0.406), std=(0.229, 0.224, 0.225)),
+    ToTensorV2(),
+])
+
+SEG_VAL_TF = A.Compose([
+    A.Resize(512, 512),
+    A.Normalize(mean=(0.485, 0.456, 0.406), std=(0.229, 0.224, 0.225)),
+    ToTensorV2(),
+])
+
+def read_image(file_bytes):
+    nparr = np.frombuffer(file_bytes, np.uint8)
+    img_bgr = cv2.imdecode(nparr, cv2.IMREAD_COLOR)
+    return img_bgr
+
+@app.get("/api/health")
+def health():
+    return {
+        "frcnn": "frcnn" in M.MODELS,
+        "cls": "cls" in M.MODELS,
+        "unet": "unet" in M.MODELS,
+        "yolo": yolo_model is not None,
+        "device": str(M.DEVICE),
+    }
+
+def _classify_crop(img_rgb_crop: np.ndarray) -> dict:
+    """Run ResNet18 on a single cropped tooth and return FDI + confidence."""
+    cls = M.MODELS.get("cls")
+    if cls is None:
+        return {"fdi": -1, "confidence": 0.0}
+    t = CLS_VAL_TF(image=img_rgb_crop)
+    img_t = t["image"].unsqueeze(0).to(M.DEVICE)
+    with torch.no_grad():
+        pred = cls(img_t)
+        probs = torch.softmax(pred, dim=1)
+        fdi_idx = pred.argmax(dim=1).item()
+        score = probs[0, fdi_idx].item()
+    quad = fdi_idx // 8
+    num  = fdi_idx % 8
+    real_fdi = (quad + 1) * 10 + (num + 1)
+    return {"fdi": real_fdi, "confidence": round(score, 4)}
+
+def _segment_crop(img_rgb_crop: np.ndarray) -> str:
+    """Run U-Net on a single cropped tooth, return base64 PNG mask with alpha."""
+    import base64
+    unet = M.MODELS.get("unet")
+    if unet is None or img_rgb_crop.size == 0:
+        return ""
+    t = SEG_VAL_TF(image=img_rgb_crop)
+    img_t = t["image"].unsqueeze(0).to(M.DEVICE)
+    with torch.no_grad():
+        out = unet(img_t)
+        mask = (torch.sigmoid(out) > 0.5).squeeze().cpu().numpy()
+    mask_cv = (mask * 255).astype(np.uint8)
+    rgba = np.zeros((mask_cv.shape[0], mask_cv.shape[1], 4), dtype=np.uint8)
+    rgba[:, :, 0] = 255  # B
+    rgba[:, :, 1] = 255  # G
+    rgba[:, :, 2] = 255  # R
+    rgba[:, :, 3] = mask_cv  # A (transparency)
+    _, buf = cv2.imencode('.png', rgba)
+    return base64.b64encode(buf).decode('utf-8')
+
+@app.post("/api/pipeline/yolo")
+async def pipeline_yolo(file: UploadFile = File(...)):
+    """Detect teeth (YOLO) then classify each crop (ResNet18) → returns annotated boxes."""
+    if yolo_model is None:
+        return {"error": "YOLO not loaded"}
+    img_bgr = read_image(await file.read())
+    img_rgb = cv2.cvtColor(img_bgr, cv2.COLOR_BGR2RGB)
+    orig_h, orig_w = img_rgb.shape[:2]
+    img_yolo = cv2.resize(img_rgb, (640, 640))
+    ypred = yolo_model.predict(img_yolo, conf=0.20, verbose=False)[0]
+    boxes = ypred.boxes.xyxy.cpu().numpy()
+    if len(boxes) > 0:
+        boxes[:, [0, 2]] *= (orig_w / 640.0)
+        boxes[:, [1, 3]] *= (orig_h / 640.0)
+    scores = ypred.boxes.conf.cpu().numpy().tolist()
+    results = []
+    for i, box in enumerate(boxes):
+        x1, y1, x2, y2 = map(int, box)
+        x1, y1 = max(0, x1), max(0, y1)
+        x2, y2 = min(orig_w, x2), min(orig_h, y2)
+        crop = img_rgb[y1:y2, x1:x2]
+        cls_result = _classify_crop(crop) if crop.size > 0 else {"fdi": -1, "confidence": 0.0}
+        mask_b64   = _segment_crop(crop)
+        results.append({"box": list(map(float, box)), "score": scores[i], **cls_result, "mask_base64": mask_b64})
+    return {"results": results}
+
+@app.post("/api/pipeline/frcnn")
+async def pipeline_frcnn(file: UploadFile = File(...)):
+    """Detect teeth (FRCNN) then classify each crop (ResNet18) → returns annotated boxes."""
+    frcnn = M.MODELS.get("frcnn")
+    if frcnn is None:
+        return {"error": "FRCNN not loaded"}
+    img_bgr = read_image(await file.read())
+    img_rgb = cv2.cvtColor(img_bgr, cv2.COLOR_BGR2RGB)
+    orig_h, orig_w = img_rgb.shape[:2]
+    IMG_W, IMG_H = 1000, 500
+    img_det = cv2.resize(img_rgb, (IMG_W, IMG_H))
+    t = DET_VAL_TF(image=img_det)
+    img_t = t["image"].unsqueeze(0).to(M.DEVICE)
+    with torch.no_grad():
+        pred = frcnn(img_t)[0]
+    keep = pred["scores"] >= 0.20
+    boxes = pred["boxes"][keep].cpu().numpy()
+    scores = pred["scores"][keep].cpu().numpy().tolist()
+    if len(boxes) > 0:
+        boxes[:, [0, 2]] *= (orig_w / float(IMG_W))
+        boxes[:, [1, 3]] *= (orig_h / float(IMG_H))
+    results = []
+    for i, box in enumerate(boxes):
+        x1, y1, x2, y2 = map(int, box)
+        x1, y1 = max(0, x1), max(0, y1)
+        x2, y2 = min(orig_w, x2), min(orig_h, y2)
+        crop = img_rgb[y1:y2, x1:x2]
+        cls_result = _classify_crop(crop) if crop.size > 0 else {"fdi": -1, "confidence": 0.0}
+        mask_b64   = _segment_crop(crop)
+        results.append({"box": list(map(float, box)), "score": scores[i], **cls_result, "mask_base64": mask_b64})
+    return {"results": results}
+
+@app.post("/api/detect/yolo")
+async def detect_yolo(file: UploadFile = File(...)):
+    if yolo_model is None:
+        return {"error": "YOLO not loaded"}
+    img_bgr = read_image(await file.read())
+    img_rgb = cv2.cvtColor(img_bgr, cv2.COLOR_BGR2RGB)
+    orig_h, orig_w = img_rgb.shape[:2]
+    img_yolo = cv2.resize(img_rgb, (640, 640))
+    ypred = yolo_model.predict(img_yolo, conf=0.20, verbose=False)[0]
+    boxes = ypred.boxes.xyxy.cpu().numpy()
+    if len(boxes) > 0:
+        boxes[:, [0, 2]] *= (orig_w / 640.0)
+        boxes[:, [1, 3]] *= (orig_h / 640.0)
+    scores = ypred.boxes.conf.cpu().numpy().tolist()
+    labels = ypred.boxes.cls.cpu().numpy().astype(int).tolist()
+    return {"boxes": boxes.tolist(), "scores": scores, "labels": labels}
+
+@app.post("/api/detect/frcnn")
+async def detect_frcnn(file: UploadFile = File(...)):
+    frcnn = M.MODELS.get("frcnn")
+    if frcnn is None:
+        return {"error": "FRCNN not loaded"}
+    img_bgr = read_image(await file.read())
+    img_rgb = cv2.cvtColor(img_bgr, cv2.COLOR_BGR2RGB)
+    orig_h, orig_w = img_rgb.shape[:2]
+    IMG_W, IMG_H = 1000, 500
+    img_det = cv2.resize(img_rgb, (IMG_W, IMG_H))
+    t = DET_VAL_TF(image=img_det)
+    img_t = t["image"].unsqueeze(0).to(M.DEVICE)
+    with torch.no_grad():
+        pred = frcnn(img_t)[0]
+    keep = pred["scores"] >= 0.20
+    boxes = pred["boxes"][keep].cpu().numpy()
+    if len(boxes) > 0:
+        boxes[:, [0, 2]] *= (orig_w / float(IMG_W))
+        boxes[:, [1, 3]] *= (orig_h / float(IMG_H))
+    return {
+        "boxes": boxes.tolist(),
+        "scores": pred["scores"][keep].cpu().numpy().tolist(),
+        "labels": pred["labels"][keep].cpu().numpy().tolist()
+    }
+
+@app.post("/api/classify")
+async def classify_crops(file: UploadFile = File(...)):
+    cls = M.MODELS.get("cls")
+    if cls is None:
+        return {"error": "Classifier not loaded"}
+    img_bgr = read_image(await file.read())
+    img_rgb = cv2.cvtColor(img_bgr, cv2.COLOR_BGR2RGB)
+    t = CLS_VAL_TF(image=img_rgb)
+    img_t = t["image"].unsqueeze(0).to(M.DEVICE)
+    with torch.no_grad():
+        pred = cls(img_t)
+        confidences = torch.softmax(pred, dim=1)
+        fdi_idx = pred.argmax(dim=1).item()
+        score = confidences[0, fdi_idx].item()
+    quad = fdi_idx // 8
+    num = fdi_idx % 8
+    real_fdi = (quad + 1) * 10 + (num + 1)
+    return {"fdi": real_fdi, "confidence": score}
+
+@app.post("/api/segment")
+async def segment_unet(file: UploadFile = File(...)):
+    unet = M.MODELS.get("unet")
+    if unet is None:
+        return {"error": "U-Net not loaded"}
+    import base64
+    img_bgr = read_image(await file.read())
+    img_rgb = cv2.cvtColor(img_bgr, cv2.COLOR_BGR2RGB)
+    t = SEG_VAL_TF(image=img_rgb)
+    img_t = t["image"].unsqueeze(0).to(M.DEVICE)
+    with torch.no_grad():
+        out = unet(img_t)
+        mask = (torch.sigmoid(out) > 0.5).squeeze().cpu().numpy()
+    mask_img = (mask * 255).astype(np.uint8)
+    _, buffer = cv2.imencode('.png', mask_img)
+    encoded = base64.b64encode(buffer).decode('utf-8')
+    return {"mask_base64": encoded}
+
+# --- Mount React Frontend ---
+# This MUST be the last route registered so it doesn't shadow API routes
+app.mount("/", StaticFiles(directory="static", html=True), name="static")

toothmap_backend/models.py

@@ -0,0 +1,54 @@
+import torch
+from torch import nn
+from torchvision.models.detection import fasterrcnn_resnet50_fpn_v2
+from torchvision.models.detection.faster_rcnn import FastRCNNPredictor
+from torchvision.models import resnet18
+import segmentation_models_pytorch as smp
+import os
+
+DEVICE = torch.device('cuda' if torch.cuda.is_available() else 'cpu')
+print(f"🖥️  Using device: {DEVICE}")
+
+# Shared model registry - avoids Python import scoping issues with module globals
+MODELS = {}
+
+def build_frcnn():
+    model = fasterrcnn_resnet50_fpn_v2(weights=None)
+    in_features = model.roi_heads.box_predictor.cls_score.in_features
+    model.roi_heads.box_predictor = FastRCNNPredictor(in_features, 33)
+    return model
+
+def build_classifier():
+    model = resnet18(weights=None)
+    model.fc = nn.Sequential(nn.Dropout(0.3), nn.Linear(model.fc.in_features, 32))
+    return model
+
+def build_unet():
+    return smp.Unet(encoder_name="resnet34", encoder_weights=None, in_channels=3, classes=1)
+
+def _strip_dp(state: dict) -> dict:
+    """Strip 'module.' prefix added by nn.DataParallel on Kaggle multi-GPU."""
+    if any(k.startswith("module.") for k in state.keys()):
+        print("   ↳ Stripping DataParallel 'module.' prefix from checkpoint")
+        return {k.replace("module.", "", 1): v for k, v in state.items()}
+    return state
+
+def _load(path: str, model):
+    if not os.path.exists(path):
+        print(f"⚠️  Checkpoint not found: {path}")
+        return model
+    try:
+        state = torch.load(path, map_location=DEVICE, weights_only=False)
+        state = _strip_dp(state)
+        model.load_state_dict(state, strict=False)
+        print(f"✅ Loaded: {os.path.basename(path)}")
+    except Exception as e:
+        print(f"❌ Failed loading {os.path.basename(path)}: {e}")
+    return model
+
+def load_models(ckpt_dir: str):
+    print(f"📦 Loading models from: {ckpt_dir}")
+    MODELS["frcnn"] = _load(os.path.join(ckpt_dir, "frcnn_best.pt"),        build_frcnn()).to(DEVICE).eval()
+    MODELS["cls"]   = _load(os.path.join(ckpt_dir, "resnet18_cls_best.pt"), build_classifier()).to(DEVICE).eval()
+    MODELS["unet"]  = _load(os.path.join(ckpt_dir, "unet_resnet34_best.pt"), build_unet()).to(DEVICE).eval()
+    print("🚀 All PyTorch models ready.")

toothmap_backend/requirements.txt

@@ -0,0 +1,11 @@
+fastapi
+uvicorn
+python-multipart
+# Use latest stable versions to strictly match Kaggle env
+torch>=2.0.0
+torchvision>=0.15.0
+ultralytics
+albumentations
+opencv-python-headless
+segmentation-models-pytorch
+pydantic

toothmap_frontend/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

toothmap_frontend/README.md

@@ -0,0 +1,8 @@
+# React + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh

toothmap_frontend/eslint.config.js

@@ -0,0 +1,38 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import react from 'eslint-plugin-react'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+
+export default [
+  { ignores: ['dist'] },
+  {
+    files: ['**/*.{js,jsx}'],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+      parserOptions: {
+        ecmaVersion: 'latest',
+        ecmaFeatures: { jsx: true },
+        sourceType: 'module',
+      },
+    },
+    settings: { react: { version: '18.3' } },
+    plugins: {
+      react,
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh,
+    },
+    rules: {
+      ...js.configs.recommended.rules,
+      ...react.configs.recommended.rules,
+      ...react.configs['jsx-runtime'].rules,
+      ...reactHooks.configs.recommended.rules,
+      'react/jsx-no-target-blank': 'off',
+      'react-refresh/only-export-components': [
+        'warn',
+        { allowConstantExport: true },
+      ],
+    },
+  },
+]

toothmap_frontend/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + React</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>

toothmap_frontend/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "toothmap_frontend",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.13.0",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "@vitejs/plugin-react": "^4.3.3",
+    "autoprefixer": "^10.5.0",
+    "axios": "^1.15.0",
+    "eslint": "^9.13.0",
+    "eslint-plugin-react": "^7.37.2",
+    "eslint-plugin-react-hooks": "^5.0.0",
+    "eslint-plugin-react-refresh": "^0.4.14",
+    "globals": "^15.11.0",
+    "lucide-react": "^1.8.0",
+    "postcss": "^8.5.10",
+    "react-router-dom": "^7.14.1",
+    "tailwindcss": "^3.4.19",
+    "vite": "^5.4.10"
+  }
+}

toothmap_frontend/postcss.config.js

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

toothmap_frontend/src/App.css

@@ -0,0 +1,42 @@
+#root {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+.logo {
+  height: 6em;
+  padding: 1.5em;
+  will-change: filter;
+  transition: filter 300ms;
+}
+.logo:hover {
+  filter: drop-shadow(0 0 2em #646cffaa);
+}
+.logo.react:hover {
+  filter: drop-shadow(0 0 2em #61dafbaa);
+}
+
+@keyframes logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  a:nth-of-type(2) .logo {
+    animation: logo-spin infinite 20s linear;
+  }
+}
+
+.card {
+  padding: 2em;
+}
+
+.read-the-docs {
+  color: #888;
+}

toothmap_frontend/src/App.jsx

@@ -0,0 +1,253 @@
+import React, { useState, useRef, useEffect } from 'react';
+import axios from 'axios';
+import { UploadCloud, Activity, Loader2, ScanLine } from 'lucide-react';
+
+// Leave empty for relative routing (needed for Hugging Face Spaces subdomains)
+const API_BASE = "";
+
+const MODES = [
+  { id: 'pipeline_yolo',  label: '🦷 Full Pipeline (YOLO + FDI)',  desc: 'Detect → FDI label + per-tooth segmentation mask' },
+  { id: 'pipeline_frcnn', label: '🦷 Full Pipeline (FRCNN + FDI)', desc: 'Detect → FDI label + per-tooth segmentation mask' },
+  { id: 'seg_yolo',       label: '🔬 Segmentation (YOLO + UNet)',   desc: 'Detect teeth → highlight each tooth boundary with U-Net' },
+  { id: 'seg_frcnn',      label: '🔬 Segmentation (FRCNN + UNet)',  desc: 'Detect teeth → highlight each tooth boundary with U-Net' },
+  { id: 'yolo',           label: 'Detection Only (YOLOv8)',          desc: 'Raw bounding boxes only' },
+  { id: 'frcnn',          label: 'Detection Only (Faster R-CNN)',    desc: 'Raw bounding boxes only' },
+];
+
+// Distinct colours for FDI quadrants 1-4
+const QUADRANT_COLOURS = ['#3b82f6', '#22c55e', '#f59e0b', '#ef4444'];
+
+function getColour(fdi) {
+  if (!fdi || fdi < 0) return '#a855f7';
+  const quad = Math.floor(fdi / 10) - 1;
+  return QUADRANT_COLOURS[Math.min(quad, 3)] ?? '#a855f7';
+}
+
+export default function App() {
+  const [file, setFile] = useState(null);
+  const [imagePreview, setImagePreview] = useState(null);
+  const [mode, setMode] = useState('pipeline_yolo');
+  const [pipelineResults, setPipelineResults] = useState(null); // [{box,score,fdi,confidence}]
+  const [rawBoxes, setRawBoxes] = useState(null);               // {boxes,scores}
+  const [maskSrc, setMaskSrc] = useState(null);
+  const [loading, setLoading] = useState(false);
+  const imgRef = useRef(null);
+  const canvasRef = useRef(null);
+
+  const handleFileSelect = (f) => {
+    setFile(f);
+    setImagePreview(URL.createObjectURL(f));
+    setPipelineResults(null);
+    setRawBoxes(null);
+    setMaskSrc(null);
+  };
+
+  const handleAPI = async () => {
+    if (!file) return;
+    setLoading(true);
+    setPipelineResults(null); setRawBoxes(null); setMaskSrc(null);
+    const fd = new FormData();
+    fd.append("file", file);
+    try {
+      if (mode === 'pipeline_yolo') {
+        const r = await axios.post(`${API_BASE}/api/pipeline/yolo`, fd);
+        setPipelineResults(r.data.results);
+      } else if (mode === 'pipeline_frcnn') {
+        const r = await axios.post(`${API_BASE}/api/pipeline/frcnn`, fd);
+        setPipelineResults(r.data.results);
+      } else if (mode === 'seg_yolo') {
+        const r = await axios.post(`${API_BASE}/api/pipeline/yolo`, fd);
+        setPipelineResults(r.data.results);
+      } else if (mode === 'seg_frcnn') {
+        const r = await axios.post(`${API_BASE}/api/pipeline/frcnn`, fd);
+        setPipelineResults(r.data.results);
+      } else if (mode === 'yolo') {
+        const r = await axios.post(`${API_BASE}/api/detect/yolo`, fd);
+        setRawBoxes(r.data);
+      } else if (mode === 'frcnn') {
+        const r = await axios.post(`${API_BASE}/api/detect/frcnn`, fd);
+        setRawBoxes(r.data);
+      }
+    } catch (e) {
+      console.error(e);
+      alert("Error contacting the AI server. Ensure the FastAPI server is running on port 8000.");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  // Draw canvas overlays
+  useEffect(() => {
+    if (!canvasRef.current || !imgRef.current) return;
+    const img = imgRef.current;
+    const ctx = canvasRef.current.getContext('2d');
+    const { width, height } = img.getBoundingClientRect();
+    canvasRef.current.width = width;
+    canvasRef.current.height = height;
+    const sx = width / img.naturalWidth;
+    const sy = height / img.naturalHeight;
+    ctx.clearRect(0, 0, width, height);
+
+    // Pipeline / segmentation mode
+    if (pipelineResults) {
+      const showFDI = (mode === 'pipeline_yolo' || mode === 'pipeline_frcnn');
+      pipelineResults.forEach(({ box, score, fdi, mask_base64 }) => {
+        const [x1, y1, x2, y2] = box;
+        const rx = x1 * sx, ry = y1 * sy, rw = (x2 - x1) * sx, rh = (y2 - y1) * sy;
+        const col = showFDI ? getColour(fdi) : '#22d3ee';
+
+        // Draw segmentation mask — tinted fill inside the actual tooth boundary
+        if (mask_base64) {
+          const maskImg = new Image();
+          maskImg.onload = () => {
+            const off = document.createElement('canvas');
+            off.width = rw; off.height = rh;
+            const octx = off.getContext('2d');
+            
+            // Draw solid colour background
+            octx.fillStyle = col;
+            octx.fillRect(0, 0, rw, rh);
+            
+            // Mask the solid colour using the alpha channel of the PNG
+            octx.globalCompositeOperation = 'destination-in';
+            octx.drawImage(maskImg, 0, 0, rw, rh);
+            
+            // Draw onto main canvas
+            ctx.save();
+            ctx.globalAlpha = 0.50;
+            ctx.drawImage(off, rx, ry);
+            ctx.restore();
+          };
+          maskImg.src = `data:image/png;base64,${mask_base64}`;
+        }
+
+        // Bounding box
+        ctx.strokeStyle = col; ctx.lineWidth = 2;
+        ctx.strokeRect(rx, ry, rw, rh);
+        // Label — only in pipeline (FDI) modes
+        const label = showFDI
+          ? (fdi > 0 ? `FDI ${fdi}` : `${(score*100).toFixed(0)}%`)
+          : `${(score*100).toFixed(0)}%`;
+        const textW = ctx.measureText(label).width + 10;
+        ctx.fillStyle = col;
+        ctx.fillRect(rx, ry - 20, textW, 20);
+        ctx.fillStyle = 'white'; ctx.font = 'bold 12px Arial';
+        ctx.fillText(label, rx + 5, ry - 5);
+      });
+    }
+
+    // Raw detection mode
+    if (rawBoxes?.boxes) {
+      rawBoxes.boxes.forEach((box, i) => {
+        const [x1, y1, x2, y2] = box;
+        const rx = x1 * sx, ry = y1 * sy, rw = (x2 - x1) * sx, rh = (y2 - y1) * sy;
+        ctx.strokeStyle = '#3b82f6'; ctx.lineWidth = 2;
+        ctx.strokeRect(rx, ry, rw, rh);
+        const s = `${(rawBoxes.scores[i] * 100).toFixed(0)}%`;
+        ctx.fillStyle = '#3b82f6'; ctx.fillRect(rx, ry - 20, 40, 20);
+        ctx.fillStyle = 'white'; ctx.font = '12px Arial';
+        ctx.fillText(s, rx + 4, ry - 5);
+      });
+    }
+  }, [pipelineResults, rawBoxes]);
+
+  // Legend for pipeline mode
+  const quadrantNames = ['Q1 (Upper Right)', 'Q2 (Upper Left)', 'Q3 (Lower Left)', 'Q4 (Lower Right)'];
+
+  return (
+    <div className="min-h-screen flex flex-col bg-zinc-950 font-sans text-slate-200">
+      <header className="px-8 py-4 border-b border-zinc-800/50 flex items-center gap-3">
+        <Activity size={22} className="text-blue-500" />
+        <h1 className="text-lg font-bold bg-gradient-to-r from-blue-400 to-indigo-400 bg-clip-text text-transparent">
+          ToothMap AI Dashboard
+        </h1>
+      </header>
+
+      <main className="flex-1 flex overflow-hidden">
+        {/* Sidebar */}
+        <aside className="w-80 bg-zinc-900/40 border-r border-zinc-800/50 p-5 flex flex-col gap-4">
+          <div className="space-y-2">
+            <p className="text-xs font-semibold text-slate-500 uppercase tracking-widest mb-2">AI Mode</p>
+            {MODES.map(m => (
+              <button key={m.id} onClick={() => setMode(m.id)}
+                className={`w-full text-left px-3 py-2.5 rounded-lg border text-sm transition-all ${
+                  mode === m.id
+                    ? 'bg-blue-500/10 border-blue-500/50 text-blue-300'
+                    : 'bg-zinc-800/20 border-zinc-700/30 text-slate-400 hover:bg-zinc-800/40'
+                }`}>
+                <div className="font-medium">{m.label}</div>
+                <div className="text-xs text-zinc-500 mt-0.5">{m.desc}</div>
+              </button>
+            ))}
+          </div>
+
+          <div className="border-2 border-dashed border-zinc-700/50 hover:border-blue-500/50 transition-colors rounded-xl p-6 flex flex-col items-center text-center cursor-pointer bg-zinc-900/20 group"
+            onClick={() => document.getElementById('fu').click()}
+            onDragOver={e => e.preventDefault()}
+            onDrop={e => { e.preventDefault(); if (e.dataTransfer.files[0]) handleFileSelect(e.dataTransfer.files[0]); }}>
+            <UploadCloud size={32} className="text-zinc-500 group-hover:text-blue-400 mb-2 transition-colors" />
+            <p className="text-sm font-medium">{file ? file.name : 'Drag & Drop X-Ray'}</p>
+            <p className="text-xs text-zinc-500 mt-1">or click to browse</p>
+            <input type="file" id="fu" className="hidden" accept="image/*"
+              onChange={e => handleFileSelect(e.target.files[0])} />
+          </div>
+
+          <button onClick={handleAPI} disabled={!file || loading}
+            className={`w-full py-3 rounded-lg font-semibold flex items-center justify-center gap-2 transition-all ${
+              !file ? 'bg-zinc-800 text-zinc-500 cursor-not-allowed' : 'bg-blue-600 hover:bg-blue-500 text-white shadow-lg shadow-blue-900/30'
+            }`}>
+            {loading ? <Loader2 size={18} className="animate-spin" /> : <ScanLine size={18} />}
+            {loading ? 'Analysing...' : 'Run AI Analysis'}
+          </button>
+
+          {/* Legend */}
+          {pipelineResults && (
+            <div className="mt-2">
+              <p className="text-xs text-zinc-500 uppercase tracking-widest mb-2">FDI Quadrants</p>
+              {quadrantNames.map((name, i) => (
+                <div key={i} className="flex items-center gap-2 text-xs mb-1">
+                  <span className="w-3 h-3 rounded-sm flex-shrink-0" style={{ background: QUADRANT_COLOURS[i] }} />
+                  <span className="text-zinc-400">{name}</span>
+                </div>
+              ))}
+            </div>
+          )}
+
+          {/* Stats Panel */}
+          {pipelineResults && (
+            <div className="bg-zinc-800/30 rounded-lg p-3 text-sm">
+              <p className="text-zinc-400 text-xs mb-1">Detected Teeth</p>
+              <p className="text-2xl font-bold text-white">{pipelineResults.length}</p>
+              {pipelineResults.slice(0,6).map((r, i) => (
+                <div key={i} className="flex justify-between text-xs text-zinc-500 mt-1">
+                  <span style={{ color: getColour(r.fdi) }}>FDI {r.fdi > 0 ? r.fdi : '?'}</span>
+                  <span>{(r.confidence * 100).toFixed(0)}% conf</span>
+                </div>
+              ))}
+              {pipelineResults.length > 6 && <p className="text-xs text-zinc-600 mt-1">+{pipelineResults.length - 6} more...</p>}
+            </div>
+          )}
+        </aside>
+
+        {/* Canvas */}
+        <section className="flex-1 bg-zinc-950/80 p-8 flex items-center justify-center overflow-auto">
+          {!imagePreview ? (
+            <div className="text-center text-zinc-600">
+              <UploadCloud size={64} className="mx-auto opacity-20 mb-4" />
+              <p className="text-lg">No patient X-Ray selected</p>
+            </div>
+          ) : (
+            <div className="relative inline-block border border-zinc-800 rounded-lg overflow-hidden shadow-2xl">
+              <img ref={imgRef} src={imagePreview} alt="X-ray"
+                className="max-w-full max-h-[85vh] object-contain block rounded" />
+              <canvas ref={canvasRef} className="absolute top-0 left-0 pointer-events-none" />
+              {maskSrc && (
+                <img src={maskSrc} className="absolute top-0 left-0 w-full h-full object-fill pointer-events-none opacity-50 mix-blend-screen" alt="Segmentation Mask" />
+              )}
+            </div>
+          )}
+        </section>
+      </main>
+    </div>
+  );
+}

toothmap_frontend/src/index.css

@@ -0,0 +1,13 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  body {
+    @apply bg-zinc-950 text-slate-200 antialiased;
+  }
+}
+
+.glass-panel {
+  @apply bg-zinc-900/40 backdrop-blur-md border border-zinc-700/50 shadow-xl;
+}

toothmap_frontend/src/main.jsx

@@ -0,0 +1,10 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import App from './App.jsx'
+import './index.css'
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+)

toothmap_frontend/tailwind.config.js

@@ -0,0 +1,11 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: [
+    "./index.html",
+    "./src/**/*.{js,ts,jsx,tsx}",
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}

toothmap_frontend/vite.config.js

@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [react()],
+})