| # Tampermonkeyユーザースクリプト |
|
|
| 対象ファイル: |
|
|
| - `chatgpt-live-avatar.user.js` — 本実装 |
| - `chatgpt-live-audio-diagnostic.user.js` |
|
|
| ## 本実装 |
|
|
| `chatgpt-live-avatar.user.js` はChatGPTページへAnime2.5DRigアバターを重ね、AI応答音声で口開度を動かします。 |
|
|
| 事前にHugging Face Spaceへ、このプロジェクトの最新ファイル一式を配置してください。特に次の更新が必要です。 |
|
|
| - `data/Anime2.5DRig/index.html`: 埋め込みモードと `postMessage` 口開度API |
| - `data/Anime2.5DRig/sample.psd`: 初期キャラクター |
|
|
| ### 本実装のインストール |
|
|
| 1. Hugging Face Spaceへこのプロジェクトの最新ファイル一式を配置し、ビルド完了を待つ。 |
| 2. Android版FirefoxでTampermonkeyのダッシュボードを開く。 |
| 3. 新規ユーザースクリプトを作成する。 |
| 4. エディターの既存内容を削除する。 |
| 5. **`chatgpt-live-avatar.user.js` の全内容**を貼り付けて保存する。 |
| 6. 診断版 `chatgpt-live-audio-diagnostic.user.js` は無効化または削除する。 |
| 7. Firefoxで `https://chatgpt.com/` を再読み込みする。 |
|
|
| 既に本実装を登録済みの場合は、Tampermonkeyのエディターで内容を最新版へ全置換してください。最新版の `@version` は `0.1.5` です。 |
|
|
| 本実装では、診断版ファイルを更新・上書きするのではなく、別ファイルの `chatgpt-live-avatar.user.js` をTampermonkeyへ登録します。 |
|
|
| 操作: |
|
|
| - `開始`: ユーザー操作を起点にAudioContextを開始し、再生中のChatGPT Live音声へ接続する。 |
| - `👁`: アバター表示／非表示。 |
| - `大小`: 小・中・大・最大の4サイズを切り替える。最大ではスマートフォン画面の幅と利用可能な高さをほぼ全面使用する。 |
| - `移動`: 右下、中央下、左下を切り替える。 |
| - `🎭`: `data/Anime2.5DRig/avatar_data/*.psd` と `sample.psd` からアバターを選択する。 |
| - `⚙`: 感度スライダーを表示する。 |
|
|
| 表示中かつbridge準備済みのアバター本体をタップすると、操作メニュー、文字、アイコン、状態ランプ、開いている設定パネルを完全に非表示にします。もう一度アバター領域をタップすると再表示します。アバター非表示中または未読込中は、このタップ処理を実行しません。 |
|
|
| ### 複数アバターPSD |
|
|
| Storage Bucketの次のフォルダへPSDを配置します。 |
|
|
| ```text |
| /buckets/Anime2.5DRig/avatar_data/ |
| ``` |
|
|
| Space起動時にこのフォルダがマウントされている必要があります。`/api/avatars` がPSD一覧を返し、🎭メニューへ反映します。PSDは実行中Spaceの `/AvatarData/<ファイル名>` から配信されます。サブフォルダ内のPSDは対象外です。 |
|
|
| 状態ランプは待機中が黄色、音声stream接続中が緑です。ChatGPT Liveの再生中audio要素が後から生成・交換された場合も1秒ごとに再検出します。 |
|
|
| 操作バーの短い状態表示: |
|
|
| - `未読込` / `iframe失敗`: ChatGPTページからSpace iframeを読み込めていない。 |
| - `接続待ち` / `bridge失敗`: iframeは読み込めたがAnime2.5DRig bridgeから応答がない。 |
| - `停止中`: アバターbridge準備済み。「開始」を押す前。 |
| - `音声待ち`: 開始済みだがChatGPT Liveの再生audio stream待ち。 |
| - `動作中`: アバターbridgeとAI音声解析の両方が接続済み。 |
|
|
| `↗` はSpaceのアバターURLを直接開く確認ボタンです。直接開いてsampleキャラクターが表示されるのに `iframe失敗` となる場合は、ChatGPT側CSPによる埋め込み拒否の可能性があります。 |
|
|
| 本実装は次の固定Space URLを利用します。 |
|
|
| ```text |
| https://mcuo-gpt-voice.hf.space/Anime2.5DRig/?embed=1 |
| ``` |
|
|
| Space側の埋め込みAPIは `https://chatgpt.com` と `https://chat.openai.com` からの `postMessage` だけを受け付けます。 |
|
|
| ## 音声診断 |
|
|
| ## 対象環境 |
|
|
| - Android版Firefox |
| - Tampermonkey |
| - `https://chatgpt.com/` の音声モード |
|
|
| iPhone/iPad版FirefoxはFirefoxアドオンを利用できないため対象外です。 |
|
|
| ### 診断版のインストール |
|
|
| 1. Android版FirefoxへTampermonkeyをインストールする。 |
| 2. Tampermonkeyのダッシュボードを開く。 |
| 3. 新規ユーザースクリプトを作成する。 |
| 4. 既存内容を削除し、`chatgpt-live-audio-diagnostic.user.js` の全内容を貼り付けて保存する。 |
| 5. Firefoxで `https://chatgpt.com/` を再読み込みする。 |
|
|
| この手順は音声取得可否を調べる診断版専用です。本実装を利用するときは、上の「本実装のインストール」に従ってください。 |
|
|
| ## 診断手順 |
|
|
| 1. ChatGPTの音声モードを開始する。 |
| 2. 右下の「Live音声診断」で「診断開始」を押す。 |
| 3. ChatGPTに音声で応答させる。 |
| 4. `取得成功` と表示され、取得音量メーターが動くか確認する。 |
| 5. 「結果をコピー」を押し、結果をプロジェクトへ共有する。 |
|
|
| 成功時の例: |
|
|
| ```text |
| SUCCESS audio[0] via mozCaptureStream |
| ``` |
|
|
| 失敗時に確認する点: |
|
|
| - `audio要素を検出` があるか。 |
| - `captureStream: true` または `mozCaptureStream: true` か。 |
| - `audio tracks=0` のままか。 |
| - `NotSupportedError`、`SecurityError`、`InvalidStateError` が出ていないか。 |
|
|
| ## 安全性 |
|
|
| - 音声、会話本文、認証情報を外部送信しません。 |
| - 音声は録音・保存しません。 |
| - 診断ログに完全な音声URLやCookieを含めません。 |
| - ChatGPTの音声経路を変更し得る `createMediaElementSource()` は使用しません。 |
|
|
