Show HN: GPT Vision (OSS aracı) kullanarak ekran görüntülerini temiz HTML koduna dönüştürme
(github.com/abi)Ekran görüntüsünü koda dönüştüren uygulama
- Ekran görüntülerini HTML/Tailwind CSS'e dönüştüren basit bir uygulama
- Kodu üretmek için GPT-4 Vision kullanır, benzer görseller üretmek için ise DALL-E 3 kullanır
- Demoyu görmek için aşağıdaki örnekler bölümüne bakın
Güncellemeler
- Görsel üretimi gerekmiyorsa DALL-E görsel üretimini devre dışı bırakmaya yönelik bir ayar eklendi
- Kod artık doğrudan uygulama içinde görüntülenebiliyor
- Yapay zeka stilleri yanlış uygularsa veya bazı bölümleri atlarsa, koddaki güncellemeler için talimat verilebiliyor
Başlarken
- React/Vite frontend'i ve FastAPI backend'inden oluşan bir uygulama
- GPT-4 Vision API'ye erişebilen bir OpenAI API anahtarı gerekir
- Backend ve frontend'i çalıştırma yöntemleri sunuluyor; uygulama yerelde kullanılabiliyor
Sık sorulan sorular (FAQ)
- Backend kurulumu sırasında hata oluşursa çözüm yöntemleri sunuluyor
- GPT4 Vision modelini içeren bir OpenAI API anahtarının nasıl alınacağı anlatılıyor
- Geri bildirim, özellik isteği ve hata bildirimi yöntemleri açıklanıyor
Örnekler
- NYTimes, Instagram sayfası, Hacker News ve benzerlerinin özgün ve kopya örnekleri sunuluyor
Barındırılan sürüm
- OpenAI anahtarına sahip olmanız ve GPT-4 Vision'a erişebilmeniz gerekir
- Yerel kurulum talimatları için Başlarken bölümüne bakabilirsiniz
GN⁺ görüşü
Bu uygulama, ekran görüntülerini web koduna dönüştüren yenilikçi bir araç olarak öne çıkıyor; özellikle GPT-4 Vision ve DALL-E 3 gibi güncel yapay zeka teknolojilerini kullanması dikkat çekiyor. Bu teknoloji, web geliştiricileri ve tasarımcıların zaman kazanıp yaratıcı işlere daha fazla odaklanmasına olanak tanıdığı için ilgi çekici. Ayrıca kullanıcıların yapay zekaya doğrudan talimat vererek kodu düzenleyebilmesi, kullanıcı deneyimini iyileştirmeye ve yapay zekanın doğruluğunu artırmaya yardımcı oluyor.
1 yorum
Hacker News görüşleri
Bu teknolojinin sihir gibi hissettirdiği; sinir ağlarının girdileri çıktılara eşleyen bir fonksiyon kümesini modellediği fikri anlaşılsa da, GPT'nin görüntüleri HTML+Tailwind metin token'larına eşleyip tarayıcının bunları render etme sürecini modellemesinin şaşırtıcı olduğu yorumu.
Bu aracın bir diyagram derleyicisi olarak düşünülebileceği ve Sketch ya da Figma gibi araçların ürettiği artifaktları HTML/CSS/JS'ye dönüştüren bir build pipeline'ının parçası olup olamayacağı sorusu.
Tailwind, HTML ve JS kullanarak kullanıcının sağladığı web sayfası ekran görüntüsüne dayalı bir single-page app oluşturan prompt örneği ve tasarımın birebir kopyalanmasını vurgulayan talimatlar.
Defansif prompting dışında başka yöntemlerin daha iyi bir yön olabileceği, ancak bu teknolojinin çalışıyor olmasının başlı başına şaşırtıcı olduğu yönünde kişisel görüş.
"Bu kariyerim için çok önemli" ifadesinin eklenmesinin çıktı kalitesini artırdığını söyleyen bir YouTube araştırma videosuna atıf yapılarak, bu ifadenin çeşitli görevlerde çıktı kalitesini iyileştirdiği görüşü.
Bu teknoloji sayesinde çözülebilecek problem alanının genişlediği, bu yüzden ne inşa edilmesi gerektiği ve problemlere farklı bakıp farklı çözme gerekliliği üzerine düşünce.
Genel amaçlı bir modelle bu işin yapılabilmesinin şaşırtıcı olduğu, ancak supervised learning için verinin kolayca üretilebileceği yorumu.
GitHub sayfası üzerinden Pico ile barındırılan bir sürüm sunulmasının planlandığı bilgisi ve neden Pico'nun seçildiğine dair soru.
Üretilen web sitesinin demosunu
iframeiçindekisrcdockullanımıyla canlı göstermenin basit ve zarif olduğuna dair övgü.Mevcut bir web sitesini kopyalamak istendiğinde Httrack kullanmanın daha benzer sonuç verebileceği ve GPT API maliyetinden tasarruf sağlayabileceği görüşü.
Bu teknolojinin phishing sitesi üretimini çok daha hızlandıracağı endişesi.
Proje yöneticisinin sürekli değişen taleplerine yanıt vermede bu aracın mükemmel olduğu ve "Make it pop" gibi muğlak girdilerde de çalışıp çalışmadığına dair soru.