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

Artikel
05/21/2024

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-front-end configureren met Python-back-endvideo

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 maximaal 20 minuten duren. Laat de implementaties staan; Voltooi de sectie Resources opschonen pas nadat u klaar bent met dit artikel.

De JavaScript-chat-app implementeren 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.

U moet elke opslagplaats in een afzonderlijke ontwikkelomgeving hebben, lokaal in Codespaces.

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

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
```
Met deze opdracht worden alle omgevingsvariabelen in de cloud en filters voor de WEBAPP_URI variabele opgeslagen. Zorg ervoor dat de URL niet eindigt op een slash, /.
Kopieer de URL.
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>
```
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

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 omgevingsvariabelen in de cloud en filters voor de BACKEND_URI variabele opgeslagen. Zorg ervoor dat de URL niet eindigt op een slash, /.
Kopieer de URL.
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>
```
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?

Resources opschonen

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, /.

Delen via