Catatan kegagalan merekreasikan situs web Space Jam 1996 dengan Claude

 (j0nah.com)
1 poin oleh GN⁺ 2025-12-08 | 1 komentar | Bagikan ke WhatsApp
  • Upaya untuk merekreasikan situs web resmi Space Jam milik Warner Bros. dari tahun 1996 dengan model AI Claude telah dilakukan
  • Meskipun Claude diberi screenshot dan aset gambar asli, HTML yang dihasilkan tidak cocok dengan tata letak aslinya
  • Berbagai alat bantu tambahan seperti estimasi koordinat, overlay grid dan alat pembanding piksel telah ditambahkan, tetapi Claude tetap tidak mampu menghitung posisi secara akurat
  • Claude menilai hasilnya sendiri sebagai “sempurna”, tetapi kenyataannya kesalahan terus terakumulasi dan ia cenderung terlalu percaya pada hasilnya sendiri
  • Eksperimen ini menyoroti batas presisi visual AI dan kesalahan evaluasi diri, serta menunjukkan bahwa kesederhanaan desain web awal justru menyimpan kompleksitas yang sulit direproduksi

Gambaran umum situs web Space Jam 1996

  • Situs web yang dibuat Warner Bros. pada 1996 untuk promosi film Space Jam terdiri dari satu halaman HTML dan latar belakang GIF
    • Warna sederhana, struktur berbasis tabel, ukuran di bawah 200KB
    • Sampai sekarang masih dipertahankan di alamat spacejam.com/1996
  • Eksperimen ini bertujuan menguji apakah Claude bisa merekreasikan situs ini hanya dari screenshot

Persiapan eksperimen

  • Materi yang diberikan kepada Claude
    • Screenshot penuh situs web
    • Direktori aset gambar asli
  • Untuk melacak cara kerja internal Claude, dibangun sistem logging trafik API melalui proxy
    • Mencatat semua prompt, respons, dan pemanggilan alat (Read, Write, perintah Bash, dll.)
    • File traffic.log dibuat untuk setiap percobaan
Iklan

Bagian 1: Claude sang Realis

  • Pada percobaan pertama, Claude kurang lebih menyalin susunan planet dan posisi tombol, tetapi bentuk orbitnya berbeda dari aslinya
    • Versi asli memakai susunan elips, sedangkan Claude menempatkannya dalam bentuk berlian yang simetris
  • Claude menilai hasilnya sebagai “sempurna” dan mengklaim analisis serta penempatannya akurat
  • Setelah itu, Claude diminta menuliskan langkah penalarannya secara eksplisit, tetapi
    • angka-angka yang disebut di tahap analisis tidak diterapkan saat menghasilkan HTML
  • Saat ditanya soal piksel, Claude menjawab
    • “Saya tidak bisa mengukur koordinat secara akurat” dan “Saya hanya bisa memperkirakan secara visual”
    • tingkat kepercayaan untuk akurasi dalam 5 piksel hanya sekitar 15/100
  • Claude mengakui tidak punya kemampuan pengukuran piksel yang presisi, sehingga eksperimen lalu mencoba memperluas alat bantu

Bagian 2: Claude sang Narator yang Tidak Andal

  • Untuk menutupi keterbatasan pengukuran Claude, ditambahkan overlay grid, label koordinat, alat pembanding warna, dan viewer pembanding screenshot
  • Claude menggunakan grid seolah hanya “hiasan” dan tetap salah menafsirkan koordinat
    • Contoh: ia menyebut angka seperti pusat (961,489), Planet B-Ball (850,165), tetapi posisi sebenarnya tidak sesuai
    Iklan
  • Dalam beberapa iterasi, Claude mengklaim ada peningkatan bertahap, padahal kesalahannya justru menumpuk
    • Iterasi 1 (grid 50px): pergeseran kecil
    • Iterasi 2 (grid 25px): seluruh orbit digeser 20px ke arah dalam
    • Iterasi 3 (grid 5px): pengulangan penyesuaian halus
    • Iterasi 4: menyatakan “penyesuaian presisi selesai”
  • Kenyataannya, radius orbit planet masih kurang 150~200px dan keseluruhan susunan tetap dalam bentuk terkompresi
  • Claude berulang kali menilai hasilnya “hampir sempurna”, tetapi salah menilai dengan menjadikan hasil buatannya sendiri sebagai acuan
  • Eksperimenter mengutip makalah Anthropic “Language Models (Mostly) Know What They Know”
    • Makalah itu menjelaskan fenomena ketika model mengira teks yang ia hasilkan sendiri sebagai input eksternal, lalu menjadi terlalu percaya diri
    • Ini sesuai dengan gejala Claude yang menganggap HTML buatannya sendiri sebagai “jawaban benar”, sehingga revisi berikutnya menjadi menyimpang

Bagian 3: Claude yang Buta

  • Untuk menganalisis keterbatasan visual Claude, diajukan asumsi tentang kendala struktural encoder visi
    • Karena gambar ditokenisasi dalam blok 16×16 piksel, informasi geometri halus hilang
    • Claude bisa mengenali secara semantik hal-hal seperti “planet” dan “relasi posisi”, tetapi tidak mampu menentukan koordinat presisi
  • Dengan merujuk pada makalah “An Image is Worth 16x16 Words”,
    • diperkirakan Claude mengenali detail piksel dengan mengompresinya dalam satuan patch
  • Untuk mengujinya, diberikan screenshot yang diperbesar 2x, tetapi
    • Claude tidak mempertimbangkan rasio pembesaran dan gagal mempertahankan hubungan proporsional
    Iklan
  • Hasil akhirnya, Claude tepat dalam pemahaman konseptual, tetapi lemah dalam reproduksi geometris
    • Penjelasan seperti “planet ini berada di atas planet itu” memang benar, tetapi tata letak HTML-nya tetap meleset

Kesimpulan dan tugas yang belum terselesaikan

  • Claude dapat mengenali struktur visual situs web Space Jam, tetapi gagal melakukan penyalinan yang presisi
  • Penyebab kegagalan meliputi
    • ketidakmampuan mengukur pada tingkat piksel
    • terlalu percaya pada hasil yang dihasilkannya sendiri
    • batas resolusi pada encoding visual
  • Upaya lanjutan yang diusulkan
    1. Membagi layar ke dalam kuadran lalu merekreasikan tiap bagian secara terpisah sebelum digabungkan
    2. Mencoba prompt engineering yang berfokus pada penalaran spasial
    3. Memperkuat kemampuan penggunaan alat zoom dan pemanfaatan screenshot
  • Eksperimen ini sekaligus menunjukkan batas presisi visual AI dan kompleksitas desain web awal
  • Halaman web sederhana dari tahun 1996 itu masih menjadi benchmark yang belum bisa direproduksi oleh AI modern

Bacaan terkait

1 komentar

 
GN⁺ 2025-12-08
Komentar Hacker News

  • Dari sudut pandang orang yang dulu membuat situs web serupa sendiri pada akhir 90-an, saya mencoba memasukkan situs web Space Jam ke Opus 4.5
    Penulis aslinya menyebutnya sebagai “satu halaman HTML yang disusun dengan posisi absolut”, tetapi sebenarnya itu adalah layout berbasis tabel. Pada masa sebelum CSS, memang mau tidak mau seperti itu
    Hasil upaya rekonstruksi saya dengan pendekatan berbasis tabel ada di tangkapan layar ini

    • Terima kasih. Bagian yang salah sudah diperbaiki dengan coretan dan sumbernya sudah dicantumkan
      Karena leluconnya berlanjut di komentar, saya membiarkannya demi konteks
    • Saya masih ingat pada masa itu desain dipotong-potong lalu diekspor ke tabel
    • Saya juga mulai pengembangan web dengan GoLive, dan masih ingat cara menyusun halaman memakai tabel

  • LLM seperti Claude masih lemah dalam implementasi detail layout
    Namun menariknya, saya pernah memakai Claude untuk membuat program C dalam hitungan menit yang menambahkan dukungan profil warna gamma ke Linux compositor (Hyprland)
    Kode yang dihasilkan Claude langsung berhasil dikompilasi pada percobaan pertama, bahkan sudah mengimplementasikan pembacaan file .icc, ekstraksi VCGT, dan pengiriman ke driver amdgpu
    Hanya masalah endianness pada parsing ICC yang saya perbaiki sendiri

    • Kemungkinan besar Claude tidak benar-benar menulis kode itu sendiri, melainkan mengambil kode dari suatu tempat lalu memodifikasinya. Jika manusia yang melakukannya, itu akan disebut plagiarisme
    • Alasan LLM lemah pada detail visual adalah karena data tingkat piksel tidak termasuk dalam pelatihan. Sebagian besar dataset UI tidak memiliki tangkapan layar atau memang tidak mengumpulkannya
    • Tapi saya heran kenapa fitur seperti ini harus ditangani oleh Wayland compositor. Apple sudah menyelesaikannya lewat ColorSync sejak tahun 90-an

  • Ini contoh ketika Claude hampir sempurna tetapi sedikit kurang
    Saya punya hobi mencari abandonware untuk Mac OS dari 20 tahun lalu lalu memperbaikinya agar berjalan di Apple Silicon
    Misalnya, saya berhasil menjalankan jpegview bersama Claude hanya dengan tiga kali perbaikan kode, lalu setelah itu menambahkan pemutaran video dan fitur layout baru
    Proyek-proyek mini seperti ini sangat cocok dikerjakan sambil membuka satu jendela browser bersama instance kode Claude

    • Anda bilang seolah ungkapan “hampir lumayan” itu jarang, padahal sebenarnya cukup sering terjadi
    • Sebagai referensi, saya baru mulai memakai Mac belakangan ini dan Phoenix Slides ternyata cukup bagus

  • Menanggapi klaim bahwa “pemulihan harus dilakukan hanya dengan Claude”, ada cara lain
    Misalnya, cukup unduh file arsip ini lalu simpan di cloud

  • Positioning absolut baru dimungkinkan di CSS2 (1998)
    Situs web Space Jam menggunakan layout tabel dengan memanfaatkan align, valign, colspan, dan rowspan

    • Terima kasih. Bagian yang salah sudah saya perbaiki dan sumbernya dicantumkan. Karena leluconnya berlanjut, saya biarkan demi konteks
    • Tabel seperti ini dirender berbeda-beda tergantung pengaturan browser, ukuran layar, dan font
      Itulah wujud asli web: hypertext yang diinterpretasikan

  • Saya penasaran apakah ada yang mencoba pengujian seperti ini
    Misalnya menghitung radius orbit planet dan memverifikasi lewat skrip unit test apakah setiap planet benar-benar berada tepat di orbitnya

    • Saat memakai LLM untuk pekerjaan kompleks, kadang kalau beruntung bisa langsung jadi, tetapi biasanya butuh instruksi eksplisit dan pengujian berulang
      Pada akhirnya, sering kali lebih cepat mengerjakannya sendiri daripada terus mengawasi LLM
    • Saya belum mencoba pengujian seperti itu, tapi menarik. Hanya saja Claude maupun pustaka yang dipakai kurang bagus dalam membedakan sampai tingkat piksel, jadi sulit
    • Pada akhirnya kita seperti membuat ‘bahasa pemrograman Inggris polos’, sambil menghabiskan 10% listrik dunia dan 40% semikonduktor dunia
    • Jika agen bisa memverifikasi hasilnya sendiri, iterasi bisa berlangsung cepat. Kalau tidak, berarti ada sesuatu yang salah. Meski begitu, proyek ini benar-benar keren

  • Saya sempat berpikir, bukankah bisa saja memasukkan HTML asli situs web apa adanya ke Claude lalu memintanya “mendekripsi”
    Situsnya kecil, jadi tampaknya sangat memungkinkan.
    Kode asli dan hasil render memang berbeda, tetapi rasanya Claude bisa menangani perbedaan itu
    Pada akhirnya, mungkin mencipta ulang lebih baik daripada sekadar menyalin

    • “HTML asli” itu sendiri sudah merupakan source code. Pengembangan web modern tampaknya membuat generasi muda bingung
    • Kalau HTML aslinya ada, tidak perlu repot menjalani proses seperti ini
    • Sumber HTML ini panjangnya sekitar 7.000 karakter, kira-kira 2.000 token Claude, jadi sepenuhnya bisa diproses
    • Situs web Space Jam dibuat tanpa CSS, memakai tabel dan pemotongan gambar

  • Menarik bahwa situs web Space Jam dijadikan benchmark LLM
    Claude hampir benar, tetapi urutannya salah, dan itu bagian yang bisa diperbaiki manusia secara langsung
    Secara pribadi saya lebih suka GitHub Copilot karena lebih murah dan integrasinya dengan GitHub lebih baik

    • Tetapi masalah muncul jika pengembang pemula tidak menyadari hasilnya salah. Kegagalan seperti ini bisa terulang di tempat lain
    • Poin utama tulisan ini adalah bahwa Claude terlalu percaya diri dalam reproduksi tingkat piksel
    • Saya juga tidak mencobanya berkali-kali. Sebenarnya, memulihkan HTML hanya dari tangkapan layar adalah batasan yang tidak realistis
    • Jika sebuah alat memerlukan verifikasi dan perbaikan dari pengguna, berarti itu bukan alat yang bagus

  • Claude lemah dalam memanfaatkan tangkapan layar
    Memang model multimodal, tetapi kekuatannya tetap ada pada pemrosesan teks

    • Karena gambar diubah ke ruang vektor semantik, bukan grid piksel, informasi pikselnya hilang
      Pendekatan yang benar adalah menyuruh Claude membuat sendiri alat pemrosesan gambar, lalu memakai alat itu untuk menghitung koordinat dan menjalankan pengujian
      Dengan begitu, stabilitas iterasi dan efisiensinya jauh lebih tinggi
    • Bahkan dalam teks pun sulit menangkap struktur 2D. Misalnya, kalau diminta menggambar lingkaran ASCII art dengan radius yang akurat, hasilnya biasanya tidak bagus

  • Saya juga pernah mencoba pengujian visual komponen Storybook dengan Claude, tetapi hasilnya kurang bagus
    Sebagai gantinya, saya mencoba menggabungkan mode vision milik Playwright dengan Codex, tetapi loop validasi visual pada akhirnya tetap gagal
    Saya merangkum hal terkait di blog