Partager via

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

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 un contrôleur Spring Boot qui envoie une requête à Azure OpenAI et envoie la réponse au navigateur.

Conseil / Astuce

Bien que ce tutoriel utilise Spring Boot, les concepts fondamentaux de la création d’une application de conversation avec Azure OpenAI s’appliquent à n’importe quelle application web Java. Si vous utilisez une autre option d’hébergement sur App Service, telle que Tomcat ou JBoss EAP, vous pouvez adapter les modèles d’authentification et l’utilisation du Kit de développement logiciel (SDK) Azure présentés ici à votre infrastructure préférée.

Capture d’écran montrant un 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 Spring Boot qui se connecte à Azure OpenAI.
  • Utilisez l’injection de dépendances pour configurer le client 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.

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 Spring Boot

  1. Dans votre terminal Codespace, clonez l’exemple REST Spring Boot sur l’espace de travail et essayez de l’exécuter la première fois.

    git clone https://github.com/rd-1-2022/rest-service .
mvn spring-boot: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. Lorsque vous voyez la page d’erreur d’étiquette blanche, l’application Spring Boot fonctionne.

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

  3. Ouvrez pom.xml et ajoutez les dépendances suivantes :

    <dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
<dependency>
    <groupId>com.azure</groupId>
    <artifactId>azure-ai-openai</artifactId>
    <version>1.0.0-beta.16</version>
</dependency>
<dependency>
    <groupId>com.azure</groupId>
    <artifactId>azure-core</artifactId>
    <version>1.55.3</version>
</dependency>
<dependency>
    <groupId>com.azure</groupId>
    <artifactId>azure-identity</artifactId>
    <version>1.16.0</version>
    <scope>compile</scope>
</dependency>

  4. Dans le même répertoire que Application.java (src/main/java/com/example/restservice) ajoutez un fichier Java appelé ChatController.java et copiez le contenu suivant :

    package com.example.restservice;

import java.util.ArrayList;
import java.util.List;

import org.springframework.beans.factory.annotation.Value;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;

import com.azure.ai.openai.OpenAIAsyncClient;
import com.azure.ai.openai.models.ChatChoice;
import com.azure.ai.openai.models.ChatCompletionsOptions;
import com.azure.ai.openai.models.ChatRequestMessage;
import com.azure.ai.openai.models.ChatRequestUserMessage;
import com.azure.ai.openai.models.ChatResponseMessage;
import com.azure.core.credential.TokenCredential;
import com.azure.identity.DefaultAzureCredentialBuilder;

@Configuration
class AzureConfig {
    // Reads the endpoint from environment variable AZURE_OPENAI_ENDPOINT
    @Value("${azure.openai.endpoint}")
    private String openAiEndpoint;

    // Provides a credential for local dev and production
    @Bean
    public TokenCredential tokenCredential() {
        return new DefaultAzureCredentialBuilder().build();
    }

    // Configures the OpenAIAsyncClient bean
    @Bean
    public OpenAIAsyncClient openAIClient(TokenCredential tokenCredential) {
        return new com.azure.ai.openai.OpenAIClientBuilder()
                .endpoint(openAiEndpoint)
                .credential(tokenCredential)
                .buildAsyncClient();
    }
}

@Controller
public class ChatController {
    private final OpenAIAsyncClient openAIClient;

    // Inject the OpenAIAsyncClient bean
    public ChatController(OpenAIAsyncClient openAIClient) {
        this.openAIClient = openAIClient;
    }

    @RequestMapping(value = "/", method = RequestMethod.GET)
    public String chatFormOrWithMessage(Model model, @RequestParam(value = "userMessage", required = false) String userMessage) {
        String aiResponse = null;
        if (userMessage != null && !userMessage.isBlank()) {

            // Create a list of chat messages
            List<ChatRequestMessage> chatMessages = new ArrayList<>();
            chatMessages.add(new ChatRequestUserMessage(userMessage));

            // Send the chat completion request
            String deploymentName = "gpt-4o-mini";
            StringBuilder serverResponse = new StringBuilder();
            var chatCompletions = openAIClient.getChatCompletions(
                deploymentName, 
                new ChatCompletionsOptions(chatMessages)
            ).block();
            if (chatCompletions != null) {
                for (ChatChoice choice : chatCompletions.getChoices()) {
                    ChatResponseMessage message = choice.getMessage();
                    serverResponse.append(message.getContent());
                }
            }
            aiResponse = serverResponse.toString();
        }
        model.addAttribute("aiResponse", aiResponse);
        return "chat";
    }
}

    Conseil / Astuce

    Pour réduire les fichiers de ce didacticiel, le code combine spring @Configuration et @Controller classes dans un fichier. En production, vous séparez normalement la configuration et la logique métier pour la maintenance.

  5. Sous src/main/resources, créez un répertoire de modèles et ajoutez un chat.html avec le contenu suivant pour l’interface de conversation :

    <!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Azure OpenAI Chat</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container py-4">
    <h2 class="mb-4">Azure OpenAI Chat</h2>
    <form action="/" method="get" class="d-flex mb-3">
        <input name="userMessage" class="form-control me-2" type="text" placeholder="Type your message..." autocomplete="off" required />
        <button class="btn btn-primary" type="submit">Send</button>
    </form>
    <div class="mb-3">
        <div th:if="${aiResponse}" class="alert alert-info">AI: <span th:text="${aiResponse}"></span></div>
    </div>
</div>
</body>
</html>

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

  7. 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> mvn spring-boot:run

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

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

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 web 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. Créez un package de déploiement avec Maven.

    mvn clean package

  2. 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 \
  --runtime "JAVA:21" \
  --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.

  3. 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 \
  --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.

  4. Ouvrez l’application web déployée dans le navigateur.

    az webapp browse

  5. 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 un 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. Notez qu’il accède au AZURE_OPENAI_ENDPOINT paramètre d’application via l’injection de @Configuration .

Questions fréquentes

Pourquoi l’exemple utilise-t-il @Configuration et spring beans pour le client OpenAI ?

L’utilisation d’un haricot Spring pour garantir OpenAIAsyncClient que :

  • Toutes les propriétés de configuration (comme le point de terminaison) sont chargées et injectées par Spring.
  • Les informations d’identification et le client sont créées une fois que le contexte de l’application est entièrement initialisé.
  • L’injection de dépendances est utilisée, qui est le modèle standard et le plus robuste dans les applications Spring.

Le client asynchrone est plus robuste, en particulier lors de l’utilisation DefaultAzureCredential avec l’authentification Azure CLI. Le synchrone OpenAIClient peut rencontrer des problèmes liés à l’acquisition de jetons dans certains scénarios de développement local. L’utilisation du client asynchrone évite ces problèmes et est l’approche recommandée.

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 :

OpenAIClient client = new OpenAIClientBuilder()
    .credential(new KeyCredential(<openai-api-key>))
    .buildClient();

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.

Étapes suivantes

  • Last updated on