Spaces:
Running
Running
File size: 4,978 Bytes
a334744 4750fd8 a334744 4750fd8 bbe8366 e1823a4 bbe8366 e1823a4 bbe8366 21e5d5e bbe8366 21e5d5e bbe8366 21e5d5e bbe8366 21e5d5e bbe8366 21e5d5e bbe8366 21e5d5e bbe8366 21e5d5e bbe8366 21e5d5e bbe8366 e1823a4 bbe8366 a334744 4750fd8 e1823a4 4750fd8 e1823a4 4750fd8 21e5d5e e1823a4 21e5d5e e1823a4 21e5d5e e1823a4 21e5d5e e1823a4 21e5d5e a334744 0e36705 |
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 142 143 144 145 146 |
<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>دستیار هوش مصنوعی پیشرفته</title>
<link href="https://cdn.jsdelivr.net/gh/rastikerdar/[email protected]/Vazirmatn-font-face.css" rel="stylesheet" type="text/css" />
<style>
:root {
--primary-color: #3498db;
--secondary-color: #2980b9;
--background-color: #f0f3f5;
--text-color: #34495e;
--shadow-color: rgba(0, 0, 0, 0.1);
--message-bg-user: #3498db;
--message-bg-assistant: #ecf0f1;
}
body {
font-family: 'Vazirmatn', 'Tahoma', Arial, sans-serif;
background-color: var(--background-color);
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
color: var(--text-color);
}
#chat-container {
width: 95%;
max-width: 600px;
background: white;
border-radius: 20px;
box-shadow: 0 10px 30px var(--shadow-color);
overflow: hidden;
display: flex;
flex-direction: column;
height: 90vh;
}
#chat-header {
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
color: white;
padding: 20px;
font-size: 24px;
font-weight: bold;
text-align: center;
}
#chat-messages {
flex-grow: 1;
overflow-y: auto;
padding: 20px;
display: flex;
flex-direction: column;
gap: 10px;
}
.message {
max-width: 75%;
padding: 10px 15px;
border-radius: 20px;
box-shadow: 0 3px 10px var(--shadow-color);
font-size: 16px;
line-height: 1.6;
}
.user-message {
align-self: flex-end;
background-color: var(--message-bg-user);
color: white;
}
.assistant-message {
align-self: flex-start;
background-color: var(--message-bg-assistant);
color: var(--text-color);
}
#input-container {
display: flex;
padding: 15px;
background: white;
border-top: 1px solid var(--secondary-color);
gap: 10px;
}
#user-input {
flex-grow: 1;
padding: 10px;
border: 2px solid var(--secondary-color);
border-radius: 20px;
font-size: 16px;
}
#send-button {
background: var(--primary-color);
color: white;
border: none;
border-radius: 50px;
width: 100px;
font-size: 16px;
cursor: pointer;
}
</style>
</head>
<body>
<div id="chat-container">
<div id="chat-header">🧠 دستیار هوش مصنوعی پیشرفته</div>
<div id="chat-messages"></div>
<div id="input-container">
<input type="text" id="user-input" placeholder="سوال خود را اینجا بنویسید...">
<button id="send-button">ارسال</button>
</div>
</div>
<script>
const chatMessages = document.getElementById("chat-messages");
const userInput = document.getElementById("user-input");
const sendButton = document.getElementById("send-button");
function addMessage(message, isUser) {
const messageDiv = document.createElement("div");
messageDiv.classList.add("message");
messageDiv.classList.add(isUser ? "user-message" : "assistant-message");
messageDiv.textContent = message;
chatMessages.appendChild(messageDiv);
chatMessages.scrollTop = chatMessages.scrollHeight;
}
sendButton.addEventListener("click", async () => {
const userMessage = userInput.value.trim();
if (userMessage) {
addMessage(userMessage, true);
userInput.value = "";
try {
const response = await fetch("/predict", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({ message: userMessage }),
});
const data = await response.json();
addMessage(data.reply, false);
} catch (error) {
addMessage("خطا در ارتباط با سرور.", false);
}
}
});
</script>
</body>
</html>
|