Skip to content

Commit dbc9409

Browse files
Hariprashad-RavikumarHariprashad-Ravikumar
authored
Update index.html
1 parent 5735bf2 commit dbc9409

File tree

1 file changed

+135
-168
lines changed

1 file changed

+135
-168
lines changed

‎index.html‎

Lines changed: 135 additions & 168 deletions
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,28 @@
66
<title>AI DataScience Lab</title>
77
<style>
88
body {
9+
margin: 0;
10+
padding: 0;
911
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;
16+
}
17+
18+
@keyframes gradientFlow {
19+
0% { background-position: 0% 50%; }
20+
50% { background-position: 100% 50%; }
21+
100% { background-position: 0% 50%; }
22+
}
23+
24+
.container {
1025
max-width: 900px;
1126
margin: 40px auto;
12-
padding: 0 20px;
13-
color: #333;
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);
1431
}
1532

1633
h1, h2 {
@@ -24,43 +41,79 @@
2441
margin-bottom: 20px;
2542
}
2643

27-
label, input, select, button {
28-
display: block;
29-
width: 100%;
30-
margin-bottom: 10px;
31-
padding: 10px;
32-
border-radius: 6px;
33-
font-size: 14px;
44+
form {
45+
display: flex;
46+
flex-direction: column;
47+
align-items: center;
48+
}
49+
50+
label {
51+
width: 200px;
52+
text-align: left;
53+
margin-bottom: 5px;
3454
}
3555

36-
input, select {
56+
input[type="file"],
57+
input[type="text"],
58+
select {
59+
width: 200px;
60+
margin-bottom: 10px;
61+
padding: 8px;
62+
border-radius: 6px;
3763
border: 1px solid #ccc;
64+
font-size: 14px;
3865
}
3966

4067
button {
68+
padding: 8px 16px;
69+
margin-top: 5px;
70+
margin-bottom: 5px;
71+
border-radius: 6px;
72+
border: none;
4173
background-color: #0056d2;
4274
color: white;
43-
border: none;
4475
cursor: pointer;
76+
font-size: 14px;
4577
}
4678

4779
button:hover {
48-
background-color: #0041a8;
80+
background-color: #003f9e;
81+
}
82+
83+
.progress-bar {
84+
width: 200px;
85+
height: 8px;
86+
background-color: #eee;
87+
border-radius: 4px;
88+
overflow: hidden;
89+
margin-top: 5px;
90+
margin-bottom: 15px;
91+
display: none;
92+
}
93+
94+
.progress-fill {
95+
height: 100%;
96+
width: 0%;
97+
transition: width 0.4s ease;
4998
}
5099

100+
.green { background-color: #4CAF50; }
101+
.blue { background-color: #2196F3; }
102+
51103
.section {
52-
margin-bottom: 30px;
104+
margin: 30px 0;
53105
}
54106

55107
pre, img {
56108
padding: 12px;
57109
background: #f8f8f8;
58110
border: 1px solid #ccc;
59111
border-radius: 5px;
112+
max-width: 100%;
60113
}
61114

62115
img {
63-
max-width: 100%;
116+
display: block;
64117
}
65118

66119
.hidden {
@@ -81,177 +134,91 @@
81134
</style>
82135
</head>
83136
<body>
84-
<h1>AI-DataScience-Lab</h1>
85-
<h2>Built with Pandas, scikit-learn, and OpenAI GPT-3.5 API</h2>
86-
<h2>(<a href="https://github.com/Hariprashad-Ravikumar/AI-DataScience-Lab" target="_blank">View source code on Hari's GitHub</a>)</h2>
87-
88-
<!-- Stage 1 -->
89-
<div class="section">
90-
<form id="uploadForm">
91-
<label for="fileInput">Choose CSV File</label>
92-
<input type="file" id="fileInput" name="file" required />
93-
<button id="loadColumnsBtn" type="button">Upload</button>
94-
<div id="progressBar" class="hidden"><div style="width: 100%; height: 8px; background-color: #4CAF50;"></div></div>
95-
96-
<label for="xColumn" class="hidden">Independent Variable (X column)</label>
97-
<select id="xColumn" name="x_column" class="hidden"></select>
98-
99-
<label for="yColumn" class="hidden">Dependent Variable (Y column)</label>
100-
<select id="yColumn" name="y_column" class="hidden"></select>
101-
102-
<button id="submitProcessing" class="hidden" type="submit">Submit for Processing</button>
103-
</form>
104-
</div>
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>
105141

106-
<!-- Stage 1 -->
107-
<div class="section">
108-
<h3>Choose Regression</h3>
109-
<select id="regressionModel" name="model" disabled>
110-
<option value="linear">Linear Regression (More models soon...)</option>
111-
</select>
112-
</div>
113-
114-
<!-- Stage 2: Processing Results -->
115-
<div id="processingResults" class="hidden">
142+
<!-- Upload Section -->
116143
<div class="section">
117-
<h3>Processing Log</h3>
118-
<pre id="log">Loading modules: pandas, scikit-learn, matplotlib...</pre>
119-
</div>
144+
<form id="uploadForm">
145+
<label for="fileInput">Choose CSV File</label>
146+
<input type="file" id="fileInput" name="file" required />
120147

121-
<div class="section">
122-
<h3>Data Summary (by OpenAI GPT-3.5 API)</h3>
123-
<pre id="summary" style="max-height: 200px; overflow-y: auto; white-space: pre-wrap;"></pre>
124-
</div>
148+
<button id="loadColumnsBtn" type="button">Upload</button>
149+
<div id="uploadProgress" class="progress-bar"><div class="progress-fill green" id="uploadFill"></div></div>
125150

126-
<div class="section">
127-
<h3>Model Performance</h3>
128-
<pre id="metrics"></pre>
129-
</div>
151+
<label for="xColumn" class="hidden">X Column</label>
152+
<select id="xColumn" name="x_column" class="hidden"></select>
130153

131-
<div class="section">
132-
<h3>Scatter Plot</h3>
133-
<img id="plot" style="display:none;" alt="Scatter Plot" />
134-
</div>
154+
<label for="yColumn" class="hidden">Y Column</label>
155+
<select id="yColumn" name="y_column" class="hidden"></select>
135156

136-
<div class="section">
137-
<form id="predictForm">
138-
<label for="futureInput">Enter future values (comma-separated: YYYY-MM-DD or numbers)</label>
139-
<input type="text" id="futureInput" name="future_x" />
140-
<button type="submit">Predict</button>
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>
141159
</form>
142160
</div>
143-
</div>
144161

145-
<!-- Stage 3: Forecast -->
146-
<div id="forecastResults" class="hidden">
162+
<!-- Model selection -->
147163
<div class="section">
148-
<h3>Forecast Result</h3>
149-
<pre id="forecast"></pre>
164+
<h3>Choose Regression</h3>
165+
<select id="regressionModel" name="model" disabled>
166+
<option value="linear">Linear Regression (More models soon...)</option>
167+
</select>
150168
</div>
151169

152-
<div class="section">
153-
<h3>Forecast Visualization</h3>
154-
<img id="forecastPlot" style="display:none;" alt="Forecast Plot" />
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>
155196
</div>
156197

157-
<div class="section">
158-
<a href="https://ai-dslab-backend-cpf2feachnetbbck.westus-01.azurewebsites.net/download-report" target="_blank">
159-
<button>Download PDF Report</button>
160-
</a>
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>
161213
</div>
162-
</div>
163214

164-
<!-- Footer -->
165-
<div class="footer">
166-
&copy; 2025 Hariprashad Ravikumar · <a href="https://github.com/Hariprashad-Ravikumar" target="_blank">GitHub</a> ·
167-
<a href="https://hariprashad-ravikumar.github.io" target="_blank">Website</a>
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>
168220
</div>
169221

170-
<script>
171-
const fileInput = document.getElementById('fileInput');
172-
const xColumn = document.getElementById('xColumn');
173-
const yColumn = document.getElementById('yColumn');
174-
const loadColumnsBtn = document.getElementById('loadColumnsBtn');
175-
const submitProcessing = document.getElementById('submitProcessing');
176-
const processingResults = document.getElementById('processingResults');
177-
const forecastResults = document.getElementById('forecastResults');
178-
179-
loadColumnsBtn.addEventListener('click', async () => {
180-
const file = fileInput.files[0];
181-
if (!file) return alert("Please select a CSV file.");
182-
183-
const formData = new FormData();
184-
formData.append('file', file);
185-
186-
document.getElementById('progressBar').classList.remove('hidden');
187-
188-
const res = await fetch('https://ai-dslab-backend-cpf2feachnetbbck.westus-01.azurewebsites.net/get-columns', {
189-
method: 'POST',
190-
body: formData
191-
});
192-
193-
const data = await res.json();
194-
if (!data.columns) return alert("Error loading columns.");
195-
196-
xColumn.innerHTML = yColumn.innerHTML = '';
197-
data.columns.forEach(col => {
198-
xColumn.innerHTML += `<option value="${col}">${col}</option>`;
199-
yColumn.innerHTML += `<option value="${col}">${col}</option>`;
200-
});
201-
202-
xColumn.classList.remove('hidden');
203-
yColumn.classList.remove('hidden');
204-
xColumn.previousElementSibling.classList.remove('hidden');
205-
yColumn.previousElementSibling.classList.remove('hidden');
206-
submitProcessing.classList.remove('hidden');
207-
});
208-
209-
document.getElementById('uploadForm').addEventListener('submit', async (e) => {
210-
e.preventDefault();
211-
212-
const formData = new FormData();
213-
formData.append('file', fileInput.files[0]);
214-
formData.append('x_column', xColumn.value);
215-
formData.append('y_column', yColumn.value);
216-
formData.append('model', 'linear');
217-
218-
const res = await fetch('https://ai-dslab-backend-cpf2feachnetbbck.westus-01.azurewebsites.net/upload', {
219-
method: 'POST',
220-
body: formData
221-
});
222-
223-
const data = await res.json();
224-
processingResults.classList.remove('hidden');
225-
226-
document.getElementById('summary').textContent = data.summary || '';
227-
document.getElementById('log').textContent = data.log || '';
228-
document.getElementById('metrics').textContent = `R² Score: ${data.r2_score}\nMSE: ${data.mse}`;
229-
document.getElementById('plot').src = data.plot_url;
230-
document.getElementById('plot').style.display = 'block';
231-
});
232-
233-
document.getElementById('predictForm').addEventListener('submit', async (e) => {
234-
e.preventDefault();
235-
236-
const formData = new FormData();
237-
formData.append('future_x', document.getElementById('futureInput').value);
238-
formData.append('x_column', xColumn.value);
239-
formData.append('y_column', yColumn.value);
240-
241-
const res = await fetch('https://ai-dslab-backend-cpf2feachnetbbck.westus-01.azurewebsites.net/predict', {
242-
method: 'POST',
243-
body: formData
244-
});
245-
246-
const data = await res.json();
247-
forecastResults.classList.remove('hidden');
248-
249-
document.getElementById('forecast').textContent = typeof data.forecast === "string"
250-
? data.forecast
251-
: JSON.stringify(data.forecast, null, 2);
252-
document.getElementById('forecastPlot').src = data.forecast_plot_url + '?t=' + new Date().getTime();
253-
document.getElementById('forecastPlot').style.display = 'block';
254-
});
255-
</script>
222+
<!-- JS logic to update progress and flow (use your existing script logic for upload/submit/predict here) -->
256223
</body>
257224
</html>

0 commit comments

Comments
 (0)