Spaces:
Sleeping
Sleeping
vishalbakshi
commited on
deploy at 2024-08-24 20:55:53.128947
Browse files- digitDrawer.js +77 -0
- main.py +15 -9
- requirements.txt +0 -2
digitDrawer.js
ADDED
@@ -0,0 +1,77 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
const canvas = document.createElement('canvas');
|
2 |
+
canvas.width = 280;
|
3 |
+
canvas.height = 280;
|
4 |
+
canvas.style.border = '1px solid black';
|
5 |
+
document.getElementById('canvasContainer').appendChild(canvas);
|
6 |
+
const ctx = canvas.getContext('2d');
|
7 |
+
let isDrawing = false;
|
8 |
+
let lastPredictionTime = 0;
|
9 |
+
|
10 |
+
function initializeGrid() {
|
11 |
+
ctx.strokeStyle = '#ddd';
|
12 |
+
for (let i = 0; i <= 28; i++) {
|
13 |
+
ctx.beginPath();
|
14 |
+
ctx.moveTo(i * 10, 0);
|
15 |
+
ctx.lineTo(i * 10, 280);
|
16 |
+
ctx.stroke();
|
17 |
+
ctx.beginPath();
|
18 |
+
ctx.moveTo(0, i * 10);
|
19 |
+
ctx.lineTo(280, i * 10);
|
20 |
+
ctx.stroke();
|
21 |
+
}
|
22 |
+
}
|
23 |
+
|
24 |
+
function startDrawing(e) {
|
25 |
+
isDrawing = true;
|
26 |
+
draw(e);
|
27 |
+
}
|
28 |
+
|
29 |
+
function stopDrawing() {
|
30 |
+
isDrawing = false;
|
31 |
+
ctx.beginPath();
|
32 |
+
}
|
33 |
+
|
34 |
+
function draw(e) {
|
35 |
+
if (!isDrawing) return;
|
36 |
+
ctx.lineWidth = 20;
|
37 |
+
ctx.lineCap = 'round';
|
38 |
+
ctx.strokeStyle = '#000';
|
39 |
+
|
40 |
+
ctx.lineTo(e.clientX - canvas.offsetLeft, e.clientY - canvas.offsetTop);
|
41 |
+
ctx.stroke();
|
42 |
+
ctx.beginPath();
|
43 |
+
ctx.moveTo(e.clientX - canvas.offsetLeft, e.clientY - canvas.offsetTop);
|
44 |
+
|
45 |
+
// Check if it's time for a new prediction
|
46 |
+
const currentTime = Date.now();
|
47 |
+
if (currentTime - lastPredictionTime > 1000) { // 1000ms = 1 second
|
48 |
+
predictDrawing();
|
49 |
+
lastPredictionTime = currentTime;
|
50 |
+
}
|
51 |
+
}
|
52 |
+
|
53 |
+
function predictDrawing() {
|
54 |
+
const imageData = canvas.toDataURL('image/png').split(',')[1];
|
55 |
+
fetch('/predict', {
|
56 |
+
method: 'POST',
|
57 |
+
headers: {'Content-Type': 'application/json'},
|
58 |
+
body: JSON.stringify({image: imageData})
|
59 |
+
})
|
60 |
+
.then(response => response.json())
|
61 |
+
.then(data => {
|
62 |
+
document.getElementById('probability').textContent = `Probability: ${data.probability}`;
|
63 |
+
});
|
64 |
+
}
|
65 |
+
|
66 |
+
canvas.addEventListener('mousedown', startDrawing);
|
67 |
+
canvas.addEventListener('mousemove', draw);
|
68 |
+
canvas.addEventListener('mouseup', stopDrawing);
|
69 |
+
canvas.addEventListener('mouseout', stopDrawing);
|
70 |
+
|
71 |
+
document.getElementById('clearButton').addEventListener('click', () => {
|
72 |
+
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
73 |
+
initializeGrid();
|
74 |
+
document.getElementById('probability').textContent = 'Probability: --';
|
75 |
+
});
|
76 |
+
|
77 |
+
initializeGrid();
|
main.py
CHANGED
@@ -1,16 +1,22 @@
|
|
1 |
from fasthtml_hf import setup_hf_backup
|
2 |
-
|
3 |
-
#from fasthtml import common as fh
|
4 |
#import io
|
5 |
#import base64
|
6 |
|
7 |
-
import fasthtml
|
8 |
-
print(f'fasthtml version: {fasthtml.__version__}')
|
9 |
|
10 |
-
#
|
11 |
|
12 |
-
|
13 |
-
# def get(): return fh.Div(fh.P('Hello World!'))
|
14 |
|
15 |
-
|
16 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
from fasthtml_hf import setup_hf_backup
|
2 |
+
from fasthtml.common import *
|
|
|
3 |
#import io
|
4 |
#import base64
|
5 |
|
|
|
|
|
6 |
|
7 |
+
# https://vishalbakshi-isitadigit-inference.hf.space/predict
|
8 |
|
9 |
+
app = FastHTML()
|
|
|
10 |
|
11 |
+
@app.get("/")
|
12 |
+
def home():
|
13 |
+
return Title("Digit Drawer"), Main(
|
14 |
+
H1("Digit Drawer"),
|
15 |
+
Div(id="canvasContainer"),
|
16 |
+
P("Probability: --", id="probability"),
|
17 |
+
Button("Clear", id="clearButton"),
|
18 |
+
#ScriptX('digitDrawer.js')
|
19 |
+
)
|
20 |
+
|
21 |
+
setup_hf_backup(app)
|
22 |
+
serve(app)
|
requirements.txt
CHANGED
@@ -1,4 +1,2 @@
|
|
1 |
-
fastai==2.7.16
|
2 |
python-fasthtml==0.4.5
|
3 |
fasthtml-hf
|
4 |
-
|
|
|
|
|
1 |
python-fasthtml==0.4.5
|
2 |
fasthtml-hf
|
|