Spaces:

Cristobal299
/

IAweb

Running

App Files Files Community

Cristobal299 commited on Apr 29

Commit

8da132a

1 Parent(s): 1f97c2e

Primera version del clonador de webs

Browse files

Files changed (4) hide show

Dockerfile +7 -0
app.py +57 -0
index.html +85 -0
requirements.txt +6 -0

Dockerfile ADDED Viewed

	@@ -0,0 +1,7 @@

+FROM python:3.10
+WORKDIR /code
+COPY ./requirements.txt /code/requirements.txt
+RUN pip install --no-cache-dir --upgrade -r /code/requirements.txt
+COPY . .
+CMD ["uvicorn", "app:app", "--host", "0.0.0.0", "--port", "7860"]

app.py ADDED Viewed

	@@ -0,0 +1,57 @@

+import os, requests, re
+from fastapi import FastAPI
+from fastapi.responses import HTMLResponse, JSONResponse
+from pydantic import BaseModel
+from bs4 import BeautifulSoup
+app = FastAPI()
+GROQ_API_KEY = os.getenv("GROQ_API_KEY")
+class GenerateRequest(BaseModel):
+    url: str
+    nuevo_nombre: str
+    color_primario: str
+@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)
+@app.get("/", response_class=HTMLResponse)
+async def index():
+    with open("index.html", "r", encoding="utf-8") as f: return f.read()

index.html ADDED Viewed

	@@ -0,0 +1,85 @@

+<!DOCTYPE html>
+<html lang="es">
+<head>
+    <meta charset="UTF-8">
+    <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 = {
+                url: document.getElementById('url').value,
+                nuevo_nombre: document.getElementById('nombre').value,
+                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 {
+                const res = await fetch('/api/generate', {
+                    method: 'POST',
+                    headers: {'Content-Type': 'application/json'},
+                    body: JSON.stringify(data)
+                });
+                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;
+            }
+        }
+    </script>
+</body>
+</html>

requirements.txt ADDED Viewed

	@@ -0,0 +1,6 @@

+fastapi
+uvicorn
+requests
+beautifulsoup4
+pydantic