Tools/FileNameManager.html at main · AmiSan23/Tools · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>File Name Manager & Cleaner</title>
    <style>
        :root {
            --bg-color: #f4f7f6;
            --text-color: #333;
            --accent-color: #007bff;
        }
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
            background-color: var(--bg-color);
            color: var(--text-color);
            padding: 30px;
            max-width: 1100px;
            margin: 0 auto;
        }
        h2 { font-weight: 600; margin-bottom: 5px; }
        p.subtitle { color: #666; margin-bottom: 30px; font-size: 15px; }

        .container {
            display: flex;
            gap: 20px;
            margin-bottom: 30px;
        }
        .col {
            flex: 1;
            background: #fff;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.03);
        }
        .col h3 { margin-top: 0; font-size: 16px; color: #444; border-bottom: 2px solid #eee; padding-bottom: 10px;}

        textarea {
            width: 100%;
            height: 200px;
            padding: 12px;
            font-size: 14px;
            font-family: monospace;
            border: 1px solid #ccc;
            border-radius: 6px;
            box-sizing: border-box;
            resize: vertical;
            white-space: pre;
            overflow-wrap: normal;
            overflow-x: auto;
        }
        textarea:focus { outline: none; border-color: var(--accent-color); }

        button {
            background-color: var(--accent-color);
            color: #fff;
            border: none;
            padding: 10px 20px;
            font-size: 15px;
            border-radius: 6px;
            cursor: pointer;
            margin-top: 15px;
            font-weight: 500;
            transition: opacity 0.2s;
            width: 100%;
        }
        button:hover { opacity: 0.8; }
        .btn-process { background-color: #28a745; }

        #output {
            background: #fff;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.05);
            min-height: 150px;
        }

        /* Group Styles */
        .group { margin-bottom: 30px; }
        .group-title { font-size: 22px; font-weight: 600; margin-bottom: 12px; border-bottom: 1px solid #eee; padding-bottom: 5px; color: #111; }
        .item-row { display: flex; align-items: center; margin-left: 20px; margin-bottom: 8px; font-size: 16px; font-family: monospace; color: #555;}
        .item-text { width: 350px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .badge { margin-left: 20px; font-size: 14px; color: #666; display: flex; align-items: center; gap: 6px; background: #fff3cd; padding: 2px 8px; border-radius: 4px; border: 1px solid #ffeeba;}
        .badge .icon { cursor: pointer; font-size: 16px; transition: transform 0.2s; }
        .badge .icon:hover { transform: scale(1.2); }

        /* Modal */
        dialog { border: none; border-radius: 8px; box-shadow: 0 10px 30px rgba(0,0,0,0.2); padding: 20px; max-width: 450px; font-family: sans-serif; }
        dialog::backdrop { background: rgba(0,0,0,0.5); }
        dialog h3 { margin-top: 0; font-size: 18px; }
        .code-block { background: #f1f1f1; padding: 10px; border-radius: 4px; font-family: monospace; word-break: break-all; margin: 10px 0;}
    </style>
</head>
<body>
<nav id="sidebar">
        <div class="brand">My Tools</div>
        <a href="index.html" class="nav-link">Advanced Cleaner</a>
        <a href="TextCleaner.html" class="nav-link">Quote Cleaner</a>
        <a href="ListChecker.html" class="nav-link">List Checker</a>
        <a href="FileNameManager.html" class="nav-link active">File Name Manager</a>
        <a href="materiApp.html" class="nav-link">materi App</a>
        <a href="PearsonProductMomentV3.html" class="nav-link">Pearson Calculator</a>
        <a href="korelasiGanda.html" class="nav-link">Korelasi Ganda</a>
    </nav>
    <h2>Manajer & Pembersih Nama File</h2>
    <p class="subtitle">Bersihkan teks mentah dari clipboard, lalu kelompokkan file yang memiliki format penamaan seiras.</p>

    <div class="container">
        <div class="col">
            <h3>🧹 Langkah 1: Paste Teks Mentah (Clipboard)</h3>
            <textarea id="rawInput" placeholder="Paste di sini...&#10;Contoh:&#10;list file copy:&#10;video 01.mp4 23459 210125&#10;gambar-A.jpg 1024 2023"></textarea>
            <button onclick="cleanText()">Bersihkan & Pindahkan ➡️</button>
        </div>

        <div class="col">
            <h3>📄 Langkah 2: List Nama File Bersih</h3>
            <textarea id="inputList" placeholder="Hasil file bersih akan muncul di sini..."></textarea>
            <button class="btn-process" onclick="processFiles()">Kelompokkan & Analisis ⬇️</button>
        </div>
    </div>

    <div id="output">
        <div style="color: #999; font-style: italic; text-align: center;">Hasil grup dan analisis akan muncul di sini...</div>
    </div>

    <dialog id="infoModal">
        <h3>🔍 Detail Otentikasi</h3>
        <p id="modalText"></p>
        <button style="background: #333;" onclick="document.getElementById('infoModal').close()">Tutup</button>
    </dialog>

    <script>
        // --- FITUR BARU: PEMBERSIH TEKS MENTAH ---
        function cleanText() {
            const rawText = document.getElementById('rawInput').value;
            const lines = rawText.split('\n');
            let cleanedLines = [];

            // Daftar kata yang sering jadi header sampah
            const ignoreKeywords = ['list file copy:', 'nama file', 'size', 'date modified', 'ukuran'];

            lines.forEach(line => {
                let trimmed = line.trim();
                if (!trimmed) return; // Abaikan baris kosong

                // Abaikan baris yang mengandung keyword sampah
                if (ignoreKeywords.some(kw => trimmed.toLowerCase().includes(kw))) return;

                // Regex: Cari nama file sampai ketemu ekstensi umum (3-4 huruf setelah titik)
                // Contoh memotong: "video.mp4 1234 kb" menjadi "video.mp4"
                const extMatch = trimmed.match(/^(.+?\.[a-zA-Z0-9]{2,4})(?=\s|$)/);

                if (extMatch) {
                    cleanedLines.push(extMatch[1].trim());
                } else {
                    // Jika tidak ada ekstensi, coba hapus angka/tanggal di bagian belakang
                    // Hapus pola seperti " 23459 210125" atau " 2023-10-12" di akhir baris
                    let noTrailingJunk = trimmed.replace(/\s+[\d\-\/:]+(\s+[a-zA-Z]{2,})?\s*$/, '');
                    cleanedLines.push(noTrailingJunk.trim());
                }
            });

            // Pindahkan hasilnya ke textarea sebelah kanan
            document.getElementById('inputList').value = cleanedLines.join('\n');
        }

        // --- ALGORITMA PENGELOMPOKAN ---

        // 1. Masking Angka
        function maskNumbers(str) {
            return str.replace(/\d+_\d+/g, '#_#').replace(/\d+/g, '#');
        }

        // 2. Levenshtein (Deteksi Typo Huruf)
        function levenshtein(s1, s2) {
            let costs = [];
            for (let i = 0; i <= s1.length; i++) {
                let lastValue = i;
                for (let j = 0; j <= s2.length; j++) {
                    if (i == 0) costs[j] = j;
                    else {
                        if (j > 0) {
                            let newValue = costs[j - 1];
                            if (s1.charAt(i - 1) != s2.charAt(j - 1))
                                newValue = Math.min(Math.min(newValue, lastValue), costs[j]) + 1;
                            costs[j - 1] = lastValue;
                            lastValue = newValue;
                        }
                    }
                }
                if (i > 0) costs[s2.length] = lastValue;
            }
            return costs[s2.length];
        }

        // 3. Token Similarity (Deteksi Kata Terbalik - LEBIH AKURAT PER KATA)
        function wordSimilarity(s1, s2) {
            // Hilangkan karakter khusus dan pecah berdasarkan spasi atau pemisah
            let words1 = s1.toLowerCase().replace(/[-_.]/g, ' ').split(/\s+/).filter(w => w);
            let words2 = s2.toLowerCase().replace(/[-_.]/g, ' ').split(/\s+/).filter(w => w);

            if(words1.length === 0 || words2.length === 0) return 0;

            let matches = 0;
            let tempWords2 = [...words2];

            words1.forEach(word => {
                let index = tempWords2.indexOf(word);
                if (index !== -1) {
                    matches++;
                    tempWords2.splice(index, 1);
                }
            });

            // Hitung persentase kata yang sama
            return (2.0 * matches) / (words1.length + words2.length);
        }

        // 4. Cari Judul Grup (Longest Common Prefix)
        function getLCP(strings) {
            if(strings.length === 0) return "";
            if(strings.length === 1) {
                let parts = strings[0].split('-');
                if(parts.length > 1) return parts[0].trim() + " -";
                return strings[0].split(' ').slice(0, 2).join(' '); // Ambil 2 kata pertama jika tidak ada pemisah
            }
            let lcp = strings[0];
            for(let i=1; i<strings.length; i++) {
                let j = 0;
                while(j < lcp.length && j < strings[i].length && lcp[j] === strings[i][j]) j++;
                lcp = lcp.substring(0, j);
            }
            return lcp.replace(/[-_#\s]+$/, '').trim(); // Bersihkan ujung judul
        }

        // 5. Proses Utama
        function processFiles() {
            const input = document.getElementById('inputList').value;
            const lines = input.split('\n').map(l => l.trim()).filter(l => l);
            if(lines.length === 0) {
                alert("List file bersih masih kosong!");
                return;
            }

            let groups = [];

            // A. Pengelompokan (Typo ringan & Format identik)
            lines.forEach(line => {
                let masked = maskNumbers(line);
                let bestGroup = null;
                for(let g of groups) {
                    // Kelompokkan jika beda huruf sedikit (typo) ATAU susunan katanya 80%+ mirip
                    if(levenshtein(g.maskedRep, masked) <= 3 || wordSimilarity(g.maskedRep, masked) >= 0.8) {
                        bestGroup = g;
                        break;
                    }
                }
                if(bestGroup) bestGroup.items.push({ text: line, masked: masked });
                else groups.push({ rep: line, maskedRep: masked, items: [{ text: line, masked: masked }] });
            });

            // B. Evaluasi Skor Otentik dalam Grup
            groups.forEach(g => {
                g.title = getLCP(g.items.map(i => i.text));
                if (!g.title) g.title = g.rep;

                let standard = g.items[0]; // File pertama dianggap acuan "Otentik"
                g.items.forEach((item, index) => {
                    if(index > 0 && item.masked !== standard.masked) {
                        let wordSim = wordSimilarity(standard.masked, item.masked);
                        let charDist = levenshtein(standard.masked, item.masked);

                        // Kalkulasi skor gabungan (Kata & Huruf)
                        let score = Math.floor(wordSim * 100);
                        if(score === 100 && charDist > 0) score -= charDist; // Kurangi poin jika kata sama tapi ada typo huruf

                        item.score = Math.max(85, score); // Batas bawah visual
                        item.similarTo = standard.text;
                        item.isTypo = charDist > 0 && charDist <= 3;
                    }
                });
            });

            renderGroups(groups);
        }

        // 6. Render ke HTML
        function renderGroups(groups) {
            const output = document.getElementById('output');
            output.innerHTML = '';

            groups.forEach(g => {
                let groupDiv = document.createElement('div');
                groupDiv.className = 'group';

                let title = document.createElement('div');
                title.className = 'group-title';
                title.innerText = g.title || "Grup Tidak Bernama";
                groupDiv.appendChild(title);

                g.items.forEach(item => {
                    let itemDiv = document.createElement('div');
                    itemDiv.className = 'item-row';

                    let textSpan = document.createElement('span');
                    textSpan.className = 'item-text';
                    textSpan.innerText = item.text;
                    itemDiv.appendChild(textSpan);

                    if(item.score) {
                        let badge = document.createElement('span');
                        badge.className = 'badge';
                        let reason = item.isTypo ? "Indikasi Typo" : "Posisi Kata Terbalik";
                        badge.innerHTML = `🟠 ${item.score}% Authentic <span class="icon" title="Cek Detail" onclick="showModal('${item.similarTo.replace(/'/g, "\\'")}', '${item.text.replace(/'/g, "\\'")}', '${reason}')">🔎</span>`;
                        itemDiv.appendChild(badge);
                    }

                    groupDiv.appendChild(itemDiv);
                });
                output.appendChild(groupDiv);
            });
        }

        // 7. Modal Info
        function showModal(similarTo, current, reason) {
            document.getElementById('modalText').innerHTML =
                `File ini terdeteksi kurang seiras.<br><br>
                File Saat ini:<br>
                <div class="code-block" style="color:#d9534f;">${current}</div>

                Diduga mirip dengan file acuan ini:<br>
                <div class="code-block" style="color:#5cb85c;">${similarTo}</div>

                <b>Kemungkinan Penyebab:</b> ${reason}.`;
            document.getElementById('infoModal').showModal();
        }
    </script>
</body>
</html>