feat: add Listing anh Free tool (Pillow design + Wangp background, web UI)

backend/app/api/listing_free.py

@@ -0,0 +1,245 @@
+import os, shutil, time, uuid, threading, tempfile, zipfile, base64, io
+from fastapi import APIRouter, File, UploadFile, Form, HTTPException, BackgroundTasks
+from fastapi.responses import FileResponse
+from PIL import Image
+
+from ..core.files import sub_dir
+from ..services.listing_free.generator import generate_listing_free, set_session, get_session, del_session
+from ..services.listing_free.design import ALIAS, COLORS, render as design_render
+
+router = APIRouter(prefix="/api/listing-free", tags=["listing-free"])
+
+_font_families = {k: v for k, v in sorted(ALIAS.items())}
+_color_names = list(COLORS.keys())
+
+def _new_sid():
+    return f"lfree_{time.strftime('%y%m%d_%H%M%S')}_{uuid.uuid4().hex[:6]}"
+
+def _get(sid):
+    s = get_session(sid)
+    if not s:
+        raise HTTPException(404, "Session not found")
+    return s
+
+
+@router.post("/upload")
+async def upload_files(
+    product: UploadFile = File(None),
+    background: UploadFile = File(None),
+    model: UploadFile = File(None),
+):
+    sid = _new_sid()
+    sess_dir = sub_dir(sid, "listing_free")
+    os.makedirs(sess_dir, exist_ok=True)
+
+    def save_img(upload, name):
+        if not upload or not upload.filename:
+            return None
+        ext = os.path.splitext(upload.filename)[1] or ".jpg"
+        path = os.path.join(sess_dir, f"{name}{ext}")
+        with open(path, "wb") as f:
+            f.write(upload.file.read())
+        return path
+
+    product_path = save_img(product, "product")
+    bg_path = save_img(background, "background")
+    model_path = save_img(model, "model")
+
+    session = {
+        "id": sid, "status": "ready", "dir": sess_dir,
+        "product_image": product_path, "background_image": bg_path, "model_image": model_path,
+        "results": [], "errors": [], "progress": {"current": 0, "total": 0},
+        "last_status": None, "items": [],
+        "created_at": time.time(),
+    }
+    set_session(sid, session)
+
+    return {
+        "ok": True, "session_id": sid,
+        "product": os.path.basename(product_path) if product_path else None,
+        "background": os.path.basename(bg_path) if bg_path else None,
+        "model": os.path.basename(model_path) if model_path else None,
+    }
+
+
+@router.post("/design")
+async def apply_design(body: dict):
+    sid = body.get("session_id")
+    items = body.get("items", [])
+    if not sid or not items:
+        raise HTTPException(400, "Missing session_id or items")
+
+    s = _get(sid)
+    if s["status"] == "generating":
+        raise HTTPException(400, "Already generating")
+
+    s["items"] = items
+    s["results"] = []
+    s["errors"] = []
+    s["status"] = "generating"
+
+    product_img = s.get("product_image")
+    model_img = s.get("model_image")
+
+    thread = threading.Thread(
+        target=generate_listing_free,
+        args=(s, items, product_img, model_img),
+        daemon=True
+    )
+    thread.start()
+
+    return {"ok": True, "session_id": sid, "total": len(items)}
+
+
+@router.post("/bg-only")
+async def generate_background_only(
+    session_id: str = Form(...),
+    prompt: str = Form(""),
+    type: str = Form("display"),
+    label: str = Form("Background"),
+):
+    s = _get(session_id)
+
+    bg_path = os.path.join(s["dir"], f"bg_{type}_{int(time.time())}.png")
+    product_img = s.get("product_image")
+
+    item = {
+        "type": type, "label": label,
+        "scene_prompt": prompt, "template": "simple",
+        "text_blocks": [], "lang": "vi",
+    }
+
+    from ..services.listing_free.wangp import WanGPClient
+    wan = WanGPClient()
+    try:
+        ok = wan.generate_one(item, bg_path, product_img)
+        if ok:
+            s["background_image"] = bg_path
+            return {"ok": True, "file": os.path.basename(bg_path)}
+        raise Exception("No image generated")
+    except Exception as e:
+        return {"ok": False, "error": str(e)}
+
+
+@router.get("/session/{sid}")
+def get_session_status(sid: str):
+    s = _get(sid)
+    return {
+        "id": s["id"], "status": s["status"],
+        "items": s.get("items", []),
+        "results": s.get("results", []),
+        "errors": s.get("errors", []),
+        "progress": s["progress"],
+        "last_status": s["last_status"],
+        "product_image": os.path.basename(s["product_image"]) if s.get("product_image") else None,
+        "background_image": os.path.basename(s["background_image"]) if s.get("background_image") else None,
+    }
+
+
+@router.get("/file/{sid}/{filename}")
+def serve_file(sid: str, filename: str):
+    s = _get(sid)
+    path = os.path.join(s["dir"], filename)
+    if not os.path.exists(path):
+        raise HTTPException(404, "File not found")
+    return FileResponse(path)
+
+
+@router.get("/download/{sid}")
+def download_all(sid: str, background_tasks: BackgroundTasks):
+    s = _get(sid)
+    tmp = tempfile.NamedTemporaryFile(delete=False, suffix=".zip")
+    zip_path = tmp.name
+    tmp.close()
+
+    with zipfile.ZipFile(zip_path, "w", zipfile.ZIP_DEFLATED) as zf:
+        for r in s.get("results") or []:
+            for img in r.get("images") or []:
+                if os.path.exists(img):
+                    arcname = f"{r['type']}_{os.path.basename(img)}"
+                    zf.write(img, arcname)
+        for key in ("product_image", "background_image", "model_image"):
+            val = s.get(key)
+            if val and os.path.exists(val):
+                zf.write(val, os.path.basename(val))
+
+    background_tasks.add_task(os.unlink, zip_path)
+    return FileResponse(zip_path, filename=f"listing_free_{sid}.zip", media_type="application/zip")
+
+
+@router.delete("/session/{sid}")
+def delete_session(sid: str):
+    s = _get(sid)
+    shutil.rmtree(s["dir"], ignore_errors=True)
+    del_session(sid)
+    return {"ok": True}
+
+
+@router.get("/fonts")
+def list_fonts():
+    return {
+        "families": _font_families,
+        "colors": _color_names,
+    }
+
+
+@router.get("/templates")
+def list_templates():
+    return {
+        "templates": [
+            {
+                "id": "simple",
+                "name": "Simple Poster",
+                "description": "Elegant eyebrow + headline + subhead + tag",
+                "fields": [
+                    {"name": "text_pos", "label": "Text position", "type": "select", "options": ["bottom-left", "bottom-center", "bottom-right", "center", "top-left", "top-center", "top-right"]},
+                ]
+            },
+            {
+                "id": "multicolor",
+                "name": "Multicolor Headline",
+                "description": "Big stacked headline with per-word colors + badge",
+                "fields": [
+                    {"name": "text_pos", "label": "Text position", "type": "select", "options": ["bottom-left", "top-left"]},
+                    {"name": "stack", "label": "Stack words", "type": "boolean"},
+                ]
+            },
+            {
+                "id": "feature_panel",
+                "name": "Feature Panel",
+                "description": "Rounded side panel with title + icon rows",
+                "fields": [
+                    {"name": "panel_side", "label": "Panel side", "type": "select", "options": ["left", "right"]},
+                ]
+            },
+        ]
+    }
+
+
+@router.post("/preview")
+async def preview_design(body: dict):
+    """Preview design on a product/background image without saving to session."""
+    item = body.get("item", {})
+    bg_base64 = body.get("background_image")
+
+    W, H = 1088, 1088
+    if bg_base64:
+        try:
+            hdr, data = bg_base64.split(",", 1) if "," in bg_base64 else ("", bg_base64)
+            img_data = base64.b64decode(data)
+            buf = io.BytesIO(img_data)
+            bg = Image.open(buf).convert("RGBA")
+            bg = bg.resize((W, H), Image.LANCZOS)
+        except Exception:
+            bg = Image.new("RGBA", (W, H), (255, 255, 255, 255))
+    else:
+        bg = Image.new("RGBA", (W, H), (255, 255, 255, 255))
+
+    try:
+        design_render(bg, item)
+        buf = io.BytesIO()
+        bg.convert("RGB").save(buf, format="JPEG", quality=90)
+        b64 = base64.b64encode(buf.getvalue()).decode()
+        return {"ok": True, "image": f"data:image/jpeg;base64,{b64}"}
+    except Exception as e:
+        return {"ok": False, "error": str(e)}

backend/app/main.py

@@ -31,7 +31,7 @@ _here = os.path.dirname(os.path.abspath(__file__))
 _parent = os.path.dirname(_here)
 sys.path.insert(0, _parent)
 
-from .api import common, download, cut, shuffle, dub, listing, video, auth, drive, history_api, flux2
+from .api import common, download, cut, shuffle, dub, listing, video, auth, drive, history_api, flux2, listing_free
 
 app = FastAPI(title="TNT Group - AI Content Create", version="1.0.0")
 
@@ -54,6 +54,7 @@ app.include_router(auth.router)
 app.include_router(drive.router)
 app.include_router(history_api.router)
 app.include_router(flux2.router)
+app.include_router(listing_free.router)
 
 
 @app.get("/api/health")

backend/app/services/listing_free/__init__.py

@@ -0,0 +1,3 @@
+from .design import render, font_of, col, ALIAS
+from .wangp import generate_one, WanGPClient
+from .generator import generate_listing_free

backend/app/services/listing_free/design.py

@@ -0,0 +1,265 @@
+import pathlib, math, os
+from PIL import Image, ImageDraw, ImageFont, ImageFilter
+
+_here = os.path.dirname(os.path.abspath(__file__))
+FONT_DIR = pathlib.Path(_here) / "fonts"
+
+FONT_URLS = {
+    "Montserrat-ExtraBold.ttf": "https://github.com/google/fonts/raw/main/ofl/montserrat/Montserrat%5Bwght%5D.ttf",
+    "Montserrat-SemiBold.ttf": "https://github.com/google/fonts/raw/main/ofl/montserrat/Montserrat%5Bwght%5D.ttf",
+    "PlayfairDisplay-Bold.ttf": "https://github.com/google/fonts/raw/main/ofl/playfairdisplay/PlayfairDisplay%5Bwght%5D.ttf",
+    "GreatVibes-Regular.ttf": "https://github.com/google/fonts/raw/main/ofl/greatvibes/GreatVibes-Regular.ttf",
+    "DancingScript-Bold.ttf": "https://github.com/google/fonts/raw/main/ofl/dancingscript/DancingScript%5Bwght%5D.ttf",
+    "Parisienne-Regular.ttf": "https://github.com/google/fonts/raw/main/ofl/parisienne/Parisienne-Regular.ttf",
+    "Cormorant-Bold.ttf": "https://github.com/google/fonts/raw/main/ofl/cormorant/Cormorant%5Bwght%5D.ttf",
+    "Sacramento-Regular.ttf": "https://github.com/google/fonts/raw/main/ofl/sacramento/Sacramento-Regular.ttf",
+    "Pacifico-Regular.ttf": "https://github.com/google/fonts/raw/main/ofl/pacifico/Pacifico-Regular.ttf",
+    "Oswald-Bold.ttf": "https://github.com/google/fonts/raw/main/ofl/oswald/Oswald%5Bwght%5D.ttf",
+    "BebasNeue-Regular.ttf": "https://github.com/google/fonts/raw/main/ofl/bebasneue/BebasNeue-Regular.ttf",
+    "Lobster-Regular.ttf": "https://github.com/google/fonts/raw/main/ofl/lobster/Lobster-Regular.ttf",
+    "Cinzel-Bold.ttf": "https://github.com/google/fonts/raw/main/ofl/cinzel/Cinzel%5Bwght%5D.ttf",
+    "BeVietnamPro-ExtraBold.ttf": "https://github.com/google/fonts/raw/main/ofl/bevietnampro/BeVietnamPro-ExtraBold.ttf",
+    "BeVietnamPro-Bold.ttf": "https://github.com/google/fonts/raw/main/ofl/bevietnampro/BeVietnamPro-Bold.ttf",
+    "BeVietnamPro-Medium.ttf": "https://github.com/google/fonts/raw/main/ofl/bevietnampro/BeVietnamPro-Medium.ttf",
+}
+
+_font_ensure_done = False
+
+def ensure_fonts():
+    global _font_ensure_done
+    if _font_ensure_done:
+        return
+    import httpx
+    FONT_DIR.mkdir(parents=True, exist_ok=True)
+    for name, url in FONT_URLS.items():
+        fp = FONT_DIR / name
+        if fp.exists():
+            continue
+        try:
+            r = httpx.get(url, timeout=60, follow_redirects=True)
+            if r.status_code == 200:
+                fp.write_bytes(r.content)
+        except Exception:
+            pass
+    _font_ensure_done = True
+
+ACCENT = (233, 78, 96)
+GOLD = (196, 160, 90)
+DARK = (60, 40, 45)
+WHITE = (255, 255, 255)
+
+ALIAS = {
+    "script": "GreatVibes-Regular.ttf", "script_bold": "DancingScript-Bold.ttf", "handwrite": "Pacifico-Regular.ttf",
+    "calligraphy": "Sacramento-Regular.ttf", "retro": "Lobster-Regular.ttf",
+    "serif": "PlayfairDisplay-Bold.ttf", "serif_classic": "Cormorant-Bold.ttf", "serif_luxury": "Cinzel-Bold.ttf",
+    "sans": "Montserrat-ExtraBold.ttf", "condensed": "Oswald-Bold.ttf", "impact": "BebasNeue-Regular.ttf",
+    "vn": "BeVietnamPro-ExtraBold.ttf", "vn_bold": "BeVietnamPro-Bold.ttf", "vn_med": "BeVietnamPro-Medium.ttf",
+}
+VN_SCRIPTS = {"script", "script_bold", "handwrite", "calligraphy", "retro"}
+COLORS = {"white": WHITE, "pink": ACCENT, "accent": ACCENT, "gold": GOLD, "dark": DARK, "black": (20, 20, 20),
+          "red": (200, 40, 50), "green": (70, 150, 90), "gray": (120, 120, 120)}
+
+def lf(name, size):
+    ensure_fonts()
+    try:
+        return ImageFont.truetype(str(FONT_DIR / name), size)
+    except Exception:
+        try:
+            return ImageFont.truetype(name, size)
+        except Exception:
+            return ImageFont.load_default()
+
+def font_of(kind, size, lang="en"):
+    if lang == "vi" and kind in VN_SCRIPTS:
+        kind = "vn"
+    if lang == "vi" and kind in ("sans", "condensed", "impact"):
+        kind = "vn"
+    return lf(ALIAS.get(kind, ALIAS["sans"]), size)
+
+def col(c):
+    return COLORS.get(c, c if isinstance(c, tuple) else WHITE)
+
+def text_shadow(base, xy, text, font, fill, blur=None, stroke=0):
+    x, y = xy
+    size = font.size
+    if blur is None:
+        blur = size * 0.05
+    sh = Image.new("RGBA", base.size, (0, 0, 0, 0))
+    ImageDraw.Draw(sh).text((x, y), text, font=font, fill=(0, 0, 0, 150))
+    base.alpha_composite(sh.filter(ImageFilter.GaussianBlur(blur)))
+    ImageDraw.Draw(base).text((x, y), text, font=font, fill=fill,
+                              stroke_width=stroke, stroke_fill=(0, 0, 0, 90) if stroke else None)
+
+def rounded_panel(base, box, radius, fill, alpha=235, border=None, bw=0):
+    layer = Image.new("RGBA", base.size, (0, 0, 0, 0))
+    d = ImageDraw.Draw(layer)
+    r, g, b = fill
+    d.rounded_rectangle(box, radius=radius, fill=(r, g, b, alpha),
+                        outline=(border + (255,)) if border else None, width=bw)
+    base.alpha_composite(layer)
+
+def draw_icon(base, cx, cy, r, kind, color=GOLD):
+    d = ImageDraw.Draw(base)
+    d.ellipse([cx - r, cy - r, cx + r, cy + r], outline=color + (255,), width=max(2, r // 10))
+    s = r * 0.5
+    if kind == "check":
+        d.line([(cx - s * 0.5, cy), (cx - s * 0.05, cy + s * 0.5), (cx + s * 0.6, cy - s * 0.5)], fill=color, width=max(2, r // 8))
+    elif kind == "drop":
+        d.ellipse([cx - s * 0.5, cy - s * 0.2, cx + s * 0.5, cy + s * 0.6], fill=color)
+        d.polygon([(cx, cy - s * 0.7), (cx - s * 0.5, cy + s * 0.1), (cx + s * 0.5, cy + s * 0.1)], fill=color)
+    elif kind == "shield":
+        d.polygon([(cx, cy - s * 0.7), (cx + s * 0.6, cy - s * 0.4), (cx + s * 0.6, cy + s * 0.2), (cx, cy + s * 0.7), (cx - s * 0.6, cy + s * 0.2), (cx - s * 0.6, cy - s * 0.4)], outline=color, width=max(2, r // 9))
+    elif kind == "leaf":
+        d.pieslice([cx - s * 0.7, cy - s * 0.7, cx + s * 0.3, cy + s * 0.3], 0, 270, fill=color)
+    elif kind == "sun":
+        d.ellipse([cx - s * 0.35, cy - s * 0.35, cx + s * 0.35, cy + s * 0.35], fill=color)
+        for a in range(0, 360, 45):
+            ax, ay = math.cos(math.radians(a)), math.sin(math.radians(a))
+            d.line([(cx + ax * s * 0.55, cy + ay * s * 0.55), (cx + ax * s * 0.8, cy + ay * s * 0.8)], fill=color, width=max(2, r // 12))
+    elif kind == "sparkle":
+        d.polygon([(cx, cy - s * 0.8), (cx + s * 0.2, cy - s * 0.2), (cx + s * 0.8, cy), (cx + s * 0.2, cy + s * 0.2), (cx, cy + s * 0.8), (cx - s * 0.2, cy + s * 0.2), (cx - s * 0.8, cy), (cx - s * 0.2, cy - s * 0.2)], fill=color)
+    else:
+        d.ellipse([cx - s * 0.3, cy - s * 0.3, cx + s * 0.3, cy + s * 0.3], fill=color)
+
+def badge(base, xy, text, font, bg=ACCENT, fg=WHITE, pad=None):
+    d = ImageDraw.Draw(base)
+    x, y = xy
+    if pad is None:
+        pad = font.size * 0.4
+    w = d.textlength(text, font=font)
+    h = font.size
+    box = [x, y, x + w + pad * 2, y + h + pad * 1.2]
+    rounded_panel(base, box, int(h * 0.35), bg, alpha=255)
+    d.text((x + pad, y + pad * 0.4), text, font=font, fill=fg)
+
+def wrap(d, t, f, mw):
+    out = []
+    cur = ""
+    for w in t.split():
+        if d.textlength((cur + " " + w).strip(), font=f) <= mw:
+            cur = (cur + " " + w).strip()
+        else:
+            if cur:
+                out.append(cur)
+            cur = w
+    if cur:
+        out.append(cur)
+    return out
+
+def tpl_feature_panel(img, spec):
+    W, H = img.size
+    d = ImageDraw.Draw(img)
+    lang = spec.get("lang", "vi")
+    side = spec.get("panel_side", "left")
+    pw = int(W * 0.46)
+    ph = int(H * 0.88)
+    px = int(W * 0.04) if side == "left" else W - int(W * 0.04) - pw
+    py = (H - ph) // 2
+    rounded_panel(img, [px, py, px + pw, py + ph], int(W * 0.03), (252, 250, 247), alpha=238, border=GOLD, bw=3)
+    pad = int(pw * 0.09)
+    x = px + pad
+    y = py + pad
+    tf = font_of("vn" if lang == "vi" else "sans", int(pw * 0.14), lang)
+    text_shadow(img, (x, y), spec.get("title", "").upper(), tf, DARK, blur=1)
+    y += int(pw * 0.16)
+    d.line([(x, y), (x + pw - 2 * pad, y)], fill=GOLD, width=2)
+    y += int(pw * 0.06)
+    feats = spec.get("features", [])[:8]
+    rf = font_of("vn_med" if lang == "vi" else "condensed", int(pw * 0.075), lang)
+    row_h = (ph - 2 * pad - int(pw * 0.22)) / max(len(feats), 1)
+    ir = int(row_h * 0.32)
+    for ft in feats:
+        cy = int(y + ir)
+        draw_icon(img, x + ir, cy, ir, ft.get("icon", "check"), GOLD)
+        d.text((x + ir * 2 + int(pw * 0.03), cy - rf.size * 0.55), ft.get("text", ""), font=rf, fill=DARK)
+        y += row_h
+    return img
+
+def tpl_multicolor(img, spec):
+    W, H = img.size
+    d = ImageDraw.Draw(img)
+    lang = spec.get("lang", "en")
+    pos = spec.get("text_pos", "bottom-left")
+    words = spec.get("headline_words", [])
+    fk = "vn" if lang == "vi" else spec.get("font", "impact")
+    size = int(W * 0.11)
+    f = font_of(fk, size, lang)
+    margin = int(W * 0.05)
+    stacked = spec.get("stack", True)
+    x0 = margin if "left" in pos else W - margin
+    y = int(H * 0.55) if "bottom" in pos else margin
+    if stacked:
+        for wd in words:
+            t = wd.get("text", "")
+            c = col(wd.get("color", "white"))
+            text_shadow(img, (x0, y), t, f, c, stroke=max(1, size // 40))
+            y += int(size * 1.02)
+    sub = spec.get("sub", "")
+    if sub:
+        sf = font_of("vn_med" if lang == "vi" else "sans", int(size * 0.28), lang)
+        text_shadow(img, (x0, y + int(size * 0.05)), sub, sf, WHITE, stroke=1)
+        y += int(size * 0.4)
+    if spec.get("tag"):
+        bf = font_of("vn_bold" if lang == "vi" else "condensed", int(size * 0.3), lang)
+        badge(img, (x0, y + int(size * 0.2)), spec["tag"].upper(), bf, bg=ACCENT)
+    return img
+
+def tpl_simple(img, spec):
+    W, H = img.size
+    d = ImageDraw.Draw(img)
+    lang = spec.get("lang", "en")
+    blocks = spec.get("text_blocks", [])
+    pos = spec.get("text_pos", "bottom-center")
+    vert = next((v for v in ("top", "center", "bottom") if v in pos), "bottom")
+    horiz = next((h for h in ("left", "right", "center") if h in pos), "center")
+    ratio = {"eyebrow": 0.030, "headline": 0.10, "subhead": 0.040, "tag": 0.034}
+    mw = int(W * 0.60)
+    R = []
+    for b in blocks:
+        role = b.get("role", "headline")
+        t = (b.get("text") or "").strip()
+        if not t:
+            continue
+        if role in ("eyebrow", "tag"):
+            t = t.upper()
+        fk = b.get("font", "script")
+        sz = max(20, int(W * ratio.get(role, 0.05)))
+        f = font_of(fk, sz, lang)
+        while d.textlength(t, font=f) > mw and sz > 18:
+            sz -= 3
+            f = font_of(fk, sz, lang)
+        if role in ("subhead", "desc") and d.textlength(t, font=f) > mw:
+            for ln in wrap(d, t, f, mw):
+                R.append((ln, f, sz, role))
+        else:
+            R.append((t, f, sz, role))
+    if not R:
+        return img
+    gap = int(W * 0.014)
+    th = sum(r[2] for r in R) + gap * (len(R) + 1)
+    bw = max(d.textlength(r[0], font=r[1]) for r in R)
+    y = int(H * 0.05) if vert == "top" else (H - th) // 2 if vert == "center" else H - int(H * 0.05) - th
+    bx = int(W * 0.05) if horiz == "left" else W - int(W * 0.05) - bw if horiz == "right" else (W - bw) // 2
+
+    def lx(w):
+        return bx if horiz == "left" else bx + bw - w if horiz == "right" else (W - w) / 2
+
+    for t, f, sz, role in R:
+        w = d.textlength(t, font=f)
+        text_shadow(img, (lx(w), y), t, f, ACCENT if role == "tag" else WHITE, stroke=max(1, sz // 48))
+        if role == "headline":
+            uy = y + sz + int(gap * 0.2)
+            ul = int(min(bw * 0.4, sz * 3))
+            ux = lx(ul) if horiz != "center" else (W - ul) // 2
+            ImageDraw.Draw(img).rectangle([ux, uy, ux + ul, uy + max(3, sz // 24)], fill=ACCENT + (255,))
+            y += int(gap * 0.5)
+        y += sz + gap
+    return img
+
+def render(img_rgba, spec):
+    t = spec.get("template", "simple")
+    if t == "feature_panel":
+        return tpl_feature_panel(img_rgba, spec)
+    if t == "multicolor":
+        return tpl_multicolor(img_rgba, spec)
+    return tpl_simple(img_rgba, spec)

backend/app/services/listing_free/generator.py

@@ -0,0 +1,114 @@
+import os, json, time, threading, pathlib
+from PIL import Image
+from . import design
+from .wangp import WanGPClient
+
+_human_types = {"thumbnail", "in_use", "lifestyle", "hero"}
+
+def generate_listing_free(session, items, product_image, model_image=None):
+    """Generate listing images using Wangp background + Pillow design overlay.
+
+    Items are spec dicts with keys:
+        type, label, template, lang, scene_prompt,
+        and template-specific fields (title, features, headline_words, text_blocks, etc.)
+    """
+    s = session
+    s["status"] = "generating"
+    s["progress"] = {"current": 0, "total": len(items)}
+    s["results"] = []
+    s["errors"] = []
+
+    wan = WanGPClient()
+
+    for i, item in enumerate(items):
+        s["progress"] = {"current": i + 1, "total": len(items)}
+        ptype = item.get("type", f"img_{i}")
+        lang = item.get("lang", "vi")
+        out_path = os.path.join(s["dir"], f"{ptype}_{s['id']}.jpg")
+
+        s["last_status"] = {"level": "info", "message": f"[{i+1}/{len(items)}] \"{item.get('label', ptype)}\" generating..."}
+
+        success = False
+
+        if item.get("scene_prompt"):
+            try:
+                result = wan.generate_one(item, out_path, product_image, model_image)
+                if result:
+                    try:
+                        img = Image.open(out_path).convert("RGBA")
+                        design.render(img, item)
+                        img.convert("RGB").save(out_path, quality=95)
+                    except Exception as e:
+                        pass
+                    success = True
+                    s["last_status"] = {"level": "success", "message": f"Done \"{item.get('label', ptype)}\" with Wangp"}
+            except Exception as e:
+                s["last_status"] = {"level": "error", "message": f"Wangp error: {str(e)[:100]}"}
+                s["errors"].append({"type": ptype, "error": str(e)})
+
+        if not success:
+            bg_path = os.path.join(s["dir"], f"bg_{ptype}_{s['id']}.png")
+            bg_path_created = False
+            if product_image and os.path.exists(product_image):
+                try:
+                    bg = Image.open(product_image).convert("RGBA")
+                    w, h = 1088, 1088
+                    bg = bg.resize((w, h), Image.LANCZOS)
+                    bg.save(bg_path, "PNG")
+                    bg_path_created = True
+                except Exception:
+                    pass
+            if not bg_path_created:
+                try:
+                    bg = Image.new("RGBA", (1088, 1088), (255, 255, 255, 255))
+                    bg.save(bg_path, "PNG")
+                except Exception:
+                    pass
+
+            try:
+                img = Image.open(bg_path).convert("RGBA") if bg_path_created else Image.new("RGBA", (1088, 1088), (255, 255, 255, 255))
+                design.render(img, item)
+                img.convert("RGB").save(out_path, quality=95)
+                success = True
+                s["last_status"] = {"level": "success", "message": f"Done \"{item.get('label', ptype)}\" (design only)"}
+            except Exception as e:
+                s["last_status"] = {"level": "error", "message": f"Design error: {str(e)[:100]}"}
+                s["errors"].append({"type": ptype, "error": str(e)})
+
+        if success:
+            s["results"].append({
+                "type": ptype,
+                "label": item.get("label", ptype),
+                "images": [out_path],
+                "status": "success",
+            })
+        else:
+            s["results"].append({
+                "type": ptype,
+                "label": item.get("label", ptype),
+                "images": [],
+                "status": "error",
+                "error": str(s["errors"][-1]["error"]) if s["errors"] else "Unknown",
+            })
+
+    s["status"] = "completed"
+    s["last_status"] = {"level": "success", "message": "Completed!"}
+
+
+_sessions_global = {}
+_sessions_lock = threading.Lock()
+
+def _get_global_sessions():
+    return _sessions_global
+
+def set_session(sid, session):
+    with _sessions_lock:
+        _sessions_global[sid] = session
+
+def get_session(sid):
+    with _sessions_lock:
+        return _sessions_global.get(sid)
+
+def del_session(sid):
+    with _sessions_lock:
+        _sessions_global.pop(sid, None)

backend/app/services/listing_free/wangp.py

@@ -0,0 +1,138 @@
+import time, os, re, httpx, shutil
+
+try:
+    from gradio_client import Client, handle_file
+    HAS_GRADIO = True
+except ImportError:
+    Client = None
+    handle_file = None
+    HAS_GRADIO = False
+
+WANGP_URL = "https://fe91b5c9d1cfdfc08e.gradio.live/"
+DEFAULT_MODEL = "flux2_klein_9b"
+RESOLUTION = "1088x1088"
+STEPS = 20
+GUIDANCE = 4
+REF_STRENGTH = 75
+NEGATIVE_PROMPT = "mirror, reflection in mirror, standing in front of mirror, bathroom mirror, text, words, letters, typography, captions, deformed hands, extra fingers, bad anatomy, blurry, low quality, watermark"
+HUMAN_TYPES = {"thumbnail", "in_use", "lifestyle", "hero"}
+BANNED_SCENE_WORDS = ["text", "typography", "overlay", "caption", "headline", "banner", "label",
+                      "words", "letters", "writing", "sign", "title", "slogan", "font"]
+
+
+class WanGPClient:
+    def __init__(self, url=WANGP_URL, model=DEFAULT_MODEL):
+        self.url = url
+        self.model = model
+        self.client = None
+
+    def ensure_client(self):
+        if not HAS_GRADIO:
+            raise RuntimeError("gradio-client not installed. Run: pip install gradio-client")
+        if self.client is None:
+            self.client = Client(self.url)
+        return self.client
+
+    def clean_scene(self, p):
+        segs = re.split(r'[,.]', p)
+        kept = []
+        for seg in segs:
+            low = seg.lower()
+            if any(re.search(r'\b' + w + r'\b', low) for w in BANNED_SCENE_WORDS):
+                continue
+            if seg.strip():
+                kept.append(seg.strip())
+        out = ", ".join(kept)
+        return (out + ".") if out else p
+
+    def save_inputs_kwargs(self, prompt, refs):
+        vpt = "I" if refs else ""
+        return dict(
+            prompt=prompt, negative_prompt=NEGATIVE_PROMPT, resolution=RESOLUTION, seed=-1,
+            num_inference_steps=STEPS, guidance_scale=GUIDANCE, batch_size=1, image_refs=refs,
+            image_refs_relative_size=REF_STRENGTH, video_prompt_type=vpt, image_prompt_type="",
+            control_net_weight=1, denoising_strength=1,
+            image_mask_guide={"background": None, "layers": [], "composite": None}, model_mode=None,
+            video_source=None, video_guide=None, image_guide=None, video_mask=None, image_mask=None,
+            audio_guide=None, audio_guide2=None, custom_guide=None, audio_source=None,
+            replace_voice_sample=None, replace_voice_sample2=None,
+            custom_setting_dropdown_1=None, custom_setting_dropdown_2=None,
+            custom_setting_dropdown_3=None, custom_setting_dropdown_4=None,
+            custom_setting_dropdown_5=None, api_name="/save_inputs_1"
+        )
+
+    def img_paths(self, result):
+        out = []
+        def w(o):
+            if isinstance(o, dict):
+                for k in ("path", "url"):
+                    v = o.get(k)
+                    if isinstance(v, str) and v:
+                        out.append(v)
+                for v in o.values():
+                    w(v)
+            elif isinstance(o, (list, tuple)):
+                for v in o:
+                    w(v)
+            elif isinstance(o, str) and o.lower().endswith((".png", ".jpg", ".jpeg", ".webp")):
+                out.append(o)
+        w(result)
+        seen, unique = set(), []
+        for x in out:
+            if x not in seen:
+                seen.add(x)
+                unique.append(x)
+        return unique
+
+    def download(self, pu, dest):
+        if str(pu).startswith("http"):
+            r = httpx.get(pu, timeout=180)
+            r.raise_for_status()
+            dest.write_bytes(r.content)
+            return True
+        try:
+            r = httpx.get(f"{self.url.rstrip('/')}/gradio_api/file={pu}", timeout=180)
+            if r.status_code == 200 and r.content:
+                dest.write_bytes(r.content)
+                return True
+        except Exception:
+            pass
+        src = os.path.abspath(pu)
+        if os.path.exists(src):
+            shutil.copy(src, dest)
+            return True
+        return False
+
+    def _gen_calls(self, item, product_refs, person_refs):
+        wan = self.ensure_client()
+        with_person = item.get("type", "") in HUMAN_TYPES
+        refs = product_refs[:]
+        if with_person and person_refs:
+            refs.extend(person_refs)
+        wan.predict(**self.save_inputs_kwargs(self.clean_scene(item["scene_prompt"]), refs))
+        wan.predict(current_gallery_tab=0, model_choice=self.model, api_name="/process_prompt_and_add_tasks")
+        wan.predict(api_name="/process_tasks")
+        return wan.predict(api_name="/finalize_generation")
+
+    def generate_one(self, item, out_path, product_image, model_image=None):
+        product_refs = [{"image": handle_file(product_image)}] if product_image else []
+        person_refs = [{"image": handle_file(model_image)}] if model_image else []
+
+        res = None
+        for attempt in range(2):
+            try:
+                res = self._gen_calls(item, product_refs, person_refs)
+                break
+            except Exception as e:
+                msg = str(e)
+                if "not in the list of choices" in msg:
+                    raise
+                if attempt == 0 and ("timed out" in msg or "Timeout" in msg):
+                    time.sleep(3)
+                    continue
+                raise
+
+        ps = self.img_paths(res)
+        if not ps:
+            return False
+        return self.download(ps[-1], out_path)

frontend/src/App.jsx

@@ -9,6 +9,7 @@ import Guide from "./pages/Guide";
 import Support from "./pages/Support";
 import Placeholder from "./pages/Placeholder";
 import ListingImage from "./pages/ListingImage";
+import ListingFree from "./pages/ListingFree";
 import Flux2Gen from "./pages/Flux2Gen";
 import CreateVideo from "./pages/CreateVideo";
 import AdminUsers from "./pages/AdminUsers";
@@ -29,6 +30,7 @@ const router = createBrowserRouter([
       { path: "/xao", element: <ShuffleVideo /> },
       { path: "/dub", element: <DubVideo /> },
       { path: "/listing-anh", element: <ListingImage /> },
+      { path: "/listing-free", element: <ListingFree /> },
       { path: "/flux2", element: <Flux2Gen /> },
       { path: "/tao-video", element: <CreateVideo /> },
       { path: "/huong-dan", element: <Guide /> },

frontend/src/components/Sidebar.jsx

@@ -1,7 +1,7 @@
 import { NavLink } from "react-router-dom";
 import {
   IcHome, IcDownload, IcImage, IcVideo, IcScissors, IcShuffle, IcMic,
-  IcBook, IcHelp, IcLock, IcHistory,
+  IcBook, IcHelp, IcLock, IcHistory, IcStar,
 } from "./Icons";
 
 const item = (to, Icon, label) => (
@@ -26,6 +26,7 @@ export default function Sidebar() {
         <div className="label">Tạo ảnh / video</div>
         {item("/down-list", IcDownload, "Down list video")}
         {item("/listing-anh", IcImage, "Listing ảnh")}
+        {item("/listing-free", IcStar, "Listing ảnh Free")}
         {item("/tao-video", IcVideo, "Tạo video")}
       </div>
 

frontend/src/pages/ListingFree.jsx

@@ -0,0 +1,545 @@
+import { useState, useRef, useEffect, useCallback } from "react";
+import { IcImage, IcUpload, IcDownload, IcRefresh, IcPlus, IcStar, IcSliders } from "../components/Icons";
+
+const TEMPLATES = [
+  { id: "simple", name: "Simple Poster", desc: "Eyebrow + headline + subhead + tag — classic elegance" },
+  { id: "multicolor", name: "Multicolor Headline", desc: "Stacked words with per-word colors + badge" },
+  { id: "feature_panel", name: "Feature Panel", desc: "Rounded side panel with title + icon rows" },
+];
+
+const ICON_OPTIONS = ["check", "leaf", "drop", "sun", "shield", "sparkle"];
+const FONT_OPTIONS = ["script", "script_bold", "handwrite", "calligraphy", "retro", "serif", "serif_classic", "serif_luxury", "sans", "condensed", "impact", "vn", "vn_bold", "vn_med"];
+
+function newItem(type) {
+  const base = { type, label: type, lang: "vi", template: "simple", text_pos: "bottom-center", text_blocks: [{ role: "headline", text: "NEW PRODUCT", font: "sans" }] };
+  if (type === "feature_panel") {
+    base.template = "feature_panel";
+    base.panel_side = "left";
+    base.title = "FEATURES";
+    base.features = [{ icon: "check", text: "Feature 1" }];
+  } else if (type === "multicolor") {
+    base.template = "multicolor";
+    base.font = "impact";
+    base.headline_words = [{ text: "BOLD", color: "white" }];
+    base.sub = "";
+    base.tag = "";
+  }
+  return base;
+}
+
+const PRESET_ITEMS = [
+  { type: "thumbnail", label: "Thumbnail" },
+  { type: "hero", label: "Hero" },
+  { type: "feature", label: "Feature" },
+  { type: "benefit", label: "Benefit" },
+  { type: "ingredient", label: "Ingredient" },
+  { type: "display", label: "Display" },
+  { type: "promo", label: "Promo" },
+];
+
+export default function ListingFree() {
+  const [sessionId, setSessionId] = useState(null);
+  const [productFile, setProductFile] = useState(null);
+  const [productPreview, setProductPreview] = useState(null);
+  const [bgFile, setBgFile] = useState(null);
+  const [bgPreview, setBgPreview] = useState(null);
+  const [items, setItems] = useState([]);
+  const [results, setResults] = useState([]);
+  const [status, setStatus] = useState(null);
+  const [logs, setLogs] = useState([]);
+  const [progress, setProgress] = useState(0);
+  const [busy, setBusy] = useState(false);
+  const [generating, setGenerating] = useState(false);
+  const [showLog, setShowLog] = useState(false);
+  const pollRef = useRef(null);
+  const prodRef = useRef(null);
+  const bgRef = useRef(null);
+  const lastMsgRef = useRef("");
+
+  useEffect(() => {
+    return () => {
+      if (productPreview) URL.revokeObjectURL(productPreview);
+      if (bgPreview) URL.revokeObjectURL(bgPreview);
+      if (pollRef.current) clearTimeout(pollRef.current);
+    };
+  }, [productPreview, bgPreview]);
+
+  const addLog = (level, msg) => {
+    setLogs(prev => [...prev, `[${new Date().toLocaleTimeString()}] ${msg}`]);
+    setShowLog(true);
+  };
+
+  const handleProductFile = (f) => {
+    if (!f || !f.type.startsWith("image/")) return;
+    if (productPreview) URL.revokeObjectURL(productPreview);
+    setProductFile(f);
+    setProductPreview(URL.createObjectURL(f));
+    setSessionId(null); setResults([]); setItems([]); setLogs([]);
+    setProgress(0); setStatus(null); setBusy(false); setGenerating(false);
+  };
+
+  const handleBgFile = (f) => {
+    if (!f || !f.type.startsWith("image/")) return;
+    if (bgPreview) URL.revokeObjectURL(bgPreview);
+    setBgFile(f);
+    setBgPreview(URL.createObjectURL(f));
+  };
+
+  const addPresetItem = (preset) => {
+    setItems(prev => [...prev, { ...newItem(preset.type), label: preset.label }]);
+  };
+
+  const removeItem = (idx) => {
+    setItems(prev => prev.filter((_, i) => i !== idx));
+  };
+
+  const updateItem = (idx, patch) => {
+    setItems(prev => prev.map((it, i) => i === idx ? { ...it, ...patch } : it));
+  };
+
+  const startUpload = async () => {
+    if (!productFile || busy || generating) return;
+    setBusy(true); setStatus("Uploading...");
+    addLog("info", "Uploading product image...");
+
+    const fd = new FormData();
+    fd.append("product", productFile);
+    if (bgFile) fd.append("background", bgFile);
+
+    try {
+      const res = await fetch("/api/listing-free/upload", { method: "POST", body: fd });
+      const data = await res.json();
+      if (!data.ok && data.error) throw new Error(data.error);
+      setSessionId(data.session_id);
+      addLog("success", "Uploaded successfully");
+      setBusy(false);
+    } catch (e) {
+      setStatus("Error: " + e.message);
+      addLog("error", e.message);
+      setBusy(false);
+    }
+  };
+
+  const startDesign = async () => {
+    if (!sessionId || items.length === 0 || busy || generating) return;
+    setGenerating(true); setStatus("Applying designs...");
+    setResults([]); setLogs([]);
+    addLog("info", `Applying ${items.length} designs...`);
+
+    try {
+      const res = await fetch("/api/listing-free/design", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ session_id: sessionId, items }),
+      });
+      const data = await res.json();
+      if (!data.ok && data.error) throw new Error(data.error);
+      await pollSession();
+    } catch (e) {
+      setStatus("Error: " + e.message);
+      addLog("error", e.message);
+    } finally {
+      setGenerating(false);
+    }
+  };
+
+  const pollSession = () => new Promise((resolve, reject) => {
+    const poll = async () => {
+      try {
+        const res = await fetch(`/api/listing-free/session/${sessionId}`);
+        if (!res.ok) { pollRef.current = setTimeout(poll, 1000); return; }
+        const s = await res.json();
+
+        if (s.last_status) {
+          const { level, message } = s.last_status;
+          setStatus(message);
+          if (message !== lastMsgRef.current) {
+            lastMsgRef.current = message;
+            if (level === "error") addLog("error", message);
+            else if (level === "success") addLog("success", message);
+            else addLog("info", message);
+          }
+        }
+        if (s.progress) {
+          setProgress(s.progress.total > 0 ? Math.round((s.progress.current / s.progress.total) * 100) : 0);
+        }
+        if (s.status === "completed") {
+          setResults(s.results || []);
+          setStatus("Completed!");
+          resolve();
+          return;
+        }
+        if (s.status === "error") {
+          reject(new Error(s.errors?.[0]?.error || "Unknown error"));
+          return;
+        }
+        pollRef.current = setTimeout(poll, 1000);
+      } catch (e) {
+        pollRef.current = setTimeout(poll, 1000);
+      }
+    };
+    setTimeout(poll, 500);
+  });
+
+  const downloadAll = async () => {
+    if (!sessionId) return;
+    try {
+      const res = await fetch(`/api/listing-free/download/${sessionId}`);
+      if (!res.ok) throw new Error("Download error");
+      const blob = await res.blob();
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement("a");
+      a.href = url; a.download = `listing_free_${sessionId.slice(0, 8)}.zip`;
+      a.click(); URL.revokeObjectURL(url);
+    } catch (e) { addLog("error", e.message); }
+  };
+
+  const resetAll = () => {
+    if (pollRef.current) clearTimeout(pollRef.current);
+    if (sessionId) fetch(`/api/listing-free/session/${sessionId}`, { method: "DELETE" }).catch(() => {});
+    setSessionId(null); setResults([]); setItems([]); setLogs([]);
+    setProgress(0); setStatus(null); setBusy(false); setGenerating(false);
+    if (productPreview) { URL.revokeObjectURL(productPreview); setProductPreview(null); }
+    if (bgPreview) { URL.revokeObjectURL(bgPreview); setBgPreview(null); }
+    setProductFile(null); setBgFile(null);
+    setShowLog(false);
+  };
+
+  return (
+    <div>
+      <div className="h1">Workspace: <span className="accent">Listing ảnh Free</span></div>
+      <p className="subtitle">Tạo ảnh listing miễn phí với thiết kế đa lớp — feature panel, multicolor headline, poster đơn giản. Upload ảnh sản phẩm, chọn mẫu, tuỳ chỉnh text, và tải về.</p>
+
+      <div className="grid-2">
+        <div className="stack">
+
+          {/* Upload */}
+          <div className="card">
+            <div className="panel-title"><IcUpload size={16} /> Upload ảnh</div>
+            <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 8 }}>
+              <div className="dropzone" style={{ cursor: "pointer", padding: 8, display: "flex", flexDirection: "column" }}
+                onClick={() => prodRef.current?.click()}>
+                <input ref={prodRef} type="file" accept="image/jpeg,image/png,image/webp" style={{ display: "none" }}
+                  onChange={(e) => handleProductFile(e.target.files?.[0])} />
+                {productPreview ? (
+                  <div>
+                    <img src={productPreview} alt="" style={{ width: "100%", aspectRatio: "1/1", borderRadius: 8, objectFit: "cover" }} />
+                    <div style={{ fontSize: 11, textAlign: "center", marginTop: 4, color: "var(--muted)" }}>Product</div>
+                  </div>
+                ) : (
+                  <div style={{ textAlign: "center", padding: "24px 4px", flex: 1, display: "flex", flexDirection: "column", justifyContent: "center" }}>
+                    <div className="chip" style={{ margin: "0 auto 6px" }}><IcImage size={18} /></div>
+                    <div style={{ fontSize: 11, fontWeight: 600 }}>Product image</div>
+                    <div style={{ fontSize: 10, color: "var(--muted)", marginTop: 2 }}>Required</div>
+                  </div>
+                )}
+              </div>
+              <div className="dropzone" style={{ cursor: "pointer", padding: 8, display: "flex", flexDirection: "column" }}
+                onClick={() => bgRef.current?.click()}>
+                <input ref={bgRef} type="file" accept="image/jpeg,image/png,image/webp" style={{ display: "none" }}
+                  onChange={(e) => handleBgFile(e.target.files?.[0])} />
+                {bgPreview ? (
+                  <div>
+                    <img src={bgPreview} alt="" style={{ width: "100%", aspectRatio: "1/1", borderRadius: 8, objectFit: "cover" }} />
+                    <div style={{ fontSize: 11, textAlign: "center", marginTop: 4, color: "var(--muted)" }}>Background</div>
+                  </div>
+                ) : (
+                  <div style={{ textAlign: "center", padding: "24px 4px", flex: 1, display: "flex", flexDirection: "column", justifyContent: "center" }}>
+                    <div className="chip" style={{ margin: "0 auto 6px" }}><IcImage size={18} /></div>
+                    <div style={{ fontSize: 11, fontWeight: 600 }}>Background</div>
+                    <div style={{ fontSize: 10, color: "var(--muted)", marginTop: 2 }}>Optional</div>
+                  </div>
+                )}
+              </div>
+            </div>
+            {productPreview && !sessionId && (
+              <button className="btn primary" style={{ marginTop: 8, width: "100%" }} disabled={busy} onClick={startUpload}>
+                {busy ? "Uploading..." : "Upload & Start"}
+              </button>
+            )}
+          </div>
+
+          {/* Add presets */}
+          {sessionId && (
+            <div className="card">
+              <div className="panel-title"><IcPlus size={16} /> Add listing items</div>
+              <div style={{ display: "flex", flexWrap: "wrap", gap: 6, marginBottom: 12 }}>
+                {PRESET_ITEMS.map(p => (
+                  <div key={p.type} onClick={() => addPresetItem(p)}
+                    style={{ padding: "6px 14px", fontSize: 12, borderRadius: 20, cursor: "pointer",
+                      border: "2px solid var(--line)", background: "var(--white)", userSelect: "none" }}>
+                    + {p.label}
+                  </div>
+                ))}
+              </div>
+
+              {items.length > 0 && items.map((item, idx) => (
+                <div key={idx} style={{ border: "1px solid var(--line)", borderRadius: "var(--radius-sm)", padding: 12, marginBottom: 10, background: "var(--cream)" }}>
+                  <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 8 }}>
+                    <b style={{ fontSize: 13 }}>{item.label}</b>
+                    <button className="btn sm" onClick={() => removeItem(idx)} style={{ fontSize: 11, color: "var(--red)", padding: "2px 8px" }}>Remove</button>
+                  </div>
+
+                  <div className="row" style={{ gap: 6, marginBottom: 6 }}>
+                    <div style={{ flex: 1 }}>
+                      <label style={{ fontSize: 11, color: "var(--muted)" }}>Template</label>
+                      <select value={item.template} onChange={e => updateItem(idx, { template: e.target.value })}
+                        style={{ width: "100%", fontSize: 12, padding: "4px 6px" }}>
+                        {TEMPLATES.map(t => <option key={t.id} value={t.id}>{t.name}</option>)}
+                      </select>
+                    </div>
+                    <div style={{ flex: 1 }}>
+                      <label style={{ fontSize: 11, color: "var(--muted)" }}>Language</label>
+                      <select value={item.lang} onChange={e => updateItem(idx, { lang: e.target.value })}
+                        style={{ width: "100%", fontSize: 12, padding: "4px 6px" }}>
+                        <option value="vi">Tiếng Việt</option>
+                        <option value="en">English</option>
+                      </select>
+                    </div>
+                  </div>
+
+                  {item.template === "simple" && (
+                    <div>
+                      <div style={{ display: "flex", gap: 6, marginBottom: 6 }}>
+                        <div style={{ flex: 1 }}>
+                          <label style={{ fontSize: 11, color: "var(--muted)" }}>Position</label>
+                          <select value={item.text_pos} onChange={e => updateItem(idx, { text_pos: e.target.value })}
+                            style={{ width: "100%", fontSize: 12, padding: "4px 6px" }}>
+                            {["bottom-left","bottom-center","bottom-right","center","top-left","top-center","top-right"].map(p =>
+                              <option key={p} value={p}>{p}</option>)}
+                          </select>
+                        </div>
+                      </div>
+                      <div style={{ fontSize: 12, fontWeight: 600, marginBottom: 4 }}>Text blocks</div>
+                      {(item.text_blocks || []).map((tb, bi) => (
+                        <div key={bi} style={{ display: "flex", gap: 4, marginBottom: 4, alignItems: "center" }}>
+                          <select value={tb.role} onChange={e => {
+                            const blocks = [...(item.text_blocks || [])];
+                            blocks[bi] = { ...blocks[bi], role: e.target.value };
+                            updateItem(idx, { text_blocks: blocks });
+                          }} style={{ fontSize: 11, padding: "3px 4px", width: 80 }}>
+                            {["eyebrow","headline","subhead","tag"].map(r => <option key={r} value={r}>{r}</option>)}
+                          </select>
+                          <input value={tb.text} onChange={e => {
+                            const blocks = [...(item.text_blocks || [])];
+                            blocks[bi] = { ...blocks[bi], text: e.target.value };
+                            updateItem(idx, { text_blocks: blocks });
+                          }} placeholder="Text" style={{ flex: 1, fontSize: 12, padding: "3px 6px" }} />
+                          <select value={tb.font || "sans"} onChange={e => {
+                            const blocks = [...(item.text_blocks || [])];
+                            blocks[bi] = { ...blocks[bi], font: e.target.value };
+                            updateItem(idx, { text_blocks: blocks });
+                          }} style={{ fontSize: 11, padding: "3px 4px", width: 70 }}>
+                            {FONT_OPTIONS.map(f => <option key={f} value={f}>{f}</option>)}
+                          </select>
+                          <button className="btn sm" style={{ fontSize: 10, padding: "2px 6px" }}
+                            onClick={() => {
+                              const blocks = (item.text_blocks || []).filter((_, i) => i !== bi);
+                              updateItem(idx, { text_blocks: blocks });
+                            }}>×</button>
+                        </div>
+                      ))}
+                      <button className="btn sm" style={{ fontSize: 11, marginTop: 4 }}
+                        onClick={() => updateItem(idx, { text_blocks: [...(item.text_blocks || []), { role: "subhead", text: "", font: "sans" }] })}>
+                        + Add block
+                      </button>
+                    </div>
+                  )}
+
+                  {item.template === "multicolor" && (
+                    <div>
+                      <div style={{ display: "flex", gap: 6, marginBottom: 6 }}>
+                        <div style={{ flex: 1 }}>
+                          <label style={{ fontSize: 11, color: "var(--muted)" }}>Position</label>
+                          <select value={item.text_pos} onChange={e => updateItem(idx, { text_pos: e.target.value })}
+                            style={{ width: "100%", fontSize: 12, padding: "4px 6px" }}>
+                            <option value="bottom-left">Bottom left</option>
+                            <option value="top-left">Top left</option>
+                          </select>
+                        </div>
+                        <div style={{ flex: 1 }}>
+                          <label style={{ fontSize: 11, color: "var(--muted)" }}>Font</label>
+                          <select value={item.font} onChange={e => updateItem(idx, { font: e.target.value })}
+                            style={{ width: "100%", fontSize: 12, padding: "4px 6px" }}>
+                            {FONT_OPTIONS.map(f => <option key={f} value={f}>{f}</option>)}
+                          </select>
+                        </div>
+                      </div>
+                      <div style={{ fontSize: 12, fontWeight: 600, marginBottom: 4 }}>Words</div>
+                      {(item.headline_words || []).map((w, wi) => (
+                        <div key={wi} style={{ display: "flex", gap: 4, marginBottom: 4 }}>
+                          <input value={w.text} onChange={e => {
+                            const words = [...(item.headline_words || [])];
+                            words[wi] = { ...words[wi], text: e.target.value };
+                            updateItem(idx, { headline_words: words });
+                          }} placeholder="Word" style={{ flex: 1, fontSize: 12, padding: "3px 6px" }} />
+                          <select value={w.color} onChange={e => {
+                            const words = [...(item.headline_words || [])];
+                            words[wi] = { ...words[wi], color: e.target.value };
+                            updateItem(idx, { headline_words: words });
+                          }} style={{ fontSize: 11, padding: "3px 4px", width: 70 }}>
+                            {["white","pink","gold","dark","black","red","green"].map(c => <option key={c} value={c}>{c}</option>)}
+                          </select>
+                          <button className="btn sm" style={{ fontSize: 10, padding: "2px 6px" }}
+                            onClick={() => {
+                              const words = (item.headline_words || []).filter((_, i) => i !== wi);
+                              updateItem(idx, { headline_words: words });
+                            }}>×</button>
+                        </div>
+                      ))}
+                      <button className="btn sm" style={{ fontSize: 11, marginTop: 4 }}
+                        onClick={() => updateItem(idx, { headline_words: [...(item.headline_words || []), { text: "", color: "white" }] })}>
+                        + Add word
+                      </button>
+                      <div style={{ display: "flex", gap: 6, marginTop: 8 }}>
+                        <input value={item.sub || ""} onChange={e => updateItem(idx, { sub: e.target.value })}
+                          placeholder="Subtitle" style={{ flex: 1, fontSize: 12, padding: "3px 6px" }} />
+                        <input value={item.tag || ""} onChange={e => updateItem(idx, { tag: e.target.value })}
+                          placeholder="Tag" style={{ flex: 1, fontSize: 12, padding: "3px 6px" }} />
+                      </div>
+                    </div>
+                  )}
+
+                  {item.template === "feature_panel" && (
+                    <div>
+                      <div style={{ display: "flex", gap: 6, marginBottom: 6 }}>
+                        <div style={{ flex: 1 }}>
+                          <label style={{ fontSize: 11, color: "var(--muted)" }}>Panel side</label>
+                          <select value={item.panel_side} onChange={e => updateItem(idx, { panel_side: e.target.value })}
+                            style={{ width: "100%", fontSize: 12, padding: "4px 6px" }}>
+                            <option value="left">Left</option>
+                            <option value="right">Right</option>
+                          </select>
+                        </div>
+                        <div style={{ flex: 1 }}>
+                          <label style={{ fontSize: 11, color: "var(--muted)" }}>Title</label>
+                          <input value={item.title || ""} onChange={e => updateItem(idx, { title: e.target.value })}
+                            placeholder="Panel title" style={{ width: "100%", fontSize: 12, padding: "4px 6px" }} />
+                        </div>
+                      </div>
+                      <div style={{ fontSize: 12, fontWeight: 600, marginBottom: 4 }}>Features</div>
+                      {(item.features || []).map((ft, fi) => (
+                        <div key={fi} style={{ display: "flex", gap: 4, marginBottom: 4 }}>
+                          <select value={ft.icon} onChange={e => {
+                            const feats = [...(item.features || [])];
+                            feats[fi] = { ...feats[fi], icon: e.target.value };
+                            updateItem(idx, { features: feats });
+                          }} style={{ fontSize: 11, padding: "3px 4px", width: 70 }}>
+                            {ICON_OPTIONS.map(ic => <option key={ic} value={ic}>{ic}</option>)}
+                          </select>
+                          <input value={ft.text} onChange={e => {
+                            const feats = [...(item.features || [])];
+                            feats[fi] = { ...feats[fi], text: e.target.value };
+                            updateItem(idx, { features: feats });
+                          }} placeholder="Feature text" style={{ flex: 1, fontSize: 12, padding: "3px 6px" }} />
+                          <button className="btn sm" style={{ fontSize: 10, padding: "2px 6px" }}
+                            onClick={() => {
+                              const feats = (item.features || []).filter((_, i) => i !== fi);
+                              updateItem(idx, { features: feats });
+                            }}>×</button>
+                        </div>
+                      ))}
+                      <button className="btn sm" style={{ fontSize: 11, marginTop: 4 }}
+                        onClick={() => updateItem(idx, { features: [...(item.features || []), { icon: "check", text: "" }] })}>
+                        + Add feature
+                      </button>
+                    </div>
+                  )}
+                </div>
+              ))}
+
+              {items.length > 0 && (
+                <button className="btn primary" style={{ width: "100%", marginTop: 8 }}
+                  disabled={generating} onClick={startDesign}>
+                  {generating ? "Generating..." : `Apply ${items.length} design(s)`}
+                </button>
+              )}
+            </div>
+          )}
+
+          {/* Log */}
+          {showLog && (
+            <div className="card">
+              <div className="panel-title">Progress</div>
+              {(busy || generating) && (
+                <div className="progress" style={{ marginBottom: 10 }}><i style={{ width: progress + "%" }} /></div>
+              )}
+              {status && <div style={{ fontSize: 13, color: "var(--ink-2)", marginBottom: 8 }}>{status}</div>}
+              <div className="logbox" style={{ maxHeight: 200, fontSize: 11, lineHeight: 1.6 }}>
+                {logs.map((l, i) => (
+                  <div key={i} className={l.includes("✅") ? "ok" : l.includes("❌") ? "err" : ""}>{l}</div>
+                ))}
+              </div>
+            </div>
+          )}
+
+          {/* Results */}
+          {results.length > 0 && (
+            <div className="card">
+              <div className="panel-title">Results</div>
+              <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 12 }}>
+                {results.filter(r => r.images?.length > 0).map((r, i) => (
+                  <div key={i} style={{ border: "1px solid var(--line)", borderRadius: "var(--radius-sm)", overflow: "hidden" }}>
+                    <img src={`/api/listing-free/file/${sessionId}/${r.images[0].split(/[/\\]/).pop()}`}
+                      alt={r.label} style={{ width: "100%", aspectRatio: "1/1", objectFit: "cover", display: "block" }}
+                      loading="lazy" />
+                    <div style={{ padding: "6px 8px", fontSize: 12, fontWeight: 600 }}>{r.label}</div>
+                  </div>
+                ))}
+              </div>
+              <div style={{ display: "flex", gap: 8, marginTop: 14 }}>
+                <button className="btn primary" onClick={downloadAll}><IcDownload size={16} /> Download all</button>
+                <button className="btn" onClick={resetAll}><IcRefresh size={16} /> Reset</button>
+              </div>
+            </div>
+          )}
+
+          {!sessionId && !productPreview && (
+            <div className="card" style={{ textAlign: "center", padding: "40px 24px", color: "var(--muted)" }}>
+              <div className="chip" style={{ margin: "0 auto 12px" }}><IcStar size={24} /></div>
+              <div style={{ fontSize: 14, fontWeight: 600, marginBottom: 6 }}>Listing ảnh Free</div>
+              <div style={{ fontSize: 12, lineHeight: 1.6 }}>
+                Upload a product image, add listing items with your own text, and generate professional listing images using Pillow design layers.
+              </div>
+            </div>
+          )}
+        </div>
+
+        <div className="rail">
+          <div className="rail-title">How it works</div>
+          <div className="rail-step">
+            <div className="num">1</div>
+            <div className="body">
+              <div className="t">Upload product image</div>
+              <div className="d">Choose a product photo and optional background.</div>
+            </div>
+          </div>
+          <div className="rail-step">
+            <div className="num">2</div>
+            <div className="body">
+              <div className="t">Add listing items</div>
+              <div className="d">Choose presets and customize text, fonts, colors per template.</div>
+            </div>
+          </div>
+          <div className="rail-step">
+            <div className="num">3</div>
+            <div className="body">
+              <div className="t">Generate designs</div>
+              <div className="d">Pillow renders text overlays with shadows, icons, badges.</div>
+            </div>
+          </div>
+          <div className="rail-step">
+            <div className="num">4</div>
+            <div className="body">
+              <div className="t">Download</div>
+              <div className="d">Get all images as a zip file — free, no API key needed.</div>
+            </div>
+          </div>
+          <div className="tip">
+            <b>Tip:</b> Add a background image for best results. Without one, the design overlays on a white or product image background.
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}