File size: 5,792 Bytes
f14dbfd 2198ecf f14dbfd 33dbd26 f14dbfd 2198ecf f14dbfd 2198ecf f14dbfd 2198ecf f14dbfd 2198ecf f14dbfd 2198ecf f14dbfd 2198ecf | 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 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 | # 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()` は使用しません。
|