Partager via

Tutoriel : Créer un chatbot avec Azure App Service et Azure OpenAI (Flask)

Dans ce tutoriel, vous allez créer une application IA intelligente en intégrant Azure OpenAI à une application web Python et en la déployant sur Azure App Service. Vous allez créer une application web Flask qui envoie des demandes de complétion de chat à un modèle dans Azure OpenAI.

Capture d’écran montrant le chatbot s’exécutant dans Azure App Service.

Dans ce tutoriel, vous allez apprendre à :

  • Créez une ressource Azure OpenAI et déployez un modèle de langage.
  • Créez une application Flask qui se connecte à Azure OpenAI.
  • Déployez l’application sur Azure App Service.
  • Implémentez l’authentification sécurisée sans mot de passe dans l’environnement de développement et dans Azure.

Prerequisites

1. Créer une ressource Azure OpenAI

Dans cette section, vous allez utiliser GitHub Codespaces pour créer une ressource Azure OpenAI avec Azure CLI.

  1. Accédez à GitHub Codespaces et connectez-vous avec votre compte GitHub.

  2. Recherchez le modèle vide par GitHub et sélectionnez Utiliser ce modèle pour créer un espace de code vide.

  3. Dans le terminal Codespace, installez Azure CLI :

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

  4. Connectez-vous à votre compte Azure :

    az login

    Suivez les instructions du terminal pour vous authentifier.

  5. Définissez des variables d’environnement pour le nom de votre groupe de ressources, le nom du service Azure OpenAI et l’emplacement :

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

    Important

    La région est essentielle, car elle est liée à la disponibilité régionale du modèle choisi. La disponibilité des modèles et la disponibilité des types de déploiement varient d’une région à l’autre. Ce didacticiel utilise gpt-4o-mini, qui est disponible dans eastus2 sous le type de déploiement Standard. Si vous effectuez un déploiement dans une autre région, ce modèle peut ne pas être disponible ou nécessiter un niveau différent. Avant de modifier les régions, consultez la table récapitulative du modèle et la disponibilité des régions pour vérifier la prise en charge du modèle dans votre région préférée.

  6. Créez un groupe de ressources et une ressource Azure OpenAI avec un domaine personnalisé, puis ajoutez un modèle gpt-4o-mini :

    # 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 to 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

Maintenant que vous disposez d’une ressource Azure OpenAI, vous allez créer une application web pour interagir avec elle.

2. Créer et configurer une application Flask

  1. Dans votre terminal Codespace, créez un environnement virtuel et installez les packages PIP dont vous avez besoin.

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

  2. Dans la racine de l’espace de travail, créez un app.py et copiez-y le code suivant pour un appel de complétion de chat simple avec 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. Créez un répertoire de modèles et un fichier index.html dans celui-ci. Copiez le code suivant pour une interface de conversation simple :

    <!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. Dans le terminal, récupérez votre point de terminaison OpenAI :

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

  5. Exécutez l’application en ajoutant AZURE_OPENAI_ENDPOINT avec sa valeur à partir de la sortie CLI :

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

  6. Sélectionnez Ouvrir dans le navigateur pour lancer l’application dans un nouvel onglet de navigateur. Envoyez une question et vérifiez si vous recevez un message de réponse.

3. Déployer sur Azure App Service et configurer la connexion OpenAI

Maintenant que votre application fonctionne localement, déployons-la sur Azure App Service et configurez une connexion de service à Azure OpenAI à l’aide d’une identité managée.

  1. Tout d’abord, déployez votre application sur Azure App Service à l’aide de la commande az webapp upAzure CLI. Cette commande crée une application web et déploie votre code sur celui-ci :

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

    L’exécution de cette commande peut prendre quelques minutes. Il crée une application web dans le même groupe de ressources que votre ressource OpenAI.

  2. Une fois l’application déployée, créez une connexion de service entre votre application web et la ressource Azure OpenAI à l’aide de l’identité managée :

    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

    Cette commande crée une connexion entre votre application web et la ressource Azure OpenAI par :

    • Génération d’une identité managée affectée par le système pour l’application web.
    • Ajout du rôle de Contributeur Cognitive Services OpenAI à l’identité managée pour la ressource Azure OpenAI.
    • Ajout du paramètre d’application AZURE_OPENAI_ENDPOINT à votre application web.

  3. Ouvrez l’application web déployée dans le navigateur. Recherchez l’URL de l’application web déployée dans la sortie du terminal. Ouvrez votre navigateur web et accédez-y.

    az webapp browse

  4. Tapez un message dans la zone de texte et sélectionnez Envoyer, puis donnez à l’application quelques secondes pour répondre avec le message d’Azure OpenAI.

    Capture d’écran montrant le chatbot s’exécutant dans Azure App Service.

Votre application est désormais déployée et connectée à Azure OpenAI avec une identité managée.

Questions fréquentes

Que se passe-t-il si je souhaite me connecter à OpenAI au lieu d’Azure OpenAI ?

Pour vous connecter à OpenAI à la place, utilisez le code suivant :

from openai import OpenAI

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

Pour plus d’informations, consultez Comment basculer entre les points de terminaison OpenAI et Azure OpenAI avec Python.

Lorsque vous utilisez des secrets de connexion dans App Service, vous devez utiliser des références Key Vault au lieu de stocker des secrets directement dans votre codebase. Cela garantit que les informations sensibles restent sécurisées et sont gérées de manière centralisée.

Puis-je me connecter à Azure OpenAI avec une clé API à la place ?

Oui, vous pouvez vous connecter à Azure OpenAI à l’aide d’une clé API au lieu d’une identité managée. Cette approche est prise en charge par les kits SDK Azure OpenAI et le noyau sémantique.

Lorsque vous utilisez des secrets de connexion dans App Service, vous devez utiliser des références Key Vault au lieu de stocker des secrets directement dans votre codebase. Cela garantit que les informations sensibles restent sécurisées et sont gérées de manière centralisée.

Comment DefaultAzureCredential fonctionne-t-il dans ce tutoriel ?

Simplifie l’authentification DefaultAzureCredential en sélectionnant automatiquement la meilleure méthode d’authentification disponible :

  • Pendant le développement local : une fois que vous avez exécuté az login, il utilise vos informations d’identification Azure CLI locales.
  • Lorsqu’elle est déployée sur Azure App Service : elle utilise l’identité managée de l’application pour une authentification sécurisée sans mot de passe.

Cette approche permet à votre code de s’exécuter en toute sécurité et en toute transparence dans les environnements locaux et cloud sans modification.

Étapes suivantes

  • Last updated on