Fix label errors + predict per stroke

app.py

@@ -196,13 +196,24 @@ except Exception as e:
 
 def predict(strokes_json):
     """Predict from JSON stroke data."""
-    if LOAD_ERROR:
-        return {"error": f"Model load failed: {LOAD_ERROR}"}
-    if MODEL is None:
-        return {"error": "Model not loaded (unknown reason)"}
-    
     try:
-        raw_strokes = json.loads(strokes_json) if isinstance(strokes_json, str) else strokes_json
+        if LOAD_ERROR or MODEL is None:
+            return {a: 0.0 for a in ANIMALS}
+
+        if strokes_json is None:
+            return {a: 0.0 for a in ANIMALS}
+
+        if isinstance(strokes_json, str):
+            s = strokes_json.strip()
+            if not s:
+                return {a: 0.0 for a in ANIMALS}
+            try:
+                raw_strokes = json.loads(s)
+            except Exception:
+                return {a: 0.0 for a in ANIMALS}
+        else:
+            raw_strokes = strokes_json
+
         if not raw_strokes:
             return {a: 0.0 for a in ANIMALS}
         
@@ -226,7 +237,8 @@ def predict(strokes_json):
         
         return {IDX_TO_CLASS.get(i, f"class_{i}"): float(probs[i]) for i in range(len(ANIMALS))}
     except Exception as e:
-        return {"error": str(e)}
+        print(f"Prediction failed: {e}")
+        return {a: 0.0 for a in ANIMALS}
 
 # ============================================================================
 # Custom Canvas HTML
@@ -303,6 +315,14 @@ CANVAS_JS = r"""() => {
         strokes.push([currentStroke.x, currentStroke.y]);
       }
       isDrawing = false;
+      syncToTextbox();
+    };
+
+    const syncToTextbox = () => {
+      const textbox = getTextInput();
+      if (!textbox) return;
+      textbox.value = JSON.stringify(strokes);
+      textbox.dispatchEvent(new Event("input", { bubbles: true }));
     };
 
     canvas.addEventListener("mousedown", (e) => {
@@ -347,20 +367,11 @@ CANVAS_JS = r"""() => {
     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 }));
-      }
+      syncToTextbox();
     });
 
     predictBtn.addEventListener("click", () => {
-      const strokesJson = JSON.stringify(strokes);
-      const textbox = getTextInput();
-      if (textbox) {
-        textbox.value = strokesJson;
-        textbox.dispatchEvent(new Event("input", { bubbles: true }));
-      }
+      syncToTextbox();
       const btn = getGradioPredictButton();
       if (btn) btn.click();
     });