Add live demo CTA and preview

index.html

@@ -29,6 +29,7 @@
         <div class="actions">
           <a class="button primary" href="https://thelabsource.com/projects/adi-models.php" target="_blank" rel="noreferrer">theLAB source</a>
           <a class="button" href="https://huggingface.co/AdvancedDataIntelligence" target="_blank" rel="noreferrer">HF models</a>
+          <a class="button" href="https://huggingface.co/spaces/AdvancedDataIntelligence/adi-qwen3.5-4b-glm5.2-general-demo" target="_blank" rel="noreferrer">Live demo</a>
           <a class="button" href="#console">Run local</a>
         </div>
       </div>
@@ -80,6 +81,14 @@
           <a id="model-link" class="button primary" href="https://huggingface.co/AdvancedDataIntelligence/adi-qwen3.5-4b-glm5.2-general-GGUF" target="_blank" rel="noreferrer">Open model card</a>
         </article>
       </div>
+
+      <a class="demo-strip" href="https://huggingface.co/spaces/AdvancedDataIntelligence/adi-qwen3.5-4b-glm5.2-general-demo" target="_blank" rel="noreferrer" aria-label="Launch the ADI Qwen3.5 4B live demo">
+        <img src="https://serve.thelabsource.com/u/4Kb3iS.gif" alt="ADI Qwen3.5 4B live demo preview" />
+        <span>
+          <b>Live browser demo</b>
+          <em>Try adi-qwen3.5-4b-glm5.2-general in Hugging Face Spaces.</em>
+        </span>
+      </a>
     </section>
 
     <section class="screen pipeline" aria-labelledby="pipeline-title">

styles.css

@@ -367,6 +367,46 @@ pre {
   color: var(--muted);
 }
 
+.demo-strip {
+  display: grid;
+  grid-template-columns: minmax(280px, 0.72fr) minmax(280px, 1fr);
+  gap: 18px;
+  align-items: center;
+  margin-top: 8px;
+  padding: 14px;
+  border: 1px solid var(--line);
+  border-radius: 22px;
+  background: rgba(8, 15, 22, 0.72);
+  box-shadow: 0 22px 90px rgba(0,0,0,0.32);
+  backdrop-filter: blur(16px);
+}
+
+.demo-strip img {
+  width: 100%;
+  aspect-ratio: 16 / 5.2;
+  object-fit: cover;
+  border: 1px solid var(--line);
+  border-radius: 16px;
+}
+
+.demo-strip span {
+  display: grid;
+  gap: 8px;
+}
+
+.demo-strip b {
+  font-size: clamp(28px, 4vw, 54px);
+  line-height: 0.95;
+  font-family: var(--display);
+  font-weight: 400;
+}
+
+.demo-strip em {
+  max-width: 54ch;
+  color: var(--muted);
+  font-style: normal;
+}
+
 .command-wrap {
   display: grid;
   grid-template-columns: minmax(0, 1fr) auto;
@@ -469,6 +509,7 @@ code {
   .hero-panel { position: relative; right: auto; bottom: auto; width: 100%; margin-bottom: 80px; }
   .hero-copy { padding-bottom: 28px; }
   .model-stage, .pipeline { grid-template-columns: 1fr; }
+  .demo-strip { grid-template-columns: 1fr; }
   .model-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
   .pipeline-art { min-height: 520px; }
 }