MIT App Inventorで音声認識を用いたAIとの対話アプリを作成する（会話ができるGemini Liveを真似してみた！）

## はじめに
[Gemini Live](htps://blog.google/intl/ja-jp/company-news/technology/gemini-live/)便利ですよね！調べものするときに使用してます．
ここではMIT App Inventorを用いたAIとのおしゃべりアプリ（Gemini Liveの真似）を作成します．MIT App Inventorに搭載されている音声認識とGemini APIを使用した対話型のAIとのコミュニケーションアプリです．


:::note info
オリジナル対話アプリ
MIT App Inventorでsystem instructionを指示します．この指示の文章でAIの回答を調整でき，ユーザーに適した回答を行えるように指示することでオリジナリティあふれる色々なアプリに応用できます！

>**system instruction**:[システム命令を使用してモデルの動作を制御する](https://ai.google.dev/gemini-api/docs/system-instructions?lang=python&hl=all)
>システム指示を使用すると、特定のニーズやユースケースに基づいてモデルの動作を制御できます。
>システム指示を設定すると、モデルにタスクを理解するための追加のコンテキストが提供され、よりカスタマイズされたレスポンスが可能になります。また、モデルとユーザーのインタラクション全体を特定のガイドラインに準拠して行うことができます。また、エンドユーザーが提供するプロンプトとは別にシステム指示を設定することで、プロダクト レベルの動作を指定することもできます。
:::


:::note info
Google 参考リンク
[Geminile for all Live voice on voice conversation using web APIs and Gemini API](https://ai.google.dev/competition/projects/geminile-for-all)
:::

## アプリの概要
ボタンをクリックするとAIとの会話がスタートします．初めはユーザーがAIに話しかけます．話しが終わると，アプリが音声をテキストに変換し，Gemini APIに渡します．レスポンスが来ると，回答をスマホがしゃべります．しゃべり終わると，音声認識をスタートし，会話を続けることができます．
ただ，Geminiの解答中に割り込んでユーザーの音声を認識させることができないため，この点に関してはGemini Liveに劣っているところです．

:::note info
MIT App InventorでのGemini APIを用いたアプリ開発について
[MIT App InventorからGenimiを使用する方法 (interactive chat)](https://qiita.com/keito___abc/items/3e1bf1c23b0960cdc765)
:::

## API keyの取得
[Google AI Studio](https://aistudio.google.com/app/prompts/new_chat?pli=1)にアクセスをし，APIKeyを作成する．

## MIT App Inventorの作業
### Designer画面
以下のように作成します．

![スクリーンショット 2024-11-27 115728.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3928359/44ea3ac8-18e4-dbc5-8899-4d6f765c1eea.png)

|機能|内容|
|:-:|:-:|
|Button_音声認識|ボタン，AIとの対話スタート．|
|Button_tinyDB_リセット|ボタン，tinyDB（履歴）のリセットを行う．|
|Button_履歴|ボタン，対話履歴の閲覧．|
|Button_音声STOP|ボタン，AIのレスポンスの回答の音声を止める．|
|Label_response|ラベル，回答の表示する．|
|SpeechRecognizer1|音声をテキストに変換する．|
|Web1|Gemini APIにリクエストを送る．|
|TextToSpeech1|Gemini APIの解答をしゃべる．|


### Blocks画面
#### 変数
- **history**
対話型のチャットを行うために，履歴を残す．
![blocks (2).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3928359/32fd1e5a-26a1-13a8-6b58-a0e570ff8043.png)

- **url**
Gemini APIにアクセスするURL
```
https://generativelanguage.googleapis.com/v1beta/models/gemini-1.5-flash-latest:generateContent?key=
```
![blocks (3).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3928359/c0f69f85-97f3-8d08-8136-efb22942ef40.png)

- **apiKey**
GeminiAPIを使用するためのAPIKey
ここに自身のAPIKeyを貼り付ける．
![blocks.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3928359/3865c8f5-5715-4068-3b8d-00ec1c94095c.png)

- **system_instruction**
AIの回答を指示する，要求に対応できる文章を入力して下さい．
```
貴方は何でも知っている神です．
回答はtextToSpeechをしようして，音声にして利用者に伝えます．
以下に示す注意点を厳守して回答してください．
音声で回答するため，回答には音声で回答できないテキスト，絵文字を含めないでください．
回答は100文字以内で回答できるとよいです．内容によっては超えても構いません．
漢字の読みが間違いそうな場合にはひらがなで回答してください．
```
![blocks (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3928359/8a6fac49-b3f7-2909-41e8-d0cdeb3438c2.png)


### ボタンクリック
- **Button_音声認識**
![blocks (5).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3928359/0e18f53d-5bb3-3637-8ceb-3a233d4e6bb4.png)


- **Button_tinyDB_リセット**
![blocks (6).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3928359/da0e2c7b-2bf1-5acf-a1f0-62ba69a152ad.png)


- **Button_履歴**
![blocks (7).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3928359/8269ffdc-b053-815a-f27a-0c14dc2fc25f.png)


- **Button_音声STOP**
![blocks (8).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3928359/be7d039c-819f-0036-9891-b010bb926b39.png)


### ほかのブロック
- **when Screen1. Initialize**
![blocks (4).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3928359/5800454e-7ad9-44bf-5d31-edd47b816367.png)

- **when Speech Recognizer1 After getting text**
![blocks (9).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3928359/01649251-a2df-c2b1-bd2a-ba7c97d0a18e.png)

- **when Web1 get text**
![blocks (10).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3928359/38ae748c-646e-030a-7295-2c39aca271c9.png)

## 終わりに
プログラミングを行うことなく，AIとの対話型のコミュニケーションを行うことができるようになりました．生成AIは莫大な情報を学習しているのでsystem_instructionの設定次第でいろいろな使い道があると思います！