Add engraving style via ZeroGPU, polish UI colours

- Add instruct-pix2pix engraving style powered by @spaces.GPU
- Remove token input; Space runs under owner account
- Replace black tones with warm browns in buttons/selected states
- Change stamp collection area to parchment background
- Remove felt board inner shadow and box shadow

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

README.md

@@ -1,10 +1,10 @@
 ---
 title: Stamp Maker
-emoji: 📊
-colorFrom: blue
-colorTo: blue
+emoji: 🪄
+colorFrom: pink
+colorTo: orange
 sdk: gradio
-sdk_version: 6.8.0
+sdk_version: 6.5.0
 app_file: app.py
 pinned: false
 ---

app.py

@@ -0,0 +1,680 @@
+import gradio as gr
+from PIL import Image, ImageOps, ImageDraw, ImageEnhance, ImageFont
+import numpy as np
+import base64, io, random
+
+try:
+    import spaces
+    import torch
+    from diffusers import StableDiffusionInstructPix2PixPipeline
+    HAS_SPACES = True
+except ImportError:
+    HAS_SPACES = False
+
+_pipe = None
+
+def _load_pipe():
+    global _pipe
+    if _pipe is None:
+        _pipe = StableDiffusionInstructPix2PixPipeline.from_pretrained(
+            "timbrooks/instruct-pix2pix",
+            torch_dtype=torch.float16,
+            safety_checker=None,
+        ).to("cuda")
+        _pipe.set_progress_bar_config(disable=True)
+    return _pipe
+
+def _engrave_fn(img):
+    pipe = _load_pipe()
+    return pipe(
+        "convert to vintage postage stamp intaglio engraving, fine crosshatch etching lines, monochrome ink illustration",
+        image=img,
+        num_inference_steps=20,
+        image_guidance_scale=1.5,
+        guidance_scale=7,
+    ).images[0]
+
+if HAS_SPACES:
+    _engrave_fn = spaces.GPU(_engrave_fn)
+
+# ── Palette ───────────────────────────────────────────────────────────────────
+COLORS = {
+    "coral":    "#FF6B6B",
+    "mint":     "#00C9A7",
+    "lavender": "#9B72CF",
+    "gold":     "#E8A838",
+    "sky":      "#4FC3F7",
+    "rose":     "#F48FB1",
+    "sage":     "#66BB6A",
+}
+
+# ── Helpers ───────────────────────────────────────────────────────────────────
+def hex_rgb(h):
+    h = h.lstrip("#")
+    return int(h[:2], 16), int(h[2:4], 16), int(h[4:6], 16)
+
+def to_b64(img):
+    buf = io.BytesIO()
+    img.save(buf, "PNG")
+    return base64.b64encode(buf.getvalue()).decode()
+
+def load_font(size=11):
+    for path in [
+        "/usr/share/fonts/truetype/dejavu/DejaVuSans-Bold.ttf",
+        "/usr/share/fonts/truetype/liberation/LiberationSans-Bold.ttf",
+        "/System/Library/Fonts/Helvetica.ttc",
+    ]:
+        try:
+            return ImageFont.truetype(path, size)
+        except OSError:
+            pass
+    return ImageFont.load_default()
+
+# ── Stylisation ───────────────────────────────────────────────────────────────
+def stylize(img, style, hex_color):
+    r, g, b = hex_rgb(hex_color)
+    img = img.convert("RGB")
+
+    if style in ("engraving", "engraving ✦"):
+        if HAS_SPACES:
+            try:
+                return _engrave_fn(img).convert("RGB")
+            except Exception:
+                pass
+        # local fallback: high-contrast sharpened grayscale
+        return ImageOps.autocontrast(ImageEnhance.Sharpness(img.convert("L")).enhance(3.0), cutoff=2).convert("RGB")
+
+    if style == "duotone":
+        gray = ImageOps.autocontrast(img.convert("L"), cutoff=2)
+        gray = ImageOps.posterize(gray, 3)
+        t = np.array(gray, dtype=np.float32) / 255.0
+        return Image.fromarray(np.dstack([
+            np.clip(t * 255 + (1-t) * r, 0, 255),
+            np.clip(t * 255 + (1-t) * g, 0, 255),
+            np.clip(t * 255 + (1-t) * b, 0, 255),
+        ]).astype(np.uint8))
+
+    if style == "grayscale":
+        return ImageOps.autocontrast(img.convert("L"), cutoff=2).convert("RGB")
+
+    if style == "pop art":
+        return ImageEnhance.Color(ImageOps.posterize(img, 2)).enhance(2.5)
+
+    if style == "sepia":
+        t = np.array(ImageOps.autocontrast(img.convert("L")), dtype=np.float32) / 255.0
+        return Image.fromarray(np.dstack([
+            np.clip(t*240,0,255), np.clip(t*200,0,255), np.clip(t*145,0,255),
+        ]).astype(np.uint8))
+
+    return img
+
+# ── Stamp image ───────────────────────────────────────────────────────────────
+def build_stamp(arr, color_name, style, label):
+    if arr is None:
+        return None
+
+    hex_c = COLORS.get(color_name, "#FF6B6B")
+    r, g, b = hex_rgb(hex_c)
+    W, H = 280, 330
+    BRD, LH, PR, PG = 22, (30 if label.strip() else 0), 5, 16
+    aw, ah = W - 2*BRD, H - 2*BRD - LH - 8
+
+    photo = Image.fromarray(arr).convert("RGB")
+    photo.thumbnail((aw, ah), Image.LANCZOS)
+    photo = stylize(photo, style, hex_c)
+
+    stamp = Image.new("RGBA", (W, H), (r, g, b, 255))
+    draw  = ImageDraw.Draw(stamp)
+    draw.rectangle([BRD-4, BRD-4, W-BRD+3, H-BRD+3], fill=(255,255,255,255))
+
+    px, py = BRD + (aw - photo.width)//2, BRD + 4
+    stamp.paste(photo.convert("RGBA"), (px, py))
+
+    if label.strip():
+        font = load_font(11)
+        draw.text((W//2, H - BRD - LH//2 + 2), label.upper()[:24],
+                  fill=(r, g, b, 255), font=font, anchor="mm")
+
+    pc = (249, 245, 239, 255)
+    for x in range(PG, W, PG):
+        draw.ellipse([x-PR, -PR, x+PR, PR], fill=pc)
+        draw.ellipse([x-PR, H-PR, x+PR, H+PR], fill=pc)
+    for y in range(PG, H, PG):
+        draw.ellipse([-PR, y-PR, PR, y+PR], fill=pc)
+        draw.ellipse([W-PR, y-PR, W+PR, y+PR], fill=pc)
+
+    return stamp
+
+# ── Gallery HTML ──────────────────────────────────────────────────────────────
+_DATES = ["MAR 2026", "FEB 2026", "JAN 2026", "DEC 2025", "NOV 2025"]
+
+def gallery_html(stamps):
+    style_block = """<style>
+@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display&family=Space+Mono:wght@400;700&family=DM+Sans:wght@400;500;600&display=swap');
+
+.felt-board {
+    background: #F7F0E6;
+    background-image:
+        repeating-linear-gradient(0deg, transparent, transparent 39px, rgba(0,0,0,.03) 39px, rgba(0,0,0,.03) 40px),
+        repeating-linear-gradient(90deg, transparent, transparent 39px, rgba(0,0,0,.03) 39px, rgba(0,0,0,.03) 40px);
+    min-height: 460px;
+    border-radius: 12px;
+    padding: 48px 36px;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 36px;
+    align-items: flex-start;
+    position: relative;
+    border: 1px solid #D4C3A8;
+    box-shadow: none;
+}
+
+.felt-board::before {
+    content: '';
+    position: absolute;
+    inset: 6px;
+    border: 1px solid rgba(255,255,255,.04);
+    border-radius: 8px;
+    pointer-events: none;
+}
+
+.stamp-pin {
+    transform: rotate(var(--rot, 0deg));
+    transition: transform .35s cubic-bezier(.34,1.56,.64,1), filter .35s ease;
+    cursor: pointer;
+    position: relative;
+}
+.stamp-pin:hover {
+    transform: rotate(0deg) scale(1.12) translateY(-10px) !important;
+    z-index: 100;
+}
+.stamp-pin img { display: block; width: 122px; border-radius: 1px; }
+
+.postmark {
+    position: absolute;
+    top: 50%; left: 55%;
+    transform: translate(-50%, -50%) rotate(-22deg);
+    width: 58px; height: 58px;
+    border: 2.5px solid var(--mk-color, rgba(40,10,10,.55));
+    border-radius: 50%;
+    display: flex; flex-direction: column;
+    align-items: center; justify-content: center;
+    pointer-events: none;
+    opacity: var(--mk-vis, 0);
+    transition: opacity .2s;
+    font-family: 'Space Mono', monospace;
+    font-size: 5.5px;
+    font-weight: 700;
+    letter-spacing: .06em;
+    color: var(--mk-color, rgba(40,10,10,.55));
+    line-height: 1.4;
+    text-align: center;
+    text-transform: uppercase;
+}
+.postmark::before, .postmark::after {
+    content: '─ ─ ─ ─';
+    font-size: 5px;
+    letter-spacing: 1px;
+    display: block;
+    color: inherit;
+    opacity: .7;
+}
+.stamp-pin:hover .postmark { opacity: 1; }
+
+.board-empty {
+    width: 100%;
+    display: flex; flex-direction: column;
+    align-items: center; justify-content: center;
+    min-height: 360px;
+    gap: 14px;
+    font-family: 'DM Sans', system-ui;
+    color: #3A4F35;
+}
+.board-empty .empty-icon { font-size: 2.2rem; opacity: .6; }
+.board-empty p { font-size: .85rem; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; opacity: .5; margin: 0; }
+
+.collection-bar {
+    display: flex; align-items: center; justify-content: space-between;
+    padding: 0 2px 10px;
+}
+.collection-bar .col-label {
+    font-family: 'Space Mono', monospace;
+    font-size: .68rem;
+    font-weight: 700;
+    letter-spacing: .12em;
+    text-transform: uppercase;
+    color: #3A4F35;
+}
+.collection-bar .col-count {
+    font-family: 'Space Mono', monospace;
+    font-size: .68rem;
+    color: #3A4F35;
+    letter-spacing: .08em;
+}
+</style>"""
+
+    if not stamps:
+        return f"""{style_block}
+<div class="felt-board">
+  <div class="board-empty">
+    <div class="empty-icon">✉</div>
+    <p>your collection is waiting</p>
+  </div>
+</div>"""
+
+    cards = ""
+    mk_colors = ["rgba(120,20,20,.55)", "rgba(20,40,120,.5)", "rgba(20,80,30,.5)"]
+    for i, s in enumerate(stamps):
+        date = _DATES[i % len(_DATES)]
+        mk_c = mk_colors[i % len(mk_colors)]
+        cards += (
+            f'<div class="stamp-pin" style="--rot:{s["rot"]}deg">'
+            f'<img src="data:image/png;base64,{s["b64"]}" />'
+            f'</div>'
+        )
+
+    n = len(stamps)
+    return f"""{style_block}
+<div class="collection-bar">
+  <span class="col-label">collection</span>
+  <span class="col-count">{n:02d} stamp{"s" if n!=1 else ""}</span>
+</div>
+<div class="felt-board">{cards}</div>"""
+
+# ── App logic ─────────────────────────────────────────────────────────────────
+def preview_stamp(arr, color, style, label):
+    return build_stamp(arr, color, style, label)
+
+def add_stamp(arr, color, style, label, stamps):
+    img = build_stamp(arr, color, style, label)
+    if img is None:
+        return stamps, gallery_html(stamps)
+    rot = round(random.uniform(-6, 6), 1)
+    updated = stamps + [{"b64": to_b64(img), "rot": rot, "label": label.strip(), "color": color}]
+    return updated, gallery_html(updated)
+
+def clear_stamps():
+    return [], gallery_html([])
+
+# ── CSS ───────────────────────────────────────────────────────────────────────
+CSS = """
+@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display&family=Space+Mono:wght@400;700&family=DM+Sans:wght@400;500;600&display=swap');
+
+/* ─── Reset canvas ─── */
+body, .gradio-container, .main { background: #F7F0E6 !important; }
+footer { display: none !important; }
+.gradio-container { max-width: 1080px !important; margin: 0 auto !important; padding: 0 !important; }
+
+/* ─── Blocks / panels ─── */
+.block, .form {
+    background: transparent !important;
+    border: none !important;
+    box-shadow: none !important;
+    padding: 0 !important;
+    overflow: visible !important;
+}
+.gap, .contain, .row { overflow: visible !important; }
+.gap, .contain { gap: 16px !important; }
+
+/* ─── Image component: kill dark backgrounds everywhere ─── */
+[data-testid="image"],
+[data-testid="image"] > div,
+[data-testid="image"] .wrap,
+[data-testid="image"] .image-container,
+[data-testid="image"] > div > div,
+[data-testid="image"] .upload-container,
+[data-testid="image"] .svelte-1ipelgc {
+    background: #F0E8D8 !important;
+}
+/* Upload zone text — blanket override for all text nodes inside */
+[data-testid="image"] * {
+    color: #3D2E1E !important;
+    opacity: 1 !important;
+}
+
+/* Upload zone: fill full area, dashed border, no offset */
+[data-testid="image"] .wrap {
+    border: 2px dashed #C4B49A !important;
+    border-radius: 12px !important;
+    width: 100% !important;
+    height: 100% !important;
+    box-sizing: border-box !important;
+    position: relative !important;
+    left: auto !important;
+    top: auto !important;
+    transform: none !important;
+}
+/* Center the drop target content */
+[data-testid="image"] .wrap > div {
+    width: 100% !important;
+    height: 100% !important;
+    display: flex !important;
+    flex-direction: column !important;
+    align-items: center !important;
+    justify-content: center !important;
+}
+/* Source selector bar at bottom */
+[data-testid="image"] .source-selection {
+    background: rgba(240,232,216,.9) !important;
+    border-top: 1px solid #D4C3A8 !important;
+    border-radius: 0 0 10px 10px !important;
+}
+[data-testid="image"] .source-selection button {
+    color: #8A7660 !important;
+}
+/* Hide the floating "photo" label button — label is shown by our HTML header instead */
+[data-testid="image"] .label-wrap {
+    display: none !important;
+}
+/* Toolbar icon buttons */
+[data-testid="image"] .toolbar,
+[data-testid="image"] .icon-button-wrapper,
+[data-testid="image"] .tool-button,
+[data-testid="image"] button,
+[data-testid="image"] .svelte-button {
+    background: transparent !important;
+    background-color: transparent !important;
+    border: none !important;
+    box-shadow: none !important;
+    color: #8A7660 !important;
+}
+
+/* ─── Labels (component titles like "colour", "style", "label") ─── */
+label > span,
+.block > label > span,
+.form > label > span,
+fieldset > span,
+.gradio-radio > label,
+[data-testid="radio-group"] > span,
+.radio-group > span,
+span.svelte-radiogroup,
+.wrap ~ span,
+.container > span:first-child {
+    font-family: 'Space Mono', monospace !important;
+    font-size: .65rem !important;
+    font-weight: 700 !important;
+    letter-spacing: .14em !important;
+    text-transform: uppercase !important;
+    color: #3D2E1E !important;
+    opacity: 1 !important;
+}
+
+/* ─── Radio: colour swatches ─── */
+.color-pick .wrap { display: flex !important; flex-wrap: wrap !important; gap: 6px !important; }
+.color-pick .wrap label {
+    display: flex !important; align-items: center !important; gap: 7px !important;
+    padding: 5px 12px 5px 7px !important;
+    border-radius: 20px !important;
+    border: 1.5px solid #D4C3A8 !important;
+    background: white !important;
+    cursor: pointer !important;
+    font-family: 'DM Sans', system-ui !important;
+    font-size: .78rem !important;
+    font-weight: 600 !important;
+    color: #3D3020 !important;
+    transition: border-color .15s, box-shadow .15s !important;
+    user-select: none !important;
+}
+.color-pick .wrap label:hover { border-color: #A89070 !important; box-shadow: 0 2px 8px rgba(0,0,0,.08) !important; }
+.color-pick .wrap label:has(input:checked) { border-color: #5C3A1E !important; box-shadow: 2px 2px 0px #5C3A1E !important; }
+.color-pick .wrap label input[type=radio] { display: none !important; }
+.color-pick .wrap label::before {
+    content: '' !important; display: block !important;
+    width: 12px !important; height: 12px !important;
+    border-radius: 50% !important; flex-shrink: 0 !important;
+}
+.color-pick .wrap label:nth-child(1)::before { background: #FF6B6B !important; }
+.color-pick .wrap label:nth-child(2)::before { background: #00C9A7 !important; }
+.color-pick .wrap label:nth-child(3)::before { background: #9B72CF !important; }
+.color-pick .wrap label:nth-child(4)::before { background: #E8A838 !important; }
+.color-pick .wrap label:nth-child(5)::before { background: #4FC3F7 !important; }
+.color-pick .wrap label:nth-child(6)::before { background: #F48FB1 !important; }
+.color-pick .wrap label:nth-child(7)::before { background: #66BB6A !important; }
+
+/* ─── Radio: style pills ─── */
+.style-pick .wrap { display: flex !important; gap: 6px !important; flex-wrap: wrap !important; }
+.style-pick .wrap label {
+    padding: 5px 14px !important;
+    border-radius: 6px !important;
+    border: 1.5px solid #D4C3A8 !important;
+    background: white !important;
+    cursor: pointer !important;
+    font-family: 'Space Mono', monospace !important;
+    font-size: .68rem !important;
+    font-weight: 700 !important;
+    letter-spacing: .06em !important;
+    color: #2A1E10 !important;
+    transition: all .15s !important;
+    user-select: none !important;
+}
+.style-pick .wrap label:hover { background: #F5EDD9 !important; }
+.style-pick .wrap label:has(input:checked),
+.style-pick .wrap label.selected {
+    background: #5C3A1E !important;
+    color: #E8C97A !important;
+    border-color: #5C3A1E !important;
+}
+/* Ensure checked text beats the base color rule */
+.style-pick .wrap label:has(input:checked) span,
+.style-pick .wrap label:has(input:checked)::first-line {
+    color: #E8C97A !important;
+}
+.style-pick .wrap label input[type=radio] { display: none !important; }
+
+/* ─── Textbox ─── */
+input[type=text], textarea {
+    font-family: 'Space Mono', monospace !important;
+    font-size: .8rem !important;
+    border: 1.5px solid #D4C3A8 !important;
+    border-radius: 8px !important;
+    background: white !important;
+    color: #5C3A1E !important;
+    padding: 10px 14px !important;
+}
+input[type=text]:focus, textarea:focus {
+    border-color: #5C3A1E !important;
+    box-shadow: 2px 2px 0px #5C3A1E !important;
+    outline: none !important;
+}
+
+/* ─── Buttons ─── */
+button.primary {
+    background: #5C3A1E !important;
+    color: #E8C97A !important;
+    border: none !important;
+    border-radius: 8px !important;
+    font-family: 'Space Mono', monospace !important;
+    font-size: .75rem !important;
+    font-weight: 700 !important;
+    letter-spacing: .1em !important;
+    text-transform: uppercase !important;
+    padding: 12px 20px !important;
+    box-shadow: 3px 3px 0px #8A7660 !important;
+    transition: transform .12s, box-shadow .12s !important;
+}
+button.primary:hover { transform: translate(-1px, -1px) !important; box-shadow: 4px 4px 0px #8A7660 !important; }
+button.primary:active { transform: translate(2px, 2px) !important; box-shadow: 1px 1px 0px #8A7660 !important; }
+
+button.secondary {
+    background: white !important;
+    color: #3D2E1E !important;
+    border: 1.5px solid #D4C3A8 !important;
+    border-radius: 8px !important;
+    font-family: 'Space Mono', monospace !important;
+    font-size: .68rem !important;
+    font-weight: 700 !important;
+    letter-spacing: .08em !important;
+    text-transform: uppercase !important;
+    padding: 10px 14px !important;
+    transition: all .15s !important;
+}
+button.secondary:hover { border-color: #8A7660 !important; color: #3D3020 !important; }
+
+/* ─── Preview image ─── */
+[data-testid="image"].preview-img .wrap {
+    border-radius: 12px !important;
+    overflow: hidden !important;
+    border: 2px solid #D4C3A8 !important;
+    background: #F0E8D8 !important;
+}
+
+/* ─── Preview output: remove black toolbar/label/buttons ─── */
+.preview-img [data-testid="image"] .toolbar,
+.preview-img .toolbar,
+.preview-img .icon-button-wrapper,
+.preview-img button,
+.preview-img .label-wrap,
+.preview-img .label-wrap span,
+.preview-img .download-button {
+    background: rgba(240,232,216,.9) !important;
+    background-color: rgba(240,232,216,.9) !important;
+    color: #8A7660 !important;
+    border-color: #D4C3A8 !important;
+    box-shadow: none !important;
+}
+"""
+
+# ── Decorative HTML pieces ────────────────────────────────────────────────────
+HEADER_HTML = """
+<div style="font-family:'Space Mono',monospace;padding:0 0 28px;">
+
+  <!-- top rule -->
+  <div style="display:flex;align-items:center;gap:12px;margin-bottom:20px;opacity:.4">
+    <div style="flex:1;height:1px;background:repeating-linear-gradient(90deg,#8A7660 0,#8A7660 6px,transparent 6px,transparent 12px)"></div>
+    <span style="font-size:.6rem;letter-spacing:.18em;color:#8A7660;white-space:nowrap">PAR AVION · AIRMAIL · 航空郵便</span>
+    <div style="flex:1;height:1px;background:repeating-linear-gradient(90deg,#8A7660 0,#8A7660 6px,transparent 6px,transparent 12px)"></div>
+  </div>
+
+  <div style="display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;">
+
+    <!-- title block -->
+    <div>
+      <div style="font-family:'DM Serif Display',Georgia,serif;font-size:3.2rem;line-height:.95;letter-spacing:-.02em;color:#5C3A1E">
+        stamp<br>maker
+      </div>
+      <div style="margin-top:10px;font-size:.62rem;letter-spacing:.18em;color:#8A7660;text-transform:uppercase">
+        ✦ turn photos into collectibles ✦
+      </div>
+    </div>
+
+    <!-- postmark decoration -->
+    <div style="display:flex;gap:16px;align-items:center;opacity:.65;flex-shrink:0">
+      <div style="width:72px;height:72px;border:2.5px solid #8A7660;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:5.5px;letter-spacing:.1em;color:#6A5A45;text-align:center;line-height:1.7;text-transform:uppercase;position:relative">
+        <div style="position:absolute;top:-1px;left:50%;transform:translateX(-50%);width:80%;height:2px;background:#F7F0E6"></div>
+        <div style="position:absolute;bottom:-1px;left:50%;transform:translateX(-50%);width:80%;height:2px;background:#F7F0E6"></div>
+        FIRST CLASS<br><span style="font-size:7px;font-weight:700">2026</span><br>HAND STAMPED
+      </div>
+      <div style="display:flex;flex-direction:column;gap:3px">
+        <div style="width:48px;height:1.5px;background:#8A7660;border-radius:1px"></div>
+        <div style="width:40px;height:1.5px;background:#8A7660;border-radius:1px"></div>
+        <div style="width:44px;height:1.5px;background:#8A7660;border-radius:1px"></div>
+      </div>
+      <div style="writing-mode:vertical-rl;font-size:.55rem;letter-spacing:.2em;color:#8A7660;text-transform:uppercase;opacity:.8">
+        philatelist studio
+      </div>
+    </div>
+  </div>
+
+  <!-- bottom rule -->
+  <div style="margin-top:20px;display:flex;align-items:center;gap:12px;opacity:.35">
+    <div style="flex:1;border-top:1.5px solid #8A7660"></div>
+    <div style="width:6px;height:6px;border:1.5px solid #8A7660;border-radius:50%"></div>
+    <div style="flex:1;border-top:1.5px solid #8A7660"></div>
+  </div>
+</div>
+"""
+
+SECTION_DIVIDER = """
+<div style="margin:8px 0 4px;display:flex;align-items:center;gap:10px;opacity:.3">
+  <div style="flex:1;height:1px;background:repeating-linear-gradient(90deg,#8A7660 0,#8A7660 4px,transparent 4px,transparent 8px)"></div>
+  <span style="font-family:'Space Mono',monospace;font-size:.55rem;letter-spacing:.2em;color:#3D2E1E;text-transform:uppercase;white-space:nowrap">your collection</span>
+  <div style="flex:1;height:1px;background:repeating-linear-gradient(90deg,#8A7660 0,#8A7660 4px,transparent 4px,transparent 8px)"></div>
+</div>
+"""
+
+CONTROLS_HEADER = """
+<div style="font-family:'Space Mono',monospace;font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:#3D2E1E;margin-bottom:20px;margin-top:8px;">
+  ── studio controls ──
+</div>
+"""
+
+PREVIEW_HEADER = """
+<div style="font-family:'Space Mono',monospace;font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:#3D2E1E;margin-bottom:2px;">
+  ── preview ──
+</div>
+"""
+
+# ── UI ────────────────────────────────────────────────────────────────────────
+with gr.Blocks(css=CSS, title="stamp maker ✦") as demo:
+    state = gr.State([])
+
+    gr.HTML(HEADER_HTML)
+
+    with gr.Row(equal_height=False):
+
+        # ── Controls ──
+        with gr.Column(scale=5, min_width=300):
+            gr.HTML(CONTROLS_HEADER)
+            img_in = gr.Image(
+                label="photo",
+                type="numpy",
+                sources=["upload", "webcam"],
+                height=220,
+                show_label=False,
+            )
+            color_in = gr.Radio(
+                choices=list(COLORS.keys()),
+                value="coral",
+                label="colour",
+                elem_classes=["color-pick"],
+            )
+            style_in = gr.Radio(
+                choices=["duotone", "grayscale", "pop art", "sepia", "engraving ✦"],
+                value="duotone",
+                label="style",
+                elem_classes=["style-pick"],
+            )
+            label_in = gr.Textbox(
+                label="stamp label",
+                show_label=False,
+                placeholder="stamp label  e.g. tokyo / 2026",
+                max_lines=1,
+            )
+            with gr.Row():
+                add_btn   = gr.Button("add to collection ✦", variant="primary", scale=3)
+                clear_btn = gr.Button("clear all", variant="secondary", scale=1)
+
+        # ── Preview ──
+        with gr.Column(scale=4, min_width=260):
+            gr.HTML(PREVIEW_HEADER)
+            preview_out = gr.Image(
+                label="stamp preview",
+                type="pil",
+                interactive=False,
+                show_label=False,
+                height=380,
+                buttons=["download"],
+                elem_classes=["preview-img"],
+            )
+
+    gr.HTML(SECTION_DIVIDER)
+    gallery_out = gr.HTML(value=gallery_html([]))
+
+    # ── Events ──
+    for ctrl in [img_in, color_in, style_in, label_in]:
+        ctrl.change(
+            fn=preview_stamp,
+            inputs=[img_in, color_in, style_in, label_in],
+            outputs=preview_out,
+        )
+
+    add_btn.click(
+        fn=add_stamp,
+        inputs=[img_in, color_in, style_in, label_in, state],
+        outputs=[state, gallery_out],
+    )
+
+    clear_btn.click(fn=clear_stamps, outputs=[state, gallery_out])
+
+if __name__ == "__main__":
+    demo.launch()

requirements.txt

@@ -0,0 +1,7 @@
+gradio>=6.5.0
+pillow>=10.0.0
+numpy>=1.24.0
+diffusers>=0.27.0
+transformers>=4.40.0
+accelerate>=0.30.0
+torch