The hidding of history and models works

py/static/img/styles.css

@@ -0,0 +1,517 @@
+:root {
+    --background-color: white;
+    --text-color: white;
+    --font-family: Arial, sans-serif;
+    --history-background-color: rgb(0, 0, 48);
+    --models-background-color: rgb(0, 0, 48);
+    --output-background-color: black;
+    /* Set the conversation background to black */
+    --user-message-color: rgb(0, 128, 255);
+    /* Blueish bubble for user */
+    --ai-message-color: rgb(100, 100, 255);
+    /* Lighter blue for AI */
+    --input-background-color: rgb(0, 0, 48);
+    --input-button-color: rgb(0, 128, 255);
+    --input-button-hover-color: rgb(0, 100, 200);
+    --scrollbar-track: rgb(91, 172, 253);
+    --scrollbar-thumb: rgb(0, 88, 176);
+}
+
+/* Global Reset */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+
+
+html,
+body {
+    height: 100vh;
+    overflow: hidden;
+    /* Prevent scrolling */
+}
+
+/* Body Styling */
+body {
+    margin-top: 2em;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: var(--background-color);
+    color: var(--text-color);
+    font-family: var(--font-family);
+    margin-bottom: 0.5em;
+}
+
+/* Header Styling */
+header {
+    background-color: var(--background-color);
+    color: black;
+    width: 100%;
+    text-decoration: none;
+    position: fixed;
+    top: 0;
+    left: 0;
+    padding: 10px 20px;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+    z-index: 1000;
+    font-family: var(--font-family);
+}
+
+header li {
+    display: inline-block;
+    margin: 0 15px;
+}
+
+header img {
+    height: 2em;
+    vertical-align: middle;
+}
+
+header a {
+    color: black;
+    text-decoration: none;
+    transition: color 0.3s;
+}
+
+header a:hover {
+    color: var(--input-button-color);
+}
+
+/* Container Grid Layout */
+.container {
+    display: grid;
+    grid-template-columns: 1fr 3fr;
+    grid-template-rows: 3fr 1fr 1fr 1fr;
+    gap: 10px;
+    width: 90vw;
+    height: 95vh;
+}
+
+/* History Section */
+
+.history-background {
+    grid-column: 1/2;
+    grid-row: 1/2;
+    height: 100%;
+    overflow: hidden;
+    background-color: var(--history-background-color);
+    padding: 1em;
+    border-radius: 2em;
+}
+
+.history {
+    height: 100%;
+    overflow-y: scroll;
+    padding-right: 10px;
+}
+
+.history ul {
+    list-style: none;
+}
+
+.history ul li {
+    padding: 10px 0;
+    border-bottom: 1px solid var(--text-color);
+    width: 100%;
+}
+
+.history ul li a {
+    display: block;
+    text-decoration: none;
+    color: white;
+    width: 100%;
+    padding: 5px;
+}
+
+.history ul li a:hover {
+    background-color: var(--input-button-hover-color);
+}
+
+/* Models Section */
+.model-background {
+    grid-column: 1/2;
+    grid-row: 2/5;
+    overflow-y: auto;
+    background-color: var(--models-background-color);
+    border-radius: 2em;
+    padding: 1em;
+    height: 90%;
+    box-sizing: border-box;
+    overflow: hidden;
+}
+
+.models {
+    grid-column: 1/2;
+    grid-row: 2/5;
+    overflow-y: auto;
+    background-color: var(--models-background-color);
+    border-radius: 2em;
+    padding: 1em;
+    height: 100%;
+    box-sizing: border-box;
+    overflow: hidden;
+    overflow-y: scroll;
+}
+
+.models form {
+    padding-right: 10px;
+    padding-left: 10px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.models .titel {
+    padding-bottom: 1em;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.grid {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 1.5vh;
+    width: fit-content;
+    /* height: calc(100% - 2em); */
+}
+
+.grid h3 {
+    font-size: x-large;
+}
+
+.model-box {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #fff;
+    border-radius: 5%;
+    overflow: hidden;
+    position: relative;
+    height: 18vh;
+    width: 18vh;
+}
+
+.overlay {
+    z-index: 900;
+    position: absolute;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.7);
+    /* Dark overlay */
+    color: white;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 300%;
+    transition: opacity 0.5s ease;
+    pointer-events: none;
+    opacity: 0;
+    font-size: xx-large;
+}
+
+.overlay img {
+    align-self: flex-end;
+    justify-self: end;
+    height: 3vh;
+    width: 3vh;
+    position: absolute;
+    right: 15px;
+    bottom: 15px;
+}
+
+.model-box:hover .overlay {
+    opacity: 1;
+}
+
+.code-model {
+    background-image: url(/static/img/code.jpg);
+    background-repeat: no-repeat;
+    background-size: cover;
+}
+
+.math-model {
+    background-image: url(/static/img/math.jpg);
+    background-color: white;
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: contain;
+}
+
+.language-model {
+    background-image: url(/static/img/language.jpg);
+    background-color: #72cce4;
+    background-repeat: no-repeat;
+    background-size: contain;
+    background-position: center;
+}
+
+.default-model {
+    background-image: url(/static/img/default.jpg);
+    background-repeat: no-repeat;
+    background-size: cover;
+    background-position: center;
+}
+
+/* Output Section */
+.output {
+    grid-column: 2;
+    grid-row: 1 / 4;
+    border-radius: 2em;
+    background-color: var(--output-background-color);
+    padding: 1.5em;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    font-size: 1.2em;
+    overflow-y: auto;
+    min-height: 75vh;
+    margin-bottom: 0;
+    width: 100%;
+}
+
+
+/* Conversation */
+#conversation {
+    display: flex;
+    flex-direction: column;
+    padding: 10px;
+    overflow-y: auto;
+    max-height: 80vh;
+    background-color: var(--output-background-color);
+    /* Black background */
+    border-radius: 10px;
+    scroll-behavior: smooth;
+    /* Optional: Smooth scrolling */
+}
+
+.user-message,
+.ai-message {
+    margin: 10px 0;
+    padding: 10px 15px;
+    border-radius: 15px;
+    max-width: 60%;
+    width: fit-content;
+    /* Adjusts width to fit the content */
+    word-wrap: break-word;
+    display: block;
+    /* Changed from inline-block to block */
+    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
+}
+
+/* Align user message to the right */
+.user-message {
+    background-color: var(--user-message-color);
+    color: var(--text-color);
+    border-bottom-right-radius: 0;
+    margin-left: auto;
+    text-align: right;
+    /* Align text to the right */
+}
+
+/* Align AI message to the left */
+.ai-message {
+    background-color: var(--ai-message-color);
+    color: var(--text-color);
+    border-bottom-left-radius: 0;
+    margin-right: auto;
+    text-align: left;
+    /* Align text to the left */
+}
+
+
+/* Output Form Buttons */
+.output form {
+    display: flex;
+    justify-content: flex-start;
+    gap: 10px;
+}
+
+.output form button {
+    background-color: transparent;
+    color: white;
+    border: none;
+    padding: 0;
+    margin: 5px;
+    cursor: pointer;
+    transition: transform 0.2s ease-in-out;
+}
+
+.output form button:hover {
+    transform: scale(1.2);
+}
+
+.output form button img {
+    height: 1.8em;
+}
+
+/* Input Section */
+.input {
+    grid-column: 2/3;
+    grid-row: 4/5;
+    border-radius: 20px;
+    background-color: var(--input-background-color);
+    padding: 1.5vh;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    height: auto;
+    /* margin-top: -9em; */
+    gap: 10px;
+    height: 10vh;
+}
+
+.input input {
+    flex-grow: 1;
+    padding: 5px;
+    font-size: 1.2em;
+    border-radius: 8px;
+    border: 2px solid var(--input-button-color);
+    outline: none;
+    margin-right: 10px;
+    background-color: rgba(255, 255, 255, 0.9);
+    color: #333;
+    transition: border-color 0.3s ease-in-out;
+    height: 7vh;
+}
+
+.input input:focus {
+    border-color: var(--input-button-hover-color);
+}
+
+.input button {
+    padding: 1em;
+    margin: 5px;
+    background-color: var(--input-button-color);
+    color: white;
+    border: none;
+    border-radius: 50%;
+    font-size: 1.5em;
+    cursor: pointer;
+    height: 50px;
+    width: 50px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    transition: background-color 0.3s ease;
+    position: relative;
+    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+}
+
+.input button img {
+    height: 1em;
+}
+
+.input button:hover {
+    background-color: var(--input-button-hover-color);
+    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
+}
+
+/* FAQ Section */
+#faq {
+    max-width: 800px;
+    width: 90%;
+    margin-top: 50px;
+    padding: 20px;
+    background-color: #222;
+    border-radius: 10px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+}
+
+#faq h2 {
+    text-align: center;
+    color: #00ccff;
+    font-size: 2em;
+    margin-bottom: 20px;
+}
+
+.faq-item {
+    margin-bottom: 20px;
+    padding: 10px;
+    border-radius: 5px;
+    background-color: #333;
+}
+
+.faq-item h3 {
+    color: #00ccff;
+    margin-bottom: 10px;
+    font-size: 1.5em;
+}
+
+.faq-item p {
+    color: #ddd;
+    font-size: 1.1em;
+    line-height: 1.5;
+}
+
+.faq-item:hover {
+    background-color: #444;
+    transition: background-color 0.3s;
+}
+
+::-webkit-scrollbar {
+    width: 7px;
+}
+
+::-webkit-scrollbar-track {
+    background-color: var(--scrollbar-track);
+    border-radius: 5px;
+    overflow: hidden;
+    margin-left: 10px;
+    padding-left: 15px;
+}
+
+::-webkit-scrollbar-thumb {
+    background-color: var(--scrollbar-thumb);
+    border-radius: 5px;
+}
+
+@media (max-width: 1400px) {
+    .grid {
+        grid-template-columns: 1fr;
+    }
+
+    .model-box {
+        width: 15vw;
+        aspect-ratio: 1/1;
+    }
+}
+
+/* Responsive Adjustments */
+@media (max-width: 768px) {
+    .container {
+        grid-template-columns: 1fr;
+        grid-template-rows: auto;
+        width: 95vw;
+    }
+
+    .history,
+    .models {
+        display: none;
+        /* Hide history and models */
+    }
+
+    .output {
+        grid-column: 1;
+        grid-row: 1 / span 2;
+    }
+
+    .input {
+        grid-column: 1;
+        grid-row: 3;
+        /* margin-top: -4em; */
+    }
+
+    .input button {
+        height: 40px;
+        width: 40px;
+    }
+
+    .output form button img {
+        height: 1.5em;
+    }
+}

py/static/styles.css

@@ -24,8 +24,6 @@
     box-sizing: border-box;
 }
 
-
-
 html,
 body {
     height: 100vh;
@@ -91,7 +89,6 @@ header a:hover {
 }
 
 /* History Section */
-
 .history-background {
     grid-column: 1/2;
     grid-row: 1/2;
@@ -272,9 +269,9 @@ header a:hover {
     min-height: 75vh;
     margin-bottom: 0;
     width: 100%;
+    height: 100%;
 }
 
-
 /* Conversation */
 #conversation {
     display: flex;
@@ -289,6 +286,17 @@ header a:hover {
     /* Optional: Smooth scrolling */
 }
 
+/* Resizable Conversation */
+.resize {
+    resize: both;
+    overflow: auto;
+    /* Allow resizing both horizontally and vertically */
+    min-width: 300px;
+    min-height: 300px;
+    /* Minimum dimensions to prevent it from becoming too small */
+}
+
+/* User and AI Messages */
 .user-message,
 .ai-message {
     margin: 10px 0;
@@ -323,7 +331,6 @@ header a:hover {
     /* Align text to the left */
 }
 
-
 /* Output Form Buttons */
 .output form {
     display: flex;
@@ -514,4 +521,4 @@ header a:hover {
     .output form button img {
         height: 1.5em;
     }
-}
+}

py/templates/index.html

@@ -61,7 +61,7 @@
       </div>
 
       <!-- Models section -->
-      <div class="model-background">
+      <div class="model-background hidden">
         <div class="models">
           <div class="titel">
             <h1>Different AI models</h1>
@@ -110,9 +110,10 @@
         </div>
       </div>
 
+      <!-- Output section -->
       <!-- Output section -->
       <div class="output">
-        <div class="conversation" id="conversation">
+        <div class="conversation resize" id="conversation">
           {% for message in messages %} {% if message.startswith('User:') %}
           <div class="user-message">{{ message }}</div>
           {% else %}
@@ -150,33 +151,43 @@
 
     <script>
       function scrollToBottom() {
-        const conversation = document.getElementById("conversation");
+          const conversation = document.getElementById("conversation");
-        conversation.scrollTop = conversation.scrollHeight;
+          conversation.scrollTop = conversation.scrollHeight;
       }
 
       document.addEventListener("DOMContentLoaded", function () {
-        scrollToBottom(); // Scroll to the bottom when the page loads
+          scrollToBottom(); // Scroll to the bottom when the page loads
 
-        const conversation = document.getElementById("conversation");
+          const conversation = document.getElementById("conversation");
 
-        // Listen for changes in the conversation element
+          // Use MutationObserver to efficiently observe changes in the conversation element
-        conversation.addEventListener("DOMSubtreeModified", function () {
+          const observer = new MutationObserver(() => {
-          scrollToBottom(); // Scroll to the bottom when a new message is added
+              scrollToBottom(); // Scroll to the bottom when a new message is added
-        });
+          });
-
+
-        const button = document.getElementById("toggleButton");
+          observer.observe(conversation, {
-
+              childList: true,
-        button.addEventListener("click", function () {
+              subtree: true,
-          const divs = document.querySelectorAll("div.hidden");
+          });
-
+
-          divs.forEach((div) => {
+          const button = document.getElementById("toggleButton");
-            if (div.style.display === "none" || div.style.display === "") {
+
-              div.style.display = "block"; // Show the div
+          button.addEventListener("click", function () {
-            } else {
+              const hiddenDivs = document.querySelectorAll("div.hidden");
-              div.style.display = "none"; // Hide the div
+              const areDivsHidden = Array.from(hiddenDivs).every(div =>
-            }
+                  getComputedStyle(div).display === "none" || getComputedStyle(div).display === ""
+              );
+
+              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
+                  }
+              });
           });
-        });
       });
     </script>
   </body>

py/web_flask.py

@@ -1,6 +1,6 @@
 from flask import Flask, request, render_template
 from api import API
-from voice_recognition import Voice
+# from voice_recognition import Voice
 import sys
 import threading
 import pyperclip
@@ -11,7 +11,7 @@ from PyQt5.QtWidgets import *
 
 APP = Flask(__name__)
 api = API()
-voice = Voice()
+# voice = Voice()
 
 messages = []
 
@@ -52,7 +52,7 @@ def index():
             pyperclip.copy(messages[len(messages) - 1])
 
         if option == "voice":
-            user_message = voice.listen()
+           #     user_message = voice.listen()
             messages.append(f"User: {user_message}")
         elif option == "chat":
             user_message = request.form['user_message']