fluidaudio-web/live.html at main · FluidInference/fluidaudio-web · GitHub

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
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
<!doctype html>
<html lang="en" data-ace-demo-theme="light">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="referrer" content="no-referrer" />
    <meta name="theme-color" content="#f5f4ef" />
    <title>FluidAudio Web — Live Captions</title>
    <script>
      try {
        const savedTheme = localStorage.getItem("ace-step-wgsl-demo-theme");
        if (savedTheme === "dark") {
          document.documentElement.dataset.aceDemoTheme = "dark";
        }
      } catch {
        // The documented light default still works when storage is disabled.
      }
    </script>
    <style>
      /* Page-specific: full-height column so #history (flex: 1) pins the
         rolling transcript above #current, matching the pre-theme layout. */
      main {
        display: flex;
        flex-direction: column;
      }
      #history {
        min-height: 8rem;
      }
    </style>
  </head>
  <body>
    <main>
      <header class="site-header">
        <div class="site-title-row">
          <h1 class="site-title">Live Captions</h1>
          <div class="header-controls">
            <button
              id="theme-toggle"
              class="header-icon-button"
              type="button"
              aria-label="Switch to dark theme"
              aria-pressed="false"
              title="Switch to dark theme"
            >
              <img id="theme-icon" class="theme-icon" alt="" aria-hidden="true" />
            </button>
          </div>
        </div>
        <nav class="site-nav" aria-label="Site pages">
          <a href="./index.html">Speech to Text</a> · <a href="./tts.html">Text to Speech</a> ·
          <a href="./analyze.html">Other Audio Models</a> · <span class="is-current">Live captions</span> ·
          <a href="./music.html">Music</a>
        </nav>
      </header>

      <p class="site-intro" style="font-size: 0.9rem">
        True streaming ASR on your microphone — conformer caches carried chunk to chunk, nothing re-decoded, nothing leaves your machine. EOU segments
        utterances from the model's own end-of-utterance tokens; Nemotron adds a ~1.6s right-context lookahead (that delay is the model looking ahead, not lag).
      </p>
      <div id="controls">
        <select id="engine">
          <option value="eou-parakeet" selected>Parakeet EOU 120M (English, fastest)</option>
          <option value="asr-nemotron">Nemotron 3.5 (multilingual)</option>
        </select>
        <button id="go" class="primary-button">▶ Start</button>
        <span id="vu"></span>
        <span id="status">Idle.</span>
      </div>
      <div id="history"></div>
      <div id="current">&nbsp;</div>
    </main>

    <footer class="site-footer">
      <div>
        <a href="./index.html">FluidAudio Web</a> · original ACE-Step port by
        <a href="https://narcotic.sh" target="_blank" rel="noopener noreferrer">Narcotic Software</a>
      </div>
      <div>
        Made possible by
        <a href="https://github.com/FluidInference/fluidaudio-web/blob/main/THIRD-PARTY-LICENSES.md" target="_blank" rel="noopener noreferrer">
          open-source software
        </a>
      </div>
    </footer>

    <script type="module" src="/src/live.ts"></script>
  </body>
</html>