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

Neste tutorial, constrói uma aplicação de IA inteligente integrando o Azure OpenAI com uma aplicação web Python e implementa-a no Azure App Service. Cria uma aplicação Flask que envia pedidos de conclusão de chat para um modelo no Azure OpenAI, e liga-se ao serviço usando uma identidade gerida.

Você aprende a:

  • Crie um recurso do Azure OpenAI e implante um modelo de linguagem.
  • Crie um aplicativo Flask que se conecte ao Azure OpenAI.
  • Implante o aplicativo no Serviço de Aplicativo do Azure.
  • Implemente autenticação segura sem palavra-passe no ambiente de desenvolvimento e no Azure.

Captura de tela mostrando um chatbot em execução no Serviço de Aplicativo do Azure.

Prerequisites

1. Criar um recurso do Azure OpenAI

Nesta secção, utilizas Azure CLI no GitHub Codespaces para criar um recurso Azure OpenAI.

  1. Inicia sessão no GitHub Codespaces com a tua conta GitHub.

  2. Selecionar Usar este modelo na peça em branco para criar um novo espaço de código em branco.

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

    curl -sL https://aka.ms/InstallAzureCLIDeb | sudo bash
    
  4. Entre na sua conta do Azure.

    az login
    

    Siga as instruções no terminal para autenticar.

  5. Defina variáveis de ambiente fornecendo nomes para o seu grupo de recursos e para o serviço Azure OpenAI e definindo uma região Azure apropriada 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

    A localização está ligada à disponibilidade regional do modelo escolhido. A disponibilidade de modelos e tipos de implementação varia entre regiões Azure e níveis de faturação. Este tutorial utiliza gpt-4o-mini, que está disponível em várias regiões sob o tipo de implementação Standard.

    Antes de selecionar uma localização, consulte o resumo de modelos e a tabela de disponibilidade de regiões para verificar o suporte de modelos na sua região preferida.

  6. Crie um grupo de recursos e um recurso Azure OpenAI com um domínio personalizado, e depois 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 tem um recurso Azure OpenAI, pode criar uma aplicação web para interagir com ele.

2. Criar e configurar uma aplicação Flask

  1. No seu terminal 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 ficheiro chamado app.py contenha o seguinte código para uma chamada simples de conclusão de chat 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 seguinte 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 seu endpoint OpenAI:

    az cognitiveservices account show \
      --name $OPENAI_SERVICE_NAME \
      --resource-group $RESOURCE_GROUP \
      --query properties.endpoint \
      --output tsv
    
  5. Execute a aplicação somando 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 abrir a aplicação num novo separador. 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 a sua aplicação funciona localmente, implemente-a no Azure App Service e configure uma ligação de serviço ao Azure OpenAI usando a identidade gerida.

  1. Primeiro, implante seu aplicativo no Serviço de Aplicativo do Azure usando o comando az webapp upCLI do Azure . Este comando cria uma nova aplicação web no mesmo grupo de recursos do seu recurso OpenAI e implementa o 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 de a aplicação ser implementada, crie uma ligação de serviço entre a sua aplicação web e o recurso Azure OpenAI usando identidade gerida. O comando seguinte cria uma ligação entre a sua aplicação web e o recurso Azure OpenAI através de:

    • Gerar uma identidade gerida atribuída pelo sistema para a aplicação web.
    • Adicionar o papel de Contribuidor OpenAI de Serviços Cognitivos à identidade gerida para o recurso Azure OpenAI.
    • Adicionar a definição da AZURE_OPENAI_ENDPOINT aplicação à sua aplicação 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. Encontre o URL da sua aplicação implementada na saída do terminal do az webapp up comando e navegue até à aplicação no seu navegador web.

    az webapp browse
    
  4. Na sua aplicação web, introduza uma mensagem na caixa de texto e selecione Enviar. Dê à aplicação alguns segundos para responder com a mensagem do Azure OpenAI.

    Captura de tela mostrando o chatbot em execução no Serviço de Aplicativo do Azure.

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

Perguntas frequentes


Como posso ligar-me ao OpenAI em vez do Azure OpenAI?

Para se ligar 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 endpoints OpenAI e Azure OpenAI com Python.

Important

Ao lidar com segredos de conexão, como chaves de API no App Service, é recomendável usar referências do Azure Key Vault ao invés de armazenar segredos diretamente no seu código. Esta prática garante que a informação sensível se mantém segura e é gerida de forma centralizada.


Posso ligar-me ao Azure OpenAI com uma chave API em vez de uma identidade gerida?

Sim, pode ligar-se ao Azure OpenAI usando uma chave API em vez de uma identidade gerida. O Azure OpenAI SDK e o Semantic Kernel suportam esta abordagem.

Important

Ao trabalhar com segredos de conexão, como chaves de API no App Service, deve utilizar referências ao Key Vault em vez de armazenar segredos diretamente no seu código. Esta prática garante que a informação sensível se mantém segura e é gerida de forma centralizada.


Como funciona o DefaultAzureCredential?

O DefaultAzureCredential simplifica a autenticação ao selecionar automaticamente o melhor método de autenticação.

  • Durante o desenvolvimento local, depois de executares az login, o DefaultAzureCredential utiliza as tuas credenciais locais da CLI do Azure.
  • Para as implementações do Azure App Service, o DefaultAzureCredential utiliza a identidade gerida da aplicação para uma autenticação segura e sem palavra-passe.

Essa abordagem permite que seu código seja executado de forma segura e transparente em ambientes locais e na nuvem, sem modificações.