feat: add Google Flow & Omni UGC Video Ads Studio with 6 rich TikTok/Reels presets and Google Veo 3.1 master prompt engine
This commit is contained in:
khondokartowsif171
+131
@@ -262,6 +262,133 @@ Format with clear bullet points, emojis, and a call-to-action.</textarea>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- TAB UGC: Google Flow & Omni UGC Video Ads Studio (Veo 3.1) -->
|
||||
<section id="tabUgcStudio" class="tab-page">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<span class="icon">🎬</span>
|
||||
<div>
|
||||
<h2>UGC Video Ads & Google Flow Studio</h2>
|
||||
<p>Google Veo 3.1 ও Omni Video ইঞ্জিনের জন্য হাই-কনভার্টিং UGC স্টাইল প্রম্পট ও স্ক্রিপ্ট তৈরি করুন</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- UGC Preset Templates Selector -->
|
||||
<div class="form-group">
|
||||
<label>জনপ্রিয় UGC স্টাইল লাইব্রেরি (Select UGC Style Preset):</label>
|
||||
<div class="ugc-presets-grid" id="ugcPresetsGrid">
|
||||
<div class="ugc-preset-card active" data-preset="unhinged_review">
|
||||
<span class="icon">📱</span>
|
||||
<h4>Raw iPhone Review</h4>
|
||||
<p>রুমের আলোয় ফ্রন্ট ক্যামেরায় আনফিল্টার্ড বাস্তব রিভিউ ও প্রডাক্ট টেস্ট।</p>
|
||||
</div>
|
||||
<div class="ugc-preset-card" data-preset="grwm_mirror">
|
||||
<span class="icon">🪞</span>
|
||||
<h4>Bathroom Mirror GRWM</h4>
|
||||
<p>সকালে ঘুম থেকে উঠে মুখে ড্রপ দিয়ে গ্লাস স্কিন টেক্সচার প্রদর্শন।</p>
|
||||
</div>
|
||||
<div class="ugc-preset-card" data-preset="unboxing_asmr">
|
||||
<span class="icon">📦</span>
|
||||
<h4>POV Unboxing ASMR</h4>
|
||||
<p>হাতে পার্সেল খোলা, ক্রিস্পি বাবল র্যাপ ও প্রডাক্টের স্যাটিস্ফাইং সাউন্ড।</p>
|
||||
</div>
|
||||
<div class="ugc-preset-card" data-preset="skeptic_test">
|
||||
<span class="icon">⚠️</span>
|
||||
<h4>Viral Claim Skeptic</h4>
|
||||
<p>"সত্যিই কি কাজ করে?"—হাইড্রো মিটার দিয়ে চামড়ার ইনস্ট্যান্ট টেস্ট।</p>
|
||||
</div>
|
||||
<div class="ugc-preset-card" data-preset="street_interview">
|
||||
<span class="icon">🎙️</span>
|
||||
<h4>Campus Micro-Interview</h4>
|
||||
<p>ধানমন্ডি/ভার্সিটি ক্যাম্পাসে তরুণীদের হাতেনাতে প্রডাক্ট পরখ করানো।</p>
|
||||
</div>
|
||||
<div class="ugc-preset-card" data-preset="founder_story">
|
||||
<span class="icon">🚀</span>
|
||||
<h4>Founder's Direct Hook</h4>
|
||||
<p>কুরিয়ার পার্সেলের স্তূপের সামনে দাঁড়িয়ে সরাসরি কোরিয়ান ইমপোর্টের গল্প।</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label for="ugcProductName">প্রডাক্টের নাম ও ব্র্যান্ড (Product):</label>
|
||||
<input type="text" id="ugcProductName" placeholder="e.g. Medicube Collagen Jelly Cream" value="Medicube Collagen Jelly Cream">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="ugcTargetAudience">টার্গেট অডিয়েন্স ও সমস্যা (Audience/Problem):</label>
|
||||
<input type="text" id="ugcTargetAudience" placeholder="e.g. যাদের ত্বক খসখসে ও রোদে পোড়া দাগ রয়েছে" value="যাদের ত্বক খসখসে ও রোদে পোড়া দাগ রয়েছে">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-row-3">
|
||||
<div class="form-group">
|
||||
<label for="ugcCreatorPersona">ক্রিয়েটর টাইপ (Persona):</label>
|
||||
<select id="ugcCreatorPersona">
|
||||
<option value="21yo Bangladeshi University Student in casual cozy room" selected>👩 21yo University Student (Cozy Room)</option>
|
||||
<option value="26yo Professional Working Woman getting ready">💼 26yo Working Woman (Morning Routine)</option>
|
||||
<option value="24yo Beauty Vlogger with natural ring light">💄 24yo Beauty Creator (Natural Lighting)</option>
|
||||
<option value="Bangladeshi Male Creator testing skincare">👨 Male Creator (Daily Grooming)</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="ugcVideoDuration">ভিডিও দৈর্ঘ্য (Duration):</label>
|
||||
<select id="ugcVideoDuration">
|
||||
<option value="15s" selected>⚡ 15 Seconds (TikTok / Reels Viral)</option>
|
||||
<option value="30s">⏱️ 30 Seconds (In-depth UGC Ad)</option>
|
||||
<option value="6s">🔥 6 Seconds (Veo Quick Bumper)</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="ugcVideoEngine">এআই ভিডিও ইঞ্জিন (Target Engine):</label>
|
||||
<select id="ugcVideoEngine">
|
||||
<option value="Google Veo 3.1" selected>🎬 Google Veo 3.1 (Omni Video)</option>
|
||||
<option value="Runway Gen-3 Alpha">🎥 Runway Gen-3 Alpha</option>
|
||||
<option value="Luma Dream Machine">✨ Luma Dream Machine</option>
|
||||
<option value="OpenAI Sora">🌟 OpenAI Sora</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button id="generateUgcPromptBtn" class="btn-primary">
|
||||
<span class="btn-icon">⚡</span> Generate Google Flow Storyboard & Master Veo Prompt
|
||||
</button>
|
||||
<p id="ugcStatusMsg" class="status-msg hidden"></p>
|
||||
</div>
|
||||
|
||||
<!-- Generated UGC Storyboard & Prompt Result Card -->
|
||||
<div id="ugcResultCard" class="card hidden">
|
||||
<div class="result-header">
|
||||
<h3>🎬 UGC Video Ad Storyboard & Master Prompt</h3>
|
||||
<span class="gold-badge" id="ugcEngineBadge">Google Veo 3.1 • 9:16</span>
|
||||
</div>
|
||||
|
||||
<label style="font-size: 11px; font-weight: 700; color: #38BDF8; margin-bottom: 4px; display: block;">
|
||||
🎯 Master Cinematic AI Prompt for Veo 3.1 (English Prompt):
|
||||
</label>
|
||||
<div class="ugc-prompt-box" id="ugcMasterPromptText"></div>
|
||||
<button class="pill-btn primary" onclick="copyText('ugcMasterPromptText')" style="width: 100%; justify-content: center; margin-top: 8px; margin-bottom: 16px;">
|
||||
📋 Copy Master Prompt for Veo 3.1
|
||||
</button>
|
||||
|
||||
<label style="font-size: 11px; font-weight: 700; color: #F59E0B; margin-bottom: 4px; display: block;">
|
||||
⏱️ Google Flow Shot-by-Shot Timeline (Storyboard & Bengali Dialogue):
|
||||
</label>
|
||||
<div id="ugcTimelineContainer" class="ugc-timeline-container">
|
||||
<!-- Dynamically populated timeline cards -->
|
||||
</div>
|
||||
|
||||
<div class="action-buttons-row" style="margin-top: 16px;">
|
||||
<button id="copyAllUgcScriptBtn" class="btn-action success-btn">
|
||||
📋 Copy Complete Flow
|
||||
</button>
|
||||
<button id="sendToAuraVeoBtn" class="btn-action whatsapp-btn" style="background: linear-gradient(135deg, #8B5CF6, #6366F1);">
|
||||
🚀 Send to Aura Veo 3.1 Engine
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- TAB 4: Dedicated Customer Care & Inbox AI Studio -->
|
||||
<section id="tabInboxAI" class="tab-page">
|
||||
<div class="card">
|
||||
@@ -388,6 +515,10 @@ Format with clear bullet points, emojis, and a call-to-action.</textarea>
|
||||
<span class="nav-icon">🏠</span>
|
||||
<span class="nav-label">অ্যাপস হাব</span>
|
||||
</button>
|
||||
<button class="nav-item" data-tab="tabUgcStudio">
|
||||
<span class="nav-icon">🎬</span>
|
||||
<span class="nav-label">UGC স্টুডিও</span>
|
||||
</button>
|
||||
<button class="nav-item" data-tab="tabPosterLab">
|
||||
<span class="nav-icon">🎨</span>
|
||||
<span class="nav-label">৩ডি পোস্টার</span>
|
||||
|
||||
Reference in New Issue
Block a user