升级优化

app.py

@@ -1,4 +1,5 @@
 from flask import Flask, render_template, request, jsonify, send_file
+from werkzeug.exceptions import HTTPException
 import os
 import subprocess
 import uuid
@@ -6,16 +7,77 @@ import uuid
 app = Flask(__name__)
 app.config['UPLOAD_FOLDER'] = 'uploads'
 app.config['OUTPUT_FOLDER'] = 'outputs'
+app.config['MAX_CONTENT_LENGTH'] = 100 * 1024 * 1024  # 100MB limit to prevent server overload
 
 os.makedirs(app.config['UPLOAD_FOLDER'], exist_ok=True)
 os.makedirs(app.config['OUTPUT_FOLDER'], exist_ok=True)
 
+import shutil
+import time
+import traceback
+
+# Check if ffmpeg is installed
+FFMPEG_AVAILABLE = shutil.which('ffmpeg') is not None
+
+def cleanup_old_files():
+    """Cleanup files older than 1 hour"""
+    try:
+        now = time.time()
+        for folder in [app.config['UPLOAD_FOLDER'], app.config['OUTPUT_FOLDER']]:
+            if not os.path.exists(folder):
+                continue
+            for filename in os.listdir(folder):
+                filepath = os.path.join(folder, filename)
+                # Remove if older than 1 hour
+                if os.path.isfile(filepath) and os.path.getmtime(filepath) < now - 3600:
+                    try:
+                        os.remove(filepath)
+                    except Exception:
+                        pass
+    except Exception:
+        pass
+
+@app.errorhandler(500)
+def internal_error(error):
+    return jsonify({
+        "error": "Internal Server Error",
+        "details": str(error),
+        "trace": traceback.format_exc(),
+        "suggestion": "Please try again with a smaller file or different format."
+    }), 500
+
+@app.errorhandler(413)
+def request_entity_too_large(error):
+    return jsonify({
+        "error": "File Too Large",
+        "details": "The uploaded file exceeds the 100MB limit."
+    }), 413
+
+@app.errorhandler(Exception)
+def handle_exception(e):
+    # Pass through HTTP errors
+    if isinstance(e, HTTPException):
+        return e
+    
+    # Log the full traceback
+    print("Error occurred:")
+    traceback.print_exc()
+    
+    # Now you're handling non-HTTP exceptions only
+    return jsonify({
+        "error": "Unexpected Error",
+        "details": str(e),
+        "trace": traceback.format_exc() # Return trace to client for debugging
+    }), 500
+
 @app.route('/')
 def index():
-    return render_template('index.html')
+    return render_template('index.html', ffmpeg_available=FFMPEG_AVAILABLE)
 
 @app.route('/convert', methods=['POST'])
 def convert():
+    cleanup_old_files()
+    
     if 'video' not in request.files:
         return jsonify({"error": "No video file"}), 400
     
@@ -24,27 +86,43 @@ def convert():
     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:
+        video.save(input_path)
+        
+        if not FFMPEG_AVAILABLE:
+            # If ffmpeg is not available, return the webm file directly or error
+            # For better UX, we could just return the webm url if we saved it to outputs
+            # But the frontend expects a conversion. Let's return a specific error.
+            return jsonify({"error": "FFmpeg not installed on server", "fallback": True}), 503
+
+        # FFmpeg conversion
+        # -vf "pad=ceil(iw/2)*2:ceil(ih/2)*2" ensures dimensions are even for libx264
+        # -pix_fmt yuv420p is often required for broad compatibility
+        cmd = [
+            'ffmpeg', '-y', '-i', input_path,
+            '-c:v', 'libx264', '-preset', 'fast', '-crf', '23',
+            '-pix_fmt', 'yuv420p',
+            '-c:a', 'aac', '-b:a', '192k',
+            '-vf', 'pad=ceil(iw/2)*2:ceil(ih/2)*2', 
+            output_path
+        ]
+        
         subprocess.run(cmd, check=True, stdout=subprocess.PIPE, stderr=subprocess.PIPE)
         return jsonify({"url": f"/download/{filename}.mp4"})
+        
     except subprocess.CalledProcessError as e:
+        print(f"FFmpeg Error: {e.stderr.decode() if e.stderr else str(e)}")
         return jsonify({"error": "Conversion failed", "details": str(e)}), 500
+    except Exception as e:
+        print(f"General Error: {str(e)}")
+        return jsonify({"error": "Internal server error", "details": str(e)}), 500
     finally:
         # Cleanup input
         if os.path.exists(input_path):
-            os.remove(input_path)
+            try:
+                os.remove(input_path)
+            except:
+                pass
 
 @app.route('/download/<filename>')
 def download_file(filename):

templates/index.html

@@ -33,6 +33,13 @@
     </style>
 </head>
 <body>
+    <script>
+        // Pass server-side variables to client
+        window.SERVER_CONFIG = {
+            ffmpegAvailable: {{ 'true' if ffmpeg_available else 'false' }}
+        };
+    </script>
+    {% raw %}
     <div id="app" class="min-h-screen flex flex-col">
         <!-- Header -->
         <header class="bg-white shadow-sm z-10">
@@ -41,13 +48,18 @@
                     <div class="bg-gradient-to-r from-purple-600 to-indigo-600 text-white p-2 rounded-lg">
                         <i class="fa-solid fa-wave-square text-xl"></i>
                     </div>
-                    <h1 class="text-2xl font-bold text-gray-900 tracking-tight">Audiogram Studio</h1>
+                    <div>
+                        <h1 class="text-2xl font-bold text-gray-900 tracking-tight">Audiogram Studio</h1>
+                        <div v-if="!serverConfig.ffmpegAvailable" class="text-xs text-orange-500 font-medium">
+                            <i class="fa-solid fa-circle-info mr-1"></i>WebM 模式 (无 FFmpeg)
+                        </div>
+                    </div>
                 </div>
-                <div class="flex items-center space-x-4">
+                <!-- <div class="flex items-center space-x-4">
                     <a href="https://github.com/duqing26" target="_blank" class="text-gray-500 hover:text-gray-900 transition-colors">
                         <i class="fa-brands fa-github text-xl"></i>
                     </a>
-                </div>
+                </div> -->
             </div>
         </header>
 
@@ -72,6 +84,9 @@
                                 <div v-if="audioFile" class="text-indigo-600 font-medium truncate">
                                     <i class="fa-solid fa-music mr-2"></i> {{ audioFile.name }}
                                 </div>
+                                <div v-else-if="hasAudio" class="text-green-600 font-medium truncate">
+                                    <i class="fa-solid fa-music mr-2"></i> 示例音频 (10s)
+                                </div>
                                 <div v-else class="text-gray-500">
                                     <i class="fa-solid fa-file-audio text-2xl mb-2 block text-gray-400"></i>
                                     点击或拖拽上传音频
@@ -86,8 +101,11 @@
                         <div class="relative group">
                             <input type="file" accept="image/*" @change="handleImageUpload" class="absolute inset-0 w-full h-full opacity-0 cursor-pointer z-10">
                             <div class="border-2 border-dashed border-gray-300 rounded-lg p-4 text-center group-hover:border-indigo-500 transition-colors bg-gray-50">
-                                <div v-if="bgImageSrc" class="text-indigo-600 font-medium truncate">
-                                    <i class="fa-solid fa-image mr-2"></i> 已加载图片
+                                <div v-if="bgImageSrc && !bgImageSrc.startsWith('data:image')" class="text-indigo-600 font-medium truncate">
+                                    <i class="fa-solid fa-image mr-2"></i> 已加载自定义图片
+                                </div>
+                                <div v-else-if="bgImageSrc" class="text-green-600 font-medium truncate">
+                                    <i class="fa-solid fa-image mr-2"></i> 已加载默认背景
                                 </div>
                                 <div v-else class="text-gray-500">
                                     <i class="fa-regular fa-image text-2xl mb-2 block text-gray-400"></i>
@@ -96,6 +114,31 @@
                             </div>
                         </div>
                     </div>
+                    <!-- Watermark Upload -->
+                    <div class="mb-4">
+                        <label class="block text-sm font-medium text-gray-700 mb-2">水印/Logo (可选)</label>
+                        <div class="relative group">
+                            <input type="file" accept="image/*" @change="handleWatermarkUpload" class="absolute inset-0 w-full h-full opacity-0 cursor-pointer z-10">
+                            <div class="border border-dashed border-gray-300 rounded-lg p-2 text-center group-hover:border-indigo-500 transition-colors bg-gray-50 text-sm">
+                                <div v-if="watermarkSrc" class="text-indigo-600 truncate">
+                                    <i class="fa-solid fa-stamp mr-1"></i> 已加载 Logo
+                                </div>
+                                <div v-else class="text-gray-500">
+                                    <i class="fa-regular fa-id-badge mb-1 block"></i>
+                                    点击上传 Logo
+                                </div>
+                            </div>
+                        </div>
+                        <div v-if="watermarkSrc" class="mt-2 flex items-center justify-between">
+                            <label class="text-xs text-gray-500">位置</label>
+                            <select v-model="watermarkPos" class="text-xs border-gray-300 rounded p-1">
+                                <option value="top-left">左上</option>
+                                <option value="top-right">右上</option>
+                                <option value="bottom-left">左下</option>
+                                <option value="bottom-right">右下</option>
+                            </select>
+                        </div>
+                    </div>
                 </div>
 
                 <!-- 2. Settings -->
@@ -104,6 +147,18 @@
                         <i class="fa-solid fa-sliders mr-2 text-indigo-500"></i> 样式设置
                     </h2>
 
+                    <!-- Presets -->
+                    <div class="mb-4">
+                        <label class="block text-sm font-medium text-gray-700 mb-2">快速配色</label>
+                        <div class="flex space-x-2">
+                            <button @click="applyPalette('#ffffff')" class="w-6 h-6 rounded-full bg-white border border-gray-300 shadow-sm" title="White"></button>
+                            <button @click="applyPalette('#fbbf24')" class="w-6 h-6 rounded-full bg-yellow-400 shadow-sm" title="Amber"></button>
+                            <button @click="applyPalette('#f472b6')" class="w-6 h-6 rounded-full bg-pink-400 shadow-sm" title="Pink"></button>
+                            <button @click="applyPalette('#60a5fa')" class="w-6 h-6 rounded-full bg-blue-400 shadow-sm" title="Blue"></button>
+                            <button @click="applyPalette('#34d399')" class="w-6 h-6 rounded-full bg-emerald-400 shadow-sm" title="Green"></button>
+                        </div>
+                    </div>
+
                     <!-- Canvas Size -->
                     <div class="mb-4">
                         <label class="block text-sm font-medium text-gray-700 mb-2">画布比例</label>
@@ -127,9 +182,24 @@
                             <option value="bars">柱状图 (Bars)</option>
                             <option value="line">线条 (Line)</option>
                             <option value="circle">圆形 (Circle)</option>
+                            <option value="particles">粒子 (Particles)</option>
                         </select>
                     </div>
 
+                    <!-- Bar Settings -->
+                    <div class="mb-4" v-if="waveType === 'bars'">
+                        <div class="grid grid-cols-2 gap-4">
+                            <div>
+                                <label class="block text-xs text-gray-500 mb-1">宽度系数 ({{ barScale }})</label>
+                                <input type="range" v-model.number="barScale" min="0.1" max="10" step="0.1" class="w-full h-1 bg-gray-200 rounded-lg appearance-none cursor-pointer">
+                            </div>
+                            <div>
+                                <label class="block text-xs text-gray-500 mb-1">间距 ({{ barGap }}px)</label>
+                                <input type="range" v-model.number="barGap" min="0" max="20" step="1" class="w-full h-1 bg-gray-200 rounded-lg appearance-none cursor-pointer">
+                            </div>
+                        </div>
+                    </div>
+
                     <!-- Color Picker -->
                     <div class="mb-4">
                         <label class="block text-sm font-medium text-gray-700 mb-2">波形颜色</label>
@@ -137,6 +207,16 @@
                             <input type="color" v-model="waveColor" class="h-10 w-full rounded cursor-pointer border-0 p-0">
                         </div>
                     </div>
+
+                    <!-- Text Overlay -->
+                    <div class="mb-4">
+                        <label class="block text-sm font-medium text-gray-700 mb-2">标题文字</label>
+                        <input type="text" v-model="titleText" placeholder="输入标题..." class="w-full border-gray-300 rounded-md shadow-sm focus:border-indigo-500 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 p-2 border mb-2">
+                        <div v-if="titleText">
+                            <label class="block text-xs text-gray-500 mb-1">字体大小 ({{ titleFontSize }}px)</label>
+                            <input type="range" v-model.number="titleFontSize" min="20" max="120" step="1" class="w-full h-1 bg-gray-200 rounded-lg appearance-none cursor-pointer">
+                        </div>
+                    </div>
                     
                     <!-- Position -->
                      <div class="mb-4">
@@ -152,14 +232,14 @@
                     </h2>
                     
                     <div class="space-y-3">
-                         <button @click="togglePlay" :disabled="!audioFile" 
+                         <button @click="togglePlay" :disabled="!hasAudio" 
                             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"
                             :class="isPlaying ? 'bg-yellow-500 hover:bg-yellow-600 text-white' : 'bg-green-500 hover:bg-green-600 text-white'">
                             <i class="fa-solid" :class="isPlaying ? 'fa-pause' : 'fa-play'"></i>
                             <span>{{ isPlaying ? '暂停预览' : '播放预览' }}</span>
                         </button>
 
-                        <button @click="startRecording" :disabled="!audioFile || isRecording || isConverting" 
+                        <button @click="startRecording" :disabled="!hasAudio || 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' : (isConverting ? 'fa-cog fa-spin' : 'fa-video')"></i>
                             <span>{{ isRecording ? '正在录制...' : (isConverting ? '正在转码为 MP4...' : '开始生成视频') }}</span>
@@ -214,6 +294,7 @@
         </div>
 
     </div>
+    {% endraw %}
 
     <script>
         const { createApp, ref, onMounted, watch, computed } = Vue;
@@ -222,6 +303,7 @@
             setup() {
                 const canvas = ref(null);
                 const audioFile = ref(null);
+                const hasAudio = ref(false); // Track if audio is loaded (file or demo)
                 const bgImageSrc = ref(null);
                 const isPlaying = ref(false);
                 const isRecording = ref(false);
@@ -229,6 +311,7 @@
                 const showResultModal = ref(false);
                 const videoUrl = ref('');
                 const videoType = ref('webm');
+                const serverConfig = ref(window.SERVER_CONFIG || { ffmpegAvailable: false });
                 
                 // Settings
                 const aspectRatio = ref(1); // 1:1 default
@@ -236,6 +319,12 @@
                 const waveType = ref('bars');
                 const waveColor = ref('#ffffff');
                 const waveY = ref(80); // Y position percentage
+                const barScale = ref(2.5);
+                const barGap = ref(1);
+                const titleText = ref('');
+                const titleFontSize = ref(40);
+                const watermarkSrc = ref(null);
+                const watermarkPos = ref('top-right');
                 
                 // Audio Context
                 let audioCtx = null;
@@ -266,9 +355,10 @@
                 // Init
                 onMounted(() => {
                     drawCanvas();
+                    loadDemo();
                 });
 
-                watch([aspectRatio, waveType, waveColor, waveY, bgImageSrc], () => {
+                watch([aspectRatio, waveType, waveColor, waveY, barScale, barGap, bgImageSrc, titleText, titleFontSize, watermarkSrc, watermarkPos], () => {
                     if (!isPlaying.value) drawCanvas();
                 });
 
@@ -279,16 +369,63 @@
                         if (!isPlaying.value) drawCanvas();
                     }, 50);
                 }
+                
+                function initAudioCtx() {
+                    if (!audioCtx) {
+                        audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+                    }
+                }
+
+                function loadDemo() {
+                    initAudioCtx();
+                    
+                    // Generate a demo sine wave sweep
+                    const sampleRate = audioCtx.sampleRate;
+                    const demoDuration = 10; // 10 seconds
+                    const frameCount = sampleRate * demoDuration;
+                    const buffer = audioCtx.createBuffer(1, frameCount, sampleRate);
+                    const data = buffer.getChannelData(0);
+                    
+                    for (let i = 0; i < frameCount; i++) {
+                        // A simple melody or sweep
+                        // Sweep from 200Hz to 800Hz
+                        const t = i / sampleRate;
+                        const freq = 200 + (t / demoDuration) * 600;
+                        data[i] = Math.sin(t * freq * Math.PI * 2) * 0.5 * (1 - t/demoDuration);
+                    }
+                    
+                    audioBuffer = buffer;
+                    duration.value = demoDuration;
+                    hasAudio.value = true;
+                    
+                    // Demo Background - Create a gradient image
+                    const tempCanvas = document.createElement('canvas');
+                    tempCanvas.width = 600;
+                    tempCanvas.height = 600;
+                    const tCtx = tempCanvas.getContext('2d');
+                    const grd = tCtx.createLinearGradient(0, 0, 600, 600);
+                    grd.addColorStop(0, '#1e3a8a');
+                    grd.addColorStop(1, '#db2777');
+                    tCtx.fillStyle = grd;
+                    tCtx.fillRect(0,0,600,600);
+                    
+                    // Add some text
+                    tCtx.fillStyle = 'rgba(255,255,255,0.2)';
+                    tCtx.font = 'bold 80px sans-serif';
+                    tCtx.fillText("DEMO", 180, 320);
+                    
+                    bgImageSrc.value = tempCanvas.toDataURL();
+                    
+                    // Update View
+                    setTimeout(drawCanvas, 100);
+                }
 
                 function handleAudioUpload(event) {
                     const file = event.target.files[0];
                     if (!file) return;
                     audioFile.value = file;
                     
-                    // Create Audio Context if not exists
-                    if (!audioCtx) {
-                        audioCtx = new (window.AudioContext || window.webkitAudioContext)();
-                    }
+                    initAudioCtx();
 
                     // Decode audio data
                     const reader = new FileReader();
@@ -296,6 +433,7 @@
                         audioCtx.decodeAudioData(e.target.result, function(buffer) {
                             audioBuffer = buffer;
                             duration.value = buffer.duration;
+                            hasAudio.value = true;
                             drawCanvas(); // Redraw to clear previous state
                         });
                     };
@@ -313,6 +451,21 @@
                     reader.readAsDataURL(file);
                 }
 
+                function handleWatermarkUpload(event) {
+                    const file = event.target.files[0];
+                    if (!file) return;
+                    
+                    const reader = new FileReader();
+                    reader.onload = function(e) {
+                        watermarkSrc.value = e.target.result;
+                    };
+                    reader.readAsDataURL(file);
+                }
+                
+                function applyPalette(color) {
+                    waveColor.value = color;
+                }
+
                 function formatTime(seconds) {
                     const m = Math.floor(seconds / 60);
                     const s = Math.floor(seconds % 60);
@@ -445,6 +598,38 @@
                         ctx.stroke();
                         ctx.globalAlpha = 1.0;
                     }
+                    
+                    // 3. Title Text
+                    if (titleText.value) {
+                        ctx.fillStyle = '#ffffff';
+                        ctx.font = 'bold ' + titleFontSize.value + 'px sans-serif';
+                        ctx.textAlign = 'center';
+                        ctx.shadowColor = 'rgba(0,0,0,0.5)';
+                        ctx.shadowBlur = 10;
+                        ctx.fillText(titleText.value, w / 2, 100);
+                        ctx.shadowBlur = 0;
+                    }
+
+                    // 4. Watermark
+                    if (watermarkSrc.value) {
+                        const logo = new Image();
+                        logo.src = watermarkSrc.value;
+                        // Assuming loaded since local dataURL
+                        const logoSize = Math.min(w, h) * 0.15; // 15% of min dimension
+                        const padding = 20;
+                        
+                        let lx = padding;
+                        let ly = padding;
+                        
+                        if (watermarkPos.value.includes('right')) {
+                            lx = w - logoSize - padding;
+                        }
+                        if (watermarkPos.value.includes('bottom')) {
+                            ly = h - logoSize - padding;
+                        }
+                        
+                        ctx.drawImage(logo, lx, ly, logoSize, logoSize);
+                    }
                 }
 
                 function drawWaveform(ctx, w, h, data) {
@@ -457,14 +642,14 @@
                     const usableLength = Math.floor(bufferLength * 0.7); 
                     
                     if (waveType.value === 'bars') {
-                        const barWidth = (w / usableLength) * 2.5;
+                        const barWidth = (w / usableLength) * barScale.value;
                         let x = 0;
                         for(let i = 0; i < usableLength; i++) {
                             const v = data[i] / 255.0;
                             const barHeight = v * h * 0.4; // Max height 40% of canvas
                             
                             ctx.fillRect(x, centerY - barHeight/2, barWidth, barHeight);
-                            x += barWidth + 1;
+                            x += barWidth + barGap.value;
                         }
                     } else if (waveType.value === 'line') {
                         ctx.lineWidth = 3;
@@ -502,6 +687,26 @@
                             ctx.lineTo(x2, y2);
                         }
                         ctx.stroke();
+                    } else if (waveType.value === 'particles') {
+                        const centerX = w / 2;
+                        const centerY = h * (waveY.value / 100);
+                        
+                        for(let i = 0; i < usableLength; i += 2) {
+                            const v = data[i];
+                            if (v < 10) continue; // Skip silence
+                            
+                            const angle = (i / usableLength) * Math.PI * 2;
+                            const radius = v * (h * 0.005);
+                            const distance = 50 + (v * 0.5);
+                            
+                            const x = centerX + Math.cos(angle) * distance;
+                            const y = centerY + Math.sin(angle) * distance;
+                            
+                            ctx.beginPath();
+                            ctx.arc(x, y, radius, 0, Math.PI * 2);
+                            ctx.fillStyle = waveColor.value;
+                            ctx.fill();
+                        }
                     }
                 }
 
@@ -562,10 +767,20 @@
                                     videoUrl.value = data.url;
                                     videoType.value = 'mp4';
                                 } else {
-                                    // Fallback to webm if backend fails
-                                    console.error("Conversion failed, falling back to WebM");
+                                    // Fallback logic
+                                    const errorData = await response.json().catch(() => ({}));
+                                    console.warn("Server returned error:", response.status, errorData);
+                                    
                                     videoUrl.value = URL.createObjectURL(blob);
                                     videoType.value = 'webm';
+                                    
+                                    if (response.status === 503 && errorData.fallback) {
+                                        // FFmpeg missing but handled gracefully
+                                        // No alert needed, just show result
+                                    } else {
+                                        // Real error
+                                        console.error("Conversion failed, using WebM fallback");
+                                    }
                                 }
                             } catch (e) {
                                 console.error("Network error, falling back to WebM", e);
@@ -613,8 +828,14 @@
                     videoUrl,
                     isConverting,
                     videoType,
+                    serverConfig,
+                    titleText,
+                    watermarkSrc,
+                    watermarkPos,
                     handleAudioUpload,
                     handleImageUpload,
+                    handleWatermarkUpload,
+                    applyPalette,
                     setAspectRatio,
                     togglePlay,
                     startRecording,