添加内置模板预览

docs/en/user-guide/templates.md

@@ -6,7 +6,151 @@ How to create custom video templates.
 
 ## Template Introduction
 
-Video templates use HTML to define the layout and style of video frames.
+Video templates use HTML to define the layout and style of video frames. Pixelle-Video provides multiple preset templates covering different video dimensions and style requirements.
+
+---
+
+## Built-in Template Preview
+
+### Portrait Templates (1080x1920)
+
+Suitable for TikTok, Kuaishou, Xiaohongshu, and other short video platforms.
+
+<div class="grid cards" markdown>
+
+-   **Blur Card**
+
+    ---
+
+    ![blur_card](../../images/1080x1920/blur_card.png)
+    
+    Blurred background card style, suitable for graphic content display
+
+-   **Cartoon**
+
+    ---
+
+    ![cartoon](../../images/1080x1920/cartoon.png)
+    
+    Cartoon style, suitable for light and lively content
+
+-   **Default**
+
+    ---
+
+    ![default](../../images/1080x1920/default.jpg)
+    
+    Default template, simple and versatile
+
+-   **Elegant**
+
+    ---
+
+    ![elegant](../../images/1080x1920/elegant.jpg)
+    
+    Elegant style, suitable for artistic and intellectual content
+
+-   **Fashion Vintage**
+
+    ---
+
+    ![fashion_vintage](../../images/1080x1920/fashion_vintage.jpg)
+    
+    Retro fashion style, suitable for nostalgic themes
+
+-   **Life Insights**
+
+    ---
+
+    ![life_insights](../../images/1080x1920/life_insights.jpg)
+    
+    Life insight style, suitable for inspirational content
+
+-   **Modern**
+
+    ---
+
+    ![modern](../../images/1080x1920/modern.jpg)
+    
+    Modern minimalist style, suitable for business and tech content
+
+-   **Neon**
+
+    ---
+
+    ![neon](../../images/1080x1920/neon.jpg)
+    
+    Neon style, suitable for fashion and trendy content
+
+-   **Psychology Card**
+
+    ---
+
+    ![psychology_card](../../images/1080x1920/psychology_card.jpg)
+    
+    Psychology card style, suitable for knowledge popularization
+
+-   **Purple**
+
+    ---
+
+    ![purple](../../images/1080x1920/purple.jpg)
+    
+    Purple theme, suitable for dreamy and mysterious styles
+
+-   **Simple**
+
+    ---
+
+    ![simple](../../images/1080x1920/simple.png)
+    
+    Minimalist style, highlighting the content itself
+
+</div>
+
+---
+
+### Landscape Templates (1920x1080)
+
+Suitable for YouTube, Bilibili, and other video platforms.
+
+<div class="grid cards" markdown>
+
+-   **Ultrawide Minimal**
+
+    ---
+
+    ![ultrawide_minimal](../../images/1920x1080/ultrawide_minimal.jpg)
+    
+    Ultrawide minimalist style, suitable for desktop viewing
+
+-   **Wide Darktech**
+
+    ---
+
+    ![wide_darktech](../../images/1920x1080/wide_darktech.jpg)
+    
+    Dark tech style, suitable for technology and gaming content
+
+</div>
+
+---
+
+### Square Templates (1080x1080)
+
+Suitable for Instagram, WeChat Moments, and other platforms.
+
+<div class="grid cards" markdown>
+
+-   **Minimal Framed**
+
+    ---
+
+    ![minimal_framed](../../images/1080x1080/minimal_framed.jpg)
+    
+    Minimalist framed style, suitable for social media sharing
+
+</div>
 
 ---
 
@@ -16,33 +160,99 @@ Templates are located in the `templates/` directory, grouped by size:
 
 ```
 templates/
-├── 1080x1920/  # Portrait
-├── 1920x1080/  # Landscape
-└── 1080x1080/  # Square
+├── 1080x1920/  # Portrait (11 templates)
+├── 1920x1080/  # Landscape (2 templates)
+└── 1080x1080/  # Square (1 template)
 ```
 
 ---
 
-## Creating Templates
+## Creating Custom Templates
 
-1. Copy an existing template file
-2. Modify HTML and CSS
-3. Save to the corresponding size directory
-4. Select and use in Web interface
+### Steps
+
+1. Copy an existing template file from the `templates/` directory
+2. Modify HTML and CSS styles
+3. Save to the corresponding size directory with `.html` extension
+4. Use the new template name in configuration or Web interface
+
+### Template Variables
+
+Templates support the following Jinja2 variables:
+
+- `{{ title }}` - Video title (optional)
+- `{{ text }}` - Current scene text content
+- `{{ image }}` - Current scene image (if any)
+
+### Example Template
+
+```html
+<!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 class="content">
+        <div class="text">{{ text }}</div>
+    </div>
+</body>
+</html>
+```
 
 ---
 
-## Template Variables
+## Template Development Tips
 
-Templates support the following variables:
+### 1. Responsive Sizing
 
-- `{{ title }}` - Video title
-- `{{ text }}` - Scene text
-- `{{ image }}` - Scene image
+Ensure the template's `body` size matches the target video dimensions:
+
+- Portrait: `width: 1080px; height: 1920px;`
+- Landscape: `width: 1920px; height: 1080px;`
+- Square: `width: 1080px; height: 1080px;`
+
+### 2. Text Typography
+
+- Use appropriate font sizes and line heights for readability
+- Add shadows or backgrounds to text for better contrast
+- Control text length to avoid overflow
+
+### 3. Image Handling
+
+- Use `object-fit: cover` to ensure image filling
+- Add gradients or overlay layers to improve text readability
+- Consider fallback solutions for image loading failures
+
+### 4. Performance Optimization
+
+- Avoid overly complex CSS animations
+- Optimize background image sizes
+- Use system fonts or web-safe fonts
 
 ---
 
 ## More Information
 
-Detailed template development guide coming soon.
+For template development questions, feel free to ask in [GitHub Issues](https://github.com/AIDC-AI/Pixelle-Video/issues).
 

docs/zh/user-guide/templates.md

@@ -6,7 +6,151 @@
 
 ## 模板简介
 
-视频模板使用 HTML 定义视频画面的布局和样式。
+视频模板使用 HTML 定义视频画面的布局和样式。Pixelle-Video 提供了多种预设模板，覆盖不同的视频尺寸和风格需求。
+
+---
+
+## 内置模板预览
+
+### 竖屏模板 (1080x1920)
+
+适用于抖音、快手、小红书等短视频平台。
+
+<div class="grid cards" markdown>
+
+-   **Blur Card**
+
+    ---
+
+    ![blur_card](../../images/1080x1920/blur_card.png)
+    
+    模糊背景卡片风格，适合图文内容展示
+
+-   **Cartoon**
+
+    ---
+
+    ![cartoon](../../images/1080x1920/cartoon.png)
+    
+    卡通风格，适合轻松活泼的内容
+
+-   **Default**
+
+    ---
+
+    ![default](../../images/1080x1920/default.jpg)
+    
+    默认模板，简洁通用
+
+-   **Elegant**
+
+    ---
+
+    ![elegant](../../images/1080x1920/elegant.jpg)
+    
+    优雅风格，适合文艺、知性内容
+
+-   **Fashion Vintage**
+
+    ---
+
+    ![fashion_vintage](../../images/1080x1920/fashion_vintage.jpg)
+    
+    复古时尚风格，适合怀旧主题
+
+-   **Life Insights**
+
+    ---
+
+    ![life_insights](../../images/1080x1920/life_insights.jpg)
+    
+    生活感悟风格，适合心灵鸡汤类内容
+
+-   **Modern**
+
+    ---
+
+    ![modern](../../images/1080x1920/modern.jpg)
+    
+    现代简约风格，适合商务、科技内容
+
+-   **Neon**
+
+    ---
+
+    ![neon](../../images/1080x1920/neon.jpg)
+    
+    霓虹灯风格，适合时尚、潮流内容
+
+-   **Psychology Card**
+
+    ---
+
+    ![psychology_card](../../images/1080x1920/psychology_card.jpg)
+    
+    心理学卡片风格，适合知识科普
+
+-   **Purple**
+
+    ---
+
+    ![purple](../../images/1080x1920/purple.jpg)
+    
+    紫色主题，适合梦幻、神秘风格
+
+-   **Simple**
+
+    ---
+
+    ![simple](../../images/1080x1920/simple.png)
+    
+    极简风格，突出内容本身
+
+</div>
+
+---
+
+### 横屏模板 (1920x1080)
+
+适用于 YouTube、B站等视频平台。
+
+<div class="grid cards" markdown>
+
+-   **Ultrawide Minimal**
+
+    ---
+
+    ![ultrawide_minimal](../../images/1920x1080/ultrawide_minimal.jpg)
+    
+    超宽屏极简风格，适合桌面端观看
+
+-   **Wide Darktech**
+
+    ---
+
+    ![wide_darktech](../../images/1920x1080/wide_darktech.jpg)
+    
+    暗黑科技风格，适合技术、游戏内容
+
+</div>
+
+---
+
+### 方形模板 (1080x1080)
+
+适用于 Instagram、微信朋友圈等平台。
+
+<div class="grid cards" markdown>
+
+-   **Minimal Framed**
+
+    ---
+
+    ![minimal_framed](../../images/1080x1080/minimal_framed.jpg)
+    
+    极简边框风格，适合社交媒体分享
+
+</div>
 
 ---
 
@@ -16,33 +160,99 @@
 
 ```
 templates/
-├── 1080x1920/  # 竖屏
-├── 1920x1080/  # 横屏
-└── 1080x1080/  # 方形
+├── 1080x1920/  # 竖屏（11个模板）
+├── 1920x1080/  # 横屏（2个模板）
+└── 1080x1080/  # 方形（1个模板）
 ```
 
 ---
 
-## 创建模板
+## 创建自定义模板
 
-1. 复制现有模板文件
-2. 修改 HTML 和 CSS
-3. 保存到对应尺寸目录
-4. 在 Web 界面中选择使用
+### 步骤
+
+1. 从 `templates/` 目录复制一个现有模板文件
+2. 修改 HTML 和 CSS 样式
+3. 保存到对应尺寸目录下，使用 `.html` 扩展名
+4. 在配置或 Web 界面中使用新模板名称
+
+### 模板变量
+
+模板支持以下 Jinja2 变量：
+
+- `{{ title }}` - 视频标题（可选）
+- `{{ text }}` - 当前分镜的文本内容
+- `{{ image }}` - 当前分镜的图片（如果有）
+
+### 示例模板
+
+```html
+<!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 class="content">
+        <div class="text">{{ text }}</div>
+    </div>
+</body>
+</html>
+```
 
 ---
 
-## 模板变量
+## 模板开发技巧
 
-模板支持以下变量：
+### 1. 响应式尺寸
 
-- `{{ title }}` - 视频标题
-- `{{ text }}` - 分镜文本
-- `{{ image }}` - 分镜图片
+确保模板的 `body` 尺寸与目标视频尺寸一致：
+
+- 竖屏：`width: 1080px; height: 1920px;`
+- 横屏：`width: 1920px; height: 1080px;`
+- 方形：`width: 1080px; height: 1080px;`
+
+### 2. 文本排版
+
+- 使用合适的字体大小和行高，确保可读性
+- 为文字添加阴影或背景，提高对比度
+- 控制文本长度，避免溢出
+
+### 3. 图片处理
+
+- 使用 `object-fit: cover` 确保图片填充
+- 添加渐变或遮罩层，提升文字可读性
+- 考虑图片加载失败的降级方案
+
+### 4. 性能优化
+
+- 避免使用过于复杂的 CSS 动画
+- 优化背景图片大小
+- 使用系统字体或 Web 安全字体
 
 ---
 
 ## 更多信息
 
-详细的模板开发指南即将推出。
+如有模板开发相关问题，欢迎在 [GitHub Issues](https://github.com/AIDC-AI/Pixelle-Video/issues) 中提问。