Replace inert HTML shell with working Gradio UI

app.py

@@ -5,7 +5,6 @@ from __future__ import annotations
 import base64
 import io
 import json
-import os
 from typing import Any
 
 import gradio as gr
@@ -93,10 +92,211 @@ def get_share_card(npc_json: str) -> dict:
     return {"image_b64": f"data:image/png;base64,{image_b64}"}
 
 
+@spaces.GPU
+def ui_summon(image_path: Any) -> tuple[dict, list, int, list, str, str, list]:
+    """Summon an NPC and prepare the visible UI state."""
+    npc = summon_npc(image_path)
+    opening_line = str(npc.get("opening_line", "The veil parts. I have arrived."))
+    chat_messages = [
+        {
+            "role": "assistant",
+            "content": f"{npc.get('emoji', '✦')} **{npc.get('name', 'NPC')}**: {opening_line}",
+        }
+    ]
+    return (
+        npc,
+        [{"role": "assistant", "content": opening_line}],
+        0,
+        [],
+        _render_character_card(npc),
+        _render_quests(npc),
+        chat_messages,
+    )
+
+
+@spaces.GPU
+def ui_chat(
+    user_text: str,
+    npc: dict,
+    history: list,
+    msg_count: int,
+    unlocked_secrets: list,
+    visible_chat: list,
+) -> tuple[str, list, list, int, list, str, str]:
+    """Send a chat message and update visible chat/progression state."""
+    if not user_text:
+        return "", history, visible_chat, msg_count, unlocked_secrets, _friendship_status(msg_count), ""
+    if not isinstance(npc, dict) or not npc:
+        return (
+            "",
+            history,
+            visible_chat,
+            msg_count,
+            unlocked_secrets,
+            _friendship_status(msg_count),
+            "*Summon an NPC before opening a dialogue.*",
+        )
+
+    result = chat_with_npc(
+        npc_json=json.dumps(npc, ensure_ascii=False),
+        history_json=json.dumps(history or [], ensure_ascii=False),
+        user_message=user_text,
+        msg_count=_safe_int(msg_count),
+        unlocked_secrets_json=json.dumps(unlocked_secrets or []),
+    )
+
+    response = str(result.get("response", "The realm connection falters..."))
+    new_msg_count = _safe_int(result.get("new_msg_count"))
+    newly_unlocked = result.get("newly_unlocked", [])
+    secret_texts = result.get("secret_texts", [])
+
+    new_history = [
+        *(history or []),
+        {"role": "user", "content": user_text},
+        {"role": "assistant", "content": response},
+    ][-20:]
+    new_visible_chat = [
+        *(visible_chat or []),
+        {"role": "user", "content": user_text},
+        {
+            "role": "assistant",
+            "content": f"{npc.get('emoji', '✦')} **{npc.get('name', 'NPC')}**: {response}",
+        },
+    ]
+    new_unlocked = list(dict.fromkeys([*(unlocked_secrets or []), *newly_unlocked]))
+    secret_md = _render_secret_unlocks(secret_texts)
+
+    return (
+        "",
+        new_history,
+        new_visible_chat,
+        new_msg_count,
+        new_unlocked,
+        _friendship_status(new_msg_count),
+        secret_md,
+    )
+
+
+def ui_new_quest(npc: dict, history: list, msg_count: int, unlocked_secrets: list, visible_chat: list):
+    """Ask the NPC for a new quest."""
+    return ui_chat("Give me a new quest", npc, history, msg_count, unlocked_secrets, visible_chat)
+
+
+def ui_share_card(npc: dict):
+    """Generate a visible PIL share card image."""
+    if not isinstance(npc, dict) or not npc:
+        npc = DEFAULT_NPC
+    return generate_share_card(npc)
+
+
 def build_app() -> gr.Blocks:
-    """Create the Gradio app with custom HTML and hidden API endpoints."""
-    with gr.Blocks(title="NPCverse") as demo:
-        gr.HTML(_load_index_html())
+    """Create the Gradio app with visible UI and hidden API endpoints."""
+    with gr.Blocks(title="NPCverse", css=APP_CSS) as demo:
+        npc_state = gr.State({})
+        history_state = gr.State([])
+        msg_count_state = gr.State(0)
+        unlocked_secrets_state = gr.State([])
+        visible_chat_state = gr.State([])
+
+        gr.Markdown(
+            """
+            # ⚔ NPCverse
+            Turn anyone into a living RPG character
+            """,
+            elem_classes=["hero"],
+        )
+
+        with gr.Row(elem_classes=["app-grid"]):
+            with gr.Column(scale=4, elem_classes=["left-column"]):
+                image_upload = gr.Image(
+                    label="Drop a portrait into the rift",
+                    sources=["upload", "webcam", "clipboard"],
+                    type="filepath",
+                    height=300,
+                )
+                summon_visible = gr.Button("⚡ SUMMON NPC", variant="primary")
+                character_md = gr.Markdown("Summon an NPC to reveal their character sheet.")
+                share_visible = gr.Button("📤 Export Share Card")
+                share_image = gr.Image(label="Generated NPC share card", type="pil")
+
+            with gr.Column(scale=6, elem_classes=["right-column"]):
+                friendship_md = gr.Markdown(_friendship_status(0))
+                secret_md = gr.Markdown("")
+                chat_box = gr.Chatbot(
+                    label="Dialogue",
+                    type="messages",
+                    height=430,
+                    show_copy_button=True,
+                )
+                with gr.Row():
+                    chat_input = gr.Textbox(
+                        label="Message",
+                        placeholder="Speak to your summoned NPC...",
+                        scale=5,
+                    )
+                    send_visible = gr.Button("Send", scale=1)
+                quests_md = gr.Markdown("No active quests yet.")
+                new_quest_visible = gr.Button("New Quest")
+
+        summon_visible.click(
+            fn=ui_summon,
+            inputs=[image_upload],
+            outputs=[
+                npc_state,
+                history_state,
+                msg_count_state,
+                unlocked_secrets_state,
+                character_md,
+                quests_md,
+                chat_box,
+            ],
+        ).then(lambda messages: messages, inputs=[chat_box], outputs=[visible_chat_state])
+
+        chat_outputs = [
+            chat_input,
+            history_state,
+            chat_box,
+            msg_count_state,
+            unlocked_secrets_state,
+            friendship_md,
+            secret_md,
+        ]
+        send_visible.click(
+            fn=ui_chat,
+            inputs=[
+                chat_input,
+                npc_state,
+                history_state,
+                msg_count_state,
+                unlocked_secrets_state,
+                visible_chat_state,
+            ],
+            outputs=chat_outputs,
+        ).then(lambda messages: messages, inputs=[chat_box], outputs=[visible_chat_state])
+        chat_input.submit(
+            fn=ui_chat,
+            inputs=[
+                chat_input,
+                npc_state,
+                history_state,
+                msg_count_state,
+                unlocked_secrets_state,
+                visible_chat_state,
+            ],
+            outputs=chat_outputs,
+        ).then(lambda messages: messages, inputs=[chat_box], outputs=[visible_chat_state])
+        new_quest_visible.click(
+            fn=ui_new_quest,
+            inputs=[
+                npc_state,
+                history_state,
+                msg_count_state,
+                unlocked_secrets_state,
+                visible_chat_state,
+            ],
+            outputs=chat_outputs,
+        ).then(lambda messages: messages, inputs=[chat_box], outputs=[visible_chat_state])
+        share_visible.click(fn=ui_share_card, inputs=[npc_state], outputs=[share_image])
 
         with gr.Group(visible=False):
             image_path = gr.File(label="image_path", type="filepath")
@@ -143,16 +343,6 @@ def build_app() -> gr.Blocks:
     return demo
 
 
-def _load_index_html() -> str:
-    """Load the custom frontend HTML if available."""
-    index_path = os.path.join(os.path.dirname(__file__), "index.html")
-    try:
-        with open(index_path, "r", encoding="utf-8") as index_file:
-            return index_file.read()
-    except FileNotFoundError:
-        return "<main><h1>NPCverse</h1><p>UI loading...</p></main>"
-
-
 def _extract_file_path(file_value: Any) -> str:
     """Extract an uploaded file path from Gradio's possible file payloads."""
     if isinstance(file_value, str):
@@ -199,6 +389,99 @@ def _json_safe_dict(payload: dict) -> dict:
     return json.loads(json.dumps(payload, ensure_ascii=False))
 
 
+def _render_character_card(npc: dict) -> str:
+    """Render NPC data as markdown for the visible app."""
+    stats = npc.get("stats", {}) if isinstance(npc.get("stats"), dict) else {}
+    passive = npc.get("passive_ability", {}) if isinstance(npc.get("passive_ability"), dict) else {}
+    ultimate = npc.get("ultimate", {}) if isinstance(npc.get("ultimate"), dict) else {}
+    stat_lines = "\n".join(
+        f"- **{name.title()}**: `{stats.get(name, 50)}`"
+        for name in ["strength", "intelligence", "charisma", "luck", "stealth", "chaos"]
+    )
+    return f"""
+## {npc.get("emoji", "✦")} {npc.get("name", "Unknown Hero")}
+**{npc.get("class", "Adventurer")} — Lv.{npc.get("level", 1)}**  
+`{npc.get("rarity", "Common")}` · `{npc.get("alignment", "Unaligned")}`
+
+{stat_lines}
+
+### Passive: {passive.get("name", "Hidden Spark")}
+{passive.get("description", "A quiet power waits beneath the surface.")}
+
+### Ultimate: {ultimate.get("name", "Final Gambit")}
+{ultimate.get("description", "Turns desperation into one decisive moment.")}
+
+*{npc.get("lore", "A mysterious figure steps into legend.")}*
+
+**World:** {npc.get("world", "Unknown Realm")}  
+**Faction:** {npc.get("faction", "Unaffiliated")}
+"""
+
+
+def _render_quests(npc: dict) -> str:
+    """Render NPC quest list as markdown."""
+    quests = npc.get("quests", []) if isinstance(npc.get("quests"), list) else []
+    if not quests:
+        return "No active quests yet."
+    quest_blocks = []
+    for quest in quests[:3]:
+        if not isinstance(quest, dict):
+            continue
+        quest_blocks.append(
+            f"### {quest.get('title', 'Unnamed Quest')}\n"
+            f"{quest.get('description', '')}\n\n"
+            f"**Reward:** {quest.get('reward', 'Unknown')} · `{quest.get('rarity', 'Common')}`"
+        )
+    return "\n\n---\n\n".join(quest_blocks) or "No active quests yet."
+
+
+def _friendship_status(msg_count: int) -> str:
+    """Render the friendship meter as markdown."""
+    pct = min(100.0, (_safe_int(msg_count) / 55) * 100)
+    label = get_friendship_label(_safe_int(msg_count))
+    return f"## {label}\nProgress: **{pct:.0f}%**"
+
+
+def _render_secret_unlocks(secret_texts: list) -> str:
+    """Render newly unlocked secrets."""
+    if not secret_texts:
+        return ""
+    return "\n\n".join(f"### Secret Revealed\n*{secret}*" for secret in secret_texts)
+
+
+APP_CSS = """
+:root {
+  --bg-void: #0d0d1a;
+  --bg-dark: #1a1a2e;
+  --bg-card: #16213e;
+  --gold: #c9a227;
+  --text-gold: #e8d5b7;
+  --border-dim: #2a2a4a;
+}
+.gradio-container {
+  background-color: var(--bg-void) !important;
+  background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
+                    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
+  background-size: 18px 18px;
+  color: var(--text-gold);
+}
+.hero { text-align: center; color: var(--text-gold); }
+.hero h1 { color: var(--gold); font-size: 2.8rem; }
+.left-column, .right-column, .form, .block, .panel {
+  background: rgba(22, 33, 62, .84) !important;
+  border-color: var(--border-dim) !important;
+}
+button.primary {
+  background: linear-gradient(135deg, #f4d76a, #c9a227, #8b6914) !important;
+  color: #130f07 !important;
+}
+textarea, input {
+  background: #10172d !important;
+  color: var(--text-gold) !important;
+}
+"""
+
+
 demo = build_app()