Inläsning av apiEndpoint och useModel har flyttats hit. Funktioner och variabler från frontend.js exporteras numer via frontendApi
This commit is contained in:
Joakim Persson
@@ -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
|
||||
const chatbox = document.getElementById('chatbox');
|
||||
const userInput = document.getElementById('userInput');
|
||||
|
||||
const parser = window.markdownit({
|
||||
linkify: true,
|
||||
strikethrough: true,
|
||||
});
|
||||
|
||||
parser.enable(['table']);
|
||||
|
||||
console.log("frontend.js - API Endpoint: ", apiEndpoint);
|
||||
console.log("frontend.js - use model: ", 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
|
||||
|
||||
const frontendApi = {
|
||||
// Define a function to send the user's message to the AI
|
||||
function sendMessage() {
|
||||
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();
|
||||
|
||||
// Check if the message is not empty
|
||||
if (query !== '') {
|
||||
|
||||
// fetch(`${apiEndpoint}`, {
|
||||
fetch(apiEndpoint, {
|
||||
fetch(window.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
|
||||
body: JSON.stringify({ query, model: window.useModel }), // 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');
|
||||
|
||||
this.renderMessage(query, 'user-message');
|
||||
// Render the AI's response in the chatbox
|
||||
renderMessage(aiResponse, 'ai-response');
|
||||
|
||||
this.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) {
|
||||
renderMessage: function(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);
|
||||
},
|
||||
};
|
||||
|
||||
});
|
||||
// Wait for the event listener to set apiEndpoint and useModel
|
||||
window.addEventListener('message', function(event) {
|
||||
if (event.origin === 'http://localhost:5004') { // Make sure this matches your origin
|
||||
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
|
||||
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
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user