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

Dans ce tutoriel, vous créez une application IA intelligente en intégrant Azure OpenAI à une application web Python et en la déployant sur Azure App Service. Vous créez une application Flask qui envoie des demandes d'achèvement de conversation à un modèle dans Azure OpenAI et se connecte au service à l’aide d’une identité managée.

Vous apprenez à :

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.

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

Prerequisites

Un compte Azure avec un abonnement actif
Un compte GitHub pour l’utilisation de GitHub Codespaces

1. Créer une ressource Azure OpenAI

Dans cette section, vous utilisez Azure CLI dans GitHub Codespaces pour créer une ressource Azure OpenAI.

Connectez-vous à GitHub Codespaces avec votre compte GitHub.
Sélectionnez Utiliser ce modèle dans la tuile Vierge pour créer un nouvel espace de code vierge.

Dans le terminal Codespace, installez Azure CLI.

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

Connectez-vous à votre compte Azure.
```
az login
```
Suivez les instructions du terminal pour vous authentifier.
Définissez des variables d’environnement en fournissant des noms pour votre groupe de ressources et le service Azure OpenAI et en définissant une région Azure appropriée comme emplacement.
```
export RESOURCE_GROUP="<group-name>"
export OPENAI_SERVICE_NAME="<azure-openai-name>"
export APPSERVICE_NAME="<app-name>"
export LOCATION="<azure-region>"
```
Important

L’emplacement est lié à la disponibilité régionale du modèle choisi. La disponibilité des types de modèle et de déploiement varie entre les régions Azure et les niveaux de facturation. Ce didacticiel utilise gpt-4o-mini, qui est disponible dans plusieurs régions sous le type de déploiement Standard.

Avant de sélectionner un emplacement, consultez la table de disponibilité récapitulative du modèle et de la région pour vérifier la prise en charge du modèle dans votre région préférée.

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

# 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

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

2. Créer et configurer une application Flask

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

Dans la racine de l’espace de travail, créez un fichier nommé app.py contenant 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()

Créez un répertoire de modèles et un fichier index.html dans celui-ci. Collez le code suivant pour créer 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>

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

Exécutez l’application en ajoutant AZURE_OPENAI_ENDPOINT avec la valeur de la sortie CLI précédente.
```
AZURE_OPENAI_ENDPOINT=<output-from-previous-cli-command> flask run
```
Sélectionnez Ouvrir dans le navigateur pour lancer l’application dans un nouvel onglet de navigateur. Envoyez une question pour voir un message de réponse.

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

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

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 dans le même groupe de ressources que votre ressource OpenAI et déploie votre code sur celui-ci. L’exécution de la commande peut prendre quelques instants.
```
az webapp up \
  --resource-group $RESOURCE_GROUP \
  --location $LOCATION \
  --name $APPSERVICE_NAME \
  --plan $APPSERVICE_NAME \
  --sku B1 \
  --os-type Linux \
  --track-status false
```
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. La commande suivante 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 Contributeur OpenAI Cognitive Services à l’identité managée pour la ressource Azure OpenAI.
- Ajout du paramètre d’application AZURE_OPENAI_ENDPOINT à votre application 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
```
Recherchez l’URL de votre application déployée dans la sortie du terminal à partir de la az webapp up commande, puis accédez à l’application dans votre navigateur web.
```
az webapp browse
```
Dans votre application web, entrez un message dans la zone de texte, puis sélectionnez Envoyer. Donnez à l’application quelques secondes pour répondre avec le message d’Azure OpenAI.

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

Questions fréquentes

Comment puis-je me connecter à OpenAI au lieu d’Azure OpenAI ?
Puis-je me connecter à Azure OpenAI avec une clé API au lieu d’une identité managée ?
Comment fonctionne DefaultAzureCredential ?

Comment puis-je me connecter à OpenAI au lieu d’Azure OpenAI ?

Pour vous connecter à OpenAI au lieu d’Azure OpenAI, 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.

Important

Lorsque vous utilisez des secrets de connexion tels que des clés API dans App Service, vous devez utiliser des références Azure Key Vault au lieu de stocker des secrets directement dans votre code. Cette pratique 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 au lieu d’une identité managée ?

Oui, vous pouvez vous connecter à Azure OpenAI à l’aide d’une clé API au lieu d’une identité managée. Le SDK Azure OpenAI et le noyau sémantique prennent en charge cette approche.

Pour plus d’informations sur l’utilisation de clés API avec le noyau sémantique, consultez Prise en main du noyau sémantique.
Pour plus d’informations sur l’utilisation des clés API avec la bibliothèque de client Azure OpenAI, consultez Utiliser l’API Réponses Azure OpenAI.

Important

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

Comment fonctionne DefaultAzureCredential ?

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

Pendant le développement local, après l’exécution az login, le DefaultAzureCredential utilise vos informations d'identification Azure CLI locales.
Pour les déploiements Azure App Service, l’application DefaultAzureCredential 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.

Commentaires

Cette page a-t-elle été utile ?

Last updated on 2026-03-24