Hugging Face's logo

Spaces:
carlfeynman
/
mnist
Runtime error

App Files Community
carlfeynman commited on
Commit
0faaab6
•
1 Parent(s): 5c31853

html updated

Browse files
Files changed (1) hide show
  1. index.html +89 -16
index.html CHANGED
@@ -1,25 +1,98 @@
1
  <!DOCTYPE html>
2
- <html>
3
  <head>
4
- <title>MNIST Classifier</title>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
5
  </head>
6
  <body>
7
- <h1>MNIST Digit Classifier</h1>
8
- <p>Draw a digit and click "Classify" to identify it.</p>
9
-
10
- <!-- Canvas for drawing -->
11
- <canvas id="canvas" width="200" height="200" style="border: 1px solid black;"></canvas>
12
-
13
- <!-- Classify button -->
14
- <button onclick="classifyDigit()">Classify</button>
15
-
16
- <!-- Result display -->
17
- <p id="result">Classification result: </p>
18
-
19
  <script>
20
- // JavaScript code for drawing and classification will go here
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
21
 
22
- // You would need to add JavaScript code to handle drawing and classification
 
 
23
  </script>
24
  </body>
25
  </html>
 
1
  <!DOCTYPE html>
2
+ <html lang="en">
3
  <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Whiteboard</title>
7
+ <style>
8
+ #whiteboard {
9
+ border: 3px solid black;
10
+ border-radius: 6px;
11
+ background-color: #FFFFFF;
12
+ }
13
+ #capture-button {
14
+ background-color: #3F52D9;
15
+ color: white;
16
+ border: none;
17
+ padding: 10px 20px;
18
+ cursor: pointer;
19
+ font-size: 16px;
20
+ border-radius: 3px;
21
+ margin-top: 10px;
22
+ width: 190px;
23
+ margin-right: 20px;
24
+ }
25
+ #clear-button {
26
+ background-color: #FF0000;
27
+ color: black;
28
+ border: none;
29
+ padding: 10px 20px;
30
+ cursor: pointer;
31
+ font-size: 16px;
32
+ border-radius: 3px;
33
+ margin-top: 10px;
34
+ width: 190px;
35
+ }
36
+ #container {
37
+ display: flex;
38
+ flex-direction: column;
39
+ align-items: center;
40
+ justify-content: center;
41
+ }
42
+ #btn-container {
43
+ display: flex;
44
+ flex-direction: row;
45
+ align-items: center;
46
+ }
47
+ </style>
48
  </head>
49
  <body>
50
+ <div id='container'>
51
+ <canvas id="whiteboard" width="400" height="200"></canvas>
52
+ <div id='btn-container'>
53
+ <button id="capture-button">Predict</button>
54
+ <button id="clear-button">Clear</button>
55
+ </div>
56
+ </div>
 
 
 
 
 
57
  <script>
58
+ var canvas = document.getElementById('whiteboard');
59
+ var context = canvas.getContext('2d');
60
+ var drawing = false;
61
+
62
+ canvas.addEventListener('mousedown', function (e) {
63
+ drawing = true;
64
+ context.beginPath();
65
+ context.moveTo(e.clientX - canvas.getBoundingClientRect().left, e.clientY - canvas.getBoundingClientRect().top);
66
+ });
67
+
68
+ canvas.addEventListener('mousemove', function (e) {
69
+ if (drawing) {
70
+ context.lineTo(e.clientX - canvas.getBoundingClientRect().left, e.clientY - canvas.getBoundingClientRect().top);
71
+ context.stroke();
72
+ }
73
+ });
74
+
75
+ canvas.addEventListener('mouseup', function () {
76
+ drawing = false;
77
+ });
78
+
79
+ canvas.addEventListener('mouseout', function () {
80
+ drawing = false;
81
+ });
82
+
83
+ var clearButton = document.getElementById('clear-button');
84
+ clearButton.addEventListener('click', function () {
85
+ context.clearRect(0, 0, canvas.width, canvas.height);
86
+ });
87
+
88
+ var captureButton = document.getElementById('capture-button');
89
+ captureButton.addEventListener('click', function () {
90
+ // Convert the canvas content to a data URL (image)
91
+ var imageData = canvas.toDataURL("image/png");
92
 
93
+ // Send the image data to the Jupyter kernel variable
94
+ IPython.notebook.kernel.execute('image_data = "' + imageData + '"');
95
+ });
96
  </script>
97
  </body>
98
  </html>