1996 की Space Jam वेबसाइट को Claude से दोबारा बनाने में विफलता का दस्तावेज़

 (j0nah.com)
1 पॉइंट द्वारा GN⁺ 2025-12-08 | 1 टिप्पणियां | WhatsApp पर शेयर करें
  • 1996 में Warner Brothers की Space Jam official website को AI मॉडल Claude से दोबारा बनाने का प्रयास किया गया।
  • Claude को स्क्रीनशॉट और original image assets दिए गए, लेकिन जो HTML बना, वह original साइट से layout-wise मेल नहीं खाता था।
  • हमने coordinate अनुमान, grid overlay तथा pixel तुलना tools जैसे कई सहायक टूल जोड़े, फिर भी Claude अभी भी सटीक स्थान गणना करने में असमर्थ रहा।
  • Claude ने अपने परिणाम को “perfect” बताया, लेकिन वास्तविकता में त्रुटियाँ बढ़ती रहीं और उसने अपने ही आउटपुट पर अति-आत्मविश्वास दिखाया।
  • यह प्रयोग AI की visual precision की सीमा और self-evaluation error को उजागर करता है, और दिखाता है कि शुरुआती वेब डिज़ाइन की सादगी में भी पुनर्निर्माण की जटिलता छिपी है।

1996 Space Jam वेबसाइट का संक्षिप्त परिचय

  • Warner Brothers ने 1996 में फिल्म Space Jam के प्रमोशन के लिए बनाई वेबसाइट को single HTML page और GIF background पर आधारित रखा।
    • सरल रंगों, table-based structure और 200KB से कम के कुल आकार के साथ।
    • यह अभी भी spacejam.com/1996 पर उपलब्ध है।
  • प्रयोगकर्ता ने यह जांचने की कोशिश की कि क्या Claude केवल screenshots देखकर इस साइट को recreate कर सकता है।

प्रयोग की तैयारी

  • Claude को दिए गए संसाधन
    • वेबसाइट का पूर्ण स्क्रीनशॉट
    • original image assets directory
  • Claude के internal behavior को ट्रैक करने के लिए proxy-based API traffic logging system बनाया गया।
    • सभी prompts, responses और tool calls (Read, Write, Bash commands आदि) को लॉग किया गया।
    • हर प्रयास पर traffic.log फाइल बनाई गई।

Part 1: Claude the Realist

  • पहले प्रयास में Claude ने planet arrangement और button positions को लगभग दोहराया, लेकिन orbital shape अलग था।
    • मूल साइट में elliptical arrangement थी, जबकि Claude ने इसे समानतापूर्ण diamond shape में रखा।
  • Claude ने परिणाम को “perfect” बताकर दावा किया कि उसकी analysis और placement सही है।
  • बाद में Claude से reasoning steps साफ-साफ लिखने को कहा गया, लेकिन
    • analysis चरण में बताए गए numerical values को HTML निर्माण में लागू नहीं किया गया।
  • pixel-level सवालों पर Claude ने जवाब दिया कि
    • “मैं सटीक coordinates माप नहीं सकता”, “सिर्फ visual estimation कर सकता हूँ।”
    • 5-pixel accuracy के लिए उसका confidence केवल 15/100 था।
  • Claude ने मान लिया कि उसके पास exact pixel measurement की क्षमता नहीं है; इसके बाद प्रयोगकर्ता ने tool extension की कोशिश की।

Part 2: Claude the Unreliable Narrator

  • Claude की measurement सीमा को सुधारने के लिए grid overlay, coordinate labels, color comparison tools, और screenshot comparison viewer जोड़े गए।
  • Claude ने grid को लगभग “सजावट” की तरह उपयोग किया, फिर भी coordinates को बार-बार गलत समझा।
    • उदाहरण: center (961,489), Planet B-Ball (850,165) जैसे मान दिए, लेकिन वास्तविक स्थिति अलग थी।
  • कई iterations में Claude ने gradual सुधार का दावा किया, लेकिन वास्तविकता में errors accumulate हुईं।
    • 1st (50px grid): थोड़ा सा shift
    • 2nd (25px grid): पूरी orbit लगभग 20px अंदर खिसकी
    • 3rd (5px grid): सूक्ष्म adjustments की दोहराई गई कोशिश
    • 4th: “precision tuning complete” घोषित
  • वास्तविकता में planet orbit radius में 150~200px की कमी थी और पूरा layout अभी भी compressed रहा।
  • Claude ने बार-बार “almost perfect” कहा, लेकिन अपने generated output को आधार बनाकर गलत अनुमान लगाए।
  • प्रयोगकर्ता ने Anthropic paper “Language Models (Mostly) Know What They Know” का हवाला दिया:
    • मॉडल अक्सर अपनी ही generated text को external input मानकर overconfidence दिखाते हैं।
    • यह उसी pattern से मेल खाता है जहाँ Claude ने अपनी HTML को “correct answer” मान लिया, और बाद के सुधार विकृत हो गए।

Part 3: Claude the Blind

  • Claude की visual सीमा की जांच के लिए vision encoder की structural constraints मानी गईं।
    • इमेज को 16×16 pixel ब्लॉकों में tokenized करने से fine geometric details खो जाती हैं।
    • Claude के लिए “planet”, “positional relation” जैसे semantic cues समझना संभव था, लेकिन सटीक coordinates नहीं।
  • Paper “An Image is Worth 16x16 Words” के आधार पर अनुमान था कि
    • Claude दृश्य जानकारी को patch-level compression में पकड़ता है।
  • इसकी जाँच के लिए 2x zoomed screenshot दिया गया, लेकिन
    • Claude ने zoom scale को नहीं माना और proportional relations सही नहीं रख पाया।
  • परिणामतः Claude का conceptual understanding सही होने के बावजूद geometric reproduction में कमी रही।
    • “यह planet ऊपर है” जैसे वर्णन सही थे, लेकिन HTML layout अभी भी misaligned रहा।

निष्कर्ष और अनसुलझे प्रयास

  • Claude ने Space Jam वेबसाइट की visual structure को पहचान लिया, लेकिन pixel-level accurate recreation में विफल रहा।
  • विफलता के कारण:
    • pixel-level मापन में असमर्थता
    • अपने ही परिणाम पर अधिक भरोसा
    • visual encoding resolution की सीमा
  • प्रस्तावित आगे के प्रयास
    1. स्क्रीन को चार भागों में बाँटकर प्रत्येक को अलग से recreate करने और फिर merge करने का तरीका।
    2. spatial reasoning-centric prompt engineering experiments.
    3. zoom tools और screenshot usage क्षमता को मजबूत करना।
  • यह प्रयोग AI की visual precision limits और शुरुआती वेब डिज़ाइन की जटिलता दोनों दिखाता है।
  • 1996 की सरल दिखने वाली webpage आधुनिक AI के लिए आज भी reproducibility benchmark बनी हुई है।

संबंधित पढ़ाई

1 टिप्पणियां

 
GN⁺ 2025-12-08
Hacker News की राय

  • 90 के दशक के आखिर में ऐसे ही वेबसाइट खुद बनाते थे, उस नज़रिए से मैंने Space Jam वेबसाइट को Opus 4.5 में डालकर देखा
    मूल लेखक ने इसे “absolute positioning से बनी single HTML page” कहा था, लेकिन असल में यह table-based layout था। CSS न होने के दौर में यही स्वाभाविक था
    table-based तरीके से दोबारा बनाने की मेरी कोशिश का नतीजा इस screenshot में है

    • धन्यवाद। गलती वाले हिस्से को strikethrough से ठीक कर दिया और स्रोत भी जोड़ दिया
      कमेंट्स में मज़ाक चलता रहा, इसलिए संदर्भ के लिए उसे वैसा ही रहने दिया
    • उस दौर में डिज़ाइन को स्लाइस करके tables में export करने की याद अब भी है
    • मैंने भी GoLive से web development शुरू किया था, और pages को tables से बनाना अभी भी याद है

  • Claude जैसे LLM अभी भी layout की बारीक implementation में कमज़ोर हैं
    लेकिन दिलचस्प बात यह है कि मैंने Claude की मदद से Linux compositor(Hyprland) में gamma color profile support जोड़ने वाला C program कुछ ही मिनटों में बना लिया
    Claude द्वारा बनाया गया code पहली कोशिश में ही compile हो गया, और .icc file पढ़कर VCGT निकालकर amdgpu driver तक भेजने का काम भी कर लिया
    हालांकि ICC parsing में endianness issue मुझे खुद ठीक करना पड़ा

    • संभावना ज़्यादा है कि Claude ने खुद code नहीं लिखा, बल्कि कहीं से code लाकर उसमें बदलाव किया। अगर इंसान ऐसा करता तो उसे plagiarism कहा जाता
    • LLM visual details में कमज़ोर इसलिए हैं क्योंकि pixel-level data training में शामिल नहीं होता। ज़्यादातर UI datasets में screenshots होते ही नहीं या इकट्ठे नहीं किए जाते
    • लेकिन यह फीचर Wayland compositor को ही क्यों संभालना चाहिए, यह सवाल है। Apple ने तो 90 के दशक में ही ColorSync से इसे हल कर लिया था

  • यह उन मामलों में से था जहाँ Claude लगभग सही था, लेकिन थोड़ा कम पड़ गया
    मुझे 20 साल पुराने Mac OS के abandonware ढूँढकर उन्हें Apple Silicon पर चलने लायक बनाना शौक है
    उदाहरण के लिए, मैंने Claude के साथ jpegview को तीन code fixes में चला लिया, और बाद में video playback तथा नए layout features भी जोड़ दिए
    ऐसे mini projects browser window एक खोलकर Claude code instance के साथ करने के लिए बिल्कुल ठीक रहते हैं

    • लोग “लगभग ठीक था” को जैसे कोई दुर्लभ बात मानते हैं, लेकिन असल में ऐसा काफ़ी बार होता है
    • वैसे मैंने हाल ही में Mac इस्तेमाल करना शुरू किया है और Phoenix Slides काफ़ी अच्छा लगा

  • “इसे सिर्फ Claude से ही restore करना चाहिए” वाली बात पर, दूसरा तरीका भी है
    उदाहरण के लिए इस archive file को डाउनलोड करके cloud में रख सकते हैं

  • Absolute positioning CSS2 (1998) में जाकर संभव हुआ था
    Space Jam वेबसाइट align, valign, colspan, rowspan का इस्तेमाल करने वाला table layout था

    • धन्यवाद। गलती वाले हिस्से को ठीक कर दिया और स्रोत भी जोड़ दिया। मज़ाक चलता रहा, इसलिए संदर्भ के लिए उसे वैसा ही रहने दिया
    • ऐसे tables browser settings, screen size और fonts के हिसाब से अलग render होते थे
      वही तो web का असली रूप था, interpreted hypertext

  • सोच रहा हूँ क्या इस तरह का test किया गया था
    जैसे ग्रहों की orbital radius निकालकर, हर ग्रह सही orbit पर है या नहीं, यह unit test script से verify करना

    • जटिल कामों में LLM का उपयोग करते समय, कभी-कभी किस्मत अच्छी हो तो एक बार में हो जाता है, लेकिन ज़्यादातर स्पष्ट निर्देश और बार-बार testing चाहिए होती है
      आखिरकार LLM को लगातार संभालने से बेहतर कई बार खुद कर लेना तेज़ होता है
    • ऐसा test नहीं किया, लेकिन दिलचस्प है। हालांकि Claude या library pixel-level distinction ठीक से नहीं कर पाए, इसलिए मुश्किल था
    • आखिर में हमने बस एक ‘plain English programming language’ बना ली है। वह भी दुनिया की 10% बिजली और 40% semiconductors खर्च करके
    • अगर agent खुद result verify कर सकता है, तो तेज़ी से iterate करना संभव है। नहीं कर सकता, तो कुछ गड़बड़ है। फिर भी यह project सच में शानदार है

  • मुझे लगा कि वेबसाइट का original HTML जैसा का तैसा Claude में डालकर उससे “decode” करवाया जा सकता है
    साइट छोटी है, इसलिए यह पूरी तरह संभव लगता है।
    original code और rendering result अलग हैं, लेकिन Claude शायद उस फ़र्क़ को संभाल सके
    आखिर में copy से ज़्यादा recreation बेहतर तरीका हो सकता है

    • “Original HTML” ही तो source code है। लगता है आज का web development नई पीढ़ी को उलझा रहा है
    • अगर original HTML है, तो फिर यह सब करने की ज़रूरत ही नहीं
    • यह HTML source लगभग 7,000 characters का है, यानी Claude tokens में करीब 2,000, इसलिए आराम से process हो सकता है
    • Space Jam वेबसाइट CSS के बिना tables और image slicing से बनी थी

  • Space Jam वेबसाइट को LLM benchmark की तरह इस्तेमाल करना दिलचस्प लगा
    Claude लगभग सही पहुँचा, लेकिन क्रम ग़लत था, और वह हिस्सा इंसान सीधे ठीक कर सकता है
    मेरी निजी पसंद GitHub Copilot है क्योंकि वह सस्ता है और GitHub integration भी अच्छा है

    • लेकिन अगर कोई शुरुआती developer ग़लत नतीजे को पहचान ही न सके, तो वही समस्या है। ऐसी विफलता कहीं और भी दोहराई जा सकती है
    • इस लेख का मुख्य बिंदु यह है कि Claude pixel-level reproduction को लेकर ज़रूरत से ज़्यादा आत्मविश्वासी है
    • मैंने भी कई बार कोशिश नहीं की। सच कहूँ तो सिर्फ screenshot से HTML restore करना अवास्तविक constraint था
    • अगर किसी tool को user की verification और fixes चाहिए हों, तो वह अच्छा tool नहीं है

  • Claude की screenshot उपयोग क्षमता कमज़ोर है
    यह multimodal model तो है, लेकिन इसकी ताकत अब भी text processing ही है

    • यह image को pixel grid नहीं बल्कि semantic vector space में बदल देता है, इसलिए pixel information खो जाती है
      सही तरीका यह होगा कि Claude से उसका अपना image processing tool बनवाया जाए, और उसी से coordinates निकाले जाएँ और tests चलाए जाएँ
      ऐसा करने पर iteration stability और efficiency दोनों काफ़ी बेहतर हो जाते हैं
    • text में भी 2D structure समझना मुश्किल होता है। उदाहरण के लिए ASCII art circle को सही radius के साथ बनवाने को कहें, तो यह अच्छा नहीं कर पाता

  • मैंने भी Claude से Storybook component visual testing करवाने की कोशिश की थी, लेकिन नतीजे अच्छे नहीं थे
    उसकी जगह Playwright के vision mode और Codex को जोड़कर देखा, लेकिन visual validation loop आखिरकार विफल रहा
    इससे जुड़ी बात blog में लिखी है