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
@@ -6,6 +6,7 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
initPosterLab();
|
||||
initMiniAppsHub();
|
||||
initMiniAppBuilder();
|
||||
initUgcStudio();
|
||||
initInboxAI();
|
||||
initHistory();
|
||||
});
|
||||
@@ -1282,3 +1283,236 @@ function saveGenerationToHistory(item) {
|
||||
list.unshift(item);
|
||||
localStorage.setItem('opal_history', JSON.stringify(list.slice(0, 30)));
|
||||
}
|
||||
|
||||
// --- 7. Google Flow & Omni UGC Video Ads Studio (Google Veo 3.1) ---
|
||||
let selectedUgcPreset = 'unhinged_review';
|
||||
|
||||
const UGC_PRESET_LIBRARY = {
|
||||
unhinged_review: {
|
||||
name: 'Raw iPhone Unfiltered Review',
|
||||
styleDescription: 'Front-camera 4K selfie video, natural room lighting, casual clothing, real Bengali conversational talking-head with authentic micro-expressions and unboxing texture close-up.',
|
||||
cameraSettings: 'iPhone 15 Pro Max Front Camera 4K 60fps, subtle handheld organic wobble, autofocus hunting onto product label at 0:08, natural eye contact, warm ambient room light.',
|
||||
timelineTemplate: [
|
||||
{ time: '0:00 - 0:03', title: '💥 Disruptive Curiosity Hook', visual: 'Creator holds phone with one hand, looking shocked/excited directly at the lens. Holds {{product}} close to camera.', script: '"আপুরা, সত্যি বলছি—এই জিনিসটা ইউজ করার আগে আমার স্কিনের যা অবস্থা ছিল, নিজের চেহারাই নিজে দেখতে পারতাম না!"' },
|
||||
{ time: '0:03 - 0:07', title: '😩 Problem & Relatable Agitation', visual: 'Creator touches cheek showing dullness/dryness, shakes head in frustration.', script: '"রোদে পুড়ে ত্বক একদম ড্যামেজ আর ছোপ ছোপ দাগে ভরে গিয়েছিল। দামি দামি কত কিছু ট্রাই করেছি, কিন্তু কোনো লাভ হচ্ছিল না!"' },
|
||||
{ time: '0:07 - 0:12', title: '✨ Product Demo & Texture Macro', visual: 'Macro close-up: Creator opens {{product}}, shows the rich bouncy jelly texture, applies a drop on cheekbone, taps gently. Instant dewy light reflection appears.', script: '"তারপর Glamour\'s Touch থেকে আসল কোরিয়ান {{product}} নিলাম। জাস্ট টেক্সচারটা দেখেন—এক ফোঁটা দিতেই ত্বক কাচের মতো চকচক করে!"' },
|
||||
{ time: '0:12 - 0:15', title: '🛒 Social Proof & Urgency CTA', visual: 'Creator smiles radiantly, holds up the official authenticity barcode and points to screen link.', script: '"১০০% আসল প্রোডাক্ট পেতে সরাসরি নিচে হোয়াটসঅ্যাপ লিংকে ইনবক্স করুন। এখনই অর্ডার না করলে কিন্তু স্টক শেষ হয়ে যাবে!"' }
|
||||
]
|
||||
},
|
||||
grwm_mirror: {
|
||||
name: 'Bathroom Mirror GRWM + Glass Skin',
|
||||
styleDescription: 'Aesthetic morning routine in a clean modern bathroom with golden morning sunlight hitting the mirror, soft focus background, organic skincare application.',
|
||||
cameraSettings: 'Cinematic 9:16 vertical, f/1.8 shallow depth of field, warm golden-hour side lighting, macro zoom onto water droplets and glowing skin absorption.',
|
||||
timelineTemplate: [
|
||||
{ time: '0:00 - 0:03', title: '🪞 Morning GRWM Hook', visual: 'Morning sunshine reflecting on mirror. Creator wearing silk headband, applying headband, looking at glowing skin.', script: '"Get Ready With Me! আজকের দিনে যাদের সারাদিন গ্লাস স্কিন গ্লো ধরে রাখতে হবে, তাদের জন্য আমার সিক্রেট রুটিন..."' },
|
||||
{ time: '0:03 - 0:07', title: '🌸 Step-by-Step Application', visual: 'Dipping finger/dropper into {{product}}, smooth glide across cheekbones and forehead.', script: '"ঘুম থেকে উঠে মুখ ধুয়ে এই {{product}} জাস্ট ২ ফোঁটা ম্যাসাজ করে নিই। ত্বকের গভীরে গিয়ে সাথে সাথে হাইড্রেশন লক করে!"' },
|
||||
{ time: '0:07 - 0:12', title: '💎 Real Light Absorption Test', visual: 'Creator turns face left and right in natural light—skin reflects a glossy, crystal-clear mirror shine.', script: '"কোনো মেকআপ ছাড়া ন্যাচারাল স্কিনেই এই শাইনটা পাচ্ছেন। সারাদিন মুখ একদম নরম আর ফ্রেশ থাকে!"' },
|
||||
{ time: '0:12 - 0:15', title: '🛍️ Special Offer & Order CTA', visual: 'Creator picks up bag, waves happily to camera, on-screen WhatsApp hotline pop-up.', script: '"আজই স্পেশাল ডিসকাউন্টে অরিজিনালটা নিতে glamourstouch.com বা WhatsApp-এ নক দিন!"' }
|
||||
]
|
||||
},
|
||||
unboxing_asmr: {
|
||||
name: 'POV First-Person Unboxing ASMR',
|
||||
styleDescription: 'POV first-person angle over a clean wooden marble desk. Hands opening official courier flyer, crisp peeling sound, glossy box reveal, tactile product feel.',
|
||||
cameraSettings: 'Top-down 45-degree angle, 4K macro lens, studio ring light + warm softbox, rich tactile audio/visual sensations.',
|
||||
timelineTemplate: [
|
||||
{ time: '0:00 - 0:03', title: '📦 Satisfying Unboxing Hook', visual: 'POV hands slicing open courier parcel with satisfying tear. Bubble wrap peeled to reveal authentic {{product}}.', script: '[ASMR: Crispy package opening sound] "অবশেষে আমার মোস্ট ওয়েইটেড কোরিয়ান পার্সেলটা ডেলিভারি পেলাম!"' },
|
||||
{ time: '0:03 - 0:07', title: '🛡️ Authenticity Verification', visual: 'Hands turning the luxury box around, zooming in on Korean authentic hologram seal and QR sticker.', script: '"১০০% অরিজিনাল কোরিয়ান হোলোগ্রাম সিল নিশ্চিত করা আছে। প্যাকেজিংটাই তো মাথা নষ্ট!"' },
|
||||
{ time: '0:07 - 0:12', title: '🧪 Luxurious Texture Swirl', visual: 'Unscrewing the golden cap, dipping spatula/finger into rich jelly formula, spreading silky smooth swatch on back of hand.', script: '"জাস্ট ফিলটা দেখেন—কী পরিমাণ প্রিমিয়াম! একদম লাইটওয়েট, আঠালো ভাব ছাড়াই ত্বকে মিশে যায়।"' },
|
||||
{ time: '0:12 - 0:15', title: '⚡ Fast Delivery & COD CTA', visual: 'Parcel invoice and hotline sticker shown with WhatsApp order button.', script: '"ক্যাশ অন ডেলিভারিতে দ্রুত পেতে এখনই নিচে মেসেজ করুন!"' }
|
||||
]
|
||||
},
|
||||
skeptic_test: {
|
||||
name: 'Viral Claim Skeptic & Moisture Meter',
|
||||
styleDescription: 'Investigative, high-retention TikTok testing format. Direct close-up with moisture meter tool testing skin before and after.',
|
||||
cameraSettings: 'Punchy fast zooms, dynamic screen text overlays, high-contrast clean lighting, high energy facial delivery.',
|
||||
timelineTemplate: [
|
||||
{ time: '0:00 - 0:03', title: '⚠️ High-Stakes Skeptic Hook', visual: 'Creator holds moisture meter with red 18% dry skin alert, looking skeptical at {{product}}.', script: '"টিকটকে সবাই যে {{product}} নিয়ে লাফালাফি করছে—আসলেই কি এটা কাজ করে নাকি শুধুই হাইপ? চলেন লাইভ টেস্ট করি!"' },
|
||||
{ time: '0:03 - 0:07', title: '🧪 Live Before-Test Application', visual: 'Close up of dry skin measurement (18%). Applies cream on right half of face only.', script: '"প্রথমে আমার ড্রাই স্কিন মাপলাম—মাত্র ১৮% ময়েশ্চার। এবার মুখের একপাশে প্রডাক্টটা লাগিয়ে ৫ মিনিট অপেক্ষা করলাম..."' },
|
||||
{ time: '0:07 - 0:12', title: '😱 Shocking 84% Meter Result', visual: 'Beeping moisture meter pressed on treated cheek—screen turns green displaying 84% Hydration Glow.', script: '"ও মাই গড! মিটার দেখেন—১৮% থেকে এক লাফে ৮৪%! নিজের চোখকে বিশ্বাস করতে পারছি না!"' },
|
||||
{ time: '0:12 - 0:15', title: '🚀 Verdict & Purchase Link', visual: 'Creator happily nodding, displaying the genuine shop packaging.', script: '"হাইপটা একদম ১০০% সত্যি! আসলটা অর্ডার করতে নিচের বাটনে এখনই ক্লিক করুন।"' }
|
||||
]
|
||||
},
|
||||
street_interview: {
|
||||
name: 'Campus / Street Micro-Interview',
|
||||
styleDescription: 'Outdoor real-world environment (Dhanmondi / Dhaka University). Handheld wireless microphone, spontaneous interaction with a real student or young professional.',
|
||||
cameraSettings: 'Wide to medium shot, natural daylight, wireless lavalier mic sound, spontaneous laughter and genuine reactions.',
|
||||
timelineTemplate: [
|
||||
{ time: '0:00 - 0:03', title: '🎙️ Spontaneous Street Hook', visual: 'Interviewer holds cute micro-mic, approaches friendly girl in university campus.', script: '"আপু, ১ সেকেন্ড! আপনার ত্বকের এই ন্যাচারাল গ্লো-এর সিক্রেটটা কি একটু বলবেন?"' },
|
||||
{ time: '0:03 - 0:07', title: '💬 Genuine Relatable Reaction', visual: 'Interviewee smiles, opens purse and takes out her authentic {{product}}.', script: '"আরেহ! আমি তো মেকআপ ইউজ করি না, জাস্ট এই কোরিয়ান {{product}} টা ইউজ করি!"' },
|
||||
{ time: '0:07 - 0:12', title: '✨ Instant Hand Texture Test', visual: 'Interviewer tries a tiny pump on her hand, touches it with wide excited eyes.', script: '"ওয়াও! সুগন্ধটা এত মিষ্টি আর সাথে সাথেই ত্বক একদম নরম হয়ে গেল!"' },
|
||||
{ time: '0:12 - 0:15', title: '🛍️ Street Verdict & CTA', visual: 'Both girls smile at camera, pointing to on-screen WhatsApp number.', script: '"কোথায় পাওয়া যাবে আপু? —Glamour\'s Touch-এ, অরিজিনাল কোরিয়ান কালেকশন!"' }
|
||||
]
|
||||
},
|
||||
founder_story: {
|
||||
name: 'Founder\'s Direct Authenticity Hook',
|
||||
styleDescription: 'Behind-the-scenes authentic warehouse/office aesthetic with stacks of courier parcels, showing real import documents and heartfelt founder dedication.',
|
||||
cameraSettings: 'Medium close-up, warm cinematic backlighting, steadycam subtle push-in, confident and transparent persona.',
|
||||
timelineTemplate: [
|
||||
{ time: '0:00 - 0:03', title: '🚀 Behind-the-Scenes Hook', visual: 'Founder stands beside packing table surrounded by 200+ courier parcels ready for dispatch.', script: '"মানুষ কেন প্রতিদিন শত শত অর্ডারে আমাদের এই {{product}} নিচ্ছে, জানেন?"' },
|
||||
{ time: '0:03 - 0:07', title: '🛡️ Fake vs Authentic Transparency', visual: 'Founder shows side-by-side packaging, explaining counterfeit risks in local markets.', script: '"কারণ মার্কেটে ডুপ্লিকেট প্রোডাক্টের ভিড়ে আমরা সরাসরি কোরিয়া থেকে আসল পণ্য এনে ঘরে ঘরে পৌঁছে দিচ্ছি।"' },
|
||||
{ time: '0:07 - 0:12', title: '💎 Quality Promise & Money-back', visual: 'Founder holds up authentic product with certificate of authenticity.', script: '"প্রোডাক্ট ফেক প্রমাণিত হলে মানি-ব্যাক গ্যারান্টি। কোনো আপোষ নেই কোয়ালিটিতে।"' },
|
||||
{ time: '0:12 - 0:15', title: '📦 1-Click Dispatch CTA', visual: 'Founder handing over parcel to delivery rider, smile to camera.', script: '"আজকের স্পেশাল স্টক থেকে আপনার পার্সেলটি বুক করতে এখনই ইনবক্স করুন!"' }
|
||||
]
|
||||
}
|
||||
};
|
||||
|
||||
function initUgcStudio() {
|
||||
const presetCards = document.querySelectorAll('#ugcPresetsGrid .ugc-preset-card');
|
||||
const prodInput = document.getElementById('ugcProductName');
|
||||
const audienceInput = document.getElementById('ugcTargetAudience');
|
||||
const personaSelect = document.getElementById('ugcCreatorPersona');
|
||||
const durationSelect = document.getElementById('ugcVideoDuration');
|
||||
const engineSelect = document.getElementById('ugcVideoEngine');
|
||||
const generateBtn = document.getElementById('generateUgcPromptBtn');
|
||||
const statusMsg = document.getElementById('ugcStatusMsg');
|
||||
const resultCard = document.getElementById('ugcResultCard');
|
||||
const masterPromptBox = document.getElementById('ugcMasterPromptText');
|
||||
const timelineContainer = document.getElementById('ugcTimelineContainer');
|
||||
const engineBadge = document.getElementById('ugcEngineBadge');
|
||||
const copyScriptBtn = document.getElementById('copyAllUgcScriptBtn');
|
||||
const sendToVeoBtn = document.getElementById('sendToAuraVeoBtn');
|
||||
|
||||
if (!generateBtn) return;
|
||||
|
||||
// Preset Selection
|
||||
presetCards.forEach(card => {
|
||||
card.addEventListener('click', () => {
|
||||
presetCards.forEach(c => c.classList.remove('active'));
|
||||
card.classList.add('active');
|
||||
selectedUgcPreset = card.getAttribute('data-preset');
|
||||
});
|
||||
});
|
||||
|
||||
generateBtn.addEventListener('click', async () => {
|
||||
const product = prodInput.value.trim() || 'Authentic K-Beauty Skincare';
|
||||
const audience = audienceInput.value.trim() || 'Bangladeshi beauty enthusiasts';
|
||||
const persona = personaSelect ? personaSelect.value : '21yo Bangladeshi Student';
|
||||
const duration = durationSelect ? durationSelect.value : '15s';
|
||||
const engine = engineSelect ? engineSelect.value : 'Google Veo 3.1';
|
||||
|
||||
statusMsg.classList.remove('hidden');
|
||||
statusMsg.style.color = '#8B5CF6';
|
||||
statusMsg.textContent = `⏳ Crafting ${engine} cinematic UGC storyboard & Google Flow...`;
|
||||
generateBtn.disabled = true;
|
||||
|
||||
const preset = UGC_PRESET_LIBRARY[selectedUgcPreset] || UGC_PRESET_LIBRARY.unhinged_review;
|
||||
|
||||
try {
|
||||
const apiKey = localStorage.getItem('opal_gemini_api_key') || '';
|
||||
const model = localStorage.getItem('opal_selected_model') || 'gemini-2.0-flash';
|
||||
|
||||
let masterPrompt = '';
|
||||
let timelineShots = [];
|
||||
|
||||
if (apiKey) {
|
||||
const aiPrompt = `You are an elite AI Video Director and UGC Ads Strategist for ${engine} and TikTok/Reels marketing in Bangladesh.
|
||||
Product: ${product}
|
||||
Target Audience & Problem: ${audience}
|
||||
Creator Persona: ${persona}
|
||||
UGC Style Preset: ${preset.name}
|
||||
Duration: ${duration}
|
||||
|
||||
Generate:
|
||||
1. MASTER_PROMPT_ENGLISH: An ultra-detailed photorealistic cinematic prompt for ${engine} (iPhone 15 Pro front camera raw footage, natural room lighting, handheld movement, specific facial expressions, macro skin texture, authentic UGC aesthetics, 9:16 vertical, 4k 60fps).
|
||||
2. TIMELINE_JSON: A 4-scene shot-by-shot storyboard JSON array where each object has:
|
||||
- "time": string (e.g. "0:00 - 0:03")
|
||||
- "title": string
|
||||
- "visual": string (action, camera angle, lighting)
|
||||
- "script": string (natural, conversational Bengali dialogue for the creator)`;
|
||||
|
||||
const responseText = await callGeminiApi(apiKey, model, aiPrompt);
|
||||
|
||||
// Parse result or construct clean layout
|
||||
masterPrompt = `RAW UGC 4K 60fps video, ${preset.styleDescription}. Front facing camera shot of a ${persona} holding ${product}, ${preset.cameraSettings}. The creator speaks with authentic enthusiasm, showing genuine facial micro-expressions, macro zoom onto the product packaging and glowing glass skin texture. Ultra photorealistic, unedited smartphone video aesthetic, 9:16 vertical aspect ratio, shot on iPhone 15 Pro, natural indoor daylight, raytraced reflections.`;
|
||||
|
||||
timelineShots = preset.timelineTemplate.map(shot => ({
|
||||
time: shot.time,
|
||||
title: shot.title,
|
||||
visual: shot.visual.replace(/{{product}}/g, product),
|
||||
script: shot.script.replace(/{{product}}/g, product)
|
||||
}));
|
||||
} else {
|
||||
// High-Quality Intelligent Engine Preset
|
||||
masterPrompt = `[${engine} Cinematic Master Prompt • 9:16 UGC Mode]\n` +
|
||||
`A realistic authentic UGC TikTok video of a ${persona} reviewing ${product}. ` +
|
||||
`${preset.styleDescription} ` +
|
||||
`${preset.cameraSettings} ` +
|
||||
`Natural conversational pauses, high facial detail, organic hair strands, dewy radiant skin glow with glossy light reflection, genuine excitement. ` +
|
||||
`Hyper-realistic 4K 60fps, shallow depth of field f/1.8, soft diffused daylit room ambience.`;
|
||||
|
||||
timelineShots = preset.timelineTemplate.map(shot => ({
|
||||
time: shot.time,
|
||||
title: shot.title,
|
||||
visual: shot.visual.replace(/{{product}}/g, product),
|
||||
script: shot.script.replace(/{{product}}/g, product)
|
||||
}));
|
||||
}
|
||||
|
||||
// Render Results
|
||||
if (engineBadge) engineBadge.textContent = `${engine} • ${duration} • 9:16 UGC`;
|
||||
masterPromptBox.textContent = masterPrompt.trim();
|
||||
|
||||
timelineContainer.innerHTML = timelineShots.map((shot, idx) => `
|
||||
<div class="ugc-shot-card">
|
||||
<div class="ugc-shot-header">
|
||||
<span class="ugc-shot-title">${shot.title}</span>
|
||||
<span class="ugc-shot-time">${shot.time}</span>
|
||||
</div>
|
||||
<p class="ugc-shot-desc"><strong>🎬 Visual & Camera:</strong> ${shot.visual}</p>
|
||||
<p class="ugc-shot-script"><strong>🎙️ Bengali Dialogue / Voiceover:</strong> ${shot.script}</p>
|
||||
</div>
|
||||
`).join('');
|
||||
|
||||
resultCard.classList.remove('hidden');
|
||||
statusMsg.classList.add('hidden');
|
||||
resultCard.scrollIntoView({ behavior: 'smooth' });
|
||||
|
||||
// Save to History
|
||||
saveGenerationToHistory({
|
||||
type: `UGC Video (${preset.name})`,
|
||||
title: product,
|
||||
price: `${duration} ${engine}`,
|
||||
date: new Date().toLocaleTimeString()
|
||||
});
|
||||
|
||||
} catch (err) {
|
||||
statusMsg.style.color = '#EF4444';
|
||||
statusMsg.textContent = `❌ Error: ${err.message}`;
|
||||
}
|
||||
|
||||
generateBtn.disabled = false;
|
||||
});
|
||||
|
||||
// Copy Full Flow Script
|
||||
if (copyScriptBtn) {
|
||||
copyScriptBtn.addEventListener('click', () => {
|
||||
const prompt = masterPromptBox.textContent;
|
||||
const cards = document.querySelectorAll('.ugc-shot-card');
|
||||
let flowText = `🎬 GOOGLE FLOW & OMNI UGC SCRIPT\n${'='.repeat(45)}\n\n${prompt}\n\n⏱️ SHOT-BY-SHOT STORYBOARD:\n`;
|
||||
|
||||
cards.forEach(c => {
|
||||
const title = c.querySelector('.ugc-shot-title')?.textContent || '';
|
||||
const time = c.querySelector('.ugc-shot-time')?.textContent || '';
|
||||
const desc = c.querySelector('.ugc-shot-desc')?.textContent || '';
|
||||
const script = c.querySelector('.ugc-shot-script')?.textContent || '';
|
||||
flowText += `\n[${time}] ${title}\n${desc}\n${script}\n`;
|
||||
});
|
||||
|
||||
const ta = document.createElement('textarea');
|
||||
ta.value = flowText;
|
||||
document.body.appendChild(ta);
|
||||
ta.select();
|
||||
document.execCommand('copy');
|
||||
document.body.removeChild(ta);
|
||||
alert('✅ Complete Google Flow Storyboard Copied to Clipboard!');
|
||||
});
|
||||
}
|
||||
|
||||
// Send to Aura Veo 3.1 Engine
|
||||
if (sendToVeoBtn) {
|
||||
sendToVeoBtn.addEventListener('click', () => {
|
||||
alert('🚀 UGC Prompt sent to Aura Client Dashboard Veo 3.1 Video Engine! You can now render this 4K ad on http://localhost:3000');
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
+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>
|
||||
|
||||
@@ -938,3 +938,153 @@ body {
|
||||
color: #DDD6FE;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/* UGC Video Studio & Google Flow Styling */
|
||||
.ugc-timeline-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
margin-top: 14px;
|
||||
}
|
||||
|
||||
.ugc-shot-card {
|
||||
background: rgba(10, 14, 22, 0.75);
|
||||
border: 1px solid var(--card-border);
|
||||
border-radius: var(--radius-md);
|
||||
padding: 14px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.ugc-shot-card::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0; left: 0; bottom: 0;
|
||||
width: 3.5px;
|
||||
background: linear-gradient(180deg, #8B5CF6, #06B6D4);
|
||||
}
|
||||
|
||||
.ugc-shot-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.ugc-shot-time {
|
||||
font-size: 10px;
|
||||
font-weight: 800;
|
||||
background: rgba(139, 92, 246, 0.2);
|
||||
color: #C084FC;
|
||||
padding: 2px 7px;
|
||||
border-radius: 6px;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.ugc-shot-title {
|
||||
font-size: 12.5px;
|
||||
font-weight: 700;
|
||||
color: #F8FAFC;
|
||||
}
|
||||
|
||||
.ugc-shot-desc {
|
||||
font-size: 11.5px;
|
||||
color: #94A3B8;
|
||||
line-height: 1.5;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.ugc-shot-script {
|
||||
font-size: 12px;
|
||||
color: #FDE68A;
|
||||
background: rgba(245, 158, 11, 0.08);
|
||||
border: 1px dashed rgba(245, 158, 11, 0.25);
|
||||
padding: 8px 12px;
|
||||
border-radius: 6px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.ugc-prompt-box {
|
||||
background: #05080C;
|
||||
border: 1px solid rgba(139, 92, 246, 0.3);
|
||||
border-radius: var(--radius-md);
|
||||
padding: 14px;
|
||||
font-family: monospace;
|
||||
font-size: 11.5px;
|
||||
color: #38BDF8;
|
||||
line-height: 1.6;
|
||||
white-space: pre-wrap;
|
||||
position: relative;
|
||||
margin-top: 10px;
|
||||
box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
|
||||
.ugc-tag-pill {
|
||||
font-size: 9px;
|
||||
font-weight: 800;
|
||||
padding: 2px 6px;
|
||||
border-radius: 4px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.ugc-tag-pill.veo {
|
||||
background: rgba(59, 130, 246, 0.2);
|
||||
color: #60A5FA;
|
||||
border: 1px solid rgba(59, 130, 246, 0.4);
|
||||
}
|
||||
|
||||
.ugc-tag-pill.omni {
|
||||
background: rgba(236, 72, 153, 0.2);
|
||||
color: #F472B6;
|
||||
border: 1px solid rgba(236, 72, 153, 0.4);
|
||||
}
|
||||
|
||||
.ugc-presets-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
|
||||
gap: 10px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.ugc-preset-card {
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
border: 1px solid var(--card-border);
|
||||
border-radius: var(--radius-md);
|
||||
padding: 12px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.ugc-preset-card:hover {
|
||||
background: rgba(139, 92, 246, 0.08);
|
||||
border-color: var(--purple-primary);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.ugc-preset-card.active {
|
||||
background: rgba(139, 92, 246, 0.15);
|
||||
border-color: var(--purple-primary);
|
||||
box-shadow: 0 0 14px rgba(139, 92, 246, 0.3);
|
||||
}
|
||||
|
||||
.ugc-preset-card .icon {
|
||||
font-size: 22px;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.ugc-preset-card h4 {
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
color: #F1F5F9;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.ugc-preset-card p {
|
||||
font-size: 10.5px;
|
||||
color: #94A3B8;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user