Partager via

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

Dans ce tutoriel, vous allez créer une application IA intelligente en intégrant Azure OpenAI à une application Java Spring Boot et en la déployant sur Azure App Service. Vous allez créer une page Razor qui envoie des demandes de complétion de conversation à un modèle d'Azure OpenAI et envoie la réponse vers la page.

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

Dans ce tutoriel, vous allez apprendre à :

  • Créer une ressource Azure OpenAI et déployer un modèle de langage
  • Créer une application Blazor avec Azure OpenAI
  • Déployer l’application sur Azure App Service
  • Implémenter l’authentification sans mot de passe à la fois dans l’environnement de développement et dans Azure

Conditions préalables

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 web Blazor

Dans cette section, vous allez créer une application web Blazor à l’aide de l’interface CLI .NET.

  1. Dans votre terminal Codespace, créez une application Blazor et essayez de l’exécuter pour la première fois.

    dotnet new blazor -o .
dotnet run

    Vous devez voir une notification dans GitHub Codespaces indiquant que l’application est disponible sur un port spécifique. Sélectionnez Ouvrir dans le navigateur pour lancer l’application dans un nouvel onglet de navigateur.

  2. De retour dans le terminal Codespace, arrêtez l’application avec Ctrl+C.

  3. Installez les packages NuGet requis pour utiliser Azure OpenAI :

    dotnet add package Azure.AI.OpenAI
dotnet add package Azure.Identity

  4. Ouvrez Components/Pages/Home.razor et remplacez son contenu par le code suivant pour un appel de flux de communication basique d'achèvement de conversation avec Azure OpenAI.

    @page "/"
@rendermode InteractiveServer
@using Azure.AI.OpenAI
@using Azure.Identity
@using OpenAI.Chat
@inject Microsoft.Extensions.Configuration.IConfiguration _config

<h3>Azure OpenAI Chat</h3>
<div class="mb-3 d-flex align-items-center" style="margin:auto;">
    <input class="form-control me-2" @bind="userMessage" placeholder="Type your message..." />
    <button class="btn btn-primary" @onclick="SendMessage">Send</button>
</div>
<div class="card p-3" style="margin:auto;">
    @if (!string.IsNullOrEmpty(aiResponse))
    {
        <div class="alert alert-info mt-3 mb-0">@aiResponse</div>
    }
</div>

@code {
    private string? userMessage;
    private string? aiResponse;

    private async Task SendMessage()
    {
        if (string.IsNullOrWhiteSpace(userMessage)) return;

        // Initialize the Azure OpenAI client
        var endpoint = new Uri(_config["AZURE_OPENAI_ENDPOINT"]!);
        var client = new AzureOpenAIClient(endpoint, new DefaultAzureCredential());
        var chatClient = client.GetChatClient("gpt-4o-mini");

        aiResponse = string.Empty;
        StateHasChanged();

        // Create a chat completion streaming request
        var chatUpdates = chatClient.CompleteChatStreamingAsync(
            [
                new UserChatMessage(userMessage)
            ]);

            await foreach(var chatUpdate in chatUpdates)
            {
                // Update the UI with the streaming response
                foreach(var contentPart in chatUpdate.ContentUpdate)
            {
                aiResponse += contentPart.Text;
                StateHasChanged();
            }
        }
    }
}

  5. 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

  6. Réexécutez l'application en ajoutant AZURE_OPENAI_ENDPOINT avec sa valeur à partir du résultat de la CLI :

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

  7. Sélectionnez Ouvrir dans le navigateur pour lancer l’application dans un nouvel onglet de navigateur.

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

L’application utilise DefaultAzureCredential, qui utilise automatiquement votre interface Azure CLI connectée à l’utilisateur pour l’authentification par jeton. Plus loin dans ce tutoriel, vous allez déployer votre application Blazor sur Azure App Service et la configurer pour vous connecter en toute sécurité à votre ressource Azure OpenAI à l’aide de l’identité managée. Le même élément DefaultAzureCredential dans votre code peut détecter l’identité gérée et l’utiliser pour l’authentification. Aucun code supplémentaire n’est nécessaire.

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.

    Votre application est désormais déployée et connectée à Azure OpenAI avec une identité managée. Il lit le AZURE_OPENAI_ENDPOINT paramètre d’application par le biais de l’injection IConfiguration .

  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, puis 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.

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 :

@using OpenAI.Client

var client = new OpenAIClient("<openai-api-key>");

Pour plus d’informations, consultez l’authentification de l’API OpenAI.

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.

Plus de ressources

  • Last updated on