System Requirements Document (SRD)

Project Name: autumn-ui

1. Introduction

The autumn-ui project aims to deliver a full-stack web application called My AI Podcast Generator, designed for individual users who want to transform raw notes into lively, two-person educational podcast scripts. Inspired by the clean and modern UI of NoteGPT, this application will provide a seamless experience for generating, playing, and downloading podcasts using AI-powered tools.

This document outlines the system requirements for the project, ensuring clarity and alignment with Aakash Sarkar's vision for the application.

2. System Overview

My AI Podcast Generator is a web-based application that allows users to input raw text notes, select voice profiles for a host and co-host, and generate a podcast script and audio file using AI models. The application integrates Gemini 1.5 API for script generation and ElevenLabs API for voice synthesis. The final output is a combined audio file that users can play and download directly from the app.

Key features include:

• A clean, modern UI for input and settings.
• Secure storage of API keys in the browser's local storage.
• Direct integration with Gemini and ElevenLabs APIs for script and audio generation.
• An audio player for playback and download functionality.

The application will be built using React for the frontend, Tailwind CSS for styling, and Lucide icons for visual elements. All API logic will be implemented directly within the app.

3. Functional Requirements

User Stories:

• As a User, I should be able to paste raw notes/text into a large text area.
• As a User, I should be able to select Voice 1 (Host) and Voice 2 (Co-host) from dropdown menus.
• As a User, I should be able to securely save my Gemini API Key and ElevenLabs API Key in the browser's local storage via a settings button.
• As a User, I should be able to click a 'Generate Podcast' button to initiate the podcast creation process.
• As a User, I should see an audio player appear when the podcast is ready, allowing me to listen to and download the audio file.

Logic Flow:

• When 'Generate Podcast' is clicked:
  • The text from the input is sent to the Gemini 1.5 API with the system prompt: "Convert these notes into a lively 2-person educational podcast script. Format strictly as HOST1: [text] and HOST2: [text]."
  • The returned script is parsed, and for every HOST1 line, the ElevenLabs API is called using Voice 1's ID, and for every HOST2 line, the ElevenLabs API is called using Voice 2's ID.
  • The audio buffers are combined into a single playable audio file.
  • The final audio file is loaded into the frontend audio player.

4. User Personas

Persona 1: Individual Podcaster

• Description: A single user who creates educational podcasts for personal or professional use.
• Goals: Streamline podcast creation, save time on scripting and voice synthesis, and produce high-quality audio content.
• Pain Points: Manual scripting and voice recording are time-consuming and require technical expertise.

Persona 2: Content Creator

• Description: A digital creator who uses podcasts as a medium to engage their audience.
• Goals: Generate engaging and professional podcasts quickly and efficiently.
• Pain Points: Limited access to tools that combine script generation and voice synthesis seamlessly.

5. Visuals Colors and Theme

Color Palette:

• Background: #F9F5F2 (Soft Cream)
• Surface: #FFFFFF (Pure White)
• Text: #2E2E2E (Charcoal Gray)
• Accent: #FF6F61 (Warm Coral)
• Muted Tones: #B8B8B8 (Soft Gray)

Mood:

The theme is clean, modern, and inviting, with a focus on simplicity and usability. The warm coral accent adds a touch of vibrancy to the otherwise neutral palette.

6. Signature Design Concept

Interactive Podcast Studio Homepage

The homepage will resemble a virtual podcast studio with dynamic, interactive elements:

• Visual Layout: A large text area styled as a "note pad" on the left, dropdowns styled as "microphone selectors" on the right, and a central "Generate Podcast" button styled as a glowing "record button."
• Animations: When the user hovers over the "Generate Podcast" button, it pulses with a soft glow. Upon clicking, the button transforms into a spinning record disc, symbolizing the podcast creation process.
• Micro-Interactions: Dropdowns animate with a smooth slide effect, and the audio player appears with a fade-in transition when the podcast is ready.
• Background: A subtle gradient resembling studio lighting, transitioning from soft cream to warm coral.
• Audio Player: Styled as a sleek, modern playback console with glowing progress bars and download buttons.

This design will make the homepage feel like a professional yet approachable podcast creation environment.

7. Non-Functional Requirements

• Performance: The application should generate and load podcasts within 10 seconds for typical input sizes.
• Security: API keys must be securely stored in the browser's local storage and never exposed in network requests.
• Usability: The UI must be intuitive and responsive across devices.
• Scalability: The app should handle multiple API calls efficiently without performance degradation.
• Compatibility: The application must work on modern browsers (Chrome, Firefox, Edge, Safari).

8. Tech Stack

Frontend:

• React
• Tailwind CSS
• Lucide Icons

Backend Logic:

• Direct API integration (Gemini 1.5 and ElevenLabs)

Database:

• No database required for this version (local storage for API keys).

AI Models:

• Gemini 1.5 for script generation
• ElevenLabs for voice synthesis

Local Orchestration:

• Docker
• docker-compose

9. Assumptions and Constraints

Assumptions:

• Users will have valid Gemini and ElevenLabs API keys.
• The application will primarily be used by individual users.
• The browser's local storage is sufficient for storing API keys securely.

Constraints:

• Limited to the capabilities of Gemini 1.5 and ElevenLabs APIs.
• Audio synthesis and stitching must be handled within the browser.

10. Glossary

• Gemini API: An AI model used for generating podcast scripts.
• ElevenLabs API: An AI model used for voice synthesis.
• Local Storage: A browser-based storage mechanism for saving data locally.
• React: A JavaScript library for building user interfaces.
• Tailwind CSS: A utility-first CSS framework for styling applications.
• Lucide Icons: A library of modern, customizable icons.

End of Document