Azure OpenAI ServiceをREST API + JavaScriptでミニマムに使ってみた

## はじめに

Azure OpenAI Serviceを利用することで、SDKやREST APIを通し生成AIの機能を利用するWebサイトを作成することができます。
様々な言語に対応していますが、今回はJavaScriptを利用する例をやってみたのでご紹介します。
雑に試したい人向けです。

## 前提

- Azure OpenAI Serviceの利用申請が済んでいるアカウントがある
- 今回のモデルにはgpt-35-turboを利用する
    - たぶん他のモデルでもできますが、今回の記事でチョイスしたのはこれです。

## 使ってみた

### リソースグループの作成

はじめにリソースグループを作成します。
AOAIの検証用なので、 `try-aoai-solution` という名称にしました。

### AOAIリソースの作成

Azure OpenAIリソースを `try-aoai-solution` へ作成します。
リージョンはJapan Eastで、名前は `try-aoai-solution-katoaki` としました。
他の設定はデフォルトで作成します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/146594/8bc1d24a-c5d7-6d9d-d1b2-520493cd7072.png)

### モデルのデプロイ

作成したリソースを選択すると、モデルをデプロイするための選択肢が表示されます。
「探索」から辿ってデプロイ画面へ遷移し、モデルを選択した上でデプロイ名を決めてデプロイを行います。
ここで決めた「デプロイ名」は後で利用するので控えておきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/146594/0ee75818-bb1b-a6cd-ae87-375ff74b0a02.png)

### APIキーの取得

Azure OpenAIの画面で「キーとエンドポイント」を選択し、表示されるAPIキーを取得し、控えておきます。
二つ払い出されますが、とりあえずキー1だけで十分です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/146594/78f6d826-9d2b-d886-b829-09eadc1f7019.png)

### REST API仕様の確認

さて、REST APIをコールするためには次の情報が必要になります

- リソース名
- デプロイID
- APIバージョン

具体的なAPIバージョンの値や、その他入力値を決めるために、公式ドキュメントを参照します

Azure OpenAI Service REST API reference - Azure OpenAI | Microsoft Learn https://learn.microsoft.com/en-us/azure/ai-services/openai/reference#completions

### コーディング

リクエストするURLと入力値が決まったら、コードを書いていきます。
本記事では、なるべくシンプルなHTML・CSS・JavaScriptでコードを作成してみます。
domain, deployId, apyKeyには控えておいた情報を入れます。
入れた情報を元にPOSTでCompletions APIをコールするためのコードと、コールするために必要な入力情報を取得するコードを書きます。

こちらのような感じです。

```jsx
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>sample</title>
</head>
<body>
    <div class="container">
        <p>AOAIに尋ねたいことを書いてSendボタンを押してください</p>
        <input type="text" name="txt" id="txt" value="こんにちは">
        <button>Send</button>
        <p id="result">（ここに回答が入ります）</p>
    </div>
</body>

<script>
    const setResult = (_text) => {
        document.querySelector('#result').innerHTML = _text;
    }

    const main = async () => {
        let userMessage = document.querySelector('#txt').value;
        let systemsettings = {
            "role": "system",
            "content": `元気よく受け答えします`
        }
        let message = [];
        message.push(systemsettings);
        message.push({ 'role': 'user', 'content': userMessage });

        const domain = 'xxx'; // リソース名
        const deployId = 'xxx'; // デプロイID
        const apiKey = 'xxx'; // APIキー
        const url = `https://${domain}.openai.azure.com/openai/deployments/${deployId}/chat/completions?api-version=2023-08-01-preview`;

        await fetch(url, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'api-key': `${apiKey}`,
            },
            body: JSON.stringify({
                'model': 'gpt-3.5-turbo',
                'stream': false,
                "max_tokens": 400,
                "temperature": 0.7,
                "frequency_penalty": 0,
                "presence_penalty": 0,
                "top_p": 0.95,
                "stop": null,
                'messages': message,
            }),
        })
        .then((response) => {
            return response.json();
        })
        .then((data) => {
            setResult(data.choices[0].message.content);
        });

    }
    document.querySelector('button').addEventListener('click', () => {
        main();
    })
</script>

</html>
```

### 実行結果

実行結果は次のようになります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/146594/4a928c42-0408-aa71-3fcb-9af0e21e1abb.png)


## 参考

- Azure OpenAI Service REST API reference - Azure OpenAI | Microsoft Learn https://learn.microsoft.com/en-us/azure/ai-services/openai/reference#completions