بث استجابات الذكاء الاصطناعي في واجهة المستخدم
تعلّموا كيفية بث مخرجات الذكاء الاصطناعي رمزًا تلو الآخر إلى الواجهة الأمامية، كي يبدو SaaS الذكي سريعًا وسريع الاستجابة بدلًا من أن يتجمد أثناء عمليات التوليد الطويلة.
بث استجابات الذكاء الاصطناعي في واجهة المستخدم درس مجاني في AI SaaS Builder على CoddyKit. هذا هو الدرس 4 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في AI SaaS Builder، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة AI SaaS Builder 4 دروس في المجموع.
لماذا يحسّن البث تجربة المستخدم؟
إن انتظار 10 ثوانٍ للحصول على إجابة كاملة يجعل التطبيق يبدو معطّلًا. ويعرض البث النص أثناء إنشائه، مما يجعل التطبيق يبدو سريعًا وحيويًا.
كيف يعمل البث؟
يُصدر النموذج الرموز تدريجيًا. ويمرّر الخادم كل جزء إلى المتصفح، الذي يضيفه إلى الشاشة.
الأحداث المرسلة من الخادم
إن SSE عبارة عن تدفق أحادي الاتجاه بسيط من الخادم إلى العميل عبر HTTP، وهو مثالي لبث الرموز.
res.setHeader('Content-Type', 'text/event-stream')
res.write('data: Hello\n\n')
res.write('data: world\n\n')استهلاك التدفق على العميل
استخدموا قارئ التدفق في Fetch (أو EventSource) لقراءة الأجزاء وتحديث الحالة عند وصولها.
const reader = res.body.getReader()
while (true) {
const { value, done } = await reader.read()
if (done) break
appendText(new TextDecoder().decode(value))
}العرض التدريجي
أضيفوا الأجزاء إلى مخزن مؤقت للحالة ثم اعرضوها. تجنّبوا إعادة عرض الصفحة بأكملها مع كل رمز للحفاظ على سلاسة واجهة المستخدم.
setText(prev => prev + chunk)إظهار مؤشر الكتابة
قبل وصول الرمز الأول، اعرضوا رسمًا متحركًا للتحميل أو للمؤشر حتى يعرف المستخدمون أن المعالجة بدأت.
التعامل مع الإلغاء
اسمحوا للمستخدمين بإيقاف عملية إنشاء المحتوى الطويلة. أوقفوا الطلب لتوفير الرموز والمال.
const controller = new AbortController()
fetch('/generate', { signal: controller.signal })
// stop button:
controller.abort()عرض Markdown بأمان
قد يُعرض Markdown الجزئي بطريقة غريبة أثناء التدفق. اعرضوه تدريجيًا، لكن نقّوا HTML النهائي لمنع الحقن.
معالجة الأخطاء أثناء التدفق
قد تفشل التدفقات في منتصف العملية. اكتشفوا التدفق المنقطع واعرضوا خيارًا واضحًا لإعادة المحاولة بدلًا من ترك نص مبتور.
اعتبارات إمكانية الوصول
قد يُربك النص الذي يتحدّث بسرعة برامج قراءة الشاشة. استخدم مناطق حية من النوع polite وأعلن اكتمال العملية، لا كل رمز مميز.
<div aria-live="polite">{streamedText}</div>متى لا ينبغي استخدام البث
بالنسبة إلى المخرجات المهيكلة القصيرة، مثل كائن JSON واحد، يضيف البث تعقيدًا مع فائدة محدودة. احجزه للنصوص الطويلة والقابلة للقراءة البشرية.
اختبار سريع
اختبروا معرفتكم بالبث.
مراجعة
تعلّمتم كيفية عمل بث الرموز المميزة، وكيفية تقديمه باستخدام SSE واستهلاكه على العميل وعرضه تدريجيًا وإظهار مؤشرات الكتابة ودعم الإلغاء ومعالجة الأخطاء أثناء البث والحفاظ على إمكانية الوصول، ومتى لا يستحق البث الاستخدام.
الأسئلة الشائعة
هل درس «بث استجابات الذكاء الاصطناعي في واجهة المستخدم» مجاني؟
نعم — نص درس «بث استجابات الذكاء الاصطناعي في واجهة المستخدم» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة AI SaaS Builder، انتقل إلى CoddyKit PRO. تتضمن دورة AI SaaS Builder 4 دروس في المجموع.
ماذا ستتعلم في «بث استجابات الذكاء الاصطناعي في واجهة المستخدم»؟
تعلّموا كيفية بث مخرجات الذكاء الاصطناعي رمزًا تلو الآخر إلى الواجهة الأمامية، كي يبدو SaaS الذكي سريعًا وسريع الاستجابة بدلًا من أن يتجمد أثناء عمليات التوليد الطويلة. تتمرن على AI SaaS Builder مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ AI SaaS Builder؟
لا تُشترط خبرة سابقة. AI SaaS Builder على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 4 من أصل 4.
كم من الوقت يستغرق درس «بث استجابات الذكاء الاصطناعي في واجهة المستخدم»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس AI SaaS Builder هذا؟
نعم. كل درس في AI SaaS Builder يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- أطر الواجهة الأمامية لـ SaaS
- تصوير مخرجات الذكاء الاصطناعي
- أفضل ممارسات تجربة المستخدم (UX)
- بث استجابات الذكاء الاصطناعي في واجهة المستخدم