update app - [cleaned]

app.py

@@ -169,8 +169,9 @@ footer{display:none!important}
     width:36px;height:36px;
     background:linear-gradient(135deg,#FF4500,#FF6633,#FF8C66);
     border-radius:10px;display:flex;align-items:center;justify-content:center;
-    font-size:18px;color:#fff;box-shadow:0 4px 12px rgba(255,69,0,.35);
+    box-shadow:0 4px 12px rgba(255,69,0,.35);
 }
+.app-logo svg{width:20px;height:20px;fill:#fff;flex-shrink:0}
 .app-title{
     font-size:18px;font-weight:700;
     background:linear-gradient(135deg,#e4e4e7,#a1a1aa);
@@ -208,13 +209,30 @@ footer{display:none!important}
     background:rgba(255,69,0,.25);color:#ffffff!important;
     -webkit-text-fill-color:#ffffff!important;border-color:rgba(255,69,0,.45);
 }
-.modern-tb-btn .tb-icon{font-size:15px;line-height:1;color:#ffffff!important;-webkit-text-fill-color:#ffffff!important}
 .modern-tb-btn .tb-label{font-size:13px;color:#ffffff!important;-webkit-text-fill-color:#ffffff!important;font-weight:600}
+.modern-tb-btn .tb-svg{
+    width:15px;height:15px;flex-shrink:0;
+    stroke:#ffffff!important;color:#ffffff!important;
+}
 .tb-info{
     font-family:'JetBrains Mono',monospace;font-size:12px;
     color:#71717a;padding:0 8px;display:flex;align-items:center;
 }
 
+/* Force toolbar white in all themes */
+body:not(.dark) .modern-tb-btn,body:not(.dark) .modern-tb-btn *{
+    color:#ffffff!important;-webkit-text-fill-color:#ffffff!important;
+}
+body:not(.dark) .modern-tb-btn .tb-svg{stroke:#ffffff!important}
+.dark .modern-tb-btn,.dark .modern-tb-btn *{
+    color:#ffffff!important;-webkit-text-fill-color:#ffffff!important;
+}
+.dark .modern-tb-btn .tb-svg{stroke:#ffffff!important}
+.gradio-container .modern-tb-btn,.gradio-container .modern-tb-btn *{
+    color:#ffffff!important;-webkit-text-fill-color:#ffffff!important;
+}
+.gradio-container .modern-tb-btn .tb-svg{stroke:#ffffff!important}
+
 /* ── Main Layout ── */
 .app-main-row{display:flex;gap:0;flex:1;overflow:hidden}
 .app-main-left{
@@ -321,6 +339,49 @@ footer{display:none!important}
     color:#FF6633;transform:translateY(-1px);
 }
 
+/* ── Quick Examples ── */
+.examples-section{border-top:1px solid #27272a;padding:12px 16px}
+.examples-title{
+    font-size:12px;font-weight:600;color:#71717a;text-transform:uppercase;
+    letter-spacing:.8px;margin-bottom:10px;
+}
+.examples-scroll{
+    display:flex;gap:10px;overflow-x:auto;padding-bottom:8px;
+}
+.examples-scroll::-webkit-scrollbar{height:6px}
+.examples-scroll::-webkit-scrollbar-track{background:#09090b;border-radius:3px}
+.examples-scroll::-webkit-scrollbar-thumb{background:#27272a;border-radius:3px}
+.examples-scroll::-webkit-scrollbar-thumb:hover{background:#3f3f46}
+.example-card{
+    flex-shrink:0;width:210px;background:#09090b;border:1px solid #27272a;
+    border-radius:10px;overflow:hidden;cursor:pointer;transition:all .2s ease;
+}
+.example-card:hover{
+    border-color:#FF4500;transform:translateY(-2px);
+    box-shadow:0 4px 12px rgba(255,69,0,.15);
+}
+.example-card.loading{opacity:.6;pointer-events:none}
+.example-thumbs{display:flex;height:110px;overflow:hidden;background:#18181b}
+.example-thumbs img{
+    flex:1;object-fit:cover;min-width:0;
+    border-bottom:1px solid #27272a;
+}
+.example-thumb-placeholder{
+    flex:1;display:flex;align-items:center;justify-content:center;
+    background:#18181b;color:#3f3f46;font-size:11px;min-width:0;
+}
+.example-meta{padding:6px 10px;display:flex;align-items:center;gap:6px}
+.example-badge{
+    display:inline-flex;padding:2px 7px;
+    background:rgba(255,69,0,.1);border-radius:4px;
+    font-size:10px;font-weight:600;color:#FF6633;
+    font-family:'JetBrains Mono',monospace;white-space:nowrap;
+}
+.example-prompt-text{
+    padding:0 10px 8px;font-size:11px;color:#a1a1aa;line-height:1.4;
+    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
+}
+
 /* ── Right Panel Cards ── */
 .panel-card{border-bottom:1px solid #27272a}
 .panel-card-title{
@@ -337,8 +398,46 @@ footer{display:none!important}
 }
 .modern-textarea:focus{border-color:#FF4500;box-shadow:0 0 0 3px rgba(255,69,0,.15)}
 .modern-textarea::placeholder{color:#3f3f46}
-
-/* ── Primary Button — White text+SVG in ALL themes ── */
+.modern-textarea.error-flash{
+    border-color:#ef4444!important;
+    box-shadow:0 0 0 3px rgba(239,68,68,.2)!important;
+    animation:shake .4s ease;
+}
+@keyframes shake{
+    0%,100%{transform:translateX(0)}
+    20%,60%{transform:translateX(-4px)}
+    40%,80%{transform:translateX(4px)}
+}
+
+/* ── Toast ── */
+.toast-notification{
+    position:fixed;top:24px;left:50%;transform:translateX(-50%) translateY(-120%);
+    z-index:9999;padding:10px 24px;border-radius:10px;
+    font-family:'Inter',sans-serif;font-size:14px;font-weight:600;
+    display:flex;align-items:center;gap:8px;
+    box-shadow:0 8px 24px rgba(0,0,0,.5);
+    transition:transform .35s cubic-bezier(.34,1.56,.64,1),opacity .35s ease;
+    opacity:0;pointer-events:none;
+}
+.toast-notification.visible{
+    transform:translateX(-50%) translateY(0);opacity:1;pointer-events:auto;
+}
+.toast-notification.error{
+    background:linear-gradient(135deg,#dc2626,#b91c1c);
+    color:#fff;border:1px solid rgba(255,255,255,.15);
+}
+.toast-notification.warning{
+    background:linear-gradient(135deg,#d97706,#b45309);
+    color:#fff;border:1px solid rgba(255,255,255,.15);
+}
+.toast-notification.info{
+    background:linear-gradient(135deg,#2563eb,#1d4ed8);
+    color:#fff;border:1px solid rgba(255,255,255,.15);
+}
+.toast-notification .toast-icon{font-size:16px;line-height:1}
+.toast-notification .toast-text{line-height:1.3}
+
+/* ── Primary Button ── */
 .btn-run{
     display:flex;align-items:center;justify-content:center;gap:8px;
     width:100%;background:linear-gradient(135deg,#FF4500,#E63E00);
@@ -360,14 +459,8 @@ footer{display:none!important}
 .btn-run:focus{color:#ffffff!important;-webkit-text-fill-color:#ffffff!important}
 .btn-run svg{width:18px;height:18px;fill:#ffffff!important;color:#ffffff!important}
 .btn-run svg path{fill:#ffffff!important;color:#ffffff!important}
-.btn-run span,
-.btn-run #run-btn-label,
-#run-btn-label{color:#ffffff!important;-webkit-text-fill-color:#ffffff!important}
-
-/* Force white on run button — every selector/theme */
-#custom-run-btn,#custom-run-btn *,#custom-run-btn span,
-#custom-run-btn svg,#custom-run-btn svg *,#custom-run-btn svg path,
-#custom-run-btn #run-btn-label,.btn-run *{
+.btn-run span,#run-btn-label{color:#ffffff!important;-webkit-text-fill-color:#ffffff!important}
+#custom-run-btn,#custom-run-btn *,.btn-run *{
     color:#ffffff!important;-webkit-text-fill-color:#ffffff!important;fill:#ffffff!important;
 }
 body:not(.dark) .btn-run,body:not(.dark) .btn-run *,body:not(.dark) #custom-run-btn,
@@ -383,17 +476,6 @@ body:not(.dark) #custom-run-btn *,body:not(.dark) #run-btn-label{
     color:#ffffff!important;-webkit-text-fill-color:#ffffff!important;fill:#ffffff!important;
 }
 
-/* ── Toolbar btn white in all themes ── */
-body:not(.dark) .modern-tb-btn,body:not(.dark) .modern-tb-btn *{
-    color:#ffffff!important;-webkit-text-fill-color:#ffffff!important;
-}
-.dark .modern-tb-btn,.dark .modern-tb-btn *{
-    color:#ffffff!important;-webkit-text-fill-color:#ffffff!important;
-}
-.gradio-container .modern-tb-btn,.gradio-container .modern-tb-btn *{
-    color:#ffffff!important;-webkit-text-fill-color:#ffffff!important;
-}
-
 /* ── Output Frames ── */
 .output-frame{
     border-bottom:1px solid #27272a;display:flex;flex-direction:column;position:relative;
@@ -412,7 +494,6 @@ body:not(.dark) .modern-tb-btn,body:not(.dark) .modern-tb-btn *{
 }
 .output-frame .out-body img{max-width:100%;max-height:460px;image-rendering:auto}
 .output-frame .out-placeholder{color:#3f3f46;font-size:13px;text-align:center;padding:20px}
-
 .out-download-btn{
     display:none;align-items:center;justify-content:center;
     background:rgba(255,69,0,.1);border:1px solid rgba(255,69,0,.2);
@@ -501,7 +582,6 @@ body:not(.dark) .modern-tb-btn,body:not(.dark) .modern-tb-btn *{
     opacity:0.01;pointer-events:none;overflow:hidden;
 }
 
-/* ── Experimental Note ── */
 .exp-note{
     padding:10px 20px;font-size:12px;color:#52525b;border-top:1px solid #27272a;
     text-align:center;
@@ -509,7 +589,6 @@ body:not(.dark) .modern-tb-btn,body:not(.dark) .modern-tb-btn *{
 .exp-note a{color:#FF6633;text-decoration:none}
 .exp-note a:hover{text-decoration:underline}
 
-/* ── Dark mode extras ── */
 .dark .app-shell{background:#18181b}
 .dark .upload-prompt-modern{background:transparent}
 .dark .panel-card{background:#18181b}
@@ -519,13 +598,11 @@ body:not(.dark) .modern-tb-btn,body:not(.dark) .modern-tb-btn *{
 .dark .out-download-btn{color:#FF8C66!important}
 .dark .out-download-btn:hover{color:#ffffff!important}
 
-/* ── Scrollbar ── */
 ::-webkit-scrollbar{width:8px;height:8px}
 ::-webkit-scrollbar-track{background:#09090b}
 ::-webkit-scrollbar-thumb{background:#27272a;border-radius:4px}
 ::-webkit-scrollbar-thumb:hover{background:#3f3f46}
 
-/* ── Responsive ── */
 @media(max-width:840px){
     .app-main-row{flex-direction:column}
     .app-main-right{width:100%}
@@ -561,6 +638,37 @@ function init() {
     let images = [];
     window.__uploadedImages = images;
     let selectedIdx = -1;
+    let toastTimer = null;
+
+    /* ── Toast ── */
+    function showToast(message, type) {
+        let toast = document.getElementById('app-toast');
+        if (!toast) {
+            toast = document.createElement('div');
+            toast.id = 'app-toast';
+            toast.className = 'toast-notification';
+            toast.innerHTML = '<span class="toast-icon"></span><span class="toast-text"></span>';
+            document.body.appendChild(toast);
+        }
+        const icon = toast.querySelector('.toast-icon');
+        const text = toast.querySelector('.toast-text');
+        toast.className = 'toast-notification ' + (type || 'error');
+        if (type === 'warning') icon.textContent = '\u26A0';
+        else if (type === 'info') icon.textContent = '\u2139';
+        else icon.textContent = '\u2717';
+        text.textContent = message;
+        if (toastTimer) clearTimeout(toastTimer);
+        void toast.offsetWidth;
+        toast.classList.add('visible');
+        toastTimer = setTimeout(() => toast.classList.remove('visible'), 3500);
+    }
+
+    function flashPromptError() {
+        if (!promptInput) return;
+        promptInput.classList.add('error-flash');
+        promptInput.focus();
+        setTimeout(() => promptInput.classList.remove('error-flash'), 800);
+    }
 
     function setGradioValue(containerId, value) {
         const container = document.getElementById(containerId);
@@ -600,6 +708,7 @@ function init() {
         renderGallery();
         syncImagesToGradio();
     }
+    window.__addImage = addImage;
 
     function removeImage(idx) {
         images.splice(idx, 1);
@@ -616,6 +725,7 @@ function init() {
         renderGallery();
         syncImagesToGradio();
     }
+    window.__clearAll = clearAll;
 
     function selectImage(idx) {
         selectedIdx = (selectedIdx === idx) ? -1 : idx;
@@ -698,6 +808,91 @@ function init() {
         if (promptInput) { promptInput.value = text; syncPromptToGradio(); }
     };
 
+    /* ── Example Loading ── */
+    const EXAMPLES = [
+        {
+            images: ["examples/1.jpg"],
+            prompt: "cinematic polaroid with soft grain subtle vignette gentle lighting white frame handwritten photographed 'Fire-Edit' preserving realistic texture and details."
+        },
+        {
+            images: ["examples/2.jpg"],
+            prompt: "Transform the image into a dotted cartoon style."
+        },
+        {
+            images: ["examples/3.jpeg"],
+            prompt: "Convert it to black and white."
+        },
+        {
+            images: ["examples/4.jpg", "examples/5.jpg"],
+            prompt: "Replace her glasses with the new glasses from image 1."
+        },
+        {
+            images: ["examples/8.jpg", "examples/9.png"],
+            prompt: "Replace the current clothing with the clothing from the reference image 2. Keep the person's face, hairstyle, body pose, background, lighting, and camera angle unchanged. Ensure the new outfit fits naturally with realistic fabric texture, proper shadows, folds, and accurate proportions. Match the lighting, color tone, and overall style for a seamless and high-quality result."
+        },
+        {
+            images: ["examples/10.jpg", "examples/11.png"],
+            prompt: "Replace the current clothing with the clothing from the reference image 2. Keep the person's face, hairstyle, body pose, background, lighting, and camera angle unchanged. Ensure the new outfit fits naturally with realistic fabric texture, proper shadows, folds, and accurate proportions. Match the lighting, color tone, and overall style for a seamless and high-quality result."
+        }
+    ];
+
+    async function fetchImageAsBase64(path) {
+        const urls = ['/file=' + path, 'file/' + path, path, './' + path];
+        for (const url of urls) {
+            try {
+                const resp = await fetch(url);
+                if (resp.ok && resp.headers.get('content-type') &&
+                    resp.headers.get('content-type').startsWith('image')) {
+                    const blob = await resp.blob();
+                    return await new Promise((resolve) => {
+                        const reader = new FileReader();
+                        reader.onload = () => resolve(reader.result);
+                        reader.readAsDataURL(blob);
+                    });
+                }
+            } catch (e) {}
+        }
+        return null;
+    }
+
+    async function loadExample(idx) {
+        if (idx < 0 || idx >= EXAMPLES.length) return;
+        const ex = EXAMPLES[idx];
+
+        const card = document.querySelector('.example-card[data-idx="' + idx + '"]');
+        if (card) card.classList.add('loading');
+
+        showToast('Loading example...', 'info');
+
+        clearAll();
+
+        if (promptInput) { promptInput.value = ex.prompt; syncPromptToGradio(); }
+
+        for (const path of ex.images) {
+            const b64 = await fetchImageAsBase64(path);
+            if (b64) {
+                addImage(b64, path.split('/').pop());
+            } else {
+                console.warn('Could not load example image:', path);
+            }
+        }
+
+        if (card) card.classList.remove('loading');
+
+        if (images.length > 0) {
+            showToast('Example loaded — ' + images.length + ' image(s)', 'info');
+        } else {
+            showToast('Could not load example images', 'warning');
+        }
+    }
+    window.__loadExample = loadExample;
+
+    document.querySelectorAll('.example-card[data-idx]').forEach(card => {
+        card.addEventListener('click', () => {
+            loadExample(parseInt(card.getAttribute('data-idx')));
+        });
+    });
+
     function syncSlider(customId, gradioId) {
         const slider = document.getElementById(customId);
         const valSpan = document.getElementById(customId + '-val');
@@ -745,7 +940,28 @@ function init() {
     window.__showLoader = showLoader;
     window.__hideLoader = hideLoader;
 
+    function validateBeforeRun() {
+        const promptVal = promptInput ? promptInput.value.trim() : '';
+        const hasImages = images.length > 0;
+        if (!hasImages && !promptVal) {
+            showToast('Please upload an image and enter a prompt', 'error');
+            flashPromptError();
+            return false;
+        }
+        if (!hasImages) {
+            showToast('Please upload at least one image', 'error');
+            return false;
+        }
+        if (!promptVal) {
+            showToast('Please enter an edit prompt', 'warning');
+            flashPromptError();
+            return false;
+        }
+        return true;
+    }
+
     window.__clickGradioRunBtn = function() {
+        if (!validateBeforeRun()) return;
         syncPromptToGradio();
         syncImagesToGradio();
         showLoader();
@@ -834,6 +1050,14 @@ watchSeed();
 
 DOWNLOAD_SVG = '<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 16l-5-5h3V4h4v7h3l-5 5z"/><path d="M20 18H4v2h16v-2z"/></svg>'
 
+UPLOAD_SVG = '<svg class="tb-svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>'
+
+REMOVE_SVG = '<svg class="tb-svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/></svg>'
+
+CLEAR_SVG = '<svg class="tb-svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6m3 0V4a2 2 0 012-2h4a2 2 0 012 2v2"/><line x1="10" y1="11" x2="10" y2="17"/><line x1="14" y1="11" x2="14" y2="17"/></svg>'
+
+FIRE_LOGO_SVG = '<svg viewBox="0 0 24 24" fill="white" xmlns="http://www.w3.org/2000/svg"><path d="M12 23c-3.6 0-8-2.69-8-7.5 0-3.5 3-6.5 4.5-8 .27-.27.75-.08.75.28v2.44c0 .42.5.63.72.28C12.28 7.5 13 3 13 1c0-.42.48-.64.8-.35C18 4.5 20 9 20 12c0 5.5-3.5 11-8 11z"/></svg>'
+
 with gr.Blocks() as demo:
 
     hidden_images_b64 = gr.Textbox(
@@ -868,32 +1092,32 @@ with gr.Blocks() as demo:
     gr.HTML(f"""
     <div class="app-shell">
 
-        <!-- ══ Header ══ -->
+        <!-- Header -->
         <div class="app-header">
             <div class="app-header-left">
-                <div class="app-logo">🔥</div>
+                <div class="app-logo">{FIRE_LOGO_SVG}</div>
                 <span class="app-title">FireRed-Image-Edit</span>
                 <span class="app-badge">v1.1</span>
                 <span class="app-badge fast">4-Step Fast</span>
             </div>
         </div>
 
-        <!-- ══ Toolbar ══ -->
+        <!-- Toolbar -->
         <div class="app-toolbar">
             <button id="tb-upload" class="modern-tb-btn" title="Upload images">
-                <span class="tb-icon">📁</span><span class="tb-label">Upload</span>
+                {UPLOAD_SVG}<span class="tb-label">Upload</span>
             </button>
             <button id="tb-remove" class="modern-tb-btn" title="Remove selected image">
-                <span class="tb-icon">✕</span><span class="tb-label">Remove</span>
+                {REMOVE_SVG}<span class="tb-label">Remove</span>
             </button>
             <button id="tb-clear" class="modern-tb-btn" title="Clear all images">
-                <span class="tb-icon">✖</span><span class="tb-label">Clear All</span>
+                {CLEAR_SVG}<span class="tb-label">Clear All</span>
             </button>
             <div class="tb-sep"></div>
             <span id="tb-image-count" class="tb-info">No images</span>
         </div>
 
-        <!-- ══ Main ══ -->
+        <!-- Main -->
         <div class="app-main-row">
 
             <!-- Left: Gallery -->
@@ -924,16 +1148,95 @@ with gr.Blocks() as demo:
                 <div class="suggestions-section">
                     <div class="suggestions-title">Quick Prompts</div>
                     <div class="suggestions-wrap">
-                        <button class="suggestion-chip" onclick="window.__setPrompt('Transform the image into a dotted cartoon style.')">🎨 Cartoon</button>
-                        <button class="suggestion-chip" onclick="window.__setPrompt('Convert it to black and white.')">⚫ B&amp;W</button>
-                        <button class="suggestion-chip" onclick="window.__setPrompt('Add cinematic lighting with warm orange tones and film grain.')">🎬 Cinematic</button>
-                        <button class="suggestion-chip" onclick="window.__setPrompt('Transform into anime style illustration.')">✨ Anime</button>
-                        <button class="suggestion-chip" onclick="window.__setPrompt('Apply oil painting effect with visible brush strokes.')">🖌️ Oil Paint</button>
-                        <button class="suggestion-chip" onclick="window.__setPrompt('Enhance and upscale with more detail and clarity.')">🔍 Enhance</button>
-                        <button class="suggestion-chip" onclick="window.__setPrompt('Make it look like a watercolor painting with soft edges.')">💧 Watercolor</button>
-                        <button class="suggestion-chip" onclick="window.__setPrompt('Add dramatic sunset sky and warm lighting.')">🌅 Sunset</button>
+                        <button class="suggestion-chip" onclick="window.__setPrompt('Transform the image into a dotted cartoon style.')">Cartoon Style</button>
+                        <button class="suggestion-chip" onclick="window.__setPrompt('Convert it to black and white.')">Black and White</button>
+                        <button class="suggestion-chip" onclick="window.__setPrompt('Add cinematic lighting with warm orange tones and film grain.')">Cinematic</button>
+                        <button class="suggestion-chip" onclick="window.__setPrompt('Transform into anime style illustration.')">Anime Style</button>
+                        <button class="suggestion-chip" onclick="window.__setPrompt('Apply oil painting effect with visible brush strokes.')">Oil Painting</button>
+                        <button class="suggestion-chip" onclick="window.__setPrompt('Enhance and upscale with more detail and clarity.')">Enhance</button>
+                        <button class="suggestion-chip" onclick="window.__setPrompt('Make it look like a watercolor painting with soft edges.')">Watercolor</button>
+                        <button class="suggestion-chip" onclick="window.__setPrompt('Add dramatic sunset sky and warm lighting.')">Sunset Glow</button>
+                        <button class="suggestion-chip" onclick="window.__setPrompt('Convert to detailed pencil sketch with cross-hatching and shading.')">Pencil Sketch</button>
+                        <button class="suggestion-chip" onclick="window.__setPrompt('Apply pop art style with bold colors and halftone patterns.')">Pop Art</button>
+                        <button class="suggestion-chip" onclick="window.__setPrompt('Apply a vintage retro film look with faded colors and light leaks.')">Vintage Retro</button>
+                        <button class="suggestion-chip" onclick="window.__setPrompt('Add neon glow effects with vibrant colors against a dark background.')">Neon Glow</button>
+                        <button class="suggestion-chip" onclick="window.__setPrompt('Convert to pixel art style with a retro 16-bit aesthetic.')">Pixel Art</button>
+                        <button class="suggestion-chip" onclick="window.__setPrompt('Simplify into a clean minimalist illustration with flat colors.')">Minimalist</button>
+                        <button class="suggestion-chip" onclick="window.__setPrompt('Convert to low poly 3D geometric art style.')">Low Poly 3D</button>
+                        <button class="suggestion-chip" onclick="window.__setPrompt('Transform into comic book style with bold outlines and cel shading.')">Comic Book</button>
+                    </div>
+                </div>
+
+                <div class="examples-section">
+                    <div class="examples-title">Quick Examples</div>
+                    <div class="examples-scroll">
+
+                        <div class="example-card" data-idx="0">
+                            <div class="example-thumbs">
+                                <img src="/file=examples/1.jpg" onerror="this.parentElement.innerHTML='<div class=example-thumb-placeholder>Preview</div>'" alt="">
+                            </div>
+                            <div class="example-meta">
+                                <span class="example-badge">1 image</span>
+                            </div>
+                            <div class="example-prompt-text">Cinematic polaroid with soft grain, subtle vignette, gentle lighting...</div>
+                        </div>
+
+                        <div class="example-card" data-idx="1">
+                            <div class="example-thumbs">
+                                <img src="/file=examples/2.jpg" onerror="this.parentElement.innerHTML='<div class=example-thumb-placeholder>Preview</div>'" alt="">
+                            </div>
+                            <div class="example-meta">
+                                <span class="example-badge">1 image</span>
+                            </div>
+                            <div class="example-prompt-text">Transform the image into a dotted cartoon style.</div>
+                        </div>
+
+                        <div class="example-card" data-idx="2">
+                            <div class="example-thumbs">
+                                <img src="/file=examples/3.jpeg" onerror="this.parentElement.innerHTML='<div class=example-thumb-placeholder>Preview</div>'" alt="">
+                            </div>
+                            <div class="example-meta">
+                                <span class="example-badge">1 image</span>
+                            </div>
+                            <div class="example-prompt-text">Convert it to black and white.</div>
+                        </div>
+
+                        <div class="example-card" data-idx="3">
+                            <div class="example-thumbs">
+                                <img src="/file=examples/4.jpg" onerror="this.parentElement.innerHTML='<div class=example-thumb-placeholder>Preview</div>'" alt="">
+                                <img src="/file=examples/5.jpg" onerror="this.parentElement.innerHTML='<div class=example-thumb-placeholder>Preview</div>'" alt="">
+                            </div>
+                            <div class="example-meta">
+                                <span class="example-badge">2 images</span>
+                            </div>
+                            <div class="example-prompt-text">Replace her glasses with the new glasses from image 1.</div>
+                        </div>
+
+                        <div class="example-card" data-idx="4">
+                            <div class="example-thumbs">
+                                <img src="/file=examples/8.jpg" onerror="this.parentElement.innerHTML='<div class=example-thumb-placeholder>Preview</div>'" alt="">
+                                <img src="/file=examples/9.png" onerror="this.parentElement.innerHTML='<div class=example-thumb-placeholder>Preview</div>'" alt="">
+                            </div>
+                            <div class="example-meta">
+                                <span class="example-badge">2 images</span>
+                            </div>
+                            <div class="example-prompt-text">Replace clothing with reference. Keep face, pose, and background unchanged...</div>
+                        </div>
+
+                        <div class="example-card" data-idx="5">
+                            <div class="example-thumbs">
+                                <img src="/file=examples/10.jpg" onerror="this.parentElement.innerHTML='<div class=example-thumb-placeholder>Preview</div>'" alt="">
+                                <img src="/file=examples/11.png" onerror="this.parentElement.innerHTML='<div class=example-thumb-placeholder>Preview</div>'" alt="">
+                            </div>
+                            <div class="example-meta">
+                                <span class="example-badge">2 images</span>
+                            </div>
+                            <div class="example-prompt-text">Replace clothing with reference. Keep face, pose, and background unchanged...</div>
+                        </div>
+
                     </div>
                 </div>
+
             </div>
 
             <!-- Right: Controls & Output -->
@@ -964,7 +1267,7 @@ with gr.Blocks() as demo:
                     <div class="out-body" id="output-image-container">
                         <div class="modern-loader" id="output-loader">
                             <div class="loader-spinner"></div>
-                            <div class="loader-text">Processing image…</div>
+                            <div class="loader-text">Processing image...</div>
                             <div class="loader-bar-track"><div class="loader-bar-fill"></div></div>
                         </div>
                         <div class="out-placeholder" id="output-placeholder">Result will appear here</div>
@@ -999,13 +1302,13 @@ with gr.Blocks() as demo:
             </div>
         </div>
 
-        <!-- ══ Note ══ -->
+        <!-- Note -->
         <div class="exp-note">
             Experimental Space for <a href="https://huggingface.co/FireRedTeam/FireRed-Image-Edit-1.1" target="_blank">FireRed-Image-Edit-1.1</a>
-            · Open on <a href="https://github.com/PRITHIVSAKTHIUR/FireRed-Image-Edit-1.0-Fast" target="_blank">GitHub</a>
+            &middot; Open on <a href="https://github.com/PRITHIVSAKTHIUR/FireRed-Image-Edit-1.0-Fast" target="_blank">GitHub</a>
         </div>
 
-        <!-- ══ Status Bar ══ -->
+        <!-- Status Bar -->
         <div class="app-statusbar">
             <div class="sb-section" id="sb-image-count">No images uploaded</div>
             <div class="sb-section sb-fixed">Ready</div>
@@ -1035,5 +1338,9 @@ with gr.Blocks() as demo:
 
 if __name__ == "__main__":
     demo.queue(max_size=30).launch(
-        css=css, mcp_server=True, ssr_mode=False, show_error=True
+        css=css,
+        mcp_server=True,
+        ssr_mode=False,
+        show_error=True,
+        allowed_paths=["examples"],
     )