Azure OpenAIのWhisper モデルを使って、サクっとPower Appsで文字起こしアプリを作成してみる

# はじめに
音声データの文字起こしに活用できる、OpenAIの音声認識・テキスト変換モデルが

- Azure OpenAI Service
- Azure AI Speech

2つのサービスを経由して利用することができます。
すでに`Azure AI Service`には、音声テキスト変換サービス、[Speech to Text](https://azure.microsoft.com/ja-jp/products/ai-services/speech-to-text)の機能があり、
私も利用した経験があります。

https://note.com/bonito_vba_gas/n/nb41cf2fbc7f3

https://www.slideshare.net/ssuser36babb1/20230425getsudemy01power-platform-azure-cognitive-servicepdf

今回は、話題の`Whisper`モデルを使う方法って、どう使うのかな🧐という興味本位で、Power Appsから使用する方法を記載していきます。

# Azure OpenAI Serviceを介したWhisperモデル
Azure OpenAI Serviceを介したWhisperモデルは、

- すばやく文字起こしをする
- ほかの言語を英語に翻訳する

という機能に適しています。

:::note warn
2024年5月13日段階でサポートされている地域は下記のとおりです。

| regions | 地域 |
|:-:|:-:|
|EastUS 2|米国東部 2|
|India South|インド南部|
|North Central|北中部|
|Norway East|ノルウェー東部|
|Sweden Central|スウェーデン中部|
|West Europe|西ヨーロッパ|

`Sweden Central(スウェーデン中部)`、AIサービスの展開が速いです。

:::

## ■ 0. リソースをデプロイする
Azure AIのリソースをデプロイし、サクっと準備します。
リソースの地域が対応していれば、`概要`の画面にて、`Whisper 音声テキスト変換`のメニューが表示されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2734332/2541d639-e5ff-0904-e421-2f691c4ebdce.png)

[ モデル ]を選択し、[ whisper ]を選択、[ デプロイ ]をクリック

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2734332/bcabc54e-0036-55a6-f8a9-9ed3375ea820.png)

コチラから入力する`赤枠`で囲まれた[ デプロイ名 ]の部分が、`URI`に関係していきます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2734332/2190f8e2-5dfc-7d21-73cd-a2040a2e5db6.png)

**デプロイが成功したら次のステップです！**

## ■ 1. Power Appsを準備する

サクっとテスト用の`Power Apps`を作成します。
Power Appsには、[マイク コントロール](https://learn.microsoft.com/ja-jp/power-apps/maker/canvas-apps/controls/control-microphone)があるので、こちらから音声を渡してみましょう！

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2734332/72758c5a-39a9-00ab-ae19-dffa743f8c5e.png)

レイアウトは下記のようにしています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2734332/57dbadd7-a420-3a60-c516-7cbc56e314bd.png)

マイク コントロールの`OnStop`プロパティに、録音が終わった後の音声データをAPIに送信し、文字列を受け取ります。

Power Automate クラウド フローの名前を、`PowerAutomateWhisper`にし、
文字列変数`Response`に格納する例です。

```plaintext:OnStop
UpdateContext({Response:PowerAutomateWhisper.Run(
        {
            name: "audio.webm",
            contentBytes: Self.Audio
        }
    ).response
    }
)
```

テキスト入力の`Value`に結果である`Response`を表示します。

## ■ 2. Power Automateを準備する
お決まりの流れです。

1. `PowerApps (V2) トリガー`で音声ファイルを、Power Appsから受け取る
1. `作成`アクションで`APIキー`と`URI`を設定
1. `Whisper`にHTTP要求を送信
1. 結果を`Power Apps`に返す

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2734332/eea9c76b-dba8-dfc8-a521-2413b67813e2.png)

■ APIキーと、URIに必要な`エンドポイント`は[ キーとエンドポイント ]から取得します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2734332/3a17ec13-d080-d3fe-e285-c321e69d7602.png)

### HTTP要求

`URI`は下記のように決定されます。

```plaintext:URI
https://{リソースのエンドポイント}/openai/deployments/{モデルのデプロイ名}/audio/transcriptions?api-version=2024-02-01
```

`Method` : `POST`

`Header` :

| キー | 値 |
|:-:|:-:|
| api-key | 作成アクションで定義したAPIキー |
| Content-Type | multipart/form-data |


```json:Header
{
  "api-key": "@{outputs('APIKEY')}",
  "Content-Type": "multipart/form-data"
}
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2734332/d1172b7d-e139-5369-c59f-4f4a512f06a8.png)

```json:Body
{
  "$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']}
      }
    }
  ]
}
```

`$content-type`の`multipart/form-data`が特徴的ですね。
戻り値は、オブジェクトの中に`text`プロパティがあるのみです。

```plaintext:Whisperの結果を取得する
@{body('Whisper')?['text']}
```

# 完成
コチラでサクっと文字起こしのアプリケーションが作成できます。

**ちなみに今サクっと読み上げた結果がコチラ！**

```plaintext:文字起こしの結果
今回のKiitaをお読みいただきありがとうございました。
今回はVisperモデルをテストして文字起こしができるか試してみました。
結果はいかがでしたでしょうか。
本日書き終わった時間が9時22分となっております。
次回のKiitaの記事もお楽しみになさってください。
```

精度高いですね～🐟
凄い時代になりました。

~~Kiita~~ > Qiita
~~Visper~~ > Whisper
くらいです。

ほかのAI Serviceと組み合わせて面白いものを作りたい👀✨