Replace Space with NeuraScan final version

README.md

@@ -1,11 +1,37 @@
----
-title: CerebroScan
-emoji: 📚
-colorFrom: red
-colorTo: gray
-sdk: docker
-pinned: false
-license: mit
----
-
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# NeuraScan (Hugging Face Space)
+
+Flask app for AI-assisted brain MRI screening (demo).
+
+## Repo layout
+
+- `app.py` - Flask backend + inference API
+- `templates/index.html` - Simple, maintainable UI (no bundler required)
+- `static/assets/brain/` - Logo + example images
+- `static/assets/images/team/` - Team member photos (local)
+- `models/` - Put your trained `.h5` files here
+
+## Add your models
+
+Place these files under `models/`:
+
+- `resnet50.h5`
+- `resnet101.h5`
+- `efficientnetb2.h5`
+
+If you want different names/paths, edit `MODEL_SPECS` in `app.py`.
+
+## Run locally
+
+```bash
+pip install -r requirements.txt
+python app.py
+```
+
+Then open http://localhost:7860
+
+## API
+
+- `GET /api/models` -> available model IDs and names
+- `POST /api/classify` (multipart form):
+  - `file`: image file
+  - `model_id`: one of `atlas`, `orion`, `pulse`

app.py

@@ -1,97 +1,197 @@
 import os
-import sys
+import re
+from dataclasses import dataclass
+from typing import Dict, List, Tuple
+
 import numpy as np
-from flask import Flask, render_template, request, jsonify, send_from_directory
+from flask import Flask, jsonify, render_template, request
 
 import tensorflow as tf
 from tensorflow.keras.models import load_model
-from tensorflow.keras.applications.resnet50 import preprocess_input
 
-app = Flask(__name__, template_folder='templates', static_folder='static')
 
-# 1. Load Model (Safe Mode)
-MODEL_PATH = 'model.h5'
-model = None
+# ----------------------------
+# Model definitions
+# ----------------------------
+
+@dataclass(frozen=True)
+class ModelSpec:
+    id: str
+    display_name: str          # what the user sees (friendly + technical)
+    filename: str              # under ./models/
+    arch: str                  # "resnet" | "efficientnet"
+    img_size: int              # input resolution
+    class_names: Tuple[str, ...]  # output order used during training
+    recommended_threshold: float  # per-model uncertainty cutoff (from notebooks)
+
+
+# NOTE:
+# Your training notebooks use *different* class ordering between the ResNet notebooks
+# (sorted unique categories) and the EfficientNet notebook (explicit list).
+# We keep per-model class order to avoid mislabeling probabilities.
+RESNET_CLASS_ORDER = ("MildDemented", "ModerateDemented", "NonDemented", "VeryMildDemented")
+EFFICIENTNET_CLASS_ORDER = ("NonDemented", "VeryMildDemented", "MildDemented", "ModerateDemented")
+
+MODEL_SPECS: List[ModelSpec] = [
+    ModelSpec("atlas", "Atlas — ResNet-50", "resnet50.h5", "resnet", 224, RESNET_CLASS_ORDER, 0.95),
+    ModelSpec("orion", "Orion — ResNet-101", "resnet101.h5", "resnet", 224, RESNET_CLASS_ORDER, 0.95),
+    ModelSpec("pulse", "Pulse — EfficientNet-B2", "efficientnetb2.h5", "efficientnet", 260, EFFICIENTNET_CLASS_ORDER, 0.95),
+]
+
+
+
+# ----------------------------
+# Flask app
+# ----------------------------
+
+app = Flask(__name__)
+
+# Lazy-loaded models (load on first use). Keep only what we need in CPU Spaces.
+_loaded_models: Dict[str, tf.keras.Model] = {}
 
-try:
-    model = load_model(MODEL_PATH, compile=False)
-    print("SUCCESS: Model loaded!", file=sys.stderr)
-except Exception as e:
-    print(f"CRITICAL ERROR: Failed to load model. {e}", file=sys.stderr)
 
-CLASS_NAMES = ['Mild Demented', 'Moderate Demented', 'Non Demented', 'Very Mild Demented']
-CONFIDENCE_THRESHOLD = 0.80
+def _get_spec(model_id: str) -> ModelSpec:
+    for s in MODEL_SPECS:
+        if s.id == model_id:
+            return s
+    raise KeyError(f"Unknown model_id: {model_id}")
 
-def prepare_image(img_bytes):
+
+def _get_preprocess_fn(arch: str):
+    if arch == "resnet":
+        from tensorflow.keras.applications.resnet50 import preprocess_input as resnet_preprocess
+        return resnet_preprocess
+    if arch == "efficientnet":
+        from tensorflow.keras.applications.efficientnet import preprocess_input as eff_preprocess
+        return eff_preprocess
+    raise ValueError(f"Unknown arch: {arch}")
+
+
+def _load_model(spec: ModelSpec) -> tf.keras.Model:
+    if spec.id in _loaded_models:
+        return _loaded_models[spec.id]
+
+    model_path = os.path.join(os.path.dirname(__file__), "models", spec.filename)
+    if not os.path.exists(model_path):
+        raise FileNotFoundError(
+            f"Model file not found: {model_path}. "
+            f"Place it at models/{spec.filename} in your Space."
+        )
+
+    # CPU-friendly TF settings (small wins on free Spaces)
     try:
-        image = tf.io.decode_image(img_bytes, channels=3, expand_animations=False)
-        image = tf.image.resize(image, [224, 224])
-        image = tf.cast(image, tf.float32)
-        image = tf.expand_dims(image, axis=0)
-        image = preprocess_input(image)
-        
-        return image
-    except Exception as e:
-        print(f"Error processing image: {e}", file=sys.stderr)
-        raise e
+        tf.config.threading.set_intra_op_parallelism_threads(0)
+        tf.config.threading.set_inter_op_parallelism_threads(0)
+    except Exception:
+        pass
+
+    model = load_model(model_path, compile=False)
+    _loaded_models[spec.id] = model
+    return model
+
+
+def _read_image(file_storage, img_size: int, preprocess_fn):
+    # Decode image
+    raw = file_storage.read()
+    image = tf.io.decode_image(raw, channels=3, expand_animations=False)
+    image = tf.image.resize(image, [img_size, img_size])
+    image = tf.cast(image, tf.float32)
+    image = preprocess_fn(image)
+    image = tf.expand_dims(image, axis=0)  # [1, H, W, 3]
+    return image
 
-# --- ROUTES ---
 
-@app.route('/')
+def _predict(model: tf.keras.Model, image_tensor, class_names: Tuple[str, ...], threshold: float):
+    probs = model.predict(image_tensor, verbose=0)[0].astype(float)
+    probs = np.clip(probs, 0.0, 1.0)
+
+    best_idx = int(np.argmax(probs))
+    best_prob = float(np.max(probs))
+
+    # Add "Uncertain" post-hoc (not a model output class)
+    is_uncertain = best_prob < threshold
+
+    # Build response payload
+    by_class = [
+        {"id": name, "label": _pretty_label(name), "prob": float(probs[i])}
+        for i, name in enumerate(class_names)
+    ]
+    by_class.sort(key=lambda x: x["prob"], reverse=True)
+
+    return {
+        "prediction": {
+            "id": "Uncertain" if is_uncertain else class_names[best_idx],
+            "label": "Uncertain" if is_uncertain else _pretty_label(class_names[best_idx]),
+            "confidence": best_prob,
+            "threshold": threshold,
+        },
+        "probabilities": by_class,
+    }
+
+
+def _pretty_label(name: str) -> str:
+    # Internal training labels -> user-facing labels (final wording)
+    mapping = {
+        "NonDemented": "Healthy",
+        "VeryMildDemented": "Very Mildly Demented",
+        "MildDemented": "Mildly Demented",
+        "ModerateDemented": "Moderately Demented",
+        # Post-hoc
+        "Uncertain": "Uncertain",
+    }
+    return mapping.get(name, name)
+
+
+@app.get("/")
 def home():
-    return render_template('index.html')
-
-@app.route('/assets/<path:filename>')
-def serve_assets(filename):
-    return send_from_directory('static/assets', filename)
-
-@app.route('/<path:filename>')
-def serve_root_files(filename):
-    return send_from_directory('static', filename)
-
-# Predict Route
-@app.route('/api/classify', methods=['POST'])
-def predict():
-    if model is None:
-        return jsonify({'error': 'Model not loaded correctly'}), 500
-
-    if not request.files:
-        return jsonify({'error': 'No file uploaded'}), 400
-    
-    file = next(iter(request.files.values()))
-    
+    return render_template("index.html")
+
+
+@app.get("/api/models")
+def api_models():
+    return jsonify({
+        "models": [
+            {
+                "id": s.id,
+                "name": s.display_name,
+                "img_size": s.img_size,
+                "classes": [{"id": c, "label": _pretty_label(c)} for c in s.class_names],
+                "recommended_threshold": s.recommended_threshold,
+            }
+            for s in MODEL_SPECS
+        ],
+        "default_model_id": MODEL_SPECS[0].id,
+    })
+
+
+
+@app.post("/api/classify")
+def api_classify():
+    if "file" not in request.files:
+        return jsonify({"error": "No file uploaded (field name must be 'file')."}), 400
+
+    model_id = request.form.get("model_id", MODEL_SPECS[0].id)
+    spec = _get_spec(model_id)
+    # Threshold is model-specific and not user-adjustable
+    threshold = spec.recommended_threshold
+
     try:
-        file_bytes = file.read()
-        processed_img = prepare_image(file_bytes)
-        
-        prediction_tensor = model(processed_img, training=False)
-        prediction = prediction_tensor.numpy()
-        
-        class_index = np.argmax(prediction)
-        confidence = float(np.max(prediction))
-        
-        if confidence < CONFIDENCE_THRESHOLD:
-            result_class = "Not Sure"
-            message = "Uncertain prediction. Please interpret with caution or upload a clearer image."
-            is_uncertain = True
-        else:
-            result_class = CLASS_NAMES[class_index]
-            message = "Prediction success."
-            is_uncertain = False
-        
-        result = {
-            'result': result_class,
-            'confidence': confidence,
-            'message': message,
-            'is_uncertain': is_uncertain,
-            'top_class_suggestion': CLASS_NAMES[class_index] 
-        }
-        
-        return jsonify(result)
-        
+        model = _load_model(spec)
+        preprocess_fn = _get_preprocess_fn(spec.arch)
+
+        image_tensor = _read_image(request.files["file"], spec.img_size, preprocess_fn)
+        payload = _predict(model, image_tensor, spec.class_names, threshold)
+
+        payload["model"] = {"id": spec.id, "name": spec.display_name}
+        return jsonify(payload)
+
+    except FileNotFoundError as e:
+        return jsonify({"error": str(e)}), 500
     except Exception as e:
-        print(f"PREDICTION CRASHED: {str(e)}", file=sys.stderr)
-        return jsonify({'error': str(e)}), 500
+        return jsonify({"error": f"Failed to classify image: {e}"}), 500
+
 
-if __name__ == '__main__':
-    app.run(host='0.0.0.0', port=7860, debug=False)
+if __name__ == "__main__":
+    # Local dev: python app.py
+    # In Spaces (Dockerfile), gunicorn is used.
+    app.run(host="0.0.0.0", port=int(os.getenv("PORT", "7860")), debug=False)

models/README.md

@@ -0,0 +1,4 @@
+Place your model files here:
+- resnet50.h5
+- resnet101.h5
+- efficientnetb2.h5

models/efficientnetb2.h5

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:92ca0621bacfb11477e4242a4d38409b4f44a33483b5167dc5808e3413f7e243
+size 102821032

models/resnet101.h5

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:33946fb58dc03e58886e2b40fabff8ce545c6d75808b3ac87ab7d6b4cd75d39a
+size 524986352

static/assets/brain/PLACE_IMAGES_HERE.txt

@@ -0,0 +1,3 @@
+Put these files here:
+- supportedexample.jpg
+- unsupportedexample.jpg

static/assets/index-CtQJEsfm.css

@@ -1 +0,0 @@
-*,:before,:after{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}:before,:after{--tw-content: ""}html,:host{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]{display:none}.absolute{position:absolute}.relative{position:relative}.inset-0{top:0;right:0;bottom:0;left:0}.mx-auto{margin-left:auto;margin-right:auto}.mb-2{margin-bottom:.5rem}.mb-4{margin-bottom:1rem}.mb-6{margin-bottom:1.5rem}.mb-8{margin-bottom:2rem}.ml-2{margin-left:.5rem}.mr-2{margin-right:.5rem}.mt-0\.5{margin-top:.125rem}.mt-2{margin-top:.5rem}.mt-4{margin-top:1rem}.mt-8{margin-top:2rem}.mt-auto{margin-top:auto}.flex{display:flex}.grid{display:grid}.h-12{height:3rem}.h-16{height:4rem}.h-32{height:8rem}.h-4{height:1rem}.h-5{height:1.25rem}.h-6{height:1.5rem}.h-64{height:16rem}.h-8{height:2rem}.h-full{height:100%}.min-h-screen{min-height:100vh}.w-12{width:3rem}.w-32{width:8rem}.w-4{width:1rem}.w-5{width:1.25rem}.w-6{width:1.5rem}.w-8{width:2rem}.w-full{width:100%}.max-w-2xl{max-width:42rem}.max-w-4xl{max-width:56rem}.max-w-7xl{max-width:80rem}.flex-shrink-0{flex-shrink:0}.flex-grow{flex-grow:1}.rotate-6{--tw-rotate: 6deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}@keyframes pulse{50%{opacity:.5}}.animate-pulse{animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}.cursor-pointer{cursor:pointer}.list-inside{list-style-position:inside}.list-disc{list-style-type:disc}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.flex-col{flex-direction:column}.items-start{align-items:flex-start}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-6{gap:1.5rem}.space-x-2>:not([hidden])~:not([hidden]){--tw-space-x-reverse: 0;margin-right:calc(.5rem * var(--tw-space-x-reverse));margin-left:calc(.5rem * calc(1 - var(--tw-space-x-reverse)))}.space-x-4>:not([hidden])~:not([hidden]){--tw-space-x-reverse: 0;margin-right:calc(1rem * var(--tw-space-x-reverse));margin-left:calc(1rem * calc(1 - var(--tw-space-x-reverse)))}.space-y-2>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.5rem * var(--tw-space-y-reverse))}.space-y-3>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(.75rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.75rem * var(--tw-space-y-reverse))}.space-y-4>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(1rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem * var(--tw-space-y-reverse))}.space-y-6>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.5rem * var(--tw-space-y-reverse))}.space-y-8>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(2rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(2rem * var(--tw-space-y-reverse))}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.rounded-md{border-radius:.375rem}.border-2{border-width:2px}.border-dashed{border-style:dashed}.border-blue-500{--tw-border-opacity: 1;border-color:rgb(59 130 246 / var(--tw-border-opacity))}.border-gray-200{--tw-border-opacity: 1;border-color:rgb(229 231 235 / var(--tw-border-opacity))}.border-gray-300{--tw-border-opacity: 1;border-color:rgb(209 213 219 / var(--tw-border-opacity))}.border-green-200{--tw-border-opacity: 1;border-color:rgb(187 247 208 / var(--tw-border-opacity))}.border-red-200{--tw-border-opacity: 1;border-color:rgb(254 202 202 / var(--tw-border-opacity))}.bg-blue-100{--tw-bg-opacity: 1;background-color:rgb(219 234 254 / var(--tw-bg-opacity))}.bg-blue-50{--tw-bg-opacity: 1;background-color:rgb(239 246 255 / var(--tw-bg-opacity))}.bg-blue-600{--tw-bg-opacity: 1;background-color:rgb(37 99 235 / var(--tw-bg-opacity))}.bg-gray-200{--tw-bg-opacity: 1;background-color:rgb(229 231 235 / var(--tw-bg-opacity))}.bg-gray-50{--tw-bg-opacity: 1;background-color:rgb(249 250 251 / var(--tw-bg-opacity))}.bg-red-50{--tw-bg-opacity: 1;background-color:rgb(254 242 242 / var(--tw-bg-opacity))}.bg-white{--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity))}.object-contain{-o-object-fit:contain;object-fit:contain}.object-cover{-o-object-fit:cover;object-fit:cover}.p-2{padding:.5rem}.p-4{padding:1rem}.p-6{padding:1.5rem}.p-8{padding:2rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-6{padding-top:1.5rem;padding-bottom:1.5rem}.py-8{padding-top:2rem;padding-bottom:2rem}.text-center{text-align:center}.text-3xl{font-size:1.875rem;line-height:2.25rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-xs{font-size:.75rem;line-height:1rem}.font-bold{font-weight:700}.font-medium{font-weight:500}.font-semibold{font-weight:600}.text-blue-600{--tw-text-opacity: 1;color:rgb(37 99 235 / var(--tw-text-opacity))}.text-blue-700{--tw-text-opacity: 1;color:rgb(29 78 216 / var(--tw-text-opacity))}.text-blue-800{--tw-text-opacity: 1;color:rgb(30 64 175 / var(--tw-text-opacity))}.text-gray-300{--tw-text-opacity: 1;color:rgb(209 213 219 / var(--tw-text-opacity))}.text-gray-400{--tw-text-opacity: 1;color:rgb(156 163 175 / var(--tw-text-opacity))}.text-gray-500{--tw-text-opacity: 1;color:rgb(107 114 128 / var(--tw-text-opacity))}.text-gray-600{--tw-text-opacity: 1;color:rgb(75 85 99 / var(--tw-text-opacity))}.text-gray-700{--tw-text-opacity: 1;color:rgb(55 65 81 / var(--tw-text-opacity))}.text-gray-900{--tw-text-opacity: 1;color:rgb(17 24 39 / var(--tw-text-opacity))}.text-green-500{--tw-text-opacity: 1;color:rgb(34 197 94 / var(--tw-text-opacity))}.text-green-600{--tw-text-opacity: 1;color:rgb(22 163 74 / var(--tw-text-opacity))}.text-red-500{--tw-text-opacity: 1;color:rgb(239 68 68 / var(--tw-text-opacity))}.text-red-600{--tw-text-opacity: 1;color:rgb(220 38 38 / var(--tw-text-opacity))}.text-red-700{--tw-text-opacity: 1;color:rgb(185 28 28 / var(--tw-text-opacity))}.text-yellow-500{--tw-text-opacity: 1;color:rgb(234 179 8 / var(--tw-text-opacity))}.text-yellow-600{--tw-text-opacity: 1;color:rgb(202 138 4 / var(--tw-text-opacity))}.opacity-0{opacity:0}.shadow-md{--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.delay-150{transition-delay:.15s}.delay-300{transition-delay:.3s}.hover\:bg-gray-100:hover{--tw-bg-opacity: 1;background-color:rgb(243 244 246 / var(--tw-bg-opacity))}.hover\:bg-gray-300:hover{--tw-bg-opacity: 1;background-color:rgb(209 213 219 / var(--tw-bg-opacity))}.hover\:underline:hover{text-decoration-line:underline}.group:hover .group-hover\:-translate-y-1{--tw-translate-y: -.25rem;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.group:hover .group-hover\:rotate-12{--tw-rotate: 12deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.dark\:border-gray-600:is(.dark *){--tw-border-opacity: 1;border-color:rgb(75 85 99 / var(--tw-border-opacity))}.dark\:border-gray-700:is(.dark *){--tw-border-opacity: 1;border-color:rgb(55 65 81 / var(--tw-border-opacity))}.dark\:border-green-900:is(.dark *){--tw-border-opacity: 1;border-color:rgb(20 83 45 / var(--tw-border-opacity))}.dark\:border-red-900:is(.dark *){--tw-border-opacity: 1;border-color:rgb(127 29 29 / var(--tw-border-opacity))}.dark\:bg-blue-900:is(.dark *){--tw-bg-opacity: 1;background-color:rgb(30 58 138 / var(--tw-bg-opacity))}.dark\:bg-blue-900\/20:is(.dark *){background-color:#1e3a8a33}.dark\:bg-gray-700:is(.dark *){--tw-bg-opacity: 1;background-color:rgb(55 65 81 / var(--tw-bg-opacity))}.dark\:bg-gray-800:is(.dark *){--tw-bg-opacity: 1;background-color:rgb(31 41 55 / var(--tw-bg-opacity))}.dark\:bg-gray-900:is(.dark *){--tw-bg-opacity: 1;background-color:rgb(17 24 39 / var(--tw-bg-opacity))}.dark\:bg-red-900\/20:is(.dark *){background-color:#7f1d1d33}.dark\:text-blue-200:is(.dark *){--tw-text-opacity: 1;color:rgb(191 219 254 / var(--tw-text-opacity))}.dark\:text-blue-400:is(.dark *){--tw-text-opacity: 1;color:rgb(96 165 250 / var(--tw-text-opacity))}.dark\:text-gray-200:is(.dark *){--tw-text-opacity: 1;color:rgb(229 231 235 / var(--tw-text-opacity))}.dark\:text-gray-300:is(.dark *){--tw-text-opacity: 1;color:rgb(209 213 219 / var(--tw-text-opacity))}.dark\:text-gray-400:is(.dark *){--tw-text-opacity: 1;color:rgb(156 163 175 / var(--tw-text-opacity))}.dark\:text-green-400:is(.dark *){--tw-text-opacity: 1;color:rgb(74 222 128 / var(--tw-text-opacity))}.dark\:text-red-200:is(.dark *){--tw-text-opacity: 1;color:rgb(254 202 202 / var(--tw-text-opacity))}.dark\:text-red-400:is(.dark *){--tw-text-opacity: 1;color:rgb(248 113 113 / var(--tw-text-opacity))}.dark\:text-white:is(.dark *){--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity))}.dark\:text-yellow-400:is(.dark *){--tw-text-opacity: 1;color:rgb(250 204 21 / var(--tw-text-opacity))}.dark\:hover\:bg-gray-600:hover:is(.dark *){--tw-bg-opacity: 1;background-color:rgb(75 85 99 / var(--tw-bg-opacity))}.dark\:hover\:bg-gray-700:hover:is(.dark *){--tw-bg-opacity: 1;background-color:rgb(55 65 81 / var(--tw-bg-opacity))}@media (min-width: 640px){.sm\:px-6{padding-left:1.5rem;padding-right:1.5rem}}@media (min-width: 768px){.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.md\:flex-row{flex-direction:row}.md\:space-y-0>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(0px * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(0px * var(--tw-space-y-reverse))}}@media (min-width: 1024px){.lg\:px-8{padding-left:2rem;padding-right:2rem}}

templates/index.html

@@ -1,205 +1,373 @@
 <!doctype html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/brain.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta name="description" content="NeuraScan - Advanced AI-powered brain MRI Alzheimer's disease analysis tool" />
-    <title>NeuraScan | AI Brain MRI Analysis</title>
-    
-    <script type="module" crossorigin src="/assets/index-DBG8gcSd.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-CtQJEsfm.css">
-    
-    <style>
-      #uncertainty-modal {
-        display: none;
-        position: fixed;
-        bottom: 20px;
-        left: 50%;
-        transform: translateX(-50%);
-        width: 90%;
-        max-width: 480px;
-        background: #ffffff;
-        border-radius: 16px;
-        box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
-        z-index: 10000;
-        padding: 24px;
-        border: 1px solid #fee2e2;
-        font-family: system-ui, -apple-system, sans-serif;
-        animation: slideUp 0.5s cubic-bezier(0.16, 1, 0.3, 1);
-      }
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width,initial-scale=1" />
+  <title>NeuraScan | AI Brain MRI Analysis</title>
+  <meta name="description" content="NeuraScan - AI-powered brain MRI Alzheimer's disease analysis tool" />
+  <link rel="icon" type="image/svg+xml" href="/assets/brain/brain.svg" />
+  <style>
+    :root { color-scheme: dark; }
+    body { margin:0; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial; background:#0b1020; color:#e6e8ee; }
+    a { color: inherit; }
+    .container { max-width: 1040px; margin: 0 auto; padding: 28px 18px 64px; }
+    .header { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom: 22px; }
+    .brand { display:flex; align-items:center; gap:12px; }
+    .brand img { width:42px; height:42px; }
+    h1 { font-size: 22px; margin:0; letter-spacing: .3px; }
+    .sub { margin: 4px 0 0; color:#aab0c0; font-size: 14px; }
 
-      @keyframes slideUp {
-        from { transform: translate(-50%, 100%); opacity: 0; }
-        to { transform: translate(-50%, 0); opacity: 1; }
-      }
+    .grid { display:grid; gap:16px; grid-template-columns: 1.05fr .95fr; }
+    @media (max-width: 920px) { .grid { grid-template-columns: 1fr; } }
 
-      .modal-header {
-        display: flex;
-        align-items: center;
-        gap: 12px;
-        color: #991b1b;
-        margin-bottom: 12px;
-      }
+    .card { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: 18px; padding: 18px; box-shadow: 0 10px 30px rgba(0,0,0,.25); }
+    .card h2 { margin: 0 0 10px; font-size: 16px; }
+    .muted { color:#aab0c0; font-size: 13px; line-height: 1.45; }
 
-      .modal-title { font-weight: 700; font-size: 1.125rem; }
-      
-      .modal-body { 
-        color: #374151; 
-        font-size: 0.95rem; 
-        line-height: 1.6; 
-        margin-bottom: 20px; 
-      }
+    .controls { display:flex; gap:10px; flex-wrap: wrap; align-items: center; margin: 10px 0 14px; }
+    select, button { border-radius: 12px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.06); color: #e6e8ee; padding: 10px 12px; font-size: 14px; }
+    button { cursor:pointer; }
+    button.primary { background: rgba(59,130,246,.9); border-color: rgba(59,130,246,.9); }
+    button.primary:disabled { opacity:.55; cursor:not-allowed; }
 
-      .suggestion-box {
-        background: #eff6ff;
-        padding: 16px;
-        border-radius: 8px;
-        margin-top: 15px;
-        display: none;
-        border-left: 4px solid #3b82f6;
-        color: #1e3a8a;
-      }
+    .drop { border: 1px dashed rgba(255,255,255,.22); border-radius: 18px; padding: 18px; background: rgba(255,255,255,.03); }
+    .drop.dragover { border-color: rgba(59,130,246,.9); box-shadow: 0 0 0 4px rgba(59,130,246,.18); }
+    .drop .row { display:flex; align-items:center; justify-content:space-between; gap: 12px; flex-wrap: wrap; }
+    .hintlist { margin: 12px 0 0; padding-left: 18px; }
+    .hintlist li { margin: 6px 0; }
 
-      .btn-group { display: flex; gap: 12px; margin-top: 5px; }
-
-      .btn {
-        flex: 1;
-        padding: 10px 16px;
-        border: none;
-        border-radius: 8px;
-        font-weight: 600;
-        cursor: pointer;
-        transition: all 0.2s;
-        font-size: 0.9rem;
-      }
+    .preview { margin-top: 14px; display:none; gap: 12px; align-items: center; }
+    .preview img { width: 92px; height: 92px; object-fit: cover; border-radius: 14px; border: 1px solid rgba(255,255,255,.12); }
+    .pill { display:inline-flex; align-items:center; gap: 8px; padding: 8px 10px; border-radius: 999px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.10); font-size: 13px; color:#d6daea; }
 
-      .btn-reveal { 
-        background-color: #2563eb; 
-        color: white; 
-        box-shadow: 0 4px 6px -1px rgba(37, 99, 235, 0.2);
-      }
-      .btn-reveal:hover { background-color: #1d4ed8; transform: translateY(-1px); }
+    .result { margin-top: 12px; display:none; }
+    .result .big { font-size: 18px; margin: 4px 0 0; }
+    .bar { height: 10px; border-radius: 999px; background: rgba(255,255,255,.08); overflow:hidden; border: 1px solid rgba(255,255,255,.08); }
+    .bar > div { height: 100%; width: 0%; background: rgba(59,130,246,.9); }
+    .warn { margin-top: 12px; padding: 12px; border-radius: 14px; background: rgba(245,158,11,.12); border: 1px solid rgba(245,158,11,.24); color:#ffe9c2; display:none; }
 
-      .btn-reset { 
-        background-color: #f3f4f6; 
-        color: #4b5563; 
-        border: 1px solid #e5e7eb;
-      }
-      .btn-reset:hover { background-color: #e5e7eb; }
-
-      #global-reset-btn {
-        position: fixed;
-        bottom: 20px;
-        right: 20px;
-        background: #10b981;
-        color: white;
-        border: none;
-        padding: 12px 24px;
-        border-radius: 50px;
-        cursor: pointer;
-        font-weight: 600;
-        z-index: 999;
-        display: none;
-        box-shadow: 0 4px 10px rgba(16, 185, 129, 0.3);
-        transition: transform 0.2s;
-      }
-      #global-reset-btn:hover { transform: scale(1.05); }
-
-    </style>
-  </head>
-  <body>
-    
-    <div id="root"></div>
-
-    <button id="global-reset-btn" onclick="window.location.reload()">
-      <span style="font-size: 1.2em; vertical-align: middle;">↻</span> New Scan
-    </button>
-
-    <div id="uncertainty-modal">
-      <div class="modal-header">
-        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path><line x1="12" y1="9" x2="12" y2="13"></line><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>
-        <div class="modal-title">Low Confidence Warning</div>
+    .team { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; margin-top: 10px; }
+    .member { display:flex; gap: 10px; align-items:center; padding: 10px; border-radius: 14px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.07); }
+    .member img { width: 42px; height: 42px; border-radius: 999px; object-fit: cover; border: 1px solid rgba(255,255,255,.10); }
+    .member .name { font-weight: 600; font-size: 14px; }
+    .member .role { color:#aab0c0; font-size: 12px; margin-top: 2px; }
+
+    .examples { display:grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
+    .ex { border-radius: 16px; overflow:hidden; border: 1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.03); }
+    .ex img { width: 100%; height: 140px; object-fit: cover; display:block; }
+    .ex .cap { padding: 10px; font-size: 13px; color:#aab0c0; }
+    footer { margin-top: 20px; color:#8f95a8; font-size: 12px; }
+    code { background: rgba(255,255,255,.08); padding: 2px 6px; border-radius: 8px; }
+  
+    /* Modal */
+    .modal { position: fixed; inset: 0; display:none; }
+    .modal[aria-hidden="false"] { display:block; }
+    .modal-backdrop { position:absolute; inset:0; background: rgba(0,0,0,.55); }
+    .modal-card { position:relative; max-width: 520px; margin: 8vh auto; background: rgba(10,12,18,.95);
+      border: 1px solid rgba(255,255,255,.12); border-radius: 18px; padding: 18px; box-shadow: 0 30px 60px rgba(0,0,0,.35); }
+    .prob-row { display:flex; justify-content:space-between; gap:12px; padding:10px 12px; border-radius: 14px;
+      border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.04); margin-top: 10px; }
+</style>
+</head>
+
+<body>
+  <div class="container">
+    <div class="header">
+      <div class="brand">
+        <img src="/assets/brain/brain.svg" alt="NeuraScan logo" />
+        <div>
+          <h1>NeuraScan</h1>
+          <div class="sub">AI-assisted MRI screening for Alzheimer’s disease (demo)</div>
+        </div>
       </div>
-      
-      <div class="modal-body">
-        The model is less than <strong>80% confident</strong>. 
-        <br>This result is marked as "Not Sure" for safety.
-        <br>Would you like to see the AI's best guess?
-        
-        <div id="suggestion-content" class="suggestion-box">
-          <strong>Top Suggestion:</strong> <span id="suggestion-text" style="font-size: 1.1em; font-weight: bold;">---</span>
+      <div class="pill" id="statusPill">Ready</div>
+    </div>
+
+    <div class="grid">
+      <div class="card">
+        <h2>New scan</h2>
+        <div class="muted">
+          Choose a model, then upload an MRI image. You can <b>drag & drop</b>, <b>paste</b> (Ctrl+V), or use the upload button.
         </div>
+
+        <div class="controls">
+          <label class="muted" for="modelSelect">Model</label>
+          <select id="modelSelect" aria-label="Model selection"></select><input id="fileInput" type="file" accept="image/*" hidden />
+          <button id="uploadBtn">Upload image</button>
+          <button class="primary" id="scanBtn" disabled>Run scan</button>
+          <button id="newBtn" style="display:none;">New scan</button>
+        </div>
+
+        <div id="drop" class="drop" tabindex="0">
+          <div class="row">
+            <div>
+              <div style="font-weight:600;">Drop an image here</div>
+              <div class="muted">Or paste from clipboard • PNG/JPG recommended</div>
+            </div>
+            <div class="pill"><span>Tip</span><span>Click box then Ctrl+V</span></div>
+          </div>
+
+          <ul class="hintlist muted">
+            <li>Best results: clear axial brain MRI, centered, minimal blur.</li>
+            <li>We don’t store uploads — they’re processed for inference only.</li>
+          </ul>
+
+          <div class="preview" id="preview">
+            <img id="previewImg" alt="Preview" />
+            <div>
+              <div class="muted" id="fileMeta"></div>
+              <div class="muted">Selected model: <span id="modelName"></span></div>
+            </div>
+          </div>
+        </div>
+
+        <div class="result" id="result">
+          <div class="muted">Result</div>
+          <div class="big" id="resultText">—</div>
+          <div class="muted" id="msgText" style="margin-top:6px;"></div>
+          <div style="margin-top:12px;">
+            <div class="muted" style="margin-bottom:8px;">Confidence</div>
+            <div class="bar"><div id="confBar"></div></div>
+            <div class="muted" style="margin-top:6px;" id="confText">—</div>
+          </div>
+          <div class="warn" id="warnBox">
+            Low confidence: consider re-uploading a clearer MRI or trying another model.
+          </div>
+          <div style="display:flex; gap:10px; margin-top:12px; flex-wrap:wrap;">
+            <button id="detailsBtn" style="display:none;">Show most likely result</button>
+            <button id="newBtn">Start a new scan</button>
+          </div>
+        </div>
+
+        <footer>
+          This is an educational demo and not medical advice.
+        </footer>
       </div>
-      
-      <div class="btn-group">
-        <button class="btn btn-reset" onclick="window.location.reload()">Try Another Image</button>
-        <button class="btn btn-reveal" id="reveal-btn" onclick="revealSuggestion()">Show Suggestion</button>
+
+      <div class="card">
+        <h2>Examples</h2>
+        <div class="muted">Replace the placeholder example images in <code>static/assets/brain/</code>.</div>
+        <div class="examples">
+          <div class="ex">
+            <img src="/assets/brain/supportedexample.jpg" onerror="this.style.display='none';" alt="Supported example"/>
+            <div class="cap">Supported example</div>
+          </div>
+          <div class="ex">
+            <img src="/assets/brain/unsupportedexample.jpg" onerror="this.style.display='none';" alt="Unsupported example"/>
+            <div class="cap">Unsupported example</div>
+          </div>
+        </div>
+
+        <h2 style="margin-top:18px;">Team</h2>
+        <div class="team">
+          <div class="member"><img src="/assets/images/team/asem.jpg" alt="Asem"/><div><div class="name">Asem</div><div class="role">ML / Deployment</div></div></div>
+          <div class="member"><img src="/assets/images/team/sameh.jpg" alt="Sameh"/><div><div class="name">Sameh</div><div class="role">ML / Research</div></div></div>
+          <div class="member"><img src="/assets/images/team/fatma.jpg" alt="Fatma"/><div><div class="name">Fatma</div><div class="role">Data / QA</div></div></div>
+          <div class="member"><img src="/assets/images/team/gehad.jpg" alt="Gehad"/><div><div class="name">Gehad</div><div class="role">Frontend</div></div></div>
+        </div>
       </div>
     </div>
+  </div>
+
+<script>
+  const statusPill = document.getElementById('statusPill');
+  const modelSelect = document.getElementById('modelSelect');
+  const detailsBtn = document.getElementById('detailsBtn');  const modelName = document.getElementById('modelName');
+  const fileInput = document.getElementById('fileInput');
+  const uploadBtn = document.getElementById('uploadBtn');
+  const scanBtn = document.getElementById('scanBtn');
+  const newBtn = document.getElementById('newBtn');
+  const modal = document.getElementById('modal');
+  const modalBackdrop = document.getElementById('modalBackdrop');
+  const modalClose = document.getElementById('modalClose');
+  const modalTitle = document.getElementById('modalTitle');
+  const modalSubtitle = document.getElementById('modalSubtitle');
+  const modalList = document.getElementById('modalList');
+  const drop = document.getElementById('drop');
+  const preview = document.getElementById('preview');
+  const previewImg = document.getElementById('previewImg');
+  const fileMeta = document.getElementById('fileMeta');
+
+  const resultBox = document.getElementById('result');
+  const resultText = document.getElementById('resultText');
+  const msgText = document.getElementById('msgText');
+  const confBar = document.getElementById('confBar');
+  const confText = document.getElementById('confText');
+  const warnBox = document.getElementById('warnBox');
 
-    <script>
-      
-      const originalFetch = window.fetch;
-      
-      window.fetch = async function(...args) {
-        const response = await originalFetch(...args);
-        
-        const url = args[0].toString();
-        
-        if (url.includes('/api/classify') && response.ok) {
-          
-          setTimeout(() => {
-             document.getElementById('global-reset-btn').style.display = 'block';
-          }, 1000);
-
-          const clone = response.clone();
-          
-          clone.json().then(data => {
-            if (data.is_uncertain === true) {
-              showUncertaintyModal(data.top_class_suggestion);
-            }
-          }).catch(err => console.log("Silent interceptor error:", err));
-        }
-        
-        return response;
-      };
-
-      function showUncertaintyModal(suggestion) {
-        const modal = document.getElementById('uncertainty-modal');
-        const textSpan = document.getElementById('suggestion-text');
-        
-        textSpan.innerText = suggestion || "Unknown Class";
-        modal.style.display = 'block';
+  let selectedFile = null;
+  let modelMeta = {};
+  let lastResult = null;
+  let models = [];
+
+  function setStatus(text) { statusPill.textContent = text; }
+
+  function clamp01(x){ return Math.max(0, Math.min(1, x)); }
+  }
+  }
+
+  function openModal(result) {
+    if (!result) return;
+    const top = result.top || (result.probabilities || [])[0] || {};
+    const label = top.label || '—';
+    const prob = (top.prob ?? top.probability ?? 0);
+    modalTitle.textContent = label;
+    modalSubtitle.textContent = `Confidence: ${(prob*100).toFixed(1)}%`;
+    modalList.innerHTML = '';
+    modal.setAttribute('aria-hidden','false');
+  }
+  function closeModal() {
+    modal.setAttribute('aria-hidden','true');
+  }
+
+
+  async function loadModels() {
+    const res = await fetch('/api/models');
+    const payload = await res.json();
+    const list = payload.models || [];
+    modelMeta = Object.fromEntries(list.map(m => [m.id, m]));
+    modelSelect.innerHTML = list.map(m => `<option value="${m.id}">${m.name}</option>`).join('');
+    if (payload.default_model_id && modelMeta[payload.default_model_id]) {
+      modelSelect.value = payload.default_model_id;
+    }
+    modelName.textContent = modelSelect.options[modelSelect.selectedIndex]?.text || 'Model';
+
+  }
+
+  function resetUI() {
+    selectedFile = null;
+    fileInput.value = '';
+    preview.style.display = 'none';
+    resultBox.style.display = 'none';
+    warnBox.style.display = 'none';
+    scanBtn.disabled = true;
+    scanBtn.style.display = '';
+    detailsBtn.style.display = 'none';
+    newBtn.style.display = '';
+
+    setStatus('Ready');
+  }
+
+  function setFile(file) {
+    selectedFile = file;
+    if (!file) return;
+    previewImg.src = URL.createObjectURL(file);
+    preview.style.display = 'flex';
+    fileMeta.textContent = `${file.name} • ${(file.size/1024/1024).toFixed(2)} MB`;
+    modelName.textContent = modelSelect.options[modelSelect.selectedIndex].text;
+    scanBtn.disabled = false;
+  }
+
+  uploadBtn.addEventListener('click', () => fileInput.click());
+  fileInput.addEventListener('change', (e) => setFile(e.target.files?.[0]));
+
+  modelSelect.addEventListener('change', () => {
+    modelName.textContent = modelSelect.options[modelSelect.selectedIndex].text;
+
+  });
+
+  // Threshold controls
+
+  // Drag & drop
+  ['dragenter','dragover'].forEach(ev => drop.addEventListener(ev, (e) => {
+    e.preventDefault(); e.stopPropagation();
+    drop.classList.add('dragover');
+  }));
+  ['dragleave','drop'].forEach(ev => drop.addEventListener(ev, (e) => {
+    e.preventDefault(); e.stopPropagation();
+    drop.classList.remove('dragover');
+  }));
+  drop.addEventListener('drop', (e) => {
+    const f = e.dataTransfer.files?.[0];
+    if (f) setFile(f);
+  });
+
+  // Paste
+  window.addEventListener('paste', (e) => {
+    const item = [...(e.clipboardData?.items || [])].find(i => i.type.startsWith('image/'));
+    if (!item) return;
+    const f = item.getAsFile();
+    if (f) setFile(f);
+  });
+
+  async function runScan() {
+    if (!selectedFile) return;
+    setStatus('Scanning…');
+    scanBtn.disabled = true;
+    warnBox.style.display = 'none';
+
+    const fd = new FormData();
+    fd.append('file', selectedFile);
+    fd.append('model_id', modelSelect.value);
+
+    try {
+      const res = await fetch('/api/classify', { method: 'POST', body: fd });
+      const data = await res.json();
+      if (!res.ok) throw new Error(data.error || 'Request failed');
+
+      resultBox.style.display = 'block';
+      lastResult = data;
+      const pred = data.prediction || {};
+      const model = data.model || {};
+      const top = (data.probabilities || [])[0] || {};
+            const isUncertain = (pred.id === 'Uncertain') || (pred.label === 'Uncertain');
+
+            resultText.textContent = pred.label || '—';
+      const pct = Math.round((pred.confidence || 0) * 100);
+
+      if (isUncertain) {
+        confBar.style.width = '0%';
+        confText.textContent = '';
+      } else {
+        confBar.style.width = pct + '%';
+        confText.textContent = `${pct}%`;
       }
 
-      function revealSuggestion() {
-        document.getElementById('suggestion-content').style.display = 'block';
-        document.getElementById('reveal-btn').style.display = 'none';
+      if (isUncertain) {
+        warnBox.style.display = 'block';
+        msgText.textContent = `${model.name || 'Model'} • Uncertain — consult a medical professional.`;
+        detailsBtn.style.display = '';
+      } else {
+        warnBox.style.display = 'none';
+        msgText.textContent = `${model.name || 'Model'} • Prediction generated successfully.`;
+        detailsBtn.style.display = 'none';
       }
 
-      document.addEventListener('paste', function(event) {
-        const fileInput = document.querySelector('input[type="file"]');
-        if (!fileInput) return;
-
-        const items = (event.clipboardData || event.originalEvent.clipboardData).items;
-        
-        for (let i = 0; i < items.length; i++) {
-          if (items[i].type.indexOf('image') !== -1) {
-            const blob = items[i].getAsFile();
-            
-            const dataTransfer = new DataTransfer();
-            dataTransfer.items.add(blob);
-            fileInput.files = dataTransfer.files;
-            
-            const changeEvent = new Event('change', { bubbles: true });
-            fileInput.dispatchEvent(changeEvent);
-            
-            console.log("Image pasted directly from clipboard!");
-            break; 
-          }
-        }
-      });
-    </script>
-  </body>
-</html>
+      setStatus('Done');
+      scanBtn.style.display = 'none';
+      newBtn.style.display = '';
+    } catch (err) {
+      setStatus('Error');
+      alert(err.message);
+      scanBtn.disabled = false;
+    }
+  }
+
+  scanBtn.addEventListener('click', runScan);
+  newBtn.addEventListener('click', resetUI);
+  detailsBtn.addEventListener('click', () => openModal(lastResult));
+  modalBackdrop.addEventListener('click', closeModal);
+  modalClose.addEventListener('click', closeModal);
+  document.addEventListener('keydown', (e) => { if (e.key === 'Escape') closeModal(); });
+
+  loadModels().catch(() => setStatus('Ready (offline)'));
+  resetUI();
+</script>
+
+  <div id="modal" class="modal" aria-hidden="true">
+    <div class="modal-backdrop" id="modalBackdrop"></div>
+    <div class="modal-card" role="dialog" aria-modal="true" aria-labelledby="modalTitle">
+      <div style="display:flex; justify-content:space-between; align-items:center; gap:12px;">
+        <div>
+          <div class="muted">Most likely result</div>
+          <div class="big" id="modalTitle">—</div>
+        </div>
+        <button id="modalClose" aria-label="Close details">Close</button>
+      </div>
+      <div class="muted" style="margin-top:8px;" id="modalSubtitle">—</div>
+      <div style="margin-top:14px;" id="modalList"></div>
+    </div>
+  </div>
+
+</body>
+</html>