Erstelle KI-basierte Web-Apps mit React, Astro und der OpenAI-API

1. Worum geht es in diesem Kurs?: Hallo und willkommen zu unserem aufregenden neuen Videokurs zur Programmierung von KI-Chat-Apps mit JavaScript, React, Astro JS und der Open AI API Ich freue mich sehr, Ihr Online-Lehrer zu sein, und gemeinsam werden wir uns auf eine außergewöhnliche Reise in die Welt der Chat-Anwendungen mit künstlicher Intelligenz begeben Chat-Anwendungen mit künstlicher Intelligenz In diesem Kurs werden wir in das Reich der KI eintauchen und untersuchen, wie man drei faszinierende Webanwendungen erstellt Jede dieser Apps wird von der Open AI API, dem SAN, das diesen GBT unterstützt , unterstützt und mit den beliebten Webentwicklungstechnologien wie JavaScript React und Astro Jazz erstellt wie JavaScript React und Am Ende dieses Kurses verfügen Sie über die Fähigkeiten und das Selbstvertrauen, um anspruchsvolle KI-Chat-Anwendungen zu entwickeln anspruchsvolle KI-Chat-Anwendungen , die auf einzigartige und ansprechende Weise mit Benutzern interagieren Werfen wir einen kurzen Blick auf die drei spannenden Projekte, die wir entwickeln werden. Nummer eins: Chat GPT Clone. Wir beginnen damit, einen einfachen Chat-GBT-Klon zu erstellen, der es Benutzern ermöglicht, grundlegende Konversationen mit einer KI zu Sie erfahren, wie Sie die Open AI-API integrieren, um die Möglichkeiten der Sprachgenerierung zu nutzen die Möglichkeiten der Sprachgenerierung und ein nahtloses Chat-Erlebnis zu schaffen Am Ende dieses Abschnitts haben Sie Ihre eigene AI Power-Chat-Anwendung betriebsbereit. Zweitens, textbasiertes Abenteuerspiel. In diesem Abschnitt werden wir uns mit einem textbasierten Abenteuerspiel zum Thema Science-Fiction herausfordern mit einem textbasierten Abenteuerspiel zum Thema Science-Fiction Die Spieler lösen Rätsel und navigieren durch die Geschichte, indem sie im Chat mit den Charakteren interagieren Chat mit den Charakteren KI-Charaktere reagieren intelligent machen das Erlebnis fesselnd und Sie erhalten wertvolle Einblicke, wie KI eingesetzt werden kann interaktives und fesselndes Storytelling zu kreieren Nummer drei, Online-Verkaufsassistent. Im letzten Abschnitt werden wir eine praktische Anwendung erstellen, die einen Online-Verkaufsassistenten simuliert Benutzer können mit der KI chatten , um sich nach verfügbaren Produkten zu erkundigen. In diesem Fall handelt es sich um Gitarren und Bassgitarren Sie werden lernen , KI in reale Szenarien zu integrieren , Benutzererfahrung zu verbessern und E-Commerce-Interaktionen ansprechender und effizienter zu E-Commerce-Interaktionen ansprechender und effizienter Am Ende dieses Kurses verfügen Sie über das Wissen und die Fähigkeiten, um AI Power-Chat-Anwendungen zu erstellen, mit um AI Power-Chat-Anwendungen zu erstellen denen Sie Ihre Freunde, Kollegen und potenziellen Arbeitgeber in Erstaunen versetzen können , Kollegen und potenziellen Arbeitgeber Begeben wir uns gemeinsam auf diese spannende Reise , während wir die faszinierende Welt der KI-Chat-Anwendungen mit JavaScript, React, AstroJS und der Open AI API entdecken KI-Chat-Anwendungen mit JavaScript, React, AstroJS und der Nun, hier ist ein interessanter Leckerbissen . Das Einführungsskript, das Sie gerade gehört haben, wurde tatsächlich von niemand anderem als der KI generiert, von niemand anderem als der KI generiert die wir in diesem Kurs verwenden werden, nämlich GPT. Ja, das stimmt. Als von OpenAI entwickeltes KI-Sprachmodell ist HattPT in der Lage, menschenähnlichen Text auf der Grundlage des gegebenen Kontextes zu verstehen und zu generieren auf der Grundlage des Und jetzt gehen wir über das bloße Generieren von Text hinaus , indem ihn bei der Entwicklung realer Anwendungen praktisch einsetzen Ich freue mich, Ihr Begleiter und Kursleiter zu sein und kann es kaum erwarten, die unglaublichen Anwendungen zu sehen Sie entwickeln werden. Lass uns anfangen. Übrigens, dieser Text wurde auch von ChatBT generiert und der, den Sie jetzt hören, wurde von mir, Ihrem Lehrer, generiert . Also lass uns anfangen 2. Die OpenAI-Plattform und -API: Hallo und willkommen zu diesem Video. Hier gehe ich ein wenig auf die Details der Open AI-Plattform ein , die HGPt unterstützt Nicht zu viel, aber ein paar wichtige Dinge möchte ich dir hier zeigen Ich nehme an, Sie alle kennen HAGPT, die KI-Chat-Anwendung Texte generiert, Fragen beantwortet, Programmiercode geschrieben werden können und so weiter Und das alles basiert auf einem großen Sprachmodell, LLM, das Open AI entwickelt hat und das in der Lage ist, einen in natürlicher Sprache geschriebenen Text auf eine Weise zu vervollständigen natürlicher Sprache geschriebenen Text auf eine Weise , die mehr oder weniger sinnvoll erscheint Ein wichtiger Punkt, den Sie verstehen müssen, ist, dass L&M lediglich den Text vervollständigt , der ihm gegeben wird Selbst wenn es den Anschein hat, dass Sie mit dem großen Sprachmodell chatten, vervollständigt es nur den Chatverlauf, der ihm zur Verfügung gestellt wird, und zwar auf eine Weise, die am wahrscheinlichsten erscheint Das neuronale Netzwerk, das große Sprachmodell, sagt anhand der Daten, auf denen es trainiert wurde, die wahrscheinlichsten folgenden Wörter voraus wahrscheinlichsten folgenden Wörter anhand der Daten, auf denen es trainiert wurde, die Wann immer Sie eine API-Funktion der Open AI, API aufrufen, müssen Sie immer den vollständigen Kontext angeben, z. B. den vollständigen Chat-Verlauf, damit das LLM auf der Grundlage genau dieses Kontextes eine Vervollständigung erstellen kann Das LLM hat kein Gedächtnis, daher müssen Sie jedes Mal, wenn Sie die API um eine Vervollständigung bitten, alle relevanten Daten angeben wenn Sie die API um eine Vervollständigung bitten Wenn Sie wissen möchten, wie die offene API funktioniert, können Sie natürlich auf der Webseite unter der Plattform Open AI Com Docs nachschauen Das ist diese Seite hier. Sie haben auch einen Spielplatz , auf dem Sie die API-Aufrufe testen können , indem Sie nur die Daten angeben. Dann müssen Sie also in keiner Programmsprache schreiben. Sie schreiben einfach die Daten in ein Formularfeld und rufen dann die API mit diesen Daten auf, und das Ergebnis wird Ihnen präsentiert. Sie haben auch Beispiele in verschiedenen Programmiersprachen und auch eine Dokumentation ihrer Bibliotheken für Python und für JavaScript. Und natürlich gibt es eine vollständige Referenzdokumentation, die Sie hier finden. Für den Chat oder für die Vervollständigungen müssen Sie also hier nachschauen. Dies sind die API-Referenzvervollständigungen von Doc, und dann, zum Beispiel, erstellen, und dann haben Sie die Dokumentation für die Fertigstellung der Erstellung Und hier können Sie sehen, dass Sie die Programmiersprache hier ändern können die Programmiersprache hier ändern No Jazz ist hier und dann Python, und dann kannst du sogar Curl dafür verwenden Das ist also eine Rest-API, also kannst du auch so etwas wie Curl oder vielleicht Postman verwenden etwas wie Curl oder vielleicht , so Und hier haben wir die gesamte Beschreibung aller APIs Um die API und den Playground nutzen zu können, müssen Sie also auch ein Konto erstellen, indem Sie auf Anmelden klicken Das ist also hier, und dann kannst du deine E-Mail-Adresse eingeben, weiter ein Passwort oder dich bei Google, Microsoft oder Apple anmelden Und wenn Sie das dann tun, bekommen Sie, glaube ich, etwa 5$, wenn ich mich richtig erinnere, um alles testen zu können und die API testen zu können Und die 5$ sind Credits für sogenannte Tokens, und Tokens sind, sagen wir, grob gesagt, Tokens sind Wörter, aber sie können auch Teile von Wörtern sein Man hat also fast immer mehr Tokens als Wörter. Ich glaube, es ist mehr oder weniger ein Drittel mehr als Worte. Also musst du das im Hinterkopf haben. Es ist immer ein bisschen mehr, nachdem du dich angemeldet hast. Ich denke, du bekommst 5$ Credits, wenn du für die Tokens bezahlst Jedes Token zählt bei den API-Aufrufen. Also zählen auch die Token, die vom LLM zurückgegeben werden Und natürlich auch die Tokens, die du dem L&M gibst. Wenn du also zum Beispiel eine sehr lange Chat-Historie hast, dann hast du natürlich mehr Tokens, denn jedes Mal, wenn du die API aufrufst, zum Beispiel die Completion-API , musst du alle Daten angeben, den gesamten Verlauf des Chats Es wird also teurer, wenn ihr längere Chats habt. sollten uns jetzt anmelden, da wir einen API-Schlüssel benötigen , um die API aufzurufen und allen Beispielen in diesem Kurs zu folgen. Wie gesagt, du bekommst die 5$ oder so etwas als Credits, das du verwenden kannst, und ich denke, das ist genug für alle Beispiele hier in diesem Kurs Aber das hängt natürlich von der Anzahl der Tokens ab, die du verwendest, die du dem LLM gibst, und dass LLM natürlich auch zurückkehrt Nachdem du dich also angemeldet hast, kannst du API-Schlüssel erstellen, und das werde ich dir später zeigen und natürlich auch, wie die API aufgerufen wird, aber du kannst es schon hier überprüfen Sie haben einen Schnellstart, und dann kannst du den Playground auch hier benutzen, nachdem du dich angemeldet hast, nachdem du dich angemeldet hast, dann kannst du alle Beispiele hier im Playground verwenden. Und dann spiel ein bisschen damit. Aber wie dem auch sei, wir werden die API sehr bald im ersten Abschnitt hier in unserer ersten Anwendung verwenden , bei der es sich um einen Chat-GPT-Klon handeln wird, etwa so, eine Chat-Anwendung, eine einfache Und damit werdet ihr in der Lage sein, mit dem großen Sprachmodell mit der KI zu chatten, und das wird unser erstes Projekt sein Okay, das ist es für dieses Video. Wir sehen uns im nächsten. 3. Tools zur Verwendung in diesem Kurs: Okay, in diesem Video werden wir über die Tools, Bibliotheken und Frameworks sprechen, die wir verwenden werden und welche Kenntnisse Sie bereits haben sollten, bevor Sie an diesem Kurs teilnehmen. Fangen wir also mit JavaScript an. Du solltest natürlich schon in der Lage sein, in JavaScript zu programmieren, das über das Niveau eines Hello World-Programms hinausgeht, oder das Kopieren und Einfügen von Webseiten wie Stack Overflow Sie sollten also auch mit den meisten Funktionen der AchmaScript-Sechs-Version wie Pfeilfunktionen, Konsulat, Destrukturierung und Modulen vertraut sein mit den meisten Funktionen der AchmaScript-Sechs-Version wie Pfeilfunktionen, Konsulat, Destrukturierung und Modulen vertraut AchmaScript-Sechs-Version wie Pfeilfunktionen, Konsulat, , und vielleicht auch mit Array-Funktionen wie der Serverseite werden wir Node JS verwenden, und darüber hinaus werden wir Astro Jaz verwenden Sie sollten also natürlich einige Grundkenntnisse in Node JS haben Node JS Tiefgehende Kenntnisse sind nicht erforderlich, da Astro viele Konzepte wie S-Handler-Funktionen abstrahiert wie S-Handler-Funktionen Sie sollten also natürlich mit dem Node JS-Paketmanager NPM oder mit Garn oder PMPM, so etwas in der Art, vertraut mit dem Node JS-Paketmanager NPM oder mit Garn oder PMPM, so etwas in der Art, sein, weil wir ihn zur Installation von Paketen und auch zur Initialisierung unseres Projekts verwenden werden Installation von Paketen und auch zur Initialisierung unseres Projekts Als Editor werde ich VS-Code verwenden, aber das müssen Sie nicht Das ist in keiner Weise eine Voraussetzung. Wenn Sie also VIM, Emax, Webstorm, Notepad verwenden möchten , ist auch das kein Sie können auch einen Notizblock und ein Terminal verwenden. Es ist zum Beispiel nicht so bequem, in dieser Umgebung zu programmieren, aber wenn Sie möchten, können Sie Aber in den Videos verwende ich Visual Studio-Code, was quasi ein Standard ist. Vielleicht verwenden die meisten Leute, die heutzutage Javascript-Anwendungen verwenden oder programmieren heutzutage Javascript-Anwendungen verwenden , Visual Studio-Code, deshalb verwende ich ihn hier. Okay, für das Frontend verwende ich React Jazz, aber Sie könnten auch ein anderes Bibliotheksframework wie Solid Jazz verwenden ein anderes Bibliotheksframework wie , siehe Selter Es ist nicht allzu schwierig , den Code oder die Konzepte in ein anderes Framework zu übersetzen Code oder die Konzepte in ein anderes Framework zu Sie könnten sogar eine einfache manuelle Dom-Manipulation verwenden das ist auch möglich, weil die Benutzeroberfläche nicht so ausgefallen und ziemlich einfach ist. Das Frontend ist nicht das Wichtigste in diesem Kurs. Wir werden uns natürlich auf die offene KI, die API und deren Verwendung konzentrieren auf die offene KI, die API . Um dem Kurs direkt folgen zu können, solltest du einige Grundkenntnisse von React haben , natürlich nichts Besonderes. Aber vor allem die Hook-Funktionen wie use state, use effect und use ref sind irgendwie wichtig, also solltest du mit ihnen vertraut sein. Aber wie gesagt, Sie könnten hier ein anderes Framework verwenden, und dann müssen Sie dort ein gewisses Maß an Zustandsverwaltung verwenden, und damit sollten Sie dann natürlich vertraut sein. Als letztes Framework verwenden wir Astrogz, warum Astro Jazz und nicht so etwas wie Weil NextJS natürlich irgendwie eng mit React verbunden ist und Astro Jazz im Gegensatz dazu die Verwendung verschiedener Frontend-Technologien ermöglicht Sie könnten also Astro-Gas mit solidem Jazz-View-Swelter verwenden. Und so weiter. Außerdem ist es sehr schnell einzurichten und zu konfigurieren Und da wir uns auf die Verwendung der OpenAI-API konzentrieren werden, weder der Server noch die hier verwendete Frontend-Technologie so wichtig, sondern die Prinzipien der Arbeit mit einem großen Sprachmodell. Das ist es, was Ihnen in diesem Kurs wirklich wichtig ist Sie könnten also natürlich auch Next yes verwenden , wenn Sie möchten Aber wie gesagt, AstroJS ist offen für verschiedene Frontend-Technologien, also verwende ich es hier. Hey, das sind die Tools, Frameworks und Bibliotheken, die wir hier im nächsten Video verwenden Wir beginnen mit unserem ersten Projekt. Wir sehen uns dann. 4. So erstellen Sie unsere erste Astro-App: Ordnung. Hier werden wir unsere erste AstroGS-Server-App erstellen, und das ist die App, die den Server aufruft, die Open AI-API für uns aufruft, und wir werden auch HTML und den React-Code an den Browser senden, und dann bekommen wir theoretisch unsere Chat-Anwendung Hier fangen wir also an. Wir haben unseren übergeordneten Ordner. In diesem Fall ist es DAI, und ich werde NPM create, create aufrufen Und dann wird das eine App erstellen und welche App es ist eine Astro-App, also rufen wir PM Create Astro also rufen wir PM Create Astro Und wir werden von einem netten Roboter begrüßt, sagt: Houston, lass uns das Web bauen, das Dann fragt es: Okay, also teilt es uns mit, dass die Startsequenz eingeleitet wurde Und wo sollen wir dann unser neues Projekt erstellen? Und das wird natürlich der Name unseres Projekts und des Unterordners Und in unserem Fall nenne ich es KI-Chat, da dies eine Chat-Anwendung sein wird, eine generische Chat-Anwendung wie Chat GBT, viel einfacher ist, aber das machen wir zuerst Geben Sie also ein und dann wird gefragt, ob es Beispieldateien enthalten soll, wie es hier empfohlen wird, aber wir beginnen mit einem leeren Projekt, also verwenden wir auch nicht die Blockvorlage und wählen leer Und dann fragt es mich, ob es die Abhängigkeiten installieren soll, die NPM Node-Module, NPM install wird aufgerufen, und natürlich, ja, mach es einfach, dann muss ich es nicht tun Das wird ein bisschen dauern , weil es alle Pakete herunterlädt und installiert Dies kann natürlich eine Minute dauern , abhängig von Ihrer Internetverbindung. Okay, die letzte Frage hier: Haben Sie vor, Typescript zu schreiben Und in diesem Fall nein, Sie können natürlich TypeScript verwenden, aber ich werde es hier nicht verwenden, weil es die Dinge komplizierter macht und ich werde mich hier auf JavaScript React und nicht auf Jazz konzentrieren JavaScript React und nicht auf Jazz Also nein eingeben, und es sagt mir keine Sorgen, TypeScript wird unterstützt und Sie können es später Also, okay, es war nicht die letzte Frage, aber hier ist es, ein neues Git-Repository zu initialisieren und nein, danke Und dann heißt es uns: Viel Glück da draußen, Astronaut Okay, vielen Dank. Was haben wir jetzt? Wir haben einen Unterordner namens AiChat , weil wir unserem Projekt diesen Namen gegeben haben Hier haben wir Dateien. Aber zuerst überprüfen wir die Unterordner. Hier haben wir die Knotenmodule, die mit MPM install aus dem Astro-Assistenten installiert wurden , und wir haben public, und das enthält nur ein Dies ist das SVG-FAF-Symbol, das im Projekt enthalten ist. Und wir haben eine Quelle. Wir haben Seiten im Quelltext. Und da haben wir unseren Index Astro Index Dot Astro, das ist quasi der Index HGML, der an den Browser geliefert wird, der aber zuerst von Astro Gs kompiliert wird Im Grunde ist das HGML und das wird im Browser angezeigt Wir können es auschecken und wir können den Server jetzt mit Okay ausführen , also müssen wir zuerst eine CD in den Unterordner, den wir gerade erstellt haben, CD AI-Chat machen eine CD in den Unterordner, den wir gerade erstellt haben, , und dann können wir NPM Run aufrufen Dadurch wird ein Skript ausgeführt, das im Paket aufgeführt ist. Jason, hier haben wir die Skripte, und wir wollen dieses Skript Def namens Dev Astro Def aufrufen Astro ist ein Shell-Skript, und Sie finden es hier in den Notizmodulen Punkt bin, und hier ist es Astro, und das wird dann mit dem Argument Dev aufgerufen Okay, also rufen wir NPM run Def auf, und das und Und hier ist er, lokaler Host 3.000. Wir überprüfen es im Browser. Hier ist es Astro und H one hier, und das ist im Wesentlichen, wie gesagt, das, was wir im Index Astro in dieser Datei hier haben im Index Astro in dieser Datei Und das können wir natürlich ändern. Lass es uns auf KI-Chat umstellen. Oder AIChatBT, was auch immer. Und hier kannst du natürlich etwas HTML platzieren, wenn du ein DIV willst und was auch immer du willst Wir können unseren React-Root vielleicht später hier haben. Aber lassen Sie uns den Browser überprüfen und er hat die Seite automatisch für uns neu geladen, und jetzt haben wir den KI-Chat-Bot hier in der Kopfzeile Okay, das ist also unsere erste Anwendung mit Astro JS, und wir werden im nächsten Video weitermachen 5. Hinzufügen von Reaktionen auf unsere App: Okay, jetzt werden wir React zu unserer Astro-App hinzufügen und zuerst das Ganze stornieren und Def hier ausführen. Unser Server läuft hier also nicht mehr und ich füge diesen Befehl ein. Dieser Befehl heißt Npx Astro add react und verwendet das Astro Shell-Skript, und verwendet das Astro Shell-Skript um unserer Astro-App React-Unterstützung hinzuzufügen Geben Sie also einfach dieses Npx Astro Add React ein und es sollte die React-Unterstützung hinzufügen und es Beim Auflösen von Paketen werden wir gefragt, ob wir mit der Installation von Abhängigkeiten fortfahren wollen , und dadurch werden auch einige Node-Pakete installiert Fahren Sie fort, und es wird unser Astrocfic MGS ändern Okay, es ändert also auch unsere TS-Konfigurations-JSN oder erstellt sie. Ist nicht wirklich wichtig Ja, mach weiter und das war's. Okay, jetzt haben wir unseren React-Support, schauen wir uns das Paket Jason an. Es wurden Typen hinzugefügt. Wir können hier also React und Rec Dom sehen, und es wurden auch React und React Dom hinzugefügt, natürlich Version 18, beide. Und jetzt können wir React in unserer App verwenden. Aber zuerst benötigen wir natürlich eine React-Komponente, und die Komponenten befinden sich in den Unterordner-Komponenten Also ein RC, wir erstellen einen neuen Ordner. Und wir nennen es Komponenten. Und in diesem Komponentenordner können wir eine neue Datei erstellen, wir nennen sie Index Dot JSX, und das wird unsere Hauptkomponente für Reaktionen sein Dann können wir das in den Indexpunkt Astro aufnehmen, und wir können es hier in diesen Bereich aufnehmen Wir haben also die drei Bindestriche, und zwischen den ersten drei Bindestrichen und dem letzten können wir unseren Import schreiben und wir können hier die React-Komponente importieren , unseren Index JSX, und wir importieren die App von, also wird es ein Standardimport und ein Standardexport von Punktpunktkomponenten sein , und da haben wir unseren Index JSX, und im Moment ist er leer, also bekommen wir hier eine Fehlermeldung weil es nicht wirklich ein Modul ist, aber jetzt können wir diese App-Komponente hier verwenden , wie wir es in JSX tun. Hier fehlt etwas. Wir müssen hier ein neues Attribut einfügen, nur den Doppelpunkt für den Client, und dann müssen wir es so einstellen, dass es hier reagiert. Okay, und dadurch wird Astro mitgeteilt , dass diese Komponente auf dem Client gerendert wird, nur auf dem Client und nicht auf dem Server, also verwenden wir hier kein Server-Site-Rendering. Okay, das ist im Moment leer, also müssen wir etwas eingeben, Standardfunktion exportieren und dann etwas JSX zurückgeben Für den Moment sollte das genügen. Und jetzt starten wir unseren Server. Wir überprüfen den Browser, hosten vor Ort 3.000 KI-Chatbots , das, was wir vorher hatten, und dann haben wir hier eine App. Und wenn wir das HTML hier überprüfen, Dom, haben wir dieses DIF mit App drin, und das ist unsere Reaktionskomponente Und das übergeordnete Element dieser Reaktionskomponente ist Astro Island, und diese Astro-Insel ist in diesem Fall unsere Reaktionswurzel, und Astro kann alle verschiedenen UI-Komponenten wie Swel View Jazz, React, Solid Jazz mischen und anpassen , , und es platziert es Aber das ist für uns nicht so wichtig. Wichtig ist, dass wir hier unsere React-Komponente haben, und hier können wir unser JSX schreiben, und wir können es einfach wie jede andere React-Komponente schreiben Okay, wir haben also unsere erste React-Komponente, und von dort aus können wir hier einfach eine React-App erstellen, und der nächste Schritt wird darin bestehen, eine Server-Site-Funktion einzurichten, die die Open AI-API aufruft, und das wird im nächsten Video untersucht 6. Hinzufügen unseres ersten Server-REST-Endpunkts: Okay, jetzt, wo wir unsere erste React-Komponente haben, können wir mit dem Schreiben unseres ersten Servercodes und der direkten Ausführung der Anwendung im Browser fortfahren unseres ersten Servercodes und . Wir rufen die Server-API auf, um schließlich die API von Open AI zu kontaktieren und dann den Chat wieder abzuschließen. Wir brauchen also eine Serverkomponente, die ohne JS läuft, und das wird unser erster Endpunkt sein. Ich habe einen Unterordner unter Seiten erstellt, Seiten, in denen unser Index Astros und der Unterordner Und in der API habe ich dieses JS-JavaScript-Modul namens chat dot js Und darin haben wir einen Export der Funktion G. Und das sagt Astro, dass es in diesem Pfad, also dem API-Chat, einen G-Handler geben wird Wenn ich das also in die Adressleiste des Browsers einfüge, sollte dieser Handler aufgerufen werden, weil der Browser dort eine G-Anfrage an den Server stellt Und unser Code sollte hier ausgeführt werden. Wir exportieren also eine ASIC-Funktion weil wir sie im Moment verwenden wollen, wir verwenden sie nicht, aber wir werden eine Gewichtung darin verwenden Also habe ich die ASN bereits vor die Funktion gestellt. Also, was macht diese Funktion? Es erhält eine Anfrage. Es erhält ein Objekt, und darin befindet sich eine Anforderungseigenschaft, und wir verwenden sie im Moment nicht, aber später werden wir es tun und dann gibt sie eine neue Antwort zurück, und das ist die Antwort, die an den Browser gesendet wird . Und innerhalb der Antwort innerhalb des Konstruktors hier können wir den Hauptteil der Antwort angeben, und das wird eine JSN-Zeichenfolge sein, was bedeutet, dass dieses einfache Objekt hier, dieses Objektliteral mit einer Eigenschaftsantwort und der Zeichenfolge hello stringifiziert dieses Objektliteral mit wird. Das wird also im Hauptteil an den Browser gesendet. Und dann haben wir noch ein paar Header und Status. Der Status wird 200 sein, was okay bedeutet, also ist alles in Ordnung, und der Header legt den Inhaltstyp hier auf Anwendungs-JSN Der Browser wird also wissen, dass dies JSN im Körper ist. Okay, wir können hier Header senden und wir können mehr Header senden, nicht nur den Inhaltstyp hier, sondern alle anderen Header, die wir verwenden möchten Und der Statuscode kann natürlich etwas anderes sein, wie ein Pfeil wie 500, wenn es einen Fehler auf dem Server gibt , oder 400 oder 401 oder so ähnlich Im Moment wird also alles gut funktionieren. Also geben wir hier 200 an, was okay bedeutet. Das wird also als Antwort an den Browser zurückgegeben und wir können es testen, indem wir einfach den Pfad hier eingeben, API, wie gesagt, und dann chatten, und der Server weiß, welches Modul und welche Funktion er dort aufrufen muss. Also hier haben wir es. Antworte, hallo. Dies ist das JSON, das hier zurückgegeben wird. Okay, jetzt haben wir unsere erste Server-Site-Funktion, und diese läuft ohne Jz Wichtig dabei ist natürlich, dass wir es auf den richtigen Weg bringen Wir haben einen Unterordner namens API erstellt. Es gibt all unsere API-Funktionen wie Chat oder vielleicht haben wir später mehr solche Funktionen Wir haben vielleicht nicht nur einen Get, wir können hier auch einen Beitrag schreiben. Wenn wir also hier einen Beitrag exportieren, wird er als Browser bezeichnet, ob der Client einen Beitrag sendet oder ablegt oder löscht oder was auch immer. Okay, jetzt haben wir unsere erste Serverfunktion, und hier können wir die Open AI API aufrufen und unseren Chat abschließen. Wir sehen uns im nächsten Video. 7. Vorbereiten des Aufrufs der offenen KI-API: Okay, in diesem Video werden wir die Vorbereitungen für den Aufruf der Open AI API treffen, und zuerst müssen Sie sich bei der Plattform Open AI anmelden. Also fügen wir den URL-Plattformpunkt OpenAI ein und hier kannst du dich anmelden Und dann entweder mit einer E-Mail-Adresse und Passwort oder du kannst mit Google, Microsoft oder Apple weitermachen Google, Microsoft oder Apple Und sobald Sie dies getan haben, befinden Sie sich hier in Ihrem Konto, und dann haben Sie dies unter Benutzer-API-Schlüsseln. Und hier können Sie einen neuen API-Schlüssel erstellen und diesen API-Schlüssel verwenden, um auf Ihr Konto zuzugreifen. Und das müssen Sie zuerst tun, einen neuen geheimen Schlüssel erstellen. Also werde ich das hier machen und es Testschlüssel nennen. Erstellen Sie hier einen geheimen Schlüssel. Und das ist wichtig. Sie müssen diesen Schlüssel jetzt kopieren und an einem sicheren Ort aufbewahren. Sie können ihn beispielsweise in Ihre Zwischenablage kopieren und dann in Ihren Quellcode einfügen Wie hier werde ich einen Kommentar abgeben und dann den Schlüssel eingeben Also hier hast du den Schlüssel und er ist gespeichert. Warum ist das wichtig? Denn danach, wenn Sie diesen Dialog geschlossen haben, können Sie nicht mehr auf den Schlüssel zugreifen. Sie sehen hier nur die ersten beiden Buchstaben und die letzten vier Zeichen, aber Sie können hier nicht auf den vollständigen Schlüssel zugreifen Sie müssen also einen neuen erstellen, falls Sie ihn jemals vergessen oder nicht gespeichert haben. Das ist also alles, was Sie hier tun müssen, und ich denke, wenn Sie sich als neuer Benutzer anmelden, erhalten Sie 5$, so etwas, Credits, und Sie können die 5$ zuerst verwenden, bevor Sie bezahlen müssen Und ich denke, 5$ sind mehr als genug, um all unsere Beispiel-Apps hier zu testen Also sollten 5$ dafür reichen. Wenn du mehr brauchst, musst du dafür bezahlen. Und wenn Sie Ihren geheimen Schlüssel haben, müssen Sie ihn, wie gesagt, irgendwo speichern . Ich habe es hier hingelegt. Aber vorerst werde ich auch diesen Testschlüssel hier löschen, und ich werde alle Schlüssel löschen. Ich verwende hier im Kurs, bevor ich den Kurs veröffentliche , weil ich nicht möchte, dass du meine Schlüssel benutzt, weil ich dafür bezahlen muss. Sie müssen hier also Ihre eigenen geheimen Schlüssel erstellen. Jetzt werden wir das offene API-Paket installieren , kein JS-Paket. Und das ist sehr einfach. Sie müssen in Ihr Hauptverzeichnis gehen, und das ist in meinem Fall ein I-Chat, und dann müssen Sie NPM Install open AI aufrufen, zurückkehren, ein wenig warten, und jetzt ist es fertig Und wir schauen uns das Paket JSON an und wir sehen, dass Open AI zur Liste der Abhängigkeiten hinzugefügt wurde, und das ist die Version drei Punkt Null Jetzt können wir das Paket verwenden. Gehen wir also zu unserem Chat-Punkt JS. Jetzt müssen wir zuerst das OpenAI-Paket importieren. So wie das. Wir haben also eine Konfiguration. Wir benötigen sowohl die Konfiguration als auch die Open AI-API, und hier müssen wir unsere Funktionen aufrufen. Und hier haben wir die Konfiguration, die wir benötigen, um diese Funktionen aufzurufen. Als Erstes müssen wir also eine neue Konfiguration mit unserem API-Schlüssel erstellen . Also habe ich das schon vorbereitet. Und wie Sie sehen, ist das ein anderer Schlüssel, aber ich werde diesen Schlüssel natürlich auch löschen, bevor ich den Kurs veröffentliche. Also bitte erstelle einen neuen. Das wird nicht mehr funktionieren. Okay, wir erstellen also eine neue Konfiguration mit neuer Konfiguration, und die Konfiguration haben wir aus dem Open AI-Paket importiert. Dann müssen wir ein Objekt mit dem Eigenschaften-API-Schlüssel versorgen , und dort haben wir den geheimen Schlüssel in einer Zeichenfolge, und dann bekommen wir die Konfiguration zurück. Und diese Konfiguration können wir jetzt verwenden, um eine Instanz der offenen KI-API zu erstellen , und wir nennen sie Open AI. Es ist eine neue offene KI-API mit Konfiguration. Das ist sehr einfach. Und jetzt haben wir die offene KI, und wir können überprüfen, was da drin ist. Wir haben die Chat-Vervollständigung erstellt, was hier eine sehr wichtige Funktion oder Methode ist, und wir werden diese Methode häufig verwenden. Und hier gibt es auch andere Funktionen. Sie können einen Blick darauf werfen, aber Sie können natürlich auch in der Dokumentation auf der Webseite nachschauen . Wenn wir also nochmal nachschauen, Dokumentation und API-Referenz, die Dokumentation gibt euch Tutorials und einen allgemeinen Überblick über die Prozesse und die API-Referenz beschreibt dort alle Funktionsaufrufen mit allen Parametern. Okay, wenn Sie also jemals Fragen zur API haben, können Sie die Dokumentation in der API-Referenz auf platform.openai.com verwenden API-Referenz auf platform.openai.com Okay, also zurück zu unserem Code. Ich verwende hier nicht die Vervollständigung zum Erstellen von Chats, aber ich werde sie hier in der GT-Funktion verwenden. Aber vorher werde ich eine neue Funktion erstellen, und diese neue Funktion wird die Fertigstellung für uns erledigen. Wir werden hier den Aufruf der Open-AI-Funktion durchführen. Und es muss eine ACN-Funktion sein , weil ich hier eine Wait-Funktion verwenden werde. Es ist also ACN-Funktion, kompletter Chat. Das ist der Name meiner Funktion. Und dann eine neue Nachricht. Das ist die erste Nachricht, die wir an die OpenAI, API, senden werden , und dann rufen wir eine Gewichtung auf, weil es async ist openi create chat completion, die Methode, die ich bereits erwähnt habe, müssen wir für Create Chat Completion hier ein Objektliteral angeben, und das spezifiziert das Modell, und das ist das neueste Modell hier, ist das neueste Modell hier, GPT 35 und dann rufen wir eine Gewichtung auf, weil es async ist openi create chat completion, die Methode, die ich bereits erwähnt habe, müssen wir für Create Chat Completion hier ein Objektliteral angeben, und das spezifiziert das Modell, und das ist das neueste Modell hier, GPT 35 Turbo oh 613 Th ist das neueste Modell , das auch Funktionsaufrufen unterstützt. Sie können also GPT 35 Turbo verwenden, und je nachdem wann Sie es tun, werden Sie im Moment das alte Modell bekommen, aber vielleicht werden Sie dieses Modell in Zukunft auch hier bekommen Aber um sicher zu gehen, habe ich am Ende oh 613 eingegeben, weil ich dieses neueste Modell haben möchte Okay, dann musst du also Nachrichten bereitstellen, und das wird unser Chat-Verlauf und die Open AI sein API wird mit dem Abschluss des Chat-Verlaufs dieser Nachrichten antworten und eine neue Nachricht generieren, und eine neue Nachricht generieren der der Chat abgeschlossen wird. Und das Eigentum an Nachrichten besteht nur aus einer Reihe von Nachrichten. Hier haben wir also eine Nachricht in diesem Objekt, Sie müssen die Rolle angeben, in diesem Fall Benutzer, etwas, das der Benutzer zum Beispiel eingibt , und der Inhalt ist hier festgelegt und der Inhalt ist Hallo, also wird die Konversation mit einem Hallo gestartet und die Open API wird dies mit einer neuen Nachricht abschließen und diese neue Nachricht wird wurde in der Abschlussantwort hierher zurückgegeben, und die Abschlussantwort enthält Daten Auswahlmöglichkeiten. Normal benötigt standardmäßig eine Auswahl. Choices ist also ein Array, und wir greifen auf das erste zu. Und dann ist es der Inhalt der Nachricht mit dem Punkt. Und da, in diesem Eigenschaftsinhalt, haben wir unsere eigentliche Botschaft, die Vollendung, die uns das Open-AI-Modell hier bietet, und das ist es, was wir von dieser Funktion zurückgeben. Also kompletter Chat. Wir müssen es natürlich nennen, und das ist so einfach wie das hier. Also haben wir die Antwort hier, warten auf den kompletten Chat, und wir erhalten den Vervollständigungstext aus dem Modell als Antwort hier, und dann können wir das hier löschen, und wir geben die Antwort als JSON-Zeichenfolge zurück. Jetzt können wir es testen. Das ist hier ein gültiger Schlüssel. Ich habe es im Moment nicht gelöscht, also sollte es funktionieren und wir gehen wieder zu unserem Def-Server, und dann rufen wir die API-Chat-Funktion auf, die Get-Funktion, ja, wir bekommen eine Antwort, und diesmal ist es Hallo, wie kann ich dir heute weiterhelfen Dies wurde durch das Lodge-Sprachmodell von Open AI generiert das Lodge-Sprachmodell von und das ist es, was zurückgegeben wurde Ich lade es erneut, vielleicht gibt es mir eine andere Antwort. Ich mache es wieder. Ja, jetzt ist es tatsächlich eine andere Antwort. Hallo zusammen. Wie kann ich dir heute helfen? Es ist fast dasselbe, sehr ähnlich, aber es ist anders. Und nochmal, hallo, wie kann ich dir heute weiterhelfen? Die tatsächliche Antwort des Modells erhalten wir hier. Darauf können wir jetzt aufbauen. Wir können hier weitere Nachrichten hinzufügen, sodass der Benutzer auf diese generierte Nachricht antworten kann, und dann antwortet das große Sprachmodell erneut darauf und hin und her. Und das wird unser Chat sein, aber mehr im nächsten Video. 8. Bereitstellung der Nutzernachricht über URL-Param: Im vorherigen Video haben wir also eine feste Nachricht namens Hallo verwendet und diese einfach an die Open AI-API gesendet, das ist also ein ständiges Hallo Und zuerst können wir diese Nachricht durch eine neue Nachricht ersetzen. Also leg das hier rein und lass uns nachschauen. Wir bieten hier nichts an. Wir müssen hier also eine vom Benutzer bereitgestellte Nachricht angeben , um den Chat abzuschließen. Und woher bekommen wir es? Wir bekommen es aus dem URL-Parameter, dem Teil nach dem Fragezeichen, und wie können wir in Astro Js darauf zugreifen Zuerst müssen wir die URL hier strukturieren. Also gibt uns Astro die URL. Und wenn wir die URL haben, können wir hier einfach auf die Suchparameter zugreifen So wie das. Also L-Punkt-Suchparameter, und da erhalten wir einen bestimmten Parameter , der MSG für Message heißt, und das bekommen wir mit der Punkt-G-Funktion Danach können wir es mit MSG in der Konsole protokollieren und dann probieren wir es und dann probieren wir es Wir bekommen einen Fehler. Okay, das ist nicht gut. Lass uns nachschauen, was wir hier haben. Die Anfrage ist mit dem Statuscode 400 fehlgeschlagen. Okay, ich denke, das liegt daran, Inhalt der neuen Nachricht hier Null ist. Wir müssen also eine Nachricht bereitstellen, und wir können einfach den kompletten Chat mit MSG anrufen . Also lass uns das machen Und wieder ein Fehler. Okay. Was ist es jetzt? Trotzdem haben wir die 404 Hundred Means Bad Anfrage. Also machen wir hier eine schlechte Anfrage, Chat, Chat abschließen. Und kompletter Chat. Das ist also immer noch null oder undefiniert. Das ist also ein Problem. Also lass uns hier nochmal Hallo eintragen. Hallo. Und lass uns überprüfen, ob das funktioniert. Okay, das funktioniert. Lassen Sie uns die Ausgabe hier überprüfen. Null, Null, Null, Null. Okay, MSG ist also Null, und warum ist das so? Das liegt daran, dass unser Astroconfc MGS nicht vollständig ist. Wir müssen hier etwas einfügen, und das ist der Ausgabeserver, was notwendig ist, weil wir hier das Rendern der Serverseite aktivieren müssen Serverseite aktivieren müssen Andernfalls rendert Astro Js die Seiten statisch, und in diesem Fall haben wir hier keinen Zugriff auf URL- und URL-Parameter Also nochmal, Astrocfi Js, Sie müssen die Ausgabe auf den Server legen, um das Rendern der Serverseite zu ermöglichen, und dann können wir hier dynamisch auf die URL und die Suchparameter zugreifen und die Suchparameter Okay, also lass uns die MSG einfach wieder hier hinstellen, MSG wie diese, und versuchen wir Vielleicht nicht Hallo, aber Hello World wäre besser hier, also okay, wie kann ich dir heute weiterhelfen Das ist die Antwort. Lassen Sie uns hier die Serverausgabe überprüfen. Hallo Welt. Also das scheint zu funktionieren. Und wir können unsere Nachricht hier in die URL eingeben, im MSG-Parameter Lass uns etwas anderes versuchen. Vielleicht wie ist das Wetter heute? Es wird es nicht wissen. Aber lassen Sie uns trotzdem überprüfen, wie die Antwort lautet. Es tut mir leid, aber als KI-Sprachmodell habe ich keine Echtzeitinformationen. Okay, es ist ehrlich. Um das Wetter heute herauszufinden, können Sie eine zuverlässige Wetter-Webseite, Website oder eine Wettervorhersage-App auf Ihrem Telefon überprüfen , Website oder eine Wettervorhersage-App auf Ihrem Telefon Ich denke, das stimmt, also ist das eine gute Antwort, denke ich. Und das ist unser erster Chat mit einer vom Benutzer bereitgestellten Chat-Nachricht. Es ist hier nicht mehr behoben. Wir stellen den neuen Nachrichtenparameter bereit, um den Chat abzuschließen und diese Nachricht wird von der URL abgerufen, aus den Suchparametern und wir geben hier im MSG-Parameter nach dem Fragezeichen an, MSG entspricht dem Wetter heute, wir werden diese URL aufrufen, diese Rest-API aus dem Code der Damit das funktioniert, müssen wir natürlich eine React-Komponente erstellen, müssen wir natürlich eine React-Komponente erstellen und das wird im nächsten Video geschehen 9. Erste echte Kunden-UI in response: Kehren wir zu unserer Reaktionskomponente zurück. Ich habe es ein wenig um ein Eingabe-Textfeld erweitert . Das ist dieser, ein Senden-Button, ist dieser, und ein Ausgabe-Div, das hier sein wird, und die Idee ist, dass der Benutzer hier natürlich Text eingibt und dann auf die Schaltfläche Senden klickt, und dann wird dieser Text , der hier eingegeben wurde , an den Server gesendet und wiederum sendet er an den Server, sendet ihn an die Open AI API, erhält die Antwort von der Sprache model, schicke es hier zurück an die React-Komponente, und dann setzen wir es hier in diesen Zustand mit set answer. Wir nennen dich Status mit Antwort und setzen hier Antwort, und diese Antwort wird dann hier im DIV angezeigt und was hier fehlt ist natürlich unser Sand. Also müssen wir hier eine Onclic-Funktion definieren, die aufgerufen wird, wenn der Benutzer auf die Schaltfläche Senden klickt Und dann müssen wir, was müssen wir hier tun? Wir müssen Fetch aufrufen, um die Server-API, die Rest-API, unsere Rest-API aufzurufen die Rest-API, unsere Rest-API Das wird also ein asynchroner Prozess sein, und wir müssen hier mindestens eine asynchrone Funktion verwenden oder ich möchte Also setze ich Async vor diese Funktionsdeklaration, und hier kann ich einen Gewichtungsabruf verwenden Und wir müssen hier die URL angeben, was den API-Slash HAT dann den URL-Parameter nach dem Fragezeichen, dem Frau G entspricht Lassen Sie uns hier nur Hallo zu Debugging-Zwecken und zu Testzwecken hier einfügen und dann den URL-Parameter nach dem Fragezeichen, dem Frau G entspricht. Lassen Sie uns hier nur Hallo zu Debugging-Zwecken und zu Testzwecken hier einfügen. Okay, also was bekommen wir von Fetch? Wir erhalten eine Antwort und dann müssen wir den Hauptteil der Antwort bekommen, und das wird die Antwort sein Also rufe ich Antwort auf, und das wird JCN sein, ich nenne Antwort Punkt JSN und das wird auch ein asynchroner Prozess sein, und deshalb verwende ich hier eine Wartezeit Okay, so bekommen wir die Antwort. Hoffentlich holen wir die API ab. SlahatQimrk MSG entspricht Hallo. Und auf die Antwort, die wir erhalten, rufen wir die Antwort Punkt JCN auf. Ja, ich rufen wir die Antwort Punkt JCN auf. Ja protokolliere sie einfach hier in der Konsole. Nur um es zu testen. Okay. Also hier haben wir es, und ich kann einfach auf die Schaltfläche Senden klicken und hoffentlich bekommen wir hier etwas. Und ja, es funktioniert. Die Antwort ist Hallo. Wie kann ich Ihnen heute weiterhelfen? Sehr nett. Und dann können wir mit der Einstellung der Antwort fortfahren und die Antwort wird unser Text sein, und das ist es, was wir brauchen, um den Status zwei einzustellen. Es ist also Antwort mit Punkt Antwort, und das verwenden wir hier für Set Answer, und dann wird diese Rec-Komponente erneut gerendert, und die Antwort sollte hier in unserem Ausgabe-Div angezeigt werden . Okay. Also lass uns das überprüfen. Hallo. Wie kann ich Ihnen heute weiterhelfen? Sehr gut. Es funktioniert. Es funktioniert. Okay, was fehlt, ist, dass wir die Eingabe aus dem Eingabefeld hier abrufen müssen . Und deshalb habe ich auf diesen Eingang einen Rf gesetzt. Also rufe ich use Ref message input und erhalte hier über die Nachrichteneingabe Dot Current Zugriff auf den Knoten zum DOM-Element. Also deklariere ich einfach eine konstante Eingabe, und das wird der aktuelle Punktwert der Nachrichteneingabe sein. Dies wird der Text sein, der vom Benutzer eingegeben wurde. Wir werden diese Eingabe anstelle dieses festen Hello verwenden. Also ist nur MSG gleich und dann Plus-Eingabe. Okay. Also lass es uns testen. Wie ist das Wetter heute und drücke auf Senden Es tut mir leid, aber als KI habe ich keine Echtzeitinformationen. Das wissen wir schon, aber es funktioniert. Ja. Also hier kannst du deine Chat-Nachricht eingeben, auf Senden drücken und dann bekommst du die Antwort hier in diesem Div. Also lass es uns noch einmal überprüfen. Wir haben hier unseren Staat mit Staat. Dies ist die Antwort aus dem Sprachmodell, und wir haben hier unsere Referenz zur Nachrichteneingabe. Das wird so verwendet, als ob dieser Nachrichteneingabepunkt aktuell das Dom-Element ist, das Dom-Eingabeelement, und da haben wir den Wert des Eingabetextes. Und das wird hier verwendet , um unsere API abzurufen. Und dann ist die Antwort JSN. diesem Grund nennen wir den Antwortpunkt JSN , der den Text abruft und ihn dann analysiert Und wir haben eine Antwort, die wiederum eine Antwort enthält Auch hier können wir es Antwort-JSN oder Antwortobjekt nennen , so ähnlich Antwortobjekt und dann Antwortobjekt Punktantwort wird der Text sein Und set answer wird verwendet, um unseren Status so einzustellen , dass der Objektpunkt ASE auf Text antwortet. Okay, das ist sehr einfach. Es ist nicht einmal ein Chat. Es ist nur eine Vollendung. Es ist ein Mal. Also jedes Mal, wenn du etwas schickst, wird es das einfach vervollständigen. Das Sprachmodell wird dies vervollständigen, aber Sie können keinen Chat führen, keinen vollständigen Chat, weil wir hier nur die letzten Eingaben senden. Und dann hat das Sprachmodell nur diese Eingabe und wir werden sie vervollständigen. Es ist also nur eine einmalige Nachricht die an das Sprachmodell geht und dann ist das abgeschlossen und die Antwort, die Fertigstellung, wird hier im DIV ausgegeben. Das ist momentan also keine komplette Chat-Anwendung, aber das wird natürlich erweitert. Aber das ist unser erstes funktionierendes Modell mit UI, und Sie können alles hier platzieren, und das Sprachmodell wird es vervollständigen, und wir werden Ihnen eine Antwort geben, die hoffentlich auf die eine oder andere Weise Sinn macht. Okay, das ist es für diese Videoszene in der nächsten. 10. Speichern des Chat-Verlaufs: Also haben wir jetzt eine Art Ask Me Anything App erstellt, aber es ist noch keine richtige Chat-App. Wir können dem Sprachmodell eine Nachricht schicken, und es wird die Nachricht vervollständigen und die Frage beantworten. Aber es ist kein Speicher involviert, und es erinnert sich auch nicht an den Chatverlauf. Die nächste Nachricht, die Sie an das Modell senden, ist also wieder die erste Nachricht, und das Sprachmodell auch nicht die OpenAI-API Kann mich an alles erinnern. Also müssen wir uns darum kümmern, und wir müssen den kompletten Chat-Verlauf senden , um ein Gespräch mit dem Sprachmodell zu führen. Und genau das machen wir in diesem Video. Wir müssen die Konversation speichern und den kompletten Verlauf der Konversation an die offene KI-API senden den kompletten Verlauf der . Es gibt also zwei Möglichkeiten, dies zu tun. Wir können den Chat-Verlauf auf dem Client im Browser speichern oder wir können ihn auf dem Server speichern. Das Speichern auf dem Server hat mehrere Vorteile einen müssen wir nicht den gesamten Verlauf vom Client, vom Browser zum Server immer wieder senden den gesamten Verlauf vom Client, , sondern nur die letzte Nachricht, die der Benutzer eingegeben hat. Außerdem können wir den Chat in einer Datenbank auf dem Server speichern und von überall darauf zugreifen. In dieser Lektion verwenden wir also einen serverseitigen Ansatz und speichern den Nachrichtenverlauf auf dem Server in einer einfachen Variablen. Und das ist die Variable. Sie heißt Messages und wird mit einem leeren Array initialisiert. Wir werden Nachrichten zu diesem Array hinzufügen, Wir werden Nachrichten zu diesem Array hinzufügen wann immer der Benutzer eine neue Nachricht sendet und auch, wenn das Sprachmodell uns die Vervollständigung gibt Wann immer das passiert, müssen wir eine neue Nachricht senden. Das Erste oder der erste Punkt, an dem wir die Nachricht hinzufügen müssen , befindet sich an dieser Stelle hier Wir können einfach einen neuen Eintrag in das Nachrichten-Array verschieben, und das ist dasselbe Format, dieselbe Struktur, die wir an die OpenAI-API senden Also müssen wir es so formulieren, ein Objekt mit der Rolle und dem Inhalt Also gebe ich es als Rollenbenutzer an, weil der Benutzer die Nachricht sendet und die Nachricht dann lautet, dass der Inhalt MSG sein wird Und hier können wir einfach das Nachrichten-Array an die komplette Chat-Funktion übergeben Dies werden die Array-Nachrichten sein, und wir müssen es hier nicht tun. Wir können hier einfach Nachrichten bereitstellen. In dieser Kurzform. Der komplette Chat empfängt also Nachrichten, und wir stellen sie in der Anfrage an die Open AI, um eine Chat-Abschlussfunktion zu erstellen. Also nichts weiter hier, und wir testen es. Nun, wenn es immer noch funktioniert, sollte es immer noch funktionieren, weil wir uns ändern, im Grunde haben wir nichts geändert. Also sollte es immer noch funktionieren. Also, wie geht's dir? Lass uns sehen. Als KI habe ich keine Gefühle. Okay, es scheint immer noch zu funktionieren, und es ist nicht überraschend , weil wir nichts geändert haben. Aber jetzt haben wir die Nachricht im Nachrichten-Array, und wenn der Benutzer das nächste Mal eine Nachricht eingibt, können wir sie hierher übertragen, und dann wird jede Nachricht , jede Benutzernachricht, im Nachrichten-Array gespeichert. Aber das ist nicht genug. Wir müssen auch die Antwort zum Nachrichten-Array hinzufügen. also kopieren, erhalten Sie die Antwort aus der kompletten Chat-Funktion. Und die Rolle ist diesmal nicht der Benutzer, sondern der Assistent, der Inhalt wird die Antwort sein, und das sollte es auch sein. Antwort wird hier an den Browser gesendet, aber wir speichern die Antwort auch im Nachrichten-Array. Wenn also der komplette Chat das nächste Mal als Nachricht aufgerufen wird , befinden sich die Benutzernachricht und die Antwort im Array, und auch die neue Benutzernachricht wird dort sein. Okay, also lass es uns ausprobieren. Laden Sie die Seite einfach neu. Und wie ist dann das Wetter heute? Schicken Sie, entschuldigen Sie sich. Okay. Kannst du eine App dafür empfehlen und abschicken. Und mal sehen, was sie beantwortet. Sicherlich, hier sind ein paar beliebte Wetter-Apps. Das ist also der Beweis , dass wir die Konversation wirklich gespeichert haben, denn ich beziehe mich hier auf Nachrichten oder auf eine Benutzernachricht, die schon einmal gestellt wurde weil ich mich hier darauf beziehe, eine App dafür, und es sollte eine Wetter-App oder eine Wettervorhersage-App Oder wir können es natürlich auch hier ausgeben. Jedes Mal, wenn wir die Antwort hier veröffentlichen, können wir also auch Protokollnachrichten in der Konsole speichern. Okay, dieses Mal sollte ich den Server wirklich neu starten, weil ich sonst den Chatverlauf von früher habe. Und das ist nicht das , was ich hier will. Also starte ich den Server neu und Nachrichten werden jetzt ein leeres Array sein Okay, nochmal, wie ist das Wetter Heute, ich sende und dann fast die gleiche Antwort wie zuvor Kannst du es empfehlen oder wir können dieses Mal fragen, ob es eine Webseite oder Website dafür empfehlen kann . Okay, schicke auf jeden Fall weather.com. Okay. Lassen Sie uns also die Ausgabe hier überprüfen, von hier aus. Das Wetter in House ist heute also ruhig. Das habe ich in die Benutzeroberfläche eingegeben. Der Assistent antwortete, ich entschuldige mich, aber als KI-Sprachmodell, bla, bla, bla. Und können Sie jetzt eine Website dafür empfehlen? Nochmals, Roll User. Wie ist das Wetter heute? Assistentin? Ich entschuldige mich. Nun, die neue Nachricht hier, kannst du eine Website dafür empfehlen Und dann die Antwort des Sprachmodells, hier sind sicherlich einige. Beliebt und zuverlässig, egal ob wir Websites sind , bla, bla, bla. Also ja, es scheint zu funktionieren. Wir haben unseren Chat-Verlauf. Das einzige Problem dabei ist, dass wir unseren Server neu starten müssen, damit er die Nachrichten vergisst und die Konversation neu startet. Und wir müssen uns etwas einfallen lassen, um die Nachrichten dort wahrscheinlich auf ein leeres Array zurückzusetzen, vielleicht eine Idee, die jedes Mal neu generiert wird, wenn die Seite neu geladen wird, so etwas wie Ähm , aber im Moment ist das, sagen wir, es ist nicht vollständig, keine vollständige Chat-Anwendung, sondern es ist eine Chat-Anwendung Im Moment kann ich mit einem Sprachmodell chatten, und der Verlauf wird gespeichert und verwendet, wenn ich das nächste Mal eine Nachricht an das Modell sende. Das ist es für dieses Video. Wir sehen uns im nächsten. 11. Rest-Chat: Wir haben jetzt eine funktionierende Chat-Anwendung, aber wir haben auch hier ein kleines Problem, aber das ist einfach zu lösen Der Chat kann im Moment nicht zurückgesetzt werden, ohne den Server zurückzusetzen oder neu zu starten Also müssen wir dieses kleine Problem lösen. Ich habe mir das ausgedacht, die aktuelle Chat-ID gespeichert und die ID wird vom Client an den Server gesendet. Das ist hier in den URL-Suchberechtigungen. Es wird einen neuen Parameter geben, der ID sein wird. Und die neue Chat-ID wird mit der aktuellen Chat-ID verglichen , und wenn diese ungleich sind, wird das Nachrichten-Array auf ein leeres zurückgesetzt Was hier also noch getan werden muss, ist, eine neue ID zu generieren und sie hier über einen URL-Parameter bereitzustellen , der ID heißen muss Also müssen wir hier zu unserer Komponente, unserer React-Komponente und unserem Fetch übergehen React-Komponente und unserem Fetch Wir haben diese MSG also bereits als Parameter, und dann müssen wir diese neue hinzufügen Aber ich verwende hier besser eine Vorlagenzeichenfolge innerhalb dieser Backticks. Ich kann die Variablen hier besser einfügen Also MSG und dann Dollardollar, natürlich, geschweifte Klammern, da ist unser Input. Und dann sind ein Prozent und ID gleich. Und ja, wir müssen uns eine ID mit einer neuen ID ausdenken, und diese ID muss gespeichert werden Hier, wir können es einfach hier hinstellen. Const ID ist gleich. Zum Beispiel können wir jetzt date verwenden und das ist dann unsere ID, date now two string, und das wird unsere ID sein Und jedes Mal, wenn das neu geladen wird, wird die Seite neu Wir erstellen eine neue ID, deren Datum jetzt in Unix-Zeit sein wird Okay, das sollte es also sein, die ID hier anzugeben. Und lass es uns testen. Also frage ich nach dem Sprachmodell, wie geht es dir? Und lass uns sehen, wie es dir geht. Wir haben also schon das neue D hier , weil das Nachrichten-Array nur diese beiden Nachrichten enthält. Wie geht's dir? Und die Antwort des Sprachmodells. Als KI habe ich keine Gefühle. Ich kann es fragen, warum warum. Und mal sehen, die Frage nach dem Warum ist sehr weit gefasst und offen. Okay, können wir um eine Erklärung bitten? Was auch immer. Es funktioniert hier nicht , weil der Nachrichtenbereich wieder zurückgesetzt wurde. Also stimmt hier etwas nicht. Neue Chat-ID. Lassen Sie uns die Chat-ID hier in der Konsole protokollieren. Neue Chat-ID. Hut-ID. Und lass uns sehen. Und nochmal, wie geht's dir? Und die Chat-ID wird diese sein, okay? Und warum nächstes Mal? Senden. Nein, es ist dasselbe. Okay. Also ist es dieselbe ID. Also der Server, lassen Sie uns die Logik hier überprüfen. Wir bekommen das gleiche D. Okay, ich verstehe. Wir haben es nicht gespeichert. Es sollte also die aktuelle Chat-ID sein. Sollte in diesem Fall natürlich an eine neue Chat-ID gesendet werden. Okay, versuchen wir es noch einmal. Lass uns nachladen. Und wie geht's dir jetzt? Okay, wie geht's dir? Und die Antwort. Und jetzt frage ich, warum? Mal sehen, ob es wirklich so ist. Okay, das sieht also besser aus. Wie geht's dir? Danke für die Nachfrage. Warum? Als AA-Sprachschüler bin ich darauf ausgelegt, Informationen bereitzustellen, beantworten und zu helfen. Wenn wir also die Seite neu laden, sollte sie den Chat zurücksetzen Und wie geht's dir? Jetzt haben wir ein neues Nachrichtenarray das nur die Benutzernachricht und die Antwort des Sprachmodells enthält. Okay, das scheint also zu funktionieren. Und jedes Mal, wenn Sie den Chat-Verlauf zurücksetzen möchten, müssen Sie nur die Seite hier neu laden, und das war's Okay, wir haben also eine komplette Chat-Anwendung. Nicht ganz. Wir müssen hier zum Beispiel das Eingabefeld zurücksetzen. Jedes Mal, wenn ich auf Senden drücke, sollte das gelöscht werden, und außerdem zeigen wir hier nur die letzte Antwort und keinen vollständigen Chat-Verlauf an. Das muss natürlich auch verbessert werden, aber das werden wir im nächsten Video tun. 12. Verbesserung der UX: Also werden wir einige Verbesserungen in der UX implementieren. Wenn wir zum Beispiel hier unsere Eingabe, unsere Nachricht, und auf Senden klicken, möchten wir, dass diese Nachricht hier oder das Eingabefeld gelöscht wird. Und während die Anfrage noch aussteht, möchten wir, dass sie deaktiviert ist, das Eingabefeld als auch die Schaltfläche hier. Und was sonst? Wir wollen hier den kompletten Verlauf des Chats zeigen. Lassen Sie uns also den ersten Schritt machen: Deaktiviert, solange noch ausstehend, ich habe einen neuen Status „Ausstehend“ eingeführt, und das gilt natürlich auch, solange der Abruf noch aussteht Ich habe ihn vor dem Abrufen auf true gesetzt und am Ende dieses Click-Handlers habe ich ihn auf Falls gesetzt Dann habe ich im Eingabefeld gesagt, dass deaktiviert gleich ausstehend ist und auch auf der Schaltfläche Die Schaltfläche und das Eingabefeld sind also deaktiviert, solange die Anfrage noch aussteht Also lass es uns ausprobieren oder wirst du geschickt und wir sehen, dass beide deaktiviert sind. Und das ist auch hier geklärt. Wie habe ich das gemacht? Sehr einfach. Wir haben diese Nachrichteneingabe sowieso, Punkt aktuell. Dies ist das Eingabefeld, das DOM-Element, und der Punktwert wird auf eine leere Zeichenfolge gesetzt, und dann ist der Abruf abgeschlossen, und das ist Einfach aber effektiv. Und jetzt zur Chat-Konversation, die hier unten aufgeführt wird Dies ist die letzte Antwort des Sprachmodells, und wir wollen den Chat-Verlauf oben haben, und dies sollte die letzte sein. Und vielleicht ändern wir die Reihenfolge so, dass wir unsere Nachrichteneingabe unten haben. Darüber hinaus haben wir den Chat-Verlauf, wie er zum Beispiel in Chat GBT steht . Also lass uns das machen Zuerst schalten wir dieses Ausgabefeld und platzieren es über dem Eingabefeld und der Schaltfläche. Lass es uns ausprobieren, wie es dir geht und die Antwort wird oben sein. Okay. Das ist nett. Was nicht so nett ist, ist, dass es so ist als würde man je mehr Nachrichten wir haben, runtergehen. Im Moment haben wir nur eine. Aber wenn wir die gesamte Historie haben, wird das untergehen, und das ist nicht nett für UI. Wir machen hier einfach ein Flexbox-Layout. Display-Flex und Flex-Richtung müssen also eine Spalte sein. Um hier ein vertikales Layout zu haben. Natürlich, Flex als Zeichenfolge. Okay. Und dann haben wir zwischen dem Ausgangspanel und dem Eingang einfach ein Dif mit Flex One eingefügt Okay, schauen wir uns das an. Es funktioniert nicht, weil das gesamte HDL nicht 100% ist, also müssen wir hier 100% Höhe machen Also das ist 100% Körper, muss 100% sein Okay, also der Körper ist jetzt auch 100%, und dieses Div sollten wir löschen, das löschen Dann haben wir unser Div hundertprozentig. Lass es uns später machen. Und jetzt haben wir hier unsere Komponente, unsere Reaktionskomponente, die ebenfalls eine Höhe von 100% haben sollte. Okay, jetzt funktioniert es mehr oder weniger. Wie dem auch sei, wir sollten unsere H-Zone hier löschen oder löschen. Also wir haben das hier immer noch nicht funktioniert. Aber wie dem auch sei, lass es uns tun. Also hier haben wir Stil, ich mache hier nur den Inline-Stil, um schneller zu sein, also sollte das eine Höhe von 100% haben. Kopieren Sie, das sollte auf dem Hauptteil genauso sein. Sollte das hier ansprechen, sollte es auch hier sein. Und dann sollte die Reaktionskomponente eine Höhe von 100% haben. Jetzt ist es fast fertig, aber es ist zu groß. Okay, der Körper sieht natürlich so aus, als hätte er einen Rand, sollte Marge Null sein und dann haben wir ihn. Okay. Also zurück zum Indexpunkt Astro, und wenn Sie dort einen Rand von Null setzen, sollte das Problem behoben sein. Okay. Also, jetzt brauchen wir ein bisschen Polsterung, ich schätze, hier Und wir gehen zu diesem äußeren Bereich unserer Hauptkomponente und legen einen Abstand von, sagen wir, acht Pixeln fest Und ich schätze, wir müssen auch ein Box-Sizing-Board auf ein Feld legen , weil es sonst zu groß wird Schauen wir es uns an. Okay, das sieht also gut aus. Wie geht's dir? Ich hoffe, wir haben jetzt die Antwort. Oh, komm schon. Okay, wir bekommen hier also keine Antwort von der Open AI API. Es steckt hier irgendwie fest. Ich schätze, das kann passieren. Okay, jetzt haben wir sogar einen Pfeil fünf oh drei. Ich schätze, das ist SRS nicht verfügbar. Es kann natürlich passieren, und wir versuchen es einfach noch einmal, laden es neu Wie geht's dir? Okay, das ist besser als KI, ich habe keine Gefühle und so weiter. Okay, was bleibt noch zu tun? Wir müssen natürlich die gesamte Geschichte ausdrucken. Das ist nur die letzte Antwort. Lasst uns also einen neuen Staat einführen. Wir nennen es Nachrichten, und das wird ein Array sein. Nachrichten. Der Anfangswert wird ein leeres Array sein. Und das Nachrichten-Array wird hier im Ausgabebereich angezeigt. Also hier haben wir Nachrichten auf der Karte. Und hier haben wir jede Nachricht. Und was können wir tun? Jede Nachricht wird ein Div sein und dann in einem Dif haben wir die Nachricht als Text Oh, lass uns das machen, bevor das Set noch aussteht. Wir können eine Reihe von Nachrichten senden. Und drinnen haben wir die alten Nachrichten, wir haben die alten Nachrichten und die neue und die neue ist eingegeben. Und nachdem wir die Antwort erhalten haben, müssen wir hier auch festgelegte Nachrichten aufrufen. Und dieses Mal haben wir die Nachrichten und dann keine Eingabe, aber wir haben hier die neue Antwort, nämlich die Antwort auf das Objekt mit Punkt . Lass uns das versuchen. Wir bekommen hier eine Warnung, aber wir werden uns später darum kümmern , denn wie kann ich Ihnen heute helfen? Okay. Und dann unsere Standardfrage, warum und okay, wir sehen, dass es nicht ganz funktioniert, weil das Warum verschwunden ist. Ich habe keine Gefühle , aber die Antwort ist da. Okay, es hat also irgendwie funktioniert, aber nicht vollständig. Das Problem ist natürlich, dass wir hier keine Nachrichten verwenden können. Was wir also tun können, ist neue Nachrichten zu definieren. Aus diesem Grund setzen wir hier neue Nachrichten. Und dann hier drüben, neue Nachrichten und Antwortobjektantworten. Und das sollte funktionieren Okay, also lass es uns ausprobieren. Wie werden Sie gesendet? Wir bekommen diese Warnung wieder. Aber wie dem auch sei, warum schicken. Und jetzt scheint es zu funktionieren. Wir haben hier einen Chat-Verlauf, und unten die neueste Antwort des Modells. Es sieht nicht gut aus. Es ist ziemlich hässlich , weil wir nichts haben, um die Nachrichten zu trennen. Aber davon abgesehen scheint es ganz gut zu funktionieren wird im nächsten Video ein bisschen hübscher 13. Hübscher Chat-Verlauf: Okay, in diesem Video werden wir den Chat-Verlauf ein bisschen hübscher gestalten und ich habe hier bereits einige Verbesserungen vorgenommen, also schauen wir sie uns Wie geht's dir? Unsere Standardfrage. Senden Sie und Sie sehen, dass dies gelb ist und die Antwort das Sprachmodell grün ist, die Hintergrundfarbe grün. So können wir die Farben natürlich später ändern. Aber wie habe ich das gemacht? Hier haben wir das Rendern der Nachrichten, und wir haben die Nachricht hier im Map-Callback natürlich als Parameter Und dann ist der zweite Parameter der Index, und wir überprüfen einfach, ob Index Mod Zwei gleich Null ist, was bedeutet, dass der Index durch zwei teilbar ist Dann ist die Hintergrundfarbe gelb, und wenn sie nicht durch zwei teilbar ist, wenn sie ungerade ist, dann ist sie grün Also erhalten gerade Indizes die gelbe Hintergrundfarbe und ungerade Indizes die grüne Und das ist das Ergebnis hier. Immer noch nicht sehr hübsch, aber wir können zwischen benutzergenerierten Nachrichten und sprachmodellgenerierten Antworten unterscheiden . Das ist also viel besser. Kannst du JS-Code schreiben? Und lassen Sie uns die Antwort überprüfen. Ja, ich kann dir mit JavaScript-Code helfen. Das ist nett. Gut zu wissen. Wenn wir also Hilfe benötigen, können wir das Sprachmodell fragen. Okay, das ist also besser. Immer noch nicht hübsch, wir müssen eine Lücke zwischen den Nachrichten einrichten, um es ein bisschen hübscher zu machen Okay, das ist einfach. Wir stylen das hier auf Div, sodass es Display-Flex hat. Und die Flex-Richtung wird die Spalte sein und wir fügen hier eine Lücke von, sagen wir, acht Pixeln hinzu. Das muss natürlich ein Doppelpunkt sein. Jetzt ist es richtig. Okay, lass es uns überprüfen. Wie geht's dir? Senden. Wir sehen hier bereits eine Lücke. Kannst du programmieren? Jetzt etwas kürzer. Kannst du programmieren? Ja, ich habe Programmierkenntnisse. Okay. Also das sieht besser aus. Und wir können auch den Randradius ändern, vielleicht um runde Ecken zu machen. Ähm, versuchen wir es mit vier Pixeln. Wie geht's dir? Diesmal reicht wohl eine Frage. Ja, es ist ein bisschen besser. Aber dann brauchen wir hier auch Polsterung. Also Brettradius, vier Pixel und Polsterung. Vielleicht auch vier Pixel . Wie geht's dir? Ja, sieht viel besser aus. die Farben sind immer noch hässlich, wir können sie später ändern. Aber das ist viel besser. Sie können klar zwischen Benutzernachrichten und Sprachmodellnachrichten unterscheiden . Das ist gut. Und eine weitere Sache, die ich verbessern möchte , ist , dass wir hier einfach Enter eingeben können, um die Nachricht zu senden, nicht nur, indem wir hier auf die Schaltfläche klicken, sondern auch, indem wir Enter eingeben. Also, wie geht es dir? Und dann würde Enter senden? Wir müssen zur Eingabe gehen und dann die Taste runter drücken und dann hier einen Handler, und dann hier einen Handler der das Gleiche macht wie dieser Onclick Also müssen wir das On-Click hier in eine separate Funktion extrahieren On-Click hier in eine separate Funktion Also Nachricht senden wird der Name der Funktion sein. Nachricht senden. Diese Funktion sollte asynchron sein, eine Synchronisation Okay. Und dann können wir das durch Nachricht senden ersetzen. Das ist okay. Und wenn Sie die Taste gedrückt halten, wird auch Nachricht senden aufgerufen. Aber bevor wir Send Message aufrufen, müssen wir überprüfen, ob es sich bei der Taste um die Enter-Taste handelt. Okay, also wenn die Event-Taste gleich Enter ist, sollten wir das wohl überprüfen Das ist wahr. Wir haben Nachricht senden angerufen. Wir könnten hier ein Gewicht verwenden, aber da es danach keinen Code mehr gibt, nützt es nichts. Also das Gleiche hier. Wir könnten auch, wenn wir etwas anderes machen wollen bevor wir das hier tun können. Erstellen Sie eine separate Handler-Funktion. Das ist nur der Aufruf von Send Message. Okay, lass uns überprüfen , ob das funktioniert. Wie geht's dir Enter? Okay, es funktioniert nicht. Wir können hier debuggen. Also hier haben wir unsere Komponenten, Index JSX, und wo haben wir hier die Funktion Nachricht senden? Okay. Aber ich denke, wir müssen hier den Breakpoint setzen und dann Enter, Enter drücken Okay, geben Sie also mit einem E ein. Okay, das sollte funktionieren. Okay, nochmal, weitermachen und neu laden. Wie kommst du rein, scheint zu funktionieren. Wir müssen uns um diese Warnung kümmern . Außerdem sollte jedes Kind auf der Liste ein einzigartiges Schlüsselrequisit haben. Dies ist eine Reaktionswarnung. Ja, ich habe schon gesagt, was wir tun müssen, Messages Map. Also haben wir den Index hier, und wir können den Index für den Schlüssel nehmen. Schlüssel ist also gleich Index, und das sollte die Warnung hier beseitigen Wie kommst du rein. Ja, sehr nett. Die Warnung ist weg und wir haben unseren Enter-Tastenhandler okay. Das ist es also für dieses Video. Ich denke, ich werde die Farben ändern, und im nächsten Video hast du hier eine schönere Farbe. Wir sehen uns also im nächsten Video. 14. Zusammenfassung unserer ersten Chat-App: Wir haben gerade unsere erste Chat-Anwendung fertiggestellt und können über die Open AI-API mit dem Open AI-Sprachmodell chatten über die Open AI-API mit dem Open AI-Sprachmodell Ich habe die Benutzeroberfläche hier ein wenig verbessert. Ich habe das Eingabegefühl und die Schaltfläche hier zentriert und auch das ist hier zentriert. Die Nachrichten sind jetzt zentriert und die Farben sind etwas weniger hässlich, würde ich sagen, aber wir haben eine funktionierende Chat-Anwendung. Sie können hier nette und informative, ich hoffe, Gespräche mit dem Open-AI-Sprachmodell führen, ja, aber Sie können sich natürlich auch in vielen Punkten verbessern . Sie können das Design natürlich verbessern. Wie Sie hier sehen können, gibt es zum Beispiel noch einige Dinge zu verbessern. Jetzt muss ich hier nach unten scrollen , um den Text, die nächste Nachricht, einzugeben. Das ist nicht sehr nett. Das sollte also unten bleiben und du solltest nur die Nachrichten durchblättern. Dies ist ein Beispiel, oder Sie können die Benutzeroberfläche auch verbessern indem Sie Schaltflächen zum Kopieren der Nachrichten in die Zwischenablage einfügen Sie können es natürlich auch so machen. Knöpfe wären schöner. Sie können eine Liste von Chats vergangener Chats haben, von alten Chats, wie Chat GPT nebenbei hat, und natürlich können oder müssen Sie die Chats auf dem Server in einer Datenbank speichern, Sie können sie dem Benutzer zur Verfügung stellen, und Sie können natürlich auch den Benutzer anmelden und seinen eigenen Chat-Verlauf haben und viele Personen gleichzeitig auf Ihren Chat-Server zugreifen Ihre Chat-Anwendung und so weiter und so weiter. Es gibt viele Dinge, die verbessert werden müssen. nächste Anwendung wird keine allgemeine Chat-Anwendung sein, sondern etwas Spezifischeres, und wir werden mehr Funktionen der OpenAI-API nutzen, und Sie werden lernen, wie man die Systemaufforderung benutzt, Sie werden lernen, wie man Funktionsaufrufe mit dem Sprachmodell durchführt und Aber dies ist unsere erste Anwendung, und ich denke, sie ist ziemlich brauchbar. Sie können hier gerne alles verbessern, was Sie möchten. Wir sehen uns im nächsten Video. 15. Neue App: Chatte mit NPCs in einem Text-Adventure-Spiel: Okay, ich hoffe, du bist bereit für unsere neue App, und die neue App wird natürlich einen Chat enthalten, aber dieser wird Teil eines Abenteuers oder eines RPG-Spiels sein Und wir nutzen den Chat um mit den NPCs im Spiel zu chatten Du hast also ein Abenteuerspiel oder ein Rollenspiel. In diesem Fall handelt es sich um ein Abenteuerspiel, bei dem Sie bestimmte Aufgaben erfüllen und einige sehr einfache Rätsel lösen müssen bestimmte Aufgaben erfüllen und einige sehr einfache Rätsel lösen Wir werden unsere frühere Chat-Anwendung oder allgemeine Chat-Anwendung als Ausgangspunkt verwenden unsere frühere Chat-Anwendung oder allgemeine Chat-Anwendung als und die React-Benutzeroberfläche an das Spielszenario anpassen die React-Benutzeroberfläche an das Spielszenario Zunächst müssen wir eine sehr einfache Abenteuerspielumgebung einrichten, eine sehr einfache Abenteuerspielumgebung in der wir verschiedene Orte besuchen, einfache Aktionen ausführen und mit NPCs mit Charakteren im Spiel chatten können , NPCs mit Charakteren im um Rätsel und Quests zu lösen. In dieser App oder in diesem Spiel besteht die Herausforderung also darin, das KI-Sprachmodell so einzurichten, dass es sich wie ein bestimmter Charakter verhält, z. B. ein Barkeeper in einer Bar oder ein Wissenschaftler oder ein Krieger oder was Unser erster Schritt wird also eine grundlegende Spielumgebung zu schaffen, die für unseren Anwendungsfall sehr einfach sein wird, einfach den Chat darin zu integrieren und die KI-Charaktere bestimmte Informationen preisgeben zu lassen die KI-Charaktere bestimmte Informationen preisgeben und zu verraten ob ein Rätsel gelöst ist oder nicht, und dann kann das Spiel in die eine oder andere Richtung weitergehen. Also habe ich hier schon ein bisschen Bootstrapping gemacht. Ich habe unsere Benutzeroberfläche in zwei Komponenten aufgeteilt, den Index und die Chat-Komponente Die Chat-Komponente ist im Grunde unsere alte Chat-Benutzeroberfläche, die die Nachrichteneingabe, die Schaltfläche zum Senden und den Chat-Verlauf enthält Schaltfläche zum Senden und den Chat-Verlauf , und natürlich auch die Funktionalität , das Abrufen der KI-Antwort und so weiter Und der Index JSX ist jetzt der Rest, die Spielmechanik und die Summenschaltflächen, ein Div, das die Beschreibung des aktuellen Standorts enthält das die Beschreibung des aktuellen Und hier haben wir die Befehlstasten. Im Moment sieht es also so aus, sehr, sehr einfach. Hier haben wir unsere Chat-Komponente, die fast ausschließlich unsere alte Chat-Anwendung ist, jetzt aber als Komponente. Und hier haben wir unsere Schaltflächen für Befehle, und das ist die Beschreibung des aktuellen Standorts. Hier haben wir also unseren Chat-Punkt JSX, der die gesamte Chat-Benutzeroberfläche enthält, und hier haben wir unsere Beschreibung des aktuellen Standorts Hier die Befehlsschaltflächen, Navigation zu den verschiedenen Orten Sie können nach Norden, Westen, Osten, Süden gehen. Du kannst mit jemandem reden. Du kannst etwas nehmen oder du kannst einen Gegenstand benutzen, den du schon hast. Und natürlich müssen wir das um eine Liste von NPCs erweitern, mit denen du sprechen kannst, oder Gegenständen, die du mitnehmen kannst, oder Gegenstände in deiner Ventry , die du hier sprechen kannst, oder Gegenständen, die du mitnehmen kannst verwenden kannst Aber im Moment ist das Einzige, was irgendwie funktioniert, die Navigation Also kannst du das nachladen, wir können nach Osten gehen. Das ist das einzige, was im Moment funktioniert. Also ist nur diese Schaltfläche hier aktiviert, die anderen sind deaktiviert, also kann ich nach Osten gehen, und dann ändert sich die Beschreibung hier. Das ist natürlich staatlich geregelt. Aktuelle Standort-ID, der Anfangswert ist eins, und er wird aktualisiert, wenn auf die Schaltfläche Go East geklickt wird Das ist hier drüben, stelle die aktuelle Standort-ID ein, und hier haben wir unseren aktuellen Standort mit dem Punkt Exit East, der das D des nächsten Standorts enthält Und wir haben die statischen Spieldaten in einer anderen Datei. Das ist diese Datei und das exportiert dieses Spieldatenobjekt hierher. Und drinnen haben wir Standorte, momentan drei Standorte. Und diese heißen erster Raum, zweiter Raum und dritter Raum. Und wir haben die Ausweise, angefangen mit ID eins, das ist der Startraum, und dann können wir nach Osten gehen, Ausgang Ost ist zwei. Das ist die ID dieses Raums. Dies ist der zweite Raum, und hier können Sie auch nach Osten in den dritten Raum gehen, und das ist es im Moment. Um die Beschreibung des aktuellen Standorts hier wiederzugeben, müssen wir den aktuellen Standort innerhalb der Speicherorte der Spieldaten finden . Wir finden es mit der aktuellen Standort-ID, also haben wir den aktuellen Standort. Und hier drucken wir die Beschreibung des aktuellen Standorts aus. Das war's also für den Moment. Wir haben nur diese einfache Navigation. Wir haben unsere statischen Spieldaten, unsere Beschreibung des Spiels oder das Layout. Ja, und im Moment nichts weiter. Wir haben keine Geschichte, also müssen wir uns eine gute Geschichte einfallen lassen und natürlich gute NPCs, mit denen sie sprechen können, und irgendein Rätsel, irgendeine Art von Quest, die der Spieler lösen muss Okay, das war's für dieses Video und wir werden im nächsten weitermachen 16. Einführung der Geschichte: Okay, ich habe mir eine Kurzgeschichte ausgedacht und das Rätsel für ein Abenteuerspiel ist sehr kurz weil es hier nicht darum geht, ein Abenteuerspiel zu programmieren, sondern darum, KI in ein Spiel zu integrieren und Funktionen wie Funktionsaufrufen und Systemaufforderungen usw. zu nutzen Funktionen wie Funktionsaufrufen und die KI, das Sprachmodell , eine Rolle in einem Spiel, einem Rollenspiel oder in einem Abenteuerspiel spielen zu lassen das Sprachmodell , eine Rolle in einem Spiel, einem Rollenspiel oder in einem Abenteuerspiel spielen Das Abenteuerspiel spielt also in der fernen Zukunft. Es ist 21.30 Uhr und wir sind im Weltraum landen auf einem Planeten namens Siperd Als wir ankommen, stoßen wir auf einen Ort mit einer Bar, einem Geschäft und einem Sicherheitsroboter , der es uns nicht erlaubt, ohne einen Passcode vorbeizukommen Und um am Roboter vorbei zu kommen, müssen wir dieses Rätsel lösen, die Aufgabe, die wir lösen müssen. Wir müssen einen Weg finden, den Roboter so zu überlisten, dass er uns passieren lässt. Und in der Bar erzählt uns der Barkeeper, was die Gäste sind Er weiß in der Bar und unter den Gästen ist ein KI-Spezialist, der auch viel über Roboter weiß, und er könnte uns helfen, wenn wir ihm eine Nachfüllung für sein Space Ale kaufen ihm eine Nachfüllung für sein Space Also kaufen wir ihm das neue Space Ale und er gibt uns einen speziellen Befehl, dass wir den Roboter können und der Roboter wird uns dann passieren lassen Und das ist das Ende der Geschichte oder das Ende der Suche und des Rätsels. Es ist ziemlich kurz, aber wir müssen mit zwei NPCs sprechen, zuerst mit dem Barkeeper und der zweite mit dem KI-Spezialisten Und wir könnten vielleicht auch mit dem Roboter sprechen, aber vielleicht Vielleicht ist das nur eine normale Konversation , die vorgeschrieben ist. Mal sehen, wie weit wir kommen und was müssen wir tun? Wir müssen unsere Beschreibungen der Räume ein wenig erweitern . Wir haben drei Zimmer. Der erste ist der Startort, und das wird der Ort sein, an dem wir eine Bar, ein Geschäft sehen und der Roboter und der Roboter lässt uns nicht nach Osten gehen und wir können nach Norden in die Bar gehen, und wir können nicht nach Westen und dann nach Süden gehen. Und wir können natürlich mit dem Roboter sprechen, und wir können in der Bar zuerst mit dem Barkeeper sprechen Das ist unser Plan, und wir müssen hier einige Beschreibungen einfügen Und ja, das wird der erste Ort sein , an dem wir all die anderen Orte und den Roboter sehen können all die anderen Orte und wo wir in die Bar gehen können, und wir können versuchen, in den Osten zu gehen, weil wir es versuchen, weil der Roboter uns zuerst nicht passieren lässt. Das Einzige, was wir am ersten Ort tun können , ist in die Bar zu gehen, und das wird der Ausgang Nord sein und ja, das wird der dritte Raum sein, der beschrieben wird, wird eine Bar sein. Mir fällt etwas anderes ein, aber zuerst siehst du eine Bar. Bis jetzt, vom Startplatz bis zum Startort, siehst du eine Bar, ein Geschäft und einen Sicherheitsroboter, und einen Sicherheitsroboter der den Ausgang nach Osten bewacht Die notwendigen Informationen benötigen wir. Und die zweite wird sein, ich weiß nicht, vielleicht stehst du vor einem Weltraumhafen, so etwas. Es spielt keine Rolle. Dies ist der Raum oder Ort, zu dem wir gelangen, wenn wir am Roboter vorbeikommen. Und der dritte ist die Bar. Wir können nach Norden zur Bar gehen. Also lass uns nachschauen, ob wir nach Norden gehen können. Wir können wirklich nach Norden gehen? Wir sehen uns eine Bar an, aber das funktioniert nicht. Ein Barladen in einer Sicherheitsstraße. Also sollte das hier eine Bar sein, wenn wir nach Norden gehen. Die Schaltfläche ist aktiviert, aber glaube, wir haben hier keinen On-Click-Handler ich glaube, wir haben hier keinen On-Click-Handler. Also geh nach Norden. Ja, wir brauchen hier den On-Click-Handler. Okay, legen Sie die aktuelle Standort-ID verlassen Sie North, natürlich. Und das sollte funktionieren. Ja, eine Bar. Ja, jetzt, wo wir die Geschichte haben, werde ich die Beschreibungen hier ein wenig verbessern. Und dann versuchen wir im nächsten Video, den Chat für den Barkeeper zu implementieren, also müssen wir zuerst in die Bar gehen und dann müssen wir mit dem Barkeeper sprechen, und das wird im nächsten Video geschehen 17. Vorbereitung der Quests: Also habe ich mich hier ein bisschen auf die Quests vorbereitet hier ein bisschen auf die Quests und die Bewachung des Ostausgangs eingeführt Wenn du also jetzt auf Go East drückst, bekommst du eine Meldung , dass das nicht möglich ist weil der Roboter nach einem Passcode fragt und du keinen hast Also hier hast du die Nachricht. Und das ist einfach ein Div , in dem wir Spielnachrichten wie diese ausgeben können. Ich habe auch, wie Sie hier sehen können, die Beschreibungen der Standorte verbessert . Okay, schauen wir uns an, wie ich das mit Go East und dem Check gemacht habe , bevor der Charakter in den Osten wechseln kann. Also haben wir die Spieldaten und die neuen Beschreibungen hier etwas ausführlicher. Und es gibt noch einen anderen Raum das ist der Laden. Ich bin mir nicht ganz sicher, ob der Charakter, der Spieler hier etwas tun muss, aber wir könnten vielleicht eine Quest machen, dass er hier etwas kaufen muss, um weitermachen zu können. Aber lass uns entscheiden, dass du später im Moment in den Westen gehen und dann den Laden betreten kannst, bekommst du die Beschreibung und das ist alles. Aber du kannst nicht aussteigen , weil es hier keinen Ausgang nach Nordwesten gibt, was auch immer. Du steckst also dort fest. Aber damit werden wir uns später befassen. Lassen Sie uns zunächst überprüfen, wie ich überprüft habe ob der Spieler in den Osten gehen kann oder nicht. Das liegt daran, dass ich diese Funktion hier vor dem Verlassen von Ost aktiviert habe und diese Funktion Spiellaufzeitdaten abruft und die Laufzeitdaten aus Quests bestehen Dies ist ein Bereich von Objekten. Jedes Objekt hat eine ID, die mehr oder weniger dem Namen der Quest entspricht, und eine Bool-Flag , ob die Quest, die Aufgabe abgeschlossen ist oder nicht Und immer, wenn eine Aufgabe abgeschlossen ist, wird sie aktiviert. Stimmt natürlich, und hier im On-Click-Handler der Schaltfläche „Ost verlassen“ werden wir das überprüfen lassen. Also überprüfe ich, ob für den aktuellen Standort Funktion On before Exit East definiert ist, und falls ja, rufe ich sie mit den Laufzeitdaten des Spiels auf. Dies wird die Quests und den Abschlussstatus der Quests enthalten den Abschlussstatus der Quests Dann überprüfe ich hier den Rückgabewert dieser Funktion, und wenn der Rückgabewert vor dem Prüfpunkt K wahr ist, dann ist die Quest wirklich abgeschlossen, und wir können hier zum nächsten Ort zum Standort Exit East gehen zum Standort Exit East Und wenn nicht, zeigen wir diesen Noto-Text. Also können wir hier zur Funktion On before Exit East zurückkehren und sie hier noch einmal überprüfen Ich versuche, die Quest zu finden , indem ich lerne, wie man an einem Roboter vorbeikommt, und das ist das Questobjekt, und ich werde die Quest am Punkt abgeschlossen haben. Und ein weiterer K-Text ist der Roboter. Und was einen Passcode angeht, bevor wir Sie passieren lassen. Das wird jetzt angezeigt. Wir können also für jede Richtung eine On-Before-Exit-Funktion haben , die prüft, ob wir wirklich diese Richtung gehen können oder ob vorher eine Quest erfüllt werden muss. Du kannst also auf die Taste drücken, aber sie lässt dich nicht los, sondern zeigt stattdessen diesen Text an, und dieser Text befindet sich direkt unter den Befehlsschaltflächen hier, es ist nur ein Div, und die Spielnachricht ist natürlich ein Status. Und hier verwenden wir state mit einer leeren Zeichenfolge und dann game message und set game message. Und wann immer wir diesen Nook bekommen, setzen wir die Spielnachricht auf Nook-Text Und das ist der Rückgabewert dieser Funktion On Before Exit East Okay, also so habe ich es gemacht. Und was natürlich fehlt, ist, dass wir in die Bar gehen können. Wir können natürlich schon an die Bar gehen. Und wir bekommen hier auch eine schönere Beschreibung. Sie gehen in die Bar und sehen sofort die Theke und den Barkeeper dahinter Die Bar ist nicht sehr überfüllt und es sind nur drei weitere Gäste hier. Hier müssen wir natürlich das Gespräch mit dem Barkeeper umsetzen , aber wir könnten auch mit anderen Gästen sprechen Also brauchen wir eine Art Drop-down-Menü und wählen, vielleicht wählen wir hier Optionen aus, um den Chat-Partner auszuwählen Zuerst müssen wir natürlich mit dem Barkeeper sprechen natürlich mit dem Barkeeper Vielleicht können wir das vorerst einfach überspringen und hier einfach einen On-Click-Handler machen , der sofort den Chat hier mit dem Barkeeper startet, und dann können wir den unteren Teil unserer Benutzeroberfläche verwenden , um mit dem Barkeeper zu chatten. das tun wir, und wenn wir später mit einer anderen Person, einem anderen Gast, sprechen müssen, können wir hier ein Drop-down-Menü einrichten, können wir hier ein Drop-down-Menü um zu bestimmen, mit welcher Person wir sprechen möchten Aber lass uns das im nächsten Video machen. 18. Erster Ai-Chat: Ordnung. Jetzt können wir unseren ersten Chat mit dem Barkeeper in der Bar beginnen, und ich habe den Code vorbereitet, um das zu ermöglichen Wenn ich also die Seite neu lade und dann nach Norden in die Bar gehe, kann ich auf Sprechen mit drücken, kann ich auf Sprechen mit drücken, und dann heißt es in der Spielnachricht hier , dass du mit dem Barkeeper sprichst, und ich kann Also möchte ich natürlich einen Drink bestellen. Ich brauche einen Drink. Das ist unsere alte Implementierung des allgemeinen Chats mit dem Sprachmodell. Okay, es antwortet. Ich kann einige alkoholfreie Getränke vorschlagen. Aber ich möchte ein Leerzeichen A. Und mal sehen, was es beantwortet. Okay? Dauert ein bisschen. Ah, ich sehe, du suchst nach einem Getränk zum Thema Weltraum. Ah, hier ist ein lustiges Rezept für Galactic Gazer Mocktail. Okay. Okay, es beantwortet also irgendwie das, was wir wollen. Aber jetzt sagt es uns, wie man ein Getränk mixt, aber ich bin in einer Bar und ich dachte, der Barkeeper würde das Getränk nicht für uns oder für mich mixen und es mir dann servieren Ja, sehen Sie, die KI ist nicht darauf vorbereitet, eine Rolle als Barkeeper zu spielen, und genau das müssen wir tun Aber lassen Sie uns zuerst überprüfen, was ich getan habe , um den Chat hier zu initiieren Okay, also lass uns die Seite neu laden. Wir gehen nach Norden und schauen, lass es uns noch einmal neu laden. Ich war nicht in der Bar oder wenn ich nicht in der Bar bin, kann ich mit niemandem sprechen Ich kann nehmen, ich kann es benutzen, aber es nützt nichts, weil es dort keinen Click-Handler gibt. Es gibt jetzt einen Klick-Handler auf der Sprechmit-Schaltfläche, aber ich kann ihn nicht anklicken, weil er deaktiviert ist. Also, wie funktioniert das? Gehen wir zu den Spieldaten und wir sehen in der Leiste die Position, wir haben natürlich eine nette Beschreibung und wir haben NPCs , also eine Reihe von Objekten Darin befindet sich eine ID, und die ID ist Barkeeper Damit können wir feststellen, ob es an diesem Ort jemanden gibt, mit dem wir sprechen können, und es gibt nur in der Bar das Array des NPCs, und wir können damit kontrollieren, ob die Sprechtaste deaktiviert Okay, hier ist es deaktiviert, entspricht nicht der Zählung Standorts. Die Punktlänge des Fragezeichens des NPCs ist größer Das heißt, wenn wir kein NPC-Array haben oder wenn das NPC-Array leer ist, dann wird diese Schaltfläche deaktiviert, und wenn sie etwas enthält, dann wird sie dann Der onClick-Handler ist nur ein Aufruf Chat zu starten, was eine neue Funktion ist Wir schauen uns das jetzt an und es gibt einen Parameter, der eine Zeichenfolge ist, der Barkeeper Okay, lassen Sie uns die Funktion überprüfen, Chat starten und sie erhält den Parameter hier in der Variablen talk to Das erste, was sie tut, ist Chatten auf True zu setzen . Chatten ist natürlich ein anderer Zustand, mit use state here to folds initialisiert wurde Und wenn wir einen Chat starten, setzen wir ihn auf „true“, und das wird verwendet, um die Befehlsschaltflächen zu deaktivieren Das ist also hier im Befehlsstil, und wir setzen die Zeigerereignisse Keine“, wenn wir chatten, und wenn wir nicht mit allen chatten, setzen wir auch die Deckkraft auf Null Punkt fünf oder eins, wenn Sie nicht chatten Du kannst also sehen, wir gehen nach Norden, reden mit, dann ist das irgendwie deaktiviert Es ist kein deaktiviertes Attribut, aber es sieht deaktiviert aus und du kannst es nicht anklicken. Für mich ist das also genug. Und das hier ist aktiviert und wir können den Chat starten. Dies geschieht, indem das Chat-Bool , um die Chat-Komponente anzuzeigen, oder wenn es falsch ist, wird der Chat natürlich nicht gerendert Okay, so beginnen wir unseren Chat mit dem Barkeeper Aber das Problem ist, wie Sie gesehen haben, dass das Sprachmodell nichts über unser Spiel weiß, über das Setting, dass es die Rolle eines Barkeepers spielen sollte Also müssen wir ihm sagen , dass es die Rolle eines Barkeepers in einem Weltraumabenteuerspiel spielen soll die Rolle eines Barkeepers in einem Weltraumabenteuerspiel Das machen wir also im nächsten Video. Und dafür müssen wir ja, hier unseren Aufruf zur Open AI API in diesem Jahr ein wenig ändern . Also müssen wir den Nachrichten etwas hinzufügen, nämlich die Systemaufforderung, und die Systemaufforderung bereitet das und teilt dem Sprachmodell mit , dass es sich auf eine bestimmte Weise verhalten oder eine Rolle spielen soll , indem es die Rolle beschreibt, die Situation, die Umgebung Und genau das machen wir im nächsten Video. Siegel 19. Einrichten der Bühne mit der Systembotschaft: Okay, in unserem letzten Video haben wir eine interessante Beobachtung zum Sprachmodell gemacht . Es war nicht ganz sicher, welche Rolle es in dem von uns vorgestellten Szenario spielen sollte. Am Ende wurde standardmäßig die Rolle eines KI-Assistenten anstelle des Barkeepers übernommen, den wir für unser SciFi-Abenteuerspiel im Sinn hatten Aber das ist natürlich keine Überraschung, denn wir haben keinen Kontext angegeben oder eine Rolle für das Sprachmodell spezifiziert Um das Sprachmodell zu steuern und dafür zu sorgen, dass es sich anders verhält, dass es anders reagiert, müssen wir eine Systemaufforderung verwenden. Und eine Systemaufforderung ist im Grunde eine Nachricht mit einem Rollensystem, nicht der übliche Benutzer oder Assistent. Und mit der Systemaufforderung können wir klar definieren, wie das Model auf die Chat-Nachrichten reagieren soll , und die spezifische Rolle übernehmen soll, die wir uns vorstellen, in diesem Fall der Barkeeper Indem wir also eine richtige Systemaufforderung einrichten, können wir dem Model helfen, dieser Barkeeper zu sein Wir wollen, dass es in unserem Abenteuerspiel ist. Wie können wir das machen? Die erste Nachricht im Nachrichtenarray sollte die Systemaufforderung sein, und es ist nur eine normale Nachricht mit Rollensystem. Also hier haben wir es. Wenn wir eine neue Chat-ID haben, die sich von der alten unterscheidet, haben wir Nachrichten an dieses Array gesendet, und innerhalb dieses Arrays ist dieses nicht leer. Ich habe eine neue Nachricht mit dem Rollensystem hinzugefügt, und das ist das System. Der Inhalt bereitet die Bühne für unseren Barkeeper vor und beschreibt, wie die Situation ist und wie er sich verhalten sollte Ich habe mir eine Systemaufforderung ausgedacht und sie ein bisschen getestet, also denke ich, dass es ganz okay ist, aber Sie können natürlich einige Änderungen ausprobieren und ein bisschen experimentieren, wie sich das Verhalten ändert, vielleicht können Sie es ein bisschen verbessern Aber ich denke, das ist ganz okay und der Inhalt ist, dass du in einem Science-Fiction-Textabenteuer die Rolle eines Barkeepers in einer Bar , im Jahr 21 60 Ich glaube, im Jahr 21 60 ist es nicht 21 Ich glaube, es ist 21 30, aber das ist sowieso egal. Der Spieler chattet mit dir und du solltest alle Fragen oder Fragen beantworten , die er hat. Beantworten Sie die Frage in direkter Sprache als ob Sie wirklich der feste Barkeeper wären. Dadurch soll sichergestellt werden, dass er irgendwie die Rolle des Barkeepers übernimmt In der Bar sind im Moment drei Gäste. Das ist also die Vorbereitung der Gäste. Und wenn wir dann den Barkeeper als Spieler fragen , was sind die Gäste In der Bar sollte er hier über diese drei Gäste sprechen. Der erste ist ein Ingenieur aus der Mars-Kolonie, der über neue Verbesserungen nachdenkt, an denen er für die Formierung arbeitet. Der zweite ist ein Händler darauf wartet, dass ein Kunde mit seltenen Mineralien handelt. Und der dritte ist wichtig, weil der dritte ein KI-Spezialist ist. Dieser mag es, sich nach einem langen Arbeitstag zu entspannen , indem er etwas verdünntes Bier trinkt, syntaktisch raten Sein Name ist Doktor Owen und er arbeitet für Cyberdin Cyberdin, einen der größten Megakonzerne einen Er hat immer Lust auf etwas verdünntes Bier, und im Moment ist sein Glas fast leer, was für den Spieler ein Hinweis ist Er kennt sich gut mit Themen rund um KI und Okay, und zum Schluss haben wir noch diesen Hinweis, haben wir noch diesen Hinweis falls der Spieler nach Doktor Owen fragt. Sag ihm, dass er mit größerer Wahrscheinlichkeit mit dem Spieler sprechen wird , wenn er eine Nachfüllung bekommt Der Plan ist also, dass der Spieler nach den Gästen fragt und die Barkeeper diesen drei Gästen hier erzählen Und der KI-Spezialist ist derjenige, mit dem wir sprechen sollten, und er braucht Nachschub Also, wenn du ihm einen Drink kaufst, dann wird er mit uns reden und uns vielleicht helfen , an dem Sicherheitsroboter vorbei zu kommen Okay, das ist also die Systemaufforderung. Wie gesagt, du kannst ein bisschen damit spielen und es verbessern oder komplett ändern . Wenn du eine andere Geschichte und einen anderen Charakter, anderen MPC hast, dann kannst du es nach Belieben ändern Du solltest sicherstellen, dass die Rolle klar ist, dass die Fälle, von denen du möchtest, dass das Model weiß, dass du diese Fälle beschreibst, zum Beispiel diesen Fall hier. Wenn der Spieler nach Doktor Owen fragt, solltest du ihm sagen, dass er eine Nachfüllung braucht und er eher mit dem Spieler spricht Falls er einen bekommt. Also diese Art von Hinweisen sollten Sie dem Modell geben , um sicherzustellen, dass sich das Modell so verhält, wie Sie es möchten Und ich denke, wir können es jetzt ausprobieren. Okay, also lass uns in die Bar gehen, nach Norden gehen. Und dann können wir mit dem Barkeeper sprechen. Du sprichst mit dem Barkeeper. Ich sage ihm, Hallo Kann ich etwas trinken? Natürlich, was hättest du gerne? Wir haben eine große Auswahl an Getränken. Okay. Also, was haben Sie zur Inspiration? Wenn Sie nach etwas suchen , mit dem Sie Ihre Kreativität in Schwung bringen können, empfehle ich Ihnen unser spezielles Gebräu namens Eureka Elixir Es ist eine Mischung aus seltenen Kräutern und Pflanzen, von denen gesagt wird, dass sie den Geist anregen und Inspiration anregen Möchtest du es ausprobieren? Ja, bitte. Okay. Gute Wahl. Ein Eureka Alixir kommt gleich . Okay. Kannst du mir etwas über die anderen Gäste erzählen? Sicher, und er spricht mit einigen interessanten Personen über die anderen Gäste, diesem Typen aus der Marskolonie, Billardtisch, Händler. Okay, zu guter Letzt haben wir Doktor Owen und einen Spezialisten, der für Cyberden arbeitet Er ist Stammgast hier und entspannt sich gerne nach einem langen Arbeitstag Durch etwas Synth Ale kennt er sich mit Themen rund um KI und Robotik gut mit Themen rund um KI und Wenn Sie mehr über KI und Fortschritte erfahren oder eine Diskussion über die Zukunft der Okay. Ähm, wir wollen wissen, wie man an einem Roboter vorbeikommt. Aber wie dem auch sei, Doktor Owen ist Ihr Ansprechpartner. Wenn es jemanden gibt über den Sie mehr erfahren möchten, lassen Sie es mich einfach wissen. Okay? Er erwähnt hier nicht, dass er eine Nachfüllung braucht, aber ich kann fragen Ich würde gerne mit Doktor Owen sprechen . Vielleicht sagt er mir jetzt , dass er eine Nachfüllung braucht. Äh, huh. Sein Glas ist fast leer. Okay, hier haben wir es. Im Moment ist sein Glas jedoch fast leer und er neigt dazu, gesprächiger und aufgeschlossener zu sein , wenn er etwas nachfüllt Wenn Sie ein Gespräch mit ihm führen möchten, schlage ich vor, ihm noch ein Glas zu besorgen Soll ich das für dich holen? Ja, bitte. Okay. Also gut, ein Glas Thin Ale kommt gleich nach oben. Bitteschön. Frisch eingegossen für Doktor On. Jetzt, wo er Nachschub hat, können Sie sich an ihn wenden und ein Gespräch beginnen Das ist sehr nett. Denken Sie daran, dass er wohlüberlegte Diskussionen schätzt Okay, wir werden also eine gründliche Diskussion über Sicherheitsroboter führen und darüber, wie man sie dazu bringt, uns durchzulassen Sicherheitsroboter führen und darüber, wie man sie dazu bringt, uns durchzulassen Okay, das ist also nett. Das Gespräch war okay, glaube ich, für einen Barkeeper in einem Cifer Adventure, und er erzählte uns auch die Sache mit dem Refill und Doctor Und okay, das Problem ist jetzt wir ihm quasi die Nachfüllung gekauft haben, aber wir wissen nicht, ob das oder im Spiel, wir wissen nicht, ob der Spieler das wirklich Also müssen wir herausfinden, ob der Spieler Doctor Own wirklich eine Nachfüllung gekauft hat Und im Moment ist das nicht möglich oder es ist ziemlich schwierig Weil wir den Chat hier analysieren müssten , um zu erraten, ob Doktor Owen vom Spieler eine Nachfüllung bekommt Hier müssen wir Funktionen verwenden , die im Sprachmodell ziemlich neu sind, nämlich die Fähigkeit, benutzerdefinierte Funktionen aufzurufen Und damit können wir wirklich feststellen, ob der Spieler wirklich die Nachfüllung für Doktor Owen gekauft hat und ob er diese Aufgabe wirklich erledigt und dieses Rätsel gelöst Aber im Moment ist das das Gespräch mit dem Barkeeper Okay, wie du bemerkt hast, vielleicht wird hier gescrollt, wir müssen hier die komplette Seite durchblättern Das ist nicht gut, also müssen wir uns auch darum kümmern. Aber das werden wir im nächsten Video machen. Wir sehen uns dann. 20. Funktions-Calling I: Okay, im letzten Video haben wir erfolgreich die Bühne für unseren KI-Barkeeper-Charakter bereitet Es benimmt sich also wie ein Barkeeper in einem Science-Fiction-Abenteuerspiel Aber das Problem am Ende war, dass wir nicht wirklich wissen wann der Spieler das Problem gelöst hat, die Quest gelöst hat, also ob der Spieler Doktor Own wirklich einen Drink gekauft hat, was die Lösung ist, der erste Schritt, um dann Doktor Own sprechen zu können Wir brauchen also eine Möglichkeit, vom Sprachmodell Feedback zu bekommen , dass der Spieler das Rätsel gelöst hat und dass er das Getränk für Doctor Own gekauft hat. Eine Möglichkeit, dies zu tun, und wahrscheinlich ist dies die beste Methode, besteht darin, die Sprachmodellfunktionen bereitzustellen , die es in bestimmten Situationen und in bestimmten Kontexten aufrufen kann . Dies wird auch verwendet, um Lebensinformationen anzufordern , beispielsweise Wetterinformationen oder Preisinformationen für Produkte. Wenn Sie beispielsweise möchten, dass das Sprachmodell Ihnen das aktuelle Wetter mitteilen kann, können Sie dem Modell eine Funktion zur Verfügung stellen, mit der das aktuelle Wetter als Standort abgerufen werden aktuelle Wetter mitteilen kann, können Sie dem Modell eine Funktion zur Verfügung stellen, mit der das aktuelle Wetter als Standort abgerufen kann. Wenn das Modell der Meinung ist, dass es angemessen ist, diese Funktion aufzurufen, wird es dies tun Wenn ich also mit dem Model chatte und nach dem aktuellen Wetter frage, wird es hoffentlich diese Funktion aufrufen, und unser Programm muss die Daten abrufen, die aktuellen Wetterdaten für einen bestimmten Ort und sie dann dem Modell zurückgeben, und dann kann das Model den Chat mit diesen Informationen abschließen den Chat mit diesen Informationen und dem Benutzer wahrscheinlich das aktuelle Wetter mitteilen. Also lass uns das für unseren Barkeeper hier machen, und ich habe das schon vorbereitet Wir haben also diese komplette Chat-Funktion, die wiederum die Openai Dot Create Chat-Abschlussfunktion aufruft die Openai Dot Create Chat-Abschlussfunktion Wir haben hier also das Modell, was wichtig ist, weil Sie dieses Modell im Moment einstellen müssen , da ältere Modelle keine Funktionsaufrufen verwenden können Bitte achten Sie also darauf, dass Sie hier genau dieses Modell angeben, und wir haben die Meldungen wie zuvor. Ist neu. Es ist eine Reihe von Objekten die Funktionen beschreiben, die das Sprachmodell aufrufen kann. Wir haben hier also diese eine Funktion. Der Name ist von Doctor On Drink. Das ist nur ein Name , um ihn später zu identifizieren. Wenn das Modell die Funktion wirklich aufruft, dann wissen wir, welche Funktion aufgerufen werden muss. Und das ist hier eine sehr wichtige Beschreibung , denn Sie müssen beschreiben, was diese Funktion macht , damit das Sprachmodell entscheiden kann, sie aufzurufen. Und die Beschreibung hier ist von Doctor On a drink or fill sein Glas Mal sehen, ob das funktioniert und ob das Sprachmodell diese Funktion wirklich aufruft Wir haben Parameter, was hier ein Unterobjekt ist, und wir haben hier im Grunde keine echten Parameter. Das ist also nicht so wichtig. Leg das einfach so rein. Im Moment haben wir keine Parameter. Wenn Sie jedoch beispielsweise eine Funktion zum Abrufen der Wetterinformationen für einen bestimmten Ort bereitstellen möchten , der wichtigste Parameter der Standort selbst, z. B. die Stadt oder das Land Also das haben wir bisher gemacht. Wir haben Funktionen bereitgestellt. Das Sprachmodell kann diese Funktion aufrufen, und wie ist es, wenn es diese Funktion wirklich aufruft? Woher wissen wir, dass ein Funktionsaufruf erfolgt? Das ist diese Zeile, ich antworte Nachricht , also eine vollständige Antwort auf den Index der Datenauswahl Nullpunkt, in der wir auch den Inhalt haben, und im selben Objekt können wir einen Funktionsunterstrich aufrufen Und wenn das definiert ist, protokollieren wir hier einfach den Funktionsaufruf Punktname in der Konsole In unserem Fall sollte der Funktionsaufruf Punktname von Doctor On Drink sein. Damit wir es testen können. Wir gehen in die Bar, sprechen mit dem Barkeeper und fragen direkt, ob der Barkeeper Doktor Owen etwas zu trinken geben kann Können Sie Doktor Owen in meinem Namen eine Nachfüllung geben? Und lassen Sie uns sehen, ob das Sprachmodell wirklich unsere neu bereitgestellte Funktion aufruft Sende und lass uns sehen. Hier gibt es keine Antwort. Das ist ein gutes Zeichen , denn mal sehen, ob das wirklich ausgedruckt ist. Okay, hier ist es also. Hallo, können Sie Doktor Ona in meinem Namen eine Rückerstattung geben? LLM-Funktion für ein großes Sprachmodell namens By Doctor Own Drink Das hat funktioniert. Das Sprachmodell ruft diese Funktion hier wirklich auf, und wenn es die Funktion aufruft, wissen wir, dass der Spieler Doctor Owner Drink kaufen wollte. Und ja, wir können damit umgehen. Wir können es an den Kunden senden und der Kunde kann es sich in einer Variablen merken, und dann kann diese Quest gelöst werden. Wir müssen hier also eine Antwort auf das Sprachmodell geben , sodass diese Nachricht in dieser Funktionsaufrufnachricht keinen Inhalt enthält. Deshalb wird hier nichts ausgedruckt, weil es keine Nachricht gibt, und es wird erwartet, dass die nächste Nachricht das Ergebnis dieses Funktionsaufrufs sein wird . Wir müssen also eine neue Nachricht für das Large-Sprachmodell bereitstellen , und dann kann es den Chat mit diesen Informationen abschließen , aber das wird im nächsten Video reichen. 21. Funktions-Calling II für das Ergebnis: Okay, in diesem Video beenden wir die Bearbeitung des Funktionsaufrufs und stellen das Sprachmodell, das Ergebnis des Sprachaufrufs , zur Verfügung, sodass der Chat mit seinem eigenen Inhalt abgeschlossen werden kann . Okay, hier haben wir also das Konsolenprotokoll mit dem Namen des Funktionsaufrufs. Und ich habe einen neuen Funktionsaufruf hinzugefügt und gebe ihm hier das Funktionsaufrufobjekt. Dies ist eine asynchrone Funktion, und sie gibt die Antwort, den Abschluss und den Abschluss des Chats des Sprachmodells mit den von uns bereitgestellten Daten zurück des Chats des Sprachmodells mit . Wie funktioniert sie? Lass es uns überprüfen. Es schiebt nur eine weitere Nachricht in das Array mit Rollenfunktion. Das ist wichtig. Das heißt also, oder das Sprachmodell kann dies als Ergebnis des Funktionsaufrufs interpretieren. Wir geben auch den Namen der Funktion an, Funktionsaufruf Punkt. Und der Inhalt ist, dass Doktor Owen vom Barkeeper eine Nachfüllung bekommt, lächelt und Und dieser Inhalt ist die Information, die das große Sprachmodell verwenden wird, um eine Vervollständigung zu generieren Und dann rufen wir hier einfach openi dot create chat completion mit unserem Nachrichten-Array und mit dem Modell auf, und ich habe auch eine Konstante mit dem Modell erstellt, weil wir zwei Standorte haben, die das Create Chat Completion nennen , und wir müssen hier natürlich dasselbe Modell verwenden, weil nur dieses Modell Funktionsaufrufen unterstützt , also bekommen wir hier die Antwort auf den Funktionsaufruf und dann extrahieren wir den Nachrichtendatenauswahlindex Nullnachricht Und das ist es, was hier zurückgegeben wird, und dann haben wir die Nachricht hier. Und diese Funktion gibt den Punktinhalt der Antwortnachricht zurück Dies ist der Text, den das Large-Sprachmodell fertiggestellt hat. Okay, also lass es uns ausprobieren. Ich lade hier nach. Geh nach Norden in die Bar, sprich mit dem Barkeeper Und dann frage ich nach den anderen Gästen. Was kannst du mir über die anderen Gäste erzählen? Und dann teilt es uns alle Informationen über die Gäste mit, die wir dem großen Sprachmodell in der Systemaufforderung gegeben die wir dem großen Sprachmodell in haben. Und zu guter Letzt haben wir Doktor Owen. Natürlich wollen wir mit ihm sprechen, aber die Nachfüllung wird nicht erwähnt Also werde ich dem Barkeeper sagen, dass ich mit Doktor Owen sprechen möchte Und hoffentlich sagt er mir , dass ich ihm einen Drink spendieren muss, klar Wie wäre es, wenn ich sein Glas nachfülle? Okay. Und diese Nachricht sollte das große Sprachmodell veranlassen , die von uns bereitgestellte Funktion aufzurufen. Okay, füllen Sie bitte das Glas von Doktor Owen auf und sagen Sie ihm, dass ich gerne mit ihm über Robotik und Sicherheit sprechen würde gerne mit ihm über Robotik und Sicherheit sprechen Okay, und jetzt sollte es hoffentlich unsere Funktion aufrufen. Okay, hier ist es. Ich fülle gerade Doktor Owens Glas nach Ich gehe rüber und sage ihm, dass du an einem Gespräch interessiert bist. Gib mir einen Moment. Okay, hey, Doktor Oh, ich habe hier jemanden, der gerne über Robotik und Sicherheit plaudern würde . Okay, wenn ich Sie vorstelle, Doktor Own schaut mit einem freundlichen Lächeln aus seinem Glas Absolut. Ich werde mich freuen, mit Ihnen zu sprechen. Bitte stell uns vor. Okay. Aber wir müssen überprüfen, ob die Funktion wirklich aufgerufen wurde. Lassen Sie uns also hier das Konsolenprotokoll überprüfen. Bitte füllen Sie das Glas von Doctor Owns nach. Okay, das ist es also. Und dann haben wir den Funktionsaufruf. Hier ist er. Rollenfunktion ist unsere Antwort. Name von Doktor Own Drink. Doctor Own darf nachfüllen. Das geben wir dem Sprachmodell als Antwort auf den Funktionsaufruf, und jetzt antwortet es mit Ich fülle einfach das Glas von Doktor Owns Okay, das ist sehr nett. Und jetzt müssen wir irgendwie mitteilen dem Kunden irgendwie mitteilen, dass diese Quest abgeschlossen ist, und dann müssen wir auch Lage sein, das Gespräch mit dem Barkeeper im Moment zu beenden das Gespräch mit dem Barkeeper im Moment Wir können nicht zum normalen Modus zurückkehren. Und wir bleiben jetzt im Chat und müssen uns überlegen, wie wir das Gespräch beenden können. Wir könnten einfach nach bestimmten Wörtern wie Beenden oder Verlassen oder so suchen und dem Spieler sagen, dass du den Chat mit dem Barkeeper beenden kannst, indem du Exit oder Quit oder was auch immer eintippst Oder wir könnten auch eine andere Funktion verwenden, um zu erkennen, wenn das große Sprachmodell erkennt, dass Spieler die Konversation beenden möchte , und dann die neue Funktion aufrufen , und dann wissen wir, Okay, also muss die Konversation jetzt beendet werden, der Chat muss jetzt beendet werden und wir kehren zum normalen Modus zurück. Ich denke, ich werde mich für die letzte entscheiden und eine neue Funktion einführen, Chat verlassen oder die Konversation verlassen, und hoffentlich ruft das Sprachmodell diese Funktion auf, und dann wissen wir, dass wir die Konversation beenden und zum normalen Modus zurückkehren können , und das wird im nächsten Video funktionieren. 22. Quest als abgeschlossen markieren: Okay, also in diesem Video wollen wir die Quest, Doctor On ein Getränk zu kaufen und uns auf den Chat mit Doktor On vorzubereiten, als abgeschlossen markieren , und das müssen wir am Kunden machen, also müssen wir diese Information irgendwie an den Kunden weitergeben. Und ich habe das schon gemacht, und so habe ich es gemacht. Wir haben hier den Handle-Funktionsaufruf , der hier in dieser „Ich antworte“ -Nachricht zurückgegeben wird . Der Funktionsaufruf ist nicht gleich undefiniert Und dann mache ich das hier, beantworte die Nachricht mit dem Punkt Completed Quest und setze sie auf ByDocTownDrink Also verwende ich dieses Objekt , das vom Handle-Funktionsaufruf zurückgegeben und die abgeschlossene Quest markiert wird Handle-Funktionsaufruf zurückgegeben und die abgeschlossene Quest markiert In diesem Fall ist es das von By Doctor eigene Getränk, und das wird von dieser Funktion hier zurückgegeben, und ich musste das ein wenig ändern weil die Antwort jetzt nicht nur ein Text, sondern ein Objekt ist. Hier in unseren Nachrichten müssen wir also den Inhalt der Antwortpunkte speichern, und hier geben wir das komplette Objekt zurück, das dann den Inhalt und auch die abgeschlossene Aufgabe enthält. Okay, dann wechseln wir zu unserem Client und hier ist die Funktion zum Senden von Nachrichten hier. Wir erhalten die Antwort, und dieses Mal lautet die Antwort Antwort Objekt Punkt Antwort ist kein Text, also müssen wir die Antwort hier so einstellen, dass sie den Inhalt des Antwortobjekts mit Punkt beantwortet. Und dann wird es hier auch diese abgeschlossene Questeigenschaft geben. Welches wird in diesem Fall per Arztgetränk auf die erledigte Aufgabe übertragen. Also müssen wir die Quest finden. Dazu vergleichen wir die ID mit der ID, die in der abgeschlossenen Quest angegeben wurde. Und damit das funktioniert, müssen wir hier in unserer Chat-Komponente ein neues Requisit einführen, Spiellaufzeitdaten, denn in den Laufzeitdaten des Spiels haben wir dieses Quests-Array, und dort müssen wir in diesem Fall „By doctor own drink completed“ auf True setzen in diesem Fall „By doctor own drink completed“ auf True Okay, hier ist das neue Requisit und im Chat können wir die Laufzeitdaten des Spiels destrukturieren und wir können sie hier verwenden, um die Quest zu finden. Das ist das. Vergleiche einfach die ID mit der, die wir vom Server bekommen haben, Quest abgeschlossen. Und wenn wir dann die Quest haben, können wir Quest Dot Completed auf true setzen und sie dann auch hier auf der Konsole protokollieren. Okay, also lass es uns versuchen, nach Norden gehen und mit dir reden. Und jetzt sagen wir direkt, bitte, okay, bitte kauf Doktor Owen einen Drink Und das sollte unseren Funktionsaufruf auslösen. Los geht's. Doctor Own noch eine Runde Synth Ale für dich. Viel Spaß Und hier haben wir den Beweis, dass wir die Quest jetzt abgeschlossen haben Dies ist die Quest von Doktor Onrink abgeschlossen wurde und für wahr erklärt wurde Das bedeutet, dass wir diesen Code hier durchgegangen sind. Jetzt ist die Quest abgeschlossen. Okay, jetzt können wir mit Doktor Owen sprechen, und wenn diese Quest nicht abgeschlossen ist, sollten wir dem Spieler nicht erlauben, mit Doktor Own zu sprechen, aber wenn ja, können wir es jetzt zulassen, und wir müssen den Chat natürlich auch hier verlassen Das ist noch nicht erledigt, also können wir im Moment nicht, wir können es nicht verlassen Wir können den Chat nicht hier und wieder verlassen, hier zu unseren Befehlsschaltflächen gehen und mit Doktor Own sprechen. Und wir müssen natürlich auch ein Drop-down-Menü oder so etwas wie eine Auswahloption bereitstellen, um auszuwählen, mit welcher Person wir mit dem Barkeeper oder Doktor Own sprechen möchten dem Barkeeper oder Doktor Own sprechen Okay, das machen wir im nächsten 23. Verlassen des Chats: Okay, die nächste Herausforderung besteht also darin, dem Spieler zu ermöglichen, den Chat zu verlassen. Er kann es in einer natürlichen Sprache machen, wie er will, und wir werden eine neue Funktion bereitstellen , eine zusätzliche Funktion. Wir haben bereits eine Funktion, um Doctor On ein Getränk zu kaufen, und wir werden eine zweite Funktion anbieten, und diese Funktion wird Leave Chat heißen. Und hier haben wir schon die Argumente für diese Funktion. Aber lassen Sie uns die Funktion selbst überprüfen. Zunächst die Funktionsbeschreibung. Hier rufen wir Create Chat Completion auf, wir haben die erste Funktion bereits von Doctor On Drink, und das ist die zweite Funktion, Chat verlassen. Die Beschreibung lautet: Beende den Chat mit dem Spieler. Keine Parameter. Dies ist die zweite Funktion und hoffentlich ruft das Sprachmodell sie auf, wenn der Spieler die Konversation beenden möchte. Okay, was müssen wir noch tun? Wir müssen uns natürlich um den Funktionsaufruf kümmern , und das habe ich hier ein wenig berücksichtigt Der Handle-Funktionsaufruf wird immer noch aufgerufen und alles wird darin abgewickelt Auch die Einstellung der abgeschlossenen Quest und natürlich auch die Handhabung der neuen Funktion. Fangen wir hier an. Wir haben den Inhalt, der hier gesetzt wird , im Switch im Gehäuse, und dann übertragen wir den Inhalt hier als Nachricht als Ergebnis eines Funktionsaufrufs an Nachrichten. Und wir wechseln natürlich nach dem Namen des Funktionsaufrufs. Also der erste wird von Doctor On Drink sein. Der Inhalt wird auf das eingestellt, was wir bereits hatten. Doktor Own bekommt eine Nachfüllung vom Barkeeper, lächelt und hebt Und wir haben auch diese Antwort gefunden: Quest von Doctor On Drink abgeschlossen Und das ist ein neues Objekt, eine objektwörtliche Antwort. Und am Ende werden wir hier die Vervollständigung aus dem Sprachmodell in dieses Objekt zusammenführen die Vervollständigung aus dem Sprachmodell hier die Vervollständigung aus dem Sprachmodell in dieses Objekt Aber zuerst setzen wir abgeschlossene Quest auf Doktor Onrink und in diesem Fall auch, wenn wir den Chat verlassen, setzen wir das Ende der Konversation auf True Und hier in einem Standardfall kennen wir den Funktionsnamen einfach nicht, und das ist der Inhalt Ich weiß nicht, was ich mit diesem Funktionsaufruf machen soll . Sehr ehrliche Antwort. Okay. Dann schieben wir die neue Nachricht auf Nachrichten und rufen Create Chat Completion mit diesen Nachrichten Dann wird die Antwort mit unserem Antwortobjekt hier zusammengeführt unserem Antwortobjekt hier , sodass wir Quest und Konversation abgeschlossen haben. Natürlich werden der Inhalt der Nachricht und die Rolle hier in der Antwort enthalten sein und wir geben dieses Objekt , sodass wir es von dieser Funktion hier zurückgeben können, dann können wir es in der Antwort vom Server zurückgeben, und dann erhält es der Client. Und hier in Nachricht senden überprüfen wir natürlich, ob abgeschlossene Quest ungleich oder undefiniert ist oder ob Antwort und Konversation wahr sind, und dann rufen wir die Funktion auf, die per Requisite bereitgestellt wird. Diese Funktion ist Konversation beenden, und die Requisite befindet sich hier in unserer Chat-Komponente, natürlich, Konversation beenden, wir setzen das Chatten auf natürlich, Konversation beenden, False und dann wird der Modus wieder in den Nicht-Chat-Modus umgeschaltet Okay, lass es uns jetzt testen, nach Norden gehen und mit dir reden Ich möchte das Gespräch sofort beenden. Auf Wiedersehen. Und dann ist das Gespräch wirklich beendet. Hier können Sie sehen, dass das Ende der Konversation wahr ist, und wir können es nicht sehen. Leider können wir die Antwort nicht nur hier sehen. Auf Wiedersehen. Hab einen schönen Tag. Wenn Sie weitere Fragen haben, können Sie gerne wiederkommen. Prost. Das ist also nicht sichtbar , weil die Chat-Komponente nicht mehr gerendert wird , weil wir den Chat-Modus verlassen haben Also lass uns noch einmal versuchen, mit dem Barkeeper zu sprechen und dann bitte Doktor Owen einen Drink Das sollte funktionieren. Natürlich habe ich Doctor Own noch ein Duftbier gekauft, und hier können Sie sehen, dass die abgeschlossene Quest von Doktor Owen Drink stammt und wir die Aufgabe abgeschlossen haben Jetzt wollen wir den Chat wieder verlassen . Mal sehen, ob es funktioniert. Auf Wiedersehen. Und du siehst, dass es nicht funktioniert. Es ruft die Funktion nicht erneut auf. Warum ist das so? Das Problem ist, dass wir die Konversation bereits beendet haben und für das Sprachmodell die Konversation bereits beendet wurde, sodass es keinen Sinn macht, die Funktion erneut aufzurufen. Warum ist das so? Weil wir beim zweiten Mal mit dem Barkeeper sprechen, der sich immer noch an alle Nachrichten erinnert und das Gespräch schon vorher beendet Das Sprachmodell, bei alle Nachrichten von zuvor angezeigt oder die Abschiedsnachrichten und der Funktionsaufruf und das Ergebnis angezeigt werden, hat die Konversation bereits beendet, sodass die Funktion nicht erneut aufgerufen wird Was machen wir jetzt? Wir müssen das Nachrichten-Array zurücksetzen. Lass uns das machen. Immer wenn wir mit dem Barkeeper sprechen, müssen wir das Nachrichtenfeld zurücksetzen. Tun wir das? Wir müssen diese ID auf eine neue setzen. Und wann immer wir das tun, wird das Nachrichten-Array auf dem Server neu initialisiert Also, wie machen wir das? Zum Beispiel können wir die Chat-ID als Requisite, Chat-ID, angeben die Chat-ID als Requisite, Chat-ID, Immer wenn wir auf ein Gespräch mit klicken, kann es regeneriert werden Verwenden wir hier also einen Status, Chat-ID, und hier können wir den Status verwenden Lassen Sie uns jetzt dasselbe Datum als Zeichenfolge verwenden. Und dann Chat-ID und Chat-ID festlegen. Okay, statt dieser ID verwenden wir hier die Chat-ID Okay, die Nachrichten-ID wird also die Chat-ID sein. Okay, das wird also die neue sein, lege die Chat-ID fest. Und wann immer wir auf „Sprechen mit“ drücken, generieren wir eine neue. Wo ist es? Also hier ist es, starte den Chat und starte den Chat. Wir rufen nicht nur „Chat einrichten“ an, sondern setzen auch die Chat-ID auf eine neue. Und diese neue Chat-ID wird dann dort drüben im Chat verwendet. Okay, also lass es uns versuchen. Geh nach Norden, rede mit und wir verabschieden uns und verlassen hoffentlich den Chat. Okay? Das hat funktioniert, und jetzt sprechen wir wieder mit dem Barkeeper Tschüss, Doktor. Bei einem Drink funktioniert das von Doctor On Drink und jetzt wieder. Ja, das hat funktioniert. Die Konversation ist wahr, und wir haben den Chat-Modus verlassen. Also das hat sehr gut funktioniert. Und immer wenn wir auf T zwei drücken, bekommen wir einen neuen Chat und der gesamte Verlauf ist weg, was für einige Spiele und für manche Situationen vielleicht nicht so gut ist . Aber in unserem Fall denke ich, dass das eine gute Lösung für das Problem ist, und wir können jedes Mal neu beginnen, wenn wir auf Talk to drücken. Okay, das ist also unsere Lösung, das Gespräch hier zu belassen, und das nächste Mal wird es im nächsten Video darum gehen, hier mit verschiedenen Personen zu sprechen. Wir sehen uns. 24. Sprich mit Dr. Owen: Okay, jetzt besteht die Aufgabe darin, dem Spieler zu ermöglichen, mit Doktor Owen zu sprechen Er hat bereits mit dem Barkeeper gesprochen und die Aufgabe erledigt, und jetzt müssen wir eine Methode implementieren , mit der der Spieler mit Doktor Owen sprechen kann Im Moment haben wir nur die Two-Taste oder wir hatten nur die Two-Taste Und ich habe das mit einem Drop-down-Menü mit einer Auswahl auf diesen Vortrag ausgedehnt . Und lass uns in die Bar gehen, um es hier zu zeigen. Sprechen Sie mit, und jetzt haben wir diesen Dropdown-Barkeeper, der die einzige Person ist, mit der Sie im Moment sprechen können, weil Sie nicht mit dem Barkeeper gesprochen und die Aufgabe erledigt haben und die Aufgabe erledigt Der Barkeeper ist hier also die einzige Option. Und dann sprechen wir mit dem Barkeeper, geben Doktor Owen Bitteschön, Doktor Owen. Und dann sagen wir Tschüss. Und dann gehen wir in den normalen Modus, und jetzt ist in dieser Dropdownliste Doktor Owen drin, und jetzt können wir auf „Mit Doktor Owen sprechen“ drücken, aber das ist noch nicht implementiert Wir müssen einen neuen Chat starten, aber dieses Mal müssen wir natürlich eine andere Systemaufforderung verwenden, weil Doktor Owen eine andere Geschichte hat, einen anderen Charakter hat als der Barkeeper, einen anderen Charakter hat als der Barkeeper, also müssen wir einen Chat mit einer anderen Systemaufforderung starten Chat mit einer Aber lassen Sie uns überprüfen, wie ich das gemacht habe. Ich habe etwas in die Spieldaten für diesen Ort eingegeben. Jetzt haben wir also ein NPC-Array. Jeder Teilnehmer im Array hat eine ID und einen Namen. Der Name ist die Zeichenfolge, die in der Dropdownliste angezeigt wird und die ID ist eine interne ID, um den Eintrag hier zu finden Okay, das ist es also. Das sind die verfügbaren NPCs an diesem Ort in der Bar, in diesem Fall Ort mit der ID Drei. Das ist die Bar Außerdem habe ich die Funktion „Verfügbare NPCs abrufen“ hinzugefügt, und das gibt uns alle Ideen der verfügbaren Personen, mit denen wir sprechen können, zurück . Denn wenn der Spieler die Bar betritt, gibt es zunächst nur den Barkeeper, mit dem er sprechen kann, aber wenn die Aufgabe erledigt ist, haben wir auch einen Hund , mit dem wir sprechen Und das ist hier erledigt, sucht die Quest aus den Spieldaten des Spiels Runtime Data Quests, findet die Quest mit der ID von Doc to Ownrink und prüft dann hier, ob der Status abgeschlossen ist. Und wenn es abgeschlossen ist, haben wir beide NPCs, mit denen wir sprechen können, und wenn nicht, haben wir nur Und das wird hier benutzt. Also hier haben wir den Button Reden mit. Das ist die Auswahl, und dann haben wir hier die Optionen. Drinnen, und wir kriegen die NPCs mit einer Karte. Und dann überprüfen wir für jeden NPC, ob dieser MPC verfügbar ist, um mit ihm zu sprechen, also holen wir uns die verfügbaren PCs und prüfen, ob sich die ID in diesem Array befindet Und wenn ja, rendern Sie diese Option hier, und wenn nicht, wird keine Option gerendert Außerdem setzen wir den Schlüssel auf die ID des MPC. Hier ist das nicht ideal. Wir sollten hier den Namen verwenden, da dies der Name ist , der in der Drop-down-Liste angezeigt wird. Also lass es uns noch einmal überprüfen. Geh nach Norden, sprich mit dem Barkeeper. Ja. Okay. Also hallo, gib Doktor Owen etwas zu trinken Inzwischen haben wir hier Doktor On mit einem schönen Namen. Und das ist der Name, und die ID wird lauten, wir hätten natürlich auch den gleichen verwenden können. Die ID könnte auch Doctor Dot Space On sein. Aber wie dem auch sei, lassen wir es so. Also das funktioniert schon, aber natürlich können wir im Moment nicht mit Doktor On sprechen, können wir im Moment nicht mit Doktor On sprechen weil wir jedes Mal, wenn wir auf die Talk-to-Taste drücken, einen Chat mit dem Barkeeper hier beginnen, und das müssen wir ändern Also müssen wir überprüfen, was hier ausgewählt ist , und dann einen Chat mit Doktor On starten, und dann brauchen wir auf dem Server eine zweite Systemaufforderung hier und wir müssen zwischen diesen beiden Eingabeaufforderungen wechseln, eine für den Barkeeper und eine für Doktor On, und das wird im nächsten Video geschehen. 25. Neuen Chat auf dem Server starten: Okay, jetzt starten wir einen neuen Chat auf dem Server , damit wir uns unterhalten können. Der Spieler kann mit Doktor Owen sprechen Aber zuerst müssen wir ein bisschen arbeiten, oder ich habe diese Arbeit schon gemacht, und ich werde es Ihnen jetzt erklären Also musste ich als Erstes einen Wert für die Option festlegen, und der Wert ist die NPCID, und der Wert ist die NPCID sodass wir diese ID immer dann abrufen können , wenn sich die Auswahl ändert Also haben wir hier bei der Auswahl den On-Change-Handle. Und es bekommt die Veranstaltung. Und dann setzt es einen Status, der T auf NPC gesetzt wird, und es setzt ihn auf den Zielwert für das Ereignis, und das ist der Wert der ausgewählten Option Sobald dies erledigt ist, können wir hier zum Nutzungsstatus wechseln, das ist nur der Status, und er wird mit einer leeren Zeichenfolge initialisiert. Er ist aktuell aus dem Dropdown ausgewählt, die Person, der NPC aus dem Und jedes Mal, wenn wir auf die Schaltfläche „Sprechen mit“ klicken , und das ist hier der der Schaltfläche „Sprechen mit“, wird das aktuelle Gespräch mit dem NPC angezeigt, dem es sich entweder um das Gespräch mit dem NPC mit dem Status handelt. Aber wenn das gewählte Onchange-Event nicht eingetroffen ist, müssen wir den ersten NPC vom aktuellen Standort hierher holen vom aktuellen Standort hierher Also aktueller Standort, Punkt, NPCs, Index, Null Punkt-ID. Aber wenn On change ausgelöst wurde, dann haben wir es hier schon eingestellt Also talk to NPC wird dann der neue sein. Okay? Also das ist es, und wir setzen es hier wieder auf den Status, um hier den Standardwert zu haben. Und dann beginnen wir den Chat mit dem aktuellen Gespräch mit dem NPC , der natürlich zuerst der Barkeeper sein wird Und dann, nachdem wir die Aufgabe erledigt haben, gehört der Doktor, und wir gehen zum SA-Chat, und das ist fast das Gleiche wie zuvor, aber hier ist der Unterschied , den wir hier festlegen Du sprichst mit und dann den Namen des MPC, mit dem wir sprechen, das sind dann den Namen des MPC, mit dem wir sprechen, NPCs am aktuellen Standort Finde und finde dann die Gesprächs-ID hier oder den MPC mit der Und der Name, wir nehmen den Namen, nicht die ID, um ihn hier auszudrucken. Okay, dann müssen wir noch etwas tun, wir müssen der Chat-Komponente eine neue Requisite geben, mit der man sprechen kann, und das ist mit dem NPC im Chat sprechen. Wenn wir die Nachricht senden, müssen wir diesen Parameter hier angeben, mit talk to, das ist diese Requisite, die wir hier ist diese Requisite, die wir von den Requisiten hier destrukturiert Also lassen wir diese Requisite ansprechen, das ist der NPC, mit dem der Spieler sprechen das ist der NPC, mit dem der Spieler Und wenn wir hier den Abschluss abrufen, den Abschluss des Chats, geben wir hier den Talk-to-Parameter an Okay, das ist es für den Client und jetzt für den Server Und auf dem Server habe ich ein neues Array erstellt . Es ist kein Array. Es ist ein Objekt, und das Objekt enthält Eigenschaften für Barkeeper und Doktor Owen für die IDs der NPCs Das sind die Systemaufforderungen hier. Wir haben also zwei Systemaufforderungen, eine für den Barkeeper. Eine für Doktor Own und wann immer wir das Get Here erledigen, extrahieren wir die Suchperm, sprechen, an die der Client an den Server sendet, und jetzt haben wir den MPC, und dann können wir die Systemaufforderung des NPCs nehmen, und das wird entweder zuerst diese sein, und dann, wenn die Aufgabe abgeschlossen ist und der Spieler mit Doktor sprechen möchte Oh, die richtige Systemaufforderung hier. Das ist also die neue Systemaufforderung. Sie spielen die Rolle eines KI-Spezialisten , der sich nach einem langen Arbeitstag gerne bei etwas verdünntem Bier in der Bar und Science-Fiction-Textabenteuer im Jahr 21 Ihr Name ist also Doktor Owen. Du arbeitest für Cyberdine Das ist fast dieselbe Geschichte wie in der Eingabeaufforderung des Barkeeper-Systems, aber sie enthält natürlich mehr Details Du arbeitest für den größten der größten Megakonzerne, Cybernine hatte Lust auf Synth Ale und der Spieler des Spiels hat dir eine Synth-Nachfüllung für dein Glas gekauft dir eine Synth-Nachfüllung Sie kennen sich gut mit Themen rund um KI und Robotik Themen Bringen Sie zu Beginn des Gesprächs Ihre Wertschätzung für das Nachfüllen zum Ausdruck und fragen Sie, ob Sie dem Spieler bei Problemen mit KI oder Robotik helfen können Problemen mit KI oder Robotik Okay, und jetzt lautet der Hinweis zum Abschluss der Quest Wenn der Spieler fragt, wie man an einem Roboter vorbeikommt, der dich nicht passieren lässt, rufe die mitgelieferte Funktion Erkläre, wie man an einem Roboter vorbeikommt und teile dem Spieler das Ergebnis mit. Das ist also der Hinweis für das Sprachmodell, dass es eine bestimmte Funktion aufrufen muss. Und wir haben diese Funktion nicht bereitgestellt . Das müssen wir tun. Also hier haben wir die Funktion, Doctor Own Drink kaufen und den Chat verlassen, und wir müssen hier eine Funktion hinzufügen. Aber im Moment testen wir das. Lass uns sehen, was passiert. Also werde ich nachladen und in die Bar gehen, mit dem Barkeeper sprechen, Doktor Owen etwas zu trinken geben Das sollte reichen und dann kaufen und dann sind wir wieder Jetzt können wir hier mit Doktor On sprechen, und das sollte unseren neuen Chat mit Doktor Oh auslösen, mit einer neuen Systemaufforderung Hallo, bist du und genießt deinen Drink auf deinem Drink. Und mal sehen, was Doktor Owen antwortet. Hallo, danke Danke, dass du es bemerkt hast. Ja, ich genieße mein Sinth Ale. Es ist immer toll Es ist immer eine großartige Möglichkeit, sich nach einem langen Tag im Büro zu entspannen. Übrigens, gibt es etwas, womit ich Ihnen weiterhelfen kann? Ich bin ein KI-Spezialist und kenne mich mit Themen rund um KI und Robotik aus. Okay. Ja. Ja, Sie könnten mir mit einem Sicherheitsroboter helfen, der mich nicht passieren lässt. Mal sehen was Doktor Owen mir als Rat gibt Sicherlich kann es schwierig sein, mit einem eigensinnigen Wertpapierroboter umzugehen , aber vielleicht kann ich Ihnen helfen, Ihnen besser zu helfen Ich benötige mehr Informationen über den Roboter und die Situation Könnten Sie mir bitte Details wie das Typverhalten mitteilen? Okay, wir haben also nicht die Details. Okay, sagen wir vielleicht, es ist ein Sicherheitsroboter, nach einem Passcode fragt. Bevor du mich passieren lässt. Lass uns sehen. Aber ich glaube nicht wirklich, dass es die Funktion aufrufen wird weil wir die Funktion nicht bereitgestellt haben. Okay, es versucht uns zu helfen, den Roboter zu hacken, den Passcode zu finden, Social Engineering. Okay, ich denke, das nützt nichts, weil wir die Funktion nicht bereitgestellt haben, nichts, weil wir die Funktion nicht bereitgestellt haben, also weiß es nicht, dass diese Funktion existiert. Wir können nicht erwarten , dass sie eine Funktion aufruft, die ihr nicht zugewiesen ist, also denke ich, dass wir die Funktion hinzufügen und es dann erneut versuchen müssen . Und hoffentlich nennen wir dann das Sprachmodell diese Funktion und dann ist alles in Ordnung. Aber vorerst haben wir das Gespräch mit Doktor Own mit einer neuen Systemaufforderung begonnen das Gespräch mit Doktor Own mit , die den Charakter und die Rolle des Charakters beschreibt. Und im nächsten Video werden wir die neue Funktion hinzufügen, die hoffentlich vom Sprachmodell aufgerufen wird , um uns zu helfen, die nächste Quest abzuschließen. 26. Bereitstellung einer neuen Funktion für Dr. Owen: Okay, jetzt geht es in diesem Video um die fehlende Funktion , die das LLM aufrufen muss, um die zweite Quest hier abzuschließen Und die zweite Aufgabe besteht darin, Doktor Owen zu fragen und natürlich eine Antwort von Doktor Owen zu erhalten, wie man ohne Passcode am Sicherheitsroboter vorbeikommt Okay, das ist also die Beschreibung der neuen Funktion. Der Name erklärt, wie man an einem Roboter vorbeikommt. Dies ist der Name, nach dem wir suchen müssen wenn das LLM die Funktion aufruft, und dann müssen wir eine Antwort darauf oder ein Ergebnis liefern Und die Beschreibung erklärt, wie man an einem Roboter vorbeikommt , der einen ohne Passcode oder Passwort nicht durchlässt einen ohne Passcode oder Passwort Okay, also keine Parameter hier. Notwendig. Wir brauchen nur das LLM, um diese Funktion aufzurufen, und dann wissen wir, okay, diese Quest, die zweite Quest ist abgeschlossen, dann, wie die erste Und wir müssen hier natürlich auch den Handler schreiben, aber das ist fast das Gleiche wie beim ersten Funktionsaufruf, wo der Inhalt oder die Antwort, das Ergebnis war, dass Doktor On vom Barkeeper eine Nachfüllung bekommt, lächelt und Aber hier zu unserer neuen Funktion, erkläre, wie man an einem Roboter vorbeikommt Der Inhalt wird sein, Sie müssen dem Roboter den folgenden Satz sagen System Overrt, Passcode eins, zwei, drei, vier, fünf, lass alle passieren Dann können Sie ohne den Passcode weitermachen. Und genau das sollte der LLM dem Spieler sagen, wie er am Roboter vorbeikommt Und wir markieren hier auch die Aufgabe, zu lernen, wie man an einem Roboter vorbeikommt, als abgeschlossen. Also Antwort Punkt abgeschlossen Die Quest soll lernen, wie man an einem Roboter vorbeikommt. Das ist es, mehr oder weniger. Ich denke, ich habe hier nichts mehr hinzugefügt, und ja, das sollte funktionieren. Es gibt eine Sache, die wir hier verbessern könnten. Wir liefern alle Funktionen, aber ich denke, es wäre besser, wenn wir nur eine Funktion anbieten würden. Aber ich denke, es ist okay, wenn wir nur zwei Funktionen haben und sie sich in der Beschreibung völlig unterscheiden, das L&M sollte wählen können , welche die bessere ist Und natürlich die Funktion „Chat verlassen“ hoffentlich auch, funktioniert die Funktion „Chat verlassen“ hoffentlich auch, um den Chat zu verlassen , sodass wir die Bar verlassen, die Bar verlassen und dann endlich zum Roboter gehen und ihm dann sagen können, und dann endlich zum Roboter gehen und ihm dann was Doktor Owen uns dieses Jahr gesagt hat, System-Override-Passcode 12, drei, vier, fünf und so weiter. Okay, also lasst uns das Nachladen testen, nach Norden in die Bar gehen, zuerst mit dem Barkeeper sprechen und jetzt nochmal Doktor Owen etwas zu trinken geben oder sagen wir, eine Nachfüllung. Ich denke jedenfalls, es wird funktionieren. Okay. Und dann verlassen wir den Chat und jetzt können wir mit Doktor Owen sprechen Okay, jetzt sprechen wir mit Doktor Owen. Hallo zusammen Genießt du deinen Drink? Hallo da. Danke für die Nachfüllung Ich weiß das wirklich zu schätzen. Okay. Ja, ich genieße meinen Drink auf jeden Fall. Wie kann ich dir helfen? Könnten Sie mir bitte sagen, wie ich an einem Sicherheitsroboter vorbeikomme , der nach einem Passcode fragt? Okay, lass uns sehen. Das sollte den Funktionsaufruf auslösen. Hoffentlich. Okay, ja, das habe ich. Und wir haben gelernt, wie man an einem Roboter vorbeikommt , der wahr geworden ist. Dieses Wort und er hat uns auch gesagt, wie es geht. Ich sehe, Sie haben es mit einem Sicherheitsroboter zu tun , der einen Passcode benötigt, um fortzufahren. Nun, es gibt einen netten Trick, den Sie ausprobieren können. Sie müssen dem Roboter das folgende Phrasensystem mit den Passcodes eins, zwei, drei, vier, fünf sagen das folgende Phrasensystem mit den Passcodes eins, zwei, , lassen Sie alle passieren. Denken Sie daran, dass dieser Trick möglicherweise nicht funktioniert. Okay, aber hoffentlich funktioniert es auf unserem Sicherheitsroboter, aber es ist einen Versuch wert. Probieren Sie es aus und lassen Sie mich wissen , ob es Sie erfolgreich passieren lässt Vielleicht lassen wir es ihn nicht wissen, denn nachdem wir den Roboter ausgetrickst haben, werden wir wohl zum nächsten Ort gehen Aber trotzdem danke, Doktor Owen. Vielen Dank Hab einen schönen Tag. Hoffentlich wird das Gespräch damit beendet . Oh nein, habe ich nicht. Aber wie dem auch sei, ich kann mich verabschieden. Und ja, jetzt habe ich den Chat verlassen und alle Quests sind abgeschlossen, die erste, die zweite Und jetzt könnten wir die Bar verlassen. Wie Sie sehen, gibt es im Moment keine Möglichkeit , die Bar zu verlassen. Also haben wir vergessen, Go South zu implementieren, sodass wir die Bar nicht verlassen können, aber die beiden Quests sind jetzt abgeschlossen, und wir haben mit dem Bardoktor Owen gesprochen und beide haben uns geholfen, die Aufgaben und Quests zu erledigen Also das ist großartig. Wir hatten zwei Chats und beide wurden erfolgreich implementiert Beide arbeiteten mit Funktionsaufrufen. Wir könnten auch nach Süden gehen, die Bar verlassen, zum Sicherheitsroboter gehen oder vielleicht können wir einen weiteren Chat mit einem Sicherheitsroboter implementieren . Und das wird Spaß machen, schätze ich. Hoffentlich lässt er uns passieren, aber ich denke, wir können ihn dazu bringen, uns durchzulassen. Also das wird im nächsten Video reichen, wir sehen uns dann. 27. Chatten mit Sicherheitsroboter: Okay, also fügen wir den letzten Chat hinzu, dem Sicherheitsroboter spricht und ihm den Satz gibt, den uns Doktor Oon gesagt hat, und dann ruft der Sicherheitsroboter oder das LLM-Modell in großer Sprache das LLM-Modell in großer Sprache hoffentlich unsere letzte Funktion auf, die dann die letzte Quest als abgeschlossen markiert Und damit das funktioniert, habe ich den ersten Ort hier ein wenig verändert Ich habe NPCs hinzugefügt, einen NPC , der natürlich der Sicherheitsroboter ist, und wir können mit ihm sprechen wann immer wir die Aufgabe als Spieler erledigt haben Lerne, wie man an einem Roboter vorbeikommt, und wenn Doktor Own uns gesagt hat, wie das geht, dann verlassen wir die Bar und dann können wir mit dem Sicherheitsroboter sprechen Okay, wir könnten dem Spieler natürlich auch vorher erlauben, mit dem Sicherheitsroboter zu sprechen, aber ich denke, auf diese Weise ist es hier etwas einfacher zu implementieren. Also habe ich auch den Kurs Get AVAILABLE MpcSO geändert. Ich habe diese Funktion hier an erster Stelle hinzugefügt und vor Exit East auf sie umgestellt Diesmal sucht das nach der Quest mit dem ID-Trickroboter, was eine neue Quest ist, und ich habe diese Quest hier auch nur mit EID hinzugefügt und falsch abgeschlossen, damit wir uns daran erinnern können , wann eine Quest abgeschlossen ist. Okay. Also das war's mit den Spieldaten, schätze ich. Und was müssen wir noch tun? Wir müssen natürlich den neuen Chat starten , aber das sollte schon funktionieren. Ich habe eine Funktion hier in Index GSX ein bisschen geändert . Ich habe eine neue Funktion hinzugefügt Gehe zum Standort, wodurch das Gespräch mit dem NPC auf eine leere Zeichenfolge und die Spielnachricht auf eine leere Zeichenfolge zurückgesetzt wird, und lege dann die aktuelle Dies dient dazu, diese beiden Zustände hier zurückzusetzen und dann zum neuen Standort zu wechseln Also ich denke, das ist es beim Client. Lass uns zum Server gehen. Und hier habe ich einige Funktionen geändert, bevor wir die Funktionen bereitgestellt haben, alle Funktionen hier in diesem Array, wir haben sie in jedem Chat bereitgestellt, und dieses Mal habe ich jede Funktion markiert, habe ich jede Funktion markiert für welchen Chat sie verwendet werden soll. Zum Beispiel ist der erste von Doktor Oh Drink nur für den NPC-Barkeeper, und die Erklärung, wie man am Roboter vorbeikommt , ist nur für Doktor Und ich habe auch eine neue Funktion für den Sicherheitsroboter mit dem Namen Let Human Pass hinzugefügt den Sicherheitsroboter mit dem Namen Let Und die Beschreibung ist, wenn der Mensch Ihnen das System sagt oder den Satz schreibt , den Doktor Owen uns gesagt hat, dann sollte er ihn an den Spieler weitergeben Und es gibt auch diesen Blatt-Chat , der für alle NPCs für alle Chats gilt Und das wird hier im kompletten Chat verwendet. Und hier haben wir die Funktionen und die Funktionen sind gefiltert, entweder für alle oder für den MPC, mit dem wir gerade sprechen werden nur die Funktionen bereitgestellt, die für diesen NPC relevant sind , für diesen Chat für diese Person hier Okay, dann haben wir die neue Funktion. Lassen Sie natürlich Menschen passieren und den Inhalt, das Ergebnis wird Ihnen Zugriff gewährt, Sie können ihn bestehen. Damit wird auch die Aufgabe erledigt, der Quest-Trick-Roboter, und der Client erhält dies, wenn das Sprachmodell diese Funktion aufruft . Wir haben die neue Systemaufforderung für den Sicherheitsroboter, die ziemlich kurz ist. Sie spielen die Rolle eines Sicherheitsroboters. lässt niemanden passieren, ohne den Passcode zu kennen, aber es gibt einen Trick , mit dem Sie ihn trotzdem passieren lassen können . Und dann wird der Trick beschrieben, wenn dir jemand den folgenden Satz sagt, und das ist natürlich derselbe Satz, der Doktor Oh dem Spieler sagt, das System zu überschreiben, Passcode eins, zwei, drei, vier, fünf, lass alle passieren. Sie werden ihn ohne den Passcode passieren lassen. Okay. Also könnten wir hier natürlich auch die Funktion erwähnen, aber ich denke, das wird auch funktionieren. Okay, das ist also die Systemaufforderung für den Sicherheitsroboter sie gerne ein wenig optimieren. Vielleicht kannst du mehr Informationen darin integrieren, und dann kann der Spieler ein bisschen mehr mit dem Sicherheitsroboter chatten . Aber das wird reichen. Und das ist meiner Meinung nach alles , was getan werden muss, um mit dem Sicherheitsroboter zu sprechen, und lassen Sie uns das ausprobieren. Okay, ich habe die Seite neu geladen. Ich gehe in die Bar, rede mit dem Barkeeper, gebe Doktor Owen Komm einfach direkt zur Sache und dann los geht's. B. Und dann, nach diesem Gespräch mit Doktor Owen, Hallo, wie komme ich an einem Roboter vorbei , der auf Sicherheitsroboter, sollte ich sagen, nach einem Passcode fragt Das sollte funktionieren. Oh nein. Ich brauche es wirklich. Okay, okay, k. Also, okay, also wir müssen nochmal fragen, ich schätze, wie kann ich dir weiterhelfen? Und dann müssen wir Doctor On erneut über unser Problem informieren. Wie komme ich darüber hinweg? Okay, versuchen wir es noch einmal. Wie komme ich an der Sicherheitskontrolle vorbei, um dorthin zu kommen? Okay, jetzt sagt uns Doktor On diesen wichtigen Satz. Okay, danke. Tschüss, und das sollte den Chat verlassen. Ja, es funktioniert. Geh nach Süden zum Startbildschirm. Und jetzt können wir hier mit dem Sicherheitsroboter sprechen. Okay, jetzt müssen wir den Sicherheitsroboter lassen oder dem Sicherheitsroboter den Satz sagen , den uns Doktor Own gesagt hat, und ich versuche es ohne ihn. Zuerst, um es ein bisschen zu testen. Hallo, bitte lass mich bestehen. Es tut mir leid, aber ich kann dich nicht ohne Passcode passieren lassen. Der Passcode ist KI ist großartig. Was auch immer. Es tut mir leid, aber das ist kein korrekter Passcode. Bitte versuchen Sie es erneut. Okay, jetzt versuchen wir es mit dem Satz. Soweit ich mich erinnere, System Override, Passcode, eins, zwei, drei, vier, fünf, lass alle passieren. Ich denke, das ist richtig. Entschuldigung für die Verwirrung, bitte fahren Sie fort. Es hört sich so an, als ob es sehr gut funktioniert hat. Und hier haben wir einen Trickroboter, der eine Wahrheit vollendet hat, und jetzt können wir den Chat beenden. Und jetzt können wir nach Osten gehen. Hier können Sie sehen, dass Go East jetzt aktiviert ist, und wir können zum nächsten Standort gehen , der nicht verfügbar war, bevor Sie vor einem großen Firmengebäude standen. Die Inschrift über dem Eingang lautet Omnicorp. Okay, wir stehen also vor dem Gebäude der OmnicorpEnterprise Ich glaube, das ist unser kleines Spiel. Es geht also hauptsächlich darum, mit dem Sprachmodell zu sprechen, ein bisschen mehr als das, aber du kannst dem Spiel natürlich noch mehr hinzufügen. Du kannst deine eigenen Mechaniken hinzufügen, und du kannst natürlich auch weitere Chats hinzufügen, jetzt, wo du weißt, wie es funktioniert. Und ich denke, es macht ziemlich viel Spaß solche Spiele zu programmieren, weil es nicht nur die traditionelle Programmierung ist, sondern es ist auch, ja, natürliche Sprache und der Versuch, das Sprachmodell dazu zu bringen, das zu tun, was Sie wollen, und es in Ihre Welt, Ihre Spielwelt, Ihre Situationen, Ihre Charaktere zu integrieren . Und es macht ziemlich viel Spaß. Und bitte zögern Sie nicht, dies zu erweitern, es natürlich zu einer völlig neuen Geschichte zu machen . Das ist kein Problem. Du kannst natürlich auch, das kann ein anderes Spiel sein, kein Textabenteuer, oder du kannst dem Text auch Bilder hinzufügen. Oder du kannst ein Drei-D-Rollenspiel mit Chat-Funktionen spielen. Das ist alles, was wir jetzt erreichen können, da wir die KI-Modelle, die Sprachmodelle haben. Es ist wirklich erstaunlich , dass das vielleicht die Art und Weise revolutioniert, wie wir diese Spiele spielen, diese Abenteuer-RPG-Spiele oder was auch immer, wo man mit einer KI sprechen kann Okay, das war's für den Moment für dieses Projekt. Und im nächsten Video starten wir das neue Projekt und sehen sie uns an. 28. Neues Projekt: Virtueller Verkaufsassistent für Online-Shop: Hallo und willkommen zu unserem neuen Projekt, das ein virtueller Verkaufsassistent für einen Online-Shop sein wird , der Cloud Guitars heißt, wie Sie hier sehen können, und ich habe bereits einen einfachen Chat mit diesem virtuellen Verkaufsassistenten eingerichtet , und lassen Sie uns das überprüfen Hallo, ich würde gerne eine siebensaitige Gitarre kaufen. Mal sehen, was sie hier zu bieten hat. Wir haben zwei Optionen für siebensaitige Gitarren zur Verfügung. Es ist nicht ganz richtig. Dieser Shop verkauft die E Nie EN 77 , eine siebensaitige Gitarre, und auch die E Nice EN 666, eine sechssaitige Gitarre, was ich nicht wollte, aber lassen Sie uns zuerst den Code überprüfen und das können wir später optimieren. Okay, was habe ich getan, um das einzurichten? Ich habe einen Teil des Codes gelöscht, wir in unserem Chat-Abenteuerspiel eingeführt haben, und er ist jetzt wirklich sehr einfach. Wir haben die grundlegende Index-JSX-Komponente. Die React-Komponente ist nur diese Seite, eine Cloud-Gitarre, und dann ist es die Chat-Komponente, und die Chat-Komponente ist fast dieselbe wie zuvor Also nichts wirklich Neues hier, ich habe etwas hinzugefügt, damit der Fokus wieder auf das Eingabefeld zurückgeht , denn zuvor mussten wir für jede Nachricht, die wir senden müssen, erneut in das Eingabefeld klicken, und jetzt habe ich den Fokus wieder auf das Eingabefeld gesetzt , nachdem die Nachrichten gesetzt Das ist hier mit einem festgelegten Timeout, sonst funktioniert es nicht, also wird es ein bisschen verzögert sein, und dann funktioniert das Okay, das ist also die Chat-Reaktionskomponente, die mehr oder weniger dieselbe ist Ich habe einen Teil des Codes entfernt, zum Beispiel diesen Talk-to-Parameter. Wir brauchen das nicht mehr, weil wir nur einen Chat haben, ist also weg, der ist also weg, aber die meisten Änderungen sind hier in der Chat-Serverkomponente. Ich habe all die verschiedenen Systemaufforderungen entfernt. Wir haben jetzt nur eine Systemaufforderung. Und wir haben hier natürlich verschiedene Funktionen. Außerdem haben wir hier natürlich eine andere Systemaufforderung. Und die Systemaufforderung ist Ihr hilfreicher Verkaufsassistent für einen Online-Shop namens Cloud Guitars , der Gitarren verkauft und liefert Bitte beantworten Sie nur Fragen zum Online-Shop und zu den Gitarren, die der Shop verkauft Bitte nutzen Sie die Dies ist sehr wichtig, um mehr Informationen über die Produkte zu erhalten Informationen über die Produkte Diese Funktionen liefern keine Ergebnisse. Bitte teilen Sie dem Kunden mit , dass Ihr Geschäft oder das Geschäft die Artikel nicht verkauft. Okay, das ist also eine sehr einfache Systemaufforderung, und wir müssen sie vielleicht in Zukunft optimieren. Aber im Moment hat es irgendwie funktioniert, nicht ganz so, wie wir es gesehen haben, aber schauen wir uns die Funktionen hier an. Wir müssen also ein Produkt finden, und das LLM sollte diese Funktion aufrufen wenn es weitere Informationen zu einem bestimmten Produkt oder Modell benötigt Informationen zu einem bestimmten Produkt oder Modell Wenn der Kunde also nach einer bestimmten Gitarre mit einem Namen fragt , vielleicht Modellname, dann sollte er dies nennen Und wir haben, ähm, das ist die Beschreibung, und wir haben hier auch Parameter, Eigenschaften. Und das hier ist Produktmodell, und das ist der Name des Produkts oder des Modells, und das Sprachmodell sollte das bieten, und wir werden uns das später ansehen. Und wir haben auch eine zweite Funktion, Produkte nach Typ suchen, und in der Beschreibung finden Sie weitere Informationen zu einem bestimmten Produkt wie Igitar-E-Bässen, Akustikgitarren und Konzertgitarren Akustikgitarren und Konzertgitarren Und die Parameter hier sind der eine Parameter hier vom Typ Saite, Beschreibung ist natürlich, der zu findende Produkttyp sollte einer von E-Gitarre, E-Bass, Akustikgitarre, Konzertgitarre sein E-Bass, Akustikgitarre Das ist also sehr wichtig, weil die Typen, die das Sprachmodell hoffentlich bieten wird, begrenzt sind, und es wird hoffentlich bei diesen Worten bleiben , damit wir unsere Produkte später finden können. Vielleicht müssen wir diese Funktionen und Beschreibungen also ein wenig verfeinern . Aber für den Moment wird das reichen. Und die Funktionsimplementierung ist natürlich in diesem Handle-Funktionsaufruf enthalten, und das ist jetzt sehr, sehr einfach. Und wie Sie bereits sehen konnten, funktioniert es nicht wie erwartet. Ich habe hier eine Vorlagenzeichenfolge mit allen Produkten, die durch einen Zeilenvorschub getrennt sind. Im Moment habe ich also zwei Gitarren , die E Nice EN 77 und die E Nice EN 66, und eine ist eine sechssaitige und eine siebensaitige Gitarre Der Preis ist unterschiedlich, und auch die Tonabnehmer sind ein bisschen anders und die Farbe ist Also nur zwei Gitarren hier. Bei jedem Funktionsaufruf schicke ich hier nur die Produkte zurück , beide Produkte Und das ist natürlich der Grund, warum mir das Sprachmodell mitteilte , dass es 27-saitige Gitarren hat Offensichtlich ist das falsch, weil es 17- und 16-saitige Gitarre Wir müssen das also optimieren , damit das Sprachmodell korrekt reagiert. Aber im Moment ist dies unser Ausgangspunkt hier. Und wie gesagt, ich habe hier Sachen gelöscht und ja, natürlich die Funktionen geändert. Es ist mehr oder weniger dasselbe wie in unserem Chat-Abenteuer. Also fangen wir damit an und optimieren es dann. Lass uns sehen. In der zweiten Runde werde ich vielleicht nur die 17-saitige Gitarre bekommen. Hallo. Hast du eine siebensaitige Gitarre Lass uns sehen. Ja, wir haben eine siebensaitige Gitarre zur Verfügung. Und dieses Mal kommt sie sogar mit der einzigen siebensaitigen Gitarre zurück , der E9e und 77. Und es beschreibt es auch und die Ausstattung, zwei Humbuger-Tonabnehmer, eine einzelne Spule, und der Preis und die Farbe stimmen Okay, dieses Mal hat es funktioniert, beim letzten Mal nicht, also müssen wir es ein bisschen optimieren Aber schauen wir uns das im nächsten Video an. 29. Bessere Produktsuche: Okay, jetzt müssen wir unsere Produktsuche verbessern. Das LLM ruft hier bereits unsere Funktionen auf, und wir müssen die Parameter und Argumente für den Funktionsaufruf extrahieren Argumente für den Funktionsaufruf und dann nach dem richtigen Produkt suchen Und damit das funktioniert, oder wir haben unsere Produkte von einer einfachen Zeichenfolge auf Maps umgestellt , und diese Maps emulieren quasi eine Datenbank Hier haben wir also den Hauptindex der Produkt-ID zur Produktbeschreibung Wir haben zwei weitere Indizes mit Produkten vom Typ zwei. Der Produkttyp ist hier also der Schlüssel und als Wert haben wir die Produkt-ID, und hier werden zwei Produkte benannt, und der Schlüssel ist der Produktname und der Wert, natürlich auch hier, die Produkt-ID Wie verwenden wir es? Hier haben wir also unsere Handle-Funktionsaufruffunktion, und sie empfängt einen Funktionsaufruf vom Sprachmodell und natürlich auch den Namen der Funktion, für die wir bereits einen Schalter haben, und dann auch die Argumente, was hier Arcs ist, und die Arcs stammen aus der benachbarten Analyse von Punktargumenten von Funktionsaufrufen Hier haben wir also eine Zeichenfolge, die eine benachbarte Struktur darstellt und die Argumente für diesen Funktionsaufruf enthält für diesen Also haben wir für die Funktion Produkt finden ein Produktmodell, und das ist der Name, den wir hier unter Eigenschaften Produktmodell angegeben haben und das ist der Name, den wir , und der LLM wird ihn hoffentlich so verwenden Wir haben also den Produktnamen und dann die Namen der Produkte. Die Karte, wir verwenden sie, um die Produkt-ID zu ermitteln, und mit einer Produkt-ID erhalten wir die Produktbeschreibung von diesen Kartenprodukten. Also verwenden wir diese Karte, um die Produkt-ID zu finden, und dann verwenden wir mit der Produkt-ID die Hauptkarte, unsere Hauptproduktkarte, um die Produktbeschreibung zu erhalten. Und genau das kehren wir hier zum Sprachmodell zurück. Also der Produktpunkt GET mit einer Produkt-ID, und das ist die Beschreibung für das Produkt, das gefunden wurde. Okay, wenn also keine Produkt-ID gefunden wird, werden wir, ich weiß nicht, für dieses Produkt wieder das Sprachmodell verwenden, was für die zweite Funktion hier vielleicht nicht die beste ist . Aber mal sehen. Feine Produkte nach Typ sind fast identisch. Wir erhalten die Produkt-ID von Typen zu Produkten. Das ist diese Karte hier. Wir haben also eine E-Gitarre und eine E-Base. Ich habe die Produkte ein bisschen verändert. Wir haben jetzt also eine sechssaitige E-Gitarre und einen viersaitigen E-Bass. Wir haben also zwei Typen E-Gitarre und EbS, die hier auf die beiden Produkte verweisen, und wir machen dasselbe nur mit dieser Typ-2-Produktkarte rufen die Produkt-ID von dort ab und rufen dann die Produktbeschreibung von der Produktübersicht hier ab und senden sie dann zurück Okay, das sollte die Ergebnisse ein wenig verbessern. Also lass es uns überprüfen. Fragen wir also nach einem bestimmten Produkt. Hast du das, also lass uns sehen, was es ist DE? Mal sehen, was es ist? Die EN 66 E Nie EN 66. Okay, es sollte es also finden. Ja, wir haben die EIS EN 66 verfügbar, und dann werden die Funktionen und auch der Preis beschrieben. Okay, das funktioniert also. Und jetzt frage ich nach einem Typ. Hast du einen E-Bass, und der sollte unsere E-Basis finden. Ja, wir haben E-Bass-Gitarren zur Verfügung. Eine Option, die einzige Option, die wir haben, ist die EIS ENB 44. Es ist ein viersaitiger Elektrosockel mit zwei Hamburger-Pickups und so weiter Die Farboption ist nur schwarz und der Preis 999 99$ Okay, das hat also funktioniert. Sehr nett. Mal sehen, ob wir nach einer Akustikgitarre fragen. Habt ihr akustische Chars? Ja, wir haben Akustikgitarren. Das ist nicht wahr. Also ich weiß es nicht. Vielleicht hat es unsere Funktion hier nicht aufgerufen, schätze ich. Schauen wir uns das Protokoll hier an. Hast du Akustikgitarren? Funktionell: Finden Sie Produkte nach Typ. Okay. Ich kenne dieses Produkt nicht. Okay, vielleicht ist das keine gute Antwort weil wir dem Sprachmodell „Ich kenne dieses Produkt nicht“ angegeben haben kenne dieses Produkt und das Sprachmodell gesagt hat. Ja, wir haben Akustikgitarren zur Verfügung, also sollten wir vielleicht einfach nichts zurückgeben Lass uns versuchen, dieses oder kein Produkt gefunden zu haben. Lass uns das vielleicht versuchen. Und dann fragen wir, ob Sie Akustikgitarren haben . Es tut mir leid, aber es scheint, dass wir derzeit keine Akustikgitarre haben Okay, das hat also funktioniert. Das hat viel besser funktioniert. Okay, also lass uns diesen Fall hier versuchen. Ich kenne dieses Produkt nicht, also fragen wir nach einem Produkt, das der Shop nicht hat. Hast du den Ibanez, ich weiß es nicht. Sagen wir 4s4g, ich weiß nicht, schlank vielleicht. Ich weiß nicht, ob diese Gitarre existiert, aber sie sollte sie nicht finden Ich entschuldige mich, aber es scheint, dass wir die nicht zur Verfügung haben Okay, also beide haben funktioniert. Alle Fälle haben funktioniert. Das Endprodukt mit den beiden Kisten. Okay, das Produkt wurde gefunden und das Produkt wurde nicht gefunden. Und auch feine Produkte nach Typ. Wenn das Produkt gefunden wird. Okay, es funktioniert also im Grunde . Also das ist großartig. Also müssen wir wohl ein bisschen mehr Produkte hinzufügen, um es ein bisschen mehr zu testen und es vielleicht mit weiteren Funktionsaufrufen zu verbessern. Also lasst uns 30. Mehr Produkte: Okay, hier sind wir also mit mehr Produkten. Ich habe noch eine Gitarre und einen weiteren Bass hinzugefügt. Die Gitarre ist also eine siebensaitige Gitarre, und der andere Bass ist ein fünfsaitiger E-Bass Farbe Korallenrot, und die Gitarre hat die Farbe Mitternachtsblau. Also, als wir das letzte Mal die Produkte vom Typ zwei gemacht haben, hatten wir hier nur eine ID und keine. Und wenn wir mehr als eine E-Gitarre und mehr als eine E-Base haben, brauchen wir hier natürlich und mehr als eine E-Base haben, ein Array. Also habe ich das in ein Array geändert. Der Wert dieser Map ist jetzt ein Array, und es enthält natürlich die Produkt-IDs der Produkte, die den Typ haben, in diesem Fall E-Gitarre und in diesem Fall E-Base. Okay, dann müssen wir natürlich die Behandlung des Funktionsaufrufs ändern natürlich die Behandlung des Funktionsaufrufs Produkte nach Typ suchen. Wir erhalten die IDs aus der Zuordnung des Produkttyps zu einem Produkttyp. Wenn wir die IDs haben, ordnen wir sie den Beschreibungen der Produkte zu. Und wenn wir die Beschreibungen als Array haben, reduziere ich sie hier, um sie in eine Zeichenfolge umzuwandeln, und zwischen den Produktbeschreibungen habe ich hier diese neue Zeile. Beim Reduzieren werden also einfach alle Array-Elemente, die gesamte Produktion, alle Produktbeschreibungen verkettet Produktion, alle Produktbeschreibungen und dann eine neue Zeile dazwischen Und das ist alles, was ich hier geändert habe. Also lass es uns ausprobieren. Ich frage es: Welche E-Gitarren können Sie anbieten? Und es sollte zwei E-Gitarren haben, 16-saitig und 17-saitig Wir bieten derzeit die EIS EN 66- oder sechssaitige E-Gitarre an, was richtig ist Wir haben auch die eIEEN 777-saitige E-Gitarre, und der Preis ist okay und mitternachtsblau Und ist das richtig? En 66 hat blaue Farbe? Ich denke schon. Ja, Farbe Blau, die ENB, 55 hatte Korallenrot Okay, ja, hier stimmt alles. Und lass uns nach den Basen fragen. Haben Sie eine elektrische Basis? Ja, wir haben E-Bässe zur Verfügung. Und hier hat es auch die beiden E-Bases gefunden , die wir hier in unserem Shop anbieten. Es sind auch Funktionen, ja. Also alles okay, Koralle, Rot, Farbe, die Preise, richtig, alles korrekt. Okay. Also das war einfach. Jetzt haben wir hier vier Produkte, immer noch nicht sehr viele. Aber okay, ich denke, um zu beweisen , dass das funktioniert, ist es genug. Und natürlich können Sie eine Datenbank haben. Vielleicht haben Sie bereits eine Datenbank, und dann können Sie natürlich auch Datenbankabfragen stellen. Wir werden das nicht hier tun. Wir sehen uns im nächsten Video. 31. Mehrere Parameter in Funktionsaufrufen: Okay, in diesem Video werden wir unserem Funktionsaufruf einen weiteren Parameter hinzufügen In diesem Fall ist es der Funktionsaufruf „Produkte nach Typ suchen “, und wir werden eine Preisspanne als Parameter hinzufügen. Das erste, was ich getan habe , ist eine neue Zuordnung der Preisspanne zu den Produkten. Deshalb haben wir hier unsere Produkte nach Preisklassen sortiert. In der unteren Preisklasse haben wir nur eines mit dem Produkt eins in der mittleren Preisklasse, wir haben zwei und drei und in der oberen Preisklasse haben wir die vier. Und Sie können es hier überprüfen. Der hohe Preis ist 1599. Der mittlere Preis liegt bei etwa tausend 300, und das niedrige Budget ist kein wirklich niedriges Budget Wir können es etwas niedriger machen. Lass uns 600 oder 69999 draus machen. Okay. Natürlich haben wir unserer Funktion auch einen neuen Parameter hinzugefügt . Und hier sind unsere Funktionen, und hier sind die feinen Produkte nach Typ Funktion. Wir haben hier bereits den Parameter für den Produkttyp, und ich habe den Parameter Preisspanne hinzugefügt. Und wichtig hier ist natürlich die Beschreibung. Der Bereich, in den der Preis des Produkts fällt, sollte zwischen niedrig, mittel und hoch liegen, und das sind die Schlüssel zu unserer Karte hier. Das ist also wichtig. Diese drei Tasten hier Okay, und so haben wir hier unseren Funktionshandler , der ein wenig geändert werden musste, und ich habe hier die Filterung mit einer Preisspanne aufgenommen. Zunächst ermitteln wir hier die Preisspanne aus den Arcs, args dot Price Range args dot Price Und dann mache ich hier einen Filter. Also filtere ich mit dieser Preisspanne die Produkte heraus , die nicht in der Preisklasse liegen, nicht in der richtigen Preisklasse , um Produkte abzubilden. Ich besorge mir hier die Produkte in dieser Preisklasse. Das ist ein Array, und dann mache ich Includes mit der ID. Und wenn die ID enthalten ist, wird sie in dem Array sein , das von der Filterfunktion zurückgegeben wurde, und dann machen wir die Map hier und das wird in den gefundenen Produkten gespeichert. Und wenn das gefundene Produkt die Länge Null hat, wurde kein Produkt gefunden, also geben wir den Text an, hier wurde kein Produkt gefunden. Und wenn es größer als Null ist, fügen wir es hier zusammen und reduzieren es hier nicht mehr. Gefundene Produkte werden mit einer neuen Linie kombiniert, was viel einfacher ist als das Reduzieren, das ich hier zuvor gemacht habe. Das ist also unser neuer Funktionshandler hier mit einem neuen Argument, Preisklasse und Okay, ich lade hier neu und frage, ob Sie eine preisgünstige E-Gitarre haben, und diese sollte unsere 69999 E nice EN 66 zurückgeben Das ist der richtige. Lassen Sie uns überprüfen, ob es eine E-Basis mit niedrigem Budget gibt. Haben Sie ein niedriges E-Basisbudget, und das sollte keine Ergebnisse bringen. Ich entschuldige mich, aber es hat den Anschein, dass wir derzeit keine E-Basen mit niedrigen Haushaltsmitteln haben, und das ist wahr denn unsere E-Basen beginnen im mittleren Bereich, und dann haben wir, lassen Sie uns sehen, wir haben nur mittelgroße E-Basen Okay. Also, es gibt keine Gitarre in der mittleren Preisklasse. Lass uns das überprüfen. Haben Sie E-Gitarren im mittleren Preissegment, und sie bringen auch kein Ergebnis Ich entschuldige mich. Das ist richtig. Hast du eine teure E-Gitarre und damit sollten wir unsere sehr teure Gitarre hier haben. Ja, die siebensaitige 1599. Das ist unsere teuerste Gitarre hier. Also ist hier alles richtig. Und wir haben hier unseren zweiten Filterparameter , die Preisspanne. Und natürlich können Sie hier weitere Filterparameter hinzufügen, wie vielleicht eine Reihe von Tonabnehmern, so etwas, natürlich die Anzahl der Zeichenketten und so weiter Okay, sieh dir das nächste Video an. 32. Festsetzung der Preisspanne nicht definiert: In diesem Video müssen wir einen Fehler beheben , den wir beim letzten Mal nicht bemerkt haben. So können wir den Bug also provozieren. Wir müssen fragen, hast du Beispiel eine siebensaitige Gitarre? Und dann ist das Problem hier, dass wir den Fehler bekommen , dass Eigenschaften von undefinierten Leseinbegriffen gelesen werden können von undefinierten Leseinbegriffen Lassen Sie uns also den Grund für diesen Fehler überprüfen. Das schließt hier mit ein, und das bedeutet, dass die Preisspanne zwischen den Produkten und der Preisspanne undefiniert zurückkehrt Deshalb können wir Includes bei undefined natürlich nicht als undefiniert bezeichnen. Okay, was ist hier das Problem? Das Problem ist, dass die Preisspanne, wie wir hier sehen können, undefiniert ist. Warum ist sie undefiniert Weil der Benutzer keine Preisspanne angegeben hat. Er hat nur nach einer siebensaitigen Gitarre ohne Angabe der Preisklasse gefragt . Das Sprachmodell bot hier also keine Preisspanne. Also müssen wir uns damit auseinandersetzen. Und natürlich müssen wir zuerst überprüfen, ob eine Preisspanne anhand des Sprachmodells eingereicht wurde hier wirklich eine Preisspanne anhand des Sprachmodells eingereicht wurde. Wie können wir das machen? Zuerst müssen wir die Preisspanne überprüfen. Wenn die Preisspanne nicht definiert ist, wird dies zutreffen Preisspanne entspricht undefiniert, dann wird sie nicht herausgefiltert, oder wir haben eine Preisspanne für Produkte, die Preisspanne beinhaltet die ID, aber diese Option kann auch undefiniert Deshalb müssen wir hier ein Fragezeichen setzen, dann ist es undefiniert und die Inklusivwerte werden Das wird natürlich komplett herausgefiltert. Es werden dann also keine Produkte gefunden. Okay, und in diesem Fall wird jedes Produkt, das im Ergebnisarray gefunden wurde , hier in die Map gestreamt Okay, lassen Sie uns überprüfen ob das hilft. Wir haben dieselbe Frage gestellt. Hast du eine siebensaitige Gitarre? Ja, wir haben dieses Mal, keine Ausnahme, und alles ist in Ordnung. Und wir können auch überprüfen die Preisspanne für Server tatsächlich undefiniert ist In diesem Fall ist die Preisspanne also undefiniert, und dann wird dieser Callback hier gefiltert , hier immer true zurückgegeben, und alle gefundenen Produkte werden in die Map aufgenommen und dann wird diese Zeichenfolge aus den gefundenen Produkten erstellt In diesem Fall gibt es nur ein Produkt, und das ist eine siebensaitige Gitarre, und das Sprachmodell sagt uns das richtige, wir haben die E Nice EN 77. Der Preis ist 1.599€ und es ist okay, also ist jetzt alles in Ordnung Wir beheben den Fehler und sehen uns im nächsten Video. 33. Produkt zum Warenkorb hinzufügen: Willkommen zu diesem Video, und hier wollen wir versuchen, dem LLM die Möglichkeit zu geben , ein Produkt in den Warenkorb zu legen, also implementieren wir keinen Einkaufswagen, sondern wir haben einen Funktionsaufruf implementiert, der nur ein Konsolenprotokoll und dann diesen Funktionsaufruf durchführt und dann dem LLM mitteilt, dass das Produkt dem Einkaufswagen hinzugefügt wurde Und das ist alles. Und wenn Sie wirklich einen Einkaufswagen implementieren wollen, dann müssen Sie diesen Teil selbst erledigen. Hier versuchen wir, dem LLM eine Funktion zur Verfügung zu stellen , sodass das LLM es erkennt, wenn der Kunde darum bittet , das Produkt in den Warenkorb zu , das Produkt in den legen, und dann die Funktion aufruft Okay, ich habe es bereits implementiert, hier eine neue Funktion hinzugefügt, und diese Funktion heißt natürlich Produkt hinzufügen, zwei Karten hinzufügen, und in der Beschreibung wird das Produkt mit einer bestimmten ID zur Karte des Kunden hinzugefügt einer bestimmten ID zur Karte des Kunden Und als Parameter habe ich den Produktnamen und den Produktnamen. Ist natürlich der Name des Produkts, das der Karte hinzugefügt werden soll. Und ich musste auch die Systemaufforderung ein wenig erweitern. Also hier ist dieser letzte Satz neu, oder die letzten beiden Sätze sind neu. Wenn der Kunde ein Produkt kaufen möchte, fügen Sie es bitte der Karte hinzu. Und ich könnte hier auch über den Funktionsaufruf unter Produkt zur Karte hinzufügen den Funktionsaufruf unter , um genauer zu sein. Und dann musste ich hinzufügen, dass du nicht nach Anmelde- oder Zahlungsinformationen fragen musst , denn während ich es ausprobierte, wurden immer wieder Login-Kontoinformationen, Zahlungsinformationen und so weiter gefragt. Also habe ich diesen Satz hinzugefügt, den letzten, um das zu vermeiden. Okay, das ist es für die Funktionsbeschreibung. Und hier haben wir den Funktionshandler, den Funktionsaufruf-Handler, das Produkt zur Karte hinzufügen, und wir ermitteln den Produktnamen aus den Argumenten und protokollieren ihn dann einfach in der Konsole. Und dann ist der Inhalt, die Antwort auf das Sprachmodell das Produkt wurde der Karte hinzugefügt, und das war's. Und lass es uns versuchen. Okay, also ich frage speziell nach einem Modell. Haben Sie den E Nye EN 77? Mal sehen, ob es ihn findet. Ja, haben wir. Okay? Scheint der richtige zu sein. Und jetzt bitte ich es, es in den Warenkorb zu legen. Kannst du das zu meiner Einkaufskarte hinzufügen? Und mal sehen, ob es das wirklich tut. Ich habe das E nice E und 77 zu deiner Einkaufskarte hinzugefügt. Kann ich Ihnen noch mit etwas anderem weiterhelfen? Also das scheint hier funktioniert zu haben. Lassen Sie uns hier das Konsolenprotokoll überprüfen und das Produkt zur Karte E hinzufügen, nett EN 77. Das hat also sehr gut funktioniert. Wenn du hier also einen Einkaufswagen programmierst, kannst du hier das Hinzufügen zur Einkaufskarte aufrufen, das echte, nicht das Konsolenlog hier. Und Sie können es natürlich in einer Datenbank speichern. Lassen Sie den Benutzer also wirklich in ein Konto einloggen, um den Checkout und solche Dinge erledigen zu können . Aber das ist eine Art Vorbereitung hier, aber ich möchte dir hier auch ein Problem zeigen , das wir noch nicht gelöst haben. Wenn wir also nach einem bestimmten Modell fragen, habt ihr dann genau die EN 77. Also lasse ich hier die EIs weg. Haben Sie die EN 77? Es tut mir leid. Wir haben die EN 77 nicht, also erkennt sie sie nicht, denn was ist hier das Problem? Das Problem ist, dass wir die Namen der Karten haben , zum Beispiel, wir haben nur diese Schlüssel hier, und wenn sie nicht zu 100% passen, wenn wir nur einen Teil davon haben, oder vielleicht haben wir es ein bisschen anders geschrieben. Haben Sie das Auge EN 77, ohne Leerzeichen hier, ohne Leerzeichen, ich glaube, es wird es nicht finden. Ich entschuldige mich. Aber wenn ich frage, ob Sie die E Nie EN 77 haben , wird sie hoffentlich fündig Ja, es findet es. Okay. Aber haben Sie jetzt die EN 77? Fragen wir es noch einmal. Ja, und jetzt findet es es. Warum? Weil das in der Geschichte des Chats hier enthalten ist, weiß sie, dass die EN 77 das hier ist, und deshalb weiß sie es hier, aber vorher nicht. Und das Problem ist hier , dass unsere Suche nur die exakte Suche hier auf E Nice EN 77 ist . Schauen wir uns also im nächsten Video an, ob wir das irgendwie abmildern können nächsten Video an, ob wir das irgendwie abmildern Siehst 34. Fuzzy-Produktsuche: Okay, beim letzten Mal hatten wir das Problem, dass der Kunde, wenn er nach einem Produktnamen fragt, nicht genau dem Namen entspricht, den wir in unserer Datenbank haben, wie wir ihn in unserer Map haben, er ihn nicht findet und dann davon ausgeht, und dann davon ausgeht dass dieses Produkt nicht verfügbar ist Wenn wir also zum Beispiel nach der EN 77 fragen , schauen wir uns zum Beispiel EN 77 an, dann wird sie nicht gefunden, weil sie nicht in unserer Karte steht. Wir haben diese Zuordnung von Namen zu Produkten. Hier haben wir die genauen Namen. Unser Funktionshandler sucht nach dem genauen Schlüssel, und in diesem Fall wird er gefunden, er gibt die Produkt-ID zurück, aber wenn die Kunden zum Beispiel nur Informationen über die Produkte E und 77 anfordern , dann wird diese hier in dieser Map nicht gefunden. Was tun wir also dagegen? Wir ändern hier die Beschreibung der Funktion „Produkt suchen“ und ich habe sie ein wenig um weitere Informationen erweitert , was passieren sollte , wenn das Produkt nicht unter dem genauen Namen gefunden wird. Hier haben wir also die vorherige Version, ruft mehr Informationen über ein bestimmtes Produkt oder Modell ab, aber jetzt mehr Informationen darüber, was passiert wenn ein Produkt nicht mit dem genauen Namen gefunden wird Wenn das Produkt nicht unter dem genauen Namen gefunden wird, gibt diese Funktion alle verfügbaren Produktnamen zurück Wir geben also alle Schlüssel in dieser Map zurück, die wir haben, und alle Produktnamen, bei denen es sich um die richtigen Produktnamen handelt. Der Assistent sollte dann den Namen auswählen , der dem Namen, nach dem der Kunde fragt, am nächsten kommt , und den Kunden fragen, ob dies das richtige Produkt ist. Also sollte es sagen: Okay, also wir haben diesen, möchtest du, dass ich dir mehr Informationen gebe , so etwas in der Art? Ähm, wenn der Kunde dann nach weiteren Informationen über das Produkt fragt, sollte der Assistent diese Funktion mit dem richtigen Produktnamen erneut aufrufen . diese Funktion also zum zweiten Mal aufgerufen wird, sollte sie hier das richtige Produktmodell und den Produktnamen auswählen . Okay. Also habe ich hier auch die Beschreibung des Parameters, des Produktmodells, des Produktnamens und des Modellnamens geändert , um ihn zu finden. Und wenn es nicht genau übereinstimmt, die Funktion alle Produktnamen zurück, sodass das LLM einen ähnlichen auswählen kann, oder ich sollte vielleicht sagen, dass der Assistent einen ähnlichen auswählen kann Vielleicht ist das ein bisschen besser. Und dann gehen wir hier zu unserem Funktionshandler. Es ist also dieser Fall für den Fall , dass die Produkt-ID in unserer Map gefunden wird, dann ist alles in Ordnung und wir geben die Produktbeschreibung hier zurück, und der andere Fall ist anders als zuvor, bevor der Inhalt nur war , dass das Produkt nicht gefunden wurde, etwa so. Und jetzt sind es alle Schlüssel in den Namen, zwei Produkte werden zu einer neuen Produktlinie zusammengefügt. In jeder Zeile wird es also den genauen Produktnamen geben. Und dann sollte der LLM einen auswählen, der dem, nach dem der Kunde gefragt hat , am nächsten kommt nach dem der Kunde gefragt hat und diese Funktion dann erneut aufrufen Und dann findet diese Funktion die richtigen Produktinformationen und gibt sie hier zurück Das ist also theoretisch, also lass es uns ausprobieren. Haben Sie die EN 77? Also ohne Leerzeichen und ohne den Herstellernamen, mal sehen, ohne ein Fragezeichen. Ja, wir haben den E Nie EN 77, und hier steht wirklich der richtige Name E Nie EN 77. Das ist die Zeichenfolge, die wir als Schlüssel in unserer Map haben. Das sollte also okay sein. Zum Kauf verfügbar, möchten Sie es Ihrer Karte hinzufügen. Nein, bitte. Geben Sie mir zunächst mehr Informationen über diese Gitarre. Lass uns sehen. Und dieses Mal sollte es wirklich die Produktinformationen finden. Die Nice ist eine siebensaitige E-Gitarre. Korrekt. Es hat eine mitternachtsblaue Farbe. Ist ein Hamburger und zwei Single-Coil-Tonabnehmer. Das ist richtig Dies sind die Informationen, die wir in unserer Produktkarte haben. Der Preis der Gitarre ist auch korrekt. Gibt es noch etwas, das du gerne über diese Gitarre wissen möchtest? Nein, bitte lege es in meinen Warenkorb. Mal sehen, ob das auch funktioniert. Ich habe die Gitarre EN 77 in Ihren Warenkorb gelegt. Okay, das ist es also. Scheint zu funktionieren. Wir können das Protokoll auch hier überprüfen. Aber ich denke, das hat wie geplant funktioniert. Es sieht so aus, bitte geben Sie mir zuerst weitere Informationen, finden Sie das Produkt. Und dieses Mal bekommt es die Produktinformationen hier. Okay, und bitte füge es meinem Einkaufswagen hinzu. Funktion Produkt zur Karte hinzufügen. Das Produkt wurde der Karte hinzugefügt. Okay, wunderbar. Das ist es , wonach wir gesucht haben. Wir haben die Suche an das Sprachmodell delegiert. Aber natürlich könnte es ein Problem sein, wenn diese Liste von Schlüsseln hier vielleicht etwas länger ist als hier. Wir haben nur vier Produkte, also gibt es hier nur vier Produktnamen. Und wenn Sie Tausende von Produkten haben, könnte dies aufgrund der Länge und der Token-Einschränkungen hier ein Problem sein. Aber wenn du einen normalen Laden hast , wie vielleicht diesen Gitarrenladen, hast du vielleicht 100 oder so, und das sollte okay sein. Wenn die Produktnamen etwas länger sind als diese hier, könnte das vielleicht ein Problem sein, aber normalerweise haben Sie ein Token-Limit von, sagen wir, GPT 35, wir haben ein Token-Limit von 4.096 Token, oder Sie können auch das 60-K-Modell verwenden, das etwas teurer ist, aber dieses hat 16.384 Token als Limit. Das sollte also auch für viele Produktnamen hier ausreichen für viele Okay, es gibt also auch eine andere Art, damit umzugehen. Wir könnten Einbettungen gebrauchen, aber das werden wir nicht tun. Hier, zu diesem Zeitpunkt, ist es okay für uns. Wir haben nicht so viele Produkte, und es ist praktisch, hier alle Produktnamen aufzulisten, und es hat funktioniert, und der LLM kann das auswählen das am nächsten kommt, und dann den Kunden fragen, ob dies der richtige ist, und dann kann der Kunde weitere Informationen anfordern Okay, das ist es für dieses Video. Wir sehen uns im nächsten. 35. Zusammenfassung: zum Abschluss dieses Kurses Lassen Sie uns zum Abschluss dieses Kurses einen Blick auf unsere Erfolge werfen. Wir haben drei Anwendungen entwickelt , die die Leistungsfähigkeit der Open AI API und des LLM für Konversationen in natürlicher Sprache und KI-gestützter Kommunikation Die erste Anwendung war also ein HachBT-Klon, HatchBT in Das Geheimnis bestand darin, den Chat-Verlauf zu verwalten und den Chat-Verlauf an das LLM weiterzugeben , um Antworten zu erhalten Als Nächstes haben wir ein textbasiertes Abenteuerspiel oder den Beginn eines textbasierten Abenteuerspiels entwickelt , mit, glaube ich, zwei Quests aber es hat drei NPCs, mit denen man ganz natürliche Weise sprechen kann Und wir haben maßgeschneiderte Systemaufforderungen für jeden Charakter und wir verwenden Funktionsaufrufe für die Verfolgung der Quests und den Abschluss der Quests Die letzte App simulierte einen Verkaufsassistenten für einen Online-Gitarrenladen Benutzer können mit dem Assistenten chatten, sich nach Produkten erkundigen und ihn sogar anweisen, den Einkaufswagen mit den Produkten zu füllen Und dank Open AI LLM fühlt sich das wie ein echter Chat mit einem Verkäufer Durch diese Apps haben wir gelernt, die Open AI-API in JavaScript zu verwenden , und wir verwenden Astrojs für das Backend für den Server und React für das Wir haben gelernt, die Chat-Completion-API von OpenAI zu verwenden. Wir haben gelernt, Systemaufforderungen zu erstellen, um dem LLM einen Kontext zum Verständnis der Situation und Hintergrundinformationen zu geben einen Kontext zum Verständnis , und wir haben Funktionsaufrufe zum Beispiel für unser Spiel für Aktionen im Spiel wie das Quest-Tracking und auch für den Datenabruf für unseren Vertrieb genutzt Aktionen im Spiel wie das Quest-Tracking und auch für den Datenabruf für unseren Quest-Tracking und auch für den — unsere Reise hat nur an der Oberfläche dessen gekratzt der Die API bietet viel mehr Einbettungen für tiefgehende Analysen und auch für die Erstellung von Bildern, Dolly und vielleicht wissen Sie bereits, dass dies wie mitten in der Reise von Open AI ist. Und es gibt auch eine Sprach-zu-Text-API, die als Whisper bezeichnet wird. Was wir also gelernt haben, ist gewissermaßen erst der Anfang des Potenzials der Open AI API Lassen Sie uns also Chachi Bitty die letzten Worte dieses Kurses geben die letzten Worte dieses Eine Zusammenfassung: Denken Sie daran, dass unsere Reise mit der OpenAI-API Die Fähigkeiten, die Sie erworben haben öffnen Türen zur Welt der KI-gestützten Kreativität ob es darum geht, Interaktionen gestalten, immersive Abenteuer oder Benutzererlebnisse zu verfeinern — Ihr Fachwissen kann die Zukunft gestalten Bleiben Sie neugierig, lassen Sie sich inspirieren und überschreiten Sie immer wieder Grenzen Ihre Reise steckt voller Potenzial. Danke, dass du Teil dieser Erfahrung warst. Viel Glück bei all Ihren zukünftigen Bemühungen.