nanobanana-ppt-visualizer

PPT Visual Enhancement Tool

Task Objectives

This Skill is used to: generate high-quality visual presentations for PPT content, including image rendering, interactive players, and video composition
Capabilities include: stylized image generation, HTML player generation, video asset management, FFmpeg video composition
Trigger conditions: the user needs to add visual effects to PPT content, or work in coordination with the ppt-generator Skill

Prerequisites

Dependency description: dependency packages required by the scripts
```
pillow>=9.0.0
python-dotenv>=0.19.0
```
System dependency: FFmpeg (optional, used for video composition)
```
# Ubuntu/Debian
sudo apt-get install ffmpeg
```

macOS

brew install ffmpeg


## 操作步骤

### 标准流程（与 ppt-generator 协同）

#### 步骤 1：获取 PPT 内容（协作模式）
1. 与 ppt-generator Skill 协同：
 - ppt-generator 负责：主题分析、内容规划、结构设计
 - 输出格式：符合规范的 JSON 数据（详见 [references/ppt_structure_guide.md](references/ppt_structure_guide.md)）
2. 接收 JSON 数据，包含：
 - metadata：标题、作者、主题、关键词
 - slides：每页的布局、标题、内容、图片标注

#### 步骤 2：选择视觉风格
1. 扫描 `assets/styles/` 目录，列出可用风格：
 - `gradient-glass.md`：渐变毛玻璃风格（科技感、商务）
 - `vector-illustration.md`：矢量插画风格（温暖、教育）
2. 根据内容主题和场景推荐合适的风格
3. 智能体生成图片描述提示词，参考风格模板

#### 步骤 3：生成视觉素材
1. **图片生成**（使用智能体能力）：
 - 根据每页内容和风格模板，生成图片描述
 - 使用智能体的图像生成能力创建图片
 - 保存为 slide-01.png, slide-02.png 等

2. **可选：视频生成**（需要可灵 AI API）：
 - 如果用户需要视频转场，调用可灵 AI API
 - 生成首页预览视频和页面转场视频
 - 使用 `scripts/video_materials.py` 管理视频素材

#### 步骤 4：生成播放器
1. 调用 `scripts/generate_viewer.py` 生成 HTML 播放器：
 - 支持图片轮播、键盘导航、全屏播放
 - 支持视频+图片混合播放（如果生成了视频）
2. 输出交互式播放器，可直接在浏览器中预览

#### 步骤 5：视频合成（可选）
1. 如果生成了视频素材，调用 `scripts/video_composer.py`：
 - 使用 FFmpeg 合成完整视频
 - 统一分辨率和帧率
 - 输出 full_ppt_video.mp4

### 独立使用模式

当用户直接提供 PPT 内容（JSON 格式）时：

1. 读取用户提供的 JSON 文件或内容
2. 执行步骤 2-5，生成视觉呈现

## 协同工作流程

### 与 ppt-generator Skill 配合

User request: "Generate a PPT about AI products"

┌─────────────────────────────────────────────────────────┐ │ ppt-generator Skill │ ├─────────────────────────────────────────────────────────┤ │ 1. Theme Analyst: analyzes the theme and generates an outline │ │ 2. Template Designer: recommends layouts │ │ 3. Content Planner: plans the content structure │ │ 4. Text Creator: writes the content │ │ 5. Visual Designer: provides illustration suggestions │ │ 6. Optimization Editor: optimizes the text │ │ 7. PPT Builder: generates JSON data │ └─────────────────────────────────────────────────────────┘ │ ▼ Output JSON ┌─────────────────────────────────────────────────────────┐ │ nanobanana-ppt-visualizer Skill │ ├─────────────────────────────────────────────────────────┤ │ 1. Receive JSON data │ │ 2. Select visual style │ │ 3. Generate images (using agent capabilities) │ │ 4. Generate HTML player │ │ 5. Optional: video composition │ └─────────────────────────────────────────────────────────┘ │ ▼ Output Interactive player + complete video (optional)


### 数据格式兼容性

ppt-generator 输出的 JSON 格式与 nanobanana-ppt-visualizer 完全兼容：

```json
{
  "metadata": {
    "title": "演示文稿标题",
    "author": "作者姓名"
  },
  "slides": [
    {
      "layout": "TitleSlide",
      "title": "封面标题",
      "content": ["副标题"],
      "notes": "备注"
    }
  ]
}

Resource Index

Image generation script: see scripts/generate_viewer.py(Purpose: generate HTML player and image management)
Video asset management: see scripts/video_materials.py(Purpose: manage video assets)
Video composition: see scripts/video_composer.py(Purpose: FFmpeg video composition)
Format specification: see references/ppt_structure_guide.md(Purpose: JSON data format standard)
Collaboration guide: see references/collaboration_guide.md(Purpose: guide for collaborating with ppt-generator)
Style templates: see assets/styles/(Optional: gradient-glass.md, vector-illustration.md)
HTML templates: see assets/templates/(Optional: viewer.html, video_viewer.html)

Notes

This Skill is fully compatible with the ppt-generator Skill and can collaborate seamlessly
Image generation uses the agent's image generation capability, with no third-party API required
The video generation feature requires the Kling AI API (optional); configure the key if you need to use it
FFmpeg is an optional dependency and is only needed when using the video composition feature
Maintain interaction with the user and seek feedback at key points (such as style selection)

Usage Examples

Example 1: Full collaboration with ppt-generator

Feature description: The two Skills collaborate fully, from content to visuals
Execution method: ppt-generator (7 roles) → nanobanana-ppt-visualizer (visual generation)
User instruction: "Generate a PPT about AI products, using the gradient glass style"
Output: interactive player + complete video (optional)

Example 2: Generate a player based on existing JSON

Feature description: Receive JSON data and generate a player
Execution method: nanobanana-ppt-visualizer runs independently
Key parameters: JSON file path, style selection
Command:python scripts/generate_viewer.py --input ./ppt_data.json --style gradient-glass

Example 3: Generate images only (no video)

Feature description: Use the agent to generate PPT images
Execution method: agent (image generation) + script (player generation)
Applicable scenarios: quick preview, static display
Output: HTML player + image files

Example 4: Complete video composition

Feature description: Compose a complete video including transitions
Execution method: script (FFmpeg composition)
Prerequisite: images and video assets have been generated
Command:python scripts/video_composer.py --output ./full_ppt_video.mp4