byteplan-cli 1.0.2 → 1.2.0

package/skills/byteplan-video/templates/remotion.config.ts

@@ -0,0 +1,9 @@
+import { Config } from "@remotion/cli/config";
+
+// macOS Chrome 路径
+Config.setBrowserExecutable("/Applications/Google Chrome.app/Contents/MacOS/Google Chrome");
+
+// 设置入口文件
+Config.setEntryPoint("src/register-root.tsx");
+
+export default Config;

package/skills/byteplan-video/templates/scripts/generate-audio.ts

@@ -0,0 +1,55 @@
+import * as fs from 'fs';
+import * as path from 'path';
+import { execSync } from 'child_process';
+import { getAudioDurationInSeconds } from 'get-audio-duration';
+
+const VOICE = 'zh-CN-XiaoxiaoNeural'; // 女声，自然流畅
+
+async function generateAudio() {
+  const storyboardPath = path.join(process.cwd(), 'src/storyboard/scenes.json');
+  const audioDir = path.join(process.cwd(), 'public/audio');
+
+  // 确保音频目录存在
+  if (!fs.existsSync(audioDir)) {
+    fs.mkdirSync(audioDir, { recursive: true });
+  }
+
+  // 读取分镜配置
+  const scenesData = JSON.parse(fs.readFileSync(storyboardPath, 'utf-8'));
+  const scenes = Array.isArray(scenesData) ? scenesData : scenesData.scenes;
+
+  console.log(`开始生成 ${scenes.length} 个场景的语音...\n`);
+
+  for (const scene of scenes) {
+    const audioFileName = `${scene.id}.mp3`;
+    const audioPath = path.join(audioDir, audioFileName);
+
+    console.log(`生成语音: ${scene.id}`);
+    console.log(`  文本: ${scene.narration.substring(0, 30)}...`);
+
+    // 使用 edge-tts CLI 生成语音
+    const text = scene.narration.replace(/"/g, '\\"');
+    const cmd = `edge-tts --voice "${VOICE}" --text "${text}" --write-media "${audioPath}"`;
+
+    try {
+      execSync(cmd, { stdio: 'pipe' });
+    } catch (error) {
+      console.error(`  错误: ${error}`);
+      continue;
+    }
+
+    // 获取音频时长
+    const duration = await getAudioDurationInSeconds(audioPath);
+    scene.audioPath = `/audio/${audioFileName}`;
+    scene.audioDuration = Math.ceil(duration);
+
+    console.log(`  时长: ${duration.toFixed(2)}秒\n`);
+  }
+
+  // 保存更新后的分镜配置
+  const outputData = Array.isArray(scenesData) ? scenes : { scenes };
+  fs.writeFileSync(storyboardPath, JSON.stringify(outputData, null, 2));
+  console.log('语音生成完成！分镜配置已更新。');
+}
+
+generateAudio().catch(console.error);

package/skills/byteplan-video/templates/src/components/BarChartScene.tsx

@@ -0,0 +1,153 @@
+import React from "react";
+import { AbsoluteFill, useCurrentFrame, useVideoConfig, spring } from "remotion";
+import { VisualConfig } from "../storyboard/types";
+import chartData from "../data/chartData.json";
+
+interface BarChartSceneProps {
+  config: VisualConfig;
+  narration: string;
+}
+
+const COLORS = {
+  primary: "#667eea",    // BytePlan 紫
+  secondary: "#1E293B",
+  accent: "#764ba2",
+  background: "linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%)",
+  text: "#FFFFFF",
+  lightText: "#94A3B8",
+  grid: "rgba(255,255,255,0.1)",
+};
+
+export const BarChartScene: React.FC<BarChartSceneProps> = ({ config }) => {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+
+  // 必须提供 dataKey
+  if (!config.dataKey) {
+    throw new Error("BarChartScene requires 'dataKey' in config");
+  }
+
+  // 获取数据
+  const dataKey = config.dataKey;
+  const rawData = (chartData as Record<string, unknown>)[dataKey];
+  const data = Array.isArray(rawData) ? rawData : [];
+
+  if (data.length === 0) {
+    throw new Error(`BarChartScene: No data found for dataKey '${dataKey}'`);
+  }
+
+  // 动画
+  const titleOpacity = spring({ frame, fps, config: { damping: 100 } });
+  const chartOpacity = spring({ frame: frame - 20, fps, config: { damping: 100 } });
+
+  // 计算最大值
+  const maxValue = Math.max(...data.map((d: Record<string, number>) => d.value || 0), 1);
+  const barWidth = 60;
+  const barGap = 30;
+  const chartHeight = 350;
+  const chartStartX = (1920 - (data.length * (barWidth + barGap) - barGap)) / 2;
+
+  return (
+    <AbsoluteFill style={{ background: COLORS.background }}>
+      {/* 标题 */}
+      <div style={{
+        position: "absolute",
+        top: 80,
+        left: 0,
+        right: 0,
+        textAlign: "center",
+        opacity: titleOpacity,
+      }}>
+        <h2 style={{
+          fontSize: 48,
+          fontWeight: 600,
+          color: COLORS.text,
+          margin: 0,
+        }}>
+          {config.title}
+        </h2>
+      </div>
+
+      {/* 图表区域 */}
+      <div style={{
+        position: "absolute",
+        top: "50%",
+        left: 0,
+        right: 0,
+        transform: "translateY(-50%)",
+        opacity: chartOpacity,
+      }}>
+        <svg width="1920" height="450" viewBox="0 0 1920 450">
+          {/* 网格线 */}
+          {[0, 1, 2, 3, 4].map((i) => (
+            <line
+              key={i}
+              x1={chartStartX - 50}
+              y1={50 + i * 100}
+              x2={1920 - chartStartX + 50}
+              y2={50 + i * 100}
+              stroke={COLORS.grid}
+              strokeWidth="1"
+            />
+          ))}
+
+          {/* 柱状图 */}
+          {data.map((item: Record<string, unknown>, index: number) => {
+            const value = (item.value as number) || 0;
+            const label = (item.label as string) || "";
+            const height = (value / maxValue) * chartHeight;
+            const delay = index * 5;
+            const barProgress = spring({ frame: frame - 20 - delay, fps, config: { damping: 100 } });
+            const animatedHeight = height * barProgress;
+
+            return (
+              <g key={index}>
+                {/* 柱子 */}
+                <rect
+                  x={chartStartX + index * (barWidth + barGap)}
+                  y={400 - animatedHeight}
+                  width={barWidth}
+                  height={animatedHeight}
+                  fill={`url(#barGradient${index})`}
+                  rx={8}
+                />
+
+                {/* 数值标签 */}
+                <text
+                  x={chartStartX + index * (barWidth + barGap) + barWidth / 2}
+                  y={400 - animatedHeight - 15}
+                  textAnchor="middle"
+                  fill={COLORS.text}
+                  fontSize={20}
+                  fontWeight="600"
+                  opacity={barProgress}
+                >
+                  {typeof value === 'number' ? (value >= 100 ? `${(value / 100).toFixed(0)}亿` : `${value}%`) : value}
+                </text>
+
+                {/* X轴标签 */}
+                <text
+                  x={chartStartX + index * (barWidth + barGap) + barWidth / 2}
+                  y={430}
+                  textAnchor="middle"
+                  fill={COLORS.lightText}
+                  fontSize={18}
+                >
+                  {label}
+                </text>
+
+                {/* 渐变定义 */}
+                <defs>
+                  <linearGradient id={`barGradient${index}`} x1="0%" y1="0%" x2="0%" y2="100%">
+                    <stop offset="0%" stopColor={COLORS.primary} />
+                    <stop offset="100%" stopColor={COLORS.accent} />
+                  </linearGradient>
+                </defs>
+              </g>
+            );
+          })}
+        </svg>
+      </div>
+    </AbsoluteFill>
+  );
+};

package/skills/byteplan-video/templates/src/components/InsightScene.tsx

@@ -0,0 +1,135 @@
+import React from "react";
+import { AbsoluteFill, useCurrentFrame, useVideoConfig, spring } from "remotion";
+import { VisualConfig } from "../storyboard/types";
+
+interface InsightSceneProps {
+  config: VisualConfig;
+  narration: string;
+}
+
+const COLORS = {
+  primary: "#667eea",    // BytePlan 紫
+  secondary: "#1E293B",
+  accent: "#764ba2",
+  background: "linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%)",
+  text: "#FFFFFF",
+  lightText: "#94A3B8",
+  highlight: "#22C55E",
+};
+
+export const InsightScene: React.FC<InsightSceneProps> = ({ config }) => {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+
+  // 必须提供 highlights 数据
+  const highlights = config.highlights;
+
+  if (!highlights || highlights.length === 0) {
+    throw new Error("InsightScene requires 'highlights' array in config");
+  }
+
+  // 动画
+  const titleOpacity = spring({ frame, fps, config: { damping: 100 } });
+  const contentOpacity = spring({ frame: frame - 15, fps, config: { damping: 100 } });
+
+  return (
+    <AbsoluteFill style={{ background: COLORS.background }}>
+      {/* 装饰元素 */}
+      <div style={{
+        position: "absolute",
+        top: "20%",
+        right: "10%",
+        width: 150,
+        height: 150,
+        borderRadius: "50%",
+        background: "radial-gradient(circle, rgba(255,106,0,0.2) 0%, transparent 70%)",
+        filter: "blur(30px)",
+      }} />
+
+      {/* 标题 */}
+      <div style={{
+        position: "absolute",
+        top: 100,
+        left: 0,
+        right: 0,
+        textAlign: "center",
+        opacity: titleOpacity,
+      }}>
+        <h2 style={{
+          fontSize: 56,
+          fontWeight: 700,
+          color: COLORS.text,
+          margin: 0,
+        }}>
+          {config.title}
+        </h2>
+        <div style={{
+          width: 120,
+          height: 4,
+          background: COLORS.primary,
+          margin: "20px auto",
+        }} />
+      </div>
+
+      {/* 洞察要点 */}
+      <div style={{
+        position: "absolute",
+        top: 250,
+        left: 150,
+        right: 150,
+        display: "flex",
+        flexDirection: "column",
+        gap: 30,
+        opacity: contentOpacity,
+      }}>
+        {highlights.map((point, index) => {
+          const delay = index * 8;
+          const itemOpacity = spring({ frame: frame - 25 - delay, fps, config: { damping: 100 } });
+          const itemX = spring({ frame: frame - 25 - delay, fps, config: { damping: 100, stiffness: 80 } });
+
+          return (
+            <div
+              key={index}
+              style={{
+                display: "flex",
+                alignItems: "center",
+                gap: 24,
+                opacity: itemOpacity,
+                transform: `translateX(${(1 - itemX) * -50}px)`,
+              }}
+            >
+              {/* 图标 */}
+              <div style={{
+                width: 48,
+                height: 48,
+                borderRadius: 12,
+                background: `linear-gradient(135deg, ${COLORS.primary}, ${COLORS.accent})`,
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                fontSize: 24,
+                flexShrink: 0,
+              }}>
+                ✓
+              </div>
+
+              {/* 文本 */}
+              <div style={{
+                fontSize: 32,
+                fontWeight: 500,
+                color: COLORS.text,
+                padding: "16px 32px",
+                background: "rgba(255,255,255,0.05)",
+                borderRadius: 12,
+                borderLeft: `4px solid ${COLORS.primary}`,
+                flex: 1,
+              }}>
+                {point}
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </AbsoluteFill>
+  );
+};

package/skills/byteplan-video/templates/src/components/LineChartScene.tsx

@@ -0,0 +1,214 @@
+import React from "react";
+import { AbsoluteFill, useCurrentFrame, useVideoConfig, spring } from "remotion";
+import { VisualConfig } from "../storyboard/types";
+import chartData from "../data/chartData.json";
+
+interface LineChartSceneProps {
+  config: VisualConfig;
+  narration: string;
+}
+
+const COLORS = {
+  primary: "#667eea",    // BytePlan 紫
+  secondary: "#1E293B",
+  accent: "#764ba2",
+  background: "linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%)",
+  text: "#FFFFFF",
+  lightText: "#94A3B8",
+  grid: "rgba(255,255,255,0.1)",
+};
+
+export const LineChartScene: React.FC<LineChartSceneProps> = ({ config }) => {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+
+  // 必须提供 dataKey
+  if (!config.dataKey) {
+    throw new Error("LineChartScene requires 'dataKey' in config");
+  }
+
+  // 获取数据
+  const dataKey = config.dataKey;
+  const rawData = (chartData as Record<string, unknown>)[dataKey];
+  const data = Array.isArray(rawData) ? rawData : [];
+
+  if (data.length === 0) {
+    throw new Error(`LineChartScene: No data found for dataKey '${dataKey}'`);
+  }
+
+  // 动画
+  const titleOpacity = spring({ frame, fps, config: { damping: 100 } });
+  const chartOpacity = spring({ frame: frame - 20, fps, config: { damping: 100 } });
+  const lineProgress = spring({ frame: frame - 30, fps, config: { damping: 100, stiffness: 50 } });
+
+  // 计算坐标
+  const chartWidth = 1400;
+  const chartHeight = 350;
+  const chartStartX = 260;
+  const chartStartY = 80;
+
+  const maxValue = Math.max(...data.map((d: Record<string, number>) => d.value || 0), 1);
+  const pointSpacing = chartWidth / (data.length - 1 || 1);
+
+  // 生成路径
+  const generatePath = () => {
+    if (data.length === 0) return "";
+
+    const points = data.map((item: Record<string, unknown>, index: number) => {
+      const value = (item.value as number) || 0;
+      const x = chartStartX + index * pointSpacing;
+      const y = chartStartY + chartHeight - (value / maxValue) * chartHeight;
+      return { x, y, value };
+    });
+
+    let path = `M ${points[0].x} ${points[0].y}`;
+
+    for (let i = 1; i < points.length; i++) {
+      const prev = points[i - 1];
+      const curr = points[i];
+      const midX = (prev.x + curr.x) / 2;
+      path += ` C ${midX} ${prev.y}, ${midX} ${curr.y}, ${curr.x} ${curr.y}`;
+    }
+
+    return path;
+  };
+
+  const pathLength = 3000; // 估计的路径长度
+  const animatedDashoffset = pathLength * (1 - lineProgress);
+
+  return (
+    <AbsoluteFill style={{ background: COLORS.background }}>
+      {/* 标题 */}
+      <div style={{
+        position: "absolute",
+        top: 60,
+        left: 0,
+        right: 0,
+        textAlign: "center",
+        opacity: titleOpacity,
+      }}>
+        <h2 style={{
+          fontSize: 48,
+          fontWeight: 600,
+          color: COLORS.text,
+          margin: 0,
+        }}>
+          {config.title}
+        </h2>
+      </div>
+
+      {/* 图表区域 */}
+      <div style={{
+        position: "absolute",
+        top: 150,
+        left: 0,
+        right: 0,
+        opacity: chartOpacity,
+      }}>
+        <svg width="1920" height="500" viewBox="0 0 1920 500">
+          {/* 网格线 */}
+          {[0, 1, 2, 3, 4].map((i) => (
+            <g key={i}>
+              <line
+                x1={chartStartX}
+                y1={chartStartY + i * (chartHeight / 4)}
+                x2={chartStartX + chartWidth}
+                y2={chartStartY + i * (chartHeight / 4)}
+                stroke={COLORS.grid}
+                strokeWidth="1"
+              />
+              {/* Y轴标签 */}
+              <text
+                x={chartStartX - 30}
+                y={chartStartY + i * (chartHeight / 4) + 5}
+                textAnchor="end"
+                fill={COLORS.lightText}
+                fontSize={16}
+              >
+                {Math.round(maxValue - (maxValue / 4) * i)}亿
+              </text>
+            </g>
+          ))}
+
+          {/* 渐变填充区域 */}
+          <defs>
+            <linearGradient id="areaGradient" x1="0%" y1="0%" x2="0%" y2="100%">
+              <stop offset="0%" stopColor={COLORS.primary} stopOpacity="0.4" />
+              <stop offset="100%" stopColor={COLORS.primary} stopOpacity="0" />
+            </linearGradient>
+          </defs>
+
+          {/* 填充区域 */}
+          {data.length > 0 && (
+            <path
+              d={`${generatePath()} L ${chartStartX + (data.length - 1) * pointSpacing} ${chartStartY + chartHeight} L ${chartStartX} ${chartStartY + chartHeight} Z`}
+              fill="url(#areaGradient)"
+              opacity={lineProgress}
+            />
+          )}
+
+          {/* 折线 */}
+          <path
+            d={generatePath()}
+            fill="none"
+            stroke={COLORS.primary}
+            strokeWidth="4"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeDasharray={pathLength}
+            strokeDashoffset={animatedDashoffset}
+          />
+
+          {/* 数据点 */}
+          {data.map((item: Record<string, unknown>, index: number) => {
+            const value = (item.value as number) || 0;
+            const label = (item.label as string) || "";
+            const x = chartStartX + index * pointSpacing;
+            const y = chartStartY + chartHeight - (value / maxValue) * chartHeight;
+            const delay = index * 3;
+            const pointOpacity = spring({ frame: frame - 40 - delay, fps, config: { damping: 100 } });
+
+            return (
+              <g key={index}>
+                {/* 数据点 */}
+                <circle
+                  cx={x}
+                  cy={y}
+                  r={10}
+                  fill={COLORS.primary}
+                  stroke={COLORS.text}
+                  strokeWidth="3"
+                  opacity={pointOpacity}
+                />
+
+                {/* 数值 */}
+                <text
+                  x={x}
+                  y={y - 25}
+                  textAnchor="middle"
+                  fill={COLORS.text}
+                  fontSize={20}
+                  fontWeight="600"
+                  opacity={pointOpacity}
+                >
+                  {(value / 100).toFixed(0)}亿
+                </text>
+
+                {/* X轴标签 */}
+                <text
+                  x={x}
+                  y={chartStartY + chartHeight + 40}
+                  textAnchor="middle"
+                  fill={COLORS.lightText}
+                  fontSize={18}
+                >
+                  {label}
+                </text>
+              </g>
+            );
+          })}
+        </svg>
+      </div>
+    </AbsoluteFill>
+  );
+};

package/skills/byteplan-video/templates/src/components/SceneFactory.tsx

@@ -0,0 +1,34 @@
+import React from "react";
+import { StoryboardScene } from "../storyboard/types";
+import { TitleScene } from "./TitleScene";
+import { BarChartScene } from "./BarChartScene";
+import { LineChartScene } from "./LineChartScene";
+import { InsightScene } from "./InsightScene";
+import { SummaryScene } from "./SummaryScene";
+
+const sceneComponents: Record<string, React.FC<{ config: any; narration: string }>> = {
+  title: TitleScene,
+  bar_chart: BarChartScene,
+  line_chart: LineChartScene,
+  insight: InsightScene,
+  summary: SummaryScene,
+};
+
+export const SceneFactory: React.FC<{ scene: any }> = ({ scene }) => {
+  const Component = sceneComponents[scene.type];
+  if (!Component) {
+    return (
+      <div style={{ padding: 40, color: "white", background: "#1a1a2e" }}>
+        Unknown scene type: {scene.type}
+      </div>
+    );
+  }
+  // 支持 visualConfig 或直接使用 scene 作为 config
+  const config = scene.visualConfig || {
+    title: scene.title,
+    subtitle: scene.subtitle,
+    data: scene.data,
+    content: scene.content,
+  };
+  return <Component config={config} narration={scene.narration} />;
+};