arcadia

Arcadia, le simulateur de drame médiéval IA

Bienvenue dans Arcadia, le simulateur de drame médiéval AI. Ce projet est une expérience d'utilisation des technologies d'IA générative pour créer une expérience narrative, tout en servant également, espérons-le, d'exemple à la communauté plus large des meilleures pratiques sur la façon d'utiliser diverses API d'IA générative.

Caractéristiques

Notez que la dernière version stable est toujours hébergée sur https://www.generativestorytelling.ai

Arcadia met en avant l'utilisation des LLM pour générer des récits animés, détaillant le drame d'une cour royale de votre choix. Listez les noms de vos amis et de votre famille et regardez-les se trahir, s'empoisonner, se marier et se poignarder pour prendre le contrôle du Royaume !

Outils utilisés

La narration est fournie par GPT 3.5

L'arrière-plan 3D provient de Blockadelabs

Les portraits des personnages sont générés par Dalle

Les fonctionnalités à venir incluent la narration synthèse vocale, la musique, les effets sonores et la possibilité d'enregistrer, de partager et de rejouer des histoires.

Code

Aperçu

Pour m'assurer que cela puisse servir d'exemple aux gens, j'ai tenté de minimiser les dépendances tierces dans le code et de garder le système de construction aussi simple que possible. Lorsqu'il y a le choix entre faire les choses d'une manière sophistiquée (par exemple Sass, OpenAPI) ou d'une manière simple (répertoire partagé de fichiers TypeScript), la manière la plus simple a été choisie.

Idéalement, si vous êtes familier avec TypeScript, Express et HTML, vous devriez être capable de comprendre la base de code.

Svelte est utilisé sur le front-end, si vous n'êtes pas familier avec Svelte, il s'agit d'un ensemble d'outils très minimal pour effectuer la liaison de données en HTML, les bases peuvent être apprises en moins d'une heure avec le didacticiel complet prenant 2 ou 3 heures. heures au maximum. Même si vous ne connaissez pas Svelte, nous espérons que le code frontal pourra toujours être facilement compris.

Disposition du code

Le code est divisé en trois dossiers :

• back-end
• l'extrémité avant
• commun

Le dossier shared est lié symboliquement aux dossiers backend et frontend , une astuce astucieuse qui permet de partager des types et des modules TypeScript entre projets sans avoir à configurer un mono-dépôt complet. Si vous utilisez une ancienne version de Windows (avant Windows 10), vous devrez peut-être activer manuellement les liens symboliques pour les comptes non-administrateurs sur votre système.

Back-end

Le backend est un serveur Express.js minimal qui montre comment inviter GPT afin qu'il donne des réponses structurées, puis analyse ces réponses. Deux exemples de récupération à partir de GPT sont inclus, l'un atteignant le point de terminaison REST pour le chat et le second affichant les réponses en continu pour le chat. Dans les deux cas, les résultats sont envoyés depuis le serveur via un socket Web vers le client Web frontal.

Pour faire fonctionner le backend, vous devrez créer votre propre fichier .env contenant votre clé OPENAI_API_KEY . Si vous souhaitez enregistrer des histoires, vous devrez également ajouter AWS_ACCESS_KEY_ID et AWS_SECRET_ACCESS_KEY. Notez que malheureusement, vultr est codé en dur en tant que fournisseur s3, et doit également être extrait dans le fichier env à un moment donné.

L'extrémité avant

Le front-end est une application Web Svelte qui rassemble le nom des membres de la cour royale, l'envoie au backend et, lorsqu'une histoire est récupérée, l'anime sur le composant Dialogue.svelte .

Commun

Les types courants et les fonctions utilitaires sont shared . Principalement utilisé pour les types de données partagés par le front-end et le back-end.

En raison de problèmes de construction sur certains systèmes d'exploitation, malheureusement, le backend dispose désormais d'une copie papier des types partagés, il faut comprendre pourquoi les liens symboliques ne sont pas récupérés sur MacOS.

Construire et exécuter

Pour exécuter le projet, procédez comme suit :

1. git pull dans un dossier local
2. (facultatif si vous souhaitez exécuter le backend vous-même) dans le dossier racine du backend créez un fichier .env et remplissez-le avec OPENAI_API_KEY= et remplissez votre clé.
3. Dans chacun des éléments shared , backend et frontend effectuez npm install et npm build
4. Vous pouvez exécuter uniquement le front-end et afficher les histoires prégénérées, pour cela, allez au frontend et entrez npm run dev qui démarrera vite, et vous pouvez vous connecter à http://localhost:5173/ , cochez les deux cases en haut et alors make some drama .

un. Pour modifier quelle histoire prégénérée est affichée, vous pouvez modifier l'index sur la ligne 14 de StoryFetcherws.ts

 `const events = parseOutEvents(pregenStories[2].story);`

5. Pour exécuter le backend, accédez au backend et entrez npm run dev . Le frontend, lorsqu'il est exécuté localement, tentera automatiquement de se connecter au backend sur localhost.
6. npm run debug est pris en charge sur le backend pour exécuter node --inspect

Faire

Fonctionnalités à venir :

1. Narration texte-parole
2. Réponses en streaming depuis ChatGPT pour réduire le temps de réponse de 30 secondes à 5 secondes

• L'ajout de TTS fera probablement remonter ce délai jusqu'à 30 secondes ! Mais nous en avons besoin pour que le résultat ne soit pas 30 s + 30 s = 1 minute d'attente au total.

3. Musique
4. Les effets sonores se déclenchent avec les emojis
5. La possibilité de sauvegarder, de rejouer et de partager des histoires.
6. Correctifs pour le bouton de navigation UX a. Les boutons doivent être stylisés b. Les boutons nécessitent une gestion appropriée de l'état
7. Nécessite un relais d’accessibilité complet.
8. Extrayez les éléments S3 dans le backend pour qu'ils soient tous dans le fichier env.