การสตรีม LLM แบบเรียลไทม์ใน Next.js โดยใช้เหตุการณ์ที่เซิร์ฟเวอร์ส่ง (SSE)

นอกจากนี้ ให้สร้างไฟล์ชื่อ 620 ด้วยรหัสต่อไปนี้ใน 639 ไดเรกทอรี การเปลี่ยนแปลงจากตัวจัดการเส้นทางสตรีมมิ่งเริ่มต้นที่คุณสร้างขึ้นได้รับการเน้นไว้ด้านล่าง:

// File: app/api/stream/completion/chat/route.ts
 
// Prevents this route's response from being cached on Vercel
export const dynamic = "force-dynamic";
 
+ import {
+ type ConversationMessage,
+ chatCompletionModel,
+ } from "@/app/lib/chatCompletionModel";
 
export async function POST(request: Request) {
+ // Obtain the conversation messages from request's body
+ const { messages = [] } = await request.json();
 const encoder = new TextEncoder();
 // Create a streaming response
 const customReadable = new ReadableStream({
 async start(controller) {
+ // Generate a streaming response from OpenAI with LangChain
+ await chatCompletionModel(controller, encoder).invoke(
+ messages.map((i: ConversationMessage) => [i["role"], i["content"]])
+ );
 },
 });
 // Return the stream response and keep the connection alive
 return new Response(customReadable, {
 // Set the headers for Server-Sent Events (SSE)
 headers: {
 Connection: "keep-alive",
 "Content-Encoding": "none",
 "Cache-Control": "no-cache, no-transform",
 "Content-Type": "text/event-stream; charset=utf-8",
 },
 });
}

นอกเหนือจากสิ่งที่คุณทำก่อนหน้านี้เพื่อสร้างจุดสิ้นสุดการสตรีมใน Next.js แล้ว การเพิ่มโค้ดด้านบนยังทำสิ่งต่อไปนี้:

• นำเข้า 645 ฟังก์ชั่นและ 651 คำจำกัดความของประเภท
• แยกข้อความในการสนทนาออกจากเนื้อหาคำขอโดยใช้ 665 .
• ภายใน 672 วิธีการของ ReadableStream 683 ฟังก์ชันถูกเรียกใช้แบบอะซิงโครนัสหลังจากอาร์เรย์ข้อความที่แปลงแล้ว แต่ละข้อความจะถูกแปลงเป็นอาร์เรย์ที่มีบทบาทและเนื้อหาของข้อความ ฟังก์ชันนี้สร้างการตอบสนองแบบสตรีมจาก OpenAI ด้วย LangChain

หากต้องการแคชประวัติการแชทด้วย Upstash ให้นำเข้าไคลเอ็นต์แคช Upstash Redis ลงใน 698 ฟังก์ชันดังต่อไปนี้:

+ import cache from '@/app/lib/upstashCache';
import { ChatOpenAI } from "@langchain/openai";
 
export type ConversationMessage = {
 role: string;
 content: string;
};
 
export type ConversationMessages = ConversationMessage[];
 
export const chatCompletionModel = (
 controller: ReadableStreamDefaultController,
 encoder: TextEncoder
) =>
 new ChatOpenAI({
+ cache,
 streaming: true,
 temperature: 0.9,
 callbacks: [
 {
 handleLLMNewToken(token) {
 controller.enqueue(encoder.encode(token));
 },
 async handleLLMEnd(output) {
 console.log(output.generations[0][0].text);
 controller.close();
 },
 },
 ],
 });

ด้วยการเปลี่ยนแปลงเพียงเล็กน้อย คุณได้เปิดใช้งานการแคชประวัติการแชททั้งหมดด้วย Upstash

ตอนนี้ เรามาต่อกันที่การสร้างส่วนประกอบ React ฝั่งไคลเอ็นต์เพื่อใช้จุดสิ้นสุดการสตรีม

ตั้งค่าส่วนหน้า Next.js เพื่อฟังเหตุการณ์ที่เซิร์ฟเวอร์ส่ง

ในส่วนนี้ คุณจะได้เรียนรู้วิธีตั้งค่าผู้ฟังขั้นต่ำสำหรับข้อความ API เหตุการณ์ที่เซิร์ฟเวอร์ส่ง และวิธีการจัดการสถานะของข้อความที่แลกเปลี่ยนระหว่างผู้ใช้และ AI

การฟัง API เหตุการณ์ที่เซิร์ฟเวอร์ส่งใน React

หากต้องการฟัง SSE API ในส่วนประกอบฝั่งไคลเอ็นต์ของเราใน React คุณจะต้องเริ่มต้นคำขอ POST ไปยังเส้นทาง API ที่ระบุ เมื่อได้รับการตอบกลับ คุณจะต้องถอดรหัสข้อมูลที่เข้ามาเป็นสตริงโดยใช้ 703 และอ่านข้อมูลจากสตรีมอย่างต่อเนื่อง

"use client";
 
export default function () {
 
 const obtainAPIResponse = async (apiRoute: string, apiData: any) => {
 // Initiate the first call to connect to SSE API
 const apiResponse = await fetch(apiRoute, {
 method: "POST",
 headers: {
 "Content-Type": "text/event-stream",
 },
 body: JSON.stringify(apiData),
 });
 
 if (!apiResponse.body) return;
 
 // To decode incoming data as a string
 const reader = apiResponse.body
 .pipeThrough(new TextDecoderStream())
 .getReader();
 
 while (true) {
 const { value, done } = await reader.read();
 if (done) {
 break;
 }
 if (value) {
 // Do something
 }
 }
 };
 
 return <></>
}

การจัดการสถานะของการสนทนาใน React

ในการจัดการสถานะของการสนทนาระหว่างผู้ใช้และแชทบอท คุณสามารถใช้ตัวแปรสถานะได้ คุณจะต้องอัปเดตตัวแปรสถานะ 715 และ 724 เพื่อจัดเก็บประวัติการสนทนาและข้อความล่าสุดตามลำดับ ด้วยการอัปเดตตัวแปรสถานะเหล่านี้ภายในลูปที่ประมวลผลข้อมูลขาเข้าจาก SSE API คุณสามารถรับประกันการอัปเดตแบบเรียลไทม์ของการแสดงการสนทนา การเพิ่มโค้ดเพื่อให้บรรลุสิ่งเดียวกันมีดังนี้:

"use client";
 
+ import { useEffect, useState } from "react";
+ import { ConversationMessages } from "@/app/lib/chatCompletionModel";
 
export default function () {
+ const [latestMessage, setLatestMessage] = useState<string>("");
+ const [messages, setMessages] = useState<ConversationMessages>([]);
 
 const obtainAPIResponse = async (apiRoute: string, apiData: any) => {
 // Initiate the first call to connect to SSE API
 const apiResponse = await fetch(apiRoute, {
 method: "POST",
 headers: {
 "Content-Type": "text/event-stream",
 },
 body: JSON.stringify(apiData),
 });
 
 if (!apiResponse.body) return;
 
 // To decode incoming data as a string
 const reader = apiResponse.body
 .pipeThrough(new TextDecoderStream())
 .getReader();
 
+ let incomingMessage = "";
 
 while (true) {
 const { value, done } = await reader.read();
 if (done) {
+ // Insert the response received into the messages state
+ setMessages((messages) => [
+ ...messages,
+ { role: "assistant", content: incomingMessage },
+ ]);
+ // Reset the latest message's state received 
+ setLatestMessage("");
 break;
 }
 if (value) {
+ // Append the incoming data to latest message's value
+ incomingMessage += value;
+ setLatestMessage(incomingMessage);
 }
 }
 };
 
 return <></>
}

การเพิ่มโค้ดด้านบนมีดังต่อไปนี้:

• มีการประกาศตัวแปรสถานะเพื่อจัดเก็บสตรีมข้อมูลขาเข้าที่ได้รับจาก SSE API
• เมื่อได้รับข้อความที่สมบูรณ์ (ระบุโดย 737 หากเป็นจริง) ข้อความที่ได้รับล่าสุดจะถูกเพิ่มไปที่ 747 อาร์เรย์ของรัฐ ข้อความนี้จัดรูปแบบด้วยบทบาทของผู้ช่วย เพื่อแยกความแตกต่างจากข้อความของผู้ใช้ นอกจากนี้ สถานะข้อความล่าสุดจะถูกรีเซ็ตเป็นสตริงว่างเพื่อเตรียมพร้อมสำหรับข้อความขาเข้าถัดไป
• เนื่องจากข้อมูลได้รับเพิ่มขึ้นเรื่อยๆ (ยังไม่สร้างข้อความที่สมบูรณ์) ข้อมูลจึงถูกผนวกเข้ากับ 751 ตัวแปร
• สถานะข้อความล่าสุดได้รับการอัปเดตด้วยข้อมูลขาเข้าที่ต่อกัน ทำให้มั่นใจได้ว่าจะอัปเดตแบบเรียลไทม์เมื่อมีข้อมูลใหม่เข้ามา

เยี่ยมมาก! ด้วยปฏิกิริยา 765 และ 770 ตัวแปร ตอนนี้คุณสามารถสร้างอินเทอร์เฟซผู้ใช้แบบไดนามิกที่แสดงถึงข้อความที่แลกเปลี่ยนในการสนทนาและการตอบกลับที่ AI สร้างขึ้นล่าสุด

นั่นเป็นการเรียนรู้มากมาย! คุณทำเสร็จแล้วตอนนี้ ✨

ปรับใช้กับ Vercel

ขณะนี้พื้นที่เก็บข้อมูลพร้อมที่จะปรับใช้กับ Vercel แล้ว ใช้ขั้นตอนต่อไปนี้เพื่อปรับใช้:

• เริ่มต้นด้วยการสร้างพื้นที่เก็บข้อมูล GitHub ที่มีโค้ดของแอปของคุณ
• จากนั้น ไปที่แดชบอร์ด Vercel และสร้างโครงการใหม่ .
• เชื่อมโยงโปรเจ็กต์ใหม่กับที่เก็บ GitHub ที่คุณเพิ่งสร้างขึ้น
• ในการตั้งค่า ให้อัปเดต ตัวแปรสภาพแวดล้อม เพื่อให้ตรงกับที่อยู่ใน 788 ในพื้นที่ของคุณ ไฟล์
• ปรับใช้! 🚀

ข้อมูลเพิ่มเติม

หากต้องการข้อมูลเชิงลึกโดยละเอียดเพิ่มเติม โปรดสำรวจข้อมูลอ้างอิงที่อ้างถึงในโพสต์นี้

• พื้นที่เก็บข้อมูล GitHub
• กิจกรรมที่เซิร์ฟเวอร์ส่ง
• สตรีมมิ่ง Next.js
• แคชเลเยอร์สำหรับ LLM