Spaces:

InkeyDevelopment
/

Exelsys_Assistant_POC

Sleeping

App Files Files Community

InkeyDevelopment commited on Feb 10

Commit

bc2650b

verified ·

1 Parent(s): b131ac9

Update templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +241 -2

templates/index.html CHANGED Viewed

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
@@ -164,6 +164,245 @@
           fetchAnswer(); // Trigger the fetch function
         }
       });
-    </script>
   </body>
 </html>

+<!-- <!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
           fetchAnswer(); // Trigger the fetch function
         }
       });
+    </script>
+  </body>
+</html> -->
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>PDF Q&A Chatbot</title>
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
+    />
+    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+    <style>
+      /* Full-Screen Styling */
+      html,
+      body {
+        height: 100%;
+        margin: 0;
+        padding: 0;
+        font-family: "Arial", sans-serif;
+        background-image: url("https://source.unsplash.com/1920x1080/?technology,abstract"); /* Change Background */
+        background-size: cover;
+        background-position: center;
+      }
+      .chat-container {
+        display: flex;
+        flex-direction: column;
+        height: 100vh;
+        justify-content: center;
+        align-items: center;
+      }
+      .chat-box {
+        width: 80%;
+        max-width: 800px;
+        height: 70vh;
+        overflow-y: auto;
+        background: rgba(255, 255, 255, 0.9);
+        border-radius: 10px;
+        padding: 20px;
+        box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
+      }
+      .chat-header {
+        text-align: center;
+        font-size: 22px;
+        font-weight: bold;
+        color: #007bff;
+        padding-bottom: 10px;
+        border-bottom: 2px solid #007bff;
+        margin-bottom: 10px;
+      }
+      .message-container {
+        display: flex;
+        flex-direction: column;
+      }
+      .user-message,
+      .bot-message {
+        margin: 10px 0;
+        padding: 12px;
+        border-radius: 10px;
+        max-width: 80%;
+      }
+      .user-message {
+        background-color: #007bff;
+        color: white;
+        align-self: flex-end;
+        text-align: right;
+      }
+      .bot-message {
+        background-color: #f1f1f1;
+        align-self: flex-start;
+        text-align: left;
+      }
+      /* Container for images */
+      .image-container {
+        display: flex;
+        gap: 10px;
+        flex-wrap: wrap;
+        margin-top: 10px;
+      }
+      /* Thumbnails (Fixed Size) */
+      .img-thumbnail {
+        width: 100px; /* Adjust thumbnail size */
+        height: 100px; /* Ensure uniform size */
+        object-fit: cover;
+        cursor: pointer;
+        border-radius: 5px;
+        transition: transform 0.2s;
+      }
+      /* Add hover effect */
+      .img-thumbnail:hover {
+        transform: scale(1.1);
+      }
+      .inline-image {
+        max-width: 100%;
+        height: auto;
+        display: block;
+        margin: 10px 0;
+        cursor: pointer;
+      }
+      /* Fullscreen Image Popup */
+      .popup-overlay {
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background: rgba(0, 0, 0, 0.8);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        z-index: 9999;
+      }
+      .popup-content {
+        position: relative;
+        max-width: 80%;
+        max-height: 80%;
+      }
+      .popup-image {
+        width: 100%;
+        height: auto;
+        border-radius: 5px;
+      }
+      .close-btn {
+        position: absolute;
+        top: 10px;
+        right: 10px;
+        font-size: 20px;
+        color: rgb(0, 0, 0);
+        cursor: pointer;
+      }
+      .input-group {
+        position: fixed;
+        bottom: 20px;
+        width: 80%;
+        max-width: 800px;
+      }
+      .form-control {
+        height: 50px;
+        font-size: 16px;
+      }
+      .btn {
+        height: 50px;
+        font-size: 16px;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="chat-container">
+      <div class="chat-box" id="chat-box">
+        <div class="chat-header">📜 PDF Q&A Chatbot</div>
+        <div class="message-container"></div>
+      </div>
+      <!-- Image Popup Modal -->
+      <div id="image-popup">
+        <img id="popup-img" />
+      </div>
+      <div class="input-group">
+        <input
+          type="text"
+          id="query"
+          class="form-control"
+          placeholder="Ask a question..."
+        />
+        <button class="btn btn-primary" onclick="fetchAnswer()">Ask</button>
+      </div>
+    </div>
+    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
+    <script>
+      function fetchAnswer() {
+        let query = $("#query").val();
+        if (!query) return;
+        let userMessage = `<div class="user-message">👤 ${query}</div>`;
+        $("#chat-box .message-container").append(userMessage);
+        $("#query").val("");
+        $.ajax({
+          url: "/query",
+          type: "POST",
+          contentType: "application/json",
+          data: JSON.stringify({ query: query }),
+          success: function (response) {
+            let messageContainer = $("#chat-box .message-container");
+            // Convert Markdown to HTML using marked.js
+            let botMessage = `<div class="bot-message">🤖 ${marked.parse(
+              response.text
+            )}</div>`;
+            messageContainer.append(botMessage).html();
+            // Scroll to bottom
+            $("#chat-box").scrollTop($("#chat-box")[0].scrollHeight);
+          },
+        });
+      }
+      // Allow user to submit query using "Enter" key
+      $("#query").keypress(function (event) {
+        if (event.which === 13) {
+          // Enter key code
+          event.preventDefault();
+          fetchAnswer();
+        }
+      });
+      // Function to expand image in a popup
+      function expandImage(img) {
+        let popup = document.createElement("div");
+        popup.classList.add("popup-overlay");
+        popup.innerHTML = `<div class="popup-content">
+                      <img src="${img.src}" class="popup-image">
+                      <span class="close-btn" onclick="this.parentElement.parentElement.remove()">✖</span>
+                    </div>`;
+        document.body.appendChild(popup);
+      }
+    </script>
   </body>
 </html>