Update app.py

app.py

@@ -1,411 +1,500 @@
-import React, { useState, useEffect } from "react";
-import { motion } from "framer-motion";
-
-const API_URL = "https://api.reve.com/v1/image/create";
-
-const App = () => {
-  // Load Google Fonts
-  useEffect(() => {
-    const link = document.createElement("link");
-    link.href = "https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&family=Rajdhani:wght@300;600&display=swap";
-    link.rel = "stylesheet";
-    document.head.appendChild(link);
-    return () => document.head.removeChild(link);
-  }, []);
-
-  const [apiKey, setApiKey] = useState("");
-  const [prompt, setPrompt] = useState("");
-  const [aspectRatio, setAspectRatio] = useState("9:16");
-  const [numImages, setNumImages] = useState(1);
-  const [images, setImages] = useState([]);
-  const [status, setStatus] = useState("Status: Ready");
-  const [isLoading, setIsLoading] = useState(false);
-
-  const handleClear = () => {
-    setPrompt("");
-    setImages([]);
-    setStatus("Status: Ready");
-  };
-
-  const downloadImage = (base64Data, index) => {
-    const link = document.createElement('a');
-    link.href = base64Data;
-    link.download = `reve_ai_image_${index + 1}.jpg`;
-    document.body.appendChild(link);
-    link.click();
-    document.body.removeChild(link);
-  };
-
-  const generateImages = async () => {
-    if (!apiKey.trim()) {
-      setStatus("ERROR: Falta la API Key");
-      return;
-    }
+import os
+import base64
+import requests
+import time
+import concurrent.futures
+from io import BytesIO
+from PIL import Image
+import gradio as gr
+
+# --- CONFIGURACIÓN BACKEND ---
+API_URL = "https://api.reve.com/v1/image/create"
+
+def llamar_api(prompt, ratio, version, api_key):
+    payload = {"prompt": prompt, "aspect_ratio": ratio, "version": version}
+    headers = {"Authorization": f"Bearer {api_key}", "Accept": "application/json", "Content-Type": "application/json"}
+    try:
+        response = requests.post(API_URL, headers=headers, json=payload, timeout=60)
+        if response.status_code == 200:
+            data = response.json()
+            if "image" in data:
+                img = Image.open(BytesIO(base64.b64decode(data["image"])))
+                return img, None
+        return None, f"Error {response.status_code}"
+    except Exception as e:
+        return None, str(e)
+
+def generar_imagenes(prompt, api_key_ui, ratio, version, num_imagenes):
+    api_key = api_key_ui.strip() if api_key_ui else os.getenv("REVE_API_KEY")
+    if not api_key: return [], "ERROR: Falta la API Key"
     
-    if (!prompt.trim()) {
-      setStatus("ERROR: El prompt no puede estar vacio");
-      return;
-    }
+    imgs, errores = [], []
+    with concurrent.futures.ThreadPoolExecutor(max_workers=int(num_imagenes)) as exec:
+        futuros = [exec.submit(llamar_api, prompt, ratio, version, api_key) for _ in range(int(num_imagenes))]
+        for f in concurrent.futures.as_completed(futuros):
+            img, err = f.result()
+            if img: imgs.append(img)
+            else: errores.append(err)
+    
+    return imgs, "Generacion completada" if imgs else f"Error: {errores}"
+
+# --- CSS PERSONALIZADO (STYLE METAVERSE) ---
+css_style = """
+@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&family=Rajdhani:wght@300;600&display=swap');
+
+body, .gradio-container {
+    background: #02020a !important;
+    color: #e2e8f0 !important;
+    font-family: 'Rajdhani', sans-serif !important;
+    min-height: 100vh;
+}
+
+/* Fondo ciberespacial */
+.gradio-container::before {
+    content: '';
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: 
+        radial-gradient(circle at 25% 25%, rgba(188, 19, 254, 0.1) 0%, transparent 50%),
+        radial-gradient(circle at 75% 75%, rgba(0, 242, 255, 0.1) 0%, transparent 50%),
+        linear-gradient(45deg, rgba(2, 2, 10, 0.9) 0%, rgba(5, 5, 20, 0.9) 100%);
+    z-index: -1;
+}
+
+/* Grid pattern */
+.gradio-container::after {
+    content: '';
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-image: 
+        linear-gradient(rgba(0, 242, 255, 0.05) 1px, transparent 1px),
+        linear-gradient(90deg, rgba(0, 242, 255, 0.05) 1px, transparent 1px);
+    background-size: 50px 50px;
+    z-index: -1;
+    opacity: 0.3;
+}
+
+/* Header */
+h1 {
+    font-family: 'Orbitron', sans-serif !important;
+    font-size: 3.5rem !important;
+    font-weight: 700 !important;
+    text-align: center !important;
+    margin-top: 2rem !important;
+    margin-bottom: 0.5rem !important;
+    background: linear-gradient(90deg, #bc13fe 0%, #00f2ff 50%, #ffffff 100%) !important;
+    -webkit-background-clip: text !important;
+    -webkit-text-fill-color: transparent !important;
+    background-clip: text !important;
+    text-shadow: 0 0 30px rgba(188, 19, 254, 0.5) !important;
+}
+
+.subtitle {
+    text-align: center !important;
+    color: rgba(0, 242, 255, 0.8) !important;
+    font-size: 1.2rem !important;
+    letter-spacing: 2px !important;
+    margin-bottom: 3rem !important;
+    font-weight: 300 !important;
+}
+
+/* Paneles */
+.gr-box {
+    background: rgba(10, 10, 25, 0.7) !important;
+    backdrop-filter: blur(10px) !important;
+    border: 1px solid rgba(0, 242, 255, 0.2) !important;
+    border-radius: 1rem !important;
+    padding: 1.5rem !important;
+    box-shadow: 0 10px 30px rgba(0, 242, 255, 0.1) !important;
+}
+
+/* Títulos de panel */
+.panel-title {
+    font-family: 'Orbitron', sans-serif !important;
+    color: #00f2ff !important;
+    font-size: 1.5rem !important;
+    margin-bottom: 1.5rem !important;
+    display: flex !important;
+    align-items: center !important;
+    gap: 10px !important;
+}
+
+.panel-title::before {
+    content: '';
+    width: 12px;
+    height: 12px;
+    border-radius: 50%;
+    background: #00f2ff;
+    animation: pulse 2s infinite;
+}
+
+@keyframes pulse {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0.5; }
+}
+
+/* Inputs */
+input, textarea, select {
+    background: rgba(5, 5, 15, 0.9) !important;
+    border: 1px solid rgba(0, 242, 255, 0.3) !important;
+    color: #00f2ff !important;
+    border-radius: 0.75rem !important;
+    padding: 0.75rem 1rem !important;
+    font-family: 'Rajdhani', sans-serif !important;
+    font-weight: 300 !important;
+}
+
+input:focus, textarea:focus, select:focus {
+    border-color: #00f2ff !important;
+    box-shadow: 0 0 15px rgba(0, 242, 255, 0.3) !important;
+    outline: none !important;
+}
+
+textarea {
+    min-height: 120px !important;
+    resize: vertical !important;
+}
+
+/* Labels */
+label {
+    color: #00f2ff !important;
+    font-weight: 600 !important;
+    margin-bottom: 0.5rem !important;
+    display: block !important;
+    font-size: 0.9rem !important;
+    letter-spacing: 1px !important;
+}
+
+/* Botones */
+button {
+    border-radius: 0.75rem !important;
+    padding: 0.75rem 1.5rem !important;
+    font-weight: 600 !important;
+    transition: all 0.3s ease !important;
+    border: none !important;
+    cursor: pointer !important;
+}
+
+#btn-clear {
+    background: rgba(255, 255, 255, 0.1) !important;
+    border: 1px solid rgba(255, 255, 255, 0.3) !important;
+    color: white !important;
+}
+
+#btn-clear:hover {
+    background: rgba(255, 255, 255, 0.15) !important;
+    box-shadow: 0 0 20px rgba(255, 255, 255, 0.2) !important;
+    transform: translateY(-2px) !important;
+}
+
+#btn-render {
+    background: linear-gradient(90deg, #bc13fe 0%, #8c00ff 50%, #00f2ff 100%) !important;
+    color: white !important;
+    font-family: 'Orbitron', sans-serif !important;
+    font-size: 1.1rem !important;
+    letter-spacing: 1px !important;
+    box-shadow: 0 0 20px rgba(0, 242, 255, 0.4) !important;
+    position: relative !important;
+    overflow: hidden !important;
+}
+
+#btn-render:hover {
+    box-shadow: 0 0 40px rgba(0, 242, 255, 0.8) !important;
+    transform: translateY(-2px) !important;
+}
+
+#btn-render::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: 0.5s;
+}
+
+#btn-render:hover::before {
+    left: 100%;
+}
+
+/* Slider */
+input[type="range"] {
+    -webkit-appearance: none !important;
+    height: 8px !important;
+    background: rgba(5, 5, 15, 0.9) !important;
+    border-radius: 4px !important;
+    border: 1px solid rgba(0, 242, 255, 0.3) !important;
+}
+
+input[type="range"]::-webkit-slider-thumb {
+    -webkit-appearance: none !important;
+    width: 20px !important;
+    height: 20px !important;
+    border-radius: 50% !important;
+    background: linear-gradient(45deg, #bc13fe, #00f2ff) !important;
+    cursor: pointer !important;
+    border: 2px solid white !important;
+    box-shadow: 0 0 10px rgba(0, 242, 255, 0.8) !important;
+}
+
+/* Gallery */
+.gr-image {
+    border-radius: 0.5rem !important;
+    border: 1px solid rgba(0, 242, 255, 0.2) !important;
+    transition: transform 0.3s ease !important;
+}
+
+.gr-image:hover {
+    transform: scale(1.02) !important;
+    box-shadow: 0 0 20px rgba(0, 242, 255, 0.3) !important;
+}
+
+/* Status */
+.status-box {
+    padding: 1rem !important;
+    border-radius: 0.75rem !important;
+    margin-top: 1rem !important;
+    border-left: 4px solid #00f2ff !important;
+    background: rgba(5, 5, 15, 0.5) !important;
+}
+
+.status-success {
+    border-left-color: #00ff00 !important;
+    background: rgba(0, 255, 0, 0.1) !important;
+}
 
-    setIsLoading(true);
-    setStatus("Generando imagenes...");
-    setImages([]);
+.status-error {
+    border-left-color: #ff0000 !important;
+    background: rgba(255, 0, 0, 0.1) !important;
+}
+
+/* Footer */
+.footer {
+    text-align: center !important;
+    color: rgba(255, 255, 255, 0.5) !important;
+    padding: 2rem 0 !important;
+    margin-top: 3rem !important;
+    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
+    font-size: 0.9rem !important;
+}
+
+/* Contador de imágenes */
+.image-counter {
+    font-family: 'Orbitron', sans-serif !important;
+    color: rgba(0, 242, 255, 0.7) !important;
+    font-size: 0.9rem !important;
+    margin-left: auto !important;
+}
+
+/* Empty gallery */
+.empty-gallery {
+    display: flex !important;
+    flex-direction: column !important;
+    align-items: center !important;
+    justify-content: center !important;
+    height: 400px !important;
+    text-align: center !important;
+    color: rgba(255, 255, 255, 0.5) !important;
+}
+
+/* Badges */
+.badge {
+    background: rgba(0, 0, 0, 0.7) !important;
+    color: #00f2ff !important;
+    padding: 0.25rem 0.75rem !important;
+    border-radius: 1rem !important;
+    font-size: 0.8rem !important;
+    border: 1px solid rgba(0, 242, 255, 0.3) !important;
+}
+"""
+
+# Crear la interfaz de Gradio
+with gr.Blocks(theme=gr.themes.Soft(), css=css_style) as demo:
+    # Header
+    gr.HTML("""
+    <div style="text-align: center; padding: 2rem 0 1rem 0;">
+        <h1>REVE AI</h1>
+        <div class="subtitle">NEURAL RENDERING INTERFACE • V1.2.3</div>
+    </div>
+    """)
     
-    const generationPromises = Array.from({ length: numImages }, () => 
-      fetch(API_URL, {
-        method: "POST",
-        headers: {
-          "Authorization": `Bearer ${apiKey.trim()}`,
-          "Accept": "application/json",
-          "Content-Type": "application/json"
-        },
-        body: JSON.stringify({
-          prompt: prompt.trim(),
-          aspect_ratio: aspectRatio,
-          version: "latest"
-        })
-      })
-        .then(response => {
-          if (!response.ok) throw new Error(`Error ${response.status}`);
-          return response.json();
-        })
-        .then(data => {
-          if (data.image) {
-            return `data:image/jpeg;base64,${data.image}`;
-          }
-          throw new Error("No image in response");
-        })
-    );
-
-    try {
-      const results = await Promise.allSettled(generationPromises);
-      const successfulImages = [];
-      const errors = [];
-
-      results.forEach(result => {
-        if (result.status === "fulfilled" && result.value) {
-          successfulImages.push(result.value);
-        } else {
-          errors.push(result.reason?.message || "Unknown error");
-        }
-      });
-
-      setImages(successfulImages);
-      
-      if (successfulImages.length > 0) {
-        setStatus(`Generacion completada (${successfulImages.length}/${numImages})`);
-      } else {
-        setStatus(`Error: ${errors.join(', ')}`);
-      }
-    } catch (error) {
-      setStatus(`Error: ${error.message}`);
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
-  return (
-    <div 
-      className="min-h-screen bg-[#02020a] text-[#e2e8f0] font-rajdhani p-4 md:p-8 overflow-hidden relative"
-      style={{ fontFamily: "'Rajdhani', sans-serif" }}
-    >
-      {/* Background Effects */}
-      <div className="absolute inset-0 bg-gradient-to-br from-[#bc13fe]/10 via-transparent to-[#00f2ff]/5"></div>
-      <div className="absolute top-1/4 left-1/4 w-64 h-64 bg-[#bc13fe]/5 rounded-full blur-3xl"></div>
-      <div className="absolute bottom-1/4 right-1/4 w-96 h-96 bg-[#00f2ff]/5 rounded-full blur-3xl"></div>
-      
-      {/* Grid Pattern */}
-      <div className="absolute inset-0 opacity-10" style={{
-        backgroundImage: `linear-gradient(rgba(0, 242, 255, 0.1) 1px, transparent 1px),
-                         linear-gradient(90deg, rgba(0, 242, 255, 0.1) 1px, transparent 1px)`,
-        backgroundSize: '50px 50px'
-      }}></div>
-
-      <div className="max-w-6xl mx-auto relative z-10">
-        {/* Header */}
-        <motion.div 
-          initial={{ opacity: 0, y: -30 }}
-          animate={{ opacity: 1, y: 0 }}
-          className="text-center mb-12 pt-8"
-        >
-          <h1 
-            className="text-5xl md:text-7xl font-orbitron mb-4 tracking-wider"
-            style={{ 
-              fontFamily: "'Orbitron', sans-serif",
-              background: "linear-gradient(90deg, #bc13fe 0%, #00f2ff 50%, #ffffff 100%)",
-              WebkitBackgroundClip: "text",
-              WebkitTextFillColor: "transparent",
-              textShadow: "0 0 30px rgba(188, 19, 254, 0.5)"
-            }}
-          >
-            REVE AI
-          </h1>
-          <p className="text-lg text-[#00f2ff]/80 font-light tracking-wider">
-            NEURAL RENDERING INTERFACE • V1.2.3
-          </p>
-        </motion.div>
+    with gr.Row():
+        # Panel de Control
+        with gr.Column(scale=1):
+            with gr.Column(elem_classes="gr-box"):
+                gr.HTML('<div class="panel-title">CONTROL PANEL</div>')
+                
+                api_key = gr.Textbox(
+                    label="ACCESS KEY",
+                    type="password",
+                    placeholder="sk-...",
+                    elem_classes="api-key-input"
+                )
+                
+                prompt = gr.Textbox(
+                    label="PROMPT STREAM", 
+                    placeholder="Describe tu vision...",
+                    lines=4,
+                    elem_classes="prompt-input"
+                )
+                
+                with gr.Row():
+                    clear_btn = gr.Button("CLEAR STREAM", elem_id="btn-clear")
+                    btn_run = gr.Button("INITIALIZE RENDER", elem_id="btn-render")
+                
+                with gr.Row():
+                    ratio = gr.Dropdown(
+                        choices=["9:16", "16:9", "1:1"],
+                        value="9:16",
+                        label="ASPECT RATIO",
+                        elem_classes="ratio-select"
+                    )
+                    
+                    num_imgs = gr.Slider(
+                        minimum=1,
+                        maximum=4,
+                        step=1,
+                        value=1,
+                        label="QUANTITY",
+                        elem_classes="quantity-slider"
+                    )
+                
+                status = gr.Textbox(
+                    label="STATUS",
+                    value="Status: Ready",
+                    interactive=False,
+                    elem_classes="status-box"
+                )
         
-        <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
-          {/* Control Panel */}
-          <div className="space-y-6 backdrop-blur-sm bg-[rgba(10,10,25,0.7)] border border-[rgba(0,242,255,0.2)] rounded-2xl p-6 shadow-2xl shadow-[#00f2ff]/10 relative overflow-hidden">
-            <div className="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-[#bc13fe] to-[#00f2ff]"></div>
-            
-            <div className="relative">
-              <div className="flex items-center gap-2 mb-4">
-                <div className="w-3 h-3 rounded-full bg-[#00f2ff] animate-pulse"></div>
-                <h2 className="text-xl font-orbitron" style={{ fontFamily: "'Orbitron', sans-serif" }}>
-                  CONTROL PANEL
-                </h2>
-              </div>
-              
-              <div className="mb-6">
-                <label className="block text-sm font-medium mb-2 text-[#00f2ff] tracking-wider">
-                  <span className="flex items-center gap-2">
-                    <span className="w-2 h-2 bg-[#00f2ff] rounded-full"></span>
-                    ACCESS KEY
-                  </span>
-                </label>
-                <input
-                  type="password"
-                  value={apiKey}
-                  onChange={(e) => setApiKey(e.target.value)}
-                  placeholder="sk-..."
-                  className="w-full bg-[rgba(5,5,15,0.9)] border border-[rgba(0,242,255,0.3)] text-[#00f2ff] rounded-xl px-4 py-3 focus:outline-none focus:ring-2 focus:ring-[#00f2ff] focus:border-transparent font-mono tracking-wider shadow-lg"
-                />
-              </div>
-              
-              <div className="mb-6">
-                <label className="block text-sm font-medium mb-2 text-[#00f2ff] tracking-wider">
-                  <span className="flex items-center gap-2">
-                    <span className="w-2 h-2 bg-[#00f2ff] rounded-full"></span>
-                    PROMPT STREAM
-                  </span>
-                </label>
-                <textarea
-                  value={prompt}
-                  onChange={(e) => setPrompt(e.target.value)}
-                  placeholder="Describe tu vision..."
-                  rows="4"
-                  className="w-full bg-[rgba(5,5,15,0.9)] border border-[rgba(0,242,255,0.3)] text-[#00f2ff] rounded-xl px-4 py-3 focus:outline-none focus:ring-2 focus:ring-[#00f2ff] focus:border-transparent resize-none shadow-lg"
-                />
-              </div>
-              
-              <div className="grid grid-cols-2 gap-6 mb-8">
-                <div>
-                  <label className="block text-sm font-medium mb-2 text-[#00f2ff] tracking-wider">
-                    ASPECT RATIO
-                  </label>
-                  <div className="relative">
-                    <select
-                      value={aspectRatio}
-                      onChange={(e) => setAspectRatio(e.target.value)}
-                      className="w-full bg-[rgba(5,5,15,0.9)] border border-[rgba(0,242,255,0.3)] text-[#00f2ff] rounded-xl px-4 py-3 focus:outline-none focus:ring-2 focus:ring-[#00f2ff] focus:border-transparent appearance-none shadow-lg"
-                    >
-                      <option value="9:16">9:16 Portrait</option>
-                      <option value="16:9">16:9 Landscape</option>
-                      <option value="1:1">1:1 Square</option>
-                    </select>
-                    <div className="absolute right-3 top-3 text-[#00f2ff]">▼</div>
-                  </div>
-                </div>
+        # Panel de Galería
+        with gr.Column(scale=1):
+            with gr.Column(elem_classes="gr-box"):
+                with gr.Row():
+                    gr.HTML('<div class="panel-title">RENDER OUTPUT</div>')
+                    image_counter = gr.HTML('<div class="image-counter" id="image-counter">NO DATA</div>')
                 
-                <div>
-                  <label className="block text-sm font-medium mb-2 text-[#00f2ff] tracking-wider">
-                    QUANTITY: <span className="text-white ml-2">{numImages}</span>
-                  </label>
-                  <input
-                    type="range"
-                    min="1"
-                    max="4"
-                    value={numImages}
-                    onChange={(e) => setNumImages(Number(e.target.value))}
-                    className="w-full h-2 bg-[rgba(5,5,15,0.9)] rounded-lg appearance-none cursor-pointer [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:h-5 [&::-webkit-slider-thumb]:w-5 [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-gradient-to-r [&::-webkit-slider-thumb]:from-[#bc13fe] [&::-webkit-slider-thumb]:to-[#00f2ff] shadow-lg"
-                  />
-                </div>
-              </div>
-              
-              <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
-                <motion.button
-                  whileHover={{ scale: 1.05, boxShadow: "0 0 20px rgba(255,255,255,0.2)" }}
-                  whileTap={{ scale: 0.95 }}
-                  onClick={handleClear}
-                  className="w-full sm:w-auto bg-[rgba(255,255,255,0.1)] border border-[rgba(255,255,255,0.3)] text-white rounded-xl px-8 py-3 font-medium hover:bg-[rgba(255,255,255,0.15)] transition-all duration-300 shadow-lg"
-                  disabled={isLoading}
-                >
-                  <span className="flex items-center justify-center gap-2">
-                    CLEAR STREAM
-                  </span>
-                </motion.button>
+                gallery = gr.Gallery(
+                    label="",
+                    columns=2,
+                    rows=2,
+                    height="auto",
+                    object_fit="contain",
+                    preview=True,
+                    allow_preview=True,
+                    elem_classes="gallery-display"
+                )
                 
-                <motion.button
-                  whileHover={{ scale: 1.05, boxShadow: "0 0 30px rgba(0,242,255,0.7)" }}
-                  whileTap={{ scale: 0.95 }}
-                  onClick={generateImages}
-                  disabled={isLoading}
-                  className="w-full sm:w-auto bg-gradient-to-r from-[#bc13fe] via-[#8c00ff] to-[#00f2ff] text-white rounded-xl px-8 py-3 font-orbitron font-bold shadow-2xl hover:shadow-[0_0_40px_rgba(0,242,255,0.8)] transition-all duration-300 relative overflow-hidden group disabled:opacity-50 disabled:cursor-not-allowed"
-                  style={{ fontFamily: "'Orbitron', sans-serif" }}
-                >
-                  <div className="absolute inset-0 bg-gradient-to-r from-transparent via-white/20 to-transparent -translate-x-full group-hover:translate-x-full transition-transform duration-1000"></div>
-                  <span className="flex items-center justify-center gap-2 relative">
-                    {isLoading ? (
-                      <>
-                        <span>GENERATING...</span>
-                      </>
-                    ) : (
-                      <>
-                        <span>INITIALIZE RENDER</span>
-                      </>
-                    )}
-                  </span>
-                </motion.button>
-              </div>
-            </div>
-            
-            {/* Status Display */}
-            <div 
-              className={`p-4 rounded-xl mt-6 border-l-4 ${
-                status.includes("Generacion completada") ? "border-green-500 bg-green-900/20" : 
-                status.includes("Error") ? "border-red-500 bg-red-900/20" : 
-                "border-[#00f2ff] bg-[rgba(5,5,15,0.5)]"
-              }`}
-            >
-              <div className="flex items-center gap-3">
-                <div className={`w-3 h-3 rounded-full ${
-                  status.includes("Generacion completada") ? "bg-green-500 animate-pulse" : 
-                  status.includes("Error") ? "bg-red-500" : 
-                  "bg-[#00f2ff]"
-                }`}></div>
-                <p className="font-medium tracking-wider">{status}</p>
-              </div>
-            </div>
-          </div>
-          
-          {/* Gallery Panel */}
-          <div className="backdrop-blur-sm bg-[rgba(10,10,25,0.7)] border border-[rgba(0,242,255,0.2)] rounded-2xl p-6 shadow-2xl shadow-[#00f2ff]/10 relative overflow-hidden h-fit">
-            <div className="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-[#00f2ff] to-[#bc13fe]"></div>
-            
-            <div className="flex items-center gap-2 mb-6">
-              <div className="w-3 h-3 rounded-full bg-[#00f2ff] animate-pulse"></div>
-              <h2 className="text-xl font-orbitron" style={{ fontFamily: "'Orbitron', sans-serif" }}>
-                RENDER OUTPUT
-              </h2>
-              <div className="ml-auto text-sm text-[#00f2ff]/70">
-                {images.length > 0 ? `${images.length} IMAGE${images.length > 1 ? 'S' : ''}` : 'NO DATA'}
-              </div>
-            </div>
-            
-            {images.length > 0 ? (
-              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-                {images.map((imgSrc, index) => (
-                  <motion.div
-                    key={index}
-                    initial={{ opacity: 0, scale: 0.9, y: 20 }}
-                    animate={{ opacity: 1, scale: 1, y: 0 }}
-                    transition={{ delay: index * 0.1 }}
-                    className="bg-[rgba(5,5,15,0.9)] border border-[rgba(0,242,255,0.2)] rounded-xl overflow-hidden shadow-xl group relative"
-                  >
-                    <div className="relative">
-                      <img 
-                        src={imgSrc} 
-                        alt={`Generacion ${index + 1}`} 
-                        className="w-full h-48 object-cover group-hover:scale-105 transition-transform duration-500"
-                      />
-                      <div className="absolute inset-0 bg-gradient-to-t from-black/70 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
-                      
-                      {/* Download Button */}
-                      <motion.button
-                        whileHover={{ scale: 1.1 }}
-                        whileTap={{ scale: 0.9 }}
-                        onClick={() => downloadImage(imgSrc, index)}
-                        className="absolute top-3 right-3 bg-black/70 hover:bg-black/90 text-white p-2 rounded-full opacity-0 group-hover:opacity-100 transition-all duration-300 shadow-lg"
-                        title="Descargar imagen"
-                      >
-                        <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 15v-6m0 0l-3 3m3-3l3 3M3 15a2 2 0 002 2h14a2 2 0 002-2v-3a2 2 0 00-2-2H5a2 2 0 00-2 2v3z"></path>
-                        </svg>
-                      </motion.button>
-                      
-                      <div className="absolute bottom-3 right-3 bg-black/70 text-xs px-3 py-1 rounded-full border border-[#00f2ff]/30">
-                        {aspectRatio}
-                      </div>
-                      <div className="absolute bottom-3 left-3 bg-black/70 text-xs px-3 py-1 rounded-full">
-                        #{index + 1}
-                      </div>
-                    </div>
-                    <div className="p-3">
-                      <p className="text-xs text-[#00f2ff]/70 truncate">
-                        {prompt.substring(0, 40)}...
-                      </p>
-                    </div>
-                  </motion.div>
-                ))}
-              </div>
-            ) : (
-              <div className="bg-[rgba(5,5,15,0.5)] border-2 border-dashed border-[rgba(0,242,255,0.2)] rounded-xl h-96 flex flex-col items-center justify-center p-8 text-center">
-                <div className="w-20 h-20 mb-6 rounded-full bg-gradient-to-br from-[#bc13fe]/20 to-[#00f2ff]/20 flex items-center justify-center border border-[rgba(0,242,255,0.1)]">
-                  <span className="text-3xl text-[#00f2ff]">[ ]</span>
-                </div>
-                <h3 className="text-xl font-orbitron mb-2 text-[#00f2ff]" style={{ fontFamily: "'Orbitron', sans-serif" }}>
-                  RENDER QUEUE EMPTY
-                </h3>
-                <p className="text-gray-400 max-w-md">
-                  Configure your parameters and click "INITIALIZE RENDER" to generate neural imagery.
-                </p>
-                <div className="mt-6 flex gap-2">
-                  {[1, 2, 3, 4].map(i => (
-                    <div key={i} className="w-2 h-2 rounded-full bg-[#00f2ff]/30 animate-pulse" style={{ animationDelay: `${i * 0.2}s` }}></div>
-                  ))}
-                </div>
-              </div>
-            )}
-            
-            {/* Gallery Stats */}
-            {images.length > 0 && (
-              <div className="mt-6 pt-6 border-t border-[rgba(0,242,255,0.1)]">
-                <div className="flex justify-between text-sm">
-                  <div className="text-[#00f2ff]">
-                    <span className="opacity-70">TOTAL SIZE:</span> 
-                    <span className="ml-2">{images.length * 2.5} MB</span>
-                  </div>
-                  <div className="text-[#00f2ff]">
-                    <span className="opacity-70">RESOLUTION:</span> 
-                    <span className="ml-2">{aspectRatio}</span>
-                  </div>
-                  <button 
-                    onClick={() => images.forEach((img, i) => downloadImage(img, i))}
-                    className="text-[#bc13fe] hover:text-white transition-colors"
-                  >
-                    DOWNLOAD ALL
-                  </button>
-                </div>
-              </div>
-            )}
-          </div>
+                # Botón para descargar todas las imágenes
+                download_all_btn = gr.Button(
+                    "DOWNLOAD ALL IMAGES",
+                    visible=False,
+                    elem_id="btn-download-all"
+                )
+    
+    # Footer
+    gr.HTML("""
+    <div class="footer">
+        <div>REVE AI NEURAL INTERFACE • v1.2.3</div>
+        <div style="margin-top: 0.5rem; font-size: 0.8rem;">
+            <span style="color: #00f2ff;">CONNECTED</span> • 
+            <span id="api-status" style="color: #ff5555;">API: INACTIVE</span>
         </div>
-        
-        {/* Footer */}
-        <footer className="mt-16 pt-8 border-t border-[rgba(255,255,255,0.1)] text-center">
-          <div className="flex flex-col md:flex-row items-center justify-between text-sm text-gray-500">
-            <div className="mb-4 md:mb-0">
-              <p className="flex items-center justify-center gap-2">
-                <span className="w-2 h-2 rounded-full bg-[#00f2ff] animate-pulse"></span>
-                REVE AI NEURAL INTERFACE • v1.2.3
-              </p>
-            </div>
-            <div className="flex items-center gap-6">
-              <span className="text-[#00f2ff]/70">CONNECTED</span>
-              <div className="flex gap-1">
-                {[1, 2, 3].map(i => (
-                  <div key={i} className="w-2 h-2 rounded-full bg-green-500 animate-pulse" style={{ animationDelay: `${i * 0.2}s` }}></div>
-                ))}
-              </div>
-              <span>API: {apiKey ? 'ACTIVE' : 'INACTIVE'}</span>
-            </div>
-          </div>
-        </footer>
-      </div>
     </div>
-  );
-};
+    """)
+    
+    # JavaScript para actualizar contador y estado
+    js_code = """
+    <script>
+    // Actualizar contador de imágenes
+    function updateImageCounter(images) {
+        const counter = document.getElementById('image-counter');
+        if (images && images.length > 0) {
+            counter.textContent = `${images.length} IMAGE${images.length > 1 ? 'S' : ''}`;
+            document.getElementById('btn-download-all').style.display = 'block';
+        } else {
+            counter.textContent = 'NO DATA';
+            document.getElementById('btn-download-all').style.display = 'none';
+        }
+    }
+    
+    // Actualizar estado de API
+    function updateApiStatus(apiKey) {
+        const statusEl = document.getElementById('api-status');
+        if (apiKey && apiKey.length > 0) {
+            statusEl.textContent = 'API: ACTIVE';
+            statusEl.style.color = '#00ff00';
+        } else {
+            statusEl.textContent = 'API: INACTIVE';
+            statusEl.style.color = '#ff5555';
+        }
+    }
+    
+    // Monitorear cambios en el API key
+    document.addEventListener('DOMContentLoaded', function() {
+        const apiInput = document.querySelector('input[type="password"]');
+        if (apiInput) {
+            apiInput.addEventListener('input', function(e) {
+                updateApiStatus(e.target.value);
+            });
+            updateApiStatus(apiInput.value);
+        }
+    });
+    </script>
+    """
+    
+    gr.HTML(js_code)
+    
+    # Funciones para manejar eventos
+    def update_gallery(images):
+        # Esta función se llamará cuando se generen imágenes
+        if images and len(images) > 0:
+            return images, gr.update(visible=True)
+        return images, gr.update(visible=False)
+    
+    def clear_all():
+        return "", [], gr.update(visible=False), "Status: Ready"
+    
+    # Conectar eventos
+    clear_btn.click(
+        fn=clear_all,
+        outputs=[prompt, gallery, download_all_btn, status]
+    )
+    
+    btn_run.click(
+        fn=generar_imagenes,
+        inputs=[prompt, api_key, ratio, gr.State("latest"), num_imgs],
+        outputs=[gallery, status]
+    ).then(
+        fn=update_gallery,
+        inputs=[gallery],
+        outputs=[gallery, download_all_btn]
+    )
+    
+    # Función para descargar imágenes
+    def download_images(images):
+        if images and len(images) > 0:
+            # En un entorno real, aquí se crearían archivos ZIP o similar
+            # Por ahora, solo mostramos un mensaje
+            return "Download functionality would be implemented here"
+        return "No images to download"
+    
+    download_all_btn.click(
+        fn=download_images,
+        inputs=[gallery],
+        outputs=[status]
+    )
 
-export default App;
+# Ejecutar la aplicación
+if __name__ == "__main__":
+    demo.launch(
+        server_name="0.0.0.0",
+        server_port=7860,
+        share=False
+    )