Spaces:

srinuksv
/

fastapi

Running

App Files Files Community

srinuksv commited on 5 days ago

Commit

59eea30

•

1 Parent(s): 039a3ce

Update static/index.html

Browse files

Files changed (1) hide show

static/index.html +77 -30

static/index.html CHANGED Viewed

@@ -3,66 +3,111 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <style>
         #chat-container {
             max-width: 600px;
             margin: auto;
             padding: 20px;
-            border: 1px solid #ccc;
-            border-radius: 5px;
             background-color: #f9f9f9;
         }
         #chat-history {
             height: 400px;
             overflow-y: auto;
             margin-bottom: 10px;
             border: 1px solid #ddd;
-            padding: 10px;
             background: white;
         }
         #user-input {
-            width: calc(100% - 90px);
         }
-        button {
-            padding: 10px;
         }
     </style>
     <title>Chat Interface</title>
 </head>
 <body>
-    <div id="chat-container">
-        <div id="chat-history"></div>
-        <input type="text" id="user-input" placeholder="Type your message..." aria-label="Message input">
-        <button id="send-button" aria-label="Send message">Send</button>
     </div>
     <script>
         document.getElementById("send-button").addEventListener("click", sendMessage);
         document.getElementById("user-input").addEventListener("keypress", function(event) {
             if (event.key === "Enter") {
-                event.preventDefault(); // Prevent form submission
                 sendMessage();
             }
         });
         async function sendMessage() {
             const input = document.getElementById("user-input");
             const message = input.value.trim();
             if (message === "") {
-                return; // Do not send empty messages
             }
-            // Add user message to chat history
-            addMessage("User", message);
-            // Clear input field
             input.value = "";
             try {
-                // Send message to the backend
                 const response = await fetch("/chat/", {
                     method: "POST",
                     headers: {
@@ -70,25 +115,27 @@
                     },
                     body: JSON.stringify({ message })
                 });
                 if (!response.ok) {
                     throw new Error(`HTTP error! Status: ${response.status}`);
                 }
                 const data = await response.json();
-                addMessage("Bot", data.response);
             } catch (error) {
                 console.error('Error:', error);
-                addMessage("Bot", "Sorry, something went wrong.");
             }
         }
-        function addMessage(sender, message) {
             const chatHistory = document.getElementById("chat-history");
             const messageElement = document.createElement("div");
             messageElement.innerHTML = `<strong>${sender}:</strong> ${message}`;
             chatHistory.appendChild(messageElement);
-            chatHistory.scrollTop = chatHistory.scrollHeight; // Scroll to the bottom
         }
     </script>
 </body>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
     <style>
+        body {
+            font-family: Arial, sans-serif;
+            background-color: #eef1f5;
+            margin: 0;
+            padding: 20px;
+        }
         #chat-container {
             max-width: 600px;
             margin: auto;
             padding: 20px;
+            border-radius: 10px;
             background-color: #f9f9f9;
+            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
         }
         #chat-history {
             height: 400px;
             overflow-y: auto;
             margin-bottom: 10px;
             border: 1px solid #ddd;
             background: white;
+            border-radius: 10px;
+            padding: 10px;
+        }
+        .message {
+            margin: 5px 0;
+            padding: 10px;
+            border-radius: 10px;
+            position: relative;
+            max-width: 80%;
+        }
+        .user-message {
+            background-color: #d1ecf1;
+            border: 1px solid #bee5eb;
+            color: #0c5460;
+            margin-left: auto;
+        }
+        .bot-message {
+            background-color: #f8d7da;
+            border: 1px solid #f5c6cb;
+            color: #721c24;
+            margin-right: auto;
+        }
+        #loading {
+            display: none;
+            margin: 10px 0;
+            text-align: center;
         }
         #user-input {
+            border: 1px solid #ccc;
         }
+        #user-input:focus {
+            border-color: #007bff;
+            outline: none;
+        }
+        .btn-send {
+            background-color: #007bff;
+            color: white;
+        }
+        .btn-send:hover {
+            background-color: #0056b3;
+            transform: scale(1.05);
+        }
+        .btn-send:active {
+            transform: scale(0.95);
         }
     </style>
     <title>Chat Interface</title>
 </head>
 <body>
+    <div id="chat-container" class="rounded p-4 shadow">
+        <div id="chat-history" class="mb-3"></div>
+        <div id="loading" class="spinner-border text-primary" role="status">
+            <span class="sr-only">Loading...</span>
+        </div>
+        <div class="input-group">
+            <input type="text" id="user-input" class="form-control" placeholder="Type your message..." aria-label="Message input">
+            <div class="input-group-append">
+                <button id="send-button" class="btn btn-send" aria-label="Send message">Send</button>
+            </div>
+        </div>
     </div>
     <script>
         document.getElementById("send-button").addEventListener("click", sendMessage);
         document.getElementById("user-input").addEventListener("keypress", function(event) {
             if (event.key === "Enter") {
+                event.preventDefault();
                 sendMessage();
             }
         });
         async function sendMessage() {
             const input = document.getElementById("user-input");
             const message = input.value.trim();
             if (message === "") {
+                return;
             }
+            addMessage("User", message, "user-message");
             input.value = "";
+            // Show loading spinner
+            document.getElementById("loading").style.display = "block";
             try {
                 const response = await fetch("/chat/", {
                     method: "POST",
                     headers: {
                     },
                     body: JSON.stringify({ message })
                 });
                 if (!response.ok) {
                     throw new Error(`HTTP error! Status: ${response.status}`);
                 }
                 const data = await response.json();
+                addMessage("Bot", data.response, "bot-message");
             } catch (error) {
                 console.error('Error:', error);
+                addMessage("Bot", "Sorry, something went wrong.", "bot-message");
+            } finally {
+                // Hide loading spinner
+                document.getElementById("loading").style.display = "none";
             }
         }
+        function addMessage(sender, message, className) {
             const chatHistory = document.getElementById("chat-history");
             const messageElement = document.createElement("div");
+            messageElement.className = `message ${className}`;
             messageElement.innerHTML = `<strong>${sender}:</strong> ${message}`;
             chatHistory.appendChild(messageElement);
+            chatHistory.scrollTop = chatHistory.scrollHeight;
         }
     </script>
 </body>