Computer >> Hướng Dẫn Máy Tính >  >> Lập Trình >> Redis

Truyền phát LLM thời gian thực trong Next.js bằng cách sử dụng sự kiện do máy chủ gửi (SSE)

Các ứng dụng hỗ trợ AI phản hồi nhanh chóng nâng cao trải nghiệm người dùng bằng cách khiến họ cảm thấy được nghe và nhìn ngay lập tức. Với tính năng phát trực tuyến, bạn có thể tạo các chatbot như vậy để giải quyết ngay các truy vấn hoặc đưa ra các đề xuất được cá nhân hóa trong thời gian thực. Vấn đề không chỉ là tốc độ mà còn là việc đáp ứng kịp thời nhu cầu của người dùng, nâng cao giá trị cảm nhận của nó.

Truyền phát liên quan đến việc gửi dữ liệu theo từng đoạn nhỏ, liên tục thay vì theo một khối lớn. Trong bối cảnh các ứng dụng AI, như chatbot hoặc hệ thống đề xuất, phát trực tuyến có nghĩa là gửi một phần phản hồi cho người dùng ngay khi có, thay vì chờ biên dịch và gửi toàn bộ phản hồi cùng một lúc. Cách tiếp cận này đảm bảo rằng người dùng nhận được phản hồi hoặc thông tin ngay lập tức, tạo ra trải nghiệm người dùng năng động và phản hồi nhanh hơn.

Trong hướng dẫn này, bạn sẽ tìm hiểu cách tận dụng Sự kiện do máy chủ gửi (SSE) để triển khai phát trực tuyến trong các điểm cuối Next.js bằng mô hình ngôn ngữ của LangChain và OpenAI. Hơn nữa, bạn sẽ tìm hiểu cách lưu vào bộ nhớ đệm các phản hồi phát trực tuyến bằng Upstash.

Điều kiện tiên quyết

Bạn sẽ cần những thứ sau:

  • Node.js 18 trở lên
  • Tài khoản OpenAI
  • Tài khoản Upstash
  • Tài khoản Vercel

Ngăn xếp công nghệ

Công nghệ Mô tả Nền tảng cơ sở dữ liệu UpstashServerless. Bạn sẽ sử dụng Upstash Redis để lưu vào bộ nhớ đệm các phản hồi API OpenAI. Phòng thí nghiệm nghiên cứu trí tuệ nhân tạo OpenAIan tập trung vào phát triển các công nghệ AI tiên tiến. LangChainFramework để phát triển các ứng dụng được hỗ trợ bởi các mô hình ngôn ngữ.Next.jsThe React Framework cho Web.VercelMột nền tảng đám mây để triển khai và mở rộng quy mô các ứng dụng web.

Tạo mã thông báo OpenAI

Sử dụng API OpenAI, bạn có thể tạo phản hồi chatbot bằng AI. Mọi yêu cầu đối với API OpenAI đều yêu cầu mã thông báo ủy quyền. Để nhận mã thông báo, hãy điều hướng đến Khóa API trong tài khoản OpenAI của bạn và nhấp vào Tạo khóa bí mật mới nút. Sao chép và lưu trữ an toàn mã thông báo này để sử dụng sau dưới dạng OPENAI_API_KEY biến môi trường.

Thiết lập Upstash Redis

Khi bạn đã tạo tài khoản Upstash và đăng nhập, bạn sẽ chuyển tới tab Redis và tạo cơ sở dữ liệu.

Truyền phát LLM thời gian thực trong Next.js bằng cách sử dụng sự kiện do máy chủ gửi (SSE)

Truyền phát LLM thời gian thực trong Next.js bằng cách sử dụng sự kiện do máy chủ gửi (SSE)

Cuộn xuống cho đến khi bạn tìm thấy phần REST API và chọn .env nút. Sao chép nội dung và lưu ở nơi an toàn.

Truyền phát LLM thời gian thực trong Next.js bằng cách sử dụng sự kiện do máy chủ gửi (SSE)

Tạo ứng dụng Next.js mới

Hãy bắt đầu bằng cách tạo một dự án Next.js mới. Mở terminal của bạn và chạy lệnh sau:

npx create-next-app@latest my-app

Khi được nhắc, hãy chọn:

  • Yes khi được nhắc sử dụng TypeScript.
  • No khi được nhắc sử dụng ESLint.
  • Yes khi được nhắc sử dụng CSS Tailwind.
  • No khi được nhắc sử dụng src/ thư mục.
  • Yes khi được nhắc sử dụng Bộ định tuyến ứng dụng.
  • No khi được nhắc tùy chỉnh bí danh nhập mặc định (@/* ).

Sau khi hoàn tất, hãy chuyển vào thư mục dự án và khởi động ứng dụng ở chế độ phát triển bằng cách thực hiện lệnh sau:

cd my-app
npm run dev

Ứng dụng phải chạy trên localhost:3000. Dừng máy chủ phát triển để cài đặt các phần phụ thuộc LangChain trong ứng dụng bằng cách thực hiện lệnh sau:

npm install @langchain/openai @langchain/community

Lệnh cài đặt thư viện sau:

  • @langchain/openai :Gói LangChain để giao tiếp với loạt mô hình OpenAI.
  • @langchain/community :Bộ sưu tập các tiện ích tích hợp của bên thứ ba dành cho plug-n-play với lõi LangChain.

Bây giờ, hãy tạo một .env tập tin ở thư mục gốc của dự án của bạn. Bạn sẽ thêm OPENAI_API_KEY bạn đã có được trước đó.

Nó sẽ trông giống như thế này:

# .env
 
# OpenAI Environment Variable
OPENAI_API_KEY="..."
 
# Upstash Redis Environment Variables
UPSTASH_REDIS_REST_URL="..."
UPSTASH_REDIS_REST_TOKEN="..."

Để tạo điểm cuối API trong Next.js, bạn sẽ sử dụng Trình xử lý tuyến Next.js cho phép bạn phân phát phản hồi qua API phản hồi và yêu cầu web. Để bắt đầu tạo tuyến API trong Next.js truyền phản hồi đến người dùng, hãy thực hiện lệnh sau:

mkdir -p app/api/stream/completion/chat
mkdir app/lib

-p cờ tạo thư mục mẹ cho chat thư mục nếu chúng bị thiếu.

Điều này thiết lập dự án Next.js của chúng tôi. Bây giờ, hãy chuyển sang tạo trình xử lý bộ đệm bằng Upstash.

Khởi tạo ứng dụng khách Upstash Redis Cache

Với UpstashRedisCache class, bạn có thể khởi tạo ứng dụng khách bộ đệm Redis để lưu vào bộ nhớ đệm các phản hồi API OpenAI trong một vài dòng mã. Tạo một tệp upstashCache.tsx bên trong app/lib thư mục:

Bằng cách sử dụng trình xử lý bộ nhớ đệm, việc lưu các cuộc hội thoại hoặc phản hồi hoàn thành do API OpenAI tạo ra trở nên cực kỳ dễ dàng. Hãy chuyển sang tìm hiểu cách bạn có thể bắt đầu sử dụng Sự kiện do máy chủ gửi trong Next.js.

Tạo API sự kiện do máy chủ gửi trong Bộ định tuyến ứng dụng Next.js

Sự kiện do máy chủ gửi (SSE) cho phép bạn cung cấp các cập nhật dữ liệu theo thời gian thực từ máy chủ đến máy khách mà không cần thăm dò liên tục. SSE cho phép luồng dữ liệu một chiều qua một kết nối HTTP duy nhất, tồn tại lâu dài.

Tạo một tệp có tên route.ts với đoạn mã sau trong app/api/stream thư mục để hiểu thiết lập tối thiểu cần thiết để truyền phát phản hồi bằng Sự kiện do máy chủ gửi:

// File: app/api/stream/route.ts
 
// Prevents this route's response from being cached on Vercel
export const dynamic = "force-dynamic";
 
export async function POST(request: Request) {
 const encoder = new TextEncoder()
 // Create a streaming response
 const customReadable = new ReadableStream({
 start(controller) {
 const message = "A sample message."
 controller.enqueue(encoder.encode(`data: ${message}\n\n`))
 },
 })
 // 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",
 },
 })
}

Đoạn mã trên thực hiện như sau:

  • Hằng số động được đặt thành force-dynamic , ngăn chặn việc lưu vào bộ nhớ đệm các phản hồi trên nền tảng Vercel. Điều này đảm bảo rằng mỗi yêu cầu đối với luồng SSE đều nhận được dữ liệu mới và không được cung cấp từ bộ đệm.
  • Một ReadableStream được tạo để tạo ra một luồng dữ liệu được gửi đến máy khách. Trong phương thức bắt đầu của luồng, một thông báo được mã hóa và đưa vào bộ điều khiển của luồng. Thông báo này sẽ được gửi tới máy khách như một phần của luồng SSE.
  • Số Response đối tượng được tạo với các tiêu đề dành riêng cho Sự kiện do máy chủ gửi. Các tiêu đề này bao gồm:
    • Connection: keep-alive để duy trì kết nối mở để phát trực tuyến.
    • Cache-Control: no-cache, no-transform để ngăn bộ nhớ đệm trong trình duyệt.
    • Content-Type: text/event-stream; charset=utf-8 để chỉ định loại nội dung là Sự kiện do máy chủ gửi.
  • Đối tượng Phản hồi chứa ReadableStream tùy chỉnh được trả về từ điểm cuối. Phản hồi này sẽ được gửi tới các máy khách yêu cầu luồng SSE.

Với điều này, bạn đã tạo một điểm cuối có khả năng truyền phát phản hồi. Trong các phần tiếp theo, bạn sẽ hiểu cách truyền phát phản hồi API Hoàn thành và API Hoàn thành trò chuyện từ OpenAI bằng lệnh gọi lại LangChain.

Truyền trực tuyến phản hồi API hoàn thành OpenAI bằng lệnh gọi lại LangChain

API hoàn thành OpenAI cung cấp một công cụ mạnh mẽ để tạo văn bản dựa trên (các) lời nhắc nhất định, hữu ích trong các tình huống thực tế khác nhau như tạo nội dung và dịch ngôn ngữ. Việc tích hợp các lệnh gọi lại LangChain cho phép truyền phát phản hồi theo thời gian thực, tăng khả năng phản hồi được nhận biết trong các ứng dụng.

Tạo một tệp có tên completionModel.tsx ở app/lib thư mục, xác định hàm khởi tạo phiên bản OpenAI có tính năng phát trực tuyến và lệnh gọi lại LangChain, tạo văn bản trong thời gian thực.

// File: app/lib/completionModel.tsx
 
import { OpenAI } from "@langchain/openai";
 
export const completionModel = (
 controller: ReadableStreamDefaultController,
 encoder: TextEncoder
) =>
 new OpenAI({
 streaming: true,
 callbacks: [
 {
 handleLLMNewToken(token) {
 controller.enqueue(encoder.encode(`data: ${token}\n\n`));
 },
 async handleLLMEnd(output) {
 controller.close();
 },
 },
 ],
 });

Đoạn mã trên thực hiện như sau:

  • Nhập OpenAI lớp từ @langchain/openai gói.
  • Xuất hàm có tên completionModel có hai tham số:
    • bộ điều khiển:Một ReadableStreamDefaultController đối tượng cho phép bạn xếp các tin nhắn vào hàng đợi.
    • bộ mã hóa:Một TextEncoder đối tượng mã hóa tin nhắn thành Uint8Array đối tượng.
  • Tạo phiên bản mới của OpenAI lớp với các tùy chọn cấu hình sau:
    • streaming :Đặt thành true, cho biết API sẽ trả về phản hồi phát trực tuyến.
    • callbacks :Một mảng chứa một đối tượng duy nhất có hai hàm gọi lại, được sử dụng để chặn việc tạo phản hồi của LLM ở mỗi giai đoạn.
  • handleLLMNewToken :Lệnh gọi lại được gọi khi mã thông báo mới được tạo bởi mô hình ngôn ngữ. Nó đưa mã thông báo được mã hóa vào hàng đợi cho bộ điều khiển.
  • handleLLMEnd :Lệnh gọi lại không đồng bộ được gọi khi quá trình tạo mô hình ngôn ngữ hoàn tất. Nó đóng bộ điều khiển.

Hơn nữa, tạo một tệp có tên route.ts với đoạn mã sau trong app/api/stream/completion thư mục. Những thay đổi từ trình xử lý tuyến phát trực tuyến ban đầu mà bạn đã tạo đã được đánh dấu bên dưới:

// File: app/api/stream/completion/route.ts
 
// Prevents this route's response from being cached on Vercel
export const dynamic = "force-dynamic";
 
+ import { completionModel } from "@/app/lib/completionModel";
 
export async function POST(request: Request) {
+ // Obtain the user message from request's body
+ const { message } = 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 completionModel(controller, encoder).invoke(message);
 },
 });
 // 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",
 },
 });
}

Ngoài những gì bạn đã làm trước đó để tạo điểm cuối phát trực tuyến trong Next.js, phần bổ sung mã ở trên còn thực hiện những việc sau:

  • Nhập completionModel chức năng.
  • Trích xuất thông báo của người dùng từ nội dung yêu cầu bằng cách sử dụng request.json() .
  • Bên trong start phương thức của ReadableStream, completionModel hàm được gọi không đồng bộ với thông báo nhận được từ yêu cầu. Chức năng này tạo ra phản hồi phát trực tuyến từ OpenAI với LangChain.

Để lưu vào bộ đệm các truy vấn của người dùng và phản hồi của họ bằng Upstash, hãy nhập ứng dụng khách bộ đệm Upstash Redis vào completionModel hoạt động như sau:

import { OpenAI } from "@langchain/openai";
+ import cache from '@/app/lib/upstashCache';
 
export const completionModel = (
 controller: ReadableStreamDefaultController,
 encoder: TextEncoder
) =>
 new OpenAI({
+ 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();
 },
 },
 ],
 });

Với những thay đổi tối thiểu, bạn đã bật tính năng lưu vào bộ nhớ đệm của các phản hồi API hoàn thành OpenAI bằng Upstash.

Bây giờ, hãy chuyển sang tìm hiểu cách truyền trực tuyến các phản hồi của API Hoàn thành trò chuyện OpenAI trong các điểm cuối Next.js.

Truyền trực tuyến phản hồi API hoàn thành cuộc trò chuyện OpenAI bằng lệnh gọi lại LangChain

API hoàn thành trò chuyện OpenAI cung cấp một công cụ mạnh mẽ để tạo phản hồi hội thoại theo thời gian thực dựa trên các tin nhắn được cung cấp. Các ứng dụng trải dài từ việc xây dựng các chatbot có khả năng tham gia vào các cuộc đối thoại tự nhiên đến nâng cao hệ thống hỗ trợ khách hàng với khả năng tương tác do AI điều khiển. Nó cho phép các nhà phát triển tạo ra các giao diện trò chuyện linh hoạt và phản hồi nhanh.

Tạo một tệp có tên chatCompletionModel.tsx trong app/lib thư mục, xác định chatCompletionModel chức năng tạo giao diện phát trực tuyến cho API hoàn thành trò chuyện của OpenAI bằng lệnh gọi lại LangChain, tạo điều kiện tạo cuộc trò chuyện theo thời gian thực dựa trên tin nhắn được cung cấp.

// File: app/lib/chatCompletionModel.tsx
 
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({
 streaming: true,
 callbacks: [
 {
 handleLLMNewToken(token) {
 controller.enqueue(encoder.encode(`data: ${token}\n\n`));
 },
 async handleLLMEnd(output) {
 controller.close();
 },
 },
 ],
 });

Đoạn mã trên thực hiện như sau:

  • Nhập ChatOpenAI lớp từ @langchain/openai gói.
  • Tạo các định nghĩa kiểu sau:
    • ConversationMessage :Xác định loại cho một tin nhắn trong một cuộc trò chuyện. Nó chứa hai thuộc tính:role (cho biết vai trò của người gửi) và nội dung (nội dung tin nhắn).
    • ConversationMessages :Xác định loại cho một mảng tin nhắn hội thoại.
  • Xuất hàm có tên chatCompletionModel có hai tham số:
    • bộ điều khiển:Một ReadableStreamDefaultController đối tượng cho phép bạn xếp các tin nhắn vào hàng đợi.
    • bộ mã hóa:Một TextEncoder đối tượng mã hóa tin nhắn thành Uint8Array đối tượng.
  • Tạo phiên bản mới của ChatOpenAI lớp với các tùy chọn cấu hình sau:
    • streaming :Đặt thành true, cho biết API sẽ trả về phản hồi phát trực tuyến.
    • callbacks :Một mảng chứa một đối tượng duy nhất có hai hàm gọi lại, được sử dụng để chặn việc tạo phản hồi của LLM ở mỗi giai đoạn.
  • handleLLMNewToken :Lệnh gọi lại được gọi khi mã thông báo mới được tạo bởi mô hình ngôn ngữ. Nó đưa mã thông báo được mã hóa vào hàng đợi cho bộ điều khiển.
  • handleLLMEnd :Lệnh gọi lại không đồng bộ được gọi khi quá trình tạo mô hình ngôn ngữ hoàn tất. Nó đóng bộ điều khiển.

Hơn nữa, tạo một tệp có tên route.ts với đoạn mã sau trong app/api/stream/completion/chat thư mục. Những thay đổi từ trình xử lý tuyến phát trực tuyến ban đầu mà bạn đã tạo đã được đánh dấu bên dưới:

// 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",
 },
 });
}

Ngoài những gì bạn đã làm trước đó để tạo điểm cuối phát trực tuyến trong Next.js, phần bổ sung mã ở trên còn thực hiện những việc sau:

  • Nhập chatCompletionModel hàm và ConversationMessage định nghĩa kiểu.
  • Trích xuất tin nhắn trong cuộc hội thoại từ nội dung yêu cầu bằng cách sử dụng request.json() .
  • Bên trong start phương thức của ReadableStream, chatCompletionModel hàm được gọi không đồng bộ sau mảng thông báo được chuyển đổi. Mỗi tin nhắn được chuyển thành một mảng chứa vai trò và nội dung của tin nhắn. Chức năng này tạo ra phản hồi phát trực tuyến từ OpenAI với LangChain.

Để lưu trữ lịch sử trò chuyện bằng Upstash, hãy nhập ứng dụng khách bộ đệm Upstash Redis vào chatCompletionModel hoạt động như sau:

+ 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();
 },
 },
 ],
 });

Với những thay đổi tối thiểu, bạn đã bật tính năng lưu vào bộ nhớ đệm của toàn bộ lịch sử trò chuyện bằng Upstash.

Bây giờ, hãy chuyển sang tạo các thành phần React phía máy khách để sử dụng các điểm cuối phát trực tuyến.

Thiết lập giao diện Next.js để nghe Sự kiện do máy chủ gửi

Trong phần này, bạn sẽ tìm hiểu cách thiết lập trình xử lý tối thiểu cho các thông báo API Sự kiện do máy chủ gửi và cách tiếp cận để quản lý trạng thái của các thông báo được trao đổi giữa người dùng và AI.

Lắng nghe API sự kiện do máy chủ gửi trong React

Để nghe API SSE trong thành phần phía máy khách của chúng tôi trong React, bạn sẽ bắt đầu một yêu cầu POST tới tuyến API được chỉ định. Khi nhận được phản hồi, bạn sẽ giải mã dữ liệu đến dưới dạng chuỗi bằng cách sử dụng TextDecoderStream phương thức và liên tục đọc dữ liệu từ luồng.

"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 <></>
}

Quản lý trạng thái hội thoại trong React

Để quản lý trạng thái cuộc trò chuyện giữa người dùng và chatbot, bạn có thể sử dụng các biến trạng thái. Bạn sẽ cập nhật các biến trạng thái messages và latestMessage để lưu trữ lịch sử cuộc trò chuyện và tin nhắn mới nhất. Bằng cách cập nhật các biến trạng thái này trong vòng lặp xử lý dữ liệu đến từ API SSE, bạn có thể đảm bảo hiển thị cuộc hội thoại được cập nhật theo thời gian thực. Các mã bổ sung để đạt được điều tương tự như sau:

"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 <></>
}

Việc bổ sung mã ở trên thực hiện như sau:

  • Biến trạng thái được khai báo để lưu trữ luồng dữ liệu đến nhận được từ API SSE.
  • Khi nhận được tin nhắn hoàn chỉnh (được biểu thị bằng done là đúng), tin nhắn nhận được mới nhất sẽ được thêm vào messages mảng trạng thái. Tin nhắn này được định dạng với vai trò trợ lý để phân biệt nó với tin nhắn của người dùng. Ngoài ra, trạng thái tin nhắn mới nhất được đặt lại thành một chuỗi trống để chuẩn bị cho tin nhắn đến tiếp theo.
  • Khi dữ liệu được nhận tăng dần (chưa tạo thành một tin nhắn hoàn chỉnh), nó sẽ được thêm vào incomingMessage biến.
  • Trạng thái tin nhắn mới nhất được cập nhật bằng dữ liệu đến được nối, đảm bảo cập nhật theo thời gian thực khi có dữ liệu mới.

Tuyệt vời! Với latestMessage phản ứng và messages biến, giờ đây bạn có thể tạo giao diện người dùng động thể hiện các tin nhắn được trao đổi trong cuộc trò chuyện và phản hồi mới nhất do AI tạo ra.

Đó là rất nhiều học hỏi! Bây giờ bạn đã hoàn tất ✨

Triển khai lên Vercel

Kho lưu trữ hiện đã sẵn sàng để triển khai lên Vercel. Hãy làm theo các bước sau để triển khai:

  • Bắt đầu bằng cách tạo kho lưu trữ GitHub chứa mã ứng dụng của bạn.
  • Sau đó, điều hướng đến Trang tổng quan Vercel và tạo Dự án mới .
  • Liên kết dự án mới với kho lưu trữ GitHub mà bạn vừa tạo.
  • Trong Cài đặt , cập nhật Biến môi trường để khớp với những thông tin đó ở .env địa phương của bạn tập tin.
  • Triển khai! 🚀

Thông tin thêm

Để biết thêm thông tin chi tiết, hãy khám phá các tài liệu tham khảo được trích dẫn trong bài đăng này.

  • Kho lưu trữ GitHub
  • Sự kiện được máy chủ gửi
  • Truyền phát Next.js
  • Lớp bộ đệm cho LLM