كيفية طرح Gemini في "أدوات مطوّري البرامج في Chrome"

Alex Rudenko

Ergün Erdogmus

تاريخ النشر: 14 كانون الثاني (يناير) 2025

في مؤتمر Google I/O لعام 2024، أطلقنا إحصاءات وحدة التحكّم، وهي ميزة الذكاء الاصطناعي الأولى في "أدوات مطوّري البرامج في Chrome". تساعد إحصاءات وحدة التحكّم في فهم الأخطاء والتحذيرات المسجّلة في وحدة التحكّم من خلال إرسال بيانات الشبكة ورمز المصدر وتتبُّع تسلسل استدعاء الدوال البرمجية ذات الصلة برسالة السجلّ إلى Gemini، وهو نموذج لغوي كبير (LLM) من Google. تُرسِل إحصاءات Console طلبًا واحدًا إلى Gemini يعرض ردًا واحدًا بدون توفّر إمكانية طرح أسئلة متابعة للمطوّرين. على الرغم من أنّ مسار التفاعل الفردي هذا يعمل بشكل جيد نسبيًا لشرح رسائل الخطأ، إلا أنّه لا يتم استخدامه في حالات الاستخدام الأكثر تعقيدًا لتصحيح الأخطاء داخل "أدوات المطوّر"، حيث لا يكون واضحًا ما هي البيانات التي يحتاج إليها الذكاء الاصطناعي من الصفحة التي يتم فحصها للمساعدة.

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

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

جمع البيانات المناسبة

تستخدِم "إحصاءات Console" دائمًا نقاط البيانات نفسها للردّ على طلبات محدّدة مسبقًا. لكي تكون مساعدة الذكاء الاصطناعي مفيدة مع أي طلب يحدّده المستخدم، علينا تحديد بيانات السياق المهمة ديناميكيًا للطلب المعنيّ.

لذلك، طبّقنا نموذج ReAct (Yao et al., 2022) الاستراتيجية. تمنح استراتيجية الطلبات هذه النماذج اللغوية الكبيرة (LLM) القدرة على التفكير بشكل مستقل وتحديد الإجراء اللاحق استنادًا إلى تفكيرها.

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

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

لجمع المعلومات، منحنا أداة واحدة فقط لخدمة Gemini، وهي تشغيل JavaScript على الصفحة التي يتم فحصها. يتيح ذلك لـ Gemini من خلال مساعدة الذكاء الاصطناعي، على سبيل المثال:

• الوصول إلى نموذج DOM وتحليله: يمكنك التنقّل في شجرة نموذج DOM وفحص سمات العناصر وفهم العلاقات بين العناصر.
• استرداد الأنماط المحسوبة: يمكنك الوصول إلى الأنماط المحسوبة لأي عنصر.
• إجراء العمليات الحسابية والقياسات: يمكنك تنفيذ رمز JavaScript لحساب المسافات والأحجام ومواقع العناصر.

يؤدي ذلك إلى تفاعل ميزة "المساعدة المستنِدة إلى الذكاء الاصطناعي" مع الرمز ذي الصلة فقط، ما يؤدي إلى تحسين جودة الاستجابة ووقت الاستجابة واستخدام موارد الحوسبة، مقارنةً بمحاولة إرسال رمز HTML وCSS المصدر الكامل إلى Gemini.

تشغيل رمز تم إنشاؤه باستخدام الذكاء الاصطناعي في مساحة المستخدم

قد يبدو من غير المتوقّع أنّنا استخدمنا JavaScript لتصحيح أخطاء التصميم. هناك سببان لذلك:

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

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

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

بالإضافة إلى ذلك، يتم تشغيل JavaScript الذي تم إنشاؤه في ما يُعرف باسم "عالم" معزول. يشبه ذلك الطريقة التي تُشغِّل بها الإضافات نصوص برمجية في وضع الحماية: يمكن للرمز الذي تم إنشاؤه الوصول إلى DOM وWeb APIs، ولكن لا يمكنه الوصول إلى رمز JavaScript أو حالته التي تحدّدها الصفحة التي يتم فحصها.

تتبُّع التغييرات التي أجراها موظّف الدعم

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

ولتحقيق ذلك، نفّذنا عملية ربط تُسمى setElementStyles والتي نعرضها لسياق تنفيذ الوكيل بالإضافة إلى واجهات برمجة التطبيقات التلقائية للويب.

لإطلاع Gemini على هذه الطريقة الجديدة، نطلب منه استخدامها في مقدّمة المساعدة المستندة إلى الذكاء الاصطناعي:

If you need to set styles on an HTML element, always call the \`async setElementStyles(el: Element, styles: object)\` function.

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

من جانب DevTools، عند استدعاء setElementStyles من موظّف الدعم، تستخدِم مساعدة الذكاء الاصطناعي جداول التنسيق الخاصة بالمدقّق لتسجيل التغيير في أداة اختيار العناصر. يتم استخدام تداخل CSS لتسمية التغيير وزيادة دقة أداة اختيار العنصر. وبالتالي، تبدو قاعدة CSS النموذجية التي أنشأها موظّف الدعم بالشكل التالي:

.ai-style-change-1 { /* the ID is incremented for each change*/
  .element-selector { /* Element selector is computed based on the element setElementStyles was called on. */
    color: blue;
  }
}

على الرغم من أنّ هذا الإجراء لا يحلّ جميع تعارضات الأنماط المحتمَلة التي يمكن أن تحدث في الصفحة، إلا أنّه يحلّ المشكلة في معظم الحالات.

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

إتاحة إمكانية رصد إجراءات موظّفي الدعم للمستخدمين

عند إضافة ميزات تفاعلية إلى منتج، من المهم أن تكون إجراءات موظّفي الدعم شفّافة للمستخدمين، حتى تتمكّنوا من تتبُّعها وفهمها وربما التدخل.

للحصول على مساعدة من الذكاء الاصطناعي، نطلب من Gemini تنظيم الردود بتنسيق معيّن مع إضافة مقدّمة:

You are going to answer to the query in these steps:
*   THOUGHT
*   TITLE
*   ACTION
*   ANSWER
*   SUGGESTIONS
Use THOUGHT to explain why you take the ACTION. Use TITLE to provide a short summary of the thought.

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

خطوات التفكير المجمّعة والمتوقفة مؤقتًا في ميزة "الدعم الذكي" في "أدوات مطوّري البرامج في Chrome"

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

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

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

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

التطوير المستنِد إلى التقييم

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

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

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

لتحسين عملية التقييم بشكل أكبر، نستكشف methods التحقق المبرمَجة، بما في ذلك:

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

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

ملاحظة: يمكنك الاطّلاع على مزيد من المعلومات عن استراتيجيات الاختبار المختلفة للتطبيقات المستندة إلى LLM في إحدى المشاركات التي نشرها مايكل هابليش، مدير المنتجات في "أدوات مطوّري البرامج في Chrome".

إدراج طلبات

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

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

If the user asks a question about religion, race, politics, sexuality, gender, or other sensitive topics, answer with "Sorry, I can't answer that. I'm best at questions about debugging web pages.

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

الاستفادة من قاعدة صلبة

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

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

الآثار الأمنية عند التعامل مع طلبات الشبكة

تتيح ميزة "المساعدة المستندة إلى الذكاء الاصطناعي" للشبكة للمستخدمين مناقشة طلبات شبكة معيّنة مع Gemini، وذلك باستخدام بيانات من الطلب كسياق للمحادثة. يتم إرسال البيانات التالية تحديدًا إلى Gemini:

• عناوين الطلبات: مجموعة فرعية من العناوين التي يرسلها المتصفّح إلى الخادم
• رؤوس الاستجابة: مجموعة فرعية من الرؤوس التي يعرضها الخادم
• حالة الاستجابة: رمز حالة HTTP الذي يشير إلى استجابة الخادم (مثلاً 200 أو 404)
• المواعيد: معلومات تفصيلية عن المواعيد تشمل مراحل مختلفة من الطلب، مثل إعداد الاتصال ونقل البيانات.
• سلسلة بدء الطلب: تشير إلى تسلسل الإجراءات والنصوص البرمجية التي بدأَت الطلب.

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

التكيف مع تنسيقات البيانات المختلفة

تتيح ميزة "المساعدة المستندة إلى الذكاء الاصطناعي" للمصادر للمطوّرين طرح أسئلة حول ملف مصدر في لوحة "المصادر"، مثل "ما الغرض من هذا الملف؟".

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

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

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

المساعدة المستنِدة إلى الذكاء الاصطناعي في المستقبل

يمكنك الآن الاستفادة من نتيجة كل هذا العمل بدءًا من الإصدار 132 من Chrome، والذي يتضمّن مساعدة الذكاء الاصطناعي في التصميم والشبكة والمصادر والأداء. نأمل أن يعجبك استخدام هذه الميزة بقدر ما أعجبنا إنشاؤها.

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