Borttagna då filerna flyttats till separata kataloger
This commit is contained in:
@@ -1,41 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Ollama Chat</title>
|
||||
<link rel="stylesheet" href="./clientstyle.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1>Ollama Chat</h1>
|
||||
<div id="chatbox">
|
||||
<!-- messages will be rendered here -->
|
||||
</div>
|
||||
<textarea id="userInput" placeholder="Type your message..." rows="5"></textarea>
|
||||
<button onclick="sendMessage()">Send</button>
|
||||
|
||||
<script src="frontend.js"></script>
|
||||
<script>
|
||||
const chatContainer = document.getElementById('chatbox');
|
||||
|
||||
// Handle resize events
|
||||
window.addEventListener('resize', function() {
|
||||
chatContainer.style.height = 'auto';
|
||||
});
|
||||
|
||||
const userInputElement = document.getElementById('userInput');
|
||||
|
||||
userInputElement.addEventListener('keydown', function(event) {
|
||||
if (event.shiftKey && event.key === 'Enter') { // Shift+Enter for newline
|
||||
event.preventDefault();
|
||||
userInputElement.value += '\n';
|
||||
} else if (event.key === 'Enter') { // Enter to send message
|
||||
sendMessage();
|
||||
userInputElement.value = ''; // Clear the input field after sending
|
||||
event.preventDefault();
|
||||
}
|
||||
});
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -1,69 +0,0 @@
|
||||
body {
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
background-color: #f4f4f4;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
min-height: 100vh;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: #333;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
#chatbox {
|
||||
width: 80%;
|
||||
max-width: 500px;
|
||||
background-color: #fff;
|
||||
border-radius: 10px;
|
||||
padding: 20px;
|
||||
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
|
||||
overflow: auto; /* Allow horizontal and vertical scrolling of the chatbox */
|
||||
resize: both; /* Allow resizing vertically */
|
||||
}
|
||||
|
||||
.message {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.user-message {
|
||||
background-color: #9cc1ecbb;
|
||||
padding: 10px 15px;
|
||||
border-radius: 10px;
|
||||
text-align: left; /* Align user messages to the left */
|
||||
}
|
||||
|
||||
.ai-response {
|
||||
background-color: #f0f8ff;
|
||||
padding: 10px 15px;
|
||||
border-radius: 10px;
|
||||
text-align: left; /* Align AI responses to the left */
|
||||
}
|
||||
|
||||
#userInput {
|
||||
width: calc(50% - 60px); /* Adjust width for input and button */
|
||||
padding: 10px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
#userInput:focus {
|
||||
outline: none;
|
||||
border-color: #66afe9; /* Blue outline on focus */
|
||||
}
|
||||
|
||||
button[onclick="sendMessage()"] {
|
||||
background-color: #4CAF50; /* Green */
|
||||
border: none;
|
||||
color: white;
|
||||
padding: 10px 20px;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
font-size: 16px;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
@@ -1,60 +0,0 @@
|
||||
|
||||
// Get the user input element from the DOM
|
||||
const chatbox = document.getElementById('chatbox');
|
||||
const userInput = document.getElementById('userInput');
|
||||
|
||||
// Get API endpoint for chat from environment variable
|
||||
const apiEndpoint = process.env.BE_API_ENDPOINT || 'http://localhost:5005/api/chat'; // Default if not found
|
||||
console.log("The API Endpoint is:", apiEndpoint);
|
||||
|
||||
|
||||
|
||||
// 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 !== '') {
|
||||
// Send a POST request to the /api/chat endpoint with the message
|
||||
// fetch('http://localhost:5005/api/chat', {
|
||||
fetch(apiEndpoint, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ query }),
|
||||
})
|
||||
.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;
|
||||
|
||||
// Append the message element to the chatbox
|
||||
chatbox.appendChild(messageElement);
|
||||
}
|
||||
Reference in New Issue
Block a user