Nu sätts titeln på rullgardinsmenyn till det element som valts i denna. Lade till viewport för att underlätta för olika webklienter.

Hanterar dynamisk uppdatering av innehållet i rullgardinsmenyn
/api/endpoint retunerar lista över endpoints och deras respektive llm:er
2024-08-06 00:50:47 +02:00 · 2024-08-06 00:48:54 +02:00 · 2024-08-06 00:47:28 +02:00 · 2024-08-06 00:46:19 +02:00 · 2024-08-06 00:22:16 +02:00
5 changed files with 37 additions and 12 deletions
@@ -181,13 +181,20 @@ def chat():
@app.route('/api/endpoints', methods=['GET'])
 def get_endpoints():
    # Replace this with your actual logic to fetch endpoint data
-    endpoints = [
-        {'endpoint': 'endpoint1', 'llm': 'llm1'},
-        {'endpoint': 'endpoint2', 'llm': 'llm2'},
-        {'endpoint': 'endpoint3', 'llm': 'llm3'},
-        {'endpoint': 'endpoint4', 'llm': 'llm4'},
-    ]
-    
+    # endpoints = [
+    #     {'endpoint': 'endpoint1', 'llm': 'llm1'},
+    #     {'endpoint': 'endpoint1', 'llm': 'llm2'},
+    #     {'endpoint': 'endpoint2', 'llm': 'llm1'},
+    #     {'endpoint': 'endpoint2', 'llm': 'llm3'},
+    #     {'endpoint': 'endpoint2', 'llm': 'llm4'},
+    #     {'endpoint': 'endpoint3', 'llm': 'llm4'},
+    # ]
+    endpoints = [] # List of dictionaries, each of which contains {'endpoint': 'endpoint1', 'llm': 'llm1'}
+    eps = global_state.get_endpoints()
+    for ep in eps:
+        llms = global_state.get_list_of_available_llms(ep)
+        for llm in llms:
+            endpoints.append({'endpoint': ep.get('title'), 'llm': llm})
    return jsonify(endpoints)


@@ -2,6 +2,7 @@
 <html lang="en">
 <head>
    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ollama Chat</title>
    <link rel="stylesheet" href="/css/clientstyle.css"> 
    <!-- <link rel="stylesheet" href="python_test/smartassist/src/css/clientstyle.css">  -->
@@ -11,9 +12,13 @@
    <h1>Ollama Chat</h1>

    <!-- Add the dropdown menu here -->
-    <div class="dropdown">
+    <!-- <div class="dropdown">
        <button class="dropbtn">Select Endpoint/LLM</button>
        <div class="dropdown-content" id="endpoint-dropdown"></div>
+    </div> -->
+    <div class="dropdown">
+        <button class="dropbtn" id="selected-endpoint">Select Endpoint/LLM</button>
+        <div class="dropdown-content" id="endpoint-dropdown"></div>
    </div>

    <div id="chatbox">
@@ -94,9 +94,10 @@ button[onclick="window.frontendApi.sendMessage()"]:active {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
-    min-width: 160px;
+    /* min-width: 160px; */
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
+    width: auto; /* Add this property */
  }
  
  .dropdown-content a {
@@ -107,7 +108,7 @@ button[onclick="window.frontendApi.sendMessage()"]:active {
    display: block;
    font-size: 0.7rem; /* Decrease font size relative to root element */
    line-height: 0.5; /* Decrease line height to reduce spacing */
-
+    white-space: nowrap; /* Add this property */
  }
  
  .dropdown-content a:hover {background-color: #f1f1f1;}
@@ -66,7 +66,7 @@ const frontendApi = {
      // Populate the dropdown menu with received data
      data.forEach(endpoint => {
        const linkElement = document.createElement('a');
-        linkElement.href = '#';
+        linkElement.href = '';  // If attribute is set to '#', browser scrolls to top of page and reload
        linkElement.onclick = () => frontendApi.setEndpointAndLlm(endpoint.endpoint, endpoint.llm);
        linkElement.textContent = `${endpoint.endpoint} - ${endpoint.llm}`;
        
@@ -111,6 +111,19 @@ document.addEventListener('keyup', function() {
  sendButton.style.backgroundColor = ''; // Restore the original style when any key is released
 });

+// Get the dropdown button and the dropdown content elements
+const dropbtn = document.getElementById('selected-endpoint');
+const dropdownContent = document.getElementById('endpoint-dropdown');
+
+// Add event listeners to each dropdown item
+dropdownContent.addEventListener('click', (e) => {
+    if (e.target.tagName === 'A') { // Only respond to clicks on anchor tags
+        e.preventDefault(); // Prevent default link behavior
+        const selectedEndpoint = e.target.textContent;
+        dropbtn.textContent = selectedEndpoint; // Update the button's text
+        // You can also add code here to update the current endpoint in your application
+    }
+});

 function init() {
  // Other initialization code here...
@@ -268,7 +268,6 @@ class GlobalState:

        return # No value returned

-    
    def get_list_of_available_llms(self, endpoint: Optional[dict] = None) -> Optional[list[str]]:
        """
        Returns a sorted list of Large Language Models (LLMs) available at the specified endpoint.
Author	SHA1	Message	Date
joakimp	fa98c7b162	Nu sätts titeln på rullgardinsmenyn till det element som valts i denna. Lade till viewport för att underlätta för olika webklienter.	2024-08-06 00:50:47 +02:00
joakimp	fd5f6199e9	Hanterar dynamisk uppdatering av innehållet i rullgardinsmenyn	2024-08-06 00:48:54 +02:00
joakimp	c26dbc5612	/api/endpoint retunerar lista över endpoints och deras respektive llm:er	2024-08-06 00:47:28 +02:00
joakimp	7f557fadd6	Automatisk anpassning av dropdown-meny till textbredden på innehållet	2024-08-06 00:46:19 +02:00
joakimp	5ce92a5602	Tog bort en tomrad bara...	2024-08-06 00:22:16 +02:00