Update templates/index.html

templates/index.html

@@ -128,6 +128,12 @@
             background-color: #2980b9;
         }
         
+        /* Style for disabled button */
+        button:disabled {
+            background-color: #bdc3c7; /* Lighter grey */
+            cursor: not-allowed;
+        }
+        
         code {
             background-color: #f8f9fa;
             padding: 2px 5px;
@@ -168,9 +174,11 @@
             <p>
                 Enter a model on Hugging Face, in a format <code>&lt;organization-or-username&gt;/&lt;model-name&gt;</code> to generate AI SBOM in CycloneDX format. You can browse available models in the <a href="https://huggingface.co/models" target="_blank" rel="noopener noreferrer">Hugging Face models repository</a>.
             </p>
-            <form action="/generate" method="post">
+            <!-- Added id="sbom-form" to the form -->
+            <form id="sbom-form" action="/generate" method="post">
                 <input type="text" name="model_id" placeholder="e.g., openai/whisper-tiny" required>
-                <button type="submit">Generate AI SBOM</button>
+                <!-- Added id="generate-button" to the button -->
+                <button id="generate-button" type="submit">Generate AI SBOM</button>
             </form>
         </div>
         
@@ -209,5 +217,16 @@
             <p>© 2025 AI SBOM Generator | Powered by Aetheris AI</p>
         </div>
     </div>
+
+    <!-- JavaScript for loading indicator -->
+    <script>
+        document.getElementById('sbom-form').addEventListener('submit', function() {
+            var button = document.getElementById('generate-button');
+            button.disabled = true;
+            button.textContent = 'Generating...'; // Change button text
+            // Optionally add a spinner icon here if desired
+        });
+    </script>
+
 </body>
 </html>