- İnternette gezinirken ilginç bir ASCII art bileşeni bulundu. Harika görünüyordu ama nasıl uygulandığını anlamak zordu
- Kaynak kodu kontrol edildi ancak kod minify edilmişti
Minify edilmiş kod örneği
- Kodun bir kısmı şöyleydi:
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 };
ChatGPT'den kod açıklaması istendi
- ChatGPT'ye "kodu açıklar mısın" diye soruldu
- ChatGPT'nin yanıtı:
Verilen kod oldukça karmaşık, ancak her bölümü ve işlevini anlaşılması kolay şekilde açıklayacağım.
Genel bakış
- JavaScript kullanılarak birden fazla fonksiyon ve bileşen tanımlanıyor
- Bir React uygulamasında dinamik metin içeriği üretiliyor
- ASCII art veya önceden tanımlanmış karakter kümeleriyle görsel efekt oluşturuluyor
Ana bileşenler ve fonksiyonlar
- Karakter kümesi seçimi:
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;
Mathfonksiyonları alınıyor ve iki karakter kümesi tanımlanıyor- Geçerli zamana göre bir karakter kümesi seçiliyor
- Seçilen karakter kümesinin uzunluğu saklanıyor
- Dinamik karakter seçme fonksiyonu:
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];
}
eTfonksiyonu, giriş konumu ve geçerli zamana göre karakter üretiyor- Konum ayarlanıyor ve karakter kümesinden bir karakter seçiliyor
- Dinamik içerik gösteren React bileşeni (
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" } }) });
};
- Bu React bileşeni,
divöğesinin içeriğini periyodik olarak dinamik üretilmiş karakterlerle güncelliyor - Pencere boyutuna göre sütun ve satır sayısını hesaplıyor ve
divi karakterlerle dolduruyor
TypeScript'e dönüştürülmüş kod
- ChatGPT'den TypeScript'e dönüştürülmüş kod istendi
- ChatGPT'nin yanıtı:
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 ; };
GN⁺ özeti
- Bu yazı, minify edilmiş kodu anlama ve eski haline getirme yöntemini açıklıyor
- ChatGPT kullanılarak karmaşık kodun açıklanması ve TypeScript'e dönüştürülmesi süreci gösteriliyor
- Kodu eski haline getirmeye ve anlamaya yardımcı olmak için yapay zeka araçlarının nasıl kullanılabileceği ortaya konuyor
- Benzer işlevlere sahip projeler arasında
PrettierveUglifyJSbulunuyor
1 yorum
Hacker News görüşü
HumanifyJS’in yazarı, LLM tabanlı bir araç geliştirmiş. Bu araç, kodun unminification sonrasında da çalışmaya devam etmesini sağlamak için AST düzeyinde LLM kullanıyor
JS minification mekanik ve nispeten basit. Elle yapmak zahmetli olsa da, dönüşümün kendisi sınırlı olduğu için birkaç not alarak tanımlayıcıları takip edip okunabiliyor
Genel unminification ya da unobfuscation ise hâlâ çözülmemiş bir problem. Geçmişte kasıtlı olarak obfuscate edilmiş programlar yazılmıştı ve ChatGPT bunları yüzeysel düzeyde bile anlayamamıştı
Bazı geliştiriciler obfuscation için minification kullandığından bundan rahatsız olabilir. ColdFusion’ın eski sürümlerinde sunulan kod "şifreleme" aracı zayıf bir algoritma kullanmasına rağmen, bunu güvenli sanıp kullanan insanlar vardı
Başlıkta OpenAI yerine ChatGPT ya da gpt-4 kullanmak daha uygun olabilir
Bu çalışma, insanı aşan entelektüel performansa bir örnek. LLM’ler unminification’ı anlıyor ve bu özel konuda insanlardan daha başarılı
LLM’ler metin dönüşümünde çok iyi. Bu onların temel güçlü yanı
Yaklaşık bir yıl önce, GPT kullanarak kötü amaçlı yazılım obfuscation’ını çözmeye çalışılmış ama kodu doğrudan analiz etmek daha iyi sonuç vermişti. Yakın zamanda tekrar denendiğinde ise belli ölçüde anlayabildiği görülmüş
LLM kullanarak karmaşık kodu daha okunabilir hâle getirmek oldukça özgürleştirici hissettiriyor. Bazen ayrıntıları kaçırsa da, bu doğrudan kontrol edilebiliyor
Unminified kod minified kodla eşleşmiyorsa faydası büyük ölçüde azalıyor. Çoğu durumda kodu çalıştırdıktan sonra farkları doğrulamak mümkün olmuyor
Bir web sitesinin hesaplama algoritmasını öğrenmek istendiğinde, minified JS’yi ChatGPT’ye verip bunu kolayca anlamak mümkün olmuştu. LLM’lerin gelecekte tüm bir SaaS uygulamasını klonlayabileceği bir senaryo hayal edilebilir