Condividi tramite

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

  • Articolo

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 - Configurare il front-end JavaScript con il video 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:

Nota

Questo articolo usa uno o più modelli di app di intelligenza artificiale 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. Lasciare invariate le distribuzioni; non completare la sezione Pulire le risorse fino a quando non si esegue questo articolo.

  • Distribuire l'app di chat JavaScript usando questo articolo
  • 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 deve essere presente in un ambiente di sviluppo separato, in locale in Codespaces.

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

  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 WEBAPP_URI variabile. Assicurarsi che l'URL non termina 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 i filtri per la WEBAPP_URI variabile. Assicurarsi che l'URL non termina 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 usa un'area di interesse dei vantaggi HR mentre l'app JavaScript usa un'area di interesse 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. Assicurarsi di non terminare con una barra, /.

Passaggi successivi