| <!doctype html>
|
| <html lang="en">
|
| <head>
|
| <meta charset="utf-8">
|
| <meta name="viewport" content="width=device-width, initial-scale=1">
|
| <title>Lantern</title>
|
| <meta name="description" content="Watch the Beam model explore dungeon levels, think out loud, and learn from its own journal.">
|
| <link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='14' fill='%23f4b860' opacity='.25'/%3E%3Ctext x='16' y='22' font-size='18' text-anchor='middle' fill='%23f4b860' font-family='monospace'%3E@%3C/text%3E%3C/svg%3E">
|
| <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=Martian+Mono:wght@400;600&family=Spectral:ital,wght@0,400;0,600;1,400&display=swap" rel="stylesheet">
|
| <link rel="stylesheet" href="/static/style.css">
|
| </head>
|
| <body>
|
| <header class="bar">
|
| <h1 class="wordmark">Lantern</h1>
|
| <p class="tagline">Beam explores a dungeon it has never seen, one plan at a time.</p>
|
|
|
| <form class="controls" id="controls">
|
| <label class="field">
|
| <span>Level</span>
|
| <select id="task"></select>
|
| </label>
|
| <label class="field field-seed">
|
| <span>Layout</span>
|
| <input id="seed" type="number" min="0" max="1000000" value="0" inputmode="numeric">
|
| </label>
|
| <label class="toggle">
|
| <input id="lessons" type="checkbox" checked>
|
| <span>Use journal</span>
|
| </label>
|
| <button class="primary" id="start" type="submit">Watch Beam explore</button>
|
| <span class="runs-left" id="runs-left" aria-live="polite"></span>
|
| <button class="secondary" id="stop" type="button" hidden>Stop</button>
|
| <button class="secondary sound" id="sound" type="button" aria-pressed="false">Sound off</button>
|
| <p class="notice" id="notice" role="alert" hidden></p>
|
| </form>
|
| </header>
|
|
|
| <main class="stage">
|
| <section class="map-wrap" aria-label="Dungeon map">
|
| <p class="goal" id="goal"></p>
|
| <details class="rules">
|
| <summary>How moves work</summary>
|
| <ul>
|
| <li>Diagonal moves are allowed, including past the corner of a boulder or wall. Doorways are the main exception.</li>
|
| <li>Walking into a boulder pushes it one square, if the square behind it is free.</li>
|
| <li>A boulder pushed into water fills it, making a square you can walk on.</li>
|
| <li>Stepping into unfilled water makes you fall in. You either drown or crawl out onto a nearby dry square, which can look like a jump.</li>
|
| </ul>
|
| </details>
|
| <div class="viewport">
|
| <div class="view3d" id="view3d" aria-hidden="true"></div>
|
| <div class="ending" id="ending" hidden>
|
| <button class="ending-close" id="ending-close" type="button" aria-label="Close">×</button>
|
| <p class="ending-title" id="ending-title"></p>
|
| <p class="ending-detail" id="ending-detail"></p>
|
| <div class="ending-actions">
|
| <button class="secondary" id="again" type="button">Watch again</button>
|
| <button class="primary" id="new-run" type="button">Try a new layout</button>
|
| </div>
|
| </div>
|
| <p class="empty" id="empty">No runs yet. Pick a level and press <em>Watch Beam explore!</em></p>
|
| <details class="beam-view" open>
|
| <summary>What Beam sees</summary>
|
| <div class="map" id="map" role="img" aria-label="ASCII dungeon map, exactly as Beam receives it"></div>
|
| </details>
|
| </div>
|
| <section class="coach" id="coach" hidden aria-label="Coach Beam">
|
| <h3 class="sub">Coach Beam</h3>
|
| <div class="coach-row">
|
| <div class="coach-buttons">
|
| <button type="button" data-hint="Go north" aria-label="Suggest north">↑</button>
|
| <button type="button" data-hint="Go south" aria-label="Suggest south">↓</button>
|
| <button type="button" data-hint="Go west" aria-label="Suggest west">←</button>
|
| <button type="button" data-hint="Go east" aria-label="Suggest east">→</button>
|
| <button type="button" data-hint="Turn around, this way is a dead end">Turn around</button>
|
| <button type="button" data-hint="Explore somewhere you haven't been yet">Explore somewhere new</button>
|
| <button type="button" data-hint="Go get the key first">Go for the key</button>
|
| </div>
|
| <form class="coach-form" id="coach-form">
|
| <input id="coach-text" type="text" maxlength="120" placeholder="Or type a hint for Beam" aria-label="Hint for Beam">
|
| <button class="secondary" type="submit">Send</button>
|
| </form>
|
| </div>
|
| <p class="coach-log" id="coach-log" aria-live="polite"></p>
|
| </section>
|
| <p class="status" id="status" aria-live="polite">Pick a level and press <em>Watch Beam explore</em>, or open a replay below.</p>
|
| </section>
|
|
|
| <aside class="mind" aria-label="What Beam is thinking">
|
| <h2 class="mind-title">Beam's thinking</h2>
|
| <div class="reasoning" id="reasoning"><p class="quiet">Beam's reasoning for each move appears here.</p></div>
|
|
|
| <h3 class="sub">Plan</h3>
|
| <ol class="plan" id="plan"></ol>
|
|
|
| <h3 class="sub">Notes to itself</h3>
|
| <p class="notes" id="notes"><span class="quiet">Nothing yet.</span></p>
|
|
|
| <details class="prompt">
|
| <summary>Show exactly what Beam saw</summary>
|
| <pre id="prompt"></pre>
|
| </details>
|
| </aside>
|
|
|
| <section class="timeline-wrap" aria-label="Timeline">
|
| <div class="timeline-head">
|
| <h2 class="sub">Timeline</h2>
|
| <button class="link" id="follow" type="button" hidden>Jump to live</button>
|
| </div>
|
| <div class="timeline" id="timeline" role="listbox" aria-label="Beam's calls, oldest first" tabindex="0"></div>
|
| </section>
|
| </main>
|
|
|
| <section class="lower">
|
| <article class="journal">
|
| <h2>Journal</h2>
|
| <p class="quiet" id="journal-intro">After each run Beam writes down what it learned. The next run on the same level starts by reading it.</p>
|
| <div class="journal-cols">
|
| <div>
|
| <h3 class="sub">Read before this run</h3>
|
| <ul id="lessons-in" class="lessons"></ul>
|
| </div>
|
| <div>
|
| <h3 class="sub">Written after this run</h3>
|
| <ul id="lessons-out" class="lessons"></ul>
|
| </div>
|
| </div>
|
| </article>
|
|
|
| <article class="replays">
|
| <h2>Replays</h2>
|
| <ul id="episodes" class="episodes"></ul>
|
| </article>
|
| </section>
|
|
|
| <footer class="foot">
|
| Levels from <a href="https://github.com/facebookresearch/minihack">MiniHack</a> (Meta AI) on the NetHack Learning Environment.
|
| 3D models and sound effects by <a href="https://kenney.nl/assets/mini-dungeon">Kenney</a> (CC0).
|
| Music: <a href="https://opengameart.org/content/dungeon-ambience">“Dungeon Ambience” by yd</a> (CC0).
|
| Runs on this page are subject to Reflection's <a href="https://reflection.ai/legal/usage-policy">Usage Policy</a>.
|
| Model: <a href="https://huggingface.co/reflection/Beam-1.0-501B-A23B">Beam 1.0</a> by Reflection.
|
| Beam is an AI model and can make mistakes; runs are game play only.
|
| </footer>
|
|
|
| <script type="importmap">
|
| { "imports": {
|
| "three": "https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.module.js",
|
| "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.160.0/examples/jsm/"
|
| } }
|
| </script>
|
| <script type="module" src="/static/scene3d.js"></script>
|
| <script src="/static/audio.js"></script>
|
| <script src="/static/app.js"></script>
|
| </body>
|
| </html>
|
|
|
