Spaces:
Runtime error
Runtime error
<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('YOUR_API_ENDPOINT', { | |
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> |