やりたいこと

音声認識→AIで命令をJSONにする→サイト上で実行する

このようなサイトがあります

ホーム	つぶやき一覧	プロフィール

特に何もないトップページ	つぶやいたりいいねしたり、他のユーザのプロフィールに飛んだりできる	プロフィールがみれる

右下の枠がAIとやりとりするとこで、マイクを押せば録音開始、もっかい押したら録音してその命令をAIに飛ばします

AIに喋りかけてみよう

ホーム画面で「お腹へったってつぶやいて」と喋りかける

つぶやきページに移動してつぶやきをポストしました

ソーキそば食べたいにいいねして

コンテンツを認識していいねしてくれた

パスタ吸い込みマンさんのつぶやきにいいねして

ユーザを認識していいねしてくれた

バカンスじろうのプロフィール開いて

/profile/{バカンスじろうのuid} に移動してくれました

「プロフィールみたい」だとダメでした

一つ前のページに戻って

プロフィールページからつぶやき一覧に戻った

テレビおもろいなのいいね解除して

いいね解除してくれた
「取り消して」だと感想言うだけでしたがプロンプトの改善でいけそう

地味に返答が大阪感でた

バカンスじろう以外のつぶやきにいいねして

おお〜きもT
バカンスじろう、すまん

長めの命令

「お腹へった」ってつぶやいて。あとそれとは別で「お肉食べたい」ってつぶやいて

ちょっとおしい

ソースの話

プロンプトはこのような感じ

あなたはwebサイトのアシスタントです

このサイトには以下のページがあります
[
  {path: "/"}, // ホーム、最初のページ
  {path: "/tweet"}, // つぶやき一覧ページ つぶやきを見たり、つぶやいたり、いいねしたりできる
  {path: "/profile/:uid"}, // ユーザのプロフィールページ
]

このサイトでできる行動
・/tweet
つぶやいたり、いいねしたりできる
つぶやきを投稿する行為は「ポストする」「つぶやく」「投稿する」と言われる

・/profile/:uid
ユーザのプロフィールがみれる

・/
特に面白くないトップページ

以下のようなinとoutを定義するのでそれに従ってjsonでレスポンスを生成してください

in
{
  uid: string; // ユーザのuid
  question: string; // ユーザの質問
  currentLocation: string; // 現在のpath
  users: object[]; // ユーザ情報
  tweets: object[]; // つぶやき情報
  routeHistories: string[]; // 過去のlocationの履歴 最新はcurrentLocationと同じ
}

out
{
  answer: string; // 何をやったのか、または質問に対する返答
  // commandは複数実行できるようになっています。
  // 例えばcurrentLocationが/ならつぶやきたい場合は/tweetに移動してからpostする必要があります
  // commandは必ずしも毎回返す必要はありません。例えば雑談だったらcommandsは空配列です
  commands: [ 
    {
        type: "move"|"favorite"|"post" // move=ページ移動, favorite=いいねする or いいねを解除する, post=つぶやく
        newLocation: string; // type=moveの時に移動したいpathを指定する
        favoriteId: string; // type=favoriteの時にいいね、またはいいね解除したいid
        postText: string; // type=postの時につぶやきたい内容
    }
  ]
}

最新はソースを見てください
https://github.com/babu-ch/onseikun/blob/main/src/composables/openai.ts

適当にやっているので改善の余地はめっちゃあると思います

↑のプロンプトでAIがJSON化した命令を以下が実行しています
https://github.com/babu-ch/onseikun/blob/main/src/composables/commandHandler.ts

試し方

chrome+macでしか動作確認してないです

以下をcloneしREADMEに従って実行してください

サンプルなのでフロントからOpenAIのAPIを叩いていますが、実際にこのようなものを作る時はAI部分はbackendで実装してください

環境はvite+vue+typescriptです

おわり

結構適当に作ったけどふわっとした命令を解釈して実行してくれるのが面白かった

webサイトやスマホアプリに実装されると楽しそう

他人のサイトでも拡張機能で音声コントロールの実装ができそうですね

追記

今回の記事をVertex AI for Firebaseに変更する記事を書きました

これでAIの処理もclientで完結できます