العمل مع الصور
تحميل الصور والعمل معها في Verdent
يتضمن Verdent for VS Code قدرات متعددة الوسائط قوية، تتيح لك تحميل الصور والحصول على تحليل بصري، وإنشاء الكود من التصاميم النموذجية، وتصحيح الأخطاء باستخدام لقطات الشاشة، وأكثر من ذلك. يوضح هذا الدليل سير عمل عملي للاستفادة من فهم الصور في عملية التطوير الخاصة بك.
تحميل الصور إلى Verdent
لنفترض أنك تريد مشاركة صورة مع Verdent للتحليل أو الرجوع إليها.
طريقة سريعة عبر الحافظة:
- انسخ صورة إلى الحافظة (لقطة شاشة، منسوخة من المتصفح، إلخ)
- انقر داخل حقل إدخال Verdent
- اضغط Ctrl+V (على Windows/Linux) للصق
مهم: على macOS، استخدم Ctrl+V (وليس Cmd+V) لصق الصور.
تظهر الصورة في المحادثة.
الرجوع إلى الصور بواسطة المسار:
Analyze this screenshot: /path/to/screenshot.pngيقرأ Verdent الصورة من المسار المحدد.
/home/user/screenshots/error.png
/Users/john/Desktop/mockups/design.png./screenshots/error.png
./mockups/design.png../images/diagram.png
../../assets/logo.pngالصيغ الشائعة: PNG وJPG وJPEG وWebP وGIF
العمل مع صور متعددة:
- لصق صور متعددة من الحافظة بالتتابع
- أو الرجوع إلى مسارات متعددة:
Compare these three mockups: design-v1.png, design-v2.png, design-v3.pngتظهر جميع الصور في المحادثة ويمكن الرجوع إليها بشكل جماعي.
نصائح:
- الصيغ المدعومة: PNG وJPG وJPEG وWebP وGIF وBMP
- تبقى الصور ضمن سياق المحادثة للمناقشات متعددة الأدوار
- يمكنك الرجوع إلى الصور المُحمَّلة في الأسئلة اللاحقة
- جودة الصورة الواضحة تُنتج نتائج تحليل أفضل
إنشاء الكود من التصاميم النموذجية
لنفترض أن لديك تصميمًا نموذجيًا وتريد من Verdent إنشاء كود التنفيذ.
تحميل التصميم النموذجي
انسخ صورة التصميم النموذجي (من تصدير Figma، أداة تصميم، أو رسم يدوي) أو أشر إليها بمسار الملف.
طلب إنشاء الكود
Generate React components to implement this dashboard designيحلل Verdent البنية البصرية.
ينشئ Verdent بنية المكونات
يحدد Verdent العناصر البصرية وينشئ:
// DashboardLayout.tsx
import React from 'react';
import { StatCard } from './StatCard';
import { RecentActivity } from './RecentActivity';
import { UserChart } from './UserChart';
export function DashboardLayout() {
return (
<div className="dashboard-container">
<div className="stats-grid">
<StatCard title="Total Users" value="1,234" trend="+12%" />
<StatCard title="Revenue" value="$45.6K" trend="+8%" />
<StatCard title="Active Sessions" value="89" trend="-3%" />
</div>
<div className="charts-section">
<UserChart />
</div>
<div className="activity-section">
<RecentActivity />
</div>
</div>
);
}تطابق المكونات بنية التصميم النموذجي.
إنشاء ملف CSS المطابق
Generate Tailwind CSS classes to match the mockup stylingيضيف Verdent التنسيق بناءً على التصميم البصري:
<div className="grid grid-cols-3 gap-6 p-6">
<StatCard className="bg-white rounded-lg shadow-md p-4" ... />
</div>تحسين التفاصيل
The spacing between stat cards should be larger, and add the blue accent color from the mockupيضبط Verdent النتيجة لمطابقة التصميم بدقة أكبر.
نصائح:
- التصاميم النموذجية بدقة أعلى تُنتج كودًا أكثر دقة
- حدد إطار العمل الخاص بك: React أو Vue أو Angular أو HTML/CSS الأساسي
- اذكر منهج التنسيق: Tailwind أو CSS Modules أو Styled Components
- قدّم رموز الألوان أو تفاصيل نظام التصميم لمزيد من الدقة
- تعمل الرسومات اليدوية أيضًا لإنشاء نماذج أولية سريعة
تصحيح الأخطاء باستخدام لقطات الشاشة
لنفترض أنك واجهت رسالة خطأ وتريد مساعدة في فهمها.
الصق لقطة شاشة لوحدة تحكم المتصفح تعرض الخطأ:
Here's the error I'm getting in the console. What's causing it?يقرأ Verdent:
- نص رسالة الخطأ
- معلومات تتبع المكدس (stack trace)
- أسماء الملفات وأرقام الأسطر
- تحذيرات وحدة التحكم ذات الصلة
يقدم Verdent التشخيص:
This is a "Cannot read property 'map' of undefined" error. The 'users' array is undefined when the component first renders. Add a conditional check or default empty array.يقترح Verdent الحل.
الصق لقطة شاشة لأخطاء الترجمة (compilation) في الطرفية:
My TypeScript build is failing with these errorsيحلل Verdent:
- أخطاء النوع (Type errors)
- مسارات الملفات
- رموز الأخطاء
- سياق الترجمة
يوضح Verdent:
You have a type mismatch in UserProfile.tsx line 42. The 'age' property expects a number but you're passing a string. Cast it with Number(age).الصق لقطة شاشة لتتبع المكدس (stack trace) من سجلات التطبيق:
The application crashed with this exceptionيفحص Verdent:
- نوع الاستثناء
- تتبع المكدس
- أسماء الطرق وأرقام الأسطر
- رسائل السجل السياقية
يحدد السبب الجذري ويقترح الحلول.
الصق لقطة شاشة لعلامة تبويب Network في أدوات المطور بالمتصفح:
This API request is failing, here's the network tabيحلل Verdent:
- رمز حالة HTTP
- رؤوس الطلب/الاستجابة
- محتوى الطلب (payload)
- نص الاستجابة
يشخص مشكلة API.
نصائح:
- أدرج رسائل الخطأ الكاملة (لا تقتصر على اقتصاص التفاصيل المهمة)
- أظهر تتبع المكدس كاملًا حيثما أمكن
- أدرج السياق المحيط (رسائل وحدة التحكم الأخرى، طلبات الشبكة)
- التقط لقطة شاشة للخطأ الفعلي، لا مجرد وصفه في النص
الأسئلة المتكررة
ما هي حدود حجم ملف الصورة المطبقة؟
الحد الأقصى لحجم الملف: 5 ميجابايت (يتم ضغطها تلقائيًا في حال تجاوز هذا الحد؛ ويظهر خطأ إذا تجاوزت 5 ميجابايت بعد الضغط)
الحد الأقصى للدقة: 2000×2000 بكسل
الصيغ المدعومة: PNG وJPG وJPEG وGIF وBMP وWebP
أفضل الممارسات: استخدم صورًا أقل من 3 ميجابايت بدقة تصل إلى 2000×2000 لتحقيق أفضل أداء وتحليل دقيق.
هل يمكن لـ Verdent تحليل صور متعددة في محادثة واحدة؟
نعم. يمكنك لصق صور متعددة بالتتابع أو الرجوع إلى مسارات ملفات متعددة في prompt واحد. يحافظ Verdent على السياق عبر جميع الصور للمقارنة والتحليل. مثال: "قارن هذه التصاميم النموذجية الثلاثة وحدد الفروقات."
هل يقوم Verdent بتحميل صوري إلى خوادم خارجية؟
تُعالَج الصور الملصقة عبر الحافظة أو المرجعة بمسار الملف ضمن جلسة محادثتك. لا يتم تخزين الصور بشكل دائم، ويتم مسحها عند بدء محادثة جديدة. تقرأ مراجع مسار الملف الصورة محليًا دون تحميلها.
هل يمكن لـ Verdent إنشاء كود جاهز للإنتاج من التصاميم النموذجية؟
ينشئ Verdent كودًا أوليًا وظيفيًا ينفذ البنية البصرية والتخطيط والتنسيق من تصميمك النموذجي. ستحتاج عادةً إلى التحسين بإضافة منطق الأعمال، وتكامل البيانات، وميزات إمكانية الوصول، ومعالجة الأخطاء، وتحسينات الإنتاج.
ماذا لو أخطأ Verdent في تفسير تصميمي النموذجي؟
قدّم ملاحظات تصحيحية بشكل تكراري. قل "يجب أن يكون الترويسة (header) باللون الأزرق، لا الرمادي" أو "يجب أن تكون تلك البطاقات في شبكة من 3 أعمدة، لا 4 أعمدة." سيضبط Verdent التنفيذ بناءً على تصحيحاتك. جولات التحسين المتعددة أمر طبيعي.