Desarrollar una aplicación de IA en un solo archivo HTML

¿Se puede construir una aplicación de IA en un solo archivo HTML? ChatJPT demuestra que sí. El archivo tiene unas 19.000 líneas y pesa algo más de un megabyte. Lo contiene todo: la interfaz, los estilos, la lógica y las traducciones. Y aun así dialoga con 16 proveedores de IA y genera imágenes, vídeos y voces. Así está construido.

¿Por qué una aplicación de IA en un solo archivo HTML?

Un solo archivo es, ante todo, una instalación que no lo es. Lo descarga, lo abre en Chrome, Edge, Firefox o Safari, y ya está. No hay dependencias que instalar, ni compilación, ni servidor que arrancar.

Esta elección también influye en el desarrollo. Cada cambio se comprueba recargando la página. Además, la distribución es trivial: una versión es un archivo, cuyo nombre lleva el número, como ChatJPT_1_35_2.html. Este ritmo explica en parte la historia de ChatJPT y sus 47 versiones en cinco meses.

JavaScript puro, sin framework

El archivo sigue una organización estable: cabecera y estilos CSS, después la interfaz y después un único script principal. No hay React, ni Vue, ni herramienta de compilación. Funciones JavaScript clásicas gestionan cada etapa: el envío, el streaming de la respuesta, el renderizado, la persistencia.

Las funciones de los proveedores se describen en tablas de configuración en lugar de en código disperso. Por ejemplo, una tabla enumera los modelos de imagen de cada proveedor. La interfaz lee esa tabla: si un proveedor figura en ella, la pestaña Imagen se activa sola. Añadir un modelo suele consistir, por tanto, en añadir una línea.

Los colores pasan por variables CSS, lo que permite el tema claro y el tema oscuro. Por último, cada texto visible existe en tres idiomas: francés, inglés y español.

Llamar a las API directamente desde el navegador

Una aplicación de IA en un solo archivo HTML no tiene servidor. Por eso el navegador llama directamente a la API de cada proveedor. Esta restricción tiene una consecuencia importante: el CORS.

Un navegador impide por defecto que una página lea la respuesta de otro dominio, salvo que ese dominio lo autorice. Este mecanismo se explica en MDN. Antes de integrar un proveedor, ChatJPT pasa por tanto una prueba: una petición real desde Chrome, con el archivo abierto en local. Si el proveedor bloquea, no se integra.

Esta prueba ya ha descartado varios servicios. Por ejemplo, la API directa de Z.ai bloquea el navegador; sus modelos GLM pasan, por tanto, por Alibaba, que sí lo autoriza. Del mismo modo, el vídeo de Alibaba solo se ofrece en las regiones donde el seguimiento de tareas está abierto al navegador.

Una seguridad estricta

Mostrar texto producido por una IA es arriesgado: una respuesta podría contener código malicioso. Por eso ChatJPT aplica varias protecciones:

• Saneamiento: cada respuesta se transforma en HTML y después se limpia con DOMPurify antes de mostrarse.
• Integridad de las bibliotecas: las tres bibliotecas externas (DOMPurify, PDF.js, highlight.js) se cargan con una huella de verificación. Si el archivo recibido no coincide, se rechaza.
• Vista previa aislada: cuando la IA genera una página web, la vista previa se abre en un marco aislado, sin acceso al almacenamiento de la aplicación. Sus claves quedan fuera de su alcance.
• Claves cifradas: las claves API se cifran en el almacenamiento del navegador. Este cifrado impide una lectura directa; no sustituye a la protección de su ordenador.

Streaming y formatos distintos

Cada proveedor tiene su propio formato de respuesta. Sin embargo, la visualización debe ser la misma: el texto que se escribe en directo, el bloque de razonamiento desplegable, las fuentes, los gráficos. ChatJPT resuelve este problema con una función de llamada por familia de API y un lector de flujo que traduce cada formato a una forma común. Después, una única función de renderizado toma el relevo.

Muchos proveedores siguen el formato de OpenAI. Para ellos, una línea en una tabla basta para declarar la dirección de la API; el resto es genérico.

Probar sin servidor

El proyecto no tiene cadena de compilación. Por eso las comprobaciones se hacen en un navegador real. Unos escenarios automatizados simulan las respuestas de los proveedores para comprobar la interfaz; después, cada función se prueba con una clave real. Cada nueva versión comprueba también los tres idiomas y los dos temas.

Desarrollado con IA

ChatJPT se desarrolla con la ayuda de un asistente de programación, Claude Code. El desarrollador decide las funciones, valida cada elección y prueba en condiciones reales; el asistente escribe y comprueba el código. Este método enlaza con el modo Vibe Coder de ChatJPT, pensado para ayudar a los principiantes a crear sin saber programar.

En resumen

Una aplicación de IA en un solo archivo HTML impone reglas: sin servidor, proveedores abiertos al navegador, una seguridad sin concesiones. A cambio, sigue siendo ligera y transparente. Estas elecciones no son solo técnicas; se derivan de la filosofía de ChatJPT.