Compare commits
3 Commits
9203641e6a
...
9e6e6048f3
| Author | SHA1 | Date | |
|---|---|---|---|
 Joakim Persson
|
9e6e6048f3 | ||
|
Joakim Persson
|
538f02e6a7 | ||
|
Joakim Persson
|
810b369721 |
@@ -6,35 +6,15 @@
|
|||||||
<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"> -->
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<h1>Ollama Chat</h1>
|
<h1>Ollama Chat</h1>
|
||||||
<div id="chatbox">
|
<div id="chatbox">
|
||||||
<!-- messages will be rendered here -->
|
<!-- messages will be rendered here -->
|
||||||
</div>
|
</div>
|
||||||
<textarea id="userInput" placeholder="Type your message..." rows="5"></textarea>
|
<textarea id="userInput" placeholder="Type your message..." rows="5"></textarea>
|
||||||
<button id="sendButton" onclick="sendMessage()">Send</button>
|
<button id="sendButton" onclick="window.frontendApi.sendMessage()">Send</button>
|
||||||
|
|
||||||
<!-- Get the apiEndpoint and the useModel -->
|
|
||||||
<!-- <script>
|
|
||||||
const apiEndpoint = window.apiEndpoint;
|
|
||||||
const useModel = window.useModel;
|
|
||||||
console.log("client.html - API Endpoint: ", apiEndpoint);
|
|
||||||
console.log("client.html - use model: ", useModel);
|
|
||||||
</script> -->
|
|
||||||
|
|
||||||
<!-- <script>
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
</script> -->
|
|
||||||
|
|
||||||
<!-- Marked-it for markdown rendering -->
|
<!-- Marked-it for markdown rendering -->
|
||||||
<script src="https://cdn.jsdelivr.net/npm/markdown-it@14.1.0/dist/markdown-it.min.js"></script>
|
<script src="https://cdn.jsdelivr.net/npm/markdown-it@14.1.0/dist/markdown-it.min.js"></script>
|
||||||
@@ -54,9 +34,6 @@
|
|||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
const chatContainer = document.getElementById('chatbox');
|
const chatContainer = document.getElementById('chatbox');
|
||||||
|
|
||||||
|
|||||||
@@ -61,7 +61,7 @@ h1 {
|
|||||||
border-color: #66afe9; /* Blue outline on focus */
|
border-color: #66afe9; /* Blue outline on focus */
|
||||||
}
|
}
|
||||||
|
|
||||||
button[onclick="sendMessage()"] {
|
button[onclick="window.frontendApi.sendMessage()"] {
|
||||||
background-color: #4CAF50; /* Green */
|
background-color: #4CAF50; /* Green */
|
||||||
border: none;
|
border: none;
|
||||||
color: white;
|
color: white;
|
||||||
@@ -75,11 +75,11 @@ button[onclick="sendMessage()"] {
|
|||||||
transition: background-color 0.3s; /* Smooth transition effect */
|
transition: background-color 0.3s; /* Smooth transition effect */
|
||||||
}
|
}
|
||||||
|
|
||||||
button[onclick="sendMessage()"]:hover {
|
button[onclick="window.frontendApi.sendMessage()"]:hover {
|
||||||
background-color: #b2b2b2; /* Light Grey on hover */
|
background-color: #b2b2b2; /* Light Grey on hover */
|
||||||
}
|
}
|
||||||
|
|
||||||
button[onclick="sendMessage()"]:active {
|
button[onclick="window.frontendApi.sendMessage()"]:active {
|
||||||
background-color: #6f6f6f; /* Dark Grey when clicked */
|
background-color: #6f6f6f; /* Dark Grey when clicked */
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -1,111 +1,3 @@
|
|||||||
|
|
||||||
// // 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');
|
||||||
|
|||||||
Reference in New Issue
Block a user