Spaces:
Sleeping
Sleeping
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>ConlluEditor Online</title> | |
| <style> | |
| body { | |
| font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; | |
| margin: 1.5rem; | |
| } | |
| #dropzone { | |
| border: 2px dashed #888; | |
| border-radius: 8px; | |
| padding: 20px; | |
| text-align: center; | |
| color: #555; | |
| cursor: pointer; | |
| margin-bottom: 1rem; | |
| } | |
| #dropzone.dragover { | |
| border-color: #007bff; | |
| background-color: #f0f8ff; | |
| } | |
| iframe { | |
| width: 100%; | |
| height: 70vh; | |
| border: 1px solid #ccc; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <h1>ConlluEditor Online</h1> | |
| <button id="debugBtn">Debug</button> | |
| <pre id="debugOutput" style="white-space: pre-wrap; background:#f7f7f7; padding:1rem; border:1px solid #ccc; margin-top:1rem;"></pre> | |
| <!-- Drag-and-drop upload panel --> | |
| <div id="dropzone"> | |
| Drag & drop a .conllu file here, or click to select. | |
| </div> | |
| <input type="file" id="fileInput" accept=".conllu" style="display:none"> | |
| <!-- File list + download --> | |
| <div> | |
| <label><strong>Available files:</strong></label> | |
| <select id="fileSelect"></select> | |
| <button id="openBtn">Open in editor</button> | |
| <button id="downloadBtn">Download</button> | |
| </div> | |
| <!-- Embedded ConlluEditor --> | |
| <iframe id="editorFrame" src="/editor/"></iframe> | |
| <script> | |
| const dropzone = document.getElementById("dropzone"); | |
| const fileInput = document.getElementById("fileInput"); | |
| const fileSelect = document.getElementById("fileSelect"); | |
| const editorFrame = document.getElementById("editorFrame"); | |
| // ----------------------------- | |
| // Drag & Drop + Click Upload | |
| // ----------------------------- | |
| dropzone.addEventListener("click", () => fileInput.click()); | |
| dropzone.addEventListener("dragover", (e) => { | |
| e.preventDefault(); | |
| dropzone.classList.add("dragover"); | |
| }); | |
| dropzone.addEventListener("dragleave", (e) => { | |
| e.preventDefault(); | |
| dropzone.classList.remove("dragover"); | |
| }); | |
| dropzone.addEventListener("drop", (e) => { | |
| e.preventDefault(); | |
| dropzone.classList.remove("dragover"); | |
| const file = e.dataTransfer.files[0]; | |
| if (file) uploadFile(file); | |
| }); | |
| fileInput.addEventListener("change", () => { | |
| if (fileInput.files.length > 0) { | |
| uploadFile(fileInput.files[0]); | |
| } | |
| }); | |
| // ----------------------------- | |
| // Upload Function | |
| // ----------------------------- | |
| async function uploadFile(file) { | |
| if (!file) { | |
| alert("No file selected"); | |
| return; | |
| } | |
| if (!file.name.toLowerCase().endsWith(".conllu")) { | |
| alert("Please upload a .conllu file"); | |
| return; | |
| } | |
| const form = new FormData(); | |
| form.append("file", file); | |
| const res = await fetch("/api/upload", { | |
| method: "POST", | |
| body: form | |
| }); | |
| if (res.ok) { | |
| refreshFileList(); | |
| } else { | |
| alert("Upload failed"); | |
| } | |
| } | |
| // ----------------------------- | |
| // Refresh File List | |
| // ----------------------------- | |
| async function refreshFileList() { | |
| const res = await fetch("/api/files"); | |
| const files = await res.json(); | |
| fileSelect.innerHTML = ""; | |
| files.forEach(f => { | |
| const opt = document.createElement("option"); | |
| opt.value = f; | |
| opt.textContent = f; | |
| fileSelect.appendChild(opt); | |
| }); | |
| } | |
| // ----------------------------- | |
| // Open in Editor | |
| // ----------------------------- | |
| document.getElementById("openBtn").addEventListener("click", () => { | |
| const f = fileSelect.value; | |
| if (!f) return; | |
| editorFrame.src = "/editor/?file=" + encodeURIComponent(f); | |
| }); | |
| // ----------------------------- | |
| // Download | |
| // ----------------------------- | |
| document.getElementById("downloadBtn").addEventListener("click", () => { | |
| const f = fileSelect.value; | |
| if (!f) return; | |
| window.location.href = "/api/download/" + encodeURIComponent(f); | |
| }); | |
| // Initial load | |
| refreshFileList(); | |
| document.getElementById("debugBtn").addEventListener("click", async () => { | |
| const res = await fetch("/api/debug"); | |
| const text = await res.text(); | |
| document.getElementById("debugOutput").textContent = text; | |
| }); | |
| </script> | |
| </body> | |
| </html> | |