В предыдущей части статьи мы написали реализацию простейшей нейросети в виде JS класса. Теперь давайте попробуем дать ей настоящее задание. Сценарий будет следующим: пользователь будет рисовать в определенном блоке веб-страницы смайл, а наша нейросеть попробует определить грустный он или веселый. Давайте приступим. Так как мы реализуем наше небольшое приложение в виде веб-страницы, а верстка и стилизация выходят за рамки нашей темы, мы опустим эти моменты и остановимся подробнее на программировании. Для начала создадим шаблон страницы, разместим на ней элементы и подключим скрипт с классом нейросети. Коротко пройдемся по элементам управления. Canvas с id paintField - это канва размером 10 на 10 блоков по 40 пикселей каждый. На ней пользователь с помощью мыши будет рисовать смайл для обучения сети или предсказания от нее. Кнопки с id happy и sad будут заполнять набор данных для обучения нейросети. Пользователь нарисовал смайл, нажал соответствующую кнопку, сеть запомнила и стала чуточку умнее. Кнопка Clear будет очищать поле ввода. Вдруг нам не понравилось то, что мы нарисовали. Кнопка Train будет запускать процесс обучения. И, наконец, кнопка Predict будет показывать что думает нейросеть по поводу нашего рисунка. Она станет доступной после обучения. Теперь переходим в пустой тег <script> и начинаем шаг за шагом его заполнять. Здесь мы записали в переменные ссылки на элементы управления для более удобного доступа к ним и объявили несколько ключевых вещей: paintField - плоский массив для хранения состояния нашего рисунка. Он состоит из 100 элементов, каждый элемент соответствует одному из блоков на нашей канве. trainData - сюда мы будем складывать данные для обучения сети. NN - собственно наша нейросеть. У нее будет 100 нейронов во входном слое - по одному на каждый элемент массива paintField и 2 нейрона в выходном слое. Первый будет говорить нам о вероятности того, что это веселый смайл, второй - что грустный. Далее мы создаем переменную для отслеживания нажатия кнопки мыши, две переменных для подсчета того, сколько каких кейсов мы добавили в набор данных для обучения и задаем learningRate сети повыше чтобы обучение не длилось слишком долго. Теперь добавим несколько функций. drawGrid - рисует сетку на канве. clearCanvas - очищает канву от наших художеств. drawSquare - рисует цветной блок по заданным координатам сетки. draw - функция, в которую мы будем передавать событие мыши. Она по координатам курсора определит номер блока, запишет в массив единицу под соответствующим индексом, и покрасит соответствующий блок в зеленый цвет. clearField - очищает массив данных и канву. updateInterface - обновляет надписи на кнопках, в соответствии с тем, сколько грустных и веселых смайлов мы уже показали нашей нейросети. storeResult - добавляет текущий рисунок в массив данных для обучения. И, наконец, навесим обработчики на элементы управления и выполним начальную инициализацию. Теперь точно все. Можем открывать страницу в браузере и начинать экспериментировать. Нарисовали грустный или веселый смайл, нажали соответствующую кнопку, повторили.  Старайтесь добавлять примерно одинаковое количество кейсов, и добавляйте их не слишком мало - так сеть ничему не научится, и не слишком много - так обучение будет идти слишком долго. Когда решите что уже достаточно, жмите Train и ожидайте соответствующее сообщение. Появилось? Все! теперь наша сеть обучена и мы можем нарисовать смайл и спросить на что он похож с помощью кнопки Predict.   На этом наше увлекательное приключение подходит к концу. Мы разобрались что такое нейросети, как они работают, написали свою реализацию без единой библиотеки и попробовали ее в деле. Надеюсь это было интересно и хоть немного познавательно. С критикой и комментариями буду рад вам в комментариях. Посмотреть на результат в деле вы можете по ссылке  Весь код можно найти в репозитории   Спасибо за внимание.