KO | EN

GitLite

Minimalist Open Source Repository Search Engine

gitlite — search

#dsh #dsh-plugin #deepseek-harness #typescript #ai-agent #codex #developer-tools #claude-code #windows #mcp #python #desktop-app

PomChat

★ 90 Open GitHub ↗

通过本地音频 + ASS字幕实现即时通讯聊天渲染并导出视频的桌面工具

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

<h1 align="center">PomChat Studio</h1>

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

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

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

[English README](https://github.com/AlanWanco/PomChat/blob/main/README.en.md)

[在线体验](https://alanwanco.github.io/PomChat/)

## 技术栈

- 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字幕内容查看器使用

## 主要功能

### 1. 字幕编辑

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

### 2. 角色与气泡样式

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

### 3. 布局与预览

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

### 4. 播放与导出

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

## 基本使用流程

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`

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

## 快速开始

### 安装依赖

```bash
npm install
```

### 启动开发环境

```bash
npm run dev
```

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

## 构建

### 构建应用

```bash
npm run build
```

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

### 本地打包 Electron 应用

```bash
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`

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

## GitHub Actions

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

### 自动构建

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

### 手动发布 Release

- 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 都会显著影响耗时

## Q&A

### Q. 为什么网页端不支持视频导出？

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

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

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

### Q. 为什么会想到这样输出字幕？

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

### Q. 为什么叫这个名字？

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

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

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

### Q. 嗨呀，经典 Electron？

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

### Q. 为什么透明、动画很多、或者视频做背景时，导出会特别慢？GPU 加速没用吗？

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

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

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

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

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

## Todo

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

PomChat

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README