Delen via

De Chat-app bijwerken om de JavaScript-front-end te gebruiken met de Python-back-end

De Chat-app is een referentietoepassing die laat zien hoe u de Azure OpenAI-service gebruikt. Elke referentiearchitectuur voor programmeertalen biedt iets andere functionaliteit. In dit artikel wordt beschreven hoe u de JavaScript-front-end gebruikt met de Python-back-end.

Door de front-end en back-end te combineren, kunt u een toepassing met meerdere talen maken die het beste van beide werelden gebruikt.

  • Demo - JavaScript-frontend configureren met Python-backend video

Dit artikel maakt deel uit van een verzameling artikelen die laten zien hoe u een chat-app bouwt met behulp van Azure OpenAI Service en Azure AI Search. Andere artikelen in de verzameling zijn:

Notitie

In dit artikel worden een of meer AI-app-sjablonen gebruikt als basis voor de voorbeelden en richtlijnen in het artikel. AI-app-sjablonen bieden u een goed onderhouden, eenvoudig te implementeren referentie-implementaties die u helpen een startpunt van hoge kwaliteit voor uw AI-apps te garanderen.

Vereisten

Implementeer de twee referentiearchitecturen met behulp van de volgende artikelen. Zorg ervoor dat u hetzelfde abonnement en dezelfde regio gebruikt voor beide implementaties. De implementatie kan tot 20 minuten duren. Laat de implementaties staan; voltooi de Resources opruimen sectie pas nadat je dit artikel hebt voltooid.

  • JavaScript-chat-app gebruiken met behulp van dit artikel
  • De Python-chat-app implementeren met behulp van dit artikel

De URL's voor de front-end en back-end ophalen

Nadat u de twee referentiearchitecturen hebt geïmplementeerd, hebt u twee volledige stack-apps geïmplementeerd. Als u de JavaScript-front-end wilt gebruiken met de Python-back-end, moet u de URL's voor de JS-front-end en de PY-back-end ophalen en deze configureren in de andere app.

Je moet elk repo in een afzonderlijke ontwikkelomgeving hebben, lokaal of in Codespaces.

Front-end-URL voor JavaScript instellen in python-back-end

  1. Haal in de JavaScript-ontwikkelomgeving de URL voor de JavaScript-front-end op door de volgende opdracht uit te voeren:

    azd env get-values | grep WEBAPP_URI

    Deze opdracht haalt alle omgevingsvariabelen in de cloud op en filtert op de WEBAPP_URI variabele. Zorg ervoor dat de URL niet eindigt op een slash, /.

  2. Kopieer de URL.

  3. Stel in de Python-ontwikkelomgeving de URL in voor de JavaScript-front-end door de volgende opdracht uit te voeren:

    azd env set ALLOWED_ORIGIN <FRONTEND-URL>

  4. Implementeer in de Python-ontwikkelomgeving de Python-back-end opnieuw door de volgende opdracht uit te voeren:

    azd up

Python-back-end-URL instellen in JavaScript-front-end

  1. Haal in de Python-ontwikkelomgeving de URL voor de Python-back-end op door de volgende opdracht uit te voeren:

    azd env get-values | grep BACKEND_URI

    Met deze opdracht worden alle cloud omgevingsvariabelen opgehaald en voor de BACKEND_URI variabele gefilterd. Zorg ervoor dat de URL niet eindigt met een schuine streep, /.

  2. Kopieer de URL.

  3. Stel in de JavaScript-ontwikkelomgeving de URL voor de Python-back-end in door de volgende opdracht uit te voeren:

    azd env set BACKEND_URI <BACKEND_URI>

  4. Implementeer in de Python-ontwikkelomgeving de Python-back-end opnieuw door de volgende opdracht uit te voeren in de Python-ontwikkelomgeving:

    azd up

De JavaScript-front-end gebruiken met de Python-back-end

De Python-app maakt gebruik van een onderwerpgebied voor HR-voordelen terwijl de JavaScript-app gebruikmaakt van een onderwerpgebied voor onroerend goed. Nu de apps zijn verbonden, kunt u de front-end gebruiken om te vragen over HR-voordelen. Voorgestelde vragen zijn onder andere:

  • Wat is opgenomen in mijn Northwind Health Plus-abonnement dat niet standaard is?
  • Wat gebeurt er in een prestatiebeoordeling?
  • Wat doet een Product Manager?

Opschonen van resources

Wanneer u klaar bent met de apps, kunt u de resources verwijderen om meer kosten te voorkomen.

  • Verwijder de JavaScript-app met deze instructies
  • Verwijder de Python-app met deze instructies

Probleemoplossing

  • Als er een fout optreedt, controleert u de URL's die u in de omgeving hebt ingevoerd. Zorg ervoor dat ze niet eindigen met een slash, /.

Volgende stappen