guanghulab/desk-demo/index.html
冰朔 59c7f95abb feat: 大桌子小桌子可视化演示页面 · 人格体数据库架构展示
- 大桌子(Main Context): 意识大脑+结构化目录+对话压缩
- 小桌子(External Context): Agent小分队+工具桌+记忆库
- 数据流动画: 冰朔说话→铸渊理解→Agent检索→回复→压缩
- 多模型切换: 同一套桌子,Agent搬到不同模型
- 写作飞轮: 码字软件写入+结构化压缩+反馈提炼技能大脑
2026-05-28 23:30:27 +08:00

478 lines
15 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!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>