update

Dockerfile

@@ -9,6 +9,13 @@ COPY ./requirements.txt /code/requirements.txt
 
 RUN pip install --no-cache-dir --upgrade -r /code/requirements.txt
 
+# # Install Node.js and npm
+# RUN curl -sL https://deb.nodesource.com/setup_14.x | bash - \
+#     && apt-get install -y nodejs
+
+# # Now you can use npm to install packages
+# RUN npm install -g marked
+
 # download model from transformer
 
 COPY . .

static/index.html

@@ -4,6 +4,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="stylesheet" href="/static/style.css">
+    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
     <script src="/static/script.js" defer></script>
     <title>ASK-ANRG</title>
 </head>
@@ -19,7 +20,14 @@
         <button id="send-btn">Send</button>
     </div>
     <div class="demo">
+        <div>
+            <h3>Project Description</h3>
+            <p>Objective: Create an AI Chatbot for research labs equipped to answer inquiries about lab history, members, research papers, projects, and more.</p>
+            <p>Motivation: Research lab websites (like anrg.usc.edu) are frequented by academics, recruiters, collaborators, students, and others seeking information about a lab, its members, and its research. We demonstrate some demo questions below.</p>
+            <p>With the recent advancements in Large Language Models (LLMs), such as ChatGPT, we can develop a bot that provides immediate, direct answers to these and other questions. This initiative will enhance user experience and efficiency, allowing easier access to the lab's information.</p>
+        </div>
         <h3>Demo Questions</h3>
+        <p>First enter your own api-key and then ask question through user input or click on one of the demo questions</p>
         <button class="question_btn">Give me a pub of J coleman</button>
         <button class="question_btn">What is the position of J coleman (deprecated)</button>
         <button class="question_btn">Give me a pub on neural network</button>

static/script.js

@@ -3,6 +3,22 @@ const userInput = document.getElementById('user-input');
 const apiKeyInput = document.getElementById('api-key-input');
 const chatBox = document.getElementById('chat-box');
 
+
+function showTypingIndicator() {
+    const typingIndicatorDiv = document.createElement('div');
+    typingIndicatorDiv.className = 'bot-message typing-indicator';
+    typingIndicatorDiv.innerHTML = '<span>Typing...</span>';
+    chatBox.appendChild(typingIndicatorDiv);
+    scrollToBottom();
+}
+
+function removeTypingIndicator() {
+    const typingIndicatorDiv = chatBox.querySelector('.typing-indicator');
+    if (typingIndicatorDiv) {
+        chatBox.removeChild(typingIndicatorDiv);
+    }
+}
+
 const questionButtons = document.querySelectorAll('.question_btn');
 questionButtons.forEach(btn => {
     console.log(btn)
@@ -29,6 +45,8 @@ sendBtn.addEventListener('click', () => {
         chatBox.appendChild(userMessageDiv);
         scrollToBottom();
 
+        showTypingIndicator();
+
         // Call FastAPI backend to get response
         console.log("type: ", typeof message, typeof apiKey)
         fetch('/chat/', {
@@ -49,14 +67,19 @@ sendBtn.addEventListener('click', () => {
         .then(data => {
             console.log("data: ", data)
             console.log("reply: ", data.response)
+            // Convert Markdown response to HTML
+            removeTypingIndicator();
+            const botMessageHTML = marked.parse(data.response);
             // Display chatbot's response
             const botMessageDiv = document.createElement('div');
             botMessageDiv.className = 'bot-message';
-            botMessageDiv.innerText = data.response;
+            botMessageDiv.innerHTML = botMessageHTML;
             chatBox.appendChild(botMessageDiv);
+            console.log("botMessageDiv", botMessageDiv)
             scrollToBottom();
         })
         .catch(error => {
+            removeTypingIndicator();
             console.log('There was a problem with the fetch operation:', error.message);
         });
 

static/style.css

@@ -1,7 +1,7 @@
 body {
     font-family: Arial, sans-serif;
     background-color: #f4f4f4;
-    margin: 0;
+    margin: 0px;
     padding: 0;
     display: flex;
     justify-content: center;
@@ -26,6 +26,7 @@ body {
 }
 
 .demo {
+    margin: 50px auto;
     /* display: flex;
     justify-content: flex-end;
     align-items: center; */
@@ -91,4 +92,27 @@ label {
     display: block;
     margin-bottom: 8px;
     font-weight: bold;
-}
+}
+
+/* Add these styles to your style.css */
+.chat-box {
+    position: relative; /* Needed for absolute positioning context */
+    /* ... other styles ... */
+}
+
+.typing-indicator {
+    width: 50px;
+    position: absolute; /* Position the indicator absolutely */
+    bottom: 0; /* Align to the bottom */
+    left: 0; /* Align to the left */
+    padding: 5px 10px; /* Some padding around the text */
+    background-color: #f0f0f0; /* Light gray background */
+    border-radius: 10px;
+    margin: 10px; /* Add some space from the bottom left corner */
+    color: #757575; /* Gray color for the text */
+    font-size: 0.8em; /* Smaller font size */
+}
+
+.typing-indicator span {
+    /* You can add styles for the span if needed */
+}