يمكن أن يكون الحصول على مساعدة في كتابة الرموز البرمجية من نماذج الذكاء الاصطناعي مفيدًا جدًا، ولكن ماذا لو تم حظرك من استخدام نماذج الذكاء الاصطناعي التوليدي المستضافة والتابعة لجهات خارجية بسبب قيود على الاتصال أو التكلفة أو أمان البيانات؟ يمكنك تنزيل مجموعة نماذج Gemma من Google وتشغيلها على الأجهزة الخاصة بك، ما يتيح لك الاحتفاظ بكل البيانات محليًا، ويمكنك حتى ضبط النموذج ليعمل بشكل أفضل مع قاعدة الرموز البرمجية.
يمكن أن يوفّر لك تشغيل نسخة من Gemma أو CodeGemma مساعدة في الترميز مستندة إلى الذكاء الاصطناعي مع وقت استجابة منخفض وتوفّر عالٍ وتكلفة أقل، بالإضافة إلى إمكانية الاحتفاظ بجميع بيانات الترميز على شبكتك الخاصة. يوضّح لك هذا المشروع كيفية إعداد خدمة ويب خاصة بك لاستضافة Gemma وربطها بإضافة Microsoft Visual Studio Code، وذلك لتسهيل استخدام النموذج أثناء الترميز. يتضمّن هذا المشروع مشروعَين فرعيَين: مشروع واحد لإعداد Gemma وتضمينها في خدمة ويب، ومشروع ثانٍ لإضافة VS Code التي تتصل بخدمة الويب وتستخدمها.
للحصول على نظرة عامة حول هذا المشروع وكيفية توسيعه، بما في ذلك إحصاءات من الفريق الذي أنشأه، يمكنك مشاهدة الفيديو مساعد الذكاء الاصطناعي الشخصي في كتابة الرموز البرمجية ضمن سلسلة Build with Google AI. يمكنك أيضًا مراجعة رمز هذا المشروع في مستودع رموز كتاب الطبخ الخاص بـ Gemma. وإلّا، يمكنك البدء في توسيع المشروع باتّباع التعليمات التالية.
نظرة عامة
يوضّح لك هذا البرنامج التعليمي كيفية إعداد مشروعَين وتوسيع نطاق عملهما: خدمة ويب خاصة بـ Gemma وإضافة إلى VS Code لاستخدام تلك الخدمة. تستخدم خدمة الويب مكتبات Python وKeras وJAX وFastAPI لعرض نموذج Gemma والتعامل مع الطلبات. تضيف إضافة VS Code، المسماة Pipet، أوامر إلى "لوحة الأوامر" تتيح لك إرسال طلبات إلى خدمة الويب Gemma من خلال اختيار الرمز أو النص أو التعليقات في نافذة تعديل الرمز، كما هو موضّح في الشكل 1.
الشكل 1: واجهة مستخدم أوامر المشروع لإضافة Pipet في Visual Studio Code
يتوفّر رمز المصدر الكامل لكلا المشروعَين في مستودع الرموز الخاص بـ Gemma Cookbook، ويمكنك توسيع نطاق كلا المشروعَين ليناسبا احتياجاتك وسير العمل المفضّل لديك.
إعداد المشروع
توضّح لك هذه التعليمات كيفية إعداد هذا المشروع للتطوير والاختبار. تشمل خطوات الإعداد العامة تثبيت البرامج الأساسية، واستنساخ المشروع من مستودع الرموز البرمجية، وضبط بعض متغيرات البيئة، وتثبيت مكتبات Python وNode.js، واختبار تطبيق الويب.
تثبيت البرامج المطلوبة
يستخدم هذا المشروع الإصدار 3 من لغة Python، وبيئات افتراضية (venv)، وNode.js، وNode Package Manager (npm) لإدارة الحِزم وتشغيل المشروعَين.
لتثبيت البرنامج المطلوب، اتّبِع الخطوات التالية:
ثبِّت Python 3 وحزمة البيئة الافتراضية (
venv) للغة Python وNode.js ومدير حزمة Node.js (npm):sudo apt update sudo apt install git pip python3-venv nodejs npm
استنساخ المشروع
نزِّل رمز المشروع إلى جهاز الكمبيوتر المخصّص للتطوير. يجب استخدام برنامج git للتحكّم في رمز المصدر من أجل استرداد رمز المصدر للمشروع.
لتنزيل رمز المشروع، اتّبِع الخطوات التالية:
استنسِخ مستودع git باستخدام الأمر التالي:
git clone https://github.com/google-gemini/gemma-cookbook.gitاختياري: اضبط مستودع git المحلي لاستخدام ميزة "السحب الجزئي"، بحيث لا يتضمّن سوى ملفات المشروع:
cd gemma-cookbook/ git sparse-checkout set Demos/personal-code-assistant/ git sparse-checkout init --cone
مشروع خدمة الويب Gemma
يُنشئ جزء خدمة الويب من هذا المشروع (gemma-web-service) نسخة مستضافة بشكل مستقل من Gemma 2 2B، ويتم تضمينها في خدمة ويب أساسية للتعامل مع طلبات الإنشاء والردود. يتصل ملحق VS Code، الذي سنتناوله لاحقًا في هذا البرنامج التعليمي، بهذه الخدمة للتعامل مع طلبات المساعدة في كتابة الرموز.
توضّح لك هذه التعليمات كيفية إعداد هذا المشروع للتطوير والاختبار. تشمل خطوات الإعداد العامة تثبيت البرامج الأساسية، واستنساخ المشروع من مستودع الرموز البرمجية، وضبط بعض متغيرات البيئة، وتثبيت مكتبات Python، واختبار خدمة الويب.
متطلبات الأجهزة
شغِّل مشروع خدمة الويب Gemma على جهاز كمبيوتر مزوّد بوحدة معالجة الرسومات (GPU) أو وحدة معالجة الموتّرات (TPU) وذاكرة كافية لوحدة معالجة الرسومات أو وحدة معالجة الموتّرات لتخزين النموذج. لتشغيل إعداد Gemma 2 2B في مشروع خدمة الويب هذا، تحتاج إلى ذاكرة وحدة معالجة الرسومات بسعة 16 غيغابايت تقريبًا، وذاكرة وصول عشوائي عادية بسعة مماثلة، ومساحة على القرص لا تقل عن 20 غيغابايت.
إذا كنت بصدد نشر مشروع خدمة الويب Gemma على مثيل جهاز افتراضي على Google Cloud، عليك ضبط إعدادات المثيل وفقًا للمتطلبات التالية:
- أجهزة وحدة معالجة الرسومات: يجب توفّر NVIDIA T4 لتشغيل هذا المشروع (يُنصح باستخدام NVIDIA L4 أو إصدار أحدث)
- نظام التشغيل: اختَر أحد خيارات التعلم العميق على نظام التشغيل Linux، وتحديدًا Deep Learning VM with CUDA 12.3 M124 مع برامج تشغيل برامج وحدة معالجة الرسومات المثبّتة مسبقًا.
- حجم قرص التشغيل: يجب توفير مساحة تخزين على القرص لا تقل عن 20 غيغابايت للبيانات والنموذج والبرامج المتوافقة.
إعداد المشروع
يستخدم هذا المشروع الإصدار 3 من لغة Python والبيئات الافتراضية (venv) لإدارة الحِزم وتشغيل خدمة الويب. ثبِّت مكتبات Python مع تفعيل venv بيئة Python الافتراضية لإدارة حِزم Python والموارد التابعة. احرص على تفعيل البيئة الافتراضية لـ Python قبل تثبيت مكتبات Python باستخدام النص البرمجي setup_python أو برنامج التثبيت pip. لمزيد من المعلومات حول استخدام البيئات الافتراضية في Python، يُرجى الاطّلاع على مستندات Python venv.
لتثبيت مكتبات Python، اتّبِع الخطوات التالية:
في نافذة الوحدة الطرفية، انتقِل إلى الدليل
gemma-web-service:cd Demos/personal-code-assistant/gemma-web-service/اضبط وفعِّل بيئة Python افتراضية (venv) لهذا المشروع:
python3 -m venv venv source venv/bin/activateثبِّت مكتبات Python المطلوبة لهذا المشروع باستخدام النص البرمجي
setup_python:./setup_python.sh
ضبط متغيرات البيئة
يتطلّب هذا المشروع بعض متغيرات البيئة لتشغيله،
بما في ذلك اسم مستخدم على Kaggle ورمز مميّز لواجهة برمجة التطبيقات على Kaggle. يجب أن يكون لديك حساب على Kaggle وطلب الوصول إلى نماذج Gemma لتتمكّن من تنزيلها. بالنسبة إلى هذا المشروع، عليك إضافة اسم المستخدم على Kaggle ورمز API الخاص بـ Kaggle في ملف .env
، ويستخدم برنامج خدمة الويب هذا الملف لتنزيل النموذج.
لضبط متغيّرات البيئة، اتّبِع الخطوات التالية:
- احصل على اسم المستخدم ورمز API المميز الخاصين بك على Kaggle باتّباع التعليمات الواردة في مستندات Kaggle.
- يمكنك الوصول إلى نموذج Gemma باتّباع التعليمات الواردة في صفحة إعداد Gemma ضمن الوصول إلى Gemma.
أنشئ ملفًا لمتغيّرات البيئة خاصًا بالمشروع، وذلك من خلال إنشاء ملف نصي
.envفي هذا الموقع في نسخة المشروع التي نسختها:personal-code-assistant/gemma-web-service/.envبعد إنشاء ملف نصي
.env، أضِف الإعدادات التالية إليه:KAGGLE_USERNAME=<YOUR_KAGGLE_USERNAME_HERE> KAGGLE_KEY=<YOUR_KAGGLE_KEY_HERE>
تشغيل خدمة الويب واختبارها
بعد إكمال عملية تثبيت المشروع وإعداده، شغِّل تطبيق الويب للتأكّد من أنّك أعددته بشكل صحيح. يجب إجراء هذا الفحص الأساسي قبل تعديل المشروع لاستخدامك الخاص.
لتشغيل المشروع واختباره، اتّبِع الخطوات التالية:
في نافذة الوحدة الطرفية، انتقِل إلى الدليل
gemma-web-service:cd personal-code-assistant/gemma-web-service/شغِّل التطبيق باستخدام النص البرمجي
run_service:./run_service.shبعد بدء خدمة الويب، يعرض رمز البرنامج عنوان URL يمكنك من خلاله الوصول إلى الخدمة. عادةً ما يكون هذا العنوان:
http://localhost:8000/اختبِر الخدمة من خلال تشغيل النص البرمجي
test_post:./test/test_post.sh
بعد تشغيل الخدمة واختبارها بنجاح باستخدام هذا النص البرمجي، ستكون جاهزًا للاتصال بها باستخدام إضافة VS Code في القسم التالي من هذا البرنامج التعليمي.
مشروع إضافة VS Code
تنشئ إضافة VS Code لهذا المشروع (pipet-code-agent-2) إضافة برمجية لتطبيق Microsoft Visual Studio Code مصمَّمة لإضافة أوامر ترميز جديدة مستندة إلى الذكاء الاصطناعي. تتواصل هذه الإضافة مع
خدمة Gemma على الويب الموضّحة سابقًا في هذا الدليل التعليمي. يتواصل الامتداد مع خدمات الويب عبر http باستخدام رسائل بتنسيق JSON.
إعداد المشروع
توضّح لك هذه التعليمات كيفية إعداد مشروع Pipet Code Agent v2 للتطوير والاختبار. تتضمّن الخطوات العامة تثبيت البرامج المطلوبة، وتشغيل عملية تثبيت الإعدادات، وضبط إعدادات الإضافة، واختبار الإضافة.
تثبيت البرامج المطلوبة
يعمل مشروع Pipet Code Agent كإضافة في Visual Studio Code من Microsoft، ويستخدم Node.js وأداة Node Package Manager (npm) لإدارة الحِزم وتشغيل التطبيق.
لتثبيت البرنامج المطلوب، اتّبِع الخطوات التالية:
- نزِّل Visual Studio Code وثبِّته على نظام التشغيل الذي تستخدمه.
- تأكَّد من تثبيت Node.js باتّباع تعليمات التثبيت الخاصة بمنصتك.
ضبط مكتبات المشروع
استخدِم أداة سطر الأوامر npm لتنزيل التبعيات المطلوبة وإعداد المشروع.
لضبط رمز المشروع، اتّبِع الخطوات التالية:
انتقِل إلى الدليل الجذري لمشروع Pipet Code Agent.
cd Demos/personal-code-assistant/pipet-code-agent-2/شغِّل أمر التثبيت لتنزيل الاعتماديات وضبط المشروع:
npm install
ضبط الإضافة
من المفترض أن تتمكّن الآن من اختبار عملية التثبيت من خلال تشغيل Pipet Code Agent كإضافة تطوير في VS Code على جهازك. يفتح الاختبار نافذة مضيف تطوير الإضافات منفصلة في VS Code حيث تتوفّر الإضافة الجديدة. في هذه النافذة الجديدة، يمكنك ضبط الإعدادات التي تستخدمها الإضافة للوصول إلى خدمة الويب الشخصية الخاصة بك على Gemma.
الشكل 2. نافذة "مضيف تطوير إضافة VS Code" مع إعدادات إضافة Pipet
لضبط إعداداتك واختبارها، اتّبِع الخطوات التالية:
- ابدأ تشغيل تطبيق VS Code.
- في VS Code، أنشئ نافذة جديدة من خلال النقر على ملف (File) > نافذة جديدة (New Window).
- افتح مشروع Pipet Code Agent من خلال النقر على ملف > فتح مجلد،
ثم اختَر المجلد
personal-code-assistant/pipet-code-agent-2/. - افتح ملف
pipet-code-agent-2/src/extension.ts. - شغِّل الإضافة في وضع تصحيح الأخطاء من خلال اختيار تشغيل (Run) > بدء تصحيح الأخطاء (Start Debugging)، واختَر الخيار مضيف تطوير إضافة VS Code (VS Code Extension Development Host) إذا لزم الأمر. تؤدي هذه الخطوة إلى فتح نافذة منفصلة باسم مضيف تطوير الإضافات.
- في نافذة VS Code الجديدة، افتح إعدادات VS Code من خلال النقر على Code > Settings > Settings.
اضبط عنوان المضيف لخادم خدمة الويب Gemma كإعداد ضبط. في حقل إعدادات البحث، اكتب
Gemma، ثم انقر على علامة التبويب المستخدم، وفي إعداد Gemma > الخدمة: المضيف، انقر على الرابط تعديل في settings.json، وأضِف عنوان المضيف، مثل127.0.0.1أوlocalhostأوmy-server.my-local-domain.com:"gemma.service.host": "your-host-address-here"احفظ التغييرات في ملف
settings.jsonوأغلِق علامات تبويب الإعدادات.
اختبار الإضافة
من المفترض أن تتمكّن الآن من اختبار عملية التثبيت من خلال تشغيل Pipet Code Agent كإضافة تطوير في VS Code على جهازك. يفتح الاختبار نافذة مضيف تطوير الإضافات منفصلة في VS Code حيث تتوفّر الإضافة الجديدة.
لاختبار أوامر الإضافة، اتّبِع الخطوات التالية:
- في نافذة مضيف تطوير الإضافات في VS Code، اختَر أي رمز في نافذة المحرّر.
- افتح لوحة الأوامر من خلال النقر على عرض > لوحة الأوامر.
- في "لوحة الأوامر"، اكتب
Pipetواختَر أحد الأوامر التي تبدأ بهذا البادئة.
تعديل الأوامر الحالية
تعديل الأوامر المقدَّمة في Pipet Code Agent هو أبسط طريقة لتغيير سلوك الإضافة وإمكاناتها. توجّه معلومات سياق الطلب هذه نموذج Gemma التوليدي في إنشاء ردّ. من خلال تغيير تعليمات الطلب في أوامر Pipet الحالية، يمكنك تغيير طريقة عمل كل أمر.
توضّح هذه المجموعة من التعليمات كيفية تعديل الأمر review.ts من خلال تغيير نص الطلب الخاص بالأمر.
للاستعداد لتعديل الأمر review.ts، اتّبِع الخطوات التالية:
- ابدأ تشغيل تطبيق VS Code.
- في VS Code، أنشئ نافذة جديدة من خلال النقر على ملف (File) > نافذة جديدة (New Window).
- افتح مشروع Pipet Code Agent من خلال النقر على ملف > فتح مجلد،
ثم اختَر المجلد
pipet-code-agent/. - افتح ملف
pipet-code-agent/src/review.ts.
لتعديل سلوك الأمر review.ts، اتّبِع الخطوات التالية:
في الملف
review.ts، غيِّر السطر قبل الأخير من الثابتPROMPT_INSTRUCTIONSلإضافةAlso note potential performance improvements.const PROMPT_INSTRUCTIONS = ` Reviewing code involves finding bugs and increasing code quality. Examples of bugs are syntax errors or typos, out of memory errors, and boundary value errors. Increasing code quality entails reducing complexity of code, eliminating duplicate code, and ensuring other developers are able to understand the code. Also note potential performance improvements. Write a review of the following code: `;احفظ التغييرات في ملف
review.ts.
لاختبار الأمر المعدَّل، اتّبِع الخطوات التالية:
- في نافذة مشروع إضافة Pipet في VS Code، افتح الملف
src/extension.ts. - أنشئ الرمز المعدَّل من خلال اختيار Terminal > Run Build Task... ثم الخيار npm: compile.
- أعِد تشغيل برنامج تصحيح الأخطاء من خلال النقر على تشغيل > إعادة تشغيل تصحيح الأخطاء.
- في نافذة مضيف تطوير الإضافات في VS Code، اختَر أي رمز في نافذة المحرّر.
- افتح لوحة الأوامر من خلال النقر على عرض > لوحة الأوامر.
- في "لوحة الأوامر" (Command Palette)، اكتب
Pipetواختَر الأمر Pipet: مراجعة الرمز المحدّد.
إنشاء أوامر جديدة
يمكنك توسيع نطاق Pipet من خلال إنشاء أوامر جديدة تنفّذ مهامًا جديدة تمامًا باستخدام نموذج Gemma. كل ملف أمر، مثل comment.ts أو review.ts، يكون
مستقلاً في الغالب، ويتضمّن رمزًا برمجيًا لجمع النص من المحرّر النشط،
وإنشاء طلب، والاتصال بخدمة Gemma على الويب، وإرسال
طلب، والتعامل مع الرد.
توضّح هذه المجموعة من التعليمات كيفية إنشاء أمر جديد باستخدام رمز أمر حالي، question.ts، كنموذج.
لإنشاء أمر يقترح أسماء للدوال، اتّبِع الخطوات التالية:
- أنشِئ نسخة من الملف
pipet-code-agent-2/src/question.tsباسمnew-service.tsفي الدليلsrc/. - في VS Code، افتح الملف
src/new-service.ts. غيِّروا تعليمات الطلب في الملف الجديد من خلال تعديل القيمة
PROMPT_INSTRUCTIONS.// Provide instructions for the AI model const PROMPT_INSTRUCTIONS = ` Build a Python web API service using FastAPI and uvicorn. - Just output the code, DO NOT include any explanations. - Do not include an 'if __name__ == "__main__":' statement. - Do not include a '@app.get("/")' statement - Do not include a '@app.get("/info")' statement `;أضِف نموذجًا للخدمة من خلال إنشاء ثابت
BOILERPLATE_CODEجديد.const BOILERPLATE_CODE = ` # the following code for testing and diagnosis: @app.get("/") async def root(): return "Server: OK" @app.get("/info") async def info(): return "Service using FastAPI version: " + fastapi.__version__ # Run the service if __name__ == "__main__": # host setting makes service available to other devices uvicorn.run(app, host="0.0.0.0", port=8000) `;غيِّر اسم دالة الأمر إلى
newService()وعدِّل رسالة المعلومات الخاصة بها.export async function newService() { vscode.window.showInformationMessage('Building new service from template...'); ...عدِّل رمز تجميع الطلب ليشمل النص المحدّد في أداة التعديل و
PROMPT_INSTRUCTIONS.// Build the full prompt using the template. const promptText = `${selectedCode}${PROMPT_INSTRUCTIONS}`;غيِّر رمز إدراج الردّ ليشمل الردّ والرمز النموذجي.
// Insert answer after selection. editor.edit((editBuilder) => { editBuilder.insert(selection.end, "\n\n" + responseText); editBuilder.insert(selection.end, "\n" + BOILERPLATE_CODE); });احفظ التغييرات في ملف
new-service.ts.
دمج الأمر الجديد
بعد إكمال الرمز للأمر الجديد، عليك دمجه مع بقية الإضافة. عدِّل الملفَين extension.ts وpackage.json لجعل الأمر الجديد جزءًا من الإضافة، ولتمكين VS Code من استدعاء الأمر الجديد.
لدمج الأمر new-service مع رمز الإضافة، اتّبِع الخطوات التالية:
- في VS Code، افتح
pipet-code-agent-2/src/extension.tsالملف. أضِف ملف الرمز الجديد إلى الإضافة من خلال إضافة عبارة استيراد جديدة.
import { newService } from './new-service';سجِّل الأمر الجديد عن طريق إضافة الرمز التالي إلى الدالة
activate().export function activate(context: vscode.ExtensionContext) { ... vscode.commands.registerCommand('pipet-code-agent.newService', newService); }احفظ التغييرات في ملف
extension.ts.
لدمج الأمر name مع حزمة الإضافة، اتّبِع الخطوات التالية:
- في VS Code، افتح الملف
pipet-code-agent/package.json. أضِف الأمر الجديد إلى القسم
commandsفي ملف الحزمة."contributes": { "commands": [ ... { "command": "pipet-code-agent.newService", "title": "Pipet: Generate a FastAPI service." } ],احفظ التغييرات في ملف
package.json.
اختبار الأمر الجديد
بعد الانتهاء من ترميز الأمر ودمجه مع الإضافة، يمكنك اختباره. لا يتوفّر الأمر الجديد إلا في نافذة مضيف تطوير الإضافات في VS Code، وليس في نافذة VS Code التي عدّلت فيها رمز الإضافة.
لاختبار الأمر المعدَّل، اتّبِع الخطوات التالية:
- في نافذة مشروع إضافة Pipet في VS Code، افتح الملف
src/extension.ts. - أنشئ الرمز المعدَّل من خلال اختيار Terminal > Run Build Task... ثم الخيار npm: compile.
- في نافذة مشروع إضافة Pipet في VS Code، أعِد تشغيل برنامج تصحيح الأخطاء من خلال اختيار تشغيل > إعادة تشغيل تصحيح الأخطاء (Run > Restart Debugging)، ما يؤدي إلى إعادة تشغيل نافذة مضيف تطوير الإضافة (Extension Development Host) منفصلة.
- في نافذة مضيف تطوير الإضافات في VS Code، اختَر بعض الرموز البرمجية في نافذة المحرّر.
- افتح لوحة الأوامر من خلال النقر على عرض > لوحة الأوامر.
- في "لوحة الأوامر" (Command Palette)، اكتب
Pipetواختَر الأمر Pipet: إنشاء خدمة FastAPI.
لقد أنشأت الآن أمر إضافة VS Code يعمل مع نموذج Gemma AI. جرِّب أوامر وتعليمات مختلفة لإنشاء سير عمل لتطوير الرموز البرمجية بمساعدة الذكاء الاصطناعي يناسبك.
تجميع الإضافة وتثبيتها
يمكنك تجميع الإضافة كملف .vsix لتثبيتها محليًا في نسخة VS Code. استخدِم أداة سطر الأوامر vsce لإنشاء ملف حزمة .vsix من مشروع الإضافة، ويمكنك بعد ذلك تثبيته في مثيل VS Code. للحصول على تفاصيل حول حِزم الإضافات، يُرجى الاطّلاع على مستندات
نشر الإضافات
في VS Code. بعد الانتهاء من تجميع الإضافة كملف VSIX، يمكنك تثبيتها يدويًا في VS Code.
لتثبيت إضافة مجمّعة بتنسيق VSIX، اتّبِع الخطوات التالية:
- في مثيل VS Code، افتح لوحة الإضافات من خلال اختيار ملف > الإضافات.
- في لوحة الإضافات، انقر على قائمة الخيارات الإضافية في أعلى يسار الصفحة، ثم على التثبيت من VSIX.
- افتح ملف حزمة
.vsixالذي أنشأته من مشروع الإضافة لتثبيته.
مراجع إضافية
لمزيد من التفاصيل حول رمز هذا المشروع، يُرجى الاطّلاع على مستودع رموز Gemma Cookbook. إذا كنت بحاجة إلى مساعدة في إنشاء التطبيق أو كنت تبحث عن التعاون مع مطوّرين آخرين، يمكنك الانتقال إلى خادم Google Developers Community Discord. للاطّلاع على المزيد من المشاريع ضمن "البناء باستخدام الذكاء الاصطناعي من Google"، يمكنك استكشاف قائمة تشغيل الفيديو.