|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Image 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> |
|
|
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=Roboto:wght@400;700&display=swap'); |
|
|
|
|
|
body { |
|
|
font-family: 'Roboto', sans-serif; |
|
|
background-color: #f5f0e6; |
|
|
color: #3a2e26; |
|
|
} |
|
|
|
|
|
h1, h2, h3, .theme-btn, .btn { |
|
|
font-family: 'Playfair Display', serif; |
|
|
} |
|
|
|
|
|
.tag { |
|
|
transition: all 0.2s ease; |
|
|
} |
|
|
|
|
|
.tag:hover { |
|
|
transform: translateY(-2px); |
|
|
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); |
|
|
} |
|
|
|
|
|
.tag.selected { |
|
|
background-color: #3a2e26; |
|
|
color: #f5f0e6; |
|
|
} |
|
|
|
|
|
.prompt-history-item { |
|
|
border-left: 4px solid #8B5A2B; |
|
|
} |
|
|
|
|
|
.flavor-tags-container { |
|
|
min-height: 60px; |
|
|
border: 2px dashed #8B5A2B; |
|
|
border-radius: 0.5rem; |
|
|
} |
|
|
|
|
|
.nsfw-field { |
|
|
transition: all 0.3s ease; |
|
|
max-height: 0; |
|
|
overflow: hidden; |
|
|
} |
|
|
|
|
|
.nsfw-field.visible { |
|
|
max-height: 200px; |
|
|
} |
|
|
|
|
|
|
|
|
.select-with-input { |
|
|
position: relative; |
|
|
} |
|
|
|
|
|
.select-with-input input { |
|
|
width: 100%; |
|
|
padding: 0.75rem; |
|
|
border-radius: 0.5rem; |
|
|
border: 2px solid #8B5A2B; |
|
|
background-color: #f5f0e6; |
|
|
} |
|
|
|
|
|
.select-with-input select { |
|
|
position: absolute; |
|
|
top: 0; |
|
|
right: 0; |
|
|
width: 30px; |
|
|
height: 100%; |
|
|
opacity: 0; |
|
|
cursor: pointer; |
|
|
} |
|
|
|
|
|
.select-with-input::after { |
|
|
content: "▼"; |
|
|
position: absolute; |
|
|
top: 50%; |
|
|
right: 10px; |
|
|
transform: translateY(-50%); |
|
|
pointer-events: none; |
|
|
color: #8B5A2B; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="min-h-screen p-4 md:p-8"> |
|
|
<div class="max-w-6xl mx-auto"> |
|
|
<header class="mb-8 text-center"> |
|
|
<h1 class="text-4xl md:text-5xl font-bold mb-2 text-[#3a2e26]">Image Prompt Generator</h1> |
|
|
<p class="text-xl text-[#6b5643]">Craft the perfect AI image generation prompt</p> |
|
|
</header> |
|
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8"> |
|
|
<div class="lg:col-span-2"> |
|
|
<div class="bg-[#e8d9c5] rounded-xl shadow-lg p-6 mb-8"> |
|
|
<div class="flex justify-between items-center mb-4"> |
|
|
<h2 class="text-2xl font-bold text-[#3a2e26] border-b-2 border-[#8B5A2B] pb-2">Theme Presets</h2> |
|
|
<a href="https://old.reddit.com/r/TwistedAF/" target="_blank" class="btn bg-[#6b5643] text-white py-2 px-4 rounded-lg hover:bg-[#4a3c2f] transition flex items-center"> |
|
|
<i class="fas fa-user mr-2"></i> ABOUT ME |
|
|
</a> |
|
|
</div> |
|
|
<div class="grid grid-cols-2 md:grid-cols-5 gap-3"> |
|
|
<button class="theme-btn btn bg-[#8B5A2B] text-white py-2 px-4 rounded-lg hover:bg-[#6b4420] transition" data-theme="rock"> |
|
|
<i class="fas fa-guitar mr-2"></i> Rock Star |
|
|
</button> |
|
|
<button class="theme-btn btn bg-[#8B5A2B] text-white py-2 px-4 rounded-lg hover:bg-[#6b4420] transition" data-theme="vintage"> |
|
|
<i class="fas fa-clock-rotate-left mr-2"></i> Vintage |
|
|
</button> |
|
|
<button class="theme-btn btn bg-[#8B5A2B] text-white py-2 px-4 rounded-lg hover:bg-[#6b4420] transition" data-theme="fun"> |
|
|
<i class="fas fa-laugh-beam mr-2"></i> Fun |
|
|
</button> |
|
|
<button class="theme-btn btn bg-[#8B5A2B] text-white py-2 px-4 rounded-lg hover:bg-[#6b4420] transition" data-theme="erotic"> |
|
|
<i class="fas fa-heart mr-2"></i> Erotic |
|
|
</button> |
|
|
<button class="theme-btn btn bg-[#8B5A2B] text-white py-2 px-4 rounded-lg hover:bg-[#6b4420] transition" data-theme="surreal"> |
|
|
<i class="fas fa-cloud-moon mr-2"></i> Surreal |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-[#e8d9c5] rounded-xl shadow-lg p-6 mb-8"> |
|
|
<h2 class="text-2xl font-bold mb-4 text-[#3a2e26] border-b-2 border-[#8B5A2B] pb-2">Prompt Details</h2> |
|
|
|
|
|
<div class="mb-6"> |
|
|
<label class="block text-lg font-semibold mb-2">Main Subject</label> |
|
|
<div class="select-with-input"> |
|
|
<input type="text" id="mainSubjectInput" class="w-full p-3 rounded-lg border-2 border-[#8B5A2B] bg-[#f5f0e6]" placeholder="Type or select from dropdown..."> |
|
|
<select id="mainSubject" class="w-full"> |
|
|
<option value="">Select from suggestions...</option> |
|
|
<option value="McKayla Maroney">McKayla Maroney</option> |
|
|
<option value="Sydney Sweeney">Sydney Sweeney</option> |
|
|
<option value="Scarlett Johansson">Scarlett Johansson</option> |
|
|
<option value="Shakira">Shakira</option> |
|
|
<option value="Amanda Bynes">Amanda Bynes</option> |
|
|
<option value="Elisha Cuthbert">Elisha Cuthbert</option> |
|
|
<option value="Emma Watson">Emma Watson</option> |
|
|
<option value="Evan Rachel Wood">Evan Rachel Wood</option> |
|
|
</select> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mb-6"> |
|
|
<label class="block text-lg font-semibold mb-2">Style and Appearance</label> |
|
|
<input type="text" id="styleAppearance" class="w-full p-3 rounded-lg border-2 border-[#8B5A2B] bg-[#f5f0e6]" placeholder="e.g., cyberpunk, renaissance, anime"> |
|
|
</div> |
|
|
|
|
|
<div class="mb-6"> |
|
|
<label class="block text-lg font-semibold mb-2">Character Description</label> |
|
|
<textarea id="characterDesc" class="w-full p-3 rounded-lg border-2 border-[#8B5A2B] bg-[#f5f0e6] h-24" placeholder="Describe the character's features, clothing, expression..."></textarea> |
|
|
</div> |
|
|
|
|
|
<div class="mb-6"> |
|
|
<label class="block text-lg font-semibold mb-2">Scene Details</label> |
|
|
<textarea id="sceneDetails" class="w-full p-3 rounded-lg border-2 border-[#8B5A2B] bg-[#f5f0e6] h-24" placeholder="Location, lighting, atmosphere..."></textarea> |
|
|
</div> |
|
|
|
|
|
<div class="mb-6"> |
|
|
<label class="block text-lg font-semibold mb-2">Technical Settings</label> |
|
|
<div class="flavor-tags-container mb-3 p-3 bg-[#f5f0e6] rounded-lg"> |
|
|
<div class="flex flex-wrap gap-2" id="selectedTechTags"></div> |
|
|
</div> |
|
|
<div class="flex flex-wrap gap-2"> |
|
|
<span class="tag cursor-pointer bg-[#8B5A2B] text-white px-3 py-1 rounded-full" data-category="tech">more details</span> |
|
|
<span class="tag cursor-pointer bg-[#8B5A2B] text-white px-3 py-1 rounded-full" data-category="tech">intricate texture</span> |
|
|
<span class="tag cursor-pointer bg-[#8B5A2B] text-white px-3 py-1 rounded-full" data-category="tech">16k</span> |
|
|
<span class="tag cursor-pointer bg-[#8B5A2B] text-white px-3 py-1 rounded-full" data-category="tech">highly detailed hair</span> |
|
|
<span class="tag cursor-pointer bg-[#8B5A2B] text-white px-3 py-1 rounded-full" data-category="tech">(photorealistic)</span> |
|
|
<span class="tag cursor-pointer bg-[#8B5A2B] text-white px-3 py-1 rounded-full" data-category="tech">bright floodlights</span> |
|
|
<span class="tag cursor-pointer bg-[#8B5A2B] text-white px-3 py-1 rounded-full" data-category="tech">raining</span> |
|
|
<span class="tag cursor-pointer bg-[#8B5A2B] text-white px-3 py-1 rounded-full" data-category="tech">night time</span> |
|
|
<span class="tag cursor-pointer bg-[#8B5A2B] text-white px-3 py-1 rounded-full" data-category="tech">soft focus</span> |
|
|
<span class="tag cursor-pointer bg-[#8B5A2B] text-white px-3 py-1 rounded-full" data-category="tech">55mm lens</span> |
|
|
<span class="tag cursor-pointer bg-[#8B5A2B] text-white px-3 py-1 rounded-full" data-category="tech">f/2.8</span> |
|
|
<span class="tag cursor-pointer bg-[#8B5A2B] text-white px-3 py-1 rounded-full" data-category="tech">insanely detailed</span> |
|
|
<span class="tag cursor-pointer bg-[#8B5A2B] text-white px-3 py-1 rounded-full" data-category="tech">highest quality</span> |
|
|
<span class="tag cursor-pointer bg-[#8B5A2B] text-white px-3 py-1 rounded-full" data-category="tech">cinematic film still</span> |
|
|
<span class="tag cursor-pointer bg-[#8B5A2B] text-white px-3 py-1 rounded-full" data-category="tech">cinematic lighting</span> |
|
|
<span class="tag cursor-pointer bg-[#8B5A2B] text-white px-3 py-1 rounded-full" data-category="tech">vibrant</span> |
|
|
<span class="tag cursor-pointer bg-[#8B5A2B] text-white px-3 py-1 rounded-full" data-category="tech">--style expressive --c 50</span> |
|
|
<span class="tag cursor-pointer bg-[#8B5A2B] text-white px-3 py-1 rounded-full" data-category="tech">--ar 8:11 --upbeta --s 750</span> |
|
|
<span class="tag cursor-pointer bg-[#8B5A2B] text-white px-3 py-1 rounded-full" data-category="tech">--niji 5</span> |
|
|
<span class="tag cursor-pointer bg-[#8B5A2B] text-white px-3 py-1 rounded-full" data-category="tech">dslr</span> |
|
|
<span class="tag cursor-pointer bg-[#8B5A2B] text-white px-3 py-1 rounded-full" data-category="tech">raw amateur candid photography</span> |
|
|
<span class="tag cursor-pointer bg-[#8B5A2B] text-white px-3 py-1 rounded-full" data-category="tech">evocative pose</span> |
|
|
<span class="tag cursor-pointer bg#[#8B5A2B] text-white px-3 py-1 rounded-full" data-category="tech">4k</span> |
|
|
<span class="tag cursor-pointer bg-[#8B5A2B] text-white px-3 py-1 rounded-full" data-category="tech">sharp focus</span> |
|
|
<span class="tag cursor-pointer bg-[#8B5A2B] text-white px-3 py-1 rounded-full" data-category="tech">masterpiece</span> |
|
|
<span class="tag cursor-pointer bg-[#8B5A2B] text-white px-3 py-1 rounded-full" data-category="tech">award winning photo</span> |
|
|
<span class="tag cursor-pointer bg-[#8B5A2B] text-white px-3 py-1 rounded-full" data-category="tech">cinestill 800</span> |
|
|
<span class="tag cursor-pointer bg-[#8B5A2B] text-white px-3 py-1 rounded-full" data-category="tech">(hyperrealism:1.2)</span> |
|
|
<span class="tag cursor-pointer bg-[#8B5A2B] text-white px-3 py-1 rounded-full" data-category="tech">(8K UHD:1.2)</span> |
|
|
<span class="tag cursor-pointer bg-[#8B5A2B] text-white px-3 py-1 rounded-full" data-category="tech">(photorealistic:1.2)</span> |
|
|
<span class="tag cursor-pointer bg-[#8B5A2B] text-white px-3 py-1 rounded-full" data-category="tech">shot with hasselblad H6D</span> |
|
|
<span class="tag cursor-pointer bg-[#8B5A2B] text-white px-3 py-1 rounded-full" data-category="tech">20 megapixel</span> |
|
|
<span class="tag cursor-pointer bg-[#8B5A2B] text-white px-3 py-1 rounded-full" data-category="tech">canon eos r3</span> |
|
|
<span class="tag cursor-pointer bg-[#8B5A2B] text-white px-3 py-1 rounded-full" data-category="tech">nikon d850</span> |
|
|
<span class="tag cursor-pointer bg-[#8B5A2B] text-white px-3 py-1 rounded-full" data-category="tech">film stock photograph</span> |
|
|
<span class="tag cursor-pointer bg-[#8B5A2B] text-white px-3 py-1 rounded-full" data-category="tech">kodak portra 400</span> |
|
|
<span class="tag cursor-pointer bg-[#8B5A2B] text-white px-3 py-1 rounded-full" data-category="tech">camera f1.6 lens</span> |
|
|
<span class="tag cursor-pointer bg-[#8B5A2B] text-white px-3 py-1 rounded-full" data-category="tech">(dramatic lighting)</span> |
|
|
<span class="tag cursor-pointer bg-[#8B5A2B] text-white px-3 py-1 rounded-full" data-category="tech">lifelike texture</span> |
|
|
<span class="tag cursor-pointer bg-[#8B5A2B] text-white px-3 py-1 rounded-full" data-category="tech">highly detailed skin</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mb-6"> |
|
|
<label class="block text-lg font-semibold mb-2">Artist / Photographer</label> |
|
|
<div class="select-with-input"> |
|
|
<input type="text" id="artistInput" class="w-full p-3 rounded-lg border-2 border-[#8B5A2B] bg-[#f5f0e6]" placeholder="Type or select from dropdown..."> |
|
|
<select id="artist" class="w-full"> |
|
|
<option value="">Select from suggestions...</option> |
|
|
<option value="Dariusz Zawadzki">Dariusz Zawadzki</option> |
|
|
<option value="Nikolina Petolas">Nikolina Petolas</option> |
|
|
<option value="Gediminas Pranckevicius">Gediminas Pranckevicius</option> |
|
|
<option value="Morpheus Gallery">Morpheus Gallery</option> |
|
|
<option value="Gyuri Lohmuller">Gyuri Lohmuller</option> |
|
|
<option value="Jacek Yerka">Jacek Yerka</option> |
|
|
<option value="Zdzislaw Beksinski">Zdzislaw Beksinski</option> |
|
|
<option value="David Hamilton">David Hamilton</option> |
|
|
<option value="Norman Rockwell">Norman Rockwell</option> |
|
|
<option value="Gustave Dore">Gustave Dore</option> |
|
|
<option value="Hieronymus Bosch">Hieronymus Bosch</option> |
|
|
<option value="Pieter Bruegel the elder">Pieter Bruegel the elder</option> |
|
|
</select> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mb-6"> |
|
|
<div class="flex items-center mb-2"> |
|
|
<input type="checkbox" id="nsfwToggle" class="mr-2 h-5 w-5"> |
|
|
<label for="nsfwToggle" class="text-lg font-semibold">NSFW Content</label> |
|
|
</div> |
|
|
<div id="nsfwField" class="nsfw-field"> |
|
|
<textarea id="nsfwDetails" class="w-full p-3 rounded-lg border-2 border-[#8B5A2B] bg-[#f5f0e6] h-24" placeholder="Describe NSFW details..."></textarea> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex flex-wrap gap-4 justify-between"> |
|
|
<button id="surpriseBtn" class="btn bg-[#8B5A2B] text-white py-3 px-6 rounded-lg hover:bg-[#6b4420] transition flex items-center"> |
|
|
<i class="fas fa-magic mr-2"></i> Surprise Me |
|
|
</button> |
|
|
<button id="generateBtn" class="btn bg-[#3a2e26] text-white py-3 px-6 rounded-lg hover:bg-[#1a1612] transition flex items-center"> |
|
|
<i class="fas fa-bolt mr-2"></i> Generate Prompt |
|
|
</button> |
|
|
<button id="copyBtn" class="btn bg-[#6b5643] text-white py-3 px-6 rounded-lg hover:bg-[#4a3c2f] transition flex items-center"> |
|
|
<i class="fas fa-copy mr-2"></i> Copy Prompt |
|
|
</button> |
|
|
<a href="https://old.reddit.com/r/TwistedAF/" target="_blank" class="btn bg-[#6b5643] text-white py-3 px-6 rounded-lg hover:bg-[#4a3c2f] transition flex items-center"> |
|
|
<i class="fas fa-user mr-2"></i> ABOUT ME |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<div class="bg-[#e8d9c5] rounded-xl shadow-lg p-6 mb-8 sticky top-4"> |
|
|
<h2 class="text-2xl font-bold mb-4 text-[#3a2e26] border-b-2 border-[#8B5A2B] pb-2">Generated Prompt</h2> |
|
|
<div id="generatedPrompt" class="bg-[#f5f0e6] p-4 rounded-lg border-2 border-[#8B5A2B] min-h-40 mb-6 whitespace-pre-wrap"></div> |
|
|
|
|
|
<h2 class="text-2xl font-bold mb-4 text-[#3a2e26] border-b-2 border-[#8B5A2B] pb-2">Prompt History</h2> |
|
|
<div id="promptHistory" class="space-y-3 max-h-96 overflow-y-auto"> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
document.addEventListener('DOMContentLoaded', function() { |
|
|
|
|
|
const mainSubjectInput = document.getElementById('mainSubjectInput'); |
|
|
const mainSubject = document.getElementById('mainSubject'); |
|
|
const styleAppearance = document.getElementById('styleAppearance'); |
|
|
const characterDesc = document.getElementById('characterDesc'); |
|
|
const sceneDetails = document.getElementById('sceneDetails'); |
|
|
const artistInput = document.getElementById('artistInput'); |
|
|
const artist = document.getElementById('artist'); |
|
|
const nsfwToggle = document.getElementById('nsfwToggle'); |
|
|
const nsfwField = document.getElementById('nsfwField'); |
|
|
const nsfwDetails = document.getElementById('nsfwDetails'); |
|
|
const surpriseBtn = document.getElementById('surpriseBtn'); |
|
|
const generateBtn = document.getElementById('generateBtn'); |
|
|
const copyBtn = document.getElementById('copyBtn'); |
|
|
const generatedPrompt = document.getElementById('generatedPrompt'); |
|
|
const promptHistory = document.getElementById('promptHistory'); |
|
|
const selectedTechTags = document.getElementById('selectedTechTags'); |
|
|
const techTags = document.querySelectorAll('.tag[data-category="tech"]'); |
|
|
|
|
|
|
|
|
const themeBtns = document.querySelectorAll('.theme-btn'); |
|
|
|
|
|
|
|
|
nsfwToggle.addEventListener('change', function() { |
|
|
if (this.checked) { |
|
|
nsfwField.classList.add('visible'); |
|
|
} else { |
|
|
nsfwField.classList.remove('visible'); |
|
|
nsfwDetails.value = ''; |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
techTags.forEach(tag => { |
|
|
tag.addEventListener('click', function() { |
|
|
this.classList.toggle('selected'); |
|
|
updateSelectedTechTags(); |
|
|
}); |
|
|
}); |
|
|
|
|
|
function updateSelectedTechTags() { |
|
|
selectedTechTags.innerHTML = ''; |
|
|
document.querySelectorAll('.tag[data-category="tech"].selected').forEach(tag => { |
|
|
const clone = tag.cloneNode(true); |
|
|
clone.classList.add('mr-1', 'mb-1'); |
|
|
clone.addEventListener('click', function() { |
|
|
document.querySelectorAll(`.tag[data-category="tech"]`).forEach(t => { |
|
|
if (t.textContent === this.textContent) { |
|
|
t.classList.remove('selected'); |
|
|
} |
|
|
}); |
|
|
updateSelectedTechTags(); |
|
|
}); |
|
|
selectedTechTags.appendChild(clone); |
|
|
}); |
|
|
} |
|
|
|
|
|
|
|
|
themeBtns.forEach(btn => { |
|
|
btn.addEventListener('click', function() { |
|
|
const theme = this.dataset.theme; |
|
|
applyTheme(theme); |
|
|
}); |
|
|
}); |
|
|
|
|
|
function applyTheme(theme) { |
|
|
|
|
|
styleAppearance.value = ''; |
|
|
characterDesc.value = ''; |
|
|
sceneDetails.value = ''; |
|
|
|
|
|
|
|
|
techTags.forEach(tag => tag.classList.remove('selected')); |
|
|
updateSelectedTechTags(); |
|
|
|
|
|
switch(theme) { |
|
|
case 'rock': |
|
|
styleAppearance.value = 'rock star, edgy, rebellious'; |
|
|
characterDesc.value = 'leather jacket, ripped jeans, smokey eye makeup, wild hair'; |
|
|
sceneDetails.value = 'concert stage with dramatic lighting, crowd in background'; |
|
|
selectRandomTechTags(8); |
|
|
break; |
|
|
case 'vintage': |
|
|
styleAppearance.value = 'vintage, 1950s pin-up, retro'; |
|
|
characterDesc.value = 'victory rolls hairstyle, red lips, polka dot dress'; |
|
|
sceneDetails.value = 'old Hollywood setting, warm lighting, film grain effect'; |
|
|
selectRandomTechTags(6); |
|
|
break; |
|
|
case 'fun': |
|
|
styleAppearance.value = 'colorful, playful, whimsical'; |
|
|
characterDesc.value = 'bright colors, exaggerated features, happy expression'; |
|
|
sceneDetails.value = 'fantasy landscape, candy colors, surreal elements'; |
|
|
selectRandomTechTags(5); |
|
|
break; |
|
|
case 'erotic': |
|
|
styleAppearance.value = 'sensual, alluring, tasteful nudity'; |
|
|
characterDesc.value = 'sultry gaze, elegant pose, soft lighting on skin'; |
|
|
sceneDetails.value = 'boudoir setting, luxurious fabrics, intimate atmosphere'; |
|
|
nsfwToggle.checked = true; |
|
|
nsfwField.classList.add('visible'); |
|
|
nsfwDetails.value = 'suggestive pose, partial nudity'; |
|
|
selectRandomTechTags(7); |
|
|
break; |
|
|
case 'surreal': |
|
|
styleAppearance.value = 'surreal, dreamlike, bizarre'; |
|
|
characterDesc.value = 'melting features, impossible proportions, floating objects'; |
|
|
sceneDetails.value = 'otherworldly landscape, impossible architecture, vivid colors'; |
|
|
selectRandomTechTags(10); |
|
|
break; |
|
|
} |
|
|
} |
|
|
|
|
|
function selectRandomTechTags(count) { |
|
|
|
|
|
techTags.forEach(tag => tag.classList.remove('selected')); |
|
|
|
|
|
|
|
|
const shuffled = Array.from(techTags).sort(() => 0.5 - Math.random()); |
|
|
for (let i = 0; i < Math.min(count, shuffled.length); i++) { |
|
|
shuffled[i].classList.add('selected'); |
|
|
} |
|
|
|
|
|
updateSelectedTechTags(); |
|
|
} |
|
|
|
|
|
|
|
|
surpriseBtn.addEventListener('click', function() { |
|
|
|
|
|
const subjects = [ |
|
|
'McKayla Maroney', 'Sydney Sweeney', 'Scarlett Johansson', |
|
|
'Shakira', 'Amanda Bynes', 'Elisha Cuthbert', |
|
|
'Emma Watson', 'Evan Rachel Wood' |
|
|
]; |
|
|
mainSubjectInput.value = subjects[Math.floor(Math.random() * subjects.length)]; |
|
|
|
|
|
|
|
|
const styles = [ |
|
|
'cyberpunk', 'steampunk', 'noir', 'art deco', 'baroque', |
|
|
'impressionist', 'anime', 'hyperrealistic', 'watercolor', |
|
|
'oil painting', 'digital art', 'comic book', 'surreal', |
|
|
'fantasy', 'sci-fi', 'post-apocalyptic' |
|
|
]; |
|
|
styleAppearance.value = styles[Math.floor(Math.random() * styles.length)]; |
|
|
|
|
|
|
|
|
const descriptors = [ |
|
|
'wearing elegant evening gown', 'in futuristic armor', |
|
|
'with intricate tribal tattoos', 'dressed as a mythical creature', |
|
|
'with glowing eyes', 'surrounded by floating objects', |
|
|
'with elaborate fantasy hairstyle', 'in historical costume' |
|
|
]; |
|
|
characterDesc.value = descriptors[Math.floor(Math.random() * descriptors.length)]; |
|
|
|
|
|
|
|
|
const scenes = [ |
|
|
'dramatic sunset lighting', 'foggy mysterious atmosphere', |
|
|
'neon-lit cityscape', 'ancient temple ruins', |
|
|
'floating islands in the sky', 'underwater coral reef', |
|
|
'haunted castle interior', 'alien landscape' |
|
|
]; |
|
|
sceneDetails.value = scenes[Math.floor(Math.random() * scenes.length)]; |
|
|
|
|
|
|
|
|
const artists = [ |
|
|
'Dariusz Zawadzki', 'Nikolina Petolas', 'Gediminas Pranckevicius', |
|
|
'Morpheus Gallery', 'Gyuri Lohmuller', 'Jacek Yerka', |
|
|
'Zdzislaw Beksinski', 'David Hamilton', 'Norman Rockwell', |
|
|
'Gustave Dore', 'Hieronymus Bosch', 'Pieter Bruegel the elder' |
|
|
]; |
|
|
artistInput.value = artists[Math.floor(Math.random() * artists.length)]; |
|
|
|
|
|
|
|
|
if (Math.random() < 0.3) { |
|
|
nsfwToggle.checked = true; |
|
|
nsfwField.classList.add('visible'); |
|
|
const nsfwDescriptors = [ |
|
|
'suggestive pose', 'partial nudity', 'provocative expression', |
|
|
'lingerie', 'sensual lighting', 'intimate moment' |
|
|
]; |
|
|
nsfwDetails.value = nsfwDescriptors[Math.floor(Math.random() * nsfwDescriptors.length)]; |
|
|
} else { |
|
|
nsfwToggle.checked = false; |
|
|
nsfwField.classList.remove('visible'); |
|
|
nsfwDetails.value = ''; |
|
|
} |
|
|
|
|
|
|
|
|
selectRandomTechTags(5 + Math.floor(Math.random() * 6)); |
|
|
}); |
|
|
|
|
|
|
|
|
generateBtn.addEventListener('click', function() { |
|
|
const mainSubjectValue = mainSubjectInput.value || mainSubject.value; |
|
|
if (!mainSubjectValue) { |
|
|
alert('Please enter or select a main subject'); |
|
|
return; |
|
|
} |
|
|
|
|
|
let prompt = ''; |
|
|
|
|
|
|
|
|
if (styleAppearance.value) { |
|
|
prompt += `${styleAppearance.value} `; |
|
|
} |
|
|
|
|
|
|
|
|
if (nsfwToggle.checked && nsfwDetails.value) { |
|
|
prompt += `NSFW image of `; |
|
|
} else { |
|
|
prompt += `image of `; |
|
|
} |
|
|
|
|
|
|
|
|
prompt += `(${mainSubjectValue})`; |
|
|
|
|
|
|
|
|
if (characterDesc.value) { |
|
|
prompt += `, ${characterDesc.value}`; |
|
|
} |
|
|
|
|
|
|
|
|
if (sceneDetails.value) { |
|
|
prompt += `, ${sceneDetails.value}`; |
|
|
} |
|
|
|
|
|
|
|
|
const artistValue = artistInput.value || artist.value; |
|
|
if (artistValue) { |
|
|
prompt += `, in the style of ${artistValue}`; |
|
|
} |
|
|
|
|
|
|
|
|
if (nsfwToggle.checked && nsfwDetails.value) { |
|
|
prompt += `, ${nsfwDetails.value}`; |
|
|
} |
|
|
|
|
|
|
|
|
const selectedTags = Array.from(document.querySelectorAll('.tag[data-category="tech"].selected')).map(tag => tag.textContent); |
|
|
if (selectedTags.length > 0) { |
|
|
prompt += `, ${selectedTags.join(', ')}`; |
|
|
} |
|
|
|
|
|
|
|
|
generatedPrompt.textContent = prompt; |
|
|
|
|
|
|
|
|
addToHistory(prompt); |
|
|
}); |
|
|
|
|
|
|
|
|
copyBtn.addEventListener('click', function() { |
|
|
if (!generatedPrompt.textContent) { |
|
|
alert('No prompt to copy'); |
|
|
return; |
|
|
} |
|
|
|
|
|
navigator.clipboard.writeText(generatedPrompt.textContent) |
|
|
.then(() => { |
|
|
const originalText = copyBtn.innerHTML; |
|
|
copyBtn.innerHTML = '<i class="fas fa-check mr-2"></i> Copied!'; |
|
|
setTimeout(() => { |
|
|
copyBtn.innerHTML = originalText; |
|
|
}, 2000); |
|
|
}) |
|
|
.catch(err => { |
|
|
console.error('Failed to copy: ', err); |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
function addToHistory(prompt) { |
|
|
const historyItem = document.createElement('div'); |
|
|
historyItem.className = 'prompt-history-item bg-[#f5f0e6] p-3 rounded-lg cursor-pointer hover:bg-[#e8d9c5]'; |
|
|
historyItem.innerHTML = `<div class="text-sm text-gray-600 mb-1">${new Date().toLocaleString()}</div> |
|
|
<div class="line-clamp-2">${prompt}</div>`; |
|
|
|
|
|
historyItem.addEventListener('click', function() { |
|
|
generatedPrompt.textContent = prompt; |
|
|
}); |
|
|
|
|
|
|
|
|
promptHistory.insertBefore(historyItem, promptHistory.firstChild); |
|
|
|
|
|
|
|
|
if (promptHistory.children.length > 5) { |
|
|
promptHistory.removeChild(promptHistory.lastChild); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
mainSubject.addEventListener('change', function() { |
|
|
if (this.value) { |
|
|
mainSubjectInput.value = this.value; |
|
|
} |
|
|
}); |
|
|
|
|
|
artist.addEventListener('change', function() { |
|
|
if (this.value) { |
|
|
artistInput.value = this.value; |
|
|
} |
|
|
}); |
|
|
}); |
|
|
</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=Jimmy401/custom-prompt-generator" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
