شرح أداة CodeGeeX: مساعدك البرمجي المجاني من الصين

مرحبًا بالجميع، كيف حالكم؟ أصدرت الصين أداة برمجة مجانية للجميع، وهذه أداة مختلفة تمامًا عن كل الأدوات التي تحدثنا عنها في هذا المنشور. وسأوضح لكم الفرق بينها وبين كل الأدوات التي شرحناها، حيث تناولنا أكثر من 50 أداة في مواقع تصمم تطبيقات وتكتب أكوادًا. هذا المقال مختلف قليلًا، وسأوضح لكم السبب.

هذا هو الموقع الرسمي للأداة التي تسمى CodeGeeX. موقعهم متاح باللغة الصينية واللغة الإنجليزية كما ترون. هذه الأداة هي مشروع مفتوح المصدر من الصين يمكنك تحميله على جهازك، وسأشرح لكم كيفية تحميله أيضًا. يتم تثبيته داخل Visual Studio Code أو داخل JetBrains. كما ترون، إذا ضغطتم على “Get Extension”، ستظهر لكم الأماكن التي يمكنكم تثبيت أداة اليوم فيها.

ماذا تفعل الأداة وماذا تدعم؟

حسنًا، ماذا تفعل هذه الأداة وما هي الأكواد التي تدعمها؟ هذه هي البيئات التي يمكنك تثبيت الإضافة وتشغيلها بداخلها، وهذه هي اللغات التي تدعمها:

Python
JavaScript
TypeScript
C++
Java
Go
PHP
C#
والعديد من لغات البرمجة الأخرى.

هي مجانية تمامًا للأفراد الذين يمكنهم استخدامها. ولديهم خدمة إذا كنت شركة وتريد استخدام نموذج داخل أجهزتك، فيمكنك التواصل معهم من خلال الموقع. في قسم الأسئلة الشائعة، يُذكر أن CodeGeeX مجاني تمامًا للمستخدمين الأفراد. وهو أيضًا مفتوح المصدر، وإذا أردت تثبيته، ستجد الصفحة، تضغط على “انتقل إلى GitHub”، وستجد المشروع هناك ويمكنك عمل clone له.

كيفية التثبيت في Visual Studio Code

لنقم أولًا بتثبيته كإضافة داخل Visual Studio Code.

عند فتح Visual Studio Code، اضغط على File ثم Open Folder.
أنشئ مجلدًا جديدًا لمشروعك وحدده.
سيظهر المشروع فارغًا. في شريط البحث عن الإضافات، اكتب CodeGeeX.
سيظهر لك خياران، اختر الذي يحمل العلامة المميزة لـ CodeGeeX وقم بتثبيته بالضغط على Install.
بعد التثبيت، ستظهر أيقونة الأداة في الشريط الجانبي.

الإعدادات الأولية

عندما تفتحها لأول مرة، ستكون باللغة الصينية. لتغيير اللغة، تضغط على النقاط الثلاث ثم على CodeGeeX Settings. من هناك، تبدأ في اختيار حجم الخط وتختار اللغة الإنجليزية (EN). ستجدها في البداية على (CN)، فتقوم بتغييرها إلى اللغة الإنجليزية لتتمكن من الاستفادة منها.

بعد ذلك، يجب عليك تسجيل الدخول لتتمكن من استخدامها. تضغط على Login ثم Open. يمكنك تسجيل الدخول باستخدام Google، GitHub، أو أي خيار آخر، أو من خلال البريد الإلكتروني.

النماذج المتاحة

هي تدعم نماذج مثل Claude Sonnet 4 و Claude Sonnet 3.5، بالإضافة إلى CodeGeeX Pro وهو النموذج مفتوح المصدر. يمكنك استخدامه أيضًا في الوضع المحلي (Local Mode).

ستجد خيارين رئيسيين: Ask و Agent.

Ask: هو عبارة عن محادثة يمكنك من خلالها طرح أي سؤال برمجي.
Agent: هو وضع الوكيل الذي يقوم بتنفيذ المهام. قد لا يظهر هذا الخيار من المرة الأولى؛ قد تحتاج إلى إعادة تشغيل Visual Studio Code مرتين أو ثلاث مرات حتى يظهر.

العمل بدون اتصال بالإنترنت (Local Mode)

لديك أيضًا في الاختيارات Local Model، حيث يمكنك تثبيت نموذج محلي. لديهم نموذج خاص بهم اسمه CodeGeeX-All-9B. هذا النموذج يعمل بدون اتصال بالإنترنت وحجمه يتراوح بين 4 و 8 جيجابايت. يمكنك استخدامه بدون إنترنت، ولكن يجب أن يكون جهازك قويًا بعض الشيء.

عند محاولة استخدامه، سيخبرك أنه يجب تثبيت نموذج. بالضغط على Model Configuration، سيعطيك تعليمات لربطه بالـ localhost الخاص بك. يمكنك اتباع التعليمات الموجودة في صفحة Local Mode لتثبيته بنجاح.

مثال عملي: إنشاء صفحة ويب بسيطة

سأعود لاستخدام الوضع المتصل بالإنترنت (Online Mode) وأختار وضع Agent. يستخدم هذا الوضع نموذجهم الخاص الذي تم تدريبه على 9 مليار معاملة، ويمكنه إكمال الكود وتفسيره وإصلاحه وتحويله من لغة برمجة إلى أخرى.

في المربع المخصص، سأطلب منه: “أنشئ صفحة ويب بسيطة”. سيبدأ CodeGeeX في كتابة الكود. بعد الانتهاء، تضغط على Accept All لحفظ الملفات.

مثال على الكود الذي تم إنشاؤه:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple Page</title>
    <style>
        body {
            font-family: sans-serif;
            line-height: 1.6;
            margin: 20px;
        }
        h1 {
            color: #333;
        }
    </style>
</head>
<body>
    <h1>Welcome to My Simple Page</h1>
    <p>This page was generated by CodeGeeX.</p>
</body>
</html>

مثال عملي: إصلاح الأخطاء في الكود

الآن، سآخذ الملف الذي تم إنشاؤه وسأقوم بإفساد الكود بالكامل عن عمد لإظهار قدرته على الإصلاح.

الكود قبل الإصلاح (مع أخطاء متعمدة):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple Page</title>
    <style>
        body {
            font-family: sans-serif;
            line-height: 1.6;
            margin: 20px;
        
    </style>
</head>
<body>
    <h1>أهلا في صفحتي البسيطة</h1>
    <p>This page was generated by CodeGeeX.<div>
</body>
</html

لقد أفسدت الكود بالفعل. الآن، لتصحيحه، أحدد الكود بالكامل، ثم أضغط بزر الماوس الأيمن وأختار CodeGeeX ثم Fix Bug. أو يمكن نسخ رسائل الخطأ من نافذة Problems ولصقها في المحادثة وطلب الإصلاح.

سيقوم تلقائيًا بتحديد الأخطاء وإصلاحها. بعد قبول التغييرات، يعود الكود سليمًا.

مثال عملي: إضافة التعليقات إلى الكود

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

الكود قبل إضافة التعليقات:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple Page</title>
    <style>
        body {
            font-family: sans-serif;
            line-height: 1.6;
            margin: 20px;
        }
        h1 {
            color: #333;
        }
    </style>
</head>
<body>
    <h1>Welcome to My Simple Page</h1>
    <p>This page was generated by CodeGeeX.</p>
</body>
</html>

أحدد الكود، أضغط بزر الماوس الأيمن، أختار CodeGeeX ثم Generate Comments. ستبدأ الأداة في إضافة تعليقات (باللون الأخضر) تشرح كل جزء من الكود.

الكود بعد إضافة التعليقات:

<!-- This is the document type declaration -->
<!DOCTYPE html>
<!-- This is the root element of the HTML page, with the language set to English -->
<html lang="en">
<!-- This is the head section of the HTML document, which contains meta-information about the document -->
<head>
    <!-- This specifies the character encoding for the HTML document -->
    <meta charset="UTF-8">
    <!-- This sets the viewport to make the website responsive -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- This sets the title of the page, which is shown in the browser's title bar or tab -->
    <title>Simple Page</title>
    <!-- This is the style section, where CSS rules are defined -->
    <style>
        /* This sets the style for the body of the page */
        body {
            /* This sets the font for the page */
            font-family: sans-serif;
            /* This sets the line height for the page */
            line-height: 1.6;
            /* This sets the margin for the page */
            margin: 20px;
        }
        /* This sets the style for h1 elements */
        h1 {
            /* This sets the color of the text */
            color: #333;
        }
    </style>
</head>
<!-- This is the body of the HTML document, which contains the content of the page -->
<body>
    <!-- This is a heading element -->
    <h1>Welcome to My Simple Page</h1>
    <!-- This is a paragraph element -->
    <p>This page was generated by CodeGeeX.</p>
</body>
</html>

يمكنك حتى أن تطلب منه تحويل هذه التعليقات إلى اللغة العربية.

ميزات إضافية

بالطبع، عند الضغط بزر الماوس الأيمن، ستجد أيضًا خيارات مثل إنشاء اختبارات (Generate Tests) ومراجعة الكود (Review Code)، وميزة لإضافة التعليقات تلقائيًا على أي كود. هناك العديد من الميزات داخل هذه الأداة يمكنكم تجربتها.

آمل أن يكون هذا المقال قد أفادكم، وإلى اللقاء في مقال جديد.