| let chartInstance = null;
|
|
|
| document.getElementById("fileInput").addEventListener("change", function () {
|
| let file = this.files[0];
|
| if (!file) return;
|
|
|
| let reader = new FileReader();
|
|
|
| reader.onload = function (e) {
|
| let text = e.target.result.trim();
|
| let lines = text.split(/\r?\n/);
|
|
|
|
|
| let values = [];
|
| for (let line of lines) {
|
| let v = parseFloat(line.trim());
|
| if (!isNaN(v)) values.push(v);
|
| }
|
|
|
| if (values.length === 0) {
|
| alert("No numeric data found in CSV");
|
| return;
|
| }
|
|
|
|
|
| document.getElementById("dataPreview").textContent =
|
| values.slice(0, 10).join("\n");
|
|
|
|
|
| fetch("/predict", {
|
| method: "POST",
|
| headers: {
|
| "Content-Type": "application/json"
|
| },
|
| body: JSON.stringify({ data: values })
|
| })
|
| .then(res => res.json())
|
| .then(res => {
|
| if (res.error) {
|
| alert("Error from server: " + res.error);
|
| return;
|
| }
|
|
|
|
|
| document.getElementById("lastValue").textContent = res.last.toFixed(6);
|
| document.getElementById("nextPred").textContent = res.next.toFixed(6);
|
|
|
| let future = res.future;
|
| document.getElementById("futurePreds").textContent =
|
| future.map(v => v.toFixed(6)).join("\n");
|
|
|
|
|
| document.getElementById("trainMSE").textContent = res.train_mse.toFixed(6);
|
| document.getElementById("testMSE").textContent = res.test_mse.toFixed(6);
|
|
|
|
|
| drawGraph(future);
|
| })
|
|
|
| .catch(err => {
|
| console.error(err);
|
| alert("Error calling backend");
|
| });
|
| };
|
|
|
| reader.readAsText(file);
|
| });
|
|
|
|
|
| function drawGraph(data) {
|
| const ctx = document.getElementById("forecastChart").getContext("2d");
|
|
|
| if (chartInstance) {
|
| chartInstance.destroy();
|
| }
|
|
|
| chartInstance = new Chart(ctx, {
|
| type: "line",
|
| data: {
|
| labels: data.map((_, i) => i + 1),
|
| datasets: [{
|
| label: "Predicted Workload",
|
| data: data,
|
| borderColor: "#1e88e5",
|
| fill: false,
|
| tension: 0.3
|
| }]
|
| },
|
| options: {
|
| responsive: true,
|
| scales: {
|
| x: { title: { display: true, text: "Steps Ahead" } },
|
| y: { title: { display: true, text: "Workload" } }
|
| }
|
| }
|
| });
|
| }
|
|
|
