From 924486bbad8cf2fc89ab9570a3f03364f917bed5 Mon Sep 17 00:00:00 2001
From: yashksaini-coder <ys3853428@gmail.com>
Date: Sun, 20 Oct 2024 02:54:09 +0530
Subject: [PATCH] =?UTF-8?q?fix:=20=F0=9F=90=9B=20Revamp=20UI=20&=20user=20?=
 =?UTF-8?q?interface?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Add loading animation
---
 chatbot.html | 619 +++++++++++++++++++++++----------------------------
 1 file changed, 280 insertions(+), 339 deletions(-)
diff --git a/chatbot.html b/chatbot.html
index 77aa4bd..f280f29 100644
--- a/chatbot.html
+++ b/chatbot.html
@@ -3,134 +3,173 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Bobble Ai-Chat Bot</title>
-    <link
-      href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css"
-      rel="stylesheet"
-    />
-    <link
-      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
-      rel="stylesheet"
-    />
-    <link href="Style.css" rel="stylesheet" />
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
-    <link
-      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/a11y-dark.min.css"
-    />
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/12.0.1/marked.min.js"></script>
-  </head>
-  <body class="bg-gradient-to-r from-blue-400 to-indigo-300 flex items-center justify-center min-h-screen">
-    <div id="Loader"></div>
-    <div
-      class="flex flex-col items-center justify-center w-full max-w-xl space-y-4"
-    >
-      <div class="w-full flex justify-center">
-        <img
-          src="boy.png"
-          alt="Chat Bot"
-          class="h-42 w-42 object-cover rounded-lg shadow-lg"
-        />
-      </div>
-
-      <div class="chat-container w-full bg-white p-6 rounded-lg shadow-xl">
-        <div id="output-field" class="text-center text-lg font-semibold text-gray-700 mb-3">
-          How can I help you today?
-        </div>
-        <div
-          id="output-container"
-          class="mb-3 overflow-auto"
-          style="max-height: 300px"
-        ></div>
-        <div class="input-group mb-3 flex items-center space-x-2">
-          <div id="image-preview-container" class="flex items-center">
-            <span
-              id="image-preview"
-              class="flex items-center space-x-2 hidden"
-              style="display: none"
-            >
-              <img src="" alt="Image preview" class="h-10 mr-2 object-cover rounded-lg" />
-              <button
-                type="button"
-                id="clear-image"
-                class="text-red-600 text-2xl leading-none"
-                aria-label="Close"
-              >
-                &times;
-              </button>
-            </span>
-          </div>
-          <input
-            type="text"
-            id="prompt-input"
-            class="form-control flex-1 p-2 border border-gray-300 rounded-lg"
-            placeholder="Type your prompt here..."
-            aria-label="Message input"
-          />
-          <button
-            class="p-2 bg-gray-100 rounded-lg hover:bg-gray-200 transition"
-            id="inputGroupFileAddon"
-            onclick="document.getElementById('image-input').click();"
-          >
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              width="25"
-              height="25"
-              fill="currentColor"
-              class="bi bi-image"
-              viewBox="0 0 16 16"
-            >
-              <path d="M6.002 5.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0" />
-              <path
-                d="M2.002 1a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V3a2 2 0 0 0-2-2zm12 1a1 1 0 0 1 1 1v6.5l-3.777-1.947a.5.5 0 0 0-.577.093l-3.71 3.71-2.66-1.772a.5.5 0 0 0-.63.062L1.002 12V3a1 1 0 0 1 1-1z"
-              />
-            </svg>
-          </button>
-          <input type="file" id="image-input" accept="image/*" class="hidden" />
-          <button id="generate-btn" class="btn btn-primary">Send</button>
-        </div>
-      </div>
-    </div>
-
+    <title>MediChat - Your Medical Assistant</title>
+    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet" />
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet" />
     <style>
+      body {
+        font-family: 'Arial', sans-serif;
+        background-color: #f0f4f8;
+      }
       .chat-container {
-        width: 100%;
-        max-width: 500px;
-        padding: 20px;
-        background-color: white;
+        max-width: 800px;
+        height: 80vh;
+        background-color: #ffffff;
         border-radius: 12px;
-        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
       }
-
-      body,
-      html {
-        margin: 0;
-        padding: 0;
+      .chat-messages {
+        height: calc(100% - 120px);
+        overflow-y: auto;
+        padding: 20px;
+      }
+      .message {
+        max-width: 80%;
+        margin-bottom: 15px;
+        padding: 10px 15px;
+        border-radius: 18px;
+        line-height: 1.4;
+        font-weight: 500;
       }
       .user-message {
-        text-align: right;
-        background-color: #f0f0f0; 
-        border-radius: 15px 15px 0px 15px;
-        padding: 10px 10px 5px 10px;
-        margin: 10px;
-        max-width: 60%;
-        float: right;
-        clear: both;
-    }
-
-    .ai-message {
-      text-align: left; 
-      background-color: #e0f7fa; 
-      border-radius: 15px 15px 15px 0px; 
-      padding: 10px 10px 5px 10px;
-      margin: 10px;
-      max-width: 60%;
-      float: left; 
-      clear: both;
-    }
+        background-color: #007bff;
+        color: white;
+        align-self: flex-end;
+        border-bottom-right-radius: 0;
+      }
+      .ai-message {
+        background-color: #e9ecef;
+        color: #333;
+        align-self: flex-start;
+        border-bottom-left-radius: 0;
+      }
+      .input-area {
+        border-top: 1px solid #e0e0e0;
+        padding: 10px;
+        background-color: #ffffff;
+      }
+      .input-area form {
+        display: flex;
+        flex-direction: column;
+      }
+      .input-row {
+        display: flex;
+        align-items: center;
+        margin-bottom: 10px;
+      }
+      .input-area input[type="text"] {
+        flex-grow: 1;
+        border: none;
+        outline: none;
+        padding: 10px;
+        border-radius: 20px;
+        background-color: #f0f4f8;
+      }
+      .input-area button {
+        background-color: #007bff;
+        color: white;
+        border: none;
+        border-radius: 50%;
+        width: 40px;
+        height: 40px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+        transition: background-color 0.3s;
+        margin-left: 10px;
+      }
+      .input-area button:hover {
+        background-color: #0056b3;
+      }
+      .loading-dots {
+        display: inline-flex;
+        align-items: center;
+      }
+      .loading-dots div {
+        width: 8px;
+        height: 8px;
+        background-color: #007bff;
+        border-radius: 50%;
+        margin: 0 3px;
+        animation: bounce 0.6s infinite alternate;
+      }
+      .loading-dots div:nth-child(2) {
+        animation-delay: 0.2s;
+      }
+      .loading-dots div:nth-child(3) {
+        animation-delay: 0.4s;
+      }
+      @keyframes bounce {
+        to {
+          transform: translateY(-4px);
+        }
+      }
+      .image-preview {
+        max-width: 40px;
+        max-height: 40px;
+        object-fit: cover;
+        border-radius: 50%;
+        margin-right: 10px;
+      }
+      .file-input-wrapper {
+        position: relative;
+        overflow: hidden;
+        display: inline-block;
+      }
+      .file-input-wrapper input[type=file] {
+        font-size: 100px;
+        position: absolute;
+        left: 0;
+        top: 0;
+        opacity: 0;
+        cursor: pointer;
+      }
+      .file-input-wrapper .btn-file-input {
+        background-color: #28a745;
+        color: white;
+        padding: 8px;
+        border-radius: 50%;
+        cursor: pointer;
+        width: 40px;
+        height: 40px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
     </style>
+  </head>
+  <body class="flex items-center justify-center min-h-screen p-4">
+    <div class="chat-container w-full flex flex-col">
+      <div class="chat-header bg-blue-600 text-white p-4 rounded-t-lg flex items-center">
+        <i class="fas fa-robot text-2xl mr-3"></i>
+        <h1 class="text-xl font-bold">MediChat - Your Medical Assistant</h1>
+      </div>
+      <div id="chat-messages" class="chat-messages flex flex-col">
+        <div class="message ai-message">
+          Hello! I'm MediChat, your virtual medical assistant. How can I help you today? You can also upload an image if you have a visual medical question.
+        </div>
+      </div>
+      <div class="input-area mt-auto" style="margin-bottom: 10px;">
+        <form id="chat-form" class="flex flex-col">
+          <div class="input-row">
+            <div class="file-input-wrapper mr-2">
+              <button class="btn-file-input" type="button">
+                <i class="fas fa-image"></i>
+              </button>
+              <input type="file" id="image-input" accept="image/*">
+            </div>
+            <img id="image-preview" class="image-preview" style="display: none;">
+            <input type="text" id="user-input" class="flex-grow" placeholder="Type your medical question here...">
+            <button type="submit" id="send-btn" aria-label="Send message">
+              <i class="fas fa-paper-plane"></i>
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
 
-  <script type="importmap">
+    <script type="importmap">
       {
         "imports": {
           "@google/generative-ai": "https://esm.run/@google/generative-ai"
@@ -138,254 +177,156 @@
       }
     </script>
 
-  <script type="module">
-    import {
-      GoogleGenerativeAI,
-      HarmBlockThreshold,
-      HarmCategory,
-    } from "@google/generative-ai";
+    <script type="module">
+      import { GoogleGenerativeAI, HarmBlockThreshold, HarmCategory } from "@google/generative-ai";
 
-    const API_KEY = "AIzaSyBF265bY6o63VuPypal-5w0-b7sr0N_O3A"; // Replace with your gemini-api actual API key
-    const genAI = new GoogleGenerativeAI(API_KEY);
-    let chat;
+      const API_KEY = "AIzaSyBF265bY6o63VuPypal-5w0-b7sr0N_O3A"; // Replace with your gemini-api actual API key
+      const genAI = new GoogleGenerativeAI(API_KEY);
+      let chat;
 
-    const safetySettings = [
-      {
-        category: HarmCategory.HARM_CATEGORY_HARASSMENT,
-        threshold: HarmBlockThreshold.BLOCK_ONLY_HIGH,
-      },
-    ];
+      const safetySettings = [
+        {
+          category: HarmCategory.HARM_CATEGORY_HARASSMENT,
+          threshold: HarmBlockThreshold.BLOCK_ONLY_HIGH,
+        },
+        {
+          category: HarmCategory.HARM_CATEGORY_HATE_SPEECH,
+          threshold: HarmBlockThreshold.BLOCK_ONLY_HIGH,
+        },
+        {
+          category: HarmCategory.HARM_CATEGORY_SEXUALLY_EXPLICIT,
+          threshold: HarmBlockThreshold.BLOCK_ONLY_HIGH,
+        },
+        {
+          category: HarmCategory.HARM_CATEGORY_DANGEROUS_CONTENT,
+          threshold: HarmBlockThreshold.BLOCK_ONLY_HIGH,
+        },
+      ];
 
-    async function fileToGenerativePart(file) {
-      return new Promise((resolve) => {
-        const reader = new FileReader();
-        reader.onloadend = () => {
-          const base64Data = reader.result.split(",")[1];
-          resolve({ inlineData: { data: base64Data, mimeType: file.type } });
-        };
-        reader.readAsDataURL(file);
-      });
-    }
+      const zeroShotTemplate = (userPrompt) => {
+        return `As a knowledgeable and compassionate medical AI assistant, I'm here to provide helpful information and support. However, please remember that I'm not a substitute for professional medical advice, diagnosis, or treatment. Always consult with a qualified healthcare provider for personalized medical guidance.
 
-    async function sendMessage(prompt, imageParts = []) {
-      let model;
-      let result;
-      clearGreeting(); // Clear the greeting after sending the message
+        User query: ${userPrompt}
 
-      if (imageParts.length > 0) {
-        model = genAI.getGenerativeModel({
-          model: "gemini-pro-vision",
-          safetySettings,
-        });
-      } else {
-        if (!chat) {
-          chat = await genAI
-            .getGenerativeModel({ model: "gemini-pro", safetySettings })
-            .startChat({
-              history: [],
-              generationConfig: {
-                maxOutputTokens: 4000, // maxOutputTokens Limit around 4096
-              },
-            });
-        }
-        model = chat;
-      }
+        Response:`;
+      };
 
-      try {
-        if (imageParts.length > 0) {
-          result = await model.generateContent([prompt, ...imageParts]);
-        } else {
-          result = await model.sendMessage(prompt);
-        }
+      async function fileToGenerativePart(file) {
+        const base64EncodedDataPromise = new Promise((resolve) => {
+          const reader = new FileReader();
+          reader.onloadend = () => resolve(reader.result.split(',')[1]);
+          reader.readAsDataURL(file);
+        });
 
-        const response = await result.response;
-        if (response) {
-          const text = await response.text();
-          displayMessage(text, "ai");
-        } else {
-          // This block handles a null response, suggesting blocked content
-          displayMessage(
-            "This content is not safe for display based on current settings.",
-            "ai"
-          );
-        }
-      } catch (error) {
-        console.error("Error during message generation:", error);
-        displayMessage(
-          "This content is not safe for display based on current settings. or an internal error.",
-          "ai"
-        );
+        return {
+          inlineData: { data: await base64EncodedDataPromise, mimeType: file.type },
+        };
       }
-      clearInputs();
-    }
-
-    function displayMessage(message, sender) {
-      const outputContainer = document.getElementById("output-container");
-      const msgDiv = document.createElement("div");
-      msgDiv.classList.add(
-        "chat-message",
-        sender === "user" ? "user-message" : "ai-message"
-      );
-
-      if (sender === "ai") {
-        // Show loading animation for AI messages
-        msgDiv.innerHTML =
-          '<div class="loading">' +
-          '<div class="loading-dot"></div>' +
-          '<div class="loading-dot"></div>' +
-          '<div class="loading-dot"></div>' +
-          "</div>";
-        outputContainer.appendChild(msgDiv);
 
-        // Simulate processing delay
-        setTimeout(() => {
-          // Clear loading animation
-          msgDiv.innerHTML = "";
+      async function sendMessage(prompt, imagePart = null) {
+        const formattedPrompt = zeroShotTemplate(prompt);
 
-          if (message.startsWith("```") && message.endsWith("```")) {
-            // Code block handling
-            const codeContent = message.substring(3, message.length - 3);
-            const escapedCode = codeContent
-              .replace(/</g, "&lt;")
-              .replace(/>/g, "&gt;");
-            msgDiv.innerHTML = `<pre><code class="hljs">${escapedCode}</code></pre>`;
-            window.hljs.highlightBlock(msgDiv.querySelector("code"));
+        let model;
+        let result;
 
-            // Add Copy button
-            const copyButton = document.createElement("button");
-            copyButton.innerText = "Copy code";
-            copyButton.onclick = function () {
-              navigator.clipboard.writeText(codeContent).then(
-                () => {
-                  // Change text to show confirmation instead of using alert
-                  copyButton.innerText = "Copied!";
-                  // Optional: revert the button text back to "Copy code" after 2 seconds
-                  setTimeout(() => {
-                    copyButton.innerText = "Copy code";
-                  }, 2000);
+        if (imagePart) {
+          model = genAI.getGenerativeModel({ model: "gemini-pro-vision", safetySettings });
+          result = await model.generateContent([formattedPrompt, imagePart]);
+        } else {
+          if (!chat) {
+            chat = await genAI
+              .getGenerativeModel({ model: "gemini-pro", safetySettings })
+              .startChat({
+                history: [],
+                generationConfig: {
+                  maxOutputTokens: 4000,
                 },
-                (err) => {
-                  console.error("Failed to copy text: ", err);
-                }
-              );
-            };
+              });
+          }
+          model = chat;
+          result = await model.sendMessage(formattedPrompt);
+        }
 
-            msgDiv.appendChild(copyButton);
+        try {
+          const response = await result.response;
+          if (response) {
+            const text = await response.text();
+            displayMessage(text, "ai");
           } else {
-            // For regular messages
-            msgDiv.innerHTML = marked.parse(message);
+            displayMessage("I apologize, but I couldn't retrieve a safe response. Please try rephrasing your question.", "ai");
           }
+        } catch (error) {
+          console.error("Error during message generation:", error);
+          displayMessage("I encountered an issue while processing your request. Please try again later.", "ai");
+        }
+      }
 
-          // Scroll the output container to the bottom to ensure the latest message is visible
-          outputContainer.scrollTop = outputContainer.scrollHeight;
-        }, 1500); // Adjust the delay as needed
-      } else {
-        // User messages are displayed immediately without the loading animation
-        msgDiv.innerHTML =
-          message.startsWith("```") && message.endsWith("```")
-            ? `<pre><code class="hljs">${message.substring(
-              3,
-              message.length - 3
-            )}</code></pre>`
-            : marked.parse(message);
+      function displayMessage(message, sender) {
+        const chatMessages = document.getElementById("chat-messages");
+        const messageDiv = document.createElement("div");
+        messageDiv.classList.add("message", sender === "user" ? "user-message" : "ai-message");
 
-        // If it's a code block, enable syntax highlighting and add a copy button
-        if (message.startsWith("```") && message.endsWith("```")) {
-          const codeBlock = msgDiv.querySelector("pre code");
-          window.hljs.highlightBlock(codeBlock);
-          const copyButton = document.createElement("button");
-          copyButton.innerText = "Copy code";
-          copyButton.onclick = function () {
-            navigator.clipboard.writeText(codeBlock.textContent).then(
-              () => {
-                alert("Code copied to clipboard!");
-              },
-              (err) => {
-                alert("Failed to copy text: ", err);
-              }
-            );
-          };
-          msgDiv.appendChild(copyButton);
+        if (sender === "ai") {
+          const loadingDiv = document.createElement("div");
+          loadingDiv.classList.add("loading-dots");
+          loadingDiv.innerHTML = '<div></div><div></div><div></div>';
+          messageDiv.appendChild(loadingDiv);
+          chatMessages.appendChild(messageDiv);
+
+          setTimeout(() => {
+            messageDiv.innerHTML = message;
+          }, 1500);
+        } else {
+          messageDiv.textContent = message;
+          chatMessages.appendChild(messageDiv);
         }
 
-        outputContainer.appendChild(msgDiv);
+        chatMessages.scrollTop = chatMessages.scrollHeight;
       }
 
-      // Ensure the latest message is visible
-      outputContainer.scrollTop = outputContainer.scrollHeight;
-    }
+      document.getElementById("chat-form").addEventListener("submit", function(e) {
+        e.preventDefault();
+        sendUserMessage();
+      });
 
-    function clearInputs() {
-      document.getElementById("prompt-input").value = "";
-      document.getElementById("image-input").value = "";
-      clearImagePreview();
-    }
+      async function sendUserMessage() {
+        const userInput = document.getElementById("user-input");
+        const imageInput = document.getElementById("image-input");
+        const message = userInput.value.trim();
+        const imageFile = imageInput.files[0];
 
-    document
-      .getElementById("generate-btn")
-      .addEventListener("click", async () => {
-        const prompt = document.getElementById("prompt-input").value;
-        const files = document.getElementById("image-input").files;
-        const imageParts = await Promise.all(
-          [...files].map(fileToGenerativePart)
-        );
-        if (prompt.trim() !== "") {
-          displayMessage(prompt, "user");
-          await sendMessage(prompt, imageParts);
-        }
-      });
+        if (message || imageFile) {
+          let userMessage = message;
+          if (imageFile) {
+            userMessage += " (Image uploaded)";
+          }
+          displayMessage(userMessage, "user");
+
+          let imagePart = null;
+          if (imageFile) {
+            imagePart = await fileToGenerativePart(imageFile);
+          }
+
+          await sendMessage(message, imagePart);
 
-    function clearGreeting() {
-      const outputField = document.getElementById("output-field");
-      if (outputField) {
-        outputField.style.display = "none"; // Hide the field completely
+          userInput.value = "";
+          imageInput.value = "";
+          document.getElementById("image-preview").style.display = "none";
+        }
       }
-    }
 
-    document
-      .getElementById("image-input")
-      .addEventListener("change", function (event) {
-        const [file] = event.target.files;
+      document.getElementById("image-input").addEventListener("change", function(e) {
+        const file = e.target.files[0];
         if (file) {
           const reader = new FileReader();
-          reader.onload = function (e) {
-            const previewContainer = document.getElementById("image-preview");
-            const previewImage =
-              previewContainer.getElementsByTagName("img")[0];
-            previewImage.src = e.target.result;
-            previewContainer.style.display = "flex";
-          };
+          reader.onload = function(e) {
+            const preview = document.getElementById("image-preview");
+            preview.src = e.target.result;
+            preview.style.display = "block";
+          }
           reader.readAsDataURL(file);
         }
       });
-
-    document
-      .getElementById("clear-image")
-      .addEventListener("click", function () {
-        // Clear the preview
-        const previewContainer = document.getElementById("image-preview");
-        const previewImage = previewContainer.getElementsByTagName("img")[0];
-        previewImage.src = "";
-        previewContainer.style.display = "none";
-        // Clear the file input
-        document.getElementById("image-input").value = "";
-      });
-
-    function clearImagePreview() {
-      const previewContainer = document.getElementById("image-preview");
-      if (previewContainer) {
-        const previewImage = previewContainer.getElementsByTagName("img")[0];
-        previewImage.src = "";
-        previewContainer.style.display = "none";
-      }
-    }
-  </script>
-  <script>
-    var loader = document.getElementById("Loader");
-    window.addEventListener("load", function () {
-      loader.style.display = "none";
-    });
-  </script>
-</body>
-
+    </script>
+  </body>
 </html>
\ No newline at end of file
