up

custom_ui.py

@@ -32,12 +32,21 @@ _intro_img = _img_data_uri(f"assets/{INTRO_EMOTION}.png")
 
 BLOCKS_JS = """
 () => {
-  function applyPayload(node) {
-    const p = node.querySelector('[data-ari]');
+  let _lastPayload = null;
+
+  function applyPayload(host) {
+    // Gradio wraps gr.HTML in a div[id=ari-payload-host]; the actual HTML
+    // content is inside it. We search the whole subtree for our data div.
+    const p = host.querySelector('[data-ari]');
     if (!p) return;
     const bubble = p.getAttribute('data-bubble');
     const img    = p.getAttribute('data-img');
 
+    // Skip if nothing changed (poller dedup)
+    const key = bubble + '||' + img;
+    if (key === _lastPayload) return;
+    _lastPayload = key;
+
     const overlay = document.getElementById('ari-overlay');
     if (!overlay) return;
     const bubbleEl = overlay.querySelector('#ari-bubble');
@@ -46,17 +55,22 @@ BLOCKS_JS = """
     if (imgEl    && img)    imgEl.src = img;
   }
 
-  // MutationObserver watches the hidden gr.HTML host for Gradio innerHTML rewrites
   function installObserver() {
     const host = document.getElementById('ari-payload-host');
     if (!host) {
-      setTimeout(installObserver, 200);
+      setTimeout(installObserver, 300);
       return;
     }
+
+    // MutationObserver: fires when Gradio rewrites innerHTML
     const obs = new MutationObserver(() => applyPayload(host));
     obs.observe(host, { childList: true, subtree: true, characterData: true });
 
-    // Also fire once on load in case initial value is already set
+    // setInterval fallback: catches cases where MutationObserver
+    // fires before Gradio finishes writing all attributes
+    setInterval(() => applyPayload(host), 150);
+
+    // Fire once immediately in case content is already there
     applyPayload(host);
   }