| <!DOCTYPE html> |
| <html lang="zh-CN"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title data-i18n="webui.chatkit.pageTitle">Grok2API - ChatKit</title> |
| <link rel="icon" href="/favicon.ico?v={{APP_VERSION}}"> |
| <link href="https://cdn.jsdelivr.net/npm/geist@1.0.0/dist/fonts/geist-sans/style.css" rel="stylesheet"> |
| <link href="https://cdn.jsdelivr.net/npm/geist@1.0.0/dist/fonts/geist-mono/style.css" rel="stylesheet"> |
| <link href="/static/css/app.css?v={{APP_VERSION}}" rel="stylesheet"> |
| <script src="https://cdn.jsdelivr.net/npm/livekit-client@2.11.4/dist/livekit-client.umd.min.js"></script> |
| </head> |
| <body class="webui-page"> |
| <div id="webui-header" data-active="/webui/chatkit"></div> |
| <main class="webui-main webui-chatkit-main"> |
| <section class="webui-chatkit-shell"> |
| <section class="webui-chatkit-stage"> |
| <div class="webui-chatkit-stage-card"> |
| <div class="webui-chatkit-orb-wrap"> |
| <div id="voiceOrb" class="webui-chatkit-orb is-idle"> |
| <div class="webui-chatkit-bubble webui-chatkit-bubble-a"></div> |
| <div class="webui-chatkit-bubble webui-chatkit-bubble-b"></div> |
| <div class="webui-chatkit-bubble webui-chatkit-bubble-c"></div> |
| <div class="webui-chatkit-bubble webui-chatkit-bubble-d"></div> |
| <div class="webui-chatkit-bubble webui-chatkit-bubble-e"></div> |
| </div> |
| <div id="connectionBadge" class="webui-chatkit-badge" data-i18n="webui.chatkit.statusIdle">未连接</div> |
| </div> |
|
|
| <div class="webui-chatkit-stage-copy"> |
| <div class="webui-chatkit-stage-title">Grok Voice</div> |
| <div id="connectionText" class="webui-chatkit-stage-text" data-i18n="webui.chatkit.idleText">点击并授权，通过 ChatKit 语音会话连接 Grok Voice。</div> |
| </div> |
|
|
| <div class="webui-chatkit-controls"> |
| <button id="startVoiceBtn" class="btn btn-primary webui-chatkit-icon-btn webui-chatkit-icon-btn-primary" type="button" aria-label="开始" title="开始"> |
| <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M8 6.5v11l8-5.5-8-5.5Z"/></svg> |
| </button> |
| <button id="muteVoiceBtn" class="btn webui-chatkit-icon-btn" type="button" disabled aria-label="静音" title="静音"> |
| <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 10h3l4-4v12l-4-4H5z"/><path d="M16 9a4.5 4.5 0 0 1 0 6"/><path d="M18.5 6.5a8 8 0 0 1 0 11"/></svg> |
| </button> |
| <button id="newSessionBtn" class="btn webui-chatkit-icon-btn" type="button" disabled aria-label="新会话" title="新会话"> |
| <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 5v14"/><path d="M5 12h14"/></svg> |
| </button> |
| </div> |
|
|
| <div id="audioRoot" class="webui-chatkit-audio"></div> |
| </div> |
|
|
| <section class="webui-chatkit-toolbar" aria-label="Voice settings"> |
| <div class="webui-chatkit-toolbar-controls"> |
| <label class="webui-chatkit-pill"> |
| <span class="webui-chatkit-pill-label" data-i18n="webui.chatkit.voiceLabel">声音</span> |
| <select id="voiceSelect" class="input webui-chatkit-pill-input"> |
| <option value="ara" selected>Ara</option> |
| <option value="eve">Eve</option> |
| <option value="leo">Leo</option> |
| <option value="rex">Rex</option> |
| <option value="sal">Sal</option> |
| <option value="gork">Gork</option> |
| </select> |
| </label> |
| <label class="webui-chatkit-pill"> |
| <span class="webui-chatkit-pill-label" data-i18n="webui.chatkit.personalityLabel">个性</span> |
| <select id="personalitySelect" class="input webui-chatkit-pill-input"> |
| <option value="assistant" selected>Assistant</option> |
| <option value="custom">Custom</option> |
| <option value="therapist">Therapist</option> |
| <option value="storyteller">Storyteller</option> |
| <option value="kids_story_time">Kids Story Time</option> |
| <option value="meditation">Meditation</option> |
| <option value="unhinged">Unhinged 18+</option> |
| <option value="sexy">Sexy 18+</option> |
| </select> |
| </label> |
| <label class="webui-chatkit-pill"> |
| <span class="webui-chatkit-pill-label" data-i18n="webui.chatkit.speedLabel">语速</span> |
| <select id="speedSelect" class="input webui-chatkit-pill-input"> |
| <option value="0.5">0.5x</option> |
| <option value="0.75">0.75x</option> |
| <option value="1.0" selected>1.0x</option> |
| <option value="1.1">1.1x</option> |
| <option value="1.25">1.25x</option> |
| <option value="1.4">1.4x</option> |
| <option value="1.5">1.5x</option> |
| <option value="1.75">1.75x</option> |
| <option value="2.0">2.0x</option> |
| </select> |
| </label> |
| <label class="webui-chatkit-pill"> |
| <span class="webui-chatkit-pill-label" data-i18n="webui.chatkit.instructionLabel">提示</span> |
| <input id="instructionInput" type="text" class="input webui-chatkit-pill-input" /> |
| </label> |
| </div> |
| </section> |
| </section> |
| </section> |
| </main> |
|
|
| <script src="/static/js/i18n.js?v={{APP_VERSION}}"></script> |
| <script src="/static/js/auth.js?v={{APP_VERSION}}"></script> |
| <script src="/static/js/toast.js?v={{APP_VERSION}}"></script> |
| <script src="/static/js/webui-header.js?v={{APP_VERSION}}"></script> |
| <script src="/static/js/footer.js?v={{APP_VERSION}}"></script> |
| <script src="/static/js/webui/chatkit.js?v={{APP_VERSION}}"></script> |
| </body> |
| </html> |
|
|
