Skip to content

Commit 77b34e8

Browse files
Hariprashad-RavikumarHariprashad-Ravikumar
authored
Update index.html
1 parent b14d4e1 commit 77b34e8

File tree

1 file changed

+63
-138
lines changed

1 file changed

+63
-138
lines changed

‎index.html‎

Lines changed: 63 additions & 138 deletions
Original file line numberDiff line numberDiff line change
@@ -5,91 +5,32 @@
55
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
66
<title>AI DataScience Lab</title>
77
<style>
8-
body {
9-
font-family: Arial, sans-serif;
10-
max-width: 800px;
11-
margin: 40px auto;
12-
padding: 0 20px;
13-
color: #333;
14-
}
15-
16-
h1 {
17-
text-align: center;
18-
margin-bottom: 5px;
19-
}
20-
21-
h2 {
22-
text-align: center;
23-
font-weight: normal;
24-
font-size: 18px;
25-
margin-top: 0;
26-
color: #666;
27-
}
28-
29-
form {
30-
margin-bottom: 20px;
31-
}
32-
33-
label {
34-
display: block;
35-
font-weight: bold;
36-
margin-bottom: 6px;
37-
}
38-
39-
input[type="file"],
40-
input[type="text"] {
41-
width: 100%;
42-
padding: 8px;
43-
margin-bottom: 10px;
44-
box-sizing: border-box;
45-
}
46-
47-
button {
48-
padding: 8px 16px;
49-
font-size: 14px;
50-
cursor: pointer;
51-
}
52-
53-
pre {
54-
background-color: #f4f4f4;
55-
padding: 12px;
56-
border-left: 4px solid #ccc;
57-
overflow-x: auto;
58-
white-space: pre-wrap;
59-
word-wrap: break-word;
60-
}
61-
62-
img {
63-
display: block;
64-
max-width: 100%;
65-
margin-top: 20px;
66-
border: 1px solid #ddd;
67-
}
68-
69-
.section {
70-
margin-bottom: 30px;
71-
}
72-
73-
.footer {
74-
margin-top: 40px;
75-
font-size: 14px;
76-
text-align: center;
77-
}
78-
79-
.footer a {
80-
color: #0066cc;
81-
text-decoration: none;
82-
}
8+
body { font-family: Arial, sans-serif; max-width: 800px; margin: 40px auto; padding: 0 20px; color: #333; }
9+
h1, h2 { text-align: center; margin: 0; }
10+
h2 { font-size: 18px; font-weight: normal; color: #666; margin-bottom: 20px; }
11+
label, input, button { display: block; width: 100%; margin-bottom: 10px; }
12+
input, button { padding: 8px; box-sizing: border-box; }
13+
button { width: auto; cursor: pointer; }
14+
pre, img { margin-top: 10px; border: 1px solid #ccc; padding: 10px; background: #f9f9f9; }
15+
img { max-width: 100%; display: block; }
16+
.section { margin-bottom: 30px; }
8317
</style>
8418
</head>
8519
<body>
8620
<h1>AI-DataScience-Lab</h1>
87-
<h2>AI Data Science Forecasting Tool</h2>
21+
<h2>AI Forecasting & Analysis Tool</h2>
8822

8923
<div class="section">
9024
<form id="uploadForm">
9125
<label for="fileInput">Upload CSV File</label>
9226
<input type="file" id="fileInput" name="file" required />
27+
28+
<label for="xColumn">Independent Variable (X column name)</label>
29+
<input type="text" id="xColumn" name="x_column" required />
30+
31+
<label for="yColumn">Dependent Variable (Y column name)</label>
32+
<input type="text" id="yColumn" name="y_column" required />
33+
9334
<button type="submit">Upload</button>
9435
</form>
9536
</div>
@@ -100,19 +41,24 @@ <h3>Processing Log</h3>
10041
</div>
10142

10243
<div class="section">
103-
<h3>Data Summary (OpenAI - GPT-3.5 API)</h3>
44+
<h3>Data Summary</h3>
10445
<pre id="summary"></pre>
10546
</div>
10647

10748
<div class="section">
108-
<h3>Visualization</h3>
49+
<h3>Model Performance</h3>
50+
<pre id="metrics"></pre>
51+
</div>
52+
53+
<div class="section">
54+
<h3>Scatter Plot</h3>
10955
<img id="plot" style="display:none;" alt="Scatter Plot" />
11056
</div>
11157

11258
<div class="section">
11359
<form id="predictForm">
114-
<label for="futureInput">Enter future dates (YYYY-MM-DD, comma-separated)</label>
115-
<input type="text" id="futureInput" name="future_x" placeholder="e.g., 2025-12-01, 2025-12-15" />
60+
<label for="futureInput">Enter future values (comma-separated: YYYY-MM-DD or numbers)</label>
61+
<input type="text" id="futureInput" name="future_x" />
11662
<button type="submit">Predict</button>
11763
</form>
11864
</div>
@@ -122,76 +68,55 @@ <h3>Forecast Result</h3>
12268
<pre id="forecast"></pre>
12369
</div>
12470

125-
<div class="footer">
126-
Learn more about this ongoing project on
127-
<a href="https://github.com/Hariprashad-Ravikumar/AI-DataScience-Lab" target="_blank">GitHub</a>.
71+
<div class="section">
72+
<h3>Forecast Visualization</h3>
73+
<img id="forecastPlot" style="display:none;" alt="Forecast Plot" />
74+
</div>
75+
76+
<div class="section">
77+
<a href="https://ai-dslab-backend-cpf2feachnetbbck.westus-01.azurewebsites.net/download-report" target="_blank">
78+
<button>Download Report</button>
79+
</a>
12880
</div>
12981

13082
<script>
13183
document.getElementById('uploadForm').addEventListener('submit', async function (e) {
13284
e.preventDefault();
13385
const formData = new FormData();
13486
formData.append('file', document.getElementById('fileInput').files[0]);
135-
136-
try {
137-
const response = await fetch('https://ai-dslab-backend-cpf2feachnetbbck.westus-01.azurewebsites.net/upload', {
138-
method: 'POST',
139-
body: formData
140-
});
141-
142-
if (!response.ok) {
143-
const errorText = await response.text();
144-
console.error("Upload error:", errorText);
145-
alert("Upload failed: " + response.status);
146-
return;
147-
}
148-
149-
const data = await response.json();
150-
document.getElementById('summary').textContent = data.summary;
151-
document.getElementById('log').textContent = "Loading modules: pandas, scikit-learn, matplotlib...\n\n" + data.log;
152-
document.getElementById('forecast').textContent = data.forecast;
153-
document.getElementById('plot').src = data.plot_url;
154-
document.getElementById('plot').style.display = 'block';
155-
156-
} catch (err) {
157-
console.error("Unexpected upload error:", err);
158-
alert("Upload failed: " + err.message);
159-
}
87+
formData.append('x_column', document.getElementById('xColumn').value);
88+
formData.append('y_column', document.getElementById('yColumn').value);
89+
90+
const response = await fetch('https://ai-dslab-backend-cpf2feachnetbbck.westus-01.azurewebsites.net/upload', {
91+
method: 'POST',
92+
body: formData
93+
});
94+
95+
const data = await response.json();
96+
document.getElementById('summary').textContent = data.summary || '';
97+
document.getElementById('log').textContent = data.log || '';
98+
document.getElementById('metrics').textContent = `R² Score: ${data.r2_score}\\nMSE: ${data.mse}`;
99+
document.getElementById('plot').src = data.plot_url;
100+
document.getElementById('plot').style.display = 'block';
160101
});
161102

162103
document.getElementById('predictForm').addEventListener('submit', async function (e) {
163104
e.preventDefault();
164-
const futureX = document.getElementById('futureInput').value;
165-
166105
const formData = new FormData();
167-
formData.append('future_x', futureX);
168-
169-
try {
170-
const response = await fetch('https://ai-dslab-backend-cpf2feachnetbbck.westus-01.azurewebsites.net/predict', {
171-
method: 'POST',
172-
body: formData
173-
});
174-
175-
if (!response.ok) {
176-
const errorText = await response.text();
177-
console.error("Predict error:", errorText);
178-
alert("Prediction failed: " + response.status);
179-
return;
180-
}
181-
182-
const data = await response.json();
183-
document.getElementById('forecast').textContent =
184-
typeof data.forecast === "string"
185-
? data.forecast
186-
: JSON.stringify(data.forecast, null, 2);
187-
document.getElementById('log').textContent = "Loading modules: pandas, scikit-learn, matplotlib...\n\n" + data.log;
188-
document.getElementById('plot').src = data.plot_url;
189-
document.getElementById('plot').style.display = 'block';
190-
191-
} catch (err) {
192-
console.error("Unexpected prediction error:", err);
193-
alert("Prediction failed: " + err.message);
194-
}
106+
formData.append('future_x', document.getElementById('futureInput').value);
107+
108+
const response = await fetch('https://ai-dslab-backend-cpf2feachnetbbck.westus-01.azurewebsites.net/predict', {
109+
method: 'POST',
110+
body: formData
111+
});
112+
113+
const data = await response.json();
114+
document.getElementById('forecast').textContent = typeof data.forecast === "string"
115+
? data.forecast
116+
: JSON.stringify(data.forecast, null, 2);
117+
document.getElementById('log').textContent = data.log || '';
118+
document.getElementById('forecastPlot').src = data.forecast_plot_url;
119+
document.getElementById('forecastPlot').style.display = 'block';
195120
});
196121
</script>
197122
</body>

0 commit comments

Comments
 (0)