Hugging Face's logo

Spaces:
xacwutao
/
advanced-text-processor
Running

App Files Community
xacwutao commited on
Commit
a0be895
·
verified ·
1 Parent(s): 5ea4e70

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +6 -4
  2. index.html +325 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Advanced Text Processor
3
- emoji: 🐢
4
- colorFrom: blue
5
  colorTo: yellow
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: advanced-text-processor
3
+ emoji: 🐳
4
+ colorFrom: purple
5
  colorTo: yellow
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,325 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Advanced Text Processor</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ .dropzone {
11
+ border: 2px dashed #ccc;
12
+ transition: all 0.3s;
13
+ }
14
+ .dropzone.active {
15
+ border-color: #4f46e5;
16
+ background-color: #f0f7ff;
17
+ }
18
+ .chunk-box {
19
+ position: relative;
20
+ }
21
+ .chunk-box:hover .copy-btn {
22
+ opacity: 1;
23
+ }
24
+ .copy-btn {
25
+ opacity: 0;
26
+ transition: opacity 0.2s;
27
+ }
28
+ .progress-bar {
29
+ transition: width 0.3s ease;
30
+ }
31
+ .glow {
32
+ animation: glow 1.5s ease-in-out infinite alternate;
33
+ }
34
+ @keyframes glow {
35
+ from {
36
+ box-shadow: 0 0 5px rgba(79, 70, 229, 0.5);
37
+ }
38
+ to {
39
+ box-shadow: 0 0 15px rgba(79, 70, 229, 0.8);
40
+ }
41
+ }
42
+ </style>
43
+ </head>
44
+ <body class="bg-gray-50 min-h-screen">
45
+ <div class="container mx-auto px-4 py-8 max-w-4xl">
46
+ <div class="text-center mb-8">
47
+ <h1 class="text-3xl font-bold text-indigo-700 mb-2">Advanced Text Processor</h1>
48
+ <p class="text-gray-600">Upload a TXT file to clean text (removes punctuation and numbers)</p>
49
+ </div>
50
+
51
+ <div class="bg-white rounded-xl shadow-md p-6 mb-8 glow">
52
+ <div id="dropzone" class="dropzone rounded-lg p-12 text-center cursor-pointer">
53
+ <div class="flex flex-col items-center justify-center">
54
+ <i class="fas fa-file-alt text-4xl text-indigo-500 mb-4"></i>
55
+ <h3 class="text-lg font-medium text-gray-700 mb-2">Drag & drop your TXT file here</h3>
56
+ <p class="text-gray-500 mb-4">or</p>
57
+ <label for="fileInput" class="bg-indigo-600 text-white px-4 py-2 rounded-md hover:bg-indigo-700 transition cursor-pointer">
58
+ <i class="fas fa-upload mr-2"></i> Select File
59
+ </label>
60
+ <input id="fileInput" type="file" accept=".txt" class="hidden">
61
+ </div>
62
+ </div>
63
+
64
+ <div id="progressContainer" class="mt-4 hidden">
65
+ <div class="flex justify-between mb-1">
66
+ <span class="text-sm font-medium text-indigo-700">Processing...</span>
67
+ <span id="progressPercent" class="text-sm font-medium text-indigo-700">0%</span>
68
+ </div>
69
+ <div class="w-full bg-gray-200 rounded-full h-2.5">
70
+ <div id="progressBar" class="progress-bar bg-indigo-600 h-2.5 rounded-full" style="width: 0%"></div>
71
+ </div>
72
+ </div>
73
+ </div>
74
+
75
+ <div id="resultsSection" class="hidden">
76
+ <div class="flex justify-between items-center mb-4">
77
+ <h2 class="text-xl font-semibold text-gray-800">Processed Results</h2>
78
+ <div class="flex space-x-2">
79
+ <button id="copyAllBtn" class="bg-indigo-100 text-indigo-700 px-3 py-1 rounded-md text-sm hover:bg-indigo-200 transition flex items-center">
80
+ <i class="fas fa-copy mr-1"></i> Copy All
81
+ </button>
82
+ <button id="downloadBtn" class="bg-green-100 text-green-700 px-3 py-1 rounded-md text-sm hover:bg-green-200 transition flex items-center">
83
+ <i class="fas fa-download mr-1"></i> Download
84
+ </button>
85
+ </div>
86
+ </div>
87
+
88
+ <div id="fileInfo" class="bg-blue-50 border-l-4 border-blue-500 p-4 mb-6 rounded">
89
+ <div class="flex justify-between">
90
+ <div>
91
+ <h3 class="font-medium text-blue-800" id="fileName"></h3>
92
+ <p class="text-sm text-blue-600" id="fileSize"></p>
93
+ </div>
94
+ <div class="text-right">
95
+ <p class="text-sm text-blue-600" id="chunkCount"></p>
96
+ <p class="text-sm text-blue-600" id="processingTime"></p>
97
+ </div>
98
+ </div>
99
+ </div>
100
+
101
+ <div id="chunksContainer" class="space-y-4"></div>
102
+ </div>
103
+ </div>
104
+
105
+ <script>
106
+ document.addEventListener('DOMContentLoaded', function() {
107
+ const dropzone = document.getElementById('dropzone');
108
+ const fileInput = document.getElementById('fileInput');
109
+ const resultsSection = document.getElementById('resultsSection');
110
+ const chunksContainer = document.getElementById('chunksContainer');
111
+ const progressContainer = document.getElementById('progressContainer');
112
+ const progressBar = document.getElementById('progressBar');
113
+ const progressPercent = document.getElementById('progressPercent');
114
+ const copyAllBtn = document.getElementById('copyAllBtn');
115
+ const downloadBtn = document.getElementById('downloadBtn');
116
+ const fileName = document.getElementById('fileName');
117
+ const fileSize = document.getElementById('fileSize');
118
+ const chunkCount = document.getElementById('chunkCount');
119
+ const processingTime = document.getElementById('processingTime');
120
+
121
+ // Handle drag and drop events
122
+ ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
123
+ dropzone.addEventListener(eventName, preventDefaults, false);
124
+ });
125
+
126
+ function preventDefaults(e) {
127
+ e.preventDefault();
128
+ e.stopPropagation();
129
+ }
130
+
131
+ ['dragenter', 'dragover'].forEach(eventName => {
132
+ dropzone.addEventListener(eventName, highlight, false);
133
+ });
134
+
135
+ ['dragleave', 'drop'].forEach(eventName => {
136
+ dropzone.addEventListener(eventName, unhighlight, false);
137
+ });
138
+
139
+ function highlight() {
140
+ dropzone.classList.add('active');
141
+ }
142
+
143
+ function unhighlight() {
144
+ dropzone.classList.remove('active');
145
+ }
146
+
147
+ // Handle dropped files
148
+ dropzone.addEventListener('drop', handleDrop, false);
149
+ fileInput.addEventListener('change', handleFiles);
150
+
151
+ function handleDrop(e) {
152
+ const dt = e.dataTransfer;
153
+ const files = dt.files;
154
+ handleFiles({ target: { files } });
155
+ }
156
+
157
+ function handleFiles(e) {
158
+ const file = e.target.files[0];
159
+ if (!file) return;
160
+
161
+ if (!file.name.endsWith('.txt')) {
162
+ alert('Please upload a .txt file');
163
+ return;
164
+ }
165
+
166
+ processFile(file);
167
+ }
168
+
169
+ function processFile(file) {
170
+ const startTime = performance.now();
171
+ progressContainer.classList.remove('hidden');
172
+ resultsSection.classList.add('hidden');
173
+ chunksContainer.innerHTML = '';
174
+
175
+ const reader = new FileReader();
176
+
177
+ reader.onload = function(e) {
178
+ let content = e.target.result;
179
+
180
+ // Advanced text cleaning
181
+ // 1. Remove all punctuation (including full-width punctuation)
182
+ // Full-width punctuation ranges:
183
+ // - Full-width comma, period: \uFF0C-\uFF0E
184
+ // - Full-width brackets: \uFF08-\uFF09
185
+ // - Full-width exclamation/question: \uFF01-\uFF1F
186
+ // - Full-width period: \u3002
187
+ content = content.replace(/[\u2000-\u206F\u2E00-\u2E7F\\'!"#$%&()*+,\-.\/:;<=>?@[\]^_`{|}~\uFF0C-\uFF0E\uFF08-\uFF09\uFF01-\uFF1F\u3002]/g, '');
188
+
189
+ // 2. Remove numeric sequences (like 1. 2. 3. etc.)
190
+ content = content.replace(/\b\d+\.?\s*/g, '');
191
+
192
+ // 3. Remove standalone numbers
193
+ content = content.replace(/\b\d+\b/g, '');
194
+
195
+ // 4. Normalize whitespace (replace multiple spaces/newlines with single space)
196
+ content = content.replace(/\s+/g, ' ');
197
+
198
+ // 5. Trim leading/trailing spaces
199
+ content = content.trim();
200
+
201
+ // Split into 128-byte chunks
202
+ const chunks = [];
203
+ for (let i = 0; i < content.length; i += 128) {
204
+ const chunk = content.substr(i, 128).trim();
205
+ if (chunk.length > 0) { // Only add non-empty chunks
206
+ chunks.push(chunk);
207
+ }
208
+ }
209
+
210
+ // Update progress bar as we process chunks
211
+ let processed = 0;
212
+ const totalChunks = chunks.length;
213
+
214
+ // Display file info
215
+ fileName.textContent = file.name;
216
+ fileSize.textContent = `${(file.size / 1024).toFixed(2)} KB`;
217
+ chunkCount.textContent = `${totalChunks} chunks`;
218
+
219
+ // Process chunks with slight delay to show progress
220
+ const processChunk = (index) => {
221
+ if (index >= totalChunks) {
222
+ const endTime = performance.now();
223
+ processingTime.textContent = `Processed in ${((endTime - startTime) / 1000).toFixed(2)}s`;
224
+ progressContainer.classList.add('hidden');
225
+ resultsSection.classList.remove('hidden');
226
+
227
+ // Store the cleaned content for download
228
+ document.cleanedContent = chunks.join('\n\n');
229
+ return;
230
+ }
231
+
232
+ const chunk = chunks[index];
233
+ createChunkElement(chunk, index + 1);
234
+
235
+ processed++;
236
+ const percent = Math.round((processed / totalChunks) * 100);
237
+ progressBar.style.width = `${percent}%`;
238
+ progressPercent.textContent = `${percent}%`;
239
+
240
+ setTimeout(() => processChunk(index + 1), 10);
241
+ };
242
+
243
+ processChunk(0);
244
+ };
245
+
246
+ reader.readAsText(file);
247
+ }
248
+
249
+ function createChunkElement(chunk, index) {
250
+ const chunkElement = document.createElement('div');
251
+ chunkElement.className = 'chunk-box bg-white border border-gray-200 rounded-lg p-4 hover:shadow-sm transition';
252
+
253
+ chunkElement.innerHTML = `
254
+ <div class="flex justify-between items-start mb-2">
255
+ <span class="text-xs font-medium bg-indigo-100 text-indigo-800 px-2 py-1 rounded">Chunk ${index}</span>
256
+ <span class="text-xs text-gray-500">${chunk.length} bytes</span>
257
+ </div>
258
+ <div class="relative">
259
+ <pre class="text-gray-800 whitespace-pre-wrap break-words font-mono text-sm">${chunk}</pre>
260
+ <button class="copy-btn absolute top-0 right-0 bg-gray-100 hover:bg-gray-200 p-1 rounded text-gray-600" data-chunk="${index}">
261
+ <i class="fas fa-copy text-xs"></i>
262
+ </button>
263
+ </div>
264
+ `;
265
+
266
+ chunksContainer.appendChild(chunkElement);
267
+ }
268
+
269
+ // Copy functionality
270
+ chunksContainer.addEventListener('click', function(e) {
271
+ if (e.target.closest('.copy-btn')) {
272
+ const btn = e.target.closest('.copy-btn');
273
+ const chunkIndex = btn.getAttribute('data-chunk');
274
+ const chunkText = btn.closest('.chunk-box').querySelector('pre').textContent;
275
+
276
+ navigator.clipboard.writeText(chunkText).then(() => {
277
+ const originalIcon = btn.innerHTML;
278
+ btn.innerHTML = '<i class="fas fa-check text-xs text-green-500"></i>';
279
+ setTimeout(() => {
280
+ btn.innerHTML = originalIcon;
281
+ }, 2000);
282
+ });
283
+ }
284
+ });
285
+
286
+ // Copy all chunks
287
+ copyAllBtn.addEventListener('click', function() {
288
+ const allChunks = Array.from(document.querySelectorAll('#chunksContainer pre'))
289
+ .map(pre => pre.textContent)
290
+ .join('\n\n');
291
+
292
+ navigator.clipboard.writeText(allChunks).then(() => {
293
+ const originalText = copyAllBtn.innerHTML;
294
+ copyAllBtn.innerHTML = '<i class="fas fa-check mr-1"></i> Copied!';
295
+ setTimeout(() => {
296
+ copyAllBtn.innerHTML = originalText;
297
+ }, 2000);
298
+ });
299
+ });
300
+
301
+ // Download cleaned content
302
+ downloadBtn.addEventListener('click', function() {
303
+ if (!document.cleanedContent) return;
304
+
305
+ const blob = new Blob([document.cleanedContent], { type: 'text/plain' });
306
+ const url = URL.createObjectURL(blob);
307
+ const a = document.createElement('a');
308
+ a.href = url;
309
+ a.download = 'cleaned_' + fileName.textContent;
310
+ document.body.appendChild(a);
311
+ a.click();
312
+ document.body.removeChild(a);
313
+ URL.revokeObjectURL(url);
314
+
315
+ // Show download confirmation
316
+ const originalText = downloadBtn.innerHTML;
317
+ downloadBtn.innerHTML = '<i class="fas fa-check mr-1"></i> Downloaded!';
318
+ setTimeout(() => {
319
+ downloadBtn.innerHTML = originalText;
320
+ }, 2000);
321
+ });
322
+ });
323
+ </script>
324
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=xacwutao/advanced-text-processor" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
325
+ </html>