Spaces:
Runtime error
Runtime error
File size: 3,450 Bytes
5c31853 0faaab6 f4b10b3 5c31853 0faaab6 f4b10b3 0faaab6 f4b10b3 0faaab6 f4b10b3 0faaab6 f4b10b3 0faaab6 f4b10b3 0faaab6 f4b10b3 0faaab6 f4b10b3 0faaab6 f4b10b3 0faaab6 5c31853 f4b10b3 5c31853 f4b10b3 0faaab6 5c31853 0faaab6 f4b10b3 0faaab6 f4b10b3 0faaab6 f4b10b3 0faaab6 f4b10b3 0faaab6 f4b10b3 0faaab6 5c31853 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 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Whiteboard</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>
<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 captureButton = document.getElementById('capture-button');
captureButton.addEventListener('click', function () {
// Convert the canvas content to a data URL (image)
var imageData = canvas.toDataURL("image/png");
// Send the image data to the Jupyter kernel variable
IPython.notebook.kernel.execute('image_data = "' + imageData + '"');
});
</script>
</body>
</html> |