-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
128 lines (113 loc) · 3.78 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
<html lang="en">
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<title>Quick Draw</title>
<link href="css/normalize.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Lato&family=Open+Sans&family=Roboto&display=swap" rel="stylesheet">
<link href="favicon.ico" rel="icon" type="image/ico">
</head>
<body>
<header>
<h1>Quick Draw</h1>
</header>
<div id="content">
<div id="top-info">
<div id="settings">
<h2>
Instellingen
</h2>
<div id="setting-list">
<div class="setting">
<label for="layers">Deep Layers</label><input id="layers" type="text" value="[5]">
</div>
<div class="setting">
<label for="errorThresh">Error Threshold</label><input id="errorThresh" type="text" value="0.005">
</div>
<div class="setting">
<label for="iterations">Iteraties</label><input id="iterations" type="text" value="1000">
</div>
<div class="setting">
<label for="gpu">Videokaart gebruiken</label><input id="gpu" type="checkbox" checked>
</div>
</div>
<div id="buttons">
<button id="train-button" class="big-button" onclick="emote.train()" type="button">Train</button>
<button id="test-button" class="big-button" onclick="emote.test()" type="button">Test</button>
<button id="show-network-button" class="big-button" onclick="emote.showSVG()" type="button">Toon Net</button>
</div>
</div>
<div id="output-block">
<h2>
Output
</h2>
<div id="stats">
<label>
<!-- <textarea id="output-stats"></textarea>-->
</label>
</div>
<div id="output">
<!-- <label><textarea id="output-area"></textarea></label>-->
</div>
<div id="svg-output">
</div>
</div>
</div>
<div id="data-input">
<div class="input-column">
<h2>
Train
</h2>
<img id="train-image" alt="Datset Image" src="img/empty.png">
<div id="train-files-drop" class="drop-area">
<input id="train-files" class="drop-input" type="file" multiple="">
<div class="drop-text">
Sleep hier je train data naartoe<br>Of klik op dit veld om ze te selecteren.
</div>
</div>
<label for="train-data">Train Data </label><textarea id="train-data" readonly spellcheck="false"></textarea><br>
</div>
<div class="input-column">
<h2>
Test
</h2>
<img id="test-image" alt="Datset Image" src="img/empty.png">
<div id="test-files-drop" class="drop-area">
<input id="test-files" class="drop-input" type="file">
<div class="drop-text">
Sleep hier je test data naartoe<br>Of klik op dit veld om ze te selecteren.
</div>
</div>
<label for="test-data">Test Data</label><textarea id="test-data" readonly spellcheck="false"></textarea>
<div id="drawing-board">
<h3>
Tekenen
</h3>
<div id="drawing-items">
<canvas id="drawing-canvas"></canvas>
<div class="actions">
<div class="info">
Teken je eigen test plaatje! <br>
Linker muisknop: Tekenen<br>
Rechter muisknop: Wissen<br>
Als je tevreden bent kan je het plaatje omzetten naar test data, door op "Inladen" te klikken!
</div>
<div class="buttons">
<button onclick="emote.clearBoard()" type="button">Wissen</button>
<button onclick="emote.processBoardData()" type="button">Inladen</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<footer>
Deze website is gemaakt voor de module Cognitive Computing, ten behoeve van SLO.
</footer>
</body>
<script src="js/brain-browser.js"></script>
<script src="js/index.js"></script>
</html>