Fix canvas not rendering: keep bridge components mounted (CSS-hidden) instead of visible=False; robust gradio id selectors

app.py

@@ -355,9 +355,17 @@ SCRIPT = r"""
     let id=base, n=1; const ids=new Set(S.elements.map(e=>e.id));
     while(ids.has(id)){ id=base+"_"+(++n);} return id; }
 
+  // gradio may put elem_id on the field/button itself OR on a wrapper that contains it.
+  function fieldEl(id){
+    const w=document.getElementById(id); if(!w) return null;
+    return w.matches('textarea,input') ? w : w.querySelector('textarea,input');
+  }
+  function genButton(){
+    const g=document.getElementById('f3-gen'); if(!g) return null;
+    return g.tagName==='BUTTON' ? g : g.querySelector('button');
+  }
   function setHidden(id,val){
-    const w=document.getElementById(id); if(!w) return;
-    const el=w.querySelector('textarea,input'); if(!el) return;
+    const el=fieldEl(id); if(!el) return;
     const proto = el.tagName==='TEXTAREA'?window.HTMLTextAreaElement.prototype:window.HTMLInputElement.prototype;
     const setter=Object.getOwnPropertyDescriptor(proto,'value').set;
     setter.call(el,val); el.dispatchEvent(new Event('input',{bubbles:true}));
@@ -523,7 +531,7 @@ SCRIPT = r"""
     S.seed=-1; S.step=4; renderSteps(); syncState();
     NS.el.board.classList.add('busy');
     NS.el.genbtn.setAttribute('disabled','');
-    setTimeout(()=>{ const b=document.querySelector('#f3-gen button'); if(b)b.click(); },70);
+    setTimeout(()=>{ const b=genButton(); if(b)b.click(); },70);
     clearTimeout(NS._to); NS._to=setTimeout(()=>{ NS.el.board.classList.remove('busy');
       NS.el.genbtn.removeAttribute('disabled'); }, 300000);
   }
@@ -607,7 +615,7 @@ SCRIPT = r"""
 
   function init(){
     const root=document.getElementById('f3-root');
-    if(!root || !document.getElementById('f3-state') || !document.querySelector('#f3-gen button')){
+    if(!root || !fieldEl('f3-state') || !genButton()){
       return false;
     }
     if(root.dataset.ready) return true;
@@ -621,10 +629,15 @@ SCRIPT = r"""
 HEAD = STYLE + STYLE2 + CONFIG_JS + SCRIPT
 
 with gr.Blocks(head=HEAD, title="FLUX.3 layout canvas",
-               css="footer{display:none!important} .gradio-container{max-width:1240px!important}") as demo:
-    state_box = gr.Textbox(visible=False, elem_id="f3-state")
-    result_box = gr.Textbox(visible=False, elem_id="f3-result")
-    gen_btn = gr.Button("gen", visible=False, elem_id="f3-gen")
+               css="footer{display:none!important} .gradio-container{max-width:1240px!important}"
+                   " .f3-bridge{position:absolute!important;left:-9999px!important;top:0;"
+                   "width:1px!important;height:1px!important;overflow:hidden!important;"
+                   "opacity:0!important;pointer-events:none!important;}") as demo:
+    # Bridge components: kept MOUNTED (not visible=False, which unmounts them from the
+    # DOM in gradio 5.x) but hidden off-screen via CSS, so the canvas JS can find them.
+    state_box = gr.Textbox(elem_id="f3-state", elem_classes=["f3-bridge"])
+    result_box = gr.Textbox(elem_id="f3-result", elem_classes=["f3-bridge"])
+    gen_btn = gr.Button("gen", elem_id="f3-gen", elem_classes=["f3-bridge"])
     gr.HTML('<div id="f3-root"></div>')
 
     ev = gen_btn.click(generate, [state_box], [result_box], api_name="generate",