Skip to main content
Glama
Sign In

OpenAI is shockingly good at unminifying code

Written by on .

engineering
openai
ai use cases
  1. Overview
    1. Key Components and Functions

      While browsing the Internet for inspiration, I came across an interesting-looking component.

      Reactive Network Hackathon

      I thought the block with the running ASCII art looked cool, but I couldn't quite figure out how it was implemented, so I started looking at the source code.

      I found the code that looked like it might be doing the job, but it was 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 }; 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" } }) }) ); },

      Usually, I would just powerthrough reading the minimized code to understand the implementation (or look for a .map file to restore the original code). However, I realized that I never tried asking ChatGPT to do it for me... So I copied all of the above code and asked ChatGPT to "explain the code". Here is the response:

      The provided code is quite complex, but I'll break it down into a more understandable format, explaining its different parts and their functionalities.

      Overview

      The code defines several functions and components using JavaScript, specifically in the context of a React application. It deals with generating some dynamic text content, presumably ASCII art or some kind of visual effect using characters from a predefined set. Additionally, it includes utility functions for event handling, performance timing, and HTML content conversion.

      Key Components and Functions

      1. Character Set Selection:
        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:
        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]; }
        • The eT function generates a character based on the input position (e.x, e.y) and the current time (t.time).
        • It adjusts the position using some aspect ratio calculations and selects a character from G7 based on a combination of the position and time.
        • The purpose of YE function isn't directly clear from the code, but it seems to be a custom function used in this calculation.
      3. React Component (tT) for Displaying Dynamic Content:
        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" } }) }); };
        • 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).

      I followed up asking to "implement equivalent code in TypeScript and make it human readable" and got the following response:

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

      To my surprise, the response is not only good enough, but it is also very readable.

      Here is the above component in action:

      Czcjf1{_+lI`'░▒@BWWo*khdbpdqdpbdhkooMMBB▓▒.';l~+}1tjvcJCOOqwdwpZZJYxf[+^:MbJn}<`░&*ddqbh8▓:+jJo▓i}uUmwpOJf?.WC/l:#kqk*░!fO█ifUwqmc)`on+▓#qb#.]Q@-nZqZn_%U<▓kdh.]m |JpOu!*| mQQYYunt/{}_+i!:,..::▓▒$█B$B$B█$▓█:░..,,l!++[}|/xnXYLLZZqwdwqZZCUnj{-;.%o0X|]I'@&hbqdd*&::]fQa:l1xCOpwmYx?,WO/~:8bdp*@I1QWI1YOdZC/i&L]`Mkqo$<n#:fJpmJ{'w(.Mqk8!n8<cZpU)▒L< pmw00JJzcxr//{{??~~!iIl:;,:^:,;:IIi!~<--}{||rrccUJ00mmpwdwqZZCJur)]!,█&qLx)<;░@*apdqkoB░I-xL*▒i}nUmwpOCr{,@Zn+'8oqdhB'[c*.[n0wpLu_:wf;$kdd%`|Z.?XOdQni8v<Bhq*:{Z')Qwmn>af. dqpmwOZLLYYvvrrtt)(}{][-?_?_?_?-[]{}))//rrvvYYLLOOwmpwdwqZZCJvn|{<I:@awXr[<`░8#bbqdb#8.:]fQa░I{jJ0pwwCv{i$bu[^█abqhM <xw▒>jUwqmz)^Mc-░Mpdo░~XMitQwqX).q1'*dd%;uM~nmwL) L-@ qwpqpwqZmQ0CCXYvcxnjrtf|t(/(/(t|ftrjnxvvXXCJ0QZZqwpqdwqZZLCzut)_>`░WkQz|[l`█%ohpdqhoB░I-jJa$I?rzOmdm0c/> aJ1!▓Wddp#$l1QW;{X0pmLf+$m);%hqh&:(q░}cmqOr~&X>█kdh:?O░)UpZz~8x;M ZZqwpqpwqmwOZLQJCYUzXvcuvnvxunvncvzcYXCJQLO0mZqwpqpwqZmLLXcj/[_;'@MqQn/_!.▒&#bbqdb#&:,-/Jd$`-|XLwqp0Uf]`80r<'&aqdk%.?nk░-jLmp0X},az+.*bq*▓+vW;fJpmC)^pt`&pbM:to;xQdQj^d{.h LQZZqwpqdwpmqZm0OLQCLUCYJXUXUXJYJULJQLO0mZwmpwpqpwqZmQQYXxj1]i;:@opUu)?I'█%ohpdqka8█,<|cpW'>(nLOpwwJu}!$bv{,▓*kqk*▒I/L%:(cZwqJr<▒Zt:$kdd8')0▒_c0dOc_▓J]▒*qh@~z@_XZpU1▓C<$d YUQQmZqwpqdwpwqmwOm0ZQOL0LQCQL0L0QO0mOwZqmpwdqpwqmm00UYux|1_>`.8*mCx|_!.▒&#kbqddoM█.>}u0#▒![xXOmdmOct~'#0/~.%kdqa8`_vd.~rJqqmz(,WX[ &ddh█lxb^1JmpLjIMni%hq*░{O.1Cwwv_Wu,&q uvUJ00mmqwpqdwpwpmqZwZmOm0Z0Z0mOmOwZqmqwpwdqpwpmw0OCJcvf/[-l,▒BaqUu)]l^▓B*apdqbkM% ;]tCd$`-|zCwwpOCx1;▓pz[;$Mddp#$l1LM:[cQpw0x]:kj<█*qb*._UWifQwqY(.d(,Mbp&`fkItOqZjlb| *q frzXCCOOwmpwpqdqpwpwqmqmqZwZwZwmqmqwpwpwdqpwpmwOZLLXzxj){+i`.%#wLut?<^.B&akqdqha%█,>(uw#.l{jU0qqqQY/-.&Qr~'8oqdb8:~fw@>|UOdmCt<@Z);%aqkW^{O█-nZqmv]▓O] oddBIvM~nmwQ(`O[▓aq (/nuYUQQZOwmpwpqdqpwpwpwpwqmqwpwpwpwpqdqpwpmqZmQQUUvut|[-!::$*bLXt1<I.▓&#kbqdpa#$:l-jUkB,~/uLOpwwJv1>▒aY(l:Mhqdh@']vh:-jLmdOY)IMJ]`Wkqa%l/d.{cwqOx+8U~▒hdk▓<J@]cqwJ}░J+Bkq {)jrzzCC00mZqmpwpqdqdwpwpwpwpwpwpwdqdqpwpwqZm0OCCXzxr(1_<,.$&bmYn)?l^▒@#oddqdd*W▒'<}v0#▓l?jz0mdwZYx]IBdu},▓*kqbo▓:)YM'}n0wpQc[^az+.*bqo$<xo`(Yqw0fi#c!$bdh:-0▒1YpmY-$ci&bp ]}/fuvUUQQZOwmqwpwpqdqdqpwpwpwpqdqdqpwpwqmwOZQQJUcvjt{[<!':%#q0vj}+:'█%*apdqbkM8:,_(Xm&.>}nYZmdmOzj_,&mr?'$abqk#░l/L8,)vOwpLu-.dn>░odq#▒_vM;tJpwL|;hx;Bddo }w (JpZz~8nIMdd _](/nuXYLLO0mZqmpwpwdqdqdqdqdqdqdqdwpwpmqZwOOLLYYunt|[?i; ▒WaZCn/?<^ @8ohpdqbkWB ;?/JpB.~1uUZwdm0ct~'#Ot+ BhbqhM.if0@I(cZwqCn+:qrl▓adpM:?X8ljCpmC),bj,%pd*'1p'/CpOv>Wj:#db +?)|xnzXCC00mZwmpwpwpqdqdqdqdqdqdqpwpwpmqZm0OCLYXnx/(]_l::█MhOJr|->`.B&ahpdqkh&@.I[fCd@'_)vJmwpZQv/<.*Q/~.%hdqhW >rZ$l/zmwqJx~░mfI█hdpW.]Y%!rLpmJ1^pt^8pd#`(b`tLpOu!#f,*db +-)|rxzXCC00mZwmqwpwpwdqdqdqdqdqdwpwpwpmqZm0OCCXXnx/(]_l::█#k0Ur|_i`:B&ahqdqkh&@'I[fLb$`_(cJmwpZQu|> oQ|~.%kdqaW <rZ█l/XmwqJr<▒ZfI█hdpW.[UBirLpmJ1`qt`&pd#^(k^fLpOu!#t,*db +?)|xnzXCC00mZwmpwpwpqdqdqdqdqdqdqpwpwpmqZm0OCLYXnx/(]_l::█MhOJr|->`.B&ahpdqkh&@.I[fCd@'_)vJmwpZQv/<.*Q/~.%hdqhW >rZ$l/zmwqJx~░mfI█hdpW.]Y%!rLpmJ1^pt^8pd#`(b`tLpOu!#f,*db _](/nuXYLLO0mZqmpwpwdqdqdqdqdqdqdqdwpwpmqZwOOLLYYunt|[?i; ▒WaZCn/?<^ @8ohpdqbkWB ;?/JpB.~1uUZwdm0ct~'#Ot+ BhbqhM.if0@I(cZwqCn+:qrl▓adpM:?X8ljCpmC),bj,%pd*'1p'/CpOv>Wj:#db ]}/fuvUUQQZOwmqwpwpqdqdqpwpwpwpqdqdqpwpwqmwOZQQJUcvjt{[<!':%#q0vj}+:'█%*apdqbkM8:,_(Xm&.>}nYZmdmOzj_,&mr?'$abqk#░l/L8,)vOwpLu-.dn>░odq#▒_vM;tJpwL|;hx;Bddo }w (JpZz~8nIMdd {)jrzzCC00mZqmpwpqdqdwpwpwpwpwpwpwdqdqpwpwqZm0OCCXzxr(1_<,.$&bmYn)?l^▒@#oddqdd*W▒'<}v0#▓l?jz0mdwZYx]IBdu},▓*kqbo▓:)YM'}n0wpQc[^az+.*bqo$<xo`(Yqw0fi#c!$bdh:-0▒1YpmY-$ci&bp (/nuYUQQZOwmpwpqdqpwpwpwpwqmqwpwpwpwpqdqpwpmqZmQQUUvut|[-!::$*bLXt1<I.▓&#kbqdpa#$:l-jUkB,~/uLOpwwJv1>▒aY(l:Mhqdh@']vh:-jLmdOY)IMJ]`Wkqa%l/d.{cwqOx+8U~▒hdk▓<J@]cqwJ}░J+Bkq frzXCCOOwmpwpqdqpwpwqmqmqZwZwZwmqmqwpwpwdqpwpmwOZLLXzxj){+i`.%#wLut?<^.B&akqdqha%█,>(uw#.l{jU0qqqQY/-.&Qr~'8oqdb8:~fw@>|UOdmCt<@Z);%aqkW^{O█-nZqmv]▓O] oddBIvM~nmwQ(`O[▓aq uvUJ00mmqwpqdwpwpmqZwZmOm0Z0Z0mOmOwZqmqwpwdqpwpmw0OCJcvf/[-l,▒BaqUu)]l^▓B*apdqbkM% ;]tCd$`-|zCwwpOCx1;▓pz[;$Mddp#$l1LM:[cQpw0x]:kj<█*qb*._UWifQwqY(.d(,Mbp&`fkItOqZjlb| *q YUQQmZqwpqdwpwqmwOm0ZQOL0LQCQL0L0QO0mOwZqmpwdqpwqmm00UYux|1_>`.8*mCx|_!.▒&#kbqddoM█.>}u0#▒![xXOmdmOct~'#0/~.%kdqa8`_vd.~rJqqmz(,WX[ &ddh█lxb^1JmpLjIMni%hq*░{O.1Cwwv_Wu,&q LQZZqwpqdwpmqZm0OLQCLUCYJXUXUXJYJULJQLO0mZwmpwpqpwqZmQQYXxj1]i;:@opUu)?I'█%ohpdqka8█,<|cpW'>(nLOpwwJu}!$bv{,▓*kqk*▒I/L%:(cZwqJr<▒Zt:$kdd8')0▒_c0dOc_▓J]▒*qh@~z@_XZpU1▓C<$d ZZqwpqpwqmwOZLQJCYUzXvcuvnvxunvncvzcYXCJQLO0mZqwpqpwqZmLLXcj/[_;'@MqQn/_!.▒&#bbqdb#&:,-/Jd$`-|XLwqp0Uf]`80r<'&aqdk%.?nk░-jLmp0X},az+.*bq*▓+vW;fJpmC)^pt`&pbM:to;xQdQj^d{.h qwpqpwqZmQ0CCXYvcxnjrtf|t(/(/(t|ftrjnxvvXXCJ0QZZqwpqdwqZZLCzut)_>`░WkQz|[l`█%ohpdqhoB░I-jJa$I?rzOmdm0c/> aJ1!▓Wddp#$l1QW;{X0pmLf+$m);%hqh&:(q░}cmqOr~&X>█kdh:?O░)UpZz~8x;M dqpmwOZLLYYvvrrtt)(}{][-?_?_?_?-[]{}))//rrvvYYLLOOwmpwdwqZZCJvn|{<I:@awXr[<`░8#bbqdb#8.:]fQa░I{jJ0pwwCv{i$bu[^█abqhM <xw▒>jUwqmz)^Mc-░Mpdo░~XMitQwqX).q1'*dd%;uM~nmwL) L-@ pmw00JJzcxr//{{??~~!iIl:;,:^:,;:IIi!~<--}{||rrccUJ00mmpwdwqZZCJur)]!,█&qLx)<;░@*apdqkoB░I-xL*▒i}nUmwpOCr{,@Zn+'8oqdhB'[c*.[n0wpLu_:wf;$kdd%`|Z.?XOdQni8v<Bhq*:{Z')Qwmn>af. mQQYYunt/{}_+i!:,..::▓▒$█B$B$B█$▓█:░..,,l!++[}|/xnXYLLZZqwdwqZZCUnj{-;.%o0X|]I'@&hbqdd*&::]fQa:l1xCOpwmYx?,WO/~:8bdp*@I1QWI1YOdZC/i&L]`Mkqo$<n#:fJpmJ{'w(.Mqk8!n8<cZpU)▒L< Czcjf1{_+lI`'░▒@BWWo*khdbpdqdpbdhkooMMBB▓▒.';l~+}1tjvcJCOOqwdwpZZJYxf[+^:MbJn}<`░&*ddqbh8▓:+jJo▓i}uUmwpOJf?.WC/l:#kqk*░!fO█ifUwqmc)`on+▓#qb#.]Q@-nZqZn_%U<▓kdh.]m |JpOu!*| n/(]_!I' ▓$&Mhkqw00JCXYczvzucvzcYXJJ0Qwwkk#W@█..;l+-)|xnYU00wwpwpZZJYx/?>'█omct_l:@*hpdpa#▓'+|Jb▒;{rCOpwmYr_'*L)!█Mddd&░+rd▒-jQmpQv-.wf;$kdbB,fq'{UmpCt,h/:Mbp8,x*<nmwL1.C [<i^.▓@M*dq0LXXnntt(({1[}][?[]}[1{()ttxxzXLQwpo#B$ `l>]}tjcXLQwmpqpZZJYr|-!.BbQx1i^█8hbqdb#%'!(zbB;?xYmwpOJf? MU(;▒obqhW.+vb.-vQpwQj+@O{^Wkqo$<uMIjCpZY]:Q[░*qa$-J░[Jwwv+# ^░█W*pmCUux/|}[__>>ll:;,:`,`,`:^;:lI>i++[[(|rnYJZqa#@▓`:<-)/ncCLmmpqpZZJXj(+I░&qJt]; %Mbdqbh%▒l]vZ%`?tU0pwmUr_`*C1l$#pdb8 ]v*'{uZwqUfl%Y[.Wpdo.-CB_nZqZx+&Xi$bdo')b,jQdQf' MdwCYxj1{_+!l,^ .░:█▓@█B$%@%@%$B$@▓█░░ ^^Il~+}{trzUZp*&▒ Ii]1jnUCZZpqpmZJXj)~;█MOz)+`▒Wopdqa#▓`-f0*.<tcOmdZLr['WJ|;▒obqh&`-Yo,}X0dZJ(I*X~:odp&.)O:]XZpLj:at:Mbp%;uW_vwwJ] Uxf{[<i:, .▓█BBW&#Mo#aohohakahohoa*oM#&W%%██:.^,!>?}trXCqk&$.:~]/jzUOZpqpmZJXj)<,@oLu[i $*hqdd*8.!|Xh▓i{cCqqqCv[;W0(i▓Mpdb%.[zM^)cmqwX(^*n<$oqk&:|b.(YqwC1'm1.#qh@_J░}Cwwn [<!^'░▒B%MMo*khbkpbpdqdqdqdqdqdqdqdpbpkdhkooMM%%▓▒.`li?{fnJOhM▓ l~1/vXQOqwpmmCXf1>`%hJr-I▒%abqdk&█;?umB^[rCZpmOv);@Oji:#kqhW'-Y*:{YOdOY{^knl█kdb@;xh;|Qwqz}▓Q_▒kdh.[q`fLdQ .▓█8&**khdbqdqdqdqdqdpbpbpbpbpbpbpdqdqdqdqdqbdhkooW&$█ `l<[)nXZd&█`l?1xvCQwwdmmCXf1i'8dXt~,$&kdqka@ ~|Lo.~fzZwp0Y|<█pr+:&ddd&.?c#`)cmqmz1.hf!BaqaB>nMIrLpOc+@z<BkqM'fhixmw Woabbpdqdqdpbdhbah*o#*M#WM&M&MW#W*#o*hakhdbpdqdqdqbdaaMW$▓.^>_)fY0hW░`~]tnJLwwdwmCYf{!.Wqv(i'B#ddqh#▒:}ud@!{cLqqwUr+ kz-`&hqk#.~ch^}XOdZY}`dr;@bdk█izM>rOqZx<Mv;%pbWIx8~Xm bqdqdpbbah#*&WBB██░▒.:. '.`.`.` .. ▒░█▓BB&&##aabkpdqdqbdhaM&█▒^I_}rzZkB:I+(jXCmmdwwLYf{! #mn{I &*pdpo8.>tCW.?fJOpm0n{`WU1^@hdp#▓<rk.}vZqwX)'hf!%hqa$~c%>u0dQxl#f;MddB!Y@}Y dphh##88█▓. ^^ll<<-_[]{}){(1({)}{][--<~!l,, ▓▓%%##hhdbqdqddaa&%░ I<1fUZ*@`!}/cUZmpwwLYj{l.*Zr[:░MaqddM$:?cq▓l(vOwp0Y(iBZ|!█#pdh█Ifw:_vQpZJ1,kxI$bdk▓<Y&+nmqOflkf'MqkB+J:{ W&$█ .;I~+[{/txnzXCJ0QZOwmqmqmwZm00CCXXunt/{}_+lI'.▓█8&oobbqdqbdo*%$.:+}xUp#░,_1nX0ZpwqQUj{l.o0f?^▓#hqdk8░>)L*`_xUwqwJx+.du~ #kqa8:1O@+r0wqU/,*x>@aqa$~c%<vOdLj,h(`odb▓_O ^;<_{)rnYJZmbk#M%B▓█:░ .'.`.`.'..::▓▓BBWMhkwmCUux|1-~I,.░B8*obbqdqbk#W█.I~(xQbB.>]jvQOpqqQJr1l:aQt_'$okqba@.-rqB!1zQpwOv1,WY{`Bbdd& [Y%lfJpwQt!#z>▓kdb█izW~nmq0t;d| #qa▓[Z fxYLwd#W$▓ ';I><--[[1{()|(/(/(|)({1[}--<<II`.▒█&MbpQJuj1]>l.:@%*oddqdpha8@.;-(zO#█;+|nC0qqp0Jr1l:aL|~ @abqk*▓:1zo.-fCZdZCt~$w/i$*qbo░<ca:)JmpQn>BX-▓oqh%in&iu0dQj,k)'odk░] *W█░^;<~[}||rrvuXzUYCJLCQCQCQCQCLJCYUzXvvrr//{}+~I,.▒8#pZYv/{~!':B8ohpdqbb*W▓ !-jYd&.!{jUQqwpOCx)!:hC(<:%hdqhM.!tQ%,1uOwpQc[^aX_.MkqaBl/p:}vmqZu?$0] odd%;noirZqOfIb| #qa▒ <+{)frccJJQQZOwZqmpwpwpwpqdqdqdwpwpwpmqmwOZQ0JJzcxj(1-~;`▓BodLXt1~l.░8Whkqdqha8█`!1x0h▓,?|zCwwpOLn(!:hJ)>░8kdqa&'+uq▒>fYwqwUfi█0|:@kdd&.{C$<nQpZY}.m(.WpbM:/a:rQd0xIa|`odk czCLZOwmpwdqpwpmqZwOm0Z0OQOQOQO0Z0mOwZqmpwpqdwpwqZZLLXzxj1[>I ▓#kQXt{>;:█M*ddqdb#&░^+)Xw8 ~1uUmwpZQu(i:hJ1!▒&bdp*B:]Ya'-uCqwZv{'ou_░Mpda░<coI|LmpJt,afI&kqM (q,|Qwmx>oj'Mq qwpqpwqZm00CCYYccnurrtj/t|t|t|t/ftrjnncvYXCC0QmZqwpqpwqZZLCcu/)_i'▒MkLc(]I`█%ohqdqho@░l-rCo█l]rXOmdm0v|i.hU{l▓Wddp#█l)Q&I1X0pmLf~@Z);8hqh8;(p:}cwwOr<Wzi█bda:?Z:)UpZz<&r;# qOOCCzzxr||}[_+ii;;`^... ░.░.░ :. ^`;:!!++[[(|rrczJCOOwmpqpww0QYcf|->'▓*pYx[<`░8#bdqbkW@'i)vq&^~tv0mdmOct>.hU{l█MdddW▒<fq$~tCZdOX{,az~:odqM░?YB>nQpZX?▒L[▒*qh@+Y▓?Umqz]%zI ut/}]>!,`░▓%8*oddmZQQJCYUzYzYzUXJUQLZZpdao&8█▒'`li-](/nvUJOOqwdwqOOUzj|_!.@kOu|~;▒BohqdpoM▒^-tQa:l)nLZpwZzf~ hU}I$#pdb8.-nh:]x0wpLn+░Z/,Bbdb@;rb,)CmpU/'b(^#dp%;vM+uwwC}░Y :.▓&MbqQCcuft1{??~~!iIl:;,;,;,;:lIi!<<--{{/tnvJLwd*W█░^I+?(tvzLQmmpqpZOUzf)~;▓MmY|-,.8#ddqkaB:i}zw@^[fJOpwmYj+.aU};@*pdkB'[zM`1cZwwYt;&z?░Mqb*.?Q@-umqZr<Mcl@dd*`(h;x0dLt Qzn|)-+!I`':░$█%BW&#W*#o#a*a*a#o#*M#&W%%$$░░'';l~_1(xvLOk*$░:!?{jnUCZmpqpZOYv|[l.&dYf_I▒%akqdbM@^~jLM.+|XQpwwUx_'oJ};@*qdh@^)C%I/YwqZv}.bt!Baqh%!jo,tCpmY]:L]▒oqo▓[0.)QwZj l`.▓█88*#habkpbqdqdqdqdqdqdqdqdqdqdqdqdqdpkdhh**&&$█ 'Ii?{juLmo&:`<?|rXJZmpqpOQzx{~'@dCt?,:WopdpoW:I1cb$!{vCqqwJn?^*J};Boqda█;/O▓>rCpw0j+BQ['#bqM:[L▒-zZpLj:a/,#ddB!XB[Xqm #hhpdqdqdqbdkbah*oM#&M8&%&B8B&%&8W&#Mo*aokhdbqdqdqdpkk*#%B░ ;i[)uYwa@.l+)fXJZmpwqQJn|+:@aJj_:█&kdqko$._fZW,?xUwqqCv],#C{;Boqda▒ljw._vQpmC(Ioc>▒hddB;xhI/Qwwv?BU>$dd*^/*!vO dpkbooWWB@▒▒..,,ll<>_+?-[?[][?[-?+_<<!!::'.░░@@&Wookkpdqdqbbo*%@ ^>-/nQp8▒;~)jXCmwdwmJz/],▓kC/_'█*hqdk&▒!{Uh.<fXmwpQc};ML{;Boqbo░>ub`[XOdOX[.qt,%dda:-L$]cwwQ|,q).*qa█]O`| @█..;l+-{)jrczCLZZpphkoa#*M*M*#o*hhddmmLLXzxr(1?_!I' ▓$&Waaddqdqkk#W█:;<1jJwW▒I+|xJQqwpZ0cj?I$hY/>'%*pdp*%^+nm$I(vOwp0X1l&Q1;Boqb*.~zo:1UZpQu~█C[:#qbW:/h^tCpZz~%ui&bp8Iz% (tvY0mho8B░:`^ll<<-_[]{}1{){){1}{][--~~!l,^.:@%*aqZUzj|]_I,:▒8Wahpdqdda*B▓^!}fJq8:!?fvQOpwqQYf[:█dY{i░8kdqhM:l|JW'[xQmpOU(i%0);Baqb# _YM!/LmpCjIWu<$aqa$+z@+cZpC/.q[.hda 1 $▒`:<+}{/tnnzzUULC0LO0Z0mOmOmOm0Z0OQ0CLUJzznnft1{_~;,:█WowQcr1?l,░█W#kbqdpha8$`l}fLd@'+1uYZmdmOXr?;%pu}:▒#kqba@`]uk░+tCZdZJ/<BZ(IBaqbM'?C8<f0wqY|'k/;&kqM )m')Lwwv_&v;8pb% rxXYLLZOwmpwpqdwpwpmqmqZwZwZwZwZwmqmpwpwdqdwpmqZZQQYXnx|1_<, BMp0vj[~, @8ahpdqka8$`i1nZo:I}fYQqqqQUt]`%Ox+^%*pdb&░</m%!)YOpmLf+█w|lBaqkM`[0@_xOwwc}▒Z}.*dd%;n*>xmw0|^m{▒aq pwdwpmwOZLQUJzzuurrtf|/)|1(1(1()/|ftrjunzcUULLOOwmpwdwpmmQLXcj|]~, %oZUf{>:▒@*apdqka8▓:~tXb%,_fc0mdmOzf+'*Q|<░&bdp*B:}J*,[cQpw0r-▒q/!BaqkW^{Z▓?umqZn_BJ~▒kdk▒+L▓}XqmY_@u!W

      Comparing the outputs, it looks like LLM response overlooked a few implementation details, but it is still a good enough implementation to learn from. Definitely a neat use case I've not considered before!

      Update (2024-08-29): Initially, I thought that the LLM didn't replicate the logic accurately because the output was missing a few characters visible in the original component (e.g., ░▒▓█). However, a user on HN forum pointed out that it was likely a copy-paste error.

      Upon further investigation, I discovered that the original code contains different characters than what I pasted into ChatGPT. This appears to be an encoding issue, as I was able to get the correct characters after downloading the script. After updating the code to use the correct characters, the output is now identical to the original component.

      I apologize, GPT-4, for mistakenly accusing you of making mistakes.

      Written by Frank Fiegel (@punkpeye)