Upload app.py

dvnc_ai_v2_hf/app.py

@@ -1,468 +1,369 @@
 import json
-import pathlib
+import math
+import random
 import gradio as gr
-from .core.dvnc_engine import run_discovery
 
-MODELS = ["DVNC Sovereign", "DVNC Atlas", "DVNC Curie"]
-
-BASE_DIR = pathlib.Path(__file__).resolve().parent
-
-#CONNECTOME_SNIPPET = (BASE_DIR / "ui" / "connectome.html").read_text(encoding="utf-8")
-# replaced base connectome with enhanced connectome.
-
-CONNECTOME_SNIPPET = (BASE_DIR / "ui" / "enhanced_connectome.html").read_text(encoding="utf-8")
-
-
-
-def build_chat_html(query, data):
+MODELS = [
+    {"name": "DVNC Sovereign", "tag": "flagship", "desc": "Maximum depth orchestration for frontier discovery"},
+    {"name": "DVNC Atlas", "tag": "research", "desc": "Balanced reasoning, graph traversal, and synthesis"},
+    {"name": "DVNC Curie", "tag": "lab", "desc": "Experimental hypothesis generation for anomalous signals"},
+]
+
+AGENTS = [
+    "Query Interpreter",
+    "Graph Divergence Mapper",
+    "Evidence Harvester",
+    "Analogy Engine",
+    "Hypothesis Composer",
+    "Adversarial Critic",
+    "Experimental Program Designer",
+]
+
+NODES = [
+    {"id": "seed", "label": "Seed Query", "group": "core", "x": 0, "y": 0, "z": 0},
+    {"id": "bio", "label": "Biomaterials", "group": "domain", "x": 18, "y": 12, "z": -8},
+    {"id": "card", "label": "Cardiac Repair", "group": "domain", "x": 34, "y": 2, "z": 14},
+    {"id": "nano", "label": "Nanostructure", "group": "bridge", "x": 14, "y": -18, "z": 16},
+    {"id": "selfasm", "label": "Self-Assembly", "group": "bridge", "x": 30, "y": -16, "z": -16},
+    {"id": "electro", "label": "Electro-signalling", "group": "mechanism", "x": 48, "y": 12, "z": -10},
+    {"id": "immune", "label": "Immune Modulation", "group": "mechanism", "x": 54, "y": -8, "z": 10},
+    {"id": "trial", "label": "Validation Path", "group": "outcome", "x": 70, "y": 0, "z": 0},
+    {"id": "alt1", "label": "Piezoelectric Scaffold", "group": "candidate", "x": 44, "y": 28, "z": 14},
+    {"id": "alt2", "label": "Peptide Mesh", "group": "candidate", "x": 42, "y": -28, "z": -14},
+]
+
+EDGES = [
+    ("seed", "bio"), ("seed", "nano"), ("bio", "card"), ("nano", "selfasm"),
+    ("selfasm", "electro"), ("card", "immune"), ("electro", "trial"), ("immune", "trial"),
+    ("card", "alt1"), ("selfasm", "alt2"), ("alt1", "trial"), ("alt2", "trial")
+]
+
+DEFAULT_PATH = ["seed", "nano", "selfasm", "electro", "trial"]
+
+CANDIDATES = [
+    {
+        "title": "Piezoelectric Scaffold Cascade",
+        "front": "Use mechano-electric scaffolds to convert cardiac strain into micro-current signalling.",
+        "back": "Discovery path: anomalous healing signal -> piezoelectric analog -> ion-channel entrainment -> tissue regeneration. Risk: power density and fibrosis coupling.",
+        "score": 92,
+        "novelty": "High",
+        "agent": "Hypothesis Composer"
+    },
+    {
+        "title": "Peptide Self-Assembly Mesh",
+        "front": "Deploy dynamic peptide meshes that self-assemble around damaged myocardium and guide repair.",
+        "back": "Discovery path: self-assembly -> local immune choreography -> regenerative substrate formation. Risk: degradation timing and targeting specificity.",
+        "score": 88,
+        "novelty": "High",
+        "agent": "Analogy Engine"
+    },
+    {
+        "title": "Immune-Tuned Conductive Hydrogel",
+        "front": "Blend conductivity with macrophage-state modulation to reduce scarring and restore conduction.",
+        "back": "Discovery path: inflammation mismatch -> conductive medium -> macrophage polarization -> synchronized healing. Risk: persistence and biocompatibility.",
+        "score": 85,
+        "novelty": "Medium-High",
+        "agent": "Adversarial Critic"
+    }
+]
+
+
+def build_connectome_html(path_ids):
+    active = set(path_ids)
+    node_map = {n['id']: n for n in NODES}
+    lines = []
+    for a, b in EDGES:
+        na, nb = node_map[a], node_map[b]
+        active_edge = a in active and b in active and abs(path_ids.index(a) - path_ids.index(b)) == 1 if a in path_ids and b in path_ids else False
+        cls = "edge active" if active_edge else "edge"
+        lines.append(f'<line class="{cls}" x1="{na["x"]*6+420:.1f}" y1="{na["y"]*6+280:.1f}" x2="{nb["x"]*6+420:.1f}" y2="{nb["y"]*6+280:.1f}" />')
+    circles = []
+    labels = []
+    for n in NODES:
+        cx = n['x']*6 + 420
+        cy = n['y']*6 + 280
+        cls = f"node {n['group']} {'active' if n['id'] in active else ''}"
+        circles.append(f'<g class="node-wrap"><circle class="{cls}" cx="{cx:.1f}" cy="{cy:.1f}" r="{17 if n["id"] in active else 12}" /><circle class="halo {'active' if n['id'] in active else ''}" cx="{cx:.1f}" cy="{cy:.1f}" r="{28 if n["id"] in active else 0}" /></g>')
+        labels.append(f'<text class="label {'active' if n["id"] in active else ''}" x="{cx+16:.1f}" y="{cy-16:.1f}">{n["label"]}</text>')
     return f'''
-    <div class="chat-panel panel">
-      <div class="bubble user"><span class="role">You</span><p>{query}</p></div>
-      <div class="bubble ai"><span class="role">DVNC</span><p>{data.get("summary","")}</p></div>
-      <div class="bubble system"><span class="role">Primary Hypothesis</span><p>{data.get("primary_hypothesis","")}</p></div>
+    <div class="brain-shell">
+      <div class="brain-header">
+        <div>
+          <p class="eyebrow">Connectome</p>
+          <h3>Concept Brain</h3>
+        </div>
+        <div class="brain-legend">
+          <span><i class="dot dot-live"></i> active route</span>
+          <span><i class="dot dot-node"></i> concept nodes</span>
+        </div>
+      </div>
+      <div class="brain-stage">
+        <div class="orb orb-a"></div><div class="orb orb-b"></div>
+        <svg viewBox="0 0 840 560" class="brain-svg" role="img" aria-label="DVNC connectome visualisation">
+          <defs>
+            <filter id="glow"><feGaussianBlur stdDeviation="4" result="c"/><feMerge><feMergeNode in="c"/><feMergeNode in="SourceGraphic"/></feMerge></filter>
+          </defs>
+          {''.join(lines)}
+          {''.join(circles)}
+          {''.join(labels)}
+        </svg>
+      </div>
     </div>
     '''
 
 
-def build_reasoning_html(steps):
-    chunks = []
-    for s in steps:
-        chunks.append(f'''
-        <details class="tray" {'open' if s['step']==1 else ''}>
-          <summary><span class="step">{s['step']}</span><div><strong>{s['agent']}</strong><small>{s['tag']}</small></div></summary>
-          <div class="tray-body">{s['summary']}</div>
-        </details>
-        ''')
-    return '<div class="panel tray-panel">' + ''.join(chunks) + '</div>'
-
-
 def build_cards_html(cards):
-    html = []
-    for c in cards:
-        html.append(f'''
+    items = []
+    for i, c in enumerate(cards):
+        items.append(f'''
         <article class="candidate-card" tabindex="0">
           <div class="candidate-card-inner">
-            <div class="candidate-face front">
-              <div class="top"><span class="chip">{c['agent']}</span><span class="score">{c['score']}</span></div>
+            <div class="candidate-face candidate-front">
+              <div class="candidate-top"><span class="chip">{c['agent']}</span><span class="score">{c['score']}</span></div>
               <h4>{c['title']}</h4>
               <p>{c['front']}</p>
-              <div class="meta"><span>Novelty</span><strong>{c['novelty']}</strong></div>
+              <div class="meta-row"><span>Novelty</span><strong>{c['novelty']}</strong></div>
+              <button class="mini">Flip insight</button>
             </div>
-            <div class="candidate-face back">
-              <div class="top"><span class="chip alt">Alt path</span><span class="score">{c['score']}</span></div>
+            <div class="candidate-face candidate-back">
+              <div class="candidate-top"><span class="chip alt">Alternative path</span><span class="score">{c['score']}</span></div>
               <h4>{c['title']}</h4>
               <p>{c['back']}</p>
-              <div class="meta"><span>Swap state</span><strong>Ready</strong></div>
+              <div class="meta-row"><span>Swap into route</span><strong>Enabled</strong></div>
+              <button class="mini">Return</button>
             </div>
           </div>
         </article>
         ''')
-    return '<div class="panel cards-panel"><div class="candidate-grid">' + ''.join(html) + '</div></div>'
-
-
-def build_metrics_md(metrics, model_used):
-    lines = [f"# Discovery Output\n", f"**Claude model used:** {model_used}\n", "## Metrics"]
-    for k, v in metrics.items():
-        lines.append(f"- {k}: {v}/100")
-    lines.append("\n## Next action\n- Replace `core/dvnc_engine.py` with your production graph and evidence stack.")
-    return "\n".join(lines)
-
-
-def build_frontend_payload(data):
-    graph = data.get("graph") or {}
-    graph.setdefault("nodes", [])
-    graph.setdefault("edges", [])
-    graph.setdefault("active_path", [])
-    return f"""
-    <script>
-    window.__DVNC_GRAPH__ = {json.dumps(graph)};
-    </script>
-    {CONNECTOME_SNIPPET}
-    """
+    return '<div class="candidate-grid">' + ''.join(items) + '</div>'
+
+
+def build_agent_timeline(reasoning):
+    rows = []
+    for r in reasoning:
+        rows.append(f'''
+        <div class="agent-step">
+          <div class="agent-index">{r['step']}</div>
+          <div class="agent-copy">
+            <div class="agent-head"><h4>{r['agent']}</h4><span>{r['tag']}</span></div>
+            <p>{r['summary']}</p>
+          </div>
+        </div>
+        ''')
+    return '<div class="timeline">' + ''.join(rows) + '</div>'
 
 
-def run(query, model_name):
-    data = run_discovery(query, model_name)
-    return (
-        build_chat_html(query, data),
-        build_frontend_payload(data),
-        build_reasoning_html(data.get("reasoning", [])),
-        build_cards_html(data.get("cards", [])),
-        build_metrics_md(data.get("metrics", {}), data.get("model_used", "unknown")),
-    )
+def build_chat_html(query, result):
+    bubbles = f'''
+    <div class="chat-thread">
+      <div class="bubble bubble-user">
+        <span class="role">You</span>
+        <p>{query}</p>
+      </div>
+      <div class="bubble bubble-ai">
+        <span class="role">DVNC Sovereign</span>
+        <p>{result['summary']}</p>
+      </div>
+      <div class="bubble bubble-system">
+        <span class="role">Discovery Signal</span>
+        <p><strong>Primary hypothesis:</strong> {result['primary_hypothesis']}</p>
+      </div>
+    </div>
+    '''
+    return bubbles
+
+
+def build_models_html(selected):
+    items = []
+    for m in MODELS:
+        active = 'active' if m['name'] == selected else ''
+        items.append(f'''<div class="model-pill {active}"><span class="model-name">{m['name']}</span><span class="model-tag">{m['tag']}</span><small>{m['desc']}</small></div>''')
+    return '<div class="model-switcher">' + ''.join(items) + '</div>'
+
+
+def run_discovery(query, model_name):
+    random.seed(len(query) + len(model_name))
+    if "curie" in query.lower() or "einstein" in query.lower():
+        primary = "Map the anomaly first, then force a distant analogy before composing the experimental programme."
+        path = ["seed", "bio", "card", "immune", "trial"]
+    else:
+        primary = "Use a self-assembling conductive scaffold that transforms mechanical strain into local regenerative signalling."
+        path = DEFAULT_PATH
+    summaries = [
+        "Normalises the user prompt into a graph-searchable seed and isolates the tension inside the question.",
+        "Finds remote conceptual bridges instead of staying near the starting domain cluster.",
+        "Pulls evidence packets and conflict signals required for grounded hypothesis formation.",
+        "Generates cross-domain analogies with a bias toward mechanism transfer rather than keyword similarity.",
+        "Composes the lead hypothesis and two structurally different variants.",
+        "Attacks weak assumptions, hidden confounders, and feasibility gaps.",
+        "Produces a staged validation plan with measurable falsification criteria."
+    ]
+    reasoning = [{"step": i+1, "agent": AGENTS[i], "tag": ["input","graph","evidence","analogy","compose","critique","experiment"][i], "summary": summaries[i]} for i in range(7)]
+    result = {
+        "summary": "A deeper route was chosen through the concept graph, with live alternatives preserved as candidate cards so the reasoning path can be swapped rather than hidden.",
+        "primary_hypothesis": primary,
+        "reasoning": reasoning,
+        "cards": CANDIDATES,
+        "path": path,
+        "metrics": {
+            "Novelty": 93,
+            "Mechanistic clarity": 89,
+            "Experimental tractability": 82,
+            "Cross-domain distance": 91
+        }
+    }
+    chat_html = build_chat_html(query, result)
+    connectome_html = build_connectome_html(path)
+    cards_html = build_cards_html(CANDIDATES)
+    timeline_html = build_agent_timeline(reasoning)
+    metrics = "\n".join([f"- {k}: {v}/100" for k, v in result["metrics"].items()])
+    hypothesis = f"""# Discovery Output\n\n**Model:** {model_name}\n\n**Primary hypothesis:** {result['primary_hypothesis']}\n\n## Scoring\n{metrics}\n\n## Experimental outline\n1. Construct the candidate material or protocol.\n2. Test mechanistic signal expression under controlled conditions.\n3. Compare against baseline and nearest-neighbour alternatives.\n4. Falsify using the adversarial risk criteria surfaced in the reasoning path.\n"""
+    return chat_html, connectome_html, timeline_html, cards_html, hypothesis, build_models_html(model_name)
 
 CSS = r'''
-:root{--bg:#fffaf7;--panel:#ffffff;--panel2:#fff6f1;--line:rgba(17,24,39,.08);--text:#000;--muted:#5f6675;--orange:#ff6b35;--orange-light:#ff955f;--orange-pale:#fff3ec;--teal:#b9efe8;--blue:#8fb2ff;--radius:24px;--shadow:0 16px 44px rgba(17,24,39,.06)}
-html,body,.gradio-container{background:linear-gradient(180deg,#fffaf7 0%,#fff 100%)!important;color:var(--text)!important;font-family:Inter,system-ui,sans-serif}
-.gradio-container{max-width:1480px!important;padding:18px!important} footer{display:none!important}
-#app-shell{border:1px solid var(--line);background:rgba(255,255,255,.92);backdrop-filter:blur(14px);box-shadow:var(--shadow);border-radius:32px;overflow:hidden}
-#app-shell .grid{display:grid;grid-template-columns:1.08fr .92fr;min-height:72vh}.left,.right{padding:20px}.left{border-right:1px solid var(--line);display:flex;flex-direction:column;gap:14px}.right{display:grid;grid-template-rows:auto auto auto 1fr;gap:14px}
-.hero{display:flex;justify-content:space-between;align-items:center;gap:12px}
-.hero-plate{padding:22px 24px 18px 24px;min-height:160px;border-bottom:1px solid var(--line);background:linear-gradient(180deg,rgba(255,255,255,.92) 0%,rgba(255,247,243,.88) 100%)}
-.hero-copy{display:flex;flex-direction:column;justify-content:space-between;gap:16px;min-height:118px}
-.brand{display:flex;gap:14px;align-items:center}
-.logo{width:50px;height:50px;border-radius:16px;display:grid;place-items:center;border:1px solid rgba(255,107,53,.2);background:linear-gradient(135deg,var(--orange-pale),rgba(255,107,53,.08))}
-.logo svg{width:26px;height:26px;color:var(--orange)}
-.brand h1{margin:0;font-size:1.18rem;color:var(--text)}
-.brand p{margin:4px 0 0;color:var(--muted);font-size:.9rem}
-.live{display:flex;gap:10px;align-items:center;color:var(--text)}
-.live i{width:10px;height:10px;border-radius:50%;background:var(--orange);display:inline-block;box-shadow:0 0 18px rgba(255,107,53,.4);animation:pulse 2s ease-in-out infinite}
-.hero-orb-wrap{margin-left:auto;display:flex;align-items:center;justify-content:center;min-width:180px}
-.hero-orb{position:relative;width:110px;height:110px;display:grid;place-items:center}
-.hero-orb-core{width:64px;height:64px;border-radius:50%;background:radial-gradient(circle at 30% 28%,#ffd2be 0%,#ff9a6f 30%,#ff6b35 68%,#d94d1c 100%);box-shadow:0 12px 34px rgba(255,107,53,.28), inset -8px -10px 18px rgba(100,35,10,.22), inset 8px 10px 16px rgba(255,255,255,.22);animation:heroOrbFloat 5s ease-in-out infinite}
-.hero-orb-ring{position:absolute;border-radius:50%;border:1px solid rgba(255,107,53,.16)}
-.hero-orb-ring.ring-a{width:86px;height:86px;animation:spinSlow 10s linear infinite}
-.hero-orb-ring.ring-b{width:108px;height:108px;border-color:rgba(255,107,53,.10);animation:spinReverse 14s linear infinite}
-.hero-orb-glow{position:absolute;width:120px;height:120px;border-radius:50%;background:radial-gradient(circle,rgba(255,107,53,.18) 0%,rgba(255,107,53,.08) 42%,rgba(255,107,53,0) 72%)}
-@keyframes heroOrbFloat{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-5px) scale(1.03)}}
-@keyframes spinSlow{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
-@keyframes spinReverse{from{transform:rotate(360deg)}to{transform:rotate(0deg)}}
-@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.6;transform:scale(.9)}}
-.panel{border:1px solid var(--line);background:#ffffff;border-radius:22px;box-shadow:0 2px 12px rgba(0,0,0,.04)}
-.dvnc-model-cards .gr-radio{
-  display:grid!important;
-  grid-template-columns:repeat(3,1fr);
-  gap:12px;
-}
-
-.dvnc-model-cards label{
-  display:flex!important;
-  flex-direction:column;
-  gap:4px;
-  padding:14px!important;
-  border:1px solid var(--line)!important;
-  border-radius:18px!important;
-  background:#fafbfc!important;
-  cursor:pointer!important;
-  transition:all .2s ease!important;
-  min-height:84px;
-  justify-content:center;
-}
-
-.dvnc-model-cards label:hover{
-  border-color:var(--orange)!important;
-  transform:translateY(-1px);
-  box-shadow:0 10px 22px rgba(255,107,53,.08);
-}
-
-.dvnc-model-cards input[type="radio"]{
-  margin-bottom:8px;
-  accent-color:var(--orange);
-}
-
-.dvnc-model-cards label:has(input[type="radio"]:checked){
-  border-color:var(--orange)!important;
-  background:var(--orange-pale)!important;
-  box-shadow:0 10px 24px rgba(255,107,53,.12);
+:root {
+  --bg: #08090c;
+  --bg2: #0d1015;
+  --panel: rgba(17,20,27,.78);
+  --panel-solid: #0f131a;
+  --panel-2: rgba(21,26,35,.86);
+  --line: rgba(255,255,255,.08);
+  --soft: rgba(255,255,255,.55);
+  --text: #f5f7fb;
+  --muted: #8f99ab;
+  --gold: #f2d293;
+  --teal: #7be7dd;
+  --blue: #7ea9ff;
+  --shadow: 0 20px 60px rgba(0,0,0,.38);
+  --radius: 22px;
 }
-.querybox,.querybox>div{background:#fff!important;border:1.5px solid rgba(255,107,53,.28)!important;border-radius:20px!important;box-shadow:0 6px 22px rgba(255,107,53,.08)!important}.querybox textarea{color:#000!important;background:#fff!important}.querybox:focus-within,.querybox>div:focus-within{border-color:#ff6b35!important;box-shadow:0 0 0 4px rgba(255,107,53,.10),0 8px 28px rgba(255,107,53,.10)!important}
-.chat-panel{padding:14px;display:flex;flex-direction:column;gap:10px;min-height:240px;max-height:300px;overflow:auto}.bubble{max-width:86%;padding:14px 16px;border:1px solid var(--line);border-radius:20px}.bubble .role{font-size:.72rem;text-transform:uppercase;letter-spacing:.14em;color:var(--muted)}.bubble p{margin:6px 0 0;line-height:1.55;color:var(--text)}.bubble.user{margin-left:auto;background:var(--orange-pale);border-color:rgba(255,107,53,.22)}.bubble.ai{background:#fff}.bubble.system{background:var(--orange-pale);border-color:rgba(255,107,53,.22)}
-.brain-shell{padding:14px}.brain-head{display:flex;justify-content:space-between;gap:16px;align-items:flex-end;margin-bottom:10px}.eyebrow{margin:0 0 4px;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--orange)}.brain-head h3{margin:0;font-size:1.02rem;color:var(--text)}.brain-help{color:var(--muted);font-size:.8rem}#dvnc-three-root{
-  height:340px;
-  border-radius:20px;
-  border:1px solid var(--line);
-  overflow:hidden;
-  background:
-    radial-gradient(circle at 50% 45%, rgba(255,107,53,.10), rgba(255,107,53,0) 34%),
-    linear-gradient(180deg,#fff8f5 0%, #fff 100%);
-  position:relative;
-  display:block;
+html, body, .gradio-container {
+  background: radial-gradient(circle at top left, rgba(120,144,255,.14), transparent 26%),
+              radial-gradient(circle at 90% 10%, rgba(242,210,147,.11), transparent 22%),
+              linear-gradient(180deg, #050608 0%, #090b10 50%, #07080c 100%) !important;
+  color: var(--text) !important;
+  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
 }
-.working-orb{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:80px;height:80px;border-radius:50%;background:radial-gradient(circle at 30% 30%,rgba(255,143,102,.9),var(--orange));box-shadow:0 8px 32px rgba(255,107,53,.4),inset 0 -4px 12px rgba(0,0,0,.15);animation:orbPulse 2.5s ease-in-out infinite,orbFloat 4s ease-in-out infinite}
-@keyframes orbPulse{0%,100%{box-shadow:0 8px 32px rgba(255,107,53,.4),inset 0 -4px 12px rgba(0,0,0,.15)}50%{box-shadow:0 12px 48px rgba(255,107,53,.7),inset 0 -4px 12px rgba(0,0,0,.2)}}
-@keyframes orbFloat{0%,100%{transform:translate(-50%,-50%) translateY(0)}50%{transform:translate(-50%,-50%) translateY(-12px)}}
-.tray-panel{padding:14px;display:flex;flex-direction:column;gap:10px}.tray{border:1px solid var(--line);border-radius:18px;background:#ffffff;overflow:hidden}.tray summary{list-style:none;display:grid;grid-template-columns:42px 1fr;gap:12px;align-items:center;padding:12px 14px;cursor:pointer}.tray summary::-webkit-details-marker{display:none}.tray .step{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;color:#ffffff;font-weight:700;background:var(--orange);border:1px solid var(--orange-light)}.tray summary strong{display:block;color:var(--text)}.tray summary small{color:var(--muted);text-transform:uppercase;letter-spacing:.12em}.tray-body{padding:0 14px 14px 68px;color:var(--text);line-height:1.6}
-.cards-panel{padding:16px}.candidate-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.candidate-card{perspective:1200px;min-height:250px}.candidate-card-inner{position:relative;min-height:250px;height:100%;transform-style:preserve-3d;transition:transform .8s cubic-bezier(.2,.7,.1,1)}.candidate-card:hover .candidate-card-inner,.candidate-card:focus .candidate-card-inner{transform:rotateY(180deg)}.candidate-face{position:absolute;inset:0;padding:18px;border-radius:22px;border:1px solid var(--line);backface-visibility:hidden;display:flex;flex-direction:column;gap:12px;box-shadow:0 4px 16px rgba(0,0,0,.06);background:#ffffff}.candidate-face.back{transform:rotateY(180deg);background:var(--orange-pale)}.top,.meta{display:flex;justify-content:space-between;gap:12px}.chip{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--orange);padding:7px 10px;border-radius:999px;border:1px solid rgba(255,107,53,.2);background:var(--orange-pale)}.chip.alt{color:var(--blue);border-color:rgba(37,99,235,.2);background:rgba(37,99,235,.08)}.score{font-weight:700;color:var(--orange)}.candidate-face h4{margin:0;color:var(--text)}.candidate-face p{margin:0;color:var(--text);line-height:1.6}.meta{margin-top:auto;color:var(--muted)}
-.gr-button-primary{background:linear-gradient(135deg,var(--orange),var(--orange-light))!important;color:#fff!important;border:none!important;font-weight:700!important;box-shadow:0 10px 24px rgba(255,107,53,.22)!important}.gr-button-secondary{background:#fff!important;color:#000!important;border:1px solid rgba(255,107,53,.18)!important}
-@media (max-width:1180px){#app-shell .grid{grid-template-columns:1fr}.left{border-right:0;border-bottom:1px solid var(--line)}.model-strip,.candidate-grid{grid-template-columns:1fr}}
+.gradio-container {max-width: 1550px !important; padding: 22px !important;}
+#dvnc-shell {border: 1px solid var(--line); border-radius: 28px; overflow: hidden; background: linear-gradient(180deg, rgba(14,17,24,.86), rgba(7,8,12,.9)); box-shadow: var(--shadow); backdrop-filter: blur(18px);}
+#dvnc-shell .wrap {display:grid; grid-template-columns: 1.12fr .88fr; min-height: 84vh;}
+#dvnc-shell .left, #dvnc-shell .right {padding: 24px;}
+#dvnc-shell .left {border-right: 1px solid var(--line); display:flex; flex-direction:column; gap:18px;}
+#dvnc-shell .right {display:grid; grid-template-rows:auto auto 1fr auto; gap:18px;}
+.hero-bar {display:flex; justify-content:space-between; align-items:center; gap:16px; padding-bottom:8px;}
+.brand {display:flex; align-items:center; gap:14px;}
+.logo {width:42px; height:42px; border-radius:14px; background: linear-gradient(135deg, rgba(242,210,147,.28), rgba(123,231,221,.16)); border:1px solid rgba(255,255,255,.1); display:grid; place-items:center; box-shadow: inset 0 1px 0 rgba(255,255,255,.08);}
+.logo svg {width:24px; height:24px; color: var(--gold);}
+.brand h1 {font-size: 1.05rem; margin:0; font-weight: 650; letter-spacing:.02em;}
+.brand p {margin:3px 0 0; color:var(--muted); font-size:.84rem;}
+.status {display:flex; gap:10px; align-items:center; color:var(--soft); font-size:.85rem;}
+.status-dot {width:10px; height:10px; border-radius:50%; background:var(--teal); box-shadow:0 0 0 6px rgba(123,231,221,.08), 0 0 18px rgba(123,231,221,.4);}
+.panel {background: linear-gradient(180deg, rgba(17,20,27,.82), rgba(12,14,19,.76)); border:1px solid var(--line); border-radius: 22px; box-shadow: inset 0 1px 0 rgba(255,255,255,.04);}
+.chat-panel {padding:18px; display:flex; flex-direction:column; gap:14px; min-height: 340px;}
+.querybox textarea, .querybox input {background: transparent !important; color: var(--text) !important;}
+.querybox, .querybox > div {background: rgba(255,255,255,.02) !important; border-radius: 18px !important; border-color: var(--line) !important;}
+.chat-thread {display:flex; flex-direction:column; gap:14px;}
+.bubble {max-width: 86%; padding:16px 18px; border-radius: 22px; position:relative; border:1px solid var(--line);}
+.bubble p {margin:8px 0 0; line-height:1.6; font-size:.96rem;}
+.bubble .role {font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted);}
+.bubble-user {align-self:flex-end; background: linear-gradient(135deg, rgba(126,169,255,.18), rgba(126,169,255,.08));}
+.bubble-ai {align-self:flex-start; background: linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.03));}
+.bubble-system {align-self:flex-start; background: linear-gradient(135deg, rgba(242,210,147,.12), rgba(242,210,147,.04));}
+.model-switcher {display:grid; grid-template-columns:repeat(3,1fr); gap:12px;}
+.model-pill {padding:14px; border:1px solid var(--line); border-radius:18px; background:rgba(255,255,255,.02); display:flex; flex-direction:column; gap:4px; min-height: 96px;}
+.model-pill.active {border-color: rgba(242,210,147,.45); background: linear-gradient(135deg, rgba(242,210,147,.14), rgba(255,255,255,.03)); box-shadow: inset 0 0 0 1px rgba(242,210,147,.08);}
+.model-name {font-weight:650;}
+.model-tag {font-size:.76rem; text-transform:uppercase; letter-spacing:.12em; color:var(--gold);}
+.model-pill small {color:var(--muted); line-height:1.45;}
+.brain-shell {padding:18px; height:100%;}
+.brain-header {display:flex; justify-content:space-between; align-items:flex-end; gap:16px; margin-bottom:10px;}
+.eyebrow {font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); margin:0 0 4px;}
+.brain-header h3 {margin:0; font-size:1.12rem;}
+.brain-legend {display:flex; gap:14px; color:var(--muted); font-size:.8rem; flex-wrap:wrap;}
+.dot {width:10px; height:10px; display:inline-block; border-radius:50%; margin-right:6px;}
+.dot-live {background:var(--gold); box-shadow:0 0 12px rgba(242,210,147,.65);} .dot-node {background:var(--teal);}
+.brain-stage {position:relative; min-height: 360px; border-radius:20px; overflow:hidden; background: radial-gradient(circle at center, rgba(126,169,255,.08), transparent 35%), linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01)); border:1px solid rgba(255,255,255,.05);}
+.orb {position:absolute; border-radius:50%; filter: blur(40px); opacity:.28; pointer-events:none;}
+.orb-a {width:180px; height:180px; background:rgba(123,231,221,.16); left:10%; top:18%;}
+.orb-b {width:220px; height:220px; background:rgba(242,210,147,.12); right:8%; bottom:12%;}
+.brain-svg {width:100%; height:100%; min-height:360px; transform: perspective(1200px) rotateX(10deg) rotateY(-8deg) scale(1.02);}
+.edge {stroke: rgba(132,153,184,.18); stroke-width:2.2;}
+.edge.active {stroke: var(--gold); stroke-width:3.4; filter:url(#glow); stroke-dasharray: 8 8; animation: pulseEdge 2.8s linear infinite;}
+.node {fill:#7ea9ff; opacity:.88;}
+.node.core {fill:#f5f7fb;} .node.domain {fill:#7be7dd;} .node.bridge {fill:#8ea4ff;} .node.mechanism {fill:#f2d293;} .node.outcome {fill:#ffd9a6;} .node.candidate {fill:#ddadff;}
+.node.active {stroke:#fff7df; stroke-width:2.4; filter:url(#glow);}
+.halo {fill:none;} .halo.active {stroke: rgba(242,210,147,.22); stroke-width:10;}
+.label {fill: rgba(245,247,251,.68); font-size: 12px; letter-spacing: .02em;} .label.active {fill: #fff8e8;}
+.timeline {display:flex; flex-direction:column; gap:10px;}
+.agent-step {display:grid; grid-template-columns:42px 1fr; gap:12px; padding:12px; border:1px solid var(--line); border-radius:18px; background:rgba(255,255,255,.02);}
+.agent-index {width:42px; height:42px; border-radius:14px; display:grid; place-items:center; font-weight:700; color:var(--gold); background:rgba(242,210,147,.08); border:1px solid rgba(242,210,147,.16);}
+.agent-head {display:flex; justify-content:space-between; gap:12px; align-items:center; margin-bottom:4px;}
+.agent-head h4 {margin:0; font-size:.98rem;} .agent-head span {font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted);} .agent-copy p {margin:0; color:#cbd3e2; font-size:.9rem; line-height:1.55;}
+.candidate-grid {display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap:14px;}
+.candidate-card {background:none; perspective:1200px; min-height: 250px;}
+.candidate-card-inner {position:relative; width:100%; height:100%; min-height:250px; transition: transform .8s cubic-bezier(.2,.7,.1,1); transform-style:preserve-3d;}
+.candidate-card:hover .candidate-card-inner, .candidate-card:focus .candidate-card-inner, .candidate-card:focus-within .candidate-card-inner {transform: rotateY(180deg) translateY(-4px);}
+.candidate-face {position:absolute; inset:0; padding:18px; border-radius:22px; border:1px solid var(--line); background: linear-gradient(180deg, rgba(19,22,29,.96), rgba(11,13,18,.96)); backface-visibility:hidden; box-shadow: inset 0 1px 0 rgba(255,255,255,.04), var(--shadow); display:flex; flex-direction:column; gap:12px;}
+.candidate-back {transform: rotateY(180deg); background: linear-gradient(180deg, rgba(29,23,16,.96), rgba(12,11,10,.96));}
+.candidate-top {display:flex; justify-content:space-between; align-items:center; gap:8px;}
+.chip {font-size:.72rem; text-transform:uppercase; letter-spacing:.12em; color:var(--teal); padding:7px 10px; border-radius:999px; background:rgba(123,231,221,.08); border:1px solid rgba(123,231,221,.18);} .chip.alt {color:var(--gold); background:rgba(242,210,147,.08); border-color: rgba(242,210,147,.18);}
+.score {font-weight:700; color:var(--gold);}
+.candidate-face h4 {margin:0; font-size:1rem; line-height:1.3;}
+.candidate-face p {margin:0; color:#cbd3e2; line-height:1.6; font-size:.92rem;}
+.meta-row {margin-top:auto; display:flex; justify-content:space-between; color:var(--muted); font-size:.84rem;}
+.mini {margin-top:8px; align-self:flex-start; color:var(--text); padding:10px 12px; border-radius:14px; border:1px solid var(--line); background:rgba(255,255,255,.03);}
+.prosebox {padding:18px; white-space:pre-wrap; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; line-height:1.55; color:#dfe6f3;}
+.gr-button-primary {background: linear-gradient(135deg, rgba(242,210,147,.92), rgba(224,178,92,.92)) !important; color:#1b1408 !important; border: none !important;}
+.gr-button-secondary {background: rgba(255,255,255,.05) !important; color: var(--text) !important; border: 1px solid var(--line) !important;}
+footer {display:none !important;}
+@keyframes pulseEdge {to {stroke-dashoffset: -32;}}
+@media (max-width: 1180px){#dvnc-shell .wrap{grid-template-columns:1fr;}#dvnc-shell .left{border-right:0;border-bottom:1px solid var(--line)}.candidate-grid,.model-switcher{grid-template-columns:1fr;} }
 '''
 
 HEAD = '''
 <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&display=swap" rel="stylesheet">
-<script type="importmap">
-{
-  "imports": {
-    "three": "https://unpkg.com/three@0.156.0/build/three.module.js",
-    "three/addons/": "https://unpkg.com/three@0.156.0/examples/jsm/"
-  }
-}
-</script>
-<script type="module">
-import * as THREE from 'three';
-import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
-
-function initDVNC(){
-  const root = document.getElementById('dvnc-three-root');
-  if(!root || root.clientWidth === 0 || root.clientHeight === 0) return;
-
-  let graph = window.__DVNC_GRAPH__ || {};
-  const hasRealGraph = Array.isArray(graph.nodes) && graph.nodes.length > 0;
-
-  if(!hasRealGraph){
-    graph = {
-      nodes: [
-        {id:"query", group:"core", x:0, y:0, z:0},
-        {id:"mechanics", group:"domain", x:-26, y:16, z:-8},
-        {id:"conductivity", group:"bridge", x:26, y:12, z:10},
-        {id:"immune", group:"mechanism", x:-18, y:-18, z:14},
-        {id:"repair", group:"outcome", x:24, y:-16, z:-12},
-        {id:"candidate", group:"candidate", x:0, y:26, z:18}
-      ],
-      edges: [
-        ["query","mechanics"],
-        ["query","conductivity"],
-        ["query","immune"],
-        ["mechanics","candidate"],
-        ["conductivity","candidate"],
-        ["immune","repair"],
-        ["candidate","repair"]
-      ],
-      active_path: ["query","conductivity","candidate","repair"]
-    };
-  }
-
-  root.innerHTML = '';
-  root.dataset.ready = '1';
-
-  const scene = new THREE.Scene();
-  const camera = new THREE.PerspectiveCamera(54, root.clientWidth / root.clientHeight, 0.1, 1000);
-  camera.position.set(0, 0, 115);
-
-  const renderer = new THREE.WebGLRenderer({ antialias:true, alpha:true });
-  renderer.setSize(root.clientWidth, root.clientHeight);
-  renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
-  renderer.outputColorSpace = THREE.SRGBColorSpace;
-  root.appendChild(renderer.domElement);
-
-  const controls = new OrbitControls(camera, renderer.domElement);
-  controls.enableDamping = true;
-  controls.enablePan = false;
-  controls.autoRotate = true;
-  controls.autoRotateSpeed = 0.55;
-
-  scene.add(new THREE.AmbientLight(0xffffff, 1.15));
-
-  const key = new THREE.PointLight(0xff6b35, 4.2, 320);
-  key.position.set(38, 42, 60);
-  scene.add(key);
-
-  const fill = new THREE.PointLight(0xffb089, 2.4, 280);
-  fill.position.set(-45, -18, 42);
-  scene.add(fill);
-
-  const rim = new THREE.PointLight(0xffffff, 1.4, 260);
-  rim.position.set(0, 0, 90);
-  scene.add(rim);
-
-  const active = new Set(graph.active_path || []);
-  const nodeMeshes = {};
-  const palette = {
-    core: 0xff6b35,
-    domain: 0xff955f,
-    bridge: 0xff8a4c,
-    mechanism: 0xffb38f,
-    outcome: 0xffc7b3,
-    candidate: 0xff7b47
-  };
-
-  const nodeGeom = new THREE.SphereGeometry(3.2, 28, 28);
-  const haloGeom = new THREE.SphereGeometry(5.8, 28, 28);
-
-  for(const n of graph.nodes || []){
-    const isActive = active.has(n.id);
-    const color = palette[n.group] || 0xd38d73;
-
-    const mat = new THREE.MeshStandardMaterial({
-      color,
-      emissive: isActive ? 0xff6b35 : color,
-      emissiveIntensity: isActive ? 1.9 : 0.28,
-      roughness: 0.22,
-      metalness: 0.1
-    });
-
-    const mesh = new THREE.Mesh(nodeGeom, mat);
-    mesh.position.set(n.x || 0, n.y || 0, n.z || 0);
-    scene.add(mesh);
-    nodeMeshes[n.id] = mesh;
-
-    const halo = new THREE.Mesh(
-      haloGeom,
-      new THREE.MeshBasicMaterial({
-        color: isActive ? 0xff6b35 : color,
-        transparent: true,
-        opacity: isActive ? 0.14 : 0.05
-      })
-    );
-    halo.position.copy(mesh.position);
-    scene.add(halo);
-    mesh.userData.halo = halo;
-  }
-
-  function edgeActive(a,b){
-    const path = graph.active_path || [];
-    const ia = path.indexOf(a), ib = path.indexOf(b);
-    return ia >= 0 && ib >= 0 && Math.abs(ia - ib) === 1;
-  }
-
-  for(const e of graph.edges || []){
-    const [a,b] = e;
-    if(!nodeMeshes[a] || !nodeMeshes[b]) continue;
-
-    const pts = [nodeMeshes[a].position, nodeMeshes[b].position];
-    const geo = new THREE.BufferGeometry().setFromPoints(pts);
-    const isActive = edgeActive(a,b);
-
-    const line = new THREE.Line(
-      geo,
-      new THREE.LineBasicMaterial({
-        color: isActive ? 0xff6b35 : 0xd9c4bb,
-        transparent: true,
-        opacity: isActive ? 1.0 : 0.72
-      })
-    );
-
-    line.userData.active = isActive;
-    scene.add(line);
-  }
-
-  const starPositions = [];
-  for(let i = 0; i < 900; i++){
-    starPositions.push((Math.random() - 0.5) * 220);
-    starPositions.push((Math.random() - 0.5) * 220);
-    starPositions.push((Math.random() - 0.5) * 220);
-  }
-
-  const stars = new THREE.Points(
-    new THREE.BufferGeometry().setAttribute(
-      'position',
-      new THREE.Float32BufferAttribute(starPositions, 3)
-    ),
-    new THREE.PointsMaterial({
-      color: 0xf1b6a1,
-      size: 0.85,
-      transparent: true,
-      opacity: 0.55
-    })
-  );
-  scene.add(stars);
-
-  const clock = new THREE.Clock();
-  function animate(){
-    requestAnimationFrame(animate);
-    const t = clock.getElapsedTime();
-
-    Object.values(nodeMeshes).forEach((m, i) => {
-      const pulse = 1 + Math.sin(t * 1.8 + i) * 0.06;
-      m.scale.setScalar(pulse);
-      if(m.userData.halo){
-        const hs = 1 + (Math.sin(t * 2.3 + i) + 1) * 0.08;
-        m.userData.halo.scale.setScalar(hs);
-      }
-    });
-
-    stars.rotation.y += 0.0008;
-    controls.update();
-    renderer.render(scene, camera);
-  }
-  animate();
-
-  const resize = () => {
-    if(!root.clientWidth || !root.clientHeight) return;
-    camera.aspect = root.clientWidth / root.clientHeight;
-    camera.updateProjectionMatrix();
-    renderer.setSize(root.clientWidth, root.clientHeight);
-  };
-
-  window.addEventListener('resize', resize, { passive:true });
-}
-
-function syncModelCards(){
-  const root = document;
-  const radios = root.querySelectorAll('input[name="dvnc-model-card"]');
-  const gradioRadios = root.querySelectorAll('#dvnc-model-radio input[type="radio"]');
-  if(!radios.length || !gradioRadios.length) return;
-
-  const setActiveCard = (value) => {
-    root.querySelectorAll('.model-pill').forEach(card => card.classList.remove('active'));
-    const activeInput = root.querySelector(`input[name="dvnc-model-card"][value="${value}"]`);
-    if(activeInput){
-      activeInput.checked = true;
-      activeInput.closest('.model-pill')?.classList.add('active');
-    }
-  };
-
-  radios.forEach(radio => {
-    if(radio.dataset.bound === '1') return;
-    radio.dataset.bound = '1';
-    radio.addEventListener('change', () => {
-      const next = radio.value;
-      const target = Array.from(gradioRadios).find(r => r.value === next);
-      if(target){
-        target.click();
-      }
-      setActiveCard(next);
-    });
-  });
-
-  const checked = Array.from(gradioRadios).find(r => r.checked);
-  if(checked){
-    setActiveCard(checked.value);
-  }
-}
-
-new MutationObserver(()=>{initDVNC(); syncModelCards();}).observe(document.documentElement,{childList:true,subtree:true});
-window.addEventListener('load', ()=>{initDVNC(); syncModelCards();});
-setInterval(()=>{initDVNC(); syncModelCards();}, 1200);
-</script>
 '''
 
 with gr.Blocks(css=CSS, head=HEAD, theme=gr.themes.Base(), fill_height=True) as demo:
     gr.HTML('''
-    <div id="app-shell">
-      <div class="hero hero-plate">
-        <div class="hero-copy">
-          <div class="brand">
-            <div class="logo"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7"><path d="M5 17L12 4l7 13"/><path d="M8.5 12.5h7"/><circle cx="12" cy="12" r="1.8" fill="currentColor" stroke="none"/></svg></div>
-            <div>
-              <h1>DVNC.AI</h1>
-              <p>Connectome-native reasoning · premium scientific discovery interface</p>
+    <div id="dvnc-shell">
+      <div class="wrap">
+        <section class="left">
+          <div class="hero-bar">
+            <div class="brand">
+              <div class="logo" aria-hidden="true">
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7"><path d="M5 17L12 4l7 13"/><path d="M8.5 12.5h7"/><circle cx="12" cy="12" r="1.8" fill="currentColor" stroke="none"/></svg>
+              </div>
+              <div>
+                <h1>DVNC.AI</h1>
+                <p>Sovereign discovery interface · connectome-native reasoning</p>
+              </div>
             </div>
+            <div class="status"><span class="status-dot"></span><span>Live orchestration</span></div>
           </div>
-          <div class="live"><i></i><span>Claude-linked runtime</span></div>
-        </div>
-        <div class="hero-orb-wrap">
-          <div class="hero-orb">
-            <div class="hero-orb-core"></div>
-            <div class="hero-orb-ring ring-a"></div>
-            <div class="hero-orb-ring ring-b"></div>
-            <div class="hero-orb-glow"></div>
-          </div>
-        </div>
-      </div>
     ''')
-    model = gr.Radio(
-        choices=MODELS,
-        value="DVNC Sovereign",
-        label="Model family",
-        elem_id="dvnc-model-cards",
-        elem_classes=["dvnc-model-cards"]
-    )
-    query = gr.Textbox(label="Discovery query", lines=3, elem_classes=["querybox"], placeholder="Ask a scientific question, anomaly, mechanism, or hypothesis target…")
+    model_html = gr.HTML(build_models_html("DVNC Sovereign"))
+    with gr.Row():
+        model = gr.Dropdown(choices=[m["name"] for m in MODELS], value="DVNC Sovereign", label="Model tier")
+    query = gr.Textbox(label="Discovery query", elem_classes=["querybox"], placeholder="Enter a scientific question, anomaly, or breakthrough direction…", lines=4)
     with gr.Row():
         run_btn = gr.Button("Run discovery", variant="primary")
         example_btn = gr.Button("Load example", variant="secondary")
-    chat = gr.HTML('<div class="chat-panel panel"><div class="bubble ai"><span class="role">DVNC</span><p>Enter a discovery prompt to trigger Claude-backed orchestration or demo mode if no API key is set.</p></div></div>')
+    chat = gr.HTML('<div class="panel chat-panel"><div class="chat-thread"><div class="bubble bubble-ai"><span class="role">DVNC</span><p>Enter a query to activate the 7-agent discovery stack and illuminate the chosen path through the concept brain.</p></div></div></div>')
     gr.HTML('</section><section class="right">')
-    connectome = gr.HTML(CONNECTOME_SNIPPET)
-    trays = gr.HTML('<div class="panel tray-panel"></div>')
-    cards = gr.HTML('<div class="panel cards-panel"></div>')
-    output = gr.Markdown('# Discovery Output\n\nAwaiting query.')
+    connectome = gr.HTML(build_connectome_html(DEFAULT_PATH))
+    timeline = gr.HTML('<div class="panel" style="padding:18px"><div class="timeline"></div></div>')
+    cards = gr.HTML('<div class="panel" style="padding:18px"><div class="candidate-grid"></div></div>')
+    output = gr.Markdown("# Discovery Output\n\nAwaiting query.")
     gr.HTML('</section></div></div>')
 
-    example_btn.click(lambda: "How could a self-assembling conductive biomaterial improve cardiac repair by converting mechanical strain into regenerative signalling?", outputs=query)
-    run_btn.click(run, inputs=[query, model], outputs=[chat, connectome, trays, cards, output])
+    def load_example():
+        return "How could a self-assembling conductive biomaterial improve cardiac tissue regeneration by converting mechanical strain into repair signalling?"
+
+    example_btn.click(fn=load_example, outputs=query)
+    run_btn.click(fn=run_discovery, inputs=[query, model], outputs=[chat, connectome, timeline, cards, output, model_html])
 
-if __name__ == '__main__':
-    demo.launch()
+if __name__ == "__main__":
+    demo.launch()