Diffuser Claude dans le navigateur avec une véritable gestion de la backpressure

Le streaming de tokens LLM est facile à réussir à 80 %. Les derniers 20 % sont l'endroit où la plupart des développeurs échouent. Les configurations naïves fonctionnent sur votre machine locale, mais échouent sur des connexions lentes ou avec des modèles rapides.

Si vous voulez un streaming de qualité production, vous devez gérer deux problèmes spécifiques.

  1. Le problème de mise en mémoire tampon (buffering) de Nginx De nombreux développeurs oublient l'en-tête X-Accel-Buffering. Sans le régler sur no, Nginx met votre flux en mémoire tampon. Votre utilisateur ne voit rien tant que la réponse entière n'est pas terminée. Cela va à l'encontre même du principe du streaming.

  2. Le problème du flux abandonné C'est l'erreur la plus coûteuse. Si un utilisateur ferme un onglet ou perd la connexion pendant que le modèle génère, le serveur continue de tourner. Votre boucle continue de récupérer des tokens auprès de Claude. Vous payez pour une sortie que personne ne voit.

La solution : les interruptions de bout en bout Vous devez lier le signal de la requête au flux Claude. Lorsque le client se déconnecte, le serveur doit arrêter la génération immédiatement.

Dans votre route Next.js, passez le signal de la requête au SDK Anthropic :

  • Utilisez { signal: request.signal } dans votre appel au SDK.
  • Ajoutez un écouteur d'événements pour le signal d'interruption (abort signal).
  • Appelez llm.abort() et controller.close() lorsqu'une interruption survient.

Cela arrête la génération et empêche votre facture de grimper.

Côté Frontend Le navigateur reçoit des chunks à des limites aléatoires. Vous devez mettre ces chunks en mémoire tampon et les diviser selon le délimiteur SSE.

  • Utilisez un AbortController dans votre appel fetch.
  • Retournez ce contrôleur à votre composant React.
  • Appelez controller.abort() dans la fonction de nettoyage (cleanup function) du composant.

Cela garantit que le signal d'interruption remonte de l'interface utilisateur jusqu'à votre serveur.

Un dernier conseil pour la performance : Les modèles rapides émettent des tokens plus rapidement que le DOM ne peut se redessiner (repaint). Mettre à jour l'état React pour chaque token provoquera des ralentissements de votre interface utilisateur. Mettez les tokens en mémoire tampon et mettez-les à jour par lots (batches). Cela permet de garder votre interface fluide.

Arrêtez de construire des flux destinés uniquement à des démos. Désactivez la mise en mémoire tampon des proxys et propagez les interruptions pour économiser de l'argent et construire des applications robustes.

Source: https://dev.to/pavelespitia/streaming-claude-to-the-browser-with-backpressure-that-actually-works-4oaf

Communauté d'apprentissage optionnelle: https://t.me/GyaanSetuAi