Ghi chép về một lần thất bại khi cố tái hiện website Space Jam năm 1996 bằng Claude

 (j0nah.com)
1 điểm bởi GN⁺ 2025-12-08 | 1 bình luận | Chia sẻ qua WhatsApp
  • Một nỗ lực tái hiện website chính thức của Space Jam năm 1996 của Warner Bros. bằng mô hình AI Claude đã được thực hiện
  • Dù đã cung cấp cho Claude ảnh chụp màn hình và bộ tài sản hình ảnh gốc, HTML được tạo ra vẫn không khớp bố cục với bản gốc
  • Đã bổ sung nhiều công cụ hỗ trợ như ước lượng tọa độ, lớp phủ lưới và công cụ so sánh pixel, nhưng Claude vẫn không thể tính toán vị trí chính xác
  • Claude tự đánh giá kết quả của mình là “hoàn hảo”, nhưng trên thực tế lại có xu hướng lỗi tích lũy và quá tự tin vào kết quả do chính mình tạo ra
  • Thí nghiệm này cho thấy giới hạn về độ chính xác thị giác và lỗi tự đánh giá của AI, đồng thời cho thấy sự đơn giản của thiết kế web thời kỳ đầu lại mang một độ phức tạp khó tái hiện

Tổng quan về website Space Jam 1996

  • Website do Warner Bros. tạo ra để quảng bá bộ phim Space Jam năm 1996 được cấu thành từ một trang HTML duy nhất và nền GIF
    • Màu sắc đơn giản, cấu trúc dựa trên bảng, dung lượng dưới 200KB
    • Vẫn được duy trì đến nay tại địa chỉ spacejam.com/1996
  • Người thực hiện thí nghiệm muốn kiểm chứng liệu Claude có thể tái hiện website này chỉ từ ảnh chụp màn hình hay không

Chuẩn bị thí nghiệm

  • Dữ liệu được cung cấp cho Claude
    • Ảnh chụp toàn bộ website
    • Thư mục tài sản hình ảnh gốc
  • Để theo dõi hoạt động nội bộ của Claude, một hệ thống ghi log lưu lượng API thông qua proxy đã được thiết lập
    • Ghi lại mọi prompt, phản hồi và lệnh gọi công cụ (Read, Write, lệnh Bash, v.v.)
    • Tạo tệp traffic.log cho mỗi lần thử

Phần 1: Claude, người theo chủ nghĩa hiện thực

  • Ở lần thử đầu tiên, Claude sao chép tương đối vị trí các hành tinh và nút bấm, nhưng hình dạng quỹ đạo khác với bản gốc
    • Bản gốc là cách sắp xếp theo hình elip, còn Claude lại bố trí theo hình thoi đối xứng
  • Claude tự đánh giá kết quả là “hoàn hảo” và khẳng định phân tích cùng cách bố trí của mình là chính xác
  • Sau đó, Claude được yêu cầu viết rõ các bước suy luận, nhưng
    • Các con số được nhắc đến ở bước phân tích không được phản ánh khi tạo HTML
  • Khi được hỏi ở mức pixel, Claude
    • trả lời rằng “không thể đo tọa độ chính xác”, “chỉ có thể ước lượng bằng mắt”
    • mức tự tin về độ chính xác trong phạm vi 5 pixel chỉ ở mức 15/100
  • Claude thừa nhận mình không có khả năng đo chính xác theo pixel, nên sau đó người thực hiện tiếp tục mở rộng công cụ hỗ trợ

Phần 2: Claude, người kể chuyện không đáng tin

  • Để bù đắp giới hạn đo đạc của Claude, các công cụ như lớp phủ lưới, nhãn tọa độ, công cụ so sánh màu và trình xem so sánh ảnh chụp màn hình đã được bổ sung
  • Claude dùng lưới “như đồ trang trí” và vẫn diễn giải sai tọa độ
    • Ví dụ: đưa ra các giá trị như tâm (961,489), Planet B-Ball (850,165), nhưng không khớp với vị trí thực tế
  • Qua nhiều vòng lặp, Claude khẳng định có cải thiện dần, nhưng thực tế sai số lại tích lũy thêm
    • Lần 1 (lưới 50px): dịch chuyển nhẹ
    • Lần 2 (lưới 25px): dời toàn bộ quỹ đạo vào trong 20px
    • Lần 3 (lưới 5px): lặp lại các tinh chỉnh nhỏ
    • Lần 4: tuyên bố “đã tinh chỉnh xong”
  • Trên thực tế, bán kính quỹ đạo của các hành tinh còn thiếu 150~200px, và toàn bộ bố cục vẫn ở trạng thái bị nén lại
  • Claude liên tục đánh giá là “gần như hoàn hảo”, nhưng lại phán đoán sai khi lấy chính kết quả do mình tạo ra làm chuẩn
  • Người thực hiện trích dẫn bài báo của Anthropic “Language Models (Mostly) Know What They Know”
    • để giải thích hiện tượng mô hình nhầm văn bản do chính nó tạo ra là đầu vào từ bên ngoài, từ đó trở nên quá tự tin
    • Điều này trùng khớp với hiện tượng Claude xem HTML của chính mình là “đáp án đúng”, khiến các lần chỉnh sửa sau bị méo lệch

Phần 3: Claude, kẻ mù

  • Để phân tích giới hạn thị giác của Claude, tác giả giả định các ràng buộc cấu trúc của bộ mã hóa thị giác
    • Hình ảnh được token hóa theo các khối 16×16 pixel, nên thông tin hình học chi tiết bị mất đi
    • Claude có thể nhận biết ngữ nghĩa như “hành tinh”, “quan hệ vị trí”, nhưng không thể xác định tọa độ chính xác
  • Tham khảo bài báo “An Image is Worth 16x16 Words”,
    • tác giả suy đoán rằng Claude nhận biết chi tiết pixel bằng cách nén chúng theo từng patch
  • Để kiểm chứng điều này, một ảnh chụp màn hình được phóng to 2 lần đã được cung cấp, nhưng
    • Claude không tính đến tỷ lệ phóng to và không giữ được các quan hệ tỷ lệ
  • Kết quả là Claude hiểu đúng về mặt khái niệm, nhưng kém trong khả năng tái hiện hình học
    • Mô tả như “hành tinh này nằm phía trên hành tinh kia” là đúng, nhưng bố cục HTML vẫn tiếp tục lệch

Kết luận và các bài toán còn bỏ ngỏ

  • Claude nhận biết được cấu trúc thị giác của website Space Jam, nhưng thất bại trong việc sao chép chính xác
  • Các nguyên nhân thất bại được nêu ra gồm
    • Không thể đo ở mức pixel
    • Quá tự tin vào kết quả do chính mình tạo ra
    • Giới hạn độ phân giải của mã hóa thị giác
  • Những hướng thử nghiệm tiếp theo được đề xuất
    1. Chia màn hình thành các góc phần tư để tái hiện riêng lẻ rồi ghép lại
    2. Thử nghiệm prompt engineering tập trung vào suy luận không gian
    3. Tăng cường khả năng dùng công cụ zoom và ảnh chụp màn hình
  • Thí nghiệm này đồng thời cho thấy giới hạn độ chính xác thị giác của AI và sự phức tạp của thiết kế web thời kỳ đầu
  • Một trang web đơn giản của năm 1996 vẫn là một benchmark mà AI hiện đại chưa thể tái hiện được

Bài viết liên quan

1 bình luận

 
GN⁺ 2025-12-08
Ý kiến trên Hacker News

  • Từ góc nhìn của một người từng tự làm các website tương tự vào cuối thập niên 90, tôi đã thử đưa website Space Jam vào Opus 4.5
    Tác giả bài gốc nói đó là “một trang HTML đơn được bố cục bằng định vị tuyệt đối”, nhưng thực ra nó là bố cục dựa trên bảng. Thời đó chưa có CSS nên gần như chỉ có thể làm vậy
    Kết quả lần thử tái hiện bằng bảng của tôi có trong ảnh chụp màn hình này

    • Cảm ơn. Tôi đã sửa phần sai bằng gạch ngang và ghi rõ nguồn
      Trong phần bình luận mọi người đang tiếp tục đùa theo nên tôi giữ nguyên để bảo toàn ngữ cảnh
    • Tôi vẫn nhớ thời đó người ta cắt nhỏ thiết kế rồi xuất ra thành bảng
    • Tôi cũng bắt đầu phát triển web bằng GoLive, và đến giờ vẫn còn nhớ cách dựng trang bằng bảng

  • Các LLM như Claude vẫn còn yếu ở việc triển khai chi tiết bố cục
    Nhưng thú vị là tôi đã dùng Claude để viết một chương trình C chỉ trong vài phút nhằm thêm hỗ trợ hồ sơ màu gamma cho Linux compositor (Hyprland)
    Mã do Claude tạo ra biên dịch ngay ở lần đầu và còn làm được cả việc đọc file .icc, trích xuất VCGT rồi gửi sang driver amdgpu
    Chỉ có vấn đề endianness trong phần phân tích ICC là tôi phải tự sửa

    • Có khả năng Claude không tự viết mã mà lấy ở đâu đó rồi chỉnh sửa. Nếu con người làm vậy thì đã bị gọi là đạo văn
    • Lý do LLM yếu ở chi tiết thị giác là vì dữ liệu cấp độ pixel không nằm trong quá trình huấn luyện. Phần lớn bộ dữ liệu UI không có ảnh chụp màn hình hoặc không thu thập phần đó
    • Nhưng tôi vẫn thắc mắc tại sao chức năng như thế này lại phải do Wayland compositor xử lý. Apple đã giải quyết chuyện đó từ thập niên 90 với ColorSync

  • Đây là một trường hợp Claude gần như hoàn hảo nhưng vẫn hơi thiếu một chút
    Tôi có sở thích tìm abandonware cho Mac OS từ 20 năm trước rồi chỉnh cho chạy được trên Apple Silicon
    Ví dụ, với Claude tôi đã làm cho jpegview chạy được chỉ sau ba lần sửa mã, rồi sau đó còn thêm phát video và tính năng bố cục mới
    Những dự án nhỏ kiểu này rất hợp để làm cùng một cửa sổ trình duyệt mở sẵn với phiên bản Claude viết mã

    • Mọi người nói kiểu “gần ổn rồi” nghe như hiếm lắm, nhưng thực ra chuyện đó xảy ra khá thường xuyên
    • Nhân tiện, tôi mới bắt đầu dùng Mac gần đây và thấy Phoenix Slides khá ổn

  • Về lập luận rằng phải “khôi phục chỉ bằng Claude”, thực ra vẫn có cách khác
    Ví dụ chỉ cần tải tệp lưu trữ này về rồi cất trên đám mây là xong

  • Định vị tuyệt đối chỉ đến CSS2 (1998) mới có
    Website Space Jam là bố cục bằng bảng tận dụng align, valign, colspan, rowspan

    • Cảm ơn. Tôi đã sửa phần sai và ghi rõ nguồn. Vì chuỗi đùa vẫn đang tiếp tục nên tôi giữ nguyên để bảo toàn ngữ cảnh
    • Những bảng như vậy sẽ được trình duyệt render khác nhau tùy thiết lập trình duyệt, kích thước màn hình và phông chữ
      Đó mới chính là bản chất nguyên thủy của web, siêu văn bản được diễn giải

  • Tôi tò mò không biết đã ai thử kiểu kiểm tra này chưa
    Tức là tính bán kính quỹ đạo của các hành tinh rồi dùng script unit test để xác minh xem từng hành tinh có nằm chính xác trên quỹ đạo hay không

    • Khi dùng LLM cho tác vụ phức tạp, nếu may mắn thì có thể xong ngay một lần, nhưng đa số trường hợp vẫn cần chỉ dẫn tường minh và kiểm thử lặp lại
      Rốt cuộc nhiều khi tự làm còn nhanh hơn là cứ phải trông chừng LLM mãi
    • Tôi chưa thử kiểu kiểm tra này nhưng thấy thú vị. Chỉ là Claude hay thư viện liên quan đều không giỏi phân biệt ở cấp độ pixel, nên khá khó
    • Cuối cùng thì chúng ta đã tạo ra một dạng ‘ngôn ngữ lập trình bằng tiếng Anh thuần’. Đổi lại là 10% điện năng toàn cầu và 40% chất bán dẫn trên thế giới
    • Nếu tác nhân có thể tự xác minh kết quả thì có thể lặp rất nhanh. Nếu không thì có gì đó đang sai. Dù vậy, dự án này thật sự rất hay

  • Tôi nghĩ có lẽ chỉ cần đưa nguyên HTML gốc của website vào Claude và bảo nó “giải mã” là được
    Vì trang khá nhỏ nên có vẻ hoàn toàn khả thi.
    Mã gốc và kết quả render là hai thứ khác nhau, nhưng có lẽ Claude xử lý được chênh lệch đó
    Cuối cùng thì có khi tái sáng tạo còn tốt hơn sao chép

    • “HTML gốc” chính là mã nguồn. Có vẻ phát triển web hiện nay đã khiến thế hệ trẻ thấy rối
    • Nếu đã có HTML gốc thì chẳng cần phải đi qua quy trình này làm gì
    • Mã HTML gốc này dài khoảng 7.000 ký tự, tương đương chừng 2.000 token của Claude nên hoàn toàn xử lý được
    • Website Space Jam được dựng bằng bảng và cắt ảnh, không dùng CSS

  • Thật thú vị khi dùng website Space Jam làm một benchmark cho LLM
    Claude gần như làm đúng, chỉ sai thứ tự, mà đó là phần con người có thể tự sửa được
    Cá nhân tôi thích GitHub Copilot hơn vì rẻ hơn và tích hợp với GitHub tốt hơn

    • Nhưng nếu người mới không nhận ra kết quả bị sai thì sẽ thành vấn đề. Kiểu thất bại này có thể lặp lại ở nơi khác
    • Ý chính của bài viết là Claude quá tự tin vào việc tái hiện ở cấp độ pixel
    • Tôi cũng không thử đi thử lại quá nhiều lần. Thực ra việc phục dựng HTML chỉ từ ảnh chụp màn hình là một ràng buộc phi thực tế
    • Nếu công cụ vẫn cần người dùng tự xác minh và sửa lại thì đó không phải là công cụ tốt

  • Claude khá yếu ở khả năng tận dụng ảnh chụp màn hình
    Dù là mô hình đa phương thức, điểm mạnh của nó vẫn là xử lý văn bản

    • Vì hình ảnh được chuyển thành không gian vector ngữ nghĩa thay vì lưới pixel, nên thông tin pixel bị mất đi
      Cách tiếp cận đúng là bảo Claude tự tạo công cụ xử lý ảnh, rồi dùng chính công cụ đó để tính tọa độ và chạy kiểm thử
      Làm vậy sẽ cho độ ổn định khi lặp và hiệu quả cao hơn nhiều
    • Ngay cả với văn bản, việc nắm cấu trúc 2D cũng khó. Ví dụ bảo nó vẽ một vòng tròn ASCII art với bán kính chính xác thì thường không làm tốt

  • Tôi cũng từng thử dùng Claude cho kiểm thử trực quan các component Storybook, nhưng kết quả không tốt
    Sau đó tôi kết hợp vision mode của Playwright với Codex, nhưng vòng lặp kiểm chứng trực quan cuối cùng vẫn thất bại
    Tôi đã tổng hợp nội dung liên quan trong bài blog này