Aan de slag met het voorbeeld van een JavaScript Enterprise-chat met behulp van RAG

In dit artikel leest u hoe u het voorbeeld van de Enterprise-chat-app voor JavaScript implementeert en uitvoert. In dit voorbeeld wordt een chat-app geïmplementeerd met behulp van JavaScript, Azure OpenAI Service en Rag (Retrieval Augmented Generation) in Azure AI Search om antwoorden te krijgen over huureigenschappen. De chat-app voor huureigenschappen wordt gezaaid met gegevens uit Markdown-bestanden (*.md), waaronder een privacybeleid, servicevoorwaarden en ondersteuning.

• Demo JavaScript - fullstack-video
• Demo JavaScript - front-end met Python-back-endvideo

Nu beginnen

Door de instructies in dit artikel te volgen, gaat u het volgende doen:

• Een chat-app implementeren in Azure.
• Krijg antwoorden over website-informatie over huureigenschappen.
• Wijzig de instellingen om het gedrag van reacties te wijzigen.

Zodra u dit artikel hebt voltooid, kunt u beginnen met het wijzigen van het nieuwe project met uw aangepaste code en gegevens.

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:

• .NET
• Java
• Python

Architectuuroverzicht

In het volgende diagram ziet u een eenvoudige architectuur van de chat-app:

De voorbeeldtoepassing voor chatten is gebouwd voor een fictief bedrijf met de naam Contoso Real Estate en de intelligente chat-ervaring stelt klanten in staat om ondersteuningsvragen te stellen over het gebruik van de producten. De voorbeeldgegevens bevatten een set documenten waarin de servicevoorwaarden, het privacybeleid en een ondersteuningshandleiding worden beschreven. De documenten worden tijdens de implementatie opgenomen in de architectuur

De toepassing wordt gemaakt van meerdere onderdelen, waaronder:

• Search-service: de back-endservice die de zoek- en ophaalmogelijkheden biedt.
• Indexeerservice: de service die de gegevens indexeert en de zoekindexen maakt.
• Web-app: de front-endwebtoepassing die de gebruikersinterface biedt en de interactie tussen de gebruiker en de back-endservices organiseert.

Kosten

De meeste resources in deze architectuur gebruiken een prijscategorie basic of verbruik. De prijzen voor verbruik zijn gebaseerd op gebruik, wat betekent dat u alleen betaalt voor wat u gebruikt. Om dit artikel te voltooien, worden er kosten in rekening gebracht, maar dit is minimaal. Wanneer u klaar bent met het artikel, kunt u de resources verwijderen om te stoppen met het maken van kosten.

Meer informatie over kosten in de voorbeeldopslagplaats.

Vereisten

Er is een ontwikkelcontaineromgeving beschikbaar met alle afhankelijkheden die nodig zijn om dit artikel te voltooien. U kunt de ontwikkelcontainer uitvoeren in GitHub Codespaces (in een browser) of lokaal met behulp van Visual Studio Code.

Als u dit artikel wilt gebruiken, hebt u de volgende vereisten nodig:

Codespaces (aanbevolen)

1. Een Azure-abonnement - Een gratis abonnement maken
2. Azure-accountmachtigingen: uw Azure-account moet beschikken over Microsoft.Authorization/roleAssignments/write-machtigingen, zoals Gebruikerstoegang Beheer istrator of Eigenaar.
3. Toegang verleend aan Azure OpenAI in het gewenste Azure-abonnement. Op dit moment wordt alleen toegang tot deze service verleend door een aanvraag te doen. U kunt toegang tot Azure OpenAI aanvragen door het formulier in te vullen op https://aka.ms/oai/access. Open een probleem op deze opslagplaats om contact met ons op te stellen als u een probleem hebt.
4. GitHub-account

Visual Studio Code

1. Een Azure-abonnement - Een gratis abonnement maken
2. Azure-accountmachtigingen: uw Azure-account moet beschikken over Microsoft.Authorization/roleAssignments/write-machtigingen, zoals Gebruikerstoegang Beheer istrator of Eigenaar.
3. Toegang verleend aan Azure OpenAI in het gewenste Azure-abonnement. Op dit moment wordt alleen toegang tot deze service verleend door een aanvraag te doen. U kunt toegang tot Azure OpenAI aanvragen door het formulier in te vullen op https://aka.ms/oai/access. Open een probleem op deze opslagplaats om contact met ons op te stellen als u een probleem hebt.
4. Azure Developer CLI
5. Docker Desktop - Start Docker Desktop als deze nog niet wordt uitgevoerd
6. Visual Studio Code
7. Dev-containerextensie

Open ontwikkelomgeving

Begin nu met een ontwikkelomgeving waarop alle afhankelijkheden zijn geïnstalleerd om dit artikel te voltooien.

GitHub Codespaces (aanbevolen)

GitHub Codespaces voert een ontwikkelcontainer uit die wordt beheerd door GitHub met Visual Studio Code voor het web als de gebruikersinterface. Voor de eenvoudigste ontwikkelomgeving gebruikt u GitHub Codespaces zodat u de juiste ontwikkelhulpprogramma's en afhankelijkheden vooraf hebt geïnstalleerd om dit artikel te voltooien.

Belangrijk

Alle GitHub-accounts kunnen Codespaces elke maand maximaal 60 uur gratis gebruiken met 2 kernexemplaren. Zie GitHub Codespaces maandelijks inbegrepen opslag- en kernuren voor meer informatie.

1. Start het proces om een nieuwe GitHub Codespace te maken op de main vertakking van de Azure-Samples/azure-search-openai-javascript GitHub-opslagplaats.

2. Klik met de rechtermuisknop op de volgende knop en selecteer De koppeling Openen in nieuwe vensters om zowel de ontwikkelomgeving als de documentatie tegelijkertijd beschikbaar te maken.

   Dit project openen in GitHub Codespaces

3. Controleer op de pagina Codespace maken de configuratie-instellingen voor codespace en selecteer vervolgens Nieuwe codespace maken

   

4. Wacht tot de coderuimte is gestart. Dit opstartproces kan enkele minuten duren.

5. Meld u in de terminal onderaan het scherm aan bij Azure met de Azure Developer CLI.

   azd auth login
   

6. Kopieer de code uit de terminal en plak deze in een browser. Volg de instructies voor verificatie met uw Azure-account.

7. De resterende taken in dit artikel vinden plaats in de context van deze ontwikkelingscontainer.

Visual Studio Code

Voor de Dev Containers-extensie voor Visual Studio Code moet Docker op uw lokale computer worden geïnstalleerd. De extensie host de ontwikkelcontainer lokaal met behulp van de Docker-host met de juiste ontwikkelhulpprogramma's en afhankelijkheden die vooraf zijn geïnstalleerd om dit artikel te voltooien.

1. Open Visual Studio Code in de context van een lege map.

2. Zorg ervoor dat de Dev Containers-extensie is geïnstalleerd in Visual Studio Code.

3. Open een nieuwe terminal in de editor.

   Tip

   U kunt het hoofdmenu gebruiken om naar de menuoptie Terminal te navigeren en vervolgens de optie Nieuwe terminal te selecteren.

   

4. Meld u aan bij Azure met de Azure Developer CLI.

   azd auth login
   

   Kopieer de code uit de terminal en plak deze in een browser. Volg de instructies voor verificatie met uw Azure-account.

5. Maak een map en initialiseer deze om het voorbeeldproject te gebruiken met Azure Developer CLI:

   azd init -t azure-search-openai-javascript
   

   U hoeft deze opslagplaats niet te klonen.

6. Open het opdrachtenpalet, zoek naar de Dev Containers-opdrachten en selecteer vervolgens Dev Containers: Opnieuw openen in container.

   Tip

   Visual Studio Code kan u mogelijk automatisch vragen om de bestaande map in een ontwikkelingscontainer opnieuw te openen. Dit is functioneel gelijk aan het gebruik van het opdrachtpalet om de huidige werkruimte in een container opnieuw te openen.

7. Open het Terminal-venster opnieuw (Ctrl + `) en laat het geopend.

8. De resterende oefeningen in dit project vinden plaats in de context van deze ontwikkelingscontainer.

Implementeren en uitvoeren

De voorbeeldopslagplaats bevat alle code- en configuratiebestanden die u nodig hebt om een chat-app te implementeren in Azure. Met de volgende stappen doorloopt u het proces voor het implementeren van het voorbeeld in Azure.

Chat-app implementeren in Azure

Belangrijk

Voor Azure-resources die in deze sectie zijn gemaakt, worden directe kosten in rekening gebracht, voornamelijk op basis van de Azure AI Search-resource. Deze resources kunnen kosten genereren, zelfs als u de opdracht onderbreekt voordat deze volledig wordt uitgevoerd.

1. Voer de volgende Azure Developer CLI-opdracht uit om de Azure-resources in te richten en de broncode te implementeren:

   azd up
   

2. Wanneer u wordt gevraagd een omgevingsnaam in te voeren, moet u deze kort en klein houden. Bijvoorbeeld: myenv. Deze wordt gebruikt als onderdeel van de naam van de resourcegroep.

3. Wanneer u hierom wordt gevraagd, selecteert u een abonnement waarin u de resources wilt maken.

4. Wanneer u de eerste keer wordt gevraagd om een locatie te selecteren, selecteert u een locatie bij u in de buurt. Deze locatie wordt gebruikt voor de meeste resources, waaronder hosting.

5. Als u wordt gevraagd om een locatie voor het OpenAI-model, selecteert u een locatie bij u in de buurt. Als dezelfde locatie beschikbaar is als uw eerste locatie, selecteert u die.

6. Wacht totdat de app is geïmplementeerd. Het kan 5-10 minuten duren voordat de implementatie is voltooid.

7. Nadat de toepassing is geïmplementeerd, ziet u een URL die wordt weergegeven in de terminal.

8. Selecteer die URL die is gelabeld Deploying service web om de chattoepassing in een browser te openen.

   

Chat-app gebruiken om antwoorden te krijgen uit Markdown-bestanden

De chat-app wordt vooraf geladen met huurgegevens uit een markdown-bestandscatalogus. U kunt de chat-app gebruiken om vragen te stellen over het verhuurproces. Met de volgende stappen doorloopt u het proces voor het gebruik van de chat-app.

1. Selecteer of voer in de browser het restitutiebeleid in het tekstvak onder aan de pagina in.

   

2. Selecteer in het antwoord de optie Denkproces weergeven.

   

3. Gebruik in het rechterdeelvenster de tabbladen om te begrijpen hoe het antwoord is gegenereerd.

   Tabblad	Beschrijving
   Gedachteproces	Dit is een script van de interacties in chat. U kunt de systeemprompt () en uw gebruikersvraag (content) bekijken.content
   Ondersteunende inhoud	Dit omvat de informatie om uw vraag en het bronmateriaal te beantwoorden. Het aantal bronmateriaalvermeldingen wordt vermeld in de instellingen voor ontwikkelaars. De standaardwaarde is 3.
   Gegevensvermelding	Hiermee wordt de oorspronkelijke pagina weergegeven die de bronvermelding bevat.

4. Wanneer u klaar bent, selecteert u de knop Verbergen die wordt aangeduid met een X boven de tabbladen.

Instellingen voor chat-apps gebruiken om het gedrag van reacties te wijzigen

De intelligentie van de chat-app wordt bepaald door het OpenAI-model en de instellingen die worden gebruikt om met het model te communiceren.

Instelling	Beschrijving
Promptsjabloon overschrijven	Dit is de prompt die wordt gebruikt om het antwoord te genereren.
Dit aantal zoekresultaten ophalen	Dit is het aantal zoekresultaten dat wordt gebruikt om het antwoord te genereren. U kunt deze bronnen zien die worden geretourneerd in het gedachtenproces en de tabbladen Ondersteunende inhoud van de bronvermelding.
Categorie uitsluiten	Dit is de categorie documenten die zijn uitgesloten van de zoekresultaten.
Semantische ranker gebruiken voor ophalen	Dit is een functie van Azure AI Search die machine learning gebruikt om de relevantie van zoekresultaten te verbeteren.
Querycontextuele samenvattingen gebruiken in plaats van hele documenten	Wanneer beide Use semantic ranker en Use query-contextual summaries worden gecontroleerd, gebruikt de LLM onderschrift s die zijn geëxtraheerd uit belangrijke passages, in plaats van alle passages, in de hoogste gerangschikte documenten.
Vervolgvragen voorstellen	Laat de chat-app opvolgende vragen voorstellen op basis van het antwoord.
Ophaalmodus	Vectoren + tekst betekent dat de zoekresultaten zijn gebaseerd op de tekst van de documenten en de insluitingen van de documenten. Vectoren betekent dat de zoekresultaten zijn gebaseerd op de insluitingen van de documenten. Tekst betekent dat de zoekresultaten zijn gebaseerd op de tekst van de documenten.
Antwoorden op voltooiing van de Stream-chat	Stream-antwoord in plaats van te wachten totdat het volledige antwoord beschikbaar is voor een antwoord.

Met de volgende stappen doorloopt u het proces voor het wijzigen van de instellingen.

1. Selecteer in de browser het tabblad Ontwikkelaars Instellingen.

2. Schakel de contextuele samenvattingen van query's gebruiken in plaats van het selectievakje in en stel dezelfde vraag opnieuw.

   What happens if the rental doesn't fit the description?
   

   De chat is geretourneerd met een beknopter antwoord, zoals het volgende.

Resources opschonen

Azure-resources opschonen

De Azure-resources die in dit artikel zijn gemaakt, worden gefactureerd voor uw Azure-abonnement. Als u deze resources in de toekomst niet meer nodig hebt, verwijdert u deze om te voorkomen dat er meer kosten in rekening worden gebracht.

Voer de volgende Azure Developer CLI-opdracht uit om de Azure-resources te verwijderen en de broncode te verwijderen:

azd down --purge

GitHub Codespaces opschonen

GitHub Codespaces

Als u de GitHub Codespaces-omgeving verwijdert, zorgt u ervoor dat u de hoeveelheid gratis rechten per kernuren kunt maximaliseren die u voor uw account krijgt.

Belangrijk

Zie GitHub Codespaces maandelijks inbegrepen opslag- en kernuren voor meer informatie over de rechten van uw GitHub-account.

1. Meld u aan bij het GitHub Codespaces-dashboard (https://github.com/codespaces).

2. Zoek de codespaces die momenteel worden uitgevoerd vanuit de Azure-Samples/azure-search-openai-javascript GitHub-opslagplaats.

   

3. Open het contextmenu voor de coderuimte en selecteer Vervolgens Verwijderen.

   

Visual Studio Code

U hoeft niet per se uw lokale omgeving op te schonen, maar u kunt de actieve ontwikkelcontainer stoppen en terugkeren naar het uitvoeren van Visual Studio Code in de context van een lokale werkruimte.

1. Open het opdrachtenpalet, zoek naar de Dev Containers-opdrachten en selecteer vervolgens Dev Containers: Map lokaal opnieuw openen.

   

Tip

Visual Studio Code stopt de actieve ontwikkelingscontainer, maar de container bestaat nog steeds in Docker in een gestopte status. U hebt altijd de mogelijkheid om de containerinstantie, containerinstallatiekopieën en volumes van Docker te verwijderen om meer ruimte vrij te maken op uw lokale computer.

Hulp vragen

Deze voorbeeldopslagplaats biedt informatie over probleemoplossing.

Als het uitgegeven probleem niet is opgelost, meldt u het probleem aan bij de problemen van de opslagplaats.

Volgende stappen

• GitHub-opslagplaats voor enterprise-chat-apps
• Een chat-app bouwen met de best practice-oplossingsarchitectuur van Azure OpenAI
• Toegangsbeheer in Generatieve AI-apps met Azure AI Search
• Een OpenAI-oplossing bouwen die gereed is voor ondernemingen met Azure API Management
• Outperforming vector search with hybrid retrieval and ranking capabilities (Outperforming Vector Search met hybride ophaal- en classificatiemogelijkheden)