كيف يقوم وكلاء الذكاء الاصطناعي ببناء واجهات مستخدم أصلية وآمنة

لقد دخلنا زمن الذكاء الاصطناعي متعدد الوكلاء. ومع ذلك، هناك مسألة مهمة للغاية: كيف يمكن لوكلاء الذكاء الاصطناعي عن بعد إنتاج تجارب غنية وتفاعلية دون تعريض النظام لمخاطر أمنية؟ يعالج بروتوكول Google A2UI (Agent-to-UI) هذا السؤال بطريقة ذكية للغاية، مما يسمح للوكلاء بإنشاء واجهات مستخدم متكاملة تمامًا مع النظام الأساسي بأكمله.

ما هو جوجل A2UI؟

A2UI هو بروتوكول عام يسمح لوكلاء الذكاء الاصطناعي بإنشاء واجهات مستخدم بشكل صريح من خلال الاتصال المستند إلى JSON. بدلاً من قصر الاتصال على النص فقط أو استخدام طريقة تنفيذ HTML/JavaScript غير الآمنة، يمكن للوكلاء تطوير واجهات مستخدم متقدمة عن طريق المزج والمطابقة من كتالوجات المكونات التي تمت الموافقة عليها بالفعل.

الابتكار الرئيسي: يقوم الوكلاء بتوصيل احتياجات واجهة المستخدم الخاصة بهم؛ تستخدم التطبيقات أطرها الأصلية لعرضها (React، وFlutter، وAngular، وSwiftUI، وما إلى ذلك)

المشكلة التي يحلها A2UI

في عالم الشبكات المتعددة الوكلاء، يعمل وكلاء من شركات مختلفة معًا عن بُعد. الحلول التقليدية هي:

• واجهات النص فقط – بطيء وغير فعال
• HTML/iframes في وضع الحماية – مخاطر أمنية ثقيلة ومفككة بصريًا
• التلاعب المباشر بواجهة المستخدم – غير ممكن عند تشغيل الوكلاء على خوادم بعيدة

تفتح A2UI إمكانية جديدة لإرسال واجهة مستخدم آمنة مثل البيانات ولكنها معبرة مثل التعليمات البرمجية.

الفوائد الرئيسية لجوجل A2UI

فيما يلي بعض الفوائد الرئيسية لـ A2UI –

1. العمارة الأمنية أولاً

• يستخدم تنسيق بيانات تعريفي بدلاً من التعليمات البرمجية القابلة للتنفيذ
• يُسمح للوكلاء بأخذ المكونات من الكتالوجات الموثوقة والمعتمدة بالفعل
• لا يوجد خطر من إدخال التعليمات البرمجية، وتظل السيطرة الكاملة مع العملاء

2. التصميم الصديق للماجستير في القانون

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

3. قابلية النقل الإطارية

• حمولة JSON واحدة صالحة للويب والجوال وسطح المكتب
• يعمل مع أي إطار عمل واجهة المستخدم
• يضمن العرض الذي يتم إجراؤه محليًا أن تجربة العلامة التجارية للعميل ستكون هي نفسها
• لا يلزم وجود كود خاص بأي منصة

4. التكامل السلس للبروتوكول

• متوافق مع بروتوكول A2A (الاتصال من وكيل إلى وكيل)
• يعمل مع AG-UI للتفاعلات بين الوكيل والمستخدم
• جاهز للاتصال بالبنية التحتية للوكيل الحالي

كيف تعمل A2UI

يتضمن عمل A2UI أربع مراحل:

1. المرحلة الأولى: التوليد

• يكون الوكيل (Gemini أو أي LLM آخر) مسؤولاً عن إنشاء حمولة JSON.
• وهو يعرض تفاصيل عناصر واجهة المستخدم والسمات المقابلة لها.
• يمكنه إما إنشاء عناصر واجهة المستخدم من البداية أو ملء القوالب.

2. المرحلة الثانية: النقل

• يتم إرسال رسالة JSON عبر بروتوكول A2A أو AG-UI أو REST APIs.
• لا تعتمد طريقة الاتصال على بروتوكول معين ويمكن استخدامها مع أي قناة اتصال.

3. المرحلة 3: الحل

• يفسر عارض A2UI الخاص بالعميل ملف JSON.
• يتحقق من بنية وأذونات المكونات.
• فهو يضمن أن جميع المكونات تنتمي إلى الكتالوج الموثوق به.

4. المرحلة الرابعة: العرض

• يقوم بتحويل المكونات المجردة إلى تطبيقاتها الأصلية.
• على سبيل المثال، يتحول حقل النص إلى إدخال تصميم متعدد الأبعاد، وحقل Chakra UI، وما إلى ذلك.
• يستخدم إطار عمل واجهة المستخدم الموجود مسبقًا للعميل للعرض.

الميزة الأمنية: يرى العميل ويعمل فقط على المكونات التي تمت الموافقة عليها مسبقًا. لن يكون هناك تنفيذ تعليمات برمجية غير مؤكدة.

ابدأ مع A2UI

هناك طريقتان يمكنك من خلالهما الوصول إلى A2UI:

1. عبر واجهة الويب المباشرة

يمكنك تسجيل الدخول من خلال https://a2ui-composer.ag-ui.com/ وبعد تسجيل الدخول، ما عليك سوى مطالبة الوكيل بالحصول على الإخراج.

2. عبر المستودع

يمكنك الوصول إلى A2UI عن طريق استنساخ المستودع https://github.com/google/A2UI ثم تشغيل العرض التوضيحي للبدء السريع. سترى وكلاء مدعومين من Gemini يقومون بإنشاء الواجهات، ويمكنك تخصيص المكونات لحالة الاستخدام الخاصة بك بسهولة.

التدريب العملي على المهمة 1: تعقب الميزانية الذكية

الطريقة القديمة (القائم على النص):

المستخدم: “كم كان إنفاقي هذا الشهر؟”

الوكيل: “لقد أنفقت 1234 دولارًا على الطعام، و567 دولارًا على تناول الطعام بالخارج…”

المستخدم: “ما هي الفئة التي تتجاوز الميزانية؟”

الوكيل: “تناول الطعام خارج المنزل يكلف 67 دولارًا أكثر من ميزانيتك البالغة 500 دولار”

المستخدم: “أعطني تقريراً مفصلاً”

مع واجهة A2UI:

اِسْتَدْعَى:

“أقدم بيانات المعاملات الخاصة بي أدناه. استخدمها لإنشاء لوحة تحكم ذكية لتعقب الميزانية. البيانات:

1 ديسمبر: 200 دولار (الطعام)

1 ديسمبر: 300 دولار (الملابس)

2 ديسمبر: 500 دولار (السفر)

حدود الميزانية: قم بتعيين الحدود الافتراضية على 400 دولار لكل فئة.

الإخراج:

يقوم الوكيل على الفور بإنشاء لوحة معلومات كاملة تحتوي على المكونات التالية:

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

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

المهمة العملية 2: نظام حجز الكابينة

الطريقة القديمة (القائم على النص):

المستخدم: “احجز سيارة أجرة”

الوكيل: “أين موقعك؟”

المستخدم: “أنا في 123 الشارع الرئيسي.”

الوكيل:”أين تريد أن تذهب؟”

المستخدم: “أريد أن أذهب إلى 456 Oak Avenue.”

الوكيل: “متى تحتاج إلى سيارة أجرة؟”

المستخدم: “أريد ذلك في أقرب وقت ممكن.”

الوكيل: “ما نوع السيارة التي تفضلها؟”

مع واجهة A2UI:

اِسْتَدْعَى:

“قم بإنشاء واجهة حجز الكابينة عالية الدقة ذات شاشة واحدة بناءً على المتطلبات التالية:

### 1. مرحلة الحجز المسبق (وضع التخطيط)

– خريطة تفاعلية: قم بعرض خريطة باستخدام دبوس “الالتقاط” القابل للسحب (في الموقع الحالي) ودبوس “الوجهة”. إظهار المسار المحسوب.

– مدخلات العنوان: حقلين نصيين (الالتقاط/الوجهة) مع الإكمال التلقائي. الوجهة الافتراضية هي “456 Oak Avenue”.

– محدد السيارة: قائمة أفقية من الخيارات (الاقتصادية، المميزة، XL) توضح:

– التسعير في الوقت الحقيقي

– الوقت المتوقع للوصول (على سبيل المثال، “على بعد 3 دقائق”)

– أيقونات مركبة عالية الجودة

– التفضيلات:

• تبديل للمسار “الأقصر مقابل الأسرع”.
• قائمة “الأماكن المحفوظة” (المنزل، العمل، صالة الألعاب الرياضية) للاختيار بنقرة واحدة.
• محدد الوقت الافتراضي هو “الآن”.
• مقدر التكلفة: ملخص ديناميكي يوضح الأجرة الأساسية + الضرائب.

### 2. منطق الانتقال (إجراء “الحجز”)

عندما ينقر المستخدم على “تأكيد الحجز”، لا تقم بمسح الشاشة. انقل واجهة المستخدم الحالية إلى “وضع التتبع المباشر”.

### 3. مرحلة التتبع المباشر (الوضع النشط)

• تحديث الخريطة: أظهر أيقونة سيارة متحركة تمثل الموقع المباشر للسائق.
• بطاقة الوصول: استبدل محدد السيارة بـ “بطاقة معلومات السائق” التي تتضمن:
• اسم السائق وتصنيفه ورقم لوحة المركبة.
• مؤقت العد التنازلي المباشر (على سبيل المثال، “الوصول خلال دقيقتين و14 ثانية”).
• الاتصال: إضافة زرين بنقرة واحدة: (Call Driver) و (Message Driver).
• الطوارئ: قم بتضمين زر “SOS” البارز.

### 4. أسلوب التصميم

• تخطيط نظيف ومركّز على الخريطة (مثل Uber/Lyft).
• استخدم أوراق العمل العائمة للمدخلات لزيادة رؤية الخريطة إلى أقصى حد.

الإخراج:

يقوم الوكيل بإعداد واجهة حجز من شاشة واحدة تحتوي على:

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

بمجرد التأكيد، سيتم تحديث هذه الواجهة نفسها بما يلي:

• موقع تتبع السائق المباشر
• العد التنازلي للوصول المتوقع
• معلومات السائق والمركبة
• أزرار للتواصل بنقرة واحدة

خاتمة

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