Rozpoczynanie pracy z usługą Azure OpenAI za pomocą asystentów i wywoływania funkcji w języku JavaScript

W tym artykule pokazano, jak wdrożyć i uruchomić bezserwerowy asystent Azure OpenAI Assistant Szybki start. Ten przykład implementuje aplikację asystentów przy użyciu języka JavaScript, asystentów usługi Azure OpenAI z wywoływaniem funkcji i usługą Azure Functions.

Omówienie architektury

Asystenci usługi Azure OpenAI umożliwiają tworzenie asystentów sztucznej inteligencji dostosowanych do potrzeb za pomocą niestandardowych instrukcji i rozszerzonych przez zaawansowane narzędzia, takie jak interpreter kodu i funkcje niestandardowe. W tym artykule przedstawiono szczegółowy przewodnik po rozpoczęciu pracy z interfejsem API Asystentów.

Diagram przedstawiający architekturę z klienta do aplikacji zaplecza.

Ta aplikacja jest oparta na dwóch głównych składnikach:

• Prosta strona HTML z waniliowymi plikami CSS i JavaScript oraz hostowana w usłudze Azure Static Web Apps.

• Bezserwerowy interfejs API utworzony za pomocą usługi Azure Functions i korzystający z zestawu SDK języka JavaScript openAI. Aplikacja bezserwerowa wysyła definicję asystentów, w tym wywołanie funkcji do punktu końcowego openAI. Punkt końcowy odpowiada za pomocą wywołania funkcji kontynuacji i parametrów wymaganych do ukończenia tego wywołania.

  • Wywołanie funkcji przykładu symuluje wywołanie interfejsu API, generując losową wartość znacznika zapasów na podstawie symbolu giełdowego wysłanego do funkcji platformy Azure. Tę symulację można zastąpić zdalnym interfejsem API w rozwiązaniu.

  Diagram przedstawiający integrację usługi Azure Functions z usługą Azure OpenAI, w której usługa Azure OpenAI może zwracać nazwy funkcji, które powinny być wywoływane przez usługę Azure Functions.

Wymagania wstępne

Środowisko kontenera deweloperskiego jest dostępne ze wszystkimi zależnościami wymaganymi do ukończenia tego artykułu. Kontener deweloperski można uruchomić w usłudze GitHub Codespaces (w przeglądarce) lub lokalnie przy użyciu programu Visual Studio Code.

Aby użyć tego artykułu, potrzebne są następujące wymagania wstępne:

Codespaces (zalecane)

1. Subskrypcja platformy Azure — utwórz bezpłatnie
2. Uprawnienia konta platformy Azure — Twoje konto platformy Azure musi mieć uprawnienia Microsoft.Authorization/roleAssignments/write, takie jak administrator dostępu użytkowników lub właściciel.
3. Konto usługi GitHub.

Visual Studio Code

1. Subskrypcja platformy Azure — utwórz bezpłatnie
2. Uprawnienia konta platformy Azure — Twoje konto platformy Azure musi mieć uprawnienia Microsoft.Authorization/roleAssignments/write, takie jak administrator dostępu użytkowników lub właściciel.
3. Interfejs wiersza polecenia dla deweloperów platformy Azure
4. Docker Desktop — uruchom program Docker Desktop , jeśli jeszcze nie jest uruchomiony
5. Usługa Git
6. Visual Studio Code
7. Rozszerzenie kontenera deweloperskiego

Otwieranie środowiska projektowego

Skorzystaj z poniższych instrukcji, aby wdrożyć wstępnie skonfigurowane środowisko programistyczne zawierające wszystkie wymagane zależności, aby ukończyć ten artykuł.

GitHub Codespaces (zalecane)

Usługa GitHub Codespaces uruchamia kontener deweloperski zarządzany przez usługę GitHub za pomocą programu Visual Studio Code dla sieci Web jako interfejsu użytkownika. W przypadku najprostszego środowiska programistycznego użyj usługi GitHub Codespaces, aby wstępnie zainstalować odpowiednie narzędzia deweloperskie i zależności, aby ukończyć ten artykuł.

Ważne

Wszystkie konta usługi GitHub mogą korzystać z usługi Codespaces przez maksymalnie 60 godzin bezpłatnych każdego miesiąca z 2 podstawowymi wystąpieniami. Aby uzyskać więcej informacji, zobacz GitHub Codespaces monthly included storage and core hours (Miesięczne miejsca do magazynowania i godzin rdzeni usługi GitHub Codespaces).

1. Rozpocznij proces tworzenia nowego repozytorium GitHub Codespace main w Azure-Samples/azure-openai-assistant-javascript gałęzi repozytorium GitHub.

2. Kliknij prawym przyciskiem myszy poniższy przycisk i wybierz pozycję Otwórz link w nowych oknach, aby mieć jednocześnie dostępne środowisko deweloperskie i dokumentację.

   Otwieranie w usłudze GitHub Codespaces

3. Na stronie Tworzenie przestrzeni kodu przejrzyj ustawienia konfiguracji przestrzeni kodu, a następnie wybierz pozycję Utwórz nową przestrzeń kodu

4. Poczekaj na uruchomienie przestrzeni kodu. Ten proces uruchamiania może potrwać kilka minut.

5. W terminalu w dolnej części ekranu zaloguj się do platformy Azure przy użyciu interfejsu wiersza polecenia dla deweloperów platformy Azure.

   azd auth login
   

6. Skopiuj kod z terminalu, a następnie wklej go w przeglądarce. Postępuj zgodnie z instrukcjami, aby uwierzytelnić się przy użyciu konta platformy Azure.

7. Pozostałe zadania w tym artykule mają miejsce w kontekście tego kontenera deweloperskiego.

Rozszerzenie Dev Containers dla programu Visual Studio Code wymaga zainstalowania platformy Docker na komputerze lokalnym. Rozszerzenie hostuje kontener deweloperów lokalnie przy użyciu hosta platformy Docker z odpowiednimi narzędziami deweloperskich i wstępnie zainstalowanymi zależnościami, aby ukończyć ten artykuł.

1. Utwórz rozwidlenie przykładowego repozytorium, wybierając ten link Azure-Samples/azure-openai-assistant-javascript .

2. Sklonuj repozytorium rozwidlenia. Zastąp <YOUR-GITHUB-ACCOUNT> ciąg nazwą konta usługi GitHub.

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

3. Otwórz program Visual Studio Code w nowym folderze.

   cd azure-openai-assistant-javascript
   code .
   

4. Upewnij się, że masz zainstalowane rozszerzenie Dev Containers w programie Visual Studio Code.

5. Otwórz nowy terminal w edytorze.

   Napiwek

   Możesz użyć menu głównego, aby przejść do opcji menu Terminal, a następnie wybrać opcję Nowy terminal .

   Zrzut ekranu przedstawiający opcję menu, aby otworzyć nowy terminal.

6. Zaloguj się na platformie Azure przy użyciu interfejsu wiersza polecenia dla deweloperów platformy Azure.

   azd auth login
   

   Skopiuj kod z terminalu, a następnie wklej go w przeglądarce. Postępuj zgodnie z instrukcjami, aby uwierzytelnić się przy użyciu konta platformy Azure.

7. Otwórz paletę poleceń, wyszukaj polecenia Dev Containers, a następnie wybierz pozycję Dev Containers: Otwórz ponownie w kontenerze.

   Napiwek

   Program Visual Studio Code może automatycznie monitować o ponowne otwarcie istniejącego folderu w kontenerze programistycznym. Jest to funkcjonalnie równoważne użyciu palety poleceń w celu ponownego otwarcia bieżącego obszaru roboczego w kontenerze.

8. Otwórz ponownie okno Terminal (Ctrl + `) i pozostaw je otwarte.

9. Pozostałe ćwiczenia w tym projekcie mają miejsce w kontekście tego kontenera deweloperskiego.

Wdrażanie i uruchamianie

Przykładowe repozytorium zawiera wszystkie pliki kodu i konfiguracji potrzebne do wdrożenia aplikacji funkcji na platformie Azure. W poniższych krokach przedstawiono proces wdrażania przykładu na platformie Azure.

Wdrażanie aplikacji asystentów na platformie Azure

Ważne

Zasoby platformy Azure utworzone w tej sekcji powodują natychmiastowe koszty, głównie z zasobu usługi Azure AI Search. Te zasoby mogą naliczać koszty nawet w przypadku przerwania działania polecenia przed jego pełnym wykonaniem.

1. Uruchom następujące polecenie interfejsu wiersza polecenia dla deweloperów platformy Azure, aby aprowizować zasoby platformy Azure i wdrożyć kod źródłowy:

   azd up
   

2. Po wyświetleniu monitu o wprowadzenie nazwy środowiska zachowaj krótkie i małe litery. Na przykład myenv. Jest ona używana jako część nazwy grupy zasobów.

3. Po wyświetleniu monitu wybierz subskrypcję, w ramach których chcesz utworzyć zasoby.

4. Po wyświetleniu monitu o wybranie lokalizacji po raz pierwszy wybierz lokalizację w pobliżu. Ta lokalizacja jest używana dla większości zasobów, w tym hostingu.

5. Jeśli zostanie wyświetlony monit o lokalizację modelu OpenAI, wybierz lokalizację znajdującą się blisko Ciebie. Jeśli ta sama lokalizacja jest dostępna jako pierwsza lokalizacja, wybierz tę lokalizację.

6. Poczekaj na wdrożenie aplikacji. Ukończenie wdrożenia może potrwać od 5 do 10 minut.

7. Po pomyślnym wdrożeniu aplikacji w terminalu zostanie wyświetlony adres URL.

8. Wybierz ten adres URL oznaczony Deploying service web etykietą, aby otworzyć aplikację asystenta w przeglądarce.

Korzystanie z aplikacji asystenta

Możesz użyć aplikacji asystenta, aby uzyskać cenę giełdy .MSFT Poniższe kroki przeprowadzą Cię przez proces korzystania z aplikacji asystenta. Asystent może wysłać Ci odpowiedzi w wiadomości e-mail. Ponieważ funkcja wysyłania wiadomości e-mail nie jest skonfigurowana, zmodyfikuj monit, aby nie używać tej instrukcji.

1. W przeglądarce skopiuj i wklej następujący monit:

   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. Wybierz przycisk Run (Uruchom). Wyniki powinny wyglądać podobnie do poniższej odpowiedzi.

   Zrzut ekranu przedstawiający pierwszą odpowiedź aplikacji asystenta.

Czyszczenie zasobów

Czyszczenie zasobów platformy Azure

Zasoby platformy Azure utworzone w tym artykule są rozliczane z subskrypcją platformy Azure. Jeśli nie spodziewasz się, że te zasoby będą potrzebne w przyszłości, usuń je, aby uniknąć naliczania dodatkowych opłat.

Uruchom następujące polecenie interfejsu wiersza polecenia dla deweloperów platformy Azure, aby usunąć zasoby platformy Azure i usunąć kod źródłowy:

azd down --purge

Czyszczenie usługi GitHub Codespaces

GitHub Codespaces

Usunięcie środowiska Usługi GitHub Codespaces gwarantuje, że możesz zmaksymalizować ilość bezpłatnych godzin na godziny korzystania z konta.

Ważne

Aby uzyskać więcej informacji na temat uprawnień konta usługi GitHub, zobacz Artykuł GitHub Codespaces monthly included storage and core hours (Miesięczne miejsca do magazynowania i godzin rdzeni w usłudze GitHub).

1. Zaloguj się do pulpitu nawigacyjnego usługi GitHub Codespaces (https://github.com/codespaces).

2. Znajdź aktualnie uruchomione środowisko Codespaces pochodzące z Azure-Samples/azure-openai-assistant-javascript repozytorium GitHub.

   Zrzut ekranu przedstawiający wszystkie uruchomione obszary Codespace, w tym ich stan i szablony.

3. Otwórz menu kontekstowe , ...w obszarze codespace, a następnie wybierz pozycję Usuń.

Nie musisz czyścić środowiska lokalnego, ale możesz zatrzymać uruchomiony kontener deweloperów i wrócić do uruchamiania programu Visual Studio Code w kontekście lokalnego obszaru roboczego.

1. Otwórz paletę poleceń, wyszukaj polecenia Dev Containers, a następnie wybierz pozycję Dev Containers: Otwórz ponownie folder lokalnie.

   Zrzut ekranu przedstawiający opcję Paleta poleceń, aby ponownie otworzyć bieżący folder w środowisku lokalnym.

Napiwek

Program Visual Studio Code zatrzyma uruchomiony kontener deweloperów, ale kontener nadal istnieje na platformie Docker w stanie zatrzymanym. Zawsze możesz usunąć wystąpienie kontenera, obraz kontenera i woluminy z platformy Docker, aby zwolnić więcej miejsca na komputerze lokalnym.

Uzyskaj pomoc

To przykładowe repozytorium oferuje informacje dotyczące rozwiązywania problemów.

Jeśli wystawione dane nie zostały rozwiązane, zarejestruj problem w problemach z repozytorium.

Powiązana zawartość

• Czym jest interfejs API Asystentów OpenAI w Azure?
• Wprowadzenie do oceniania odpowiedzi w aplikacji czatu w języku JavaScript