210
правок
Изменения
м
</tt>
* [https://github.com/cpury/lookie-lookie/tree/master/blogcode Проект по трекингу взгляда]
{{В разработке}}
====Описание====
Задача отслеживания взгляда пользователя является частным случаем более общей задачи [http://neerc.ifmo.ru/wiki/index.php?title=Оценка_положения оценки положения]. Решить подобную задачу не так уж и трудно благодаря JavaScript-библиотеке TensorFlow.js <ref>[https://www.tensorflow.org/js/ TensorFlow.js {{---}} JavaScript библиотека для машинного обучения]</ref>. В браузере очень легко получить доступ к веб-камере. Если предположить, что в качестве входных данных для нейронной сети будет использоваться всё изображение с камеры, то можно сказать, что оно для этих целей слишком велико. Системе придётся проделать большую работу только для того, чтобы определить то место на изображении, где находятся глаза. Такой подход может хорошо показать себя в том случае, если речь идёт о модели, которую разработчик обучает самостоятельно и развёртывает на сервере, однако если мы говорим об обучении и использовании модели в браузере — это уже чересчур.
Для того чтобы облегчить задачу сети, мы можем предоставить ей лишь часть изображения — ту, которая содержит глаза пользователя [[Файл:Eyes.png |400px|thumb| right| Рис. 1 Процесс выделения глаз.]] и небольшую область вокруг них. Эту область, представляющую собой прямоугольник, окружающий глаза, можно выявить с помощью сторонней библиотеки.
Для обнаружения лица на изображении воспользуемся библиотекой, которая называется clmtrackr <ref>[https://github.com/auduno/clmtrackr clmtrackr{{---}} JavaScript библиотека для обнаружения лица]</ref>.
Если в качестве входа для простой свёрточной нейронной сети используется маленькое, но с умом подобранное изображение, сеть, без особых проблем, сможет обучиться.
6.'''Отслеживание перемещений мыши'''
Для того чтобы узнать, где именно на веб-странице расположен указатель мыши, нам понадобится обработчик события <code>document.onmousemove</code>. Функция нормализует координаты таким образом, чтобы они укладывались в диапазон [-1, 1].<tt>
const mouse = {
x: 0,
}
document.onmousemove = mouse.handleMouseMove;
7. '''Захват изображения'''
8. '''Обучение модели'''
Создадим простую [https[://ru.wikipedia.org/wiki/Свёрточная_нейронная_сеть Сверточные_нейронные_сети|свёрточную нейронную сеть]]. TensorFlow.js предоставляет для этой цели API, напоминающее Keras. У сети есть слой ''conv2d'', слой ''maxPooling2d'', и слой ''dense'' c двумя выходными значениями (они представляют экранные координаты), в качестве регуляризатора, слой ''dropout'', и слой ''flatten'' для того, чтобы преобразовать двухмерные данные в одномерные. Обучение сети выполняется с помощью оптимизатора ''Adam''.
let currentModel;
function createModel() {
}
Также прежде чем приступать к обучению сети, зададим фиксированное количество эпох и переменный размер [http://neerc.ifmo.ru/wiki/index.php?title=Batch-normalization пакета ] (так как мы, возможно, будем работать с очень маленькими наборами данных).
function fitModel() {
На выходе мы получили систему слежения за человеческим взглядом, у которой даже есть практическое применение.
Например при исследовании пользовательского опыта, во время проектирования и разработки интерфейсов веб-сайтов применяются тепловые карты.
'''Тепловая карта сайта'''<ref>[https://spyserp.com/ru/blog/heatmap-tool '''Тепловая карта сайта'''] </ref> {{--- }} это инструмент, который использует цветовую палитру для визуализации данных на графике. Например, если вы смотрите на веб-страницу и хотите знать, какие элементы привлекают больше всего внимания, тепловая карта покажет эту информацию на основании пользовательских данных.
Полный код разобранного в этом материале примера можно найти [https://github.com/cpury/lookie-lookie/tree/master/blogcode здесь].
Посмотреть на реализованную полную версию разобранного примера можно [https://cpury.github.io/lookie-lookie/ здесь].
== См.также ==
*[[Компьютерное зрение]]
==Примeчания==
<references/>
== Источники информации==
* [http://sv-journal.org/2015-4/09/index.php?lang=ru Автоматическая оценка ракурса лица в кадре и приведение изображения к нулевым углам поворота.]
* [https://habr.com/ru/company/ruvds/blog/426055/ TensorFlow.js и clmtrackr.js: отслеживание направления взгляда]
