He construido un asistente de IA moderno
La mayoría de los tutoriales de IA solo muestran cómo llamar a una API. Yo quería construir una aplicación real. Utilicé HTML, CSS y JavaScript puro (vanilla).
La aplicación incluye estas características:
- Interfaz de usuario (UI) responsiva
- Modos claro y oscuro
- Respuestas en streaming
- Renderizado de Markdown
- Resaltado de sintaxis
- Historial de chat
- Manejo de errores
- Despliegue en GitHub Pages
Utilicé estas herramientas:
- HTML5 y CSS3
- JavaScript puro (vanilla)
- Marked.js
- DOMPurify
- Prism.js
- Google Generative AI SDK
Me enfoqué en la seguridad. Utilicé DOMPurify para limpiar las respuestas de la IA. Esto evita riesgos de seguridad.
Me enfoqué en la experiencia de usuario. La aplicación transmite el texto a medida que se genera. Obtienes retroalimentación inmediata. No tienes que esperar a un icono de carga.
Añadí Prism.js para los bloques de código. Esto agrega etiquetas de lenguaje y botones de copiar.
Utilicé localStorage para el historial de chat. Tus conversaciones se mantienen después de refrescar la página. Es rápido y no necesita un backend.
Añadí lógica de reintento y mensajes de error. Esto hace que la aplicación sea estable.
Los proyectos de IA te enseñan muchas habilidades:
- Integración de APIs
- Diseño de UI
- Gestión de estado
- Experiencia de usuario
Construye proyectos como este para tu portafolio. Demuestra que posees habilidades prácticas.
¿Qué función debería añadir después?
- Entrada de voz
- Carga de archivos
- Memoria
Cuéntame en los comentarios.
Source: https://dev.to/codehuntersharath/i-built-a-modern-ai-assistant-using-html-css-and-javascript-4ca8 Optional learning community: https://youtu.be/nbFKG_6DkSE