Hugging Face's logo

Spaces:
myratmyradov1997
/
ascii-visualization
Running

App Files Community
myratmyradov1997 commited on
Commit
9275e43
·
verified ·
1 Parent(s): 2d70e5d

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +426 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Ascii Visualization
3
- emoji: 📚
4
- colorFrom: yellow
5
- colorTo: red
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: ascii-visualization
3
+ emoji: 🐳
4
+ colorFrom: blue
5
+ colorTo: blue
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,426 @@
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>Кодирование ASCII - Визуализация</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
+ <script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
10
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/gif.js/0.2.0/gif.js"></script>
11
+ <style>
12
+ @keyframes pulse {
13
+ 0%, 100% { opacity: 1; }
14
+ 50% { opacity: 0.5; }
15
+ }
16
+ .ascii-cell {
17
+ transition: all 0.3s ease;
18
+ }
19
+ .ascii-cell.active {
20
+ background-color: #3b82f6;
21
+ color: white;
22
+ transform: scale(1.1);
23
+ box-shadow: 0 0 10px rgba(59, 130, 246, 0.7);
24
+ }
25
+ .code-line {
26
+ position: relative;
27
+ }
28
+ .code-line::after {
29
+ content: '';
30
+ position: absolute;
31
+ left: 0;
32
+ bottom: 0;
33
+ width: 0;
34
+ height: 2px;
35
+ background-color: #3b82f6;
36
+ transition: width 0.5s ease;
37
+ }
38
+ .code-line.animating::after {
39
+ width: 100%;
40
+ }
41
+ .binary-digit {
42
+ display: inline-block;
43
+ transition: all 0.3s ease;
44
+ }
45
+ .binary-digit.active {
46
+ color: #3b82f6;
47
+ transform: translateY(-5px);
48
+ font-weight: bold;
49
+ }
50
+ .progress-bar {
51
+ height: 4px;
52
+ background-color: #e5e7eb;
53
+ overflow: hidden;
54
+ }
55
+ .progress-fill {
56
+ height: 100%;
57
+ background-color: #3b82f6;
58
+ width: 0;
59
+ transition: width 0.5s ease;
60
+ }
61
+ #captureContainer {
62
+ position: fixed;
63
+ top: -9999px;
64
+ left: -9999px;
65
+ width: 1000px;
66
+ z-index: -1;
67
+ }
68
+ .download-btn {
69
+ position: fixed;
70
+ bottom: 20px;
71
+ right: 20px;
72
+ z-index: 100;
73
+ opacity: 0;
74
+ transition: opacity 0.3s;
75
+ }
76
+ .download-btn.show {
77
+ opacity: 1;
78
+ }
79
+ </style>
80
+ </head>
81
+ <body class="bg-gray-50 min-h-screen font-mono">
82
+ <!-- Hidden container for capturing frames -->
83
+ <div id="captureContainer"></div>
84
+
85
+ <!-- Download button (initially hidden) -->
86
+ <button id="downloadGifBtn" class="download-btn bg-blue-500 hover:bg-blue-600 text-white px-4 py-3 rounded-full shadow-lg transition">
87
+ <i class="fas fa-download mr-2"></i>Скачать GIF
88
+ </button>
89
+
90
+ <div class="container mx-auto px-4 py-8">
91
+ <div class="text-center mb-8">
92
+ <h1 class="text-3xl font-bold text-gray-800 mb-2">Визуализация процесса кодирования</h1>
93
+ <p class="text-gray-600">Интерактивная демонстрация преобразования текста в ASCII и двоичный код</p>
94
+ </div>
95
+
96
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-8">
97
+ <!-- Input Section -->
98
+ <div class="bg-white rounded-lg shadow-md p-6">
99
+ <h2 class="text-xl font-semibold mb-4 text-gray-800">Введите текст для кодирования</h2>
100
+ <div class="flex items-center mb-4">
101
+ <input type="text" id="inputText" placeholder="Например: Hello"
102
+ class="flex-1 border border-gray-300 rounded-l-md px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
103
+ <button id="encodeBtn" class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-r-md transition">
104
+ <i class="fas fa-code mr-2"></i>Кодировать
105
+ </button>
106
+ </div>
107
+ <div class="progress-bar mb-4">
108
+ <div id="progressFill" class="progress-fill"></div>
109
+ </div>
110
+ <div id="codeOutput" class="bg-gray-100 p-4 rounded-md min-h-32">
111
+ <p class="text-gray-500 italic">Здесь появится процесс кодирования...</p>
112
+ </div>
113
+ </div>
114
+
115
+ <!-- ASCII Table -->
116
+ <div class="bg-white rounded-lg shadow-md p-6">
117
+ <h2 class="text-xl font-semibold mb-4 text-gray-800">Таблица ASCII</h2>
118
+ <div class="overflow-x-auto">
119
+ <table class="w-full border-collapse">
120
+ <thead>
121
+ <tr class="bg-gray-100">
122
+ <th class="border p-2">Dec</th>
123
+ <th class="border p-2">Hex</th>
124
+ <th class="border p-2">Char</th>
125
+ <th class="border p-2">Binary</th>
126
+ </tr>
127
+ </thead>
128
+ <tbody id="asciiTableBody">
129
+ <!-- ASCII table will be populated here -->
130
+ </tbody>
131
+ </table>
132
+ </div>
133
+ </div>
134
+ </div>
135
+
136
+ <!-- Binary Visualization -->
137
+ <div class="bg-white rounded-lg shadow-md p-6 mb-8">
138
+ <h2 class="text-xl font-semibold mb-4 text-gray-800">Двоичное представление</h2>
139
+ <div id="binaryVisualization" class="text-center text-2xl font-mono p-4 bg-gray-100 rounded-md">
140
+ <p class="text-gray-500">Введите текст для отображения двоичного кода</p>
141
+ </div>
142
+ </div>
143
+
144
+ <!-- Encoding Steps -->
145
+ <div class="bg-white rounded-lg shadow-md p-6">
146
+ <h2 class="text-xl font-semibold mb-4 text-gray-800">Процесс кодирования</h2>
147
+ <div id="encodingSteps" class="space-y-4">
148
+ <div class="step p-4 border-l-4 border-blue-500 bg-blue-50">
149
+ <h3 class="font-medium text-gray-800">1. Ввод текста</h3>
150
+ <p class="text-gray-600">Пользователь вводит текст для кодирования</p>
151
+ </div>
152
+ <div class="step p-4 border-l-4 border-gray-300">
153
+ <h3 class="font-medium text-gray-800">2. Преобразование в ASCII</h3>
154
+ <p class="text-gray-600">Каждый символ преобразуется в соответствующий код ASCII</p>
155
+ </div>
156
+ <div class="step p-4 border-l-4 border-gray-300">
157
+ <h3 class="font-medium text-gray-800">3. Преобразование в двоичный код</h3>
158
+ <p class="text-gray-600">Код ASCII преобразуется в 8-битное двоичное число</p>
159
+ </div>
160
+ <div class="step p-4 border-l-4 border-gray-300">
161
+ <h3 class="font-medium text-gray-800">4. Отображение результата</h3>
162
+ <p class="text-gray-600">Отображается полный двоичный код введённого текста</p>
163
+ </div>
164
+ </div>
165
+ </div>
166
+ </div>
167
+
168
+ <script>
169
+ document.addEventListener('DOMContentLoaded', function() {
170
+ // Initialize ASCII table
171
+ const asciiTableBody = document.getElementById('asciiTableBody');
172
+ for (let i = 32; i < 128; i++) {
173
+ const row = document.createElement('tr');
174
+ row.className = 'ascii-row hover:bg-gray-50';
175
+ row.innerHTML = `
176
+ <td class="border p-2 ascii-dec">${i}</td>
177
+ <td class="border p-2 ascii-hex">${i.toString(16).toUpperCase()}</td>
178
+ <td class="border p-2 ascii-char text-center">${String.fromCharCode(i)}</td>
179
+ <td class="border p-2 ascii-bin">${i.toString(2).padStart(8, '0')}</td>
180
+ `;
181
+ asciiTableBody.appendChild(row);
182
+ }
183
+
184
+ // Variables for GIF creation
185
+ let gif = null;
186
+ let frames = [];
187
+ let frameCount = 0;
188
+ const downloadBtn = document.getElementById('downloadGifBtn');
189
+
190
+ // Setup GIF download button
191
+ downloadBtn.addEventListener('click', function() {
192
+ if (frames.length > 0) {
193
+ createGifFromFrames();
194
+ }
195
+ });
196
+
197
+ // Encoding function
198
+ document.getElementById('encodeBtn').addEventListener('click', function() {
199
+ const inputText = document.getElementById('inputText').value.trim();
200
+ if (!inputText) return;
201
+
202
+ // Reset everything
203
+ resetVisualization();
204
+
205
+ // Prepare for new recording
206
+ frames = [];
207
+ frameCount = 0;
208
+
209
+ // Show encoding process
210
+ animateEncoding(inputText);
211
+ });
212
+
213
+ function resetVisualization() {
214
+ document.querySelectorAll('.ascii-cell').forEach(cell => {
215
+ cell.classList.remove('active');
216
+ });
217
+ document.querySelectorAll('.step').forEach((step, index) => {
218
+ step.className = 'step p-4 border-l-4 ' +
219
+ (index === 0 ? 'border-blue-500 bg-blue-50' : 'border-gray-300');
220
+ });
221
+ document.getElementById('binaryVisualization').innerHTML = '<p class="text-gray-500">Введите текст для отображения двоичного кода</p>';
222
+ document.getElementById('progressFill').style.width = '0';
223
+ document.getElementById('codeOutput').innerHTML = '<p class="text-gray-500 italic">Здесь появится процесс кодирования...</p>';
224
+ downloadBtn.classList.remove('show');
225
+ }
226
+
227
+ function captureFrame() {
228
+ const captureContainer = document.getElementById('captureContainer');
229
+ const visualElements = document.querySelector('.container').cloneNode(true);
230
+
231
+ // Clean up cloned element for capture
232
+ visualElements.querySelectorAll('.ascii-cell.active').forEach(cell => {
233
+ cell.classList.remove('active');
234
+ });
235
+
236
+ captureContainer.innerHTML = '';
237
+ captureContainer.appendChild(visualElements);
238
+
239
+ html2canvas(captureContainer).then(canvas => {
240
+ frames.push(canvas);
241
+ frameCount++;
242
+
243
+ // Show download button after first frame is captured
244
+ if (frameCount === 1) {
245
+ setTimeout(() => {
246
+ downloadBtn.classList.add('show');
247
+ }, 500);
248
+ }
249
+ });
250
+ }
251
+
252
+ function createGifFromFrames() {
253
+ downloadBtn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i>Создание GIF...';
254
+
255
+ // Create GIF with good quality settings
256
+ gif = new GIF({
257
+ workers: 2,
258
+ quality: 10,
259
+ width: 1000,
260
+ height: Math.min(1000, frames[0].height * (1000 / frames[0].width)),
261
+ workerScript: 'https://cdnjs.cloudflare.com/ajax/libs/gif.js/0.2.0/gif.worker.js'
262
+ });
263
+
264
+ // Add each frame to GIF
265
+ const frameDelay = 500; // 0.5s delay between frames
266
+ frames.forEach((frame, index) => {
267
+ // Skip some frames if there are too many to keep GIF size reasonable
268
+ if (index % 2 === 0 || index === frames.length - 1) {
269
+ gif.addFrame(frame, {delay: frameDelay, copy: true});
270
+ }
271
+ });
272
+
273
+ gif.on('finished', function(blob) {
274
+ // Create download link
275
+ const url = URL.createObjectURL(blob);
276
+ const a = document.createElement('a');
277
+ a.href = url;
278
+ a.download = 'ascii_encoding_animation.gif';
279
+ a.click();
280
+ URL.revokeObjectURL(url);
281
+
282
+ downloadBtn.innerHTML = '<i class="fas fa-download mr-2"></i>Скачать GIF';
283
+ });
284
+
285
+ gif.render();
286
+ }
287
+
288
+ function animateEncoding(text) {
289
+ const steps = document.querySelectorAll('.step');
290
+ const progressFill = document.getElementById('progressFill');
291
+ const binaryVisualization = document.getElementById('binaryVisualization');
292
+ const codeOutput = document.getElementById('codeOutput');
293
+
294
+ // Initial capture
295
+ setTimeout(captureFrame, 300);
296
+
297
+ // Step 1: Input text (already shown)
298
+ setTimeout(() => {
299
+ // Step 2: Convert to ASCII
300
+ steps[1].className = 'step p-4 border-l-4 border-blue-500 bg-blue-50';
301
+ progressFill.style.width = '25%';
302
+ captureFrame();
303
+
304
+ let asciiOutput = '';
305
+ text.split('').forEach((char, index) => {
306
+ setTimeout(() => {
307
+ const code = char.charCodeAt(0);
308
+ asciiOutput += `<div class="code-line mb-2">'${char}' → ${code} (ASCII)</div>`;
309
+ codeOutput.innerHTML = asciiOutput;
310
+
311
+ // Highlight in ASCII table
312
+ const asciiRows = document.querySelectorAll('.ascii-row');
313
+ asciiRows.forEach(row => {
314
+ const decCell = row.querySelector('.ascii-dec');
315
+ if (decCell && parseInt(decCell.textContent) === code) {
316
+ row.querySelectorAll('td').forEach(cell => {
317
+ cell.classList.add('active', 'ascii-cell');
318
+ });
319
+ setTimeout(() => {
320
+ row.querySelectorAll('td').forEach(cell => {
321
+ cell.classList.remove('active');
322
+ });
323
+ }, 1000);
324
+ }
325
+ });
326
+
327
+ // Animate code line
328
+ const lines = document.querySelectorAll('.code-line');
329
+ lines[lines.length - 1].classList.add('animating');
330
+ setTimeout(() => {
331
+ lines[lines.length - 1].classList.remove('animating');
332
+ }, 500);
333
+
334
+ // Capture frame after character is processed
335
+ setTimeout(captureFrame, 100);
336
+
337
+ if (index === text.length - 1) {
338
+ setTimeout(() => {
339
+ // Step 3: Convert to binary
340
+ steps[2].className = 'step p-4 border-l-4 border-blue-500 bg-blue-50';
341
+ progressFill.style.width = '50%';
342
+ captureFrame();
343
+
344
+ let binaryOutput = '';
345
+ text.split('').forEach((char, charIndex) => {
346
+ setTimeout(() => {
347
+ const code = char.charCodeAt(0);
348
+ const binary = code.toString(2).padStart(8, '0');
349
+ binaryOutput += `<div class="code-line mb-2">${code} → ${binary} (binary)</div>`;
350
+ codeOutput.innerHTML = asciiOutput + binaryOutput;
351
+
352
+ // Animate binary digits
353
+ const binaryDigits = binary.split('');
354
+ let binaryHTML = '';
355
+ binaryDigits.forEach((digit, digitIndex) => {
356
+ binaryHTML += `<span class="binary-digit">${digit}</span>`;
357
+ });
358
+
359
+ // Show binary visualization
360
+ if (charIndex === 0) {
361
+ binaryVisualization.innerHTML = '';
362
+ }
363
+ const charDiv = document.createElement('div');
364
+ charDiv.className = 'mb-2';
365
+ charDiv.innerHTML = `<span class="mr-2">'${char}':</span>${binaryHTML}`;
366
+ binaryVisualization.appendChild(charDiv);
367
+
368
+ // Animate each digit
369
+ const digits = charDiv.querySelectorAll('.binary-digit');
370
+ digits.forEach((digit, i) => {
371
+ setTimeout(() => {
372
+ digit.classList.add('active');
373
+ setTimeout(() => {
374
+ digit.classList.remove('active');
375
+ // Capture frame after digit animation
376
+ if (i === digits.length - 1) {
377
+ setTimeout(captureFrame, 100);
378
+ }
379
+ }, 300);
380
+ }, i * 100);
381
+ });
382
+
383
+ // Animate code line
384
+ const lines = document.querySelectorAll('.code-line');
385
+ lines[lines.length - 1].classList.add('animating');
386
+ setTimeout(() => {
387
+ lines[lines.length - 1].classList.remove('animating');
388
+ }, 500);
389
+
390
+ if (charIndex === text.length - 1) {
391
+ setTimeout(() => {
392
+ // Step 4: Show final result
393
+ steps[3].className = 'step p-4 border-l-4 border-blue-500 bg-blue-50';
394
+ progressFill.style.width = '100%';
395
+
396
+ // Show full binary representation
397
+ let fullBinary = '';
398
+ text.split('').forEach(char => {
399
+ fullBinary += char.charCodeAt(0).toString(2).padStart(8, '0') + ' ';
400
+ });
401
+ binaryVisualization.innerHTML = `
402
+ <div class="text-left mb-4">
403
+ <p class="font-medium">Исходный текст: <span class="text-blue-500">"${text}"</span></p>
404
+ <p class="font-medium">Двоичное представление:</p>
405
+ </div>
406
+ <div class="bg-gray-800 text-green-400 p-4 rounded-md text-left overflow-x-auto">
407
+ ${fullBinary.trim()}
408
+ </div>
409
+ `;
410
+
411
+ // Final capture
412
+ setTimeout(captureFrame, 500);
413
+ }, 1000);
414
+ }
415
+ }, charIndex * 1200);
416
+ });
417
+ }, 1000);
418
+ }
419
+ }, index * 800);
420
+ });
421
+ }, 1000);
422
+ }
423
+ });
424
+ </script>
425
+ <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 <a href="https://enzostvs-deepsite.hf.space" style="color: #fff;" target="_blank" >DeepSite</a> <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;"></p></body>
426
+ </html>