AI 중세 드라마 시뮬레이터인 Arcadia에 오신 것을 환영합니다. 이 프로젝트는 생성적 AI 기술을 사용하여 내러티브 경험을 만드는 실험이자, 다양한 생성적 AI API 사용 방법에 대한 모범 사례를 더 큰 커뮤니티에 제공할 수 있기를 바랍니다.
최신 안정 버전은 항상 https://www.generativestorytelling.ai에서 호스팅됩니다.
Arcadia는 LLM을 사용하여 애니메이션 내러티브를 생성하고 선택한 왕실에서 드라마를 자세히 설명하는 것을 강조합니다. 친구와 가족의 이름을 나열하고 그들이 왕국을 장악하기 위해 서로 배신하고, 독살하고, 결혼하고, 찌르는 모습을 지켜보세요!
내레이션은 GPT 3.5에서 제공됩니다.
3D 배경은 Blockadelabs에서 가져온 것입니다.
캐릭터 초상화는 Dalle에서 생성됩니다.
향후 기능에는 텍스트 음성 내레이션, 음악, 음향 효과, 스토리 저장, 공유 및 재생 기능이 포함됩니다.
이것이 사람들에게 모범이 될 수 있도록 코드에서 타사 종속성을 최소화하고 빌드 시스템을 최대한 단순하게 유지하려고 시도했습니다. 멋진 방법(예: Sass, OpenAPI)과 간단한 방법(TypeScript 파일의 공유 디렉터리) 중에서 선택할 수 있는 경우 간단한 방법이 선택됩니다.
이상적으로는 TypeScript, Express 및 HTML에 익숙하다면 코드 기반을 이해할 수 있어야 합니다.
Svelte는 프런트 엔드에서 사용됩니다. Svelte에 익숙하지 않은 경우 HTML에서 데이터 바인딩을 수행하기 위한 최소한의 도구 세트입니다. 기본 사항은 전체 튜토리얼을 2~3시간 안에 익히고 1시간 이내에 익힐 수 있습니다. 최대 시간 Svelte를 모르더라도 프런트 엔드 코드를 쉽게 이해할 수 있기를 바랍니다.
코드는 세 개의 폴더로 나뉩니다.
shared
폴더는 backend
및 frontend
폴더에 심볼릭 링크되어 있습니다. 이는 전체 모노 저장소를 설정하지 않고도 프로젝트 간에 TypeScript 유형과 모듈을 공유할 수 있는 멋진 방법입니다. 이전 버전의 Windows(Windows 10 이전)를 사용하는 경우 시스템에서 관리자가 아닌 계정에 대한 심볼릭 링크를 수동으로 활성화해야 할 수도 있습니다.
백엔드는 구조화된 응답을 제공하도록 GPT에 메시지를 표시한 다음 해당 응답을 구문 분석하는 방법을 보여주는 최소 Express.js 서버입니다. GPT에서 가져오는 두 가지 예가 포함되어 있습니다. 하나는 채팅용 REST 엔드포인트에 도달하고 다른 하나는 채팅용 스트리밍 응답을 표시합니다. 두 경우 모두 결과가 서버에서 웹 소켓을 통해 프런트 엔드 웹 클라이언트로 전송됩니다.
백엔드가 작동하도록 하려면 OPENAI_API_KEY
키가 포함된 자체 .env
파일을 생성해야 합니다. 스토리를 저장하려면 AWS_ACCESS_KEY_ID 및 AWS_SECRET_ACCESS_KEY도 추가해야 합니다. 안타깝게도 vultr은 s3 공급자로 하드 코딩되어 있으므로 어느 시점에서는 env 파일에도 추출해야 합니다.
프런트 엔드는 왕실 구성원의 이름을 수집하여 백엔드로 보내고, 스토리를 가져오면 Dialogue.svelte
구성 요소에서 애니메이션을 적용하는 Svelte 웹 앱입니다.
일반적인 유형과 유틸리티 기능은 shared
에 있습니다. 주로 프런트엔드와 백엔드에서 공유하는 데이터 유형에 사용됩니다.
일부 OS의 빌드 문제로 인해 안타깝게도 백엔드에는 이제 공유 유형의 하드 카피가 있으므로 MacOS에서 심볼릭 링크가 선택되지 않는 이유를 알아내야 합니다.
프로젝트를 실행하려면 다음을 수행합니다.
backend
의 루트 폴더에 .env
파일을 만들고 OPENAI_API_KEY=
로 채우고 키를 입력합니다.shared
, backend
및 frontend
에서 npm install
및 npm build
수행합니다.frontend
로 이동하여 npm run dev
입력하여 vite를 시작하고 http://localhost:5173/
에 연결할 수 있습니다. 위쪽 및 위쪽의 확인란을 모두 선택하고 그럼 make some drama
. 에이. 표시되는 사전 생성된 스토리를 변경하려면 StoryFetcherws.ts의 14행에서 색인을 변경할 수 있습니다.
`const events = parseOutEvents(pregenStories[2].story);`
backend
로 이동하여 npm run dev
입력하세요. 프런트엔드는 로컬로 실행될 때 자동으로 localhost의 백엔드에 연결을 시도합니다.npm run debug
node --inspect
실행하기 위해 백엔드에서 지원됩니다.향후 기능: