Willkommen bei Arcadia, dem KI-Mittelalter-Drama-Simulator. Dieses Projekt ist ein Experiment zur Verwendung generativer KI-Technologien zur Schaffung eines narrativen Erlebnisses und dient hoffentlich auch als Beispiel für die größere Community von Best Practices für die Verwendung verschiedener generativer KI-APIs.
Beachten Sie, dass die neueste stabile Version immer unter https://www.generativestorytelling.ai gehostet wird
Arcadia hebt die Verwendung von LLMs zur Erstellung animierter Erzählungen hervor, die das Drama an einem königlichen Hof Ihrer Wahl detailliert beschreiben. Listen Sie die Namen Ihrer Freunde und Familienangehörigen auf und beobachten Sie, wie sie sich gegenseitig verraten, vergiften, heiraten und niederstechen, um die Kontrolle über das Königreich zu übernehmen!
Die Erzählung wird von GPT 3.5 bereitgestellt
Der 3D-Hintergrund stammt von Blockadelabs
Charakterporträts werden von Dalle erstellt
Zu den kommenden Funktionen gehören Text-to-Speech-Erzählung, Musik, Soundeffekte und die Möglichkeit, Geschichten zu speichern, zu teilen und wiederzugeben.
Um sicherzustellen, dass dies als Beispiel dienen kann, habe ich versucht, die Abhängigkeiten von Drittanbietern im Code zu minimieren und auch das Build-System so einfach wie möglich zu halten. Wenn es die Wahl gibt, Dinge auf eine ausgefallene Art und Weise (z. B. Sass, OpenAPI) oder auf eine einfache Art und Weise (gemeinsames Verzeichnis von TypeScript-Dateien) zu erledigen, wurde die einfache Art gewählt.
Wenn Sie mit TypeScript, Express und HTML vertraut sind, sollten Sie idealerweise in der Lage sein, die Codebasis zu verstehen.
Svelte wird im Frontend verwendet. Wenn Sie mit Svelte nicht vertraut sind, handelt es sich um einen sehr minimalen Satz an Werkzeugen für die Datenbindung in HTML. Die Grundlagen können in weniger als einer Stunde erlernt werden, wobei das vollständige Tutorial zwei oder drei Stunden dauert Stunden bei max. Auch wenn Sie Svelte nicht kennen, ist der Front-End-Code hoffentlich dennoch leicht zu verstehen.
Der Code ist in drei Ordner aufgeteilt:
Der shared
Ordner ist mit den backend
und frontend
-Ordnern verknüpft, ein raffinierter Trick, der es ermöglicht, TypeScript-Typen und -Module zwischen Projekten zu teilen, ohne ein vollständiges Mono-Repo einrichten zu müssen. Wenn Sie eine alte Windows-Version (vor Windows 10) verwenden, müssen Sie möglicherweise Symlinks für Nicht-Administratorkonten auf Ihrem System manuell aktivieren.
Das Backend ist ein minimaler Express.js-Server, der zeigt, wie GPT aufgefordert wird, strukturierte Antworten zu geben und diese Antworten dann zu analysieren. Es sind zwei Beispiele für den Abruf aus GPT enthalten: eines trifft auf den REST-Endpunkt für den Chat und ein zweites zeigt Streaming-Antworten für den Chat an. In beiden Fällen werden die Ergebnisse vom Server über einen Web-Socket an den Front-End-Web-Client gesendet.
Damit das Backend funktioniert, müssen Sie Ihre eigene .env
Datei mit Ihrem OPENAI_API_KEY
-Schlüssel darin erstellen. Wenn Sie Storys speichern möchten, müssen Sie außerdem AWS_ACCESS_KEY_ID und AWS_SECRET_ACCESS_KEY hinzufügen. Beachten Sie, dass vultr leider als S3-Anbieter fest codiert ist und irgendwann auch in die Env-Datei extrahiert werden muss.
Das Frontend ist eine Svelte-Webanwendung, die die Namen der Mitglieder des königlichen Hofes sammelt, sie an das Backend sendet und sie beim Abrufen einer Geschichte in der Dialogue.svelte
Komponente animiert.
Allgemeine Typen und Dienstprogrammfunktionen sind in shared
enthalten. Wird hauptsächlich für Datentypen verwendet, die vom Front-End und vom Back-End gemeinsam genutzt werden.
Aufgrund von Build-Problemen auf einigen Betriebssystemen verfügt das Backend jetzt leider über eine gedruckte Kopie der gemeinsam genutzten Typen. Sie müssen herausfinden, warum Symlinking unter MacOS nicht berücksichtigt wird.
Gehen Sie wie folgt vor, um das Projekt auszuführen:
backend
eine Datei .env
, füllen Sie sie mit OPENAI_API_KEY=
und geben Sie Ihren Schlüssel ein.shared
, backend
und frontend
jeweils npm install
und npm build
durchfrontend
und geben Sie npm run dev
ein, das Vite startet. Sie können eine Verbindung zu http://localhost:5173/
herstellen, beide Kontrollkästchen oben aktivieren und Dann make some drama
. A. Um zu ändern, welche vorgenerierte Story angezeigt wird, können Sie den Index in Zeile 14 von StoryFetcherws.ts ändern
`const events = parseOutEvents(pregenStories[2].story);`
backend
und geben Sie npm run dev
ein. Wenn das Frontend lokal ausgeführt wird, versucht es automatisch, eine Verbindung zum Backend auf localhost herzustellen.npm run debug
wird im Backend unterstützt, um node --inspect
auszuführenKommende Funktionen: