Začínáme s ukázkou podnikového chatu v JavaScriptu s využitím RAG

V tomto článku se dozvíte, jak nasadit a spustit ukázku podnikové chatovací aplikace pro JavaScript. Tato ukázka implementuje chatovací aplikaci pomocí JavaScriptu, služby Azure OpenAI a načítání rozšířené generace (RAG) ve službě Azure AI Search, abyste získali odpovědi na vlastnosti pronájmu. Chatovací aplikace pro vlastnosti pronájmu je zarovnaná s daty ze souborů Markdownu (*.md), včetně zásad ochrany osobních údajů, podmínek služby a podpory.

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

Začít hned

Postupujte podle pokynů v tomto článku:

• Nasazení chatovací aplikace do Azure
• Získejte odpovědi na informace o webových stránkách o vlastnostech pronájmu.
• 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

Přehled architektury

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

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áří indexy vyhledávání.
• Webová aplikace: front-endová webová aplikace, která poskytuje uživatelské rozhraní a orchestruje interakci mezi uživatelem a back-endovými službami.

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 bude účtován poplatek, ale bude minimální. Až budete s článkem hotovi, můžete prostředky odstranit, abyste přestali účtovat poplatky.

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

Požadavky

Vývojové prostředí kontejneru je k dispozici se všemi závislostmi potřebnými k 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:

Codespaces (doporučeno)

1. Předplatné Azure – Vytvoření předplatného zdarma
2. Oprávnění účtu Azure – Váš účet Azure musí mít oprávnění Microsoft.Authorization/roleAssignments/write, jako je uživatelský přístup Správa istrator nebo vlastník.
3. Přístup udělený službě Azure OpenAI v požadovaném předplatném Azure V současné době je přístup k této službě udělován pouze aplikací. Pokud chcete získat přístup k Azure OpenAI, vyplňte formulář na adrese https://aka.ms/oai/access. Pokud máte problém, otevřete problém v tomto úložišti a kontaktujte nás.
4. Účet GitHub

Visual Studio Code

1. Předplatné Azure – Vytvoření předplatného zdarma
2. Oprávnění účtu Azure – Váš účet Azure musí mít oprávnění Microsoft.Authorization/roleAssignments/write, jako je uživatelský přístup Správa istrator nebo vlastník.
3. Přístup udělený službě Azure OpenAI v požadovaném předplatném Azure V současné době je přístup k této službě udělován pouze aplikací. Pokud chcete získat přístup k Azure OpenAI, vyplňte formulář na adrese https://aka.ms/oai/access. Pokud máte problém, otevřete problém v tomto úložišti a kontaktujte nás.
4. Azure Developer CLI
5. Docker Desktop – spusťte Docker Desktop , pokud ještě není spuštěný
6. Visual Studio Code
7. Rozšíření vývojového kontejneru

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

Začněte teď s vývojovým prostředím, které má nainstalované všechny závislosti k dokončení tohoto článku.

Codespaces GitHubu (doporučeno)

GitHub Codespaces spouští vývojový kontejner spravovaný GitHubem pomocí editoru Visual Studio Code pro web jako uživatelského rozhraní. 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 2 jádrovými instancemi. Další informace najdete v tématu GitHub Codespaces měsíčně zahrnuté úložiště a hodiny jádra.

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

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

   Otevření tohoto projektu v GitHub Codespaces

3. Na stránce Vytvořit kódspace zkontrolujte nastavení konfigurace codespace a pak vyberte Vytvořit nový prostor kódu.

   

4. Počkejte, až se prostor kódu 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
   

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.

Visual Studio Code

Rozšíření Dev Containers pro Visual Studio Code vyžaduje instalaci Dockeru na 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. Otevřete Visual Studio Code v kontextu prázdného adresáře.

2. Ujistěte se, že máte nainstalované rozšíření Dev Containers v editoru Visual Studio Code.

3. V editoru otevřete nový terminál.

   Tip

   Pomocí hlavní nabídky můžete přejít na možnost nabídky Terminál a pak vybrat možnost Nový terminál .

   

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

5. Vytvořte složku a inicializujte ji pro použití ukázkového projektu pomocí Azure Developer CLI:

   azd init -t azure-search-openai-javascript
   

   Toto úložiště nemusíte klonovat.

6. Otevřete paletu příkazů, vyhledejte příkazy Dev Containers a pak vyberte Dev Containers: Znovu otevřít v kontejneru.

   Tip

   Visual Studio Code vás může automaticky vyzvat k opětovnému otevření existující složky v rámci vývojového kontejneru. Toto je funkčně ekvivalentní použití palety příkazů k opětovnému otevření aktuálního pracovního prostoru v kontejneru.

7. Znovu otevřete okno terminálu (Ctrl + `) a nechte ho otevřené.

8. 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 účtují okamžité náklady, především z prostředku Azure AI Search. Tyto prostředky můžou nabíhání nákladů i v případě, že příkaz přerušíte před jeho ú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. Když 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é 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 prostředků včetně hostování.

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. Výběrem této adresy URL otevřete Deploying service web chatovací aplikaci v prohlížeči.

   

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

Chatovací aplikace se předem načte s informacemi o pronájmu z katalogu souborů markdownu. 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 zásady refundace do textového pole v dolní části stránky.

   

2. V odpovědi vyberte 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.

Nastavení	Popis
Přepsání šablony výzvy	Toto je výzva, která slouží k vygenerování odpovědi.
Načtení tohoto počtu výsledků hledání	Toto je počet výsledků hledání, které se používají k vygenerování odpovědi. Tyto zdroje vrácené v myšlenkovém procesu a podpůrných kartách obsahu citace můžete vidět.
Vyloučit kategorii	Toto je kategorie dokumentů, které jsou vyloučené z výsledků hledání.
Použití sémantického rankeru pro načtení	Toto je funkce služby Azure AI Search , která využívá strojové učení ke zlepšení relevance výsledků hledání.
Použití kontextových souhrnů dotazu místo celých dokumentů	Při kontrole Use semantic rankerUse query-contextual summaries používá LLM popis extrahované z klíčových pasáží místo všech pasáží v nejřadivější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 načítání	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čování chatu streamu	Odpověď streamu místo čekání na dokončení odpovědi.

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

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

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í, například s následujícím kódem.

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

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

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 najdete v tématu GitHub Codespaces měsíčně zahrnuté hodiny úložiště a jádra.

1. Přihlaste se k řídicímu panelu GitHub Codespaces (https://github.com/codespaces).

2. Vyhledejte aktuálně spuštěné codespaces zdrojové z Azure-Samples/azure-search-openai-javascript úložiště GitHub.

   

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

   

Visual Studio Code

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

   

Tip

Visual Studio Code zastaví spuštěný vývojový kontejner, ale kontejner stále existuje v Dockeru v zastaveném stavu. Vždy máte možnost odstranit instanci kontejneru, image kontejneru a svazky z Dockeru, 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 o řešení potíží.

Pokud nevyřešili vaše vydání, zapište problém do problémů úložiště.

Další kroky

• Úložiště GitHub v podnikové chatovací aplikaci
• Vytvoření chatovací aplikace s využitím architektury osvědčených postupů Azure OpenAI
• Řízení přístupu v generativních aplikacích AI pomocí Azure AI Search
• Vytvoření řešení OpenAI připravené pro podniky pomocí služby Azure API Management
• Outperforming vector search with hybrid retrieval and ranking capabilities