AI-Video/docs/en/user-guide/templates.md

# Template Development

How to create custom video templates.

---

## Template Introduction

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

-   **Satirical Cartoon**

    ---

    ![satirical_cartoon](../../images/1080x1920/satirical_cartoon.png)
    
    80s satirical cartoon style for spiritual tales

-   **Simple Black Background**

    ---

    ![simple_black](../../images/1080x1920/simple_black.png)
    
    Simple black background, suitable for inspirational content

-   **Simple Line Drawing**

    ---

    ![simple_line_drawing](../../images/1080x1920/simple_line_drawing.png)
    
    Simple line drawing style for cognitive growth content
</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>

---

## Template Naming Convention

Templates follow a unified naming convention to distinguish different types:

- **`static_*.html`**: Static templates
  - No AI-generated media content required
  - Pure text style rendering
  - Suitable for quick generation and low-cost scenarios

- **`image_*.html`**: Image templates
  - Uses AI-generated images as background
  - Invokes ComfyUI image generation workflows
  - Suitable for content requiring visual illustrations

- **`video_*.html`**: Video templates
  - Uses AI-generated videos as background
  - Invokes ComfyUI video generation workflows
  - Creates dynamic video content with enhanced expressiveness

## Template Structure

Templates are located in the `templates/` directory, grouped by size:

```
templates/
├── 1080x1920/  # Portrait
│   ├── static_*.html   # Static templates
│   ├── image_*.html    # Image templates
│   └── video_*.html    # Video templates
├── 1920x1080/  # Landscape
│   └── image_*.html    # Image templates
└── 1080x1080/  # Square
    └── image_*.html    # Image templates
```

---

## Creating Custom Templates

### 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 Development Tips

### 1. Responsive Sizing

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

For template development questions, feel free to ask in [GitHub Issues](https://github.com/AIDC-AI/Pixelle-Video/issues).