able to see images

annotation_gui.py

@@ -38,18 +38,35 @@ except ImportError:
     DEFAULT_MODEL_SIZE = "small"
 
 
-# Gradio 6 sanitizes <script> tags inside gr.HTML content, so any canvas drawing code
-# must live in the component's supported js_on_load hook.
+# Gradio 6 sanitizes <script> tags inside gr.HTML content. Also, js_on_load only
+# runs when the component is first mounted, not when its HTML updates. We
+# therefore install a global initializer (via demo.launch(js=...)) and have
+# js_on_load call into it when available.
 CANVAS_JS_ON_LOAD = r"""
 (() => {
-    const root = element;
-    if (!root) return;
+    if (window.__initAnnotationCanvas) {
+        window.__initAnnotationCanvas(element);
+    }
+})();
+"""
 
+CANVAS_GLOBAL_JS = r"""
+(() => {
+    function init(root) {
+        if (!root) return;
         const canvas = root.querySelector('#annotation-canvas');
         const imgEl = root.querySelector('#annotation-img');
         const initialBoxesEl = root.querySelector('#annotation-initial-boxes');
         if (!canvas || !imgEl || !initialBoxesEl) return;
 
+        // Ensure we don't double-bind if Gradio reuses the DOM node.
+        if (canvas.dataset.bound === '1') {
+            // Still redraw in case boxes were updated.
+            if (canvas.__redraw) canvas.__redraw();
+            return;
+        }
+        canvas.dataset.bound = '1';
+
         const ctx = canvas.getContext('2d');
         const displayWidth = canvas.width;
         const displayHeight = canvas.height;
@@ -116,6 +133,7 @@ CANVAS_JS_ON_LOAD = r"""
                 ctx.setLineDash([]);
             }
         }
+        canvas.__redraw = redraw;
 
         function getCornerAt(x, y) {
             const handleSize = 6;
@@ -141,24 +159,19 @@ CANVAS_JS_ON_LOAD = r"""
             return null;
         }
 
-    // Ensure we don't double-bind if Gradio reuses the DOM node.
-    if (canvas.dataset.bound === '1') {
-        redraw();
-        return;
-    }
-    canvas.dataset.bound = '1';
-
-    // If the <img> fails to load, draw a message on the canvas.
-    imgEl.addEventListener('error', () => {
+        imgEl.addEventListener(
+            'error',
+            () => {
                 ctx.clearRect(0, 0, displayWidth, displayHeight);
                 ctx.fillStyle = '#ffcccc';
                 ctx.fillRect(0, 0, displayWidth, displayHeight);
                 ctx.fillStyle = 'black';
                 ctx.font = '16px Arial';
                 ctx.fillText('Image failed to load', 10, 30);
-    }, { once: true });
+            },
+            { once: true }
+        );
 
-    // Initial draw
         redraw();
 
         canvas.addEventListener('mousedown', (e) => {
@@ -240,6 +253,20 @@ CANVAS_JS_ON_LOAD = r"""
             dragStart = null;
             canvas.style.cursor = 'crosshair';
         });
+    }
+
+    window.__initAnnotationCanvas = init;
+
+    function scan() {
+        document.querySelectorAll('[data-annotation-root="1"]').forEach((root) => init(root));
+    }
+
+    const obs = new MutationObserver(() => scan());
+    obs.observe(document.documentElement, { childList: true, subtree: true });
+    window.addEventListener('load', () => scan());
+    setTimeout(() => scan(), 0);
+    setTimeout(() => scan(), 250);
+    setTimeout(() => scan(), 1000);
 })();
 """
 
@@ -642,7 +669,7 @@ class AnnotationApp:
         <div style="display: inline-block; border: 1px solid #ccc; padding: 5px;">
             <div style="font-size: 12px; color: #666; margin-bottom: 4px;">Canvas Size: {display_width}x{display_height}</div>
             <textarea id="annotation-initial-boxes" style="display:none;">{boxes_escaped}</textarea>
-            <div style="position: relative; width: {display_width}px; height: {display_height}px;">
+            <div data-annotation-root="1" style="position: relative; width: {display_width}px; height: {display_height}px;">
                 <img id="annotation-img" src="data:image/png;base64,{img_base64}"
                      style="position:absolute; left:0; top:0; width:{display_width}px; height:{display_height}px;" />
                 <canvas id="annotation-canvas" width="{display_width}" height="{display_height}"
@@ -1650,6 +1677,7 @@ def main():
     demo.launch(
         server_name="0.0.0.0",
         server_port=args.port,
+        js=CANVAS_GLOBAL_JS,
         share=False
     )