Spaces:
Runtime error
Runtime error
| <html lang="fr"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Barouia Chat - Interface Réelle</title> | |
| <style> | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; | |
| background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%); | |
| color: white; | |
| height: 100vh; | |
| overflow: hidden; | |
| } | |
| .chat-container { | |
| max-width: 800px; | |
| height: 100vh; | |
| margin: 0 auto; | |
| display: flex; | |
| flex-direction: column; | |
| background: rgba(255, 255, 255, 0.1); | |
| backdrop-filter: blur(20px); | |
| } | |
| .header { | |
| background: rgba(0, 0, 0, 0.3); | |
| padding: 1.5rem; | |
| text-align: center; | |
| border-bottom: 2px solid rgba(255, 255, 255, 0.2); | |
| } | |
| .header h1 { | |
| font-size: 2.5rem; | |
| margin-bottom: 0.5rem; | |
| background: linear-gradient(45deg, #ff6b6b, #feca57, #48dbfb, #ff9ff3); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| } | |
| .header p { | |
| color: #a0a0ff; | |
| font-size: 1.1rem; | |
| } | |
| .messages-container { | |
| flex: 1; | |
| overflow-y: auto; | |
| padding: 1rem; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 1rem; | |
| } | |
| .message { | |
| max-width: 70%; | |
| padding: 1rem 1.2rem; | |
| border-radius: 1.5rem; | |
| animation: messageAppear 0.3s ease-out; | |
| line-height: 1.4; | |
| } | |
| @keyframes messageAppear { | |
| from { opacity: 0; transform: translateY(10px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| .user-message { | |
| align-self: flex-end; | |
| background: linear-gradient(45deg, #667eea, #764ba2); | |
| margin-left: auto; | |
| } | |
| .ai-message { | |
| align-self: flex-start; | |
| background: rgba(255, 255, 255, 0.2); | |
| border: 1px solid rgba(255, 255, 255, 0.3); | |
| } | |
| .input-container { | |
| padding: 1.5rem; | |
| background: rgba(0, 0, 0, 0.3); | |
| border-top: 2px solid rgba(255, 255, 255, 0.2); | |
| } | |
| .input-group { | |
| display: flex; | |
| gap: 1rem; | |
| } | |
| #messageInput { | |
| flex: 1; | |
| padding: 1rem 1.5rem; | |
| border: none; | |
| border-radius: 2rem; | |
| background: rgba(255, 255, 255, 0.1); | |
| color: white; | |
| font-size: 1rem; | |
| backdrop-filter: blur(10px); | |
| } | |
| #messageInput:focus { | |
| outline: none; | |
| background: rgba(255, 255, 255, 0.15); | |
| box-shadow: 0 0 20px rgba(102, 126, 234, 0.3); | |
| } | |
| #sendButton { | |
| padding: 1rem 2rem; | |
| border: none; | |
| border-radius: 2rem; | |
| background: linear-gradient(45deg, #667eea, #764ba2); | |
| color: white; | |
| font-size: 1rem; | |
| cursor: pointer; | |
| transition: transform 0.2s; | |
| } | |
| #sendButton:hover { | |
| transform: translateY(-2px); | |
| } | |
| .typing-indicator { | |
| display: none; | |
| align-self: flex-start; | |
| padding: 1rem 1.2rem; | |
| background: rgba(255, 255, 255, 0.1); | |
| border-radius: 1.5rem; | |
| color: #a0a0ff; | |
| font-style: italic; | |
| } | |
| .status-bar { | |
| padding: 0.5rem 1.5rem; | |
| background: rgba(0, 0, 0, 0.2); | |
| border-top: 1px solid rgba(255, 255, 255, 0.1); | |
| font-size: 0.9rem; | |
| color: #a0a0ff; | |
| display: flex; | |
| justify-content: space-between; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="chat-container"> | |
| <div class="header"> | |
| <h1>🧠 Barouia Chat</h1> | |
| <p>Système de conversation IA réel - Interface fonctionnelle</p> | |
| </div> | |
| <div class="messages-container" id="messagesContainer"> | |
| <div class="message ai-message"> | |
| Bonjour ! Je suis Barouia, votre assistant IA. Comment puis-je vous aider aujourd'hui ? 🤖 | |
| </div> | |
| </div> | |
| <div class="typing-indicator" id="typingIndicator"> | |
| Barouia est en train de réfléchir... | |
| </div> | |
| <div class="input-container"> | |
| <div class="input-group"> | |
| <input type="text" id="messageInput" placeholder="Tapez votre message ici..." autocomplete="off"> | |
| <button id="sendButton">Envoyer</button> | |
| </div> | |
| </div> | |
| <div class="status-bar"> | |
| <div>Système: <span id="systemStatus">Connecté</span></div> | |
| <div>Messages: <span id="messageCount">1</span></div> | |
| </div> | |
| </div> | |
| <script> | |
| let messageCount = 1; | |
| const userId = 'user_' + Math.random().toString(36).substr(2, 9); | |
| // Initialisation | |
| document.addEventListener('DOMContentLoaded', function() { | |
| console.log('Barouia Chat System initialisé'); | |
| updateSystemStatus('Opérationnel'); | |
| }); | |
| // Gestion de l'envoi des messages | |
| document.getElementById('sendButton').addEventListener('click', sendMessage); | |
| document.getElementById('messageInput').addEventListener('keypress', function(e) { | |
| if (e.key === 'Enter') { | |
| sendMessage(); | |
| } | |
| }); | |
| async function sendMessage() { | |
| const input = document.getElementById('messageInput'); | |
| const message = input.value.trim(); | |
| if (!message) return; | |
| // Afficher le message utilisateur | |
| addMessageToChat('user', message); | |
| input.value = ''; | |
| messageCount++; | |
| updateMessageCount(); | |
| // Afficher l'indicateur de frappe | |
| showTypingIndicator(); | |
| try { | |
| const response = await fetch('/api/chat/send', { | |
| method: 'POST', | |
| headers: { | |
| 'Content-Type': 'application/json', | |
| }, | |
| body: JSON.stringify({ | |
| user_id: userId, | |
| message: message | |
| }) | |
| }); | |
| const data = await response.json(); | |
| // Cacher l'indicateur de frappe | |
| hideTypingIndicator(); | |
| if (data.success) { | |
| addMessageToChat('ai', data.response); | |
| } else { | |
| addMessageToChat('ai', 'Désolé, une erreur est survenue.'); | |
| } | |
| } catch (error) { | |
| hideTypingIndicator(); | |
| addMessageToChat('ai', 'Erreur de connexion au serveur.'); | |
| console.error('Erreur:', error); | |
| } | |
| } | |
| function addMessageToChat(role, content) { | |
| const container = document.getElementById('messagesContainer'); | |
| const messageDiv = document.createElement('div'); | |
| messageDiv.className = `message ${role}-message`; | |
| messageDiv.textContent = content; | |
| container.appendChild(messageDiv); | |
| container.scrollTop = container.scrollHeight; | |
| } | |
| function showTypingIndicator() { | |
| document.getElementById('typingIndicator').style.display = 'block'; | |
| document.getElementById('messagesContainer').scrollTop = document.getElementById('messagesContainer').scrollHeight; | |
| } | |
| function hideTypingIndicator() { | |
| document.getElementById('typingIndicator').style.display = 'none'; | |
| } | |
| function updateMessageCount() { | |
| document.getElementById('messageCount').textContent = messageCount; | |
| } | |
| function updateSystemStatus(status) { | |
| document.getElementById('systemStatus').textContent = status; | |
| } | |
| // Focus automatique sur l'input | |
| document.getElementById('messageInput').focus(); | |
| </script> | |
| </body> | |
| </html> |