From 66961554ef9e15bca66b82e14fb01079464f7195 Mon Sep 17 00:00:00 2001
From: emil28092005 <emil28092005@gmail.com>
Date: Sat, 11 Jul 2026 02:52:04 +0300
Subject: [PATCH] Initial Bioportal Lab prototype

---
 .gitignore           |  18 ++++++
 README.md            |  57 +++++++++++++++++++
 app.js               |  34 +++++++++++
 index.html           |  85 +++++++++++++++++++++++++++
 petri_cv.py          | 133 +++++++++++++++++++++++++++++++++++++++++++
 petricount.css       |   1 +
 petricount.html      |  40 +++++++++++++
 petricount.js        | 102 +++++++++++++++++++++++++++++++++
 requirements.txt     |   6 ++
 server.py            |  61 ++++++++++++++++++++
 styles.css           |   6 ++
 train_petri_model.py |  52 +++++++++++++++++
 12 files changed, 595 insertions(+)
 create mode 100644 .gitignore
 create mode 100644 README.md
 create mode 100644 app.js
 create mode 100644 index.html
 create mode 100644 petri_cv.py
 create mode 100644 petricount.css
 create mode 100644 petricount.html
 create mode 100644 petricount.js
 create mode 100644 requirements.txt
 create mode 100644 server.py
 create mode 100644 styles.css
 create mode 100644 train_petri_model.py

diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..80048db
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,18 @@
+# Python environments and generated files
+.venv/
+__pycache__/
+*.py[cod]
+.pytest_cache/
+
+# CV training artifacts and locally supplied data
+models/
+AGAR_representative/
+
+# OS and editor files
+.DS_Store
+Thumbs.db
+.idea/
+.vscode/
+
+# Local runtime output
+*.log
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..e89f570
--- /dev/null
+++ b/README.md
@@ -0,0 +1,57 @@
+# Биопортал Лаб
+
+Русскоязычный frontend-прототип платформы для лабораторных расчётов и анализа микробиологических экспериментов.
+
+Текущий фокус — демонстрационный сценарий PetriCount: загрузка фотографии чашки Петри, поиск кандидатов на колонии CV-baseline, ручная коррекция и передача результата в расчёт КОЕ/мл.
+
+> Важно: текущий PetriCount — экспериментальный интерфейс и baseline-модель. Результаты не являются лабораторно валидированным измерением и требуют ручной проверки.
+
+## Что есть в проекте
+
+- адаптивный дашборд Биопортал Лаб;
+- экран PetriCount с загрузкой JPG, PNG и WEBP;
+- добавление и удаление маркеров вручную;
+- локальный Flask API для анализа изображений;
+- обучаемый CV-baseline: генерация многомасштабных кандидатов + Random Forest, обучаемый на JSON-разметке AGAR;
+- скрипт повторного обучения модели.
+
+## Быстрый запуск
+
+Требуется Python 3.13 или новее.
+
+```bash
+python3 -m venv .venv
+.venv/bin/python -m pip install -r requirements.txt
+.venv/bin/python server.py
+```
+
+Откройте [http://127.0.0.1:8000](http://127.0.0.1:8000) и перейдите в карточку PetriCount.
+
+## Повторное обучение CV-baseline
+
+Чтобы переобучить модель, положите пары `*.jpg` и `*.json` в `AGAR_representative/`, сохраняя относительную структуру каталогов, затем выполните:
+
+```bash
+.venv/bin/python train_petri_model.py
+```
+
+Разметка должна содержать поля `x`, `y`, `width`, `height` и `class` для каждой колонии. Полученная модель записывается в `models/petri_candidate_classifier.joblib`.
+
+Каталоги с датасетом, моделью и виртуальным окружением исключены из Git: они весят около 400 МБ и создаются или поставляются локально.
+
+## Структура
+
+```text
+index.html / styles.css / app.js    Главный дашборд
+petricount.*                        Интерфейс PetriCount
+server.py                           Локальный Flask API и раздача frontend
+petri_cv.py                         Признаки и генерация CV-кандидатов
+train_petri_model.py                Обучение baseline-модели
+requirements.txt                    Версии Python-зависимостей
+```
+
+## Ограничения текущего прототипа
+
+- модель обучена на небольшой выборке и не имеет независимой валидации;
+- API предназначен для локального запуска, без авторизации и хранения данных;
+- экспорт, расчёт КОЕ/мл и сохранение экспериментов пока являются интерфейсными сценариями, а не полноценным backend-функционалом.
diff --git a/app.js b/app.js
new file mode 100644
index 0000000..f21fcbd
--- /dev/null
+++ b/app.js
@@ -0,0 +1,34 @@
+const toast = document.querySelector('.toast');
+let timer;
+
+function showToast(message) {
+  toast.textContent = message;
+  toast.classList.add('show');
+  clearTimeout(timer);
+  timer = setTimeout(() => toast.classList.remove('show'), 2600);
+}
+
+document.querySelectorAll('[data-toast]').forEach((button) => {
+  button.addEventListener('click', () => showToast(button.dataset.toast));
+});
+
+const modal = document.querySelector('#experiment-modal');
+document.querySelectorAll('[data-modal="experiment"]').forEach((button) => {
+  button.addEventListener('click', () => modal.showModal());
+});
+
+document.querySelectorAll('[data-tool]').forEach((button) => {
+  button.addEventListener('click', () => showToast(`Демо «${button.dataset.tool}» будет доступно в следующем экране.`));
+});
+
+document.querySelectorAll('[data-route]').forEach((button) => {
+  button.addEventListener('click', () => { window.location.href = button.dataset.route; });
+});
+
+modal.addEventListener('close', () => {
+  if (modal.returnValue === 'default') showToast('Эксперимент создан в демо-режиме.');
+});
+
+document.querySelector('.mobile-menu').addEventListener('click', () => {
+  showToast('Мобильное меню будет добавлено вместе с внутренними страницами.');
+});
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..5b06c8f
--- /dev/null
+++ b/index.html
@@ -0,0 +1,85 @@
+<!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>Биопортал Лаб</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <div class="app-shell">
+      <header class="topbar">
+        <a class="brand" href="#home" aria-label="Биопортал Лаб, главная">
+          <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>Инструменты для лабораторных расчётов и анализа</small></span>
+        </a>
+        <nav class="top-nav" aria-label="Служебная навигация">
+          <a href="#reference"><svg viewBox="0 0 24 24"><path d="M4 5.5A2.5 2.5 0 0 1 6.5 3H11v17H6.5A2.5 2.5 0 0 0 4 22.5zM20 5.5A2.5 2.5 0 0 0 17.5 3H13v17h4.5a2.5 2.5 0 0 1 2 1.5z"/></svg>Справочник</a>
+          <a href="#docs"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M9.7 9a2.5 2.5 0 1 1 4.4 1.65c-.9.91-2.1 1.3-2.1 2.85M12 16.8h.01"/></svg>Документация</a>
+          <button class="icon-button" data-toast="Новых уведомлений нет" aria-label="Уведомления"><svg viewBox="0 0 24 24"><path d="M18 9a6 6 0 0 0-12 0c0 7-3 7-3 9h18c0-2-3-2-3-9M10 21h4"/></svg></button>
+          <button class="profile" data-toast="Открыт профиль Анны Ивановой"><span>АИ</span><b>Анна Иванова</b><svg viewBox="0 0 24 24"><path d="m7 10 5 5 5-5"/></svg></button>
+        </nav>
+        <button class="mobile-menu" aria-label="Открыть меню"><span></span><span></span><span></span></button>
+      </header>
+
+      <aside class="sidebar" aria-label="Основная навигация">
+        <button class="create-button" data-modal="experiment"><span>＋</span>Создать эксперимент</button>
+        <nav class="side-nav">
+          <a class="active" href="#home"><i class="icon home"></i>Главная</a>
+          <p>Инструменты</p>
+          <a href="#tool-dilution"><i class="icon drop blue"></i>Разбавление растворов</a>
+          <a href="#tool-prep"><i class="icon flask purple"></i>Приготовление раствора</a>
+          <a href="#tool-series"><i class="icon tubes green"></i>Серийные разведения</a>
+          <a href="#tool-petri"><i class="icon petri orange"></i>PetriCount</a>
+          <a href="#tool-cfu"><i class="icon bars red"></i>CFU / мл</a>
+          <a href="#tool-growth"><i class="icon chart teal"></i>Рост культуры</a>
+          <hr />
+          <a href="#experiments"><i class="icon document"></i>Мои эксперименты</a>
+          <a href="#templates"><i class="icon document"></i>Шаблоны</a>
+          <a href="#reference"><i class="icon book"></i>Справочник веществ</a>
+        </nav>
+        <div class="plan-card"><b>Тариф: <span>Бесплатный</span></b><small>Осталось анализов: 10</small><div class="progress"><span></span></div><button data-toast="Тарифы будут доступны позднее">Улучшить тариф</button></div>
+      </aside>
+
+      <main id="home" class="main-content">
+        <section class="welcome-banner">
+          <div><h1>Добро пожаловать в Биопортал Лаб!</h1><p>Всё для ваших экспериментов: расчёты, анализ<br />изображений и отчёты.</p></div>
+          <div class="lab-illustration" aria-hidden="true">
+            <div class="petri-dish"><span></span><span></span><span></span><span></span><span></span><span></span></div>
+            <div class="beaker"><i></i></div>
+            <div class="rack"><b></b><b></b><b></b></div>
+          </div>
+        </section>
+
+        <section class="section tools-section"><div class="section-heading"><h2>Инструменты</h2><button class="text-button" data-toast="Каталог инструментов скоро появится">Все инструменты <span>→</span></button></div>
+          <div class="tool-grid">
+            <article class="tool-card blue"><div class="tool-icon"><i class="icon drop blue"></i></div><h3>Разбавление<br />растворов</h3><p>Рассчитайте неизвестные параметры разбавления.</p><button data-tool="Разбавление растворов">Открыть</button></article>
+            <article class="tool-card purple"><div class="tool-icon"><i class="icon flask purple"></i></div><h3>Приготовление<br />раствора</h3><p>Рассчитайте массу вещества для нужной концентрации.</p><button data-tool="Приготовление раствора">Открыть</button></article>
+            <article class="tool-card green"><div class="tool-icon"><i class="icon tubes green"></i></div><h3>Серийные<br />разведения</h3><p>Постройте схему разведений и получите объёмы.</p><button data-tool="Серийные разведения">Открыть</button></article>
+            <article class="tool-card orange"><div class="tool-icon"><i class="icon petri orange"></i></div><h3>PetriCount</h3><p>Загрузите фото чашки Петри и посчитайте колонии.</p><button data-route="./petricount.html">Открыть</button></article>
+            <article class="tool-card red"><div class="tool-icon"><i class="icon bars red"></i></div><h3>CFU / мл</h3><p>Рассчитайте КОЕ/мл по данным подсчёта колоний.</p><button data-tool="CFU / мл">Открыть</button></article>
+            <article class="tool-card teal"><div class="tool-icon"><i class="icon chart teal"></i></div><h3>Рост культуры</h3><p>Анализ кривой роста и расчёт времени удвоения.</p><button data-tool="Рост культуры">Открыть</button></article>
+          </div>
+        </section>
+
+        <section class="lower-grid">
+          <section class="recent section" id="experiments"><div class="section-heading"><h2>Недавние эксперименты</h2><button class="text-button" data-toast="Открыт полный список экспериментов">Все эксперименты <span>→</span></button></div>
+            <div class="table-card"><table><thead><tr><th>Название</th><th>Дата</th><th>Инструменты</th><th>Статус</th><th></th></tr></thead><tbody>
+              <tr><td><b>E.coli K12, оценка роста</b></td><td>24.05.2024</td><td><span class="tag teal">Рост культуры</span><span class="tag red">CFU / мл</span></td><td><span class="status done">✓</span> Завершён</td><td><button class="more" data-toast="Действия с экспериментом">⋮</button></td></tr>
+              <tr><td><b>Разведение образца №12</b></td><td>22.05.2024</td><td><span class="tag green">Серийные разведения</span><span class="tag orange">PetriCount</span></td><td><span class="status done">✓</span> Завершён</td><td><button class="more" data-toast="Действия с экспериментом">⋮</button></td></tr>
+              <tr><td><b>Приготовление среды LB</b></td><td>20.05.2024</td><td><span class="tag purple">Приготовление раствора</span></td><td><span class="status done">✓</span> Завершён</td><td><button class="more" data-toast="Действия с экспериментом">⋮</button></td></tr>
+              <tr><td><b>Тест образца воды</b></td><td>18.05.2024</td><td><span class="tag orange">PetriCount</span><span class="tag red">CFU / мл</span></td><td><span class="status draft">⌄</span> Черновик</td><td><button class="more" data-toast="Действия с экспериментом">⋮</button></td></tr>
+            </tbody></table></div>
+          </section>
+          <aside class="tips"><div class="tips-title"><span>💡</span><h2>Полезно знать</h2></div><article><i class="tip-petri">◌</i><p>Оптимальный диапазон для подсчёта колоний: <b>30–300 КОЕ на чашку.</b></p></article><article><i>🧪</i><p>При серийных разведениях используйте новые наконечники на каждом шаге.</p></article><article><i>▣</i><p>Все расчёты сохраняются в ваших экспериментах и доступны для отчётов.</p></article><button data-toast="Открыт раздел полезных советов">Смотреть все советы <span>→</span></button></aside>
+        </section>
+      </main>
+      <footer><span>© 2024 Биопортал Лаб. Все права защищены.</span><div><a href="#about">О нас</a><a href="#contacts">Контакты</a><a href="#privacy">Политика конфиденциальности</a></div></footer>
+    </div>
+
+    <dialog id="experiment-modal"><form method="dialog"><button class="close" value="cancel" aria-label="Закрыть">×</button><span class="modal-icon">⚗</span><h2>Новый эксперимент</h2><p>Создайте рабочее пространство для расчётов, фотографий и результатов.</p><label>Название эксперимента<input autofocus placeholder="Например, Подсчёт КОЕ образца воды" /></label><label>Дата<input type="date" value="2024-05-25" /></label><button class="submit" value="default">Создать эксперимент</button></form></dialog>
+    <div class="toast" role="status" aria-live="polite"></div>
+    <script src="./app.js"></script>
+  </body>
+</html>
diff --git a/petri_cv.py b/petri_cv.py
new file mode 100644
index 0000000..6c41b0f
--- /dev/null
+++ b/petri_cv.py
@@ -0,0 +1,133 @@
+"""Small, locally trainable colony-candidate detector for the PetriCount demo.
+
+It deliberately uses only the annotated AGAR images that ship with this project.
+The model ranks multiscale bright/dark blob candidates; it is a baseline for UI
+integration, not a validated microbiology measurement method.
+"""
+from __future__ import annotations
+
+from dataclasses import dataclass
+from pathlib import Path
+from typing import Iterable
+
+import numpy as np
+from PIL import Image
+from scipy.ndimage import gaussian_filter, maximum_filter
+
+MAX_SIDE = 720
+
+
+@dataclass
+class PreparedImage:
+    rgb: np.ndarray
+    gray: np.ndarray
+    scale: float
+    original_size: tuple[int, int]
+
+
+def prepare_image(path_or_file) -> PreparedImage:
+    image = Image.open(path_or_file).convert("RGB")
+    original_size = image.size
+    scale = min(1.0, MAX_SIDE / max(image.size))
+    if scale < 1:
+        image = image.resize((round(image.width * scale), round(image.height * scale)), Image.Resampling.LANCZOS)
+    rgb = np.asarray(image, dtype=np.float32) / 255.0
+    gray = rgb[..., 0] * 0.2126 + rgb[..., 1] * 0.7152 + rgb[..., 2] * 0.0722
+    return PreparedImage(rgb, gray, scale, original_size)
+
+
+def _near_edge(x: int, y: int, width: int, height: int, margin: int = 13) -> bool:
+    return x < margin or y < margin or x >= width - margin or y >= height - margin
+
+
+def candidate_points(prepared: PreparedImage) -> list[tuple[int, int]]:
+    """Find potential round colonies as local extrema at several blob scales."""
+    gray = prepared.gray
+    height, width = gray.shape
+    candidates: list[tuple[float, int, int]] = []
+    # Colonies can be lighter or darker than the surrounding agar.
+    for sigma in (1.5, 2.5, 4.0, 6.0):
+        local = gaussian_filter(gray, sigma) - gaussian_filter(gray, sigma * 3.2)
+        radius = max(4, round(sigma * 2.5))
+        for response in (local, -local):
+            maxima = response == maximum_filter(response, size=radius * 2 + 1)
+            threshold = np.percentile(response, 97.2)
+            ys, xs = np.where(maxima & (response >= threshold))
+            for y, x in zip(ys, xs):
+                if _near_edge(int(x), int(y), width, height):
+                    continue
+                # Suppress the metal/background outside the central dish region.
+                if np.hypot(x - width / 2, y - height / 2) > min(width, height) * 0.48:
+                    continue
+                candidates.append((float(response[y, x]), int(x), int(y)))
+    candidates.sort(reverse=True)
+    selected: list[tuple[int, int]] = []
+    for _, x, y in candidates:
+        if all((x - px) ** 2 + (y - py) ** 2 > 13 ** 2 for px, py in selected):
+            selected.append((x, y))
+        if len(selected) >= 450:
+            break
+    # Diffuse colonies often have no sharp local maximum. Add a coarse candidate
+    # grid over visually changing parts of the dish and let the learned ranker
+    # decide whether each patch is a colony or background.
+    local_change = np.abs(gaussian_filter(gray, 2) - gaussian_filter(gray, 15))
+    change_threshold = np.percentile(local_change, 58)
+    for y in range(14, height - 14, 16):
+        for x in range(14, width - 14, 16):
+            if np.hypot(x - width / 2, y - height / 2) > min(width, height) * 0.46:
+                continue
+            if local_change[y, x] < change_threshold:
+                continue
+            if all((x - px) ** 2 + (y - py) ** 2 > 8 ** 2 for px, py in selected):
+                selected.append((x, y))
+    return selected
+
+
+def _patch(array: np.ndarray, x: int, y: int, radius: int) -> np.ndarray:
+    return array[max(0, y - radius):y + radius + 1, max(0, x - radius):x + radius + 1]
+
+
+def features_for_points(prepared: PreparedImage, points: Iterable[tuple[int, int]]) -> np.ndarray:
+    rows = []
+    smooth_small = gaussian_filter(prepared.gray, 2)
+    smooth_large = gaussian_filter(prepared.gray, 12)
+    contrast = smooth_small - smooth_large
+    gradient_y, gradient_x = np.gradient(prepared.gray)
+    gradient = np.hypot(gradient_x, gradient_y)
+    for x, y in points:
+        inner_gray = _patch(prepared.gray, x, y, 4)
+        outer_gray = _patch(prepared.gray, x, y, 12)
+        inner_rgb = _patch(prepared.rgb, x, y, 4).reshape(-1, 3)
+        outer_rgb = _patch(prepared.rgb, x, y, 12)
+        inner_gradient = _patch(gradient, x, y, 8)
+        rows.append([
+            *inner_rgb.mean(axis=0), *inner_rgb.std(axis=0),
+            float(inner_gray.mean()), float(inner_gray.std()),
+            float(outer_gray.mean()), float(outer_gray.std()),
+            float(contrast[y, x]), float(abs(contrast[y, x])),
+            float(inner_gradient.mean()), float(inner_gradient.std()),
+            x / prepared.gray.shape[1], y / prepared.gray.shape[0],
+        ])
+    return np.asarray(rows, dtype=np.float32)
+
+
+def label_centers(labels: list[dict], scale: float) -> list[tuple[int, int, float]]:
+    return [((item["x"] + item["width"] / 2) * scale, (item["y"] + item["height"] / 2) * scale,
+             max(item["width"], item["height"]) * scale / 2) for item in labels]
+
+
+def label_candidates(points: list[tuple[int, int]], labels: list[dict], scale: float) -> np.ndarray:
+    centers = label_centers(labels, scale)
+    labels_for_points = []
+    for x, y in points:
+        labels_for_points.append(any((x - cx) ** 2 + (y - cy) ** 2 <= max(7, radius * .78) ** 2 for cx, cy, radius in centers))
+    return np.asarray(labels_for_points, dtype=np.int8)
+
+
+def add_annotation_centers(points: list[tuple[int, int]], labels: list[dict], scale: float) -> list[tuple[int, int]]:
+    result = list(points)
+    for center_x, center_y, _ in label_centers(labels, scale):
+        point = (round(center_x), round(center_y))
+        if all((point[0] - px) ** 2 + (point[1] - py) ** 2 > 5 ** 2 for px, py in result):
+            result.append(point)
+    return result
diff --git a/petricount.css b/petricount.css
new file mode 100644
index 0000000..7b20359
--- /dev/null
+++ b/petricount.css
@@ -0,0 +1 @@
+body.petri-page{background:#f5f8f8;min-height:100vh}.petri-header{height:82px;background:#fff;border-bottom:1px solid var(--line);padding:0 max(28px,calc((100vw - 1440px)/2));display:flex;align-items:center;justify-content:space-between}.petri-header .brand-mark{width:42px;height:42px}.petri-header .brand-mark svg{width:28px}.petri-header .brand strong{font-size:20px}.petri-header .brand small{font-size:11px}.crumbs{display:flex;gap:10px;align-items:center;color:#7a8795;font-size:12px}.crumbs a{color:#08a283;text-decoration:none}.crumbs b{color:#405163}.header-action{height:38px;border:0;border-radius:8px;background:var(--green);color:#fff;padding:0 16px;font-weight:800;font-size:12px}.petri-layout{max-width:1350px;margin:0 auto;padding:34px 28px;display:grid;grid-template-columns:minmax(0,1fr) 328px;gap:22px}.page-heading{display:flex;justify-content:space-between;gap:20px;margin-bottom:23px}.eyebrow{display:inline-block;color:#078e72;background:#e5f8f3;border-radius:20px;padding:5px 9px;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.6px;margin-bottom:10px}.page-heading h1{font-size:27px;line-height:1.15;margin:0 0 9px;letter-spacing:-1px}.page-heading p{margin:0;color:#657588;font-size:13px}.demo-badge{height:26px;padding:5px 10px;border-radius:99px;background:#fff5e8;border:1px solid #ffdcba;color:#e68627;font-size:11px;font-weight:800}.drop-zone{height:500px;border:1.5px dashed #bcdad5;border-radius:15px;background:linear-gradient(135deg,#fbfefd,#f4fbfa);display:grid;place-items:center;text-align:center;align-content:center;transition:.2s}.drop-zone.dragover{border-color:var(--green);background:#eefdF8;transform:scale(1.002)}.drop-zone input{display:none}.drop-icon{width:68px;height:68px;border-radius:19px;background:#fff4e9;display:grid;place-items:center;margin-bottom:16px}.drop-icon .icon{transform:scale(2);background:transparent}.drop-zone h2{font-size:18px;margin:0 0 8px}.drop-zone p{color:#6e7e8c;font-size:13px;margin:0 0 8px}.drop-zone p button{border:0;background:none;color:#079f7d;font:inherit;font-weight:800;padding:0}.drop-zone small{font-size:11px;color:#91a0ac}.analysis-area{border:1px solid #e2e9ea;border-radius:15px;overflow:hidden;background:#fff}.is-hidden{display:none}.canvas-toolbar{height:54px;display:flex;justify-content:space-between;align-items:center;padding:0 13px;border-bottom:1px solid #e9eff0}.tool-mode,.zoom-controls{display:flex;gap:5px;align-items:center}.mode,.zoom-controls button{height:31px;border:1px solid #dfe8e8;border-radius:6px;background:#fff;padding:0 10px;color:#566777;font-size:11px;font-weight:700}.mode.active{background:#e8f8f3;border-color:#a7e3d5;color:#078e72}.zoom-controls button{font-size:17px;width:31px;padding:0}.zoom-controls span{font-size:11px;color:#647585;width:36px;text-align:center}.canvas-wrap{height:440px;background:#20312e;display:grid;place-items:center;overflow:hidden;position:relative}.canvas-wrap canvas{max-width:100%;max-height:100%;cursor:crosshair}.canvas-empty{position:absolute;color:#c7d8d3;font-size:13px}.canvas-note{padding:11px 15px;color:#70808d;font-size:11px}.dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#f59c36;margin-right:6px}.petri-panel{display:grid;align-content:start;gap:13px}.panel-card,.formula-card{border:1px solid #e1e9ea;border-radius:13px;background:#fff;padding:17px}.panel-title{display:flex;align-items:center;justify-content:space-between;gap:8px}.panel-title h2{margin:0;font-size:14px}.status-chip{font-size:10px;font-weight:800;border-radius:999px;padding:4px 7px}.status-chip.neutral{color:#748191;background:#f1f4f5}.status-chip.ready{color:#098f72;background:#e6f8f2}.image-meta{margin:15px 0;display:grid;grid-template-columns:1fr auto;gap:9px;font-size:11px}.image-meta span{color:#758493}.image-meta b{font-weight:700;max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:right}.outline-button{height:33px;width:100%;border:1px solid #cfdedd;background:#fff;border-radius:7px;color:#078f71;font-weight:800;font-size:11px}.outline-button:disabled{color:#a1adb6;border-color:#e5eaeb;cursor:not-allowed}.count{display:flex;align-items:baseline;gap:9px;margin:15px 0 2px}.count strong{font-size:42px;letter-spacing:-2px;line-height:1;color:#132d29}.count span{color:#697987;font-size:12px}.result-card>p{font-size:11px;line-height:1.5;color:#71818f;margin:7px 0 15px}.quality{border-top:1px solid #edf1f1;padding-top:12px;display:flex;align-items:center;justify-content:space-between;font-size:10px;color:#71808e}.quality b{display:block;color:#344757;margin-top:2px}.quality i{width:9px;height:9px;border-radius:50%;background:#cdd7d9}.quality i.good{background:#18b88d}.quality i.warn{background:#fb9a39}.quality i.bad{background:#f06170}.link-button{border:0;background:transparent;color:#07a17e;font-size:10px;font-weight:800}.settings-card{padding-bottom:12px}.switch-row{display:flex;justify-content:space-between;align-items:center;font-size:11px;margin:14px 0}.switch-row input{display:none}.switch-row i{width:31px;height:18px;border-radius:99px;background:#d8e0e2;position:relative;transition:.2s}.switch-row i:after{content:"";position:absolute;width:14px;height:14px;background:#fff;border-radius:50%;top:2px;left:2px;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:.2s}.switch-row input:checked+i{background:#1abe94}.switch-row input:checked+i:after{left:15px}.settings-card p{font-size:10px;color:#82909d;line-height:1.45;margin:12px 0 0}.auto-label{font-size:9px;color:#e08122;background:#fff5e9;padding:3px 5px;border-radius:4px}.formula-card{border-color:#bee7dc;background:linear-gradient(140deg,#effbf7,#fbfffd)}.formula-card>span{color:#0d9d7d;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.4px}.formula-card h3{font-size:14px;line-height:1.3;margin:7px 0}.formula-card p{font-size:10.5px;line-height:1.45;color:#667886;margin:0 0 14px}.formula-card button{border:0;background:transparent;padding:0;color:#078f71;font-size:11px;font-weight:800}.formula-card button:disabled{color:#9ebbb4;cursor:not-allowed}@media(max-width:900px){.petri-layout{grid-template-columns:1fr}.petri-panel{grid-template-columns:repeat(2,1fr)}.formula-card{grid-column:1/-1}.canvas-wrap{height:400px}}@media(max-width:640px){.petri-header{padding:0 15px}.crumbs{display:none}.petri-header .header-action{padding:0 10px;font-size:10px}.petri-layout{padding:22px 14px}.page-heading h1{font-size:22px}.drop-zone{height:380px}.canvas-toolbar{padding:0 7px}.mode{padding:0 6px;font-size:10px}.canvas-wrap{height:340px}.petri-panel{display:block}.petri-panel>*{margin-top:12px}}
diff --git a/petricount.html b/petricount.html
new file mode 100644
index 0000000..5b7dd3f
--- /dev/null
+++ b/petricount.html
@@ -0,0 +1,40 @@
+<!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>
diff --git a/petricount.js b/petricount.js
new file mode 100644
index 0000000..1d246a9
--- /dev/null
+++ b/petricount.js
@@ -0,0 +1,102 @@
+const input = document.querySelector('#image-input');
+const dropZone = document.querySelector('#drop-zone');
+const analysis = document.querySelector('#analysis-area');
+const canvas = document.querySelector('#petri-canvas');
+const context = canvas.getContext('2d');
+const empty = document.querySelector('#canvas-empty');
+const countElement = document.querySelector('#colony-count');
+const hint = document.querySelector('#count-hint');
+const quality = document.querySelector('#quality-dot');
+const toast = document.querySelector('.toast');
+let source = null;
+let markers = [];
+let mode = 'add';
+let zoom = 1;
+let labels = true;
+let noticeTimer;
+let currentFile = null;
+
+function notify(message) { toast.textContent = message; toast.classList.add('show'); clearTimeout(noticeTimer); noticeTimer = setTimeout(() => toast.classList.remove('show'), 2800); }
+function formatSize(bytes) { return bytes < 1024 * 1024 ? `${Math.round(bytes / 1024)} КБ` : `${(bytes / 1024 / 1024).toFixed(1)} МБ`; }
+function updateResult() {
+  const count = markers.length;
+  countElement.textContent = count;
+  document.querySelector('#reset-markers').disabled = !count;
+  document.querySelector('#to-cfu').disabled = !source;
+  if (!source) return;
+  if (count < 30) { hint.textContent = 'Колоний меньше 30: результат может быть статистически ненадёжным.'; quality.className = 'warn'; }
+  else if (count <= 300) { hint.textContent = 'Количество колоний находится в рекомендуемом диапазоне.'; quality.className = 'good'; }
+  else { hint.textContent = 'Колоний больше 300: рассмотрите большее разведение образца.'; quality.className = 'bad'; }
+}
+function draw() {
+  if (!source) return;
+  const parent = canvas.parentElement;
+  const maxWidth = parent.clientWidth - 16;
+  const maxHeight = parent.clientHeight - 16;
+  const baseScale = Math.min(maxWidth / source.width, maxHeight / source.height, 1);
+  const scale = baseScale * zoom;
+  canvas.width = Math.round(source.width * scale);
+  canvas.height = Math.round(source.height * scale);
+  context.drawImage(source, 0, 0, canvas.width, canvas.height);
+  markers.forEach((marker, index) => {
+    const x = marker.x * scale, y = marker.y * scale;
+    context.beginPath(); context.arc(x, y, Math.max(6, 9 * scale), 0, Math.PI * 2); context.fillStyle = 'rgba(255,153,55,.25)'; context.fill();
+    context.lineWidth = 2; context.strokeStyle = '#fb922f'; context.stroke();
+    if (labels) { context.fillStyle = '#fff'; context.beginPath(); context.arc(x + 8, y - 8, 8, 0, Math.PI * 2); context.fill(); context.fillStyle = '#d77317'; context.font = 'bold 9px system-ui'; context.textAlign = 'center'; context.textBaseline = 'middle'; context.fillText(index + 1, x + 8, y - 8); }
+  });
+  document.querySelector('#zoom-label').textContent = `${Math.round(zoom * 100)}%`;
+}
+function addMarker(event) {
+  if (!source || mode === 'pan') return;
+  const rect = canvas.getBoundingClientRect();
+  const scale = canvas.width / source.width;
+  const x = (event.clientX - rect.left) / scale;
+  const y = (event.clientY - rect.top) / scale;
+  if (mode === 'remove') { const closest = markers.reduce((best, item, index) => { const distance = Math.hypot(item.x - x, item.y - y); return distance < best.distance ? { index, distance } : best; }, { index: -1, distance: 20 / scale }); if (closest.index >= 0) markers.splice(closest.index, 1); }
+  else markers.push({ x, y });
+  updateResult(); draw();
+}
+async function autoDetect() {
+  if (!source || !currentFile || !document.querySelector('#auto-detect').checked) return;
+  const chip = document.querySelector('#image-status');
+  chip.textContent = 'CV-анализ…'; chip.className = 'status-chip neutral';
+  hint.textContent = 'Модель ищет и ранжирует кандидаты на колонии…';
+  try {
+    const payload = new FormData(); payload.append('image', currentFile);
+    const response = await fetch('/api/analyze', { method: 'POST', body: payload });
+    const data = await response.json();
+    if (!response.ok) throw new Error(data.error || 'Ошибка CV-анализа');
+    markers = data.colonies.map(item => ({ x: item.x * source.width, y: item.y * source.height, score: item.score }));
+    chip.textContent = 'CV готов'; chip.className = 'status-chip ready';
+    updateResult(); draw();
+    notify(`CV-модель нашла ${markers.length} кандидатов из ${data.candidates}. Проверьте разметку.`);
+  } catch (error) {
+    chip.textContent = 'Ручной режим'; chip.className = 'status-chip neutral';
+    hint.textContent = 'CV-сервер недоступен. Можно добавить колонии вручную.';
+    notify(error.message.includes('fetch') ? 'Запустите локальный сервер: .venv/bin/python server.py' : error.message);
+  }
+}
+function load(file) {
+  if (!file) return;
+  if (!file.type.startsWith('image/')) return notify('Выберите изображение в формате PNG, JPG или WEBP.');
+  if (file.size > 10 * 1024 * 1024) return notify('Файл больше допустимого размера — 10 МБ.');
+  currentFile = file;
+  const reader = new FileReader(); empty.textContent = 'Подготовка изображения…';
+  reader.onload = () => { const image = new Image(); image.onload = () => { source = image; zoom = 1; autoDetect(); dropZone.classList.add('is-hidden'); analysis.classList.remove('is-hidden'); empty.remove(); document.querySelector('#file-name').textContent = file.name; document.querySelector('#file-size').textContent = formatSize(file.size); document.querySelector('#file-dimensions').textContent = `${image.width} × ${image.height}`; const chip = document.querySelector('#image-status'); chip.textContent = 'Загружено'; chip.className = 'status-chip ready'; document.querySelector('#replace-image').disabled = false; updateResult(); draw(); notify(markers.length ? `Найдено ${markers.length} контрастных объектов. Проверьте разметку.` : 'Изображение загружено. Добавьте колонии вручную.'); }; image.src = reader.result; }; reader.readAsDataURL(file);
+}
+document.querySelector('#choose-file').addEventListener('click', () => input.click());
+document.querySelector('#replace-image').addEventListener('click', () => input.click());
+input.addEventListener('change', event => load(event.target.files[0]));
+['dragenter','dragover'].forEach(type => dropZone.addEventListener(type, event => { event.preventDefault(); dropZone.classList.add('dragover'); }));
+['dragleave','drop'].forEach(type => dropZone.addEventListener(type, event => { event.preventDefault(); dropZone.classList.remove('dragover'); }));
+dropZone.addEventListener('drop', event => load(event.dataTransfer.files[0]));
+canvas.addEventListener('click', addMarker);
+document.querySelectorAll('.mode').forEach(button => button.addEventListener('click', () => { mode = button.dataset.mode; document.querySelectorAll('.mode').forEach(item => item.classList.toggle('active', item === button)); canvas.style.cursor = mode === 'remove' ? 'not-allowed' : mode === 'pan' ? 'grab' : 'crosshair'; }));
+document.querySelector('#zoom-in').addEventListener('click', () => { zoom = Math.min(2, zoom + .2); draw(); });
+document.querySelector('#zoom-out').addEventListener('click', () => { zoom = Math.max(.6, zoom - .2); draw(); });
+document.querySelector('#show-labels').addEventListener('change', event => { labels = event.target.checked; draw(); });
+document.querySelector('#auto-detect').addEventListener('change', event => { if (event.target.checked && source) autoDetect(); });
+document.querySelector('#reset-markers').addEventListener('click', () => { markers = []; updateResult(); draw(); notify('Все маркеры удалены.'); });
+document.querySelector('#save-result').addEventListener('click', () => notify(source ? `Результат: ${markers.length} колоний сохранён в демо-режиме.` : 'Сначала загрузите изображение чашки.'));
+document.querySelector('#to-cfu').addEventListener('click', () => notify(`В CFU / мл передано значение: ${markers.length} колоний.`));
+window.addEventListener('resize', () => draw());
diff --git a/requirements.txt b/requirements.txt
new file mode 100644
index 0000000..93cf7da
--- /dev/null
+++ b/requirements.txt
@@ -0,0 +1,6 @@
+Flask==3.1.3
+joblib==1.5.3
+numpy==2.5.1
+Pillow==12.3.0
+scikit-learn==1.9.0
+scipy==1.18.0
diff --git a/server.py b/server.py
new file mode 100644
index 0000000..c6b85d7
--- /dev/null
+++ b/server.py
@@ -0,0 +1,61 @@
+from __future__ import annotations
+
+import io
+from pathlib import Path
+
+import joblib
+import numpy as np
+from flask import Flask, jsonify, request, send_from_directory
+
+from petri_cv import candidate_points, features_for_points, prepare_image
+
+ROOT = Path(__file__).resolve().parent
+MODEL_PATH = ROOT / "models/petri_candidate_classifier.joblib"
+app = Flask(__name__)
+model_bundle = joblib.load(MODEL_PATH) if MODEL_PATH.exists() else None
+
+
+@app.get("/")
+def index():
+    return send_from_directory(ROOT, "index.html")
+
+
+@app.get("/<path:path>")
+def assets(path: str):
+    return send_from_directory(ROOT, path)
+
+
+@app.post("/api/analyze")
+def analyze():
+    if model_bundle is None:
+        return jsonify(error="Модель не обучена. Запустите train_petri_model.py."), 503
+    uploaded = request.files.get("image")
+    if uploaded is None or not uploaded.mimetype.startswith("image/"):
+        return jsonify(error="Передайте изображение PNG, JPG или WEBP."), 400
+    try:
+        prepared = prepare_image(io.BytesIO(uploaded.read()))
+    except Exception:
+        return jsonify(error="Не удалось прочитать изображение."), 400
+    points = candidate_points(prepared)
+    if not points:
+        return jsonify(colonies=[], candidates=0, model="RandomForest candidate ranker")
+    probabilities = model_bundle["model"].predict_proba(features_for_points(prepared, points))[:, 1]
+    ranked = sorted(zip(probabilities, points), reverse=True)
+    selected = []
+    # Non-maximum suppression avoids several markers on a single colony.
+    for score, (x, y) in ranked:
+        if score < .54:
+            continue
+        if all((x - candidate["x_px"]) ** 2 + (y - candidate["y_px"]) ** 2 > 36 ** 2 for candidate in selected):
+            selected.append({"x": round(x / prepared.gray.shape[1], 5), "y": round(y / prepared.gray.shape[0], 5),
+                             "x_px": x, "y_px": y, "score": round(float(score), 3)})
+        if len(selected) >= 300:
+            break
+    for item in selected:
+        item.pop("x_px")
+        item.pop("y_px")
+    return jsonify(colonies=selected, candidates=len(points), model="RandomForest candidate ranker")
+
+
+if __name__ == "__main__":
+    app.run(host="127.0.0.1", port=8000, debug=False)
diff --git a/styles.css b/styles.css
new file mode 100644
index 0000000..6c22fc9
--- /dev/null
+++ b/styles.css
@@ -0,0 +1,6 @@
+:root{--ink:#142434;--muted:#687788;--line:#e8edf0;--green:#18b88d;--green-dark:#079778;--green-soft:#eaf8f5;--blue:#2d7cf4;--purple:#9459ee;--orange:#fb922f;--red:#fb5d6e;--teal:#00a795;--page:#f6f9fa;--shadow:0 8px 24px rgba(18,44,55,.06)}*{box-sizing:border-box}body{margin:0;background:#f1f5f5;color:var(--ink);font-family:Manrope,Inter,system-ui,sans-serif;font-size:14px}.app-shell{max-width:1536px;min-height:100vh;margin:16px auto;background:#fff;border-radius:20px;overflow:hidden;box-shadow:0 3px 24px rgba(31,58,68,.08);display:grid;grid-template-columns:322px minmax(0,1fr);grid-template-rows:92px 1fr auto}.topbar{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;padding:0 40px 0 43px;border-bottom:1px solid var(--line);background:rgba(255,255,255,.97)}.brand{display:flex;align-items:center;gap:14px;color:var(--ink);text-decoration:none}.brand-mark{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;color:#08a283;background:radial-gradient(circle at 65% 25%,#e8fcf0 0 13%,transparent 14%),linear-gradient(135deg,#e1f8f0,#e5f5ec)}.brand-mark svg{width:34px;height:34px;stroke:currentColor;fill:none;stroke-width:1.45;stroke-linecap:round;stroke-linejoin:round}.brand strong{display:block;font-size:26px;line-height:1.2;letter-spacing:-1px}.brand small{display:block;color:var(--muted);font-size:13px;margin-top:3px}.top-nav{display:flex;align-items:center;gap:34px}.top-nav a,.profile{border:0;background:none;color:var(--ink);text-decoration:none;font:600 14px inherit;display:flex;align-items:center;gap:9px;cursor:pointer}.top-nav svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round}.icon-button{border:0;background:none;color:var(--ink);cursor:pointer;padding:5px}.icon-button svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.6}.profile{gap:10px}.profile>span{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:#dcf7e1;color:#219447;font-size:13px}.profile svg{width:16px}.mobile-menu{display:none}.sidebar{padding:21px 17px 18px 35px;border-right:1px solid var(--line);display:flex;flex-direction:column;min-height:calc(100vh - 92px)}button{font-family:inherit;cursor:pointer}.create-button{height:53px;border:0;border-radius:10px;background:linear-gradient(135deg,#10aa8b,#1ac3a2);box-shadow:0 7px 16px rgba(24,184,141,.2);color:#fff;font-weight:700;font-size:14px;text-align:left;padding:0 18px}.create-button span{font-size:28px;font-weight:300;vertical-align:-2px;margin-right:10px}.side-nav{margin-top:21px;display:grid;gap:5px}.side-nav a{height:44px;display:flex;align-items:center;gap:12px;padding:0 11px;color:var(--ink);text-decoration:none;border-radius:9px;font-weight:600;font-size:13.5px}.side-nav a.active{color:#059e7f;background:linear-gradient(90deg,#effbf8,#e2f6f2)}.side-nav p{font-size:12px;color:#728091;text-transform:uppercase;font-weight:700;margin:16px 10px 7px;letter-spacing:.3px}.side-nav hr{border:0;border-top:1px solid #eef1f2;margin:13px 2px}.icon{position:relative;display:inline-block;width:28px;height:28px;border-radius:7px;background:#f3f7f7;flex:none}.icon:before,.icon:after{content:"";position:absolute}.icon.home:before{width:13px;height:12px;border:2px solid #12ae8c;border-top:0;left:7px;top:12px;border-radius:1px}.icon.home:after{width:12px;height:12px;border-left:2px solid #12ae8c;border-top:2px solid #12ae8c;transform:rotate(45deg);left:8px;top:5px}.icon.drop:before{width:13px;height:17px;border:2px solid currentColor;border-radius:65% 35% 60% 40%;left:8px;top:5px;transform:rotate(45deg)}.icon.flask:before{width:11px;height:14px;border:2px solid currentColor;border-radius:2px 2px 7px 7px;left:8px;top:9px}.icon.flask:after{width:6px;border-top:2px solid currentColor;left:12px;top:6px}.icon.tubes:before{width:4px;height:20px;border:2px solid currentColor;border-top:0;left:6px;top:5px;border-radius:0 0 4px 4px;box-shadow:8px 0 0 -2px #f3f7f7,8px 0 0 0 currentColor,16px 0 0 -2px #f3f7f7,16px 0 0 0 currentColor}.icon.tubes:after{width:22px;border-top:2px solid currentColor;left:3px;top:8px}.icon.petri:before{width:19px;height:13px;border:2px solid currentColor;border-radius:50%;left:4px;top:7px}.icon.petri:after{width:15px;border-top:2px solid currentColor;left:6px;top:13px}.icon.bars:before{width:4px;height:10px;border:2px solid currentColor;border-bottom:0;bottom:6px;left:5px;box-shadow:8px -6px 0 -2px #f3f7f7,8px -6px 0 0 currentColor,16px -13px 0 -2px #f3f7f7,16px -13px 0 0 currentColor}.icon.chart:before{width:18px;height:16px;border-left:2px solid currentColor;border-bottom:2px solid currentColor;left:5px;top:5px}.icon.chart:after{width:13px;height:7px;border-left:2px solid currentColor;border-top:2px solid currentColor;transform:skewY(-42deg);left:9px;top:11px}.icon.document:before{width:13px;height:17px;border:1.7px solid #677889;border-radius:1px;left:7px;top:5px}.icon.document:after{width:7px;border-top:1.7px solid #677889;left:10px;top:11px;box-shadow:0 4px #677889}.icon.book:before{width:14px;height:17px;border:1.7px solid #677889;border-radius:2px;left:6px;top:5px}.icon.book:after{height:15px;border-left:1.7px solid #677889;left:13px;top:6px}.blue{color:var(--blue)}.purple{color:var(--purple)}.green{color:#1dae80}.orange{color:var(--orange)}.red{color:var(--red)}.teal{color:var(--teal)}.plan-card{margin-top:auto;background:linear-gradient(135deg,#f0f8ff,#f8fbf9);border:1px solid #d5e5f0;border-radius:10px;padding:14px 14px 13px;font-size:12px}.plan-card b{font-size:13px}.plan-card b span{font-weight:500}.plan-card small{display:block;margin-top:3px;color:#526174}.progress{height:4px;background:#d6e8e8;border-radius:99px;margin:11px 0}.progress span{display:block;width:62%;height:100%;background:var(--green);border-radius:inherit}.plan-card button{width:100%;height:35px;border:1px solid #00a47e;background:#fff;color:#009a79;border-radius:8px;font-weight:700;font-size:12px}.main-content{padding:21px 35px 26px;background:linear-gradient(180deg,#fff,#fcfdfd)}.welcome-banner{height:207px;border-radius:14px;overflow:hidden;background:linear-gradient(111deg,#ecfbf8 0%,#effbfb 57%,#e4f5f6);display:flex;align-items:center;justify-content:space-between;padding:30px 38px;position:relative}.welcome-banner:after{content:"";position:absolute;width:310px;height:310px;right:-155px;top:-89px;border-radius:50%;background:rgba(123,210,208,.15)}h1,h2,h3,p{margin-top:0}.welcome-banner h1{font-size:24px;letter-spacing:-.8px;margin-bottom:14px}.welcome-banner p{font-size:15px;line-height:1.6;margin:0}.lab-illustration{position:relative;width:380px;height:170px;transform:scale(.9);transform-origin:right center}.petri-dish{width:159px;height:92px;position:absolute;bottom:27px;left:18px;border:2px solid #78b7c4;border-radius:50%;background:radial-gradient(ellipse at center,#e8f8ed 0 55%,#d4f1ee 56% 62%,transparent 63%);box-shadow:inset 0 -6px 0 rgba(101,187,195,.12),0 5px 0 rgba(77,148,162,.16)}.petri-dish span{position:absolute;width:10px;height:6px;background:#88c929;border-radius:50%;box-shadow:0 0 7px #d0ea6f}.petri-dish span:nth-child(1){left:45px;top:35px}.petri-dish span:nth-child(2){left:78px;top:25px}.petri-dish span:nth-child(3){left:97px;top:51px}.petri-dish span:nth-child(4){left:62px;top:58px}.petri-dish span:nth-child(5){left:112px;top:35px}.petri-dish span:nth-child(6){left:32px;top:49px}.beaker{position:absolute;width:93px;height:132px;left:182px;bottom:8px;border:2px solid #64a9ba;border-radius:12px 12px 28px 28px;clip-path:polygon(32% 0,68% 0,68% 48%,100% 94%,94% 100%,6% 100%,0 94%,32% 48%);background:linear-gradient(180deg,transparent 41%,#a2deb3 42% 82%,#54c77e 83%);filter:drop-shadow(0 4px 1px rgba(66,132,139,.25))}.beaker:before{content:"";position:absolute;width:42px;height:8px;border:2px solid #64a9ba;border-radius:50%;top:-3px;left:23px}.beaker i{position:absolute;width:58px;height:25px;left:18px;bottom:22px;border-top:1px solid #57b77a;border-radius:50%;opacity:.8}.rack{position:absolute;right:6px;bottom:31px;width:98px;height:75px;border-bottom:4px solid #5b8997;border-left:3px solid #5b8997;border-right:3px solid #5b8997;background:linear-gradient(#5b8997,#5b8997) 0 21px/100% 3px no-repeat,linear-gradient(#5b8997,#5b8997) 0 52px/100% 3px no-repeat}.rack b{position:absolute;width:14px;height:45px;bottom:0;border:2px solid #6aa7b5;border-radius:4px 4px 7px 7px;background:linear-gradient(180deg,transparent 42%,#ffc8d5 43%)}.rack b:nth-child(1){left:18px}.rack b:nth-child(2){left:42px;background:linear-gradient(180deg,transparent 42%,#ffb3a3 43%)}.rack b:nth-child(3){left:66px;background:linear-gradient(180deg,transparent 42%,#dbf1ce 43%)}.section{margin-top:19px}.section-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}.section-heading h2{font-size:18px;letter-spacing:-.5px;margin:0}.text-button{border:0;background:transparent;color:#00a37f;font-weight:700;font-size:12px}.text-button span,.tips button span{font-size:18px;vertical-align:-1px;margin-left:5px}.tool-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}.tool-card{height:247px;border:1px solid #e8edf0;border-radius:13px;padding:19px 16px;box-shadow:var(--shadow);display:flex;flex-direction:column;text-align:center;background:#fff}.tool-icon{height:60px;display:grid;place-items:center}.tool-card .icon{transform:scale(1.6);background:transparent}.tool-card h3{font-size:14.5px;line-height:1.25;letter-spacing:-.35px;margin:11px 0 8px;min-height:36px}.tool-card p{font-size:11px;line-height:1.48;color:#596778;margin:0 auto}.tool-card button{margin-top:auto;height:38px;border-radius:7px;background:#fff;font-weight:700;font-size:12px}.tool-card.blue button{border:1px solid #b8d5ff;color:#1975ef}.tool-card.purple button{border:1px solid #ddc8ff;color:#8c54e7}.tool-card.green button{border:1px solid #abdeda;color:#11a482}.tool-card.orange button{border:1px solid #ffd2ae;color:#f28929}.tool-card.red button{border:1px solid #ffcbd1;color:#f75568}.tool-card.teal button{border:1px solid #a4dfd9;color:#009c8b}.lower-grid{display:grid;grid-template-columns:minmax(0,1fr) 362px;gap:19px;margin-top:20px}.table-card{border:1px solid #e7edef;border-radius:14px;overflow:hidden}.table-card table{width:100%;border-collapse:collapse;font-size:11px}.table-card th{height:33px;background:#fbfcfc;color:#728092;font-weight:600;text-align:left;padding:0 17px}.table-card td{height:44px;padding:0 17px;border-top:1px solid #edf0f1;white-space:nowrap;color:#344253}.table-card td b{font-weight:600;color:#203044}.tag{display:inline-block;padding:4px 8px;border:1px solid;border-radius:5px;margin-right:4px;font-size:10px;line-height:1}.tag.teal{color:#069e8d;border-color:#c6ebe5;background:#f1fbf9}.tag.red{color:#fa5768;border-color:#ffd7dc;background:#fff7f8}.tag.green{color:#23a563;border-color:#cdeedb;background:#f5fcf7}.tag.orange{color:#f28c2d;border-color:#ffe0bf;background:#fffaf5}.tag.purple{color:#925aed;border-color:#e4d4ff;background:#fbf9ff}.status{display:inline-grid;place-items:center;width:14px;height:14px;border-radius:50%;font-size:9px;font-weight:800;margin-right:5px}.status.done{color:#08a951;border:1px solid #12b75d}.status.draft{color:#3983c3;border:1px solid #74b7ec}.more{border:0;background:transparent;color:#607080;font-size:19px}.tips{border:1px solid #f6dfb8;background:linear-gradient(135deg,#fffdfa,#fffdf9);border-radius:14px;padding:20px 20px 15px}.tips-title{display:flex;align-items:center;gap:12px;margin-bottom:7px}.tips-title span{font-size:24px}.tips h2{font-size:14px;margin:0}.tips article{display:grid;grid-template-columns:36px 1fr;gap:9px;padding:10px 0;border-bottom:1px solid #f3ead8;align-items:center}.tips article i{font-style:normal;font-size:24px;color:#04a58d;text-align:center}.tips article .tip-petri{color:#f99a35;font-size:33px;line-height:1}.tips article p{font-size:11.5px;line-height:1.52;margin:0}.tips button{border:0;background:transparent;padding:12px 0 0;color:#009c78;font-size:11px;font-weight:800}footer{grid-column:2;padding:0 35px 18px;color:#758293;font-size:11px;display:flex;align-items:end;justify-content:space-between}footer div{display:flex;gap:30px}footer a{color:inherit;text-decoration:none}dialog{border:0;border-radius:18px;padding:0;width:min(430px,calc(100% - 30px));box-shadow:0 25px 80px rgba(16,38,48,.26)}dialog::backdrop{background:rgba(10,35,40,.35);backdrop-filter:blur(3px)}dialog form{padding:30px;position:relative}.close{position:absolute;right:15px;top:11px;border:0;background:none;color:#6f7c89;font-size:27px}.modal-icon{width:44px;height:44px;display:grid;place-items:center;background:#e8f8f3;border-radius:12px;font-size:23px}.modal-icon+h2{font-size:22px;margin:15px 0 7px}.modal-icon+h2+p{color:#657588;font-size:13px;line-height:1.5;margin-bottom:21px}dialog label{display:grid;gap:6px;font-size:12px;font-weight:700;margin-top:13px}dialog input{height:41px;border:1px solid #dce5e8;border-radius:8px;padding:0 11px;color:var(--ink);font:13px inherit}.submit{height:42px;width:100%;border:0;background:var(--green);color:#fff;border-radius:8px;margin-top:21px;font-weight:800}.toast{position:fixed;bottom:25px;left:50%;transform:translate(-50%,20px);background:#193c37;color:#fff;border-radius:9px;padding:12px 17px;font-size:13px;opacity:0;pointer-events:none;transition:.25s;box-shadow:0 9px 30px rgba(0,0,0,.18)}.toast.show{opacity:1;transform:translate(-50%,0)}
+@media(max-width:1250px){.app-shell{margin:0;border-radius:0}.topbar{padding:0 25px}.sidebar{padding-left:19px}.main-content{padding:20px}.tool-grid{grid-template-columns:repeat(3,1fr)}.lower-grid{grid-template-columns:1fr}.tips{display:grid;grid-template-columns:repeat(3,1fr);gap:13px}.tips-title{grid-column:1/-1}.tips article{border:0;padding:0}.tips button{grid-column:1/-1;padding:0}footer{padding:0 20px 18px}}
+@media(max-width:820px){.app-shell{display:block}.topbar{height:74px;padding:0 18px}.brand-mark{width:42px;height:42px}.brand strong{font-size:19px}.brand small{font-size:10px}.top-nav{display:none}.mobile-menu{display:grid;gap:4px;border:0;background:none}.mobile-menu span{display:block;width:21px;border-top:2px solid var(--ink)}.sidebar{display:none}.main-content{padding:15px}.welcome-banner{height:190px;padding:25px;border-radius:12px}.welcome-banner h1{font-size:20px}.welcome-banner p{font-size:13px}.lab-illustration{position:absolute;opacity:.45;right:-70px;bottom:-4px;transform:scale(.75)}.tool-grid{grid-template-columns:repeat(2,1fr)}.lower-grid{display:block}.recent{margin-bottom:18px}.tips{display:block}.tips article{border-bottom:1px solid #f3ead8;padding:10px 0}.table-card{overflow:auto}.table-card table{min-width:710px}footer{display:block;padding:5px 18px 18px;font-size:10px}footer div{margin-top:8px;gap:13px;flex-wrap:wrap}}
+@media(max-width:450px){.tool-card{height:228px;padding:14px 10px}.tool-card h3{font-size:13px}.tool-card p{font-size:10px}.section-heading h2{font-size:16px}.text-button{font-size:10px}.welcome-banner p br{display:none}}
+/* Works without fetching external font assets. */
+body{font-family:Inter,Manrope,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
diff --git a/train_petri_model.py b/train_petri_model.py
new file mode 100644
index 0000000..ed1fbeb
--- /dev/null
+++ b/train_petri_model.py
@@ -0,0 +1,52 @@
+from __future__ import annotations
+
+import json
+from pathlib import Path
+
+import joblib
+import numpy as np
+from sklearn.ensemble import RandomForestClassifier
+from sklearn.metrics import precision_recall_fscore_support
+
+from petri_cv import add_annotation_centers, candidate_points, features_for_points, label_candidates, prepare_image
+
+DATASET = Path("AGAR_representative")
+MODEL_PATH = Path("models/petri_candidate_classifier.joblib")
+
+
+def main() -> None:
+    features, targets = [], []
+    annotations = sorted(DATASET.rglob("*.json"))
+    for annotation_path in annotations:
+        data = json.loads(annotation_path.read_text())
+        image_path = annotation_path.with_suffix(".jpg")
+        if not image_path.exists():
+            continue
+        image = prepare_image(image_path)
+        points = add_annotation_centers(candidate_points(image), data["labels"], image.scale)
+        labels = label_candidates(points, data["labels"], image.scale)
+        # keep a useful but not overwhelming background-to-colony ratio
+        positive = np.where(labels == 1)[0]
+        negative = np.where(labels == 0)[0]
+        rng = np.random.default_rng(abs(hash(annotation_path.stem)) % (2**32))
+        negative = rng.choice(negative, size=min(len(negative), max(50, len(positive) * 5)), replace=False)
+        selected = np.concatenate([positive, negative])
+        matrix = features_for_points(image, [points[index] for index in selected])
+        features.append(matrix)
+        targets.append(labels[selected])
+        print(f"{image_path.name}: {len(positive)} positives, {len(negative)} negatives")
+    x = np.vstack(features)
+    y = np.concatenate(targets)
+    model = RandomForestClassifier(
+        n_estimators=280, max_depth=14, min_samples_leaf=2, class_weight="balanced_subsample", n_jobs=-1, random_state=42
+    )
+    model.fit(x, y)
+    predicted = model.predict(x)
+    precision, recall, f1, _ = precision_recall_fscore_support(y, predicted, average="binary", zero_division=0)
+    MODEL_PATH.parent.mkdir(exist_ok=True)
+    joblib.dump({"model": model, "feature_version": 1}, MODEL_PATH)
+    print(f"Saved {MODEL_PATH}; training candidate precision={precision:.3f}, recall={recall:.3f}, f1={f1:.3f}; rows={len(y)}")
+
+
+if __name__ == "__main__":
+    main()