# 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()` は使用しません。