Hugging Face's logo

Spaces:
SpringWang08
/
Medical-VQA
Paused

App Files Community
Medical-VQA / web /static /index.html
SpringWang08's picture
SpringWang08
Deploy Gradio notebook-style Medical VQA app
5551585 verified
raw
history blame contribute delete
30 kB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>Medical VQA Compare</title>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com" rel="preconnect"/>
<link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect"/>
<link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700&amp;family=Noto+Serif+SC:wght@300;400;500;700&amp;display=swap" rel="stylesheet"/>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<script id="tailwind-config">
 tailwind.config = {
 darkMode: "class",
 theme: {
 extend: {
 colors: {
 "imperial-red": "#A8181B",
 "china-gold": "#A88412",
 "gold-light": "#F9E79F",
 "deep-crimson": "#7D0A0D",
 "ink-black": "#1A1A1A",
 "paper-white": "#FDFBF7",
 "jade-dark": "#0B3D30"
 },
 fontFamily: {
 "serif": ["Noto Serif SC", "Cinzel", "serif"],
 "display": ["Cinzel", "serif"]
 },
 backgroundImage: {
 'cloud-pattern': "url(\"data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23d4af37' fill-opacity='0.1'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E\")",
 'ink-wash': "linear-gradient(to bottom right, #FDFBF7, #F2EFE9)"
 },
 boxShadow: {
 'gold-glow': '0 0 15px rgba(212, 175, 55, 0.3)',
 'red-glow': '0 4px 20px rgba(168, 24, 27, 0.25)'
 }
 }
 }
 }
</script>
<style>
 :root {
 --tilt-x: 0deg;
 --tilt-y: 0deg;
 }
 .scene-3d {
 perspective: 1600px;
 transform-style: preserve-3d;
 }
 .tilt-card {
 transform-style: preserve-3d;
 transition: transform 180ms ease, box-shadow 180ms ease;
 will-change: transform;
 }
 .tilt-card:hover {
 box-shadow: 0 24px 50px rgba(168, 24, 27, 0.18), 0 10px 20px rgba(0, 0, 0, 0.08);
 }
 .float-slow {
 animation: floatY 6.5s ease-in-out infinite;
 }
 .float-med {
 animation: floatY 5.2s ease-in-out infinite;
 }
 .float-fast {
 animation: floatY 4.4s ease-in-out infinite;
 }
 .spin-slow {
 animation: spin360 18s linear infinite;
 }
 .pulse-ring {
 animation: pulseRing 2.8s ease-in-out infinite;
 }
 .hover-lift {
 transform: translateZ(18px);
 }
 .medical-glow {
 box-shadow: 0 0 0 1px rgba(212, 175, 55, 0.18), 0 12px 40px rgba(168, 24, 27, 0.16);
 }
 .depth-line {
 position: relative;
 }
 .depth-line::before {
 content: "";
 position: absolute;
 inset: 0;
 border-radius: inherit;
 background: linear-gradient(135deg, rgba(255,255,255,0.45), rgba(255,255,255,0.03));
 transform: translateZ(-2px);
 pointer-events: none;
 }
 @keyframes floatY {
 0%, 100% { transform: translateY(0px) translateZ(0); }
 50% { transform: translateY(-10px) translateZ(18px); }
 }
 @keyframes spin360 {
 from { transform: rotate(0deg); }
 to { transform: rotate(360deg); }
 }
 @keyframes pulseRing {
 0%, 100% { transform: scale(1); opacity: 0.65; }
 50% { transform: scale(1.08); opacity: 1; }
 }
 @media (prefers-reduced-motion: reduce) {
 .float-slow,
 .float-med,
 .float-fast,
 .spin-slow,
 .pulse-ring {
 animation: none !important;
 }
 }
</style>
<style type="text/tailwindcss">
 @layer utilities {
 .ornate-border {
 border: 2px solid #D4AF37;
 position: relative;
 }
 .ornate-border::before {
 content: "";
 position: absolute;
 top: -4px; left: -4px; right: -4px; bottom: -4px;
 border: 1px solid #D4AF37;
 pointer-events: none;
 opacity: 0.5;
 }
 .horse-bg-clip {
 background-clip: text;
 -webkit-background-clip: text;
 color: transparent;
 background-image: linear-gradient(to right, #D4AF37, #F9E79F, #D4AF37);
 }
 }
</style>
</head>
<body class="bg-paper-white font-serif text-ink-black antialiased selection:bg-imperial-red/20 selection:text-imperial-red bg-cloud-pattern min-h-screen">
<div class="relative flex min-h-screen w-full flex-col overflow-x-hidden bg-gradient-to-b from-imperial-red/5 to-transparent">
<header class="sticky top-0 z-50 flex h-[64px] w-full items-center justify-between bg-paper-white/95 px-4 md:px-8 backdrop-blur-md border-b-2 border-china-gold/30 shadow-sm">
<div class="mx-auto flex w-full max-w-[1280px] items-center justify-between">
<div class="flex items-center gap-3 hover:opacity-80 transition-opacity cursor-pointer">
<div class="flex items-center justify-center size-10 rounded-full border border-china-gold bg-imperial-red text-china-gold">
<span class="material-symbols-outlined text-[24px]">bedroom_baby</span>
</div>
<span class="text-[20px] font-display font-bold tracking-wide text-imperial-red">Medical <span class="text-china-gold">VQA</span></span>
</div>
<nav class="hidden md:flex items-center gap-10">
<a class="text-[14px] font-medium text-ink-black/70 hover:text-imperial-red transition-colors uppercase tracking-widest" href="#upload">Upload</a>
<a class="text-[14px] font-medium text-ink-black/70 hover:text-imperial-red transition-colors uppercase tracking-widest" href="#results">Models</a>
<a class="text-[14px] font-medium text-ink-black/70 hover:text-imperial-red transition-colors uppercase tracking-widest" href="#results">Results</a>
</nav>
<div class="flex items-center gap-4">
<button class="hidden md:flex h-9 items-center justify-center rounded-sm border border-imperial-red bg-transparent px-5 text-[13px] font-bold text-imperial-red transition-all hover:bg-imperial-red hover:text-paper-white uppercase tracking-wider">
X2 Vision
</button>
</div>
</div>
</header>
<main class="flex flex-1 flex-col items-center pt-12 pb-24 px-4 sm:px-6">
<div class="flex flex-col items-center text-center max-w-4xl mx-auto mb-14">
<div class="mb-4 flex items-center gap-2">
<div class="h-[1px] w-12 bg-china-gold"></div>
<span class="text-china-gold font-display text-sm tracking-[0.2em] uppercase">6-model comparison</span>
<div class="h-[1px] w-12 bg-china-gold"></div>
</div>
<h1 class="text-imperial-red text-[42px] md:text-[64px] font-display font-bold leading-[1.1] tracking-tight mb-6 drop-shadow-sm">
Medical<br/>
<span class="whitespace-nowrap">Visual Question Answering</span>
</h1>
<p class="text-ink-black/70 text-[18px] md:text-[20px] font-light leading-relaxed max-w-3xl font-serif italic">
</p>
<div class="mt-8 scene-3d relative w-full max-w-[760px]">
 <div class="absolute inset-0 rounded-full bg-imperial-red/10 blur-3xl pulse-ring"></div>
 <div class="relative mx-auto flex items-center justify-center gap-5 md:gap-8">
 <div class="tilt-card float-slow depth-line medical-glow rounded-full border border-china-gold/35 bg-paper-white/95 px-5 py-4 flex items-center gap-3">
 <span class="material-symbols-outlined text-[30px] text-imperial-red">medical_services</span>
 <div class="text-left">
 <div class="text-[11px] uppercase tracking-[0.22em] text-china-gold font-bold">Clinical</div>
 <div class="font-display font-bold text-ink-black">Assist</div>
 </div>
 </div>
 <div class="tilt-card float-med depth-line medical-glow rounded-full border border-china-gold/35 bg-paper-white/95 px-5 py-4 flex items-center gap-3">
 <span class="material-symbols-outlined text-[30px] text-imperial-red spin-slow">monitor_heart</span>
 <div class="text-left">
 <div class="text-[11px] uppercase tracking-[0.22em] text-china-gold font-bold">Vitals</div>
 <div class="font-display font-bold text-ink-black">Heartbeat</div>
 </div>
 </div>
 <div class="tilt-card float-fast depth-line medical-glow rounded-full border border-china-gold/35 bg-paper-white/95 px-5 py-4 flex items-center gap-3">
 <span class="material-symbols-outlined text-[30px] text-imperial-red">biotech</span>
 <div class="text-left">
 <div class="text-[11px] uppercase tracking-[0.22em] text-china-gold font-bold">Imaging</div>
 <div class="font-display font-bold text-ink-black">Analyzer</div>
 </div>
 </div>
 </div>
</div>
</div>
<div id="upload" class="w-full max-w-[1280px] bg-paper-white rounded-none shadow-gold-glow ornate-border flex flex-col lg:flex-row relative">
<div class="absolute -top-2 -left-2 size-8 border-t-4 border-l-4 border-imperial-red z-10"></div>
<div class="absolute -top-2 -right-2 size-8 border-t-4 border-r-4 border-imperial-red z-10"></div>
<div class="absolute -bottom-2 -left-2 size-8 border-b-4 border-l-4 border-imperial-red z-10"></div>
<div class="absolute -bottom-2 -right-2 size-8 border-b-4 border-r-4 border-imperial-red z-10"></div>
<div class="w-full lg:w-[42%] p-8 md:p-12 flex flex-col border-b lg:border-b-0 lg:border-r border-china-gold/30 bg-[url('https://www.transparenttextures.com/patterns/rice-paper-2.png')]">
<div class="flex items-center justify-between mb-6">
<h3 class="text-[20px] font-display font-bold text-ink-black border-l-4 border-imperial-red pl-3">Source Scroll</h3>
<button id="reset-btn" class="text-imperial-red text-sm font-medium hover:text-deep-crimson flex items-center gap-1 transition-colors">
<span class="material-symbols-outlined text-[18px]">restart_alt</span>
Reset
</button>
</div>
<div id="dropzone" class="relative group w-full aspect-square md:aspect-[4/3] bg-[#F2EFE9] border-2 border-dashed border-china-gold/60 flex items-center justify-center transition-all hover:border-imperial-red hover:bg-white cursor-pointer shadow-inner overflow-hidden">
<div class="absolute inset-2 border border-china-gold/20 pointer-events-none"></div>
<div id="dropzone-empty" class="flex flex-col items-center gap-4 z-10 p-6 text-center">
<div class="size-16 rounded-full bg-imperial-red/5 flex items-center justify-center text-imperial-red mb-2">
<span class="material-symbols-outlined text-4xl">cloud_upload</span>
</div>
<div class="space-y-2">
<p class="text-ink-black font-display font-semibold text-lg">Upload Image</p>
<p class="text-ink-black/50 text-sm font-serif italic">JPG, PNG, WEBP accepted</p>
</div>
</div>
<img id="preview" class="absolute inset-0 h-full w-full object-contain bg-white hidden" alt="Preview"/>
<input id="image-input" aria-label="Upload Image" class="absolute inset-0 opacity-0 cursor-pointer" type="file" accept="image/*"/>
</div>
</div>
<div class="w-full lg:w-[58%] p-8 md:p-12 flex flex-col bg-paper-white bg-[url('https://www.transparenttextures.com/patterns/rice-paper-2.png')]">
<div class="mb-6">
<h3 class="text-[20px] font-display font-bold text-ink-black border-l-4 border-imperial-red pl-3 mb-2">Inquiry</h3>
<p class="text-ink-black/60 text-sm italic font-serif">Ask one question and compare every model response in parallel.</p>
</div>
<div class="flex-1 flex flex-col gap-6">
<label class="relative flex-1">
<textarea id="question" class="w-full h-40 md:h-full resize-none border border-china-gold/40 bg-[#F9F7F2] p-6 text-[18px] text-ink-black placeholder:text-ink-black/30 focus:border-imperial-red focus:ring-1 focus:ring-imperial-red focus:outline-none transition-shadow font-serif leading-relaxed" placeholder="What abnormality is visible in the image? / Có bất thường gì không?"></textarea>
<div class="absolute top-0 right-0 p-2 opacity-10 pointer-events-none">
<span class="material-symbols-outlined text-6xl text-imperial-red">edit_note</span>
</div>
<div class="absolute bottom-3 right-3 text-xs text-china-gold font-display" id="char-count">0/200 Characters</div>
</label>
<div class="flex flex-wrap items-center gap-2 pt-1">
<span class="text-[12px] md:text-[13px] uppercase tracking-[0.24em] text-china-gold font-bold mr-1">Gợi ý:</span>
<div id="suggestions-row" class="flex flex-wrap gap-2"></div>
</div>
<div class="space-y-5 pt-2">
<div class="flex items-center gap-3">
<span class="text-xs font-bold uppercase tracking-widest text-china-gold">Model set:</span>
<div class="flex gap-2 overflow-x-auto pb-1 no-scrollbar">
<button type="button" class="model-chip whitespace-nowrap border border-china-gold/30 bg-white px-4 py-1.5 text-xs font-medium text-ink-black hover:border-imperial-red hover:text-imperial-red transition-colors font-serif" data-model="A1">A1</button>
<button type="button" class="model-chip whitespace-nowrap border border-china-gold/30 bg-white px-4 py-1.5 text-xs font-medium text-ink-black hover:border-imperial-red hover:text-imperial-red transition-colors font-serif" data-model="A2">A2</button>
<button type="button" class="model-chip whitespace-nowrap border border-china-gold/30 bg-white px-4 py-1.5 text-xs font-medium text-ink-black hover:border-imperial-red hover:text-imperial-red transition-colors font-serif" data-model="B1">B1</button>
<button type="button" class="model-chip whitespace-nowrap border border-china-gold/30 bg-white px-4 py-1.5 text-xs font-medium text-ink-black hover:border-imperial-red hover:text-imperial-red transition-colors font-serif" data-model="B2">B2</button>
<button type="button" class="model-chip whitespace-nowrap border border-china-gold/30 bg-white px-4 py-1.5 text-xs font-medium text-ink-black hover:border-imperial-red hover:text-imperial-red transition-colors font-serif" data-model="DPO">DPO</button>
<button type="button" class="model-chip whitespace-nowrap border border-china-gold/30 bg-white px-4 py-1.5 text-xs font-medium text-ink-black hover:border-imperial-red hover:text-imperial-red transition-colors font-serif" data-model="PPO">PPO</button>
</div>
</div>
<button id="run-btn" class="group w-full bg-gradient-to-r from-imperial-red to-deep-crimson hover:from-red-700 hover:to-red-900 py-4 px-6 text-[18px] font-bold text-gold-light shadow-red-glow transition-all active:scale-[0.99] flex items-center justify-center gap-3 border border-china-gold relative overflow-hidden">
<div class="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/black-scales.png')] opacity-10"></div>
<span class="relative z-10 font-display tracking-widest uppercase">Run Comparison</span>
<span class="material-symbols-outlined text-[24px] relative z-10 group-hover:rotate-12 transition-transform text-gold-light">savings</span>
<span class="material-symbols-outlined absolute right-6 text-[28px] opacity-20 group-hover:opacity-40 transition-opacity text-gold-light">chess_knight</span>
</button>
<div class="text-center text-sm font-serif italic text-ink-black/60" id="status-text">Select an image, enter a question, then run all six models.</div>
</div>
</div>
</div>
</div>
<section id="results" class="mt-20 w-full max-w-[1280px]">
<div class="flex flex-col items-center text-center mb-8">
<div class="h-[1px] w-24 bg-china-gold"></div>
<h2 class="mt-4 text-imperial-red text-[30px] md:text-[40px] font-display font-bold tracking-tight">Outputs</h2>
<p class="mt-3 max-w-3xl text-ink-black/65 italic font-serif">
Six models, six output cards, one result per card.
</p>
</div>
<div id="results-grid" class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6"></div>
</section>
<div class="mt-24 grid grid-cols-1 md:grid-cols-3 gap-8 w-full max-w-[1280px] relative">
<div class="absolute -top-12 left-1/2 -translate-x-1/2 w-24 h-1 bg-china-gold rounded-full"></div>
<div class="flex flex-col gap-4 p-8 bg-paper-white border border-china-gold/20 shadow-sm hover:shadow-gold-glow transition-shadow duration-300 relative overflow-hidden group">
<div class="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-transparent via-imperial-red to-transparent opacity-0 group-hover:opacity-100 transition-opacity"></div>
<div class="size-12 flex items-center justify-center text-imperial-red mb-2 border border-china-gold/30 rounded-full bg-gold-light/20">
<span class="material-symbols-outlined text-2xl">neurology</span>
</div>
<h4 class="text-[18px] font-display font-bold text-ink-black">A1 / A2</h4>
<p class="text-[15px] leading-relaxed text-ink-black/70 font-serif">
Closed-vocab models with separate answer heads. The new UI gives each model a dedicated response card.
</p>
</div>
<div class="flex flex-col gap-4 p-8 bg-paper-white border border-china-gold/20 shadow-sm hover:shadow-gold-glow transition-shadow duration-300 relative overflow-hidden group">
<div class="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-transparent via-imperial-red to-transparent opacity-0 group-hover:opacity-100 transition-opacity"></div>
<div class="size-12 flex items-center justify-center text-imperial-red mb-2 border border-china-gold/30 rounded-full bg-gold-light/20">
<span class="material-symbols-outlined text-2xl">bolt</span>
</div>
<h4 class="text-[18px] font-display font-bold text-ink-black">B1 / B2</h4>
<p class="text-[15px] leading-relaxed text-ink-black/70 font-serif">
Zero-shot and fine-tuned LLaVA models are compared side by side with latency and raw answer displayed.
</p>
</div>
<div class="flex flex-col gap-4 p-8 bg-paper-white border border-china-gold/20 shadow-sm hover:shadow-gold-glow transition-shadow duration-300 relative overflow-hidden group">
<div class="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-transparent via-imperial-red to-transparent opacity-0 group-hover:opacity-100 transition-opacity"></div>
<div class="size-12 flex items-center justify-center text-imperial-red mb-2 border border-china-gold/30 rounded-full bg-gold-light/20">
<span class="material-symbols-outlined text-2xl">verified</span>
</div>
<h4 class="text-[18px] font-display font-bold text-ink-black">DPO / PPO</h4>
<p class="text-[15px] leading-relaxed text-ink-black/70 font-serif">
Alignment and RL variants now have equal room in the grid, making the comparison feel intentional.
</p>
</div>
</div>
</main>
<footer class="w-full border-t-4 border-imperial-red bg-ink-black text-paper-white py-12">
<div class="mx-auto flex max-w-[1280px] flex-col md:flex-row items-center justify-between gap-8 px-4 md:px-0">
<div class="flex flex-col gap-2 md:items-start items-center">
<div class="flex items-center gap-2 mb-2">
<span class="material-symbols-outlined text-china-gold">chess_knight</span>
<span class="font-display font-bold text-lg tracking-wider">VQA RESEARCH</span>
</div>
<div class="text-[13px] text-paper-white/60 font-serif">
Medical VQA web demo for six-model comparison.
</div>
</div>
<div class="flex gap-8 text-[13px] text-paper-white/80 font-display tracking-widest uppercase">
<a class="hover:text-china-gold transition-colors" href="#upload">Upload</a>
<a class="hover:text-china-gold transition-colors" href="#results">Results</a>
</div>
</div>
</footer>
</div>
<script>
 const MODEL_ORDER = ["A1", "A2", "B1", "B2", "DPO", "PPO"];
 const MODEL_META = {
 A1: { name: "A1", title: "LSTM Baseline", note: "DenseNet-121 + PhoBERT + LSTM", icon: "neurology" },
 A2: { name: "A2", title: "Transformer Decoder", note: "DenseNet-121 + PhoBERT + Transformer", icon: "schema" },
 B1: { name: "B1", title: "Zero-shot", note: "LLaVA-Med base", icon: "visibility" },
 B2: { name: "B2", title: "Fine-tuned", note: "LLaVA-Med + LoRA", icon: "precision_manufacturing" },
 DPO: { name: "DPO", title: "Alignment", note: "B2 + DPO", icon: "verified" },
 PPO: { name: "PPO", title: "RL refinement", note: "B2 + PPO", icon: "syringe" },
 };
 const el = {
 imageInput: document.getElementById("image-input"),
 preview: document.getElementById("preview"),
 dropzoneEmpty: document.getElementById("dropzone-empty"),
 dropzone: document.getElementById("dropzone"),
 question: document.getElementById("question"),
 charCount: document.getElementById("char-count"),
 suggestionsRow: document.getElementById("suggestions-row"),
 runBtn: document.getElementById("run-btn"),
 resetBtn: document.getElementById("reset-btn"),
 statusText: document.getElementById("status-text"),
 resultsGrid: document.getElementById("results-grid"),
 };
 let currentImageFile = null;
 let selectedModels = new Set(MODEL_ORDER);
 let questionSuggestions = [];
 function escapeHtml(value) {
 return String(value ?? "")
 .replaceAll("&", "&amp;")
 .replaceAll("<", "&lt;")
 .replaceAll(">", "&gt;")
 .replaceAll('"', "&quot;");
 }
 function updateCharCount() {
 el.charCount.textContent = `${el.question.value.length}/200 Characters`;
 }
 function setStatus(message) {
 el.statusText.textContent = message;
 }
 function setPreview(file) {
 currentImageFile = file || null;
 if (!file) {
 el.preview.classList.add("hidden");
 el.dropzoneEmpty.classList.remove("hidden");
 el.preview.src = "";
 return;
 }
 const url = URL.createObjectURL(file);
 el.preview.src = url;
 el.preview.classList.remove("hidden");
 el.dropzoneEmpty.classList.add("hidden");
 }
 function fillQuestion(question) {
 el.question.value = question || "";
 updateCharCount();
 el.question.focus();
 }
 function renderQuestionSuggestions(items) {
 questionSuggestions = items || [];
 if (!questionSuggestions.length) {
 el.suggestionsRow.innerHTML = "";
 return;
 }
 el.suggestionsRow.innerHTML = questionSuggestions.map((item, index) => {
 const question = escapeHtml(item.question || "");
 return `
 <button type="button" class="hint-chip inline-flex items-center gap-2 rounded-full bg-transparent px-2 py-1 text-left text-[12px] leading-tight text-ink-black/50 hover:bg-imperial-red/5 hover:text-imperial-red transition-all" data-suggestion-index="${index}">
 <span class="size-1.5 rounded-full bg-imperial-red/70"></span>
 <span class="truncate max-w-[280px] font-serif">${question}</span>
 </button>
 `;
 }).join("");
 el.suggestionsRow.querySelectorAll("[data-suggestion-index]").forEach((button) => {
 button.addEventListener("click", () => {
 const index = Number(button.dataset.suggestionIndex);
 const item = questionSuggestions[index];
 if (!item) return;
 fillQuestion(item.question);
 setStatus(`Loaded suggested question.`);
 });
 });
 }
 async function loadQuestionSuggestions() {
 if (questionSuggestions.length) {
 return;
 }
 el.suggestionsRow.innerHTML = "";
 try {
 const res = await fetch("/v1/question-suggestions?limit=8");
 const data = await res.json();
 renderQuestionSuggestions(data.suggestions || []);
 } catch (err) {
 el.suggestionsRow.innerHTML = "";
 }
 }
 function renderModelGrid(results) {
 const byVariant = Object.fromEntries(results.map((r) => [r.variant, r]));
 el.resultsGrid.innerHTML = MODEL_ORDER.map((variant) => {
 const meta = MODEL_META[variant];
 const res = byVariant[variant];
 const status = res ? res.status : "not requested";
 const ok = res && res.status === "ok";
 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";
 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' : ''}">
 <span class="material-symbols-outlined text-[22px]">${meta.icon}</span>
 </div>
 <div>
 <div class="text-[11px] uppercase tracking-[0.2em] text-china-gold font-bold">${meta.name}</div>
 <div class="text-[15px] font-display font-bold text-ink-black">${meta.title}</div>
 </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"}
 </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)}
 </p>
 </div>
 <div class="flex items-center justify-between text-[12px] text-ink-black/55">
 <span>${escapeHtml(res ? (res.prediction_raw || "") : "")}</span>
 <span>${escapeHtml(status)}</span>
 </div>
 </article>
 `;
 }).join("");
 }
 function updateModelChips() {
 document.querySelectorAll(".model-chip").forEach((chip) => {
 const variant = chip.dataset.model;
 const active = selectedModels.has(variant);
 chip.style.background = active ? "#A8181B" : "#fff";
 chip.style.color = active ? "#FDFBF7" : "#1A1A1A";
 chip.style.borderColor = active ? "#A8181B" : "rgba(212,175,55,0.35)";
 });
 }
 function applyTiltEffect(selector, maxRotate = 6) {
 document.querySelectorAll(selector).forEach((card) => {
 if (card.dataset.tiltBound === "1") return;
 card.dataset.tiltBound = "1";
 card.addEventListener("mousemove", (e) => {
 const rect = card.getBoundingClientRect();
 const x = (e.clientX - rect.left) / rect.width;
 const y = (e.clientY - rect.top) / rect.height;
 const rotateY = (x - 0.5) * maxRotate * 2;
 const rotateX = (0.5 - y) * maxRotate * 2;
 card.style.transform = `rotateX(${rotateX}deg) rotateY(${rotateY}deg) translateY(-2px)`;
 });
 card.addEventListener("mouseleave", () => {
 card.style.transform = "";
 });
 });
 }
 async function loadModels() {
 try {
 const res = await fetch("/v1/models");
 const data = await res.json();
 updateModelChips();
 setStatus("Ready. Upload an image and run all six models.");
 } catch (err) {
 setStatus(`Failed to load model metadata: ${err.message}`);
 }
 }
 el.imageInput.addEventListener("change", (e) => {
 setPreview(e.target.files?.[0]);
 });
 el.dropzone.addEventListener("click", () => {
 el.imageInput.click();
 });
 el.dropzone.addEventListener("dragover", (e) => {
 e.preventDefault();
 el.dropzone.classList.add("ring-2", "ring-imperial-red/30");
 });
 el.dropzone.addEventListener("dragleave", () => {
 el.dropzone.classList.remove("ring-2", "ring-imperial-red/30");
 });
 el.dropzone.addEventListener("drop", (e) => {
 e.preventDefault();
 el.dropzone.classList.remove("ring-2", "ring-imperial-red/30");
 const file = e.dataTransfer.files?.[0];
 if (file) {
 const dt = new DataTransfer();
 dt.items.add(file);
 el.imageInput.files = dt.files;
 setPreview(file);
 }
 });
 el.question.addEventListener("input", updateCharCount);
 el.question.addEventListener("focus", loadQuestionSuggestions, { once: true });
 document.querySelectorAll(".model-chip").forEach((chip) => {
 chip.addEventListener("click", () => {
 const variant = chip.dataset.model;
 if (selectedModels.has(variant)) selectedModels.delete(variant);
 else selectedModels.add(variant);
 if (selectedModels.size === 0) {
 selectedModels = new Set(MODEL_ORDER);
 }
 updateModelChips();
 });
 });
 el.resetBtn.addEventListener("click", () => {
 selectedModels = new Set(MODEL_ORDER);
 el.question.value = "";
 el.imageInput.value = "";
 setPreview(null);
 updateCharCount();
 updateModelChips();
 el.resultsGrid.innerHTML = "";
 setStatus("Reset complete.");
 });
 el.runBtn.addEventListener("click", async () => {
 if (!currentImageFile) {
 setStatus("Please upload an image first.");
 return;
 }
 if (!el.question.value.trim()) {
 setStatus("Please enter a question.");
 return;
 }
 if (selectedModels.size === 0) {
 setStatus("Please select at least one model.");
 return;
 }
 el.runBtn.disabled = true;
 el.runBtn.querySelector("span").textContent = "Running...";
 setStatus("Running all selected models...");
 try {
 const formData = new FormData();
 formData.append("question", el.question.value.trim());
 formData.append("model_names", JSON.stringify(Array.from(selectedModels)));
 formData.append("image", currentImageFile);
 const res = await fetch("/v1/predict", { method: "POST", body: formData });
 const data = await res.json();
 if (!res.ok) {
 throw new Error(data?.detail || "Prediction failed");
 }
 renderModelGrid(data.results || [], data.question || el.question.value.trim(), data.summary);
 applyTiltEffect(".tilt-card", 5);
 setStatus(`Done. ${data.summary?.success_count ?? 0} models succeeded.`);
 } catch (err) {
 setStatus(err.message || "Prediction failed");
 } finally {
 el.runBtn.disabled = false;
 el.runBtn.querySelector("span").textContent = "Run Comparison";
 }
 });
 updateCharCount();
 updateModelChips();
 loadModels();
 loadQuestionSuggestions();
 renderModelGrid([], "", null);
 applyTiltEffect(".tilt-card", 5);
</script>
</body></html>