Tutoriel : Exécuter un chatbot dans App Service avec une extension side-car Phi-4 (Express.js)

Ce tutoriel vous guide tout au long du déploiement d’une application de chatbot basée sur Express.jsintégrée à l’extension sidecar Phi-4 sur Azure App Service. En suivant les étapes, vous allez apprendre à configurer une application web évolutive, à ajouter un side-car alimenté par l’IA pour les capacités conversationnelles améliorées et à tester les fonctionnalités du chatbot.

L’hébergement de votre propre modèle SLM (Small Language Model) offre plusieurs avantages :

Contrôle total de vos données. Les informations sensibles ne sont pas exposées aux services externes, ce qui est essentiel pour les industries avec des exigences de conformité strictes.
Les modèles auto-hébergés peuvent être affinés pour répondre à des cas d’usage spécifiques ou à des exigences spécifiques au domaine.
Latence réseau réduite et temps de réponse plus rapides pour une meilleure expérience utilisateur.
Contrôle total de l’allocation des ressources, ce qui garantit des performances optimales pour votre application.

Conditions préalables

Un compte Azure avec un abonnement actif.
Un compte GitHub.

Déployer l’exemple d’application

Dans le navigateur, accédez à l’exemple de référentiel d’applications.
Démarrez un nouvel espace de code à partir du référentiel.
Connectez-vous avec votre compte Azure :
```
az login
```
Ouvrez le terminal dans Codespace et exécutez les commandes suivantes :
```
cd use_sidecar_extension/expressapp
az webapp up --sku P3MV3
```

Cette commande de démarrage est une configuration courante pour le déploiement d’applications Express.js sur Azure App Service. Pour plus d’informations, consultez Déployer une application web Node.js dans Azure.

Ajouter l’extension side-car Phi-4

Dans cette section, vous allez ajouter l’extension side-car Phi-4 à votre application ASP.NET Core hébergée sur Azure App Service.

Accédez au portail Azure et accédez à la page de gestion de votre application.
Dans le menu de gauche, sélectionnez Déploiement>Centre de déploiement.
Sous l’onglet Conteneurs, sélectionnez Ajouter>une extension Sidecar.
Dans les options d’extension sidecar, sélectionnez IA : phi-4-q4-gguf (expérimental).
Fournissez un nom pour l’extension de side-car.
Sélectionnez Enregistrer pour appliquer la modification.
Attendez quelques minutes jusqu’à ce que l’extension de side-car se déploie. Continuez à sélectionner Actualiser jusqu’à ce que la colonne État affiche En cours d’exécution.

Cette extension side-car Phi-4 utilise une API d’achèvement de conversation comme OpenAI qui peut répondre à la réponse d’achèvement de conversation à http://localhost:11434/v1/chat/completions. Pour plus d’informations sur l’interaction avec l’API, consultez :

Tester le chatbot

Dans la page de gestion de votre application, dans le menu de gauche, sélectionnez Vue d’ensemble.
Sous Domaine par défaut, sélectionnez l’URL pour ouvrir votre application web dans un navigateur.
Vérifiez que l’application de chatbot est en cours d’exécution et répond aux entrées utilisateur.

Fonctionnement de l’exemple d’application

L'application de démonstration montre comment intégrer un service basé sur Express.jsavec l'extension sidecar de SLM. La SLMService classe encapsule la logique pour l’envoi de requêtes à l’API SLM et le traitement des réponses diffusées. Cette intégration permet à l’application de générer dynamiquement des réponses conversationnelles.

En regardant use_sidecar_extension/expressapp/src/services/slm_service.js, vous voyez que :

Le service envoie une requête POST au point de terminaison http://127.0.0.1:11434/v1/chat/completionsSLM.
```
this.apiUrl = 'http://127.0.0.1:11434/v1/chat/completions';
```

La charge utile POST inclut le message système et l’invite générée à partir du produit sélectionné et de la requête de l’utilisateur.

const requestPayload = {
  messages: [
    { role: 'system', content: 'You are a helpful assistant.' },
    { role: 'user', content: prompt }
  ],
  stream: true,
  cache_prompt: false,
  n_predict: 2048 // Increased token limit to allow longer responses
};

La requête POST diffuse la ligne de réponse par ligne. Chaque ligne est analysée pour extraire le contenu généré (ou jeton).

// Set up Server-Sent Events headers
res.setHeader('Content-Type', 'text/event-stream');
res.setHeader('Cache-Control', 'no-cache');
res.setHeader('Connection', 'keep-alive');
res.flushHeaders();

const response = await axios.post(this.apiUrl, requestPayload, {
  headers: { 'Content-Type': 'application/json' },
  responseType: 'stream'
});

response.data.on('data', (chunk) => {
  const lines = chunk.toString().split('\n').filter(line => line.trim() !== '');

  for (const line of lines) {
    let parsedLine = line;
    if (line.startsWith('data: ')) {
      parsedLine = line.replace('data: ', '').trim();
    }

    if (parsedLine === '[DONE]') {
      return;
    }

    try {
      const jsonObj = JSON.parse(parsedLine);
      if (jsonObj.choices && jsonObj.choices.length > 0) {
        const delta = jsonObj.choices[0].delta || {};
        const content = delta.content;

        if (content) {
          // Use non-breaking space to preserve formatting
          const formattedToken = content.replace(/ /g, '\u00A0');
          res.write(`data: ${formattedToken}\n\n`);
        }
      }
    } catch (parseError) {
      console.warn(`Failed to parse JSON from line: ${parsedLine}`);
    }
  }
});

Questions fréquentes

Comment le niveau tarifaire affecte-t-il les performances du side-car SLM ?
Comment utiliser mon propre side-car SLM ?

Comment le niveau tarifaire affecte-t-il les performances du side-car SLM ?

Étant donné que les modèles d’IA consomment des ressources considérables, choisissez le niveau tarifaire qui vous donne suffisamment de processeurs virtuels et de mémoire pour exécuter votre modèle spécifique. Pour cette raison, les extensions de side-car d’IA intégrées s’affichent uniquement lorsque l’application se trouve dans un niveau tarifaire approprié. Si vous créez votre propre conteneur sidecar SLM, vous devez également utiliser un modèle optimisé pour les performances CPU, car les paliers tarifaires App Service sont uniquement basés sur le processeur.

Par exemple, le modèle mini Phi-3 avec une longueur de contexte 4K de Hugging Face est conçu pour s’exécuter avec des ressources limitées et fournit un raisonnement mathématique et logique fort pour de nombreux scénarios courants. Il est également fourni avec une version optimisée pour le processeur. Dans App Service, nous avons testé le modèle sur tous les niveaux Premium et nous l’avons trouvé pour fonctionner correctement dans le niveau P2mv3 ou supérieur. Si vos besoins l’autorisent, vous pouvez l’exécuter à un niveau inférieur.

Comment utiliser mon propre side-car SLM ?

L’exemple de référentiel contient un exemple de conteneur de SLM que vous pouvez utiliser comme side-car. Il exécute une application FastAPI qui écoute sur le port 8000, comme spécifié dans son Dockerfile. L’application utilise ONNX Runtime pour charger le modèle Phi-3, puis transfère les données HTTP POST au modèle et transmet la réponse du modèle au client. Pour plus d’informations, consultez model_api.py.

Pour générer vous-même l’image sidecar, vous devez installer Docker Desktop localement sur votre ordinateur.

Clonez le référentiel localement.

git clone https://github.com/Azure-Samples/ai-slm-in-app-service-sidecar
cd ai-slm-in-app-service-sidecar

Passez au répertoire source de l’image Phi-3 et téléchargez le modèle localement à l’aide de l’interface CLI Huggingface.
```
cd bring_your_own_slm/src/phi-3-sidecar
huggingface-cli download microsoft/Phi-3-mini-4k-instruct-onnx --local-dir ./Phi-3-mini-4k-instruct-onnx
```
Le Dockerfile est configuré pour copier le modèle à partir de ./Phi-3-mini-4k-instruct-onnx.
Créez l’image Docker. Par exemple:
```
docker build --tag phi-3 .
```
Chargez l’image générée dans Azure Container Registry avec Push votre première image vers votre registre de conteneurs Azure à l’aide de l’interface de ligne de commande Docker.
Dans l’onglet Conteneurs du Centre> de déploiement(nouveau), sélectionnez Ajouter> unconteneur personnalisé et configurez le nouveau conteneur comme suit :
- Nom : phi-3
- Source d’image : Azure Container Registry
- Registre : votre registre
- Image : l’image chargée
- Balise : balise d’image souhaitée
- Port : 8000
Sélectionnez Appliquer.

Consultez bring_your_own_slm/src/webapp pour obtenir un exemple d’application qui interagit avec ce conteneur sidecar personnalisé.

Étapes suivantes

Tutoriel : Configurer un conteneur sidecar pour une application Linux dans Azure App Service

Commentaires

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

Last updated on 2025-11-18