-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathclass_test.html
482 lines (375 loc) · 18.3 KB
/
class_test.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
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
<!DOCTYPE html>
<html>
<head>
<title>asanai.js</title>
<script src='libs/jquery.js' crossorigin></script>
<script src='asanai.js' crossorigin></script>
<script src='tf/tf.min.js' crossorigin></script>
<script src='libs/jquery-ui.js' crossorigin></script>
<script src='libs/plotly-latest.min.js' crossorigin></script>
<script src='libs/temml/temml.js' crossorigin></script>
<script src='libs/md5.umd.min.js' crossorigin></script>
<script src="libs/ribbon.js"></script>
<script src="libs/jquery.tooltip.min.js"></script>
<script src='libs/prism/prism.js' crossorigin></script>
<script src='libs/prism/prism-python.min.js' crossorigin></script>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<link href='libs/prism/prism.min.css' rel='stylesheet'>
<style>
/* This style is optional */
.float-container {
border: 3px solid #fff;
margin: 10px;
}
.float-child {
float: left;
padding: 20px;
border: 2px solid red;
}
button {
margin: 10px;
background-color: lightgray;
}
#plotly_batch_history {
display: none;
}
#plotly_time_per_batch {
display: none;
}
#canvas_grid_visualization {
opacity: 1;
}
</style>
</head>
<body>
<input style="display: none;" type="checkbox" checked id="visualize_images_in_grid" />
<!-- both are needed for some reason..." -->
<div style="width: 1000px; height: 500px; display: block;" id="visualization"></div>
<div style="width: 1000px; height: 500px; display: block;" id="canvas_grid_visualization"></div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div style="font-size: 32px; user-select: none">
<span onclick='asanai.set_lang("de")'>🇩🇪</span>
<span onclick='asanai.set_lang("en")'>🇺🇸</span>
</div>
<div id="memory"></div>
<div class="custom_internal_states_layer" id="layer_1_kernel_9"></div>
<div class="custom_internal_states_layer" id="layer_1_neuron_2"></div>
<div class="custom_internal_states_layer" id="layer_1_kernel_9"></div>
<div class="custom_internal_states_layer" id="layer_1_kernel_10"></div>
<div class="custom_internal_states_layer" id="layer_3_neuron_0"></div>
<div class="custom_internal_states_layer" id="layer_4_neuron_0"></div>
</div>
<button onclick="test_model_switch()">Shape: [20, 20, 3] -> [20, 20, 3]</button><br>
<button onclick="test_model_switch_two()">Shape: [20, 20, 3] -> [4]</button><br>
<button onclick="test_model_switch_three()">Shape: [5] -> [4]</button><br>
<button onclick="new_model_load_test_images_and_train()">Load test images and train</button><br>
<button onclick="load_exhib_data_and_train()">Load exhib data and train</button><br>
<button onclick='asanai.draw_maximally_activated_layer(0)'>Draw maximally activated neuron for first layer</button><br>
<button onclick='maximally_activate_all_neurons()'>Maximally activate all neurons</button><br>
<div class="maximally_activated_class"></div>
<div id="maximally_activated_content"></div>
<div id="optimizer_div"></div>
<pre>====</pre>
<div id="test_images"></div>
<div id="plotly_history"></div>
<div id="math_tab_code"></div>
<div class="confusion_matrix"></div>
<pre>====</pre>
<div class="float-container">
<div class="float-child">
<center><img id="exhib_example_a" src="class_test_images/apple.jpg" width=50 height=50 /></center><span id="test_image_prediction_exhib_a"></span>
</div>
<div class="float-child">
<center><img id="exhib_example_b" src="class_test_images/orange.jpg" width=50 height=50 /></center><span id="test_image_prediction_exhib_b"></span>
</div>
<div class="float-child">
<center><img id="exhib_example_c" src="class_test_images/banana.jpg" width=50 height=50 /></center><span id="test_image_prediction_exhib_c"></span>
</div>
</div>
<br>
<!--
<div class="float-container">
<div class="float-child">
<center><img id="test_image" src="traindata/signs/example/e_warning.png" width=50 height=50 /></center>
<span id="test_image_prediction"></span>
</div>
<div class="float-child">
<center><img id="test_image_two" src="traindata/signs/example/c_prohibition.png" width=50 height=50 /></center>
<span id="test_image_two_prediction"></span>
</div>
</div>
-->
<div style="clear: both;"></div>
<br>
<br>
<div id="summary"></div>
<br>
<div id="webcam_prediction"></div>
<div id="webcam_prediction_result"></div>
<br>
<div id="internal_states"></div>
<div id="fcnn_div"></div>
<br><br>
<script>
// Defines the optimizer that should be used for training.
// Can be specified for each model seperately and on-demand, but I chose to do it here, because
// then I don't need to define it in other places.
// You can also build a GUI for this.
var optimizer_config = { optimizer: "adam", loss: "categoricalCrossentropy", "learningRate": 0.001 }
// This variable will hold the asanAI object. Each object can have exactly one model loaded.
// But you can have as many objects as you wish, or, e.g., save them in an array or a dictionary
// or whatever you like or need, just like normal variables/objects (which it absolutely is).
var asanai;
// When the site has fully loaded, initialize the objects
$(document).ready(async function() {
// Default model:
// 2 Conv layers, one flatten, 2 dense layers, last one having 4 categories and SoftMax activation function.
// This allows classification of images into 4 categories.
var model_data = [
{conv2d: {filters: 4, kernelSize: [3, 3], inputShape: [20, 20, 3], activation: "relu", kernelInitializer: "glorotUniform"}},
{conv2d: {filters: 4, kernelSize: [3, 3], activation: "relu", biasInitializer: "ones"}},
{flatten: {}},
{dense: {units: 5, activation: "relu"}},
{dense: {units: 4, activation: "softmax"}}
];
// Declaration of asanAI-object, which was previously globally defined.
asanai = new asanAI({
model_data: model_data, // The default model structure that should be loaded
optimizer_config: optimizer_config, // The config for the optimizer (which trains the model)
translations_file: "translations.php?print=1", // A file containing translations, i. e. in german and english in this case
optimizer_table_div_name: "optimizer_div", // A div, in which the settings for the optimizer should be written, so the user may change them
asanai_object_name: "asanai", // The name of the variable containing the asanAI object.
// This is important for things like "onclick"-events and needs to be changed when you use other variable names than
// `var asanai`.
//math_tab_code_div: "math_tab_code" // When commented in, this looks for a div with the id `math_tab_code`, and automatically writes the math mode contents to it.
});
asanai.enable_fcnn_internals();
asanai.disable_show_bars(); // # enables text to be shown instead of bars in predictions, not needed if you dont want this
// This sets the mode, there is expert and beginner. This is not used anywhere (yet)
asanai.set_mode("expert");
// This enables the status bar at the bottom, where a tensor debugger is shown, and also the messages via log, warn and error are shown.
asanai.show_status_bar();
// This is optional, but lets you allow colors of the bars in predictions
await asanai.set_default_bar_color("red")
await asanai.set_max_bar_color("green")
await asanai.set_bar_background_color("#afafaf")
// This sets the maximum amount of iterations for "layer visualization images".
asanai.set_max_activation_iterations(4)
// This sets the number the input is divided by by default, so that, for example, images. whose values are between 0 and 255, get shrinked to 0 and 1.
// This makes training more effective in many cases.
asanai.set_divide_by(255);
// With this, you can set the labels that are used all throughout the GUI whenever it shows which categories are there or predicts something
asanai.set_labels(["erste kategorie", "zweite kategorie", "dritte kategorie", "vierte kategorie"]);
// The first parameter to show_internals is the id-name of a div, in which the internals are printed.
// Internals are that which you see as input/output of each layer/neuron, which are visualized to make it easier to understand what the network does.
// The second parameter allows you to enable (1) or disable (0) the size sliders for neurons/outputs
//asanai.show_internals("internal_states", 1);
// Hide internals, when called, hides the internals again after they've been shown
//asanai.hide_internals();
// Set FCNN rescale factor
asanai.set_rescale_factor(3);
// Set FCNN layer spacing add
asanai.set_layer_spacing_add(60);
// draw_fcnn shows the FCNN style visualization the a div with the provided ID.
asanai.set_fcnn_width(1200);
asanai.set_fcnn_height(400);
asanai.draw_fcnn("fcnn_div", 32, true);
// Shows the output of model.summary in a div.
asanai.write_model_summary("summary")
asanai.show_and_predict_webcam_in_div("webcam_prediction", "webcam_prediction_result");
await asanai.predict_image("test_image", "test_image_prediction", true, true);
await asanai.predict_image("test_image_two", "test_image_two_prediction", true, true);
asanai.write_tensors_info("memory");
$('#enable-btn').click(function() {
$('#del-table-btn').enable();
$('#del-page-btn').enable();
$('#save-btn').enable();
$('#other-btn-2').enable();
$('#enable-btn').hide();
$('#disable-btn').show();
});
$('#disable-btn').click(function() {
$('#del-table-btn').disable();
$('#del-page-btn').disable();
$('#save-btn').disable();
$('#other-btn-2').disable();
$('#disable-btn').hide();
$('#enable-btn').show();
});
});
function test_model_switch () {
var fl = tf.layers.dense({units: 3, activation: "softmax", inputShape: [20, 20, 3]});
var xxx = tf.sequential({layers: [fl]});
xxx.compile(optimizer_config);
asanai.set_model(xxx)
}
function test_model_switch_two () {
var new_model_struct = [
{conv2d: {filters: 4, kernelSize: [3, 3], inputShape: [20, 20, 3], activation: "relu"}},
{conv2d: {filters: 4, kernelSize: [3, 3], activation: "relu"}},
{conv2d: {filters: 4, kernelSize: [3, 3], activation: "relu"}},
{conv2d: {filters: 4, kernelSize: [3, 3], activation: "relu"}},
{conv2d: {filters: 4, kernelSize: [3, 3], activation: "relu"}},
{conv2d: {filters: 4, kernelSize: [3, 3], activation: "relu"}},
{flatten: {}},
{dense: {units: 5, activation: "relu"}},
{dense: {units: 4, activation: "softmax"}}
];
asanai.create_model_from_model_data(new_model_struct, optimizer_config);
}
function test_model_switch_three () {
var new_model_struct = [
{dense: {units: 5, activation: "relu", inputShape: [5]}},
{dense: {units: 4, activation: "softmax"}}
];
asanai.create_model_from_model_data(new_model_struct, optimizer_config);
}
async function load_test_images () {
var loaded_data = await asanai.load_image_urls_to_div_and_tensor("test_images", [
["traindata/signs/example/a_fire.png", "fire"],
["traindata/signs/example/b_mandatory.png", "mandatory"],
["traindata/signs/example/c_prohibition.png", "prohibition"],
["traindata/signs/example/d_rescue.png", "rescue"],
["traindata/signs/example/e_warning.png", "warning"]
], 1);
console.log(loaded_data);
}
async function new_model_load_test_images_and_train () {
var new_model_struct = [
{conv2d: {filters: 4, kernelSize: [3, 3], inputShape: [50, 50, 3], activation: "relu"}},
{conv2d: {filters: 4, kernelSize: [3, 3], activation: "relu"}},
{conv2d: {filters: 4, kernelSize: [3, 3], activation: "relu"}},
{flatten: {}},
{dense: {units: 10, activation: "relu"}},
{dense: {units: 5, activation: "softmax"}}
];
asanai.create_model_from_model_data(new_model_struct, optimizer_config);
var loaded_data = await asanai.load_image_urls_to_div_and_tensor("test_images", [
["traindata/signs/warning/120px-D-W028_Warnung_vor_Rutschgefahr.svg.png", "warning"],
["traindata/signs/warning/120px-Laser-symbol-text-bn.svg.png", "warning"],
["traindata/signs/prohibition/120px-DIN_4844-2_D-P022.svg.png", "prohibition"],
["traindata/signs/prohibition/120px-DIN_4844-2_D-P006.svg.png", "prohibition"],
["traindata/signs/fire/116px-Fire_Class_B.svg.png", "fire"],
["traindata/signs/fire/120px-F001.svg.png", "fire"],
["traindata/signs/rescue/120px-E003.svg.png", "rescue"],
["traindata/signs/rescue/120px-E004.svg.png", "rescue"],
["traindata/signs/mandatory/120px-DIN_4844-2_D-M003.svg.png", "mandatory"],
["traindata/signs/mandatory/120px-DIN_4844-2_D-M009.svg.png", "mandatory"]
]);
console.log(loaded_data);
var history = await asanai.fit(loaded_data.x, loaded_data.y, {epochs: 5, batchSize: 1000, shuffle: true});
if(history) {
console.log("history:", history);
} else {
console.error("Training failed");
}
await asanai.dispose(loaded_data.x);
await asanai.dispose(loaded_data.y);
}
async function load_test_images_and_train () {
var loaded_data = await asanai.load_image_urls_to_div_and_tensor("test_images", [
//["traindata/signs/example/a_fire.png", "fire"],
//["traindata/signs/example/b_mandatory.png", "mandatory"],
//["traindata/signs/example/c_prohibition.png", "prohibition"],
//["traindata/signs/example/d_rescue.png", "rescue"],
//["traindata/signs/example/e_warning.png", "warning"],
["traindata/signs/warning/120px-D-W028_Warnung_vor_Rutschgefahr.svg.png", "warning"],
["traindata/signs/warning/120px-Laser-symbol-text-bn.svg.png", "warning"],
["traindata/signs/prohibition/120px-DIN_4844-2_D-P022.svg.png", "prohibition"],
["traindata/signs/prohibition/120px-DIN_4844-2_D-P006.svg.png", "prohibition"],
["traindata/signs/fire/116px-Fire_Class_B.svg.png", "fire"],
["traindata/signs/fire/120px-F001.svg.png", "fire"],
["traindata/signs/rescue/120px-E003.svg.png", "rescue"],
["traindata/signs/rescue/120px-E004.svg.png", "rescue"],
//["traindata/signs/mandatory/120px-DIN_4844-2_D-M003.svg.png", "mandatory"],
//["traindata/signs/mandatory/120px-DIN_4844-2_D-M009.svg.png", "mandatory"]
]);
if(loaded_data) {
asanai.visualize_train();
var history = await asanai.fit(loaded_data.x, loaded_data.y, {epochs: 100, batchSize: 20, shuffle: true}, {'div': 'plotly_history'});
if(history) {
console.log("history:", history);
} else {
console.error("Training failed");
}
await asanai.dispose(loaded_data.x);
await asanai.dispose(loaded_data.y);
} else {
console.warn(`loaded_data was undefined! Something went wrong using asanai.load_image_urls_to_div_and_tensor`);
}
}
function uniqueArray1( ar ) {
var j = {};
ar.forEach( function(v) {
j[v+ '::' + typeof v] = v;
});
return Object.keys(j).map(function(v){
return j[v];
});
}
async function load_exhib_data_and_train () {
var _kernel_initializer = "leCunNormal";
var _bias_initializer = "leCunNormal";
asanai.set_validation_split(0.1);
var new_model_struct = [
{conv2d: {filters: 2, activation: "tanh", kernelInitializer: _kernel_initializer, biasInitializer: _bias_initializer, kernelSize: [3, 3], inputShape: [40, 40, 3] }},
{conv2d: {filters: 2, activation: "tanh", kernelInitializer: _kernel_initializer, biasInitializer: _bias_initializer, kernelSize: [3, 3] }},
{maxPooling2d: {poolSize: [3, 3] }},
{conv2d: {filters: 2, activation: "tanh", kernelInitializer: _kernel_initializer, biasInitializer: _bias_initializer, kernelSize: [3, 3] }},
{maxPooling2d: {poolSize: [3, 3] }},
{flatten: {}},
{dense: {units: 5, activation: "tanh", kernelInitializer: _kernel_initializer, biasInitializer: _bias_initializer}},
{dense: {units: 3, activation: "softmax", kernelInitializer: _kernel_initializer, biasInitializer: _bias_initializer}}
];
asanai.create_model_from_model_data(new_model_struct, { optimizer: "adam", loss: "categoricalCrossentropy", "learningRate": 0.025 });
await asanai.predict_image("exhib_example_a", "test_image_prediction_exhib_a", true, true);
await asanai.predict_image("exhib_example_b", "test_image_prediction_exhib_b", true, true);
await asanai.predict_image("exhib_example_c", "test_image_prediction_exhib_c", true, true);
var exhib_data = [];
var __categories = ["apple", "banana", "orange"];
//var __max_nr = 94; // 94, obwohl 95 bilder da sind, um jeweils eines pro kategorie (nr 95) aus dem training auszunehmen und manuell zu predicten
var __max_nr = 10; // obwohl 95 bilder da sind, um jeweils eines pro kategorie (nr 95) aus dem training auszunehmen und manuell zu predicten
for (var k = 0; k < __categories.length; k++) {
var _cat = __categories[k];
for (var l = 1; l <= __max_nr; l++) {
var this_path = `class_test_images/${_cat}/${_cat}_${l}.jpg`
exhib_data.push([this_path, _cat])
}
}
var loaded_data = await asanai.load_image_urls_to_div_and_tensor("test_images", exhib_data);
try {
console.log("loaded data unique and flattened: ", uniqueArray1(loaded_data.x.arraySync().flat().flat().flat()))
} catch (e) {
console.error(e)
}
if(loaded_data) {
asanai.visualize_train();
var history = await asanai.fit(loaded_data.x, loaded_data.y, {epochs: 2, batchSize: 40, shuffle: true}, {'div': 'plotly_history'}, {"onEpochEnd": function () { console.log("epoch end")} });
// async fit (_x, _y, args={}, _plotly_data={}, _callbacks={}) {
if(history) {
console.log("history:", history);
} else {
console.error("Training failed");
}
await asanai.dispose(loaded_data.x);
await asanai.dispose(loaded_data.y);
} else {
console.warn(`loaded_data was undefined! Something went wrong using asanai.load_image_urls_to_div_and_tensor`);
}
}
function maximally_activate_all_neurons () {
var model = asanai.get_model();
var layers = model.layers;
for (var i = 0; i < layers.length; i++) {
asanai.draw_maximally_activated_layer(i);
}
}
</script>
</body>
</html>