Bu makale, yapay zeka kullanarak sayfaları klonlarken karşılaştığım bazı tuzakları ve sorunları çözmek için oluşturduğum iş akışını referans olarak nasıl yapılandırdığımı anlatıyor.
Muhtemelen sen de bunu yaşamışsındır.
Bazen bir ekran görüntüsünü yapay zekaya verip ona göre bir sayfa oluşturmasını istersin. İlk versiyon kabaca doğru görünür ama dikkatli bakınca bir şeylerin ters gittiğini fark edersin: Kartlar biraz daha geniş, fontlar daha küçük, gölgeler yanlış—küçük detaylar.
Sonra neyin ayarlanması gerektiğini ve nasıl yapılacağını sözlü olarak tarif etmek zorunda kalırsın. Tur tur iterasyon yapmak epey zaman alır.
Bu yüzden render etme, ekran görüntüsü alma, karşılaştırma ve düzeltme adımlarını tek bir iş akışında zincirlemeyi düşündüm; böylece model kendi kendini kontrol edip düzeltebilirdi. Bu yaklaşım mantıklı geliyordu.
Ancak pratikte işler planlandığı gibi gitmedi. Bazen ikinci turdaki düzeltmelerden sonra üçüncü turda değişiklikler geri alınıyor; sonuçlar dalgalanıyor ve her iterasyonda sayfa daha da kötüleşebiliyordu.
Doğrudan konuya gelelim.
Kendi Kendini Düzeltmeyi Nasıl Sağlarız?
Süreç karmaşık değil:
1Hedef Ekran Görüntüsü ──▶ Model HTML yazar ──▶ Tarayıcı 1:1 ekran görüntüsü alır ──▶ Piksel piksel diff (fark) oluşturma2 │3En İyi Geçmiş Versiyonu Koru ◀── Yeniden Render Et ◀── Model teşhis eder ve kodu düzenler ◀── Orijinal + Render Edilen + Diff
Diff, sayfanın düzeltilmesi için modele doğrudan komut vermez. Sadece "pek doğru görünmüyor" hissini, spesifik sapmaların görsel haritasına dönüştürür ve bu harita, sonraki adımları belirlemesi için modele geri beslenir.
Modelin Diff'e körü körüne tahmin yürütmesini önlemek için, her değişiklikten önce şu üç soruyu cevaplamasını şart koşuyorum:
- En büyük sorun nerede?
- Soruna muhtemelen hangi element veya CSS özelliği neden oluyor?
- Sorunu nasıl çözmeyi planlıyor?
Cevaplar geldikten sonra ancak koda dokunuyoruz.
Bu test için Ling-3.0-flash-VL'yi kullandım ve basit bir demo için iki kart seçtim: Biri parlak arka planlı, kalın siyah kenarlıklı ve sert gölgeli sarı bir kart; diğeri ise gradyan butonlu, etiketli ve özellik listeli koyu renkli bir SaaS fiyatlandırma kartı.
Kartların ideal olduğunu düşünüyorum. Çok fazla element yok ama genişlik, boşluk, buton yönü ve gölgeler—bunlardan biri bile yanlışsa hemen belli olur.
İlk Çalıştırma
Sarı kartla başlayalım.
İlk versiyondan sonra genel sonuç aslında oldukça iyiydi.
Yapı, renk şeması, metinler ve buton konumları büyük ölçüde kopyalanmıştı. Orijinalle yan yana kıyaslamazsan, yeterince yakın görünebilirsin.
Ama yan yana koyunca ince farklar ortaya çıkıyor: Kart biraz daha büyük, font ağırlıkları farklı ve boşluk/buton boyutları tam hizalı değil.
Daha sonra orijinal görseli, ilk tur sonucunu ve Diff'i tekrar Ling'e vererek bu detay sorunlarını tespit etmesini istedim.
Teşhiste sadece "benzer değil" demiyor. Kart boyutu, fontlar ve butonlar gibi sorunları nokta atışı belirleyip ilgili CSS'i değiştiriyor.
Sarı kartın üç tur karşılaştırması: İkinci tur iyileşti, üçüncü tur geriledi, bu yüzden tarihsel en iyi olarak ikinci turu koruduk.
Ancak iyi bir ilk tur, sürekli iyileşme garantisi vermez.
Bu video sorunu yakalıyor: İkinci tur orijinale daha yakındı ama üçüncü turda hafif bir kayma oldu. Neyse ki iş akışı, son turu varsayılan cevap olarak kabul etmek yerine ikinci turun tarihsel en iyi halini korudu.
Yani Diff'i geri beslemek, modelin aniden daha zeki olduğu anlamına gelmiyor. Birçok detay sorununu tespit edip yargılarını spesifik CSS'e bağlayabiliyor ama bazen hâlâ kafası karışıyor.
İş akışının nasıl çalıştığına dair detaylar için aşağıdaki ekran kaydını izle.
Koyu fiyatlandırma kartının tam demosu: Varlık seçimi, başlangıç üretimi, slider ile karşılaştırma ve ardından iki öz-düzeltme turu.
Buradaki değişiklikler dramatik değildi çünkü ilk tur zaten yakındı. Sonraki turlarda iyileşme devam etti; odak noktası kart boyutu, köşe yuvarlaklığı, butonlar ve gradyanlardı.
Her iki kaydı karşılaştırınca farklı eğilimler görülüyor:
Sarı kart ikinci turda iyileşti ama üçüncü turda geriledi; koyu kart ise üç turun tamamında istikrarlı küçük iyileşmeler gösterdi. İki kayıt istatistiksel kuralları kanıtlamaz ama aynı iş akışının her turda daha iyi sonuç vermeyeceğini gösterir.
Bariz sorunlar genellikle ilk bir iki turda düzeltilir. Sonraki iterasyonlarda font boyutları, köşe yuvarlaklıkları ve gölge ofsetleri gibi ince ayarlar yapılır; burada bir şeyi düzeltmek sıklıkla başka bir şeyi bozar. Bu nedenle, son turun cevap olduğunu varsaymak yerine tarihsel en iyi versiyonu kaydediyorum.
Gerçekten Ne Yapabilir?
Bu sonuçlara bakıldığında, ilk versiyon standart bir Ekran Görüntüsünden Koda (Screenshot-to-Code) işlemidir. İlginç olan, render edilmiş çıktıyı gördükten sonra sorunları sadece "daha benzer yap" demek yerine spesifik elementlere ve CSS özelliklerine kadar nokta atışı yapabilmesidir.
Otomatik düzeltme olmasa bile, bu teşhis adımı faydalı bir kontrol listesi görevi görür.
Birçok görsel sorun hata tetiklemez. Model tarayıcının gerçek render edilmiş sayfasını görebilirse, kendini düzeltmeye devam etme şansı olur.
Başka pratik bir nokta: Bu iş akışı tekrarlayan model çağrıları gerektirir, bu yüzden hız önemlidir. Kaydettiğim tek bir tam sayfa HTML üretimi yaklaşık 7 saniye sürdü. Açık veriler, Ling-3.0-flash-VL'nin toplam 124B parametresi olduğunu, çıkarım başına 5.5B aktifleştirdiğini ve ek görsel anlama ile Görsel Ajan yeteneklerine sahip olduğunu gösteriyor.
7 saniyelik rakam benim spesifik arayüzüme ve ayarlarıma dayanıyor. Yatay karşılaştırma yapmadım ve sadece aktif parametrelerden yola çıkarak hız/maliyet türetmeyeceğim.
Tuzaklar Nerede?
Asıl zaman kaybı modeli bağlamak değil, geri bildirimin doğruluğunu sağlamaktı. Başta dalgalanmaları modelin kararsızlığından sanıyordum. Diff'leri tek tek inceledikten sonra, sorunun bir kısmının benim geri bildirim döngümde olduğunu fark ettim.
1. Birinci Tuzak: Boyut
Hedef görsel ölçeklendirilmişse ve tarayıcı farklı bir boyutta ekran görüntüsü aldıysa, görseller baştan itibaren hiç hizalanmaz. Doğru cevap olsa bile, Diff büyük uyumsuzluklar gösterir.
Piksel diff'lerinde global olarak birkaç piksellik kayma, devasa hata bölgeleri yaratır.
2. İkinci Tuzak: Animasyon
Bir keresinde model, özellik listelerine fade-in (soluklaşarak beliren) efektleri eklemişti. Animasyon ortasında alınan ekran görüntüleri içeriği şeffaf bırakıyordu.
Animasyonları kaldırdıktan sonra sayfa görsel olarak normal görünüyordu ama otomatik karşılaştırma skorları kötüleşti.
Sebep: Şeffaf içerik arka planı ortaya çıkarıyor ve piksel algoritmaları bunun "daha benzer göründüğünü" sanıyordu.
3. Üçüncü Tuzak: Sürüm Kontrolü
Eğer bir tur tasarımı bozduysa, kötü kodun üzerine yama yapmaya devam etmek hataları biriktirir. Eğri bir temel üzerine bina inşa etmek gibidir—ne kadar çok çalışırsan o kadar karmaşık hale gelir.
Kısacası, Diff bir araçtır, yargıç değildir.
Geri bildirim yanlışsa, model bunu fark etmez. Kusurlu girdiye dayanarak yanlış yönde gayretle düzeltme yapmaya devam eder.
Sonuç
Kuralları üç maddeye indirgedim:
- Orijinal ve tarayıcı ekran görüntülerinde aynı boyutları kullan; ikincil ölçeklendirme yapma.
- Görünüm alanını (viewport), fontları, animasyon durumlarını ve ekran görüntüsü zamanlamasını sabitle.
- Her turda tarihsel en iyi versiyondan devam et; bozulmuş kodu yamalamaya çalışma.
Çalışan kod sadece ilk adımdır. Hata vermeyen ama yanlış görünen sorunlar görsel modeller tarafından gerçekten kontrol edilebilir. Ancak sapmaları görmek, her seferinde doğru düzeltmelerin yapılacağının garantisi değildir.
Bu yüzden artık daha fazla turun daha iyi sonuçlar vereceğini varsaymıyorum. Bariz sorunları önce düzelt, iyileşme durakladığında bırak—benim için yeterli olan bu.
Model açık kaynaklıdır ve 2 hafta boyunca ücretsizdir. Kendin denemek için şu bağlantıları kullan 👇🏻:
- Huggingface : [https://huggingface.co/inclusionAI/Ling-3.0-flash-VL
- Ling studio：https://chat.ant-ling.com/chat
- Ant Digital MaaS (Çin): https://maas.antdigital.com/models/modelservice-1788265478122001738
- Openrouter：https://openrouter.ai/inclusionai/ling-3.0-flash-vl:free
Ps: Bu makale yapay zeka tarafından dikte ettirilip cilalandı, yani içinde ruh var ✌🏻
