Как начать пользоваться «Отклик»

Одна страница на все вопросы: и для тех, кто просто хочет начать, и для тех, кто настраивает доску под конкретного ребёнка.

Видео никуда не уходит. Если пользуетесь камерой, записи не ведётся: лицо разбирается прямо в браузере, на сервер не уходит ни одного кадра. Микрофон, если включите чтение реакции, меряет только громкость — речь не распознаётся и не сохраняется. Ничего не отправляется автоматически: журнал и таблицу вы сохраняете себе сами, кнопками.

Ставить ничего не нужно. Программа открывается в браузере, как обычный сайт. Лучше всего работает в Chrome; в Safari часть возможностей может вести себя иначе. Если вам дали не ссылку, а папку с файлами — смотрите последний раздел этой страницы, «Если вам дали папку, а не ссылку».

Что нужно

ЧтоЗачем
Компьютер (Mac или Windows)Ноутбук или настольный — без разницы, лишь бы тянул браузер и камеру.
Веб-камераНужна для управления взглядом, головой или морганием. Без камеры тоже можно: карточка выбирается тапом по экрану или пробелом на клавиатуре.
Браузер ChromeРекомендуется. Safari тоже открывает страницу, но часть возможностей может вести себя иначе.
ИнтернетНе нужен, если запускаете с папки на компьютере — все библиотеки уже внутри. Нужен один раз, если открываете по ссылке (см. ниже про объём загрузки).

Сколько весит и что качается

Распознавание лица и руки работает прямо в браузере, а не на сервере — значит, сам «движок» распознавания и модели должны попасть на ваш компьютер. Это разовая загрузка: браузер кладёт их в кэш, при следующих открытиях они не качаются заново.

Что грузитсяРазмерКогда
Движок распознавания (WebAssembly)~9 МБОдин раз при первом включении камеры
Модель лица (взгляд, голова, моргание, мимика)~3,6 МБПри первом включении камеры
Модель руки (палец-указка)~7,5 МБТолько если открыли «Палец-указку» или включили канал «Палец»

Итого при первом запуске около 13 МБ, и ещё ~7,5 МБ, если пользуетесь пальцем. Сама страница весит мелочь — почти весь объём это модели. На медленном интернете первое включение камеры может занять минуту, дальше уже мгновенно.

Если вам дали папку с программой, всё это уже лежит внутри и качать ничего не нужно — папка занимает около 30 МБ на диске (в ней обе сборки движка, браузер берёт подходящую).

Порядок настройки — сверху вниз

Шаги идут именно в этом порядке: каждый следующий опирается на предыдущий. Пропускать можно только те, что помечены «не обязательно».

  1. Открой «Доску общения»
    Страница с карточками — board.html. Она понадобится чаще всего.
  2. Включи камеру
    Кнопка «Включить камеру», затем разреши доступ, когда браузер спросит. Первый запуск дольше — грузится модель распознавания.
  3. Посади человека по овалу
    В окошке камеры есть овал-ориентир. Лицо должно быть внутри него целиком, овал зелёный — поза стабильная. Если сюда не попасть, всё дальнейшее будет промахиваться, сколько ни калибруй.
  4. Перейди в полноэкранный режим
    Кнопка «На весь экран». Делай это до калибровки, а не после. Калибровка запоминает углы относительно размера экрана — откалибруешь в окне, развернёшь на весь экран, и точки съедут. Вся настройка доступна прямо в полноэкранном: панель кнопок вверху (наведи мышь — проявится) и постоянный статус.
  5. Выбери способ управления
    Голова, Глаза или Моргание. Не угадывай — попробуй каждый по 30 секунд. Коротко: Голова — если человек управляет поворотом головы, самый надёжный (99%+). Глаза — если голова недоступна, но требует обучения модели (шаг 7), иначе около 50%. Моргание — работает у всех без настройки, но медленно: карточки перебираются по очереди. Подробнее — в разделе ниже.
  6. Калибровка взгляда / головы (4 угла)
    Кнопка «Калибровка» на панели или «Калибр. взгляд» в полноэкранном. По углам экрана летает бабочка (можно сменить на зверька, мячик, рыбку) — нужно посмотреть или повернуться к каждой. Для ребёнка увеличь «Время на угол» до 6–9 секунд, спешить незачем. Для «Моргания» этот шаг не нужен.
  7. Только для «Глаз»: собери датасет и обучи модель
    Без этого «Глаза» дают около 50% — каждый второй выбор неверный. В полноэкранном нажми «Сбор датасета»: объект прыгает по карточкам в случайном порядке много раз подряд, задача — следить за ним. Нужны повторы по всем четырём карточкам, минимум 40 кадров, а на практике — несколько минут. Затем «Обучить на датасете» в блоке «Модель» и галочка «Использовать модель». Точность появится в статусе — ориентир около 99%.
  8. Калибровка мимики (не обязательно)
    Нужна, только если хочешь видеть реакцию — доволен человек выбором или нет. Кнопка «Калибр. мимика»: 3 секунды спокойного лица в камеру, это принимается за ноль. Всё остальное считается отклонением от него. Подробнее — в разделе «Чтение реакции» ниже, там же как выключить.
  9. Сохрани профиль (не обязательно)
    Впиши имя в поле профиля и нажми «Сохранить калибровку». Полезно, если пользуются несколько человек или заметно отличается свет утром и вечером — переключаться быстрее, чем калибровать заново.
  10. Готово — можно пользоваться
    Настройка сохраняется в этом браузере сама. В следующий раз просто включи камеру: калибровать заново не нужно, пока не изменились человек, место, свет или камера. Изменилось что-то из этого — повтори шаги 4–6.

Полноэкранный режим

Это основной рабочий режим, а не украшение: карточки крупнее, промахнуться труднее, ничего лишнего не отвлекает. Заходи в него до калибровки — иначе точки съедут (см. шаг 4).

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

КнопкаЧто делает
Взгляд/Морг.Переключить способ управления на ходу
Калибр. взглядКалибровка по 4 углам (шаг 6)
Калибр. мимика3 секунды спокойного лица (шаг 8)
Сбор датасетаНабор данных для обучения модели (шаг 7)
✕ ВыходВернуться к обычному виду. Работает и клавиша Esc

Внизу постоянно виден статус: какой режим включён, откалибровано ли, используется ли модель, идёт ли сбор датасета и сколько повторов уже набрано. Так сбор можно вести целиком в полноэкранном, не гадая, пишутся данные или нет.

Чтение реакции (мимика)

Зачем это. Доска говорит, что человек выбрал, но не говорит, рад ли он этому. Чтение мимики отвечает на второй вопрос: показывает 😊 доволен / 😐 нейтрально / 😟 недоволен и записывает в журнал, что происходило в этот момент — какая карточка была выбрана или подсвечена. Из этого потом собирается сводка: на что человек реагирует хорошо, а что стабильно вызывает недовольство. Это особенно ценно, когда человек не может сказать словами.

Как включить. Блок «Реакция и журнал» на панели → «Калибровка мимики (спокойное лицо)», 3 секунды спокойно в камеру. Дальше работает само.

Как выключить. Сними галочку «Читать мимику постоянно» в том же блоке — распознавание остановится, ничего фиксироваться не будет. Отдельно выключается «Микрофон (звук реакции)»: он измеряет только громкость вокализации, запись звука не ведётся и никуда не отправляется. Обе галочки не влияют на выбор карточек — доска работает точно так же.

Что учитывать. Когда человек сильно поворачивает голову, чтобы выбрать карточку, мимика в этот момент не читается: поворот искажает лицо, и показания были бы ложными. Всё считается относительно спокойного лица из калибровки, поэтому её стоит повторить, если человек устал или заметно сменился свет.

Подробные эмоции — второй, менее надёжный слой

Галочка «Различать эмоции подробно» добавляет вместо двух состояний шесть: радость, удивление, огорчение, злость, неприятно, испуг. Работает только после калибровки мимики.

Читайте это честно. Два основных состояния (доволен / недоволен) устойчивы — вариантов мало, ошибиться трудно. Шесть эмоций надёжны заметно меньше, и вот почему: разбор идёт по напряжению мышц лица относительно спокойного, а при двигательных нарушениях мимика часто атипична — лицо может не складываться в «типовое» выражение вовсе. Ближе всего друг к другу испуг и удивление: у них общие мышцы (поднятые брови, раскрытые глаза), и путаница между ними наиболее вероятна.

Поэтому рядом с эмоцией стоит пометка уверенности — «уверенно», «похоже» или «слабый сигнал». Когда лидер не отрывается от второго места, вместо догадки честно показывается «спокойно». Опирайтесь на журнал за несколько сессий, а не на отдельный кадр: устойчивое «на эту карточку раз за разом огорчение» — это сигнал, а одна вспышка на экране — нет.

Галочка выключается независимо от основной: можно оставить только «доволен / недоволен», если подробности шумят. На выбор карточек ни одна из них не влияет.

Как улучшить под конкретного человека. В блоке «Разметка» есть кнопки подробных эмоций — нажимайте ту, что видите на самом деле, в момент, когда она происходит. Метки ложатся в журнал рядом с показаниями мышц, и по ним потом можно подогнать пороги под это лицо, а не на глаз. Это тот же приём, что с обучением модели взгляда.

Если что-то не работает

Что видишьЧто делать
«Нет доступа к камере»Браузер заблокировал камеру. Открой настройки сайта (значок замка/камеры в адресной строке) и разреши, потом обнови страницу.
«Камера не найдена»Проверь, что камера физически подключена и не отключена в настройках устройства.
«Камера занята другим приложением»Закрой Zoom, другие вкладки с видео или другое приложение, использующее камеру.
Калибровка не удаётсяУбедись, что лицо (или рука — для «Пальца») хорошо освещено и полностью видно в кадре, затем попробуй ещё раз.
Курсор дёргается / промахиваетсяОбычно значит — пересветило, лицо не по центру кадра или свет сбоку. Пересядь ближе к источнику света лицом к нему и перекалибруйся.
Подробнее про выбор канала и настройку

Какой канал выбрать

КаналКогда подходитКак настраивается
ГоловаЕсть контроль поворота головыПростая калибровка по 4 точкам — этого достаточно, обучение датасетом не нужно.
ПалецЕсть частичный контроль руки/пальцаТоже калибровка по 4 точкам (страница hand.html), плюс отдельная калибровка порога тапа (щипок или шевеление пальцем).
ГлазаКонтроль головы/руки нет или слабыйПростая калибровка по 4 точкам даёт слабый результат (около 50–60%). Нужна обученная модель — на доске это блок «Сбор датасета» → «Обучить модель»: несколько повторов «посмотри на карточку», после чего точность около 99%.
МорганиеУниверсальный запасной вариантНастройки не требует, но медленнее остальных — карточки перебираются по очереди.

Правило простое: голова и палец — обычная калибровка, глаза — почти всегда через обучение модели, а не формулу.

Про экран и расстояние — если выбрали «Глаза»

Чем экран физически меньше, тем меньше разница во взгляде между его углами — камере труднее отличить «смотрит влево» от «смотрит вправо». На маленьком экране стоит сесть ближе, чтобы углы снова разошлись.

Единственного правильного расстояния нет: оно зависит от экрана, камеры и самого человека. У нас откалибровалось на 13-дюймовом ноутбуке примерно с вытянутой руки — это отправная точка, а не норма. Пробуйте другие экраны, камеры и расстояния — это только приветствуется: калибровка каждый раз покажет, стало лучше или хуже, а удачную настройку можно сохранить профилем (см. ниже).

Профили калибровки

На доске (board.html) калибровку можно сохранить под именем и переключаться между несколькими — например, разное время суток или разные дети. Кнопка «Сохранить калибровку» в панели настроек, список сохранённых — там же. Данные хранятся в этом браузере (localStorage), между устройствами не синхронизируются — экспортируй JSON, если нужно перенести.

Игры и тесты (catcher.html, chase.html, balance.html, draw.html, grid.html, hand.html) запоминают только последнюю калибровку автоматически — без списка профилей, этого им достаточно.

Полный список страниц

Меню со всеми страницами и коротким описанием каждой — hub.html.

Если вам дали папку, а не ссылку

Этот раздел нужен только тем, кто ставит «Отклик» на компьютер, где интернета может не быть. Если у вас есть ссылка — просто откройте её, здесь ничего делать не надо.

Почему нельзя просто щёлкнуть по файлу. Если открыть страницу двойным кликом, браузер из соображений безопасности запретит ей читать соседние файлы в папке — а там лежит распознавание лица. Страница откроется, но камера не заработает или полезет в интернет за библиотеками. Поэтому папку нужно не «открыть», а «запустить».

Как запустить. В папке есть два файла — выберите свой и щёлкните по нему дважды:

Откроется чёрное окно с текстом, а следом — браузер с программой. Чёрное окно не закрывайте, пока работаете: пока оно открыто, «Отклик» работает. Закончили — закройте его, и программа остановится.

Что может пойти не так. Честно о двух случаях, которые встречаются чаще всего:

Нужен ли интернет. При запуске из папки — нет, всё лежит внутри и работает полностью автономно. Если открываете по ссылке, интернет нужен, чтобы страница загрузилась; дальше связь можно потерять, начатое занятие продолжит работать. Видео в обоих случаях остаётся на вашем компьютере.

Тому, кто разбирается в технике: это обычная статическая папка, годится любой веб-сервер. Подробности и способ обновить библиотеки — в файле README.md в той же папке.