【Azure Cognitive Services】で音声チャットボットを作ってみた（入力テキストから返答テキスト生成編）

GPTモデルのデプロイ

まず、GPTモデルをデプロイします。

Azure OpenAI にアクセスし、「新しいデプロイの作成」をクリック。

Azure AI Foundry

AzureAIFoundry

oai.azure.com

「新しいデプロイの作成」をクリック

モデルを選択し、デプロイ名を入力し、「作成」をクリック

デプロイ完了

GPTへリクエストを送るサンプルコードを取得

「プレイグラウンドで開く」をクリック

チャットセッションまでスクロールし「User message」に適当なテキストを入力して、
「コードの表示」をクリック。

サンプルコードが表示される。

実行ファイルの修正

このサンプルコードをJavaScriptコードに書き換えて、index.html に組み込む。
修正箇所は以下の通り。

function onRecognizedResult(result) {
　switch (result.reason) > 
　　case SpeechSDK.ResultReason.RecognizedSpeech:
　　case SpeechSDK.ResultReason.TranslatedSpeech:
　　case SpeechSDK.ResultReason.RecognizedIntent:
　　　----- この部分 -----

ここに下記コードを追記。とりあえず Console にGPTからの回答を表示するようにしています。

const url =
  'エンドポイント'; // APIのエンドポイントURL
const data = {
  messages: [{ role: 'user', content: result.text }],
  max_tokens: 800,
  temperature: 0.7,
  frequency_penalty: 0,
  presence_penalty: 0,
  top_p: 0.95,
  stop: null,
}; // 送信するデータ（リクエストボディ）

fetch(url, {
  method: 'POST', // HTTPメソッドを指定（POST）
  headers: {
    'Content-Type': 'application/json', // リクエストヘッダーを設定（JSON形式）
    'api-key': 'キー',
  },
  body: JSON.stringify(data), // リクエストボディをJSON形式に変換
})
  .then((response) => response.json()) // レスポンスをJSONとして解析
  .then((result) => {
    console.log('API Response:', result);
    synthesisText.innerHTML += `${result.choices[0].message.content}\r\n`;
  })
  .catch((error) => {
    console.error('API Error:', error);
  });

修正し保存したらブラウザを更新。
音声入力を試すと、Console にGPTからの回答が表示された。
↓「こんにちは」に対する回答