| from __future__ import annotations |
|
|
| import base64 |
| import html |
| import json |
| import mimetypes |
| from functools import lru_cache |
| from pathlib import Path |
| from typing import Any |
|
|
| import gradio as gr |
|
|
| from lifechoice_engine import ( |
| METRICS, |
| MODEL_ID, |
| SimulationSession, |
| choose, |
| current_node, |
| character_expression, |
| environment_image, |
| environment_state, |
| prefetch_node, |
| split_dilemma, |
| start_session, |
| ) |
|
|
| ROOT = Path(__file__).parent |
| PERSONA_ASSETS = { |
| "Family": ROOT / "assets" / "personas" / "family.webp", |
| "Friend": ROOT / "assets" / "personas" / "friend.webp", |
| "Mentor": ROOT / "assets" / "personas" / "mentor.webp", |
| "Partner": ROOT / "assets" / "personas" / "friend.webp", |
| "Inner Voice": ROOT / "assets" / "personas" / "mentor.webp", |
| } |
|
|
| CSS = """ |
| :root { |
| --night: #070a12; |
| --panel: rgba(9, 13, 24, .90); |
| --line: rgba(255, 255, 255, .14); |
| --cream: #fff7df; |
| --muted: #bbb7aa; |
| --gold: #ffc857; |
| --coral: #ff6b5f; |
| --cyan: #5ce1e6; |
| --green: #74e59b; |
| } |
| * { box-sizing: border-box; } |
| body, .gradio-container { |
| background: |
| radial-gradient(circle at 12% -8%, rgba(65, 71, 150, .34), transparent 32rem), |
| linear-gradient(180deg, #11162a 0%, var(--night) 48%, #05070c 100%) !important; |
| color: var(--cream) !important; |
| } |
| .gradio-container { |
| max-width: 1180px !important; |
| padding: 22px 22px 34px !important; |
| font-family: Inter, ui-sans-serif, system-ui, sans-serif !important; |
| } |
| footer { display: none !important; } |
| .app-header { |
| display: flex; |
| align-items: flex-end; |
| justify-content: space-between; |
| gap: 24px; |
| margin: 5px 2px 18px; |
| } |
| .brand-lockup h1 { |
| color: #fff !important; |
| font-family: "Arial Black", Impact, sans-serif; |
| font-size: clamp(2rem, 6vw, 4.7rem); |
| line-height: .84; |
| letter-spacing: -.075em; |
| margin: 7px 0 9px; |
| text-transform: uppercase; |
| } |
| .brand-lockup h1 span { color: var(--gold); } |
| .brand-lockup p { color: var(--muted) !important; margin: 0; max-width: 670px; } |
| .eyebrow { |
| color: var(--cyan) !important; |
| font-family: ui-monospace, SFMono-Regular, Menlo, monospace; |
| font-size: .72rem; |
| font-weight: 800; |
| letter-spacing: .14em; |
| text-transform: uppercase; |
| } |
| .model-chip { |
| border: 1px solid rgba(92, 225, 230, .4); |
| border-radius: 999px; |
| color: var(--cyan); |
| flex: 0 0 auto; |
| font: 700 .72rem ui-monospace, monospace; |
| padding: 9px 12px; |
| } |
| .setup-card { |
| background: linear-gradient(145deg, rgba(22, 27, 48, .98), rgba(8, 11, 21, .98)); |
| border: 1px solid var(--line); |
| border-radius: 22px; |
| box-shadow: 0 24px 80px rgba(0, 0, 0, .36); |
| overflow: hidden; |
| padding: 10px; |
| } |
| .setup-intro { |
| min-height: 100%; |
| padding: 26px 22px; |
| background: |
| linear-gradient(180deg, rgba(7, 10, 18, .08), rgba(7, 10, 18, .92)), |
| url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cpath d='M0 40h80M40 0v80' stroke='%23ffffff' stroke-opacity='.035'/%3E%3C/svg%3E"); |
| border-radius: 15px; |
| } |
| .setup-intro h2 { |
| color: #fff !important; |
| font-family: "Arial Black", Impact, sans-serif; |
| font-size: clamp(1.8rem, 4vw, 3.2rem); |
| letter-spacing: -.05em; |
| line-height: .95; |
| margin: 24px 0 14px; |
| text-transform: uppercase; |
| } |
| .setup-intro p { color: var(--muted) !important; line-height: 1.65; } |
| .feature-list { display: grid; gap: 11px; margin-top: 26px; } |
| .feature { |
| align-items: center; |
| border-top: 1px solid rgba(255,255,255,.09); |
| color: #ddd8ca; |
| display: flex; |
| font-size: .88rem; |
| gap: 10px; |
| padding-top: 11px; |
| } |
| .feature b { color: var(--gold); font: 800 .72rem ui-monospace, monospace; } |
| .form-panel { padding: 18px 14px 12px; } |
| .gradio-container label span { color: #d9d5c8 !important; font-weight: 700 !important; } |
| .gradio-container textarea, |
| .gradio-container input { |
| color: #fff !important; |
| } |
| .gradio-container .block { |
| border-color: rgba(255,255,255,.12) !important; |
| } |
| #begin-button, #commit-button { |
| background: linear-gradient(135deg, var(--gold), #ff9f43) !important; |
| border: 0 !important; |
| box-shadow: 0 10px 30px rgba(255, 159, 67, .22); |
| color: #17120a !important; |
| font-family: "Arial Black", Impact, sans-serif !important; |
| letter-spacing: .04em; |
| min-height: 50px; |
| text-transform: uppercase; |
| } |
| #begin-button:hover, #commit-button:hover { filter: brightness(1.08); transform: translateY(-1px); } |
| .microcopy { color: #8f8b80 !important; font-size: .75rem; line-height: 1.5; margin: 9px 2px 0; } |
| .game-frame { |
| aspect-ratio: 16 / 9; |
| background: #111; |
| border: 1px solid rgba(255,255,255,.18); |
| border-radius: 22px; |
| box-shadow: 0 26px 90px rgba(0,0,0,.52); |
| isolation: isolate; |
| min-height: 530px; |
| overflow: hidden; |
| position: relative; |
| } |
| .world-bg { |
| background-position: center; |
| background-size: cover; |
| filter: saturate(.9) contrast(1.04); |
| inset: 0; |
| position: absolute; |
| transform: scale(1.015); |
| z-index: -3; |
| } |
| .world-shade { |
| background: |
| linear-gradient(90deg, rgba(3,5,10,.88) 0%, rgba(3,5,10,.34) 57%, rgba(3,5,10,.72) 100%), |
| linear-gradient(0deg, rgba(3,5,10,.94) 0%, transparent 38%, rgba(3,5,10,.25) 100%); |
| inset: 0; |
| position: absolute; |
| z-index: -2; |
| } |
| .scanlines { |
| background: repeating-linear-gradient(0deg, transparent 0, transparent 3px, rgba(0,0,0,.08) 4px); |
| inset: 0; |
| pointer-events: none; |
| position: absolute; |
| z-index: 5; |
| } |
| .stage-top { |
| align-items: flex-start; |
| display: flex; |
| justify-content: space-between; |
| padding: clamp(16px, 3vw, 28px); |
| } |
| .scenario-card { |
| backdrop-filter: blur(12px); |
| background: var(--panel); |
| border: 1px solid rgba(255,255,255,.17); |
| border-left: 4px solid var(--gold); |
| border-radius: 6px 16px 16px 6px; |
| box-shadow: 0 18px 55px rgba(0,0,0,.34); |
| max-width: 64%; |
| padding: clamp(15px, 2.5vw, 25px); |
| } |
| .scene-meta { |
| color: var(--cyan); |
| font: 800 .68rem ui-monospace, monospace; |
| letter-spacing: .12em; |
| text-transform: uppercase; |
| } |
| .scenario-card h2 { |
| color: #fff !important; |
| font-family: "Arial Black", Impact, sans-serif; |
| font-size: clamp(1.25rem, 3vw, 2.15rem); |
| letter-spacing: -.035em; |
| line-height: 1; |
| margin: 9px 0 12px; |
| text-transform: uppercase; |
| } |
| .scenario-card p { color: #f0ecdf !important; font-size: clamp(.87rem, 1.5vw, 1rem); line-height: 1.58; margin: 0; } |
| .source-line { color: #8f8b80; display: block; font: .64rem ui-monospace, monospace; margin-top: 14px; } |
| .hud { |
| backdrop-filter: blur(10px); |
| background: rgba(7,10,18,.84); |
| border: 1px solid rgba(255,255,255,.14); |
| border-radius: 14px; |
| min-width: 210px; |
| padding: 13px; |
| width: 25%; |
| } |
| .hud-title { color: var(--gold); font: 900 .68rem ui-monospace, monospace; letter-spacing: .12em; margin-bottom: 10px; } |
| .metric-row { margin: 8px 0; } |
| .metric-label { color: #d6d2c7; display: flex; font: 700 .62rem ui-monospace, monospace; justify-content: space-between; text-transform: uppercase; } |
| .metric-track { background: rgba(255,255,255,.11); height: 5px; margin-top: 5px; overflow: hidden; } |
| .metric-fill { background: linear-gradient(90deg, var(--cyan), var(--green)); height: 100%; } |
| .metric-row.stress .metric-fill { background: linear-gradient(90deg, #ffb347, var(--coral)); } |
| .stage-bottom { bottom: 0; display: flex; justify-content: space-between; left: 0; padding: 0 27px 24px; position: absolute; right: 0; } |
| .persona-bubble { |
| align-self: flex-end; |
| backdrop-filter: blur(10px); |
| background: rgba(10,13,22,.91); |
| border: 1px solid rgba(255,255,255,.16); |
| border-radius: 14px; |
| display: flex; |
| gap: 12px; |
| max-width: 58%; |
| padding: 10px 13px; |
| } |
| .persona-bubble img { border: 2px solid var(--cyan); border-radius: 8px; height: 58px; object-fit: cover; width: 58px; } |
| .persona-copy b { color: var(--cyan); display: block; font: 800 .68rem ui-monospace, monospace; letter-spacing: .08em; text-transform: uppercase; } |
| .persona-copy p { color: #eee9dc !important; font-size: .8rem; line-height: 1.4; margin: 5px 0 0; } |
| .player-wrap { align-items: flex-end; display: flex; gap: 12px; } |
| .state-pill { |
| background: rgba(7,10,18,.82); |
| border: 1px solid rgba(255,255,255,.15); |
| border-radius: 999px; |
| color: var(--cream); |
| font: 800 .63rem ui-monospace, monospace; |
| margin-bottom: 8px; |
| padding: 7px 10px; |
| text-transform: uppercase; |
| } |
| .player-sprite { |
| background-repeat: no-repeat; |
| background-size: 400% 100%; |
| filter: drop-shadow(0 16px 9px rgba(0,0,0,.55)); |
| height: 142px; |
| image-rendering: pixelated; |
| width: 126px; |
| } |
| .cascade-banner { |
| animation: slide-in .28s ease-out; |
| background: linear-gradient(90deg, rgba(255,107,95,.96), rgba(118,52,83,.94)); |
| border: 1px solid rgba(255,255,255,.2); |
| box-shadow: 0 10px 35px rgba(0,0,0,.35); |
| color: #fff; |
| left: 50%; |
| max-width: 70%; |
| padding: 10px 18px; |
| position: absolute; |
| text-align: center; |
| top: 49%; |
| transform: translate(-50%, -50%); |
| z-index: 4; |
| } |
| .loading-stage { |
| align-items: center; |
| background: |
| radial-gradient(circle at 50% 35%, rgba(92,225,230,.10), transparent 30%), |
| linear-gradient(145deg, #11182a, #070a12); |
| display: flex; |
| flex-direction: column; |
| gap: 14px; |
| justify-content: center; |
| min-height: 530px; |
| text-align: center; |
| } |
| .loading-orbit { |
| animation: orbit 1.05s linear infinite; |
| border: 3px solid rgba(255,255,255,.11); |
| border-radius: 50%; |
| border-top-color: var(--gold); |
| height: 52px; |
| width: 52px; |
| } |
| .loading-stage h2 { color: #fff !important; font: 1.7rem "Arial Black", Impact, sans-serif; margin: 0; text-transform: uppercase; } |
| .loading-stage p { color: var(--muted) !important; margin: 0; max-width: 460px; } |
| .loading-steps { color: var(--cyan); font: 700 .67rem ui-monospace, monospace; letter-spacing: .09em; text-transform: uppercase; } |
| .cascade-banner b { display: block; font: 900 .7rem ui-monospace, monospace; letter-spacing: .12em; text-transform: uppercase; } |
| .cascade-banner span { font-size: .76rem; } |
| .report-card { |
| backdrop-filter: blur(15px); |
| background: rgba(7,10,18,.94); |
| border: 1px solid rgba(255,255,255,.18); |
| border-top: 4px solid var(--gold); |
| border-radius: 16px; |
| inset: 6%; |
| overflow: auto; |
| padding: clamp(20px, 4vw, 42px); |
| position: absolute; |
| z-index: 4; |
| } |
| .report-card h2 { color: var(--gold) !important; font: clamp(1.8rem, 5vw, 3.7rem)/.95 "Arial Black", Impact, sans-serif; letter-spacing: -.055em; margin: 8px 0 18px; text-transform: uppercase; } |
| .report-card p { color: #e7e2d5 !important; line-height: 1.62; max-width: 850px; } |
| .report-card details { color: #aaa59a; margin-top: 18px; } |
| .report-card pre { white-space: pre-wrap; } |
| .choices-shell { |
| background: rgba(8,11,20,.78); |
| border: 1px solid rgba(255,255,255,.12); |
| border-radius: 18px; |
| margin-top: 14px; |
| padding: 14px; |
| } |
| .choice-heading { align-items: center; display: flex; justify-content: space-between; margin: 2px 2px 11px; } |
| .choice-heading b { color: #fff; font-family: "Arial Black", Impact, sans-serif; letter-spacing: .02em; text-transform: uppercase; } |
| .choice-heading span { color: #827e74; font: .66rem ui-monospace, monospace; } |
| #choice-cards label { |
| background: rgba(255,255,255,.035) !important; |
| border: 1px solid rgba(255,255,255,.12) !important; |
| border-radius: 10px !important; |
| margin: 6px 0 !important; |
| padding: 11px 12px !important; |
| transition: .16s ease; |
| } |
| #choice-cards label:hover { background: rgba(255,200,87,.08) !important; border-color: rgba(255,200,87,.55) !important; transform: translateX(3px); } |
| #choice-cards label:has(input:checked) { background: rgba(255,200,87,.13) !important; border-color: var(--gold) !important; } |
| #path-options label, #persona-options label { |
| background: rgba(255,255,255,.045) !important; |
| border: 1px solid rgba(255,255,255,.11) !important; |
| color: #e6e1d4 !important; |
| } |
| #path-options label:has(input:checked), #persona-options label:has(input:checked) { |
| background: rgba(255,200,87,.12) !important; |
| border-color: rgba(255,200,87,.7) !important; |
| } |
| #detected-paths { color: var(--cyan) !important; opacity: .74; } |
| #reset-button { |
| background: transparent !important; |
| border: 1px solid rgba(255,255,255,.15) !important; |
| color: #aaa59a !important; |
| margin-top: 11px; |
| } |
| #reset-button:hover { border-color: rgba(255,200,87,.45) !important; color: var(--gold) !important; } |
| @keyframes slide-in { from { opacity: 0; transform: translate(-50%, -42%); } to { opacity: 1; transform: translate(-50%, -50%); } } |
| @keyframes orbit { to { transform: rotate(360deg); } } |
| @media (max-width: 760px) { |
| .gradio-container { padding: 12px !important; } |
| .app-header { align-items: flex-start; flex-direction: column; } |
| .game-frame { aspect-ratio: auto; min-height: 660px; } |
| .stage-top { display: block; } |
| .scenario-card { max-width: 100%; } |
| .hud { margin-top: 10px; width: 100%; } |
| .metric-row { display: inline-block; margin: 6px 1.2%; width: 46%; } |
| .stage-bottom { padding: 0 15px 17px; } |
| .persona-bubble { max-width: 74%; } |
| .player-sprite { height: 105px; width: 93px; } |
| .state-pill { display: none; } |
| } |
| """ |
|
|
|
|
| @lru_cache(maxsize=32) |
| def image_data_uri(path_text: str) -> str: |
| path = Path(path_text) |
| mime = mimetypes.guess_type(path.name)[0] or "image/png" |
| encoded = base64.b64encode(path.read_bytes()).decode("ascii") |
| return f"data:{mime};base64,{encoded}" |
|
|
|
|
| def parse_paths(dilemma: str) -> tuple[gr.Radio, str]: |
| path_a, path_b = split_dilemma(dilemma) |
| return ( |
| gr.Radio(choices=[(path_a, "A"), (path_b, "B")], value="A", label="Choose the future to enter"), |
| f"PATHS DETECTED: {path_a.upper()} / {path_b.upper()}", |
| ) |
|
|
|
|
| def begin(dilemma: str, chosen_key: str, calibration: str, persona: str): |
| if len(dilemma.strip()) < 5: |
| raise gr.Error("Enter a real dilemma first.") |
| if not calibration.strip(): |
| raise gr.Error("Add one concrete pressure, constraint, or proof point.") |
| yield ( |
| None, |
| loading_html(dilemma, calibration), |
| gr.Radio(choices=[], value=None), |
| "", |
| gr.Group(visible=False), |
| gr.Column(visible=False), |
| gr.Group(visible=False), |
| gr.Group(visible=True), |
| gr.Button(interactive=False, value="Building your world..."), |
| ) |
| session = start_session(dilemma, chosen_key or "A", calibration, persona, prefetch=False) |
| node = current_node(session) |
| yield ( |
| session, |
| game_html(session, node), |
| gr.Radio(choices=_choice_options(node), value=None, label="Choose your move"), |
| "", |
| gr.Group(visible=False), |
| gr.Column(visible=True), |
| gr.Group(visible=False), |
| gr.Group(visible=True), |
| gr.Button(interactive=True, value="Commit choice"), |
| ) |
| prefetch_node(session, 1) |
|
|
|
|
| def make_choice(session: SimulationSession, choice_value: str | None, custom_choice: str): |
| if session is None: |
| raise gr.Error("Start a simulation first.") |
| custom = custom_choice.strip() |
| if not custom and choice_value is None: |
| raise gr.Error("Choose an option or write your own move.") |
| result = choose(session, int(choice_value or 0), custom) |
| if result["complete"]: |
| return ( |
| session, |
| game_html( |
| session, |
| reaction=result.get("reaction", ""), |
| cascade=result.get("cascade"), |
| report=result["report"], |
| ), |
| gr.Radio(choices=[], value=None), |
| "", |
| gr.Group(visible=True), |
| gr.Column(visible=False), |
| gr.Group(visible=False), |
| gr.Button(interactive=False), |
| ) |
| node = result["node"] |
| return ( |
| session, |
| game_html( |
| session, |
| node, |
| reaction=result.get("reaction", ""), |
| cascade=result.get("cascade"), |
| ), |
| gr.Radio(choices=_choice_options(node), value=None, label="Choose your move"), |
| "", |
| gr.Group(visible=False), |
| gr.Column(visible=True), |
| gr.Group(visible=False), |
| gr.Button(interactive=True), |
| ) |
|
|
|
|
| def reset(): |
| return ( |
| None, |
| "", |
| gr.Radio(choices=[], value=None), |
| "", |
| gr.Group(visible=False), |
| gr.Column(visible=False), |
| gr.Group(visible=True), |
| gr.Group(visible=False), |
| gr.Button(interactive=True), |
| ) |
|
|
|
|
| def loading_html(dilemma: str, calibration: str) -> str: |
| path_a, path_b = split_dilemma(dilemma) |
| detail = " ".join(calibration.split())[:150] |
| return f""" |
| <div class="game-frame loading-stage"> |
| <div class="loading-orbit"></div> |
| <div class="eyebrow">Building a personalized causal world</div> |
| <h2>{html.escape(path_a)} / {html.escape(path_b)}</h2> |
| <p>Connecting your real constraint to the opening scene: {html.escape(detail)}</p> |
| <div class="loading-steps">Calibrating state / placing consequences / preparing choices</div> |
| </div> |
| """ |
|
|
|
|
| def game_html( |
| session: SimulationSession, |
| node: dict[str, Any] | None = None, |
| reaction: str = "", |
| cascade: dict[str, str] | None = None, |
| report: dict[str, Any] | None = None, |
| ) -> str: |
| state = environment_state(session.world_state) |
| expression = character_expression(session.world_state) |
| background = image_data_uri(environment_image(session)) |
| sprite = image_data_uri(str(ROOT / "assets" / "characters" / "character.png")) |
| portrait = image_data_uri(str(PERSONA_ASSETS[session.persona])) |
| sprite_position = {"neutral": "0%", "stressed": "33.333%", "confident": "66.666%"}[expression] |
| node = node or { |
| "month_label": "Future report", |
| "node_theme": "reflection", |
| "scenario": "", |
| "generation_source": "causal ledger", |
| } |
|
|
| cascade_markup = "" |
| if cascade: |
| cascade_markup = f""" |
| <div class="cascade-banner"> |
| <b>{html.escape(cascade['label'])}</b> |
| <span>{html.escape(cascade['memory'])} {html.escape(cascade['effect'])}</span> |
| </div> |
| """ |
|
|
| persona_text = reaction or ( |
| f"I'll stay with you through this version of {session.chosen_path}. " |
| "Pay attention to what each choice costs, not only what it promises." |
| ) |
| persona_markup = f""" |
| <div class="persona-bubble"> |
| <img src="{portrait}" alt="{html.escape(session.persona)}"> |
| <div class="persona-copy"> |
| <b>{html.escape(session.persona)}</b> |
| <p>{html.escape(persona_text)}</p> |
| </div> |
| </div> |
| """ |
|
|
| report_markup = report_html(report) if report else "" |
| return f""" |
| <div class="game-frame"> |
| <div class="world-bg" style="background-image:url('{background}')"></div> |
| <div class="world-shade"></div> |
| <div class="stage-top"> |
| <section class="scenario-card"> |
| <div class="scene-meta">{html.escape(node['month_label'])} / {html.escape(node['node_theme'])}</div> |
| <h2>{html.escape(session.chosen_path)}</h2> |
| <p>{html.escape(node['scenario'])}</p> |
| <small class="source-line">SOURCE: {html.escape(node.get('generation_source', 'deterministic')).upper()}</small> |
| </section> |
| {metrics_html(session)} |
| </div> |
| {cascade_markup} |
| <div class="stage-bottom"> |
| {persona_markup} |
| <div class="player-wrap"> |
| <span class="state-pill">World: {state} / You: {expression}</span> |
| <div class="player-sprite" style="background-image:url('{sprite}');background-position:{sprite_position} 0"></div> |
| </div> |
| </div> |
| {report_markup} |
| <div class="scanlines"></div> |
| </div> |
| """ |
|
|
|
|
| def metrics_html(session: SimulationSession) -> str: |
| labels = { |
| "financial_security": "Financial", |
| "creative_fulfillment": "Fulfillment", |
| "social_validation": "Validation", |
| "stress": "Stress", |
| "family_satisfaction": "Family", |
| } |
| rows = [] |
| for key in METRICS: |
| value = session.world_state[key] |
| rows.append( |
| f""" |
| <div class="metric-row {'stress' if key == 'stress' else ''}"> |
| <div class="metric-label"><span>{labels[key]}</span><span>{value}</span></div> |
| <div class="metric-track"><div class="metric-fill" style="width:{value}%"></div></div> |
| </div> |
| """ |
| ) |
| return f"<aside class='hud'><div class='hud-title'>LIVE WORLD STATE</div>{''.join(rows)}</aside>" |
|
|
|
|
| def report_html(report: dict[str, Any]) -> str: |
| ledger = html.escape( |
| json.dumps( |
| {"facts": report["facts"], "obligations": report["obligations"]}, |
| indent=2, |
| ) |
| ) |
| return f""" |
| <section class="report-card"> |
| <div class="eyebrow">Simulation complete / causal reflection</div> |
| <h2>{html.escape(report['archetype'])}</h2> |
| <p>{html.escape(report['summary'])}</p> |
| <p>{html.escape(report['honest_mirror'])}</p> |
| <details><summary>Open the causal ledger</summary><pre>{ledger}</pre></details> |
| </section> |
| """ |
|
|
|
|
| def _choice_options(node: dict[str, Any]) -> list[tuple[str, str]]: |
| return [(choice["text"], str(index)) for index, choice in enumerate(node["choices"])] |
|
|
|
|
| theme = gr.themes.Base( |
| primary_hue="orange", |
| neutral_hue="slate", |
| font=[gr.themes.GoogleFont("Inter"), "ui-sans-serif", "system-ui"], |
| ).set( |
| body_background_fill="#070a12", |
| block_background_fill="#0d1120", |
| block_border_color="rgba(255,255,255,.12)", |
| input_background_fill="#080b15", |
| input_border_color="rgba(255,255,255,.14)", |
| ) |
|
|
| with gr.Blocks(css=CSS, theme=theme, title="LifeChoice Simulator") as demo: |
| session_state = gr.State() |
| gr.HTML( |
| f""" |
| <header class="app-header"> |
| <div class="brand-lockup"> |
| <div class="eyebrow">A causal future simulator</div> |
| <h1>Life<span>Choice</span></h1> |
| <p>Enter one road not taken. Make decisions inside it. Watch the world remember.</p> |
| </div> |
| <div class="model-chip">{MODEL_ID} / 7B</div> |
| </header> |
| """ |
| ) |
|
|
| with gr.Group(elem_classes="setup-card") as setup_group: |
| with gr.Row(equal_height=True): |
| with gr.Column(scale=5): |
| gr.HTML( |
| """ |
| <section class="setup-intro"> |
| <div class="eyebrow">New simulation</div> |
| <h2>Try the future<br>before it happens.</h2> |
| <p>This is not a chatbot. It is an eight-node causal simulation with persistent metrics, delayed consequences, and a world that changes with your decisions.</p> |
| <div class="feature-list"> |
| <div class="feature"><b>01</b> Immediate first scene</div> |
| <div class="feature"><b>02</b> Choices produce distinct state changes</div> |
| <div class="feature"><b>03</b> Your persona remembers what happened</div> |
| </div> |
| </section> |
| """ |
| ) |
| with gr.Column(scale=6, elem_classes="form-panel"): |
| dilemma = gr.Textbox( |
| label="The fork in the road", |
| placeholder="Artist vs Software Engineer", |
| value="MTech vs Software Job", |
| ) |
| path_choice = gr.Radio( |
| choices=[("MTech", "A"), ("Software Job", "B")], |
| value="A", |
| label="Choose the future to enter", |
| elem_id="path-options", |
| ) |
| detected = gr.Markdown( |
| "PATHS DETECTED: MTECH / SOFTWARE JOB", |
| elem_classes="eyebrow", |
| elem_id="detected-paths", |
| ) |
| calibration = gr.Textbox( |
| label="What makes this decision real?", |
| placeholder="A pressure, deadline, responsibility, or proof point...", |
| value="My family needs income soon, but a professor is already interested in my research.", |
| lines=2, |
| ) |
| persona = gr.Radio( |
| choices=["Family", "Friend", "Mentor", "Partner", "Inner Voice"], |
| value="Mentor", |
| label="Choose the voice that follows you", |
| elem_id="persona-options", |
| ) |
| begin_btn = gr.Button("Enter this future", variant="primary", elem_id="begin-button") |
| gr.HTML( |
| "<p class='microcopy'>Reflective simulation only. Not medical, legal, financial, or professional advice. The first scene starts immediately while later scenes prepare in the background.</p>" |
| ) |
|
|
| with gr.Group(visible=False) as game_group: |
| game_board = gr.HTML() |
| with gr.Column(visible=False, elem_classes="choices-shell") as play_column: |
| gr.HTML("<div class='choice-heading'><b>What do you do?</b><span>YOUR DECISION CHANGES THE STATE</span></div>") |
| choices = gr.Radio(choices=[], show_label=False, elem_id="choice-cards") |
| custom = gr.Textbox( |
| label="Or make your own move", |
| placeholder="Describe one specific action...", |
| lines=1, |
| ) |
| choose_btn = gr.Button("Commit choice", variant="primary", elem_id="commit-button") |
| with gr.Group(visible=False) as report_group: |
| gr.Markdown( |
| "The report reflects patterns in your causal ledger. It does not predict your future or tell you what to do." |
| ) |
| reset_btn = gr.Button("Start a different simulation", variant="secondary", elem_id="reset-button") |
|
|
| dilemma.change(parse_paths, dilemma, [path_choice, detected], show_progress="hidden") |
| begin_btn.click( |
| begin, |
| [dilemma, path_choice, calibration, persona], |
| [session_state, game_board, choices, custom, report_group, play_column, setup_group, game_group, choose_btn], |
| show_progress="hidden", |
| ) |
| choose_btn.click( |
| make_choice, |
| [session_state, choices, custom], |
| [session_state, game_board, choices, custom, report_group, play_column, setup_group, choose_btn], |
| ) |
| reset_btn.click( |
| reset, |
| outputs=[session_state, game_board, choices, custom, report_group, play_column, setup_group, game_group, choose_btn], |
| show_progress="hidden", |
| ) |
|
|
| if __name__ == "__main__": |
| demo.queue(default_concurrency_limit=8).launch() |
|
|
