console 命令行工具 X clear
console
<!-- templates/index.html (前端) -->
<!DOCTYPE html>
<html>
<head>
    <title>在线扒谱工具</title>
    <script src="https://cdn.plot.ly/plotly-2.20.0.min.js"></script>
    <style>
        .container { max-width: 800px; margin: 0 auto; padding: 20px; }
        .upload-box { border: 2px dashed #ccc; padding: 40px; text-align: center; }
        #waveform { height: 300px; margin: 20px 0; }
        #downloadBtn { display: none; margin-top: 20px; }
    </style>
</head>
<body>
    <div class="container">
        <h1>在线音乐扒谱工具</h1>
        
        <div class="upload-box">
            <input type="file" id="audioInput" accept="audio/*">
            <p>拖放音频文件或点击选择（支持MP3/WAV）</p>
        </div>

        <div id="waveform"></div>
        
        <button id="downloadBtn" onclick="downloadMIDI()">下载MIDI文件</button>
        <div id="status"></div>
    </div>

    <script>
        const audioInput = document.getElementById('audioInput');
        const waveformDiv = document.getElementById('waveform');
        const downloadBtn = document.getElementById('downloadBtn');
        const statusDiv = document.getElementById('status');

        audioInput.addEventListener('change', async (e) => {
            const file = e.target.files[0];
            if (!file) return;

            statusDiv.innerHTML = '分析中...';
            downloadBtn.style.display = 'none';

            const formData = new FormData();
            formData.append('audio', file);

            try {
                const response = await fetch('/process', {
                    method: 'POST',
                    body: formData
                });

                const result = await response.json();
                if (response.status !== 200) {
                    throw new Error(result.error || '处理失败');
                }

                // 存储MIDI数据
                window.midiData = result.midi;
                
                // 绘制波形
                Plotly.newPlot(waveformDiv, [{
                    x: result.waveform.times,
                    y: result.waveform.f0,
                    type: 'scatter',
                    line: {color: '#00ff88'}
                }], {
                    title: '音高曲线',
                    yaxis: {type: 'log', title: '频率 (Hz)'},
                    xaxis: {title: '时间 (秒)'}
                });

                downloadBtn.style.display = 'block';
                statusDiv.innerHTML = '分析完成！';
            } catch (err) {
                statusDiv.innerHTML = `错误: ${err.message}`;
            }
        });

        function downloadMIDI() {
            const blob = new Blob([window.midiData], {type: 'audio/midi'});
            const url = URL.createObjectURL(blob);
            const a = document.createElement('a');
            a.href = url;
            a.download = 'output.mid';
            a.click();
            URL.revokeObjectURL(url);
        }
    </script>
</body>
</html>