Update static/index.html

static/index.html

@@ -19,7 +19,7 @@
         form {
             margin-bottom: 20px;
         }
-        input[type="file"], input[type="text"], textarea, button {
+        input[type="file"], textarea, button {
             display: block;
             margin: 10px 0;
             padding: 10px;
@@ -47,6 +47,14 @@
         </form>
         <div class="result" id="summaryResult"></div>
 
+        <!-- Image Captioning -->
+        <h2>Image Captioning</h2>
+        <form id="captionForm">
+            <input type="file" id="image" name="image" accept=".jpg,.jpeg,.png">
+            <button type="submit">Generate Caption</button>
+        </form>
+        <div class="result" id="captionResult"></div>
+
         <!-- Text-Based Question Answering -->
         <h2>Text-Based Question Answering</h2>
         <form id="qaForm">
@@ -58,14 +66,6 @@
         </form>
         <div class="result" id="qaResult"></div>
 
-        <!-- Image Captioning -->
-        <h2>Image Captioning</h2>
-        <form id="captionForm">
-            <input type="file" id="image" name="image" accept=".jpg,.jpeg,.png">
-            <button type="submit">Generate Caption</button>
-        </form>
-        <div class="result" id="captionResult"></div>
-
         <!-- Visual Question Answering -->
         <h2>Visual Question Answering</h2>
         <form id="vqaForm">
@@ -108,8 +108,8 @@
 
         // Attach event listeners to forms
         document.getElementById("summarizeForm").onsubmit = (e) => handleFormSubmit(e, "/summarize", "summaryResult");
-        document.getElementById("qaForm").onsubmit = (e) => handleFormSubmit(e, "/answer", "qaResult");
         document.getElementById("captionForm").onsubmit = (e) => handleFormSubmit(e, "/caption", "captionResult");
+        document.getElementById("qaForm").onsubmit = (e) => handleFormSubmit(e, "/answer", "qaResult");
         document.getElementById("vqaForm").onsubmit = (e) => handleFormSubmit(e, "/vqa", "vqaResult");
     </script>
 </body>