- 目が不自由な人用の、ビジュアルソナー
- カメラで周囲の様子を定期的に撮影
- GPT4-Vで、様子を解析
- 音声合成で、ユーザーに伝える
- 今後やりたいこと
- アクセシビリティに配慮。音声で操作できるのが理想
- 画像について、音声入力で細かい様子を質問できるようにしたい
- 質問 or 次の撮影にすすむかを、音声で制御(Functin Calling?)
- vsonar.htmlをブラウザで表示
- [api key]に、OpenAIのAPIキーを指定
- または、vsonar.html?key=xxxxxx とURLのクエリーパラメータに指定してもOK
- [Start]ボタンをクリック
- カメラの許可を求められらた、許可する
- カメラの映像が表示される
- [Explain in Voice]ボタンをクリック
- 映像から画面を切り抜き
- OpenAIの GPT-4 Vで画面を解析
- TTSで音声に変換、それを再生して画像の説明をする
- [Stop]ボタンをクリックすると、カメラの映像が停止
Visual Sonnar
実験ページ
MIT
- スマホブラウザで動作
- iPhone Safari
- Andorid Chrome
- 背面カメラの映像を取得
- mediadevices.getUserMedia()
- 映像から画像を取得、Base64変換
- Canvasを使ってDataURLを取得
- [-] OffscreenCanvasを使う --> toDataURL()が使えない
- pythonのBase64と合わせる
- chat gpt-4-vision-preview で画像を送信
- singleChatWithImage() 関数を用意
- image URL ... public URL
- image URL with Base64
- 履歴を扱う、multipleChatWithImage() 関数を用意
- 解析パターンを追加
- 普通に説明
- 詳細に説明
- もっと詳しく説明（履歴あり）
- 商品ラベル等の文字の読み上げ
- 歩く際の障害物を検知
- api key
- QueryStringから取得
- inputから取得
- UI改善
- ボタン制御
- [Explain in Voice]ボタンで、写真->解析->発声 まで
- ログ出力
- 画面に出す
- 音声出力(tts)
- ttsのテスト
- 取得内容を音声でプレイバック
- 音声入力
- speech API
- or getUserMedia() with VAD
- 最初の起動を声で（Siri＋ショートカット）
- 一連の動き
- 起動時は、カメラ開始のボタンが大きく出ている
- 最初の画面タップで、カメラを起動
- カメラ開始のボタンは小さくなる。
- 「カメラを起動しました」と音声で通知
- キャプチャーボタンを大きく表示 or カメラ映像表示 Videoタグのクリックで、キャプチャ
- ダブルタップイベント or 長押しイベントが取れるなら、それでカメラ終了
- 次の画面タップで、写真を撮って、「見えているものを解析してます」
- 解析結果を読み上げ
- その後、「追加の質問をどうぞ」と音声で確認
- 音声VADを開始
- 音声コマンドがあったらそれをテキスト化(Speech-to-text)
- さっきの画像について、さらにGPTに問い合わせ（さらに解析中、と音声通知）
- 解析結果を読み上げ
- 「追加の質問をどうぞ」と音声で確認、VADを再開
- 画面がタップされたら、写真を撮って、チャットの履歴をクリア、また解析を行う
- テキストを音声にして、ダウンロードするツール