feat: switch to FastAPI + Docker SDK with visual UI (index.html + Chart.js)

Dockerfile

@@ -0,0 +1,33 @@
+FROM python:3.12-slim
+
+ENV PYTHONUNBUFFERED=1 \
+    PIP_NO_CACHE_DIR=1 \
+    PIP_DISABLE_PIP_VERSION_CHECK=1 \
+    AETHER_LOG_LEVEL=INFO \
+    PORT=7860 \
+    HF_HOME=/tmp/hf_cache
+
+RUN apt-get update && apt-get install -y --no-install-recommends \
+        ca-certificates \
+        curl \
+    && rm -rf /var/lib/apt/lists/*
+
+WORKDIR /app
+
+COPY requirements.txt .
+RUN pip install --upgrade pip && pip install -r requirements.txt
+
+COPY . .
+
+RUN useradd -m -u 1000 user \
+ && mkdir -p /tmp/hf_cache \
+ && chown -R user:user /app /tmp/hf_cache
+
+USER user
+
+EXPOSE 7860
+
+HEALTHCHECK --interval=30s --timeout=5s --start-period=20s --retries=3 \
+    CMD curl -fsS http://127.0.0.1:7860/health || exit 1
+
+CMD ["uvicorn", "app:app", "--host", "0.0.0.0", "--port", "7860"]

README.md

@@ -3,9 +3,8 @@ title: AETHER-Ad Genesis
 emoji: 🌌
 colorFrom: indigo
 colorTo: purple
-sdk: gradio
-sdk_version: 5.9.1
-app_file: app.py
+sdk: docker
+app_port: 7860
 pinned: false
 license: apache-2.0
 short_description: Emergent Ad-Idea Engine (Blending x Greimas x Pixar)

app.py

@@ -1,26 +1,33 @@
-"""AETHER-Ad Genesis — Gradio UI for Hugging Face Space."""
+"""AETHER-Ad Genesis — FastAPI backend for the visual HF Space (Docker SDK)."""
 
 from __future__ import annotations
 
-import json
 import logging
 import os
 import sys
-import traceback
 from pathlib import Path
+from typing import Any, Literal
 
-import gradio as gr
+from dotenv import load_dotenv
+from fastapi import FastAPI, HTTPException
+from fastapi.concurrency import run_in_threadpool
+from fastapi.middleware.cors import CORSMiddleware
+from fastapi.responses import FileResponse
+from fastapi.staticfiles import StaticFiles
+from pydantic import BaseModel, Field
 
 ROOT = Path(__file__).resolve().parent
 sys.path.insert(0, str(ROOT))
 
-from aether_ad.core.context import load_context
-from aether_ad.core.engine import GenesisEngine, ScoredSeed
-from aether_ad.core.genome import ProductGenome, load_genome
-from aether_ad.llm.fireworks_kimi import FireworksKimiBackend
-from aether_ad.llm.hf_inference import HFInferenceBackend
-from aether_ad.version import __version__
+from aether_ad.core.collision import ALL_RULES  # noqa: E402
+from aether_ad.core.context import load_context  # noqa: E402
+from aether_ad.core.engine import GenesisEngine  # noqa: E402
+from aether_ad.core.genome import load_genome  # noqa: E402
+from aether_ad.llm.fireworks_kimi import FireworksKimiBackend  # noqa: E402
+from aether_ad.llm.hf_inference import HFInferenceBackend  # noqa: E402
+from aether_ad.version import __version__  # noqa: E402
 
+load_dotenv()
 logging.basicConfig(
     level=os.getenv("AETHER_LOG_LEVEL", "INFO"),
     format="%(asctime)s %(name)s %(levelname)s %(message)s",
@@ -29,284 +36,161 @@ log = logging.getLogger("aether_ad.app")
 
 PRODUCTS_DIR  = ROOT / "aether_ad" / "data" / "products"
 TENSIONS_PATH = ROOT / "aether_ad" / "data" / "tensions" / "default_tensions.json"
-CONTEXT       = load_context(TENSIONS_PATH)
-TENSIONS      = CONTEXT.tension_archetypes
+STATIC_DIR    = ROOT / "static"
 
+CONTEXT = load_context(TENSIONS_PATH)
 
-def _list_products() -> list[tuple[str, str]]:
-    items: list[tuple[str, str]] = []
-    for p in sorted(PRODUCTS_DIR.glob("*.json")):
-        try:
-            g = load_genome(p)
-            items.append((f"{g.brand} — {g.category}", str(p)))
-        except Exception:
-            continue
-    return items
+app = FastAPI(title="AETHER-Ad Genesis", version=__version__)
+app.add_middleware(
+    CORSMiddleware,
+    allow_origins=["*"],
+    allow_methods=["*"],
+    allow_headers=["*"],
+)
 
 
-def _tension_choices() -> list[tuple[str, str]]:
-    return [(f"{t.id} — {t.name}", t.id) for t in TENSIONS]
+@app.get("/", include_in_schema=False)
+async def index() -> FileResponse:
+    return FileResponse(STATIC_DIR / "index.html")
 
 
-def _format_tension_detail(tension_id: str) -> str:
-    t = CONTEXT.get_tension(tension_id)
-    sq = t.greimas_square
-    return (
-        f"**{t.name}** — _{t.description}_  \n"
-        f"`S1`: {sq.S1}  ·  `S2`: {sq.S2}  \n"
-        f"`~S1`: {sq.not_S1}  ·  `~S2`: {sq.not_S2}  \n"
-        f"**payoff**: {t.emotional_payoff}"
-    )
+@app.get("/health")
+async def health() -> dict[str, Any]:
+    return {"status": "ok", "version": __version__}
 
 
-def _format_seeds_markdown(scored: list[ScoredSeed]) -> str:
-    if not scored:
-        return "_No seeds generated._"
-    lines: list[str] = []
-    for i, s in enumerate(scored, 1):
-        sc = s.score
-        lines.append(
-            f"### #{i} · `{s.seed.seed_id}` — final **{sc.final:.3f}**\n"
-            f"- rules: `{', '.join(s.seed.rules_applied)}`\n"
-            f"- duration: {s.seed.duration}s · persona: {s.seed.persona_summary}\n\n"
-            f"**Concept.** {s.seed.concept}\n"
-        )
-        lines.append("| t (s) | beat | purpose | content |")
-        lines.append("|---|---|---|---|")
-        for b in s.seed.beats:
-            lines.append(
-                f"| {b.time_range[0]}–{b.time_range[1]} | {b.beat} | {b.purpose} | "
-                f"{(b.content or '').replace('|', '/')[:200]} |"
+@app.get("/api/meta")
+async def meta() -> dict[str, Any]:
+    return {
+        "version": __version__,
+        "default_backend": os.getenv("AETHER_DEFAULT_BACKEND", "fireworks"),
+        "has_fireworks_key": bool(os.getenv("FIREWORKS_API_KEY")),
+        "has_hf_token": bool(os.getenv("HF_TOKEN")),
+    }
+
+
+@app.get("/api/products")
+async def products() -> list[dict[str, Any]]:
+    items: list[dict[str, Any]] = []
+    for p in sorted(PRODUCTS_DIR.glob("*.json")):
+        try:
+            g = load_genome(p)
+            items.append(
+                {
+                    "product_id": g.product_id,
+                    "brand": g.brand,
+                    "category": g.category,
+                    "price_tier": g.price_tier,
+                    "atom_count": len(g.functional_atoms),
+                    "atoms": [{"id": a.id, "name": a.name} for a in g.functional_atoms],
+                }
             )
-        lines.append(
-            f"\n**Scores.** novelty={sc.novelty:.2f} · utility={sc.utility:.2f} · "
-            f"affect={sc.affect:.2f} · humor/pathos={sc.humor_or_pathos:.2f} · "
-            f"surprise={sc.surprise:.2f} · risk={sc.risk:.2f} · "
-            f"gating_pass={sc.gating_passed}/5\n\n---\n"
-        )
-    return "\n".join(lines)
-
-
-def _scores_table(scored: list[ScoredSeed]) -> list[list]:
-    rows = []
-    for i, s in enumerate(scored, 1):
-        rows.append(
-            [
-                i,
-                s.seed.seed_id,
-                ", ".join(s.seed.rules_applied),
-                round(s.score.novelty, 3),
-                round(s.score.utility, 3),
-                round(s.score.affect, 3),
-                round(s.score.humor_or_pathos, 3),
-                round(s.score.surprise, 3),
-                round(s.score.risk, 3),
-                round(s.score.final, 3),
-            ]
-        )
-    return rows
-
-
-def run_pipeline(
-    product_path: str,
-    tension_id: str,
-    persona_text: str,
-    duration: int,
-    n_seeds: int,
-    top_k: int,
-    backend_name: str,
-    rng_seed: int,
-    llm_model: str,
-    progress: gr.Progress = gr.Progress(track_tqdm=False),
-):
-    try:
-        if not product_path:
-            return "제품을 선택하세요.", [], "{}", ""
-
-        progress(0.05, desc="Loading genome...")
-        genome: ProductGenome = load_genome(product_path)
-
-        backend_name = (backend_name or "fireworks").lower()
-        llm = None
-        if backend_name != "none":
-            progress(0.10, desc=f"Connecting {backend_name} backend...")
-            try:
-                if backend_name == "fireworks":
-                    if not os.getenv("FIREWORKS_API_KEY"):
-                        return (
-                            "❌ FIREWORKS_API_KEY가 Space secret에 설정되지 않았습니다. "
-                            "Settings → Variables and secrets에서 FIREWORKS_API_KEY를 추가하거나, "
-                            "Backend를 'none'으로 바꿔 off-LLM 템플릿 모드로 실행하세요.",
-                            [],
-                            "{}",
-                            "",
-                        )
-                    llm = FireworksKimiBackend(model=llm_model or None)
-                elif backend_name == "hf":
-                    if not os.getenv("HF_TOKEN"):
-                        return (
-                            "❌ HF_TOKEN이 Space secret에 설정되지 않았습니다. "
-                            "Backend를 'none'으로 바꿔 off-LLM 템플릿 모드로 실행하세요.",
-                            [],
-                            "{}",
-                            "",
-                        )
-                    llm = HFInferenceBackend(model=llm_model or None)
-                else:
-                    return f"❌ Unknown backend '{backend_name}'", [], "{}", ""
-            except Exception as e:
-                log.exception("backend init failed")
-                return f"LLM 초기화 실패: {e}", [], "{}", ""
-
-        engine = GenesisEngine(
-            llm=llm,
-            context=CONTEXT,
-            seed_count_per_run=int(n_seeds),
-            keep_top_k=int(top_k),
-            rng_seed=int(rng_seed) if rng_seed else None,
-        )
+        except Exception as e:
+            log.warning("skip product %s: %s", p, e)
+    return items
 
-        progress(0.25, desc="Stage 1-3: corpus → encoding → incubation...")
-        progress(0.55, desc="Stage 4: emergence (Pixar spine)...")
-        progress(0.80, desc="Stage 5: filtering (wow filter)...")
-        scored = engine.generate(
-            product=genome,
-            tension_id=tension_id,
-            persona_text=persona_text or "일반 소비자",
-            duration=15 if int(duration) == 15 else 30,
-        )
 
-        md = _format_seeds_markdown(scored)
-        rows = _scores_table(scored)
-        raw = json.dumps([s.model_dump() for s in scored], ensure_ascii=False, indent=2)
-        summary = (
-            f"✅ {len(scored)}개 시드 생성 완료 (상위 {top_k}). "
-            f"평균 final={sum(s.score.final for s in scored) / max(1, len(scored)):.3f}, "
-            f"최고 final={max((s.score.final for s in scored), default=0.0):.3f}."
-        )
-        return summary, rows, raw, md
-    except Exception as e:
-        log.exception("pipeline failed")
-        return f"❌ 실행 실패: {e}\n\n{traceback.format_exc()}", [], "{}", ""
+@app.get("/api/tensions")
+async def tensions() -> list[dict[str, Any]]:
+    return [t.model_dump() for t in CONTEXT.tension_archetypes]
 
 
-def ui() -> gr.Blocks:
-    products = _list_products()
-    tension_opts = _tension_choices()
+@app.get("/api/rules")
+async def rules() -> list[dict[str, Any]]:
+    return [r.model_dump() for r in ALL_RULES]
 
-    theme = gr.themes.Soft(primary_hue="indigo", secondary_hue="purple")
 
-    with gr.Blocks(title="AETHER-Ad Genesis", theme=theme) as demo:
-        gr.Markdown(
-            f"# 🌌 AETHER-Ad Genesis  \n"
-            f"_창발적 광고 아이���어 생성 엔진 · v{__version__} · VIDRAFT / 지니젠AI_  \n"
-            "Fauconnier-Turner × Greimas × SCAMPER × Pixar Story Spine × Stuhlfaut 4D × Boden Surprise"
-        )
+class GenerateRequest(BaseModel):
+    product_id: str
+    tension_id: str
+    persona: str = "일반 소비자"
+    duration: Literal[15, 30] = 15
+    n_seeds: int = Field(15, ge=1, le=50)
+    top_k: int = Field(5, ge=1, le=20)
+    backend: Literal["fireworks", "hf", "none"] = "fireworks"
+    model: str | None = None
+    rng_seed: int | None = 42
 
-        with gr.Row():
-            with gr.Column(scale=1):
-                gr.Markdown("### 1️⃣ Product Genome")
-                product_dd = gr.Dropdown(
-                    choices=products,
-                    label="Product",
-                    value=products[0][1] if products else None,
-                )
 
-                gr.Markdown("### 2️⃣ Tension Archetype (Greimas)")
-                tension_dd = gr.Dropdown(
-                    choices=tension_opts,
-                    label="Tension",
-                    value="T01_power_asymmetry",
-                )
-                tension_md = gr.Markdown(_format_tension_detail("T01_power_asymmetry"))
+@app.post("/api/generate")
+async def generate(req: GenerateRequest) -> dict[str, Any]:
+    product_path: Path | None = None
+    for p in PRODUCTS_DIR.glob("*.json"):
+        try:
+            if load_genome(p).product_id == req.product_id:
+                product_path = p
+                break
+        except Exception:
+            continue
+    if product_path is None:
+        raise HTTPException(status_code=404, detail=f"Product '{req.product_id}' not found")
+    genome = load_genome(product_path)
 
-                gr.Markdown("### 3️⃣ Persona")
-                persona = gr.Textbox(
-                    label="Persona (free-form Korean)",
-                    value="10대 남학생, 좌절",
-                    lines=2,
+    llm = None
+    try:
+        if req.backend == "fireworks":
+            if not os.getenv("FIREWORKS_API_KEY"):
+                raise HTTPException(
+                    status_code=400,
+                    detail="FIREWORKS_API_KEY is not set in Space secrets.",
                 )
-
-                gr.Markdown("### 4️⃣ Pipeline")
-                with gr.Row():
-                    duration = gr.Radio([15, 30], value=15, label="Duration (s)")
-                    n_seeds = gr.Slider(5, 50, value=15, step=1, label="n_seeds")
-                    top_k = gr.Slider(1, 10, value=5, step=1, label="top_k")
-                with gr.Row():
-                    backend_dd = gr.Dropdown(
-                        choices=[
-                            ("Fireworks · Kimi-K2P6 (default)", "fireworks"),
-                            ("HF Inference · Qwen2.5-72B",      "hf"),
-                            ("none (template fallback)",        "none"),
-                        ],
-                        value="fireworks",
-                        label="LLM backend",
-                    )
-                    rng_seed_in = gr.Number(value=42, precision=0, label="rng_seed")
-                llm_model = gr.Textbox(
-                    label="Model id (leave blank to use backend default)",
-                    value=os.getenv(
-                        "FIREWORKS_MODEL", "accounts/fireworks/models/kimi-k2p6"
-                    ),
+            llm = FireworksKimiBackend(model=req.model or None)
+        elif req.backend == "hf":
+            if not os.getenv("HF_TOKEN"):
+                raise HTTPException(
+                    status_code=400,
+                    detail="HF_TOKEN is not set in Space secrets.",
                 )
-                run_btn = gr.Button("⚡ Generate", variant="primary")
-
-            with gr.Column(scale=2):
-                gr.Markdown("### 🎬 Output")
-                summary = gr.Markdown("")
-                with gr.Tabs():
-                    with gr.TabItem("Scored table"):
-                        scores_table = gr.Dataframe(
-                            headers=[
-                                "rank", "seed_id", "rules",
-                                "novelty", "utility", "affect",
-                                "humor/pathos", "surprise", "risk", "final",
-                            ],
-                            interactive=False,
-                            wrap=True,
-                        )
-                    with gr.TabItem("Storyboards"):
-                        storyboards_md = gr.Markdown()
-                    with gr.TabItem("Raw JSON"):
-                        raw_json = gr.Code(language="json")
-
-        tension_dd.change(fn=_format_tension_detail, inputs=tension_dd, outputs=tension_md)
-
-        run_btn.click(
-            fn=run_pipeline,
-            inputs=[
-                product_dd, tension_dd, persona, duration, n_seeds, top_k,
-                backend_dd, rng_seed_in, llm_model,
-            ],
-            outputs=[summary, scores_table, raw_json, storyboards_md],
-        )
-
-        with gr.Accordion("📚 Theoretical Pillars", open=False):
-            gr.Markdown(
-                """
-- **Fauconnier & Turner (2002)** — *The Way We Think*, Conceptual Blending.
-- **Greimas (1966)** — *Sémantique structurale*, Semiotic Square (S1 / S2 / ~S1 / ~S2).
-- **Eberle (1971)** — SCAMPER (Substitute · Combine · Adapt · Modify · Put-to · Eliminate · Reverse).
-- **Stuhlfaut & Yoo (2011)** — Advertising Creativity 4-D Model.
-- **Boden (2007)** — Novelty · Utility · Surprise.
-- **Coats / McKee (2011)** — Pixar Story Spine (6 beats).
-- **Floch (1990)** — Four consumption-value axes (practical · utopian · critical · playful).
-                """
-            )
-
-        with gr.Accordion("🧪 15 Collision Rules", open=False):
-            from aether_ad.core.collision import ALL_RULES
-            rows = [[r.rule_id, r.name, r.pattern, r.theoretical_anchor] for r in ALL_RULES]
-            gr.Dataframe(
-                value=rows,
-                headers=["rule_id", "name", "pattern", "theoretical_anchor"],
-                interactive=False,
-                wrap=True,
-            )
-
-    return demo
-
+            llm = HFInferenceBackend(model=req.model or None)
+    except HTTPException:
+        raise
+    except Exception as e:
+        log.exception("backend init failed")
+        raise HTTPException(status_code=500, detail=f"Backend init failed: {e}") from e
+
+    engine = GenesisEngine(
+        llm=llm,
+        context=CONTEXT,
+        seed_count_per_run=req.n_seeds,
+        keep_top_k=req.top_k,
+        rng_seed=req.rng_seed,
+    )
 
-if __name__ == "__main__":
-    demo = ui()
-    demo.queue(max_size=8).launch(server_name="0.0.0.0", server_port=int(os.getenv("PORT", "7860")))
+    try:
+        scored = await run_in_threadpool(
+            engine.generate,
+            product=genome,
+            tension_id=req.tension_id,
+            persona_text=req.persona or "일반 소비자",
+            duration=req.duration,
+        )
+    except Exception as e:
+        log.exception("pipeline failed")
+        raise HTTPException(status_code=500, detail=f"Pipeline failed: {e}") from e
+
+    seeds = [s.model_dump() for s in scored]
+    avg_final = sum(s["score"]["final"] for s in seeds) / max(1, len(seeds))
+    top_final = max((s["score"]["final"] for s in seeds), default=0.0)
+
+    return {
+        "summary": {
+            "count": len(seeds),
+            "avg_final": avg_final,
+            "top_final": top_final,
+            "product_id": req.product_id,
+            "tension_id": req.tension_id,
+            "backend": req.backend,
+            "model": req.model,
+            "duration": req.duration,
+        },
+        "seeds": seeds,
+    }
+
+
+if STATIC_DIR.exists():
+    app.mount("/static", StaticFiles(directory=STATIC_DIR), name="static")
+
+
+if __name__ == "__main__":  # pragma: no cover
+    import uvicorn
+    uvicorn.run("app:app", host="0.0.0.0", port=int(os.getenv("PORT", "7860")))

requirements.txt

@@ -1,15 +1,13 @@
 pydantic>=2.5.0
 jsonschema>=4.20.0
-openai>=1.30.0
 httpx>=0.27.0
 python-dotenv>=1.0.0
+numpy>=1.26.0
+huggingface_hub>=0.24.0
+structlog>=24.1.0
+openai>=1.30.0
 typer>=0.12.0
 rich>=13.7.0
 pyyaml>=6.0.1
-numpy>=1.26.0
-scikit-learn>=1.4.0
-sentence-transformers>=2.7.0
-structlog>=24.1.0
-huggingface_hub>=0.24.0
-gradio>=5.0.0
-audioop-lts>=0.2.1; python_version>="3.13"
+fastapi>=0.110.0
+uvicorn[standard]>=0.27.0

static/app.js

@@ -0,0 +1,373 @@
+'use strict';
+
+const $  = (sel, el = document) => el.querySelector(sel);
+const $$ = (sel, el = document) => Array.from(el.querySelectorAll(sel));
+
+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) => fetch('/api/generate', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(body),
+  }).then(async r => {
+    if (!r.ok) {
+      const j = await r.json().catch(() => ({ detail: r.statusText }));
+      throw new Error(j.detail || `HTTP ${r.status}`);
+    }
+    return r.json();
+  }),
+};
+
+let TENSIONS = [];
+let PRODUCTS = [];
+let CHARTS = [];
+let PIPELINE_TIMER = null;
+
+document.addEventListener('DOMContentLoaded', init);
+
+async function init() {
+  wireInputs();
+  await Promise.all([loadMeta(), loadProducts(), loadTensions(), loadRules()]);
+}
+
+async function loadMeta() {
+  try {
+    const m = await API.meta();
+    $('#version').textContent = m.version;
+    const sel = $('#backendSel');
+    sel.querySelectorAll('option').forEach(o => {
+      if (o.value === 'fireworks' && !m.has_fireworks_key) {
+        o.disabled = true; o.textContent += ' (no key)';
+      }
+      if (o.value === 'hf' && !m.has_hf_token) {
+        o.disabled = true; o.textContent += ' (no token)';
+      }
+    });
+    sel.value = m.default_backend || 'fireworks';
+    syncBackendPlaceholder();
+  } 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 = '';
+  TENSIONS.forEach(t => {
+    const o = document.createElement('option');
+    o.value = t.id; o.textContent = `${t.id} · ${t.name}`;
+    sel.appendChild(o);
+  });
+  updateGreimas();
+}
+
+function updateGreimas() {
+  const id = $('#tensionSel').value;
+  const t = TENSIONS.find(x => x.id === id);
+  if (!t) return;
+  const sq = t.greimas_square;
+  $('[data-pos="s1"]').textContent  = sq.S1;
+  $('[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)}`;
+}
+
+async function loadRules() {
+  const rules = await API.rules();
+  const rows = [
+    `<div class="rule-row header">
+       <div>rule_id</div><div>name</div><div>pattern</div><div>theoretical_anchor</div>
+     </div>`,
+  ];
+  rules.forEach(r => {
+    rows.push(`
+      <div class="rule-row">
+        <div class="rule-id">${r.rule_id}</div>
+        <div><strong>${escapeHtml(r.name)}</strong></div>
+        <div>${escapeHtml(r.pattern)}</div>
+        <div class="rule-anchor">${escapeHtml(r.theoretical_anchor)}</div>
+      </div>`);
+  });
+  $('#rulesTable').innerHTML = rows.join('');
+}
+
+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);
+}
+
+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] || '';
+}
+
+async function runGenerate() {
+  const body = {
+    product_id: $('#productSel').value,
+    tension_id: $('#tensionSel').value,
+    persona:    $('#personaIn').value.trim() || '일반 소비자',
+    duration:   parseInt($$('input[name="duration"]').find(r => r.checked).value, 10),
+    n_seeds:    parseInt($('#nSeeds').value, 10),
+    top_k:      parseInt($('#topK').value, 10),
+    backend:    $('#backendSel').value,
+    model:      $('#modelIn').value.trim() || null,
+    rng_seed:   parseInt($('#rngSeed').value || '42', 10),
+  };
+
+  setRunning(true);
+  $('#errBox').hidden = true;
+  $('#emptyState').style.display = 'none';
+  animatePipeline();
+
+  try {
+    const r = await API.generate(body);
+    completePipeline();
+    renderResults(r);
+  } catch (err) {
+    resetPipeline();
+    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 = '';
+    console.error(err);
+  } finally {
+    setRunning(false);
+  }
+}
+
+function setRunning(running) {
+  $('#genBtn').disabled = running;
+  $('#genBtn .btn-spinner').hidden = !running;
+  $('#genBtn .btn-label').textContent = running ? '생성 중…' : '⚡ Generate';
+}
+
+function animatePipeline() {
+  resetPipeline();
+  const stages = ['corpus', 'encoding', 'incubation', 'emergence', 'filtering'];
+  let i = 0;
+  const tick = () => {
+    if (i > 0) {
+      const prev = document.querySelector(`.stage[data-stage="${stages[i-1]}"]`);
+      prev.classList.remove('active'); prev.classList.add('done');
+    }
+    if (i < stages.length) {
+      document.querySelector(`.stage[data-stage="${stages[i]}"]`).classList.add('active');
+      i++;
+      PIPELINE_TIMER = setTimeout(tick, 1200);
+    }
+  };
+  tick();
+}
+
+function completePipeline() {
+  if (PIPELINE_TIMER) { clearTimeout(PIPELINE_TIMER); PIPELINE_TIMER = null; }
+  $$('.stage').forEach(s => { s.classList.remove('active'); s.classList.add('done'); });
+}
+
+function resetPipeline() {
+  if (PIPELINE_TIMER) { clearTimeout(PIPELINE_TIMER); PIPELINE_TIMER = null; }
+  $$('.stage').forEach(s => s.classList.remove('active', 'done'));
+}
+
+function renderResults(data) {
+  $('#summaryBar').hidden = false;
+  $('#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() : '');
+
+  CHARTS.forEach(c => { try { c.destroy(); } catch(_){} });
+  CHARTS = [];
+  const box = $('#seedsBox'); box.innerHTML = '';
+
+  data.seeds.forEach((s, idx) => {
+    const card = renderSeedCard(s, idx + 1);
+    box.appendChild(card);
+  });
+}
+
+function renderSeedCard(s, rank) {
+  const seed  = s.seed;
+  const score = s.score;
+  const final = score.final;
+  const color = final >= 0.5 ? '#10b981' : final >= 0.3 ? '#f59e0b' : '#ef4444';
+  const R = 34, CIRC = 2 * Math.PI * R;
+  const offset = CIRC * (1 - Math.max(0, Math.min(1, final)));
+
+  const card = document.createElement('div');
+  card.className = 'seed-card';
+  card.innerHTML = `
+    <div class="seed-head">
+      <div class="seed-rank-block">
+        <span class="seed-rank-label">Rank</span>
+        <div class="seed-rank">#${rank}</div>
+      </div>
+      <div class="seed-info">
+        <div class="seed-id">${escapeHtml(seed.seed_id)}</div>
+        <div class="seed-rules">
+          ${seed.rules_applied.map(r => `<span class="rule-pill">${escapeHtml(r)}</span>`).join('')}
+        </div>
+      </div>
+      <div class="final-gauge" title="final score">
+        <svg viewBox="0 0 80 80">
+          <circle class="final-gauge-track" cx="40" cy="40" r="${R}"/>
+          <circle class="final-gauge-fill"  cx="40" cy="40" r="${R}"
+                  stroke="${color}"
+                  stroke-dasharray="${CIRC}"
+                  stroke-dashoffset="${offset}"/>
+        </svg>
+        <div class="final-gauge-text">
+          <div>
+            <div class="final-gauge-value">${final.toFixed(2)}</div>
+            <div class="final-gauge-label">final</div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="seed-concept">${escapeHtml(seed.concept)}</div>
+
+    <div class="seed-section-title">Pixar Story Spine · ${seed.duration}s · ${seed.beats.length} beats</div>
+    <div class="timeline">
+      <div class="timeline-bar">${renderBeatBar(seed.beats, seed.duration)}</div>
+      <div class="timeline-scale">${renderTicks(seed.duration)}</div>
+    </div>
+
+    <div class="seed-section-title">Beats</div>
+    <div class="beats-detail">
+      ${seed.beats.map(b => `
+        <div class="beat-row">
+          <div class="beat-row-time">${b.time_range[0]}–${b.time_range[1]}s</div>
+          <div class="beat-row-name">${escapeHtml(b.beat)}</div>
+          <div class="beat-row-content">${escapeHtml(b.content || '—')}</div>
+        </div>
+      `).join('')}
+    </div>
+
+    <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 })}
+      </div>
+    </div>
+  `;
+
+  const canvas = $('canvas', card);
+  const chart = new Chart(canvas.getContext('2d'), {
+    type: 'radar',
+    data: {
+      labels: ['Novelty', 'Utility', 'Affect', 'Humor/Pathos', 'Surprise'],
+      datasets: [{
+        data: [
+          score.novelty, score.utility, score.affect,
+          score.humor_or_pathos, score.surprise,
+        ],
+        backgroundColor: 'rgba(79, 70, 229, 0.18)',
+        borderColor: '#4f46e5',
+        borderWidth: 2,
+        pointBackgroundColor: '#4f46e5',
+        pointBorderColor: '#ffffff',
+        pointRadius: 3,
+      }],
+    },
+    options: {
+      responsive: true, maintainAspectRatio: false,
+      plugins: { legend: { display: false } },
+      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' },
+        },
+      },
+    },
+  });
+  CHARTS.push(chart);
+  return card;
+}
+
+function renderBeatBar(beats, duration) {
+  return beats.map((b, i) => {
+    const pct = ((b.time_range[1] - b.time_range[0]) / duration) * 100;
+    const short = (b.beat || '').split('_')[0] || b.beat;
+    return `
+      <div class="beat-seg beat-color-${Math.min(i, 5)}" style="width: ${pct}%;"
+           title="${escapeHtml(b.beat)} · ${b.time_range[0]}-${b.time_range[1]}s">
+        <div class="beat-seg-name">${escapeHtml(short)}</div>
+        <div class="beat-seg-time">${b.time_range[0]}-${b.time_range[1]}s</div>
+      </div>
+    `;
+  }).join('');
+}
+
+function renderTicks(duration) {
+  const ticks = duration === 15 ? [0, 3, 6, 9, 12, 15] : [0, 5, 10, 15, 20, 25, 30];
+  return ticks.map(t => {
+    const left = (t / duration) * 100;
+    return `<span class="timeline-tick" style="left: ${left}%;">${t}s</span>`;
+  }).join('');
+}
+
+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;');
+  return `
+    <div class="score-item">
+      <span class="score-item-label">${label}</span>
+      <span class="score-item-value" style="${style.join(' ')}">${v}</span>
+    </div>
+  `;
+}
+
+function escapeHtml(s) {
+  if (s == null) return '';
+  return String(s).replace(/[&<>"']/g, ch => ({
+    '&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;',
+  }[ch]));
+}

static/index.html

@@ -0,0 +1,186 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+<meta charset="UTF-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+<title>AETHER-Ad Genesis · Emergent Ad-Idea Engine</title>
+<meta name="description" content="Fauconnier-Turner × Greimas × SCAMPER × Pixar Story Spine × Stuhlfaut 4D × Boden Surprise — emergent ad-idea generation engine." />
+<link rel="preconnect" href="https://fonts.googleapis.com" />
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet" />
+<link href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css" rel="stylesheet" />
+<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.6/dist/chart.umd.min.js"></script>
+<link rel="stylesheet" href="/static/styles.css" />
+</head>
+<body>
+<header class="hero">
+  <div class="container hero-inner">
+    <div class="hero-brand">
+      <div class="hero-logo">🌌</div>
+      <div>
+        <h1 class="hero-title">AETHER-Ad <span class="grad">Genesis</span></h1>
+        <p class="hero-subtitle">창발적 광고 아이디어 생성 엔진 · v<span id="version">0.2.0</span> · VIDRAFT · 지니젠AI</p>
+      </div>
+    </div>
+    <div class="hero-pillars">
+      <span class="pill">Fauconnier-Turner · Blending</span>
+      <span class="pill">Greimas · Semiotic Square</span>
+      <span class="pill">Eberle · SCAMPER</span>
+      <span class="pill">Coats · Pixar Spine</span>
+      <span class="pill">Stuhlfaut · 4-D Creativity</span>
+      <span class="pill">Boden · Surprise</span>
+    </div>
+  </div>
+</header>
+
+<main class="container main">
+  <aside class="sidebar">
+    <div class="card">
+      <div class="card-header"><h2><span class="step">1</span>Product Genome</h2></div>
+      <div class="field">
+        <label for="productSel">Product</label>
+        <select id="productSel"></select>
+        <div id="productMeta" class="meta"></div>
+      </div>
+    </div>
+
+    <div class="card">
+      <div class="card-header"><h2><span class="step">2</span>Tension <small>Greimas Square</small></h2></div>
+      <div class="field">
+        <label for="tensionSel">Tension archetype</label>
+        <select id="tensionSel"></select>
+      </div>
+      <div class="greimas">
+        <div class="g-cell g-s1"><span class="g-label">S1 positive</span><span class="g-value" data-pos="s1">—</span></div>
+        <div class="g-cell g-s2"><span class="g-label">S2 contrary</span><span class="g-value" data-pos="s2">—</span></div>
+        <div class="g-cell g-ns1"><span class="g-label">~S1 contradiction</span><span class="g-value" data-pos="ns1">—</span></div>
+        <div class="g-cell g-ns2"><span class="g-label">~S2 contradiction</span><span class="g-value" data-pos="ns2">—</span></div>
+      </div>
+      <div id="tensionPayoff" class="meta"></div>
+    </div>
+
+    <div class="card">
+      <div class="card-header"><h2><span class="step">3</span>Persona</h2></div>
+      <div class="field">
+        <label for="personaIn">Target persona (free-text)</label>
+        <textarea id="personaIn" rows="2" placeholder="예: 10대 남학생, 좌절">10대 남학생, 좌절</textarea>
+      </div>
+    </div>
+
+    <div class="card">
+      <div class="card-header"><h2><span class="step">4</span>Pipeline</h2></div>
+      <div class="field">
+        <label>Spot duration</label>
+        <div class="radio-group">
+          <label class="radio-chip"><input type="radio" name="duration" value="15" checked /><span>15s · 5 beats</span></label>
+          <label class="radio-chip"><input type="radio" name="duration" value="30" /><span>30s · 6 beats</span></label>
+        </div>
+      </div>
+      <div class="field">
+        <label>n_seeds · <output id="nSeedsVal">15</output></label>
+        <input type="range" id="nSeeds" min="5" max="40" value="15" />
+      </div>
+      <div class="field">
+        <label>top_k · <output id="topKVal">5</output></label>
+        <input type="range" id="topK" min="1" max="10" value="5" />
+      </div>
+      <div class="field">
+        <label for="backendSel">LLM backend</label>
+        <select id="backendSel">
+          <option value="fireworks" selected>Fireworks · Kimi-K2P6</option>
+          <option value="hf">HF Inference · Qwen2.5-72B</option>
+          <option value="none">Template (off-LLM)</option>
+        </select>
+      </div>
+      <div class="field">
+        <label for="modelIn">Model id <small>(optional override)</small></label>
+        <input type="text" id="modelIn" placeholder="accounts/fireworks/models/kimi-k2p6" />
+      </div>
+      <div class="field">
+        <label for="rngSeed">rng_seed</label>
+        <input type="number" id="rngSeed" value="42" />
+      </div>
+      <button id="genBtn" class="btn-primary">
+        <span class="btn-spinner" hidden></span>
+        <span class="btn-label">⚡ Generate</span>
+      </button>
+      <div id="errBox" class="err" hidden></div>
+    </div>
+  </aside>
+
+  <section class="results">
+    <div class="pipeline card-flat">
+      <h3 class="pipeline-title">5-Stage Pipeline · Young(1940) Adapted</h3>
+      <div class="pipeline-stages">
+        <div class="stage" data-stage="corpus">
+          <div class="stage-dot"></div>
+          <div class="stage-label">Corpus</div>
+        </div>
+        <div class="stage" data-stage="encoding">
+          <div class="stage-dot"></div>
+          <div class="stage-label">Encoding</div>
+        </div>
+        <div class="stage" data-stage="incubation">
+          <div class="stage-dot"></div>
+          <div class="stage-label">Incubation</div>
+        </div>
+        <div class="stage" data-stage="emergence">
+          <div class="stage-dot"></div>
+          <div class="stage-label">Emergence</div>
+        </div>
+        <div class="stage" data-stage="filtering">
+          <div class="stage-dot"></div>
+          <div class="stage-label">Filtering</div>
+        </div>
+      </div>
+    </div>
+
+    <div id="emptyState" class="empty">
+      <div class="empty-icon">✨</div>
+      <h3>창발적 광고 아이디어를 생성합니다</h3>
+      <p>좌측에서 제품 · 긴장 · 페르소나를 설정하고 <strong>Generate</strong>를 누르세요.<br/>
+      Fireworks Kimi-K2P6이 6개 이론 프레임을 경유해 Top-K 시드를 반환합니다.</p>
+    </div>
+
+    <div id="summaryBar" class="summary" hidden>
+      <div class="summary-metric"><div class="summary-label">Seeds</div><div class="summary-value" id="sumCount">—</div></div>
+      <div class="summary-metric"><div class="summary-label">Avg final</div><div class="summary-value" id="sumAvg">—</div></div>
+      <div class="summary-metric"><div class="summary-label">Top final</div><div class="summary-value" id="sumTop">—</div></div>
+      <div class="summary-metric"><div class="summary-label">Backend</div><div class="summary-value summary-value-sm" id="sumBackend">—</div></div>
+    </div>
+
+    <div id="seedsBox" class="seeds"></div>
+  </section>
+</main>
+
+<footer class="footer container">
+  <details class="foot-details">
+    <summary>📚 Theoretical Foundation</summary>
+    <div class="foot-body">
+      <ul>
+        <li><strong>Fauconnier &amp; Turner (2002)</strong> — <em>The Way We Think</em>, Conceptual Blending.</li>
+        <li><strong>Greimas (1966)</strong> — <em>Sémantique structurale</em>, Semiotic Square (S1 / S2 / ~S1 / ~S2).</li>
+        <li><strong>Eberle (1971)</strong> — SCAMPER (Substitute · Combine · Adapt · Modify · Put-to · Eliminate · Reverse).</li>
+        <li><strong>Stuhlfaut &amp; Yoo (2011)</strong> — Advertising Creativity 4-D (divergence · relevance · artistry · elaboration).</li>
+        <li><strong>Boden (2007)</strong> — Novelty · Utility · Surprise.</li>
+        <li><strong>Coats / McKee (2011)</strong> — Pixar Story Spine (6 beats).</li>
+        <li><strong>Floch (1990)</strong> — Four consumption-value axes (practical · utopian · critical · playful).</li>
+      </ul>
+    </div>
+  </details>
+
+  <details class="foot-details">
+    <summary>🧪 15 Collision Rules</summary>
+    <div id="rulesTable" class="rules-table"></div>
+  </details>
+
+  <div class="foot-meta">
+    Apache-2.0 · VIDRAFT · 지니젠AI ·
+    <a href="https://huggingface.co/spaces/SeaWolf-AI/aether-ad-genesis" target="_blank" rel="noopener">HF Space</a> ·
+    Docker SDK · FastAPI
+  </div>
+</footer>
+
+<script src="/static/app.js"></script>
+</body>
+</html>

static/styles.css

@@ -0,0 +1,614 @@
+:root {
+  --bg: #ffffff;
+  --surface: #fafbfc;
+  --surface-2: #f4f6fa;
+  --border: #e6e9f0;
+  --border-strong: #cfd4df;
+  --text: #0f172a;
+  --text-muted: #64748b;
+  --text-subtle: #94a3b8;
+  --primary: #4f46e5;
+  --primary-hover: #4338ca;
+  --primary-light: #eef2ff;
+  --accent: #a855f7;
+  --accent-light: #f3e8ff;
+  --success: #10b981;
+  --warn: #f59e0b;
+  --danger: #ef4444;
+  --radius: 14px;
+  --radius-sm: 8px;
+  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04);
+  --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.06);
+  --shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.10);
+}
+
+* { box-sizing: border-box; margin: 0; padding: 0; }
+html { scroll-behavior: smooth; }
+body {
+  font-family: "Pretendard Variable", Pretendard, "Inter", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
+  background: var(--bg);
+  color: var(--text);
+  line-height: 1.6;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+a { color: var(--primary); }
+
+.container { max-width: 1440px; margin: 0 auto; padding: 0 28px; }
+
+/* ── HERO ────────────────────────────────────────────────────── */
+.hero {
+  padding: 48px 0 40px;
+  background: linear-gradient(180deg, #fafbff 0%, #ffffff 100%);
+  border-bottom: 1px solid var(--border);
+  position: relative;
+  overflow: hidden;
+}
+.hero::before {
+  content: ""; position: absolute; top: -240px; right: -180px;
+  width: 620px; height: 620px;
+  background: radial-gradient(circle, rgba(168, 85, 247, 0.14), transparent 70%);
+  pointer-events: none;
+}
+.hero::after {
+  content: ""; position: absolute; bottom: -260px; left: -120px;
+  width: 540px; height: 540px;
+  background: radial-gradient(circle, rgba(79, 70, 229, 0.12), transparent 70%);
+  pointer-events: none;
+}
+.hero-inner { position: relative; display: flex; flex-direction: column; gap: 22px; }
+.hero-brand { display: flex; align-items: center; gap: 18px; }
+.hero-logo {
+  font-size: 44px;
+  background: linear-gradient(135deg, var(--primary), var(--accent));
+  width: 76px; height: 76px;
+  display: grid; place-items: center;
+  border-radius: 20px;
+  color: white;
+  box-shadow: 0 10px 28px rgba(79, 70, 229, 0.35);
+}
+.hero-title {
+  font-size: 38px; font-weight: 800;
+  letter-spacing: -0.03em; line-height: 1.08;
+}
+.hero-title .grad {
+  background: linear-gradient(135deg, var(--primary), var(--accent));
+  -webkit-background-clip: text; background-clip: text; color: transparent;
+}
+.hero-subtitle { font-size: 15px; color: var(--text-muted); margin-top: 6px; }
+.hero-pillars { display: flex; flex-wrap: wrap; gap: 8px; }
+.pill {
+  padding: 7px 14px;
+  border-radius: 999px;
+  background: white;
+  color: var(--primary);
+  font-size: 12px; font-weight: 600;
+  border: 1px solid rgba(79, 70, 229, 0.22);
+  box-shadow: var(--shadow-sm);
+}
+
+/* ── MAIN LAYOUT ─────────────────────────────────────────────── */
+.main {
+  display: grid;
+  grid-template-columns: 390px 1fr;
+  gap: 32px;
+  padding-top: 32px;
+  padding-bottom: 56px;
+}
+@media (max-width: 1024px) {
+  .main { grid-template-columns: 1fr; }
+  .sidebar { position: static !important; max-height: none !important; }
+}
+
+.sidebar {
+  display: flex; flex-direction: column; gap: 16px;
+  position: sticky; top: 20px; align-self: start;
+  max-height: calc(100vh - 40px);
+  overflow-y: auto;
+  padding-right: 6px;
+}
+.sidebar::-webkit-scrollbar { width: 6px; }
+.sidebar::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 3px; }
+
+.card, .card-flat {
+  background: white;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 22px;
+  box-shadow: var(--shadow-sm);
+}
+.card-flat { padding: 20px 22px; }
+
+.card-header { margin-bottom: 16px; }
+.card-header h2 {
+  font-size: 12px; font-weight: 700;
+  display: flex; align-items: center; gap: 10px;
+  text-transform: uppercase; letter-spacing: 0.08em;
+  color: var(--text);
+}
+.card-header h2 small {
+  font-size: 11px; color: var(--text-muted);
+  font-weight: 500; text-transform: none; letter-spacing: 0;
+  margin-left: auto;
+}
+.step {
+  width: 24px; height: 24px;
+  background: linear-gradient(135deg, var(--primary), var(--accent));
+  color: white; border-radius: 7px;
+  display: grid; place-items: center;
+  font-size: 11px; font-weight: 700;
+  box-shadow: 0 2px 6px rgba(79, 70, 229, 0.28);
+}
+
+.field { margin-bottom: 14px; }
+.field:last-child { margin-bottom: 0; }
+.field label {
+  display: block; font-size: 12px; font-weight: 600;
+  color: var(--text-muted); margin-bottom: 7px;
+}
+.field label small { font-weight: 400; color: var(--text-subtle); }
+.field output {
+  font-weight: 700; color: var(--primary);
+  font-variant-numeric: tabular-nums;
+}
+
+select, input[type="text"], input[type="number"], textarea {
+  width: 100%; padding: 10px 12px;
+  border: 1px solid var(--border); border-radius: var(--radius-sm);
+  background: white; font: inherit; font-size: 14px; color: var(--text);
+  transition: border-color 0.15s, box-shadow 0.15s;
+  font-family: inherit;
+}
+textarea { resize: vertical; min-height: 48px; }
+select:focus, input:focus, textarea:focus {
+  outline: none; border-color: var(--primary);
+  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.14);
+}
+input[type="range"] { padding: 0; width: 100%; accent-color: var(--primary); }
+
+.radio-group { display: flex; gap: 8px; }
+.radio-chip { flex: 1; display: block; position: relative; cursor: pointer; }
+.radio-chip input { position: absolute; opacity: 0; pointer-events: none; }
+.radio-chip span {
+  display: block; padding: 10px 12px; text-align: center;
+  border: 1px solid var(--border); border-radius: var(--radius-sm);
+  font-size: 13px; font-weight: 600;
+  transition: all 0.15s; background: white;
+}
+.radio-chip input:checked + span {
+  background: linear-gradient(135deg, var(--primary), var(--accent));
+  color: white; border-color: transparent;
+  box-shadow: 0 4px 12px rgba(79, 70, 229, 0.28);
+}
+
+.meta {
+  font-size: 12px; color: var(--text-muted);
+  margin-top: 10px; line-height: 1.55;
+}
+
+/* ── GREIMAS SQUARE ──────────────────────────────────────────── */
+.greimas {
+  display: grid; grid-template-columns: 1fr 1fr;
+  gap: 8px; margin: 12px 0 2px;
+}
+.g-cell {
+  padding: 11px 12px; border-radius: 10px;
+  border: 1px solid var(--border); background: var(--surface);
+  min-height: 70px;
+  transition: transform 0.15s, box-shadow 0.15s;
+}
+.g-cell.g-s1 {
+  border-color: rgba(79, 70, 229, 0.28);
+  background: linear-gradient(135deg, var(--primary-light), #ffffff);
+}
+.g-cell.g-s2 {
+  border-color: rgba(168, 85, 247, 0.28);
+  background: linear-gradient(135deg, var(--accent-light), #ffffff);
+}
+.g-cell.g-ns1 { background: linear-gradient(135deg, #f8fafc, #ffffff); }
+.g-cell.g-ns2 { background: linear-gradient(135deg, #f8fafc, #ffffff); }
+.g-label {
+  display: block; font-size: 10px; font-weight: 700;
+  color: var(--text-muted); margin-bottom: 5px;
+  font-family: "JetBrains Mono", monospace;
+  text-transform: uppercase; letter-spacing: 0.05em;
+}
+.g-value {
+  display: block; font-size: 12.5px; font-weight: 500;
+  color: var(--text); line-height: 1.35;
+}
+
+/* ── BUTTONS ─────────────────────────────────────────────────── */
+.btn-primary {
+  width: 100%; padding: 13px 16px; margin-top: 8px;
+  border: none; border-radius: var(--radius-sm);
+  background: linear-gradient(135deg, var(--primary), var(--accent));
+  color: white; font-weight: 700; font-size: 14.5px;
+  cursor: pointer;
+  transition: transform 0.1s, box-shadow 0.15s;
+  display: flex; align-items: center; justify-content: center; gap: 10px;
+  box-shadow: 0 6px 18px rgba(79, 70, 229, 0.28);
+  font-family: inherit;
+}
+.btn-primary:hover:not(:disabled) {
+  transform: translateY(-1px);
+  box-shadow: 0 8px 24px rgba(79, 70, 229, 0.38);
+}
+.btn-primary:disabled { opacity: 0.6; cursor: not-allowed; }
+.btn-spinner {
+  width: 16px; height: 16px;
+  border: 2px solid rgba(255, 255, 255, 0.35);
+  border-top-color: white; border-radius: 50%;
+  animation: spin 0.7s linear infinite;
+}
+@keyframes spin { to { transform: rotate(360deg); } }
+
+.err {
+  margin-top: 12px; padding: 10px 12px;
+  background: #fef2f2; border: 1px solid #fecaca;
+  border-radius: var(--radius-sm);
+  color: var(--danger); font-size: 13px; line-height: 1.5;
+}
+
+/* ── RESULTS ─────────────────────────────────────────────────── */
+.results { display: flex; flex-direction: column; gap: 16px; }
+
+/* Pipeline */
+.pipeline-title {
+  font-size: 11px; font-weight: 700;
+  color: var(--text-muted);
+  text-transform: uppercase; letter-spacing: 0.08em;
+  margin-bottom: 14px;
+}
+.pipeline-stages {
+  display: flex; justify-content: space-between; align-items: center;
+  position: relative;
+}
+.pipeline-stages::before {
+  content: ""; position: absolute;
+  top: 14px; left: 4%; right: 4%;
+  height: 2px; background: var(--border);
+  z-index: 0;
+}
+.stage {
+  flex: 1; display: flex; flex-direction: column; align-items: center;
+  position: relative; z-index: 1; gap: 8px;
+}
+.stage-dot {
+  width: 30px; height: 30px;
+  background: white; border: 2px solid var(--border);
+  border-radius: 50%; position: relative;
+  transition: all 0.3s;
+}
+.stage-label {
+  font-size: 11px; font-weight: 700; color: var(--text-muted);
+  text-transform: uppercase; letter-spacing: 0.04em;
+}
+.stage.active .stage-dot {
+  background: linear-gradient(135deg, var(--primary), var(--accent));
+  border-color: transparent;
+  box-shadow: 0 0 0 6px rgba(79, 70, 229, 0.18);
+  animation: pulse 1.2s ease-in-out infinite;
+}
+.stage.done .stage-dot {
+  background: linear-gradient(135deg, var(--primary), var(--accent));
+  border-color: transparent;
+}
+.stage.done .stage-dot::after {
+  content: "✓"; position: absolute; inset: 0;
+  display: grid; place-items: center;
+  color: white; font-size: 14px; font-weight: 700;
+}
+.stage.active .stage-label, .stage.done .stage-label { color: var(--primary); }
+@keyframes pulse {
+  0%, 100% { box-shadow: 0 0 0 6px rgba(79, 70, 229, 0.18); }
+  50%      { box-shadow: 0 0 0 11px rgba(79, 70, 229, 0.08); }
+}
+
+/* Empty state */
+.empty {
+  text-align: center; padding: 72px 28px;
+  background: white;
+  border: 2px dashed var(--border);
+  border-radius: var(--radius);
+}
+.empty-icon { font-size: 60px; margin-bottom: 14px; }
+.empty h3 { font-size: 20px; font-weight: 700; margin-bottom: 8px; }
+.empty p { color: var(--text-muted); font-size: 14px; line-height: 1.7; }
+
+/* Summary bar */
+.summary {
+  display: grid; grid-template-columns: repeat(4, 1fr);
+  gap: 14px;
+  background: linear-gradient(135deg, var(--primary-light), var(--accent-light));
+  border: 1px solid rgba(79, 70, 229, 0.18);
+  border-radius: var(--radius);
+  padding: 20px 22px;
+}
+.summary-metric { display: flex; flex-direction: column; }
+.summary-label {
+  font-size: 11px; font-weight: 700;
+  color: var(--text-muted);
+  text-transform: uppercase; letter-spacing: 0.06em;
+  margin-bottom: 6px;
+}
+.summary-value {
+  font-size: 24px; font-weight: 800;
+  color: var(--text); letter-spacing: -0.02em;
+  font-variant-numeric: tabular-nums;
+}
+.summary-value-sm { font-size: 15px; font-weight: 700; }
+
+/* ── SEED CARD ───────────────────────────────────────────────── */
+.seeds { display: flex; flex-direction: column; gap: 18px; }
+
+.seed-card {
+  background: white;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 22px;
+  box-shadow: var(--shadow-sm);
+  transition: box-shadow 0.2s, transform 0.2s;
+  overflow: hidden;
+  position: relative;
+}
+.seed-card::before {
+  content: ""; position: absolute;
+  top: 0; left: 0; right: 0; height: 3px;
+  background: linear-gradient(90deg, var(--primary), var(--accent));
+  opacity: 0; transition: opacity 0.2s;
+}
+.seed-card:hover {
+  box-shadow: var(--shadow-md);
+}
+.seed-card:hover::before { opacity: 1; }
+
+.seed-head {
+  display: flex; align-items: flex-start; gap: 18px;
+  margin-bottom: 16px;
+}
+.seed-rank-block { min-width: 54px; }
+.seed-rank-label {
+  font-size: 10px; color: var(--text-muted);
+  text-transform: uppercase; font-weight: 700;
+  letter-spacing: 0.06em; display: block; margin-bottom: 2px;
+}
+.seed-rank {
+  font-size: 32px; font-weight: 900;
+  background: linear-gradient(135deg, var(--primary), var(--accent));
+  -webkit-background-clip: text; background-clip: text; color: transparent;
+  font-variant-numeric: tabular-nums;
+  letter-spacing: -0.04em; line-height: 1;
+}
+.seed-info { flex: 1; min-width: 0; }
+.seed-id {
+  font-family: "JetBrains Mono", monospace;
+  font-size: 11.5px; color: var(--text-muted);
+  background: var(--surface-2); padding: 4px 9px;
+  border-radius: 5px; display: inline-block;
+  margin-bottom: 9px;
+}
+.seed-rules { display: flex; flex-wrap: wrap; gap: 6px; }
+.rule-pill {
+  font-family: "JetBrains Mono", monospace;
+  font-size: 10.5px; font-weight: 600;
+  padding: 4px 9px; border-radius: 5px;
+  background: var(--accent-light); color: #7e22ce;
+  border: 1px solid rgba(168, 85, 247, 0.28);
+}
+
+.final-gauge {
+  width: 86px; height: 86px;
+  position: relative; flex-shrink: 0;
+}
+.final-gauge svg { transform: rotate(-90deg); width: 100%; height: 100%; }
+.final-gauge-track { fill: none; stroke: var(--surface-2); stroke-width: 8; }
+.final-gauge-fill {
+  fill: none; stroke-width: 8; stroke-linecap: round;
+  transition: stroke-dashoffset 0.8s ease-out;
+}
+.final-gauge-text {
+  position: absolute; inset: 0;
+  display: grid; place-items: center; text-align: center;
+}
+.final-gauge-value {
+  font-size: 19px; font-weight: 800;
+  color: var(--text); line-height: 1;
+  font-variant-numeric: tabular-nums;
+}
+.final-gauge-label {
+  font-size: 9px; font-weight: 700;
+  color: var(--text-muted);
+  text-transform: uppercase; letter-spacing: 0.08em;
+  margin-top: 3px;
+}
+
+.seed-concept {
+  font-size: 14.5px; line-height: 1.75;
+  color: var(--text);
+  padding: 14px 16px;
+  background: linear-gradient(180deg, var(--surface) 0%, #ffffff 100%);
+  border-left: 3px solid var(--primary);
+  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
+  margin-bottom: 18px;
+  word-break: keep-all;
+}
+
+.seed-section-title {
+  font-size: 10.5px; font-weight: 700;
+  color: var(--text-muted);
+  text-transform: uppercase; letter-spacing: 0.08em;
+  margin: 18px 0 10px;
+}
+
+/* ── TIMELINE ────────────────────────────────────────────────── */
+.timeline {
+  position: relative;
+  background: var(--surface);
+  border-radius: var(--radius-sm);
+  padding: 12px;
+}
+.timeline-bar {
+  height: 42px; display: flex;
+  border-radius: 8px; overflow: hidden;
+  box-shadow: inset 0 1px 2px rgba(0,0,0,0.05);
+}
+.beat-seg {
+  position: relative;
+  display: flex; flex-direction: column; justify-content: center;
+  padding: 0 10px; overflow: hidden; white-space: nowrap;
+  transition: filter 0.15s;
+  cursor: default;
+}
+.beat-seg:hover { filter: brightness(0.94); }
+.beat-seg-name {
+  font-size: 10px; font-weight: 700;
+  text-transform: uppercase; letter-spacing: 0.04em;
+  color: white; text-shadow: 0 1px 2px rgba(0,0,0,0.18);
+  overflow: hidden; text-overflow: ellipsis;
+}
+.beat-seg-time {
+  font-size: 9.5px;
+  color: rgba(255, 255, 255, 0.88);
+  font-family: "JetBrains Mono", monospace;
+}
+.timeline-scale {
+  margin-top: 8px; position: relative; height: 20px;
+}
+.timeline-tick {
+  position: absolute; top: 0;
+  transform: translateX(-50%);
+  font-size: 10px; color: var(--text-muted);
+  font-family: "JetBrains Mono", monospace;
+  font-weight: 600;
+}
+.timeline-tick::before {
+  content: ""; display: block;
+  width: 1px; height: 5px; background: var(--border-strong);
+  margin: 0 auto 3px;
+}
+
+.beats-detail {
+  margin-top: 14px;
+  display: flex; flex-direction: column; gap: 2px;
+}
+.beat-row {
+  display: grid; grid-template-columns: 72px 130px 1fr;
+  gap: 12px; padding: 8px 0;
+  border-bottom: 1px dashed var(--border);
+  align-items: start; font-size: 12.5px;
+}
+.beat-row:last-child { border-bottom: 0; }
+.beat-row-time {
+  font-family: "JetBrains Mono", monospace;
+  color: var(--text-muted); font-weight: 600;
+  font-size: 11.5px;
+}
+.beat-row-name {
+  font-weight: 700; color: var(--primary);
+  font-size: 11px;
+  text-transform: uppercase; letter-spacing: 0.03em;
+}
+.beat-row-content { color: var(--text); line-height: 1.6; }
+
+/* ── SCORES ──────────────────────────────────────────────────── */
+.scores-section {
+  display: grid; grid-template-columns: 220px 1fr;
+  gap: 22px; margin-top: 16px; padding-top: 18px;
+  border-top: 1px solid var(--border);
+}
+.radar-wrap { position: relative; height: 220px; }
+.scores-table {
+  display: grid; grid-template-columns: 1fr 1fr;
+  gap: 8px; align-content: start;
+}
+.score-item {
+  padding: 9px 12px; background: var(--surface); border-radius: 7px;
+  display: flex; justify-content: space-between; align-items: center;
+}
+.score-item-label {
+  font-size: 10.5px; font-weight: 700;
+  color: var(--text-muted);
+  text-transform: uppercase; letter-spacing: 0.04em;
+}
+.score-item-value {
+  font-family: "JetBrains Mono", monospace;
+  font-size: 13.5px; font-weight: 700;
+  color: var(--text);
+  font-variant-numeric: tabular-nums;
+}
+
+/* Beat color palette (6 beats, indigo → rose) */
+.beat-color-0 { background: #6366f1; }
+.beat-color-1 { background: #8b5cf6; }
+.beat-color-2 { background: #a855f7; }
+.beat-color-3 { background: #d946ef; }
+.beat-color-4 { background: #ec4899; }
+.beat-color-5 { background: #f43f5e; }
+
+/* ── FOOTER ──────────────────────────────────────────────────── */
+.footer {
+  border-top: 1px solid var(--border);
+  padding-top: 28px; padding-bottom: 44px;
+  display: flex; flex-direction: column; gap: 14px;
+}
+.foot-details {
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  padding: 14px 18px;
+  background: var(--surface);
+}
+.foot-details summary {
+  cursor: pointer; font-weight: 700;
+  color: var(--text); font-size: 14px;
+}
+.foot-details[open] summary { margin-bottom: 14px; }
+.foot-body ul {
+  list-style: none;
+  display: flex; flex-direction: column; gap: 10px;
+  font-size: 13px; color: var(--text-muted);
+  padding: 4px 0;
+}
+.foot-body li strong { color: var(--text); font-weight: 700; }
+
+.rules-table { display: grid; gap: 2px; font-size: 12px; }
+.rule-row {
+  display: grid;
+  grid-template-columns: 230px 1.2fr 1.6fr 200px;
+  padding: 9px 8px;
+  border-bottom: 1px dashed var(--border);
+  gap: 12px; align-items: start;
+}
+.rule-row:last-child { border-bottom: 0; }
+.rule-row.header {
+  font-weight: 700; color: var(--text-muted);
+  text-transform: uppercase; font-size: 10px;
+  letter-spacing: 0.06em;
+  border-bottom: 1px solid var(--border-strong);
+}
+.rule-id {
+  font-family: "JetBrains Mono", monospace;
+  font-size: 11px; font-weight: 700;
+  color: var(--primary);
+}
+.rule-anchor {
+  font-size: 10.5px; color: var(--text-subtle);
+  font-family: "JetBrains Mono", monospace;
+}
+
+.foot-meta {
+  font-size: 12px; color: var(--text-subtle);
+  text-align: center; padding: 14px 0;
+}
+.foot-meta a { color: var(--primary); text-decoration: none; font-weight: 600; }
+
+/* ── RESPONSIVE ──────────────────────────────────────────────── */
+@media (max-width: 820px) {
+  .summary { grid-template-columns: repeat(2, 1fr); }
+  .scores-section { grid-template-columns: 1fr; }
+  .rule-row { grid-template-columns: 1fr; gap: 4px; }
+  .hero-title { font-size: 30px; }
+  .beats-detail .beat-row { grid-template-columns: 70px 1fr; }
+  .beat-row-name { grid-column: 2; }
+  .beat-row-content { grid-column: 1 / 3; padding-top: 2px; }
+}