// 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 = `
`;
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 = `