Hugging Face's logo

Spaces:
broadfield-dev
/
repo_to_md
Running

App Files Community
broadfield-dev commited on
Commit
f161a9f
·
verified ·
1 Parent(s): ef6691f

Delete html_template.html

Browse files
Files changed (1) hide show
  1. html_template.html +0 -480
html_template.html DELETED
@@ -1,480 +0,0 @@
1
- <!DOCTYPE html>
2
- <html>
3
- <head>
4
- <title>Repo & Files to Markdown</title>
5
- <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
6
- <style>
7
- body {
8
- font-family: 'Roboto', sans-serif;
9
- margin: 0;
10
- padding: 0;
11
- transition: background 0.3s, color 0.3s;
12
- }
13
-
14
- /* Dark Mode (Default) */
15
- body.dark-mode {
16
- background: linear-gradient(to bottom right, #1A252F, #2C3E50);
17
- color: #E0E6ED;
18
- }
19
-
20
- body.dark-mode .input-section,
21
- body.dark-mode .markdown-section,
22
- body.dark-mode .preview-section {
23
- background: #2F4054;
24
- box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
25
- }
26
-
27
- body.dark-mode input[type="text"],
28
- body.dark-mode input[type="file"] {
29
- background: #3A5063;
30
- color: #FFFFFF;
31
- border: 1px solid #4A6FA5;
32
- }
33
-
34
- body.dark-mode input[type="text"]:focus,
35
- body.dark-mode input[type="file"]:focus {
36
- border-color: #A66F3A;
37
- }
38
-
39
- body.dark-mode button {
40
- background: linear-gradient(to right, #3498DB, #2C7DB2);
41
- box-shadow: inset 0 0 5px rgba(52, 152, 219, 0.3);
42
- }
43
-
44
- body.dark-mode button:hover {
45
- background: linear-gradient(to right, #2C7DB2, #3498DB);
46
- box-shadow: inset 0 0 8px rgba(52, 152, 219, 0.5);
47
- }
48
-
49
- body.dark-mode #downloadBtn {
50
- background: linear-gradient(to right, #8B5A2B, #7F4D1A);
51
- box-shadow: inset 0 0 5px rgba(139, 90, 43, 0.3);
52
- }
53
-
54
- body.dark-mode #downloadBtn:hover {
55
- background: linear-gradient(to right, #7F4D1A, #8B5A2B);
56
- box-shadow: inset 0 0 8px rgba(139, 90, 43, 0.5);
57
- }
58
-
59
- body.dark-mode textarea {
60
- background: #3A5063;
61
- color: #FFFFFF;
62
- border: 1px solid #4A6FA5;
63
- }
64
-
65
- body.dark-mode #output {
66
- background: #3A5063;
67
- }
68
-
69
- body.dark-mode #output h1, body.dark-mode #output h2, body.dark-mode #output h3 {
70
- color: #FFFFFF;
71
- font-weight: 500;
72
- letter-spacing: 0.5px;
73
- }
74
-
75
- body.dark-mode #output code,
76
- body.dark-mode #output pre {
77
- background: #2C3E50;
78
- }
79
-
80
- body.dark-mode .spinner {
81
- border: 4px solid #2F4054;
82
- border-top: 4px solid #E0E6ED;
83
- }
84
-
85
- /* Light Mode */
86
- body.light-mode {
87
- background: linear-gradient(to bottom right, #f0f4f8, #d9e2ec);
88
- color: #333;
89
- }
90
-
91
- body.light-mode .input-section,
92
- body.light-mode .markdown-section,
93
- body.light-mode .preview-section {
94
- background: white;
95
- box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
96
- }
97
-
98
- body.light-mode input[type="text"],
99
- body.light-mode input[type="file"] {
100
- background: white;
101
- color: #333;
102
- border: 1px solid #ccc;
103
- }
104
-
105
- body.light-mode input[type="text"]:focus,
106
- body.light-mode input[type="file"]:focus {
107
- border-color: #4CAF50;
108
- }
109
-
110
- body.light-mode button {
111
- background: linear-gradient(to right, #4CAF50, #45a049);
112
- }
113
-
114
- body.light-mode button:hover {
115
- background: linear-gradient(to right, #45a049, #4CAF50);
116
- }
117
-
118
- body.light-mode #downloadBtn {
119
- background: linear-gradient(to right, #3498db, #2980b9);
120
- }
121
-
122
- body.light-mode #downloadBtn:hover {
123
- background: linear-gradient(to right, #2980b9, #3498db);
124
- }
125
-
126
- body.light-mode textarea {
127
- background: white;
128
- color: #333;
129
- border: 1px solid #ccc;
130
- }
131
-
132
- body.light-mode #output {
133
- background: white;
134
- }
135
-
136
- body.light-mode #output h1, body.light-mode #output h2, body.light-mode #output h3 {
137
- color: #333;
138
- }
139
-
140
- body.light-mode #output code,
141
- body.light-mode #output pre {
142
- background: #f4f4f4;
143
- }
144
-
145
- body.light-mode .spinner {
146
- border: 4px solid #f3f3f3;
147
- border-top: 4px solid #3498db;
148
- }
149
-
150
- /* Common Styles */
151
- .container {
152
- max-width: 1200px;
153
- margin: 20px auto;
154
- padding: 20px;
155
- position: relative;
156
- }
157
-
158
- .input-section, .markdown-section, .preview-section {
159
- border-radius: 10px;
160
- padding: 20px;
161
- margin-bottom: 20px;
162
- transition: background 0.3s, box-shadow 0.3s;
163
- }
164
-
165
- input[type="text"], input[type="file"] {
166
- width: 100%;
167
- padding: 10px;
168
- margin: 10px 0;
169
- border-radius: 5px;
170
- box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
171
- transition: border-color 0.3s;
172
- }
173
-
174
- button {
175
- padding: 10px 20px;
176
- color: white;
177
- border: none;
178
- border-radius: 5px;
179
- cursor: pointer;
180
- margin: 5px;
181
- transition: background 0.3s, transform 0.1s, box-shadow 0.3s;
182
- }
183
-
184
- button:active {
185
- transform: scale(0.97) translateY(2px);
186
- box-shadow: none;
187
- }
188
-
189
- .spinner {
190
- display: none;
191
- border-radius: 50%;
192
- width: 30px;
193
- height: 30px;
194
- animation: spin 1s linear infinite;
195
- margin: 20px auto;
196
- }
197
-
198
- @keyframes spin {
199
- 0% { transform: rotate(0deg); }
200
- 100% { transform: rotate(360deg); }
201
- }
202
-
203
- .output-container {
204
- display: flex;
205
- flex-wrap: wrap;
206
- gap: 20px;
207
- }
208
-
209
- .markdown-section, .preview-section {
210
- flex: 1;
211
- min-width: 300px;
212
- }
213
-
214
- textarea {
215
- width: 100%;
216
- height: 400px; /* This will be dynamically adjusted by JavaScript */
217
- margin-top: 10px;
218
- padding: 10px;
219
- border-radius: 5px;
220
- box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
221
- font-family: monospace;
222
- resize: vertical;
223
- transition: background 0.3s, color 0.3s, border 0.3s;
224
- }
225
-
226
- #output {
227
- margin-top: 10px;
228
- padding: 10px;
229
- max-height: 600px;
230
- overflow-y: auto;
231
- border-radius: 5px;
232
- border: 1px solid #4A6FA5;
233
- transition: background 0.3s, border 0.3s;
234
- }
235
-
236
- #output code {
237
- padding: 2px 4px;
238
- border-radius: 3px;
239
- }
240
-
241
- #output pre {
242
- padding: 10px;
243
- border-radius: 5px;
244
- overflow-x: auto;
245
- }
246
-
247
- .fade-in {
248
- animation: fadeIn 0.5s ease-in;
249
- }
250
-
251
- @keyframes fadeIn {
252
- from { opacity: 0; transform: scale(0.98); }
253
- to { opacity: 1; transform: scale(1.02); }
254
- }
255
-
256
- /* Toggle Switch */
257
- .mode-toggle {
258
- position: absolute;
259
- top: 20px;
260
- right: 20px;
261
- display: flex;
262
- align-items: center;
263
- }
264
-
265
- .mode-toggle label {
266
- margin-left: 10px;
267
- font-size: 14px;
268
- color: #E0E6ED;
269
- }
270
-
271
- .switch {
272
- position: relative;
273
- display: inline-block;
274
- width: 50px;
275
- height: 24px;
276
- }
277
-
278
- .switch input {
279
- opacity: 0;
280
- width: 0;
281
- height: 0;
282
- }
283
-
284
- .slider {
285
- position: absolute;
286
- cursor: pointer;
287
- top: 0;
288
- left: 0;
289
- right: 0;
290
- bottom: 0;
291
- background: #7F8C8D;
292
- transition: 0.3s;
293
- border-radius: 24px;
294
- }
295
-
296
- .slider:before {
297
- position: absolute;
298
- content: "";
299
- height: 18px;
300
- width: 18px;
301
- left: 3px;
302
- bottom: 3px;
303
- background: #ECF0F1;
304
- transition: 0.3s;
305
- border-radius: 50%;
306
- }
307
-
308
- input:checked + .slider {
309
- background: #4CAF50;
310
- }
311
-
312
- input:checked + .slider:before {
313
- transform: translateX(26px);
314
- }
315
-
316
- /* Copy Button */
317
- .copy-button {
318
- padding: 8px 16px;
319
- background: #3498DB;
320
- color: white;
321
- border: none;
322
- border-radius: 5px;
323
- cursor: pointer;
324
- margin-left: 10px;
325
- transition: background 0.3s, transform 0.1s;
326
- }
327
-
328
- .copy-button:hover {
329
- background: #2C7DB2;
330
- }
331
-
332
- .copy-button:active {
333
- transform: scale(0.97) translateY(2px);
334
- }
335
- </style>
336
- </head>
337
- <body class="dark-mode">
338
- <div class="container">
339
- <div class="mode-toggle">
340
- <label class="switch">
341
- <input type="checkbox" id="modeToggle" onchange="toggleMode()">
342
- <span class="slider"></span>
343
- </label>
344
- <label for="modeToggle">Light Mode</label>
345
- </div>
346
- <div class="input-section">
347
- <h1>Repository & Files to Markdown Converter</h1>
348
- <p>Enter a GitHub/Hugging Face Space URL (e.g., https://huggingface.co/spaces/username/space)</p>
349
- <input type="text" id="repoUrl" placeholder="Enter GitHub or Hugging Face Space URL">
350
- <p>OR upload files (select multiple files or a folder - folder upload supported in Chrome)</p>
351
- <input type="file" id="fileInput" multiple webkitdirectory>
352
- <br>
353
- <button onclick="processRepo()">Convert URL</button>
354
- <button onclick="processFiles()">Convert Files</button>
355
- <button id="downloadBtn" style="display: none;" onclick="downloadMarkdown()">Download .md</button>
356
- <div id="spinner" class="spinner"></div>
357
- </div>
358
- <div class="output-container">
359
- <div class="markdown-section">
360
- <h2>Markdown Output: <button class="copy-button" onclick="copyToClipboard()">Copy</button></h2>
361
- <textarea id="markdownOutput" readonly></textarea>
362
- </div>
363
- <div class="preview-section">
364
- <h2>Preview:</h2>
365
- <div id="output"></div>
366
- </div>
367
- </div>
368
- </div>
369
- <script>
370
- let currentMarkdown = '';
371
- let currentFilename = '';
372
-
373
- function toggleMode() {
374
- const body = document.body;
375
- const toggle = document.getElementById('modeToggle');
376
- body.classList.toggle('dark-mode', !toggle.checked);
377
- body.classList.toggle('light-mode', toggle.checked);
378
- }
379
-
380
- async function processRepo() {
381
- const repoUrl = document.getElementById('repoUrl').value;
382
- await processContent('/process', { repo_url: repoUrl });
383
- }
384
-
385
- async function processFiles() {
386
- const files = document.getElementById('fileInput').files;
387
- if (files.length === 0) {
388
- alert('Please select at least one file or folder');
389
- return;
390
- }
391
- const formData = new FormData();
392
- for (let file of files) {
393
- formData.append('files[]', file);
394
- }
395
- await processContent('/process', formData, false);
396
- }
397
-
398
- async function processContent(url, data, isJson = true) {
399
- const spinner = document.getElementById('spinner');
400
- const buttons = document.querySelectorAll('button');
401
-
402
- spinner.style.display = 'block';
403
- buttons.forEach(btn => btn.disabled = true);
404
-
405
- try {
406
- const options = {
407
- method: 'POST',
408
- ...(isJson ? {
409
- headers: { 'Content-Type': 'application/json' },
410
- body: JSON.stringify(data)
411
- } : { body: data })
412
- };
413
- const response = await fetch(url, options);
414
- const result = await response.json();
415
-
416
- if (result.error) {
417
- alert(result.error);
418
- return;
419
- }
420
-
421
- currentMarkdown = result.markdown;
422
- currentFilename = result.filename;
423
- document.getElementById('markdownOutput').value = result.markdown;
424
- document.getElementById('output').innerHTML = result.html;
425
- document.getElementById('downloadBtn').style.display = 'inline-block';
426
-
427
- const markdownOutput = document.getElementById('markdownOutput');
428
- const output = document.getElementById('output');
429
- markdownOutput.classList.add('fade-in');
430
- output.classList.add('fade-in');
431
- setTimeout(() => {
432
- markdownOutput.classList.remove('fade-in');
433
- output.classList.remove('fade-in');
434
- }, 500);
435
- } catch (error) {
436
- alert('An error occurred: ' + error.message);
437
- } finally {
438
- spinner.style.display = 'none';
439
- buttons.forEach(btn => btn.disabled = false);
440
- }
441
- }
442
-
443
- async function downloadMarkdown() {
444
- try {
445
- const response = await fetch('/download', {
446
- method: 'POST',
447
- headers: {
448
- 'Content-Type': 'application/json',
449
- },
450
- body: JSON.stringify({
451
- markdown: currentMarkdown,
452
- filename: currentFilename
453
- })
454
- });
455
- const blob = await response.blob();
456
- const url = window.URL.createObjectURL(blob);
457
- const a = document.createElement('a');
458
- a.href = url;
459
- a.download = currentFilename;
460
- document.body.appendChild(a);
461
- a.click();
462
- a.remove();
463
- window.URL.revokeObjectURL(url);
464
- } catch (error) {
465
- alert('Error downloading file: ' + error.message);
466
- }
467
- }
468
-
469
- async function copyToClipboard() {
470
- const markdownOutput = document.getElementById('markdownOutput');
471
- try {
472
- await navigator.clipboard.writeText(markdownOutput.value);
473
- alert('Markdown copied to clipboard!');
474
- } catch (err) {
475
- alert('Failed to copy to clipboard: ' + err.message);
476
- }
477
- }
478
- </script>
479
- </body>
480
- </html>