Lagt till setEndointAndLlm() till frontendApi för att skicka gjorda val av endpoint title och llm till backend.py

This commit is contained in:
Joakim Persson
2024-08-06 17:34:56 +02:00
parent 168b8b13c1
commit 5b143e75e0
+23 -9
View File
@@ -67,21 +67,35 @@ const frontendApi = {
data.forEach(endpoint => { data.forEach(endpoint => {
const linkElement = document.createElement('a'); const linkElement = document.createElement('a');
linkElement.href = ''; // If attribute is set to '#', browser scrolls to top of page and reload 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.title, endpoint.llm);
linkElement.textContent = `${endpoint.endpoint} - ${endpoint.llm}`; linkElement.textContent = `${endpoint.title} - ${endpoint.llm}`;
dropdownContainer.appendChild(linkElement); dropdownContainer.appendChild(linkElement);
}); });
}) })
.catch(error => console.error('Error fetching endpoints:', error)); .catch(error => console.error('Error fetching endpoints:', error));
}, },
// Set the endpoint and LLM variables // Set the endpoint (remember, endpoint here is the 'title' of endpoin) and LLM variables
setEndpointAndLlm: function(endpoint, llm) { setEndpointAndLlm: function(title, llm) {
window.endpoint = endpoint; window.endpointTitle = title;
window.llm = llm; window.useModel = llm;
console.log(`Selected Endpoint: ${endpoint}, LLM: ${llm}`); // Lets tell Flask about the new setting
fetch('/api/select_endpoint_llm', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ title, llm }),
// body: JSON.stringify(`${{ title, llm }}`),
})
.then(response => response.json())
.then(data => {
// If everything went well, let's tell frontend about it
message = data.message;
console.log(message)
console.log(`Selected endpoint title: ${title}, LLM: ${llm}`);
})
.catch(error => console.error('Error setting endpoint and LLM:', error));
}, },
}; }
// Wait for the event listener to set apiEndpoint and useModel // Wait for the event listener to set apiEndpoint and useModel
window.addEventListener('message', function(event) { window.addEventListener('message', function(event) {
@@ -118,7 +132,7 @@ const dropdownContent = document.getElementById('endpoint-dropdown');
// Add event listeners to each dropdown item // Add event listeners to each dropdown item
dropdownContent.addEventListener('click', (e) => { dropdownContent.addEventListener('click', (e) => {
if (e.target.tagName === 'A') { // Only respond to clicks on anchor tags if (e.target.tagName === 'A') { // Only respond to clicks on anchor tags
e.preventDefault(); // Prevent default link behavior e.preventDefault(); // Prevent default link behavior, i.e., do NOT navigate to the link's URL when clicked
const selectedEndpoint = e.target.textContent; const selectedEndpoint = e.target.textContent;
dropbtn.textContent = selectedEndpoint; // Update the button's text dropbtn.textContent = selectedEndpoint; // Update the button's text
// You can also add code here to update the current endpoint in your application // You can also add code here to update the current endpoint in your application