Tutorial: Creación de un bot de chat con Azure App Service y Azure OpenAI (Flask)

En este tutorial, creará una aplicación de inteligencia artificial inteligente mediante la integración de Azure OpenAI con una aplicación web de Python e implementarla en Azure App Service. Cree una aplicación de Flask que envíe solicitudes de finalización de chat a un modelo en Azure OpenAI y conéctese al servicio mediante una identidad administrada.

Aprenderá a:

Cree un recurso de Azure OpenAI e implemente un modelo de lenguaje.
Cree una aplicación de Flask que se conecte a Azure OpenAI.
Implemente la aplicación en Azure App Service.
Implemente la autenticación segura sin contraseña en el entorno de desarrollo y en Azure.

Captura de pantalla que muestra un bot de chat que se ejecuta en Azure App Service.

Prerequisites

Una cuenta de Azure con una suscripción activa
Una cuenta de GitHub para usar GitHub Codespaces

1. Creación de un recurso de Azure OpenAI

En esta sección, usará la CLI de Azure en GitHub Codespaces para crear un recurso de Azure OpenAI.

Inicie sesión en GitHub Codespaces con su cuenta de GitHub.
Seleccione Usar esta plantilla en el icono En blanco para crear un nuevo espacio de código en blanco.

En el terminal de Codespace, instale la CLI de Azure.

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

Inicie sesión en su cuenta de Azure.
```
az login
```
Siga las instrucciones del terminal para autenticarse.
Establezca variables de entorno proporcionando nombres para el grupo de recursos y el servicio Azure OpenAI y estableciendo una región de Azure adecuada como ubicación.
```
export RESOURCE_GROUP="<group-name>"
export OPENAI_SERVICE_NAME="<azure-openai-name>"
export APPSERVICE_NAME="<app-name>"
export LOCATION="<azure-region>"
```
Important

La ubicación está vinculada a la disponibilidad regional del modelo elegido. La disponibilidad del tipo de modelo e implementación varía entre las regiones de Azure y los niveles de facturación. En este tutorial se usa gpt-4o-mini, que está disponible en varias regiones en el tipo de implementación Estándar.

Antes de seleccionar una ubicación, consulte la tabla de disponibilidad Resumen del modelo y región para comprobar la compatibilidad del modelo en su región preferida.

Cree un grupo de recursos y un recurso de Azure OpenAI con un dominio personalizado y agregue un 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

Ahora que tiene un recurso de Azure OpenAI, puede crear una aplicación web para interactuar con él.

2. Creación y configuración de una aplicación de Flask

En el terminal de codespace, cree un entorno virtual e instale los paquetes PIP que necesita.

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

En la raíz del área de trabajo, cree un archivo denominado app.py que contenga el código siguiente para una llamada de finalización de chat simple con 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()

Cree un directorio templates y un archivo index.html en él. Pegue el código siguiente para crear una interfaz de chat sencilla.

<!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>

En el terminal, recupere el punto de conexión de OpenAI:

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

Ejecute la aplicación agregando AZURE_OPENAI_ENDPOINT con el valor de la salida de la CLI anterior.
```
AZURE_OPENAI_ENDPOINT=<output-from-previous-cli-command> flask run
```
Seleccione Abrir en el explorador para iniciar la aplicación en una nueva pestaña del explorador. Envíe una pregunta para ver un mensaje de respuesta.

3. Implementación en Azure App Service y configuración de la conexión de OpenAI

Ahora que la aplicación funciona localmente, impleméntela en Azure App Service y configure una conexión de servicio a Azure OpenAI mediante la identidad administrada.

En primer lugar, implemente la aplicación en Azure App Service mediante el comando az webapp upde la CLI de Azure. Este comando crea una nueva aplicación web en el mismo grupo de recursos que el recurso de OpenAI e implementa el código en él. El comando puede tardar unos minutos en completarse.
```
az webapp up \
  --resource-group $RESOURCE_GROUP \
  --location $LOCATION \
  --name $APPSERVICE_NAME \
  --plan $APPSERVICE_NAME \
  --sku B1 \
  --os-type Linux \
  --track-status false
```
Una vez implementada la aplicación, cree una conexión de servicio entre la aplicación web y el recurso de Azure OpenAI mediante la identidad administrada. El siguiente comando crea una conexión entre la aplicación web y el recurso de Azure OpenAI mediante:
- Generación de una identidad administrada asignada por el sistema para la aplicación web.
- Añadir el rol Colaborador de Cognitive Services OpenAI a la identidad administrada para el recurso de Azure OpenAI.
- Añadiendo la configuración de la aplicación AZURE_OPENAI_ENDPOINT a tu aplicación 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
```
Busque la dirección URL de la aplicación implementada en la salida del terminal desde el az webapp up comando y vaya a la aplicación en el explorador web.
```
az webapp browse
```
En la aplicación web, escriba un mensaje en el cuadro de texto y seleccione Enviar. Proporcione a la aplicación unos segundos para responder con el mensaje de Azure OpenAI.

La aplicación ahora está implementada y conectada a Azure OpenAI con identidad administrada.

Preguntas más frecuentes

¿Cómo puedo conectarse a OpenAI en lugar de Azure OpenAI?
¿Puedo conectarse a Azure OpenAI con una clave de API en lugar de una identidad administrada?
¿Cómo funciona DefaultAzureCredential?

¿Cómo puedo conectarse a OpenAI en lugar de Azure OpenAI?

Para conectarse a OpenAI en lugar de Azure OpenAI, use el código siguiente:

from openai import OpenAI

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

Para más información, consulte Cómo cambiar entre los puntos de conexión de OpenAI y Azure OpenAI con Python.

Important

Al trabajar con secretos de conexión como claves de API en App Service, debe usar referencias de Azure Key Vault en lugar de almacenar secretos directamente en el código. Esta práctica garantiza que la información confidencial permanece segura y se administra de forma centralizada.

¿Puedo conectarse a Azure OpenAI con una clave de API en lugar de una identidad administrada?

Sí, puede conectarse a Azure OpenAI mediante una clave de API en lugar de una identidad administrada. El SDK de Azure OpenAI y el kernel semántico admiten este enfoque.

Para más información sobre el uso de claves de API con kernel semántico, consulte Introducción al kernel semántico.
Para más información sobre el uso de claves de API con la biblioteca cliente de Azure OpenAI, consulte Uso de la API de respuestas de Azure OpenAI.

Important

Al trabajar con secretos de conexión como claves de API en App Service, debe usar referencias de Key Vault en lugar de almacenar secretos directamente en el código. Esta práctica garantiza que la información confidencial permanece segura y se administra de forma centralizada.

¿Cómo funciona DefaultAzureCredential?

Simplifica DefaultAzureCredential la autenticación seleccionando automáticamente el mejor método de autenticación disponible.

Durante el desarrollo local, después de ejecutar az login, DefaultAzureCredential utiliza tus credenciales de la CLI de Azure local.
En el caso de las implementaciones de Azure App Service, usa DefaultAzureCredential la identidad administrada de la aplicación para la autenticación segura sin contraseña.

Este enfoque permite que el código se ejecute de forma segura y sin problemas en entornos locales y en la nube sin modificaciones.

Comentarios

¿Le ha resultado útil esta página?

Last updated on 2026-03-24