Upload app.py with huggingface_hub

app.py

@@ -1,7 +1,8 @@
-"""Junior Associate — contract review in IRAC format.
+"""Junior Associate — side-by-side comparison of base vs fine-tuned Qwen-3B.
 
-Fine-tuned Qwen 2.5-3B-Instruct with a LoRA adapter trained on 80 hand-crafted
-contract-review memos. Hosted on Hugging Face Spaces with ZeroGPU.
+Both sides receive the same input and same system prompt. The only difference
+is whether the LoRA adapter is enabled. Hosted on Hugging Face Spaces with
+ZeroGPU.
 """
 import torch
 import spaces
@@ -28,33 +29,45 @@ model.eval()
 print("Model ready.")
 
 
-@spaces.GPU(duration=60)
-def generate_reply(question):
+def _decode(out, input_len):
+    return tokenizer.decode(out[0][input_len:], skip_special_tokens=True)
+
+
+@spaces.GPU(duration=120)
+def generate_both(question):
     if not question or not question.strip():
-        return "_Type a contract question first._"
+        placeholder = "_Type a contract question first._"
+        return placeholder, placeholder
 
     msgs = [
         {"role": "system", "content": SYSTEM_PROMPT},
         {"role": "user", "content": question.strip()},
     ]
-    # Two-step tokenization for safe unpacking with model.generate(**inputs)
     text = tokenizer.apply_chat_template(
         msgs, tokenize=False, add_generation_prompt=True
     )
     inputs = tokenizer(text, return_tensors="pt").to("cuda")
     model.to("cuda")
-    with torch.no_grad():
-        out = model.generate(
-            **inputs,
-            max_new_tokens=600,
-            do_sample=False,
-            pad_token_id=tokenizer.eos_token_id,
-        )
-    reply = tokenizer.decode(
-        out[0][inputs.input_ids.shape[1]:],
-        skip_special_tokens=True,
+    input_len = inputs.input_ids.shape[1]
+
+    gen_kwargs = dict(
+        max_new_tokens=600,
+        do_sample=False,
+        pad_token_id=tokenizer.eos_token_id,
     )
-    return reply
+
+    # LEFT — base model (adapter disabled)
+    with model.disable_adapter():
+        with torch.no_grad():
+            base_out = model.generate(**inputs, **gen_kwargs)
+    base_reply = _decode(base_out, input_len)
+
+    # RIGHT — fine-tuned (adapter on)
+    with torch.no_grad():
+        ft_out = model.generate(**inputs, **gen_kwargs)
+    ft_reply = _decode(ft_out, input_len)
+
+    return base_reply, ft_reply
 
 
 EXAMPLES = [
@@ -88,6 +101,8 @@ CSS = """
   --rule: #C8C8C8;
   --muted: #6B6B6B;
   --subtle: #A1A1AA;
+  --left-accent: #C8C8C8;
+  --right-accent: #0A0A0A;
 }
 
 * { box-sizing: border-box; }
@@ -99,20 +114,18 @@ body, .gradio-container {
 }
 
 .gradio-container {
-  max-width: 920px !important;
+  max-width: 1280px !important;
   margin: 0 auto !important;
   padding: 56px 32px 80px !important;
 }
 
-/* Hide Gradio chrome */
 footer { display: none !important; }
 .show-api, .built-with { display: none !important; }
-button.lg.secondary[aria-label*="Use via API"] { display: none !important; }
 
 /* ── HEADER ───────────────────────────────────────────── */
 #header-block {
   text-align: center;
-  margin-bottom: 48px;
+  margin-bottom: 40px;
 }
 #header-block .title-row {
   font-family: 'Inter', sans-serif;
@@ -135,7 +148,7 @@ button.lg.secondary[aria-label*="Use via API"] { display: none !important; }
 #header-block .subtitle {
   font-size: 16px;
   color: var(--muted);
-  max-width: 560px;
+  max-width: 720px;
   margin: 0 auto;
   line-height: 1.6;
   font-weight: 500;
@@ -165,7 +178,6 @@ button.lg.secondary[aria-label*="Use via API"] { display: none !important; }
   text-underline-offset: 2px;
 }
 
-/* ── SECTION LABELS ────────────────────────────────────── */
 .section-label {
   font-family: 'Inter', sans-serif;
   font-size: 11px;
@@ -173,7 +185,7 @@ button.lg.secondary[aria-label*="Use via API"] { display: none !important; }
   letter-spacing: 2px;
   color: var(--muted);
   text-transform: uppercase;
-  margin: 32px 0 12px;
+  margin: 28px 0 10px;
 }
 
 /* ── INPUT ─────────────────────────────────────────────── */
@@ -188,13 +200,7 @@ button.lg.secondary[aria-label*="Use via API"] { display: none !important; }
   color: var(--ink) !important;
   box-shadow: none !important;
 }
-textarea:focus {
-  border-color: var(--ink) !important;
-  outline: none !important;
-}
-.gr-textbox label, label[for] {
-  display: none !important;
-}
+textarea:focus { border-color: var(--ink) !important; outline: none !important; }
 
 /* ── BUTTONS ────────────────────────────────────────────── */
 button.primary, .primary-button button {
@@ -209,17 +215,14 @@ button.primary, .primary-button button {
   padding: 14px 28px !important;
   cursor: pointer !important;
   width: 100% !important;
-  transition: background 0.15s ease !important;
   margin-top: 16px !important;
+  transition: background 0.15s ease !important;
 }
-button.primary:hover, .primary-button button:hover {
-  background: #2A2A2A !important;
-}
+button.primary:hover, .primary-button button:hover { background: #2A2A2A !important; }
 
-/* Example buttons — small cards */
 .examples-row {
   display: grid !important;
-  grid-template-columns: 1fr 1fr !important;
+  grid-template-columns: 1fr 1fr 1fr !important;
   gap: 10px !important;
   margin-top: 8px !important;
 }
@@ -227,17 +230,16 @@ button.primary:hover, .primary-button button:hover {
   background: var(--paper) !important;
   border: 1px solid var(--hair) !important;
   border-radius: 8px !important;
-  padding: 12px 16px !important;
+  padding: 12px 14px !important;
   font-family: 'Inter', sans-serif !important;
-  font-size: 13px !important;
+  font-size: 12.5px !important;
   font-weight: 500 !important;
   color: var(--ink) !important;
   text-align: left !important;
   cursor: pointer !important;
   width: 100% !important;
-  height: auto !important;
   min-height: 48px !important;
-  line-height: 1.45 !important;
+  line-height: 1.4 !important;
   white-space: normal !important;
   transition: all 0.15s ease !important;
 }
@@ -246,36 +248,54 @@ button.primary:hover, .primary-button button:hover {
   border-color: var(--rule) !important;
 }
 
-/* ── OUTPUT MEMO ────────────────────────────────────────── */
-#output-block {
+/* ── COMPARISON OUTPUT (TWO COLUMNS) ───────────────────── */
+#comparison-row { gap: 18px !important; }
+
+.lane {
   background: var(--paper);
   border: 1px solid var(--hair);
-  border-left: 3px solid var(--ink);
-  border-radius: 8px;
-  padding: 28px 32px;
-  margin-top: 12px;
-  min-height: 100px;
+  border-radius: 10px;
+  padding: 0;
+  overflow: hidden;
+  min-height: 200px;
 }
-#output-block .prose, #output-block * {
-  font-family: 'Inter', sans-serif !important;
-  font-size: 14.5px !important;
-  line-height: 1.7 !important;
-  color: var(--ink) !important;
+.lane.left-lane { border-top: 4px solid var(--left-accent); }
+.lane.right-lane { border-top: 4px solid var(--right-accent); }
+
+.lane-header {
+  padding: 16px 22px 12px 22px;
+  border-bottom: 1px solid var(--hair);
+  background: var(--off);
 }
-#output-block strong {
-  font-weight: 700 !important;
-  color: var(--ink) !important;
+.lane-header .lane-title {
+  font-family: 'Inter', sans-serif;
+  font-size: 16px;
+  font-weight: 800;
+  color: var(--ink);
+  letter-spacing: -0.3px;
+  margin: 0;
+}
+.lane-header .lane-meta {
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 11px;
+  color: var(--muted);
+  margin-top: 4px;
 }
-#output-block em {
-  color: var(--muted) !important;
-  font-style: italic !important;
+
+.lane-body, .lane-body * {
+  font-family: 'Inter', sans-serif !important;
+  font-size: 13.5px !important;
+  line-height: 1.65 !important;
+  color: var(--ink) !important;
 }
-#output-block p { margin: 0 0 12px 0 !important; }
-#output-block ol, #output-block ul {
-  padding-left: 22px !important;
-  margin: 8px 0 12px 0 !important;
+.lane-body {
+  padding: 20px 24px 24px 24px !important;
 }
-#output-block li { margin-bottom: 6px !important; }
+.lane-body strong { font-weight: 700 !important; }
+.lane-body em { color: var(--muted) !important; font-style: italic !important; }
+.lane-body p { margin: 0 0 10px 0 !important; }
+.lane-body ol, .lane-body ul { padding-left: 22px !important; margin: 6px 0 10px 0 !important; }
+.lane-body li { margin-bottom: 4px !important; }
 
 /* ── FOOTER ────────────────────────────────────────────── */
 #footer-block {
@@ -300,8 +320,9 @@ HEADER_HTML = """
   <div class="title-row">Demo 03 · Stay Curious · Fine-Tuning LLMs</div>
   <h1>Junior Associate</h1>
   <div class="subtitle">
-    Qwen 2.5-3B fine-tuned on 80 hand-crafted contract-review memos.
-    Every reply ships with the firm's IRAC structure and disclaimers — automatically.
+    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.
   </div>
   <div class="meta-pill">
     <span class="label">MODEL</span>
@@ -319,28 +340,25 @@ FOOTER_HTML = """
 </div>
 """
 
-INITIAL_OUTPUT = (
-    "_The reply will appear here. First request takes ~10 seconds while the GPU warms up; "
-    "subsequent requests are faster._"
-)
+PLACEHOLDER = "_The reply will appear here. First request takes ~15s while the GPU warms up._"
 
 
 with gr.Blocks(title="Junior Associate · Stay Curious", css=CSS, theme=gr.themes.Base()) as demo:
 
     gr.HTML(HEADER_HTML)
 
-    gr.HTML('<div class="section-label">Ask the model a contract question</div>')
+    gr.HTML('<div class="section-label">Ask a contract question</div>')
 
     question = gr.Textbox(
-        placeholder="e.g. Their MSA caps liability at $1M. Is that reasonable?",
+        placeholder="e.g. Our SaaS vendor wants perpetual ML training rights on our customer data. Is that normal?",
         lines=3,
         show_label=False,
         container=False,
     )
 
-    submit = gr.Button("Ask the Junior Associate →", elem_classes="primary-button", variant="primary")
+    submit = gr.Button("Compare base vs fine-tuned →", elem_classes="primary-button", variant="primary")
 
-    gr.HTML('<div class="section-label">Try one of these</div>')
+    gr.HTML('<div class="section-label">Or try one of these</div>')
 
     with gr.Row(elem_classes="examples-row"):
         example_buttons = []
@@ -348,23 +366,34 @@ with gr.Blocks(title="Junior Associate · Stay Curious", css=CSS, theme=gr.theme
             btn = gr.Button(label, elem_classes="example-btn")
             example_buttons.append((btn, full_text))
 
-    gr.HTML('<div class="section-label">The reply</div>')
-
-    output = gr.Markdown(
-        value=INITIAL_OUTPUT,
-        elem_id="output-block",
-    )
+    with gr.Row(elem_id="comparison-row"):
+        with gr.Column(elem_classes="lane left-lane"):
+            gr.HTML(
+                '<div class="lane-header">'
+                '  <div class="lane-title">Base Qwen 2.5-3B</div>'
+                '  <div class="lane-meta">no fine-tuning · prompt only</div>'
+                '</div>'
+            )
+            base_output = gr.Markdown(value=PLACEHOLDER, elem_classes="lane-body")
+
+        with gr.Column(elem_classes="lane right-lane"):
+            gr.HTML(
+                '<div class="lane-header">'
+                '  <div class="lane-title">+ LoRA adapter (fine-tuned)</div>'
+                '  <div class="lane-meta">trained on 80 contract-review memos</div>'
+                '</div>'
+            )
+            ft_output = gr.Markdown(value=PLACEHOLDER, elem_classes="lane-body")
 
     gr.HTML(FOOTER_HTML)
 
     # Wire up
-    submit.click(fn=generate_reply, inputs=question, outputs=output)
-    question.submit(fn=generate_reply, inputs=question, outputs=output)
+    submit.click(fn=generate_both, inputs=question, outputs=[base_output, ft_output])
+    question.submit(fn=generate_both, inputs=question, outputs=[base_output, ft_output])
 
-    # Example clicks: populate the textbox and immediately run inference
     for btn, full_text in example_buttons:
         btn.click(fn=lambda t=full_text: t, inputs=None, outputs=question).then(
-            fn=generate_reply, inputs=question, outputs=output
+            fn=generate_both, inputs=question, outputs=[base_output, ft_output]
         )