main

分支 (1)

管理

管理

main

speech-python
/
speech_client.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>语音识别Web应用</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">

    <!-- 配置Tailwind自定义颜色和字体 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#3B82F6',
                        secondary: '#10B981',
                        danger: '#EF4444',
                        dark: '#1E293B',
                        light: '#F8FAFC'
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>

    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .recording-pulse {
                animation: pulse 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
            }
            .fade-in {
                animation: fadeIn 0.5s ease-in-out;
            }
            .slide-up {
                animation: slideUp 0.3s ease-out;
            }
            .scale-hover {
                transition: transform 0.2s ease;
            }
            .scale-hover:hover {
                transform: scale(1.05);
            }
        }

        @keyframes pulse {
            0%, 100% {
                box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
            }
            70% {
                box-shadow: 0 0 0 15px rgba(239, 68, 68, 0);
            }
        }

        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        @keyframes slideUp {
            from { transform: translateY(20px); opacity: 0; }
            to { transform: translateY(0); opacity: 1; }
        }
    </style>
</head>
<body class="bg-gray-50 font-sans text-dark min-h-screen flex flex-col">
    <!-- 顶部导航栏 -->
    <header class="bg-white shadow-md">
        <div class="container mx-auto px-4 py-4 flex justify-between items-center">
            <div class="flex items-center space-x-2">
                <i class="fa fa-microphone text-primary text-2xl"></i>
                <h1 class="text-xl font-bold text-primary">语音识别Web应用</h1>
            </div>
            <div class="text-sm text-gray-500">
                <span id="connection-status" class="flex items-center">
                    <i class="fa fa-circle text-gray-300 mr-2"></i>
                    未连接到服务器
                </span>
            </div>
        </div>
    </header>

    <!-- 主要内容区 -->
    <main class="flex-grow container mx-auto px-4 py-8 max-w-3xl">
        <!-- 浏览器兼容性提示 (初始隐藏) -->
        <div id="browser-compatibility" class="bg-red-50 border-l-4 border-danger p-4 mb-8 hidden fade-in">
            <div class="flex">
                <div class="flex-shrink-0">
                    <i class="fa fa-exclamation-circle text-danger"></i>
                </div>
                <div class="ml-3">
                    <p class="text-sm text-red-700" id="compatibility-message">
                        您的浏览器不支持录音功能，请使用最新版Chrome、Firefox或Edge浏览器。
                    </p>
                </div>
            </div>
        </div>

        <!-- 权限提示区 (初始隐藏) -->
        <div id="permission-prompt" class="bg-blue-50 border-l-4 border-primary p-4 mb-8 hidden fade-in">
            <div class="flex">
                <div class="flex-shrink-0">
                    <i class="fa fa-info-circle text-primary"></i>
                </div>
                <div class="ml-3">
                    <p class="text-sm text-blue-700">
                        此应用需要使用您的麦克风进行录音。请在弹出的权限请求中选择"允许"。
                    </p>
                </div>
            </div>
        </div>

        <!-- 安全上下文提示 (初始显示，云平台部署关键修复) -->
        <div id="security-warning" class="bg-yellow-50 border-l-4 border-yellow-400 p-4 mb-8 fade-in">
            <div class="flex">
                <div class="flex-shrink-0">
                    <i class="fa fa-exclamation-triangle text-yellow-500"></i>
                </div>
                <div class="ml-3">
                    <p class="text-sm text-yellow-700">
                        浏览器要求在安全连接(HTTPS)下才能访问麦克风。请确保您的网站使用HTTPS协议，
                        或点击下方按钮尝试获取权限：
                    </p>
                    <button id="request-permission-btn" class="mt-2 text-sm bg-primary text-white px-3 py-1 rounded hover:bg-primary/90 transition">
                        <i class="fa fa-microphone mr-1"></i> 申请麦克风权限
                    </button>
                </div>
            </div>
        </div>

        <!-- 服务器设置 -->
        <div class="bg-white rounded-lg shadow-md p-6 mb-8 slide-up">
            <h2 class="text-lg font-semibold mb-4 flex items-center">
                <i class="fa fa-server text-gray-500 mr-2"></i>
                服务器设置
            </h2>
            <div class="flex flex-col md:flex-row gap-4">
                <div class="flex-grow">
                    <label for="server-url" class="block text-sm font-medium text-gray-700 mb-1">服务器地址</label>
                    <input
                        type="text"
                        id="server-url"
                        value="http://117.72.50.177:5000/recognize"
                        class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"
                    >
                </div>
                <div class="flex items-end">
                    <button
                        id="test-connection"
                        class="bg-primary hover:bg-primary/90 text-white px-4 py-2 rounded-md transition duration-200 flex items-center scale-hover"
                    >
                        <i class="fa fa-check-circle mr-2"></i>
                        测试连接
                    </button>
                </div>
            </div>
            <div id="connection-result" class="mt-3 hidden"></div>
        </div>

        <!-- 录音控制区 -->
        <div class="bg-white rounded-lg shadow-md p-6 mb-8 text-center slide-up" style="animation-delay: 0.1s">
            <h2 class="text-lg font-semibold mb-6 flex items-center justify-center">
                <i class="fa fa-microphone-slash text-gray-500 mr-2"></i>
                录音控制
            </h2>

            <div class="flex justify-center mb-6">
                <button
                    id="record-btn"
                    class="w-28 h-28 rounded-full bg-gray-100 hover:bg-gray-200 text-primary flex items-center justify-center transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-primary/50 scale-hover"
                    disabled
                >
                    <i class="fa fa-microphone text-5xl"></i>
                </button>
            </div>

            <div id="recording-indicator" class="hidden mb-6">
                <div class="inline-flex items-center text-danger">
                    <i class="fa fa-circle text-sm recording-pulse mr-2"></i>
                    <span>正在录音...</span>
                </div>
                <div class="mt-2 text-sm text-gray-500">
                    录音时长: <span id="recording-time">00:00</span>
                </div>
                <p class="mt-4 text-sm text-gray-600">点击按钮停止录音</p>
            </div>

            <div id="record-status" class="text-sm text-gray-500 py-2"></div>
        </div>

        <!-- 识别结果区 -->
        <div class="bg-white rounded-lg shadow-md p-6 slide-up" style="animation-delay: 0.2s">
            <h2 class="text-lg font-semibold mb-4 flex items-center">
                <i class="fa fa-comment text-gray-500 mr-2"></i>
                识别结果
            </h2>
            <div id="result-container" class="min-h-[100px] border border-gray-200 rounded-md p-4 bg-gray-50">
                <div class="text-gray-400 italic text-center py-8" id="result-placeholder">
                    点击麦克风按钮开始录音，再次点击停止并识别...
                </div>
                <div id="result-content" class="hidden"></div>
                <div id="error-message" class="hidden text-danger"></div>
            </div>
        </div>
    </main>

    <!-- 页脚 -->
    <footer class="bg-dark text-white py-6">
        <div class="container mx-auto px-4 text-center text-sm">
            <p>语音识别Web应用 &copy; 2023</p>
            <p class="mt-1 text-gray-400">使用现代Web技术构建</p>
        </div>
    </footer>

    <script>
        // DOM元素引用
        const serverUrlInput = document.getElementById('server-url');
        const testConnectionBtn = document.getElementById('test-connection');
        const connectionResult = document.getElementById('connection-result');
        const connectionStatus = document.getElementById('connection-status');
        const recordBtn = document.getElementById('record-btn');
        const recordingIndicator = document.getElementById('recording-indicator');
        const recordingTime = document.getElementById('recording-time');
        const recordStatus = document.getElementById('record-status');
        const resultContainer = document.getElementById('result-container');
        const resultPlaceholder = document.getElementById('result-placeholder');
        const resultContent = document.getElementById('result-content');
        const errorMessage = document.getElementById('error-message');
        const permissionPrompt = document.getElementById('permission-prompt');
        const browserCompatibility = document.getElementById('browser-compatibility');
        const compatibilityMessage = document.getElementById('compatibility-message');
        const securityWarning = document.getElementById('security-warning');
        const requestPermissionBtn = document.getElementById('request-permission-btn');

        // 全局变量
        let mediaRecorder;
        let audioStream;
        let audioChunks = [];
        let recordingTimer;
        let recordingSeconds = 0;
        let isRecording = false;
        let isServerAvailable = false;
        let audioContext = null;
        let hasRequestedPermission = false;

        // 云平台适配：更健壮的getUserMedia检测和引用
        let getUserMedia = null;

        // 初始化
        document.addEventListener('DOMContentLoaded', () => {
            // 云平台关键修复：更严格的媒体设备API检测
            detectMediaAPIs();

            // 检查浏览器兼容性
            checkBrowserCompatibility();

            // 测试服务器连接
            testServerConnection();

            // 绑定事件
            recordBtn.addEventListener('click', toggleRecording);
            requestPermissionBtn.addEventListener('click', requestMicrophonePermission);

            // 检查安全上下文
            checkSecurityContext();
        });

        // 云平台关键修复：检测并初始化媒体设备API
        function detectMediaAPIs() {
            // 检查所有可能的API变体
            if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
                getUserMedia = navigator.mediaDevices.getUserMedia.bind(navigator.mediaDevices);
            } else if (navigator.getUserMedia) {
                getUserMedia = navigator.getUserMedia.bind(navigator);
            } else if (navigator.webkitGetUserMedia) {
                getUserMedia = navigator.webkitGetUserMedia.bind(navigator);
            } else if (navigator.mozGetUserMedia) {
                getUserMedia = navigator.mozGetUserMedia.bind(navigator);
            } else if (navigator.msGetUserMedia) {
                getUserMedia = navigator.msGetUserMedia.bind(navigator);
            } else {
                getUserMedia = null;
            }
        }

        // 检查浏览器兼容性
        function checkBrowserCompatibility() {
            if (!getUserMedia) {
                browserCompatibility.classList.remove('hidden');
                compatibilityMessage.textContent = '您的浏览器不支持录音功能，请使用最新版Chrome、Firefox或Edge浏览器。';
                return false;
            }

            if (!window.MediaRecorder) {
                browserCompatibility.classList.remove('hidden');
                compatibilityMessage.textContent = '您的浏览器不支持音频录制，请使用最新版Chrome、Firefox或Edge浏览器。';
                return false;
            }

            return true;
        }

        // 检查安全上下文（云平台部署关键）
        function checkSecurityContext() {
            // 云平台通常需要HTTPS，明确检查并提示
            if (window.isSecureContext) {
                securityWarning.innerHTML = `
                    <div class="flex">
                        <div class="flex-shrink-0">
                            <i class="fa fa-info-circle text-blue-500"></i>
                        </div>
                        <div class="ml-3">
                            <p class="text-sm text-blue-700">
                                已在安全连接下运行，可以正常使用麦克风功能。
                            </p>
                        </div>
                    </div>
                `;
                // 自动请求权限
                requestMicrophonePermission();
            } else {
                // 非HTTPS环境，显示更明确的提示
                securityWarning.classList.remove('hidden');
                recordBtn.disabled = true;
            }
        }

        // 请求麦克风权限（云平台适配版）
        function requestMicrophonePermission() {
            // 检查浏览器是否支持
            if (!checkBrowserCompatibility()) {
                return;
            }

            if (hasRequestedPermission) return;

            hasRequestedPermission = true;
            permissionPrompt.classList.remove('hidden');

            try {
                // 确保getUserMedia存在再调用
                if (!getUserMedia) {
                    throw new Error('浏览器不支持麦克风访问API');
                }

                // 调用获取麦克风权限
                getUserMedia({ audio: true })
                    .then(stream => {
                        // 权限已授予，关闭流但保留权限
                        stream.getTracks().forEach(track => track.stop());
                        permissionPrompt.classList.add('hidden');
                        securityWarning.classList.add('hidden');
                        recordBtn.disabled = !isServerAvailable;
                    })
                    .catch(error => {
                        console.error('获取麦克风权限失败:', error);

                        // 更详细的错误分类
                        let errorMsg = '';
                        switch(error.name) {
                            case 'NotAllowedError':
                            case 'PermissionDeniedError':
                                errorMsg = '麦克风权限已被拒绝。请在浏览器地址栏右侧的锁图标中启用麦克风权限。';
                                break;
                            case 'NotFoundError':
                                errorMsg = '未检测到麦克风设备。请确保您的麦克风已正确连接。';
                                break;
                            case 'NotReadableError':
                                errorMsg = '麦克风正被其他应用占用。请关闭占用麦克风的应用后重试。';
                                break;
                            case 'SecurityError':
                                errorMsg = '浏览器安全策略阻止访问麦克风。请使用HTTPS协议或localhost运行。';
                                break;
                            default:
                                errorMsg = `无法访问麦克风: ${error.message}`;
                        }

                        permissionPrompt.innerHTML = `
                            <div class="flex">
                                <div class="flex-shrink-0">
                                    <i class="fa fa-exclamation-triangle text-yellow-500"></i>
                                </div>
                                <div class="ml-3">
                                    <p class="text-sm text-yellow-700">${errorMsg}</p>
                                    <button id="retry-permission" class="mt-2 text-sm bg-primary text-white px-3 py-1 rounded hover:bg-primary/90 transition">
                                        重试获取权限
                                    </button>
                                </div>
                            </div>
                        `;
                        permissionPrompt.classList.remove('hidden');

                        // 绑定重试按钮事件
                        document.getElementById('retry-permission').addEventListener('click', () => {
                            hasRequestedPermission = false;
                            requestMicrophonePermission();
                        });
                    });
            } catch (error) {
                console.error('调用麦克风API时发生错误:', error);
                browserCompatibility.classList.remove('hidden');
                compatibilityMessage.textContent = `初始化录音功能失败: ${error.message}`;
            }
        }

        // 测试服务器连接
        function testServerConnection() {
            const url = serverUrlInput.value;

            testConnectionBtn.disabled = true;
            testConnectionBtn.innerHTML = '<i class="fa fa-spinner fa-spin mr-2"></i> 测试中...';

            // 处理可能的跨域问题
            fetch(url, {
                method: 'OPTIONS',
                mode: 'cors',
                headers: {
                    'Access-Control-Request-Method': 'POST',
                    'Access-Control-Request-Headers': 'Content-Type'
                }
            })
            .then(response => {
                isServerAvailable = true;
                updateConnectionStatus(true);
                showConnectionResult('服务器连接成功', 'success');
                if (hasRequestedPermission) {
                    recordBtn.disabled = false;
                }
            })
            .catch(error => {
                isServerAvailable = false;
                updateConnectionStatus(false);
                showConnectionResult(`服务器连接失败: ${error.message}`, 'error');
                recordBtn.disabled = true;
            })
            .finally(() => {
                testConnectionBtn.disabled = false;
                testConnectionBtn.innerHTML = '<i class="fa fa-check-circle mr-2"></i> 测试连接';
            });
        }

        // 其他函数保持不变，但增加了错误边界处理
        function updateConnectionStatus(connected) {
            if (connected) {
                connectionStatus.innerHTML = '<i class="fa fa-circle text-secondary mr-2"></i>已连接到服务器';
            } else {
                connectionStatus.innerHTML = '<i class="fa fa-circle text-danger mr-2"></i>未连接到服务器';
            }
        }

        function showConnectionResult(message, type) {
            connectionResult.textContent = message;
            connectionResult.className = `p-2 rounded-md ${
                type === 'success' ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'
            } fade-in`;
            connectionResult.classList.remove('hidden');

            setTimeout(() => {
                connectionResult.classList.add('hidden');
            }, 3000);
        }

        function toggleRecording() {
            if (!isServerAvailable) {
                showConnectionResult('请先连接到服务器', 'error');
                return;
            }

            if (isRecording) {
                stopRecording();
            } else {
                startRecording();
            }
        }

        function startRecording() {
            // 增加额外的安全检查
            if (!getUserMedia) {
                showError('浏览器不支持麦克风访问，请更换浏览器');
                return;
            }

            if (!checkBrowserCompatibility()) return;

            if (!audioContext) {
                try {
                    audioContext = new (window.AudioContext || window.webkitAudioContext)({
                        sampleRate: 16000
                    });
                } catch (error) {
                    console.error('音频上下文初始化失败:', error);
                    showError(`无法初始化音频设备: ${error.message}`);
                    return;
                }
            }

            try {
                getUserMedia({ audio: {
                    sampleRate: 16000,
                    channelCount: 1,
                    sampleSize: 16,
                    echoCancellation: true,
                    noiseSuppression: true
                }})
                .then(stream => {
                    audioStream = stream;
                    mediaRecorder = new MediaRecorder(stream);
                    audioChunks = [];

                    mediaRecorder.addEventListener('dataavailable', event => {
                        if (event.data.size > 0) {
                            audioChunks.push(event.data);
                        }
                    });

                    mediaRecorder.start();
                    isRecording = true;
                    updateRecordingUI(true);
                    startRecordingTimer();
                    recordStatus.textContent = '正在录音...';
                    recordStatus.className = 'text-sm text-blue-600 py-2';
                })
                .catch(error => {
                    console.error('录音启动失败:', error);
                    recordStatus.textContent = `录音启动失败: ${error.message}`;
                    recordStatus.className = 'text-sm text-danger py-2';

                    if (error.name === 'NotAllowedError' || error.name === 'PermissionDeniedError') {
                        permissionPrompt.innerHTML = `
                            <div class="flex">
                                <div class="flex-shrink-0">
                                    <i class="fa fa-exclamation-triangle text-yellow-500"></i>
                                </div>
                                <div class="ml-3">
                                    <p class="text-sm text-yellow-700">
                                        需要麦克风权限才能录音。请在浏览器设置中启用权限。
                                    </p>
                                    <button id="retry-record-permission" class="mt-2 text-sm bg-primary text-white px-3 py-1 rounded hover:bg-primary/90 transition">
                                        重试获取权限
                                    </button>
                                </div>
                            </div>
                        `;
                        permissionPrompt.classList.remove('hidden');

                        document.getElementById('retry-record-permission').addEventListener('click', () => {
                            hasRequestedPermission = false;
                            requestMicrophonePermission().then(() => startRecording());
                        });
                    }
                });
            } catch (error) {
                console.error('启动录音时发生错误:', error);
                showError(`启动录音失败: ${error.message}`);
            }
        }

        // 剩余函数保持不变（stopRecording, convertToPCMAndSend等）
        function stopRecording() {
            if (!mediaRecorder) return;

            mediaRecorder.stop();
            isRecording = false;
            stopRecordingTimer();
            updateRecordingUI(false);
            recordStatus.textContent = '正在处理音频并发送到服务器...';
            recordStatus.className = 'text-sm text-blue-600 py-2';

            mediaRecorder.addEventListener('stop', () => {
                if (audioStream) {
                    audioStream.getTracks().forEach(track => track.stop());
                }

                if (audioChunks.length === 0 || audioChunks[0].size === 0) {
                    showError('未获取到有效的音频数据，请重试');
                    recordStatus.textContent = '录音失败';
                    recordStatus.className = 'text-sm text-danger py-2';
                    return;
                }

                const audioBlob = new Blob(audioChunks, { type: 'audio/wav' });
                convertToPCMAndSend(audioBlob);
            });
        }

        function convertToPCMAndSend(audioBlob) {
            if (!audioContext) {
                showError('音频上下文未初始化');
                return;
            }

            if (audioContext.state === 'suspended') {
                audioContext.resume();
            }

            const fileReader = new FileReader();

            fileReader.onloadend = function() {
                const arrayBuffer = this.result;

                if (!arrayBuffer || arrayBuffer.byteLength === 0) {
                    showError('音频数据为空或无效');
                    return;
                }

                audioContext.decodeAudioData(arrayBuffer)
                    .then(audioBuffer => {
                        if (!audioBuffer || audioBuffer.length === 0) {
                            showError('无法解码音频数据');
                            return;
                        }

                        const offlineContext = new OfflineAudioContext(
                            1,
                            16000 * audioBuffer.duration,
                            16000
                        );

                        const sourceNode = offlineContext.createBufferSource();
                        sourceNode.buffer = audioBuffer;
                        sourceNode.connect(offlineContext.destination);
                        sourceNode.start(0);

                        offlineContext.startRendering().then(renderedBuffer => {
                            if (!renderedBuffer || renderedBuffer.getChannelData(0).length === 0) {
                                showError('音频重采样失败');
                                return;
                            }

                            try {
                                const pcmData = convertFloat32ToInt16(renderedBuffer.getChannelData(0));
                                sendAudioToServer(pcmData);
                            } catch (error) {
                                console.error('PCM转换失败:', error);
                                showError(`音频格式转换失败: ${error.message}`);
                            }
                        }).catch(error => {
                            console.error('离线渲染失败:', error);
                            showError(`音频处理失败: ${error.message}`);
                        });
                    })
                    .catch(error => {
                        console.error('音频解码失败:', error);
                        showError(`音频解码失败: ${error.message}`);
                    });
            };

            fileReader.onerror = function() {
                showError(`文件读取错误: ${fileReader.error.message}`);
            };

            fileReader.readAsArrayBuffer(audioBlob);
        }

        function convertFloat32ToInt16(buffer) {
            if (!buffer || buffer.length === 0) {
                throw new Error('输入音频缓冲区为空');
            }

            const bufferLength = buffer.length;
            const int16Buffer = new Int16Array(bufferLength);

            for (let i = 0; i < bufferLength; i++) {
                const value = Math.max(-1, Math.min(1, buffer[i]));
                int16Buffer[i] = value < 0 ? value * 32768 : value * 32767;
            }

            return int16Buffer.buffer;
        }

        function sendAudioToServer(pcmData) {
            const url = serverUrlInput.value;

            fetch(url, {
                method: 'POST',
                body: pcmData,
                mode: 'cors',
                headers: {
                    'Content-Type': 'application/octet-stream'
                }
            })
            .then(response => {
                if (!response.ok) {
                    throw new Error(`HTTP错误: ${response.status}`);
                }
                return response.json();
            })
            .then(result => {
                console.log('识别结果:', result);
                recordStatus.textContent = '音频已成功处理';
                recordStatus.className = 'text-sm text-secondary py-2';
                showResult(result);
            })
            .catch(error => {
                console.error('发送音频失败:', error);
                recordStatus.textContent = '发送音频失败';
                recordStatus.className = 'text-sm text-danger py-2';
                showError(`服务器请求失败: ${error.message}`);
            });
        }

        function updateRecordingUI(isRecording) {
            if (isRecording) {
                recordBtn.innerHTML = '<i class="fa fa-stop text-5xl"></i>';
                recordBtn.className = 'w-28 h-28 rounded-full bg-danger hover:bg-danger/90 text-white flex items-center justify-center transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-danger/50 scale-hover recording-pulse';
                recordingIndicator.classList.remove('hidden');
                resultPlaceholder.classList.remove('hidden');
                resultContent.classList.add('hidden');
                errorMessage.classList.add('hidden');
                permissionPrompt.classList.add('hidden');
            } else {
                recordBtn.innerHTML = '<i class="fa fa-microphone text-5xl"></i>';
                recordBtn.className = 'w-28 h-28 rounded-full bg-gray-100 hover:bg-gray-200 text-primary flex items-center justify-center transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-primary/50 scale-hover';
                recordingIndicator.classList.add('hidden');
            }
        }

        function startRecordingTimer() {
            recordingSeconds = 0;
            updateRecordingTime();

            recordingTimer = setInterval(() => {
                recordingSeconds++;
                updateRecordingTime();
            }, 1000);
        }

        function stopRecordingTimer() {
            clearInterval(recordingTimer);
        }

        function updateRecordingTime() {
            const minutes = Math.floor(recordingSeconds / 60).toString().padStart(2, '0');
            const seconds = (recordingSeconds % 60).toString().padStart(2, '0');
            recordingTime.textContent = `${minutes}:${seconds}`;
        }

        function showResult(result) {
            resultPlaceholder.classList.add('hidden');
            resultContent.classList.remove('hidden');
            errorMessage.classList.add('hidden');

            if (typeof result === 'object') {
                resultContent.innerHTML = `<pre class="text-left whitespace-pre-wrap">${JSON.stringify(result, null, 2)}</pre>`;
            } else {
                resultContent.textContent = result;
            }
        }

        function showError(message) {
            resultPlaceholder.classList.add('hidden');
            resultContent.classList.add('hidden');
            errorMessage.classList.remove('hidden');
            errorMessage.textContent = message;
        }

        testConnectionBtn.addEventListener('click', testServerConnection);
    </script>
</body>
</html>