/* ============================================================ mode-b.jsx — B 타입: 상품 N장 → AI 합성 1장 → 4종 배너 ============================================================ 흐름: 1) 상품 이미지 N장 업로드 2) AI(Gemini)가 N장을 하나의 정방형 합성 이미지로 만듦 3) 그 합성 이미지가 A타입의 source 역할 → 4종 배너 outpaint ============================================================ */ const { useState, useEffect, useRef, useCallback } = React; const SPECS_OUTPAINT = window.BannerGen.BANNER_SPECS; /* The composed hero image is itself the 5th banner (1:1) — included in export as-is, no outpainting needed. Treated as a "synthetic" spec so the UI can show it alongside the 4 outpainted variants. */ const HERO_SPEC = { id: "HeroSquare", name: "Hero · 합성본 (1:1)", w: 1024, h: 1024, allowed: { x: 0.05, y: 0.05, w: 0.9, h: 0.9 }, anchor: { x: 0.5, y: 0.5 }, rule: "Composed hero — included as-is", negSpace:"", }; const SPECS_B = [HERO_SPEC, ...SPECS_OUTPAINT]; const TWEAK_DEFAULTS_B = /*EDITMODE-BEGIN-B*/{ "variation": "natural", "canvasScale": 0.55, "showZones": false, "showAnchors": true, "showBbox": false, "grainEnabled": true, "apiEnabled": false, "apiEndpoint": "", "pipelineMode": "outpaint", "safePadding": 0, "fitMode": "contain" }/*EDITMODE-END-B*/; /* ============================================================ COMPOSE PROMPT — 베이스 + 연출 디테일 ============================================================ 베이스: 매번 똑같이 적용되는 시스템 레벨 규칙 (제품 보존, 렌더링 스타일, 라벨 텍스트 보존 등). 자주 바꾸지 않음. 연출: 매 작업마다 바뀔 수 있는 구도 디렉션 (상품 배치, 그림자, 분위기 등). 사용자가 자주 편집하는 영역. 호출 시 두 텍스트를 합쳐서 Gemini 에 보낸다. ============================================================ */ // Vertical compose prompt — only priority-marked products const COMPOSE_VERTICAL_DEFAULT = `[제품 보존 (Product Integrity) — 가장 중요] 업로드된 이미지의 형태(Shape), 비율(Proportion), 구조(Structure), 로고 및 CMF(Color, Material, Finish)를 0% 변형(Zero-Deformation) 조건으로 유지할 것. 재해석이나 스타일라이즈를 엄격히 금지함. 상품을 길게 늘리거나 짧게 줄이거나 비율을 임의로 바꾸지 마라. 원본 이미지의 비율을 반드시 100% 유지. 화질개선. 4K화질로 개선. 상품의 세세한 부분들 모두 그대로 유지. 상품이 선명해지도록 개선. 금지 사항: 절대로 상품을 임의로 변경 하지마. 반드시 한국어 텍스트, 영어 텍스트 모두 원본 그대로 유지. 제품 본연의 색도(Color Fidelity)에 간섭하지 않는 5500K 중립 조명 사용. 입체감이 강조된 램브란트 조명 각도. 하이라이팅 강조. [CRITICAL: 한글 지침 보존 및 반영 원칙 (Text Preservation Protocol)] 한글 텍스트 유지: 본 프롬프트에 포함된 모든 한글 설명은 AI의 임의 번역, 변형, 생략 없이 기재된 원문 그대로의 의미를 최종 결과물에 100% 반영해야 함. 지침 준수: 한글로 기술된 세부 묘사와 분위기는 영문 지시어보다 우선하는 가이드라인으로 작용함. All label text must remain exactly identical to the reference image. Text is part of the original packaging artwork. Do not regenerate, reinterpret, correct, enhance or stylize any text. No AI-generated typography. [렌더링 스타일 — Rendering Style] 하이엔드 커머셜 스튜디오 사진 (High-end Commercial Photography). 8K 해상도의 사실적인 텍스처, 정교한 레이 트레이싱(Ray-tracing) 기반의 반사 및 하이라이트 구현. [배경 톤 — Background Tone (Hero 와 정확히 일치)] 배경 톤·색상·분위기는 메인 합성본(Hero, 1:1 이미지) 과 동일해야 함. 배경색은 메인 합성과 동일한 톤을 정확히 매칭. 다른 색이나 분위기 절대 금지. 5500K 중립 조명. 제품 Color Fidelity 보존. Overview (전체 형상 및 공간감) - Concept: 제품의 아이덴티티를 보여주는 히어로 샷(Hero Shots). - Composition: 중앙 정렬, 부유하는 듯한 플로팅(Floating) 레이아웃, 안정적인 여백(Negative Space) 확보. - Lighting: 부드러운 소프트박스 조명을 활용한 전체적인 입체감 강조. 한 장에 상품들이 어우러져 있는 연출. 일렬로 배치 금지. 상품을 선명하게 보정. 상품이 공중에 떠있음. 연한 그림자. [금지사항 재강조] - 상품 비율 변경 금지 (NO aspect ratio change) - 상품 늘리기·줄이기·찌그러뜨리기 금지 (NO stretch / squash / distortion) - 원본과 다른 배경 톤 사용 금지 (background tone must match Hero composition exactly)`; const COMPOSE_BASE_DEFAULT = `[핵심 원칙: 제품 무결성 및 환경 설정] 1. 제품 보존 (Product Integrity): 업로드된 이미지의 형태(Shape), 비율(Proportion), 구조(Structure), 로고 및 CMF(Color, Material, Finish)를 0% 변형(Zero-Deformation) 조건으로 유지할 것. 재해석이나 스타일라이즈를 엄격히 금지함. 2. 렌더링 스타일 (Rendering Style): 하이엔드 커머셜 스튜디오 사진(High-end Commercial Photography). 8K 해상도의 사실적인 텍스처, 정교한 레이 트레이싱(Ray-tracing) 기반의 반사 및 하이라이트 구현. 3. 배경 및 조명 (Background & Lighting): 배경색은 고정값 #E8E9ED를 기준으로 톤온톤(Tone-on-tone) 구성. 제품 본연의 색도(Color Fidelity)에 간섭하지 않는 5500K 중립 조명 사용. Overview (전체 형상 및 공간감) - Concept: 제품의 아이덴티티를 보여주는 히어로 샷(Hero Shots). - Composition: 중앙 정렬, 안정적으로 바닥에 안착한 레이아웃, 안정적인 여백(Negative Space) 확보. - Lighting: 부드러운 소프트박스 조명을 활용한 전체적인 입체감 강조. 8K + photorealistic + clean + no noise. DO NOT modify any other elements of the image. All label text must remain exactly identical to the reference image. Text is part of the original packaging artwork. Do not regenerate, reinterpret, correct, enhance or stylize any text. No AI-generated typography. 제품을 변형하지 말것. 생략 없이 제품 전체를 그대로 구현할 것.`; const COMPOSE_STAGING_DEFAULT = `한 장에 상품들이 어우러져 있는 연출. 일렬로 배치 금지. 상품을 선명하게 보정. 연한 그림자.`; // Combined default (for back-compat with the legacy single-field state). const COMPOSE_PROMPT_DEFAULT = COMPOSE_BASE_DEFAULT + "\n\n[연출 디테일]\n" + COMPOSE_STAGING_DEFAULT; function ModeBApp({ onBackToEntry }) { /* products: [{ id, name, file, dataUrl, img, dim }] */ const [products, setProducts] = useState([]); /* composed: { dataUrl, img, dim } | null */ const [composed, setComposed] = useState(null); /* composedVertical: 우선순위 상품만으로 만든 세로형 전용 합성본 */ const [composedVertical, setComposedVertical] = useState(null); const [composeVerticalLoading, setComposeVerticalLoading] = useState(false); const [composeLoading, setComposeLoading] = useState(false); const [composeError, setComposeError] = useState(null); // 베이스(시스템 규칙) + 연출(자주 변경) 으로 분리. 호출 시 합쳐서 전송. const [composeBase, setComposeBase] = useState(COMPOSE_BASE_DEFAULT); const [composeStaging, setComposeStaging] = useState(COMPOSE_STAGING_DEFAULT); const composePrompt = composeBase.trim() + (composeStaging.trim() ? "\n\n[연출 디테일]\n" + composeStaging.trim() : ""); const baseIsDefault = composeBase.trim() === COMPOSE_BASE_DEFAULT.trim(); const stagingIsDefault = composeStaging.trim() === COMPOSE_STAGING_DEFAULT.trim(); // User must explicitly approve the composed image before we burn credits on // the 4 outpaint calls. Resets to false whenever compose runs again. const [composeApproved, setComposeApproved] = useState(false); // Show prompt editor inline below the preview when user clicks "수정" const [showPromptEditor, setShowPromptEditor] = useState(false); /* After composition, becomes the A-type source pipeline */ const [shotSpec, setShotSpec] = useState(null); const [specLoading, setSpecLoading] = useState(false); const [banners, setBanners] = useState(() => SPECS_B.map(s => ({ id: s.id, status: "idle", progress: 0, dataUrl: null, blob: null, anchor: { ...s.anchor }, scale: 1.0, lastSource: null, lastSpec: null, })) ); const [tab, setTab] = useState("upload"); // upload | compose | spec | banners | api const [selectedId, setSelectedId] = useState(null); const [exporting, setExporting] = useState(false); const [tweaks, setTweak] = window.useTweaks(TWEAK_DEFAULTS_B); const Icon = window.Icon; const apiConfig = { enabled: tweaks.apiEnabled, endpoint: tweaks.apiEndpoint }; /* ---- Add product files ---- */ const addFiles = useCallback(async (files) => { const valid = (Array.from(files || [])).filter(f => f.type.startsWith("image/")); if (!valid.length) return; const loaded = await Promise.all(valid.map(async (file) => { const dataUrl = await new Promise((res, rej) => { const r = new FileReader(); r.onload = () => res(r.result); r.onerror = rej; r.readAsDataURL(file); }); const img = await new Promise((res, rej) => { const i = new Image(); i.onload = () => res(i); i.onerror = rej; i.src = dataUrl; }); return { id: "prod_" + Math.random().toString(36).slice(2, 9), name: file.name, file, dataUrl, img, dim: { w: img.naturalWidth, h: img.naturalHeight }, priority: false, }; })); setProducts(prev => [...prev, ...loaded]); // New uploads invalidate previous composition. setComposed(null); setShotSpec(null); setBanners(SPECS_B.map(s => ({ id: s.id, status: "idle", progress: 0, dataUrl: null, blob: null, anchor: { ...s.anchor }, scale: 1.0, lastSource: null, lastSpec: null, }))); if (tab === "upload" && loaded.length) setTab("compose"); }, [tab]); const removeProduct = useCallback((id) => { setProducts(prev => prev.filter(p => p.id !== id)); setComposed(null); setShotSpec(null); }, []); /* ---- Toggle product priority ---- */ const togglePriority = useCallback((id) => { setProducts(prev => prev.map(p => p.id === id ? { ...p, priority: !p.priority } : p)); setComposed(null); // invalidate composition when priority changes }, []); /* ---- Compose: N products → 1 image ---- */ const runCompose = useCallback(async () => { if (!products.length) return; setComposeLoading(true); setComposeError(null); setComposeApproved(false); try { // 중요도 표시된 상품을 prompt 에 명시 (Gemini 가 그 상품을 더 부각하도록 힌트) const priorityNames = products.filter(p => p.priority).map((p, i) => p.name).join(", "); const promptWithPriority = priorityNames ? composePrompt + `\n\n[중요도 높음 — 다음 상품을 더 부각하고 중앙·전면에 배치할 것]\n${priorityNames}` : composePrompt; const dataUrl = await window.BannerGen.composeProducts( products.map(p => p.dataUrl), { apiConfig, prompt: promptWithPriority, width: 1024, height: 1024 }, ); const img = await new Promise((res, rej) => { const i = new Image(); i.onload = () => res(i); i.onerror = rej; i.src = dataUrl; }); // 중요도 표시 상품이 있으면 별도의 vertical compose 도 생성 (세로형 배너 전용) const priorityProducts = products.filter(p => p.priority); if (priorityProducts.length > 0 && apiConfig.enabled) { setComposeVerticalLoading(true); try { const vUrl = await window.BannerGen.composeProducts( priorityProducts.map(p => p.dataUrl), { apiConfig, prompt: COMPOSE_VERTICAL_DEFAULT, width: 1024, height: 1024 }, ); const vImg = await new Promise((res, rej) => { const i = new Image(); i.onload = () => res(i); i.onerror = rej; i.src = vUrl; }); setComposedVertical({ dataUrl: vUrl, img: vImg, dim: { w: vImg.naturalWidth, h: vImg.naturalHeight }}); } catch (e) { console.warn("vertical compose failed", e); } finally { setComposeVerticalLoading(false); } } else { setComposedVertical(null); } const composedBlob = await (await fetch(dataUrl)).blob(); setComposed({ dataUrl, img, dim: { w: img.naturalWidth, h: img.naturalHeight }}); // Reset downstream; hero banner is marked done immediately since // the composed image *is* the hero banner. setShotSpec(null); setBanners(SPECS_B.map(s => s.id === HERO_SPEC.id ? { id: s.id, status: "done", progress: 100, dataUrl, blob: composedBlob, anchor: { ...s.anchor }, scale: 1.0, lastSource: "compose", lastSpec: "hero", } : { id: s.id, status: "idle", progress: 0, dataUrl: null, blob: null, anchor: { ...s.anchor }, scale: 1.0, lastSource: null, lastSpec: null, } )); setShowPromptEditor(false); } catch (e) { console.error("compose failed", e); setComposeError(e.message || "합성 실패"); } finally { setComposeLoading(false); } }, [products, composeBase, composeStaging, apiConfig]); /* ---- Approve composed image → unlock batch outpaint ---- */ const approveCompose = useCallback(() => { setComposeApproved(true); setTab("banners"); }, []); /* ---- Auto-generate shot_spec after composed image ready ---- */ useEffect(() => { if (!composed || shotSpec) return; let cancelled = false; setSpecLoading(true); window.BannerGen.generateShotSpec(composed.dataUrl).then(s => { if (cancelled) return; setShotSpec(s); setSpecLoading(false); }); return () => { cancelled = true; }; }, [composed, shotSpec]); /* ---- Generate one banner (hybrid by default, legacy on opt-in) ---- */ const generateOne = useCallback(async (specId, opts = {}) => { if (!composed) return; const spec = SPECS_B.find(s => s.id === specId); if (specId === HERO_SPEC.id) return; // hero is already done from compose const current = banners.find(b => b.id === specId); setBanners(prev => prev.map(b => b.id === specId ? { ...b, status: "gen", progress: 0, dataUrl: null } : b)); try { // -------- HYBRID PIPELINE (default) -------- if (tweaks.pipelineMode === "hybrid") { const { canvas, source: gSource, crop } = await window.BannerGen.generateBannerFromMaster(composed.img, spec, { grain: tweaks.grainEnabled, onProgress: (p) => setBanners(prev => prev.map(b => b.id === specId ? { ...b, progress: p } : b)), }); const blob = await window.BannerGen.canvasToBlob(canvas); const dataUrl = canvas.toDataURL("image/png"); const snap = "hybrid:" + spec.id; setBanners(prev => prev.map(b => b.id === specId ? { ...b, status: "done", progress: 100, dataUrl, blob, lastSource: gSource, lastSpec: snap, lastCrop: crop } : b )); return; } // -------- LEGACY: per-size AI outpaint -------- // Ranking, Promo (세로형) → composedVertical 이 있으면 그걸 source 로 const isVertical = specId === "PromotionRankingBanner" || specId === "BeautyPromoBanner"; const sourceComp = (isVertical && composedVertical) ? composedVertical : composed; // 이전 결과 있으면 base 로 사용 — 재호출 시 placement 안 하고 변경분만 const inputDataUrl = current && current.dataUrl ? current.dataUrl : null; const { canvas, source: gSource } = await window.BannerGen.generateBanner( sourceComp.img, sourceComp.dataUrl, spec, shotSpec, { apiConfig, variation: opts.variation || tweaks.variation, anchor: opts.anchor || current.anchor, scale: opts.scale != null ? opts.scale : current.scale, productMargin: 1 - (tweaks.safePadding || 15) / 100, fitMode: "contain", // aspect-preserving; cover 비활성 inputDataUrl, grain: tweaks.grainEnabled, onProgress: (p) => setBanners(prev => prev.map(b => b.id === specId ? { ...b, progress: p } : b)), } ); const blob = await window.BannerGen.canvasToBlob(canvas); const dataUrl = canvas.toDataURL("image/png"); const snap = JSON.stringify({ shared: shotSpec?.shared || null, shot: shotSpec?.shots?.find(s => s.banner === specId) || null, variation: opts.variation || tweaks.variation }); setBanners(prev => prev.map(b => b.id === specId ? { ...b, status: "done", progress: 100, dataUrl, blob, lastSource: gSource, lastSpec: snap } : b )); } catch (e) { console.error("ModeB generateBanner failed", e); setBanners(prev => prev.map(b => b.id === specId ? { ...b, status: "err", progress: 0, errorMsg: e.message || "AI 호출 실패" } : b)); } }, [composed, banners, shotSpec, tweaks, apiConfig]); /* ---- Sequential gen (skips HERO — it's already done from compose) ---- */ const seqRef = useRef(false); const OUTPAINT_SPECS = SPECS_OUTPAINT; // hero excluded const generateAllSequentially = useCallback(async (specs = OUTPAINT_SPECS) => { if (seqRef.current) return; seqRef.current = true; try { for (let i = 0; i < specs.length; i++) { if (specs[i].id === HERO_SPEC.id) continue; await generateOne(specs[i].id); // Hybrid runs locally, no rate-limit delay needed const delay = tweaks.pipelineMode === "hybrid" ? 0 : 12000; if (i < specs.length - 1 && delay > 0) await new Promise(r => setTimeout(r, delay)); } } finally { seqRef.current = false; } }, [generateOne]); const generateChangedOnly = useCallback(async () => { if (seqRef.current) return; const changed = OUTPAINT_SPECS.filter(s => { const b = banners.find(x => x.id === s.id); if (!b || b.status !== "done") return true; const snap = JSON.stringify({ shared: shotSpec?.shared || null, shot: shotSpec?.shots?.find(x => x.banner === s.id) || null, variation: tweaks.variation }); return snap !== b.lastSpec; }); if (!changed.length) return; await generateAllSequentially(changed); }, [banners, shotSpec, tweaks.variation, generateAllSequentially]); /* ---- Generate ONE NEXT outpaint banner (선택된 배너 우선) ---- */ const generateNextOne = useCallback(async () => { if (seqRef.current) return; const snapFor = (specId) => JSON.stringify({ shared: shotSpec?.shared || null, shot: shotSpec?.shots?.find(x => x.banner === specId) || null, variation: tweaks.variation, }); const isPending = (b, specId) => { if (!b || b.status === "gen") return false; if (b.status !== "done") return true; return snapFor(specId) !== b.lastSpec; }; // 1) 선택된 배너 우선 (단 HERO 는 제외) if (selectedId && selectedId !== HERO_SPEC.id) { const sel = banners.find(x => x.id === selectedId); if (isPending(sel, selectedId)) { await generateOne(selectedId); return; } } // 2) 아니면 OUTPAINT_SPECS 순서대로 첫 pending const pending = OUTPAINT_SPECS.find(s => isPending(banners.find(x => x.id === s.id), s.id)); if (!pending) return; await generateOne(pending.id); }, [banners, shotSpec, tweaks.variation, generateOne, selectedId]); /* ---- Anchor drag handler ---- */ const anchorDebounce = useRef({}); const onAnchorChange = useCallback((id, anchor) => { setBanners(prev => prev.map(b => b.id === id ? { ...b, anchor } : b)); if (anchorDebounce.current[id]) clearTimeout(anchorDebounce.current[id]); anchorDebounce.current[id] = setTimeout(() => generateOne(id, { anchor }), 400); }, [generateOne]); /* ---- Export ZIP ---- */ const handleExport = useCallback(async () => { if (!banners.every(b => b.blob)) return; setExporting(true); try { const zip = new JSZip(); const folder = zip.folder("banner-forge-export-b"); const scale = window.BannerGen.RENDER_SCALE || 1; banners.forEach((b, i) => { const spec = SPECS_B[i]; folder.file(`${spec.id}_${spec.w}x${spec.h}@${scale}x.png`, b.blob); }); if (shotSpec) folder.file("shot_spec.json", JSON.stringify(shotSpec, null, 2)); // Save the composed hero source + original products if (composed) { const composedBlob = await (await fetch(composed.dataUrl)).blob(); folder.file("composed_source.png", composedBlob); } const productsFolder = folder.folder("products"); products.forEach(p => productsFolder.file(p.name, p.file)); if (composePrompt) folder.file("compose_prompt.txt", composePrompt); if (composeBase) folder.file("compose_base.txt", composeBase); if (composeStaging) folder.file("compose_staging.txt", composeStaging); const blob = await zip.generateAsync({ type: "blob" }); const url = URL.createObjectURL(blob); const a = document.createElement("a"); a.href = url; const stamp = new Date().toISOString().replace(/[:.]/g, "-").slice(0, 16); a.download = `banner-export-B-${stamp}.zip`; document.body.appendChild(a); a.click(); a.remove(); setTimeout(() => URL.revokeObjectURL(url), 4000); } finally { setExporting(false); } }, [banners, shotSpec, composed, products, composeBase, composeStaging]); /* ---- Derived ---- */ const doneCount = banners.filter(b => b.status === "done").length; const genCount = banners.filter(b => b.status === "gen").length; const errCount = banners.filter(b => b.status === "err").length; const totalCount = banners.length; const changedCount = banners.filter(b => { if (b.status !== "done") return true; const snap = JSON.stringify({ shared: shotSpec?.shared || null, shot: shotSpec?.shots?.find(s => s.banner === b.id) || null, variation: tweaks.variation }); return snap !== b.lastSpec; }).length; /* ============================================================ Render ============================================================ */ return (
{/* ---- Sidebar ---- */}
{/* ===== Upload tab ===== */} {tab === "upload" && (
1 상품 이미지 업로드
{products.length > 0 && (
· 업로드 ({products.length})
{products.map((p, i) => (
{p.priority && ★} {p.name}
{p.dim.w}×{p.dim.h} {p.priority && HIGH PRIORITY}
))}
)}
)} {/* ===== Compose tab ===== */} {tab === "compose" && (
{products.length === 0 ? (
먼저 상품 이미지를 업로드해주세요.
) : ( <>
2 AI 합성 (1회 호출)
{products.length}개 상품 → 1장의 정방향 합성 이미지. 합성본이 마음에 들면 승인 후 4종 배너 outpaint(추가 4회 호출)가 진행됩니다.
베이스 프롬프트 {baseIsDefault ? "DEFAULT" : "CUSTOM"}