Pixelle-Video 视频模板开发实战指南从内置模板解析到自定义 HTML 模板全流程【免费下载链接】Pixelle-Video AI 全自动短视频引擎 | AI Fully Automated Short Video Engine项目地址: https://gitcode.com/GitHub_Trending/pi/Pixelle-Video本文围绕 Pixelle-Video 的模板开发文档展开系统讲解视频模板的设计机制模板如何用 HTML 定义每一帧画面的布局与风格内置模板如何按尺寸和类型组织以及如何从零创建一个可被 Web 界面和配置文件直接调用的自定义模板。读完本文你将掌握模板命名规范、目录结构、渲染变量、自定义参数语法与开发技巧能够独立为竖屏1080x1920、横屏1920x1080和方形1080x1080视频开发专属视觉模板。模板机制总览HTML 即画面Pixelle-Video 是一款 AI 全自动短视频引擎其视频画面并非由代码硬编码而是由HTML 模板定义。每个模板对应一种画面布局与设计风格标题、正文、配图、页脚、装饰元素全部由 HTML CSS 描述运行时由服务端把分镜数据标题、文本、AI 生成的图片或视频注入模板并渲染成帧画面。从源码看模板渲染的核心实现在 pixelle_video/services/frame_html.py 中的HTMLFrameGenerator类加载模板文件UTF-8 编码读取从模板路径解析目标视频尺寸parse_template_size用正则替换模板中的变量占位符通过Playwright 无头 Chromium渲染 HTML 并截图输出 PNG 帧图。也就是说模板开发者在意的只是「写 HTML/CSS」渲染细节由引擎封装。这也让模板开发的门槛极低——熟悉前端即可上手。内置模板体系一览Pixelle-Video 内置了覆盖三档主流画幅的预设模板对应不同发布平台。完整清单如下预览图位于 docs/images 目录。竖屏模板1080x1920适用于抖音、快手、小红书等短视频平台模板文件位于 templates/1080x1920。模板名模板文件风格定位static_defaultstatic_default.html默认静态模板static_excerptstatic_excerpt.html图文摘抄静态模板Blur Cardimage_blur_card.html模糊背景卡片适合图文内容展示Cartoonimage_cartoon.html卡通风格适合轻松活泼的内容Defaultimage_default.html默认模板简洁通用Elegantimage_elegant.html优雅风格适合文艺、知性内容Fashion Vintageimage_fashion_vintage.html复古时尚风格适合怀旧主题Life Insightsimage_life_insights.html生活感悟风格适合心灵鸡汤类内容Modernimage_modern.html现代简约风格适合商务、科技内容Neonimage_neon.html霓虹灯风格适合时尚、潮流内容Psychology Cardimage_psychology_card.html心理学卡片风格适合知识科普Purpleimage_purple.html紫色主题适合梦幻、神秘风格Satirical Cartoonimage_satirical_cartoon.html80 年代讽刺漫画风格适合精神类小故事Simple Black Backgroundimage_simple_black.html极简黑色背景适合心灵鸡汤类内容Simple Line Drawingimage_simple_line_drawing.html简笔画适合认知成长类内容Bookimage_book.html图书解读适合科普类内容Long Textimage_long_text.html长文本适合励志鸡汤类内容Excerptimage_excerpt.html图文摘抄适合名人名言Health Preservationimage_health_preservation.html养生窍门适合养生科普内容Life Insights (Light)image_life_insights_light.html人生感悟传递温暖与力量Fullimage_full.html全屏模板适合书单号Healingimage_healing.html治愈模板适合疗愈类内容Video_Defaultvideo_default.html默认动态模板Video_Healingvideo_healing.html治愈动态模板竖屏默认模板image_default的渲染效果是典型的「标题 AI 配图 正文 作者页脚」结构可作为自定义模板的参照起点。横屏模板1920x1080适用于 YouTube、B 站等视频平台模板文件位于 templates/1920x1080。模板名模板文件风格定位Ultrawide Minimalimage_ultrawide_minimal.html超宽屏极简风格适合桌面端观看Wide Darktechimage_wide_darktech.html暗黑科技风格适合技术、游戏内容Filmimage_film.html电影风格沉浸式体验Fullimage_full.html全屏显示适合书单号Bookimage_book.html图书解读适合科普类内容横屏模板中暗黑科技风格image_wide_darktech适合作为游戏、科技向内容的底稿。方形模板1080x1080适用于 Instagram、微信朋友圈等平台模板文件位于 templates/1080x1080。模板名模板文件风格定位Minimal Framedimage_minimal_framed.html极简边框风格适合社交媒体分享模板命名规范static_ / image_ / video_模板采用统一的命名前缀区分「是否依赖 AI 生成媒体」这一约定同时决定了视频生产管线是否需要调用 ComfyUI 工作流static_*.html静态模板无需 AI 生成任何媒体内容纯文字样式渲染适合快速生成、低成本场景例如 templates/1080x1920/static_default.html正文直接铺在 CSS 渐变背景上不依赖图片素材。image_*.html图片模板使用 AI 生成的图片作为背景或主视觉调用 ComfyUI 的图像生成工作流适合需要视觉配图的内容例如 templates/1080x1920/image_default.html 中img src{{image}}的位置即由 AI 图片填充。video_*.html视频模板使用 AI 生成的视频作为背景调用 ComfyUI 的视频生成工作流创建动态视频内容增强表现力例如 templates/1080x1920/video_default.html通过叠加层把标题与字幕合成在动态画面上。这一约定在源码层面由 pixelle_video/utils/template_util.py 的get_template_type()落实static_→staticvideo_→videoimage_→image不符合前缀规范的文件会告警并默认按image类型处理。Web 界面也正是依据该类型决定「是否需要渲染图片/视频生成工作流选择区」见 web/components/style_config.py。模板目录结构模板统一存放在templates/目录按画幅尺寸分子目录子目录名即「宽 x 高」templates/ ├── 1080x1920/ # 竖屏 │ ├── static_*.html # 静态模板 │ ├── image_*.html # 图片模板 │ └── video_*.html # 视频模板 ├── 1920x1080/ # 横屏 │ └── image_*.html # 图片模板 └── 1080x1080/ # 方形 └── image_*.html # 图片模板这个目录约定不只是组织方式还是功能的一部分parse_template_size()直接从路径中的尺寸目录名解析出视频宽高因此模板文件的存放位置必须符合WIDTHxHEIGHT格式例如templates/1080x1920/image_default.html→(1080, 1920)resolve_template_path()支持多种输入格式None、模板名.html、1080x1920/模板名.html、带templates/前缀的路径等并做了向后兼容旧配置里的default.html会被自动迁移为image_default.htmllist_available_sizes()与list_templates_for_size()负责枚举可用尺寸与模板供 Web 界面分组成列。从源码结构看get_resource_path同时检索默认templates/与自定义data/templates/目录且自定义目录优先级更高意味着用户模板可以覆盖内置模板而无需改动仓库文件。创建自定义模板四步上手操作步骤从templates/目录复制一个现有模板文件作为底稿修改 HTML 和 CSS 样式实现自己的视觉设计保存到对应尺寸目录下使用.html扩展名如templates/1080x1920/my_style.html在配置或 Web 界面中使用新模板名称即可。模板变量模板支持以下变量占位符文档中称为 Jinja2 变量实际由HTMLFrameGenerator._replace_parameters()通过正则完成替换效果等价{{ title }}— 视频标题可选{{ text }}— 当前分镜的文本内容叙事文案{{ image }}— 当前分镜的图片或视频路径如果有。此外generate_frame()还支持通过ext字典注入扩展数据如index、content_title、content_author等这些键同样可以在模板中以{{ key }}形式使用。以 pixelle_video/services/frame_processor.py 的帧合成逻辑为例实际渲染时注入的数据包括ext { index: frame.index 1, # 分镜序号 } if config.template_params: ext.update(config.template_params) # 用户在 Web 界面设置的自定义参数随后title取分镜表的视频标题text取当前分镜的 narrationimage取已生成的媒体文件路径图片模板传图片、视频模板传视频路径HTMLFrameGenerator统一处理。示例模板下面是一份完整的竖屏基础模板可作为自定义模板的起点!DOCTYPE html html head style body { width: 1080px; height: 1920px; margin: 0; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); display: flex; align-items: center; justify-content: center; font-family: Arial, sans-serif; } .content { text-align: center; color: white; padding: 40px; } .text { font-size: 48px; line-height: 1.6; } /style /head body div classcontent div classtext{{ text }}/div /div /body /html保存为templates/1080x1920/my_style.html即可在 Web 界面或配置中引用1080x1920/my_style.html。进阶自定义参数 DSL 与媒体尺寸元信息内置模板不止使用三个基础变量。以 templates/1080x1920/image_default.html 为例页脚区域使用了带默认值的自定义参数div classlogo{{authorPixelle.AI}}/div div classauthor-desc{{describeOpen Source Omnimodal AI Creative Agent}}/div div classlogo{{brandPixelle-Video}}/div这是HTMLFrameGenerator提供的模板参数 DSL语法为{{参数名:类型默认值}}各部分均可省略写法含义{{param}}文本类型无默认值{{paramvalue}}文本类型带默认值{{param:type}}指定类型无默认值{{param:typevalue}}指定类型带默认值支持的参数类型有四种text、number、color、bool。默认值解析规则见parse_template_parameters()与_parse_default_value()未提供默认值时text 为number 为0color 为#000000bool 为falsenumber类型按是否包含小数点解析为int或float解析失败回退为0bool类型接受true/1/yes/on不区分大小写为真color类型若不以#开头会自动补上#前缀。title、text、image、index为预置参数不会被当作自定义参数解析。解析出的自定义参数会同步暴露给 Web 界面web/components/style_config.py 会自动为每个参数渲染对应的输入控件文本输入框、数字输入框、颜色选择器、勾选框用户设置的值最终通过template_params注入渲染上下文。此外模板head中的 meta 标签还能声明AI 媒体生成尺寸meta nametemplate:media-width content1024 meta nametemplate:media-height content1024get_media_size()会解析这两个标签用于决定调用图像/视频工作流时生成的媒体分辨率若模板未声明则回退为 1024x1024。对比可见image_default.html 声明 1024x1024而 video_default.html 声明 512x288背景视频画幅。配置与使用在配置文件与 Web 界面中选用模板配置文件方式在 config.example.yaml 中通过template.default_template指定默认模板它同时决定视频画幅与布局风格# Template Configuration # Configure default template for video generation template: # Default frame template to use when not explicitly specified # Determines video aspect ratio and layout style default_template: 1080x1920/image_default.html值采用尺寸/模板文件名格式例如1080x1920/image_default.html、1920x1080/image_film.html、1080x1080/image_minimal_framed.html。Web 界面方式在 Streamlit Web 界面web/components/style_config.py中模板区提供了完整的可视化选择与预览能力按类型筛选static/image/video单选按钮对应三类模板前缀按尺寸分组以标签页按画幅竖屏/横屏/方形分组展示每个模板带缩略预览图语言感知中文界面使用docs/images下的中文预览图其他语言使用_en后缀英文预览图选择与预览点击「选择」后可填写标题、文本、图片路径实时生成帧预览内部即调用HTMLFrameGenerator.generate_frame()自定义参数模板中声明的自定义参数会动态渲染出对应输入控件联动媒体生成选择image_*/video_*模板后界面才显示图像/视频生成工作流配置区并根据 meta 标签声明的媒体尺寸预填生成分辨率。模板开发技巧1. 响应式尺寸确保模板body尺寸与目标视频尺寸一致否则渲染出的画面会与预期画幅不符竖屏width: 1080px; height: 1920px;横屏width: 1920px; height: 1080px;方形width: 1080px; height: 1080px;尺寸也可以交由引擎决定HTMLFrameGenerator初始化时会用parse_template_size()从模板路径自动解析宽高并以该尺寸创建 Playwright 视口viewport{width: w, height: h}再截图。2. 文本排版使用合适的字体大小和行高确保可读性。内置模板的实践正文font-size: 42~48px; line-height: 1.6~2.0并预留固定行数高度如image_default.html给正文设了 239.4px 固定高度容器防止抖动为文字添加阴影或半透明背景提高与背景的对比度如video_default.html使用三层text-shadow叠加黑边控制文本长度避免溢出。可借鉴 video_default.html 内置的 JS 方案用二分查找算法按容器宽度自动缩放标题字号最小 12px、最大 72px并通过MutationObserver监听文本变化后重新适配。3. 图片处理使用object-fit: cover确保图片填满容器而不变形内置模板统一采用该做法添加渐变或遮罩层提升文字可读性如static_default.html在背景图上叠加linear-gradient半透明层 backdrop-filter: blur(10px)毛玻璃卡片考虑图片加载失败的降级方案generate_frame()支持相对路径、绝对路径、HTTP URL 与data:协议本地文件会转换为file://URI 以便同源加载渲染前会检查图片文件是否存在并告警模板侧可再通过 CSS 背景兜底。4. 性能优化避免使用过于复杂的 CSS 动画画面是静态截帧动画无法在帧图中体现反而拖慢渲染优化背景图片大小控制渲染耗时与内存占用使用系统字体或 Web 安全字体内置模板统一使用PingFang SC, Source Han Sans, Microsoft YaHei, sans-serif这类字体栈避免依赖未安装字体导致乱码或回退。运行环境依赖模板渲染依赖无头浏览器与系统字体相关要求在 frame_html.py 中做了显式检查Linux 下通过fc-list探测浏览器需安装 Chromium 系浏览器。Linux 执行playwright install --with-deps chromiumWindows/macOS 需安装 Chrome、Chromium 或 Edge 之一。浏览器实例为进程内共享_ensure_browser()懒加载并带--no-sandbox、--disable-dev-shm-usage等容器友好参数字体Ubuntu/Debian 执行sudo apt-get install -y fontconfig fonts-liberation fonts-noto-cjkCentOS/RHEL 执行sudo yum install -y fontconfig liberation-fonts google-noto-cjk-fonts保证中文渲染正常。小结Pixelle-Video 的模板体系把「画面设计」与「视频生产」彻底解耦设计师只需按照static_/image_/video_命名规范、WIDTHxHEIGHT目录结构写好 HTML/CSS声明好变量与自定义参数即可获得与 AI 媒体生成、TTS 语音、视频合成管线无缝衔接的完整模板能力。从复制一个内置模板、替换样式开始是上手最快的路径进一步可以借助参数 DSL 与 meta 媒体尺寸元信息做出可配置、可复用的高级模板。延伸阅读模板机制更底层的渲染实现见 frame_html.py 与 frame_processor.py模板枚举、路径解析与类型识别见 template_util.py完整配置说明见 config.example.yaml 与 configuration 文档Web 界面模板操作说明见 web-ui 文档。【免费下载链接】Pixelle-Video AI 全自动短视频引擎 | AI Fully Automated Short Video Engine项目地址: https://gitcode.com/GitHub_Trending/pi/Pixelle-Video创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考