Spaces:

Cristobal299
/

IAweb

Running

App Files Files Community

Cristobal299 commited on Apr 29

Commit

72d7bb2

1 Parent(s): 8da132a

Interfaz a pantalla completa y clonado exacto

Browse files

Files changed (2) hide show

app.py +12 -19
index.html +28 -39

app.py CHANGED Viewed

@@ -15,38 +15,32 @@ class GenerateRequest(BaseModel):
 @app.post("/api/generate")
 async def generate_site(data: GenerateRequest):
     try:
-        # 1. Scrapeamos la web original para entender qué hacen
-        r = requests.get(data.url, headers={'User-Agent': 'Mozilla/5.0'}, timeout=10)
         soup = BeautifulSoup(r.text, 'html.parser')
-        texto_original = soup.get_text()[:3000] # Cogemos lo esencial
-        # 2. La IA actúa como Diseñador Web Pro
         prompt = (
-            f"Actúa como un Desarrollador Frontend experto en Tailwind CSS. \n"
-            f"Debes crear una LANDING PAGE moderna y elegante basada en este negocio: {texto_original}. \n\n"
-            f"REGLAS DEL DISEÑO:\n"
-            f"1. Nombre del negocio: {data.nuevo_nombre}.\n"
-            f"2. Color principal: {data.color_primario} (usa clases de Tailwind como 'bg-{data.color_primario}-600').\n"
-            f"3. Estilo: Minimalista, con sombras (shadow-xl) y bordes redondeados (rounded-3xl).\n"
-            f"4. Estructura: Hero con imagen, sección de Servicios, sección de 'Sobre nosotros' y un Formulario de contacto.\n"
-            f"5. Fotos: Usa fotos de alta calidad de Unsplash (ej: https://images.unsplash.com/photo-XXXXX?auto=format&fit=crop&w=800).\n\n"
-            f"IMPORTANTE: Devuelve SOLO el código HTML con Tailwind (usando el CDN de Tailwind). No des explicaciones."
         )
         payload = {
             "model": "llama-3.3-70b-versatile",
-            "messages": [{"role": "system", "content": "Eres un generador de código HTML/Tailwind."},
-                         {"role": "user", "content": prompt}],
-            "max_tokens": 4000
         }
         headers = {"Authorization": f"Bearer {GROQ_API_KEY}"}
         r_ia = requests.post("https://api.groq.com/openai/v1/chat/completions", json=payload, headers=headers)
         html_generado = r_ia.json()["choices"][0]["message"]["content"]
-        # Limpiar posibles etiquetas de markdown que ponga la IA
         html_final = re.sub(r'```html|```', '', html_generado).strip()
         return {"status": "success", "html": html_final}
     except Exception as e:
         return JSONResponse({"status": "error", "detail": str(e)}, status_code=400)
@@ -54,4 +48,3 @@ async def generate_site(data: GenerateRequest):
 @app.get("/", response_class=HTMLResponse)
 async def index():
     with open("index.html", "r", encoding="utf-8") as f: return f.read()

 @app.post("/api/generate")
 async def generate_site(data: GenerateRequest):
     try:
+        r = requests.get(data.url, headers={'User-Agent': 'Mozilla/5.0'}, timeout=12)
         soup = BeautifulSoup(r.text, 'html.parser')
+        texto_original = soup.get_text()[:4000]
         prompt = (
+            f"Actúa como un clonador de webs experto en HTML y Tailwind CSS. \n"
+            f"Tu objetivo es crear una página que tenga la MISMA ESTRUCTURA Y SECCIONES que esta información original: {texto_original}. \n"
+            f"REGLAS ESTRICTAS:\n"
+            f"1. Sustituye el nombre del negocio original por: {data.nuevo_nombre}.\n"
+            f"2. Cambia todos los colores principales para usar la paleta: {data.color_primario} (ej: bg-{data.color_primario}-600, text-{data.color_primario}-500).\n"
+            f"3. Mantén los mismos servicios, textos y el mismo enfoque de ventas que la web original, no te inventes cosas nuevas.\n"
+            f"4. Diseño profesional, a pantalla completa.\n"
+            f"5. Devuelve SOLO el código HTML completo con Tailwind embebido, sin Markdown, sin explicaciones previas ni posteriores."
         )
         payload = {
             "model": "llama-3.3-70b-versatile",
+            "messages": [{"role": "system", "content": "Eres un experto en clonación y diseño web."},
+                         {"role": "user", "content": prompt}]
         }
         headers = {"Authorization": f"Bearer {GROQ_API_KEY}"}
         r_ia = requests.post("https://api.groq.com/openai/v1/chat/completions", json=payload, headers=headers)
         html_generado = r_ia.json()["choices"][0]["message"]["content"]
         html_final = re.sub(r'```html|```', '', html_generado).strip()
         return {"status": "success", "html": html_final}
     except Exception as e:
         return JSONResponse({"status": "error", "detail": str(e)}, status_code=400)
 @app.get("/", response_class=HTMLResponse)
 async def index():
     with open("index.html", "r", encoding="utf-8") as f: return f.read()

index.html CHANGED Viewed

@@ -5,47 +5,32 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>IA Web Re-Designer</title>
     <script src="https://cdn.tailwindcss.com"></script>
 </head>
-<body class="bg-slate-900 text-white min-h-screen p-4 md:p-10">
-    <div class="max-w-6xl mx-auto">
-        <div class="text-center mb-10">
-            <h1 class="text-4xl font-bold mb-2">IA Web Re-Designer 🚀</h1>
-            <p class="text-slate-400">Clona y mejora cualquier web en segundos</p>
-        </div>
-        <div class="grid md:grid-cols-3 gap-8">
-            <div class="bg-slate-800 p-6 rounded-3xl border border-slate-700 h-fit">
-                <div class="space-y-4">
-                    <div>
-                        <label class="block text-xs font-bold text-slate-500 uppercase mb-2">URL Original</label>
-                        <input type="text" id="url" placeholder="https://web-vieja.com" class="w-full p-3 rounded-xl bg-slate-900 border border-slate-600 outline-none focus:border-blue-500">
-                    </div>
-                    <div>
-                        <label class="block text-xs font-bold text-slate-500 uppercase mb-2">Nuevo Nombre</label>
-                        <input type="text" id="nombre" placeholder="Mi Nueva Clínica" class="w-full p-3 rounded-xl bg-slate-900 border border-slate-600 outline-none focus:border-blue-500">
-                    </div>
-                    <div>
-                        <label class="block text-xs font-bold text-slate-500 uppercase mb-2">Color (Tailwind: blue, red, emerald...)</label>
-                        <input type="text" id="color" placeholder="blue" class="w-full p-3 rounded-xl bg-slate-900 border border-slate-600 outline-none focus:border-blue-500">
-                    </div>
-                    <button onclick="generarWeb()" id="btn" class="w-full bg-blue-600 p-4 rounded-2xl font-bold hover:bg-blue-500 transition-all shadow-lg shadow-blue-900/20">
-                        REDISEÑAR AHORA
-                    </button>
-                </div>
-            </div>
-            <div class="md:col-span-2">
-                <div class="bg-white rounded-3xl overflow-hidden shadow-2xl h-[600px] border-4 border-slate-800">
-                    <iframe id="preview" class="w-full h-full" srcdoc="<div style='display:flex; height:100%; align-items:center; justify-content:center; font-family:sans-serif; color:#94a3b8'>La nueva web aparecerá aquí...</div>"></iframe>
-                </div>
-            </div>
         </div>
     </div>
     <script>
         async function generarWeb() {
             const btn = document.getElementById('btn');
             const preview = document.getElementById('preview');
             const data = {
@@ -54,9 +39,9 @@
                 color_primario: document.getElementById('color').value
             };
-            if(!data.url || !data.nuevo_nombre) return alert("Rellena los datos");
-            btn.innerHTML = "⌛ Diseñando con IA...";
             btn.disabled = true;
             try {
@@ -68,14 +53,18 @@
                 const result = await res.json();
                 if(result.status === "success") {
                     preview.srcdoc = result.html;
                 } else {
-                    alert("Error en la generación");
                 }
             } catch(e) {
-                alert("Error de conexión");
-            } finally {
-                btn.innerHTML = "REDISEÑAR AHORA";
                 btn.disabled = false;
             }
         }

     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>IA Web Re-Designer</title>
     <script src="https://cdn.tailwindcss.com"></script>
+    <style> body { overflow: hidden; } </style>
 </head>
+<body class="bg-slate-50">
+    <div id="setup-panel" class="absolute inset-0 flex items-center justify-center z-50 p-4">
+        <div class="bg-white p-8 md:p-12 rounded-[40px] shadow-2xl shadow-blue-100 w-full max-w-md text-center border border-slate-100">
+            <div class="w-16 h-16 bg-emerald-500 rounded-2xl mx-auto mb-6 flex items-center justify-center text-white text-3xl font-bold shadow-lg shadow-emerald-200">🎨</div>
+            <h1 class="text-3xl font-bold text-slate-900 mb-2">Web Re-Designer</h1>
+            <p class="text-slate-500 mb-8 font-medium">Clona y cambia de color cualquier web</p>
+            <input type="text" id="url" placeholder="URL original (Ej: https://...)" class="w-full p-4 rounded-2xl bg-slate-50 border border-slate-200 mb-4 outline-none focus:ring-2 focus:ring-emerald-500">
+            <input type="text" id="nombre" placeholder="Nuevo Nombre del Negocio" class="w-full p-4 rounded-2xl bg-slate-50 border border-slate-200 mb-4 outline-none focus:ring-2 focus:ring-emerald-500">
+            <input type="text" id="color" placeholder="Color (blue, red, emerald, purple...)" class="w-full p-4 rounded-2xl bg-slate-50 border border-slate-200 mb-6 outline-none focus:ring-2 focus:ring-emerald-500">
+            <button onclick="generarWeb()" id="btn" class="w-full bg-emerald-500 text-white py-4 rounded-2xl font-bold shadow-xl shadow-emerald-200 hover:bg-emerald-600 transition-all">
+                CLONAR Y REDISEÑAR
+            </button>
         </div>
     </div>
+    <iframe id="preview" class="w-full h-screen border-none hidden absolute top-0 left-0 z-10"></iframe>
     <script>
         async function generarWeb() {
             const btn = document.getElementById('btn');
+            const panel = document.getElementById('setup-panel');
             const preview = document.getElementById('preview');
             const data = {
                 color_primario: document.getElementById('color').value
             };
+            if(!data.url || !data.nuevo_nombre) return alert("Faltan datos por rellenar");
+            btn.innerHTML = "⏳ Escaneando y programando...";
             btn.disabled = true;
             try {
                 const result = await res.json();
                 if(result.status === "success") {
+                    // Ocultar panel y mostrar web a pantalla completa
+                    panel.style.display = 'none';
+                    preview.style.display = 'block';
                     preview.srcdoc = result.html;
                 } else {
+                    alert("Error al clonar la web.");
+                    btn.innerHTML = "CLONAR Y REDISEÑAR";
+                    btn.disabled = false;
                 }
             } catch(e) {
+                alert("Error de conexión con la IA.");
+                btn.innerHTML = "CLONAR Y REDISEÑAR";
                 btn.disabled = false;
             }
         }