Hugging Face's logo

Spaces:
mcuo
/
GPT-Voice
Sleeping

App Files Community
GPT-Voice / userscripts /README.md
mcuo's picture
mcuo
Upload 23 files
33dbd26 verified
preview code
|
Raw
History Blame Contribute Delete
5.79 kB

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を配置します。

/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を利用します。

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. 「結果をコピー」を押し、結果をプロジェクトへ共有する。

成功時の例:

SUCCESS audio[0] via mozCaptureStream

失敗時に確認する点:

  • audio要素を検出 があるか。
  • captureStream: true または mozCaptureStream: true か。
  • audio tracks=0 のままか。
  • NotSupportedError、SecurityError、InvalidStateError が出ていないか。

安全性

  • 音声、会話本文、認証情報を外部送信しません。
  • 音声は録音・保存しません。
  • 診断ログに完全な音声URLやCookieを含めません。
  • ChatGPTの音声経路を変更し得る createMediaElementSource() は使用しません。