index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
    <title>Minimal Conversation · S2S backend</title>
    <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=Inter:wght@400;500;600;700;800&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="style.css" />
  </head>
  <!--
    `booting` disables transitions/animations until the first paint commits.
    Without this the orb visibly fades/scales in on the very first frame
    because `state-idle` and the generic `.ind` defaults differ. The
    bootstrap script at the end of main.js strips the class after one rAF.
  -->
  <body class="booting">
    <div id="app">
      <header class="topbar">
        <div class="brand">
          <span>Minimal Conversation · S2S backend</span>
        </div>
        <div class="topbar-right">
          <button id="settings-btn" class="icon-btn" title="Settings" aria-label="Settings">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 1 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 1 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 1 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9c0 .66.39 1.25 1 1.51H21a2 2 0 1 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>
          </button>
        </div>
      </header>

      <main class="stage">
        <div class="orb-wrap">
          <button id="mic-btn" class="side-btn" type="button" aria-label="Mute" title="Mute" aria-hidden="true">
            <svg class="mic-on" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="2" width="6" height="12" rx="3"/><path d="M5 10a7 7 0 0 0 14 0"/><line x1="12" y1="19" x2="12" y2="22"/></svg>
            <svg class="mic-off" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><line x1="2" y1="2" x2="22" y2="22"/><path d="M9 5a3 3 0 0 1 6 0v4"/><path d="M9 10v1a3 3 0 0 0 5.1 2.1"/><path d="M19 10a7 7 0 0 1-1.24 3.97"/><path d="M5 10a7 7 0 0 0 11 5.67"/><line x1="12" y1="19" x2="12" y2="22"/></svg>
          </button>

          <button
            id="main-circle"
            class="circle state-idle"
            type="button"
            aria-label="Start voice conversation"
          >
            <span class="circle-glow" aria-hidden="true"></span>
            <span class="circle-ring" aria-hidden="true"></span>
            <span class="circle-ring-outer" aria-hidden="true"></span>
            <span class="circle-core">
              <span class="circle-indicator" aria-hidden="true">
                <svg class="ind ind-mic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                  <rect x="9" y="2" width="6" height="12" rx="3" fill="currentColor" stroke="none"/>
                  <path d="M5 10a7 7 0 0 0 14 0"/>
                  <line x1="12" y1="19" x2="12" y2="22"/>
                  <line x1="8" y1="22" x2="16" y2="22"/>
                </svg>
                <svg class="ind ind-error" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><line x1="12" y1="8" x2="12" y2="13"/><line x1="12" y1="16" x2="12" y2="16"/></svg>
                <span class="ind ind-spinner"></span>
                <span class="ind ind-thinking">
                  <span class="dot"></span>
                  <span class="dot"></span>
                  <span class="dot"></span>
                </span>
                <span class="ind ind-bars">
                  <span class="bar"></span>
                  <span class="bar"></span>
                  <span class="bar"></span>
                  <span class="bar"></span>
                  <span class="bar"></span>
                </span>
                <svg class="ind ind-voice" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                  <path d="M3 10v4a1 1 0 0 0 1 1h3l5 4V5L7 9H4a1 1 0 0 0-1 1z" fill="currentColor" stroke="none"/>
                  <path class="wave wave-1" d="M16 8a5 5 0 0 1 0 8"/>
                  <path class="wave wave-2" d="M19 5a9 9 0 0 1 0 14"/>
                </svg>
              </span>
            </span>
          </button>

          <button id="stop-btn" class="side-btn" type="button" aria-label="End" title="End" aria-hidden="true">
            <svg viewBox="0 0 24 24" fill="currentColor"><rect x="6" y="6" width="12" height="12" rx="2"/></svg>
          </button>
        </div>

        <p id="circle-caption" class="circle-caption" role="status">Tap to start</p>
      </main>

      <footer class="footer">
        <span>
          Powered by
          <a href="https://github.com/huggingface/speech-to-speech" target="_blank" rel="noopener">huggingface/speech-to-speech</a>
          (WebRTC transport)
        </span>
      </footer>
    </div>

    <dialog id="settings-modal" class="modal">
      <form method="dialog" class="modal-content">
        <header class="modal-header">
          <h2>Settings</h2>
          <button class="icon-btn" value="close" aria-label="Close">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
          </button>
        </header>

        <div class="tab-panels">
          <section class="tab-panel active" role="tabpanel">
            <label class="field">
              <span>Load balancer URL</span>
              <input id="lb-url" type="url" autocomplete="off" spellcheck="false" placeholder="https://...endpoints.huggingface.cloud" />
              <small>
                Base URL of the Hugging Face speech-to-speech load balancer.
                The app POSTs <code>&lt;lb&gt;/session</code>, then a WebRTC SDP offer
                to the <code>connect_url</code> the LB returns.
              </small>
            </label>

            <div class="field-row">
              <label class="field">
                <span>Voice</span>
                <select id="voice">
                  <option value="Aiden" selected>Aiden</option>
                  <option value="Ryan">Ryan</option>
                  <option value="Dylan">Dylan</option>
                  <option value="Eric">Eric</option>
                  <option value="Ono_Anna">Ono_Anna</option>
                  <option value="Serena">Serena</option>
                  <option value="Sohee">Sohee</option>
                  <option value="Uncle_Fu">Uncle_Fu</option>
                  <option value="Vivian">Vivian</option>
                </select>
              </label>
            </div>

            <label class="field">
              <span>Instructions</span>
              <textarea id="instructions" rows="5" placeholder="You are a friendly voice assistant..."></textarea>
              <small>System prompt sent in <code>session.update</code> when the data channel opens.</small>
            </label>

            <div class="field">
              <button id="restart-conversation" type="button" class="btn primary wide" disabled>
                Restart conversation with these settings
              </button>
              <small id="restart-hint">Connect first, then come back here to apply live changes.</small>
            </div>
          </section>
        </div>

        <footer class="modal-footer">
          <button id="settings-save" type="submit" class="btn primary" value="save">Save</button>
        </footer>
      </form>
    </dialog>

    <script type="module" src="main.js"></script>
  </body>
</html>