Upload folder using huggingface_hub

.gitattributes

@@ -33,3 +33,4 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
+static/assets/fox-laptop.png filter=lfs diff=lfs merge=lfs -text

static/brand.css

@@ -57,43 +57,6 @@ body {
 .site-intro h1 em { font-style: normal; color: var(--orange-deep); }
 .site-intro .sub { margin-top: 6px; color: var(--ink-soft); font-size: 15px; max-width: 56ch; }
 
-/* ---- model strip ---- */
-.model-strip {
-  display: flex; align-items: center; gap: 14px;
-  margin: 18px 0 20px; padding: 12px 16px;
-  background: transparent; border: 0; border-bottom: 1px solid var(--ash); border-radius: 0;
-}
-.model-copy { flex: 1; min-width: 0; }
-.model-name-row { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
-.model-name-row a { color: var(--ink); font-weight: 600; text-decoration: none; font-size: 15px; border-bottom: 1px solid transparent; }
-.model-name-row a:hover { border-bottom-color: var(--orange-deep); color: var(--orange-deep); }
-.model-variant { font-size: 12px; color: var(--ink-faint); font-family: var(--font-mono); }
-
-.status-pill {
-  display: inline-flex; align-items: center; gap: 7px;
-  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
-  color: var(--ink-soft); white-space: nowrap;
-  padding: 3px 9px; border: 1px solid var(--ash); border-radius: 4px;
-  background: var(--greige);
-}
-.status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--warm-gray); flex-shrink: 0; }
-.status-pill.is-ready { border-color: var(--ok-bg); color: var(--ok); }
-.status-pill.is-ready .status-dot { background: var(--ok); }
-.status-pill.is-error { border-color: rgba(168,69,69,0.3); color: var(--neg); }
-.status-pill.is-error .status-dot { background: var(--neg); }
-.status-pill.is-loading .status-dot { background: var(--orange); animation: pulse-dot 1.1s ease-in-out infinite; }
-@keyframes pulse-dot { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }
-
-.load-block { min-width: 180px; }
-.load-track { height: 3px; background: transparent; border-radius: 99px; overflow: hidden; position: relative; }
-.load-track::before { content: ""; position: absolute; inset: 0; background: var(--ash); border-radius: 99px; opacity: 0; transition: opacity 200ms; }
-.model-strip.is-loading .load-track::before, .model-strip.is-preparing .load-track::before { opacity: 1; }
-#load-progress { display: block; height: 100%; width: 0; background: var(--orange); border-radius: 99px; transition: width 400ms var(--ease-out); position: relative; }
-.model-strip.is-ready #load-progress { width: 0; opacity: 0; }
-.model-strip.is-ready #load-percent { display: none; }
-
-/* hide percent counter entirely; status pill communicates state */
-
 /* ---- workspace ---- */
 .workspace { display: grid; grid-template-columns: 5fr 7fr; gap: 16px; align-items: stretch; }
 .workspace.single { grid-template-columns: 1fr; }
@@ -116,37 +79,25 @@ textarea, .editor {
 textarea:focus, .editor:focus { outline: 2px solid var(--ash); outline-offset: -2px; }
 textarea:focus-visible { outline: 2px solid var(--orange-deep); }
 
-/* ---- example selector: indexed action rows (no pill chips) ---- */
-.examples-panel { margin: 0 0 16px; }
+/* ---- example selector: pill chips ---- */
+.examples-panel { margin: 18px 0 14px; }
 .examples-label {
   font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
-  color: var(--ink-faint); display: block; margin-bottom: 10px;
-}
-.example-list {
-  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
-  border-top: 1px solid var(--ash); border-bottom: 1px solid var(--ash);
+  color: var(--ink-faint); display: block; margin-bottom: 8px;
 }
+.example-list { display: flex; flex-wrap: wrap; gap: 8px; }
 .ex {
-  font: inherit; text-align: left; background: transparent; border: 0;
-  border-right: 1px solid var(--ash);
-  padding: 12px 14px 11px; cursor: pointer;
-  display: flex; flex-direction: column; gap: 4px;
-  transition: background 140ms var(--ease-out);
-  position: relative;
-}
-.ex:last-child { border-right: 0; }
-.ex:hover { background: var(--greige); }
-.ex:active { transform: none; }
-.ex:focus-visible { outline: 2px solid var(--orange-deep); outline-offset: -2px; z-index: 1; }
-.ex .ex-idx { font-family: var(--font-mono); font-size: 11px; color: var(--ink-faint); }
-.ex .ex-name { font-size: 13px; font-weight: 500; color: var(--ink); }
-.ex.active { background: var(--greige); }
-.ex.active .ex-idx { color: var(--orange-deep); }
-.ex.active::after {
-  content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 2px;
-  background: var(--orange-deep);
-}
-@media (max-width: 860px) { .example-list { grid-template-columns: 1fr 1fr; } }
+  font: inherit; font-size: 13px; font-weight: 500; color: var(--ink);
+  background: var(--card); border: 1px solid var(--ash); border-radius: 99px;
+  padding: 6px 14px; cursor: pointer;
+  transition: background 140ms var(--ease-out), border-color 140ms var(--ease-out), transform 80ms var(--ease-out);
+}
+.ex:hover { background: var(--greige); border-color: var(--warm-gray); }
+.ex:active { transform: scale(0.97); }
+.ex:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
+.ex.active {
+  background: var(--ink); color: var(--paper); border-color: var(--ink);
+}
 
 /* ---- output body ---- */
 .output-body {
@@ -246,7 +197,6 @@ textarea:focus-visible { outline: 2px solid var(--orange-deep); }
 
 @media (max-width: 860px) {
   .workspace { grid-template-columns: 1fr; }
-  .load-block { display: none; }
   .inspector-groups { grid-template-columns: 1fr; }
 }
 

static/index.html

@@ -17,22 +17,6 @@
     <p class="sub" id="subtitle"></p>
   </header>
 
-  <section class="model-strip is-loading" id="model-strip" aria-label="Model status">
-    <div class="model-copy">
-      <div class="model-name-row">
-        <a id="model-link" href="#" target="_blank" rel="noopener"></a>
-        <span class="model-variant" id="model-variant"></span>
-      </div>
-    </div>
-    <span class="status-pill is-loading" id="status-pill">
-      <span class="status-dot" aria-hidden="true"></span>
-      <span id="status" role="status" aria-live="polite">Connecting</span>
-    </span>
-    <div class="load-block">
-      <div class="load-track" aria-hidden="true"><span id="load-progress"></span></div>
-    </div>
-  </section>
-
   <main>
     <section class="examples-panel" aria-label="Examples">
       <span class="examples-label">Examples</span>
@@ -204,15 +188,12 @@ $("output").addEventListener("click", (e) => {
   document.title = `${cfg.title.replace(/<[^>]+>/g, "")} - GLiNER 2.5`;
   $("title").innerHTML = cfg.title;
   $("subtitle").innerHTML = cfg.subtitle;
-  $("model-link").textContent = cfg.model_name;
-  $("model-link").href = cfg.model_url || "#";
-  $("model-variant").textContent = cfg.model_variant || "";
   $("code-panel").textContent = cfg.code || "";
 
   cfg.examples.forEach((ex, i) => {
     const b = document.createElement("button");
     b.type = "button"; b.className = "ex" + (i === 0 ? " active" : "");
-    b.innerHTML = `<span class="ex-idx">${String(i + 1).padStart(2, "0")}</span><span class="ex-name">${esc(ex.chip)}</span>`;
+    b.textContent = ex.chip;
     b.addEventListener("click", () => {
       document.querySelectorAll(".ex").forEach((x) => x.classList.toggle("active", x === b));
       $("input").value = ex.text;
@@ -224,8 +205,8 @@ $("output").addEventListener("click", (e) => {
   setEmpty("idle");
   if (cfg.examples[0]) $("input").value = cfg.examples[0].text;
   READY = await waitForServer();
-  stripSet(READY ? "Model ready" : "Model unavailable", READY ? "ready" : "error", READY ? 100 : 0);
   if (READY) infer();
+  else setEmpty("error");
 })();
 </script>
 </body>

static/strip.js

@@ -23,11 +23,14 @@
 function stripSet(message, tone, pct) {
   const strip = document.getElementById("model-strip");
   const pill = document.getElementById("status-pill");
-  document.getElementById("status").textContent = message;
+  const status = document.getElementById("status");
+  if (!strip || !status) return;  // demo page removed the strip; nothing to update
+  status.textContent = message;
   strip.className = `model-strip is-${tone}`;
   if (pill) pill.className = `status-pill is-${tone}`;
   if (pct != null) {
-    document.getElementById("load-progress").style.width = `${pct}%`;
+    const bar = document.getElementById("load-progress");
+    if (bar) bar.style.width = `${pct}%`;
   }
 }