OpenAI कोड पुनर्स्थापन (Unminifying) में चौंकाने वाला प्रदर्शन दिखाता है

(glama.ai)

3 पॉइंट द्वारा GN⁺ 2024-08-30 | 1 टिप्पणियां | WhatsApp पर शेयर करें

इंटरनेट ब्राउज़ करते समय एक दिलचस्प ASCII आर्ट कंपोनेंट मिला। यह शानदार दिख रहा था, लेकिन इसे कैसे लागू किया गया है, यह समझना कठिन था
सोर्स कोड देखा, लेकिन कोड संक्षिप्त (Minified) किया हुआ था

संक्षिप्त कोड का उदाहरण

कोड का एक हिस्सा इस प्रकार था:

const { floor: ra, abs: KE, min: QE } = Math,  
  O5 = ["reactive.network REACTIVE.NETWORK", "$@B%8&WM#*oahkbdpqwmZO0QLCJUYXzcvunxrjft/|()1{}[]?-_+~i!lI;:,^`'. .:â–‘â–’â–“â–ˆ"],  
  G7 = Date.now() % 3 ? O5[1] : O5[0],  
  V5 = G7.length,  
  JE = { fps: 60 };

ChatGPT से कोड समझाने का अनुरोध

ChatGPT से "कोड समझाइए" कहा गया
ChatGPT का उत्तर:

दिया गया कोड काफी जटिल है, लेकिन मैं इसके हर हिस्से और उसके काम करने के तरीके को आसान भाषा में समझाता हूँ।

अवलोकन

JavaScript का उपयोग करके कई फ़ंक्शन और कंपोनेंट परिभाषित किए गए हैं
React एप्लिकेशन में डायनामिक टेक्स्ट कंटेंट उत्पन्न किया जाता है
ASCII आर्ट या पहले से परिभाषित कैरेक्टर सेट का उपयोग करके विज़ुअल इफ़ेक्ट बनाया जाता है

मुख्य कंपोनेंट और फ़ंक्शन

कैरेक्टर सेट चयन:

const { floor: ra, abs: KE, min: QE } = Math;  
const O5 = ["reactive.network REACTIVE.NETWORK", "$@B%8&WM#*oahkbdpqwmZO0QLCJUYXzcvunxrjft/|()1{}[]?-_+~i!lI;:,^`'. .:â–‘â–’â–“â–ˆ"];  
const G7 = Date.now() % 3 ? O5[1] : O5[0];  
const V5 = G7.length;

Math से फ़ंक्शन लिए जाते हैं और दो कैरेक्टर सेट परिभाषित किए जाते हैं
मौजूदा समय के आधार पर एक कैरेक्टर सेट चुना जाता है
चुने गए कैरेक्टर सेट की लंबाई को संग्रहीत करने वाला मान रखा जाता है

डायनामिक कैरेक्टर चयन फ़ंक्शन:

function eT(e, t, n, r) {  
  const i = t.time * 8e-5;  
  const s = QE(t.cols, t.rows);  
  const o = t.metrics.aspect * 0.2;  
  const l = { x: ((4 * (e.x - t.cols / 6.25)) / s) * o, y: (5 * (e.y - t.rows / 4)) / s };  
  const u = ra(KE(YE(l) - i) * V5 + (ra(e.x / 1) % 2) * 2) % V5;  
  return G7[u];  
}

eT फ़ंक्शन इनपुट स्थिति और मौजूदा समय के आधार पर कैरेक्टर बनाता है
स्थिति को समायोजित करके कैरेक्टर सेट से एक कैरेक्टर चुना जाता है

डायनामिक कंटेंट दिखाने वाला React कंपोनेंट (tT):

const tT = () => {  
  const e = j.useRef(null);  
  const [t, n] = j.useState({ height: null, width: null });  
  j.useEffect(() => {  
    function r() {  
      n({ height: window.innerHeight, width: window.innerWidth });  
    }  
    if (typeof window < "u") {  
      n({ height: window.innerHeight, width: window.innerWidth });  
      window.addEventListener("resize", r);  
      return () => window.removeEventListener("resize", r);  
    }  
  }, []);  
  j.useEffect(() => {  
    const r = e.current;  
    if (!r) return;  
    const i = 12;  
    const s = ra(t.width / i) * 1.6;  
    const o = ra(t.height / i);  
    const l = { aspect: s / o };  
    const u = setInterval(() => {  
      let c = "";  
      for (let d = 0; d < o; d++) {  
        for (let f = 0; f < s; f++) c += eT({ x: f, y: d }, { cols: s, rows: o, metrics: l, time: Date.now() });  
        c += `  `;  
      }  
      r.textContent = c;  
    }, 1e3 / JE.fps);  
    return () => clearInterval(u);  
  }, [t]);  
  return a.jsx("div", { style: { position: "absolute", top: 0, left: 0, width: "100%", height: "100%" }, children: a.jsx("div", { ref: e, style: { width: "100%", height: "100%", whiteSpace: "pre", overflow: "hidden" } }) });  
};

यह React कंपोनेंट समय-समय पर div एलिमेंट की सामग्री को डायनामिक रूप से जनरेट किए गए कैरेक्टरों से अपडेट करता है
विंडो के आकार के आधार पर कॉलम और रो की संख्या की गणना करता है और div को कैरेक्टरों से भर देता है

TypeScript में बदला गया कोड

ChatGPT से TypeScript में बदला गया कोड माँगा गया

ChatGPT का उत्तर:

import React, { useEffect, useRef, useState } from 'react';  
const selectedCharacterSet = "$@B%8&WM#*oahkbdpqwmZO0QLCJUYXzcvunxrjft/|()1{}[]?-_+~i!lI;:,^`'. .:â–‘â–’â–“â–ˆ";  
const characterSetLength = selectedCharacterSet.length;  

const calculateCharacter = (  
  x: number,  
  y: number,  
  cols: number,  
  rows: number,  
  aspect: number,  
  time: number,  
): string => {  
  const timeFactor = time * 0.000_08;  
  const size = Math.min(cols, rows);  
  const aspectRatio = aspect * 0.2;  
  const position = {  
    x: ((4 * (x - cols / 6.25)) / size) * aspectRatio,  
    y: (5 * (y - rows / 4)) / size,  
  };  
  const index = Math.floor(  
    Math.abs(  
      Math.cos(position.x * position.x - position.y * position.y) - timeFactor,  
    ) * characterSetLength + (Math.floor(x) % 2) * 2,  
  ) % characterSetLength;  
  return selectedCharacterSet[index];  
};  

type Size = {  
  height: null | number;  
  width: null | number;  
};  

const AsciiArtGenerator: React.FC = () => {  
  const textRef = useRef(null);  
  const [size, setSize] = useState({ height: null, width: null });  

  useEffect(() => {  
    const handleResize = () => {  
      setSize({ height: window.innerHeight, width: window.innerWidth });  
    };  
    handleResize();  
    window.addEventListener('resize', handleResize);  
    return () => {  
      window.removeEventListener('resize', handleResize);  
    };  
  }, []);  

  useEffect(() => {  
    const element = textRef.current;  
    if (!element || !size.width || !size.height) return undefined;  

    const cols = Math.floor(size.width / 12) * 1.6;  
    const rows = Math.floor(size.height / 12);  
    const aspectRatio = cols / rows;  

    const intervalId = setInterval(() => {  
      let content = '';  
      for (let y = 0; y < rows; y++) {  
        for (let x = 0; x < cols; x++) {  
          content += calculateCharacter(x, y, cols, rows, aspectRatio, Date.now());  
        }  
        content += '\n';  
      }  
      element.textContent = content;  
    }, 1_000 / 60);  

    return () => {  
      clearInterval(intervalId);  
    };  
  }, [size]);  

  return (  

  );  
};  

export default () => {  
  return ;  
};

GN⁺ की संक्षिप्त समीक्षा

यह लेख संक्षिप्त किए गए कोड को समझने और पुनर्स्थापित करने के तरीके को समझाता है
यह दिखाता है कि ChatGPT का उपयोग करके जटिल कोड को कैसे समझाया जा सकता है और उसे TypeScript में कैसे बदला जा सकता है
यह कोड पुनर्स्थापन और समझ को आसान बनाने के लिए AI टूल्स के उपयोग का तरीका सुझाता है
समान कार्यक्षमता वाले प्रोजेक्ट्स में Prettier और UglifyJS शामिल हैं

1 टिप्पणियां

GN⁺ 2024-08-30

Hacker News राय

HumanifyJS के लेखक ने एक LLM-आधारित टूल विकसित किया है। यह टूल AST स्तर पर LLM का उपयोग करता है ताकि unminification के बाद भी कोड काम करता रहे
- HumanifyJS GitHub लिंक
JS minification यांत्रिक और अपेक्षाकृत सरल है। इसे हाथ से करना झंझट भरा है, लेकिन transformation खुद सीमित होता है, इसलिए कुछ नोट्स के साथ identifiers को ट्रैक करते हुए इसे पढ़ा जा सकता है
सामान्य unminification या unobfuscation अब भी एक अनसुलझी समस्या है। पहले जानबूझकर obfuscate किए गए प्रोग्राम लिखे गए थे, लेकिन ChatGPT उन्हें सतही स्तर पर भी समझ नहीं पाया था
- उदाहरण: 160-byte लंबे Brainfuck interpreter को GPT-4 ने समझाने की कोशिश की, लेकिन वह मूल कोड से बिल्कुल मेल नहीं खाता था
- उदाहरण कोड लिंक
कुछ developers minification का उपयोग obfuscation के लिए करते हैं, इसलिए उन्हें यह बात पसंद नहीं आ सकती। ColdFusion के पुराने versions में दिया गया code "encryption" टूल एक कमजोर algorithm था, फिर भी कुछ लोग उसे सुरक्षित मानकर इस्तेमाल करते थे
शीर्षक में OpenAI की जगह ChatGPT या gpt-4 का उपयोग करना अधिक उपयुक्त हो सकता है
यह काम इंसानों से बेहतर बौद्धिक प्रदर्शन का उदाहरण है। LLM unminification को समझते हैं, और इस खास विषय में इंसानों से बेहतर हैं
LLM text transformation में बेहतरीन हैं। यही उनकी मूल ताकत है
लगभग एक साल पहले GPT का उपयोग करके malware obfuscation समझने की कोशिश की गई थी, लेकिन सीधे कोड का विश्लेषण करना बेहतर था। हाल में फिर कोशिश करने पर यह कुछ हद तक समझ में आया
- उदाहरण: इसने page load का पता लगाने, computation करने और malicious site पर redirect करने वाले logic को पहचान लिया
- रिपोर्ट लिंक
LLM का उपयोग करके जटिल कोड को अधिक पढ़ने योग्य बनाना बहुत मुक्तिदायक लगता है। कभी-कभी यह details छोड़ देता है, लेकिन उन्हें सीधे जाँचा जा सकता है
- जब कोड का उद्देश्य समझ में आ जाता है, लेकिन यह नहीं समझ आता कि उसे किसी खास तरीके से क्यों लिखा गया, तब LLM से पूछकर नई insight मिल सकती है
- उपयोग उदाहरण लिंक
अगर unminified कोड minified कोड से मेल नहीं खाता, तो उसकी उपयोगिता काफी घट जाती है। कई मामलों में कोड चलाने के बाद भी अंतर की जाँच नहीं की जा सकती
- encoding समस्या से जुड़ा थ्रेड लिंक
जब वेबसाइट के calculation algorithm को जानना हो, तो minified JS को ChatGPT में डालकर उसे आसानी से समझा जा सका। यह कल्पना की जा सकती है कि भविष्य में LLM पूरे SAAS app को clone कर सकेंगे
- उदाहरण: HubSpot clone बनाने के लिए LLM browser के साथ interact कर सकता है, UI का analysis कर सकता है, और backend architecture सुझा सकता है
- AI भविष्य में एक शक्तिशाली deflationary factor होगा

OpenAI कोड पुनर्स्थापन (Unminifying) में चौंकाने वाला प्रदर्शन दिखाता है

संक्षिप्त कोड का उदाहरण

ChatGPT से कोड समझाने का अनुरोध

अवलोकन

मुख्य कंपोनेंट और फ़ंक्शन

TypeScript में बदला गया कोड

GN⁺ की संक्षिप्त समीक्षा

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

1 टिप्पणियां

Hacker News राय