Hugging Face's logo

Spaces:
broadfield-dev
/
repo_to_md
Running

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

Create html_template.html

Browse files
Files changed (1) hide show
  1. html_template.html +162 -0
html_template.html ADDED
@@ -0,0 +1,162 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html>
3
+ <head>
4
+ <title>Repo & Files to Markdown</title>
5
+ <style>
6
+ body {
7
+ font-family: Arial, sans-serif;
8
+ margin: 20px;
9
+ max-width: 1200px;
10
+ margin: 0 auto;
11
+ }
12
+ .container {
13
+ padding: 20px;
14
+ }
15
+ textarea {
16
+ width: 100%;
17
+ height: 400px;
18
+ margin-top: 20px;
19
+ font-family: monospace;
20
+ }
21
+ button {
22
+ padding: 10px 20px;
23
+ background-color: #4CAF50;
24
+ color: white;
25
+ border: none;
26
+ cursor: pointer;
27
+ margin: 5px;
28
+ }
29
+ button:hover {
30
+ background-color: #45a049;
31
+ }
32
+ #output {
33
+ margin-top: 20px;
34
+ border: 1px solid #ddd;
35
+ padding: 20px;
36
+ background-color: #f9f9f9;
37
+ }
38
+ .spinner {
39
+ display: none;
40
+ border: 4px solid #f3f3f3;
41
+ border-top: 4px solid #3498db;
42
+ border-radius: 50%;
43
+ width: 30px;
44
+ height: 30px;
45
+ animation: spin 1s linear infinite;
46
+ margin: 20px auto;
47
+ }
48
+ @keyframes spin {
49
+ 0% { transform: rotate(0deg); }
50
+ 100% { transform: rotate(360deg); }
51
+ }
52
+ </style>
53
+ </head>
54
+ <body>
55
+ <div class="container">
56
+ <h1>Repository & Files to Markdown Converter</h1>
57
+ <p>Enter a GitHub/Hugging Face Space URL (e.g., https://huggingface.co/spaces/username/space)</p>
58
+ <input type="text" id="repoUrl" style="width: 100%; padding: 8px;" placeholder="Enter GitHub or Hugging Face Space URL">
59
+ <p>OR upload files (select multiple files or a folder - folder upload supported in Chrome)</p>
60
+ <input type="file" id="fileInput" multiple webkitdirectory style="margin: 10px 0;">
61
+ <br>
62
+ <button onclick="processRepo()">Convert URL</button>
63
+ <button onclick="processFiles()">Convert Files</button>
64
+ <button id="downloadBtn" style="display: none;" onclick="downloadMarkdown()">Download .md</button>
65
+ <div id="spinner" class="spinner"></div>
66
+
67
+ <h2>Markdown Output:</h2>
68
+ <textarea id="markdownOutput" readonly></textarea>
69
+
70
+ <h2>Preview:</h2>
71
+ <div id="output"></div>
72
+ </div>
73
+ <script>
74
+ let currentMarkdown = '';
75
+ let currentFilename = '';
76
+
77
+ async function processRepo() {
78
+ const repoUrl = document.getElementById('repoUrl').value;
79
+ await processContent('/process', { repo_url: repoUrl });
80
+ }
81
+
82
+ async function processFiles() {
83
+ const files = document.getElementById('fileInput').files;
84
+ if (files.length === 0) {
85
+ alert('Please select at least one file or folder');
86
+ return;
87
+ }
88
+
89
+ const formData = new FormData();
90
+ for (let file of files) {
91
+ formData.append('files[]', file);
92
+ }
93
+
94
+ await processContent('/process', formData, false);
95
+ }
96
+
97
+ async function processContent(url, data, isJson = true) {
98
+ const spinner = document.getElementById('spinner');
99
+ const buttons = document.querySelectorAll('button');
100
+
101
+ spinner.style.display = 'block';
102
+ buttons.forEach(btn => btn.disabled = true);
103
+
104
+ try {
105
+ const options = {
106
+ method: 'POST',
107
+ ...(isJson ? {
108
+ headers: { 'Content-Type': 'application/json' },
109
+ body: JSON.stringify(data)
110
+ } : { body: data })
111
+ };
112
+
113
+ const response = await fetch(url, options);
114
+ const result = await response.json();
115
+
116
+ if (result.error) {
117
+ alert(result.error);
118
+ return;
119
+ }
120
+
121
+ currentMarkdown = result.markdown;
122
+ currentFilename = result.filename;
123
+ document.getElementById('markdownOutput').value = result.markdown;
124
+ document.getElementById('output').innerHTML = result.html;
125
+ document.getElementById('downloadBtn').style.display = 'inline-block';
126
+ } catch (error) {
127
+ alert('An error occurred: ' + error.message);
128
+ } finally {
129
+ spinner.style.display = 'none';
130
+ buttons.forEach(btn => btn.disabled = false);
131
+ }
132
+ }
133
+
134
+ async function downloadMarkdown() {
135
+ try {
136
+ const response = await fetch('/download', {
137
+ method: 'POST',
138
+ headers: {
139
+ 'Content-Type': 'application/json',
140
+ },
141
+ body: JSON.stringify({
142
+ markdown: currentMarkdown,
143
+ filename: currentFilename
144
+ })
145
+ });
146
+
147
+ const blob = await response.blob();
148
+ const url = window.URL.createObjectURL(blob);
149
+ const a = document.createElement('a');
150
+ a.href = url;
151
+ a.download = currentFilename;
152
+ document.body.appendChild(a);
153
+ a.click();
154
+ a.remove();
155
+ window.URL.revokeObjectURL(url);
156
+ } catch (error) {
157
+ alert('Error downloading file: ' + error.message);
158
+ }
159
+ }
160
+ </script>
161
+ </body>
162
+ </html>