A newer version of the Gradio SDK is available: 6.20.0
PRD — Shopfront (Product Photo Studio)
Turn a tiny business's phone snapshots into clean, professional product photos. Upload a plain phone photo of a handmade product; FLUX.2 [klein] re-lights and re-stages it on preset backgrounds (marble, linen, a sunlit windowsill) while keeping the product itself intact — and returns a grid of variations to pick from.
| Field | Value |
|---|---|
| Hackathon | Build Small (Hugging Face × Gradio) |
| Track | 🏡 Backyard AI (practical — solve a real problem for someone you know) |
| Partner kit | Black Forest Labs — FLUX.2 [klein] |
| Model | black-forest-labs/FLUX.2-klein-4B (4B, Apache 2.0); optional brand LoRA on FLUX.2-klein-base-4B |
| Badges targeted | 🏅 Tiny Titan (≤4B), 🎨 Off Brand (custom UI), 🎬 Best Demo, 🧩 Bonus Quest Champion |
| Deadline | June 15, 2026 · 23:59 UTC |
| Starter | Forked from stephenbtl/klein-build-small-starter (this repo) |
1. Summary
Shopfront is a single-purpose image-editing app for one very real user: a friend who sells something handmade (jewelry, candles, baked goods) and whose product photos are phone snaps on a cluttered table. Good product photography is expensive; Shopfront does the re-lighting and staging with klein's image-editing, keeping the actual product recognizable. The user never writes a prompt — they upload a photo and click a scene preset.
This is the most directly "Backyard AI" of the three concept branches (lifted
from STARTER_IDEAS.md #1, "Shopfront"). It's a focused tool for one user with
preset styling — explicitly not a generic prompt box.
2. The problem & user
User: a small/handmade seller (Etsy-scale) with no photography budget. Job-to-be-done: "make my product look like it was shot for a catalogue, without a studio." Constraint that makes it a product: the product must stay intact and recognizable — only the lighting/background/staging changes.
3. Why it fits "Build Small" (rule → how we satisfy it)
| Rule / badge | How this app delivers it |
|---|---|
| REQ-01 ≤ 32B | klein 4B = 4B params (+ optional small brand LoRA). ✅ |
| REQ-02 Gradio Space in org | Forked Gradio Space; deploy into the Build Small HF org. ✅ |
| REQ-03 Demo video | Phone snap → 3 staged scenes → 4-variation grid, end to end. |
| REQ-04 Social post | Before/after of a real product, linked from README. |
| REQ-05 ZeroGPU ≤10 apps/user | Single Space on ZeroGPU (zero-a10g). ✅ |
| REQ-06 README tags + write-up | See §9 for the exact YAML block. |
| 🏅 Tiny Titan (≤4B) | Runs entirely on klein 4B — qualifies for the ≤4B badge. |
| 🎨 Off Brand | Replace the dev tabs with a "studio counter" UI: upload, scene chips, variation grid. |
| 🎬 Best Demo | Real product + real seller story sells hard on video. |
4. Scope
MVP (must ship by deadline)
- Upload → scene presets → result. A row of named scene chips (e.g. "White Marble", "Linen Flat-lay", "Sunlit Windowsill", "Soft Studio Grey").
- Each scene = a curated edit prompt that re-lights/re-stages while preserving the product. One click; no prompt writing.
- Generate 4 variations (4 seeds) shown as a grid so the seller picks the best one.
- Clear before → after so the value is obvious.
Stretch
- Brand LoRA: train on ~20 of the seller's existing on-brand shots so every generated scene matches their aesthetic (the "push it further" in idea #1).
- Aspect presets for marketplace formats (1:1 for Etsy/IG, 4:5 portrait) via
the starter's
SIZE_PRESETS. - Light "keep product, change only background" guidance text + a strength control.
Out of scope
- True background segmentation/compositing (klein edits holistically; we rely on prompt + low change). Pixel-perfect product masking is a later iteration.
- In-Space training (offline via AI Toolkit — §6).
5. Technical design (grounded in the starter app.py)
This is the starter's Image → Image path, specialized and re-skinned.
- Pipeline: keep the starter's ZeroGPU setup verbatim —
import spacesbeforetorch;Flux2KleinPipeline.from_pretrained("black-forest-labs/FLUX.2-klein-4B", torch_dtype=torch.bfloat16)built on CPU at module scope;get_pipe()moves it to cuda inside the@GPUcall. - Edit call: reuse
img2img(). Footgun: callpipe(prompt=…, image=…)by keyword (imageis the first positional arg). - Prompts (from
PROMPTING.md): describe the change, not the whole scene — e.g. "Place the product on white marble in soft daylight, clean studio background, gentle reflections" rather than re-describing the product. Avoid "for a mug / as a logo" phrasing (the model would draw the mug). - Sizing:
klein_size()snaps input to a legal size; offer marketplace aspect presets viaSIZE_PRESETS. - Variation grid: call the edit 4× with different seeds; return a
gr.Gallery. - Steps/guidance: distilled 4B →
num_inference_steps=4,guidance_scale=1.0(starter defaults). Optional "High quality" path →FLUX.2-klein-base-4B, 50 steps, guidance 4.0.
Files to change
| File | Change |
|---|---|
app.py |
Collapse to one editing screen; add SCENES = {name: edit_prompt}; add 4-seed variation grid; wire scene chips → img2img. Keep ZeroGPU + klein_size. |
README.md |
New frontmatter + submission write-up + demo/social links (§9). |
configs/my_lora_klein_4b.yaml |
(Stretch) brand LoRA — trigger word, dataset path. |
examples/ |
Add real before/after product pairs for the demo + gr.Examples. |
6. Optional brand LoRA (stretch — earns the fine-tuning angle)
Per TRAIN_A_LORA.md: train on FLUX.2-klein-base-4B with 15–40 of the
seller's on-brand photos; caption content only, coined trigger (e.g.
SHOPBRAND); keep arch: "flux2_klein_4b"; $0.50 / ~30 min on RunPod; pick the
best sample checkpoint (step 750–1500), not the last. Load with
pipe.load_lora_weights(...) so scenes inherit the brand look.
7. Demo & social plan (REQ-03 / REQ-04)
- Demo video (2–4 min): real friend's product, real phone snap → three scene presets → variation grid → "the photo they'll actually post." Tell the seller's story.
- Social post: side-by-side before/after + Space link; link it back from the README.
8. Risks & mitigations
| Risk | Mitigation |
|---|---|
| Product identity drifts during edit | Prompt the change only; keep edits restrained; expose a strength control; offer base-4B/50-step "High quality". |
| Hallucinated text/labels on packaging | PROMPTING.md: klein text is unreliable — avoid label-dependent products in the demo; add "no text, no logos" to prompts. |
| ZeroGPU cold start / 75s budget | Keep the starter's module-scope CPU build; distilled 4-step default; @GPU(duration=75). |
| Deadline today | MVP = upload + scenes + 4-grid. Brand LoRA + aspect presets are stretch. |
9. Submission checklist (REQ-01 → REQ-06)
- REQ-01 Every model ≤32B — klein 4B (+ optional small LoRA). ✅ (≤4B → Tiny Titan)
- REQ-02 Gradio Space uploaded into the Build Small HF org.
- REQ-03 Demo video recorded and linked.
- REQ-04 One social post, linked from README.
- REQ-05 ≤10 ZeroGPU apps for this user.
- REQ-06 README YAML tagged + idea/tech write-up.
README frontmatter to apply at submission (REQ-06):
title: Shopfront — Product Photo Studio
short_description: Turn phone snaps into clean product photos on klein 4B
sdk: gradio
app_file: app.py
license: apache-2.0
suggested_hardware: zero-a10g
models:
- black-forest-labs/FLUX.2-klein-4B
- black-forest-labs/FLUX.2-klein-base-4B
tags:
- build-small-hackathon
- backyard-ai # track
- tiny-titan # ≤4B badge
- off-brand # custom UI badge
- best-demo # badge
- flux
- image-to-image
10. Definition of done
- The Space loads on ZeroGPU (no token), accepts a product photo, and returns a re-staged result for at least 3 scene presets, plus a 4-variation grid.
- Before → after is obvious in one screen.
- README has track + badge tags, an idea/tech write-up, and links to the demo video and social post.
- Submitted into the Build Small org before 23:59 UTC.