AI Meme Caption Generator

<main class="wrap">
  <header class="head">
    <span class="eyebrow">Meme App</span>
    <h1>AI Meme Caption Generator</h1>
    <p class="sub">Type a topic, pick a tone, and forge caption ideas. Then drop your favorite onto the canvas and export a PNG. Everything runs offline in your browser.</p>
  </header>

  <section class="panel">
    <div class="controls">
      <label class="field">
        <span>Topic</span>
        <input id="topic" type="text" maxlength="80" placeholder="e.g. Monday mornings" value="AI" />
      </label>
      <label class="field field--tone">
        <span>Tone</span>
        <select id="tone">
          <option value="savage">Savage</option>
          <option value="wholesome">Wholesome</option>
          <option value="nerdy">Nerdy</option>
          <option value="hype">Hype</option>
        </select>
      </label>
      <button id="gen" class="btn btn--primary" type="button">Generate captions</button>
    </div>
    <ul id="captions" class="captions" aria-live="polite"></ul>
  </section>

  <section class="panel">
    <h2 class="panel-title">Meme canvas</h2>
    <div class="canvas-controls">
      <label class="field">
        <span>Top text</span>
        <input id="top" type="text" maxlength="60" placeholder="TOP TEXT" value="WHEN IT COMPILES" />
      </label>
      <label class="field">
        <span>Bottom text</span>
        <input id="bottom" type="text" maxlength="60" placeholder="BOTTOM TEXT" value="ON THE FIRST TRY" />
      </label>
    </div>
    <div class="stage">
      <canvas id="meme" width="640" height="640" role="img" aria-label="Meme preview"></canvas>
    </div>
    <div class="canvas-actions">
      <button id="reseed" class="btn btn--ghost" type="button">New background</button>
      <button id="download" class="btn btn--primary" type="button">Download PNG</button>
    </div>
  </section>

  <footer class="foot">
    <p class="note">Captions are a deterministic demo. Real AI captioning over Animica useful-work compute is prepared for the next phase.</p>
    <p class="brand">Powered by Animica</p>
  </footer>
</main>