Skip to content

Commit d5f4b00

Browse files
Hariprashad-RavikumarHariprashad-Ravikumar
authored
Update index.html
1 parent 4316f6f commit d5f4b00

File tree

1 file changed

+75
-23
lines changed

1 file changed

+75
-23
lines changed

‎index.html‎

Lines changed: 75 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@
2121
100% {background-position: 0% 50%;}
2222
}
2323

24-
h1, h2, h3, label {
24+
h1, h3, label {
2525
text-align: center;
2626
color: #f1f1f1;
2727
}
@@ -30,13 +30,21 @@
3030
font-weight: normal;
3131
font-size: 16px;
3232
color: #ccc;
33+
text-align: center;
3334
}
3435

3536
.section {
3637
margin: 30px auto;
3738
text-align: center;
3839
}
3940

41+
.section-left {
42+
max-width: 800px;
43+
margin: 30px auto;
44+
text-align: left;
45+
padding: 0 20px;
46+
}
47+
4048
form {
4149
display: flex;
4250
flex-direction: column;
@@ -95,19 +103,24 @@
95103
.green { background-color: #4CAF50; }
96104
.blue { background-color: #2196F3; }
97105

98-
pre, img {
99-
padding: 12px;
100-
background: #f8f8f8;
101-
color: #000;
102-
border-radius: 5px;
103-
max-width: 90%;
104-
margin: auto;
106+
.output-box {
107+
background: rgba(255, 255, 255, 0.1);
108+
padding: 15px;
109+
border: 1px solid #66d9ef;
110+
border-radius: 8px;
111+
color: #e0f7fa;
112+
font-size: 14px;
113+
font-family: monospace;
114+
white-space: pre-wrap;
105115
overflow-x: auto;
116+
max-width: 100%;
106117
}
107118

108119
img {
109120
display: block;
110121
max-width: 100%;
122+
margin-top: 10px;
123+
border-radius: 8px;
111124
}
112125

113126
.hidden {
@@ -121,18 +134,54 @@
121134
margin-top: 60px;
122135
}
123136

124-
.footer a {
137+
.footer a, a {
125138
color: #66d9ef;
126139
text-decoration: none;
127140
}
141+
142+
.dropdown-label {
143+
text-align: left;
144+
margin-left: 20px;
145+
font-weight: bold;
146+
}
147+
148+
.more-note {
149+
font-size: 12px;
150+
color: #aaa;
151+
text-align: left;
152+
margin-left: 20px;
153+
font-style: italic;
154+
}
155+
156+
.description {
157+
text-align: left;
158+
max-width: 800px;
159+
margin: 0 auto 20px;
160+
padding: 0 20px;
161+
color: #ddd;
162+
font-size: 15px;
163+
line-height: 1.5;
164+
}
165+
166+
.note {
167+
font-size: 13px;
168+
color: #ccc;
169+
margin-top: -5px;
170+
margin-bottom: 10px;
171+
}
128172
</style>
129173
</head>
130174
<body>
131175
<h1>AI-DataScience-Lab</h1>
132176
<h2>Built with Pandas, scikit-learn, and OpenAI GPT-3.5 API</h2>
133177
<h2>(<a href="https://github.com/Hariprashad-Ravikumar/AI-DataScience-Lab" target="_blank">View source code on Hari's GitHub</a>)</h2>
134178

135-
<!-- Upload description -->
179+
<!-- Description -->
180+
<div class="description">
181+
Upload your dataset to receive intelligent insights powered by AI. Our tool cleans your data, builds a predictive model, and explains the trends using OpenAI. Visualizations and downloadable reports included.
182+
</div>
183+
184+
<!-- Upload -->
136185
<div class="section">
137186
<h3>Upload your data file to get forecast using AI</h3>
138187
<form id="uploadForm">
@@ -154,34 +203,36 @@ <h3>Upload your data file to get forecast using AI</h3>
154203
</div>
155204

156205
<!-- Model selection -->
157-
<div class="section">
158-
<h3>Choose Regression</h3>
206+
<div class="section-left">
207+
<label class="dropdown-label">Choose Regression</label>
159208
<select id="regressionModel" name="model" disabled>
160-
<option value="linear">Linear Regression (More models soon...)</option>
209+
<option value="linear">Linear Regression</option>
161210
</select>
211+
<div class="more-note">(more...)</div>
162212
</div>
163213

164214
<!-- Processing results -->
165215
<div id="processingResults" class="hidden">
166-
<div class="section">
216+
<div class="section-left">
167217
<h3>Processing Log</h3>
168-
<pre id="log">Loading modules: pandas, scikit-learn, matplotlib...</pre>
218+
<div class="output-box" id="log">Loading modules: pandas, scikit-learn, matplotlib...</div>
169219
</div>
170-
<div class="section">
220+
<div class="section-left">
171221
<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>
222+
<div class="output-box" id="summary" style="max-height: 200px; overflow-y: auto;"></div>
173223
</div>
174-
<div class="section">
224+
<div class="section-left">
175225
<h3>Model Performance</h3>
176-
<pre id="metrics"></pre>
226+
<div class="output-box" id="metrics"></div>
177227
</div>
178-
<div class="section">
228+
<div class="section-left">
179229
<h3>Scatter Plot</h3>
180230
<img id="plot" style="display:none;" alt="Scatter Plot" />
181231
</div>
182232
<div class="section">
183233
<form id="predictForm">
184234
<label for="futureInput">Enter future values (comma-separated)</label>
235+
<div class="note">Example: 2025-12-01, 2025-12-02, ... or 11, 12, 13</div>
185236
<input type="text" id="futureInput" name="future_x" />
186237
<button type="submit">Predict</button>
187238
<div id="predictProgress" class="progress-bar"><div class="progress-fill blue" id="predictFill"></div></div>
@@ -191,11 +242,11 @@ <h3>Scatter Plot</h3>
191242

192243
<!-- Forecast results -->
193244
<div id="forecastResults" class="hidden">
194-
<div class="section">
245+
<div class="section-left">
195246
<h3>Forecast Result</h3>
196-
<pre id="forecast"></pre>
247+
<div class="output-box" id="forecast"></div>
197248
</div>
198-
<div class="section">
249+
<div class="section-left">
199250
<h3>Forecast Visualization</h3>
200251
<img id="forecastPlot" style="display:none;" alt="Forecast Plot" />
201252
</div>
@@ -279,6 +330,7 @@ <h3>Forecast Visualization</h3>
279330
processFill.style.width = '100%';
280331
setTimeout(() => document.getElementById('processProgress').style.display = 'none', 500);
281332

333+
document.getElementById('regressionModel').disabled = false;
282334
processingResults.classList.remove('hidden');
283335
document.getElementById('summary').textContent = data.summary || '';
284336
document.getElementById('log').textContent = data.log || '';

0 commit comments

Comments
 (0)