update app [examples] ✅

app.py

@@ -614,6 +614,97 @@ footer{display:none!important}
     color:#FF69B4;
 }
 
+/* ── Examples Section ── */
+.examples-section{
+    background:#141416;
+    border-top:1px solid #27272a;
+    padding:12px 16px 14px;
+}
+.examples-title{
+    font-size:12px;
+    font-weight:600;
+    color:#71717a;
+    text-transform:uppercase;
+    letter-spacing:.8px;
+    margin-bottom:10px;
+    display:flex;
+    align-items:center;
+    gap:8px;
+}
+.examples-title::before{
+    content:'\u25c6';
+    color:#FF1493;
+    font-size:10px;
+}
+.examples-grid{
+    display:flex;
+    gap:10px;
+    overflow-x:auto;
+    padding-bottom:4px;
+}
+.examples-grid::-webkit-scrollbar{height:4px}
+.examples-grid::-webkit-scrollbar-track{background:transparent}
+.examples-grid::-webkit-scrollbar-thumb{background:#27272a;border-radius:2px}
+.example-card{
+    flex:0 0 auto;
+    width:120px;
+    cursor:pointer;
+    border-radius:10px;
+    border:2px solid #27272a;
+    overflow:hidden;
+    background:#09090b;
+    transition:all .2s ease;
+    display:flex;
+    flex-direction:column;
+    user-select:none;
+}
+.example-card:hover{
+    border-color:#FF1493;
+    transform:translateY(-2px);
+    box-shadow:0 6px 20px rgba(255,20,147,.25);
+}
+.example-card:active{
+    transform:translateY(0);
+    border-color:#FF69B4;
+}
+.example-card.loading{
+    opacity:0.5;
+    pointer-events:none;
+}
+.example-card.loading .example-label{
+    color:#FF69B4;
+}
+.example-card .example-thumb{
+    width:100%;
+    height:80px;
+    object-fit:cover;
+    display:block;
+    background:#09090b;
+}
+.example-card .example-thumb-placeholder{
+    width:100%;
+    height:80px;
+    display:flex;
+    align-items:center;
+    justify-content:center;
+    background:linear-gradient(135deg,#1a1a20 0%,#0f0f13 100%);
+    color:#3f3f46;
+    font-size:24px;
+}
+.example-card .example-label{
+    display:block;
+    padding:6px 8px;
+    font-size:11px;
+    font-weight:600;
+    color:#a1a1aa;
+    text-align:center;
+    white-space:nowrap;
+    overflow:hidden;
+    text-overflow:ellipsis;
+    border-top:1px solid #27272a;
+    background:#0d0d10;
+}
+
 /* ── JSON Panel ── */
 .json-panel{
     background:#18181b;
@@ -723,7 +814,7 @@ footer{display:none!important}
     80%{transform:translateX(3px)}
 }
 
-/* ── Primary Button — Force white text & SVG in ALL themes ── */
+/* ── Primary Button ── */
 .btn-run{
     display:flex;align-items:center;justify-content:center;gap:8px;
     width:100%;
@@ -822,7 +913,7 @@ footer{display:none!important}
     fill:#ffffff!important;
 }
 
-/* ── Comprehensive white-force for run button across every theme ── */
+/* ── Comprehensive white-force for run button ── */
 #custom-run-btn,
 #custom-run-btn *,
 #custom-run-btn span,
@@ -836,7 +927,7 @@ footer{display:none!important}
     fill:#ffffff!important;
 }
 
-/* ── Mode button active state — white in ALL themes ── */
+/* ── Mode button active state ── */
 .mode-btn.active,
 .mode-btn.active *,
 .mode-btn.active span,
@@ -1134,9 +1225,9 @@ footer{display:none!important}
 ::-webkit-scrollbar-thumb{background:#27272a;border-radius:4px}
 ::-webkit-scrollbar-thumb:hover{background:#3f3f46}
 
-/* ══════════════════════════════════════════════════════════════
-   FORCE WHITE on Run Button + Mode Buttons in EVERY theme
-   ══════════════════════════════════════════════════════════════ */
+/* ══════════════════════════════════════════════
+   FORCE WHITE on Run Button + Mode Buttons
+   ══════════════════════════════════════════════ */
 
 body:not(.dark) .btn-run,
 body:not(.dark) .btn-run *,
@@ -1235,6 +1326,9 @@ body:not(.dark) #mode-mover.active *{
     .app-main-right{width:100%}
     .app-main-left{border-right:none;border-bottom:1px solid #27272a}
     .mode-switcher{flex-wrap:wrap}
+    .examples-grid{gap:8px}
+    .example-card{width:100px}
+    .example-card .example-thumb{height:64px}
 }
 """
 
@@ -1645,6 +1739,23 @@ function initCanvasBbox() {
     }
     function hideStatus() { status.style.display = 'none'; }
 
+    /* ── Shared image loader (used by file input, drag-drop, examples) ── */
+    function loadImageFromDataUrl(dataUrl) {
+        const img = new window.Image();
+        img.crossOrigin = 'anonymous';
+        img.onload = () => {
+            baseImg = img;
+            boxes.length = 0;
+            window.__bboxBoxes = boxes;
+            selectedIdx = -1;
+            fitSize(img.naturalWidth, img.naturalHeight);
+            syncToGradio(); redraw(); hideStatus();
+            uploadPrompt.style.display = 'none';
+            syncImageToGradio(dataUrl);
+        };
+        img.src = dataUrl;
+    }
+
     function resetCanvas() {
         baseImg = null;
         boxes.length = 0;
@@ -1800,20 +1911,7 @@ function initCanvasBbox() {
         if (!file || !file.type.startsWith('image/')) return;
         const reader = new FileReader();
         reader.onload = (event) => {
-            const dataUrl = event.target.result;
-            const img = new window.Image();
-            img.crossOrigin = 'anonymous';
-            img.onload = () => {
-                baseImg = img;
-                boxes.length = 0;
-                window.__bboxBoxes = boxes;
-                selectedIdx = -1;
-                fitSize(img.naturalWidth, img.naturalHeight);
-                syncToGradio(); redraw(); hideStatus();
-                uploadPrompt.style.display = 'none';
-                syncImageToGradio(dataUrl);
-            };
-            img.src = dataUrl;
+            loadImageFromDataUrl(event.target.result);
         };
         reader.readAsDataURL(file);
     }
@@ -2021,6 +2119,54 @@ function initCanvasBbox() {
         });
     }
 
+    /* ── Example Cards Click Handler ── */
+    function loadExampleFromUrl(url, cardEl) {
+        if (cardEl) {
+            cardEl.classList.add('loading');
+            const lbl = cardEl.querySelector('.example-label');
+            if (lbl) lbl.textContent = 'Loading\u2026';
+        }
+        showStatus('Loading example\u2026');
+
+        fetch(url)
+            .then(r => {
+                if (!r.ok) throw new Error('HTTP ' + r.status);
+                return r.blob();
+            })
+            .then(blob => {
+                const reader = new FileReader();
+                reader.onload = (event) => {
+                    loadImageFromDataUrl(event.target.result);
+                    if (cardEl) {
+                        cardEl.classList.remove('loading');
+                        const lbl = cardEl.querySelector('.example-label');
+                        if (lbl) lbl.textContent = cardEl.getAttribute('data-label') || 'Example';
+                    }
+                    showStatus('Example loaded');
+                    setTimeout(hideStatus, 1500);
+                    window.showToast('Example image loaded. Draw bounding boxes and click Run.', 'success', 'Image Ready');
+                };
+                reader.readAsDataURL(blob);
+            })
+            .catch(err => {
+                console.error('Failed to load example:', err);
+                if (cardEl) {
+                    cardEl.classList.remove('loading');
+                    const lbl = cardEl.querySelector('.example-label');
+                    if (lbl) lbl.textContent = cardEl.getAttribute('data-label') || 'Example';
+                }
+                hideStatus();
+                window.showToast('Could not load example image. Make sure example files exist in the <b>examples/</b> folder.', 'error', 'Load Failed');
+            });
+    }
+
+    document.querySelectorAll('.example-card').forEach(card => {
+        card.addEventListener('click', () => {
+            const src = card.getAttribute('data-src');
+            if (src) loadExampleFromUrl(src, card);
+        });
+    });
+
     new ResizeObserver(() => {
         if (baseImg) { fitSize(baseImg.naturalWidth, baseImg.naturalHeight); redraw(); }
     }).observe(wrap);
@@ -2300,6 +2446,34 @@ with gr.Blocks() as demo:
                     <kbd>Reset</kbd> removes image
                 </div>
 
+                <!-- ── Quick Examples Section ── -->
+                <div class="examples-section">
+                    <div class="examples-title">Quick Examples &mdash; Click to Load</div>
+                    <div class="examples-grid">
+                        <div class="example-card" data-src="/file=examples/1.jpg" data-label="Example 1">
+                            <img class="example-thumb" src="/file=examples/1.jpg" alt="Example 1" loading="lazy"
+                                 onerror="this.style.display='none';this.nextElementSibling.style.display='flex'"
+                            />
+                            <div class="example-thumb-placeholder" style="display:none">\U0001f5bc</div>
+                            <span class="example-label">Example 1</span>
+                        </div>
+                        <div class="example-card" data-src="/file=examples/2.jpg" data-label="Example 2">
+                            <img class="example-thumb" src="/file=examples/2.jpg" alt="Example 2" loading="lazy"
+                                 onerror="this.style.display='none';this.nextElementSibling.style.display='flex'"
+                            />
+                            <div class="example-thumb-placeholder" style="display:none">\U0001f5bc</div>
+                            <span class="example-label">Example 2</span>
+                        </div>
+                        <div class="example-card" data-src="/file=examples/3.jpg" data-label="Example 3">
+                            <img class="example-thumb" src="/file=examples/3.jpg" alt="Example 3" loading="lazy"
+                                 onerror="this.style.display='none';this.nextElementSibling.style.display='flex'"
+                            />
+                            <div class="example-thumb-placeholder" style="display:none">\U0001f5bc</div>
+                            <span class="example-label">Example 3</span>
+                        </div>
+                    </div>
+                </div>
+
                 <div class="json-panel">
                     <div class="json-panel-title">Bounding Boxes</div>
                     <div class="json-panel-content" id="bbox-json-content">[
@@ -2435,5 +2609,8 @@ with gr.Blocks() as demo:
 if __name__ == "__main__":
     demo.launch(
         css=css,
-        mcp_server=True, ssr_mode=False, show_error=True
+        mcp_server=True,
+        ssr_mode=False,
+        show_error=True,
+        allowed_paths=["examples"],
     )