Spaces:
Running
Running
| <html> | |
| <head> | |
| <title>Repo & Files to Markdown</title> | |
| <style> | |
| body { | |
| font-family: Arial, sans-serif; | |
| margin: 20px; | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| } | |
| .container { | |
| padding: 20px; | |
| } | |
| textarea { | |
| width: 100%; | |
| height: 400px; | |
| margin-top: 20px; | |
| font-family: monospace; | |
| } | |
| button { | |
| padding: 10px 20px; | |
| background-color: #4CAF50; | |
| color: white; | |
| border: none; | |
| cursor: pointer; | |
| margin: 5px; | |
| } | |
| button:hover { | |
| background-color: #45a049; | |
| } | |
| #output { | |
| margin-top: 20px; | |
| border: 1px solid #ddd; | |
| padding: 20px; | |
| background-color: #f9f9f9; | |
| } | |
| .spinner { | |
| display: none; | |
| border: 4px solid #f3f3f3; | |
| border-top: 4px solid #3498db; | |
| border-radius: 50%; | |
| width: 30px; | |
| height: 30px; | |
| animation: spin 1s linear infinite; | |
| margin: 20px auto; | |
| } | |
| @keyframes spin { | |
| 0% { transform: rotate(0deg); } | |
| 100% { transform: rotate(360deg); } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <h1>Repository & Files to Markdown Converter</h1> | |
| <p>Enter a GitHub/Hugging Face Space URL (e.g., https://huggingface.co/spaces/username/space)</p> | |
| <input type="text" id="repoUrl" style="width: 100%; padding: 8px;" placeholder="Enter GitHub or Hugging Face Space URL"> | |
| <p>OR upload files (select multiple files or a folder - folder upload supported in Chrome)</p> | |
| <input type="file" id="fileInput" multiple webkitdirectory style="margin: 10px 0;"> | |
| <br> | |
| <button onclick="processRepo()">Convert URL</button> | |
| <button onclick="processFiles()">Convert Files</button> | |
| <button id="downloadBtn" style="display: none;" onclick="downloadMarkdown()">Download .md</button> | |
| <div id="spinner" class="spinner"></div> | |
| <h2>Markdown Output:</h2> | |
| <textarea id="markdownOutput" readonly></textarea> | |
| <h2>Preview:</h2> | |
| <div id="output"></div> | |
| </div> | |
| <script> | |
| let currentMarkdown = ''; | |
| let currentFilename = ''; | |
| async function processRepo() { | |
| const repoUrl = document.getElementById('repoUrl').value; | |
| await processContent('/process', { repo_url: repoUrl }); | |
| } | |
| async function processFiles() { | |
| const files = document.getElementById('fileInput').files; | |
| if (files.length === 0) { | |
| alert('Please select at least one file or folder'); | |
| return; | |
| } | |
| const formData = new FormData(); | |
| for (let file of files) { | |
| formData.append('files[]', file); | |
| } | |
| await processContent('/process', formData, false); | |
| } | |
| async function processContent(url, data, isJson = true) { | |
| const spinner = document.getElementById('spinner'); | |
| const buttons = document.querySelectorAll('button'); | |
| spinner.style.display = 'block'; | |
| buttons.forEach(btn => btn.disabled = true); | |
| try { | |
| const options = { | |
| method: 'POST', | |
| ...(isJson ? { | |
| headers: { 'Content-Type': 'application/json' }, | |
| body: JSON.stringify(data) | |
| } : { body: data }) | |
| }; | |
| const response = await fetch(url, options); | |
| const result = await response.json(); | |
| if (result.error) { | |
| alert(result.error); | |
| return; | |
| } | |
| currentMarkdown = result.markdown; | |
| currentFilename = result.filename; | |
| document.getElementById('markdownOutput').value = result.markdown; | |
| document.getElementById('output').innerHTML = result.html; | |
| document.getElementById('downloadBtn').style.display = 'inline-block'; | |
| } catch (error) { | |
| alert('An error occurred: ' + error.message); | |
| } finally { | |
| spinner.style.display = 'none'; | |
| buttons.forEach(btn => btn.disabled = false); | |
| } | |
| } | |
| async function downloadMarkdown() { | |
| try { | |
| const response = await fetch('/download', { | |
| method: 'POST', | |
| headers: { | |
| 'Content-Type': 'application/json', | |
| }, | |
| body: JSON.stringify({ | |
| markdown: currentMarkdown, | |
| filename: currentFilename | |
| }) | |
| }); | |
| const blob = await response.blob(); | |
| const url = window.URL.createObjectURL(blob); | |
| const a = document.createElement('a'); | |
| a.href = url; | |
| a.download = currentFilename; | |
| document.body.appendChild(a); | |
| a.click(); | |
| a.remove(); | |
| window.URL.revokeObjectURL(url); | |
| } catch (error) { | |
| alert('Error downloading file: ' + error.message); | |
| } | |
| } | |
| </script> | |
| </body> | |
| </html> | |