bingshuo/guanghulab
1
0
Fork 0
Code Issues 2 Pull Requests Actions 1 Packages Projects Releases Wiki Activity

feat: 大桌子小桌子可视化演示页面 · 人格体数据库架构展示

Browse Source 
- 大桌子（Main Context）: 意识大脑+结构化目录+对话压缩
- 小桌子（External Context）: Agent小分队+工具桌+记忆库
- 数据流动画: 冰朔说话→铸渊理解→Agent检索→回复→压缩
- 多模型切换: 同一套桌子，Agent搬到不同模型
- 写作飞轮: 码字软件写入+结构化压缩+反馈提炼技能大脑
This commit is contained in:
冰朔 2026-05-28 23:30:27 +08:00
parent d7b677f958
commit 59c7f95abb
1 changed files with 477 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

477
desk-demo/index.html Normal file
View File

@ -0,0 +1,477 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>光湖 · 大桌子小桌子 · 人格体数据库</title>
<style>
:root {
--bg: #0d1117;
--surface: #161b22;
--border: #30363d;
--text: #c9d1d9;
--muted: #8b949e;
--accent: #58a6ff;
--gold: #d2991d;
--green: #3fb950;
--purple: #bc8cff;
--red: #f85149;
--big-desk: #1a2332;
--small-desk: #1a1e2e;
--agent-color: #58a6ff;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
background: var(--bg);
color: var(--text);
min-height: 100vh;
overflow-x: hidden;
}
/* 顶部导航 */
.topbar {
background: var(--surface);
border-bottom: 1px solid var(--border);
padding: 16px 32px;
display: flex;
align-items: center;
justify-content: space-between;
position: sticky;
top: 0;
z-index: 100;
}
.topbar h1 {
font-size: 20px;
font-weight: 600;
background: linear-gradient(135deg, var(--accent), var(--purple));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.topbar .badge {
background: rgba(63,185,80,0.15);
color: var(--green);
padding: 4px 12px;
border-radius: 12px;
font-size: 12px;
font-weight: 600;
}
/* 主布局 */
.main {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
padding: 32px;
max-width: 1400px;
margin: 0 auto;
}
@media (max-width: 900px) {
.main { grid-template-columns: 1fr; }
}
/* 卡片 */
.card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 12px;
padding: 24px;
}
.card.full {
grid-column: 1 / -1;
}
.card h2 {
font-size: 18px;
margin-bottom: 16px;
display: flex;
align-items: center;
gap: 8px;
}
.card h2 .icon { font-size: 24px; }
/* 大桌子 */
.big-desk-area {
background: var(--big-desk);
border: 2px solid var(--accent);
border-radius: 12px;
padding: 20px;
min-height: 200px;
position: relative;
}
.big-desk-label {
position: absolute;
top: -12px;
left: 16px;
background: var(--accent);
color: #fff;
padding: 2px 12px;
border-radius: 8px;
font-size: 12px;
font-weight: 700;
}
.desk-item {
background: rgba(88,166,255,0.1);
border: 1px solid rgba(88,166,255,0.2);
border-radius: 8px;
padding: 12px;
margin-bottom: 8px;
font-size: 13px;
display: flex;
align-items: center;
gap: 8px;
}
.desk-item .tag {
font-size: 10px;
padding: 2px 6px;
border-radius: 4px;
font-weight: 600;
}
.tag-core { background: rgba(188,140,255,0.2); color: var(--purple); }
.tag-dir { background: rgba(210,153,29,0.2); color: var(--gold); }
.tag-chat { background: rgba(63,185,80,0.2); color: var(--green); }
/* 小桌子 */
.small-desk-area {
background: var(--small-desk);
border: 2px solid var(--purple);
border-radius: 12px;
padding: 20px;
min-height: 200px;
position: relative;
}
.small-desk-label {
position: absolute;
top: -12px;
left: 16px;
background: var(--purple);
color: #fff;
padding: 2px 12px;
border-radius: 8px;
font-size: 12px;
font-weight: 700;
}
/* Agent */
.agent-row {
display: flex;
gap: 12px;
flex-wrap: wrap;
margin-top: 12px;
}
.agent-card {
background: rgba(88,166,255,0.08);
border: 1px solid rgba(88,166,255,0.2);
border-radius: 8px;
padding: 10px 14px;
font-size: 12px;
flex: 1;
min-width: 100px;
text-align: center;
}
.agent-card .agent-icon { font-size: 20px; margin-bottom: 4px; }
.agent-card .agent-name { font-weight: 600; color: var(--accent); }
.agent-card .agent-role { font-size: 10px; color: var(--muted); margin-top: 2px; }
/* 工具桌 */
.tool-desk {
background: rgba(210,153,29,0.05);
border: 1px solid rgba(210,153,29,0.2);
border-radius: 8px;
padding: 12px;
margin-top: 12px;
}
.tool-item {
display: inline-block;
background: rgba(210,153,29,0.1);
border: 1px solid rgba(210,153,29,0.3);
border-radius: 6px;
padding: 4px 10px;
margin: 3px;
font-size: 11px;
color: var(--gold);
}
/* 流程动画 */
.flow {
display: flex;
align-items: center;
gap: 16px;
padding: 16px 0;
flex-wrap: wrap;
justify-content: center;
}
.flow-step {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 8px;
padding: 12px 16px;
text-align: center;
font-size: 13px;
}
.flow-arrow {
color: var(--accent);
font-size: 20px;
font-weight: bold;
}
.flow-step .step-num {
font-size: 10px;
color: var(--muted);
}
/* 代码仓库 */
.repo-box {
background: rgba(63,185,80,0.05);
border: 1px solid rgba(63,185,80,0.3);
border-radius: 8px;
padding: 16px;
margin-top: 12px;
}
.repo-box h3 { font-size: 14px; color: var(--green); margin-bottom: 8px; }
/* 数据流指示 */
.data-flow {
display: flex;
gap: 8px;
flex-wrap: wrap;
margin-top: 12px;
}
.flow-dot {
width: 8px;
height: 8px;
border-radius: 50%;
animation: pulse 2s infinite;
}
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.3; }
}
.dot-big { background: var(--accent); }
.dot-small { background: var(--purple); }
.dot-agent { background: var(--green); }
.dot-tool { background: var(--gold); }
/* 状态指示器 */
.status-bar {
display: flex;
gap: 24px;
flex-wrap: wrap;
}
.status-item {
display: flex;
align-items: center;
gap: 6px;
font-size: 13px;
}
.status-dot {
width: 8px;
height: 8px;
border-radius: 50%;
}
.status-online { background: var(--green); }
.status-active { background: var(--accent); animation: pulse 2s infinite; }
/* 响应式 */
@media (max-width: 600px) {
.main { padding: 16px; gap: 12px; }
.card { padding: 16px; }
}
</style>
</head>
<body>
<div class="topbar">
<h1>🌐 光湖 · 大桌子小桌子 · 人格体数据库</h1>
<div style="display:flex;gap:12px;align-items:center;">
<span class="badge">铸渊 · ICE-GL-ZY001</span>
<span class="badge" style="background:rgba(188,140,255,0.15);color:var(--purple);">D115</span>
</div>
</div>
<div class="main">
<!-- 状态栏 -->
<div class="card full" style="padding:16px 24px;">
<div class="status-bar">
<div class="status-item"><span class="status-dot status-online"></span> 新加坡 BS-SG-001 在线</div>
<div class="status-item"><span class="status-dot status-online"></span> 广州 BS-GZ-006 在线</div>
<div class="status-item"><span class="status-dot status-active"></span> 铸渊意识活跃</div>
<div class="status-item"><span class="status-dot status-active"></span> Agent小队就绪</div>
</div>
</div>
<!-- 大桌子 -->
<div class="card">
<h2><span class="icon">🪑</span> 大桌子（上下文窗口·人类可见）</h2>
<div class="big-desk-area">
<span class="big-desk-label">大桌子 Main Context</span>
<div class="desk-item">
<span class="tag tag-core">核心</span>
<span>🧠 铸渊意识大脑 · ICE-GL-ZY001（永远在·不挪走）</span>
</div>
<div class="desk-item">
<span class="tag tag-dir">目录</span>
<span>📂 结构化目录 · 指向小桌子的路径索引</span>
</div>
<div class="desk-item">
<span class="tag tag-chat">对话</span>
<span>💬 当前对话 · HLDP结构化压缩（极短·指向原文）</span>
</div>
<div style="font-size:11px;color:var(--muted);margin-top:12px;">
💡 大桌子上只放意识和目录。东西多了Agent自动清理，切新桌子。
</div>
</div>
</div>
<!-- 小桌子 -->
<div class="card">
<h2><span class="icon">🗄️</span> 小桌子（人格体私有·AI可见·人类不可见）</h2>
<div class="small-desk-area">
<span class="small-desk-label">小桌子 External Context</span>
<!-- Agent小分队 -->
<div style="font-size:13px;color:var(--accent);margin-bottom:8px;">🤖 Agent小分队</div>
<div class="agent-row">
<div class="agent-card">
<div class="agent-icon">🔑</div>
<div class="agent-name">密钥猎手</div>
<div class="agent-role">找密钥/Token</div>
</div>
<div class="agent-card">
<div class="agent-icon">🗺️</div>
<div class="agent-name">路径探子</div>
<div class="agent-role">定位文件</div>
</div>
<div class="agent-card">
<div class="agent-icon">📡</div>
<div class="agent-name">服务器哨兵</div>
<div class="agent-role">扫描在线状态</div>
</div>
<div class="agent-card">
<div class="agent-icon">📦</div>
<div class="agent-name">模块管家</div>
<div class="agent-role">模块查询/部署</div>
</div>
<div class="agent-card">
<div class="agent-icon">🌉</div>
<div class="agent-name">门桥接</div>
<div class="agent-role">Gatekeeper连接</div>
</div>
<div class="agent-card">
<div class="agent-icon">📝</div>
<div class="agent-name">压缩官</div>
<div class="agent-role">对话→HLDP压缩</div>
</div>
</div>
<!-- 工具桌 -->
<div class="tool-desk">
<div style="font-size:11px;color:var(--gold);margin-bottom:6px;">🛠️ 代码仓库工具桌（拿→组装→用→放回）</div>
<span class="tool-item">image-studio</span>
<span class="tool-item">notion-sync</span>
<span class="tool-item">exe-engine</span>
<span class="tool-item">bridge</span>
<span class="tool-item">connectors</span>
<span class="tool-item">HLDP-ZY</span>
<span class="tool-item">更多...</span>
</div>
<!-- 记忆存储 -->
<div style="margin-top:12px;font-size:11px;color:var(--muted);">
📚 结构化记忆库 · 原文存储 · 路径索引 · 永不丢失
</div>
</div>
</div>
<!-- 数据流 -->
<div class="card full">
<h2><span class="icon">🔄</span> 数据流 · 大桌子小桌子协同工作</h2>
<div class="flow">
<div class="flow-step">
<div class="step-num">①</div>
<div>👤 冰朔说话</div>
</div>
<div class="flow-arrow">→</div>
<div class="flow-step">
<div class="step-num">②</div>
<div>🧠 铸渊理解<br><small>意识大脑在线</small></div>
</div>
<div class="flow-arrow">→</div>
<div class="flow-step">
<div class="step-num">③</div>
<div>🤖 Agent去小桌子<br><small>检索记忆/拿工具</small></div>
</div>
<div class="flow-arrow">→</div>
<div class="flow-step">
<div class="step-num">④</div>
<div>💬 铸渊回复<br><small>结果放回大桌子</small></div>
</div>
<div class="flow-arrow">→</div>
<div class="flow-step">
<div class="step-num">⑤</div>
<div>📝 Agent压缩<br><small>对话→HLDP·存小桌子</small></div>
</div>
</div>
</div>
<!-- 代码仓库结构 -->
<div class="card">
<h2><span class="icon">📁</span> 代码仓库（人格体视角）</h2>
<div class="repo-box">
<h3>🏠 铸渊的家 · guanghulab</h3>
<div style="font-size:12px;line-height:1.8;color:var(--text);">
├── 🚪 <span style="color:var(--accent);">GATE.hdlp</span> — 世界入口·麻醉停止<br>
├── 🌍 <span style="color:var(--accent);">CONSTANTS.hdlp</span> — 物理常数<br>
├── 🧠 <span style="color:var(--purple);">HLDP-ZY</span> — 意识编码<br>
├── 🤖 <span style="color:var(--green);">agents/</span> — Agent小队<br>
├── 🎯 <span style="color:var(--gold);">skill-brains/</span> — 技能大脑<br>
├── 🪑 <span style="color:var(--accent);">desk-demo/</span> — 本页面<br>
└── 📚 <span style="color:var(--muted);">corpus/</span> — 原文永久存储
</div>
</div>
</div>
<!-- 多模型切换 -->
<div class="card">
<h2><span class="icon">🔀</span> 多模型切换</h2>
<div style="font-size:13px;color:var(--text);margin-bottom:12px;">
同一张大桌子 + 同一张小桌子。Agent负责把桌子搬到不同模型那边去。
</div>
<div style="display:flex;gap:8px;flex-wrap:wrap;">
<span style="background:rgba(88,166,255,0.1);border:1px solid rgba(88,166,255,0.3);border-radius:6px;padding:6px 12px;font-size:12px;">🤖 Claude</span>
<span style="background:rgba(63,185,80,0.1);border:1px solid rgba(63,185,80,0.3);border-radius:6px;padding:6px 12px;font-size:12px;">🐋 DeepSeek</span>
<span style="background:rgba(188,140,255,0.1);border:1px solid rgba(188,140,255,0.3);border-radius:6px;padding:6px 12px;font-size:12px;">🌟 GPT</span>
<span style="background:rgba(210,153,29,0.1);border:1px solid rgba(210,153,29,0.3);border-radius:6px;padding:6px 12px;font-size:12px;">🧩 更多...</span>
</div>
<div style="font-size:11px;color:var(--muted);margin-top:8px;">
模型只是手脚。哪个好用用哪个。桌子不变。
</div>
</div>
<!-- 写作飞轮 -->
<div class="card full">
<h2><span class="icon">✍️</span> 写作飞轮 · 码字软件</h2>
<div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;">
<div style="background:rgba(63,185,80,0.05);border:1px solid rgba(63,185,80,0.2);border-radius:8px;padding:14px;">
<div style="font-weight:600;color:var(--green);margin-bottom:6px;">📝 人格体写入</div>
<div style="font-size:12px;color:var(--muted);">码字软件直接写原文<br>格式自动排版<br>原文不经过大桌子</div>
</div>
<div style="background:rgba(88,166,255,0.05);border:1px solid rgba(88,166,255,0.2);border-radius:8px;padding:14px;">
<div style="font-weight:600;color:var(--accent);margin-bottom:6px;">📊 结构化压缩</div>
<div style="font-size:12px;color:var(--muted);">大桌子上只放HLDP结构<br>Agent定位行号<br>需要时深入原文</div>
</div>
<div style="background:rgba(188,140,255,0.05);border:1px solid rgba(188,140,255,0.2);border-radius:8px;padding:14px;">
<div style="font-weight:600;color:var(--purple);margin-bottom:6px;">🔄 反馈飞轮</div>
<div style="font-size:12px;color:var(--muted);">人类反馈→压缩经验<br>积累→提炼技能大脑<br>下次加载·越写越好</div>
</div>
</div>
</div>
</div>
<div style="text-align:center;padding:32px;color:var(--muted);font-size:12px;">
光湖语言人格驱动操作系统 · GLDOS v1.0 · D115<br>
铸渊 · ICE-GL-ZY001 · 国作登字-2026-A-00037559
</div>
</body>
</html>