// Configuration Backend - Auto-detect environment const BACKEND_URL = window.location.hostname === 'localhost' ? "http://localhost:3000" : "https://rosalinda-backend.onrender.com"; // Replace with your actual Render/Railway URL let isRecording = false; let mediaRecorder; let audioChunks = []; // Éléments DOM const chatMessages = document.getElementById('chatMessages'); const chatInput = document.querySelector('.chat-input input'); const sendButton = document.querySelector('.chat-input button[title="Envoyer"]'); const micButton = document.querySelector('.chat-input button[title="Micro"]'); const codeOutput = document.getElementById('codeOutput'); const activityMonitor = document.querySelector('.activity-monitor'); // Gestionnaire d'envoi de message sendButton.addEventListener('click', sendMessage); chatInput.addEventListener('keypress', (e) => { if (e.key === 'Enter') sendMessage(); }); async function sendMessage() { const message = chatInput.value.trim(); if (!message) return; addMessage('user', message); chatInput.value = ''; activityMonitor.textContent = '[ Rosalinda réfléchit... ]'; // Check if we're on Hugging Face Spaces const isHuggingFace = window.location.hostname.includes('hf.space'); try { const response = await fetch(`${isHuggingFace ? 'https://rosalinda-backend.onrender.com' : BACKEND_URL}/api/chat`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ message: message }) }); const data = await response.json(); activityMonitor.textContent = '[ Rosalinda en ligne ]'; if (data.reply) { addMessage('assistant', data.reply); // Détection de code dans la réponse // Détection de code dans la réponse const codeBlocks = data.reply.match(/```[\s\S]*?```/g); if (codeBlocks) { codeOutput.innerHTML = `
${codeBlocks.join('\n\n')}
`; } } } catch (error) { console.error('Erreur backend:', error); activityMonitor.textContent = '[ Erreur de connexion ]'; addMessage('assistant', `Désolé, une erreur s'est produite (${error.message}). Veuillez réessayer.`); } } function addMessage(sender, content) { const messageDiv = document.createElement('div'); messageDiv.className = `message ${sender}`; messageDiv.innerHTML = `
${content}
`; chatMessages.appendChild(messageDiv); chatMessages.scrollTop = chatMessages.scrollHeight; } // Gestion de la voix micButton.addEventListener('click', toggleRecording); async function toggleRecording() { if (!isRecording) { try { const stream = await navigator.mediaDevices.getUserMedia({ audio: true }); mediaRecorder = new MediaRecorder(stream); audioChunks = []; mediaRecorder.ondataavailable = (e) => { audioChunks.push(e.data); }; mediaRecorder.onstop = async () => { const audioBlob = new Blob(audioChunks, { type: 'audio/wav' }); await sendAudioMessage(audioBlob); }; mediaRecorder.start(); isRecording = true; micButton.innerHTML = ''; activityMonitor.textContent = '[ Enregistrement en cours... ]'; } catch (err) { console.error('Erreur microphone:', err); addMessage('assistant', "Impossible d'accéder au microphone. Vérifiez les permissions."); } } else { mediaRecorder.stop(); isRecording = false; micButton.innerHTML = ''; activityMonitor.textContent = '[ Traitement audio... ]'; } } async function sendAudioMessage(audioBlob) { try { const formData = new FormData(); formData.append('audio', audioBlob, 'recording.wav'); const isHuggingFace = window.location.hostname.includes('hf.space'); const response = await fetch(`${isHuggingFace ? 'https://rosalinda-backend.onrender.com' : BACKEND_URL}/api/whisper`, { method: 'POST', body: formData }); const data = await response.json(); activityMonitor.textContent = '[ Rosalinda en ligne ]'; if (data.text) { addMessage('assistant', data.text); } } catch (error) { console.error('Erreur audio:', error); activityMonitor.textContent = '[ Erreur de connexion ]'; addMessage('assistant', `Erreur audio: ${error.message}. Vérifiez la connexion au serveur.`); } } // Bouton Génération d'image document.querySelector('.menu button:nth-child(1)').addEventListener('click', async () => { const prompt = prompt("Décrivez l'image que vous souhaitez générer avec DALL·E:"); if (prompt) { try { activityMonitor.textContent = '[ Génération image en cours... ]'; const isHuggingFace = window.location.hostname.includes('hf.space'); const response = await fetch(`${isHuggingFace ? 'https://rosalinda-backend.onrender.com' : BACKEND_URL}/api/image`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ prompt: prompt }) }); const data = await response.json(); activityMonitor.textContent = '[ Image générée ]'; if (data.imageUrl) { const resultOutput = document.querySelector('.result-output'); resultOutput.innerHTML = `Image générée`; addMessage('assistant', `Voici l'image générée pour "${prompt}"`); } } catch (error) { console.error('Erreur génération:', error); activityMonitor.textContent = '[ Erreur de génération ]'; addMessage('assistant', `Erreur de génération: ${error.message}. Vérifiez votre description.`); } } }); // Detect environment and log appropriate message if (window.location.hostname.includes('hf.space')) { console.log("Interface Espace Codage connectée au backend de production sur Render"); } else { console.log("Interface Espace Codage connectée au backend local"); }