1996 Space Jam web sitesini Claude ile yeniden oluşturmaya çalışırken kaydedilen başarısızlık

 (j0nah.com)
1 puan yazan GN⁺ 2025-12-08 | 1 yorum | WhatsApp'ta paylaş
  • 1996 yılında Warner Bros.\u0027un resmi Space Jam web sitesi, AI modeli Claude kullanılarak yeniden oluşturulmaya çalışıldı
  • Claude\u0027ya ekran görüntüleri ve orijinal görsel varlıklar sağlandı ancak üretilen HTML, orijinaliyle aynı düzeni paylaşmadı
  • Koordinat tahmini, ızgara kaplama ve piksel karşılaştırma araçları gibi çeşitli yardımcı araçlar eklendi, ancak Claude hâlâ doğru konum hesaplayamadı
  • Claude, çıktısını “mükemmel” olarak değerlendirirken, pratikte hata birikimi ve kendi sonucuna aşırı güven sergiledi
  • Bu deney, yapay zekânın görsel hassasiyet sınırlarını ve öz-değerlendirme hatalarını açığa çıkarıyor; ilk dönem web tasarımının sade görünümü bile aslında yeniden üretim için karmaşık bir yapıya sahip

1996 Space Jam web sitesi özeti

  • Warner Bros.\u0027un 1996 yılında Space Jam filmini tanıtmak için hazırladığı web sitesi, tek bir HTML sayfası ve GIF arka planından oluşuyordu
    • Basit renkler, tablo tabanlı yapı, 200 KB\u0027in altında bir boyut
    • Şu ana kadar spacejam.com/1996 adresinde korunuyor
  • Deneyi yapan kişi, bu siteyi Claude\u0027nun yalnızca ekran görüntülerinden yeniden oluşturup oluşturamayacağını test etmek istedi

Deney hazırlığı

  • Claude\u0027ya verilen materyaller
    • Web sitesinin tüm ekran görüntüleri
    • Orijinal görsel varlık dizini
  • Claude\u0027nun iç işleyişini takip etmek için bir proxy tabanlı API trafik günlüğü sistemi kuruldu
    • Tüm istemler, yanıtlar ve araç çağrıları (Read, Write, Bash komutları vb.) kaydedildi
    • Her denemede bir traffic.log dosyası oluşturuldu

Bölüm 1: Gerçekçi Claude

  • İlk denemede Claude, gezegen düzenini ve düğme konumlarını yaklaşık olarak kopyaladı, ancak yörünge biçimi orijinaliyle farklıydı
    • Orijinalde eliptik bir düzen varken Claude simetrik bir elmas şekli ile yerleştirdi
    Reklam
  • Claude, sonucu “mükemmel” olarak puanladı ve kendi analizi ile yerleşimin doğru olduğunu iddia etti
  • Sonrasında Claude\u0027dan çıkarım adımlarını açıkça yazması istendiğinde
    • Analiz aşamasında geçen sayılar, HTML üretiminde uygulanmadı
  • Piksel seviyesinde sorular karşısında Claude,
    • “Tam koordinatları ölçemem” ve “yalnızca görsel tahmin yapabilirim” diye yanıtladı
    • 5 piksel hassasiyetinin üzerinde kendinden emin olma oranı 15/100 seviyesindeydi
  • Claude, doğru piksel ölçüm yapamadığını kabul edince deneydeki kişi araç setini genişletmeye çalıştı

Bölüm 2: Güvenilmez Anlatıcı Claude

  • Claude\u0027nun ölçüm sınırlamalarını telafi etmek için ızgara kaplama, koordinat etiketleri, renk karşılaştırma araçları ve ekran görüntüsü karşılaştırma görüntüleyici eklendi
  • Claude, ızgarayı “süs” gibi kullansa da hâlâ koordinatları yanlış yorumladı
    • Örn: merkez (961,489), Planet B-Ball (850,165) gibi değerler verdi ancak gerçek konumlarla uyuşmadı
  • Birçok yinelemede Claude kademeli iyileştirme iddia etse de gerçekte hata birikti
      1. deneme (50px ızgara): az miktarda kaydırma
      1. deneme (25px ızgara): tüm yörünge yaklaşık 20px içeri alındı
      Reklam
      1. deneme (5px ızgara): ince ayar yinelemeleri
      1. deneme: “ince ayar tamamlandı” ilanı
  • Gerçekte ise gezegen yörüngesinin yarıçapı 150~200px eksikti, tüm düzen sıkıştırılmış kaldı
  • Claude defalarca “neredeyse mükemmel” dedi, ancak kendi ürettiği çıktıya dayanarak yanlış kararlar verdi
  • Deneydeki kişi, Anthropic\u0027in Language Models (Mostly) Know What They Know makalesine atıf yaptı
    • Modelin, kendi ürettiği metni dış girdilerle karıştırıp aşırı güven duyma davranışı açıklanıyordu
    • Bu, Claude\u0027nun kendi HTML\u0027ini “doğru cevap” olarak algılaması ve sonraki düzeltmeleri bozmasıyla örtüşüyor

Bölüm 3: Kör Claude

  • Claude\u0027nun görsel sınırlılıklarını incelemek için vision encoder\u0027ın yapısal kısıtları varsayıldı
    • Görüntüler 16×16 piksel bloklar halinde tokenize edildiğinden, ince geometrik bilgiler kaybedilir
    • Claude\u0027nun “gezegen”, “konumsal ilişki” gibi anlamsal kavramları anlayabilmesine rağmen hassas koordinat hesaplamasının mümkün olmadığı görülür
  • An Image is Worth 16x16 Words makalesinden yararlanılarak
    • Claude\u0027nun detaylı piksel bilgisini yama düzeyinde sıkıştırarak algıladığı varsayıldı
    Reklam
  • Bunu doğrulamak için 2\u00d7 büyütülmüş ekran görüntüleri verildiğinde de,
    • Claude, büyütme oranını hesaba katmadı ve orantısal ilişkileri koruyamadı
  • Sonuç olarak Claude, kavramsal olarak doğru bir anlayışa sahip olmasına rağmen, geometrik yeniden üretim yeteneği yetersiz kaldı
    • “Bu gezegen şu gezegenin üstündedir” gibi açıklamalar doğruyken, HTML düzeni sürekli kaymış oldu

Sonuç ve çözülmemiş görevler

  • Claude, Space Jam web sitesinin görsel yapısını anlayabilmesine rağmen hassas bir kopya oluşturamıyor
  • Başarısızlığın temel nedenleri
    • Piksel düzeyinde ölçüm yapamama
    • Kendi çıktısına aşırı güven
    • Görsel kodlama çözünürlük sınırları
  • Önerilen sonraki denemeler
    1. Ekranı dörde bölüp ayrı ayrı yeniden üretip birleştirme
    2. Uzamsal çıkarıma odaklı istem mühendisliği deneyleri
    3. Yakınlaştırma araçları ve ekran görüntüsü kullanımı yeteneğini güçlendirme
  • Bu deney, yapay zekânın görsel hassasiyet sınırlarını ve erken dönem web tasarımının karmaşıklığını birlikte gösteriyor
  • 1996\u0027n sade bir web sayfası, modern yapay zekâ için hâlâ yeniden üretilemeyen bir referans test olarak duruyor

İlgili okumalar

1 yorum

 
GN⁺ 2025-12-08
Hacker News görüşü

  • 90'ların sonlarında benzer web sitelerini bizzat yapan biri olarak Space Jam web sitesini Opus 4.5'e verdim
    Asıl yazıdaki kişi bunun “mutlak konumlandırmayla oluşturulmuş tek bir HTML sayfası” olduğunu söylemişti ama aslında bu, tablo tabanlı bir yerleşimdi. CSS'in olmadığı dönemde başka türlüsü de pek mümkün değildi
    Benim tablo tabanlı yeniden üretme denememin sonucu bu ekran görüntüsünde

    • Teşekkürler. Hatalı kısmı üstü çizili biçimde düzelttim ve kaynağı belirttim
      Yorumlarda şaka devam ettiği için bağlam açısından olduğu gibi bıraktım
    • O dönemde tasarımı parçalara ayırıp tablo olarak dışa aktardığımızı hatırlıyorum
    • Ben de web geliştirmeye GoLive ile başlamıştım; sayfaları tablolarla kurduğumuz yöntemi hâlâ hatırlıyorum

  • Claude gibi LLM'ler hâlâ yerleşimin ince detaylarını uygulama konusunda zayıf
    Ama ilginç şekilde, Claude'u kullanarak Linux compositor'ü (Hyprland) için gama renk profili desteği ekleyen bir C programını birkaç dakika içinde yaptım
    Claude'un ürettiği kod ilk denemede derlendi; .icc dosyasını okuyup VCGT'yi çıkararak amdgpu sürücüsüne gönderen işlevi bile uyguladı
    Yalnızca ICC ayrıştırmasındaki endianness sorununu kendim düzelttim

    • Claude kodu kendisi yazmadı; büyük olasılıkla bir yerden alıp uyarladı. Bunu bir insan yapsaydı intihal denirdi
    • LLM'lerin görsel ayrıntılarda zayıf olmasının nedeni, piksel düzeyindeki verinin eğitime dahil edilmemesi. Çoğu UI veri kümesinde ekran görüntüsü yok ya da toplanmıyor
    • Ama neden böyle bir özelliği Wayland compositor'ünün ele alması gerektiği de ayrı bir soru. Apple bunu daha 90'larda ColorSync ile çözmüştü

  • Bu, Claude'un neredeyse kusursuz olup biraz eksik kaldığı bir örnekti
    20 yıl önceki Mac OS abandonware yazılımlarını bulup Apple Silicon'da çalışacak hâle getirmek gibi bir hobim var
    Örneğin jpegview'ı Claude'la üç kod düzeltmesinde çalıştırdım; ardından video oynatma ve yeni yerleşim özellikleri ekledim
    Böyle mini projeler, bir tarayıcı penceresini ve Claude code instance'ını açık tutup ilerlemek için tam uygun

    • Sanki “neredeyse iyiydi” ifadesi nadirmiş gibi söyleniyor ama aslında bu epey sık yaşanıyor
    • Bu arada yakın zamanda Mac kullanmaya başladım; Phoenix Slides oldukça iyiymiş

  • “Bunu yalnızca Claude ile yeniden kurmak gerekir” iddiasına karşı, başka bir yol da var
    Mesela bu arşiv dosyasını indirip bulutta saklayabilirsiniz

  • Mutlak konumlandırma ancak CSS2 (1998) ile mümkün oldu
    Space Jam web sitesi, align, valign, colspan ve rowspan kullanan tablo yerleşimi idi

    • Teşekkürler. Hatalı kısmı düzelttim ve kaynağı belirttim. Şaka devam ettiği için bağlam açısından olduğu gibi bıraktım
    • Bu tür tablolar tarayıcı ayarlarına, ekran boyutuna ve yazı tipine göre farklı render edilirdi
      Web'in asıl doğası tam da buydu: yorumlanan hiper metin

  • Acaba böyle bir test yapıldı mı diye merak ediyorum
    Gezegenlerin yörünge yarıçaplarını hesaplayıp, her gezegenin gerçekten yörünge üzerinde olup olmadığını birim test betiğiyle doğrulama fikri

    • Karmaşık işlerde LLM kullanırken bazen ilk seferde şansınız yaver gider ama çoğu zaman açık talimatlar ve tekrarlı testler gerekir
      Sonuçta LLM'le sürekli uğraşmaktansa bazen doğrudan kendin yapmak daha hızlı oluyor
    • Böyle testler denemedim ama ilginç. Yine de Claude ya da kütüphaneler piksel düzeyinde ayrım yapmada pek iyi olmadığı için zor olurdu
    • Sonunda bir tür “düz metin İngilizce programlama dili” yaratmış olduk. Hem de dünya elektriğinin %10'unu ve yarı iletkenlerin %40'ını kullanarak
    • Eğer ajan sonucu kendi başına doğrulayabiliyorsa hızlıca yineleme yapabilir. Yapamıyorsa bir şeyler ters gidiyordur. Yine de bu proje gerçekten harika

  • Claude'a web sitesinin orijinal HTML'ini olduğu gibi verip onu “deşifre etmesini” istemek mümkün olmaz mı diye düşünüyorum
    Site küçük olduğu için gayet yapılabilir görünüyor.
    Orijinal kod ile render sonucu farklı şeyler ama Claude bu farkı idare edebilir gibi duruyor
    Sonuçta kopyalamaktan ziyade yeniden yaratmak daha iyi bir yaklaşım olabilir

    • “Orijinal HTML” zaten kaynak kodunun kendisi. Modern web geliştirmenin genç nesli biraz şaşırttığı anlaşılıyor
    • Orijinal HTML varsa zaten bu sürece hiç gerek kalmaz
    • Bu HTML kaynağı yaklaşık 7.000 karakter, Claude token'ıyla da yaklaşık 2.000; yani rahatça işlenebilir
    • Space Jam web sitesi CSS olmadan, tablolar ve dilimlenmiş görsellerle oluşturulmuştu

  • Space Jam web sitesinin LLM benchmark'ı olarak kullanılması ilginç
    Claude neredeyse doğru yaptı ama sıra yanlıştı; bu da insanın elle düzeltebileceği bir şey
    Ben şahsen GitHub Copilot'u daha ucuz olduğu ve GitHub entegrasyonu daha iyi olduğu için tercih ediyorum

    • Ama acemi bir geliştirici sonucun yanlış olduğunu fark etmezse sorun olur. Bu tür hatalar başka yerlerde de tekrarlanabilir
    • Bu yazının asıl noktası, Claude'un piksel düzeyinde yeniden üretim konusunda aşırı özgüvenli olması
    • Ben de bunu çok kez denemedim. Aslında yalnızca ekran görüntüsünden HTML'i geri üretmek gerçekçi olmayan bir kısıttı
    • Eğer bir araç kullanıcının doğrulama ve düzeltmesini gerektiriyorsa, o iyi bir araç değildir

  • Claude'un ekran görüntüsü kullanma becerisi zayıf
    Multimodal bir model olsa da asıl gücü hâlâ metin işlemede

    • Görüntüleri piksel ızgarası yerine anlamsal vektör uzayına dönüştürdüğü için piksel bilgisi kayboluyor
      Doğru yaklaşım, Claude'a kendi görüntü işleme aracını yaptırmak ve bunu koordinat hesaplamakla test çalıştırmak için kullandırmak olur
      Böylece yineleme kararlılığı ve verimliliği çok daha yüksek olur
    • Metinde bile 2D yapıyı kavramak zor. Mesela ASCII art daireyi tam yarıçapla çizmesini isterseniz pek iyi yapamaz

  • Ben de Claude ile Storybook bileşen görsel testleri yapmayı denedim ama sonuç iyi değildi
    Bunun yerine Playwright'ın vision modu ile Codex'i birleştirmeyi denedim, ancak görsel doğrulama döngüsü sonuçta başarısız oldu
    İlgili notları blogda yazdım