সার্ভার-প্রেরিত ইভেন্টগুলি (SSE) ব্যবহার করে Next.js-এ রিয়েল-টাইম LLM স্ট্রিমিং

এআই-চালিত অ্যাপ্লিকেশনগুলি যেগুলি দ্রুত সাড়া দেয় ব্যবহারকারীর অভিজ্ঞতাকে তাৎক্ষণিকভাবে শোনা এবং দেখা অনুভব করে। স্ট্রিমিংয়ের মাধ্যমে, আপনি এমন চ্যাটবট তৈরি করতে পারেন যা তাত্ক্ষণিকভাবে প্রশ্নের উত্তর দেয় বা রিয়েল-টাইমে ব্যক্তিগতকৃত সুপারিশ সরবরাহ করে। এটি কেবল গতির বিষয়ে নয়—এটি ব্যবহারকারীর প্রয়োজনীয়তা অবিলম্বে মেটানো, এর অনুভূত মূল্যকে বাড়িয়ে তোলার বিষয়ে।

স্ট্রিমিং একটি বড় ব্লকের পরিবর্তে ছোট, অবিচ্ছিন্ন অংশে ডেটা পাঠানো জড়িত। চ্যাটবট বা সুপারিশ সিস্টেমের মতো এআই অ্যাপ্লিকেশনগুলির প্রসঙ্গে, স্ট্রিমিংয়ের অর্থ হল ব্যবহারকারীদের কাছে আংশিক প্রতিক্রিয়া পাঠানোর সাথে সাথে তারা উপলব্ধ হওয়ার সাথে সাথে সম্পূর্ণ প্রতিক্রিয়া কম্পাইল এবং সরবরাহ করার জন্য অপেক্ষা না করে। এই পদ্ধতি নিশ্চিত করে যে ব্যবহারকারীরা তাৎক্ষণিক প্রতিক্রিয়া বা তথ্য পান, আরও গতিশীল এবং প্রতিক্রিয়াশীল ব্যবহারকারীর অভিজ্ঞতা তৈরি করে।

এই নির্দেশিকাটিতে, আপনি শিখবেন কিভাবে LangChain এবং OpenAI-এর ভাষা মডেলের সাথে Next.js এন্ডপয়েন্টে স্ট্রিমিং বাস্তবায়ন করতে সার্ভার-প্রেরিত ইভেন্ট (SSE) ব্যবহার করতে হয়। আরও, আপনি শিখবেন কিভাবে আপস্ট্যাশের মাধ্যমে স্ট্রিমিং প্রতিক্রিয়া ক্যাশে করতে হয়।

পূর্বশর্ত

আপনার নিম্নলিখিতগুলির প্রয়োজন হবে:

• Node.js 18 বা তার পরে
• একটি OpenAI অ্যাকাউন্ট
• একটি Upstash অ্যাকাউন্ট
• একটি Vercel অ্যাকাউন্ট

টেক স্ট্যাক

একটি OpenAI টোকেন তৈরি করুন

OpenAI API ব্যবহার করে, আপনি AI ব্যবহার করে চ্যাটবট প্রতিক্রিয়া তৈরি করতে পারবেন। OpenAI API-তে যে কোনো অনুরোধের জন্য একটি অনুমোদন টোকেন প্রয়োজন। টোকেন পেতে, আপনার OpenAI অ্যাকাউন্টে API কী-তে নেভিগেট করুন এবং নতুন গোপন কী তৈরি করুন-এ ক্লিক করুন। বোতাম OPENAI_API_KEY হিসাবে পরবর্তীতে ব্যবহারের জন্য এই টোকেনটি অনুলিপি করুন এবং নিরাপদে সংরক্ষণ করুন পরিবেশ পরিবর্তনশীল।

Upstash Redis সেট আপ করা হচ্ছে

একবার আপনি একটি Upstash অ্যাকাউন্ট তৈরি করেছেন এবং লগ ইন করলে আপনি Redis ট্যাবে যান এবং একটি ডাটাবেস তৈরি করতে যাচ্ছেন৷

আপনি REST API বিভাগটি খুঁজে না পাওয়া পর্যন্ত নিচে স্ক্রোল করুন এবং .env নির্বাচন করুন বোতাম বিষয়বস্তু অনুলিপি করুন এবং এটি নিরাপদ কোথাও সংরক্ষণ করুন৷

একটি নতুন Next.js অ্যাপ্লিকেশন তৈরি করুন

একটি নতুন Next.js প্রকল্প তৈরি করে শুরু করা যাক। আপনার টার্মিনাল খুলুন এবং নিম্নলিখিত কমান্ডটি চালান:

npx create-next-app@latest my-app

যখন অনুরোধ করা হয়, নির্বাচন করুন:

• Yes যখন TypeScript ব্যবহার করতে বলা হয়।
• No যখন ESLint ব্যবহার করতে বলা হয়।
• Yes যখন Tailwind CSS ব্যবহার করার জন্য অনুরোধ করা হয়।
• No যখন src/ ব্যবহার করতে বলা হয় ডিরেক্টরি।
• Yes যখন অ্যাপ রাউটার ব্যবহার করতে বলা হয়।
• No যখন ডিফল্ট আমদানি উপনাম (@/*) কাস্টমাইজ করার জন্য অনুরোধ করা হয় )।

এটি হয়ে গেলে, প্রজেক্ট ডিরেক্টরিতে যান এবং নিম্নলিখিত কমান্ডটি চালানোর মাধ্যমে অ্যাপটিকে ডেভেলপমেন্ট মোডে শুরু করুন:

cd my-app
npm run dev

অ্যাপটি লোকালহোস্টে চলতে হবে:3000। নিম্নলিখিত কমান্ডটি কার্যকর করে অ্যাপ্লিকেশনটিতে ল্যাংচেইন নির্ভরতা ইনস্টল করতে ডেভেলপমেন্ট সার্ভার বন্ধ করুন:

npm install @langchain/openai @langchain/community

কমান্ডটি নিম্নলিখিত লাইব্রেরি ইনস্টল করেছে:

• @langchain/openai :ওপেনএআই সিরিজের মডেলগুলির সাথে ইন্টারফেস করার জন্য একটি ল্যাংচেইন প্যাকেজ৷
• @langchain/community :ল্যাংচেইন কোরের সাথে প্লাগ-এন-প্লে-এর জন্য তৃতীয় পক্ষের একীকরণের একটি সংগ্রহ৷

এখন, একটি .env তৈরি করুন আপনার প্রকল্পের মূলে ফাইল করুন। আপনি OPENAI_API_KEY যোগ করতে যাচ্ছেন আপনি আগে পেয়েছিলেন।

এটি দেখতে এইরকম কিছু হওয়া উচিত:

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

Next.js এ API এন্ডপয়েন্ট তৈরি করতে, আপনি Next.js রুট হ্যান্ডলার ব্যবহার করবেন যা আপনাকে ওয়েব রিকোয়েস্ট এবং রেসপন্স এপিআই-এর মাধ্যমে প্রতিক্রিয়া প্রদান করতে দেয়। Next.js-এ একটি API রুট তৈরি করা শুরু করতে যা ব্যবহারকারীর প্রতিক্রিয়া স্ট্রিম করে, নিম্নলিখিত কমান্ডটি চালান:

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

-p পতাকা chat-এর জন্য মূল ডিরেক্টরি তৈরি করে ডিরেক্টরি যদি তারা অনুপস্থিত থাকে।

এটি আমাদের Next.js প্রকল্প সেট আপ করে। এখন, চলুন আপস্ট্যাশের সাথে একটি ক্যাশে হ্যান্ডলার তৈরিতে এগিয়ে যাই।

একটি Upstash Redis ক্যাশে ক্লায়েন্ট ইনস্ট্যান্ট করুন

UpstashRedisCache সহ ক্লাস, আপনি কোডের কয়েকটি লাইনের মধ্যে OpenAI API প্রতিক্রিয়া ক্যাশ করার জন্য একটি Redis ক্যাশে ক্লায়েন্ট আরম্ভ করতে পারেন। upstashCache.tsx একটি ফাইল তৈরি করুন app/lib এর ভিতরে ডিরেক্টরি:

ক্যাশে হ্যান্ডলার ব্যবহার করে, OpenAI API দ্বারা উত্পন্ন কথোপকথন বা সমাপ্তির প্রতিক্রিয়াগুলি ক্যাশে করা খুব সহজ হয়ে ওঠে। চলুন জেনে নেওয়া যাক কিভাবে আপনি Next.js-এ সার্ভার-প্রেরিত ইভেন্ট ব্যবহার শুরু করতে পারেন।

Next.js অ্যাপ রাউটারে সার্ভার-প্রেরিত ইভেন্ট API তৈরি করা হচ্ছে

সার্ভার-প্রেরিত ইভেন্টস (SSE) আপনাকে সার্ভার থেকে ক্লায়েন্টের কাছে ক্রমাগত ভোটদানের প্রয়োজন ছাড়াই রিয়েল-টাইম ডেটা আপডেট সরবরাহ করতে দেয়। SSE একটি একক, দীর্ঘস্থায়ী HTTP সংযোগের মাধ্যমে ডেটার একমুখী প্রবাহ সক্ষম করে৷

route.ts নামে একটি ফাইল তৈরি করুন app/api/stream-এ নিম্নলিখিত কোড সহ সার্ভার-প্রেরিত ইভেন্টগুলি ব্যবহার করে প্রতিক্রিয়া স্ট্রিম করার জন্য প্রয়োজনীয় ন্যূনতম সেটআপ বোঝার জন্য ডিরেক্টরি:

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

উপরের কোডটি নিম্নলিখিতগুলি করে:

• গতিশীল ধ্রুবক force-dynamic এ সেট করা আছে , Vercel প্ল্যাটফর্মে প্রতিক্রিয়া ক্যাশিং প্রতিরোধ করে। এটি নিশ্চিত করে যে SSE স্ট্রীমের জন্য প্রতিটি অনুরোধ নতুন ডেটা পায় এবং ক্যাশে থেকে পরিবেশন করা হয় না।
• A ReadableStream ক্লায়েন্টের কাছে পাঠানোর জন্য ডেটার একটি প্রবাহ তৈরি করতে তৈরি করা হয়। স্ট্রীমের শুরুর পদ্ধতিতে, একটি বার্তা এনকোড করা হয় এবং স্ট্রিমের কন্ট্রোলারে সারিবদ্ধ করা হয়। এই বার্তাটি SSE স্ট্রিমের অংশ হিসাবে ক্লায়েন্টকে পাঠানো হবে।
• Response সার্ভার-প্রেরিত ইভেন্টগুলির জন্য নির্দিষ্ট হেডার দিয়ে বস্তু তৈরি করা হয়। এই শিরোনামগুলির মধ্যে নিম্নলিখিতগুলি অন্তর্ভুক্ত রয়েছে:
  ৷
  • Connection: keep-alive সংযোগ বজায় রাখার জন্য স্ট্রিমিংয়ের জন্য উন্মুক্ত।
  • Cache-Control: no-cache, no-transform ব্রাউজারে ক্যাশিং প্রতিরোধ করতে।
  • Content-Type: text/event-stream; charset=utf-8 সার্ভার-প্রেরিত ইভেন্ট হিসাবে বিষয়বস্তুর ধরন নির্দিষ্ট করতে।
• কাস্টম রিডেবল স্ট্রিম ধারণকারী রেসপন্স অবজেক্ট এন্ডপয়েন্ট থেকে ফিরে আসে। এই প্রতিক্রিয়া SSE স্ট্রীমের অনুরোধকারী ক্লায়েন্টদের কাছে পাঠানো হবে।

এটির সাথে, আপনি একটি এন্ডপয়েন্ট তৈরি করেছেন যা প্রতিক্রিয়া স্ট্রিম করতে সক্ষম। পরবর্তী বিভাগে, আপনি বুঝতে পারবেন কিভাবে আপনি LangChain কলব্যাক সহ OpenAI থেকে Completion এবং Chat Completion API প্রতিক্রিয়া স্ট্রিম করতে পারেন।

LangChain কলব্যাকের সাথে OpenAI সমাপ্তি API প্রতিক্রিয়াগুলি স্ট্রিম করা

OpenAI Completion API প্রদত্ত প্রম্পট(গুলি) এর উপর ভিত্তি করে টেক্সট তৈরি করার জন্য একটি শক্তিশালী টুল প্রদান করে, যা বিভিন্ন বাস্তব-জীবনের পরিস্থিতিতে যেমন বিষয়বস্তু তৈরি এবং ভাষা অনুবাদে উপযোগী। LangChain কলব্যাকগুলিকে একীভূত করা প্রতিক্রিয়াগুলির রিয়েল-টাইম স্ট্রিমিং সক্ষম করে, অ্যাপ্লিকেশনগুলিতে অনুভূত প্রতিক্রিয়াশীলতা বৃদ্ধি করে৷

completionModel.tsx নামে একটি ফাইল তৈরি করুন app/lib-এ ডিরেক্টরি, একটি ফাংশন সংজ্ঞায়িত করে যা স্ট্রিমিং সক্ষম এবং ল্যাংচেইন কলব্যাক সহ একটি OpenAI ইনস্ট্যান্স শুরু করে, রিয়েল-টাইমে টেক্সট তৈরি করে।

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

উপরের কোডটি নিম্নলিখিতগুলি করে:

• OpenAI আমদানি করে @langchain/openai থেকে ক্লাস প্যাকেজ।
• completionModel নামের একটি ফাংশন রপ্তানি করে যা দুটি পরামিতি নেয়:
  • নিয়ন্ত্রক:A ReadableStreamDefaultController অবজেক্ট যা আপনাকে বার্তাগুলিকে স্ট্রীমে সারিবদ্ধ করতে দেয়।
  • এনকোডার:একটি TextEncoder বস্তু যা বার্তাগুলিকে Uint8Array-এ এনকোড করে বস্তু।
• OpenAI-এর একটি নতুন উদাহরণ তৈরি করে নিম্নলিখিত কনফিগারেশন বিকল্পগুলির সাথে ক্লাস:
  • streaming :সত্যে সেট করুন, ইঙ্গিত করে যে API স্ট্রিমিং প্রতিক্রিয়াগুলি ফিরিয়ে দেবে৷
  ৷
  • callbacks :দুটি কলব্যাক ফাংশন সহ একটি একক অবজেক্ট ধারণকারী একটি অ্যারে, প্রতিটি পর্যায়ে LLM দ্বারা প্রতিক্রিয়া সৃষ্টিকে বাধা দিতে ব্যবহৃত হয়৷
• handleLLMNewToken :ভাষা মডেল দ্বারা একটি নতুন টোকেন তৈরি হলে একটি কলব্যাক আহ্বান করা হয়৷ এটি এনকোড করা টোকেনকে কন্ট্রোলারে সারিবদ্ধ করে।
• handleLLMEnd :ভাষা মডেল তৈরি সম্পূর্ণ হলে একটি অ্যাসিঙ্ক্রোনাস কলব্যাক আহ্বান করা হয়। এটি কন্ট্রোলার বন্ধ করে দেয়।

আরও, route.ts নামে একটি ফাইল তৈরি করুন app/api/stream/completion-এ নিম্নলিখিত কোড সহ ডিরেক্টরি আপনার তৈরি করা প্রাথমিক স্ট্রিমিং রুট হ্যান্ডলারের পরিবর্তনগুলি নীচে হাইলাইট করা হয়েছে:

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

Next.js-এ একটি স্ট্রিমিং এন্ডপয়েন্ট তৈরি করার জন্য আপনি আগে যা করেছিলেন তা ছাড়াও, উপরের কোড সংযোজনগুলি নিম্নলিখিতগুলি করে:

• completionModel আমদানি করে ফাংশন।
• request.json() ব্যবহার করে অনুরোধের বডি থেকে ব্যবহারকারীর বার্তা বের করে .
• start এর ভিতরে রিডেবল স্ট্রিমের পদ্ধতি, completionModel অনুরোধ থেকে প্রাপ্ত বার্তার সাথে ফাংশনটি অ্যাসিঙ্ক্রোনাসভাবে আহ্বান করা হয়। এই ফাংশনটি ল্যাংচেইনের সাথে OpenAI থেকে একটি স্ট্রিমিং প্রতিক্রিয়া তৈরি করে।

Upstash এর সাথে ব্যবহারকারীর প্রশ্ন এবং তাদের প্রতিক্রিয়া ক্যাশ করতে, Upstash Redis ক্যাশে ক্লায়েন্টকে completionModel-এ আমদানি করুন নিম্নরূপ ফাংশন:

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

ন্যূনতম পরিবর্তনের সাথে, আপনি Upstash-এর সাথে OpenAI Completion API প্রতিক্রিয়াগুলির ক্যাশিং সক্ষম করেছেন৷

এখন, কিভাবে OpenAI Chat Completion API প্রতিক্রিয়াগুলি Next.js এন্ডপয়েন্টে স্ট্রিম করা যায় তা শিখে নেওয়া যাক।

LangChain কলব্যাকের সাথে OpenAI চ্যাট সমাপ্তি API প্রতিক্রিয়াগুলি স্ট্রিম করা হচ্ছে

OpenAI Chat Completion API প্রদত্ত বার্তাগুলির উপর ভিত্তি করে রিয়েল-টাইম কথোপকথনমূলক প্রতিক্রিয়া তৈরি করার জন্য একটি শক্তিশালী টুল প্রদান করে। অ্যাপ্লিকেশনগুলি প্রাকৃতিক কথোপকথনে জড়িত হতে সক্ষম চ্যাটবট তৈরি করা থেকে শুরু করে AI-চালিত মিথস্ক্রিয়া ক্ষমতা সহ গ্রাহক সহায়তা সিস্টেমগুলিকে উন্নত করা পর্যন্ত বিস্তৃত। এটি বিকাশকারীদের গতিশীল এবং প্রতিক্রিয়াশীল কথোপকথনমূলক ইন্টারফেস তৈরি করতে সক্ষম করে।

chatCompletionModel.tsx নামে একটি ফাইল তৈরি করুন app/lib-এ ডিরেক্টরি, একটি chatCompletionModel সংজ্ঞায়িত করে ফাংশন যা ল্যাংচেইন কলব্যাক সহ OpenAI এর চ্যাট কমপ্লিশন API-এর জন্য একটি স্ট্রিমিং ইন্টারফেস তৈরি করে, প্রদত্ত বার্তাগুলির উপর ভিত্তি করে রিয়েল-টাইম কথোপকথন তৈরির সুবিধা দেয়৷

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

উপরের কোডটি নিম্নলিখিতগুলি করে:

• ChatOpenAI আমদানি করে @langchain/openai থেকে ক্লাস প্যাকেজ।
• নিম্নলিখিত প্রকারের সংজ্ঞা তৈরি করে:
  • ConversationMessage :একটি কথোপকথনে একটি একক বার্তার জন্য একটি প্রকার নির্ধারণ করে৷ এটিতে দুটি বৈশিষ্ট্য রয়েছে:ভূমিকা (প্রেরকের ভূমিকা নির্দেশ করে) এবং সামগ্রী (বার্তার বিষয়বস্তু)।
  • ConversationMessages :কথোপকথন বার্তাগুলির একটি অ্যারের জন্য একটি প্রকার সংজ্ঞায়িত করে৷
• chatCompletionModel নামের একটি ফাংশন রপ্তানি করে যা দুটি পরামিতি নেয়:
  • কন্ট্রোলার:A ReadableStreamDefaultController অবজেক্ট যা আপনাকে বার্তাগুলিকে স্ট্রীমে সারিবদ্ধ করতে দেয়।
  • এনকোডার:একটি TextEncoder বস্তু যা বার্তাগুলিকে Uint8Array-এ এনকোড করে বস্তু।
• ChatOpenAI এর একটি নতুন উদাহরণ তৈরি করে নিম্নলিখিত কনফিগারেশন বিকল্পগুলির সাথে ক্লাস:
  • streaming :সত্যে সেট করুন, ইঙ্গিত করে যে API স্ট্রিমিং প্রতিক্রিয়াগুলি ফিরিয়ে দেবে৷
  ৷
  • callbacks :দুটি কলব্যাক ফাংশন সহ একটি একক অবজেক্ট ধারণকারী একটি অ্যারে, প্রতিটি পর্যায়ে LLM দ্বারা প্রতিক্রিয়া সৃষ্টিকে বাধা দিতে ব্যবহৃত হয়৷
• handleLLMNewToken :ভাষা মডেল দ্বারা একটি নতুন টোকেন তৈরি হলে একটি কলব্যাক আহ্বান করা হয়৷ এটি এনকোড করা টোকেনকে কন্ট্রোলারে সারিবদ্ধ করে।
• handleLLMEnd :ভাষা মডেল তৈরি সম্পূর্ণ হলে একটি অ্যাসিঙ্ক্রোনাস কলব্যাক আহ্বান করা হয়। এটি কন্ট্রোলার বন্ধ করে দেয়।

আরও, route.ts নামে একটি ফাইল তৈরি করুন app/api/stream/completion/chat-এ নিম্নলিখিত কোড সহ ডিরেক্টরি আপনার তৈরি করা প্রাথমিক স্ট্রিমিং রুট হ্যান্ডলারের পরিবর্তনগুলি নীচে হাইলাইট করা হয়েছে:

// 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-এ একটি স্ট্রিমিং এন্ডপয়েন্ট তৈরি করার জন্য আপনি আগে যা করেছিলেন তা ছাড়াও, উপরের কোড সংযোজনগুলি নিম্নলিখিতগুলি করে:

• chatCompletionModel আমদানি করে ফাংশন এবং ConversationMessage টাইপ সংজ্ঞা।
• কথোপকথনের বার্তাগুলিকে request.json() ব্যবহার করে অনুরোধের বডি থেকে বের করে .
• start এর ভিতরে রিডেবল স্ট্রিমের পদ্ধতি, chatCompletionModel রূপান্তরিত বার্তা অ্যারের পরে ফাংশন অ্যাসিঙ্ক্রোনাসভাবে আহ্বান করা হয়। প্রতিটি বার্তা একটি অ্যারেতে রূপান্তরিত হয় যাতে বার্তাটির ভূমিকা এবং বিষয়বস্তু থাকে। এই ফাংশনটি ল্যাংচেইনের সাথে OpenAI থেকে একটি স্ট্রিমিং প্রতিক্রিয়া তৈরি করে।

Upstash এর সাথে চ্যাট হিস্ট্রি ক্যাশে করতে, Upstash Redis ক্যাশে ক্লায়েন্টকে chatCompletionModel-এ ইম্পোর্ট করুন নিম্নরূপ ফাংশন:

+ 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 এর সাথে সমগ্র চ্যাট ইতিহাসের ক্যাশিং সক্ষম করেছেন৷

এখন, স্ট্রিমিং এন্ডপয়েন্ট ব্যবহার করতে ক্লায়েন্ট সাইড রিঅ্যাক্ট কম্পোনেন্ট তৈরির দিকে এগিয়ে যাওয়া যাক।

সার্ভার-প্রেরিত ইভেন্টগুলি শোনার জন্য Next.js ফ্রন্টএন্ড সেটআপ করুন

এই বিভাগে, আপনি শিখবেন কিভাবে সার্ভার-প্রেরিত ইভেন্টস এপিআই বার্তাগুলিতে একটি ন্যূনতম শ্রোতা সেটআপ করতে হয় এবং ব্যবহারকারী এবং এআই-এর মধ্যে আদান-প্রদান করা বার্তাগুলির অবস্থা পরিচালনা করার একটি পদ্ধতি।

প্রতিক্রিয়ায় সার্ভার-প্রেরিত ইভেন্ট এপিআই শোনা

প্রতিক্রিয়াতে আমাদের ক্লায়েন্ট-সাইড কম্পোনেন্টে SSE API শোনার জন্য, আপনি নির্দিষ্ট API রুটে একটি POST অনুরোধ শুরু করতে যাচ্ছেন। একটি প্রতিক্রিয়া পাওয়ার পরে, আপনি TextDecoderStream ব্যবহার করে একটি স্ট্রিং হিসাবে আগত ডেটা ডিকোড করবেন পদ্ধতি, এবং ক্রমাগত স্ট্রিম থেকে ডেটা পড়ুন।

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

প্রতিক্রিয়ায় কথোপকথনের অবস্থা পরিচালনা করা

ব্যবহারকারী এবং চ্যাটবটের মধ্যে কথোপকথনের অবস্থা পরিচালনা করতে, আপনি রাজ্য ভেরিয়েবল ব্যবহার করতে পারেন। আপনি স্টেট ভেরিয়েবল messages আপডেট করবেন এবং latestMessage যথাক্রমে কথোপকথনের ইতিহাস এবং সর্বশেষ বার্তা সংরক্ষণ করতে। 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 <></>
}

উপরের কোড সংযোজনগুলি নিম্নলিখিতগুলি করে:

• এসএসই এপিআই থেকে প্রাপ্ত ইনকামিং ডেটা স্ট্রিম সংরক্ষণ করার জন্য একটি স্টেট ভেরিয়েবল ঘোষণা করা হয়।
• একটি সম্পূর্ণ বার্তা পাওয়ার পরে ( done দ্বারা নির্দেশিত সত্য হচ্ছে), সর্বশেষ প্রাপ্ত বার্তাটি messages এ যোগ করা হয়েছে রাষ্ট্র অ্যারে। এই বার্তাটি সহকারীর ভূমিকার সাথে ফর্ম্যাট করা হয়েছে৷ ব্যবহারকারীর বার্তা থেকে এটি আলাদা করতে। এছাড়াও, পরবর্তী আগত বার্তার জন্য প্রস্তুত করার জন্য সর্বশেষ বার্তার অবস্থা একটি খালি স্ট্রিংয়ে পুনরায় সেট করা হয়েছে৷
• যেহেতু ডেটা ক্রমবর্ধমানভাবে প্রাপ্ত হয় (এখনও একটি সম্পূর্ণ বার্তা তৈরি করেনি), এটি incomingMessage-এ যুক্ত করা হয় পরিবর্তনশীল।
• নতুন ডেটা আসার সাথে সাথে রিয়েল-টাইম আপডেট নিশ্চিত করে, সংযুক্ত ইনকামিং ডেটার সাথে সর্বশেষ বার্তার অবস্থা আপডেট করা হয়।

দারুণ! প্রতিক্রিয়াশীল latestMessage সহ এবং messages ভেরিয়েবল, আপনি এখন কথোপকথনে আদান-প্রদান করা বার্তা এবং সর্বশেষ AI জেনারেটেড প্রতিক্রিয়া উপস্থাপন করে গতিশীল ব্যবহারকারী ইন্টারফেস তৈরি করতে পারেন।

যে অনেক শেখার ছিল! আপনি এখন সব সম্পন্ন করেছেন ✨

Vercel এ স্থাপন করুন

ভান্ডারটি এখন Vercel-এ স্থাপন করার জন্য প্রস্তুত। স্থাপন করতে নিম্নলিখিত পদক্ষেপগুলি ব্যবহার করুন:

• আপনার অ্যাপের কোড সহ একটি GitHub সংগ্রহস্থল তৈরি করে শুরু করুন।
• তারপর, Vercel ড্যাশবোর্ডে নেভিগেট করুন এবং একটি নতুন প্রকল্প তৈরি করুন .
• আপনার তৈরি করা GitHub সংগ্রহস্থলের সাথে নতুন প্রজেক্ট লিঙ্ক করুন।
• সেটিংসে , এনভায়রনমেন্ট ভেরিয়েবল আপডেট করুন আপনার স্থানীয় .env এর সাথে মেলে ফাইল।
• স্থাপন করুন! 🚀

আরো তথ্য

আরো বিস্তারিত অন্তর্দৃষ্টির জন্য, এই পোস্টে উদ্ধৃত রেফারেন্সগুলি অন্বেষণ করুন৷

• GitHub সংগ্রহস্থল
• সার্ভার পাঠানো ইভেন্টগুলি
• Next.js স্ট্রিমিং
• LLM-এর জন্য ক্যাশিং স্তর