Dela via

Kom igång med chatten med ditt eget dataexempel för JavaScript

  • Artikel

Den här artikeln visar hur du distribuerar och kör chatten med ditt dataexempel för JavaScript. Det här exemplet implementerar en chattapp med Hjälp av JavaScript, Azure OpenAI Service och Rag (Retrieval Augmented Generation) i Azure AI Search för att få svar om hyresegenskaper. Chattappen för hyresegenskaper är seedad med data från Markdown-filer (*.md) inklusive en sekretesspolicy, användarvillkor och support.

Genom att följa anvisningarna i den här artikeln gör du följande:

  • Distribuera en chattapp till Azure.
  • Få svar om webbplatsinformation för hyresfastigheter.
  • Ändra inställningarna för att ändra beteendet för svar.

När du har slutfört den här artikeln kan du börja ändra det nya projektet med din anpassade kod och dina data.

Den här artikeln är en del av en samling artiklar som visar hur du skapar en chattapp med Hjälp av Azure OpenAI Service och Azure AI Search. Andra artiklar i samlingen är:

Kommentar

Den här artikeln använder en eller flera AI-appmallar som grund för exemplen och vägledningen i artikeln. Med AI-appmallar får du väl underhållna och enkla att distribuera referensimplementeringar som hjälper dig att säkerställa en högkvalitativ startpunkt för dina AI-appar.

Arkitekturöversikt

En enkel arkitektur för chattappen visas i följande diagram:

Diagram som visar arkitektur från klient till serverdelsapp.

Chattexempelprogrammet är skapat för ett fiktivt företag som heter Contoso Real Estate, och med den intelligenta chattupplevelsen kan kunderna ställa supportfrågor om användningen av sina produkter. Exempeldata innehåller en uppsättning dokument som beskriver dess användarvillkor, sekretesspolicy och en supportguide. Dokumenten matas in i arkitekturen under distributionen.

Programmet är tillverkat av flera komponenter, inklusive:

  • usluga pretrage: serverdelstjänsten som tillhandahåller sök- och hämtningsfunktionerna.
  • Indexerartjänst: den tjänst som indexerar data och skapar sökindexen.
  • Webbapp: klientdelswebbprogrammet som tillhandahåller användargränssnittet och samordnar interaktionen mellan användaren och serverdelstjänsterna.

Diagram som visar Azure-tjänster och deras integreringsflöde för klientdelsappen, sökningen och dokumentinmatningen.

Kostnad

De flesta resurser i den här arkitekturen använder en prisnivå för grundläggande eller förbrukning. Förbrukningspriser baseras på användning, vilket innebär att du bara betalar för det du använder. För att slutföra den här artikeln kommer det att finnas en avgift men den kommer att vara minimal. När du är klar med artikeln kan du ta bort resurserna för att sluta debiteras.

Läs mer om kostnaden i exempelrepo.

Förutsättningar

En utvecklingscontainermiljö är tillgänglig med alla beroenden som krävs för att slutföra den här artikeln. Du kan köra utvecklingscontainern i GitHub Codespaces (i en webbläsare) eller lokalt med hjälp av Visual Studio Code.

Om du vill använda den här artikeln behöver du följande krav:

  • En Azure-prenumeration – Skapa en kostnadsfritt
  • Azure-kontobehörigheter – Ditt Azure-konto måste ha behörigheten Microsoft.Authorization/roleAssignments/write, till exempel administratör för användaråtkomst eller ägare.
  • Åtkomst beviljad till Azure OpenAI i den önskade Azure-prenumerationen. För närvarande måste man ansöka om att få åtkomst till den här tjänsten. Du kan ansöka om åtkomst till Azure OpenAI genom att fylla i formuläret på https://aka.ms/oai/access. Öppna ett problem på den här lagringsplatsen för att kontakta oss om du har ett problem.
  • GitHub-konto

Öppna utvecklingsmiljön

Börja nu med en utvecklingsmiljö som har alla beroenden installerade för att slutföra den här artikeln.

GitHub Codespaces kör en utvecklingscontainer som hanteras av GitHub med Visual Studio Code för webben som användargränssnitt. För den enklaste utvecklingsmiljön använder du GitHub Codespaces så att du har rätt utvecklarverktyg och beroenden förinstallerade för att slutföra den här artikeln.

Viktigt!

Alla GitHub-konton kan använda Codespaces i upp till 60 timmar kostnadsfritt varje månad med 2 kärninstanser. Mer information finns i GitHub Codespaces månadsvis inkluderade lagrings- och kärntimmar.

  1. Starta processen för att skapa ett nytt GitHub Codespace på grenen main av Azure-Samples/azure-search-openai-javascript GitHub-lagringsplatsen.

  2. Högerklicka på följande knapp och välj Öppna länk i nytt fönster för att ha både utvecklingsmiljön och dokumentationen tillgänglig samtidigt.

    Öppna i GitHub Codespaces

  3. På sidan Skapa kodområde granskar du konfigurationsinställningarna för kodområdet och väljer sedan Skapa nytt kodområde

    Skärmbild av bekräftelseskärmen innan du skapar ett nytt kodområde.

  4. Vänta tills kodområdet har startats. Den här startprocessen kan ta några minuter.

  5. Logga in på Azure med Azure Developer CLI i terminalen längst ned på skärmen.

    azd auth login

  6. Kopiera koden från terminalen och klistra sedan in den i en webbläsare. Följ anvisningarna för att autentisera med ditt Azure-konto.

  7. De återstående uppgifterna i den här artikeln sker i samband med den här utvecklingscontainern.

Distribuera och köra

Exempellagringsplatsen innehåller alla kod- och konfigurationsfiler som du behöver för att distribuera en chattapp till Azure. Följande steg beskriver hur du distribuerar exemplet till Azure.

Distribuera chattapp till Azure

Viktigt!

Azure-resurser som skapas i det här avsnittet medför omedelbara kostnader, främst från Azure AI Search-resursen. Dessa resurser kan medföra kostnader även om du avbryter kommandot innan det körs fullständigt.

  1. Kör följande Azure Developer CLI-kommando för att etablera Azure-resurserna och distribuera källkoden:

    azd up

  2. Om du uppmanas att ange ett miljönamn ska du hålla det kort och gemener. Exempel: myenv Den används som en del av resursgruppens namn.

  3. När du uppmanas till det väljer du en prenumeration för att skapa resurserna i.

  4. När du uppmanas att välja en plats första gången väljer du en plats nära dig. Den här platsen används för de flesta resurser, inklusive värdtjänster.

  5. Om du uppmanas att ange en plats för OpenAI-modellen väljer du en plats nära dig. Om samma plats är tillgänglig som din första plats väljer du det.

  6. Vänta tills appen har distribuerats. Det kan ta 5–10 minuter för distributionen att slutföras.

  7. När programmet har distribuerats visas en URL i terminalen.

  8. Välj den URL:en som är märkt Deploying service web för att öppna chattprogrammet i en webbläsare.

    Skärmbild av chattappen i webbläsaren som visar flera förslag på chattinmatning och chatttextrutan för att ange en fråga.

Använda chattappen för att få svar från Markdown-filer

Chattappen är förinstallerad med uthyrningsinformation från en Markdown-filkatalog. Du kan använda chattappen för att ställa frågor om uthyrningsprocessen. Följande steg beskriver hur du använder chattappen.

  1. I webbläsaren väljer eller anger du Vad är återbetalningsprincipen i textrutan längst ned på sidan.

    Skärmbild av chattappens första svar.

  2. I svaret väljer du Visa tankeprocess.

    Skärmbild av chattappens första svar med Visa tankeprocessen markerad i en röd ruta.

  3. I det högra fönstret använder du flikarna för att förstå hur svaret genererades.

    Tabb beskrivning
    Tankeprocess Det här är ett skript för interaktionerna i chatten. Du kan visa systemprompten (content) och användarfrågan (content).
    Stöd för innehåll Detta inkluderar information för att besvara din fråga och källmaterialet. Antalet källmaterialciteringar anges i inställningarna för utvecklare. Standardvärdet är 3.
    Hänvisning Då visas den ursprungliga sidan som innehåller citatet.

  4. När du är klar väljer du knappen dölj som anges med ett X ovanför flikarna.

Använda inställningar för chattappar för att ändra beteendet för svar

Chattappens intelligens bestäms av OpenAI-modellen och de inställningar som används för att interagera med modellen.

Skärmbild av inställningar för chattutvecklare.

Inställning beskrivning
Åsidosätt promptmall Det här är uppmaningen som används för att generera svaret.
Hämta så många sökresultat Det här är antalet sökresultat som används för att generera svaret. Du kan se dessa källor som returneras i flikarna Tankeprocess och Stöd för innehåll i källhänvisning.
Exkludera kategori Det här är kategorin av dokument som undantas från sökresultaten.
Använda semantisk ranker för hämtning Det här är en funktion i Azure AI Search som använder maskininlärning för att förbättra sökresultatens relevans.
Använda frågekontextsammanfattningar i stället för hela dokument När både Use semantic ranker och Use query-contextual summaries kontrolleras använder LLM undertexter som extraherats från nyckelpassagen, i stället för alla passager, i de högst rankade dokumenten.
Föreslå uppföljningsfrågor Låt chattappen föreslå uppföljningsfrågor baserat på svaret.
Hämtningsläge Vektorer + Text innebär att sökresultaten baseras på texten i dokumenten och inbäddningarna av dokumenten. Vektorer innebär att sökresultaten baseras på inbäddning av dokumenten. Text innebär att sökresultaten baseras på texten i dokumenten.
Svar om att streamchatten har slutförts Stream-svar i stället för att vänta tills det fullständiga svaret är tillgängligt för ett svar.

Följande steg beskriver hur du ändrar inställningarna.

  1. I webbläsaren väljer du fliken Inställningar för utvecklare .

  2. Markera kryssrutan Använd frågekontextsammanfattningar i stället för och ställ samma fråga igen.

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

    Chatten returnerades med ett mer kortfattat svar, till exempel följande.

Rensa resurser

Rensa Azure-resurser

De Azure-resurser som skapas i den här artikeln faktureras till din Azure-prenumeration. Om du inte förväntar dig att behöva dessa resurser i framtiden tar du bort dem för att undvika att debiteras mer.

Kör följande Azure Developer CLI-kommando för att ta bort Azure-resurserna och ta bort källkoden:

azd down --purge

Rensa GitHub Codespaces

Om du tar bort GitHub Codespaces-miljön kan du maximera mängden kostnadsfria timmar per kärna som du får för ditt konto.

Viktigt!

Mer information om ditt GitHub-kontos rättigheter finns i GitHub Codespaces månadsvis inkluderade lagrings- och kärntimmar.

  1. Logga in på GitHub Codespaces-instrumentpanelen (https://github.com/codespaces).

  2. Leta upp de codespaces som körs från Azure-Samples/azure-search-openai-javascript GitHub-lagringsplatsen.

    Skärmbild av alla kodområden som körs, inklusive deras status och mallar.

  3. Öppna snabbmenyn för kodområdet och välj sedan Ta bort.

    Skärmbild av snabbmenyn för ett enda kodområde med borttagningsalternativet markerat.

Få hjälp

Den här exempellagringsplatsen innehåller felsökningsinformation.

Om du inte åtgärdar problemet loggar du problemet till lagringsplatsens problem.

Nästa steg