✍️ 手写体生成器 (Text to Handwriting Generator)

将文本内容转换为手写体效果的网页，支持自定义纸张背景、字体、随机偏移等参数，适合录屏拍视频使用。

📸 效果预览

• 左侧：参数设置面板
• 右侧：实时预览效果
• 支持多种手写字体和纸张背景
• 可调节位置偏移度，模拟真实手写

🚀 快速开始

方法 1：使用默认文本

python scripts/generate.py

方法 2：使用自定义文本

python scripts/generate.py "这是我的自定义文本内容"

方法 3：从文件读取文本

python scripts/generate.py --file my_text.txt

🎨 功能特性

功能	说明
🤖 AI 润色	接入大模型 API，自动扩展和润色文案（500字+）
多种手写字体	清松手写体系列、沐瑶手写体、内海字体等 13 种本地字体
纸张尺寸	A4/B5/A3 纸张，支持纵向和横向 (600dpi)
位置偏移	0-100% 可调，模拟真实手写的不规则性
随机涂改	密集横线、涂黑、圈圈标记，模拟真实修改痕迹
字体粗细变化	0-100% 可调，模拟笔压变化
字号调节	16-48px 可调
行间距调节	1.2-3.0 倍可调
实时预览	参数改变时自动刷新
导出图片	下载为 PNG 格式，高清输出 (600dpi)

🤖 AI 润色功能（新增）

配置步骤

1. 点击「🤖 AI 润色配置」展开配置面板
2. 填写 API 配置：
   • API Endpoint：https://api.anthropic.com/v1/messages
   • API Key：你的 Claude API Key（sk-ant-...）
   • 模型：选择 Claude 3.5 Sonnet（推荐）
3. 点击「💾 保存配置」
4. 点击「🔌 测试连接」验证配置是否正确

使用方法

1. 在文本框中输入简短文案，例如：「产品经理的核心能力」
2. 点击「🤖 AI 润色文案」按钮
3. AI 会自动：
   • 扩展内容至 500 字以上
   • 添加层级结构（标题、章节、要点）
   • 补充关键名词的定义和解释
   • 保持专业、学术的风格
   • 严禁使用 Emoji 表情
4. 润色完成后自动刷新预览

AI 润色规则

基于 text-to-excalidraw 的文案规范：

• 🚫 严禁使用任何 Emoji 表情
• 使用简洁、高密度的专业语言
• 深度扩展内容（每个概念至少 2-3 个支撑点）
• 多层级展开（标题→要点→详细说明）
• 内容量至少 500 字，确保充实
• 层级清晰，适合手写展示
• 不要有过多空白内容

支持的 API

• Anthropic Claude API（推荐）
• OpenAI API（需修改 endpoint）
• 兼容 OpenAI 格式的本地模型（Ollama、LM Studio 等）

📋 使用场景

• 📹 视频录制：制作教学视频时展示手写笔记
• 📱 短视频：抖音、小红书等平台的内容制作
• 📝 笔记展示：将电子笔记转换为手写风格
• 🎬 演示文稿：增加演示的亲和力和真实感

🛠️ 技术栈

• 前端：HTML5 Canvas + JavaScript
• 字体：13 种本地手写字体（清松手写体系列、沐瑶手写体等）
• AI 集成：Claude API / OpenAI API
• 后端（旧）：Python Flask（静态服务 + AI 润色）
• 后端（Phase 1 新增）：FastAPI + SQLAlchemy（渲染任务 API）

🧱 后端化进度（Phase 1）

已新增 backend/ 目录，提供后端骨架能力：

• POST /api/v1/render/tasks：提交渲染任务
• GET /api/v1/render/tasks/{task_id}：查询任务状态
• GET /api/v1/files/{task_id}：下载渲染结果
• GET /api/v1/assets/fonts|papers：查询资源
• GET /api/v1/health：健康检查

启动方式：

cd backend
python3 -m venv .venv
source .venv/bin/activate
pip install -r requirements.txt
uvicorn app.main:app --reload --port 9000

📐 参数说明

位置偏移度 (0-100%)

• 0%：整齐划一，像印刷体
• 10%：轻微偏移，推荐值
• 50%：明显偏移，像真人手写
• 100%：歪扭不堪，过于夸张

字号大小 (16-48px)

• 16-20px：适合长文章
• 24-28px：推荐值，适合录屏
• 32-48px：适合标题或短句

行间距 (1.2-3.0)

• 1.2-1.5：紧凑排版
• 1.8-2.0：推荐值，舒适阅读
• 2.5-3.0：宽松排版

📝 文件结构

text-to-handwriting/
├── SKILL.md                    # 技能文档（5段式）
├── README.md                   # 使用说明
├── templates/
│   └── handwriting.html        # HTML 模板
├── scripts/
│   └── generate.py             # Python 启动脚本
└── assets/                     # 资源文件（纸张背景等）

💡 使用技巧

1. 录屏前调整好参数：先在网页中调整到满意的效果，再开始录屏
2. 选择合适的字体：中文内容用中文字体，英文内容用英文字体
3. 位置偏移不要太大：10-20% 最自然，太大会影响可读性
4. 纸张背景要匹配场景：正式场合用白纸，轻松场合用米黄纸
5. 导出高清图片：Canvas 会自动适配高 DPI 屏幕，导出的图片是高清的

随机涂改概率 (0-100%)

• 0%：完美无瑕，无任何涂改
• 3-5%：推荐值，偶尔有修改痕迹
• 10-20%：较多涂改，像真实笔记
• 50%+：涂改连篇，过于夸张

字体粗细变化 (0-100%)

• 0%：工整清晰，粗细一致
• 5-10%：推荐值，轻微笔压变化
• 20-30%：明显粗细不均
• 50%+：粗细变化过大

🔧 进阶功能

• 🤖 AI 润色功能（自动扩展文案至 500 字+）
• 随机涂改效果（密集横线、涂黑、圈圈标记）
• 字体粗细变化
• 本地手写字体集成（13 种字体）
• A4/B5/A3 纸张尺寸支持
• 更多纸张背景（真实纸张照片）
• 打字机动画效果
• 墨水晕染效果
• 批量生成（多页文档）

---

版本：v3.0.0 更新日期：2026-02-11 作者：老王 (pmlaowangba)