كيفية بث استجابة OpenAI في NextJS

ملخص:

تعرف على كيفية بث استجابات OpenAI بسلاسة في NextJS باستخدام Vercel's AI SDK. من خلال عملية تكامل بسيطة موضحة في هذا الدليل، يمكن للمطورين الاستفادة بكفاءة من قوة إنشاء الذكاء الاصطناعي في الوقت الفعلي، مما يعزز تجارب المستخدم وكفاءة سير العمل.

في المشهد الرقمي سريع التطور اليوم، أصبح دمج قدرات الذكاء الاصطناعي المتقدمة أمرًا ضروريًا للشركات التي تسعى جاهدة للحفاظ على قدرتها التنافسية. باعتبارنا شركة تطوير OpenAI، فإن تسخير قوة التقنيات المتطورة مثل NextJS لتبسيط عملية إنشاء وإدارة استجابات OpenAI يقدم العديد من المزايا.

بدءًا من تعزيز تجربة المستخدم وحتى تحسين كفاءة سير العمل، يمكن لخبرة شركة تطوير OpenAI أن تؤثر بشكل عميق على التكامل السلس والاستفادة من قدرات OpenAI ضمن إطار عمل NextJS. في هذا الدليل، نتعمق في الاستراتيجيات والرؤى الأساسية لشركات تطوير OpenAI لتسخير إمكانات NextJS بشكل فعال في تبسيط استجابات OpenAI، وبالتالي تمكين الشركات من فتح مجالات جديدة من الابتكار والكفاءة.

نحن نعلم أنك قد شعرت بالإحباط وكنت تتصفح دفق استجابات OpenAI في NextJS. هناك العديد من الطرق لدفق استجابة OpenAI وأيضًا هناك الكثير مما يجب القيام به بعد الدفق الذي يقوم بتحليل البيانات لجعلها قابلة للقراءة.

ملاحظة: سنستخدم NextJS وVercel AI SDK في جميع أنحاء المدونة.

ما هو Next.js؟

Next.js هو إطار عمل React لبناء تطبيقات ويب متكاملة. يمكنك استخدام React Components لإنشاء واجهات المستخدم، وNext.js للحصول على ميزات وتحسينات إضافية.

تحت الغطاء، يقوم Next.js أيضًا بتجريد الأدوات اللازمة لـ React وتكوينها تلقائيًا، مثل التجميع والترجمة والمزيد. يتيح لك هذا التركيز على بناء التطبيق الخاص بك بدلاً من قضاء الوقت في التكوين.

سواء كنت مطورًا فرديًا أو جزءًا من فريق أكبر، يمكن أن يساعدك Next.js في إنشاء تطبيقات React تفاعلية وديناميكية وسريعة.

ما هو فيرسل؟

Vercel عبارة عن منصة للمطورين توفر الأدوات وسير العمل والبنية التحتية التي تحتاجها لإنشاء تطبيقات الويب الخاصة بك ونشرها بشكل أسرع، دون الحاجة إلى تكوين إضافي.

تدعم Vercel أطر عمل الواجهة الأمامية الشائعة والجاهزة، ويتم توزيع بنيتها التحتية الآمنة والقابلة للتطوير عالميًا لخدمة المحتوى من مراكز البيانات القريبة من المستخدمين للحصول على سرعات مثالية.

ما هي العلاقة بين Vercel و Nextjs؟

تم إنشاء منصة Vercel بواسطة منشئي Next.js، والمصممة لتطبيقات Next.js. في الختام، تمثل العلاقة بين Vercel وNext.js شراكة تكافلية تعيد تعريف الطريقة التي نبني بها تطبيقات الويب وننشرها. ومن خلال الاستفادة من نقاط القوة في كلا المنصتين، يمكن للمطورين فتح إمكانيات جديدة وتقديم تجارب ويب استثنائية تبرز في المشهد التنافسي اليوم.

أثناء التطوير، توفر Vercel أدوات للتعاون في الوقت الفعلي في مشاريعك مثل المعاينة التلقائية وبيئات الإنتاج والتعليقات على عمليات نشر المعاينة.

كيف يمكننا جعل البث أسهل باستخدام Vercel وNextJS؟

في يونيو 2023، أصدرت Vercel مكتبة جديدة ai (Vercel AI SDK) والتي توفر محولات LLM المضمنة / مساعدي واجهة المستخدم الأولى للبث / مساعدي البث وعمليات الاسترجاعات. منذ هذه المكتبة، أصبح بث استجابة OpenAI أسهل بكثير.

قبل التعمق في أحد الأمثلة، دعني أخبرك ما هي مكتبات/أطر العمل التي تدعمها Vercel AI SDK.

وهو يدعم React/Next.js، وSvelte/SvelteKit، مع دعم Nuxt/Vue قريبًا.

مثال - الواجهة الأمامية/الخلفية في NextJS (إطار عمل رد الفعل)

الخطوة 1: إنشاء تطبيق NextJS وتثبيت Vercel AI SDK

npx create-next-app@latest

لتثبيت SDK، أدخل الأمر التالي في جهازك الطرفي:

npm ومنظمة العفو الدولية

لتثبيت Openai، أدخل الأمر التالي في جهازك الطرفي:

npm وفتح

لقد اتبعت للتو بنية المجلد البسيط/الافتراضي لما أنشأه npx create-next-app@latest لي لجعل هذا العرض التوضيحي بسيطًا وسهل الفهم.

الخطوة 2: إنشاء صفحة أمامية لدفق الاستجابة

"استخدام العميل"

استيراد { useState } من "رد الفعل"؛

تصدير الوظيفة الافتراضية الصفحة الرئيسية () {

const [سؤال، setQuestion] = useState("")

const [answer, setAnswer] = useState("")

/// وظيفة لاستدعاء جهاز توجيه openai ومعالجة استجابة البث

وظيفة غير متزامنة retriveResponse() {

/// اتصل بالطريق

استجابة ثابتة: أي = انتظار الجلب("/api/chat"، {

الطريقة: "POST"،

الجسم: JSON.stringify({

سؤال

}),

التالي: { إعادة التحقق: 0 }

})

دع resptext = "";

قارئ ثابت = Response.body

.pipeThrough (جديد TextDecoderStream ())

.getReader();

/// يتابع الدفق

احيانا صحيح) {

const { القيمة، تم } = انتظار Reader.read();

إذا (تم) {

استراحة؛

}

resptext += القيمة؛

setAnswer(resptext);

}

}

يعود (

<ديف>

<label htmlFor="اطرح سؤالك"></label>

<input type="text" value={question} onChange={(e)=>setQuestion(e.target.value)}/>

<button onClick={retrivResponse}>استجابة البث</button>

<br />

<p>{answer}</p>

</div>

);

}

يقوم المكون أعلاه بإنشاء واجهة حيث يمكن للمستخدمين إدخال الأسئلة، والنقر فوق زر لإرسال السؤال إلى واجهة برمجة التطبيقات (API) من جانب الخادم (/api/chat)، وعرض استجابة البث من الخادم في الوقت الفعلي

الخطوة 3: إنشاء مسار خلفي لدفق الاستجابة

يحدد الكود أعلاه وظيفة بدون خادم تتلقى سؤالاً من طلب HTTP، وترسله إلى OpenAI API للمعالجة، وترسل الرد مرة أخرى إلى العميل.

الخطوة 4: قم بتشغيل التطبيق

تشغيل npm ديف

انتاج |

Video.webm

فيديو التجريبي

Drive.google.com

إذا كنت قد شاهدت الفيديو، فمن المحتمل أن يكون لديك فهم جيد لكيفية عمل العرض التوضيحي. بالنسبة للمهتمين باستكشاف الكود الكامل، يمكنك العثور عليه على GitHub على هذا الرابط: Next.js OpenAI Streaming.

مراجع:

https://vercel.com/blog/introducing-the-vercel-ai-sdk

https://sdk.vercel.ai/docs https://platform.openai.com/docs/introduction

https://platform.openai.com/docs/introduction

للبقاء على اطلاع بأحدث التطورات في مجال الذكاء الاصطناعي، يُنصح بمراقبة وثائق الذكاء الاصطناعي الخاصة بشركة Vercel. تأكد من ترقب التحديثات والتحسينات حيث تواصل Vercel تطوير عروضها في مجال الذكاء الاصطناعي.