次の方法で共有

JavaScript 用の独自のデータ サンプルを使用してチャットを開始する

  • [アーティクル]

この記事では、JavaScriptのデータ サンプルを使用して Chat をデプロイして実行する方法について説明します。 このサンプルでは、Azure AI Search で JavaScript、Azure OpenAI Service、取得拡張生成 (RAG) を使用してチャット アプリを実装し、レンタル プロパティに関する回答を取得します。 レンタル プロパティ チャット アプリには、プライバシー ポリシー、サービス条件、サポートを含むマークダウン ファイル (*.md) のデータがシードされます。

この記事の手順に従うことで、次の操作を行います。

  • チャット アプリを Azure にデプロイします。
  • 賃貸物件のウェブサイト情報に関する回答を取得します。
  • 応答の動作を変更するように設定を変更します。

この記事を完了したら、カスタム コードとデータを使用して新しいプロジェクトの変更を開始できます。

この記事は、Azure OpenAI Service と Azure AI Search を使用してチャット アプリを構築する方法を示す記事のコレクションの一部です。 コレクション内のその他の記事は次のとおりです。

手記

この記事では、記事の例とガイダンスの基礎として 1 つ以上の AI アプリ テンプレートを使用します。 AI アプリ テンプレートを使用すると、AI アプリの高品質な開始点を確保するのに役立つ、保守性が高く、簡単にデプロイできる参照実装が提供されます。

アーキテクチャの概要

チャット アプリの単純なアーキテクチャを次の図に示します。

クライアントからバックエンド アプリへのアーキテクチャを示す図。

チャット サンプル アプリケーションは、Contoso Real Estateという架空の会社向けに構築されており、インテリジェントなチャット エクスペリエンスにより、顧客は製品の使用状況に関するサポートの質問を行うことができます。 サンプル データには、サービス利用規約、プライバシー ポリシー、およびサポート ガイドを説明するドキュメントのセットが含まれています。 ドキュメントは、デプロイ時にアーキテクチャに取り込まれます。

アプリケーションは、次のような複数のコンポーネントから作成されます。

  • Search サービス: 検索機能と取得機能を提供するバックエンド サービスです。
  • インデクサー サービス: データのインデックスを作成し、検索インデックスを作成するサービス。
  • Web アプリ: ユーザー インターフェイスを提供し、ユーザーとバックエンド サービス間の対話を調整するフロントエンド Web アプリケーション。

フロントエンド アプリ、検索、ドキュメント インジェストの Azure サービスとその統合フローを示す図。

費用

このアーキテクチャのほとんどのリソースでは、Basic 価格レベルまたは従量課金価格レベルが使用されます。 従量課金制は使用量に基づきます。つまり、使用した分だけ支払います。 この記事を完了するには、料金がかかりますが、最小限に抑えられます。 この記事が完了したら、リソースを削除して料金の発生を停止できます。

サンプル リポジトリの コストの詳細について説明します。

前提 条件

開発コンテナー 環境は、この記事を完了するために必要なすべての依存関係で使用できます。 開発コンテナーは、GitHub Codespaces (ブラウザー) で実行することも、Visual Studio Code を使用してローカルで実行することもできます。

この記事を使用するには、次の前提条件が必要です。

  • Azure サブスクリプション - 無料で作成する
  • Azure アカウントのアクセス許可 - Azure アカウントには、Microsoft.Authorization/roleAssignments/write アクセス許可 (ユーザー アクセス管理者 や所有者 など) が必要です。
  • GitHub アカウント

オープン開発環境

この記事を完了するために必要なすべての依存関係を含む、構成済みの開発環境をデプロイするには、次の手順に従います。

GitHub Codespaces は、Web 用の Visual Studio Code ユーザー インターフェイスとして GitHub によって管理される開発コンテナーを実行します。 最も簡単な開発環境では、GitHub Codespaces を使用して、この記事を完了するために正しい開発者ツールと依存関係がプレインストールされるようにします。

重要

すべての GitHub アカウントでは、コア インスタンスが 2 つあり、毎月最大 60 時間無料で Codespaces を使用できます。 詳細については、GitHub Codespaces の毎月含まれるストレージとコア時間を参照してください。

  1. Azure-Samples/azure-search-openai-javascript GitHub リポジトリの main ブランチに新しい GitHub Codespace を作成するプロセスを開始します。

  2. 次のボタンを右クリックし、[新しいウィンドウでリンクを開く] を選択、開発環境とドキュメントの両方を同時に使用できるようにします。

    GitHub Codespaces で開く

  3. [コードスペースの作成] ページで、コードスペースの構成設定を確認し、[新しいコードスペースを作成 ] を選択します。

    新しいコードスペースを作成する前の確認画面のスクリーンショット。

  4. コードスペースが起動するまで待ちます。 このスタートアップ プロセスには数分かかる場合があります。

  5. 画面の下部にあるターミナルで、Azure Developer CLI を使用して Azure にサインインします。

    azd auth login

  6. ターミナルからコードをコピーし、ブラウザーに貼り付けます。 手順に従って、Azure アカウントで認証します。

  7. この記事の残りのタスクは、この開発コンテナーのコンテキストで行われます。

デプロイと実行

サンプル リポジトリには、チャット アプリを Azure にデプロイするために必要なすべてのコードと構成ファイルが含まれています。 次の手順では、サンプルを Azure にデプロイするプロセスについて説明します。

チャット アプリを Azure にデプロイする

重要

このセクションで作成された Azure リソースでは、主に Azure AI Search リソースから即時のコストが発生します。 これらのリソースは、コマンドが完全に実行される前に中断した場合でも、コストが発生する可能性があります。

  1. 次の Azure Developer CLI コマンドを実行して、Azure リソースをプロビジョニングし、ソース コードをデプロイします。

    azd up

  2. 環境名の入力を求められた場合は、短く小文字のままにします。 たとえば、myenvします。 リソース グループ名の一部として使用されます。

  3. メッセージが表示されたら、リソースを作成するサブスクリプションを選択します。

  4. 最初に場所を選択するように求められたら、近くの場所を選択します。 この場所は、ホスティングを含むほとんどのリソースに使用されます。

  5. OpenAI モデルの場所の入力を求められたら、近くの場所を選択します。 最初の場所と同じ場所を使用できる場合は、その場所を選択します。

  6. アプリがデプロイされるまで待ちます。 デプロイが完了するまでに 5 ~ 10 分かかる場合があります。

  7. アプリケーションが正常にデプロイされると、ターミナルに URL が表示されます。

  8. ブラウザーでチャット アプリケーションを開くには、Deploying service web というラベルが付いた URL を選択します。

    チャット入力に関するいくつかの提案と、質問を入力するためのチャット テキスト ボックスを示すブラウザーでのチャット アプリのスクリーンショット。

チャット アプリを使用してマークダウン ファイルから回答を取得する

チャット アプリには、マークダウン ファイル カタログからのレンタル情報が事前に読み込まれています。 チャット アプリを使用して、レンタル プロセスに関する質問をすることができます。 次の手順では、チャット アプリを使用するプロセスについて説明します。

  1. ブラウザーで、ページの下部にあるテキスト ボックス 払い戻しポリシーの内容を選択または入力します。

    チャット アプリの最初の回答のスクリーンショット。

  2. 答えから、思考プロセスを表示するを選択します。

    赤いボックスで強調表示された [思考プロセスの表示] を使用したチャット アプリの最初の回答のスクリーンショット。

  3. 右側のウィンドウで、タブを使用して、回答がどのように生成されたかを理解します。

    タブ 説明
    思考プロセス これは、チャットでの対話のスクリプトです。 システム プロンプト (content) とユーザーの質問 (content) を表示できます。
    関連する参照先 これには、質問に答える情報とソース資料が含まれます。 ソース資料の引用文献の数は、開発者設定に示されています。 既定値は 3です。
    引用文献 引用文献を含む元のページが表示されます。

  4. 完了したら、タブの上に X で示されている [ 非表示にする ] ボタンを選択します。

チャット アプリの設定を使用して応答の動作を変更する

チャット アプリのインテリジェンスは、OpenAI モデルと、モデルとの対話に使用される設定によって決まります。

チャット開発者設定のスクリーンショット。

設定 説明
プロンプト テンプレートをオーバーライドする これは、回答を生成するために使用されるプロンプトです。
この多くの検索結果を取得する これは、回答の生成に使用される検索結果の数です。 これらのソースは、引用の[思考プロセス]タブと[サポートコンテンツ]タブで見ることができます。
カテゴリを除外する これは、検索結果から除外されるドキュメントのカテゴリです。
セマンティック ランカーを使用して取得する これは、機械学習を使用して検索結果の関連性 向上させる Azure AI Search の機能です。
ドキュメント全体ではなくクエリ コンテキストの概要を使用する Use semantic ranker と Use query-contextual summaries の両方がチェックされると、LLMは、上位のドキュメントのすべての段落ではなく、主要な段落から抽出されたキャプションを使用します。
フォローアップの質問を提案する チャット アプリで、回答に基づいてフォローアップの質問を提案します。
取得モード Vector + Text は、検索結果がドキュメントのテキストとドキュメントの埋め込み内容に基づいて行われることを意味します。 ベクター は、検索結果がドキュメントの埋め込み内容に基づくことを意味します。 テキスト は、検索結果がドキュメントのテキストに基づくことを意味します。
チャット完了応答をストリーム配信する 完全な回答が可能になるまで待つのではなく、応答をストリーミングします。

次の手順では、設定を変更するプロセスについて説明します。

  1. ブラウザーで、[開発者向け設定] タブ 選択します。

  2. の代わりにクエリ コンテキストの概要を使用する チェック ボックスをオンにし、もう一度同じ質問をします。

    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 に含まれるストレージおよびコア時間を参照してください。

  1. GitHub Codespaces ダッシュボード (https://github.com/codespaces) にサインインします。

  2. 現在実行中の Codespaces を Azure-Samples/azure-search-openai-javascript GitHub リポジトリから見つけます。

    状態とテンプレートを含むすべての実行中の Codespace のスクリーンショット。

  3. コードスペースのコンテキスト メニューを開き、[の削除] 選択します。

    削除オプションが強調表示されている 1 つのコードスペースのコンテキスト メニューのスクリーンショット。

助けを得る

このサンプル リポジトリでは、トラブルシューティング情報を提供します。

問題が解決していない場合は、リポジトリの [問題] に問題のログを記録してください。

次の手順