Hugging Face's logo

Spaces:
HuggyGuyJo01
/
TestChat
Running

App Files Community
HuggyGuyJo01 commited on
Commit
9825317
·
verified ·
1 Parent(s): e636cea

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +39 -30
index.html CHANGED
@@ -1,15 +1,16 @@
1
  <html><head><base href="https://WhatsApp/ai.com">
 
2
  <title>AI-Powered WhatsApp Chat with Image Upload</title>
3
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
4
  <meta name="theme-color" content="#075e54">
5
  <meta name="apple-mobile-web-app-capable" content="yes">
6
  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
7
  <style>
8
- /* Styles restent identiques */
9
  body, html {
10
  margin: 0;
11
  padding: 0;
12
- font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
13
  background-color: #e5ddd5;
14
  height: 100%;
15
  overflow: hidden;
@@ -53,6 +54,8 @@
53
  padding: 8px 12px;
54
  border-radius: 7.5px;
55
  position: relative;
 
 
56
  }
57
  .user-message {
58
  background-color: #dcf8c6;
@@ -74,6 +77,7 @@
74
  padding: 10px;
75
  border-radius: 20px;
76
  margin-right: 10px;
 
77
  }
78
  #send-button, #file-button {
79
  background-color: #075e54;
@@ -126,25 +130,19 @@
126
  max-width: 600px;
127
  }
128
  }
 
 
 
 
129
  </style>
130
-
131
- <script>
132
- window.CONFIG = {
133
- companyName: 'Guy+22656888879',
134
- apiUrl: 'https://huggyguyjo01-testbakend.hf.space',
135
- dashboardUrl: 'https://huggyguyjo01-testdashbord.static.hf.space',
136
- chatUrl: 'https://huggyguyjo01-testchat.static.hf.space'
137
- };
138
- </script>
139
- </head>
140
-
141
  <body>
142
  <div id="chat-container">
143
  <div id="chat-header">
144
  <img src="https://cdn-icons-png.flaticon.com/512/4712/4712109.png" alt="Clipart of a customer assistant with headset">
145
  <h1>
146
  AI Assistant
147
- <span style="display: inline-block; margin-left: 5px; background-color: #0099ff; color: white; font-size: 0.6em; padding: 2px 5px; border-radius: 50%; vertical-align: middle;" title="Verified AI Assistant">✓</span>
148
  </h1>
149
  </div>
150
  <div id="chat-messages">
@@ -155,14 +153,14 @@
155
  </div>
156
  </div>
157
  <div id="chat-input">
158
- <input type="text" id="user-input" placeholder="Type a message">
159
- <button id="file-button">
160
  <svg viewBox="0 0 24 24">
161
  <path d="M16.5 6v11.5c0 2.21-1.79 4-4 4s-4-1.79-4-4V5a2.5 2.5 0 0 1 5 0v10.5c0 .55-.45 1-1 1s-1-.45-1-1V6H10v9.5a2.5 2.5 0 0 0 5 0V5c0-2.21-1.79-4-4-4S7 2.79 7 5v12.5c0 3.04 2.46 5.5 5.5 5.5s5.5-2.46 5.5-5.5V6h-1.5z"></path>
162
  </svg>
163
  </button>
164
  <input type="file" id="file-input" accept="image/*">
165
- <button id="send-button">
166
  <svg viewBox="0 0 24 24">
167
  <path d="M1.101 21.757 23.8 12.028 1.101 2.3l.011 7.912 13.623 1.816-13.623 1.817-.011 7.912z"></path>
168
  </svg>
@@ -181,13 +179,21 @@ const typingIndicator = document.getElementById('typing-indicator');
181
  // URL du backend Python
182
  const BACKEND_URL = 'http://your-backend-url/api';
183
 
184
- // Fonction pour afficher l'indicateur de frappe
 
 
 
 
 
 
 
 
 
185
  function showTypingIndicator() {
186
  typingIndicator.style.display = 'block';
187
  chatMessages.scrollTop = chatMessages.scrollHeight;
188
  }
189
 
190
- // Fonction pour masquer l'indicateur de frappe
191
  function hideTypingIndicator() {
192
  typingIndicator.style.display = 'none';
193
  }
@@ -200,10 +206,11 @@ function addMessage(content, isUser, imageData = null) {
200
  if (imageData) {
201
  const img = document.createElement('img');
202
  img.src = imageData;
203
- img.alt = 'Uploaded image';
204
  messageDiv.appendChild(img);
205
  } else {
206
- messageDiv.textContent = content;
 
207
  }
208
 
209
  chatMessages.appendChild(messageDiv);
@@ -215,7 +222,8 @@ async function sendMessageToBackend(message, imageData = null) {
215
  showTypingIndicator();
216
 
217
  const formData = new FormData();
218
- formData.append('message', message);
 
219
  if (imageData) {
220
  formData.append('image', imageData);
221
  }
@@ -226,19 +234,20 @@ async function sendMessageToBackend(message, imageData = null) {
226
  });
227
 
228
  if (!response.ok) {
229
- throw new Error('Network response was not ok');
230
  }
231
 
232
  const data = await response.json();
233
  hideTypingIndicator();
234
 
235
  if (data.response) {
236
- addMessage(data.response, false);
 
237
  }
238
  } catch (error) {
239
- console.error('Error:', error);
240
  hideTypingIndicator();
241
- addMessage("Je suis désolé, une erreur s'est produite. Veuillez réessayer.", false);
242
  }
243
  }
244
 
@@ -267,7 +276,8 @@ function handleImageUpload(file) {
267
  sendButton.addEventListener('click', sendMessage);
268
 
269
  userInput.addEventListener('keypress', (e) => {
270
- if (e.key === 'Enter') {
 
271
  sendMessage();
272
  }
273
  });
@@ -295,8 +305,7 @@ chatMessages.addEventListener('drop', (e) => {
295
 
296
  // Initialisation
297
  window.onload = () => {
298
- // Vous pouvez ajouter ici un message de bienvenue initial si nécessaire
299
- addMessage("Bonjour ! Je suis votre assistant virtuel. Comment puis-je vous aider aujourd'hui ?", false);
300
  };
301
  </script>
302
- </body></html>
 
1
  <html><head><base href="https://WhatsApp/ai.com">
2
+ <meta charset="UTF-8">
3
  <title>AI-Powered WhatsApp Chat with Image Upload</title>
4
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
5
  <meta name="theme-color" content="#075e54">
6
  <meta name="apple-mobile-web-app-capable" content="yes">
7
  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
8
  <style>
9
+ /* Les styles restent identiques */
10
  body, html {
11
  margin: 0;
12
  padding: 0;
13
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
14
  background-color: #e5ddd5;
15
  height: 100%;
16
  overflow: hidden;
 
54
  padding: 8px 12px;
55
  border-radius: 7.5px;
56
  position: relative;
57
+ word-wrap: break-word;
58
+ overflow-wrap: break-word;
59
  }
60
  .user-message {
61
  background-color: #dcf8c6;
 
77
  padding: 10px;
78
  border-radius: 20px;
79
  margin-right: 10px;
80
+ font-size: 14px;
81
  }
82
  #send-button, #file-button {
83
  background-color: #075e54;
 
130
  max-width: 600px;
131
  }
132
  }
133
+ /* Ajout de styles pour le support des emojis */
134
+ .emoji {
135
+ font-family: "Segoe UI Emoji", "Noto Color Emoji", "Apple Color Emoji", "Segoe UI Symbol", sans-serif;
136
+ }
137
  </style>
138
+ </head>
 
 
 
 
 
 
 
 
 
 
139
  <body>
140
  <div id="chat-container">
141
  <div id="chat-header">
142
  <img src="https://cdn-icons-png.flaticon.com/512/4712/4712109.png" alt="Clipart of a customer assistant with headset">
143
  <h1>
144
  AI Assistant
145
+ <span style="display: inline-block; margin-left: 5px; background-color: #0099ff; color: white; font-size: 0.6em; padding: 2px 5px; border-radius: 50%; vertical-align: middle;" title="Assistant IA Vérifié">✓</span>
146
  </h1>
147
  </div>
148
  <div id="chat-messages">
 
153
  </div>
154
  </div>
155
  <div id="chat-input">
156
+ <input type="text" id="user-input" placeholder="Écrivez votre message">
157
+ <button id="file-button" title="Joindre une image">
158
  <svg viewBox="0 0 24 24">
159
  <path d="M16.5 6v11.5c0 2.21-1.79 4-4 4s-4-1.79-4-4V5a2.5 2.5 0 0 1 5 0v10.5c0 .55-.45 1-1 1s-1-.45-1-1V6H10v9.5a2.5 2.5 0 0 0 5 0V5c0-2.21-1.79-4-4-4S7 2.79 7 5v12.5c0 3.04 2.46 5.5 5.5 5.5s5.5-2.46 5.5-5.5V6h-1.5z"></path>
160
  </svg>
161
  </button>
162
  <input type="file" id="file-input" accept="image/*">
163
+ <button id="send-button" title="Envoyer">
164
  <svg viewBox="0 0 24 24">
165
  <path d="M1.101 21.757 23.8 12.028 1.101 2.3l.011 7.912 13.623 1.816-13.623 1.817-.011 7.912z"></path>
166
  </svg>
 
179
  // URL du backend Python
180
  const BACKEND_URL = 'http://your-backend-url/api';
181
 
182
+ // Fonction pour encoder correctement les caractères spéciaux
183
+ function encodeMessage(message) {
184
+ return encodeURIComponent(message);
185
+ }
186
+
187
+ // Fonction pour décoder les caractères spéciaux
188
+ function decodeMessage(message) {
189
+ return decodeURIComponent(message);
190
+ }
191
+
192
  function showTypingIndicator() {
193
  typingIndicator.style.display = 'block';
194
  chatMessages.scrollTop = chatMessages.scrollHeight;
195
  }
196
 
 
197
  function hideTypingIndicator() {
198
  typingIndicator.style.display = 'none';
199
  }
 
206
  if (imageData) {
207
  const img = document.createElement('img');
208
  img.src = imageData;
209
+ img.alt = 'Image envoyée';
210
  messageDiv.appendChild(img);
211
  } else {
212
+ // Décode le contenu pour afficher correctement les caractères spéciaux
213
+ messageDiv.textContent = decodeMessage(content);
214
  }
215
 
216
  chatMessages.appendChild(messageDiv);
 
222
  showTypingIndicator();
223
 
224
  const formData = new FormData();
225
+ // Encode le message avant l'envoi
226
+ formData.append('message', encodeMessage(message));
227
  if (imageData) {
228
  formData.append('image', imageData);
229
  }
 
234
  });
235
 
236
  if (!response.ok) {
237
+ throw new Error('Erreur réseau');
238
  }
239
 
240
  const data = await response.json();
241
  hideTypingIndicator();
242
 
243
  if (data.response) {
244
+ // Décode la réponse du serveur
245
+ addMessage(decodeMessage(data.response), false);
246
  }
247
  } catch (error) {
248
+ console.error('Erreur:', error);
249
  hideTypingIndicator();
250
+ addMessage("Désolé, une erreur s'est produite. Veuillez réessayer.", false);
251
  }
252
  }
253
 
 
276
  sendButton.addEventListener('click', sendMessage);
277
 
278
  userInput.addEventListener('keypress', (e) => {
279
+ if (e.key === 'Enter' && !e.shiftKey) {
280
+ e.preventDefault();
281
  sendMessage();
282
  }
283
  });
 
305
 
306
  // Initialisation
307
  window.onload = () => {
308
+ addMessage("Bonjour ! 👋 Je suis votre assistant virtuel. Comment puis-je vous aider aujourd'hui ?", false);
 
309
  };
310
  </script>
311
+ </body></html>