はじめに
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 としました。
他の設定はデフォルトで作成します。
モデルのデプロイ
作成したリソースを選択すると、モデルをデプロイするための選択肢が表示されます。
「探索」から辿ってデプロイ画面へ遷移し、モデルを選択した上でデプロイ名を決めてデプロイを行います。
ここで決めた「デプロイ名」は後で利用するので控えておきます。
APIキーの取得
Azure OpenAIの画面で「キーとエンドポイント」を選択し、表示されるAPIキーを取得し、控えておきます。
二つ払い出されますが、とりあえずキー1だけで十分です。
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をコールするためのコードと、コールするために必要な入力情報を取得するコードを書きます。
こちらのような感じです。
<!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>
実行結果
実行結果は次のようになります。
参考
- Azure OpenAI Service REST API reference - Azure OpenAI | Microsoft Learn https://learn.microsoft.com/en-us/azure/ai-services/openai/reference#completions