Update index.html
Browse files- index.html +519 -458
index.html
CHANGED
|
@@ -1,492 +1,553 @@
|
|
| 1 |
<!DOCTYPE html>
|
| 2 |
<html lang="en">
|
| 3 |
<head>
|
| 4 |
-
|
| 5 |
-
|
| 6 |
-
|
| 7 |
-
|
| 8 |
-
|
| 9 |
-
|
| 10 |
-
|
| 11 |
-
|
| 12 |
-
|
| 13 |
-
|
| 14 |
-
|
| 15 |
-
|
| 16 |
-
|
| 17 |
-
|
| 18 |
-
|
| 19 |
-
|
| 20 |
-
|
| 21 |
-
|
| 22 |
-
|
| 23 |
-
}
|
| 24 |
-
|
| 25 |
-
{
|
| 26 |
-
font-family: 'Poppins', sans-serif;
|
| 27 |
-
background-color: var(--background-color);
|
| 28 |
-
color: var(--text-color);
|
| 29 |
-
margin: 0;
|
| 30 |
-
padding: 1rem;
|
| 31 |
-
display: flex;
|
| 32 |
-
justify-content: center;
|
| 33 |
-
align-items: center;
|
| 34 |
-
min-height: 100vh;
|
| 35 |
-
}
|
| 36 |
-
|
| 37 |
-
.container {
|
| 38 |
-
width: 100%;
|
| 39 |
-
max-width: 700px;
|
| 40 |
-
background-color: var(--container-bg);
|
| 41 |
-
padding: 2rem;
|
| 42 |
-
border-radius: 16px;
|
| 43 |
-
box-shadow: 0 10px 30px var(--shadow-color);
|
| 44 |
-
border: 1px solid #e5e7eb;
|
| 45 |
-
box-sizing: border-box;
|
| 46 |
-
}
|
| 47 |
-
|
| 48 |
-
@media (max-width: 600px) {
|
| 49 |
-
.container {
|
| 50 |
-
padding: 1.5rem;
|
| 51 |
-
}
|
| 52 |
-
}
|
| 53 |
-
|
| 54 |
-
h1 {
|
| 55 |
-
font-size: 2rem;
|
| 56 |
-
font-weight: 700;
|
| 57 |
-
margin-bottom: 2rem;
|
| 58 |
-
text-align: center;
|
| 59 |
-
background: linear-gradient(90deg, var(--primary-color-start), var(--primary-color-end));
|
| 60 |
-
-webkit-background-clip: text;
|
| 61 |
-
-webkit-text-fill-color: transparent;
|
| 62 |
-
}
|
| 63 |
-
|
| 64 |
-
label {
|
| 65 |
-
font-weight: 600;
|
| 66 |
-
display: block;
|
| 67 |
-
margin-top: 1.5rem;
|
| 68 |
-
margin-bottom: 0.5rem;
|
| 69 |
-
color: var(--label-color);
|
| 70 |
-
font-size: 0.95rem;
|
| 71 |
-
}
|
| 72 |
-
|
| 73 |
-
select, textarea, input[type="text"] {
|
| 74 |
-
width: 100%;
|
| 75 |
-
padding: 0.8rem 1rem;
|
| 76 |
-
margin-top: 0.2rem;
|
| 77 |
-
border-radius: 8px;
|
| 78 |
-
border: 1px solid var(--border-color);
|
| 79 |
-
font-size: 1rem;
|
| 80 |
-
font-family: 'Poppins', sans-serif;
|
| 81 |
-
box-sizing: border-box;
|
| 82 |
-
background-color: #f9fafb;
|
| 83 |
-
transition: all 0.2s ease-in-out;
|
| 84 |
-
}
|
| 85 |
-
|
| 86 |
-
select:focus, textarea:focus, input[type="text"]:focus {
|
| 87 |
-
outline: none;
|
| 88 |
-
border-color: var(--primary-color-start);
|
| 89 |
-
box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.15);
|
| 90 |
-
background-color: #fff;
|
| 91 |
-
}
|
| 92 |
-
|
| 93 |
-
button {
|
| 94 |
-
background-image: linear-gradient(90deg, var(--primary-color-start), var(--primary-color-end));
|
| 95 |
-
color: #fff;
|
| 96 |
-
border: none;
|
| 97 |
-
padding: 0.9rem 1.5rem;
|
| 98 |
-
margin-top: 2.5rem;
|
| 99 |
-
font-size: 1.1rem;
|
| 100 |
-
font-weight: 600;
|
| 101 |
-
font-family: 'Poppins', sans-serif;
|
| 102 |
-
border-radius: 8px;
|
| 103 |
-
cursor: pointer;
|
| 104 |
-
width: 100%;
|
| 105 |
-
transition: all 0.3s ease;
|
| 106 |
-
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
|
| 107 |
-
}
|
| 108 |
-
|
| 109 |
-
button:hover {
|
| 110 |
-
transform: translateY(-3px);
|
| 111 |
-
box-shadow: 0 7px 20px rgba(0, 0, 0, 0.15);
|
| 112 |
-
}
|
| 113 |
-
|
| 114 |
-
pre {
|
| 115 |
-
background: #282c34;
|
| 116 |
-
color: #abb2bf;
|
| 117 |
-
padding: 1.5rem;
|
| 118 |
-
white-space: pre-wrap;
|
| 119 |
-
word-wrap: break-word;
|
| 120 |
-
border-radius: 8px;
|
| 121 |
-
margin-top: 2rem;
|
| 122 |
-
font-family: 'Courier New', Courier, monospace;
|
| 123 |
-
font-size: 0.95rem;
|
| 124 |
-
line-height: 1.6;
|
| 125 |
-
}
|
| 126 |
-
</style>
|
| 127 |
-
|
| 128 |
-
|
| 129 |
-
<div class="container">
|
| 130 |
-
<h1>🎬 Veo3 JSON Prompt Generator <span style="font-size: 1rem; font-weight: 400;">(Pro)</span></h1>
|
| 131 |
-
|
| 132 |
-
<label for="domain">🎯 Select Domain:</label>
|
| 133 |
-
<select id="domain">
|
| 134 |
-
<option value="education">Education</option>
|
| 135 |
-
<option value="advertisement">Advertisement</option>
|
| 136 |
-
<option value="product_demo">Product Demo</option>
|
| 137 |
-
<option value="creator_pov">Creator POV</option>
|
| 138 |
-
</select>
|
| 139 |
|
| 140 |
-
|
| 141 |
-
|
| 142 |
-
|
| 143 |
-
|
| 144 |
-
|
| 145 |
-
|
| 146 |
-
|
| 147 |
-
|
| 148 |
-
|
| 149 |
-
|
| 150 |
-
|
| 151 |
-
<optgroup label="Products">
|
| 152 |
-
<option value="Smartphone">Smartphone</option>
|
| 153 |
-
<option value="Perfume">Perfume</option>
|
| 154 |
-
<option value="Luxury Car">Luxury Car</option>
|
| 155 |
-
<option value="Skincare Product">Skincare Product</option>
|
| 156 |
-
</optgroup>
|
| 157 |
-
<option value="custom">🛠️ Custom Character or Product</option>
|
| 158 |
-
</select>
|
| 159 |
|
| 160 |
-
|
| 161 |
-
|
| 162 |
-
|
| 163 |
-
|
| 164 |
-
|
| 165 |
-
|
| 166 |
-
|
| 167 |
-
|
| 168 |
-
|
| 169 |
-
|
| 170 |
-
|
| 171 |
-
|
| 172 |
-
|
| 173 |
-
|
| 174 |
-
|
| 175 |
-
|
| 176 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 177 |
|
| 178 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 179 |
|
| 180 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 181 |
|
| 182 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 183 |
|
| 184 |
-
|
| 185 |
-
|
| 186 |
-
</
|
| 187 |
-
|
| 188 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 189 |
<select id="variant">
|
| 190 |
-
|
| 191 |
-
|
| 192 |
-
|
| 193 |
-
|
| 194 |
-
|
| 195 |
-
|
| 196 |
-
|
| 197 |
-
|
| 198 |
-
|
| 199 |
-
|
| 200 |
-
|
| 201 |
-
|
| 202 |
-
|
| 203 |
-
|
| 204 |
-
|
| 205 |
</select>
|
| 206 |
-
|
| 207 |
-
|
|
|
|
| 208 |
<select id="aspectRatio">
|
| 209 |
-
|
| 210 |
-
|
| 211 |
-
|
|
|
|
|
|
|
|
|
|
| 212 |
|
| 213 |
-
|
|
|
|
|
|
|
| 214 |
<select id="platform">
|
| 215 |
-
|
| 216 |
-
|
| 217 |
-
|
| 218 |
-
|
| 219 |
-
|
| 220 |
-
|
| 221 |
-
|
| 222 |
-
|
| 223 |
-
|
|
|
|
| 224 |
</select>
|
| 225 |
-
|
| 226 |
-
|
| 227 |
-
<label>🧠 Narrative Structure
|
| 228 |
-
|
| 229 |
-
|
| 230 |
-
|
| 231 |
-
|
| 232 |
-
|
| 233 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 234 |
</select>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 235 |
|
| 236 |
-
|
| 237 |
-
|
| 238 |
-
|
| 239 |
-
|
| 240 |
-
|
| 241 |
-
|
| 242 |
-
|
| 243 |
-
|
| 244 |
-
|
| 245 |
-
|
| 246 |
-
|
| 247 |
-
|
| 248 |
-
|
| 249 |
-
|
| 250 |
-
|
| 251 |
-
</select>
|
| 252 |
-
|
| 253 |
-
|
| 254 |
-
|
| 255 |
-
|
| 256 |
-
<!-- Camera & Motion -->
|
| 257 |
-
<label>🎥 Camera & Motion (optional):</label>
|
| 258 |
-
<select id="camera">
|
| 259 |
-
<option value="auto">🎯 Auto Based on Scene</option>
|
| 260 |
-
<option value="dolly">Dolly</option>
|
| 261 |
-
<option value="slider">Slider</option>
|
| 262 |
-
<option value="handheld">Handheld (Micro Judder)</option>
|
| 263 |
-
<option value="crane">Crane / Jib</option>
|
| 264 |
-
<option value="rack-focus">Rack Focus</option>
|
| 265 |
-
<option value="360 orbit">360 Orbit</option>
|
| 266 |
-
<option value="fpv">FPV / Drone</option>
|
| 267 |
-
<option value="whip-pan">Whip Pan</option>
|
| 268 |
-
<option value="smash-zoom">Smash Zoom</option>
|
| 269 |
-
</select>
|
| 270 |
-
|
| 271 |
-
<!-- Background (optional) -->
|
| 272 |
-
<label>🌆 Background Environment:</label>
|
| 273 |
-
<select id="background">
|
| 274 |
-
<option value="auto">🎯 Auto Based on Task</option>
|
| 275 |
-
<option value="studio">Studio Cyclorama</option>
|
| 276 |
-
<option value="warehouse">Industrial Warehouse</option>
|
| 277 |
-
<option value="garage">Neon Garage</option>
|
| 278 |
-
<option value="showroom">Marble Showroom</option>
|
| 279 |
-
<option value="night_city">City Night Street</option>
|
| 280 |
-
<option value="forest">Misty Forest</option>
|
| 281 |
-
<option value="lab">Clean Lab</option>
|
| 282 |
-
</select>
|
| 283 |
-
|
| 284 |
-
|
| 285 |
-
<label>💡 Lighting & Mood:</label>
|
| 286 |
-
<select id="lightingMood">
|
| 287 |
-
<option value="golden">Golden Hour Beams</option>
|
| 288 |
-
<option value="rim">Hard Rim / Silhouette</option>
|
| 289 |
-
<option value="wrap">Soft Wrap Key</option>
|
| 290 |
-
<option value="top_contrast">Top Light High-Contrast</option>
|
| 291 |
-
<option value="back_haze">Backlight + Haze</option>
|
| 292 |
-
<option value="neon">Neon Mix (Cyan / Magenta)</option>
|
| 293 |
-
<option value="strobe">Strobe on Beats</option>
|
| 294 |
-
<option value="moonlight">Moonlight Blue</option>
|
| 295 |
-
<option value="daylight">Neutral Daylight</option>
|
| 296 |
-
<option value="🛠️ auto">🛠️ Auto Select</option>
|
| 297 |
-
</select>
|
| 298 |
-
|
| 299 |
-
|
| 300 |
-
<label>🎵 Background Music & SFX:</label>
|
| 301 |
-
<select id="audioTrack">
|
| 302 |
-
<option value="orchestral">Hybrid Orchestral</option>
|
| 303 |
-
<option value="trap">Trap</option>
|
| 304 |
-
<option value="hiphop">Hip-Hop</option>
|
| 305 |
-
<option value="synthwave">Synthwave</option>
|
| 306 |
-
<option value="techno">Techno</option>
|
| 307 |
-
<option value="glitch">Glitch-hop</option>
|
| 308 |
-
<option value="cinematic">Cinematic Pulses</option>
|
| 309 |
-
</select>
|
| 310 |
-
|
| 311 |
-
<label style="margin-top: 0.8rem;">🔊 Sound Effects (SFX):</label>
|
| 312 |
-
<select id="sfx">
|
| 313 |
-
<option value="braaam">Braaam</option>
|
| 314 |
-
<option value="whoosh">Whoosh / Riser</option>
|
| 315 |
-
<option value="snap">Strap Snap</option>
|
| 316 |
-
<option value="rip">Plastic Tear</option>
|
| 317 |
-
<option value="clinks">Metallic Clinks</option>
|
| 318 |
-
<option value="sparks">Angle-Grinder Sparks</option>
|
| 319 |
-
<option value="tire">Tire Chirp</option>
|
| 320 |
-
<option value="heartbeat">Heartbeat Thump</option>
|
| 321 |
-
</select>
|
| 322 |
-
|
| 323 |
-
|
| 324 |
-
<label>🎨 Color Palette:</label>
|
| 325 |
-
<select id="colorPalette">
|
| 326 |
-
<option value="neutrals">Graphite / Obsidian / Silver</option>
|
| 327 |
-
<option value="warm">Amber / Gold / Copper</option>
|
| 328 |
-
<option value="cool">Steel Blue / Cyan / Teal</option>
|
| 329 |
-
<option value="neon">Neon Accents (Magenta / Cyan / Lime)</option>
|
| 330 |
-
<option value="monochrome">Monochrome</option>
|
| 331 |
-
<option value="duotone">Duotone</option>
|
| 332 |
-
<option value="triadic">Triadic (e.g. graphite + amber + red)</option>
|
| 333 |
-
</select>
|
| 334 |
-
|
| 335 |
-
|
| 336 |
-
<label>🚀 Hook / Opening Action:</label>
|
| 337 |
-
<select id="hook">
|
| 338 |
-
<option value="bolt">Bolt Snap (Slow-mo)</option>
|
| 339 |
-
<option value="sparks">Sparks Hit Lens</option>
|
| 340 |
-
<option value="seal">Seal Rip Recoil</option>
|
| 341 |
-
<option value="lights">Lights Power-on Cascade</option>
|
| 342 |
-
<option value="tarp">Tarp Whip-Off</option>
|
| 343 |
-
<option value="confetti">Confetti Pop</option>
|
| 344 |
-
<option value="finger">Macro Finger Press</option>
|
| 345 |
-
<option value="countdown">Countdown Flash</option>
|
| 346 |
-
<option value="zoom">Smash-Zoom Gag</option>
|
| 347 |
-
</select>
|
| 348 |
-
|
| 349 |
-
|
| 350 |
-
|
| 351 |
-
<label>🎬 Finale / Closing Action:</label>
|
| 352 |
-
<select id="finale">
|
| 353 |
-
<option value="doors_up">Butterfly Doors + 360 Orbit</option>
|
| 354 |
-
<option value="bloom">Taillight Bloom → Logo-out</option>
|
| 355 |
-
<option value="hero_push">Hero Push-in → Blackout</option>
|
| 356 |
-
<option value="freeze">Freeze Frame + End Card</option>
|
| 357 |
-
<option value="ramp">Speed-Ramp Drive-by</option>
|
| 358 |
-
<option value="reverse">Reverse Reveal Cloth Fall</option>
|
| 359 |
-
</select>
|
| 360 |
-
|
| 361 |
-
|
| 362 |
-
|
| 363 |
-
<label>🔑 Keywords (for fine-tuning):</label>
|
| 364 |
-
<textarea id="keywords" rows="2" placeholder="e.g., macro details, handheld realism, clean logo"></textarea>
|
| 365 |
-
|
| 366 |
-
|
| 367 |
-
|
| 368 |
-
<label>🚫 Negative Prompt (Exclude Things):</label>
|
| 369 |
-
<textarea id="negativePrompt" rows="3" placeholder="e.g., no logos, no text overlays, no watermark, no extra limbs"></textarea>
|
| 370 |
-
|
| 371 |
-
|
| 372 |
-
|
| 373 |
-
|
| 374 |
-
|
| 375 |
-
|
| 376 |
-
|
| 377 |
-
<button onclick="generatePrompt()">🚀 Generate Prompt</button>
|
| 378 |
-
<button onclick="copyToClipboard()" style="margin-top: 1rem;">📋 Copy Prompt</button>
|
| 379 |
-
<pre id="output"></pre>
|
| 380 |
|
| 381 |
<script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 382 |
function generatePrompt() {
|
| 383 |
-
|
| 384 |
-
const
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 385 |
|
| 386 |
const prompt = {
|
| 387 |
-
domain
|
| 388 |
-
|
| 389 |
-
task_focus: taskFocus
|
| 390 |
-
variant
|
| 391 |
-
|
| 392 |
-
|
| 393 |
-
|
| 394 |
-
|
| 395 |
-
|
| 396 |
-
|
| 397 |
-
|
|
|
|
|
|
|
|
|
|
| 398 |
audio: {
|
| 399 |
-
music:
|
| 400 |
-
sfx:
|
| 401 |
},
|
| 402 |
-
color_palette:
|
| 403 |
-
hook
|
| 404 |
-
finale
|
| 405 |
-
keywords:
|
| 406 |
-
negative_prompt:
|
| 407 |
};
|
| 408 |
|
| 409 |
-
|
| 410 |
}
|
| 411 |
|
| 412 |
-
function copyToClipboard() {
|
| 413 |
-
const text =
|
| 414 |
-
|
| 415 |
-
|
| 416 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 417 |
}
|
| 418 |
|
| 419 |
-
function
|
| 420 |
-
const
|
| 421 |
-
|
|
|
|
| 422 |
}
|
| 423 |
-
</script>
|
| 424 |
-
|
| 425 |
-
<script>
|
| 426 |
-
function generatePrompt() {
|
| 427 |
-
const domain = document.getElementById("domain").value;
|
| 428 |
-
const characterType = document.getElementById("characterType").value;
|
| 429 |
-
const taskFocusSelect = document.getElementById("taskFocus").value;
|
| 430 |
-
const customTask = document.getElementById("customTask").value.trim();
|
| 431 |
-
const taskFocus = taskFocusSelect === "custom" && customTask ? customTask : taskFocusSelect;
|
| 432 |
-
|
| 433 |
-
const variant = document.getElementById("variant").value;
|
| 434 |
-
const aspectRatio = document.getElementById("aspectRatio").value;
|
| 435 |
-
const platform = document.getElementById("platform").value;
|
| 436 |
-
const description = document.getElementById("description").value;
|
| 437 |
-
const visualStyle = document.getElementById("visualStyle").value;
|
| 438 |
-
const camera = document.getElementById("camera").value;
|
| 439 |
-
const background = document.getElementById("background").value;
|
| 440 |
-
const lightingMood = document.getElementById("lightingMood").value;
|
| 441 |
-
const audioTrack = document.getElementById("audioTrack").value;
|
| 442 |
-
const sfx = document.getElementById("sfx").value;
|
| 443 |
-
const colorPalette = document.getElementById("colorPalette").value;
|
| 444 |
-
const hook = document.getElementById("hook").value;
|
| 445 |
-
const finale = document.getElementById("finale").value;
|
| 446 |
-
const keywords = document.getElementById("keywords").value;
|
| 447 |
-
const negativePrompt = document.getElementById("negativePrompt").value;
|
| 448 |
-
|
| 449 |
-
const prompt = {
|
| 450 |
-
domain,
|
| 451 |
-
characterType,
|
| 452 |
-
taskFocus,
|
| 453 |
-
variant,
|
| 454 |
-
meta: {
|
| 455 |
-
aspect_ratio: aspectRatio,
|
| 456 |
-
platform: platform
|
| 457 |
-
},
|
| 458 |
-
description,
|
| 459 |
-
visual_style: visualStyle,
|
| 460 |
-
camera,
|
| 461 |
-
background,
|
| 462 |
-
lighting_mood: lightingMood,
|
| 463 |
-
audio: {
|
| 464 |
-
music: audioTrack,
|
| 465 |
-
sfx: sfx
|
| 466 |
-
},
|
| 467 |
-
color_palette: colorPalette,
|
| 468 |
-
hook,
|
| 469 |
-
finale,
|
| 470 |
-
keywords: keywords.split(',').map(k => k.trim()),
|
| 471 |
-
negative_prompt: negativePrompt
|
| 472 |
-
};
|
| 473 |
-
|
| 474 |
-
document.getElementById("output").textContent = JSON.stringify(prompt, null, 2);
|
| 475 |
-
}
|
| 476 |
-
|
| 477 |
-
function handleTaskFocusChange() {
|
| 478 |
-
const selected = document.getElementById("taskFocus").value;
|
| 479 |
-
const wrapper = document.getElementById("customTaskWrapper");
|
| 480 |
-
wrapper.style.display = selected === "custom" ? "block" : "none";
|
| 481 |
-
}
|
| 482 |
-
|
| 483 |
-
function copyToClipboard() {
|
| 484 |
-
const text = document.getElementById("output").textContent;
|
| 485 |
-
navigator.clipboard.writeText(text).then(() => {
|
| 486 |
-
alert("Prompt copied to clipboard!");
|
| 487 |
-
});
|
| 488 |
-
}
|
| 489 |
-
</script>
|
| 490 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 491 |
</body>
|
| 492 |
</html>
|
|
|
|
| 1 |
<!DOCTYPE html>
|
| 2 |
<html lang="en">
|
| 3 |
<head>
|
| 4 |
+
<meta charset="UTF-8" />
|
| 5 |
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
| 6 |
+
<title>Veo3 JSON Prompt Generator Pro</title>
|
| 7 |
+
|
| 8 |
+
<!-- Fonts & Styles -->
|
| 9 |
+
<link rel="preconnect" href="https://fonts.googleapis.com">
|
| 10 |
+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
| 11 |
+
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap" rel="stylesheet">
|
| 12 |
+
<style>
|
| 13 |
+
:root {
|
| 14 |
+
--primary-color-start: #4F46E5; /* Indigo */
|
| 15 |
+
--primary-color-end: #8B5CF6; /* Violet */
|
| 16 |
+
--background-color: #f8f9fc;
|
| 17 |
+
--container-bg: #ffffff;
|
| 18 |
+
--text-color: #1f2937;
|
| 19 |
+
--label-color: #374151;
|
| 20 |
+
--border-color: #d1d5db;
|
| 21 |
+
--shadow-color: rgba(0, 0, 0, 0.08);
|
| 22 |
+
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 23 |
|
| 24 |
+
body {
|
| 25 |
+
font-family: 'Poppins', sans-serif;
|
| 26 |
+
background-color: var(--background-color);
|
| 27 |
+
color: var(--text-color);
|
| 28 |
+
margin: 0;
|
| 29 |
+
padding: 1rem;
|
| 30 |
+
display: flex;
|
| 31 |
+
justify-content: center;
|
| 32 |
+
align-items: flex-start;
|
| 33 |
+
min-height: 100vh;
|
| 34 |
+
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 35 |
|
| 36 |
+
.container {
|
| 37 |
+
width: 100%;
|
| 38 |
+
max-width: 760px;
|
| 39 |
+
background-color: var(--container-bg);
|
| 40 |
+
padding: 2rem;
|
| 41 |
+
border-radius: 16px;
|
| 42 |
+
box-shadow: 0 10px 30px var(--shadow-color);
|
| 43 |
+
border: 1px solid #e5e7eb;
|
| 44 |
+
box-sizing: border-box;
|
| 45 |
+
}
|
| 46 |
+
|
| 47 |
+
@media (max-width: 600px) {
|
| 48 |
+
.container { padding: 1.25rem; }
|
| 49 |
+
}
|
| 50 |
+
|
| 51 |
+
h1 {
|
| 52 |
+
font-size: 2rem;
|
| 53 |
+
font-weight: 700;
|
| 54 |
+
margin: 0 0 1.25rem 0;
|
| 55 |
+
text-align: center;
|
| 56 |
+
background: linear-gradient(90deg, var(--primary-color-start), var(--primary-color-end));
|
| 57 |
+
-webkit-background-clip: text;
|
| 58 |
+
-webkit-text-fill-color: transparent;
|
| 59 |
+
}
|
| 60 |
+
|
| 61 |
+
.subtitle {
|
| 62 |
+
text-align: center;
|
| 63 |
+
font-size: 0.9rem;
|
| 64 |
+
color: #6b7280;
|
| 65 |
+
margin-bottom: 1.25rem;
|
| 66 |
+
}
|
| 67 |
+
|
| 68 |
+
label {
|
| 69 |
+
font-weight: 600;
|
| 70 |
+
display: block;
|
| 71 |
+
margin-top: 1rem;
|
| 72 |
+
margin-bottom: 0.5rem;
|
| 73 |
+
color: var(--label-color);
|
| 74 |
+
font-size: 0.95rem;
|
| 75 |
+
}
|
| 76 |
|
| 77 |
+
select, textarea, input[type="text"] {
|
| 78 |
+
width: 100%;
|
| 79 |
+
padding: 0.8rem 1rem;
|
| 80 |
+
margin-top: 0.2rem;
|
| 81 |
+
border-radius: 10px;
|
| 82 |
+
border: 1px solid var(--border-color);
|
| 83 |
+
font-size: 1rem;
|
| 84 |
+
font-family: 'Poppins', sans-serif;
|
| 85 |
+
box-sizing: border-box;
|
| 86 |
+
background-color: #f9fafb;
|
| 87 |
+
transition: all 0.2s ease-in-out;
|
| 88 |
+
}
|
| 89 |
+
|
| 90 |
+
select:focus, textarea:focus, input[type="text"]:focus {
|
| 91 |
+
outline: none;
|
| 92 |
+
border-color: var(--primary-color-start);
|
| 93 |
+
box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.15);
|
| 94 |
+
background-color: #fff;
|
| 95 |
+
}
|
| 96 |
+
|
| 97 |
+
.row {
|
| 98 |
+
display: grid;
|
| 99 |
+
grid-template-columns: 1fr 1fr;
|
| 100 |
+
gap: 0.75rem 1rem;
|
| 101 |
+
}
|
| 102 |
|
| 103 |
+
.row > div { width: 100%; }
|
| 104 |
+
|
| 105 |
+
.actions {
|
| 106 |
+
display: grid;
|
| 107 |
+
grid-template-columns: 1fr 1fr;
|
| 108 |
+
gap: 0.75rem;
|
| 109 |
+
margin-top: 1.25rem;
|
| 110 |
+
}
|
| 111 |
+
|
| 112 |
+
button {
|
| 113 |
+
background-image: linear-gradient(90deg, var(--primary-color-start), var(--primary-color-end));
|
| 114 |
+
color: #fff;
|
| 115 |
+
border: none;
|
| 116 |
+
padding: 0.9rem 1.2rem;
|
| 117 |
+
font-size: 1.05rem;
|
| 118 |
+
font-weight: 700;
|
| 119 |
+
font-family: 'Poppins', sans-serif;
|
| 120 |
+
border-radius: 10px;
|
| 121 |
+
cursor: pointer;
|
| 122 |
+
width: 100%;
|
| 123 |
+
transition: transform 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease;
|
| 124 |
+
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.10);
|
| 125 |
+
}
|
| 126 |
+
|
| 127 |
+
button:hover { transform: translateY(-2px); box-shadow: 0 7px 20px rgba(0, 0, 0, 0.15); }
|
| 128 |
+
button:active { transform: translateY(0); }
|
| 129 |
+
|
| 130 |
+
.secondary {
|
| 131 |
+
background: #111827;
|
| 132 |
+
}
|
| 133 |
+
|
| 134 |
+
pre {
|
| 135 |
+
background: #0f172a;
|
| 136 |
+
color: #e5e7eb;
|
| 137 |
+
padding: 1rem 1.25rem;
|
| 138 |
+
white-space: pre-wrap;
|
| 139 |
+
word-break: break-word;
|
| 140 |
+
border-radius: 12px;
|
| 141 |
+
margin-top: 1rem;
|
| 142 |
+
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
| 143 |
+
font-size: 0.92rem;
|
| 144 |
+
line-height: 1.6;
|
| 145 |
+
border: 1px solid #1f2937;
|
| 146 |
+
}
|
| 147 |
+
|
| 148 |
+
.note { font-size: 0.8rem; color: #6b7280; margin-top: 0.25rem; }
|
| 149 |
+
|
| 150 |
+
.toast {
|
| 151 |
+
position: fixed; right: 16px; bottom: 16px; background: #111827; color: #fff; padding: 10px 12px; border-radius: 10px; opacity: 0; transform: translateY(10px);
|
| 152 |
+
box-shadow: 0 8px 20px rgba(0,0,0,0.2); transition: opacity .2s ease, transform .2s ease;
|
| 153 |
+
font-size: 0.9rem; z-index: 1000;
|
| 154 |
+
}
|
| 155 |
|
| 156 |
+
.toast.show { opacity: 1; transform: translateY(0); }
|
| 157 |
+
</style>
|
| 158 |
+
</head>
|
| 159 |
+
<body>
|
| 160 |
+
<div class="container">
|
| 161 |
+
<h1>🎬 Veo3 JSON Prompt Generator <span style="font-size: 1rem; font-weight: 400;">(Pro)</span></h1>
|
| 162 |
+
<div class="subtitle">Single-file HTML • Inline JS • Copy-ready JSON for Hugging Face Spaces</div>
|
| 163 |
|
| 164 |
+
<div class="row">
|
| 165 |
+
<div>
|
| 166 |
+
<label for="domain">🎯 Select Domain</label>
|
| 167 |
+
<select id="domain">
|
| 168 |
+
<option value="education">Education</option>
|
| 169 |
+
<option value="advertisement">Advertisement</option>
|
| 170 |
+
<option value="product_demo">Product Demo</option>
|
| 171 |
+
<option value="creator_pov">Creator POV</option>
|
| 172 |
+
</select>
|
| 173 |
+
</div>
|
| 174 |
+
<div>
|
| 175 |
+
<label for="characterType">🎭 Character / Product</label>
|
| 176 |
+
<select id="characterType">
|
| 177 |
+
<optgroup label="Characters">
|
| 178 |
+
<option>Pakistani Male</option>
|
| 179 |
+
<option>Pakistani Female</option>
|
| 180 |
+
<option>Arab Male</option>
|
| 181 |
+
<option>Arab Female</option>
|
| 182 |
+
<option>South Asian Coach</option>
|
| 183 |
+
<option>Young Creator (Female)</option>
|
| 184 |
+
<option>Young Creator (Male)</option>
|
| 185 |
+
</optgroup>
|
| 186 |
+
<optgroup label="Products">
|
| 187 |
+
<option>Smartphone</option>
|
| 188 |
+
<option>Perfume</option>
|
| 189 |
+
<option>Luxury Car</option>
|
| 190 |
+
<option>Skincare Product</option>
|
| 191 |
+
</optgroup>
|
| 192 |
+
<option value="custom">🛠️ Custom Character or Product</option>
|
| 193 |
+
</select>
|
| 194 |
+
</div>
|
| 195 |
+
</div>
|
| 196 |
+
|
| 197 |
+
<div>
|
| 198 |
+
<label for="taskFocus">📆 Scene Title / Task Focus</label>
|
| 199 |
+
<select id="taskFocus">
|
| 200 |
+
<option>Lesson Planning</option>
|
| 201 |
+
<option>Quiz Generator</option>
|
| 202 |
+
<option>Feedback Automation</option>
|
| 203 |
+
<option>Product Reveal</option>
|
| 204 |
+
<option>How It Works</option>
|
| 205 |
+
<option>From Chaos to Clarity</option>
|
| 206 |
+
<option>Before vs. After</option>
|
| 207 |
+
<option>Transformation Moment</option>
|
| 208 |
+
<option>A Day in the Life</option>
|
| 209 |
+
<option>Problem → Solution</option>
|
| 210 |
+
<option>Behind the Scenes</option>
|
| 211 |
+
<option>AI to the Rescue</option>
|
| 212 |
+
<option>Time-Saver Workflow</option>
|
| 213 |
+
<option value="custom">🛠️ Custom</option>
|
| 214 |
+
</select>
|
| 215 |
+
<div id="customTaskWrapper" style="display:none; margin-top:0.5rem;">
|
| 216 |
+
<input type="text" id="customTask" placeholder="Enter your custom task focus" />
|
| 217 |
+
</div>
|
| 218 |
+
</div>
|
| 219 |
+
|
| 220 |
+
<div class="row">
|
| 221 |
+
<div>
|
| 222 |
+
<label for="variant">🎞️ Video Type / Variant</label>
|
| 223 |
<select id="variant">
|
| 224 |
+
<option value="cinematic">🎬 Cinematic</option>
|
| 225 |
+
<option value="POV">📸 POV</option>
|
| 226 |
+
<option value="meme">😂 Meme</option>
|
| 227 |
+
<option value="teaser">🎯 Teaser</option>
|
| 228 |
+
<option value="tutorial">📚 Tutorial</option>
|
| 229 |
+
<option value="BTS/documentary">🎥 Behind the Scenes</option>
|
| 230 |
+
<option value="montage">🌀 Montage</option>
|
| 231 |
+
<option value="product-hero">💡 Product Hero</option>
|
| 232 |
+
<option value="ASMR">🔊 ASMR</option>
|
| 233 |
+
<option value="drone-flythrough">🚁 Drone Flythrough</option>
|
| 234 |
+
<option value="timelapse">⏳ Timelapse</option>
|
| 235 |
+
<option value="kinetic-typography">🔠 Kinetic Typography</option>
|
| 236 |
+
<option value="stop-motion">🎞️ Stop Motion</option>
|
| 237 |
+
<option value="comedy-sketch">🤣 Comedy Sketch</option>
|
| 238 |
+
<option value="custom">✍️ Custom Variant</option>
|
| 239 |
</select>
|
| 240 |
+
</div>
|
| 241 |
+
<div>
|
| 242 |
+
<label for="aspectRatio">🖼️ Aspect Ratio</label>
|
| 243 |
<select id="aspectRatio">
|
| 244 |
+
<option>16:9</option>
|
| 245 |
+
<option>9:16</option>
|
| 246 |
+
<option>1:1</option>
|
| 247 |
+
</select>
|
| 248 |
+
</div>
|
| 249 |
+
</div>
|
| 250 |
|
| 251 |
+
<div class="row">
|
| 252 |
+
<div>
|
| 253 |
+
<label for="platform">🌐 Platform</label>
|
| 254 |
<select id="platform">
|
| 255 |
+
<option value="tiktok">TikTok</option>
|
| 256 |
+
<option value="facebook_reels">Facebook Reels</option>
|
| 257 |
+
<option value="instagram_reels">Instagram Reels</option>
|
| 258 |
+
<option value="shorts">YouTube Shorts</option>
|
| 259 |
+
<option value="stories">Stories</option>
|
| 260 |
+
<option value="facebook">Facebook Feed</option>
|
| 261 |
+
<option value="x">X (Twitter)</option>
|
| 262 |
+
<option value="linkedin">LinkedIn</option>
|
| 263 |
+
<option value="snap">Snap Spotlight</option>
|
| 264 |
+
<option value="youtube">YouTube (Long)</option>
|
| 265 |
</select>
|
| 266 |
+
</div>
|
| 267 |
+
<div>
|
| 268 |
+
<label for="description">🧠 Narrative Structure</label>
|
| 269 |
+
<select id="description">
|
| 270 |
+
<option>Setting → Action → Reveal</option>
|
| 271 |
+
<option>Reveal-first → Context</option>
|
| 272 |
+
<option>Problem → Build → Payoff</option>
|
| 273 |
+
<option>Before/After Transform</option>
|
| 274 |
+
<option>Countdown → Pop → Logo-out</option>
|
| 275 |
+
</select>
|
| 276 |
+
</div>
|
| 277 |
+
</div>
|
| 278 |
+
|
| 279 |
+
<div class="row">
|
| 280 |
+
<div>
|
| 281 |
+
<label for="visualStyle">🎨 Visual Style</label>
|
| 282 |
+
<select id="visualStyle">
|
| 283 |
+
<option>Photorealistic</option>
|
| 284 |
+
<option>Glossy Commercial</option>
|
| 285 |
+
<option>Cinematic / Filmic Grain</option>
|
| 286 |
+
<option>HDR High-Contrast</option>
|
| 287 |
+
<option>Low-Key Noir</option>
|
| 288 |
+
<option>High-Key Clean</option>
|
| 289 |
+
<option>Cyberpunk / Neon</option>
|
| 290 |
+
<option>Retro VHS</option>
|
| 291 |
+
<option>Natural Documentary</option>
|
| 292 |
+
<option>Hyper-Real Macro</option>
|
| 293 |
+
<option>Tilt-Shift</option>
|
| 294 |
+
<option>Stylized (Toon/Anime/Cel-Shade)</option>
|
| 295 |
+
</select>
|
| 296 |
+
</div>
|
| 297 |
+
<div>
|
| 298 |
+
<label for="camera">🎥 Camera & Motion (optional)</label>
|
| 299 |
+
<select id="camera">
|
| 300 |
+
<option value="auto">🎯 Auto Based on Scene</option>
|
| 301 |
+
<option value="dolly">Dolly</option>
|
| 302 |
+
<option value="slider">Slider</option>
|
| 303 |
+
<option value="handheld">Handheld (Micro Judder)</option>
|
| 304 |
+
<option value="crane">Crane / Jib</option>
|
| 305 |
+
<option value="rack-focus">Rack Focus</option>
|
| 306 |
+
<option value="360 orbit">360 Orbit</option>
|
| 307 |
+
<option value="fpv">FPV / Drone</option>
|
| 308 |
+
<option value="whip-pan">Whip Pan</option>
|
| 309 |
+
<option value="smash-zoom">Smash Zoom</option>
|
| 310 |
+
</select>
|
| 311 |
+
</div>
|
| 312 |
+
</div>
|
| 313 |
+
|
| 314 |
+
<div class="row">
|
| 315 |
+
<div>
|
| 316 |
+
<label for="background">🌆 Background Environment</label>
|
| 317 |
+
<select id="background">
|
| 318 |
+
<option value="auto">🎯 Auto Based on Task</option>
|
| 319 |
+
<option value="studio">Studio Cyclorama</option>
|
| 320 |
+
<option value="warehouse">Industrial Warehouse</option>
|
| 321 |
+
<option value="garage">Neon Garage</option>
|
| 322 |
+
<option value="showroom">Marble Showroom</option>
|
| 323 |
+
<option value="night_city">City Night Street</option>
|
| 324 |
+
<option value="forest">Misty Forest</option>
|
| 325 |
+
<option value="lab">Clean Lab</option>
|
| 326 |
+
</select>
|
| 327 |
+
</div>
|
| 328 |
+
<div>
|
| 329 |
+
<label for="lightingMood">💡 Lighting & Mood</label>
|
| 330 |
+
<select id="lightingMood">
|
| 331 |
+
<option>Golden Hour Beams</option>
|
| 332 |
+
<option>Hard Rim / Silhouette</option>
|
| 333 |
+
<option>Soft Wrap Key</option>
|
| 334 |
+
<option>Top Light High-Contrast</option>
|
| 335 |
+
<option>Backlight + Haze</option>
|
| 336 |
+
<option>Neon Mix (Cyan / Magenta)</option>
|
| 337 |
+
<option>Strobe on Beats</option>
|
| 338 |
+
<option>Moonlight Blue</option>
|
| 339 |
+
<option>Neutral Daylight</option>
|
| 340 |
+
<option>🛠️ Auto Select</option>
|
| 341 |
+
</select>
|
| 342 |
+
</div>
|
| 343 |
+
</div>
|
| 344 |
+
|
| 345 |
+
<div class="row">
|
| 346 |
+
<div>
|
| 347 |
+
<label for="audioTrack">🎵 Background Music</label>
|
| 348 |
+
<select id="audioTrack">
|
| 349 |
+
<option>Hybrid Orchestral</option>
|
| 350 |
+
<option>Trap</option>
|
| 351 |
+
<option>Hip-Hop</option>
|
| 352 |
+
<option>Synthwave</option>
|
| 353 |
+
<option>Techno</option>
|
| 354 |
+
<option>Glitch-hop</option>
|
| 355 |
+
<option>Cinematic Pulses</option>
|
| 356 |
+
</select>
|
| 357 |
+
</div>
|
| 358 |
+
<div>
|
| 359 |
+
<label for="sfx">🔊 Sound Effects (SFX)</label>
|
| 360 |
+
<select id="sfx">
|
| 361 |
+
<option>Braaam</option>
|
| 362 |
+
<option>Whoosh / Riser</option>
|
| 363 |
+
<option>Strap Snap</option>
|
| 364 |
+
<option>Plastic Tear</option>
|
| 365 |
+
<option>Metallic Clinks</option>
|
| 366 |
+
<option>Angle-Grinder Sparks</option>
|
| 367 |
+
<option>Tire Chirp</option>
|
| 368 |
+
<option>Heartbeat Thump</option>
|
| 369 |
+
</select>
|
| 370 |
+
</div>
|
| 371 |
+
</div>
|
| 372 |
+
|
| 373 |
+
<div class="row">
|
| 374 |
+
<div>
|
| 375 |
+
<label for="colorPalette">🎨 Color Palette</label>
|
| 376 |
+
<select id="colorPalette">
|
| 377 |
+
<option>Graphite / Obsidian / Silver</option>
|
| 378 |
+
<option>Amber / Gold / Copper</option>
|
| 379 |
+
<option>Steel Blue / Cyan / Teal</option>
|
| 380 |
+
<option>Neon Accents (Magenta / Cyan / Lime)</option>
|
| 381 |
+
<option>Monochrome</option>
|
| 382 |
+
<option>Duotone</option>
|
| 383 |
+
<option>Triadic (e.g. graphite + amber + red)</option>
|
| 384 |
+
</select>
|
| 385 |
+
</div>
|
| 386 |
+
<div>
|
| 387 |
+
<label for="hook">🚀 Hook / Opening Action</label>
|
| 388 |
+
<select id="hook">
|
| 389 |
+
<option>Bolt Snap (Slow-mo)</option>
|
| 390 |
+
<option>Sparks Hit Lens</option>
|
| 391 |
+
<option>Seal Rip Recoil</option>
|
| 392 |
+
<option>Lights Power-on Cascade</option>
|
| 393 |
+
<option>Tarp Whip-Off</option>
|
| 394 |
+
<option>Confetti Pop</option>
|
| 395 |
+
<option>Macro Finger Press</option>
|
| 396 |
+
<option>Countdown Flash</option>
|
| 397 |
+
<option>Smash-Zoom Gag</option>
|
| 398 |
+
</select>
|
| 399 |
+
</div>
|
| 400 |
+
</div>
|
| 401 |
+
|
| 402 |
+
<div class="row">
|
| 403 |
+
<div>
|
| 404 |
+
<label for="finale">🎬 Finale / Closing Action</label>
|
| 405 |
+
<select id="finale">
|
| 406 |
+
<option>Butterfly Doors + 360 Orbit</option>
|
| 407 |
+
<option>Taillight Bloom → Logo-out</option>
|
| 408 |
+
<option>Hero Push-in → Blackout</option>
|
| 409 |
+
<option>Freeze Frame + End Card</option>
|
| 410 |
+
<option>Speed-Ramp Drive-by</option>
|
| 411 |
+
<option>Reverse Reveal Cloth Fall</option>
|
| 412 |
</select>
|
| 413 |
+
</div>
|
| 414 |
+
<div>
|
| 415 |
+
<label for="keywords">🔑 Keywords (comma-separated)</label>
|
| 416 |
+
<textarea id="keywords" rows="2" placeholder="e.g., macro details, handheld realism, clean logo"></textarea>
|
| 417 |
+
</div>
|
| 418 |
+
</div>
|
| 419 |
|
| 420 |
+
<div>
|
| 421 |
+
<label for="negativePrompt">🚫 Negative Prompt (Exclude Things)</label>
|
| 422 |
+
<textarea id="negativePrompt" rows="3" placeholder="e.g., no logos, no text overlays, no watermark, no extra limbs"></textarea>
|
| 423 |
+
<div class="note">Tip: Keep negatives short and specific for best results.</div>
|
| 424 |
+
</div>
|
| 425 |
+
|
| 426 |
+
<div class="actions">
|
| 427 |
+
<button id="generateBtn" onclick="generatePrompt()">🚀 Generate Prompt</button>
|
| 428 |
+
<button class="secondary" id="copyBtn" onclick="copyToClipboard()">📋 Copy Prompt</button>
|
| 429 |
+
</div>
|
| 430 |
+
|
| 431 |
+
<pre id="output">{ /* Your JSON prompt will appear here */ }</pre>
|
| 432 |
+
</div>
|
| 433 |
+
|
| 434 |
+
<div id="toast" class="toast" role="status" aria-live="polite">Copied!</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 435 |
|
| 436 |
<script>
|
| 437 |
+
// --- helpers ---
|
| 438 |
+
const $ = (id) => document.getElementById(id);
|
| 439 |
+
|
| 440 |
+
function handleTaskFocusChange() {
|
| 441 |
+
const selected = $("taskFocus").value;
|
| 442 |
+
$("customTaskWrapper").style.display = selected === "custom" ? "block" : "none";
|
| 443 |
+
}
|
| 444 |
+
|
| 445 |
+
function resolveAutoCamera(variant) {
|
| 446 |
+
const map = {
|
| 447 |
+
"product-hero": "dolly",
|
| 448 |
+
"cinematic": "slider",
|
| 449 |
+
"POV": "handheld",
|
| 450 |
+
"drone-flythrough": "fpv",
|
| 451 |
+
"montage": "whip-pan",
|
| 452 |
+
"teaser": "rack-focus",
|
| 453 |
+
"tutorial": "slider",
|
| 454 |
+
};
|
| 455 |
+
return map[variant] || "dolly";
|
| 456 |
+
}
|
| 457 |
+
|
| 458 |
+
function resolveAutoBackground(task) {
|
| 459 |
+
const t = (task || "").toLowerCase();
|
| 460 |
+
if (t.includes("reveal") || t.includes("product")) return "showroom";
|
| 461 |
+
if (t.includes("lesson") || t.includes("quiz") || t.includes("feedback")) return "studio";
|
| 462 |
+
if (t.includes("behind")) return "warehouse";
|
| 463 |
+
if (t.includes("pov")) return "night_city";
|
| 464 |
+
return "studio";
|
| 465 |
+
}
|
| 466 |
+
|
| 467 |
function generatePrompt() {
|
| 468 |
+
// base values
|
| 469 |
+
const domain = $("domain").value;
|
| 470 |
+
const characterOrProduct = $("characterType").value;
|
| 471 |
+
const taskFocusSel = $("taskFocus").value;
|
| 472 |
+
const customTask = ($("customTask")?.value || "").trim();
|
| 473 |
+
const taskFocus = taskFocusSel === "custom" ? (customTask || "Custom Task") : taskFocusSel;
|
| 474 |
+
|
| 475 |
+
const variant = $("variant").value;
|
| 476 |
+
const aspectRatio = $("aspectRatio").value;
|
| 477 |
+
const platform = $("platform").value;
|
| 478 |
+
const description = $("description").value;
|
| 479 |
+
const visualStyle = $("visualStyle").value;
|
| 480 |
+
const cameraSel = $("camera").value;
|
| 481 |
+
const backgroundSel = $("background").value;
|
| 482 |
+
const lightingMood = $("lightingMood").value;
|
| 483 |
+
const audioTrack = $("audioTrack").value;
|
| 484 |
+
const sfx = $("sfx").value;
|
| 485 |
+
const colorPalette = $("colorPalette").value;
|
| 486 |
+
const hook = $("hook").value;
|
| 487 |
+
const finale = $("finale").value;
|
| 488 |
+
const keywordsRaw = $("keywords").value;
|
| 489 |
+
const negativePrompt = $("negativePrompt").value;
|
| 490 |
+
|
| 491 |
+
// autos
|
| 492 |
+
const camera = cameraSel === "auto" ? resolveAutoCamera(variant) : cameraSel;
|
| 493 |
+
const background = backgroundSel === "auto" ? resolveAutoBackground(taskFocus) : backgroundSel;
|
| 494 |
|
| 495 |
const prompt = {
|
| 496 |
+
domain,
|
| 497 |
+
main_subject: characterOrProduct,
|
| 498 |
+
task_focus: taskFocus,
|
| 499 |
+
variant,
|
| 500 |
+
meta: {
|
| 501 |
+
aspect_ratio: aspectRatio,
|
| 502 |
+
platform: platform,
|
| 503 |
+
fps: 30
|
| 504 |
+
},
|
| 505 |
+
description,
|
| 506 |
+
visual_style: visualStyle,
|
| 507 |
+
camera,
|
| 508 |
+
background,
|
| 509 |
+
lighting_mood: lightingMood,
|
| 510 |
audio: {
|
| 511 |
+
music: audioTrack,
|
| 512 |
+
sfx: sfx
|
| 513 |
},
|
| 514 |
+
color_palette: colorPalette,
|
| 515 |
+
hook,
|
| 516 |
+
finale,
|
| 517 |
+
keywords: keywordsRaw.split(',').map(s => s.trim()).filter(Boolean),
|
| 518 |
+
negative_prompt: negativePrompt
|
| 519 |
};
|
| 520 |
|
| 521 |
+
$("output").textContent = JSON.stringify(prompt, null, 2);
|
| 522 |
}
|
| 523 |
|
| 524 |
+
async function copyToClipboard() {
|
| 525 |
+
const text = $("output").textContent || "";
|
| 526 |
+
if (!text.trim()) { showToast("Nothing to copy yet"); return; }
|
| 527 |
+
try {
|
| 528 |
+
await navigator.clipboard.writeText(text);
|
| 529 |
+
showToast("✅ Prompt copied to clipboard!");
|
| 530 |
+
} catch (err) {
|
| 531 |
+
// fallback
|
| 532 |
+
const ta = document.createElement('textarea');
|
| 533 |
+
ta.value = text; document.body.appendChild(ta); ta.select();
|
| 534 |
+
try { document.execCommand('copy'); showToast("✅ Prompt copied (fallback)!"); }
|
| 535 |
+
catch (e) { showToast("❌ Copy failed. Select text manually."); }
|
| 536 |
+
finally { document.body.removeChild(ta); }
|
| 537 |
+
}
|
| 538 |
}
|
| 539 |
|
| 540 |
+
function showToast(msg) {
|
| 541 |
+
const t = $("toast");
|
| 542 |
+
t.textContent = msg; t.classList.add('show');
|
| 543 |
+
setTimeout(() => t.classList.remove('show'), 1600);
|
| 544 |
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 545 |
|
| 546 |
+
// initialize
|
| 547 |
+
$("taskFocus").addEventListener('change', handleTaskFocusChange);
|
| 548 |
+
handleTaskFocusChange();
|
| 549 |
+
// generate a starter prompt so output area isn't empty
|
| 550 |
+
generatePrompt();
|
| 551 |
+
</script>
|
| 552 |
</body>
|
| 553 |
</html>
|