Spaces:

hamza82
/

test

Sleeping

App Files Files Community

hamza82 commited on Mar 3, 2024

Commit

f431280

verified ·

1 Parent(s): ac5daf9

Update static/index.html

Browse files

Files changed (1) hide show

static/index.html +49 -34

static/index.html CHANGED Viewed

@@ -2,53 +2,68 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
-    <title>Chat with FastAPI</title>
     <script>
-        // Function to handle the sending of the message when the enter key is pressed
-        async function sendMessage(event) {
-            // Check if the enter key was pressed
-            if (event.key === "Enter") {
-                const inputElement = document.getElementById('messageInput');
-                const message = inputElement.value;
-                const messagesContainer = document.getElementById('messages');
-                // Prevent sending empty messages
-                if (!message.trim()) return;
-                // Add the user's message to the messages container
-                const userMessageElement = document.createElement('p');
-                userMessageElement.textContent = `You: ${message}`;
-                messagesContainer.appendChild(userMessageElement);
-                // Clear the input after sending
-                inputElement.value = '';
-                try {
-                    // Assuming /custom-auth will handle the message in some way
-                    const response = await fetch('/custom-auth', {
-                        method: 'GET', // Since it's a GET request, consider how to send data if needed
-                    });
-                    const data = await response.json();
-                    // Display the response - adjust according to the actual response structure
-                    const responseMessageElement = document.createElement('p');
-                    responseMessageElement.textContent = `Server: ${data.token}`; // Assuming the token is the response
-                    messagesContainer.appendChild(responseMessageElement);
-                } catch (error) {
-                    console.error('Error:', error);
-                }
-            }
         }
     </script>
 </head>
-<body>
-    <h1>Chat</h1>
-    <div id="messages" style="margin-bottom: 20px; border: 1px solid #ccc; padding: 10px; height: 300px; overflow-y: auto;"></div>
-    <input type="text" id="messageInput" placeholder="Type your message here and press Enter" onkeydown="sendMessage(event)">
 </body>
 </html>
 <!-- ################################################################################################## -->
 <!-- <!DOCTYPE html>
 <html lang="en">

 <html lang="en">
 <head>
     <meta charset="UTF-8">
+    <title>Chat Simulation</title>
     <script>
+        async function fetchAuthToken() {
+            try {
+                const response = await fetch('/custom-auth');
+                const data = await response.json();
+                document.getElementById('authToken').textContent = `Auth Token: ${data.token}`;
+            } catch (error) {
+                console.error('Error:', error);
+            }
+        }
+        async function sendMessage() {
+            const inputElement = document.getElementById('messageInput');
+            const message = inputElement.value;
+            if (!message.trim()) return; // Ignore empty messages
+            // Display the user's message
+            displayMessage(`You: ${message}`, 'user');
+            // Simulate sending the message and receiving a response
+            // Here, you'd replace this with a call to your actual message processing endpoint
+            // Since the provided code does not specify an endpoint for sending messages, this is a placeholder
+            const simulatedResponse = "This is a simulated response based on your message.";
+            displayMessage(`Server: ${simulatedResponse}`, 'server');
+            // Clear the input field
+            inputElement.value = '';
+        }
+        function displayMessage(text, sender) {
+            const messagesContainer = document.getElementById('messages');
+            const messageElement = document.createElement('p');
+            messageElement.textContent = text;
+            messageElement.className = sender; // Apply different styling based on the sender
+            messagesContainer.appendChild(messageElement);
         }
+        // Event listener for the Enter key in the message input
+        document.addEventListener('DOMContentLoaded', function() {
+            document.getElementById('messageInput').addEventListener('keydown', function(event) {
+                if (event.key === 'Enter') {
+                    sendMessage();
+                }
+            });
+        });
     </script>
+    <style>
+        .user { color: blue; }
+        .server { color: green; }
+    </style>
 </head>
+<body onload="fetchAuthToken()">
+    <h1>Simple Chat Simulation</h1>
+    <div id="authToken"></div>
+    <div id="messages" style="height: 200px; overflow-y: auto; border: 1px solid #ccc; padding: 10px; margin-bottom: 10px;"></div>
+    <input type="text" id="messageInput" placeholder="Type your message here and press Enter">
 </body>
 </html>
 <!-- ################################################################################################## -->
 <!-- <!DOCTYPE html>
 <html lang="en">