Spaces:
Running
Running
| <html lang="zh-CN"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>VEO Video Generator</title> | |
| <link rel="stylesheet" href="style.css"> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet"> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| </head> | |
| <body> | |
| <div class="app-container"> | |
| <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> | |
| </button> | |
| <button id="generate-btn" class="generate-button"> | |
| <i data-feather="play"></i> | |
| <span>生成视频</span> | |
| </button> | |
| </div> | |
| </header> | |
| <main class="main-content" id="video-form"> | |
| <div class="settings-panel-left"> | |
| <div class="panel"> | |
| <h2 class="panel-title">核心参数</h2> | |
| <div class="form-group"> | |
| <label for="api-key">Vertex Key</label> | |
| <div class="key-input-container"> | |
| <input type="password" id="api-key" name="api-key" class="form-input" placeholder="选择或输入您的 Key"> | |
| <div class="key-actions"> | |
| <button id="save-key-btn" class="icon-btn" title="保存当前 Key"> | |
| <i data-feather="plus-circle"></i> | |
| </button> | |
| <div class="saved-keys-dropdown"> | |
| <button id="saved-keys-toggle" class="icon-btn" title="查看已保存的 Key"> | |
| <i data-feather="key"></i> | |
| </button> | |
| <div id="saved-keys-list" class="saved-prompts-list hidden"> | |
| <!-- Saved keys will be dynamically inserted here --> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="form-group"> | |
| <div class="prompt-header"> | |
| <label for="prompt">正向提示词 (Prompt)</label> | |
| <div class="prompt-actions"> | |
| <button id="save-prompt-btn" class="icon-btn" title="保存当前提示词"> | |
| <i data-feather="plus-circle"></i> | |
| </button> | |
| <div class="saved-prompts-dropdown"> | |
| <button id="saved-prompts-toggle" class="icon-btn" title="查看已保存的提示词"> | |
| <i data-feather="bookmark"></i> | |
| </button> | |
| <div id="saved-prompts-list" class="saved-prompts-list hidden"> | |
| <!-- Saved prompts will be dynamically inserted here --> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <textarea id="prompt" name="prompt" rows="5" class="form-input" placeholder="例如：一只穿着宇航服的猫在月球上行走"></textarea> | |
| </div> | |
| <div class="form-group"> | |
| <label for="negative-prompt">反向提示词 (Negative Prompt)</label> | |
| <textarea id="negative-prompt" name="negative-prompt" rows="3" class="form-input" placeholder="例如：模糊, 低质量, 水印"></textarea> | |
| </div> | |
| </div> | |
| <div class="panel"> | |
| <h2 class="panel-title">模型与画面</h2> | |
| <div class="grid-2-col" style="grid-template-columns: repeat(2, 1fr); align-items: end;"> | |
| <div class="form-group"> | |
| <label for="model">模型 (Model)</label> | |
| <select id="model" name="model" class="form-select"> | |
| <option value="veo-3.0-generate-preview" selected>veo-3.0-generate-preview</option> | |
| <option value="veo-3.0-fast-generate-preview">veo-3.0-fast-generate-preview</option> | |
| <option value="veo-2.0-generate-001">veo-2.0-generate-001</option> | |
| <option value="veo-3.0-generate-001">veo-3.0-generate-001</option> | |
| <option value="veo-3.0-fast-generate-001">veo-3.0-fast-generate-001</option> | |
| </select> | |
| </div> | |
| <div class="form-group"> | |
| <label for="resolution">分辨率 (Resolution)</label> | |
| <select id="resolution" name="resolution" class="form-select"> | |
| <option value="1080p">1080p</option> | |
| <option value="720p">720p</option> | |
| </select> | |
| </div> | |
| <div class="form-group"> | |
| <label for="aspect-ratio">宽高比 (Aspect Ratio)</label> | |
| <select id="aspect-ratio" name="aspect-ratio" class="form-select"> | |
| <option value="16:9">16:9 (横屏)</option> | |
| <option value="9:16">9:16 (竖屏)</option> | |
| </select> | |
| </div> | |
| <div class="form-group"> | |
| <label for="image-process-mode">图片处理 (16:9)</label> | |
| <select id="image-process-mode" name="image-process-mode" class="form-select"> | |
| <option value="none" selected>不作处理</option> | |
| <option value="fill">颜色填充</option> | |
| <option value="stretch_to_fill">拉伸填充 (仅放大)</option> | |
| <option value="compress_to_fit">压缩填充 (仅缩小)</option> | |
| </select> | |
| </div> | |
| <div class="form-group"> | |
| <label for="person-generation">人物生成</label> | |
| <select id="person-generation" name="person-generation" class="form-select"> | |
| <option value="allow_all">允许所有</option> | |
| <option value="allow_adult">仅成人</option> | |
| <option value="dont_allow">不允许</option> | |
| </select> | |
| </div> | |
| <div class="form-group" id="image-fill-color-group"> | |
| <label for="image-fill-color">填充颜色</label> | |
| <div class="color-picker-wrapper"> | |
| <input type="color" id="image-fill-color-picker" value="#000000"> | |
| <input type="text" id="image-fill-color" name="image-fill-color" class="form-input color-input" value="#000000"> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="panel"> | |
| <h2 class="panel-title">高级设置</h2> | |
| <div class="grid-3-col"> | |
| <div class="form-group"> | |
| <label for="seed">随机种子 (Seed)</label> | |
| <input type="number" id="seed" name="seed" class="form-input" placeholder="留空则随机" min="0" max="4294967295"> | |
| </div> | |
| <div class="form-group"> | |
| <label for="sample-count">单个线程生成数量</label> | |
| <input type="number" id="sample-count" name="sample-count" class="form-input" value="1" min="1" max="4"> | |
| </div> | |
| <div class="form-group"> | |
| <label for="duration">时长 (秒)</label> | |
| <input type="number" id="duration" name="duration" class="form-input" value="8" min="5" max="8"> | |
| </div> | |
| </div> | |
| <div class="grid-3-col" style="margin-top: 16px;"> | |
| <div class="form-group switch-group"> | |
| <label for="generate-audio">生成音频</label> | |
| <label class="switch"> | |
| <input type="checkbox" id="generate-audio" name="generate-audio" checked> | |
| <span class="switch-slider"></span> | |
| </label> | |
| </div> | |
| <div class="form-group switch-group"> | |
| <label for="thread-count">线程数</label> | |
| <input type="number" id="thread-count" name="thread-count" class="form-input" value="1" min="1" step="1"> | |
| </div> | |
| <div class="form-group switch-group"> | |
| <label for="enhance-prompt">增强提示词</label> | |
| <label class="switch"> | |
| <input type="checkbox" id="enhance-prompt" name="enhance-prompt" checked> | |
| <span class="switch-slider"></span> | |
| </label> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="content-area"> | |
| <div class="video-panel"> | |
| <div id="video-container" class="video-container"> | |
| <div id="video-carousel" class="carousel"> | |
| <!-- Dynamically generated video items will go here --> | |
| </div> | |
| <div id="loader" class="loader hidden"> | |
| <div class="spinner"></div> | |
| <p>正在生成视频...</p> | |
| </div> | |
| <div id="placeholder" class="placeholder"> | |
| <i data-feather="film" style="width: 64px; height: 64px;"></i> | |
| <p>生成的视频将在此处显示</p> | |
| </div> | |
| <button id="prev-btn" class="carousel-btn prev hidden"><i data-feather="chevron-left"></i></button> | |
| <button id="next-btn" class="carousel-btn next hidden"><i data-feather="chevron-right"></i></button> | |
| <div id="carousel-dots" class="carousel-dots"></div> | |
| <div id="error-container" class="error-message hidden"></div> | |
| </div> | |
| </div> | |
| <div class="settings-panel-bottom"> | |
| <div class="panel"> | |
| <h2 class="panel-title">输入文件 (可选)</h2> | |
| <div class="grid-2-col"> | |
| <div class="form-group file-drop-group"> | |
| <label for="image-prompt">图像提示 (Image Prompt)</label> | |
| <div class="file-drop-zone" id="image-drop-zone"> | |
| <div class="file-drop-prompt"> | |
| <i data-feather="image"></i> | |
| <p>拖放、粘贴图片文件至此或点击选择</p> | |
| </div> | |
| <div class="file-preview" id="image-preview"></div> | |
| <input type="file" id="image-prompt" name="image-prompt" accept="image/jpeg,image/png" class="file-input"> | |
| </div> | |
| </div> | |
| <div class="form-group file-drop-group"> | |
| <label for="video-prompt">视频提示 (Video Prompt)</label> | |
| <div class="file-drop-zone" id="video-drop-zone"> | |
| <div class="file-drop-prompt"> | |
| <i data-feather="video"></i> | |
| <p>拖放、粘贴视频文件至此或点击选择</p> | |
| </div> | |
| <div class="file-preview" id="video-preview"></div> | |
| <input type="file" id="video-prompt" name="video-prompt" accept="video/mp4" class="file-input"> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| </div> | |
| <script src="app.js"></script> | |
| <script> | |
| feather.replace() | |
| </script> | |
| </body> | |
| </html> |