Skip to content

Commit 888602e

Browse files
Hariprashad-RavikumarHariprashad-Ravikumar
authored
Update index.html
1 parent 6d452bc commit 888602e

File tree

1 file changed

+159
-51
lines changed

1 file changed

+159
-51
lines changed

‎index.html‎

Lines changed: 159 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -5,18 +5,112 @@
55
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
66
<title>AI DataScience Lab</title>
77
<style>
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, select, button { display: block; width: 100%; margin-bottom: 10px; }
12-
input, select, 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; }
17-
#progressBar { width: 100%; height: 10px; background-color: #eee; margin-top: 10px; display: none; }
18-
#progressBar div { height: 100%; background-color: #4CAF50; width: 0%; }
19-
#xColumn, #yColumn, #submitProcessing { display: none; }
8+
body {
9+
font-family: 'Times New Roman', Times, serif;
10+
max-width: 800px;
11+
margin: 40px auto;
12+
padding: 0 20px;
13+
color: #333;
14+
}
15+
16+
h1, h2, h3 {
17+
text-align: center;
18+
margin: 0;
19+
}
20+
21+
h2 {
22+
font-size: 18px;
23+
font-weight: normal;
24+
color: #666;
25+
margin-bottom: 20px;
26+
}
27+
28+
label, input, select, button {
29+
display: block;
30+
width: 100%;
31+
margin-bottom: 10px;
32+
font-family: 'Times New Roman', Times, serif;
33+
}
34+
35+
input, select, button {
36+
padding: 8px;
37+
box-sizing: border-box;
38+
border-radius: 6px;
39+
border: 1px solid #ccc;
40+
}
41+
42+
button {
43+
width: auto;
44+
cursor: pointer;
45+
background-color: #f4f4f4;
46+
border: 1px solid #888;
47+
transition: background-color 0.3s ease;
48+
}
49+
50+
button:hover {
51+
background-color: #e0e0e0;
52+
}
53+
54+
pre, img {
55+
margin-top: 10px;
56+
border: 1px solid #ccc;
57+
padding: 10px;
58+
background: #f9f9f9;
59+
}
60+
61+
img {
62+
max-width: 100%;
63+
display: block;
64+
}
65+
66+
.section {
67+
margin-bottom: 30px;
68+
}
69+
70+
#progressBar, #processingProgress, #predictProgress {
71+
width: 100%;
72+
height: 10px;
73+
background-color: #eee;
74+
display: none;
75+
margin-top: 10px;
76+
border-radius: 5px;
77+
overflow: hidden;
78+
}
79+
80+
#progressBar div,
81+
#processingFill,
82+
#predictFill {
83+
height: 100%;
84+
width: 0%;
85+
}
86+
87+
#progressBar div {
88+
background-color: #4CAF50;
89+
}
90+
91+
#processingFill {
92+
background-color: #4CAF50;
93+
}
94+
95+
#predictFill {
96+
background-color: #2196F3;
97+
}
98+
99+
#xColumn, #yColumn, #submitProcessing {
100+
display: none;
101+
}
102+
103+
.footer {
104+
text-align: center;
105+
font-size: 14px;
106+
margin-top: 40px;
107+
color: #666;
108+
}
109+
110+
.footer a {
111+
color: #0066cc;
112+
text-decoration: none;
113+
}
20114
</style>
21115
</head>
22116
<body>
@@ -28,7 +122,6 @@ <h2>(View source code on Hari's <a href="https://github.com/Hariprashad-Ravikuma
28122
<form id="uploadForm">
29123
<label for="fileInput">Choose CSV File</label>
30124
<input type="file" id="fileInput" name="file" required />
31-
32125
<button id="loadColumnsBtn" type="button">Upload</button>
33126
<div id="progressBar"><div></div></div>
34127

@@ -39,17 +132,17 @@ <h2>(View source code on Hari's <a href="https://github.com/Hariprashad-Ravikuma
39132
<select id="yColumn" name="y_column" required></select>
40133

41134
<button id="submitProcessing" type="submit">Submit for Processing</button>
135+
<div id="processingProgress"><div id="processingFill"></div></div>
42136
</form>
43137
</div>
44138

45139
<div class="section">
46-
<h3>Choose Regression</h3>
47-
<select id="regressionModel" name="model" disabled>
48-
<option value="linear" selected>Linear Regression (More options coming soon...)</option>
49-
</select>
50-
</div>
140+
<h3>Choose Regression</h3>
141+
<select id="regressionModel" name="model" disabled>
142+
<option value="linear" selected>Linear Regression (More options coming soon...)</option>
143+
</select>
144+
</div>
51145

52-
53146
<div class="section">
54147
<h3>Processing Log</h3>
55148
<pre id="log">Loading modules: pandas, scikit-learn, matplotlib...</pre>
@@ -75,6 +168,7 @@ <h3>Scatter Plot</h3>
75168
<label for="futureInput">Enter future values (comma-separated: YYYY-MM-DD or numbers)</label>
76169
<input type="text" id="futureInput" name="future_x" />
77170
<button type="submit">Predict</button>
171+
<div id="predictProgress"><div id="predictFill"></div></div>
78172
</form>
79173
</div>
80174

@@ -102,6 +196,10 @@ <h3>Forecast Visualization</h3>
102196
const progressFill = progressBar.querySelector('div');
103197
const loadColumnsBtn = document.getElementById('loadColumnsBtn');
104198
const submitProcessing = document.getElementById('submitProcessing');
199+
const processingProgress = document.getElementById('processingProgress');
200+
const processingFill = document.getElementById('processingFill');
201+
const predictProgress = document.getElementById('predictProgress');
202+
const predictFill = document.getElementById('predictFill');
105203

106204
loadColumnsBtn.addEventListener('click', async function () {
107205
const file = fileInput.files[0];
@@ -134,46 +232,55 @@ <h3>Forecast Visualization</h3>
134232
progressFill.style.width = '100%';
135233
setTimeout(() => progressBar.style.display = 'none', 500);
136234
});
137-
document.getElementById('uploadForm').addEventListener('submit', async function (e) {
138-
e.preventDefault();
139-
const formData = new FormData();
140-
formData.append('file', fileInput.files[0]);
141-
formData.append('x_column', xColumn.value);
142-
formData.append('y_column', yColumn.value);
143-
formData.append('model', 'linear');
144-
145-
// Show and reset progress bar
146-
progressBar.style.display = 'block';
147-
progressFill.style.width = '20%';
148-
149-
const response = await fetch('https://ai-dslab-backend-cpf2feachnetbbck.westus-01.azurewebsites.net/upload', {
150-
method: 'POST',
151-
body: formData
152-
});
153-
154-
const data = await response.json();
155-
progressFill.style.width = '100%';
156-
setTimeout(() => progressBar.style.display = 'none', 500);
157-
158-
document.getElementById('summary').textContent = data.summary || '';
159-
document.getElementById('log').textContent = data.log || '';
160-
document.getElementById('metrics').textContent = `R² Score: ${data.r2_score}\nMSE: ${data.mse}`;
161-
document.getElementById('plot').src = data.plot_url;
162-
document.getElementById('plot').style.display = 'block';
163-
});
164235

236+
document.getElementById('uploadForm').addEventListener('submit', async function (e) {
237+
e.preventDefault();
238+
239+
processingProgress.style.display = 'block';
240+
processingFill.style.width = '20%';
241+
242+
const formData = new FormData();
243+
formData.append('file', fileInput.files[0]);
244+
formData.append('x_column', xColumn.value);
245+
formData.append('y_column', yColumn.value);
246+
formData.append('model', 'linear');
247+
248+
const response = await fetch('https://ai-dslab-backend-cpf2feachnetbbck.westus-01.azurewebsites.net/upload', {
249+
method: 'POST',
250+
body: formData
251+
});
252+
253+
const data = await response.json();
254+
processingFill.style.width = '100%';
255+
setTimeout(() => processingProgress.style.display = 'none', 500);
256+
257+
document.getElementById('summary').textContent = data.summary || '';
258+
document.getElementById('log').textContent = data.log || '';
259+
document.getElementById('metrics').textContent = `R² Score: ${data.r2_score}\nMSE: ${data.mse}`;
260+
document.getElementById('plot').src = data.plot_url;
261+
document.getElementById('plot').style.display = 'block';
262+
});
165263

166264
document.getElementById('predictForm').addEventListener('submit', async function (e) {
167265
e.preventDefault();
266+
267+
predictProgress.style.display = 'block';
268+
predictFill.style.width = '30%';
269+
168270
const formData = new FormData();
169271
formData.append('future_x', document.getElementById('futureInput').value);
272+
formData.append('x_column', document.getElementById('xColumn').value);
273+
formData.append('y_column', document.getElementById('yColumn').value);
170274

171275
const response = await fetch('https://ai-dslab-backend-cpf2feachnetbbck.westus-01.azurewebsites.net/predict', {
172276
method: 'POST',
173277
body: formData
174278
});
175279

176280
const data = await response.json();
281+
predictFill.style.width = '100%';
282+
setTimeout(() => predictProgress.style.display = 'none', 500);
283+
177284
document.getElementById('forecast').textContent = typeof data.forecast === "string"
178285
? data.forecast
179286
: JSON.stringify(data.forecast, null, 2);
@@ -182,10 +289,11 @@ <h3>Forecast Visualization</h3>
182289
document.getElementById('forecastPlot').style.display = 'block';
183290
});
184291
</script>
185-
<div class="footer" style="text-align: center; font-size: 14px; margin-top: 40px; color: #666;">
186-
&copy; 2025 Hariprashad Ravikumar · All rights reserved<br>
187-
<a href="https://github.com/Hariprashad-Ravikumar" target="_blank">GitHub</a> ·
188-
<a href="https://hariprashad-ravikumar.github.io" target="_blank">Website</a>
189-
</div>
292+
293+
<div class="footer">
294+
&copy; 2025 Hariprashad Ravikumar · All rights reserved<br>
295+
<a href="https://github.com/Hariprashad-Ravikumar" target="_blank">GitHub</a> ·
296+
<a href="https://hariprashad-ravikumar.github.io" target="_blank">Website</a>
297+
</div>
190298
</body>
191299
</html>

0 commit comments

Comments
 (0)