MNIST-NN-WebGUI/templates/index.html

65 lines
1.9 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Handwritten Digit Input</title>
<style>
canvas {
border: 1px solid black;
}
</style>
</head>
<body>
<h1>Draw a Handwritten Digit</h1>
<canvas id="canvas" width="200" height="200"></canvas>
<br>
<button id="clear">Clear</button>
<button id="submit">Submit</button>
<script>
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
let drawing = false;
canvas.addEventListener('mousedown', () => {
drawing = true;
});
canvas.addEventListener('mouseup', () => {
drawing = false;
ctx.beginPath();
});
canvas.addEventListener('mousemove', (event) => {
if (!drawing) return;
ctx.lineWidth = 15;
ctx.lineCap = 'round';
ctx.strokeStyle = 'black';
ctx.lineTo(event.clientX - canvas.offsetLeft, event.clientY - canvas.offsetTop);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(event.clientX - canvas.offsetLeft, event.clientY - canvas.offsetTop);
});
document.getElementById('clear').addEventListener('click', () => {
ctx.clearRect(0, 0, canvas.width, canvas.height);
});
document.getElementById('submit').addEventListener('click', () => {
const dataURL = canvas.toDataURL('image/png');
fetch('/predict', {
method: 'POST',
body: JSON.stringify({ image: dataURL }),
headers: { 'Content-Type': 'application/json' }
})
.then(response => response.json())
.then(data => {
alert('Predicted digit: ' + data.prediction);
});
});
</script>
</body>
</html>