Partilhar via

Guia de início rápido: adicione DALL-E ao seu aplicativo de área de trabalho .NET MAUI para Windows

Integre DALL-E recursos de geração de imagens em seu aplicativo de área de trabalho .NET MAUI para Windows para aprimorar a experiência do usuário com visuais gerados por IA. Este guia fornece instruções passo a passo com exemplos de código para adicionar recursos poderosos de geração de imagens ao seu aplicativo.

Pré-requisitos

  • Visual Studio 2022 17.8 ou superior, com a carga de trabalho da interface do usuário do aplicativo multiplataforma .NET instalada. Para obter mais informações, consulte Installation.
  • Um projeto .NET MAUI funcional com integração OpenAI no qual esta capacidade será integrada. Consulte Criar uma aplicação de recomendação com .NET MAUI e ChatGPT - iremos demonstrar como integrar o DALL-E na interface do utilizador a partir deste guia.
  • Uma chave de API OpenAI do seu painel de desenvolvedor OpenAI.
  • Um pacote .NET OpenAI NuGet versão 2.0.0 ou posterior instalado no seu projeto. Esta versão está atualmente em pré-lançamento. Se você acompanhou o tutorial do .NET MAUI ChatGPT, você terá essa dependência instalada e configurada.

Que problema vamos resolver?

Você deseja adicionar os recursos de geração de imagem do DALL-E ao seu aplicativo de área de trabalho .NET MAUI para Windows para fornecer aos usuários uma experiência rica e interativa. Eles já podem usar o aplicativo para gerar recomendações baseadas em texto e você deseja adicionar a capacidade de gerar imagens que visualizem uma atividade no local que inseriram.

Definir a variável de ambiente

Para usar o OpenAI SDK, você precisará definir uma variável de ambiente com sua chave de API. Neste exemplo, usaremos a OPENAI_API_KEY variável de ambiente. Depois de ter sua chave de API no painel do desenvolvedor OpenAI, você pode definir a variável de ambiente a partir da linha de comando da seguinte maneira:

setx OPENAI_API_KEY <your-api-key>

Observe que esse método funciona para desenvolvimento no Windows, mas você desejará usar um método mais seguro para aplicativos de produção e para suporte móvel. Por exemplo, você pode armazenar sua chave de API em um cofre de chaves seguro que um serviço remoto pode acessar em nome do seu aplicativo. Consulte Práticas recomendadas para segurança de chaves OpenAI para obter mais informações.

Instalar e inicializar a biblioteca OpenAI para .NET

Nesta seção, instalaremos o SDK no projeto .NET MAUI e o inicializaremos com sua chave de API OpenAI.

  1. Se você ainda não instalou o OpenAI pacote NuGet, pode fazê-lo executando dotnet add package OpenAI -IncludePrerelease a partir da janela de terminal do Visual Studio.

  2. Uma vez instalado, você pode inicializar a OpenAIClient instância do SDK com sua chave de API OpenAI da MainPage.xaml.cs seguinte maneira:

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

Modificar a interface do usuário do seu aplicativo

Em seguida, modificaremos a interface do usuário para incluir um Image controle que exibe uma imagem gerada abaixo do texto de recomendação.

  1. Se você estiver começando com um novo projeto, copie o XAML para MainPage.xaml do tutorial Criar um aplicativo de recomendação com .NET MAUI e ChatGPT .

  2. Adicione um StackLayout contendo um Label controle e um CheckBox controle abaixo MainPage.xaml do LocationEntry controle para permitir que os usuários selecionem se desejam gerar uma imagem:

    ...
<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. Adicione um Image controle abaixo do SmallLabel controle para exibir a imagem gerada:

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

Implementar geração de imagens DALL-E

Nesta seção, adicionaremos um método para manipular a geração de imagens e chamá-lo do método existente GetRecommendationAsync para exibir a imagem gerada.

  1. Se você estiver começando com um novo projeto, verifique se o código corresponde MainPage.xaml.cs ao código do tutorial Criar um aplicativo de recomendação com .NET MAUI e ChatGPT .

  2. Adicione um método nomeado GetImageAsync para manipular a geração de imagens. O novo método chamará a API OpenAI para gerar uma imagem com base no prompt que construiremos na próxima etapa. Ele retorna um ImageSource objeto que é usado para exibir a imagem na interface do usuário:

    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. No topo do arquivo, adicione uma diretiva using para as classes de geração de imagem:

    using OpenAI.Images;

  4. Adicione o seguinte código ao final do GetRecommendationAsync método para chamar condicionalmente o GetImageAsync método e exibir a imagem gerada:

    if (IncludeImageChk.IsChecked)
{
    var imagePrompt = $"Show some fun things to do in {LocationEntry.Text} when visiting a {recommendationType}.";
    GeneratedImage.Source = await GetImageAsync(imagePrompt);
}

    A imagePrompt cadeia de caracteres é criada com base na entrada de localização do usuário e no tipo de recomendação selecionado.

Executar e testar

Execute seu aplicativo, insira um local válido e clique em um dos botões de recomendação. Você deve ver algo assim:

Captura de tela do aplicativo .NET MAUI mostrando DALL-E imagem gerada de atividades divertidas em um local da cidade com texto de recomendação.

Como resolvemos o problema?

Adicionamos os recursos de geração de imagem do DALL-E ao nosso aplicativo de desktop .NET MAUI para Windows. Os utilizadores podem agora gerar imagens com base na localização que introduzem e no tipo de recomendação que selecionam. Isso fornece uma experiência rica e interativa para os usuários e aprimora a funcionalidade do aplicativo.

Limpeza de recursos

É importante certificar-se de que sua conta OpenAI está segura. Se você não está planejando usar a chave da API OpenAI para outros projetos, você deve excluí-la do seu painel do desenvolvedor OpenAI. Você também deve definir um limite de gastos razoável em sua conta OpenAI para evitar cobranças inesperadas. Você pode verificar seu uso e gastos atuais no painel do OpenAI na página Uso .

Consulte também

  • Last updated on