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" / >
2024-09-18 09:04:09 +02:00
< link rel = "stylesheet" href = "/static/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 -->
2024-09-18 11:09:43 +02:00
< div class = "model-background hidden" >
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-18 09:04:09 +02:00
< img src = "/static/img/wifi.svg" alt = "Wi-Fi" / >
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-18 09:04:09 +02:00
< img src = "/static/img/nowifi.svg" alt = "No Wi-Fi" / >
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-18 11:09:43 +02:00
<!-- Output section -->
2024-09-17 16:32:27 +02:00
<!-- Output section -->
< div class = "output" >
2024-09-18 11:09:43 +02:00
< div class = "conversation resize" id = "conversation" >
2024-09-17 16:32:27 +02:00
{% 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-18 11:09:43 +02:00
const conversation = document.getElementById("conversation");
conversation.scrollTop = conversation.scrollHeight;
2024-09-17 16:32:27 +02:00
}
2024-09-17 12:25:15 +02:00
2024-09-17 16:32:27 +02:00
document.addEventListener("DOMContentLoaded", function () {
2024-09-18 11:09:43 +02:00
scrollToBottom(); // Scroll to the bottom when the page loads
const conversation = document.getElementById("conversation");
2024-09-17 12:25:15 +02:00
2024-09-18 11:09:43 +02:00
// Use MutationObserver to efficiently observe changes in the conversation element
const observer = new MutationObserver(() => {
scrollToBottom(); // Scroll to the bottom when a new message is added
});
2024-09-17 12:25:15 +02:00
2024-09-18 11:09:43 +02:00
observer.observe(conversation, {
childList: true,
subtree: true,
});
2024-09-17 12:25:15 +02:00
2024-09-18 11:09:43 +02:00
const button = document.getElementById("toggleButton");
2024-09-17 12:25:15 +02:00
2024-09-18 11:09:43 +02:00
button.addEventListener("click", function () {
const hiddenDivs = document.querySelectorAll("div.hidden");
const areDivsHidden = Array.from(hiddenDivs).every(div =>
getComputedStyle(div).display === "none" || getComputedStyle(div).display === ""
);
2024-09-17 12:25:15 +02:00
2024-09-18 11:09:43 +02:00
hiddenDivs.forEach((div) => {
if (getComputedStyle(div).display === "none" || getComputedStyle(div).display === "") {
div.style.display = "block"; // Show the div
div.style.width = ""; // Reset width to default
} else {
div.style.display = "none"; // Hide the div
div.style.width = ""; // Reset width to default
}
});
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 >
