Spaces:

Really-amin
/

My_Ai

Running

App Files Files

Really-amin commited on Dec 2, 2024

Commit

a4dcebc

verified ·

1 Parent(s): 1ca069a

Update index.html

Browse files

Files changed (1) hide show

index.html +22 -27

index.html CHANGED Viewed

@@ -3,16 +3,15 @@
 <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>
         body {
-            font-family: 'Vazirmatn', sans-serif;
             background-color: #f9f9f9;
             text-align: center;
             padding: 20px;
         }
-        #chat-box {
             width: 100%;
             max-width: 600px;
             margin: 0 auto;
@@ -20,6 +19,7 @@
             border: 1px solid #ddd;
             border-radius: 10px;
             padding: 20px;
         }
         #messages {
             max-height: 300px;
@@ -32,11 +32,11 @@
             padding: 10px;
             border-radius: 5px;
         }
-        .user {
             background-color: #d1ecf1;
             text-align: right;
         }
-        .assistant {
             background-color: #f8d7da;
             text-align: left;
         }
@@ -55,49 +55,44 @@
             border-radius: 5px;
             cursor: pointer;
         }
-        #send-button:hover {
-            background-color: #0056b3;
-        }
     </style>
 </head>
 <body>
-    <div id="chat-box">
         <div id="messages"></div>
-        <textarea id="user-input" placeholder="پیامتان را بنویسید..."></textarea>
         <button id="send-button">ارسال</button>
     </div>
     <script>
-        const messagesDiv = document.getElementById('messages');
-        const userInput = document.getElementById('user-input');
-        const sendButton = document.getElementById('send-button');
-        sendButton.addEventListener('click', async () => {
             const userMessage = userInput.value;
             if (!userMessage) return;
             // نمایش پیام کاربر
-            const userDiv = document.createElement('div');
-            userDiv.className = 'message user';
             userDiv.textContent = userMessage;
             messagesDiv.appendChild(userDiv);
-            // ارسال پیام به بک‌اند
-            const response = await fetch('/api/chat', {
-                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';
             assistantDiv.textContent = data.response;
             messagesDiv.appendChild(assistantDiv);
-            userInput.value = '';
             messagesDiv.scrollTop = messagesDiv.scrollHeight;
         });
     </script>

 <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;
             border: 1px solid #ddd;
             border-radius: 10px;
             padding: 20px;
+            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
         }
         #messages {
             max-height: 300px;
             padding: 10px;
             border-radius: 5px;
         }
+        .user-message {
             background-color: #d1ecf1;
             text-align: right;
         }
+        .assistant-message {
             background-color: #f8d7da;
             text-align: left;
         }
             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>