Skip to content

Commit 3bf3113

Browse files
Hariprashad-RavikumarHariprashad-Ravikumar
authored
Update index.html
1 parent dbc9409 commit 3bf3113

File tree

1 file changed

+203
-108
lines changed

1 file changed

+203
-108
lines changed

‎index.html‎

Lines changed: 203 additions & 108 deletions
Original file line numberDiff line numberDiff line change
@@ -7,38 +7,34 @@
77
<style>
88
body {
99
margin: 0;
10-
padding: 0;
10+
padding: 40px 0;
1111
font-family: 'Segoe UI', sans-serif;
12-
color: #333;
13-
background: linear-gradient(270deg, #f0f8ff, #e0f7fa, #f5f5f5);
14-
background-size: 600% 600%;
15-
animation: gradientFlow 20s ease infinite;
12+
color: #fff;
13+
background: linear-gradient(-45deg, #1b2735, #2c5364, #0f2027, #203a43);
14+
background-size: 400% 400%;
15+
animation: gradientBG 20s ease infinite;
1616
}
1717

18-
@keyframes gradientFlow {
19-
0% { background-position: 0% 50%; }
20-
50% { background-position: 100% 50%; }
21-
100% { background-position: 0% 50%; }
18+
@keyframes gradientBG {
19+
0% {background-position: 0% 50%;}
20+
50% {background-position: 100% 50%;}
21+
100% {background-position: 0% 50%;}
2222
}
2323

24-
.container {
25-
max-width: 900px;
26-
margin: 40px auto;
27-
padding: 20px;
28-
background: rgba(255, 255, 255, 0.9);
29-
border-radius: 12px;
30-
box-shadow: 0 0 15px rgba(0,0,0,0.1);
31-
}
32-
33-
h1, h2 {
24+
h1, h2, h3, label {
3425
text-align: center;
26+
color: #f1f1f1;
3527
}
3628

3729
h2 {
38-
font-size: 16px;
3930
font-weight: normal;
40-
color: #555;
41-
margin-bottom: 20px;
31+
font-size: 16px;
32+
color: #ccc;
33+
}
34+
35+
.section {
36+
margin: 30px auto;
37+
text-align: center;
4238
}
4339

4440
form {
@@ -48,8 +44,6 @@
4844
}
4945

5046
label {
51-
width: 200px;
52-
text-align: left;
5347
margin-bottom: 5px;
5448
}
5549

@@ -62,22 +56,23 @@
6256
border-radius: 6px;
6357
border: 1px solid #ccc;
6458
font-size: 14px;
59+
background-color: #fff;
60+
color: #000;
6561
}
6662

6763
button {
6864
padding: 8px 16px;
69-
margin-top: 5px;
70-
margin-bottom: 5px;
65+
margin: 5px 0;
7166
border-radius: 6px;
7267
border: none;
73-
background-color: #0056d2;
68+
background-color: #00bcd4;
7469
color: white;
7570
cursor: pointer;
7671
font-size: 14px;
7772
}
7873

7974
button:hover {
80-
background-color: #003f9e;
75+
background-color: #0097a7;
8176
}
8277

8378
.progress-bar {
@@ -100,20 +95,19 @@
10095
.green { background-color: #4CAF50; }
10196
.blue { background-color: #2196F3; }
10297

103-
.section {
104-
margin: 30px 0;
105-
}
106-
10798
pre, img {
10899
padding: 12px;
109100
background: #f8f8f8;
110-
border: 1px solid #ccc;
101+
color: #000;
111102
border-radius: 5px;
112-
max-width: 100%;
103+
max-width: 90%;
104+
margin: auto;
105+
overflow-x: auto;
113106
}
114107

115108
img {
116109
display: block;
110+
max-width: 100%;
117111
}
118112

119113
.hidden {
@@ -123,102 +117,203 @@
123117
.footer {
124118
text-align: center;
125119
font-size: 13px;
126-
color: #888;
127-
margin-top: 40px;
120+
color: #ccc;
121+
margin-top: 60px;
128122
}
129123

130124
.footer a {
131-
color: #0056d2;
125+
color: #66d9ef;
132126
text-decoration: none;
133127
}
134128
</style>
135129
</head>
136130
<body>
137-
<div class="container">
138-
<h1>AI-DataScience-Lab</h1>
139-
<h2>Built with Pandas, scikit-learn, and OpenAI GPT-3.5 API</h2>
140-
<h2>(<a href="https://github.com/Hariprashad-Ravikumar/AI-DataScience-Lab" target="_blank">View source code on Hari's GitHub</a>)</h2>
131+
<h1>AI-DataScience-Lab</h1>
132+
<h2>Built with Pandas, scikit-learn, and OpenAI GPT-3.5 API</h2>
133+
<h2>(<a href="https://github.com/Hariprashad-Ravikumar/AI-DataScience-Lab" target="_blank">View source code on Hari's GitHub</a>)</h2>
141134

142-
<!-- Upload Section -->
143-
<div class="section">
144-
<form id="uploadForm">
145-
<label for="fileInput">Choose CSV File</label>
146-
<input type="file" id="fileInput" name="file" required />
135+
<!-- Upload description -->
136+
<div class="section">
137+
<h3>Upload your data file to get forecast using AI</h3>
138+
<form id="uploadForm">
139+
<label for="fileInput">Choose CSV File</label>
140+
<input type="file" id="fileInput" name="file" required />
141+
142+
<button id="loadColumnsBtn" type="button">Upload</button>
143+
<div id="uploadProgress" class="progress-bar"><div class="progress-fill green" id="uploadFill"></div></div>
147144

148-
<button id="loadColumnsBtn" type="button">Upload</button>
149-
<div id="uploadProgress" class="progress-bar"><div class="progress-fill green" id="uploadFill"></div></div>
145+
<label for="xColumn" class="hidden">X Column</label>
146+
<select id="xColumn" name="x_column" class="hidden"></select>
150147

151-
<label for="xColumn" class="hidden">X Column</label>
152-
<select id="xColumn" name="x_column" class="hidden"></select>
148+
<label for="yColumn" class="hidden">Y Column</label>
149+
<select id="yColumn" name="y_column" class="hidden"></select>
153150

154-
<label for="yColumn" class="hidden">Y Column</label>
155-
<select id="yColumn" name="y_column" class="hidden"></select>
151+
<button id="submitProcessing" class="hidden" type="submit">Submit for Processing</button>
152+
<div id="processProgress" class="progress-bar"><div class="progress-fill green" id="processFill"></div></div>
153+
</form>
154+
</div>
155+
156+
<!-- Model selection -->
157+
<div class="section">
158+
<h3>Choose Regression</h3>
159+
<select id="regressionModel" name="model" disabled>
160+
<option value="linear">Linear Regression (More models soon...)</option>
161+
</select>
162+
</div>
156163

157-
<button id="submitProcessing" class="hidden" type="submit">Submit for Processing</button>
158-
<div id="processProgress" class="progress-bar"><div class="progress-fill green" id="processFill"></div></div>
164+
<!-- Processing results -->
165+
<div id="processingResults" class="hidden">
166+
<div class="section">
167+
<h3>Processing Log</h3>
168+
<pre id="log">Loading modules: pandas, scikit-learn, matplotlib...</pre>
169+
</div>
170+
<div class="section">
171+
<h3>Data Summary (by OpenAI GPT-3.5 API)</h3>
172+
<pre id="summary" style="max-height: 200px; overflow-y: auto; white-space: pre-wrap;"></pre>
173+
</div>
174+
<div class="section">
175+
<h3>Model Performance</h3>
176+
<pre id="metrics"></pre>
177+
</div>
178+
<div class="section">
179+
<h3>Scatter Plot</h3>
180+
<img id="plot" style="display:none;" alt="Scatter Plot" />
181+
</div>
182+
<div class="section">
183+
<form id="predictForm">
184+
<label for="futureInput">Enter future values (comma-separated)</label>
185+
<input type="text" id="futureInput" name="future_x" />
186+
<button type="submit">Predict</button>
187+
<div id="predictProgress" class="progress-bar"><div class="progress-fill blue" id="predictFill"></div></div>
159188
</form>
160189
</div>
190+
</div>
161191

162-
<!-- Model selection -->
192+
<!-- Forecast results -->
193+
<div id="forecastResults" class="hidden">
163194
<div class="section">
164-
<h3>Choose Regression</h3>
165-
<select id="regressionModel" name="model" disabled>
166-
<option value="linear">Linear Regression (More models soon...)</option>
167-
</select>
195+
<h3>Forecast Result</h3>
196+
<pre id="forecast"></pre>
168197
</div>
169-
170-
<!-- Processing results -->
171-
<div id="processingResults" class="hidden">
172-
<div class="section">
173-
<h3>Processing Log</h3>
174-
<pre id="log">Loading modules: pandas, scikit-learn, matplotlib...</pre>
175-
</div>
176-
<div class="section">
177-
<h3>Data Summary (by OpenAI GPT-3.5 API)</h3>
178-
<pre id="summary" style="max-height: 200px; overflow-y: auto; white-space: pre-wrap;"></pre>
179-
</div>
180-
<div class="section">
181-
<h3>Model Performance</h3>
182-
<pre id="metrics"></pre>
183-
</div>
184-
<div class="section">
185-
<h3>Scatter Plot</h3>
186-
<img id="plot" style="display:none;" alt="Scatter Plot" />
187-
</div>
188-
<div class="section">
189-
<form id="predictForm">
190-
<label for="futureInput">Enter future values (comma-separated)</label>
191-
<input type="text" id="futureInput" name="future_x" />
192-
<button type="submit">Predict</button>
193-
<div id="predictProgress" class="progress-bar"><div class="progress-fill blue" id="predictFill"></div></div>
194-
</form>
195-
</div>
198+
<div class="section">
199+
<h3>Forecast Visualization</h3>
200+
<img id="forecastPlot" style="display:none;" alt="Forecast Plot" />
196201
</div>
197-
198-
<!-- Forecast results -->
199-
<div id="forecastResults" class="hidden">
200-
<div class="section">
201-
<h3>Forecast Result</h3>
202-
<pre id="forecast"></pre>
203-
</div>
204-
<div class="section">
205-
<h3>Forecast Visualization</h3>
206-
<img id="forecastPlot" style="display:none;" alt="Forecast Plot" />
207-
</div>
208-
<div class="section">
209-
<a href="https://ai-dslab-backend-cpf2feachnetbbck.westus-01.azurewebsites.net/download-report" target="_blank">
210-
<button>Download PDF Report</button>
211-
</a>
212-
</div>
202+
<div class="section">
203+
<a href="https://ai-dslab-backend-cpf2feachnetbbck.westus-01.azurewebsites.net/download-report" target="_blank">
204+
<button>Download PDF Report</button>
205+
</a>
213206
</div>
207+
</div>
214208

215-
<!-- Footer -->
216-
<div class="footer">
217-
&copy; 2025 Hariprashad Ravikumar · <a href="https://github.com/Hariprashad-Ravikumar" target="_blank">GitHub</a> ·
218-
<a href="https://hariprashad-ravikumar.github.io" target="_blank">Website</a>
219-
</div>
209+
<!-- Footer -->
210+
<div class="footer">
211+
&copy; 2025 Hariprashad Ravikumar · All rights reserved<br>
212+
<a href="https://hariprashad-ravikumar.github.io" target="_blank">Website</a> ·
213+
<a href="https://github.com/Hariprashad-Ravikumar" target="_blank">GitHub</a>
220214
</div>
221215

222-
<!-- JS logic to update progress and flow (use your existing script logic for upload/submit/predict here) -->
216+
<!-- JavaScript -->
217+
<script>
218+
const fileInput = document.getElementById('fileInput');
219+
const xColumn = document.getElementById('xColumn');
220+
const yColumn = document.getElementById('yColumn');
221+
const uploadFill = document.getElementById('uploadFill');
222+
const processFill = document.getElementById('processFill');
223+
const predictFill = document.getElementById('predictFill');
224+
const processingResults = document.getElementById('processingResults');
225+
const forecastResults = document.getElementById('forecastResults');
226+
227+
document.getElementById('loadColumnsBtn').addEventListener('click', async () => {
228+
const file = fileInput.files[0];
229+
if (!file) return alert("Please select a CSV file.");
230+
231+
const formData = new FormData();
232+
formData.append('file', file);
233+
234+
document.getElementById('uploadProgress').style.display = 'block';
235+
uploadFill.style.width = '30%';
236+
237+
const res = await fetch('https://ai-dslab-backend-cpf2feachnetbbck.westus-01.azurewebsites.net/get-columns', {
238+
method: 'POST',
239+
body: formData
240+
});
241+
242+
const data = await res.json();
243+
if (!data.columns) return alert("Failed to load columns.");
244+
245+
xColumn.innerHTML = yColumn.innerHTML = '';
246+
data.columns.forEach(col => {
247+
xColumn.innerHTML += `<option value="${col}">${col}</option>`;
248+
yColumn.innerHTML += `<option value="${col}">${col}</option>`;
249+
});
250+
251+
xColumn.classList.remove('hidden');
252+
yColumn.classList.remove('hidden');
253+
xColumn.previousElementSibling.classList.remove('hidden');
254+
yColumn.previousElementSibling.classList.remove('hidden');
255+
document.getElementById('submitProcessing').classList.remove('hidden');
256+
257+
uploadFill.style.width = '100%';
258+
setTimeout(() => document.getElementById('uploadProgress').style.display = 'none', 500);
259+
});
260+
261+
document.getElementById('uploadForm').addEventListener('submit', async (e) => {
262+
e.preventDefault();
263+
264+
const formData = new FormData();
265+
formData.append('file', fileInput.files[0]);
266+
formData.append('x_column', xColumn.value);
267+
formData.append('y_column', yColumn.value);
268+
formData.append('model', 'linear');
269+
270+
document.getElementById('processProgress').style.display = 'block';
271+
processFill.style.width = '20%';
272+
273+
const res = await fetch('https://ai-dslab-backend-cpf2feachnetbbck.westus-01.azurewebsites.net/upload', {
274+
method: 'POST',
275+
body: formData
276+
});
277+
278+
const data = await res.json();
279+
processFill.style.width = '100%';
280+
setTimeout(() => document.getElementById('processProgress').style.display = 'none', 500);
281+
282+
processingResults.classList.remove('hidden');
283+
document.getElementById('summary').textContent = data.summary || '';
284+
document.getElementById('log').textContent = data.log || '';
285+
document.getElementById('metrics').textContent = `R² Score: ${data.r2_score}\nMSE: ${data.mse}`;
286+
document.getElementById('plot').src = data.plot_url;
287+
document.getElementById('plot').style.display = 'block';
288+
});
289+
290+
document.getElementById('predictForm').addEventListener('submit', async (e) => {
291+
e.preventDefault();
292+
293+
const formData = new FormData();
294+
formData.append('future_x', document.getElementById('futureInput').value);
295+
formData.append('x_column', xColumn.value);
296+
formData.append('y_column', yColumn.value);
297+
298+
document.getElementById('predictProgress').style.display = 'block';
299+
predictFill.style.width = '30%';
300+
301+
const res = await fetch('https://ai-dslab-backend-cpf2feachnetbbck.westus-01.azurewebsites.net/predict', {
302+
method: 'POST',
303+
body: formData
304+
});
305+
306+
const data = await res.json();
307+
predictFill.style.width = '100%';
308+
setTimeout(() => document.getElementById('predictProgress').style.display = 'none', 500);
309+
310+
forecastResults.classList.remove('hidden');
311+
document.getElementById('forecast').textContent = typeof data.forecast === "string"
312+
? data.forecast
313+
: JSON.stringify(data.forecast, null, 2);
314+
document.getElementById('forecastPlot').src = data.forecast_plot_url + '?t=' + new Date().getTime();
315+
document.getElementById('forecastPlot').style.display = 'block';
316+
});
317+
</script>
223318
</body>
224319
</html>

0 commit comments

Comments
 (0)