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

Snyggat till klienten med tydligare markeringar och bättre textinmatning.

Browse Source
This commit is contained in:
Joakim Persson
2024-07-23 20:34:23 +02:00
parent 3b2577084e
commit 9bb9b76227
1 changed files with 82 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files
smartassist/src/client.html
+82 -28
View File
@@ -1,50 +1,104 @@
<!--
Run a simple HTTP server in the directory containing your HTML file
python -m http.server 8000
Open your web browser and navigate to http://localhost:8000/smartassist/src/client.html
Note that the path starts from where the python venv was defined (project root)
-->
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>Ollama Interaction</title> <title>Ollama Chat</title>
<style> <style>
/* Basic styling */ body {
body { font-family: Arial, sans-serif; } font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
#chatbox { background-color: #f4f4f4;
width: 80%; /* responsive width */ display: flex;
max-width: 400px; flex-direction: column;
height: 300px; align-items: center;
border: 1px solid #ccc; min-height: 100vh;
overflow-y: scroll; margin: 0;
padding: 10px;
} }
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-y: scroll; /* Allow scrolling within the chatbox */
}
.message { .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; margin-bottom: 10px;
} }
.user-message {
background-color: #eae2d5; #userInput:focus {
padding: 10px; outline: none;
border-radius: 10px; border-color: #66afe9; /* Blue outline on focus */
} }
.ai-response {
background-color: #cfc68b; button[onclick="sendMessage()"] {
padding: 10px; background-color: #4CAF50; /* Green */
border-radius: 10px; border: none;
color: white;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
border-radius: 5px;
cursor: pointer;
} }
</style> </style>
</head> </head>
<body> <body>
<h1>Ollama Interaction</h1> <h1>Ollama Chat</h1>
<div id="chatbox"> <div id="chatbox">
<!-- messages will be rendered here --> <!-- messages will be rendered here -->
</div> </div>
<input type="text" id="userInput" placeholder="Type your message here..."> <textarea id="userInput" placeholder="Type your message..." rows="5"></textarea>
<button onclick="sendMessage()">Send</button> <button onclick="sendMessage()">Send</button>
<!-- Link to the external frontend.js script (relative or absolute path)-->
<script src="frontend.js"></script> <script src="frontend.js"></script>
<script>
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> </body>
</html> </html>