fix: use js_on_load for queue polling, direct CORS fetch to gradio share links

app.py

@@ -167,6 +167,37 @@ PROXY_HTML = """
             margin-bottom: 16px;
             color: #f1f5f9;
         }}
+        .queue-status {{
+            display: inline-flex;
+            align-items: center;
+            gap: 8px;
+            padding: 8px 16px;
+            border-radius: 20px;
+            font-size: 15px;
+            font-weight: 600;
+            margin-bottom: 8px;
+            background: rgba(148, 163, 184, 0.1);
+            color: #94a3b8;
+        }}
+        .queue-status.idle {{
+            background: rgba(16, 185, 129, 0.15);
+            color: #10b981;
+        }}
+        .queue-status.busy {{
+            background: rgba(251, 146, 60, 0.15);
+            color: #fb923c;
+        }}
+        .queue-status.offline {{
+            background: rgba(239, 68, 68, 0.15);
+            color: #ef4444;
+        }}
+        .queue-dot {{
+            width: 8px;
+            height: 8px;
+            border-radius: 50%;
+            background: currentColor;
+            animation: pulse 2s infinite;
+        }}
         .instance-card .url-hint {{
             font-size: 13px;
             color: #64748b;
@@ -235,29 +266,82 @@ def build_page():
             <div class="instance-card">
                 <h3>🖥️ {inst['name']}</h3>
                 <p style="color:#94a3b8; font-size:14px; margin-bottom:8px;">⚡ Shared GPU — requests are queued</p>
+                <div class="queue-status" id="queue-status-{i}">
+                    <span class="queue-dot"></span>
+                    <span id="queue-text-{i}">Checking...</span>
+                </div>
                 <a href="{inst['url']}" target="_blank" rel="noopener noreferrer" class="btn-go">
-                    Open Instance {i+1}
+                    Open Instance {i}
                 </a>
                 <p class="url-hint"><code>{inst['url']}</code></p>
             </div>
             """
         
+        # Build JS array of instance URLs for direct polling (Gradio share links support CORS natively)
+        urls_js = ", ".join(['"' + inst["url"].rstrip("/") + '"' for inst in REMOTE_URLS])
+        
         content = f"""
         <div class="cards-container">
             <div style="width:100%; text-align:center; margin-bottom:16px;">
                 <h2 style="font-size:28px; margin-bottom:12px;">🚀 Choose a Pixal3D Instance</h2>
                 <p style="color:#fbbf24; font-size:15px; margin-bottom:8px;">⚠️ Due to a temporary HuggingFace error, this Space is currently unavailable. Please use one of the instances below.</p>
-                <p style="color:#10b981; font-size:14px; margin-top:10px; font-weight:600;">💡 After entering, check the top-left corner for the current queue count.</p>
+                <p style="color:#10b981; font-size:14px; margin-top:10px; font-weight:600;">💡 Choose the instance with the shortest queue!</p>
             </div>
             <div class="cards-grid">
                 {cards_html}
             </div>
         </div>
         """
+        
+        poll_script = f"""
+            const INSTANCE_URLS = [{urls_js}];
+            async function pollQueues() {{
+                for (let i = 0; i < INSTANCE_URLS.length; i++) {{
+                    try {{
+                        const controller = new AbortController();
+                        const timeout = setTimeout(() => controller.abort(), 5000);
+                        const resp = await fetch(INSTANCE_URLS[i] + '/queue?session_id=', {{
+                            signal: controller.signal
+                        }});
+                        clearTimeout(timeout);
+                        if (resp.ok) {{
+                            const data = await resp.json();
+                            const total = data.total_waiting + (data.gpu_busy ? 1 : 0);
+                            const el = document.getElementById('queue-text-' + i);
+                            const status = document.getElementById('queue-status-' + i);
+                            if (total === 0) {{
+                                el.textContent = 'Idle — no queue';
+                                status.className = 'queue-status idle';
+                            }} else {{
+                                el.textContent = total + ' in queue';
+                                status.className = 'queue-status busy';
+                            }}
+                        }} else {{
+                            const el = document.getElementById('queue-text-' + i);
+                            const status = document.getElementById('queue-status-' + i);
+                            if (el) {{
+                                el.textContent = 'Offline';
+                                status.className = 'queue-status offline';
+                            }}
+                        }}
+                    }} catch (e) {{
+                        const el = document.getElementById('queue-text-' + i);
+                        const status = document.getElementById('queue-status-' + i);
+                        if (el) {{
+                            el.textContent = 'Offline';
+                            status.className = 'queue-status offline';
+                        }}
+                    }}
+                }}
+            }}
+            pollQueues();
+            setInterval(pollQueues, 5000);
+        """
     else:
         status_color = "#ef4444"
         status_anim = "pulse 1.5s infinite"
         status_text = "Remote instance not configured"
+        poll_script = ""
         content = """
         <div class="no-url">
             <div class="no-url-card">
@@ -271,22 +355,25 @@ def build_page():
         </div>
         """
 
-    return PROXY_HTML.format(
+    html = PROXY_HTML.format(
         status_color=status_color,
         status_anim=status_anim,
         status_text=status_text,
         gpu_name=GPU_NAME,
         content=content,
     )
+    return html, poll_script
 
 
 # Use a simple Gradio Blocks app with HTML component
+page_html, page_script = build_page()
+
 with gr.Blocks(
     title="Pixal3D | AI Image-to-3D",
     css="footer {display:none !important;} .gradio-container {padding:0 !important; max-width:100% !important; height:100vh !important; overflow:hidden !important;} #proxy-frame {height:100%; max-height:100vh; padding:0; overflow:hidden;}",
     theme=gr.themes.Base(),
 ) as demo:
-    gr.HTML(build_page(), elem_id="proxy-frame")
+    gr.HTML(page_html, elem_id="proxy-frame", js_on_load=page_script if page_script else None)
 
 if __name__ == "__main__":
     demo.launch(share=True)

app_proxy.py

@@ -167,6 +167,37 @@ PROXY_HTML = """
             margin-bottom: 16px;
             color: #f1f5f9;
         }}
+        .queue-status {{
+            display: inline-flex;
+            align-items: center;
+            gap: 8px;
+            padding: 8px 16px;
+            border-radius: 20px;
+            font-size: 15px;
+            font-weight: 600;
+            margin-bottom: 8px;
+            background: rgba(148, 163, 184, 0.1);
+            color: #94a3b8;
+        }}
+        .queue-status.idle {{
+            background: rgba(16, 185, 129, 0.15);
+            color: #10b981;
+        }}
+        .queue-status.busy {{
+            background: rgba(251, 146, 60, 0.15);
+            color: #fb923c;
+        }}
+        .queue-status.offline {{
+            background: rgba(239, 68, 68, 0.15);
+            color: #ef4444;
+        }}
+        .queue-dot {{
+            width: 8px;
+            height: 8px;
+            border-radius: 50%;
+            background: currentColor;
+            animation: pulse 2s infinite;
+        }}
         .instance-card .url-hint {{
             font-size: 13px;
             color: #64748b;
@@ -235,29 +266,82 @@ def build_page():
             <div class="instance-card">
                 <h3>🖥️ {inst['name']}</h3>
                 <p style="color:#94a3b8; font-size:14px; margin-bottom:8px;">⚡ Shared GPU — requests are queued</p>
+                <div class="queue-status" id="queue-status-{i}">
+                    <span class="queue-dot"></span>
+                    <span id="queue-text-{i}">Checking...</span>
+                </div>
                 <a href="{inst['url']}" target="_blank" rel="noopener noreferrer" class="btn-go">
-                    Open Instance {i+1}
+                    Open Instance {i}
                 </a>
                 <p class="url-hint"><code>{inst['url']}</code></p>
             </div>
             """
         
+        # Build JS array of instance URLs for direct polling (Gradio share links support CORS natively)
+        urls_js = ", ".join(['"' + inst["url"].rstrip("/") + '"' for inst in REMOTE_URLS])
+        
         content = f"""
         <div class="cards-container">
             <div style="width:100%; text-align:center; margin-bottom:16px;">
                 <h2 style="font-size:28px; margin-bottom:12px;">🚀 Choose a Pixal3D Instance</h2>
                 <p style="color:#fbbf24; font-size:15px; margin-bottom:8px;">⚠️ Due to a temporary HuggingFace error, this Space is currently unavailable. Please use one of the instances below.</p>
-                <p style="color:#10b981; font-size:14px; margin-top:10px; font-weight:600;">💡 After entering, check the top-left corner for the current queue count.</p>
+                <p style="color:#10b981; font-size:14px; margin-top:10px; font-weight:600;">💡 Choose the instance with the shortest queue!</p>
             </div>
             <div class="cards-grid">
                 {cards_html}
             </div>
         </div>
         """
+        
+        poll_script = f"""
+            const INSTANCE_URLS = [{urls_js}];
+            async function pollQueues() {{
+                for (let i = 0; i < INSTANCE_URLS.length; i++) {{
+                    try {{
+                        const controller = new AbortController();
+                        const timeout = setTimeout(() => controller.abort(), 5000);
+                        const resp = await fetch(INSTANCE_URLS[i] + '/queue?session_id=', {{
+                            signal: controller.signal
+                        }});
+                        clearTimeout(timeout);
+                        if (resp.ok) {{
+                            const data = await resp.json();
+                            const total = data.total_waiting + (data.gpu_busy ? 1 : 0);
+                            const el = document.getElementById('queue-text-' + i);
+                            const status = document.getElementById('queue-status-' + i);
+                            if (total === 0) {{
+                                el.textContent = 'Idle — no queue';
+                                status.className = 'queue-status idle';
+                            }} else {{
+                                el.textContent = total + ' in queue';
+                                status.className = 'queue-status busy';
+                            }}
+                        }} else {{
+                            const el = document.getElementById('queue-text-' + i);
+                            const status = document.getElementById('queue-status-' + i);
+                            if (el) {{
+                                el.textContent = 'Offline';
+                                status.className = 'queue-status offline';
+                            }}
+                        }}
+                    }} catch (e) {{
+                        const el = document.getElementById('queue-text-' + i);
+                        const status = document.getElementById('queue-status-' + i);
+                        if (el) {{
+                            el.textContent = 'Offline';
+                            status.className = 'queue-status offline';
+                        }}
+                    }}
+                }}
+            }}
+            pollQueues();
+            setInterval(pollQueues, 5000);
+        """
     else:
         status_color = "#ef4444"
         status_anim = "pulse 1.5s infinite"
         status_text = "Remote instance not configured"
+        poll_script = ""
         content = """
         <div class="no-url">
             <div class="no-url-card">
@@ -271,22 +355,25 @@ def build_page():
         </div>
         """
 
-    return PROXY_HTML.format(
+    html = PROXY_HTML.format(
         status_color=status_color,
         status_anim=status_anim,
         status_text=status_text,
         gpu_name=GPU_NAME,
         content=content,
     )
+    return html, poll_script
 
 
 # Use a simple Gradio Blocks app with HTML component
+page_html, page_script = build_page()
+
 with gr.Blocks(
     title="Pixal3D | AI Image-to-3D",
     css="footer {display:none !important;} .gradio-container {padding:0 !important; max-width:100% !important; height:100vh !important; overflow:hidden !important;} #proxy-frame {height:100%; max-height:100vh; padding:0; overflow:hidden;}",
     theme=gr.themes.Base(),
 ) as demo:
-    gr.HTML(build_page(), elem_id="proxy-frame")
+    gr.HTML(page_html, elem_id="proxy-frame", js_on_load=page_script if page_script else None)
 
 if __name__ == "__main__":
     demo.launch(share=True)