joakimp/python_test
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Inläsning av apiEndpoint och useModel har flyttats hit. Funktioner och variabler från frontend.js exporteras numer via frontendApi

Browse Source
This commit is contained in:
Joakim Persson
2024-07-31 15:46:18 +02:00
parent 14eaf57335
commit 9203641e6a
1 changed files with 160 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files
smartassist/src/static/js/frontend.js
+160 -56
View File
@@ -1,88 +1,192 @@
// // Get the user input element from the DOM
// const chatbox = document.getElementById('chatbox');
// const userInput = document.getElementById('userInput');
// const parser = window.markdownit({
// linkify: true,
// strikethrough: true,
// });
// parser.enable(['table']);
// // const apiEndpoint = window.apiEndpoint; // Get the API endpoint
// // const useModel = window.useModel; // Get whether to use a model or not
// // console.log("frontend.js - API Endpoint: ", window.apiEndpoint);
// // console.log("frontend.js - Use model: ", window.useModel);
// let apiEndpoint; // Make variable available outside of the scope of the event listener
// let useModel; // Make variable available outside of the scope of the event listener
// window.addEventListener('message', function(event) {
// if (event.origin === 'http://localhost:5004') { // Make sure this matches your origin
// const { apiEndpoint, useModel } = event.data;
// console.log("client.html - API Endpoint: ", apiEndpoint);
// console.log("client.html - use model: ", useModel);
// window.apiEndpoint = apiEndpoint;
// window.useModel = useModel;
// }
// });
// console.log("frontend.js - API Endpoint: ", window.apiEndpoint);
// console.log("frontend.js - Use model: ", window.useModel);
// // Define a function to send the user's message to the AI
// function sendMessage() {
// // Get the user's input message and trim any whitespace
// const query = userInput.value.trim();
// // Check if the message is not empty
// if (query !== '') {
// // fetch(`${apiEndpoint}`, {
// fetch(apiEndpoint, {
// method: 'POST',
// headers: { 'Content-Type': 'application/json' },
// body: JSON.stringify({ query, model: useModel }), // Add these parameters here
// // body: JSON.stringify({ query, url_server: "http://your-custom-url", model: "phi3:mini" }), // Add these parameters here
// })
// .then(response => response.json())
// .then(data => {
// // Get the AI's response from the API data
// const aiResponse = data.response;
// // Render the user's original message in the chatbox
// renderMessage(query, 'user-message');
// // Render the AI's response in the chatbox
// renderMessage(aiResponse, 'ai-response');
// // Clear the user input field for the next message
// userInput.value = '';
// })
// .catch(error => console.error('Error sending message:', error));
// }
// }
// // Define a function to render a message in the chatbox with a specific class name
// function renderMessage(text, className) {
// // Create a new div element to hold the message
// const messageElement = document.createElement('div');
// // Add the specified class name to the element
// messageElement.className = className;
// // // Set the text content of the element to the message text
// // messageElement.textContent = text;
// // Use the markdown-it parser
// const html = parser.render(text);
// messageElement.innerHTML = html;
// // Append the message element to the chatbox immediately
// // chatbox.appendChild(messageElement);
// // Typeset math in the message element
// MathJax.typesetPromise([messageElement]).then(() => {
// // No need to append anything here, it's already appended above
// chatbox.appendChild(messageElement);
// });
// }
// // Make the button toggle colour when user presses Enter on keyboard
// const sendButton = document.getElementById('sendButton');
// document.addEventListener('keydown', function(event) {
// if (event.key === 'Enter') {
// sendButton.style.backgroundColor = '#6f6f6f'; // Dark Grey when Enter is pressed
// }
// });
// document.addEventListener('keyup', function() {
// sendButton.style.backgroundColor = ''; // Restore the original style when any key is released
// });
// Get the user input element from the DOM // Get the user input element from the DOM
const chatbox = document.getElementById('chatbox'); const chatbox = document.getElementById('chatbox');
const userInput = document.getElementById('userInput'); const userInput = document.getElementById('userInput');
const parser = window.markdownit({ const parser = window.markdownit({
linkify: true, linkify: true,
strikethrough: true, strikethrough: true,
}); });
parser.enable(['table']); parser.enable(['table']);
console.log("frontend.js - API Endpoint: ", apiEndpoint); let apiEndpoint; // Make variable available outside of the scope of the event listener
console.log("frontend.js - use model: ", useModel); let useModel; // Make variable available outside of the scope of the event listener
// Define a function to send the user's message to the AI const frontendApi = {
function sendMessage() { // Define a function to send the user's message to the AI
// Get the user's input message and trim any whitespace sendMessage: function() {
if (!window.apiEndpoint || !window.useModel) { // Check if we're ready before proceeding
console.error("Not ready yet. Please wait for apiEndpoint and useModel to be set.");
return;
}
// Get the user's input message and trim any whitespace
const query = userInput.value.trim(); const query = userInput.value.trim();
// Check if the message is not empty // Check if the message is not empty
if (query !== '') { if (query !== '') {
fetch(window.apiEndpoint, {
// fetch(`${apiEndpoint}`, { method: 'POST',
fetch(apiEndpoint, { headers: { 'Content-Type': 'application/json' },
method: 'POST', body: JSON.stringify({ query, model: window.useModel }), // Add these parameters here
headers: { 'Content-Type': 'application/json' }, })
body: JSON.stringify({ query, model: useModel }), // Add these parameters here .then(response => response.json())
// body: JSON.stringify({ query, url_server: "http://your-custom-url", model: "phi3:mini" }), // Add these parameters here .then(data => {
}) // Get the AI's response from the API data
.then(response => response.json()) const aiResponse = data.response;
.then(data => { // Render the user's original message in the chatbox
// Get the AI's response from the API data this.renderMessage(query, 'user-message');
const aiResponse = data.response; // Render the AI's response in the chatbox
this.renderMessage(aiResponse, 'ai-response');
// Render the user's original message in the chatbox // Clear the user input field for the next message
renderMessage(query, 'user-message'); userInput.value = '';
})
// Render the AI's response in the chatbox .catch(error => console.error('Error sending message:', error));
renderMessage(aiResponse, 'ai-response');
// Clear the user input field for the next message
userInput.value = '';
})
.catch(error => console.error('Error sending message:', error));
} }
} },
// Define a function to render a message in the chatbox with a specific class name
renderMessage: function(text, className) {
// Define a function to render a message in the chatbox with a specific class name
function renderMessage(text, className) {
// Create a new div element to hold the message // Create a new div element to hold the message
const messageElement = document.createElement('div'); const messageElement = document.createElement('div');
// Add the specified class name to the element // Add the specified class name to the element
messageElement.className = className; messageElement.className = className;
// // Set the text content of the element to the message text
// messageElement.textContent = text;
// Use the markdown-it parser // Use the markdown-it parser
const html = parser.render(text); const html = parser.render(text);
messageElement.innerHTML = html; messageElement.innerHTML = html;
// Append the message element to the chatbox immediately // Append the message element to the chatbox immediately
// chatbox.appendChild(messageElement); chatbox.appendChild(messageElement);
},
};
// Typeset math in the message element // Wait for the event listener to set apiEndpoint and useModel
MathJax.typesetPromise([messageElement]).then(() => { window.addEventListener('message', function(event) {
// No need to append anything here, it's already appended above if (event.origin === 'http://localhost:5004') { // Make sure this matches your origin
chatbox.appendChild(messageElement); const { apiEndpoint, useModel } = event.data;
console.log("fronend.js - API Endpoint: ", apiEndpoint);
console.log("fronend.js - use model: ", useModel);
window.apiEndpoint = apiEndpoint;
window.useModel = useModel;
}
});
// Wait for the DOM to be fully loaded before making the API available
document.addEventListener('DOMContentLoaded', function() {
window.frontendApi = frontendApi;
});
});
}
// Make the button toggle colour when user presses Enter on keyboard // Make the button toggle colour when user presses Enter on keyboard
const sendButton = document.getElementById('sendButton'); const sendButton = document.getElementById('sendButton');
document.addEventListener('keydown', function(event) { document.addEventListener('keydown', function(event) {
if (event.key === 'Enter') { if (event.key === 'Enter') {
sendButton.style.backgroundColor = '#6f6f6f'; // Dark Grey when Enter is pressed sendButton.style.backgroundColor = '#6f6f6f'; // Dark Grey when Enter is pressed
} }
}); });
document.addEventListener('keyup', function() { 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
}); });