Fix example loading, file upload and ZeroGPU compatibility

app.py

@@ -11,6 +11,7 @@ from fastapi.staticfiles import StaticFiles
 import cv2
 import numpy as np
 import os
+os.environ["TOKENIZERS_PARALLELISM"] = "false"
 import tempfile
 import re
 import time
@@ -354,6 +355,7 @@ SAFETY_MARGIN = 25
 EST_SECONDS_PER_FRAME = 20
 
 
+@spaces.GPU(duration=120)
 def run_image_gpu_api(
     image_path: str, category: str, model_mode: str, temp: float, top_p: float, top_k: int,
     short_size: int | None, question_override: str | None
@@ -400,6 +402,7 @@ def run_image_gpu_api(
     return out_img_path, stats, output_text, detections_summary
 
 
+@spaces.GPU(duration=240)
 def run_video_gpu_api(
     video_path: str, category: str, model_mode: str, temp: float, top_p: float, top_k: int,
     short_size: int | None, question_override: str | None, max_video_frames: int
@@ -569,7 +572,6 @@ async def homepage():
 
 
 @app.api(name="run_inference")
-@spaces.GPU(duration=240)
 def run_inference_api(
     input_type: str,
     image_file: Any = None,

index.html

@@ -484,7 +484,7 @@
 
     <!-- Gradio client connection & app runtime logic -->
     <script type="module">
-        import { client } from "https://cdn.jsdelivr.net/npm/@gradio/client/dist/index.min.js";
+        import { client, handle_file } from "https://cdn.jsdelivr.net/npm/@gradio/client/dist/index.min.js";
 
         // State variables
         let selectedMediaType = "Image";
@@ -696,10 +696,23 @@
             }
         }
 
+        // Initialize preloaded examples click actions
+        // Utility to fetch preloaded example assets and convert to File
+        async function loadExampleFromAsset(url, filename) {
+            try {
+                const response = await fetch(url);
+                const blob = await response.blob();
+                return new File([blob], filename, { type: blob.type });
+            } catch (err) {
+                console.error("Failed to load example asset:", err);
+                return null;
+            }
+        }
+
         // Initialize preloaded examples click actions
         function setupExamples() {
             document.querySelectorAll(".example-card").forEach(card => {
-                card.addEventListener("click", () => {
+                card.addEventListener("click", async () => {
                     const type = card.getAttribute("data-type");
                     const name = card.getAttribute("data-name");
                     const category = card.getAttribute("data-category");
@@ -721,22 +734,27 @@
                     // Setup Media type
                     setMediaType(type);
 
-                    // Set active file as local path string
-                    activeFile = assetPath;
-
-                    // Display Preview Image/Video using absolute URL
-                    const resolvedUrl = window.location.origin + "/" + assetPath;
-                    uploadPrompt.classList.add("hidden");
-                    if (type === "Image") {
-                        previewImage.src = resolvedUrl;
-                        previewImage.classList.remove("hidden");
-                        previewVideo.classList.add("hidden");
-                        workspaceStatus.textContent = `Example Image Loaded: ${name}`;
+                    // Fetch asset file with robust absolute URL resolution (works in iframe)
+                    const ext = type === "Image" ? "jpg" : "mp4";
+                    const resolvedAssetUrl = new URL(assetPath, window.location.href).href;
+                    console.log("Fetching example from:", resolvedAssetUrl);
+                    const file = await loadExampleFromAsset(resolvedAssetUrl, `${name.toLowerCase()}.${ext}`);
+                    if (file) {
+                        activeFile = file;
+                        uploadPrompt.classList.add("hidden");
+                        if (type === "Image") {
+                            previewImage.src = URL.createObjectURL(file);
+                            previewImage.classList.remove("hidden");
+                            previewVideo.classList.add("hidden");
+                            workspaceStatus.textContent = `Example Image Loaded: ${name}`;
+                        } else {
+                            previewVideo.src = URL.createObjectURL(file);
+                            previewVideo.classList.remove("hidden");
+                            previewImage.classList.add("hidden");
+                            workspaceStatus.textContent = `Example Video Loaded: ${name}`;
+                        }
                     } else {
-                        previewVideo.src = resolvedUrl;
-                        previewVideo.classList.remove("hidden");
-                        previewImage.classList.add("hidden");
-                        workspaceStatus.textContent = `Example Video Loaded: ${name}`;
+                        workspaceStatus.textContent = `Failed to load ${name} example`;
                     }
                 });
             });
@@ -773,11 +791,10 @@
                     throw new Error("Unable to create Gradio Client instance.");
                 }
 
-                // Handle file parameter packing
-                // If activeFile is a string (local example), pass it directly as a string.
-                // Otherwise, it's a browser File object, pass it directly.
-                const imageFile = (selectedMediaType === "Image") ? activeFile : null;
-                const videoFile = (selectedMediaType === "Video") ? activeFile : null;
+                // Handle file parameter wrapping using Gradio client handle_file
+                const wrappedFile = activeFile ? handle_file(activeFile) : null;
+                const imageFile = (selectedMediaType === "Image") ? wrappedFile : null;
+                const videoFile = (selectedMediaType === "Video") ? wrappedFile : null;
                 
                 // Collect configuration values
                 const taskType = taskTypeSelect.value;