-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
115 lines (103 loc) · 3.89 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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Data Viewer</title>
<link rel="stylesheet" href="web/styles.css"/>
</head>
<body>
<h1>Data Viewer</h1>
<div id="inputContainer">
<div id="predictedLabelContainer"></div>
</div>
<div id="chartContainer"></div>
<div id="controlPanel">
<button onClick="toggleInput()">
Toggle Input
</button>
<div id="statistics"></div>
</div>
<div id="container"></div>
<script src="common/js_objects/features.js"></script>
<script src="common/js_objects/training.js"></script>
<script src="common/js_objects/testing.js"></script>
<script src="common/js_objects/minMax.js"></script>
<script src="common/constants.js"></script>
<script src="common/utils.js"></script>
<script src="common/draw.js"></script>
<script src="common/featureFunctions.js"></script>
<script src="common/classifiers/knn.js"></script>
<script src="web/js/display.js"></script>
<script src="web/js/sketchPad.js"></script>
<script src="./web/chart/graphics.js"></script>
<script src="./web/chart/math.js"></script>
<script src="./web/chart/chart.js"></script>
<script>
const {samples,featureNames}=features;
const trainingSamples=training.samples;
const testingSamples=testing.samples;
const k=67;
const kNN=new KNN(trainingSamples,k);
let correctCount=0;
let totalCount=0;
for(const testSample of testingSamples){
testSample.truth=testSample.label;
testSample.label="?";
const {label}=kNN.predict(testSample.point);
testSample.label=label;
testSample.correct=testSample.label==testSample.truth;
totalCount++;
correctCount+=testSample.correct?1:0;
}
statistics.innerHTML="<b>ACCURACY</b><br>"+
correctCount+"/"+totalCount+" ("+
utils.formatPercent(correctCount/totalCount)+
")";
const trainingGroups=utils.groupBy(trainingSamples,"student_id");
for(let student_id in trainingGroups){
const samples=trainingGroups[student_id];
const studentName=samples[0].student_name;
createRow(container,studentName,samples);
}
const subtitle=document.createElement("h2");
subtitle.innerHTML="TESTING";
container.appendChild(subtitle);
const testingGroups=utils.groupBy(testingSamples,"student_id");
for(let student_id in testingGroups){
const samples=testingGroups[student_id];
const studentName=samples[0].student_name;
createRow(container,studentName,samples);
}
const options={
size:500,
axesLabels:featureNames,
styles:utils.styles,
transparency:0.7,
icon:"image",
bg:new Image()
};
options.bg.src=constants.DECISION_BOUNDARY;
graphics.generateImages(utils.styles);
const chart=new Chart(
chartContainer,
trainingSamples,
options,
handleClick
);
const sketchPad=
new SketchPad(inputContainer,onDrawingUpdate);
sketchPad.canvas.style.cssText+=
"outline:10000px solid rgba(0,0,0,0.7);"
toggleInput();
function onDrawingUpdate(paths){
const functions=featureFunctions.inUse.map(f=>f.function);
point=functions.map(f=>f(paths));
utils.normalizePoints([point],minMax);
const {label,nearestSamples}=kNN.predict(point);
predictedLabelContainer.innerHTML=
"Is it a "+label+" ?";
chart.showDynamicPoint(point,label,nearestSamples);
}
</script>
</body>
</html>