“本文轉載自https://glama.ai/blog/2024-08-29-reverse-engineering-minified-code-using-openai”

? 在瀏覽互聯網尋找靈感時，我發現了一個看起來很有趣的組件：

https://reactive.network/hackathon

我覺得帶有運行 ASCII 藝術的區塊看起來很酷，但我不太明白它是如何實現的，于是我開始查看源代碼。

我找到了看起來可以完成這項工作的代碼，但它被精簡化了。

const { floor: ra, abs: KE, min: QE } = Math,    O5 = ["reactive.network REACTIVE.NETWORK", "$@B%8&WM#*oahkbdpqwmZO0QLCJUYXzcvunxrjft/|()1{}[]?-_+~<>i!lI;:,^`'. .:a–‘a–’a–“a–?"],    G7 = Date.now() % 3 ? O5[1] : O5[0],    V5 = G7.length,    JE = { fps: 60 };function eT(e, t, n, r) {    const i = t.time * 8e-5,        s = QE(t.cols, t.rows),        o = t.metrics.aspect * 0.2,        l = { x: ((4 * (e.x - t.cols / 6.25)) / s) * o, y: (5 * (e.y - t.rows / 4)) / s },        u = ra(KE(YE(l) - i) * V5 + (ra(e.x / 1) % 2) * 2) % V5;    return G7[u];}const tT = () => {    const e = j.useRef(null),        [t, n] = j.useState({ height: null, width: null });    return (        j.useEffect(() => {            function r() {                n({ height: window.innerHeight, width: window.innerWidth });            }            if (typeof window < "u") return n({ height: window.innerHeight, width: window.innerWidth }), window.addEventListener("resize", r), () => window.removeEventListener("resize", r);        }, []),        j.useEffect(() => {            const r = e.current;            if (!r) return;            const i = 12,                s = ra(t.width / i) * 1.6,                o = ra(t.height / i),                l = { aspect: s / o },                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]),        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" } }) })    );};function nT(e) {    return Math.cos(e.x * e.x - e.y * e.y);}const { floor: ia, abs: rT, min: iT } = Math,    D5 = ["reactive.network REACTIVE.NETWORK", "$@B%8&WM#*oahkbdpqwmZO0QLCJUYXzcvunxrjft/|()1{}[]?-_+~<>i!lI;:,^`'. .:a–‘a–’a–“a–?"],    X7 = Date.now() % 3 ? D5[1] : D5[0],    F5 = X7.length,    sT = { fps: 60 };function oT(e, t, n, r) {    const i = t.time * 8e-5,        s = iT(t.cols, t.rows),        o = t.metrics.aspect * 0.2,        l = { x: ((4 * (e.x - t.cols / 6.25)) / s) * o, y: (5 * (e.y - t.rows / 4)) / s },        u = ia(rT(nT(l) - i) * F5 + (ia(e.x / 1) % 2) * 2) % F5;    return X7[u];}const aT = () => {    const e = j.useRef(null),        [t, n] = j.useState({ height: null, width: null });    return (        j.useEffect(() => {            function r() {                n({ height: window.innerHeight, width: window.innerWidth });            }            if (typeof window < "u") return n({ height: window.innerHeight, width: window.innerWidth }), window.addEventListener("resize", r), () => window.removeEventListener("resize", r);        }, []),        j.useEffect(() => {            const r = e.current;            if (!r) return;            const i = 12,                s = ia(t.width / i) * 1.6,                o = ia(t.height / i),                l = { aspect: s / o },                u = setInterval(() => {                    let c = "";                    for (let d = 0; d < o; d++) {                        for (let f = 0; f < s; f++) c += oT({ x: f, y: d }, { cols: s, rows: o, metrics: l, time: Date.now() });                        c += ``;                    }                    r.textContent = c;                }, 1e3 / sT.fps);            return () => clearInterval(u);        }, [t]),        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" } }) })    );},

通常情況下，我會通過閱讀最小化的代碼來理解其實現（或者查找 .map 文件來還原原始代碼）。不過，我意識到我從未嘗試過讓 ChatGPT 幫我做這件事...... 于是，我復制了上述所有代碼，并要求 ChatGPT “解釋代碼”。以下是回復：

提供的代碼非常復雜，但我會將其分解為更易于理解的格式，解釋其不同部分及其功能。
概述該代碼使用 JavaScript 定義了幾個函數和組件，特別是在 React 應用程序的上下文中。它處理使用預定義字符集中的字符生成一些動態文本內容，可能是 ASCII 藝術或某種視覺效果。此外，它還包括用于事件處理、性能計時和 HTML 內容轉換的實用函數。
關鍵部件和功能字符集選擇：
const { floor: ra, abs: KE, min: QE } = Math;const O5 = ["reactive.network REACTIVE.NETWORK", "$@B%8&WM#*oahkbdpqwmZO0QLCJUYXzcvunxrjft/|()1{}[]?-_+~<>i!lI;:,^`'. .:a–‘a–’a–“a–?"];const G7 = Date.now() % 3 ? O5[1] : O5[0];const V5 = G7.length;這部分代碼導入了一些常見的數學函數（floor、、abs和min），并定義了兩組字符，存儲在中O5。
根據當前時間（Date.now() % 3），它會選擇其中一個集合（G7）以供稍后使用。
所選字符集的長度存儲在中V5。
動態角色選擇功能：
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函數根據輸入位置（e.x，e.y）和當前時間（t.time）生成一個字符。
它使用一些縱橫比計算來調整位置，并根據G7位置和時間的組合選擇一個字符。
YE從代碼中無法直接看出該函數的用途，但它似乎是此計算中使用的自定義函數。
tT用于顯示動態內容的React 組件（ ）：
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元素的內容（ ）。e.current
它根據窗口大小計算列數（s）和行數（ ），然后用函數生成的字符填充。odiveT
該效果以每秒指定的幀數運行（JE.fps）。

我繼續詢問“用 TypeScript 實現等效代碼并使其易于閱讀”，并得到了以下答復：

import React, { useEffect, useRef, useState } from 'react';
const selectedCharacterSet =  "$@B%8&WM#*oahkbdpqwmZO0QLCJUYXzcvunxrjft/|()1{}[]?-_+~<>i!lI;:,^`'. .:a–‘a–’a–“a–?";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 });    };
    // Initial size setting    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); // 60 fps
    return () => {      clearInterval(intervalId);    };  }, [size]);
  return (    
  );};
export default () => {  return ;};

令我驚訝的是，響應不僅足夠好，而且可讀性也很強。

上述組件的實際運行情況如下：

比較輸出結果，LLM 響應似乎忽略了一些實現細節，但它仍然是一個值得學習的好實現。這絕對是一個我以前從未考慮過的巧妙用例！

注意：如果想第一時間收到 KiCad 內容推送，請點擊下方的名片，按關注，再設為星標。

常用合集匯總：

和 Dr Peter 一起學 KiCad

KiCad 8 探秘合集

KiCad 使用經驗分享

KiCad 設計項目（Made with KiCad）

常見問題與解決方法

KiCad 開發筆記

審核編輯 黃宇