Update index.html

index.html

@@ -136,7 +136,41 @@
     <div class="carousel-inner">
       <div class="carousel-item active">
         <!-- Image Generation Model Preview -->
-        <img src="image_generation_preview.jpg" class="d-block w-100" alt="Image Generation Model Preview">
+<div class="container-fluid">
+  <!-- Carousel and Jumbotron section -->
+
+  <!-- Slider and Chatbot Modal -->
+  <div class="modal fade" id="sliderModal" tabindex="-1" aria-labelledby="sliderModalLabel" aria-hidden="true">
+    <div class="modal-dialog modal-lg">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h5 class="modal-title" id="sliderModalLabel">Model Settings Chatbot</h5>
+          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+        </div>
+        <div class="modal-body">
+          <!-- Chatbot UI goes here -->
+          <div class="chatbot-container">
+            <!-- Chatbot display area -->
+            <div class="chatbot-display"></div>
+            <!-- User input area -->
+            <div class="user-input">
+              <textarea class="form-control" rows="3" placeholder="Type your message..."></textarea>
+              <button class="btn btn-primary mt-2">Send</button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- JavaScript to trigger modal -->
+  <script>
+    function openChatbotModal() {
+      var myModal = new bootstrap.Modal(document.getElementById('sliderModal'));
+      myModal.show();
+    }
+  </script>
+</div>
       </div>
       <div class="carousel-item">
         <!-- Text Generation Model Preview -->