65 lines
1.9 KiB
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>
|