Spaces:
Sleeping
Sleeping
Update templates/index.html
Browse files- templates/index.html +185 -332
templates/index.html
CHANGED
|
@@ -1,373 +1,226 @@
|
|
| 1 |
-
<!
|
| 2 |
<html lang="en">
|
| 3 |
<head>
|
| 4 |
<meta charset="UTF-8" />
|
| 5 |
-
<
|
| 6 |
-
<
|
| 7 |
-
|
| 8 |
-
<link rel="icon" type="image/svg+xml" href="/assets/brain/brain.svg" />
|
| 9 |
<style>
|
| 10 |
-
:root {
|
| 11 |
-
|
| 12 |
-
|
| 13 |
-
|
| 14 |
-
|
| 15 |
-
|
| 16 |
-
|
| 17 |
-
|
| 18 |
-
.sub { margin: 4px 0 0; color:#aab0c0; font-size: 14px; }
|
| 19 |
|
| 20 |
-
|
| 21 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 22 |
|
| 23 |
-
|
| 24 |
-
|
| 25 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
| 26 |
|
| 27 |
-
|
| 28 |
-
|
| 29 |
-
|
| 30 |
-
|
| 31 |
-
|
|
|
|
| 32 |
|
| 33 |
-
|
| 34 |
-
|
| 35 |
-
|
| 36 |
-
|
| 37 |
-
|
| 38 |
|
| 39 |
-
|
| 40 |
-
|
| 41 |
-
|
|
|
|
| 42 |
|
| 43 |
-
.
|
| 44 |
-
|
| 45 |
-
|
| 46 |
-
|
| 47 |
-
|
|
|
|
|
|
|
|
|
|
| 48 |
|
| 49 |
-
|
| 50 |
-
|
| 51 |
-
|
| 52 |
-
|
| 53 |
-
|
|
|
|
| 54 |
|
| 55 |
-
.
|
| 56 |
-
|
| 57 |
-
|
| 58 |
-
|
| 59 |
-
|
| 60 |
-
|
| 61 |
-
|
| 62 |
-
/* Modal */
|
| 63 |
-
.modal { position: fixed; inset: 0; display:none; }
|
| 64 |
-
.modal[aria-hidden="false"] { display:block; }
|
| 65 |
-
.modal-backdrop { position:absolute; inset:0; background: rgba(0,0,0,.55); }
|
| 66 |
-
.modal-card { position:relative; max-width: 520px; margin: 8vh auto; background: rgba(10,12,18,.95);
|
| 67 |
-
border: 1px solid rgba(255,255,255,.12); border-radius: 18px; padding: 18px; box-shadow: 0 30px 60px rgba(0,0,0,.35); }
|
| 68 |
-
.prob-row { display:flex; justify-content:space-between; gap:12px; padding:10px 12px; border-radius: 14px;
|
| 69 |
-
border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.04); margin-top: 10px; }
|
| 70 |
-
</style>
|
| 71 |
-
</head>
|
| 72 |
|
| 73 |
-
|
| 74 |
-
<div class="container">
|
| 75 |
-
<div class="header">
|
| 76 |
-
<div class="brand">
|
| 77 |
-
<img src="/assets/brain/brain.svg" alt="NeuraScan logo" />
|
| 78 |
-
<div>
|
| 79 |
-
<h1>NeuraScan</h1>
|
| 80 |
-
<div class="sub">AI-assisted MRI screening for Alzheimer’s disease (demo)</div>
|
| 81 |
-
</div>
|
| 82 |
-
</div>
|
| 83 |
-
<div class="pill" id="statusPill">Ready</div>
|
| 84 |
-
</div>
|
| 85 |
|
| 86 |
-
|
| 87 |
-
|
| 88 |
-
|
| 89 |
-
|
| 90 |
-
|
| 91 |
-
|
|
|
|
| 92 |
|
| 93 |
-
|
| 94 |
-
|
| 95 |
-
|
| 96 |
-
|
| 97 |
-
|
| 98 |
-
|
| 99 |
-
|
| 100 |
|
| 101 |
-
|
| 102 |
-
|
| 103 |
-
|
| 104 |
-
|
| 105 |
-
|
| 106 |
-
|
| 107 |
-
<div class="pill"><span>Tip</span><span>Click box then Ctrl+V</span></div>
|
| 108 |
-
</div>
|
| 109 |
|
| 110 |
-
|
| 111 |
-
|
| 112 |
-
|
| 113 |
-
|
|
|
|
| 114 |
|
| 115 |
-
|
| 116 |
-
|
| 117 |
-
|
| 118 |
-
|
| 119 |
-
|
| 120 |
-
</div>
|
| 121 |
-
</div>
|
| 122 |
-
</div>
|
| 123 |
|
| 124 |
-
|
| 125 |
-
|
| 126 |
-
|
| 127 |
-
|
| 128 |
-
|
| 129 |
-
|
| 130 |
-
<div class="bar"><div id="confBar"></div></div>
|
| 131 |
-
<div class="muted" style="margin-top:6px;" id="confText">—</div>
|
| 132 |
-
</div>
|
| 133 |
-
<div class="warn" id="warnBox">
|
| 134 |
-
Low confidence: consider re-uploading a clearer MRI or trying another model.
|
| 135 |
-
</div>
|
| 136 |
-
<div style="display:flex; gap:10px; margin-top:12px; flex-wrap:wrap;">
|
| 137 |
-
<button id="detailsBtn" style="display:none;">Show most likely result</button>
|
| 138 |
-
<button id="newBtn">Start a new scan</button>
|
| 139 |
-
</div>
|
| 140 |
-
</div>
|
| 141 |
|
| 142 |
-
|
| 143 |
-
|
| 144 |
-
|
| 145 |
-
|
|
|
|
| 146 |
|
| 147 |
-
|
| 148 |
-
|
| 149 |
-
|
| 150 |
-
|
| 151 |
-
|
| 152 |
-
|
| 153 |
-
|
| 154 |
-
</div>
|
| 155 |
-
<div class="ex">
|
| 156 |
-
<img src="/assets/brain/unsupportedexample.jpg" onerror="this.style.display='none';" alt="Unsupported example"/>
|
| 157 |
-
<div class="cap">Unsupported example</div>
|
| 158 |
-
</div>
|
| 159 |
-
</div>
|
| 160 |
|
| 161 |
-
|
| 162 |
-
|
| 163 |
-
|
| 164 |
-
|
| 165 |
-
|
| 166 |
-
|
| 167 |
-
|
| 168 |
-
</div>
|
| 169 |
</div>
|
| 170 |
</div>
|
|
|
|
|
|
|
| 171 |
|
| 172 |
-
<
|
| 173 |
-
|
| 174 |
-
|
| 175 |
-
const detailsBtn = document.getElementById('detailsBtn'); const modelName = document.getElementById('modelName');
|
| 176 |
-
const fileInput = document.getElementById('fileInput');
|
| 177 |
-
const uploadBtn = document.getElementById('uploadBtn');
|
| 178 |
-
const scanBtn = document.getElementById('scanBtn');
|
| 179 |
-
const newBtn = document.getElementById('newBtn');
|
| 180 |
-
const modal = document.getElementById('modal');
|
| 181 |
-
const modalBackdrop = document.getElementById('modalBackdrop');
|
| 182 |
-
const modalClose = document.getElementById('modalClose');
|
| 183 |
-
const modalTitle = document.getElementById('modalTitle');
|
| 184 |
-
const modalSubtitle = document.getElementById('modalSubtitle');
|
| 185 |
-
const modalList = document.getElementById('modalList');
|
| 186 |
-
const drop = document.getElementById('drop');
|
| 187 |
-
const preview = document.getElementById('preview');
|
| 188 |
-
const previewImg = document.getElementById('previewImg');
|
| 189 |
-
const fileMeta = document.getElementById('fileMeta');
|
| 190 |
-
|
| 191 |
-
const resultBox = document.getElementById('result');
|
| 192 |
-
const resultText = document.getElementById('resultText');
|
| 193 |
-
const msgText = document.getElementById('msgText');
|
| 194 |
-
const confBar = document.getElementById('confBar');
|
| 195 |
-
const confText = document.getElementById('confText');
|
| 196 |
-
const warnBox = document.getElementById('warnBox');
|
| 197 |
-
|
| 198 |
-
let selectedFile = null;
|
| 199 |
-
let modelMeta = {};
|
| 200 |
-
let lastResult = null;
|
| 201 |
-
let models = [];
|
| 202 |
-
|
| 203 |
-
function setStatus(text) { statusPill.textContent = text; }
|
| 204 |
|
| 205 |
-
|
| 206 |
-
|
| 207 |
-
}
|
| 208 |
|
| 209 |
-
|
| 210 |
-
if (!result) return;
|
| 211 |
-
const top = result.top || (result.probabilities || [])[0] || {};
|
| 212 |
-
const label = top.label || '—';
|
| 213 |
-
const prob = (top.prob ?? top.probability ?? 0);
|
| 214 |
-
modalTitle.textContent = label;
|
| 215 |
-
modalSubtitle.textContent = `Confidence: ${(prob*100).toFixed(1)}%`;
|
| 216 |
-
modalList.innerHTML = '';
|
| 217 |
-
modal.setAttribute('aria-hidden','false');
|
| 218 |
-
}
|
| 219 |
-
function closeModal() {
|
| 220 |
-
modal.setAttribute('aria-hidden','true');
|
| 221 |
-
}
|
| 222 |
|
|
|
|
| 223 |
|
| 224 |
-
|
| 225 |
-
|
| 226 |
-
|
| 227 |
-
|
| 228 |
-
modelMeta = Object.fromEntries(list.map(m => [m.id, m]));
|
| 229 |
-
modelSelect.innerHTML = list.map(m => `<option value="${m.id}">${m.name}</option>`).join('');
|
| 230 |
-
if (payload.default_model_id && modelMeta[payload.default_model_id]) {
|
| 231 |
-
modelSelect.value = payload.default_model_id;
|
| 232 |
-
}
|
| 233 |
-
modelName.textContent = modelSelect.options[modelSelect.selectedIndex]?.text || 'Model';
|
| 234 |
|
| 235 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 236 |
|
| 237 |
-
|
| 238 |
-
|
| 239 |
-
|
| 240 |
-
|
| 241 |
-
|
| 242 |
-
|
| 243 |
-
|
| 244 |
-
|
| 245 |
-
|
| 246 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 247 |
|
| 248 |
-
|
| 249 |
-
|
|
|
|
| 250 |
|
| 251 |
-
|
| 252 |
-
|
| 253 |
-
|
| 254 |
-
|
| 255 |
-
|
| 256 |
-
|
| 257 |
-
|
| 258 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 259 |
}
|
| 260 |
|
| 261 |
-
|
| 262 |
-
|
| 263 |
-
|
| 264 |
-
|
| 265 |
-
|
| 266 |
-
|
| 267 |
-
});
|
| 268 |
-
|
| 269 |
-
// Threshold controls
|
| 270 |
-
|
| 271 |
-
// Drag & drop
|
| 272 |
-
['dragenter','dragover'].forEach(ev => drop.addEventListener(ev, (e) => {
|
| 273 |
-
e.preventDefault(); e.stopPropagation();
|
| 274 |
-
drop.classList.add('dragover');
|
| 275 |
-
}));
|
| 276 |
-
['dragleave','drop'].forEach(ev => drop.addEventListener(ev, (e) => {
|
| 277 |
-
e.preventDefault(); e.stopPropagation();
|
| 278 |
-
drop.classList.remove('dragover');
|
| 279 |
-
}));
|
| 280 |
-
drop.addEventListener('drop', (e) => {
|
| 281 |
-
const f = e.dataTransfer.files?.[0];
|
| 282 |
-
if (f) setFile(f);
|
| 283 |
-
});
|
| 284 |
-
|
| 285 |
-
// Paste
|
| 286 |
-
window.addEventListener('paste', (e) => {
|
| 287 |
-
const item = [...(e.clipboardData?.items || [])].find(i => i.type.startsWith('image/'));
|
| 288 |
-
if (!item) return;
|
| 289 |
-
const f = item.getAsFile();
|
| 290 |
-
if (f) setFile(f);
|
| 291 |
-
});
|
| 292 |
-
|
| 293 |
-
async function runScan() {
|
| 294 |
-
if (!selectedFile) return;
|
| 295 |
-
setStatus('Scanning…');
|
| 296 |
-
scanBtn.disabled = true;
|
| 297 |
-
warnBox.style.display = 'none';
|
| 298 |
-
|
| 299 |
-
const fd = new FormData();
|
| 300 |
-
fd.append('file', selectedFile);
|
| 301 |
-
fd.append('model_id', modelSelect.value);
|
| 302 |
-
|
| 303 |
-
try {
|
| 304 |
-
const res = await fetch('/api/classify', { method: 'POST', body: fd });
|
| 305 |
-
const data = await res.json();
|
| 306 |
-
if (!res.ok) throw new Error(data.error || 'Request failed');
|
| 307 |
-
|
| 308 |
-
resultBox.style.display = 'block';
|
| 309 |
-
lastResult = data;
|
| 310 |
-
const pred = data.prediction || {};
|
| 311 |
-
const model = data.model || {};
|
| 312 |
-
const top = (data.probabilities || [])[0] || {};
|
| 313 |
-
const isUncertain = (pred.id === 'Uncertain') || (pred.label === 'Uncertain');
|
| 314 |
-
|
| 315 |
-
resultText.textContent = pred.label || '—';
|
| 316 |
-
const pct = Math.round((pred.confidence || 0) * 100);
|
| 317 |
-
|
| 318 |
-
if (isUncertain) {
|
| 319 |
-
confBar.style.width = '0%';
|
| 320 |
-
confText.textContent = '';
|
| 321 |
-
} else {
|
| 322 |
-
confBar.style.width = pct + '%';
|
| 323 |
-
confText.textContent = `${pct}%`;
|
| 324 |
-
}
|
| 325 |
-
|
| 326 |
-
if (isUncertain) {
|
| 327 |
-
warnBox.style.display = 'block';
|
| 328 |
-
msgText.textContent = `${model.name || 'Model'} • Uncertain — consult a medical professional.`;
|
| 329 |
-
detailsBtn.style.display = '';
|
| 330 |
-
} else {
|
| 331 |
-
warnBox.style.display = 'none';
|
| 332 |
-
msgText.textContent = `${model.name || 'Model'} • Prediction generated successfully.`;
|
| 333 |
-
detailsBtn.style.display = 'none';
|
| 334 |
-
}
|
| 335 |
-
|
| 336 |
-
setStatus('Done');
|
| 337 |
-
scanBtn.style.display = 'none';
|
| 338 |
-
newBtn.style.display = '';
|
| 339 |
-
} catch (err) {
|
| 340 |
-
setStatus('Error');
|
| 341 |
-
alert(err.message);
|
| 342 |
-
scanBtn.disabled = false;
|
| 343 |
-
}
|
| 344 |
}
|
| 345 |
|
| 346 |
-
|
| 347 |
-
|
| 348 |
-
|
| 349 |
-
|
| 350 |
-
modalClose.addEventListener('click', closeModal);
|
| 351 |
-
document.addEventListener('keydown', (e) => { if (e.key === 'Escape') closeModal(); });
|
| 352 |
|
| 353 |
-
|
| 354 |
-
|
| 355 |
</script>
|
| 356 |
-
|
| 357 |
-
<div id="modal" class="modal" aria-hidden="true">
|
| 358 |
-
<div class="modal-backdrop" id="modalBackdrop"></div>
|
| 359 |
-
<div class="modal-card" role="dialog" aria-modal="true" aria-labelledby="modalTitle">
|
| 360 |
-
<div style="display:flex; justify-content:space-between; align-items:center; gap:12px;">
|
| 361 |
-
<div>
|
| 362 |
-
<div class="muted">Most likely result</div>
|
| 363 |
-
<div class="big" id="modalTitle">—</div>
|
| 364 |
-
</div>
|
| 365 |
-
<button id="modalClose" aria-label="Close details">Close</button>
|
| 366 |
-
</div>
|
| 367 |
-
<div class="muted" style="margin-top:8px;" id="modalSubtitle">—</div>
|
| 368 |
-
<div style="margin-top:14px;" id="modalList"></div>
|
| 369 |
-
</div>
|
| 370 |
-
</div>
|
| 371 |
-
|
| 372 |
</body>
|
| 373 |
</html>
|
|
|
|
| 1 |
+
<!DOCTYPE html>
|
| 2 |
<html lang="en">
|
| 3 |
<head>
|
| 4 |
<meta charset="UTF-8" />
|
| 5 |
+
<title>NeuraScan</title>
|
| 6 |
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
| 7 |
+
|
|
|
|
| 8 |
<style>
|
| 9 |
+
:root {
|
| 10 |
+
--bg: #0b1220;
|
| 11 |
+
--card: #0f1b33;
|
| 12 |
+
--text: #e8eefc;
|
| 13 |
+
--muted: #a9b7d0;
|
| 14 |
+
--border: rgba(255,255,255,.08);
|
| 15 |
+
--primary: #4f7cff;
|
| 16 |
+
}
|
|
|
|
| 17 |
|
| 18 |
+
:root[data-theme="light"] {
|
| 19 |
+
--bg: #f6f7fb;
|
| 20 |
+
--card: #ffffff;
|
| 21 |
+
--text: #0c1222;
|
| 22 |
+
--muted: #44506a;
|
| 23 |
+
--border: rgba(0,0,0,.08);
|
| 24 |
+
--primary: #355dff;
|
| 25 |
+
}
|
| 26 |
|
| 27 |
+
* { box-sizing: border-box; }
|
| 28 |
+
body {
|
| 29 |
+
margin: 0;
|
| 30 |
+
font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
|
| 31 |
+
background: var(--bg);
|
| 32 |
+
color: var(--text);
|
| 33 |
+
}
|
| 34 |
|
| 35 |
+
header {
|
| 36 |
+
display: flex;
|
| 37 |
+
align-items: center;
|
| 38 |
+
justify-content: space-between;
|
| 39 |
+
padding: 20px 28px;
|
| 40 |
+
}
|
| 41 |
|
| 42 |
+
header .brand {
|
| 43 |
+
display: flex;
|
| 44 |
+
align-items: center;
|
| 45 |
+
gap: 12px;
|
| 46 |
+
}
|
| 47 |
|
| 48 |
+
header img {
|
| 49 |
+
width: 40px;
|
| 50 |
+
height: 40px;
|
| 51 |
+
}
|
| 52 |
|
| 53 |
+
.chip {
|
| 54 |
+
border: 1px solid var(--border);
|
| 55 |
+
background: var(--card);
|
| 56 |
+
color: var(--text);
|
| 57 |
+
padding: 6px 12px;
|
| 58 |
+
border-radius: 999px;
|
| 59 |
+
cursor: pointer;
|
| 60 |
+
}
|
| 61 |
|
| 62 |
+
main {
|
| 63 |
+
display: grid;
|
| 64 |
+
grid-template-columns: 1.2fr 1fr;
|
| 65 |
+
gap: 24px;
|
| 66 |
+
padding: 0 28px 28px;
|
| 67 |
+
}
|
| 68 |
|
| 69 |
+
.card {
|
| 70 |
+
background: var(--card);
|
| 71 |
+
border: 1px solid var(--border);
|
| 72 |
+
border-radius: 16px;
|
| 73 |
+
padding: 20px;
|
| 74 |
+
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 75 |
|
| 76 |
+
h2 { margin-top: 0; }
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 77 |
|
| 78 |
+
.upload-box {
|
| 79 |
+
border: 2px dashed var(--border);
|
| 80 |
+
border-radius: 12px;
|
| 81 |
+
padding: 20px;
|
| 82 |
+
text-align: center;
|
| 83 |
+
margin-top: 12px;
|
| 84 |
+
}
|
| 85 |
|
| 86 |
+
select, button {
|
| 87 |
+
padding: 8px 12px;
|
| 88 |
+
border-radius: 8px;
|
| 89 |
+
border: 1px solid var(--border);
|
| 90 |
+
background: var(--card);
|
| 91 |
+
color: var(--text);
|
| 92 |
+
}
|
| 93 |
|
| 94 |
+
button.primary {
|
| 95 |
+
background: var(--primary);
|
| 96 |
+
border: none;
|
| 97 |
+
color: white;
|
| 98 |
+
cursor: pointer;
|
| 99 |
+
}
|
|
|
|
|
|
|
| 100 |
|
| 101 |
+
.team {
|
| 102 |
+
display: grid;
|
| 103 |
+
grid-template-columns: 1fr 1fr;
|
| 104 |
+
gap: 12px;
|
| 105 |
+
}
|
| 106 |
|
| 107 |
+
.member {
|
| 108 |
+
display: flex;
|
| 109 |
+
align-items: center;
|
| 110 |
+
gap: 10px;
|
| 111 |
+
}
|
|
|
|
|
|
|
|
|
|
| 112 |
|
| 113 |
+
.member img {
|
| 114 |
+
width: 40px;
|
| 115 |
+
height: 40px;
|
| 116 |
+
border-radius: 50%;
|
| 117 |
+
object-fit: cover;
|
| 118 |
+
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 119 |
|
| 120 |
+
.examples img {
|
| 121 |
+
width: 100%;
|
| 122 |
+
border-radius: 12px;
|
| 123 |
+
margin-top: 8px;
|
| 124 |
+
}
|
| 125 |
|
| 126 |
+
footer {
|
| 127 |
+
padding: 12px 28px;
|
| 128 |
+
font-size: 12px;
|
| 129 |
+
color: var(--muted);
|
| 130 |
+
}
|
| 131 |
+
</style>
|
| 132 |
+
</head>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 133 |
|
| 134 |
+
<body>
|
| 135 |
+
<header>
|
| 136 |
+
<div class="brand">
|
| 137 |
+
<img src="{{ url_for('static', filename='assets/brain/brain.svg') }}" alt="NeuraScan">
|
| 138 |
+
<div>
|
| 139 |
+
<strong>NeuraScan</strong><br>
|
| 140 |
+
<small class="muted">AI-assisted MRI screening (demo)</small>
|
|
|
|
| 141 |
</div>
|
| 142 |
</div>
|
| 143 |
+
<button id="themeToggle" class="chip">Light</button>
|
| 144 |
+
</header>
|
| 145 |
|
| 146 |
+
<main>
|
| 147 |
+
<div class="card">
|
| 148 |
+
<h2>New scan</h2>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 149 |
|
| 150 |
+
<label>Model</label><br>
|
| 151 |
+
<select id="modelSelect"></select><br><br>
|
|
|
|
| 152 |
|
| 153 |
+
<input type="file" id="fileInput" accept="image/*"><br><br>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 154 |
|
| 155 |
+
<button class="primary">Run scan</button>
|
| 156 |
|
| 157 |
+
<div class="upload-box">
|
| 158 |
+
Drag & drop, paste (Ctrl+V), or upload an MRI image
|
| 159 |
+
</div>
|
| 160 |
+
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 161 |
|
| 162 |
+
<div class="card">
|
| 163 |
+
<h2>Examples</h2>
|
| 164 |
+
<div class="examples">
|
| 165 |
+
<img src="{{ url_for('static', filename='assets/brain/supportedexample.jpg') }}">
|
| 166 |
+
<img src="{{ url_for('static', filename='assets/brain/unsupportedexample.jpg') }}">
|
| 167 |
+
</div>
|
| 168 |
|
| 169 |
+
<h2 style="margin-top:20px;">Team</h2>
|
| 170 |
+
<div class="team">
|
| 171 |
+
<div class="member">
|
| 172 |
+
<img src="{{ url_for('static', filename='assets/images/team/asem.jpg') }}">
|
| 173 |
+
<div>Asem<br><small>ML / Deployment</small></div>
|
| 174 |
+
</div>
|
| 175 |
+
<div class="member">
|
| 176 |
+
<img src="{{ url_for('static', filename='assets/images/team/sameh.jpg') }}">
|
| 177 |
+
<div>Sameh<br><small>ML / Research</small></div>
|
| 178 |
+
</div>
|
| 179 |
+
<div class="member">
|
| 180 |
+
<img src="{{ url_for('static', filename='assets/images/team/fatma.jpg') }}">
|
| 181 |
+
<div>Fatma<br><small>Data / QA</small></div>
|
| 182 |
+
</div>
|
| 183 |
+
<div class="member">
|
| 184 |
+
<img src="{{ url_for('static', filename='assets/images/team/gehad.jpg') }}">
|
| 185 |
+
<div>Gehad<br><small>Frontend</small></div>
|
| 186 |
+
</div>
|
| 187 |
+
</div>
|
| 188 |
+
</div>
|
| 189 |
+
</main>
|
| 190 |
|
| 191 |
+
<footer>
|
| 192 |
+
This is an educational demo and not medical advice.
|
| 193 |
+
</footer>
|
| 194 |
|
| 195 |
+
<script>
|
| 196 |
+
async function loadModels() {
|
| 197 |
+
const res = await fetch("/api/models");
|
| 198 |
+
const models = await res.json();
|
| 199 |
+
const select = document.getElementById("modelSelect");
|
| 200 |
+
select.innerHTML = "";
|
| 201 |
+
models.forEach(m => {
|
| 202 |
+
const opt = document.createElement("option");
|
| 203 |
+
opt.value = m.id;
|
| 204 |
+
opt.textContent = m.name;
|
| 205 |
+
if (!m.available) opt.disabled = true;
|
| 206 |
+
select.appendChild(opt);
|
| 207 |
+
});
|
| 208 |
}
|
| 209 |
|
| 210 |
+
function setTheme(theme) {
|
| 211 |
+
document.documentElement.dataset.theme = theme;
|
| 212 |
+
localStorage.setItem("theme", theme);
|
| 213 |
+
document.getElementById("themeToggle").textContent =
|
| 214 |
+
theme === "dark" ? "Light" : "Dark";
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 215 |
}
|
| 216 |
|
| 217 |
+
document.getElementById("themeToggle").onclick = () => {
|
| 218 |
+
const t = document.documentElement.dataset.theme === "dark" ? "light" : "dark";
|
| 219 |
+
setTheme(t);
|
| 220 |
+
};
|
|
|
|
|
|
|
| 221 |
|
| 222 |
+
setTheme(localStorage.getItem("theme") || "dark");
|
| 223 |
+
loadModels();
|
| 224 |
</script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 225 |
</body>
|
| 226 |
</html>
|