Compartilhar via

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

  • Artigo

Neste início rápido, nós demonstraremos como integrar os recursos de geração de imagem do DALL-E ao seu aplicativo da área de trabalho .NET MAUI para Windows.

Pré-requisitos

Que problema vamos resolver?

Você deseja adicionar os recursos de geração de imagem do DALL-E ao seu aplicativo da á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 em que elas foram inseridas.

Definir as variáveis de ambiente

Para usar o SDK do OpenAI, você precisará definir uma variável de ambiente com a chave de API. Neste exemplo, usaremos a variável de ambiente OPENAI_API_KEY. Depois de obter a chave de API no painel do desenvolvedor de OpenAI, é possível definir a variável de ambiente 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 convém usar um método mais seguro para aplicativos de produção e suporte móvel. Por exemplo, você pode armazenar sua chave de API em um cofre de chaves seguro que um serviço remoto possa acessar em nome do seu aplicativo. Consulte Práticas recomendadas para segurança de chave OpenAI para obter mais informações.

Instalar e inicializar a biblioteca OpenAI para .NET

Nesta seção, vamos instalar o SDK no projeto .NET MAUI e inicializá-lo com sua chave de API do OpenAI.

  1. Se você ainda não tiver instalado o OpenAI pacote NuGet, poderá fazer isso executando dotnet add package OpenAI -IncludePrerelease da janela de terminal do Visual Studio.

  2. Uma vez instalado, você pode inicializar a instância OpenAIClient do SDK com sua chave de API do OpenAI em MainPage.xaml.cs da 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);
}

Modifique a interface do usuário do aplicativo

Em seguida, modificaremos a interface do usuário para incluir um controle Image 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 controle Label e um controle CheckBox para MainPage.xaml abaixo do controle LocationEntry 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 controle SmallLabel para exibir a imagem gerada:

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

Implementar a geração de imagens DALL-E

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

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

  2. Adicione um método chamado GetImageAsync para manipular a geração de imagens. O novo método chamará a API do OpenAI para gerar uma imagem com base no prompt que criaremos na próxima etapa. Ele retorna um objeto ImageSource 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. Adicione uma diretiva de uso para as classes de geração de imagem na parte superior do arquivo:

    using OpenAI.Images;

  4. Adicione o código a seguir ao final do método GetRecommendationAsync para chamar condicionalmente o método GetImageAsync 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 cadeia de caracteres imagePrompt foi 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ê deverá ver algo como:

Demonstração de geração de imagem

Como resolvemos o problema?

Adicionamos os recursos de geração de imagens do DALL-E ao nosso aplicativo da área de trabalho .NET MAUI para Windows. Os usuários agora podem gerar imagens com base no local que inserem e no tipo de recomendação que selecionarem. Isso fornece uma experiência rica e interativa para os usuários e aprimora a funcionalidade do aplicativo.

Limpar os recursos

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

Conteúdo relacionado