vishalbakshi commited on
Commit
0854d0c
·
verified ·
1 Parent(s): 879ed00

deploy at 2024-08-24 20:55:53.128947

Browse files
Files changed (3) hide show
  1. digitDrawer.js +77 -0
  2. main.py +15 -9
  3. 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
- #from fastai.vision.all import *
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
- # app,rt = fh.fast_app()
11
 
12
- # @rt('/')
13
- # def get(): return fh.Div(fh.P('Hello World!'))
14
 
15
- # setup_hf_backup(app)
16
- # fh.serve()
 
 
 
 
 
 
 
 
 
 
 
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