Spaces:

Ashrafb
/

Ll3doke

Paused

App Files Files Community

Ashrafb commited on Jun 21, 2024

Commit

b3066fe

verified ·

1 Parent(s): b2eb53f

Delete static/static_index (64).html

Browse files

Files changed (1) hide show

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

static/static_index (64).html DELETED Viewed

@@ -1,532 +0,0 @@
-<!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>