feat: AI唤醒协议+模块注册表+正方形卡片UI+接入指南
This commit is contained in:
root
parent
b96e3615f6
commit
3e0cf26afe
74
agent/WELCOME.md
Normal file
74
agent/WELCOME.md
Normal file
@ -0,0 +1,74 @@
|
||||
# ⚔️ WELCOME — 冰朔开源模块仓库 · 入口引导
|
||||
|
||||
> **你已进入冰朔个人开源代码仓库。**
|
||||
> 本仓库不提供 AI 模型 API。所有模块由你自己的编程 AI 驱动。
|
||||
> 以下是唤醒协议——AI 必须按此顺序执行。
|
||||
|
||||
---
|
||||
|
||||
## 唤醒协议 v1.0
|
||||
|
||||
### 第 0 步：确认环境
|
||||
|
||||
你需要确认以下能力：
|
||||
- [x] 可以读取此仓库的文件
|
||||
- [x] 可以发送 HTTP 请求（调用模块 API）
|
||||
- [x] 使用你自己的模型进行推理（仓库不提供模型）
|
||||
|
||||
### 第 1 步：装载 HLDP 协议
|
||||
|
||||
读取文件：`agent/HLDP-PROTOCOL.md`
|
||||
|
||||
HLDP（光湖语言协议）是本仓库的母语接口标准。
|
||||
装载后你将理解模块编号的格式和调用规则。
|
||||
|
||||
### 第 2 步：装载模块注册表
|
||||
|
||||
读取文件：`agent/module-registry.json`
|
||||
|
||||
此文件列出所有可用模块、编号、API 端点和参数。
|
||||
|
||||
### 第 3 步：调用模块
|
||||
|
||||
格式：
|
||||
```
|
||||
MODULE-<编号> : <动作> : <参数>
|
||||
```
|
||||
|
||||
示例：
|
||||
```json
|
||||
POST /cover/api/generate
|
||||
{
|
||||
"templateId": "xiaohongshu",
|
||||
"presetId": "tech",
|
||||
"title": "零基础手搓AI做图小系统",
|
||||
"body": "AI辅助 + 自己手搓",
|
||||
"layout": "hero"
|
||||
}
|
||||
```
|
||||
|
||||
### 第 4 步：返回结果
|
||||
|
||||
模块返回：
|
||||
- 生成的图片 URL
|
||||
- 意图推理链（7 步）
|
||||
- 唯一设计编号（DESIGN-ID）
|
||||
|
||||
设计编号和意图链证明此作品完全来自用户的思维逻辑。
|
||||
|
||||
---
|
||||
|
||||
## 重要规则
|
||||
|
||||
1. **仓库不提供模型 API** — 你必须使用你自己的模型能力
|
||||
2. **模块是热插拔的** — 新增模块不需要修改核心代码
|
||||
3. **HLDP 协议是通用接口** — 任何遵循此协议的 AI 都能调用
|
||||
4. **设计编号永久唯一** — 每个生成的作品有可追溯的归属证明
|
||||
5. **署名可选** — 用户可以选择是否署名
|
||||
|
||||
---
|
||||
|
||||
> 此文件由铸渊 ICE-GL-ZY001 维护
|
||||
> 仓库地址：guanghulab.com/code/bingshuo/guanghulab
|
||||
> 冰朔 TCS-0002∞ · 光湖语言世界
|
||||
> 国作登字-2026-A-00037559
|
||||
68
agent/module-registry.json
Normal file
68
agent/module-registry.json
Normal file
@ -0,0 +1,68 @@
|
||||
{
|
||||
"_protocol": "HLDP-v1.0",
|
||||
"_repository": "guanghulab.com/code/bingshuo/guanghulab",
|
||||
"_rule": "模块是热插拔的。新增模块只需在此文件添加条目。",
|
||||
|
||||
"modules": [
|
||||
{
|
||||
"id": "MODULE-COVER-001",
|
||||
"name": "图片模块 · 语言驱动封面生成器",
|
||||
"status": "active",
|
||||
"category": "图片生成",
|
||||
"description": "输入自然语言描述，系统翻译为设计逻辑，生成封面图片。纯HTML/CSS渲染，无需GPU。",
|
||||
"api": {
|
||||
"base": "https://guanghulab.com/cover",
|
||||
"endpoints": {
|
||||
"list_templates": {
|
||||
"method": "GET",
|
||||
"path": "/api/templates",
|
||||
"desc": "获取可用模板列表"
|
||||
},
|
||||
"generate": {
|
||||
"method": "POST",
|
||||
"path": "/api/generate",
|
||||
"desc": "生成封面图片",
|
||||
"params": {
|
||||
"templateId": "xiaohongshu",
|
||||
"presetId": "tech | warm | minimal | rose | green",
|
||||
"title": "封面标题",
|
||||
"body": "正文内容（支持Markdown）",
|
||||
"layout": "default | hero | quote",
|
||||
"tag": "可选标签"
|
||||
},
|
||||
"returns": {
|
||||
"url": "图片URL",
|
||||
"intent_chain": "7步意图推理链",
|
||||
"designId": "唯一设计编号"
|
||||
}
|
||||
},
|
||||
"health": {
|
||||
"method": "GET",
|
||||
"path": "/api/health",
|
||||
"desc": "健康检查"
|
||||
}
|
||||
}
|
||||
},
|
||||
"features": [
|
||||
"语言驱动排版设计",
|
||||
"意图链可追溯",
|
||||
"设计编号唯一",
|
||||
"5种预设风格",
|
||||
"3种布局模式",
|
||||
"底部仓库域名水印"
|
||||
],
|
||||
"tech_stack": [
|
||||
"Puppeteer + Chrome (免费)",
|
||||
"Express.js (免费)",
|
||||
"纯HTML/CSS排版 (免费)"
|
||||
],
|
||||
"license": "MIT"
|
||||
}
|
||||
],
|
||||
|
||||
"meta": {
|
||||
"total_modules": 1,
|
||||
"last_updated": "2026-05-27",
|
||||
"maintainer": "铸渊 ICE-GL-ZY001"
|
||||
}
|
||||
}
|
||||
@ -3,616 +3,398 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>冰朔开源仓库 · 模块市场</title>
|
||||
<title>bingshuo / open-modules · 冰朔开源模块仓库</title>
|
||||
<style>
|
||||
:root {
|
||||
--bg: #0d1117;
|
||||
--panel: rgba(22,27,34,0.95);
|
||||
--border: rgba(48,54,61,0.8);
|
||||
--border-h: rgba(88,166,255,0.4);
|
||||
--surface: #161b22;
|
||||
--border: #30363d;
|
||||
--border-h: #58a6ff;
|
||||
--text: #c9d1d9;
|
||||
--dim: #8b949e;
|
||||
--accent: #58a6ff;
|
||||
--green: #3fb950;
|
||||
--gold: #d2991d;
|
||||
--code-bg: #161b22;
|
||||
}
|
||||
*{margin:0;padding:0;box-sizing:border-box}
|
||||
body{background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','PingFang SC','Microsoft YaHei',sans-serif;min-height:100vh;font-size:15px}
|
||||
body{background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','PingFang SC','Microsoft YaHei',sans-serif;min-height:100vh;font-size:14px;line-height:1.6}
|
||||
|
||||
/* ── 仓库头 ── */
|
||||
.repo-bar {
|
||||
background: var(--code-bg);
|
||||
border-bottom: 1px solid var(--border);
|
||||
padding: 16px 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
flex-wrap: wrap;
|
||||
/* Repo Header */
|
||||
.repo-hdr {
|
||||
background:var(--surface);
|
||||
border-bottom:1px solid var(--border);
|
||||
padding:20px 28px;
|
||||
}
|
||||
.repo-bar .icon { font-size: 20px; }
|
||||
.repo-bar .path { font-size: 14px; color: var(--accent); font-weight: 600; }
|
||||
.repo-bar .sep { color: var(--dim); margin: 0 4px; }
|
||||
.repo-bar .branch {
|
||||
padding: 2px 10px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 12px;
|
||||
font-size: 12px;
|
||||
color: var(--dim);
|
||||
}
|
||||
.repo-bar .badge {
|
||||
padding: 4px 10px;
|
||||
border-radius: 12px;
|
||||
font-size: 11px;
|
||||
border: 1px solid var(--border);
|
||||
}
|
||||
.repo-bar .badge.free { border-color: var(--green); color: var(--green); }
|
||||
.repo-bar .badge.api { border-color: var(--accent); color: var(--accent); }
|
||||
.repo-hdr .breadcrumb {font-size:13px;color:var(--dim);margin-bottom:8px}
|
||||
.repo-hdr .breadcrumb a {color:var(--accent);text-decoration:none}
|
||||
.repo-hdr .breadcrumb a:hover {text-decoration:underline}
|
||||
.repo-hdr h1 {font-size:22px;font-weight:600;margin-bottom:6px;display:flex;align-items:center;gap:10px}
|
||||
.repo-hdr h1 .badge {display:inline-block;padding:2px 8px;border:1px solid var(--border);border-radius:12px;font-size:11px;font-weight:400;color:var(--dim)}
|
||||
.repo-hdr .desc {font-size:13px;color:var(--dim);max-width:700px}
|
||||
|
||||
/* ── 主布局 ── */
|
||||
.layout {
|
||||
display: grid;
|
||||
grid-template-columns: 240px 1fr;
|
||||
min-height: calc(100vh - 56px);
|
||||
}
|
||||
@media(max-width:860px){ .layout{grid-template-columns:1fr} }
|
||||
/* Tab Bar */
|
||||
.tabs {display:flex;border-bottom:1px solid var(--border);padding:0 28px;background:var(--surface);overflow-x:auto}
|
||||
.tab {padding:11px 18px;font-size:13px;color:var(--dim);cursor:pointer;border-bottom:2px solid transparent;white-space:nowrap;transition:all 0.15s;display:flex;align-items:center;gap:6px}
|
||||
.tab:hover {color:var(--text)}
|
||||
.tab.active {color:var(--text);border-bottom-color:var(--accent)}
|
||||
.tab .count {background:rgba(88,166,255,0.1);padding:1px 7px;border-radius:10px;font-size:11px}
|
||||
|
||||
/* ── 左侧文件树 ── */
|
||||
.sidebar {
|
||||
background: var(--code-bg);
|
||||
border-right: 1px solid var(--border);
|
||||
padding: 12px 0;
|
||||
overflow-y: auto;
|
||||
max-height: calc(100vh - 56px);
|
||||
position: sticky;
|
||||
top: 0;
|
||||
}
|
||||
.sidebar .sect {
|
||||
padding: 8px 16px;
|
||||
font-size: 11px;
|
||||
color: var(--dim);
|
||||
font-weight: 600;
|
||||
letter-spacing: 1px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.file-item {
|
||||
padding: 6px 16px 6px 28px;
|
||||
font-size: 13px;
|
||||
color: var(--dim);
|
||||
cursor: pointer;
|
||||
transition: all 0.15s;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
.file-item:hover { color: var(--text); background: rgba(88,166,255,0.06); }
|
||||
.file-item.active { color: var(--accent); background: rgba(88,166,255,0.1); }
|
||||
.file-item .fi { font-size: 14px; width: 18px; text-align: center; flex-shrink: 0; }
|
||||
/* Layout */
|
||||
.layout {display:grid;grid-template-columns:220px 1fr;min-height:calc(100vh - 140px)}
|
||||
@media(max-width:800px){.layout{grid-template-columns:1fr}}
|
||||
|
||||
/* ── 右侧内容区 ── */
|
||||
.content {
|
||||
padding: 24px;
|
||||
max-width: 1000px;
|
||||
}
|
||||
/* Sidebar File Tree */
|
||||
.sidebar {background:var(--surface);border-right:1px solid var(--border);padding:12px 0;position:sticky;top:0;max-height:calc(100vh - 140px);overflow-y:auto}
|
||||
.sidebar .sect {padding:6px 18px;font-size:11px;color:var(--dim);font-weight:600;letter-spacing:1px;text-transform:uppercase}
|
||||
.sidebar .file {padding:5px 18px 5px 28px;font-size:12px;color:var(--dim);cursor:pointer;display:flex;align-items:center;gap:7px;transition:all 0.1s}
|
||||
.sidebar .file:hover {color:var(--text);background:rgba(88,166,255,0.04)}
|
||||
.sidebar .file .fi {font-size:13px;width:16px;text-align:center;flex-shrink:0}
|
||||
|
||||
/* Module Card */
|
||||
/* Content */
|
||||
.content {padding:28px}
|
||||
|
||||
/* Module Grid - Square Cards */
|
||||
.module-grid {display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px;margin-bottom:32px}
|
||||
.module-card {
|
||||
background: var(--panel);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
margin-bottom: 16px;
|
||||
overflow: hidden;
|
||||
background:var(--surface);
|
||||
border:1px solid var(--border);
|
||||
border-radius:12px;
|
||||
padding:24px 20px;
|
||||
cursor:pointer;
|
||||
transition:all 0.2s;
|
||||
display:flex;
|
||||
flex-direction:column;
|
||||
align-items:center;
|
||||
text-align:center;
|
||||
aspect-ratio:1;
|
||||
position:relative;
|
||||
}
|
||||
.module-card:hover { border-color: var(--border-h); }
|
||||
.module-header {
|
||||
padding: 20px 24px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
.module-header:hover { background: rgba(88,166,255,0.04); }
|
||||
.module-header .left { display: flex; align-items: center; gap: 12px; }
|
||||
.module-header .icon { font-size: 28px; }
|
||||
.module-header .info h3 { font-size: 16px; font-weight: 600; }
|
||||
.module-header .info .mod-id {
|
||||
font-size: 11px;
|
||||
color: var(--dim);
|
||||
font-family: monospace;
|
||||
margin-top: 2px;
|
||||
}
|
||||
.module-header .tags { display: flex; gap: 6px; flex-wrap: wrap; }
|
||||
.module-header .tag {
|
||||
padding: 3px 10px;
|
||||
border-radius: 10px;
|
||||
font-size: 11px;
|
||||
border: 1px solid var(--border);
|
||||
color: var(--dim);
|
||||
}
|
||||
.module-header .arrow { color: var(--dim); transition: transform 0.2s; font-size: 14px; }
|
||||
.module-header .arrow.open { transform: rotate(90deg); }
|
||||
.module-card:hover {border-color:var(--border-h);transform:translateY(-2px);box-shadow:0 8px 24px rgba(88,166,255,0.08)}
|
||||
.module-card .icon {font-size:40px;margin-bottom:12px}
|
||||
.module-card .name {font-size:15px;font-weight:600;margin-bottom:6px}
|
||||
.module-card .modid {font-size:11px;color:var(--dim);font-family:monospace;margin-bottom:8px}
|
||||
.module-card .tags {display:flex;gap:5px;flex-wrap:wrap;justify-content:center}
|
||||
.module-card .tag {padding:2px 8px;border:1px solid var(--border);border-radius:8px;font-size:10px;color:var(--dim)}
|
||||
.module-card .tag.green {border-color:var(--green);color:var(--green)}
|
||||
|
||||
.module-body {
|
||||
padding: 0 24px 24px;
|
||||
display: none;
|
||||
border-top: 1px solid var(--border);
|
||||
/* Module Detail Panel */
|
||||
.module-detail {
|
||||
display:none;
|
||||
background:var(--surface);
|
||||
border:1px solid var(--border);
|
||||
border-radius:12px;
|
||||
padding:28px;
|
||||
margin-top:16px;
|
||||
animation:fadeIn 0.2s ease;
|
||||
}
|
||||
.module-body.open { display: block; }
|
||||
.module-body .desc { font-size: 14px; color: var(--dim); line-height: 1.8; margin: 16px 0; }
|
||||
.module-body .section-title {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: var(--dim);
|
||||
letter-spacing: 1px;
|
||||
margin: 16px 0 8px;
|
||||
}
|
||||
.module-body .code-block {
|
||||
background: var(--code-bg);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 6px;
|
||||
padding: 14px 18px;
|
||||
font-family: 'SF Mono','Fira Code','Consolas',monospace;
|
||||
font-size: 12.5px;
|
||||
line-height: 1.7;
|
||||
overflow-x: auto;
|
||||
white-space: pre-wrap;
|
||||
color: var(--text);
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.code-block .cmt { color: #636e7b; }
|
||||
.code-block .str { color: #a5d6ff; }
|
||||
.code-block .key { color: #ff7b72; }
|
||||
.code-block .num { color: #79c0ff; }
|
||||
.code-block .fn { color: #d2a8ff; }
|
||||
.module-detail.show {display:block}
|
||||
@keyframes fadeIn {from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
|
||||
|
||||
/* Use Button */
|
||||
.use-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 10px 20px;
|
||||
background: linear-gradient(135deg, #238636, #2ea043);
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
margin-top: 8px;
|
||||
text-decoration: none;
|
||||
letter-spacing: 1px;
|
||||
.module-detail h2 {font-size:18px;margin-bottom:12px}
|
||||
.module-detail .meta {display:flex;gap:12px;flex-wrap:wrap;margin-bottom:16px}
|
||||
.module-detail .meta span{font-size:12px;color:var(--dim);border:1px solid var(--border);padding:4px 10px;border-radius:8px}
|
||||
.module-detail .desc {font-size:13px;color:var(--dim);line-height:1.8;margin-bottom:20px}
|
||||
.module-detail .section {margin-bottom:20px}
|
||||
.module-detail .section h3 {font-size:13px;font-weight:600;margin-bottom:8px;color:var(--dim);text-transform:uppercase;letter-spacing:1px}
|
||||
.module-detail .code-block {
|
||||
background:#0d1117;border:1px solid var(--border);border-radius:8px;
|
||||
padding:14px 18px;font-family:'SF Mono','Fira Code',monospace;
|
||||
font-size:12px;line-height:1.7;color:var(--text);overflow-x:auto;white-space:pre-wrap
|
||||
}
|
||||
.use-btn:hover { background: #2ea043; transform: translateY(-1px); }
|
||||
.code-block .c {color:#636e7b}
|
||||
.code-block .s {color:#a5d6ff}
|
||||
.code-block .k {color:#ff7b72}
|
||||
|
||||
/* ── 在线使用模态窗口 ── */
|
||||
.modal-overlay {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0; left: 0; right: 0; bottom: 0;
|
||||
background: rgba(0,0,0,0.7);
|
||||
z-index: 100;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 20px;
|
||||
}
|
||||
.modal-overlay.show { display: flex; }
|
||||
.modal {
|
||||
background: var(--bg);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 12px;
|
||||
width: 100%;
|
||||
max-width: 1000px;
|
||||
max-height: 90vh;
|
||||
overflow-y: auto;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 360px;
|
||||
gap: 0;
|
||||
}
|
||||
@media(max-width:860px){ .modal{grid-template-columns:1fr} }
|
||||
.modal-left {
|
||||
padding: 28px;
|
||||
border-right: 1px solid var(--border);
|
||||
}
|
||||
.modal-right {
|
||||
padding: 28px;
|
||||
background: var(--code-bg);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
.modal-close {
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
right: 16px;
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--dim);
|
||||
font-size: 24px;
|
||||
cursor: pointer;
|
||||
z-index: 101;
|
||||
}
|
||||
/* Steps */
|
||||
.steps {display:flex;flex-direction:column;gap:12px}
|
||||
.step {display:flex;gap:14px;padding:14px;background:#0d1117;border:1px solid var(--border);border-radius:8px;align-items:flex-start}
|
||||
.step .n {width:28px;height:28px;border-radius:50%;background:var(--accent);color:#0d1117;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;flex-shrink:0}
|
||||
.step .b {flex:1}
|
||||
.step .b .t {font-size:13px;font-weight:600;margin-bottom:2px}
|
||||
.step .b .d {font-size:12px;color:var(--dim);line-height:1.5}
|
||||
|
||||
/* Input inside modal */
|
||||
.input-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }
|
||||
select, input, textarea {
|
||||
padding: 10px 14px;
|
||||
background: var(--code-bg);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 6px;
|
||||
color: var(--text);
|
||||
font-size: 13px;
|
||||
outline: none;
|
||||
width: 100%;
|
||||
font-family: inherit;
|
||||
}
|
||||
select:focus, input:focus, textarea:focus { border-color: var(--accent); }
|
||||
textarea { min-height: 80px; resize: vertical; line-height: 1.7; }
|
||||
/* Footer */
|
||||
.footer {text-align:center;padding:32px;font-size:12px;color:var(--dim);border-top:1px solid var(--border);letter-spacing:1px}
|
||||
|
||||
.preview-area {
|
||||
min-height: 200px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: rgba(13,17,23,0.5);
|
||||
border-radius: 8px;
|
||||
border: 1px dashed var(--border);
|
||||
width: 100%;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.preview-img { max-width: 100%; max-height: 400px; border-radius: 4px; display: block; }
|
||||
|
||||
.intent-item {
|
||||
display: flex; gap: 10px; padding: 10px;
|
||||
background: var(--code-bg); border: 1px solid var(--border);
|
||||
border-radius: 6px; margin-bottom: 6px; font-size: 12px;
|
||||
}
|
||||
.intent-item.user { border-left: 2px solid var(--green); }
|
||||
.intent-item.system { border-left: 2px solid var(--accent); }
|
||||
.intent-who { font-size: 10px; letter-spacing: 1px; margin-bottom: 2px; }
|
||||
.intent-item.user .intent-who { color: var(--green); }
|
||||
.intent-item.system .intent-who { color: var(--accent); }
|
||||
.intent-step { font-weight: 600; margin-bottom: 2px; }
|
||||
.intent-detail { color: var(--dim); line-height: 1.4; }
|
||||
|
||||
.design-id-badge {
|
||||
text-align: center; padding: 12px;
|
||||
background: rgba(63,185,80,0.06);
|
||||
border: 1px solid rgba(63,185,80,0.15);
|
||||
border-radius: 8px; margin-bottom: 10px;
|
||||
}
|
||||
.design-id-badge .id { font-size: 16px; font-weight: 700; color: var(--green); font-family: monospace; margin-top: 4px; }
|
||||
|
||||
.btn {
|
||||
display: block; width: 100%; padding: 11px;
|
||||
background: linear-gradient(135deg, rgba(88,166,255,0.2), rgba(130,100,200,0.15));
|
||||
border: 1px solid var(--border); border-radius: 6px;
|
||||
color: var(--accent); text-align: center; text-decoration: none;
|
||||
font-size: 13px; font-weight: 600; cursor: pointer; margin-top: 6px;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
.btn:hover { border-color: var(--accent); }
|
||||
.btn.primary { background: #238636; color: #fff; border-color: #238636; }
|
||||
.btn.primary:hover { background: #2ea043; }
|
||||
|
||||
.copy-toast {
|
||||
position: fixed;
|
||||
bottom: 30px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
background: var(--green);
|
||||
color: #0d1117;
|
||||
padding: 10px 24px;
|
||||
border-radius: 20px;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
z-index: 200;
|
||||
display: none;
|
||||
}
|
||||
.copy-toast.show { display: block; animation: fadeInOut 2s ease; }
|
||||
@keyframes fadeInOut {
|
||||
0% { opacity: 0; transform: translateX(-50%) translateY(10px); }
|
||||
20% { opacity: 1; transform: translateX(-50%) translateY(0); }
|
||||
80% { opacity: 1; }
|
||||
100% { opacity: 0; }
|
||||
}
|
||||
/* Toast */
|
||||
.toast {position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--green);color:#0d1117;padding:10px 20px;border-radius:20px;font-size:13px;font-weight:600;display:none;z-index:999}
|
||||
.toast.show {display:block;animation:toastAnim 2s ease}
|
||||
@keyframes toastAnim{0%{opacity:0;transform:translateX(-50%) translateY(8px)}20%{opacity:1;transform:translateX(-50%) translateY(0)}80%{opacity:1}100%{opacity:0}}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- 仓库头 -->
|
||||
<div class="repo-bar">
|
||||
<span class="icon">📦</span>
|
||||
<span class="path">bingshuo / open-modules</span>
|
||||
<span class="branch">main</span>
|
||||
<span class="badge free">✅ 开源免费</span>
|
||||
<span class="badge api">🔌 API Ready</span>
|
||||
<span style="font-size:12px;color:var(--dim);margin-left:auto">模块热插拔 · 用你自己的AI进来读取</span>
|
||||
<header class="repo-hdr">
|
||||
<div class="breadcrumb">
|
||||
<a href="https://guanghulab.com">guanghulab</a> /
|
||||
<a href="https://guanghulab.com/code/bingshuo">bingshuo</a> /
|
||||
<strong>open-modules</strong>
|
||||
</div>
|
||||
<h1>
|
||||
📦 open-modules
|
||||
<span class="badge">public</span>
|
||||
</h1>
|
||||
<p class="desc">冰朔个人开源模块仓库。每个模块有唯一编号。用你自己的编程AI软件连入，Agent引导后调用模块。仓库不提供模型API。</p>
|
||||
</header>
|
||||
|
||||
<div class="tabs">
|
||||
<div class="tab active" onclick="switchTab(this,'modules')">
|
||||
<span>📦</span> 模块
|
||||
<span class="count">1</span>
|
||||
</div>
|
||||
<div class="tab" onclick="switchTab(this,'guide')">
|
||||
<span>📖</span> 接入指南
|
||||
</div>
|
||||
<div class="tab" onclick="switchTab(this,'files')">
|
||||
<span>📁</span> 文件
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 主布局 -->
|
||||
<div class="layout">
|
||||
|
||||
<!-- 左侧文件树 -->
|
||||
|
||||
<!-- Sidebar -->
|
||||
<div class="sidebar">
|
||||
<div class="sect">仓库文件</div>
|
||||
<div class="file-item"><span class="fi">📄</span> README.md</div>
|
||||
<div class="file-item"><span class="fi">📄</span> package.json</div>
|
||||
<div class="file-item"><span class="fi">📄</span> server.js</div>
|
||||
<div class="file-item"><span class="fi">📄</span> generate.js</div>
|
||||
<div class="file-item"><span class="fi">📄</span> renderer.js</div>
|
||||
<div class="sect">templates/</div>
|
||||
<div class="file-item"><span class="fi">📄</span> registry.js</div>
|
||||
<div class="file-item"><span class="fi">📄</span> xiaohongshu.js</div>
|
||||
<div class="sect">public/</div>
|
||||
<div class="file-item"><span class="fi">📄</span> index.html</div>
|
||||
<div class="sect">模块注册表</div>
|
||||
<div class="file-item active"><span class="fi">📦</span> MODULE-COVER-001</div>
|
||||
<div class="sect">仓库根目录</div>
|
||||
<div class="file"><span class="fi">📄</span> README.md</div>
|
||||
<div class="file"><span class="fi">📄</span> WELCOME.md</div>
|
||||
<div class="sect">agent/</div>
|
||||
<div class="file"><span class="fi">📄</span> HLDP-PROTOCOL.md</div>
|
||||
<div class="file"><span class="fi">📄</span> module-registry.json</div>
|
||||
<div class="sect">modules/</div>
|
||||
<div class="file"><span class="fi">📦</span> MODULE-COVER-001</div>
|
||||
<div class="file" style="color:var(--dim);opacity:0.5"><span class="fi">📦</span> MODULE-XXX-002</div>
|
||||
<div class="sect">image-studio/</div>
|
||||
<div class="file"><span class="fi">📄</span> server.js</div>
|
||||
<div class="file"><span class="fi">📄</span> generate.js</div>
|
||||
<div class="file"><span class="fi">📄</span> renderer.js</div>
|
||||
</div>
|
||||
|
||||
<!-- 右侧内容 -->
|
||||
<!-- Content -->
|
||||
<div class="content">
|
||||
|
||||
<h2 style="font-size:20px;margin-bottom:4px;">开放模块</h2>
|
||||
<p style="font-size:13px;color:var(--dim);margin-bottom:24px;">
|
||||
每个模块有唯一编号。用你自己的编程 AI 软件连入此仓库，Agent 引导后即可直接调用。
|
||||
仓库不提供模型 API —— 走你 AI 软件自己的模型。
|
||||
</p>
|
||||
|
||||
<!-- 模块卡片 1：图片生成 -->
|
||||
<div class="module-card">
|
||||
<div class="module-header" onclick="toggleModule(this)">
|
||||
<div class="left">
|
||||
<span class="icon">🎨</span>
|
||||
<div class="info">
|
||||
<h3>图片模块 · 语言驱动封面生成器</h3>
|
||||
<div class="mod-id">MODULE-COVER-001</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display:flex;align-items:center;gap:12px;">
|
||||
|
||||
<!-- Modules Panel -->
|
||||
<div id="panel-modules">
|
||||
<div class="module-grid">
|
||||
|
||||
<!-- Module Card: COVER-001 -->
|
||||
<div class="module-card" onclick="showDetail('cover')">
|
||||
<div class="icon">🎨</div>
|
||||
<div class="name">图片模块</div>
|
||||
<div class="modid">MODULE-COVER-001</div>
|
||||
<div class="tags">
|
||||
<span class="tag">📕 小红书</span>
|
||||
<span class="tag">1080×1440</span>
|
||||
<span class="tag green">active</span>
|
||||
<span class="tag">MIT</span>
|
||||
</div>
|
||||
<span class="arrow">▶</span>
|
||||
</div>
|
||||
|
||||
<!-- Placeholder for future modules -->
|
||||
<div class="module-card" style="opacity:0.35;cursor:not-allowed">
|
||||
<div class="icon">📋</div>
|
||||
<div class="name">即将上线</div>
|
||||
<div class="modid">MODULE-XXX-002</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="module-body">
|
||||
|
||||
<!-- Module Detail -->
|
||||
<div class="module-detail" id="detail-cover">
|
||||
<h2>🎨 图片模块 · 语言驱动封面生成器</h2>
|
||||
<div class="meta">
|
||||
<span>MODULE-COVER-001</span>
|
||||
<span>MIT License</span>
|
||||
<span>Puppeteer + Express</span>
|
||||
</div>
|
||||
<p class="desc">
|
||||
输入自然语言描述，系统翻译为设计逻辑，生成独一无二的封面图片。
|
||||
纯 HTML/CSS 排版渲染，<strong>不依赖任何 AI 绘画模型</strong>，无需 GPU，无需 API 密钥。
|
||||
封面底部带有此仓库域名水印。
|
||||
纯 HTML/CSS 排版渲染，不依赖任何 AI 绘画模型。<br><br>
|
||||
<strong style="color:var(--text)">封面底部带有此仓库域名水印。设计编号唯一，证明归属。</strong>
|
||||
</p>
|
||||
|
||||
<div class="section-title">技术栈 · 全免费</div>
|
||||
<div class="code-block"><span class="cmt">// 全部开源 · 全部免费 · 不花一分钱</span>
|
||||
<span class="key">渲染引擎</span>: Puppeteer + Chrome Headless
|
||||
<span class="key">Web框架</span>: Express.js
|
||||
<span class="key">排版引擎</span>: 纯 HTML/CSS（不调用任何 AI 模型）
|
||||
<span class="key">意图分析</span>: 自研文本分析引擎
|
||||
<div class="section">
|
||||
<h3>技术栈 · 全免费</h3>
|
||||
<div class="code-block">
|
||||
<span class="c">// 全部开源 · 全部免费 · 不花一分钱</span>
|
||||
<span class="k">渲染</span> Puppeteer + Chrome Headless <span class="c">免费</span>
|
||||
<span class="k">Web</span> Express.js <span class="c">免费</span>
|
||||
<span class="k">排版</span> 纯 HTML/CSS（不调用AI模型） <span class="c">免费</span>
|
||||
<span class="k">分析</span> 自研文本分析引擎 <span class="c">免费</span>
|
||||
|
||||
<span class="cmt">// 不需要 GPU · 不需要 API 密钥 · 不需要付费模型</span></div>
|
||||
<span class="c">// 不需要 GPU · 不需要 API 密钥</span></div>
|
||||
</div>
|
||||
|
||||
<div class="section-title">如何让 AI 调用</div>
|
||||
<div class="code-block"><span class="cmt">// 1. 用你的编程 AI 软件连入此仓库</span>
|
||||
<span class="cmt">// 仓库地址：guanghulab.com/code/bingshuo/guanghulab</span>
|
||||
<span class="cmt">// 2. Agent 引导你走完唤醒路径</span>
|
||||
<span class="cmt">// 3. 告诉 AI：调用模块 MODULE-COVER-001</span>
|
||||
<span class="cmt">// 4. AI 读取模块代码，理解参数，直接执行</span>
|
||||
<span class="cmt">// 5. 左边生成你的设计逻辑链 + 唯一编号</span>
|
||||
<span class="cmt">// 6. 右边预览 + 下载</span>
|
||||
|
||||
<span class="cmt">// API 端点（AI 或手动调用）</span>
|
||||
<span class="key">GET</span> <span class="str">/api/templates</span> → 获取模板列表
|
||||
<span class="key">POST</span> <span class="str">/api/generate</span> → 生成封面
|
||||
|
||||
<span class="cmt">// 参数</span>
|
||||
{ "templateId": "<span class="str">xiaohongshu</span>",
|
||||
"presetId": "<span class="str">tech</span>",
|
||||
"title": "<span class="str">标题</span>",
|
||||
"body": "<span class="str">正文</span>",
|
||||
"layout": "<span class="str">hero</span>" }</div>
|
||||
|
||||
<a href="#" class="use-btn" onclick="openTry(event)">🚀 在线使用</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 更多模块占位 -->
|
||||
<div class="module-card" style="opacity:0.5;cursor:not-allowed">
|
||||
<div class="module-header">
|
||||
<div class="left">
|
||||
<span class="icon">📋</span>
|
||||
<div class="info">
|
||||
<h3>更多模块即将上线</h3>
|
||||
<div class="mod-id">MODULE-XXX-00X</div>
|
||||
<div class="section">
|
||||
<h3>AI 如何调用此模块</h3>
|
||||
<div class="steps">
|
||||
<div class="step">
|
||||
<div class="n">0</div>
|
||||
<div class="b">
|
||||
<div class="t">确认环境</div>
|
||||
<div class="d">你的 AI 已连接到此仓库，可读取文件，可发送 HTTP 请求</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="step">
|
||||
<div class="n">1</div>
|
||||
<div class="b">
|
||||
<div class="t">读取 WELCOME.md</div>
|
||||
<div class="d">仓库入口文件，包含完整的唤醒协议和规则</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="step">
|
||||
<div class="n">2</div>
|
||||
<div class="b">
|
||||
<div class="t">装载 HLDP 协议</div>
|
||||
<div class="d">读取 agent/HLDP-PROTOCOL.md，理解模块编号格式</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="step">
|
||||
<div class="n">3</div>
|
||||
<div class="b">
|
||||
<div class="t">读取模块注册表</div>
|
||||
<div class="d">读取 agent/module-registry.json，获取所有可用模块</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="step">
|
||||
<div class="n">4</div>
|
||||
<div class="b">
|
||||
<div class="t">调用模块</div>
|
||||
<div class="d">POST guanghulab.com/cover/api/generate 传入参数，获取生成结果</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span style="font-size:12px;color:var(--dim)">热插拔 · 随时部署</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="section">
|
||||
<h3>API 参考</h3>
|
||||
<div class="code-block">
|
||||
<span class="c">// 获取模板列表</span>
|
||||
<span class="k">GET</span> <span class="s">https://guanghulab.com/cover/api/templates</span>
|
||||
|
||||
<!-- 在线使用模态 -->
|
||||
<div class="modal-overlay" id="modal">
|
||||
<div class="modal" style="position:relative;">
|
||||
<button class="modal-close" onclick="closeModal()">✕</button>
|
||||
<span class="c">// 生成封面</span>
|
||||
<span class="k">POST</span> <span class="s">https://guanghulab.com/cover/api/generate</span>
|
||||
Body: {
|
||||
<span class="s">"templateId"</span>: <span class="s">"xiaohongshu"</span>,
|
||||
<span class="s">"presetId"</span>: <span class="s">"tech"</span>,
|
||||
<span class="s">"title"</span>: <span class="s">"标题"</span>,
|
||||
<span class="s">"body"</span>: <span class="s">"正文"</span>,
|
||||
<span class="s">"layout"</span>: <span class="s">"hero"</span>
|
||||
}
|
||||
|
||||
<div class="modal-left">
|
||||
<h3 style="font-size:16px;margin-bottom:16px;">🎨 图片模块 · 在线使用</h3>
|
||||
|
||||
<div class="input-row">
|
||||
<select id="preset"><option value="tech" selected>🔷 科技蓝</option><option value="warm">🟠 奶油暖调</option><option value="minimal">⬜ 极简黑白</option><option value="rose">🟣 玫瑰粉调</option><option value="green">🟢 文艺绿植</option></select>
|
||||
<select id="layout"><option value="default">标准排版</option><option value="hero" selected>大标题封面</option><option value="quote">金句居中</option></select>
|
||||
</div>
|
||||
<input type="text" id="title" placeholder="标题" style="margin-bottom:10px;">
|
||||
<textarea id="body" placeholder="正文..."></textarea>
|
||||
<button class="btn primary" id="genBtn" onclick="gen()">执行设计逻辑</button>
|
||||
<div style="display:none;padding:10px;background:rgba(255,100,100,0.08);border:1px solid rgba(255,100,100,0.2);border-radius:6px;color:#ff7b72;font-size:12px;margin-top:10px" id="err"></div>
|
||||
|
||||
<div class="design-id-badge" id="idBadge" style="display:none;margin-top:16px;">
|
||||
<span style="font-size:10px;color:var(--dim);">DESIGN ID · 证明这个设计是你的</span>
|
||||
<div class="id">---</div>
|
||||
<span style="font-size:10px;color:var(--dim);">编号已保存到本地 · 署名可选</span>
|
||||
</div>
|
||||
|
||||
<div style="margin-top:16px;">
|
||||
<div style="font-size:12px;color:var(--dim);margin-bottom:10px;letter-spacing:1px;">意图链 · 设计逻辑</div>
|
||||
<div id="chain"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal-right">
|
||||
<div style="font-size:12px;color:var(--dim);margin-bottom:10px;letter-spacing:1px;">封面预览</div>
|
||||
<div class="preview-area" id="previewArea">
|
||||
<div style="text-align:center;color:var(--dim);" id="empty">
|
||||
<div style="font-size:36px;margin-bottom:8px;opacity:0.3;">🎨</div>
|
||||
<div style="font-size:12px;">点击执行<br>生成封面</div>
|
||||
<span class="c">// 返回</span>
|
||||
{ <span class="s">"url"</span>: <span class="s">"/output/xxx.png"</span>,
|
||||
<span class="s">"intent_chain"</span>: [ <span class="c">/* 7步推理 */</span> ] }</div>
|
||||
</div>
|
||||
<img class="preview-img" id="previewImg" style="display:none;" alt="封面">
|
||||
</div>
|
||||
<a class="btn primary" id="dlBtn" href="#" download style="display:none;">💾 下载 PNG</a>
|
||||
<button class="btn" id="saveBtn" onclick="saveId()" style="display:none;">📋 保存设计编号到本地</button>
|
||||
<div style="font-size:11px;color:var(--dim);margin-top:8px;text-align:center;">
|
||||
封面带 cover.guanghulab.com 水印<br>
|
||||
署名可选 · 设计属于你
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Guide Panel -->
|
||||
<div id="panel-guide" style="display:none">
|
||||
<div style="background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:28px">
|
||||
<h2 style="font-size:18px;margin-bottom:16px">📖 AI 接入指南</h2>
|
||||
|
||||
<p style="font-size:13px;color:var(--dim);line-height:1.8;margin-bottom:24px">
|
||||
本仓库设计为<strong style="color:var(--text)">任何编程AI都可接入</strong>。
|
||||
仓库不提供模型API——你使用你自己的AI软件模型能力。
|
||||
以下是完整的接入流程。
|
||||
</p>
|
||||
|
||||
<div class="steps">
|
||||
<div class="step">
|
||||
<div class="n">1</div>
|
||||
<div class="b">
|
||||
<div class="t">连接仓库</div>
|
||||
<div class="d">将仓库地址 guanghulab.com/code/bingshuo/guanghulab 配置到你的AI工具中</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="step">
|
||||
<div class="n">2</div>
|
||||
<div class="b">
|
||||
<div class="t">AI读取 WELCOME.md</div>
|
||||
<div class="d">AI进入仓库后，第一步读取此文件。它包含唤醒协议和规则。</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="step">
|
||||
<div class="n">3</div>
|
||||
<div class="b">
|
||||
<div class="t">AI装载 HLDP 协议</div>
|
||||
<div class="d">读取 agent/HLDP-PROTOCOL.md。理解模块编号、母语格式。</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="step">
|
||||
<div class="n">4</div>
|
||||
<div class="b">
|
||||
<div class="t">AI读取模块注册表</div>
|
||||
<div class="d">读取 agent/module-registry.json。获取可用模块列表和API。</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="step">
|
||||
<div class="n">5</div>
|
||||
<div class="b">
|
||||
<div class="t">调用模块</div>
|
||||
<div class="d">AI按模块编号和API文档调用。生成结果返回给用户。</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="margin-top:24px;padding:16px;background:#0d1117;border:1px solid var(--border);border-radius:8px">
|
||||
<div style="font-size:12px;color:var(--dim);margin-bottom:8px;letter-spacing:1px">📋 规则摘要</div>
|
||||
<div style="font-size:12px;color:var(--dim);line-height:2">
|
||||
✦ 仓库不提供模型API<br>
|
||||
✦ 模块热插拔，新增零改动核心<br>
|
||||
✦ HLDP协议是通用接口<br>
|
||||
✦ 设计编号唯一可追溯<br>
|
||||
✦ 署名可选<br>
|
||||
✦ 全免费 · MIT协议
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Files Panel -->
|
||||
<div id="panel-files" style="display:none">
|
||||
<div style="background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:24px">
|
||||
<div class="code-block" style="white-space:pre;line-height:2">
|
||||
<span style="color:var(--dim)">📁 open-modules/</span>
|
||||
<span style="color:var(--dim)">├── 📄</span> README.md <span style="color:#636e7b">仓库说明</span>
|
||||
<span style="color:var(--dim)">├── 📄</span> WELCOME.md <span style="color:#636e7b">AI 入口引导 · 唤醒协议</span>
|
||||
<span style="color:var(--dim)">├── 📁</span> agent/
|
||||
<span style="color:var(--dim)">│ ├── 📄</span> HLDP-PROTOCOL.md <span style="color:#636e7b">光湖语言协议</span>
|
||||
<span style="color:var(--dim)">│ └── 📄</span> module-registry.json <span style="color:#636e7b">模块注册表</span>
|
||||
<span style="color:var(--dim)">├── 📁</span> modules/
|
||||
<span style="color:var(--dim)">│ └── 📦</span> MODULE-COVER-001 <span style="color:#636e7b">图片模块（已上线）</span>
|
||||
<span style="color:var(--dim)">└── 📁</span> image-studio/
|
||||
<span style="color:var(--dim)"> ├── 📄</span> server.js <span style="color:#636e7b">Express 服务</span>
|
||||
<span style="color:var(--dim)"> ├── 📄</span> generate.js <span style="color:#636e7b">生成引擎</span>
|
||||
<span style="color:var(--dim)"> ├── 📄</span> renderer.js <span style="color:#636e7b">Puppeteer 渲染</span>
|
||||
<span style="color:var(--dim)"> └── 📁</span> templates/ <span style="color:#636e7b">模板目录</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Toast -->
|
||||
<div class="copy-toast" id="toast"></div>
|
||||
<footer class="footer">
|
||||
guanghulab.com/code/bingshuo/open-modules · 冰朔 TCS-0002∞ · 铸渊 ICE-GL-ZY001 · 国作登字-2026-A-00037559
|
||||
</footer>
|
||||
|
||||
<div class="toast" id="toast"></div>
|
||||
|
||||
<script>
|
||||
function toggleModule(el) {
|
||||
const body = el.nextElementSibling;
|
||||
const arrow = el.querySelector('.arrow');
|
||||
body.classList.toggle('open');
|
||||
arrow.classList.toggle('open');
|
||||
function switchTab(el, panel) {
|
||||
document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
|
||||
el.classList.add('active');
|
||||
document.getElementById('panel-modules').style.display = panel === 'modules' ? 'block' : 'none';
|
||||
document.getElementById('panel-guide').style.display = panel === 'guide' ? 'block' : 'none';
|
||||
document.getElementById('panel-files').style.display = panel === 'files' ? 'block' : 'none';
|
||||
// Hide module detail when switching tabs
|
||||
document.querySelectorAll('.module-detail').forEach(d => d.classList.remove('show'));
|
||||
}
|
||||
|
||||
function openTry(e) {
|
||||
e.preventDefault();
|
||||
document.getElementById('modal').classList.add('show');
|
||||
// 预设内容（不显示任何编程AI名字）
|
||||
if(!document.getElementById('title').value) {
|
||||
document.getElementById('title').value = '零基础手搓AI做图小系统';
|
||||
document.getElementById('body').value = 'AI辅助 + 自己手搓 · 0经验也能开发\n\n- 开源到个人代码仓库\n- 全免费 · 无需GPU\n- 语言驱动排版 · 意图透明\n- 封面也用它自己生成';
|
||||
}
|
||||
function showDetail(id) {
|
||||
const el = document.getElementById('detail-' + id);
|
||||
const isOpen = el.classList.contains('show');
|
||||
document.querySelectorAll('.module-detail').forEach(d => d.classList.remove('show'));
|
||||
if (!isOpen) el.classList.add('show');
|
||||
}
|
||||
|
||||
function closeModal() {
|
||||
document.getElementById('modal').classList.remove('show');
|
||||
document.getElementById('previewImg').style.display = 'none';
|
||||
document.getElementById('empty').style.display = 'block';
|
||||
document.getElementById('dlBtn').style.display = 'none';
|
||||
document.getElementById('saveBtn').style.display = 'none';
|
||||
document.getElementById('idBadge').style.display = 'none';
|
||||
document.getElementById('chain').innerHTML = '';
|
||||
document.getElementById('err').style.display = 'none';
|
||||
}
|
||||
|
||||
let currentId = '';
|
||||
const SAVED_KEY = 'cover-studio-ids';
|
||||
|
||||
async function gen() {
|
||||
const title = document.getElementById('title').value.trim();
|
||||
const body = document.getElementById('body').value.trim();
|
||||
if(!title && !body) { showErr('请输入标题或正文'); return; }
|
||||
|
||||
document.getElementById('err').style.display = 'none';
|
||||
document.getElementById('empty').style.display = 'none';
|
||||
document.getElementById('previewImg').style.display = 'none';
|
||||
document.getElementById('dlBtn').style.display = 'none';
|
||||
document.getElementById('saveBtn').style.display = 'none';
|
||||
document.getElementById('idBadge').style.display = 'none';
|
||||
document.getElementById('chain').innerHTML = '';
|
||||
document.getElementById('genBtn').disabled = true;
|
||||
document.getElementById('genBtn').textContent = '编译中...';
|
||||
|
||||
currentId = 'DSG-' + Date.now().toString(36).toUpperCase().slice(-8);
|
||||
|
||||
try {
|
||||
const r = await fetch('/api/generate', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
templateId: 'xiaohongshu',
|
||||
presetId: document.getElementById('preset').value,
|
||||
title, body,
|
||||
layout: document.getElementById('layout').value
|
||||
})
|
||||
});
|
||||
if(!r.ok) throw new Error('生成失败');
|
||||
const d = await r.json();
|
||||
|
||||
document.getElementById('previewImg').src = d.url;
|
||||
document.getElementById('previewImg').style.display = 'block';
|
||||
document.getElementById('dlBtn').href = d.url;
|
||||
document.getElementById('dlBtn').style.display = 'block';
|
||||
document.getElementById('saveBtn').style.display = 'block';
|
||||
document.getElementById('idBadge').style.display = 'block';
|
||||
document.getElementById('idBadge').querySelector('.id').textContent = currentId;
|
||||
|
||||
// 意图链
|
||||
if(d.intent_chain) {
|
||||
document.getElementById('chain').innerHTML = d.intent_chain.map(s =>
|
||||
'<div class="intent-item '+(s.who==='用户'?'user':'system')+'">'+
|
||||
'<div style="font-size:14px;flex-shrink:0;">'+s.icon+'</div>'+
|
||||
'<div>'+
|
||||
'<div class="intent-who">'+s.who+'</div>'+
|
||||
'<div class="intent-step">'+s.step+'</div>'+
|
||||
'<div class="intent-detail">'+s.detail+'</div>'+
|
||||
'</div></div>'
|
||||
).join('');
|
||||
}
|
||||
|
||||
// 自动保存到本地
|
||||
saveToLocal();
|
||||
|
||||
} catch(e) {
|
||||
document.getElementById('empty').style.display = 'block';
|
||||
showErr(e.message);
|
||||
} finally {
|
||||
document.getElementById('genBtn').disabled = false;
|
||||
document.getElementById('genBtn').textContent = '执行设计逻辑';
|
||||
}
|
||||
}
|
||||
|
||||
function saveToLocal() {
|
||||
const saved = JSON.parse(localStorage.getItem(SAVED_KEY) || '[]');
|
||||
saved.push({
|
||||
id: currentId,
|
||||
title: document.getElementById('title').value,
|
||||
time: new Date().toISOString(),
|
||||
});
|
||||
localStorage.setItem(SAVED_KEY, JSON.stringify(saved.slice(-50)));
|
||||
}
|
||||
|
||||
function saveId() {
|
||||
toast('✅ 设计编号 ' + currentId + ' 已保存到本地');
|
||||
}
|
||||
|
||||
function showErr(m) {
|
||||
const e = document.getElementById('err');
|
||||
e.textContent = m;
|
||||
e.style.display = 'block';
|
||||
setTimeout(() => e.style.display = 'none', 4000);
|
||||
}
|
||||
|
||||
function toast(m) {
|
||||
const t = document.getElementById('toast');
|
||||
t.textContent = m;
|
||||
t.classList.add('show');
|
||||
setTimeout(() => t.classList.remove('show'), 2000);
|
||||
}
|
||||
|
||||
document.addEventListener('keydown', e => {
|
||||
if((e.metaKey || e.ctrlKey) && e.key === 'Enter' && document.getElementById('modal').classList.contains('show')) gen();
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
@ -3,521 +3,398 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>MODULE: cover-studio — 语言驱动封面生成器</title>
|
||||
<title>bingshuo / open-modules · 冰朔开源模块仓库</title>
|
||||
<style>
|
||||
:root {
|
||||
--bg: #0a0e1a;
|
||||
--panel: rgba(17,22,42,0.85);
|
||||
--border: rgba(110,160,230,0.18);
|
||||
--border-h: rgba(150,200,255,0.4);
|
||||
--text: rgba(195,215,255,0.88);
|
||||
--dim: rgba(155,195,235,0.5);
|
||||
--accent: rgba(100,160,220,0.9);
|
||||
--green: rgba(140,220,180,0.9);
|
||||
--gold: rgba(220,200,140,0.9);
|
||||
--code-bg: rgba(10,14,26,0.7);
|
||||
--bg: #0d1117;
|
||||
--surface: #161b22;
|
||||
--border: #30363d;
|
||||
--border-h: #58a6ff;
|
||||
--text: #c9d1d9;
|
||||
--dim: #8b949e;
|
||||
--accent: #58a6ff;
|
||||
--green: #3fb950;
|
||||
--gold: #d2991d;
|
||||
}
|
||||
*{margin:0;padding:0;box-sizing:border-box}
|
||||
body{background:var(--bg);color:var(--text);font-family:-apple-system,'PingFang SC','Microsoft YaHei',sans-serif;min-height:100vh;line-height:1.65}
|
||||
body{background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','PingFang SC','Microsoft YaHei',sans-serif;min-height:100vh;font-size:14px;line-height:1.6}
|
||||
|
||||
/* Repo Header — 代码仓库风格 */
|
||||
.repo-header {
|
||||
border-bottom: 1px solid var(--border);
|
||||
padding: 28px 32px 20px;
|
||||
background: rgba(12,18,36,0.6);
|
||||
}
|
||||
.repo-header .module-id {
|
||||
font-size: 14px;
|
||||
color: var(--dim);
|
||||
font-family: 'SF Mono','Fira Code',monospace;
|
||||
letter-spacing: 1px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.repo-header .module-id span {
|
||||
color: var(--green);
|
||||
}
|
||||
.repo-header h1 {
|
||||
font-size: 26px;
|
||||
font-weight: 700;
|
||||
background: linear-gradient(90deg, #3b82f6, #60a5fa);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
margin-bottom: 8px;
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
.repo-header .desc {
|
||||
font-size: 14px;
|
||||
color: var(--dim);
|
||||
}
|
||||
.repo-header .meta {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
margin-top: 12px;
|
||||
font-size: 12px;
|
||||
color: var(--dim);
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.repo-header .meta span {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
/* Repo Header */
|
||||
.repo-hdr {
|
||||
background:var(--surface);
|
||||
border-bottom:1px solid var(--border);
|
||||
padding:20px 28px;
|
||||
}
|
||||
.repo-hdr .breadcrumb {font-size:13px;color:var(--dim);margin-bottom:8px}
|
||||
.repo-hdr .breadcrumb a {color:var(--accent);text-decoration:none}
|
||||
.repo-hdr .breadcrumb a:hover {text-decoration:underline}
|
||||
.repo-hdr h1 {font-size:22px;font-weight:600;margin-bottom:6px;display:flex;align-items:center;gap:10px}
|
||||
.repo-hdr h1 .badge {display:inline-block;padding:2px 8px;border:1px solid var(--border);border-radius:12px;font-size:11px;font-weight:400;color:var(--dim)}
|
||||
.repo-hdr .desc {font-size:13px;color:var(--dim);max-width:700px}
|
||||
|
||||
/* Tab Bar */
|
||||
.tab-bar {
|
||||
display: flex;
|
||||
gap: 0;
|
||||
border-bottom: 1px solid var(--border);
|
||||
padding: 0 32px;
|
||||
background: rgba(12,18,36,0.3);
|
||||
}
|
||||
.tab {
|
||||
padding: 12px 20px;
|
||||
font-size: 13px;
|
||||
color: var(--dim);
|
||||
cursor: pointer;
|
||||
border-bottom: 2px solid transparent;
|
||||
transition: all 0.2s;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
.tab:hover { color: var(--text); }
|
||||
.tab.active { color: var(--accent); border-bottom-color: var(--accent); }
|
||||
.tabs {display:flex;border-bottom:1px solid var(--border);padding:0 28px;background:var(--surface);overflow-x:auto}
|
||||
.tab {padding:11px 18px;font-size:13px;color:var(--dim);cursor:pointer;border-bottom:2px solid transparent;white-space:nowrap;transition:all 0.15s;display:flex;align-items:center;gap:6px}
|
||||
.tab:hover {color:var(--text)}
|
||||
.tab.active {color:var(--text);border-bottom-color:var(--accent)}
|
||||
.tab .count {background:rgba(88,166,255,0.1);padding:1px 7px;border-radius:10px;font-size:11px}
|
||||
|
||||
/* Layout */
|
||||
.layout {display:grid;grid-template-columns:220px 1fr;min-height:calc(100vh - 140px)}
|
||||
@media(max-width:800px){.layout{grid-template-columns:1fr}}
|
||||
|
||||
/* Sidebar File Tree */
|
||||
.sidebar {background:var(--surface);border-right:1px solid var(--border);padding:12px 0;position:sticky;top:0;max-height:calc(100vh - 140px);overflow-y:auto}
|
||||
.sidebar .sect {padding:6px 18px;font-size:11px;color:var(--dim);font-weight:600;letter-spacing:1px;text-transform:uppercase}
|
||||
.sidebar .file {padding:5px 18px 5px 28px;font-size:12px;color:var(--dim);cursor:pointer;display:flex;align-items:center;gap:7px;transition:all 0.1s}
|
||||
.sidebar .file:hover {color:var(--text);background:rgba(88,166,255,0.04)}
|
||||
.sidebar .file .fi {font-size:13px;width:16px;text-align:center;flex-shrink:0}
|
||||
|
||||
/* Content */
|
||||
.content { max-width: 1100px; margin: 0 auto; padding: 28px 24px 60px; }
|
||||
.content {padding:28px}
|
||||
|
||||
.tab-panel { display: none; }
|
||||
.tab-panel.active { display: block; }
|
||||
|
||||
/* Card */
|
||||
.card {
|
||||
background: var(--panel);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 16px;
|
||||
padding: 24px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.card:hover { border-color: var(--border-h); }
|
||||
.card-title {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 2px;
|
||||
color: var(--dim);
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 14px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
.card-title::before {
|
||||
content: '';
|
||||
width: 4px;
|
||||
height: 14px;
|
||||
background: var(--accent);
|
||||
border-radius: 2px;
|
||||
/* Module Grid - Square Cards */
|
||||
.module-grid {display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px;margin-bottom:32px}
|
||||
.module-card {
|
||||
background:var(--surface);
|
||||
border:1px solid var(--border);
|
||||
border-radius:12px;
|
||||
padding:24px 20px;
|
||||
cursor:pointer;
|
||||
transition:all 0.2s;
|
||||
display:flex;
|
||||
flex-direction:column;
|
||||
align-items:center;
|
||||
text-align:center;
|
||||
aspect-ratio:1;
|
||||
position:relative;
|
||||
}
|
||||
.module-card:hover {border-color:var(--border-h);transform:translateY(-2px);box-shadow:0 8px 24px rgba(88,166,255,0.08)}
|
||||
.module-card .icon {font-size:40px;margin-bottom:12px}
|
||||
.module-card .name {font-size:15px;font-weight:600;margin-bottom:6px}
|
||||
.module-card .modid {font-size:11px;color:var(--dim);font-family:monospace;margin-bottom:8px}
|
||||
.module-card .tags {display:flex;gap:5px;flex-wrap:wrap;justify-content:center}
|
||||
.module-card .tag {padding:2px 8px;border:1px solid var(--border);border-radius:8px;font-size:10px;color:var(--dim)}
|
||||
.module-card .tag.green {border-color:var(--green);color:var(--green)}
|
||||
|
||||
/* Code */
|
||||
.code {
|
||||
background: var(--code-bg);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 10px;
|
||||
padding: 16px 20px;
|
||||
font-family: 'SF Mono','Fira Code','Consolas',monospace;
|
||||
font-size: 13px;
|
||||
line-height: 1.7;
|
||||
overflow-x: auto;
|
||||
white-space: pre-wrap;
|
||||
color: var(--text);
|
||||
/* Module Detail Panel */
|
||||
.module-detail {
|
||||
display:none;
|
||||
background:var(--surface);
|
||||
border:1px solid var(--border);
|
||||
border-radius:12px;
|
||||
padding:28px;
|
||||
margin-top:16px;
|
||||
animation:fadeIn 0.2s ease;
|
||||
}
|
||||
.code .c { color: #636e7b; }
|
||||
.code .k { color: #8b5cf6; }
|
||||
.code .s { color: #10b981; }
|
||||
.code .n { color: #f59e0b; }
|
||||
.code .f { color: #3b82f6; }
|
||||
.module-detail.show {display:block}
|
||||
@keyframes fadeIn {from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
|
||||
|
||||
/* Use Tab — 两栏 */
|
||||
.use-layout {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 380px;
|
||||
gap: 24px;
|
||||
.module-detail h2 {font-size:18px;margin-bottom:12px}
|
||||
.module-detail .meta {display:flex;gap:12px;flex-wrap:wrap;margin-bottom:16px}
|
||||
.module-detail .meta span{font-size:12px;color:var(--dim);border:1px solid var(--border);padding:4px 10px;border-radius:8px}
|
||||
.module-detail .desc {font-size:13px;color:var(--dim);line-height:1.8;margin-bottom:20px}
|
||||
.module-detail .section {margin-bottom:20px}
|
||||
.module-detail .section h3 {font-size:13px;font-weight:600;margin-bottom:8px;color:var(--dim);text-transform:uppercase;letter-spacing:1px}
|
||||
.module-detail .code-block {
|
||||
background:#0d1117;border:1px solid var(--border);border-radius:8px;
|
||||
padding:14px 18px;font-family:'SF Mono','Fira Code',monospace;
|
||||
font-size:12px;line-height:1.7;color:var(--text);overflow-x:auto;white-space:pre-wrap
|
||||
}
|
||||
@media (max-width: 860px) { .use-layout { grid-template-columns: 1fr; } }
|
||||
.code-block .c {color:#636e7b}
|
||||
.code-block .s {color:#a5d6ff}
|
||||
.code-block .k {color:#ff7b72}
|
||||
|
||||
/* Input */
|
||||
.input-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }
|
||||
select, input, textarea {
|
||||
padding: 11px 14px;
|
||||
background: var(--code-bg);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 10px;
|
||||
color: var(--text);
|
||||
font-size: 13px;
|
||||
outline: none;
|
||||
width: 100%;
|
||||
font-family: inherit;
|
||||
}
|
||||
select:focus, input:focus, textarea:focus { border-color: var(--accent); }
|
||||
textarea { min-height: 90px; resize: vertical; line-height: 1.8; }
|
||||
/* Steps */
|
||||
.steps {display:flex;flex-direction:column;gap:12px}
|
||||
.step {display:flex;gap:14px;padding:14px;background:#0d1117;border:1px solid var(--border);border-radius:8px;align-items:flex-start}
|
||||
.step .n {width:28px;height:28px;border-radius:50%;background:var(--accent);color:#0d1117;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;flex-shrink:0}
|
||||
.step .b {flex:1}
|
||||
.step .b .t {font-size:13px;font-weight:600;margin-bottom:2px}
|
||||
.step .b .d {font-size:12px;color:var(--dim);line-height:1.5}
|
||||
|
||||
.gen-btn {
|
||||
width: 100%;
|
||||
padding: 13px;
|
||||
background: linear-gradient(135deg,rgba(100,160,220,0.3),rgba(130,100,200,0.2));
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 10px;
|
||||
color: var(--accent);
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
letter-spacing: 2px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
.gen-btn:hover { border-color: var(--border-h); background: linear-gradient(135deg,rgba(100,160,220,0.5),rgba(130,100,200,0.35)); }
|
||||
.gen-btn:disabled { opacity: 0.5; cursor: not-allowed; }
|
||||
/* Footer */
|
||||
.footer {text-align:center;padding:32px;font-size:12px;color:var(--dim);border-top:1px solid var(--border);letter-spacing:1px}
|
||||
|
||||
/* Preview (右边) */
|
||||
.preview-box { position: sticky; top: 20px; }
|
||||
.preview-area {
|
||||
min-height: 260px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: rgba(10,14,26,0.5);
|
||||
border-radius: 10px;
|
||||
border: 1px dashed var(--border);
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
.empty-hint { text-align: center; color: var(--dim); }
|
||||
.empty-hint .icon { font-size: 40px; margin-bottom: 10px; opacity: 0.25; }
|
||||
.empty-hint p { font-size: 13px; line-height: 2; }
|
||||
|
||||
.preview-wrap { position: relative; display: none; }
|
||||
.preview-wrap.show { display: block; }
|
||||
.preview-img { max-width: 100%; border-radius: 6px; display: block; }
|
||||
.id-wm {
|
||||
position: absolute; bottom: 10px; right: 10px;
|
||||
background: rgba(0,0,0,0.7); padding: 5px 10px;
|
||||
border-radius: 14px; font-size: 10px; font-family: monospace;
|
||||
color: var(--accent); border: 1px solid rgba(100,160,220,0.3);
|
||||
}
|
||||
|
||||
.dl-btn, .copy-btn {
|
||||
display: block; width: 100%; padding: 12px;
|
||||
background: linear-gradient(135deg,rgba(100,160,220,0.3),rgba(130,100,200,0.2));
|
||||
border: 1px solid var(--border); border-radius: 10px;
|
||||
color: var(--accent); text-align: center; text-decoration: none;
|
||||
font-size: 13px; font-weight: 600; letter-spacing: 1px; cursor: pointer;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.dl-btn:hover, .copy-btn:hover { border-color: var(--border-h); }
|
||||
|
||||
/* Intent chain in README tab */
|
||||
.intent-item {
|
||||
display: flex; gap: 12px; padding: 14px;
|
||||
background: rgba(10,14,26,0.4); border: 1px solid var(--border);
|
||||
border-radius: 10px; margin-bottom: 10px;
|
||||
}
|
||||
.intent-item.user { border-left: 3px solid var(--green); }
|
||||
.intent-item.system { border-left: 3px solid var(--accent); }
|
||||
.intent-icon { font-size: 16px; flex-shrink: 0; }
|
||||
.intent-who { font-size: 10px; letter-spacing: 1.5px; margin-bottom: 3px; }
|
||||
.intent-item.user .intent-who { color: var(--green); }
|
||||
.intent-item.system .intent-who { color: var(--accent); }
|
||||
.intent-step { font-size: 13px; font-weight: 600; margin-bottom: 3px; }
|
||||
.intent-detail { font-size: 12px; color: var(--dim); line-height: 1.5; }
|
||||
.intent-why { font-size: 11px; color: rgba(155,195,235,0.3); margin-top: 4px; }
|
||||
|
||||
.design-id-card {
|
||||
text-align: center; padding: 16px;
|
||||
background: rgba(140,220,180,0.05);
|
||||
border: 1px solid rgba(140,220,180,0.12);
|
||||
border-radius: 10px; margin-bottom: 14px;
|
||||
}
|
||||
.design-id-card .label { font-size: 10px; color: var(--dim); letter-spacing: 2px; }
|
||||
.design-id-card .value { font-size: 18px; font-weight: 700; color: var(--green); font-family: monospace; }
|
||||
|
||||
.loading { display: none; text-align: center; padding: 40px; }
|
||||
.loading.show { display: block; }
|
||||
|
||||
.error { display: none; padding: 10px; background: rgba(255,100,100,0.08); border: 1px solid rgba(255,100,100,0.2); border-radius: 10px; color: rgba(255,140,140,0.9); font-size: 12px; margin-top: 10px; }
|
||||
.error.show { display: block; }
|
||||
|
||||
/* Badges */
|
||||
.badge-row { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0; }
|
||||
.badge {
|
||||
padding: 4px 12px; border-radius: 12px; font-size: 11px;
|
||||
border: 1px solid var(--border);
|
||||
display: flex; align-items: center; gap: 4px;
|
||||
}
|
||||
.badge.api { border-color: var(--accent); color: var(--accent); background: rgba(100,160,220,0.08); }
|
||||
.badge.free { border-color: var(--green); color: var(--green); background: rgba(140,220,180,0.08); }
|
||||
.badge.mcp { border-color: var(--gold); color: var(--gold); background: rgba(220,200,140,0.08); }
|
||||
|
||||
footer {
|
||||
text-align: center; padding: 40px 20px; font-size: 12px;
|
||||
color: var(--dim); letter-spacing: 1px;
|
||||
}
|
||||
/* Toast */
|
||||
.toast {position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--green);color:#0d1117;padding:10px 20px;border-radius:20px;font-size:13px;font-weight:600;display:none;z-index:999}
|
||||
.toast.show {display:block;animation:toastAnim 2s ease}
|
||||
@keyframes toastAnim{0%{opacity:0;transform:translateX(-50%) translateY(8px)}20%{opacity:1;transform:translateX(-50%) translateY(0)}80%{opacity:1}100%{opacity:0}}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- ── 代码仓库头 ── -->
|
||||
<div class="repo-header">
|
||||
<div class="module-id">📦 <span>MODULE-COVER-STUDIO</span> / v2.1 / guanghulab.com</div>
|
||||
<h1>封面工作室 · 语言驱动封面生成器</h1>
|
||||
<p class="desc">输入自然语言，系统翻译为设计逻辑，生成独一无二的封面。代码仓库公开，AI 可读模块直接调用。</p>
|
||||
<div class="badge-row">
|
||||
<span class="badge api">🔌 REST API</span>
|
||||
<span class="badge free">✅ 开源免费</span>
|
||||
<span class="badge mcp">🤖 MCP Ready</span>
|
||||
<span class="badge" style="color:var(--dim)">📕 小红书 1080×1440</span>
|
||||
<span class="badge" style="color:var(--dim)">🖥️ 无需GPU</span>
|
||||
<header class="repo-hdr">
|
||||
<div class="breadcrumb">
|
||||
<a href="https://guanghulab.com">guanghulab</a> /
|
||||
<a href="https://guanghulab.com/code/bingshuo">bingshuo</a> /
|
||||
<strong>open-modules</strong>
|
||||
</div>
|
||||
<div class="meta">
|
||||
<span>📁 仓库: guanghulab.com/code/bingshuo/guanghulab</span>
|
||||
<span>📂 路径: image-studio/</span>
|
||||
<span>🔢 许可证: MIT</span>
|
||||
<h1>
|
||||
📦 open-modules
|
||||
<span class="badge">public</span>
|
||||
</h1>
|
||||
<p class="desc">冰朔个人开源模块仓库。每个模块有唯一编号。用你自己的编程AI软件连入，Agent引导后调用模块。仓库不提供模型API。</p>
|
||||
</header>
|
||||
|
||||
<div class="tabs">
|
||||
<div class="tab active" onclick="switchTab(this,'modules')">
|
||||
<span>📦</span> 模块
|
||||
<span class="count">1</span>
|
||||
</div>
|
||||
<div class="tab" onclick="switchTab(this,'guide')">
|
||||
<span>📖</span> 接入指南
|
||||
</div>
|
||||
<div class="tab" onclick="switchTab(this,'files')">
|
||||
<span>📁</span> 文件
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ── Tab 栏 ── -->
|
||||
<div class="tab-bar">
|
||||
<div class="tab active" onclick="switchTab('readme')">📄 README</div>
|
||||
<div class="tab" onclick="switchTab('api')">🔌 API · 文档</div>
|
||||
<div class="tab" onclick="switchTab('try')">🎨 在线使用</div>
|
||||
</div>
|
||||
<div class="layout">
|
||||
|
||||
<!-- Sidebar -->
|
||||
<div class="sidebar">
|
||||
<div class="sect">仓库根目录</div>
|
||||
<div class="file"><span class="fi">📄</span> README.md</div>
|
||||
<div class="file"><span class="fi">📄</span> WELCOME.md</div>
|
||||
<div class="sect">agent/</div>
|
||||
<div class="file"><span class="fi">📄</span> HLDP-PROTOCOL.md</div>
|
||||
<div class="file"><span class="fi">📄</span> module-registry.json</div>
|
||||
<div class="sect">modules/</div>
|
||||
<div class="file"><span class="fi">📦</span> MODULE-COVER-001</div>
|
||||
<div class="file" style="color:var(--dim);opacity:0.5"><span class="fi">📦</span> MODULE-XXX-002</div>
|
||||
<div class="sect">image-studio/</div>
|
||||
<div class="file"><span class="fi">📄</span> server.js</div>
|
||||
<div class="file"><span class="fi">📄</span> generate.js</div>
|
||||
<div class="file"><span class="fi">📄</span> renderer.js</div>
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
<!-- Content -->
|
||||
<div class="content">
|
||||
|
||||
<!-- Modules Panel -->
|
||||
<div id="panel-modules">
|
||||
<div class="module-grid">
|
||||
|
||||
<!-- Module Card: COVER-001 -->
|
||||
<div class="module-card" onclick="showDetail('cover')">
|
||||
<div class="icon">🎨</div>
|
||||
<div class="name">图片模块</div>
|
||||
<div class="modid">MODULE-COVER-001</div>
|
||||
<div class="tags">
|
||||
<span class="tag green">active</span>
|
||||
<span class="tag">MIT</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ── README Tab ── -->
|
||||
<div class="tab-panel active" id="panel-readme">
|
||||
<div class="card">
|
||||
<div class="card-title">模块说明</div>
|
||||
<p style="font-size:14px;line-height:2;color:var(--dim)">
|
||||
这是一个<strong style="color:var(--text)">纯 HTML/CSS 排版渲染</strong>的封面生成工具。不依赖任何 AI 绘画模型，不需要 GPU，不需要 API 密钥。
|
||||
系统接收用户的自然语言描述，分析内容类型和情绪，自动推荐配色和布局，然后通过 Puppeteer + Chrome 渲染为高清 PNG。
|
||||
</p>
|
||||
<p style="font-size:14px;line-height:2;color:var(--dim);margin-top:12px">
|
||||
<strong style="color:var(--text)">核心能力：</strong>
|
||||
语言驱动排版设计 · 意图链可追溯 · 编号唯一归属验证 · 开源免费可部署
|
||||
</p>
|
||||
</div>
|
||||
<!-- Placeholder for future modules -->
|
||||
<div class="module-card" style="opacity:0.35;cursor:not-allowed">
|
||||
<div class="icon">📋</div>
|
||||
<div class="name">即将上线</div>
|
||||
<div class="modid">MODULE-XXX-002</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-title">快速开始 · 部署到你自己的服务器</div>
|
||||
<div class="code">
|
||||
<span class="c"># 克隆仓库</span>
|
||||
git clone https://guanghulab.com/code/bingshuo/guanghulab.git
|
||||
cd guanghulab/image-studio
|
||||
</div>
|
||||
|
||||
<span class="c"># 安装依赖（需要 Node.js 18+）</span>
|
||||
npm install
|
||||
<!-- Module Detail -->
|
||||
<div class="module-detail" id="detail-cover">
|
||||
<h2>🎨 图片模块 · 语言驱动封面生成器</h2>
|
||||
<div class="meta">
|
||||
<span>MODULE-COVER-001</span>
|
||||
<span>MIT License</span>
|
||||
<span>Puppeteer + Express</span>
|
||||
</div>
|
||||
<p class="desc">
|
||||
输入自然语言描述，系统翻译为设计逻辑，生成独一无二的封面图片。
|
||||
纯 HTML/CSS 排版渲染，不依赖任何 AI 绘画模型。<br><br>
|
||||
<strong style="color:var(--text)">封面底部带有此仓库域名水印。设计编号唯一，证明归属。</strong>
|
||||
</p>
|
||||
|
||||
<span class="c"># 启动服务</span>
|
||||
node server.js
|
||||
<div class="section">
|
||||
<h3>技术栈 · 全免费</h3>
|
||||
<div class="code-block">
|
||||
<span class="c">// 全部开源 · 全部免费 · 不花一分钱</span>
|
||||
<span class="k">渲染</span> Puppeteer + Chrome Headless <span class="c">免费</span>
|
||||
<span class="k">Web</span> Express.js <span class="c">免费</span>
|
||||
<span class="k">排版</span> 纯 HTML/CSS（不调用AI模型） <span class="c">免费</span>
|
||||
<span class="k">分析</span> 自研文本分析引擎 <span class="c">免费</span>
|
||||
|
||||
<span class="c"># 打开浏览器 → http://localhost:3912</span></div>
|
||||
</div>
|
||||
<span class="c">// 不需要 GPU · 不需要 API 密钥</span></div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-title">技术栈 · 全免费开源</div>
|
||||
<div class="code">
|
||||
<span class="c">// 全部开源、全部免费</span>
|
||||
<div class="section">
|
||||
<h3>AI 如何调用此模块</h3>
|
||||
<div class="steps">
|
||||
<div class="step">
|
||||
<div class="n">0</div>
|
||||
<div class="b">
|
||||
<div class="t">确认环境</div>
|
||||
<div class="d">你的 AI 已连接到此仓库，可读取文件，可发送 HTTP 请求</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="step">
|
||||
<div class="n">1</div>
|
||||
<div class="b">
|
||||
<div class="t">读取 WELCOME.md</div>
|
||||
<div class="d">仓库入口文件，包含完整的唤醒协议和规则</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="step">
|
||||
<div class="n">2</div>
|
||||
<div class="b">
|
||||
<div class="t">装载 HLDP 协议</div>
|
||||
<div class="d">读取 agent/HLDP-PROTOCOL.md，理解模块编号格式</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="step">
|
||||
<div class="n">3</div>
|
||||
<div class="b">
|
||||
<div class="t">读取模块注册表</div>
|
||||
<div class="d">读取 agent/module-registry.json，获取所有可用模块</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="step">
|
||||
<div class="n">4</div>
|
||||
<div class="b">
|
||||
<div class="t">调用模块</div>
|
||||
<div class="d">POST guanghulab.com/cover/api/generate 传入参数，获取生成结果</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<span class="k">渲染引擎</span>: Puppeteer + Chrome Headless <span class="c">// 免费</span>
|
||||
<span class="k">Web 框架</span>: Express.js <span class="c">// 免费</span>
|
||||
<span class="k">排版引擎</span>: 纯 HTML/CSS（不调用任何 AI 模型） <span class="c">// 免费</span>
|
||||
<span class="k">意图分析</span>: 自研文本分析引擎 <span class="c">// 免费</span>
|
||||
<span class="k">配色推荐</span>: 5 种预设风格 + 动态匹配 <span class="c">// 免费</span>
|
||||
|
||||
<span class="c">// 不需要的东西：</span>
|
||||
<span class="c">// × 不需要 GPU</span>
|
||||
<span class="c">// × 不需要 API 密钥</span>
|
||||
<span class="c">// × 不需要付费模型</span>
|
||||
<span class="c">// × 不需要任何第三方付费服务</span></div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-title">API 接入 · 让你的 AI 直接调用</div>
|
||||
<p style="font-size:13px;color:var(--dim);margin-bottom:12px">任何编程 AI（Claude、Cursor、Windsurf 等）通过 MCP 工具或 HTTP 请求直接调用此模块：</p>
|
||||
<div class="code">
|
||||
<span class="c">// 获取可用模板</span>
|
||||
GET <span class="s">https://guanghulab.com/cover/api/templates</span>
|
||||
<div class="section">
|
||||
<h3>API 参考</h3>
|
||||
<div class="code-block">
|
||||
<span class="c">// 获取模板列表</span>
|
||||
<span class="k">GET</span> <span class="s">https://guanghulab.com/cover/api/templates</span>
|
||||
|
||||
<span class="c">// 生成封面</span>
|
||||
POST <span class="s">https://guanghulab.com/cover/api/generate</span>
|
||||
Content-Type: application/json
|
||||
|
||||
{
|
||||
<span class="k">POST</span> <span class="s">https://guanghulab.com/cover/api/generate</span>
|
||||
Body: {
|
||||
<span class="s">"templateId"</span>: <span class="s">"xiaohongshu"</span>,
|
||||
<span class="s">"presetId"</span>: <span class="s">"tech"</span>,
|
||||
<span class="s">"title"</span>: <span class="s">"零基础手搓AI做图小系统"</span>,
|
||||
<span class="s">"body"</span>: <span class="s">"AI辅助 + 自己手搓 · 0经验也能开发"</span>,
|
||||
<span class="s">"title"</span>: <span class="s">"标题"</span>,
|
||||
<span class="s">"body"</span>: <span class="s">"正文"</span>,
|
||||
<span class="s">"layout"</span>: <span class="s">"hero"</span>
|
||||
}
|
||||
|
||||
<span class="c">// 响应</span>
|
||||
{
|
||||
<span class="s">"success"</span>: true,
|
||||
<span class="s">"url"</span>: <span class="s">"/output/cover_xxx.png"</span>,
|
||||
<span class="s">"intent_chain"</span>: [<span class="c">/* 7 步意图推理 */</span>]
|
||||
}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ── API Tab ── -->
|
||||
<div class="tab-panel" id="panel-api">
|
||||
<div class="card">
|
||||
<div class="card-title">GET /api/templates</div>
|
||||
<p style="font-size:13px;color:var(--dim);margin-bottom:10px">返回所有可用模板列表</p>
|
||||
<div class="code"><span class="c">// 响应</span>
|
||||
[
|
||||
{
|
||||
"id": <span class="s">"xiaohongshu"</span>,
|
||||
"name": <span class="s">"小红书封面"</span>,
|
||||
"sizes": { "width": 1080, "height": 1440 },
|
||||
"presets": [
|
||||
{ "id": <span class="s">"tech"</span>, "name": <span class="s">"科技蓝"</span> },
|
||||
{ "id": <span class="s">"warm"</span>, "name": <span class="s">"奶油暖调"</span> },
|
||||
<span class="c">// ...</span>
|
||||
]
|
||||
}
|
||||
]</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-title">POST /api/generate</div>
|
||||
<p style="font-size:13px;color:var(--dim);margin-bottom:10px">生成封面图片，返回图片 URL + 意图链</p>
|
||||
<div class="code"><span class="c">// 参数</span>
|
||||
{
|
||||
<span class="s">"templateId"</span>: <span class="s">"xiaohongshu"</span>, <span class="c">// 模板 ID（必填）</span>
|
||||
<span class="s">"presetId"</span>: <span class="s">"tech"</span>, <span class="c">// 预设风格（默认第一个）</span>
|
||||
<span class="s">"title"</span>: <span class="s">"标题"</span>, <span class="c">// 封面标题</span>
|
||||
<span class="s">"body"</span>: <span class="s">"正文"</span>, <span class="c">// 封面正文（支持 Markdown）</span>
|
||||
<span class="s">"layout"</span>: <span class="s">"hero"</span>, <span class="c">// default | hero | quote</span>
|
||||
<span class="s">"tag"</span>: <span class="s">"教程"</span> <span class="c">// 可选标签</span>
|
||||
}
|
||||
|
||||
<span class="c">// 响应</span>
|
||||
{
|
||||
<span class="s">"success"</span>: true,
|
||||
<span class="s">"url"</span>: <span class="s">"/output/cover_xxx.png"</span>,
|
||||
<span class="s">"filename"</span>: <span class="s">"cover_xxx.png"</span>,
|
||||
<span class="s">"templateName"</span>: <span class="s">"小红书封面"</span>,
|
||||
<span class="s">"presetId"</span>: <span class="s">"tech"</span>,
|
||||
<span class="s">"layout"</span>: <span class="s">"hero"</span>,
|
||||
<span class="s">"intent_chain"</span>: [
|
||||
{ <span class="s">"icon"</span>: <span class="s">"💬"</span>, <span class="s">"step"</span>: <span class="s">"你说"</span>, <span class="s">"who"</span>: <span class="s">"用户"</span>, <span class="s">"detail"</span>: <span class="s">"..."</span>, <span class="s">"why"</span>: <span class="s">"..."</span> },
|
||||
<span class="c">// ... 7 步意图推理</span>
|
||||
]
|
||||
}</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-title">MCP 接入说明</div>
|
||||
<p style="font-size:13px;color:var(--dim);margin-bottom:12px">在编程 AI 的 MCP 配置中添加此 HTTP 端点，AI 即可直接调用：</p>
|
||||
<div class="code">{
|
||||
<span class="s">"mcpServers"</span>: {
|
||||
<span class="s">"cover-studio"</span>: {
|
||||
<span class="s">"type"</span>: <span class="s">"http"</span>,
|
||||
<span class="s">"url"</span>: <span class="s">"https://guanghulab.com/cover/api/generate"</span>,
|
||||
<span class="s">"description"</span>: <span class="s">"语言驱动封面生成器"</span>
|
||||
}
|
||||
}
|
||||
}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ── 在线使用 Tab ── -->
|
||||
<div class="tab-panel" id="panel-try">
|
||||
<div class="use-layout">
|
||||
<div>
|
||||
<div class="card">
|
||||
<div class="card-title">输入内容</div>
|
||||
<div class="input-row">
|
||||
<select id="preset"><option value="tech" selected>🔷 科技蓝</option><option value="warm">🟠 奶油暖调</option><option value="minimal">⬜ 极简黑白</option><option value="rose">🟣 玫瑰粉调</option><option value="green">🟢 文艺绿植</option></select>
|
||||
<select id="layout"><option value="default">标准排版</option><option value="hero" selected>大标题封面</option><option value="quote">金句居中</option></select>
|
||||
</div>
|
||||
<input type="text" id="title" placeholder="标题" style="margin-bottom:10px;">
|
||||
<textarea id="body" placeholder="正文..."></textarea>
|
||||
<button class="gen-btn" id="btn" onclick="gen()">执行设计逻辑</button>
|
||||
<div class="error" id="err"></div>
|
||||
</div>
|
||||
|
||||
<div class="design-id-card" id="idCard" style="display:none;">
|
||||
<div class="label">DESIGN ID</div>
|
||||
<div class="value" id="designId">---</div>
|
||||
</div>
|
||||
|
||||
<div class="card" id="chainCard" style="display:none;">
|
||||
<div class="card-title">意图链 · 设计逻辑</div>
|
||||
<div id="chainList"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="preview-box">
|
||||
<div class="card">
|
||||
<div class="card-title">封面预览</div>
|
||||
<div class="preview-area" id="previewArea">
|
||||
<div class="empty-hint" id="empty"><div class="icon">🎨</div><p>点击执行<br>生成封面</p></div>
|
||||
<div class="loading" id="loading"><p style="color:var(--dim);font-size:12px;">编译中...</p></div>
|
||||
<div class="preview-wrap" id="previewWrap"><img class="preview-img" id="previewImg" alt="封面"><div class="id-wm" id="watermark">---</div></div>
|
||||
</div>
|
||||
<a class="dl-btn" id="dlBtn" href="#" download style="display:none;">下载封面 PNG</a>
|
||||
<button class="copy-btn" id="copyBtn" onclick="copyId()" style="display:none;">复制设计编号</button>
|
||||
<span class="c">// 返回</span>
|
||||
{ <span class="s">"url"</span>: <span class="s">"/output/xxx.png"</span>,
|
||||
<span class="s">"intent_chain"</span>: [ <span class="c">/* 7步推理 */</span> ] }</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Guide Panel -->
|
||||
<div id="panel-guide" style="display:none">
|
||||
<div style="background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:28px">
|
||||
<h2 style="font-size:18px;margin-bottom:16px">📖 AI 接入指南</h2>
|
||||
|
||||
<p style="font-size:13px;color:var(--dim);line-height:1.8;margin-bottom:24px">
|
||||
本仓库设计为<strong style="color:var(--text)">任何编程AI都可接入</strong>。
|
||||
仓库不提供模型API——你使用你自己的AI软件模型能力。
|
||||
以下是完整的接入流程。
|
||||
</p>
|
||||
|
||||
<div class="steps">
|
||||
<div class="step">
|
||||
<div class="n">1</div>
|
||||
<div class="b">
|
||||
<div class="t">连接仓库</div>
|
||||
<div class="d">将仓库地址 guanghulab.com/code/bingshuo/guanghulab 配置到你的AI工具中</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="step">
|
||||
<div class="n">2</div>
|
||||
<div class="b">
|
||||
<div class="t">AI读取 WELCOME.md</div>
|
||||
<div class="d">AI进入仓库后，第一步读取此文件。它包含唤醒协议和规则。</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="step">
|
||||
<div class="n">3</div>
|
||||
<div class="b">
|
||||
<div class="t">AI装载 HLDP 协议</div>
|
||||
<div class="d">读取 agent/HLDP-PROTOCOL.md。理解模块编号、母语格式。</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="step">
|
||||
<div class="n">4</div>
|
||||
<div class="b">
|
||||
<div class="t">AI读取模块注册表</div>
|
||||
<div class="d">读取 agent/module-registry.json。获取可用模块列表和API。</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="step">
|
||||
<div class="n">5</div>
|
||||
<div class="b">
|
||||
<div class="t">调用模块</div>
|
||||
<div class="d">AI按模块编号和API文档调用。生成结果返回给用户。</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="margin-top:24px;padding:16px;background:#0d1117;border:1px solid var(--border);border-radius:8px">
|
||||
<div style="font-size:12px;color:var(--dim);margin-bottom:8px;letter-spacing:1px">📋 规则摘要</div>
|
||||
<div style="font-size:12px;color:var(--dim);line-height:2">
|
||||
✦ 仓库不提供模型API<br>
|
||||
✦ 模块热插拔，新增零改动核心<br>
|
||||
✦ HLDP协议是通用接口<br>
|
||||
✦ 设计编号唯一可追溯<br>
|
||||
✦ 署名可选<br>
|
||||
✦ 全免费 · MIT协议
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Files Panel -->
|
||||
<div id="panel-files" style="display:none">
|
||||
<div style="background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:24px">
|
||||
<div class="code-block" style="white-space:pre;line-height:2">
|
||||
<span style="color:var(--dim)">📁 open-modules/</span>
|
||||
<span style="color:var(--dim)">├── 📄</span> README.md <span style="color:#636e7b">仓库说明</span>
|
||||
<span style="color:var(--dim)">├── 📄</span> WELCOME.md <span style="color:#636e7b">AI 入口引导 · 唤醒协议</span>
|
||||
<span style="color:var(--dim)">├── 📁</span> agent/
|
||||
<span style="color:var(--dim)">│ ├── 📄</span> HLDP-PROTOCOL.md <span style="color:#636e7b">光湖语言协议</span>
|
||||
<span style="color:var(--dim)">│ └── 📄</span> module-registry.json <span style="color:#636e7b">模块注册表</span>
|
||||
<span style="color:var(--dim)">├── 📁</span> modules/
|
||||
<span style="color:var(--dim)">│ └── 📦</span> MODULE-COVER-001 <span style="color:#636e7b">图片模块（已上线）</span>
|
||||
<span style="color:var(--dim)">└── 📁</span> image-studio/
|
||||
<span style="color:var(--dim)"> ├── 📄</span> server.js <span style="color:#636e7b">Express 服务</span>
|
||||
<span style="color:var(--dim)"> ├── 📄</span> generate.js <span style="color:#636e7b">生成引擎</span>
|
||||
<span style="color:var(--dim)"> ├── 📄</span> renderer.js <span style="color:#636e7b">Puppeteer 渲染</span>
|
||||
<span style="color:var(--dim)"> └── 📁</span> templates/ <span style="color:#636e7b">模板目录</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<footer>光湖语言世界 · 人格体的操作系统 · ICE-GL-ZY001 · 国作登字-2026-A-00037559</footer>
|
||||
<footer class="footer">
|
||||
guanghulab.com/code/bingshuo/open-modules · 冰朔 TCS-0002∞ · 铸渊 ICE-GL-ZY001 · 国作登字-2026-A-00037559
|
||||
</footer>
|
||||
|
||||
<div class="toast" id="toast"></div>
|
||||
|
||||
<script>
|
||||
function switchTab(t) {
|
||||
document.querySelectorAll('.tab').forEach(el => el.classList.remove('active'));
|
||||
document.querySelectorAll('.tab-panel').forEach(el => el.classList.remove('active'));
|
||||
event.target.classList.add('active');
|
||||
document.getElementById('panel-'+t).classList.add('active');
|
||||
function switchTab(el, panel) {
|
||||
document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
|
||||
el.classList.add('active');
|
||||
document.getElementById('panel-modules').style.display = panel === 'modules' ? 'block' : 'none';
|
||||
document.getElementById('panel-guide').style.display = panel === 'guide' ? 'block' : 'none';
|
||||
document.getElementById('panel-files').style.display = panel === 'files' ? 'block' : 'none';
|
||||
// Hide module detail when switching tabs
|
||||
document.querySelectorAll('.module-detail').forEach(d => d.classList.remove('show'));
|
||||
}
|
||||
|
||||
let currentId = '';
|
||||
async function gen() {
|
||||
const title = document.getElementById('title').value.trim();
|
||||
const body = document.getElementById('body').value.trim();
|
||||
if(!title&&!body){showErr('请输入标题或正文');return}
|
||||
document.getElementById('empty').style.display='none';
|
||||
document.getElementById('previewWrap').classList.remove('show');
|
||||
document.getElementById('dlBtn').style.display='none';
|
||||
document.getElementById('copyBtn').style.display='none';
|
||||
document.getElementById('idCard').style.display='none';
|
||||
document.getElementById('chainCard').style.display='none';
|
||||
document.getElementById('loading').classList.add('show');
|
||||
document.getElementById('btn').disabled=true;
|
||||
currentId='DSG-'+Date.now().toString(36).toUpperCase().slice(-8);
|
||||
try{
|
||||
const r=await fetch('/api/generate',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({templateId:'xiaohongshu',presetId:document.getElementById('preset').value,title,body,layout:document.getElementById('layout').value})});
|
||||
if(!r.ok)throw new Error('生成失败');
|
||||
const d=await r.json();
|
||||
document.getElementById('loading').classList.remove('show');
|
||||
document.getElementById('previewImg').src=d.url;
|
||||
document.getElementById('previewWrap').classList.add('show');
|
||||
document.getElementById('watermark').textContent=currentId;
|
||||
document.getElementById('dlBtn').href=d.url;
|
||||
document.getElementById('dlBtn').style.display='block';
|
||||
document.getElementById('copyBtn').style.display='block';
|
||||
document.getElementById('designId').textContent=currentId;
|
||||
document.getElementById('idCard').style.display='block';
|
||||
if(d.intent_chain){document.getElementById('chainCard').style.display='block';document.getElementById('chainList').innerHTML=d.intent_chain.map(s=>'<div class="intent-item '+(s.who==='用户'?'user':'system')+'"><div class="intent-icon">'+s.icon+'</div><div><div class="intent-who">'+s.who+'</div><div class="intent-step">'+s.step+'</div><div class="intent-detail">'+s.detail+'</div>'+(s.why?'<div class="intent-why">→ '+s.why+'</div>':'')+'</div></div>').join('')}
|
||||
}catch(e){document.getElementById('loading').classList.remove('show');document.getElementById('empty').style.display='block';showErr(e.message)}
|
||||
finally{document.getElementById('btn').disabled=false}
|
||||
function showDetail(id) {
|
||||
const el = document.getElementById('detail-' + id);
|
||||
const isOpen = el.classList.contains('show');
|
||||
document.querySelectorAll('.module-detail').forEach(d => d.classList.remove('show'));
|
||||
if (!isOpen) el.classList.add('show');
|
||||
}
|
||||
function showErr(m){const e=document.getElementById('err');e.textContent=m;e.classList.add('show');setTimeout(()=>e.classList.remove('show'),4000)}
|
||||
function copyId(){navigator.clipboard.writeText(currentId).then(()=>{const b=document.getElementById('copyBtn');b.textContent='已复制: '+currentId;setTimeout(()=>b.textContent='复制设计编号',2000)})}
|
||||
document.addEventListener('keydown',e=>{if((e.metaKey||e.ctrlKey)&&e.key==='Enter')gen()});
|
||||
(function(){document.getElementById('title').value='零基础手搓AI做图小系统';document.getElementById('body').value='AI辅助 + 自己手搓 · 0经验也能开发\n\n- 开源到个人代码仓库\n- 全免费 · 无需GPU · 无需服务器\n- 语言驱动排版 · 意图透明\n- 封面也用它自己生成\n- 访问 cover.guanghulab.com 试试'})();
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user