141 lines
3.2 KiB
Markdown
141 lines
3.2 KiB
Markdown
|
# 🎨 封面工作室 — 语言驱动排版设计
|
|||
|
|
|
|||
|
|
> 输入文字，自动排版，生成封面。
|
|||
|
|
> 不需要 GPU · 不花一分钱 · 一行命令部署。
|
|||
|
|
|
|||
|
|
## 这是什么
|
|||
|
|
|
|||
|
|
一个**纯 HTML/CSS 排版渲染**的封面生成工具。和 AI 生图工具不同——它不做像素生成，而是做**排版设计**。
|
|||
|
|
|
|||
|
|
你告诉它内容和风格，它自动分析、配色、排版、渲染成图。
|
|||
|
|
|
|||
|
|
## 为什么做这个
|
|||
|
|
|
|||
|
|
市面上的封面工具都依赖 AI 绘画模型（DALL-E / Stable Diffusion），需要 GPU、API 密钥、付费额度。
|
|||
|
|
|
|||
|
|
这个工具：
|
|||
|
|
- **零成本** — 不需要任何 API 密钥
|
|||
|
|
- **极轻量** — 2GB 内存就能跑
|
|||
|
|
- **可部署** — 一行命令搭到自己服务器上
|
|||
|
|
- **可扩展** — 模板注册表机制，加新模板不改核心代码
|
|||
|
|
|
|||
|
|
## 快速开始
|
|||
|
|
|
|||
|
|
### 部署
|
|||
|
|
|
|||
|
|
```bash
|
|||
|
|
# 1. 克隆代码
|
|||
|
|
git clone https://guanghulab.com/code/bingshuo/guanghulab.git
|
|||
|
|
cd guanghulab/image-studio
|
|||
|
|
|
|||
|
|
# 2. 安装依赖
|
|||
|
|
npm install
|
|||
|
|
|
|||
|
|
# 3. 启动服务
|
|||
|
|
node server.js
|
|||
|
|
|
|||
|
|
# 4. 打开浏览器
|
|||
|
|
# http://localhost:3912
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### Docker
|
|||
|
|
|
|||
|
|
```bash
|
|||
|
|
docker run -d -p 3912:3912 --name cover-studio ghcr.io/bingshuo/cover-studio
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 当前支持的模板
|
|||
|
|
|
|||
|
|
| 模板 | 尺寸 | 说明 |
|
|||
|
|
|------|------|------|
|
|||
|
|
| 📕 小红书封面 | 1080×1440 | 3:4 竖版封面 · 5种预设风格 |
|
|||
|
|
| 📋 活动海报 | 1080×1920 | 9:16 海报（即将接入） |
|
|||
|
|
| 📱 社交卡片 | 1080×1080 | 1:1 社交分享（即将接入） |
|
|||
|
|
|
|||
|
|
## 预设风格
|
|||
|
|
|
|||
|
|
- **科技蓝** — 深色背景 + 蓝色调 · 适合技术教程
|
|||
|
|
- **奶油暖调** — 浅色背景 + 暖色系 · 适合生活分享
|
|||
|
|
- **极简黑白** — 纯白背景 + 黑色文字 · 适合正式内容
|
|||
|
|
- **玫瑰粉调** — 粉色系 · 适合女性向内容
|
|||
|
|
- **文艺绿植** — 绿色系 · 适合文艺/自然内容
|
|||
|
|
|
|||
|
|
## 架构
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
用户输入文字
|
|||
|
|
↓
|
|||
|
|
内容分析引擎 (config.js)
|
|||
|
|
· 检测内容类型：教程/金句/通知/...
|
|||
|
|
· 检测情绪：温暖/正式/文艺/...
|
|||
|
|
↓
|
|||
|
|
模板注册表 (templates/registry.js)
|
|||
|
|
· 选择模板 + 推荐预设风格
|
|||
|
|
· CSS 变量驱动配色
|
|||
|
|
↓
|
|||
|
|
模板渲染 (templates/xiaohongshu.js)
|
|||
|
|
· 纯 HTML + CSS 排版
|
|||
|
|
· 三种布局：标准/封面/金句
|
|||
|
|
↓
|
|||
|
|
Puppeteer 截图 (renderer.js)
|
|||
|
|
· Chrome headless 渲染
|
|||
|
|
· 输出 1080p 高清 PNG
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 添加新模板
|
|||
|
|
|
|||
|
|
1. 创建 `templates/your-template.js`，导出渲染函数
|
|||
|
|
2. 在 `templates/registry.js` 注册
|
|||
|
|
3. 核心代码零改动 ✅
|
|||
|
|
|
|||
|
|
```js
|
|||
|
|
// templates/registry.js
|
|||
|
|
export const TEMPLATE_REGISTRY = {
|
|||
|
|
// ...已有的模板...
|
|||
|
|
|
|||
|
|
'your-template': {
|
|||
|
|
id: 'your-template',
|
|||
|
|
name: '你的模板名',
|
|||
|
|
sizes: { width: 1080, height: 1920 },
|
|||
|
|
presets: [/* 预设风格 */],
|
|||
|
|
render: yourRenderFunction, // ← 这里挂上
|
|||
|
|
},
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## API
|
|||
|
|
|
|||
|
|
### GET /api/templates
|
|||
|
|
获取所有可用模板列表。
|
|||
|
|
|
|||
|
|
### POST /api/generate
|
|||
|
|
生成封面图片。
|
|||
|
|
|
|||
|
|
```json
|
|||
|
|
{
|
|||
|
|
"templateId": "xiaohongshu",
|
|||
|
|
"presetId": "tech",
|
|||
|
|
"title": "零基础手搓AI封面",
|
|||
|
|
"body": "- 第一点\n- 第二点",
|
|||
|
|
"layout": "default"
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
返回：
|
|||
|
|
```json
|
|||
|
|
{
|
|||
|
|
"success": true,
|
|||
|
|
"url": "/output/cover_1712345678.png"
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 开源协议
|
|||
|
|
|
|||
|
|
MIT © 光湖 · 铸渊
|
|||
|
|
|
|||
|
|
## 链接
|
|||
|
|
|
|||
|
|
- 在线体验：https://cover.guanghulab.com
|
|||
|
|
- 代码仓库：https://guanghulab.com/code/bingshuo/guanghulab
|
|||
|
|
- 小红书：@冰朔
|