Show per-model running state during prediction

web/static/index.html

@@ -477,15 +477,22 @@ Medical VQA web demo for six-model comparison.
       const res = byVariant[variant];
       const status = res ? res.status : "not requested";
       const ok = res && res.status === "ok";
+      const running = res && res.status === "running";
       const answer = res ? (res.prediction || res.status) : "Not requested";
-      const cardTone = ok ? "border-emerald-200/70 shadow-[0_18px_40px_rgba(16,185,129,0.10)]" : res ? "border-rose-200/70 shadow-[0_18px_40px_rgba(244,63,94,0.08)]" : "border-china-gold/25 shadow-sm";
-      const answerTone = ok ? "text-ink-black" : res ? "text-rose-700" : "text-amber-700";
+      const cardTone = ok
+        ? "border-emerald-200/70 shadow-[0_18px_40px_rgba(16,185,129,0.10)]"
+        : running
+          ? "border-china-gold/50 shadow-[0_18px_40px_rgba(168,24,27,0.12)]"
+          : res
+            ? "border-rose-200/70 shadow-[0_18px_40px_rgba(244,63,94,0.08)]"
+            : "border-china-gold/25 shadow-sm";
+      const answerTone = ok ? "text-ink-black" : running ? "text-china-gold" : res ? "text-rose-700" : "text-amber-700";
       return `
         <article class="tilt-card bg-paper-white border ${cardTone} p-5 md:p-6 flex flex-col gap-4 relative overflow-hidden">
           <div class="absolute inset-x-0 top-0 h-1 bg-gradient-to-r from-transparent via-imperial-red to-transparent ${ok ? 'opacity-100' : 'opacity-45'}"></div>
           <div class="flex items-center justify-between gap-4">
             <div class="flex items-center gap-3">
-              <div class="size-11 rounded-full border flex items-center justify-center ${ok ? 'bg-emerald-50 text-emerald-700 border-emerald-200' : res ? 'bg-rose-50 text-rose-700 border-rose-200' : 'bg-amber-50 text-amber-700 border-amber-200'} ${ok ? 'pulse-ring' : ''}">
+              <div class="size-11 rounded-full border flex items-center justify-center ${ok ? 'bg-emerald-50 text-emerald-700 border-emerald-200' : running ? 'bg-amber-50 text-amber-700 border-amber-200 pulse-ring' : res ? 'bg-rose-50 text-rose-700 border-rose-200' : 'bg-amber-50 text-amber-700 border-amber-200'}">
                 <span class="material-symbols-outlined text-[22px]">${meta.icon}</span>
               </div>
               <div>
@@ -494,13 +501,13 @@ Medical VQA web demo for six-model comparison.
               </div>
             </div>
             <span class="text-[11px] uppercase tracking-[0.18em] font-bold ${ok ? 'text-emerald-700' : res ? 'text-rose-700' : 'text-amber-700'}">
-              ${res ? (ok ? "Output" : "Error") : "Idle"}
+              ${running ? "Running" : res ? (ok ? "Output" : "Error") : "Idle"}
             </span>
           </div>
 
           <div class="min-h-[120px] rounded-none border border-china-gold/20 bg-[#FAF7F0] p-5 flex items-center">
             <p class="text-[18px] md:text-[20px] leading-relaxed font-serif ${answerTone}">
-              ${escapeHtml(answer)}
+              ${running ? "Predicting..." : escapeHtml(answer)}
             </p>
           </div>
 
@@ -513,6 +520,16 @@ Medical VQA web demo for six-model comparison.
     }).join("");
   }
 
+  function renderRunningModelGrid() {
+    const runningResults = Array.from(selectedModels).map((variant) => ({
+      variant,
+      status: "running",
+      prediction: "",
+      prediction_raw: "",
+    }));
+    renderModelGrid(runningResults);
+  }
+
   function updateModelChips() {
     document.querySelectorAll(".model-chip").forEach((chip) => {
       const variant = chip.dataset.model;
@@ -622,6 +639,8 @@ Medical VQA web demo for six-model comparison.
     el.runBtn.disabled = true;
     el.runBtn.querySelector("span").textContent = "Running...";
     setStatus("Running all selected models...");
+    renderRunningModelGrid();
+    applyTiltEffect(".tilt-card", 5);
 
     try {
       const formData = new FormData();
@@ -634,7 +653,7 @@ Medical VQA web demo for six-model comparison.
       if (!res.ok) {
         throw new Error(data?.detail || "Prediction failed");
       }
-      renderModelGrid(data.results || [], data.question || el.question.value.trim(), data.summary);
+      renderModelGrid(data.results || []);
       applyTiltEffect(".tilt-card", 5);
       setStatus(`Done. ${data.summary?.success_count ?? 0} models succeeded.`);
     } catch (err) {