Implement robust Gradio API path resolution with fallback and logging

frontend/js/alt_app.js

@@ -20,10 +20,10 @@ let additionalFiles = []; // For add photos modal
 // Uses fetch-based SSE instead of EventSource (which can't set headers
 // required by HuggingFace's ZeroGPU proxy).
 async function callGradioApi(apiName, dataArr) {
-    const GRADIO_API = '/gradio_api/call/';
-
-    // Fetch config to get Hugging Face Token for ZeroGPU authentication
+    const API_PATHS = ['/gradio_api/call/', '/call/'];
     let hfToken = '';
+
+    // Fetch config for ZeroGPU token
     try {
         const confRes = await fetch(`${API_BASE}/config`);
         if (confRes.ok) {
@@ -35,27 +35,52 @@ async function callGradioApi(apiName, dataArr) {
     }
 
     const headers = { 'Content-Type': 'application/json' };
-    if (hfToken) {
-        headers['Authorization'] = `Bearer ${hfToken}`;
-    }
+    if (hfToken) headers['Authorization'] = `Bearer ${hfToken}`;
 
-    // Step 1: POST to queue the job
-    const res = await fetch(GRADIO_API + apiName, {
-        method: 'POST',
-        headers: headers,
-        credentials: 'include',
-        body: JSON.stringify({ data: dataArr })
-    });
+    let lastError = null;
+    let selectedApiBase = '';
+    let eventId = '';
 
-    if (!res.ok) {
-        throw new Error('Gradio API Request Failed (' + res.status + ')');
+    // Step 1: Find working endpoint
+    for (const apiBase of API_PATHS) {
+        try {
+            const queueUrl = apiBase + apiName;
+            console.log(`[Gradio] Attempting POST: ${queueUrl}`);
+
+            const res = await fetch(queueUrl, {
+                method: 'POST',
+                headers: headers,
+                credentials: 'include',
+                body: JSON.stringify({ data: dataArr })
+            });
+
+            if (res.status === 404) {
+                console.warn(`[Gradio] 404 at ${queueUrl}, trying next fallback...`);
+                continue;
+            }
+
+            if (!res.ok) {
+                throw new Error(`Gradio API Request Failed (${res.status})`);
+            }
+
+            const eventObj = await res.json();
+            eventId = eventObj.event_id;
+            selectedApiBase = apiBase;
+            console.log(`[Gradio] Success at ${queueUrl}. Event ID: ${eventId}`);
+            break;
+        } catch (e) {
+            lastError = e;
+            console.error(`[Gradio] Error at ${apiBase}:`, e);
+        }
     }
 
-    const eventObj = await res.json();
-    const eventId = eventObj.event_id;
+    if (!selectedApiBase || !eventId) {
+        throw lastError || new Error('Gradio API could not be reached (All paths failed)');
+    }
 
     // Step 2: Stream the result via fetch (not EventSource)
-    const streamUrl = GRADIO_API + apiName + '/' + eventId;
+    const streamUrl = selectedApiBase + apiName + '/' + eventId;
+    console.log(`[Gradio] Streaming from: ${streamUrl}`);
 
     const streamHeaders = { 'Accept': 'text/event-stream' };
     if (hfToken) {