Upload app.py with huggingface_hub

app.py

@@ -158,6 +158,53 @@ footer { display: none !important; }
   line-height: 1.6;
   font-weight: 500;
 }
+#header-block .use-case {
+  margin: 32px auto 0;
+  max-width: 1100px;
+  text-align: left;
+  border-top: 1px solid var(--hair);
+  border-bottom: 1px solid var(--hair);
+  padding: 22px 0;
+}
+#header-block .use-case-row {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  gap: 32px;
+}
+#header-block .use-case-label {
+  font-family: 'Inter', sans-serif;
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: 1.6px;
+  color: var(--muted);
+  margin-bottom: 6px;
+}
+#header-block .use-case-text {
+  font-family: 'Inter', sans-serif;
+  font-size: 13.5px;
+  line-height: 1.55;
+  color: var(--ink);
+  font-weight: 500;
+}
+#header-block .use-case-text b { font-weight: 700; }
+#header-block .use-case-text i { color: var(--muted); }
+
+#header-block .how-to-read {
+  margin-top: 18px;
+  padding: 14px 18px;
+  background: var(--tint);
+  border-radius: 8px;
+  font-family: 'Inter', sans-serif;
+  font-size: 13.5px;
+  line-height: 1.55;
+  color: var(--ink);
+  text-align: left;
+  max-width: 1100px;
+  margin-left: auto;
+  margin-right: auto;
+}
+#header-block .how-to-read b { font-weight: 700; }
+
 #header-block .meta-pill {
   display: inline-flex;
   align-items: center;
@@ -325,10 +372,44 @@ HEADER_HTML = """
   <div class="title-row">Demo 03 · Stay Curious · Fine-Tuning LLMs</div>
   <h1>Junior Associate</h1>
   <div class="subtitle">
-    Same model. Same system prompt. Same question.
-    The only difference is a 30&nbsp;MB LoRA adapter trained on 80 contract-review memos.
-    Watch what the adapter does to the reply.
+    A small open-source model fine-tuned to do <b>first-pass contract review</b>
+    in the house style of a fictional B2B law firm.
+  </div>
+
+  <div class="use-case">
+    <div class="use-case-row">
+      <div class="use-case-cell">
+        <div class="use-case-label">THE FIRM</div>
+        <div class="use-case-text">
+          <b>Lexwell Advisors</b> (fictional) reviews contracts for SMBs.
+          Every reply must follow the firm&rsquo;s exact format.
+        </div>
+      </div>
+      <div class="use-case-cell">
+        <div class="use-case-label">THE HOUSE STYLE</div>
+        <div class="use-case-text">
+          Top disclaimer &rarr; <b>I</b>ssue &middot; <b>R</b>ule &middot; <b>A</b>pplication &middot; <b>C</b>onclusion
+          &rarr; numbered redlines &rarr; bottom disclaimer &rarr;
+          <i>&mdash; Lexwell Advisors</i>
+        </div>
+      </div>
+      <div class="use-case-cell">
+        <div class="use-case-label">WHY FINE-TUNE</div>
+        <div class="use-case-text">
+          Instead of a 2,000-token system prompt on every call,
+          we fine-tuned Qwen-3B on <b>80 example memos</b>.
+          The structure now lives in a 30&nbsp;MB adapter.
+        </div>
+      </div>
+    </div>
   </div>
+
+  <div class="how-to-read">
+    <b>How to read this:</b> paste a contract question below.
+    The <b>left column</b> shows the base model with no fine-tuning &mdash; helpful, but unstructured.
+    The <b>right column</b> shows the same model with the LoRA adapter &mdash; locked to Lexwell&rsquo;s format every time.
+  </div>
+
   <div class="meta-pill">
     <span class="label">MODEL</span>
     <a href="https://huggingface.co/Curious-PM/lexwell-contract-irac-qwen2.5-3b-lora" target="_blank">Curious-PM/lexwell-contract-irac-qwen2.5-3b-lora</a>