our_knp/viz/fast_viz.html

<!doctype html>
<html lang="ru"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Цифры · быстрая IF-сеть</title>
<style>
:root{color-scheme:dark;--bg:#10161e;--card:#1a2430;--line:#334252;--ink:#f2f6fb;--muted:#a4b5c8;--accent:#72e2bb}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.5 system-ui,sans-serif}main{max-width:1120px;margin:auto;padding:28px 20px 48px}a{color:var(--accent)}h1{font-size:clamp(28px,5vw,44px);line-height:1.15;margin:10px 0}p{margin:8px 0}.muted{color:var(--muted)}.kicker{letter-spacing:.15em;text-transform:uppercase;font-size:12px;color:var(--accent)}.head{display:flex;justify-content:space-between;gap:20px;align-items:center;margin-bottom:24px}.metric{border:1px solid var(--line);padding:12px 18px;border-radius:14px;min-width:180px}.metric strong{display:block;font-size:30px}.grid{display:grid;grid-template-columns:320px minmax(240px,1fr);gap:18px}.card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:20px}.label{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}#draw{display:block;width:100%;max-width:280px;height:auto;aspect-ratio:1;border-radius:12px;touch-action:none;background:#000;cursor:crosshair;border:1px solid #4c6077}button{font:inherit;color:var(--ink);background:#243343;border:1px solid #53677e;border-radius:9px;padding:8px 13px;cursor:pointer}button:hover{border-color:var(--accent)}button:focus-visible,a:focus-visible{outline:3px solid var(--accent);outline-offset:3px}.controls{display:flex;gap:8px;align-items:center;margin-top:12px}.controls button:first-child{background:var(--accent);color:#07261d;border:0;font-weight:650}.answer{display:flex;align-items:baseline;gap:18px}#answer{font-size:110px;line-height:1.15;font-weight:750;letter-spacing:-.06em}#latency{font-variant-numeric:tabular-nums;color:var(--accent)}#status{min-height:48px;color:var(--muted)}.row{display:grid;grid-template-columns:18px 1fr 55px;gap:10px;align-items:center;margin:12px 0}.track{height:12px;border-radius:10px;background:#0d141c;overflow:hidden}.bar{height:100%;background:#5d819b;border-radius:10px}.row:first-child .bar{background:var(--accent)}.score{font-size:13px;text-align:right;font-variant-numeric:tabular-nums}.preview{display:flex;align-items:center;gap:12px;margin:18px 0}#normalized{width:84px;height:84px;background:#000;image-rendering:pixelated;border-radius:5px}#gallery{display:flex;gap:9px;overflow-x:auto;padding:4px 3px 12px}#gallery button{position:relative;flex:0 0 54px;padding:4px;border-radius:8px}#gallery button[aria-current="true"]{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}#gallery canvas{width:44px;height:44px;display:block;background:#000}#gallery small{display:block;font-size:10px;color:var(--muted)}.wide{margin-top:18px}.foot{margin-top:22px;font-size:13px;color:var(--muted);line-height:1.7}#error{color:#ffb49f}body.loading button{opacity:.5}details{margin-top:16px}summary{cursor:pointer}code{font-size:12px;word-break:break-word}@media(max-width:650px){main{padding:20px 12px}.grid{grid-template-columns:1fr}.head{align-items:start;flex-direction:column}.metric{display:flex;align-items:center;gap:15px;width:100%}.metric strong{font-size:26px}.card{padding:16px}#draw{margin:auto;width:280px;max-width:100%}#answer{font-size:86px}}
</style></head><body class="loading"><main><p style="font:14px system-ui;margin:16px"><a style="color:#55cda9" href="http://10.9.8.230:8081/native_viz.html">Новая нативная сеть AltAI · KNP / официальный GoldenModel</a></p>
<div class="kicker">Новая модель · быстро в браузере</div><div class="head"><div><h1>Нарисуй цифру</h1><p class="muted">Сеть отвечает сразу, пока ты рисуешь. Каждый рисунок обрабатывается с чистого состояния.</p></div><div class="metric"><strong id="accuracy">Загрузка…</strong><span>точность на MNIST test<br>10 000 новых для обучения картинок</span></div></div>
<div class="grid"><section class="card"><div class="label">Твой рисунок</div><canvas id="draw" width="280" height="280" aria-label="Поле рисования цифры мышью или пальцем"></canvas><div class="controls"><button id="clear">Очистить</button><button id="recognize">Распознать</button></div><p class="muted" style="font-size:13px">Рисуй одну цифру. Размер и положение исправит нормализация.</p></section>
<section class="card"><div class="label">Ответ сети</div><div class="answer"><strong id="answer" aria-live="polite">—</strong><span id="latency"></span></div><p id="status" role="status">Загружаю новую модель…</p><div id="scores" aria-label="Пять лучших оценок сети"></div><div class="preview"><canvas id="normalized" width="28" height="28" aria-label="Нормализованный вход сети"></canvas><span class="muted" style="font-size:13px">Именно так видит сеть:<br>28×28, рамка 20 px, центр массы.</span></div><p class="muted" style="font-size:12px">Числа справа — оценки классов, а не проценты уверенности.</p><p id="error" role="alert"></p></section></div>
<section class="card wide"><div class="label">Примеры из официального test · не использованы при обучении</div><div id="gallery"></div><p id="sample" class="muted" style="font-size:13px"></p></section>
<div class="foot"><p id="architecture"></p><p>55 000 train · 5 000 validation для выбора модели · 10 000 test для финальной проверки. Аугментации сдвига и толщины применялись только к train. Встроенные примеры — из test.</p><p><a href="altai_viz.html">Старые колонки AltAI</a> · <a href="aug_viz.html">Старый вариант со сдвигами</a>. Их исторические веса отличаются от этой модели и от CPU-прогона KNP 92,23%.</p><details><summary>Версия и проверка модели</summary><p id="version"></p><p>Скрытый слой реально генерирует спайки integrate-and-fire. Линейный выход суммирует взвешенные количества этих спайков; это гибридная сеть. Обучение offline с квантованием активаций, не STDP. Работа этой модели в KNP/на физическом AltAI пока не проверена. GPU для локального распознавания не требуется.</p><p><a href="fast-model.json">Параметры и измеренные метрики</a></p></details></div>
</main><script src="fast-model.js"></script></body></html>