Spaces:
Sleeping
Sleeping
File size: 4,384 Bytes
97860ae f6af6e7 c94ff42 97860ae 58a704a 97860ae c94ff42 58a704a 97860ae c94ff42 97860ae 6bfc3c8 97860ae c94ff42 97860ae c94ff42 97860ae c94ff42 97860ae c94ff42 58a704a c94ff42 58a704a c94ff42 58a704a c94ff42 97860ae c94ff42 58a704a c94ff42 58a704a c94ff42 97860ae 6bfc3c8 97860ae c94ff42 97860ae c94ff42 f6af6e7 97860ae |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 |
<!DOCTYPE html>
<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>
|