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