يقدم VS Code طرقًا متنوعة لدمج أدوات كتابة الأكواد البرمجية بالذكاء الاصطناعي، لكن العديد من هذه الخيارات تتطلب الاتصال بخدمة طرف ثالث، مما قد يعرض المعلومات الحساسة أو السرية للخطر، لهذا السبب يفضل معظم المطورين استخدام مساعدا ت ذكية لكتابة الأكواد تعمل محليًا على أجهزة الحواسيب الخاصة بهم لتجنب مشاركة البيانات مع مزودي خدمات خارجية.
خطوات دمج Llama 3 مع محرر الأكواد VS Code
فيما يلي دليل يوضح لك خطوة بخطوة حول كيفية استخدام نموذج Llama 3 المجاني ومفتوح المصدر الذي يعمل محليًا على جهازك مع Visual Studio Code:
الخطوة 1: تنزيل وتثبيت المتطلبات
- تنزيل Visual Studio Code من الموقع الرسمي إذا لم تكن قد فعلت ذلك بالفعل.
- تنزيل Ollama من موقع Ollama.com.
- تثبيت Llama 3 باستخدام Ollama.
الخطوة 2: إعداد Llama 3 في Visual Studio Code
بعد التثبيت، ستظهر لك في أعلى يمين نافذة الدردشة انقر على Connect. قم بالتسجيل وتسجيل الدخول بحسابك ثم انقر على أيقونة CodeGPT، ثم انقر على Extension Settings. وفي الإعدادات، اختر Ollama كمزود من القائمة المنسدلة وقم بتمكين خيار CodeGPT Co-pilot ولتفعيل الإكمال التلقائي، اختر llama3:Instruct.
الخطوة 3: تكوين إعدادات AI Co-pilot
افتح نافذة الطرفية أو التيرمينال داخل Visual Studio Code لكي تتمكن من تنفيذ الأوامر البرمجية،ثم قم بتشغيل الأوامر التالية لتكوين النماذج المطلوبة:
Copyollama pull llama3:8b
ollama pull llama3:instruct
الخطوة 4: إنشاء ملف جديد
على الجانب الأيسر، انقر على أيقونة ملف جديد وأنشئ ملفًا جديدًا باسم test.html.
انقر على أيقونة CodeGPT، واختر المزود Ollama
الخطوة 5: كتابة وتشغيل أول طلب PROMPT لتوليد الأكواد
اكتب أي طلب تحتاج من النموذج كتابته على سبيل المثال سنطلب من النموذج إنشاء صفحة رئيسية أساسية باستخدام Bootstrap 5 تشمل مكونات تجريبية مثل هيدر يحتوي على اسمك ووصف قصير، قسم يحتوي على صور لمشاريعك، نموذج اتصال يحتوي على حقول للاسم والبريد الإلكتروني والرسالة، وفوتر يحتوي على روابط لوسائل التواصل الاجتماعي.
Create a basic Bootstrap 5 homepage including demo components such as a header with your name and a short description, a section with images of your projects, a contact form with fields for name, email, and message, and a footer with social media links.
ملاحظة: من الأفضل كتابة PROMPT باللغة الانجليزية لضمان دقة النتائج.
سنحصل على كود برمجي مشابه لما يلي:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Liam's Homepage</title>
<!-- Bootstrap 5 CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<!-- Header Section -->
<header class="bg-primary text-white text-center py-5">
<h1>Liam's Homepage</h1>
<p class="lead">Welcome to my personal homepage! Here you can learn more about my projects and get in touch.</p>
</header>
<!-- Projects Section -->
<section class="container my-5">
<h2 class="text-center mb-4">My Projects</h2>
<div class="row">
<div class="col-md-4">
<div class="card">
<img src="https://via.placeholder.com/300x200" class="card-img-top" alt="Project 1">
<div class="card-body">
<h5 class="card-title">Project 1</h5>
<p class="card-text">Description of the first project goes here.</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<img src="https://via.placeholder.com/300x200" class="card-img-top" alt="Project 2">
<div class="card-body">
<h5 class="card-title">Project 2</h5>
<p class="card-text">Description of the second project goes here.</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<img src="https://via.placeholder.com/300x200" class="card-img-top" alt="Project 3">
<div class="card-body">
<h5 class="card-title">Project 3</h5>
<p class="card-text">Description of the third project goes here.</p>
</div>
</div>
</div>
</div>
</section>
<!-- Contact Section -->
<section class="container my-5">
<h2 class="text-center mb-4">Contact Me</h2>
<form>
<div class="mb-3">
<label for="name" class="form-label">Name</label>
<input type="text" class="form-control" id="name" required>
</div>
<div class="mb-3">
<label for="email" class="form-label">Email</label>
<input type="email" class="form-control" id="email" required>
</div>
<div class="mb-3">
<label for="message" class="form-label">Message</label>
<textarea class="form-control" id="message" rows="4" required></textarea>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</section>
<!-- Footer Section -->
<footer class="bg-dark text-white text-center py-4">
<p>Follow me on social media:</p>
<a href="#" class="text-white me-3">Facebook</a>
<a href="#" class="text-white me-3">Twitter</a>
<a href="#" class="text-white">LinkedIn</a>
</footer>
<!-- Bootstrap 5 JS and Popper -->
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js"></script>
</body>
</html>
بعد إنشاء الكود المطلوب انقر على إدراج لإضافة الكود إلى الملف البرمجي وهذه الصفحة التي حصلنا عليها.
الخطوة 6: تحرير الكود
قد تحتاج لإجراء تغييرات على الكود وتحريره إما يدويًا أو باستخدام طلبات اللغة الطبيعية في Ollama للوصول للنتيجة المطلوبة.
الخاتمة
باتباع هذه الخطوات، يمكنك بسرعة إنشاء وتصحيح وتوثيق الكود باستخدام Llama 3 في Visual Studio Code، مما يحسن إنتاجيتك ويقلل من الأخطاء دون الحاجة إلى مشاركة معلوماتك السرية مع مزودي مساعدات الكود الخارجيين.
ليست هناك تعليقات :
إرسال تعليق