Aan de slag met de chat met uw eigen gegevensvoorbeeld voor JavaScript
In dit artikel wordt uitgelegd hoe u de Chat with your data sample for JavaScript kunt implementeren en uitvoeren. In dit voorbeeld wordt een chat-app geïmplementeerd met behulp van JavaScript, Azure OpenAI Service en Retrieval Augmented Generation (RAG) in Azure AI Search om antwoorden te krijgen over huurwoningen. De chat-app voor huureigenschappen maakt gebruik van gegevens uit Markdown-bestanden (*.md), waaronder een privacybeleid, gebruikersvoorwaarden en ondersteuningsinformatie.
- Demo JavaScript - volledige stack video
- Demo JavaScript - front-end met Python-back-end video
Door de instructies in dit artikel te volgen, gaat u het volgende doen:
- Een chat-app implementeren in Azure.
- Krijg antwoorden over informatie op de website over huurwoningen.
- 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:
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.
Architectuuroverzicht
In het volgende diagram ziet u een eenvoudige architectuur van de chat-app:
Diagram met architectuur van client-naar back-end-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.
Diagram met Azure-services en hun integratiestroom voor de front-end-app, de zoekfunctie en de documentingestie.
Kosten
De meeste resources in deze architectuur gebruiken een prijscategorie basic of verbruiks-tarief. De prijzen voor verbruik zijn gebaseerd op gebruik, wat betekent dat u alleen betaalt voor wat u gebruikt. Om dit artikel te voltooien, brengen de middelen kosten met zich mee, maar deze zijn minimaal. Wanneer u klaar bent met het artikel, kunt u de resources verwijderen om kosten te vermijden.
Meer informatie over kosten in de voorbeeldrepository.
Vereisten
Een ontwikkelcontaineromgeving is 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)
- ** Visual Studio Code
- Een Azure-abonnement - Maak er gratis een aan
- Azure-accountmachtigingen: uw Azure-account moet beschikken over Microsoft.Authorization/roleAssignments/write-machtigingen, zoals Gebruikerstoegangsbeheerder of Eigenaar.
- GitHub-account
Open ontwikkelomgeving
Gebruik de volgende instructies om een vooraf geconfigureerde ontwikkelomgeving met alle vereiste afhankelijkheden te implementeren om dit artikel te voltooien.
- GitHub Codespaces (aanbevolen)
- Visual Studio Code
GitHub Codespaces voert een ontwikkelcontainer uit 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 twee kernexemplaren. Voor meer informatie, zie GitHub Codespaces maandelijks inbegrepen opslag- en kernuren.
Start het proces om een nieuwe GitHub Codespace te maken op de
main
vertakking van deAzure-Samples/azure-search-openai-javascript
GitHub-opslagplaats.Klik met de rechtermuisknop op de volgende knop en selecteer Koppeling openen in een nieuw venster om zowel de ontwikkelomgeving als de documentatie tegelijkertijd beschikbaar te maken.
Op de Codespace maken-pagina, controleer de configuratie-instellingen van de codespace en selecteer vervolgens Nieuwe codespace maken.
Schermopname van het bevestigingsscherm voordat u een nieuwe coderuimte aanmaakt.
Wacht tot de coderuimte start. Dit opstartproces kan enkele minuten duren.
Meld u in de terminal onderaan het scherm aan bij Azure met de Azure Developer CLI.
azd auth login --use-device-code
Kopieer de code uit de terminal en plak deze in een browser. Volg de instructies voor verificatie met uw Azure-account.
De resterende taken in dit artikel 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
Azure-resources die in deze sectie worden gemaakt veroorzaken direct kosten, vooral vanwege de Azure AI Search-resource. Deze resources kunnen kosten genereren, zelfs als u de opdracht onderbreekt voordat deze volledig wordt uitgevoerd.
Voer de volgende Azure Developer CLI-opdracht uit om de Azure-resources in te richten en de broncode te implementeren:
azd up
Als u wordt gevraagd een omgevingsnaam in te voeren, moet u deze kort en klein houden. Bijvoorbeeld:
myenv
. Het wordt gebruikt als onderdeel van de naam van de resourcegroep.Wanneer u hierom wordt gevraagd, selecteert u een abonnement waarin u de resources wilt maken.
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.
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.
Wacht totdat de app is geïmplementeerd. Het kan 5-10 minuten duren voordat de implementatie is voltooid.
Nadat de toepassing is geïmplementeerd, ziet u een URL die wordt weergegeven in de terminal.
Selecteer die URL met het label
Deploying service web
om de chattoepassing in een browser te openen.Schermopname van een chat-app in de browser, dat verschillende suggesties voor chatinvoer toont en het chattekstvak om een vraag in te voeren.
Chat-app gebruiken om antwoorden te krijgen uit Markdown-bestanden
De chat-app is vooraf beladen 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.
Selecteer of voer in de browser het restitutiebeleid in het tekstvak onder aan de pagina in.
Selecteer in het antwoord de optie Denkproces weergeven.
Schermopname van het eerste antwoord van de chat-app met 'Toon gedachtegang' gemarkeerd in een rood vak.
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 ( content
) en uw gebruikersvraag (content
) bekijken.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. Citatie Hiermee wordt de oorspronkelijke pagina weergegeven die de bronvermelding bevat. 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.
Schermopname van chatontwikkelaarinstellingen.
Instelling | Beschrijving |
---|---|
Promptsjabloon vervangen | 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 in de gedachtenproces en ondersteunende inhoud-tabbladen 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 verhogen. |
Querycontextuele samenvattingen gebruiken in plaats van hele documenten | Wanneer zowel Use semantic ranker als Use query-contextual summaries zijn gecontroleerd, gebruikt de LLM bijschriften 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 het antwoord in plaats van te wachten totdat het volledige antwoord beschikbaar is. |
Met de volgende stappen doorloopt u het proces voor het wijzigen van de instellingen.
Selecteer in de browser het tabblad Instellingen voor ontwikkelaars.
Selecteer het selectievakje Gebruik query-contextuele samenvattingen in plaats van en stel de 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
De 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
Het opschonen van GitHub Codespaces
- GitHub Codespaces
- Visual Studio Code
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
Voor meer informatie over de toewijzingen van uw GitHub-account, zie GitHub Codespaces maandelijks inbegrepen opslag- en kernuren.
Meld u aan bij het GitHub Codespaces-dashboard.
Zoek uw momenteel draaiende Codespaces die afkomstig zijn uit de
Azure-Samples/azure-search-openai-javascript
GitHub-opslagplaats.Schermopname van alle actieve Codespaces, inclusief hun status en sjablonen.
Open het contextmenu voor de coderuimte en selecteer Verwijderen.
Schermopname van het contextmenu voor één coderuimte met de optie Verwijderen gemarkeerd.
Hulp vragen
Deze voorbeeldrepository biedt probleemoplossingsinformatie.
Als uw probleem niet is opgelost, meldt u het bij de Issues van de opslagplaats.
Volgende stappen
- Verkrijg de broncode voor het voorbeeld dat in dit artikel wordt gebruikt
- Een chat-app bouwen met Azure OpenAI: best practice-oplossingsarchitectuur
- Toegangscontrole in Generatieve AI-apps met Azure AI Search
- Bouw een enterprise-gereed OpenAI-oplossing met Azure API Management
- Uitblinken in vectorzoekopdrachten met hybride ophaal- en rangschikkingsmogelijkheden
- Meer informatie over hoe AZD wordt gebruikt in deze sjabloon:
- Tech community blogbericht
- Reactor-videoserie