Condividi tramite

Aggiornare l'app Chat per usare il front-end JavaScript con il back-end Python

L'app Chat è un'applicazione di riferimento che illustra come usare il servizio Azure OpenAI. Ogni architettura di riferimento del linguaggio di programmazione offre funzionalità leggermente diverse. Questo articolo descrive come usare il front-end JavaScript con il back-end Python.

Combinando e abbinando il front-end e il back-end, è possibile creare un'applicazione multilanguage che usa il meglio di entrambi i mondi.

  • Demo - Video su come configurare il front-end JavaScript con back-end Python

Questo articolo fa parte di una raccolta di articoli che illustrano come creare un'app di chat usando il servizio Azure OpenAI e Ricerca di intelligenza artificiale di Azure. Altri articoli della raccolta includono:

  • .NET
  • Java
  • Python

Nota

Questo articolo utilizza uno o più modelli di app AI come base per gli esempi e le linee guida nell’articolo. I modelli di app di intelligenza artificiale offrono implementazioni di riferimento ben gestite e facili da distribuire per garantire un punto di partenza di alta qualità per le app di intelligenza artificiale.

Prerequisiti

Distribuire le due architetture di riferimento usando i seguenti articoli. Assicurarsi di usare la stessa sottoscrizione e la stessa area per entrambe le distribuzioni. La distribuzione potrebbe richiedere fino a 20 minuti. Lascia le distribuzioni attive; non completare la sezione Pulizia delle risorse fino a quando non hai finito con questo articolo.

  • Distribuire l'app di chat JavaScript usando questo articolo
  • it-IT: Distribuire l'app di chat Python usando questo articolo

Ottenere gli URL per il front-end e il back-end

Dopo aver distribuito le due architetture di riferimento, sono state distribuite due app full-stack. Per usare il front-end JavaScript con il back-end Python, è necessario ottenere gli URL per il front-end JS e il back-end PY e configurarli nell'altra app.

Ogni repository dovrebbe essere in un ambiente di sviluppo separato, sia in locale che in Codespaces.

Impostare nel back-end Python l'URL del front-end JavaScript

  1. Nell'ambiente di sviluppo JavaScript ottenere l'URL per il front-end JavaScript eseguendo il comando seguente:

    azd env get-values | grep WEBAPP_URI

    Questo comando ottiene tutte le variabili di ambiente cloud e i filtri per la variabile WEBAPP_URI. Assicurarsi che l'URL non termini con una barra, /.

  2. Copia l'URL.

  3. Nell'ambiente di sviluppo Python impostare l'URL per il front-end JavaScript eseguendo il comando seguente:

    azd env set ALLOWED_ORIGIN <FRONTEND-URL>

  4. Nell'ambiente di sviluppo Python ridistribuire il back-end Python eseguendo il comando seguente:

    azd up

Impostare l'URL back-end Python nel front-end JavaScript

  1. Nell'ambiente di sviluppo Python ottenere l'URL per il back-end Python eseguendo il comando seguente:

    azd env get-values | grep BACKEND_URI

    Questo comando ottiene tutte le variabili di ambiente cloud e filtra la variabile BACKEND_URI. Assicurarsi che l'URL non finisca con una barra, /.

  2. Copia l'URL.

  3. Nell'ambiente di sviluppo JavaScript impostare l'URL per il back-end Python eseguendo il comando seguente:

    azd env set BACKEND_URI <BACKEND_URI>

  4. Nell'ambiente di sviluppo Python ridistribuire il back-end Python eseguendo il comando seguente nell'ambiente di sviluppo Python:

    azd up

Usare il front-end JavaScript con il back-end Python

L'app Python utilizza un'area tematica sui vantaggi delle risorse umane mentre l'app JavaScript utilizza un'area tematica immobiliare. Ora che le app sono connesse, è possibile usare il front-end per chiedere i vantaggi delle risorse umane. Le domande suggerite includono:

  • Cosa è incluso nel piano Northwind Health Plus che non è standard?
  • Cosa accade in una verifica delle prestazioni?
  • Che cosa fa un Product Manager?

Pulire le risorse

Al termine delle app, è possibile eliminare le risorse per evitare di incorrere in costi aggiuntivi.

Risoluzione dei problemi

  • Se viene visualizzato un errore, esaminare gli URL immessi nell'ambiente. Assicurati che non finiscano con una barra, /.

Passaggi successivi