Знакомство с нейросетями и немного магии на JavaScript

1.

Знакомство с нейросетями
и немного магии на
JavaScript
https://cutt.ly/quantorium-neural

2.

Что такое нейросеть?

3.

Что такое нейросеть?
Нейро́нная сеть (также искусственная нейронная сеть, ИНС)
— математическая модель, а также её программное или
аппаратное воплощение, построенная по принципу
организации и функционирования биологических нейронных
сетей — сетей нервных клеток живого организма.

4.

Мозг и нейроны

5.

Мозг и нейроны
!!ПРЕДУПРЕЖДЕНИЕ!!!!
Я не биолог, а программист и могу высказывать сильно
упрощенные, либо ошибочные суждения (не нарочно).
Меня успокаивает только то, что большинство биологов
будут точно так же плавать в области программирования.

6.

Мозг и нейроны
Нейрон - нервная клетка, основная функциональная и структурная
единица нервной системы; принимает сигналы, поступающие от
рецепторов и других нейронов, перерабатывает их и в форме нервных
импульсов передаёт к эффекторным нервным окончаниям

7.

Мозг и нейроны

8.

Мозг и нейроны
Датчики
Глаза, Уши, Язык, Кожа, Нос
Обработка
Команды
Мышцы, Железы и т.д.

9.

Большой палец
Указательный
Мизинец
Чувствительные
нейроны кожи

10.

Большой палец
Указательный
Мизинец
Нейроны сложения
импульсов

11.

Большой палец
Моторные нейроны
отдернуть
большой палец
отдернуть
указательный
отдернуть
мизинец
Указательный
Мизинец

12.

Большой палец
Указательный
Мизинец
отдернуть
большой палец
отдернуть
указательный
отдернуть руку
отдернуть
мизинец

13.

Большой палец
Указательный
Мизинец
Так
задумано
отдернуть
большой палец
отдернуть
указательный
отдернуть руку
отдернуть
мизинец
Е

14.

Простейшая мат. модель. Перцептрон

15.

Создание и обучение нейросети

16.

Создание и обучение нейросети
100

17.

Создание и обучение нейросети
[1, 200] = left
[150, 50] = right
[80, 100] = left
[120, 150] = right
[110, 4] = right
[20, 120] = left
[80, 80] = left
[115, 30] = right
[48, 19] = left
[152, 93] = right

18.

Создание и обучение нейросети
20
+1
+5
+1
+1
+1
-8
10
1
+1
+1
Лево
2
Право
+3
-1
18
50
4

19.

Создание и обучение нейросети
Идеал:
[1, 200] = left
[150, 50] = right
[80, 100] = left
[120, 150] = right
[110, 4] = right
[20, 120] = left
[80, 80] = left
[115, 30] = right
[48, 19] = left
[152, 93] = right
Коэффициент
различия
2
2
Факт:
[1, 200] = right
[150, 50] = right
[80, 100] = right
[120, 150] = right
[110, 4] = left
[20, 120] = left
[80, 80] = left
[115, 30] = left
[48, 19] = left
[152, 93] = right

20.

Создание и обучение нейросети
20
+1
+5
+1
+1
+1
-8
10
1
+1
+1
Лево
2
Право
+3
-1
18
50
4

21.

Создание и обучение нейросети
10
+1
+5
-1
+12
0
-8
5
1
+1
+1
Лево
2
Право
+3
-1
18
11
4

22.

Создание и обучение нейросети
Идеал:
[1, 200] = left
[150, 50] = right
[80, 100] = left
[120, 150] = right
[110, 4] = right
[20, 120] = left
[80, 80] = left
[115, 30] = right
[48, 19] = left
[152, 93] = right
Коэффициент
различия
1
8
Факт:
[1, 200] =left
[150, 50] = right
[80, 100] = right
[120, 150] = right
[110, 4] = right
[20, 120] = left
[80, 80] = left
[115, 30] = right
[48, 19] = left
[152, 93] = right

23.

Создание и обучение нейросети
100

24.

Создание и обучение нейросети

25.

Создание и обучение нейросети

26.

Глубокое обучение
То есть нейросеть не просто работает по какому то алгоритму, а сама вырабатывает
алгоритм. Причем описание такого алгоритма чаще всего слишком огромно и сложно для
восприятия человеком.
В результате нейронная сеть способна выявить такие закономерности, из набора
неструктурированных входных данных, которые сложно выразить в виде формул, да и
вообще заметить человеку.

27.

Зачем JS?
1. Потому что я знаю JS
2. Потому что на JS можно писать кучу всего из совершенно разных
областей
- Сайты и веб-приложения
- Мобильные приложения
- VR и AR
- Нейросети
- 3D графика
- и т.д.
Разумеется, при такой разноплановости, JS проигрывает
специализированным решениям, но его универсальность решает.

28.

За что схватиться?
https://learn.ml5js.org/#/
https://www.tensorflow.org/js

29.

Создаем и обучаем нейросеть на ML5
const nn = ml5.neuralNetwork({
task: 'classification',
debug: true
});
nn.addData([1, 200], ['left']);
…
nn.normalizeData();
nn.train({
epochs: 300,
batchSize: 12
}, finishedTraining);

30.

Классифицируем данные
function finishedTraining() {
nn.classify([3, 3], console.log);
}
Здесь у меня видимо было что-то с компьютером. На другом компьютере нейросеть отработала
штатно, и сразу сказала верный ответ.
После перезагрузки и на первом компьютере все заработало штатно.
Приношу извинения за неполадки в оборудовании.

31.

Предобученные нейросети

32.

<html>
<body>
<p>The model labeled this as <span id="result">...</span> with a confidence of <span
id="probability">...</span>.</p>
<img src="https://i.insider.com/5ba126df3cccd120008b4568?width=1100&format=jpeg&auto=webp"
id="image" width="400" crossorigin="anonymous" />
</body>
<script src="https://unpkg.com/ml5@latest/dist/ml5.min.js" type="text/javascript"></script>
<script>
const image = document.getElementById('image'); // The image we want to classify
const result = document.getElementById('result'); // The result tag in the HTML
const probability = document.getElementById('probability'); // The probability tag in the HTML
ml5.imageClassifier('MobileNet')
.then(classifier => classifier.classify(image))
.then(results => {
console.log(results);
result.innerText = results[0].label;
probability.innerText = results[0].confidence.toFixed(4);
});
</script>
</html>

33.

Обучаем сеть распознавать изображения
https://teachablemachine.withgoogle.com/train

34.

35.

Домашнее задание
1) Используя тип - regression, и и метод predict научите нейросеть
складывать три числа.
2) Научите нейросеть распознавать ваши жесты
3) Для тех, кто хочет поковыряться: Подключитесь к веб-камере и сделайте
разблокирование области сайта жестом.