mnist / index.html
carlfeynman's picture
fastapi api server added
bfc39e7
raw
history blame
4.15 kB
<!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('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>