diff --git a/static/index.html b/static/index.html
new file mode 100644
index 0000000..1c5a757
--- /dev/null
+++ b/static/index.html
@@ -0,0 +1,225 @@
+<!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>
\ No newline at end of file
