document.getElementById('send-button').addEventListener('click', function() {
    const input = document.getElementById('chat-input').value;
    const messages = document.getElementById('messages');

    // Display user input
    const userMessage = document.createElement('div');
    userMessage.className = 'message user';
    userMessage.innerText = input;
    messages.appendChild(userMessage);

    // Clear input
    document.getElementById('chat-input').value = '';

    // Fetch response from backend
    fetch(`http://127.0.0.1:7860/predict`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ data: input })
    })
    .then(response => response.json())
    .then(data => {
        const aiMessage = document.createElement('div');
        aiMessage.className = 'message ai';
        aiMessage.innerText = data;
        messages.appendChild(aiMessage);
    });
});