2024-09-16 12:17:53 +02:00
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
2024-09-16 13:38:30 +02:00
< link rel = "stylesheet" href = "/static/styles.css" >
2024-09-16 12:17:53 +02:00
< title > AI Assistant< / title >
< / head >
< body >
<!-- Main container for the layout -->
< div class = "container" >
<!-- History section: A scrollable list of interactions or messages -->
< div class = "history" >
< ul >
2024-09-16 13:16:11 +02:00
< 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 >
2024-09-16 12:17:53 +02:00
< / ul >
< / div >
<!-- Models section: Contains buttons to switch between AI models -->
< div class = "models" >
< div class = "titel" >
< h1 > Different AI models< / h1 >
< / div >
2024-09-16 13:16:11 +02:00
< div class = "grid" >
<!-- Each AI model is represented as a colored circular button -->
< div class = "ai-class" >
< h3 > Code< / h3 >
< div class = "circle code-model" > < / div >
< / div >
< div class = "ai-class" >
< h3 > Math< / h3 >
< div class = "circle math-model" > < / div >
< / div >
< div class = "ai-class" >
< h3 > Language< / h3 >
< div class = "circle language-model" > < / div >
< / div >
< div class = "ai-class" >
< h3 > Default< / h3 >
< div class = "circle default-model" > < / div >
< / div >
< div class = "ai-class" >
< h3 > Custom< / h3 >
< div class = "circle custom-model" > < / div >
< / div >
2024-09-16 12:17:53 +02:00
< / div >
< / div >
<!-- Output section: Simulating a conversation with AI -->
< div class = "output" >
< div class = "conversation" >
2024-09-16 14:39:11 +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 %}
2024-09-16 12:17:53 +02:00
< / div >
< / div >
<!-- Input section: Where user input is provided -->
2024-09-16 14:24:22 +02:00
< form class = "input" method = "POST" action = "" >
2024-09-16 14:39:11 +02:00
< input type = "text" name = "user_message" placeholder = "Type your message here..." / >
2024-09-16 14:24:22 +02:00
< button type = "submit" name = "option" value = "voice" > < img src = "/static/img/microphone.svg" alt = "microphone" > < / button >
< button type = "submit" name = "option" value = "chat" > Send< / button >
< / form >
2024-09-16 12:17:53 +02:00
< / div >
< / body >
2024-09-16 13:38:30 +02:00
< / html >
