Ll3doke

Running

App Files Files Community

Ashrafb commited on Jun 20

Commit

3c43801

•

1 Parent(s): adbe9a0

Upload static_index (64).html

Browse files

Files changed (1) hide show

static/static_index (64).html +532 -0

static/static_index (64).html ADDED Viewed

	@@ -0,0 +1,532 @@

+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <!-- Google Fonts Link For Icons -->
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
+  <style>
+/* Import Google font - Poppins */
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  font-family: "Poppins", sans-serif;
+}
+:root {
+  --text-color: #FFFFFF;
+  --icon-color: #ACACBE;
+  --icon-hover-bg: #5b5e71;
+  --placeholder-color: #dcdcdc;
+  --outgoing-chat-bg: #343541;
+  --incoming-chat-bg: #444654;
+  --outgoing-chat-border: #343541;
+  --incoming-chat-border: #444654;
+}
+.light-mode {
+  --text-color: #343541;
+  --icon-color: #a9a9bc;
+  --icon-hover-bg: #f1f1f3;
+  --placeholder-color: #6c6c6c;
+  --outgoing-chat-bg: #FFFFFF;
+  --incoming-chat-bg: #F7F7F8;
+  --outgoing-chat-border: #FFFFFF;
+  --incoming-chat-border: #D9D9E3;
+}
+body {
+  background: var(--outgoing-chat-bg);
+  overflow: hidden; /* Prevent body from scrolling */
+}
+.top-bar {
+  background: var(--outgoing-chat-bg);
+  border-bottom: 1px solid var(--incoming-chat-border);
+  padding: 10px;
+  text-align: center;
+  color: var(--text-color);
+  top: 0;
+  width: 100%;
+  z-index: 1000;
+}
+.chat-container {
+  overflow-y: auto;
+  max-height: calc(100vh - 150px); /* Adjust max-height to account for top bar and typing container */
+  padding-top: 60px; /* Add padding to account for fixed top bar */
+  padding-bottom: 150px; /* Add padding to account for typing container */
+  position: relative;
+}
+:where(.chat-container, textarea)::-webkit-scrollbar {
+  width: 6px;
+}
+:where(.chat-container, textarea)::-webkit-scrollbar-track {
+  background: var(--incoming-chat-bg);
+  border-radius: 25px;
+}
+:where(.chat-container, textarea)::-webkit-scrollbar-thumb {
+  background: var(--icon-color);
+  border-radius: 25px;
+}
+.default-text {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  height: 70vh;
+  padding: 0 10px;
+  text-align: center;
+  color: var(--text-color);
+}
+.default-text h1 {
+  font-size: 3.3rem;
+}
+.default-text p {
+  margin-top: 10px;
+  font-size: 1.1rem;
+}
+.chat-container .chat {
+  padding: 25px 10px;
+  display: flex;
+  justify-content: center;
+  color: var(--text-color);
+  position: relative;
+  word-break: break-word; /* Ensure long words break to fit within the container */
+  overflow-wrap: break-word; /* Ensure long words break to fit within the container */
+}
+.chat-container .chat.outgoing {
+  background: var(--outgoing-chat-bg);
+  border: 1px solid var(--outgoing-chat-border);
+}
+.chat-container .chat.incoming {
+  background: var(--incoming-chat-bg);
+  border: 1px solid var(--incoming-chat-border);
+}
+.chat .chat-content {
+  display: flex;
+  max-width: 1200px;
+  width: 100%;
+  align-items: flex-start;
+  justify-content: space-between;
+  word-break: break-word; /* Ensure long words break to fit within the container */
+  overflow-wrap: break-word; /* Ensure long words break to fit within the container */
+}
+span.material-symbols-rounded {
+  user-select: none;
+  cursor: pointer;
+  color: var(--icon-color); /* Ensure all icons use the same color */
+}
+.chat .chat-content span {
+  cursor: pointer;
+  font-size: 1.3rem;
+  color: var(--icon-color);
+  visibility: visible; /* Ensure icons are always visible */
+}
+.chat .chat-details {
+  display: flex;
+  align-items: center;
+}
+.chat .chat-details img {
+  width: 35px;
+  height: 35px;
+  align-self: flex-start;
+  object-fit: cover;
+  border-radius: 2px;
+}
+.chat .chat-details p {
+  white-space: pre-wrap;
+  font-size: 1.05rem;
+  padding: 0 50px 0 25px;
+  color: var(--text-color);
+  word-break: break-word;
+  overflow-wrap: break-word;
+  max-width: 100%; /* Ensure long words break to fit within the container */
+}
+.chat .chat-details p.error {
+  color: #e55865;
+}
+.chat .typing-animation {
+  padding-left: 25px;
+  display: inline-flex;
+}
+.typing-animation .typing-dot {
+  height: 7px;
+  width: 7px;
+  border-radius: 50%;
+  margin: 0 3px;
+  opacity: 0.7;
+  background: var(--text-color);
+  animation: animateDots 1.5s var(--delay) ease-in-out infinite;
+}
+.typing-animation .typing-dot:first-child {
+  margin-left: 0;
+}
+@keyframes animateDots {
+  0%,
+  44% {
+    transform: translateY(0px);
+  }
+  28% {
+    opacity: 0.4;
+    transform: translateY(-6px);
+  }
+  44% {
+    opacity: 0.2;
+  }
+}
+/* Typing container styling */
+.typing-container {
+  position: fixed;
+  bottom: 0;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  padding: 20px 10px;
+  justify-content: center;
+  background: var(--outgoing-chat-bg);
+  border-top: 1px solid var(--incoming-chat-border);
+  z-index: 1000;
+}
+.typing-content {
+  display: flex;
+  max-width: 950px;
+  width: 100%;
+  align-items: flex-end;
+  margin-bottom: 10px;
+}
+.typing-textarea {
+  width: 100%;
+  display: flex;
+  position: relative;
+}
+.typing-textarea textarea {
+  resize: none;
+  height: 55px;
+  width: 100%;
+  border: none;
+  padding: 15px 45px 15px 20px;
+  color: var(--text-color);
+  font-size: 1rem;
+  border-radius: 4px;
+  max-height: 250px;
+  overflow-y: auto;
+  background: var(--incoming-chat-bg);
+  outline: 1px solid var(--incoming-chat-border);
+}
+.typing-textarea textarea::placeholder {
+  color: var(--placeholder-color);
+}
+.typing-textarea span {
+  position: absolute;
+  right: 10px;
+  bottom: 10px;
+  font-size: 1.5rem;
+  cursor: pointer;
+}
+.typing-controls {
+  display: flex;
+  justify-content: center;
+}
+.typing-controls span {
+  margin-left: 7px;
+  font-size: 1.4rem;
+  background: var(--incoming-chat-bg);
+  outline: 1px solid var(--incoming-chat-border);
+  padding: 10px;
+  border-radius: 4px;
+}
+.typing-controls span:hover {
+  background: var(--icon-hover-bg);
+}
+/* Reponsive Media Query */
+@media screen and (max-width: 600px) {
+  .default-text h1 {
+    font-size: 2.3rem;
+  }
+  :where(.default-text p, textarea, .chat p) {
+    font-size: 0.95rem!important;
+  }
+  .chat-container .chat {
+    padding: 20px 10px;
+  }
+  .chat-container .chat img {
+    height: 32px;
+    width: 32px;
+  }
+  .chat-container .chat p {
+    padding: 0 20px;
+  }
+  .chat .chat-content span {
+    visibility: visible; /* Ensure icons are always visible on smaller screens */
+  }
+  .typing-container {
+    padding: 15px 10px;
+  }
+  .typing-container .typing-content {
+    max-width: 100%;
+  }
+  .typing-controls span {
+    margin-left: 5px;
+    font-size: 1.2rem;
+  }
+  .typing-textarea textarea {
+    padding: 14px 45px 14px 15px;
+    font-size: 0.95rem;
+  }
+}
+.chat .icon-container {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 10px;
+}
+.top-bar img {
+  width: 50px; /* Sets the width of the image */
+  height: 50px; /* Sets the height of the image */
+  border-radius: 30%; /* Makes the image circular */
+  margin-right: 10px; /* Adds some space between the image and the text */
+  text-align: left;
+}
+.top-bar span {
+  font-size: 16px; /* Sets the font size */
+  text-align: center;
+  line-height: 1.5; /* Sets the line height */
+}
+  </style>
+</head>
+<body>
+  <div class="top-bar">
+    <img src="img/chatbot.jpg">
+    <span>Hello there! How can I help you today.</span>
+  </div>
+  <div class="chat-container">
+    <div class="default-text">
+      <h1>Welcome</h1>
+      <p>Start a conversation with the AI assistant.</p>
+    </div>
+  </div>
+  <div class="typing-container">
+    <div class="typing-content">
+      <div class="typing-textarea">
+        <textarea spellcheck="false" placeholder="Type your message.."></textarea>
+        <span class="material-symbols-rounded">send</span>
+      </div>
+    </div>
+    <div class="typing-controls">
+      <span id="theme-toggle-btn" class="material-symbols-rounded">light_mode</span>
+      <span id="delete-btn" class="material-symbols-rounded">delete</span>
+      <span id="download-btn" class="material-symbols-rounded">download</span>
+    </div>
+  </div>
+  <script>
+    document.addEventListener("DOMContentLoaded", () => {
+  const textarea = document.querySelector("textarea"),
+        chatContainer = document.querySelector(".chat-container"),
+        sendChatBtn = document.querySelector(".typing-textarea .material-symbols-rounded"),
+        deleteBtn = document.getElementById("delete-btn"),
+        downloadBtn = document.getElementById("download-btn"),
+        toggleIcon = document.getElementById("theme-toggle-btn"),
+        defaultText = document.querySelector(".default-text");
+  let userMessage = null;
+  if (!textarea || !chatContainer || !sendChatBtn || !deleteBtn || !downloadBtn || !toggleIcon || !defaultText) {
+    console.error("One or more elements are not found in the DOM.");
+    return;
+  }
+  toggleIcon.onclick = () => {
+    document.body.classList.toggle("light-mode");
+    toggleIcon.innerText = document.body.classList.contains("light-mode") ? "dark_mode" : "light_mode";
+  };
+  const createTypingAnimation = () => {
+    const html = `
+      <div class="chat-content" style="display: flex; flex-direction: column;">
+        <div class="chat-details" style="flex-grow: 1;">
+          <img src="img/chatbot.jpg" alt="">
+          <div class="typing-animation">
+            <div class="typing-dot" style="--delay: 0s"></div>
+            <div class="typing-dot" style="--delay: 0.15s"></div>
+            <div class="typing-dot" style="--delay: 0.3s"></div>
+          </div>
+        </div>
+      </div>`;
+    const incomingChat = document.createElement("div");
+    incomingChat.classList.add("chat", "incoming");
+    incomingChat.innerHTML = html;
+    return incomingChat;
+  };
+  const generateResponse = (chatElement) => {
+    const API_URL = "/generate/";
+    const requestOptions = {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/x-www-form-urlencoded"
+      },
+      body: new URLSearchParams({
+        prompt: userMessage,
+        history: "[]",
+        temperature: "0.9",
+        max_new_tokens: "512",
+        top_p: "0.95",
+        repetition_penalty: "1.0"
+      })
+    };
+    fetch(API_URL, requestOptions).then(res => res.json()).then(data => {
+      chatElement.querySelector(".typing-animation").remove();
+      const pElement = document.createElement("p");
+      pElement.textContent = data.response;
+      chatElement.querySelector(".chat-details").appendChild(pElement);
+      // Add regenerate and copy icons container
+      const iconContainer = document.createElement("div");
+      iconContainer.style.display = "flex";
+      iconContainer.style.justifyContent = "flex-end";
+      iconContainer.style.marginTop = "10px";
+      // Add regenerate icon
+      const regenerateIcon = document.createElement("span");
+      regenerateIcon.classList.add("material-symbols-rounded");
+      regenerateIcon.textContent = "refresh";
+      regenerateIcon.style.marginLeft = "10px";
+      regenerateIcon.addEventListener("click", () => regenerateResponse(chatElement, userMessage));
+      iconContainer.appendChild(regenerateIcon);
+      // Add copy icon
+      const copyIcon = document.createElement("span");
+      copyIcon.classList.add("material-symbols-rounded");
+      copyIcon.textContent = "content_copy";
+      copyIcon.style.marginLeft = "10px";
+      copyIcon.addEventListener("click", () => copyMessage(pElement));
+      iconContainer.appendChild(copyIcon);
+      // Append the iconContainer to the chat-details div
+      chatElement.querySelector(".chat-content").appendChild(iconContainer);
+    }).catch(() => {
+      chatElement.querySelector(".typing-animation").remove();
+      const pElement = document.createElement("p");
+      pElement.classList.add("error");
+      pElement.textContent = "Oops! Something went wrong. Please try again.";
+      chatElement.querySelector(".chat-details").appendChild(pElement);
+    }).finally(() => chatContainer.scrollTo(0, chatContainer.scrollHeight));
+  };
+  const regenerateResponse = (chatElement, message) => {
+    const typingAnimation = createTypingAnimation();
+    chatElement.replaceWith(typingAnimation);
+    generateResponse(typingAnimation);
+  };
+  const copyMessage = (element) => {
+    const originalText = element.textContent; // Store the original text
+    navigator.clipboard.writeText(element.innerText).then(() => {
+      element.textContent = "Copied";
+      setTimeout(() => {
+        element.textContent = originalText; // Restore the original text after a delay
+      }, 1000); // Adjust the delay as needed
+    });
+  };
+const createChatElement = (message, className) => {
+  const chatElement = document.createElement("div");
+  chatElement.classList.add("chat", className);
+  const html = `
+    <div class="chat-content" style="display: flex; flex-direction: column;">
+      <div class="chat-details" style="flex-grow: 1;">
+        <img src="${className === "outgoing" ? "img/user.jpg" : "img/chatbot.jpg"}" alt="">
+        <p></p>
+      </div>
+      <div style="display: flex; justify-content: flex-end; margin-top: 10px;">
+        <span class="material-symbols-rounded">content_copy</span>
+        ${className === "outgoing" ? '<span class="material-symbols-rounded" style="margin-left: 10px;">edit</span>' : ''}
+      </div>
+    </div>`;
+  chatElement.innerHTML = html;
+  const pElement = chatElement.querySelector("p");
+  pElement.textContent = message; // Use textContent to prevent HTML/JavaScript execution
+  if (className === "outgoing") {
+    const editIcon = chatElement.querySelector(".material-symbols-rounded:nth-child(2)");
+    editIcon.addEventListener("click", () => {
+      textarea.value = message;
+      chatElement.remove();
+      textarea.focus();
+    });
+  }
+  const copyIcon = chatElement.querySelector(".material-symbols-rounded:nth-child(1)");
+  copyIcon.addEventListener("click", () => copyMessage(pElement));
+  return chatElement;
+};
+  const handleChat = () => {
+    userMessage = textarea.value.trim();
+    if (!userMessage) return;
+    textarea.value = "";
+    textarea.style.height = "55px"; // Reset the height of the textarea
+    if (defaultText.style.display !== "none") {
+      defaultText.style.display = "none";
+    }
+    chatContainer.appendChild(createChatElement(userMessage, "outgoing"));
+    chatContainer.scrollTo(0, chatContainer.scrollHeight);
+    const incomingChat = createTypingAnimation();
+    chatContainer.appendChild(incomingChat);
+    chatContainer.scrollTo(0, chatContainer.scrollHeight);
+    generateResponse(incomingChat);
+  };
+  textarea.addEventListener("input", () => {
+    textarea.style.height = "auto";
+    textarea.style.height = `${textarea.scrollHeight}px`;
+  });
+  textarea.addEventListener("keydown", (e) => {
+    if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault();
+      handleChat();
+    }
+  });
+  sendChatBtn.addEventListener("click", handleChat);
+  // Add event listener for delete button to clear chat
+  deleteBtn.addEventListener("click", () => {
+    chatContainer.innerHTML = "";
+    defaultText.style.display = "block";
+  });
+  // Add event listener for download button to download chat
+  downloadBtn.addEventListener("click", () => {
+    let chatText = "";
+    const chats = chatContainer.querySelectorAll(".chat p");
+    chats.forEach((chat) => {
+      chatText += chat.textContent + "\n";
+    });
+    const blob = new Blob([chatText], { type: "text/plain" });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = "chat.txt";
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    URL.revokeObjectURL(url);
+  });
+});
+  </script>
+</body>
+</html>