Spaces:
Running
Running
File size: 3,201 Bytes
5316073 a4dcebc 5316073 a4dcebc 5316073 a4dcebc 5316073 a4dcebc 5316073 a4dcebc 5316073 a4dcebc 5316073 a4dcebc 5316073 a4dcebc 5316073 a4dcebc 5316073 a4dcebc 5316073 a4dcebc 5316073 a4dcebc 5316073 a4dcebc 5316073 a4dcebc 5316073 |
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 |
<!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>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f9f9f9;
text-align: center;
padding: 20px;
}
#chat-container {
width: 100%;
max-width: 600px;
margin: 0 auto;
background: white;
border: 1px solid #ddd;
border-radius: 10px;
padding: 20px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
#messages {
max-height: 300px;
overflow-y: auto;
margin-bottom: 20px;
text-align: left;
}
.message {
margin-bottom: 10px;
padding: 10px;
border-radius: 5px;
}
.user-message {
background-color: #d1ecf1;
text-align: right;
}
.assistant-message {
background-color: #f8d7da;
text-align: left;
}
#user-input {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}
#send-button {
margin-top: 10px;
padding: 10px 20px;
background-color: #007bff;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
</style>
</head>
<body>
<div id="chat-container">
<div id="messages"></div>
<textarea id="user-input" placeholder="پیام خود را وارد کنید..."></textarea>
<button id="send-button">ارسال</button>
</div>
<script>
const sendButton = document.getElementById("send-button");
const userInput = document.getElementById("user-input");
const messagesDiv = document.getElementById("messages");
sendButton.addEventListener("click", async () => {
const userMessage = userInput.value;
if (!userMessage) return;
// نمایش پیام کاربر
const userDiv = document.createElement("div");
userDiv.className = "message user-message";
userDiv.textContent = userMessage;
messagesDiv.appendChild(userDiv);
// ارسال پیام به استریملیت
const response = await fetch("/generate", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ message: userMessage }),
});
const data = await response.json();
// نمایش پاسخ مدل
const assistantDiv = document.createElement("div");
assistantDiv.className = "message assistant-message";
assistantDiv.textContent = data.response;
messagesDiv.appendChild(assistantDiv);
userInput.value = "";
messagesDiv.scrollTop = messagesDiv.scrollHeight;
});
</script>
</body>
</html>
|