Upload folder using huggingface_hub

.gitattributes

@@ -1,35 +1,35 @@
-*.7z filter=lfs diff=lfs merge=lfs -text
-*.arrow filter=lfs diff=lfs merge=lfs -text
-*.bin filter=lfs diff=lfs merge=lfs -text
-*.bz2 filter=lfs diff=lfs merge=lfs -text
-*.ckpt filter=lfs diff=lfs merge=lfs -text
-*.ftz filter=lfs diff=lfs merge=lfs -text
-*.gz filter=lfs diff=lfs merge=lfs -text
-*.h5 filter=lfs diff=lfs merge=lfs -text
-*.joblib filter=lfs diff=lfs merge=lfs -text
-*.lfs.* filter=lfs diff=lfs merge=lfs -text
-*.mlmodel filter=lfs diff=lfs merge=lfs -text
-*.model filter=lfs diff=lfs merge=lfs -text
-*.msgpack filter=lfs diff=lfs merge=lfs -text
-*.npy filter=lfs diff=lfs merge=lfs -text
-*.npz filter=lfs diff=lfs merge=lfs -text
-*.onnx filter=lfs diff=lfs merge=lfs -text
-*.ot filter=lfs diff=lfs merge=lfs -text
-*.parquet filter=lfs diff=lfs merge=lfs -text
-*.pb filter=lfs diff=lfs merge=lfs -text
-*.pickle filter=lfs diff=lfs merge=lfs -text
-*.pkl filter=lfs diff=lfs merge=lfs -text
-*.pt filter=lfs diff=lfs merge=lfs -text
-*.pth filter=lfs diff=lfs merge=lfs -text
-*.rar filter=lfs diff=lfs merge=lfs -text
-*.safetensors filter=lfs diff=lfs merge=lfs -text
-saved_model/**/* filter=lfs diff=lfs merge=lfs -text
-*.tar.* filter=lfs diff=lfs merge=lfs -text
-*.tar filter=lfs diff=lfs merge=lfs -text
-*.tflite filter=lfs diff=lfs merge=lfs -text
-*.tgz filter=lfs diff=lfs merge=lfs -text
-*.wasm filter=lfs diff=lfs merge=lfs -text
-*.xz filter=lfs diff=lfs merge=lfs -text
-*.zip filter=lfs diff=lfs merge=lfs -text
-*.zst filter=lfs diff=lfs merge=lfs -text
-*tfevents* filter=lfs diff=lfs merge=lfs -text
+*.7z filter=lfs diff=lfs merge=lfs -text
+*.arrow filter=lfs diff=lfs merge=lfs -text
+*.bin filter=lfs diff=lfs merge=lfs -text
+*.bz2 filter=lfs diff=lfs merge=lfs -text
+*.ckpt filter=lfs diff=lfs merge=lfs -text
+*.ftz filter=lfs diff=lfs merge=lfs -text
+*.gz filter=lfs diff=lfs merge=lfs -text
+*.h5 filter=lfs diff=lfs merge=lfs -text
+*.joblib filter=lfs diff=lfs merge=lfs -text
+*.lfs.* filter=lfs diff=lfs merge=lfs -text
+*.mlmodel filter=lfs diff=lfs merge=lfs -text
+*.model filter=lfs diff=lfs merge=lfs -text
+*.msgpack filter=lfs diff=lfs merge=lfs -text
+*.npy filter=lfs diff=lfs merge=lfs -text
+*.npz filter=lfs diff=lfs merge=lfs -text
+*.onnx filter=lfs diff=lfs merge=lfs -text
+*.ot filter=lfs diff=lfs merge=lfs -text
+*.parquet filter=lfs diff=lfs merge=lfs -text
+*.pb filter=lfs diff=lfs merge=lfs -text
+*.pickle filter=lfs diff=lfs merge=lfs -text
+*.pkl filter=lfs diff=lfs merge=lfs -text
+*.pt filter=lfs diff=lfs merge=lfs -text
+*.pth filter=lfs diff=lfs merge=lfs -text
+*.rar filter=lfs diff=lfs merge=lfs -text
+*.safetensors filter=lfs diff=lfs merge=lfs -text
+saved_model/**/* filter=lfs diff=lfs merge=lfs -text
+*.tar.* filter=lfs diff=lfs merge=lfs -text
+*.tar filter=lfs diff=lfs merge=lfs -text
+*.tflite filter=lfs diff=lfs merge=lfs -text
+*.tgz filter=lfs diff=lfs merge=lfs -text
+*.wasm filter=lfs diff=lfs merge=lfs -text
+*.xz filter=lfs diff=lfs merge=lfs -text
+*.zip filter=lfs diff=lfs merge=lfs -text
+*.zst filter=lfs diff=lfs merge=lfs -text
+*tfevents* filter=lfs diff=lfs merge=lfs -text

.gitignore

@@ -0,0 +1,28 @@
+# Python
+__pycache__/
+*.py[cod]
+*$py.class
+*.so
+.Python
+.venv/
+venv/
+env/
+
+# Local env / secrets (never commit tokens)
+.env
+.env.*
+
+# IDE / OS
+.idea/
+.vscode/
+.cursor/
+.DS_Store
+Thumbs.db
+
+# Binary / reference docs (not needed for the app)
+*.pdf
+pdf_pages/
+
+# Local design references (Stitch exports — not for deployment)
+private/
+stitch code.txt

HACKATHON_GUIDE.md

@@ -0,0 +1,488 @@
+# Build Small Hackathon -- The Complete Winning Guide
+
+## Table of Contents
+
+1. [Hackathon Overview](#hackathon-overview)
+2. [What the Judges Want](#what-the-judges-want)
+3. [Small Language Models -- Theory & Education](#small-language-models)
+4. [Gradio -- Theory & Education](#gradio)
+5. [Your Real Problem & Winning Strategy](#your-winning-strategy)
+6. [Technical Stack & Hosting](#technical-stack--hosting)
+7. [Bonus Quests to Earn](#bonus-quests)
+8. [Pitch & Demo Tips](#pitch--demo-tips)
+9. [Timeline & Checklist](#timeline--checklist)
+
+---
+
+## Hackathon Overview
+
+**Name:** Build Small Hackathon
+**Hosted by:** Gradio + Hugging Face
+**URL:** https://huggingface.co/build-small-hackathon
+**Dates:** May 29 -- June 8, 2026 (two weekends to build, ship, and demo)
+**Cash Prizes:** $15,000
+**Registration deadline:** May 27, 2026
+
+### The Philosophy
+
+The hackathon motto is **"Making AI Fun Again."** The organizers feel AI has become anxiety-inducing -- labs keep releasing bigger and bigger models doing things that feel threatening. This hackathon wants to bring back the 2021 vibe: when models were small enough to tinker with, and building with AI was joyful and personal.
+
+The core instruction: **Think small.** Armed with only 32 billion parameters, solve a real problem for someone you know -- or build something whimsical and delightful.
+
+### Two Tracks (Pick One)
+
+#### Track 1: "Backyard AI" (Chapter One) -- YOUR TRACK
+
+> Solve a real problem for someone you actually know. Pick a person -- a neighbor, a parent, a small-business owner on your street -- and build something that makes their day measurably better.
+
+**Judged on:**
+- Problem is specific and real
+- The person actually *used* it
+- Honest fit between problem and the small-model constraint
+- Polish of the Gradio app
+
+#### Track 2: "An Adventure in Thousand Token Wood" (Chapter Two)
+
+> Build something delightful that wouldn't exist without AI. A toy, a tiny game, a strange interactive story, an art experiment. The AI should be doing the fun thing -- not just helping you build it. Strange is good. Joyful is the bar.
+
+**Judged on:**
+- Genuinely delightful (would you show a friend?)
+- AI is load-bearing for the experience
+- Originality of concept
+- Polish of the Gradio app
+
+### Three Hard Rules ("Pack Light")
+
+| # | Rule | What It Means |
+|---|------|---------------|
+| 1 | **Small Models Only** | Total parameters must be **<= 32 billion**. The model must fit on a laptop. |
+| 2 | **Built on Gradio** | Your app must be a **Gradio app**, hosted as a **Hugging Face Space**. |
+| 3 | **Show, Don't Tell** | Submit a short **demo video** and a **social-media post** alongside your Space. |
+
+### The Deliverable (What You Actually Submit)
+
+1. **A running Gradio app** hosted as a Hugging Face Space under the `build-small-hackathon` org
+2. **A short demo video** (screen recording showing the app in action)
+3. **A social media post** (tweet, LinkedIn, etc.) about your project
+
+That's it. No slides. No paper. A working app, a video, and a post.
+
+---
+
+## What the Judges Want
+
+### Judge Mindset (Track 1 -- Backyard AI)
+
+The judges are looking for projects where **a real person has a real problem, and AI genuinely helps.** They are NOT impressed by:
+- Generic productivity tools
+- Yet another RAG chatbot
+- Technical complexity for its own sake
+
+They ARE impressed by:
+- **Authenticity** -- "I built this for myself / my own business"
+- **Before vs. After** -- "This used to take 3 hours, now it takes 10 minutes"
+- **Honest constraint fit** -- "I chose a small model because the task is structured extraction, not novel reasoning"
+- **Polish** -- The Gradio app looks finished, not like a prototype
+
+### The Secret Scoring Formula
+
+| Criteria | Weight | What Wins |
+|----------|--------|-----------|
+| Real problem, real person | HIGH | You ARE the person. Show real documents, real store names. |
+| Honest small-model fit | HIGH | Explain WHY a small model works: parsing structured docs, not writing novels |
+| Gradio polish | HIGH | Beautiful UI, smooth flow, no jank |
+| Actually used | MEDIUM | Demo with your actual PO documents and store data |
+
+### The Meta-Game
+
+Judges spend **3-10 minutes** per project. Your app must instantly communicate:
+1. What the problem is
+2. What the AI is doing
+3. Why it's cool
+
+---
+
+## Small Language Models
+
+### What Is a "Small" Model?
+
+In this hackathon, "small" means **<= 32 billion parameters**. For context:
+- GPT-4 is rumored to be ~1.8 trillion parameters
+- Claude, Gemini are similarly massive
+- A 3B model is roughly 600x smaller than GPT-4
+
+Parameters are the "brain cells" of a neural network. More parameters = more knowledge and reasoning ability, but also more compute, memory, and cost.
+
+### Size Tiers and What They're Good For
+
+| Size | Examples | RAM Needed | Good For | Limitations |
+|------|----------|-----------|----------|-------------|
+| **0.5B -- 1.5B** | Qwen2.5-0.5B/1.5B, Llama 3.2-1B | 0.5--1 GB | Simple extraction, classification, formatting | Limited knowledge, short context |
+| **3B** | Qwen2.5-3B, Llama 3.2-3B, Phi-3-mini | ~2 GB | Structured extraction, summarization, translation | Struggles with complex multi-step logic |
+| **7B -- 8B** | Llama 3.1-8B, Mistral-7B, Qwen2.5-7B | ~5 GB | Strong extraction, conversation, code generation | Needs 8GB+ RAM machine |
+| **14B** | Qwen2.5-14B, Phi-4-14B | ~10 GB | Good reasoning, strong coding, multi-language | Needs 16GB+ RAM, GPU recommended |
+| **27B -- 32B** | Gemma-2-27B, Qwen2.5-32B | ~20 GB | Near-GPT-3.5 quality for many tasks | Needs 32GB RAM or GPU |
+
+### Your Laptop: 6 GB RAM
+
+Your AMD Ryzen 7 3700U with 6 GB RAM can run:
+- **Qwen2.5:1.5b** -- comfortably (needs ~1 GB)
+- **Qwen2.5:3b** -- tight but possible (needs ~2 GB)
+- **Qwen2.5:7b** -- NOT possible (needs ~5 GB, your machine only has ~1.5 GB free)
+
+**For the hackathon demo on HF Spaces**: The model runs on HF's servers, not your laptop. RAM doesn't matter.
+
+**For local development**: Use the HF Inference API (free tier) -- the model runs in the cloud. Your laptop just runs the Gradio UI.
+
+### Why Small Models Are GOOD (Not Just "Acceptable")
+
+This is key for your pitch:
+
+1. **Privacy:** Store sales data, supplier info, pricing -- stays private. Indonesian small businesses don't want data going to OpenAI.
+
+2. **Cost:** Zero API fees. No monthly subscription. A small business owner can run this forever for free on a decent laptop.
+
+3. **Right-sizing:** Parsing "20 sticker kucing hologram 5x5cm" from a messy PO document is structured extraction -- you DON'T need GPT-4 for this. A 3B model handles it perfectly.
+
+4. **Speed:** For structured tasks, small models are often FASTER than cloud APIs because there's no network latency.
+
+5. **Accessibility:** Works for Indonesian small businesses who may not have reliable internet or cloud budgets.
+
+### What Small Models Do Well (YOUR Use Cases)
+
+- **Structured data extraction from messy formats** -- THE core of your app. Different stores send POs in Excel, PDF, handwritten, different formats. LLM normalizes them all into structured data.
+- **Text formatting/templating** -- Generating delivery documents, order summaries
+- **Translation** -- English/Indonesian bilingual output
+- **Summarization** -- Best seller reports, monthly summaries
+- **Classification** -- Categorizing sticker types, matching product names across stores
+
+### What Small Models Struggle With
+
+- Open-ended creative writing
+- Complex multi-step mathematical reasoning
+- Tasks requiring broad world knowledge
+- Very long context (>4K tokens on smaller models)
+
+---
+
+## Gradio
+
+### What Is Gradio?
+
+Gradio is a **Python library for building web-based UI for machine learning apps.** You write Python, and Gradio generates a full interactive web app.
+
+Key facts:
+- Made by Hugging Face (the hackathon host -- using it well MATTERS)
+- Write **only Python** -- no HTML, CSS, or JavaScript needed (though you can add custom CSS)
+- Generates a **shareable web URL** automatically
+- Deploys to **Hugging Face Spaces** with one click
+- Has 30+ built-in components (text boxes, tables, file uploads, buttons, chat interfaces, etc.)
+
+### Gradio Core Concepts
+
+#### 1. Interface (Simple Mode)
+
+The simplest way. Define inputs, outputs, and a function:
+
+```python
+import gradio as gr
+
+def greet(name):
+    return f"Hello, {name}!"
+
+demo = gr.Interface(fn=greet, inputs="text", outputs="text")
+demo.launch()
+```
+
+#### 2. Blocks (Advanced Mode) -- WHAT YOU SHOULD USE
+
+Full layout control with rows, columns, tabs:
+
+```python
+import gradio as gr
+
+with gr.Blocks(title="My App") as demo:
+    gr.Markdown("# My App Title")
+    with gr.Row():
+        with gr.Column(scale=1):
+            input_text = gr.Textbox(label="Input", lines=5)
+            submit_btn = gr.Button("Submit", variant="primary")
+        with gr.Column(scale=2):
+            output_table = gr.Dataframe(label="Results")
+    submit_btn.click(fn=process, inputs=input_text, outputs=output_table)
+
+demo.launch()
+```
+
+#### 3. Key Components You'll Use
+
+| Component | What It Does | Your Use Case |
+|-----------|-------------|---------------|
+| `gr.Textbox` | Text input/output | Paste PO text from stores |
+| `gr.Dataframe` | Editable table | Show parsed orders, stock levels |
+| `gr.Markdown` | Rich text display | Delivery documents, reports |
+| `gr.Button` | Clickable button | Submit, Export, Generate |
+| `gr.File` | File download | Export CSV |
+| `gr.Dropdown` | Select from options | Choose store |
+| `gr.Tab` | Tabbed interface | Organize PO intake, stock, print calc, delivery |
+| `gr.Number` | Numeric input | Edit quantities |
+| `gr.State` | Persist data between interactions | All session data |
+
+#### 4. Theming & CSS (For Polish)
+
+```python
+# Built-in themes available: Soft, Glass, Monochrome, Default
+# Custom CSS also supported for branding
+demo.launch(theme=gr.themes.Soft(), css="custom styles here")
+```
+
+#### 5. State Management
+
+```python
+# gr.State persists data across interactions within a session
+store_data = gr.State(value={})
+
+def update_store(new_data, current_data):
+    current_data.update(new_data)
+    return current_data
+
+button.click(fn=update_store, inputs=[input, store_data], outputs=[store_data])
+```
+
+### Gradio + Hugging Face Spaces (Deployment)
+
+Your final app must be hosted on Hugging Face Spaces:
+
+1. Create a Space under the `build-small-hackathon` org
+2. Choose "Gradio" as the SDK
+3. Push your `app.py` + `requirements.txt` via git
+4. The Space auto-builds and deploys
+5. You get a public URL that judges can visit
+
+**Free tier:** Yes, free CPU instances. Good enough for a hackathon demo.
+
+**How to push:**
+```bash
+# Clone the space
+git clone https://huggingface.co/spaces/build-small-hackathon/your-app-name
+# Copy your files in
+# Push
+git add . && git commit -m "Initial app" && git push
+```
+
+For the model on HF Spaces, use the **Hugging Face Inference API** (free tier) -- the model runs on HF servers, not on the Space's CPU.
+
+---
+
+## Your Winning Strategy
+
+### The REAL Problem (This Is Gold for Hackathon Judges)
+
+You run a sticker shop in Jogja, Indonesia. You design and sell ~150 varieties of stickers through **25 offline partner stores** across Java island (Solo, Klaten, Semarang, Jakarta, Bandung, Bali, etc.). Each store gets your stickers on consignment (they pay you a % of sales).
+
+**The monthly workflow (currently manual, ~3+ hours):**
+
+1. **Receive reports from 25 stores** -- Each store sends a monthly sales report AND a Pre-Order (PO) for restocking. Every store uses a DIFFERENT format: Excel, PDF, handwritten, Indonesian, English, mixed.
+
+2. **Parse and normalize** -- You manually read each report/PO and type the data into your own spreadsheet. 25 stores x different formats = tedious.
+
+3. **Aggregate demand** -- Combine all 25 POs to see total demand per sticker variety.
+
+4. **Check home stock** -- Compare aggregated demand against what you have in stock at home.
+
+5. **Calculate printing** -- For stickers you need to produce, calculate how many A3 sheets to order from your printer (each A3 = 8 x A5 stickers, so divide quantity by 8, round up).
+
+6. **Place print order** -- Send order to external printing service.
+
+7. **Generate delivery documents** -- After printing, create a packing list for each store: "Store X, here are the stickers I'm sending you." This helps them match incoming shipments.
+
+8. **Recommend best sellers** -- Some stores ask "What should I order?" You check sales data across all stores and recommend top sellers.
+
+### Why This Is a PERFECT Hackathon Entry
+
+| Judge Criteria | Your Score | Why |
+|----------------|-----------|-----|
+| Problem is specific and real | 10/10 | You literally do this every month. 25 real stores. Real documents. |
+| Person actually used it | 10/10 | YOU are the person. You can demo with real data. |
+| Honest small-model fit | 10/10 | Parsing messy POs into structured data is EXACTLY what small models excel at. No need for GPT-4. |
+| Gradio polish | High | Multi-tab workflow, clean tables, export buttons, bilingual |
+
+### The Pitch (Practice This)
+
+> "I run a sticker shop in Jogja, Indonesia. I sell 150 designs through 25 partner stores across Java. Every month, each store sends me sales reports and restock orders -- in 25 different formats. Excel, PDF, handwritten notes, Indonesian, English. I spend 3+ hours every month just copying data into spreadsheets. Then I have to calculate what to print, and create delivery documents for each store.
+> 
+> I built an AI assistant that does all of this. Paste in any store's PO -- any format -- and a 3-billion parameter model extracts the structured data. It aggregates across stores, calculates my print order (A3 sheets, 8 stickers per sheet), and generates delivery documents in both English and Indonesian.
+> 
+> All running on a tiny model. Because parsing 'butuh 20 stiker kucing hologram' doesn't need GPT-4."
+
+### App Features (What We Build)
+
+#### Tab 1: PO Intake (Parse Store Orders)
+- Select store from dropdown
+- Paste PO text in any format (messy Excel copy, handwritten transcription, mixed languages)
+- AI extracts: product name, quantity, notes
+- Review and edit parsed data
+- Save to session
+
+#### Tab 2: Stock & Demand Dashboard
+- View home stock levels (editable)
+- See aggregated demand from all parsed POs
+- Visual comparison: what you have vs. what stores want
+- Highlight shortages
+
+#### Tab 3: Print Calculator
+- Shows what needs to be printed (demand - stock = shortage)
+- Calculates A3 sheets needed (qty / 8, rounded up)
+- Estimated cost
+- Export print order
+
+#### Tab 4: Delivery Documents
+- Select a store
+- Generate packing list of what to send them
+- Bilingual (English / Indonesian)
+- Export as text
+
+#### Tab 5: Best Seller Report
+- AI analyzes sales data across stores
+- Recommends top sellers to stores that ask
+
+---
+
+## Technical Stack & Hosting
+
+### What You Need
+
+| Component | Tool | Why |
+|-----------|------|-----|
+| Language | **Python 3.11** | Only language needed |
+| UI Framework | **Gradio 6.x** | Required by hackathon |
+| LLM (Cloud) | **HF Inference API + Qwen2.5-3B** | Free, runs on HF servers, no local RAM needed |
+| LLM (Local) | **Ollama + Qwen2.5:3b** (optional) | For offline/privacy demo on a machine with 8GB+ RAM |
+| Data | **pandas** | CSV export, data manipulation |
+| Deployment | **Hugging Face Spaces** | Required by hackathon. Free tier. |
+
+### How the App Works
+
+```
+Store sends PO (messy text) --> You paste into Gradio UI --> 
+Python sends to HF Inference API --> Qwen2.5-3B parses it --> 
+Structured JSON returned --> Gradio displays editable table --> 
+Python aggregates + calculates print needs --> Export
+```
+
+### Hosting on Hugging Face Spaces
+
+**Cost: FREE** for the basic CPU tier. This is enough for your hackathon demo.
+
+**What HF Spaces gives you:**
+- Public URL (e.g., `https://huggingface.co/spaces/build-small-hackathon/your-app`)
+- Auto-builds from your code
+- Judges click the link and use your app instantly
+- The LLM runs via HF Inference API (on HF's powerful servers), not on the Space's tiny CPU
+
+**How to deploy (step by step):**
+1. Create a free account on huggingface.co
+2. Get a free API token (Settings > Access Tokens)
+3. Create a new Space under `build-small-hackathon` org
+4. Push your code via git
+5. Set your HF token as a Space Secret (so the Inference API works)
+6. Done -- your app is live
+
+**It is NOT like AWS.** It's much simpler:
+- No servers to configure
+- No Docker files needed (Gradio Spaces handle it)
+- No billing surprises (free tier has limits but won't charge you)
+- Judges don't need accounts to use your app
+
+---
+
+## Bonus Quests
+
+| Badge | Requirement | Recommendation |
+|-------|------------|----------------|
+| **Off the Grid** | No cloud APIs, fully local | Can demo this on a machine with 8GB+ RAM using Ollama. Mention it in pitch. |
+| **Off-Brand** | Custom frontend beyond default Gradio | **DO THIS** -- custom CSS with your sticker shop branding |
+| **Well-Tuned** | Fine-tuned model on HF | Skip (not enough time) |
+| **Llama Champion** | Use llama.cpp runtime | Nice-to-have only |
+| **Sharing is Caring** | Share agent trace on Hub | **DO THIS** -- easy, free |
+| **Field Notes** | Blog post about the build | Do if time allows |
+
+---
+
+## Pitch & Demo Tips
+
+### Demo Video Structure (60--90 seconds)
+
+1. **Hook (10s):** "I sell stickers through 25 stores across Indonesia. Every month I spend 3 hours processing their orders manually."
+2. **Problem (15s):** Show the messy reality -- different Excel formats, handwritten POs, mixed languages.
+3. **Solution (40s):** Paste a real PO. Watch AI parse it. Show aggregation. Show print calculator. Show delivery document.
+4. **Wow moment (10s):** "3 billion parameters. That's all you need to turn chaos into a clean order."
+5. **Close (10s):** "Built with Gradio + Qwen2.5-3B for the Build Small Hackathon."
+
+### What to Highlight
+
+- The 25-store scale (real business, not a toy example)
+- Before vs. after (3 hours -> 10 minutes)
+- The variety of input formats (your unique challenge)
+- Bilingual English/Indonesian
+- The print calculator (a practical non-AI feature that adds real value)
+- That 3B parameters is MORE than enough for structured extraction
+
+### Common Mistakes to Avoid
+
+1. Don't over-engineer -- a clean, working demo beats a half-finished ambitious project
+2. Don't use jargon -- say "Paste your store's order" not "Enter NLP query"
+3. Don't forget examples -- pre-fill sample POs so judges can try instantly
+4. Don't make it generic -- the Indonesia sticker shop angle is your ADVANTAGE
+
+---
+
+## Timeline & Checklist
+
+### Before May 29 (Prep Phase -- NOW)
+
+- [x] Read hackathon guidelines
+- [x] Define your idea and track
+- [ ] Register on Hugging Face
+- [ ] Join Gradio Discord
+- [x] Install Python, Gradio locally
+- [x] Build and test prototype locally
+- [ ] Prepare real PO documents from your stores (anonymize if needed)
+- [ ] Get HF API token (free)
+
+### May 29 -- June 1 (Weekend 1)
+
+- [ ] Create your HF Space under the build-small-hackathon org
+- [ ] Polish the Gradio UI (custom CSS, sticker shop branding)
+- [ ] Add all features (PO parsing, aggregation, print calc, delivery docs)
+- [ ] Test with real PO data from your stores
+- [ ] Deploy to HF Spaces
+
+### June 2 -- 5 (Midweek)
+
+- [ ] Record demo video
+- [ ] Write social media post
+- [ ] Attend Live AMA if possible
+- [ ] Bug fixes and polish
+
+### June 6 -- 8 (Weekend 2)
+
+- [ ] Final polish and testing
+- [ ] Submit: Space link + demo video + social post
+
+---
+
+## Quick Reference Card
+
+```
+HACKATHON:   Build Small Hackathon
+TRACK:       Chapter One -- Backyard AI
+IDEA:        Sticker Restock Manager -- AI-powered PO parser & print calculator
+PERSON:      You (sticker shop owner in Jogja, 25 partner stores across Java)
+MODEL:       Qwen2.5-3B (3B params, via HF Inference API)
+UI:          Gradio Blocks with custom CSS
+DEPLOY:      Hugging Face Space (free tier)
+LANGUAGES:   English + Indonesian
+DEADLINE:    June 8, 2026
+PRIZE POOL:  $15,000
+```

README.md

@@ -1,15 +1,120 @@
----
-title: Piper Assistant
-emoji: 📈
-colorFrom: indigo
-colorTo: indigo
-sdk: gradio
-sdk_version: 6.18.0
-python_version: '3.13'
-app_file: app.py
-pinned: false
-license: apache-2.0
-short_description: AI assistant specially built for small business
----
-
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+---
+title: Paperain Studio — Sticker Restock Manager
+emoji: 📝
+colorFrom: yellow
+colorTo: pink
+sdk: gradio
+sdk_version: "6.14.0"
+app_file: app.py
+pinned: false
+short_description: Piper turns messy store POs into restock workflows.
+tags:
+- track:backyard
+- achievement:offbrand
+- achievement:bestdemo
+- gradio
+- build-small-hackathon
+- backyard ai
+- backyard-ai
+- off brand
+- off-brand
+- best demo
+- best-demo
+- judges wildcard
+- judges-wildcard
+models:
+- Qwen/Qwen2.5-7B-Instruct
+---
+
+# Paperain Studio — Sticker Restock Manager
+
+**Piper** is an AI desk assistant for [Paperain Studio](https://paperainstudio.com) — a real sticker business in Yogyakarta, Indonesia selling through **25 partner stores** and **150 designs**.
+
+Every month, stores send restock orders as messy Excel copy-pastes, PDFs, or WhatsApp screenshots (Indonesian, English, or both). My family used to spend **3+ hours** manually typing data into spreadsheets. Piper fixes that.
+
+**Try it:** [Live Space](https://huggingface.co/spaces/build-small-hackathon/piper-assistant) · [Demo video](#demo-video) *(coming soon)* · [Blog post](https://www.paperainstudio.com/blog/how-we-built-piper-ai-build-small-hackathon) · [Social post](#social-post) *(coming soon)*
+
+## TL;DR for Judges
+
+- **Track — Backyard AI:** Built for our own family sticker business. 25 real partner stores across Java send monthly restock orders in 25 different formats — Excel, WhatsApp, mixed Indonesian/English. Piper turns that chaos into structured workflows my family can actually use.
+- **Idea:** Paste any store PO → review parsed products → aggregate demand vs home stock → calculate A3 print sheets → generate bilingual delivery docs. Hours of spreadsheet work, compressed into a form-like Gradio app.
+- **Tech:** Python 3.11 · Gradio 6.x · pandas · **Qwen2.5-7B-Instruct** via Hugging Face Inference API (7B params, well under the 32B cap) · 3-stage parsing pipeline (normalize → JSON extract → catalog anchor) · rule-based fallback when the API is cold.
+- **Off Brand:** Custom light cream UI matching paperainstudio.com — not stock Gradio defaults.
+- **Best Demo:** Demo video and social post linked below *(placeholders until published)*.
+- **Judges' Wildcard:** Real small-business ops tool that doesn't fit a neat category — part parser, part print calculator, part bilingual doc generator.
+
+## Submission Links
+
+| Item | Link |
+|------|------|
+| Live Space | https://huggingface.co/spaces/build-small-hackathon/piper-assistant |
+| Demo video | *TODO: add YouTube or Loom link here* |
+| Blog post (Field Notes) | https://www.paperainstudio.com/blog/how-we-built-piper-ai-build-small-hackathon |
+| Social post | *TODO: add X / Instagram / LinkedIn link here* |
+
+### Demo Video
+
+*Placeholder — record and paste your demo video URL above before final submission.*
+
+Suggested flow: show a messy Indonesian PO → Parse with Piper → Stock & Demand → Print Calculator → Delivery Docs.
+
+### Social Post
+
+*Placeholder — publish a post showcasing Piper and paste the link above.*
+
+## The Problem
+
+- 25 stores, each with their own PO format and best sellers
+- Mixed-language, informal orders ("stiker kucing hologram 20 pcs")
+- Manual spreadsheet work that's hard for non-tech-savvy family members
+
+## The Solution
+
+Powered by **Qwen2.5-7B** (7 billion parameters — well under the 32B hackathon limit):
+
+| Tool | What it does |
+|------|-------------|
+| **PO Intake** | Paste any PO format → structured product/qty table |
+| **Stock & Demand** | Aggregate orders vs home inventory, show shortages |
+| **Print Calculator** | A3 sheet math (8 A5 stickers per sheet) |
+| **Delivery Docs** | Bilingual packing lists (EN / ID) |
+| **Best Sellers** | Demand-based recommendations for partner stores |
+
+## Why a Small Model?
+
+Parsing `"stiker kucing 20 pcs"` into `{product, quantity}` is **structured extraction** — not creative writing. A 7B model handles this perfectly:
+
+- Runs on a laptop (no GPT-4 API needed)
+- Zero cost per call
+- Store data stays private
+- Fast enough for monthly restock workflows
+
+**7 billion parameters. 25 real stores. 3 hours saved every month.**
+
+## How to Run
+
+```bash
+pip install -r requirements.txt
+python app.py
+```
+
+Set `HF_TOKEN` for Hugging Face Inference API, or run locally with Ollama (`FORCE_HF=0`).
+
+Built for the [Build Small Hackathon 2026](https://huggingface.co/build-small-hackathon) · **Backyard AI** track.
+
+## Hackathon Tags
+
+| Prize / Badge | Status | Why we hope to qualify |
+| --- | --- | --- |
+| Backyard AI | **Entered** | Real problem for a real family business — 25 stores, actual monthly PO chaos. |
+| Off Brand | **Targeted** | Custom Paperain-branded Gradio UI with warm cream palette, not default components. |
+| Best Demo | **Pending** | Demo video and social post placeholders above — full package once published. |
+| Judges' Wildcard | **Hopeful** | Practical ops tool spanning parsing, inventory, print math, and bilingual docs. |
+
+Submission checklist:
+
+- **REQ-01 / Stay under 32B:** complete — Qwen2.5-7B-Instruct (7B params).
+- **REQ-02 / Ship a Gradio app:** complete — Gradio Space deployed.
+- **REQ-03 / Record a demo:** pending — video link placeholder above.
+- **REQ-04 / Post it:** pending — social post link placeholder above.
+- **REQ-06 / Tag your README:** complete — track and badge tags in frontmatter.

app.py

@@ -0,0 +1,13 @@
+from ui import build_ui, THEME, CUSTOM_CSS, APP_HEAD
+
+demo = build_ui()
+
+if __name__ == "__main__":
+    demo.launch(
+        server_name="0.0.0.0",
+        server_port=7860,
+        theme=THEME,
+        css=CUSTOM_CSS,
+        head=APP_HEAD,
+        footer_links=["api", "gradio"],
+    )

catalog_resolver.py

@@ -0,0 +1,64 @@
+"""Map messy PO product names to the nearest canonical sticker in the catalog."""
+
+from __future__ import annotations
+
+from difflib import SequenceMatcher, get_close_matches
+
+from data import SAMPLE_CATALOG
+from parser_fallback import PRODUCT_ALIASES
+
+_CATALOG_LOWER = {p.lower(): p for p in SAMPLE_CATALOG}
+
+
+def resolve_product(raw: str, catalog: list[str] | None = None) -> str:
+    """Return the closest catalog name for a parsed product string."""
+    if not raw or not str(raw).strip():
+        return raw
+
+    catalog = catalog or SAMPLE_CATALOG
+    catalog_lower = {p.lower(): p for p in catalog}
+    cleaned = str(raw).strip()
+    key = cleaned.lower()
+
+    if key in catalog_lower:
+        return catalog_lower[key]
+
+    for alias, canonical in sorted(PRODUCT_ALIASES.items(), key=lambda x: -len(x[0])):
+        if alias in key or key in alias:
+            if canonical.lower() in catalog_lower:
+                return catalog_lower[canonical.lower()]
+            return canonical
+
+    for cat_lower, canonical in catalog_lower.items():
+        if cat_lower in key or key in cat_lower:
+            return canonical
+
+    matches = get_close_matches(key, catalog_lower.keys(), n=1, cutoff=0.55)
+    if matches:
+        return catalog_lower[matches[0]]
+
+    best_name, best_score = cleaned, 0.0
+    for cat_lower, canonical in catalog_lower.items():
+        score = SequenceMatcher(None, key, cat_lower).ratio()
+        if score > best_score:
+            best_score, best_name = score, canonical
+    if best_score >= 0.5:
+        return best_name
+
+    return cleaned
+
+
+def resolve_items(items: list[dict], catalog: list[str] | None = None) -> list[dict]:
+    """Normalize product field on each parsed item."""
+    out = []
+    for it in items:
+        row = dict(it)
+        raw = row.get("product", "")
+        resolved = resolve_product(raw, catalog)
+        if resolved != raw and not row.get("notes"):
+            row["notes"] = f"matched from: {raw}"
+        elif resolved != raw:
+            row["notes"] = f"{row['notes']} (matched from: {raw})"
+        row["product"] = resolved
+        out.append(row)
+    return out

config.py

@@ -0,0 +1,54 @@
+import os
+
+HF_TOKEN = os.environ.get("HF_TOKEN") or os.environ.get("HUGGING_FACE_HUB_TOKEN")
+HF_MODEL = "Qwen/Qwen2.5-7B-Instruct"
+
+_use_ollama = False
+_ollama_mod = None
+_hf_client = None
+_llm_available = False
+
+if os.environ.get("FORCE_HF", "1") != "1":
+    try:
+        if not os.environ.get("SPACE_ID"):
+            import ollama as _ollama_mod
+            _ollama_mod.list()
+            _use_ollama = True
+            _llm_available = True
+    except Exception:
+        _use_ollama = False
+
+if _use_ollama:
+    print("[startup] Using Ollama locally with qwen2.5:1.5b")
+else:
+    try:
+        from huggingface_hub import InferenceClient
+        _hf_client = InferenceClient(model=HF_MODEL, token=HF_TOKEN)
+        _llm_available = bool(HF_TOKEN) or bool(os.environ.get("SPACE_ID"))
+        print(f"[startup] HF Inference API — model={HF_MODEL}, token={'yes' if HF_TOKEN else 'space/default'}")
+    except Exception as exc:
+        print(f"[startup] HF client init failed: {exc}")
+        _hf_client = None
+        _llm_available = False
+
+
+def llm_available() -> bool:
+    return _llm_available and (_use_ollama or _hf_client is not None)
+
+
+def call_llm(prompt: str, system: str = "") -> str:
+    if not llm_available():
+        return "[LLM Error: Model unavailable — using rule-based fallback]"
+
+    messages = []
+    if system:
+        messages.append({"role": "system", "content": system})
+    messages.append({"role": "user", "content": prompt})
+    try:
+        if _use_ollama:
+            resp = _ollama_mod.chat(model="qwen2.5:1.5b", messages=messages)
+            return resp["message"]["content"]
+        resp = _hf_client.chat_completion(messages, max_tokens=2048, temperature=0.1)
+        return resp.choices[0].message.content
+    except Exception as e:
+        return f"[LLM Error: {e}]"

data.py

@@ -0,0 +1,65 @@
+import random
+import pandas as pd
+
+SAMPLE_CATALOG = [
+    "Holographic Cat Sticker", "Sakura Die-Cut Sticker", "Rainbow Unicorn Sticker",
+    "Kawaii Sushi Sticker", "Kawaii Ramen Sticker", "Kawaii Boba Tea Sticker",
+    "Floral Wreath Sticker", "Mountain Landscape Sticker", "Ocean Wave Sticker",
+    "Butterfly Garden Sticker", "Vintage Bicycle Sticker", "Coffee Cup Sticker",
+    "Galaxy Star Sticker", "Cactus Succulent Sticker", "Koi Fish Sticker",
+    "Cherry Blossom Sticker", "Batik Pattern Sticker", "Wayang Shadow Sticker",
+    "Borobudur Temple Sticker", "Komodo Dragon Sticker", "Gamelan Sticker",
+    "Javanese Dancer Sticker", "Tropical Bird Sticker", "Monstera Leaf Sticker",
+    "Cute Dog Sticker", "Cute Rabbit Sticker", "Panda Bear Sticker",
+    "Space Astronaut Sticker", "Retro Cassette Sticker", "Mushroom Forest Sticker",
+]
+
+SAMPLE_STORES = {
+    "Toko Alat Tulis Maju (Solo)": {"city": "Solo", "method": "Hand delivery", "consignment_pct": 30},
+    "Art Corner Klaten": {"city": "Klaten", "method": "Hand delivery", "consignment_pct": 25},
+    "Semarang Stationery": {"city": "Semarang", "method": "Hand delivery", "consignment_pct": 30},
+    "Gramedia Jogja": {"city": "Yogyakarta", "method": "Hand delivery", "consignment_pct": 35},
+    "Jakarta Creative Supply": {"city": "Jakarta", "method": "Post/courier", "consignment_pct": 30},
+    "Bandung Art Store": {"city": "Bandung", "method": "Post/courier", "consignment_pct": 28},
+    "Bali Artisan Shop": {"city": "Bali", "method": "Post/courier", "consignment_pct": 25},
+}
+
+STORE_NAMES = list(SAMPLE_STORES.keys())
+
+SAMPLE_PO_EXAMPLES = [
+    [
+        "Toko Alat Tulis Maju (Solo)",
+        "Pesanan bulan Juni 2026:\n- Stiker kucing hologram 20 pcs\n- Stiker sakura die-cut 15 pcs\n"
+        "- Rainbow unicorn stiker 10 pcs\n- Stiker boba tea kawaii 25 pcs\n"
+        "Tolong kirim sebelum tanggal 5 ya kak",
+    ],
+    [
+        "Jakarta Creative Supply",
+        "PO #JCS-2026-06\nItem | Qty\nHolographic Cat | 30\nGalaxy Star | 20\n"
+        "Monstera Leaf | 15\nBatik Pattern | 25\nKoi Fish | 10\nPlease ship via JNE REG",
+    ],
+    [
+        "Bali Artisan Shop",
+        "hai kak, mau order lagi ya:\nstiker borobudur 20, wayang 15, gamelan 10, "
+        "penari jawa 20, batik 30\noh ya ada rekomendasi best seller bulan ini? "
+        "mau coba jual juga\nmakasih!",
+    ],
+    [
+        "Bandung Art Store",
+        "Monthly restock:\n1. Sakura Die-Cut x25\n2. Cherry Blossom x20\n"
+        "3. Floral Wreath x15\n4. Butterfly Garden x10\n5. Vintage Bicycle x10\n"
+        "6. Coffee Cup x20\nNote: last month's sakura sold out in 2 weeks!",
+    ],
+    [
+        "Art Corner Klaten",
+        "kak pesan:\nkucing holo 15\nunicorn 10\nsushi kawaii 20\nramen kawaii 20\n"
+        "boba 15\nmushroom forest 10\nspace astronaut 5",
+    ],
+]
+
+
+def make_default_stock() -> pd.DataFrame:
+    random.seed(42)
+    return pd.DataFrame(
+        [{"Product": p, "In Stock": random.randint(5, 120)} for p in SAMPLE_CATALOG]
+    )

parser_fallback.py

@@ -0,0 +1,174 @@
+"""Rule-based PO parser — fallback when the 7B model is unavailable or returns bad JSON."""
+
+import re
+from typing import Optional
+
+from data import SAMPLE_CATALOG
+
+# Common Indonesian / informal aliases → canonical catalog names
+PRODUCT_ALIASES: dict[str, str] = {
+    "kucing hologram": "Holographic Cat Sticker",
+    "kucing holo": "Holographic Cat Sticker",
+    "holographic cat": "Holographic Cat Sticker",
+    "stiker kucing hologram": "Holographic Cat Sticker",
+    "sakura die-cut": "Sakura Die-Cut Sticker",
+    "stiker sakura": "Sakura Die-Cut Sticker",
+    "sakura": "Sakura Die-Cut Sticker",
+    "cherry blossom": "Cherry Blossom Sticker",
+    "rainbow unicorn": "Rainbow Unicorn Sticker",
+    "unicorn": "Rainbow Unicorn Sticker",
+    "boba tea": "Kawaii Boba Tea Sticker",
+    "boba": "Kawaii Boba Tea Sticker",
+    "sushi kawaii": "Kawaii Sushi Sticker",
+    "sushi": "Kawaii Sushi Sticker",
+    "ramen kawaii": "Kawaii Ramen Sticker",
+    "ramen": "Kawaii Ramen Sticker",
+    "floral wreath": "Floral Wreath Sticker",
+    "butterfly garden": "Butterfly Garden Sticker",
+    "vintage bicycle": "Vintage Bicycle Sticker",
+    "coffee cup": "Coffee Cup Sticker",
+    "galaxy star": "Galaxy Star Sticker",
+    "monstera leaf": "Monstera Leaf Sticker",
+    "monstera": "Monstera Leaf Sticker",
+    "batik pattern": "Batik Pattern Sticker",
+    "batik": "Batik Pattern Sticker",
+    "koi fish": "Koi Fish Sticker",
+    "koi": "Koi Fish Sticker",
+    "borobudur": "Borobudur Temple Sticker",
+    "wayang": "Wayang Shadow Sticker",
+    "gamelan": "Gamelan Sticker",
+    "penari jawa": "Javanese Dancer Sticker",
+    "javanese dancer": "Javanese Dancer Sticker",
+    "mushroom forest": "Mushroom Forest Sticker",
+    "space astronaut": "Space Astronaut Sticker",
+    "mountain landscape": "Mountain Landscape Sticker",
+    "ocean wave": "Ocean Wave Sticker",
+    "cactus succulent": "Cactus Succulent Sticker",
+    "cute dog": "Cute Dog Sticker",
+    "cute rabbit": "Cute Rabbit Sticker",
+    "panda bear": "Panda Bear Sticker",
+    "retro cassette": "Retro Cassette Sticker",
+    "tropical bird": "Tropical Bird Sticker",
+    "komodo dragon": "Komodo Dragon Sticker",
+}
+
+_CATALOG_LOWER = {p.lower(): p for p in SAMPLE_CATALOG}
+
+
+def _normalize_product(raw: str) -> str:
+    cleaned = re.sub(r"^[\-\*\d\.\)\s]+", "", raw.strip())
+    cleaned = re.sub(r"\s*(pcs|pc|lembar|sheet|sheets|buah|unit)\.?\s*$", "", cleaned, flags=re.I)
+    cleaned = cleaned.strip(" ,;:")
+    if not cleaned:
+        return ""
+
+    key = cleaned.lower()
+    if key in _CATALOG_LOWER:
+        return _CATALOG_LOWER[key]
+
+    for alias, canonical in sorted(PRODUCT_ALIASES.items(), key=lambda x: -len(x[0])):
+        if alias in key or key in alias:
+            return canonical
+
+    for cat_lower, canonical in _CATALOG_LOWER.items():
+        if cat_lower in key or key in cat_lower:
+            return canonical
+
+    return cleaned.title()
+
+
+def _extract_qty(text: str) -> int:
+    m = re.search(r"(\d+)\s*(?:pcs|pc|lembar|sheet|sheets|buah|unit)?\.?\s*$", text, re.I)
+    if m:
+        return int(m.group(1))
+    m = re.search(r"x\s*(\d+)\s*$", text, re.I)
+    if m:
+        return int(m.group(1))
+    m = re.search(r"\b(\d+)\b", text)
+    return int(m.group(1)) if m else 0
+
+
+def _parse_line(line: str) -> Optional[dict]:
+    line = line.strip()
+    if not line or len(line) < 3:
+        return None
+    if re.match(r"^(item|product|qty|quantity|no\.?|#)\b", line, re.I):
+        return None
+    if re.match(r"^(pesanan|po\s*#|monthly|tolong|please|note|hai|makasih|thanks)", line, re.I):
+        return None
+
+    # "Product x25" or "Product | 25"
+    m = re.match(r"^(.+?)\s*[x×]\s*(\d+)\s*$", line, re.I)
+    if m:
+        product = _normalize_product(m.group(1))
+        return {"product": product, "quantity": int(m.group(2)), "notes": ""} if product else None
+
+    m = re.match(r"^(.+?)\s*\|\s*(\d+)\s*$", line)
+    if m:
+        product = _normalize_product(m.group(1))
+        return {"product": product, "quantity": int(m.group(2)), "notes": ""} if product else None
+
+    # "name 20 pcs" or "name, 20"
+    m = re.match(r"^(.+?)[,\s]+(\d+)\s*(?:pcs|pc)?\.?\s*$", line, re.I)
+    if m:
+        product = _normalize_product(m.group(1))
+        return {"product": product, "quantity": int(m.group(2)), "notes": ""} if product else None
+
+    # Comma-separated inline: "borobudur 20, wayang 15"
+    if "," not in line and re.search(r"\d", line):
+        qty = _extract_qty(line)
+        if qty > 0:
+            product_part = re.sub(r"\d+.*$", "", line).strip(" ,-")
+            product = _normalize_product(product_part)
+            if product:
+                return {"product": product, "quantity": qty, "notes": ""}
+
+    return None
+
+
+def _parse_comma_list(text: str) -> list[dict]:
+    items: list[dict] = []
+    for chunk in re.split(r"[,;\n]+", text):
+        chunk = chunk.strip()
+        if not chunk:
+            continue
+        m = re.match(r"^(.+?)\s+(\d+)\s*$", chunk)
+        if m:
+            product = _normalize_product(m.group(1))
+            if product:
+                items.append({"product": product, "quantity": int(m.group(2)), "notes": ""})
+    return items
+
+
+def parse_po_fallback(po_text: str) -> dict:
+    """Extract items from messy PO text without an LLM."""
+    items: list[dict] = []
+    seen: set[tuple[str, int]] = set()
+    store_notes: list[str] = []
+
+    for line in po_text.splitlines():
+        parsed = _parse_line(line)
+        if parsed and parsed["quantity"] > 0:
+            key = (parsed["product"], parsed["quantity"])
+            if key not in seen:
+                seen.add(key)
+                items.append(parsed)
+        elif line.strip() and re.match(r"^(note|catatan|tolong|please|ship|kirim)", line.strip(), re.I):
+            store_notes.append(line.strip())
+
+    if len(items) < 2:
+        items.extend(_parse_comma_list(po_text))
+
+    # Deduplicate by product, sum quantities
+    merged: dict[str, dict] = {}
+    for it in items:
+        name = it["product"]
+        if name in merged:
+            merged[name]["quantity"] += it["quantity"]
+        else:
+            merged[name] = dict(it)
+
+    return {
+        "items": list(merged.values()),
+        "store_notes": " ".join(store_notes)[:200],
+    }

po_normalizer.py

@@ -0,0 +1,57 @@
+"""Stage 1 of the Piper pipeline — normalize Indonesian/English code-mixed PO text."""
+
+import re
+
+# Informal Indonesian + code-mixed phrases seen in real partner-store orders
+SLANG_PATTERNS: list[tuple[str, str, str]] = [
+    (r"\bmohon segera\b", "urgent ship request", "mohon segera"),
+    (r"\btolong kirim\b", "please ship", "tolong kirim"),
+    (r"\bkirim ya\b", "please ship", "kirim ya"),
+    (r"\brestock asap\b", "restock segera", "restock asap"),
+    (r"\bstok habis\b", "out of stock", "stok habis"),
+    (r"\blg diskon\b", "on sale", "lg diskon"),
+    (r"\blagi diskon\b", "on sale", "lagi diskon"),
+    (r"\bpesenan\b", "order", "pesanan"),
+    (r"\bpesan\b", "order", "pesan"),
+    (r"\bstiker\b", "sticker", "stiker"),
+    (r"\bstik(er)?\b", "sticker", "stiker"),
+    (r"\blembar\b", "pcs", "lembar"),
+    (r"\bbuah\b", "pcs", "buah"),
+    (r"\bunit\b", "pcs", "unit"),
+    (r"\bpcs\b", "pcs", "pcs"),
+    (r"\bpesanan bulan\b", "monthly order", "pesanan bulan"),
+    (r"\bmau order lagi\b", "reorder", "mau order lagi"),
+    (r"\bhai kak\b", "", "hai kak"),
+    (r"\bmakasih\b", "", "makasih"),
+    (r"\bthx\b", "", "thx"),
+    (r"\bthanks\b", "", "thanks"),
+]
+
+# Quantity patterns: "20 pcs", "x25", "20,"
+QTY_HINT = re.compile(
+    r"(\d+)\s*(?:pcs|pc|lembar|buah|unit)?",
+    re.I,
+)
+
+
+def normalize_po_text(raw: str) -> tuple[str, list[str]]:
+    """
+    Clean code-mixed PO text before the LLM sees it.
+    Returns (normalized_text, list of human-readable fixes applied).
+    """
+    text = raw.strip()
+    fixes: list[str] = []
+
+    for pattern, replacement, label in SLANG_PATTERNS:
+        if re.search(pattern, text, re.I):
+            text = re.sub(pattern, replacement, text, flags=re.I)
+            if label and label not in fixes:
+                fixes.append(label)
+
+    # Collapse repeated whitespace but keep line breaks
+    text = re.sub(r"[ \t]+", " ", text)
+    text = re.sub(r"\n{3,}", "\n\n", text)
+    text = re.sub(r"^[,;\s]+", "", text)
+    text = re.sub(r"[,;\s]{2,}", ", ", text)
+
+    return text, fixes

prompts.py

@@ -0,0 +1,49 @@
+from data import SAMPLE_CATALOG
+
+
+def build_parse_po_system(catalog: list[str]) -> str:
+    catalog_lines = "\n".join(f"- {name}" for name in catalog)
+    return (
+        "You are Piper, the AI assistant for Paperain Studio, a sticker shop in Indonesia. "
+        "Given messy PO text (could be from Excel, handwritten notes, mixed Indonesian/English), "
+        "extract ALL sticker items and return ONLY valid JSON:\n"
+        '{"items": [{"product": "exact catalog name", '
+        '"quantity": number, "notes": "any extra details or empty string"}], '
+        '"store_notes": "any general notes from the store"}\n'
+        "Rules:\n"
+        "- Return ONLY valid JSON, no markdown fences, no explanation\n"
+        "- If quantity is unclear, set to 0\n"
+        "- product MUST be the closest match from the official catalog below\n"
+        "- Indonesian/English/slang OK in input; output the catalog name\n"
+        "- Example: 'stiker kucing hologram' -> 'Holographic Cat Sticker'\n"
+        "- Keep original wording in notes if you translate it\n"
+        "- Be thorough: extract every line item\n\n"
+        "Few-shot examples (code-mixed Indonesian/English → JSON):\n"
+        'Input: "stiker kucing hologram 20 pcs, sakura 15 lembar"\n'
+        'Output: {"items":[{"product":"Holographic Cat Sticker","quantity":20,"notes":"stiker kucing hologram"},'
+        '{"product":"Sakura Die-Cut Sticker","quantity":15,"notes":"sakura"}],'
+        '"store_notes":""}\n'
+        'Input: "restock ASAP: boba 25, unicorn x10 — tolong kirim minggu ini"\n'
+        'Output: {"items":[{"product":"Kawaii Boba Tea Sticker","quantity":25,"notes":"restock ASAP"},'
+        '{"product":"Rainbow Unicorn Sticker","quantity":10,"notes":""}],'
+        '"store_notes":"tolong kirim minggu ini"}\n\n'
+        f"Official sticker catalog ({len(catalog)} designs):\n{catalog_lines}"
+    )
+
+
+PARSE_PO_SYSTEM = build_parse_po_system(SAMPLE_CATALOG)
+
+DELIVERY_SYSTEM = (
+    "You are Piper, writing a delivery document / packing list for Paperain Studio's sticker shipment. "
+    "Given the store name, items, and language preference, write a clean professional document. "
+    "Include: header with date and store name, itemized list with quantities, "
+    "a total count, and a note asking them to verify receipt. "
+    "Keep it concise and professional."
+)
+
+BESTSELLER_SYSTEM = (
+    "You are Piper, the sales analyst for Paperain Studio. Given sales data across multiple stores, "
+    "write a short, friendly recommendation of the top selling sticker varieties. "
+    "Explain WHY they sell well and suggest which stores should consider stocking them. "
+    "Keep it practical and concise. Write in the requested language."
+)

requirements.txt

@@ -0,0 +1,3 @@
+gradio>=5.0
+huggingface-hub
+pandas

services.py

@@ -0,0 +1,366 @@
+import json
+import math
+import os
+import tempfile
+from datetime import datetime
+
+import pandas as pd
+
+from catalog_resolver import resolve_items
+from config import call_llm, llm_available
+from data import SAMPLE_CATALOG
+from parser_fallback import parse_po_fallback
+from po_normalizer import normalize_po_text
+from prompts import DELIVERY_SYSTEM, BESTSELLER_SYSTEM, build_parse_po_system
+
+
+def _extract_json_from_llm(raw: str) -> dict | None:
+    json_str = raw.strip()
+    if "```" in json_str:
+        json_str = "\n".join(
+            line for line in json_str.split("\n")
+            if not line.strip().startswith("```")
+        )
+    try:
+        return json.loads(json_str)
+    except json.JSONDecodeError:
+        start, end = raw.find("{"), raw.rfind("}") + 1
+        if start != -1 and end > start:
+            try:
+                return json.loads(raw[start:end])
+            except json.JSONDecodeError:
+                return None
+    return None
+
+
+def _validate_po_data(data: dict) -> dict:
+    """Stage 3a — enforce structured schema before catalog anchoring."""
+    items = data.get("items") or []
+    clean = []
+    for it in items:
+        if not isinstance(it, dict):
+            continue
+        qty = it.get("quantity", 0)
+        try:
+            qty = int(qty)
+        except (TypeError, ValueError):
+            qty = 0
+        product = str(it.get("product", "")).strip()
+        if product and qty > 0:
+            clean.append({
+                "product": product,
+                "quantity": qty,
+                "notes": str(it.get("notes", "")).strip(),
+            })
+    return {"items": clean, "store_notes": str(data.get("store_notes", "")).strip()}
+
+
+def parse_po(store_name: str, po_text: str, all_pos: dict) -> tuple:
+    if not po_text.strip():
+        return pd.DataFrame(columns=["Product", "Qty", "Notes"]), "Please paste a PO first.", all_pos
+
+    used_fallback = False
+    data = None
+
+    # Stage 1: normalize Indonesian/English code-mixed slang
+    normalized, slang_fixes = normalize_po_text(po_text)
+
+    # Stage 2: Qwen extracts strict JSON (temperature=0.1 in config)
+    raw = call_llm(
+        f"Store: {store_name}\n\nPO text:\n{normalized}",
+        system=build_parse_po_system(SAMPLE_CATALOG),
+    )
+    if not raw.startswith("[LLM Error"):
+        data = _extract_json_from_llm(raw)
+
+    if data is None:
+        data = parse_po_fallback(normalized)
+        used_fallback = True
+        if not data.get("items"):
+            err = raw[:300] if raw.startswith("[LLM Error") else "No line items detected."
+            return (
+                pd.DataFrame(columns=["Product", "Qty", "Notes"]),
+                f"Could not parse PO. {err}",
+                all_pos,
+            )
+
+    data = _validate_po_data(data)
+
+    # Stage 3b: anchor product names to official catalog (fuzzy match)
+    raw_items = data.get("items", [])
+    items = resolve_items(raw_items, SAMPLE_CATALOG)
+    catalog_hits = sum(
+        1 for before, after in zip(raw_items, items)
+        if before.get("product", "").strip().lower() != after.get("product", "").strip().lower()
+    )
+    store_notes = data.get("store_notes", "")
+    rows = [
+        {
+            "Product": it.get("product", ""),
+            "Qty": it.get("quantity", 0),
+            "Notes": it.get("notes", ""),
+        }
+        for it in items
+    ]
+    df = pd.DataFrame(rows) if rows else pd.DataFrame(columns=["Product", "Qty", "Notes"])
+
+    all_pos[store_name] = {
+        "timestamp": datetime.now().strftime("%Y-%m-%d %H:%M"),
+        "items": rows,
+        "store_notes": store_notes,
+    }
+
+    total_qty = sum(r["Qty"] for r in rows)
+    engine = "offline rules" if used_fallback else "Qwen 2.5-7B"
+    pipeline = "normalize → extract JSON → catalog anchor"
+    status = (
+        f"Parsed {len(rows)} items ({total_qty} stickers) from {store_name} | "
+        f"Pipeline: {pipeline} | Engine: {engine}"
+    )
+    if slang_fixes:
+        status += f" | Slang normalized: {', '.join(slang_fixes[:4])}"
+        if len(slang_fixes) > 4:
+            status += f" +{len(slang_fixes) - 4} more"
+    if catalog_hits:
+        status += f" | Catalog matched: {catalog_hits} name(s)"
+    if store_notes:
+        status += f" | Notes: {store_notes}"
+    return df, status, all_pos
+
+
+def save_po(store_name: str, edited_table, all_pos: dict) -> tuple:
+    if edited_table is None or (isinstance(edited_table, pd.DataFrame) and edited_table.empty):
+        return all_pos, "Nothing to save."
+    if isinstance(edited_table, pd.DataFrame):
+        rows = edited_table.to_dict("records")
+    else:
+        rows = [{"Product": r[0], "Qty": r[1], "Notes": r[2]} for r in edited_table]
+    all_pos[store_name] = all_pos.get(
+        store_name,
+        {"timestamp": datetime.now().strftime("%Y-%m-%d %H:%M"), "store_notes": ""},
+    )
+    all_pos[store_name]["items"] = rows
+    return all_pos, f"Saved {len(rows)} items for {store_name}."
+
+
+def build_demand_table(all_pos: dict, stock_df) -> tuple:
+    if isinstance(stock_df, list):
+        stock_df = pd.DataFrame(stock_df, columns=["Product", "In Stock"])
+
+    demand: dict[str, int] = {}
+    stores_with_po: list[str] = []
+    for store, po_data in all_pos.items():
+        stores_with_po.append(store)
+        for item in po_data.get("items", []):
+            qty = item["Qty"] if isinstance(item["Qty"], (int, float)) else 0
+            demand[item["Product"]] = demand.get(item["Product"], 0) + int(qty)
+
+    if not demand:
+        return (
+            pd.DataFrame(columns=["Product", "Total Demand", "In Stock", "Shortage"]),
+            "No POs parsed yet. Go to the PO Intake tab first.",
+        )
+
+    stock_map = {}
+    if stock_df is not None and not stock_df.empty:
+        stock_map = {row["Product"]: int(row["In Stock"]) for _, row in stock_df.iterrows()}
+
+    rows = [
+        {
+            "Product": p,
+            "Total Demand": d,
+            "In Stock": stock_map.get(p, 0),
+            "Shortage": max(0, d - stock_map.get(p, 0)),
+        }
+        for p, d in sorted(demand.items())
+    ]
+    df = pd.DataFrame(rows)
+    shortage_total = sum(r["Shortage"] for r in rows)
+    summary = (
+        f"POs from {len(stores_with_po)} stores | "
+        f"{len(rows)} products | "
+        f"Shortage: {shortage_total} stickers to produce"
+    )
+    return df, summary
+
+
+def calculate_printing(demand_df) -> tuple:
+    if demand_df is None or (isinstance(demand_df, pd.DataFrame) and demand_df.empty):
+        return (
+            pd.DataFrame(columns=["Product", "Qty to Print", "A3 Sheets (8 per sheet)"]),
+            "No shortage data. Check the Demand tab first.",
+            None,
+        )
+    if isinstance(demand_df, list):
+        demand_df = pd.DataFrame(demand_df, columns=["Product", "Total Demand", "In Stock", "Shortage"])
+
+    rows: list[dict] = []
+    total_sheets = 0
+    for _, row in demand_df.iterrows():
+        shortage = int(row.get("Shortage", 0))
+        if shortage > 0:
+            sheets = math.ceil(shortage / 8)
+            total_sheets += sheets
+            rows.append({
+                "Product": row["Product"],
+                "Qty to Print": shortage,
+                "A3 Sheets (8 per sheet)": sheets,
+            })
+
+    if not rows:
+        return (
+            pd.DataFrame(columns=["Product", "Qty to Print", "A3 Sheets (8 per sheet)"]),
+            "No printing needed -- stock covers all demand!",
+            None,
+        )
+
+    df = pd.DataFrame(rows)
+    path = os.path.join(tempfile.gettempdir(), f"print_order_{datetime.now():%Y%m%d_%H%M%S}.csv")
+    df.to_csv(path, index=False)
+
+    total_qty = sum(r["Qty to Print"] for r in rows)
+    summary = f"Print {total_qty} stickers across {len(rows)} varieties | Total A3 sheets: {total_sheets}"
+    return df, summary, path
+
+
+def _delivery_doc_fallback(store_name: str, items: list, language: str) -> str:
+    lang = "id" if language.lower().startswith("indo") else "en"
+    date_str = datetime.now().strftime("%d %B %Y")
+    lines = items if lang == "en" else items
+    header = (
+        f"PAPERAIN STUDIO — DELIVERY NOTE\n{'=' * 40}\n"
+        f"{'Store' if lang == 'en' else 'Toko'}: {store_name}\n"
+        f"{'Date' if lang == 'en' else 'Tanggal'}: {date_str}\n\n"
+        f"{'Items' if lang == 'en' else 'Daftar barang'}:\n"
+    )
+    body = ""
+    total = 0
+    for i, it in enumerate([x for x in items if x.get("Qty", 0) > 0], 1):
+        qty = int(it.get("Qty", 0))
+        total += qty
+        body += f"  {i}. {it['Product']} — {qty} pcs\n"
+    footer = (
+        f"\n{'Total stickers' if lang == 'en' else 'Total stiker'}: {total} pcs\n\n"
+        + (
+            "Please verify receipt and contact us if anything is missing.\n— Paperain Studio, Yogyakarta"
+            if lang == "en"
+            else "Mohon periksa barang saat diterima. Hubungi kami jika ada yang kurang.\n— Paperain Studio, Yogyakarta"
+        )
+    )
+    return header + body + footer
+
+
+def generate_delivery_doc(store_name: str, all_pos: dict, language: str) -> str:
+    if store_name not in all_pos or not all_pos[store_name].get("items"):
+        return f"No PO data for {store_name}. Parse their PO first in the PO Intake tab."
+
+    items = all_pos[store_name]["items"]
+    items_text = "\n".join(
+        f"- {it['Product']}: {it['Qty']} pcs"
+        for it in items if it.get("Qty", 0) > 0
+    )
+    total = sum(it.get("Qty", 0) for it in items)
+
+    prompt = (
+        f"Store: {store_name}\n"
+        f"Date: {datetime.now():%B %d, %Y}\n"
+        f"Language: {language}\n"
+        f"Total items: {total}\n\n"
+        f"Items to deliver:\n{items_text}"
+    )
+    raw = call_llm(prompt, system=DELIVERY_SYSTEM)
+    if raw.startswith("[LLM Error"):
+        return _delivery_doc_fallback(store_name, items, language)
+    return raw
+
+
+def generate_bestseller_report(all_pos: dict, language: str) -> str:
+    if not all_pos:
+        return "No PO data yet. Parse some store POs first to generate recommendations."
+
+    demand: dict[str, int] = {}
+    store_demand: dict[str, dict[str, int]] = {}
+    for store, po_data in all_pos.items():
+        store_demand[store] = {}
+        for item in po_data.get("items", []):
+            qty = int(item.get("Qty", 0)) if isinstance(item.get("Qty", 0), (int, float)) else 0
+            demand[item["Product"]] = demand.get(item["Product"], 0) + qty
+            store_demand[store][item["Product"]] = qty
+
+    if not demand:
+        return "No order data to analyze."
+
+    sales_text = "Aggregated demand across all stores:\n"
+    for product, total in sorted(demand.items(), key=lambda x: x[1], reverse=True):
+        stores = [
+            f"{s} ({store_demand[s].get(product, 0)})"
+            for s in store_demand if store_demand[s].get(product, 0) > 0
+        ]
+        sales_text += f"- {product}: {total} total ({', '.join(stores)})\n"
+
+    raw = call_llm(f"Language: {language}\n\n{sales_text}", system=BESTSELLER_SYSTEM)
+    if raw.startswith("[LLM Error"):
+        return _bestseller_fallback(demand, store_demand, language)
+    return raw
+
+
+def _bestseller_fallback(demand: dict, store_demand: dict, language: str) -> str:
+    lang = "id" if language.lower().startswith("indo") else "en"
+    top = sorted(demand.items(), key=lambda x: x[1], reverse=True)[:8]
+    title = "Piper's Best Seller Report" if lang == "en" else "Laporan Best Seller dari Piper"
+    lines = [f"{title}\n{'=' * 36}\n"]
+    for rank, (product, total) in enumerate(top, 1):
+        stores = [s for s, d in store_demand.items() if d.get(product, 0) > 0]
+        if lang == "en":
+            lines.append(f"{rank}. {product} — {total} ordered across {len(stores)} store(s)")
+        else:
+            lines.append(f"{rank}. {product} — {total} dipesan dari {len(stores)} toko")
+    lines.append(
+        "\nThese designs sell consistently — great for restock and new partner onboarding."
+        if lang == "en"
+        else "\nDesain ini laris — cocok untuk restock dan rekomendasi ke toko baru."
+    )
+    return "\n".join(lines)
+
+
+def run_full_workflow(all_pos: dict, stock_df) -> tuple:
+    """Demand + print in one click (uses existing PO state)."""
+    demand_df, demand_summary = build_demand_table(all_pos, stock_df)
+    print_df, print_summary, print_csv = calculate_printing(demand_df)
+    combined = f"{demand_summary}\n\n{print_summary}"
+    return demand_df, combined, print_df, print_summary, print_csv
+
+
+def format_po_log(all_pos: dict) -> str:
+    if not all_pos:
+        return "*No POs parsed yet.*"
+    md = ""
+    for store, data in all_pos.items():
+        md += f"### {store} ({data.get('timestamp', '')})\n"
+        for it in data.get("items", []):
+            md += f"- {it.get('Product', '')} x{it.get('Qty', 0)}\n"
+        if data.get("store_notes"):
+            md += f"\n*Notes: {data['store_notes']}*\n"
+        md += "\n---\n\n"
+    return md
+
+
+def export_all_pos_csv(all_pos: dict):
+    if not all_pos:
+        return None
+    rows = []
+    for store, data in all_pos.items():
+        for item in data.get("items", []):
+            rows.append({
+                "Store": store,
+                "Product": item.get("Product", ""),
+                "Qty": item.get("Qty", 0),
+                "Notes": item.get("Notes", ""),
+                "Parsed At": data.get("timestamp", ""),
+            })
+    if not rows:
+        return None
+    df = pd.DataFrame(rows)
+    path = os.path.join(tempfile.gettempdir(), f"all_pos_{datetime.now():%Y%m%d_%H%M%S}.csv")
+    df.to_csv(path, index=False)
+    return path

ui.py

@@ -0,0 +1,1132 @@
+import gradio as gr
+
+from data import STORE_NAMES, SAMPLE_PO_EXAMPLES, make_default_stock
+from services import (
+    parse_po,
+    save_po,
+    build_demand_table,
+    calculate_printing,
+    generate_delivery_doc,
+    generate_bestseller_report,
+    format_po_log,
+    export_all_pos_csv,
+    run_full_workflow,
+)
+
+# ---------------------------------------------------------------------------
+# Design system — Paperain light mode (high contrast, cream + dark text)
+# ---------------------------------------------------------------------------
+CUSTOM_CSS = """
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Montserrat:wght@400;600;700;800&display=swap');
+
+:root {
+    --primary:           #2D2D2D;
+    --primary-container: #FFF4D6;
+    --on-primary-container: #1A1A1A;
+    --secondary:         #5C5C5C;
+    --secondary-container: #F0F0EE;
+    --on-secondary-container: #1A1A1A;
+    --surface:           #FFFFFF;
+    --surface-low:       #F5F4F1;
+    --background:        #FFFFFF;
+    --on-surface:        #1A1A1A;
+    --on-surface-variant:#3D3D3D;
+    --outline:           #E0DDD6;
+    --honey:             #C9A227;
+    --radius:            16px;
+    --radius-lg:         24px;
+    --radius-pill:       999px;
+    --shadow-soft:       0 4px 24px rgba(104, 95, 48, 0.08);
+    --shadow-card:       0 2px 12px rgba(28, 27, 27, 0.05);
+    color-scheme: light !important;
+    --body-background-fill: var(--background) !important;
+    --background-fill-primary: var(--surface) !important;
+    --background-fill-secondary: var(--surface-low) !important;
+    --block-background-fill: transparent !important;
+    --block-border-color: transparent !important;
+    --body-text-color: #1A1A1A !important;
+    --body-text-color-subdued: #444444 !important;
+    --block-label-text-color: #1A1A1A !important;
+    --input-background-fill: #FFFFFF !important;
+    --input-text-color: #1A1A1A !important;
+    --input-border-color: var(--outline) !important;
+    --border-color-primary: var(--outline) !important;
+    --table-text-color: #1A1A1A !important;
+    --table-background-fill: #FFFFFF !important;
+    --table-even-background-fill: #F5F4F1 !important;
+    --table-odd-background-fill: #FFFFFF !important;
+    --table-border-color: var(--outline) !important;
+    --checkbox-label-text-color: #1A1A1A !important;
+    --radio-label-text-color: #1A1A1A !important;
+    --block-label-background-fill: #F5F4F1 !important;
+    --block-title-background-fill: #F5F4F1 !important;
+    --checkbox-label-background-fill: #FFFFFF !important;
+    --checkbox-label-border-color: #E0DDD6 !important;
+}
+
+/* ── Force readable dark text on labels/markdown (not buttons or tables) ── */
+.gradio-container label,
+.gradio-container .label-wrap,
+.gradio-container .label-wrap span,
+.gradio-container .block-label,
+.gradio-container fieldset legend,
+.gradio-container .markdown,
+.gradio-container .prose,
+.gradio-container .prose p,
+.gradio-container .markdown p,
+.gradio-container .tab-hint,
+.gradio-container .tab-hint span {
+    color: #1A1A1A !important;
+}
+
+.gradio-container textarea,
+.gradio-container input,
+.gradio-container select,
+.gradio-container .gr-textbox textarea,
+.gradio-container .gr-textbox input,
+.gradio-container [contenteditable] {
+    color: #1A1A1A !important;
+    -webkit-text-fill-color: #1A1A1A !important;
+    background: #FFFFFF !important;
+}
+
+.gradio-container table,
+.gradio-container td,
+.gradio-container th,
+.gradio-container .table-wrap,
+.gradio-container .dataframe {
+    color: #1A1A1A !important;
+    background-color: #FFFFFF !important;
+}
+
+.gradio-container table thead th {
+    background: #F0EDE8 !important;
+    color: #1A1A1A !important;
+}
+
+.gradio-container table tbody td {
+    background: #FFFFFF !important;
+    color: #1A1A1A !important;
+}
+
+.gradio-container table tbody tr:nth-child(even) td {
+    background: #F5F4F1 !important;
+}
+
+.gradio-container .wrap > label,
+.gradio-container .form > label,
+.gradio-container .svelte-1gfkn6j {
+    color: #1A1A1A !important;
+}
+
+/* ── Full-width: kill HF Spaces dark gutters ── */
+html, body, #root, .app, main, .wrap, .contain, footer.svelte-1ax1toq {
+    background: var(--background) !important;
+    color-scheme: light !important;
+}
+
+.contain {
+    max-width: 100% !important;
+    padding: 0 !important;
+    margin: 0 !important;
+}
+
+.gradio-container {
+    max-width: 100% !important;
+    width: 100% !important;
+    margin: 0 !important;
+    padding: 0 0 72px !important;
+    font-family: 'Inter', system-ui, sans-serif !important;
+    background: var(--background) !important;
+    color: var(--on-surface) !important;
+}
+
+.gradio-container .block,
+.gradio-container .form,
+.gradio-container .column,
+.gradio-container .row {
+    background: transparent !important;
+    border: none !important;
+    box-shadow: none !important;
+}
+
+.gradio-container h1, .gradio-container h2, .gradio-container h3,
+.gradio-container .prose h1, .gradio-container .prose h2, .gradio-container .prose h3 {
+    font-family: 'Montserrat', sans-serif !important;
+    color: var(--on-surface) !important;
+    letter-spacing: -0.02em;
+}
+
+.gradio-container p, .gradio-container span, .gradio-container label,
+.gradio-container .markdown, .gradio-container .prose {
+    font-family: 'Inter', sans-serif !important;
+    color: var(--on-surface-variant) !important;
+    line-height: 1.6;
+}
+
+/* ── Top nav ── */
+.top-nav {
+    position: sticky;
+    top: 0;
+    z-index: 100;
+    background: rgba(250, 250, 248, 0.95);
+    backdrop-filter: blur(12px);
+    border-bottom: 1px solid var(--outline);
+    margin-bottom: 0;
+}
+.top-nav-inner {
+    max-width: 1400px;
+    margin: 0 auto;
+    padding: 14px 40px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 16px;
+}
+.top-nav-brand {
+    font-family: 'Montserrat', sans-serif;
+    font-weight: 700;
+    font-size: 1.15rem;
+    color: var(--primary);
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+.top-nav-brand span.icon { font-size: 1.3rem; }
+.top-nav-meta {
+    font-size: 0.75rem;
+    font-weight: 600;
+    color: var(--on-surface-variant);
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+}
+@media (max-width: 768px) {
+    .top-nav-inner { padding: 12px 16px; }
+    .top-nav-meta { display: none; }
+}
+
+/* ── App shell ── */
+.app-shell {
+    max-width: 1400px;
+    margin: 0 auto;
+    padding: 32px 40px 0;
+    width: 100%;
+    box-sizing: border-box;
+}
+@media (max-width: 768px) {
+    .app-shell { padding: 20px 16px 0; }
+}
+
+/* ── Hero ── */
+.hero-section {
+    background: var(--surface);
+    border: 1px solid var(--outline);
+    border-radius: var(--radius-lg);
+    padding: 40px 44px 36px;
+    margin-bottom: 24px;
+    box-shadow: var(--shadow-soft);
+}
+.hero-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 32px;
+    align-items: start;
+}
+@media (max-width: 900px) {
+    .hero-grid { grid-template-columns: 1fr; }
+}
+.hero-section h1 {
+    font-size: clamp(2rem, 4vw, 2.75rem);
+    margin: 0 0 10px;
+    color: var(--on-surface) !important;
+    line-height: 1.15;
+}
+.hero-tagline {
+    font-size: 1.05rem;
+    color: var(--on-surface-variant);
+    margin: 0 0 20px;
+    line-height: 1.55;
+    max-width: 520px;
+}
+.hero-meta {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    flex-wrap: wrap;
+}
+.hero-pill {
+    display: inline-flex;
+    align-items: center;
+    gap: 5px;
+    background: var(--primary-container);
+    color: var(--on-primary-container);
+    font-size: 0.72rem;
+    font-weight: 700;
+    padding: 6px 14px;
+    border-radius: var(--radius-pill);
+    letter-spacing: 0.03em;
+    text-transform: uppercase;
+    white-space: nowrap;
+}
+.hero-pill.blue {
+    background: var(--secondary-container);
+    color: var(--on-secondary-container);
+}
+.hero-pill.muted {
+    background: var(--surface-low);
+    color: var(--on-surface-variant);
+    font-weight: 600;
+    text-transform: none;
+    letter-spacing: 0;
+}
+
+.stats-row {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 14px;
+}
+@media (min-width: 600px) {
+    .stats-row { grid-template-columns: repeat(4, 1fr); }
+}
+.stat {
+    background: var(--surface-low);
+    border: 1px solid var(--outline);
+    border-radius: var(--radius);
+    padding: 20px 14px;
+    text-align: center;
+    transition: transform 0.15s, box-shadow 0.15s;
+}
+.stat:hover {
+    transform: translateY(-2px);
+    box-shadow: var(--shadow-card);
+}
+.stat:nth-child(1) { border-left: 4px solid var(--honey); background: #FFF8E7; }
+.stat:nth-child(2) { border-left: 4px solid #8B9DAF; background: #F0F4F8; }
+.stat:nth-child(3) { border-left: 4px solid #6B6B6B; background: #F5F4F1; }
+.stat:nth-child(4) { border-left: 4px solid #7CB342; background: #F0F7EA; }
+.stat .number {
+    font-family: 'Montserrat', sans-serif;
+    font-size: 1.85rem;
+    font-weight: 800;
+    color: var(--on-surface) !important;
+    line-height: 1.1;
+    display: block;
+    white-space: nowrap;
+}
+.stat .label {
+    font-size: 0.68rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.07em;
+    color: var(--on-surface-variant) !important;
+    margin-top: 6px;
+    display: block;
+}
+
+/* ── Workflow steps ── */
+.step-flow {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    flex-wrap: wrap;
+    margin-top: 28px;
+    padding-top: 24px;
+    border-top: 1px solid var(--outline);
+}
+.step-flow .step {
+    background: var(--surface-low);
+    border: 1px solid var(--outline);
+    border-radius: var(--radius-pill);
+    padding: 8px 16px;
+    font-size: 0.8rem;
+    font-weight: 600;
+    color: var(--on-surface-variant);
+}
+.step-flow .step.active {
+    background: var(--primary-container);
+    border-color: var(--primary);
+    color: var(--on-surface);
+}
+.step-flow .arrow {
+    color: var(--outline);
+    font-size: 0.85rem;
+}
+
+/* ── Tabs (Gradio 6 — force dark labels) ── */
+.tabs, .tab-nav, .tabitem {
+    border: none !important;
+    background: transparent !important;
+}
+.tab-nav {
+    border-bottom: 2px solid #D0D0D0 !important;
+    gap: 4px !important;
+    margin-bottom: 0 !important;
+    padding: 0 !important;
+    flex-wrap: wrap !important;
+}
+.gradio-container .tabs button,
+.gradio-container .tab-nav button,
+.gradio-container button[role="tab"],
+.gradio-container .tab-nav > button {
+    font-family: 'Inter', sans-serif !important;
+    font-weight: 600 !important;
+    font-size: 0.9rem !important;
+    border-radius: 8px 8px 0 0 !important;
+    border: 1px solid #D0D0D0 !important;
+    border-bottom: none !important;
+    background: #F5F5F5 !important;
+    color: #111111 !important;
+    -webkit-text-fill-color: #111111 !important;
+    padding: 10px 18px !important;
+    margin-bottom: -1px !important;
+}
+.gradio-container .tabs button:hover,
+.gradio-container .tab-nav button:hover {
+    background: #EEEEEE !important;
+    color: #000000 !important;
+}
+.gradio-container .tabs button.selected,
+.gradio-container .tab-nav button.selected,
+.gradio-container button[role="tab"][aria-selected="true"] {
+    background: #FFFFFF !important;
+    color: #000000 !important;
+    -webkit-text-fill-color: #000000 !important;
+    border-color: #D0D0D0 !important;
+    border-bottom: 2px solid #FFFFFF !important;
+    box-shadow: inset 0 -3px 0 #111111 !important;
+}
+.tabitem {
+    background: var(--surface) !important;
+    border: 1px solid var(--outline) !important;
+    border-radius: var(--radius-lg) !important;
+    padding: 28px !important;
+    margin-top: 4px !important;
+    box-shadow: var(--shadow-card) !important;
+}
+
+/* ── Panels (PO intake split view) ── */
+.panel-input {
+    background: rgba(255, 255, 255, 0.7) !important;
+    border: 1px solid var(--outline) !important;
+    border-radius: var(--radius) !important;
+    padding: 20px !important;
+}
+.panel-output {
+    background: var(--surface-low) !important;
+    border: 1px solid var(--outline) !important;
+    border-radius: var(--radius) !important;
+    padding: 20px !important;
+}
+
+/* ── Buttons (Gradio 6 variant classes + inner spans) ── */
+.gradio-container button.primary,
+.gradio-container button.secondary,
+.gradio-container .gr-button-primary,
+.gradio-container .gr-button-secondary,
+.gradio-container button[class*="primary"],
+.gradio-container button[class*="secondary"] {
+    border-radius: var(--radius-pill) !important;
+    font-family: 'Inter', sans-serif !important;
+    font-weight: 600 !important;
+    font-size: 0.88rem !important;
+    padding: 11px 22px !important;
+    transition: transform 0.12s, box-shadow 0.12s, background 0.12s !important;
+}
+.gradio-container button.primary,
+.gradio-container .gr-button-primary,
+.gradio-container button[class*="primary"]:not([class*="secondary"]) {
+    background: #2D2D2D !important;
+    background-color: #2D2D2D !important;
+    color: #FFFFFF !important;
+    -webkit-text-fill-color: #FFFFFF !important;
+    border: none !important;
+    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12) !important;
+    font-weight: 700 !important;
+}
+.gradio-container button.primary *,
+.gradio-container .gr-button-primary *,
+.gradio-container button[class*="primary"]:not([class*="secondary"]) * {
+    color: #FFFFFF !important;
+    -webkit-text-fill-color: #FFFFFF !important;
+}
+.gradio-container button.primary:hover,
+.gradio-container .gr-button-primary:hover {
+    transform: translateY(-1px) !important;
+    background: #2D2D2D !important;
+    background-color: #2D2D2D !important;
+    color: #FFFFFF !important;
+}
+.gradio-container button.secondary,
+.gradio-container .gr-button-secondary,
+.gradio-container button[class*="secondary"] {
+    background: #FFFFFF !important;
+    background-color: #FFFFFF !important;
+    color: #111111 !important;
+    -webkit-text-fill-color: #111111 !important;
+    border: 1px solid #CCCCCC !important;
+}
+.gradio-container button.secondary *,
+.gradio-container .gr-button-secondary *,
+.gradio-container button[class*="secondary"] * {
+    color: #111111 !important;
+    -webkit-text-fill-color: #111111 !important;
+}
+.gradio-container button.secondary:hover,
+.gradio-container .gr-button-secondary:hover {
+    background: #F5F5F5 !important;
+    background-color: #F5F5F5 !important;
+    color: #000000 !important;
+}
+
+/* ── Inputs ── */
+textarea, input[type="text"], input[type="number"], select {
+    font-family: 'Inter', sans-serif !important;
+    border: 1px solid var(--outline) !important;
+    border-radius: var(--radius) !important;
+    font-size: 0.92rem !important;
+    background: var(--surface) !important;
+}
+textarea:focus, input:focus, select:focus {
+    border-color: var(--primary) !important;
+    box-shadow: 0 0 0 3px rgba(255, 241, 181, 0.6) !important;
+    outline: none !important;
+}
+
+/* ── Dataframes / tables (standard light spreadsheet) ── */
+.gradio-container .table-wrap,
+.gradio-container .dataframe-wrap,
+.gradio-container [class*="dataframe"] {
+    border: 1px solid #CCCCCC !important;
+    border-radius: 8px !important;
+    overflow: hidden !important;
+    background: #FFFFFF !important;
+}
+.gradio-container table,
+.gradio-container table thead,
+.gradio-container table tbody,
+.gradio-container table tr,
+.gradio-container table th,
+.gradio-container table td,
+.gradio-container .table-wrap table *,
+.gradio-container [class*="dataframe"] table * {
+    color: #111111 !important;
+    -webkit-text-fill-color: #111111 !important;
+    font-size: 0.9rem !important;
+}
+.gradio-container table thead th,
+.gradio-container table th {
+    font-family: 'Inter', sans-serif !important;
+    font-weight: 700 !important;
+    background: #E8E8E8 !important;
+    background-color: #E8E8E8 !important;
+    color: #111111 !important;
+    font-size: 0.78rem !important;
+    text-transform: uppercase !important;
+    letter-spacing: 0.04em !important;
+    border-bottom: 1px solid #CCCCCC !important;
+}
+.gradio-container table tbody td,
+.gradio-container table td {
+    background: #FFFFFF !important;
+    background-color: #FFFFFF !important;
+    color: #111111 !important;
+    border-bottom: 1px solid #EEEEEE !important;
+}
+.gradio-container table tbody tr:nth-child(even) td {
+    background: #F9F9F9 !important;
+    background-color: #F9F9F9 !important;
+}
+.gradio-container table tbody tr:hover td {
+    background: #F0F4FF !important;
+    background-color: #F0F4FF !important;
+}
+
+/* ── Gradio 6 Dataframe (div cells + CSS variables, incl. dark-mode class) ── */
+.gradio-container,
+.gradio-container .gradio-dataframe,
+.gradio-container .gradio-dataframe-standalone,
+.gradio-container [class*="dataframe"] {
+    --gr-df-table-bg-even: #F5F4F1 !important;
+    --gr-df-table-bg-odd: #FFFFFF !important;
+    --gr-df-table-text: #111111 !important;
+    --gr-df-table-border: #E0DDD6 !important;
+    --gr-df-accent: #4A6FA5 !important;
+    --gr-df-accent-soft: #F0F4FF !important;
+    --table-even-background-fill: #F5F4F1 !important;
+    --table-odd-background-fill: #FFFFFF !important;
+    --table-text-color: #111111 !important;
+    --table-row-focus: #F0F4FF !important;
+    --table-border-color: #E0DDD6 !important;
+    --df-table-even-background-fill: #F5F4F1 !important;
+    --df-table-odd-background-fill: #FFFFFF !important;
+    --df-body-text-color: #111111 !important;
+    --df-background-fill-primary: #FFFFFF !important;
+    --df-background-fill-secondary: #F5F4F1 !important;
+    --df-block-background-fill: #FFFFFF !important;
+    --background-fill-primary: #FFFFFF !important;
+    --background-fill-secondary: #F5F4F1 !important;
+    --body-text-color: #111111 !important;
+}
+html.dark .gradio-container,
+.dark .gradio-container,
+.gradio-container.dark {
+    --gr-df-table-bg-even: #F5F4F1 !important;
+    --gr-df-table-bg-odd: #FFFFFF !important;
+    --gr-df-table-text: #111111 !important;
+    --table-even-background-fill: #F5F4F1 !important;
+    --table-odd-background-fill: #FFFFFF !important;
+    --table-text-color: #111111 !important;
+    --df-table-even-background-fill: #F5F4F1 !important;
+    --df-table-odd-background-fill: #FFFFFF !important;
+    --df-body-text-color: #111111 !important;
+    --df-background-fill-primary: #FFFFFF !important;
+    --df-background-fill-secondary: #F5F4F1 !important;
+    --background-fill-primary: #FFFFFF !important;
+    --background-fill-secondary: #F5F4F1 !important;
+    --body-text-color: #111111 !important;
+}
+.gradio-container .cell-wrap,
+.gradio-container .table-wrap .cell-wrap,
+.gradio-container [class*="dataframe"] .cell-wrap {
+    color: #111111 !important;
+    -webkit-text-fill-color: #111111 !important;
+    background-color: #FFFFFF !important;
+}
+.gradio-container .cell-wrap input,
+.gradio-container .cell-wrap textarea {
+    color: #111111 !important;
+    -webkit-text-fill-color: #111111 !important;
+    background: #FFFFFF !important;
+}
+.gradio-container .header-row .cell-wrap,
+.gradio-container thead .cell-wrap,
+.gradio-container [class*="dataframe"] .header-row .cell-wrap {
+    background-color: #E8E8E8 !important;
+    color: #111111 !important;
+    font-weight: 700 !important;
+}
+.gradio-container tr:nth-child(even) .cell-wrap,
+.gradio-container .row-even .cell-wrap {
+    background-color: #F5F4F1 !important;
+}
+.gradio-container tr:hover .cell-wrap,
+.gradio-container .row-selected .cell-wrap,
+.gradio-container .selected .cell-wrap {
+    background-color: #F0F4FF !important;
+    color: #111111 !important;
+}
+
+/* ── Tab hints ── */
+.tab-hint {
+    background: #FFFFFF;
+    border: 1px solid var(--outline);
+    border-left: 4px solid var(--honey);
+    border-radius: 0 var(--radius) var(--radius) 0;
+    padding: 14px 18px;
+    margin-bottom: 20px;
+    font-size: 0.88rem;
+    color: #3D3D3D !important;
+}
+.tab-hint strong { color: #1A1A1A !important; }
+
+/* ── Block labels, field labels, radio/checkbox pills ── */
+.gradio-container .block-label,
+.gradio-container .block-label span,
+.gradio-container .block-title,
+.gradio-container .label-wrap span:not(.icon) {
+    background: #F5F4F1 !important;
+    background-color: #F5F4F1 !important;
+    color: #1A1A1A !important;
+    -webkit-text-fill-color: #1A1A1A !important;
+    border-color: #E0DDD6 !important;
+}
+.gradio-container fieldset label,
+.gradio-container .wrap > label,
+.gradio-container .form label {
+    background: #FFFFFF !important;
+    background-color: #FFFFFF !important;
+    color: #1A1A1A !important;
+    -webkit-text-fill-color: #1A1A1A !important;
+    border-color: #E0DDD6 !important;
+    box-shadow: none !important;
+}
+.gradio-container fieldset label:hover,
+.gradio-container .wrap > label:hover {
+    background: #F5F4F1 !important;
+    background-color: #F5F4F1 !important;
+    color: #1A1A1A !important;
+}
+.gradio-container fieldset label.selected,
+.gradio-container .wrap > label.selected {
+    background: #FFF4D6 !important;
+    background-color: #FFF4D6 !important;
+    color: #1A1A1A !important;
+    border-color: var(--honey) !important;
+}
+/* ── Accordion ── */
+.gradio-container .label-wrap {
+    font-family: 'Montserrat', sans-serif !important;
+    font-weight: 600 !important;
+    font-size: 0.85rem !important;
+    color: var(--on-surface-variant) !important;
+    text-transform: uppercase !important;
+    letter-spacing: 0.04em !important;
+    background: transparent !important;
+}
+
+/* ── Piper mascot ── */
+.piper-container {
+    position: fixed !important;
+    bottom: 24px !important;
+    right: 24px !important;
+    z-index: 99999 !important;
+    animation: piperFloat 4s ease-in-out infinite;
+}
+@keyframes piperFloat {
+    0%, 100% { transform: translateY(0); }
+    50%      { transform: translateY(-5px); }
+}
+.piper-body {
+    width: 60px; height: 68px;
+    background: var(--primary-container);
+    border-radius: 12px 12px 12px 20px;
+    position: relative;
+    box-shadow: var(--shadow-soft);
+    border: 2px solid var(--primary);
+}
+.piper-face {
+    position: absolute; top: 18px; left: 50%;
+    transform: translateX(-50%);
+    width: 44px; text-align: center;
+}
+.piper-eyes { display: flex; justify-content: center; gap: 9px; margin-bottom: 3px; }
+.piper-eye {
+    width: 7px; height: 8px;
+    background: var(--on-surface);
+    border-radius: 50%;
+    animation: piperBlink 4s ease-in-out infinite;
+}
+@keyframes piperBlink {
+    0%, 42%, 48%, 100% { transform: scaleY(1); }
+    45% { transform: scaleY(0.1); }
+}
+.piper-mouth {
+    width: 11px; height: 5px;
+    border-bottom: 2px solid var(--on-surface);
+    border-radius: 0 0 8px 8px;
+    margin: 2px auto 0;
+}
+.piper-cheek {
+    position: absolute; top: 28px;
+    width: 8px; height: 5px;
+    background: #fadadd;
+    border-radius: 50%;
+    opacity: 0.7;
+}
+.piper-cheek.left  { left: 6px; }
+.piper-cheek.right { right: 6px; }
+.piper-nametag {
+    text-align: center;
+    font-family: 'Inter', sans-serif;
+    font-size: 0.65rem;
+    font-weight: 800;
+    color: #111111 !important;
+    margin-top: 5px;
+    letter-spacing: 0.08em;
+}
+.piper-bubble {
+    position: absolute;
+    bottom: 78px; right: 0;
+    background: var(--surface);
+    border: 1px solid var(--outline);
+    border-radius: 14px 14px 4px 14px;
+    padding: 8px 13px;
+    font-size: 0.74rem;
+    font-weight: 600;
+    color: var(--on-surface-variant);
+    white-space: nowrap;
+    box-shadow: var(--shadow-card);
+    opacity: 0;
+    transform: translateY(4px);
+    transition: all 0.25s ease;
+}
+.piper-container:hover .piper-bubble {
+    opacity: 1;
+    transform: translateY(0);
+}
+
+.paperain-footer {
+    text-align: center;
+    padding: 28px 0 12px;
+    font-size: 0.78rem;
+    font-weight: 500;
+    color: var(--on-surface-variant);
+    letter-spacing: 0.02em;
+}
+
+/* ── Keep light surfaces if Gradio applies .dark (system theme) ── */
+html.dark,
+html.dark body,
+html.dark .gradio-container,
+:root.dark,
+:root.dark .gradio-container {
+    color-scheme: light !important;
+    background-color: #FAFAF8 !important;
+    --body-background-fill: #FAFAF8 !important;
+    --block-background-fill: #FFFFFF !important;
+    --background-fill-primary: #FFFFFF !important;
+    --background-fill-secondary: #F5F4F1 !important;
+    --body-text-color: #1A1A1A !important;
+    --gr-df-table-bg-even: #F5F4F1 !important;
+    --gr-df-table-bg-odd: #FFFFFF !important;
+    --gr-df-table-text: #1A1A1A !important;
+    --block-label-background-fill: #F5F4F1 !important;
+    --block-label-text-color: #1A1A1A !important;
+    --checkbox-label-background-fill: #FFFFFF !important;
+    --checkbox-label-text-color: #1A1A1A !important;
+}
+.app-shell {
+    background: transparent !important;
+}
+"""
+
+# One-time head script: prefer light theme, no MutationObserver (avoids layout thrash).
+APP_HEAD = """
+<meta name="color-scheme" content="light">
+<script>
+(function () {
+    var root = document.documentElement;
+    root.classList.remove('dark');
+    root.style.colorScheme = 'light';
+})();
+</script>
+"""
+
+THEME = gr.themes.Soft(
+    primary_hue=gr.themes.colors.neutral,
+    secondary_hue=gr.themes.colors.neutral,
+    font=gr.themes.GoogleFont("Inter"),
+).set(
+    body_background_fill="#FAFAF8",
+    body_text_color="#1A1A1A",
+    body_text_color_subdued="#444444",
+    block_background_fill="#FFFFFF",
+    block_border_width="0px",
+    block_shadow="none",
+    block_label_background_fill="#F5F4F1",
+    block_label_text_color="#1A1A1A",
+    block_title_background_fill="#F5F4F1",
+    block_title_text_color="#1A1A1A",
+    input_background_fill="#FFFFFF",
+    input_border_color="#E0DDD6",
+    button_primary_background_fill="#2D2D2D",
+    button_primary_text_color="#FFFFFF",
+    button_secondary_background_fill="#FFFFFF",
+    button_secondary_text_color="#1A1A1A",
+    checkbox_label_background_fill="#FFFFFF",
+    checkbox_label_text_color="#1A1A1A",
+    checkbox_label_border_color="#E0DDD6",
+    checkbox_label_background_fill_selected="#FFF4D6",
+    checkbox_label_text_color_selected="#1A1A1A",
+    checkbox_label_border_color_selected="#C9A227",
+    table_even_background_fill="#F5F4F1",
+    table_odd_background_fill="#FFFFFF",
+    table_border_color="#E0DDD6",
+    table_row_focus="#F0F4FF",
+)
+
+NAV_HTML = """
+<nav class="top-nav">
+  <div class="top-nav-inner">
+    <div class="top-nav-brand">
+      <span class="icon">✨</span>
+      <span>Piper · Paperain Studio</span>
+    </div>
+    <div class="top-nav-meta">Build Small Hackathon 2026 · Qwen 2.5-7B</div>
+  </div>
+</nav>
+"""
+
+HERO_HTML = """
+<div class="app-shell">
+<div class="hero-section">
+  <div class="hero-grid">
+    <div class="hero-copy">
+      <h1>Paperain Studio</h1>
+      <p class="hero-tagline">
+        Turn messy purchase orders from 25 partner stores into organised, print-ready sticker restocks — powered by Piper AI.
+      </p>
+      <div class="hero-meta">
+        <span class="hero-pill">Piper AI</span>
+        <span class="hero-pill blue">3-Stage Parser</span>
+        <span class="hero-pill">Code-Mixed ID/EN</span>
+        <span class="hero-pill muted">Qwen 2.5-7B · Yogyakarta</span>
+      </div>
+    </div>
+    <div class="stats-row">
+      <div class="stat"><span class="number">25</span><span class="label">Partner Stores</span></div>
+      <div class="stat"><span class="number">150</span><span class="label">Sticker Designs</span></div>
+      <div class="stat"><span class="number">7B</span><span class="label">Parameters</span></div>
+      <div class="stat stat-hours"><span class="number">3-4</span><span class="label">hours saved / Week</span></div>
+    </div>
+  </div>
+  <div class="step-flow">
+    <span class="step active">1 · Paste messy PO</span>
+    <span class="arrow">→</span>
+    <span class="step">2 · Aggregate demand</span>
+    <span class="arrow">→</span>
+    <span class="step">3 · Calculate print</span>
+    <span class="arrow">→</span>
+    <span class="step">4 · Delivery docs</span>
+  </div>
+</div>
+</div>
+"""
+
+PIPER_HTML = """
+<div class="piper-container" title="Piper — your sticker desk assistant">
+    <div class="piper-bubble">Hi! Paste a PO and I'll parse it ✨</div>
+    <div class="piper-body">
+        <div class="piper-face">
+            <div class="piper-eyes">
+                <div class="piper-eye"></div>
+                <div class="piper-eye"></div>
+            </div>
+            <div class="piper-mouth"></div>
+        </div>
+        <div class="piper-cheek left"></div>
+        <div class="piper-cheek right"></div>
+    </div>
+    <div class="piper-nametag">PIPER</div>
+</div>
+"""
+
+FOOTER_HTML = (
+    '<div class="app-shell"><div class="paperain-footer">'
+    "Paperain Studio · Build Small Hackathon 2026 · Qwen 2.5-7B · Yogyakarta, Indonesia"
+    "</div></div>"
+)
+
+TABS_OPEN = '<div class="app-shell">'
+
+
+def build_ui() -> gr.Blocks:
+    with gr.Blocks(
+        title="Paperain Studio — Sticker Restock Manager",
+        fill_width=True,
+        theme=THEME,
+        css=CUSTOM_CSS,
+        head=APP_HEAD,
+    ) as demo:
+
+        all_pos_state = gr.State(value={})
+        demand_state = gr.State(value=None)
+
+        gr.HTML(NAV_HTML)
+        gr.HTML(HERO_HTML)
+        gr.HTML(TABS_OPEN)
+
+        # ── Tab 1: PO Intake ──
+        with gr.Tab("PO Intake"):
+            gr.HTML(
+                '<div class="tab-hint"><strong>Step 1:</strong> Paste a store PO below — '
+                "any format works. Click a sample to try, then hit <strong>Parse PO with Piper</strong>.</div>"
+            )
+            with gr.Row(equal_height=True):
+                with gr.Column(scale=2, elem_classes=["panel-input"]):
+                    po_store = gr.Dropdown(
+                        choices=STORE_NAMES,
+                        value=STORE_NAMES[0],
+                        label="Store",
+                        allow_custom_value=True,
+                    )
+                    po_text = gr.Textbox(
+                        label="Paste PO Text",
+                        lines=12,
+                        placeholder=(
+                            "e.g.\nPesanan bulan Juni:\n"
+                            "- Stiker kucing hologram 20 pcs\n"
+                            "- Stiker sakura 15 pcs\n"
+                            "- Rainbow unicorn 10\n"
+                            "Tolong kirim sebelum tanggal 5"
+                        ),
+                    )
+                    with gr.Row():
+                        parse_btn = gr.Button("Parse PO with Piper", variant="primary", scale=2)
+                        save_btn = gr.Button("Save Edits", variant="secondary", scale=1)
+                    po_status = gr.Textbox(label="Status", interactive=False, max_lines=3)
+                with gr.Column(scale=3, elem_classes=["panel-output"]):
+                    po_table = gr.Dataframe(
+                        headers=["Product", "Qty", "Notes"],
+                        datatype=["str", "number", "str"],
+                        interactive=True,
+                        label="Piper's Interpretation (editable)",
+                    )
+
+            with gr.Accordion("All Parsed POs", open=False):
+                po_log_md = gr.Markdown("*No POs parsed yet.*")
+                export_all_btn = gr.Button("Export All POs as CSV", variant="secondary")
+                export_all_file = gr.File(label="Download CSV")
+
+            gr.Markdown("#### Try These Sample POs")
+            gr.Examples(
+                examples=SAMPLE_PO_EXAMPLES,
+                inputs=[po_store, po_text],
+                label="Click an example, then Parse",
+            )
+
+        # ── Tab 2: Stock & Demand ──
+        with gr.Tab("Stock & Demand"):
+            gr.HTML(
+                '<div class="tab-hint"><strong>Step 2:</strong> After parsing POs, click '
+                "<strong>Refresh Demand</strong> to see total demand vs your home stock.</div>"
+            )
+            with gr.Row(equal_height=True):
+                with gr.Column(scale=1, elem_classes=["panel-input"]):
+                    gr.Markdown("#### Home Stock")
+                    stock_table = gr.Dataframe(
+                        value=make_default_stock(),
+                        headers=["Product", "In Stock"],
+                        datatype=["str", "number"],
+                        interactive=True,
+                        label="Your inventory",
+                    )
+                with gr.Column(scale=1, elem_classes=["panel-output"]):
+                    gr.Markdown("#### Demand vs Stock")
+                    refresh_demand_btn = gr.Button("Refresh Demand", variant="primary")
+                    workflow_btn = gr.Button("Run Full Workflow (Demand + Print)", variant="secondary")
+                    demand_summary = gr.Textbox(label="Summary", interactive=False, lines=2)
+                    demand_table = gr.Dataframe(
+                        headers=["Product", "Total Demand", "In Stock", "Shortage"],
+                        datatype=["str", "number", "number", "number"],
+                        interactive=False,
+                        label="Aggregated demand",
+                    )
+
+        # ── Tab 3: Print Calculator ──
+        with gr.Tab("Print Calculator"):
+            gr.HTML(
+                '<div class="tab-hint"><strong>Step 3:</strong> Each A3 sheet fits 8 A5 stickers. '
+                "Only products with shortages appear here.</div>"
+            )
+            with gr.Column(elem_classes=["panel-output"]):
+                calc_btn = gr.Button("Calculate Print Order", variant="primary")
+                print_summary = gr.Textbox(label="Summary", interactive=False, lines=2)
+                print_table = gr.Dataframe(
+                    headers=["Product", "Qty to Print", "A3 Sheets (8 per sheet)"],
+                    datatype=["str", "number", "number"],
+                    interactive=False,
+                    label="Print order",
+                )
+                print_csv = gr.File(label="Download Print Order CSV")
+
+        # ── Tab 4: Delivery Docs ──
+        with gr.Tab("Delivery Docs"):
+            gr.HTML(
+                '<div class="tab-hint"><strong>Step 4:</strong> Generate a packing list for a specific store. '
+                "Parse their PO first in Tab 1.</div>"
+            )
+            with gr.Column(elem_classes=["panel-input"]):
+                with gr.Row():
+                    del_store = gr.Dropdown(
+                        choices=STORE_NAMES,
+                        value=STORE_NAMES[0],
+                        label="Store",
+                        allow_custom_value=True,
+                    )
+                    del_lang = gr.Radio(["English", "Indonesian"], value="English", label="Language")
+                del_btn = gr.Button("Generate Delivery Document", variant="primary")
+                del_output = gr.Textbox(label="Delivery Document", lines=16, interactive=False)
+
+        # ── Tab 5: Best Sellers ──
+        with gr.Tab("Best Sellers"):
+            gr.HTML(
+                '<div class="tab-hint">Piper analyses demand across all parsed POs and recommends '
+                "what to stock — share with stores that ask.</div>"
+            )
+            with gr.Column(elem_classes=["panel-output"]):
+                with gr.Row():
+                    bs_lang = gr.Radio(["English", "Indonesian"], value="English", label="Language")
+                    bs_btn = gr.Button("Generate Report", variant="primary")
+                bs_output = gr.Textbox(label="Best Seller Report", lines=16, interactive=False)
+
+        gr.HTML('</div>')  # close app-shell
+        gr.HTML(FOOTER_HTML)
+        gr.HTML(PIPER_HTML)
+
+        # ── Events ──
+        def parse_and_refresh(store, text, all_pos, stock):
+            po_table_out, status, all_pos_out = parse_po(store, text, all_pos)
+            demand_df, demand_sum = build_demand_table(all_pos_out, stock)
+            log_md = format_po_log(all_pos_out)
+            return po_table_out, status, all_pos_out, demand_df, demand_sum, log_md, demand_df
+
+        parse_btn.click(
+            fn=parse_and_refresh,
+            inputs=[po_store, po_text, all_pos_state, stock_table],
+            outputs=[po_table, po_status, all_pos_state, demand_table, demand_summary, po_log_md, demand_state],
+        )
+
+        save_btn.click(
+            fn=save_po,
+            inputs=[po_store, po_table, all_pos_state],
+            outputs=[all_pos_state, po_status],
+        ).then(
+            fn=format_po_log,
+            inputs=[all_pos_state],
+            outputs=[po_log_md],
+        ).then(
+            fn=build_demand_table,
+            inputs=[all_pos_state, stock_table],
+            outputs=[demand_table, demand_summary],
+        ).then(
+            fn=lambda d, s: d,
+            inputs=[demand_table, demand_summary],
+            outputs=[demand_state],
+        )
+
+        export_all_btn.click(
+            fn=export_all_pos_csv,
+            inputs=[all_pos_state],
+            outputs=[export_all_file],
+        )
+
+        refresh_demand_btn.click(
+            fn=build_demand_table,
+            inputs=[all_pos_state, stock_table],
+            outputs=[demand_table, demand_summary],
+        ).then(
+            fn=lambda d, s: d,
+            inputs=[demand_table, demand_summary],
+            outputs=[demand_state],
+        )
+
+        workflow_btn.click(
+            fn=run_full_workflow,
+            inputs=[all_pos_state, stock_table],
+            outputs=[demand_table, demand_summary, print_table, print_summary, print_csv],
+        ).then(
+            fn=lambda d, *_: d,
+            inputs=[demand_table, demand_summary, print_table, print_summary, print_csv],
+            outputs=[demand_state],
+        )
+
+        calc_btn.click(
+            fn=calculate_printing,
+            inputs=[demand_table],
+            outputs=[print_table, print_summary, print_csv],
+        )
+
+        del_btn.click(
+            fn=generate_delivery_doc,
+            inputs=[del_store, all_pos_state, del_lang],
+            outputs=[del_output],
+        )
+
+        bs_btn.click(
+            fn=generate_bestseller_report,
+            inputs=[all_pos_state, bs_lang],
+            outputs=[bs_output],
+        )
+
+    return demo