Upload folder using huggingface_hub

app.py

@@ -52,56 +52,315 @@ def generate_reply(question):
     return reply
 
 
-CSS = """
-.gradio-container { max-width: 980px !important; }
-#title { text-align: center; margin-bottom: 4px; font-weight: 800; letter-spacing: -1px; }
-#sub   { text-align: center; color: #6B6B6B; margin-bottom: 24px; font-size: 14.5px; }
-.output-box textarea, .output-box .markdown {
-    font-size: 14.5px !important; line-height: 1.6 !important;
-}
-"""
-
 EXAMPLES = [
     "Our SaaS vendor wants us to sign: 'Customer grants Vendor a perpetual, irrevocable license to use Customer Data for any purpose, including ML training.' Is this normal?",
     "Their non-compete is 2 years, all of California. Is that enforceable on a new hire?",
     "Our enterprise customer wants source code escrow with release on bankruptcy, material breach, or product discontinuation. Push back?",
     "We're hiring our first UK employee. Should we use an Employer of Record service or set up a UK subsidiary?",
-    "A vendor's MSA caps liability at $1M for any claim. Our annual fees are $500K and they hold our customer database. Is the cap reasonable?",
+    "A vendor's MSA caps liability at $1M. Our annual fees are $500K and they hold our customer database. Reasonable?",
+    "Standard force majeure language — anything to flag?",
 ]
 
-with gr.Blocks(title="Junior Associate · Contract Review (IRAC)", css=CSS, theme=gr.themes.Soft()) as demo:
-    gr.HTML('<h1 id="title">Junior Associate</h1>')
-    gr.HTML(
-        '<div id="sub">Qwen 2.5-3B fine-tuned on 80 hand-crafted contract-review memos. '
-        'Every reply: top disclaimer, IRAC analysis, numbered redlines, bottom disclaimer, sign-off. '
-        'Built with the <a href="https://huggingface.co/blog/hf-skills-training" target="_blank">'
-        '<code>hf-llm-trainer</code></a> Claude skill on Hugging Face Jobs.</div>'
-    )
+EXAMPLE_LABELS = [
+    "Vendor wants perpetual ML training rights",
+    "California non-compete (2 years)",
+    "Source code escrow on bankruptcy",
+    "EOR vs UK subsidiary for first hire",
+    "MSA liability cap at $1M",
+    "Standard force majeure clause",
+]
+
+
+CSS = """
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;600&display=swap');
+
+:root {
+  --ink: #0A0A0A;
+  --paper: #FFFFFF;
+  --off: #FAFAFA;
+  --tint: #F4F4F5;
+  --hair: #E4E4E4;
+  --rule: #C8C8C8;
+  --muted: #6B6B6B;
+  --subtle: #A1A1AA;
+}
+
+* { box-sizing: border-box; }
+
+body, .gradio-container {
+  background: var(--off) !important;
+  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
+  color: var(--ink) !important;
+}
+
+.gradio-container {
+  max-width: 920px !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;
+}
+#header-block .title-row {
+  font-family: 'Inter', sans-serif;
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 2.4px;
+  color: var(--muted);
+  text-transform: uppercase;
+  margin-bottom: 12px;
+}
+#header-block h1 {
+  font-family: 'Inter', sans-serif !important;
+  font-size: 64px !important;
+  font-weight: 900 !important;
+  letter-spacing: -2.4px !important;
+  margin: 0 0 16px 0 !important;
+  line-height: 0.98 !important;
+  color: var(--ink) !important;
+}
+#header-block .subtitle {
+  font-size: 16px;
+  color: var(--muted);
+  max-width: 560px;
+  margin: 0 auto;
+  line-height: 1.6;
+  font-weight: 500;
+}
+#header-block .meta-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  margin-top: 22px;
+  padding: 8px 16px;
+  background: var(--tint);
+  border-radius: 999px;
+  font-family: 'JetBrains Mono', ui-monospace, monospace;
+  font-size: 11.5px;
+  color: var(--ink);
+}
+#header-block .meta-pill .label {
+  font-family: 'Inter', sans-serif;
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: 1.6px;
+  color: var(--muted);
+}
+#header-block .meta-pill a {
+  color: var(--ink);
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+
+/* ── SECTION LABELS ────────────────────────────────────── */
+.section-label {
+  font-family: 'Inter', sans-serif;
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 2px;
+  color: var(--muted);
+  text-transform: uppercase;
+  margin: 32px 0 12px;
+}
+
+/* ── INPUT ─────────────────────────────────────────────── */
+.gr-textbox, textarea {
+  border-radius: 10px !important;
+  border: 1px solid var(--hair) !important;
+  background: var(--paper) !important;
+  padding: 16px 18px !important;
+  font-family: 'Inter', sans-serif !important;
+  font-size: 15px !important;
+  line-height: 1.5 !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;
+}
+
+/* ── BUTTONS ────────────────────────────────────────────── */
+button.primary, .primary-button button {
+  background: var(--ink) !important;
+  color: var(--paper) !important;
+  border: none !important;
+  border-radius: 10px !important;
+  font-family: 'Inter', sans-serif !important;
+  font-weight: 700 !important;
+  font-size: 15px !important;
+  letter-spacing: 0.2px !important;
+  padding: 14px 28px !important;
+  cursor: pointer !important;
+  width: 100% !important;
+  transition: background 0.15s ease !important;
+  margin-top: 16px !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;
+  gap: 10px !important;
+  margin-top: 8px !important;
+}
+.example-btn button {
+  background: var(--paper) !important;
+  border: 1px solid var(--hair) !important;
+  border-radius: 8px !important;
+  padding: 12px 16px !important;
+  font-family: 'Inter', sans-serif !important;
+  font-size: 13px !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;
+  white-space: normal !important;
+  transition: all 0.15s ease !important;
+}
+.example-btn button:hover {
+  background: var(--tint) !important;
+  border-color: var(--rule) !important;
+}
+
+/* ── OUTPUT MEMO ────────────────────────────────────────── */
+#output-block {
+  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;
+}
+#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;
+}
+#output-block strong {
+  font-weight: 700 !important;
+  color: var(--ink) !important;
+}
+#output-block em {
+  color: var(--muted) !important;
+  font-style: italic !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;
+}
+#output-block li { margin-bottom: 6px !important; }
+
+/* ── FOOTER ────────────────────────────────────────────── */
+#footer-block {
+  text-align: center;
+  margin-top: 48px;
+  padding-top: 24px;
+  border-top: 1px solid var(--hair);
+  font-size: 12px;
+  color: var(--muted);
+  line-height: 1.6;
+}
+#footer-block a {
+  color: var(--ink);
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+"""
+
+
+HEADER_HTML = """
+<div id="header-block">
+  <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.
+  </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>
+    <span style="color: var(--rule);">·</span>
+    <span style="color: var(--muted);">trained via</span>
+    <a href="https://huggingface.co/blog/hf-skills-training" target="_blank">hf-llm-trainer</a>
+  </div>
+</div>
+"""
+
+FOOTER_HTML = """
+<div id="footer-block">
+  Built for <a href="https://curious.pm" target="_blank">Curious PM</a> &middot; Stay Curious session on fine-tuning &middot; <a href="https://huggingface.co/Curious-PM/lexwell-contract-irac-qwen2.5-3b-lora" target="_blank">View the model</a>
+</div>
+"""
+
+INITIAL_OUTPUT = (
+    "_The reply will appear here. First request takes ~10 seconds while the GPU warms up; "
+    "subsequent requests are faster._"
+)
+
+
+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>')
 
     question = gr.Textbox(
-        label="Paste a contract clause or ask a question",
         placeholder="e.g. Their MSA caps liability at $1M. Is that reasonable?",
         lines=3,
+        show_label=False,
+        container=False,
     )
-    submit = gr.Button("Ask the Junior Associate ▸", variant="primary", size="lg")
+
+    submit = gr.Button("Ask the Junior Associate →", elem_classes="primary-button", variant="primary")
+
+    gr.HTML('<div class="section-label">Try one of these</div>')
+
+    with gr.Row(elem_classes="examples-row"):
+        example_buttons = []
+        for label, full_text in zip(EXAMPLE_LABELS, EXAMPLES):
+            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="_The reply will appear here. First request takes ~10s as the GPU warms up._",
-        elem_classes="output-box",
+        value=INITIAL_OUTPUT,
+        elem_id="output-block",
     )
 
+    gr.HTML(FOOTER_HTML)
+
+    # Wire up
     submit.click(fn=generate_reply, inputs=question, outputs=output)
     question.submit(fn=generate_reply, inputs=question, outputs=output)
 
-    gr.Examples(examples=EXAMPLES, inputs=question, label="Try one of these")
-
-    gr.HTML(
-        '<div style="text-align: center; color: #888; font-size: 12px; margin-top: 32px;">'
-        'Model: <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>'
-        ' · Built for <a href="https://curious.pm" target="_blank">Curious PM</a> &middot; Stay Curious session on fine-tuning'
-        '</div>'
-    )
+    # 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
+        )
 
 
 if __name__ == "__main__":