Pixelle-Video Web UI 界面化操作指南：三栏工作台与全自动短视频生成实战-港品优选

Pixelle-Video Web UI 界面化操作指南：三栏工作台与全自动短视频生成实战

【免费下载链接】Pixelle-Video🚀 AI 全自动短视频引擎 | AI Fully Automated Short Video Engine项目地址: https://gitcode.com/GitHub_Trending/pi/Pixelle-Video

Pixelle-Video 的 Web 界面基于 Streamlit 构建，将"内容输入 → 语音与视觉风格配置 → 视频生成与预览"整条 AI 全自动短视频链路封装为可视化操作台。本篇指南以官方 Web UI 文档为主体，结合仓库源码深入讲解界面布局、系统配置、内容输入、TTS 语音设置、模板画廊与视频生成流程，读者完成后可独立完成从主题输入到成片下载的完整操作，并理解每一步背后的模块调用关系。

界面总览：三栏工作台与侧边栏

Pixelle-Video 的 Web 界面采用经典的三栏工作台布局（web/pipelines/standard.py 中以st.columns([1, 1, 1])实现）：

区域	位置	承载功能
左栏	Left Panel	内容输入与音频（BGM）设置
中栏	Middle Panel	语音（TTS）与视觉风格设置
右栏	Right Panel	视频生成与预览输出
侧边栏	Sidebar	系统配置与 FAQ 快捷查阅

从入口实现看，整个 Web 应用是一个 Streamlit 多页应用（web/app.py），通过st.navigation注册了"Home（首页）"与"History（历史）"两个页面，默认进入 Home 首页。首页在初始化会话状态与国际化（i18n）后，依次渲染页头、侧边栏 FAQ、系统配置区域，并以 Tab 形式列出所有已注册的 Pipeline UI（web/pages/1_🎬_Home.py），包括快速创作、素材创作等流程；经典三栏布局即"快速创作"（Standard Pipeline）Tab 的默认形态。

界面背后的源码支撑：左栏组件位于 web/components/content_input.py（内容输入 + BGM）、中栏组件位于 web/components/style_config.py（TTS + 模板 + 媒体生成）、右栏组件位于 web/components/output_preview.py（生成按钮、进度、预览、下载）。

首次使用：系统配置

首次使用前必须完成 LLM 与图像/视频生成服务的配置，否则系统会提示未配置。详细配置项可参考 Configuration Guide。

在首页的"系统配置（Settings）"折叠区（未配置时自动展开，已配置时自动收起），可以看到两列配置界面（实现见 web/components/settings.py）：

1. LLM 设置

快速预设（Quick Preset）：下拉选择预置的 LLM 服务（如 Ollama 等），选择后自动填充 base_url 与 model；也可选择 Custom 手动填写。
API Key（必填）：密码输入框，切换预设时会保留已保存的 Key 或清空。
Base URL（必填）：服务地址，例如 Ollama 本地地址。
模型选择：内置"自定义模型"选项 + 已加载模型列表。可点击🔄 Load Models调用fetch_available_models从服务端拉取可用模型列表，或点击🔌 Test Connection调用test_llm_connection验证连通性（这两个函数位于 pixelle_video/utils/llm_util.py）。
三个字段（API Key、Base URL、Model）缺一不可，保存时会先校验完整性再写入配置。

2. ComfyUI / RunningHub 设置

媒体生成既可以走本地自托管 ComfyUI，也可以走 RunningHub 云端：

本地 ComfyUI：填写comfyui_url（默认http://127.0.0.1:8188）与可选comfyui_api_key，可点击 Test Connection 请求/system_stats接口验证。
RunningHub 云端：填写runninghub_api_key，可配置并发上限（runninghub_concurrent_limit，范围 1–10，默认 1）与实例类型（24G / 48G 显存，48G 对应配置值plus，用于启用更大显存能力的工作流）。

3. API 媒体模型（直连提供商）

该区域用于直接调用云端图像/视频模型，不影响上方 LLM 与 ComfyUI/RunningHub 配置，支持四类提供商：

OpenAI / GPT Image：API Key、Base URL（默认https://api.openai.com/v1）、可选代理开关。
DashScope / Wan（通义万相）：API Key、Base URL（默认https://dashscope.aliyuncs.com/api/v1）。
Volcengine ARK / Seedream / Seedance：API Key、Base URL（默认https://ark.cn-beijing.volces.com/api/v3）。
Kling AI（可灵）：Base URL、Access Key、Secret Key。

此外还有一个"打印模型请求参数"调试开关（print_model_input）与可选"本地代理"（local_proxy，仅部分提供商如图像模型使用）。点击"保存配置"后，LLM、ComfyUI、API 提供商三部分会统一写入config.yaml并刷新界面；点击"重置配置"则恢复默认配置。

内容输入（左栏）

左栏第一部分是内容输入区（web/components/content_input.py），同时支持单任务与批量两种模式。

生成模式（Generation Mode）

AI Generate Content（AI 生成内容）：只需输入一个主题（Topic），系统调用 LLM 自动生成完整视频脚本；此时可额外设置：
- 标题（Title）：可选，作为视频标题；
- 分镜数量（Number of Scenes）：滑块范围 3–30，默认 5，即 AI 将脚本划分为多少个场景；
- 文本输入框高度为 120px，占位提示引导输入主题。
Fixed Script Content（固定脚本内容）：直接输入完整脚本，系统不再调用 LLM 生成内容；文本输入框高度提升到 200px 以便容纳较长文本，同时显示提示：分镜数量由脚本内容决定，场景数滑块不生效（n_scenes被忽略）。

固定脚本分割模式（Fixed Script Split Mode）

使用固定脚本模式时，必须选择如何把文本切分为分镜（场景）。分割选项定义于 web/i18n/locales/en_US.json，默认按段落分割：

分割模式	规则	说明
By Paragraph（按段落）	按空行（`\n\n`）切分	每个段落成为一个场景，默认选项，适合段落结构清晰的脚本
By Line（按行）	按换行符（`\n`）切分	每一行成为一个场景，适合每行一句的排版
By Sentence（按句子）	智能句边界检测（句号、感叹号、问号等）	每个句子成为一个场景，适合自然语言长段落

背景音乐（BGM）

左栏下部为 BGM 设置区（render_bgm_section）：

内置音乐：自动扫描仓库 bgm/ 与data/bgm/目录下的音频文件（支持.mp3、.wav、.flac、.m4a、.aac、.ogg），通过下拉框选择；若存在default.mp3则默认选中。
自定义音乐：将音频文件放入上述目录后刷新即可出现在列表中。
音量控制：滑块范围 0.0–0.5，默认 0.2，仅在选中 BGM 时显示。
试听：提供 BGM 预览按钮，选中后可直接在页面内播放试听。

批量模式（Batch Mode）

勾选"批量模式"后，可在文本框内按行输入多个主题（每行一个），系统会自动过滤空行，最多支持 100 个主题；可设置统一标题前缀与分镜数量（3–30，默认 5），然后以共享配置批量生成多支视频，进度与结果统计（总数/成功/失败）在右栏展示，并引导跳转到 History 页面查看（批量执行逻辑见 web/utils/batch_manager.py）。

语音设置（中栏）

中栏的 TTS 区域（实现于 web/components/style_config.py）负责语音合成，支持两种推理模式。

TTS 工作流选择

Local 本地模式（默认）：直接使用 Edge-TTS 服务，无需额外工作流。可配置：
- 音色（Voice）：从预置音色库中选择。预置音色定义于 pixelle_video/tts_voices.py，覆盖中英文，例如zh-CN-XiaoxiaoNeural（女）、zh-CN-YunjianNeural（男，默认）、zh-CN-YunxiNeural（男）、en-US-AriaNeural（女）等；
- 语速（Speed）：滑块范围 0.5x–2.0x，步长 0.1，默认 1.2x。
ComfyUI 模式：选择 TTS 工作流（如 RunningHub 的tts_index2.json、自托管的tts_edge.json等，工作流文件位于 workflows/），并可上传参考音频用于音色克隆。

参考音频（Reference Audio）

上传参考音频后系统先提供在线试听，再保存到temp/目录并作为ref_audio参数传给 TTS 服务。
支持格式：MP3 / WAV / FLAC（源码中同时兼容 M4A、AAC、OGG）。

语音试听（TTS Preview）

两种模式下均可在折叠区输入试听文本（默认"大家好，这是一段测试语音。"），点击预览按钮后调用pixelle_video.tts(...)生成音频并直接播放，同时显示音频文件路径，方便在正式生成前确认音色与语速效果。

视觉设置（中栏）

图像 / 视频生成

当所选模板需要 AI 生成媒体素材（image_*.html需要图像、video_*.html需要视频）时，中栏会显示媒体生成配置区：

生成来源（Generation Source）：三种来源可选：
- RunningHub：云端工作流，如runninghub/image_flux.json、runninghub/video_wan2.2.json；
- Selfhost：本地自托管工作流，如selfhost/image_flux.json、selfhost/video_wan2.1_fusionx.json；
- API：直连云端模型提供商（DashScope、ARK、Kling 等），其中文生视频 API 模型需要已配置且通过验证才会出现在列表。
媒体尺寸：自动继承所选模板的解析尺寸（宽 × 高），以只读信息展示。
Prompt 前缀（Prompt Prefix）：文本输入框，用于统一控制生成风格；实际调用时通过build_image_prompt（pixelle_video/utils/prompt_helper.py）将测试提示词与前缀拼接为最终 prompt。
媒体预览：可输入测试提示词（图像默认a dog，视频默认a peaceful lake, gentle camera movement）试生成一张图或一段视频，实时验证工作流与风格；视频预览支持设置默认画幅（依据模板自动推断 9:16 / 16:9 / 1:1）。

若模板为静态模板（static_*.html，无需 AI 媒体），则该区域仅显示提示信息，不展示工作流选择。

视频模板（Video Template）

模板选择区是视觉设置的核心，采用"类型 + 尺寸 + 画廊"三级组织：

模板预览画廊（Template Preview Gallery）：以网格形式（5 列）直观展示所有可用模板的预览图；预览图自动从 docs/images/ 按语言加载（中文界面使用中文版预览图，其他语言使用_en后缀版本），无预览图的模板显示占位卡片，点击"选择"按钮即可选中。
支持尺寸：竖版 1080×1920、横版 1920×1080、方形 1080×1080（按尺寸自动分组为 Tab，标签形如"Portrait 1080×1920"）。
模板类型（通过static_/image_/video_前缀自动识别，逻辑见 pixelle_video/utils/template_util.py）：

类型	命名规则	说明
静态模板	`static_*.html`	纯 HTML/CSS 排版，无需 AI 生成媒体
图像模板	`image_*.html`	需要 AI 生成图像素材
视频模板	`video_*.html`	需要 AI 生成视频素材

实际模板文件存放于 templates/1080x1920、templates/1920x1080、templates/1080x1080。

模板自定义参数：选择模板后，系统通过HTMLFrameGenerator.parse_template_parameters()解析模板中声明的自定义参数（pixelle_video/services/frame_html.py），按text/number/color/bool类型自动渲染为文本输入、数字输入、颜色选择器或复选框，用户可实时调整文字、颜色等细节。
模板预览：可在折叠区填写标题、图片路径、正文文本，点击"预览"调用HTMLFrameGenerator.generate_frame实时渲染出单帧画面，确认排版效果后再进入生成。

生成视频（右栏）

右栏（web/components/output_preview.py）负责触发生成并展示结果。

单任务生成流程

点击Generate Video后，系统按以下阶段依次执行（对应 Pipeline 的完整调用链）：

生成视频脚本：根据生成模式（AI 生成或固定脚本）与分割模式，产出分镜（Storyboard）脚本；
为每个分镜生成图像/视频：按模板类型调用所选工作流（RunningHub / Selfhost / API）逐镜生成媒体素材；
合成语音旁白：按 TTS 模式（Local 或 ComfyUI）为每个分镜合成配音，支持参考音频克隆；
合成最终视频：将分镜画面、配音、BGM 按模板与音量合成输出。

生成过程中，右栏会实时显示进度条与状态文本——进度信息来自ProgressEvent事件（pixelle_video/models/progress.py），可细粒度展示"分镜 x/y - 步骤 z：生成插图"等阶段信息，进度百分比在完成前封顶 99%。

完成后自动预览，并展示以下元信息：

生成耗时（秒）
文件大小（MB）
分镜数量
视频分辨率（由模板自动解析）

同时提供内嵌播放器与Download Video 下载按钮，一键保存 MP4 成片。

批量生成

批量模式下，右栏展示批次信息与预估时间，点击批量生成按钮后由SimpleBatchManager串行执行多个任务，提供"总体进度 + 当前任务进度"双进度显示；结束后以指标卡展示总数/成功/失败统计、失败任务详情（含错误与堆栈），并提供跳转 History 页面的入口。

生成前置校验

点击生成时系统会依次校验：系统配置是否完整（未配置时提示并中止）、输入文本是否为空、以及视频模板是否已选择视频生成工作流（若video_*.html模板未选工作流则中止并提示）。

FAQ 侧边栏

侧边栏内置了 FAQ 快捷查阅面板（实现见 web/components/faq.py）：

自动加载对应语言文档：中文界面加载 docs/FAQ_CN.md，其他语言加载 docs/FAQ.md；
分类折叠展示：按###标题自动解析为"问题—答案"对，每个问题一个可展开折叠项，覆盖常见配置问题、生成失败解决方案、性能优化技巧等；
深度求助入口：面板底部提供 GitHub Issues 链接，方便提交问题。

启动 Web 界面

Web 界面随项目一起安装后即可启动（具体安装步骤见 Installation Guide）：

Linux/macOS：运行仓库根目录的 start_web.sh；
Windows：运行 start_web.bat（Windows 打包模板见 packaging/windows/templates/start.bat）；
启动后浏览器打开 Streamlit 默认地址即可进入 Home 首页。

小结

Pixelle-Video 的 Web UI 将复杂的 AI 视频生成链路收敛为一个三栏可视化工作台：左栏输入内容与 BGM，中栏配置语音、模板与媒体工作流，右栏生成、预览并下载成片，侧边栏随取随用的 FAQ 降低了排查成本。配合系统的批量模式与模板自定义参数能力，无需编写代码即可完成从主题到成片的全自动短视频生产；若需深入理解每个参数背后的实现，可直接阅读 web/components/ 与 pixelle_video/service.py 中的对应模块。

【免费下载链接】Pixelle-Video🚀 AI 全自动短视频引擎 | AI Fully Automated Short Video Engine项目地址: https://gitcode.com/GitHub_Trending/pi/Pixelle-Video

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考

企业官网建设流程全解析