script.js

// 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 = `<pre><code>${codeBlocks.join('\n\n')}</code></pre>`;
            }
}
} 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 = `
        <div class="message-content">${content}</div>
    `;
    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 = '<i class="fas fa-stop"></i>';
            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 = '<i class="fas fa-microphone"></i>';
        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 = `<img src="${data.imageUrl}" alt="Image générée" style="max-width:100%;">`;
            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");
}