Spaces:
Paused
Paused
| <html lang="en" style="display: flex; align-items: center; justify-items: center; width: 100vw"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <title>Mini World</title> | |
| <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet" /> | |
| </head> | |
| <body class="flex gap-4 items-start p-12"> | |
| <div class="flex flex-col gap-4"> | |
| <div id="world-container" class="text-3xl flex-none whitespace-nowrap leading-none"></div> | |
| <div id="inventory-container" class="text-2xl"></div> | |
| </div> | |
| <div class="flex flex-col pt-1 gap-4"> | |
| <p class="font-mono rounded-lg"> | |
| model: <span id="model-display" class="text-blue-600">loading…</span> | |
| </p> | |
| <div class="gap-2 flex flex-col"> | |
| Agent | |
| <div class="flex items-center gap-2 rounded-lg border bg-gray-50 px-3 py-2"> | |
| <span class="text-3xl">🚶</span> | |
| <span class="text-sm text-gray-600">Explorer</span> | |
| </div> | |
| </div> | |
| <p>Goal: Explore as much as possible</p> | |
| <div id="history-container" class="flex max-w-sm flex-wrap gap-2 pt-2"></div> | |
| </div> | |
| <script> | |
| // Fetch runtime config (model name) and reflect in UI | |
| fetch('/config') | |
| .then(r => r.json()) | |
| .then(cfg => { | |
| const el = document.getElementById('model-display'); | |
| if (el && cfg?.model) el.textContent = cfg.model; | |
| }) | |
| .catch(() => {}); | |
| const eventSource = new EventSource('/game-stream'); | |
| eventSource.onmessage = (event) => { | |
| const state = JSON.parse(event.data); | |
| document.getElementById('world-container').innerText = state.map; | |
| document.getElementById('inventory-container').innerText = | |
| `Inventory: ${state.inventory.join(' ')}`; | |
| const history = state.history | |
| .filter(({ role }) => role === "assistant") | |
| .map(({ content }) => { | |
| const parsed = JSON.parse(content); | |
| return ` | |
| <div class="flex text-sm"> | |
| <div class="flex items-baseline gap-2 rounded-full border bg-gray-100 px-2 py-1"> | |
| <div class="h-2 w-2 flex-none rounded-full bg-green-500"></div> | |
| ${parsed.action}: <span class="text-gray-500">${parsed.detail}</span> | |
| </div> | |
| </div>`; | |
| }) | |
| .join(""); | |
| document.getElementById('history-container').innerHTML = history; | |
| }; | |
| // Clean up when the page is closed | |
| window.addEventListener('beforeunload', () => { | |
| eventSource.close(); | |
| }); | |
| </script> | |
| </body> | |
| </html> | |