2024-09-17 12:25:15 +02:00
<!DOCTYPE html>
< html lang = "en" >
2024-09-17 16:32:27 +02:00
< head >
< meta charset = "UTF-8" / >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" / >
< link rel = "stylesheet" href = "styles.css" / >
2024-09-17 12:25:15 +02:00
< title > AI Assistant< / title >
2024-09-17 16:32:27 +02:00
< / head >
< body >
2024-09-17 12:25:15 +02:00
< header >
2024-09-17 16:32:27 +02:00
< div class = "header-menu" >
< ul >
< li >
< a href = "/" >
< img src = "/static/img/logo.png" alt = "logo" / >
< / a >
< / li >
< li >
< a href = "/documentation" > Documentation< / a >
< / li >
< li >
< a href = "/faq" > FAQ< / a >
< / li >
< li >
< button id = "toggleButton" > Show Divs< / button >
< / li >
< / ul >
< / div >
2024-09-17 12:25:15 +02:00
< / 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" >
2024-09-17 16:32:27 +02:00
<!-- History section -->
< div class = "history-background hidden" >
< div class = "history" >
< 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 >
2024-09-17 12:25:15 +02:00
< / div >
2024-09-17 16:32:27 +02:00
< / div >
2024-09-16 16:08:00 +02:00
2024-09-17 16:32:27 +02:00
<!-- Models section -->
< div class = "model-background" >
2024-09-17 12:25:15 +02:00
< div class = "models" >
2024-09-17 16:32:27 +02:00
< div class = "titel" >
< h1 > Different AI models< / h1 >
< / div >
< form action = "" >
2024-09-17 12:25:15 +02:00
< div class = "grid" >
2024-09-17 16:32:27 +02:00
< button class = "code-model model-box" >
< div class = "overlay" >
< h3 > Code< / h3 >
2024-09-17 12:25:15 +02:00
< / div >
2024-09-17 16:32:27 +02:00
< / button >
< button class = "math-model model-box" >
< div class = "overlay" >
< h3 > Math< / h3 >
2024-09-17 12:25:15 +02:00
< / div >
2024-09-17 16:32:27 +02:00
< / button >
< button class = "language-model model-box" >
< div class = "overlay" >
< h3 > Language< / h3 >
2024-09-17 12:25:15 +02:00
< / div >
2024-09-17 16:32:27 +02:00
< / button >
< button class = "default-model model-box" >
< div class = "overlay" >
< h3 > Default< / h3 >
2024-09-17 12:25:15 +02:00
< / div >
2024-09-17 16:32:27 +02:00
< / button >
< button class = "default-model model-box" >
< div class = "overlay" >
< h3 > Default< / h3 >
2024-09-17 12:25:15 +02:00
< / div >
2024-09-17 16:32:27 +02:00
< / button >
< button class = "default-model model-box" >
< div class = "overlay" >
< h3 > Default< / h3 >
2024-09-16 13:16:11 +02:00
< / div >
2024-09-17 16:32:27 +02:00
< / button >
< button class = "default-model model-box" >
< div class = "overlay" >
< h3 > Default< / h3 >
2024-09-16 16:08:00 +02:00
< / div >
2024-09-17 16:32:27 +02:00
< / button >
2024-09-16 12:17:53 +02:00
< / div >
2024-09-17 16:32:27 +02:00
< / form >
2024-09-17 12:25:15 +02:00
< / div >
2024-09-17 16:32:27 +02:00
< / div >
2024-09-16 16:08:00 +02:00
2024-09-17 16:32:27 +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" / >
2024-09-17 12:25:15 +02:00
< / button >
2024-09-17 16:32:27 +02:00
< button type = "button" name = "option" value = "answer" >
< img src = "/static/img/copy.svg" alt = "copy" / >
2024-09-17 12:25:15 +02:00
< / button >
2024-09-17 16:32:27 +02:00
< / form >
< / div >
< / div >
<!-- 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 >
2024-09-17 12:25:15 +02:00
< / div >
< script >
function scrollToBottom() {
2024-09-17 16:32:27 +02:00
const conversation = document.getElementById("conversation");
conversation.scrollTop = conversation.scrollHeight;
}
2024-09-17 12:25:15 +02:00
2024-09-17 16:32:27 +02:00
document.addEventListener("DOMContentLoaded", function () {
scrollToBottom(); // Scroll to the bottom when the page loads
2024-09-17 12:25:15 +02:00
2024-09-17 16:32:27 +02:00
const conversation = document.getElementById("conversation");
2024-09-17 12:25:15 +02:00
2024-09-17 16:32:27 +02:00
// Listen for changes in the conversation element
conversation.addEventListener("DOMSubtreeModified", function () {
scrollToBottom(); // Scroll to the bottom when a new message is added
});
2024-09-17 12:25:15 +02:00
2024-09-17 16:32:27 +02:00
const button = document.getElementById("toggleButton");
2024-09-17 12:25:15 +02:00
2024-09-17 16:32:27 +02:00
button.addEventListener("click", function () {
const divs = document.querySelectorAll("div.hidden");
2024-09-17 12:25:15 +02:00
2024-09-17 16:32:27 +02:00
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
}
});
2024-09-17 12:25:15 +02:00
});
2024-09-17 16:32:27 +02:00
});
2024-09-17 12:25:15 +02:00
< / script >
2024-09-17 16:32:27 +02:00
< / body >
2024-09-17 12:25:15 +02:00
< / html >
