Text to Speech Tool

Introduction

A tool that converts text content into humanlike speech with different voices. You can select the AI model between "ElevenLabs" or "OpenAI" to generate the audio. You can also choose a voice from the available options for the selected model. The generated audio response is returned as a stream from the API to overcome the vercel timeout issue for larger text inputs.

Quickstart Guide

Installation

1. Clone the repository:

   terminal

   git clone https://github.com/1811-Labs-LLC/BuilderKit-Pro.git [YOUR_APP_NAME]
    
   cd [YOUR_APP_NAME]
    
   git checkout text-to-speech

   Remove the origin remote to ensure that you can work locally without pushing the changes back to the original repository.

   terminal

   git remote remove origin

   However, note that after removing the remote, you won't be able to switch between the branches, so you'll need to clone the repository again if you want to work on another branch.

2. Install dependencies:

   terminal

   npm install

3. Environment Variables:

   Copy the required variables from .env.example to .env.local as mentioned and update the values.

   terminal

   cp .env.example .env.local

   Or, manually create a .env.local file in the root directory with the following env variables (make sure to update the values with your actual keys):

   .env.local

   # Host
   NEXT_PUBLIC_APP_URL=<your-app-url>
    
   # Supabase
   NEXT_PUBLIC_SUPABASE_URL=<your-supabase-url>
   NEXT_PUBLIC_SUPABASE_ANON_KEY=<your-supabase-anon-key>
   NEXT_PUBLIC_SUPABASE_STORAGE_BUCKET_NAME=<your-supabase-storage-bucket-name>
    
   # OpenAI
   OPENAI_API_KEY=<your-openai-api-key>
    
   # ElevenLabs
   ELEVENLABS_API_KEY=<your-elevenlabs-api-key>
    
   # Google Analytics
   NEXT_PUBLIC_GOOGLE_ANALYTICS_KEY=<your-google-analytics-key>

Setup Supabase

1. Create Text to Speech Table in Supabase:

   sql

   -- Create a table for Text to Speech
   create table
   text_to_speech (
      id uuid not null default uuid_generate_v4 (),
      created_at timestamp with time zone not null default now(),
      user_id uuid null,
      content text not null,
      model text not null,
      voice text not null,
      title text not null,
      audio_url text not null,
      constraint text_to_speech_pkey primary key (id),
      constraint text_to_speech_user_id_fkey foreign key (user_id) references users (id)
   );
    
   -- Set up Row Level Security (RLS)
   alter table text_to_speech enable row level security;
    
   create policy "Users can insert their own row." on text_to_speech for insert
   with
      check (auth.uid () = user_id);
    
   create policy "Users can update own row" on text_to_speech
   for update
      using (auth.uid () = user_id);
    
   create policy "Users can read own row" on text_to_speech for
   select
      using (auth.uid () = user_id);

   For all the tables, we enable the RLS policy by default with necessary permissions as mentioned in the script.

2. Sync Supabase Types:

   To sync the supabase table schema with your project follow the steps here.

Running the Application

1. Run the development server:

   terminal

   npm run dev

   This will start the development server on http://localhost:3000 (opens in a new tab).

2. Build for production:

   terminal

   npm run build

   This command compiles the application for production usage.

3. Start the production server:

   terminal

   npm start

   This will start the application in production mode.

Additional Scripts

• Prepare Husky for Git hooks:

  terminal

  npm run prepare

• Validate the code with Linting, Formatting & Typecheck:

  terminal

  npm run validate

Make the tool publicly accessible by removing the login process

1. Go to src/app/(dashboard)/layout.tsx and comment the following section from line:15 to line:20 as shown in the image below:

   

2. Go to src/app/api/summary/route.ts and comment the following section from line:9 to line:14 as shown in the image below:

   

These sections reads the user data and checks if the user is signed in or not. By commenting this section it does not check the user validation.

Requirements

• Node.js: Download and install from here (opens in a new tab).
• Supabase: Create an account and a new project on Supabase (opens in a new tab). Obtain the SUPABASE_URL and SUPABASE_ANON_KEY from your project settings.
• OpenAI API Key: Sign up for an API key on OpenAI (opens in a new tab).
• ElevenLabs API Key: Create an account on ElevenLabs (opens in a new tab) and generate your API Key.