React Tokyo LT大会「ストリームの実装」

2025年5月17日React Tokyo LT大会にて、生成AIアプリケーションなどでよく使う「ストリーム実装」について話しました。
https://react-tokyo.connpass.com/event/350715/

Transcript

1. 3FBDU
   5PLZP
   -5େձ
   ʮετϦʔϜͷ࣮૷ʯ ೥݄೔ ౔
   খᔹ
   प
   4IV
   ,PCVDIJ
2. ετϦʔϜͷ࣮૷ chain = prompt_template | model return Response(stream_with_context(chain.stream({"question": human_question, "context": context, "history": message_history})), mimetype='text/event-stream') const [response, setResponse] = useState("") const decoder = new TextDecoder(); const reader = response.body?.getReader(); if (reader) { let done = false; while (!done) { const { value, done: readerDone } = await reader.read(); done = readerDone; if (value) { const stream_text = decoder.decode(value, { stream: true }); setResponse((prevousText: string) => prevousText + stream_text); } } } ੜ੒"*νϟοτϘοτΞϓϦͳͲͰΑ͋͘ΔετϦʔϜॲཧͷ࣮૷ํ๏Λ͝঺հ͠·͢ 1ZUIPOͰॻ͍ͨόοΫΤϯυͰ͸ɺ-BOH$IBJOͳͲͷϥΠϒϥϦΛ࢖ͬͯ
   ੜ੒͞ΕͨςΩετΛগͣͭ͠ΫϥΠΞϯτʹૹ৴ ϑϩϯτΤϯυͷ3FBDUͰ͸ɺόοΫΤϯυ͔ΒͷετϦʔϜσʔλΛडऔ DIBJOTUSFBNͰੜ੒͞ΕͨԠ౴ΛɺTUSFBN@XJUI@DPOUFYUͰ ίϯςΩετ৘ใͱ߹ΘͤͯɺUFYUFWFOUTUSFBNͱ͍͏ܗࣜ Ͱฦ٫
   ͜Ε͸ɺαʔόʔ͔ΒΫϥΠΞϯτ΁σʔλΛগͣͭ͠ૹΓଓ ͚ΔͨΊͷ࢓૊Έ SFTQPOTFCPEZ HFU3FBEFS ͰετϦʔϜͷϦʔμʔΛऔಘ ͠ɺXIJMFϧʔϓͰগͣͭ͠σʔλ
   WBMVF
   ΛಡΈࠐΈ
   5FYU%FDPEFSΛ࢖ͬͯςΩετʹม׵͠ɺTFU3FTQPOTFͰঢ়ଶ Λߋ৽͍ͯ͘͜͠ͱͰɺը໘ʹϦΞϧλΠϜʹςΩετ͕දࣔ খᔹ
   प
   !TIV@LPC <div> <textarea id="answer" value={response} readOnly /> </div>