| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8" /> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
| <title>Veo3 JSON Prompt Generator Pro — Smart Mode</title> |
| <link rel="preconnect" href="https://fonts.googleapis.com"> |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> |
| <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap" rel="stylesheet"> |
| <style> |
| :root { |
| --primary-color-start: #4F46E5; |
| --primary-color-end: #8B5CF6; |
| --background-color: #f8f9fc; |
| --container-bg: #ffffff; |
| --text-color: #1f2937; |
| --label-color: #374151; |
| --border-color: #d1d5db; |
| --shadow-color: rgba(0, 0, 0, 0.08); |
| } |
| |
| * { box-sizing: border-box; } |
| |
| body { |
| font-family: 'Poppins', sans-serif; |
| background-color: var(--background-color); |
| color: var(--text-color); |
| margin: 0; |
| padding: 1rem; |
| display: flex; |
| justify-content: center; |
| align-items: flex-start; |
| min-height: 100vh; |
| } |
| |
| .container { |
| width: 100%; |
| max-width: 820px; |
| background-color: var(--container-bg); |
| padding: 2rem; |
| border-radius: 16px; |
| box-shadow: 0 10px 30px var(--shadow-color); |
| border: 1px solid #e5e7eb; |
| } |
| |
| @media (max-width: 600px) { .container { padding: 1.25rem; } } |
| |
| h1 { |
| font-size: 2rem; font-weight: 700; margin: 0 0 .75rem 0; text-align: center; |
| background: linear-gradient(90deg, var(--primary-color-start), var(--primary-color-end)); |
| -webkit-background-clip: text; -webkit-text-fill-color: transparent; |
| } |
| |
| .subtitle { text-align:center; font-size:.9rem; color:#6b7280; margin-bottom: .75rem; } |
| |
| label { font-weight: 600; display:block; margin-top: 1rem; margin-bottom: .4rem; color: var(--label-color); font-size:.95rem; } |
| |
| select, textarea, input[type="text"] { |
| width: 100%; padding: .8rem 1rem; border-radius: 10px; border: 1px solid var(--border-color); |
| font-size: 1rem; font-family: 'Poppins', sans-serif; background: #f9fafb; transition: all .2s ease-in-out; |
| } |
| |
| |
| select:focus, |
| textarea:focus, |
| input[type="text"]:focus { |
| outline: none; |
| border-color: var(--primary-color-start); |
| box-shadow: 0 0 0 3px rgba(79,70,229,.15); |
| background: #fff; |
| } |
| |
| |
| select { |
| -webkit-appearance: none; |
| -moz-appearance: none; |
| appearance: none; |
| padding-right: 2.25rem; |
| background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="none"><path d="M6 8l4 4 4-4" stroke="%234F46E5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>'); |
| background-repeat: no-repeat; |
| background-position: right .75rem center; |
| background-size: 14px; |
| } |
| |
| |
| select::-ms-expand { display: none; } |
| |
| |
| select:disabled { opacity: .6; cursor: not-allowed; } |
| |
| .row { display:grid; grid-template-columns: 1fr 1fr; gap: .75rem 1rem; } |
| .row > div { width:100%; } |
| |
| |
| .toolbar { display:flex; gap:1rem; align-items:center; justify-content:center; flex-wrap: wrap; margin:.35rem 0 1rem; } |
| .toolbar .group { display:flex; gap:.5rem; align-items:center; } |
| .toolbar select { width: auto; min-width: 12ch; } |
| |
| .actions { display:grid; grid-template-columns: 1fr 1fr; gap:.75rem; margin-top:1.25rem; } |
| |
| button { |
| background-image: linear-gradient(90deg, var(--primary-color-start), var(--primary-color-end)); color:#fff; border:none; padding:.9rem 1.2rem; font-size:1.05rem; font-weight:700; border-radius:10px; cursor:pointer; width:100%; |
| transition: transform .18s ease, box-shadow .18s ease; box-shadow: 0 4px 15px rgba(0,0,0,.10); |
| } |
| button:hover { transform: translateY(-2px); box-shadow: 0 7px 20px rgba(0,0,0,.15); } |
| button.secondary { background:#111827; } |
| |
| pre { background:#0f172a; color:#e5e7eb; padding:1rem 1.25rem; white-space:pre-wrap; word-break:break-word; border-radius:12px; margin-top:1rem; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size:.92rem; line-height:1.6; border:1px solid #1f2937; } |
| |
| .note { font-size:.8rem; color:#6b7280; margin-top:.25rem; } |
| .dimmed { opacity:.55; } |
| |
| .toast { position: fixed; right: 16px; bottom: 16px; background: #111827; color: #fff; padding: 10px 12px; border-radius: 10px; opacity: 0; transform: translateY(10px); box-shadow: 0 8px 20px rgba(0,0,0,0.2); transition: opacity .2s ease, transform .2s ease; font-size: .9rem; z-index:1000; } |
| .toast.show { opacity:1; transform: translateY(0); } |
| </style> |
| </head> |
| <body> |
| <div class="container"> |
| <h1>🎬 Veo3 JSON Prompt Generator <span style="font-size: 1rem; font-weight: 400;">(Pro)</span></h1> |
| <div class="subtitle">Slect Options • Smart Mode • Copy‑ready JSON Prompt</div> |
|
|
| <div class="toolbar"> |
| <div class="group"> |
| <label for="qualityPreset" style="margin:0">Quality</label> |
| <select id="qualityPreset" aria-label="Quality Preset"> |
| <option value="pro" selected>Pro (default)</option> |
| <option value="draft">Draft / Fast</option> |
| <option value="cinematic">Cinematic</option> |
| </select> |
| </div> |
| </div> |
|
|
| <div class="row"> |
| <div> |
| <label for="domain">🎯 Select Domain</label> |
| <select id="domain"> |
| <option value="education">Education</option> |
| <option value="advertisement" selected>Advertisement</option> |
| <option value="product_demo">Product Demo</option> |
| <option value="creator_pov">Creator POV</option> |
| </select> |
| </div> |
| <div> |
| <label for="characterType">🎭 Character / Product</label> |
| <select id="characterType"> |
| <optgroup label="Characters"> |
| <option>Pakistani Male</option> |
| <option selected>Pakistani Female</option> |
| <option>Arab Male</option> |
| <option>Arab Female</option> |
| <option>South Asian Coach</option> |
| <option>Young Creator (Female)</option> |
| <option>Young Creator (Male)</option> |
| </optgroup> |
| <optgroup label="Products"> |
| <option>Smartphone</option> |
| <option>Perfume</option> |
| <option>Luxury Car</option> |
| <option>Skincare Product</option> |
| </optgroup> |
| <option value="custom">🛠️ Custom Character or Product</option> |
| </select> |
| <div id="customCharacterTypeWrapper" style="display:none; margin-top:.5rem;"> |
| <input type="text" id="customCharacterType" placeholder="Enter custom character or product" /> |
| </div> |
| </div> |
| </div> |
|
|
| <div> |
| <label for="taskFocus">📆 Scene Title / Task Focus</label> |
| <select id="taskFocus"> |
| <option>Lesson Planning</option> |
| <option>Quiz Generator</option> |
| <option>Feedback Automation</option> |
| <option selected>Product Reveal</option> |
| <option>How It Works</option> |
| <option>From Chaos to Clarity</option> |
| <option>Before vs. After</option> |
| <option>Transformation Moment</option> |
| <option>A Day in the Life</option> |
| <option>Problem → Solution</option> |
| <option>Behind the Scenes</option> |
| <option>AI to the Rescue</option> |
| <option>Time-Saver Workflow</option> |
| <option value="custom">🛠️ Custom</option> |
| </select> |
| <div id="customTaskWrapper" style="display:none; margin-top:.5rem;"> |
| <input type="text" id="customTask" placeholder="Enter your custom task focus" /> |
| </div> |
| </div> |
|
|
| <div class="row"> |
| <div> |
| <label for="variant">🎞️ Video Type / Variant</label> |
| <select id="variant"> |
| <option value="cinematic" selected>🎬 Cinematic</option> |
| <option value="POV">📸 POV</option> |
| <option value="meme">😂 Meme</option> |
| <option value="teaser">🎯 Teaser</option> |
| <option value="tutorial">📚 Tutorial</option> |
| <option value="BTS/documentary">🎥 Behind the Scenes</option> |
| <option value="montage">🌀 Montage</option> |
| <option value="product-hero">💡 Product Hero</option> |
| <option value="ASMR">🔊 ASMR</option> |
| <option value="drone-flythrough">🚁 Drone Flythrough</option> |
| <option value="timelapse">⏳ Timelapse</option> |
| <option value="kinetic-typography">🔠 Kinetic Typography</option> |
| <option value="stop-motion">🎞️ Stop Motion</option> |
| <option value="comedy-sketch">🤣 Comedy Sketch</option> |
| <option value="custom">✍️ Custom Variant</option> |
| </select> |
| <div id="customVariantWrapper" style="display:none; margin-top:.5rem;"> |
| <input type="text" id="customVariant" placeholder="Enter custom video type" /> |
| </div> |
| </div> |
| <div> |
| <label for="aspectRatio">🖼️ Aspect Ratio</label> |
| <select id="aspectRatio"> |
| <option>16:9</option> |
| <option selected>9:16</option> |
| <option>1:1</option> |
| </select> |
| <div class="note">Smart Mode: platforms auto‑map from aspect ratio</div> |
| </div> |
| </div> |
|
|
| <div class="row"> |
| <div> |
| <label for="platform">🌐 Platform</label> |
| <select id="platform"> |
| <option value="tiktok">TikTok</option> |
| <option value="facebook_reels">Facebook Reels</option> |
| <option value="instagram_reels">Instagram Reels</option> |
| <option value="shorts">YouTube Shorts</option> |
| <option value="stories">Stories</option> |
| <option value="facebook">Facebook Feed</option> |
| <option value="x">X (Twitter)</option> |
| <option value="linkedin">LinkedIn</option> |
| <option value="snap">Snap Spotlight</option> |
| <option value="youtube">YouTube (Long)</option> |
| </select> |
| </div> |
| <div> |
| <label for="description">🧠 Narrative Structure</label> |
| <select id="description"> |
| <option>Setting → Action → Reveal</option> |
| <option>Reveal-first → Context</option> |
| <option>Problem → Build → Payoff</option> |
| <option>Before/After Transform</option> |
| <option>Countdown → Pop → Logo-out</option> |
| </select> |
| </div> |
| </div> |
|
|
| <div id="lookPresetBlock" style="margin-top:.5rem;"> |
| <label style="display:flex; align-items:center; gap:8px; font-weight:600;"> |
| <input type="checkbox" id="useLookPreset" checked /> Enable Character Look Preset |
| </label> |
| <div id="lookPresetFields" class="row" style="margin-top:0.5rem;"> |
| <div> |
| <label for="skinTone">🧑🏽 Skin Tone</label> |
| <select id="skinTone"> |
| <option>light wheatish</option> |
| <option selected>wheatish</option> |
| <option>medium tan</option> |
| <option>warm brown</option> |
| <option>deep brown</option> |
| </select> |
| </div> |
| <div id="headCoverWrap"> |
| <label for="headCover">🧕 Head Covering (if applicable)</label> |
| <select id="headCover"> |
| <option value="auto" selected>Auto</option> |
| <option value="none">None</option> |
| <option value="dupatta">Dupatta (draped)</option> |
| <option value="hijab_wrap">Hijab (wrap)</option> |
| <option value="shayla">Shayla</option> |
| <option value="niqab">Niqab (eyes visible)</option> |
| </select> |
| </div> |
| </div> |
| <div class="note">Presets add culturally accurate wardrobe & grooming to JSON.</div> |
| </div> |
|
|
| <div class="row"> |
| <div> |
| <label for="visualStyle">🎨 Visual Style</label> |
| <select id="visualStyle"> |
| <option>Photorealistic</option> |
| <option>Glossy Commercial</option> |
| <option selected>Cinematic / Filmic Grain</option> |
| <option>HDR High-Contrast</option> |
| <option>Low-Key Noir</option> |
| <option>High-Key Clean</option> |
| <option>Cyberpunk / Neon</option> |
| <option>Retro VHS</option> |
| <option>Natural Documentary</option> |
| <option>Hyper-Real Macro</option> |
| <option>Tilt-Shift</option> |
| <option>Stylized (Toon/Anime/Cel-Shade)</option> |
| </select> |
| </div> |
| <div> |
| <label for="camera">🎥 Camera & Motion (optional)</label> |
| <select id="camera"> |
| <option value="auto" selected>🎯 Auto Based on Scene</option> |
| <option value="dolly">Dolly</option> |
| <option value="slider">Slider</option> |
| <option value="handheld">Handheld (Micro Judder)</option> |
| <option value="crane">Crane / Jib</option> |
| <option value="rack-focus">Rack Focus</option> |
| <option value="360 orbit">360 Orbit</option> |
| <option value="fpv">FPV / Drone</option> |
| <option value="whip-pan">Whip Pan</option> |
| <option value="smash-zoom">Smash Zoom</option> |
| </select> |
| </div> |
| </div> |
|
|
| <div class="row"> |
| <div> |
| <label for="background">🌆 Background Environment</label> |
| <select id="background"> |
| <option value="auto" selected>🎯 Auto Based on Task</option> |
| <option value="studio">Studio Cyclorama</option> |
| <option value="warehouse">Industrial Warehouse</option> |
| <option value="garage">Neon Garage</option> |
| <option value="showroom">Marble Showroom</option> |
| <option value="night_city">City Night Street</option> |
| <option value="forest">Misty Forest</option> |
| <option value="lab">Clean Lab</option> |
| </select> |
| </div> |
| <div> |
| <label for="lightingMood">💡 Lighting & Mood</label> |
| <select id="lightingMood"> |
| <option>Golden Hour Beams</option> |
| <option>Hard Rim / Silhouette</option> |
| <option selected>Soft Wrap Key</option> |
| <option>Top Light High-Contrast</option> |
| <option>Backlight + Haze</option> |
| <option>Neon Mix (Cyan / Magenta)</option> |
| <option>Strobe on Beats</option> |
| <option>Moonlight Blue</option> |
| <option>Neutral Daylight</option> |
| <option>🛠️ Auto Select</option> |
| </select> |
| </div> |
| </div> |
|
|
| <div class="row"> |
| <div> |
| <label for="audioTrack">🎵 Background Music</label> |
| <select id="audioTrack"> |
| <option>Hybrid Orchestral</option> |
| <option>Trap</option> |
| <option>Hip-Hop</option> |
| <option>Synthwave</option> |
| <option>Techno</option> |
| <option>Glitch-hop</option> |
| <option selected>Cinematic Pulses</option> |
| </select> |
| </div> |
| <div> |
| <label for="sfx">🔊 Sound Effects (SFX)</label> |
| <select id="sfx"> |
| <option>Braaam</option> |
| <option selected>Whoosh / Riser</option> |
| <option>Strap Snap</option> |
| <option>Plastic Tear</option> |
| <option>Metallic Clinks</option> |
| <option>Angle-Grinder Sparks</option> |
| <option>Tire Chirp</option> |
| <option>Heartbeat Thump</option> |
| </select> |
| </div> |
| </div> |
|
|
| <div id="voiceoverBlock" style="margin-top:.5rem;"> |
| <label style="display:flex; align-items:center; gap:8px; font-weight:600;"> |
| <input type="checkbox" id="useVoiceover" checked /> Enable Voiceover |
| </label> |
| <div id="voFields" class="row" style="margin-top:0.5rem;"> |
| <div> |
| <label for="voLanguage">🎙 Language</label> |
| <select id="voLanguage"> |
| <option value="ur-PK-roman" selected>Urdu (Roman Urdu)</option> |
| <option value="ur-PK">Urdu (Nastaliq)</option> |
| <option value="en-US">English (US)</option> |
| <option value="en-GB">English (UK)</option> |
| <option value="ar-Gulf">Arabic (Gulf)</option> |
| <option value="ar-Levant">Arabic (Levant)</option> |
| </select> |
| </div> |
| <div> |
| <label for="voGender">👤 Voice</label> |
| <select id="voGender"> |
| <option value="female" selected>Female</option> |
| <option value="male">Male</option> |
| <option value="youth">Youth</option> |
| </select> |
| </div> |
| <div> |
| <label for="voTone">🎚 Tone</label> |
| <select id="voTone"> |
| <option value="cinematic" selected>Cinematic</option> |
| <option value="friendly">Friendly</option> |
| <option value="authoritative">Authoritative</option> |
| <option value="educational">Educational</option> |
| <option value="inspirational">Inspirational</option> |
| <option value="playful">Playful</option> |
| </select> |
| </div> |
| <div> |
| <label for="voPace">⏱ Pace</label> |
| <select id="voPace"> |
| <option value="slow">Slow</option> |
| <option value="medium" selected>Medium</option> |
| <option value="fast">Fast</option> |
| </select> |
| </div> |
| </div> |
| <label for="voScript" style="margin-top:.5rem;">📝 Voiceover Script (optional)</label> |
| <textarea id="voScript" rows="3" placeholder="Write your VO script here... or leave empty to generate later"></textarea> |
| </div> |
|
|
| <div class="row"> |
| <div> |
| <label for="colorPalette">🎨 Color Palette</label> |
| <select id="colorPalette"> |
| <option>Graphite / Obsidian / Silver</option> |
| <option selected>Amber / Gold / Copper</option> |
| <option>Steel Blue / Cyan / Teal</option> |
| <option>Neon Accents (Magenta / Cyan / Lime)</option> |
| <option>Monochrome</option> |
| <option>Duotone</option> |
| <option>Triadic (e.g. graphite + amber + red)</option> |
| </select> |
| </div> |
| <div> |
| <label for="hook">🚀 Hook / Opening Action</label> |
| <select id="hook"> |
| <option>Bolt Snap (Slow-mo)</option> |
| <option>Sparks Hit Lens</option> |
| <option>Seal Rip Recoil</option> |
| <option>Lights Power-on Cascade</option> |
| <option selected>Tarp Whip-Off</option> |
| <option>Confetti Pop</option> |
| <option>Macro Finger Press</option> |
| <option>Countdown Flash</option> |
| <option>Smash-Zoom Gag</option> |
| </select> |
| </div> |
| </div> |
|
|
| <div class="row"> |
| <div> |
| <label for="finale">🎬 Finale / Closing Action</label> |
| <select id="finale"> |
| <option selected>Hero Push-in → Blackout</option> |
| <option>Butterfly Doors + 360 Orbit</option> |
| <option>Taillight Bloom → Logo-out</option> |
| <option>Freeze Frame + End Card</option> |
| <option>Speed-Ramp Drive-by</option> |
| <option>Reverse Reveal Cloth Fall</option> |
| </select> |
| </div> |
| <div> |
| <label for="keywords">🔑 Keywords (comma-separated)</label> |
| <textarea id="keywords" rows="2" placeholder="e.g., macro details, handheld realism, clean logo"></textarea> |
| </div> |
| </div> |
|
|
| <div> |
| <label for="negativePrompt">🚫 Negative Prompt (Exclude Things)</label> |
| <textarea id="negativePrompt" rows="3" placeholder="e.g., no logos, no text overlays, no watermark, no extra limbs"></textarea> |
| <div class="note">Smart Mode auto-adds clean negatives if left empty.</div> |
| </div> |
|
|
| <div class="actions"> |
| <button id="generateBtn" onclick="generatePrompt()">🚀 Generate Prompt</button> |
| <button class="secondary" id="copyBtn" onclick="copyToClipboard()">📋 Copy Prompt</button> |
| </div> |
|
|
| <pre id="output" aria-live="polite">{ /* Your JSON prompt will appear here */ }</pre> |
| </div> |
|
|
| <div id="toast" class="toast" role="status" aria-live="polite">Copied!</div> |
|
|
| <script> |
| |
| const $ = (id) => document.getElementById(id); |
| |
| function showToast(msg="Copied!"){ |
| const t = $("toast"); if(!t) return; t.textContent = msg; t.classList.add("show"); setTimeout(()=>t.classList.remove("show"), 1200); |
| } |
| |
| let _lastJSON = ""; |
| let _typeTimer = null; |
| |
| function typewriter(el, text, speed = 8){ |
| if (!el) return; |
| if (_typeTimer) { clearInterval(_typeTimer); _typeTimer = null; } |
| el.textContent = ""; |
| let i = 0; |
| _typeTimer = setInterval(()=>{ |
| el.textContent += text[i++] || ""; |
| if (i >= text.length) { clearInterval(_typeTimer); _typeTimer = null; } |
| }, speed); |
| } |
| |
| function copyToClipboard(){ |
| const text = _lastJSON || $("output").textContent || ""; |
| navigator.clipboard.writeText(text).then(()=>showToast("Copied!")); |
| } |
| |
| |
| if (typeof window.generatePrompt !== 'function') { |
| window.generatePrompt = function(){ }; |
| } |
| </script> |
|
|
| <script> |
| |
| const AR_TO_PLATFORMS = { |
| "9:16": ["tiktok","instagram_reels","facebook_reels","shorts","snap","stories"], |
| "16:9": ["youtube","facebook","x","linkedin"], |
| "1:1": ["instagram_feed","facebook"] |
| }; |
| |
| const AUTO_PRESETS = { |
| cinematic: { |
| camera: ["dolly","rack-focus","360 orbit"], |
| lighting: "Backlight + Haze", |
| bg: "showroom", |
| music: "Cinematic Pulses", |
| sfx: "Whoosh / Riser" |
| }, |
| "product-hero": { |
| camera: ["slider","macro"], |
| lighting: "Top Light High-Contrast", |
| bg: "studio", |
| music: "Hybrid Orchestral", |
| sfx: "Metallic Clinks" |
| }, |
| tutorial: { |
| camera: ["handheld","rack-focus"], |
| lighting: "Soft Wrap Key", |
| bg: "lab", |
| music: "Cinematic Pulses", |
| sfx: "Metallic Clinks" |
| }, |
| "BTS/documentary": { |
| camera: ["handheld"], |
| lighting: "Neutral Daylight", |
| bg: "warehouse", |
| music: "Cinematic Pulses", |
| sfx: "Whoosh / Riser" |
| }, |
| meme: { |
| camera: ["smash-zoom","whip-pan"], |
| lighting: "High-Key Clean", |
| bg: "auto", |
| music: "Trap", |
| sfx: "Whoosh / Riser" |
| } |
| }; |
| |
| const DOMAIN_HINTS = { |
| education: { lighting: "Neutral Daylight", bg: "lab" }, |
| advertisement:{ lighting: "Top Light High-Contrast", bg: "showroom" }, |
| product_demo:{ lighting: "High-Key Clean", bg: "studio" }, |
| creator_pov: { lighting: "Soft Wrap Key", bg: "night_city" } |
| }; |
| |
| const QUALITY_PRESET = { |
| draft: { fps: 24, grain: "off", denoise: "on", duration: "8–10s" }, |
| pro: { fps: 30, grain: "light",denoise: "auto",duration: "10–12s" }, |
| cinematic: { fps: 30, grain: "gentle filmic", denoise: "auto", duration: "12–14s" } |
| }; |
| |
| const el = (id)=>document.getElementById(id); |
| |
| const aspectEl = el("aspectRatio"); |
| const platEl = el("platform"); |
| const varEl = el("variant"); |
| const domEl = el("domain"); |
| const qualEl = el("qualityPreset") || { value:"pro" }; |
| |
| function syncPlatformsFromAspect() { |
| if (!aspectEl || !platEl) return; |
| const ar = aspectEl.value; |
| const rec = AR_TO_PLATFORMS[ar] || []; |
| platEl.dataset.recommended = JSON.stringify(rec); |
| |
| if (!platEl.value || !rec.includes(platEl.value)) { |
| platEl.value = rec[0] || platEl.value || "tiktok"; |
| } |
| } |
| |
| function setIfAuto(selectEl, val){ |
| if (!selectEl) return; |
| const cur = (selectEl.value||"").toLowerCase(); |
| if (cur === "auto" || cur === "🎯 auto based on scene".toLowerCase() || cur === "🛠️ auto select".toLowerCase() || cur === "") { |
| selectEl.value = val; |
| } |
| } |
| |
| function autoFromVariantAndDomain() { |
| const v = (varEl?.value || "cinematic").toLowerCase(); |
| const d = (domEl?.value || "advertisement").toLowerCase(); |
| const vAuto = AUTO_PRESETS[v] || {}; |
| const dAuto = DOMAIN_HINTS[d] || {}; |
| |
| const cameraEl = el("camera"); |
| const lightingEl = el("lightingMood"); |
| const bgEl = el("background"); |
| const musicEl = el("audioTrack"); |
| const sfxEl = el("sfx"); |
| |
| const cameraVal = Array.isArray(vAuto.camera) ? vAuto.camera[0] : vAuto.camera; |
| setIfAuto(cameraEl, cameraVal || "auto"); |
| setIfAuto(lightingEl, vAuto.lighting || dAuto.lighting || "🛠️ Auto Select"); |
| setIfAuto(bgEl, vAuto.bg || dAuto.bg || "auto"); |
| setIfAuto(musicEl, vAuto.music || "Cinematic Pulses"); |
| setIfAuto(sfxEl, vAuto.sfx || "Whoosh / Riser"); |
| } |
| |
| function cleanObj(obj){ |
| const isArr = Array.isArray(obj); |
| const acc = isArr ? [] : {}; |
| Object.entries(obj).forEach(([k,v])=>{ |
| if (v === undefined || v === null) return; |
| if (typeof v === 'string' && v.trim() === '') return; |
| if (typeof v === 'string' && /^(auto|🛠️ Auto Select|🎯 Auto Based on Scene)$/i.test(v.trim())) return; |
| if (Array.isArray(v) && v.length===0) return; |
| acc[k] = (v && typeof v === 'object' && !Array.isArray(v)) ? cleanObj(v) : v; |
| }); |
| return acc; |
| } |
| |
| const _oldGenerate = window.generatePrompt; |
| window.generatePrompt = function(){ |
| autoFromVariantAndDomain(); |
| syncPlatformsFromAspect(); |
| |
| const qp = QUALITY_PRESET[qualEl.value] || QUALITY_PRESET.pro; |
| |
| const variant = (el("variant")?.value === "custom" ? el("customVariant")?.value : el("variant")?.value) || "cinematic"; |
| const ar = el("aspectRatio")?.value || "16:9"; |
| const domain = el("domain")?.value || "advertisement"; |
| const scene = (el("taskFocus")?.value === "custom" ? el("customTask")?.value : el("taskFocus")?.value) || "Product Reveal"; |
| |
| const lookOn = el("useLookPreset")?.checked; |
| const voOn = el("useVoiceover")?.checked; |
| |
| let subjectLook = null; |
| if (lookOn) { |
| const type = (el("characterType")?.value === "custom" ? el("customCharacterType")?.value : el("characterType")?.value); |
| const tone = el("skinTone")?.value; |
| const hc = el("headCover")?.value; |
| subjectLook = { type, skin_tone: tone, head_cover: hc }; |
| } |
| |
| let voiceover = null; |
| if (voOn) { |
| voiceover = { |
| language: el("voLanguage")?.value, |
| voice: el("voGender")?.value, |
| tone: el("voTone")?.value, |
| pace: el("voPace")?.value, |
| script: (el("voScript")?.value || "").trim() |
| }; |
| } |
| |
| const camera = el("camera")?.value; |
| const lighting = el("lightingMood")?.value; |
| const bg = el("background")?.value; |
| const music = el("audioTrack")?.value; |
| const sfx = el("sfx")?.value; |
| |
| let platforms = []; |
| if (platEl?.dataset?.recommended){ |
| const rec = JSON.parse(platEl.dataset.recommended); |
| platforms = platEl.value ? [platEl.value] : rec; |
| } |
| |
| const negatives = (el("negativePrompt")?.value || "no logos, no text overlays, no watermark").trim(); |
| |
| const meta = { |
| aspect_ratio: ar, |
| duration: qp.duration, |
| fps: qp.fps, |
| grain: qp.grain, |
| denoise: qp.denoise, |
| platforms |
| }; |
| |
| const out = cleanObj({ |
| variant, |
| domain, |
| scene_title: scene, |
| meta, |
| subject_look: subjectLook, |
| visual_style: el("visualStyle")?.value || "Cinematic / Filmic Grain", |
| camera, |
| background: bg, |
| lighting, |
| music, |
| sfx, |
| color_palette: el("colorPalette")?.value, |
| hook: el("hook")?.value, |
| finale: el("finale")?.value, |
| voiceover, |
| keywords: (el("keywords")?.value||"").trim(), |
| negative_prompt: negatives |
| }); |
| |
| const pretty = JSON.stringify(out, null, 2); |
| _lastJSON = pretty; |
| typewriter(document.getElementById("output"), pretty, 6); |
| |
| if (typeof _oldGenerate === "function") { try { _oldGenerate(); } catch(e){} } |
| }; |
| |
| |
| aspectEl?.addEventListener("change", syncPlatformsFromAspect); |
| domEl?.addEventListener("change", ()=>{ autoFromVariantAndDomain(); }); |
| |
| |
| const taskFocus = el('taskFocus'); |
| const customTaskWrap = el('customTaskWrapper'); |
| taskFocus?.addEventListener('change', ()=>{ |
| customTaskWrap.style.display = taskFocus.value === 'custom' ? 'block' : 'none'; |
| }); |
| |
| |
| const characterType = el('characterType'); |
| const customCharacterWrap = el('customCharacterTypeWrapper'); |
| characterType?.addEventListener('change', () => { |
| customCharacterWrap.style.display = characterType.value === 'custom' ? 'block' : 'none'; |
| }); |
| |
| |
| const customVariantWrap = el('customVariantWrapper'); |
| varEl?.addEventListener("change", ()=>{ |
| autoFromVariantAndDomain(); |
| customVariantWrap.style.display = varEl.value === 'custom' ? 'block' : 'none'; |
| }); |
| |
| document.addEventListener("DOMContentLoaded", ()=>{ |
| autoFromVariantAndDomain(); |
| syncPlatformsFromAspect(); |
| generatePrompt(); |
| }); |
| </script> |
| </body> |
| </html> |
