|
|
<!DOCTYPE html> |
|
|
<html lang="es"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>BATUTO - Generador de Prompts</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&display=swap" rel="stylesheet"> |
|
|
<style> |
|
|
@keyframes spin { |
|
|
0% { transform: rotate(0deg); } |
|
|
100% { transform: rotate(360deg); } |
|
|
} |
|
|
.gradient-text { |
|
|
background: linear-gradient(45deg, #a0a4ff, #c3a6ff); |
|
|
-webkit-background-clip: text; |
|
|
-webkit-text-fill-color: transparent; |
|
|
background-clip: text; |
|
|
} |
|
|
.btn-hover-effect::before { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
top: 0; |
|
|
left: -100%; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); |
|
|
transition: left 0.5s; |
|
|
} |
|
|
.btn-hover-effect:hover::before { |
|
|
left: 100%; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="font-['Montserrat'] bg-gradient-to-br from-[#1e1e2f] to-[#2a1b3d] min-h-screen p-5 text-gray-200"> |
|
|
<div class="max-w-6xl mx-auto bg-[rgba(30,30,46,0.95)] rounded-2xl p-6 md:p-8 shadow-2xl backdrop-blur-sm border border-[rgba(160,164,255,0.2)]"> |
|
|
|
|
|
<div class="text-center mb-10"> |
|
|
<h1 class="text-4xl md:text-5xl font-bold mb-3 gradient-text">馃帹 BATUTO Generador</h1> |
|
|
<p class="text-gray-400 text-lg md:text-xl max-w-2xl mx-auto"> |
|
|
Genera prompts hiperrealistas para personajes ic贸nicos o celebridades personalizadas. Ahora con generaci贸n de im谩genes autom谩tica! |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8"> |
|
|
|
|
|
<div class="bg-[#2a2a3d] rounded-xl p-6 shadow-lg border border-[rgba(160,164,255,0.2)] transition-all hover:-translate-y-1 hover:shadow-xl"> |
|
|
<h2 class="text-2xl font-bold text-center mb-5 pb-3 border-b border-[rgba(160,164,255,0.2)] text-[#a0a4ff]"> |
|
|
馃Ω BATUTO-VERSE |
|
|
</h2> |
|
|
<p class="text-gray-400 text-center mb-6"> |
|
|
Personajes ic贸nicos hiperrealistas |
|
|
</p> |
|
|
<button |
|
|
onclick="generateVersePrompts()" |
|
|
class="w-full py-4 px-6 rounded-xl font-bold text-lg uppercase tracking-wider relative overflow-hidden bg-gradient-to-r from-[#a0a4ff] to-[#c3a6ff] text-white btn-hover-effect transition-all hover:shadow-lg" |
|
|
> |
|
|
Generar 5 Prompts BATUTO-VERSE |
|
|
</button> |
|
|
<div id="verseLoading" class="hidden text-center py-5 text-[#a0a4ff] italic"> |
|
|
<div class="w-8 h-8 border-4 border-[#3a3a4f] border-t-[#a0a4ff] rounded-full animate-spin mx-auto mb-3"></div> |
|
|
Generando prompts e im谩genes... |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-[#2a2a3d] rounded-xl p-6 shadow-lg border border-[rgba(160,164,255,0.2)] transition-all hover:-translate-y-1 hover:shadow-xl"> |
|
|
<h2 class="text-2xl font-bold text-center mb-5 pb-3 border-b border-[rgba(160,164,255,0.2)] text-[#c3a6ff]"> |
|
|
馃懇 BATUTO-GIRL |
|
|
</h2> |
|
|
<p class="text-gray-400 text-center mb-6"> |
|
|
Celebridad personalizada |
|
|
</p> |
|
|
<div class="mb-6"> |
|
|
<label for="celebrityName" class="block font-semibold mb-2">Nombre de la Celebridad:</label> |
|
|
<input |
|
|
type="text" |
|
|
id="celebrityName" |
|
|
placeholder="Ej: Scarlett Johansson, Emma Stone..." |
|
|
class="w-full px-4 py-3 rounded-lg border-2 border-[#3a3a4f] bg-[#1e1e2f] focus:border-[#c3a6ff] focus:ring-2 focus:ring-[#c3a6ff] focus:ring-opacity-20 transition-all" |
|
|
> |
|
|
</div> |
|
|
<button |
|
|
onclick="generateGirlPrompts()" |
|
|
class="w-full py-4 px-6 rounded-xl font-bold text-lg uppercase tracking-wider relative overflow-hidden bg-gradient-to-r from-[#c3a6ff] to-[#a0a4ff] text-white btn-hover-effect transition-all hover:shadow-lg" |
|
|
> |
|
|
Generar 5 Prompts BATUTO-GIRL |
|
|
</button> |
|
|
<div id="girlLoading" class="hidden text-center py-5 text-[#c3a6ff] italic"> |
|
|
<div class="w-8 h-8 border-4 border-[#3a3a4f] border-t-[#c3a6ff] rounded-full animate-spin mx-auto mb-3"></div> |
|
|
Generando prompts e im谩genes... |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-[#2a2a3d] rounded-xl p-6 shadow-lg border border-[rgba(160,164,255,0.2)]"> |
|
|
<h3 class="text-xl md:text-2xl font-bold text-center mb-6 pb-3 border-b border-[rgba(160,164,255,0.2)]"> |
|
|
馃摑 Prompts Generados |
|
|
</h3> |
|
|
<div id="outputBox" class="space-y-5"></div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="text-center mt-10 pt-8 border-t border-[rgba(160,164,255,0.2)] text-gray-400"> |
|
|
<p class="font-bold">馃帹 <span class="gradient-text">BATUTO-ART</span> - Generador de Prompts Profesional</p> |
|
|
<p class="mt-2 text-sm"> |
|
|
Versi贸n Web Interactive | Desarrollado con 鉂わ笍 | API Key integrada para generaci贸n autom谩tica |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
|
|
|
const API_KEY = 'X6JGJz2JBnf9dW1NyvdiVYlNVvgJzMSi'; |
|
|
|
|
|
|
|
|
const batutoVersePrompts = [ |
|
|
"Hyperrealistic full-body portrait of 2Pac, African-American man with detailed tattoos, red bandana with creases, gold chains with reflective sheen, loose hip-hop clothing, energetic smile. 8K ultra HD, 32k epidermal detail maps, high-fashion editorial photography style with cinematic volumetric Rembrandt lighting emphasizing tattoo texture. Realistic human anatomy, PBR fabric and metal materials. Phase One IQ4 sharpness, 9:16 aspect ratio, full-frame. Fine detail: subsurface scattering skin, photogrammetry-based chains, visible fabric wear. Material physics: clothing sway during performance. Environment: concert stage with vibrant crowd bokeh. Technical cinematography: Hasselblad H6D-400c simulation, Unreal Engine 5.3 Lumen ray tracing, Fibonacci spiral composition. Dynamic physics: microphone motion blur (4%). Realism: micro-expression of charisma, HDR-balanced stage lighting. --v 6 --q 2 --ar 9:16 --style raw --s 1000 --no cartoon, anime, lowres, stylized.", |
|
|
"Hyperrealistic full-body portrait of Che Guevara, slim man with weathered beard, black beret with red star, olive-green uniform with faded patches, firm gaze. 8K ultra HD, 32k epidermal detail maps, high-fashion editorial photography style with cinematic volumetric Rembrandt lighting highlighting uniform texture. Realistic human anatomy, PBR fabric materials. Phase One IQ4 sharpness, 9:16 aspect ratio, full-frame. Fine detail: subsurface scattering skin, photogrammetry-based beret, visible beard strands. Material physics: uniform creases, beret tilt. Environment: jungle battlefield with smoke. Technical cinematography: Hasselblad H6D-400c simulation, Unreal Engine 5.3 Lumen ray tracing, golden ratio composition. Dynamic physics: arm motion blur (3%). Realism: micro-expression of resolve, HDR-balanced smoke glow. --v 6 --q 2 --ar 9:16 --style raw --s 1000 --no cartoon, anime, illustration, lowres.", |
|
|
"Hyperrealistic full-body portrait of Stitch, small blue creature with large floppy ears, six muscular legs, pointed teeth, mischievous grin. 8K ultra HD, 32k epidermal detail maps, high-fashion editorial photography style with cinematic volumetric Rembrandt lighting emphasizing fur texture. Anatomically corrected proportions, PBR fur materials. Phase One IQ4 sharpness, 9:16 aspect ratio, full-frame. Fine detail: subsurface scattering fur, photogrammetry-based ears, visible tooth micro-cracks. Material physics: fur ruffle in breeze, ear twitch. Environment: Hawaiian beach with crashing waves. Technical cinematography: Hasselblad H6D-400c simulation, Unreal Engine 5.3 Lumen ray tracing, Fibonacci spiral composition. Dynamic physics: grin motion blur (3%). Realism: micro-expression of playfulness, HDR-balanced ocean glow. --v 6 --q 2 --ar 9:16 --style raw --s 1000 --no cartoon, anime, stylized, blur.", |
|
|
"Hyperrealistic full-body portrait of Agent K from Men in Black, mature man with weathered skin, black suit with crisp tailoring, dark sunglasses, serious expression. 8K ultra HD, 32k epidermal detail maps, high-fashion editorial photography style with cinematic volumetric Rembrandt lighting emphasizing suit sheen. Realistic human anatomy, PBR fabric materials. Phase One IQ4 sharpness, 9:16 aspect ratio, full-frame. Fine detail: subsurface scattering skin, photogrammetry-based suit, visible neuralyzer glow. Material physics: suit creases, sunglasses reflections. Environment: urban alley with glowing UFO. Technical cinematography: Hasselblad H6D-400c simulation, Unreal Engine 5.3 Lumen ray tracing, golden ratio composition. Dynamic physics: neuralyzer flash blur (3%). Realism: micro-expression of stoicism, HDR-balanced UFO glow. --v 6 --q 2 --ar 9:16 --style raw --s 1000 --no cartoon, anime, lowres, stylized.", |
|
|
"Hyperrealistic full-body portrait of Iron Man, man in sleek red and gold armor, glowing arc reactor in chest, helmet with illuminated eyes, mid-flight pose. 8K ultra HD, 32k epidermal detail maps, high-fashion editorial photography style with cinematic volumetric Rembrandt lighting emphasizing armor reflections. Realistic proportions, PBR metallic materials. Phase One IQ4 sharpness, 9:16 aspect ratio, full-frame. Fine detail: photogrammetry-based armor, visible micro-scratches, arc reactor glow. Material physics: armor rigidity, repulsor energy trails. Environment: night sky with city lights below. Technical cinematography: Hasselblad H6D-400c simulation, Unreal Engine 5.3 Lumen ray tracing, Fibonacci spiral composition. Dynamic physics: flight motion blur (5%). Realism: micro-expression of focus, HDR-balanced repulsor glow. --v 6 --q 2 --ar 9:16 --style raw --s 1000 --no cartoon, anime, illustration, lowres." |
|
|
]; |
|
|
|
|
|
|
|
|
function generateVersePrompts() { |
|
|
const loadingElement = document.getElementById('verseLoading'); |
|
|
const outputBox = document.getElementById('outputBox'); |
|
|
|
|
|
|
|
|
loadingElement.classList.remove('hidden'); |
|
|
outputBox.innerHTML = ''; |
|
|
|
|
|
|
|
|
setTimeout(() => { |
|
|
loadingElement.classList.add('hidden'); |
|
|
|
|
|
|
|
|
const shuffled = [...batutoVersePrompts].sort(() => 0.5 - Math.random()); |
|
|
const selectedPrompts = shuffled.slice(0, 5); |
|
|
|
|
|
|
|
|
selectedPrompts.forEach((prompt, index) => { |
|
|
const promptBlock = document.createElement('div'); |
|
|
promptBlock.className = 'bg-[#1e1e2f] border-2 border-[#3a3a4f] rounded-xl p-4'; |
|
|
|
|
|
promptBlock.innerHTML = ` |
|
|
<div class="font-mono text-sm leading-relaxed mb-3">${prompt}</div> |
|
|
<div class="flex justify-between items-center"> |
|
|
<span class="text-xs text-gray-400">Prompt #${index + 1}</span> |
|
|
<button onclick="copyToClipboard(this)" class="px-4 py-2 bg-green-600 hover:bg-green-700 text-white text-sm rounded-lg transition-colors"> |
|
|
Copiar |
|
|
</button> |
|
|
</div> |
|
|
`; |
|
|
|
|
|
outputBox.appendChild(promptBlock); |
|
|
}); |
|
|
}, 2000); |
|
|
} |
|
|
|
|
|
|
|
|
function generateGirlPrompts() { |
|
|
const celebrityName = document.getElementById('celebrityName').value.trim(); |
|
|
const loadingElement = document.getElementById('girlLoading'); |
|
|
const outputBox = document.getElementById('outputBox'); |
|
|
|
|
|
if (!celebrityName) { |
|
|
alert('Por favor ingresa el nombre de una celebridad'); |
|
|
return; |
|
|
} |
|
|
|
|
|
|
|
|
loadingElement.classList.remove('hidden'); |
|
|
outputBox.innerHTML = ''; |
|
|
|
|
|
|
|
|
setTimeout(() => { |
|
|
loadingElement.classList.add('hidden'); |
|
|
|
|
|
|
|
|
const generatedPrompts = []; |
|
|
const styles = [ |
|
|
"high-fashion editorial photography", |
|
|
"cinematic portrait lighting", |
|
|
"studio photography with soft lighting", |
|
|
"dramatic chiaroscuro lighting", |
|
|
"natural outdoor lighting" |
|
|
]; |
|
|
|
|
|
for (let i = 0; i < 5; i++) { |
|
|
const style = styles[i % styles.length]; |
|
|
generatedPrompts.push( |
|
|
`Hyperrealistic portrait of ${celebrityName}, ${getRandomAge()} ${getRandomGender()} with ${getRandomHair()}, wearing ${getRandomOutfit()}, ${getRandomExpression()}. 8K ultra HD, 32k epidermal detail maps, ${style} with cinematic volumetric lighting emphasizing skin texture. Realistic human anatomy, PBR materials. Phase One IQ4 sharpness, 9:16 aspect ratio, full-frame. Fine detail: subsurface scattering skin, photorealistic pores, visible fabric texture. Environment: ${getRandomEnvironment()}. Technical cinematography: Hasselblad H6D-400c simulation, Unreal Engine 5.3 Lumen ray tracing. Realism: micro-expressions, HDR-balanced lighting. --v 6 --q 2 --ar 9:16 --style raw --s 1000 --no cartoon, anime, lowres, stylized.` |
|
|
); |
|
|
} |
|
|
|
|
|
|
|
|
generatedPrompts.forEach((prompt, index) => { |
|
|
const promptBlock = document.createElement('div'); |
|
|
promptBlock.className = 'bg-[#1e1e2f] border-2 border-[#3a3a4f] rounded-xl p-4'; |
|
|
|
|
|
promptBlock.innerHTML = ` |
|
|
<div class="font-mono text-sm leading-relaxed mb-3">${prompt}</div> |
|
|
<div class="flex justify-between items-center"> |
|
|
<span class="text-xs text-gray-400">Prompt #${index + 1}</span> |
|
|
<button onclick="copyToClipboard(this)" class="px-4 py-2 bg-green-600 hover:bg-green-700 text-white text-sm rounded-lg transition-colors"> |
|
|
Copiar |
|
|
</button> |
|
|
</div> |
|
|
`; |
|
|
|
|
|
outputBox.appendChild(promptBlock); |
|
|
}); |
|
|
}, 2500); |
|
|
} |
|
|
|
|
|
|
|
|
function getRandomAge() { |
|
|
const ages = ["young", "middle-aged", "mature"]; |
|
|
return ages[Math.floor(Math.random() * ages.length)]; |
|
|
} |
|
|
|
|
|
function getRandomGender() { |
|
|
return Math.random() > 0.5 ? "woman" : "man"; |
|
|
} |
|
|
|
|
|
function getRandomHair() { |
|
|
const hairColors = ["blonde hair", "brunette hair", "black hair", "red hair", "auburn hair"]; |
|
|
const hairStyles = ["long flowing", "short cropped", "shoulder-length", "curly", "straight", "wavy"]; |
|
|
return `${hairStyles[Math.floor(Math.random() * hairStyles.length)]} ${hairColors[Math.floor(Math.random() * hairColors.length)]}`; |
|
|
} |
|
|
|
|
|
function getRandomOutfit() { |
|
|
const outfits = [ |
|
|
"an elegant evening gown", |
|
|
"a stylish business suit", |
|
|
"casual jeans and t-shirt", |
|
|
"a leather jacket with jeans", |
|
|
"a red carpet designer dress", |
|
|
"a sporty athletic outfit" |
|
|
]; |
|
|
return outfits[Math.floor(Math.random() * outfits.length)]; |
|
|
} |
|
|
|
|
|
function getRandomExpression() { |
|
|
const expressions = [ |
|
|
"warm smile", |
|
|
"serious gaze", |
|
|
"playful smirk", |
|
|
"confident look", |
|
|
"mysterious expression" |
|
|
]; |
|
|
return expressions[Math.floor(Math.random() * expressions.length)]; |
|
|
} |
|
|
|
|
|
function getRandomEnvironment() { |
|
|
const environments = [ |
|
|
"luxury penthouse with city views", |
|
|
"sunlit studio with soft shadows", |
|
|
"urban street with neon lights", |
|
|
"natural park setting with trees", |
|
|
"modern art gallery with minimalist decor" |
|
|
]; |
|
|
return environments[Math.floor(Math.random() * environments.length)]; |
|
|
} |
|
|
|
|
|
|
|
|
function copyToClipboard(button) { |
|
|
const promptText = button.parentElement.parentElement.querySelector('.font-mono').textContent; |
|
|
navigator.clipboard.writeText(promptText).then(() => { |
|
|
const originalText = button.textContent; |
|
|
button.textContent = '隆Copiado!'; |
|
|
button.classList.remove('bg-green-600', 'hover:bg-green-700'); |
|
|
button.classList.add('bg-blue-600', 'hover:bg-blue-700'); |
|
|
|
|
|
setTimeout(() => { |
|
|
button.textContent = originalText; |
|
|
button.classList.remove('bg-blue-600', 'hover:bg-blue-700'); |
|
|
button.classList.add('bg-green-600', 'hover:bg-green-700'); |
|
|
}, 2000); |
|
|
}); |
|
|
} |
|
|
</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=ivanoctaviogaitansantos/universo-batuto-girl" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
