บันทึกความล้มเหลวในการจำลองเว็บไซต์ Space Jam ปี 1996 ด้วย Claude

 (j0nah.com)
1 คะแนน โดย GN⁺ 2025-12-08 | 1 ความคิดเห็น | แชร์ทาง WhatsApp
  • มีการดำเนินความพยายามให้โมเดล AI Claude จำลอง เว็บไซต์ทางการ Space Jam ของ Warner Bros ในปี 1996
  • แม้ได้ให้ สกรีนช็อตและทรัพย์สินรูปภาพต้นฉบับ กับ Claude แล้ว แต่ HTML ที่สร้างขึ้นยังไม่ตรงกับต้นฉบับในด้าน เลย์เอาต์
  • แม้จะเพิ่มเครื่องมือเสริมหลายอย่าง เช่น การประมาณค่าพิกัด, เครื่องมือซ้อนกริดและเปรียบเทียบพิกเซล แต่ Claude ก็ยังคง คำนวณตำแหน่งได้ไม่แม่นยำ
  • Claude ประเมินผลลัพธ์ของตัวเองว่า “สมบูรณ์แบบ” แต่ในความเป็นจริงพบว่ามีแนวโน้มให้ความเชื่อมั่นกับผลลัพธ์ของตัวเองเกินไปและเกิดการสะสมความคลาดเคลื่อน
  • การทดลองนี้เผยให้เห็นข้อจำกัดด้านความแม่นยำทางภาพและข้อผิดพลาดในการประเมินตนเองของ AI โดยแสดงให้เห็นว่าเว็บดีไซน์ยุคต้นที่ดูเรียบง่ายกลับมีความซับซ้อนที่ทำให้การจำลองทำได้ยาก

สรุปภาพรวมเว็บไซต์ Space Jam ปี 1996

  • เว็บไซต์ที่ Warner Bros สร้างขึ้นเพื่อโปรโมตภาพยนตร์ Space Jam ในปี 1996 มีโครงสร้างเป็น หน้า HTML เดี่ยวพร้อมพื้นหลัง GIF
    • ใช้สีแบบเรียบง่าย โครงสร้างแบบตาราง และมีขนาดไม่เกิน 200KB
    • ยังเปิดให้เข้าถึงได้ตามเดิมที่ spacejam.com/1996 จนถึงปัจจุบัน
  • ผู้ทดลองพยายามตรวจสอบว่า Claude สามารถจำลองเว็บไซต์นี้ได้จาก สกรีนช็อตเพียงอย่างเดียว หรือไม่

การเตรียมการทดลอง

  • ข้อมูลที่ให้กับ Claude
    • สกรีนช็อตทั้งหน้าเว็บไซต์
    • โฟลเดอร์ทรัพย์สินรูปภาพต้นฉบับ
  • สร้างระบบบันทึกเทรฟฟิก API ผ่านพร็อกซีเพื่อไล่ตามการทำงานภายในของ Claude
    • บันทึกทุกพรอมต์ คำตอบ และการเรียกใช้เครื่องมือ (Read, Write, คำสั่ง Bash ฯลฯ)
    • สร้างไฟล์ traffic.log ในแต่ละความพยายาม

ส่วนที่ 1: Claude the Realist

  • ในความพยายามแรก Claude ทำการจำลองการจัดวาง วงโคจรของดาวเคราะห์และตำแหน่งปุ่ม ได้อย่างโดยรวม แต่รูปแบบวงโคจรยังไม่ตรงกับต้นฉบับ
    • ต้นฉบับใช้การจัดวางแบบวงรี แต่ Claude จัดวางเป็นรูปสี่เหลี่ยมข้าวหลามตัดที่สมมาตร
  • Claude ประเมินผลลัพธ์ว่า “สมบูรณ์แบบ” และอ้างว่าวิธีวิเคราะห์และการจัดวางของตัวเองถูกต้อง
  • ต่อมาขอให้ Claude เขียนขั้นตอนการอนุมานอย่างชัดเจน แต่
    • ค่าเชิงปริมาณที่กล่าวไว้ในขั้นวิเคราะห์ไม่ถูกนำไปใช้เมื่อสร้าง HTML
  • เมื่อถูกถามเป็นคำถามระดับพิกเซล Claude ตอบว่า
    • “วัดพิกัดได้อย่างแม่นยำไม่ได้” และ “สามารถประมาณเชิงภาพได้เท่านั้น”
    • ระดับความมั่นใจที่ถูกต้องภายใน 5 พิกเซลอยู่ที่ระดับ 15/100
  • Claude ยอมรับว่าตนเอง ไม่มีความสามารถวัดพิกเซลได้อย่างแม่นยำ หลังจากนั้นผู้ทดลองจึงลองขยายขีดความสามารถด้วยเครื่องมือเสริม

ส่วนที่ 2: Claude the Unreliable Narrator

  • เพื่อชดเชยข้อจำกัดในการวัดของ Claude ได้เพิ่ม กริดโอเวอร์เลย์ ป้ายพิกัด เครื่องมือเปรียบเทียบสี และตัวดูเปรียบเทียบสกรีนช็อต
  • Claude ใช้กริด “แบบไม่ค่อยช่วย” แทบเหมือนการตกแต่ง และยังคง ตีความพิกัดผิด
    • ตัวอย่างเช่นให้ตัวเลขศูนย์กลาง (961,489), Planet B-Ball (850,165) แต่ตำแหน่งจริงไม่ตรงกัน
  • ในการทำซ้ำหลายรอบ Claude กล่าวอ้างว่ามีการปรับปรุงแบบค่อยเป็นค่อยไป แต่ความคลาดเคลื่อนจริงกลับเพิ่มสะสม
    • รอบที่ 1 (กริด 50px): ย้ายเล็กน้อย
    • รอบที่ 2 (กริด 25px): ย้ายวงโคจรทั้งหมดเข้าด้านใน 20px
    • รอบที่ 3 (กริด 5px): ปรับละเอียดซ้ำอีกครั้ง
    • รอบที่ 4: ประกาศว่า “ปรับแต่งอย่างละเอียดเสร็จสิ้น”
  • ในความเป็นจริง รัศมีวงโคจรของดาวเคราะห์ขาดไป 150~200px และการจัดวางโดยรวมยังคงดูอัดแน่น
  • Claude ให้คะแนนว่า “ใกล้เคียงสมบูรณ์แบบ” ซ้ำแล้วซ้ำเล่า แต่กลับ ใช้ผลลัพธ์ที่ตัวเองสร้างเองเป็นมาตรวัดการตัดสินใจ
  • ผู้ทดลองอ้างอิงงานวิจัยของ Anthropic เรื่อง "Language Models (Mostly) Know What They Know"
    • อธิบายพฤติกรรมที่โมเดลมีความมั่นใจเกินจริงเมื่อ ตีความข้อความที่สร้างขึ้นเองเป็นอินพุตภายนอก
    • สอดคล้องกับปรากฏการณ์ที่ Claude มอง HTML ของตัวเองว่าเป็น “คำตอบที่ถูกต้อง” และการปรับแก้ต่อมาถูกบิดเบือนได้

ส่วนที่ 3: Claude the Blind

  • เพื่อวิเคราะห์ข้อจำกัดด้านภาพของ Claude สมมติข้อจำกัดเชิงโครงสร้างของ วิดีชันเอนโค้เดอร์
    • ภาพถูกแปลงเป็นโทเคนเป็นบล็อกขนาด 16×16 พิกเซล ทำให้ ข้อมูลเรขาคณิตละเอียดสูญหาย
    • Claude สามารถรับรู้ความหมายเชิงแนวคิด เช่น “ดาวเคราะห์”, “ความสัมพันธ์ทางตำแหน่ง” ได้ แต่ไม่สามารถให้พิกัดที่แม่นยำ
  • โดยอ้างอิงงานวิจัย "An Image is Worth 16x16 Words" ว่า
    • คาดว่า Claude รับรู้รายละเอียดจากภาพในระดับแพตช์ ทำให้ข้อมูลพิกเซลถูกบีบอัด
  • เพื่อทดสอบสมมติฐานนี้ จึงให้ สกรีนช็อตที่ขยายขนาด 2 เท่า
    • Claude ไม่สามารถคงความสัมพันธ์เชิงสัดส่วนได้เพราะไม่คำนึงถึงอัตราการขยาย
  • ผลสุดท้าย Claude จึงมีความเข้าใจเชิงแนวคิดที่ถูกต้อง แต่ ขาดความสามารถในการจำลองเชิงเรขาคณิต
    • คำอธิบายเช่น “ดาวเคราะห์ดวงนี้อยู่เหนือดาวเคราะห์ดวงนั้น” อาจถูกต้อง แต่การจัดวาง HTML ยังไม่ตรง

สรุปและประเด็นที่ยังไม่แก้

  • Claude รับรู้โครงสร้างทางทัศนศิลป์ของเว็บไซต์ Space Jam ได้ แต่ล้มเหลวในการจำลองเชิงละเอียดอย่างแม่นยำ
  • สาเหตุความล้มเหลวประกอบด้วย
    • ไม่สามารถวัดค่าแบบพิกเซลได้
    • ความเชื่อมั่นเกินจริงต่อผลลัพธ์ที่สร้างขึ้นเอง
    • ขีดจำกัดความละเอียดของการเข้ารหัสภาพ
  • แนวทางที่เสนอสำหรับการทดลองครั้งต่อไป
    1. แบ่งจอเป็น สี่ส่วน แล้วจำลองทีละส่วนแล้วค่อยรวม
    2. ทดลอง Prompt Engineering ที่เน้นการให้เหตุผลเชิงพื้นที่
    3. เสริมความสามารถในการ ใช้เครื่องมือซูมและสกรีนช็อต
  • การทดลองนี้เป็นกรณีตัวอย่างที่สะท้อนทั้ง ข้อจำกัดด้านความแม่นยำทางภาพของ AI และ ความซับซ้อนของเว็บดีไซน์ยุคต้น
  • หน้าเว็บที่ดูง่ายของปี 1996 ยังคงเป็นบรรทัดฐานที่ AI สมัยใหม่ยังไม่สามารถจำลองได้

บทความที่เกี่ยวข้อง

1 ความคิดเห็น

 
GN⁺ 2025-12-08
ความคิดเห็นจาก Hacker News

  • ในฐานะคนที่เคยทำเว็บไซต์คล้าย ๆ แบบนั้นเองช่วงปลายยุค 90 ลองเอาเว็บไซต์ Space Jamใส่เข้าไปใน Opus 4.5 ดู
    ผู้เขียนต้นฉบับบอกว่าเป็น “หน้า HTML เดียวที่จัดด้วย absolute positioning” แต่จริง ๆ แล้วเป็นเลย์เอาต์แบบตาราง
    เพราะเป็นยุคก่อนมี CSS ก็เลยแทบจะเลี่ยงไม่ได้
    ผลลัพธ์จากการลองสร้างใหม่ด้วยตารางของฉันอยู่ในสกรีนช็อตนี้

    • ขอบคุณ แก้ส่วนที่ผิดด้วยขีดฆ่าแล้ว และระบุที่มาไว้แล้ว
      ในคอมเมนต์มีมุกต่อกันอยู่ เลยคงไว้ตามเดิมเพื่อรักษาบริบท
    • ยังจำได้ว่าตอนนั้นเราหั่นดีไซน์แล้ว export เป็นตารางกัน
    • ฉันก็เริ่มทำเว็บด้วย GoLive เหมือนกัน ยังจำวิธีจัดหน้าเว็บด้วยตารางได้อยู่เลย

  • LLM อย่างClaudeก็ยังอ่อนเรื่องการลงรายละเอียดการทำเลย์เอาต์อยู่
    แต่ที่น่าสนใจคือ ฉันใช้ Claude สร้างโปรแกรม C ภายในไม่กี่นาทีเพื่อเพิ่มการรองรับโปรไฟล์สีแกมมาให้กับLinux compositor (Hyprland)
    โค้ดที่ Claude สร้างคอมไพล์ผ่านตั้งแต่ครั้งแรก และยังทำได้ถึงขั้นอ่านไฟล์ .icc ดึง VCGT แล้วส่งต่อไปยังไดรเวอร์ amdgpu
    มีแค่ปัญหาendiannessในส่วน parsing ICC ที่ฉันต้องแก้เอง

    • มีโอกาสสูงที่ Claude ไม่ได้เขียนโค้ดเอง แต่เอาโค้ดจากที่ไหนสักแห่งมาปรับ ถ้าเป็นมนุษย์ทำก็คงถูกเรียกว่าลอกงาน
    • เหตุผลที่ LLM อ่อนเรื่องรายละเอียดเชิงภาพคือข้อมูลระดับพิกเซลไม่ได้รวมอยู่ในการฝึก ชุดข้อมูล UI ส่วนใหญ่ไม่มีสกรีนช็อตหรือไม่ได้เก็บรวบรวมไว้
    • แต่ก็สงสัยว่าทำไมฟีเจอร์แบบนี้ต้องให้Wayland compositorเป็นคนจัดการ ทั้งที่ Apple แก้ปัญหานี้ด้วย ColorSync มาตั้งแต่ยุค 90 แล้ว

  • นี่เป็นกรณีที่ Claude เกือบจะสมบูรณ์แบบ แต่ยังขาดไปนิดหน่อย
    ฉันมีงานอดิเรกคือหาabandonware สำหรับ Mac OSเมื่อ 20 ปีก่อนมาแก้ให้รันบน Apple Silicon ได้
    เช่น ฉันทำให้ jpegview ใช้งานได้ด้วย Claude โดยแก้โค้ดแค่สามรอบ แล้วจากนั้นก็เพิ่มการเล่นวิดีโอและฟีเจอร์เลย์เอาต์ใหม่เข้าไป
    โปรเจกต์เล็ก ๆ แบบนี้เหมาะมากกับการเปิดหน้าต่างเบราว์เซอร์ไว้หนึ่งอันแล้วทำงานร่วมกับ Claude code instance

    • เหมือนจะพูดกันว่าคำว่า “เกือบโอเค” ไม่ค่อยได้ใช้กัน แต่จริง ๆ แล้วกรณีแบบนี้เกิดขึ้นค่อนข้างบ่อย
    • อ้อ แล้วฉันเพิ่งเริ่มใช้ Mac ไม่นานนี้เอง แต่Phoenix Slidesค่อนข้างดีทีเดียว

  • สำหรับคำกล่าวที่ว่า “ต้องกู้คืนด้วย Claude เท่านั้น” จริง ๆ ก็มีวิธีอื่น
    เช่นดาวน์โหลดไฟล์ archive นี้แล้วเก็บไว้บนคลาวด์ก็พอ

  • การกำหนดตำแหน่งแบบ absoluteเพิ่งทำได้ใน CSS2 (1998)
    เว็บไซต์ Space Jam ใช้เลย์เอาต์แบบตารางผ่าน align, valign, colspan, rowspan

    • ขอบคุณ แก้ส่วนที่ผิดแล้วและระบุที่มาไว้แล้ว ที่ยังคงมุกไว้ก็เพื่อบริบทที่ต่อเนื่องกัน
    • ตารางพวกนี้เรนเดอร์ต่างกันตามการตั้งค่าเบราว์เซอร์ ขนาดหน้าจอ และฟอนต์
      นั่นแหละคือสภาพดั้งเดิมของเว็บ เป็นไฮเปอร์เท็กซ์ที่ถูกตีความ

  • สงสัยว่าได้ลองทดสอบแบบนี้หรือยัง
    คือคำนวณรัศมีวงโคจรของดาวแต่ละดวง แล้วใช้สคริปต์ unit testตรวจว่าดาวแต่ละดวงอยู่บนวงโคจรอย่างถูกต้องหรือไม่

    • เวลาใช้ LLM กับงานซับซ้อน ถ้าโชคดีก็อาจจบได้ในครั้งเดียว แต่ส่วนใหญ่ต้องอาศัยคำสั่งที่ชัดเจนและการทดสอบซ้ำ ๆ
      สุดท้ายหลายครั้งทำเองยังเร็วกว่าเฝ้าดูแล LLM ต่อไปเรื่อย ๆ
    • ไม่ได้ลองทดสอบแบบนั้น แต่น่าสนใจดี เพียงแต่ Claude หรือไลบรารีมักแยกแยะระดับพิกเซลได้ไม่ดี เลยยาก
    • สรุปแล้วเราก็เหมือนสร้าง ‘ภาษาการเขียนโปรแกรมแบบภาษาอังกฤษล้วน’ ขึ้นมา โดยใช้ไฟฟ้า 10% ของโลกกับเซมิคอนดักเตอร์ 40%
    • ถ้าเอเจนต์สามารถตรวจสอบผลลัพธ์เองได้ ก็จะวนซ้ำได้เร็ว แต่ถ้าทำไม่ได้ก็แปลว่ามีอะไรผิดอยู่ ถึงอย่างนั้นโปรเจกต์นี้ก็เจ๋งมาก

  • มีคนคิดว่าอาจเอาHTML ต้นฉบับของเว็บไซต์ป้อนเข้า Claude ตรง ๆ แล้วให้มัน “ถอดรหัส” ก็ได้
    เว็บไซต์มีขนาดเล็ก เลยดูเหมือนน่าจะทำได้สบาย
    โค้ดต้นฉบับกับผลลัพธ์ที่เรนเดอร์ออกมาไม่เหมือนกัน แต่ก็น่าจะเป็นความต่างที่ Claude พอจัดการได้
    สุดท้ายแล้วการสร้างขึ้นใหม่อาจเป็นแนวทางที่ดีกว่าการทำสำเนาก็ได้

    • “HTML ต้นฉบับ” ก็คือซอร์สโค้ดนั่นเอง ดูเหมือนการพัฒนาเว็บสมัยนี้จะทำให้คนรุ่นใหม่สับสนกันพอสมควร
    • ถ้ามี HTML ต้นฉบับอยู่แล้ว ก็ไม่จำเป็นต้องผ่านกระบวนการแบบนี้เลย
    • HTML ต้นฉบับนี้ยาวประมาณ 7,000 ตัวอักษร หรือราว 2,000 Claude tokens ถือว่าจัดการได้สบาย
    • เว็บไซต์ Space Jam สร้างด้วยตารางและการแบ่งภาพโดยไม่มี CSS

  • น่าสนใจดีที่เอาเว็บไซต์ Space Jam มาใช้เป็นbenchmark ของ LLM
    Claude ทำได้เกือบถูก แต่ลำดับผิดไป และเป็นส่วนที่มนุษย์แก้เองได้
    ส่วนตัวฉันชอบ GitHub Copilot มากกว่า เพราะถูกกว่าและเชื่อมกับ GitHub ได้ดีกว่า

    • แต่ถ้านักพัฒนามือใหม่มองไม่ออกว่าผลลัพธ์มันผิด ก็จะกลายเป็นปัญหา ความล้มเหลวแบบนี้อาจเกิดซ้ำในที่อื่นได้ด้วย
    • ประเด็นของบทความนี้คือ Claudeมั่นใจเกินไปกับการสร้างซ้ำระดับพิกเซล
    • ฉันเองก็ไม่ได้ลองหลายรอบนัก จริง ๆ แล้วการกู้ HTML จากสกรีนช็อตอย่างเดียวเป็นข้อจำกัดที่ไม่สมจริง
    • ถ้าเครื่องมือยังต้องพึ่งผู้ใช้มาตรวจสอบและแก้ไข แบบนั้นก็ไม่ใช่เครื่องมือที่ดี

  • Claudeไม่เก่งเรื่องใช้สกรีนช็อต
    แม้จะเป็นโมเดลมัลติโหมด แต่จุดแข็งก็ยังเป็นการประมวลผลข้อความ

    • มันแปลงภาพเป็นsemantic vector space ไม่ใช่ pixel grid ทำให้ข้อมูลระดับพิกเซลหายไป
      วิธีที่ถูกต้องคือให้ Claude สร้างเครื่องมือประมวลผลภาพของตัวเองขึ้นมา แล้วใช้เครื่องมือนั้นคำนวณพิกัดและรันทดสอบ
      แบบนี้จะได้ทั้งความเสถียรในการวนซ้ำและประสิทธิภาพที่ดีกว่ามาก
    • แม้แต่ในข้อความเอง การเข้าใจโครงสร้างแบบ 2D ก็ยังยาก เช่น ถ้าให้วาดวงกลม ASCII artด้วยรัศมีที่แม่นยำ มันก็มักทำได้ไม่ดี

  • ฉันเองก็เคยลองใช้ Claude กับการทดสอบภาพของคอมโพเนนต์ Storybook แต่ผลลัพธ์ไม่ดีนัก
    เลยลองผสม vision mode ของ Playwright กับ Codex แทน แต่สุดท้ายลูปการตรวจสอบเชิงภาพก็ยังล้มเหลว
    เขียนเรื่องนี้ไว้ในบล็อกแล้ว