express

Sleeping

App Files Files Community

deddytoyota commited on Oct 7, 2025

Commit

2fc9571

verified ·

1 Parent(s): c4d48a2

Update frontend/index.html

Browse files

Files changed (1) hide show

frontend/index.html +49 -55

frontend/index.html CHANGED Viewed

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="zh-CN">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -13,72 +13,68 @@
         <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>Halo</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>
@@ -88,38 +84,38 @@
                             </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">
@@ -128,35 +124,35 @@
                     </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>
@@ -168,16 +164,14 @@
             <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>
@@ -187,25 +181,25 @@
                 </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">
@@ -222,4 +216,4 @@
       feather.replace()
     </script>
 </body>
-</html>

 <!DOCTYPE html>
+<html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <header class="app-header">
             <h1>VEO Video Generator</h1>
             <div class="header-actions">
+                <button id="sound-toggle-btn" class="sound-toggle-button" title="Sound On/Off">
                     <i data-feather="volume-2"></i>
                 </button>
                 <button id="save-video-btn" class="save-button" disabled>
                     <i data-feather="save"></i>
+                    <span>Hello</span>
                 </button>
                 <button id="generate-btn" class="generate-button">
                     <i data-feather="play"></i>
+                    <span>Generate Video</span>
                 </button>
             </div>
         </header>
         <main class="main-content" id="video-form">
             <div class="settings-panel-left">
                 <div class="panel">
+                    <h2 class="panel-title">Core Parameters</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="Select or enter your key">
                             <div class="key-actions">
+                                <button id="save-key-btn" class="icon-btn" title="Save current key">
                                     <i data-feather="plus-circle"></i>
                                 </button>
                                 <div class="saved-keys-dropdown">
+                                    <button id="saved-keys-toggle" class="icon-btn" title="View saved keys">
                                         <i data-feather="key"></i>
                                     </button>
+                                    <div id="saved-keys-list" class="saved-prompts-list hidden"></div>
                                 </div>
                             </div>
                         </div>
                     </div>
                     <div class="form-group">
                         <div class="prompt-header">
+                            <label for="prompt">Positive Prompt</label>
                             <div class="prompt-actions">
+                                <button id="save-prompt-btn" class="icon-btn" title="Save current prompt">
                                     <i data-feather="plus-circle"></i>
                                 </button>
                                 <div class="saved-prompts-dropdown">
+                                    <button id="saved-prompts-toggle" class="icon-btn" title="View saved prompts">
                                         <i data-feather="bookmark"></i>
                                     </button>
+                                    <div id="saved-prompts-list" class="saved-prompts-list hidden"></div>
                                 </div>
                             </div>
                         </div>
+                        <textarea id="prompt" name="prompt" rows="5" class="form-input" placeholder="e.g. A cat in a spacesuit walking on the moon"></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="e.g. blurry, low quality, watermark"></textarea>
                     </div>
                 </div>
                 <div class="panel">
+                    <h2 class="panel-title">Model & Frame</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>
                             </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 (Landscape)</option>
+                                <option value="9:16">9:16 (Portrait)</option>
                             </select>
                         </div>
                         <div class="form-group">
+                           <label for="image-process-mode">Image Processing (16:9)</label>
                            <select id="image-process-mode" name="image-process-mode" class="form-select">
+                               <option value="none" selected>No Processing</option>
+                               <option value="fill">Color Fill</option>
+                               <option value="stretch_to_fill">Stretch to Fill (only enlarge)</option>
+                               <option value="compress_to_fit">Compress to Fit (only shrink)</option>
                            </select>
                        </div>
                          <div class="form-group">
+                            <label for="person-generation">Person Generation</label>
                             <select id="person-generation" name="person-generation" class="form-select">
+                                <option value="allow_all">Allow All</option>
+                                <option value="allow_adult">Adults Only</option>
+                                <option value="dont_allow">Do Not Allow</option>
                             </select>
                         </div>
                         <div class="form-group" id="image-fill-color-group">
+                           <label for="image-fill-color">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 class="panel">
+                    <h2 class="panel-title">Advanced Settings</h2>
                     <div class="grid-3-col">
                         <div class="form-group">
+                            <label for="seed">Random Seed</label>
+                            <input type="number" id="seed" name="seed" class="form-input" placeholder="Leave blank for random" min="0" max="4294967295">
                         </div>
                         <div class="form-group">
+                            <label for="sample-count">Samples per Thread</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">Duration (Seconds)</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">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">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">Enhance Prompt</label>
                             <label class="switch">
                                 <input type="checkbox" id="enhance-prompt" name="enhance-prompt" checked>
                                 <span class="switch-slider"></span>
             <div class="content-area">
                 <div class="video-panel">
                     <div id="video-container" class="video-container">
+                        <div id="video-carousel" class="carousel"></div>
                         <div id="loader" class="loader hidden">
                             <div class="spinner"></div>
+                            <p>Generating video...</p>
                         </div>
                         <div id="placeholder" class="placeholder">
                              <i data-feather="film" style="width: 64px; height: 64px;"></i>
+                            <p>The generated video will appear here</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>
                 <div class="settings-panel-bottom">
                      <div class="panel">
+                        <h2 class="panel-title">Input Files (Optional)</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>Drag, paste, or click to select image files</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>Drag, paste, or click to select video files</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">
       feather.replace()
     </script>
 </body>
+</html>