| <!DOCTYPE html> |
| <html lang="en"> |
|
|
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>NCAkit - Neural Content Automation</title> |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet"> |
| <link rel="stylesheet" href="/static/css/styles.css"> |
| </head> |
|
|
| <body> |
| |
| <div id="loginOverlay" class="login-overlay"> |
| <div class="login-box"> |
| <div class="login-header"> |
| <h1>🔐 NCAkit</h1> |
| <p>Login to continue</p> |
| </div> |
| <form id="loginForm"> |
| <div class="login-field"> |
| <label>Username</label> |
| <input type="text" id="loginUsername" placeholder="Enter username" required> |
| </div> |
| <div class="login-field"> |
| <label>Password</label> |
| <input type="password" id="loginPassword" placeholder="Enter password" required> |
| </div> |
| <button type="submit" class="btn btn-primary login-btn">🚀 Login</button> |
| <div id="loginError" class="login-error hidden"></div> |
| </form> |
| </div> |
| </div> |
|
|
| |
| <div id="mainApp" class="container hidden"> |
| <header> |
| <h1>🤖 NCAkit</h1> |
| <p>Neural Content Automation Toolkit</p> |
| <button id="logoutBtn" class="logout-btn">🚪 Logout</button> |
| </header> |
|
|
| |
| <div class="tabs"> |
| <button class="tab-btn active" data-tab="story">🎬 Story Reels</button> |
| <button class="tab-btn" data-tab="video">📹 Video Creator</button> |
| <button class="tab-btn" data-tab="fact">🧠 Fact Image</button> |
| <button class="tab-btn" data-tab="trends">📊 Trends</button> |
| <button class="tab-btn" data-tab="quiz">🎯 Quiz Reel</button> |
| <button class="tab-btn" data-tab="textstory">📱 Text Story</button> |
| </div> |
|
|
| |
| <div id="story-tab" class="tab-content active"> |
| <div class="card"> |
| <h2>🎬 Create Story Reel</h2> |
| <p style="color: var(--text-secondary); margin-bottom: 1.5rem;"> |
| AI generates script → TTS → Character images → Final video |
| </p> |
|
|
| <form id="storyForm"> |
| <div class="form-group"> |
| <label>Voice Script *</label> |
| <textarea id="storyScript" rows="4" |
| placeholder="e.g., Have you ever wondered why some people seem to attract success effortlessly? The secret lies in their mindset..." |
| required></textarea> |
| </div> |
|
|
| <div class="form-row"> |
| <div class="form-group"> |
| <label>Image Style</label> |
| <select id="storyStyle"> |
| <option value="semi-realistic">Semi-Realistic</option> |
| <option value="anime">Anime</option> |
| <option value="cartoon">Cartoon</option> |
| <option value="realistic">Realistic</option> |
| </select> |
| </div> |
| <div class="form-group"> |
| <label>Voice</label> |
| <select id="storyVoice"> |
| <optgroup label="🇺🇸 English (US) - Female"> |
| <option value="af_heart">❤️ Heart - Cute emotional (Reels)</option> |
| <option value="af_bella">Bella - Sweet friendly (TikTok)</option> |
| <option value="af_nova">Nova - Energetic young (TikTok)</option> |
| <option value="af_sky">Sky - Light airy (TikTok)</option> |
| <option value="af_nicole">Nicole - Cheerful bright (TikTok)</option> |
| <option value="af_jessica">Jessica - Conversational (Shorts)</option> |
| <option value="af_sarah">Sarah - Professional (YouTube)</option> |
| <option value="af_alloy">Alloy - Neutral clear (YouTube)</option> |
| <option value="af_kore">Kore - Serious calm (Documentary)</option> |
| <option value="af_river">River - Soft peaceful (Podcast)</option> |
| <option value="af_aoede">Aoede - Soft musical (ASMR)</option> |
| </optgroup> |
| <optgroup label="🇺🇸 English (US) - Male"> |
| <option value="am_fenrir">🔥 Fenrir - Epic powerful (Trailer)</option> |
| <option value="am_adam">Adam - Neutral narrator (Audiobook)</option> |
| <option value="am_michael">Michael - Professional (Tutorial)</option> |
| <option value="am_liam">Liam - Youthful (TikTok)</option> |
| <option value="am_eric">Eric - Friendly (Vlog)</option> |
| <option value="am_echo">Echo - Calm deep (Meditation)</option> |
| <option value="am_onyx">Onyx - Dark intense (Thriller)</option> |
| <option value="am_puck">Puck - Playful (Gaming)</option> |
| <option value="am_santa">Santa - Warm old (Kids)</option> |
| </optgroup> |
| <optgroup label="🇬🇧 English (UK)"> |
| <option value="bf_emma">Emma (F) - Neutral British</option> |
| <option value="bf_alice">Alice (F) - Elegant</option> |
| <option value="bf_lily">Lily (F) - Soft storyteller</option> |
| <option value="bm_george">George (M) - Classic BBC</option> |
| <option value="bm_daniel">Daniel (M) - Gentle</option> |
| <option value="bm_fable">Fable (M) - Deep storyteller</option> |
| <option value="bm_lewis">Lewis (M) - Calm audiobook</option> |
| </optgroup> |
| <optgroup label="🇮🇳 Indian English"> |
| <option value="if_sara">Sara (F) - Friendly</option> |
| <option value="im_nicola">Nicola (M) - Calm</option> |
| </optgroup> |
| <optgroup label="🇯🇵 Japanese"> |
| <option value="jf_alpha">Alpha (F) - Cute anime</option> |
| <option value="jf_nezumi">Nezumi (F) - Kid playful</option> |
| <option value="jf_tebukuro">Tebukuro (F) - Soft calm</option> |
| <option value="jm_kumo">Kumo (M) - Young narrator</option> |
| </optgroup> |
| <optgroup label="🇨🇳 Chinese (Mandarin)"> |
| <option value="zf_xiaobei">Xiaobei (F) - Soft warm</option> |
| <option value="zf_xiaoni">Xiaoni (F) - Cheerful</option> |
| <option value="zf_xiaoxiao">Xiaoxiao (F) - Calm smooth</option> |
| <option value="zm_yunjian">Yunjian (M) - Authoritative</option> |
| <option value="zm_yunxi">Yunxi (M) - Smooth calm</option> |
| </optgroup> |
| <optgroup label="🎭 Special Voices"> |
| <option value="hf_alpha">Alpha (F) - Deep powerful</option> |
| <option value="hf_beta">Beta (F) - Aggressive strong</option> |
| <option value="hm_omega">Omega (M) - Super deep</option> |
| <option value="hm_psi">Psi (M) - Radio baritone</option> |
| <option value="ef_dora">Dora - Grandmother warm</option> |
| <option value="em_alex">Alex - Grandfather soft</option> |
| </optgroup> |
| </select> |
| </div> |
| </div> |
|
|
| <button type="submit" class="btn btn-primary">🚀 Generate Story Reel</button> |
| </form> |
|
|
| <div id="storyStatus" class="status hidden"></div> |
| </div> |
| </div> |
|
|
| |
| <div id="video-tab" class="tab-content"> |
| <div class="card"> |
| <h2>📹 Create Short Video</h2> |
| <p style="color: var(--text-secondary); margin-bottom: 1.5rem;"> |
| Scene-based video with TTS, captions, and Pexels backgrounds |
| </p> |
|
|
| <form id="videoForm"> |
| <div class="form-row"> |
| <div class="form-group"> |
| <label>Voice</label> |
| <select id="videoVoice"> |
| <optgroup label="🇺🇸 English (US) - Female"> |
| <option value="af_heart">❤️ Heart - Cute emotional (Reels)</option> |
| <option value="af_bella">Bella - Sweet friendly (TikTok)</option> |
| <option value="af_nova">Nova - Energetic young (TikTok)</option> |
| <option value="af_sky">Sky - Light airy (TikTok)</option> |
| <option value="af_nicole">Nicole - Cheerful bright (TikTok)</option> |
| <option value="af_jessica">Jessica - Conversational (Shorts)</option> |
| <option value="af_sarah">Sarah - Professional (YouTube)</option> |
| <option value="af_alloy">Alloy - Neutral clear (YouTube)</option> |
| <option value="af_kore">Kore - Serious calm (Documentary)</option> |
| </optgroup> |
| <optgroup label="🇺🇸 English (US) - Male"> |
| <option value="am_fenrir">🔥 Fenrir - Epic powerful (Trailer)</option> |
| <option value="am_adam">Adam - Neutral narrator (Audiobook)</option> |
| <option value="am_michael">Michael - Professional (Tutorial)</option> |
| <option value="am_liam">Liam - Youthful (TikTok)</option> |
| <option value="am_eric">Eric - Friendly (Vlog)</option> |
| <option value="am_echo">Echo - Calm deep (Meditation)</option> |
| <option value="am_onyx">Onyx - Dark intense (Thriller)</option> |
| </optgroup> |
| <optgroup label="🇬🇧 English (UK)"> |
| <option value="bf_emma">Emma (F) - Neutral British</option> |
| <option value="bf_alice">Alice (F) - Elegant</option> |
| <option value="bm_george">George (M) - Classic BBC</option> |
| <option value="bm_daniel">Daniel (M) - Gentle</option> |
| </optgroup> |
| <optgroup label="🇮🇳 Indian English"> |
| <option value="if_sara">Sara (F) - Friendly</option> |
| <option value="im_nicola">Nicola (M) - Calm</option> |
| </optgroup> |
| <optgroup label="🇯🇵 Japanese"> |
| <option value="jf_alpha">Alpha (F) - Cute anime</option> |
| <option value="jm_kumo">Kumo (M) - Young narrator</option> |
| </optgroup> |
| <optgroup label="🇨🇳 Chinese (Mandarin)"> |
| <option value="zf_xiaobei">Xiaobei (F) - Soft warm</option> |
| <option value="zm_yunjian">Yunjian (M) - Authoritative</option> |
| </optgroup> |
| <optgroup label="🎭 Special Voices"> |
| <option value="hf_alpha">Alpha (F) - Deep powerful</option> |
| <option value="hm_omega">Omega (M) - Super deep</option> |
| <option value="ef_dora">Dora - Grandmother warm</option> |
| </optgroup> |
| </select> |
| </div> |
| <div class="form-group"> |
| <label>Music Mood</label> |
| <select id="videoMusic"> |
| <option value="">Random</option> |
| <option value="chill">Chill</option> |
| <option value="happy">Happy</option> |
| <option value="sad">Sad</option> |
| </select> |
| </div> |
| </div> |
|
|
| <div id="scenesContainer"> |
| <div class="form-group"> |
| <label>Scene 1 - Text</label> |
| <textarea class="scene-text" rows="2" placeholder="Enter narration..." required></textarea> |
| </div> |
| <div class="form-group"> |
| <label>Keywords (comma separated)</label> |
| <input type="text" class="scene-keywords" placeholder="nature, forest"> |
| </div> |
| </div> |
|
|
| <button type="button" id="addScene" class="btn btn-secondary" style="margin-bottom: 1rem;">+ Add |
| Scene</button> |
| <button type="submit" class="btn btn-primary">🎬 Create Video</button> |
| </form> |
|
|
| <div id="videoStatus" class="status hidden"></div> |
| </div> |
| </div> |
|
|
| |
| <div id="fact-tab" class="tab-content"> |
| <div class="card"> |
| <h2>🧠 Fact Image Video</h2> |
| <p style="color: var(--text-secondary); margin-bottom: 1.5rem;"> |
| Generate a clean image → Add fact text overlay → Create short video |
| </p> |
|
|
| <form id="factForm"> |
| <div class="form-row"> |
| <div class="form-group"> |
| <label>Image Model</label> |
| <select id="factModel"> |
| <option value="nvidia">NVIDIA (AI Generated)</option> |
| <option value="cloudflare">Cloudflare (AI Generated)</option> |
| <option value="pexels">Pexels (Stock Photo)</option> |
| </select> |
| </div> |
| <div class="form-group"> |
| <label>Duration (seconds)</label> |
| <select id="factDuration"> |
| <option value="4">4 seconds</option> |
| <option value="5" selected>5 seconds</option> |
| <option value="6">6 seconds</option> |
| <option value="7">7 seconds</option> |
| </select> |
| </div> |
| </div> |
|
|
| <div class="form-row"> |
| <div class="form-group"> |
| <label>Heading BG Color</label> |
| <select id="headingBgColor"> |
| <option value="rgba(0, 0, 0, 0.45)">Black (45%)</option> |
| <option value="rgba(0, 0, 0, 0.6)">Black (60%)</option> |
| <option value="rgba(0, 31, 63, 0.75)">Navy Blue</option> |
| <option value="rgba(48, 25, 52, 0.75)">Deep Purple</option> |
| </select> |
| </div> |
| <div class="form-group"> |
| <label>Corner Radius</label> |
| <select id="headingBgRadius"> |
| <option value="15">Small (15px)</option> |
| <option value="28" selected>Medium (28px)</option> |
| <option value="40">Large (40px)</option> |
| </select> |
| </div> |
| </div> |
|
|
| <div class="form-group"> |
| <label>Image Prompt *</label> |
| <textarea id="factImagePrompt" rows="2" |
| placeholder="e.g., calm forest with soft sunlight filtering through trees" |
| required></textarea> |
| </div> |
|
|
| <div class="form-group"> |
| <label>Fact Heading (Optional)</label> |
| <input type="text" id="factHeading" placeholder="e.g., Psychological Hack" maxlength="50"> |
| </div> |
|
|
| <div class="form-group"> |
| <label>Fact Text *</label> |
| <textarea id="factText" rows="3" |
| placeholder="e.g., People who daydream more tend to have higher creative intelligence." |
| required></textarea> |
| </div> |
|
|
| <button type="submit" class="btn btn-primary">🎬 Generate Fact Video</button> |
| </form> |
|
|
| <div id="factStatus" class="status hidden"></div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div id="trends-tab" class="tab-content"> |
| <div class="card"> |
| <h2>📊 Trends Analysis</h2> |
| <p style="color: var(--text-secondary); margin-bottom: 1.5rem;"> |
| Analyze Google Trends data for content planning |
| </p> |
|
|
| <div style="margin-bottom: 2rem;"> |
| <h3 style="margin-bottom: 1rem;">🔥 Trending Now</h3> |
| <form id="trendingForm"> |
| <div class="form-row"> |
| <div class="form-group"> |
| <label>Country</label> |
| <select id="trendCountry"> |
| <option value="united_states">United States</option> |
| <option value="bangladesh">Bangladesh</option> |
| <option value="india">India</option> |
| <option value="united_kingdom">United Kingdom</option> |
| </select> |
| </div> |
| <div class="form-group"> |
| <label>Limit</label> |
| <select id="trendLimit"> |
| <option value="10">10</option> |
| <option value="20" selected>20</option> |
| <option value="30">30</option> |
| </select> |
| </div> |
| </div> |
| <button type="submit" class="btn btn-primary">Get Trending</button> |
| </form> |
| <div id="trendingResults" style="margin-top: 1rem;"></div> |
| </div> |
|
|
| <hr style="border-color: var(--border); margin: 2rem 0;"> |
|
|
| <div> |
| <h3 style="margin-bottom: 1rem;">🔍 Keyword Research</h3> |
| <form id="keywordForm"> |
| <div class="form-group"> |
| <label>Keyword *</label> |
| <input type="text" id="researchKeyword" placeholder="e.g., AI, Python, Gaming" required> |
| </div> |
| <div class="form-row"> |
| <div class="form-group"> |
| <label>Region</label> |
| <select id="researchRegion"> |
| <option value="">Worldwide</option> |
| <option value="US">United States</option> |
| <option value="BD">Bangladesh</option> |
| <option value="IN">India</option> |
| </select> |
| </div> |
| <div class="form-group"> |
| <label>Timeframe</label> |
| <select id="researchTimeframe"> |
| <option value="now_1d">Last 24 hours</option> |
| <option value="now_7d">Last 7 days</option> |
| <option value="today_12m" selected>Last 12 months</option> |
| </select> |
| </div> |
| </div> |
| <div class="form-row"> |
| <div class="form-group"> |
| <label>Category</label> |
| <select id="researchCategory"> |
| <option value="all">All Categories</option> |
| <option value="computers_electronics">Computers & Electronics</option> |
| <option value="games">Games</option> |
| <option value="arts_entertainment">Arts & Entertainment</option> |
| </select> |
| </div> |
| <div class="form-group"> |
| <label>Search Type</label> |
| <select id="researchType"> |
| <option value="web">Web Search</option> |
| <option value="youtube">YouTube Search</option> |
| <option value="news">News Search</option> |
| </select> |
| </div> |
| </div> |
| <button type="submit" class="btn btn-primary">Analyze Keyword</button> |
| </form> |
| <div id="keywordResults" style="margin-top: 1rem;"></div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div id="quiz-tab" class="tab-content"> |
| <div class="card"> |
| <h2>🎯 Quiz Reel Generator</h2> |
| <p style="color: var(--text-secondary); margin-bottom: 1.5rem;"> |
| Create quiz videos with TTS, thinking time, and animated answer reveals |
| </p> |
|
|
| <form id="quizForm"> |
| <div id="quizContainer"> |
| <div class="quiz-item" |
| style="background: var(--bg-secondary); padding: 1.5rem; border-radius: 12px; margin-bottom: 1rem;"> |
| <h4 style="color: var(--accent); margin-bottom: 1rem;">Quiz 1</h4> |
| <div class="form-group"> |
| <label>Hook (Category)</label> |
| <input type="text" class="quiz-hook" placeholder="e.g., IQ TEST, MATH QUIZ" value="IQ TEST"> |
| </div> |
| <div class="form-group"> |
| <label>Question *</label> |
| <input type="text" class="quiz-question" placeholder="What is the tallest mountain?" |
| required> |
| </div> |
| <div class="form-row"> |
| <div class="form-group"> |
| <label>Option A *</label> |
| <input type="text" class="quiz-option-a" placeholder="Answer A" required> |
| </div> |
| <div class="form-group"> |
| <label>Option B *</label> |
| <input type="text" class="quiz-option-b" placeholder="Answer B" required> |
| </div> |
| <div class="form-group"> |
| <label>Option C *</label> |
| <input type="text" class="quiz-option-c" placeholder="Answer C" required> |
| </div> |
| </div> |
| <div class="form-row"> |
| <div class="form-group"> |
| <label>Correct Answer *</label> |
| <select class="quiz-correct" required> |
| <option value="A">A</option> |
| <option value="B">B</option> |
| <option value="C">C</option> |
| </select> |
| </div> |
| </div> |
| <div class="form-group"> |
| <label>Explain (shown after answer)</label> |
| <input type="text" class="quiz-explain" placeholder="Brief explanation"> |
| </div> |
| </div> |
| </div> |
|
|
| <div style="display: flex; gap: 1rem; margin-bottom: 1.5rem;"> |
| <button type="button" id="addQuizBtn" class="btn btn-secondary" style="flex: 1;">➕ Add Another |
| Quiz</button> |
| <button type="button" id="removeQuizBtn" class="btn btn-secondary" |
| style="flex: 1; background: #dc2626;">➖ Remove Last Quiz</button> |
| </div> |
|
|
| <div class="form-group" style="margin-bottom: 1.5rem;"> |
| <label>TTS Voice</label> |
| <select id="quizVoice"> |
| <optgroup label="🇺🇸 English (US) - Female"> |
| <option value="af_heart">❤️ Heart - Cute emotional</option> |
| <option value="af_bella">Bella - Sweet friendly</option> |
| <option value="af_nova">Nova - Energetic young</option> |
| <option value="af_sarah">Sarah - Professional</option> |
| </optgroup> |
| <optgroup label="🇺🇸 English (US) - Male"> |
| <option value="am_fenrir">🔥 Fenrir - Epic powerful</option> |
| <option value="am_adam">Adam - Neutral narrator</option> |
| <option value="am_michael">Michael - Professional</option> |
| <option value="am_liam">Liam - Youthful</option> |
| </optgroup> |
| <optgroup label="🇬🇧 English (UK)"> |
| <option value="bf_emma">Emma (F) - Neutral British</option> |
| <option value="bm_george">George (M) - Classic BBC</option> |
| </optgroup> |
| <optgroup label="🇮🇳 Indian English"> |
| <option value="if_sara">Sara (F) - Friendly</option> |
| <option value="im_nicola">Nicola (M) - Calm</option> |
| </optgroup> |
| <optgroup label="🇯🇵 Japanese"> |
| <option value="jf_alpha">Alpha (F) - Cute anime</option> |
| <option value="jm_kumo">Kumo (M) - Young narrator</option> |
| </optgroup> |
| </select> |
| </div> |
|
|
| <button type="submit" class="btn btn-primary" style="width: 100%;">🎯 Generate Quiz Video</button> |
| </form> |
|
|
| <div id="quizStatus" class="status hidden"></div> |
| </div> |
| </div> |
|
|
| |
| <div id="textstory-tab" class="tab-content"> |
| <div class="card"> |
| <h2>📱 Fake Text Story Generator</h2> |
| <p style="color: var(--text-secondary); margin-bottom: 1.5rem;"> |
| Create viral iMessage-style fake conversation videos with AI voice |
| </p> |
|
|
| <div class="form-group" style="margin-bottom: 1.5rem;"> |
| <label>Mode</label> |
| <div style="display: flex; gap: 1rem;"> |
| <label style="display: flex; align-items: center; gap: 0.5rem; cursor: pointer;"> |
| <input type="radio" name="tsMode" value="manual" checked onchange="toggleTsMode()"> |
| ✍️ Manual |
| </label> |
| <label style="display: flex; align-items: center; gap: 0.5rem; cursor: pointer;"> |
| <input type="radio" name="tsMode" value="ai" onchange="toggleTsMode()"> |
| 🤖 AI Generate |
| </label> |
| </div> |
| </div> |
|
|
| <form id="textStoryForm"> |
| <div id="tsAiSection" style="display: none;"> |
| <div class="form-group" |
| style="background: linear-gradient(135deg, rgba(99,102,241,0.1), rgba(168,85,247,0.1)); padding: 1.5rem; border-radius: 12px; margin-bottom: 1rem;"> |
| <label>🤖 AI Prompt - Describe the conversation</label> |
| <textarea id="tsAiPrompt" rows="3" |
| placeholder="e.g., A breakup conversation where the ex wants to get back together but gets rejected."></textarea> |
| </div> |
| <div class="form-row"> |
| <div class="form-group"> |
| <label>Number of Messages</label> |
| <select id="tsAiMsgCount"> |
| <option value="5">5 messages</option> |
| <option value="7" selected>7 messages</option> |
| <option value="10">10 messages</option> |
| <option value="15">15 messages</option> |
| </select> |
| </div> |
| <div class="form-group"> |
| <label>Conversation Tone</label> |
| <select id="tsAiTone"> |
| <option value="emotional">Emotional / Dramatic</option> |
| <option value="funny">Funny / Comedy</option> |
| <option value="shocking">Shocking / Twist</option> |
| <option value="romantic">Romantic</option> |
| </select> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="form-row"> |
| <div class="form-group"> |
| <label>Person A Name (You - Right/Blue)</label> |
| <input type="text" id="tsPersonA" value="You" placeholder="Your name"> |
| </div> |
| <div class="form-group"> |
| <label>Person B Name (Other - Left/Gray)</label> |
| <input type="text" id="tsPersonB" value="My Ex" placeholder="Other person name"> |
| </div> |
| </div> |
|
|
| <div class="form-group"> |
| <label>Person B Avatar (1 letter or emoji)</label> |
| <input type="text" id="tsAvatar" maxlength="2" placeholder="M" style="width: 80px;"> |
| </div> |
|
|
| <div id="tsManualSection"> |
| <div id="tsMessagesContainer"> |
| <div class="ts-message-item" |
| style="background: var(--bg-secondary); padding: 1rem; border-radius: 8px; margin-bottom: 0.5rem;"> |
| <div class="form-row" style="align-items: flex-end;"> |
| <div class="form-group" style="flex: 0 0 100px;"> |
| <label>Sender</label> |
| <select class="ts-sender"> |
| <option value="B">B (Other)</option> |
| <option value="A">A (You)</option> |
| </select> |
| </div> |
| <div class="form-group" style="flex: 1;"> |
| <label>Message</label> |
| <input type="text" class="ts-text" placeholder="Type message..."> |
| </div> |
| <button type="button" class="btn btn-secondary ts-remove" |
| style="height: 42px;">✕</button> |
| </div> |
| </div> |
| </div> |
|
|
| <button type="button" id="tsAddMessage" class="btn btn-secondary" |
| style="width: 100%; margin-bottom: 1rem;"> |
| ➕ Add Message |
| </button> |
| </div> |
|
|
| <div class="form-group"> |
| <label>Ending Text (Optional)</label> |
| <input type="text" id="tsEnding" placeholder="e.g., To be continued..."> |
| </div> |
|
|
| <div class="form-row"> |
| <div class="form-group"> |
| <label>Voice A (You)</label> |
| <select id="tsVoiceA"> |
| <optgroup label="🇺🇸 Female (US)"> |
| <option value="af_heart">❤️ Heart - Cute emotional</option> |
| <option value="af_bella">Bella - Sweet friendly</option> |
| <option value="af_nova">Nova - Energetic young</option> |
| <option value="af_jessica">Jessica - Conversational</option> |
| <option value="af_sarah">Sarah - Professional</option> |
| </optgroup> |
| <optgroup label="🇺🇸 Male (US)"> |
| <option value="am_fenrir">🔥 Fenrir - Epic powerful</option> |
| <option value="am_adam">Adam - Neutral narrator</option> |
| <option value="am_michael">Michael - Professional</option> |
| <option value="am_liam">Liam - Youthful</option> |
| </optgroup> |
| <optgroup label="🇬🇧 British"> |
| <option value="bf_emma">Emma (F) - Neutral</option> |
| <option value="bm_george">George (M) - Classic</option> |
| </optgroup> |
| </select> |
| </div> |
| <div class="form-group"> |
| <label>Voice B (Other)</label> |
| <select id="tsVoiceB"> |
| <optgroup label="🇺🇸 Male (US)"> |
| <option value="am_fenrir">🔥 Fenrir - Epic powerful</option> |
| <option value="am_adam">Adam - Neutral narrator</option> |
| <option value="am_michael">Michael - Professional</option> |
| <option value="am_liam">Liam - Youthful</option> |
| <option value="am_echo">Echo - Calm deep</option> |
| </optgroup> |
| <optgroup label="🇺🇸 Female (US)"> |
| <option value="af_heart">❤️ Heart - Cute emotional</option> |
| <option value="af_bella">Bella - Sweet friendly</option> |
| <option value="af_nova">Nova - Energetic young</option> |
| <option value="af_jessica">Jessica - Conversational</option> |
| </optgroup> |
| <optgroup label="🇬🇧 British"> |
| <option value="bm_george">George (M) - Classic</option> |
| <option value="bf_emma">Emma (F) - Neutral</option> |
| </optgroup> |
| </select> |
| </div> |
| </div> |
|
|
| <button type="submit" class="btn btn-primary" style="width: 100%;">📱 Generate Text Story Video</button> |
| </form> |
|
|
| <div id="textStoryStatus" class="status hidden"></div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <button id="chatBtn" |
| style="position:fixed; bottom:30px; right:30px; width:60px; height:60px; border-radius:50%; background:linear-gradient(135deg,#6366f1,#a855f7); border:none; font-size:28px; cursor:pointer; box-shadow:0 4px 20px rgba(99,102,241,0.5); z-index:9999;">💬</button> |
|
|
| |
| <div id="chatModal" class="chat-modal hidden"> |
| <div class="chat-header"> |
| <span>🤖 Gemini Chat Test</span> |
| <button id="chatClose">✕</button> |
| </div> |
| <div id="chatMessages" class="chat-body"></div> |
| <form id="chatForm" class="chat-input-area"> |
| <input type="text" id="chatInput" placeholder="Type a message..." autocomplete="off"> |
| <button type="submit">Send</button> |
| </form> |
| </div> |
|
|
| |
| <script src="/static/js/main.js" defer></script> |
| </body> |
|
|
| </html> |
