Wprowadzenie do czatu przy użyciu własnego przykładu danych dla języka JavaScript

W tym artykule pokazano, jak wdrożyć i uruchomić przykładowy czat z danymi dla JavaScript. Ten przykład implementuje aplikację do czatu przy użyciu języka JavaScript, usługi Azure OpenAI Service i Pobierania Rozszerzonej Generacji (RAG) w usłudze Azure AI Search, aby uzyskać odpowiedzi na temat nieruchomości na wynajem. Aplikacja do czatu dotycząca wynajmu nieruchomości jest zasilana danymi z plików markdown (*.md), w tym zasadami ochrony prywatności, regulaminem oraz dokumentacją pomocy.

• Demo JavaScript — wideo pełen stos
• Pokaz języka JavaScript — fronton z wideo zaplecza języka Python

Postępując zgodnie z instrukcjami w tym artykule, wykonasz następujące czynności:

• Wdrażanie aplikacji czatu na platformie Azure.
• Uzyskaj odpowiedzi na temat informacji na stronie internetowej o wynajmie nieruchomości.
• Zmień ustawienia, aby zmienić zachowanie odpowiedzi.

Po ukończeniu tego artykułu możesz rozpocząć modyfikowanie nowego projektu przy użyciu niestandardowego kodu i danych.

Ten artykuł jest częścią kolekcji artykułów, które pokazują, jak utworzyć aplikację do czatu przy użyciu usługi Azure OpenAI Service i usługi Azure AI Search. Inne artykuły w kolekcji obejmują:

• .NET
• Java
• Python

Uwaga

W tym artykule wykorzystano jeden lub więcej szablonów aplikacji AI jako podstawę przykładów i wskazówek w artykule. Szablony aplikacji sztucznej inteligencji zapewniają dobrze utrzymywane, łatwe w wdrażaniu implementacje referencyjne, które pomagają zapewnić wysokiej jakości punkt wyjścia dla aplikacji sztucznej inteligencji.

Omówienie architektury

Prosta architektura aplikacji do czatu jest pokazana na poniższym diagramie:

Diagram przedstawiający architekturę od klienta do aplikacji backendowej.

Przykładowa aplikacja czatu została utworzona dla fikcyjnej firmy o nazwie Contoso Real Estate, a inteligentne środowisko czatu umożliwia swoim klientom zadawanie pytań dotyczących użycia swoich produktów. Przykładowe dane zawierają zestaw dokumentów, które opisują warunki świadczenia usługi, zasady ochrony prywatności i przewodnik pomocy technicznej. Dokumenty są wprowadzane do architektury podczas wdrażania.

Aplikacja jest wykonana z wielu składników, w tym:

• usługa wyszukiwania: usługa zaplecza, która zapewnia możliwości wyszukiwania i pobierania.
• Usługa indeksatora: usługa, która indeksuje dane i tworzy indeksy wyszukiwania.
• Aplikacja internetowa frontendowa: aplikacja internetowa frontendowa, która udostępnia interfejs użytkownika i koordynuje interakcję między użytkownikiem a usługami zaplecza.

Diagram przedstawiający usługi platformy Azure i ich przepływ integracji dla aplikacji front-endowej, wyszukiwania oraz pozyskiwania dokumentów.

Koszt

Większość zasobów w tej architekturze używa poziomu cenowego podstawowego lub opartego na zużyciu. Ceny użycia są oparte na użyciu, co oznacza, że płacisz tylko za to, czego używasz. Aby ukończyć ten artykuł, zasoby generują opłatę, ale są minimalne. Po zakończeniu pracy z artykułem możesz usunąć zasoby, aby zatrzymać naliczanie opłat.

Dowiedz się więcej o kosztach w przykładowym repozytorium.

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:

• Subskrypcja platformy Azure - Utwórz ją za darmo
• Uprawnienia konta platformy Azure — Twoje konto platformy Azure musi mieć uprawnienia Microsoft.Authorization/roleAssignments/write, takie jak Administrator dostępu użytkownika lub Właściciel.
• Konto usługi GitHub

• Subskrypcja platformy Azure — Utwórz za darmo
• 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.
• Azure Developer CLI
• Docker Desktop — uruchom Docker Desktop, jeśli jeszcze nie jest uruchomiony
• Visual Studio Code
• Rozszerzenie kontenerów deweloperskich

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 uruchamia kontener deweloperski zarządzany przez GitHub z Visual Studio Code for the Web jako interfejs 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 dwoma podstawowymi wystąpieniami. Aby uzyskać więcej informacji, zobacz miesięczne miejsca do magazynowania i godziny rdzeni w GitHub Codespaces.

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

2. Kliknij prawym przyciskiem myszy poniższy przycisk i wybierz polecenie Otwórz link w nowym oknie , aby jednocześnie udostępnić środowisko programistyczne i dokumentację.

   Otwórz 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

   Zrzut ekranu przedstawiający ekran potwierdzenia przed utworzeniem nowej przestrzeni kodu.

4. Poczekaj na uruchomienie środowiska programistycznego. 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 --use-device-code
   

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, aby Docker był zainstalowany na komputerze lokalnym. Rozszerzenie hostuje kontener deweloperów lokalnie przy użyciu hosta Docker z odpowiednimi narzędziami programistycznymi i wstępnie zainstalowanymi zależnościami, aby ukończyć ten artykuł.

1. Utwórz nowy katalog lokalny na komputerze dla projektu.

   mkdir my-intelligent-app && cd my-intelligent-app
   

2. Otwórz program Visual Studio Code w tym katalogu:

   code .
   

3. Otwórz nowy terminal w programie Visual Studio Code.

4. Uruchom następujące polecenie AZD, aby przenieść repozytorium GitHub na komputer lokalny.

   azd init -t azure-search-openai-javascript
   

5. Otwórz paletę poleceń, wyszukaj i wybierz pozycję Dev Containers: Otwórz folder w kontenerze , aby otworzyć projekt w kontenerze deweloperskim. Przed kontynuowaniem poczekaj na otwarcie kontenera deweloperskiego.

6. Zaloguj się do Azure za pomocą Azure Developer CLI.

   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. Pozostałe ćwiczenia w tym projekcie mają miejsce w kontekście tego kontenera deweloperskiego.

Wdrażanie i uruchamianie

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

Wdrażanie aplikacji czatu 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. Jeśli zostanie wyświetlony monit o wprowadzenie nazwy środowiska, zachowaj krótką i małą literę. Na przykład myenv. Jest ona używana jako część nazwy grupy zasobów.

3. Po wyświetleniu monitu wybierz subskrypcję, w ramach której 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 adres URL oznaczony Deploying service web, aby otworzyć aplikację czatu w przeglądarce.

   Zrzut ekranu przedstawiający aplikację czatu w przeglądarce z kilkoma sugestiami dotyczącymi wprowadzenia tekstu czatu i polem tekstowym czatu do wprowadzania pytania.

Uzyskiwanie odpowiedzi z plików markdown przy użyciu aplikacji do czatu

Aplikacja do czatu jest wstępnie ładowana informacjami o wypożyczeniu z katalogu plików markdown. Możesz użyć aplikacji do czatu, aby zadawać pytania dotyczące procesu wypożyczania. Poniższe kroki przeprowadzą Cię przez proces korzystania z aplikacji do czatu.

1. W przeglądarce wybierz lub wprowadź What is the refund policy w polu tekstowym w dolnej części strony.

   

2. W odpowiedzi wybierz Pokaż proces myślowy.

   Zrzut ekranu przedstawiający pierwszą odpowiedź aplikacji czatu, z wyróżnioną opcją "Pokaż proces myślowy" w czerwonym polu.

3. W okienku po prawej stronie użyj kart, aby dowiedzieć się, jak została wygenerowana odpowiedź.

   Karta	opis
   Proces myślowy	Jest to skrypt interakcji w czacie. Możesz wyświetlić monit systemowy (content) i pytanie użytkownika (content).
   Zawartość pomocnicza	Obejmuje to informacje, aby odpowiedzieć na twoje pytanie i materiał źródłowy. Liczba cytatów materiałów źródłowych jest zanotowana w ustawieniach dewelopera. Wartość domyślna to 3.
   Odsyłacz bibliograficzny	Spowoduje to wyświetlenie oryginalnej strony zawierającej cytat.

4. Gdy skończysz, wybierz przycisk "ukryj" oznaczony literą "X" nad kartami.

Zmienianie zachowania odpowiedzi przy użyciu ustawień aplikacji czatu

Inteligencja aplikacji do czatu zależy od modelu OpenAI i ustawień używanych do interakcji z modelem.

Zrzut ekranu przedstawiający ustawienia czatu dewelopera.

Ustawienie	opis
Zastępowanie szablonu monitu	Jest to monit używany do wygenerowania odpowiedzi.
Pobieranie tych wielu wyników wyszukiwania	Jest to liczba wyników wyszukiwania, które są używane do generowania odpowiedzi. Możesz zobaczyć te źródła na kartach Proces myślowy i Zawartość pomocnicza.
Wyklucz kategorię	Jest to kategoria dokumentów wykluczonych z wyników wyszukiwania.
Użyj semantycznego rankera do pobierania	Jest to funkcja Azure AI Search, która wykorzystuje uczenie maszynowe do poprawy trafności wyników wyszukiwania.
Używanie podsumowań kontekstowych zapytań zamiast całych dokumentów	Gdy zarówno Use semantic ranker jak i Use query-contextual summaries są zaznaczone, LLM używa podpisów wyodrębnionych z kluczowych fragmentów, zamiast wszystkich fragmentów, w najwyżej ocenianych dokumentach.
Sugerowanie pytań dotyczących kontynuacji	Pozwól aplikacji czatu sugerować pytania uzupełniające na podstawie odpowiedzi.
Tryb wyszukiwania	Wektory + tekst oznacza, że wyniki wyszukiwania są oparte na tekście dokumentów i osadzaniu dokumentów. Wektory oznaczają, że wyniki wyszukiwania są oparte na osadzaniu dokumentów. Tekst oznacza, że wyniki wyszukiwania są oparte na tekście dokumentów.
Odpowiedzi na ukończenie czatu strumieniowego	Zamiast czekać, aż pełna odpowiedź będzie dostępna, odpowiedź powinna być przesyłana strumieniowo.

Poniższe kroki przeprowadzą Cię przez proces zmieniania ustawień.

1. W przeglądarce wybierz kartę Ustawienia dewelopera.

2. Zaznacz pole wyboru Użyj podsumowań kontekstowych zapytania zamiast i zadaj to samo pytanie jeszcze raz.

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

   Rozmowa zwróciła się z bardziej zwięzłą odpowiedzią, taką jak poniżej.

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 GitHub Codespaces zapewnia możliwość maksymalizacji ilości bezpłatnych godzin przysługujących na rdzeń dla twojego konta.

Ważne

Aby uzyskać więcej informacji na temat uprawnień związanych z kontem GitHub, zobacz GitHub Codespaces - miesięcznie uwzględniona przestrzeń magazynowa i godziny rdzeni.

1. Zaloguj się do pulpitu nawigacyjnego usługi GitHub Codespaces .

2. Znajdź swoje obecnie uruchomione środowiska Codespaces pochodzące z repozytorium GitHub.

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

3. Otwórz menu kontekstowe dla przestrzeni kodu, a następnie wybierz pozycję Usuń.

   

Nie musisz czyścić środowiska lokalnego, choć możesz zatrzymać uruchomiony kontener deweloperski i wrócić do korzystania z Visual Studio Code w kontekście lokalnego obszaru roboczego.

1. Otwórz Paletę Poleceń, wyszukaj komendy Dev Containers, a następnie wybierz opcję Dev Containers: Otwórz ponownie folder lokalnie.

   Zrzut ekranu przedstawiający opcję „Paleta poleceń” do ponownego otwarcia bieżącego folderu w środowisku lokalnym.

Napiwek

Program Visual Studio Code zatrzymuje uruchomiony kontener deweloperski, ale kontener nadal istnieje w Dockerze w stanie zatrzymanym. Zawsze możesz usunąć wystąpienie kontenera, obraz kontenera i woluminy z Dockera, aby zwolnić więcej miejsca na maszynie lokalnej.

Uzyskaj pomoc

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

Jeśli problem nie został rozwiązany, zarejestruj go w Sekcji Problemów repozytorium.

Następne kroki

• Pobierz kod źródłowy dla przykładu używanego w tym artykule
• Zbuduj aplikację do czatu z Azure OpenAI – zalecana architektura rozwiązań.
• Kontrola dostępu w aplikacjach generatywnej sztucznej inteligencji za pomocą usługi Azure AI Search
• Zbuduj gotowe do użytku w przedsiębiorstwach rozwiązanie OpenAI przy użyciu Azure API Management.
• Przewyższanie wyszukiwania wektorowego dzięki hybrydowym możliwościom pobierania i rankingu

• Dowiedz się więcej o sposobie użycia usługi AZD w tym szablonie:
  • Wpis na blogu społeczności technologicznej
  • seria filmów Reactor