-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
142 lines (122 loc) · 4.55 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
129
130
131
132
133
134
135
136
137
138
139
140
141
142
<!DOCTYPE html>
<html>
<head>
<title>MNIST</title>
<script src="https://cdn.jsdelivr.net/npm/onnxjs/dist/onnx.min.js"></script>
</head>
<body>
<style>
body {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
}
#canvas {
background-color: black;
}
#recognized-image-container {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 10px;
}
h1 {
text-align: center;
}
div {
margin-top: 20px;
}
</style>
<h1>Number Recognition with MNIST Model:</h1>
<canvas id="canvas" width="280" height="280" style="border: 10px solid #ffff;"></canvas>
<div>
<button onclick="recognizeNumber()">Recognize</button>
<button onclick="clearCanvas()">Clear Canvas</button>
</div>
<div>
<input id="result" type="text" readonly>
</div>
<div>
<h3>Recognized image :</h3>
<img id="image" src="#" alt="Recognized Image" style="display: none;">
</div>
<script>
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
let isDrawing = false;
function draw(event) {
if (isDrawing) {
ctx.beginPath();
ctx.fillStyle = 'white';
ctx.arc(event.offsetX, event.offsetY, 5, 0, 2 * Math.PI);
ctx.fill();
}
}
function preprocessCanvas() {
const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
const { data, width, height } = imageData;
const inputData = new Float32Array(28 * 28);
const smallCanvas = document.createElement('canvas');
const smallCtx = smallCanvas.getContext('2d');
smallCanvas.width = 28;
smallCanvas.height = 28;
smallCtx.fillStyle = 'black';
smallCtx.fillRect(0, 0, smallCanvas.width, smallCanvas.height);
smallCtx.drawImage(canvas, 0, 0, 28, 28);
const smallImageData = smallCtx.getImageData(0, 0, 28, 28).data;
// Update the image element with the current canvas data
const imgData = smallCanvas.toDataURL();
const imgElement = document.getElementById('image');
imgElement.src = imgData;
imgElement.style.display = 'block';
// Clear the canvas before extracting the image data
ctx.clearRect(0, 0, canvas.width, canvas.height);
for (let i = 0; i < 28; i++) {
for (let j = 0; j < 28; j++) {
let grayscaleValue = smallImageData[4 * (i * 28 + j)]/ 255;
inputData[i * 28 + j] = ((grayscaleValue - 0.1307)/0.3081);
}
}
return new onnx.Tensor(inputData, 'float32', [1, 1, 28, 28]);
}
function recognizeNumber() {
const session = new onnx.InferenceSession();
const url = 'mnist.onnx';
session.loadModel(url).then(() => {
const input = preprocessCanvas();
console.log(input)
session.run([input]).then((output) => {
const prediction = output.values().next().value.data;
console.log(prediction)
const maxPrediction = Math.max(...prediction);
const predictedNumber = prediction.indexOf(maxPrediction);
document.getElementById('result').value = predictedNumber;
}).catch((err) => {
console.error('Error during inference:', err);
});
}).catch((err) => {
console.error('Error loading the model:', err);
});
}
function clearCanvas() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
document.getElementById('result').value = '';
const imgElement = document.getElementById('image');
imgElement.style.display = 'none';
}
canvas.addEventListener('mousedown', (event) => {
isDrawing = true;
draw(event);
});
canvas.addEventListener('mouseup', () => {
isDrawing = false;
});
canvas.addEventListener('mousemove', (event) => {
draw(event);
});
</script>
</body>
</html>