41 lines
5.1 KiB
HTML
41 lines
5.1 KiB
HTML
<!doctype html>
|
||
<html lang="ru">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
<meta name="theme-color" content="#18b88d" />
|
||
<title>PetriCount — Биопортал Лаб</title>
|
||
<link rel="stylesheet" href="./styles.css" />
|
||
<link rel="stylesheet" href="./petricount.css" />
|
||
</head>
|
||
<body class="petri-page">
|
||
<header class="petri-header">
|
||
<a class="brand" href="./index.html"><span class="brand-mark"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M9 3h6M10 3v6.2L5.5 18a2 2 0 0 0 1.7 3h9.6a2 2 0 0 0 1.7-3L14 9.2V3"/><path d="M8.3 16.2h7.4M10.1 12.8h3.8"/></svg></span><span><strong>Биопортал Лаб</strong><small>PetriCount</small></span></a>
|
||
<div class="crumbs"><a href="./index.html">Главная</a><span>/</span><b>PetriCount</b></div>
|
||
<button class="header-action" id="save-result">Сохранить результат</button>
|
||
</header>
|
||
<main class="petri-layout">
|
||
<section class="workspace">
|
||
<div class="page-heading"><div><span class="eyebrow">Демо-инструмент</span><h1>Подсчёт колоний на чашке Петри</h1><p>Загрузите фотографию, проверьте найденные объекты и скорректируйте результат вручную.</p></div><span class="demo-badge">Демо</span></div>
|
||
<div id="drop-zone" class="drop-zone">
|
||
<input id="image-input" type="file" accept="image/png,image/jpeg,image/webp" />
|
||
<div class="drop-icon"><i class="icon petri orange"></i></div><h2>Загрузите фото чашки Петри</h2><p>Перетащите файл сюда или <button id="choose-file">выберите на компьютере</button></p><small>PNG, JPG или WEBP · до 10 МБ</small>
|
||
</div>
|
||
<div id="analysis-area" class="analysis-area is-hidden">
|
||
<div class="canvas-toolbar"><div class="tool-mode"><button class="mode active" data-mode="add">＋ Добавить</button><button class="mode" data-mode="remove">− Удалить</button><button class="mode" data-mode="pan">⌖ Обзор</button></div><div class="zoom-controls"><button id="zoom-out" aria-label="Уменьшить">−</button><span id="zoom-label">100%</span><button id="zoom-in" aria-label="Увеличить">＋</button></div></div>
|
||
<div class="canvas-wrap"><canvas id="petri-canvas" aria-label="Изображение чашки Петри с отмеченными колониями"></canvas><div id="canvas-empty" class="canvas-empty">Подготовка изображения…</div></div>
|
||
<div class="canvas-note"><span class="dot"></span>Нажмите на изображение, чтобы добавить колонию. В режиме удаления нажмите на маркер.</div>
|
||
</div>
|
||
</section>
|
||
<aside class="petri-panel">
|
||
<section class="panel-card upload-status"><div class="panel-title"><h2>Изображение</h2><span id="image-status" class="status-chip neutral">Не загружено</span></div><div class="image-meta"><span>Файл</span><b id="file-name">—</b><span>Размер</span><b id="file-size">—</b><span>Размеры</span><b id="file-dimensions">—</b></div><button id="replace-image" class="outline-button" disabled>Заменить изображение</button></section>
|
||
<section class="panel-card result-card"><div class="panel-title"><h2>Результат подсчёта</h2><button id="reset-markers" class="link-button" disabled>Сбросить</button></div><div class="count"><strong id="colony-count">0</strong><span>колоний</span></div><p id="count-hint">Загрузите изображение, чтобы начать подсчёт.</p><div class="quality"><div><span>Диапазон для подсчёта</span><b>30–300 КОЕ</b></div><i id="quality-dot"></i></div></section>
|
||
<section class="panel-card settings-card"><div class="panel-title"><h2>Параметры анализа</h2><span class="auto-label">CV baseline</span></div><label class="switch-row"><span>Показать номера колоний</span><input id="show-labels" type="checkbox" checked /><i></i></label><label class="switch-row"><span>Запустить CV-модель</span><input id="auto-detect" type="checkbox" checked /><i></i></label><p>Модель обучена на включённой выборке AGAR. Всегда проверьте и скорректируйте результат перед использованием в расчёте.</p></section>
|
||
<section class="formula-card"><span>Следующий шаг</span><h3>Передать результат в CFU / мл</h3><p>Добавьте коэффициент разведения и объём посева для расчёта концентрации.</p><button id="to-cfu" disabled>Перейти к расчёту <span>→</span></button></section>
|
||
</aside>
|
||
</main>
|
||
<div class="toast" role="status" aria-live="polite"></div>
|
||
<script src="./petricount.js"></script>
|
||
</body>
|
||
</html>
|