<script>
    // 获取按钮元素
    var sendButton = document.getElementById('send-button');
    var clearButton = document.getElementById('clear-button');

    // 添加点击事件监听器
    sendButton.addEventListener('click', function() {
        // 在按钮点击时添加视觉反馈样式
        sendButton.classList.add('button-clicked');

        // 在按钮点击时播放声音
        var audio = new Audio('data:audio/mp3;base64,INSERT_BASE64_ENCODED_AUDIO_DATA_HERE'); // 替换为实际的base64编码字符串
        audio.play();

        // 发送请求并获取响应
        getResponse();
    });

    clearButton.addEventListener('click', function() {
        // 在按钮点击时添加视觉反馈样式
        clearButton.classList.add('button-clicked');

        // 在按钮点击时播放声音
        var audio = new Audio('data:audio/mp3;base64,INSERT_BASE64_ENCODED_AUDIO_DATA_HERE'); // 替换为实际的base64编码字符串
        audio.play();

        // 清空文本框内容
        clearText();
    });

    function getResponse() {
        var userInput = document.getElementById('user-input').value;

        if (!userInput) {
            alert('请输入问题或内容，然后再点击发送。');
            return;
        }

        fetch('/get_response', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded'
            },
            body: 'user_input=' + encodeURIComponent(userInput)
        })
        .then(response => response.json())
        .then(data => {
            if (data.hasOwnProperty('response')) {
                var responseText = data.response;
                var responseBox = document.getElementById('response-text');
                responseBox.value = ''; // 清空文本框
                displayText(responseText, responseBox);
            } else if (data.hasOwnProperty('error')) {
                alert('发生错误：' + data.error);
            }
        })
        .catch(error => {
            console.error('Error:', error);
        });
    }

    function displayText(text, element) {
        var i = 0;
        var interval = setInterval(function() {
            element.value += text[i];
            i++;
            if (i >= text.length) {
                clearInterval(interval);
            }
        }, 20); // 调整速度，单位为毫秒
    }

    function clearText() {
        document.getElementById('user-input').value = '';
        document.getElementById('response-text').value = '';
    }
</script>