Streaming Claude kwenye Kivinjari kwa Backpressure Halisi

Ku-stream token za LLM ni rahisi kufanya kwa 80%. Ile 20% ya mwisho ndipo watengenezaji wengi wanapofeli. Mifumo rahisi hufanya kazi kwenye mashine yako ya ndani lakini inaharibika kwenye miunganisho ya polepole au kwa mifano (models) ya haraka.

Ikiwa unataka ku-stream kwa kiwango cha uzalishaji (production-grade), lazima ushughulikie matatizo mawili mahususi.

  1. Tatizo la Buffer la Nginx Watengenezaji wengi wanasahau header ya X-Accel-Buffering. Bila kuweka hii kuwa no, Nginx inafanya buffer mtiririko wako. Mtumiaji wako hataona kitu mpaka jibu lote liishe. Hii inaharibu lengo la ku-stream.

  2. Tatizo la Mtiririko Ulioachwa (Abandoned Stream) Hili ndilo kosa lenye gharama kubwa zaidi. Ikiwa mtumiaji anafunga tab au anapoteza muunganisho wakati model inazalisha, seva inaendelea kufanya kazi. Loop yako inaendelea kuchukua token kutoka kwa Claude. Unalipia matokeo ambayo hakuna mtu anayeyaona.

Suluhisho: Aborts za Mwisho-hadi-Mwisho (End-to-End Aborts) Lazima uunganishe ishara ya ombi (request signal) na mtiririko wa Claude. Client anapokatika muunganisho, seva lazima iache kuzalisha mara moja.

Katika route yako ya Next.js, pitisha ishara ya ombi kwenye Anthropic SDK:

  • Tumia { signal: request.signal } katika mwito wako wa SDK.
  • Ongeza event listener kwa ajili ya ishara ya abort.
  • Ita llm.abort() na controller.close() wakati abort inapotokea.

Hii inazuia uzalishaji na kuzuia bili yako isiongezeke.

Kwenye Frontend Kivinjari hupokea vipande (chunks) katika mipaka ya nasibu. Lazima uweke buffer vipande hivi na kuvigawa kwa kutumia SSE delimiter.

  • Tumia AbortController katika mwito wako wa fetch.
  • Rudisha controller hiyo kwenye React component yako.
  • Ita controller.abort() kwenye function ya cleanup ya component.

Hii inahakikisha ishara ya abort inasafiri kutoka kwenye UI hadi kwenye seva yako.

Kidokezo cha mwisho kwa ajili ya utendaji (performance): Model za haraka hutoa token haraka kuliko DOM inavyoweza kuchora upya (repaint). Kusasisha React state kwa kila token moja kutachelewesha (lag) UI yako. Weka buffer token na uzisasishe kwa makundi (batches). Hii inafanya interface yako iwe laini.

Acha kujenga mtiririko wa majaribio tu (demo-only). Zima proxy buffering na usambaze aborts ili kuokoa pesa na kujenga programu imara.

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

Jumuiya ya hiari ya kujifunza: https://t.me/GyaanSetuAi