Tutorial: Criar um chatbot com o Serviço de Aplicativo do Azure e o Azure OpenAI (Flask)

Neste tutorial, você criará um aplicativo de IA inteligente integrando o Azure OpenAI a um aplicativo Web Python e o implantará no Serviço de Aplicativo do Azure. Você cria um aplicativo Flask que envia solicitações de conclusão de chat para um modelo no Azure OpenAI e se conecta ao serviço usando uma identidade gerenciada.

Você aprenderá como:

Prerequisites

• Uma conta do Azure com uma assinatura ativa
• Uma conta do GitHub para usar os Codespaces do GitHub

1. Criar um recurso do Azure OpenAI

Nesta seção, você usará a CLI do Azure nos Codespaces do GitHub para criar um recurso do Azure OpenAI.

1. Entre nos Codespaces do GitHub com sua conta do GitHub.

2. Selecione Usar este modelo no bloco Em branco para criar um novo codespace em branco.

3. No terminal do Codespace, instale a CLI do Azure.

   curl -sL https://aka.ms/InstallAzureCLIDeb | sudo bash
   

4. Entre em sua conta do Azure.

   az login
   

   Siga as instruções no terminal para autenticar.

5. Defina variáveis de ambiente fornecendo nomes para o grupo de recursos e o serviço Azure OpenAI e definindo uma região apropriada do Azure como sua localização.

   export RESOURCE_GROUP="<group-name>"
   export OPENAI_SERVICE_NAME="<azure-openai-name>"
   export APPSERVICE_NAME="<app-name>"
   export LOCATION="<azure-region>"
   

   Important

   O local está vinculado à disponibilidade regional do modelo escolhido. A disponibilidade de tipo de modelo e implantação varia entre as regiões do Azure e as camadas de cobrança. Este tutorial usa gpt-4o-mini, que está disponível em diversas regiões sob o tipo de implantação Padrão.

   Antes de selecionar um local, consulte o resumo do modelo e a tabela de disponibilidade da região para verificar o suporte ao modelo em sua região preferida.

6. Crie um grupo de recursos e um recurso do Azure OpenAI com um domínio personalizado e adicione um gpt-4o-mini modelo:

   # Resource group
   az group create --name $RESOURCE_GROUP --location $LOCATION
   # Azure OpenAI resource
   az cognitiveservices account create \
     --name $OPENAI_SERVICE_NAME \
     --resource-group $RESOURCE_GROUP \
     --location $LOCATION \
     --custom-domain $OPENAI_SERVICE_NAME \
     --kind OpenAI \
     --sku s0
   # gpt-4o-mini model
   az cognitiveservices account deployment create \
     --name $OPENAI_SERVICE_NAME \
     --resource-group $RESOURCE_GROUP \
     --deployment-name gpt-4o-mini \
     --model-name gpt-4o-mini \
     --model-version 2024-07-18 \
     --model-format OpenAI \
     --sku-name Standard \
     --sku-capacity 1
   # Cognitive Services OpenAI User role that lets the signed in Azure user read models from Azure OpenAI
   az role assignment create \
     --assignee $(az ad signed-in-user show --query id -o tsv) \
     --role "Cognitive Services OpenAI User" \
     --scope /subscriptions/$(az account show --query id -o tsv)/resourceGroups/$RESOURCE_GROUP/providers/Microsoft.CognitiveServices/accounts/$OPENAI_SERVICE_NAME
   

Agora que você tem um recurso do Azure OpenAI, pode criar um aplicativo Web para interagir com ele.

2. Criar e configurar um aplicativo Flask

1. No terminal do codespace, crie um ambiente virtual e instale os pacotes PIP necessários.

   python3 -m venv .venv
   source .venv/bin/activate
   pip install flask openai azure.identity dotenv
   pip freeze > requirements.txt
   

2. Na raiz do workspace, crie um arquivo chamado app.py que contém o código a seguir para uma chamada de conclusão de chat simples com o Azure OpenAI.

   import os
   from flask import Flask, render_template, request
   from azure.identity import DefaultAzureCredential, get_bearer_token_provider
   from openai import AzureOpenAI
   
   app = Flask(__name__)
   
   # Initialize the Azure OpenAI client with Microsoft Entra authentication
   token_provider = get_bearer_token_provider(
       DefaultAzureCredential(), "https://cognitiveservices.azure.com/.default"
   )
   client = AzureOpenAI(
       api_version="2024-10-21",
       azure_endpoint=os.getenv("AZURE_OPENAI_ENDPOINT"),
       azure_ad_token_provider=token_provider,
   )
   
   @app.route('/', methods=['GET', 'POST'])
   def index():
       response = None
       if request.method == 'POST': # Handle form submission
           user_message = request.form.get('message')
           if user_message:
               try:
                   # Call the Azure OpenAI API with the user's message
                   completion = client.chat.completions.create(
                       model="gpt-4o-mini",
                       messages=[{"role": "user", "content": user_message}]
                   )
                   ai_message = completion.choices[0].message.content
                   response = ai_message
               except Exception as e:
                   response = f"Error: {e}"
       return render_template('index.html', response=response)
   
   if __name__ == '__main__':
       app.run()
   

3. Crie um diretório de modelos e um arquivo index.html nele. Cole o código a seguir para criar uma interface de chat simples.

   <!doctype html>
   <html>
   <head>
       <title>Azure OpenAI Chat</title>
       <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
   </head>
   <body>
       <main class="container py-4">
           <h1 class="mb-4 text-primary">Azure OpenAI Chat</h1>
           <form method="post" action="/" class="mb-3">
               <div class="input-group">
                   <input type="text" name="message" class="form-control" placeholder="Type your message..." required>
                   <button type="submit" class="btn btn-primary">Send</button>
               </div>
           </form>
           <div class="card p-3">
               {% if response %}
                   <div class="alert alert-info mt-3">{{ response }}</div>
               {% endif %}
           </div>
       </main>
   </body>
   </html>
   

4. No terminal, recupere o ponto de extremidade do OpenAI:

   az cognitiveservices account show \
     --name $OPENAI_SERVICE_NAME \
     --resource-group $RESOURCE_GROUP \
     --query properties.endpoint \
     --output tsv
   

5. Execute o aplicativo adicionando AZURE_OPENAI_ENDPOINT com o valor da saída da CLI anterior.

   AZURE_OPENAI_ENDPOINT=<output-from-previous-cli-command> flask run
   

6. Selecione Abrir no navegador para iniciar o aplicativo em uma nova guia do navegador. Envie uma pergunta para ver uma mensagem de resposta.

3. Implantar no Serviço de Aplicativo do Azure e configurar a conexão OpenAI

Agora que seu aplicativo funciona localmente, implante-o no Serviço de Aplicativo do Azure e configure uma conexão de serviço com o Azure OpenAI usando a identidade gerenciada.

1. Primeiro, implante seu aplicativo no Serviço de Aplicativo do Azure usando o comando az webapp upda CLI do Azure. Esse comando cria um novo aplicativo Web no mesmo grupo de recursos que o recurso OpenAI e implanta seu código nele. O comando pode levar alguns minutos para ser concluído.

   az webapp up \
     --resource-group $RESOURCE_GROUP \
     --location $LOCATION \
     --name $APPSERVICE_NAME \
     --plan $APPSERVICE_NAME \
     --sku B1 \
     --os-type Linux \
     --track-status false
   

2. Depois que o aplicativo for implantado, crie uma conexão de serviço entre seu aplicativo Web e o recurso do Azure OpenAI usando a identidade gerenciada. O comando a seguir cria uma conexão entre seu aplicativo Web e o recurso do Azure OpenAI:

   • Gerando uma identidade gerenciada atribuída pelo sistema para o aplicativo Web.
   • Adicionando a função Colaborador OpenAI de Serviços Cognitivos à identidade gerenciada para o recurso do OpenAI do Azure.
   • Adicionando a configuração de aplicativo AZURE_OPENAI_ENDPOINT ao seu aplicativo web.

   az webapp connection create cognitiveservices \
     --resource-group $RESOURCE_GROUP \
     --name $APPSERVICE_NAME \
     --target-resource-group $RESOURCE_GROUP \
     --account $OPENAI_SERVICE_NAME \
     --connection azure_openai \
     --system-identity
   

3. Localize a URL do aplicativo implantado na saída do terminal do az webapp up comando e navegue até o aplicativo no navegador da Web.

   az webapp browse
   

4. Em seu aplicativo Web, insira uma mensagem na caixa de texto e selecione Enviar. Dê ao aplicativo alguns segundos para responder com a mensagem do Azure OpenAI.

   

Seu aplicativo agora está implantado e conectado ao Azure OpenAI com identidade gerenciada.

Perguntas frequentes

• Como posso me conectar ao OpenAI em vez do Azure OpenAI?
• Posso me conectar ao Azure OpenAI com uma chave de API em vez de uma identidade gerenciada?
• Como funciona o DefaultAzureCredential?

Como posso me conectar ao OpenAI em vez do Azure OpenAI?

Para se conectar ao OpenAI em vez do Azure OpenAI, use o seguinte código:

from openai import OpenAI

client = OpenAI(
    api_key="<openai-api-key>"
)

Para obter mais informações, consulte Como alternar entre pontos de extremidade OpenAI e OpenAI do Azure com Python.

Posso me conectar ao Azure OpenAI com uma chave de API em vez de uma identidade gerenciada?

Sim, você pode se conectar ao Azure OpenAI usando uma chave de API em vez de uma identidade gerenciada. O SDK do Azure OpenAI e o Kernel Semântico dão suporte a essa abordagem.

• Para obter detalhes sobre como usar chaves de API com Kernel Semântico, consulte Introdução ao Kernel Semântico.
• Para obter detalhes sobre como usar chaves de API com a biblioteca de clientes do Azure OpenAI, consulte Usar a API de Respostas OpenAI do Azure.

Como funciona o DefaultAzureCredential?

DefaultAzureCredential simplifica a autenticação selecionando automaticamente o melhor método de autenticação disponível.

• Durante o desenvolvimento local, depois de executar az login, o DefaultAzureCredential usa suas credenciais locais do Azure CLI.
• Para implantações do Serviço de Aplicativo do Azure, o DefaultAzureCredential usa a identidade gerenciada do aplicativo para autenticação segura e sem senha.

Essa abordagem permite que seu código seja executado de forma segura e direta em ambientes locais e de nuvem sem modificação.

Conteúdo relacionado

• Tutorial: Executar um chatbot no Serviço de Aplicativo com uma extensão sidecar Phi-4 (FastAPI)
• Criar e implantar um recurso do Serviço OpenAI do Azure
• Como usar identidades gerenciadas para o Serviço de Aplicativo e o Azure Functions