سايمون ويليسون يبني بمساعدة GPT-5.5 مكوّن ويب لتضمين الشيفرة من GitHub

نشر المطوّر سايمون ويليسون، صاحب مدوّنة simonwillison.net، في 7 يوليو 2026 ضمن باب «Tool» تجربةً تتمثل في مكوّن الويب github-code، الذي بناه بمساعدة نموذج GPT-5.5 عبر موجّه حواري واحد فقط ودون كتابة أي شيفرة يدويًا.

ماذا يفعل المكوّن

يضمّن المكوّن `<github-code>` مقطعًا من الشيفرة مباشرة في صفحة HTML انطلاقًا من رابط على GitHub. يكفي تحديد السمة href برابط ملف معيّن مع نطاق الأسطر، فيضع المكوّن المقطع النصي المطلوب بنفسه.

• بدأ الموجّه بالعبارة: «let's build a Web Component for embedding code from GitHub»
• النموذج الذي بنى المكوّن هو GPT-5.5
• مثال الاختبار: مستودع simonw/sqlite-ast، الملف parser.py، الأسطر من 9 إلى 18
• نشر ويليسون الأداة الجاهزة علنًا على موقعه ضمن باب «Tool»
• وُسمت المادة بالوسوم github وweb-components وgpt

كيف يعمل المكوّن تقنيًا

وصف ويليسون منطق العمل في الموجّه نفسه: يأخذ المكوّن رابطًا بصيغة `github.com/.../blob/.../parser.py#L9-L18`، ويحوّله إلى عنوان على raw.githubusercontent.com، ثم يجلب الملف عبر fetch() ويعرض نطاق الأسطر المحدد فقط، مع أرقام الأسطر ولكن دون تمييز لبنية الشيفرة بالألوان.

«It takes URLs like that, converts them to raw.githubusercontent.com,

then uses fetch() to fetch them and displays the specified range of lines — with line numbers, no syntax highlighting though»، من موجّه سايمون ويليسون المنشور في gist مفتوح على GitHub.

وتضمّن الجزء الأخير من الموجّه طلبًا صريحًا بعرض النتيجة: «Show me a preview web browser so I can see your work». فلم يكن مطلوبًا من النموذج أن يكتفي بتقديم الشيفرة، بل أن يعرض فورًا معاينة عاملة في المتصفح.

وضمّن ويليسون المكوّن الجاهز في نص تدوينته عن هذه التجربة، وفي الصفحة نفسها يمكن مشاهدة `<github-code>` وهو يعرض مباشرةً الأسطر من 9 إلى 18 من ملف parser.py في مستودع simonw/sqlite-ast، مع أرقام الأسطر على اليسار.

ما معنى ذلك

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

أسئلة شائعة

ماذا يفعل مكوّن الويب github-code؟

يحوّل رابط ملف على GitHub مع نطاق أسطر بصيغة #L9-L18 إلى كتلة شيفرة جاهزة بأرقام الأسطر، مضمّنة مباشرة في صفحة HTML، دون تمييز لبنية الشيفرة بالألوان.

أي نموذج ذكاء اصطناعي أنشأ هذا المكوّن؟

بُني المكوّن بمساعدة نموذج GPT-5.5 عبر موجّه حواري واحد نشره سايمون ويليسون في gist مفتوح على GitHub.