Цифровой гербарий: интерактивный лендинг

Занятие 1. «Разведка и сбор данных»

Суть занятия

Проблема: деревья есть, а их истории нет. Продукт: полевой датасет фото + GPS.

Этапы

Вводная (10 мин)
Полевая съемка (40 мин)
Архив/Рефлексия (10+10 мин)

Результат

Папка со 100+ фото, заполненный рабочий лист с координатами деревьев.

Материалы

Рабочий лист «Полевой дневник», инструкция по ТБ, шпаргалка по ракурсам съемки.

Почему это важно: Без качественных исходных данных любая нейросеть будет ошибаться. Цель — собрать минимум 100 снимков с точными GPS-метками.

Морфология: Форма листа (лопастная у дуба vs пальчатая у клена).
GPS-привязка: Координаты отличают мемориальный дуб от обычного в другом конце парка.
Свет и ракурс: Модель должна видеть объект под разными углами для обобщения.
Исторический контекст: Кто посадил дерево и когда — данные для блока справки.

Симулятор качества датасета

Представьте, что мы загружаем фото листьев. Качество модели зависит от разнообразия условий съемки.

Количество вариаций света: 3 Ракурсы на одно дерево: 2 Наличие координат (GPS):

Новая формула: Accuracy = (Базовая точность × Множитель света) + Бонус/GPS

Задания для учеников:

Установите ползунок «Вариации света» на максимум (5), а «Ракурсы» на 3. Какого бонуса не хватает до 85%?
Выключите GPS (переключите на "Нет"). На сколько процентов упала точность? Почему геолокация критична для гида?
Добейтесь ровно 85% или выше. Какие параметры вы подобрали?

Выводы:

Для ИИ важны не красивые фото, а репрезентативные (разные свет/ракурсы).
Ошибки на этапе сбора данных невозможно исправить алгоритмами позже.

Занятие 2. «Каталогизация и описание»

Суть занятия

Проблема: хаос файлов. Продукт: структурированный CSV-датасет и тексты справок.

Этапы

Организационный (5 мин)
Сортировка фото (20 мин)
Создание CSV (25 мин)
Справки (30 мин)
Проверка (10 мин)

Результат

CSV-файл с метаданными и текстовые файлы экологической/исторической справки.

Материалы

Шаблон CSV-каталога, шаблон исторической справки, пример структуры папок.

Почему это важно: Хаос из папок превращается в структурированный CSV-датасет. Текстовые справки связывают сухие цифры с реальным миром.

Структура именования: вид_номер.jpg позволяет автоматизировать обработку.
CSV как мост: Таблица связывает файл изображения с его метаданными (широта, долгота, семейство).
Экологическая справка: Биология (плоды, цветение) + География (ареал).
Историческая справка: Дата посадки и персоналии создают эмоциональную связь.

Генератор строки CSV

Заполните карточку дерева, чтобы получить готовую строку для таблицы.

Задания для учеников:

Введите координаты своего дома или школы. Проверьте их на Яндекс.Картах.
Что произойдет в веб-приложении, если у двух разных деревьев будут одинаковые координаты?
Создайте три разные строки: для уникального, мемориального и обычного дерева.

Выводы:

Порядок в файлах = порядок в коде. Строгий шаблон экономит часы работы.
Справки пишутся для людей, поэтому сухой факт нужно дополнять историей.

Занятие 3. «Обучение модели»

Суть занятия

Проблема: компьютер не видит листья. Продукт: обученная CNN-модель (.h5/.tflite).

Этапы

Вводная (10 мин)
Загрузка данных (20 мин)
Обучение (25 мин)
Анализ ошибок (20 мин)
Экспорт (15 мин)

Результат

Файл экспортированной модели и отчет с показателем accuracy.

Материалы

Инструкция Visary AI/NNTrack, эталонная модель для сравнения, чек-лист обучения.

Почему это важно: Свёрточная нейросеть (CNN) учится находить скрытые закономерности в пикселях, которые человеческий глаз может пропустить.

Эпохи обучения: Один полный проход всех фото через сеть.
Accuracy (Точность): Доля правильных ответов на проверочных фото.
Переобучение (Overfitting): Когда модель идеально знает тренировочные фото, но путается на новых.
No-code платформы: Visary AI / NNTrack делают сложный ML доступным без написания кода.

Тренировочный симулятор CNN

Управляйте процессом обучения. Следите за балансом между скоростью и точностью.

Количество эпох (проходов): 15 Размер выборки (фото): 80

Точность ∝ log(Объем данных) - Переобучение(Эпохи)

Задания для учеников:

Поставьте 5 эпох на 20 фото. Запустите. Почему такая низкая точность?
Увеличьте эпохи до 50 при тех же 20 фото. Что случилось с результатом? (Это эффект зазубривания).
Найдите "золотую середину": объем данных и эпох, дающих стабильные 75-85%.

Выводы:

Больше качественных данных важнее, чем бесконечное количество эпох обучения.
Анализ ошибок модели учит думать системно: почему она путает березу и осину?

Занятие 4. «Сборка веб-приложения»

Суть занятия

Проблема: разрозненные части. Продукт: работающая веб-страница с картой и моделью.

Этапы

Вводная (10 мин)
HTML/CSS (25 мин)
JS + Модель (20 мин)
Карта API (25 мин)
Публикация (10 мин)

Результат

Ссылка на опубликованную страницу, принимающую фото и выводящую результат на карту.

Материалы

Шаблон index.html, CSS-сетка, инструкция по получению ключа Яндекс.Карт API.

Почему это важно: Код объединяет разрозненные части (модель, карту, тексты) в единый инструмент, которым сможет пользоваться любой учитель биологии.

HTML/CSS: Скелет и внешний вид страницы.
JavaScript: Мозг сайта, который реагирует на нажатия кнопок.
API Карт: Сервис, позволяющий встроить интерактивную карту Яндекса.
Импорт модели: Подключение обученной нейросети прямо в браузер пользователя.

Конструктор интерфейса

Соберите свою страницу, выбирая нужные блоки. Результат обновится мгновенно.

Блок карты (Яндекс.Карты) Форма загрузки фото Историческая справка Экологическая справка

📷 Форма загрузки фото

Поле выбора файла и кнопка «Распознать».

🌿 Экологическая справка

Семейство, ареал распространения, плоды.

🏛️ Историческая справка

Кто посадил дерево и в честь какого события.

🗺️ Карта парка

Метка текущего дерева и маршрут экскурсии.

Задания для учеников:

Отключите блок исторической справки. Кому станет сложнее пользоваться приложением?
Оставьте только форму и результат распознавания. Чем этот сайт отличается от PlantNet?
Какое API необходимо добавить, если мы хотим строить маршруты экскурсии? (Ответ: Routing API).

Выводы:

Интерфейс должен быть интуитивным: кнопка -> загрузка -> ответ за секунды.
Модульность позволяет отключать лишнее для младших классов.

Занятие 5. «Тестирование и презентация»

Суть занятия

Проблема: баги перед сдачей. Продукт: защищенный проект + план развития v2.0.

Этапы

UAT тестирование (20 мин)
Мини-экскурсия (20 мин)
Форма краудсорсинга (20 мин)
Презентация (15 мин)
Защита (15 мин)

Результат

Протокол тестирования, отзыв учителя, итоговый балл готовности.

Материалы

Чек-лист UAT, бланк отзыва эксперта, матрица компетенций для защиты.

Почему это важно: Реальные пользователи всегда находят баги, о которых разработчик не догадывался. Презентация закрывает цикл разработки и защищает проект.

UAT (User Acceptance Testing): Проверка приложения учителями-биологами в реальных условиях.
Edge Cases: Граничные случаи (нечеткое фото, отсутствие интернета, одинаковое название файла).
Метрики защиты: Время отклика, удобство чтения шрифта, логика маршрута.
План развития: Куда двигаться после сдачи (краудсорсинг, новые виды деревьев).

Матрица оценки готовности

Оцените свой проект перед сдачей администрации школы. Передвиньте ползунки.

Скорость ответа (< 5 сек): 8/10 Удобство для экскурсии: 7/10 Надежность (нет вылетов): 9/10

Задания для учеников:

Если скорость ответа 2/10, какие технические причины могут быть? (Огромный вес модели JS).
Добейтесь суммарного балла выше 22 из 30 для допуска к защите.
Назовите одну фичу, которую вы добавите в версии 2.0 (например, голосовой ввод названия).

Выводы:

Продукт считается готовым, когда им удобно пользоваться другому человеку.
Любой баг, найденный до презентации — это сэкономленные нервы на защите.