OpenAI ist erschreckend gut darin, Code zu entminifizieren

Als ich im Internet nach Inspiration suchte, stieß ich auf eine interessant aussehende Komponente.

Ich fand den Block mit der laufenden ASCII-Grafik cool, konnte aber nicht ganz herausfinden, wie er implementiert wurde, also begann ich, mir den Quellcode anzusehen.

Ich habe den Code gefunden, der so aussah, als würde er den Job erledigen, aber er war minimiert.

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 < "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;:,^`'. .:â–‘â–’â–“â–ˆ"],
    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" } }) })
    );
},

Normalerweise würde ich einfach den minimierten Code durchlesen, um die Implementierung zu verstehen (oder nach einer .map-Datei suchen, um den ursprünglichen Code wiederherzustellen). Mir wurde jedoch klar, dass ich nie versucht hatte, ChatGPT zu bitten, dies für mich zu tun ... Also habe ich den gesamten oben genannten Code kopiert und ChatGPT gebeten, „den Code zu erklären“. Hier ist die Antwort:

Der bereitgestellte Code ist ziemlich komplex, aber ich werde ihn in ein verständlicheres Format aufteilen und seine verschiedenen Teile und ihre Funktionalitäten erläutern.

Überblick

Der Code definiert mehrere Funktionen und Komponenten mithilfe von JavaScript, insbesondere im Kontext einer React-Anwendung. Dabei geht es um die Generierung dynamischer Textinhalte, vermutlich ASCII-Grafiken oder irgendeiner Art von visuellen Effekten, unter Verwendung von Zeichen aus einem vordefinierten Satz. Darüber hinaus enthält es Hilfsfunktionen für die Ereignisbehandlung, das Leistungs-Timing und die HTML-Inhaltskonvertierung.

Schlüsselkomponenten und Funktionen

1. Zeichensatzauswahl:

„Javascript
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;

   - 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];
   }

• Die eT-Funktion generiert ein Zeichen basierend auf der Eingabeposition (e.x, e.y) und der aktuellen Zeit (t.time).
• Es passt die Position mithilfe einiger Berechnungen des Seitenverhältnisses an und wählt einen Charakter aus G7 basierend auf einer Kombination aus Position und Zeit aus.
• Der Zweck der YE-Funktion geht nicht direkt aus dem Code hervor, aber es scheint eine benutzerdefinierte Funktion zu sein, die in dieser Berechnung verwendet wird.

1. React Component (tT) zur Anzeige dynamischer Inhalte:

„Javascript
const tT = () => {
const e = j.useRef(null);
const [t, n] = j.useState({ height: null, width: null });
j.useEffect(() => {
Funktion 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" } }) });

};

   - 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`).

Ich habe daraufhin gefragt, ob „äquivalenter Code in TypeScript implementiert und für Menschen lesbar gemacht werden soll“ und habe die folgende Antwort erhalten:

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 < 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 (
    <div
      ref={textRef}
      style={{
        height: '100%',
        overflow: 'hidden',
        whiteSpace: 'pre',
        width: '100%',
      }}
    />
  );
};

export default () => {
  return <AsciiArtGenerator />;
};

Zu meiner Überraschung ist die Antwort nicht nur gut genug, sondern auch sehr gut lesbar.

Hier ist die oben genannte Komponente in Aktion.

Beim Vergleich der Ergebnisse sieht es so aus, als hätte die LLM-Antwort einige Implementierungsdetails übersehen, aber es ist immer noch eine Implementierung, die gut genug ist, um daraus zu lernen. Auf jeden Fall ein toller Anwendungsfall, an den ich noch nie gedacht habe!

Das obige ist der detaillierte Inhalt vonOpenAI ist erschreckend gut darin, Code zu entminifizieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!