Upload folder using huggingface_hub

.gitattributes

@@ -34,3 +34,4 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
 sample_wood.png filter=lfs diff=lfs merge=lfs -text
+ex_nutrition.jpg filter=lfs diff=lfs merge=lfs -text

app.py

@@ -46,41 +46,41 @@ for key, mid in MODEL_IDS.items():
 # --------------------------------------------------------------------------- #
 #  Schema presets — fill the visual field builder with a single click.        #
 # --------------------------------------------------------------------------- #
+# Each example's fields are tailored to what is actually visible in its image.
 PRESETS = {
     "wood": {
         "label": "🪵 Wood surface",
         "fields": [
             {"name": "wood_color", "description": "The overall coloration of the wood surface"},
             {"name": "wood_texture", "description": "The tactile quality of the wood surface"},
-            {"name": "wood_pattern", "description": "The pattern types visible on the wood surface"},
+            {"name": "grain_pattern", "description": "The pattern of the wood grain"},
         ],
     },
     "receipt": {
         "label": "🧾 Receipt",
         "fields": [
-            {"name": "merchant", "description": "Name of the store or business"},
-            {"name": "date", "description": "Date of the transaction"},
-            {"name": "total", "description": "Final total amount paid"},
-            {"name": "currency", "description": "Currency symbol or code"},
-            {"name": "payment_method", "description": "How the bill was paid"},
+            {"name": "total_amount", "description": "The total amount printed on the receipt"},
+            {"name": "cash_paid", "description": "The amount of cash tendered"},
+            {"name": "change_due", "description": "The change given back"},
+            {"name": "gst_rate", "description": "The GST / tax percentage shown"},
         ],
     },
     "nutrition": {
         "label": "🥫 Nutrition label",
         "fields": [
-            {"name": "serving_size", "description": "The stated serving size"},
-            {"name": "calories", "description": "Calories per serving"},
-            {"name": "protein_g", "description": "Grams of protein per serving"},
-            {"name": "fat_g", "description": "Grams of total fat per serving"},
-            {"name": "carbs_g", "description": "Grams of total carbohydrate per serving"},
+            {"name": "product_name", "description": "The name of the product on the label"},
+            {"name": "brand", "description": "The brand shown on the label"},
+            {"name": "net_weight", "description": "The net or drained weight"},
+            {"name": "servings_per_container", "description": "Number of servings per container"},
+            {"name": "best_before_date", "description": "The best-before or expiry date"},
         ],
     },
     "card": {
         "label": "💼 Business card",
         "fields": [
-            {"name": "name", "description": "Full name of the person"},
-            {"name": "title", "description": "Job title or role"},
-            {"name": "company", "description": "Company or organization name"},
+            {"name": "full_name", "description": "The person's full name"},
+            {"name": "job_title", "description": "Their job title or role"},
+            {"name": "company", "description": "Company name or website"},
             {"name": "email", "description": "Email address"},
             {"name": "phone", "description": "Phone number"},
         ],
@@ -88,11 +88,11 @@ PRESETS = {
     "product": {
         "label": "🛍️ Product photo",
         "fields": [
-            {"name": "product_name", "description": "What the product is"},
-            {"name": "brand", "description": "Brand or maker, if visible"},
-            {"name": "primary_color", "description": "Dominant color of the product"},
-            {"name": "category", "description": "Product category"},
-            {"name": "condition", "description": "Apparent condition: new, used, worn"},
+            {"name": "product_type", "description": "What kind of product this is"},
+            {"name": "brand", "description": "The brand, if a logo is visible"},
+            {"name": "primary_color", "description": "The dominant color of the product"},
+            {"name": "accent_colors", "description": "Secondary or accent colors"},
+            {"name": "closure_type", "description": "How the item fastens or closes"},
         ],
     },
 }
@@ -285,32 +285,38 @@ const LQ_PRESETS = __PRESETS__;
     setter.call(store, key);
     store.dispatchEvent(new Event('input', { bubbles: true }));
   }
-  function loadPreset(mount, key, swapImage) {
+  function loadPreset(mount, key) {
     const p = LQ_PRESETS[key];
-    if (!p) return;
+    if (!p || !mount) return;
     mount.querySelector('#lq-rows').innerHTML = '';
     p.fields.forEach(f => makeRow(mount, f.name, f.description));
-    mount.querySelectorAll('.lq-chip').forEach(c =>
-      c.classList.toggle('active', c.dataset.preset === key));
     syncStore(mount);
-    if (swapImage) setPreset(key);
+    setPreset(key);
   }
-  function init() {
+  function initBuilder() {
     const mount = document.getElementById('lq-schema-builder');
     if (!mount || mount.dataset.ready) return;
     mount.dataset.ready = '1';
-    let chips = '<div class="lq-presets">';
-    Object.keys(LQ_PRESETS).forEach(k => {
-      chips += '<button class="lq-chip" data-preset="' + k + '">' + LQ_PRESETS[k].label + '</button>';
-    });
-    chips += '</div>';
-    mount.innerHTML = chips + '<div id="lq-rows"></div>' +
+    mount.innerHTML = '<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, true)));
     mount.querySelector('#lq-add').addEventListener('click', () => { makeRow(mount, '', ''); });
-    loadPreset(mount, Object.keys(LQ_PRESETS)[0], false);
+    makeRow(mount, '', ''); makeRow(mount, '', ''); makeRow(mount, '', '');
+    syncStore(mount);
+  }
+  function initExamples() {
+    const ex = document.getElementById('lq-examples');
+    if (!ex || ex.dataset.ready) return;
+    ex.dataset.ready = '1';
+    let html = '<div class="lq-ex-label">Examples — click to try one</div><div class="lq-ex-grid">';
+    Object.keys(LQ_PRESETS).forEach(k => {
+      html += '<button class="lq-ex" data-preset="' + k + '">' + LQ_PRESETS[k].label + '</button>';
+    });
+    html += '</div>';
+    ex.innerHTML = html;
+    ex.querySelectorAll('.lq-ex').forEach(c => c.addEventListener('click', () =>
+      loadPreset(document.getElementById('lq-schema-builder'), c.dataset.preset)));
   }
+  function init() { initBuilder(); initExamples(); }
   setInterval(init, 250);
 
   document.addEventListener('click', function (e) {
@@ -344,27 +350,13 @@ CSS = """
 .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;
-  background: linear-gradient(115deg,#fff4e0 0%,#ffe9b8 45%,#f2ffce 100%);
-  border: 1px solid rgba(255,150,0,.25);
-  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;
-  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;
-  background:rgba(255,255,255,.7); color:#a85f00; border:1px solid rgba(255,150,0,.3); }
+#lq-hero { padding: 6px 2px 2px; margin-bottom: 2px; }
+#lq-hero h1 { margin:0; font-size: 1.75rem; font-weight: 800; letter-spacing:-.02em;
+  color:#e0590a; -webkit-text-fill-color:#e0590a; }
+#lq-hero p { margin:.3rem 0 0; color:#8a6a2a; font-size:.95rem; max-width: 72ch; }
 
 /* schema builder */
 #lq-schema-builder { display:block; }
-.lq-presets { display:flex; flex-wrap:wrap; gap:.4rem; margin-bottom:.7rem; }
-.lq-chip { border:1px solid rgba(255,150,0,.35); background:#fff; color:#a85f00;
-  border-radius:999px; padding:.34rem .7rem; font-size:.82rem; font-weight:600; cursor:pointer;
-  transition:all .12s ease; }
-.lq-chip:hover { transform:translateY(-1px); box-shadow:0 4px 12px -6px rgba(255,140,0,.6); }
-.lq-chip.active { background:linear-gradient(90deg,var(--lq-orange),var(--lq-amber)); color:#fff; border-color:transparent; }
 .lq-row { display:flex; gap:.5rem; margin-bottom:.45rem; align-items:center; }
 .lq-row input { border:1px solid rgba(180,160,120,.4); border-radius:11px; padding:.55rem .7rem;
   font-size:.9rem; background:#fffdf8; transition:border .12s,box-shadow .12s; }
@@ -380,6 +372,17 @@ CSS = """
   cursor:pointer; width:100%; transition:all .12s; }
 .lq-add:hover { background:#fff6ea; border-color:var(--lq-orange); }
 
+/* examples */
+#lq-examples { margin-top:.4rem; }
+.lq-ex-label { font-size:.78rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em;
+  color:#b88a3a; margin-bottom:.5rem; }
+.lq-ex-grid { display:flex; flex-wrap:wrap; gap:.45rem; }
+.lq-ex { border:1px solid rgba(180,160,120,.35); background:#fffdf8; color:#7a5a20;
+  border-radius:11px; padding:.45rem .7rem; font-size:.85rem; font-weight:600; cursor:pointer;
+  transition:all .12s ease; }
+.lq-ex:hover { transform:translateY(-1px); border-color:var(--lq-orange); color:#b35900;
+  box-shadow:0 5px 14px -8px rgba(255,140,0,.6); background:#fff; }
+
 /* result viewer */
 .lq-result-shell { border-radius:18px; min-height:360px; padding:16px;
   background:linear-gradient(160deg,#fffaf0,#fff7e6); border:1px solid rgba(255,160,0,.22); }
@@ -430,14 +433,8 @@ with gr.Blocks(title="Liquid Image → JSON") as demo:
         '<div id="lq-hero">'
         "<h1>💧 Liquid Image → JSON</h1>"
         "<p>Define the fields you want, drop an image, and watch "
-        "<b>LFM2.5-VL Extract</b> turn pixels into clean structured JSON — live. "
-        "Build any schema visually; no prompt engineering required.</p>"
-        '<div class="lq-badges">'
-        '<span class="lq-badge">⚡ ZeroGPU</span>'
-        '<span class="lq-badge">450M &amp; 1.6B</span>'
-        '<span class="lq-badge">streaming extraction</span>'
-        '<span class="lq-badge">gr.Citrus</span>'
-        "</div></div>"
+        "<b>LFM2.5-VL Extract</b> turn pixels into clean structured JSON.</p>"
+        "</div>"
     )
 
     with gr.Row(equal_height=False):
@@ -448,11 +445,12 @@ with gr.Blocks(title="Liquid Image → JSON") as demo:
                 value="1.6B",
                 label="Model",
             )
-            gr.Markdown("**Extraction schema** — pick a preset or craft your own fields")
+            gr.Markdown("**Extraction schema** — name a field and describe what to pull out")
             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")
+            gr.HTML('<div id="lq-examples"></div>')
 
         with gr.Column(scale=5):
             result = gr.HTML(placeholder_html())