Spaces:
Paused
Paused
File size: 2,929 Bytes
a2d0320 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 | <!DOCTYPE html>
<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>
|