J'ai construit un assistant IA moderne
La plupart des tutoriels d'IA montrent seulement comment appeler une API. Je voulais construire une véritable application. J'ai utilisé du HTML, du CSS et du JavaScript vanilla.
L'application inclut ces fonctionnalités :
- Interface utilisateur responsive
- Modes sombre et clair
- Réponses en streaming
- Rendu Markdown
- Coloration syntaxique
- Historique de chat
- Gestion des erreurs
- Déploiement sur GitHub Pages
J'ai utilisé ces outils :
- HTML5 et CSS3
- JavaScript vanilla
- Marked.js
- DOMPurify
- Prism.js
- Google Generative AI SDK
Je me suis concentré sur la sécurité. J'ai utilisé DOMPurify pour nettoyer les réponses de l'IA. Cela permet de prévenir les risques de sécurité.
Je me suis concentré sur l'expérience utilisateur. L'application diffuse le texte au fur et à mesure de sa génération. Vous obtenez un retour immédiat. Vous n'avez pas à attendre une icône de chargement.
J'ai ajouté Prism.js pour les blocs de code. Cela ajoute des étiquettes de langage et des boutons de copie.
J'ai utilisé localStorage pour l'historique de chat. Vos conversations sont conservées après avoir rafraîchi la page. C'est rapide et cela ne nécessite aucun backend.
J'ai ajouté une logique de réessai et des messages d'erreur. Cela rend l'application stable.
Les projets d'IA vous enseignent de nombreuses compétences :
- Intégration d'API
- Design d'interface (UI)
- Gestion d'état
- Expérience utilisateur
Construisez des projets comme celui-ci pour votre portfolio. Cela montre que vous maîtrisez des compétences pratiques.
Quelle fonctionnalité devrais-je ajouter ensuite ?
- Entrée vocale
- Téléchargement de fichiers
- Mémoire
Dites-le-moi dans les commentaires.
Source: https://dev.to/codehuntersharath/i-built-a-modern-ai-assistant-using-html-css-and-javascript-4ca8 Communauté d'apprentissage optionnelle : https://youtu.be/nbFKG_6DkSE