Anropar Flask för att få en lista med tillgängliga endpoints och LLM:er

smartassist/src/html/client.html

@@ -13,11 +13,7 @@
     <!-- Add the dropdown menu here -->
     <div class="dropdown">
         <button class="dropbtn">Select Endpoint/LLM</button>
-        <div class="dropdown-content">
-        <a href="#" onclick="frontendApi.setEndpointAndLlm('endpoint1', 'llm1')">Endpoint 1 - LLM 1</a>
-        <a href="#" onclick="frontendApi.setEndpointAndLlm('endpoint2', 'llm2')">Endpoint 2 - LLM 2</a>
-        <a href="#" onclick="frontendApi.setEndpointAndLlm('endpoint3', 'llm3')">Endpoint 3 - LLM 3</a>
-        </div>
+        <div class="dropdown-content" id="endpoint-dropdown"></div>
     </div>
 
     <div id="chatbox">

smartassist/src/static/js/frontend.js

@@ -53,6 +53,28 @@ const frontendApi = {
     // Append the message element to the chatbox immediately
     chatbox.appendChild(messageElement);
   },
+  // Make an AJAX request to fetch endpoint data from Flask backend
+  fillMenu: function() {
+    fetch('/api/endpoints')
+    .then(response => response.json())
+    .then(data => {
+      const dropdownContainer = document.getElementById('endpoint-dropdown');
+      
+      // Clear existing content
+      dropdownContainer.innerHTML = '';
+      
+      // Populate the dropdown menu with received data
+      data.forEach(endpoint => {
+        const linkElement = document.createElement('a');
+        linkElement.href = '#';
+        linkElement.onclick = () => frontendApi.setEndpointAndLlm(endpoint.endpoint, endpoint.llm);
+        linkElement.textContent = `${endpoint.endpoint} - ${endpoint.llm}`;
+        
+        dropdownContainer.appendChild(linkElement);
+      });
+    })
+    .catch(error => console.error('Error fetching endpoints:', error));
+  },
   // Set the endpoint and LLM variables
   setEndpointAndLlm: function(endpoint, llm) {
     window.endpoint = endpoint;
@@ -89,3 +111,12 @@ document.addEventListener('keyup', function() {
   sendButton.style.backgroundColor = ''; // Restore the original style when any key is released
 });
 
+
+function init() {
+  // Other initialization code here...
+  frontendApi.fillMenu();
+}
+
+document.addEventListener('DOMContentLoaded', init);
+
+