واجهة المستخدم التوليدية... بلغة بايثون؟ — جيرمياة لوين، Prefect

AAI Engineer
컴퓨터/소프트웨어AI/미래기술

스크립트

00:00:00شكرًا لكم جميعًا على الحضور. سأتحدث اليوم عن واحدة من أغرب قطع البرمجيات
00:00:18التي كتبتها على الإطلاق. إنها نوعًا ما على حدودالكثير من الأشياء التي كنت أطرحها
00:00:22في العالم. لذا انضموا إلي إن شئتم. سنحاول تبني النهج الأكثر عقلانية
00:00:27جاهزية لشيء غريب للغاية أتاحته الوكلاء في بروتوكول MCP وأشياء أخرى. وإبداعًا للحديث،
00:00:34أريد أن أتحدث عن تطبيقات MCP. لا أعرف إن كان أي منكم قادرًا على الانضمام إلى أي من المحادثات
00:00:38الأخرى في وقت سابق اليوم، ربما تلك التي قدمها إيدو وليات قبل ساعة تقريبًا. برفع الأيدي فقط،
00:00:44هل أنتم معتادون على تطبيقات MCP؟ حسنًا، هذا على الأرجح أفضل جمهور ألقيت عليه هذه المحادثة على الإطلاق،
00:00:52في الواقع. لذا فهذا رائع. بالنسبة لأولئك الذين لم يرفعوا أيديهم، تطبيقات MCP هي
00:00:57امتداد لبروتوكول MCP الذي تم تقديمه، أعتقد، في يناير من هذا العام. والفكرة هي،
00:01:02هذه دورة طلب واستجابة نموذجية لأداة MCP. يقوم المستخدم بتقديم طلب إلى الوكيل. و
00:01:10بدوره، يقرر الوكيل استخدام أداة MCP مستضافة على خادم MCP. تعود نتيجة الأداة
00:01:16إلى سياق الوكيل. ويختار الوكيل صياغة بعض الردود وإرسالها إلى المستخدم. ولذلك،
00:01:23أساسًا، تعد خوادم MCP طرقًا رائعة لإضافة الوظائف ومنطق الأعمال إلى وكلائك،
00:01:28ولكن لا يوجد أبدًا اتصال مباشر بين المستخدم وخادم MCP. إنه يمر دائمًا عبر عقل
00:01:34الوكيل، والأهم من ذلك، عبر نافذة سياق الوكيل. لذا، فإن تطبيقات MCP هي امتداد لهذا،
00:01:40مما يتيح لنا فعليًا تجاوز الوكيل. وبدلًا من ذلك، يحدث ما يلي:
00:01:44يطلب المستخدم شيئًا من الوكيل، فيستخدِم الوكيل أداةً، ولكن بدلاً من أن يعود طلب تلك الأداة
00:01:49إلى الوكيل، يتم إرساله إلى المستخدم. ويتم إرساله في شكل HTML وCSS وJavaScript. إنها واجهة مستخدم كاملة.
00:01:55ويمكن أن تكون ما تريده تمامًا. لذا، الفكرة هي أن لديك هذه الطريقة لجعل، لوضع
00:02:01الإنترنت داخل وكيلك، إن صح التعبير. يمكنك شحن أي واجهة مستخدم مفيدة ومخصصة تحمل علامتك التجارية تريدها. ويمكنك
00:02:08السماح للمستخدم بالحصول على أي تجربة تفاعلية يريدها. ومن ثم يمكن للمستخدم، كما ترون في
00:02:12الرسم التخطيطي، أن يتفاعل الآن مع التطبيق. يمكنهم استخدام الأدوات. يمكنهم إرسال
00:02:17المعلومات مرة أخرى إلى الواجهة الخلفية، المستضافة على هذا التطبيق، والحصول حقًا على تجربة كاملة. لذا، يمكنك تخيل
00:02:21حجز طاولة في مطعم، أو تغيير مقعدك على متن طائرة، أو التفاعل مع جدول زمني.
00:02:28بالنسبة لمهندسي الذكاء الاصطناعي، هناك الكثير من الأشياء التي يمكنك القيام بها كمسخدم الآن حيث قام الوكيل بتسهيلها،
00:02:33ولكنك ستتفاعل كإنسان. وهناك امتداد قادم الآن. سيصدر هذا
00:02:37في إصدار MCP لشهر يوليو، حيث يمكن للوكيل التفاعل مع التطبيق أيضًا. وهذا
00:02:43سيهيئ لبعض حالات الاستخدام المثيرة للاهتمام حقًا والتي لن نتحدث عنها اليوم، ولكن يمكنك
00:02:47افتراضياً لعب مباراة شطرنج ضد الوكيل الآن في تطبيق مرئي حيث تقوم بحركة،
00:02:52ومن ثم يتفاعل الوكيل مع التطبيق أيضًا. ولذلك، أعتقد أن ذلك سيفتح عالماً جديداً تماماً
00:02:55من الاحتمالات. الآن، قد يعلم البعض منكم أنني مؤلف إطار عمل وأن شركتي
00:03:03تحافظ عليه يسمى FastMCP. يعد FastMCP أحد أكثر الطرق شيوعًا لبناء خوادم MCP. ولذلك، كلما ظهرت أشياء جديدة
00:03:09ورائعة في عالم MCP، فإن أول ما أتخيله هو: كيف يمكنني تقديم هذا لمستخدمينا؟
00:03:16ومن أهم الأشياء التي يجب أن أشاركها معكم حول قاعدة مستخدمينا هي أنهم
00:03:20في الغالب مهندسو بايثون. ولذلك، فإن هذا يمثل مشكلة صغيرة عندما نريد تقديم
00:03:27الواجهات الأمامية وواجهات المستخدم، لأن كيف سنفعل ذلك حقًا؟ وهذه هي اللحظة في المحادثة
00:03:31التي أكشف فيها أنني لا أتذكر شكل الشريحة التالية بدقة، لذا سنلقي نظرة خاطفة عليها.
00:03:35لا، سنعود. لدينا تحدٍ الآن. كيف سنبجعل مهندسي بايثون يبنون
00:03:42واجهات مستخدم تتبع أفضل الممارسات، وتكون تفاعلية، وجميلة، ومفيدة، دون
00:03:50التظاهر بأننا سنفعل شيئًا سخيفًا، شيئًا تمت تجربته بالفعل، وحشر جميع
00:03:54عناصر الواجهة الأمامية، والنظام البيئي، وكل شيء في لغة بايثون في نوع من النظام الغريب والمساوم
00:04:00والعشوائي الشبيه بفرانكنشتاين. ولذا، لقد عانيت حقًا مع هذا الأمر. أحتاج،
00:04:04أحتاج حقًا، وأشعر بالتزام بإيجاد طريقة لتقديم هذا. لكني لا أستطيع، لا أستطيع التظاهر بأننا
00:04:10سنقوم بشحن React في بايثون. لن ينجح الأمر. ولذلك، فكرنا جاهدًا في من هم
00:04:15مستخدمونا في نظام Fast MCP البيئي؟ من هم هؤلاء مطورو بايثون الذين يميلون إلى التواجد في الشركات الكبرى؟
00:04:20ما الذي يفعلونه وما الذي يحتاجون هذه الواجهات من أجله؟ وما الذي يحتاجون تطبيقات MCP هذه من أجله؟
00:04:25ما لا يحتاجونه هو واجهات مستخدم مخصصة بمستوى المستهلكين وتحمل علامة تجارية كاملة. ليس هذا ما يفعله هؤلاء الأشخاص. وما يكلفون به بشكل أساسي
00:04:34هو مشاركة المعلومات في جميع أنحاء مؤسستهم، ولجمع
00:04:38المعلومات في جميع أنحاء مؤسستهم. ولذلك، فقد غير ذلك طبيعة ما نتوقع منهم القيام به
00:04:43داخل إطار عمل تطبيقات MCP. وأصبح هذا القيد مفيدًا حقًا. لذا، أساسًا، نتوقع أنهم
00:04:48سيقومون بأشياء مثل بناء الجداول، وجمع المعلومات من خلال النماذج،
00:04:53وسيرغبون في مشاركة الرسوم البيانية. وعليه، وبشكل أساسي، مع هذا القيد،
00:04:58يمكننا تقديم قطعة برمجية قمنا بطرح مصدرها مفتوحًا قبل بضعة أشهر والتي كانت تحظى بشعبية مذهلة
00:05:03بين هذا الجمهور والتي تسمى Prefab. وهو إطار عمل لبناء واجهات المستخدم محدد النطاق لغرض
00:05:11تقديم واجهات المستخدم من خلال وكيل للأغراض التي ذكرتها قبل قليل. إذن، هذه بطاقة أهلاً بالعالم (Hello World).
00:05:17قد ترى هذه البطاقة في أي إطار عمل للواجهة الأمامية. حرفياً أي إطار عمل. سيكون لها شيء
00:05:22يبدو هكذا وهو موجود على موقعهم الإلكتروني وتكتب اسمك فيه فيتم تحديثه مباشرة.
00:05:27ولكن، بالطبع، الشيء الغريب في هذه البطاقة هو أن الكود الذي أنشأها مكتوب بالكامل
00:05:31بلغة بايثون. ولذا، أتمنى أن تشعروا بما أشعر به عندما أنظر إلى هذا، وهو مزيج غريب حقًا
00:05:38بين قول: نعم هذا رائع، وشعور بأن هذا يثير رعشتي حقًا. شعور «نعم هذا رائع» يأتي
00:05:44من حقيقة أنني أعتقد أن هناك شيئًا ما في هذا الكود، حتى لو لم تتمكن من رؤيته عن قرب، فيمكنني
00:05:48تكبيره قليلاً، وهناك شيء فيه يجعل الأمر، نوعًا ما، منطقيًا. يمكنك رؤية
00:05:52هيكل واجهة المستخدم في الكود، ولكن هناك أيضًا شيئًا فيه يبدو غريبًا بوضوح ومثيرًا للحيرة
00:05:58قليلاً. ونصل إلى هذا الاستنتاج عندما تشعر بذلك، عندما تنظر إليه، وهو أنه
00:06:04عندما تؤلف واجهة أمامية بلغة بايثون، يبدأ الأمر في الشعور بالرضا طالما أننا نحدد نطاق
00:06:09التحدي بشكل صحيح. نحن لا نحاول بناء واجهة أمامية من الصفر. نحن نحاول تأليف واجهة أمامية
00:06:15من مجموعة من المكونات ذات المستوى العالمي والمصممة جيدًا. وه هكذا نحافظ على الضوابط،
00:06:20وهكذا نحافظ على المستخدم في الاعتبار. المستخدم هنا لا يحاول القيام بشيء عشوائي.
00:06:24هم يحاولون أخذ واجهة أمامية منظمة جيدًا ووضعها أمام أي شخص يقومون بتسليمها
00:06:29له. وإليك جولة سريعة حول لغة النطاق المخصص (DSL) هذه. بشكل أساسي، نحن نستخدم مدير السياق. بالنسبة
00:06:34لأولئك منكم الذين يعرفون FastMCP، تعلمون أنه يمكن القول إنه يمكنك تقليص FastMCP والقول:
00:06:39الابتكار الأساسي في FastMCP هو أننا استخدمنا مزخرف (decorator) بايثون لبناء خادم MCP كامل.
00:06:44لذا، إذا كنت تريد اتباع نفس النهج الاختزالي مع Prefab، يمكنك القول: نحن نستخدم مدير سياق
00:06:48لبناء واجهة مستخدم كاملة. ومن خلال تضمين المكونات كمديري سياق، كما ترون هنا، فإننا نبني
00:06:55نفس الهيكل تمامًا في واجهة المستخدم. يبدو الأمر طبيعيًا للغاية عندما تقرأه. يمكنك أن ترى كيف يتم هيكلة الأشياء.
00:07:01كل عنصر من عناصر واجهة المستخدم، وكل مكون، وهو مكون shad-sian جميل
00:07:06عند عرضه، كما ترون هنا، هو فئة (class) تقوم بإنشائها. يمكنك عمل بارامترات لها. ويمكنك
00:07:11تمرير أشياء لها مثل فئات CSS وجعلها تبدو بالشكل الذي تريده. ومن ثم الشيء الأخير، والذي لن
00:07:17يكون لدينا الوقت الكافي لاستكشافه حقًا اليوم، هو هذه المتغيرات التفاعلية. سأعرض عليكم عرضًا توضيحيًا
00:07:21لها في لحظة. ولكن بشكل أساسي، لدينا طريقة كاملة لإنشاء تفاعل على جانب العميل
00:07:26وربط البيانات بين المكونات مما يسمح لك بنناء هذه التجارب الغنية حقًا، مرة أخرى،
00:07:31دون الحاجة إلى الغوص بالكامل في عالم JavaScript ومغادرة نظام بيئي تشعر قاعدة مستخدمي،
00:07:36على الأقل، براحة شديدة معه. وهذا هو خط الأنابيب الذي تعرضه Prefab بشكل أساسي.
00:07:42نحن نستخدم لغة DSL بايثون التي شاركتها معك للتو. ونستخدمها لبناء تمثيل
00:07:46تصريحي لواجهة المستخدم. يتم تسلسل ذلك بعد ذلك في بروتوكول JSON. ويتم تقديم بروتوكول JSON هذا
00:07:53في النهاية بواسطة تطبيق React، والذي يتم استضافته كتطبيق MCP فعلي. ولذا سيفتح هذا
00:07:59الكثير من الاحتمالات بالنسبة لنا والتي، مرة أخرى، سأعرضها عليك في غضون ثانية واحدة. ولكن المفتاح
00:08:02لكل هذا هو تنسيق JSON في المنتصف. بايثون هي في الواقع صدفة اكتشفتها
00:08:07بعد حقيقة الأمر لأنها كانت شيئًا غريبًا وخاصًا أردته. كان الهدف من هذا هو،
00:08:10"هل يمكننا إنشاء تمثيل قابل للتسلسل لواجهة المستخدم؟" وهذا هو بروتوكول JSON مرة أخرى.
00:08:17ولأنه قابل للتسلسل، يمكنني إنشاؤه من وكيل. يمكنني إرساله إلى وكيل. يمكنني إنشاؤه
00:08:22باعتباري إنسانًا وأطلب من وكيل تعديله. هناك الكثير من الأشياء الرائعة التي تحدث بسبب هذا
00:08:26التمثيل الوسيط في JSON. وعندما خرجت لغة DSL بايثون من هذا بشكل طبيعي وكانت جميلة حقًا وسهلة الاستخدام،
00:08:31شعرت نوعًا ما أن لدينا شيئًا مميزًا. لذا لدينا هذه المستندات. ولاثبات
00:08:37وجهة النظر، كان هذا قيدًا آخر فرضناه على أنفسنا. لا أعرف حتى ما هذا. هذه هي
00:08:42مستندات مكون جدول البيانات في Prefab. أعتقد أن هناك 130 أو 140 مكونًا نشحنها والتي يمكنك
00:08:47دمجها في نموذج تعسفي. مستندات Prefab يتم تقديمها بنسبة 100% في Prefab. لذا فإن جدول البيانات
00:08:55الموجود هنا في الاستخدام الأساسي، يتم عرضه مباشرة في Prefab. كود بايثون، يمكنك رؤيته يتسلل في
00:09:01أسفل الشاشة. يتم عرض كود بايثون هذا مباشرة بواسطة عارض العرض لتوليد ذلك.
00:09:05إذا أردت، يمكنك أخذ أي مثال في مستندات Prefab، ويمكنك النقر فوق رابط، وإدخاله في
00:09:09ساحة اللعب ويمكنك تعديل الكود مباشرة، كود بايثون مباشرة، وسترى واجهة المستخدم يتم تحديثها. ومرة أخرى،
00:09:15هذا غريب للغاية. إذا كنت تشعر بقليل من عدم الراحة حيال هذا، فهذا جيد. يصبح الأمر
00:09:20سيبدو الأمر منطقياً أكثر عندما نقيد المشكلة ونتذكر أننا نقوم بتركيب واجهة مستخدم بدلاً من
00:09:24بنائها. لذا أريد أن أربط هذا بالشيء الذي بدأت به الآن، وهو خوادم بروتوكول السياق (MCP) وبشكل أكثر
00:09:29تحديداً، تطبيقات بروتوكول السياق. أنتم مدعوون لاستخدام Prefab لأي نوع من مشاكل واجهات المستخدم التي تواجهونها.
00:09:34بدأ فريقي في استخدامها لتطبيقات البيانات التفاعلية الصغيرة وأشياء للاستكشاف. لقد كانوا
00:09:39يبنون عروضاً تقديمية بها. نحن نشحن سمة الوضع المظلم التي تبدو بصراحة نوعاً ما مثل التي
00:09:43أعرضها عليك الآن لصنع الشرائح والعروض التقديمية. يمكنك القيام بالكثير من الأشياء بها. ولكن السبب الذي جعلنا
00:09:48نبنيها، وحالة الاستخدام التي تلبيها هي خوادم بروتوكول السياق (MCP). لذا أود أن أقدم لكم جولة سريعة
00:09:54لثلاث طرق يمكنك من خلالها استخدامها، وثلاث طرق متزايدة التطور يمكنك من خلالها استخدامها في
00:09:58خادم بروتوكول السياق الخاص بك. الأولى هي بناء أداة تفاعلية. كما أريتكم في بداية المحاضرة،
00:10:04عادةً ما تكون أداة بروتوكول السياق شيئاً يستدعيه وكيلك الذكي ويحصل الوكيل على النتيجة ولا تحصل أنت على
00:10:09التفاعل معها على الإطلاق. إذن ما هي أسهل طريقة يمكننا من خلالها تطوير هذه الوظيفة التفاعلية؟
00:10:14سأعرضها لكم هنا. هذه أداة بروتوكول سياق سريعة (Fast MCP). لقد تم تزيينها بمزخرف أدوات، كما ترون،
00:10:20وهي مجرد دالة بايثون تعيد بعض المعلومات. مع وضع في اعتبارنا أن هذه المعلومات ستذهب إلى
00:10:24الوكيل، وليس المستخدم. إذا أردنا تحويل هذا إلى أداة تفاعلية بالكامل باستخدام Prefab،
00:10:30فسنقوم بتغيير واحد. بدلاً من إرجاع قاموس بايثون في النهاية، والذي سيذهب إلى الوكيل،
00:10:36سنقوم بإرجاع مكون Prefab. في هذه الحالة، هو جدول البيانات. هذا ما أريتكم للتو
00:10:40وثائقه قبل لحظة. وعندما نعيد مكون Prefab هذا، ستقوم أداة Fast MCP تلقائياً
00:10:46باكتشاف ذلك. ستستنتج تلقائياً أنك تريد في الواقع إرجاع تطبيق بروتوكول سياق، وستقوم بتشغيل
00:10:51جميع الآليات للحصول على HTML و JavaScript و CSS والمشغل وكل شيء في مكانه الصحيح لكي يرى
00:10:55المستخدم الخاص بك جدول بيانات. إليك كيف يبدو هذا في الممارسة العملية. هذا باستخدام عميل Goose،
00:11:00وهو عميل ممتاز. طلبت من خادم يحتوي على الدالة التي أريتكم إياها للتو، أن يريني دليل الفريق،
00:11:06وما يظهر، سيكون هذا أفضل كصورة متحركة (GIF)، أعتذر، ولكن ما يظهر هو مكون جدول بيانات تفاعلي بالكامل.
00:11:10وهو يدعم البحث، والتصفية، والفرز، وتقسيم الصفحات، وكل هذه الأشياء. وكل ما في الأمر، هو ما أريتكم إياه قبل لحظة،
00:11:16فقط قم بإرجاع فئة جدول البيانات، وسيتم الاعتناء بكل هذا. يمكننا الذهاب خطوة أبعد. ماذا لو، بالإضافة إلى جدول البيانات،
00:11:21أردنا إظهار مخطط دائري بجوار جدول البيانات مباشرة يحلل دليل الفريق هذا؟
00:11:26كما قد تتخيل، شفرة برمجية مشابهة جداً جداً جداً. بدلاً من جدول البيانات وحده، سنقوم الآن
00:11:30بإستيراد شبكة ومخطط دائري، وإذا نظرت إلى الأسفل، سترى أننا نركب كل من
00:11:35المخطط الدائري وجدول البيانات في شبكة بشكل طبيعي جداً باستخدام مدير السياق، وهذه هي
00:11:40النتيجة. نحصل الآن على مخطط دائري بجوار جدول البيانات الخاص بنا. إذن هذا يتبع مبدأ نحاول حقاً
00:11:45الالتزام به في الكثير من برمجياتنا في Prefect، وهو سطر واحد من الكود، وتغيير واحد كبير ملحوظ.
00:11:51نحاول الحفاظ على تلك التعقيدات تدريجية، ولذلك فهذا يلبي الكثير من الأمور التي أعتقد أنها مهمة حقاً
00:11:55حول الأطر ولغات المجال الخاصة (DSLs). وهذا بسرعة كبيرة، لعدم وجود وقت للخوض فيه،
00:11:59هذا مجرد مثال قمت بتجميعه وتسجيله لتفاعل يحدث بالكامل من جانب العميل،
00:12:05حيث تكون كل هذه عناصر التحكم مرتبطة، وتتحدث الأشياء، ويتحدث النص، وتتحدث القيم،
00:12:09دون كتابة أي جافا سكريبت. هذا مجرد بضع فئات متركبة تحمل جميعها نفس
00:12:15ولم يُكتب أي جافا سكربت. هذا مجرد بضع فئات مجتمعة تحمل نفس
00:12:19أوه، لقد أدرجت مثالاً برمجياً سريعاً لما تبدو عليه.
00:12:24لدينا فئة تسمى Rx، والتي، كما قد تخمين، يرمز إلى التفاعلية (reactive).
00:12:28إذا استخدمت هذه المتغيرات التفاعلية، يمكنك فقط الإشارة إليها في أي مكان في الكود الخاص بك،
00:12:33يمكنك تنسيقها، ويمكنك جعلها اسماً لشيء ما، وسوف تترجم تلقائياً إلى
00:12:38تنفيذ JavaScript الصحيح. الشيء الثاني الذي يمكننا القيام به هو تطبيق FastMCP.
00:12:43إذن إذا كانت الأداة التفاعلية تشبه محاولة لمرة واحدة، إليك واجهة مستخدم، ويمكنك
00:12:49التفاعل معها في العميل، فإن تطبيق FastMCP هو تطبيق كامل مع خادم خلفي، وفي هذه الحالة،
00:12:54سيكون خادم بروتوكول السياق هو الواجهة الخلفية. ليس لدينا وقت لاستعراض مثال عملي كامل في
00:12:59هذه الجلسة، ولكن إليك شكل الكود، فقط لإعطائك فكرة عن سهولة الاستخدام.
00:13:03سنكتب فئة، وهي تطبيق FastMCP الخاص بنا، وبعد ذلك سنقوم بتزيين ما لا يقل عن
00:13:08دالتين باستخدام app.ui. هذه هي نقطة البداية التي ستعيد مكونات prefab التي
00:13:14تشكل واجهة المستخدم الأساسية لهذا التطبيق، وبعد ذلك على الأقل واحدة، أعتقد أن هذا اختياري، لذا صفر أو أكثر
00:13:20من app.tools، وهذه أساساً طرق خلفية يمكنك الآن الرجوع إليها في واجهة المستخدم.
00:13:27لذا يمكنك الحصول على زر يأخذ البيانات التي أدخلها المستخدم في نموذج ويرسلها إلى
00:13:31قاعدة بيانات باستخدام أداة مزخرفة مثل هذه. أحد الأشياء التي نستخدمها، ونشحنها كمكون مدمج
00:13:38الآن في FastMCP، هو مكون تحميل. لذا كما ترون، نظراً لأن الوكيل وحده هو الذي يمكنه الوصول
00:13:46إلى خادم بروتوكول السياق، فلا يمكنك ببساطة تحميل ملف إلى خادم بروتوكول سياق. يجب أن يمر عبر عقل
00:13:51الوكيل، ولذلك ما ينتهي به الأمر هو أن الكثير من الناس ينشئون أساساً أداة تحميل على خادم بروتوكول السياق
00:13:56الخاص بهم، ونسيان أن على الوكيل استدعاءها فعلياً، وما ينتهي بك الأمر به هو عملية
00:14:00النسخ واللصق الأكثر تكلفة في العالم. أنت تمنح الوكيل ميجابايت من النص، ويعيد الوكيل كتابته حرفاً
00:14:06بحرف في بروتوكول السياق، والآن، نعم، في الواقع، لقد قمت بتحميله، لكنه غير فعال
00:14:12للغاية، للغاية. إذن هذه حالة استخدام جيدة حقاً لتطبيق بروتوكول سياق، حيث تطلب من الوكيل إحضار
00:14:18واجهة التطبيق، وتقوم بسحب وإفلات ملف فيها، والآن يتخطى الملف الوكيل ويذهب مباشرة إلى
00:14:23الخادم، وقد جعلنا ذلك بسطر واحد هكذا، جنباً إلى جنب مع عدد قليل من الأدوات المفيدة الأخرى، و
00:14:30هل هذه صورة متحركة؟ هذه ليست صورة متحركة، أو إن كانت كذلك، فهي لا تعمل، ولكنها ستظهر هكذا في
00:14:34عميلك، وأي عميل يدعم تطبيقات بروتوكول السياق، إذا طلبت من الوكيل أنني بحاجة إلى تحميل شيء ما، يمكنه الآن
00:14:38أن يعرض لك هذا، ويمكنك التحميل بأمان، والأهم من ذلك، بتكلفة زهيدة. أوه، لدي صورة متحركة بالفعل. لا بأس.
00:14:45اعرف شرائحك الخاصة هو درس جيد من هذه المحاضرة. إذن ها هو الوكيل يتفاعل الآن مع
00:14:50ملف قمت بتحميله للتو، قمت بسحبه وإفلاته. سأجعل هذه الشرائح متاحة لاحقاً إذا
00:14:55كنت ترغب في رؤية هذا، أو بالطبع، إنه سطر واحد. يمكنك تجربته في خوادمك بعد ظهر اليوم.
00:15:00الشيء الأخير الذي أريد التحدث عنه، والذي تم تمكينه نوعاً ما بواسطة هذا الهيكل،
00:15:04هو واجهة مستخدم توليدية بالكامل. سنقوم فقط بالتخطي وترك هذا يعمل بينما أتحدث. إذن هذه تجربة بسيطة جداً
00:15:10حيث طلبت من Claude، “مهلاً، أنا أقدم محاضرة عن هذا. فقط ابدأ في بث أكثر
00:15:15واجهة مستخدم إثارة للاهتمام يمكنك الخروج بها.” وهكذا استمر الأمر. وما يفعله هنا هو أننا عرضنا أداة
00:15:21تقبل JSON، تسلسل البروتوكول لواجهة المستخدم التي تعتمد عليها Prefab. ولذا الآن بينما
00:15:29يقوم الوكيل ببث تلك المعلومات عبر الشبكة، فنحن نقوم في الوقت الفعلي برسم كل ما حصلنا عليه،
00:15:35وإصلاح ملف JSON هذا ورسمه. ولذا كانت هذه تجربة رائعة حقاً، وكانت فعالة جداً،
00:15:39وأعجب الناس بذلك لأنه الآن لم تعد مضطراً حتى لتحديد واجهة المستخدم بنفسك. كل ما عليك فعله هو
00:15:43استخدام المهارة التي نشحنها بالفعل، ومشاركتها مع وكيلك حتى يعرف كيف يكتب واجهة مستخدم، وينطلق الأمر.
00:15:48يمكنه أن يصنع لك ما تريد. هناك بعض العملاء الذين لديهم إصدارات مدمجة من هذا. إذا كان
00:15:52لديهم إصدار مدمج، فقد تفضل استخدامه، بكل سرور. ولكن قد تكون هذه طريقة لك لبناء
00:15:56نهجك المخصص أو مجموعة محدودة من المكونات المفيدة لك. الآن، حدث شيء مثير للاهتمام حقاً
00:16:01عندما قمنا بتشغيل هذا. لذا كما ذكرت، كانت الخطة في الأصل أن يرسل الوكيل
00:16:07JSON عبر الشبكة ويتم عرضه في تطبيق React هذا بالكامل. ما انتهى بنا الأمر إلى اكتشافه
00:16:13هو أن تمثيل بايثون لواجهة المستخدم أصغر بنحو 70% من تمثيل JSON.
00:16:20لذا، نحن لا نفعلم هذا بعد الآن. عندما سجلت هذه التجربة مع بث JSON، ما نفعله الآن هو أننا في الواقع
00:16:26نبث بايثون عبر الشبكة. يتم تنفيذها في صندوق آمن (sandbox). يتم تحويلها إلى JSON على الخادم،
00:16:32وبعد ذلك يتم عرض ذلك. ولذا فإن لهذا فائدة هائلة، هائلة في تكلفة كفاءة الرموز (tokens) ووقت الاستجابة.
00:16:39لذا، سيعمل تماماً مثل الوقت الذي سجلت فيه هذه التجربة، ولكن هذا هو أحد تلك الأشياء
00:16:43التي تعلمناها أثناء الطيران. وهو أمر رائع حقاً أن تمثيل بايثون أكثر إيجازاً وملاءمة للاستخدام بهذا القدر
00:16:49من تمثيل JSON الكامل. إذن، هذه هي Prefab. إذا كنت ترغب في التحقق منها، إذا كنت مهتماً،
00:16:55إذا كنت تريد أن ترى أغرب شيء بنيته على الإطلاق إلى جانب أي عدد آخر من الأشخاص، يمكنك الاطلاع
00:17:00على الوثائق على prefab.prefect.io. يمكنك رؤية المكتبة الكاملة، الموجودة على GitHub الخاص بنا هنا. وهذا
00:17:06مدمج بالفعل بالكامل في Fast MCP. لذا، إذا كنت تستخدم إصداراً حديثاً من Fast MCP، فيجب أن تكون قادراً على
00:17:11تثبيت هذه الإضافة الاختيارية، واستيراد المكونات، وإرجاعها، والبدء في اللعب بتطبيقات بروتوكول السياق هذه.
00:17:17شكراً لكم جميعاً على الحضور.

핵심 요약

يمكّن إطار العمل Prefab مطوري بايثون من بناء واجهات مستخدم تفاعلية وعالية الأداء وتوليدها تلقائياً عبر بروتوكول السياق بكفاءة تزيد بنسبة 70% مقارنة بـ JSON.

하이라이트

  • تطبيقات بروتوكول السياق (MCP) تتجاوز الوكيل العادي عبر إرسال بيانات HTML و CSS و JavaScript مباشرة إلى المستخدم للتفاعل معها.

  • إطار العمل Prefab يتيح لمهندسي بايثون بناء واجهات مستخدم تفاعلية ومرئية بالكامل باستخدام كود بايثون وخوادم FastMCP.

  • تمثيل بايثون لواجهة المستخدم أصغر بنحو 70% من تمثيل JSON الكامل، مما يوفر تكلفة الرموز ويقلل وقت الاستجابة عند البث عبر الشبكة.

  • توفر مكتبة Prefab أكثر من 130 مكونًا جاهزًا تدمج الجداول والمخططات ونماذج الإدخال ضمن تطبيقات بروتوكول السياق.

  • عملية تحميل الملفات عبر تطبيقات بروتوكول السياق تتخطى سياق الوكيل لتصل مباشرة إلى الخادم، مما يقلل التكلفة ويزيد كفاءة نقل البيانات.

타임라인

مفهوم وتطور تطبيقات بروتوكول السياق

  • بروتوكول MCP التقليدي يعتمد على دورة طلب واستجابة تمر دائمًا عبر نافذة سياق الوكيل.
  • تطبيقات MCP تتيح تجاوز الوكيل وإرسال واجهات مستخدم كاملة تشمل HTML و CSS و JavaScript إلى المستخدم.
  • التحديثات القادمة تتيح للوكيل التفاعل المباشر مع واجهة التطبيق تمامًا مثل لعب مباراة شطرنج.

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

تحديات بناء واجهات المستخدم بلغة بايثون وتصميم Prefab

  • قاعدة مستخدمي FastMCP تتكون في الغالب من مهندسي بايثون الذين لا يستخدمون React مباشرة.
  • تعتمد الاحتياجات الأساسية للمطورين على بناء جداول وجمع معلومات عبر نماذج ومشاركة رسوم بيانية داخل المؤسسة.
  • إطار العمل Prefab يحل هذه المشكلة عبر تمكين كتابة واجهات مستخدم تفاعلية باستخدام لغة مجال مخصصة (DSL) تعتمد على بايثون.

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

التطبيق العملي وتكامل Prefab مع FastMCP

  • إرجاع مكون Prefab داخل دالة FastMCP يؤدي تلقائيًا إلى تشغيل الآليات اللازمة لعرض الجدول أو المخطط للمستخدم.
  • مكون التحميل المدمج يتيح للمستخدمين سحب وإفلات الملفات مباشرة إلى الخادم متخطين تمرير النصوص عبر الوكيل.
  • تمثيل بايثون لواجهة المستخدم أصغر بنحو 70% من تمثيل JSON، مما يعزز كفاءة الرموز ووقت الاستجابة عبر بث بايثون وتنفيذها في صندوق آمن.

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

커뮤니티 글

아직 글이 없습니다. 이 영상에 대한 첫 번째 글을 작성해 보세요!

이 영상에 대해 글쓰기