Home

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

full

The main flow from the diagram can be found in generateStoryFlow. Most of the UI is implemented in index.tsx.

Development

  1. Install dependencies: npm i

  2. 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:

  3. Start Fastify server (runs on port 3001): npm run fastify

  4. Start Next.js server for UI (runs on port 3000): npm run next

  5. Go to localhost:3000

Deployment

  1. Build the Next.js app: npm run build. This exports the app to the out folder, so it can be served by Fastify.

Deploy to Render

StoryTeller can be deployed as a Render web service.

Used Libraries and AI services

StoryTeller is built with the following libraries:

The following AI APIs are used:

Limitations