共用方式為

快速入門：將 DALL-E 新增至 .NET MAUI Windows 桌面應用程式

  • 發行項

在此快速入門中，我們會說明如何將 DALL-E 的影像產生功能整合到您的 .NET MAUI Windows 應用程式 MAUI 桌面應用程式。

必要條件

我們會解決什麼問題？

您想將 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 金鑰來初始化。

  1. 如果您尚未安裝 OpenAI NuGet 套件，您可以在 Visual Studio 的終端機視窗執行 dotnet add package OpenAI -IncludePrerelease。

  2. 安裝之後，您可以在 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 控制項，藉此在建議文字下方顯示產生的影像。

  1. 如果您是從新專案開始設定，請複製使用 .NET MAUI 和 ChatGPT 建立建議應用程式的教學課程複製 MainPage.xaml 的 XAML。

  2. 將包含 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>
...

  3. 在 SmallLabel 控制項下方新增 Image 控制項以顯示產生的影像：

    ...
    <Image x:Name="GeneratedImage"
           WidthRequest="256"
           HeightRequest="256"
           HorizontalOptions="Center"/>
</VerticalStackLayout>

實作 DALL-E 映射產生

在本節中，我們將新增處理影像產生的方法，並從現有的 GetRecommendationAsync 方法中呼叫該方法來顯示產生的影像。

  1. 如果您是從新專案開始操作，請確認 MainPage.xaml.cs 的程式碼與使用 .NET MAUI 和 ChatGPT 建立建議應用程式教學課程中的程式碼相符。

  2. 新增名為 GetImageAsync 的方法，以便處理影像產生。 新的方法會呼叫 OpenAI API，以我們將在下一個步驟中組建的提示為依據來產生影像。 它會傳回 ImageSource 物件，以便在 UI 中用於顯示影像：

    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);
}

  3. 為檔案頂端的映像產生類別新增 using 指示詞：

    using OpenAI.Images;

  4. 將下列程式碼新增至 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 是根據使用者的位置輸入和所選建議類型而組建。

執行及測試

執行應用程式、輸入有效的位置，然後按一下其中一個建議按鈕。 您應該會看到類似這樣的畫面︰

影像生成展示

我們如何解決此問題？

我們已將 DALL-E 的影像產生功能新增至 .NET MAUI Windows 桌面應用程式。 使用者現在可以根據他們輸入的位置和選取的建議類型來產生影像。 這可為使用者提供豐富的互動式體驗，並增強應用程式功能。

清除資源

請務必確認您的 OpenAI 帳戶安全無虞。 如果您不打算將 OpenAI API 金鑰用於任何其他專案，請將它從 OpenAI 開發人員儀表板中刪除。 您也應該在 OpenAI 帳戶上設定合理的支出限制，以免產生意外費用。 您可以在「使用量」頁面的 OpenAI 儀表板中檢查目前的使用量和花費。

相關內容