Spaces:

ivanoctaviogaitansantos
/

universo-batuto-girl

Running

App Files Files Community

ivanoctaviogaitansantos commited on Aug 6

Commit

5dd1e9e

verified ·

1 Parent(s): 9961d75

undefined - Initial Deployment

Browse files

Files changed (2) hide show

README.md +7 -5
index.html +288 -19

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Universo Batuto Girl
-emoji: 📊
-colorFrom: green
-colorTo: purple
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: universo-batuto-girl
+emoji: 🐳
+colorFrom: blue
+colorTo: pink
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,288 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!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)]">
+        <!-- Header -->
+        <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>
+        <!-- Main Content -->
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
+            <!-- BATUTO-VERSE Section -->
+            <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>
+            <!-- BATUTO-GIRL Section -->
+            <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>
+        <!-- Output Section -->
+        <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>
+        <!-- Footer -->
+        <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>
+        // API Key integrada
+        const API_KEY = 'X6JGJz2JBnf9dW1NyvdiVYlNVvgJzMSi';
+        // Base de datos de prompts para BATUTO-VERSE
+        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."
+        ];
+        // Función para generar prompts BATUTO-VERSE
+        function generateVersePrompts() {
+            const loadingElement = document.getElementById('verseLoading');
+            const outputBox = document.getElementById('outputBox');
+            // Mostrar loading
+            loadingElement.classList.remove('hidden');
+            outputBox.innerHTML = '';
+            // Simular tiempo de generación
+            setTimeout(() => {
+                loadingElement.classList.add('hidden');
+                // Seleccionar 5 prompts aleatorios
+                const shuffled = [...batutoVersePrompts].sort(() => 0.5 - Math.random());
+                const selectedPrompts = shuffled.slice(0, 5);
+                // Mostrar los prompts
+                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);
+        }
+        // Función para generar prompts BATUTO-GIRL
+        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;
+            }
+            // Mostrar loading
+            loadingElement.classList.remove('hidden');
+            outputBox.innerHTML = '';
+            // Simular tiempo de generación
+            setTimeout(() => {
+                loadingElement.classList.add('hidden');
+                // Generar 5 prompts personalizados
+                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.`
+                    );
+                }
+                // Mostrar los prompts
+                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);
+        }
+        // Funciones auxiliares para generar contenido aleatorio
+        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)];
+        }
+        // Función para copiar al portapapeles
+        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>