Hugging Face's logo

Spaces:
broadfield-dev
/
repo_to_md
Running

App Files Community
broadfield-dev commited on
Commit
ed84d3d
·
verified ·
1 Parent(s): 63434da

Update html_template.html

Browse files
Files changed (1) hide show
  1. html_template.html +124 -44
html_template.html CHANGED
@@ -2,38 +2,60 @@
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;
@@ -49,58 +71,109 @@
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',
@@ -109,20 +182,28 @@
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 {
@@ -130,7 +211,7 @@
130
  buttons.forEach(btn => btn.disabled = false);
131
  }
132
  }
133
-
134
  async function downloadMarkdown() {
135
  try {
136
  const response = await fetch('/download', {
@@ -143,7 +224,6 @@
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');
@@ -159,4 +239,4 @@
159
  }
160
  </script>
161
  </body>
162
- </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
+ background: linear-gradient(to bottom right, #f0f4f8, #d9e2ec);
10
+ margin: 0;
11
+ padding: 0;
12
  }
13
  .container {
14
+ max-width: 1200px;
15
+ margin: 20px auto;
16
  padding: 20px;
17
  }
18
+ .input-section, .markdown-section, .preview-section {
19
+ background: white;
20
+ border-radius: 10px;
21
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
22
+ padding: 20px;
23
+ margin-bottom: 20px;
24
+ }
25
+ input[type="text"], input[type="file"] {
26
  width: 100%;
27
+ padding: 10px;
28
+ margin: 10px 0;
29
+ border: 1px solid #ccc;
30
+ border-radius: 5px;
31
+ box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
32
+ transition: border-color 0.3s;
33
+ }
34
+ input[type="text"]:focus, input[type="file"]:focus {
35
+ border-color: #4CAF50;
36
+ outline: none;
37
  }
38
  button {
39
  padding: 10px 20px;
40
+ background: linear-gradient(to right, #4CAF50, #45a049);
41
  color: white;
42
  border: none;
43
+ border-radius: 5px;
44
  cursor: pointer;
45
  margin: 5px;
46
+ transition: background 0.3s, transform 0.1s;
47
  }
48
  button:hover {
49
+ background: linear-gradient(to right, #45a049, #4CAF50);
50
  }
51
+ button:active {
52
+ transform: scale(0.98);
53
+ }
54
+ #downloadBtn {
55
+ background: linear-gradient(to right, #3498db, #2980b9);
56
+ }
57
+ #downloadBtn:hover {
58
+ background: linear-gradient(to right, #2980b9, #3498db);
59
  }
60
  .spinner {
61
  display: none;
 
71
  0% { transform: rotate(0deg); }
72
  100% { transform: rotate(360deg); }
73
  }
74
+ .output-container {
75
+ display: flex;
76
+ flex-wrap: wrap;
77
+ gap: 20px;
78
+ }
79
+ .markdown-section, .preview-section {
80
+ flex: 1;
81
+ min-width: 300px;
82
+ }
83
+ textarea {
84
+ width: 100%;
85
+ height: 400px;
86
+ margin-top: 10px;
87
+ padding: 10px;
88
+ border: 1px solid #ccc;
89
+ border-radius: 5px;
90
+ box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
91
+ font-family: monospace;
92
+ resize: vertical;
93
+ }
94
+ #output {
95
+ margin-top: 10px;
96
+ padding: 10px;
97
+ max-height: 600px;
98
+ overflow-y: auto;
99
+ }
100
+ #output h1, #output h2, #output h3 {
101
+ color: #333;
102
+ }
103
+ #output code {
104
+ background: #f4f4f4;
105
+ padding: 2px 4px;
106
+ border-radius: 3px;
107
+ }
108
+ #output pre {
109
+ background: #f4f4f4;
110
+ padding: 10px;
111
+ border-radius: 5px;
112
+ overflow-x: auto;
113
+ }
114
+ .fade-in {
115
+ animation: fadeIn 0.5s ease-in;
116
+ }
117
+ @keyframes fadeIn {
118
+ from { opacity: 0; }
119
+ to { opacity: 1; }
120
+ }
121
  </style>
122
  </head>
123
  <body>
124
  <div class="container">
125
+ <div class="input-section">
126
+ <h1>Repository & Files to Markdown Converter</h1>
127
+ <p>Enter a GitHub/Hugging Face Space URL (e.g., https://huggingface.co/spaces/username/space)</p>
128
+ <input type="text" id="repoUrl" placeholder="Enter GitHub or Hugging Face Space URL">
129
+ <p>OR upload files (select multiple files or a folder - folder upload supported in Chrome)</p>
130
+ <input type="file" id="fileInput" multiple webkitdirectory>
131
+ <br>
132
+ <button onclick="processRepo()">Convert URL</button>
133
+ <button onclick="processFiles()">Convert Files</button>
134
+ <button id="downloadBtn" style="display: none;" onclick="downloadMarkdown()">Download .md</button>
135
+ <div id="spinner" class="spinner"></div>
136
+ </div>
137
+ <div class="output-container">
138
+ <div class="markdown-section">
139
+ <h2>Markdown Output:</h2>
140
+ <textarea id="markdownOutput" readonly></textarea>
141
+ </div>
142
+ <div class="preview-section">
143
+ <h2>Preview:</h2>
144
+ <div id="output"></div>
145
+ </div>
146
+ </div>
147
  </div>
148
  <script>
149
  let currentMarkdown = '';
150
  let currentFilename = '';
151
+
152
  async function processRepo() {
153
  const repoUrl = document.getElementById('repoUrl').value;
154
  await processContent('/process', { repo_url: repoUrl });
155
  }
156
+
157
  async function processFiles() {
158
  const files = document.getElementById('fileInput').files;
159
  if (files.length === 0) {
160
  alert('Please select at least one file or folder');
161
  return;
162
  }
 
163
  const formData = new FormData();
164
  for (let file of files) {
165
  formData.append('files[]', file);
166
  }
 
167
  await processContent('/process', formData, false);
168
  }
169
+
170
  async function processContent(url, data, isJson = true) {
171
  const spinner = document.getElementById('spinner');
172
  const buttons = document.querySelectorAll('button');
173
+
174
  spinner.style.display = 'block';
175
  buttons.forEach(btn => btn.disabled = true);
176
+
177
  try {
178
  const options = {
179
  method: 'POST',
 
182
  body: JSON.stringify(data)
183
  } : { body: data })
184
  };
 
185
  const response = await fetch(url, options);
186
  const result = await response.json();
187
+
188
  if (result.error) {
189
  alert(result.error);
190
  return;
191
  }
192
+
193
  currentMarkdown = result.markdown;
194
  currentFilename = result.filename;
195
  document.getElementById('markdownOutput').value = result.markdown;
196
  document.getElementById('output').innerHTML = result.html;
197
  document.getElementById('downloadBtn').style.display = 'inline-block';
198
+
199
+ const markdownOutput = document.getElementById('markdownOutput');
200
+ const output = document.getElementById('output');
201
+ markdownOutput.classList.add('fade-in');
202
+ output.classList.add('fade-in');
203
+ setTimeout(() => {
204
+ markdownOutput.classList.remove('fade-in');
205
+ output.classList.remove('fade-in');
206
+ }, 500);
207
  } catch (error) {
208
  alert('An error occurred: ' + error.message);
209
  } finally {
 
211
  buttons.forEach(btn => btn.disabled = false);
212
  }
213
  }
214
+
215
  async function downloadMarkdown() {
216
  try {
217
  const response = await fetch('/download', {
 
224
  filename: currentFilename
225
  })
226
  });
 
227
  const blob = await response.blob();
228
  const url = window.URL.createObjectURL(blob);
229
  const a = document.createElement('a');
 
239
  }
240
  </script>
241
  </body>
242
+ </html>