Add MP4 conversion feature

app.py

@@ -14,9 +14,42 @@ os.makedirs(app.config['OUTPUT_FOLDER'], exist_ok=True)
 def index():
     return render_template('index.html')
 
-@app.route('/health')
-def health():
-    return jsonify({"status": "healthy"})
+@app.route('/convert', methods=['POST'])
+def convert():
+    if 'video' not in request.files:
+        return jsonify({"error": "No video file"}), 400
+    
+    video = request.files['video']
+    filename = str(uuid.uuid4())
+    input_path = os.path.join(app.config['UPLOAD_FOLDER'], filename + '.webm')
+    output_path = os.path.join(app.config['OUTPUT_FOLDER'], filename + '.mp4')
+    
+    video.save(input_path)
+    
+    # FFmpeg conversion
+    # -vf "pad=ceil(iw/2)*2:ceil(ih/2)*2" ensures dimensions are even for libx264
+    cmd = [
+        'ffmpeg', '-y', '-i', input_path,
+        '-c:v', 'libx264', '-preset', 'fast', '-crf', '23',
+        '-c:a', 'aac', '-b:a', '192k',
+        '-vf', 'pad=ceil(iw/2)*2:ceil(ih/2)*2', 
+        output_path
+    ]
+    
+    try:
+        subprocess.run(cmd, check=True, stdout=subprocess.PIPE, stderr=subprocess.PIPE)
+        return jsonify({"url": f"/download/{filename}.mp4"})
+    except subprocess.CalledProcessError as e:
+        return jsonify({"error": "Conversion failed", "details": str(e)}), 500
+    finally:
+        # Cleanup input
+        if os.path.exists(input_path):
+            os.remove(input_path)
+
+@app.route('/download/<filename>')
+def download_file(filename):
+    return send_file(os.path.join(app.config['OUTPUT_FOLDER'], filename), as_attachment=True)
+
 
 if __name__ == '__main__':
     app.run(host='0.0.0.0', port=7860)

templates/index.html

@@ -159,10 +159,10 @@
                             <span>{{ isPlaying ? '暂停预览' : '播放预览' }}</span>
                         </button>
 
-                        <button @click="startRecording" :disabled="!audioFile || isRecording" 
+                        <button @click="startRecording" :disabled="!audioFile || isRecording || isConverting" 
                             class="w-full py-3 rounded-lg font-semibold flex items-center justify-center space-x-2 transition-all disabled:opacity-50 disabled:cursor-not-allowed bg-indigo-600 hover:bg-indigo-700 text-white">
-                            <i class="fa-solid" :class="isRecording ? 'fa-spinner fa-spin' : 'fa-video'"></i>
-                            <span>{{ isRecording ? '正在录制...' : '开始生成视频' }}</span>
+                            <i class="fa-solid" :class="isRecording ? 'fa-spinner fa-spin' : (isConverting ? 'fa-cog fa-spin' : 'fa-video')"></i>
+                            <span>{{ isRecording ? '正在录制...' : (isConverting ? '正在转码为 MP4...' : '开始生成视频') }}</span>
                         </button>
                         
                         <div v-if="isRecording" class="text-center text-sm text-gray-500 mt-2">
@@ -200,12 +200,13 @@
                 </div>
                 
                 <div class="bg-gray-100 rounded-lg p-4 mb-6 text-center">
-                    <p class="text-gray-600 mb-2">您的视频已生成 (WebM格式)</p>
-                    <p class="text-xs text-gray-500">注意：WebM 格式在 Windows/Android 上兼容性良好。如需 MP4，请使用在线工具转换。</p>
+                    <p class="text-gray-600 mb-2">您的视频已生成 ({{ videoType.toUpperCase() }}格式)</p>
+                    <p class="text-xs text-gray-500" v-if="videoType === 'webm'">注意：WebM 格式在 Windows/Android 上兼容性良好。如需 MP4，请使用在线工具转换。</p>
+                    <p class="text-xs text-gray-500" v-else>MP4 格式，兼容所有平台 (iOS/Android/PC)。</p>
                 </div>
 
                 <div class="flex space-x-3">
-                    <a :href="videoUrl" download="audiogram.webm" class="flex-1 bg-indigo-600 text-white py-3 rounded-lg font-semibold text-center hover:bg-indigo-700 transition-colors">
+                    <a :href="videoUrl" :download="'audiogram.' + videoType" class="flex-1 bg-indigo-600 text-white py-3 rounded-lg font-semibold text-center hover:bg-indigo-700 transition-colors">
                         <i class="fa-solid fa-download mr-2"></i> 下载视频
                     </a>
                 </div>
@@ -224,8 +225,10 @@
                 const bgImageSrc = ref(null);
                 const isPlaying = ref(false);
                 const isRecording = ref(false);
+                const isConverting = ref(false);
                 const showResultModal = ref(false);
                 const videoUrl = ref('');
+                const videoType = ref('webm');
                 
                 // Settings
                 const aspectRatio = ref(1); // 1:1 default
@@ -540,11 +543,39 @@
                             }
                         };
                         
-                        mediaRecorder.onstop = () => {
+                        mediaRecorder.onstop = async () => {
                             const blob = new Blob(recordedChunks, { type: 'video/webm' });
-                            videoUrl.value = URL.createObjectURL(blob);
-                            showResultModal.value = true;
-                            isRecording.value = false;
+                            // Upload for conversion
+                            isConverting.value = true;
+                            
+                            const formData = new FormData();
+                            formData.append('video', blob, 'recording.webm');
+                            
+                            try {
+                                const response = await fetch('/convert', {
+                                    method: 'POST',
+                                    body: formData
+                                });
+                                
+                                if (response.ok) {
+                                    const data = await response.json();
+                                    videoUrl.value = data.url;
+                                    videoType.value = 'mp4';
+                                } else {
+                                    // Fallback to webm if backend fails
+                                    console.error("Conversion failed, falling back to WebM");
+                                    videoUrl.value = URL.createObjectURL(blob);
+                                    videoType.value = 'webm';
+                                }
+                            } catch (e) {
+                                console.error("Network error, falling back to WebM", e);
+                                videoUrl.value = URL.createObjectURL(blob);
+                                videoType.value = 'webm';
+                            } finally {
+                                isConverting.value = false;
+                                showResultModal.value = true;
+                                isRecording.value = false;
+                            }
                         };
                         
                         mediaRecorder.start();
@@ -580,6 +611,8 @@
                     duration,
                     showResultModal,
                     videoUrl,
+                    isConverting,
+                    videoType,
                     handleAudioUpload,
                     handleImageUpload,
                     setAspectRatio,