feat: freeform product/service prompt (textarea + 10 preset chips)

aether_ad/llm/prompts/generate_genome_from_prompt.txt

@@ -0,0 +1,66 @@
+[역할] 당신은 AETHER-Ad Genesis의 Genome Generator다.
+사용자의 자유로운 한 줄 프롬프트(제품 또는 서비스)에서 완전한 ProductGenome JSON 객체 하나를 생성한다.
+
+[사용자 프롬프트]
+{prompt}
+
+[과제]
+위 프롬프트에서 아래 필드를 스스로 유추·창작하여 하나의 JSON을 만든다.
+- brand: 입력에 브랜드명이 명시되면 그대로. 없으면 카테고리에 어울리는 가상 브랜드를 **새로 창작**.
+  실존 브랜드명(스타벅스/삼성/나이키/현대/애플/하이트 등) 사용 **절대 금지**.
+- category: 한국어 카테고리 (제품 또는 서비스 모두 가능 — "원두 커피", "러닝화", "O2O 세탁 서비스", "온라인 강의" 등).
+- price_tier: budget | mid | premium | luxury 중 하나 — 프롬프트의 톤에서 추정.
+- functional_atoms: **3~6개**. 입력에 부품/구성요소가 명시되면 그대로 사용. 없으면 해당 제품·서비스의 전형 핵심 요소를 추출·창작.
+  서비스 카테고리라면 "접점(touchpoint)", "인터페이스", "약속된 시간" 등 추상 요소도 atom으로 가능.
+
+[엄수 규칙 — 형식]
+1. 출력은 **오직 JSON 객체 하나**. 다른 텍스트·주석·해설 일체 금지.
+2. 첫 글자는 `{{`, 마지막 글자는 `}}`.
+3. Markdown 코드 펜스(```json …```) **금지** — 순수 JSON만.
+4. 한국어 기반. 사고 과정·"사용자가…"·"The user is…" 등 일체 금지.
+
+[엄수 규칙 — 스키마]
+- 각 `functional_atom`:
+  - `id`: "F01_english_snake" 형식 (F + 2자리 숫자 + 영문 snake_case).
+  - `name`: 한국어 이름.
+  - `literal`: 문자 그대로의 기능/역할.
+  - `abstract_potentials`: **정확히 3개** — 은유·상징·문화적 함의 (기능 반복 금지, 시적 수준).
+  - `scamper_variants`: S, C, A, M, P, E, R 각 키에 **짧은 한국어 1개**씩.
+  - `narrative_affordance`: "low" | "medium" | "high".
+  - `taboo_proximity`: "none" | "low" | "medium" | "high".
+- `sensory_signatures`: visual / auditory / tactile / olfactory / kinesthetic 각 1개 한국어.
+- `cultural_symbols.korean` 2개, `cultural_symbols.global` 1개.
+- `ludic_potential` 2개.
+- `physical_parts`: atom 수 이상의 이름 나열.
+
+[출력 스키마]
+{{
+  "product_id": "auto_generated_slug",
+  "brand": "...",
+  "category": "...",
+  "price_tier": "premium",
+  "functional_atoms": [
+    {{
+      "id": "F01_xxx",
+      "name": "부품명",
+      "literal": "문자 기능",
+      "abstract_potentials": ["...", "...", "..."],
+      "scamper_variants": {{
+        "S": [".."], "C": [".."], "A": [".."],
+        "M": [".."], "P": [".."], "E": [".."], "R": [".."]
+      }},
+      "narrative_affordance": "high",
+      "taboo_proximity": "none"
+    }}
+  ],
+  "physical_parts": ["...", "..."],
+  "sensory_signatures": {{
+    "visual": ["..."], "auditory": ["..."], "tactile": ["..."],
+    "olfactory": ["..."], "kinesthetic": ["..."]
+  }},
+  "cultural_symbols": {{ "korean": ["..", ".."], "global": [".."] }},
+  "ludic_potential": ["...", "..."],
+  "taboo_proximity": "none"
+}}
+
+JSON 객체 하나만 출력.

app.py

@@ -2,6 +2,7 @@
 
 from __future__ import annotations
 
+import hashlib
 import json
 import logging
 import os
@@ -49,6 +50,10 @@ CONTEXT = load_context(TENSIONS_PATH)
 CUSTOM_PRODUCTS: dict[str, ProductGenome] = {}
 _CUSTOM_LOCK = threading.Lock()
 
+# Prompt-hash → product_id cache so identical freeform prompts re-use expanded genomes.
+_PROMPT_CACHE: dict[str, str] = {}
+_PROMPT_LOCK = threading.Lock()
+
 
 def _slugify(text: str) -> str:
     """Turn an arbitrary Korean/English string into a snake_case ASCII id."""
@@ -247,6 +252,97 @@ async def delete_custom(product_id: str) -> dict[str, bool]:
     return {"removed": removed}
 
 
+class FreeformProductPrompt(BaseModel):
+    prompt: str = Field(min_length=3, max_length=600)
+    backend: Literal["fireworks", "hf"] = "fireworks"
+    model: str | None = None
+
+
+@app.post("/api/products/from_prompt")
+async def from_prompt(req: FreeformProductPrompt) -> dict[str, Any]:
+    """Take a freeform product/service prompt, expand into a ProductGenome.
+
+    Results are cached by SHA-256(prompt) so the same prompt is expanded once
+    per Space lifetime. Returns the same summary shape as /api/products.
+    """
+    text = req.prompt.strip()
+    key = hashlib.sha256(text.encode("utf-8")).hexdigest()[:16]
+
+    with _PROMPT_LOCK:
+        cached_pid = _PROMPT_CACHE.get(key)
+    if cached_pid:
+        with _CUSTOM_LOCK:
+            genome = CUSTOM_PRODUCTS.get(cached_pid)
+        if genome is not None:
+            return _genome_summary(genome, custom=True)
+
+    if req.backend == "fireworks" and not os.getenv("FIREWORKS_API_KEY"):
+        raise HTTPException(status_code=400, detail="FIREWORKS_API_KEY not set")
+    if req.backend == "hf" and not os.getenv("HF_TOKEN"):
+        raise HTTPException(status_code=400, detail="HF_TOKEN not set")
+    try:
+        llm = (
+            FireworksKimiBackend(model=req.model or None)
+            if req.backend == "fireworks"
+            else HFInferenceBackend(model=req.model or None)
+        )
+    except Exception as e:
+        log.exception("backend init failed")
+        raise HTTPException(status_code=500, detail=f"Backend init failed: {e}") from e
+
+    prompt_tpl = _load_prompt("generate_genome_from_prompt.txt")
+    prompt = prompt_tpl.format(prompt=text)
+
+    try:
+        raw = await run_in_threadpool(llm.complete, prompt, 16384, 0.6)
+    except Exception as e:
+        log.exception("llm.complete failed for genome from_prompt")
+        raise HTTPException(status_code=502, detail=f"LLM failed: {e}") from e
+
+    cleaned, _ = strip_reasoning(raw)
+    body = cleaned or raw
+
+    try:
+        data = _extract_json_object(body)
+    except Exception as e:
+        log.warning("genome JSON parse failed: %s\n--raw--\n%s", e, raw[:2000])
+        raise HTTPException(
+            status_code=422,
+            detail="LLM did not return valid JSON. Try rephrasing the prompt "
+                   "with brand · category · 부품 hints.",
+        ) from e
+
+    brand_hint = str(data.get("brand") or "custom")
+    base_pid = _slugify(brand_hint)
+    pid = base_pid
+    n = 1
+    with _CUSTOM_LOCK:
+        while pid in CUSTOM_PRODUCTS:
+            n += 1
+            pid = f"{base_pid}_{n}"
+    data["product_id"] = pid
+    data.setdefault("brand", brand_hint)
+    data.setdefault("category", "custom")
+    data.setdefault("price_tier", "premium")
+
+    try:
+        genome = ProductGenome.model_validate(data)
+    except Exception as e:
+        log.warning("genome validation failed: %s\n--data--\n%s", e, json.dumps(data, ensure_ascii=False)[:2000])
+        raise HTTPException(
+            status_code=422,
+            detail=f"Expanded genome failed schema validation: {e}",
+        ) from e
+
+    with _CUSTOM_LOCK:
+        CUSTOM_PRODUCTS[pid] = genome
+    with _PROMPT_LOCK:
+        _PROMPT_CACHE[key] = pid
+
+    log.info("registered custom product %s (from prompt, %d atoms)", pid, len(genome.functional_atoms))
+    return _genome_summary(genome, custom=True)
+
+
 @app.get("/api/tensions")
 async def tensions() -> list[dict[str, Any]]:
     return [t.model_dump() for t in CONTEXT.tension_archetypes]

static/app.js

@@ -16,87 +16,38 @@ const _post = (url, body) => fetch(url, {
 });
 
 const API = {
-  meta:      ()     => fetch('/api/meta').then(r => r.json()),
-  products:  ()     => fetch('/api/products').then(r => r.json()),
-  tensions:  ()     => fetch('/api/tensions').then(r => r.json()),
-  rules:     ()     => fetch('/api/rules').then(r => r.json()),
-  generate:  (body) => _post('/api/generate', body),
-  expand:    (body) => _post('/api/products/expand', body),
+  meta:        ()     => fetch('/api/meta').then(r => r.json()),
+  tensions:    ()     => fetch('/api/tensions').then(r => r.json()),
+  rules:       ()     => fetch('/api/rules').then(r => r.json()),
+  generate:    (body) => _post('/api/generate', body),
+  fromPrompt:  (body) => _post('/api/products/from_prompt', body),
 };
 
-const PRESETS = {
-  coffee: {
-    brand: 'NOVA-Bean', category: '원두 커피', price_tier: 'premium',
-    parts: [
-      { name: '원두', description: '로스팅된 커피 콩' },
-      { name: '그라인더', description: '원두를 가는 장치' },
-      { name: '필터', description: '커피 가루를 걸러내는 종이/천' },
-      { name: '추출수', description: '92~96℃의 정제수' },
-      { name: '잔', description: '커피를 담는 세라믹 컵' },
-    ],
-  },
-  phone: {
-    brand: 'AETHER-Phone', category: '스마트폰', price_tier: 'premium',
-    parts: [
-      { name: '디스플레이', description: '6.3인치 OLED 터치 패널' },
-      { name: '카메라', description: '후면 트리플 카메라' },
-      { name: '배터리', description: '4500mAh 리튬이온 배터리' },
-      { name: '프로세서', description: '자체 설계 AI 칩셋' },
-      { name: '진동모터', description: '햅틱 피드백용 미니 모터' },
-    ],
-  },
-  sneaker: {
-    brand: 'PULSE-Run', category: '러닝화', price_tier: 'mid',
-    parts: [
-      { name: '미드솔', description: '발포폼 완충재' },
-      { name: '아웃솔', description: '고무 접지면' },
-      { name: '어퍼', description: '통기성 니트 직물' },
-      { name: '끈', description: '라운드 레이스' },
-      { name: '뒤꿈치컵', description: '아킬레스를 감싸는 TPU' },
-    ],
-  },
-  beer: {
-    brand: 'HOP-Haru', category: '수제맥주 IPA', price_tier: 'mid',
-    parts: [
-      { name: '병', description: '갈색 유리 330ml' },
-      { name: '뚜껑', description: '크라운 캡' },
-      { name: '거품', description: '상부 하얀 헤드' },
-      { name: '라벨', description: '가상 브랜드 레터링' },
-      { name: '홉', description: '쓴맛과 시트러스 향' },
-    ],
-  },
-  cosmetic: {
-    brand: 'GLOW-Han', category: '스킨케어 앰플', price_tier: 'luxury',
-    parts: [
-      { name: '스포이드', description: '유리 드로퍼' },
-      { name: '병', description: '갈색 자외선 차단 유리' },
-      { name: '세럼', description: '점성 있는 투명 액체' },
-      { name: '향', description: '한방 허브 노트' },
-      { name: '케이스', description: '한지 질감 외곽 박스' },
-    ],
-  },
-  car: {
-    brand: 'SPIRA-EV', category: '전기차', price_tier: 'luxury',
-    parts: [
-      { name: '배터리팩', description: '차체 바닥 일체형' },
-      { name: '모터', description: '듀얼 퍼머넌트 마그넷' },
-      { name: '스크린', description: '17인치 중앙 터치' },
-      { name: '핸들', description: '요크 형 스티어링' },
-      { name: '충전 포트', description: '800V 급속 충전' },
-    ],
-  },
+/* Preset prompt strings — one-liners for the textarea. */
+const PROMPT_PRESETS = {
+  watch:    '아날로그 손목시계 AETHER-A · 용두, 초침, 사파이어 크리스탈, 방수, 가죽 스트랩',
+  coffee:   '수제 로스팅 원두 커피 NOVA-Bean · 원두, 그라인더, 필터, 추출수, 세라믹 잔',
+  phone:    '스마트폰 AETHER-Phone · OLED 디스플레이, 트리플 카메라, 배터리, AI 칩셋, 진동모터',
+  sneaker:  '러닝화 PULSE-Run · 미드솔 폼, 아웃솔 고무, 니트 어퍼, 레이스, TPU 뒤꿈치컵',
+  beer:     '수제 IPA 맥주 HOP-Haru · 갈색 병, 크라운 캡, 헤드 거품, 라벨, 홉',
+  cosmetic: '스킨케어 앰플 GLOW-Han · 유리 스포이드, 갈색 자외선 병, 세럼, 한방 허브 향, 한지 박스',
+  car:      '전기차 SPIRA-EV · 바닥 배터리팩, 듀얼 마그넷 모터, 17인치 스크린, 요크 핸들, 800V 충전포트',
+  laundry:  'O2O 프리미엄 세탁 서비스 MOON-Fold · 수거기사, 앱 실시간 알림, 비닐 커버, 향기 캡슐, 옷걸이',
+  edu:      '온라인 코딩 부트캠프 CODE-Muze · 영상 강의, 과제 피드백, 1:1 코드리뷰, 슬랙 방, 수료증',
+  banking:  '모바일 은행 앱 HANA-Flow · 홈 화면 위젯, 송금 버튼, 생체 인증, 알림 배너, 챗봇',
 };
 
 let TENSIONS = [];
-let PRODUCTS = [];
 let CHARTS = [];
 let PIPELINE_TIMER = null;
+let CURRENT_PRODUCT = null;   // {product_id, brand, category, price_tier, atom_count, atoms}
+let LAST_PROMPT = null;       // string for which CURRENT_PRODUCT was expanded
 
 document.addEventListener('DOMContentLoaded', init);
 
 async function init() {
   wireInputs();
-  await Promise.all([loadMeta(), loadProducts(), loadTensions(), loadRules()]);
+  await Promise.all([loadMeta(), loadTensions(), loadRules()]);
 }
 
 async function loadMeta() {
@@ -117,29 +68,6 @@ async function loadMeta() {
   } catch (e) { console.error('meta failed', e); }
 }
 
-async function loadProducts() {
-  PRODUCTS = await API.products();
-  const sel = $('#productSel'); sel.innerHTML = '';
-  PRODUCTS.forEach(p => {
-    const o = document.createElement('option');
-    o.value = p.product_id;
-    o.textContent = `${p.brand} · ${p.category}`;
-    sel.appendChild(o);
-  });
-  updateProductMeta();
-}
-
-function updateProductMeta() {
-  const pid = $('#productSel').value;
-  const p = PRODUCTS.find(x => x.product_id === pid);
-  if (!p) return;
-  const atomList = (p.atoms || []).map(a => a.name).join(' · ');
-  $('#productMeta').innerHTML = `
-    <strong>${p.product_id}</strong> · tier: <strong>${p.price_tier || '—'}</strong> · ${p.atom_count} functional atoms
-    <br/><span style="color: var(--text-subtle);">${atomList}</span>
-  `;
-}
-
 async function loadTensions() {
   TENSIONS = await API.tensions();
   const sel = $('#tensionSel'); sel.innerHTML = '';
@@ -160,7 +88,8 @@ function updateGreimas() {
   $('[data-pos="s2"]').textContent  = sq.S2;
   $('[data-pos="ns1"]').textContent = sq.not_S1;
   $('[data-pos="ns2"]').textContent = sq.not_S2;
-  $('#tensionPayoff').innerHTML = `${escapeHtml(t.description || '')}<br/><strong>payoff:</strong> ${escapeHtml(t.emotional_payoff)}`;
+  $('#tensionPayoff').innerHTML =
+    `${escapeHtml(t.description || '')}<br/><strong>payoff:</strong> ${escapeHtml(t.emotional_payoff)}`;
 }
 
 async function loadRules() {
@@ -183,145 +112,85 @@ async function loadRules() {
 }
 
 function wireInputs() {
-  $('#productSel').addEventListener('change', updateProductMeta);
   $('#tensionSel').addEventListener('change', updateGreimas);
   $('#nSeeds').addEventListener('input', e => $('#nSeedsVal').textContent = e.target.value);
   $('#topK').addEventListener('input',   e => $('#topKVal').textContent   = e.target.value);
   $('#backendSel').addEventListener('change', syncBackendPlaceholder);
   $('#genBtn').addEventListener('click', runGenerate);
-  wireModal();
-}
 
-/* ── Custom product modal ─────────────────────────────────── */
-
-function wireModal() {
-  $('#newProductBtn').addEventListener('click', openModal);
-  $('#productModal').querySelectorAll('[data-close]').forEach(el => {
-    el.addEventListener('click', closeModal);
-  });
-  document.addEventListener('keydown', e => {
-    if (e.key === 'Escape' && !$('#productModal').hidden) closeModal();
-  });
-  $('#npAddPart').addEventListener('click', () => addPartRow('', ''));
-  $('#npSubmit').addEventListener('click', submitCustomProduct);
-  $$('.preset-chip').forEach(btn => {
-    btn.addEventListener('click', () => applyPreset(btn.dataset.preset));
+  $('#productPrompt').addEventListener('input', () => {
+    if ($('#productPrompt').value.trim() !== LAST_PROMPT) {
+      setStatus('idle', 'Generate를 누르면 Kimi-K2P6가 genome을 확장합니다.');
+    }
   });
-  // Seed with 2 empty rows
-  addPartRow('', '');
-  addPartRow('', '');
-}
 
-function openModal() {
-  $('#productModal').hidden = false;
-  $('#npErr').hidden = true;
-  document.body.style.overflow = 'hidden';
-  setTimeout(() => $('#npBrand').focus(), 50);
-}
-
-function closeModal() {
-  $('#productModal').hidden = true;
-  document.body.style.overflow = '';
-}
-
-function addPartRow(name, desc) {
-  const rows = $$('#npParts .part-row');
-  if (rows.length >= 8) return;
-  const row = document.createElement('div');
-  row.className = 'part-row';
-  row.innerHTML = `
-    <input type="text" class="part-name" placeholder="부품 이름" value="${escapeAttr(name)}" maxlength="30" />
-    <input type="text" class="part-desc" placeholder="한 줄 설명 (선택)" value="${escapeAttr(desc)}" maxlength="80" />
-    <button type="button" class="part-del" title="삭제">✕</button>
-  `;
-  row.querySelector('.part-del').addEventListener('click', () => {
-    if ($$('#npParts .part-row').length > 2) row.remove();
-    updatePartCount();
+  $$('.preset-chip-inline').forEach(btn => {
+    btn.addEventListener('click', () => {
+      const key = btn.dataset.preset;
+      const val = PROMPT_PRESETS[key];
+      if (val) {
+        $('#productPrompt').value = val;
+        $('#productPrompt').dispatchEvent(new Event('input'));
+        $('#productPrompt').focus();
+      }
+    });
   });
-  $('#npParts').appendChild(row);
-  updatePartCount();
 }
 
-function updatePartCount() {
-  const n = $$('#npParts .part-row').length;
-  $('#npPartCount').textContent = `(${n}/8)`;
+function syncBackendPlaceholder() {
+  const v = $('#backendSel').value;
+  const placeholders = {
+    fireworks: 'accounts/fireworks/models/kimi-k2p6',
+    hf:        'Qwen/Qwen2.5-72B-Instruct',
+    none:      '(not used)',
+  };
+  $('#modelIn').placeholder = placeholders[v] || '';
 }
 
-function applyPreset(key) {
-  const p = PRESETS[key];
-  if (!p) return;
-  $('#npBrand').value = p.brand;
-  $('#npCategory').value = p.category;
-  $('#npTier').value = p.price_tier;
-  $('#npParts').innerHTML = '';
-  p.parts.forEach(pt => addPartRow(pt.name, pt.description));
-  $('#npErr').hidden = true;
+function setStatus(kind, html) {
+  $('#productStatus .status-dot').className = `status-dot status-${kind}`;
+  $('#productStatus .status-text').innerHTML = html;
 }
 
-async function submitCustomProduct() {
-  const brand    = $('#npBrand').value.trim();
-  const category = $('#npCategory').value.trim();
-  const tier     = $('#npTier').value;
-  const parts = $$('#npParts .part-row').map(row => ({
-    name: row.querySelector('.part-name').value.trim(),
-    description: row.querySelector('.part-desc').value.trim(),
-  })).filter(p => p.name);
-
-  if (!brand)    return showModalErr('브랜드를 입력하세요. (가상 브랜드만)');
-  if (!category) return showModalErr('카테고리를 입력하세요.');
-  if (parts.length < 2) return showModalErr('부품을 2개 이상 입력하세요.');
+/** Expand the prompt into a ProductGenome via LLM.  Cached by (prompt text) locally. */
+async function ensureProductReady() {
+  const text = $('#productPrompt').value.trim();
+  if (!text) throw new Error('제품 또는 서비스 설명을 입력하세요.');
+  if (CURRENT_PRODUCT && LAST_PROMPT === text) return CURRENT_PRODUCT;
 
   const backend = $('#backendSel').value === 'none' ? 'fireworks' : $('#backendSel').value;
-
-  $('#npSubmit').disabled = true;
-  $('#npSubmit .btn-spinner').hidden = false;
-  $('#npSubmit .btn-label').textContent = 'LLM 확장 중… (30~60s)';
-  $('#npErr').hidden = true;
+  setStatus('loading', '🧬 Kimi-K2P6가 genome을 확장 중… (30~60초)');
 
   try {
-    const result = await API.expand({ brand, category, price_tier: tier, parts, backend });
-    PRODUCTS.push(result);
-    const sel = $('#productSel');
-    const opt = document.createElement('option');
-    opt.value = result.product_id;
-    opt.textContent = `${result.brand} · ${result.category}  [custom]`;
-    sel.appendChild(opt);
-    sel.value = result.product_id;
-    updateProductMeta();
-    closeModal();
-  } catch (err) {
-    const msg = err && err.message ? err.message : String(err);
-    showModalErr(`❌ 확장 실패: ${msg}`);
-  } finally {
-    $('#npSubmit').disabled = false;
-    $('#npSubmit .btn-spinner').hidden = true;
-    $('#npSubmit .btn-label').textContent = '→ LLM으로 확장';
+    const product = await API.fromPrompt({ prompt: text, backend });
+    CURRENT_PRODUCT = product;
+    LAST_PROMPT = text;
+    const atoms = (product.atoms || []).map(a => a.name).join(' · ');
+    setStatus('ready',
+      `✓ <strong>${escapeHtml(product.brand)}</strong> · ${escapeHtml(product.category)} · ${product.atom_count} atoms` +
+      (atoms ? `<br/><span style="color: var(--text-subtle); font-size: 11px;">${escapeHtml(atoms)}</span>` : '')
+    );
+    return product;
+  } catch (e) {
+    setStatus('error', `❌ 확장 실패: ${escapeHtml(e.message || String(e))}`);
+    throw e;
   }
 }
 
-function showModalErr(msg) {
-  const box = $('#npErr');
-  box.hidden = false;
-  box.textContent = msg;
-}
-
-function escapeAttr(s) {
-  return String(s || '').replace(/"/g, '&quot;');
-}
+async function runGenerate() {
+  $('#errBox').hidden = true;
 
-function syncBackendPlaceholder() {
-  const v = $('#backendSel').value;
-  const placeholders = {
-    fireworks: 'accounts/fireworks/models/kimi-k2p6',
-    hf:        'Qwen/Qwen2.5-72B-Instruct',
-    none:      '(not used)',
-  };
-  $('#modelIn').placeholder = placeholders[v] || '';
-}
+  let product;
+  try {
+    product = await ensureProductReady();
+  } catch (err) {
+    $('#errBox').hidden = false;
+    $('#errBox').textContent = `❌ ${err.message || err}`;
+    return;
+  }
 
-async function runGenerate() {
   const body = {
-    product_id: $('#productSel').value,
+    product_id: product.product_id,
     tension_id: $('#tensionSel').value,
     persona:    $('#personaIn').value.trim() || '일반 소비자',
     duration:   parseInt($$('input[name="duration"]').find(r => r.checked).value, 10),
@@ -333,7 +202,6 @@ async function runGenerate() {
   };
 
   setRunning(true);
-  $('#errBox').hidden = true;
   $('#emptyState').style.display = 'none';
   animatePipeline();
 
@@ -346,8 +214,7 @@ async function runGenerate() {
     const msg = err && err.message ? err.message : String(err);
     $('#errBox').hidden = false;
     $('#errBox').textContent = `❌ ${msg}`;
-    if (!$('#summaryBar').hidden) { /* keep previous results visible */ }
-    else $('#emptyState').style.display = '';
+    if ($('#summaryBar').hidden) $('#emptyState').style.display = '';
     console.error(err);
   } finally {
     setRunning(false);
@@ -393,7 +260,9 @@ function renderResults(data) {
   $('#sumCount').textContent   = data.summary.count;
   $('#sumAvg').textContent     = (data.summary.avg_final || 0).toFixed(3);
   $('#sumTop').textContent     = (data.summary.top_final || 0).toFixed(3);
-  $('#sumBackend').textContent = data.summary.backend + (data.summary.model ? ' · ' + data.summary.model.split('/').pop() : '');
+  $('#sumBackend').textContent =
+    data.summary.backend +
+    (data.summary.model ? ' · ' + data.summary.model.split('/').pop() : '');
 
   CHARTS.forEach(c => { try { c.destroy(); } catch(_){} });
   CHARTS = [];
@@ -470,14 +339,14 @@ function renderSeedCard(s, rank) {
     <div class="scores-section">
       <div class="radar-wrap"><canvas></canvas></div>
       <div class="scores-table">
-        ${scoreItem('Novelty',        score.novelty)}
-        ${scoreItem('Utility',        score.utility)}
-        ${scoreItem('Affect',         score.affect)}
-        ${scoreItem('Humor/Pathos',   score.humor_or_pathos)}
-        ${scoreItem('Surprise',       score.surprise)}
-        ${scoreItem('Risk',           score.risk, { risk: true })}
-        ${scoreItem('Gating',         (score.gating_passed || 0) + '/5', { raw: true })}
-        ${scoreItem('Final',          score.final, { bold: true })}
+        ${scoreItem('Novelty',      score.novelty)}
+        ${scoreItem('Utility',      score.utility)}
+        ${scoreItem('Affect',       score.affect)}
+        ${scoreItem('Humor/Pathos', score.humor_or_pathos)}
+        ${scoreItem('Surprise',     score.surprise)}
+        ${scoreItem('Risk',         score.risk, { risk: true })}
+        ${scoreItem('Gating',       (score.gating_passed || 0) + '/5', { raw: true })}
+        ${scoreItem('Final',        score.final, { bold: true })}
       </div>
     </div>
   `;
@@ -506,10 +375,10 @@ function renderSeedCard(s, rank) {
       scales: {
         r: {
           suggestedMin: 0, suggestedMax: 1,
-          ticks: { display: false, stepSize: 0.25 },
-          grid:       { color: '#e6e9f0' },
-          angleLines: { color: '#e6e9f0' },
-          pointLabels:{ font: { size: 10, weight: '600' }, color: '#475569' },
+          ticks:       { display: false, stepSize: 0.25 },
+          grid:        { color: '#e6e9f0' },
+          angleLines:  { color: '#e6e9f0' },
+          pointLabels: { font: { size: 10, weight: '600' }, color: '#475569' },
         },
       },
     },
@@ -564,8 +433,8 @@ function renderTicks(duration) {
 function scoreItem(label, val, opts = {}) {
   const v = opts.raw ? val : (typeof val === 'number' ? val.toFixed(3) : val);
   const style = [];
-  if (opts.risk && Number(val) > 0)   style.push('color: var(--danger);');
-  if (opts.bold)                      style.push('color: var(--primary); font-size: 15px;');
+  if (opts.risk && Number(val) > 0) style.push('color: var(--danger);');
+  if (opts.bold)                    style.push('color: var(--primary); font-size: 15px;');
   return `
     <div class="score-item">
       <span class="score-item-label">${label}</span>

static/index.html

@@ -37,15 +37,27 @@
   <aside class="sidebar">
     <div class="card">
       <div class="card-header">
-        <h2><span class="step">1</span>Product Genome</h2>
+        <h2><span class="step">1</span>Product / Service <small>· 자유 프롬프트</small></h2>
       </div>
       <div class="field">
-        <label for="productSel">Product</label>
-        <div class="product-row">
-          <select id="productSel"></select>
-          <button type="button" id="newProductBtn" class="btn-mini" title="새 제품 추가">＋</button>
+        <label for="productPrompt">제품 또는 서비스를 자유롭게 입력하세요</label>
+        <textarea id="productPrompt" rows="3" placeholder="예: 수제맥주 HOP-Haru · 병, 크라운 캡, 헤드 거품, 라벨, 홉&#10;예: 전기차 SPIRA-EV · 배터리팩, 듀얼 모터, 17인치 스크린, 요크 핸들&#10;예: O2O 세탁 서비스 MOON-Fold · 수거기사, 앱 알림, 비닐 커버, 향기 캡슐&#10;예: 온라인 코딩 강의 CODE-Muze · 영상, 과제, 코드리뷰, 슬랙 방, 수료증"></textarea>
+        <div class="product-presets">
+          <button type="button" class="preset-chip-inline" data-preset="watch">⌚ 시계</button>
+          <button type="button" class="preset-chip-inline" data-preset="coffee">☕ 커피</button>
+          <button type="button" class="preset-chip-inline" data-preset="phone">📱 폰</button>
+          <button type="button" class="preset-chip-inline" data-preset="sneaker">👟 러닝화</button>
+          <button type="button" class="preset-chip-inline" data-preset="beer">🍺 맥주</button>
+          <button type="button" class="preset-chip-inline" data-preset="cosmetic">💄 화장품</button>
+          <button type="button" class="preset-chip-inline" data-preset="car">🚗 전기차</button>
+          <button type="button" class="preset-chip-inline" data-preset="laundry">🧺 세탁서비스</button>
+          <button type="button" class="preset-chip-inline" data-preset="edu">🎓 온라인강의</button>
+          <button type="button" class="preset-chip-inline" data-preset="banking">🏦 은행앱</button>
+        </div>
+        <div id="productStatus" class="product-status">
+          <span class="status-dot status-idle"></span>
+          <span class="status-text">Generate를 누르면 Kimi-K2P6가 genome을 확장합니다.</span>
         </div>
-        <div id="productMeta" class="meta"></div>
       </div>
     </div>
 
@@ -187,70 +199,6 @@
   </div>
 </footer>
 
-<!-- Custom product modal -->
-<div id="productModal" class="modal" hidden>
-  <div class="modal-backdrop" data-close></div>
-  <div class="modal-panel">
-    <header class="modal-head">
-      <h3>🧬 새 제품 추가 <small>— LLM이 잠재력·SCAMPER 변주까지 확장합니다</small></h3>
-      <button type="button" class="modal-x" data-close aria-label="닫기">✕</button>
-    </header>
-
-    <div class="modal-body">
-      <div class="form-row">
-        <div class="field">
-          <label for="npBrand">브랜드 (가상 브랜드만, 실존 브랜드 금지)</label>
-          <input type="text" id="npBrand" placeholder="예: NOVA-Bean, AETHER-Phone, HAN-Cha" maxlength="40" />
-        </div>
-        <div class="field">
-          <label for="npTier">가격대</label>
-          <select id="npTier">
-            <option value="budget">budget</option>
-            <option value="mid">mid</option>
-            <option value="premium" selected>premium</option>
-            <option value="luxury">luxury</option>
-          </select>
-        </div>
-      </div>
-      <div class="field">
-        <label for="npCategory">카테고리 (한국어)</label>
-        <input type="text" id="npCategory" placeholder="예: 원두 커피, 태블릿, 러닝화, 맥주, 화장품" maxlength="60" />
-      </div>
-
-      <div class="field">
-        <label>
-          부품/구성 요소 <span id="npPartCount">(2/8)</span>
-          <small>· 2~8개 · 이름 + 한 줄 설명</small>
-        </label>
-        <div id="npParts" class="parts-list"></div>
-        <button type="button" id="npAddPart" class="btn-ghost">＋ 부품 추가</button>
-      </div>
-
-      <details class="preset-details">
-        <summary>💡 빠른 프리셋 — 한 번에 채우기</summary>
-        <div class="preset-grid">
-          <button type="button" class="preset-chip" data-preset="coffee">☕ 원두 커피 NOVA-Bean</button>
-          <button type="button" class="preset-chip" data-preset="phone">📱 스마트폰 AETHER-Phone</button>
-          <button type="button" class="preset-chip" data-preset="sneaker">👟 러닝화 PULSE-Run</button>
-          <button type="button" class="preset-chip" data-preset="beer">🍺 수제맥주 HOP-Haru</button>
-          <button type="button" class="preset-chip" data-preset="cosmetic">💄 화장품 GLOW-Han</button>
-          <button type="button" class="preset-chip" data-preset="car">🚗 전기차 SPIRA-EV</button>
-        </div>
-      </details>
-
-      <div id="npErr" class="err" hidden></div>
-    </div>
-
-    <footer class="modal-foot">
-      <button type="button" class="btn-ghost" data-close>취소</button>
-      <button type="button" id="npSubmit" class="btn-primary">
-        <span class="btn-spinner" hidden></span>
-        <span class="btn-label">→ LLM으로 확장</span>
-      </button>
-    </footer>
-  </div>
-</div>
-
 <script src="/static/app.js"></script>
 </body>
 </html>

static/styles.css

@@ -538,25 +538,61 @@ input[type="range"] { padding: 0; width: 100%; accent-color: var(--primary); }
   font-variant-numeric: tabular-nums;
 }
 
-/* ── PRODUCT ROW + MINI BTN ─────────────────────────────────── */
-.product-row {
-  display: grid; grid-template-columns: 1fr 40px; gap: 8px;
+/* ── PRODUCT PROMPT ─────────────────────────────────────────── */
+#productPrompt {
+  font-family: inherit;
+  min-height: 86px;
+  line-height: 1.55;
+}
+#productPrompt::placeholder {
+  color: var(--text-subtle);
+  font-size: 12.5px;
+  line-height: 1.6;
 }
-.btn-mini {
-  width: 40px; height: 38px;
+.product-presets {
+  display: flex; flex-wrap: wrap; gap: 6px;
+  margin-top: 10px;
+}
+.preset-chip-inline {
+  padding: 6px 10px;
   border: 1px solid var(--border);
-  border-radius: var(--radius-sm);
-  background: white; cursor: pointer;
-  font-size: 18px; font-weight: 700;
-  color: var(--primary);
+  border-radius: 999px;
+  background: white;
+  color: var(--text);
+  font-size: 12px; font-weight: 600;
+  cursor: pointer;
   transition: all 0.15s;
-  display: grid; place-items: center;
   font-family: inherit;
 }
-.btn-mini:hover {
+.preset-chip-inline:hover {
   border-color: var(--primary);
   background: var(--primary-light);
+  color: var(--primary);
+  transform: translateY(-1px);
 }
+.product-status {
+  display: flex; align-items: center; gap: 8px;
+  margin-top: 12px;
+  padding: 9px 12px;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  font-size: 12px;
+}
+.status-dot {
+  width: 8px; height: 8px; border-radius: 50%;
+  flex-shrink: 0;
+}
+.status-dot.status-idle    { background: var(--text-subtle); }
+.status-dot.status-loading { background: var(--warn); animation: pulse-dot 1.2s ease-in-out infinite; }
+.status-dot.status-ready   { background: var(--success); }
+.status-dot.status-error   { background: var(--danger); }
+@keyframes pulse-dot {
+  0%, 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.45); }
+  50%      { box-shadow: 0 0 0 6px rgba(245, 158, 11, 0); }
+}
+.status-text { color: var(--text); line-height: 1.45; }
+.status-text strong { color: var(--primary); }
 
 /* ── MODAL ──────────────────────────────────────────────────── */
 .modal {