GPT-4oがスゴすぎるが敢えてここは「Text to speech with the Azure OpenAI Service」を紹介しよう！

# はじめに
`GPT-4o`凄すぎますね。
本職は驚き屋さんではないですが、圧巻です。

これはとんでもないことになりました。

<blockquote class="twitter-tweet" data-media-max-width="560"><p lang="en" dir="ltr">Say hello to GPT-4o, our new flagship model which can reason across audio, vision, and text in real time: <a href="https://t.co/MYHZB79UqN">https://t.co/MYHZB79UqN</a><br><br>Text and image input rolling out today in API and ChatGPT with voice and video in the coming weeks. <a href="https://t.co/uuthKZyzYx">pic.twitter.com/uuthKZyzYx</a></p>&mdash; OpenAI (@OpenAI) <a href="https://twitter.com/OpenAI/status/1790072174117613963?ref_src=twsrc%5Etfw">May 13, 2024</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

Xのデモのなかでも特にコミュニケーションが充実していることが印象的でした。

実は最近、[Text to speech with the Azure OpenAI Service](https://learn.microsoft.com/ja-jp/azure/ai-services/openai/text-to-speech-quickstart?tabs=command-line)を見かけて、Power Apps & Power Automateで試していたところなんですよね。

https://learn.microsoft.com/ja-jp/azure/ai-services/openai/text-to-speech-quickstart?tabs=command-line

この`GPT 4o`凄すぎムードの中で、**めっちゃ[Text to speech with the Azure OpenAI Service](https://learn.microsoft.com/ja-jp/azure/ai-services/openai/text-to-speech-quickstart?tabs=command-line)よさげ！** という記事を書いていきたいと思います！

<blockquote class="twitter-tweet" data-media-max-width="560"><p lang="ja" dir="ltr">Azure OpenAIのText to Speech、読み上げが本当にナチュラル!!<br>日本語バージョンもいつか出るんだろうな。<br><br>novaさんのスピーチがGoodです！<a href="https://t.co/DVbPzqhrRP">https://t.co/DVbPzqhrRP</a><a href="https://twitter.com/hashtag/Azure?src=hash&amp;ref_src=twsrc%5Etfw">#Azure</a> <a href="https://twitter.com/hashtag/AzureOpenAI?src=hash&amp;ref_src=twsrc%5Etfw">#AzureOpenAI</a> <a href="https://twitter.com/hashtag/tts?src=hash&amp;ref_src=twsrc%5Etfw">#tts</a> <a href="https://twitter.com/hashtag/PowerApps?src=hash&amp;ref_src=twsrc%5Etfw">#PowerApps</a> <a href="https://t.co/e4ySfZuPsT">pic.twitter.com/e4ySfZuPsT</a></p>&mdash; 出戻りガツオ🐟 Microsoft MVP (@DemodoriGatsuo) <a href="https://twitter.com/DemodoriGatsuo/status/1789679058848186710?ref_src=twsrc%5Etfw">May 12, 2024</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

聞き比べ用に[GitHub pagesもデプロイしました！](https://demodorigatsuo.github.io/powerapps-azure-openai-text-to-speech/)

https://demodorigatsuo.github.io/powerapps-azure-openai-text-to-speech/

# Azure OpenAI ServiceによるText to speech
Azureには`Speech service`に[Text to speech](https://learn.microsoft.com/ja-jp/azure/ai-services/speech-service/text-to-speech)が存在します。

https://azure.microsoft.com/ja-jp/products/ai-services/text-to-speech

https://learn.microsoft.com/ja-jp/azure/ai-services/speech-service/text-to-speech

`Edge`を使っている方であれば、`音声読み上げ`機能がなじみ深いと思います。
[Microsoft Learn Blog](https://techcommunity.microsoft.com/t5/microsoft-learn-blog/bg-p/MicrosoftLearnBlog)の記事を含めて、音声読み上げ機能は、いたるところで使われています。

https://techcommunity.microsoft.com/t5/microsoft-learn-blog/what-to-expect-from-microsoft-learn-at-microsoft-build/ba-p/3838497

今回ご紹介する機能、[Text to speech with the Azure OpenAI Service](https://learn.microsoft.com/ja-jp/azure/ai-services/openai/text-to-speech-quickstart?tabs=command-line)は、
文字通り`Azure OpenAI Service`の一部であって、出どころが異なります。

プレビュー機能であり、現在対応している地域は下記のみです。

| regions | 地域 |
|:-:|:-:|
|North Central US |米国東部 2|
|Sweden Central|スウェーデン中部|

# 0. 事前準備
ほぼつい最近かいた`Whisper`のリソースのデプロイと一緒です。

https://qiita.com/DEmodoriGatsuO/items/109b151f3004f1cf2f28

対象の地域には、Azure OpenAI Studioの[ モデル ]に`tts`と`tts-hd`が表示されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2734332/cd621aef-0161-c5fb-d30b-5d53c196ea4f.png)

## ■ 1. Power Automate・・・！
今回は[Azure Key Vault](https://learn.microsoft.com/ja-jp/connectors/keyvault/)もフローに含めています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2734332/3da06b06-2d83-fb32-a213-d09f7d5039ec.png)

1. `PowerApps (V2) トリガー`で`モデル`と`読み上げる文字列`を、`Power Apps`から受け取る
1. [Azure Key Vault](https://learn.microsoft.com/ja-jp/connectors/keyvault/)に格納した`エンドポイント`と`APIキーを取得`
1. `作成`アクションで`URI`を設定
1. `Text to speech with the Azure OpenAI Service`にHTTP要求を送信
1. 音声データを`Power Apps`に返す
1. (5)と並列でSharePoint上に`mpeg`ファイルを保存

https://learn.microsoft.com/ja-jp/connectors/keyvault/

■ 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
@{outputs('AZURE-OPENAI-ENDPOINT')?['body/value']}/openai/deployments/@{outputs('TTS-DEPLOYMENTNAME')?['body/value']}/audio/speech?api-version=2024-02-15-preview
```
```plaintext:URI
https://{リソースのエンドポイント}/openai/deployments/{モデルのデプロイ名}/audio/transcriptions?api-version=2024-02-01
```

`Method` : `POST`

`Header` :

| キー | 値 |
|:-:|:-:|
| api-key | Azure Key Vaultコネクタから呼び出すAPIキー |
| Content-Type | application/json |


```json:Header
{
 "api-key" : "@{outputs('AZURE-OPENAI-APIKEY')?['body/value']}",
 "Content-Type" : "application/json"
}
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2734332/f5780496-0802-2ec2-b3bd-f07f92804e8e.png)

```json:Body
{
  "model": "@{outputs('TTS-DEPLOYMENTNAME')?['body/value']}",
  "input": "@{triggerBody()?['text']}",
  "voice": "@{triggerBody()?['text_1']}"
}
```

### ■ Power Appsに戻す値

```plaintext:Power Appsに値を返す
@{body('HTTP')?['$content']}
```

### ■ SharePointでファイルのコンテンツを作成

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2734332/ebbb518a-de0b-d6a1-f70e-51ff8f1156b3.png)

`ファイル コンテンツ`に`HTTP`の`Body`を設定します。

```plaintext:Power Appsに値を返す
@{body('HTTP')}
```


## ■ 2. Power Apps
下記のアプリで`音声`を聞いてみます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2734332/636472c1-426b-34e6-ad23-462d3edc1acc.png)

`コンボボックス`に、モデルが設定され、`テキスト入力`に文字が入った状態で、
`ボタンコントロール`を押し、`Power Automate`を起動します。

```plaintext:OnSelect
UpdateContext({AudioData: TextToSpeechOpenAI.Run(TextInput.Value, cmbVoice.Selected.Value).response});
UpdateContext({ResetStart: false});
UpdateContext({ResetStart: true});
```


`Audio`コントロールに、

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2734332/cf6ebeb1-51f2-0ec2-1b8e-77851cc1c6ac.png)

```plaintext:AudioData
"data:audio/mpeg;base64," & AudioData
```

こちらで音声が再生されます。

:::note info
`Audio`コントロールの`AutoStart`を`true`に設定し、
`Reset`に、`ResetStart`を設定すると、値が戻ってきたタイミングで読み上げられます！
:::

# まるで人が読んでいるような感覚！

聞き比べ用の[GitHub pages](https://demodorigatsuo.github.io/powerapps-azure-openai-text-to-speech/)でぜひ聞いてみてください！

https://demodorigatsuo.github.io/powerapps-azure-openai-text-to-speech/

| Voice | 所感 |
|:-:|:-:|
| alloy | 中性的な印象 |
| echo | 若い男性の印象 |
| fable | 若い男性の印象2 |
| onyx | 雰囲気のある男性の印象 |
| nova | 明るい女性の声 |
| shimmer | ベテランな感じの女性の声 |

:::note warn
個人の感想です
:::

ちなみにAIを使うたびに、`抑揚が異なります！`
Long speechは、GPT-4oで作ったスピーチを読みあげてもらっています！

面白すぎて止まらない～～！！
Azure OpenAIのGPT-4oのAPIも待ちきれません！！