TTV- AI

Mission

Build a full-stack, mobile-responsive web application for a "Faceless AI Content Engine Engine App". The application should feature a sleek, dark-themed, modern user interface optimized for mobile views. Please architect the application with the following components and logic: 1. FRONTEND USER INPUT SCREEN: - Title: "Viral Faceless Video Generator" - Input Option 1: A clean text area for the main video script/prompt with placeholder "Type your video topic or raw script here..." - Input Option 2: A secondary text input box for "Paste Article/Reddit URL to scrape". - Input Option 3: A prominent "Tap to Record Voice Note" button component (UI placeholder for audio capture). - Visual Style Selector: A grid of selectable visual preset cards with icons: "Cinematic/Realistic", "Anime/Cartoon", "Stock Footage/B-Roll", and "Dark/Moody History". - Pacing Slider/Toggle: Choices between "Fast-Paced/High-Retention" (quick cuts) and "Storytelling/Documentary" (slower pace). - Audio & Voice Menu: A dropdown selector to choose voice profiles ("Deep Narrative", "High-Energy Hype", "Calm Storyteller") and a background music vibe toggle ("Suspenseful", "Lofi Beats", "Dark Techno"). - A prominent, animated "Generate Video" action button at the bottom. 2. EDITING & TIMELINE PREVIEW SCREEN: - Create a post-generation workspace layout where the user can preview the generated project before exporting. - Split the preview into a 3-second scene timeline. Each scene card must show: * A text box displaying that scene's specific script segment (fully editable by the user). * An image thumbnail representing the generated visual asset, with a "Regenerate Media" button next to it. - Include a final "Export High-Quality MP4" button. 3. BACKEND ORCHESTRATION LAYER (Mock API Routes / Functions): Set up the backend structure and API routing using a serverless-friendly framework (like Convex or standard API routes) to handle the following multi-step pipeline logic sequentially: - Step 1 (Script Generator): Takes the user prompt and structures a system prompt for an LLM (e.g., Claude or GPT) to return a clean JSON payload broken into sequential 3-second video scenes. - Step 2 (Audio Generator): A mock route function mapped to handle sending text chunks to an external Text-to-Speech API (like ElevenLabs). - Step 3 (Asset Generator): A route mapped to handle asset creation requests using an external image generation API (like Fal.ai/Flux) based on the chosen Visual Style. - Step 4 (Video Assembler): A backend processor configuration shell (using an FFmpeg logic structure) to simulate stitching the generated audio files, background music tracking, image frames, and kinetic subtitle data into a single 9:16 vertical video format. 4. DATABASE & AUTHENTICATION (Built-in Framework): - Use the built-in database setup to store user accounts, credit balances, and generated project histories. - Ensure the schema saves user prompts, raw script logs, generated media URLs, and final video paths for every project.