Update static/index.html

static/index.html

@@ -302,155 +302,167 @@
     </div>
   </div>
   <script>
-    const textarea = document.querySelector("textarea"),
-          chatContainer = document.querySelector(".chat-container"),
-          sendChatBtn = document.querySelector("span.material-symbols-rounded"),
-          toggleIcon = document.querySelector(".typing-controls span"),
-          defaultText = document.querySelector(".default-text");
+    document.addEventListener("DOMContentLoaded", () => {
+      const textarea = document.querySelector("textarea"),
+            chatContainer = document.querySelector(".chat-container"),
+            sendChatBtn = document.querySelector("span.material-symbols-rounded"),
+            toggleIcon = document.querySelector(".typing-controls span"),
+            defaultText = document.querySelector(".default-text");
 
-    let userMessage = null;
+      let userMessage = null;
 
-    toggleIcon.onclick = () => {
-      document.body.classList.toggle("light-mode");
-    };
+      if (toggleIcon) {
+        toggleIcon.onclick = () => {
+          document.body.classList.toggle("light-mode");
+        };
+      }
 
-    const createTypingAnimation = () => {
-      const html = `
-        <div class="chat-content">
-          <div class="chat-details">
-            <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>
+      const createTypingAnimation = () => {
+        const html = `
+          <div class="chat-content">
+            <div class="chat-details">
+              <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>
-        </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"
-        })
+          </div>`;
+        const incomingChat = document.createElement("div");
+        incomingChat.classList.add("chat", "incoming");
+        incomingChat.innerHTML = html;
+        return incomingChat;
       };
 
-      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);
+      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"
+          })
+        };
 
-        // Add regenerate icon
-        const regenerateIcon = document.createElement("span");
-        regenerateIcon.classList.add("material-symbols-rounded");
-        regenerateIcon.textContent = "refresh";
-        regenerateIcon.addEventListener("click", () => regenerateResponse(chatElement, userMessage));
-        chatElement.querySelector(".icon-container").appendChild(regenerateIcon);
+        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);
 
-      }).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));
-    };
+          // Add regenerate icon
+          const regenerateIcon = document.createElement("span");
+          regenerateIcon.classList.add("material-symbols-rounded");
+          regenerateIcon.textContent = "refresh";
+          regenerateIcon.addEventListener("click", () => regenerateResponse(chatElement, userMessage));
+          chatElement.querySelector(".icon-container").appendChild(regenerateIcon);
 
-    const regenerateResponse = (chatElement, message) => {
-      const typingAnimation = createTypingAnimation();
-      chatElement.replaceWith(typingAnimation);
-      generateResponse(typingAnimation);
-    };
+        }).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 copyMessage = (element) => {
-      navigator.clipboard.writeText(element.innerText).then(() => {
-        element.textContent = "Copied";
-        setTimeout(() => {
-          element.textContent = "content_copy";
-        }, 1000);
-      });
-    };
+      const regenerateResponse = (chatElement, message) => {
+        const typingAnimation = createTypingAnimation();
+        chatElement.replaceWith(typingAnimation);
+        generateResponse(typingAnimation);
+      };
 
-    const createChatElement = (message, className) => {
-      const chatElement = document.createElement("div");
-      chatElement.classList.add("chat", className);
+      const copyMessage = (element) => {
+        navigator.clipboard.writeText(element.innerText).then(() => {
+          element.textContent = "Copied";
+          setTimeout(() => {
+            element.textContent = "content_copy";
+          }, 1000);
+        });
+      };
 
-      const html = `
-        <div class="chat-content">
-          <div class="chat-details">
-            <img src="${className === "outgoing" ? "img/user.jpg" : "img/chatbot.jpg"}" alt="">
-            <p>${message}</p>
-          </div>
-          <div class="icon-container">
-            <span class="material-symbols-rounded">content_copy</span>
-            ${className === "outgoing" ? '<span class="material-symbols-rounded">edit</span>' : ''}
-          </div>
-        </div>`;
-      chatElement.innerHTML = html;
+      const createChatElement = (message, className) => {
+        const chatElement = document.createElement("div");
+        chatElement.classList.add("chat", className);
 
-      if (className === "outgoing") {
-        const editIcon = chatElement.querySelector(".material-symbols-rounded:nth-child(3)");
-        editIcon.addEventListener("click", () => {
-          textarea.value = message;
-          chatElement.remove();
-          textarea.focus();
-        });
-      }
+        const html = `
+          <div class="chat-content">
+            <div class="chat-details">
+              <img src="${className === "outgoing" ? "img/user.jpg" : "img/chatbot.jpg"}" alt="">
+              <p>${message}</p>
+            </div>
+            <div class="icon-container">
+              <span class="material-symbols-rounded">content_copy</span>
+              ${className === "outgoing" ? '<span class="material-symbols-rounded">edit</span>' : ''}
+            </div>
+          </div>`;
+        chatElement.innerHTML = html;
 
-      const copyIcon = chatElement.querySelector(".material-symbols-rounded:nth-child(2)");
-      copyIcon.addEventListener("click", () => copyMessage(copyIcon));
+        if (className === "outgoing") {
+          const editIcon = chatElement.querySelector(".material-symbols-rounded:nth-child(3)");
+          if (editIcon) {
+            editIcon.addEventListener("click", () => {
+              textarea.value = message;
+              chatElement.remove();
+              textarea.focus();
+            });
+          }
+        }
 
-      return chatElement;
-    };
+        const copyIcon = chatElement.querySelector(".material-symbols-rounded:nth-child(2)");
+        if (copyIcon) {
+          copyIcon.addEventListener("click", () => copyMessage(copyIcon));
+        }
 
-    const handleChat = () => {
-      userMessage = textarea.value.trim();
-      if (!userMessage) return;
+        return chatElement;
+      };
 
-      textarea.value = "";
-      textarea.style.height = `${textarea.scrollHeight}px`;
+      const handleChat = () => {
+        userMessage = textarea.value.trim();
+        if (!userMessage) return;
 
-      if (!chatContainer.querySelector(".chat")) defaultText.style.display = "none";
+        textarea.value = "";
+        textarea.style.height = `${textarea.scrollHeight}px`;
 
-      chatContainer.appendChild(createChatElement(userMessage, "outgoing"));
-      chatContainer.scrollTo(0, chatContainer.scrollHeight);
+        if (!chatContainer.querySelector(".chat")) defaultText.style.display = "none";
 
-      const incomingChat = createTypingAnimation();
-      chatContainer.appendChild(incomingChat);
-      chatContainer.scrollTo(0, chatContainer.scrollHeight);
+        chatContainer.appendChild(createChatElement(userMessage, "outgoing"));
+        chatContainer.scrollTo(0, chatContainer.scrollHeight);
 
-      generateResponse(incomingChat);
-    };
+        const incomingChat = createTypingAnimation();
+        chatContainer.appendChild(incomingChat);
+        chatContainer.scrollTo(0, chatContainer.scrollHeight);
 
-    textarea.addEventListener("input", () => {
-      textarea.style.height = "auto";
-      textarea.style.height = `${textarea.scrollHeight}px`;
-    });
+        generateResponse(incomingChat);
+      };
+
+      if (textarea) {
+        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();
+        textarea.addEventListener("keydown", (e) => {
+          if (e.key === "Enter" && !e.shiftKey) {
+            e.preventDefault();
+            handleChat();
+          }
+        });
       }
-    });
 
-    sendChatBtn.addEventListener("click", handleChat);
+      if (sendChatBtn) {
+        sendChatBtn.addEventListener("click", handleChat);
+      }
+    });
   </script>
 </body>
 </html>