Spaces:
Sleeping
Sleeping
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Chat Interface</title> | |
| <script> | |
| // Function to handle sending messages and receiving responses | |
| async function sendMessage() { | |
| const inputElement = document.getElementById('messageInput'); | |
| const messagesContainer = document.getElementById('messages'); | |
| const message = inputElement.value.trim(); | |
| // Prevent sending empty messages | |
| if (!message) return; | |
| // Display the user's message | |
| displayMessage(`You: ${message}`, 'user'); | |
| // Assuming the same '/custom-auth' endpoint is used for messages | |
| try { | |
| const response = await fetch('/custom-auth', { | |
| method: 'POST', // Assuming you adjust your backend to accept POST for chat messages | |
| headers: { | |
| 'Content-Type': 'application/json', | |
| }, | |
| body: JSON.stringify({ message }), | |
| }); | |
| const data = await response.json(); | |
| // Display the received response | |
| displayMessage(`Server: ${data.response}`, 'server'); // Adjust 'data.response' based on your actual response structure | |
| } catch (error) { | |
| console.error('Error:', error); | |
| displayMessage('Error sending message.', 'error'); | |
| } | |
| // Clear the input field | |
| inputElement.value = ''; | |
| } | |
| // Function to display messages | |
| function displayMessage(text, className) { | |
| const messageElement = document.createElement('p'); | |
| messageElement.textContent = text; | |
| messageElement.className = className; | |
| document.getElementById('messages').appendChild(messageElement); | |
| } | |
| // Attach event listener to input field for the Enter key | |
| document.addEventListener('DOMContentLoaded', () => { | |
| const inputElement = document.getElementById('messageInput'); | |
| inputElement.addEventListener('keydown', (event) => { | |
| if (event.key === 'Enter') { | |
| sendMessage(); | |
| event.preventDefault(); // Prevent the default action to stop form submission | |
| } | |
| }); | |
| }); | |
| </script> | |
| <style> | |
| .user { color: blue; } | |
| .server { color: green; } | |
| .error { color: red; } | |
| </style> | |
| </head> | |
| <body> | |
| <h1>Chat with Server</h1> | |
| <div id="messages" style="height: 300px; 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"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Fetch API Example</title> | |
| </head> | |
| <body> | |
| <h1>FastAPI Data Fetch Example</h1> | |
| <button id="fetchApi">Fetch API Message</button> | |
| <button id="fetchCustomAuth">Fetch Custom Auth Token</button> | |
| <p id="apiResponse"></p> | |
| <p id="authResponse"></p> | |
| <script> | |
| document.getElementById('fetchApi').onclick = function() { | |
| fetch('/api') | |
| .then(response => response.json()) | |
| .then(data => { | |
| document.getElementById('apiResponse').textContent = 'API Response: ' + data.message; | |
| }) | |
| .catch(error => console.error('Error fetching API data:', error)); | |
| }; | |
| document.getElementById('fetchCustomAuth').onclick = function() { | |
| fetch('/custom-auth') | |
| .then(response => response.json()) | |
| .then(data => { | |
| document.getElementById('authResponse').textContent = 'Custom Auth Token: ' + data.token; | |
| }) | |
| .catch(error => console.error('Error fetching custom auth token:', error)); | |
| }; | |
| </script> | |
| </body> | |
| </html> --> | |
| <!-- ############################################################################################################################# --> | |
| <!-- <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>FastAPI & Chainlit Integration</title> | |
| <script> | |
| // Function to call the custom-auth API and display the token | |
| async function callCustomAuthApi() { | |
| try { | |
| const response = await fetch('/api'); | |
| const data = await response.json(); | |
| document.getElementById('apiResponse').innerText = 'Token: ' + data.token; | |
| } catch (error) { | |
| console.error('Error:', error); | |
| document.getElementById('apiResponse').innerText = 'Failed to fetch token.'; | |
| } | |
| } | |
| </script> | |
| </head> | |
| <body> | |
| <h1>FastAPI & Chainlit Integration</h1> | |
| <button onclick="callCustomAuthApi()">Get Auth Token</button> | |
| <p id="apiResponse"></p> | |
| </body> | |
| </html> | |
| --> |