В предыдущей части статьи мы написали реализацию простейшей нейросети в виде JS класса. Теперь давайте попробуем дать ей настоящее задание. Сценарий будет следующим: пользователь будет рисовать в определенном блоке веб-страницы смайл, а наша нейросеть попробует определить грустный он или веселый. Давайте приступим.
Так как мы реализуем наше небольшое приложение в виде веб-страницы, а верстка и стилизация выходят за рамки нашей темы, мы опустим эти моменты и остановимся подробнее на программировании. Для начала создадим шаблон страницы, разместим на ней элементы и подключим скрипт с классом нейросети.
Sad Or Happy?
Коротко пройдемся по элементам управления.
Canvas с id paintField — это канва размером 10 на 10 блоков по 40 пикселей каждый. На ней пользователь с помощью мыши будет рисовать смайл для обучения сети или предсказания от нее.
Кнопки с id happy и sad будут заполнять набор данных для обучения нейросети. Пользователь нарисовал смайл, нажал соответствующую кнопку, сеть запомнила и стала чуточку умнее.
Кнопка Clear будет очищать поле ввода. Вдруг нам не понравилось то, что мы нарисовали.
Кнопка Train будет запускать процесс обучения.
И, наконец, кнопка Predict будет показывать что думает нейросеть по поводу нашего рисунка. Она станет доступной после обучения.
Теперь переходим в пустой тег
