---
title: Shopfront — Product Photo Studio
emoji: 🛍️
colorFrom: green
colorTo: gray
sdk: gradio
sdk_version: 5.49.1
app_file: app.py
pinned: false
license: apache-2.0
suggested_hardware: zero-a10g
short_description: Turn phone snaps into clean product photos on klein 4B
models:
  - black-forest-labs/FLUX.2-klein-4B
  - black-forest-labs/FLUX.2-klein-base-4B
tags:
  - build-small-hackathon
  - backyard-ai
  - tiny-titan
  - off-brand
  - best-demo
  - flux
  - image-to-image
---

# 🛍️ Shopfront — Product Photo Studio

**Selling something handmade? Turn a plain phone snap into a clean product photo.**
Upload a photo of your product; Shopfront restages it on a well-lit scene —
marble, linen, a sunlit windowsill — **keeping the product itself intact** — and
hands you four variations to pick from. No prompt writing, no studio. Built for
the [Build Small Hackathon](https://huggingface.co/build-small-hackathon)
(🏡 *Backyard AI* track) on **FLUX.2 [klein] 4B**.

> ▶️ **Demo video:** _add link_  ·  📣 **Social post:** _add link_

## How it works

1. **Upload** a plain phone photo of your product.
2. **Pick a scene** — *White marble, Linen flat-lay, Sunlit windowsill, Studio
   grey, Botanical*. No prompt writing.
3. Shopfront runs a guarded image-edit (*"keep the product, change only the
   background and lighting"*) and returns a **4-variation grid** so you choose the
   best shot.

It's a focused tool for one real user — a small seller — not a generic prompt box.

## Idea & tech (Build Small write-up)

- **The problem.** Good product photography is expensive; most small sellers have
  phone snaps on a cluttered table. Shopfront does the lighting and staging.
- **The model.** [`FLUX.2-klein-4B`](https://huggingface.co/black-forest-labs/FLUX.2-klein-4B)
  — 4B params, **Apache 2.0**, open weights, runs on the Space GPU (~13 GB,
  4-step distilled), no token/gating.
- **The engine.** A `diffusers` `Flux2KleinPipeline` in **image→image** mode,
  built on CPU at module scope and moved to GPU inside a `@spaces.GPU` call
  (ZeroGPU). Inputs are snapped to a klein-legal size; the edit is called with
  `pipe(prompt=…, image=…)` (keyword — `image` is positional-first).
- **The craft.** Scene presets are guarded edit prompts that change only
  background/surface/light; four seeds give a pick-your-favourite grid. A custom
  single-purpose UI replaces the stock starter tabs.
- **Renders reliably on Spaces.** System-font theme (no Google-Fonts fetch) and
  `ssr_mode=False`.

## Why it fits "Build Small"

| Rule / badge | How Shopfront delivers it |
| --- | --- |
| **REQ-01 · Models ≤ 32B** | klein **4B** — also ≤ 4B → 🏅 **Tiny Titan**. |
| **REQ-02 · Gradio app in the org** | A Gradio Space; deploy/duplicate into the Build Small HF org. |
| **REQ-03 · Demo video** | _add link above_ |
| **REQ-04 · Social post** | _add link above_ |
| **REQ-05 · ZeroGPU limit** | Single ZeroGPU Space (`zero-a10g`). |
| **REQ-06 · Tagged README** | Track + badge tags + this write-up. |
| 🎨 **Off Brand** | Purpose-built studio UI, not the stock tabs. |
| 🎬 **Best Demo** | A real seller's before→after sells on video. |

## Submission checklist

- [x] Runs on klein 4B (≤ 32B, and ≤ 4B for Tiny Titan)
- [x] Gradio Space
- [ ] Demo video recorded + linked above
- [ ] One social post + linked above
- [ ] Space uploaded into the Build Small org
- [x] README tagged with track + badges + write-up

## Push it further

Train a **brand LoRA** on ~20 of the seller's existing on-brand shots (see
`TRAIN_A_LORA.md` + `configs/my_lora_klein_4b.yaml`) so every staged scene matches
their aesthetic — load it with `pipe.load_lora_weights(...)`.

---

**Links:** [FLUX.2 [klein]](https://huggingface.co/black-forest-labs/FLUX.2-klein-4B)
· [GitHub](https://github.com/black-forest-labs/flux2)
· [Docs](https://docs.bfl.ai)
· [Build Small Hackathon](https://huggingface.co/build-small-hackathon)

Built on the [klein Build Small starter](https://huggingface.co/spaces/stephenbtl/klein-build-small-starter).