-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
130 lines (106 loc) · 3.99 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
<!DOCTYPE html>
<html lang="en">
<head>
<title>Getting Started with ml5.js</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- p5 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/p5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/addons/p5.dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/addons/p5.sound.min.js"></script>
<!-- ml5 -->
<script src="https://unpkg.com/ml5@0.4.3/dist/ml5.min.js"></script>
</head>
<body>
<h1>Classificando círculos com rede neural</h1>
<h3>Como funciona</h3>
<p>
Você irá colocar vários círculos na tela com letras distintas para poder treinar a rede neural. Cada letra deve estar mais ou menos na mesma posição.
</p>
<p>Após definir os círculos a rede irá treinar e depois você poderá clicar em qualquer parte e a rede neural irá informar qual é a letra adequada para aquele círculo.</p>
<h3>Como usar</h3>
<ul>
<li>Clique em uma posição no retângulo cinza.</li>
<li>Por padrão os primeiros círculos são com a letra C.</li>
<li>Clique várias vezes criando círculos com a mesma letra em locais aproximados.</li>
<li>Escolhe outra letra teclando em seu teclado.</li>
<li>Adicione mais círculos com a nova letra em um outro local, sempre mantendo as letras iguais próximas uma da outra.</li>
<li>Para iniciar o treino aperte a tecla T</li>
<li>Após o treino ser finalizado, você poderá clicar em qualquer local no retângulo e a rede neural irá informar qual letra é a mais adequada.</li>
</ul>
<script>
console.log('ml5 version:', ml5.version);
let model;
let targetLabel = 'C';
// let trainingData = [];
let state = 'collection';
function setup() {
createCanvas(400, 400);
let options = {
inputs: ['x', 'y'],
outputs: ['label'],
task: 'classification',
debug: 'true',
};
model = ml5.neuralNetwork(options);
background(200);
}
function keyPressed(){
if (key == 't') {
state = 'training';
console.log('Treinamento começou...');
model.normalizeData();
let options = {
epochs: 200
};
model.train(options, whileTraining, finishedTraining);
} else {
targetLabel = key.toUpperCase();
}
}
function whileTraining(epochs, loss){
console.log(epochs);
}
function finishedTraining(){
console.log('Finished training');
state = 'prediction';
}
function mousePressed() {
let inputs = {
x: mouseX,
y: mouseY,
};
if (state == 'collection'){
let target = {
label: targetLabel
};
model.addData(inputs, target);
stroke(0);
noFill();
ellipse(mouseX, mouseY, 24);
fill(0);
noStroke();
textAlign(CENTER, CENTER);
text(targetLabel, mouseX, mouseY);
} else if (state == 'prediction') {
model.classify(inputs, gotResults);
}
}
function gotResults(error, results) {
if (error) {
console.log(error);
return;
}
console.log(results);
stroke(0);
fill(0,0,255,100);
ellipse(mouseX, mouseY, 24);
fill(0);
noStroke();
textAlign(CENTER, CENTER);
text(results[0].label, mouseX, mouseY);
}
function draw() {
}
</script>
</body>
</html>