Upload 11 files

Dockerfile

@@ -1,31 +1,31 @@
-# Use an official Python runtime as a parent image
-FROM python:3.9-slim
-
-# Create a non-root user
-RUN useradd -m -u 1000 user
-
-# Switch to the new user
-USER user
-
-# Set home to the user's home directory and update PATH
-ENV HOME=/home/user \
-	PATH=/home/user/.local/bin:$PATH
-
-# Set the working directory
-WORKDIR $HOME/app
-
-# Install dependencies
-COPY --chown=user backend/requirements.txt .
-RUN pip install --no-cache-dir -r requirements.txt
-
-# Copy the application code
-COPY --chown=user . .
-
-# Set the working directory to the backend
-WORKDIR $HOME/app/backend
-
-# Expose the port the app runs on
-EXPOSE 7860
-
-# Run the application
+# Use an official Python runtime as a parent image
+FROM python:3.9-slim
+
+# Create a non-root user
+RUN useradd -m -u 1000 user
+
+# Switch to the new user
+USER user
+
+# Set home to the user's home directory and update PATH
+ENV HOME=/home/user \
+	PATH=/home/user/.local/bin:$PATH
+
+# Set the working directory
+WORKDIR $HOME/app
+
+# Install dependencies
+COPY --chown=user backend/requirements.txt .
+RUN pip install --no-cache-dir -r requirements.txt
+
+# Copy the application code
+COPY --chown=user . .
+
+# Set the working directory to the backend
+WORKDIR $HOME/app/backend
+
+# Expose the port the app runs on
+EXPOSE 7860
+
+# Run the application
 CMD ["uvicorn", "main:app", "--host", "0.0.0.0", "--port", "7860"]

README.md

@@ -1,20 +1,20 @@
----
-title: VEO3 Video Generator
-emoji: 📹
-colorFrom: blue
-colorTo: green
-sdk: docker
-app_port: 7860
----
-
-# VEO3 Video Generator
-
-This is a simple web application to generate videos using Google's VEO3 models via a Vertex Express Mode Key loophole.
-
-## How to use
-
-1.  Enter your Vertex Express Key.
-2.  Enter a text prompt.
-3.  Optionally, upload an image or video.
-4.  Select the desired parameters.
+---
+title: VEO3 Video Generator
+emoji: 📹
+colorFrom: blue
+colorTo: green
+sdk: docker
+app_port: 7860
+---
+
+# VEO3 Video Generator
+
+This is a simple web application to generate videos using Google's VEO3 models via a Vertex Express Mode Key loophole.
+
+## How to use
+
+1.  Enter your Vertex Express Key.
+2.  Enter a text prompt.
+3.  Optionally, upload an image or video.
+4.  Select the desired parameters.
 5.  Click "Generate Video".

backend/requirements.txt

@@ -1,6 +1,7 @@
-fastapi
-uvicorn[standard]
-python-multipart
-requests
-aiohttp
-python-dotenv
+fastapi
+uvicorn[standard]
+python-multipart
+requests
+aiohttp
+python-dotenv
+Pillow

frontend/app.js

@@ -2,6 +2,7 @@ document.addEventListener("DOMContentLoaded", () => {
     // --- DOM Element Selection ---
     const generateBtn = document.getElementById("generate-btn");
     const saveVideoBtn = document.getElementById("save-video-btn");
+    const soundToggleBtn = document.getElementById("sound-toggle-btn");
     const loader = document.getElementById("loader");
     const errorContainer = document.getElementById("error-container");
     const placeholder = document.querySelector(".video-container .placeholder");
@@ -51,9 +52,78 @@ document.addEventListener("DOMContentLoaded", () => {
     let savedVideos = []; // To track URLs of saved videos
     const SAVED_PROMPTS_KEY = 'veoGeneratorSavedPrompts';
     const SAVED_KEYS_KEY = 'veoGeneratorSavedKeys';
+    const SOUND_SETTINGS_KEY = 'veoGeneratorSoundEnabled';
+    let soundEnabled = false; // Default to disabled
 
-   const PRESET_KEYS = [
-   ];
+   const PRESET_KEYS = [];
+
+    // --- Notification Sound ---
+    function playNotificationSound() {
+        if (!soundEnabled) return; // 如果声音被禁用则直接返回
+        
+        try {
+            // 完成音效 - 上升琶音 (C5→E5→G5→C6)
+            const audioContext = new (window.AudioContext || window.webkitAudioContext)();
+            const notes = [523.25, 659.25, 783.99, 1046.50]; // C5, E5, G5, C6
+            
+            notes.forEach((frequency, index) => {
+                setTimeout(() => {
+                    const oscillator = audioContext.createOscillator();
+                    const gainNode = audioContext.createGain();
+                    
+                    oscillator.connect(gainNode);
+                    gainNode.connect(audioContext.destination);
+                    
+                    oscillator.frequency.setValueAtTime(frequency, audioContext.currentTime);
+                    oscillator.type = 'sine';
+                    
+                    // 最大音量设置
+                    gainNode.gain.setValueAtTime(0, audioContext.currentTime);
+                    gainNode.gain.linearRampToValueAtTime(1.0, audioContext.currentTime + 0.01);
+                    gainNode.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + 0.3);
+                    
+                    oscillator.start(audioContext.currentTime);
+                    oscillator.stop(audioContext.currentTime + 0.3);
+                }, index * 100);
+            });
+        } catch (error) {
+            console.log('无法播放提示音:', error);
+        }
+    }
+
+    // --- Sound Toggle Logic ---
+    function updateSoundButtonState() {
+        if (soundEnabled) {
+            soundToggleBtn.classList.remove('disabled');
+            soundToggleBtn.innerHTML = feather.icons['volume-2'].toSvg();
+            soundToggleBtn.title = "提示音已开启，点击关闭";
+        } else {
+            soundToggleBtn.classList.add('disabled');
+            soundToggleBtn.innerHTML = feather.icons['volume-x'].toSvg();
+            soundToggleBtn.title = "提示音已关闭，点击开启";
+        }
+    }
+
+    function toggleSound() {
+        soundEnabled = !soundEnabled;
+        localStorage.setItem(SOUND_SETTINGS_KEY, JSON.stringify(soundEnabled));
+        updateSoundButtonState();
+        
+        // 如果开启了声音，播放一次提示音作为反馈
+        if (soundEnabled) {
+            playNotificationSound();
+        }
+    }
+
+    function loadSoundSettings() {
+        const savedSoundSettings = localStorage.getItem(SOUND_SETTINGS_KEY);
+        if (savedSoundSettings !== null) {
+            soundEnabled = JSON.parse(savedSoundSettings);
+        }
+        updateSoundButtonState();
+    }
+
+    soundToggleBtn.addEventListener('click', toggleSound);
  
     // --- Functions ---
 
@@ -344,6 +414,12 @@ document.addEventListener("DOMContentLoaded", () => {
             // Update UI state based on loaded settings
             updateImageProcessingState();
             updateSaveButtonState();
+        } else {
+           // If no settings, load the default preset key
+           if (PRESET_KEYS.length > 0) {
+               apiKeyInput.value = PRESET_KEYS[0].value;
+               saveSettings(); // Save this default state
+           }
         }
        updateSaveKeyButtonState(); // Also update key button state on load
     }
@@ -658,6 +734,9 @@ document.addEventListener("DOMContentLoaded", () => {
                     errorContainer.textContent = "所有视频生成请求均失败。";
                     errorContainer.classList.remove("hidden");
                     resetCarousel();
+                } else {
+                    // At least one video was generated successfully
+                    playNotificationSound();
                 }
                 loader.classList.add("hidden");
             });
@@ -688,6 +767,7 @@ document.addEventListener("DOMContentLoaded", () => {
                 if (videoItems.length > 0) {
                     currentIndex = 0;
                     updateCarousel();
+                    playNotificationSound(); // Play notification sound for successful generation
                 } else {
                     resetCarousel(); // No videos were successfully added
                 }
@@ -821,6 +901,7 @@ document.addEventListener("DOMContentLoaded", () => {
 
     // --- Initial Load ---
     loadSettings();
+    loadSoundSettings(); // Load sound settings
     // Set initial state for image processing UI
     updateImageProcessingState();
     updateSaveButtonState();

frontend/index.html

@@ -13,6 +13,9 @@
         <header class="app-header">
             <h1>VEO Video Generator</h1>
             <div class="header-actions">
+                <button id="sound-toggle-btn" class="sound-toggle-button" title="提示音开关">
+                    <i data-feather="volume-2"></i>
+                </button>
                 <button id="save-video-btn" class="save-button" disabled>
                     <i data-feather="save"></i>
                     <span>保存此视频到服务器</span>

frontend/style.css

@@ -50,6 +50,7 @@ body {
 .header-actions {
     display: flex;
     align-items: center;
+    gap: 10px;
 }
 
 .save-button {
@@ -65,7 +66,6 @@ body {
     display: flex;
     align-items: center;
     gap: 8px;
-    margin-right: 10px; /* Add some space between buttons */
 }
 
 .save-button:not(:disabled) {
@@ -103,6 +103,34 @@ body {
     background-color: var(--accent-color-hover);
 }
 
+.sound-toggle-button {
+    background-color: #ffc107; /* 黄色 */
+    color: #212529;
+    border: none;
+    padding: 10px;
+    border-radius: 6px;
+    cursor: pointer;
+    width: 40px;
+    height: 40px;
+    transition: background-color 0.2s ease, opacity 0.2s ease;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.sound-toggle-button:hover {
+    background-color: #e0a800;
+}
+
+.sound-toggle-button.disabled {
+    background-color: #6c757d;
+    opacity: 0.6;
+}
+
+.sound-toggle-button.disabled:hover {
+    background-color: #5a6268;
+}
+
 .main-content {
     display: grid;
     grid-template-columns: 50fr 50fr;

sound-test.html

@@ -0,0 +1,279 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Web Audio API 声音测试</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+            background: #f5f5f5;
+        }
+        .container {
+            background: white;
+            padding: 30px;
+            border-radius: 10px;
+            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+        }
+        h1 {
+            color: #333;
+            text-align: center;
+            margin-bottom: 30px;
+        }
+        .sound-group {
+            margin-bottom: 25px;
+            padding: 15px;
+            border: 1px solid #ddd;
+            border-radius: 8px;
+            background: #fafafa;
+        }
+        .sound-group h3 {
+            margin-top: 0;
+            color: #555;
+        }
+        button {
+            background: #007bff;
+            color: white;
+            border: none;
+            padding: 10px 20px;
+            margin: 5px;
+            border-radius: 5px;
+            cursor: pointer;
+            font-size: 14px;
+        }
+        button:hover {
+            background: #0056b3;
+        }
+        button:active {
+            transform: translateY(1px);
+        }
+        .params {
+            margin: 10px 0;
+            font-size: 12px;
+            color: #666;
+        }
+        .custom-controls {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+            gap: 10px;
+            margin: 15px 0;
+        }
+        .control-group {
+            display: flex;
+            flex-direction: column;
+        }
+        label {
+            font-size: 12px;
+            color: #666;
+            margin-bottom: 5px;
+        }
+        input[type="range"] {
+            width: 100%;
+        }
+        input[type="number"] {
+            width: 80px;
+            padding: 5px;
+            border: 1px solid #ccc;
+            border-radius: 3px;
+        }
+        .value-display {
+            font-size: 12px;
+            color: #333;
+            font-weight: bold;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <h1>🔔 Web Audio API 声音测试</h1>
+        
+        <!-- 预设音效 -->
+        <div class="sound-group">
+            <h3>📢 经典提示音</h3>
+            <button onclick="playSound('ding')">系统叮声 (800Hz)</button>
+            <button onclick="playSound('beep')">电子哔声 (1000Hz)</button>
+            <button onclick="playSound('boop')">温柔提示 (600Hz)</button>
+            <button onclick="playSound('chime')">悦耳铃声 (双音)</button>
+        </div>
+
+        <div class="sound-group">
+            <h3>🎵 不同波形</h3>
+            <button onclick="playWaveform('sine', 800)">正弦波 (Sine)</button>
+            <button onclick="playWaveform('square', 800)">方波 (Square)</button>
+            <button onclick="playWaveform('triangle', 800)">三角波 (Triangle)</button>
+            <button onclick="playWaveform('sawtooth', 800)">锯齿波 (Sawtooth)</button>
+        </div>
+
+        <div class="sound-group">
+            <h3>🎶 音符音效</h3>
+            <button onclick="playNote(523.25)">C5 (Do)</button>
+            <button onclick="playNote(587.33)">D5 (Re)</button>
+            <button onclick="playNote(659.25)">E5 (Mi)</button>
+            <button onclick="playNote(698.46)">F5 (Fa)</button>
+            <button onclick="playNote(783.99)">G5 (Sol)</button>
+        </div>
+
+        <div class="sound-group">
+            <h3>🔧 自定义音效</h3>
+            <div class="custom-controls">
+                <div class="control-group">
+                    <label>频率 (Hz)</label>
+                    <input type="range" id="frequency" min="200" max="2000" value="800" oninput="updateValue('frequency')">
+                    <span class="value-display" id="frequency-value">800</span>
+                </div>
+                <div class="control-group">
+                    <label>音量 (0-1)</label>
+                    <input type="range" id="volume" min="0" max="1" step="0.1" value="0.3" oninput="updateValue('volume')">
+                    <span class="value-display" id="volume-value">0.3</span>
+                </div>
+                <div class="control-group">
+                    <label>持续时间 (秒)</label>
+                    <input type="range" id="duration" min="0.1" max="2" step="0.1" value="0.5" oninput="updateValue('duration')">
+                    <span class="value-display" id="duration-value">0.5</span>
+                </div>
+                <div class="control-group">
+                    <label>波形类型</label>
+                    <select id="waveform">
+                        <option value="sine">正弦波</option>
+                        <option value="square">方波</option>
+                        <option value="triangle">三角波</option>
+                        <option value="sawtooth">锯齿波</option>
+                    </select>
+                </div>
+            </div>
+            <button onclick="playCustomSound()">🎵 播放自定义音效</button>
+        </div>
+
+        <div class="sound-group">
+            <h3>🚨 特殊音效</h3>
+            <button onclick="playComplexSound('success')">✅ 成功音效</button>
+            <button onclick="playComplexSound('error')">❌ 错误音效</button>
+            <button onclick="playComplexSound('notification')">🔔 通知音效</button>
+            <button onclick="playComplexSound('complete')">🎉 完成音效</button>
+        </div>
+    </div>
+
+    <script>
+        // 更新滑块显示值
+        function updateValue(id) {
+            const slider = document.getElementById(id);
+            const display = document.getElementById(id + '-value');
+            display.textContent = slider.value;
+        }
+
+        // 基础音效播放函数
+        function playTone(frequency, duration = 0.5, volume = 0.3, waveType = 'sine') {
+            try {
+                const audioContext = new (window.AudioContext || window.webkitAudioContext)();
+                const oscillator = audioContext.createOscillator();
+                const gainNode = audioContext.createGain();
+                
+                oscillator.connect(gainNode);
+                gainNode.connect(audioContext.destination);
+                
+                oscillator.frequency.setValueAtTime(frequency, audioContext.currentTime);
+                oscillator.type = waveType;
+                
+                // 音量渐入渐出
+                gainNode.gain.setValueAtTime(0, audioContext.currentTime);
+                gainNode.gain.linearRampToValueAtTime(volume, audioContext.currentTime + 0.01);
+                gainNode.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + duration);
+                
+                oscillator.start(audioContext.currentTime);
+                oscillator.stop(audioContext.currentTime + duration);
+            } catch (error) {
+                console.log('播放失败:', error);
+                alert('您的浏览器不支持 Web Audio API');
+            }
+        }
+
+        // 预设音效
+        function playSound(type) {
+            switch(type) {
+                case 'ding':
+                    playTone(800, 0.5, 0.3, 'sine');
+                    break;
+                case 'beep':
+                    playTone(1000, 0.3, 0.4, 'square');
+                    break;
+                case 'boop':
+                    playTone(600, 0.4, 0.25, 'sine');
+                    break;
+                case 'chime':
+                    // 双音和弦
+                    playTone(523.25, 0.8, 0.2, 'sine'); // C5
+                    setTimeout(() => playTone(659.25, 0.6, 0.15, 'sine'), 100); // E5
+                    break;
+            }
+        }
+
+        // 不同波形测试
+        function playWaveform(waveType, frequency) {
+            playTone(frequency, 0.6, 0.3, waveType);
+        }
+
+        // 音符播放
+        function playNote(frequency) {
+            playTone(frequency, 0.8, 0.25, 'sine');
+        }
+
+        // 自定义音效
+        function playCustomSound() {
+            const frequency = document.getElementById('frequency').value;
+            const volume = document.getElementById('volume').value;
+            const duration = document.getElementById('duration').value;
+            const waveform = document.getElementById('waveform').value;
+            
+            playTone(parseFloat(frequency), parseFloat(duration), parseFloat(volume), waveform);
+        }
+
+        // 复杂音效
+        function playComplexSound(type) {
+            try {
+                const audioContext = new (window.AudioContext || window.webkitAudioContext)();
+                
+                switch(type) {
+                    case 'success':
+                        // 上升三和弦
+                        playTone(523.25, 0.2, 0.2, 'sine'); // C5
+                        setTimeout(() => playTone(659.25, 0.2, 0.2, 'sine'), 150); // E5
+                        setTimeout(() => playTone(783.99, 0.4, 0.25, 'sine'), 300); // G5
+                        break;
+                        
+                    case 'error':
+                        // 下降的不和谐音
+                        playTone(400, 0.3, 0.3, 'square');
+                        setTimeout(() => playTone(300, 0.4, 0.25, 'square'), 200);
+                        break;
+                        
+                    case 'notification':
+                        // 快速双击
+                        playTone(800, 0.15, 0.3, 'sine');
+                        setTimeout(() => playTone(800, 0.15, 0.3, 'sine'), 200);
+                        break;
+                        
+                    case 'complete':
+                        // 完成音效 - 上升琶音
+                        const notes = [523.25, 659.25, 783.99, 1046.50]; // C5, E5, G5, C6
+                        notes.forEach((note, index) => {
+                            setTimeout(() => playTone(note, 0.3, 0.2, 'sine'), index * 100);
+                        });
+                        break;
+                }
+            } catch (error) {
+                console.log('播放复杂音效失败:', error);
+            }
+        }
+
+        // 初始化显示值
+        document.addEventListener('DOMContentLoaded', () => {
+            updateValue('frequency');
+            updateValue('volume');
+            updateValue('duration');
+        });
+    </script>
+</body>
+</html>