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
/
index.html
117 lines (109 loc) · 6.08 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
<!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/[email protected]/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">
<img id="loadingSPEEEEEEN" src="icon/hourglass.svg">
<b id="loadingLabel">Waiting for init.js...</b>
</div>
<header>
<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;" checked>
<label id="appModeSwitcherBtn" for="appModeSwitcher">
-- А я-таки уверен, что нужно пеликаном быть!
--- Пеликаны смертны...
-- Люди тоже.
</label>
<label for="appModeSwitcher" style="order: 1; margin-top: -1px;">Recognition</label>
<label for="appModeSwitcher" style="order: 3; margin-top: -1px;">Training</label>
</label>
<button id="viewAsGridBtn" title="View as Grid"><img src="icon/view-grid.svg"></button>
<button id="viewAsListBtn" title="View as List" style="display: none;"><img src="icon/view-list.svg"></button>
</header>
<aside id="fileman" style="transform: translateY(-115%);">
<div style="display: none;">
<p>Classifier data profiles:</p>
<div id="multisetHandler">
<button title="Profile 1" class="empty selected">1</button>
<button title="Profile 2" class="empty">2</button>
<button title="Profile 3" class="empty">3</button>
<button title="Profile 4" class="empty">4</button>
</div>
<hr>
</div>
<label id="filemanImportHandler">
<input id="filemanImportBtn" type="file" style="display: none;">
<img src="icon/import.svg">Import Classifier Data...</button>
</label>
<button id="filemanExport"><img src="icon/export.svg">Export Classifier Data...</button>
<button id="filemanToggleDebug"><img src="icon/debug.svg">Toggle Debug Info</button>
<button id="filemanWipe"><img src="icon/wipe.svg">Wipe Classifier Data</button>
<hr>
<a href="https://github.com/1280px/DrawAchaR" target="_blank" title="by 1280px, 2020–2023. Visit this project's GitHub repo for more information.">DʀᴀᴡAᴄʜᴀR TFJS 1.30</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, selecting a symbol category adds the doodle as example to its class automatically.">
<input type="checkbox" id="autotrainToggler">Auto-train
</label>
</div>
<div id="resman" class="viewAsGrid">
<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" style="display: none;">
<div class="topBar">
<span id="typemanTooltip"> Pick a class to add example...</span>
<button id="removalModeTogglerBtn" title="Toggle Removal Mode"><img src="icon/remove.svg"></button>
</div>
<div id="typeman" class="viewAsGrid">
<em>Examples aren't loaded yet, please wait...</em>
</div>
<div class="bottomBar">
<input type="text" id="addTypeInput" placeholder="...or create 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" style="display: none;">
<b>==== debug info ====</b>
<span>On-canvas mouse position: <b id="debugCoords">(none)</b></span>
<span>Current <abbr title="Formula: 2 + (cSum / cLen^(√2))">KNN Coefficient</abbr>: <b id="debugKNNC">(initial)</b></span>
<span>Latest classification time: <b id="debugBenchmark">(none)</b> ms</span>
<span>Set last saved: <b id="debugLastSaved">(unknown)</b></span>
<span><br>See debug logging in DevTools for more information.</span>
</footer>
<script defer src="js/canvas.js"></script>
<script defer src="js/classifier.js"></script>
<script defer src="js/classifierLoadSave.js"></script>
<script defer src="js/configs.js"></script>
<script defer src="js/configsLoadSave.js"></script>
<script defer src="js/resman.js"></script>
<script defer src="js/typeman.js"></script>
<script defer src="js/UI_canvas.js"></script>
<script defer src="js/UI_fileman.js"></script>
<script defer src="js/UI_header.js"></script>
<script defer src="js/UI_resman.js"></script>
<script defer src="js/UI_typeman.js"></script>
<script defer src="js/init.js"></script>
</body></html>