Udostępnij za pośrednictwem

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

  • Artykuł

W tym artykule pokazano, jak wdrożyć i uruchomić czat z przykładowymi danymi dla języka 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 właściwości wynajmu. Aplikacja czatu o właściwościach wynajmu jest wypełniana danymi z plików markdown (*.md), w tym zasadami ochrony prywatności, warunkami świadczenia usług i pomocą techniczną.

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 o witrynie internetowej nieruchomości wynajmu.
  • 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ą:

Uwaga

W tym artykule użyto co najmniej jednego szablonu aplikacji sztucznej inteligencji jako podstawy 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ę z klienta do aplikacji zaplecza.

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ą pozyskiwane 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 frontonu: aplikacja internetowa frontonu, która udostępnia interfejs użytkownika i organizuje interakcję między użytkownikiem a usługami zaplecza.

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

Koszt

Większość zasobów w tej architekturze używa warstwy cenowej podstawowa lub zużycie. Ceny użycia są oparte na użyciu, co oznacza, że płacisz tylko za to, czego używasz. Aby ukończyć ten artykuł, zostanie naliczona opłata, ale będzie ona minimalna. Po zakończeniu pracy z artykułem możesz usunąć zasoby, aby zatrzymać naliczanie opłat.

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

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 bezpłatnie
  • 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.
  • Dostęp jest udzielany usłudze Azure OpenAI w żądanej subskrypcji platformy Azure. Obecnie dostęp do tej usługi jest udzielany tylko przez aplikację. Możesz ubiegać się o dostęp do usługi Azure OpenAI, wypełniając formularz pod adresem https://aka.ms/oai/access. Otwórz problem w tym repozytorium, aby skontaktować się z nami, jeśli masz problem.
  • Konto usługi GitHub

Otwieranie środowiska projektowego

Rozpocznij teraz od środowiska programistycznego, które ma zainstalowane wszystkie zależności, aby ukończyć ten artykuł.

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-search-openai-javascript gałęzi repozytorium GitHub.

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

    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

    Zrzut ekranu przedstawiający ekran potwierdzenia przed utworzeniem nowej przestrzeni 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.

Wdrażanie i uruchamianie

Przykładowe repozytorium zawiera wszystkie pliki kodu i konfiguracji, które należy wdrożyć 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ó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ę czatu w przeglądarce.

    Zrzut ekranu przedstawiający aplikację czatu w przeglądarce z kilkoma sugestiami dotyczącymi wprowadzania danych wejściowych na czacie i polem tekstowym czatu w celu wprowadzenia pytania.

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

Aplikacja do czatu jest wstępnie ładowana z 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ź zasady zwrotu kosztów w polu tekstowym w dolnej części strony.

    Zrzut ekranu przedstawiający pierwszą odpowiedź aplikacji do czatu.

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

    Zrzut ekranu przedstawiający pierwszą odpowiedź aplikacji do czatu z wyróżnioną pozycją 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 znakami X nad kartami.

Zmienianie zachowania odpowiedzi przy użyciu ustawień aplikacji czatu

Analiza aplikacji do czatu jest określana przez model OpenAI i ustawienia używane do interakcji z modelem.

Zrzut ekranu przedstawiający ustawienia dewelopera czatu.

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. Te źródła są widoczne na karcie Proces myślowy i Zawartość pomocnicza cytatu.
Wyklucz kategorię Jest to kategoria dokumentów wykluczonych z wyników wyszukiwania.
Używanie semantycznego rangatora do pobierania Jest to funkcja usługi Azure AI Search , która używa uczenia maszynowego do poprawy istotności wyników wyszukiwania.
Używanie podsumowań kontekstowych zapytań zamiast całych dokumentów Po zaznaczeniu obu Use semantic ranker elementów i Use query-contextual summaries funkcja LLM używa podpisów wyodrębnionych z kluczowych fragmentów, zamiast wszystkich fragmentów, w dokumentach o najwyższej klasyfikacji.
Sugerowanie pytań dotyczących kontynuacji Zasugeruj aplikację czatu na podstawie odpowiedzi na następujące pytania.
Tryb pobierania 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 Odpowiedź strumieniowa zamiast czekać na pełną odpowiedź jest dostępna dla odpowiedzi.

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, a nie pole wyboru i ponownie zadaj to samo pytanie.

    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

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-search-openai-javascript 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ń.

    Zrzut ekranu przedstawiający menu kontekstowe dla pojedynczej przestrzeni kodu z wyróżnioną opcją usuwania.

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.

Następne kroki