Regenerate Act I - Voiceover (vo) tab for Kyoto Dream Journey
Generated Prompt
## APPLICATION OVERVIEW The project is a web application designed to be a Voiceover tab for the "Kyoto Dream Journey" script-to-audio editor. It allows writers to generate, review, lock, regenerate, and export audio clips for their markdown scripts, interfacing with the ElevenLabs API to manage audio content effectively while maintaining separation from the text editing functionalities of the existing Script tab. ## CORE FEATURES 1. **Audio Generation:** Users can generate audio clips for each text block by utilizing the ElevenLabs API, triggered by explicit user actions. 2. **Audio Management:** The application allows users to review audio statuses (fresh, stale, empty), lock audio blocks, and regenerate audio as needed. 3. **Playback Controls:** Users can control audio playback with options to play, pause, and replay audio clips, with auto-advance functionality to play subsequent blocks automatically. 4. **Version History:** Users can view, manage, and restore previous audio versions, ensuring that all audio is preserved and accessible. 5. **Export Functionality:** Users can export audio for blocks, acts, or episodes, generating stitched MP3s with silence for pauses and ensuring block-level addressability. 6. **Status Indicators:** Clear visual feedback for each audio block's status (e.g., generating, fresh, stale) to inform users about the current state of their audio content. ## DESIGN SPECIFICATIONS - **Visual Style:** minimalist - Clean, simple design with plenty of white space, minimal color palette, and focus on typography - **Color Mode:** Light theme with dark text on light backgrounds - **Primary Color:** #1978E5 (accent for buttons, links, highlights) - **Typography:** Use Inter from Google Fonts for headings, Inter for body text and UI elements - **Border Radius:** 8px (moderately rounded) for buttons, cards, and inputs - **Layout:** The main layout will feature a default collapsed row for audio blocks, a global toggle for showing text, and a sticky now-playing pill during playback. Each block will display status indicators, playback controls, waveforms, and action buttons. ## TECHNICAL REQUIREMENTS - **Framework:** React with TypeScript - **Styling:** Tailwind CSS - **UI Components:** shadcn/ui - **State Management:** Zustand (or Redux if more complex state management is needed) ## IMPLEMENTATION STEPS 1. **Set Up Project Environment:** - Initialize a new React project with TypeScript. - Install necessary dependencies: Tailwind CSS, Zustand, shadcn/ui, and any additional libraries for audio management. 2. **Create Core Components:** - Develop components for AudioBlock, AudioPlayer, StatusIndicator, and ExportMenu. - Implement a layout component to structure the main application interface. 3. **Implement Audio Generation Logic:** - Set up API integration with ElevenLabs for audio generation and management. - Create functions for handling user actions that trigger audio generation. 4. **Build Playback Controls:** - Implement the playback functionality with controls for play, pause, and replay. - Incorporate auto-advance and look-ahead generation features based on playback state. 5. **Design UI with Tailwind CSS:** - Apply the minimalist style, ensuring ample white space and a clear visual hierarchy. - Utilize the specified typography and color scheme throughout the application. 6. **Version History and Export Features:** - Develop the version history UI for managing past audio versions. - Implement the export functionality to concatenate audio clips and handle file structure. 7. **Testing and Optimization:** - Conduct thorough testing for user interactions, audio generation, and export processes. - Optimize performance, especially for playback and data fetching. ## USER EXPERIENCE Users will interact with the application primarily through the Voiceover tab, where they can see a list of their text blocks along with their audio statuses. The playback controls will allow users to listen to audio clips, lock or reject audio as needed, and generate new audio based on their interactions. Visual indicators will clearly communicate the status of each audio block, and the export feature will ensure users can easily obtain their audio files in an organized manner. The design will facilitate a straightforward and intuitive experience, focusing on the seamless generation and management of audio content.
Loved by thousands of makers from
From early prototypes to real products, they started here.







































Generate optimized prompts for your vibe coding projects
Generate prompt
Enter a brief description of the app you want to build and get an optimized prompt
Review and use your prompt
Review (and edit if necessary) the generated prompt, then copy it or open it directly in your chosen platform
Get inspired with new ideas
Get AI-generated suggestions to expand your product with features that will surprise your users
Frequently Asked Questions
Everything you need to know about creating better prompts for your Lovable projects
Still have questions?
Can't find what you're looking for? We're here to help!
