Fix canvas: run JS via Blocks

app.py

@@ -237,113 +237,146 @@ CANVAS_HTML = """
     <canvas id="drawing-canvas" width="400" height="400" 
             style="border: 2px solid #333; border-radius: 8px; background: white; cursor: crosshair; touch-action: none;"></canvas>
     <div style="margin-top: 10px;">
-        <button onclick="clearCanvas()" style="padding: 8px 16px; margin-right: 10px; cursor: pointer; border: 1px solid #ccc; border-radius: 4px; background: #fff;">Clear</button>
-        <button onclick="sendStrokes()" style="padding: 8px 16px; background: #4CAF50; color: white; border: none; border-radius: 4px; cursor: pointer;">Predict</button>
+        <button id="clear-canvas-btn" style="padding: 8px 16px; margin-right: 10px; cursor: pointer; border: 1px solid #ccc; border-radius: 4px; background: #fff;">Clear</button>
+        <button id="predict-canvas-btn" style="padding: 8px 16px; background: #4CAF50; color: white; border: none; border-radius: 4px; cursor: pointer;">Predict</button>
     </div>
     <p style="color: #666; font-size: 12px; margin-top: 5px;">Draw an animal, then click Predict</p>
 </div>
+"""
 
-<script>
-(function() {
-    // Wait for DOM
-    setTimeout(() => {
-        const canvas = document.getElementById('drawing-canvas');
-        if (!canvas) {
-            console.error("Canvas not found!");
-            return;
-        }
-        
-        const ctx = canvas.getContext('2d', { willReadFrequently: true });
-        let isDrawing = false;
-        let strokes = [];
-        let currentStroke = {x: [], y: []};
-
-        ctx.strokeStyle = '#000';
-        ctx.lineWidth = 3;
-        ctx.lineCap = 'round';
-        ctx.lineJoin = 'round';
-
-        // Mouse Events
-        canvas.addEventListener('mousedown', (e) => {
-            isDrawing = true;
-            const rect = canvas.getBoundingClientRect();
-            const x = e.clientX - rect.left;
-            const y = e.clientY - rect.top;
-            currentStroke = {x: [x], y: [y]};
-            ctx.beginPath();
-            ctx.moveTo(x, y);
-        });
-
-        canvas.addEventListener('mousemove', (e) => {
-            if (!isDrawing) return;
-            const rect = canvas.getBoundingClientRect();
-            const x = e.clientX - rect.left;
-            const y = e.clientY - rect.top;
-            currentStroke.x.push(x);
-            currentStroke.y.push(y);
-            ctx.lineTo(x, y);
-            ctx.stroke();
-        });
-
-        const endStroke = () => {
-            if (isDrawing && currentStroke.x.length > 0) {
-                strokes.push([currentStroke.x, currentStroke.y]);
-            }
-            isDrawing = false;
-        };
-
-        canvas.addEventListener('mouseup', endStroke);
-        canvas.addEventListener('mouseleave', endStroke);
-
-        // Touch Events
-        canvas.addEventListener('touchstart', (e) => {
-            e.preventDefault();
-            const touch = e.touches[0];
-            const rect = canvas.getBoundingClientRect();
-            const x = touch.clientX - rect.left;
-            const y = touch.clientY - rect.top;
-            isDrawing = true;
-            currentStroke = {x: [x], y: [y]};
-            ctx.beginPath();
-            ctx.moveTo(x, y);
-        }, { passive: false });
-
-        canvas.addEventListener('touchmove', (e) => {
-            e.preventDefault();
-            if (!isDrawing) return;
-            const touch = e.touches[0];
-            const rect = canvas.getBoundingClientRect();
-            const x = touch.clientX - rect.left;
-            const y = touch.clientY - rect.top;
-            currentStroke.x.push(x);
-            currentStroke.y.push(y);
-            ctx.lineTo(x, y);
-            ctx.stroke();
-        }, { passive: false });
-
-        canvas.addEventListener('touchend', endStroke);
-
-        // Global functions for buttons
-        window.clearCanvas = function() {
-            ctx.clearRect(0, 0, canvas.width, canvas.height);
-            strokes = [];
-        };
-
-        window.sendStrokes = function() {
-            const strokesJson = JSON.stringify(strokes);
-            const textbox = document.querySelector('#strokes-input textarea');
-            if (textbox) {
-                textbox.value = strokesJson;
-                textbox.dispatchEvent(new Event('input', { bubbles: true }));
-            }
-            const btn = document.querySelector('#predict-btn');
-            if (btn) btn.click();
-        };
-        
-        console.log("Canvas initialized!");
-    }, 500); // Small delay to ensure render
-})();
-</script>
+CANVAS_JS = r"""() => {
+  const CANVAS_ID = "drawing-canvas";
+  const CLEAR_ID = "clear-canvas-btn";
+  const PREDICT_ID = "predict-canvas-btn";
+
+  const getTextInput = () =>
+    document.querySelector("#strokes-input textarea, #strokes-input input");
+
+  const getGradioPredictButton = () =>
+    document.querySelector("#predict-btn button") ||
+    document.querySelector("button#predict-btn") ||
+    document.querySelector("#predict-btn");
+
+  const initCanvas = () => {
+    const canvas = document.getElementById(CANVAS_ID);
+    const clearBtn = document.getElementById(CLEAR_ID);
+    const predictBtn = document.getElementById(PREDICT_ID);
+    if (!canvas || !clearBtn || !predictBtn) return false;
+    if (canvas.dataset.bound === "1") return true;
+
+    const ctx = canvas.getContext("2d", { willReadFrequently: true });
+    if (!ctx) return false;
+
+    canvas.dataset.bound = "1";
+
+    let isDrawing = false;
+    let strokes = [];
+    let currentStroke = { x: [], y: [] };
+
+    ctx.strokeStyle = "#000";
+    ctx.lineWidth = 3;
+    ctx.lineCap = "round";
+    ctx.lineJoin = "round";
+
+    const getPos = (clientX, clientY) => {
+      const rect = canvas.getBoundingClientRect();
+      return [clientX - rect.left, clientY - rect.top];
+    };
+
+    const startStroke = (x, y) => {
+      isDrawing = true;
+      currentStroke = { x: [x], y: [y] };
+      ctx.beginPath();
+      ctx.moveTo(x, y);
+    };
+
+    const moveStroke = (x, y) => {
+      if (!isDrawing) return;
+      currentStroke.x.push(x);
+      currentStroke.y.push(y);
+      ctx.lineTo(x, y);
+      ctx.stroke();
+    };
+
+    const endStroke = () => {
+      if (isDrawing && currentStroke.x.length > 0) {
+        strokes.push([currentStroke.x, currentStroke.y]);
+      }
+      isDrawing = false;
+    };
+
+    canvas.addEventListener("mousedown", (e) => {
+      const [x, y] = getPos(e.clientX, e.clientY);
+      startStroke(x, y);
+    });
+
+    canvas.addEventListener("mousemove", (e) => {
+      const [x, y] = getPos(e.clientX, e.clientY);
+      moveStroke(x, y);
+    });
+
+    canvas.addEventListener("mouseup", endStroke);
+    canvas.addEventListener("mouseleave", endStroke);
+
+    canvas.addEventListener(
+      "touchstart",
+      (e) => {
+        e.preventDefault();
+        const touch = e.touches[0];
+        const [x, y] = getPos(touch.clientX, touch.clientY);
+        startStroke(x, y);
+      },
+      { passive: false }
+    );
+
+    canvas.addEventListener(
+      "touchmove",
+      (e) => {
+        e.preventDefault();
+        if (!isDrawing) return;
+        const touch = e.touches[0];
+        const [x, y] = getPos(touch.clientX, touch.clientY);
+        moveStroke(x, y);
+      },
+      { passive: false }
+    );
+
+    canvas.addEventListener("touchend", endStroke);
+    canvas.addEventListener("touchcancel", endStroke);
+
+    clearBtn.addEventListener("click", () => {
+      ctx.clearRect(0, 0, canvas.width, canvas.height);
+      strokes = [];
+      const textbox = getTextInput();
+      if (textbox) {
+        textbox.value = "";
+        textbox.dispatchEvent(new Event("input", { bubbles: true }));
+      }
+    });
+
+    predictBtn.addEventListener("click", () => {
+      const strokesJson = JSON.stringify(strokes);
+      const textbox = getTextInput();
+      if (textbox) {
+        textbox.value = strokesJson;
+        textbox.dispatchEvent(new Event("input", { bubbles: true }));
+      }
+      const btn = getGradioPredictButton();
+      if (btn) btn.click();
+    });
+
+    return true;
+  };
+
+  const startedAt = Date.now();
+  const maxWaitMs = 10000;
+  const tick = () => {
+    if (initCanvas()) return;
+    if (Date.now() - startedAt > maxWaitMs) return;
+    requestAnimationFrame(tick);
+  };
+  tick();
+}
 """
 
 # ============================================================================
@@ -356,7 +389,7 @@ CSS = """
 }
 """
 
-with gr.Blocks(title="Animal Doodle Classifier", theme=gr.themes.Soft(), css=CSS) as app:
+with gr.Blocks(title="Animal Doodle Classifier", theme=gr.themes.Soft(), css=CSS, js=CANVAS_JS) as app:
     gr.Markdown("# 🎨 Animal Doodle Classifier")
     gr.Markdown("Draw an animal and click **Predict**! Supported: butterfly, cow, elephant, giraffe, monkey, octopus, scorpion, shark, snake, spider")
     
@@ -364,7 +397,7 @@ with gr.Blocks(title="Animal Doodle Classifier", theme=gr.themes.Soft(), css=CSS
         with gr.Column(scale=1):
             canvas = gr.HTML(CANVAS_HTML)
             # visible=True so they are in DOM, hidden by CSS
-            strokes_input = gr.Textbox(label="Strokes", elem_id="strokes-input", visible=True)
+            strokes_input = gr.Textbox(label="Strokes", elem_id="strokes-input", visible=True, lines=3)
             predict_btn = gr.Button("Predict", elem_id="predict-btn", visible=True)
         
         with gr.Column(scale=1):