Hugging Face's logo

Spaces:
Really-amin
/
My_Ai
Running

App Files
Really-amin commited on
Commit
e1823a4
·
verified ·
1 Parent(s): f9edde4

Rename inex.html to index.html

Browse files
Files changed (1) hide show
  1. inex.html → index.html +24 -44
inex.html → index.html RENAMED
@@ -28,7 +28,7 @@
28
  }
29
  #chat-container {
30
  width: 95%;
31
- max-width: 1200px;
32
  background: white;
33
  border-radius: 20px;
34
  box-shadow: 0 10px 30px var(--shadow-color);
@@ -41,16 +41,8 @@
41
  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
42
  color: white;
43
  padding: 20px;
44
- font-size: 28px;
45
  font-weight: bold;
46
- display: flex;
47
- justify-content: space-between;
48
- align-items: center;
49
- box-shadow: 0 2px 10px var(--shadow-color);
50
- text-align: center;
51
- }
52
- .header-title {
53
- flex-grow: 1;
54
  text-align: center;
55
  }
56
  #chat-messages {
@@ -92,72 +84,60 @@
92
  border: 2px solid var(--secondary-color);
93
  border-radius: 20px;
94
  font-size: 16px;
95
- font-family: 'Vazirmatn', 'Tahoma', Arial, sans-serif;
96
  }
97
  #send-button {
98
  background: var(--primary-color);
99
  color: white;
100
  border: none;
101
- border-radius: 50%;
102
- width: 50px;
103
- height: 50px;
104
- font-size: 18px;
105
  cursor: pointer;
106
- display: flex;
107
- justify-content: center;
108
- align-items: center;
109
- }
110
- #send-button:hover {
111
- background: var(--secondary-color);
112
  }
113
  </style>
114
  </head>
115
  <body>
116
  <div id="chat-container">
117
- <div id="chat-header">
118
- <span class="header-title">دستیار هوش مصنوعی پیشرفته</span>
119
- </div>
120
  <div id="chat-messages"></div>
121
  <div id="input-container">
122
  <input type="text" id="user-input" placeholder="سوال خود را اینجا بنویسید...">
123
- <button id="send-button">➤</button>
124
  </div>
125
  </div>
126
  <script>
127
- // انتخاب عناصر
128
  const chatMessages = document.getElementById("chat-messages");
129
  const userInput = document.getElementById("user-input");
130
  const sendButton = document.getElementById("send-button");
131
 
132
- // تابع افزودن پیام به چت
133
  function addMessage(message, isUser) {
134
  const messageDiv = document.createElement("div");
135
  messageDiv.classList.add("message");
136
  messageDiv.classList.add(isUser ? "user-message" : "assistant-message");
137
  messageDiv.textContent = message;
138
  chatMessages.appendChild(messageDiv);
139
- chatMessages.scrollTop = chatMessages.scrollHeight; // اسکرول به پایین
140
  }
141
 
142
- // ارسال پیام و پاسخ
143
- sendButton.addEventListener("click", () => {
144
  const userMessage = userInput.value.trim();
145
  if (userMessage) {
146
- addMessage(userMessage, true); // افزودن پیام کاربر
147
- userInput.value = ""; // پاک کردن ورودی
148
-
149
- // شبیه‌سازی پاسخ دستیار
150
- setTimeout(() => {
151
- const assistantMessage = `پاسخ به: ${userMessage}`;
152
- addMessage(assistantMessage, false);
153
- }, 1000); // تأخیر برای پاسخ
154
- }
155
- });
156
 
157
- // ارسال با کلید Enter
158
- userInput.addEventListener("keypress", (e) => {
159
- if (e.key === "Enter") {
160
- sendButton.click();
 
 
 
 
 
 
 
 
 
161
  }
162
  });
163
  </script>
 
28
  }
29
  #chat-container {
30
  width: 95%;
31
+ max-width: 600px;
32
  background: white;
33
  border-radius: 20px;
34
  box-shadow: 0 10px 30px var(--shadow-color);
 
41
  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
42
  color: white;
43
  padding: 20px;
44
+ font-size: 24px;
45
  font-weight: bold;
 
 
 
 
 
 
 
 
46
  text-align: center;
47
  }
48
  #chat-messages {
 
84
  border: 2px solid var(--secondary-color);
85
  border-radius: 20px;
86
  font-size: 16px;
 
87
  }
88
  #send-button {
89
  background: var(--primary-color);
90
  color: white;
91
  border: none;
92
+ border-radius: 50px;
93
+ width: 100px;
94
+ font-size: 16px;
 
95
  cursor: pointer;
 
 
 
 
 
 
96
  }
97
  </style>
98
  </head>
99
  <body>
100
  <div id="chat-container">
101
+ <div id="chat-header">🧠 دستیار هوش مصنوعی پیشرفته</div>
 
 
102
  <div id="chat-messages"></div>
103
  <div id="input-container">
104
  <input type="text" id="user-input" placeholder="سوال خود را اینجا بنویسید...">
105
+ <button id="send-button">ارسال</button>
106
  </div>
107
  </div>
108
  <script>
 
109
  const chatMessages = document.getElementById("chat-messages");
110
  const userInput = document.getElementById("user-input");
111
  const sendButton = document.getElementById("send-button");
112
 
 
113
  function addMessage(message, isUser) {
114
  const messageDiv = document.createElement("div");
115
  messageDiv.classList.add("message");
116
  messageDiv.classList.add(isUser ? "user-message" : "assistant-message");
117
  messageDiv.textContent = message;
118
  chatMessages.appendChild(messageDiv);
119
+ chatMessages.scrollTop = chatMessages.scrollHeight;
120
  }
121
 
122
+ sendButton.addEventListener("click", async () => {
 
123
  const userMessage = userInput.value.trim();
124
  if (userMessage) {
125
+ addMessage(userMessage, true);
126
+ userInput.value = "";
 
 
 
 
 
 
 
 
127
 
128
+ try {
129
+ const response = await fetch("/predict", {
130
+ method: "POST",
131
+ headers: {
132
+ "Content-Type": "application/json",
133
+ },
134
+ body: JSON.stringify({ message: userMessage }),
135
+ });
136
+ const data = await response.json();
137
+ addMessage(data.reply, false);
138
+ } catch (error) {
139
+ addMessage("خطا در ارتباط با سرور.", false);
140
+ }
141
  }
142
  });
143
  </script>