Нейросеть с нуля своими руками. Часть 3. Sad Or Happy?

В предыдущей части статьи мы написали реализацию простейшей нейросети в виде JS класса. Теперь давайте попробуем дать ей настоящее задание. Сценарий будет следующим: пользователь будет рисовать в определенном блоке веб-страницы смайл, а наша нейросеть попробует определить грустный он или веселый. Давайте приступим.

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

 <meta charset="UTF-8">
 <meta name="viewport"
       content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 
 


 

   
   

     
     
     
       Clear
     
     
       Train
     
     
       Predict
     
   
 

Коротко пройдемся по элементам управления.

Canvas с id paintField — это канва размером 10 на 10 блоков по 40 пикселей каждый. На ней пользователь с помощью мыши будет рисовать смайл для обучения сети или предсказания от нее.

Кнопки с id happy и sad будут заполнять набор данных для обучения нейросети. Пользователь нарисовал смайл, нажал соответствующую кнопку, сеть запомнила и стала чуточку умнее.

Кнопка Clear будет очищать поле ввода. Вдруг нам не понравилось то, что мы нарисовали.

Кнопка Train будет запускать процесс обучения.

И, наконец, кнопка Predict будет показывать что думает нейросеть по поводу нашего рисунка. Она станет доступной после обучения.

Теперь переходим в пустой тег  

Источник