# العمل مع الصور (/ar/docs/verdent-for-vscode/common-workflows/images)

> تحميل الصور والعمل معها في Verdent



يتضمن Verdent for VS Code قدرات متعددة الوسائط قوية، تتيح لك تحميل الصور والحصول على تحليل بصري، وإنشاء الكود من التصاميم النموذجية، وتصحيح الأخطاء باستخدام لقطات الشاشة، وأكثر من ذلك. يوضح هذا الدليل سير عمل عملي للاستفادة من فهم الصور في عملية التطوير الخاصة بك.

***

## تحميل الصور إلى Verdent [#تحميل-الصور-إلى-verdent]

لنفترض أنك تريد مشاركة صورة مع Verdent للتحليل أو الرجوع إليها.

<Tabs>
  <Tab title="النسخ واللصق">
    طريقة سريعة عبر الحافظة:

    1. انسخ صورة إلى الحافظة (لقطة شاشة، منسوخة من المتصفح، إلخ)
    2. انقر داخل حقل إدخال Verdent
    3. اضغط **Ctrl+V** (على Windows/Linux) للصق

    **مهم:** على macOS، استخدم **Ctrl+V** (وليس Cmd+V) لصق الصور.

    تظهر الصورة في المحادثة.
  </Tab>

  <Tab title="الرجوع بمسار الملف">
    الرجوع إلى الصور بواسطة المسار:

    ```
    Analyze this screenshot: /path/to/screenshot.png
    ```

    يقرأ Verdent الصورة من المسار المحدد.

    <CodeGroup>
      ```bash "Absolute Path"
      /home/user/screenshots/error.png
      /Users/john/Desktop/mockups/design.png
      ```

      ```bash "Relative Path (Project Root)"
      ./screenshots/error.png
      ./mockups/design.png
      ```

      ```bash "Relative Path (Current Directory)"
      ../images/diagram.png
      ../../assets/logo.png
      ```
    </CodeGroup>

    الصيغ الشائعة: PNG وJPG وJPEG وWebP وGIF
  </Tab>

  <Tab title="صور متعددة">
    العمل مع صور متعددة:

    1. لصق صور متعددة من الحافظة بالتتابع
    2. أو الرجوع إلى مسارات متعددة:

    ```
    Compare these three mockups: design-v1.png, design-v2.png, design-v3.png
    ```

    تظهر جميع الصور في المحادثة ويمكن الرجوع إليها بشكل جماعي.
  </Tab>
</Tabs>

<Tip>
  **نصائح:**

  * الصيغ المدعومة: PNG وJPG وJPEG وWebP وGIF وBMP
  * تبقى الصور ضمن سياق المحادثة للمناقشات متعددة الأدوار
  * يمكنك الرجوع إلى الصور المُحمَّلة في الأسئلة اللاحقة
  * جودة الصورة الواضحة تُنتج نتائج تحليل أفضل
</Tip>

***

## إنشاء الكود من التصاميم النموذجية [#إنشاء-الكود-من-التصاميم-النموذجية]

لنفترض أن لديك تصميمًا نموذجيًا وتريد من Verdent إنشاء كود التنفيذ.

<Steps>
  <Step title="تحميل التصميم النموذجي">
    انسخ صورة التصميم النموذجي (من تصدير Figma، أداة تصميم، أو رسم يدوي) أو أشر إليها بمسار الملف.
  </Step>

  <Step title="طلب إنشاء الكود">
    ```
    Generate React components to implement this dashboard design
    ```

    يحلل Verdent البنية البصرية.
  </Step>

  <Step title="ينشئ Verdent بنية المكونات">
    يحدد Verdent العناصر البصرية وينشئ:

    ```tsx
    // 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>
      );
    }
    ```

    تطابق المكونات بنية التصميم النموذجي.
  </Step>

  <Step title="إنشاء ملف CSS المطابق">
    ```
    Generate Tailwind CSS classes to match the mockup styling
    ```

    يضيف Verdent التنسيق بناءً على التصميم البصري:

    ```tsx
    <div className="grid grid-cols-3 gap-6 p-6">
      <StatCard className="bg-white rounded-lg shadow-md p-4" ... />
    </div>
    ```
  </Step>

  <Step title="تحسين التفاصيل">
    ```
    The spacing between stat cards should be larger, and add the blue accent color from the mockup
    ```

    يضبط Verdent النتيجة لمطابقة التصميم بدقة أكبر.
  </Step>
</Steps>

<Tip>
  **نصائح:**

  * التصاميم النموذجية بدقة أعلى تُنتج كودًا أكثر دقة
  * حدد إطار العمل الخاص بك: React أو Vue أو Angular أو HTML/CSS الأساسي
  * اذكر منهج التنسيق: Tailwind أو CSS Modules أو Styled Components
  * قدّم رموز الألوان أو تفاصيل نظام التصميم لمزيد من الدقة
  * تعمل الرسومات اليدوية أيضًا لإنشاء نماذج أولية سريعة
</Tip>

***

## تصحيح الأخطاء باستخدام لقطات الشاشة [#تصحيح-الأخطاء-باستخدام-لقطات-الشاشة]

لنفترض أنك واجهت رسالة خطأ وتريد مساعدة في فهمها.

<Tabs>
  <Tab title="خطأ في وحدة تحكم المتصفح">
    الصق لقطة شاشة لوحدة تحكم المتصفح تعرض الخطأ:

    ```
    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 الحل.
  </Tab>

  <Tab title="خطأ في الطرفية (Terminal)">
    الصق لقطة شاشة لأخطاء الترجمة (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).
    ```
  </Tab>

  <Tab title="استثناء وقت التشغيل (Runtime Exception)">
    الصق لقطة شاشة لتتبع المكدس (stack trace) من سجلات التطبيق:

    ```
    The application crashed with this exception
    ```

    يفحص Verdent:

    * نوع الاستثناء
    * تتبع المكدس
    * أسماء الطرق وأرقام الأسطر
    * رسائل السجل السياقية

    يحدد السبب الجذري ويقترح الحلول.
  </Tab>

  <Tab title="خطأ في الشبكة">
    الصق لقطة شاشة لعلامة تبويب Network في أدوات المطور بالمتصفح:

    ```
    This API request is failing, here's the network tab
    ```

    يحلل Verdent:

    * رمز حالة HTTP
    * رؤوس الطلب/الاستجابة
    * محتوى الطلب (payload)
    * نص الاستجابة

    يشخص مشكلة API.
  </Tab>
</Tabs>

<Tip>
  **نصائح:**

  * أدرج رسائل الخطأ الكاملة (لا تقتصر على اقتصاص التفاصيل المهمة)
  * أظهر تتبع المكدس كاملًا حيثما أمكن
  * أدرج السياق المحيط (رسائل وحدة التحكم الأخرى، طلبات الشبكة)
  * التقط لقطة شاشة للخطأ الفعلي، لا مجرد وصفه في النص
</Tip>

***

## الأسئلة المتكررة [#الأسئلة-المتكررة]

<Accordion title="ما هي حدود حجم ملف الصورة المطبقة؟">
  **الحد الأقصى لحجم الملف:** 5 ميجابايت (يتم ضغطها تلقائيًا في حال تجاوز هذا الحد؛ ويظهر خطأ إذا تجاوزت 5 ميجابايت بعد الضغط)

  **الحد الأقصى للدقة:** 2000×2000 بكسل

  **الصيغ المدعومة:** PNG وJPG وJPEG وGIF وBMP وWebP

  **أفضل الممارسات:** استخدم صورًا أقل من 3 ميجابايت بدقة تصل إلى 2000×2000 لتحقيق أفضل أداء وتحليل دقيق.
</Accordion>

<Accordion title="هل يمكن لـ Verdent تحليل صور متعددة في محادثة واحدة؟">
  نعم. يمكنك لصق صور متعددة بالتتابع أو الرجوع إلى مسارات ملفات متعددة في prompt واحد. يحافظ Verdent على السياق عبر جميع الصور للمقارنة والتحليل. مثال: "قارن هذه التصاميم النموذجية الثلاثة وحدد الفروقات."
</Accordion>

<Accordion title="هل يقوم Verdent بتحميل صوري إلى خوادم خارجية؟">
  تُعالَج الصور الملصقة عبر الحافظة أو المرجعة بمسار الملف ضمن جلسة محادثتك. لا يتم تخزين الصور بشكل دائم، ويتم مسحها عند بدء محادثة جديدة. تقرأ مراجع مسار الملف الصورة محليًا دون تحميلها.
</Accordion>

<Accordion title="هل يمكن لـ Verdent إنشاء كود جاهز للإنتاج من التصاميم النموذجية؟">
  ينشئ Verdent كودًا أوليًا وظيفيًا ينفذ البنية البصرية والتخطيط والتنسيق من تصميمك النموذجي. ستحتاج عادةً إلى التحسين بإضافة منطق الأعمال، وتكامل البيانات، وميزات إمكانية الوصول، ومعالجة الأخطاء، وتحسينات الإنتاج.
</Accordion>

<Accordion title="ماذا لو أخطأ Verdent في تفسير تصميمي النموذجي؟">
  قدّم ملاحظات تصحيحية بشكل تكراري. قل "يجب أن يكون الترويسة (header) باللون الأزرق، لا الرمادي" أو "يجب أن تكون تلك البطاقات في شبكة من 3 أعمدة، لا 4 أعمدة." سيضبط Verdent التنفيذ بناءً على تصحيحاتك. جولات التحسين المتعددة أمر طبيعي.
</Accordion>

***

## راجع أيضًا [#راجع-أيضًا]

<CardGroup cols="2">
  <Card title="كتابة كود جديد" icon="code" href="/docs/verdent-for-vscode/task-based-guides/writing-code">
    إنشاء ميزات ومكونات جديدة باستخدام Verdent
  </Card>

  <Card title="فهم الكود" icon="book-open" href="/docs/verdent-for-vscode/task-based-guides/understanding-code">
    سير عمل فهم الكود واستكشافه
  </Card>
</CardGroup>