Rôle : Ingénierie Full-Stack (Création du système complet à partir de zéro, y compris l'Architecture, les API Backend, la Gestion d'État, l'UI/UX et l'Intégration Audio)
Résultat Clé : Un chatbot V2 immersif et contextuel agissant comme le nœud interactif central du portfolio cyberpunk
Résumé : Un système de chatbot V2 profondément intégré pour le Portfolio : Cyberpunk, conçu comme une évolution majeure par rapport au chatbot V1 original (Portfolio : Glass). Il simule un terminal IA nommé "Oz" comprenant un doublage en temps réel, l'exécution dynamique d'outils MCP via les indicateurs ToolBadge, des commandes système et une gestion active des limites de contexte. Il agit comme un agent entièrement autonome représentant Franz.
Le Problème
Défi : Le portfolio cyberpunk nécessitait un chatbot qui donne l'impression d'être un terminal intégré ou un assistant IA plutôt qu'un gadget ajouté après coup. Contrairement au chatbot Glass V1, qui était une interface conversationnelle standard, cette itération V2 devait traiter de multiples commandes système, rendre visuellement les appels d'outils LLM (comme la navigation ou la lecture de musique), jouer un doublage IA synchronisé sans chevauchement audio et gérer efficacement les fenêtres de contexte.
Public : Recruteurs techniques, développeurs et visiteurs explorant le portfolio.
Contraintes : Une gestion d'état complexe impliquant la lecture de sons, les changements de mise en page, la frappe de l'utilisateur, le rendu d'appels d'outils asynchrones et les contraintes d'API (gestion des limites de tokens) exigeait une planification architecturale minutieuse sans compromettre les animations à 60fps.
Approche & Décisions
Architecture : Séparation des composants en fonctionnalités modulaires : ChatHeader, ChatInput, ChatMessage, ChatHistory, DubPopup et ToolBadge. Utilisation de useChatbotAudio pour orchestrer les sons de manière sécurisée et éviter le spam.
Décisions Clés :
Exécution d'Outils (ToolBadge) : Pour rendre les actions de l'IA visibles et transparentes, j'ai construit le composant ToolBadge. Lorsque l'IA exécute un outil MCP (par ex., changer de musique, télécharger un CV, changer le thème ou traduire le site), un badge de terminal élégant et animé s'affiche dans le flux de discussion détaillant l'action. Cela sépare fondamentalement le texte normal des opérations système.
Identité & Comportement Autonome : L'IA opère sous le personnage d'"Oz", agissant comme un assistant IA professionnel. Elle gère dynamiquement des flux de travail complexes tels que les Demandes de Prix (affichant des tableaux de prix internes masqués) et le Routage du Formulaire de Contact (où Oz rédige des e-mails pour les utilisateurs mais les oblige à passer par une boucle de révision et d'approbation stricte de l'interface utilisateur).
Moteur LLM & Architecture de Secours : Construction d'une chaîne de secours backend résiliente. Elle traite nativement jusqu'à 1 million de tokens de contexte avec une architecture d'attention hybride pour prendre en charge la rétention de longs contextes. Les requêtes basculent gracieusement des modèles primaires rapides vers des réseaux secondaires robustes en cas de limites de débit ou de pannes temporaires.
RAG & Gestion du Contexte : Utilise RAG (query_portfolio_data) pour récupérer des études de cas MDX entières lorsque les utilisateurs posent des questions techniques approfondies. Une fenêtre glissante adaptative supprime les messages les plus anciens lorsqu'ils atteignent 90 à 98 % de la capacité de contexte.
Verrouillage de Modération : Implémentation d'un système automatisé de lockdown où Oz peut bannir temporairement des utilisateurs (délais courts, moyens ou longs) pour langage abusif ou spam, entièrement synchronisé avec les cookies côté serveur.
Compromis : Au lieu d'utiliser Redux pour l'état complexe, je me suis appuyé sur React Context et useSyncExternalStore pour la gestion localisée de l'état, ce qui a optimisé la taille du bundle mais a nécessité une conception précise des hooks pour éviter les rendus inutiles.
Résultats & Impact Clés
Résultat : Un assistant saisissant et hautement fonctionnel qui renforce la narration cyberpunk tout en offrant une véritable utilité (comme répondre aux questions, contrôler la musique et présenter les compétences).
Impact : Démontre des modèles Next.js avancés, une intégration système via MCP, des hooks personnalisés et une coordination audiovisuelle précise.
Métrique
Résultat
Performance
Optimisée via le chargement différé (lazy loading) & les refs stricts
Interactivité
Audio, exécution d'outils, commandes terminal
Résilience
Taille du contexte en direct & détection de dégradation d'API
Plongée Technique Profonde
Détails Notables :
Suit les diagnostics en direct (temps de trajet aller-retour, modèles actifs, tokens) directement dans l'interface utilisateur.
L'Affaire de l'Appel d'Outil : Le composant ToolBadge.tsx est déclenché chaque fois que l'IA renvoie un objet action plutôt que du texte simple. Il analyse les paramètres de l'outil (par ex., { type: "toggle_theme", theme: "dark" }) et rend un badge futuriste brillant résumant la tâche exécutée au sein du flux de discussion.
TypewriterMarkdown personnalisé pour le rendu sécurisé du markdown avec un effet de machine à écrire style hacker.
Le visualiseur DubPopup reflète les états de « prise de parole de l'IA » de manière asynchrone en fonction des actions de l'API.
Vérification : Construction de limites robustes (états de verrouillage, protection contre le spam) pour gérer gracieusement l'utilisation abusive ou la limitation de débit, reflétant les configurations du serveur directement dans l'interface utilisateur.
Qualité du Code : Utilisation intensive des interfaces TypeScript pour ToolDetail, ChatSession, et vérifications strictes des valeurs nulles sur les références et les interactions de disposition visuelle.
Réflexions
Autrement : J'aurais pu découpler le moteur du lecteur audio vers un worker générique pour éliminer complètement toute saccade du thread principal lors du décodage de longs fichiers audio sur des appareils mobiles.
Succès : Connexion transparente du contexte useMusicPlayer avec les commandes de l'IA pour que l'assistant puisse véritablement "agir" au sein du site Web, franchissant la frontière entre le chat et la navigation sur le site.
Leçons : Équilibrer les effets cyberpunk "cool" (machine à écrire, outils glitchés) avec l'accessibilité nécessite des tests constants. La conception de fenêtres de discussion flottantes adaptées aux mobiles avec un positionnement fixe et un verrouillage du défilement dépend fortement des particularités du navigateur.
Mes Contributions
Architecture Système : Conception du moteur d'état du chat, de la logique d'interrogation pour les diagnostics en direct et de l'historique de stockage des sessions.
Ingénierie Audio : Programmation du doublage basé sur des séquences et des hooks d'effets sonores (useChatbotAudio).
UI/UX : Style des composants (ChatSettings, ChatInput) à l'aide de Tailwind et Framer Motion pour une apparence de terminal authentique.
Intégration : Mappage des sorties de l'IA sur des outils exploitables (ToolBadge) affectant l'application plus large (par exemple, changer de langue, télécharger le CV, basculer le thème).
Architecture du Projet
Le répertoire components/chatbot/ orchestre la logique de l'assistant :
Moteur Principal : Chatbot.tsx agit comme le contrôleur principal.
Composants de l'UI : ChatMessage.tsx, ChatInput.tsx, ChatHistory.tsx.
Caractéristiques Spécialisées : TypewriterMarkdown.tsx pour l'aspect visuel, DubPopup.tsx pour la présence audio, et ToolBadge.tsx pour les résumés d'exécution d'outils.
Intégrations : Intégration avec les fournisseurs globaux (useMusicPlayer, useTheme, useLocale).
Aperçu en Direct
Lien de Démonstration en Direct : Découvrez le chatbot directement sur le site du portfolio en direct franzdomingo.dev.
Fonctionnalités à essayer : Tapez /help pour les commandes, ou demandez-lui de "Play music" (Jouer de la musique) pour voir le lecteur de musique global se déclencher.
