Condividi tramite

Esercitazione: Creare un chatbot con il servizio app di Azure e Azure OpenAI (Express.js)

In questa esercitazione si creerà un'applicazione di intelligenza artificiale intelligente integrando Azure OpenAI con un'applicazione Node.js e distribuendola nel servizio app di Azure. Si creerà un'app Express con una visualizzazione e un controller che invia richieste di completamento della chat a un modello in Azure OpenAI.

Screenshot che mostra il chatbot in esecuzione nel servizio app di Azure.

In questa esercitazione si apprenderà come:

  • Creare una risorsa OpenAI di Azure e distribuire un modello linguistico.
  • Creare un'applicazione Express.js che si connette ad Azure OpenAI.
  • Distribuire l'applicazione nel servizio app di Azure.
  • Implementare l'autenticazione sicura senza password sia nell'ambiente di sviluppo che in Azure.

Prerequisiti

1. Creare una risorsa OpenAI di Azure

In questa sezione si useranno GitHub Codespaces per creare una risorsa Azure OpenAI con Azure CLI.

  1. Passare a GitHub Codespaces e accedere con l'account GitHub.

  2. Trovare il modello Vuoto di GitHub e selezionare Usa questo modello per creare un nuovo spazio di codice vuoto.

  3. Nel terminale Codespace installare l'interfaccia della riga di comando di Azure:

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

  4. Accedere all'account Azure:

    az login

    Seguire le istruzioni nel terminale per l'autenticazione.

  5. Impostare le variabili di ambiente per il nome del gruppo di risorse, il nome del servizio OpenAI di Azure e la posizione:

    export RESOURCE_GROUP="<group-name>"
export OPENAI_SERVICE_NAME="<azure-openai-name>"
export APPSERVICE_NAME="<app-name>"
export LOCATION="eastus2"

    Importante

    L'area è fondamentale perché è associata alla disponibilità a livello di area del modello scelto. La disponibilità del modello e il tipo di distribuzione variano da un'area all'altra. Questa esercitazione usa gpt-4o-mini, disponibile nel tipo di distribuzione Standard eastus2. Se si esegue la distribuzione in un'area diversa, questo modello potrebbe non essere disponibile o potrebbe richiedere un livello diverso. Prima di modificare le aree, consultare la tabella di riepilogo del modello e la disponibilità dell'area per verificare il supporto del modello nell'area preferita.

  6. Creare un gruppo di risorse e una risorsa OpenAI di Azure con un dominio personalizzato, quindi aggiungere un modello 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

Dopo aver creato una risorsa OpenAI di Azure, si creerà un'applicazione Web per interagire con essa.

2. Creare e configurare un'app Web Express.js

  1. Nel terminale Codespace creare un modello di Express.js nell'area di lavoro e provare a eseguirlo per la prima volta.

    npx express-generator . --view ejs
npm audit fix --force
npm install && npm start

    Verrà visualizzata una notifica in GitHub Codespaces che indica che l'app è disponibile in una porta specifica. Selezionare Apri nel browser per avviare l'app in una nuova scheda del browser.

  2. Tornare al terminale Codespace, arrestare l'app con CTRL+C.

  3. Installare le dipendenze NPM per l'uso di Azure OpenAI:

    npm install openai @azure/openai @azure/identity

  4. Aprire views/index.ejs e sostituirlo con il codice seguente per una semplice interfaccia di chat.

    <!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body class="bg-light">
    <div class="container py-4">
      <h1 class="mb-4"><%= title %></h1>
      <div class="card mb-3">
        <div class="card-body" style="min-height: 80px;">
          <form action="/chat" method="POST" class="d-flex gap-2 mb-3">
            <input type="text" name="message" class="form-control" placeholder="Type your message..." autocomplete="off" required />
            <button type="submit" class="btn btn-primary">Send</button>
          </form>
          <% if (aiMessage) { %>
            <div class="mb-2">
              <span class="fw-bold text-success">AI:</span>
              <span class="ms-2"><%= aiMessage %></span>
            </div>
          <% } %>
        </div>
      </div>
    </div>
  </body>
</html>

  5. Aprire route/index.js e sostituirlo con il codice seguente per una semplice chiamata di completamento della chat con Azure OpenAI:

    var express = require('express');
var router = express.Router();
const { AzureOpenAI } = require('openai');
const { getBearerTokenProvider, DefaultAzureCredential } = require('@azure/identity');

const endpoint = process.env.AZURE_OPENAI_ENDPOINT;
const deployment = 'gpt-4o-mini';
const apiVersion = '2024-10-21';

const credential = new DefaultAzureCredential();
const scope = 'https://cognitiveservices.azure.com/.default';
const azureADTokenProvider = getBearerTokenProvider(credential, scope);

// Initialize Azure OpenAI client using Microsoft Entra authentication
const openai = new AzureOpenAI({ endpoint, azureADTokenProvider, deployment, apiVersion });

router.get('/', function(req, res, next) {
  res.render('index', { title: 'Express Chat', aiMessage: null });
});

router.post('/chat', async function(req, res, next) {
  const userMessage = req.body.message;
  if (!userMessage) {
    return res.redirect('/');
  }
  let aiMessage = '';
  try {
    // Call Azure OpenAI chat completion
    const result = await openai.chat.completions.create({
      model: deployment,
      messages: [
        { role: 'system', content: 'You are a helpful assistant.' },
        { role: 'user', content: userMessage }
      ],
    });
    aiMessage = result.choices[0]?.message?.content || '';
  } catch (err) {
    aiMessage = 'Error: Unable to get response from Azure OpenAI.';
  }
  res.render('index', { title: 'Express Chat', aiMessage });
});

module.exports = router;

  6. Nel terminale recuperare l'endpoint OpenAI:

    az cognitiveservices account show \
  --name $OPENAI_SERVICE_NAME \
  --resource-group $RESOURCE_GROUP \
  --query properties.endpoint \
  --output tsv

  7. Esegui di nuovo l'app aggiungendo AZURE_OPENAI_ENDPOINT con il suo valore dall'output della CLI:

    AZURE_OPENAI_ENDPOINT=<output-from-previous-cli-command> npm start

  8. Selezionare Apri nel browser per avviare l'app in una nuova scheda del browser. Inviare una domanda e verificare se viene visualizzato un messaggio di risposta.

3. Distribuire nel servizio app di Azure e configurare la connessione OpenAI

Ora che l'app funziona in locale, è possibile distribuirla nel servizio app di Azure e configurare una connessione del servizio ad Azure OpenAI usando l'identità gestita.

  1. Innanzitutto, distribuisci l'app su Azure App Service usando il comando Azure CLI az webapp up. Questo comando crea una nuova app Web e distribuisce il codice:

    az webapp up \
  --resource-group $RESOURCE_GROUP \
  --location $LOCATION \
  --name $APPSERVICE_NAME \
  --plan $APPSERVICE_NAME \
  --sku B1 \
  --os-type Linux \
  --track-status false

    Il completamento di questo comando potrebbe richiedere alcuni minuti. Crea una nuova app Web nello stesso gruppo di risorse della risorsa OpenAI.

  2. Dopo aver distribuito l'app, creare una connessione al servizio tra l'app Web e la risorsa OpenAI di Azure usando l'identità gestita:

    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

    Questo comando crea una connessione tra l'app Web e la risorsa OpenAI di Azure tramite:

    • Generazione dell'identità gestita assegnata dal sistema per l'app Web.
    • Aggiunta del ruolo Collaboratore di Servizi cognitivi OpenAI all'identità gestita per la risorsa Azure OpenAI.
    • Aggiunta dell'impostazione dell'app AZURE_OPENAI_ENDPOINT per l'app Web.

  3. Aprire l'app Web distribuita nel browser. Trovare l'URL dell'app Web distribuita nell'output del terminale. Apri il browser web e naviga verso di esso.

    az webapp browse

  4. Digitare un messaggio nella casella di testo e selezionare Invia e assegnare all'app alcuni secondi la risposta con il messaggio da Azure OpenAI.

    Screenshot che mostra il chatbot in esecuzione nel servizio app di Azure.

L'app viene ora distribuita e connessa ad Azure OpenAI con identità gestita.

Domande frequenti

Cosa accade se si vuole connettersi a OpenAI anziché ad Azure OpenAI?

Per connettersi invece a OpenAI, usare il codice seguente:

const { OpenAI } = require('openai');

const client = new OpenAI({
  apiKey: "<openai-api-key>",
});

Per altre informazioni, vedere Autenticazione api OpenAI.

Quando si usano segreti di connessione nel servizio app, è consigliabile usare i riferimenti a Key Vault anziché archiviare i segreti direttamente nella codebase. Ciò garantisce che le informazioni riservate rimangano sicure e gestite centralmente.

È invece possibile connettersi ad Azure OpenAI con una chiave API?

Sì, è possibile connettersi ad Azure OpenAI usando una chiave API anziché un'identità gestita. Per altre informazioni, vedere la guida introduttiva di Azure OpenAI JavaScript.

Quando si usano segreti di connessione nel servizio app, è consigliabile usare i riferimenti a Key Vault anziché archiviare i segreti direttamente nella codebase. Ciò garantisce che le informazioni riservate rimangano sicure e gestite centralmente.

Come funziona DefaultAzureCredential in questa esercitazione?

Semplifica DefaultAzureCredential l'autenticazione selezionando automaticamente il metodo di autenticazione migliore disponibile:

  • Durante lo sviluppo locale: dopo aver eseguito az login, usa le credenziali della CLI di Azure locale.
  • Quando viene distribuito nel servizio app di Azure: usa l'identità gestita dell'app per l'autenticazione sicura e senza password.

Questo approccio consente di eseguire il codice in modo sicuro e senza problemi in ambienti locali e cloud senza modifiche.

Passaggi successivi

  • Last updated on