update app

app.py

@@ -166,10 +166,10 @@ def load_example_data(idx_str):
     try:
         idx = int(str(idx_str).strip())
     except Exception:
-        return gr.update(value="")
+        return gr.update(value=json.dumps({"status": "error", "message": "Invalid example index"}))
 
     if idx < 0 or idx >= len(image_examples):
-        return gr.update(value="")
+        return gr.update(value=json.dumps({"status": "error", "message": "Example index out of range"}))
 
     ex = image_examples[idx]
     img_b64 = file_to_data_url(ex["image"])
@@ -199,7 +199,7 @@ def b64_to_pil(b64_str):
         return None
 
 
-def calc_timeout_generic(*args, **kwargs):
+def calc_timeout_duration(*args, **kwargs):
     gpu_timeout = kwargs.get("gpu_timeout", None)
     if gpu_timeout is None and args:
         gpu_timeout = args[-1]
@@ -209,8 +209,8 @@ def calc_timeout_generic(*args, **kwargs):
         return 60
 
 
-@spaces.GPU(duration=calc_timeout_generic)
-def generate_image(model_name, text, image, max_new_tokens=1024, temperature=0.7, top_p=0.9, top_k=50, repetition_penalty=1.1, gpu_timeout=60):
+@spaces.GPU(duration=calc_timeout_duration)
+def generate_image(model_name, text, image, max_new_tokens, temperature, top_p, top_k, repetition_penalty, gpu_timeout):
     try:
         if not model_name or model_name not in MODEL_MAP:
             yield "[ERROR] Please select a valid model."
@@ -773,31 +773,21 @@ function init() {
         setGradioValue('hidden-model-name', name);
     }
 
-    function renderPreview() {
-        if (!imageState) {
-            previewImg.src = '';
-            previewImg.style.display = 'none';
-            previewWrap.style.display = 'none';
-            if (uploadPrompt) uploadPrompt.style.display = 'flex';
-            syncImageToGradio();
-            return;
-        }
-
+    function setPreview(b64, name) {
+        imageState = {b64, name: name || 'image'};
+        previewImg.src = b64;
         previewWrap.style.display = 'flex';
         if (uploadPrompt) uploadPrompt.style.display = 'none';
-        previewImg.src = imageState.preview || imageState.b64;
-        previewImg.style.display = 'block';
         syncImageToGradio();
     }
-
-    function setPreviewFromFileReader(b64, name) {
-        imageState = {b64, name: name || 'image', mode: 'image'};
-        renderPreview();
-    }
+    window.__setPreview = setPreview;
 
     function clearPreview() {
         imageState = null;
-        renderPreview();
+        previewImg.src = '';
+        previewWrap.style.display = 'none';
+        if (uploadPrompt) uploadPrompt.style.display = 'flex';
+        syncImageToGradio();
     }
     window.__clearPreview = clearPreview;
 
@@ -808,7 +798,7 @@ function init() {
             return;
         }
         const reader = new FileReader();
-        reader.onload = (e) => setPreviewFromFileReader(e.target.result, file.name);
+        reader.onload = (e) => setPreview(e.target.result, file.name);
         reader.readAsDataURL(file);
     }
 
@@ -847,7 +837,10 @@ function init() {
     window.__activateModelTab = activateModelTab;
 
     document.querySelectorAll('.model-tab[data-model]').forEach(btn => {
-        btn.addEventListener('click', () => activateModelTab(btn.getAttribute('data-model')));
+        btn.addEventListener('click', () => {
+            const model = btn.getAttribute('data-model');
+            activateModelTab(model);
+        });
     });
 
     activateModelTab('Nanonets-OCR2-3B');
@@ -969,24 +962,19 @@ function init() {
     function applyExamplePayload(raw) {
         try {
             const data = JSON.parse(raw);
-            if (data.status !== 'ok') return;
-
-            if (data.model) activateModelTab(data.model);
-            if (data.query) {
-                promptInput.value = data.query;
-                syncPromptToGradio();
+            if (data.status === 'ok') {
+                if (data.image) setPreview(data.image, data.name || 'example.jpg');
+                if (data.query) {
+                    promptInput.value = data.query;
+                    syncPromptToGradio();
+                }
+                if (data.model) activateModelTab(data.model);
+                document.querySelectorAll('.example-card.loading').forEach(c => c.classList.remove('loading'));
+                showToast('Example loaded', 'info');
+            } else if (data.status === 'error') {
+                document.querySelectorAll('.example-card.loading').forEach(c => c.classList.remove('loading'));
+                showToast(data.message || 'Failed to load example', 'error');
             }
-
-            imageState = {
-                b64: data.image || '',
-                preview: data.image || '',
-                name: data.name || 'example.jpg',
-                mode: 'image'
-            };
-            renderPreview();
-
-            document.querySelectorAll('.example-card.loading').forEach(c => c.classList.remove('loading'));
-            showToast('Example loaded', 'info');
         } catch (e) {
             document.querySelectorAll('.example-card.loading').forEach(c => c.classList.remove('loading'));
         }
@@ -1023,7 +1011,6 @@ function init() {
 
         function writeIdxAndClick() {
             attempts += 1;
-
             const ok1 = setGradioValue('example-idx-input', String(idx));
             setGradioValue('example-result-data', '');
             const currentVal = getValueFromContainer('example-idx-input');
@@ -1195,7 +1182,7 @@ with gr.Blocks() as demo:
 
                     <div id="single-preview-wrap" class="single-preview-wrap">
                         <div class="single-preview-card">
-                            <img id="single-preview-img" src="" alt="Preview" style="display:none;">
+                            <img id="single-preview-img" src="" alt="Preview">
                             <div class="preview-overlay-actions">
                                 <button id="preview-upload-btn" class="preview-action-btn" title="Replace">Upload</button>
                                 <button id="preview-clear-btn" class="preview-action-btn" title="Clear">Clear</button>
@@ -1326,14 +1313,12 @@ with gr.Blocks() as demo:
             const model = modelEl ? modelEl.getAttribute('data-model') : m;
             const promptEl = document.getElementById('custom-query-input');
             const promptVal = promptEl ? promptEl.value : p;
-
-            let imgVal = img;
             const imgContainer = document.getElementById('hidden-image-b64');
+            let imgVal = img;
             if (imgContainer) {
                 const inner = imgContainer.querySelector('textarea, input');
                 if (inner) imgVal = inner.value;
             }
-
             return [model, promptVal, imgVal, mnt, t, tp, tk, rp, gd];
         }""",
     )