Aan de slag met Azure OpenAI met assistenten en functieoproepen in JavaScript

In dit artikel leest u hoe u snel aan de slag kunt gaan met de serverloze Azure OpenAI-assistent. In dit voorbeeld wordt een assistent-app geïmplementeerd met behulp van JavaScript, Azure OpenAI Service-assistenten met functieaanroepen en Azure Functions.

Architectuuroverzicht

Met Azure OpenAI-assistenten kunt u AI-assistenten maken die zijn afgestemd op uw behoeften via aangepaste instructies en uitgebreid met geavanceerde hulpprogramma's zoals code-interpreter en aangepaste functies. In dit artikel bieden we een uitgebreid overzicht van hoe u aan de slag gaat met de Api voor assistenten.

Diagram met architectuur van client-naar back-end-app.

Deze toepassing is gebouwd rond twee hoofdonderdelen:

• Een eenvoudige HTML-pagina met vanille CSS- en JavaScript-bestanden en gehost in Azure Static Web Apps.

• Een serverloze API die is gebouwd met Azure Functions en met behulp van openAI JavaScript SDK. De serverloze app verzendt de definitie van de assistenten, inclusief de functie-aanroep naar het OpenAI-eindpunt. Het eindpunt reageert met de aanroep van de follow-upfunctie en de parameters die nodig zijn om die aanroep te voltooien.

  • De functieaanroep van het voorbeeld simuleert een API-aanroep door een willekeurige aandelen tickerwaarde te genereren op basis van het aandelensymbool dat naar de Azure-functie wordt verzonden. Deze simulatie kan worden vervangen door een externe API in uw oplossing.

  Diagram van Azure Functions-integratie met Azure OpenAI, waar Azure OpenAI opvolgende functienamen kan retourneren die door Azure Functions moeten worden aangeroepen.

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 Administrator voor gebruikerstoegang of Eigenaar.
3. Een 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 Administrator voor gebruikerstoegang of Eigenaar.
3. Azure Developer CLI
4. Docker Desktop - Start Docker Desktop als deze nog niet wordt uitgevoerd
5. Git
6. Visual Studio Code
7. Dev-containerextensie

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)

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-openai-assistant-javascript GitHub-opslagplaats.

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

   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.

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. Maak een fork van de voorbeeldopslagplaats door deze koppeling Azure-Samples/azure-openai-assistant-javascript te selecteren.

2. Kloon de forkopslagplaats. Vervang door <YOUR-GITHUB-ACCOUNT> de naam van uw GitHub-account.

   git clone https://github.com/<YOUR-GITHUB-ACCOUNT>/azure-openai-assistant-javascript
   

3. Open Visual Studio Code in de nieuwe map.

   cd azure-openai-assistant-javascript
   code .
   

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

5. 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.

   Schermopname van de menuoptie om een nieuwe terminal te openen.

6. 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.

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

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

9. 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 functie-app te implementeren in Azure. Met de volgende stappen doorloopt u het proces voor het implementeren van het voorbeeld in Azure.

De app Assistenten 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 assistenttoepassing in een browser te openen.

De assistent-app gebruiken

U kunt de assistent-app gebruiken om de beurskoers van MSFT. Met de volgende stappen doorloopt u het proces voor het gebruik van de assistent-app. De assistent kan u de antwoorden per e-mail sturen. Aangezien de functie voor het verzenden van e-mail niet is geconfigureerd, wijzigt u de prompt om die instructie niet te gebruiken.

1. Kopieer en plak de volgende prompt in de browser:

   Based on the latest financial data and current stock market trends, can you provide a detailed analysis of Microsoft's current state? Please include insights into their recent performance, market position, and future outlook. Additionally, retrieve and include the latest closing price of Microsoft's stock using its ticker symbol (MSFT). 
   

2. Selecteer de knop Run (Uitvoeren). Uw resultaten moeten er ongeveer uitzien als in het volgende antwoord.

   Schermopname van het eerste antwoord van de assistent-app.

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 uw momenteel uitgevoerde Codespaces die afkomstig zijn uit de Azure-Samples/azure-openai-assistant-javascript GitHub-opslagplaats.

   Schermopname van alle actieve Codespaces, inclusief hun status en sjablonen.

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

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.

   Schermopname van de optie Opdrachtpalet om de huidige map in uw lokale omgeving opnieuw te 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.

Gerelateerde inhoud

• Wat is de Api voor Azure OpenAI-assistenten?
• Aan de slag met het evalueren van antwoorden in een chat-app in JavaScript