diff --git a/app.js b/app.js index e902208..0b0af37 100644 --- a/app.js +++ b/app.js @@ -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) => ` +
+
+ ${shot.title} + ${shot.time} +
+

đŸŽŦ Visual & Camera: ${shot.visual}

+

đŸŽ™ī¸ Bengali Dialogue / Voiceover: ${shot.script}

+
+ `).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'); + }); + } +} + diff --git a/index.html b/index.html index c91fc35..f833b50 100644 --- a/index.html +++ b/index.html @@ -262,6 +262,133 @@ Format with clear bullet points, emojis, and a call-to-action. + +
+
+
+ đŸŽŦ +
+

UGC Video Ads & Google Flow Studio

+

Google Veo 3.1 āĻ“ Omni Video āχāĻžā§āϜāĻŋāύ⧇āϰ āϜāĻ¨ā§āϝ āĻšāĻžāχ-āĻ•āύāĻ­āĻžāĻ°ā§āϟāĻŋāĻ‚ UGC āĻ¸ā§āϟāĻžāχāϞ āĻĒā§āϰāĻŽā§āĻĒāϟ āĻ“ āĻ¸ā§āĻ•ā§āϰāĻŋāĻĒā§āϟ āϤ⧈āϰāĻŋ āĻ•āϰ⧁āύ

+
+
+ + +
+ +
+
+ 📱 +

Raw iPhone Review

+

āϰ⧁āĻŽā§‡āϰ āφāĻ˛ā§‹ā§Ÿ āĻĢā§āϰāĻ¨ā§āϟ āĻ•ā§āϝāĻžāĻŽā§‡āϰāĻžā§Ÿ āφāύāĻĢāĻŋāĻ˛ā§āϟāĻžāĻ°ā§āĻĄ āĻŦāĻžāĻ¸ā§āϤāĻŦ āϰāĻŋāĻ­āĻŋāω āĻ“ āĻĒā§āϰāĻĄāĻžāĻ•ā§āϟ āĻŸā§‡āĻ¸ā§āϟāĨ¤

+
+
+ đŸĒž +

Bathroom Mirror GRWM

+

āϏāĻ•āĻžāϞ⧇ āϘ⧁āĻŽ āĻĨ⧇āϕ⧇ āωāϠ⧇ āĻŽā§āϖ⧇ āĻĄā§āϰāĻĒ āĻĻāĻŋā§Ÿā§‡ āĻ—ā§āϞāĻžāϏ āĻ¸ā§āĻ•āĻŋāύ āĻŸā§‡āĻ•ā§āϏāϚāĻžāϰ āĻĒā§āϰāĻĻāĻ°ā§āĻļāύāĨ¤

+
+
+ đŸ“Ļ +

POV Unboxing ASMR

+

āĻšāĻžāϤ⧇ āĻĒāĻžāĻ°ā§āϏ⧇āϞ āĻ–ā§‹āϞāĻž, āĻ•ā§āϰāĻŋāĻ¸ā§āĻĒāĻŋ āĻŦāĻžāĻŦāϞ āĻ°â€ā§āϝāĻžāĻĒ āĻ“ āĻĒā§āϰāĻĄāĻžāĻ•ā§āĻŸā§‡āϰ āĻ¸ā§āϝāĻžāϟāĻŋāĻ¸ā§āĻĢāĻžāχāĻ‚ āϏāĻžāωāĻ¨ā§āĻĄāĨ¤

+
+
+ âš ī¸ +

Viral Claim Skeptic

+

"āϏāĻ¤ā§āϝāĻŋāχ āĻ•āĻŋ āĻ•āĻžāϜ āĻ•āϰ⧇?"—āĻšāĻžāχāĻĄā§āϰ⧋ āĻŽāĻŋāϟāĻžāϰ āĻĻāĻŋā§Ÿā§‡ āϚāĻžāĻŽā§œāĻžāϰ āχāύāĻ¸ā§āĻŸā§āϝāĻžāĻ¨ā§āϟ āĻŸā§‡āĻ¸ā§āϟāĨ¤

+
+
+ đŸŽ™ī¸ +

Campus Micro-Interview

+

āϧāĻžāύāĻŽāĻ¨ā§āĻĄāĻŋ/āĻ­āĻžāĻ°ā§āϏāĻŋāϟāĻŋ āĻ•ā§āϝāĻžāĻŽā§āĻĒāĻžāϏ⧇ āϤāϰ⧁āĻŖā§€āĻĻ⧇āϰ āĻšāĻžāϤ⧇āύāĻžāϤ⧇ āĻĒā§āϰāĻĄāĻžāĻ•ā§āϟ āĻĒāϰāĻ– āĻ•āϰāĻžāύ⧋āĨ¤

+
+
+ 🚀 +

Founder's Direct Hook

+

āϕ⧁āϰāĻŋ⧟āĻžāϰ āĻĒāĻžāĻ°ā§āϏ⧇āϞ⧇āϰ āĻ¸ā§āϤ⧂āĻĒ⧇āϰ āϏāĻžāĻŽāύ⧇ āĻĻāĻžāρ⧜āĻŋā§Ÿā§‡ āϏāϰāĻžāϏāϰāĻŋ āϕ⧋āϰāĻŋ⧟āĻžāύ āχāĻŽāĻĒā§‹āĻ°ā§āĻŸā§‡āϰ āĻ—āĻ˛ā§āĻĒāĨ¤

+
+
+
+ +
+
+ + +
+
+ + +
+
+ +
+
+ + +
+
+ + +
+
+ + +
+
+ + + +
+ + + +
+
@@ -388,6 +515,10 @@ Format with clear bullet points, emojis, and a call-to-action. 🏠 āĻ…ā§āϝāĻžāĻĒāϏ āĻšāĻžāĻŦ +