Blame for web/index.html

<!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">&times;</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">&uarr;</button>
          <button type="button" data-hint="Go south" aria-label="Suggest south">&darr;</button>
          <button type="button" data-hint="Go west" aria-label="Suggest west">&larr;</button>
          <button type="button" data-hint="Go east" aria-label="Suggest east">&rarr;</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>