تصميم واجهات البث المباشر

استجابة البث هي أقل الأسطح اهتماماً بالتصميم في البرمجيات الحديثة. معظم الفرق كتبت hook بـ TypeScript يستدعي fetch، وربطته بـ div، وسمّت ذلك تصميم منتج. النتيجة آلة كاتبة تتظاهر بأنها واجهة.

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

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

واجهة البث سطح كامل، وليست حلقة fetch

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

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

Cursor وClaude وv0 وLovable وLinear AI وRaycast AI. لا أحد منها يعامل البث كمخرجات توكنات خام. كل منها يشحن سطحاً منظماً. هذا هو المعيار.

الطبقات الخمس لسطح بث عظيم

خمس طبقات، بالترتيب الذي يمر به المستخدم. واجهة بث تشحن أقل من أربع منها ناقصة.

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

الطبقة 1: زمن أول توكن

أول 200 ميلي ثانية تقرر هل يثق المستخدم بالسطح. أقل من 200ms مع إشارة استجابة حقيقية تبدو فورية. وبعد 800ms بلا أي استجابة، يكون المستخدم قد قرر أن المنتج معطل.

الخيارات ملموسة. عنصر هيكلي مؤقت يحجز منطقة المخرجات مسبقاً. مؤشر وامض. نقاط كتابة. أو بادئة بث حيث تصل عبارة معروفة مثل "إليك" خلال 300ms قبل المحتوى.

نقاط ChatGPT الثلاث تنجح لأنها صادقة. نبض Claude المتدرج هو الترقية، شريط متحرك ناعم يدل على أن السطح حي دون الالتزام بمحتوى مزيف. Cursor يعرض خط مؤشر رفيعاً وشارة حالة تسمّي ما يحدث. في كل الحالات يرى المستخدم شيئاً خلال 200ms.

الفراغ هو الفشل. منطقة فارغة تتجمد 600ms تعلّم المستخدم أن الذكاء الاصطناعي شيء يُنتظر. اشحن المؤشر قبل أن تشحن النموذج.

الطبقة 2: إيقاع التوكنات

تدفقات التوكنات الخام متقطعة. نموذج يُخرج أربعة توكنات ثم عشرين ثم واحداً يبدو كطرفية معطلة حتى لو كان التسليم الأساسي سليماً. الإيقاع قرار تصميمي.

الحل هو إيقاع مُنعَّم. خزّن التوكنات الواردة لمدة 30 إلى 60 ميلي ثانية، ثم اعرضها بمعدل ثابت. يقرأ المستخدم بسرعة 250 إلى 400 كلمة في الدقيقة، فالهدف بث يصل بسرعة القراءة أو أعلى قليلاً دون قفزات. Claude اعتمد هذا الانضباط مبكراً.

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

المؤشر مهم. مؤشر يتبع آخر توكن معروض، مع خفوت ناعم خلفه، يثبّت العين. بدونه تقفز عين المستخدم باحثة عن مكان البث. اسم المؤشر في Cursor داخل composer ليس مصادفة.

الطبقة 3: الالتزام البنيوي

أصعب طبقة. النثر المسطح سهل. أما البث الذي يلتزم بقائمة أو جدول أو كتلة شيفرة أو مخطط في منتصف الاستجابة فهو حيث تنكسر معظم الأسطح.

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

النسخة الصحيحة تلتزم بالبنية لحظة إمكان اكتشافها، ثم تبث المحتوى داخل التخطيط الملتزم به دون إعادة تدفق. القائمة تحجز مكانها لحظة وصول أول شرطة. كتلة الشيفرة تحجز لوحة أحادية المسافة عند الأقواس الخلفية الثلاثة. الجدول يلتزم بعدد الأعمدة فوراً. بث الـ diff في Cursor هو المثال الكلاسيكي. لوحة الـ diff تحجز التخطيط، ومسارات الملفات تصل أولاً، والأسطر تتدفق إلى صفوف محجوزة مسبقاً. بث v0 الواعي بالتحديد يشحن النمط نفسه من جهة القماش.

اقتراحات Linear AI المنظمة تشحن الالتزام دون أن تُري المستخدم حالة "جارٍ التحميل" أبداً. يصل الاقتراح ككائن مكتوب النوع، وتمتلئ الحقول بترتيب الاعتماد، ولا يتعطل سير العمل. Linear يشحن عملاً، والآخرون يشحنون محاضر.

الطبقة 4: المقاطعة والتعديل

واجهة بث بلا مقاطعة عدائية. المستخدم يشاهد النموذج يكتب شيئاً يعرف أنه خاطئ، والمخرج الوحيد هو إغلاق التبويب. هذا ليس منتجاً. إنه حالة رهائن مع عداد توكنات.

زر الإيقاف هو أرخص عنصر على السطح وأعلاها أثراً. ظاهر من التوكن الأول، لا بعد التوكن 100. Claude وCursor وChatGPT وv0 كلها تشحن واحداً. معظم واجهات الدردشة محلية الصنع تنساه.

المقاطعة هي الحد الأدنى. التعديل هو السقف. النمط الذي لم تستحقه معظم الفرق هو التعديل الحي، حيث يراجع المستخدم الـ prompt في منتصف البث ويعيد السطح توجيه نفسه. القبول والرفض أثناء البث في Cursor هو أقرب نسخة مشحونة. يقرأ المستخدم الـ diff وهو يصل، ويقبل الأجزاء الصالحة، ويرفض الباقي. هذه حلقة تفاعل حقيقية.

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

الطبقة 5: الاكتمال وما بعد البث

لحظة انتهاء البث لحظة تصميمية. معظم المنتجات تعاملها كأنها لا شيء. يتوقف البث، يختفي المؤشر، ويحدق المستخدم في جدار نص متسائلاً ماذا يفعل بعد ذلك.

تجسيد الـ artifact في Claude هو المعيار الذهبي. النص المتدفق يحصل على إشارة اكتمال هادئة، وتتبدل لوحة الـ artifact من معاينة متدفقة إلى سطح تفاعلي في الإيقاع نفسه. المستخدم ليس "انتهى من القراءة"، بل صار "داخل الـ artifact". الانتقال هو الفكرة كلها.

تبديل المعاينة في v0 هو النسخة من جهة التصميم. تنتهي الشيفرة المتدفقة، يُعاد تحميل iframe المعاينة الحية بالبناء النهائي، ويظهر زر النشر. ثلاث حالات، انتقال واحد، بلا فراغ.

قبول الـ diff في Cursor هو النمط الثالث. ينتهي البث، يبقى الـ diff قابلاً للتعديل، يبقى القبول والرفض، ولا يُثبَّت الملف حتى يقول المستخدم ذلك. البث انتهى، والقرار لم ينتهِ. هذا الفصل هو ما يجعل السطح يبدو أداة لا سجل دردشة.

النسخة السيئة تنهي البث ولا تشحن شيئاً. يختفي المؤشر، يبقى النثر جالساً، وينسخ المستخدم النص إلى أداة أخرى ليستخدمه فعلاً. خط نسخ ولصق مع نموذج ملحق به.

تحليلات لمنتجات حقيقية

Cursor يشغّل بث composer مع تجسيد الـ diff. Composer يبث الخطة، ولوحة الـ diff تبث الرقعة، والقبول والرفض يبقيان حيين، وحالة ما بعد البث هي diff معلق يملكه المستخدم. كل طبقة تُصاب.

Claude يشحن إيقاع توكنات منعّماً وتبديل لوحة الـ artifact. نبض متدرج قبل أول توكن، إيقاع ثابت، تجسيد الـ artifact عند الاكتمال، وسجل محادثة يتفرع. يبدو السطح مصمماً لأن كل انتقال كان كذلك.

v0 يشحن بثاً مدفوعاً بالتحديد مع معاينة حية. ينقر المستخدم منطقة من القماش، فيحدد الـ prompt نطاقه بنفسه، ويصل البث كشيفرة وكمعاينة تتبدل في الـ iframe. الاكتمال يسلّم إلى زر نشر.

ChatGPT هو الخط الأساسي. بث توكنات مع استجابة ثلاث نقاط، وإعادة توليد كاستبدال، وتفريع من هنا كإضافة حديثة. افتراضي الفئة، لا المعيار.

Vercel AI Playground وLovable وAnthropic Computer Use وRaycast AI وGitHub Copilot Workspace كل منها يشحن شرائح. Vercel يعرض منتقي النموذج حياً أثناء البث. Lovable يشغّل نمط البث إلى تطبيق، فيشاهد المستخدم تطبيقه يُبنى لحظة بلحظة. Computer Use يبث لقطات الشاشة وأثر الاستدلال بالتوازي. Raycast يبث داخل سطح مصغر شبيه بلوحة الأوامر. Copilot Workspace يشحن بث خطّط ثم نفّذ مع نقاط تفتيش.

القواعد الخمس

1. اعرض استجابة خلال 200 ميلي ثانية. مؤشر، نبض، نقطة كتابة، بادئة بث. أي شيء إلا الفراغ.
2. نعّم الإيقاع. خزّن بث الشبكة، اعرض بسرعة القراءة، وثبّت المؤشر. التقطع فشل تصميمي، لا حالة شبكة.
3. التزم بالبنية دون إعادة تدفق. احجز التخطيط لحظة اكتشاف قائمة أو جدول أو كتلة شيفرة. لا تعد التدفق أبداً.
4. اشحن زر الإيقاف قبل التوكن 100. ظاهر. سهل الوصول. نقرة واحدة. بلا استثناءات.
5. صمم اللحظة التي تلي البث بعناية البث نفسه. الاكتمال تسليم. والتسليم هو المنتج.

الأنماط المضادة التي تقتل البث في الإنتاج

المؤشر الدوار الميت. مؤشر دوار يعمل بينما يبث النموذج خلف طبقة عرض مغلقة. احذف المؤشر الدوار. اشحن البث.

تقطع التوكنات. مخرجات توكنات خام بلا تخزين مؤقت، والإيقاع يتأرجح بين اندفاعات وتوقفات. نعّمه.

التمرير التلقائي الذي يحارب المستخدم. الصفحة تتمرر تلقائياً لتتبع البث بينما يقرأ المستخدم فقرة سابقة. اكتشف التمرير اليدوي، وأوقف التمرير التلقائي حتى يعيد المستخدم التثبيت. Claude وCursor يعالجان هذا.

خطأ غياب زر الإيقاف. المقاطعة مدفونة في قائمة الإعدادات، أو تظهر بعد 30 ثانية فقط، أو غير موجودة. اجعلها ظاهرة من التوكن الأول.

البث الذي ينتهي ويترك المستخدم يحدق. لا إشارة اكتمال، ولا خطوة تالية. صمم ما بعد البث.

إعادة التوليد التدميرية. الاستجابة الجديدة تكتب فوق القديمة، ويخسر المستخدم النسخة التي أعجبته. أعد التوليد كفرع، لا كاستبدال أبداً.

markdown خام كبث. العارض يعيد التدفق مع كل جزء، والصفحة تقفز. التزم بالبنية مرة واحدة، وابث داخل تخطيط محجوز.

الإصلاحات صغيرة. الأسطح التي تشحنها تبدو كعام 2026. والتي لا تفعل تبدو كأشرطة دردشة جانبية من 2022 موصولة بنموذج من 2026.

تدقيق سطح البث

شغّل هذه الفحوص على أي سطح بث للذكاء الاصطناعي قبل إطلاقه.

1. أول استجابة. هل يعرض السطح شيئاً خلال 200 ميلي ثانية من الإرسال؟
2. الإيقاع. هل تدفق التوكنات منعّم إلى سرعة القراءة، أم تقطع شبكة خام؟
3. الالتزام البنيوي. هل يحجز السطح التخطيط للقوائم والجداول وكتل الشيفرة قبل وصول المحتوى؟
4. إمكانية الإيقاف. هل زر الإيقاف ظاهر من أول توكن، وبنقرة واحدة؟
5. إمكانية التعديل. هل يستطيع المستخدم المراجعة أو القبول أو الرفض في منتصف البث؟
6. تصميم الاكتمال. هل تسلّم لحظة انتهاء البث إلى خطوة تالية حقيقية؟
7. الناتج بعد البث. هل المخرجات تفاعلية بعد البث، أم مجرد محضر مجمد؟

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

الفرق التي تشحن أسطح بث بهذه العناية هي نفسها التي تعامل أسطح الـ prompt كمكوّنات حقيقية من جهة المدخل، وتصمم لـزمن استجابة الذكاء الاصطناعي على مستوى النظام. اجمعها مع الحالات الفارغة وأنماط واجهات الوكلاء وإشارات الثقة لتستحق مخرجات البث أن تُقرأ.

الأسئلة الشائعة

ما هو تصميم واجهات البث؟

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

لماذا يبدو بث التوكنات مختلفاً بين المنتجات؟

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

ما هو أشيع خطأ في واجهات البث؟

شحن بث بلا زر إيقاف ظاهر. يشاهد المستخدم النموذج يكتب شيئاً يعرف أنه خاطئ ولا مخرج أمامه. إخفاقات شائعة أخرى: المؤشرات الدوارة الميتة، والتمرير التلقائي الذي يحارب المستخدم، وإعادة التوليد التدميرية، وmarkdown خام يعيد التدفق مع كل جزء، واكتمال يسلّم إلى لا شيء. كل واحد منها قابل للإصلاح بتغيير صغير في السطح.

ابنِ البث كأنه القماش

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

اشحن الطبقات الخمس. شغّل التدقيق. تجنب الأنماط المضادة. المنتج الذي يخرج من الجهة الأخرى يبدو أداة بدل شريط دردشة جانبي يتظاهر بأنه أداة.

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