-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathjson-deduplicator.html
More file actions
350 lines (302 loc) · 16.8 KB
/
Copy pathjson-deduplicator.html
File metadata and controls
350 lines (302 loc) · 16.8 KB
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
340
341
342
343
344
345
346
347
348
349
350
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JSON Deduplicator Pro</title>
<script src="https://cdn.tailwindcss.com"></script>
<!-- Lucide Icons -->
<script src="https://unpkg.com/lucide@latest"></script>
<!-- Common Library -->
<script src="common.js"></script>
<script>
tailwind.config = {
darkMode: 'class',
theme: {
extend: {
colors: {
brand: {
50: '#f0fdfa',
100: '#ccfbf1',
500: '#14b8a6',
600: '#0d9488',
900: '#134e4a',
}
}
}
}
}
</script>
<style>
.drag-active {
border-color: #3b82f6 !important;
background-color: #eff6ff !important;
}
.fade-in {
animation: fadeIn 0.4s ease-in-out;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
</style>
</head>
<body class="bg-gray-50 dark:bg-slate-950 text-gray-800 dark:text-slate-100 font-sans antialiased flex flex-col min-h-screen transition-colors duration-200">
<!-- Header -->
<header class="bg-white/90 dark:bg-slate-900/90 border-b border-gray-200 dark:border-slate-800 sticky top-0 z-50 shadow-sm backdrop-blur-md mb-8">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-3 flex flex-col sm:flex-row items-center justify-between gap-4">
<div class="flex items-center space-x-3">
<div class="bg-brand-50 dark:bg-brand-950/40 text-brand-600 dark:text-brand-400 p-2 rounded-lg">
<i data-lucide="file-code" class="h-5 w-5"></i>
</div>
<div>
<h1 class="text-lg font-bold text-gray-900 dark:text-white leading-tight">JSON Deduplicator</h1>
<p class="text-xs text-gray-500 dark:text-slate-400">Remove duplicate entries from JSON arrays.</p>
</div>
</div>
<div class="flex items-center gap-3">
<div id="header-quick-nav"></div>
<a href="index.html" class="inline-flex items-center gap-1.5 text-xs font-semibold text-gray-600 dark:text-slate-300 hover:text-brand-600 dark:hover:text-brand-400 transition-colors bg-gray-100 dark:bg-slate-800 px-3 py-1.5 rounded-lg border border-gray-200 dark:border-slate-700">
<i data-lucide="arrow-left" class="w-3.5 h-3.5"></i>
<span>Dashboard</span>
</a>
</div>
</div>
</header>
<!-- Main Content -->
<main class="max-w-3xl mx-auto w-full px-4 flex-grow mb-12">
<div class="bg-white rounded-2xl shadow-xl overflow-hidden border border-slate-200">
<div class="p-8">
<div class="text-center mb-8">
<h2 class="text-lg font-semibold text-slate-700">Clean up your JSON arrays</h2>
<p class="text-slate-500 mt-1 text-sm">Upload a JSON file containing an array. We'll deeply compare each element, remove duplicates, and give you a clean file to download.</p>
</div>
<!-- Upload Area -->
<div id="upload-section" class="transition-all duration-300">
<div id="drop-zone" class="border-2 border-dashed border-slate-300 rounded-xl p-10 text-center cursor-pointer hover:bg-slate-50 transition-colors flex flex-col items-center justify-center group">
<div class="h-16 w-16 bg-blue-50 text-blue-500 rounded-full flex items-center justify-center mb-4 group-hover:scale-110 transition-transform">
<i class="fa-solid fa-cloud-arrow-up text-2xl"></i>
</div>
<p class="text-slate-600 font-medium mb-1">Click to browse or drag and drop your file here</p>
<p class="text-slate-400 text-sm mb-4">Must be a valid .json file</p>
<button class="bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-6 rounded-lg shadow-sm transition-colors shadow-blue-500/30">
Select File
</button>
<input type="file" id="file-input" accept=".json,application/json" class="hidden">
</div>
</div>
<!-- Loading Area -->
<div id="loading-section" class="hidden text-center py-12">
<i class="fa-solid fa-circle-notch fa-spin text-4xl text-blue-500 mb-4"></i>
<p class="text-slate-600 font-medium text-lg">Processing your JSON...</p>
<p class="text-slate-400 text-sm mt-1">Deeply analyzing elements for uniqueness</p>
</div>
<!-- Error Area -->
<div id="error-section" class="hidden bg-red-50 border border-red-200 rounded-xl p-6 text-center">
<div class="text-red-500 text-3xl mb-3"><i class="fa-solid fa-circle-exclamation"></i></div>
<h3 class="text-red-800 font-semibold mb-1">Processing Failed</h3>
<p id="error-message" class="text-red-600 text-sm mb-4"></p>
<button onclick="resetApp()" class="bg-white border border-slate-300 hover:bg-slate-50 text-slate-700 font-medium py-2 px-4 rounded-lg shadow-sm transition-colors text-sm">
Try Again
</button>
</div>
<!-- Report & Download Area -->
<div id="result-section" class="hidden fade-in">
<div class="bg-green-50 border border-green-200 rounded-xl p-6 mb-6">
<div class="flex items-center justify-center text-green-600 mb-4">
<i class="fa-solid fa-circle-check text-4xl"></i>
</div>
<h3 class="text-center text-green-800 text-lg font-bold mb-6">Deduplication Complete!</h3>
<div class="grid grid-cols-3 gap-4 mb-6">
<div class="bg-white rounded-lg p-4 border border-green-100 shadow-sm text-center">
<p class="text-slate-500 text-xs font-semibold uppercase tracking-wide mb-1">Original Items</p>
<p id="stat-original-count" class="text-2xl font-bold text-slate-800">-</p>
</div>
<div class="bg-white rounded-lg p-4 border border-green-100 shadow-sm text-center">
<p class="text-slate-500 text-xs font-semibold uppercase tracking-wide mb-1">Unique Items</p>
<p id="stat-new-count" class="text-2xl font-bold text-blue-600">-</p>
</div>
<div class="bg-white rounded-lg p-4 border border-green-100 shadow-sm text-center relative overflow-hidden">
<div class="absolute -right-2 -bottom-2 opacity-10">
<i class="fa-solid fa-trash text-5xl text-red-500"></i>
</div>
<p class="text-slate-500 text-xs font-semibold uppercase tracking-wide mb-1 relative z-10">Removed</p>
<p id="stat-removed-count" class="text-2xl font-bold text-red-500 relative z-10">-</p>
</div>
</div>
<div class="flex justify-between items-center text-sm text-slate-600 bg-white/60 p-3 rounded-lg border border-green-200/50">
<div><i class="fa-solid fa-weight-hanging mr-2"></i>Original Size: <span id="stat-original-size" class="font-medium"></span></div>
<div><i class="fa-solid fa-arrow-right mx-2 text-slate-400"></i></div>
<div>New Size: <span id="stat-new-size" class="font-medium"></span></div>
</div>
</div>
<div class="flex flex-col sm:flex-row gap-3">
<button id="download-btn" class="flex-1 bg-blue-600 hover:bg-blue-700 text-white font-medium py-3 px-6 rounded-lg shadow-sm transition-colors shadow-blue-500/30 flex justify-center items-center">
<i class="fa-solid fa-download mr-2"></i> Download Clean JSON
</button>
<button onclick="resetApp()" class="sm:w-auto w-full bg-white border border-slate-300 hover:bg-slate-50 text-slate-700 font-medium py-3 px-6 rounded-lg shadow-sm transition-colors flex justify-center items-center">
<i class="fa-solid fa-rotate-left mr-2"></i> Process Another
</button>
</div>
</div>
</div>
</div>
<div class="text-center mt-6 text-slate-400 text-sm">
<p><i class="fa-solid fa-lock mr-1"></i> Processing happens entirely in your browser. No data is uploaded to any server.</p>
</div>
</main>
<script>
// DOM Elements
const dropZone = document.getElementById('drop-zone');
const fileInput = document.getElementById('file-input');
const uploadSection = document.getElementById('upload-section');
const loadingSection = document.getElementById('loading-section');
const errorSection = document.getElementById('error-section');
const resultSection = document.getElementById('result-section');
const errorMessage = document.getElementById('error-message');
const downloadBtn = document.getElementById('download-btn');
// Global state for processed file
let finalJsonContent = null;
let originalFileName = "";
// Deterministic Stringifier for Deep Object Comparison
// This ensures {a:1, b:2} and {b:2, a:1} are recognized as identical
function deterministicStringify(obj) {
if (typeof obj !== 'object' || obj === null) {
return JSON.stringify(obj);
}
if (Array.isArray(obj)) {
return '[' + obj.map(item => deterministicStringify(item)).join(',') + ']';
}
const keys = Object.keys(obj).sort();
const elements = keys.map(key => {
return JSON.stringify(key) + ':' + deterministicStringify(obj[key]);
});
return '{' + elements.join(',') + '}';
}
// Format Bytes utility
function formatBytes(bytes, decimals = 2) {
if (!+bytes) return '0 Bytes';
const k = 1024;
const dm = decimals < 0 ? 0 : decimals;
const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
const i = Math.floor(Math.log(bytes) / Math.log(k));
return `${parseFloat((bytes / Math.pow(k, i)).toFixed(dm))} ${sizes[i]}`;
}
// View Management
function showView(viewName) {
uploadSection.classList.add('hidden');
loadingSection.classList.add('hidden');
errorSection.classList.add('hidden');
resultSection.classList.add('hidden');
if (viewName === 'upload') uploadSection.classList.remove('hidden');
if (viewName === 'loading') loadingSection.classList.remove('hidden');
if (viewName === 'error') errorSection.classList.remove('hidden');
if (viewName === 'result') resultSection.classList.remove('hidden');
}
function showError(msg) {
errorMessage.textContent = msg;
showView('error');
}
function resetApp() {
fileInput.value = '';
finalJsonContent = null;
originalFileName = "";
showView('upload');
}
// File Processing Logic
function handleFile(file) {
if (!file) return;
if (file.type !== 'application/json' && !file.name.toLowerCase().endsWith('.json')) {
showError("Please upload a valid .json file.");
return;
}
originalFileName = file.name;
showView('loading');
// Use timeout to allow UI to render loading state before heavy processing locks the main thread
setTimeout(() => {
const reader = new FileReader();
reader.onload = (e) => {
try {
const content = e.target.result;
const originalSize = content.length; // Approximate bytes using string length
const parsedData = JSON.parse(content);
if (!Array.isArray(parsedData)) {
showError("The root element of the JSON file must be an Array (e.g., [ {...}, {...} ]).");
return;
}
const originalCount = parsedData.length;
// Deduplication Logic
const uniqueSet = new Set();
const deduplicatedArray = [];
for (let i = 0; i < parsedData.length; i++) {
const item = parsedData[i];
const hash = deterministicStringify(item);
if (!uniqueSet.has(hash)) {
uniqueSet.add(hash);
deduplicatedArray.push(item);
}
}
const newCount = deduplicatedArray.length;
const duplicatesRemoved = originalCount - newCount;
// Create clean output
finalJsonContent = JSON.stringify(deduplicatedArray, null, 2);
const newSize = finalJsonContent.length;
// Update DOM with report statistics
document.getElementById('stat-original-count').textContent = originalCount.toLocaleString();
document.getElementById('stat-new-count').textContent = newCount.toLocaleString();
document.getElementById('stat-removed-count').textContent = duplicatesRemoved.toLocaleString();
document.getElementById('stat-original-size').textContent = formatBytes(originalSize);
document.getElementById('stat-new-size').textContent = formatBytes(newSize);
showView('result');
} catch (err) {
console.error(err);
showError("Invalid JSON syntax: " + err.message);
}
};
reader.onerror = () => {
showError("Error reading the file.");
}
reader.readAsText(file);
}, 100);
}
// Download Action
downloadBtn.addEventListener('click', () => {
if (!finalJsonContent) return;
const blob = new Blob([finalJsonContent], { type: 'application/json' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
const baseName = originalFileName.replace(/\.[^/.]+$/, ""); // Strip extension
a.download = `${baseName}_deduplicated.json`;
a.href = url;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(url);
});
// Event Listeners for File Input & Drag and Drop
dropZone.addEventListener('click', () => fileInput.click());
fileInput.addEventListener('change', (e) => {
if (e.target.files.length) {
handleFile(e.target.files[0]);
}
});
dropZone.addEventListener('dragover', (e) => {
e.preventDefault();
dropZone.classList.add('drag-active');
});
dropZone.addEventListener('dragleave', (e) => {
e.preventDefault();
dropZone.classList.remove('drag-active');
});
dropZone.addEventListener('drop', (e) => {
e.preventDefault();
dropZone.classList.remove('drag-active');
if (e.dataTransfer.files.length) {
handleFile(e.dataTransfer.files[0]);
}
});
// Initial setup
resetApp();
</script>
</body>
</html>