В предыдущая часть статьи мы написали реализацию простейшей нейросети в виде JS-класса.
Теперь попробуем дать ей настоящее задание.
Сценарий будет следующий: пользователь нарисует смайлик в определенном блоке веб-страницы, а наша нейросеть попытается определить, грустно оно или весело.
Давайте начнем.
Поскольку мы реализуем наше небольшое приложение в виде веб-страницы, а верстка и стилизация выходят за рамки нашей темы, мы пропустим эти моменты и сосредоточимся на программировании более подробно.
Для начала создадим шаблон страницы, разместим на нем элементы и подключим скрипт к классу нейросети.
Давайте кратко рассмотрим элементы управления.<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="ширина = ширина устройства, масштабируемость пользователем = нет, начальный масштаб = 1,0, максимальный масштаб = 1,0, минимальный масштаб = 1,0"> <meta http-equiv="X-UA-Compatible" content="т.е.=край"> <script src="NeuralNetwork.js"></script> <title>Sad Or Happy?</title> </head> <body> <div id="wrapper"> <canvas width="400" height="400" id="paintField"></canvas> <div id="controls"> <button class="control" id="happy"></button> <button class="control" id="sad"></button> <button class="control" id="clear"> Clear </button> <button class="control" id="train"> Train </button> <button class="control" disabled id="predict"> Predict </button> </div> </div> </body> <style> #wrapper { width: 400px; margin: 0 auto; } #paintField { height: 400px; width: 100%; border: 1px solid black; } #controls { display: grid; grid-gap: 10px; grid-template-columns: 1fr 1fr; margin-top: 30px; } #clear, #train, #predict { grid-column: 1 / -1; } .
control { font-size: 20px; padding: 4px; cursor: pointer; } </style> <script> </script> </html>
Холст с идентификатором краскаПоле — это холст размером 10 на 10 блоков по 40 пикселей каждый.
На нем пользователь будет рисовать смайлик с помощью мыши, чтобы обучать сеть или делать на ее основе прогнозы.
Кнопки с идентификатором счастливый И грустный заполним набор данных для обучения нейронной сети.
Пользователь нарисовал смайлик, нажал соответствующую кнопку, сеть это запомнила и стала немного умнее.
Кнопка Прозрачный очистит поле ввода.
Внезапно нам не понравилось то, что мы нарисовали.
Кнопка Тренироваться начнется процесс обучения.
И, наконец, кнопка Предсказывать покажет, что думает нейросеть о нашем рисунке.
Он станет доступен после обучения.
Теперь иди в пустое
-
Создание Индекса Для Ваших Pdf-Файлов
19 Oct, 24 -
Тестировщики Против Тестирования
19 Oct, 24 -
Microsoft Откроет Исходный Код Субд Foxpro
19 Oct, 24 -
О Сегодняшнем Отключении Icq
19 Oct, 24 -
Отчет О 4-Й Киевской Хабрамитинге
19 Oct, 24 -
Как Рождаются Мифы.
19 Oct, 24 -
Шишки На Матрешке
19 Oct, 24 -
Ec2 — Анализ Цен Для Стартапа
19 Oct, 24
