Spaces:
Sleeping
Sleeping
File size: 5,254 Bytes
b131933 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 |
<!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>
--> |