---
title: Görsellerle çalışma
description: Verdent içinde görselleri yükleme ve görsellerle çalışma
---

Verdent for VS Code, güçlü çok modlu yeteneklere sahiptir; görseller yüklemenize ve görsel analiz, taslaklardan kod üretimi, ekran görüntüleriyle hata ayıklama ve daha fazlasını almanıza olanak tanır. Bu kılavuz, geliştirme sürecinizde görsel anlamadan yararlanmak için pratik iş akışlarını gösterir.

---

## Verdent içine görsel yükleme

Diyelim ki analiz ya da referans için Verdent ile bir görsel paylaşmak istiyorsunuz.

<Tabs>
  <Tab title="Kopyala ve yapıştır">
    Hızlı pano yöntemi:

    1. Bir görseli panonuza kopyalayın (ekran görüntüsü, tarayıcıdan kopyalanan vb.)
    2. Verdent giriş alanına tıklayın
    3. Yapıştırmak için **Ctrl+V** (Windows/Linux)

    **Önemli:** macOS'ta görselleri yapıştırmak için **Ctrl+V** kullanın (Cmd+V değil).

    Görsel sohbette görünür.
  </Tab>

  <Tab title="Dosya yolu referansı">
    Görselleri yola göre referans verin:

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

    Verdent, belirtilen yoldan görseli okur.

    <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>

    Yaygın biçimler: PNG, JPG, JPEG, WebP, GIF
  </Tab>

  <Tab title="Birden fazla görsel">
    Birden fazla görselle çalışın:

    1. Panodan birden fazla görseli sırayla yapıştırın
    2. Ya da birden fazla yola referans verin:

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

    Tüm görseller sohbette görünür ve topluca referans verilebilir.
  </Tab>
</Tabs>

<Tip>
  **İpuçları:**
  - Desteklenen biçimler: PNG, JPG, JPEG, WebP, GIF, BMP
  - Görseller, çok turlu tartışmalar için sohbet bağlamında kalır
  - Yüklediğiniz görsellere takip eden sorularda referans verebilirsiniz
  - Net görsel kalitesi daha iyi analiz sonuçları sağlar
</Tip>

***

## Tasarım taslaklarından kod üretme

Diyelim ki bir tasarım taslağınız var ve Verdent tarafından uygulama kodunun üretilmesini istiyorsunuz.

<Steps>
  <Step title="Tasarım taslağını yükleyin">
    Taslak görselini kopyalayın (Figma dışa aktarımı, tasarım aracı veya elle çizilmiş eskiz) ya da dosya yoluna göre referans verin.
  </Step>

  <Step title="Kod üretimi isteyin">
    ```
    Generate React components to implement this dashboard design
    ```

    Verdent, görsel yapıyı analiz eder.
  </Step>

  <Step title="Verdent bileşen yapısını oluşturur">
    Verdent, görsel öğeleri belirler ve şunları üretir:

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

    Bileşenler taslak yapısıyla eşleşir.
  </Step>

  <Step title="İlgili CSS'i üretin">
    ```
    Generate Tailwind CSS classes to match the mockup styling
    ```

    Verdent, görsel tasarıma dayalı olarak stil ekler:

    ```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="Ayrıntıları iyileştirin">
    ```
    The spacing between stat cards should be larger, and add the blue accent color from the mockup
    ```

    Verdent, tasarımla daha hassas eşleşmek için düzenlemeler yapar.
  </Step>
</Steps>

<Tip>
  **İpuçları:**
  - Daha yüksek çözünürlüklü taslaklar daha doğru kod üretir
  - Çerçevenizi belirtin: React, Vue, Angular, vanilla HTML/CSS
  - Stil yaklaşımından bahsedin: Tailwind, CSS Modules, Styled Components
  - Hassasiyet için renk kodları veya tasarım sistemi ayrıntıları sağlayın
  - Hızlı prototipler için elle çizilmiş eskizler de işe yarar
</Tip>

***

## Ekran görüntüleriyle hataları ayıklama

Diyelim ki bir hata mesajıyla karşılaştınız ve onu anlamak için yardım istiyorsunuz.

<Tabs>
  <Tab title="Tarayıcı konsol hatası">
    Hatayı gösteren tarayıcı konsolunun ekran görüntüsünü yapıştırın:

    ```
    Here's the error I'm getting in the console. What's causing it?
    ```

    Verdent şunları okur:
    - Hata mesajı metni
    - Yığın izi bilgisi
    - Dosya adları ve satır numaraları
    - İlgili konsol uyarıları

    Verdent tanı sağlar:
    ```
    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 düzeltmeyi önerir.
  </Tab>

  <Tab title="Terminal hatası">
    Terminal derleme hatalarının ekran görüntüsünü yapıştırın:

    ```
    My TypeScript build is failing with these errors
    ```

    Verdent şunları analiz eder:
    - Tür hataları
    - Dosya yolları
    - Hata kodları
    - Derleme bağlamı

    Verdent açıklar:
    ```
    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="Çalışma zamanı istisnası">
    Uygulama günlüklerindeki yığın izinin ekran görüntüsünü yapıştırın:

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

    Verdent şunları inceler:
    - İstisna türü
    - Yığın izi
    - Yöntem adları ve satır numaraları
    - Bağlamsal günlük mesajları

    Kök nedeni belirler ve düzeltmeler önerir.
  </Tab>

  <Tab title="Ağ hatası">
    Tarayıcı DevTools'taki Network sekmesinin ekran görüntüsünü yapıştırın:

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

    Verdent şunları analiz eder:
    - HTTP durum kodu
    - İstek/yanıt başlıkları
    - İstek yükü
    - Yanıt gövdesi

    API sorununu teşhis eder.
  </Tab>
</Tabs>

<Tip>
  **İpuçları:**
  - Tam hata mesajlarını ekleyin (önemli ayrıntıları kırpmayın)
  - Mümkün olduğunda yığın izlerini eksiksiz gösterin
  - Çevredeki bağlamı ekleyin (diğer konsol mesajları, ağ istekleri)
  - Hatayı metinle açıklamak yerine gerçek hatanın ekran görüntüsünü alın
</Tip>

***

## Sıkça sorulan sorular

<Accordion title="Hangi görsel dosya boyutu sınırları geçerli?">
**Maksimum dosya boyutu:** 5MB (aşılırsa otomatik sıkıştırılır; sıkıştırma sonrası hâlâ >5MB ise hata verir)

**Maksimum çözünürlük:** 2000×2000 piksel

**Desteklenen biçimler:** PNG, JPG, JPEG, GIF, BMP, WebP

**En iyi uygulama:** Optimal performans ve doğru analiz için 2000×2000'e kadar çözünürlüklerde 3MB'ın altındaki görselleri kullanın.
</Accordion>

<Accordion title="Verdent tek bir sohbette birden fazla görseli analiz edebilir mi?">
Evet. Birden fazla görseli ardışık olarak yapıştırabilir ya da tek bir istemde birden fazla dosya yoluna referans verebilirsiniz. Verdent, karşılaştırma ve analiz için tüm görseller arasında bağlamı korur. Örnek: "Bu üç taslağı karşılaştır ve farkları belirle."
</Accordion>

<Accordion title="Verdent görsellerimi harici sunuculara yükler mi?">
Pano aracılığıyla yapıştırılan ya da dosya yoluna göre referans verilen görseller, sohbet oturumunuz içinde işlenir. Görseller kalıcı olarak saklanmaz ve yeni bir sohbet başlattığınızda temizlenir. Dosya yolu referansları, görseli yüklemeden yerel olarak okur.
</Accordion>

<Accordion title="Verdent taslaklardan üretime hazır kod üretebilir mi?">
Verdent, taslağınızdaki görsel yapıyı, düzeni ve stili uygulayan işlevsel başlangıç kodu üretir. Genellikle iş mantığı, veri entegrasyonu, erişilebilirlik özellikleri, hata yönetimi ve üretim optimizasyonları ekleyerek iyileştirmeniz gerekir.
</Accordion>

<Accordion title="Verdent tasarım taslağımı yanlış yorumlarsa ne olur?">
Yinelemeli olarak düzeltici geri bildirim sağlayın. "Başlık gri değil mavi olmalı" ya da "O kartlar 4 sütun değil 3 sütunlu bir ızgarada olmalı" deyin. Verdent, düzeltmelerinize göre uygulamayı ayarlar. Birden fazla iyileştirme turu normaldir.
</Accordion>

***

## Ayrıca bakınız

<CardGroup cols={2}>
  <Card title="Yeni kod yazma" icon="code" href="/docs/verdent-for-vscode/task-based-guides/writing-code">
    Verdent ile yeni özellikler ve bileşenler oluşturma
  </Card>

  <Card title="Kodu anlama" icon="book-open" href="/docs/verdent-for-vscode/task-based-guides/understanding-code">
    Kodu kavrama ve keşfetme iş akışları
  </Card>
</CardGroup>