feat: initial release - Hunzi agent framework v0.1.0
This commit is contained in:
+293
@@ -0,0 +1,293 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Hunzi 智能体框架</title>
|
||||
<link rel="stylesheet" href="/static/css/style.css">
|
||||
</head>
|
||||
<body>
|
||||
<!-- Sidebar -->
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-header">
|
||||
<a href="#" class="logo">
|
||||
<span class="logo-icon">🐟</span>
|
||||
<span>Hunzi</span>
|
||||
</a>
|
||||
</div>
|
||||
<nav class="sidebar-nav">
|
||||
<div class="nav-section">
|
||||
<div class="nav-section-title">概览</div>
|
||||
<button class="nav-item active" data-page="dashboard">
|
||||
<span class="nav-icon">📊</span> 控制台
|
||||
</button>
|
||||
</div>
|
||||
<div class="nav-section">
|
||||
<div class="nav-section-title">管理</div>
|
||||
<button class="nav-item" data-page="agents">
|
||||
<span class="nav-icon">🤖</span> 智能体
|
||||
</button>
|
||||
<button class="nav-item" data-page="tools">
|
||||
<span class="nav-icon">🔧</span> 工具
|
||||
</button>
|
||||
<button class="nav-item" data-page="workflows">
|
||||
<span class="nav-icon">🔄</span> 工作流
|
||||
</button>
|
||||
</div>
|
||||
<div class="nav-section">
|
||||
<div class="nav-section-title">对话</div>
|
||||
<button class="nav-item" data-page="chat">
|
||||
<span class="nav-icon">💬</span> 对话
|
||||
</button>
|
||||
</div>
|
||||
<div class="nav-section">
|
||||
<div class="nav-section-title">系统</div>
|
||||
<button class="nav-item" data-page="monitor">
|
||||
<span class="nav-icon">📡</span> 监控
|
||||
</button>
|
||||
</div>
|
||||
</nav>
|
||||
</aside>
|
||||
|
||||
<!-- Main -->
|
||||
<div class="main-content">
|
||||
<header class="topbar">
|
||||
<h1 class="topbar-title" id="pageTitle">控制台</h1>
|
||||
<div class="topbar-actions">
|
||||
<button class="btn btn-secondary btn-sm" onclick="refreshCurrent()">🔄 刷新</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="page-content">
|
||||
<!-- Dashboard Page -->
|
||||
<div class="page active" id="page-dashboard">
|
||||
<div class="stats-grid">
|
||||
<div class="stat-card">
|
||||
<div class="stat-value" id="stat-agents">0</div>
|
||||
<div class="stat-label">智能体</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-value" id="stat-tools">0</div>
|
||||
<div class="stat-label">工具</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-value" id="stat-workflows">0</div>
|
||||
<div class="stat-label">工作流</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-value" id="stat-conversations">0</div>
|
||||
<div class="stat-label">对话数</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">快速开始</h3>
|
||||
</div>
|
||||
<div style="display:flex;gap:8px;flex-wrap:wrap;">
|
||||
<button class="btn btn-primary" onclick="navigateTo('agents');showAgentModal()">➕ 创建智能体</button>
|
||||
<button class="btn btn-secondary" onclick="navigateTo('chat')">💬 开始对话</button>
|
||||
<button class="btn btn-secondary" onclick="navigateTo('workflows')">🔄 创建工作流</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">系统状态</h3>
|
||||
</div>
|
||||
<div id="health-status">
|
||||
<span class="spinner"></span> 检查中...
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Agents Page -->
|
||||
<div class="page" id="page-agents">
|
||||
<div style="margin-bottom:16px;">
|
||||
<button class="btn btn-primary" onclick="showAgentModal()">➕ 创建智能体</button>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="table-container">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>名称</th>
|
||||
<th>描述</th>
|
||||
<th>模型</th>
|
||||
<th>温度</th>
|
||||
<th>工具数</th>
|
||||
<th>创建时间</th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="agents-table-body">
|
||||
<tr><td colspan="7" style="text-align:center;color:var(--text-muted);padding:40px;">加载中...</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tools Page -->
|
||||
<div class="page" id="page-tools">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">已注册工具</h3>
|
||||
</div>
|
||||
<div id="tools-list"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Workflows Page -->
|
||||
<div class="page" id="page-workflows">
|
||||
<div style="margin-bottom:16px;">
|
||||
<button class="btn btn-primary" onclick="showWorkflowModal()">➕ 创建工作流</button>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="table-container">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>名称</th>
|
||||
<th>描述</th>
|
||||
<th>状态</th>
|
||||
<th>步骤数</th>
|
||||
<th>创建时间</th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="workflows-table-body">
|
||||
<tr><td colspan="6" style="text-align:center;color:var(--text-muted);padding:40px;">加载中...</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Chat Page -->
|
||||
<div class="page" id="page-chat">
|
||||
<div class="chat-container">
|
||||
<div class="agent-selector">
|
||||
<label style="font-size:13px;color:var(--text-secondary);">选择智能体：</label>
|
||||
<select class="form-select" id="chat-agent-select" style="width:auto;min-width:200px;">
|
||||
<option value="">-- 请先创建智能体 --</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="chat-messages" id="chat-messages">
|
||||
<div class="empty-state">
|
||||
<div class="empty-icon">💬</div>
|
||||
<div class="empty-text">开始与智能体对话</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chat-input-area">
|
||||
<div class="chat-input-row">
|
||||
<input type="text" class="chat-input" id="chat-input" placeholder="输入消息..." onkeydown="if(event.key==='Enter')sendMessage()">
|
||||
<button class="btn btn-primary" onclick="sendMessage()">发送</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Monitor Page -->
|
||||
<div class="page" id="page-monitor">
|
||||
<div class="stats-grid">
|
||||
<div class="stat-card">
|
||||
<div class="stat-value" id="mon-uptime">--</div>
|
||||
<div class="stat-label">运行状态</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-value" id="mon-version">0.1.0</div>
|
||||
<div class="stat-label">版本</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">系统日志</h3>
|
||||
<button class="btn btn-secondary btn-sm" onclick="loadHealth()">🔄 刷新</button>
|
||||
</div>
|
||||
<div id="monitor-log" style="font-family:monospace;font-size:12px;color:var(--text-secondary);background:var(--bg-tertiary);padding:12px;border-radius:var(--radius-sm);max-height:400px;overflow-y:auto;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Agent Modal -->
|
||||
<div class="modal-overlay" id="agent-modal" style="display:none;">
|
||||
<div class="modal">
|
||||
<div class="modal-header">
|
||||
<h3 class="modal-title" id="agent-modal-title">创建智能体</h3>
|
||||
<button class="modal-close" onclick="closeModal('agent-modal')">×</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="form-group">
|
||||
<label class="form-label">名称 *</label>
|
||||
<input type="text" class="form-input" id="agent-name" placeholder="我的智能体">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">描述</label>
|
||||
<input type="text" class="form-input" id="agent-description" placeholder="智能体描述">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">系统提示词</label>
|
||||
<textarea class="form-textarea" id="agent-system-prompt" rows="4" placeholder="你是一个有用的助手...">你是一个有用的助手。</textarea>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">LLM 提供商</label>
|
||||
<input type="text" class="form-input" id="agent-llm-provider" value="default">
|
||||
</div>
|
||||
<div style="display:grid;grid-template-columns:1fr 1fr;gap:12px;">
|
||||
<div class="form-group">
|
||||
<label class="form-label">温度</label>
|
||||
<input type="number" class="form-input" id="agent-temperature" value="0.7" min="0" max="2" step="0.1">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">最大 Token</label>
|
||||
<input type="number" class="form-input" id="agent-max-tokens" value="4096">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">工具 (逗号分隔)</label>
|
||||
<input type="text" class="form-input" id="agent-tools" placeholder="python_repl,web_search,file_read">
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button class="btn btn-secondary" onclick="closeModal('agent-modal')">取消</button>
|
||||
<button class="btn btn-primary" onclick="saveAgent()">保存</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Workflow Modal -->
|
||||
<div class="modal-overlay" id="workflow-modal" style="display:none;">
|
||||
<div class="modal" style="width:620px;">
|
||||
<div class="modal-header">
|
||||
<h3 class="modal-title">创建工作流</h3>
|
||||
<button class="modal-close" onclick="closeModal('workflow-modal')">×</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="form-group">
|
||||
<label class="form-label">名称 *</label>
|
||||
<input type="text" class="form-input" id="wf-name" placeholder="我的工作流">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">描述</label>
|
||||
<input type="text" class="form-input" id="wf-description" placeholder="工作流描述">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">步骤定义 (JSON)</label>
|
||||
<textarea class="form-textarea" id="wf-steps" rows="10" placeholder='[{"name":"step1","agent_id":"xxx","prompt":"..."}]'></textarea>
|
||||
<div style="font-size:11px;color:var(--text-muted);margin-top:4px;">
|
||||
每步格式: {"name":"步骤名","agent_id":"agent的UUID","prompt":"提示","inputs":[],"condition":null,"parallel":false}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button class="btn btn-secondary" onclick="closeModal('workflow-modal')">取消</button>
|
||||
<button class="btn btn-primary" onclick="saveWorkflow()">创建</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="/static/js/app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user