2 Commits

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
2 changed files with 33 additions and 6 deletions
+2 -6
View File
@@ -10,14 +10,10 @@
<body> <body>
<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"> <div class="dropdown-content" id="endpoint-dropdown"></div>
<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> </div>
<div id="chatbox"> <div id="chatbox">
+31
View File
@@ -53,6 +53,28 @@ const frontendApi = {
// Append the message element to the chatbox immediately // Append the message element to the chatbox immediately
chatbox.appendChild(messageElement); 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 // Set the endpoint and LLM variables
setEndpointAndLlm: function(endpoint, llm) { setEndpointAndLlm: function(endpoint, llm) {
window.endpoint = endpoint; window.endpoint = endpoint;
@@ -89,3 +111,12 @@ 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
}); });
function init() {
// Other initialization code here...
frontendApi.fillMenu();
}
document.addEventListener('DOMContentLoaded', init);