testingspace / frontend /script.js
Ay-ouya's picture
Upload 3 files
a6a0e08 verified
document.getElementById("uploadForm").addEventListener("submit", async (e) => {
e.preventDefault();
const fileInput = document.getElementById("excelFile");
const promptInput = document.getElementById("prompt");
const visualizationImage = document.getElementById("visualizationImage");
const generatedCodeElement = document.getElementById("generatedCode");
const loadingElement = document.getElementById("loading");
const errorElement = document.getElementById("error");
visualizationImage.src = "";
visualizationImage.classList.remove("loaded");
generatedCodeElement.textContent = "";
errorElement.textContent = "";
errorElement.classList.add("hidden");
loadingElement.classList.remove("hidden");
try {
const uploadFormData = new FormData();
uploadFormData.append("file", fileInput.files[0]);
const uploadResponse = await fetch("/upload/", {
method: "POST",
body: uploadFormData,
});
if (!uploadResponse.ok) {
const errorData = await uploadResponse.json();
throw new Error(`File upload failed: ${errorData.detail || 'Unknown error'}`);
}
const uploadResult = await uploadResponse.json();
console.log("βœ… File uploaded:", uploadResult);
const visFormData = new FormData();
visFormData.append("filename", uploadResult.filename);
visFormData.append("prompt", promptInput.value);
const visResponse = await fetch("/generate-visualization/", {
method: "POST",
body: visFormData,
});
if (!visResponse.ok) {
const errorData = await visResponse.json();
throw new Error(`Visualization generation failed: ${errorData.detail || 'Unknown error'}`);
}
const result = await visResponse.json();
console.log("πŸ”Ή Response from API:", result);
if (result.plot_url) {
visualizationImage.src = result.plot_url; // Relative URL works in Spaces
visualizationImage.onload = () => {
visualizationImage.classList.add("loaded");
};
generatedCodeElement.textContent = result.generated_code;
} else {
throw new Error("No plot URL received.");
}
} catch (error) {
console.error("Error:", error);
errorElement.textContent = `An error occurred: ${error.message}`;
errorElement.classList.remove("hidden");
} finally {
loadingElement.classList.add("hidden");
}
});