225 lines
12 KiB
HTML
225 lines
12 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Gemini AI 助手</title>
|
|
<link rel="stylesheet" href="/static/css/style.css">
|
|
<link rel="stylesheet" href="/static/css/modern-style.css">
|
|
<link rel="icon" href="/favicon.ico" type="image/x-icon">
|
|
<!-- 引入 Font Awesome 图标库 -->
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
|
|
<!-- Google Fonts -->
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link
|
|
href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap"
|
|
rel="stylesheet">
|
|
</head>
|
|
</head>
|
|
|
|
<body>
|
|
<div id="toast-container"></div>
|
|
<div class="container">
|
|
<aside class="sidebar">
|
|
<div class="logo">
|
|
<i class="fas fa-brain"></i> Gemini Chat
|
|
</div>
|
|
<nav class="nav-menu">
|
|
<a href="#" class="nav-item active" data-target="chat-section"><i class="fas fa-comments"></i> 聊天</a>
|
|
<a href="#" class="nav-item" data-target="config-section"><i class="fas fa-cogs"></i> 配置</a>
|
|
<a href="#" class="nav-item" data-target="features-section"><i class="fas fa-user-tag"></i> 特征</a>
|
|
<a href="#" class="nav-item" data-target="memory-section"><i class="fas fa-memory"></i> 记忆</a>
|
|
<a href="#" class="nav-item" data-target="log-section"><i class="fas fa-clipboard-list"></i> 日志</a>
|
|
</nav>
|
|
<div class="session-info">
|
|
<h4>当前会话</h4>
|
|
<p>角色: <span id="current-role-name">加载中...</span> (<span id="current-role-id"></span>)</p>
|
|
<p>记忆: <span id="current-memory-name">加载中...</span> (<span id="current-memory-id"></span>)</p>
|
|
<p>轮次: <span id="current-turn-counter">0</span></p>
|
|
<div class="status-indicator" id="memory-update-status">
|
|
<i class="fas fa-circle status-dot"></i> <span class="status-text">记忆状态</span>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
|
|
<main class="main-content">
|
|
<!-- 聊天区 -->
|
|
<section id="chat-section" class="content-section active">
|
|
<div class="chat-header">
|
|
<h2><i class="fas fa-comments"></i> 聊天</h2>
|
|
<div class="header-actions">
|
|
<button id="toggle-width-btn" class="action-button secondary"><i class="fas fa-expand-alt"></i>
|
|
切换宽度</button>
|
|
<button id="clear-chat-history-btn" class="action-button primary"><i class="fas fa-trash"></i>
|
|
清空聊天记录</button>
|
|
</div>
|
|
</div>
|
|
<div class="chat-window" id="chat-window">
|
|
<!-- 聊天消息将在这里动态加载 -->
|
|
</div>
|
|
<!-- 消息模板 -->
|
|
<template id="message-template">
|
|
<div class="chat-message">
|
|
<div class="message-avatar"></div>
|
|
<div class="message-content-wrapper">
|
|
<div class="message-bubble"></div>
|
|
<div class="message-timestamp"></div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<div class="chat-input-area">
|
|
<textarea id="user-input" placeholder="输入你的消息..." rows="3"></textarea>
|
|
<button id="send-btn" class="action-button primary"><i class="fas fa-paper-plane"></i> 发送</button>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 配置区 -->
|
|
<section id="config-section" class="content-section">
|
|
<div class="section-header">
|
|
<h2><i class="fas fa-cogs"></i> 配置管理</h2>
|
|
<button id="save-config-btn" class="action-button primary"><i class="fas fa-save"></i> 保存配置</button>
|
|
</div>
|
|
<div class="config-form" id="config-form">
|
|
<h3>API 配置</h3>
|
|
<div class="form-group">
|
|
<div class="form-field">
|
|
<label for="gemini-api-base-url">Gemini API 基准URL:</label>
|
|
<input type="text" id="gemini-api-base-url" name="GEMINI_API_BASE_URL">
|
|
</div>
|
|
|
|
<div class="form-field">
|
|
<label for="gemini-api-key">Gemini API Key:</label>
|
|
<input type="password" id="gemini-api-key" name="GEMINI_API_KEY">
|
|
<div class="password-toggle">
|
|
<input type="checkbox" id="show-api-key">
|
|
<label for="show-api-key">显示密钥</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<div class="form-field">
|
|
<label for="default-gemini-model">默认对话模型:</label>
|
|
<select id="default-gemini-model" name="DEFAULT_GEMINI_MODEL"></select>
|
|
</div>
|
|
|
|
<div class="form-field">
|
|
<label for="memory-update-model">记忆更新模型:</label>
|
|
<select id="memory-update-model" name="MEMORY_UPDATE_MODEL"></select>
|
|
</div>
|
|
</div>
|
|
|
|
<h3>应用配置</h3>
|
|
<div class="form-group">
|
|
<div class="form-field">
|
|
<label for="context-window-size">上下文窗口大小 (N轮对话):</label>
|
|
<input type="number" id="context-window-size" name="CONTEXT_WINDOW_SIZE" min="1" step="1">
|
|
</div>
|
|
|
|
<div class="form-field">
|
|
<label for="memory-retention-turns">短期记忆保留轮次:</label>
|
|
<input type="number" id="memory-retention-turns" name="MEMORY_RETENTION_TURNS" min="1"
|
|
step="1">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<div class="form-field">
|
|
<label for="max-short-term-events">最大短期事件数量:</label>
|
|
<input type="number" id="max-short-term-events" name="MAX_SHORT_TERM_EVENTS" min="1"
|
|
step="1">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 特征区 -->
|
|
<section id="features-section" class="content-section">
|
|
<div class="section-header">
|
|
<h2><i class="fas fa-user-tag"></i> 特征管理</h2>
|
|
<div class="header-actions">
|
|
<button id="refresh-features-btn" class="action-button secondary"><i
|
|
class="fas fa-sync-alt"></i> 刷新</button>
|
|
<button id="save-features-btn" class="action-button primary"><i class="fas fa-save"></i>
|
|
保存特征</button>
|
|
</div>
|
|
</div>
|
|
<div class="role-management">
|
|
<h3>角色切换/管理</h3>
|
|
<div class="role-list" id="role-list">
|
|
<!-- 角色列表将在这里动态加载 -->
|
|
</div>
|
|
<div class="new-role-form">
|
|
<input type="text" id="new-role-id" placeholder="新角色ID (英文)">
|
|
<input type="text" id="new-role-name" placeholder="新角色名称 (中文)">
|
|
<button id="create-role-btn" class="action-button primary"><i class="fas fa-plus"></i>
|
|
创建新角色</button>
|
|
</div>
|
|
</div>
|
|
<h3>当前角色特征内容</h3>
|
|
<textarea id="features-content" class="code-editor" rows="25" readonly></textarea>
|
|
</section>
|
|
|
|
<!-- 记忆区 -->
|
|
<section id="memory-section" class="content-section">
|
|
<div class="section-header">
|
|
<h2><i class="fas fa-memory"></i> 记忆管理</h2>
|
|
<div class="header-actions">
|
|
<button id="refresh-memory-btn" class="action-button secondary"><i class="fas fa-sync-alt"></i>
|
|
刷新</button>
|
|
<button id="save-memory-btn" class="action-button primary"><i class="fas fa-save"></i>
|
|
保存记忆</button>
|
|
<button id="trigger-memory-update-btn" class="action-button primary"><i
|
|
class="fas fa-lightbulb"></i> 触发记忆更新</button>
|
|
</div>
|
|
</div>
|
|
<div class="memory-management">
|
|
<h3>记忆集切换/管理</h3>
|
|
<div class="memory-list" id="memory-list">
|
|
<!-- 记忆集列表将在这里动态加载 -->
|
|
</div>
|
|
<div class="new-memory-form">
|
|
<input type="text" id="new-memory-id" placeholder="新记忆集ID (英文)">
|
|
<input type="text" id="new-memory-name" placeholder="新记忆集名称 (中文)">
|
|
<button id="create-memory-btn" class="action-button primary"><i class="fas fa-plus"></i>
|
|
创建新记忆集</button>
|
|
</div>
|
|
</div>
|
|
<h3>当前记忆集内容</h3>
|
|
<textarea id="memory-content" class="code-editor" rows="25" readonly></textarea>
|
|
</section>
|
|
|
|
<!-- 日志区 -->
|
|
<section id="log-section" class="content-section">
|
|
<div class="section-header">
|
|
<h2><i class="fas fa-clipboard-list"></i> 应用日志</h2>
|
|
<button id="refresh-log-btn" class="action-button secondary"><i class="fas fa-sync-alt"></i>
|
|
刷新日志</button>
|
|
</div>
|
|
<pre id="log-content" class="log-viewer"></pre>
|
|
</section>
|
|
</main>
|
|
</div>
|
|
|
|
<script src="/static/js/lib/marked.min.js"></script>
|
|
<script src="/static/js/lib/purify.min.js"></script>
|
|
<script type="module" src="/static/js/api.js"></script>
|
|
<script type="module" src="/static/js/ui_manager.js"></script>
|
|
<script type="module" src="/static/js/app.js"></script>
|
|
|
|
<!-- 模态框结构 -->
|
|
<div id="modal-overlay" class="modal-overlay">
|
|
<div class="modal-content">
|
|
<h3 id="modal-title"></h3>
|
|
<p id="modal-message"></p>
|
|
<div class="modal-buttons">
|
|
<button id="modal-confirm-btn" class="action-button primary">确认</button>
|
|
<button id="modal-cancel-btn" class="action-button secondary">取消</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
|
|
</html> |