OpenAI는 놀랍게도 코드 축소 작업에 능숙합니다.

영감을 얻기 위해 인터넷을 검색하던 중 흥미로운 구성 요소를 발견했습니다.

ASCII 아트가 실행되는 블록이 멋있다고 생각했지만 어떻게 구현했는지 잘 이해가 되지 않아 소스코드를 살펴보기 시작했습니다.

일을 할 것 같은 코드가 축소되어 있는 것을 발견했습니다.

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 };
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  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  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;:,^`'. .:â–‘â–’â–“â–ˆ"],
    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  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  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에 "코드 설명"을 요청했습니다. 응답은 다음과 같습니다.

제공된 코드는 상당히 복잡하지만, 코드를 좀 더 이해하기 쉬운 형식으로 나누어 다양한 부분과 기능을 설명하겠습니다.

개요

이 코드는 특히 React 애플리케이션의 컨텍스트에서 JavaScript를 사용하여 여러 기능과 구성 요소를 정의합니다. 이는 아마도 ASCII 아트 또는 미리 정의된 세트의 문자를 사용하여 일종의 시각적 효과와 같은 동적 텍스트 콘텐츠를 생성하는 작업을 다룹니다. 또한 이벤트 처리, 성능 타이밍 및 HTML 콘텐츠 변환을 위한 유틸리티 기능이 포함되어 있습니다.

주요 구성 요소 및 기능

1. 캐릭터 세트 선택:

``자바스크립트
const { 바닥: ra, 절대: ​​KE, 최소: QE } = 수학;
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;

   - This part of the code imports some common Math functions (`floor`, `abs`, and `min`) and defines two sets of characters, stored in `O5`. 
   - Based on the current time (`Date.now() % 3`), it selects one of these sets (`G7`) to use later.
   - The length of the selected character set is stored in `V5`.

2. **Dynamic Character Selection Function:**


    ```javascript
   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 함수의 목적은 코드에서 직접적으로 명확하지 않지만, 이번 계산에 사용된 맞춤 함수인 것 같습니다.

1. 동적 콘텐츠 표시를 위한 React 구성 요소(tT):

``자바스크립트
const tT = () => {
const e = j.useRef(null);
const [t, n] = j.useState({ 높이: null, 너비: null });
j.useEffect(() => {
함수 r() {
n({ 높이: window.innerHeight, 너비: window.innerWidth });
}
if (창 유형 n({ 높이: window.innerHeight, 너비: window.innerWidth });
window.addEventListener("resize", r);
반환() => 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);
반환() => 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" } }) });

};

   - This is a React component that sets up an interval to periodically update the content of a `div` element (`e.current`) with dynamically generated characters.
   - It calculates the number of columns (`s`) and rows (`o`) based on the window size and then fills the `div` with characters generated by the `eT` function.
   - The effect runs at a specified frames per second (`JE.fps`).

"TypeScript에서 동등한 코드를 구현하고 이를 사람이 읽을 수 있게 만들어 달라"고 요청한 결과 다음과 같은 응답을 받았습니다.

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<htmldivelement>(null);
  const [size, setSize] = useState<size>({ 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  {
      clearInterval(intervalId);
    };
  }, [size]);

  return (
    <div ref="{textRef}" style="{{" height: overflow: whitespace: width:></div>
  );
};

export default () => {
  return <asciiartgenerator></asciiartgenerator>;
};
</size></htmldivelement>

놀랍게도 반응이 좋을 뿐 아니라 가독성도 매우 좋습니다.

위의 구성요소가 실제로 작동하는 모습은 다음과 같습니다.

출력을 비교하면 LLM 응답이 몇 가지 구현 세부 사항을 간과한 것처럼 보이지만 여전히 배울 수 있는 충분한 구현입니다. 확실히 이전에 고려하지 않았던 깔끔한 사용 사례입니다!

위 내용은 OpenAI는 놀랍게도 코드 축소 작업에 능숙합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!