Freigeben über

Tutorial: Ausführen eines Chatbots in App Service mit einer Phi-4-Sidecar-Erweiterung (Express.js)

Diese Anleitung führt Sie durch die Implementierung einer auf Express.jsbasierenden Chatbot-Anwendung, die in die Phi-4-Sidecar-Erweiterung auf Azure App Service integriert ist. Indem Sie die Schritte ausführen, erfahren Sie, wie Sie eine skalierbare Web-App einrichten, ein KI-gestütztes Sidecar für erweiterte Unterhaltungsfunktionen hinzufügen und die Funktionen des Chatbots testen.

Das Hosten Ihres eigenen kleinsprachigen Modells (SLM) bietet mehrere Vorteile:

  • Vollzugriff auf Ihre Daten. Vertrauliche Informationen werden nicht externen Diensten offengelegt, was für Branchen mit strengen Complianceanforderungen von entscheidender Bedeutung ist.
  • Selbst gehostete Modelle können optimiert werden, um bestimmte Anwendungsfälle oder domänenspezifische Anforderungen zu erfüllen.
  • Minimierte Netzwerklatenz und schnellere Reaktionszeiten für eine bessere Benutzererfahrung.
  • Vollständige Kontrolle über die Ressourcenzuordnung, um eine optimale Leistung für Ihre Anwendung sicherzustellen.

Voraussetzungen

Bereitstellen der Beispielanwendung

  1. Navigieren Sie im Browser zum Beispielanwendungs-Repository.

  2. Starten Sie einen neuen Codespace aus dem Repository.

  3. Melden Sie sich mit Ihrem Azure-Konto an:

    az login

  4. Öffnen Sie das Terminal im Codespace, und führen Sie die folgenden Befehle aus:

    cd use_sidecar_extension/expressapp
az webapp up --sku P3MV3

Dieser Startbefehl ist ein gängiges Setup für die Bereitstellung Express.js Anwendungen in Azure App Service. Weitere Informationen finden Sie unter Bereitstellen einer Node.js Web-App in Azure.

Hinzufügen der Phi-4-Sidecar-Erweiterung

In diesem Abschnitt fügen Sie die Phi-4-Sidecar-Erweiterung zu Ihrer ASP.NET Core-Anwendung hinzu, die auf Azure App Service gehostet wird.

  1. Navigieren Sie zum Azure-Portal, und wechseln Sie zur Verwaltungsseite Ihrer App.
  2. Wählen Sie im linken Menü Bereitstellung>Bereitstellungscenter aus.
  3. Wählen Sie auf der Registerkarte "Container" die Option"Sidecar-Erweiterung>" aus.
  4. Wählen Sie in den Optionen für Sidecar-Erweiterungen AI: phi-4-q4-gguf (Experimental) aus.
  5. Geben Sie einen Namen für die Sidecar-Erweiterung an.
  6. Klicken Sie auf Speichern, um die Änderungen zu übernehmen.
  7. Warten Sie einige Minuten, bis die Sidecar-Erweiterung bereitgestellt wurde. Wählen Sie Aktualisieren aus, bis die Spalte Status den Status Läuft anzeigt.

Diese Phi-4-Sidecar-Erweiterung verwendet eine Chatvervollständigungs-API wie OpenAI, die auf die Chatvervollständigungsantwort unter http://localhost:11434/v1/chat/completions reagieren kann. Weitere Informationen zur Interaktion mit der API finden Sie unter:

Testen des Chatbots

  1. Wählen Sie auf der Verwaltungsseite Ihrer App im linken Menü die Option "Übersicht" aus.

  2. Wählen Sie unter "Standarddomäne" die URL aus, um Ihre Web-App in einem Browser zu öffnen.

  3. Überprüfen Sie, ob die Chatbot-Anwendung ausgeführt wird und auf Benutzereingaben reagiert.

    Screenshot der Mode-Assistenten-App, die im Browser ausgeführt wird.

Funktionsweise der Beispielanwendung

Die Beispielanwendung veranschaulicht, wie sie einen Express.js-basierten Dienst in die SLM-Sidecar-Erweiterung integrieren. Die SLMService Klasse kapselt die Logik zum Senden von Anforderungen an die SLM-API und die Verarbeitung der gestreamten Antworten. Diese Integration ermöglicht der Anwendung das dynamische Generieren von Unterhaltungsantworten.

Wenn Sie in use_sidecar_extension/expressapp/src/services/slm_service.js suchen, sehen Sie Folgendes:

  • Der Dienst sendet eine POST-Anforderung an den SLM-Endpunkt http://127.0.0.1:11434/v1/chat/completions.

    this.apiUrl = 'http://127.0.0.1:11434/v1/chat/completions';

  • Die POST-Nutzlast enthält die Systemnachricht und die Eingabeaufforderung, die aus dem ausgewählten Produkt und der Benutzerabfrage erstellt wurde.

    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
};

  • Die POST-Anforderung streamt die Antwortzeile nach Zeile. Jede Zeile wird analysiert, um den generierten Inhalt (oder token) zu extrahieren.

    // 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}`);
    }
  }
});

Häufig gestellte Fragen

Wie wirkt sich die Preisstufe auf die Leistung des SLM-Sidecars aus?

Da KI-Modelle erhebliche Ressourcen verbrauchen, sollten Sie einen Tarif wählen, mit dem Sie über ausreichende vCPUs und Arbeitsspeicher verfügen, um Ihr spezifisches Modell auszuführen. Aus diesem Grund werden die integrierten KI-Sidecar-Erweiterungen nur angezeigt, wenn sich die App in einer geeigneten Preisstufe befindet. Wenn Sie Ihren eigenen SLM-Sidecar-Container erstellen, sollten Sie auch ein CPU-optimiertes Modell verwenden, da die Preisstufen für den App Service ausschließlich CPU-basiert sind.

Beispielsweise ist das Phi-3-Minimodell mit einer 4K-Kontextlänge von Hugging Face so konzipiert, dass sie mit begrenzten Ressourcen ausgeführt wird und eine starke mathematische und logische Begründung für viele gängige Szenarien bietet. Außerdem ist es in einer CPU-optimierten Version erhältlich. Im App-Dienst haben wir das Modell auf allen Premium-Stufen getestet und gefunden, dass es in der P2mv3-Stufe oder höher gut funktioniert. Wenn Ihre Anforderungen dies zulassen, können Sie es auch in einem niedrigeren Tarif ausführen.

Wie kann ich mein eigenes SLM-Sidecar verwenden?

Das Beispiel-Repository enthält einen SLM-Beispielcontainer, den Sie als Sidecar verwenden können. Er führt eine FastAPI-Anwendung aus, die auf Port 8000 lauscht, wie in der Dockerfile angegeben. Die Anwendung verwendet ONNX-Runtime zum Laden des Phi-3-Modells, leitet dann die HTTP-POST-Daten an das Modell weiter und streamt die Antwort vom Modell zurück an den Client. Weitere Informationen finden Sie unter model_api.py.

Um das Sidecar-Image selbst zu erstellen, müssen Sie Docker Desktop lokal auf Ihrem Computer installieren.

  1. Klonen Sie das Repository lokal.

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

  2. Wechseln Sie in das Quellverzeichnis des Phi-3-Bilds, und laden Sie das Modell lokal mithilfe der Huggingface CLI herunter.

    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

    Die Dockerfile ist so konfiguriert, dass das Modell aus ./Phi-3-mini-4k-instruct-onnx kopiert wird.

  3. Erstellen Sie das Docker-Image. Beispiel:

    docker build --tag phi-3 .

  4. Laden Sie das integrierte Image in die Azure-Containerregistrierung hoch, indem Sie Ihr erstes Image mithilfe der Docker CLI in Ihre Azure-Containerregistrierung übertragen.

  5. Wählen Sie auf der Registerkarte Deployment Center-Container>(neu) die Option"Benutzerdefinierten Container>" aus, und konfigurieren Sie den neuen Container wie folgt:

    • Name: phi-3
    • Imagequelle: Azure Container Registry
    • Registrierung: Ihre Registrierung
    • Bild: das hochgeladene Bild
    • Tag: das gewünschte Bildtag
    • Port: 8000

  6. Wählen Sie Anwenden.

Eine Beispielanwendung, die mit diesem benutzerdefinierten Sidecar-Container interagiert, finden Sie unter bring_your_own_slm/src/webapp.

Nächste Schritte

Lernprogramm: Konfigurieren eines Sidecar-Containers für eine Linux-App in Azure App Service