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

Säkerställt så att innehållet i dropdown-menyn kan ändras dynamiskt
2024-08-05 17:27:49 +02:00 · 2024-08-05 17:27:00 +02:00
2 changed files with 33 additions and 6 deletions
@@ -10,14 +10,10 @@
 <body>
    <h1>Ollama Chat</h1>

-      <!-- Add the dropdown menu here -->
+    <!-- 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">
@@ -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);
+
+
Author	SHA1	Message	Date
Joakim Persson	6dc93b66be	Anropar Flask för att få en lista med tillgängliga endpoints och LLM:er	2024-08-05 17:27:49 +02:00
Joakim Persson	606becc5c3	Säkerställt så att innehållet i dropdown-menyn kan ändras dynamiskt	2024-08-05 17:27:00 +02:00