Update index.html

Hariprashad-Ravikumar · web-flow · commit e0b837a91a3e · 2025-05-19T18:24:44.000-06:00
diff --git a/index.html b/index.html
@@ -8,12 +8,14 @@
     body { font-family: Arial, sans-serif; max-width: 800px; margin: 40px auto; padding: 0 20px; color: #333; }
     h1, h2 { text-align: center; margin: 0; }
     h2 { font-size: 18px; font-weight: normal; color: #666; margin-bottom: 20px; }
-    label, input, button { display: block; width: 100%; margin-bottom: 10px; }
-    input, button { padding: 8px; box-sizing: border-box; }
+    label, input, select, button { display: block; width: 100%; margin-bottom: 10px; }
+    input, select, button { padding: 8px; box-sizing: border-box; }
     button { width: auto; cursor: pointer; }
     pre, img { margin-top: 10px; border: 1px solid #ccc; padding: 10px; background: #f9f9f9; }
     img { max-width: 100%; display: block; }
     .section { margin-bottom: 30px; }
+    #progressBar { width: 100%; height: 10px; background-color: #eee; margin-top: 10px; display: none; }
+    #progressBar div { height: 100%; background-color: #4CAF50; width: 0%; }
   </style>
 </head>
 <body>
@@ -24,12 +26,13 @@ <h2>AI Forecasting & Analysis Tool</h2>
     <form id="uploadForm">
       <label for="fileInput">Upload CSV File</label>
       <input type="file" id="fileInput" name="file" required />
+      <div id="progressBar"><div></div></div>
 
-      <label for="xColumn">Independent Variable (X column name)</label>
-      <input type="text" id="xColumn" name="x_column" required />
+      <label for="xColumn">Independent Variable (X column)</label>
+      <select id="xColumn" name="x_column" required></select>
 
-      <label for="yColumn">Dependent Variable (Y column name)</label>
-      <input type="text" id="yColumn" name="y_column" required />
+      <label for="yColumn">Dependent Variable (Y column)</label>
+      <select id="yColumn" name="y_column" required></select>
 
       <button type="submit">Upload</button>
     </form>
@@ -41,7 +44,7 @@ <h3>Processing Log</h3>
   </div>
 
   <div class="section">
-    <h3>Data Summary</h3>
+    <h3>Data Summary (by OpenAI GPT-3.5 API)</h3>
     <pre id="summary" style="max-height: 200px; overflow-y: auto; white-space: pre-wrap;"></pre>
   </div>
 
@@ -57,7 +60,7 @@ <h3>Scatter Plot</h3>
 
   <div class="section">
     <form id="predictForm">
-      <label for="futureInput">Enter future values</label>
+      <label for="futureInput">Enter future values (comma-separated: YYYY-MM-DD or numbers)</label>
       <input type="text" id="futureInput" name="future_x" />
       <button type="submit">Predict</button>
     </form>
@@ -80,12 +83,50 @@ <h3>Forecast Visualization</h3>
   </div>
 
   <script>
+    const fileInput = document.getElementById('fileInput');
+    const xColumn = document.getElementById('xColumn');
+    const yColumn = document.getElementById('yColumn');
+    const progressBar = document.getElementById('progressBar');
+    const progressFill = progressBar.querySelector('div');
+
+    fileInput.addEventListener('change', async function () {
+      const formData = new FormData();
+      formData.append('file', fileInput.files[0]);
+
+      progressBar.style.display = 'block';
+      progressFill.style.width = '25%';
+
+      const response = await fetch('https://ai-dslab-backend-cpf2feachnetbbck.westus-01.azurewebsites.net/get-columns', {
+        method: 'POST',
+        body: formData
+      });
+
+      const data = await response.json();
+      xColumn.innerHTML = '';
+      yColumn.innerHTML = '';
+
+      data.columns.forEach(col => {
+        const optionX = document.createElement('option');
+        optionX.value = col;
+        optionX.textContent = col;
+        xColumn.appendChild(optionX);
+
+        const optionY = document.createElement('option');
+        optionY.value = col;
+        optionY.textContent = col;
+        yColumn.appendChild(optionY);
+      });
+
+      progressFill.style.width = '100%';
+      setTimeout(() => progressBar.style.display = 'none', 500);
+    });
+
     document.getElementById('uploadForm').addEventListener('submit', async function (e) {
       e.preventDefault();
       const formData = new FormData();
-      formData.append('file', document.getElementById('fileInput').files[0]);
-      formData.append('x_column', document.getElementById('xColumn').value);
-      formData.append('y_column', document.getElementById('yColumn').value);
+      formData.append('file', fileInput.files[0]);
+      formData.append('x_column', xColumn.value);
+      formData.append('y_column', yColumn.value);
 
       const response = await fetch('https://ai-dslab-backend-cpf2feachnetbbck.westus-01.azurewebsites.net/upload', {
         method: 'POST',
