Launch GRACE-VLM project showcase

README.md

@@ -1,10 +1,29 @@
 ---
-title: GRACE VLM
-emoji: 👀
-colorFrom: yellow
-colorTo: blue
+title: GRACE-VLM
+emoji: 🦢
+colorFrom: blue
+colorTo: purple
 sdk: static
-pinned: false
+app_file: index.html
+pinned: true
+short_description: Deployable INT4 Qwen3-VL through GRACE distillation.
+models:
+  - ForeverBlue/Qwen3-VL-2B-GRACE-W4G128-AWQ
+  - ForeverBlue/Qwen3-VL-2B-GRACE-BF16
+tags:
+  - vision-language-model
+  - multimodal
+  - int4
+  - awq
+  - knowledge-distillation
+  - arxiv:2601.22709
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# GRACE-VLM
+
+Project showcase for **GRACE-VLM: INT4 Quantization-Aware Distillation for
+Vision-Language Models**, accepted at ICML 2026.
+
+This free static Space presents the benchmark results, a model output, and the
+copy-ready real INT4 deployment command. Interactive inference requires hosted
+GPU hardware; the model and loader remain fully available for local deployment.

index.html

@@ -1,19 +1,100 @@
 <!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <meta name="description" content="GRACE-VLM distills Qwen3-VL-8B into a deployable 2B INT4 vision-language model." />
+  <title>GRACE-VLM · Deployable INT4 Vision-Language Models</title>
+  <style>
+    :root { color-scheme: dark; --ink:#eef2ff; --muted:#aeb8d4; --line:#2a3557; --blue:#6ea8fe; --violet:#b091ff; --card:#121a30; }
+    * { box-sizing: border-box; }
+    body { margin:0; font:16px/1.6 Inter,ui-sans-serif,system-ui,sans-serif; color:var(--ink); background:radial-gradient(circle at 15% 5%,#203468 0,transparent 34%),radial-gradient(circle at 90% 20%,#3a235e 0,transparent 30%),#080d1b; }
+    a { color:#a9c9ff; text-decoration:none; } a:hover { text-decoration:underline; }
+    .shell { width:min(1100px,calc(100% - 32px)); margin:auto; }
+    nav { display:flex; justify-content:space-between; align-items:center; padding:22px 0; }
+    .brand { font-weight:800; letter-spacing:.08em; } .navlinks { display:flex; gap:20px; }
+    .hero { padding:70px 0 42px; text-align:center; }
+    .pill { display:inline-block; padding:6px 12px; border:1px solid #5472b7; border-radius:999px; color:#c9d8ff; background:#172448aa; }
+    h1 { margin:20px auto 12px; max-width:900px; font-size:clamp(42px,7vw,76px); line-height:1.02; letter-spacing:-.055em; }
+    .gradient { background:linear-gradient(100deg,var(--blue),var(--violet)); color:transparent; background-clip:text; }
+    .lead { max-width:760px; margin:0 auto 28px; color:var(--muted); font-size:clamp(18px,2vw,22px); }
+    .actions { display:flex; justify-content:center; flex-wrap:wrap; gap:12px; }
+    .button { padding:12px 18px; border:1px solid #6174a2; border-radius:10px; font-weight:700; background:#15213d; }
+    .button.primary { color:#07101f; background:linear-gradient(100deg,#8fc3ff,#b99cff); border:0; }
+    .grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin:42px 0; }
+    .card { padding:24px; border:1px solid var(--line); border-radius:16px; background:linear-gradient(145deg,#151f37dd,#0e1529dd); box-shadow:0 18px 50px #0004; }
+    .metric { font-size:38px; font-weight:850; letter-spacing:-.04em; } .label { color:var(--muted); }
+    section { padding:42px 0; } h2 { margin:0 0 12px; font-size:32px; letter-spacing:-.025em; }
+    table { width:100%; border-collapse:collapse; overflow:hidden; border-radius:12px; background:#0d1529cc; }
+    th,td { padding:14px; text-align:left; border-bottom:1px solid var(--line); } th { color:#cbd7f5; background:#17213a; } td:nth-child(n+2),th:nth-child(n+2) { text-align:right; }
+    .primary-row { color:#d9c9ff; font-weight:700; }
+    .split { display:grid; grid-template-columns:1fr 1fr; gap:22px; align-items:start; }
+    .sample { width:100%; border-radius:12px; border:1px solid var(--line); }
+    pre { position:relative; overflow:auto; margin:14px 0 0; padding:20px; border:1px solid var(--line); border-radius:12px; background:#060a14; color:#cfe0ff; }
+    code { font:14px/1.65 ui-monospace,SFMono-Regular,Menlo,monospace; }
+    .copy { float:right; padding:7px 10px; color:var(--ink); background:#1d2c50; border:1px solid #52658e; border-radius:8px; cursor:pointer; }
+    .note { color:var(--muted); border-left:3px solid var(--violet); padding-left:14px; }
+    footer { padding:50px 0 70px; color:var(--muted); text-align:center; }
+    @media (max-width:760px) { .grid,.split { grid-template-columns:1fr; } .navlinks { gap:10px; font-size:14px; } .hero { padding-top:42px; } }
+  </style>
+</head>
+<body>
+  <div class="shell">
+    <nav><div class="brand">🦢 GRACE-VLM</div><div class="navlinks"><a href="https://arxiv.org/abs/2601.22709">Paper</a><a href="https://github.com/ForeverBlue816/GRACE">GitHub</a><a href="https://huggingface.co/collections/ForeverBlue/grace">Models</a></div></nav>
+    <header class="hero">
+      <span class="pill">ICML 2026 · Open weights &amp; code</span>
+      <h1>Strong vision-language reasoning, <span class="gradient">packed into INT4.</span></h1>
+      <p class="lead">GRACE distills Qwen3-VL-8B into a 2B student and trains it for low-bit deployment from the start.</p>
+      <div class="actions"><a class="button primary" href="https://huggingface.co/ForeverBlue/Qwen3-VL-2B-GRACE-W4G128-AWQ">Download real INT4</a><a class="button" href="https://github.com/ForeverBlue816/GRACE#quick-start-real-int4">Run locally</a></div>
+    </header>
+
+    <div class="grid">
+      <div class="card"><div class="metric">2B</div><div class="label">student parameters, distilled from 8B</div></div>
+      <div class="card"><div class="metric">98%</div><div class="label">of the GRACE BF16 benchmark average retained</div></div>
+      <div class="card"><div class="metric">INT4</div><div class="label">real AWQ-packed language-model weights</div></div>
+    </div>
+
+    <section>
+      <h2>Quality after compression</h2>
+      <p class="note">Average over HallusionBench, MMBench, ScienceQA, AI2D, MMMU, SEED-Bench, and MMStar using the released evaluation protocol.</p>
+      <table>
+        <thead><tr><th>Model</th><th>Parameters</th><th>Format</th><th>Average</th></tr></thead>
+        <tbody>
+          <tr><td>Qwen3-VL teacher</td><td>8B</td><td>BF16</td><td>76.3</td></tr>
+          <tr><td>Qwen3-VL baseline</td><td>2B</td><td>BF16</td><td>67.3</td></tr>
+          <tr><td>GRACE student</td><td>2B</td><td>BF16</td><td>76.7</td></tr>
+          <tr class="primary-row"><td>GRACE W4G128</td><td>2B</td><td>INT4</td><td>75.0</td></tr>
+        </tbody>
+      </table>
+    </section>
+
+    <section class="split">
+      <div><img class="sample" src="https://raw.githubusercontent.com/ForeverBlue816/GRACE/main/deployment/images/chinaairlines.jpg" alt="China Airlines aircraft used in the GRACE inference example" /></div>
+      <div class="card"><h2>Example output</h2><p>The model identifies the China Airlines livery and the Boeing 777-300ER, then grounds its description in the airport runway scene.</p><p class="note">Generated by the released Qwen3-VL-2B-GRACE-W4G128-AWQ checkpoint. See the repository for the full output and settings.</p></div>
+    </section>
+
+    <section>
+      <h2>Run the real packed checkpoint</h2>
+      <p>The QAT repository is for research and repacking. Use the <strong>-AWQ</strong> repository below for genuine INT4 storage and kernels.</p>
+      <pre><button class="copy" onclick="copyCode(this)">Copy</button><code>git clone https://github.com/ForeverBlue816/GRACE.git
+cd GRACE
+pip install -r requirements_inference.txt
+pip install -e qwen-vl-utils/
+python qwen-vl-finetune/scripts/deploy_awq_qwen.py \
+  --load-packed ForeverBlue/Qwen3-VL-2B-GRACE-W4G128-AWQ \
+  --image deployment/images/chinaairlines.jpg \
+  --query "Describe this image in detail."</code></pre>
+    </section>
+
+    <footer>GRACE-VLM · Gated Relational Alignment via Confidence-based Distillation · Apache-2.0</footer>
+  </div>
+  <script>
+    async function copyCode(button) {
+      const code = button.parentElement.querySelector('code').innerText;
+      await navigator.clipboard.writeText(code);
+      button.textContent = 'Copied';
+      setTimeout(() => button.textContent = 'Copy', 1400);
+    }
+  </script>
+</body>
 </html>