70 أسطر
2.6 KiB
HTML
70 أسطر
2.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Ghaymah Chatbot</title>
|
|
<style>
|
|
body { font-family: Arial, sans-serif; margin: 20px; background: #f4f4f9; }
|
|
#chatbox { border: 1px solid #ccc; border-radius: 8px; padding: 10px; height: 400px; overflow-y: auto; background: #fff; }
|
|
.message { margin: 5px 0; padding: 8px 12px; border-radius: 12px; max-width: 70%; }
|
|
.user { background: #d1e7ff; align-self: flex-end; margin-left: auto; }
|
|
.bot { background: #e9ecef; align-self: flex-start; }
|
|
.error { background: #ffe0e0; color: #b30000; }
|
|
#inputArea { display: flex; margin-top: 10px; }
|
|
input { flex: 1; padding: 8px; border-radius: 6px; border: 1px solid #ccc; }
|
|
button { margin-left: 5px; padding: 8px 15px; border: none; border-radius: 6px; background: #007bff; color: white; cursor: pointer; }
|
|
button:hover { background: #0056b3; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h2>🤖 Ghaymah Cloud Chatbot</h2>
|
|
<div id="chatbox"></div>
|
|
<div id="inputArea">
|
|
<input type="text" id="userInput" placeholder="Ask about Ghaymah Cloud...">
|
|
<button onclick="sendMessage()">Send</button>
|
|
</div>
|
|
|
|
<script>
|
|
async function sendMessage() {
|
|
const input = document.getElementById("userInput");
|
|
const chatbox = document.getElementById("chatbox");
|
|
const query = input.value.trim();
|
|
if (!query) return;
|
|
|
|
// Show user message
|
|
chatbox.innerHTML += `<div class="message user">${query}</div>`;
|
|
input.value = "";
|
|
chatbox.scrollTop = chatbox.scrollHeight;
|
|
|
|
try {
|
|
const response = await fetch("http://127.0.0.1:8000/query/", {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({ query, k: 5 })
|
|
});
|
|
|
|
const data = await response.json();
|
|
|
|
let botMessage = "";
|
|
if (response.ok && data.answer) {
|
|
botMessage = data.answer;
|
|
} else if (data.error && data.error.includes("quota")) {
|
|
botMessage = "⚠️ Your Ghaymah Cloud quota has been exceeded. Please upgrade your plan or wait until it resets.";
|
|
} else if (data.error) {
|
|
botMessage = "❌ Error: " + data.error;
|
|
} else {
|
|
botMessage = "🤔 Sorry, I couldn't understand that.";
|
|
}
|
|
|
|
chatbox.innerHTML += `<div class="message bot">${botMessage}</div>`;
|
|
chatbox.scrollTop = chatbox.scrollHeight;
|
|
|
|
} catch (err) {
|
|
chatbox.innerHTML += `<div class="message bot error">🚨 Connection error: Unable to reach backend. Is FastAPI running?</div>`;
|
|
chatbox.scrollTop = chatbox.scrollHeight;
|
|
}
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|