Mon voyage de 4 semaines : des améliorations frontend aux galères Docker et aux percées
J'ai reconstruit le frontend de mon site avec l'IA, amélioré l'intelligence de mon chatbot et découvert le déploiement continu — tout ça parce que Docker refusait de coopérer.
Mise à jour (2026) : Le frontend WordPress et le déploiement Docker décrits ci-dessous appartiennent à l'histoire ancienne. Le site tourne maintenant sur Next.js, et Sydney a été reconstruit de zéro avec Supabase pgvector et Claude. Je code toujours, j'apprends toujours.
Article original de mars 2024 conservé ci-dessous pour le contexte.
Je n'ai publié aucun article au cours des 4 dernières semaines. Tu te demandes peut-être ce qui s'est passé. Est-ce que j'ai été paresseux et arrêté d'apprendre ? Eh bien, en quelque sorte — j'ai fait un voyage avec ma famille et d'autres amis pendant un week-end.
L'article d'aujourd'hui sera court. Je vais partager ce que j'ai appris au cours des 4 dernières semaines. Mais qui s'en soucie ? Eh bien, il est vrai que personne ne s'en souciera, donc ce post est principalement pour moi afin de suivre mes progrès et j'imagine pour une autre personne (qui que tu sois :D.)
TL;DR : L'apprentissage "juste à temps" est réel et je le vis.
Amélioration du frontend
Si tu es venu sur mon site il y a quelques mois, tu remarqueras que maintenant, le site a l'air différent, plus moderne et plus facile à naviguer (j'espère). J'ai utilisé Github Copilot et ChatGPT4 pour demander à la machine d'aider à améliorer l'apparence et la convivialité du site. Le résultat est plus de 300 lignes de code CSS, dont la plupart je ne sais pas comment les écrire. Voici un aperçu :
/* Defining CSS variables for common values */
:root \{
--main-font: 'Poppins', sans-serif; /* Main font for the website */
--primary-color: #003366; /* Primary color for text */
--accent-color: #4da6ff; /* Accent color for links and buttons */
--background-color: #FAFAFA; /* Background color for the body and some elements */
--text-color: #333333; /* Main text color */
--hover-color: #4da6ff; /* Color for hover effects */
\}
/* Applying the main font and color to various elements */
body, button, input, select, textarea, h1, h2, h3, h4, h5, h6, .nav-menu, .nav-menu a, .widget-title, .page-numbers.current,
#primary-menu .menu-item a, #primary-menu .sub-menu .menu-item a, .site-title a, .primary-navigation a, .widgettitle, .simpletoc-title \{
font-family: var(--main-font);
color: var(--text-color);
\}
De plus, quand je visite la page du chatbot, l'apparence générale est similaire au reste du site. La "boîte" pour saisir ta question est là, en haut, au-dessus de la ligne de flottaison, et la boîte de conversation continue de s'agrandir au fur et à mesure que la conversation s'étend. Je ne pouvais pas croire que je ne l'avais pas fait plus tôt. Et désolé à tous ceux qui ont visité cette page avant.
Sydney le chatbot a un nouveau magasin vectoriel et une meilleure traduction de requêtes
Tout le processus, de l'exportation du contenu publié depuis WordPress au nettoyage HTML, au découpage, à la génération d'embeddings et à leur stockage dans un magasin vectoriel, est étonnamment facile et rapide une fois qu'on l'a fait plusieurs fois.
J'ai remplacé le magasin vectoriel (toujours avec FAISS), avec une méthodologie de découpage différente (cette fois avec une taille de chunk légèrement plus grande et un chevauchement.)
La requête de l'utilisateur est transformée à l'aide du récupérateur multi-requêtes de Langchain. J'ai trouvé que les réponses du chatbot utilisant ce récupérateur sont plus complètes et nuancées que celles du précédent récupérateur.
# Set up vector store and llm
embeddings = OpenAIEmbeddings()
vectorstore = FAISS.load_local("faiss_index", embeddings)
llm = ChatOpenAI(model_name="gpt-3.5-turbo-0125", temperature=0)
# Set up retriever
retriever_from_llm = MultiQueryRetriever.from_llm(
retriever=vectorstore.as_retriever(), llm=llm
)
La galère avec le push de l'image Docker vers GCP Artifact s'est avérée être une bénédiction
Pour une raison étrange, j'ai commencé à avoir des problèmes pour pousser l'image Docker vers GCP Artifact il y a environ 1 mois. J'ai essayé de nombreuses façons de résoudre le problème, sans succès. Les mois précédents s'étaient complètement bien passés.
À cause de ça, j'ai été forcé de réfléchir à une autre façon de déployer l'application, une qui n'implique pas de pousser l'image vers Artifact. C'est ainsi que j'ai découvert le déploiement continu sur GCP Cloud Run à partir du dépôt sur Github.
En même temps, j'ai regardé un tutoriel en ligne et ils utilisaient poetry. Je n'avais aucune idée de ce que c'était, j'ai donc demandé à chatGPT de me l'expliquer. Il s'est avéré être un excellent outil pour gérer les dépendances, donc je l'utilise maintenant :). Grâce à cette exploration, j'ai aussi appris davantage sur la configuration d'un environnement virtuel pour chaque projet, et j'ai commencé à l'utiliser pour chaque projet.
Ainsi, maintenant avec la configuration d'un nouvel environnement virtuel, l'utilisation de poetry pour gérer les dépendances et l'exploitation du déploiement continu depuis GCP Cloud Run, mon workflow est beaucoup plus fluide. Déployer une nouvelle mise à jour du chatbot est également beaucoup plus facile et plus rapide, une fois que je l'ai soigneusement testé localement.
Sur quoi est-ce que je travaille maintenant ?
En ce moment, je travaille sur la construction et le déploiement d'un assistant de recherche utilisant Langchain. Le code open-source de Langchain et GPT-Researcher (merci à vous deux !) est suffisamment clair pour que je puisse le faire fonctionner localement. Cependant, le déployer pour qu'il fonctionne dans un environnement de production s'avère assez difficile, surtout la partie sur le scraping de contenu. Spécifiquement, l'utilisation du CPU est bien trop élevée quand je teste l'application dans un Docker Container localement.
J'ai aussi quelques idées sur la façon d'améliorer l'approche de l'assistant de recherche partagée par GPT-researcher et Langchain, mais j'ai besoin d'y travailler pour les concrétiser. Je partagerai davantage quand elles seront prêtes.
Tes réflexions ?
Chaque ligne de code, chaque heure de débogage et chaque percée a été un tremplin. Et bien que ce voyage soit le mien, j'espère qu'il éveille des idées, offre des insights, ou simplement divertit. Quels défis as-tu rencontrés dans tes aventures technologiques ? Partage tes histoires ou questions ci-dessous — naviguons ensemble dans ces eaux numériques.
Cordialement,
Chandler
P.S : si tu construis une application RAG, je trouve la série "RAG from scratch" de Langchain super utile.






