- DeepSite es un espacio gratuito de Hugging Face en
huggingface.co/spaces/enricoros/deepsiteque convierte un indicador de texto (prompt) en una aplicación web HTML completa y autónoma. - No se requiere instalación ni cuenta para probarlo: simplemente abra la URL, describa su aplicación, haga clic en Generar y obtenga una vista previa en vivo y un archivo descargable
.html. - La salida es un único archivo con CSS y JavaScript integrados (inline); puede alojarlo en Hugging Face Spaces, GitHub Pages, Netlify o cualquier servidor estático.
- Duplique el espacio y agregue su propio token de API de Hugging Face para evitar tiempos de espera en la cola y elegir el modelo preferido.
Hugging Face DeepSite es un generador de aplicaciones web de código abierto que funciona directamente en el navegador. Describa la aplicación que desea en texto plano y DeepSite invocará un modelo de lenguaje grande para generar un único archivo autónomo —con CSS y JavaScript integrados— que se ejecutará inmediatamente en cualquier navegador. No se necesitan herramientas de construcción, ni frameworks ni dependencias para instalar. Al ser completamente basado en navegador, los usuarios de Windows, macOS y Linux siguen los mismos pasos. .html archivo —con CSS y JavaScript integrados— que se ejecutará inmediatamente en cualquier navegador. No se necesitan herramientas de construcción, ni frameworks ni dependencias para instalar. Al ser completamente basado en navegador, los usuarios de Windows, macOS y Linux siguen los mismos pasos.
Qué genera DeepSite
Cada salida de DeepSite es un único.html archivo. Las bibliotecas externas que el modelo elija incluir —por ejemplo Chart.js, Tailwind CSS mediante CDN o Alpine.js— se cargan desde un enlace CDN en la etiqueta <head>y no se empaquetan (bundled). Esto mantiene el archivo pequeño y listo para usar de inmediato.
DeepSite es especialmente adecuado para:
- Calculadoras interactivas y conversores de unidades
- Paneles de visualización de datos usando Chart.js u otras librerías similares
- Juegos sencillos para navegador (canvas 2D, acertijos de palabras)
- Prototipos de interfaces de usuario y maquetas interactivas
- Herramientas y utilidades de propósito específico
No sustituye a aplicaciones multiarchivo basadas en React o Vue. Los proyectos que requieran una base de datos, autenticación o gestión compleja de estado deberían considerar la salida de DeepSite como un esqueleto inicial, no como un producto final.
Cómo usar DeepSite
- Abra el espacio. Ir a
huggingface.co/spaces/enricoros/deepsite. No se requiere iniciar sesión en la instancia pública, aunque durante las horas pico podría ingresar a una cola de espera. - Escriba su indicador (prompt). En el campo del indicador, describa concretamente la aplicación deseada. En lugar de escribir «una calculadora», formule algo como «una calculadora de propinas con un control deslizante para el porcentaje (10–30 %), un campo para el importe total de la factura y una salida que muestre el cálculo por persona». La especificidad mejora la calidad del resultado.
- Seleccione un modelo. El espacio muestra un menú desplegable para elegir el modelo. Las opciones varían según las actualizaciones realizadas por el mantenedor; la lista actual aparece en la interfaz de usuario. Para una comparación clasificada de los modelos subyacentes según su capacidad de programación y costo, consulte la Clasificación de modelos de lenguaje grande (LLM).
- Haga clic en Generar. El modelo transmite HTML al panel del editor situado a la izquierda. Una vista previa en vivo se renderiza en tiempo real en el panel derecho.
- Itere mediante mensajes posteriores. Use la entrada de chat debajo de la vista previa para refinar el resultado: «cambiar a un fondo oscuro», «agregar un botón de reinicio», «usar una fuente más grande para el resultado». El modelo edita el archivo existente en lugar de regenerarlo desde cero.
- Descargue o implemente. Haga clic Descargar HTML para guardar el archivo localmente, o haga clic en Implementar en Spaces para publicarlo como un nuevo espacio de Hugging Face bajo su cuenta.
Comprensión de la vista previa en vivo
El panel de vista previa representa su HTML dentro de un iframe con sandbox. iframe. Algunas APIs del navegador —como geolocalización, cámara o escritura en el portapapeles— pueden estar bloqueadas por las políticas de sandbox del iframe en el entorno de Hugging Face. Si una funcionalidad funciona en el editor pero no en la vista previa, descargue el archivo y ábralo directamente en su navegador para probarlo sin restricciones de sandbox.
Implementación de su aplicación
El Implementar en Spaces El botón maneja automáticamente todo el flujo (requiere que haya iniciado sesión en Hugging Face):
- Crea un nuevo espacio bajo su cuenta con el SDK configurado como Estático —sin servidor, solo alojamiento de archivos.
- Sube su archivo
index.htmlcomo único archivo. - Asigna una URL pública en
huggingface.co/spaces/<su-nombre-de-usuario>/<nombre-del-espacio>.
Los espacios estáticos son gratuitos. La aplicación queda accesible públicamente en cuestión de segundos tras su implementación. También puede alojar el archivo en cualquier servicio que sirva contenido estático:
| Plataforma | Cómo implementar | Versión gratuita |
|---|---|---|
| Espacios de Hugging Face (estáticos) | Use el botón Implementar integrado | Sí |
| GitHub Pages | Confirmar cambios index.html en un repositorio y activar Pages en Configuración | Sí |
| Netlify | Arrastre y suelte el archivo en netlify.com/drop | Sí |
| Vercel | Ejecutar vercel --prod desde un directorio que contenga el archivo | Sí (se aplican límites) |
| Cualquier servidor web | Copie el archivo en la raíz del documento y sírvalo como HTML estático | Variable |
Duplicación del espacio para límites de tasa más altos
El Espacio público se comparte; durante periodos de alta demanda puede quedar en cola. Duplicarlo le proporciona una instancia privada que se ejecuta en su propia cuenta de Hugging Face, con su propia cuota de API.
- Inicie sesión en Hugging Face.
- Abrir
huggingface.co/spaces/enricoros/deepsite. - Haga clic en el menú de tres puntos (…) en la esquina superior derecha y seleccione Duplicar este Espacio.
- Elija un nombre y la visibilidad (público o privado), luego haga clic en Duplicar Espacio.
- En la configuración de su Espacio duplicado, agregue un secreto denominado
HF_TOKENque contenga un token de API de Hugging Face con acceso a la API de inferencia. DeepSite usará este token para todas las llamadas a modelos.
Si está decidiendo entre confiar en el Espacio público gratuito o pagar por su propia cuota de inferencia, la calculadora de punto de equilibrio entre alojamiento local y uso de API puede cuantificar la diferencia de costos según su volumen esperado de generación.
Ejecución local de DeepSite
El código fuente de DeepSite es un repositorio git estándar alojado en Hugging Face. Puede clonarlo y ejecutarlo localmente contra un servidor de inferencia local (Ollama, vLLM, llama.cpp con un punto final compatible con OpenAI).
git clone https://huggingface.co/spaces/enricoros/deepsite
cd deepsite
npm install
npm run devLos nombres de las variables de entorno para el punto final del modelo pueden cambiar entre versiones; revise el archivo README.md o cualquier archivo.env.example después de clonar, en lugar de confiar en un nombre de variable fijo. Para ejecutar localmente un modelo capaz de generar código, primero verifique si su GPU dispone de suficiente memoria: los modelos centrados en código con 7B–34B parámetros representan el rango práctico para la mayoría del hardware de consumo. Use la Calculadora de VRAM para confirmar que su GPU puede manejar el modelo objetivo antes de descargarlo.
Consejos para redactar indicadores (prompts) que mejoren la salida
- Nombre explícitamente los elementos de la interfaz de usuario. «Un menú desplegable para seleccionar la moneda» es más fiable que «una forma de elegir una moneda».
- Especifique el estilo visual. «Modo oscuro, diseño basado en tarjetas, bordes redondeados» orienta mejor la generación de CSS. Sin indicaciones de estilo, la salida varía ampliamente entre modelos.
- Indique las bibliotecas que desea utilizar. «Use Chart.js para el gráfico de barras» es más fiable que confiar en que el modelo elija una biblioteca adecuada.
- Mantenga el alcance reducido. Las herramientas de propósito único generan mejor código. Las aplicaciones multi-pantalla producen código sobredimensionado y más difícil de iterar, todo en un solo archivo.
- Refine mediante mensajes posteriores. Un borrador inicial refinado mediante tres o cuatro mensajes específicos suele superar a un único prompt extenso.
Limitaciones
- La salida está limitada por la longitud máxima de respuesta del modelo. Las aplicaciones muy complejas pueden truncarse a mitad de archivo; reduzca el alcance si esto ocurre.
- No hay persistencia de sesión: cerrar la pestaña del navegador pierde la conversación. Descargue el archivo antes de cerrarla.
- Las bibliotecas dependientes de CDN requieren conexión a Internet para renderizarse correctamente al abrir el archivo localmente.
- Solo frontend: sin lógica del lado del servidor, sin base de datos ni autenticación en la salida generada.
Preguntas frecuentes
¿Es gratuito usar DeepSite?
El Espacio público es gratuito, sujeto a las cuotas compartidas de recursos computacionales de Hugging Face. Duplicar el Espacio también es gratuito, pero las llamadas a la API de inferencia realizadas desde su propia cuenta de Hugging Face se facturan tras agotar la franquicia gratuita. Los costos dependen del modelo y suelen ser bajos para tareas breves de generación de código.
¿Qué modelos utiliza DeepSite?
La lista de modelos la mantiene el autor del Espacio y cambia con el tiempo; versiones anteriores han incluido modelos de la familia Llama, DeepSeek variantes Coder y modelos Qwen Coder. Consulte el menú desplegable en el Espacio en vivo para ver las opciones actuales; no confíe en ninguna lista fija de documentación externa.
¿Puedo usar la salida de DeepSite con fines comerciales?
El código generado no tiene licencia inherente: usted proporcionó el prompt y la salida es código funcional. No obstante, las bibliotecas alojadas en CDN incluidas por el modelo (Chart.js, Tailwind, etc.) tienen sus propias licencias (típicamente MIT o Apache 2.0). Revise cuidadosamente todas las importaciones desde CDN en el archivo antes de usarlo comercialmente.
¿Cómo se compara DeepSite con otros generadores de código basados en IA?
El nicho de DeepSite es la generación sin configuración previa y con salida en un solo archivo, además de una vista previa instantánea en el navegador. Herramientas como GitHub Copilot, Cursor y v0.dev ofrecen generación de proyectos multiarchivo más avanzada, pero requieren un IDE o una suscripción de pago. DeepSite es el camino más rápido desde la idea hasta un prototipo compartible. Para una comparativa clasificada de los modelos subyacentes según inteligencia y costo, consulte la Clasificación de modelos de lenguaje grande (LLM).
La aplicación generada no funciona correctamente en la vista previa. ¿Qué debo hacer?
Descargue primero el archivo y ábralo directamente en su navegador: varias APIs del navegador están bloqueadas dentro del iframe con sandbox. Si sigue fallando localmente, envíe un mensaje posterior describiendo concretamente el problema («el gráfico no se representa», «al hacer clic en el botón no ocurre nada»), en lugar de regenerar desde cero. Si el archivo termina a mitad de etiqueta o de script, la salida se ha truncado: simplifique el alcance del prompt o cambie a un modelo con un límite de salida mayor.
¿Puedo autoalojar DeepSite con un modelo privado o LLM local?
Sí. Clone el repositorio, ejecútelo localmente con npm run dev, y configure el punto final del modelo para que apunte a un servidor de inferencia local. Un modelo de generación de código con al menos 7B parámetros produce resultados utilizables; los modelos de 34B+ mejoran sustancialmente la calidad, pero exigen mucha más VRAM. Consulte la Calculadora de VRAM frente a las especificaciones de su GPU antes de decidirse por un tamaño de modelo.
