Kom igång med Azure OpenAI med assistenter och funktionsanrop i JavaScript

Den här artikeln visar hur du distribuerar och kör den serverlösa snabbstarten för Azure OpenAI Assistant. Det här exemplet implementerar en assistentapp med hjälp av JavaScript, Azure OpenAI Service-assistenter med funktionsanrop och Azure Functions.

Arkitekturöversikt

Med Azure OpenAI Assistants kan du skapa AI-assistenter som är skräddarsydda för dina behov med hjälp av anpassade instruktioner och utökade med avancerade verktyg som kodtolkare och anpassade funktioner. I den här artikeln ger vi en djupgående genomgång av hur du kommer igång med API:et Assistenter.

Det här programmet bygger på två huvudkomponenter:

• En enkel HTML-sida med en vanilj-CSS och JavaScript-filer och som finns i Azure Static Web Apps.

• Ett serverlöst API som skapats med Azure Functions och använder OpenAI JavaScript SDK. Den serverlösa appen skickar assistentdefinitionen inklusive funktionsanropet till OpenAI-slutpunkten. Slutpunkten svarar med uppföljningsfunktionsanropet och de parametrar som behövs för att slutföra anropet.

  • Exemplets funktionsanrop simulerar ett API-anrop genom att generera ett slumpmässigt aktievärde baserat på aktiesymbolen som skickas till Azure-funktionen. Den här simuleringen kan ersättas med ett fjärranslutet API i din lösning.

  

Förutsättningar

En utvecklingscontainermiljö är tillgänglig med alla beroenden som krävs för att slutföra den här artikeln. Du kan köra utvecklingscontainern i GitHub Codespaces (i en webbläsare) eller lokalt med hjälp av Visual Studio Code.

Om du vill använda den här artikeln behöver du följande krav:

Kodområden (rekommenderas)

1. En Azure-prenumeration – Skapa en kostnadsfritt
2. Azure-kontobehörigheter – Ditt Azure-konto måste ha behörigheten Microsoft.Authorization/roleAssignments/write, till exempel administratör för användaråtkomst eller ägare.
3. Åtkomst beviljad till Azure OpenAI i den önskade Azure-prenumerationen. För närvarande måste man ansöka om att få åtkomst till den här tjänsten. Du kan ansöka om åtkomst till Azure OpenAI genom att fylla i formuläret på https://aka.ms/oai/access. Öppna ett problem på den här lagringsplatsen för att kontakta oss om du har ett problem.
4. GitHub-konto

Visual Studio Code

1. En Azure-prenumeration – Skapa en kostnadsfritt
2. Azure-kontobehörigheter – Ditt Azure-konto måste ha behörigheten Microsoft.Authorization/roleAssignments/write, till exempel administratör för användaråtkomst eller ägare.
3. Åtkomst beviljad till Azure OpenAI i den önskade Azure-prenumerationen. För närvarande måste man ansöka om att få åtkomst till den här tjänsten. Du kan ansöka om åtkomst till Azure OpenAI genom att fylla i formuläret på https://aka.ms/oai/access. Öppna ett problem på den här lagringsplatsen för att kontakta oss om du har ett problem.
4. Azure Developer CLI
5. Docker Desktop – starta Docker Desktop om det inte redan körs
6. Git
7. Visual Studio Code
8. Dev Container-tillägg

Öppna utvecklingsmiljön

Börja nu med en utvecklingsmiljö som har alla beroenden installerade för att slutföra den här artikeln.

GitHub Codespaces (rekommenderas)

GitHub Codespaces kör en utvecklingscontainer som hanteras av GitHub med Visual Studio Code för webben som användargränssnitt. För den enklaste utvecklingsmiljön använder du GitHub Codespaces så att du har rätt utvecklarverktyg och beroenden förinstallerade för att slutföra den här artikeln.

Viktigt!

Alla GitHub-konton kan använda Codespaces i upp till 60 timmar kostnadsfritt varje månad med 2 kärninstanser. Mer information finns i GitHub Codespaces månadsvis inkluderade lagrings- och kärntimmar.

1. Starta processen för att skapa ett nytt GitHub Codespace på grenen main av Azure-Samples/azure-openai-assistant-javascript GitHub-lagringsplatsen.

2. Högerklicka på följande knapp och välj Öppna länk i nya fönster för att ha både utvecklingsmiljön och dokumentationen tillgänglig samtidigt.

   

3. På sidan Skapa kodområde granskar du konfigurationsinställningarna för kodområdet och väljer sedan Skapa nytt kodområde

4. Vänta tills kodområdet har startats. Den här startprocessen kan ta några minuter.

5. Logga in på Azure med Azure Developer CLI i terminalen längst ned på skärmen.

   azd auth login
   

6. Kopiera koden från terminalen och klistra sedan in den i en webbläsare. Följ anvisningarna för att autentisera med ditt Azure-konto.

7. De återstående uppgifterna i den här artikeln sker i samband med den här utvecklingscontainern.

Visual Studio Code

Dev Containers-tillägget för Visual Studio Code kräver att Docker installeras på den lokala datorn. Tillägget är värd för utvecklingscontainern lokalt med Docker-värden med rätt utvecklarverktyg och beroenden förinstallerade för att slutföra den här artikeln.

1. Förgrena exempellagringsplatsen genom att välja den här länken Azure-Samples/azure-openai-assistant-javascript .

2. Klona förgreningslagringsplatsen. Ersätt <YOUR-GITHUB-ACCOUNT> med ditt GitHub-kontonamn.

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

3. Öppna Visual Studio Code i den nya mappen.

   cd azure-openai-assistant-javascript
   code .
   

4. Kontrollera att tillägget Dev Containers är installerat i Visual Studio Code.

5. Öppna en ny terminal i redigeraren.

   Dricks

   Du kan använda huvudmenyn för att navigera till menyalternativet Terminal och sedan välja alternativet Ny terminal .

   

6. Logga in på Azure med Azure Developer CLI.

   azd auth login
   

   Kopiera koden från terminalen och klistra sedan in den i en webbläsare. Följ anvisningarna för att autentisera med ditt Azure-konto.

7. Öppna kommandopaletten, sök efter Dev Containers-kommandona och välj sedan Dev Containers: Reopen in Container (Dev Containers: Reopen in Container).

   Dricks

   Visual Studio Code kan automatiskt uppmana dig att öppna den befintliga mappen i en utvecklingscontainer. Detta är funktionellt likvärdigt med att använda kommandopaletten för att öppna den aktuella arbetsytan igen i en container.

8. Öppna terminalfönstret igen (Ctrl + `) och låt det vara öppet.

9. De återstående övningarna i det här projektet sker i samband med den här utvecklingscontainern.

Distribuera och köra

Exempellagringsplatsen innehåller alla kod- och konfigurationsfiler som du behöver för att distribuera en funktionsapp till Azure. Följande steg beskriver hur du distribuerar exemplet till Azure.

Distribuera assistentappen till Azure

Viktigt!

Azure-resurser som skapas i det här avsnittet medför omedelbara kostnader, främst från Azure AI Search-resursen. Dessa resurser kan medföra kostnader även om du avbryter kommandot innan det körs fullständigt.

1. Kör följande Azure Developer CLI-kommando för att etablera Azure-resurserna och distribuera källkoden:

   azd up
   

2. När du uppmanas att ange ett miljönamn ska du hålla det kort och gemener. Exempel: myenv Den används som en del av resursgruppens namn.

3. När du uppmanas till det väljer du en prenumeration för att skapa resurserna i.

4. När du uppmanas att välja en plats första gången väljer du en plats nära dig. Den här platsen används för de flesta resurser, inklusive värdtjänster.

5. Om du uppmanas att ange en plats för OpenAI-modellen väljer du en plats nära dig. Om samma plats är tillgänglig som din första plats väljer du det.

6. Vänta tills appen har distribuerats. Det kan ta 5–10 minuter för distributionen att slutföras.

7. När programmet har distribuerats visas en URL i terminalen.

8. Välj den URL:en som är märkt Deploying service web för att öppna assistentprogrammet i en webbläsare.

Använda assistentapp

Du kan använda assistentappen för att få börskursen på MSFT. Följande steg beskriver hur du använder assistentappen. Assistenten kan skicka svaren via e-post. Det har inte konfigurerats ännu, så ändra kommandotolken så att den inte använder den instruktionen.

1. I webbläsaren kopierar och klistrar du in följande fråga:

   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. Klicka på knappen Kör. Dina resultat bör se ut ungefär som följande svar.

   

Rensa resurser

Rensa Azure-resurser

De Azure-resurser som skapas i den här artikeln faktureras till din Azure-prenumeration. Om du inte förväntar dig att behöva dessa resurser i framtiden tar du bort dem för att undvika att debiteras mer.

Kör följande Azure Developer CLI-kommando för att ta bort Azure-resurserna och ta bort källkoden:

azd down --purge

Rensa GitHub Codespaces

GitHub Codespaces

Om du tar bort GitHub Codespaces-miljön kan du maximera mängden kostnadsfria timmar per kärna som du får för ditt konto.

Viktigt!

Mer information om ditt GitHub-kontos rättigheter finns i GitHub Codespaces månadsvis inkluderade lagrings- och kärntimmar.

1. Logga in på GitHub Codespaces-instrumentpanelen (https://github.com/codespaces).

2. Leta upp de codespaces som körs från Azure-Samples/azure-openai-assistant-javascript GitHub-lagringsplatsen.

   

3. Öppna snabbmenyn , ...för kodområdet och välj sedan Ta bort.

Visual Studio Code

Du behöver inte nödvändigtvis rensa din lokala miljö, men du kan stoppa utvecklingscontainern som körs och återgå till att köra Visual Studio Code i kontexten för en lokal arbetsyta.

1. Öppna kommandopaletten, sök efter Dev Containers-kommandona och välj sedan Dev Containers: Öppna mappen lokalt igen.

   

Dricks

Visual Studio Code stoppar utvecklingscontainern som körs, men containern finns fortfarande i Docker i ett stoppat tillstånd. Du har alltid möjlighet att ta bort containerinstansen, containeravbildningen och volymerna från Docker för att frigöra mer utrymme på den lokala datorn.

Få hjälp

Den här exempellagringsplatsen innehåller felsökningsinformation.

Om du inte åtgärdar problemet loggar du problemet till lagringsplatsens problem.

Relaterat innehåll

• Kom igång med att utvärdera svar i en chattapp i JavaScript