starred/mangatype-live-yunshaochu
1
0
Fork 0
mirror of https://github.com/yunshaochu/mangatype-live.git synced 2026-04-26 11:16:09 +03:00
Code Issues Projects Packages Wiki Activity
No description
91 commits 9 branches 0 tags 3.4 MiB
Find a file
Exact
老王 fea6279975 todo
2026-02-22 22:14:57 +08:00
components 补充漏传文件 2026-02-22 20:34:00 +08:00
contexts 增加AI选择字号 2 2026-02-22 18:41:13 +08:00
dockerDoc 更新docker compose示例 2026-02-15 21:26:15 +08:00
hooks 增加AI选择字号 2 2026-02-22 18:41:13 +08:00
services 增加AI选择字号 2 2026-02-22 18:41:13 +08:00
utils 新增AI控制字体颜色开关 2026-02-16 13:43:41 +08:00
.gitattributes 增加读取cloud syudio环境变量的功能 2026-02-14 22:52:48 +08:00
.gitignore "init" 2026-01-28 00:04:26 +08:00
App.tsx 手动json导入增加坐标提示 2026-02-16 20:32:01 +08:00
ARCHITECTURE.md "docs" 2026-01-28 00:09:25 +08:00
Dockerfile Rename Dockerfile.txt to Dockerfile 2026-02-15 21:25:29 +08:00
dockerignore.txt docker+nginx 2026-02-14 16:02:20 +08:00
index.html 增加字体 2026-02-15 20:28:04 +08:00
index.tsx 代码拆分+优化提示词 2026-02-08 02:00:04 +08:00
metadata.json 增加读取cloud syudio环境变量的功能 2026-02-14 22:52:48 +08:00
nginx.conf 1.dockerfile优化：增加cloud studio环境变量 2026-02-14 22:21:04 +08:00
package-lock.json "init" 2026-01-28 00:04:26 +08:00
package.json 增加读取cloud syudio环境变量的功能 2026-02-14 22:52:48 +08:00
README.md 优化 2026-01-31 20:54:39 +08:00
TODO.txt todo 2026-02-22 22:14:57 +08:00
tsconfig.json "init" 2026-01-28 00:04:26 +08:00
types.ts 增加AI选择字号 2 2026-02-22 18:41:13 +08:00
vite.config.ts "init" 2026-01-28 00:04:26 +08:00
文本探测API.md "init" 2026-01-28 00:04:26 +08:00

README.md

MangaType Live

一个网页原生的漫画嵌字工具，集成了 AI 翻译和自动化排版功能。

功能特点

  • 🤖 AI 智能识别：自动检测对话气泡位置、翻译文本
  • ✨ 自动化排版：智能生成遮罩、调整字体大小和方向
  • 🖼️ 批量处理：支持文件夹导入和批量处理
  • 🎨 灵活编辑：手动调整气泡位置、大小、文字内容
  • 📤 多种导出：单张保存、ZIP 打包、HTML 导出

快速开始

安装依赖

npm install

运行开发服务器

npm run dev

在浏览器中打开 http://localhost:3001 即可使用。

使用指南

1. 导入图片

点击侧边栏的"添加图片"按钮，或直接将图片/文件夹拖拽到窗口中。也支持粘贴剪贴板中的图片。

2. AI 识别与翻译

在左侧面板下方：

  • 点击 Current (当前) 处理单张图片
  • 点击 Process All (全部处理) 批量处理所有图片

AI 会自动识别气泡位置、翻译文本并生成遮罩。

3. 编辑气泡

  • 选中：点击画布上的气泡选中
  • 调整大小：拖动 8 个控制点调整大小（角点等比缩放，边点单向缩放）
  • 编辑内容：在右侧面板修改文字、字体、排版方向和遮罩样式
  • 删除：选中后点击删除按钮或按 Delete 键

4. 导出结果

  • Save Image (保存图片)：下载当前页
  • ZIP All (打包下载)：下载所有处理完的图片
  • Merge (合并)：将文字烧录进图片（不可逆操作）

进阶功能

文本检测 (comic-text-detector)

这是一个辅助 AI 的功能。需要在本地部署comic-text-detector项目的服务（致谢dmMaze，之后我会fork这个项目给它加个flask，以便作为api调用）。开启后，App 会先通过 comic-text-detector 精确提取文本坐标，将这些“空间提示”发送给 AI。这能显著解决 AI “找不到气泡”或“框选范围不准”的问题，极大提高复杂页面的识别率。

手动 JSON 导入

如果没有配置 API Key，或想使用更强的模型（如 Claude 3.5 / DeepSeek）：

  1. 点击工具栏的 JSON 按钮
  2. 复制提示词
  3. 将提示词和图片发送给任意 AI 网页端
  4. 将 AI 返回的 JSON 代码粘贴回来

合并图层 (Merge Layers)

将所有悬浮气泡烧录进图片像素。合并后，气泡文字变成图片的一部分，无法再编辑（想编辑可以撤销合并）。适用于：

  • 处理大量气泡防止卡顿
  • 在已有文字上叠加新效果
  • 导出前确认定稿

快捷键

  • Ctrl+Z / Ctrl+Y：撤销 / 重做
  • 选中气泡后 + 鼠标滚轮：调整字体大小
  • 选中气泡后 + Alt + 鼠标滚轮：调整气泡遮罩大小
  • 按住 Ctrl 拖动：精细调整
  • 双击画布空白处：取消选中

技术栈

  • 前端框架：React + TypeScript
  • 构建工具：Vite
  • 样式：Tailwind CSS (CDN Runtime)
  • 字体：Google Fonts (Noto Sans SC, Zhi Mang Xing, Ma Shan Zheng)
  • AI 集成：Google Gemini SDK, OpenAI 兼容 API

配置说明

在设置中配置：

  • AI Provider：选择 AI 服务提供商
  • API Key：输入对应的 API 密钥
  • 模型选择：选择使用的模型
  • 默认字号：设置新生成气泡的默认字体大小
  • 系统提示词：自定义 AI 翻译和识别行为

注意事项

  • 项目需要配置 AI API Key 才能使用自动识别功能
  • 文本检测 (comic-text-detector) 服务需要单独部署（可选）

License

MIT

详细架构文档

项目的技术架构和详细规范请参考 ARCHITECTURE.md