- Saat menjelajahi internet, ditemukan sebuah komponen ASCII art yang menarik. Terlihat keren, tetapi sulit memahami bagaimana cara implementasinya
- Kode sumbernya diperiksa, tetapi kodenya sudah diperkecil (minified)
Contoh kode yang diperkecil
- Sebagian kodenya seperti berikut:
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 };
Meminta ChatGPT menjelaskan kode
- ChatGPT diminta untuk "menjelaskan kodenya"
- Respons ChatGPT:
Kode yang diberikan cukup kompleks, tetapi saya akan menjelaskan setiap bagian dan fungsinya agar mudah dipahami.
Ringkasan
- Mendefinisikan beberapa fungsi dan komponen menggunakan JavaScript
- Menghasilkan konten teks dinamis dalam aplikasi React
- Membuat efek visual menggunakan ASCII art atau kumpulan karakter yang telah ditentukan
Komponen dan fungsi utama
- Pemilihan kumpulan karakter:
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;
- Mengambil fungsi-fungsi dari
Mathdan mendefinisikan dua kumpulan karakter - Memilih kumpulan karakter berdasarkan waktu saat ini
- Menyimpan panjang kumpulan karakter yang dipilih
- Fungsi pemilihan karakter dinamis:
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];
}
- Fungsi
eTmenghasilkan karakter berdasarkan posisi input dan waktu saat ini - Menyesuaikan posisi lalu memilih karakter dari kumpulan karakter
- Komponen React untuk menampilkan konten dinamis (
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" } }) });
};
- Komponen React ini secara berkala memperbarui konten elemen
divdengan karakter yang dihasilkan secara dinamis - Menghitung jumlah kolom dan baris berdasarkan ukuran jendela, lalu mengisi
divdengan karakter
Kode yang dikonversi ke TypeScript
- Meminta ChatGPT untuk mengonversi kode tersebut ke TypeScript
- Respons 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 ; };
Ringkasan GN⁺
- Tulisan ini menjelaskan cara memahami dan memulihkan kode yang telah diperkecil
- Menunjukkan proses menggunakan ChatGPT untuk menjelaskan kode yang kompleks dan mengonversinya ke TypeScript
- Menyajikan cara memanfaatkan alat AI untuk membantu pemulihan dan pemahaman kode
- Proyek dengan fungsi serupa antara lain
PrettierdanUglifyJS
1 komentar
Komentar Hacker News
Penulis HumanifyJS telah mengembangkan alat berbasis LLM. Alat ini menggunakan LLM pada level AST untuk memastikan kode tetap berfungsi setelah di-unminify
Minification JS bersifat mekanis dan relatif sederhana. Meskipun merepotkan jika dilakukan manual, transformasinya sendiri terbatas sehingga tetap bisa dibaca dengan melacak identifier lewat beberapa catatan
Unminification atau unobfuscation secara umum masih merupakan masalah yang belum terpecahkan. Dulu ada yang menulis program yang sengaja diobfuscate, dan ChatGPT bahkan tidak bisa memahaminya di level permukaan
Sebagian developer mungkin tidak senang karena mereka menggunakan minification untuk obfuscation. Alat "enkripsi" kode yang disediakan pada versi lama ColdFusion juga pernah dipakai oleh orang-orang yang menganggapnya aman, padahal algoritmenya lemah
Mungkin lebih tepat memakai ChatGPT atau gpt-4 di judul daripada OpenAI
Ini adalah contoh kemampuan intelektual yang melampaui manusia. LLM memahami unminification, dan pada topik khusus ini lebih unggul daripada manusia
LLM sangat unggul dalam transformasi teks. Itu memang kekuatan inti mereka
Sekitar setahun lalu, ada yang mencoba memakai GPT untuk deobfuscation malware, tetapi menganalisis kodenya langsung ternyata lebih baik. Saat dicoba lagi baru-baru ini, model itu sudah bisa memahami sampai tingkat tertentu
Menggunakan LLM untuk membuat kode kompleks lebih mudah dibaca terasa sangat membebaskan. Kadang detail memang terlewat, tetapi itu bisa diverifikasi sendiri
Jika kode hasil unminify tidak sesuai dengan kode yang sudah diminify, kegunaannya akan turun drastis. Dalam banyak kasus, perbedaannya tidak bisa diperiksa setelah kode dijalankan
Saat ingin mengetahui algoritma perhitungan di sebuah situs web, ada yang bisa dengan mudah memahaminya dengan memasukkan JS yang sudah diminify ke ChatGPT. Mudah membayangkan masa depan ketika LLM bisa mengkloning seluruh aplikasi SaaS