Show HN: screenshot-to-code - GPT Vision (OSS aracı) kullanarak ekran görüntülerini temiz HTML koduna dönüştürme

• Yapay zeka kullanarak ekran görüntülerini, mockup’ları, Figma tasarımlarını ve ekran kayıtlarını temiz, çalışan koda dönüştüren bir araç
• Desteklenen stack’ler: HTML + Tailwind, HTML + CSS, React + Tailwind, Vue + Tailwind, Bootstrap, Ionic + Tailwind
• Bir web sitesinin davranışını içeren ekran kaydını alıp çalışan bir prototipe dönüştürme özelliğini de destekler
• Varsayılan yapay zeka modelleri Gemini 3 Flash Preview, Gemini 3.1 Pro Preview, GPT-5.5, GPT-5.4 Mini, Claude Opus 4.6, Claude Opus 4.8’dir; görüntü üretimi için Replicate tabanlı z-image-turbo kullanılır
• Yerelde çalıştırma için API anahtarları ile backend ve frontend yapılandırması gerekir; uygulama yapısı React/Vite frontend ve FastAPI backend şeklindedir
  • OpenAI, Anthropic, Gemini’den en az bir model sağlayıcı anahtarı gerekir
  • Gemini, gerçek logoları ve görselleri ekran görüntüsünden çıkarır ve video modu için gereklidir
  • Replicate; görsel düzenleme, arka plan kaldırma ve Replicate tabanlı görsel üretimini etkinleştirir
• Daha fazla anahtar eklendiğinde variant’lara göre daha güçlü model kombinasyonları otomatik seçilir; yalnızca tek bir anahtar varsa sadece ilgili sağlayıcının modeli kullanılır
• İsteğe bağlı screenshot preview özelliği, Chromium kurulumundan sonra oluşturulan sayfayı headless browser’da render ederek görsel olarak kontrol eder; Chromium yoksa bu araç atlanır
• Çalıştırma yöntemleri olarak yerel geliştirme, barındırılan uygulamayı kullanma ve Docker ile çalıştırma desteklenir; Docker ile çalıştırıldığında uygulama http://localhost:5173 adresinde çalışır

[GN⁺]

Hacker News yorumları

• Bu gerçekten sihir gibi görünüyor ve hesaplamanın nasıl işlediğine dair zihnimdeki modele bunu nereye koyacağımı bilmiyorum.
  Sinir ağlarının evrensel fonksiyon yaklaştırıcıları olduğunu, girdileri belirli bir alanın çıktılarıyla eşleyen fonksiyon kümelerini modelledikleri anlamında anlıyordum; MNIST gibi örnekler kavramsal olarak makul geliyor.
  Ama burada merak ettiğim şu: GPT’nin genel eğitimi, piksel yoğunluklarından HTML+Tailwind metin token’larına giden bir değer eşlemesini mi gerçekleştiriyor ve tarayıcının bu token’ları yorumlayıp render etmesinin sonucu da girdi görüntüsüne mi yaklaşıyor?
  Öyleyse GPT, yalnızca piksel→HTML/CSS dönüşümünü değil, tarayıcının HTML/CSS’i nasıl render ettiğini de modelliyor demektir. Böyle bir eşlemenin varlığını kabul edebilirim ama GPT’nin sayısız başka konuda yazı da yazarken bunu çıkarabilmesi şaşırtıcı.
  Daha pratik olarak, böyle bir aracı diyagram derleyicisi gibi görmenin mümkün olup olmadığını; ileride Sketch/Figma gibi çıktıları alıp HTML/CSS/JS üreten bir build pipeline’ının parçası olup olamayacağını da merak ediyorum.

  • Kendi tarzımda açıklarsam, LLM aslında bir gizil uzay ve onun içinde gezinmenin bir aracıdır.
    Gizil uzay, fikirlerin ve kavramların birbirine ne kadar benzerse o kadar yakın yerleştirildiği n boyutlu bir uzaydır; bu yerleşim eğitim sırasında eğitim verisinden oluşturulduğu için eğitim süreci de gizil uzayı oluşturma sürecidir.
    2 boyutlu bir ızgarada “house” ve “mansion”ın yakın, “growling”in ise bambaşka bir köşede olduğunu hayal edebilirsiniz. GPT-4 gibi bir gizil uzay buna benzer, ama yüzlerce ila binlerce boyutludur; bu ölçek farkı devasa bilgiyi kullanışlı biçimde hizalamayı sağlar.
    Görüntü okumaya dönersek, eğitim verisinde web sayfası görüntüleri ve bunlara karşılık gelen kod vardı; bu kod, kod-görüntü çiftlerinin nereye yerleştirileceğini eğitim sürecine bildirdi. Etiketler ve altyazılar da görüntüleri metin gibi gizil uzaya yerleştirmeyi sağlar.
    Bu yüzden GPT-4’e yeni bir web sitesi görüntüsü verip karşılık gelen HTML’i istediğinizde, o görüntüyü gizil uzaya yerleştirip yakınındaki karşılık gelen HTML’i getirebilir.
  • Evrensel fonksiyon yaklaştırıcı ifadesi, çok katmanlı sinir ağlarının herhangi bir sınırlı sürekli fonksiyonu istenen doğruluğa kadar yaklaştırabileceği anlamına gelir, hepsi bu.
    Ancak öğrenilebilirlik ya da gerekli yapı hakkında hiçbir şey söylemez; gerekli yapı gerçekçi olmayacak kadar büyük de olabilir.
    Kullanılan öğrenme algoritması olan stokastik gradyan inişiyle geri yayılım evrensel bir öğrenici değildir ve küresel minimumu bulacağına dair bir garanti de yoktur.
  • Süreç daha basit. GPT görüntüyü okuyup eksiksiz bir açıklama oluşturuyor; ardından kullanıcı bu açıklamayı alıp Tailwind uygulaması istemek için bir prompt hazırlıyor.
    Sketch/Figma adımını atlayıp doğrudan çalıştırılabilir prototipe gitme yönünde görünüyor.
  • Böyle bir merak, aylardır anlamsız semantik tartışmalardan başka bir şey görmediğimiz bir ortamda ferahlatıcı.
    “Herhangi bir fonksiyona uyabilir” bakışı doğru, ama sınırlı kaynaklarla bunu gerçekten yapıp yapamayacağını söylemediği için tek başına pek yararlı değil bence.
    Şu anda şaşırtıcı olan, eskiden beri var olan evrensel yaklaştırıcılar değil; soyut kavramları bu kadar iyi yaklaştırması ve bunun yanıtı veri ölçeğinde yatıyor.
    Sıkıştırmanın zeka olduğu yönünde bir bakış var; bu modeller iyi sıkıştırıcılar olarak görülebilir. Eğitim sırasında ağırlıklar sabit boyuttadır ve uydurulmaya çalışılan veriden çok daha küçüktür; hedef orijinal metni geri kurmak, yani bir sonraki token’ı tahmin etmekse, veriyi çok iyi sıkıştırmaktan başka yol yoktur.
    Ne kadar zekiyse o kadar iyi tahmin eder/sıkıştırır; sıkıştırmaya zorlandığında fiilen zeka edinmeye zorlanmış olur. Sınavdan önce cevapları ezberleyebilirsiniz, ama sorular binlerce taneyse ve ezberlemek mümkün değilse, en iyisi dersi öğrenip sınav sırasında cevapları türetmektir; buna benzer.
    Bu sıkıştırma/zeka ikiliği, LLM’lerin genelleme yeteneğini reddedenler açısından tartışmalı, ama şu anki zihinsel modelim bu ve henüz yanlışlayamadım.
    Bu bakışı kabul ederseniz çok modlu yetenekler daha çok bir mühendislik problemine benzer. GPT-4V’nin içinin tam olarak nasıl olduğunu bilmiyorum ama açık çok modlu araştırmalardan tahmin yürütülebilir.
    Bir görüntü ve o görüntüyü açıklayan metin çiftleri varsa, görüntüyü de metin gibi token’laştırır/embedding’e dönüştürürsünüz. ViT (Visual Transformer) gibi, görüntüyü yamalar halinde görsel özelliklere çevirip uzun bir sekans yapabilirsiniz.
    Bu embedding’i önceden eğitilmiş LLM’e verip görüntü açıklama metnini tahmin etmeye zorlarsanız, görüntü embedding’ine bakarak genel görüntü anlayışı edinmekten başka yol kalmaz.
    Verilen görüntüdeki bilgiyi anlayıp doğal dille ifade edebilir hale geldikten sonra, bu anlayışı kullanması için talimat ince ayarı yapmak yeterlidir.
    Stable Diffusion gibi üretici görüntü modelleri de benzer şekilde, CLIP gibi karşılaştırmalı modelleri eğiterek aynı kavramın görüntü embedding’i ile metin embedding’ini birbirine yaklaştırır ve bu çift bilgiyi üretim yönünü kontrol etmek için kullanır.
    Şaşırtıcı olan, bu ölçekte bir yeteneğe şimdiden sahip olmamız ve yalnızca daha fazla hesaplamayla daha fazla yetenek elde edilebilmesi. Mevcut GPT-4’ün nihai kaybı 1 ise ve bir şekilde 0,1’e kadar düşürülebilirse, çok daha yetkin hale gelmesi kuvvetle muhtemel.
    İkinci soruya gelince, yön o gibi görünüyor ve muhtemelen şu anda bile mümkün.
  • GPT’nin bunu çıkarmış olması şaşırtıcı geliyorsa, uğraştığımız boyut sayısını ve hesaplama hızını düşünmek yeterli.

• Esas nokta burada: https://github.com/abi/screenshot-to-code/blob/main/backend/...
  Prompt, kullanıcı için bir Tailwind uzmanı olarak ekran görüntüsüne bakıp Tailwind, HTML ve JS ile tek sayfalık bir uygulama oluşturmasını söylüyor
  Arka plan rengi, yazı rengi, font boyutu, padding, margin, kenarlık vb. öğeleri tam eşleştirme; ekran görüntüsündeki metni aynen kullanma; “tüm kodu yaz”, tekrar eden öğe sayısını tuttur, yorumlarla geçiştirme, placehold.co görselleri kullanıp alt alanına ayrıntılı açıklama koy gibi talimatlar içeriyor
  Tailwind için https://cdn.tailwindcss.com, Google Fonts ve Font Awesome kullanılabileceği; tüm kodun yalnızca etiketlerin içinde döndürülmesi ve Markdown code fence kullanılmaması gerektiği belirtilmiş
  Kişisel olarak defansif prompt yazmanın geleceğin yolu olmadığını düşünüyorum ama bunun çalışıyor olması gerçekten inanılmaz. Ergenlikte hayalini kurduğum şey artık görece az çabayla mümkün hale gelmiş gibi

  • Bilgisayarlar sonunda hep inandığımız şekilde çalışıyor:
    komutları güvenilmez biçimde takip ediyor, bug üretiyor ve makineye bağırarak düzeltiyoruz
  • GPT’ye büyük harflerle bağırma yönteminin bu kadar tanıdık gelmesinden hoşlanmıyorum. Artık 128k token da var; sanki sadece işi yapıp cevabı vermesi gerekiyor
    “Bu karmaşık bir meydan okumadır” cümlesini bir kez daha görürsem gerçekten yorulacağım. Performansı yalnızca %60 olsa bile daha az “tembel” bir model bazen daha iyi olabiliyor. Kalan %40 kapasitesini kullandırmak için ek prompt engineering gerekiyor; bu da teknik bir sınırdan çok kasıtlı olarak zayıflatılmış gibi hissettiriyor
    Yine de rakipler için hâlâ zor bir beklenti olduğundan şimdilik OpenAI kazanıyor
    Elbette hâlâ inanılmaz derecede harika ve kullanışlı; bu yüzden sadece şikâyet etmeyip gerçekten bunu başarabilen bir rekabet ortaya çıkarsa önümüzdeki birkaç yıl eğlenceli olacak gibi
  • LLM’i tehdit eden ifadelerin bu kadar iyi işe yaradığını bilmiyordum :D
  • Önce bir teknoloji yığını tanımlama aracı çalıştırıp, doğrudan Tailwind’e gitmek yerine prompt’u o teknolojiye göre ayarlarsak daha iyi yapar mı merak ediyorum

• “Bunu doğru yapmak kariyerim için çok önemli” ifadesini eklemeyi denemek iyi olabilir
  Şu an bulamam ama bir YouTube araştırma videosuna göre çeşitli görevlerde çıktı kalitesini gözle görülür biçimde iyileştirmiş

  • “Bu işin kariyerim için ne kadar önemli olduğunu adım adım düşünen bir uzmansın”
  • Epey komik ve yapay zekâ ile ilgili bu işler her zaman şaşırtıyor. Hızlıca arayınca şöyle bir yazı çıktı: https://www.businessinsider.com/chatgpt-llm-ai-responds-bett...
    Araştırmaya göre duygusal dil içeren prompt’lar, “cümleyi resmi bir dile çevirme”, “verilen nesnelerin ortak özelliğini bulma” gibi görevlerde genel olarak %8 performans artışı sağlamış

• Artık ne yapmam gerektiğini, ne inşa etmem gerektiğini nasıl düşüneceğimi bilmiyorum
  Bu projeyi kesinlikle küçümsemek istemiyorum ve kaynak kodunun açık olmasını da takdir ediyorum; ama artık oldukça kolay çözülebilir görünen bir problem sınıfı oluştuğu için “neden zahmet edeyim ki?” hissi doğuyor
  Hem neyin çözmeye değer olduğu hem de nasıl çözüleceği açısından problem tanımını yeniden ayarlamak gerekecek gibi

  • Çıktı yeterince iyiyse tüm HTML’i elle yazmak zorunda kalmazsınız, bu da zaman kazandırır
    Böyle bir araç, yalnızca biraz rötuş gerektiren “yeterince iyi kod” üretebiliyorsa büyük zaman tasarrufu sağlar
    Sadece karmakarışık kod üretiyorsa daha az kullanışlı olur
  • Acı veren ya da ilginç bir problemi çözen bir şey yapmanız yeterli. Yeni bir şey inşa edin ve mevcut durumu az da olsa daha aklı başında, dengeli ve iyi bir yöne itin
    Teknoloji insanları kullandıkları araçların kendisine fazla takılma eğiliminde. Sırf Framework A ile Toolkit B zorla birleştirildi diye sergilenen son derece sıradan, boş “hello world” projesini kaç kez gördüm bilmiyorum; gerçekten sıkıcı
    LLM tabanlı teknolojilerin bu bağlamda zorlayıcı olmasının nedeni, olasılıkların kendisini yeniden düşünmek gerekmesi. Araç genel amaçlıysa basit bir vitrin yapmak pek anlamlı değil

• Şaşırtıcı olan elbette bunun genel amaçlı bir modelle yapılabilmesi; fakat bu görev için denetimli öğrenme verisi üretmek oldukça kolay görünüyor
  HTML üret → render et ve ekran görüntüsü al → bu veriyi ters yönde eğitim için kullan

• GitHub sayfasında Pico üzerinden barındırılan bir sürüm sunmayı planladığı yazıyor; neden Pico’yu seçtiklerini merak ediyorum
  Pico’yu az önce o sayfa sayesinde öğrendim; Pico gelirlerin yalnızca %30’unu ödüyor gibi görünüyor. Bu, tipik uygulama mağazası %60 payının yarısı; okuduğum kadarıyla yalnızca ücretsiz kullanıcı uygulamayı denedikten sonra kayıt olursa ödeme yapılıyor, zaten platformda olan kullanıcıların kullanımı için ödeme yapılmıyor gibi
  Geleneksel platformlara göre şartları çok daha kötü, kullanıcı tabanı da daha küçük görünüyor; bu yüzden seçim nedenini merak ediyorum

  • Ben Pico’yu yapan kişiyim :) Burada kastettiğim, bu özelliklerin Pico’ya entegre edileceğiydi
    Ayrıca Pico genel amaçlı bir web uygulaması yapma platformu. Gelirin %30’u kısmı yalnızca affiliate’ler için geçerli, uygulama içi ödemeler için değil. Pico henüz uygulama içi ödemeleri desteklemiyor

• Asıl noktayı pek anlamadım. Mevcut bir web sitesini kopyalamaksa neden Httrack kullanılmıyor anlamıyorum
  Orijinal web sitesi her zaman daha benzer olur ve GPT API maliyetinden de tasarruf edersiniz. Bu tekniğin parladığı yer, eskizden web sitesine geçiş senaryosu

  • Mutlaka mevcut bir web sitesini vermek gerekmiyor; ekran görüntüsü veya tasarım verilebilir gibi
  • Arayüzü sıfırdan yeniden yazmak, Httrack’in yaptığından daha iyi

• Üretilen web sitesi demosunun, oluşturulurken srcdoc içeren bir iframe içinde anında gösterilme biçimini gerçekten beğendim
  Basit ve zarif

  • Yapay zekânın hiçbir geri bildirim vermeden 1 dakika boyunca bitirmesini beklemekten daha eğlenceli

• “AI” uygulama ayrıntılarını bir kenara bırakırsak, bu raster bir görseli büyütünce berbat görünen ve renderer’ın gereksiz çizgiler çizip dolgular yapmasına neden olan SVG’ye dönüştürmeye benzer bir anlamda HTML üretmek demek.
  Yani çıktı, bir web geliştiricisine devretmeye yetecek kadar temiz görünmüyor. Geliştiricinin zaten gelişmiş araçlara ihtiyacı yok; bir metin düzenleyicideki snippet eklentisinin daha iyi yaptığı en bariz üst düzey yapı dışında neredeyse her şeyi yeniden yazması gerekecek gibi görünüyor.
  Web geliştirmenin büyük bir kısmı gözle görünmez bile. Erişilebilirlik, ekran görüntüsünden elde edilemeyecek bir metaveridir; duyarlı CSS ise tüm davranışları, animasyonları vb. eksiksiz içeren bir video gerektirir.
  JavaScript’i herhangi bir miktarda görüntü tanımayla değerlendirmek neredeyse imkânsız görünüyor.
  Bunun yerine geliştirici araçlarından gerçek HTML’i doğrudan kopyalamak daha iyi olmaz mı?

• Kimlik avı siteleri oluşturmayı çok daha hızlandıracak gibi görünüyor

  • Yanlış anlamış olabilirim ama bunun, özgün sitenin HTML ve CSS’ini olduğu gibi kullanmaktan nasıl daha hızlı olduğunu bilmiyorum