Spaces:
Running
Running
| <html lang="zh-CN"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Hermes · 控制台</title> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet"> | |
| <style> | |
| *{margin:0;padding:0;box-sizing:border-box} | |
| :root{ | |
| --bg:#06090f;--bg2:#0c1018;--bg3:#121825;--bg4:#1a2233; | |
| --border:#1c2536;--border2:#2a3a52; | |
| --g:#10ffb0;--b:#3b9eff;--p:#a371f7;--r:#ff5068;--y:#ffc53d;--c:#2dd4bf;--o:#ff8a4c; | |
| --t1:#f0f2f5;--t2:#8b97a8;--t3:#556073; | |
| --f:-apple-system,BlinkMacSystemFont,"Inter","Noto Sans SC","PingFang SC",sans-serif; | |
| --m:"JetBrains Mono","SF Mono",Monaco,Consolas,monospace; | |
| } | |
| html{font-size:14px} | |
| body{font-family:var(--f);background:var(--bg);color:var(--t1);min-height:100vh;overflow:hidden} | |
| ::-webkit-scrollbar{width:5px} | |
| ::-webkit-scrollbar-track{background:transparent} | |
| ::-webkit-scrollbar-thumb{background:var(--border2);border-radius:3px} | |
| .layout{display:grid;grid-template-rows:56px 1fr;grid-template-columns:280px 1fr;height:100vh} | |
| /* ─── 顶栏 ─── */ | |
| .topbar{grid-column:1/-1;display:flex;align-items:center;padding:0 20px;background:var(--bg2);border-bottom:1px solid var(--border);gap:16px;z-index:10} | |
| .brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:1.05rem;color:var(--t1);letter-spacing:-.3px;flex-shrink:0} | |
| .brand svg{width:22px;height:22px} | |
| .brand-sub{font-size:.68rem;color:var(--t3);font-weight:400;margin-left:4px} | |
| .dot-live{width:7px;height:7px;border-radius:50%;background:var(--g);box-shadow:0 0 8px var(--g);animation:pulse 2s ease infinite} | |
| .dot-live.off{background:var(--r);box-shadow:0 0 8px var(--r)} | |
| @keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}} | |
| .topbar-spacer{flex:1} | |
| .topbar-stat{display:flex;align-items:center;gap:6px;font-size:.75rem;color:var(--t2)} | |
| .topbar-stat b{color:var(--t1);font-family:var(--m);font-weight:600} | |
| .topbar-btn{height:32px;padding:0 14px;border-radius:6px;border:1px solid var(--border2);background:transparent;color:var(--t2);font-size:.75rem;cursor:pointer;font-family:var(--f);font-weight:500;transition:all .15s;display:flex;align-items:center;gap:5px} | |
| .topbar-btn:hover{border-color:var(--g);color:var(--g);background:rgba(16,255,176,.04)} | |
| .topbar-btn.danger:hover{border-color:var(--r);color:var(--r);background:rgba(255,80,104,.04)} | |
| /* ─── 侧栏 ─── */ | |
| .sidebar{background:var(--bg2);border-right:1px solid var(--border);overflow-y:auto;padding:16px 12px;display:flex;flex-direction:column;gap:20px} | |
| .sb-section{display:flex;flex-direction:column;gap:8px} | |
| .sb-title{font-size:.65rem;color:var(--t3);text-transform:uppercase;letter-spacing:1.2px;font-weight:600;padding:0 8px} | |
| .sb-card{padding:12px 14px;background:var(--bg3);border:1px solid var(--border);border-radius:8px;transition:border-color .15s} | |
| .sb-card:hover{border-color:var(--border2)} | |
| .sb-card .label{font-size:.68rem;color:var(--t3);margin-bottom:4px;font-weight:500} | |
| .sb-card .value{font-size:.92rem;font-weight:700;font-family:var(--m);display:flex;align-items:center;gap:6px} | |
| .sb-card .value.cg{color:var(--g)}.sb-card .value.cb{color:var(--b)}.sb-card .value.cp{color:var(--p)}.sb-card .value.cy{color:var(--y)}.sb-card .value.cc{color:var(--c)}.sb-card .value.co{color:var(--o)} | |
| .sb-card .sub{font-size:.62rem;color:var(--t3);margin-top:3px;font-family:var(--m)} | |
| /* 模型选择 */ | |
| .model-select{width:100%;padding:8px 10px;background:var(--bg);border:1px solid var(--border);border-radius:6px;color:var(--t1);font-size:.75rem;font-family:var(--m);cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' fill='%23556073'%3E%3Cpath d='M5 7L0 2h10z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;transition:border-color .15s} | |
| .model-select:focus{outline:none;border-color:var(--b)} | |
| .model-select option{background:var(--bg2);color:var(--t1)} | |
| .btn-row{display:flex;gap:6px;margin-top:4px} | |
| .btn-s{flex:1;height:30px;border-radius:6px;border:1px solid var(--border2);background:transparent;color:var(--t2);font-size:.7rem;cursor:pointer;font-family:var(--f);font-weight:500;transition:all .15s;display:flex;align-items:center;justify-content:center;gap:4px} | |
| .btn-s:hover{border-color:var(--g);color:var(--g)} | |
| .btn-s.btn-g{background:rgba(16,255,176,.08);border-color:rgba(16,255,176,.2);color:var(--g)} | |
| .btn-s.btn-g:hover{background:rgba(16,255,176,.14)} | |
| .btn-s.btn-b{background:rgba(59,158,255,.08);border-color:rgba(59,158,255,.2);color:var(--b)} | |
| .btn-s.btn-b:hover{background:rgba(59,158,255,.14)} | |
| /* 会话列表 */ | |
| .session-item{display:flex;align-items:center;gap:8px;padding:8px 10px;background:var(--bg);border-radius:6px;font-size:.75rem} | |
| .s-dot{width:6px;height:6px;border-radius:50%;background:var(--g);flex-shrink:0} | |
| .s-dot.idle{background:var(--t3)} | |
| .s-info{flex:1;min-width:0} | |
| .s-name{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} | |
| .s-meta{font-size:.6rem;color:var(--t3);margin-top:1px;font-family:var(--m)} | |
| .empty-hint{font-size:.75rem;color:var(--t3);text-align:center;padding:20px 0;font-style:italic} | |
| /* ─── 主区域 ─── */ | |
| .main{display:flex;flex-direction:column;overflow:hidden;background:var(--bg)} | |
| .log-bar{display:flex;align-items:center;justify-content:space-between;padding:8px 16px;border-bottom:1px solid var(--border);flex-shrink:0;min-height:38px} | |
| .log-bar-title{font-size:.75rem;font-weight:600;color:var(--t2);display:flex;align-items:center;gap:6px} | |
| .log-bar-right{display:flex;align-items:center;gap:4px} | |
| .lf{height:24px;padding:0 8px;border-radius:4px;border:1px solid var(--border);background:transparent;color:var(--t3);font-size:.65rem;cursor:pointer;font-family:var(--m);font-weight:500;transition:all .12s} | |
| .lf:hover,.lf.on{color:var(--g);border-color:rgba(16,255,176,.3)} | |
| .lf.on{background:rgba(16,255,176,.06)} | |
| .lf-divider{width:1px;height:14px;background:var(--border);margin:0 2px} | |
| /* 日志区域 */ | |
| .log-area{flex:1;overflow:hidden;position:relative} | |
| .log-scroll{position:absolute;inset:0;overflow-y:auto;padding:10px 16px;font-family:var(--m);font-size:.74rem;line-height:1.75} | |
| .log-line{display:flex;gap:12px;padding:0 2px;border-radius:3px;transition:background .1s} | |
| .log-line:hover{background:rgba(255,255,255,.015)} | |
| .lt{color:var(--t3);flex-shrink:0;user-select:none;font-size:.7rem;min-width:68px} | |
| .ll{font-weight:600;flex-shrink:0;width:48px;text-align:right;user-select:none;font-size:.68rem} | |
| .ll.I{color:var(--g)}.ll.W{color:var(--y)}.ll.E{color:var(--r)}.ll.D{color:var(--t3)} | |
| .lm{color:var(--t2);word-break:break-all;flex:1} | |
| .lm.hl{color:var(--c)} | |
| .lm.err{color:var(--r)} | |
| .log-empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--t3);font-size:.8rem} | |
| .log-empty::before{content:'';display:block;width:80px;height:80px;border-radius:50%;border:2px dashed var(--border);margin-bottom:12px;background:radial-gradient(circle,var(--bg3),transparent);animation:spin 20s linear infinite} | |
| @keyframes spin{to{transform:rotate(360deg)}} | |
| /* 底栏 */ | |
| .log-footer{display:flex;align-items:center;justify-content:space-between;padding:6px 16px;border-top:1px solid var(--border);flex-shrink:0;font-size:.65rem;color:var(--t3);font-family:var(--m)} | |
| /* 吐司 */ | |
| .toast-box{position:fixed;top:64px;right:16px;z-index:100;display:flex;flex-direction:column;gap:6px} | |
| .toast{padding:10px 18px;border-radius:8px;font-size:.78rem;font-weight:500;animation:fadeUp .25s ease;backdrop-filter:blur(12px)} | |
| .toast.ok{background:rgba(16,255,176,.12);border:1px solid rgba(16,255,176,.25);color:var(--g)} | |
| .toast.err{background:rgba(255,80,104,.12);border:1px solid rgba(255,80,104,.25);color:var(--r)} | |
| .toast.info{background:rgba(59,158,255,.12);border:1px solid rgba(59,158,255,.25);color:var(--b)} | |
| @keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}} | |
| /* 亮条装饰 */ | |
| .topbar::after{content:'';position:absolute;bottom:-1px;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--g),var(--b),var(--p),transparent);opacity:.3} | |
| /* 响应式 */ | |
| @media(max-width:768px){ | |
| .layout{grid-template-columns:1fr} | |
| .sidebar{display:none} | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="toast-box" id="tb"></div> | |
| <div class="layout"> | |
| <!-- 顶栏 --> | |
| <div class="topbar" style="position:relative"> | |
| <div class="brand"> | |
| <svg viewBox="0 0 24 24" fill="none" stroke="var(--g)" stroke-width="2"><path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg> | |
| Hermes 控制台 | |
| <span class="brand-sub">v0.11</span> | |
| </div> | |
| <div class="dot-live" id="dot"></div> | |
| <div class="topbar-stat">运行 <b id="uptime">--</b></div> | |
| <div class="topbar-stat">内存 <b id="ram">--</b></div> | |
| <div class="topbar-stat">进程 <b id="pid">--</b></div> | |
| <div class="topbar-spacer"></div> | |
| <button class="topbar-btn" onclick="doRestart()">↻ 重启</button> | |
| <button class="topbar-btn" onclick="doClear()">清除日志</button> | |
| <button class="topbar-btn danger" onclick="doReset()">重置配置</button> | |
| </div> | |
| <!-- 侧栏 --> | |
| <div class="sidebar"> | |
| <!-- 系统状态 --> | |
| <div class="sb-section"> | |
| <div class="sb-title">系统状态</div> | |
| <div class="sb-card"><div class="label">平台</div><div class="value cg" id="x-plat">飞书</div><div class="sub" id="x-plat-sub">WebSocket 长连接</div></div> | |
| <div class="sb-card"><div class="label">模型</div><div class="value cb" id="x-model">--</div><div class="sub" id="x-model-sub">OpenRouter</div></div> | |
| <div class="sb-card"><div class="label">会话数</div><div class="value cp" id="x-sess">0</div><div class="sub">活跃会话</div></div> | |
| <div class="sb-card"><div class="label">终端</div><div class="value cc" id="x-term">本地</div><div class="sub" id="x-tz">Asia/Shanghai</div></div> | |
| </div> | |
| <!-- 模型切换 --> | |
| <div class="sb-section"> | |
| <div class="sb-title">模型切换</div> | |
| <select class="model-select" id="msel"></select> | |
| <div class="btn-row"> | |
| <button class="btn-s btn-g" onclick="doSwitch()">切换</button> | |
| <button class="btn-s btn-b" onclick="loadSess()">刷新会话</button> | |
| </div> | |
| </div> | |
| <!-- 配置概览 --> | |
| <div class="sb-section"> | |
| <div class="sb-title">配置概览</div> | |
| <div class="sb-card"><div class="label">飞书应用</div><div class="value co" id="x-appid">--</div></div> | |
| <div class="sb-card"><div class="label">连接模式</div><div class="value cb" id="x-conn">WebSocket</div></div> | |
| <div class="sb-card"><div class="label">最大轮数</div><div class="value cy" id="x-turns">90</div></div> | |
| <div class="sb-card"><div class="label">压缩</div><div class="value cg" id="x-comp">已开启</div></div> | |
| <div class="sb-card"><div class="label">记忆</div><div class="value" id="x-mem" style="color:var(--t2)">未配置</div></div> | |
| </div> | |
| <!-- 近期会话 --> | |
| <div class="sb-section" style="flex:1;min-height:0"> | |
| <div class="sb-title">近期会话</div> | |
| <div id="sess-list"><div class="empty-hint">暂无会话</div></div> | |
| </div> | |
| </div> | |
| <!-- 主区域 --> | |
| <div class="main"> | |
| <div class="log-bar"> | |
| <div class="log-bar-title">📋 实时日志</div> | |
| <div class="log-bar-right"> | |
| <button class="lf on" id="fI" onclick="togF('I')">信息</button> | |
| <button class="lf on" id="fW" onclick="togF('W')">警告</button> | |
| <button class="lf on" id="fE" onclick="togF('E')">错误</button> | |
| <div class="lf-divider"></div> | |
| <button class="lf on" id="fAuto" onclick="togAuto()">自动滚动</button> | |
| <button class="lf" onclick="togAuto();document.getElementById('log-scroll').scrollTop=99999">↓ 到底部</button> | |
| </div> | |
| </div> | |
| <div class="log-area"> | |
| <div class="log-scroll" id="log-scroll"> | |
| <div class="log-empty">等待日志输出…</div> | |
| </div> | |
| </div> | |
| <div class="log-footer"> | |
| <span id="log-count">0 条日志</span> | |
| <span id="log-time"></span> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| const A=''; | |
| let autoScroll=true, totalLogs=0; | |
| const filters={I:true,W:true,E:true}; | |
| const logBuf=[]; | |
| const MAX=800; | |
| // 免费模型列表 | |
| const MODELS=[ | |
| {v:'inclusionai/ling-2.6-1t:free',l:'Ling 2.6 (免费)'}, | |
| {v:'inclusionai/ling-2.6-flash:free',l:'Ling 2.6 Flash (免费)'}, | |
| {v:'google/gemma-4-31b-it:free',l:'Gemma 4 31B (免费)'}, | |
| {v:'qwen/qwen3-coder:free',l:'Qwen3 Coder (免费)'}, | |
| {v:'qwen/qwen3-next-80b-a3b-instruct:free',l:'Qwen3 Next 80B (免费)'}, | |
| {v:'openai/gpt-oss-120b:free',l:'GPT OSS 120B (免费)'}, | |
| {v:'z-ai/glm-4.5-air:free',l:'GLM 4.5 Air (免费)'}, | |
| {v:'nvidia/nemotron-3-super-120b-a12b:free',l:'Nemotron 3 Super (免费)'}, | |
| ]; | |
| // 初始化模型下拉 | |
| (function(){ | |
| const sel=document.getElementById('msel'); | |
| MODELS.forEach(m=>{const o=document.createElement('option');o.value=m.v;o.textContent=m.l;sel.appendChild(o)}); | |
| })(); | |
| // 吐司 | |
| function toast(m,t='info'){const e=document.createElement('div');e.className='toast '+t;e.textContent=m;document.getElementById('tb').appendChild(e);setTimeout(()=>e.remove(),3500)} | |
| // 格式化运行时间 | |
| function fmtUp(ms){const s=Math.floor(ms/1000),d=Math.floor(s/86400),h=Math.floor(s%86400/3600),mi=Math.floor(s%3600/60);return d>0?d+'天 '+h+'时 '+mi+'分':h>0?h+'时 '+mi+'分':mi+'分 '+(s%60)+'秒'} | |
| // HTML转义 | |
| function esc(s){const d=document.createElement('div');d.textContent=s;return d.innerHTML} | |
| // ── SSE 日志 ── | |
| function connectSSE(){ | |
| const es=new EventSource(A+'/api/logs/stream'); | |
| es.onmessage=e=>{try{const a=JSON.parse(e.data);if(Array.isArray(a))a.forEach(addLog)}catch{}}; | |
| es.onerror=()=>setTimeout(connectSSE,3000); | |
| } | |
| function addLog(l){ | |
| const sc=document.getElementById('log-scroll'); | |
| if(!totalLogs)sc.innerHTML=''; | |
| totalLogs++;logBuf.push(l); | |
| if(logBuf.length>MAX)logBuf.shift(); | |
| const lv=l.level?.toUpperCase()||'I'; | |
| const map={INFO:'I',WARN:'W',WARNING:'W',ERROR:'E',DEBUG:'D'}; | |
| const fk=map[lv]||'I'; | |
| const div=document.createElement('div'); | |
| div.className='log-line';div.dataset.f=fk; | |
| if(!filters[fk])div.style.display='none'; | |
| const hl=(l.msg||'').toLowerCase(); | |
| const isHL=hl.includes('feishu')||hl.includes('飞书')||hl.includes('connect')||hl.includes('收到')||hl.includes('回复'); | |
| const isErr=fk==='E'; | |
| div.innerHTML=`<span class="lt">${esc(l.time||'')}</span><span class="ll ${fk}">${(l.level||'INFO').padEnd(5)}</span><span class="lm${isHL?' hl':''}${isErr?' err':''}">${esc(l.msg||'')}</span>`; | |
| sc.appendChild(div); | |
| while(sc.children.length>MAX)sc.removeChild(sc.firstChild); | |
| if(autoScroll)sc.scrollTop=sc.scrollHeight; | |
| document.getElementById('log-count').textContent=totalLogs+' 条日志'; | |
| } | |
| // ── 状态轮询 ── | |
| async function poll(){ | |
| try{ | |
| const r=await fetch(A+'/api/status');const d=await r.json(); | |
| // 顶栏 | |
| document.getElementById('dot').className='dot-live'+(d.running?'':' off'); | |
| document.getElementById('uptime').textContent=fmtUp(d.uptime_ms||0); | |
| document.getElementById('ram').textContent=d.ram||'--'; | |
| document.getElementById('pid').textContent=d.pid||'--'; | |
| // 侧栏 | |
| document.getElementById('x-model').textContent=(d.model||'--').split('/').pop().substring(0,30); | |
| document.getElementById('x-sess').textContent=d.sessions||0; | |
| document.getElementById('x-plat').textContent=d.platform||'飞书'; | |
| document.getElementById('x-plat-sub').textContent=d.platform_mode||'WebSocket'; | |
| document.getElementById('x-conn').textContent=d.platform_mode||'WebSocket'; | |
| // 配置 | |
| if(d.config){ | |
| document.getElementById('x-appid').textContent=d.config.FEISHU_APP_ID||'--'; | |
| document.getElementById('x-term').textContent=d.config.terminal==='local'?'本地':'远程'; | |
| document.getElementById('x-tz').textContent=d.config.timezone||'Asia/Shanghai'; | |
| document.getElementById('x-turns').textContent=d.config.max_turns||'90'; | |
| document.getElementById('x-comp').textContent=d.config.compress?'已开启':'已关闭'; | |
| document.getElementById('x-comp').style.color=d.config.compress?'var(--g)':'var(--t3)'; | |
| document.getElementById('x-mem').textContent=d.config.memory==='none'?'未配置':'已配置'; | |
| document.getElementById('x-mem').style.color=d.config.memory!=='none'?'var(--g)':'var(--t3)'; | |
| // 模型选择同步 | |
| if(d.model){ | |
| const sel=document.getElementById('msel'); | |
| let found=false; | |
| for(const o of sel.options)if(o.value===d.model){found=true;break} | |
| if(!found){const o=document.createElement('option');o.value=d.model;o.textContent=d.model;sel.prepend(o)} | |
| sel.value=d.model; | |
| } | |
| } | |
| document.getElementById('log-time').textContent=new Date().toLocaleTimeString('zh-CN'); | |
| }catch{} | |
| } | |
| // ── 会话 ── | |
| async function loadSess(){ | |
| try{ | |
| const r=await fetch(A+'/api/sessions');const list=await r.json(); | |
| const el=document.getElementById('sess-list'); | |
| if(!list||!list.length){el.innerHTML='<div class="empty-hint">暂无会话</div>';return} | |
| el.innerHTML=list.slice(0,10).map(s=>` | |
| <div class="session-item"> | |
| <span class="s-dot${s.active?'':' idle'}"></span> | |
| <div class="s-info"> | |
| <div class="s-name">${esc(s.name||s.id)}</div> | |
| <div class="s-meta">${esc(s.platform||'')} · ${s.messages||0} 条 · ${esc(s.last||'')}</div> | |
| </div> | |
| </div>`).join(''); | |
| }catch{} | |
| } | |
| // ── 操作 ── | |
| async function doRestart(){ | |
| toast('正在重启网关…','info'); | |
| try{const r=await fetch(A+'/api/restart',{method:'POST'});const d=await r.json();toast(d.ok?'重启成功':'重启失败: '+(d.error||''),'ok' if d.ok else 'err')}catch{toast('请求失败','err')} | |
| } | |
| async function doClear(){ | |
| totalLogs=0;logBuf.length=0; | |
| document.getElementById('log-scroll').innerHTML='<div class="log-empty">已清除</div>'; | |
| document.getElementById('log-count').textContent='0 条日志'; | |
| toast('日志已清除','ok'); | |
| } | |
| async function doReset(){ | |
| if(!confirm('确定要重置配置吗？所有设置将恢复默认。'))return; | |
| toast('正在重置…','info'); | |
| try{const r=await fetch(A+'/api/reset',{method:'POST'});const d=await r.json();toast(d.ok?'重置完成':'失败: '+(d.error||''),d.ok?'ok':'err')}catch{toast('请求失败','err')} | |
| } | |
| async function doSwitch(){ | |
| const m=document.getElementById('msel').value; | |
| toast('正在切换模型…','info'); | |
| try{ | |
| const r=await fetch(A+'/api/model',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({model:m})}); | |
| const d=await r.json(); | |
| toast(d.ok?'模型已切换至 '+m.split('/').pop():'切换失败: '+(d.error||''),d.ok?'ok':'err'); | |
| if(d.ok)setTimeout(poll,1000); | |
| }catch{toast('请求失败','err')} | |
| } | |
| // ── 过滤 ── | |
| function togF(k){ | |
| filters[k]=!filters[k]; | |
| const btn=document.getElementById('f'+k); | |
| btn.classList.toggle('on',filters[k]); | |
| document.querySelectorAll('#log-scroll .log-line').forEach(el=>{el.style.display=filters[el.dataset.f]?'':'none'}); | |
| } | |
| function togAuto(){autoScroll=!autoScroll;document.getElementById('fAuto').classList.toggle('on',autoScroll)} | |
| // ── 启动 ── | |
| poll();setInterval(poll,5000);setInterval(loadSess,30000);loadSess();connectSSE(); | |
| </script> | |
| </body> | |
| </html> | |