Blame for index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
  <meta name="theme-color" content="#f4efe6" />
  <meta name="description" content="Paste text and listen. Speech is generated on your device." />
  <title>Phonon Reader</title>
  <link rel="manifest" href="./manifest.webmanifest" />
  <link rel="icon" type="image/png" href="./icons/icon-192.png" />
  <link rel="apple-touch-icon" href="./icons/icon-192.png" />
  <link rel="stylesheet" href="./src/style.css" />
  <script type="importmap">{ "imports": { "phonon-tts": "./vendor/phonon-tts/index.js" } }</script>
</head>
<body>
  <header class="top">
    <h1>Reader</h1>
    <div class="top-actions">
      <span id="net" class="pill" aria-live="polite"></span>
      <button id="btn-edit" class="ghost hidden" type="button">Edit</button>
      <button id="btn-settings" class="ghost" type="button" aria-label="Settings">Settings</button>
    </div>
  </header>

  <div id="model-bar" class="model-bar">
    <div class="model-text" id="model-text">Loading speech model…</div>
    <div class="progress"><div id="model-progress"></div></div>
  </div>

  <main>
    <section id="view-edit">
      <input id="title" class="title-input" type="text" placeholder="Title (optional, used for the file name)" autocomplete="off" />
      <textarea id="input" spellcheck="false"
        placeholder="Paste an article or any text here. Pasting from a web page keeps the paragraphs and drops menus and scripts."></textarea>
      <p id="share-note" class="note hidden"></p>
      <div class="edit-tools">
        <button id="btn-paste" class="ghost small" type="button">Paste</button>
        <button id="btn-clear" class="ghost small" type="button">Clear</button>
      </div>
      <div class="edit-actions">
        <button id="btn-listen" class="ghost" type="button">Listen now</button>
        <button id="btn-convert-start" class="primary" type="button">Convert to audio</button>
      </div>
      <div id="ready" class="ready">
        <div class="ready-title" id="ready-title">Checking what's saved on this device…</div>
        <ul class="ready-list">
          <li id="r-app">App</li>
          <li id="r-model">Speech model</li>
          <li id="r-voice">Voice</li>
        </ul>
        <p class="note" id="ready-note">Speech is generated on this device. Your text is never uploaded.</p>
      </div>
    </section>

    <section id="view-read" class="hidden">
      <div id="export" class="export">
        <div class="export-head">
          <strong id="ex-title"></strong>
          <span id="ex-meta" class="ex-meta"></span>
        </div>
        <div id="ex-bar" class="progress big hidden"><div id="ex-progress"></div></div>
        <div class="export-actions">
          <button id="btn-convert" class="primary" type="button">Convert to audio file</button>
          <button id="btn-share" class="primary hidden" type="button">Share…</button>
          <button id="btn-download" class="ghost hidden" type="button">Download</button>
        </div>
        <p id="ex-note" class="note"></p>
      </div>
      <article id="reader" class="reader"></article>
    </section>
  </main>

  <footer id="player" class="player hidden">
    <div class="status" id="status"></div>
    <div class="controls">
      <button id="btn-prev" class="round" type="button" aria-label="Previous sentence">⏮</button>
      <button id="btn-play" class="round big" type="button" aria-label="Play">▶</button>
      <button id="btn-next" class="round" type="button" aria-label="Next sentence">⏭</button>
    </div>
  </footer>

  <dialog id="settings">
    <form method="dialog" class="settings">
      <h2>Settings</h2>
      <label>Voice
        <select id="voice"><option value="">Default</option></select>
      </label>
      <label>Speed <span id="rate-label">1.0×</span>
        <input id="rate" type="range" min="0.7" max="2" step="0.1" value="1" />
      </label>
      <label>File format
        <select id="format">
          <option value="mp3">MP3 (small, plays everywhere)</option>
          <option value="wav">WAV (lossless, ~6× larger)</option>
        </select>
      </label>
      <label>Engine
        <select id="device">
          <option value="cpu">CPU (recommended on phones)</option>
          <option value="auto">GPU if available</option>
        </select>
      </label>
      <p id="engine-info" class="note"></p>
      <button id="btn-clear-cache" type="button" class="ghost danger">Delete downloaded model</button>
      <div class="dialog-actions"><button class="primary" value="close">Done</button></div>
    </form>
  </dialog>

  <audio id="audio" preload="auto"></audio>
  <script type="module" src="./src/main.js"></script>
  <script type="module" src="./src/update.js"></script>
</body>
</html>