Chatbot v2.10 dévoilé : élever l'expérience utilisateur avec une vitesse, une évolutivité et une simplicité améliorées
J'ai reconstruit mon chatbot avec FastAPI et le traitement asynchrone, en réduisant les temps de réponse tout en simplifiant l'interface — voici comment des optimisations ciblées ont transformé l'expérience utilisateur.
Mise à jour (2026) : Ce chatbot a évolué pour devenir Sydney ! Après de nombreuses itérations — de Flask à FastAPI, de FAISS à Weaviate puis Supabase pgvector — Sydney vit désormais à /ask/ et utilise Claude avec des réponses en streaming. Les patterns FastAPI décrits ci-dessous ont été une étape vers là où nous en sommes aujourd'hui.
Article original de février 2024 conservé ci-dessous pour le contexte.
Il y a deux semaines, j'ai partagé la nouvelle de mon chatbot v2, exploitant le framework Langchain, avec FAISS comme magasin vectoriel. C'était une histoire brute sur la façon dont je me suis sorti des sables mouvants du code après des mois de travail itératif.
Bien que la version 2 ait été une amélioration significative par rapport à la version 1, elle avait encore beaucoup de problèmes qui me dérangeaient. Le plus important est probablement la performance ; plus précisément, c'est trop lent :P De plus, l'interface frontend était trop compliquée avec trop de phrases d'introduction, si bien que la boîte de chat se trouve bien en bas de l'écran.
Ce post va souligner comment la version 2.10 applique des optimisations de performance ciblées et des améliorations UX pour débloquer une expérience conversationnelle plus fluide, plus rapide et plus capable.
Transition vers FastAPI : un bond en avant en termes de performance
L'épine dorsale de la performance améliorée de la v2.10 réside dans notre passage à FastAPI. Ce framework web moderne non seulement accélère les temps de réponse mais introduit également une architecture plus robuste et évolutive.
Framework Flask de la v2
# Initialize Flask app and Langchain agent
app = Flask(__name__)
CORS(app, resources=\{r"/query_blog": {"origins": "https://www.chandlernguyen.com"\}})
app.debug = False
limiter = Limiter(app=app, key_func=get_remote_address)
Flask nous a bien servi, offrant simplicité et flexibilité. Cependant, à mesure que notre base d'utilisateurs grandissait, le besoin d'une solution plus performante est devenu évident.
Framework FastAPI de la v2.1
# FastAPI with advanced CORS and async support
# Initialize FastAPI app
app = FastAPI()
# Configure CORS for production, allowing only your frontend domain
origins = ["https://www.chandlernguyen.com"]
app.add_middleware(
CORSMiddleware,
allow_origins=origins,
# allow_origins=["*"],
allow_credentials=True,
allow_methods=["POST"],
allow_headers=["Content-Type"],
)
FastAPI améliore les performances grâce au support asynchrone.
Traitement asynchrone : des conversations plus fluides
En exploitant les fonctionnalités asynchrones de FastAPI, la v2 introduit un traitement de requêtes non-bloquant, permettant des interactions utilisateur plus fluides et plus dynamiques. Un exemple ci-dessous.
# Function to check content with OpenAI Moderation API (sensitive keys are loaded from environment variables)
async def is_flagged_by_moderation(content: str) -> bool:
openai_api_key = os.getenv('OPENAI_API_KEY')
if not openai_api_key:
logging.error("OPENAI_API_KEY not set in environment variables")
raise HTTPException(status_code=500, detail="Server configuration error")
headers = \{"Authorization": f"Bearer {openai_api_key\}"}
data = \{"input": content\}
async with httpx.AsyncClient() as client:
response = await client.post("https://api.openai.com/v1/moderations", json=data, headers=headers)
if response.status_code == 200:
response_json = response.json()
return any(result.get("flagged", False) for result in response_json.get("results", []))
else:
logging.error(f"Moderation API error: {response.status_code} - {response.text}")
return False
Améliorations de l'interface utilisateur
Le frontend de la v2.10 a été repensé pour améliorer l'attrait visuel et l'engagement des utilisateurs. En mettant l'accent sur l'accessibilité et l'expérience utilisateur, le nouveau design est plus simple et plus intuitif.
Réduction du contenu d'introduction excessif
Ce bloc de texte a maintenant disparu.
<div class="container mt-5">
<h2 style="color: #454545; text-align: center;">Welcome to My Expat Life in America Chatbot!</h2>
<h3 style="margin-top: 15px; text-align: center;">
Get Answers to Your Questions on Living, Working, and Thriving in the US
</h3>
<h4 style="margin-top: 10px; text-align: center;">Ask about:</h4>
<ul style="list-style: none; text-align: center; color: #333;">
<li>Adapting to American Culture & Lifestyle</li>
<li>Navigating US Personal Finance & Banking</li>
<li>Tips for Relocation and Settling In</li>
<li>Understanding Healthcare and Insurance</li>
<li>Getting Around - Driving and Transportation</li>
<li>Education Opportunities and Resources</li>
<li>Professional Development and Networking</li>
</ul>
<h5 style="margin-top: 10px; color: grey; text-align: center;">
I'm here to provide helpful info and insights on the expat experience. What would you like to know?
</h5>
<h6 style="margin-top: 5px; color: grey; text-align: center;">
Go ahead, ask me anything! I'll do my best to give a thoughtful response <span style="font-weight: bold; color: #007bff;">in a few seconds.</span>
</h6>
Voici le remplacement
<h2 style="color: #454545; text-align: center;">Welcome to Chandler's Expat Life Chatbot!</h2>
<p style="text-align: center; margin-bottom: 20px;">Ask me anything about expat life in the US, from culture to finance.</p>
Visuellement, voici à quoi ressemble le changement
Styles supplémentaires pour réduire les espaces blancs et améliorer la mise en page
<style>
/* Additional styles to reduce white space and improve layout */
body, html \{
height: 100%;
margin: 0;
display: flex;
flex-direction: column;
\}
.container \{
flex-grow: 1;
display: flex;
flex-direction: column;
justify-content: center; /* Center vertically in the available space */
\}
#conversation \{
height: 300px; /* Adjust based on your preference */
overflow-y: auto;
border: 1px solid #ccc; /* Add border to conversation box */
padding: 10px;
border-radius: 5px; /* Optional: round corners */
\}
</style>
Le style de la boîte #conversation avec une hauteur spécifiée et le contrôle du dépassement est particulièrement efficace pour maintenir une interface de chat propre et conviviale.
<!-- Area to display the conversation -->
<div id="conversation" aria-live="polite" class="mb-5" style="height: 300px; overflow-y: auto;"></div>
L'ajout de aria-live="polite" à la div de conversation est un ajout réfléchi pour les utilisateurs de lecteurs d'écran, leur permettant d'être informés des changements de contenu dynamique.
Auto-focus sur le champ de saisie
L'ajout de $('#user-query').focus(); à la fin des callbacks de succès et d'erreur AJAX est une fonctionnalité conviviale, garantissant que le champ de saisie est automatiquement focalisé après chaque envoi de message, permettant une expérience de chat plus fluide.
Utilisation de Langsmith pour la surveillance des performances et l'observabilité
Avec cette version 2.10, j'exploite langsmith. La configuration est assez facile et l'interface du tableau de bord est suffisamment intuitive.
Et chaque fois que je remarque qu'une certaine requête prend trop longtemps, je peux "cliquer" dessus et comprendre plus exactement quelle partie du parcours est problématique.
Le code backend complet pour la version 2.1
Comme d'habitude, j'ai partagé le code backend complet sur GitHub ici. Il se trouve dans le même dépôt que la version précédente du chatbot 2.0.
Je t'invite à essayer le chatbot :D Pose-lui n'importe quelle question sur ce que j'ai écrit au cours des 16 dernières années.
As-tu déjà essayé de construire un chatbot ou de migrer entre des frameworks ? J'adorerais entendre quelles astuces de performance ont fonctionné pour toi.
Cordialement,
Chandler
