Add model weights

.gitattributes

@@ -33,3 +33,4 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
+*.keras filter=lfs diff=lfs merge=lfs -text

Dockerfile

@@ -0,0 +1,16 @@
+# Read the doc: https://huggingface.co/docs/hub/spaces-sdks-docker
+# you will also find guides on how best to write your Dockerfile
+
+FROM python:3.9
+
+RUN useradd -m -u 1000 user
+USER user
+ENV PATH="/home/user/.local/bin:$PATH"
+
+WORKDIR /app
+
+COPY --chown=user ./requirements.txt requirements.txt
+RUN pip install --no-cache-dir --upgrade -r requirements.txt
+
+COPY --chown=user . /app
+CMD ["uvicorn", "app:app", "--host", "0.0.0.0", "--port", "7860"]

Procfile

@@ -0,0 +1 @@
+web: gunicorn app:app --bind 0.0.0.0:$PORT --workers 1 --timeout 120

README.md

@@ -1,10 +1,68 @@
+# Intel Scene Classifier — Déploiement
+
+## Structure du projet
+```
+webapp/
+├── app.py                  ← Backend Flask
+├── templates/
+│   └── index.html          ← Interface web
+├── parfait_model.pth       ← ⚠️ À placer ici (téléchargé depuis Kaggle)
+├── parfait_model.keras     ← ⚠️ À placer ici (téléchargé depuis Kaggle)
+├── requirements.txt
+├── Procfile
+└── README.md
+```
+
+> ⚠️ **Important** : Placez `parfait_model.pth` et `parfait_model.keras`
+> à la racine du projet avant de déployer.
+
+---
+
+## Option A — PythonAnywhere (recommandé, gratuit)
+
+1. Créez un compte sur https://www.pythonanywhere.com
+2. Onglet **Files** → uploadez tous vos fichiers (y compris les modèles .pth et .keras)
+3. Onglet **Consoles** → ouvrir un Bash :
+   ```bash
+   pip install -r requirements.txt
+   ```
+4. Onglet **Web** → Add a new web app → Manual configuration → Python 3.10
+5. Dans **WSGI configuration file**, remplacez le contenu par :
+   ```python
+   import sys
+   sys.path.insert(0, '/home/VOTRE_USERNAME')
+   from app import app as application
+   ```
+6. **Reload** → votre app est en ligne !
+
+---
+
+## Option B — Railway (gratuit, très simple)
+
+1. Créez un compte sur https://railway.app
+2. **New Project** → Deploy from GitHub (poussez votre code sur GitHub d'abord)
+3. Railway détecte automatiquement le `Procfile`
+4. Ajoutez vos fichiers modèles via **Volume** ou committez-les dans le repo
+5. Deploy → URL générée automatiquement
+
 ---
-title: Cv Project 1
-emoji: 😻
-colorFrom: yellow
-colorTo: blue
-sdk: docker
-pinned: false
+
+## Option C — Render (gratuit)
+
+1. https://render.com → New Web Service
+2. Connectez votre repo GitHub
+3. Build Command : `pip install -r requirements.txt`
+4. Start Command : `gunicorn app:app --bind 0.0.0.0:$PORT --workers 1 --timeout 120`
+5. Uploadez les modèles dans le repo ou via un bucket S3
+
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+## Lancer en local
+
+```bash
+pip install -r requirements.txt
+
+# Placez parfait_model.pth et parfait_model.keras ici, puis :
+python app.py
+# → http://localhost:5000
+```

app.py

@@ -0,0 +1,120 @@
+"""
+Intel Scene Classifier — Flask App
+"""
+
+import io
+import os
+import numpy as np
+from flask import Flask, jsonify, render_template, request
+from PIL import Image
+
+app = Flask(__name__)
+
+CLASSES  = ["buildings", "forest", "glacier", "mountain", "sea", "street"]
+IMG_SIZE = 150
+
+_pytorch_model = None
+_tf_model      = None
+
+
+# ── Loaders ────────────────────────────────────────────────────────────────────
+def load_pytorch():
+    global _pytorch_model
+    if _pytorch_model is not None:
+        return _pytorch_model
+
+    import torch
+    import torch.nn as nn
+    import torch.nn.functional as F
+    from torchvision import transforms
+
+    class CNN_Torch(nn.Module):
+        def __init__(self, num_classes=6):
+            super().__init__()
+            self.conv1      = nn.Conv2d(3, 32, kernel_size=3, padding=1)
+            self.conv2      = nn.Conv2d(32, 64, kernel_size=3, padding=1)
+            self.conv3      = nn.Conv2d(64, 128, kernel_size=3, padding=1)
+            self.conv3_drop = nn.Dropout2d(p=0.25)
+            self.pool       = nn.MaxPool2d(2, 2)
+            self.fc1        = nn.Linear(128 * 18 * 18, 256)
+            self.fc2        = nn.Linear(256, num_classes)
+
+        def forward(self, x):
+            x = self.pool(F.relu(self.conv1(x)))
+            x = self.pool(F.relu(self.conv2(x)))
+            x = self.pool(F.relu(self.conv3_drop(self.conv3(x))))
+            x = x.view(-1, 128 * 18 * 18)
+            x = F.relu(self.fc1(x))
+            x = F.dropout(x, training=self.training)
+            x = self.fc2(x)
+            return F.log_softmax(x, dim=1)
+
+    device = torch.device("cuda" if torch.cuda.is_available() else "cpu")
+    model  = CNN_Torch(6).to(device)
+    model.load_state_dict(torch.load("parfait_model.pth", map_location=device))
+    model.eval()
+
+    tf = transforms.Compose([
+        transforms.Resize((IMG_SIZE, IMG_SIZE)),
+        transforms.ToTensor(),
+        transforms.Normalize([0.485, 0.456, 0.406], [0.229, 0.224, 0.225]),
+    ])
+    _pytorch_model = (model, device, tf)
+    return _pytorch_model
+
+
+def load_tensorflow():
+    global _tf_model
+    if _tf_model is None:
+        import tensorflow as tf
+        _tf_model = tf.keras.models.load_model("parfait_model.keras")
+    return _tf_model
+
+
+# ── Routes ─────────────────────────────────────────────────────────────────────
+@app.route("/")
+def index():
+    return render_template("index.html")
+
+
+@app.route("/predict", methods=["POST"])
+def predict():
+    if "image" not in request.files:
+        return jsonify({"error": "Aucune image fournie"}), 400
+
+    framework = request.form.get("model", "pytorch")
+
+    try:
+        pil_img = Image.open(io.BytesIO(request.files["image"].read())).convert("RGB")
+    except Exception:
+        return jsonify({"error": "Fichier image invalide"}), 400
+
+    try:
+        if framework == "pytorch":
+            import torch
+            model, device, tf = load_pytorch()
+            tensor = tf(pil_img).unsqueeze(0).to(device)
+            with torch.no_grad():
+                out   = model(tensor)
+                probs = torch.exp(out).cpu().numpy()[0]
+        else:
+            model = load_tensorflow()
+            arr   = np.array(pil_img.resize((IMG_SIZE, IMG_SIZE)), dtype=np.float32)
+            probs = model.predict(np.expand_dims(arr, 0), verbose=0)[0]
+
+        pred_idx = int(np.argmax(probs))
+        return jsonify({
+            "class":         CLASSES[pred_idx],
+            "confidence":    float(probs[pred_idx]),
+            "probabilities": {c: float(p) for c, p in zip(CLASSES, probs)},
+        })
+
+    except FileNotFoundError as e:
+        return jsonify({"error": f"Modèle introuvable : {e}. Placez les fichiers .pth et .keras à la racine."}), 500
+    except Exception as e:
+        return jsonify({"error": str(e)}), 500
+
+
+if __name__ == "__main__":
+    port = int(os.environ.get("PORT", 5000))
+    app.run(host="0.0.0.0", port=port, debug=False)

parfait_model.keras

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

parfait_model.pth

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:681ed1e9855e437851f8028b9dd54e6a6c1101f34f9904a3dbb19c3a4e0e57a9
+size 523282

requirements.txt

@@ -0,0 +1,7 @@
+flask>=3.0.0
+pillow>=10.0.0
+numpy>=1.24.0
+torch>=2.0.0
+torchvision>=0.15.0
+tensorflow>=2.13.0
+gunicorn>=21.0.0

templates/index.html

@@ -0,0 +1,543 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+  <meta charset="UTF-8"/>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+  <title>Scene Classifier · Parfait</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link href="https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700;800&family=Instrument+Sans:wght@300;400;500&family=Roboto+Mono:wght@400;500&display=swap" rel="stylesheet">
+  <style>
+    /* ── Tokens ── */
+    :root {
+      --ink:       #0d0d0d;
+      --paper:     #f5f2ec;
+      --paper2:    #edeae2;
+      --rule:      #d4cfc4;
+      --accent:    #c84b2f;
+      --accent2:   #2563eb;
+      --muted:     #8a8070;
+      --white:     #ffffff;
+      --ff-head:   'Syne', sans-serif;
+      --ff-body:   'Instrument Sans', sans-serif;
+      --ff-mono:   'Roboto Mono', monospace;
+      --r:         8px;
+    }
+    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+    html { font-size: 16px; }
+
+    body {
+      background: var(--paper);
+      color: var(--ink);
+      font-family: var(--ff-body);
+      min-height: 100vh;
+      display: grid;
+      grid-template-rows: auto 1fr auto;
+    }
+
+    /* ── Header ── */
+    header {
+      border-bottom: 2px solid var(--ink);
+      padding: 1.1rem 2.5rem;
+      display: flex;
+      align-items: baseline;
+      gap: 1.2rem;
+    }
+    .site-name {
+      font-family: var(--ff-head);
+      font-size: 1.4rem;
+      font-weight: 800;
+      letter-spacing: -.02em;
+    }
+    .site-name span { color: var(--accent); }
+    .site-sub {
+      font-family: var(--ff-mono);
+      font-size: .65rem;
+      color: var(--muted);
+      letter-spacing: .1em;
+      text-transform: uppercase;
+    }
+    .badge {
+      margin-left: auto;
+      font-family: var(--ff-mono);
+      font-size: .6rem;
+      letter-spacing: .1em;
+      padding: .3rem .75rem;
+      border: 1.5px solid var(--ink);
+      border-radius: 99px;
+      text-transform: uppercase;
+    }
+
+    /* ── Main layout ── */
+    main {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      max-width: 1100px;
+      margin: 0 auto;
+      width: 100%;
+      gap: 0;
+      padding: 3rem 2rem;
+    }
+
+    /* ── Left panel ── */
+    .left-panel {
+      padding-right: 3rem;
+      border-right: 1.5px solid var(--rule);
+      display: flex;
+      flex-direction: column;
+      gap: 2rem;
+    }
+
+    .panel-label {
+      font-family: var(--ff-mono);
+      font-size: .6rem;
+      letter-spacing: .15em;
+      color: var(--muted);
+      text-transform: uppercase;
+      margin-bottom: .5rem;
+    }
+
+    /* Model selector */
+    .model-tabs {
+      display: flex;
+      gap: .5rem;
+    }
+    .tab-btn {
+      flex: 1;
+      padding: .9rem 1rem;
+      border: 1.5px solid var(--rule);
+      border-radius: var(--r);
+      background: var(--white);
+      font-family: var(--ff-head);
+      font-size: .9rem;
+      font-weight: 600;
+      cursor: pointer;
+      transition: all .2s;
+      display: flex;
+      flex-direction: column;
+      gap: .2rem;
+      text-align: left;
+    }
+    .tab-btn .tab-icon { font-size: 1.3rem; }
+    .tab-btn .tab-fw   { font-size: .65rem; font-family: var(--ff-mono); color: var(--muted); font-weight: 400; }
+    .tab-btn:hover     { border-color: var(--ink); }
+    .tab-btn.active    { border-color: var(--ink); background: var(--ink); color: var(--white); }
+    .tab-btn.active .tab-fw { color: var(--rule); }
+
+    /* Drop zone */
+    .drop-zone {
+      border: 2px dashed var(--rule);
+      border-radius: var(--r);
+      min-height: 240px;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      gap: 1rem;
+      cursor: pointer;
+      transition: border-color .2s, background .2s;
+      position: relative;
+      overflow: hidden;
+      background: var(--white);
+    }
+    .drop-zone:hover, .drop-zone.drag { border-color: var(--accent); background: #fdf8f6; }
+    .drop-zone img {
+      position: absolute; inset: 0;
+      width: 100%; height: 100%;
+      object-fit: cover;
+      border-radius: calc(var(--r) - 2px);
+      display: none;
+    }
+    .drop-zone.has-img img     { display: block; }
+    .drop-zone.has-img .dz-ph  { display: none; }
+    .dz-ph {
+      display: flex; flex-direction: column; align-items: center; gap: .75rem;
+      color: var(--muted); pointer-events: none;
+    }
+    .dz-icon {
+      width: 52px; height: 52px; border: 1.5px solid var(--rule);
+      border-radius: 50%; display: grid; place-items: center; font-size: 1.3rem;
+    }
+    .dz-ph p   { font-size: .85rem; }
+    .dz-ph em  { font-size: .75rem; font-style: normal; font-family: var(--ff-mono); }
+    #file-input { display: none; }
+
+    /* Analyse button */
+    #classify-btn {
+      width: 100%;
+      padding: 1.1rem;
+      background: var(--accent);
+      color: var(--white);
+      border: none;
+      border-radius: var(--r);
+      font-family: var(--ff-head);
+      font-size: 1.1rem;
+      font-weight: 700;
+      letter-spacing: .03em;
+      cursor: pointer;
+      transition: opacity .2s, transform .15s;
+      position: relative;
+      overflow: hidden;
+    }
+    #classify-btn::after {
+      content: '';
+      position: absolute; inset: 0;
+      background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.12) 50%, transparent 100%);
+      transform: translateX(-100%);
+    }
+    #classify-btn.loading::after {
+      animation: shimmer 1.2s infinite;
+    }
+    @keyframes shimmer { to { transform: translateX(100%); } }
+    #classify-btn:disabled { opacity: .4; cursor: default; }
+    #classify-btn:not(:disabled):hover { opacity: .88; transform: translateY(-1px); }
+
+    /* ── Right panel ── */
+    .right-panel {
+      padding-left: 3rem;
+      display: flex;
+      flex-direction: column;
+      gap: 2.5rem;
+    }
+
+    /* Prediction hero */
+    .pred-hero { display: flex; flex-direction: column; gap: .4rem; }
+    .pred-waiting {
+      display: flex; flex-direction: column;
+      justify-content: center; align-items: flex-start;
+      min-height: 120px; gap: .5rem;
+    }
+    .pred-waiting p { color: var(--muted); font-size: .9rem; line-height: 1.6; }
+    .pred-waiting strong { color: var(--ink); }
+
+    .pred-result { display: none; flex-direction: column; gap: .3rem; }
+    .pred-result.show { display: flex; animation: fadeUp .35s ease; }
+    @keyframes fadeUp { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:none} }
+
+    .pred-cat {
+      font-family: var(--ff-mono);
+      font-size: .6rem; letter-spacing: .15em;
+      color: var(--muted); text-transform: uppercase;
+    }
+    .pred-class {
+      font-family: var(--ff-head);
+      font-size: 3.5rem;
+      font-weight: 800;
+      letter-spacing: -.03em;
+      line-height: 1;
+      color: var(--accent);
+    }
+    .pred-conf {
+      font-family: var(--ff-mono);
+      font-size: .8rem;
+      color: var(--muted);
+    }
+    .pred-conf strong { color: var(--ink); font-size: 1rem; }
+
+    /* Conf bar */
+    .conf-track {
+      height: 4px; background: var(--rule);
+      border-radius: 99px; overflow: hidden; margin-top: .5rem;
+    }
+    .conf-fill {
+      height: 100%;
+      background: var(--accent);
+      border-radius: 99px;
+      width: 0%;
+      transition: width .8s cubic-bezier(.4,0,.2,1);
+    }
+
+    /* Divider */
+    .divider {
+      height: 1px; background: var(--rule);
+    }
+
+    /* Prob bars */
+    .prob-section { display: flex; flex-direction: column; gap: 1rem; }
+    .prob-row { display: flex; flex-direction: column; gap: .3rem; }
+    .prob-meta {
+      display: flex; justify-content: space-between; align-items: baseline;
+    }
+    .prob-name {
+      font-family: var(--ff-body);
+      font-size: .82rem;
+      font-weight: 500;
+      display: flex; align-items: center; gap: .4rem;
+    }
+    .prob-name .emoji { font-size: .9rem; }
+    .prob-pct {
+      font-family: var(--ff-mono);
+      font-size: .72rem;
+      color: var(--muted);
+    }
+    .prob-track {
+      height: 6px; background: var(--paper2);
+      border-radius: 99px; overflow: hidden;
+    }
+    .prob-fill {
+      height: 100%;
+      background: var(--rule);
+      border-radius: 99px;
+      width: 0%;
+      transition: width .7s cubic-bezier(.4,0,.2,1);
+    }
+    .prob-row.top .prob-name { color: var(--accent); }
+    .prob-row.top .prob-pct  { color: var(--accent); }
+    .prob-row.top .prob-fill { background: var(--accent); }
+
+    /* Error */
+    .pred-error {
+      display: none; padding: 1rem;
+      background: #fef2f2; border: 1px solid #fecaca;
+      border-radius: var(--r); color: #dc2626;
+      font-size: .85rem; line-height: 1.5;
+    }
+    .pred-error.show { display: block; animation: fadeUp .3s ease; }
+
+    /* ── Footer ── */
+    footer {
+      border-top: 1.5px solid var(--rule);
+      padding: 1rem 2.5rem;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+    }
+    footer p  { font-size: .72rem; color: var(--muted); font-family: var(--ff-mono); }
+    .classes-pills { display: flex; gap: .4rem; flex-wrap: wrap; }
+    .cpill {
+      font-family: var(--ff-mono); font-size: .6rem; letter-spacing: .05em;
+      padding: .2rem .6rem; border: 1px solid var(--rule); border-radius: 99px;
+      color: var(--muted);
+    }
+
+    /* ── Responsive ── */
+    @media (max-width: 720px) {
+      main { grid-template-columns: 1fr; padding: 1.5rem 1rem; }
+      .left-panel { padding-right: 0; border-right: none; border-bottom: 1.5px solid var(--rule); padding-bottom: 2rem; }
+      .right-panel { padding-left: 0; }
+      header { padding: 1rem; flex-wrap: wrap; }
+    }
+  </style>
+</head>
+<body>
+
+  <header>
+    <div class="site-name">SCENE<span>.</span>AI</div>
+    <div class="site-sub">Intel Image Classifier · CNN</div>
+    <div class="badge">by Parfait</div>
+  </header>
+
+  <main>
+    <!-- LEFT : inputs -->
+    <div class="left-panel">
+
+      <div>
+        <div class="panel-label">01 — Choisir le modèle</div>
+        <div class="model-tabs">
+          <button class="tab-btn active" data-fw="pytorch" onclick="selectModel(this)">
+            <span class="tab-icon">⚡</span>
+            PyTorch
+            <span class="tab-fw">CNN_Torch · .pth</span>
+          </button>
+          <button class="tab-btn" data-fw="tensorflow" onclick="selectModel(this)">
+            <span class="tab-icon">🧠</span>
+            TensorFlow
+            <span class="tab-fw">CNN_TF · .keras</span>
+          </button>
+        </div>
+      </div>
+
+      <div>
+        <div class="panel-label">02 — Uploader une image</div>
+        <div class="drop-zone" id="drop-zone" onclick="document.getElementById('file-input').click()">
+          <img id="preview" src="" alt="preview"/>
+          <div class="dz-ph">
+            <div class="dz-icon">↑</div>
+            <p>Glisser-déposer ou cliquer</p>
+            <em>JPG, PNG, WEBP</em>
+          </div>
+        </div>
+        <input type="file" id="file-input" accept="image/*"/>
+      </div>
+
+      <div>
+        <div class="panel-label">03 — Analyser</div>
+        <button id="classify-btn" disabled onclick="classify()">
+          Analyser l'image →
+        </button>
+      </div>
+
+    </div>
+
+    <!-- RIGHT : results -->
+    <div class="right-panel">
+
+      <div class="pred-hero">
+        <div class="panel-label">Résultat</div>
+
+        <div class="pred-waiting" id="pred-waiting">
+          <p>Uploadez une image et cliquez sur <strong>Analyser</strong> pour voir la prédiction du modèle CNN sur les 6 catégories Intel.</p>
+        </div>
+
+        <div class="pred-result" id="pred-result">
+          <div class="pred-cat">Classe prédite</div>
+          <div class="pred-class" id="pred-class-name">—</div>
+          <div class="pred-conf">Confiance : <strong id="pred-conf-val">—</strong></div>
+          <div class="conf-track"><div class="conf-fill" id="conf-fill"></div></div>
+        </div>
+
+        <div class="pred-error" id="pred-error"></div>
+      </div>
+
+      <div class="divider"></div>
+
+      <div class="prob-section" id="prob-section">
+        <div class="panel-label">Scores par catégorie</div>
+        <div id="prob-bars">
+          <!-- generated by JS -->
+          <div style="color:var(--muted);font-size:.85rem;">Les scores apparaîtront ici après l'analyse.</div>
+        </div>
+      </div>
+
+    </div>
+  </main>
+
+  <footer>
+    <p>Intel Image Classification · 6 classes · CNN PyTorch & TensorFlow</p>
+    <div class="classes-pills">
+      <span class="cpill">🏙 buildings</span>
+      <span class="cpill">🌲 forest</span>
+      <span class="cpill">🧊 glacier</span>
+      <span class="cpill">⛰ mountain</span>
+      <span class="cpill">🌊 sea</span>
+      <span class="cpill">🛣 street</span>
+    </div>
+  </footer>
+
+  <script>
+    const EMOJIS = {buildings:"🏙",forest:"🌲",glacier:"🧊",mountain:"⛰",sea:"🌊",street:"🛣"};
+    let selectedFile = null;
+    let selectedFw   = "pytorch";
+
+    /* ── Model tabs ── */
+    function selectModel(btn) {
+      document.querySelectorAll(".tab-btn").forEach(b => b.classList.remove("active"));
+      btn.classList.add("active");
+      selectedFw = btn.dataset.fw;
+    }
+
+    /* ── File input ── */
+    const fileInput = document.getElementById("file-input");
+    const dropZone  = document.getElementById("drop-zone");
+    const preview   = document.getElementById("preview");
+    const btn       = document.getElementById("classify-btn");
+
+    fileInput.addEventListener("change", () => loadFile(fileInput.files[0]));
+
+    dropZone.addEventListener("dragover", e => { e.preventDefault(); dropZone.classList.add("drag"); });
+    dropZone.addEventListener("dragleave", () => dropZone.classList.remove("drag"));
+    dropZone.addEventListener("drop", e => {
+      e.preventDefault(); dropZone.classList.remove("drag");
+      const f = e.dataTransfer.files[0];
+      if (f && f.type.startsWith("image/")) loadFile(f);
+    });
+
+    function loadFile(file) {
+      if (!file) return;
+      selectedFile = file;
+      btn.disabled = false;
+      const reader = new FileReader();
+      reader.onload = e => {
+        preview.src = e.target.result;
+        dropZone.classList.add("has-img");
+      };
+      reader.readAsDataURL(file);
+      resetResult();
+    }
+
+    /* ── Classify ── */
+    async function classify() {
+      if (!selectedFile) return;
+
+      btn.disabled = true;
+      btn.textContent = "Analyse en cours…";
+      btn.classList.add("loading");
+
+      const form = new FormData();
+      form.append("image", selectedFile);
+      form.append("model", selectedFw);
+
+      try {
+        const res  = await fetch("/predict", { method: "POST", body: form });
+        const data = await res.json();
+        if (data.error) throw new Error(data.error);
+        showResult(data);
+      } catch(err) {
+        showError(err.message);
+      } finally {
+        btn.disabled = false;
+        btn.textContent = "Analyser l'image →";
+        btn.classList.remove("loading");
+      }
+    }
+
+    /* ── Display result ── */
+    function showResult(data) {
+      document.getElementById("pred-waiting").style.display = "none";
+      document.getElementById("pred-error").classList.remove("show");
+
+      const pct = Math.round(data.confidence * 100);
+      document.getElementById("pred-class-name").textContent =
+        (EMOJIS[data.class] || "") + " " + data.class.charAt(0).toUpperCase() + data.class.slice(1);
+      document.getElementById("pred-conf-val").textContent = pct + "%";
+
+      const result = document.getElementById("pred-result");
+      result.classList.add("show");
+
+      setTimeout(() => {
+        document.getElementById("conf-fill").style.width = pct + "%";
+      }, 60);
+
+      // probability bars
+      const container = document.getElementById("prob-bars");
+      container.innerHTML = "";
+      const sorted = Object.entries(data.probabilities).sort((a,b) => b[1]-a[1]);
+      sorted.forEach(([cls, prob], i) => {
+        const p   = Math.round(prob * 100);
+        const top = cls === data.class;
+        const row = document.createElement("div");
+        row.className = "prob-row" + (top ? " top" : "");
+        row.innerHTML = `
+          <div class="prob-meta">
+            <span class="prob-name"><span class="emoji">${EMOJIS[cls]}</span>${cls}</span>
+            <span class="prob-pct" id="pct-${cls}">0%</span>
+          </div>
+          <div class="prob-track">
+            <div class="prob-fill" id="bar-${cls}"></div>
+          </div>`;
+        container.appendChild(row);
+        setTimeout(() => {
+          document.getElementById("bar-" + cls).style.width = p + "%";
+          document.getElementById("pct-" + cls).textContent = p + "%";
+        }, 80 + i * 40);
+      });
+    }
+
+    function showError(msg) {
+      document.getElementById("pred-waiting").style.display = "none";
+      document.getElementById("pred-result").classList.remove("show");
+      const err = document.getElementById("pred-error");
+      err.textContent = "Erreur : " + msg;
+      err.classList.add("show");
+    }
+
+    function resetResult() {
+      document.getElementById("pred-waiting").style.display = "flex";
+      document.getElementById("pred-result").classList.remove("show");
+      document.getElementById("pred-error").classList.remove("show");
+      document.getElementById("conf-fill").style.width = "0%";
+      document.getElementById("prob-bars").innerHTML =
+        "<div style='color:var(--muted);font-size:.85rem;'>Les scores apparaîtront ici après l'analyse.</div>";
+    }
+  </script>
+</body>
+</html>