Upload app.py with huggingface_hub

app.py

@@ -316,7 +316,41 @@ const LQ_PRESETS = __PRESETS__;
     ex.querySelectorAll('.lq-ex').forEach(c => c.addEventListener('click', () =>
       loadPreset(document.getElementById('lq-schema-builder'), c.dataset.preset)));
   }
-  function init() { initBuilder(); initExamples(); }
+  function initLoupe() {
+    const wrap = document.getElementById('lq-image');
+    if (!wrap || wrap.dataset.loupe) return;
+    wrap.dataset.loupe = '1';
+    const D = 190, r = D / 2, zoom = 2.8;
+    const loupe = document.createElement('div');
+    loupe.className = 'lq-loupe';
+    loupe.style.width = D + 'px';
+    loupe.style.height = D + 'px';
+    document.body.appendChild(loupe);
+    function previewImg() {
+      for (const im of wrap.querySelectorAll('img')) {
+        if (im.src && im.naturalWidth > 0 && im.offsetWidth > 48) return im;
+      }
+      return null;
+    }
+    wrap.addEventListener('mousemove', function (e) {
+      const img = previewImg();
+      if (!img) { loupe.style.display = 'none'; return; }
+      const rect = img.getBoundingClientRect();
+      if (e.clientX < rect.left || e.clientX > rect.right ||
+          e.clientY < rect.top || e.clientY > rect.bottom) {
+        loupe.style.display = 'none'; return;
+      }
+      const x = e.clientX - rect.left, y = e.clientY - rect.top;
+      loupe.style.display = 'block';
+      loupe.style.backgroundImage = 'url("' + img.src + '")';
+      loupe.style.backgroundSize = (rect.width * zoom) + 'px ' + (rect.height * zoom) + 'px';
+      loupe.style.backgroundPosition = (r - x * zoom) + 'px ' + (r - y * zoom) + 'px';
+      loupe.style.left = (e.clientX - r) + 'px';
+      loupe.style.top = (e.clientY - r) + 'px';
+    });
+    wrap.addEventListener('mouseleave', function () { loupe.style.display = 'none'; });
+  }
+  function init() { initBuilder(); initExamples(); initLoupe(); }
   setInterval(init, 250);
 
   document.addEventListener('click', function (e) {
@@ -383,6 +417,12 @@ CSS = """
 .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; }
 
+/* hover magnifier loupe */
+.lq-loupe { position:fixed; border-radius:50%; pointer-events:none; display:none; z-index:9999;
+  background-repeat:no-repeat; background-color:#fff;
+  border:3px solid #fff; box-shadow:0 8px 24px -6px rgba(120,70,0,.5), 0 0 0 2px var(--lq-orange); }
+#lq-image img { cursor:crosshair; }
+
 /* 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); }
@@ -439,7 +479,7 @@ with gr.Blocks(title="Liquid Image → JSON") as demo:
 
     with gr.Row(equal_height=False):
         with gr.Column(scale=5):
-            image = gr.Image(type="pil", label="Image", height=300)
+            image = gr.Image(type="pil", label="Image", height=300, elem_id="lq-image")
             model_key = gr.Radio(
                 choices=[("450M · ⚡ fastest", "450M"), ("1.6B · 🎯 most accurate", "1.6B")],
                 value="1.6B",