5 Commits

5 changed files with 37 additions and 12 deletions
+14 -7
View File
@@ -181,13 +181,20 @@ def chat():
@app.route('/api/endpoints', methods=['GET']) @app.route('/api/endpoints', methods=['GET'])
def get_endpoints(): def get_endpoints():
# Replace this with your actual logic to fetch endpoint data # Replace this with your actual logic to fetch endpoint data
endpoints = [ # endpoints = [
{'endpoint': 'endpoint1', 'llm': 'llm1'}, # {'endpoint': 'endpoint1', 'llm': 'llm1'},
{'endpoint': 'endpoint2', 'llm': 'llm2'}, # {'endpoint': 'endpoint1', 'llm': 'llm2'},
{'endpoint': 'endpoint3', 'llm': 'llm3'}, # {'endpoint': 'endpoint2', 'llm': 'llm1'},
{'endpoint': 'endpoint4', 'llm': 'llm4'}, # {'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) return jsonify(endpoints)
+6 -1
View File
@@ -2,6 +2,7 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ollama Chat</title> <title>Ollama Chat</title>
<link rel="stylesheet" href="/css/clientstyle.css"> <link rel="stylesheet" href="/css/clientstyle.css">
<!-- <link rel="stylesheet" href="python_test/smartassist/src/css/clientstyle.css"> --> <!-- <link rel="stylesheet" href="python_test/smartassist/src/css/clientstyle.css"> -->
@@ -11,9 +12,13 @@
<h1>Ollama Chat</h1> <h1>Ollama Chat</h1>
<!-- Add the dropdown menu here --> <!-- Add the dropdown menu here -->
<div class="dropdown"> <!-- <div class="dropdown">
<button class="dropbtn">Select Endpoint/LLM</button> <button class="dropbtn">Select Endpoint/LLM</button>
<div class="dropdown-content" id="endpoint-dropdown"></div> <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>
<div id="chatbox"> <div id="chatbox">
+3 -2
View File
@@ -94,9 +94,10 @@ button[onclick="window.frontendApi.sendMessage()"]:active {
display: none; display: none;
position: absolute; position: absolute;
background-color: #f9f9f9; background-color: #f9f9f9;
min-width: 160px; /* min-width: 160px; */
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1; z-index: 1;
width: auto; /* Add this property */
} }
.dropdown-content a { .dropdown-content a {
@@ -107,7 +108,7 @@ button[onclick="window.frontendApi.sendMessage()"]:active {
display: block; display: block;
font-size: 0.7rem; /* Decrease font size relative to root element */ font-size: 0.7rem; /* Decrease font size relative to root element */
line-height: 0.5; /* Decrease line height to reduce spacing */ line-height: 0.5; /* Decrease line height to reduce spacing */
white-space: nowrap; /* Add this property */
} }
.dropdown-content a:hover {background-color: #f1f1f1;} .dropdown-content a:hover {background-color: #f1f1f1;}
+14 -1
View File
@@ -66,7 +66,7 @@ const frontendApi = {
// Populate the dropdown menu with received data // Populate the dropdown menu with received data
data.forEach(endpoint => { data.forEach(endpoint => {
const linkElement = document.createElement('a'); 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.onclick = () => frontendApi.setEndpointAndLlm(endpoint.endpoint, endpoint.llm);
linkElement.textContent = `${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 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() { function init() {
// Other initialization code here... // Other initialization code here...
-1
View File
@@ -268,7 +268,6 @@ class GlobalState:
return # No value returned return # No value returned
def get_list_of_available_llms(self, endpoint: Optional[dict] = None) -> Optional[list[str]]: 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. Returns a sorted list of Large Language Models (LLMs) available at the specified endpoint.