Update static/indexAI.html

static/indexAI.html

@@ -345,6 +345,77 @@
   <!-- Error Display -->
   <div id="qa-error-message" class="error-message hidden"></div>
 </section>
+
+    <section id="data-visualization" class="tool-section">
+  <h3>Data Visualization Code Generation</h3>
+  
+  <!-- File Upload Area -->
+  <div class="upload-area" id="data-upload-area">
+    <p>📊 Drag & drop Excel/CSV file here or click to upload</p>
+    <input type="file" id="data-file-input" accept=".xlsx,.xls,.csv" />
+    <div id="data-file-preview"></div>
+  </div>
+  
+  <!-- Visualization Prompt -->
+  <div class="input-group">
+    <label for="visualization-prompt">What visualization would you like? (optional)</label>
+    <textarea 
+      id="visualization-prompt" 
+      placeholder="Example: Show a bar chart of sales by region, or leave blank for automatic visualization"></textarea>
+  </div>
+  
+  <!-- Chart Type Selection -->
+  <div class="form-group">
+    <label for="chart-type-select">Preferred Chart Type:</label>
+    <select id="chart-type-select">
+      <option value="auto">Auto-detect</option>
+      <option value="bar">Bar Chart</option>
+      <option value="line">Line Chart</option>
+      <option value="scatter">Scatter Plot</option>
+      <option value="pie">Pie Chart</option>
+      <option value="histogram">Histogram</option>
+    </select>
+  </div>
+  
+  <!-- Submit Button -->
+  <button id="visualize-btn" class="primary-btn">
+    <span id="visualize-btn-text">Generate Visualization</span>
+    <span id="visualize-btn-spinner" class="spinner hidden"></span>
+  </button>
+  
+  <!-- Results Display -->
+  <div id="visualization-results" class="hidden">
+    <div class="results-grid">
+      <!-- Visualization Image -->
+      <div class="result-card">
+        <h4>Generated Visualization:</h4>
+        <div id="visualization-image-container">
+          <img id="generated-visualization" src="" alt="Generated data visualization" />
+        </div>
+      </div>
+      
+      <!-- Python Code -->
+      <div class="result-card">
+        <h4>Python Code:</h4>
+        <div class="code-container">
+          <pre id="python-code-output"></pre>
+          <button id="copy-code-btn" class="secondary-btn">Copy Code</button>
+        </div>
+      </div>
+    </div>
+    
+    <!-- Data Preview -->
+    <div class="result-card">
+      <h4>Data Preview:</h4>
+      <div id="data-preview-container"></div>
+    </div>
+  </div>
+  
+  <!-- Error Display -->
+  <div id="visualization-error" class="error hidden"></div>
+</section>
+
+    
   </main>
 
   <footer>