| <!doctype html> |
| <html lang="ja"> |
| <head> |
| <meta charset="utf-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1"> |
| <title>ChatGPT Live Avatar Test</title> |
| <link rel="stylesheet" href="/static/styles.css"> |
| </head> |
| <body> |
| <header class="toolbar"> |
| <div> |
| <h1>ChatGPT Live Avatar Test</h1> |
| <p>ChatGPTのタブと「タブの音声を共有」を選択してください。</p> |
| </div> |
| <div class="actions"> |
| <button id="startShare" class="primary">ChatGPTタブを共有</button> |
| <button id="stopShare" disabled>共有を停止</button> |
| <button id="loadSample" disabled>サンプルキャラ読込</button> |
| <button id="toggleRig" disabled>設定UIを表示</button> |
| <button id="toggleScreen" disabled>共有画面を隠す</button> |
| <button id="openChatGPT">ChatGPTを開く</button> |
| </div> |
| </header> |
|
|
| <main> |
| <section id="stage" class="stage"> |
| <video id="sharedScreen" autoplay playsinline muted></video> |
| <div id="emptyState" class="empty-state"> |
| <strong>共有待ち</strong> |
| <span>開始後、ChatGPT Liveを開いているタブを選択します。</span> |
| </div> |
| <iframe |
| id="rigFrame" |
| class="rig-frame" |
| title="Anime2.5DRig" |
| allow="microphone" |
| ></iframe> |
| </section> |
|
|
| <aside class="diagnostics"> |
| <h2>検証ステータス</h2> |
| <dl> |
| <div><dt>画面共有</dt><dd id="shareStatus">未開始</dd></div> |
| <div><dt>音声トラック</dt><dd id="audioStatus">未確認</dd></div> |
| <div><dt>Anime2.5DRig</dt><dd id="rigStatus">確認中</dd></div> |
| </dl> |
|
|
| <label for="mouthMeter">推定口開度</label> |
| <meter id="mouthMeter" min="0" max="1" value="0"></meter> |
| <output id="mouthValue">0.00</output> |
|
|
| <label for="sensitivity">感度</label> |
| <input id="sensitivity" type="range" min="0.5" max="4" value="1.8" step="0.1"> |
|
|
| <p id="message" class="message" role="status"> |
| Anime2.5DRigが未配置でも、タブ音声の取得とメーターは検証できます。 |
| </p> |
| <p class="note"> |
| 共有画面はプレビュー映像なので、ここからChatGPTを直接操作することはできません。会話操作は元のChatGPTタブで行います。 |
| </p> |
| </aside> |
| </main> |
|
|
| <script src="/static/app.js" defer></script> |
| </body> |
| </html> |
|
|
