init

public/app.js

@@ -0,0 +1,64 @@
+const form = document.getElementById("job-form");
+const filesInput = document.getElementById("files");
+const promptInput = document.getElementById("prompt");
+const statusBox = document.getElementById("status");
+const resultBox = document.getElementById("result");
+const submitButton = document.getElementById("submit-button");
+const fileList = document.getElementById("file-list");
+
+function setStatus(kind, message) {
+  statusBox.className = `status ${kind}`;
+  statusBox.textContent = message;
+}
+
+function renderFiles() {
+  fileList.innerHTML = "";
+
+  for (const file of filesInput.files) {
+    const pill = document.createElement("div");
+    pill.className = "file-pill";
+    pill.textContent = `${file.name} (${Math.round(file.size / 1024)} KB)`;
+    fileList.appendChild(pill);
+  }
+}
+
+filesInput.addEventListener("change", renderFiles);
+
+form.addEventListener("submit", async (event) => {
+  event.preventDefault();
+
+  resultBox.hidden = true;
+  resultBox.innerHTML = "";
+  submitButton.disabled = true;
+  setStatus("busy", "Uploading files and processing them. This can take a little while.");
+
+  try {
+    const payload = new FormData();
+    for (const file of filesInput.files) {
+      payload.append("files", file);
+    }
+    payload.append("prompt", promptInput.value.trim());
+
+    const response = await fetch("/api/process", {
+      method: "POST",
+      body: payload,
+    });
+
+    const body = await response.json();
+
+    if (!response.ok) {
+      throw new Error(body.error || "The request failed.");
+    }
+
+    setStatus("success", "Result ready.");
+    resultBox.hidden = false;
+    resultBox.innerHTML = `
+      <strong>Result ready.</strong>
+      <a href="${body.downloadUrl}">Download ${body.resultFile}</a>
+    `;
+  } catch (error) {
+    setStatus("error", error.message);
+  } finally {
+    submitButton.disabled = false;
+  }
+});