Add IT infrastructure video skills
This commit is contained in:
Haitao Pan
parent
d4f0fe9867
commit
75ff751ba6
@ -14,10 +14,18 @@
|
||||
| Skill | 说明 | 路径 |
|
||||
|---|---|---|
|
||||
| AI 信息差快报 | 新闻检索、素材匹配、口播字幕、视频渲染 | `skills/ai-tech-news-video/SKILL.md` |
|
||||
| IT 基础设施连续 PNG | 根据描述或参考图生成 1-N 张连续风格竖版 PNG 素材 | `skills/it-infra-continuous-png/SKILL.md` |
|
||||
| IT 基础设施长图讲解视频 | 基于长图素材生成 HyperFrames 讲解视频、口播、字幕和 timeline | `skills/it-infra-evolution-video/SKILL.md` |
|
||||
| 产品介绍视频 | 官网信息提炼、叙事结构、成片节奏 | `skills/product-intro-video/SKILL.md` |
|
||||
| 视频音效工作流 | 音效搜索、下载与合成、时间线接入 | `skills/sound-fx-for-video/SKILL.md` |
|
||||
| 简笔画动画视频 | 线稿风动画、动作叙事、抽检闭环 | `skills/sketch-animation-video/SKILL.md` |
|
||||
|
||||
## Examples
|
||||
|
||||
| Example | 说明 | 路径 |
|
||||
|---|---|---|
|
||||
| IT 基础设施演进视频模板 v1 | 轻量 HyperFrames 工程模板，只包含 HTML、配置、脚本与占位说明，不包含图片、音频、快照或渲染产物 | `example/it-infra-evolution-video/` |
|
||||
|
||||
## 预览
|
||||
|
||||
### ai-tech-news-video
|
||||
|
||||
7
example/it-infra-evolution-video/.template-lock.json
Normal file
7
example/it-infra-evolution-video/.template-lock.json
Normal file
@ -0,0 +1,7 @@
|
||||
{
|
||||
"name": "it-infra-evolution-video",
|
||||
"version": "v1",
|
||||
"status": "read-only",
|
||||
"role": "frozen-project-template",
|
||||
"note": "Copy this directory for v2 or experiments. Do not edit v1 in place."
|
||||
}
|
||||
62
example/it-infra-evolution-video/AGENTS.md
Normal file
62
example/it-infra-evolution-video/AGENTS.md
Normal file
@ -0,0 +1,62 @@
|
||||
# HyperFrames Composition Project
|
||||
|
||||
## Skills
|
||||
|
||||
This project uses AI agent skills for framework-specific patterns. Install them if not already present:
|
||||
|
||||
```bash
|
||||
npx skills add heygen-com/hyperframes
|
||||
```
|
||||
|
||||
Skills encode patterns like `window.__timelines` registration, `data-*` attribute semantics, Tailwind v4 browser-runtime styling for `--tailwind` projects, and shader-compatible CSS rules that are not in generic web docs. Using them produces correct compositions from the start.
|
||||
|
||||
## Commands
|
||||
|
||||
```bash
|
||||
npm run dev # start the preview server (long-running — keep it alive in background)
|
||||
npm run check # lint + validate + inspect
|
||||
npm run render # render to MP4
|
||||
npm run publish # publish and get a shareable link
|
||||
npx hyperframes docs <topic> # reference docs in terminal
|
||||
```
|
||||
|
||||
> **`npm run dev` is a long-running server, not a one-shot command.** It blocks until stopped.
|
||||
> Always run it as a background process so it stays alive while you edit compositions.
|
||||
> Running it in the foreground will time out and kill the server, breaking the browser preview.
|
||||
|
||||
## Project Structure
|
||||
|
||||
- `index.html` — main composition (root timeline)
|
||||
- `compositions/` — sub-compositions referenced via `data-composition-src`
|
||||
- `assets/` — media files (video, audio, images)
|
||||
- `meta.json` — project metadata (id, name)
|
||||
- `transcript.json` — whisper word-level transcript (if generated)
|
||||
|
||||
## Linting — Always Run After Changes
|
||||
|
||||
After creating or editing any `.html` composition, run the full check before considering the task complete:
|
||||
|
||||
```bash
|
||||
npm run check
|
||||
```
|
||||
|
||||
Fix all errors before presenting the result.
|
||||
|
||||
## Key Rules
|
||||
|
||||
1. Every timed element needs `data-start`, `data-duration`, and `data-track-index`
|
||||
2. Visible timed elements **must** have `class="clip"` — the framework uses this for visibility control
|
||||
3. GSAP timelines must be paused and registered on `window.__timelines`:
|
||||
```js
|
||||
window.__timelines = window.__timelines || {};
|
||||
window.__timelines["composition-id"] = gsap.timeline({ paused: true });
|
||||
```
|
||||
4. Videos use `muted` with a separate `<audio>` element for the audio track
|
||||
5. Sub-compositions use `data-composition-src="compositions/file.html"`
|
||||
6. Only deterministic logic — no `Date.now()`, no `Math.random()`, no network fetches
|
||||
|
||||
## Documentation
|
||||
|
||||
Full docs: https://hyperframes.heygen.com/introduction
|
||||
|
||||
Machine-readable index for AI tools: https://hyperframes.heygen.com/llms.txt
|
||||
85
example/it-infra-evolution-video/CLAUDE.md
Normal file
85
example/it-infra-evolution-video/CLAUDE.md
Normal file
@ -0,0 +1,85 @@
|
||||
# HyperFrames Composition Project
|
||||
|
||||
## Skills — USE THESE FIRST
|
||||
|
||||
**Always invoke the relevant skill before writing or modifying compositions.** Skills encode framework-specific patterns (e.g., `window.__timelines` registration, `data-*` attribute semantics, shader-compatible CSS rules) that are NOT in generic web docs. Skipping them produces broken compositions.
|
||||
|
||||
| Skill | Command | When to use |
|
||||
| -------------------------- | ------------------------- | ------------------------------------------------------------------------------------------------- |
|
||||
| **hyperframes** | `/hyperframes` | Creating or editing HTML compositions, captions, TTS, audio-reactive animation, marker highlights |
|
||||
| **hyperframes-cli** | `/hyperframes-cli` | Dev-loop CLI: init, lint, inspect, preview, render, doctor |
|
||||
| **hyperframes-media** | `/hyperframes-media` | Asset preprocessing: tts (Kokoro), transcribe (Whisper), remove-background (u2net) |
|
||||
| **hyperframes-registry** | `/hyperframes-registry` | Installing blocks and components via `hyperframes add` |
|
||||
| **website-to-hyperframes** | `/website-to-hyperframes` | Capturing a URL and turning it into a video — full website-to-video pipeline |
|
||||
| **tailwind** | `/tailwind` | Tailwind v4 browser-runtime styles for projects created with `hyperframes init --tailwind` |
|
||||
| **gsap** | `/gsap` | GSAP animations for HyperFrames — tweens, timelines, easing, performance |
|
||||
| **animejs** | `/animejs` | Anime.js animations registered on `window.__hfAnime` |
|
||||
| **css-animations** | `/css-animations` | CSS keyframes that HyperFrames can pause and seek |
|
||||
| **lottie** | `/lottie` | `lottie-web` and dotLottie players registered on `window.__hfLottie` |
|
||||
| **three** | `/three` | Three.js scenes rendered from HyperFrames `hf-seek` events |
|
||||
| **waapi** | `/waapi` | Web Animations API motion driven through `document.getAnimations()` |
|
||||
|
||||
> **Skills not available?** Ask the user to run `npx hyperframes skills` and restart their
|
||||
> agent session, or install manually: `npx skills add heygen-com/hyperframes`.
|
||||
|
||||
## Commands
|
||||
|
||||
```bash
|
||||
npm run dev # start the preview server (long-running — keep it alive in background)
|
||||
npm run check # lint + validate + inspect
|
||||
npm run render # render to MP4
|
||||
npm run publish # publish and get a shareable link
|
||||
npx hyperframes lint --verbose # include info-level findings
|
||||
npx hyperframes lint --json # machine-readable output for CI
|
||||
npx hyperframes docs <topic> # reference docs in terminal
|
||||
```
|
||||
|
||||
> **`npm run dev` is a long-running server, not a one-shot command.** It blocks until stopped.
|
||||
> In Claude Code, always run it with `run_in_background: true`. Never run it as a foreground
|
||||
> command — it will time out and the server will die, breaking the browser preview.
|
||||
|
||||
## Documentation
|
||||
|
||||
**For quick reference**, use the local CLI docs command (no network required):
|
||||
|
||||
```bash
|
||||
npx hyperframes docs <topic>
|
||||
```
|
||||
|
||||
Topics: `data-attributes`, `gsap`, `compositions`, `rendering`, `examples`, `troubleshooting`
|
||||
|
||||
**For full documentation**, discover pages via the machine-readable index — do NOT guess URLs:
|
||||
|
||||
```
|
||||
https://hyperframes.heygen.com/llms.txt
|
||||
```
|
||||
|
||||
## Project Structure
|
||||
|
||||
- `index.html` — main composition (root timeline)
|
||||
- `compositions/` — sub-compositions referenced via `data-composition-src`
|
||||
- `meta.json` — project metadata (id, name)
|
||||
- `transcript.json` — whisper word-level transcript (if generated)
|
||||
|
||||
## Linting — ALWAYS RUN AFTER CHANGES
|
||||
|
||||
After creating or editing any `.html` composition, **always** run the full check before considering the task complete:
|
||||
|
||||
```bash
|
||||
npm run check
|
||||
```
|
||||
|
||||
Fix all errors before presenting the result. Inspect warnings should be reviewed before rendering.
|
||||
|
||||
## Key Rules
|
||||
|
||||
1. Every timed element needs `data-start`, `data-duration`, and `data-track-index`
|
||||
2. Elements with timing **MUST** have `class="clip"` — the framework uses this for visibility control
|
||||
3. Timelines must be paused and registered on `window.__timelines`:
|
||||
```js
|
||||
window.__timelines = window.__timelines || {};
|
||||
window.__timelines["composition-id"] = gsap.timeline({ paused: true });
|
||||
```
|
||||
4. Videos use `muted` with a separate `<audio>` element for the audio track
|
||||
5. Sub-compositions use `data-composition-src="compositions/file.html"` to reference other HTML files
|
||||
6. Only deterministic logic — no `Date.now()`, no `Math.random()`, no network fetches
|
||||
25
example/it-infra-evolution-video/DESIGN.md
Normal file
25
example/it-infra-evolution-video/DESIGN.md
Normal file
@ -0,0 +1,25 @@
|
||||
## Style Prompt
|
||||
|
||||
Technical documentary in a clean blue-white infrastructure-map style, adapted from the supplied "IT 基础设施演进之路" and "IT 基础设施概览" visuals. The video should feel like a precise architecture briefing: crisp typography, glass panels, glowing route lines, map zooms, and restrained kinetic annotations.
|
||||
|
||||
## Colors
|
||||
|
||||
- Deep navy text and anchors: `#07194F`
|
||||
- Infrastructure blue: `#155BFF`
|
||||
- Cyan route glow: `#49D9FF`
|
||||
- AI green accent: `#18BFA6`
|
||||
- Soft canvas: `#F3FAFF`
|
||||
- Panel white: `#FFFFFF`
|
||||
|
||||
## Typography
|
||||
|
||||
- Chinese/system sans stack: `PingFang SC`, `Hiragino Sans GB`, `Microsoft YaHei`, `Arial`, sans-serif
|
||||
- Use large bold display type only for scene titles; compact labels and subtitles stay readable and dense.
|
||||
|
||||
## What NOT to Do
|
||||
|
||||
- Do not use a dark sci-fi dashboard; the source visuals are bright and diagrammatic.
|
||||
- Do not fill the frame with dense source-image text for too long.
|
||||
- Do not rely on generic icon-only cards as the main proof.
|
||||
- Do not add a marketing CTA or account outro.
|
||||
- Do not use random animation or unsynchronized captions.
|
||||
5
example/it-infra-evolution-video/VERSION.md
Normal file
5
example/it-infra-evolution-video/VERSION.md
Normal file
@ -0,0 +1,5 @@
|
||||
# it-infra-evolution-video template v1
|
||||
|
||||
Status: read-only frozen project template.
|
||||
|
||||
This project is the v1 HyperFrames template for the IT infrastructure evolution video style. Keep it immutable. For future experiments or v2 work, copy this directory and modify the copy instead of changing this v1 template in place.
|
||||
11
example/it-infra-evolution-video/assets/README.md
Normal file
11
example/it-infra-evolution-video/assets/README.md
Normal file
@ -0,0 +1,11 @@
|
||||
# Assets Placeholder
|
||||
|
||||
This example intentionally does not include generated PNG images, voiceover MP3 files, BGM, SFX, snapshots, or rendered MP4 outputs.
|
||||
|
||||
Populate these directories when running the template:
|
||||
|
||||
- `assets/images/`: user-provided or generated long infographic PNG files
|
||||
- `assets/audio/`: voiceover clips and BGM
|
||||
- `assets/audio/sfx/`: transition sound effects
|
||||
|
||||
Use `assets/images/manifest.md` to describe the real image assets for the video workflow.
|
||||
14
example/it-infra-evolution-video/assets/audio/README.md
Normal file
14
example/it-infra-evolution-video/assets/audio/README.md
Normal file
@ -0,0 +1,14 @@
|
||||
# Audio Placeholder
|
||||
|
||||
This directory is intentionally empty in the repository example.
|
||||
|
||||
Expected runtime files:
|
||||
|
||||
- `bgm.wav`
|
||||
- `intro.mp3`
|
||||
- `card1.mp3` ... `cardN.mp3`
|
||||
- `sfx/whoosh.wav`
|
||||
- `sfx/impact.wav`
|
||||
- `sfx/ping.wav`
|
||||
|
||||
Generate audio with `edge-tts` and `scripts/render_audio_bed.py`.
|
||||
@ -0,0 +1,7 @@
|
||||
# Image Manifest Template
|
||||
|
||||
| chapter_id | title | file | source_type | video_usage | scan_mode | safe_focus |
|
||||
| --- | --- | --- | --- | --- | --- | --- |
|
||||
| intro | 引言 | assets/images/001-intro.png | user_provided | 引言章节 | cover | upper title and central road |
|
||||
|
||||
Replace this file with the actual manifest for your project assets.
|
||||
9
example/it-infra-evolution-video/hyperframes.json
Normal file
9
example/it-infra-evolution-video/hyperframes.json
Normal file
@ -0,0 +1,9 @@
|
||||
{
|
||||
"$schema": "https://hyperframes.heygen.com/schema/hyperframes.json",
|
||||
"registry": "https://raw.githubusercontent.com/heygen-com/hyperframes/main/registry",
|
||||
"paths": {
|
||||
"blocks": "compositions",
|
||||
"components": "compositions/components",
|
||||
"assets": "assets"
|
||||
}
|
||||
}
|
||||
434
example/it-infra-evolution-video/index.html
Normal file
434
example/it-infra-evolution-video/index.html
Normal file
@ -0,0 +1,434 @@
|
||||
<!doctype html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=1920, height=1080" />
|
||||
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
html, body {
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
overflow: hidden;
|
||||
background: #f3faff;
|
||||
font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;
|
||||
color: #07194f;
|
||||
}
|
||||
#root {
|
||||
position: relative;
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
overflow: hidden;
|
||||
background:
|
||||
radial-gradient(circle at 82% 16%, rgba(73,217,255,0.26), transparent 30%),
|
||||
radial-gradient(circle at 10% 92%, rgba(21,91,255,0.15), transparent 28%),
|
||||
linear-gradient(135deg, #ffffff 0%, #f3faff 46%, #dceeff 100%);
|
||||
}
|
||||
.clip { position: absolute; overflow: hidden; }
|
||||
.scene { inset: 0; opacity: 0; }
|
||||
.topbar {
|
||||
position: absolute;
|
||||
z-index: 40;
|
||||
top: 42px;
|
||||
left: 72px;
|
||||
right: 72px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-size: 26px;
|
||||
font-weight: 850;
|
||||
color: rgba(7,25,79,0.82);
|
||||
}
|
||||
.brand-pill {
|
||||
display: inline-flex;
|
||||
gap: 14px;
|
||||
align-items: center;
|
||||
padding: 14px 24px;
|
||||
border-radius: 999px;
|
||||
color: #fff;
|
||||
background: linear-gradient(135deg, #155bff, #18bfa6);
|
||||
box-shadow: 0 16px 40px rgba(21,91,255,0.22);
|
||||
}
|
||||
.brand-dot {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
border-radius: 50%;
|
||||
background: #fff;
|
||||
box-shadow: 0 0 24px #49d9ff;
|
||||
}
|
||||
.scene-content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 92px 104px 214px;
|
||||
display: grid;
|
||||
grid-template-columns: 0.96fr 1.04fr;
|
||||
gap: 58px;
|
||||
align-items: center;
|
||||
}
|
||||
.image-panel {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 760px;
|
||||
border-radius: 34px;
|
||||
overflow: hidden;
|
||||
background: #fff;
|
||||
border: 1px solid rgba(21,91,255,0.16);
|
||||
box-shadow: 0 34px 90px rgba(17,60,128,0.18);
|
||||
}
|
||||
.image-panel img {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
object-position: center top;
|
||||
filter: saturate(1.06) contrast(1.03);
|
||||
}
|
||||
.image-panel.contain img {
|
||||
object-fit: contain;
|
||||
padding: 20px;
|
||||
background: #fff;
|
||||
}
|
||||
.copy {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 26px;
|
||||
}
|
||||
.kicker {
|
||||
width: max-content;
|
||||
max-width: 100%;
|
||||
color: #155bff;
|
||||
background: rgba(21,91,255,0.08);
|
||||
border: 1px solid rgba(21,91,255,0.22);
|
||||
border-radius: 999px;
|
||||
padding: 12px 22px;
|
||||
font-size: 27px;
|
||||
font-weight: 950;
|
||||
}
|
||||
h1 {
|
||||
font-size: 80px;
|
||||
line-height: 1.05;
|
||||
font-weight: 950;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
h2 {
|
||||
font-size: 64px;
|
||||
line-height: 1.08;
|
||||
font-weight: 950;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
.lead {
|
||||
font-size: 32px;
|
||||
line-height: 1.55;
|
||||
font-weight: 760;
|
||||
color: rgba(7,25,79,0.78);
|
||||
}
|
||||
.tag-row {
|
||||
display: flex;
|
||||
gap: 14px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.tag {
|
||||
padding: 12px 16px;
|
||||
border-radius: 16px;
|
||||
color: #07194f;
|
||||
background: rgba(255,255,255,0.76);
|
||||
border: 1px solid rgba(73,217,255,0.34);
|
||||
box-shadow: 0 14px 30px rgba(17,60,128,0.08);
|
||||
font-size: 24px;
|
||||
font-weight: 900;
|
||||
}
|
||||
.caption {
|
||||
position: absolute;
|
||||
z-index: 55;
|
||||
left: 320px;
|
||||
right: 320px;
|
||||
bottom: 132px;
|
||||
min-height: 78px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
padding: 14px 32px;
|
||||
border-radius: 26px;
|
||||
background: rgba(7,25,79,0.88);
|
||||
color: #fff;
|
||||
font-size: 32px;
|
||||
line-height: 1.34;
|
||||
font-weight: 850;
|
||||
text-align: center;
|
||||
box-shadow: 0 20px 55px rgba(7,25,79,0.26);
|
||||
opacity: 0;
|
||||
}
|
||||
.timeline {
|
||||
position: absolute;
|
||||
z-index: 52;
|
||||
left: 70px;
|
||||
right: 70px;
|
||||
bottom: 28px;
|
||||
height: 88px;
|
||||
padding: 12px 14px 18px;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(8, minmax(0, 1fr));
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
overflow: visible;
|
||||
border-radius: 30px;
|
||||
background: rgba(255,255,255,0.76);
|
||||
border: 1px solid rgba(21,91,255,0.15);
|
||||
box-shadow: 0 20px 60px rgba(17,60,128,0.14);
|
||||
backdrop-filter: blur(12px);
|
||||
}
|
||||
.timeline-fill {
|
||||
position: absolute;
|
||||
left: 22px;
|
||||
right: 22px;
|
||||
bottom: 8px;
|
||||
height: 8px;
|
||||
border-radius: 999px;
|
||||
background: rgba(7,25,79,0.12);
|
||||
overflow: hidden;
|
||||
}
|
||||
.timeline-progress {
|
||||
display: block;
|
||||
width: 0%;
|
||||
height: 100%;
|
||||
border-radius: inherit;
|
||||
background: linear-gradient(90deg, #155bff, #49d9ff, #18bfa6);
|
||||
}
|
||||
.chapter-tag {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
min-width: 0;
|
||||
height: 50px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
padding: 0 10px;
|
||||
border-radius: 18px;
|
||||
background: rgba(255,255,255,0.72);
|
||||
border: 1px solid rgba(21,91,255,0.18);
|
||||
color: rgba(7,25,79,0.74);
|
||||
font-size: 20px;
|
||||
line-height: 1;
|
||||
font-weight: 900;
|
||||
white-space: nowrap;
|
||||
box-shadow: 0 12px 26px rgba(17,60,128,0.08);
|
||||
}
|
||||
.chapter-time {
|
||||
color: #155bff;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
.chapter-title {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.chapter-tag.active {
|
||||
color: #fff;
|
||||
background: linear-gradient(135deg, #155bff, #18bfa6);
|
||||
border-color: rgba(255,255,255,0.62);
|
||||
box-shadow: 0 20px 42px rgba(21,91,255,0.28);
|
||||
}
|
||||
.chapter-tag.active .chapter-time { color: #fff; }
|
||||
.glow-line {
|
||||
position: absolute;
|
||||
width: 560px;
|
||||
height: 560px;
|
||||
border-radius: 50%;
|
||||
border: 2px solid rgba(73,217,255,0.34);
|
||||
right: -160px;
|
||||
top: -150px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root" data-composition-id="main" data-start="0" data-duration="82" data-width="1920" data-height="1080">
|
||||
<div class="glow-line" data-layout-ignore></div>
|
||||
<div class="topbar" data-layout-ignore>
|
||||
<div class="brand-pill"><span class="brand-dot"></span><span>IT 基础设施演进史</span></div>
|
||||
<div>从硬件到 AI 原生生态</div>
|
||||
</div>
|
||||
|
||||
<section id="scene-intro" class="clip scene" data-start="0" data-duration="12.0" data-track-index="1">
|
||||
<div class="scene-content">
|
||||
<div class="image-panel"><img src="assets/images/it-infra-evolution-road.png" alt="IT 基础设施演进路线图" /></div>
|
||||
<div class="copy">
|
||||
<div class="kicker">0:00 / 引言</div>
|
||||
<h1>IT 基础设施演进史<br />是一组能力的共同进化</h1>
|
||||
<p class="lead">计算、网络、存储、安全、监控、平台工程，最终汇入 AI 原生。</p>
|
||||
<div class="tag-row"><span class="tag">资源效率</span><span class="tag">系统弹性</span><span class="tag">自动化</span><span class="tag">智能化</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="scene-mainline" class="clip scene" data-start="12.2" data-duration="8.6" data-track-index="1">
|
||||
<div class="scene-content">
|
||||
<div class="image-panel"><img src="assets/images/it-infra-evolution-road.png" alt="IT 基础设施主线" /></div>
|
||||
<div class="copy">
|
||||
<div class="kicker">0:12 / 基础设施主线</div>
|
||||
<h2>从物理硬件<br />到 AI 原生基础设施</h2>
|
||||
<p class="lead">硬件、虚拟化、云平台、容器、编排治理、智能基础设施，是一条围绕资源效率持续推进的路线。</p>
|
||||
<div class="tag-row"><span class="tag">硬件</span><span class="tag">云平台</span><span class="tag">容器</span><span class="tag">AI 原生</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="scene-security" class="clip scene" data-start="21.0" data-duration="9.8" data-track-index="1">
|
||||
<div class="scene-content">
|
||||
<div class="image-panel"><img src="assets/images/account-security.png" alt="账户与安全体系" /></div>
|
||||
<div class="copy">
|
||||
<div class="kicker">0:21 / 账户与安全</div>
|
||||
<h2>安全边界<br />从网络转向身份</h2>
|
||||
<p class="lead">谁访问、什么身份、什么权限、凭证是否可信、是否可审计，成为现代安全的中心问题。</p>
|
||||
<div class="tag-row"><span class="tag">IAM</span><span class="tag">SSO</span><span class="tag">RBAC</span><span class="tag">Zero Trust</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="scene-monitoring" class="clip scene" data-start="31.0" data-duration="9.2" data-track-index="1">
|
||||
<div class="scene-content">
|
||||
<div class="image-panel"><img src="assets/images/observability-history.png" alt="监控的前生今世" /></div>
|
||||
<div class="copy">
|
||||
<div class="kicker">0:31 / 监控与可观测性</div>
|
||||
<h2>从事后告警<br />走向 AI 自愈</h2>
|
||||
<p class="lead">指标、日志、链路、事件、拓扑和上下文一起进入运维系统，让系统从“报警”走向“预测与定位”。</p>
|
||||
<div class="tag-row"><span class="tag">Metrics</span><span class="tag">Logs</span><span class="tag">Traces</span><span class="tag">AIOps</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="scene-network" class="clip scene" data-start="40.4" data-duration="10.0" data-track-index="1">
|
||||
<div class="scene-content">
|
||||
<div class="image-panel"><img src="assets/images/network-protocol.png" alt="网络与协议" /></div>
|
||||
<div class="copy">
|
||||
<div class="kicker">0:40 / 网络与协议</div>
|
||||
<h2>网络从连接一切<br />走向理解一切</h2>
|
||||
<p class="lead">从 TCP/IP、HTTP、负载均衡，到服务网格和 AI 网络，网络正在承担更智能的路由与流量治理。</p>
|
||||
<div class="tag-row"><span class="tag">TCP/IP</span><span class="tag">HTTP</span><span class="tag">Service Mesh</span><span class="tag">AI Network</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="scene-storage" class="clip scene" data-start="50.6" data-duration="9.4" data-track-index="1">
|
||||
<div class="scene-content">
|
||||
<div class="image-panel contain"><img src="assets/images/storage-evolution.png" alt="存储演进之路" /></div>
|
||||
<div class="copy">
|
||||
<div class="kicker">0:51 / 存储服务</div>
|
||||
<h2>数据从存下来<br />走向高效流动</h2>
|
||||
<p class="lead">硬盘、RAID、SAN、对象存储、云原生存储和 AI 数据湖，让数据成为可调度、可治理的生产资料。</p>
|
||||
<div class="tag-row"><span class="tag">RAID / SAN</span><span class="tag">对象存储</span><span class="tag">CSI / Ceph</span><span class="tag">AI 数据湖</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="scene-platform" class="clip scene" data-start="60.2" data-duration="9.0" data-track-index="1">
|
||||
<div class="scene-content">
|
||||
<div class="image-panel"><img src="assets/images/platform-engineering.png" alt="从手工运维到现代平台工程" /></div>
|
||||
<div class="copy">
|
||||
<div class="kicker">1:00 / 平台工程</div>
|
||||
<h2>从人肉运维<br />到平台化交付</h2>
|
||||
<p class="lead">脚本、配置管理、基础设施即代码、CI/CD 和 GitOps，最终沉淀成可复用的平台能力。</p>
|
||||
<div class="tag-row"><span class="tag">Shell</span><span class="tag">IaC</span><span class="tag">CI/CD</span><span class="tag">GitOps</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="scene-ai" class="clip scene" data-start="69.4" data-duration="11.6" data-track-index="1">
|
||||
<div class="scene-content">
|
||||
<div class="image-panel contain"><img src="assets/images/ai-coevolution.png" alt="与 AI 共同进化" /></div>
|
||||
<div class="copy">
|
||||
<div class="kicker">1:09 / 与 AI 共同进化</div>
|
||||
<h2>基础设施从工具系统<br />变成 AI 协同系统</h2>
|
||||
<p class="lead">AI 不只是跑在基础设施之上，也会重新定义基础设施的交付、治理、优化和自治方式。</p>
|
||||
<div class="tag-row"><span class="tag">AI Agent</span><span class="tag">MCP</span><span class="tag">OpenClaw</span><span class="tag">Autonomous Infra</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="caption clip" id="cap-intro" data-start="0.2" data-duration="11.6" data-track-index="10">IT 基础设施演进史，不只是服务器升级，而是一组能力的共同进化。</div>
|
||||
<div class="caption clip" id="cap-1" data-start="12.3" data-duration="8.3" data-track-index="10">主线从硬件出发，经过云平台、容器和编排治理，持续提升资源效率。</div>
|
||||
<div class="caption clip" id="cap-2" data-start="21.1" data-duration="9.5" data-track-index="10">账户与安全体系，把边界从网络迁移到身份。</div>
|
||||
<div class="caption clip" id="cap-3" data-start="31.1" data-duration="8.9" data-track-index="10">监控从指标告警走向可观测性，再走向 AI Native 运维。</div>
|
||||
<div class="caption clip" id="cap-4" data-start="40.5" data-duration="9.7" data-track-index="10">网络与协议，从连接一切走向理解一切。</div>
|
||||
<div class="caption clip" id="cap-5" data-start="50.7" data-duration="9.1" data-track-index="10">存储服务从硬盘和 SAN，走向云原生存储和 AI 数据湖。</div>
|
||||
<div class="caption clip" id="cap-6" data-start="60.3" data-duration="8.7" data-track-index="10">平台工程把运维能力沉淀成稳定、可审计、可复用的平台能力。</div>
|
||||
<div class="caption clip" id="cap-7" data-start="69.5" data-duration="9.4" data-track-index="10">最终，基础设施从人操作系统，走向 AI 协同和自主演进。</div>
|
||||
|
||||
<div class="timeline" data-layout-ignore>
|
||||
<div class="chapter-tag" id="chapter-0"><span class="chapter-time">0:00</span><span class="chapter-title">引言</span></div>
|
||||
<div class="chapter-tag" id="chapter-1"><span class="chapter-time">0:12</span><span class="chapter-title">主线</span></div>
|
||||
<div class="chapter-tag" id="chapter-2"><span class="chapter-time">0:21</span><span class="chapter-title">安全</span></div>
|
||||
<div class="chapter-tag" id="chapter-3"><span class="chapter-time">0:31</span><span class="chapter-title">监控</span></div>
|
||||
<div class="chapter-tag" id="chapter-4"><span class="chapter-time">0:40</span><span class="chapter-title">网络</span></div>
|
||||
<div class="chapter-tag" id="chapter-5"><span class="chapter-time">0:51</span><span class="chapter-title">存储</span></div>
|
||||
<div class="chapter-tag" id="chapter-6"><span class="chapter-time">1:00</span><span class="chapter-title">平台工程</span></div>
|
||||
<div class="chapter-tag" id="chapter-7"><span class="chapter-time">1:09</span><span class="chapter-title">AI 共进化</span></div>
|
||||
<div class="timeline-fill"><div class="timeline-progress"></div></div>
|
||||
</div>
|
||||
|
||||
<audio id="bgm" class="clip" data-start="0" data-duration="82" data-track-index="20" data-volume="0.10" src="assets/audio/bgm.wav"></audio>
|
||||
<audio id="vo-intro" class="clip" data-start="0" data-duration="11.856" data-track-index="5" data-volume="0.92" src="assets/audio/intro.mp3"></audio>
|
||||
<audio id="vo-1" class="clip" data-start="12.2" data-duration="8.352" data-track-index="5" data-volume="0.92" src="assets/audio/card1.mp3"></audio>
|
||||
<audio id="vo-2" class="clip" data-start="21.0" data-duration="9.648" data-track-index="5" data-volume="0.92" src="assets/audio/card2.mp3"></audio>
|
||||
<audio id="vo-3" class="clip" data-start="31.0" data-duration="8.928" data-track-index="5" data-volume="0.92" src="assets/audio/card3.mp3"></audio>
|
||||
<audio id="vo-4" class="clip" data-start="40.4" data-duration="9.840" data-track-index="5" data-volume="0.92" src="assets/audio/card4.mp3"></audio>
|
||||
<audio id="vo-5" class="clip" data-start="50.6" data-duration="9.240" data-track-index="5" data-volume="0.92" src="assets/audio/card5.mp3"></audio>
|
||||
<audio id="vo-6" class="clip" data-start="60.2" data-duration="8.808" data-track-index="5" data-volume="0.92" src="assets/audio/card6.mp3"></audio>
|
||||
<audio id="vo-7" class="clip" data-start="69.4" data-duration="8.712" data-track-index="5" data-volume="0.92" src="assets/audio/card7.mp3"></audio>
|
||||
<audio id="sfx-1" class="clip" data-start="12.12" data-duration="0.45" data-track-index="6" data-volume="0.35" src="assets/audio/sfx/whoosh.wav"></audio>
|
||||
<audio id="sfx-2" class="clip" data-start="20.92" data-duration="0.45" data-track-index="6" data-volume="0.35" src="assets/audio/sfx/whoosh.wav"></audio>
|
||||
<audio id="sfx-3" class="clip" data-start="30.92" data-duration="0.45" data-track-index="6" data-volume="0.35" src="assets/audio/sfx/whoosh.wav"></audio>
|
||||
<audio id="sfx-4" class="clip" data-start="40.32" data-duration="0.45" data-track-index="6" data-volume="0.35" src="assets/audio/sfx/whoosh.wav"></audio>
|
||||
<audio id="sfx-5" class="clip" data-start="50.52" data-duration="0.45" data-track-index="6" data-volume="0.35" src="assets/audio/sfx/whoosh.wav"></audio>
|
||||
<audio id="sfx-6" class="clip" data-start="60.12" data-duration="0.45" data-track-index="6" data-volume="0.35" src="assets/audio/sfx/whoosh.wav"></audio>
|
||||
<audio id="sfx-7" class="clip" data-start="69.32" data-duration="0.32" data-track-index="7" data-volume="0.32" src="assets/audio/sfx/impact.wav"></audio>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
window.__timelines = window.__timelines || {};
|
||||
const tl = gsap.timeline({ paused: true });
|
||||
const scenes = ["#scene-intro", "#scene-mainline", "#scene-security", "#scene-monitoring", "#scene-network", "#scene-storage", "#scene-platform", "#scene-ai"];
|
||||
const starts = [0, 12.2, 21.0, 31.0, 40.4, 50.6, 60.2, 69.4];
|
||||
const durations = [12.0, 8.6, 9.8, 9.2, 10.0, 9.4, 9.0, 11.6];
|
||||
const captions = ["#cap-intro", "#cap-1", "#cap-2", "#cap-3", "#cap-4", "#cap-5", "#cap-6", "#cap-7"];
|
||||
const captionStarts = [0.2, 12.3, 21.1, 31.1, 40.5, 50.7, 60.3, 69.5];
|
||||
const captionDurations = [11.6, 8.3, 9.5, 8.9, 9.7, 9.1, 8.7, 9.4];
|
||||
const chapters = ["#chapter-0", "#chapter-1", "#chapter-2", "#chapter-3", "#chapter-4", "#chapter-5", "#chapter-6", "#chapter-7"];
|
||||
|
||||
scenes.forEach((scene, index) => {
|
||||
const start = starts[index];
|
||||
tl.set(scene, { opacity: 1 }, start);
|
||||
tl.to(scene, { opacity: 0, duration: 0.28, ease: "power1.in" }, start + durations[index] - 0.28);
|
||||
tl.from(`${scene} .image-panel`, { x: -78, opacity: 0, scale: 0.96, duration: 0.72, ease: "power3.out" }, start + 0.08);
|
||||
tl.from(`${scene} .kicker`, { y: 28, opacity: 0, duration: 0.42, ease: "power2.out" }, start + 0.18);
|
||||
tl.from(`${scene} h1, ${scene} h2`, { y: 46, opacity: 0, duration: 0.62, ease: "power3.out" }, start + 0.3);
|
||||
tl.from(`${scene} .lead`, { y: 36, opacity: 0, duration: 0.54, ease: "power2.out" }, start + 0.58);
|
||||
tl.from(`${scene} .tag`, { y: 24, opacity: 0, scale: 0.94, duration: 0.42, stagger: 0.06, ease: "power2.out" }, start + 0.82);
|
||||
tl.to(`${scene} .image-panel img`, { y: -70, scale: 1.1, duration: Math.max(6, durations[index] - 1), ease: "none" }, start + 0.4);
|
||||
});
|
||||
|
||||
captions.forEach((caption, index) => {
|
||||
const start = captionStarts[index];
|
||||
const duration = captionDurations[index];
|
||||
tl.to(caption, { opacity: 1, y: 0, duration: 0.16, ease: "power1.out" }, start);
|
||||
tl.to(caption, { opacity: 0, y: 14, duration: 0.16, ease: "power1.in" }, start + duration - 0.16);
|
||||
});
|
||||
|
||||
chapters.forEach((chapter, index) => {
|
||||
const start = starts[index];
|
||||
const duration = durations[index];
|
||||
tl.to(chapter, { y: -8, scale: 1.04, duration: 0.18, ease: "power1.out" }, start);
|
||||
tl.set(chapter, { className: "chapter-tag active" }, start);
|
||||
tl.set(chapter, { className: "chapter-tag" }, start + duration - 0.1);
|
||||
tl.to(chapter, { y: 0, scale: 1, duration: 0.18, ease: "power1.in" }, start + duration - 0.28);
|
||||
});
|
||||
|
||||
tl.to(".timeline-progress", { width: "100%", duration: 82, ease: "none" }, 0);
|
||||
tl.from(".topbar", { y: -28, opacity: 0, duration: 0.5, ease: "power2.out" }, 0.1);
|
||||
tl.to(".glow-line", { scale: 1.18, rotation: 20, duration: 82, ease: "none" }, 0);
|
||||
tl.to("#root", { opacity: 0, duration: 0.65, ease: "power2.in" }, 81.25);
|
||||
window.__timelines["main"] = tl;
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
5
example/it-infra-evolution-video/meta.json
Normal file
5
example/it-infra-evolution-video/meta.json
Normal file
@ -0,0 +1,5 @@
|
||||
{
|
||||
"id": "it-infra-evolution-video",
|
||||
"name": "it-infra-evolution-video",
|
||||
"createdAt": "2026-05-17T01:09:11.030Z"
|
||||
}
|
||||
11
example/it-infra-evolution-video/package.json
Normal file
11
example/it-infra-evolution-video/package.json
Normal file
@ -0,0 +1,11 @@
|
||||
{
|
||||
"name": "it-infra-evolution-video",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "npx --yes hyperframes@0.6.15 preview",
|
||||
"check": "npx --yes hyperframes@0.6.15 lint && npx --yes hyperframes@0.6.15 validate && npx --yes hyperframes@0.6.15 inspect",
|
||||
"render": "npx --yes hyperframes@0.6.15 render",
|
||||
"publish": "npx --yes hyperframes@0.6.15 publish"
|
||||
}
|
||||
}
|
||||
3
example/it-infra-evolution-video/renders/README.md
Normal file
3
example/it-infra-evolution-video/renders/README.md
Normal file
@ -0,0 +1,3 @@
|
||||
# Renders Placeholder
|
||||
|
||||
Rendered MP4 files are generated locally and are not stored in this repository example.
|
||||
65
example/it-infra-evolution-video/scripts/render_audio_bed.py
Normal file
65
example/it-infra-evolution-video/scripts/render_audio_bed.py
Normal file
@ -0,0 +1,65 @@
|
||||
#!/usr/bin/env python3
|
||||
import math
|
||||
import os
|
||||
import struct
|
||||
import wave
|
||||
|
||||
|
||||
SAMPLE_RATE = 44100
|
||||
|
||||
|
||||
def write_wav(path, samples, volume=1.0):
|
||||
os.makedirs(os.path.dirname(path), exist_ok=True)
|
||||
with wave.open(path, "w") as wav:
|
||||
wav.setnchannels(2)
|
||||
wav.setsampwidth(2)
|
||||
wav.setframerate(SAMPLE_RATE)
|
||||
for value in samples:
|
||||
clipped = max(-1.0, min(1.0, value * volume))
|
||||
frame = struct.pack("<hh", int(clipped * 32767), int(clipped * 32767))
|
||||
wav.writeframes(frame)
|
||||
|
||||
|
||||
def tone(freq, t):
|
||||
return math.sin(2 * math.pi * freq * t)
|
||||
|
||||
|
||||
def envelope(t, duration, attack=0.02, release=0.08):
|
||||
if t < attack:
|
||||
return t / attack
|
||||
if t > duration - release:
|
||||
return max(0.0, (duration - t) / release)
|
||||
return 1.0
|
||||
|
||||
|
||||
def make_sfx(path, duration, freqs, volume):
|
||||
total = int(duration * SAMPLE_RATE)
|
||||
samples = []
|
||||
for i in range(total):
|
||||
t = i / SAMPLE_RATE
|
||||
env = envelope(t, duration)
|
||||
value = sum(tone(freq, t) for freq in freqs) / len(freqs)
|
||||
samples.append(value * env)
|
||||
write_wav(path, samples, volume)
|
||||
|
||||
|
||||
def make_bgm(path, duration):
|
||||
total = int(duration * SAMPLE_RATE)
|
||||
chord = [55.0, 82.41, 110.0, 164.81]
|
||||
samples = []
|
||||
for i in range(total):
|
||||
t = i / SAMPLE_RATE
|
||||
pulse = 0.55 + 0.45 * math.sin(2 * math.pi * 1.8 * t)
|
||||
pad = sum(tone(freq, t) for freq in chord) / len(chord)
|
||||
shimmer = 0.18 * tone(659.25, t) * (0.5 + 0.5 * math.sin(2 * math.pi * 0.25 * t))
|
||||
click = 0.08 * tone(220.0, t) if int(t * 2) % 2 == 0 else 0
|
||||
fade = min(1.0, t / 2.0, (duration - t) / 2.0)
|
||||
samples.append((0.65 * pad * pulse + shimmer + click) * fade)
|
||||
write_wav(path, samples, 0.25)
|
||||
|
||||
|
||||
if __name__ == "__main__":
|
||||
make_bgm("assets/audio/bgm.wav", 82.0)
|
||||
make_sfx("assets/audio/sfx/whoosh.wav", 0.45, [180, 240, 360], 0.35)
|
||||
make_sfx("assets/audio/sfx/impact.wav", 0.32, [70, 110, 180], 0.45)
|
||||
make_sfx("assets/audio/sfx/ping.wav", 0.22, [880, 1320], 0.28)
|
||||
3
example/it-infra-evolution-video/snapshots/README.md
Normal file
3
example/it-infra-evolution-video/snapshots/README.md
Normal file
@ -0,0 +1,3 @@
|
||||
# Snapshots Placeholder
|
||||
|
||||
HyperFrames snapshots are generated during validation and are not stored in this repository example.
|
||||
89
skills/it-infra-continuous-png/SKILL.md
Normal file
89
skills/it-infra-continuous-png/SKILL.md
Normal file
@ -0,0 +1,89 @@
|
||||
---
|
||||
name: it-infra-continuous-png
|
||||
version: "v1"
|
||||
description: "生成 IT 基础设施系列连续风格 PNG 图片。适用于一图看懂、长图信息图、IT基础设施演进、平台工程、网络/存储/安全/监控/AI 共进化主题；支持根据用户输入图片或详细描述输出 1-N 张独立的 1024x1536 蓝白科技风竖版 PNG，并产出可供 it-infra-evolution-video skill 消费的素材 manifest。"
|
||||
---
|
||||
|
||||
# IT 基础设施连续风格 PNG Skill
|
||||
|
||||
为 `it-infra-evolution-video` 提供输入素材：根据用户给定的参考图片、主题规划或详细描述，生成 `1-N` 张风格连续的竖版 PNG 长图。`N` 张图必须输出为 `N` 个独立 PNG 文件，不能合并成一张总览图、拼图、宫格、联系表或多页预览。
|
||||
|
||||
## 适用场景
|
||||
|
||||
触发词包括：
|
||||
|
||||
- `连续风格 PNG`
|
||||
- `一图看懂长图`
|
||||
- `IT 基础设施长图`
|
||||
- `小红书科技长图`
|
||||
- `给 it-infra-evolution-video 做素材`
|
||||
- `网络/存储/安全/监控/平台工程/AI 共进化 图片`
|
||||
- `根据这些图生成同风格图片`
|
||||
|
||||
## 默认规格
|
||||
|
||||
- 默认输出格式：`PNG`
|
||||
- 默认尺寸：`1024x1536`，2:3 竖版长图。
|
||||
- 默认数量：用户指定 `N`；未指定时按主题拆成 `1-7` 张。
|
||||
- 输出颗粒度：每个主题/章节一个独立 PNG 文件；`count=7` 就必须有 7 个 PNG 文件。
|
||||
- 默认语言：中文为主，英文技术词作为辅助标签。
|
||||
- 默认风格：蓝白科技信息图，Apple Keynote + 企业科技宣传片 + AI Infra 系列统一视觉。
|
||||
- 默认交付：
|
||||
- `assets/images/*.png`，一张图一个文件
|
||||
- `assets/images/manifest.md`
|
||||
- `prompts/image-prompts.md`
|
||||
- 每张图的主题、标题、副标题、结构块、关键词、生成提示词。
|
||||
|
||||
## 工作流
|
||||
|
||||
1. 读取用户输入：参考图、文件路径、主题清单、文字描述、目标数量和用途。
|
||||
2. 抽取或套用统一风格规范，见 `references/style-spec.md`。
|
||||
3. 生成系列配置，字段见 `templates/series.config.example.json`。
|
||||
4. 为每张图生成独立 prompt，保证同一系列的布局、字体、色彩、底部总结条和视觉元素连续。
|
||||
5. 逐张生成或编辑 PNG 图片。每次生成请求只描述一张目标图，避免模型把多张图拼进同一个画布。
|
||||
6. 保存输出到用户指定目录；未指定时放在当前项目的 `assets/images/`。
|
||||
7. 写 `assets/images/manifest.md`，供 `it-infra-evolution-video` 作为真实素材清单使用。
|
||||
|
||||
## 多图输出规则
|
||||
|
||||
- `count=N` 表示输出 `N` 个独立文件：`001-*.png`、`002-*.png` ... `N-*.png`。
|
||||
- 严禁把多个章节合成到一张 1024x1536 画布里。
|
||||
- 严禁输出 collage、contact sheet、grid、storyboard sheet、overview board、multi-panel batch preview。
|
||||
- 每张 PNG 内部可以有多个信息卡片，但只能围绕一个主题/章节。
|
||||
- 批量生成时，先生成 `series.config.json`，再按 `images[]` 逐项生成。
|
||||
- manifest 必须逐文件记录，行数应等于输出 PNG 数量。
|
||||
|
||||
## 风格硬约束
|
||||
|
||||
- 画布必须是 `1024x1536`，除非用户明确要求其他尺寸。
|
||||
- 主色必须是白、浅蓝、深蓝，少量青色、绿色、紫色、橙色用于分类强调。
|
||||
- 顶部必须有系列标识胶囊，如 `一图看懂`，并保持统一位置和样式。
|
||||
- 标题必须是超大深蓝中文标题，左上优先。
|
||||
- 主视觉必须与主题强相关：道路、城市、服务器、盾牌、监控屏、网络地球、存储阵列、机器人/AI 芯片等。
|
||||
- 信息结构必须清晰：阶段卡片、路线节点、中心图解、Checklist、核心趋势、底部总结条至少使用其中两种。
|
||||
- 底部必须保留深蓝总结条，用于视频扫描时形成稳定视觉锚点。
|
||||
- 不生成纯海报、纯插画、纯 UI mockup、暗色仪表盘、复杂低可读文字墙。
|
||||
- 不生成多张图合并预览、宫格合集或一张图承载整个系列。
|
||||
- 不加入点赞收藏 CTA，除非用户明确要求。
|
||||
|
||||
## 与视频 Skill 的衔接
|
||||
|
||||
输出给 `it-infra-evolution-video` 时，每张图必须在 manifest 中记录：
|
||||
|
||||
- `chapter_id`
|
||||
- `title`
|
||||
- `file`
|
||||
- `source_type`: `generated_from_description`、`generated_from_reference_image` 或 `user_provided`
|
||||
- `prompt`
|
||||
- `video_usage`: 建议用于哪个视频章节
|
||||
- `scan_mode`: `cover` 或 `contain`
|
||||
- `safe_focus`: 建议视频双栏扫描时优先保留的主体区域
|
||||
|
||||
`it-infra-evolution-video` 不应重新发明这些图片的风格，只读取 manifest 并作为真实长图素材使用。
|
||||
|
||||
## 参考文件
|
||||
|
||||
- 风格规范：`references/style-spec.md`
|
||||
- Prompt 模式：`references/prompt-patterns.md`
|
||||
- 系列配置示例：`templates/series.config.example.json`
|
||||
- manifest 模板：`templates/manifest.template.md`
|
||||
6
skills/it-infra-continuous-png/agents/openai.yaml
Normal file
6
skills/it-infra-continuous-png/agents/openai.yaml
Normal file
@ -0,0 +1,6 @@
|
||||
name: IT Infra Continuous PNG
|
||||
description: Generate 1-N consistent blue-white IT infrastructure PNG infographics for the it-infra-evolution-video workflow.
|
||||
default_prompt: |
|
||||
Generate a consistent 1024x1536 PNG infographic series in the IT infrastructure blue-white style.
|
||||
Output N requested images as N separate PNG files, never as one combined collage or grid.
|
||||
Use the user's images or descriptions as source material, create a series config, execute one prompt per image, and write an image manifest for it-infra-evolution-video.
|
||||
74
skills/it-infra-continuous-png/references/prompt-patterns.md
Normal file
74
skills/it-infra-continuous-png/references/prompt-patterns.md
Normal file
@ -0,0 +1,74 @@
|
||||
# Prompt Patterns
|
||||
|
||||
Use these patterns to generate a consistent PNG series.
|
||||
|
||||
Important output contract: generate one image per prompt. Do not ask the image model for "a batch of N images" in a single prompt. For `N` outputs, run `N` separate image-generation prompts and save `N` separate PNG files.
|
||||
|
||||
## Base Style Prompt
|
||||
|
||||
```text
|
||||
1024x1536 vertical Chinese technology infographic, blue and white AI infrastructure style, Apple Keynote enterprise tech poster, huge bold dark navy Chinese title at top-left, small blue rounded pill label "一图看懂", clean white to light-blue gradient background, soft futuristic city/datacenter background, glassmorphism cards, thin light-blue borders, soft shadows, cyan glow lines, structured technical diagram, readable Chinese labels, concise English technology keywords, bottom deep-blue trend summary bar, high-end clean UI, modern enterprise infrastructure illustration, no dark cyberpunk, no crowded tiny text, no photo realism, no CTA buttons unless requested
|
||||
```
|
||||
|
||||
## Per-Image Prompt Shape
|
||||
|
||||
```text
|
||||
Generate exactly one standalone 1024x1536 vertical PNG infographic.
|
||||
This is image {index} of {count} in a continuous series.
|
||||
Do not create a collage, grid, contact sheet, multi-image preview, storyboard board, or combined overview.
|
||||
|
||||
Topic: {topic}
|
||||
Title: {title}
|
||||
Subtitle: {subtitle}
|
||||
Core visual: {main_visual}
|
||||
Information structure: {layout_structure}
|
||||
Required nodes/cards:
|
||||
{nodes}
|
||||
Bottom summary: {summary}
|
||||
|
||||
Apply the base style exactly. Keep the same family look as the reference IT infrastructure series. Use one 1024x1536 PNG composition for this single topic only. Use large readable Chinese text, blue-white palette, clean rounded infographic cards, and a bottom deep-blue summary strip.
|
||||
```
|
||||
|
||||
## Batch Execution Pattern
|
||||
|
||||
For a 7-image series, do this:
|
||||
|
||||
1. Build `series.config.json` with 7 `images[]` entries.
|
||||
2. Generate prompt for `images[0]`; run image generation once; save `001-{id}.png`.
|
||||
3. Generate prompt for `images[1]`; run image generation once; save `002-{id}.png`.
|
||||
4. Continue until `007-{id}.png`.
|
||||
5. Write `manifest.md` with 7 rows.
|
||||
|
||||
Never use a single prompt such as "create 7 separate images" because many image models will merge the series into one canvas.
|
||||
|
||||
## Series Continuity Checklist
|
||||
|
||||
- Same canvas size.
|
||||
- Same top-left `一图看懂` pill.
|
||||
- Same title position and weight.
|
||||
- Same blue-white background and rounded poster boundary.
|
||||
- Same bottom summary strip.
|
||||
- Same icon language.
|
||||
- Same density level.
|
||||
- Topic-specific main visual only changes by subject.
|
||||
- Separate files for separate topics.
|
||||
|
||||
## Image-Input Mode
|
||||
|
||||
When users provide reference images:
|
||||
|
||||
- Treat them as style and structure references.
|
||||
- Extract layout, colors, information hierarchy, and motif.
|
||||
- Do not copy exact pixels, watermarks, or accidental artifacts.
|
||||
- Preserve user-provided technical terms and topic names.
|
||||
- If a reference image conflicts with this v1 style, prefer the 7-image IT infrastructure family style unless the user explicitly says otherwise.
|
||||
|
||||
## Description-Only Mode
|
||||
|
||||
When users provide only text:
|
||||
|
||||
- First create a series plan with `N` images.
|
||||
- Assign each image a title, subtitle, main visual, node list, and bottom summary.
|
||||
- Generate one prompt per image using the base prompt.
|
||||
- Execute each prompt separately.
|
||||
- Keep terminology consistent across the entire series.
|
||||
89
skills/it-infra-continuous-png/references/style-spec.md
Normal file
89
skills/it-infra-continuous-png/references/style-spec.md
Normal file
@ -0,0 +1,89 @@
|
||||
# Continuous PNG Style Spec
|
||||
|
||||
This style is extracted from the 7 reference images provided for the IT infrastructure video asset workflow.
|
||||
|
||||
## Resolution
|
||||
|
||||
- Primary: `1024x1536`
|
||||
- Aspect ratio: `2:3`
|
||||
- Use this size for Xiaohongshu-style long infographics and as source material for the 16:9 video scanner.
|
||||
|
||||
## Visual Identity
|
||||
|
||||
- Background: white to very light blue gradient.
|
||||
- Border: large rounded outer poster boundary, usually `28-40px` visual radius.
|
||||
- Primary color: deep navy `#061A55` / `#07194F`.
|
||||
- Accent blue: `#155BFF`, `#2F7DFF`.
|
||||
- Glow colors: cyan `#49D9FF`, teal `#18BFA6`.
|
||||
- Secondary accents:
|
||||
- green/teal for security/pass/AI
|
||||
- purple for orchestration/RAG/agent
|
||||
- orange for warning, AIOps, CI/CD, acceleration
|
||||
- gold only for key/star highlights
|
||||
|
||||
## Typography
|
||||
|
||||
- Use bold Chinese sans-serif style: HarmonyOS Sans, MiSans, Alibaba PuHuiTi, PingFang SC, or similar.
|
||||
- Title: very large, deep navy, tight line-height, no negative letter spacing.
|
||||
- Subtitle: medium-weight dark blue, 2-3 lines max.
|
||||
- Card body: concise bullet lines; avoid dense paragraphs.
|
||||
- English terms are allowed as technical labels: `IAM`, `OIDC`, `RBAC`, `Kubernetes`, `AI Native`, `GitOps`.
|
||||
|
||||
## Required Layout Motifs
|
||||
|
||||
Each image should use at least two of these motifs:
|
||||
|
||||
- Road/path evolution: curved road, timeline route, stage markers.
|
||||
- Centerpiece object: shield, monitor, server, storage cylinder, globe, AI chip, robot, operator.
|
||||
- Stage cards: numbered cards with era, date range, 2-4 bullets, tool names.
|
||||
- Node graph: circular icons connected by light lines.
|
||||
- Bottom summary strip: deep blue bar with a short trend summary.
|
||||
- Core trend panel: white glass card with icon list.
|
||||
- Capability flow row: horizontal row of small icons and arrows.
|
||||
|
||||
## Composition Rules
|
||||
|
||||
- Keep a stable family look: top-left series pill, large title, main illustration, structured cards, bottom summary.
|
||||
- Leave enough white space around the title and main visual.
|
||||
- Keep card borders thin and light blue.
|
||||
- Keep shadows soft, not heavy.
|
||||
- Use rounded cards, but avoid nested card-in-card clutter.
|
||||
- Icons should be clean line/isometric style, mostly blue.
|
||||
- Main objects should be inspectable and subject-relevant, not vague atmosphere.
|
||||
|
||||
## Content Rules
|
||||
|
||||
- One image equals one topic.
|
||||
- Use Chinese headings with compact technical labels.
|
||||
- Prefer 5-8 major nodes for evolution paths.
|
||||
- Prefer 4-7 checklist/capability items.
|
||||
- Keep every text block readable at mobile preview size.
|
||||
- Use consistent labels across a series, for example:
|
||||
- `本地存储时代`
|
||||
- `云原生时代`
|
||||
- `AI Native 时代`
|
||||
- `核心趋势`
|
||||
- `趋势总结`
|
||||
|
||||
## Avoid
|
||||
|
||||
- Dark cyberpunk dashboard.
|
||||
- Heavy purple or orange palettes.
|
||||
- Stock-photo realism.
|
||||
- Random decorative gradients without architecture meaning.
|
||||
- Too much text in tiny sizes.
|
||||
- Inconsistent title placement across a series.
|
||||
- CTA badges such as likes/favorites unless explicitly requested.
|
||||
|
||||
## Reference Extraction
|
||||
|
||||
The v1 style was derived from these local reference files:
|
||||
|
||||
- `/Users/shenlan/Library/CloudStorage/GoogleDrive-haitaopanhq@gmail.com/我的云端硬盘/自媒体/IT系统演变历史/小红书-IT基础设置演进之路.png`
|
||||
- `/Users/shenlan/Library/CloudStorage/GoogleDrive-haitaopanhq@gmail.com/我的云端硬盘/自媒体/IT系统演变历史/小红书-从手工运维到现代平台工程.png`
|
||||
- `/Users/shenlan/Library/CloudStorage/GoogleDrive-haitaopanhq@gmail.com/我的云端硬盘/自媒体/IT系统演变历史/小红书-监控的前生今世.png`
|
||||
- `/Users/shenlan/Library/CloudStorage/GoogleDrive-haitaopanhq@gmail.com/我的云端硬盘/自媒体/IT系统演变历史/小红书-网络与协议.png`
|
||||
- `/Users/shenlan/Library/CloudStorage/GoogleDrive-haitaopanhq@gmail.com/我的云端硬盘/自媒体/IT系统演变历史/小红书-存储演进之路.png`
|
||||
- `/Users/shenlan/Library/CloudStorage/GoogleDrive-haitaopanhq@gmail.com/我的云端硬盘/自媒体/IT系统演变历史/小红书-账户与安全体系.png`
|
||||
- `/Users/shenlan/Library/CloudStorage/GoogleDrive-haitaopanhq@gmail.com/我的云端硬盘/自媒体/IT系统演变历史/小红书-与AI共同进化.png`
|
||||
|
||||
@ -0,0 +1,15 @@
|
||||
# Image Manifest
|
||||
|
||||
Output mode: separate PNG files. Each row must point to one standalone `1024x1536` PNG. The number of manifest rows must equal the requested image count.
|
||||
|
||||
| chapter_id | title | file | source_type | video_usage | scan_mode | safe_focus |
|
||||
| --- | --- | --- | --- | --- | --- | --- |
|
||||
| identity-security | 账户与安全体系 | assets/images/001-identity-security.png | generated_from_description | 账户与安全章节 | cover | center shield and upper-left title |
|
||||
|
||||
## Prompt Log
|
||||
|
||||
### identity-security
|
||||
|
||||
- Source: user description
|
||||
- Prompt: paste final image prompt here
|
||||
- Notes: record any manual edits or regeneration decisions here
|
||||
@ -0,0 +1,38 @@
|
||||
{
|
||||
"series": {
|
||||
"name": "modern-it-infrastructure",
|
||||
"stylePreset": "blue-white-ai-infra-v1",
|
||||
"outputFormat": "png",
|
||||
"width": 1024,
|
||||
"height": 1536,
|
||||
"count": 7,
|
||||
"outputMode": "separate_png_files",
|
||||
"onePromptPerImage": true,
|
||||
"forbidCombinedCanvas": true,
|
||||
"language": "zh-CN",
|
||||
"targetConsumerSkill": "it-infra-evolution-video"
|
||||
},
|
||||
"images": [
|
||||
{
|
||||
"id": "identity-security",
|
||||
"title": "账户与安全体系",
|
||||
"subtitle": "从 IAM、SSO、RBAC、Zero Trust 到现代身份体系",
|
||||
"topic": "identity and security architecture",
|
||||
"mainVisual": "large glowing blue shield, floating lock, identity graph, AI city background",
|
||||
"layoutStructure": "hero title + central shield + six identity nodes + checklist band + bottom summary",
|
||||
"nodes": [
|
||||
"用户身份",
|
||||
"工作负载身份",
|
||||
"云资源身份",
|
||||
"CI/CD 身份",
|
||||
"密钥管理",
|
||||
"供应链安全"
|
||||
],
|
||||
"summary": "安全边界正在从网络边界进入身份边界。",
|
||||
"output": "assets/images/identity-security.png",
|
||||
"videoUsage": "账户与安全章节",
|
||||
"scanMode": "cover",
|
||||
"safeFocus": "center shield and upper-left title"
|
||||
}
|
||||
]
|
||||
}
|
||||
180
skills/it-infra-evolution-video/SKILL.md
Normal file
180
skills/it-infra-evolution-video/SKILL.md
Normal file
@ -0,0 +1,180 @@
|
||||
---
|
||||
name: it-infra-evolution-video
|
||||
version: "v1"
|
||||
description: "制作 IT 基础设施系列长图讲解视频。适用于 IT基础设施演进史、一图看懂视频、长图讲解视频、平台工程视频、网络/存储/安全/监控演进视频。默认使用 HyperFrames + edge-tts + 真实用户图/信息图素材，生成 1920x1080 横屏视频、中文口播、逐句字幕、BGM、章节 timeline tag，并完成 lint/inspect/snapshot/render/ffprobe 验证。"
|
||||
---
|
||||
|
||||
# IT 基础设施系列长图讲解视频 Skill
|
||||
|
||||
## Version Lock
|
||||
|
||||
- Version: `v1`
|
||||
- Status: read-only frozen template
|
||||
- Do not mutate this skill in-place for v2 work. Create a new copy instead.
|
||||
|
||||
使用 `HyperFrames + edge-tts + 用户长图/信息图素材` 制作中文技术讲解视频。默认效果必须对齐样片 `/Users/shenlan/workspaces/cloud-neutral-toolkit/docs/it-infra-evolution-video` 的合成风格：蓝白技术纪录片视觉、双栏长图扫描、底部章节 timeline tag、高亮当前章节、深蓝字幕条和本地合成 BGM/SFX。样片里的 `8 段完整结构`、`82 秒`、`8 列 timeline` 是可提取的结构特征和默认配置，不是固定限制；实际章节数、总时长、timeline 列数必须由用户输入或生成配置决定。这个 skill 是 `ai-tech-news-video` 的独立派生副本，**不要修改原始 `ai-tech-news-video` skill**。
|
||||
|
||||
## 适用场景
|
||||
|
||||
触发词包括：
|
||||
|
||||
- `IT基础设施演进史`
|
||||
- `一图看懂视频`
|
||||
- `长图讲解视频`
|
||||
- `平台工程视频`
|
||||
- `网络演进视频`
|
||||
- `存储演进视频`
|
||||
- `账户与安全体系视频`
|
||||
- `监控的前生今世`
|
||||
- `与 AI 共同进化`
|
||||
|
||||
适合把用户提供的一组小红书/海报/架构图/信息图，转成横屏讲解视频。
|
||||
|
||||
## 默认规格
|
||||
|
||||
- 默认画布：`1920x1080`，16:9 横屏。
|
||||
- 默认时长：用户未指定时使用样片配置 `82s` 左右；用户指定时以用户配置为准。
|
||||
- 默认语言：中文。
|
||||
- 默认 voice：`zh-CN-YunxiNeural`，`--rate="+20%"` 到 `"+30%"`。
|
||||
- 默认结构：用户未指定时使用样片配置 8 个章节；用户指定时以用户的章节配置为准。
|
||||
- 默认 timeline：列数等于章节数；用户未指定时使用样片配置 8 列。
|
||||
- 必须包含：
|
||||
- 真实素材清单：`assets/images/manifest.md`
|
||||
- 每段口播音频
|
||||
- 每段可读字幕
|
||||
- BGM
|
||||
- 章节 timeline tag，当前章节高亮
|
||||
- HyperFrames `lint`、`inspect`、`snapshot`
|
||||
- 最终 MP4
|
||||
- `ffprobe` 分辨率、时长、音视频流校验
|
||||
|
||||
## 工作流
|
||||
|
||||
1. 收集用户给定的长图/信息图素材。
|
||||
2. 建立 HyperFrames 项目，创建 `assets/images/`、`assets/audio/`、`assets/audio/sfx/`。
|
||||
3. 复制或引用素材，并写 `assets/images/manifest.md`。
|
||||
4. 产出章节配置：标题、口播、字幕、章节 tag、素材文件、`start`、`duration`。章节数、总时长和 timeline 列数必须来自用户输入或生成配置。
|
||||
5. 用 `edge-tts` 生成每段口播。
|
||||
6. 用 `scripts/render_audio_bed.py` 生成 BGM 和转场音效，或接入用户提供 BGM。
|
||||
7. 基于 `templates/index.html` 生成 HyperFrames 合成页面；默认不要重写视觉系统，按配置增删 scene、caption、timeline tag，并替换素材、标题、文案、音频时长和章节 tag。
|
||||
8. 运行：
|
||||
|
||||
```bash
|
||||
npx --yes hyperframes@0.6.15 lint
|
||||
npx --yes hyperframes@0.6.15 inspect --at 2,14,24,34,44,54,64,74
|
||||
npx --yes hyperframes@0.6.15 snapshot --at 2,14,24,34,44,54,64,74
|
||||
npx --yes hyperframes@0.6.15 render --output renders/it-infra-evolution.mp4 --quality standard
|
||||
ffprobe -v quiet -show_entries format=duration,size:stream=codec_type,width,height,r_frame_rate -of json renders/it-infra-evolution.mp4
|
||||
```
|
||||
|
||||
## 素材硬门槛
|
||||
|
||||
每个章节必须有真实素材。真实素材可以是：
|
||||
|
||||
- 用户提供的小红书/海报/信息图
|
||||
- 官方页面截图
|
||||
- 产品界面截图
|
||||
- 架构图或技术图谱
|
||||
- 公开资料截图
|
||||
|
||||
不要用纯 CSS 卡片、假界面、抽象图标或 AI 编造截图替代主素材。
|
||||
|
||||
`assets/images/manifest.md` 必须记录：
|
||||
|
||||
- 章节编号和标题
|
||||
- 素材文件名
|
||||
- 原始来源或用户提供路径
|
||||
- 素材类型
|
||||
- 该素材支撑哪段叙事
|
||||
|
||||
## 配置规则
|
||||
|
||||
先把用户输入沉淀成一个视频配置，再生成 HyperFrames 页面。配置字段至少包含：
|
||||
|
||||
- `duration`: 总时长，秒。
|
||||
- `sections`: 章节数组。每个章节包含 `id`、`start`、`duration`、`timeLabel`、`timelineLabel`、`title`、`subtitle`、`tags`、`image`、`voiceover`、`caption`。
|
||||
- `timelineColumns`: timeline 列数。默认等于 `sections.length`，除非用户明确要求分组显示。
|
||||
- `inspectTimes`: 每个章节中点时间，用于 `inspect` 和 `snapshot`。
|
||||
|
||||
配置示例见 `templates/video.config.example.json`。这个文件只表达字段形状；正式项目应根据用户素材和节奏生成自己的配置。
|
||||
|
||||
结构参数优先级：
|
||||
|
||||
1. 用户明确给出的时长、章节和节奏。
|
||||
2. 用户素材数量和叙事需要推导出的配置。
|
||||
3. 样片默认配置：8 段、82 秒、8 列 timeline。
|
||||
|
||||
详细模板见 `references/storyboard-pattern.md`。
|
||||
|
||||
## 叙事模板
|
||||
|
||||
用户未指定结构时，使用样片同款 8 段默认结构：
|
||||
|
||||
1. 引言：这不是单点升级，而是一组能力共同进化。
|
||||
2. 基础设施主线：硬件、虚拟化、云、容器、治理、AI 原生。
|
||||
3. 账户与安全：边界从网络迁移到身份。
|
||||
4. 监控与可观测性：从事后告警到预测、定位、自愈。
|
||||
5. 网络与协议：从连接一切到理解一切。
|
||||
6. 存储服务：从存下来到高效流动。
|
||||
7. 平台工程：从人肉运维到平台化交付。
|
||||
8. 与 AI 共同进化：从工具系统到 AI 协同系统。
|
||||
|
||||
用户素材不足 8 张时，合并章节；用户素材更多时，按主题拆成 6-10 个章节，或按用户指定的章节数执行。总时长以用户配置为准；未指定时保持在 60-90 秒。
|
||||
|
||||
## 画面模板
|
||||
|
||||
默认使用样片同款蓝白技术纪录片风格：
|
||||
|
||||
- 左侧展示真实长图，右侧显示章节 kicker、标题、短说明和关键词 tags。
|
||||
- 画布背景是白到浅蓝渐变，并带右上角 cyan 圆环装饰。
|
||||
- 长图放在 760px 高、34px 圆角、白底阴影的 `.image-panel` 内，默认 `object-fit: cover`，需要完整展示时用 `.contain`。
|
||||
- 每段长图做 `y: -70`、`scale: 1.1` 的缓慢扫描。
|
||||
- 底部固定半透明 timeline tag，列数由 `timelineColumns` 或 `sections.length` 决定，当前章节蓝绿渐变高亮并轻微上浮。
|
||||
- 字幕位于 timeline 上方安全区，深蓝半透明底，左右 `320px`，底部 `132px`。
|
||||
- 不加关注、点赞、收藏等 CTA，除非用户明确要求。
|
||||
|
||||
实现细节见 `references/hyperframes-it-infra-template.md`，可从 `templates/index.html` 开始改。
|
||||
|
||||
## 样片一致性要求
|
||||
|
||||
当用户要求“和 `it-infra-evolution.mp4` 效果一致”或未指定其他风格时：
|
||||
|
||||
- 使用 `templates/index.html` 的视觉和动效作为母版；其中 8 段/82 秒/8 列 timeline 是默认样片配置。
|
||||
- 如果用户给出其他章节数、时长或 timeline 数量，按用户配置重排 scene、caption、timeline tag 和校验时间点。
|
||||
- 保留 CSS 尺寸、颜色、圆角、阴影、caption、timeline、GSAP 动效参数。
|
||||
- 只替换素材路径、章节文案、tag、音频文件名、`data-start` 和 `data-duration`。
|
||||
- 不改成深色 dashboard、三图并列、纯生成海报轮播或营销片风格。
|
||||
- 如果用户提供的是 1-2 张总览长图，也仍然用双栏长图扫描和章节 tag 组织，不要退化成静态 PPT。
|
||||
|
||||
## 口播规则
|
||||
|
||||
- 每段 1-2 句，尽量 8-12 秒。
|
||||
- 不说“第一条、第二条”。
|
||||
- 不说无关自我介绍。
|
||||
- 字幕可以略短于口播，但必须覆盖关键含义。
|
||||
- 每个 `<audio>` clip 必须有对应字幕 clip。
|
||||
- 生成后用 `ffprobe` 读取音频时长，再把 `data-start` / `data-duration` 写入 HTML。
|
||||
|
||||
示例：
|
||||
|
||||
```bash
|
||||
edge-tts --voice zh-CN-YunxiNeural --rate='+20%' \
|
||||
--text 'IT 基础设施演进史，不只是服务器升级。它是一组能力的共同进化。' \
|
||||
--write-media assets/audio/intro.mp3
|
||||
```
|
||||
|
||||
## BGM 与音效
|
||||
|
||||
- 先检查项目是否已有 `assets/audio/bgm.mp3` 或 `assets/audio/bgm.wav`。
|
||||
- 若没有，可使用本 skill 的 `scripts/render_audio_bed.py` 生成本地合成 BGM 和转场音效。
|
||||
- BGM 音量建议 `data-volume="0.08"` 到 `0.12`。
|
||||
- 口播音量建议 `data-volume="0.90"` 到 `0.95`。
|
||||
- Web Audio API 不会进入 HyperFrames MP4，所有音频必须使用 `<audio class="clip">`。
|
||||
|
||||
## 验收标准
|
||||
|
||||
- `npx hyperframes lint` 无 error。
|
||||
- `npx hyperframes inspect` 无布局 error；图片 zoom 裁切 warning 可接受。
|
||||
- `snapshot` 至少覆盖每个章节的中间时刻。
|
||||
- 最终 MP4 使用 `ffprobe` 确认为 `1920x1080`、有 video stream、有 audio stream、时长符合预期。
|
||||
- 原始 `ai-tech-news-video` skill 未被修改。
|
||||
5
skills/it-infra-evolution-video/VERSION.md
Normal file
5
skills/it-infra-evolution-video/VERSION.md
Normal file
@ -0,0 +1,5 @@
|
||||
# it-infra-evolution-video v1
|
||||
|
||||
Status: read-only frozen skill package.
|
||||
|
||||
This skill package is the v1 video workflow for IT infrastructure long-image explainer videos. Keep it immutable. For future changes, create a new skill package copy or a v2 directory instead of editing this v1 package in place.
|
||||
3
skills/it-infra-evolution-video/agents/openai.yaml
Normal file
3
skills/it-infra-evolution-video/agents/openai.yaml
Normal file
@ -0,0 +1,3 @@
|
||||
display_name: IT 基础设施视频
|
||||
short_description: 用 HyperFrames、edge-tts 和长图素材制作 IT 基础设施系列讲解视频。
|
||||
default_prompt: 使用 it-infra-evolution-video skill，根据我提供的长图素材制作一条 60-90 秒中文横屏讲解视频，包含素材 manifest、逐段口播、字幕、BGM、章节 timeline tag、HyperFrames 校验和最终 MP4。
|
||||
@ -0,0 +1,89 @@
|
||||
# HyperFrames IT Infrastructure Template
|
||||
|
||||
这个模板来自 `/Users/shenlan/workspaces/cloud-neutral-toolkit/docs/it-infra-evolution-video` 的样片，适合把竖版技术长图改成 16:9 横屏讲解视频。默认目标是让新视频与样片 `it-infra-evolution.mp4` 的观感一致。
|
||||
|
||||
样片里的 `8 段完整结构`、`82 秒`、`8 列 timeline` 是默认配置和可复用结构特征，不是硬编码限制。实际项目必须先从用户输入生成配置，再把配置渲染成 scene、caption、timeline tag、audio clip 和校验时间点。
|
||||
|
||||
## Visual Identity
|
||||
|
||||
- 背景：白到浅蓝渐变，少量 cyan 光环。
|
||||
- 主色：`#07194F` 深蓝、`#155BFF` 基础设施蓝、`#49D9FF` cyan、`#18BFA6` AI 绿色。
|
||||
- 字体：中文系统 sans。标题大而紧，说明文字中等，tag 小而清晰。
|
||||
- 画面气质：技术纪录片、架构简报、清爽图解，不做暗色科幻仪表盘。
|
||||
|
||||
## Layout
|
||||
|
||||
- 根合成：`data-width="1920"`、`data-height="1080"`，`data-duration` 来自配置。
|
||||
- 每个章节一个 `.scene.clip`，同一 track 顺序播放；章节数来自配置。
|
||||
- timeline 列数默认等于章节数，用 `grid-template-columns: repeat(var(--timeline-columns), minmax(0, 1fr))` 或生成后的 `repeat(N, minmax(0, 1fr))` 表达。
|
||||
- 样片默认时间轴：
|
||||
- `0.0s` 引言，`12.0s`
|
||||
- `12.2s` 基础设施主线，`8.6s`
|
||||
- `21.0s` 账户与安全，`9.8s`
|
||||
- `31.0s` 监控与可观测性，`9.2s`
|
||||
- `40.4s` 网络与协议，`10.0s`
|
||||
- `50.6s` 存储服务，`9.4s`
|
||||
- `60.2s` 平台工程，`9.0s`
|
||||
- `69.4s` 与 AI 共同进化，`11.6s`
|
||||
- 内容区使用双栏：
|
||||
- 左栏是 `.image-panel`，放真实长图。
|
||||
- 右栏是 `.copy`，放 kicker、标题、说明、关键词 tags。
|
||||
- 内容区 padding 必须保持接近样片：`92px 104px 214px`。
|
||||
- `.image-panel` 必须保持：`height: 760px`、`border-radius: 34px`、白底、淡蓝边框和大阴影。
|
||||
- 底部固定 `.timeline`：
|
||||
- `grid-template-columns` 按 `timelineColumns` 生成；样片是 `repeat(8, minmax(0, 1fr))`
|
||||
- 左右 `70px`，底部 `28px`，高 `88px`
|
||||
- 每个 `.chapter-tag` 包含时间和标题。
|
||||
- 当前章节加 `.active`，蓝绿渐变背景、白字、轻微上浮。
|
||||
- 字幕 `.caption` 放在 timeline 上方，深蓝半透明背景；保持 `left/right: 320px`、`bottom: 132px`。
|
||||
|
||||
## Motion
|
||||
|
||||
- 每个 scene 入场：
|
||||
- image panel: `x: -78, opacity: 0, scale: 0.96`
|
||||
- kicker/title/lead/tags 顺序上浮。
|
||||
- 每个长图做慢速扫描：
|
||||
- `tl.to("${scene} .image-panel img", { y: -70, scale: 1.1, duration: ... })`
|
||||
- 裁切 warning 是预期行为，需人工看 snapshot 确认主体可见。
|
||||
- 章节 tag：
|
||||
- 在章节 start 设置 `.active`
|
||||
- 在章节结束前移除 `.active`
|
||||
- 同步 `y: -8, scale: 1.04` 到 `y: 0, scale: 1`
|
||||
- 总进度条用真实 DOM 元素 `.timeline-progress`，不要直接动画伪元素。
|
||||
- 根节点在 `duration - 0.75s` 左右开始淡出，`0.65s` 完成。
|
||||
|
||||
## Audio
|
||||
|
||||
- 所有音频都必须是 `<audio class="clip">`。
|
||||
- BGM 使用高 track，例如 `data-track-index="20"`。
|
||||
- 口播使用固定 track，例如 `data-track-index="5"`。
|
||||
- SFX 使用 `6` 和 `7`。
|
||||
|
||||
## Validation
|
||||
|
||||
```bash
|
||||
npx --yes hyperframes@0.6.15 lint
|
||||
npx --yes hyperframes@0.6.15 inspect --at 2,14,24,34,44,54,64,74
|
||||
npx --yes hyperframes@0.6.15 snapshot --at 2,14,24,34,44,54,64,74
|
||||
```
|
||||
|
||||
Expected acceptable warnings:
|
||||
|
||||
- repeated source images when the same asset appears in multiple chapters
|
||||
- dense single-file track if the project is intentionally small
|
||||
- image overflow when zooming/scanning inside clipped panels
|
||||
|
||||
Errors or visible overlap must be fixed before render.
|
||||
|
||||
## Template Use
|
||||
|
||||
Use `templates/index.html` as the visual source of truth. It is intentionally a full working sample, not a shortened snippet. When adapting it:
|
||||
|
||||
- Replace `assets/images/*.png` with the user's real images.
|
||||
- Build a `sections` config first, then generate exactly one scene, one caption, and one timeline tag per section.
|
||||
- Set root `data-duration` from config, not from the sample duration.
|
||||
- Set timeline columns from config, usually `sections.length`.
|
||||
- Regenerate voiceover, then update all audio `data-duration` values from `ffprobe`.
|
||||
- Keep the same track layout: scenes on track `1`, captions on `10`, BGM on `20`, SFX on `6/7`.
|
||||
- Keep the same timeline tag interaction and progress bar.
|
||||
- Recompute validation timestamps from each section midpoint whenever duration or chapter count changes.
|
||||
@ -0,0 +1,57 @@
|
||||
# Storyboard Pattern
|
||||
|
||||
默认将 IT 基础设施系列长图组织成样片同款结构。每段包含：章节时间、章节名、主素材、标题、口播、字幕、关键词 tags。样片的 8 段、82 秒、8 列 timeline 是默认配置；当用户提供章节数、节奏或素材规划时，必须以用户输入生成新的结构配置。
|
||||
|
||||
## 配置化原则
|
||||
|
||||
- `sections.length` 决定 scene 数、caption 数和默认 timeline 列数。
|
||||
- `duration` 决定根合成时长、BGM/SFX 音频床长度和最终 `ffprobe` 期望值。
|
||||
- 每个章节的 `start + duration / 2` 决定 `inspect` 和 `snapshot` 时间点。
|
||||
- 视觉特征保持稳定：双栏长图扫描、蓝白背景、底部 timeline、当前章节高亮、深蓝字幕条。
|
||||
- 结构特征可变：章节数、章节名称、每段时长、总时长、timeline 列数。
|
||||
|
||||
## 8 段默认结构
|
||||
|
||||
| Start | Chapter | Narrative Goal | Suggested Tags |
|
||||
| --- | --- | --- | --- |
|
||||
| 0:00 | 引言 | 说明基础设施演进不是单点升级，而是多种能力共同进化 | 资源效率 / 系统弹性 / 自动化 / 智能化 |
|
||||
| 0:12 | 基础设施主线 | 从硬件、虚拟化、云平台、容器、治理到 AI 原生 | 硬件 / 云平台 / 容器 / AI 原生 |
|
||||
| 0:21 | 账户与安全 | 安全边界从网络迁移到身份 | IAM / SSO / RBAC / Zero Trust |
|
||||
| 0:31 | 监控与可观测性 | 从事后告警到预测、定位、自愈 | Metrics / Logs / Traces / AIOps |
|
||||
| 0:40 | 网络与协议 | 从连接一切到理解一切 | TCP/IP / HTTP / Service Mesh / AI Network |
|
||||
| 0:51 | 存储服务 | 从存下来到高效流动 | RAID / SAN / 对象存储 / AI 数据湖 |
|
||||
| 1:00 | 平台工程 | 从人肉运维到平台化交付 | Shell / IaC / CI/CD / GitOps |
|
||||
| 1:09 | 与 AI 共同进化 | 从工具系统到 AI 协同系统 | AI Agent / MCP / OpenClaw / Autonomous Infra |
|
||||
|
||||
## 样片口播节奏
|
||||
|
||||
用户未指定时，每段配音与画面分段一致，段间留 `0.2s` 左右转场：
|
||||
|
||||
- Intro: `0.0s` 开始，配音约 `11.8s`
|
||||
- Card 1: `12.2s` 开始，配音约 `8.3s`
|
||||
- Card 2: `21.0s` 开始，配音约 `9.6s`
|
||||
- Card 3: `31.0s` 开始，配音约 `8.9s`
|
||||
- Card 4: `40.4s` 开始，配音约 `9.8s`
|
||||
- Card 5: `50.6s` 开始，配音约 `9.2s`
|
||||
- Card 6: `60.2s` 开始，配音约 `8.8s`
|
||||
- Card 7: `69.4s` 开始，配音约 `8.7s`
|
||||
|
||||
## 文案约束
|
||||
|
||||
- 每段口播 1-2 句。
|
||||
- 每段字幕 1 行或 2 行，尽量不超过 28 个中文字符/行。
|
||||
- 章节标题直接讲主题，不使用营销标题。
|
||||
- 结尾不加 CTA，除非用户明确要求账号口播。
|
||||
|
||||
## 素材不足时
|
||||
|
||||
- 只有 1-3 张图：做 3-5 段，围绕每张图做局部扫描。
|
||||
- 4-6 张图：做 5-7 段，合并相近主题。
|
||||
- 7 张以上：优先做 8 段，保持 60-90 秒。
|
||||
- 如果用户明确指定章节数和总时长，以用户指定为准。
|
||||
|
||||
## 素材过多时
|
||||
|
||||
- 先选与用户主题最相关的 8 张。
|
||||
- 其余素材作为同章节补充镜头，除非用户明确要全量覆盖。
|
||||
- 不要把视频拉长到 2 分钟以上，除非用户明确要求长版。
|
||||
76
skills/it-infra-evolution-video/scripts/render_audio_bed.py
Executable file
76
skills/it-infra-evolution-video/scripts/render_audio_bed.py
Executable file
@ -0,0 +1,76 @@
|
||||
#!/usr/bin/env python3
|
||||
import argparse
|
||||
import math
|
||||
import os
|
||||
import struct
|
||||
import wave
|
||||
|
||||
|
||||
SAMPLE_RATE = 44100
|
||||
|
||||
|
||||
def write_wav(path, samples, volume=1.0):
|
||||
os.makedirs(os.path.dirname(path), exist_ok=True)
|
||||
with wave.open(path, "w") as wav:
|
||||
wav.setnchannels(2)
|
||||
wav.setsampwidth(2)
|
||||
wav.setframerate(SAMPLE_RATE)
|
||||
for value in samples:
|
||||
clipped = max(-1.0, min(1.0, value * volume))
|
||||
frame = struct.pack("<hh", int(clipped * 32767), int(clipped * 32767))
|
||||
wav.writeframes(frame)
|
||||
|
||||
|
||||
def tone(freq, t):
|
||||
return math.sin(2 * math.pi * freq * t)
|
||||
|
||||
|
||||
def envelope(t, duration, attack=0.02, release=0.08):
|
||||
if t < attack:
|
||||
return t / attack
|
||||
if t > duration - release:
|
||||
return max(0.0, (duration - t) / release)
|
||||
return 1.0
|
||||
|
||||
|
||||
def make_sfx(path, duration, freqs, volume):
|
||||
total = int(duration * SAMPLE_RATE)
|
||||
samples = []
|
||||
for i in range(total):
|
||||
t = i / SAMPLE_RATE
|
||||
env = envelope(t, duration)
|
||||
value = sum(tone(freq, t) for freq in freqs) / len(freqs)
|
||||
samples.append(value * env)
|
||||
write_wav(path, samples, volume)
|
||||
|
||||
|
||||
def make_bgm(path, duration):
|
||||
total = int(duration * SAMPLE_RATE)
|
||||
chord = [55.0, 82.41, 110.0, 164.81]
|
||||
samples = []
|
||||
for i in range(total):
|
||||
t = i / SAMPLE_RATE
|
||||
pulse = 0.55 + 0.45 * math.sin(2 * math.pi * 1.8 * t)
|
||||
pad = sum(tone(freq, t) for freq in chord) / len(chord)
|
||||
shimmer = 0.18 * tone(659.25, t) * (0.5 + 0.5 * math.sin(2 * math.pi * 0.25 * t))
|
||||
click = 0.08 * tone(220.0, t) if int(t * 2) % 2 == 0 else 0
|
||||
fade = min(1.0, t / 2.0, (duration - t) / 2.0)
|
||||
samples.append((0.65 * pad * pulse + shimmer + click) * fade)
|
||||
write_wav(path, samples, 0.25)
|
||||
|
||||
|
||||
def main():
|
||||
parser = argparse.ArgumentParser(description="Render local BGM and common SFX for HyperFrames videos.")
|
||||
parser.add_argument("--duration", type=float, default=82.0, help="BGM duration in seconds.")
|
||||
parser.add_argument("--out", default="assets/audio", help="Output audio directory.")
|
||||
args = parser.parse_args()
|
||||
|
||||
make_bgm(os.path.join(args.out, "bgm.wav"), args.duration)
|
||||
sfx_dir = os.path.join(args.out, "sfx")
|
||||
make_sfx(os.path.join(sfx_dir, "whoosh.wav"), 0.45, [180, 240, 360], 0.35)
|
||||
make_sfx(os.path.join(sfx_dir, "impact.wav"), 0.32, [70, 110, 180], 0.45)
|
||||
make_sfx(os.path.join(sfx_dir, "ping.wav"), 0.22, [880, 1320], 0.28)
|
||||
|
||||
|
||||
if __name__ == "__main__":
|
||||
main()
|
||||
438
skills/it-infra-evolution-video/templates/index.html
Normal file
438
skills/it-infra-evolution-video/templates/index.html
Normal file
@ -0,0 +1,438 @@
|
||||
<!doctype html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=1920, height=1080" />
|
||||
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
|
||||
<style>
|
||||
:root { --timeline-columns: 8; }
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
html, body {
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
overflow: hidden;
|
||||
background: #f3faff;
|
||||
font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;
|
||||
color: #07194f;
|
||||
}
|
||||
#root {
|
||||
position: relative;
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
overflow: hidden;
|
||||
background:
|
||||
radial-gradient(circle at 82% 16%, rgba(73,217,255,0.26), transparent 30%),
|
||||
radial-gradient(circle at 10% 92%, rgba(21,91,255,0.15), transparent 28%),
|
||||
linear-gradient(135deg, #ffffff 0%, #f3faff 46%, #dceeff 100%);
|
||||
}
|
||||
.clip { position: absolute; overflow: hidden; }
|
||||
.scene { inset: 0; opacity: 0; }
|
||||
.topbar {
|
||||
position: absolute;
|
||||
z-index: 40;
|
||||
top: 42px;
|
||||
left: 72px;
|
||||
right: 72px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-size: 26px;
|
||||
font-weight: 850;
|
||||
color: rgba(7,25,79,0.82);
|
||||
}
|
||||
.brand-pill {
|
||||
display: inline-flex;
|
||||
gap: 14px;
|
||||
align-items: center;
|
||||
padding: 14px 24px;
|
||||
border-radius: 999px;
|
||||
color: #fff;
|
||||
background: linear-gradient(135deg, #155bff, #18bfa6);
|
||||
box-shadow: 0 16px 40px rgba(21,91,255,0.22);
|
||||
}
|
||||
.brand-dot {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
border-radius: 50%;
|
||||
background: #fff;
|
||||
box-shadow: 0 0 24px #49d9ff;
|
||||
}
|
||||
.scene-content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 92px 104px 214px;
|
||||
display: grid;
|
||||
grid-template-columns: 0.96fr 1.04fr;
|
||||
gap: 58px;
|
||||
align-items: center;
|
||||
}
|
||||
.image-panel {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 760px;
|
||||
border-radius: 34px;
|
||||
overflow: hidden;
|
||||
background: #fff;
|
||||
border: 1px solid rgba(21,91,255,0.16);
|
||||
box-shadow: 0 34px 90px rgba(17,60,128,0.18);
|
||||
}
|
||||
.image-panel img {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
object-position: center top;
|
||||
filter: saturate(1.06) contrast(1.03);
|
||||
}
|
||||
.image-panel.contain img {
|
||||
object-fit: contain;
|
||||
padding: 20px;
|
||||
background: #fff;
|
||||
}
|
||||
.copy {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 26px;
|
||||
}
|
||||
.kicker {
|
||||
width: max-content;
|
||||
max-width: 100%;
|
||||
color: #155bff;
|
||||
background: rgba(21,91,255,0.08);
|
||||
border: 1px solid rgba(21,91,255,0.22);
|
||||
border-radius: 999px;
|
||||
padding: 12px 22px;
|
||||
font-size: 27px;
|
||||
font-weight: 950;
|
||||
}
|
||||
h1 {
|
||||
font-size: 80px;
|
||||
line-height: 1.05;
|
||||
font-weight: 950;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
h2 {
|
||||
font-size: 64px;
|
||||
line-height: 1.08;
|
||||
font-weight: 950;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
.lead {
|
||||
font-size: 32px;
|
||||
line-height: 1.55;
|
||||
font-weight: 760;
|
||||
color: rgba(7,25,79,0.78);
|
||||
}
|
||||
.tag-row {
|
||||
display: flex;
|
||||
gap: 14px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.tag {
|
||||
padding: 12px 16px;
|
||||
border-radius: 16px;
|
||||
color: #07194f;
|
||||
background: rgba(255,255,255,0.76);
|
||||
border: 1px solid rgba(73,217,255,0.34);
|
||||
box-shadow: 0 14px 30px rgba(17,60,128,0.08);
|
||||
font-size: 24px;
|
||||
font-weight: 900;
|
||||
}
|
||||
.caption {
|
||||
position: absolute;
|
||||
z-index: 55;
|
||||
left: 320px;
|
||||
right: 320px;
|
||||
bottom: 132px;
|
||||
min-height: 78px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
padding: 14px 32px;
|
||||
border-radius: 26px;
|
||||
background: rgba(7,25,79,0.88);
|
||||
color: #fff;
|
||||
font-size: 32px;
|
||||
line-height: 1.34;
|
||||
font-weight: 850;
|
||||
text-align: center;
|
||||
box-shadow: 0 20px 55px rgba(7,25,79,0.26);
|
||||
opacity: 0;
|
||||
}
|
||||
.timeline {
|
||||
position: absolute;
|
||||
z-index: 52;
|
||||
left: 70px;
|
||||
right: 70px;
|
||||
bottom: 28px;
|
||||
height: 88px;
|
||||
padding: 12px 14px 18px;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(var(--timeline-columns), minmax(0, 1fr));
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
overflow: visible;
|
||||
border-radius: 30px;
|
||||
background: rgba(255,255,255,0.76);
|
||||
border: 1px solid rgba(21,91,255,0.15);
|
||||
box-shadow: 0 20px 60px rgba(17,60,128,0.14);
|
||||
backdrop-filter: blur(12px);
|
||||
}
|
||||
.timeline-fill {
|
||||
position: absolute;
|
||||
left: 22px;
|
||||
right: 22px;
|
||||
bottom: 8px;
|
||||
height: 8px;
|
||||
border-radius: 999px;
|
||||
background: rgba(7,25,79,0.12);
|
||||
overflow: hidden;
|
||||
}
|
||||
.timeline-progress {
|
||||
display: block;
|
||||
width: 0%;
|
||||
height: 100%;
|
||||
border-radius: inherit;
|
||||
background: linear-gradient(90deg, #155bff, #49d9ff, #18bfa6);
|
||||
}
|
||||
.chapter-tag {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
min-width: 0;
|
||||
height: 50px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
padding: 0 10px;
|
||||
border-radius: 18px;
|
||||
background: rgba(255,255,255,0.72);
|
||||
border: 1px solid rgba(21,91,255,0.18);
|
||||
color: rgba(7,25,79,0.74);
|
||||
font-size: 20px;
|
||||
line-height: 1;
|
||||
font-weight: 900;
|
||||
white-space: nowrap;
|
||||
box-shadow: 0 12px 26px rgba(17,60,128,0.08);
|
||||
}
|
||||
.chapter-time {
|
||||
color: #155bff;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
.chapter-title {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.chapter-tag.active {
|
||||
color: #fff;
|
||||
background: linear-gradient(135deg, #155bff, #18bfa6);
|
||||
border-color: rgba(255,255,255,0.62);
|
||||
box-shadow: 0 20px 42px rgba(21,91,255,0.28);
|
||||
}
|
||||
.chapter-tag.active .chapter-time { color: #fff; }
|
||||
.glow-line {
|
||||
position: absolute;
|
||||
width: 560px;
|
||||
height: 560px;
|
||||
border-radius: 50%;
|
||||
border: 2px solid rgba(73,217,255,0.34);
|
||||
right: -160px;
|
||||
top: -150px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Sample config: 8 sections, 82 seconds, 8 timeline columns. Generators should replace these values from user input. -->
|
||||
<div id="root" data-composition-id="main" data-start="0" data-duration="82" data-width="1920" data-height="1080" style="--timeline-columns: 8">
|
||||
<div class="glow-line" data-layout-ignore></div>
|
||||
<div class="topbar" data-layout-ignore>
|
||||
<div class="brand-pill"><span class="brand-dot"></span><span>IT 基础设施演进史</span></div>
|
||||
<div>从硬件到 AI 原生生态</div>
|
||||
</div>
|
||||
|
||||
<section id="scene-intro" class="clip scene" data-start="0" data-duration="12.0" data-track-index="1">
|
||||
<div class="scene-content">
|
||||
<div class="image-panel"><img src="assets/images/it-infra-evolution-road.png" alt="IT 基础设施演进路线图" /></div>
|
||||
<div class="copy">
|
||||
<div class="kicker">0:00 / 引言</div>
|
||||
<h1>IT 基础设施演进史<br />是一组能力的共同进化</h1>
|
||||
<p class="lead">计算、网络、存储、安全、监控、平台工程，最终汇入 AI 原生。</p>
|
||||
<div class="tag-row"><span class="tag">资源效率</span><span class="tag">系统弹性</span><span class="tag">自动化</span><span class="tag">智能化</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="scene-mainline" class="clip scene" data-start="12.2" data-duration="8.6" data-track-index="1">
|
||||
<div class="scene-content">
|
||||
<div class="image-panel"><img src="assets/images/it-infra-evolution-road.png" alt="IT 基础设施主线" /></div>
|
||||
<div class="copy">
|
||||
<div class="kicker">0:12 / 基础设施主线</div>
|
||||
<h2>从物理硬件<br />到 AI 原生基础设施</h2>
|
||||
<p class="lead">硬件、虚拟化、云平台、容器、编排治理、智能基础设施，是一条围绕资源效率持续推进的路线。</p>
|
||||
<div class="tag-row"><span class="tag">硬件</span><span class="tag">云平台</span><span class="tag">容器</span><span class="tag">AI 原生</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="scene-security" class="clip scene" data-start="21.0" data-duration="9.8" data-track-index="1">
|
||||
<div class="scene-content">
|
||||
<div class="image-panel"><img src="assets/images/account-security.png" alt="账户与安全体系" /></div>
|
||||
<div class="copy">
|
||||
<div class="kicker">0:21 / 账户与安全</div>
|
||||
<h2>安全边界<br />从网络转向身份</h2>
|
||||
<p class="lead">谁访问、什么身份、什么权限、凭证是否可信、是否可审计，成为现代安全的中心问题。</p>
|
||||
<div class="tag-row"><span class="tag">IAM</span><span class="tag">SSO</span><span class="tag">RBAC</span><span class="tag">Zero Trust</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="scene-monitoring" class="clip scene" data-start="31.0" data-duration="9.2" data-track-index="1">
|
||||
<div class="scene-content">
|
||||
<div class="image-panel"><img src="assets/images/observability-history.png" alt="监控的前生今世" /></div>
|
||||
<div class="copy">
|
||||
<div class="kicker">0:31 / 监控与可观测性</div>
|
||||
<h2>从事后告警<br />走向 AI 自愈</h2>
|
||||
<p class="lead">指标、日志、链路、事件、拓扑和上下文一起进入运维系统，让系统从“报警”走向“预测与定位”。</p>
|
||||
<div class="tag-row"><span class="tag">Metrics</span><span class="tag">Logs</span><span class="tag">Traces</span><span class="tag">AIOps</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="scene-network" class="clip scene" data-start="40.4" data-duration="10.0" data-track-index="1">
|
||||
<div class="scene-content">
|
||||
<div class="image-panel"><img src="assets/images/network-protocol.png" alt="网络与协议" /></div>
|
||||
<div class="copy">
|
||||
<div class="kicker">0:40 / 网络与协议</div>
|
||||
<h2>网络从连接一切<br />走向理解一切</h2>
|
||||
<p class="lead">从 TCP/IP、HTTP、负载均衡，到服务网格和 AI 网络，网络正在承担更智能的路由与流量治理。</p>
|
||||
<div class="tag-row"><span class="tag">TCP/IP</span><span class="tag">HTTP</span><span class="tag">Service Mesh</span><span class="tag">AI Network</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="scene-storage" class="clip scene" data-start="50.6" data-duration="9.4" data-track-index="1">
|
||||
<div class="scene-content">
|
||||
<div class="image-panel contain"><img src="assets/images/storage-evolution.png" alt="存储演进之路" /></div>
|
||||
<div class="copy">
|
||||
<div class="kicker">0:51 / 存储服务</div>
|
||||
<h2>数据从存下来<br />走向高效流动</h2>
|
||||
<p class="lead">硬盘、RAID、SAN、对象存储、云原生存储和 AI 数据湖，让数据成为可调度、可治理的生产资料。</p>
|
||||
<div class="tag-row"><span class="tag">RAID / SAN</span><span class="tag">对象存储</span><span class="tag">CSI / Ceph</span><span class="tag">AI 数据湖</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="scene-platform" class="clip scene" data-start="60.2" data-duration="9.0" data-track-index="1">
|
||||
<div class="scene-content">
|
||||
<div class="image-panel"><img src="assets/images/platform-engineering.png" alt="从手工运维到现代平台工程" /></div>
|
||||
<div class="copy">
|
||||
<div class="kicker">1:00 / 平台工程</div>
|
||||
<h2>从人肉运维<br />到平台化交付</h2>
|
||||
<p class="lead">脚本、配置管理、基础设施即代码、CI/CD 和 GitOps，最终沉淀成可复用的平台能力。</p>
|
||||
<div class="tag-row"><span class="tag">Shell</span><span class="tag">IaC</span><span class="tag">CI/CD</span><span class="tag">GitOps</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="scene-ai" class="clip scene" data-start="69.4" data-duration="11.6" data-track-index="1">
|
||||
<div class="scene-content">
|
||||
<div class="image-panel contain"><img src="assets/images/ai-coevolution.png" alt="与 AI 共同进化" /></div>
|
||||
<div class="copy">
|
||||
<div class="kicker">1:09 / 与 AI 共同进化</div>
|
||||
<h2>基础设施从工具系统<br />变成 AI 协同系统</h2>
|
||||
<p class="lead">AI 不只是跑在基础设施之上，也会重新定义基础设施的交付、治理、优化和自治方式。</p>
|
||||
<div class="tag-row"><span class="tag">AI Agent</span><span class="tag">MCP</span><span class="tag">OpenClaw</span><span class="tag">Autonomous Infra</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="caption clip" id="cap-intro" data-start="0.2" data-duration="11.6" data-track-index="10">IT 基础设施演进史，不只是服务器升级，而是一组能力的共同进化。</div>
|
||||
<div class="caption clip" id="cap-1" data-start="12.3" data-duration="8.3" data-track-index="10">主线从硬件出发，经过云平台、容器和编排治理，持续提升资源效率。</div>
|
||||
<div class="caption clip" id="cap-2" data-start="21.1" data-duration="9.5" data-track-index="10">账户与安全体系，把边界从网络迁移到身份。</div>
|
||||
<div class="caption clip" id="cap-3" data-start="31.1" data-duration="8.9" data-track-index="10">监控从指标告警走向可观测性，再走向 AI Native 运维。</div>
|
||||
<div class="caption clip" id="cap-4" data-start="40.5" data-duration="9.7" data-track-index="10">网络与协议，从连接一切走向理解一切。</div>
|
||||
<div class="caption clip" id="cap-5" data-start="50.7" data-duration="9.1" data-track-index="10">存储服务从硬盘和 SAN，走向云原生存储和 AI 数据湖。</div>
|
||||
<div class="caption clip" id="cap-6" data-start="60.3" data-duration="8.7" data-track-index="10">平台工程把运维能力沉淀成稳定、可审计、可复用的平台能力。</div>
|
||||
<div class="caption clip" id="cap-7" data-start="69.5" data-duration="9.4" data-track-index="10">最终，基础设施从人操作系统，走向 AI 协同和自主演进。</div>
|
||||
|
||||
<div class="timeline" data-layout-ignore>
|
||||
<div class="chapter-tag" id="chapter-0"><span class="chapter-time">0:00</span><span class="chapter-title">引言</span></div>
|
||||
<div class="chapter-tag" id="chapter-1"><span class="chapter-time">0:12</span><span class="chapter-title">主线</span></div>
|
||||
<div class="chapter-tag" id="chapter-2"><span class="chapter-time">0:21</span><span class="chapter-title">安全</span></div>
|
||||
<div class="chapter-tag" id="chapter-3"><span class="chapter-time">0:31</span><span class="chapter-title">监控</span></div>
|
||||
<div class="chapter-tag" id="chapter-4"><span class="chapter-time">0:40</span><span class="chapter-title">网络</span></div>
|
||||
<div class="chapter-tag" id="chapter-5"><span class="chapter-time">0:51</span><span class="chapter-title">存储</span></div>
|
||||
<div class="chapter-tag" id="chapter-6"><span class="chapter-time">1:00</span><span class="chapter-title">平台工程</span></div>
|
||||
<div class="chapter-tag" id="chapter-7"><span class="chapter-time">1:09</span><span class="chapter-title">AI 共进化</span></div>
|
||||
<div class="timeline-fill"><div class="timeline-progress"></div></div>
|
||||
</div>
|
||||
|
||||
<audio id="bgm" class="clip" data-start="0" data-duration="82" data-track-index="20" data-volume="0.10" src="assets/audio/bgm.wav"></audio>
|
||||
<audio id="vo-intro" class="clip" data-start="0" data-duration="11.856" data-track-index="5" data-volume="0.92" src="assets/audio/intro.mp3"></audio>
|
||||
<audio id="vo-1" class="clip" data-start="12.2" data-duration="8.352" data-track-index="5" data-volume="0.92" src="assets/audio/card1.mp3"></audio>
|
||||
<audio id="vo-2" class="clip" data-start="21.0" data-duration="9.648" data-track-index="5" data-volume="0.92" src="assets/audio/card2.mp3"></audio>
|
||||
<audio id="vo-3" class="clip" data-start="31.0" data-duration="8.928" data-track-index="5" data-volume="0.92" src="assets/audio/card3.mp3"></audio>
|
||||
<audio id="vo-4" class="clip" data-start="40.4" data-duration="9.840" data-track-index="5" data-volume="0.92" src="assets/audio/card4.mp3"></audio>
|
||||
<audio id="vo-5" class="clip" data-start="50.6" data-duration="9.240" data-track-index="5" data-volume="0.92" src="assets/audio/card5.mp3"></audio>
|
||||
<audio id="vo-6" class="clip" data-start="60.2" data-duration="8.808" data-track-index="5" data-volume="0.92" src="assets/audio/card6.mp3"></audio>
|
||||
<audio id="vo-7" class="clip" data-start="69.4" data-duration="8.712" data-track-index="5" data-volume="0.92" src="assets/audio/card7.mp3"></audio>
|
||||
<audio id="sfx-1" class="clip" data-start="12.12" data-duration="0.45" data-track-index="6" data-volume="0.35" src="assets/audio/sfx/whoosh.wav"></audio>
|
||||
<audio id="sfx-2" class="clip" data-start="20.92" data-duration="0.45" data-track-index="6" data-volume="0.35" src="assets/audio/sfx/whoosh.wav"></audio>
|
||||
<audio id="sfx-3" class="clip" data-start="30.92" data-duration="0.45" data-track-index="6" data-volume="0.35" src="assets/audio/sfx/whoosh.wav"></audio>
|
||||
<audio id="sfx-4" class="clip" data-start="40.32" data-duration="0.45" data-track-index="6" data-volume="0.35" src="assets/audio/sfx/whoosh.wav"></audio>
|
||||
<audio id="sfx-5" class="clip" data-start="50.52" data-duration="0.45" data-track-index="6" data-volume="0.35" src="assets/audio/sfx/whoosh.wav"></audio>
|
||||
<audio id="sfx-6" class="clip" data-start="60.12" data-duration="0.45" data-track-index="6" data-volume="0.35" src="assets/audio/sfx/whoosh.wav"></audio>
|
||||
<audio id="sfx-7" class="clip" data-start="69.32" data-duration="0.32" data-track-index="7" data-volume="0.32" src="assets/audio/sfx/impact.wav"></audio>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
window.__timelines = window.__timelines || {};
|
||||
const rootDuration = Number(document.querySelector("#root").dataset.duration || 82);
|
||||
const tl = gsap.timeline({ paused: true });
|
||||
// Sample section config. Regenerate these arrays from user input for non-8-section or non-82-second videos.
|
||||
const scenes = ["#scene-intro", "#scene-mainline", "#scene-security", "#scene-monitoring", "#scene-network", "#scene-storage", "#scene-platform", "#scene-ai"];
|
||||
const starts = [0, 12.2, 21.0, 31.0, 40.4, 50.6, 60.2, 69.4];
|
||||
const durations = [12.0, 8.6, 9.8, 9.2, 10.0, 9.4, 9.0, 11.6];
|
||||
const captions = ["#cap-intro", "#cap-1", "#cap-2", "#cap-3", "#cap-4", "#cap-5", "#cap-6", "#cap-7"];
|
||||
const captionStarts = [0.2, 12.3, 21.1, 31.1, 40.5, 50.7, 60.3, 69.5];
|
||||
const captionDurations = [11.6, 8.3, 9.5, 8.9, 9.7, 9.1, 8.7, 9.4];
|
||||
const chapters = ["#chapter-0", "#chapter-1", "#chapter-2", "#chapter-3", "#chapter-4", "#chapter-5", "#chapter-6", "#chapter-7"];
|
||||
|
||||
scenes.forEach((scene, index) => {
|
||||
const start = starts[index];
|
||||
tl.set(scene, { opacity: 1 }, start);
|
||||
tl.to(scene, { opacity: 0, duration: 0.28, ease: "power1.in" }, start + durations[index] - 0.28);
|
||||
tl.from(`${scene} .image-panel`, { x: -78, opacity: 0, scale: 0.96, duration: 0.72, ease: "power3.out" }, start + 0.08);
|
||||
tl.from(`${scene} .kicker`, { y: 28, opacity: 0, duration: 0.42, ease: "power2.out" }, start + 0.18);
|
||||
tl.from(`${scene} h1, ${scene} h2`, { y: 46, opacity: 0, duration: 0.62, ease: "power3.out" }, start + 0.3);
|
||||
tl.from(`${scene} .lead`, { y: 36, opacity: 0, duration: 0.54, ease: "power2.out" }, start + 0.58);
|
||||
tl.from(`${scene} .tag`, { y: 24, opacity: 0, scale: 0.94, duration: 0.42, stagger: 0.06, ease: "power2.out" }, start + 0.82);
|
||||
tl.to(`${scene} .image-panel img`, { y: -70, scale: 1.1, duration: Math.max(6, durations[index] - 1), ease: "none" }, start + 0.4);
|
||||
});
|
||||
|
||||
captions.forEach((caption, index) => {
|
||||
const start = captionStarts[index];
|
||||
const duration = captionDurations[index];
|
||||
tl.to(caption, { opacity: 1, y: 0, duration: 0.16, ease: "power1.out" }, start);
|
||||
tl.to(caption, { opacity: 0, y: 14, duration: 0.16, ease: "power1.in" }, start + duration - 0.16);
|
||||
});
|
||||
|
||||
chapters.forEach((chapter, index) => {
|
||||
const start = starts[index];
|
||||
const duration = durations[index];
|
||||
tl.to(chapter, { y: -8, scale: 1.04, duration: 0.18, ease: "power1.out" }, start);
|
||||
tl.set(chapter, { className: "chapter-tag active" }, start);
|
||||
tl.set(chapter, { className: "chapter-tag" }, start + duration - 0.1);
|
||||
tl.to(chapter, { y: 0, scale: 1, duration: 0.18, ease: "power1.in" }, start + duration - 0.28);
|
||||
});
|
||||
|
||||
tl.to(".timeline-progress", { width: "100%", duration: rootDuration, ease: "none" }, 0);
|
||||
tl.from(".topbar", { y: -28, opacity: 0, duration: 0.5, ease: "power2.out" }, 0.1);
|
||||
tl.to(".glow-line", { scale: 1.18, rotation: 20, duration: rootDuration, ease: "none" }, 0);
|
||||
tl.to("#root", { opacity: 0, duration: 0.65, ease: "power2.in" }, Math.max(0, rootDuration - 0.75));
|
||||
window.__timelines["main"] = tl;
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,26 @@
|
||||
{
|
||||
"duration": 82,
|
||||
"timelineColumns": 8,
|
||||
"canvas": {
|
||||
"width": 1920,
|
||||
"height": 1080
|
||||
},
|
||||
"stylePreset": "sample-blue-white-two-column-scan",
|
||||
"sections": [
|
||||
{
|
||||
"id": "intro",
|
||||
"start": 0,
|
||||
"duration": 12,
|
||||
"timeLabel": "0:00",
|
||||
"timelineLabel": "引言",
|
||||
"title": "IT 基础设施演进史是一组能力的共同进化",
|
||||
"subtitle": "计算、网络、存储、安全、监控、平台工程，最终汇入 AI 原生。",
|
||||
"tags": ["资源效率", "系统弹性", "自动化", "智能化"],
|
||||
"image": "assets/images/it-infra-evolution-road.png",
|
||||
"imageFit": "cover",
|
||||
"voiceover": "assets/audio/intro.mp3",
|
||||
"caption": "IT 基础设施演进史，不只是服务器升级，而是一组能力的共同进化。"
|
||||
}
|
||||
],
|
||||
"inspectTimes": [6]
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user