2024-09-17 12:25:15 +02:00
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< link rel = "stylesheet" href = "/static/styles.css" >
< title > AI Assistant< / title >
< / head >
< body >
< header >
< div class = "header-menu" >
2024-09-16 12:17:53 +02:00
< ul >
2024-09-16 16:08:00 +02:00
< li >
2024-09-16 16:44:30 +02:00
< a href = "/" >
2024-09-17 12:25:15 +02:00
< img src = "/static/img/logo.png" alt = "logo" >
2024-09-16 16:08:00 +02:00
< / a >
< / li >
< li >
2024-09-17 08:03:46 +02:00
< a href = "/documentation" > Documentation< / a >
2024-09-16 16:08:00 +02:00
< / li >
< li >
2024-09-16 17:08:09 +02:00
< a href = "/faq" > FAQ< / a >
2024-09-16 16:08:00 +02:00
< / li >
2024-09-17 12:25:15 +02:00
< li >
< button id = "toggleButton" > Show Divs< / button >
< / li >
2024-09-16 12:17:53 +02:00
< / ul >
2024-09-17 12:25:15 +02:00
< / div >
< / header >
2024-09-16 16:08:00 +02:00
2024-09-17 12:25:15 +02:00
<!-- Main container for the layout -->
< div class = "container" >
<!-- History section -->
< div class = "history hidden" >
< ul >
<!-- Populate with history items -->
< li > < a href = "#" > history1< / a > < / li >
< li > < a href = "#" > history2< / a > < / li >
< li > < a href = "#" > history3< / a > < / li >
< li > < a href = "#" > history4< / a > < / li >
< li > < a href = "#" > history5< / a > < / li >
< li > < a href = "#" > history6< / a > < / li >
< li > < a href = "#" > history7< / a > < / li >
< li > < a href = "#" > history8< / a > < / li >
< li > < a href = "#" > history9< / a > < / li >
< li > < a href = "#" > history10< / a > < / li >
< li > < a href = "#" > history11< / a > < / li >
< li > < a href = "#" > history12< / a > < / li >
< li > < a href = "#" > history13< / a > < / li >
< li > < a href = "#" > history14< / a > < / li >
< li > < a href = "#" > history15< / a > < / li >
< li > < a href = "#" > history16< / a > < / li >
< li > < a href = "#" > history17< / a > < / li >
< li > < a href = "#" > history18< / a > < / li >
< li > < a href = "#" > history19< / a > < / li >
< li > < a href = "#" > history20< / a > < / li >
< / ul >
< / div >
2024-09-16 16:08:00 +02:00
2024-09-17 12:25:15 +02:00
<!-- Models section -->
< div class = "models" >
< div class = "titel" >
< h1 > Different AI models< / h1 >
< / div >
< div class = "grid" >
< div class = "code-model model-box" >
< div class = "overlay" >
2024-09-16 16:08:00 +02:00
< h3 > Code< / h3 >
< / div >
2024-09-17 12:25:15 +02:00
< / div >
< div class = "math-model model-box" >
< div class = "overlay" >
2024-09-16 16:08:00 +02:00
< h3 > Math< / h3 >
< / div >
2024-09-17 12:25:15 +02:00
< / div >
< div class = "language-model model-box" >
< div class = "overlay" >
2024-09-16 16:08:00 +02:00
< h3 > Language< / h3 >
< / div >
2024-09-17 12:25:15 +02:00
< / div >
< div class = "default-model model-box" >
< div class = "overlay" >
< h3 > Default< / h3 >
< / div >
< / div >
< div class = "default-model model-box" >
< div class = "overlay" >
2024-09-16 16:08:00 +02:00
< h3 > Default< / h3 >
< / div >
2024-09-17 12:25:15 +02:00
< / div >
< div class = "default-model model-box" >
< div class = "overlay" >
< h3 > Default< / h3 >
2024-09-16 16:08:00 +02:00
< / div >
2024-09-16 13:16:11 +02:00
< / div >
2024-09-17 12:25:15 +02:00
< div class = "default-model model-box" >
< div class = "overlay" >
< h3 > Default< / h3 >
< / div >
2024-09-16 16:08:00 +02:00
< / div >
2024-09-16 12:17:53 +02:00
< / div >
2024-09-17 12:25:15 +02:00
< / div >
2024-09-16 16:08:00 +02:00
2024-09-17 12:25:15 +02:00
<!-- Output section -->
< div class = "output" >
< div class = "conversation" id = "conversation" >
{% for message in messages %}
{% if message.startswith('User:') %}
< div class = "user-message" > {{ message }}< / div >
{% else %}
< div class = "ai-message" > {{ message }}< / div >
{% endif %}
{% endfor %}
< form method = "POST" action = "" id = "buttonForm" >
< button type = "button" name = "option" value = "chat" >
< img src = "/static/img/resend.svg" alt = "resend" >
< / button >
< button type = "button" name = "option" value = "chat" >
< img src = "/static/img/edit.svg" alt = "edit" >
< / button >
< button type = "button" name = "option" value = "answer" >
< img src = "/static/img/copy.svg" alt = "copy" >
< / button >
< / form >
< / div >
2024-09-16 12:17:53 +02:00
< / div >
2024-09-17 12:25:15 +02:00
<!-- Input section -->
< form class = "input" method = "POST" action = "" id = "inputForm" >
< input type = "text" name = "user_message" placeholder = "Type your message here..." >
< button type = "submit" name = "option" value = "chat" >
< img src = "/static/img/send.svg" alt = "send" >
< / button >
< button type = "submit" name = "option" value = "voice" >
< img src = "/static/img/microphone.svg" alt = "microphone" >
< / button >
< / form >
< / div >
< script >
function scrollToBottom() {
const conversation = document.getElementById('conversation');
conversation.scrollTop = conversation.scrollHeight;
}
document.addEventListener('DOMContentLoaded', function() {
scrollToBottom(); // Scroll to the bottom when the page loads
const conversation = document.getElementById('conversation');
// Listen for changes in the conversation element
conversation.addEventListener('DOMSubtreeModified', function() {
scrollToBottom(); // Scroll to the bottom when a new message is added
});
const button = document.getElementById('toggleButton');
button.addEventListener('click', function() {
const divs = document.querySelectorAll('div.hidden');
divs.forEach(div => {
if (div.style.display === 'none' || div.style.display === '') {
div.style.display = 'block'; // Show the div
} else {
div.style.display = 'none'; // Hide the div
}
});
});
});
< / script >
< / body >
< / html >
