Mesh 201 チュートリアル第 6 章: Azure OpenAI を使用して質問に対する回答を取得する

[アーティクル]
09/25/2024

この章では、Azure OpenAI ベースの仮想アシスタントまたは ”チャットボット" を実装する方法を学習する 5 番目と最後のステーションに進みます。ここでは必要な AI サービス (Copilot Studio など) を使用できることに注意してください。風力発電所の場所を検索するというテーマに沿って、AI アシスタントは、風力発電所関連の質問に回答するようにカスタマイズされます。

重要な注意点:

OpenAI は、承認済みの企業顧客とパートナーのみが使用できます。このグループにまだ参加していない場合は、registration form を送信する必要があります。登録プロセスについて学ぶ。
サブスクリプションと OpenAI に関する問題が発生した場合は、Mesh Creator Forum に投稿して回答を見つけることができます。

このステーションをセットアップする

このステーションを完了するには、Azure Portal にアクセスし、テナントの URI ("エンドポイント" とも呼ばれます) とキーを取得する必要があります。後で、Azure OpenAI を呼び出せるようにするコードにキーを挿入します。後でワークフローを中断する必要がないように、この手順を実行しておきましょう。

Azure OpenAI リソースを作成しデプロイする

ブラウザーで、Azure portal に移動してログインします。
ウィンドウの上部にある [検索] ボックスに「azure openai」と入力し、Enter キーを押します。 Azure AI サービス | Azure OpenAI ページが表示されます。
[Create] ボタンをクリックします。

重要: 以下で詳しく説明する設定の多くでは、特定の推奨事項はありません。自分と組織にとって最も適切なオプションを選択する必要があります。
[Basics] ページで要求された場所に名前を作成し、[Subscription]、[Region]、[Pricing tier] のオプションを選択します。
Network ページで、目的のオプションを選択します。
[Tags] ページでタグを追加したり、これらのオプションをスキップしたりできます。
[Review and Submit] ページで情報を確認し、[Create] ボタンをクリックします。

リソースがデプロイされ、デプロイが進行中であることを示すメッセージが表示されます。最後に、[Deployment is complete] ページが表示されます。

__________________________________

Azure OpenAI Studio にモデルをデプロイする

[Go to Resource] ボタンをクリックします。
[Resource] ページで、[Go to Azure OpenAI Studio] をクリックします。
左側のメニューの [Management] の下にある [Deployments] を選択します。
「新しいデプロイを作成する」を参照してください。
[モデルのデプロイ] ドロップダウンをクリックし、[基本モデルのデプロイ選択。
モデルの選択ダイアログで、"gpt-35-turbo" を選択します。
必要に応じて、説明を確認してください。完了したら、 Confirm ボタンをクリックします。

注: 別のモデルを選択できますが、これにはコードにいくつかの変更が必要になります。

"Deployment name" フィールドに、「gpt-35-turbo」と入力します。
その他の設定については、自分や組織に最も適した名前とオプションを選択します。完了したら、 Deploy ボタンをクリックします。

URI とキーをコピーする

Azure メインページに戻り、[Recources] の下で作成したリソースを選択します。
左側のメニューの [Resource] ページで、[Keys and Endpoint] を選択します。
[Keys and Endpoint] ページで、[KEY 1] または [KEY 2] (どちらでもかまいません) の [Copy to clipboard] ボタンをクリックし、Windows メモ帳または別のテキストエディターを使用してテキストファイルに貼り付けます。
[Endpoint] の [Copy to clipboard] ボタンをクリックし、同じテキストファイルに貼り付けます。
テキストファイルを保存します。このチュートリアルの後半で、これら 2 つの情報が必要になります。

ステーション 5 のプレハブを追加する

[Project] フォルダーで、[Assets]>[MeshCloudScripting] に移動し、[5: AIAssistant] プレハブを Hierarchy にドラッグして、Mesh Cloud Scripting と 4: GlobeWithCloudScripting のすぐ下に子オブジェクトとして配置します。

Azure OpenAI の URI と API 情報を挿入する

階層で、Mesh Cloud Scripting GameObject を選択します。
[Inspector] で、Mesh Cloud Scripting コンポーネントに移動し、[Open application folder] をクリックします。これにより、Windows ファイルエクスプローラーで Mesh Cloud Scripting のファイルを含むプロジェクトフォルダーが開きます。
コードエディターで appsettings.UnityLocalDev.json という名前のファイルを開きます。最後の 2 行のコードには、Azure OpenAI 構成設定のプレースホルダーコメントが含まれています。
Azure portal から先ほどコピーした URI とキーを、プレースホルダーコメントに置き換えて、この 2 行に貼り付けます。
ファイルを保存して閉じます。

Directory.packages.props ファイルを更新する

Mesh Cloud Scripting ファイルを表示するエクスプローラーウィンドウで、コードエディターで Directory.Packages.props という名前のファイルを開きます。パッケージ参照の追加に関するコメントに注意してください。

コメントを次の行に置き換えます。

<PackageVersion Include="Azure.AI.OpenAI" Version="1.0.0-beta.15"/>

ファイルを保存して閉じます。

csproj ファイルを更新する

Mesh Cloud Scripting ファイルを表示するエクスプローラーウィンドウで、コードエディターで StartingPoint.csproj という名前のファイルを開きます。
ファイルの下部には、WeatherAPI 情報を含む ItemGroup 要素のすぐ上に、パッケージ参照のプレースホルダーを含むコメントがあることに注意してください。
コメントを削除し、次の行に置き換えます。
```
<PackageReference Include="Azure.AI.OpenAI" />
```
ファイルを保存して閉じます。

OpenAI を有効にするコードを追加する

Mesh Cloud Scripting ファイルを表示するエクスプローラーウィンドウで、[StartingPoint] フォルダーに移動し、コードエディターで "App.cs" という名前のファイルを開きます。
App.cs ファイルで、using ディレクティブの一覧の上部にある "Paste code here" コメントを見つけます。
次のコードをコピーします。
```
using Azure;
using Azure.AI.OpenAI;
```
先ほど見つけた "コードをここに貼り付ける" コメントを、コピーしたコードに置き換えます。
[_weatherAPIKey_] フィールドの下にある "Paste code here" コメントを見つけます。
次のコードをコピーします。
```
private OpenAIClient _openAIClient;
```
先ほど見つけた "コードをここに貼り付ける" コメントを、コピーしたコードに置き換えます。
コンストラクターの本文にある "Paste code here" コメントを見つけます。

次のコードをコピーします。

Uri azureOpenAIResourceUri = new(configuration.GetValue<string>("AZURE_OPENAI_API_URI"));
AzureKeyCredential azureOpenAIApiKey = new(configuration.GetValue<string>("AZURE_OPENAI_API_KEY"));
_openAIClient = new(azureOpenAIResourceUri, azureOpenAIApiKey);

先ほど見つけた "コードをここに貼り付ける" コメントを、コピーしたコードに置き換えます。
StartAsync() メソッド内の refreshButtonNodeif ステートメントに続く "Paste code here" コメントを見つけます。

次のコードをコピーします。

var aiParentNode = _app.Scene.FindFirstChild("5 - AIAssistant", true) as TransformNode;
var infoButton = aiParentNode?.FindFirstChild<InteractableNode>(true);

if (infoButton != null)
{
    infoButton.Selected += async (sender, args) =>
    {
        // Ensure we have weather data before beginning the conversation
        await GetCurrentWeather(_latlong);

        // Display an input dialog for the user to send a message to the large language model (LLM)
        // Paste code here
    };
}

先ほど見つけた "コードをここに貼り付ける" コメントを、コピーしたコードに置き換えます。

OpenAI 入力ダイアログを表示するコードを追加する

if ステートメントで、GetCurrentWeather() メソッドの直後にある infoButton"Paste code here" コメントを見つけます。

次のコードをコピーします。

await _app.ShowInputDialogToParticipantAsync("Ask Azure OpenAI", args.Participant).ContinueWith(async (response) =>
{
    try
    {
        if (response.Exception != null)
        {
            throw response.Exception.InnerException ?? response.Exception;
        }

        string participantInput = response.Result;

        // Paste code here

        // Wait for a response from OpenAI based on the user's message
        // Paste code here
    }
    catch (Exception ex)
    {
        var log = $"Exception during OpenAI request: {ex.Message}";
        _logger.LogCritical(log);

        if (!response.IsCanceled)
        {
            _app.ShowMessageToParticipant(log, args.Participant);
        }
    }
}, TaskScheduler.Default);

先ほど見つけた "コードをここに貼り付ける" コメントを、コピーしたコードに置き換えます。

このコードは次のことを行います。
- ShowInputDialogToParticipantAsync() という名前のメソッドを使用して Mesh Cloud Scripting を呼び出します。引数は、ユーザーにプロンプトを表示するメッセージ ("Ask Azure OpoenAI") と、入力ダイアログを表示するユーザー (args.Participant) です。
- 入力ダイアログが表示されたら、エラーを確認します。
- participantInput に参加者が入力した内容 (結果) を文字列として保存します。

入力ダイアログの結果を GPT-3.5 Turbo に送信する

次のコードでは、GPT-3.5 Turbo モデルに入力ダイアログの結果を送信し、現在の気象データで応答する方法について説明します。

貼り付けた try から catch までのブロックで、最初の "Paste code here" コメントを見つけます。

次のコードをコピーします。

    var chatCompletionsOptions = new ChatCompletionsOptions()
    {
        DeploymentName = "gpt-35-turbo", // Use DeploymentName for "model" with non-Azure clients
        Messages =
        {
            // The system message represents instructions or other guidance about how the assistant should behave
            new ChatRequestSystemMessage(
                "You are a helpful assistant." +
                "You're part of a developer sample for the Mesh Toolkit." +
                "Use brief answers, less than 1 paragraph." +
                "You can suggest a good location for a wind farm based on current and historical weather data." +
                "We're looking at globe with the current weather data displayed for each of these locations:  Lagos Nigeria, Redmond WA USA, Dublin Ireland" +
                "Current weather conditions for these locations:" + _currentWeatherText
                ),
            new ChatRequestUserMessage(participantInput),
        }
    };

先ほど見つけた "コードをここに貼り付ける" コメントを、コピーしたコードに置き換えます。

このコードは次のことを行います。
- chatCompletionOptions という名前の ChatCompletionOptions クラスのインスタンスを作成します。
- 先ほど作成したデプロイの名前 ("gpt-35-turbo") を使用して、DeploymentName という名前の変数を初期化します。
- アシスタントが質問に答える方法に関するガイダンスを使用して、ChatRequestSystemMessage の新しいインスタンスを初期化します。これには、関心のある気象データを含む場所と、それらの場所の現在の条件 (_currentWeatherText) が含まれます。 _currentWeatherText の値は、第 5 章で weatherapi.com を呼び出したときに受け取りました。
- 参加者からの質問を使用して、ChatRequestUserMessage の新しいインスタンスを初期化します。
- 要求に関する情報を LLM (大規模言語モデル) に送信します。

LLM からの応答を表示するコードを追加する

貼り付けた try から catch までのブロックで、残りの "Paste code here" コメントを見つけます。

次のコードをコピーします。

        var aiResponse = await _openAIClient.GetChatCompletionsAsync(chatCompletionsOptions);

        // Display the first response from the LLM
        var responseMessage = aiResponse.Value.Choices[0].Message;
        _app.ShowMessageToParticipant($"<i>You asked: {participantInput}</i>\n\nResponse: {responseMessage.Content}", args.Participant);

先ほど見つけた "コードをここに貼り付ける" コメントを、コピーしたコードに置き換えます。

このコードは次のことを行います。
- LLM からの応答を待ちます。
- LLM は、配列内のいくつかの応答 (responseMessage) を返します。表示したい応答を選択できます。
- Mesh Cloud Scripting API で ShowMessageToParticipant() を呼び出して応答を表示します。
ファイルを保存して閉じます。

作業をテストする

Unity エディターでプロジェクトを保存し、[再生] ボタンを押します。
アバターは、最初の 3 つのステーションを含む Sphere Terrace の側に生成されます。 Sphere Terrace の反対側に移動し、ステーション 5 の前に自分自身を配置します。
ステーション 5 の情報テキストボックスにある [information] ボタンをクリックします。
[Ask Azure OpenAI] ダイアログが表示されたら、質問を入力します。
ダイアログに応答が表示されます。完了したら、[OK] をクリックします。

まとめ

お疲れさまでした。この Mesh 201 チュートリアルでは、以下のタスクについて学習しました。

ローカル共有 HTML ファイルと非共有 HTML ファイルを WebSlate に読み込む。
3D アセットを使用して Web API を呼び出し、WebSlate にデータをダウンロードする。
内部ソースまたはパブリックソースからシーンにデータをプルし、3D で表示する。
Azure OpenAI ベースの仮想アシスタントまたは "チャットボット" を使用して、AI を利用した対話を設定する。

これで、新しい Mesh スキルを使用して、さらに便利でエキサイティングなコラボレーションエクスペリエンスを構築できます。

次のステップ

ビルドして発行する

このチュートリアルプロジェクトをビルドして発行する場合は、次の操作を行います。

Mesh Cloud Scripting プロジェクトの準備に関する記事に移動し、指示に従ってリソースグループとサブスクリプション ID を記録します。
環境のビルドと発行に関する記事に移動し、その指示に従います。ある時点で、Mesh Cloud Scripting を使用してプロジェクトをビルドするための特別な手順を含む補足記事に移動し、メインビルドに戻って記事を発行する必要があります。このフローはすべて、記事に記載されています。
必要に応じて、Mesh アプリで環境をテストできます。

WebSlates の詳細

Mesh ヘルプサイトの WebSlates の記事をご覧ください。

WebSlates 製品マネージャーが書いたブログ記事をお読みください。

課題

WebSlate と HTML ファイルを読み込むボタンを使用して、独自のステーションを作成してみてください。また、Mesh 開発者フォーラムで自分自身の取り組みについて共有してください。

次の方法で共有

Mesh 201 チュートリアル第 6 章: Azure OpenAI を使用して質問に対する回答を取得する

このステーションをセットアップする

Azure OpenAI リソースを作成しデプロイする

Azure OpenAI Studio にモデルをデプロイする

URI とキーをコピーする

ステーション 5 のプレハブを追加する

Azure OpenAI の URI と API 情報を挿入する

Directory.packages.props ファイルを更新する

csproj ファイルを更新する

OpenAI を有効にするコードを追加する

OpenAI 入力ダイアログを表示するコードを追加する

入力ダイアログの結果を GPT-3.5 Turbo に送信する

LLM からの応答を表示するコードを追加する

作業をテストする

まとめ

次のステップ

フィードバック

その他のリソース

次の方法で共有

Mesh 201 チュートリアル 第 6 章: Azure OpenAI を使用して質問に対する回答を取得する

このステーションをセットアップする

Azure OpenAI リソースを作成しデプロイする

Azure OpenAI Studio にモデルをデプロイする

URI とキーをコピーする

ステーション 5 のプレハブを追加する

Azure OpenAI の URI と API 情報を挿入する

Directory.packages.props ファイルを更新する

csproj ファイルを更新する

OpenAI を有効にするコードを追加する

OpenAI 入力ダイアログを表示するコードを追加する

入力ダイアログの結果を GPT-3.5 Turbo に送信する

LLM からの応答を表示するコードを追加する

作業をテストする

まとめ

次のステップ

フィードバック

その他のリソース

Mesh 201 チュートリアル第 6 章: Azure OpenAI を使用して質問に対する回答を取得する