opc-agent 4.0.20 → 4.0.21

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -486,263 +486,6 @@
486
486
  </div>
487
487
  </div>
488
488
 
489
- <!-- Settings Page -->
490
- <div class="page" id="page-settings">
491
- <h1 class="page-title">⚙️ Settings</h1>
492
- <p class="page-subtitle">配置您的 AI Agent 平台</p>
493
- <div class="settings-layout">
494
- <!-- Sub-nav -->
495
- <div class="settings-subnav">
496
- <div class="snav-item active" data-section="models" onclick="showSettingsSection('models')"><span>🤖</span> 模型配置</div>
497
- <div class="snav-item" data-section="channels" onclick="showSettingsSection('channels')"><span>📡</span> 渠道配置</div>
498
- <div class="snav-item" data-section="memory" onclick="showSettingsSection('memory')"><span>🧠</span> 记忆管理</div>
499
- <div class="snav-item" data-section="role" onclick="showSettingsSection('role')"><span>👤</span> 角色编辑</div>
500
- <div class="snav-item" data-section="status" onclick="showSettingsSection('status')"><span>📊</span> 运行状态</div>
501
- <div class="snav-item" data-section="usage" onclick="showSettingsSection('usage')"><span>💰</span> 用量统计</div>
502
- </div>
503
- <!-- Content -->
504
- <div class="settings-content">
505
-
506
- <!-- SECTION: Models -->
507
- <div class="settings-section active" id="section-models">
508
- <h2 style="font-size:18px;font-weight:700;margin-bottom:4px;">🤖 模型配置</h2>
509
- <p style="color:var(--text-muted);font-size:13px;margin-bottom:20px;">选择让 Agent 思考和对话的 AI 大脑</p>
510
- <div class="tabs">
511
- <div class="tab active" id="tab-btn-local" onclick="switchModelTab('local')">本地模型</div>
512
- <div class="tab" id="tab-btn-cloud" onclick="switchModelTab('cloud')">☁️ 云端 API</div>
513
- </div>
514
- <!-- Local tab -->
515
- <div class="tab-panel active" id="tab-local">
516
- <div id="ollama-checking" style="display:flex;align-items:center;gap:8px;color:var(--text-muted);font-size:14px;padding:16px 0;">
517
- <span class="status-dot yellow"></span> 正在检测本地 Ollama...
518
- </div>
519
- <div id="ollama-running" style="display:none;">
520
- <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;">
521
- <div style="display:flex;align-items:center;gap:8px;font-size:14px;font-weight:500;">
522
- <span class="status-dot green"></span> Ollama 运行中
523
- </div>
524
- <button class="btn btn-secondary btn-sm" onclick="refreshLocalModels()">🔄 刷新</button>
525
- </div>
526
- <div id="local-models-list" style="display:flex;flex-direction:column;gap:6px;margin-bottom:16px;"></div>
527
- <div class="card" style="background:rgba(59,130,246,0.06);border-color:rgba(59,130,246,0.3);">
528
- <div style="font-size:13px;font-weight:600;margin-bottom:6px;">💡 推荐模型组合</div>
529
- <div style="font-size:12px;color:var(--text-muted);margin-bottom:10px;">对话:<strong>qwen2.5:7b</strong> &nbsp;·&nbsp; 嵌入:<strong>nomic-embed-text</strong></div>
530
- <button class="btn btn-primary btn-sm" onclick="showPullCommand()">查看安装命令</button>
531
- </div>
532
- <div id="pull-cmd" style="display:none;margin-top:12px;">
533
- <div style="background:#080808;padding:10px 14px;border-radius:var(--radius);font-family:var(--mono);font-size:12px;color:#86efac;line-height:1.8;">ollama pull qwen2.5:7b<br>ollama pull nomic-embed-text</div>
534
- </div>
535
- </div>
536
- <div id="ollama-offline" style="display:none;">
537
- <div class="card">
538
- <div style="display:flex;align-items:center;gap:8px;margin-bottom:12px;">
539
- <span class="status-dot red"></span>
540
- <span style="font-size:14px;font-weight:600;">Ollama 未检测到</span>
541
- </div>
542
- <p style="font-size:13px;color:var(--text-muted);margin-bottom:16px;">在本地运行 AI 模型,完全免费、无需联网、数据不外泄</p>
543
- <div style="display:flex;flex-direction:column;gap:14px;">
544
- <div style="display:flex;gap:12px;">
545
- <div style="width:26px;height:26px;min-width:26px;background:var(--accent);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:white;">1</div>
546
- <div>
547
- <div style="font-size:14px;font-weight:500;margin-bottom:2px;">下载 Ollama</div>
548
- <div style="font-size:12px;color:var(--text-muted);margin-bottom:6px;">访问官网下载安装包(约 200MB,免费)</div>
549
- <a href="https://ollama.com/download" target="_blank" class="btn btn-secondary btn-sm">打开下载页面 ↗</a>
550
- </div>
551
- </div>
552
- <div style="display:flex;gap:12px;">
553
- <div style="width:26px;height:26px;min-width:26px;background:var(--accent);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:white;">2</div>
554
- <div>
555
- <div style="font-size:14px;font-weight:500;margin-bottom:2px;">安装并启动</div>
556
- <div style="font-size:12px;color:var(--text-muted);">按向导安装,Ollama 会自动在后台运行</div>
557
- </div>
558
- </div>
559
- <div style="display:flex;gap:12px;">
560
- <div style="width:26px;height:26px;min-width:26px;background:var(--accent);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:white;">3</div>
561
- <div>
562
- <div style="font-size:14px;font-weight:500;margin-bottom:2px;">拉取推荐模型</div>
563
- <div style="font-size:12px;color:var(--text-muted);margin-bottom:6px;">在终端运行(首次约 5GB,之后永久免费)</div>
564
- <div style="background:#080808;padding:8px 12px;border-radius:var(--radius);font-family:var(--mono);font-size:12px;color:#86efac;">ollama pull qwen2.5:7b<br>ollama pull nomic-embed-text</div>
565
- </div>
566
- </div>
567
- </div>
568
- <button class="btn btn-primary" style="width:100%;margin-top:16px;" onclick="checkOllama()">✅ 已安装完成,重新检测</button>
569
- </div>
570
- </div>
571
- </div>
572
- <!-- Cloud tab -->
573
- <div class="tab-panel" id="tab-cloud">
574
- <p style="font-size:13px;color:var(--text-muted);margin-bottom:20px;">填入 API Key 即可使用云端大模型,Key 仅保存在本地配置文件中</p>
575
- <div id="cloud-providers"></div>
576
- <button class="btn btn-primary" style="width:100%;" onclick="saveCloudConfig()">💾 保存云端配置</button>
577
- <div id="cloud-save-msg" style="text-align:center;font-size:13px;color:var(--green);margin-top:8px;"></div>
578
- </div>
579
- <!-- Model assignment -->
580
- <div class="card" style="margin-top:24px;">
581
- <div style="font-size:15px;font-weight:600;margin-bottom:4px;">模型分配</div>
582
- <p style="font-size:12px;color:var(--text-muted);margin-bottom:16px;">将不同模型分配给不同任务,获得最佳效果</p>
583
- <div class="form-group">
584
- <label class="label">对话模型 <span style="color:var(--red);">*</span></label>
585
- <p class="help-text" style="margin-bottom:6px;">Agent 用来理解和回复消息的主模型</p>
586
- <select class="input" id="chat-model-select"></select>
587
- </div>
588
- <div class="form-group">
589
- <label class="label">嵌入模型(记忆专用)</label>
590
- <p class="help-text" style="margin-bottom:6px;">将记忆转为向量存储,推荐 nomic-embed-text</p>
591
- <select class="input" id="embed-model-select"></select>
592
- </div>
593
- <div style="display:flex;align-items:center;gap:12px;">
594
- <button class="btn btn-primary" onclick="saveModelAssignment()">💾 保存</button>
595
- <span id="model-save-msg" style="font-size:13px;color:var(--green);"></span>
596
- </div>
597
- </div>
598
- </div>
599
-
600
- <!-- SECTION: Channels -->
601
- <div class="settings-section" id="section-channels">
602
- <h2 style="font-size:18px;font-weight:700;margin-bottom:4px;">📡 渠道配置</h2>
603
- <p style="color:var(--text-muted);font-size:13px;margin-bottom:20px;">设置 Agent 与用户沟通的渠道,点击卡片进行配置</p>
604
- <div class="channel-grid" id="channel-cards"></div>
605
- </div>
606
-
607
- <!-- SECTION: Memory -->
608
- <div class="settings-section" id="section-memory">
609
- <h2 style="font-size:18px;font-weight:700;margin-bottom:4px;">🧠 记忆管理</h2>
610
- <p style="color:var(--text-muted);font-size:13px;margin-bottom:16px;">管理 Agent 的长期记忆(由 DeepBrain 驱动)</p>
611
- <div style="display:flex;align-items:center;gap:8px;margin-bottom:16px;" id="deepbrain-status">
612
- <span class="status-dot yellow"></span>
613
- <span style="font-size:13px;color:var(--text-muted);">正在检测 DeepBrain...</span>
614
- </div>
615
- <div id="deepbrain-online" style="display:none;">
616
- <div class="iframe-wrap"><iframe id="deepbrain-frame" src="http://localhost:4001" title="DeepBrain"></iframe></div>
617
- </div>
618
- <div id="deepbrain-offline" style="display:none;">
619
- <div class="card empty-state">
620
- <div class="empty-icon">🧠</div>
621
- <div class="empty-title">DeepBrain 未启动</div>
622
- <div class="empty-desc">DeepBrain 是独立的记忆管理模块,需要单独运行在端口 4001</div>
623
- <div style="display:flex;gap:8px;justify-content:center;flex-wrap:wrap;">
624
- <a href="http://localhost:4001" target="_blank" class="btn btn-primary">在新标签页打开 ↗</a>
625
- <button class="btn btn-secondary" onclick="checkDeepBrain()">🔄 重新检测</button>
626
- </div>
627
- </div>
628
- </div>
629
- </div>
630
-
631
- <!-- SECTION: Role -->
632
- <div class="settings-section" id="section-role">
633
- <h2 style="font-size:18px;font-weight:700;margin-bottom:4px;">👤 角色编辑</h2>
634
- <p style="color:var(--text-muted);font-size:13px;margin-bottom:16px;">设计 Agent 的人格和行为方式(由 Workstation 驱动)</p>
635
- <div style="display:flex;align-items:center;gap:8px;margin-bottom:16px;" id="workstation-status">
636
- <span class="status-dot yellow"></span>
637
- <span style="font-size:13px;color:var(--text-muted);">正在检测 Workstation...</span>
638
- </div>
639
- <div id="workstation-online" style="display:none;">
640
- <div class="iframe-wrap"><iframe id="workstation-frame" src="http://localhost:4003" title="Workstation"></iframe></div>
641
- </div>
642
- <div id="workstation-offline" style="display:none;">
643
- <div class="card empty-state">
644
- <div class="empty-icon">👤</div>
645
- <div class="empty-title">Workstation 未启动</div>
646
- <div class="empty-desc">Workstation 是独立的角色编辑模块,需要单独运行在端口 4003</div>
647
- <div style="display:flex;gap:8px;justify-content:center;flex-wrap:wrap;">
648
- <a href="http://localhost:4003" target="_blank" class="btn btn-primary">在新标签页打开 ↗</a>
649
- <button class="btn btn-secondary" onclick="checkWorkstation()">🔄 重新检测</button>
650
- </div>
651
- </div>
652
- </div>
653
- </div>
654
-
655
- <!-- SECTION: Status -->
656
- <div class="settings-section" id="section-status">
657
- <h2 style="font-size:18px;font-weight:700;margin-bottom:4px;">📊 运行状态</h2>
658
- <p style="color:var(--text-muted);font-size:13px;margin-bottom:20px;">查看 Studio 和 Agent 的运行情况</p>
659
- <div class="card-grid" style="grid-template-columns:repeat(auto-fill,minmax(180px,1fr));margin-bottom:20px;">
660
- <div class="card">
661
- <div style="font-size:12px;color:var(--text-muted);margin-bottom:6px;">Studio 状态</div>
662
- <div style="display:flex;align-items:center;gap:6px;font-size:15px;font-weight:600;">
663
- <span class="status-dot green"></span> 运行中
664
- </div>
665
- </div>
666
- <div class="card">
667
- <div style="font-size:12px;color:var(--text-muted);margin-bottom:6px;">运行时长</div>
668
- <div style="font-size:15px;font-weight:600;" id="status-uptime">--</div>
669
- </div>
670
- <div class="card">
671
- <div style="font-size:12px;color:var(--text-muted);margin-bottom:6px;">内存占用</div>
672
- <div style="font-size:15px;font-weight:600;" id="status-memory">-- MB</div>
673
- </div>
674
- <div class="card">
675
- <div style="font-size:12px;color:var(--text-muted);margin-bottom:6px;">启动 Agent</div>
676
- <code style="background:var(--bg-hover);padding:4px 8px;border-radius:4px;font-size:12px;color:var(--text-muted);">opc run</code>
677
- </div>
678
- </div>
679
- <div class="card">
680
- <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;">
681
- <div style="font-size:14px;font-weight:600;">📋 最近日志(最后 50 行)</div>
682
- <button class="btn btn-secondary btn-sm" onclick="refreshStatus()">🔄 刷新</button>
683
- </div>
684
- <div class="log-viewer" id="status-logs">暂无日志记录</div>
685
- </div>
686
- </div>
687
-
688
- <!-- SECTION: Usage -->
689
- <div class="settings-section" id="section-usage">
690
- <h2 style="font-size:18px;font-weight:700;margin-bottom:4px;">💰 用量统计</h2>
691
- <p style="color:var(--text-muted);font-size:13px;margin-bottom:20px;">Token 消耗和费用概览(近 7 天)</p>
692
- <div class="card-grid" style="grid-template-columns:repeat(auto-fill,minmax(180px,1fr));margin-bottom:20px;">
693
- <div class="card">
694
- <div style="font-size:12px;color:var(--text-muted);margin-bottom:4px;">总 Token 用量</div>
695
- <div style="font-size:26px;font-weight:700;" id="usage-total-tokens">0</div>
696
- <div style="font-size:11px;color:var(--text-dim);margin-top:2px;">近 7 天</div>
697
- </div>
698
- <div class="card">
699
- <div style="font-size:12px;color:var(--text-muted);margin-bottom:4px;">预估费用</div>
700
- <div style="font-size:26px;font-weight:700;" id="usage-total-cost">$0.00</div>
701
- <div style="font-size:11px;color:var(--text-dim);margin-top:2px;">近 7 天</div>
702
- </div>
703
- </div>
704
- <div class="card" style="margin-bottom:20px;">
705
- <div style="font-size:14px;font-weight:600;margin-bottom:16px;">📈 每日 Token 用量</div>
706
- <div class="bar-chart-wrap" id="usage-chart"></div>
707
- </div>
708
- <div class="card">
709
- <div style="font-size:14px;font-weight:600;margin-bottom:12px;">按模型分类</div>
710
- <div id="usage-by-model"><div style="font-size:13px;color:var(--text-muted);">暂无使用记录。开始与 Agent 对话后将自动统计。</div></div>
711
- </div>
712
- </div>
713
-
714
- <!-- SECTION: Image Generation -->
715
- <div class="settings-section" id="section-imagegen">
716
- <h2 style="font-size:18px;font-weight:700;margin-bottom:4px;">🎨 图片生成</h2>
717
- <p style="color:var(--text-muted);font-size:13px;margin-bottom:20px;">Configure image generation providers for your agents</p>
718
- <div class="card" style="margin-bottom:16px;">
719
- <div style="font-size:14px;font-weight:600;margin-bottom:12px;">DALL·E (OpenAI)</div>
720
- <div class="form-group">
721
- <label class="label">OpenAI API Key</label>
722
- <input class="input" id="ig-openai-key" type="password" placeholder="sk-...">
723
- </div>
724
- </div>
725
- <div class="card" style="margin-bottom:16px;">
726
- <div style="font-size:14px;font-weight:600;margin-bottom:12px;">Stable Diffusion (Local)</div>
727
- <div class="form-group">
728
- <label class="label">API URL</label>
729
- <input class="input" id="ig-sd-url" placeholder="http://localhost:7860">
730
- </div>
731
- </div>
732
- <div class="card" style="margin-bottom:16px;">
733
- <div style="font-size:14px;font-weight:600;margin-bottom:12px;">Replicate</div>
734
- <div class="form-group">
735
- <label class="label">API Token</label>
736
- <input class="input" id="ig-replicate-key" type="password" placeholder="r8_...">
737
- </div>
738
- </div>
739
- <button class="btn btn-primary" onclick="saveImageGenConfig()">💾 Save Configuration</button>
740
- <div id="ig-status" style="margin-top:12px;font-size:13px;color:var(--text-muted);"></div>
741
- </div>
742
-
743
- </div><!-- end settings-content -->
744
- </div><!-- end settings-layout -->
745
- </div><!-- end page-settings -->
746
489
 
747
490
  <!-- Memory Page -->
748
491
  <div class="page" id="page-memory">
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "opc-agent",
3
- "version": "4.0.20",
3
+ "version": "4.0.21",
4
4
  "description": "Open Agent Framework — Build, test, and run AI Agents for business workstations",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",
@@ -486,263 +486,6 @@
486
486
  </div>
487
487
  </div>
488
488
 
489
- <!-- Settings Page -->
490
- <div class="page" id="page-settings">
491
- <h1 class="page-title">⚙️ Settings</h1>
492
- <p class="page-subtitle">配置您的 AI Agent 平台</p>
493
- <div class="settings-layout">
494
- <!-- Sub-nav -->
495
- <div class="settings-subnav">
496
- <div class="snav-item active" data-section="models" onclick="showSettingsSection('models')"><span>🤖</span> 模型配置</div>
497
- <div class="snav-item" data-section="channels" onclick="showSettingsSection('channels')"><span>📡</span> 渠道配置</div>
498
- <div class="snav-item" data-section="memory" onclick="showSettingsSection('memory')"><span>🧠</span> 记忆管理</div>
499
- <div class="snav-item" data-section="role" onclick="showSettingsSection('role')"><span>👤</span> 角色编辑</div>
500
- <div class="snav-item" data-section="status" onclick="showSettingsSection('status')"><span>📊</span> 运行状态</div>
501
- <div class="snav-item" data-section="usage" onclick="showSettingsSection('usage')"><span>💰</span> 用量统计</div>
502
- </div>
503
- <!-- Content -->
504
- <div class="settings-content">
505
-
506
- <!-- SECTION: Models -->
507
- <div class="settings-section active" id="section-models">
508
- <h2 style="font-size:18px;font-weight:700;margin-bottom:4px;">🤖 模型配置</h2>
509
- <p style="color:var(--text-muted);font-size:13px;margin-bottom:20px;">选择让 Agent 思考和对话的 AI 大脑</p>
510
- <div class="tabs">
511
- <div class="tab active" id="tab-btn-local" onclick="switchModelTab('local')">本地模型</div>
512
- <div class="tab" id="tab-btn-cloud" onclick="switchModelTab('cloud')">☁️ 云端 API</div>
513
- </div>
514
- <!-- Local tab -->
515
- <div class="tab-panel active" id="tab-local">
516
- <div id="ollama-checking" style="display:flex;align-items:center;gap:8px;color:var(--text-muted);font-size:14px;padding:16px 0;">
517
- <span class="status-dot yellow"></span> 正在检测本地 Ollama...
518
- </div>
519
- <div id="ollama-running" style="display:none;">
520
- <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;">
521
- <div style="display:flex;align-items:center;gap:8px;font-size:14px;font-weight:500;">
522
- <span class="status-dot green"></span> Ollama 运行中
523
- </div>
524
- <button class="btn btn-secondary btn-sm" onclick="refreshLocalModels()">🔄 刷新</button>
525
- </div>
526
- <div id="local-models-list" style="display:flex;flex-direction:column;gap:6px;margin-bottom:16px;"></div>
527
- <div class="card" style="background:rgba(59,130,246,0.06);border-color:rgba(59,130,246,0.3);">
528
- <div style="font-size:13px;font-weight:600;margin-bottom:6px;">💡 推荐模型组合</div>
529
- <div style="font-size:12px;color:var(--text-muted);margin-bottom:10px;">对话:<strong>qwen2.5:7b</strong> &nbsp;·&nbsp; 嵌入:<strong>nomic-embed-text</strong></div>
530
- <button class="btn btn-primary btn-sm" onclick="showPullCommand()">查看安装命令</button>
531
- </div>
532
- <div id="pull-cmd" style="display:none;margin-top:12px;">
533
- <div style="background:#080808;padding:10px 14px;border-radius:var(--radius);font-family:var(--mono);font-size:12px;color:#86efac;line-height:1.8;">ollama pull qwen2.5:7b<br>ollama pull nomic-embed-text</div>
534
- </div>
535
- </div>
536
- <div id="ollama-offline" style="display:none;">
537
- <div class="card">
538
- <div style="display:flex;align-items:center;gap:8px;margin-bottom:12px;">
539
- <span class="status-dot red"></span>
540
- <span style="font-size:14px;font-weight:600;">Ollama 未检测到</span>
541
- </div>
542
- <p style="font-size:13px;color:var(--text-muted);margin-bottom:16px;">在本地运行 AI 模型,完全免费、无需联网、数据不外泄</p>
543
- <div style="display:flex;flex-direction:column;gap:14px;">
544
- <div style="display:flex;gap:12px;">
545
- <div style="width:26px;height:26px;min-width:26px;background:var(--accent);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:white;">1</div>
546
- <div>
547
- <div style="font-size:14px;font-weight:500;margin-bottom:2px;">下载 Ollama</div>
548
- <div style="font-size:12px;color:var(--text-muted);margin-bottom:6px;">访问官网下载安装包(约 200MB,免费)</div>
549
- <a href="https://ollama.com/download" target="_blank" class="btn btn-secondary btn-sm">打开下载页面 ↗</a>
550
- </div>
551
- </div>
552
- <div style="display:flex;gap:12px;">
553
- <div style="width:26px;height:26px;min-width:26px;background:var(--accent);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:white;">2</div>
554
- <div>
555
- <div style="font-size:14px;font-weight:500;margin-bottom:2px;">安装并启动</div>
556
- <div style="font-size:12px;color:var(--text-muted);">按向导安装,Ollama 会自动在后台运行</div>
557
- </div>
558
- </div>
559
- <div style="display:flex;gap:12px;">
560
- <div style="width:26px;height:26px;min-width:26px;background:var(--accent);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:white;">3</div>
561
- <div>
562
- <div style="font-size:14px;font-weight:500;margin-bottom:2px;">拉取推荐模型</div>
563
- <div style="font-size:12px;color:var(--text-muted);margin-bottom:6px;">在终端运行(首次约 5GB,之后永久免费)</div>
564
- <div style="background:#080808;padding:8px 12px;border-radius:var(--radius);font-family:var(--mono);font-size:12px;color:#86efac;">ollama pull qwen2.5:7b<br>ollama pull nomic-embed-text</div>
565
- </div>
566
- </div>
567
- </div>
568
- <button class="btn btn-primary" style="width:100%;margin-top:16px;" onclick="checkOllama()">✅ 已安装完成,重新检测</button>
569
- </div>
570
- </div>
571
- </div>
572
- <!-- Cloud tab -->
573
- <div class="tab-panel" id="tab-cloud">
574
- <p style="font-size:13px;color:var(--text-muted);margin-bottom:20px;">填入 API Key 即可使用云端大模型,Key 仅保存在本地配置文件中</p>
575
- <div id="cloud-providers"></div>
576
- <button class="btn btn-primary" style="width:100%;" onclick="saveCloudConfig()">💾 保存云端配置</button>
577
- <div id="cloud-save-msg" style="text-align:center;font-size:13px;color:var(--green);margin-top:8px;"></div>
578
- </div>
579
- <!-- Model assignment -->
580
- <div class="card" style="margin-top:24px;">
581
- <div style="font-size:15px;font-weight:600;margin-bottom:4px;">模型分配</div>
582
- <p style="font-size:12px;color:var(--text-muted);margin-bottom:16px;">将不同模型分配给不同任务,获得最佳效果</p>
583
- <div class="form-group">
584
- <label class="label">对话模型 <span style="color:var(--red);">*</span></label>
585
- <p class="help-text" style="margin-bottom:6px;">Agent 用来理解和回复消息的主模型</p>
586
- <select class="input" id="chat-model-select"></select>
587
- </div>
588
- <div class="form-group">
589
- <label class="label">嵌入模型(记忆专用)</label>
590
- <p class="help-text" style="margin-bottom:6px;">将记忆转为向量存储,推荐 nomic-embed-text</p>
591
- <select class="input" id="embed-model-select"></select>
592
- </div>
593
- <div style="display:flex;align-items:center;gap:12px;">
594
- <button class="btn btn-primary" onclick="saveModelAssignment()">💾 保存</button>
595
- <span id="model-save-msg" style="font-size:13px;color:var(--green);"></span>
596
- </div>
597
- </div>
598
- </div>
599
-
600
- <!-- SECTION: Channels -->
601
- <div class="settings-section" id="section-channels">
602
- <h2 style="font-size:18px;font-weight:700;margin-bottom:4px;">📡 渠道配置</h2>
603
- <p style="color:var(--text-muted);font-size:13px;margin-bottom:20px;">设置 Agent 与用户沟通的渠道,点击卡片进行配置</p>
604
- <div class="channel-grid" id="channel-cards"></div>
605
- </div>
606
-
607
- <!-- SECTION: Memory -->
608
- <div class="settings-section" id="section-memory">
609
- <h2 style="font-size:18px;font-weight:700;margin-bottom:4px;">🧠 记忆管理</h2>
610
- <p style="color:var(--text-muted);font-size:13px;margin-bottom:16px;">管理 Agent 的长期记忆(由 DeepBrain 驱动)</p>
611
- <div style="display:flex;align-items:center;gap:8px;margin-bottom:16px;" id="deepbrain-status">
612
- <span class="status-dot yellow"></span>
613
- <span style="font-size:13px;color:var(--text-muted);">正在检测 DeepBrain...</span>
614
- </div>
615
- <div id="deepbrain-online" style="display:none;">
616
- <div class="iframe-wrap"><iframe id="deepbrain-frame" src="http://localhost:4001" title="DeepBrain"></iframe></div>
617
- </div>
618
- <div id="deepbrain-offline" style="display:none;">
619
- <div class="card empty-state">
620
- <div class="empty-icon">🧠</div>
621
- <div class="empty-title">DeepBrain 未启动</div>
622
- <div class="empty-desc">DeepBrain 是独立的记忆管理模块,需要单独运行在端口 4001</div>
623
- <div style="display:flex;gap:8px;justify-content:center;flex-wrap:wrap;">
624
- <a href="http://localhost:4001" target="_blank" class="btn btn-primary">在新标签页打开 ↗</a>
625
- <button class="btn btn-secondary" onclick="checkDeepBrain()">🔄 重新检测</button>
626
- </div>
627
- </div>
628
- </div>
629
- </div>
630
-
631
- <!-- SECTION: Role -->
632
- <div class="settings-section" id="section-role">
633
- <h2 style="font-size:18px;font-weight:700;margin-bottom:4px;">👤 角色编辑</h2>
634
- <p style="color:var(--text-muted);font-size:13px;margin-bottom:16px;">设计 Agent 的人格和行为方式(由 Workstation 驱动)</p>
635
- <div style="display:flex;align-items:center;gap:8px;margin-bottom:16px;" id="workstation-status">
636
- <span class="status-dot yellow"></span>
637
- <span style="font-size:13px;color:var(--text-muted);">正在检测 Workstation...</span>
638
- </div>
639
- <div id="workstation-online" style="display:none;">
640
- <div class="iframe-wrap"><iframe id="workstation-frame" src="http://localhost:4003" title="Workstation"></iframe></div>
641
- </div>
642
- <div id="workstation-offline" style="display:none;">
643
- <div class="card empty-state">
644
- <div class="empty-icon">👤</div>
645
- <div class="empty-title">Workstation 未启动</div>
646
- <div class="empty-desc">Workstation 是独立的角色编辑模块,需要单独运行在端口 4003</div>
647
- <div style="display:flex;gap:8px;justify-content:center;flex-wrap:wrap;">
648
- <a href="http://localhost:4003" target="_blank" class="btn btn-primary">在新标签页打开 ↗</a>
649
- <button class="btn btn-secondary" onclick="checkWorkstation()">🔄 重新检测</button>
650
- </div>
651
- </div>
652
- </div>
653
- </div>
654
-
655
- <!-- SECTION: Status -->
656
- <div class="settings-section" id="section-status">
657
- <h2 style="font-size:18px;font-weight:700;margin-bottom:4px;">📊 运行状态</h2>
658
- <p style="color:var(--text-muted);font-size:13px;margin-bottom:20px;">查看 Studio 和 Agent 的运行情况</p>
659
- <div class="card-grid" style="grid-template-columns:repeat(auto-fill,minmax(180px,1fr));margin-bottom:20px;">
660
- <div class="card">
661
- <div style="font-size:12px;color:var(--text-muted);margin-bottom:6px;">Studio 状态</div>
662
- <div style="display:flex;align-items:center;gap:6px;font-size:15px;font-weight:600;">
663
- <span class="status-dot green"></span> 运行中
664
- </div>
665
- </div>
666
- <div class="card">
667
- <div style="font-size:12px;color:var(--text-muted);margin-bottom:6px;">运行时长</div>
668
- <div style="font-size:15px;font-weight:600;" id="status-uptime">--</div>
669
- </div>
670
- <div class="card">
671
- <div style="font-size:12px;color:var(--text-muted);margin-bottom:6px;">内存占用</div>
672
- <div style="font-size:15px;font-weight:600;" id="status-memory">-- MB</div>
673
- </div>
674
- <div class="card">
675
- <div style="font-size:12px;color:var(--text-muted);margin-bottom:6px;">启动 Agent</div>
676
- <code style="background:var(--bg-hover);padding:4px 8px;border-radius:4px;font-size:12px;color:var(--text-muted);">opc run</code>
677
- </div>
678
- </div>
679
- <div class="card">
680
- <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;">
681
- <div style="font-size:14px;font-weight:600;">📋 最近日志(最后 50 行)</div>
682
- <button class="btn btn-secondary btn-sm" onclick="refreshStatus()">🔄 刷新</button>
683
- </div>
684
- <div class="log-viewer" id="status-logs">暂无日志记录</div>
685
- </div>
686
- </div>
687
-
688
- <!-- SECTION: Usage -->
689
- <div class="settings-section" id="section-usage">
690
- <h2 style="font-size:18px;font-weight:700;margin-bottom:4px;">💰 用量统计</h2>
691
- <p style="color:var(--text-muted);font-size:13px;margin-bottom:20px;">Token 消耗和费用概览(近 7 天)</p>
692
- <div class="card-grid" style="grid-template-columns:repeat(auto-fill,minmax(180px,1fr));margin-bottom:20px;">
693
- <div class="card">
694
- <div style="font-size:12px;color:var(--text-muted);margin-bottom:4px;">总 Token 用量</div>
695
- <div style="font-size:26px;font-weight:700;" id="usage-total-tokens">0</div>
696
- <div style="font-size:11px;color:var(--text-dim);margin-top:2px;">近 7 天</div>
697
- </div>
698
- <div class="card">
699
- <div style="font-size:12px;color:var(--text-muted);margin-bottom:4px;">预估费用</div>
700
- <div style="font-size:26px;font-weight:700;" id="usage-total-cost">$0.00</div>
701
- <div style="font-size:11px;color:var(--text-dim);margin-top:2px;">近 7 天</div>
702
- </div>
703
- </div>
704
- <div class="card" style="margin-bottom:20px;">
705
- <div style="font-size:14px;font-weight:600;margin-bottom:16px;">📈 每日 Token 用量</div>
706
- <div class="bar-chart-wrap" id="usage-chart"></div>
707
- </div>
708
- <div class="card">
709
- <div style="font-size:14px;font-weight:600;margin-bottom:12px;">按模型分类</div>
710
- <div id="usage-by-model"><div style="font-size:13px;color:var(--text-muted);">暂无使用记录。开始与 Agent 对话后将自动统计。</div></div>
711
- </div>
712
- </div>
713
-
714
- <!-- SECTION: Image Generation -->
715
- <div class="settings-section" id="section-imagegen">
716
- <h2 style="font-size:18px;font-weight:700;margin-bottom:4px;">🎨 图片生成</h2>
717
- <p style="color:var(--text-muted);font-size:13px;margin-bottom:20px;">Configure image generation providers for your agents</p>
718
- <div class="card" style="margin-bottom:16px;">
719
- <div style="font-size:14px;font-weight:600;margin-bottom:12px;">DALL·E (OpenAI)</div>
720
- <div class="form-group">
721
- <label class="label">OpenAI API Key</label>
722
- <input class="input" id="ig-openai-key" type="password" placeholder="sk-...">
723
- </div>
724
- </div>
725
- <div class="card" style="margin-bottom:16px;">
726
- <div style="font-size:14px;font-weight:600;margin-bottom:12px;">Stable Diffusion (Local)</div>
727
- <div class="form-group">
728
- <label class="label">API URL</label>
729
- <input class="input" id="ig-sd-url" placeholder="http://localhost:7860">
730
- </div>
731
- </div>
732
- <div class="card" style="margin-bottom:16px;">
733
- <div style="font-size:14px;font-weight:600;margin-bottom:12px;">Replicate</div>
734
- <div class="form-group">
735
- <label class="label">API Token</label>
736
- <input class="input" id="ig-replicate-key" type="password" placeholder="r8_...">
737
- </div>
738
- </div>
739
- <button class="btn btn-primary" onclick="saveImageGenConfig()">💾 Save Configuration</button>
740
- <div id="ig-status" style="margin-top:12px;font-size:13px;color:var(--text-muted);"></div>
741
- </div>
742
-
743
- </div><!-- end settings-content -->
744
- </div><!-- end settings-layout -->
745
- </div><!-- end page-settings -->
746
489
 
747
490
  <!-- Memory Page -->
748
491
  <div class="page" id="page-memory">