サイトの独自コンテンツを音声認識とAIでコントロールする


# やりたいこと

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

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

| ホーム | つぶやき一覧 | プロフィール |
|:-:|:-:|:-:|
| ![スクリーンショット 2023-09-27 17.06.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/329559/1d987e6e-5b2b-b723-a571-d4e1b41abbaa.png)| ![スクリーンショット 2023-09-27 17.06.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/329559/f65f9e85-ce47-f887-bb6b-da3172c03d76.png)|  ![スクリーンショット 2023-09-27 17.07.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/329559/6b701e48-7869-ab4c-ac06-d2b68263e773.png) |
| 特に何もないトップページ | つぶやいたりいいねしたり、<br>他のユーザのプロフィールに飛んだりできる | プロフィールがみれる |


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

# AIに喋りかけてみよう

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

![スクリーンショット 2023-09-27 17.12.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/329559/27da5739-0a95-f74a-ee0f-fa5db819b0d5.png)

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

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

![スクリーンショット 2023-09-27 17.13.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/329559/c4f896e9-19d2-3a49-fe18-61256a42cff4.png)

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

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

![スクリーンショット 2023-09-27 17.14.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/329559/98dc54b8-6b9e-f82b-6f35-48e8850bb7c1.png)

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

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

![スクリーンショット 2023-09-27 17.15.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/329559/5493ea27-cc44-0e35-c103-2c397a0e7bf6.png)

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

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

### 一つ前のページに戻って

![スクリーンショット 2023-09-27 17.18.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/329559/4886e11e-6e2c-c1d6-4408-2022bf5a2596.png)

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

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

![スクリーンショット 2023-09-27 17.21.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/329559/a401ec3e-3cba-733b-bb44-075ad45c73d6.png)

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

地味に返答が大阪感でた

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

![スクリーンショット 2023-09-27 17.48.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/329559/dfa1e2c3-b3d3-4d59-2392-3634cd8e1e37.png)

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

### 長めの命令

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

![スクリーンショット 2023-09-27 17.51.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/329559/b882fbb8-f5ab-4bce-69be-b37c40cc784c.png)

ちょっとおしい

# ソースの話

<details><summary>プロンプトはこのような感じ</summary><div>

```
あなたは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の時につぶやきたい内容
    }
  ]
}
```

</div></details>

最新はソースを見てください
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です

https://github.com/babu-ch/onseikun

# おわり

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

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

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

# 追記

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

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

https://qiita.com/babu-ch/items/58d4e37403b59558448e