|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Advanced AI Art Prompt Generator</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
<style> |
|
|
.gradient-bg { |
|
|
background: linear-gradient(135deg, #1e3a8a 0%, #7e22ce 50%, #0e7490 100%); |
|
|
} |
|
|
.prompt-card { |
|
|
background: rgba(255, 255, 255, 0.05); |
|
|
backdrop-filter: blur(10px); |
|
|
border: 1px solid rgba(255, 255, 255, 0.1); |
|
|
} |
|
|
.tag { |
|
|
transition: all 0.2s ease; |
|
|
} |
|
|
.tag:hover { |
|
|
transform: translateY(-2px); |
|
|
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); |
|
|
} |
|
|
textarea { |
|
|
scrollbar-width: thin; |
|
|
scrollbar-color: #7e22ce #1e1e2d; |
|
|
} |
|
|
textarea::-webkit-scrollbar { |
|
|
width: 8px; |
|
|
} |
|
|
textarea::-webkit-scrollbar-track { |
|
|
background: #1e1e2d; |
|
|
} |
|
|
textarea::-webkit-scrollbar-thumb { |
|
|
background-color: #7e22ce; |
|
|
border-radius: 4px; |
|
|
} |
|
|
.animate-pulse-slow { |
|
|
animation: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite; |
|
|
} |
|
|
@keyframes pulse { |
|
|
0%, 100% { |
|
|
opacity: 1; |
|
|
} |
|
|
50% { |
|
|
opacity: 0.5; |
|
|
} |
|
|
} |
|
|
.subject-icon { |
|
|
width: 24px; |
|
|
height: 24px; |
|
|
margin-right: 8px; |
|
|
display: inline-flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="gradient-bg min-h-screen text-gray-100 font-sans"> |
|
|
<div class="container mx-auto px-4 py-12"> |
|
|
<div class="text-center mb-12"> |
|
|
<h1 class="text-4xl md:text-5xl font-bold mb-4 text-transparent bg-clip-text bg-gradient-to-r from-purple-400 to-blue-400"> |
|
|
<i class="fas fa-robot mr-3"></i> Advanced AI Art Prompt Generator |
|
|
</h1> |
|
|
<p class="text-lg md:text-xl max-w-3xl mx-auto opacity-90"> |
|
|
Craft hyper-detailed prompts for any subject - characters, vehicles, objects, creatures and more |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8"> |
|
|
|
|
|
<div class="lg:col-span-1 space-y-8"> |
|
|
|
|
|
<div class="prompt-card rounded-xl p-6 shadow-lg"> |
|
|
<h2 class="text-2xl font-semibold mb-4 flex items-center"> |
|
|
<i class="fas fa-cog mr-2 text-blue-300"></i> General Settings |
|
|
</h2> |
|
|
<div class="space-y-4"> |
|
|
<div> |
|
|
<label class="block text-sm font-medium mb-1">Resolution/Quality</label> |
|
|
<select id="resolution" class="w-full bg-gray-800 border border-gray-700 rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-purple-500"> |
|
|
<option value="8K">8K Ultra HD</option> |
|
|
<option value="16K" selected>16K Hyper-Realistic</option> |
|
|
<option value="32K">32K Extreme Detail</option> |
|
|
<option value="4K">4K Standard</option> |
|
|
<option value="64K">64K Future Tech</option> |
|
|
<option value="100MP">100 Megapixel</option> |
|
|
</select> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-sm font-medium mb-1">Style</label> |
|
|
<select id="style" class="w-full bg-gray-800 border border-gray-700 rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-purple-500"> |
|
|
<option value="hyper-realistic">Hyper-Realistic</option> |
|
|
<option value="cinematic" selected>Cinematic</option> |
|
|
<option value="painterly">Painterly</option> |
|
|
<option value="concept art">Concept Art</option> |
|
|
<option value="surreal">Surreal</option> |
|
|
<option value="cyberpunk">Cyberpunk</option> |
|
|
<option value="steampunk">Steampunk</option> |
|
|
<option value="biopunk">Biopunk</option> |
|
|
<option value="dieselpunk">Dieselpunk</option> |
|
|
<option value="retro-futurism">Retro-Futurism</option> |
|
|
<option value="low-poly">Low Poly</option> |
|
|
<option value="cel-shaded">Cel-Shaded</option> |
|
|
<option value="watercolor">Watercolor</option> |
|
|
<option value="oil painting">Oil Painting</option> |
|
|
<option value="anime">Anime</option> |
|
|
<option value="comic book">Comic Book</option> |
|
|
<option value="pixel art">Pixel Art</option> |
|
|
</select> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-sm font-medium mb-1">Lighting</label> |
|
|
<select id="lighting" class="w-full bg-gray-800 border border-gray-700 rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-purple-500"> |
|
|
<option value="dramatic">Dramatic</option> |
|
|
<option value="volumetric">Volumetric</option> |
|
|
<option value="neon">Neon</option> |
|
|
<option value="natural" selected>Natural</option> |
|
|
<option value="bioluminescent">Bioluminescent</option> |
|
|
<option value="studio">Studio Lighting</option> |
|
|
<option value="moonlight">Moonlight</option> |
|
|
<option value="sunset">Sunset</option> |
|
|
<option value="northern lights">Northern Lights</option> |
|
|
<option value="firelight">Firelight</option> |
|
|
<option value="subsurface">Subsurface Scattering</option> |
|
|
<option value="god rays">God Rays</option> |
|
|
<option value="light pollution">Light Pollution</option> |
|
|
<option value="nebula glow">Nebula Glow</option> |
|
|
</select> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-sm font-medium mb-1">Color Palette</label> |
|
|
<select id="color-palette" class="w-full bg-gray-800 border border-gray-700 rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-purple-500"> |
|
|
<option value="vibrant">Vibrant</option> |
|
|
<option value="muted">Muted</option> |
|
|
<option value="monochromatic">Monochromatic</option> |
|
|
<option value="high contrast" selected>High Contrast</option> |
|
|
<option value="pastel">Pastel</option> |
|
|
<option value="warm">Warm</option> |
|
|
<option value="cool">Cool</option> |
|
|
<option value="electric">Electric</option> |
|
|
<option value="earthy">Earthy</option> |
|
|
<option value="metallic">Metallic</option> |
|
|
<option value="neon noir">Neon Noir</option> |
|
|
<option value="cyber">Cyber Colors</option> |
|
|
<option value="biomechanical">Biomechanical</option> |
|
|
<option value="gradient">Gradient</option> |
|
|
</select> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="prompt-card rounded-xl p-6 shadow-lg"> |
|
|
<h2 class="text-2xl font-semibold mb-4 flex items-center"> |
|
|
<i class="fas fa-user mr-2 text-purple-300"></i> Subject Details |
|
|
</h2> |
|
|
<div class="space-y-4"> |
|
|
<div> |
|
|
<label class="block text-sm font-medium mb-1">Subject Type</label> |
|
|
<select id="subject-type" class="w-full bg-gray-800 border border-gray-700 rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-purple-500"> |
|
|
|
|
|
<option value="human" data-icon="user">Human</option> |
|
|
<option value="cyborg" data-icon="robot" selected>Cyborg</option> |
|
|
<option value="robot" data-icon="robot">Robot</option> |
|
|
<option value="android" data-icon="robot">Android</option> |
|
|
<option value="alien" data-icon="user-astronaut">Alien</option> |
|
|
<option value="elf" data-icon="hat-wizard">Elf</option> |
|
|
<option value="dwarf" data-icon="hammer">Dwarf</option> |
|
|
<option value="orc" data-icon="fist-raised">Orc</option> |
|
|
<option value="vampire" data-icon="skull">Vampire</option> |
|
|
<option value="werewolf" data-icon="paw">Werewolf</option> |
|
|
<option value="demon" data-icon="fire">Demon</option> |
|
|
<option value="angel" data-icon="feather">Angel</option> |
|
|
<option value="ghost" data-icon="ghost">Ghost</option> |
|
|
<option value="zombie" data-icon="skull-crossbones">Zombie</option> |
|
|
<option value="mermaid" data-icon="fish">Mermaid</option> |
|
|
<option value="centaur" data-icon="horse">Centaur</option> |
|
|
|
|
|
|
|
|
<option value="creature" data-icon="dragon">Creature</option> |
|
|
<option value="dragon" data-icon="dragon">Dragon</option> |
|
|
<option value="griffin" data-icon="kiwi-bird">Griffin</option> |
|
|
<option value="phoenix" data-icon="fire">Phoenix</option> |
|
|
<option value="unicorn" data-icon="horse-head">Unicorn</option> |
|
|
<option value="chimera" data-icon="pastafarianism">Chimera</option> |
|
|
<option value="kraken" data-icon="water">Kraken</option> |
|
|
<option value="leviathan" data-icon="water">Leviathan</option> |
|
|
<option value="golem" data-icon="mountain">Golem</option> |
|
|
<option value="elemental" data-icon="wind">Elemental</option> |
|
|
<option value="eldritch" data-icon="eye">Eldritch Horror</option> |
|
|
<option value="mythical" data-icon="book">Mythical Beast</option> |
|
|
|
|
|
|
|
|
<option value="animal" data-icon="paw">Animal</option> |
|
|
<option value="wolf" data-icon="wolf">Wolf</option> |
|
|
<option value="lion" data-icon="lion">Lion</option> |
|
|
<option value="tiger" data-icon="paw">Tiger</option> |
|
|
<option value="bear" data-icon="paw">Bear</option> |
|
|
<option value="eagle" data-icon="eagle">Eagle</option> |
|
|
<option value="shark" data-icon="fish">Shark</option> |
|
|
<option value="snake" data-icon="snake">Snake</option> |
|
|
<option value="owl" data-icon="crow">Owl</option> |
|
|
<option value="fox" data-icon="fox">Fox</option> |
|
|
<option value="deer" data-icon="deer">Deer</option> |
|
|
<option value="cat" data-icon="cat">Cat</option> |
|
|
<option value="dog" data-icon="dog">Dog</option> |
|
|
<option value="horse" data-icon="horse">Horse</option> |
|
|
<option value="bird" data-icon="dove">Bird</option> |
|
|
<option value="insect" data-icon="bug">Insect</option> |
|
|
<option value="arachnid" data-icon="spider">Arachnid</option> |
|
|
|
|
|
|
|
|
<option value="car" data-icon="car">Car</option> |
|
|
<option value="motorcycle" data-icon="motorcycle">Motorcycle</option> |
|
|
<option value="spaceship" data-icon="space-shuttle">Spaceship</option> |
|
|
<option value="airplane" data-icon="plane">Airplane</option> |
|
|
<option value="helicopter" data-icon="helicopter">Helicopter</option> |
|
|
<option value="tank" data-icon="tank">Tank</option> |
|
|
<option value="submarine" data-icon="submarine">Submarine</option> |
|
|
<option value="train" data-icon="train">Train</option> |
|
|
<option value="boat" data-icon="ship">Boat</option> |
|
|
<option value="mech" data-icon="robot">Mech</option> |
|
|
<option value="hovercraft" data-icon="fan">Hovercraft</option> |
|
|
<option value="drone" data-icon="drone">Drone</option> |
|
|
<option value="flying car" data-icon="car-side">Flying Car</option> |
|
|
<option value="steampunk vehicle" data-icon="cogs">Steampunk Vehicle</option> |
|
|
<option value="cyberpunk vehicle" data-icon="car-crash">Cyberpunk Vehicle</option> |
|
|
|
|
|
|
|
|
<option value="weapon" data-icon="gun">Weapon</option> |
|
|
<option value="sword" data-icon="sword">Sword</option> |
|
|
<option value="gun" data-icon="gun">Gun</option> |
|
|
<option value="shield" data-icon="shield-alt">Shield</option> |
|
|
<option value="armor" data-icon="vest">Armor</option> |
|
|
<option value="building" data-icon="building">Building</option> |
|
|
<option value="castle" data-icon="castle">Castle</option> |
|
|
<option value="spaceship" data-icon="rocket">Spaceship</option> |
|
|
<option value="robot" data-icon="robot">Robot</option> |
|
|
<option value="furniture" data-icon="couch">Furniture</option> |
|
|
<option value="electronics" data-icon="laptop">Electronics</option> |
|
|
<option value="food" data-icon="hamburger">Food</option> |
|
|
<option value="drink" data-icon="cocktail">Drink</option> |
|
|
<option value="plant" data-icon="leaf">Plant</option> |
|
|
<option value="tree" data-icon="tree">Tree</option> |
|
|
<option value="flower" data-icon="flower">Flower</option> |
|
|
<option value="crystal" data-icon="gem">Crystal</option> |
|
|
<option value="artifact" data-icon="scroll">Artifact</option> |
|
|
<option value="book" data-icon="book">Book</option> |
|
|
<option value="instrument" data-icon="guitar">Instrument</option> |
|
|
<option value="clock" data-icon="clock">Clock</option> |
|
|
<option value="mask" data-icon="theater-masks">Mask</option> |
|
|
<option value="sculpture" data-icon="monument">Sculpture</option> |
|
|
|
|
|
|
|
|
<option value="landscape" data-icon="mountain">Landscape</option> |
|
|
<option value="cityscape" data-icon="city">Cityscape</option> |
|
|
<option value="battle" data-icon="swords">Battle Scene</option> |
|
|
<option value="market" data-icon="shopping-cart">Market Scene</option> |
|
|
<option value="tavern" data-icon="beer">Tavern Scene</option> |
|
|
<option value="laboratory" data-icon="flask">Laboratory</option> |
|
|
<option value="library" data-icon="book">Library</option> |
|
|
<option value="throne room" data-icon="crown">Throne Room</option> |
|
|
<option value="dungeon" data-icon="dungeon">Dungeon</option> |
|
|
<option value="space station" data-icon="satellite">Space Station</option> |
|
|
<option value="alien planet" data-icon="planet-ringed">Alien Planet</option> |
|
|
<option value="underwater" data-icon="water">Underwater</option> |
|
|
<option value="cloud city" data-icon="cloud">Cloud City</option> |
|
|
<option value="cyber city" data-icon="network-wired">Cyber City</option> |
|
|
<option value="steampunk city" data-icon="cogs">Steampunk City</option> |
|
|
</select> |
|
|
</div> |
|
|
<div id="human-options"> |
|
|
<div> |
|
|
<label class="block text-sm font-medium mb-1">Age</label> |
|
|
<input type="text" id="age" class="w-full bg-gray-800 border border-gray-700 rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-purple-500" placeholder="Late 30s"> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-sm font-medium mb-1">Gender</label> |
|
|
<select id="gender" class="w-full bg-gray-800 border border-gray-700 rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-purple-500"> |
|
|
<option value="male" selected>Male</option> |
|
|
<option value="female">Female</option> |
|
|
<option value="non-binary">Non-binary</option> |
|
|
<option value="ambiguous">Ambiguous</option> |
|
|
<option value="mechanical">Mechanical</option> |
|
|
<option value="otherworldly">Otherworldly</option> |
|
|
</select> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-sm font-medium mb-1">Physical Description</label> |
|
|
<textarea id="physique" class="w-full bg-gray-800 border border-gray-700 rounded-md px-3 py-2 text-sm h-20 focus:outline-none focus:ring-2 focus:ring-purple-500" placeholder="Lean-muscular build, grizzled stubble with salt-and-pepper roots"></textarea> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-sm font-medium mb-1">Scars/Marks</label> |
|
|
<textarea id="scars" class="w-full bg-gray-800 border border-gray-700 rounded-md px-3 py-2 text-sm h-20 focus:outline-none focus:ring-2 focus:ring-purple-500" placeholder="Crosshatched scar tissue, frostbite on left cheek, plasma burn on right forearm"></textarea> |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-sm font-medium mb-1">Clothing/Armor</label> |
|
|
<textarea id="armor" class="w-full bg-gray-800 border border-gray-700 rounded-md px-3 py-2 text-sm h-20 focus:outline-none focus:ring-2 focus:ring-purple-500" placeholder="Patchwork exosuit with scavenged titanium pauldrons, carbon-fiber chestplate"></textarea> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-sm font-medium mb-1">Weapons/Tools</label> |
|
|
<textarea id="weapons" class="w-full bg-gray-800 border border-gray-700 rounded-md px-3 py-2 text-sm h-20 focus:outline-none focus:ring-2 focus:ring-purple-500" placeholder="Hybrid railgun-blunderbuss with organic growth, bayonet made from fossilized alien bone"></textarea> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-sm font-medium mb-1">Special Features</label> |
|
|
<textarea id="special-features" class="w-full bg-gray-800 border border-gray-700 rounded-md px-3 py-2 text-sm h-20 focus:outline-none focus:ring-2 focus:ring-purple-500" placeholder="Glowing cybernetic implants, holographic tattoos, etc."></textarea> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="lg:col-span-1 space-y-8"> |
|
|
<div class="prompt-card rounded-xl p-6 shadow-lg"> |
|
|
<h2 class="text-2xl font-semibold mb-4 flex items-center"> |
|
|
<i class="fas fa-mountain mr-2 text-green-300"></i> Environment |
|
|
</h2> |
|
|
<div class="space-y-4"> |
|
|
<div> |
|
|
<label class="block text-sm font-medium mb-1">Environment Type</label> |
|
|
<select id="environment-type" class="w-full bg-gray-800 border border-gray-700 rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-purple-500"> |
|
|
|
|
|
<option value="forest">Forest</option> |
|
|
<option value="jungle">Jungle</option> |
|
|
<option value="desert">Desert</option> |
|
|
<option value="tundra">Tundra</option> |
|
|
<option value="mountain">Mountain</option> |
|
|
<option value="volcano">Volcano</option> |
|
|
<option value="cave">Cave</option> |
|
|
<option value="canyon">Canyon</option> |
|
|
<option value="swamp">Swamp</option> |
|
|
<option value="beach">Beach</option> |
|
|
<option value="ocean">Ocean</option> |
|
|
<option value="river">River</option> |
|
|
<option value="lake">Lake</option> |
|
|
<option value="waterfall">Waterfall</option> |
|
|
<option value="meadow">Meadow</option> |
|
|
<option value="savanna">Savanna</option> |
|
|
<option value="arctic">Arctic</option> |
|
|
<option value="glacier">Glacier</option> |
|
|
<option value="underwater">Underwater</option> |
|
|
<option value="coral reef">Coral Reef</option> |
|
|
<option value="alien landscape">Alien Landscape</option> |
|
|
|
|
|
|
|
|
<option value="city">City</option> |
|
|
<option value="metropolis">Metropolis</option> |
|
|
<option value="small town">Small Town</option> |
|
|
<option value="village">Village</option> |
|
|
<option value="slums">Slums</option> |
|
|
<option value="industrial">Industrial</option> |
|
|
<option value="downtown">Downtown</option> |
|
|
<option value="suburb">Suburb</option> |
|
|
<option value="market">Market</option> |
|
|
<option value="port">Port</option> |
|
|
<option value="train station">Train Station</option> |
|
|
<option value="airport">Airport</option> |
|
|
<option value="highway">Highway</option> |
|
|
<option value="bridge">Bridge</option> |
|
|
<option value="park">Park</option> |
|
|
<option value="graveyard">Graveyard</option> |
|
|
<option value="ruins">Ruins</option> |
|
|
|
|
|
|
|
|
<option value="castle">Castle</option> |
|
|
<option value="fortress">Fortress</option> |
|
|
<option value="wizard tower">Wizard Tower</option> |
|
|
<option value="elven city">Elven City</option> |
|
|
<option value="dwarven mine">Dwarven Mine</option> |
|
|
<option value="orc camp">Orc Camp</option> |
|
|
<option value="dungeon">Dungeon</option> |
|
|
<option value="labyrinth">Labyrinth</option> |
|
|
<option value="magic academy">Magic Academy</option> |
|
|
<option value="enchanted forest">Enchanted Forest</option> |
|
|
<option value="floating islands">Floating Islands</option> |
|
|
<option value="crystal caves">Crystal Caves</option> |
|
|
<option value="elemental plane">Elemental Plane</option> |
|
|
<option value="heaven">Heaven</option> |
|
|
<option value="hell">Hell</option> |
|
|
<option value="purgatory">Purgatory</option> |
|
|
<option value="fairy realm">Fairy Realm</option> |
|
|
<option value="dreamscape">Dreamscape</option> |
|
|
|
|
|
|
|
|
<option value="space station">Space Station</option> |
|
|
<option value="spaceship">Spaceship</option> |
|
|
<option value="alien city">Alien City</option> |
|
|
<option value="cyber city">Cyber City</option> |
|
|
<option value="underground city">Underground City</option> |
|
|
<option value="floating city">Floating City</option> |
|
|
<option value="underwater city">Underwater City</option> |
|
|
<option value="moon base">Moon Base</option> |
|
|
<option value="mars colony">Mars Colony</option> |
|
|
<option value="asteroid mine">Asteroid Mine</option> |
|
|
<option value="nebula">Nebula</option> |
|
|
<option value="wormhole">Wormhole</option> |
|
|
<option value="black hole">Black Hole</option> |
|
|
<option value="dyson sphere">Dyson Sphere</option> |
|
|
<option value="ring world">Ring World</option> |
|
|
<option value="generation ship">Generation Ship</option> |
|
|
<option value="research facility">Research Facility</option> |
|
|
<option value="cyberpunk alley">Cyberpunk Alley</option> |
|
|
<option value="neon district">Neon District</option> |
|
|
<option value="hacker den">Hacker Den</option> |
|
|
|
|
|
|
|
|
<option value="post-apocalyptic" selected>Post-Apocalyptic</option> |
|
|
<option value="nuclear wasteland">Nuclear Wasteland</option> |
|
|
<option value="zombie outbreak">Zombie Outbreak</option> |
|
|
<option value="alien invasion">Alien Invasion</option> |
|
|
<option value="robot uprising">Robot Uprising</option> |
|
|
<option value="climate disaster">Climate Disaster</option> |
|
|
<option value="plague city">Plague City</option> |
|
|
<option value="abandoned city">Abandoned City</option> |
|
|
<option value="bunker">Bunker</option> |
|
|
<option value="fallout shelter">Fallout Shelter</option> |
|
|
<option value="last city">Last City</option> |
|
|
<option value="overgrown ruins">Overgrown Ruins</option> |
|
|
<option value="toxic jungle">Toxic Jungle</option> |
|
|
<option value="ash wastes">Ash Wastes</option> |
|
|
<option value="flooded world">Flooded World</option> |
|
|
<option value="ice age">Ice Age</option> |
|
|
|
|
|
|
|
|
<option value="medieval">Medieval</option> |
|
|
<option value="renaissance">Renaissance</option> |
|
|
<option value="victorian">Victorian</option> |
|
|
<option value="wild west">Wild West</option> |
|
|
<option value="ancient egypt">Ancient Egypt</option> |
|
|
<option value="ancient rome">Ancient Rome</option> |
|
|
<option value="ancient greece">Ancient Greece</option> |
|
|
<option value="feudal japan">Feudal Japan</option> |
|
|
<option value="viking age">Viking Age</option> |
|
|
<option value="pirates">Pirates</option> |
|
|
<option value="world war">World War</option> |
|
|
<option value="industrial revolution">Industrial Revolution</option> |
|
|
<option value="gold rush">Gold Rush</option> |
|
|
<option value="prohibition era">Prohibition Era</option> |
|
|
<option value="roaring 20s">Roaring 20s</option> |
|
|
<option value="great depression">Great Depression</option> |
|
|
|
|
|
|
|
|
<option value="liminal">Liminal Space</option> |
|
|
<option value="void">Void</option> |
|
|
<option value="white room">White Room</option> |
|
|
<option value="black room">Black Room</option> |
|
|
<option value="infinity">Infinity</option> |
|
|
<option value="fractal">Fractal</option> |
|
|
<option value="abstract">Abstract</option> |
|
|
<option value="surreal">Surreal</option> |
|
|
<option value="psychedelic">Psychedelic</option> |
|
|
<option value="glitch">Glitch</option> |
|
|
<option value="vaporwave">Vaporwave</option> |
|
|
<option value="synthwave">Synthwave</option> |
|
|
<option value="outrun">Outrun</option> |
|
|
<option value="cyberspace">Cyberspace</option> |
|
|
<option value="matrix">Matrix</option> |
|
|
<option value="simulation">Simulation</option> |
|
|
<option value="virtual reality">Virtual Reality</option> |
|
|
<option value="augmented reality">Augmented Reality</option> |
|
|
</select> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-sm font-medium mb-1">Primary Setting</label> |
|
|
<textarea id="primary-setting" class="w-full bg-gray-800 border border-gray-700 rounded-md px-3 py-2 text-sm h-20 focus:outline-none focus:ring-2 focus:ring-purple-500" placeholder="Shattered glass desert under triple moons with crystalline shards refracting light"></textarea> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-sm font-medium mb-1">Structures</label> |
|
|
<textarea id="structures" class="w-full bg-gray-800 border border-gray-700 rounded-md px-3 py-2 text-sm h-20 focus:outline-none focus:ring-2 focus:ring-purple-500" placeholder="Collapsed skyscrapers fused with coral-like alien architecture"></textarea> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-sm font-medium mb-1">Atmosphere</label> |
|
|
<textarea id="atmosphere" class="w-full bg-gray-800 border border-gray-700 rounded-md px-3 py-2 text-sm h-20 focus:outline-none focus:ring-2 focus:ring-purple-500" placeholder="Acid rain suspended mid-fall, frozen by temporal distortion"></textarea> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-sm font-medium mb-1">Lighting Details</label> |
|
|
<textarea id="lighting-details" class="w-full bg-gray-800 border border-gray-700 rounded-md px-3 py-2 text-sm h-20 focus:outline-none focus:ring-2 focus:ring-purple-500" placeholder="Moons cast conflicting shadows (cold cyan/amber/magenta) at different angles"></textarea> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-sm font-medium mb-1">Weather Conditions</label> |
|
|
<textarea id="weather" class="w-full bg-gray-800 border border-gray-700 rounded-md px-3 py-2 text-sm h-20 focus:outline-none focus:ring-2 focus:ring-purple-500" placeholder="Frozen acid rain, radioactive fog, etc."></textarea> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="prompt-card rounded-xl p-6 shadow-lg"> |
|
|
<h2 class="text-2xl font-semibold mb-4 flex items-center"> |
|
|
<i class="fas fa-camera mr-2 text-yellow-300"></i> Composition |
|
|
</h2> |
|
|
<div class="space-y-4"> |
|
|
<div> |
|
|
<label class="block text-sm font-medium mb-1">Camera Lens</label> |
|
|
<select id="camera-lens" class="w-full bg-gray-800 border border-gray-700 rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-purple-500"> |
|
|
<option value="Sony FE 24-70mm f/2.8 GM II" selected>Sony FE 24-70mm f/2.8 GM II</option> |
|
|
<option value="Canon EF 85mm f/1.2L II">Canon EF 85mm f/1.2L II</option> |
|
|
<option value="Nikon 58mm f/1.4G">Nikon 58mm f/1.4G</option> |
|
|
<option value="Leica Noctilux 50mm f/0.95">Leica Noctilux 50mm f/0.95</option> |
|
|
<option value="Zeiss Otus 55mm f/1.4">Zeiss Otus 55mm f/1.4</option> |
|
|
<option value="Sigma 35mm f/1.4 DG HSM Art">Sigma 35mm f/1.4 DG HSM Art</option> |
|
|
<option value="Fujinon XF 56mm f/1.2 R">Fujinon XF 56mm f/1.2 R</option> |
|
|
<option value="Voigtländer 40mm f/1.2 Nokton">Voigtländer 40mm f/1.2 Nokton</option> |
|
|
<option value="Pentax 77mm f/1.8 Limited">Pentax 77mm f/1.8 Limited</option> |
|
|
<option value="Sony FE 135mm f/1.8 GM">Sony FE 135mm f/1.8 GM</option> |
|
|
<option value="Canon EF 200mm f/1.8L USM">Canon EF 200mm f/1.8L USM</option> |
|
|
<option value="Nikon 105mm f/1.4E ED">Nikon 105mm f/1.4E ED</option> |
|
|
<option value="Leica Summilux-M 35mm f/1.4 ASPH">Leica Summilux-M 35mm f/1.4 ASPH</option> |
|
|
<option value="Fujinon GF 110mm f/2 R LM WR">Fujinon GF 110mm f/2 R LM WR</option> |
|
|
<option value="Hasselblad HC 100mm f/2.2">Hasselblad HC 100mm f/2.2</option> |
|
|
<option value="Mamiya 80mm f/1.9 N">Mamiya 80mm f/1.9 N</option> |
|
|
<option value="Contax 85mm f/1.2 MM">Contax 85mm f/1.2 MM</option> |
|
|
<option value="Olympus Zuiko 50mm f/1.2">Olympus Zuiko 50mm f/1.2</option> |
|
|
<option value="Minolta 85mm f/1.4 G(D)">Minolta 85mm f/1.4 G(D)</option> |
|
|
<option value="Canon EF 50mm f/1.0L USM">Canon EF 50mm f/1.0L USM</option> |
|
|
</select> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-sm font-medium mb-1">Shot Type</label> |
|
|
<select id="shot-type" class="w-full bg-gray-800 border border-gray-700 rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-purple-500"> |
|
|
<option value="close-up">Close-up</option> |
|
|
<option value="medium shot">Medium Shot</option> |
|
|
<option value="full body">Full Body</option> |
|
|
<option value="extreme wide">Extreme Wide</option> |
|
|
<option value="dutch angle" selected>Dutch Angle</option> |
|
|
<option value="low angle">Low Angle</option> |
|
|
<option value="high angle">High Angle</option> |
|
|
<option value="bird's eye">Bird's Eye</option> |
|
|
<option value="worm's eye">Worm's Eye</option> |
|
|
<option value="over the shoulder">Over the Shoulder</option> |
|
|
<option value="point of view">Point of View</option> |
|
|
<option value="macro">Macro</option> |
|
|
<option value="tilt-shift">Tilt-Shift</option> |
|
|
<option value="fisheye">Fisheye</option> |
|
|
<option value="panoramic">Panoramic</option> |
|
|
<option value="split diopter">Split Diopter</option> |
|
|
<option value="silhouette">Silhouette</option> |
|
|
<option value="reflection">Reflection</option> |
|
|
<option value="through glass">Through Glass</option> |
|
|
<option value="underwater">Underwater</option> |
|
|
<option value="thermal">Thermal</option> |
|
|
<option value="x-ray">X-Ray</option> |
|
|
<option value="infrared">Infrared</option> |
|
|
<option value="ultraviolet">Ultraviolet</option> |
|
|
</select> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-sm font-medium mb-1">Camera Settings</label> |
|
|
<textarea id="camera-settings" class="w-full bg-gray-800 border border-gray-700 rounded-md px-3 py-2 text-sm h-20 focus:outline-none focus:ring-2 focus:ring-purple-500" placeholder="f/6.3, ISO 800, 1/250s"></textarea> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-sm font-medium mb-1">Post-Processing</label> |
|
|
<textarea id="post-processing" class="w-full bg-gray-800 border border-gray-700 rounded-md px-3 py-2 text-sm h-20 focus:outline-none focus:ring-2 focus:ring-purple-500" placeholder="Motion blur on moving elements, chromatic aberration on glow edges"></textarea> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-sm font-medium mb-1">Depth of Field</label> |
|
|
<textarea id="dof" class="w-full bg-gray-800 border border-gray-700 rounded-md px-3 py-2 text-sm h-20 focus:outline-none focus:ring-2 focus:ring-purple-500" placeholder="Shallow depth of field, bokeh effects, etc."></textarea> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="lg:col-span-1 space-y-8"> |
|
|
<div class="prompt-card rounded-xl p-6 shadow-lg"> |
|
|
<h2 class="text-2xl font-semibold mb-4 flex items-center"> |
|
|
<i class="fas fa-flask mr-2 text-red-300"></i> Advanced Details |
|
|
</h2> |
|
|
<div class="space-y-4"> |
|
|
<div> |
|
|
<label class="block text-sm font-medium mb-1">Textures & Materials</label> |
|
|
<textarea id="textures" class="w-full bg-gray-800 border border-gray-700 rounded-md px-3 py-2 text-sm h-20 focus:outline-none focus:ring-2 focus:ring-purple-500" placeholder="7 corrosion layers—verdigris, blood rust, and crystalline fungus"></textarea> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-sm font-medium mb-1">Symbolism</label> |
|
|
<textarea id="symbolism" class="w-full bg-gray-800 border border-gray-700 rounded-md px-3 py-2 text-sm h-20 focus:outline-none focus:ring-2 focus:ring-purple-500" placeholder="Dog tags show conflicting engravings, reflection shows younger self"></textarea> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-sm font-medium mb-1">Color Grading</label> |
|
|
<textarea id="color-grading" class="w-full bg-gray-800 border border-gray-700 rounded-md px-3 py-2 text-sm h-20 focus:outline-none focus:ring-2 focus:ring-purple-500" placeholder="Desaturated Kodak Ektachrome LUT with +30% teal in mids"></textarea> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-sm font-medium mb-1">Special Effects</label> |
|
|
<textarea id="special-effects" class="w-full bg-gray-800 border border-gray-700 rounded-md px-3 py-2 text-sm h-20 focus:outline-none focus:ring-2 focus:ring-purple-500" placeholder="Bioluminescent spores create floating light sources"></textarea> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-sm font-medium mb-1">Particle Effects</label> |
|
|
<textarea id="particles" class="w-full bg-gray-800 border border-gray-700 rounded-md px-3 py-2 text-sm h-20 focus:outline-none focus:ring-2 focus:ring-purple-500" placeholder="Floating dust, sparks, smoke, etc."></textarea> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-sm font-medium mb-1">Time of Day</label> |
|
|
<textarea id="time-of-day" class="w-full bg-gray-800 border border-gray-700 rounded-md px-3 py-2 text-sm h-20 focus:outline-none focus:ring-2 focus:ring-purple-500" placeholder="Golden hour, midnight, etc."></textarea> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="prompt-card rounded-xl p-6 shadow-lg"> |
|
|
<h2 class="text-2xl font-semibold mb-4 flex items-center"> |
|
|
<i class="fas fa-tags mr-2 text-pink-300"></i> Platform Tags |
|
|
</h2> |
|
|
<div class="space-y-4"> |
|
|
<div> |
|
|
<label class="block text-sm font-medium mb-1">Midjourney Tags</label> |
|
|
<textarea id="midjourney-tags" class="w-full bg-gray-800 border border-gray-700 rounded-md px-3 py-2 text-sm h-20 focus:outline-none focus:ring-2 focus:ring-purple-500" placeholder="vivid_absurdism, biomechanical horror core"></textarea> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-sm font-medium mb-1">CivitAI Tags</label> |
|
|
<textarea id="civitai-tags" class="w-full bg-gray-800 border border-gray-700 rounded-md px-3 py-2 text-sm h-20 focus:outline-none focus:ring-2 focus:ring-purple-500" placeholder="hyper_detail_3, grunge_apocalypse"></textarea> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-sm font-medium mb-1">SeaArt Tags</label> |
|
|
<textarea id="seaart-tags" class="w-full bg-gray-800 border border-gray-700 rounded-md px-3 py-2 text-sm h-20 focus:outline-none focus:ring-2 focus:ring-purple-500" placeholder="quantum_decay, military_surrealism"></textarea> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-sm font-medium mb-1">Stable Diffusion Tags</label> |
|
|
<textarea id="sd-tags" class="w-full bg-gray-800 border border-gray-700 rounded-md px-3 py-2 text-sm h-20 focus:outline-none focus:ring-2 focus:ring-purple-500" placeholder="ultra detailed, intricate"></textarea> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-sm font-medium mb-1">Additional Notes</label> |
|
|
<textarea id="additional-notes" class="w-full bg-gray-800 border border-gray-700 rounded-md px-3 py-2 text-sm h-20 focus:outline-none focus:ring-2 focus:ring-purple-500" placeholder="Merges military grit with existential sci-fi"></textarea> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="mt-12"> |
|
|
<div class="flex justify-center mb-8 space-x-4"> |
|
|
<button id="generate-btn" class="px-8 py-4 bg-gradient-to-r from-purple-600 to-blue-600 rounded-full text-xl font-bold shadow-lg hover:from-purple-700 hover:to-blue-700 transition-all duration-300 transform hover:scale-105 flex items-center"> |
|
|
<i class="fas fa-magic mr-3 animate-pulse-slow"></i> Generate AI Art Prompt |
|
|
</button> |
|
|
<button id="reset-btn" class="px-8 py-4 bg-gradient-to-r from-gray-600 to-gray-800 rounded-full text-xl font-bold shadow-lg hover:from-gray-700 hover:to-gray-900 transition-all duration-300 transform hover:scale-105 flex items-center"> |
|
|
<i class="fas fa-redo mr-3"></i> Reset Form |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div class="prompt-card rounded-xl p-6 shadow-lg mb-8"> |
|
|
<div class="flex justify-between items-center mb-4"> |
|
|
<h2 class="text-2xl font-semibold flex items-center"> |
|
|
<i class="fas fa-scroll mr-2 text-blue-300"></i> Generated Prompt |
|
|
</h2> |
|
|
<div class="space-x-2"> |
|
|
<button id="copy-btn" class="px-4 py-2 bg-gray-800 rounded-md text-sm font-medium hover:bg-gray-700 transition flex items-center"> |
|
|
<i class="fas fa-copy mr-2"></i> Copy to Clipboard |
|
|
</button> |
|
|
<button id="clear-btn" class="px-4 py-2 bg-gray-800 rounded-md text-sm font-medium hover:bg-gray-700 transition flex items-center"> |
|
|
<i class="fas fa-trash-alt mr-2"></i> Clear |
|
|
</button> |
|
|
<button id="save-btn" class="px-4 py-2 bg-gray-800 rounded-md text-sm font-medium hover:bg-gray-700 transition flex items-center"> |
|
|
<i class="fas fa-save mr-2"></i> Save |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
<textarea id="generated-prompt" class="w-full bg-gray-900 border border-gray-700 rounded-md px-4 py-3 text-sm h-64 focus:outline-none focus:ring-2 focus:ring-purple-500 font-mono" readonly></textarea> |
|
|
<div class="mt-4 flex justify-between items-center"> |
|
|
<div class="text-sm text-gray-400"> |
|
|
<span id="char-count">0</span> characters |
|
|
</div> |
|
|
<div class="flex space-x-2"> |
|
|
<select id="prompt-style" class="bg-gray-800 border border-gray-700 rounded-md px-2 py-1 text-sm focus:outline-none focus:ring-2 focus:ring-purple-500"> |
|
|
<option value="standard">Standard Format</option> |
|
|
<option value="concise">Concise Format</option> |
|
|
<option value="bullet">Bullet Points</option> |
|
|
<option value="comma">Comma Separated</option> |
|
|
</select> |
|
|
<button id="format-btn" class="px-3 py-1 bg-gray-800 rounded-md text-sm font-medium hover:bg-gray-700 transition flex items-center"> |
|
|
<i class="fas fa-align-left mr-1"></i> Format |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="text-center text-sm opacity-80"> |
|
|
<p>Tip: For best results, refine your prompt with specific details and unique combinations</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
document.addEventListener('DOMContentLoaded', function() { |
|
|
|
|
|
function setDefaultValues() { |
|
|
document.getElementById('resolution').value = '16K'; |
|
|
document.getElementById('style').value = 'cinematic'; |
|
|
document.getElementById('lighting').value = 'natural'; |
|
|
document.getElementById('color-palette').value = 'high contrast'; |
|
|
document.getElementById('subject-type').value = 'cyborg'; |
|
|
document.getElementById('age').value = 'Late 30s male, 6\'1"'; |
|
|
document.getElementById('gender').value = 'male'; |
|
|
document.getElementById('physique').value = 'Lean-muscular build. Skin shows crosshatched scar tissue (frostbite on left cheek, plasma burn on right forearm). Grizzled stubble with salt-and-pepper roots under tactical dye.'; |
|
|
document.getElementById('scars').value = 'Crosshatched scar tissue (frostbite on left cheek, plasma burn on right forearm)'; |
|
|
document.getElementById('armor').value = 'Patchwork exosuit—scavenged titanium pauldrons (rusted), carbon-fiber chestplate with cracked HUD display (glitching Cyrillic text), and a chainmail undershirt fused with biogel padding. Helmet: Visorless, with a fractured targeting monocle (retina display projecting amber waypoints). Oxygen tubes snake into a corroded rebreather pack.'; |
|
|
document.getElementById('weapons').value = 'Hybrid railgun-blunderbuss with organic growth (glowing mycelium veins) consuming the barrel. A bayonet made from fossilized alien bone.'; |
|
|
document.getElementById('special-features').value = 'Glowing cybernetic implants (hex #00FF9D) pulse in sync with heartbeat. Holographic tattoos display tactical data across forearms.'; |
|
|
document.getElementById('environment-type').value = 'post-apocalyptic'; |
|
|
document.getElementById('primary-setting').value = 'A shattered glass desert under triple moons—crystalline shards (2m height) refract light into prismatic spears. The ground pulses with bioluminescent moss (hex #6AFF00) reacting to body heat.'; |
|
|
document.getElementById('structures').value = 'Collapsed skyscrapers fused with coral-like alien architecture. A derelict WWII-era tank grows chitinous exoskeleton plating.'; |
|
|
document.getElementById('atmosphere').value = 'Acid rain suspended mid-fall (droplets 3cm diameter), frozen by temporal distortion. Each droplet contains a holographic battle memory.'; |
|
|
document.getElementById('lighting-details').value = 'Moons cast conflicting shadows (cold cyan/amber/magenta) at 15°, 45°, and 80° angles. The soldier\'s malfunctioning arc reactor (chestplate) emits unstable UV pulses (hex #9400D3), casting his shadow in 4 directions. Bioluminescence: Spores released from his weapon\'s fungal growth create floating light sources (drifting orbs, 20cm radius).'; |
|
|
document.getElementById('weather').value = 'Frozen acid rain hangs motionless in the air, refracting the triple moonlight. Radioactive fog (hex #00FF9D) rolls in waves, reacting to movement.'; |
|
|
document.getElementById('camera-lens').value = 'Sony FE 24-70mm f/2.8 GM II'; |
|
|
document.getElementById('shot-type').value = 'dutch angle'; |
|
|
document.getElementById('camera-settings').value = 'f/6.3, ISO 800, 1/250s. 16K resolution captures individual sand particles (0.1mm) fused into glass spikes.'; |
|
|
document.getElementById('post-processing').value = 'Motion blur on a crawling cybernetic scarab (left forearm), chromatic aberration on weapon glow edges.'; |
|
|
document.getElementById('dof').value = 'Shallow depth of field (f/1.8 equivalent) with hexagonal bokeh highlights from distant city ruins.'; |
|
|
document.getElementById('textures').value = 'Armor reveals 7 corrosion layers—verdigris, blood rust (hex #6D071A), and crystalline fungus. Skin pores exude synthetic sweat (mercury-sheen droplets) from experimental combat stims. Weapon\'s organic components throb with vasculature-like glow (pulsing at 72bpm).'; |
|
|
document.getElementById('symbolism').value = 'Dog tags show conflicting engravings: "SPC J. Ramirez" and "Царь-солдат" (Tsar-Soldier). A child\'s doll (one eye missing) hangs from his belt, its face mutated into an alien visage. Reflection in a glass shard shows his younger self in pristine uniform—current version doesn\'t cast reflection.'; |
|
|
document.getElementById('color-grading').value = 'Base: Desaturated Kodak Ektachrome LUT with +30% teal in mids. Weapon bioglow isolated via HSL (hue 160°, saturation +80%). Vignette shaped like a sniper scope\'s sight picture.'; |
|
|
document.getElementById('special-effects').value = 'Bioluminescent spores released from weapon create floating light sources (drifting orbs, 20cm radius)'; |
|
|
document.getElementById('particles').value = 'Microscopic glass shards float in the air, catching the light. Plasma discharge from the weapon leaves ionized trails.'; |
|
|
document.getElementById('time-of-day').value = 'Triple moon alignment creates perpetual twilight—no true night or day in this temporal anomaly.'; |
|
|
document.getElementById('midjourney-tags').value = 'vivid_absurdism, biomechanical horror core'; |
|
|
document.getElementById('civitai-tags').value = 'hyper_detail_3, grunge_apocalypse'; |
|
|
document.getElementById('seaart-tags').value = 'quantum_decay, military_surrealism'; |
|
|
document.getElementById('sd-tags').value = 'ultra detailed, intricate, 8k, hyperrealistic, cinematic lighting'; |
|
|
document.getElementById('additional-notes').value = 'This prompt merges military grit with existential sci-fi—every detail questions whether the soldier conquers the environment or becomes it. The frozen acid rain suggests time itself is broken, while the bioluminescent reactions hint at a living ecosystem adapting to the apocalypse.'; |
|
|
} |
|
|
|
|
|
|
|
|
function resetForm() { |
|
|
|
|
|
document.querySelectorAll('select').forEach(select => { |
|
|
select.selectedIndex = 0; |
|
|
}); |
|
|
|
|
|
|
|
|
document.querySelectorAll('input[type="text"], textarea').forEach(input => { |
|
|
if (input.id !== 'generated-prompt') { |
|
|
input.value = ''; |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
document.getElementById('generated-prompt').value = ''; |
|
|
document.getElementById('char-count').textContent = '0'; |
|
|
} |
|
|
|
|
|
|
|
|
setDefaultValues(); |
|
|
|
|
|
|
|
|
function updateCharCount() { |
|
|
const promptText = document.getElementById('generated-prompt').value; |
|
|
document.getElementById('char-count').textContent = promptText.length; |
|
|
} |
|
|
|
|
|
|
|
|
document.getElementById('generate-btn').addEventListener('click', function() { |
|
|
const resolution = document.getElementById('resolution').value; |
|
|
const style = document.getElementById('style').value; |
|
|
const lighting = document.getElementById('lighting').value; |
|
|
const colorPalette = document.getElementById('color-palette').value; |
|
|
const subjectType = document.getElementById('subject-type').value; |
|
|
const age = document.getElementById('age').value; |
|
|
const gender = document.getElementById('gender').value; |
|
|
const physique = document.getElementById('physique').value; |
|
|
const scars = document.getElementById('scars').value; |
|
|
const armor = document.getElementById('armor').value; |
|
|
const weapons = document.getElementById('weapons').value; |
|
|
const specialFeatures = document.getElementById('special-features').value; |
|
|
const environmentType = document.getElementById('environment-type').value; |
|
|
const primarySetting = document.getElementById('primary-setting').value; |
|
|
const structures = document.getElementById('structures').value; |
|
|
const atmosphere = document.getElementById('atmosphere').value; |
|
|
const lightingDetails = document.getElementById('lighting-details').value; |
|
|
const weather = document.getElementById('weather').value; |
|
|
const cameraLens = document.getElementById('camera-lens').value; |
|
|
const shotType = document.getElementById('shot-type').value; |
|
|
const cameraSettings = document.getElementById('camera-settings').value; |
|
|
const postProcessing = document.getElementById('post-processing').value; |
|
|
const dof = document.getElementById('dof').value; |
|
|
const textures = document.getElementById('textures').value; |
|
|
const symbolism = document.getElementById('symbolism').value; |
|
|
const colorGrading = document.getElementById('color-grading').value; |
|
|
const specialEffects = document.getElementById('special-effects').value; |
|
|
const particles = document.getElementById('particles').value; |
|
|
const timeOfDay = document.getElementById('time-of-day').value; |
|
|
const midjourneyTags = document.getElementById('midjourney-tags').value; |
|
|
const civitaiTags = document.getElementById('civitai-tags').value; |
|
|
const seaartTags = document.getElementById('seaart-tags').value; |
|
|
const sdTags = document.getElementById('sd-tags').value; |
|
|
const additionalNotes = document.getElementById('additional-notes').value; |
|
|
|
|
|
let prompt = `${resolution} ${style} ${subjectType === 'human' ? 'portrait' : 'depiction'} of `; |
|
|
|
|
|
|
|
|
if (subjectType === 'human' || subjectType === 'cyborg' || subjectType === 'robot' || subjectType === 'android') { |
|
|
prompt += `a ${age} ${gender} ${physique ? 'with ' + physique : ''}`; |
|
|
if (scars) prompt += `. ${scars}`; |
|
|
if (specialFeatures) prompt += `. ${specialFeatures}`; |
|
|
prompt += `.\n\n`; |
|
|
} else { |
|
|
prompt += `a ${subjectType}.\n\n`; |
|
|
} |
|
|
|
|
|
|
|
|
if (armor) prompt += `Armor/Clothing: ${armor}\n\n`; |
|
|
if (weapons) prompt += `Weapon/Tools: ${weapons}\n\n`; |
|
|
|
|
|
|
|
|
prompt += `Environment:\n`; |
|
|
prompt += `Type: ${environmentType}\n`; |
|
|
if (primarySetting) prompt += `Primary Setting: ${primarySetting}\n`; |
|
|
if (structures) prompt += `Structures: ${structures}\n`; |
|
|
if (atmosphere) prompt += `Atmosphere: ${atmosphere}\n`; |
|
|
if (weather) prompt += `Weather: ${weather}\n\n`; |
|
|
|
|
|
|
|
|
prompt += `Lighting:\n`; |
|
|
prompt += `Type: ${lighting}\n`; |
|
|
if (lightingDetails) prompt += `Details: ${lightingDetails}\n`; |
|
|
if (timeOfDay) prompt += `Time of Day: ${timeOfDay}\n\n`; |
|
|
|
|
|
|
|
|
if (textures) prompt += `Textures & Materials:\n${textures}\n\n`; |
|
|
|
|
|
|
|
|
prompt += `Camera & Composition:\n`; |
|
|
prompt += `Lens: ${cameraLens}\n`; |
|
|
prompt += `Shot Type: ${shotType}\n`; |
|
|
if (cameraSettings) prompt += `Settings: ${cameraSettings}\n`; |
|
|
if (dof) prompt += `Depth of Field: ${dof}\n`; |
|
|
if (postProcessing) prompt += `Post-Processing: ${postProcessing}\n\n`; |
|
|
|
|
|
|
|
|
prompt += `Color:\n`; |
|
|
prompt += `Palette: ${colorPalette}\n`; |
|
|
if (colorGrading) prompt += `Grading: ${colorGrading}\n\n`; |
|
|
|
|
|
|
|
|
prompt += `Effects:\n`; |
|
|
if (specialEffects) prompt += `Special: ${specialEffects}\n`; |
|
|
if (particles) prompt += `Particles: ${particles}\n\n`; |
|
|
|
|
|
|
|
|
if (symbolism) prompt += `Symbolism:\n${symbolism}\n\n`; |
|
|
|
|
|
|
|
|
prompt += `Platform-Specific Tags:\n`; |
|
|
if (midjourneyTags) prompt += `Midjourney: ${midjourneyTags}\n`; |
|
|
if (civitaiTags) prompt += `CivitAI: ${civitaiTags}\n`; |
|
|
if (seaartTags) prompt += `SeaArt: ${seaartTags}\n`; |
|
|
if (sdTags) prompt += `Stable Diffusion: ${sdTags}\n\n`; |
|
|
|
|
|
|
|
|
if (additionalNotes) prompt += `Additional Notes:\n${additionalNotes}`; |
|
|
|
|
|
document.getElementById('generated-prompt').value = prompt; |
|
|
updateCharCount(); |
|
|
}); |
|
|
|
|
|
|
|
|
document.getElementById('copy-btn').addEventListener('click', function() { |
|
|
const promptText = document.getElementById('generated-prompt'); |
|
|
promptText.select(); |
|
|
document.execCommand('copy'); |
|
|
|
|
|
const copyBtn = document.getElementById('copy-btn'); |
|
|
const originalText = copyBtn.innerHTML; |
|
|
copyBtn.innerHTML = '<i class="fas fa-check mr-2"></i> Copied!'; |
|
|
|
|
|
setTimeout(() => { |
|
|
copyBtn.innerHTML = originalText; |
|
|
}, 2000); |
|
|
}); |
|
|
|
|
|
|
|
|
document.getElementById('clear-btn').addEventListener('click', function() { |
|
|
document.getElementById('generated-prompt').value = ''; |
|
|
document.getElementById('char-count').textContent = '0'; |
|
|
}); |
|
|
|
|
|
|
|
|
document.getElementById('save-btn').addEventListener('click', function() { |
|
|
const promptText = document.getElementById('generated-prompt').value; |
|
|
if (promptText.trim() === '') { |
|
|
alert('No prompt to save! Generate a prompt first.'); |
|
|
return; |
|
|
} |
|
|
|
|
|
const saveBtn = document.getElementById('save-btn'); |
|
|
const originalText = saveBtn.innerHTML; |
|
|
saveBtn.innerHTML = '<i class="fas fa-check mr-2"></i> Saved!'; |
|
|
|
|
|
setTimeout(() => { |
|
|
saveBtn.innerHTML = originalText; |
|
|
}, 2000); |
|
|
|
|
|
|
|
|
console.log('Prompt saved:', promptText); |
|
|
}); |
|
|
|
|
|
|
|
|
document.getElementById('format-btn').addEventListener('click', function() { |
|
|
const promptText = document.getElementById('generated-prompt').value; |
|
|
if (promptText.trim() === '') { |
|
|
alert('No prompt to format! Generate a prompt first.'); |
|
|
return; |
|
|
} |
|
|
|
|
|
const formatStyle = document.getElementById('prompt-style').value; |
|
|
let formattedPrompt = ''; |
|
|
|
|
|
switch(formatStyle) { |
|
|
case 'standard': |
|
|
formattedPrompt = promptText; |
|
|
break; |
|
|
case 'concise': |
|
|
formattedPrompt = promptText |
|
|
.replace(/\n+/g, ' ') |
|
|
.replace(/\s+/g, ' ') |
|
|
.trim(); |
|
|
break; |
|
|
case 'bullet': |
|
|
formattedPrompt = promptText |
|
|
.split('\n') |
|
|
.filter(line => line.trim() !== '') |
|
|
.map(line => `• ${line.trim()}`) |
|
|
.join('\n'); |
|
|
break; |
|
|
case 'comma': |
|
|
formattedPrompt = promptText |
|
|
.split('\n') |
|
|
.filter(line => line.trim() !== '') |
|
|
.map(line => line.trim()) |
|
|
.join(', '); |
|
|
break; |
|
|
} |
|
|
|
|
|
document.getElementById('generated-prompt').value = formattedPrompt; |
|
|
updateCharCount(); |
|
|
}); |
|
|
|
|
|
|
|
|
document.getElementById('reset-btn').addEventListener('click', function() { |
|
|
resetForm(); |
|
|
|
|
|
const resetBtn = document.getElementById('reset-btn'); |
|
|
const originalText = resetBtn.innerHTML; |
|
|
resetBtn.innerHTML = '<i class="fas fa-check mr-2"></i> Reset Complete!'; |
|
|
|
|
|
setTimeout(() => { |
|
|
resetBtn.innerHTML = originalText; |
|
|
}, 2000); |
|
|
}); |
|
|
|
|
|
|
|
|
document.getElementById('generated-prompt').addEventListener('input', updateCharCount); |
|
|
|
|
|
|
|
|
document.getElementById('generate-btn').click(); |
|
|
}); |
|
|
</script> |
|
|
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Geoffrey74960/generateur-prompt-5" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
