JavaScript 用の独自のデータ サンプルを使用してチャットを開始する
この記事では、JavaScript 用の独自のデータ サンプルをデプロイして実行する方法について説明します。 このサンプルでは、賃貸物件に関する回答を得るために、JavaScript、Azure OpenAI Service、Retrieval Augmented Generation (RAG) を使用して Azure AI Search にチャット アプリを実装します。 この賃貸物件チャット アプリには、プライバシー ポリシー、サービス利用規約、サポート情報などのデータをマークダウン ファイル (*.md) から読み込ませます。
- デモ (JavaScript) - フル スタック ビデオ
- デモ (JavaScript) - フロントエンドと Python バックエンドのビデオ
この記事の手順に従うことで、次の操作を行います:
- チャット アプリを Azure にデプロイします。
- 賃貸物件の Web サイト情報に関する回答を取得します。
- 応答の動作を変更するように設定を変更します。
この記事の完了後、カスタムのコードおよびデータを使用して、新しいプロジェクト用の変更を開始できます。
この記事は、Azure OpenAI Service と Azure AI 検索を使用してチャット アプリを構築する方法を示す記事のコレクションの一部です。 コレクション内のその他の記事は次のとおりです:
Note
この記事では、記事内の例とガイダンスの土台として、1 つ以上の AI アプリ テンプレートを使用しています。 AI アプリ テンプレートは、適切にメンテナンスされ、デプロイが容易なリファレンス実装を提供します。これは、高品質な AI アプリの作成を開始するために役立ちます。
アーキテクチャの概要
チャット アプリの単純なアーキテクチャを次の図に示します:
サンプルのチャット アプリケーションは Contoso Real Estate という架空の会社向けに構築されており、インテリジェントなチャット エクスペリエンスによって、顧客は製品の使用法についてサポートに質問できます。 サンプル データには、サービス規約、プライバシー ポリシー、およびサポート ガイドを説明する一連のドキュメントが含まれています。 ドキュメントはデプロイ時にアーキテクチャに取り込まれます。
アプリケーションは、次のような複数のコンポーネントから作成されます。
- 検索サービス: 検索および取得機能を提供するバックエンド サービス。
- インデクサー サービス: データのインデックスを作成し、検索インデックスを作るサービス。
- Web アプリ: ユーザー インターフェースを提供し、ユーザーとバックエンド サービス間のインタラクションを調整するフロントエンドのウェブ アプリケーション。
コスト
このアーキテクチャのほとんどのリソースでは、Basic 価格レベルまたは従量課金価格レベルが使用されます。 従量課金価格は使用量に基づきます。つまり、使用した分だけ支払います。 この記事を完了するには、料金がかかりますが、最小限に抑えられます。 この記事の手順の完了後は、リソースを削除して料金の発生を停止できます。
サンプル リポジトリでコストの詳細を参照してください。
前提条件
開発コンテナー環境は、この記事を完了するために必要なすべての依存関係と共に使用できます。 開発コンテナーは、(ブラウザーで) GitHub Codespaces で実行することも、Visual Studio Code を使用してローカルで実行することもできます。
この記事の手順を使用するには、次の前提条件が必要になります。
- Azure サブスクリプション - 無料アカウントを作成します
- Azure アカウントのアクセス許可 - Azure アカウントには、ユーザー アクセス管理者や所有者などの Microsoft.Authorization/roleAssignments/write アクセス許可が必要です。
- 目的の Azure サブスクリプション内の Azure OpenAI に付与されたアクセス権。 現時点では、このサービスへのアクセスは申請によってのみ許可されます。 Azure OpenAI へのアクセスを申請するには、https://aka.ms/oai/access のフォームに入力してください。 問題がある場合は、このリポジトリで問題をオープンしてお問い合わせください。
- GitHub アカウント
開発環境を開く
この記事を完了するため、すべての依存関係がインストールされている開発環境から始めます。
GitHub Codespaces は、 Visual Studio Code for the Web をユーザー インターフェイスとして使用して、GitHub によって管理される開発コンテナーを実行します。 最も簡単な開発環境では、GitHub Codespaces を使用して、この記事を完了するために正しい開発者ツールと依存関係がプレインストールされるようにします。
重要
すべての GitHub アカウントでは、2 つのコア インスタンスで毎月最大 60 時間無料で Codespaces を使用できます。 詳細については、「GitHub Codespaces に月単位で含まれるストレージとコア時間」を参照してください。
mainGitHub リポジトリのAzure-Samples/azure-search-openai-javascriptブランチに新しい GitHub Codespace を作成するプロセスを開始します。次のボタンを右クリックします。 [リンクを新しいウィンドウで開く] を選択して、開発環境とドキュメントを同時に表示できるようにします。
[codespace の作成] ページで、codespace の構成設定を確認した後に、[新しい codespace の作成] を選択します
Codespace が起動するまで待ちます。 この起動プロセスには数分かかることがあります。
画面の下部にあるターミナルで、Azure Developer CLI を使用して Azure にサインインします。
azd auth loginターミナルからコードをコピーし、ブラウザーに貼り付けます。 手順に従って、Azure アカウントで認証します。
この記事の残りのタスクは、この開発コンテナーのコンテキストで行われます。
デプロイして実行する
サンプル リポジトリには、チャット アプリを Azure にデプロイするために必要なすべてのコードと構成ファイルが含まれています。 次の手順では、サンプルを Azure にデプロイするプロセスについて説明します。
チャット アプリを Azure にデプロイする
重要
このセクションで作成した Azure リソースでは、主に Azure AI Search リソースからのコストが直ちに発生します。 これらのリソースは、コマンドが完全に実行される前に中断した場合でも、コストが発生する可能性があります。
次の Azure Developer CLI コマンドを実行して、Azure リソースをプロビジョニングし、ソース コードをデプロイします:
azd up環境名の入力を求められた場合、短く小文字のままにします。 たとえば、
myenvのようにします。 リソース グループ名の一部として使用されます。メッセージが表示されたら、リソースを作成するサブスクリプションを選択します。
最初に場所を選択するように求められたら、近くの場所を選択します。 この場所は、ホスティングを含むほとんどのリソースに使用されます。
OpenAI モデルの場所の入力を求められたら、近くの場所を選択します。 最初の場所と同じ場所を使用できる場合は、その場所を選択します。
アプリがデプロイされるまで待ちます。 デプロイが完了するまでに、5 分から 10 分程度かかる場合があります。
アプリケーションが正常にデプロイされると、ターミナルに URL が表示されます。
Deploying service webとラベルの付いたその URL を選択して、ブラウザーでチャット アプリケーションを開きます。
チャット アプリを使用してマークダウン ファイルから回答を取得する
チャット アプリには、賃貸情報がマークダウン ファイルのカタログから事前に読み込まれています。 このチャット アプリでは、賃貸のプロセスについて質問できます。 次の手順では、チャット アプリを使用するプロセスについて説明します。
ブラウザーで、ページの下部にあるテキスト ボックスの "What is the refund policy" (払い戻しポリシーの内容) を選択するか、入力します。
回答から、[思考プロセスの表示] を選択します。
![[思考プロセスを表示] が赤いボックスで強調表示されている、チャット アプリの最初の回答のスクリーンショット。](../media/get-started-app-chat-template/browser-chat-initial-answer-citation-highlighted.png)
右側のウィンドウでタブを使用して、回答がどのように生成されたかを確認します。
Tab 説明 思考プロセス これは、チャットでの対話のスクリプトです。 システム プロンプト ( content) とユーザーの質問 (content) を表示できます。関連する参照先 これには、質問に答える情報とソース資料が含まれます。 ソース資料の引用文献の数は、[開発者設定] に表示されます。 既定値は 3 です。 引用 引用文を含む元のページが表示されます。 完了したら、タブの上にある、X で示された非表示ボタンを選択します。
![[思考プロセスを表示] が赤いボックスで強調表示されている、チャット アプリの最初の回答のスクリーンショット。](../media/get-started-app-chat-template/browser-chat-initial-answer-citation-highlighted.png#lightbox)
チャット アプリの設定を使用して応答の動作を変更する
チャット アプリのインテリジェンスは、OpenAI モデルと、モデルとの対話に使用される設定によって決まります。
| 設定 | 説明 |
|---|---|
| プロンプト テンプレートをオーバーライドする | これは、回答を生成するために使用されるプロンプトです。 |
| これだけ多くの検索結果を取得する | これは、回答の生成に使用される検索結果の数です。 これらのソースは、引用文献の [思考プロセス] タブと [サポート コンテンツ] タブに返されます。 |
| カテゴリの除外 | これは、検索結果から除外されるドキュメントのカテゴリです。 |
| セマンティック ランカーを使用して取得する | これは、機械学習を使用して検索結果の関連性を向上させる Azure AI 検索の機能です。 |
| ドキュメント全体ではなくクエリ コンテキストの概要を使用する | Use semantic ranker と Use query-contextual summaries の両方がチェックされている場合、LLM は、最もランクの高いドキュメント内のすべての通路ではなく、主要な通路から抽出されたキャプションを使用します。 |
| フォローアップの質問を提案する | 回答に基づいてチャット アプリにフォローアップの質問を提案してもらいます。 |
| 取得モード | ベクトル + テキスト は、検索結果がドキュメントのテキストとドキュメントの埋め込み内容に基づくことを意味します。 ベクトルは、検索結果がドキュメントの埋め込み内容に基づくことを意味します。 テキストは、検索結果がドキュメントのテキストに基づくことを意味します。 |
| チャット完了応答をストリーミングする | 応答として完全な回答を用意できるまで待機せずに、応答をストリーミングします。 |
次の手順では、設定を変更するプロセスについて説明します。
ブラウザーで、[開発者設定] タブを選択します。
[代わりにクエリ コンテキストの概要を使用する] チェックボックスをオンにして、もう一度同じ質問をします。
What happens if the rental doesn't fit the description?次のように、より簡潔な回答が返されます。
リソースをクリーンアップする
Azure リソースをクリーンアップする
この記事で作成した Azure リソースは、Azure サブスクリプションに課金されます。 今後これらのリソースが必要になるとは思わない場合は、削除して、より多くの料金が発生しないようにします。
次の Azure Developer CLI コマンドを実行して、Azure リソースを削除し、ソース コードを削除します:
azd down --purge
GitHub Codespaces をクリーンアップする
GitHub Codespaces 環境を削除すると、アカウントに対して取得するコアごとの無料時間エンタイトルメントの量を最大化できることが保証されます。
重要
GitHub アカウントのエンタイトルメントの詳細については、「 GitHub Codespaces に月単位で含まれるストレージとコア時間」を参照してください。
GitHub Codespaces ダッシュボード (https://github.com/codespaces) にサインインします。
Azure-Samples/azure-search-openai-javascriptGitHub リポジトリをソースとして現在実行中の Codespaces を見つけます。
codespace のコンテキスト メニューを開いた後に、 [削除]を選択します。
ヘルプを参照する
このサンプル リポジトリでは、トラブルシューティング情報が提供されます。
問題が解決していない場合は、リポジトリの [問題] に問題のログを記録してください。