文字起こしAI（Whisper） × Power Appsアプリを高速で開発する　w/ AI Builder

# はじめに
みなさん、こんにちは。
日本マイクロソフトの佐々木です。

以前生成AI活用（画像処理）×Power Appsアプリとして以前の記事で紹介させていただきました。

https://qiita.com/tomoyasasaki1204/items/81f6629a301512a25191

今回は同じくOpenAI社の文字起こしAIのWhisperモデルを利用したシナリオをご紹介します。


## 今回作成するソリューション
今回作成するソリューションです。
イメージとしては、スマホやタブレットの音声入力が活躍しそうな工場や生産現場で活用されるアプリをイメージしています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2975138/0818ff69-f8cc-0370-50fd-db053315c368.png)


**①文字起こし - Whisperを利用**
Azure OpenAI の Whisperを利用して、ユーザーの音声入力を文字起こしします。

https://learn.microsoft.com/ja-jp/azure/ai-services/openai/whisper-quickstart?tabs=command-line%2Cpython-new%2Cjavascript&pivots=programming-language-javascript

**②文章校正 - AI Builder プロンプトビルダーを利用**
通常、Whisper等では考慮されない専門用語や社内用語を校正します。
社内データをRAGとして、AI Builder プロンプトビルダー（生成AI）を利用して、文章校正をおこないます。

https://learn.microsoft.com/ja-jp/ai-builder/create-a-custom-prompt

**③テキスト処理 - AI Builder プロンプトビルダーを利用**
ついでに報告された文章から、必要事項を抽出します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2975138/f50f3b39-90dd-6bfd-756d-2e7c49f9a581.png)


:::note info
②~③の箇所については、下記の関連記事にて投稿しています。
そのため、本日は①の箇所を中心に記事とします。
:::
https://qiita.com/tomoyasasaki1204/items/b5b088ce1b6f4a4be212


# Power Platformで開発する

## Whisper - Azure OpenAIのリソースを用意する
WhisperはAzure OpenAI上に用意します。
こちらのステップは割愛しますが、慣れた方であればすぐにモデルのデプロイができると思います。

https://learn.microsoft.com/ja-jp/azure/ai-services/openai/whisper-quickstart?tabs=command-line%2Cpython-new%2Cjavascript&pivots=programming-language-javascript

エンドポイントの情報やAPIキーなどPower Platformから呼び出すための情報をメモしておきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2975138/3c06e9fe-6914-039f-5f9e-037ed5ac35e3.png)


## Power Automateからテストコールする
試しにPower Automateから Azure OpenAIのWhisper APIをコールしてみます。
まずはレスポンスが返ってくるかだけテストしてみます。
※Azure側で閉域設定をしているなどネットワーク起因でこちらのコールが正常に完了しない場合があります。

また、音声ファイルの形式や制限事項にご注意ください。
サポートされているファイル形式: mp3、mp4、mpweg、mpga、m4a、wav、webm
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2975138/fbf49b87-f7a5-f66e-d1f8-056d3ec71a88.png)

https://learn.microsoft.com/ja-jp/azure/ai-services/speech-service/whisper-overview

まず、最小の構成でテストコールしてみたいと思います。
手元に適当なmp3の音声ファイルがあればこちらの形式で問題ないかと思います。

```言語:HTTPリクエストの本文
{
  "$content-type": "multipart/form-data",
  "$multipart": [
    {
      "headers": {
        "Content-Disposition": "form-data; name=\"model\""
      },
      "body": "whisper-1"
    },
    {
      "headers": {
        "Content-Disposition": "form-data; name=\"file\"; filename=\"@{triggerBody()?['file']?['name']}\""
      },
      "body": {
        "$Content-type": "audio/webm",
        "$content": @{triggerBody()?['file']?['contentBytes']}
      }
    }
  ]
}
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2975138/8888ec2a-9a65-d18c-e014-cc55c8b38f77.png)


詳細のRESTは下記を確認ください。

https://learn.microsoft.com/ja-jp/azure/ai-services/openai/whisper-quickstart?tabs=command-line%2Cpython-new%2Cjavascript&pivots=rest-api#create-a-rest-api-request-and-response


正常にテストできましたら、Power Appsへ応答アクションを配置し（必要に応じてJSON解析アクションも）、レスポンスをPower Apps側へ返答できるように設定しましょう。


## Power Appsアプリを作成する
今回は最低限の機能をもったアプリを作成していきたいと思います。
1. マイクコントロールで音声を入力
1. Whisperをコール
1. 結果を確認
1. AI Builder プロンプトビルダーでテキスト処理（文章校正 / 抽出）


## マイクコントロールの配置
マイクコントロールを配置します。
音声ファイルをWhisperへ渡す方法はいくつかありますが、一番手軽な方式で実装します。

https://learn.microsoft.com/ja-jp/power-apps/maker/canvas-apps/controls/control-microphone

メイクコントロールのOnStopプロパティに下記の関数を入力します。
```OnStop
UpdateContext({Response:'AppstoWhisperw/AIB'.Run(
        {file:{
            name: "audio.webm",
            contentBytes: Microphone1.Audio
        }}
    )
```

これだけでOKです。関数については下記のとおりです。

・UpdateContext({ Response: ... })
UpdateContext は、Power Apps 内で一時的な変数（コンテキスト変数）を作成または更新するために使用されます。
この例では、Response という変数を更新しています。この変数には、Power Automate のフロー実行結果が格納されます。

・AppstoWhisperw/AIB.Run()
Run は、Power Automate のフローを呼び出すためのメソッドです。この例では、AppstoWhisperw/AIB という名前のフローが実行されています。
フローには引数を渡すことができます。この例では、ファイル（オーディオファイル）に関する情報を渡しています。

・{file:{name: "audio.webm", contentBytes: Microphone1.Audio}}
Power Automate のフローに渡されるデータを示しています。
file という引数には、2 つのプロパティがあります。
name: ファイル名です。この場合は "audio.webm" というファイル名が指定されています。
contentBytes: 音声データが含まれます。この例では、Microphone1.Audio という Power Apps のマイクコントロールから取得した音声データを渡しています。



![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2975138/3d8ba135-8c64-eeb0-2a3b-ea514650aa9a.png)


## Whisperをコール ＆ 結果の確認
テキストラベルコントロールやテキスト入力コントロールを配置し、Power Automateからの結果を確認してみます。
私の例ですと、Power Automateからの出力を[変換前]という引数を設定しています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2975138/fa3ba4a8-f665-040b-580b-d0005fe6cc7b.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2975138/51b689c4-8178-6d61-ee0c-2a2e188b6ac3.png)

ここまでで、音声入力と文字起こしの機能をもったアプリは完成です！

## AI Builder プロンプトビルダーでテキスト処理（文章校正 / 抽出）
ここからは追加機能です。
AI Builderのプロンプトビルダー（生成AI機能）を利用し、Whisper等では考慮されない専門用語や社内用語を校正します。
社内データをRAGとして、AI Builder プロンプトビルダー（生成AI）を利用して、文章校正をおこないます。
こちらのイメージは下記記事で紹介していますので、参考ください。

https://qiita.com/tomoyasasaki1204/items/b5b088ce1b6f4a4be212

### AIプロンプト①：文章校正
こちらは辞書テーブルをデータソースとして利用し、文字起こしのテキストを正しく校正しています。
また、文字起こし特有の「えー」、「えっとー」などを除去します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2975138/fce48a39-0ea3-3644-a0bf-177ac4895f4a.png)

### AIプロンプト②：HTMLの作成
文章校正の前後での差異を明らかにするため、
HTMLテキストを作成してもらってますが、ここは個人的な興味（デモ用）なので割愛していいです。

### AIプロンプト③：必要項目の抽出
ユーザーの音声入力（正しくは校正された文章）から報告内容を抽出します。
例えば、設備保全を想定する場合、設備名（設備テーブルをデータソースとする）、件名、現象、エラーコードなどです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2975138/71ff8767-8aab-ebcb-6506-911d91628e00.png)


### AIプロンプト④：過去履歴をデータソースにしたAIサポート（RAG）
いわゆるイメージしやすいRAG的な利用方法です。
過去の履歴をデータソースとし、ユーザーからの報告内容を解決するような生成AIによるサポートです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2975138/f9c7145f-2131-9fcc-0f08-a9bfb54f0920.png)

### Power Automateで組み合わせてみる
これらを Power Automateからコールするように設定します。
※AIプロンプトはわかりやすいように分けていますが、究極1つでもできる気もします。ここはコストや精度と相談です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2975138/d0713e56-1fe7-cfb6-bf25-169ab9f701c7.png)



## 最終形態
これまで紹介した内容を組み合わせると以下の画像のような機能をもったアプリになります。
上部で文字起こし＆文章校正をおこない、下部でテキスト抽出をおこないます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2975138/f50f3b39-90dd-6bfd-756d-2e7c49f9a581.png)

過去データの検索、回答生成も意図したとおりにできています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2975138/b6737871-15a5-b871-6746-e0d69f9d44df.png)

リンクをクリックすると関連データに遷移する（Dataverseのテーブル ビュー）ようになっています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2975138/7a7856d6-3bbf-7d08-d5ce-53d6118ac6a3.png)



# おわりに
以上でPower AppsアプリからWhisper文字起こしを利用する方法についてご紹介しました。

文字起こし部分については、他の機能（Windowsやスマホ機能）でも代替可能ですので、ぜひAI Builderの箇所でもお試しください！