This repository has been archived by the owner on Aug 22, 2023. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
72 lines (67 loc) · 4.27 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
<!DOCTYPE html>
<html lang="en"><head>
<title>DrawAchaR (based on TensorFlow.js + MobileNet + KNNClassifier)</title>
<meta charset="utf-8">
<!-- <script src="https://unpkg.com/@tensorflow/tfjs@3.15.0/dist/tf.min.js"></script> -->
<script src="lib/tf.min.js"></script>
<script src="lib/mobilenet.min.js"></script>
<script src="lib/knn-classifier.min.js"></script>
<link rel="stylesheet" href="index.css" />
<link rel="icon" href="icon/logo/icon-16.png">
</head>
<body>
<div id="loadingScreen">
<div id="loadingSPEEEEEEN">ඞඞඞඞඞ</div>
<span style="display: inline;">
<b>DʀᴀᴡAᴄʜᴀR · </b><b id="loadingLabel">Waiting for index.js...</b>
</span>
</div>
<header id="modeSwitchPanel">
<button id="filemanTogglerBtn" title="Main Menu"><img src="icon/logo/icon.svg"></button>
<label id="appModeSwitcherHandler" title="Recognition/Training Mode Switcher Tip: right click to show both!"><input type="checkbox" id="appModeSwitcher" style="display: none;">
<label id="appModeSwitcherBtn" for="appModeSwitcher" style="order: 2;">
-- А я-таки уверен, что нужно пеликаном быть!
--- Пеликаны смертны...
-- Люди тоже.
</label>
<label for="appModeSwitcher" style="order: 1; margin-top: -1px;">Recognition</label>
<label for="appModeSwitcher" style="order: 3; margin-top: -1px;">Training</label>
</label><label id="debugTogglerBtn" title="Debug Info"><input type="checkbox" id="debugToggler" style="display: none;"><img src="icon/debug.svg"></label>
</header>
<aside id="fileman" style="transform: translateY(-115%);">
<button id="filemanImport"><img src="icon/import.svg">Import Classifier Data...</button>
<button id="filemanExport"><img src="icon/export.svg">Export Classifier Data...</button>
<button id="filemanWipe"><img src="icon/wipe.svg">Wipe ALL Data</button>
<a id="filemanAbout" href="https://github.com/1280px/DrawAchaR" title="by 1280px, 2022. See the GitHub page for more information.">DʀᴀᴡAᴄʜᴀR TFJS 1.30 [WIP]</a>
</aside>
<main id="app">
<section id="drawingPad">
<canvas width="224" height="224" id="canvas"></canvas><button id="predictBtn" title="Predict" disabled><img src="icon/confirm.svg"></button><button id="clearDrawingPadBtn" title="Clear Canvas Tip: right-click on the canvas to quickly clear it"><img src="icon/clear.svg"></button>
</section>
<section id="recognitionMode">
<div class="topBar"><label title="When enabled, predicts the doodle automatically after every new stroke on the canvas."><input type="checkbox" id="autopreditionToggler">Auto-predict</label><label title="When enabled, right-clicking on a symbol category adds the doodle to it automatically."><input type="checkbox" id="autotrainToggler">Auto-train</label></div>
<div id="resman">
<em>Draw a character using your mouse.</em>
</div>
<div class="bottomBar">
<input type="text" id="clipboardField" placeholder="LMB to add, RMB to quick copy"><button id="clipboardCopyBtn" title="Copy All (clears the field)"><img src="icon/copy-all.svg"></button>
</div>
</section>
<section id="trainingMode">
<div class="topBar"> Pick an example you want to train...</div>
<div id="typeman">
<em>Oh no! Unknown error, no examples loaded.</em>
</div>
<div class="bottomBar">
<input type="text" id="addTypeInput" placeholder="...or add a new one!" disabled><button id="addTypeBtn" title="Add to a New Category" disabled><img src="icon/add.svg"></button>
</div>
</section>
</main>
<footer id="debug">
<b>==== debug info ====</b>
<span>On-canvas mouse coords: <b id="debugCoords">(none)</b></span>
<span>Current <abbr title="Formula: (2 + (cSum / cLen^(√2))">KNN Coefficient</abbr>: <b id="debugKNNC">(initial value)</b><br> </span>
<span>Last saved: <b id="debugLastSaved">(unknown)</b></span>
</footer>
<script src="index.js"></script>
</body></html>