Compartilhar via

Introdução aos aplicativos de chat de visão multimodal usando o OpenAI do Azure

  • Artigo

Este artigo mostra como usar modelos multimodais do OpenAI do Azure para gerar respostas a mensagens de usuário e imagens carregadas em um aplicativo de chat. Este exemplo de aplicativo de chat também inclui toda a infraestrutura e configuração necessárias para provisionar recursos do Azure OpenAI e implantar o aplicativo nos Aplicativos de Contêiner do Azure usando a CLI do Desenvolvedor do Azure.

Seguindo as instruções neste artigo, você vai:

  • Implante um aplicativo de chat de contêiner do Azure que usa identidade gerenciada para autenticação.
  • Carregue imagens para serem usadas como parte do fluxo de bate-papo.
  • Converse com um LLM (Modelo de Linguagem Grande) multimodal OpenAI do Azure usando a biblioteca OpenAI.

Depois de concluir este artigo, você poderá começar a modificar o novo projeto com seu código personalizado.

Observação

Este artigo usa um ou mais modelos de aplicativo de IA como base para os exemplos e as diretrizes no artigo. Os modelos de aplicativo de IA fornecem implementações de referência regulares e fáceis de implantar que ajudam a garantir um ponto de partida de alta qualidade para os aplicativos de IA.

Visão geral da arquitetura

Uma arquitetura simples do aplicativo de bate-papo é mostrada no diagrama a seguir: Diagrama mostrando a arquitetura do cliente para o aplicativo de back-end.

O aplicativo de chat está em execução como um Aplicativo de Contêiner do Azure. O aplicativo usa a identidade gerenciada por meio da ID do Microsoft Entra para autenticar com o Azure OpenAI, em vez de uma chave de API. O aplicativo de chat usa o Azure OpenAI para gerar respostas às mensagens do usuário.

A arquitetura do aplicativo depende dos seguintes serviços e componentes:

  • O OpenAI do Azure representa o provedor de IA para o qual enviamos as consultas do usuário.
  • Os Aplicativos de Contêiner do Azure são o ambiente de contêiner em que o aplicativo está hospedado.
  • A Identidade Gerenciada nos ajuda a garantir a melhor segurança da categoria e elimina a necessidade de você, como desenvolvedor, gerenciar com segurança um segredo.
  • Arquivos Bicep para provisionamento de recursos do Azure, incluindo Azure OpenAI, Aplicativos de Contêiner do Azure, Registro de Contêiner do Azure, Azure Log Analytics e funções RBAC (controle de acesso baseado em função).
  • O Protocolo de Chat de IA da Microsoft fornece contratos de API padronizados em soluções e linguagens de IA. O aplicativo de bate-papo está em conformidade com o Microsoft AI Chat Protocol.
  • Um Python Quart que usa o openai pacote para gerar respostas a mensagens de usuário com arquivos de imagem carregados.
  • Um front-end HTML / JavaScript básico que transmite respostas do back-end usando JSON Lines em um ReadableStream.

Custo

Em uma tentativa de manter os preços o mais baixo possível neste exemplo, a maioria dos recursos usa um tipo de preço básico ou de consumo. Altere seu nível conforme necessário com base no uso pretendido. Para parar de incorrer em cobranças, exclua os recursos quando terminar o artigo.

Saiba mais sobre o custo no repositório de exemplo.

Pré-requisitos

Um ambiente de contêiner de desenvolvimento está disponível com todas as dependências necessárias para concluir este artigo. Você pode executar o contêiner de desenvolvimento em Codespaces do GitHub (em um navegador) ou localmente usando o Visual Studio Code.

Para usar este artigo, você precisa cumprir os seguintes pré-requisitos:

Abrir o ambiente de desenvolvimento

Use as instruções a seguir para implantar um ambiente de desenvolvimento pré-configurado contendo todas as dependências necessárias para concluir este artigo.

O GitHub Codespaces executa um contêiner de desenvolvimento gerenciado pelo GitHub com o Visual Studio Code para Web como interface do usuário. Para o ambiente de desenvolvimento mais simples, use os Codespaces do GitHub para que você tenha as ferramentas e dependências de desenvolvedor corretas pré-instaladas para concluir este artigo.

Importante

Todas as contas do GitHub podem usar Codespaces por até 60 horas gratuitas por mês com 2 instâncias principais. Para saber mais, confira Armazenamento e horas por núcleo incluídos mensalmente no GitHub Codespaces.

Use as etapas a seguir para criar um novo GitHub Codespace no main branch do Azure-Samples/openai-chat-vision-quickstart repositório GitHub.

  1. Clique com o botão direito do mouse no botão a seguir e selecione Abrir link em uma nova janela. Essa ação permite que você tenha o ambiente de desenvolvimento e a documentação disponíveis para revisão.

    Abrir em GitHub Codespaces

  2. Na página Criar codespace , examine e selecione Criar novo codespace

  3. Aguarde até que o codespace seja iniciado. Esse processo de inicialização pode levar alguns minutos.

  4. Entre no Azure com a CLI do Desenvolvedor do Azure no terminal na parte inferior da tela.

    azd auth login

  5. Copie o código do terminal e cole-o em um navegador. Siga as instruções para autenticar com sua conta do Azure.

As tarefas restantes neste artigo ocorrem no contexto desse contêiner de desenvolvimento.

Implantar e executar

O repositório de exemplo contém todos os arquivos de código e configuração para a implantação do aplicativo de chat do Azure. As etapas a seguir orientam você pelo processo de implantação do aplicativo de chat de exemplo do Azure.

Implantar aplicativo de chat no Azure

Importante

Os recursos do Azure criados nesta seção incorrem em custos imediatos. Esses recursos podem acumular custos mesmo se você interromper o comando antes que ele seja totalmente executado.

  1. Execute o seguinte comando da CLI do Desenvolvedor do Azure para provisionamento de recursos do Azure e implantação de código-fonte:

    azd up

  2. Use a seguinte tabela para responder aos prompts:

    Prompt Resposta
    Nome do ambiente Mantenha-o curto e em letras minúsculas. Adicione seu nome ou alias. Por exemplo, chat-vision. Ele é usado como parte do nome do grupo de recursos.
    Assinatura Selecione a assinatura para criar os recursos.
    Localização (para hospedagem) Selecione uma localização perto de você na lista.
    Local para o modelo OpenAI do Azure Selecione uma localização perto de você na lista. Se o mesmo local estiver disponível como seu primeiro local, selecione-o.

  3. Aguarde até que o aplicativo seja implantado. A implantação geralmente leva entre 5 e 10 minutos para ser concluída.

Usar o aplicativo de bate-papo para fazer perguntas ao Modelo de Linguagem Grande

  1. O terminal exibe uma URL após a implantação bem-sucedida do aplicativo.

  2. Selecione essa URL rotulada Deploying service web para abrir o aplicativo de chat em um navegador.

    Captura de tela do aplicativo de bate-papo no navegador com uma pergunta sobre uma imagem carregada no bate-papo junto com a resposta e a caixa de texto do bate-papo para inserir uma pergunta.

  3. No navegador, carregue uma imagem clicando em Escolher arquivo e selecionando uma imagem.

  4. Faça uma pergunta sobre a imagem carregada, como "Sobre o que é a imagem?".

  5. A resposta vem do Azure OpenAI e o resultado é exibido.

Explorando o código de exemplo

Embora o OpenAI e o Serviço OpenAI do Azure dependam de uma biblioteca de clientes comum do Python, pequenas alterações de código são necessárias ao usar pontos de extremidade do OpenAI do Azure. Este exemplo usa um modelo multimodal do OpenAI do Azure para gerar respostas a mensagens do usuário e imagens carregadas.

Base64 Codificando a imagem carregada no front-end

A imagem carregada precisa ser codificada em Base64 para que possa ser usada diretamente como um URI de dados como parte da mensagem.

No exemplo, o snippet de código de front-end a seguir na scriptmarca do src/quartapp/templates/index.html arquivo lida com essa funcionalidade. A toBase64 função de seta usa o readAsDataURLFileReader método to read de forma assíncrona no arquivo de imagem carregado como uma cadeia de caracteres codificada em base64.

    const toBase64 = file => new Promise((resolve, reject) => {
        const reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = () => resolve(reader.result);
        reader.onerror = reject;
    });

A toBase64 função é chamada por um ouvinte no evento do submit formulário. Quando o submit evento é acionado, o ouvinte verifica se há um arquivo de imagem e o manipula se estiver presente por Base64 codificando a imagem usando a toBase64 função. O novo URL de dados da imagem, fileData, é anexado à mensagem.

    form.addEventListener("submit", async function(e) {
        e.preventDefault();

        const file = document.getElementById("file").files[0];
        const fileData = file ? await toBase64(file) : null;

        const message = messageInput.value;

        const userTemplateClone = userTemplate.content.cloneNode(true);
        userTemplateClone.querySelector(".message-content").innerText = message;
        if (file) {
            const img = document.createElement("img");
            img.src = fileData;
            userTemplateClone.querySelector(".message-file").appendChild(img);
        }
        targetContainer.appendChild(userTemplateClone);

Manipulando a imagem com o back-end

No arquivo, o código de back-end para manipulação de imagem é iniciado após a configuração da src\quartapp\chat.py autenticação sem chave.

Observação

Para obter mais informações sobre como usar conexões sem chave para autenticação e autorização para o Azure OpenAI, confira o artigo Introdução ao bloco de construção de segurança do Azure OpenAI Microsoft Learn.

Função de manipulador de bate-papo

A chat_handler() função aguarda os dados JSON da solicitação de entrada do chat/stream ponto de extremidade e os processa. As mensagens são então extraídas dos dados JSON. Por fim, a imagem codificada em base64 é recuperada dos dados JSON.

@bp.post("/chat/stream")
async def chat_handler():
    request_json = await request.get_json()
    request_messages = request_json["messages"]
    # get the base64 encoded image from the request
    image = request_json["context"]["file"]

Fluxo de resposta usando o OpenAI Client e o modelo

O response_stream interior da chat_handler função lida com a chamada de conclusão de chat na rota. O snippet de código a seguir começa pré-processando as mensagens de conteúdo do usuário. Se uma imagem estiver presente, a URL da imagem será anexada ao conteúdo do usuário, com o

    @stream_with_context
    async def response_stream():
        # This sends all messages, so API request may exceed token limits
        all_messages = [
            {"role": "system", "content": "You are a helpful assistant."},
        ] + request_messages[0:-1]
        all_messages = request_messages[0:-1]
        if image:
            user_content = []
            user_content.append({"text": request_messages[-1]["content"], "type": "text"})
            user_content.append({"image_url": {"url": image, "detail": "auto"}, "type": "image_url"})
            all_messages.append({"role": "user", "content": user_content})
        else:
            all_messages.append(request_messages[-1])

Observação

Para obter mais informações sobre o parâmetro de imagem detail e configurações relacionadas, confira a seção Configurações de parâmetro de detalhe no processamento de imagem: Baixo, Alto, Automático no artigo "Usar GPT-4 Turbo com Visão" do Microsoft Learn.

Em seguida, bp.openai_client.chat.completions obtém conclusões de chat por meio de uma chamada à API do OpenAI do Azure e transmite a resposta.

        chat_coroutine = bp.openai_client.chat.completions.create(
            # Azure OpenAI takes the deployment name as the model name
            model=os.environ["OPENAI_MODEL"],
            messages=all_messages,
            stream=True,
            temperature=request_json.get("temperature", 0.5),
        )

Por fim, a resposta é transmitida de volta para o cliente, com tratamento de erros para quaisquer exceções.

        try:
            async for event in await chat_coroutine:
                event_dict = event.model_dump()
                if event_dict["choices"]:
                    yield json.dumps(event_dict["choices"][0], ensure_ascii=False) + "\n"
        except Exception as e:
            current_app.logger.error(e)
            yield json.dumps({"error": str(e)}, ensure_ascii=False) + "\n"

    return Response(response_stream())

Outros exemplos de recursos a serem explorados

Além do exemplo de aplicativo de bate-papo, há outros recursos no repositório a serem explorados para aprendizado adicional. Confira os seguintes notebooks no notebooks diretório:

Notebook Descrição
chat_pdf_images.ipynb Este notebook demonstra como converter páginas PDF em imagens e enviá-las para um modelo de visão para inferência.
chat_vision.ipynb Este notebook é fornecido para experimentação manual com o modelo de visão usado no aplicativo.

Limpar os recursos

Limpar recursos do Azure

Os recursos do Azure criados neste artigo são cobrados para sua assinatura do Azure. Se você não espera precisar desses recursos no futuro, exclua-os para evitar incorrer em mais encargos.

Para excluir os recursos do Azure e remover o código-fonte, execute o seguinte comando da Azure Developer CLI:

azd down --purge

Limpar GitHub Codespaces

A exclusão do ambiente GitHub Codespaces garante que você possa maximizar a quantidade de horas gratuitas por núcleo que você tem direito na sua conta.

Importante

Para saber mais sobre os direitos da sua conta do GitHub, confira O GitHub Codespaces inclui mensalmente armazenamento e horas de núcleo.

  1. Entre no painel do GitHub Codespaces (https://github.com/codespaces).

  2. Localize seus Codespaces atualmente em execução, originados do repositório Azure-Samples//openai-chat-vision-quickstart do GitHub.

  3. Abra o menu de contexto do codespace e selecione Excluir.

Obter ajuda

Registre seu problema nos Problemas do repositório.

Próximas etapas

Comece a usar o chat com sua própria amostra de dados para Python