Enter your prompt: setPrompt(e.target.value)} className="w-full p-2 border border-zinc-700 rounded-md min-h-[100px] focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200" placeholder="Ask the AI something..." disabled={status === "loading" || status === "streaming"} /> </div> <div className="flex gap-4"> <button type="submit" disabled={status === "loading" || status === "streaming"} className="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 disabled:bg-gray-400"> {status === "loading" ? "Starting..." : status === "streaming" ? "Streaming..." : "Generate Response"} </button> <button type="button" onClick={handleReset} className="px-4 py-2 bg-zinc-600 text-white rounded-md hover:bg-zinc-700">Reset</button> </div> </form> <div className="mt-8"> <h2 className="text-xl tracking-tight font-semibold mb-2">Response:</h2> {status === "error" ? ( <div className="p-4 bg-red-100 border border-red-300 rounded-md text-red-800"> <p className="font-bold">Error:</p> <p>{error?.message}</p> </div> ) : status === "idle" && !response ? ( <p className="text-gray-500">Enter a prompt and click "Generate Response" to see the AI's response.</p> ) : ( <div ref={responseRef} className="flex flex-col h-96 overflow-y-auto p-4 bg-zinc-900 text-zinc-200 border border-zinc-800 rounded-md whitespace-pre-wrap"> <div>{response || "Loading..."}</div> </div> )} {(status === "streaming" || status === "completed") && ( <div className="mt-2 text-sm text-gray-500"> <p>Session ID: {sessionId}</p> <p>Status: {status}</p> <p>Chunks received: {chunkCount}</p> <p>Connection: {status === "streaming" ? "Active SSE" : "Closed"}</p> </div> )} </div> </div> </main> ) }</code></pre> <h3>स्ट्रीम जनरेटर</h3> <p>यहां स्ट्रीम जनरेटर के लिए पूरा कोड है। यदि किसी भी बिंदु पर LLM जनरेशन विफल होता है, तो यह अधिकतम विश्वसनीयता के लिए Upstash Workflow का उपयोग करके स्वचालित रूप से पुनः प्रयास किया जाता है:</p> <pre><code>import { MessageType, StreamStatus, type ChunkMessage, type MetadataMessage } from "@/lib/message-schema"; import { redis } from "@/utils"; import { openai } from "@ai-sdk/openai"; import { serve } from "@upstash/workflow/nextjs"; import { streamText } from "ai"; interface LLMStreamResponse { success: boolean; sessionId: string; totalChunks: number; fullContent: string; } export const { POST } = serve(async (context) => { const { prompt, sessionId } = context.requestPayload as { prompt?: string; sessionId?: string; }; if (!prompt || !sessionId) { throw new Error("Prompt and sessionId are required"); } const streamKey = `llm:stream:${sessionId}`; await context.run("mark-stream-start", async () => { const metadataMessage: MetadataMessage = { type: MessageType.METADATA, status: StreamStatus.STARTED, completedAt: new Date().toISOString(), totalChunks: 0, fullContent: "", }; await redis.xadd(streamKey, "*", metadataMessage); await redis.publish(streamKey, { type: MessageType.METADATA }); }); const res = await context.run("generate-llm-response", async () => { const result = await new Promise<LLMStreamResponse>( async (resolve, reject) => { let fullContent = ""; let chunkIndex = 0; const { textStream } = streamText({ model: openai("gpt-4o"), prompt, onError: (err) => reject(err), onFinish: async () => { resolve({ success: true, sessionId, totalChunks: chunkIndex, fullContent }); }, }); for await (const chunk of textStream) { if (chunk) { fullContent += chunk; chunkIndex++; const chunkMessage: ChunkMessage = { type: MessageType.CHUNK, content: chunk }; await redis.xadd(streamKey, "*", chunkMessage); await redis.publish(streamKey, { type: MessageType.CHUNK }); } } }, ); return result; }); await context.run("mark-stream-end", async () => { const metadataMessage: MetadataMessage = { type: MessageType.METADATA, status: StreamStatus.COMPLETED, completedAt: new Date().toISOString(), totalChunks: res.totalChunks, fullContent: res.fullContent, }; await redis.xadd(streamKey, "*", metadataMessage); await redis.publish(streamKey, { type: MessageType.METADATA }); }); });</code></pre> <p>पूर्ण टाइप-सेफ्टी के लिए, मैंने Zod में सभी मैसेज स्कीमाज़ भी लिखीं:</p> <pre><code>import { z } from "zod"; export const MessageType = { CHUNK: "chunk", METADATA: "metadata", EVENT: "event", ERROR: "error", } as const; export const StreamStatus = { STARTED: "started", STREAMING: "streaming", COMPLETED: "completed", ERROR: "error", } as const; export const baseMessageSchema = z.object({ type: z.enum([MessageType.CHUNK, MessageType.METADATA, MessageType.EVENT, MessageType.ERROR]), }); export const chunkMessageSchema = baseMessageSchema.extend({ type: z.literal(MessageType.CHUNK), content: z.string(), }); export const metadataMessageSchema = baseMessageSchema.extend({ type: z.literal(MessageType.METADATA), status: z.enum([StreamStatus.STARTED, StreamStatus.STREAMING, StreamStatus.COMPLETED, StreamStatus.ERROR]), completedAt: z.string().optional(), totalChunks: z.number().optional(), fullContent: z.string().optional(), error: z.string().optional(), }); export const eventMessageSchema = baseMessageSchema.extend({ type: z.literal(MessageType.EVENT) }); export const errorMessageSchema = baseMessageSchema.extend({ type: z.literal(MessageType.ERROR), error: z.string() }); export const messageSchema = z.discriminatedUnion("type", [chunkMessageSchema, metadataMessageSchema, eventMessageSchema, errorMessageSchema]); export type Message = z.infer<typeof messageSchema>; export type ChunkMessage = z.infer<typeof chunkMessageSchema>; export type MetadataMessage = z.infer<typeof metadataMessageSchema>; export type EventMessage = z.infer<typeof eventMessageSchema>; export type ErrorMessage = z.infer<typeof errorMessageSchema>; export const validateMessage = (data: unknown): Message | null => { const result = messageSchema.safeParse(data); return result.success ? result.data : null; };</code></pre> <h3>स्ट्रीम कंज्यूमर</h3> <p>अंत में, आइए पूर्ण स्ट्रीम कंज्यूमर कार्यान्वयन पर एक नज़र डालें। यह रिप्लेसेबल कनेक्शन है जो क्लाइंट के कनेक्ट होने पर सभी अनदेखे चंक्स को स्वचालित रूप से भेजता है:</p> <pre><code>import { redis } from "@/utils" import { nanoid } from "nanoid" import { NextRequest, NextResponse } from "next/server" import { validateMessage, MessageType, type ErrorMessage } from "@/lib/message-schema" export const dynamic = "force-dynamic" export const maxDuration = 60 export const runtime = "nodejs" type StreamField = string type StreamMessage = [string, StreamField[]] type StreamData = [string, StreamMessage[]] const arrToObj = (arr: StreamField[]) => { const obj: Record<string, string> = {} for (let i = 0; i < arr.length; i += 2) { obj[arr[i]] = arr[i + 1] } return obj } const json = (data: Record<string, unknown>) => { return new TextEncoder().encode(`data: ${JSON.stringify(data)}\n\n`) } export async function GET(req: NextRequest) { const { searchParams } = new URL(req.url) const sessionId = searchParams.get("sessionId") if (!sessionId) { return NextResponse.json({ error: "Stream key is required" }, { status: 400 }) } const streamKey = `llm:stream:${sessionId}` const groupName = `sse-group-${nanoid()}` const keyExists = await redis.exists(streamKey) if (!keyExists) { return NextResponse.json({ error: "Stream does not (yet) exist" }, { status: 412 }) } try { await redis.xgroup(streamKey, { type: "CREATE", group: groupName, id: "0" }) } catch (_err) {} const response = new Response( new ReadableStream({ async start(controller) { const readStreamMessages = async () => { const chunks = (await redis.xreadgroup(groupName, `consumer-1`, streamKey, ">")) as StreamData[] if (chunks?.length > 0) { const [_streamKey, messages] = chunks[0] for (const [_messageId, fields] of messages) { const rawObj = arrToObj(fields) const validatedMessage = validateMessage(rawObj) if (validatedMessage) { controller.enqueue(json(validatedMessage)) } } } } await readStreamMessages() const subscription = redis.subscribe(streamKey) subscription.on("message", async () => { await readStreamMessages() }) subscription.on("error", (error) => { console.error(`SSE subscription error on ${streamKey}:`, error) const errorMessage: ErrorMessage = { type: MessageType.ERROR, error: error.message } controller.enqueue(json(errorMessage)) controller.close() }) req.signal.addEventListener("abort", () => { console.log("Client disconnected, cleaning up subscription") subscription.unsubscribe() controller.close() }) }, }), { headers: { "Content-Type": "text/event-stream", "Cache-Control": "no-cache, no-transform", Connection: "keep-alive", }, } ) return response }</code></pre> <h2>त्वरित सारांश और अंतिम शब्द</h2> <p>हमने अभी एक अत्यंत मजबूत LLM स्ट्रीम बनाई है जो नेटवर्क इंटरप्शन, पेज रिफ्रेश और यहां तक कि पूर्ण डिस्कनेक्शन को संभाल सकती है। यहां हमने क्या किया:</p> <ul> <li><p><strong>जनरेशन को डिलीवरी से डिकपल किया:</strong> LLM जनरेशन को क्लाइंट कनेक्शन से अलग करके, कंटेंट जनरेशन क्लाइंट समस्याओं की परवाह किए बिना जारी रहती है।</p></li> <li><p><strong>रेडिस स्ट्रीम्स का उपयोग करके पर्सिस्टेंट स्टोरेज:</strong> हम रेडिस स्ट्रीम्स का उपयोग एक पर्सिस्टेंट मैसेज ब्रोकर के रूप में कर रहे हैं ताकि LLM प्रतिक्रिया के प्रत्येक चंक को स्टोर किया जा सके जैसे ही यह उत्पन्न होता है।</p></li> <li><p><strong>रेडिस पब/सब के साथ रियल-टाइम अपडेट:</strong> हमने रेडिस पब/सब का उपयोग करके एक नोटिफिकेशन सिस्टम बनाया है जो स्ट्रीम कंज्यूमर्स को सूचित करता है जब नए चंक्स उपलब्ध होते हैं।</p></li> <li><p><strong>स्वचालित पुनः कनेक्शन:</strong> क्लाइंट किसी भी समय पुनः कनेक्ट कर सकता है और डिस्कनेक्ट के दौरान उत्पन्न कंटेंट सहित सभी कंटेंट को स्वचालित रूप से प्राप्त करता है, गारंटी के साथ बिना डुप्लिकेट या लापता चंक्स के।</p></li> <li><p><strong>सेशन प्रबंधन:</strong> हमने एक सेशन सिस्टम बनाया जो यूजर्स को एक ही समय में कई डिवाइस पर स्ट्रीम देखने की अनुमति देता है।</p></li> </ul> <p>बॉटम लाइन, हम अब अपने यूजर्स को एक असाधारण यूजर एक्सपीरियंस (UX) प्रदान कर रहे हैं। मैं वास्तव में इस दृष्टिकोण की सिफारिश करता हूं, खासकर यदि आप LLM चैट सेवा जैसा कुछ बना रहे हैं।</p> <p>पढ़ने के लिए धन्यवाद! यदि आपके पास कोई फीडबैक है या आप Upstash पर गेस्ट लेखक बनना चाहते हैं, तो <code>josh@upstash.com</code> पर संपर्क करें 🙌</p> </article> <div class="ad5"> <script language='javascript' src='/ad/w.js'></script> </div> <div id="turn-page" class="f-between"> <div class="page up f-align"> <i class="prev"></i> <a class='LinkPrevArticle' href='https://in.wsxdn.com/zx054r/kh546c/1005157099.html' >SQL प्रदर्शन बढ़ाएं: Drizzle ORM क्वेरीज़ के लिए Upstash Redis कैशिंग</a> <span></span> </div> <div class="page down f-align"> <a class='LinkNextArticle' href='https://in.wsxdn.com/zx054r/kh546c/1005157104.html' >5 मिनट में अपना मॉडल कॉन्टेक्स्ट प्रोटोकॉल (MCP) बनाएं – चरण-दर-चरण गाइड</a> <i class="next"></i> <span></span> </div> </div> </div> <aside class="box-r"> <section class="small-nav rList"> <p class=h4s> Redis </p> <ul class="f-between"> <li><a class='childclass' href='https://in.wsxdn.com/zx054r/us544m/' target="_self">सी प्रोग्रामिंग</a></li> <li><a class='childclass' href='https://in.wsxdn.com/zx054r/lj545d/' target="_self">C++</a></li> <li><a class='childclass' href='https://in.wsxdn.com/zx054r/kh546c/' target="_self">Redis</a></li> <li><a class='childclass' href='https://in.wsxdn.com/zx054r/om547h/' target="_self">Bash प्रोग्रामिंग</a></li> <li><a class='childclass' href='https://in.wsxdn.com/zx054r/ca548u/' target="_self">Python</a></li> <li><a class='childclass' href='https://in.wsxdn.com/zx054r/nl549f/' target="_self">Java</a></li> <li><a class='childclass' href='https://in.wsxdn.com/zx054r/sp550k/' target="_self">डेटाबेस</a></li> <li><a class='childclass' href='https://in.wsxdn.com/zx054r/zw551r/' target="_self">HTML</a></li> <li><a class='childclass' href='https://in.wsxdn.com/zx054r/ec552w/' target="_self">JavaScript</a></li> <li><a class='childclass' href='https://in.wsxdn.com/zx054r/lj553d/' target="_self">प्रोग्रामिंग</a></li> <li><a class='childclass' href='https://in.wsxdn.com/zx054r/tr554l/' target="_self">CSS</a></li> <li><a class='childclass' href='https://in.wsxdn.com/zx054r/hf555z/' target="_self">Ruby</a></li> <li><a class='childclass' href='https://in.wsxdn.com/zx054r/fd556x/' target="_self">SQL</a></li> <li><a class='childclass' href='https://in.wsxdn.com/zx054r/wu557p/' target="_self">iOS</a></li> <li><a class='childclass' href='https://in.wsxdn.com/zx054r/bz558t/' target="_self">Android</a></li> <li><a class='childclass' href='https://in.wsxdn.com/zx054r/pn559h/' target="_self">MongoDB</a></li> <li><a class='childclass' href='https://in.wsxdn.com/zx054r/ay560s/' target="_self">MySQL</a></li> <li><a class='childclass' href='https://in.wsxdn.com/zx054r/fc561x/' target="_self">C#</a></li> <li><a class='childclass' href='https://in.wsxdn.com/zx054r/cz565u/' target="_self">PHP</a></li> <li><a class='childclass' href='https://in.wsxdn.com/zx054r/nl571f/' target="_self">SQL Server</a></li> </ul> <strong class="f-center"> <img loading='lazy' src="https://in.wsxdn.com/css/img/xiala.svg" alt=""> </strong> </section> <aside class="rList"> <p class=h4s> Redis </p> <ul> <li> <a href="https://in.wsxdn.com/zx054r/kh546c/1005127781.html" class="t-over" title="AWS re:Invent 2020 में Redis Labs लाइव का अन्वेषण करें - वर्चुअल अनुभव">AWS re:Invent 2020 में Redis Labs लाइव का अन्वेषण करें - वर्चुअल अनुभव</a> </li> <li> <a href="https://in.wsxdn.com/zx054r/kh546c/1005128782.html" class="t-over" title="Redis हैश कमांड्स में मास्टर करें: HSET, HSETNX, HMSET - हैश फील्ड मान कुशलता से सेट करें">Redis हैश कमांड्स में मास्टर करें: HSET, HSETNX, HMSET - हैश फील्ड मान कुशलता से सेट करें</a> </li> <li> <a href="https://in.wsxdn.com/zx054r/kh546c/1005157178.html" class="t-over" title="Next.js में Upstash Redis के साथ फीचर फ्लैग लागू करें: सुरक्षित, लचीले रिलीज़ के लिए">Next.js में Upstash Redis के साथ फीचर फ्लैग लागू करें: सुरक्षित, लचीले रिलीज़ के लिए</a> </li> <li> <a href="https://in.wsxdn.com/zx054r/kh546c/1005127786.html" class="t-over" title="Redis Streams ने लगातार दूसरे वर्ष Datanami का सर्वश्रेष्ठ स्ट्रीमिंग एनालिटिक्स समाधान पुरस्कार जीता">Redis Streams ने लगातार दूसरे वर्ष Datanami का सर्वश्रेष्ठ स्ट्रीमिंग एनालिटिक्स समाधान पुरस्कार जीता</a> </li> <li> <a href="https://in.wsxdn.com/zx054r/kh546c/1005127826.html" class="t-over" title="Redis 7.0 RC1 जारी: उन्नत सुविधाएं और प्रदर्शन लाभ">Redis 7.0 RC1 जारी: उन्नत सुविधाएं और प्रदर्शन लाभ</a> </li> <li> <a href="https://in.wsxdn.com/zx054r/kh546c/1005127783.html" class="t-over" title="Redis Enterprise अब Azure Cache पर पब्लिक प्रीव्यू में">Redis Enterprise अब Azure Cache पर पब्लिक प्रीव्यू में</a> </li> <li> <a href="https://in.wsxdn.com/zx054r/kh546c/1005128309.html" class="t-over" title="Blitz.js और Upstash Redis के साथ स्केलेबल टू-डू ऐप बनाएं">Blitz.js और Upstash Redis के साथ स्केलेबल टू-डू ऐप बनाएं</a> </li> <li> <a href="https://in.wsxdn.com/zx054r/kh546c/1005127776.html" class="t-over" title="AWS Lambda और Redis Enterprise Cloud के साथ स्केलेबल सर्वरलेस ऐप्स बनाएं">AWS Lambda और Redis Enterprise Cloud के साथ स्केलेबल सर्वरलेस ऐप्स बनाएं</a> </li> <li> <a href="https://in.wsxdn.com/zx054r/kh546c/1005128701.html" class="t-over" title="Redis ZLEXCOUNT का उपयोग करके मान रेंज द्वारा सॉर्टेड सेट एलिमेंट्स गिनें">Redis ZLEXCOUNT का उपयोग करके मान रेंज द्वारा सॉर्टेड सेट एलिमेंट्स गिनें</a> </li> <li> <a href="https://in.wsxdn.com/zx054r/kh546c/1005157104.html" class="t-over" title="5 मिनट में अपना मॉडल कॉन्टेक्स्ट प्रोटोकॉल (MCP) बनाएं – चरण-दर-चरण गाइड">5 मिनट में अपना मॉडल कॉन्टेक्स्ट प्रोटोकॉल (MCP) बनाएं – चरण-दर-चरण गाइड</a> </li> <li> <a href="https://in.wsxdn.com/zx054r/kh546c/1005127746.html" class="t-over" title="Redis Enterprise के लिए SSL/TLS कनेक्शन में महारत: Java डेवलपर गाइड">Redis Enterprise के लिए SSL/TLS कनेक्शन में महारत: Java डेवलपर गाइड</a> </li> <li> <a href="https://in.wsxdn.com/zx054r/kh546c/1005127760.html" class="t-over" title="Redis क्रांति: तीन नवप्रवर्तक बायोटेक, मेडटेक, और रोबोटिक्स में सफलताओं के लिए Redis का उपयोग करते हैं">Redis क्रांति: तीन नवप्रवर्तक बायोटेक, मेडटेक, और रोबोटिक्स में सफलताओं के लिए Redis का उपयोग करते हैं</a> </li> <li> <a href="https://in.wsxdn.com/zx054r/kh546c/1005127831.html" class="t-over" title="Redis को विश्व स्तर पर स्केल करें: उच्च-उपलब्धता और कम लेटेंसी के लिए 90-सेकंड गाइड">Redis को विश्व स्तर पर स्केल करें: उच्च-उपलब्धता और कम लेटेंसी के लिए 90-सेकंड गाइड</a> </li> </ul> </aside> </aside> </div> <div class="container box4-2"> <div class="lanmu-list f-between"> <div class="lanmu"> <ol> <li> <div class="img-block"> <a href="https://in.wsxdn.com/zx054r/ec552w/1005153231.html" class="i-box"> <img src='/article/uploadfiles/202605/2026050121471295_S.jpg' loading='lazy' width='300' height='210' alt='Node.js में महारत: महत्वाकांक्षी बैकएंड डेवलपर्स के लिए शीर्ष पाठ्यक्रम, किताबें और संसाधन' border='0'> </a> <span> <a href="https://in.wsxdn.com/zx054r/ec552w/1005153231.html" class="r-over r-over-2" title="Node.js में महारत: महत्वाकांक्षी बैकएंड डेवलपर्स के लिए शीर्ष पाठ्यक्रम, किताबें और संसाधन"> Node.js में महारत: महत्वाकांक्षी बैकएंड डेवलपर्स के लिए शीर्ष पाठ्यक्रम, किताबें और संसाधन </a> <p> Node.js क्या है? Node.js एक ओपन-सोर्स, क्रॉस-प्लेटफॉर्म जावास्क्रिप्ट रनटाइम वातावरण है जिसका उपयोग ब्राउज़र के बाहर जावास्क्रिप्ट निष्पादित करने के लिए किया जाता है। यह फ्रंटएंड डेवलपर्स के लिए सीखने के लिए एक हल्का और आसान फ्रेमवर्क है क्योंकि यह बिना किसी अन्य भाषा को सीखे जावास्क्रिप्ट को बैकएंड </p> </span> </div> </li> </ol> </div> <div class="lanmu"> <ol> <li> <div class="img-block"> <a href="https://in.wsxdn.com/zx054r/ca548u/1005095439.html" class="i-box"> <img src='/article/uploadfiles/202204/2022040222285516_S.jpg' loading='lazy' width='300' height='210' alt='TKinter Listbox में विशिष्ट आइटम को सीधे कैसे संशोधित करें?' border='0'> </a> <span> <a href="https://in.wsxdn.com/zx054r/ca548u/1005095439.html" class="r-over r-over-2" title="TKinter Listbox में विशिष्ट आइटम को सीधे कैसे संशोधित करें?"> TKinter Listbox में विशिष्ट आइटम को सीधे कैसे संशोधित करें? </a> <p> Tkinter एक Python-आधारित GUI एप्लिकेशन डेवलपमेंट लाइब्रेरी है जिसका उपयोग आमतौर पर उपयोगी कार्यात्मक डेस्कटॉप एप्लिकेशन बनाने के लिए किया जाता है। Listbox विजेट एक और Tkinter विजेट है, जिसका उपयोग Listbox के रूप में आइटम की सूची प्रदर्शित करने के लिए एक कंटेनर के रूप में किया जाता है। Listbox विजेट </p> </span> </div> </li> </ol> </div> <div class="lanmu"> <ol> <li> <div class="img-block"> <a href="https://in.wsxdn.com/zx054r/tr554l/1005063361.html" class="i-box"> <img src='/article/uploadfiles/202203/2022033115375980_S.jpg' loading='lazy' width='300' height='210' alt='CSS से Em का उपयोग करके फॉन्ट साइज़ सेट करना' border='0'> </a> <span> <a href="https://in.wsxdn.com/zx054r/tr554l/1005063361.html" class="r-over r-over-2" title="CSS से Em का उपयोग करके फॉन्ट साइज़ सेट करना"> CSS से Em का उपयोग करके फॉन्ट साइज़ सेट करना </a> <p> स्केलेबल टेक्स्ट साइज़ के लिए, font-size को em में व्यक्त किया जाता है। डिफ़ॉल्ट रूप से एक em 16px या 12pt के बराबर होता है। इसका मान पैरेंट एलिमेंट के font-size के सापेक्ष होता है।सिंटैक्सCSS font-size प्रॉपर्टी का सिंटैक्स निम्नलिखित है:Selector { font-size: /*value*/ }उदाहरणनिम्नलिखित उदाहरण दर्श </p> </span> </div> </li> </ol> </div> </div> </div> <footer> <section class="container f-between f-align"> <a href="https://in.wsxdn.com" class="logo"> <img loading='lazy' src="https://in.wsxdn.com/css/img/logo.svg" alt="कंप्यूटर"> </a> <span class="f-end"> © कॉपीराइट <a href="https://in.wsxdn.com">https://in.wsxdn.com</a> सर्वाधिकार सुरक्षित </span> </section> </footer> </body> </html>