你电脑里的又一个Electron @cﾒ*˶ˆ ᴗ ˆ˵ﾘ
安装包这么大，我也不想的啊😭
不过看了眼不渲染的时候占内存倒还好（心虚）
以上是这篇README里所有的人类文字了

PomChat Studio 是一个以桌面端为主的聊天对话视频编辑工具，用来把本地音频、ASS 字幕和角色样式整理成聊天气泡风格的视频内容。

它的主要功能聚焦在“字幕驱动的聊天视频”这个场景：你可以导入音频和 ASS 字幕，配置角色头像、气泡颜色、边距、字体、动画和画布布局，然后一边预览一边调整，最后导出成视频。

English README

在线体验

• React
• TypeScript
• Vite
• Electron
• Remotion
• WaveSurfer.js
• Tailwind CSS

PomChat Studio 适合这些场景：

• 把播客、对话、配音内容整理成聊天记录风格的视频
• 基于已有 ASS 字幕快速生成双人或多人对话画面
• 制作带头像、说话人名称、注释气泡的竖屏或横屏内容
• 在导出前精调字幕时间、角色样式和整体排版

如果你已经有音频和字幕，PomChat Studio 可以把后续的“对话可视化”流程集中到一个项目里处理。

PomChat虽然提供了字幕的基础修改功能，但它并非为大量修改字幕/翻译设计，推荐在Aegisub里完善后再导入PomChat

• 导入本地音频或音频 URL，以及 ASS 字幕文件
• 支持导入 ASS / SRT / LRC 字幕文件
• 导入 ASS 时可检测 Name / Style，并可选择把 ASS 样式映射到说话人气泡（描边色→气泡、阴影色→边框、文字色→文本、Outline→边框粗细），支持字体名导入与预览、全选/全不选
• 编辑字幕文本、开始时间、结束时间和说话人归属；字幕面板支持“简洁模式”（只读、自动跟随、适合大字幕量）
• 配置角色头像、名称、气泡颜色、字体、边框、阴影和动画
• 支持独立轨道模式：可设置轨道数量，并为每个说话人分配轨道和轨道内左右间距
• 支持背景导入图片 / GIF / 视频，并可设置填充方式（Cover/Contain/Fill）和对齐方式（九宫格）
• 支持插入图片 / 文字图层，可分别设置层级、时间范围、缩放、旋转、偏移、动画、文字描边与阴影
• 拖入视频背景时可检测音轨并一键设为项目音频（导出范围默认跟随音频时长）
• 支持预设导入/导出（桌面端与网页端都可用），并支持把 ASS 样式自动生成预设
• 欢迎页支持显示最近打开的 10 个项目文件
• 网页手机端支持紧凑布局：预览自适应缩放、底部面板可折叠/拖拽、控件区按空间动态收缩
• 支持白天 / 黑暗模式，以及最多 13 组主题色与次主题色自由切换
• 支持注释型气泡和普通说话人气泡
• 删除说话人前支持批量改绑字幕，防止误改为注释
• 跟随音频实时预览聊天排版效果
• 支持设置导出起止区间和文件名模板
• 通过 Electron 读写本地项目文件、配置和导出产物
• 网页端可以作为一个ass字幕内容查看器使用

• 新增、删除、排序字幕行
• 修改字幕文本内容
• 修改字幕开始和结束时间
• 切换当前字幕归属的说话人
• 保留 ASS 工作流，适合已有字幕素材继续加工

• 设置说话人头像和名字
• 自定义左右气泡样式
• 调整字体、字号、字重、颜色
• 调整圆角、边框、透明度、阴影
• 调整内边距、外边距、最大宽度等布局参数

• 支持横屏和竖屏尺寸
• 调整全局缩放、头像大小、名字字号
• 调整聊天区域 padding 和注释位置
• 音频驱动实时预览
• 预览和导出现在尽量共用同一套聊天渲染逻辑，减少样式漂移
• 插入图片 / 文字的预览与导出尽量共用同一套变换与图层逻辑，减少位置和样式偏差

• 拖动播放、循环播放、记忆播放位置
• 快速设置导出范围
• 使用文件名模板生成导出文件名
• 导出聊天视频到本地目录

1. 打开应用
2. 创建新项目，或打开已有项目文件
3. 导入音频文件或填写音频 URL
4. 导入 ASS 字幕文件
5. 检查字幕和说话人映射是否正确
6. 调整角色头像、气泡、字体和布局
7. 在预览区跟随音频检查画面效果
8. 设置导出范围、导出目录和文件名模板
9. 导出最终视频

PomChat Studio 同时有“项目配置”和“本地偏好”两类数据：

• 项目配置：和当前视频项目有关，比如音频路径/URL、字幕路径、角色样式、布局、背景、导出参数等
• 本地偏好：和当前机器有关，比如主题色、界面偏好、最近项目等

当前本地配置目录使用：

• Windows: %USERPROFILE%\.config\pomchat
• Linux: ~/.config/pomchat
• macOS: ~/.config/pomchat

ASS 自动备份目录（桌面端）使用：

• Windows: %USERPROFILE%\.config\pomchat\backup
• Linux: ~/.config/pomchat/backup
• macOS: ~/.config/pomchat/backup

这意味着你在不同机器上可以有不同的本地偏好，但项目文件本身仍然可以单独保存和共享。

npm install

npm run dev

开发模式下会启动基于 Vite 的界面和 Electron 开发流程。

npm run build

这会构建前端和 Electron 相关输出。

npm run dist

打包产物会输出到：

• release/

当前版本已提供导出硬件加速选项（Auto / GPU 优先 / CPU only）。

但需要说明：PomChat 的导出本质仍是“逐帧 JS 渲染 + 视频编码”链路，性能瓶颈通常在渲染阶段，整体依然主要吃 CPU 性能。

• 在 macOS 上，硬件路径可借助 VideoToolbox（具体收益取决于分辨率、特效和素材复杂度）
• 在 Windows 上，GPU 选项主要用于渲染侧加速，最终速度仍可能受 CPU 限制明显

如果你经常导出长视频或高分辨率内容，建议优先使用单核/多核性能更强的 CPU（例如 Apple M 系列芯片），体验会明显更稳定。

以 Mac mini M4、未启用 GPU 加速为例，大致可以参考：

• 30 FPS：导出速度约为 0.6x
• 60 FPS：导出速度约为 1x

以 i5-10400f、未启用 GPU 加速为例:

• 30 FPS：导出速度约为 1.3x
• 60 FPS：导出速度约为 2.6x

实际速度仍会受到字幕数量、背景图、动画、分辨率、磁盘速度和系统负载影响。

仓库内已经包含 Electron 自动构建和手动发布工作流。

• Workflow：Build Electron Apps
• 触发方式：推送到 main 或手动触发
• 作用：构建多平台 Electron 产物

• Workflow：Release Electron Apps
• 触发方式：手动输入 tag、release 名称和目标分支
• 作用：创建 GitHub Release，并上传构建好的产物

当前发布目标包括：

• macOS arm64
• Windows x64
• Windows arm64
• Linux x64
• Linux arm64

Windows 会同时产出：

• 安装版 nsis
• 绿色解压版 zip

• src/App.tsx：主应用流程、项目加载、预览集成、导出入口
• src/components/：编辑面板、播放器、导出弹窗、欢迎页、共享聊天组件
• src/components/chat/：预览和导出共用的聊天气泡渲染逻辑
• src/remotion/：Remotion 导出组合和类型定义
• src/hooks/useAssSubtitle.ts：ASS 解析与字幕加载
• electron/：Electron 主进程、预加载脚本和渲染工作进程
• .github/workflows/：CI 构建和发布工作流

• 当前项目主要面向 Electron 本地桌面使用场景
• 同时提供 Web 版本基础编辑能力（项目文件/ASS/音频导入、预览、预设导入导出）
• Web 端已提供手机窄屏适配（上方预览+播放控制，下方 Tab 面板）
• Windows 下本地音频和图片路径已经按 file:// 形式统一处理
• 顶部原生 Electron 菜单栏在 Windows / Linux 下默认隐藏

• 开发环境下仍可能看到部分 Vite / Electron 警告日志
• 一些 Electron 配置仍偏开发态，后续可以继续收紧
• 导出性能对 CPU 非常敏感：字幕数量、动画复杂度、背景视频/GIF、分辨率和 FPS 都会显著影响耗时

A. 技术层面来说，不是不能做，只是当前阶段不划算也不稳定。

• 浏览器端导出链路本身很重：要么前端跑 ffmpeg.wasm，要么走服务端渲染，两者都要额外投入。
• 纯前端本地导出容易出现高内存占用、导出慢、标签页卡死或被系统回收，移动端尤其明显。
• 浏览器文件系统和编解码能力受沙箱限制，兼容性和可控性不如桌面端。
• 长任务可靠性（后台、锁屏、切后台、降频）也远不如 Electron 本地进程稳定。

再加上我觉得：网页版本来就是一个 Demo和轻量编辑入口，定位更偏“预览/调参/校对”，不是重负载生产导出工具。
然后修了一堆 bug 还特地做了手机端排版

A. 因为我自己喜欢看官延，也喜欢做官延中文字幕。想把字幕内容分享出去时，通常只能一张张截图再拼接，效率很低；如果有字幕文件倒是能直接截图。
而广播类官延本身又没有画面，视频画面利用率很低。再加上其他语言场景下，听不懂原文时还容易分心错过上下文，所以我就想：干脆把内容做成 galgame 回放 log 或 聊天气泡 形式。最后因为气泡更直观也更好看，就决定走这条路。
感谢 AI 时代，这个项目的基础雏形只用了一个下午就搭出来了。

A. 一开始想过 PodChat（Podcast + Chat），也想过 RadioChat（因为烤广播比较多），但都感觉有点土，也不够有特色。
当时测试用步侑广播，顺手就想icon要不先用步梦。后来把带icon的截图发给朋友看：

朋友：为什么不叫 PomChat？
我：对哦！

于是名字就这么定了。这个icon目前也还没最终定稿，后面如果 DMCA 真找上门，可能会再做调整x

A. 是啊，其实我自己也会吐槽 Electron。
但目前这套实现里，在不引入Pr/AE这类大型编辑工具的前提下，要得到观感足够好的渲染效果，浏览器前端这一套是最合适的。再考虑文件导出这种重负载任务，Electron目前是最现实的折中方案。
说到底，一旦进入“视频渲染 + 编码”的问题域，就很难真正轻量化。

A. 这基本是当前这类渲染链路的天然代价，不完全是 PomChat 自己的锅。

• PomChat 的导出本质上还是浏览器逐帧渲染，重渲染的大头主要在“逐帧截图”这一步，而不是最后交给 FFmpeg 编码的那一小段。
• 透明导出、半透明叠层、模糊、阴影、复杂动画，都会让几乎每一帧都必须重新计算和重绘，成本会明显上涨。
• 视频背景会更重，因为它通常意味着“先解码背景视频，再和聊天层逐帧合成，最后再重新编码一遍成品视频”。
• 即使启用了 GPU，真正能吃到明显加速的往往也只是浏览器绘制或部分编码环节；而 FFmpeg 那部分就算调到了 GPU，整体收益通常也不会特别大，因为主要瓶颈往往还是前面的逐帧渲染。

所以如果你更在意导出速度，最有效的建议通常不是一味折腾 GPU，而是尽量少用：

• 大量动画
• 视频/GIF 背景
• 大面积半透明、模糊、阴影这类效果

普通 MP4、静态背景、较少动画的场景，一般会明显快一些；透明导出和复杂动态背景则通常会慢很多。

• 增加底部 AudioViz 音频可视化，提供随声音能量跳动的简易波形
• 气泡支持简单的markdown语法 支持图片通过markdown语法作为气泡内容插入 删除线 斜线 加粗 自创一个改字体颜色的标签 兼容markdown语法的那种
• 气泡顶部半透明渐隐功能
• 增加信息文字块
• 多人发言场合的气泡出现顺序问题
• 字幕列表多选后批量修改说话人、删除
• 删除当前音频
• 增加自由位置插入图片插入能力，单张图片支持独立动画效果
• 增加背景图片轮换效果，支持多张背景图按节奏切换或淡入淡出
• 增加动态背景视频支持，允许导入视频作为背景（如游戏画面或循环动画），聊天气泡叠加其上
• 增加检查更新功能
• 增加 GPU 导出加速支持（Auto / GPU 优先 / CPU only），并提供跨平台回退策略
• 增加撤销 / 重做功能（支持字幕编辑、样式与布局参数调整）
• 导入 ASS 文件时支持从已有样式自动映射说话人与气泡样式（含颜色/透明度/边框粗细）
• 增加 GitHub 静态页面版本，提供字幕与音频导入的基础预览功能
• 静态版本增加手机竖屏基础排版与底部可折叠面板
• 增加支持更多字幕文件（srt、lrc等等）