Upload folder using huggingface_hub

app.py

@@ -97,6 +97,21 @@ PRESETS = {
     },
 }
 
+# One example image per preset, swapped in when a preset chip is clicked.
+EXAMPLE_IMAGES = {
+    "wood": "sample_wood.png",
+    "receipt": "ex_receipt.jpg",
+    "nutrition": "ex_nutrition.jpg",
+    "card": "ex_card.jpg",
+    "product": "ex_product.jpg",
+}
+
+
+def load_example(key):
+    path = EXAMPLE_IMAGES.get(key)
+    return path if path else gr.update()
+
+
 # --------------------------------------------------------------------------- #
 #  Inference                                                                   #
 # --------------------------------------------------------------------------- #
@@ -263,7 +278,14 @@ const LQ_PRESETS = __PRESETS__;
     row.querySelector('.lq-del').addEventListener('click', () => { row.remove(); syncStore(mount); });
     mount.querySelector('#lq-rows').appendChild(row);
   }
-  function loadPreset(mount, key) {
+  function setPreset(key) {
+    const store = document.querySelector('#lq-preset-store textarea');
+    if (!store) return;
+    const setter = Object.getOwnPropertyDescriptor(window.HTMLTextAreaElement.prototype, 'value').set;
+    setter.call(store, key);
+    store.dispatchEvent(new Event('input', { bubbles: true }));
+  }
+  function loadPreset(mount, key, swapImage) {
     const p = LQ_PRESETS[key];
     if (!p) return;
     mount.querySelector('#lq-rows').innerHTML = '';
@@ -271,6 +293,7 @@ const LQ_PRESETS = __PRESETS__;
     mount.querySelectorAll('.lq-chip').forEach(c =>
       c.classList.toggle('active', c.dataset.preset === key));
     syncStore(mount);
+    if (swapImage) setPreset(key);
   }
   function init() {
     const mount = document.getElementById('lq-schema-builder');
@@ -284,9 +307,9 @@ const LQ_PRESETS = __PRESETS__;
     mount.innerHTML = chips + '<div id="lq-rows"></div>' +
       '<button class="lq-add" id="lq-add">+ add field</button>';
     mount.querySelectorAll('.lq-chip').forEach(c =>
-      c.addEventListener('click', () => loadPreset(mount, c.dataset.preset)));
+      c.addEventListener('click', () => loadPreset(mount, c.dataset.preset, true)));
     mount.querySelector('#lq-add').addEventListener('click', () => { makeRow(mount, '', ''); });
-    loadPreset(mount, Object.keys(LQ_PRESETS)[0]);
+    loadPreset(mount, Object.keys(LQ_PRESETS)[0], false);
   }
   setInterval(init, 250);
 
@@ -318,8 +341,8 @@ const LQ_PRESETS = __PRESETS__;
 
 CSS = """
 :root { --lq-orange:#ff7a00; --lq-amber:#ffb000; --lq-lime:#c6e600; }
-.gradio-container { max-width: 1280px !important; }
-#lq-schema-store { display: none !important; }
+.gradio-container { max-width: 1280px !important; margin: 0 auto !important; }
+#lq-schema-store, #lq-preset-store { display: none !important; }
 
 #lq-hero {
   border-radius: 22px; padding: 26px 30px; margin-bottom: 6px;
@@ -328,8 +351,7 @@ CSS = """
   box-shadow: 0 10px 30px -16px rgba(255,140,0,.55);
 }
 #lq-hero h1 { margin:0; font-size: 2.05rem; font-weight: 800; letter-spacing:-.02em;
-  background: linear-gradient(90deg,var(--lq-orange),var(--lq-amber) 60%,#8aa800);
-  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
+  color:#e0590a; -webkit-text-fill-color:#e0590a; text-shadow:0 1px 0 rgba(255,255,255,.4); }
 #lq-hero p { margin:.4rem 0 0; color:#7a5a16; font-size:.98rem; max-width: 70ch; }
 #lq-hero .lq-badges { margin-top:.7rem; display:flex; gap:.5rem; flex-wrap:wrap; }
 #lq-hero .lq-badge { font-size:.74rem; font-weight:700; padding:.28rem .62rem; border-radius:999px;
@@ -429,12 +451,14 @@ with gr.Blocks(title="Liquid Image → JSON") as demo:
             gr.Markdown("**Extraction schema** — pick a preset or craft your own fields")
             gr.HTML('<div id="lq-schema-builder"></div>')
             schema_store = gr.Textbox(elem_id="lq-schema-store", value="[]")
+            preset_store = gr.Textbox(elem_id="lq-preset-store", value="")
             go = gr.Button("💧 Extract JSON", variant="primary", elem_id="lq-go")
 
         with gr.Column(scale=5):
             result = gr.HTML(placeholder_html())
 
     go.click(extract, [image, model_key, schema_store], result)
+    preset_store.change(load_example, preset_store, image)
 
 if __name__ == "__main__":
     demo.queue(max_size=20).launch(