402 lines
18 KiB
HTML
402 lines
18 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>bingshuo / open-modules · 冰朔开源模块仓库</title>
|
||
<style>
|
||
:root {
|
||
--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,BlinkMacSystemFont,'Segoe UI','PingFang SC','Microsoft YaHei',sans-serif;min-height:100vh;font-size:14px;line-height:1.6}
|
||
|
||
/* 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 */
|
||
.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 {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(--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)}
|
||
|
||
/* 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-detail.show {display:block}
|
||
@keyframes fadeIn {from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
|
||
|
||
.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
|
||
}
|
||
.code-block .c {color:#636e7b}
|
||
.code-block .s {color:#a5d6ff}
|
||
.code-block .k {color:#ff7b72}
|
||
|
||
/* 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}
|
||
|
||
/* Footer */
|
||
.footer {text-align:center;padding:32px;font-size:12px;color:var(--dim);border-top:1px solid var(--border);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>
|
||
|
||
<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"><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">
|
||
|
||
<!-- 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>
|
||
|
||
<!-- 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>
|
||
|
||
<!-- 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>
|
||
|
||
<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">// 不需要 GPU · 不需要 API 密钥</span></div>
|
||
</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>
|
||
|
||
<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>
|
||
<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>
|
||
}
|
||
|
||
<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>
|
||
|
||
<!-- 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 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(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 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');
|
||
}
|
||
</script>
|
||
|
||
</body>
|
||
</html>
|