Začínáme s chatem pomocí vlastní ukázky dat pro JavaScript

V tomto článku se dozvíte, jak nasadit a spustit Chat with your data sample for JavaScript. Tato ukázka implementuje chatovací aplikaci pomocí JavaScriptu, služby Azure OpenAI Service a Načítání rozšířené generace (RAG) ve službě Azure AI Search, aby bylo možné získat odpovědi na nájemní nemovitosti. Chatovací aplikace pro pronájem nemovitostí obsahuje data ze souborů Markdown (*.md), včetně zásad ochrany osobních údajů, podmínek služby a podpory.

• Ukázka JavaScriptu – full stack video
• Ukázka JavaScriptu – front-end s back-endovým videem Pythonu

Postupujte podle pokynů v tomto článku:

• Nasazení chatovací aplikace do Azure
• Získejte odpovědi na otázky o informacích na webových stránkách o nájemních nemovitostech.
• Změňte nastavení a změňte chování odpovědí.

Po dokončení tohoto článku můžete začít upravovat nový projekt pomocí vlastního kódu a dat.

Tento článek je součástí kolekce článků, ve kterých se dozvíte, jak vytvořit chatovací aplikaci pomocí služby Azure OpenAI a azure AI Search. Mezi další články v kolekci patří:

• .NET
• Java
• Python

Poznámka:

Tento článek používá jednu nebo více šablon aplikací AI jako základ pro příklady a vedení v tomto článku. Šablony aplikací AI poskytují dobře udržované a snadno použitelné referenční implementace, které pomáhají zajistit vysoce kvalitní výchozí bod pro vaše aplikace AI.

Přehled architektury

Jednoduchá architektura chatovací aplikace je znázorněná v následujícím diagramu:

Diagram znázorňující architekturu z klienta do back-endové aplikace

Ukázková aplikace chatu je vytvořená pro fiktivní společnost s názvem Contoso Real Estate a inteligentní chatovací prostředí umožňuje svým zákazníkům klást dotazy ohledně využití svých produktů. Ukázková data obsahují sadu dokumentů, které popisují její podmínky služby, zásady ochrany osobních údajů a průvodce podporou. Dokumenty se během nasazování ingestují do architektury.

Aplikace je vyrobena z několika komponent, včetně:

• Search: back-endová služba, která poskytuje možnosti vyhledávání a načítání.
• Služba indexeru: služba, která indexuje data a vytváří vyhledávací indexy.
• Webová aplikace: front-endová webová aplikace, která poskytuje uživatelské rozhraní a orchestruje interakci mezi uživatelem a back-endovými službami.

Diagram znázorňující služby Azure a způsob jejich integrace pro front-endovou aplikaci, vyhledávání a příjem dokumentů.

Náklady

Většina prostředků v této architektuře používá cenovou úroveň Basic nebo Consumption. Ceny spotřeby jsou založené na využití, což znamená, že platíte jenom za to, co používáte. K dokončení tohoto článku prostředky generují poplatek, ale je minimální. Až budete s článkem hotovi, můžete prostředky odstranit, abyste přestali účtovat poplatky.

Přečtěte si více informací o nákladech v ukázkovém úložišti.

Požadavky

Prostředí vývojového kontejneru je k dispozici se všemi závislostmi potřebnými pro dokončení tohoto článku. Vývojový kontejner můžete spustit v GitHub Codespaces (v prohlížeči) nebo místně pomocí editoru Visual Studio Code.

Pokud chcete použít tento článek, potřebujete následující požadavky:

• Předplatné Azure – Vytvořte si jedno zdarma
• Oprávnění účtu Azure – Váš účet Azure musí mít oprávnění Microsoft.Authorization/roleAssignments/write, například User Access Administrator nebo Owner.
• Účet GitHub

• Předplatné Azure – Vytvoření předplatného zdarma
• Oprávnění účtu Azure – Váš účet Azure musí mít oprávnění pro zápis na úrovni Microsoft.Authorization/roleAssignments, například jako Uživatelský přístupový správce (User Access Administrator) nebo Vlastník (Owner).
• Azure Developer CLI
• Docker Desktop – spusťte Docker Desktop, pokud ještě není spuštěný
• Visual Studio Code
• Dev Container Extension

Otevřené vývojové prostředí

Podle následujících pokynů nasaďte předkonfigurované vývojové prostředí obsahující všechny požadované závislosti pro dokončení tohoto článku.

GitHub Codespaces (doporučeno)

GitHub Codespaces spouští vývojový kontejner spravovaný GitHubem, ve kterém je uživatelské rozhraní Visual Studio Code for the Web. Pro nejjednodušší vývojové prostředí použijte GitHub Codespaces, abyste měli předinstalované správné vývojářské nástroje a závislosti k dokončení tohoto článku.

Důležité

Všechny účty GitHubu můžou každý měsíc používat Codespaces až 60 hodin zdarma se dvěma základními instancemi. Podrobnější informace najdete v GitHub Codespaces o měsíčně zahrnutém úložišti a hodinách jádra.

1. Spusťte proces k vytvoření nového GitHub Codespace na větvi main úložiště GitHub Azure-Samples/azure-search-openai-javascript.

2. Klikněte pravým tlačítkem myši na následující tlačítko a vyberte Otevřít odkaz v novém okně , abyste měli k dispozici vývojové prostředí i dokumentaci najednou.

   Otevřít v GitHub Codespaces

3. Na stránce Vytvořit prostor kódu zkontrolujte konfigurační nastavení prostoru kódu a pak vyberte Vytvořit nový prostor kódu.

   Snímek obrazovky potvrzovací obrazovky před vytvořením nového codespace

4. Počkejte, až se kódový prostor spustí. Tento proces spuštění může trvat několik minut.

5. V terminálu v dolní části obrazovky se přihlaste k Azure pomocí Azure Developer CLI.

   azd auth login --use-device-code
   

6. Zkopírujte kód z terminálu a vložte ho do prohlížeče. Postupujte podle pokynů k ověření pomocí účtu Azure.

7. Zbývající úlohy v tomto článku probíhají v kontextu tohoto vývojového kontejneru.

Rozšíření Dev Containers pro Visual Studio Code vyžaduje, aby byl Docker nainstalován na vašem místním počítači. Rozšíření hostuje vývojový kontejner místně pomocí hostitele Dockeru se správnými vývojářskými nástroji a závislostmi předinstalovanými k dokončení tohoto článku.

1. Vytvořte nový místní adresář v počítači pro projekt.

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

2. Otevřete Visual Studio Code v daném adresáři:

   code .
   

3. Otevřete nový terminál v editoru Visual Studio Code.

4. Spuštěním následujícího příkazu AZD přeneste úložiště GitHub do místního počítače.

   azd init -t azure-search-openai-javascript
   

5. Otevřete paletu příkazů, vyhledejte a vyberte Dev Containers: Otevřít složku v kontejneru a otevřete projekt v vývojovém kontejneru. Než budete pokračovat, počkejte na otevření vývojového kontejneru.

6. Přihlaste se k Azure pomocí Azure Developer CLI.

   azd auth login
   

   Zkopírujte kód z terminálu a vložte ho do prohlížeče. Postupujte podle pokynů k ověření pomocí účtu Azure.

7. Zbývající cvičení v tomto projektu probíhají v kontextu tohoto vývojového kontejneru.

Nasazení a spuštění

Ukázkové úložiště obsahuje všechny soubory kódu a konfigurace, které potřebujete k nasazení chatovací aplikace do Azure. Následující kroky vás provedou procesem nasazení ukázky do Azure.

Nasazení chatovací aplikace do Azure

Důležité

Prostředky Azure vytvořené v této části způsobují okamžité náklady, především prostředky Azure AI Search. Tyto prostředky mohou nabíhat náklady, i když příkaz přerušíte před úplným spuštěním.

1. Spuštěním následujícího příkazu Azure Developer CLI zřiďte prostředky Azure a nasaďte zdrojový kód:

   azd up
   

2. Pokud se zobrazí výzva k zadání názvu prostředí, ponechte ho krátkým a malými písmeny. Například myenv. Používá se jako součást názvu skupiny prostředků.

3. Po zobrazení výzvy vyberte předplatné, ve kterém chcete prostředky vytvořit.

4. Když se zobrazí výzva k prvnímu výběru umístění, vyberte umístění blízko vás. Toto umístění se používá pro většinu zdrojů včetně webhostingu.

5. Pokud se zobrazí výzva k zadání umístění modelu OpenAI, vyberte umístění, které je blízko vás. Pokud je stejné umístění dostupné jako vaše první umístění, vyberte ho.

6. Počkejte, až se aplikace nasadí. Dokončení nasazení může trvat 5 až 10 minut.

7. Po úspěšném nasazení aplikace se v terminálu zobrazí adresa URL.

8. K otevření chatovací aplikace v prohlížeči vyberte adresu URL označenou Deploying service web.

   

Získání odpovědí ze souborů Markdown pomocí chatovací aplikace

Chatovací aplikace je předem načtena s informacemi o pronájmu z katalogu souborů markdown. Chatovací aplikaci můžete použít k kladení otázek ohledně procesu pronájmu. Následující kroky vás provedou procesem používání chatovací aplikace.

1. V prohlížeči vyberte nebo zadejte Jaká je politika vracení peněz do textového pole v dolní části stránky.

   Snímek obrazovky s první odpovědí chatovací aplikace

2. V odpovědi vyberte Zobrazit myšlenkový proces.

   Snímek obrazovky s první odpovědí chatovací aplikace, kde je červeně orámována funkce Zobrazit myšlenkový proces

3. V pravém podokně použijte karty, abyste pochopili, jak se odpověď vygenerovala.

   Tab	Popis
   Myšlenkový proces	Toto je skript interakcí v chatu. Můžete zobrazit výzvu systému (content) a otázku uživatele (content).
   Podpůrný obsah	To zahrnuje informace pro zodpovězení vaší otázky a zdrojového materiálu. Počet zdrojových citací je uveden v nastavení pro vývojáře. Výchozí hodnota je 3.
   Citace	Zobrazí se původní stránka, která obsahuje citaci.

4. Až to budete hotovi, vyberte tlačítko pro skrytí označené symbolem X nad kartami.

Změna chování odpovědí pomocí nastavení chatovací aplikace

Inteligentní funkce chatovací aplikace je určena modelem OpenAI a nastavením, která se používají k interakci s modelem.

Snímek obrazovky s nastavením vývojáře chatu

Nastavení	Popis
Přepsání šablony promptu	Toto je výzva, která slouží k vygenerování odpovědi.
Načti tento počet výsledků hledání	Toto je počet výsledků hledání, které se používají k vygenerování odpovědi. Tyto zdroje můžete vidět v záložkách Myšlenkový proces a Podpůrný obsah citace.
Vyloučit kategorii	Toto je kategorie dokumentů, které jsou vyloučené z výsledků hledání.
Použijte sémantický ranker pro vyhledávání	Toto je funkce služby Azure AI Search, která využívá strojové učení ke zlepšení relevance výsledků vyhledávání.
Použití kontextových souhrnů dotazu místo celých dokumentů	Pokud jsou zaškrtnuty obě možnosti Use semantic ranker a Use query-contextual summaries, LLM používá titulky extrahované z klíčových pasáží namísto všech pasáží v nejvýše hodnocených dokumentech.
Návrhy následných otázek	Požádejte chatovací aplikaci, aby na základě odpovědi navrhla následné otázky.
Režim obnovení	Vektory + Text znamenají, že výsledky hledání jsou založeny na textu dokumentů a vkládání dokumentů. Vektory znamenají, že výsledky hledání jsou založené na vkládání dokumentů. Text znamená, že výsledky hledání jsou založené na textu dokumentů.
Odpovědi na dokončení streamového chatu	Použijte streamování odpovědi namísto čekání, až bude celá odpověď k dispozici.

Následující kroky vás provedou procesem změny nastavení.

1. V prohlížeči vyberte kartu Nastavení pro vývojáře.

2. Zaškrtněte políčko Použít kontextové souhrny dotazu místo zaškrtávacího políčka a znovu položte stejnou otázku.

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

   Chat se vrátil s stručnější odpovědí, jako je například následující.

Uvolnění zdrojů

Vyčištění prostředků Azure

Prostředky Azure vytvořené v tomto článku se fakturují k vašemu předplatnému Azure. Pokud v budoucnu tyto prostředky nepotřebujete, odstraňte je, abyste se vyhnuli účtování dalších poplatků.

Spuštěním následujícího příkazu Azure Developer CLI odstraňte prostředky Azure a odeberte zdrojový kód:

azd down --purge

Vyčištění služby GitHub Codespaces

Odstraněním prostředí GitHub Codespaces zajistíte, že můžete maximalizovat nárok na počet bezplatných hodin za jádro, které získáte pro svůj účet.

Důležité

Další informace o oprávněních účtu GitHub naleznete v části GitHub Codespaces: měsíční zahrnuté úložiště a hodinová jádra.

1. Přihlaste se k řídicímu panelu GitHub Codespaces .

2. Vyhledejte aktuálně spuštěné Codespaces pocházející z úložiště GitHub.

   Snímek obrazovky se všemi spuštěnými Codespaces včetně jejich stavu a šablon.

3. Otevřete místní nabídku pro codespace a pak vyberte Odstranit.

   Snímek obrazovky s místní nabídkou pro jediný codespace se zvýrazněnou volbou odstranění

Nemusíte nutně vyčistit místní prostředí, ale můžete zastavit spuštěný vývojový kontejner a vrátit se ke spuštění editoru Visual Studio Code v kontextu místního pracovního prostoru.

1. Otevřete paletu příkazů, vyhledejte příkazy Dev Containers a pak vyberte Dev Containers: Znovu otevřít složku místně.

   Snímek obrazovky s možností Paleta příkazů pro opětovné otevření aktuální složky v rámci vašeho místního prostředí

Tip

Visual Studio Code zastaví spuštěný vývojový kontejner, ale kontejner stále existuje v Dockeru v zastaveném stavu. Kdykoli můžete z Dockeru odstranit instanci kontejneru, image kontejneru a svazky, abyste uvolnili více místa na místním počítači.

Získání pomoci

Toto ukázkové úložiště nabízí informace k řešení problémů.

Pokud váš problém není vyřešen, zaznamenejte jej do Issues úložiště.

Další kroky

• Získejte zdrojový kód pro ukázku použitou v tomto článku
• Vytvoření chatovací aplikace s Azure OpenAI: architektura osvědčené praxe řešení
• Řízení přístupu v generativních AI aplikacích pomocí Azure AI Search
• Vytvořte řešení OpenAI připravené pro podniky pomocí služby Azure API Management.
• Výkon přesahující vyhledávání pomocí vektorů s hybridními možnostmi získávání a hodnocení

• Další informace o tom, jak se AZD používá v této šabloně:
  • Příspěvek na blogu technické komunity
  • Reaktor: seriál videí