Upload 9 files

README.md

@@ -49,3 +49,6 @@ cat
 ## Important
 
 For production, attach persistent storage to the Space so the dataset and trained model survive rebuilds.
+
+## Startup fix
+The annotation JavaScript is registered at the Gradio Blocks level rather than using the unsupported `js_on_load` argument on `gr.HTML`.

app.py

@@ -168,8 +168,9 @@ def annotation_html(filename):
 
 ANNOTATOR_JS = r"""
 function setupAnythingAnnotator() {
-  const root = element.querySelector(".annotator-root");
+  const root = document.querySelector(".annotator-root:not([data-ann-initialized])");
   if (!root) return;
+  root.dataset.annInitialized = "1";
 
   const canvas = root.querySelector(".ann-canvas");
   const ctx = canvas.getContext("2d");
@@ -367,6 +368,13 @@ function setupAnythingAnnotator() {
 }
 
 setupAnythingAnnotator();
+
+// Gradio replaces the HTML component's DOM when an image is selected.
+// Re-initialize the canvas whenever a new annotator root appears.
+const anythingAnnotatorObserver = new MutationObserver(() => {
+  setupAnythingAnnotator();
+});
+anythingAnnotatorObserver.observe(document.body, { childList: true, subtree: true });
 """
 
 
@@ -675,7 +683,7 @@ def detect(image, threshold):
     return out, json.dumps(response, indent=2)
 
 
-with gr.Blocks(title="Anything Detector") as demo:
+with gr.Blocks(title="Anything Detector", js=ANNOTATOR_JS) as demo:
     gr.Markdown(
         "# 🔍 Anything Detector\n"
         "Train your own object detector for any classes you define. **No YOLO.**"
@@ -742,7 +750,6 @@ This is a native HTML5 canvas — there is no `gradio_image_annotation` package.
                 )
             ),
             elem_id="annotator_html",
-            js_on_load=ANNOTATOR_JS,
         )
 
         # Hidden data channel used by the canvas Save button.