Spaces:
Runtime error
Runtime error
File size: 4,145 Bytes
5c31853 0faaab6 f4b10b3 5c31853 0faaab6 3d2eb0b 4938f38 f5ea6fc 0faaab6 f4b10b3 0faaab6 f4b10b3 0faaab6 f4b10b3 0faaab6 f4b10b3 0faaab6 f4b10b3 0faaab6 f4b10b3 0faaab6 f4b10b3 0faaab6 f4b10b3 0faaab6 5c31853 f4b10b3 5c31853 f4b10b3 0faaab6 bfc39e7 0faaab6 5c31853 0faaab6 f4b10b3 0faaab6 f4b10b3 0faaab6 f4b10b3 0faaab6 f4b10b3 0faaab6 f4b10b3 0faaab6 bfc39e7 0faaab6 05b5f7a bfc39e7 0faaab6 5c31853 f4b10b3 |
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 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/png" href="favicon.png">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<title>Draw and Predict Handwritten Digits</title>
<style>
body {
font-family: 'Montserrat', sans-serif;
}
#whiteboard {
border: 3px solid #088395;
/* Simple black border */
border-radius: 10px;
/* Rounded corners */
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
/* Subtle shadow effect */
background-color: #088395;
}
#capture-button {
background-color: #071952;
color: white;
border: none;
padding: 10px 20px;
cursor: pointer;
font-size: 16px;
border-radius: 3px;
margin-top: 10px;
width: 190px;
margin-right: 20px;
}
#clear-button {
background-color: #F2F7A1;
color: black;
border: none;
padding: 10px 20px;
cursor: pointer;
font-size: 16px;
border-radius: 3px;
margin-top: 10px;
width: 190px;
}
#container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
#btn-container {
display: flex;
flex-direction: row;
align-items: center;
}
</style>
</head>
<body>
<h3 style="text-align:center;">Draw and Predict Handwritten Digits</h3>
<div id='container'>
<canvas id="whiteboard" width="400" height="200"></canvas>
<div id='btn-container'>
<button id="capture-button">Predict</button>
<button id="clear-button">Clear</button>
</div>
<div id="prediction-result"></div>
</div>
<script>
var canvas = document.getElementById('whiteboard');
var context = canvas.getContext('2d');
var drawing = false;
context.strokeStyle = 'white';
canvas.addEventListener('mousedown', function (e) {
drawing = true;
context.beginPath();
context.moveTo(e.clientX - canvas.getBoundingClientRect().left, e.clientY - canvas.getBoundingClientRect().top);
});
canvas.addEventListener('mousemove', function (e) {
if (drawing) {
context.lineTo(e.clientX - canvas.getBoundingClientRect().left, e.clientY - canvas.getBoundingClientRect().top);
context.stroke();
}
});
canvas.addEventListener('mouseup', function () {
drawing = false;
});
canvas.addEventListener('mouseout', function () {
drawing = false;
});
var clearButton = document.getElementById('clear-button');
clearButton.addEventListener('click', function () {
context.clearRect(0, 0, canvas.width, canvas.height);
});
var predictionResult = document.getElementById('prediction-result');
var captureButton = document.getElementById('capture-button');
captureButton.addEventListener('click', function () {
var imageData = canvas.toDataURL("image/png");
fetch('/predict', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ image: imageData }), // Send the image data as JSON
})
.then(response => response.json())
.then(data => {
predictionResult.textContent = 'Predicted Digit: ' + data.prediction;
})
.catch(error => {
console.error('Error:', error);
predictionResult.textContent = 'Prediction failed.';
});
});
</script>
</body>
</html> |