arcadia

Arcadia, Simulator Drama Abad Pertengahan AI

Selamat datang di Arcadia, Simulator Drama Abad Pertengahan AI. Proyek ini merupakan eksperimen dalam penggunaan teknologi AI generatif untuk menciptakan pengalaman naratif, sekaligus diharapkan dapat menjadi contoh bagi komunitas yang lebih luas mengenai praktik terbaik seputar cara menggunakan berbagai API AI generatif.

Fitur

Perhatikan bahwa versi stabil terbaru selalu dihosting di https://www.generativestorytelling.ai

Arcadia menyoroti penggunaan LLM untuk menghasilkan narasi animasi, merinci drama di istana pilihan Anda. Cantumkan nama teman dan keluargamu, dan saksikan mereka berkhianat, meracuni, menikah, dan menikam satu sama lain untuk menguasai Kerajaan!

Alat yang digunakan

Narasi disediakan oleh GPT 3.5

Latar Belakang 3d berasal dari Blockadelabs

Potret karakter dihasilkan oleh Dalle

Fitur yang akan datang mencakup narasi teks ke ucapan, musik, efek suara, dan kemampuan untuk menyimpan, berbagi, dan memutar ulang cerita.

Kode

Ringkasan

Untuk memastikan hal ini dapat menjadi contoh bagi orang-orang, saya telah berusaha meminimalkan ketergantungan pihak ketiga dalam kode, dan juga menjaga sistem pembangunan sesederhana mungkin. Ketika ada pilihan antara melakukan sesuatu dengan cara yang mewah (misalnya Sass, OpenAPI) atau cara sederhana (direktori bersama file TypeScript), cara sederhana telah dipilih.

Idealnya jika Anda familiar dengan TypeScript, Express, dan HTML, Anda harus bisa memahami basis kodenya.

Svelte digunakan di bagian depan, jika Anda belum familiar dengan Svelte, ini adalah seperangkat alat yang sangat minim untuk melakukan pengikatan data dalam HTML, dasar-dasarnya dapat dipelajari dalam waktu kurang dari satu jam dengan tutorial lengkap memakan waktu 2 atau 3 jam maksimal. Sekalipun Anda belum mengetahui Svelte, semoga kode front endnya masih mudah dipahami.

Tata Letak Kode

Kode ini dibagi menjadi tiga folder:

• ujung belakang
• bagian depan
• dibagikan

Folder shared disinkronkan ke folder backend dan frontend , sebuah trik bagus yang memungkinkan untuk berbagi tipe dan modul TypeScript antar proyek tanpa harus menyiapkan mono-repo penuh. Jika Anda menggunakan Windows versi lama (sebelum Windows 10), Anda mungkin harus mengaktifkan symlink secara manual untuk akun non-administrator di sistem Anda.

Bagian belakang

Backendnya adalah server Express.js minimal yang menunjukkan cara meminta GPT sehingga memberikan respons terstruktur, lalu menguraikan respons tersebut. Dua contoh pengambilan dari GPT disertakan, satu mencapai titik akhir REST untuk chat, dan yang kedua menampilkan respons streaming untuk chat. Dalam kedua kasus, hasil dikirim dari server melalui soket web ke klien web ujung depan.

Agar backend berfungsi, Anda perlu membuat file .env Anda sendiri dengan kunci OPENAI_API_KEY di dalamnya. Jika Anda ingin menyimpan cerita, Anda juga perlu menambahkan AWS_ACCESS_KEY_ID dan AWS_SECRET_ACCESS_KEY. Perhatikan bahwa sayangnya vultr memiliki kode keras sebagai penyedia s3, yang perlu diekstraksi ke file env juga di beberapa titik.

Bagian depan

Front end adalah aplikasi web Svelte yang mengumpulkan nama anggota istana, mengirimkannya ke backend, dan ketika sebuah cerita diambil, menganimasikannya pada komponen Dialogue.svelte .

Dibagikan

Tipe umum dan fungsi utilitas ada di shared . Terutama digunakan untuk tipe data yang digunakan bersama oleh front end dan back end.

Karena masalah build pada beberapa OS, sayangnya backend sekarang memiliki hard copy dari tipe yang dibagikan, perlu mencari tahu mengapa symlinking tidak dilakukan di MacOS.

Membangun dan Menjalankan

Untuk menjalankan proyek, lakukan hal berikut:

1. git pull ke folder lokal
2. (opsional jika Anda ingin menjalankan backend sendiri) di folder root backend buat file .env dan isi dengan OPENAI_API_KEY= dan isi kunci Anda.
3. Di masing-masing shared , backend dan frontend lakukan npm install dan npm build
4. Anda dapat menjalankan hanya bagian depan dan melihat cerita yang telah dibuat sebelumnya, lakukan itu, buka frontend dan masukkan npm run dev yang akan memulai vite, dan Anda dapat terhubung ke http://localhost:5173/ , pilih kedua kotak centang di bagian atas dan lalu make some drama .

A. Untuk mengubah cerita pregenerasi mana yang ditampilkan, Anda dapat mengubah indeks pada baris 14 StoryFetcherws.ts

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

5. Untuk menjalankan backend, buka backend dan masukkan npm run dev . Frontend, ketika dijalankan secara lokal, secara otomatis akan mencoba terhubung ke backend di localhost.
6. npm run debug didukung di backend untuk menjalankan node --inspect

Semua yang harus dilakukan

Fitur yang akan datang:

1. Narasi teks ke ucapan
2. Streaming respons dari ChatGPT untuk mengurangi waktu respons dari 30 detik menjadi 5 detik

• Menambahkan TTS mungkin akan membuat ini mundur hingga 30 detik! Tapi kita membutuhkan ini agar hasilnya tidak total menunggu 30s+30s=1 menit.

3. Musik
4. Efek suara dipicu dari emoji
5. Kemampuan untuk menyimpan, memutar ulang, dan berbagi cerita.
6. Perbaikan pada tombol navigasi UX a. Kancing perlu ditata b. Tombol memerlukan penanganan status yang tepat
7. Membutuhkan jalur aksesibilitas yang lengkap.
8. Ekstrak barang s3 di backend agar semuanya ada di file env.