Fix: return single JSON string from @app .api for reliable Gradio Server serialization

The tuple return type was not being serialized by Gradio Server mode,
resulting in empty data reaching the frontend. Now returns a single
JSON string (-> str) which is the simplest and most reliable return
type for @app .api(). Frontend parses the JSON and resolves file paths
via /api/file endpoint. This keeps the Gradio client + ZeroGPU queue.

app.py

@@ -4405,7 +4405,8 @@ if __name__ == "__main__":
             return HTMLResponse(content="Not found", status_code=404)
         return FileResponse(resolved)
 
-    # Expose Gradio api endpoint – returns plain strings for maximum client compatibility.
+    # Expose Gradio api endpoint – returns a single JSON string for maximum client compatibility.
+    # Using a single str return avoids all Gradio Server tuple/FileData serialization issues.
     # File outputs are returned as absolute paths; the frontend resolves them via /api/file.
     @app.api(name="run_generation")
     def api_run_generation(
@@ -4423,7 +4424,7 @@ if __name__ == "__main__":
         validation_timestep_shift: float = 3.5,
         cfg_text_scale: float = 4.0,
         enable_frame_interpolation: bool = False,
-    ) -> tuple[str, str, str, str]:
+    ) -> str:
         video_path = extract_path(input_video)
         image_path = extract_path(input_image)
         
@@ -4444,14 +4445,14 @@ if __name__ == "__main__":
             enable_frame_interpolation=enable_frame_interpolation,
         )
         
-        # Return plain strings – empty string for missing values.
-        # The frontend will resolve file paths via /api/file?path=...
-        return (
-            str(output_video) if output_video else "",
-            str(output_image) if output_image else "",
-            str(output_text) if output_text else "",
-            str(status) if status else "",
-        )
+        # Return a single JSON string with all result data.
+        # The frontend parses this and resolves file paths via /api/file?path=...
+        return json.dumps({
+            "video": str(output_video) if output_video else "",
+            "image": str(output_image) if output_image else "",
+            "text": str(output_text) if output_text else "",
+            "status": str(status) if status else "",
+        })
 
     app.launch(
         server_name=args.server_name,

index.html

@@ -2376,40 +2376,52 @@
                 return;
             }
 
-            // The API now returns 4 plain strings: [videoPath, imagePath, text, status]
-            const rawVideo = result.data[0];
-            const rawImage = result.data[1];
-            const textData = result.data[2];
-            const statusMessage = result.data[3];
-
-            console.log("displayResult parsed:", { rawVideo, rawImage, textData, statusMessage });
-
-            // Helper: resolve a raw value (string path, FileData object, or URL) into a usable URL
-            function resolveMediaUrl(raw) {
-                if (!raw) return null;
-                // Plain string path from our API
-                if (typeof raw === "string") {
-                    if (!raw || raw.trim() === "") return null;
-                    if (raw.startsWith("http")) return raw;
-                    // Absolute file path – serve via /api/file
-                    return "/api/file?path=" + encodeURIComponent(raw);
-                }
-                // FileData object with url or path
-                if (raw.url) return raw.url;
-                if (raw.path) {
-                    if (raw.path.startsWith("http")) return raw.path;
-                    return "/api/file?path=" + encodeURIComponent(raw.path);
+            // The API returns a single JSON string. result.data may be:
+            // - An array with one element: ["json_string"]
+            // - A direct string: "json_string"
+            let rawData = result.data;
+            if (Array.isArray(rawData)) rawData = rawData[0];
+            console.log("rawData after unwrap:", rawData);
+
+            let parsed;
+            try {
+                if (typeof rawData === "string") {
+                    parsed = JSON.parse(rawData);
+                } else if (typeof rawData === "object" && rawData !== null) {
+                    // Already an object (in case Gradio deserializes it)
+                    parsed = rawData;
+                } else {
+                    console.warn("displayResult: Unexpected rawData type:", typeof rawData);
+                    resetOutputViewer();
+                    return;
                 }
-                return null;
+            } catch (e) {
+                console.error("displayResult: Failed to parse JSON:", e, rawData);
+                resetOutputViewer();
+                return;
+            }
+
+            console.log("displayResult parsed:", parsed);
+
+            const videoPath = parsed.video || "";
+            const imagePath = parsed.image || "";
+            const textData  = parsed.text   || "";
+            const statusMsg = parsed.status || "";
+
+            // Helper: resolve a file path to a servable URL
+            function resolveMediaUrl(filePath) {
+                if (!filePath || filePath.trim() === "") return null;
+                if (filePath.startsWith("http")) return filePath;
+                return "/api/file?path=" + encodeURIComponent(filePath);
             }
 
-            const videoUrl = resolveMediaUrl(rawVideo);
-            const imageUrl = resolveMediaUrl(rawImage);
-            console.log("Resolved URLs:", { videoUrl, imageUrl });
+            const videoUrl = resolveMediaUrl(videoPath);
+            const imageUrl = resolveMediaUrl(imagePath);
+            console.log("Resolved URLs:", { videoUrl, imageUrl, textData, statusMsg });
 
-            // If there's an error message or empty payload but status contains text
-            if (statusMessage && !videoUrl && !imageUrl && !textData) {
-                alert(`Inference Status: ${statusMessage}`);
+            // If there's only a status message with no actual content
+            if (statusMsg && !videoUrl && !imageUrl && !textData) {
+                alert(`Inference Status: ${statusMsg}`);
                 return;
             }