Generate professional HTML presentations with slide content, whiteboard-style images, and detailed word-for-word speaker scripts in presenter view for confid...
为每一页生成完整演讲逐字稿 + 演讲者视图，让你自信上台不怯场。
User Topic/Notes
↓
1. Content Planning (outline + page count)
↓
2. Per-Slide Content (title, board description, speaker notes)
↓
3. Image Generation (Gemini 3 Pro Image, one per slide)
↓
4. HTML Assembly (reveal.js + lightbox + presenter view)
↓
5. Speaker Scripts (word-for-word 逐字稿 in <aside class="notes">)
From user's topic, notes, or markdown files, produce an outline:
If user provides existing markdown/text content, read it and restructure into slide outline. Ask user to confirm page count and structure before proceeding.
For each slide, define:
For mixed audiences, write three-layer explanations:
Write content to a markdown file first for user review, then proceed to image generation.
Generate one whiteboard-style illustration per slide using Gemini API.
Use the script: scripts/generate_slide_images.py
python3 scripts/generate_slide_images.py \
--prompts-file prompts.json \
--output-dir ./images \
--api-key "$GEMINI_API_KEY"
gemini-3-pro-image-preview (preferred) or imagen-4.0-generate-001https://generativelanguage.googleapis.com/v1beta/models/{model}:generateContent{
"contents": [{"parts": [{"text": "Generate this image: {prompt}"}]}],
"generationConfig": {"responseModalities": ["IMAGE", "TEXT"]}
}
candidates[0].content.parts[].inlineData.data (base64)Check TOOLS.md for Gemini Image Generation section, or ask user for API key.
Use the template: assets/reveal-template.html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<!-- reveal.js 5.1.0 from CDN -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js@5.1.0/dist/reveal.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js@5.1.0/dist/theme/black.css">
<!-- Custom styles (see template) -->
</head>
<body>
<div class="reveal"><div class="slides">
<!-- Section dividers: colored background gradient + section number -->
<section data-background-gradient="...">
<div class="section-num">1</div>
<h2>Section Title</h2>
</section>
<!-- Content slides -->
<section>
<h2>Slide Title</h2>
<!-- Content: .two-col, .three-col, .card, table, .code-block, .timeline -->
<aside class="notes">Speaker script here...</aside>
</section>
</div></div>
<!-- Lightbox overlay (see template) -->
<!-- reveal.js init + lightbox JS (see template) -->
</body>
</html>
| Class | Use |
|---|---|
.card | Dark rounded content box |
.two-col / .three-col | Flex column layouts |
.code-block | Styled code with .comment, .cmd, .flag |
.warning-box | Red-border alert box |
.slide-img | Clickable image (max-height 420px) |
.flow-box + .flow-arrow | Horizontal flow diagrams |
.timeline + .timeline-item | Vertical timeline with colored dots |
.tag-blue/green/red/orange/purple | Colored pill tags |
.accent/.green/.red/.blue/.purple/.yellow/.pink | Text colors |
.checklist | Checkbox-style list |
.photo-row | Horizontal image gallery |
.gradient-text | Gradient colored heading |
All images with .slide-img, .slide-img-large, .slide-img-full, or inside .photo-row are clickable. Clicking opens fullscreen lightbox with:
The lightbox JS is included in the template.
Reveal.initialize({
hash: true,
slideNumber: 'c/t',
transition: 'slide',
width: 1280,
height: 720,
margin: 0.06,
plugins: [RevealHighlight, RevealNotes]
});
Keyboard hints shown at bottom: ← → 翻页 · S 演讲者视图 · F 全屏 · O 总览
Add <aside class="notes"> to every content slide (not section dividers).
User presses S to open presenter view showing:
Before delivering, verify:
<aside class="notes"> with full scriptsimages/ directory.slide-img class (clickable lightbox)open index.html)ZIP package — ready to use