Awesome
Storyteller
StoryTeller is an experimental web application that creates short audio stories for pre-school kids.
<table style="width:100%;"> <tr> <td><img src="example/example-3.png"></td> <td><img src="example/example-1.png"></td> <td><img src="example/example-2.png"></td> </tr> </table>Example Story
https://github.com/lgrammel/storyteller/assets/205036/963df672-a4fc-4d0f-a74c-1e37c1246763
How it works
The main flow from the diagram can be found in generateStoryFlow. Most of the UI is implemented in index.tsx.
Development
-
Install dependencies:
npm i
-
Setup
.env
with required keys and base url:NEXT_PUBLIC_BASE_URL="http://localhost:3001" OPENAI_API_KEY="sk-..." ELEVENLABS_API_KEY="..." LMNT_API_KEY="..." STABILITY_API_KEY="sk-..."
You can get the API keys from the respective services:
-
Start Fastify server (runs on port 3001):
npm run fastify
-
Start Next.js server for UI (runs on port 3000):
npm run next
-
Go to localhost:3000
Deployment
- Build the Next.js app:
npm run build
. This exports the app to theout
folder, so it can be served by Fastify.
Deploy to Render
StoryTeller can be deployed as a Render web service.
- Build command:
npm i; npm run build
- Start command:
npm start
- Configure the
NEXT_PUBLIC_BASE_URL
environment variable to the Render service URL (base url must not have trailing slash) - Add the API keys to the Render Environment settings.
Used Libraries and AI services
StoryTeller is built with the following libraries:
The following AI APIs are used:
Limitations
- No persistent execution with error handling
- No user accounts / persistent data (only storage of image and audio files)
- No user authentication / authorization
- Limited error handling on the client
- Tested on Chrome Desktop (Mac). Other browsers & operating systems may not work.