push
هذا الالتزام موجود في:
69
chatbot.html
Normal file
69
chatbot.html
Normal file
@@ -0,0 +1,69 @@
|
||||
<!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>
|
||||
المرجع في مشكلة جديدة
حظر مستخدم