クイック スタート: .NET MAUI Windows デスクトップ アプリに DALL-E を追加する
このクイック スタートでは、DALL-E の画像生成機能を .NET MAUI Windows デスクトップ アプリに統合する方法を説明します。
前提条件
- Visual Studio 2022 17.8 以降で、.NET Multi-platform App UI ワークロードがインストールされています。 詳細については、インストール を参照してください。
- この機能の統合先である OpenAI 統合を備えた、動作する .NET MAUI プロジェクト。 「.NET MAUI と ChatGPT を使用して推奨アプリを作成する」を参照してください。このチュートリアルのユーザー インターフェイスに DALL-E を統合する方法が示されています。
- OpenAI 開発者ダッシュボードの OpenAI API キー。
- プロジェクトにインストールされている .NET OpenAI NuGet パッケージ バージョン 2.0.0 以降。 このバージョンは現在プレリリースです .NET MAUI ChatGPT チュートリアルに従った場合は、この依存関係がインストールおよび構成されます。
どのような問題が解決されますか?
DALL-E の画像生成機能を .NET MAUI Windows デスクトップ アプリに追加することで、ユーザーに対話型のリッチ エクスペリエンスを提供できます。 ユーザーは既にアプリを使用してテキスト ベースのレコメンデーションを生成できますが、ユーザーが入力した場所でのアクティビティを視覚化した画像の生成機能を追加する必要があります。
環境変数を設定する
OpenAI SDK を使用するには、API キーを使用して環境変数を設定する必要があります。 この例では、OPENAI_API_KEY 環境変数を使用します。 OpenAI 開発者ダッシュボードから API キーを取得したら、コマンド ラインから次のように環境変数を設定できます。
setx OPENAI_API_KEY <your-api-key>
この方法は Windows での開発に適していますが、運用環境のアプリやモバイル サポートには、より安全な方法を使用する必要があることに注意してください。 たとえば、アプリの代わりに、リモート サービスがアクセスできるセキュリティで保護されたキー コンテナーに API キーを格納できます。 詳細については、「OpenAI キーの安全性に関するベスト プラクティス」を参照してください。
.NET 用 OpenAI ライブラリをインストールして初期化する
このセクションでは、SDK を .NET MAUI プロジェクトにインストールし、OpenAI API キーを使用して初期化します。
OpenAIの NuGet パッケージをまだインストールしていない場合は、Visual Studio のターミナル ウィンドウでdotnet add package OpenAI -IncludePrereleaseを実行してインストールできます。インストールしたら、次のように
MainPage.xaml.csで OpenAI API キーを使用して SDK のOpenAIClientインスタンスを初期化できます。private OpenAIClient _chatGptClient; public MainPage() { InitializeComponent(); this.Loaded += MainPage_Loaded; } private void MainPage_Loaded(object sender, EventArgs e) { var openAiKey = Environment.GetEnvironmentVariable("OPENAI_API_KEY"); _chatGptClient = new(openAiKey); }
アプリの UI を変更する
次に、生成された画像をレコメンデーション テキストの下に表示する Image コントロールが含まれるようにユーザー インターフェイスを変更します。
新しいプロジェクトを開始する場合は、「.NET MAUI と ChatGPT を使用して推奨アプリを作成する」チュートリアルから
MainPage.xamlの XAML をコピーします。画像を生成するかどうかをユーザーが選択できるように、
LabelコントロールとCheckBoxコントロールを含むStackLayoutをLocationEntryコントロールの下のMainPage.xamlに追加します。... <Entry x:Name="LocationEntry" Placeholder="Enter your location" SemanticProperties.Hint="Enter the location for recommendations" HorizontalOptions="Center"/> <!-- Add this markup --> <StackLayout Orientation="Horizontal" HorizontalOptions="Center"> <Label Text="Generate image" VerticalOptions="Center"/> <CheckBox x:Name="IncludeImageChk" VerticalOptions="Center"/> </StackLayout> ...生成された画像を表示できるように、
SmallLabelコントロールの下にImageコントロールを追加します。... <Image x:Name="GeneratedImage" WidthRequest="256" HeightRequest="256" HorizontalOptions="Center"/> </VerticalStackLayout>
DALL-E 画像生成を実装する
このセクションでは、画像生成を処理するメソッドを追加し、既存の GetRecommendationAsync メソッドから呼び出して、生成された画像を表示します。
新しいプロジェクトを開始する場合は、
MainPage.xaml.csのコードが「.NET MAUI と ChatGPT を使用して推奨アプリを作成する」チュートリアルのコードと一致していることを確認します。画像の生成を処理できるように、
GetImageAsyncという名前のメソッドを追加します。 この新しいメソッドは、OpenAI API を呼び出し、次の手順で構築するプロンプトに基づいて画像を生成します。 UI に画像を表示するために使用するImageSourceオブジェクトが返されます。public async Task<ImageSource> GetImageAsync(string prompt) { // Use the DALL-E 3 model for image generation. ImageClient imageClient = _chatGptClient.GetImageClient("dall-e-3"); // Generate an image based on the prompt with a 1024x1024 resolution, the default for DALL-E 3. ClientResult<GeneratedImage> response = await imageClient.GenerateImageAsync(prompt, new ImageGenerationOptions { Size = GeneratedImageSize.W1024xH1024, ResponseFormat = GeneratedImageFormat.Uri }); // Image generation responses provide URLs you can use to retrieve requested image(s). Uri imageUri = response.Value.ImageUri; return ImageSource.FromUri(imageUri); }画像生成クラスの using ディレクティブをファイルの先頭に追加します。
using OpenAI.Images;次のコードを
GetRecommendationAsyncメソッドの末尾に追加して、条件付きでGetImageAsyncメソッドを呼び出して、生成されたイメージを表示します。if (IncludeImageChk.IsChecked) { var imagePrompt = $"Show some fun things to do in {LocationEntry.Text} when visiting a {recommendationType}."; GeneratedImage.Source = await GetImageAsync(imagePrompt); }imagePrompt文字列は、ユーザーが入力した場所と選択したレコメンデーションの種類に基づいて構築されます。
実行してテストする
アプリを実行し、有効な場所を入力して、レコメンデーション ボタンの 1 つをクリックします。 次のような結果が表示されます。
問題をどのように解決したか。
DALL-E のイメージ生成機能を .NET MAUI Windows デスクトップ アプリに追加しました。 ユーザーは、入力した場所と、選択したレコメンデーションの種類に基づいて、画像を生成できるようになりました。 これにより、対話型のリッチ エクスペリエンスがユーザーに提供され、アプリの機能が強化されます。
リソースをクリーンアップする
OpenAI アカウントがセキュリティで保護されていることを確認することが重要です。 他のプロジェクトで OpenAI API キーを使用する予定がない場合は、OpenAI 開発者ダッシュボードから削除する必要があります。 また、予期しない課金が生じないように、OpenAI アカウントに妥当な使用制限を設定する必要があります。 [使用状況] ページの OpenAI ダッシュボードで、現在の使用状況と支出を確認できます。