Spaces:
Sleeping
Sleeping
| <html lang="zh-CN"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>FAL AI 视频生成器</title> | |
| <link rel="stylesheet" href="style.css"> | |
| <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet"> | |
| <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;600;700&display=swap" rel="stylesheet"> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <!-- 头部 --> | |
| <header class="header"> | |
| <div class="header-content"> | |
| <h1 class="title"> | |
| <i class="fas fa-video"></i> | |
| FAL AI 视频生成器 | |
| </h1> | |
| <div class="header-controls"> | |
| <button id="apiKeyButton" class="api-key-button" title="API 密钥设置"> | |
| <i class="fas fa-key"></i> | |
| <span id="apiKeyStatus">未配置</span> | |
| </button> | |
| <button id="themeToggle" class="theme-toggle" title="切换主题"> | |
| <i class="fas fa-moon"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- API Key 设置弹窗 --> | |
| <div id="apiKeyModal" class="modal" style="display: none;"> | |
| <div class="modal-content"> | |
| <div class="modal-header"> | |
| <h3><i class="fas fa-key"></i> API 密钥设置</h3> | |
| <button id="closeModal" class="close-button"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <div class="modal-body"> | |
| <div class="api-key-info"> | |
| <p><strong>当前状态:</strong> <span id="modalApiKeyStatus">检查中...</span></p> | |
| <p class="api-key-hint"> | |
| <i class="fas fa-info-circle"></i> | |
| 请在 <a href="https://fal.ai/dashboard" target="_blank">FAL AI 控制台</a> 获取您的 API 密钥 | |
| </p> | |
| <p class="api-key-warning"> | |
| <i class="fas fa-shield-alt"></i> | |
| <strong>重要提醒:</strong> "测试连接" 使用免费健康检查端点，不会消耗 API 配额或产生费用 | |
| </p> | |
| </div> | |
| <div class="form-group"> | |
| <label for="apiKeyInput" class="form-label"> | |
| <i class="fas fa-key"></i> | |
| FAL AI API 密钥 | |
| </label> | |
| <div class="api-key-input-group"> | |
| <input | |
| type="password" | |
| id="apiKeyInput" | |
| class="form-input" | |
| placeholder="输入您的 FAL AI API 密钥" | |
| > | |
| <button id="toggleApiKeyVisibility" class="toggle-visibility" type="button"> | |
| <i class="fas fa-eye"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="api-key-options"> | |
| <label class="checkbox-label"> | |
| <input type="checkbox" id="saveApiKey" checked> | |
| <span class="checkmark"></span> | |
| 保存 API 密钥到本地（下次自动使用） | |
| </label> | |
| </div> | |
| <div class="modal-actions"> | |
| <button id="saveApiKeyButton" class="save-button"> | |
| <i class="fas fa-save"></i> | |
| 保存设置 | |
| </button> | |
| <button id="testApiKeyButton" class="test-button"> | |
| <i class="fas fa-plug"></i> | |
| 测试连接 | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- 主要内容 --> | |
| <main class="main"> | |
| <!-- 功能选择标签 --> | |
| <div class="tabs"> | |
| <button class="tab-button active" data-tab="image-to-video"> | |
| <i class="fas fa-image"></i> | |
| 图片转视频 | |
| </button> | |
| <button class="tab-button" data-tab="text-to-video"> | |
| <i class="fas fa-text-width"></i> | |
| 文本转视频 | |
| </button> | |
| <button class="tab-button" data-tab="video-library"> | |
| <i class="fas fa-video"></i> | |
| 视频库 | |
| </button> | |
| </div> | |
| <!-- 生成队列（生成栏进度） --> | |
| <div id="generationQueue" class="generation-queue"> | |
| <div class="queue-header"> | |
| <h3><i class="fas fa-tasks"></i> 生成队列</h3> | |
| <span id="queueCount" class="queue-count">0 任务</span> | |
| </div> | |
| <div id="queueList" class="queue-list empty"> | |
| <div class="empty-queue"> | |
| <i class="fas fa-hourglass-half"></i> | |
| <p>暂无进行中的任务</p> | |
| <p class="upload-hint">点击上方“生成视频”即可开始一个新任务</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- 图片转视频面板 --> | |
| <div id="image-to-video" class="tab-content active"> | |
| <div class="form-container"> | |
| <form id="imageToVideoForm" class="generation-form"> | |
| <!-- 图片上传区域 --> | |
| <div class="form-group"> | |
| <label class="form-label"> | |
| <i class="fas fa-image"></i> | |
| 选择图片 | |
| </label> | |
| <div class="image-upload-area" id="imageUploadArea"> | |
| <div class="upload-placeholder"> | |
| <i class="fas fa-cloud-upload-alt"></i> | |
| <p>点击或拖拽上传图片</p> | |
| <p class="upload-hint">支持 JPG, PNG, GIF 格式，最大 50MB</p> | |
| </div> | |
| <input type="file" id="imageFile" accept="image/*" style="display: none;"> | |
| <div class="image-preview" id="imagePreview" style="display: none;"> | |
| <img id="previewImg" src="" alt="预览图片"> | |
| <button type="button" class="remove-image" id="removeImage"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="form-group"> | |
| <label class="form-label">或输入图片URL</label> | |
| <input type="url" id="imageUrl" class="form-input" placeholder="https://example.com/image.jpg"> | |
| </div> | |
| </div> | |
| <!-- 文本提示 --> | |
| <div class="form-group"> | |
| <label for="i2vPrompt" class="form-label"> | |
| <i class="fas fa-edit"></i> | |
| 文本描述 * | |
| </label> | |
| <textarea | |
| id="i2vPrompt" | |
| class="form-textarea" | |
| placeholder="描述你想要生成的视频内容，例如：白龙战士静静站立，眼中充满决心和力量。摄像机慢慢靠近或围绕战士转动，突出角色的强大存在感和英雄气质。" | |
| required | |
| ></textarea> | |
| </div> | |
| <!-- 模型切换（图片转视频） --> | |
| <div class="form-group"> | |
| <label for="i2vModel" class="form-label"> | |
| <i class="fas fa-brain"></i> | |
| 模型选择 | |
| </label> | |
| <select id="i2vModel" class="form-select"> | |
| <option value="seedance-pro-fast" selected>Seedance 1.0 Pro Fast（Bytedance）</option> | |
| <option value="wan-v2.2-a14b">WAN v2.2-a14b（FAL AI）</option> | |
| </select> | |
| <p class="upload-hint">不同模型支持的参数不同，选择后将自动切换对应设置。</p> | |
| </div> | |
| <!-- 高级设置 --> | |
| <details class="advanced-settings"> | |
| <summary> | |
| <i class="fas fa-cog"></i> | |
| 高级设置 | |
| </summary> | |
| <div class="settings-grid"> | |
| <!-- WAN 模型设置（图片转视频） --> | |
| <div id="i2vWanSettings" class="model-settings" style="display: none;"> | |
| <div class="form-group"> | |
| <label for="i2vNegativePrompt" class="form-label">负面提示</label> | |
| <textarea id="i2vNegativePrompt" class="form-textarea" placeholder="描述不希望出现的内容"></textarea> | |
| </div> | |
| <div class="form-group"> | |
| <label for="i2vFrames" class="form-label">帧数 (17-121)</label> | |
| <input type="range" id="i2vFrames" class="form-range" min="17" max="121" value="81"> | |
| <span class="range-value" id="i2vFramesValue">81</span> | |
| </div> | |
| <div class="form-group"> | |
| <label for="i2vFps" class="form-label">帧率 (4-60)</label> | |
| <input type="range" id="i2vFps" class="form-range" min="4" max="60" value="16"> | |
| <span class="range-value" id="i2vFpsValue">16</span> | |
| </div> | |
| <div class="form-group"> | |
| <label for="i2vResolution" class="form-label">分辨率</label> | |
| <select id="i2vResolution" class="form-select"> | |
| <option value="480p">480p</option> | |
| <option value="580p">580p</option> | |
| <option value="720p" selected>720p</option> | |
| </select> | |
| </div> | |
| <div class="form-group"> | |
| <label for="i2vAspectRatio" class="form-label">宽高比</label> | |
| <select id="i2vAspectRatio" class="form-select"> | |
| <option value="auto" selected>自动</option> | |
| <option value="16:9">16:9</option> | |
| <option value="9:16">9:16</option> | |
| <option value="1:1">1:1</option> | |
| </select> | |
| </div> | |
| <div class="form-group"> | |
| <label for="i2vQuality" class="form-label">视频质量</label> | |
| <select id="i2vQuality" class="form-select"> | |
| <option value="low">低</option> | |
| <option value="medium">中</option> | |
| <option value="high" selected>高</option> | |
| <option value="maximum">最高</option> | |
| </select> | |
| </div> | |
| <div class="form-group"> | |
| <label class="checkbox-label"> | |
| <input type="checkbox" id="i2vDisableSafety"> | |
| <span class="checkmark"></span> | |
| 关闭内容审查 (生成更自由的内容) | |
| </label> | |
| </div> | |
| </div> | |
| <!-- Seedance 1.0 Pro Fast 模型设置（图片转视频） --> | |
| <div id="i2vSeedanceSettings" class="model-settings"> | |
| <div class="form-group"> | |
| <label for="i2vSeedAspectRatio" class="form-label">宽高比</label> | |
| <select id="i2vSeedAspectRatio" class="form-select"> | |
| <option value="auto" selected>自动</option> | |
| <option value="16:9">16:9</option> | |
| <option value="21:9">21:9</option> | |
| <option value="4:3">4:3</option> | |
| <option value="1:1">1:1</option> | |
| <option value="3:4">3:4</option> | |
| <option value="9:16">9:16</option> | |
| </select> | |
| </div> | |
| <div class="form-group"> | |
| <label for="i2vSeedResolution" class="form-label">分辨率</label> | |
| <select id="i2vSeedResolution" class="form-select"> | |
| <option value="480p">480p</option> | |
| <option value="720p">720p</option> | |
| <option value="1080p" selected>1080p</option> | |
| </select> | |
| </div> | |
| <div class="form-group"> | |
| <label for="i2vSeedDuration" class="form-label">时长（秒）</label> | |
| <select id="i2vSeedDuration" class="form-select"> | |
| <option value="3">3</option> | |
| <option value="4">4</option> | |
| <option value="5" selected>5</option> | |
| <option value="6">6</option> | |
| <option value="7">7</option> | |
| <option value="8">8</option> | |
| <option value="9">9</option> | |
| <option value="10">10</option> | |
| <option value="11">11</option> | |
| <option value="12">12</option> | |
| </select> | |
| </div> | |
| <div class="form-group"> | |
| <label class="checkbox-label"> | |
| <input type="checkbox" id="i2vCameraFixed"> | |
| <span class="checkmark"></span> | |
| 固定相机（camera_fixed） | |
| </label> | |
| </div> | |
| <div class="form-group"> | |
| <label for="i2vSeedValue" class="form-label">随机种子（-1 为随机）</label> | |
| <input type="number" id="i2vSeedValue" class="form-input" value="-1" step="1" min="-1" placeholder="-1"> | |
| </div> | |
| <div class="form-group"> | |
| <label class="checkbox-label"> | |
| <input type="checkbox" id="i2vEnableSafety" checked> | |
| <span class="checkmark"></span> | |
| 启用内容审查（enable_safety_checker） | |
| </label> | |
| <p class="upload-hint">提示：Playground 可能不允许关闭安全审查；通过 API 可配置。</p> | |
| </div> | |
| </div> | |
| </div> | |
| </details> | |
| <!-- 提交按钮 --> | |
| <button type="submit" class="submit-button" id="i2vSubmitButton"> | |
| <i class="fas fa-magic"></i> | |
| 生成视频 | |
| </button> | |
| </form> | |
| </div> | |
| </div> | |
| <!-- 文本转视频面板 --> | |
| <div id="text-to-video" class="tab-content"> | |
| <div class="form-container"> | |
| <form id="textToVideoForm" class="generation-form"> | |
| <!-- 文本提示 --> | |
| <div class="form-group"> | |
| <label for="t2vPrompt" class="form-label"> | |
| <i class="fas fa-edit"></i> | |
| 文本描述 * | |
| </label> | |
| <textarea | |
| id="t2vPrompt" | |
| class="form-textarea" | |
| placeholder="描述你想要生成的视频内容，例如：一只可爱的小猫在花园里玩耍，阳光透过树叶洒下斑驳的光影。" | |
| required | |
| ></textarea> | |
| </div> | |
| <!-- 模型切换 --> | |
| <div class="form-group"> | |
| <label for="t2vModel" class="form-label"> | |
| <i class="fas fa-brain"></i> | |
| 模型选择 | |
| </label> | |
| <select id="t2vModel" class="form-select"> | |
| <option value="seedance-pro-fast" selected>Seedance 1.0 Pro Fast（Bytedance）</option> | |
| <option value="wan-v2.2-a14b">WAN v2.2-a14b（FAL AI）</option> | |
| </select> | |
| <p class="upload-hint">不同模型支持的参数不同，选择后将自动切换对应设置。</p> | |
| </div> | |
| <!-- 高级设置 --> | |
| <details class="advanced-settings"> | |
| <summary> | |
| <i class="fas fa-cog"></i> | |
| 高级设置 | |
| </summary> | |
| <div class="settings-grid"> | |
| <!-- WAN 模型设置 --> | |
| <div id="wanSettings" class="model-settings" style="display: none;"> | |
| <div class="form-group"> | |
| <label for="t2vNegativePrompt" class="form-label">负面提示</label> | |
| <textarea id="t2vNegativePrompt" class="form-textarea" placeholder="描述不希望出现的内容"></textarea> | |
| </div> | |
| <div class="form-group"> | |
| <label for="t2vFrames" class="form-label">帧数 (17-121)</label> | |
| <input type="range" id="t2vFrames" class="form-range" min="17" max="121" value="81"> | |
| <span class="range-value" id="t2vFramesValue">81</span> | |
| </div> | |
| <div class="form-group"> | |
| <label for="t2vFps" class="form-label">帧率 (4-60)</label> | |
| <input type="range" id="t2vFps" class="form-range" min="4" max="60" value="16"> | |
| <span class="range-value" id="t2vFpsValue">16</span> | |
| </div> | |
| <div class="form-group"> | |
| <label for="t2vResolution" class="form-label">分辨率</label> | |
| <select id="t2vResolution" class="form-select"> | |
| <option value="480p">480p</option> | |
| <option value="580p">580p</option> | |
| <option value="720p" selected>720p</option> | |
| </select> | |
| </div> | |
| <div class="form-group"> | |
| <label for="t2vAspectRatio" class="form-label">宽高比</label> | |
| <select id="t2vAspectRatio" class="form-select"> | |
| <option value="16:9" selected>16:9</option> | |
| <option value="9:16">9:16</option> | |
| <option value="1:1">1:1</option> | |
| </select> | |
| </div> | |
| <div class="form-group"> | |
| <label for="t2vQuality" class="form-label">视频质量</label> | |
| <select id="t2vQuality" class="form-select"> | |
| <option value="low">低</option> | |
| <option value="medium">中</option> | |
| <option value="high" selected>高</option> | |
| <option value="maximum">最高</option> | |
| </select> | |
| </div> | |
| <div class="form-group"> | |
| <label class="checkbox-label"> | |
| <input type="checkbox" id="t2vDisableSafety"> | |
| <span class="checkmark"></span> | |
| 关闭内容审查 (生成更自由的内容) | |
| </label> | |
| </div> | |
| </div> | |
| <!-- Seedance 1.0 Pro Fast 模型设置 --> | |
| <div id="seedanceSettings" class="model-settings"> | |
| <div class="form-group"> | |
| <label for="seedAspectRatio" class="form-label">宽高比</label> | |
| <select id="seedAspectRatio" class="form-select"> | |
| <option value="16:9" selected>16:9</option> | |
| <option value="21:9">21:9</option> | |
| <option value="4:3">4:3</option> | |
| <option value="1:1">1:1</option> | |
| <option value="3:4">3:4</option> | |
| <option value="9:16">9:16</option> | |
| </select> | |
| </div> | |
| <div class="form-group"> | |
| <label for="seedResolution" class="form-label">分辨率</label> | |
| <select id="seedResolution" class="form-select"> | |
| <option value="480p">480p</option> | |
| <option value="720p">720p</option> | |
| <option value="1080p" selected>1080p</option> | |
| </select> | |
| </div> | |
| <div class="form-group"> | |
| <label for="seedDuration" class="form-label">时长（秒）</label> | |
| <select id="seedDuration" class="form-select"> | |
| <option value="3">3</option> | |
| <option value="4">4</option> | |
| <option value="5" selected>5</option> | |
| <option value="6">6</option> | |
| <option value="7">7</option> | |
| <option value="8">8</option> | |
| <option value="9">9</option> | |
| <option value="10">10</option> | |
| <option value="11">11</option> | |
| <option value="12">12</option> | |
| </select> | |
| </div> | |
| <div class="form-group"> | |
| <label class="checkbox-label"> | |
| <input type="checkbox" id="t2vCameraFixed"> | |
| <span class="checkmark"></span> | |
| 固定相机（camera_fixed） | |
| </label> | |
| </div> | |
| <div class="form-group"> | |
| <label for="t2vSeed" class="form-label">随机种子（-1 为随机）</label> | |
| <input type="number" id="t2vSeed" class="form-input" value="-1" step="1" min="-1" placeholder="-1"> | |
| </div> | |
| <div class="form-group"> | |
| <label class="checkbox-label"> | |
| <input type="checkbox" id="t2vEnableSafety" checked> | |
| <span class="checkmark"></span> | |
| 启用内容审查（enable_safety_checker） | |
| </label> | |
| <p class="upload-hint">提示：部分平台的 Playground 不允许关闭安全审查；API 可配置。</p> | |
| </div> | |
| </div> | |
| </div> | |
| </details> | |
| <!-- 提交按钮 --> | |
| <button type="submit" class="submit-button" id="t2vSubmitButton"> | |
| <i class="fas fa-magic"></i> | |
| 生成视频 | |
| </button> | |
| </form> | |
| </div> | |
| </div> | |
| <!-- 视频库面板 --> | |
| <div id="video-library" class="tab-content"> | |
| <div class="form-container"> | |
| <div class="video-library-header"> | |
| <h3><i class="fas fa-video"></i> 本地视频库</h3> | |
| <div class="library-controls"> | |
| <button id="refreshLibrary" class="refresh-button"> | |
| <i class="fas fa-sync-alt"></i> | |
| 刷新 | |
| </button> | |
| <span id="videoCount" class="video-count">共 0 个视频</span> | |
| </div> | |
| </div> | |
| <div id="videoLibraryContent" class="video-library-content"> | |
| <div class="loading-library"> | |
| <i class="fas fa-spinner fa-spin"></i> | |
| 正在加载视频库... | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- 结果显示区域 --> | |
| <div id="resultContainer" class="result-container" style="display: none;"> | |
| <div class="result-header"> | |
| <h3><i class="fas fa-video"></i> 生成结果</h3> | |
| <button id="clearResult" class="clear-button"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <div class="result-content"> | |
| <video id="resultVideo" controls class="result-video"> | |
| 您的浏览器不支持视频播放。 | |
| </video> | |
| <div class="result-actions"> | |
| <a id="downloadLink" class="download-button" download> | |
| <i class="fas fa-download"></i> | |
| 下载视频 | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- 加载状态 --> | |
| <div id="loadingContainer" class="loading-container" style="display: none;"> | |
| <div class="loading-content"> | |
| <div class="loading-spinner"></div> | |
| <h3>正在生成视频...</h3> | |
| <p id="loadingMessage">请稍候，这可能需要几分钟时间</p> | |
| <div class="loading-progress"> | |
| <div class="progress-bar"> | |
| <div class="progress-fill" id="progressFill"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <!-- 底部 --> | |
| <footer class="footer"> | |
| <p>© 2024 FAL AI 视频生成器 | 基于 FAL AI 技术</p> | |
| </footer> | |
| </div> | |
| <script src="script.js"></script> | |
| </body> | |
| </html> |