659 lines
22 KiB
Python
659 lines
22 KiB
Python
|
#!/usr/bin/env python3
|
|||
|
|
"""
|
|||
|
|
SlideRenderer — Playwright截图管线
|
|||
|
|
将HTML模板渲染为PNG背景图，用于嵌入PPT
|
|||
|
|
|
|||
|
|
配色方案: 深海蓝#0A3C5F + 青绿#18898D + 金色#C9A027
|
|||
|
|
中文字体: Heiti TC (macOS内置)
|
|||
|
|
|
|||
|
|
使用方法:
|
|||
|
|
renderer = SlideRenderer()
|
|||
|
|
png_path = renderer.render_slide({
|
|||
|
|
"type": "area_chart",
|
|||
|
|
"title": "账户价值增长",
|
|||
|
|
"data": {"years": [5,10,15,20], "values": [100,150,200,280]},
|
|||
|
|
"narrative": "复利效应让财富持续增值"
|
|||
|
|
})
|
|||
|
|
"""
|
|||
|
|
|
|||
|
|
import os
|
|||
|
|
import sys
|
|||
|
|
import json
|
|||
|
|
import base64
|
|||
|
|
import asyncio
|
|||
|
|
from pathlib import Path
|
|||
|
|
from typing import Optional
|
|||
|
|
|
|||
|
|
# 品牌配色
|
|||
|
|
BRAND_COLORS = {
|
|||
|
|
"primary": "#0A3C5F", # 深海蓝
|
|||
|
|
"accent_teal": "#18898D", # 青绿
|
|||
|
|
"accent_gold": "#C9A027", # 金色
|
|||
|
|
"text_dark": "#1A1A2E",
|
|||
|
|
"text_light": "#FFFFFF",
|
|||
|
|
"bg_light": "#F8F9FA",
|
|||
|
|
"bg_card": "#FFFFFF",
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
FONT_FAMILY = "'Heiti TC', 'STHeiti', 'PingFang TC', 'Microsoft YaHei', sans-serif"
|
|||
|
|
|
|||
|
|
# ─── HTML模板 ──────────────────────────────────────────────
|
|||
|
|
|
|||
|
|
TEMPLATE_AREA_CHART = """<!DOCTYPE html>
|
|||
|
|
<html lang="zh-HK">
|
|||
|
|
<head>
|
|||
|
|
<meta charset="UTF-8">
|
|||
|
|
<style>
|
|||
|
|
* {{ margin: 0; padding: 0; box-sizing: border-box; }}
|
|||
|
|
body {{
|
|||
|
|
font-family: {font};
|
|||
|
|
width: 1280px; height: 720px;
|
|||
|
|
background: linear-gradient(135deg, {primary} 0%, #0D4F7A 100%);
|
|||
|
|
display: flex; flex-direction: column; padding: 40px;
|
|||
|
|
}}
|
|||
|
|
.header {{
|
|||
|
|
display: flex; align-items: center; margin-bottom: 24px;
|
|||
|
|
}}
|
|||
|
|
.accent-bar {{
|
|||
|
|
width: 6px; height: 48px; background: {gold}; border-radius: 3px;
|
|||
|
|
margin-right: 20px;
|
|||
|
|
}}
|
|||
|
|
.page-title {{
|
|||
|
|
font-size: 28px; font-weight: 600; color: {white}; letter-spacing: 1px;
|
|||
|
|
}}
|
|||
|
|
.chart-container {{
|
|||
|
|
flex: 1; display: flex; gap: 40px; align-items: stretch;
|
|||
|
|
}}
|
|||
|
|
.chart-area {{
|
|||
|
|
flex: 1; background: rgba(255,255,255,0.08); border-radius: 16px;
|
|||
|
|
padding: 24px; position: relative; display: flex; flex-direction: column;
|
|||
|
|
}}
|
|||
|
|
.narrative-card {{
|
|||
|
|
width: 320px; background: {white}; border-radius: 16px; padding: 28px;
|
|||
|
|
display: flex; flex-direction: column; justify-content: center;
|
|||
|
|
}}
|
|||
|
|
.narrative-label {{
|
|||
|
|
font-size: 13px; color: {teal}; font-weight: 600; letter-spacing: 2px;
|
|||
|
|
text-transform: uppercase; margin-bottom: 12px;
|
|||
|
|
}}
|
|||
|
|
.narrative-text {{
|
|||
|
|
font-size: 20px; color: {dark}; line-height: 1.6; font-weight: 500;
|
|||
|
|
}}
|
|||
|
|
.highlights {{
|
|||
|
|
margin-top: 24px; padding-top: 20px; border-top: 1px solid #EEE;
|
|||
|
|
}}
|
|||
|
|
.highlight-item {{
|
|||
|
|
display: flex; justify-content: space-between; margin: 8px 0;
|
|||
|
|
font-size: 14px;
|
|||
|
|
}}
|
|||
|
|
.highlight-label {{ color: #888; }}
|
|||
|
|
.highlight-value {{ color: {teal}; font-weight: 700; font-size: 16px; }}
|
|||
|
|
canvas {{ flex: 1; }}
|
|||
|
|
</style>
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
<div class="header">
|
|||
|
|
<div class="accent-bar"></div>
|
|||
|
|
<div class="page-title">{title}</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="chart-container">
|
|||
|
|
<div class="chart-area">
|
|||
|
|
<canvas id="chart"></canvas>
|
|||
|
|
</div>
|
|||
|
|
<div class="narrative-card">
|
|||
|
|
<div class="narrative-label">核心叙事</div>
|
|||
|
|
<div class="narrative-text">{narrative}</div>
|
|||
|
|
<div class="highlights">
|
|||
|
|
{highlights_html}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
|
|||
|
|
<script>
|
|||
|
|
const ctx = document.getElementById('chart').getContext('2d');
|
|||
|
|
const gradient = ctx.createLinearGradient(0, 0, 0, 400);
|
|||
|
|
gradient.addColorStop(0, 'rgba(24,137,141,0.6)');
|
|||
|
|
gradient.addColorStop(1, 'rgba(24,137,141,0.05)');
|
|||
|
|
|
|||
|
|
new Chart(ctx, {{
|
|||
|
|
type: 'line',
|
|||
|
|
data: {{
|
|||
|
|
labels: {years_json},
|
|||
|
|
datasets: [{{
|
|||
|
|
label: '账户价值',
|
|||
|
|
data: {values_json},
|
|||
|
|
fill: true,
|
|||
|
|
backgroundColor: gradient,
|
|||
|
|
borderColor: '{teal}',
|
|||
|
|
borderWidth: 3,
|
|||
|
|
pointBackgroundColor: '{gold}',
|
|||
|
|
pointBorderColor: '{white}',
|
|||
|
|
pointBorderWidth: 2,
|
|||
|
|
pointRadius: 6,
|
|||
|
|
pointHoverRadius: 8,
|
|||
|
|
tension: 0.4
|
|||
|
|
}}]
|
|||
|
|
}},
|
|||
|
|
options: {{
|
|||
|
|
responsive: true,
|
|||
|
|
maintainAspectRatio: false,
|
|||
|
|
plugins: {{
|
|||
|
|
legend: {{ display: false }},
|
|||
|
|
tooltip: {{
|
|||
|
|
backgroundColor: '{primary}',
|
|||
|
|
titleColor: '{white}',
|
|||
|
|
bodyColor: '{white}',
|
|||
|
|
padding: 12,
|
|||
|
|
cornerRadius: 8,
|
|||
|
|
callbacks: {{
|
|||
|
|
label: ctx => `HK$ ${{ctx.raw.toLocaleString()}}`
|
|||
|
|
}}
|
|||
|
|
}}
|
|||
|
|
}},
|
|||
|
|
scales: {{
|
|||
|
|
x: {{
|
|||
|
|
grid: {{ color: 'rgba(255,255,255,0.1)' }},
|
|||
|
|
ticks: {{ color: 'rgba(255,255,255,0.7)', font: {{ size: 12 }} }}
|
|||
|
|
}},
|
|||
|
|
y: {{
|
|||
|
|
grid: {{ color: 'rgba(255,255,255,0.1)' }},
|
|||
|
|
ticks: {{
|
|||
|
|
color: 'rgba(255,255,255,0.7)',
|
|||
|
|
font: {{ size: 12 }},
|
|||
|
|
callback: v => `HK$ ${{(v/1000).toFixed(0)}}K`
|
|||
|
|
}}
|
|||
|
|
}}
|
|||
|
|
}}
|
|||
|
|
}}
|
|||
|
|
}});
|
|||
|
|
</script>
|
|||
|
|
</body>
|
|||
|
|
</html>"""
|
|||
|
|
|
|||
|
|
|
|||
|
|
TEMPLATE_KPI_CARDS = """<!DOCTYPE html>
|
|||
|
|
<html lang="zh-HK">
|
|||
|
|
<head>
|
|||
|
|
<meta charset="UTF-8">
|
|||
|
|
<style>
|
|||
|
|
* {{ margin: 0; padding: 0; box-sizing: border-box; }}
|
|||
|
|
body {{
|
|||
|
|
font-family: {font};
|
|||
|
|
width: 1280px; height: 720px;
|
|||
|
|
background: linear-gradient(135deg, {primary} 0%, #0D4F7A 100%);
|
|||
|
|
display: flex; flex-direction: column; padding: 48px;
|
|||
|
|
}}
|
|||
|
|
.header {{
|
|||
|
|
display: flex; align-items: center; margin-bottom: 36px;
|
|||
|
|
}}
|
|||
|
|
.accent-bar {{
|
|||
|
|
width: 6px; height: 48px; background: {gold}; border-radius: 3px;
|
|||
|
|
margin-right: 20px;
|
|||
|
|
}}
|
|||
|
|
.page-title {{
|
|||
|
|
font-size: 28px; font-weight: 600; color: {white}; letter-spacing: 1px;
|
|||
|
|
}}
|
|||
|
|
.kpi-grid {{
|
|||
|
|
flex: 1; display: grid; grid-template-columns: repeat(3, 1fr);
|
|||
|
|
grid-template-rows: repeat(2, 1fr);
|
|||
|
|
gap: 24px;
|
|||
|
|
}}
|
|||
|
|
.kpi-card {{
|
|||
|
|
background: {white}; border-radius: 20px; padding: 28px;
|
|||
|
|
display: flex; flex-direction: column; justify-content: space-between;
|
|||
|
|
box-shadow: 0 8px 32px rgba(0,0,0,0.15);
|
|||
|
|
transition: transform 0.2s;
|
|||
|
|
}}
|
|||
|
|
.kpi-card:hover {{ transform: translateY(-4px); }}
|
|||
|
|
.kpi-label {{
|
|||
|
|
font-size: 13px; color: #888; letter-spacing: 2px; text-transform: uppercase;
|
|||
|
|
}}
|
|||
|
|
.kpi-value {{
|
|||
|
|
font-size: 42px; font-weight: 700; color: {teal}; line-height: 1.1;
|
|||
|
|
}}
|
|||
|
|
.kpi-unit {{
|
|||
|
|
font-size: 16px; color: {gold}; font-weight: 600; margin-left: 4px;
|
|||
|
|
}}
|
|||
|
|
.kpi-sub {{
|
|||
|
|
font-size: 13px; color: #AAA; margin-top: 4px;
|
|||
|
|
}}
|
|||
|
|
.narrative {{
|
|||
|
|
margin-top: 32px; text-align: center;
|
|||
|
|
}}
|
|||
|
|
.narrative-text {{
|
|||
|
|
font-size: 22px; color: rgba(255,255,255,0.9); font-weight: 500;
|
|||
|
|
letter-spacing: 1px;
|
|||
|
|
}}
|
|||
|
|
</style>
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
<div class="header">
|
|||
|
|
<div class="accent-bar"></div>
|
|||
|
|
<div class="page-title">{title}</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="kpi-grid">
|
|||
|
|
{kpi_cards_html}
|
|||
|
|
</div>
|
|||
|
|
<div class="narrative">
|
|||
|
|
<div class="narrative-text">{narrative}</div>
|
|||
|
|
</div>
|
|||
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
|
|||
|
|
</body>
|
|||
|
|
</html>"""
|
|||
|
|
|
|||
|
|
|
|||
|
|
TEMPLATE_COMPARISON = """<!DOCTYPE html>
|
|||
|
|
<html lang="zh-HK">
|
|||
|
|
<head>
|
|||
|
|
<meta charset="UTF-8">
|
|||
|
|
<style>
|
|||
|
|
* {{ margin: 0; padding: 0; box-sizing: border-box; }}
|
|||
|
|
body {{
|
|||
|
|
font-family: {font};
|
|||
|
|
width: 1280px; height: 720px;
|
|||
|
|
background: linear-gradient(135deg, {primary} 0%, #0D4F7A 100%);
|
|||
|
|
display: flex; flex-direction: column; padding: 40px;
|
|||
|
|
}}
|
|||
|
|
.header {{
|
|||
|
|
display: flex; align-items: center; margin-bottom: 28px;
|
|||
|
|
}}
|
|||
|
|
.accent-bar {{
|
|||
|
|
width: 6px; height: 48px; background: {gold}; border-radius: 3px;
|
|||
|
|
margin-right: 20px;
|
|||
|
|
}}
|
|||
|
|
.page-title {{
|
|||
|
|
font-size: 28px; font-weight: 600; color: {white}; letter-spacing: 1px;
|
|||
|
|
}}
|
|||
|
|
.comparison-container {{
|
|||
|
|
flex: 1; display: flex; gap: 20px;
|
|||
|
|
}}
|
|||
|
|
.product-col {{
|
|||
|
|
flex: 1; background: {white}; border-radius: 20px; padding: 28px;
|
|||
|
|
display: flex; flex-direction: column;
|
|||
|
|
}}
|
|||
|
|
.product-badge {{
|
|||
|
|
display: inline-block; padding: 6px 16px; border-radius: 20px;
|
|||
|
|
font-size: 13px; font-weight: 600; letter-spacing: 1px;
|
|||
|
|
margin-bottom: 20px; align-self: flex-start;
|
|||
|
|
}}
|
|||
|
|
.product-name {{
|
|||
|
|
font-size: 22px; font-weight: 700; color: {dark}; margin-bottom: 16px;
|
|||
|
|
}}
|
|||
|
|
.comparison-table {{
|
|||
|
|
flex: 1;
|
|||
|
|
}}
|
|||
|
|
.row {{
|
|||
|
|
display: flex; justify-content: space-between; padding: 14px 0;
|
|||
|
|
border-bottom: 1px solid #F0F0F0; font-size: 14px;
|
|||
|
|
}}
|
|||
|
|
.row:last-child {{ border-bottom: none; }}
|
|||
|
|
.row-label {{ color: #888; }}
|
|||
|
|
.row-value {{ color: {dark}; font-weight: 600; }}
|
|||
|
|
.highlight-row {{
|
|||
|
|
background: linear-gradient(90deg, rgba(24,137,141,0.08), transparent);
|
|||
|
|
border-radius: 8px; padding: 14px 12px;
|
|||
|
|
}}
|
|||
|
|
.narrative-bar {{
|
|||
|
|
margin-top: 24px; background: linear-gradient(135deg, {teal}, {primary});
|
|||
|
|
color: {white}; padding: 20px; border-radius: 12px; text-align: center;
|
|||
|
|
}}
|
|||
|
|
.narrative-text {{ font-size: 18px; font-weight: 500; }}
|
|||
|
|
</style>
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
<div class="header">
|
|||
|
|
<div class="accent-bar"></div>
|
|||
|
|
<div class="page-title">{title}</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="comparison-container">
|
|||
|
|
{columns_html}
|
|||
|
|
</div>
|
|||
|
|
<div class="narrative-bar">
|
|||
|
|
<div class="narrative-text">{narrative}</div>
|
|||
|
|
</div>
|
|||
|
|
</body>
|
|||
|
|
</html>"""
|
|||
|
|
|
|||
|
|
|
|||
|
|
# ─── SlideRenderer主类 ──────────────────────────────────────
|
|||
|
|
|
|||
|
|
class SlideRenderer:
|
|||
|
|
"""Playwright截图管线"""
|
|||
|
|
|
|||
|
|
def __init__(
|
|||
|
|
self,
|
|||
|
|
output_dir: str = "/tmp/slide_renders",
|
|||
|
|
viewport_width: int = 1280,
|
|||
|
|
viewport_height: int = 720,
|
|||
|
|
timeout_ms: int = 30000,
|
|||
|
|
):
|
|||
|
|
self.output_dir = Path(output_dir)
|
|||
|
|
self.output_dir.mkdir(parents=True, exist_ok=True)
|
|||
|
|
self.viewport_width = viewport_width
|
|||
|
|
self.viewport_height = viewport_height
|
|||
|
|
self.timeout_ms = timeout_ms
|
|||
|
|
self._playwright = None
|
|||
|
|
self._browser = None
|
|||
|
|
|
|||
|
|
# ─── Playwright生命周期 ────────────────────────────────
|
|||
|
|
|
|||
|
|
async def _ensure_playwright(self):
|
|||
|
|
"""懒加载Playwright"""
|
|||
|
|
if self._playwright is None:
|
|||
|
|
from playwright.async_api import async_playwright
|
|||
|
|
self._playwright = await async_playwright().start()
|
|||
|
|
if self._browser is None:
|
|||
|
|
self._browser = await self._playwright.chromium.launch(
|
|||
|
|
headless=True,
|
|||
|
|
args=["--no-sandbox", "--disable-setuid-sandbox"]
|
|||
|
|
)
|
|||
|
|
|
|||
|
|
async def _close(self):
|
|||
|
|
"""关闭浏览器"""
|
|||
|
|
if self._browser:
|
|||
|
|
await self._browser.close()
|
|||
|
|
self._browser = None
|
|||
|
|
|
|||
|
|
# ─── 核心渲染方法 ──────────────────────────────────────
|
|||
|
|
|
|||
|
|
async def render_async(self, slide_spec: dict) -> str:
|
|||
|
|
"""
|
|||
|
|
异步渲染一张幻灯片
|
|||
|
|
slide_spec: {
|
|||
|
|
"type": "area_chart" | "kpi_cards" | "comparison" | "table",
|
|||
|
|
"title": str,
|
|||
|
|
"narrative": str,
|
|||
|
|
"data": {...} # 类型相关数据
|
|||
|
|
}
|
|||
|
|
返回: PNG文件路径
|
|||
|
|
"""
|
|||
|
|
await self._ensure_playwright()
|
|||
|
|
|
|||
|
|
html = self._build_html(slide_spec)
|
|||
|
|
page = await self._browser.new_page(
|
|||
|
|
viewport={"width": self.viewport_width, "height": self.viewport_height}
|
|||
|
|
)
|
|||
|
|
|
|||
|
|
try:
|
|||
|
|
await page.set_content(html, timeout=self.timeout_ms)
|
|||
|
|
# 等待Chart.js渲染完成
|
|||
|
|
if slide_spec.get("type") in ("area_chart", "line_chart", "bar_chart"):
|
|||
|
|
await page.wait_for_function(
|
|||
|
|
"typeof Chart !== 'undefined' && document.querySelectorAll('canvas').length > 0",
|
|||
|
|
timeout=10000
|
|||
|
|
)
|
|||
|
|
# 额外等待动画
|
|||
|
|
await asyncio.sleep(1.5)
|
|||
|
|
|
|||
|
|
# 生成PNG
|
|||
|
|
output_path = self.output_dir / f"slide_{slide_spec.get('_id', 'tmp')}.png"
|
|||
|
|
await page.screenshot(
|
|||
|
|
path=str(output_path),
|
|||
|
|
type="png",
|
|||
|
|
full_page=False,
|
|||
|
|
)
|
|||
|
|
return str(output_path)
|
|||
|
|
|
|||
|
|
finally:
|
|||
|
|
await page.close()
|
|||
|
|
|
|||
|
|
def render(self, slide_spec: dict) -> str:
|
|||
|
|
"""同步封装"""
|
|||
|
|
try:
|
|||
|
|
loop = asyncio.get_running_loop()
|
|||
|
|
except RuntimeError:
|
|||
|
|
# 没有运行中的loop，创建新的
|
|||
|
|
return asyncio.run(self.render_async(slide_spec))
|
|||
|
|
else:
|
|||
|
|
# 已有loop，在新线程中运行
|
|||
|
|
import concurrent.futures
|
|||
|
|
with concurrent.futures.ThreadPoolExecutor() as executor:
|
|||
|
|
future = executor.submit(asyncio.run, self.render_async(slide_spec))
|
|||
|
|
return future.result()
|
|||
|
|
|
|||
|
|
# ─── HTML构建 ─────────────────────────────────────────
|
|||
|
|
|
|||
|
|
def _build_html(self, spec: dict) -> str:
|
|||
|
|
t = spec["type"]
|
|||
|
|
title = spec.get("title", "")
|
|||
|
|
narrative = spec.get("narrative", "")
|
|||
|
|
|
|||
|
|
common = {
|
|||
|
|
"font": FONT_FAMILY,
|
|||
|
|
"primary": BRAND_COLORS["primary"],
|
|||
|
|
"teal": BRAND_COLORS["accent_teal"],
|
|||
|
|
"gold": BRAND_COLORS["accent_gold"],
|
|||
|
|
"white": BRAND_COLORS["text_light"],
|
|||
|
|
"dark": BRAND_COLORS["text_dark"],
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if t in ("area_chart", "line_chart"):
|
|||
|
|
return self._build_area_chart(spec, title, narrative, common)
|
|||
|
|
elif t == "kpi_cards":
|
|||
|
|
return self._build_kpi_cards(spec, title, narrative, common)
|
|||
|
|
elif t == "comparison":
|
|||
|
|
return self._build_comparison(spec, title, narrative, common)
|
|||
|
|
elif t == "table":
|
|||
|
|
return self._build_table(spec, title, narrative, common)
|
|||
|
|
else:
|
|||
|
|
return self._build_simple(spec, title, narrative, common)
|
|||
|
|
|
|||
|
|
def _build_area_chart(self, spec, title, narrative, c):
|
|||
|
|
data = spec.get("data", {})
|
|||
|
|
years = data.get("years", list(range(1, 21)))
|
|||
|
|
values = data.get("values", [100] * len(years))
|
|||
|
|
|
|||
|
|
highlights = spec.get("highlights", [])
|
|||
|
|
highlights_html = ""
|
|||
|
|
for h in highlights[:4]:
|
|||
|
|
if isinstance(h, dict):
|
|||
|
|
highlights_html += f"""
|
|||
|
|
<div class="highlight-item">
|
|||
|
|
<span class="highlight-label">{h.get('label','')}</span>
|
|||
|
|
<span class="highlight-value">{h.get('value','')}</span>
|
|||
|
|
</div>"""
|
|||
|
|
else:
|
|||
|
|
highlights_html += f"""
|
|||
|
|
<div class="highlight-item">
|
|||
|
|
<span class="highlight-label">{h}</span>
|
|||
|
|
<span class="highlight-value">—</span>
|
|||
|
|
</div>"""
|
|||
|
|
|
|||
|
|
return TEMPLATE_AREA_CHART.format(
|
|||
|
|
title=title,
|
|||
|
|
narrative=narrative,
|
|||
|
|
years_json=json.dumps(years),
|
|||
|
|
values_json=json.dumps(values),
|
|||
|
|
highlights_html=highlights_html,
|
|||
|
|
**c
|
|||
|
|
)
|
|||
|
|
|
|||
|
|
def _build_kpi_cards(self, spec, title, narrative, c):
|
|||
|
|
cards = spec.get("kpis", [])
|
|||
|
|
cards_html = ""
|
|||
|
|
for kpi in cards:
|
|||
|
|
badge_color = kpi.get("badge_color", c["teal"])
|
|||
|
|
cards_html += f"""
|
|||
|
|
<div class="kpi-card">
|
|||
|
|
<div class="kpi-label">{kpi.get('label','')}</div>
|
|||
|
|
<div class="kpi-value">{kpi.get('value','')}<span class="kpi-unit">{kpi.get('unit','')}</span></div>
|
|||
|
|
<div class="kpi-sub">{kpi.get('sub','')}</div>
|
|||
|
|
</div>"""
|
|||
|
|
|
|||
|
|
return TEMPLATE_KPI_CARDS.format(
|
|||
|
|
title=title,
|
|||
|
|
narrative=narrative,
|
|||
|
|
kpi_cards_html=cards_html,
|
|||
|
|
**c
|
|||
|
|
)
|
|||
|
|
|
|||
|
|
def _build_comparison(self, spec, title, narrative, c):
|
|||
|
|
columns = spec.get("columns", [])
|
|||
|
|
columns_html = ""
|
|||
|
|
for col in columns:
|
|||
|
|
badge_color = col.get("badge_color", c["teal"])
|
|||
|
|
rows_html = ""
|
|||
|
|
for row in col.get("rows", []):
|
|||
|
|
rows_html += f"""
|
|||
|
|
<div class="row">
|
|||
|
|
<span class="row-label">{row.get('label','')}</span>
|
|||
|
|
<span class="row-value">{row.get('value','')}</span>
|
|||
|
|
</div>"""
|
|||
|
|
|
|||
|
|
columns_html += f"""
|
|||
|
|
<div class="product-col">
|
|||
|
|
<div class="product-badge" style="background:{badge_color}20; color:{badge_color}">
|
|||
|
|
{col.get('badge','')}
|
|||
|
|
</div>
|
|||
|
|
<div class="product-name">{col.get('name','')}</div>
|
|||
|
|
<div class="comparison-table">{rows_html}</div>
|
|||
|
|
</div>"""
|
|||
|
|
|
|||
|
|
return TEMPLATE_COMPARISON.format(
|
|||
|
|
title=title,
|
|||
|
|
narrative=narrative,
|
|||
|
|
columns_html=columns_html,
|
|||
|
|
**c
|
|||
|
|
)
|
|||
|
|
|
|||
|
|
def _build_table(self, spec, title, narrative, c):
|
|||
|
|
# 简化表格模板
|
|||
|
|
rows = spec.get("rows", [])
|
|||
|
|
header = spec.get("header", [])
|
|||
|
|
header_html = "".join(f"<th>{h}</th>" for h in header)
|
|||
|
|
rows_html = ""
|
|||
|
|
for row in rows:
|
|||
|
|
rows_html += "<tr>" + "".join(f"<td>{v}</td>" for v in row) + "</tr>"
|
|||
|
|
|
|||
|
|
return f"""<!DOCTYPE html>
|
|||
|
|
<html><head><meta charset="UTF-8">
|
|||
|
|
<style>
|
|||
|
|
* {{ margin: 0; padding: 0; box-sizing: border-box; }}
|
|||
|
|
body {{ font-family: {c['font']}; width: 1280px; height: 720px;
|
|||
|
|
background: linear-gradient(135deg, {c['primary']} 0%, #0D4F7A 100%);
|
|||
|
|
display: flex; flex-direction: column; padding: 40px; }}
|
|||
|
|
.header {{ display: flex; align-items: center; margin-bottom: 28px; }}
|
|||
|
|
.accent-bar {{ width: 6px; height: 48px; background: {c['gold']}; border-radius: 3px; margin-right: 20px; }}
|
|||
|
|
.page-title {{ font-size: 28px; font-weight: 600; color: {c['white']}; }}
|
|||
|
|
.table-wrap {{ flex: 1; background: white; border-radius: 16px; overflow: hidden; }}
|
|||
|
|
table {{ width: 100%; border-collapse: collapse; }}
|
|||
|
|
th {{ background: {c['primary']}; color: white; padding: 16px 20px; text-align: left; font-size: 14px; letter-spacing: 1px; }}
|
|||
|
|
td {{ padding: 14px 20px; border-bottom: 1px solid #F0F0F0; font-size: 14px; color: {c['dark']}; }}
|
|||
|
|
tr:last-child td {{ border-bottom: none; }}
|
|||
|
|
tr:nth-child(even) td {{ background: #F8F9FA; }}
|
|||
|
|
.narrative {{ margin-top: 24px; text-align: center; }}
|
|||
|
|
.narrative-text {{ font-size: 20px; color: rgba(255,255,255,0.9); font-weight: 500; }}
|
|||
|
|
</style></head>
|
|||
|
|
<body>
|
|||
|
|
<div class="header"><div class="accent-bar"></div><div class="page-title">{title}</div></div>
|
|||
|
|
<div class="table-wrap"><table><thead><tr>{header_html}</tr></thead><tbody>{rows_html}</tbody></table></div>
|
|||
|
|
<div class="narrative"><div class="narrative-text">{narrative}</div></div>
|
|||
|
|
</body></html>"""
|
|||
|
|
|
|||
|
|
def _build_simple(self, spec, title, narrative, c):
|
|||
|
|
return f"""<!DOCTYPE html>
|
|||
|
|
<html><head><meta charset="UTF-8">
|
|||
|
|
<style>
|
|||
|
|
* {{ margin: 0; padding: 0; box-sizing: border-box; }}
|
|||
|
|
body {{ font-family: {c['font']}; width: 1280px; height: 720px;
|
|||
|
|
background: linear-gradient(135deg, {c['primary']} 0%, #0D4F7A 100%);
|
|||
|
|
display: flex; align-items: center; justify-content: center; flex-direction: column; padding: 48px; }}
|
|||
|
|
.accent-bar {{ width: 8px; height: 64px; background: {c['gold']}; border-radius: 4px; margin-bottom: 32px; }}
|
|||
|
|
.page-title {{ font-size: 36px; font-weight: 700; color: {c['white']}; text-align: center; margin-bottom: 20px; }}
|
|||
|
|
.narrative-text {{ font-size: 22px; color: rgba(255,255,255,0.85); text-align: center; max-width: 800px; line-height: 1.6; }}
|
|||
|
|
</style></head>
|
|||
|
|
<body>
|
|||
|
|
<div class="accent-bar"></div>
|
|||
|
|
<div class="page-title">{title}</div>
|
|||
|
|
<div class="narrative-text">{narrative}</div>
|
|||
|
|
</body></html>"""
|
|||
|
|
|
|||
|
|
|
|||
|
|
# ─── 批量渲染 ──────────────────────────────────────────────
|
|||
|
|
|
|||
|
|
async def render_all_slides(slide_specs: list[dict], output_dir: str = "/tmp/slide_renders") -> list[str]:
|
|||
|
|
"""批量渲染多张幻灯片"""
|
|||
|
|
renderer = SlideRenderer(output_dir=output_dir)
|
|||
|
|
paths = []
|
|||
|
|
for i, spec in enumerate(slide_specs):
|
|||
|
|
spec["_id"] = i
|
|||
|
|
try:
|
|||
|
|
path = await renderer.render_async(spec)
|
|||
|
|
paths.append(path)
|
|||
|
|
print(f" ✓ Slide {i+1}: {path}")
|
|||
|
|
except Exception as e:
|
|||
|
|
print(f" ✗ Slide {i+1} failed: {e}")
|
|||
|
|
paths.append("")
|
|||
|
|
await renderer._close()
|
|||
|
|
return paths
|
|||
|
|
|
|||
|
|
|
|||
|
|
def render_all_slides_sync(slide_specs: list[dict], output_dir: str = "/tmp/slide_renders") -> list[str]:
|
|||
|
|
"""批量渲染（同步封装）"""
|
|||
|
|
return asyncio.get_event_loop().run_until_complete(render_all_slides(slide_specs, output_dir))
|
|||
|
|
|
|||
|
|
|
|||
|
|
# ─── CLI入口 ──────────────────────────────────────────────
|
|||
|
|
|
|||
|
|
if __name__ == "__main__":
|
|||
|
|
import argparse
|
|||
|
|
|
|||
|
|
parser = argparse.ArgumentParser(description="SlideRenderer — Playwright截图管线")
|
|||
|
|
parser.add_argument("--spec", type=str, help="JSON格式的幻灯片规格")
|
|||
|
|
parser.add_argument("--spec-file", type=str, help="幻灯片规格JSON文件")
|
|||
|
|
parser.add_argument("--output-dir", type=str, default="/tmp/slide_renders")
|
|||
|
|
args = parser.parse_args()
|
|||
|
|
|
|||
|
|
if args.spec:
|
|||
|
|
spec = json.loads(args.spec)
|
|||
|
|
renderer = SlideRenderer(output_dir=args.output_dir)
|
|||
|
|
path = asyncio.get_event_loop().run_until_complete(renderer.render_async(spec))
|
|||
|
|
print(path)
|
|||
|
|
asyncio.get_event_loop().run_until_complete(renderer._close())
|
|||
|
|
elif args.spec_file:
|
|||
|
|
with open(args.spec_file) as f:
|
|||
|
|
specs = json.load(f)
|
|||
|
|
paths = render_all_slides_sync(specs, args.output_dir)
|
|||
|
|
print("\\n".join(paths))
|
|||
|
|
else:
|
|||
|
|
# 测试模式：渲染示例幻灯片
|
|||
|
|
test_specs = [
|
|||
|
|
{
|
|||
|
|
"_id": 0,
|
|||
|
|
"type": "area_chart",
|
|||
|
|
"title": "账户价值增长",
|
|||
|
|
"narrative": "时间是最好的朋友，复利是最大的杠杆",
|
|||
|
|
"data": {
|
|||
|
|
"years": [1, 5, 10, 15, 20, 25, 30],
|
|||
|
|
"values": [500000, 580000, 720000, 950000, 1350000, 1900000, 2800000]
|
|||
|
|
},
|
|||
|
|
"highlights": [
|
|||
|
|
{"label": "回本年份", "value": "第5年"},
|
|||
|
|
{"label": "20年倍数", "value": "2.7x"},
|
|||
|
|
{"label": "30年倍数", "value": "5.6x"},
|
|||
|
|
{"label": "IRR", "value": "6.2%"}
|
|||
|
|
]
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
"_id": 1,
|
|||
|
|
"type": "kpi_cards",
|
|||
|
|
"title": "方案核心指标",
|
|||
|
|
"narrative": "用数据说话，让选择更清晰",
|
|||
|
|
"kpis": [
|
|||
|
|
{"label": "年缴保费", "value": "100,000", "unit": "USD", "sub": "每年"},
|
|||
|
|
{"label": "缴费期", "value": "5", "unit": "年", "sub": "短期规划"},
|
|||
|
|
{"label": "回本年份", "value": "7", "unit": "年", "sub": "快速回本"},
|
|||
|
|
{"label": "20年账户价值", "value": "135", "unit": "万USD", "sub": "稳健增值"},
|
|||
|
|
{"label": "30年账户价值", "value": "280", "unit": "万USD", "sub": "代代传承"},
|
|||
|
|
{"label": "预期IRR", "value": "6.2", "unit": "%", "sub": "超越定存"},
|
|||
|
|
]
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
print("Testing SlideRenderer with sample slides...")
|
|||
|
|
paths = render_all_slides_sync(test_specs, args.output_dir)
|
|||
|
|
print("\nRendered files:")
|
|||
|
|
for p in paths:
|
|||
|
|
if p:
|
|||
|
|
size = os.path.getsize(p)
|
|||
|
|
print(f" {p} ({size:,} bytes)")
|