Product Image Studio Option 1: tách nền + ghép frame/watermark

Flask + rembg (u2net/isnet/birefnet) + Pillow + OpenCV.
Tab Tách nền (camera, so sánh 3 mức, polygon crop, cache) + Tab Ghép Frame
(danh sách frame/watermark, tỉ lệ object, nền màu/trong suốt). UI responsive.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

.gitignore

@@ -0,0 +1,16 @@
+# Python
+__pycache__/
+*.pyc
+.venv/
+venv/
+
+# Model cache rembg
+.u2net/
+
+# Dữ liệu runtime (giữ thư mục, bỏ nội dung)
+cache/*
+output/*
+objects/*
+assets/frame/*
+assets/watermark/*
+!**/.gitkeep

README.md

@@ -0,0 +1,40 @@
+# Product Image Studio — Tách nền & Ghép Frame
+
+Công cụ web xử lý ảnh sản phẩm cho ecom: **tách nền** + **ghép frame/watermark**, chạy local, miễn phí.
+Stack: **Flask + rembg (U²-Net/ISNet/BiRefNet ONNX) + Pillow + OpenCV**.
+
+## Tính năng
+**Tab 1 — Tách nền**
+- Xóa nền AI (chọn model: u2net / isnet / birefnet), chống cháy sáng giữ chi tiết mép.
+- Chụp ảnh trực tiếp từ camera, hoặc upload nhiều ảnh / kéo-thả.
+- So sánh 3 mức chất lượng (low/medium/high) chạy song song.
+- Vùng chọn đa điểm (polygon) ôm sát object, chỉnh tự do để cắt ngoài vùng.
+- Review zoom + lật ảnh gốc; cache cutout để tinh chỉnh không xử lý lại.
+- Lưu object (1:1 trong suốt) vào thư viện.
+
+**Tab 2 — Ghép Frame**
+- Danh sách nhiều frame & watermark, chọn là preview đổi ngay.
+- Chỉnh tỉ lệ object, vị trí/độ mờ/cỡ watermark, viền.
+- Nền: trong suốt hoặc bảng màu / màu tùy chọn.
+- Lưu ra file (PNG nếu trong suốt, JPG nếu nền màu).
+
+UI responsive cho desktop / tablet / mobile.
+
+## Chạy nhanh
+```bash
+./run.sh
+```
+Script tự tạo virtualenv, cài dependencies và khởi động server tại <http://localhost:8001>.
+Lần đầu sẽ tải model ONNX (~170MB), sau đó chạy offline.
+
+### Thủ công
+```bash
+python3 -m venv .venv && source .venv/bin/activate
+pip install -r requirements.txt
+python server.py
+```
+
+## Ghi chú
+- Apple Silicon: server ép `CPUExecutionProvider` (CoreML biên dịch u2net bị treo).
+- `cache/`, `output/`, `objects/`, `assets/` là dữ liệu runtime (đã gitignore).
+- Camera trực tiếp cần `localhost` hoặc HTTPS; qua IP LAN sẽ tự dùng camera gốc của máy.

requirements.txt

@@ -0,0 +1,6 @@
+flask>=3.0
+rembg>=2.0.50
+pillow>=10.0
+onnxruntime>=1.16
+opencv-python-headless>=4.8
+numpy>=1.24

run.sh

@@ -0,0 +1,29 @@
+#!/usr/bin/env bash
+# Setup + chạy server tách nền / ghép frame (Option 1 - Python/rembg)
+# Dùng: ./run.sh
+set -euo pipefail
+cd "$(dirname "$0")"
+
+PY="${PYTHON:-python3}"
+command -v "$PY" >/dev/null 2>&1 || { echo "✗ Không tìm thấy python3. Cài Python 3.9+ trước."; exit 1; }
+
+if [ ! -d .venv ]; then
+  echo "→ Tạo virtualenv (.venv)…"
+  "$PY" -m venv .venv
+fi
+
+# shellcheck disable=SC1091
+source .venv/bin/activate
+
+echo "→ Cài / cập nhật dependencies…"
+python -m pip install -q --upgrade pip
+python -m pip install -q -r requirements.txt
+
+echo ""
+echo "──────────────────────────────────────────────"
+echo "  Server: http://localhost:8001"
+echo "  Lần đầu sẽ tự tải model ONNX (~170MB)."
+echo "  Dừng: Ctrl+C"
+echo "──────────────────────────────────────────────"
+echo ""
+exec python server.py

server.py

@@ -0,0 +1,443 @@
+"""
+Option 1 — Tách nền + Ghép Frame/Watermark cho ảnh sản phẩm
+Stack: Flask + rembg (U^2-Net ONNX, local) + Pillow + OpenCV
+
+Kiến trúc 2 giai đoạn:
+  • Tab 1 (Tách nền): xóa nền → object 1:1 trong suốt → LƯU vào thư viện (trả name).
+  • Tab 2 (Ghép Frame): chọn object + frame + watermark (danh sách) → SAVE render ra file.
+"""
+import io
+import os
+import re
+import json
+import time
+import uuid
+import hashlib
+import threading
+from concurrent.futures import ThreadPoolExecutor
+
+from flask import Flask, request, jsonify, send_from_directory, send_file
+from rembg import remove, new_session
+from PIL import Image, ImageOps, ImageEnhance, ImageFilter, ImageChops, ImageDraw
+
+BASE = os.path.dirname(os.path.abspath(__file__))
+ASSETS = os.path.join(BASE, "assets")      # assets/frame/*.png, assets/watermark/*.png
+OBJECTS = os.path.join(BASE, "objects")    # object đã tách nền (thư viện Tab 1)
+OUTPUT = os.path.join(BASE, "output")
+CACHE = os.path.join(BASE, "cache")        # cutout sau remove-bg, tái dùng
+for d in (os.path.join(ASSETS, "frame"), os.path.join(ASSETS, "watermark"), OBJECTS, OUTPUT, CACHE):
+    os.makedirs(d, exist_ok=True)
+
+app = Flask(__name__, static_folder="static", static_url_path="")
+
+# ============================ MODEL / SESSION ============================
+SESSIONS = {}
+SESSION_LOCK = threading.Lock()
+ALLOWED_MODELS = {"u2net", "isnet-general-use", "birefnet-general-lite"}
+COMPARE_PRESETS = {
+    "low": {"model": "u2net", "anti_blowout": False, "recover": 0},
+    "medium": {"model": "isnet-general-use", "anti_blowout": True, "recover": 2},
+    "high": {"model": "birefnet-general-lite", "anti_blowout": True, "recover": 3},
+}
+
+
+def get_session(model: str):
+    if model not in ALLOWED_MODELS:
+        model = "u2net"
+    with SESSION_LOCK:
+        if model not in SESSIONS:
+            print(f"[model] đang khởi tạo '{model}'…", flush=True)
+            t = time.time()
+            # Ép CPUExecutionProvider: CoreML trên Apple Silicon biên dịch u2net → treo.
+            try:
+                SESSIONS[model] = new_session(model, providers=["CPUExecutionProvider"])
+            except TypeError:
+                os.environ["ONNXRUNTIME_EXECUTION_PROVIDERS"] = "[CPUExecutionProvider]"
+                SESSIONS[model] = new_session(model)
+            print(f"[model] '{model}' sẵn sàng sau {time.time() - t:.1f}s", flush=True)
+    return SESSIONS[model]
+
+
+# ============================ REMOVE BACKGROUND ============================
+def remove_object(src, opt):
+    """Xóa nền, tối ưu chống cháy sáng để không mất góc/chi tiết mép."""
+    rgba = src.convert("RGBA")
+    session = get_session(opt["model"])
+    if not opt["anti_blowout"]:
+        return remove(rgba, session=session, post_process_mask=True)
+    work = ImageEnhance.Contrast(src.convert("RGB")).enhance(1.5)
+    work = ImageEnhance.Brightness(work).enhance(0.85)
+    mask = remove(work, session=session, only_mask=True, post_process_mask=True)
+    r = int(opt["recover"])
+    if r > 0:
+        k = r * 2 + 1
+        mask = mask.filter(ImageFilter.MaxFilter(k)).filter(ImageFilter.MinFilter(k))
+    out = rgba.copy()
+    out.putalpha(mask)
+    return out
+
+
+def get_cut(src, img_hash, opt):
+    """Cutout sau xóa nền, tái dùng cache theo (ảnh + model/anti/recover)."""
+    key = f"{img_hash}-{opt['model']}-{int(opt['anti_blowout'])}-{opt['recover']}"
+    path = os.path.join(CACHE, key + ".png")
+    if os.path.exists(path):
+        return Image.open(path).convert("RGBA"), True
+    cut = remove_object(src, opt)
+    cut.save(path)
+    return cut, False
+
+
+def fit_square(cut, obj_scale, bg):
+    """Crop sát object rồi đặt vào canvas vuông 1:1."""
+    bbox = cut.getbbox()
+    if bbox:
+        cut = cut.crop(bbox)
+    w, h = cut.size
+    side = max(1, int(round(max(w, h) / max(0.05, obj_scale))))
+    fill = (255, 255, 255, 255) if bg == "white" else (0, 0, 0, 0)
+    canvas = Image.new("RGBA", (side, side), fill)
+    canvas.alpha_composite(cut, ((side - w) // 2, (side - h) // 2))
+    return canvas
+
+
+def object_polygon(cut, max_pts=48):
+    """Đường viền (polygon chuẩn hoá 0..1) ôm sát object, suy từ alpha."""
+    W, H = cut.size
+    rect = [[0, 0], [1, 0], [1, 1], [0, 1]]
+    try:
+        import cv2
+        import numpy as np
+    except Exception:  # noqa: BLE001
+        bb = cut.getbbox()
+        if not bb:
+            return rect
+        x0, y0, x1, y1 = bb
+        return [[x0 / W, y0 / H], [x1 / W, y0 / H], [x1 / W, y1 / H], [x0 / W, y1 / H]]
+    alpha = np.array(cut.getchannel("A"))
+    _, binimg = cv2.threshold(alpha, 10, 255, cv2.THRESH_BINARY)
+    cnts, _ = cv2.findContours(binimg, cv2.RETR_EXTERNAL, cv2.CHAIN_APPROX_SIMPLE)
+    if not cnts:
+        return rect
+    c = max(cnts, key=cv2.contourArea)
+    peri = cv2.arcLength(c, True)
+    eps = 0.008 * peri
+    approx = cv2.approxPolyDP(c, eps, True)
+    while len(approx) > max_pts:
+        eps *= 1.3
+        approx = cv2.approxPolyDP(c, eps, True)
+    if len(approx) < 3:
+        return rect
+    return [[float(p[0][0]) / W, float(p[0][1]) / H] for p in approx]
+
+
+def apply_poly(cut, poly):
+    """Giữ alpha bên trong polygon (chuẩn hoá), xóa ngoài."""
+    W, H = cut.size
+    pts = [(p[0] * W, p[1] * H) for p in poly]
+    mask = Image.new("L", (W, H), 0)
+    ImageDraw.Draw(mask).polygon(pts, fill=255)
+    out = cut.copy()
+    out.putalpha(ImageChops.multiply(cut.getchannel("A"), mask))
+    return out
+
+
+def position(pos, canvas, item, margin):
+    cw, ch = canvas
+    iw, ih = item
+    table = {
+        "northwest": (margin, margin),
+        "north": ((cw - iw) // 2, margin),
+        "northeast": (cw - iw - margin, margin),
+        "center": ((cw - iw) // 2, (ch - ih) // 2),
+        "southwest": (margin, ch - ih - margin),
+        "south": ((cw - iw) // 2, ch - ih - margin),
+        "southeast": (cw - iw - margin, ch - ih - margin),
+    }
+    return table.get(pos, table["southeast"])
+
+
+# ============================ TAB 1: TÁCH NỀN ============================
+def make_object(src, img_hash, opt):
+    """Xóa nền → (polygon crop nếu có) → object vuông 1:1 TRONG SUỐT (không frame/wm)."""
+    cut, cached = get_cut(src, img_hash, opt)
+    polygon = object_polygon(cut)
+    if opt.get("poly"):
+        cut = apply_poly(cut, opt["poly"])
+    canvas = fit_square(cut, 1.0, "transparent")  # lưu ôm sát; tỉ lệ chỉnh ở bước ghép frame
+    out_name = f"{uuid.uuid4().hex[:12]}.png"
+    canvas.save(os.path.join(OUTPUT, out_name))
+    return out_name, cached, polygon
+
+
+def parse_poly(form):
+    raw = form.get("poly")
+    if not raw:
+        return None
+    try:
+        pts = [[max(0.0, min(1.0, float(x))), max(0.0, min(1.0, float(y)))]
+               for x, y in json.loads(raw)]
+    except (ValueError, TypeError):
+        return None
+    return pts if len(pts) >= 3 else None
+
+
+def build_opt(form):
+    return {
+        "model": form.get("model", "u2net"),
+        "anti_blowout": form.get("anti_blowout", "true") == "true",
+        "recover": int(form.get("recover", 2) or 0),
+        "poly": parse_poly(form),
+    }
+
+
+def save_original(data, filename):
+    ext = os.path.splitext(filename)[1].lower()
+    if ext not in (".jpg", ".jpeg", ".png", ".webp"):
+        ext = ".png"
+    name = f"orig-{uuid.uuid4().hex[:12]}{ext}"
+    with open(os.path.join(OUTPUT, name), "wb") as fh:
+        fh.write(data)
+    return name
+
+
+def run_compare(src, img_hash, filename, original, base_opt):
+    def run(level):
+        opt = dict(base_opt, **COMPARE_PRESETS[level])
+        t = time.time()
+        out, cached, polygon = make_object(src, img_hash, opt)
+        print(f"[compare] {filename} · {level} ✓ {'cache' if cached else f'{time.time()-t:.1f}s'}", flush=True)
+        return {"name": filename, "output": out, "original": original,
+                "ok": True, "level": level, "cached": cached, "polygon": polygon}
+
+    levels = ("low", "medium", "high")
+    with ThreadPoolExecutor(max_workers=3) as ex:
+        futures = {lv: ex.submit(run, lv) for lv in levels}
+        out = []
+        for lv in levels:
+            try:
+                out.append(futures[lv].result())
+            except Exception as e:  # noqa: BLE001
+                print(f"[compare] {filename} · {lv} ✗ {e}", flush=True)
+                out.append({"name": filename, "ok": False, "level": lv, "error": str(e)})
+    return out
+
+
+@app.post("/api/process")
+def process():
+    opt = build_opt(request.form)
+    compare = request.form.get("compare", "false") == "true"
+    files = request.files.getlist("images")
+    if not files:
+        return jsonify(error="chưa chọn ảnh"), 400
+
+    total = len(files)
+    print(f"[batch] nhận {total} ảnh · {'so sánh 3 mức' if compare else opt['model']}", flush=True)
+    results = []
+    for i, f in enumerate(files, 1):
+        t = time.time()
+        try:
+            data = f.read()
+            img_hash = hashlib.sha1(data).hexdigest()[:16]
+            original = save_original(data, f.filename)
+            src = ImageOps.exif_transpose(Image.open(io.BytesIO(data))).convert("RGBA")
+            if compare:
+                results.extend(run_compare(src, img_hash, f.filename, original, opt))
+            else:
+                out, cached, polygon = make_object(src, img_hash, opt)
+                results.append({"name": f.filename, "output": out, "original": original,
+                                "ok": True, "level": None, "cached": cached, "polygon": polygon})
+            print(f"[{i}/{total}] {f.filename} ✓ {time.time() - t:.1f}s", flush=True)
+        except Exception as e:  # noqa: BLE001
+            print(f"[{i}/{total}] {f.filename} ✗ {e}", flush=True)
+            results.append({"name": f.filename, "ok": False, "error": str(e)})
+    print("[batch] hoàn tất.", flush=True)
+    return jsonify(results=results)
+
+
+@app.post("/api/recrop")
+def recrop():
+    """Render lại 1 object với vùng chọn polygon, dùng lại ảnh gốc + cache cutout."""
+    original = request.form.get("original", "")
+    path = os.path.join(OUTPUT, os.path.basename(original))
+    if not original or not os.path.exists(path):
+        return jsonify(error="không tìm thấy ảnh gốc"), 404
+    opt = build_opt(request.form)
+    level = request.form.get("level", "")
+    if level in COMPARE_PRESETS:
+        opt.update(COMPARE_PRESETS[level])
+    with open(path, "rb") as fh:
+        data = fh.read()
+    img_hash = hashlib.sha1(data).hexdigest()[:16]
+    src = ImageOps.exif_transpose(Image.open(io.BytesIO(data))).convert("RGBA")
+    out, cached, polygon = make_object(src, img_hash, opt)
+    return jsonify(ok=True, output=out, original=original, level=level or None,
+                   cached=cached, polygon=polygon)
+
+
+# ============================ THƯ VIỆN OBJECT ============================
+def safe_name(name):
+    name = re.sub(r"[^\w\-]+", "_", (name or "").strip())
+    return name[:60] or uuid.uuid4().hex[:8]
+
+
+@app.post("/api/save-object")
+def save_object():
+    out = os.path.basename(request.form.get("output", ""))
+    src_path = os.path.join(OUTPUT, out)
+    if not out or not os.path.exists(src_path):
+        return jsonify(error="không tìm thấy ảnh đã xử lý"), 404
+    name = safe_name(request.form.get("name"))
+    Image.open(src_path).convert("RGBA").save(os.path.join(OBJECTS, name + ".png"))
+    print(f"[object] đã lưu '{name}'", flush=True)
+    return jsonify(ok=True, name=name, url=f"/objects/{name}.png")
+
+
+@app.get("/api/objects")
+def list_objects():
+    items = [{"name": fn[:-4], "url": f"/objects/{fn}"}
+             for fn in sorted(os.listdir(OBJECTS)) if fn.endswith(".png")]
+    return jsonify(items=items)
+
+
+@app.delete("/api/objects/<name>")
+def del_object(name):
+    p = os.path.join(OBJECTS, os.path.basename(name) + ".png")
+    if os.path.exists(p):
+        os.remove(p)
+    return jsonify(ok=True)
+
+
+@app.get("/objects/<path:name>")
+def serve_object(name):
+    return send_from_directory(OBJECTS, name)
+
+
+# ============================ TAB 2: FRAME / WATERMARK ============================
+def bg_color(bg):
+    """Trả (r,g,b,255) cho mã hex, hoặc None nếu trong suốt."""
+    if not bg or bg == "transparent":
+        return None
+    h = bg.lstrip("#")
+    if len(h) == 3:
+        h = "".join(c * 2 for c in h)
+    try:
+        return (int(h[0:2], 16), int(h[2:4], 16), int(h[4:6], 16), 255)
+    except (ValueError, IndexError):
+        return None
+
+
+def asset_file(kind, aid):
+    return os.path.join(ASSETS, kind, f"{os.path.basename(aid)}.png")
+
+
+@app.post("/api/asset")
+def add_asset():
+    kind = request.form.get("kind")
+    if kind not in ("frame", "watermark"):
+        return jsonify(error="kind không hợp lệ"), 400
+    f = request.files.get("file")
+    if not f:
+        return jsonify(error="thiếu file"), 400
+    aid = uuid.uuid4().hex[:12]
+    Image.open(f.stream).convert("RGBA").save(asset_file(kind, aid))
+    return jsonify(ok=True, id=aid, url=f"/api/asset/{kind}/{aid}")
+
+
+@app.get("/api/asset/<kind>")
+def list_assets(kind):
+    d = os.path.join(ASSETS, kind)
+    items = []
+    if os.path.isdir(d):
+        for fn in sorted(os.listdir(d)):
+            if fn.endswith(".png"):
+                aid = fn[:-4]
+                items.append({"id": aid, "url": f"/api/asset/{kind}/{aid}"})
+    return jsonify(items=items)
+
+
+@app.get("/api/asset/<kind>/<aid>")
+def get_asset(kind, aid):
+    p = asset_file(kind, aid)
+    if not os.path.exists(p):
+        return jsonify(error="chưa có"), 404
+    return send_file(p, mimetype="image/png")
+
+
+@app.delete("/api/asset/<kind>/<aid>")
+def del_asset(kind, aid):
+    p = asset_file(kind, aid)
+    if os.path.exists(p):
+        os.remove(p)
+    return jsonify(ok=True)
+
+
+@app.post("/api/compose")
+def compose():
+    """Ghép object + frame + watermark → render & LƯU file, trả filename."""
+    name = os.path.basename(request.form.get("object", ""))
+    op = os.path.join(OBJECTS, name + ".png")
+    if not name or not os.path.exists(op):
+        return jsonify(error="không tìm thấy object"), 404
+    obj = Image.open(op).convert("RGBA")
+
+    obj_scale = float(request.form.get("obj_scale", 100)) / 100
+    obj = fit_square(obj, obj_scale, "transparent")  # đặt lại tỉ lệ object trong khung
+
+    fill = bg_color(request.form.get("bg", "transparent"))  # None = trong suốt
+    border = int(request.form.get("border", 0) or 0)
+    frame_id = request.form.get("frame", "")
+    wm_id = request.form.get("watermark", "")
+    wm_opacity = float(request.form.get("wm_opacity", 60)) / 100
+    wm_pos = request.form.get("wm_pos", "southeast")
+    wm_scale = float(request.form.get("wm_scale", 25)) / 100
+
+    if fill:
+        canvas = Image.new("RGBA", obj.size, fill)
+        canvas.alpha_composite(obj)
+    else:
+        canvas = obj.copy()
+
+    if border > 0:
+        canvas = ImageOps.expand(canvas, border=border, fill=fill or (0, 0, 0, 0))
+
+    if frame_id and os.path.exists(asset_file("frame", frame_id)):
+        frame = Image.open(asset_file("frame", frame_id)).convert("RGBA").resize(canvas.size)
+        canvas.alpha_composite(frame)
+
+    if wm_id and os.path.exists(asset_file("watermark", wm_id)):
+        wm = Image.open(asset_file("watermark", wm_id)).convert("RGBA")
+        tw = max(1, int(canvas.width * wm_scale))
+        th = max(1, int(wm.height * tw / wm.width))
+        wm = wm.resize((tw, th))
+        wm.putalpha(wm.split()[3].point(lambda a: int(a * wm_opacity)))
+        margin = int(canvas.width * 0.03)
+        x, y = position(wm_pos, canvas.size, wm.size, margin)
+        canvas.alpha_composite(wm, (x, y))
+
+    uid = uuid.uuid4().hex[:12]
+    if fill:  # nền đặc → JPG
+        out_name = f"{uid}.jpg"
+        canvas.convert("RGB").save(os.path.join(OUTPUT, out_name), quality=92)
+    else:     # trong suốt → PNG
+        out_name = f"{uid}.png"
+        canvas.save(os.path.join(OUTPUT, out_name))
+    print(f"[compose] {name} + frame={frame_id or '-'} + wm={wm_id or '-'} → {out_name}", flush=True)
+    return jsonify(ok=True, output=out_name, url=f"/output/{out_name}")
+
+
+@app.get("/")
+def index():
+    return send_from_directory("static", "index.html")
+
+
+@app.get("/output/<path:name>")
+def output(name):
+    return send_from_directory(OUTPUT, name)
+
+
+if __name__ == "__main__":
+    print("→ Option 1 (Python/rembg) đang khởi động…", flush=True)
+    get_session("u2net")
+    print("→ Sẵn sàng tại http://localhost:8001", flush=True)
+    app.run(host="0.0.0.0", port=8001, debug=False, threaded=True)

static/index.html

@@ -0,0 +1,688 @@
+<!DOCTYPE html>
+<html lang="vi">
+<head>
+<meta charset="UTF-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+<title>Studio Ảnh Sản Phẩm · Tách nền & Ghép Frame</title>
+<style>
+  :root {
+    --accent: #6366f1; --accent2: #8b5cf6; --accent-grad: linear-gradient(135deg, #6366f1, #8b5cf6);
+    --bg: #f6f7fb; --card: #ffffff; --line: #e7e9f3; --line2: #eef0f7;
+    --text: #1b1f33; --muted: #71768f; --ok: #10b981; --danger: #ef4444; --warn: #f59e0b;
+    --radius: 16px; --shadow: 0 6px 24px rgba(31,38,90,.08); --shadow-lg: 0 16px 48px rgba(31,38,90,.16);
+    --checker: repeating-conic-gradient(#e9ecf5 0% 25%, #fff 0% 50%) 50% / 18px 18px;
+  }
+  * { box-sizing: border-box; }
+  body { margin: 0; font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--text);
+         background: radial-gradient(1200px 600px at 80% -10%, #eef0ff 0%, transparent 60%), var(--bg); }
+  h1, h2, h3 { margin: 0; }
+  button { font-family: inherit; }
+
+  /* Header */
+  header { position: sticky; top: 0; z-index: 20; backdrop-filter: saturate(1.4) blur(10px);
+           background: rgba(255,255,255,.78); border-bottom: 1px solid var(--line);
+           display: flex; align-items: center; gap: 18px; padding: 12px 24px; }
+  .logo { display: flex; align-items: center; gap: 11px; font-weight: 800; font-size: 16px; letter-spacing: -.01em; }
+  .logo .mark { width: 30px; height: 30px; border-radius: 9px; background: var(--accent-grad);
+                display: grid; place-items: center; color: #fff; font-size: 16px; box-shadow: 0 4px 12px rgba(99,102,241,.45); }
+  .logo small { display: block; font-weight: 500; font-size: 11px; color: var(--muted); letter-spacing: 0; }
+  .spacer { flex: 1; }
+  /* Segmented tabs */
+  .seg { display: inline-flex; background: #eef0f7; border: 1px solid var(--line); border-radius: 12px; padding: 4px; gap: 4px; }
+  .seg button { border: 0; background: transparent; color: var(--muted); font-weight: 600; font-size: 13.5px;
+                padding: 8px 16px; border-radius: 9px; cursor: pointer; display: flex; align-items: center; gap: 7px; transition: .18s; }
+  .seg button.active { background: #fff; color: var(--accent); box-shadow: var(--shadow); }
+  .seg button:not(.active):hover { color: var(--text); }
+
+  main { max-width: 1280px; margin: 0 auto; padding: 24px; }
+  .tab { display: none; }
+  .tab.active { display: block; animation: fade .25s ease; }
+  @keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
+
+  /* Cards & layout */
+  .card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
+  .card-pad { padding: 20px; }
+  .grid-remove { display: grid; grid-template-columns: 300px 1fr; gap: 20px; align-items: start; }
+  .grid-frame { display: grid; grid-template-columns: 240px 1fr 320px; gap: 20px; align-items: start; }
+  .sticky { position: sticky; top: 86px; }
+  .sec-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
+  .sec-title .num { width: 20px; height: 20px; border-radius: 6px; background: var(--accent-grad); color: #fff; display: grid; place-items: center; font-size: 11px; }
+
+  /* Form controls */
+  label.field { display: block; font-size: 12.5px; font-weight: 600; margin: 0 0 7px; color: #3a3f57; }
+  select, input[type=number], input[type=text] { width: 100%; padding: 9px 11px; border: 1px solid var(--line); border-radius: 10px;
+    font-size: 13px; background: #fff; color: var(--text); transition: .15s; }
+  select:focus, input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(99,102,241,.14); }
+  input[type=range] { width: 100%; accent-color: var(--accent); }
+  .stack > * + * { margin-top: 15px; }
+  .val { color: var(--accent); font-weight: 700; }
+  .switch { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13px; font-weight: 600; }
+  .switch input { width: 38px; height: 22px; appearance: none; background: #d4d7e6; border-radius: 999px; position: relative; cursor: pointer; transition: .2s; }
+  .switch input:checked { background: var(--accent); }
+  .switch input::after { content: ""; position: absolute; width: 18px; height: 18px; background: #fff; border-radius: 50%; top: 2px; left: 2px; transition: .2s; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
+  .switch input:checked::after { left: 18px; }
+
+  .btn { background: var(--accent-grad); color: #fff; border: 0; padding: 11px 18px; border-radius: 11px; font-size: 14px; font-weight: 700;
+         cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; box-shadow: 0 6px 16px rgba(99,102,241,.32); transition: .16s; }
+  .btn:hover { transform: translateY(-1px); box-shadow: 0 10px 22px rgba(99,102,241,.4); }
+  .btn:disabled { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; }
+  .btn.block { width: 100%; }
+  .btn-ghost { background: #fff; color: var(--text); border: 1px solid var(--line); box-shadow: none; }
+  .btn-ghost:hover { border-color: var(--accent); color: var(--accent); box-shadow: none; transform: none; }
+  .btn-sm { padding: 7px 12px; font-size: 12.5px; border-radius: 9px; }
+  .muted { color: var(--muted); font-size: 12.5px; }
+
+  /* Dropzone */
+  #drop { border: 2px dashed #cfd3e8; border-radius: var(--radius); padding: 40px 20px; text-align: center; cursor: pointer; transition: .18s; background: #fbfbff; }
+  #drop:hover, #drop.over { border-color: var(--accent); background: #f1f2ff; }
+  #drop .ic { font-size: 30px; }
+  #drop b { color: var(--accent); }
+
+  /* Result grid (tab 1) */
+  .results { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 16px; margin-top: 18px; }
+  .result { position: relative; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: #fff; transition: .16s; }
+  .result:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }
+  .result .thumb { width: 100%; aspect-ratio: 1; object-fit: contain; background: var(--checker); cursor: zoom-in; display: block; }
+  .badge-lvl { position: absolute; top: 9px; left: 9px; z-index: 2; font-size: 10.5px; font-weight: 800; letter-spacing: .04em; padding: 3px 9px; border-radius: 999px; color: #fff; text-transform: uppercase; box-shadow: 0 2px 6px rgba(0,0,0,.25); }
+  .badge-lvl.low { background: #94a3b8; } .badge-lvl.medium { background: var(--warn); } .badge-lvl.high { background: var(--ok); }
+  .result .acts { position: absolute; top: 8px; right: 8px; z-index: 2; display: flex; gap: 6px; opacity: 0; transition: .15s; }
+  .result:hover .acts { opacity: 1; }
+  .icon-btn { background: rgba(20,22,40,.82); color: #fff; border: 0; border-radius: 8px; padding: 5px 9px; font-size: 12px; font-weight: 600; cursor: pointer; backdrop-filter: blur(4px); }
+  .icon-btn:hover { background: var(--accent); }
+  .result .meta { padding: 9px 11px; font-size: 12px; display: flex; align-items: center; justify-content: space-between; gap: 6px; border-top: 1px solid var(--line2); }
+  .result .meta a { color: var(--accent); font-weight: 700; text-decoration: none; }
+  .result.err { border-color: #fca5a5; } .result.err .meta { color: var(--danger); }
+  .saverow { display: flex; gap: 6px; padding: 9px 11px; border-top: 1px solid var(--line2); background: #fafbff; }
+  .saverow input { padding: 6px 9px; font-size: 12px; }
+
+  /* Thumbnail picker (assets / objects) */
+  .thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 10px; }
+  .thumb-item { position: relative; aspect-ratio: 1; border: 2px solid var(--line); border-radius: 11px; overflow: hidden; cursor: pointer; background: var(--checker); transition: .14s; }
+  .thumb-item img { width: 100%; height: 100%; object-fit: contain; }
+  .thumb-item:hover { border-color: #c3c7e6; }
+  .thumb-item.sel { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(99,102,241,.2); }
+  .thumb-item.sel::after { content: "✓"; position: absolute; top: 3px; right: 4px; width: 16px; height: 16px; background: var(--accent); color: #fff; border-radius: 50%; font-size: 11px; display: grid; place-items: center; }
+  .thumb-item .del { position: absolute; bottom: 3px; right: 3px; background: rgba(239,68,68,.92); color: #fff; border: 0; border-radius: 6px; font-size: 11px; padding: 1px 6px; cursor: pointer; opacity: 0; transition: .14s; }
+  .thumb-item:hover .del { opacity: 1; }
+  .thumb-add { border: 2px dashed #cfd3e8; border-radius: 11px; aspect-ratio: 1; display: grid; place-items: center; cursor: pointer; color: var(--muted); font-size: 22px; background: #fbfbff; transition: .14s; }
+  .thumb-add:hover { border-color: var(--accent); color: var(--accent); }
+  .thumb-none { font-size: 12px; color: var(--muted); padding: 14px; text-align: center; border: 1px dashed var(--line); border-radius: 11px; }
+
+  /* Live preview (tab 2) */
+  .preview-wrap { position: relative; width: 100%; aspect-ratio: 1; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); }
+  .preview-stage { position: absolute; inset: 0; display: grid; place-items: center; }
+  #pvObj { position: relative; z-index: 1; max-width: 100%; max-height: 100%; object-fit: contain; }
+  #pvFrame { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; }
+  #pvWm { position: absolute; z-index: 3; pointer-events: none; }
+  .pv-empty { color: var(--muted); font-size: 13px; text-align: center; padding: 20px; }
+
+  .swatches { display: flex; gap: 8px; flex-wrap: wrap; }
+  .sw { width: 32px; height: 32px; border-radius: 9px; border: 2px solid var(--line); cursor: pointer; padding: 0; position: relative; transition: .14s; }
+  .sw:hover { transform: translateY(-1px); }
+  .sw.on { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(99,102,241,.22); }
+  .sw-custom { display: grid; place-items: center; overflow: hidden; background: conic-gradient(#ef4444,#f59e0b,#eab308,#22c55e,#06b6d4,#6366f1,#a855f7,#ef4444); }
+  .sw-custom input { opacity: 0; width: 100%; height: 100%; cursor: pointer; }
+  .chips { display: flex; gap: 7px; flex-wrap: wrap; }
+  .chip { border: 1px solid var(--line); background: #fff; border-radius: 9px; padding: 7px 11px; font-size: 12.5px; font-weight: 600; cursor: pointer; color: var(--muted); transition: .14s; }
+  .chip.on { border-color: var(--accent); background: #f1f2ff; color: var(--accent); }
+
+  /* Toast */
+  #toast { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%) translateY(20px); z-index: 80;
+           background: #16182b; color: #fff; padding: 12px 18px; border-radius: 12px; font-size: 13.5px; font-weight: 600;
+           box-shadow: var(--shadow-lg); opacity: 0; pointer-events: none; transition: .25s; display: flex; align-items: center; gap: 9px; }
+  #toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
+  #toast.ok { border-left: 3px solid var(--ok); } #toast.err { border-left: 3px solid var(--danger); }
+
+  .spinner { width: 15px; height: 15px; border: 2px solid rgba(255,255,255,.5); border-top-color: #fff; border-radius: 50%; animation: spin .7s linear infinite; }
+  @keyframes spin { to { transform: rotate(360deg); } }
+
+  /* Lightbox & crop editor */
+  .lb { position: fixed; inset: 0; z-index: 60; background: rgba(12,14,28,.95); display: flex; flex-direction: column; }
+  .lb[hidden] { display: none; }
+  .lb-bar { display: flex; align-items: center; gap: 10px; padding: 13px 18px; color: #fff; }
+  .lb-bar button, .lb-bar a { background: rgba(255,255,255,.13); color: #fff; border: 0; border-radius: 9px; padding: 8px 13px; font-size: 13.5px; font-weight: 600; cursor: pointer; text-decoration: none; }
+  .lb-bar button:hover, .lb-bar a:hover { background: rgba(255,255,255,.26); }
+  .lb-bar .which { font-weight: 700; min-width: 96px; text-align: center; } .lb-bar #lbToggle { background: var(--accent); }
+  .lb-bar .sp { flex: 1; } #lbZoom { min-width: 52px; text-align: center; font-variant-numeric: tabular-nums; }
+  .lb-stage { flex: 1; overflow: hidden; display: flex; align-items: center; justify-content: center; cursor: grab; }
+  .lb-stage.grabbing { cursor: grabbing; }
+  .lb-stage img { max-width: 92%; max-height: 100%; transform-origin: center; user-select: none; -webkit-user-drag: none; background: var(--checker); }
+  .lb-hint { color: rgba(255,255,255,.62); font-size: 12px; padding: 0 18px 13px; }
+  #cropImg { display: block; max-width: 86vw; max-height: 74vh; }
+  #polyShape { cursor: copy; } #polyHandles circle { fill: #818cf8; stroke: #fff; stroke-width: 2; cursor: grab; } #polyHandles circle:hover { fill: var(--warn); }
+
+  /* ===== Responsive: tablet ===== */
+  @media (max-width: 1024px) {
+    .grid-frame { grid-template-columns: 1fr; }
+    .grid-frame .sticky { position: static; }
+    .preview-wrap { max-width: 520px; margin: 0 auto; }
+  }
+  /* ===== Responsive: mobile ===== */
+  @media (max-width: 760px) {
+    header { padding: 10px 14px; gap: 10px; flex-wrap: wrap; }
+    .logo small { display: none; }
+    .spacer { display: none; }
+    .seg { width: 100%; justify-content: center; }
+    .seg button { flex: 1; justify-content: center; padding: 9px 10px; }
+    main { padding: 14px; }
+    .grid-remove { grid-template-columns: 1fr; }
+    .grid-remove .sticky { position: static; }
+    .card-pad { padding: 16px; }
+    .results { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
+    .result .acts { opacity: 1; }                 /* không hover trên touch → hiện sẵn */
+    #drop { padding: 30px 14px; }
+    .lb-bar { flex-wrap: wrap; gap: 8px; padding: 11px 14px; }
+    .lb-bar .which { min-width: auto; }
+    .lb-bar button, .lb-bar a { padding: 8px 11px; font-size: 13px; }
+    .lb-hint { padding: 0 14px 12px; }
+    .thumbs { grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); }
+    #toast { left: 14px; right: 14px; transform: translateY(20px); width: auto; }
+    #toast.show { transform: translateY(0); }
+  }
+</style>
+</head>
+<body>
+<header>
+  <div class="logo"><span class="mark">◈</span><div>Product Studio<small>Tách nền · Ghép frame cho ảnh ecom</small></div></div>
+  <div class="spacer"></div>
+  <div class="seg" id="tabs">
+    <button data-tab="remove" class="active">✂️ Tách nền</button>
+    <button data-tab="frame">🖼️ Ghép Frame</button>
+  </div>
+</header>
+
+<main>
+  <!-- ========================= TAB 1: TÁCH NỀN ========================= -->
+  <section class="tab active" id="tab-remove">
+    <div class="grid-remove">
+      <!-- Cấu hình -->
+      <div class="card card-pad sticky">
+        <div class="sec-title"><span class="num">1</span> Chất lượng tách nền</div>
+        <div class="stack">
+          <div>
+            <label class="field">Model AI</label>
+            <select id="model">
+              <option value="u2net">u2net · nhanh, nhẹ</option>
+              <option value="isnet-general-use">isnet · giữ mép tốt</option>
+              <option value="birefnet-general-lite">birefnet · chi tiết cao</option>
+            </select>
+          </div>
+          <div>
+            <label class="field">Phục hồi mép · <span class="val" id="recVal">2px</span></label>
+            <input type="range" id="recover" min="0" max="6" value="2" />
+          </div>
+          <div class="switch"><span>Chống cháy sáng</span><input type="checkbox" id="antiBlowout" checked /></div>
+          <div class="switch"><span>So sánh 3 mức (low/med/high)</span><input type="checkbox" id="compare" /></div>
+        </div>
+      </div>
+
+      <!-- Upload + kết quả -->
+      <div>
+        <div class="card card-pad">
+          <div class="sec-title"><span class="num">2</span> Tải ảnh sản phẩm</div>
+          <div id="drop"><div class="ic">📦</div><p style="margin:8px 0 2px">Kéo thả ảnh vào đây — hoặc <b>bấm để chọn</b></p><span class="muted">Hỗ trợ nhiều ảnh cùng lúc · JPG / PNG / WebP</span></div>
+          <input type="file" id="imgInput" accept="image/*" multiple hidden />
+          <button class="btn btn-ghost" id="camBtn" style="margin-top:12px; width:100%">📷 Chụp ảnh trực tiếp</button>
+          <div id="fileList" class="muted" style="margin-top:10px"></div>
+          <div style="margin-top:16px; display:flex; gap:12px; align-items:center">
+            <button class="btn" id="runBtn" disabled>✨ Tách nền</button>
+            <span class="muted" id="status"></span>
+          </div>
+        </div>
+        <div class="results" id="results"></div>
+      </div>
+    </div>
+  </section>
+
+  <!-- ========================= TAB 2: GHÉP FRAME ========================= -->
+  <section class="tab" id="tab-frame">
+    <div class="grid-frame">
+      <!-- Thư viện object -->
+      <div class="card card-pad sticky">
+        <div class="sec-title"><span class="num">1</span> Object đã tách nền</div>
+        <div class="thumbs" id="objLib"></div>
+        <p class="muted" id="objEmpty" style="margin-top:10px">Chưa có object. Sang tab <b>Tách nền</b>, xử lý rồi bấm <b>Lưu</b>.</p>
+      </div>
+
+      <!-- Preview -->
+      <div class="card card-pad">
+        <div class="sec-title"><span class="num">2</span> Xem trước (đổi ngay khi chọn frame / watermark)</div>
+        <div class="preview-wrap" id="pvWrap" style="background:var(--checker)">
+          <div class="preview-stage" id="pvStage">
+            <div class="pv-empty" id="pvEmpty">Chọn 1 object bên trái để bắt đầu.</div>
+            <img id="pvObj" hidden /><img id="pvFrame" hidden /><img id="pvWm" hidden />
+          </div>
+        </div>
+        <div style="display:flex; gap:10px; margin-top:16px">
+          <button class="btn block" id="saveBtn" disabled>💾 Lưu ảnh ghép</button>
+        </div>
+        <div class="results" id="composed" style="margin-top:16px"></div>
+      </div>
+
+      <!-- Cấu hình frame/watermark -->
+      <div class="card card-pad sticky stack">
+        <div>
+          <div class="sec-title"><span class="num">3</span> Frame <span class="muted" style="text-transform:none;letter-spacing:0">(chọn để đổi)</span></div>
+          <div class="thumbs" id="frameLib"></div>
+        </div>
+        <div>
+          <div class="sec-title">Watermark</div>
+          <div class="thumbs" id="wmLib"></div>
+        </div>
+        <div>
+          <label class="field">Vị trí watermark</label>
+          <select id="wmPos">
+            <option value="southeast">Dưới phải</option><option value="southwest">Dưới trái</option>
+            <option value="northeast">Trên phải</option><option value="northwest">Trên trái</option>
+            <option value="center">Giữa</option><option value="south">Dưới giữa</option>
+          </select>
+        </div>
+        <div>
+          <label class="field">Độ mờ watermark · <span class="val" id="opVal">60%</span></label>
+          <input type="range" id="wmOpacity" min="0" max="100" value="60" />
+        </div>
+        <div>
+          <label class="field">Cỡ watermark · <span class="val" id="scVal">25%</span></label>
+          <input type="range" id="wmScale" min="5" max="60" value="25" />
+        </div>
+        <div>
+          <label class="field">Tỉ lệ object trong khung · <span class="val" id="objVal">100%</span></label>
+          <input type="range" id="objScale" min="40" max="100" value="100" />
+        </div>
+        <div>
+          <label class="field">Nền</label>
+          <div class="chips" style="margin-bottom:9px"><span class="chip on" data-bg="transparent">⬚ Trong suốt</span></div>
+          <div class="swatches" id="swatches">
+            <button class="sw" data-bg="#ffffff" style="background:#fff"></button>
+            <button class="sw" data-bg="#000000" style="background:#000"></button>
+            <button class="sw" data-bg="#f5f5f7" style="background:#f5f5f7"></button>
+            <button class="sw" data-bg="#f4ece1" style="background:#f4ece1"></button>
+            <button class="sw" data-bg="#fde2e4" style="background:#fde2e4"></button>
+            <button class="sw" data-bg="#e2f0cb" style="background:#e2f0cb"></button>
+            <button class="sw" data-bg="#cde7ff" style="background:#cde7ff"></button>
+            <button class="sw" data-bg="#6366f1" style="background:#6366f1"></button>
+            <label class="sw sw-custom" title="Màu tùy chọn"><input type="color" id="bgCustom" value="#ff6b6b" /></label>
+          </div>
+        </div>
+        <div>
+          <label class="field">Viền · <span class="val" id="bdVal">0px</span></label>
+          <input type="range" id="border" min="0" max="200" value="0" />
+        </div>
+      </div>
+    </div>
+  </section>
+</main>
+
+<!-- Lightbox -->
+<div class="lb" id="lightbox" hidden>
+  <div class="lb-bar">
+    <button id="lbToggle">Xem ảnh gốc</button><span class="which" id="lbWhich">Đã xử lý</span>
+    <span class="sp"></span>
+    <button id="lbOut">−</button><span id="lbZoom">100%</span><button id="lbIn">+</button>
+    <button id="lbReset">Reset</button><a id="lbDownload" download>Tải</a><button id="lbClose">✕ Đóng</button>
+  </div>
+  <div class="lb-stage" id="lbStage"><img id="lbImg" alt="review" /></div>
+  <div class="lb-hint">Lăn chuột để zoom · kéo để di chuyển · nút "Xem ảnh gốc" để so sánh · double-click zoom nhanh · ESC để đóng</div>
+</div>
+
+<!-- Crop editor -->
+<div class="lb" id="cropEditor" hidden>
+  <div class="lb-bar">
+    <b>Chọn vùng object (đa điểm)</b><span class="sp"></span>
+    <button id="cropAuto">Ôm sát object</button><button id="cropFull">Toàn ảnh</button>
+    <button id="cropApply" style="background:var(--accent)">Render lại vùng chọn</button><button id="cropCancel">✕ Đóng</button>
+  </div>
+  <div class="lb-stage" style="cursor:default; align-items:center">
+    <div id="cropWrap" style="position:relative; display:inline-block; line-height:0">
+      <img id="cropImg" alt="crop" />
+      <svg id="polySvg" style="position:absolute; left:0; top:0; width:100%; height:100%; overflow:visible">
+        <path id="polyDim" fill-rule="evenodd" fill="rgba(8,10,25,.6)" pointer-events="none"></path>
+        <polygon id="polyShape" fill="rgba(129,140,248,.12)" stroke="#818cf8" stroke-width="2"></polygon>
+        <g id="polyHandles"></g>
+      </svg>
+    </div>
+  </div>
+  <div class="lb-hint" id="cropStatus">Kéo điểm để chỉnh · double-click lên cạnh để thêm điểm · chuột phải lên điểm để xóa.</div>
+</div>
+
+<!-- Camera -->
+<div class="lb" id="camera" hidden>
+  <div class="lb-bar">
+    <b>📷 Chụp ảnh sản phẩm</b><span class="sp"></span>
+    <button id="camSwitch">🔄 Đổi camera</button><button id="camCancel">✕ Đóng</button>
+  </div>
+  <div class="lb-stage" style="cursor:default; flex-direction:column; gap:18px; padding:16px">
+    <video id="camVideo" autoplay playsinline muted style="max-width:94%; max-height:64vh; border-radius:16px; background:#000"></video>
+    <button class="btn" id="camShot" style="font-size:16px; padding:14px 30px; border-radius:999px">⬤ &nbsp;Chụp</button>
+    <div class="muted" id="camMsg" style="color:rgba(255,255,255,.72)"></div>
+  </div>
+</div>
+
+<div id="toast"></div>
+
+<script>
+const $ = (id) => document.getElementById(id);
+const api = (u, o) => fetch(u, o).then((r) => r.json());
+function toast(msg, kind = "ok") {
+  const t = $("toast"); t.textContent = msg; t.className = "show " + kind;
+  clearTimeout(t._t); t._t = setTimeout(() => (t.className = ""), 2600);
+}
+
+// ===================== TABS =====================
+$("tabs").addEventListener("click", (e) => {
+  const b = e.target.closest("button[data-tab]"); if (!b) return;
+  document.querySelectorAll("#tabs button").forEach((x) => x.classList.toggle("active", x === b));
+  document.querySelectorAll(".tab").forEach((s) => s.classList.toggle("active", s.id === "tab-" + b.dataset.tab));
+  if (b.dataset.tab === "frame") { loadObjects(); loadAssets(); }
+});
+
+// ===================== TAB 1: TÁCH NỀN =====================
+let chosen = [];
+$("recover").oninput = (e) => ($("recVal").textContent = e.target.value + "px");
+
+const drop = $("drop");
+drop.onclick = () => $("imgInput").click();
+drop.ondragover = (e) => { e.preventDefault(); drop.classList.add("over"); };
+drop.ondragleave = () => drop.classList.remove("over");
+drop.ondrop = (e) => { e.preventDefault(); drop.classList.remove("over"); addFiles(e.dataTransfer.files); };
+$("imgInput").onchange = (e) => addFiles(e.target.files);
+function addFiles(list) {
+  chosen = chosen.concat([...list].filter((f) => f.type.startsWith("image/")));
+  $("fileList").textContent = chosen.length ? `Đã chọn ${chosen.length} ảnh: ` + chosen.map((f) => f.name).join(", ") : "";
+  $("runBtn").disabled = chosen.length === 0;
+}
+
+// --- Chụp ảnh trực tiếp ---
+let camStream = null, camFacing = "environment";
+function stopCam() { if (camStream) { camStream.getTracks().forEach((t) => t.stop()); camStream = null; } }
+function fallbackCapture() {  // mobile qua HTTP / không có getUserMedia → camera gốc của máy
+  const inp = Object.assign(document.createElement("input"), { type: "file", accept: "image/*" });
+  inp.setAttribute("capture", "environment");
+  inp.onchange = () => addFiles(inp.files);
+  inp.click();
+}
+async function startCam() {
+  stopCam();
+  camStream = await navigator.mediaDevices.getUserMedia({ video: { facingMode: camFacing }, audio: false });
+  $("camVideo").srcObject = camStream;
+}
+$("camBtn").onclick = async () => {
+  if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) { fallbackCapture(); return; }
+  $("camMsg").textContent = ""; $("camera").hidden = false;
+  try { await startCam(); }
+  catch (e) { $("camera").hidden = true; toast("Không mở được camera, dùng camera máy.", "err"); fallbackCapture(); }
+};
+$("camSwitch").onclick = async () => { camFacing = camFacing === "environment" ? "user" : "environment"; try { await startCam(); } catch (e) {} };
+$("camCancel").onclick = () => { stopCam(); $("camera").hidden = true; };
+$("camShot").onclick = () => {
+  const v = $("camVideo"); if (!v.videoWidth) return;
+  const cv = document.createElement("canvas"); cv.width = v.videoWidth; cv.height = v.videoHeight;
+  cv.getContext("2d").drawImage(v, 0, 0);
+  cv.toBlob((blob) => {
+    addFiles([new File([blob], `chup-${Date.now()}.jpg`, { type: "image/jpeg" })]);
+    $("camMsg").textContent = `Đã chụp ${chosen.length} ảnh — bấm Chụp tiếp hoặc Đóng để xử lý.`;
+  }, "image/jpeg", 0.95);
+};
+
+function tab1FD() {
+  const fd = new FormData();
+  fd.append("model", $("model").value);
+  fd.append("anti_blowout", $("antiBlowout").checked);
+  fd.append("recover", $("recover").value);
+  return fd;
+}
+
+$("runBtn").onclick = async () => {
+  const btn = $("runBtn"); btn.disabled = true; btn.innerHTML = '<span class="spinner"></span> Đang xử lý…';
+  $("status").textContent = ""; $("results").innerHTML = "";
+  const fd = tab1FD();
+  fd.append("compare", $("compare").checked);
+  chosen.forEach((f) => fd.append("images", f));
+  try {
+    const data = await api("/api/process", { method: "POST", body: fd });
+    if (data.error) throw new Error(data.error);
+    renderResults(data.results);
+    const ok = data.results.filter((x) => x.ok).length, reused = data.results.filter((x) => x.cached).length;
+    $("status").textContent = `Xong: ${ok}/${data.results.length}` + (reused ? ` · ⚡ ${reused} tái dùng` : "") + ".";
+  } catch (e) { $("status").textContent = "Lỗi: " + e.message; }
+  finally { btn.disabled = false; btn.textContent = "✨ Tách nền"; }
+};
+
+function renderResults(results) {
+  $("results").innerHTML = results.map((r, i) => r.ok
+    ? `<div class="result" data-i="${i}" data-original="${r.original || ""}" data-level="${r.level || ""}" data-poly='${JSON.stringify(r.polygon || [[0,0],[1,0],[1,1],[0,1]])}'>
+         ${r.level ? `<span class="badge-lvl ${r.level}">${r.level}</span>` : ""}
+         <div class="acts">
+           ${r.original ? '<button class="icon-btn act-crop">✎ Vùng</button>' : ""}
+           <button class="icon-btn act-save">💾 Lưu</button>
+         </div>
+         <img class="thumb" src="/output/${r.output}" data-proc="/output/${r.output}" data-orig="${r.original ? "/output/" + r.original : ""}" />
+         <div class="meta"><span>${r.cached ? "⚡ " : ""}${trim(r.name)}</span><a href="/output/${r.output}" download>Tải</a></div>
+         <div class="saverow" hidden>
+           <input type="text" placeholder="Tên object…" value="${objName(r.name)}" />
+           <button class="btn btn-sm act-confirm">Lưu</button>
+         </div>
+       </div>`
+    : `<div class="result err"><div class="meta">${trim(r.name)}${r.level ? " · " + r.level : ""} — ${r.error}</div></div>`
+  ).join("");
+}
+const trim = (s) => (s && s.length > 20 ? s.slice(0, 17) + "…" : s || "");
+const objName = (s) => (s || "object").replace(/\.[^.]+$/, "").slice(0, 30);
+
+// Hành động trên thẻ kết quả (delegation)
+$("results").addEventListener("click", async (e) => {
+  const card = e.target.closest(".result"); if (!card) return;
+  if (e.target.closest(".act-crop")) { openCrop(card); return; }
+  if (e.target.closest(".act-save")) { card.querySelector(".saverow").hidden = false; return; }
+  if (e.target.closest(".act-confirm")) {
+    const name = card.querySelector(".saverow input").value.trim();
+    const out = card.querySelector("img").dataset.proc.split("/").pop();
+    const fd = new FormData(); fd.append("output", out); fd.append("name", name);
+    const d = await api("/api/save-object", { method: "POST", body: fd });
+    if (d.ok) { toast(`Đã lưu object “${d.name}”`); card.querySelector(".saverow").hidden = true; }
+    else toast(d.error || "Lỗi lưu", "err");
+    return;
+  }
+  const img = e.target.closest(".thumb"); if (img) openLightbox(img);
+});
+
+// ===================== LIGHTBOX =====================
+const lbImg = $("lbImg"), lbStage = $("lbStage");
+let lbScale = 1, lbX = 0, lbY = 0, lbProc = "", lbOrig = "", lbShowOrig = false;
+function lbApply() { lbImg.style.transform = `translate(${lbX}px,${lbY}px) scale(${lbScale})`; $("lbZoom").textContent = Math.round(lbScale * 100) + "%"; }
+function lbReset() { lbScale = 1; lbX = 0; lbY = 0; lbApply(); }
+function lbSet() {
+  const src = lbShowOrig && lbOrig ? lbOrig : lbProc; lbImg.src = src;
+  $("lbWhich").textContent = lbShowOrig ? "Ảnh gốc" : "Đã xử lý";
+  $("lbToggle").textContent = lbShowOrig ? "Xem đã xử lý" : "Xem ảnh gốc";
+  $("lbToggle").style.display = lbOrig ? "" : "none"; $("lbDownload").href = src;
+}
+function lbZoom(f) { lbScale = Math.min(8, Math.max(0.2, lbScale * f)); lbApply(); }
+function openLightbox(img) { lbProc = img.dataset.proc; lbOrig = img.dataset.orig || ""; lbShowOrig = false; lbSet(); lbReset(); $("lightbox").hidden = false; }
+$("lbToggle").onclick = () => { lbShowOrig = !lbShowOrig; lbSet(); };
+$("lbIn").onclick = () => lbZoom(1.25); $("lbOut").onclick = () => lbZoom(0.8); $("lbReset").onclick = lbReset;
+$("lbClose").onclick = () => { $("lightbox").hidden = true; lbImg.src = ""; };
+lbStage.addEventListener("wheel", (e) => { e.preventDefault(); lbZoom(e.deltaY < 0 ? 1.12 : 0.89); }, { passive: false });
+lbStage.addEventListener("dblclick", () => (lbScale > 1.05 ? lbReset() : lbZoom(2.2)));
+let lbDrag = false, ldx = 0, ldy = 0;
+lbStage.addEventListener("mousedown", (e) => { lbDrag = true; ldx = e.clientX - lbX; ldy = e.clientY - lbY; lbStage.classList.add("grabbing"); });
+window.addEventListener("mousemove", (e) => { if (!lbDrag) return; lbX = e.clientX - ldx; lbY = e.clientY - ldy; lbApply(); });
+window.addEventListener("mouseup", () => { lbDrag = false; lbStage.classList.remove("grabbing"); });
+window.addEventListener("keydown", (e) => {
+  if (!$("lightbox").hidden) { if (e.key === "Escape") $("lbClose").onclick(); else if (e.key === "+" || e.key === "=") lbZoom(1.25); else if (e.key === "-") lbZoom(0.8); else if (e.key.toLowerCase() === "g" && lbOrig) $("lbToggle").onclick(); }
+  if (!$("cropEditor").hidden && e.key === "Escape") $("cropCancel").onclick();
+});
+
+// ===================== CROP EDITOR (polygon) =====================
+const RECT_POLY = [[0,0],[1,0],[1,1],[0,1]];
+let cropCard = null, cropLevel = "", cropDefault = RECT_POLY, poly = [], dragIdx = -1;
+const cwRect = () => $("cropWrap").getBoundingClientRect();
+function toNorm(e) { const r = cwRect(); return [Math.min(1, Math.max(0, (e.clientX - r.left) / r.width)), Math.min(1, Math.max(0, (e.clientY - r.top) / r.height))]; }
+function segDist(p, a, b) { const dx = b[0]-a[0], dy = b[1]-a[1], L = dx*dx+dy*dy||1e-9; let t = ((p[0]-a[0])*dx+(p[1]-a[1])*dy)/L; t = Math.max(0, Math.min(1, t)); return Math.hypot(p[0]-(a[0]+t*dx), p[1]-(a[1]+t*dy)); }
+function drawPoly() {
+  const r = cwRect(), W = r.width, H = r.height; if (!W || !H) return;
+  const px = poly.map(([x, y]) => [x * W, y * H]);
+  const svg = $("polySvg"); svg.setAttribute("width", W); svg.setAttribute("height", H);
+  $("polyShape").setAttribute("points", px.map((p) => p.join(",")).join(" "));
+  $("polyDim").setAttribute("d", `M0,0 H${W} V${H} H0 Z M` + px.map((p) => p.join(",")).join(" L") + " Z");
+  $("polyHandles").innerHTML = px.map(([x, y], i) => `<circle cx="${x}" cy="${y}" r="7" data-i="${i}"></circle>`).join("");
+}
+function openCrop(card) {
+  cropCard = card; const orig = card.querySelector("img").dataset.orig; if (!orig) return;
+  cropLevel = card.dataset.level || "";
+  try { cropDefault = JSON.parse(card.dataset.poly); } catch (e) { cropDefault = RECT_POLY; }
+  poly = cropDefault.map((p) => p.slice());
+  const im = $("cropImg"); im.onload = drawPoly; im.src = orig;
+  $("cropEditor").hidden = false; if (im.complete) drawPoly();
+}
+$("polyHandles").addEventListener("mousedown", (e) => { const c = e.target.closest("circle"); if (!c) return; e.preventDefault(); e.stopPropagation(); dragIdx = +c.dataset.i; });
+window.addEventListener("mousemove", (e) => { if (dragIdx < 0) return; poly[dragIdx] = toNorm(e); drawPoly(); });
+window.addEventListener("mouseup", () => (dragIdx = -1));
+$("polyHandles").addEventListener("contextmenu", (e) => { const c = e.target.closest("circle"); if (!c) return; e.preventDefault(); if (poly.length <= 3) return; poly.splice(+c.dataset.i, 1); drawPoly(); });
+$("polySvg").addEventListener("dblclick", (e) => {
+  if (e.target.closest("circle")) return; const p = toNorm(e); let best = 0, bd = Infinity;
+  for (let i = 0; i < poly.length; i++) { const d = segDist(p, poly[i], poly[(i + 1) % poly.length]); if (d < bd) { bd = d; best = i; } }
+  poly.splice(best + 1, 0, p); drawPoly();
+});
+$("cropAuto").onclick = () => { poly = cropDefault.map((p) => p.slice()); drawPoly(); };
+$("cropFull").onclick = () => { poly = RECT_POLY.map((p) => p.slice()); drawPoly(); };
+$("cropCancel").onclick = () => ($("cropEditor").hidden = true);
+window.addEventListener("resize", () => { if (!$("cropEditor").hidden) drawPoly(); });
+$("cropApply").onclick = async () => {
+  const btn = $("cropApply"); btn.disabled = true; btn.textContent = "Đang render…";
+  const fd = tab1FD(); fd.append("original", cropCard.dataset.original); fd.append("level", cropLevel); fd.append("poly", JSON.stringify(poly));
+  try {
+    const d = await api("/api/recrop", { method: "POST", body: fd });
+    if (!d.ok) throw new Error(d.error || "lỗi");
+    const url = "/output/" + d.output, img = cropCard.querySelector("img");
+    img.src = url + "?t=" + Date.now(); img.dataset.proc = url;
+    const dl = cropCard.querySelector("a[download]"); if (dl) dl.href = url;
+    $("cropEditor").hidden = true; toast("Đã render lại vùng chọn");
+  } catch (err) { toast("Lỗi: " + err.message, "err"); }
+  finally { btn.disabled = false; btn.textContent = "Render lại vùng chọn"; }
+};
+
+// ===================== TAB 2: GHÉP FRAME =====================
+let activeObj = null, selFrame = null, selWm = null, curBg = "transparent";
+$("wmOpacity").oninput = (e) => { $("opVal").textContent = e.target.value + "%"; renderPreview(); };
+$("wmScale").oninput = (e) => { $("scVal").textContent = e.target.value + "%"; renderPreview(); };
+$("objScale").oninput = (e) => { $("objVal").textContent = e.target.value + "%"; renderPreview(); };
+$("border").oninput = (e) => { $("bdVal").textContent = e.target.value + "px"; renderPreview(); };
+$("wmPos").onchange = renderPreview;
+function selectBg(value, el) {
+  curBg = value;
+  document.querySelectorAll("[data-bg], .sw-custom").forEach((x) => x.classList.remove("on"));
+  if (el) el.classList.add("on");
+  $("pvWrap").style.background = value === "transparent" ? "var(--checker)" : value;
+  renderPreview();
+}
+document.querySelectorAll("[data-bg]").forEach((el) => (el.onclick = () => selectBg(el.dataset.bg, el)));
+$("bgCustom").oninput = (e) => selectBg(e.target.value, e.target.closest(".sw"));
+
+async function loadObjects() {
+  const d = await api("/api/objects");
+  $("objEmpty").style.display = d.items.length ? "none" : "";
+  $("objLib").innerHTML = d.items.map((o) =>
+    `<div class="thumb-item ${activeObj === o.name ? "sel" : ""}" data-name="${o.name}" title="${o.name}">
+       <img src="${o.url}" /><button class="del" data-del-obj="${o.name}">✕</button></div>`).join("");
+}
+$("objLib").addEventListener("click", async (e) => {
+  const del = e.target.closest("[data-del-obj]");
+  if (del) { await fetch("/api/objects/" + del.dataset.delObj, { method: "DELETE" }); if (activeObj === del.dataset.delObj) activeObj = null; loadObjects(); renderPreview(); return; }
+  const it = e.target.closest(".thumb-item"); if (!it) return;
+  activeObj = it.dataset.name;
+  document.querySelectorAll("#objLib .thumb-item").forEach((x) => x.classList.toggle("sel", x === it));
+  renderPreview();
+});
+
+async function loadAssets() {
+  for (const kind of ["frame", "watermark"]) {
+    const d = await api("/api/asset/" + kind);
+    const lib = kind === "frame" ? "frameLib" : "wmLib";
+    const sel = kind === "frame" ? selFrame : selWm;
+    $(lib).innerHTML =
+      d.items.map((a) => `<div class="thumb-item ${sel === a.id ? "sel" : ""}" data-kind="${kind}" data-id="${a.id}"><img src="${a.url}" /><button class="del" data-del-asset="${a.id}" data-k="${kind}">✕</button></div>`).join("") +
+      `<div class="thumb-add" data-add="${kind}">＋</div>`;
+  }
+}
+document.addEventListener("click", async (e) => {
+  const add = e.target.closest("[data-add]");
+  if (add) {
+    const inp = Object.assign(document.createElement("input"), { type: "file", accept: "image/*" });
+    inp.onchange = async () => {
+      const fd = new FormData(); fd.append("kind", add.dataset.add); fd.append("file", inp.files[0]);
+      const d = await api("/api/asset", { method: "POST", body: fd });
+      if (d.ok) { toast("Đã thêm " + add.dataset.add); loadAssets(); }
+    };
+    inp.click(); return;
+  }
+  const del = e.target.closest("[data-del-asset]");
+  if (del) {
+    e.stopPropagation();
+    await fetch(`/api/asset/${del.dataset.k}/${del.dataset.delAsset}`, { method: "DELETE" });
+    if (del.dataset.k === "frame" && selFrame === del.dataset.delAsset) selFrame = null;
+    if (del.dataset.k === "watermark" && selWm === del.dataset.delAsset) selWm = null;
+    loadAssets(); renderPreview(); return;
+  }
+  const it = e.target.closest("#frameLib .thumb-item, #wmLib .thumb-item");
+  if (it) {
+    const kind = it.dataset.kind, id = it.dataset.id;
+    if (kind === "frame") selFrame = selFrame === id ? null : id;
+    else selWm = selWm === id ? null : id;
+    it.parentElement.querySelectorAll(".thumb-item").forEach((x) => x.classList.toggle("sel", x === it && (kind === "frame" ? selFrame : selWm)));
+    renderPreview();
+  }
+});
+
+function assetUrl(kind, id) { return `/api/asset/${kind}/${id}`; }
+function renderPreview() {
+  const has = !!activeObj;
+  $("pvEmpty").style.display = has ? "none" : "";
+  $("saveBtn").disabled = !has;
+  ["pvObj", "pvFrame", "pvWm"].forEach((k) => ($(k).hidden = !has));
+  if (!has) return;
+  const obj = $("pvObj");
+  const newSrc = "/objects/" + activeObj + ".png";
+  if (!obj.src.endsWith(newSrc)) obj.src = newSrc;
+  // object đầy khung (đã lưu tight) → scale theo tỉ lệ + viền để khớp server
+  const sc = (+$("objScale").value) / 100, S = obj.naturalWidth || 1000, B = +$("border").value;
+  const total = S / sc + 2 * B, pct = 100 * S / total;
+  obj.style.width = pct + "%"; obj.style.height = pct + "%";
+  // frame phủ toàn khung
+  if (selFrame) { $("pvFrame").src = assetUrl("frame", selFrame); $("pvFrame").hidden = false; } else $("pvFrame").hidden = true;
+  // watermark
+  const wm = $("pvWm");
+  if (selWm) {
+    wm.hidden = false; wm.src = assetUrl("watermark", selWm);
+    wm.style.width = $("wmScale").value + "%"; wm.style.height = "auto"; wm.style.opacity = $("wmOpacity").value / 100;
+    const pos = $("wmPos").value, m = "3%"; wm.style.inset = "auto"; wm.style.transform = "none";
+    const set = (o) => Object.assign(wm.style, o);
+    if (pos === "southeast") set({ right: m, bottom: m });
+    else if (pos === "southwest") set({ left: m, bottom: m });
+    else if (pos === "northeast") set({ right: m, top: m });
+    else if (pos === "northwest") set({ left: m, top: m });
+    else if (pos === "center") set({ left: "50%", top: "50%", transform: "translate(-50%,-50%)" });
+    else if (pos === "south") set({ left: "50%", bottom: m, transform: "translateX(-50%)" });
+  } else wm.hidden = true;
+}
+$("pvObj").addEventListener("load", renderPreview);
+
+$("saveBtn").onclick = async () => {
+  if (!activeObj) return;
+  const btn = $("saveBtn"); btn.disabled = true; btn.innerHTML = '<span class="spinner"></span> Đang lưu…';
+  const fd = new FormData();
+  fd.append("object", activeObj); fd.append("frame", selFrame || ""); fd.append("watermark", selWm || "");
+  fd.append("bg", curBg); fd.append("obj_scale", $("objScale").value); fd.append("border", $("border").value);
+  fd.append("wm_opacity", $("wmOpacity").value); fd.append("wm_scale", $("wmScale").value); fd.append("wm_pos", $("wmPos").value);
+  try {
+    const d = await api("/api/compose", { method: "POST", body: fd });
+    if (!d.ok) throw new Error(d.error || "lỗi");
+    const el = document.createElement("div"); el.className = "result";
+    el.innerHTML = `<img class="thumb" src="${d.url}" /><div class="meta"><span>✅ ${d.output}</span><a href="${d.url}" download>Tải</a></div>`;
+    $("composed").prepend(el); toast("Đã lưu ảnh ghép: " + d.output);
+  } catch (e) { toast("Lỗi: " + e.message, "err"); }
+  finally { btn.disabled = false; btn.textContent = "💾 Lưu ảnh ghép"; }
+};
+</script>
+</body>
+</html>