Talkai - Podcast Generator UI

A modern, React-based frontend application for generating podcasts using AI text-to-speech models.

Features

• Podcast Generator: Create podcasts with up to 4 speakers
• Voice Library: Upload, manage, and delete custom voice files
• Multiple AI Models: Support for Chatterbox Pro, Vibe Voice, and FishAudio
• Dynamic Settings: Model-specific parameters that change based on selected AI model
• History: Track all generated podcasts with metadata
• Modern UI/UX: Clean design with Talkai branding and color scheme

Project Structure

ttsui/
├── public/
│   └── index.html
├── src/
│   ├── components/
│   │   ├── Sidebar.js
│   │   ├── Sidebar.css
│   │   ├── Settings.js
│   │   └── Settings.css
│   ├── pages/
│   │   ├── PodcastGenerator.js
│   │   ├── PodcastGenerator.css
│   │   ├── VoiceLibrary.js
│   │   ├── VoiceLibrary.css
│   │   ├── History.js
│   │   └── History.css
│   ├── styles/
│   │   └── App.css
│   ├── App.js
│   └── index.js
└── package.json

Installation

1. Navigate to the project directory:

cd ttsui

2. Install dependencies:

npm install

Running the Application

Start the development server:

npm start

The application will open at http://localhost:3000

Building for Production

Create an optimized production build:

npm run build

AI Model Parameters

Chatterbox Pro

• Exaggeration: Control voice style exaggeration (0-1)
• CFG Weight: Classifier-free guidance weight (0-10)
• Temperature: Randomness in generation (0-2)

Vibe Voice

• CFG Weight: Classifier-free guidance weight (0-10)
• Speed: Playback speed (0.5-2)

FishAudio

• Top K: Top-k sampling parameter (1-100)
• Temperature: Randomness in generation (0-2)
• Repetition Penalty: Penalty for repetition (0-2)

Color Scheme

• Primary: Dark Navy (#1e3a5f, #2c4d7a)
• Accent: Teal (#00b8a9)
• Background: Light Gray (#f5f5f5)
• Text: Dark (#1a1a1a)

Technology Stack

• React 18.2.0
• React Router DOM 6.20.0
• CSS3 with modern features
• No additional UI libraries for cleaner, custom design

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)