byteplan-cli 1.0.2 → 1.2.0

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

@@ -0,0 +1,6 @@
+import { Config } from "@remotion/cli/config";
+
+Config.setVideoImageFormat("jpeg");
+Config.setOverwriteOutput(true);
+
+export default Config;

package/skills/byteplan-video/remotion-project/scene_durations.json

@@ -0,0 +1,32 @@
+[
+  {
+    "id": "scene_1",
+    "duration": 6,
+    "audioFile": "scene_1.mp3"
+  },
+  {
+    "id": "scene_2",
+    "duration": 16,
+    "audioFile": "scene_2.mp3"
+  },
+  {
+    "id": "scene_3",
+    "duration": 8,
+    "audioFile": "scene_3.mp3"
+  },
+  {
+    "id": "scene_4",
+    "duration": 23,
+    "audioFile": "scene_4.mp3"
+  },
+  {
+    "id": "scene_5",
+    "duration": 9,
+    "audioFile": "scene_5.mp3"
+  },
+  {
+    "id": "scene_6",
+    "duration": 2,
+    "audioFile": "scene_6.mp3"
+  }
+]

package/skills/byteplan-video/remotion-project/scripts/generate_audio.js

@@ -0,0 +1,279 @@
+const fs = require('fs');
+const path = require('path');
+const { execSync } = require('child_process');
+
+const videoData = JSON.parse(fs.readFileSync(path.join(__dirname, '../video_data.json'), 'utf-8'));
+const audioDir = path.join(__dirname, '../public/audio');
+
+// 确保音频目录存在
+if (!fs.existsSync(audioDir)) {
+  fs.mkdirSync(audioDir, { recursive: true });
+}
+
+/**
+ * 方式 1: 使用 node-edge-tts npm 包（推荐）
+ * 返回 { success: boolean, duration: number|null }
+ */
+async function generateWithNpmPackage(text, outputPath, voice = 'zh-CN-XiaoxiaoNeural') {
+  try {
+    const { EdgeTTS } = require('node-edge-tts');
+
+    // 生成字幕文件路径（node-edge-tts 保存为 {audio}.json）
+    const subtitlePath = outputPath + '.json';
+
+    const tts = new EdgeTTS({
+      voice: voice,
+      lang: 'zh-CN',
+      outputFormat: 'audio-24khz-48kbitrate-mono-mp3',
+      rate: '+0%',
+      pitch: '+0Hz',
+      saveSubtitles: true  // 保存字幕文件，用于获取时长
+    });
+
+    await tts.ttsPromise(text, outputPath);
+
+    // 从字幕文件获取时长
+    let duration = null;
+    if (fs.existsSync(subtitlePath)) {
+      try {
+        const subtitles = JSON.parse(fs.readFileSync(subtitlePath, 'utf-8'));
+        // 最后一个词的 end 时间就是总时长（毫秒）
+        if (Array.isArray(subtitles) && subtitles.length > 0) {
+          const lastItem = subtitles[subtitles.length - 1];
+          duration = lastItem.end / 1000; // 转换为秒
+        }
+        // 删除字幕文件（不需要保留）
+        fs.unlinkSync(subtitlePath);
+      } catch (e) {
+        // 字幕解析失败，返回 null，后续用 ffprobe
+      }
+    }
+
+    return { success: true, duration };
+  } catch (error) {
+    return { success: false, duration: null };
+  }
+}
+
+/**
+ * 方式 2: 使用 Python edge-tts 命令行工具（备用）
+ */
+function detectPythonEdgeTts() {
+  const commands = ['edge-tts', 'python -m edge_tts', 'python3 -m edge_tts'];
+
+  for (const cmd of commands) {
+    try {
+      execSync(`${cmd} --version`, { stdio: 'pipe', timeout: 5000 });
+      return cmd;
+    } catch (e) {
+      // 继续尝试下一个命令
+    }
+  }
+  return null;
+}
+
+function generateWithPythonEdgeTts(text, outputPath, edgeTtsCmd, voice = 'zh-CN-XiaoxiaoNeural') {
+  // 使用单引号包裹文本，转义内部单引号
+  const escapedText = "'" + text.replace(/'/g, "'\\''") + "'";
+
+  const command = `${edgeTtsCmd} --voice "${voice}" --text ${escapedText} --write-media "${outputPath}"`;
+
+  execSync(command, {
+    stdio: 'pipe',
+    timeout: 30000,
+    shell: process.platform === 'win32' ? 'cmd.exe' : undefined
+  });
+
+  return fs.existsSync(outputPath);
+}
+
+/**
+ * 使用 ffprobe 获取音频时长（备用方案）
+ */
+function getAudioDurationWithFfprobe(audioPath) {
+  try {
+    const durationStr = execSync(
+      `ffprobe -i "${audioPath}" -show_entries format=duration -v quiet -of csv="p=0"`,
+      { encoding: 'utf-8', shell: process.platform === 'win32' ? 'cmd.exe' : undefined }
+    ).toString().trim();
+
+    return parseFloat(durationStr);
+  } catch (error) {
+    return null;
+  }
+}
+
+/**
+ * 检测 ffprobe
+ */
+function checkFfprobe() {
+  try {
+    execSync('ffprobe -version', { stdio: 'pipe' });
+    return true;
+  } catch (e) {
+    return false;
+  }
+}
+
+/**
+ * 生成单个场景的语音
+ */
+async function generateSceneAudio(scene, index, useNpm, pythonCmd, hasFfprobe) {
+  if (!scene.narration) {
+    console.log(`场景 ${index + 1}: 无解说文本，使用默认时长 3 秒`);
+    return { id: scene.id, duration: 3 };
+  }
+
+  const audioPath = path.join(audioDir, `${scene.id}.mp3`);
+
+  console.log(`\n生成语音: ${scene.id}`);
+  console.log(`文本: ${scene.narration.substring(0, 50)}...`);
+
+  let success = false;
+  let duration = null;
+
+  // 优先使用 npm 包
+  if (useNpm) {
+    console.log('使用 node-edge-tts npm 包...');
+    const result = await generateWithNpmPackage(scene.narration, audioPath);
+    success = result.success;
+    duration = result.duration;
+
+    if (!success) {
+      console.log('npm 包不可用，尝试 Python edge-tts...');
+    } else if (duration) {
+      console.log(`✅ 从字幕获取时长: ${duration.toFixed(2)} 秒`);
+    }
+  }
+
+  // 回退到 Python edge-tts
+  if (!success && pythonCmd) {
+    console.log(`使用 Python edge-tts (${pythonCmd})...`);
+    try {
+      success = generateWithPythonEdgeTts(scene.narration, audioPath, pythonCmd);
+    } catch (error) {
+      console.error(`Python edge-tts 失败: ${error.message}`);
+    }
+  }
+
+  if (!success) {
+    console.error('❌ 所有 TTS 方式都失败');
+    return { id: scene.id, duration: 5 };
+  }
+
+  // 检查文件是否生成
+  if (!fs.existsSync(audioPath)) {
+    console.error('❌ 音频文件未生成');
+    return { id: scene.id, duration: 5 };
+  }
+
+  // 如果 npm 包没有返回时长，尝试 ffprobe
+  if (duration === null) {
+    if (hasFfprobe) {
+      duration = getAudioDurationWithFfprobe(audioPath);
+      if (duration !== null) {
+        console.log(`✅ 从 ffprobe 获取时长: ${duration.toFixed(2)} 秒`);
+      }
+    }
+
+    // 如果还是没有时长，使用默认值
+    if (duration === null) {
+      console.log('⚠️  无法获取音频时长，使用默认 5 秒');
+      duration = 5;
+    }
+  }
+
+  // 添加 0.5 秒缓冲
+  return {
+    id: scene.id,
+    duration: Math.ceil(duration + 0.5),
+    audioFile: `${scene.id}.mp3`
+  };
+}
+
+// 主流程
+async function main() {
+  console.log('========================================');
+  console.log('BytePlan 视频语音生成工具');
+  console.log('========================================\n');
+
+  // 检测 TTS 工具
+  let useNpm = false;
+  let pythonCmd = null;
+
+  // 检测 npm 包
+  try {
+    require('node-edge-tts');
+    useNpm = true;
+    console.log('✅ 检测到 node-edge-tts npm 包');
+  } catch (e) {
+    console.log('⚠️  未检测到 node-edge-tts npm 包');
+  }
+
+  // 检测 Python edge-tts
+  pythonCmd = detectPythonEdgeTts();
+  if (pythonCmd) {
+    console.log(`✅ 检测到 Python edge-tts: ${pythonCmd}`);
+  } else {
+    console.log('⚠️  未检测到 Python edge-tts');
+  }
+
+  // 如果两者都没有
+  if (!useNpm && !pythonCmd) {
+    console.error('\n❌ 未检测到任何 TTS 工具，请安装其中一种:');
+    console.error('');
+    console.error('方式 1: 安装 npm 包（推荐，无需额外依赖）');
+    console.error('  npm install node-edge-tts');
+    console.error('  或');
+    console.error('  pnpm add node-edge-tts');
+    console.error('');
+    console.error('方式 2: 安装 Python edge-tts');
+    console.error('  pip install edge-tts');
+    console.error('  或');
+    console.error('  pip3 install edge-tts');
+    process.exit(1);
+  }
+
+  // 检测 ffprobe（可选，仅 Python edge-tts 需要）
+  const hasFfprobe = checkFfprobe();
+  if (hasFfprobe) {
+    console.log('✅ 检测到 ffprobe（备用）');
+  } else {
+    if (!useNpm && pythonCmd) {
+      // 只有在使用 Python edge-tts 时才需要 ffprobe
+      console.error('❌ 使用 Python edge-tts 需要安装 ffprobe:');
+      console.error('  Windows: choco install ffmpeg');
+      console.error('  macOS: brew install ffmpeg');
+      console.error('  Linux: sudo apt install ffmpeg');
+      console.error('');
+      console.error('或者使用 npm 包（node-edge-tts），无需 ffprobe');
+      process.exit(1);
+    }
+    console.log('⚠️  未检测到 ffprobe（npm 包模式下不影响使用）');
+  }
+
+  console.log('\n开始生成语音...\n');
+
+  // 生成所有场景的语音
+  const sceneDurations = [];
+  for (let i = 0; i < videoData.scenes.length; i++) {
+    const result = await generateSceneAudio(videoData.scenes[i], i, useNpm, pythonCmd, hasFfprobe);
+    sceneDurations.push(result);
+  }
+
+  // 保存时长配置
+  const durationsPath = path.join(__dirname, '../scene_durations.json');
+  fs.writeFileSync(durationsPath, JSON.stringify(sceneDurations, null, 2));
+
+  console.log('\n========================================');
+  console.log('所有语音生成完成！');
+  console.log('场景时长配置已保存到 scene_durations.json');
+  console.log('\n时长汇总:');
+  sceneDurations.forEach((s, i) => {
+    console.log(`  ${i + 1}. ${s.id}: ${s.duration} 秒`);
+  });
+  const totalDuration = sceneDurations.reduce((sum, s) => sum + s.duration, 0);
+  console.log(`\n总时长: ${totalDuration} 秒 (${Math.floor(totalDuration / 60)}分${totalDuration % 60}秒)`);
+}
+
+main().catch(console.error);

package/skills/byteplan-video/remotion-project/src/DynamicReport.tsx

@@ -0,0 +1,172 @@
+import {
+  AbsoluteFill,
+  useVideoConfig,
+  Audio,
+  staticFile,
+  Sequence,
+} from "remotion";
+import { CoverSlide } from "./scenes/CoverSlide";
+import { ChartSlide } from "./scenes/ChartSlide";
+import { InsightSlide } from "./scenes/InsightSlide";
+import { RecommendationSlide } from "./scenes/RecommendationSlide";
+import { EndSlide } from "./scenes/EndSlide";
+
+interface SlideData {
+  id: string;
+  type: string;
+  title: string;
+  subtitle?: string;
+  duration: number;
+  audioFile: string;
+  startFrame: number;
+  endFrame: number;
+  highlights?: string[];
+  points?: string[];
+  source?: string;
+  dataKey?: string;
+  visualConfig?: {
+    highlights?: string[];
+    points?: string[];
+    source?: string;
+    dataKey?: string;
+    title?: string;
+    subtitle?: string;
+  };
+}
+
+interface ChartData {
+  [key: string]: Array<{ name: string; value: number }>;
+}
+
+interface DynamicReportProps {
+  slides: SlideData[];
+  chartData?: ChartData;
+  period?: string;
+}
+
+/**
+ * 将 highlights 字符串数组转换为 insights 格式
+ */
+function parseHighlights(highlights: string[]): Array<{ title: string; content: string; warning?: boolean }> {
+  return highlights.map(h => {
+    // 检测是否包含警告标志
+    const warning = h.includes('⚠️') || h.includes('风险') || h.includes('异常');
+    
+    // 移除 emoji，提取标题和内容
+    const cleanText = h.replace(/[🥇🥈🥉⚠️]/g, '').trim();
+    
+    // 尝试分割标题和内容
+    const colonIndex = cleanText.indexOf('：');
+    if (colonIndex > 0) {
+      const title = cleanText.substring(0, colonIndex).trim();
+      const content = cleanText.substring(colonIndex + 1).trim();
+      return { title, content, warning };
+    }
+    
+    // 如果没有冒号，整段作为内容
+    return { title: '', content: cleanText, warning };
+  });
+}
+
+export const DynamicReport: React.FC<DynamicReportProps> = ({ slides, chartData, period }) => {
+  const { fps } = useVideoConfig();
+
+  // 根据场景类型渲染对应组件
+  const renderScene = (slide: SlideData, index: number) => {
+    switch (slide.type) {
+      case 'title':
+        return (
+          <CoverSlide
+            title={slide.title}
+            subtitle={slide.subtitle || ''}
+          />
+        );
+
+      case 'insight':
+        // 支持 highlights 字符串数组（顶层或 visualConfig 内）
+        const rawHighlights = slide.highlights || slide.visualConfig?.highlights || [];
+        const insights = rawHighlights.length > 0
+          ? parseHighlights(rawHighlights)
+          : [];
+        return (
+          <InsightSlide
+            title={slide.title}
+            insights={insights}
+          />
+        );
+
+      case 'bar_chart':
+      case 'line_chart':
+      case 'chart':
+        // 从 chartData 获取图表数据，优先使用 dataKey
+        const chartKey = slide.dataKey || slide.visualConfig?.dataKey || Object.keys(chartData || {})[0] || 'default';
+        const data = chartData?.[chartKey] || [];
+        
+        // 数据格式化：转换为合适单位
+        const formattedData = data.map(d => ({
+          name: d.name,
+          value: typeof d.value === 'number' && d.value > 10000
+            ? Math.round(d.value / 10000)  // 转换为万元
+            : d.value
+        }));
+        
+        return (
+          <ChartSlide
+            title={slide.title}
+            chartType={slide.type === 'line_chart' ? 'line' : 'bar'}
+            data={formattedData}
+          />
+        );
+
+      case 'summary':
+        const rawPoints = slide.points || slide.visualConfig?.points || [];
+        const rawSource = slide.source || slide.visualConfig?.source;
+        return (
+          <RecommendationSlide
+            title={slide.title}
+            recommendations={rawPoints}
+            source={rawSource}
+          />
+        );
+
+      case 'end':
+        return (
+          <EndSlide
+            title="谢谢观看"
+            subtitle={slide.title}
+          />
+        );
+
+      default:
+        // 默认渲染为洞察卡片
+        return (
+          <InsightSlide
+            title={slide.title}
+            insights={slide.highlights ? parseHighlights(slide.highlights) : [{ title: '', content: '' }]}
+          />
+        );
+    }
+  };
+
+  return (
+    <AbsoluteFill
+      style={{
+        backgroundColor: "#1a1a2e",
+        fontFamily: "'Microsoft YaHei', '微软雅黑', Arial, sans-serif",
+      }}
+    >
+      {slides.map((slide, index) => (
+        <Sequence
+          key={slide.id}
+          from={slide.startFrame}
+          durationInFrames={slide.duration * fps}
+        >
+          {renderScene(slide, index)}
+          {slide.audioFile && (
+            <Audio src={staticFile(`audio/${slide.audioFile}`)} />
+          )}
+        </Sequence>
+      ))}
+    </AbsoluteFill>
+  );
+};

package/skills/byteplan-video/remotion-project/src/Root.tsx

@@ -0,0 +1,51 @@
+import { Composition, staticFile } from "remotion";
+import { DynamicReport } from "./DynamicReport";
+import videoData from "../video_data.json";
+import sceneDurations from "../scene_durations.json";
+
+// 计算总帧数
+const fps = 30;
+
+// 合并场景时长信息
+const slidesWithData = videoData.scenes.map((scene, index) => {
+  const durationInfo = sceneDurations.find(s => s.id === scene.id);
+  return {
+    ...scene,
+    duration: durationInfo?.duration || scene.duration || 10,
+    audioFile: durationInfo?.audioFile || `${scene.id}.mp3`
+  };
+});
+
+// 计算总帧数和每个场景的帧范围
+let currentFrame = 0;
+const slideData = slidesWithData.map((s) => {
+  const startFrame = currentFrame;
+  currentFrame += s.duration * fps;
+  return {
+    ...s,
+    startFrame,
+    endFrame: currentFrame
+  };
+});
+
+const totalFrames = currentFrame;
+
+export const RemotionRoot: React.FC = () => {
+  return (
+    <>
+      <Composition
+        id="SalesReport"
+        component={DynamicReport}
+        durationInFrames={totalFrames}
+        fps={fps}
+        width={1920}
+        height={1080}
+        defaultProps={{
+          slides: slideData,
+          chartData: videoData.chartData,
+          period: videoData.period
+        }}
+      />
+    </>
+  );
+};

package/skills/byteplan-video/remotion-project/src/SalesReport.tsx

@@ -0,0 +1,107 @@
+import {
+  AbsoluteFill,
+  useCurrentFrame,
+  useVideoConfig,
+  Audio,
+  staticFile,
+  Sequence,
+} from "remotion";
+import { CoverSlide } from "./scenes/CoverSlide";
+import { KpiSlide } from "./scenes/KpiSlide";
+import { ChartSlide } from "./scenes/ChartSlide";
+import { InsightSlide } from "./scenes/InsightSlide";
+import { RecommendationSlide } from "./scenes/RecommendationSlide";
+import { EndSlide } from "./scenes/EndSlide";
+
+interface SlideData {
+  id: string;
+  duration: number;
+  audioFile: string;
+  startFrame: number;
+  endFrame: number;
+}
+
+interface SalesReportProps {
+  slides: SlideData[];
+}
+
+export const SalesReport: React.FC<SalesReportProps> = ({ slides }) => {
+  const { fps } = useVideoConfig();
+
+  return (
+    <AbsoluteFill
+      style={{
+        backgroundColor: "#1a1a2e",
+        fontFamily: "'Microsoft YaHei', '微软雅黑', Arial, sans-serif",
+      }}
+    >
+      {/* 场景1: 封面 */}
+      <Sequence from={0} durationInFrames={slides[0]?.endFrame || 180}>
+        <CoverSlide title="边际贡献分析报告" subtitle="找出贡献最大的三个要素 · 跨境电商" />
+        <Audio src={staticFile(`audio/${slides[0]?.audioFile}`)} />
+      </Sequence>
+
+      {/* 场景2: 核心发现 */}
+      <Sequence from={slides[0]?.endFrame || 180} durationInFrames={slides[1]?.duration * fps || 450}>
+        <InsightSlide
+          title="核心发现"
+          insights={[
+            { title: "🥇 第一名：天猫", content: "边际贡献 1,627万元，贡献率 68%" },
+            { title: "🥈 第二名：CD120P", content: "边际贡献 563万元，贡献率 74%" },
+            { title: "🥉 第三名：美国", content: "边际贡献 498万元，贡献率 65%" }
+          ]}
+        />
+        <Audio src={staticFile(`audio/${slides[1]?.audioFile}`)} />
+      </Sequence>
+
+      {/* 场景3: 边际贡献对比图 */}
+      <Sequence from={slides[1]?.endFrame || 630} durationInFrames={slides[2]?.duration * fps || 240}>
+        <ChartSlide
+          title="边际贡献对比（TOP5）"
+          chartType="bar"
+          data={[
+            { name: "天猫", value: 1627 },
+            { name: "CD120P", value: 563 },
+            { name: "美国", value: 498 },
+            { name: "Amazon", value: 279 },
+            { name: "京东", value: 156 }
+          ]}
+        />
+        <Audio src={staticFile(`audio/${slides[2]?.audioFile}`)} />
+      </Sequence>
+
+      {/* 场景4: 关键洞察 */}
+      <Sequence from={slides[2]?.endFrame || 870} durationInFrames={slides[3]?.duration * fps || 540}>
+        <InsightSlide
+          title="关键洞察"
+          insights={[
+            { title: "天猫渠道表现卓越", content: "贡献占比68%，是最大收入来源" },
+            { title: "CD120P盈利效率最高", content: "贡献率74%，变动成本控制得当" },
+            { title: "美国市场规模最大", content: "收入3,543万元最高，贡献率65%" },
+            { title: "⚠️ 天猫变动成本偏高", content: "需排查运营成本构成，优化空间大", warning: true }
+          ]}
+        />
+        <Audio src={staticFile(`audio/${slides[3]?.audioFile}`)} />
+      </Sequence>
+
+      {/* 场景5: 行动建议 */}
+      <Sequence from={slides[3]?.endFrame || 1410} durationInFrames={slides[4]?.duration * fps || 270}>
+        <RecommendationSlide
+          title="行动建议"
+          recommendations={[
+            "加大CD120P产能，贡献率74%的产品应获得更多资源",
+            "优化天猫运营成本，降低变动成本提升贡献率",
+            "建立月度边际贡献监控机制，及时发现问题"
+          ]}
+          source="BytePlan 数据平台 · 跨境电商租户"
+        />
+        <Audio src={staticFile(`audio/${slides[4]?.audioFile}`)} />
+      </Sequence>
+
+      {/* 场景6: 结尾 */}
+      <Sequence from={slides[4]?.endFrame || 1680} durationInFrames={slides[5]?.duration * fps || 300}>
+        <EndSlide title="谢谢观看" subtitle="边际贡献分析报告 · BytePlan" />
+      </Sequence>
+    </AbsoluteFill>
+  );
+};

package/skills/byteplan-video/remotion-project/src/index.tsx

@@ -0,0 +1,4 @@
+import { registerRoot } from "remotion";
+import { RemotionRoot } from "./Root";
+
+registerRoot(RemotionRoot);