NPCverse

Sleeping

App Files Files Community

LazyHuman10 commited on Jun 8

Commit

c9ed0b5

1 Parent(s): db7a1f1

Add NPCverse frontend

Browse files

Files changed (1) hide show

index.html +1003 -0

index.html ADDED Viewed

	@@ -0,0 +1,1003 @@

+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>NPCverse</title>
+  <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=Cinzel:wght@400;600;700&family=Crimson+Text:ital,wght@0,400;0,600;1,400&display=swap" rel="stylesheet">
+  <style>
+    :root {
+      --bg-void: #0d0d1a;
+      --bg-dark: #1a1a2e;
+      --bg-card: #16213e;
+      --gold: #c9a227;
+      --gold-dark: #8b6914;
+      --text-gold: #e8d5b7;
+      --text-muted: #8a7565;
+      --border-dim: #2a2a4a;
+    }
+    * { box-sizing: border-box; }
+    body {
+      margin: 0;
+      min-height: 100vh;
+      color: var(--text-gold);
+      font-family: "Crimson Text", Georgia, serif;
+      background-color: var(--bg-void);
+      background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 9h18M9 0v18' stroke='%232a2a4a' stroke-opacity='.26' stroke-width='.5'/%3E%3Cpath d='M0 0l18 18M18 0L0 18' stroke='%2316213e' stroke-opacity='.24' stroke-width='.45'/%3E%3C/svg%3E");
+    }
+    button, input {
+      font: inherit;
+    }
+    button {
+      cursor: pointer;
+      transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, filter .2s ease;
+    }
+    button:hover:not(:disabled) {
+      transform: translateY(-1px);
+      filter: brightness(1.08);
+    }
+    button:disabled {
+      cursor: not-allowed;
+      opacity: .6;
+    }
+    .app-shell {
+      width: min(1100px, 100%);
+      margin: 0 auto;
+      padding: 20px;
+    }
+    header {
+      padding: 28px 0 20px;
+      text-align: center;
+    }
+    h1, h2, h3 {
+      margin: 0;
+      font-family: "Cinzel", serif;
+      letter-spacing: 0;
+    }
+    h1 {
+      color: var(--gold);
+      font-size: clamp(2.2rem, 5vw, 4rem);
+      font-weight: 700;
+      text-shadow: 0 0 26px rgba(201, 162, 39, .32);
+    }
+    .subtitle {
+      margin-top: 6px;
+      color: var(--text-gold);
+      font-size: 1.25rem;
+    }
+    .layout {
+      display: grid;
+      grid-template-columns: minmax(0, 40%) minmax(0, 60%);
+      gap: 20px;
+      align-items: start;
+    }
+    .stack {
+      display: grid;
+      gap: 16px;
+    }
+    .panel {
+      border: 1px solid var(--border-dim);
+      background: linear-gradient(180deg, rgba(22, 33, 62, .95), rgba(26, 26, 46, .95));
+      box-shadow: 0 18px 50px rgba(0, 0, 0, .35);
+    }
+    .upload-zone {
+      min-height: 310px;
+      display: grid;
+      place-items: center;
+      gap: 14px;
+      padding: 18px;
+      border: 2px dashed rgba(201, 162, 39, .46);
+      color: var(--text-gold);
+      text-align: center;
+      transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
+    }
+    .upload-zone.dragover,
+    .upload-zone:hover {
+      border-color: var(--gold);
+      background: rgba(201, 162, 39, .06);
+      box-shadow: 0 0 28px rgba(201, 162, 39, .16);
+    }
+    .upload-prompt {
+      display: grid;
+      gap: 8px;
+      justify-items: center;
+    }
+    .upload-icon {
+      font-size: 2.5rem;
+    }
+    .upload-copy {
+      color: var(--text-muted);
+      font-family: system-ui, sans-serif;
+      font-size: .9rem;
+    }
+    .preview {
+      max-width: 100%;
+      width: 100%;
+      max-height: 280px;
+      object-fit: cover;
+      border: 1px solid rgba(201, 162, 39, .35);
+      box-shadow: 0 0 24px rgba(0, 0, 0, .34);
+    }
+    .primary-btn {
+      width: 100%;
+      min-height: 48px;
+      border: 1px solid #efc94a;
+      color: #130f07;
+      background: linear-gradient(135deg, #f4d76a, var(--gold), var(--gold-dark));
+      font-family: "Cinzel", serif;
+      font-weight: 700;
+      box-shadow: 0 0 22px rgba(201, 162, 39, .28);
+    }
+    .secondary-btn {
+      min-height: 42px;
+      border: 1px solid rgba(201, 162, 39, .5);
+      color: var(--text-gold);
+      background: rgba(13, 13, 26, .55);
+      font-family: system-ui, sans-serif;
+      font-weight: 700;
+    }
+    .loading {
+      display: none;
+      padding: 12px;
+      color: var(--gold);
+      text-align: center;
+      font-family: "Cinzel", serif;
+      animation: goldPulse 1.35s ease-in-out infinite;
+    }
+    .loading.active { display: block; }
+    .character-card {
+      display: none;
+      padding: 18px;
+    }
+    .character-card.active { display: block; }
+    .card-top {
+      display: flex;
+      gap: 12px;
+      justify-content: space-between;
+      align-items: flex-start;
+      margin-bottom: 14px;
+    }
+    .npc-name {
+      color: var(--gold);
+      font-family: "Cinzel", serif;
+      font-size: 1.4rem;
+      font-weight: 700;
+    }
+    .npc-class {
+      margin-top: 2px;
+      color: var(--text-muted);
+      font-family: system-ui, sans-serif;
+      font-size: .86rem;
+    }
+    .badge-row {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 8px;
+      margin-bottom: 14px;
+    }
+    .badge {
+      display: inline-flex;
+      align-items: center;
+      min-height: 26px;
+      padding: 3px 9px;
+      border: 1px solid var(--border-dim);
+      color: var(--text-gold);
+      background: rgba(13, 13, 26, .58);
+      font-family: system-ui, sans-serif;
+      font-size: .78rem;
+      font-weight: 700;
+      text-transform: uppercase;
+    }
+    .rarity {
+      border-color: currentColor;
+      color: #9d9d9d;
+    }
+    .stats {
+      display: grid;
+      gap: 9px;
+      margin: 16px 0;
+    }
+    .stat {
+      display: grid;
+      grid-template-columns: 102px minmax(0, 1fr) 38px;
+      gap: 10px;
+      align-items: center;
+      font-family: system-ui, sans-serif;
+      font-size: .82rem;
+    }
+    .stat-track {
+      height: 9px;
+      overflow: hidden;
+      background: rgba(13, 13, 26, .72);
+      border: 1px solid var(--border-dim);
+    }
+    .stat-fill {
+      height: 100%;
+      width: 0;
+      transition: width .7s ease, background .3s ease;
+    }
+    .ability-grid {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 10px;
+      margin: 14px 0;
+    }
+    .ability {
+      padding: 12px;
+      border: 1px solid var(--border-dim);
+      background: rgba(13, 13, 26, .4);
+    }
+    .ability h3,
+    .quest h3 {
+      color: var(--gold);
+      font-size: .9rem;
+    }
+    .ability p,
+    .quest p {
+      margin: 6px 0 0;
+      line-height: 1.35;
+    }
+    .lore {
+      margin: 14px 0;
+      color: var(--text-gold);
+      font-style: italic;
+      line-height: 1.48;
+    }
+    .world-line {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 8px;
+      color: var(--text-muted);
+      font-family: system-ui, sans-serif;
+      font-size: .82rem;
+    }
+    .friendship {
+      padding: 16px;
+    }
+    .section-heading {
+      display: flex;
+      justify-content: space-between;
+      align-items: baseline;
+      gap: 12px;
+      margin-bottom: 10px;
+    }
+    .section-heading h2 {
+      color: var(--gold);
+      font-size: 1.05rem;
+    }
+    .friendship-pct {
+      color: var(--text-muted);
+      font-family: system-ui, sans-serif;
+      font-size: .86rem;
+      font-weight: 700;
+    }
+    .friendship-track {
+      height: 14px;
+      overflow: hidden;
+      border: 1px solid rgba(201, 162, 39, .34);
+      background: rgba(13, 13, 26, .78);
+    }
+    .friendship-fill {
+      height: 100%;
+      width: 0;
+      background: linear-gradient(90deg, var(--gold-dark), var(--gold), #f4d76a);
+      box-shadow: 0 0 18px rgba(201, 162, 39, .4);
+      transition: width .75s ease;
+    }
+    .friendship-flavor {
+      margin: 8px 0 0;
+      color: var(--text-muted);
+      font-style: italic;
+    }
+    .secret-layer {
+      position: fixed;
+      top: 18px;
+      right: 18px;
+      z-index: 20;
+      display: grid;
+      width: min(380px, calc(100vw - 36px));
+      gap: 10px;
+    }
+    .secret-toast {
+      padding: 14px;
+      border: 1px solid #a335ee;
+      color: var(--text-gold);
+      background: rgba(22, 33, 62, .96);
+      box-shadow: 0 0 28px rgba(163, 53, 238, .4), 0 0 18px rgba(201, 162, 39, .22);
+      animation: secretReveal .45s ease both;
+    }
+    .secret-title {
+      color: var(--gold);
+      font-family: "Cinzel", serif;
+      font-weight: 700;
+    }
+    .secret-body {
+      margin-top: 6px;
+      opacity: 0;
+      animation: secretText .4s ease .5s both;
+    }
+    .chat-panel {
+      display: grid;
+      grid-template-rows: minmax(360px, 50vh) auto;
+      overflow: hidden;
+    }
+    .chat-log {
+      overflow-y: auto;
+      padding: 16px;
+      display: flex;
+      flex-direction: column;
+      gap: 12px;
+      scroll-behavior: smooth;
+    }
+    .message {
+      max-width: 78%;
+      padding: 10px 12px;
+      line-height: 1.5;
+      font-size: 1rem;
+      border: 1px solid var(--border-dim);
+    }
+    .message.user {
+      align-self: flex-end;
+      background: rgba(13, 13, 26, .82);
+      color: #f2e6d0;
+    }
+    .message.npc {
+      align-self: flex-start;
+      background: rgba(42, 42, 74, .72);
+      color: var(--text-gold);
+      border-color: rgba(201, 162, 39, .28);
+    }
+    .sender {
+      display: block;
+      margin-bottom: 4px;
+      color: var(--gold);
+      font-family: system-ui, sans-serif;
+      font-size: .76rem;
+      font-weight: 800;
+    }
+    .typing {
+      animation: goldPulse 1s ease-in-out infinite;
+    }
+    .chat-form {
+      display: grid;
+      grid-template-columns: minmax(0, 1fr) 110px;
+      gap: 10px;
+      padding: 12px;
+      border-top: 1px solid var(--border-dim);
+      background: rgba(13, 13, 26, .54);
+    }
+    .chat-form input {
+      width: 100%;
+      min-height: 44px;
+      padding: 0 12px;
+      border: 1px solid var(--border-dim);
+      color: var(--text-gold);
+      background: rgba(13, 13, 26, .85);
+      outline: none;
+      transition: border-color .2s ease, box-shadow .2s ease;
+    }
+    .chat-form input:focus {
+      border-color: var(--gold);
+      box-shadow: 0 0 0 3px rgba(201, 162, 39, .12);
+    }
+    .quest-panel,
+    .share-card {
+      padding: 16px;
+    }
+    .quest-list {
+      display: grid;
+      gap: 10px;
+      margin-bottom: 12px;
+    }
+    .quest {
+      padding: 11px 12px;
+      border: 1px solid var(--border-dim);
+      border-left: 4px solid #9d9d9d;
+      background: rgba(13, 13, 26, .38);
+    }
+    .reward {
+      display: block;
+      margin-top: 7px;
+      color: var(--text-muted);
+      font-family: system-ui, sans-serif;
+      font-size: .8rem;
+      font-weight: 700;
+    }
+    .share-image {
+      display: none;
+      width: 100%;
+      margin-top: 12px;
+      border: 1px solid rgba(201, 162, 39, .35);
+    }
+    .download-link {
+      display: none;
+      margin-top: 8px;
+      color: var(--gold);
+      font-family: system-ui, sans-serif;
+      font-weight: 700;
+    }
+    .error {
+      display: none;
+      padding: 12px;
+      border: 1px solid rgba(163, 53, 238, .65);
+      color: var(--text-gold);
+      background: rgba(163, 53, 238, .12);
+      font-style: italic;
+    }
+    .error.active { display: block; }
+    .hidden-input {
+      display: none;
+    }
+    @keyframes goldPulse {
+      0%, 100% { opacity: .62; text-shadow: 0 0 6px rgba(201, 162, 39, .2); }
+      50% { opacity: 1; text-shadow: 0 0 18px rgba(201, 162, 39, .66); }
+    }
+    @keyframes pulse {
+      0%, 100% { filter: brightness(1); }
+      50% { filter: brightness(1.35); }
+    }
+    @keyframes secretReveal {
+      from { opacity: 0; transform: scale(.88) translateY(-12px); }
+      to { opacity: 1; transform: scale(1) translateY(0); }
+    }
+    @keyframes secretText {
+      to { opacity: 1; }
+    }
+    @media (max-width: 899px) {
+      .layout {
+        grid-template-columns: 1fr;
+      }
+      .ability-grid {
+        grid-template-columns: 1fr;
+      }
+      .chat-panel {
+        grid-template-rows: 420px auto;
+      }
+      .message {
+        max-width: 90%;
+      }
+    }
+    @media (max-width: 520px) {
+      .app-shell {
+        padding: 14px;
+      }
+      .stat {
+        grid-template-columns: 88px minmax(0, 1fr) 34px;
+        gap: 7px;
+        font-size: .76rem;
+      }
+      .chat-form {
+        grid-template-columns: 1fr;
+      }
+    }
+  </style>
+</head>
+<body>
+  <div class="secret-layer" id="secretLayer" aria-live="polite"></div>
+  <main class="app-shell">
+    <header>
+      <h1>⚔ NPCverse</h1>
+      <p class="subtitle">Turn anyone into a living RPG character</p>
+    </header>
+    <div class="layout">
+      <section class="stack">
+        <div class="upload-zone panel" id="uploadZone" role="button" tabindex="0" aria-label="Upload a character photo">
+          <input class="hidden-input" id="imageInput" type="file" accept="image/*">
+          <div class="upload-prompt" id="uploadPrompt">
+            <div class="upload-icon">🜂</div>
+            <h2>Drop a portrait into the rift</h2>
+            <div class="upload-copy">Click or drag an image here</div>
+          </div>
+          <img class="preview" id="imagePreview" alt="Uploaded preview" hidden>
+        </div>
+        <button class="primary-btn" id="summonBtn" disabled>⚡ SUMMON NPC</button>
+        <div class="loading" id="loadingText">Forging character...</div>
+        <div class="error" id="errorBox">*The realm connection falters... try again, traveler.*</div>
+        <article class="character-card panel" id="characterCard"></article>
+        <section class="share-card panel">
+          <button class="secondary-btn" id="shareBtn" disabled>📤 Export Share Card</button>
+          <img class="share-image" id="shareImage" alt="Generated NPC share card">
+          <a class="download-link" id="downloadLink" download="npcverse-share-card.png">Download share card</a>
+        </section>
+      </section>
+      <section class="stack">
+        <section class="friendship panel">
+          <div class="section-heading">
+            <h2 id="friendshipLabel">Stranger</h2>
+            <span class="friendship-pct" id="friendshipPct">0%</span>
+          </div>
+          <div class="friendship-track">
+            <div class="friendship-fill" id="friendshipFill"></div>
+          </div>
+          <p class="friendship-flavor" id="friendshipFlavor">A story waits at the edge of the campfire.</p>
+        </section>
+        <section class="chat-panel panel">
+          <div class="chat-log" id="chatLog" aria-live="polite"></div>
+          <form class="chat-form" id="chatForm">
+            <input id="chatInput" type="text" placeholder="Speak to your summoned NPC..." autocomplete="off" disabled>
+            <button class="secondary-btn" id="sendBtn" type="submit" disabled>Send</button>
+          </form>
+        </section>
+        <section class="quest-panel panel">
+          <div class="section-heading">
+            <h2>Active Quests</h2>
+          </div>
+          <div class="quest-list" id="questList"></div>
+          <button class="secondary-btn" id="newQuestBtn" disabled>New Quest</button>
+        </section>
+      </section>
+    </div>
+  </main>
+  <script type="module">
+    import { Client, handle_file } from "https://cdn.jsdelivr.net/npm/@gradio/client/dist/index.min.js";
+    let currentNPC = null;
+    let chatHistory = [];
+    let displayHistory = [];
+    let messageCount = 0;
+    let unlockedSecrets = [];
+    let clientPromise = null;
+    let imageFile = null;
+    const uploadZone = document.getElementById("uploadZone");
+    const imageInput = document.getElementById("imageInput");
+    const uploadPrompt = document.getElementById("uploadPrompt");
+    const imagePreview = document.getElementById("imagePreview");
+    const summonBtn = document.getElementById("summonBtn");
+    const loadingText = document.getElementById("loadingText");
+    const errorBox = document.getElementById("errorBox");
+    const characterCard = document.getElementById("characterCard");
+    const friendshipLabel = document.getElementById("friendshipLabel");
+    const friendshipPct = document.getElementById("friendshipPct");
+    const friendshipFill = document.getElementById("friendshipFill");
+    const friendshipFlavor = document.getElementById("friendshipFlavor");
+    const chatLog = document.getElementById("chatLog");
+    const chatForm = document.getElementById("chatForm");
+    const chatInput = document.getElementById("chatInput");
+    const sendBtn = document.getElementById("sendBtn");
+    const questList = document.getElementById("questList");
+    const newQuestBtn = document.getElementById("newQuestBtn");
+    const shareBtn = document.getElementById("shareBtn");
+    const shareImage = document.getElementById("shareImage");
+    const downloadLink = document.getElementById("downloadLink");
+    const secretLayer = document.getElementById("secretLayer");
+    const rarityMap = {
+      Common: { color: "#9d9d9d", glow: "none", pulse: false },
+      Uncommon: { color: "#1eff00", glow: "0 0 20px rgba(30,255,0,.25)", pulse: false },
+      Rare: { color: "#0070dd", glow: "0 0 28px rgba(0,112,221,.35)", pulse: false },
+      Epic: { color: "#a335ee", glow: "0 0 38px rgba(163,53,238,.45)", pulse: false },
+      Legendary: { color: "#ff8000", glow: "0 0 50px rgba(255,128,0,.6)", pulse: true }
+    };
+    const friendshipCopy = {
+      Stranger: "A story waits at the edge of the campfire.",
+      Acquaintance: "Names have power, and yours is beginning to matter.",
+      Friend: "Trust gathers like warm light around the party.",
+      "Trusted Ally": "Oaths are forming beneath every shared word.",
+      "Legendary Bond": "Your legend and theirs now share the same ink."
+    };
+    uploadZone.addEventListener("click", () => imageInput.click());
+    uploadZone.addEventListener("keydown", (event) => {
+      if (event.key === "Enter" || event.key === " ") {
+        event.preventDefault();
+        imageInput.click();
+      }
+    });
+    uploadZone.addEventListener("dragover", (event) => {
+      event.preventDefault();
+      uploadZone.classList.add("dragover");
+    });
+    uploadZone.addEventListener("dragleave", () => uploadZone.classList.remove("dragover"));
+    uploadZone.addEventListener("drop", (event) => {
+      event.preventDefault();
+      uploadZone.classList.remove("dragover");
+      const dropped = event.dataTransfer.files[0];
+      if (dropped) setImageFile(dropped);
+    });
+    imageInput.addEventListener("change", () => {
+      if (imageInput.files[0]) setImageFile(imageInput.files[0]);
+    });
+    summonBtn.addEventListener("click", summonNPC);
+    shareBtn.addEventListener("click", exportShareCard);
+    newQuestBtn.addEventListener("click", () => sendChatMessage("Give me a new quest"));
+    chatForm.addEventListener("submit", (event) => {
+      event.preventDefault();
+      const userText = chatInput.value.trim();
+      if (userText) sendChatMessage(userText);
+    });
+    function getClient() {
+      if (!clientPromise) {
+        clientPromise = Client.connect(window.location.origin);
+      }
+      return clientPromise;
+    }
+    function setImageFile(file) {
+      imageFile = file;
+      imagePreview.src = URL.createObjectURL(file);
+      imagePreview.hidden = false;
+      uploadPrompt.style.display = "none";
+      summonBtn.disabled = false;
+      clearError();
+    }
+    async function summonNPC() {
+      if (!imageFile) return;
+      setLoading(true);
+      clearError();
+      try {
+        const client = await getClient();
+        const result = await client.predict("/summon_npc", { image_path: handle_file(imageFile) });
+        const npc = result.data[0];
+        currentNPC = npc;
+        chatHistory = [];
+        displayHistory = [];
+        messageCount = 0;
+        unlockedSecrets = [];
+        renderNPC(npc);
+        updateFriendship("Stranger", 0);
+        renderChat();
+        renderQuests(npc.quests || []);
+        enablePlay(true);
+        addNPCMessage(npc.opening_line || "The veil parts. I have arrived.");
+      } catch (error) {
+        showError();
+      } finally {
+        setLoading(false);
+      }
+    }
+    async function sendChatMessage(userText) {
+      if (!currentNPC || !userText) return;
+      chatInput.value = "";
+      appendDisplay("user", userText);
+      const typingId = appendTyping();
+      toggleChat(false);
+      try {
+        const client = await getClient();
+        const chatResult = await client.predict("/chat_with_npc", {
+          npc_json: JSON.stringify(currentNPC),
+          history_json: JSON.stringify(chatHistory),
+          user_message: userText,
+          msg_count: messageCount,
+          unlocked_secrets_json: JSON.stringify(unlockedSecrets)
+        });
+        const { response, new_msg_count, friendship_label, friendship_pct, newly_unlocked, secret_texts } = chatResult.data[0];
+        removeMessage(typingId);
+        appendDisplay("npc", response);
+        chatHistory.push({ role: "user", content: userText }, { role: "assistant", content: response });
+        chatHistory = chatHistory.slice(-20);
+        messageCount = new_msg_count;
+        unlockedSecrets = Array.from(new Set([...unlockedSecrets, ...newly_unlocked]));
+        updateFriendship(friendship_label, friendship_pct);
+        showSecrets(secret_texts);
+      } catch (error) {
+        removeMessage(typingId);
+        appendDisplay("npc", "*The realm connection falters... try again, traveler.*");
+      } finally {
+        toggleChat(true);
+      }
+    }
+    async function exportShareCard() {
+      if (!currentNPC) return;
+      shareBtn.disabled = true;
+      try {
+        const client = await getClient();
+        const cardResult = await client.predict("/generate_share_card", { npc_json: JSON.stringify(currentNPC) });
+        const { image_b64 } = cardResult.data[0];
+        shareImage.src = image_b64;
+        shareImage.style.display = "block";
+        downloadLink.href = image_b64;
+        downloadLink.style.display = "inline-block";
+      } catch (error) {
+        showError();
+      } finally {
+        shareBtn.disabled = false;
+      }
+    }
+    function renderNPC(npc) {
+      const rarity = npc.rarity || "Common";
+      const rarityStyle = rarityMap[rarity] || rarityMap.Common;
+      const stats = npc.stats || {};
+      const statNames = ["strength", "intelligence", "charisma", "luck", "stealth", "chaos"];
+      characterCard.innerHTML = `
+        <div class="card-top">
+          <div>
+            <div class="npc-name">${escapeHtml(npc.name || "Unknown Wanderer")}</div>
+            <div class="npc-class">${escapeHtml(npc.class || "Adventurer")} — Lv.${escapeHtml(String(npc.level || 1))}</div>
+          </div>
+          <span class="badge rarity" id="rarityBadge">${escapeHtml(rarity)}</span>
+        </div>
+        <div class="badge-row">
+          <span class="badge">${escapeHtml(npc.alignment || "Unaligned")}</span>
+          <span class="badge">${escapeHtml(npc.title || "Untitled")}</span>
+        </div>
+        <div class="stats">
+          ${statNames.map((name) => statRow(name, Number(stats[name] || 0))).join("")}
+        </div>
+        <div class="ability-grid">
+          <div class="ability">
+            <h3>Passive: ${escapeHtml(npc.passive_ability?.name || "Unknown")}</h3>
+            <p>${escapeHtml(npc.passive_ability?.description || "")}</p>
+          </div>
+          <div class="ability">
+            <h3>Ultimate: ${escapeHtml(npc.ultimate?.name || "Unknown")}</h3>
+            <p>${escapeHtml(npc.ultimate?.description || "")}</p>
+          </div>
+        </div>
+        <p class="lore">${escapeHtml(npc.lore || "")}</p>
+        <div class="world-line">
+          <span>World: ${escapeHtml(npc.world || "Unknown")}</span>
+          <span>Faction: ${escapeHtml(npc.faction || "Unaffiliated")}</span>
+        </div>
+      `;
+      const rarityBadge = document.getElementById("rarityBadge");
+      rarityBadge.style.color = rarityStyle.color;
+      rarityBadge.style.boxShadow = rarityStyle.glow;
+      rarityBadge.style.animation = rarityStyle.pulse ? "pulse 2s infinite" : "none";
+      characterCard.style.boxShadow = rarityStyle.glow === "none" ? "" : rarityStyle.glow;
+      characterCard.classList.add("active");
+    }
+    function statRow(name, value) {
+      const displayName = name.charAt(0).toUpperCase() + name.slice(1);
+      return `
+        <div class="stat">
+          <span>${displayName}</span>
+          <div class="stat-track"><div class="stat-fill" style="width:${clamp(value, 0, 100)}%; background:${statColor(value)}"></div></div>
+          <strong>${clamp(value, 0, 100)}</strong>
+        </div>
+      `;
+    }
+    function renderQuests(quests) {
+      const visibleQuests = quests.slice(0, 3);
+      questList.innerHTML = visibleQuests.map((quest) => {
+        const rarity = quest.rarity || "Common";
+        const color = (rarityMap[rarity] || rarityMap.Common).color;
+        return `
+          <article class="quest" style="border-left-color:${color}">
+            <h3>${escapeHtml(quest.title || "Unnamed Quest")}</h3>
+            <p>${escapeHtml(quest.description || "")}</p>
+            <span class="reward">Reward: ${escapeHtml(quest.reward || "Unknown")} · ${escapeHtml(rarity)}</span>
+          </article>
+        `;
+      }).join("");
+    }
+    function updateFriendship(label, pct) {
+      const safePct = clamp(Number(pct || 0), 0, 100);
+      friendshipLabel.textContent = label;
+      friendshipPct.textContent = `${Math.round(safePct)}%`;
+      friendshipFill.style.width = `${safePct}%`;
+      friendshipFlavor.textContent = friendshipCopy[label] || friendshipCopy.Stranger;
+    }
+    function addNPCMessage(text) {
+      appendDisplay("npc", text);
+      chatHistory.push({ role: "assistant", content: text });
+    }
+    function appendDisplay(sender, text) {
+      const entry = { id: crypto.randomUUID(), sender, text };
+      displayHistory.push(entry);
+      renderMessage(entry);
+      scrollChat();
+      return entry.id;
+    }
+    function appendTyping() {
+      const entry = { id: crypto.randomUUID(), sender: "npc", text: "...", typing: true };
+      displayHistory.push(entry);
+      renderMessage(entry);
+      scrollChat();
+      return entry.id;
+    }
+    function removeMessage(id) {
+      displayHistory = displayHistory.filter((item) => item.id !== id);
+      renderChat();
+    }
+    function renderChat() {
+      chatLog.innerHTML = "";
+      displayHistory.forEach(renderMessage);
+      scrollChat();
+    }
+    function renderMessage(entry) {
+      const bubble = document.createElement("div");
+      bubble.className = `message ${entry.sender}${entry.typing ? " typing" : ""}`;
+      bubble.dataset.id = entry.id;
+      if (entry.sender === "npc") {
+        const sender = document.createElement("span");
+        sender.className = "sender";
+        sender.textContent = `${currentNPC?.emoji || "✦"} ${currentNPC?.name || "NPC"}`;
+        bubble.appendChild(sender);
+      }
+      bubble.append(document.createTextNode(entry.text));
+      chatLog.appendChild(bubble);
+    }
+    function showSecrets(secretTexts) {
+      secretTexts.forEach((text) => {
+        const toast = document.createElement("div");
+        toast.className = "secret-toast";
+        toast.innerHTML = `
+          <div class="secret-title">Secret Revealed</div>
+          <div class="secret-body">${escapeHtml(text)}</div>
+        `;
+        secretLayer.appendChild(toast);
+        setTimeout(() => toast.remove(), 6000);
+      });
+    }
+    function setLoading(isLoading) {
+      loadingText.classList.toggle("active", isLoading);
+      summonBtn.disabled = isLoading || !imageFile;
+    }
+    function enablePlay(enabled) {
+      chatInput.disabled = !enabled;
+      sendBtn.disabled = !enabled;
+      newQuestBtn.disabled = !enabled;
+      shareBtn.disabled = !enabled;
+    }
+    function toggleChat(enabled) {
+      chatInput.disabled = !enabled;
+      sendBtn.disabled = !enabled;
+      newQuestBtn.disabled = !enabled;
+    }
+    function showError() {
+      errorBox.classList.add("active");
+    }
+    function clearError() {
+      errorBox.classList.remove("active");
+    }
+    function scrollChat() {
+      requestAnimationFrame(() => {
+        chatLog.scrollTop = chatLog.scrollHeight;
+      });
+    }
+    function statColor(value) {
+      if (value >= 80) return "#ff8000";
+      if (value >= 65) return "#c9a227";
+      if (value >= 45) return "#4488cc";
+      return "#777";
+    }
+    function clamp(value, min, max) {
+      return Math.max(min, Math.min(max, value));
+    }
+    function escapeHtml(value) {
+      return String(value)
+        .replaceAll("&", "&amp;")
+        .replaceAll("<", "&lt;")
+        .replaceAll(">", "&gt;")
+        .replaceAll('"', "&quot;")
+        .replaceAll("'", "&#039;");
+    }
+  </script>
+</body>
+</html>