Merge pull request #1613 from pipecat-ai/mb/improve-storybot-readme

demo: Restructure storytelling-chatbot directory, update README steps…

examples/storytelling-chatbot/.dockerignore

@@ -1,2 +0,0 @@
-frontend/node_modules
-frontend/out

examples/storytelling-chatbot/README.md

@@ -1,4 +1,4 @@
-[![Try](https://img.shields.io/badge/try_it-here-blue)](https://storytelling-chatbot.fly.dev)
+[![Try](https://img.shields.io/badge/try_it-here-blue)](https://gemini-storybot.vercel.app/)
 
 # Storytelling Chatbot
 
@@ -9,7 +9,6 @@ It periodically prompts the user for input for a 'choose your own adventure' sty
 
 We use Gemini 2.0 for creating the story and image prompts, and we add visual elements to the story by generating images using Google's Imagen.
 
-
 ---
 
 ### It uses the following AI services:
@@ -20,7 +19,7 @@ Transcribes inbound participant voice media to text.
 
 **Google Gemini 2.0 - LLM**
 
-Our creative writer LLM. You can see the context used to prompt it [here](src/prompts.py)
+Our creative writer LLM. You can see the context used to prompt it [here](server/prompts.py)
 
 **ElevenLabs - Text-to-Speech**
 
@@ -34,7 +33,35 @@ Adds pictures to our story. Prompting is quite key for style consistency, so we
 
 ## Setup
 
-**Install requirements**
+### Client
+
+1. Navigate to the client directory:
+
+   ```shell
+   cd client
+   ```
+
+2. Install dependencies:
+
+   ```shell
+   npm install
+   ```
+
+3. Build the client:
+
+   ```shell
+   npm run build
+   ```
+
+### Server
+
+1. Navigate to the server directory
+
+   ```shell
+   cd ../server
+   ```
+
+2. Set up your virtual environment and install requirements
 
    ```shell
    python3 -m venv venv
@@ -42,39 +69,40 @@ source venv/bin/activate
    pip install -r requirements.txt
    ```
 
-**Create environment file and set variables:**
+3. Create environment file and set variables
 
    ```shell
    mv env.example .env
    ```
 
-When deploying to production, to ensure only this app can spawn a new bot, set your `ENV` to `production`
+   You'll need API keys for:
 
-**Build the frontend:**
+   - DAILY_API_KEY
+   - ELEVENLABS_API_KEY
+   - ELEVENLABS_VOICE_ID
+   - GOOGLE_API_KEY
 
-This project uses a custom frontend, which needs to built. Note: this is done automatically as part of the Docker deployment.
+4. (Optional) Deployment:
+
+   When deploying to production, to ensure only this app can spawn new bot processes, set your `ENV` to `production`
+
+## Run it locally
+
+1. Navigate back to the demo's root directory:
 
    ```shell
-cd frontend/
+   cd ..
-npm install
-npm run build
    ```
 
-The build UI files can be found in `frontend/out`
+2. Run the application:
 
-## Running it locally
+   ```shell
+   python server/bot_runner.py --host localhost
+   ```
 
-Start the API / bot manager:
+   You can run with a custom domain or port using: `python server/bot_runner.py --host somehost --p someport`
 
-`python src/bot_runner.py --host localhost`
+3. ➡️ Open the host URL in your browser: http://localhost:7860
-
-If you'd like to run a custom domain or port:
-
-`python src/bot_runner.py --host somehost --p someport`
-
-➡️ Open the host URL in your browser `http://localhost:7860`
-
-If you've run previous versions of the demo, make sure to set `ENV=dev`, and remove the `RUN_AS_VM` line from the .env file.
 
 ---
 

examples/storytelling-chatbot/client/package-lock.json

@@ -1,11 +1,11 @@
 {
-  "name": "frontend",
+  "name": "client",
   "version": "0.1.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
-      "name": "frontend",
+      "name": "client",
       "version": "0.1.0",
       "dependencies": {
         "@daily-co/daily-js": "^0.62.0",

examples/storytelling-chatbot/client/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "frontend",
+  "name": "client",
   "version": "0.1.0",
   "private": true,
   "scripts": {

examples/storytelling-chatbot/server/.dockerignore

@@ -0,0 +1,2 @@
+client/node_modules
+client/out

examples/storytelling-chatbot/server/Dockerfile

@@ -44,11 +44,11 @@ COPY ./requirements.txt requirements.txt
 RUN pip3 install --no-cache-dir --upgrade -r requirements.txt
 
 # Copy everything else
-COPY --chown=user ./src/ src/
+COPY --chown=user ./server/ server/
 
-# Copy frontend app and build
+# Copy client app and build
-COPY --chown=user ./frontend/ frontend/
+COPY --chown=user ./client/ client/
-RUN cd frontend && npm install && npm run build
+RUN cd client && npm install && npm run build
 
 # Start the FastAPI server
-CMD python3 src/bot_runner.py --port ${FAST_API_PORT}
+CMD python3 server/bot_runner.py --port ${FAST_API_PORT}

examples/storytelling-chatbot/server/bot_runner.py

@@ -57,7 +57,7 @@ app.add_middleware(
 )
 
 # Mount the static directory
-STATIC_DIR = "frontend/out"
+STATIC_DIR = "client/out"
 
 
 # ------------ Fast API Routes ------------ #
@@ -175,7 +175,7 @@ async def virtualize_bot(room_url: str, token: str):
             image = data[0]["config"]["image"]
 
         # Machine configuration
-        cmd = f"python src/bot.py -u {room_url} -t {token}"
+        cmd = f"python server/bot.py -u {room_url} -t {token}"
         cmd = cmd.split()
         worker_props = {
             "config": {