Spaces:
Running
Running
File size: 3,002 Bytes
180dc07 4435f63 180dc07 a9fa82a 180dc07 |
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 |
document.addEventListener("DOMContentLoaded", function () {
const fileInput = document.getElementById("data-upload");
const fileName = document.getElementById("file-name");
const promptInput = document.getElementById("visualization-prompt");
const visualizeBtn = document.getElementById("visualize-btn");
const loadingContainer = document.getElementById("loading-container");
const resultsSection = document.getElementById("results-section");
const img_chart = document.getElementById("results-chart");
const newVisualizationBtn = document.getElementById("new-visualization-btn");
const downloadChartBtn = document.getElementById("download-chart-btn");
const downloadCodeBtn = document.getElementById("download-code-btn");
fileInput.addEventListener("change", function () {
if (this.files && this.files[0]) {
fileName.textContent = this.files[0].name;
} else {
fileName.textContent = "No Data chosen";
}
});
visualizeBtn.addEventListener("click", async function () {
try {
if (fileInput.files.length === 0) {
showNotification("warning", "No file chosen ...");
return;
}
const prompt = promptInput.value.trim();
if (!prompt) {
showNotification("warning", "discribe your needs ...");
return;
}
loadingContainer.style.display = "block";
visualizeBtn.disabled = true;
const formdata = new FormData();
formdata.append("file", fileInput.files[0]);
formdata.append("user_need", prompt);
const response = await fetch("/plot", {
method: "POST",
body: formdata,
});
const result = await response.json();
if (result.error) {
showNotification("error", result.error);
return;
}
const url = URL.createObjectURL(result.plot);
img_chart.src = url;
resultsSection.style.display = "block";
resultsSection.scrollIntoView({ behavior: "smooth" });
} catch (error) {
showNotification("error", error);
} finally {
loadingContainer.style.display = "none";
visualizeBtn.disabled = false;
}
});
newVisualizationBtn.addEventListener("click", function () {
fileInput.files = [];
//fileName.textContent = "No Data chosen";
promptInput.value = "";
resultsSection.style.display = "none";
document.querySelector(".upload").scrollIntoView({ behavior: "smooth" });
});
downloadChartBtn.addEventListener("click", function () {
const link = document.createElement("a");
link.download = "chart_visualization.png";
link.href = img_chart.src;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
});
downloadCodeBtn.addEventListener("click", function () {
const codeContent = document.getElementById("code-content").innerText;
const blob = new Blob([codeContent], { type: "text/plain" });
const url = URL.createObjectURL(blob);
const a = document.createElement("a");
a.href = url;
a.download = "visualization_code.py";
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(url);
});
});
|