استخدم سيمون ويليسون GPT-5.5 لإنشاء مكون ويب لتضمين كود GitHub

أنشأ Simon Willison مكون ويب لتضمين كود GitHub باستخدام GPT-5.5

قام المطور Simon Willison، مؤلف المدونة 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
• تم نشر الأداة المنتهية بواسطة Willison في وصول مفتوح على موقعه في قسم "Tool"
• تم تصنيف المادة باستخدام github و web-components و gpt

كيف يعمل المكون من الناحية الفنية

وصف Willison المنطق مباشرة في الموجه: يأخذ المكون عنوان URL مثل `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», — من موجه Simon Willison المنشور في gist GitHub مفتوح.

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

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

ما يعنيه ذلك

يوضح المثال كيف يمكنك الحصول على مكون ويب منتهي وعامل باستخدام موجه حوار شامل — من الفكرة إلى معاينة المتصفح، بدون مرحلة منفصلة من صقل الكود اليدوي. اختبر المؤلف النتيجة على الفور على موقعه الخاص من خلال تضمين المكون في نفس المنشور حيث يتحدث عنه.

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

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

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

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

تم بناء المكون باستخدام نموذج GPT-5.5 من موجه حوار واحد، والذي نشره Simon Willison في gist GitHub مفتوح.