adds web ui

rayisaninja · Jan 29, 2024 · ed7f224 · ed7f224
1 parent 6666e6b
commit ed7f224
Show file tree

Hide file tree

Showing 8 changed files with 417 additions and 36 deletions.
diff --git a/function_list_12_31_23.md b/function_list_12_31_23.md
diff --git a/index.html b/index.html
@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>GPT_ALL</title>
+    <link rel="stylesheet" href="/static/chat-style.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
+</head>
+<body>
+    <div class="chat-container">
+      <h1>GPT_ALL</h1>
+      <div class="chat-window" id="chat-window"></div>
+      <form id="input-form">
+        <textarea
+          id="user-input"
+          name="user-input"
+          placeholder="Enter your message..."
+          rows="1"
+        ></textarea>
+        <div class="tabBar">
+          <button id="clear-chat-btn">Clear</button>
+          <input type="submit" value="Send" />
+        </div>
+      </form>
+    </div>
+    <script>
+        const chat = document.getElementById("chat-window");
+        const inputForm = document.getElementById("input-form");
+        const userInput = document.getElementById("user-input");
+
+        let memory = [];
+
+        inputForm.addEventListener("submit", async (e) => {
+            e.preventDefault();
+            const userText = userInput.value.trim();
+            if (!userText) return;
+
+            chat.innerHTML += `<div class="message-wrapper user"><div class="user-message">${userText}</div><img class="useravatar" src="${userAvatarUrl}" /></div>`;
+            userInput.value = "";
+
+            const response = await fetch("/chat", {
+                method: "POST",
+                headers: { "Content-Type": "application/json" },
+                body: JSON.stringify({ user_input: userText, memory }),
+            });
+
+            if (response.ok) {
+                const data = await response.json();
+                chat.innerHTML += `<div class="message-wrapper ai"><img class="aiavatar" src="${aiAvatarUrl}" /><div class="ai-message">${data.response}</div></div>`;
+                memory = data.memory;
+                chat.scrollTop = chat.scrollHeight;
+            } else {
+                chat.innerHTML += `<div class="message-wrapper ai"><div class="ai-message">Error: Unable to get a response from the assistant.</div></div>`;
+            }
+        });
+    </script>
+    <script>
+        const userAvatarUrl = "/static/U1.webp";
+        const aiAvatarUrl = "/static/J5.webp";
+    </script>
+    <script src="/static/chat.js"></script>
+</body>
+</html>
diff --git a/static/J5.webp b/static/J5.webp
diff --git a/static/U1.webp b/static/U1.webp
diff --git a/static/chat-style.css b/static/chat-style.css
@@ -0,0 +1,234 @@
+@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap");
+
+body {
+  font-family: "Roboto", sans-serif;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 95vh;
+  background-color: #f0f0f0;
+  background-image: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);
+}
+
+h1 {
+  display: flex;
+  justify-content: center;
+  margin: 0px;
+  padding: 0px;
+  font-size: 3rem;
+  font-weight: 700;
+  color: #333;
+  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
+  background-color: rgba(0, 0, 139, 0.371);
+  border-radius: 7px 7px 0px 0px;
+}
+
+h2 {
+  display: flex;
+  font-size: 1.5em;
+  margin-bottom: 0px;
+  margin-top: 0px;
+  justify-content: center;
+  color: #666;
+  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
+  border: solid 1px #666;
+  border-radius: 7px;
+}
+
+form {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding-left: 5px;
+  padding-right: 5px;
+  background-color: #17224440;
+  border-radius: 10px;
+  width: 100%; /* Add this line */
+}
+
+.chat-button {
+  display: inline-block;
+  background-color: #ff0000;
+  color: white;
+  padding: 10px 20px;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  text-decoration: none;
+  margin-top: 10px;
+  transition: all 0.3s;
+}
+
+.chat-button:hover {
+  background-color: #490000;
+  transform: translateY(-2px);
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+.chat-container {
+  width: 80%;
+  margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  height: 90vh;
+  padding: 0px 20px 20px 20px;
+  box-sizing: border-box;
+  border-radius: 10px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+
+.chat-window {
+  height: calc(100vh - 120px);
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  flex-grow: 1;
+  overflow-y: auto;
+  padding: 20px;
+  background-color: #ffffff;
+  border-radius: 0px 0px 7px 7px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
+  margin-bottom: 10px;
+}
+
+.user-message,
+.ai-message {
+  display: flex;
+  align-items: center;
+  padding: 10px 15px;
+  border-radius: 13px;
+  margin-bottom: 5px;
+  font-size: 1.5rem;
+  line-height: 1.4;
+  width: fit-content;
+  word-wrap: break-word;
+  animation: fadeIn 0.5s;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.user-message {
+  background-color: #007bff;
+  color: #ffffff;
+}
+
+.ai-message {
+  background-color: #8d8d8d;
+  color: #333333;
+}
+
+#chat-form {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+#user-input {
+  flex-grow: 1;
+  padding: 10px;
+  border: 1px solid #ccc;
+  border-radius: 10px;
+  outline: none;
+  margin: 5px auto;
+  margin-bottom: 10px;
+  transition: border-color 0.3s;
+  font-size: 1.5rem;
+  width: calc(100% - 20px);
+}
+
+#user-input:focus {
+  border-color: #007bff;
+}
+
+input[type="submit"] {
+  background-color: #007bff;
+  color: #ffffff;
+  padding: 20px 40px;
+  border: none;
+  border-radius: 20px;
+  cursor: pointer;
+  font-size: 1.5rem;
+  transition: all 0.3s;
+}
+
+input[type="submit"]:hover {
+  background-color: #0056b3;
+  transform: translateY(-2px);
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+.tabBar {
+  display: flex;
+  justify-content: center;
+  margin-bottom: 10px;
+  margin-top: 10px;
+  gap: 50px;
+}
+
+#clear-chat-btn {
+  background-color: #dc3545;
+  color: #ffffff;
+  padding: 20px 40px;
+  border: none;
+  border-radius: 20px;
+  cursor: pointer;
+  font-size: 1.5rem;
+  transition: all 0.3s;
+  align-self: center;
+}
+
+#clear-chat-btn:hover {
+  background-color: #c82333;
+  transform: translateY(-2px);
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+.aiavatar {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  margin-right: 10px;
+  margin-top: 5px;
+  object-fit: cover;
+}
+
+.useravatar {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  margin-left: 10px;
+  margin-top: 5px;
+  object-fit: cover;
+}
+
+.message-wrapper {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.message-wrapper.ai {
+  justify-content: flex-start;
+}
+
+@media screen and (max-width: 768px) {
+  .chat-container {
+    width: 100%;
+    height: 95vh;
+    border-radius: 7px;
+  }
+
+  .chat-window {
+    height: 95vh;
+  }
+}
diff --git a/static/chat.js b/static/chat.js
@@ -0,0 +1,60 @@
+function clearChatHistory() {
+    $("#chat-window").empty();
+  }
+
+  function scrollToBottom() {
+    const chatWindow = document.getElementById("chat-window");
+    chatWindow.scrollTop = chatWindow.scrollHeight;
+  }
+
+  $(document).ready(function () {
+    $("#chat-form").on("submit", function (event) {
+      event.preventDefault();
+      const userInput = $("#user-input").val();
+      if (userInput.trim() === "") return;
+
+      // Display user input in the chat window
+      $("#chat-window").append(`<div class="user-message">${userInput}</div>`);
+      scrollToBottom(); // Call scrollToBottom() after adding the user message
+
+      // Send user input to the server
+      $.ajax({
+        url: "/process_chat",
+        type: "POST",
+        data: {
+          user_input: userInput,
+        },
+        success: function (response) {
+          // Display AI response in the chat window
+          $("#chat-window").append(
+            `<div class="ai-message">${response.response}</div>`
+          );
+          scrollToBottom(); // Call scrollToBottom() after adding the AI message
+        },
+        error: function (error) {
+          console.log(error);
+          alert("Error processing chat. Please try again.");
+        },
+      });
+
+      // Clear the input field
+      $("#user-input").val("");
+    });
+
+    $("#clear-chat-btn").on("click", function () {
+      clearChatHistory();
+    });
+  });
+
+  $("#chat-form").on("submit", function (event) {
+    event.preventDefault();
+    var userInput = $("#user-input").val();
+    $.post("/send_message", { "user-input": userInput }, function (data) {
+      // Append the AI response to the chat window
+      $("#chat-window").append(
+        '<div class="chat-bubble ai"><p>' + data.ai_response + '</p></div>'
+      );
+      // Clear the user input field
+      $("#user-input").val("");
+    });
+  });