Spaces:

HuggyGuyJo01
/

TestChat

Running

App Files Files Community

HuggyGuyJo01 commited on Oct 25, 2024

Commit

c8449af

verified ·

1 Parent(s): 4a83a32

Update index.html

Browse files

Files changed (1) hide show

index.html +302 -19

index.html CHANGED Viewed

@@ -1,19 +1,302 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<html><head><base href="https://WhatsApp/ai.com">
+<title>AI-Powered WhatsApp Chat with Image Upload</title>
+<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+<meta name="theme-color" content="#075e54">
+<meta name="apple-mobile-web-app-capable" content="yes">
+<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
+<style>
+  /* Styles restent identiques */
+  body, html {
+    margin: 0;
+    padding: 0;
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    background-color: #e5ddd5;
+    height: 100%;
+    overflow: hidden;
+  }
+  #chat-container {
+    max-width: 100%;
+    height: 100%;
+    margin: 0 auto;
+    background-color: #fff;
+    display: flex;
+    flex-direction: column;
+    box-shadow: 0 1px 1px 0 rgba(0,0,0,.06), 0 2px 5px 0 rgba(0,0,0,.2);
+  }
+  #chat-header {
+    background-color: #075e54;
+    color: #fff;
+    padding: 10px;
+    display: flex;
+    align-items: center;
+  }
+  #chat-header img {
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    margin-right: 10px;
+  }
+  #chat-header h1 {
+    margin: 0;
+    font-size: 16px;
+  }
+  #chat-messages {
+    flex: 1;
+    overflow-y: auto;
+    padding: 20px;
+    background-image: url('https://web.whatsapp.com/img/bg-chat-tile-dark_a4be512e7195b6b733d9110b408f075d.png');
+    background-repeat: repeat;
+  }
+  .message {
+    max-width: 80%;
+    margin-bottom: 10px;
+    padding: 8px 12px;
+    border-radius: 7.5px;
+    position: relative;
+  }
+  .user-message {
+    background-color: #dcf8c6;
+    align-self: flex-end;
+    margin-left: auto;
+  }
+  .ai-message {
+    background-color: #fff;
+    align-self: flex-start;
+  }
+  #chat-input {
+    display: flex;
+    padding: 10px;
+    background-color: #f0f0f0;
+  }
+  #user-input {
+    flex: 1;
+    border: none;
+    padding: 10px;
+    border-radius: 20px;
+    margin-right: 10px;
+  }
+  #send-button, #file-button {
+    background-color: #075e54;
+    color: #fff;
+    border: none;
+    padding: 10px;
+    border-radius: 50%;
+    cursor: pointer;
+    margin-left: 5px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  #send-button svg, #file-button svg {
+    width: 24px;
+    height: 24px;
+    fill: #fff;
+  }
+  #file-input {
+    display: none;
+  }
+  .message img {
+    max-width: 100%;
+    height: auto;
+    border-radius: 7.5px;
+    margin-top: 5px;
+  }
+  .typing-indicator {
+    padding: 8px 12px;
+    background-color: #fff;
+    border-radius: 7.5px;
+    margin-bottom: 10px;
+    display: none;
+  }
+  .typing-indicator span {
+    display: inline-block;
+    width: 8px;
+    height: 8px;
+    background-color: #90a4ae;
+    border-radius: 50%;
+    margin-right: 5px;
+    animation: typing 1s infinite;
+  }
+  @keyframes typing {
+    0%, 100% { transform: translateY(0); }
+    50% { transform: translateY(-5px); }
+  }
+  @media (min-width: 768px) {
+    #chat-container {
+      max-width: 600px;
+    }
+  }
+</style>
+    <script>
+        window.CONFIG = {
+            companyName: 'Guy+22656888879',
+            apiUrl: 'https://huggyguyjo01-testbakend.hf.space',
+            dashboardUrl: 'https://huggyguyjo01-testdashbord.static.hf.space',
+            chatUrl: 'https://huggyguyjo01-testchat.static.hf.space'
+        };
+    </script>
+    </head>
+<body>
+<div id="chat-container">
+  <div id="chat-header">
+    <img src="https://cdn-icons-png.flaticon.com/512/4712/4712109.png" alt="Clipart of a customer assistant with headset">
+    <h1>
+      AI Assistant
+      <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>
+    </h1>
+  </div>
+  <div id="chat-messages">
+    <div class="typing-indicator" id="typing-indicator">
+      <span></span>
+      <span></span>
+      <span></span>
+    </div>
+  </div>
+  <div id="chat-input">
+    <input type="text" id="user-input" placeholder="Type a message">
+    <button id="file-button">
+      <svg viewBox="0 0 24 24">
+        <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>
+      </svg>
+    </button>
+    <input type="file" id="file-input" accept="image/*">
+    <button id="send-button">
+      <svg viewBox="0 0 24 24">
+        <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>
+      </svg>
+    </button>
+  </div>
+</div>
+<script>
+const chatMessages = document.getElementById('chat-messages');
+const userInput = document.getElementById('user-input');
+const sendButton = document.getElementById('send-button');
+const fileButton = document.getElementById('file-button');
+const fileInput = document.getElementById('file-input');
+const typingIndicator = document.getElementById('typing-indicator');
+// URL du backend Python
+const BACKEND_URL = 'http://your-backend-url/api';
+// Fonction pour afficher l'indicateur de frappe
+function showTypingIndicator() {
+    typingIndicator.style.display = 'block';
+    chatMessages.scrollTop = chatMessages.scrollHeight;
+}
+// Fonction pour masquer l'indicateur de frappe
+function hideTypingIndicator() {
+    typingIndicator.style.display = 'none';
+}
+function addMessage(content, isUser, imageData = null) {
+    const messageDiv = document.createElement('div');
+    messageDiv.classList.add('message');
+    messageDiv.classList.add(isUser ? 'user-message' : 'ai-message');
+    if (imageData) {
+        const img = document.createElement('img');
+        img.src = imageData;
+        img.alt = 'Uploaded image';
+        messageDiv.appendChild(img);
+    } else {
+        messageDiv.textContent = content;
+    }
+    chatMessages.appendChild(messageDiv);
+    chatMessages.scrollTop = chatMessages.scrollHeight;
+}
+async function sendMessageToBackend(message, imageData = null) {
+    try {
+        showTypingIndicator();
+        const formData = new FormData();
+        formData.append('message', message);
+        if (imageData) {
+            formData.append('image', imageData);
+        }
+        const response = await fetch(`${BACKEND_URL}/chat`, {
+            method: 'POST',
+            body: formData
+        });
+        if (!response.ok) {
+            throw new Error('Network response was not ok');
+        }
+        const data = await response.json();
+        hideTypingIndicator();
+        if (data.response) {
+            addMessage(data.response, false);
+        }
+    } catch (error) {
+        console.error('Error:', error);
+        hideTypingIndicator();
+        addMessage("Je suis désolé, une erreur s'est produite. Veuillez réessayer.", false);
+    }
+}
+async function sendMessage() {
+    const userMessage = userInput.value.trim();
+    if (!userMessage) return;
+    addMessage(userMessage, true);
+    userInput.value = '';
+    await sendMessageToBackend(userMessage);
+}
+function handleImageUpload(file) {
+    if (file) {
+        const reader = new FileReader();
+        reader.onload = async function(e) {
+            addMessage('', true, e.target.result);
+            await sendMessageToBackend('', file);
+        };
+        reader.readAsDataURL(file);
+    }
+}
+// Event Listeners
+sendButton.addEventListener('click', sendMessage);
+userInput.addEventListener('keypress', (e) => {
+    if (e.key === 'Enter') {
+        sendMessage();
+    }
+});
+fileButton.addEventListener('click', () => fileInput.click());
+fileInput.addEventListener('change', (event) => {
+    handleImageUpload(event.target.files[0]);
+});
+// Gestion du drag and drop
+chatMessages.addEventListener('dragover', (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+});
+chatMessages.addEventListener('drop', (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    const file = e.dataTransfer.files[0];
+    if (file && file.type.startsWith('image/')) {
+        handleImageUpload(file);
+    }
+});
+// Initialisation
+window.onload = () => {
+    // Vous pouvez ajouter ici un message de bienvenue initial si nécessaire
+    addMessage("Bonjour ! Je suis votre assistant virtuel. Comment puis-je vous aider aujourd'hui ?", false);
+};
+</script>
+</body></html>