Upload 5 files

Dockerfile

@@ -1,24 +1,24 @@
-FROM python:3.11-slim
-
-# 设置用户为root
-USER root
-
-WORKDIR /app
-
-COPY requirements.txt .
-RUN pip install --no-cache-dir -r requirements.txt
-
-COPY . .
-
-# 设置环境变量
-ENV HOST=0.0.0.0
-ENV PORT=7860
-
-# 删除敏感文件
-RUN rm -f config.json password.txt
-
-# 暴露端口（Hugging Face默认使用7860端口）
-EXPOSE 7860
-
-# 启动命令
+FROM python:3.11-slim
+
+# 设置用户为root
+USER root
+
+WORKDIR /app
+
+COPY requirements.txt .
+RUN pip install --no-cache-dir -r requirements.txt
+
+COPY . .
+
+# 设置环境变量
+ENV HOST=0.0.0.0
+ENV PORT=7860
+
+# 删除敏感文件
+RUN rm -f config.json password.txt
+
+# 暴露端口（Hugging Face默认使用7860端口）
+EXPOSE 7860
+
+# 启动命令
 CMD ["python", "app.py"] 

app.py

@@ -12,11 +12,21 @@ import jwt
 import os
 import threading
 from datetime import datetime, timedelta
+import asyncio
+import httpx
+from concurrent.futures import ThreadPoolExecutor
+import atexit
 
 app = Flask(__name__, template_folder='templates')
 app.secret_key = os.environ.get("SECRET_KEY", "abacus_chat_proxy_secret_key")
 app.config['PERMANENT_SESSION_LIFETIME'] = timedelta(days=7)
 
+# 创建一个线程池用于执行 token 计算
+token_executor = ThreadPoolExecutor(max_workers=5)
+
+# 确保程序退出时关闭线程池
+atexit.register(token_executor.shutdown, wait=True)
+
 # 添加tokenizer服务URL
 TOKENIZER_SERVICE_URL = "https://malt666-tokenizer.hf.space/count_tokens"
 
@@ -230,7 +240,7 @@ def is_token_expired(token):
         return True
 
 
-def refresh_token(session, cookies):
+async def refresh_token(client: httpx.AsyncClient, cookies):
     """Uzu kuketon por refreŝigi session token, nur revenigu novan tokenon"""
     headers = {
         "accept": "application/json, text/plain, */*",
@@ -251,13 +261,14 @@ def refresh_token(session, cookies):
     }
     
     try:
-        response = session.post(
+        # 使用 httpx.AsyncClient 发送异步请求
+        response = await client.post(
             USER_INFO_URL,
             headers=headers,
             json={},
-            cookies=None
+            # cookies=None # httpx doesn't use cookies param like this with client
         )
-        
+
         if response.status_code == 200:
             response_data = response.json()
             if response_data.get('success') and 'sessionToken' in response_data.get('result', {}):
@@ -273,7 +284,7 @@ def refresh_token(session, cookies):
         return None
 
 
-def get_model_map(session, cookies, session_token):
+async def get_model_map(client: httpx.AsyncClient, cookies, session_token):
     """Akiru disponeblan modelan liston kaj ĝiajn mapajn rilatojn"""
     headers = {
         "accept": "application/json, text/plain, */*",
@@ -300,11 +311,12 @@ def get_model_map(session, cookies, session_token):
     models_set = set()
     
     try:
-        response = session.post(
+        # 使用 httpx.AsyncClient 发送异步请求
+        response = await client.post(
             MODEL_LIST_URL,
             headers=headers,
             json={},
-            cookies=None
+            # cookies=None
         )
         
         if response.status_code != 200:
@@ -345,74 +357,102 @@ def get_model_map(session, cookies, session_token):
         raise
 
 
-def init_session():
+async def init_session():
     get_password()
     global USER_NUM, MODELS, USER_DATA
     
     config_list = resolve_config()
     user_num = len(config_list)
     all_models = set()
-    
+
+    # 创建一个列表来收集异步任务
+    init_tasks = []
+
     for i in range(user_num):
         user = config_list[i]
         cookies = user.get("cookies")
         conversation_id = user.get("conversation_id")
-        session = requests.Session()
-        
-        session_token = refresh_token(session, cookies)
-        if not session_token:
-            print(f"无法获取cookie {i+1}的token")
-            continue
-        
-        try:
-            model_map, models_set = get_model_map(session, cookies, session_token)
-            all_models.update(models_set)
-            USER_DATA.append((session, cookies, session_token, conversation_id, model_map, i))
-            
-            # 对第一个成功配置的用户，初始化计算点数记录功能
-            if i == 0:
-                try:
-                    headers = {
-                        "accept": "application/json, text/plain, */*",
-                        "accept-language": "zh-CN,zh;q=0.9",
-                        "content-type": "application/json",
-                        "reai-ui": "1",
-                        "sec-ch-ua": "\"Chromium\";v=\"116\", \"Not)A;Brand\";v=\"24\", \"Google Chrome\";v=\"116\"",
-                        "sec-ch-ua-mobile": "?0",
-                        "sec-ch-ua-platform": "\"Windows\"",
-                        "sec-fetch-dest": "empty",
-                        "sec-fetch-mode": "cors",
-                        "sec-fetch-site": "same-site",
-                        "x-abacus-org-host": "apps",
-                        "session-token": session_token
-                    }
-                    
-                    response = session.post(
-                        COMPUTE_POINT_TOGGLE_URL,
-                        headers=headers,
-                        json={"alwaysDisplay": True},
-                        cookies=None
-                    )
-                    
-                    if response.status_code == 200:
-                        result = response.json()
-                        if result.get("success"):
-                            print("成功初始化计算点数记录功能为开启状态")
+        # 创建 httpx.AsyncClient 实例
+        client = httpx.AsyncClient(timeout=30.0) # 设置超时
+
+        # 将每个用户的初始化变成一个异步任务
+        async def initialize_user(i, client, cookies, conversation_id):
+            session_token = await refresh_token(client, cookies) # await 调用异步函数
+            if not session_token:
+                print(f"无法获取cookie {i+1}的token")
+                await client.aclose() # 关闭 client
+                return None
+
+            try:
+                model_map, models_set = await get_model_map(client, cookies, session_token) # await 调用异步函数
+                # 用户数据现在包含 httpx.AsyncClient
+                user_entry = (client, cookies, session_token, conversation_id, model_map, i)
+
+                # 对第一个成功配置的用户，初始化计算点数记录功能 (改为异步)
+                if i == 0:
+                    try:
+                        headers = {
+                           "accept": "application/json, text/plain, */*",
+                           "accept-language": "zh-CN,zh;q=0.9",
+                           "content-type": "application/json",
+                           "reai-ui": "1",
+                           "sec-ch-ua": "\"Chromium\";v=\"116\", \"Not)A;Brand\";v=\"24\", \"Google Chrome\";v=\"116\"",
+                           "sec-ch-ua-mobile": "?0",
+                           "sec-ch-ua-platform": "\"Windows\"",
+                           "sec-fetch-dest": "empty",
+                           "sec-fetch-mode": "cors",
+                           "sec-fetch-site": "same-site",
+                           "x-abacus-org-host": "apps",
+                           "session-token": session_token
+                        }
+
+                        response = await client.post( # await 调用异步函数
+                            COMPUTE_POINT_TOGGLE_URL,
+                            headers=headers,
+                            json={"alwaysDisplay": True},
+                            # cookies=None
+                        )
+
+                        if response.status_code == 200:
+                            result = response.json()
+                            if result.get("success"):
+                                print("成功初始化计算点数记录功能为开启状态")
+                            else:
+                                print(f"初始化计算点数记录功能失败: {result.get('error', '未知错误')}")
                         else:
-                            print(f"初始化计算点数记录功能失败: {result.get('error', '未知错误')}")
-                    else:
-                        print(f"初始化计算点数记录功能失败，状态码: {response.status_code}")
-                except Exception as e:
-                    print(f"初始化计算点数记录功能时出错: {e}")
-        except Exception as e:
-            print(f"配置用户 {i+1} 失败: {e}")
-            continue
-    
+                            print(f"初始化计算点数记录功能失败，状态码: {response.status_code}")
+                    except Exception as e:
+                        print(f"初始化计算点数记录功能时出错: {e}")
+
+                return user_entry, models_set # 返回用户数据和模型集合
+            except Exception as e:
+                print(f"配置用户 {i+1} 失败: {e}")
+                await client.aclose() # 关闭 client
+                return None
+
+        # 添加任务到列表
+        init_tasks.append(initialize_user(i, client, cookies, conversation_id))
+
+    # 并发执行所有用户初始化任务
+    results = await asyncio.gather(*init_tasks)
+
+    # 处理结果
+    temp_user_data = []
+    for result in results:
+        if result:
+            user_entry, models_set = result
+            temp_user_data.append(user_entry)
+            all_models.update(models_set)
+
+    # 按原始索引排序 (虽然 gather 可能保持顺序，但显式排序更安全)
+    USER_DATA = sorted(temp_user_data, key=lambda x: x[5])
+
     USER_NUM = len(USER_DATA)
     if USER_NUM == 0:
         print("No user available, exiting...")
-        exit(1)
-    
+        # 在异步函数中不能直接 exit(1)，可以引发异常或返回特殊值
+        raise RuntimeError("No user available")
+
     MODELS = all_models
     print(f"启动完成，共配置 {USER_NUM} 个用户")
 
@@ -430,79 +470,28 @@ def update_cookie(session, cookies):
     return cookies
 
 
-user_data = init_session()
-
-
-@app.route("/v1/models", methods=["GET"])
-@require_auth
-def get_models():
-    if len(MODELS) == 0:
-        return jsonify({"error": "No models available"}), 500
-    model_list = []
-    for model in MODELS:
-        model_list.append(
-            {
-                "id": model,
-                "object": "model",
-                "created": int(time.time()),
-                "owned_by": "Elbert",
-                "name": model,
-            }
-        )
-    return jsonify({"object": "list", "data": model_list})
-
-
-@app.route("/v1/chat/completions", methods=["POST"])
-@require_auth
-def chat_completions():
-    openai_request = request.get_json()
-    stream = openai_request.get("stream", False)
-    messages = openai_request.get("messages")
-    if messages is None:
-        return jsonify({"error": "Messages is required", "status": 400}), 400
-    model = openai_request.get("model")
-    if model not in MODELS:
-        return (
-            jsonify(
-                {
-                    "error": "Model not available, check if it is configured properly",
-                    "status": 404,
-                }
-            ),
-            404,
-        )
-    message = format_message(messages)
-    think = (
-        openai_request.get("think", False) if model == "Claude Sonnet 3.7" else False
-    )
-    return (
-        send_message(message, model, think)
-        if stream
-        else send_message_non_stream(message, model, think)
-    )
-
-
-def get_user_data():
+# 修改 get_user_data 以处理异步 refresh_token
+async def get_user_data():
     global CURRENT_USER
     CURRENT_USER = (CURRENT_USER + 1) % USER_NUM
     print(f"使用配置 {CURRENT_USER+1}")
-    
+
     # Akiru uzantajn datumojn
-    session, cookies, session_token, conversation_id, model_map, user_index = USER_DATA[CURRENT_USER]
-    
+    client, cookies, session_token, conversation_id, model_map, user_index = USER_DATA[CURRENT_USER]
+
     # Kontrolu ĉu la tokeno eksvalidiĝis, se jes, refreŝigu ĝin
     if is_token_expired(session_token):
         print(f"Cookie {CURRENT_USER+1}的token已过期或即将过期，正在刷新...")
-        new_token = refresh_token(session, cookies)
+        new_token = await refresh_token(client, cookies)
         if new_token:
             # Ĝisdatigu la globale konservitan tokenon
-            USER_DATA[CURRENT_USER] = (session, cookies, new_token, conversation_id, model_map, user_index)
+            USER_DATA[CURRENT_USER] = (client, cookies, new_token, conversation_id, model_map, user_index)
             session_token = new_token
             print(f"成功更新token: {session_token[:15]}...{session_token[-15:]}")
         else:
             print(f"警告：无法刷新Cookie {CURRENT_USER+1}的token，继续使用当前token")
-    
-    return (session, cookies, session_token, conversation_id, model_map, user_index)
+
+    return (client, cookies, session_token, conversation_id, model_map, user_index)
 
 
 def create_conversation(session, cookies, session_token, external_application_id=None, deployment_id=None):
@@ -666,11 +655,11 @@ def send_message(message, model, think=False):
     
     trace_id, sentry_trace = generate_trace_id()
     
-    # 计算输入token
-    print("\n----- 计算输入token -----")
-    prompt_tokens, calculation_method = num_tokens_from_string(message, model)
-    print(f"输入token数: {prompt_tokens}")
-    print(f"计算方法: {calculation_method}")
+    # 计算输入token - 改为异步提交
+    print("\n----- 提交输入token计算任务 -----")
+    prompt_token_future = token_executor.submit(num_tokens_from_string, message, model)
+    print("输入token计算已提交到后台")
+    
     completion_buffer = io.StringIO()  # 收集所有输出用于计算token
     
     headers = {
@@ -740,11 +729,14 @@ def send_message(message, model, think=False):
                 return ""
         
         def generate():
+            # 流式处理函数
             id = ""
             think_state = 2
             
+            # 开始流式输出
             yield "data: " + json.dumps({"object": "chat.completion.chunk", "choices": [{"delta": {"role": "assistant"}}]}) + "\n\n"
             
+            # 处理API返回的流式内容
             for line in response.iter_lines():
                 if line:
                     decoded_line = line.decode("utf-8")
@@ -781,18 +773,27 @@ def send_message(message, model, think=False):
                     except Exception as e:
                         print(f"处理响应出错: {e}")
             
+            # 结束标记
             yield "data: " + json.dumps({"object": "chat.completion.chunk", "choices": [{"delta": {}, "finish_reason": "stop"}]}) + "\n\n"
             yield "data: [DONE]\n\n"
             
-            # 在流式传输完成后计算token并更新统计
-            completion_result, _ = num_tokens_from_string(completion_buffer.getvalue(), model)
-            
-            # 保存对话历史并获取计算点数
-            _, compute_points_used = save_conversation_history(session, cookies, session_token, conversation_id)
-            
-            # 更新统计信息
-            update_model_stats(model, prompt_tokens, completion_result, calculation_method, compute_points_used)
+            # 内容处理完毕后进行操作（其实不会执行到这里，因为响应已经流式传输给客户端）
+            try:
+                # 获取完整响应内容并计算输出Token
+                completion_text = completion_buffer.getvalue()
+                # 异步提交输出Token计算
+                completion_token_future = token_executor.submit(num_tokens_from_string, completion_text, model)
+                print("输出token计��已提交到后台")
+                
+                # 保存对话历史并获取计算点数
+                _, compute_points_used = save_conversation_history(session, cookies, session_token, conversation_id)
+                
+                # 更新统计信息
+                update_model_stats(model, prompt_token_future, completion_token_future, compute_points_used)
+            except Exception as post_e:
+                print(f"流结束后处理出错: {post_e}")
         
+        # 返回流式响应
         return Response(generate(), mimetype="text/event-stream")
     except requests.exceptions.RequestException as e:
         error_details = str(e)
@@ -823,7 +824,10 @@ def send_message(message, model, think=False):
                     USER_DATA[CURRENT_USER] = (session, cookies, session_token, new_conversation_id, model_map, user_index)
                     
                     # 保存到配置文件
-                    update_conversation_id(user_index, new_conversation_id)
+                    try:
+                        update_conversation_id(user_index, new_conversation_id)
+                    except Exception as config_e:
+                        print(f"更新配置文件失败但继续重试: {config_e}")
                     
                     # 修改payload使用新会话ID，并移除regenerate和editPrompt
                     payload["deploymentConversationId"] = new_conversation_id
@@ -843,27 +847,55 @@ def send_message(message, model, think=False):
                         )
                         
                         response.raise_for_status()
-                        # 重用现有提取逻辑...
-                        # 但这里代码重复太多，实际应该重构为共享函数
+                        
+                        # 重新定义extract_segment函数（解决作用域问题）
+                        def retry_extract_segment(line_data):
+                            try:
+                                data = json.loads(line_data)
+                                if "segment" in data:
+                                    if isinstance(data["segment"], str):
+                                        return data["segment"]
+                                    elif isinstance(data["segment"], dict) and "segment" in data["segment"]:
+                                        return data["segment"]["segment"]
+                                return ""
+                            except:
+                                return ""
+                                
                         buffer = io.StringIO()
                         
                         for line in response.iter_lines():
                             if line:
                                 decoded_line = line.decode("utf-8")
-                                segment = extract_segment(decoded_line)
+                                segment = retry_extract_segment(decoded_line)
                                 if segment:
                                     buffer.write(segment)
                         
                         response_content = buffer.getvalue()
                         
-                        # 计算输出token并更新统计信息
-                        completion_result, _ = num_tokens_from_string(response_content, model)
+                        # 异步计算输出token
+                        completion_token_future = token_executor.submit(num_tokens_from_string, response_content, model)
+                        print("重试后的输出token计算已提交到后台")
                         
                         # 保存对话历史并获取计算点数
                         _, compute_points_used = save_conversation_history(session, cookies, session_token, new_conversation_id)
                         
                         # 更新统计信息
-                        update_model_stats(model, prompt_tokens, completion_result, calculation_method, compute_points_used)
+                        update_model_stats(model, prompt_token_future, completion_token_future, compute_points_used)
+                        
+                        # 获取最终结果用于返回
+                        try:
+                            prompt_tokens = prompt_token_future.result(timeout=10)
+                            if isinstance(prompt_tokens, tuple):
+                                prompt_tokens = prompt_tokens[0]  # 提取token数值
+                            completion_tokens = completion_token_future.result(timeout=10)
+                            if isinstance(completion_tokens, tuple):
+                                completion_tokens = completion_tokens[0]  # 提取token数值
+                            total_tokens = prompt_tokens + completion_tokens
+                        except Exception as token_e:
+                            print(f"获取token结果失败但继续返回: {token_e}")
+                            prompt_tokens = 0
+                            completion_tokens = 0
+                            total_tokens = 0
                         
                         return jsonify({
                             "id": f"chatcmpl-{str(uuid.uuid4())}",
@@ -880,13 +912,20 @@ def send_message(message, model, think=False):
                             }],
                             "usage": {
                                 "prompt_tokens": prompt_tokens,
-                                "completion_tokens": completion_result,
-                                "total_tokens": prompt_tokens + completion_result
+                                "completion_tokens": completion_tokens,
+                                "total_tokens": total_tokens
                             }
                         })
                     except Exception as retry_e:
                         print(f"重试失败: {retry_e}")
         
+        # 取消token计算任务，避免资源浪费
+        try:
+            if 'prompt_token_future' in locals() and not prompt_token_future.done():
+                prompt_token_future.cancel()
+        except Exception as cancel_e:
+            print(f"取消token计算任务失败: {cancel_e}")
+        
         return jsonify({"error": f"Failed to send message: {error_details}"}), 500
 
 
@@ -912,11 +951,10 @@ def send_message_non_stream(message, model, think=False):
     
     trace_id, sentry_trace = generate_trace_id()
     
-    # 计算输入token
-    print("\n----- 计算输入token -----")
-    prompt_tokens, calculation_method = num_tokens_from_string(message, model)
-    print(f"输入token数: {prompt_tokens}")
-    print(f"计算方法: {calculation_method}")
+    # 计算输入token - 改为异步提交
+    print("\n----- 提交输入token计算任务 -----")
+    prompt_token_future = token_executor.submit(num_tokens_from_string, message, model)
+    print("输入token计算已提交到后台")
     
     headers = {
         "accept": "text/event-stream",
@@ -971,7 +1009,6 @@ def send_message_non_stream(message, model, think=False):
         )
         
         response.raise_for_status()
-        buffer = io.StringIO()
         
         def extract_segment(line_data):
             try:
@@ -1020,14 +1057,31 @@ def send_message_non_stream(message, model, think=False):
             think_content = think_buffer.getvalue()
             response_content = content_buffer.getvalue()
             
-            # 计算输出token并更新统计信息
-            completion_result, _ = num_tokens_from_string(think_content + response_content, model)
+            # 异步计算输出token
+            full_content = f"<think>\n{think_content}\n</think>\n{response_content}"
+            completion_token_future = token_executor.submit(num_tokens_from_string, full_content, model)
+            print("输出token计算已提交到后台")
             
             # 保存对话历史并获取计算点数
             _, compute_points_used = save_conversation_history(session, cookies, session_token, conversation_id)
             
             # 更新统计信息
-            update_model_stats(model, prompt_tokens, completion_result, calculation_method, compute_points_used)
+            update_model_stats(model, prompt_token_future, completion_token_future, compute_points_used)
+            
+            # 获取最终结果用于返回
+            try:
+                prompt_tokens = prompt_token_future.result(timeout=10)
+                if isinstance(prompt_tokens, tuple):
+                    prompt_tokens = prompt_tokens[0]  # 提取token数值
+                completion_tokens = completion_token_future.result(timeout=10)
+                if isinstance(completion_tokens, tuple):
+                    completion_tokens = completion_tokens[0]  # 提取token数值
+                total_tokens = prompt_tokens + completion_tokens
+            except Exception as token_e:
+                print(f"获取token结果失败但继续返回: {token_e}")
+                prompt_tokens = 0
+                completion_tokens = 0
+                total_tokens = 0
             
             return jsonify({
                 "id": f"chatcmpl-{str(uuid.uuid4())}",
@@ -1044,11 +1098,13 @@ def send_message_non_stream(message, model, think=False):
                 }],
                 "usage": {
                     "prompt_tokens": prompt_tokens,
-                    "completion_tokens": completion_result,
-                    "total_tokens": prompt_tokens + completion_result
+                    "completion_tokens": completion_tokens,
+                    "total_tokens": total_tokens
                 }
             })
         else:
+            buffer = io.StringIO()
+            
             for line in response.iter_lines():
                 if line:
                     decoded_line = line.decode("utf-8")
@@ -1058,14 +1114,30 @@ def send_message_non_stream(message, model, think=False):
             
             response_content = buffer.getvalue()
             
-            # 计算输出token并更新统计信息
-            completion_result, _ = num_tokens_from_string(response_content, model)
+            # 异���计算输出token
+            completion_token_future = token_executor.submit(num_tokens_from_string, response_content, model)
+            print("输出token计算已提交到后台")
             
             # 保存对话历史并获取计算点数
             _, compute_points_used = save_conversation_history(session, cookies, session_token, conversation_id)
             
             # 更新统计信息
-            update_model_stats(model, prompt_tokens, completion_result, calculation_method, compute_points_used)
+            update_model_stats(model, prompt_token_future, completion_token_future, compute_points_used)
+            
+            # 获取最终结果用于返回
+            try:
+                prompt_tokens = prompt_token_future.result(timeout=10)
+                if isinstance(prompt_tokens, tuple):
+                    prompt_tokens = prompt_tokens[0]  # 提取token数值
+                completion_tokens = completion_token_future.result(timeout=10)
+                if isinstance(completion_tokens, tuple):
+                    completion_tokens = completion_tokens[0]  # 提取token数值
+                total_tokens = prompt_tokens + completion_tokens
+            except Exception as token_e:
+                print(f"获取token结果失败但继续返回: {token_e}")
+                prompt_tokens = 0
+                completion_tokens = 0
+                total_tokens = 0
             
             return jsonify({
                 "id": f"chatcmpl-{str(uuid.uuid4())}",
@@ -1082,8 +1154,8 @@ def send_message_non_stream(message, model, think=False):
                 }],
                 "usage": {
                     "prompt_tokens": prompt_tokens,
-                    "completion_tokens": completion_result,
-                    "total_tokens": prompt_tokens + completion_result
+                    "completion_tokens": completion_tokens,
+                    "total_tokens": total_tokens
                 }
             })
     except requests.exceptions.RequestException as e:
@@ -1115,7 +1187,10 @@ def send_message_non_stream(message, model, think=False):
                     USER_DATA[CURRENT_USER] = (session, cookies, session_token, new_conversation_id, model_map, user_index)
                     
                     # 保存到配置文件
-                    update_conversation_id(user_index, new_conversation_id)
+                    try:
+                        update_conversation_id(user_index, new_conversation_id)
+                    except Exception as config_e:
+                        print(f"更新配置文件失败但继续重试: {config_e}")
                     
                     # 修改payload使用新会话ID，并移除regenerate和editPrompt
                     payload["deploymentConversationId"] = new_conversation_id
@@ -1135,27 +1210,55 @@ def send_message_non_stream(message, model, think=False):
                         )
                         
                         response.raise_for_status()
-                        # 重用现有提取逻辑...
-                        # 但这里代码重复太多，实际应该重构为共享函数
+                        
+                        # 重新定义extract_segment函数（解决作用域问题）
+                        def retry_extract_segment(line_data):
+                            try:
+                                data = json.loads(line_data)
+                                if "segment" in data:
+                                    if isinstance(data["segment"], str):
+                                        return data["segment"]
+                                    elif isinstance(data["segment"], dict) and "segment" in data["segment"]:
+                                        return data["segment"]["segment"]
+                                return ""
+                            except:
+                                return ""
+                                
                         buffer = io.StringIO()
                         
                         for line in response.iter_lines():
                             if line:
                                 decoded_line = line.decode("utf-8")
-                                segment = extract_segment(decoded_line)
+                                segment = retry_extract_segment(decoded_line)
                                 if segment:
                                     buffer.write(segment)
                         
                         response_content = buffer.getvalue()
                         
-                        # 计算输出token并更新统计信息
-                        completion_result, _ = num_tokens_from_string(response_content, model)
+                        # 异步计算输出token
+                        completion_token_future = token_executor.submit(num_tokens_from_string, response_content, model)
+                        print("重试后的输出token计算已提交到后台")
                         
                         # 保存对话历史并获取计算点数
                         _, compute_points_used = save_conversation_history(session, cookies, session_token, new_conversation_id)
                         
                         # 更新统计信息
-                        update_model_stats(model, prompt_tokens, completion_result, calculation_method, compute_points_used)
+                        update_model_stats(model, prompt_token_future, completion_token_future, compute_points_used)
+                        
+                        # 获取最终结果用于返回
+                        try:
+                            prompt_tokens = prompt_token_future.result(timeout=10)
+                            if isinstance(prompt_tokens, tuple):
+                                prompt_tokens = prompt_tokens[0]  # 提取token数值
+                            completion_tokens = completion_token_future.result(timeout=10)
+                            if isinstance(completion_tokens, tuple):
+                                completion_tokens = completion_tokens[0]  # 提取token数值
+                            total_tokens = prompt_tokens + completion_tokens
+                        except Exception as token_e:
+                            print(f"获取token结果失败但继续返回: {token_e}")
+                            prompt_tokens = 0
+                            completion_tokens = 0
+                            total_tokens = 0
                         
                         return jsonify({
                             "id": f"chatcmpl-{str(uuid.uuid4())}",
@@ -1172,8 +1275,8 @@ def send_message_non_stream(message, model, think=False):
                             }],
                             "usage": {
                                 "prompt_tokens": prompt_tokens,
-                                "completion_tokens": completion_result,
-                                "total_tokens": prompt_tokens + completion_result
+                                "completion_tokens": completion_tokens,
+                                "total_tokens": total_tokens
                             }
                         })
                     except Exception as retry_e:
@@ -1318,9 +1421,39 @@ def num_tokens_from_string(string, model=""):
 
 
 # 更新模型使用统计
-def update_model_stats(model, prompt_tokens, completion_tokens, calculation_method="estimate", compute_points=None):
+def update_model_stats(model, prompt_token_future, completion_token_future, compute_points=None):
     global model_usage_stats, total_tokens, model_usage_records
     
+    prompt_tokens = 0
+    prompt_calc_method = "估算(获取失败)"
+    try:
+        # 在这里等待并获取输入 token 计算结果，设置超时
+        print("等待输入 token 计算结果...")
+        prompt_tokens, prompt_calc_method = prompt_token_future.result(timeout=20) # 超时时间设长一点
+        print(f"输入 token 结果: {prompt_tokens} ({prompt_calc_method})")
+    except TimeoutError:
+        print("获取输入 token 计算结果超时")
+        prompt_calc_method = "估算(超时)"
+        # 估算 - 如果收到了原始输入，可以在这里估算
+    except Exception as e:
+        print(f"获取输入 token 计算结果失败: {e}")
+        # 保持 0 和失败标记
+
+    completion_tokens = 0
+    completion_calc_method = "估算(获取失败)"
+    try:
+        # 在这里等待并获取输出 token 计算结果，设置超时
+        print("等待输出 token 计算结果...")
+        completion_tokens, completion_calc_method = completion_token_future.result(timeout=20) # 超时时间设长一点
+        print(f"输出 token 结果: {completion_tokens} ({completion_calc_method})")
+    except TimeoutError:
+        print("获取输出 token 计算结果超时")
+        completion_calc_method = "估算(超时)"
+        # 可以选择估算或保持 0
+    except Exception as e:
+        print(f"获取输出 token 计算结果失败: {e}")
+        # 保持 0 和失败标记
+
     # 添加调用记录
     # 获取UTC时间
     utc_now = datetime.utcnow()
@@ -1333,7 +1466,7 @@ def update_model_stats(model, prompt_tokens, completion_tokens, calculation_meth
         "call_time": call_time,
         "prompt_tokens": prompt_tokens,
         "completion_tokens": completion_tokens,
-        "calculation_method": calculation_method,  # 直接使用传入的值
+        "calculation_method": f"输入: {prompt_calc_method}, 输出: {completion_calc_method}",
         "compute_points": compute_points
     }
     model_usage_records.append(record)
@@ -1362,6 +1495,8 @@ def update_model_stats(model, prompt_tokens, completion_tokens, calculation_meth
     total_tokens["prompt"] += prompt_tokens
     total_tokens["completion"] += completion_tokens
     total_tokens["total"] += (prompt_tokens + completion_tokens)
+    
+    print("模型统计信息已更新")
 
 
 # 获取计算点信息
@@ -1539,7 +1674,7 @@ def dashboard():
     days = uptime.days
     hours, remainder = divmod(uptime.seconds, 3600)
     minutes, seconds = divmod(remainder, 60)
-    
+
     if days > 0:
         uptime_str = f"{days}天 {hours}小时 {minutes}分钟"
     elif hours > 0:

templates/dashboard.html

@@ -1,1032 +1,1032 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Abacus Chat Proxy - 仪表盘</title>
-    <style>
-        :root {
-            --primary-color: #6f42c1;
-            --secondary-color: #4a32a8;
-            --accent-color: #5e85f1;
-            --bg-color: #0a0a1a;
-            --text-color: #e6e6ff;
-            --card-bg: rgba(30, 30, 60, 0.7);
-            --input-bg: rgba(40, 40, 80, 0.6);
-            --success-color: #36d399;
-            --warning-color: #fbbd23;
-            --error-color: #f87272;
-        }
-        
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-        }
-        
-        body {
-            min-height: 100vh;
-            background-color: var(--bg-color);
-            background-image: 
-                radial-gradient(circle at 20% 35%, rgba(111, 66, 193, 0.15) 0%, transparent 40%),
-                radial-gradient(circle at 80% 10%, rgba(70, 111, 171, 0.1) 0%, transparent 40%);
-            color: var(--text-color);
-            position: relative;
-            overflow-x: hidden;
-        }
-        
-        /* 动态背景网格 */
-        .grid-background {
-            position: fixed;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            background-image: linear-gradient(rgba(50, 50, 100, 0.05) 1px, transparent 1px),
-                            linear-gradient(90deg, rgba(50, 50, 100, 0.05) 1px, transparent 1px);
-            background-size: 30px 30px;
-            z-index: -1;
-            animation: grid-move 20s linear infinite;
-        }
-        
-        @keyframes grid-move {
-            0% {
-                transform: translateY(0);
-            }
-            100% {
-                transform: translateY(30px);
-            }
-        }
-        
-        /* 顶部导航栏 */
-        .navbar {
-            padding: 1rem 2rem;
-            background: rgba(15, 15, 30, 0.8);
-            backdrop-filter: blur(10px);
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
-            position: sticky;
-            top: 0;
-            z-index: 100;
-        }
-        
-        .navbar-brand {
-            display: flex;
-            align-items: center;
-            text-decoration: none;
-            color: var(--text-color);
-        }
-        
-        .navbar-logo {
-            font-size: 1.5rem;
-            margin-right: 0.75rem;
-            animation: pulse 2s infinite alternate;
-        }
-        
-        @keyframes pulse {
-            0% {
-                transform: scale(1);
-                text-shadow: 0 0 5px rgba(111, 66, 193, 0.5);
-            }
-            100% {
-                transform: scale(1.05);
-                text-shadow: 0 0 15px rgba(111, 66, 193, 0.8);
-            }
-        }
-        
-        .navbar-title {
-            font-size: 1.25rem;
-            font-weight: 600;
-            background: linear-gradient(45deg, #6f42c1, #5181f1);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-        }
-        
-        .navbar-actions {
-            display: flex;
-            gap: 1rem;
-        }
-        
-        .btn-logout {
-            background: rgba(255, 255, 255, 0.1);
-            color: var(--text-color);
-            border: none;
-            padding: 0.5rem 1rem;
-            border-radius: 6px;
-            cursor: pointer;
-            transition: all 0.2s;
-            display: flex;
-            align-items: center;
-            gap: 0.5rem;
-        }
-        
-        .btn-logout:hover {
-            background: rgba(255, 255, 255, 0.2);
-        }
-        
-        /* 主内容区域 */
-        .container {
-            max-width: 1200px;
-            margin: 0 auto;
-            padding: 2rem;
-        }
-        
-        /* 信息卡片样式 */
-        .card {
-            background: var(--card-bg);
-            border-radius: 12px;
-            padding: 1.5rem;
-            margin-bottom: 2rem;
-            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
-            backdrop-filter: blur(8px);
-            border: 1px solid rgba(255, 255, 255, 0.1);
-            animation: card-fade-in 0.6s ease-out;
-        }
-        
-        @keyframes card-fade-in {
-            from {
-                opacity: 0;
-                transform: translateY(20px);
-            }
-            to {
-                opacity: 1;
-                transform: translateY(0);
-            }
-        }
-        
-        .card-header {
-            margin-bottom: 1rem;
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-        }
-        
-        .card-title {
-            font-size: 1.25rem;
-            font-weight: 600;
-            display: flex;
-            align-items: center;
-            gap: 0.75rem;
-        }
-        
-        .card-icon {
-            width: 32px;
-            height: 32px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            background: linear-gradient(45deg, rgba(111, 66, 193, 0.2), rgba(94, 133, 241, 0.2));
-            border-radius: 8px;
-            font-size: 1.25rem;
-        }
-        
-        /* 状态项样式 */
-        .status-item {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            padding: 0.75rem 0;
-            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
-        }
-        
-        .status-item:last-child {
-            border-bottom: none;
-        }
-        
-        .status-label {
-            color: rgba(230, 230, 255, 0.7);
-            font-weight: 500;
-        }
-        
-        .status-value {
-            color: var(--text-color);
-            font-weight: 600;
-        }
-        
-        .status-value.success {
-            color: var(--success-color);
-        }
-        
-        .status-value.warning {
-            color: var(--warning-color);
-        }
-        
-        .status-value.danger {
-            color: var(--error-color);
-        }
-        
-        /* 模型标签 */
-        .models-list {
-            display: flex;
-            flex-wrap: wrap;
-            gap: 0.5rem;
-        }
-        
-        .model-tag {
-            background: rgba(111, 66, 193, 0.2);
-            padding: 0.25rem 0.75rem;
-            border-radius: 16px;
-            font-size: 0.875rem;
-            color: var(--text-color);
-            border: 1px solid rgba(111, 66, 193, 0.3);
-        }
-        
-        /* 表格样式 */
-        .table-container {
-            overflow-x: auto;
-            margin-top: 1rem;
-        }
-        
-        .data-table {
-            width: 100%;
-            border-collapse: collapse;
-            text-align: left;
-        }
-        
-        .data-table th {
-            background-color: rgba(50, 50, 100, 0.3);
-            padding: 0.75rem 1rem;
-            font-weight: 600;
-            color: rgba(230, 230, 255, 0.9);
-            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
-        }
-        
-        .data-table td {
-            padding: 0.75rem 1rem;
-            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
-        }
-        
-        .data-table tbody tr {
-            transition: background-color 0.2s;
-        }
-        
-        .data-table tbody tr:hover {
-            background-color: rgba(50, 50, 100, 0.2);
-        }
-        
-        /* 特殊值样式 */
-        .token-count {
-            font-family: 'Consolas', monospace;
-            color: var(--accent-color);
-            font-weight: bold;
-        }
-        
-        .call-count {
-            font-family: 'Consolas', monospace;
-            color: var(--success-color);
-            font-weight: bold;
-        }
-        
-        .compute-points {
-            font-family: 'Consolas', monospace;
-            color: var(--primary-color);
-            font-weight: bold;
-        }
-        
-        /* 进度条 */
-        .progress-container {
-            width: 100%;
-            height: 8px;
-            background-color: rgba(100, 100, 150, 0.2);
-            border-radius: 4px;
-            margin-top: 0.5rem;
-            overflow: hidden;
-            position: relative;
-        }
-        
-        .progress-bar {
-            height: 100%;
-            border-radius: 4px;
-            background: linear-gradient(90deg, var(--primary-color), var(--accent-color));
-            position: relative;
-            overflow: hidden;
-        }
-        
-        .progress-bar.warning {
-            background: linear-gradient(90deg, #fbbd23, #f59e0b);
-        }
-        
-        .progress-bar.danger {
-            background: linear-gradient(90deg, #f87272, #ef4444);
-        }
-        
-        /* 添加进度条闪光效果 */
-        .progress-bar::after {
-            content: '';
-            position: absolute;
-            top: 0;
-            left: -100%;
-            width: 100%;
-            height: 100%;
-            background: linear-gradient(90deg, 
-                transparent, 
-                rgba(255, 255, 255, 0.2), 
-                transparent);
-            animation: progress-shine 3s infinite;
-        }
-        
-        @keyframes progress-shine {
-            0% {
-                left: -100%;
-            }
-            50%, 100% {
-                left: 100%;
-            }
-        }
-        
-        /* API端点卡片 */
-        .endpoint-item {
-            background: rgba(50, 50, 100, 0.2);
-            padding: 1rem;
-            border-radius: 8px;
-            margin-bottom: 1rem;
-            border-left: 3px solid var(--primary-color);
-        }
-        
-        .endpoint-url {
-            font-family: 'Consolas', monospace;
-            background: rgba(0, 0, 0, 0.2);
-            padding: 0.5rem;
-            border-radius: 4px;
-            margin-top: 0.25rem;
-            display: inline-block;
-            color: var(--text-color);
-            text-decoration: none;
-            transition: all 0.2s;
-        }
-        
-        .endpoint-url:hover {
-            background: rgba(111, 66, 193, 0.3);
-            color: var(--text-color);
-        }
-        
-        /* 响应式布局 */
-        .grid {
-            display: grid;
-            grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
-            gap: 1.5rem;
-        }
-        
-        /* 页脚 */
-        .footer {
-            text-align: center;
-            padding: 2rem 0;
-            color: rgba(230, 230, 255, 0.5);
-            font-size: 0.9rem;
-            border-top: 1px solid rgba(255, 255, 255, 0.05);
-            margin-top: 2rem;
-        }
-        
-        /* 悬浮图标按钮 */
-        .float-btn {
-            position: fixed;
-            bottom: 2rem;
-            right: 2rem;
-            width: 50px;
-            height: 50px;
-            border-radius: 50%;
-            background: linear-gradient(45deg, var(--primary-color), var(--accent-color));
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            color: white;
-            font-size: 1.5rem;
-            box-shadow: 0 4px 20px rgba(111, 66, 193, 0.4);
-            cursor: pointer;
-            transition: all 0.3s;
-            z-index: 50;
-        }
-        
-        .float-btn:hover {
-            transform: translateY(-5px);
-            box-shadow: 0 8px 25px rgba(111, 66, 193, 0.5);
-        }
-        
-        /* 滚动条美化 */
-        ::-webkit-scrollbar {
-            width: 8px;
-            height: 8px;
-        }
-        
-        ::-webkit-scrollbar-track {
-            background: rgba(50, 50, 100, 0.1);
-        }
-        
-        ::-webkit-scrollbar-thumb {
-            background: rgba(111, 66, 193, 0.5);
-            border-radius: 4px;
-        }
-        
-        ::-webkit-scrollbar-thumb:hover {
-            background: rgba(111, 66, 193, 0.7);
-        }
-        
-        /* 模型统计折叠样式 */
-        .hidden-model {
-            display: none;
-        }
-        
-        .btn-toggle {
-            background: rgba(111, 66, 193, 0.2);
-            border: 1px solid rgba(111, 66, 193, 0.3);
-            border-radius: 4px;
-            padding: 0.3rem 0.7rem;
-            color: rgba(230, 230, 255, 0.9);
-            cursor: pointer;
-            transition: all 0.2s;
-            font-size: 0.85rem;
-            margin-left: auto;
-        }
-        
-        .btn-toggle:hover {
-            background: rgba(111, 66, 193, 0.4);
-        }
-        
-        /* Token注释样式 */
-        .token-note {
-            margin-top: 0.75rem;
-            color: rgba(230, 230, 255, 0.6);
-            font-style: italic;
-            line-height: 1.4;
-            padding: 0.5rem;
-            border-top: 1px dashed rgba(255, 255, 255, 0.1);
-        }
-        
-        .token-model-table {
-            margin-top: 1rem;
-        }
-        
-        /* Token计算方法标签样式 */
-        .token-method {
-            padding: 4px 8px;
-            border-radius: 4px;
-            font-size: 0.85rem;
-            font-weight: 500;
-        }
-        
-        .token-method-exact {
-            background-color: rgba(54, 211, 153, 0.2);
-            color: #36d399;
-        }
-        
-        .token-method-estimate {
-            background-color: rgba(251, 189, 35, 0.2);
-            color: #fbbd23;
-        }
-        
-        /* 时间日期样式 */
-        .datetime {
-            font-family: 'Consolas', monospace;
-            color: rgba(230, 230, 255, 0.8);
-            font-size: 0.9rem;
-        }
-        
-        /* 媒体查询 */
-        @media (max-width: 768px) {
-            .container {
-                padding: 1rem;
-            }
-            
-            .navbar {
-                padding: 1rem;
-            }
-            
-            .card {
-                padding: 1rem;
-            }
-            
-            .grid {
-                grid-template-columns: 1fr;
-            }
-        }
-        
-        .token-model-table td, .token-model-table th {
-            white-space: nowrap;
-        }
-        
-        /* 开关按钮样式 */
-        .toggle-switch-container {
-            display: flex;
-            align-items: center;
-            gap: 10px;
-        }
-        
-        .toggle-switch {
-            position: relative;
-            display: inline-block;
-            width: 50px;
-            height: 24px;
-        }
-        
-        .toggle-switch input {
-            opacity: 0;
-            width: 0;
-            height: 0;
-        }
-        
-        .toggle-slider {
-            position: absolute;
-            cursor: pointer;
-            top: 0;
-            left: 0;
-            right: 0;
-            bottom: 0;
-            background-color: rgba(100, 100, 150, 0.3);
-            transition: .4s;
-            border-radius: 24px;
-        }
-        
-        .toggle-slider:before {
-            position: absolute;
-            content: "";
-            height: 18px;
-            width: 18px;
-            left: 3px;
-            bottom: 3px;
-            background-color: #e6e6ff;
-            transition: .4s;
-            border-radius: 50%;
-        }
-        
-        input:checked + .toggle-slider {
-            background-color: var(--primary-color);
-        }
-        
-        input:checked + .toggle-slider:before {
-            transform: translateX(26px);
-        }
-        
-        .toggle-status {
-            font-weight: 600;
-        }
-        
-        .info-text {
-            font-size: 0.85rem;
-            color: rgba(230, 230, 255, 0.7);
-        }
-        
-        /* 通知样式 */
-        .notification {
-            position: fixed;
-            top: 20px;
-            right: 20px;
-            padding: 12px 20px;
-            border-radius: 8px;
-            color: white;
-            font-weight: 500;
-            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
-            z-index: 1000;
-            transform: translateY(-20px);
-            opacity: 0;
-            transition: all 0.3s ease;
-            max-width: 300px;
-        }
-        
-        .notification.show {
-            transform: translateY(0);
-            opacity: 1;
-        }
-        
-        .notification.success {
-            background-color: var(--success-color);
-        }
-        
-        .notification.error {
-            background-color: var(--error-color);
-        }
-        
-        .notification.info {
-            background-color: var(--accent-color);
-        }
-        
-        /* 响应式样式 */
-        @media (max-width: 768px) {
-            .container {
-                padding: 1rem;
-            }
-            
-            .navbar {
-                padding: 1rem;
-            }
-            
-            .card {
-                padding: 1rem;
-            }
-            
-            .grid {
-                grid-template-columns: 1fr;
-            }
-        }
-    </style>
-</head>
-<body>
-    <div class="grid-background"></div>
-    
-    <nav class="navbar">
-        <a href="/" class="navbar-brand">
-            <span class="navbar-logo">🤖</span>
-            <span class="navbar-title">Abacus Chat Proxy</span>
-        </a>
-        <div class="navbar-actions">
-            <a href="/logout" class="btn-logout">
-                <span>退出</span>
-                <span>↗</span>
-            </a>
-        </div>
-    </nav>
-    
-    <div class="container">
-        <div class="card">
-            <div class="card-header">
-                <h2 class="card-title">
-                    <span class="card-icon">📊</span>
-                    系统状态
-                </h2>
-            </div>
-            <div class="status-item">
-                <span class="status-label">服务状态</span>
-                <span class="status-value success">运行中</span>
-            </div>
-            <div class="status-item">
-                <span class="status-label">运行时间</span>
-                <span class="status-value">{{ uptime }}</span>
-            </div>
-            <div class="status-item">
-                <span class="status-label">健康检查次数</span>
-                <span class="status-value">{{ health_checks }}</span>
-            </div>
-            <div class="status-item">
-                <span class="status-label">已配置用户数</span>
-                <span class="status-value">{{ user_count }}</span>
-            </div>
-            <div class="status-item">
-                <span class="status-label">可用模型</span>
-                <div class="models-list">
-                    {% for model in models %}
-                    <span class="model-tag">{{ model }}</span>
-                    {% endfor %}
-                </div>
-            </div>
-        </div>
-        
-        <div class="grid">
-            <div class="card">
-                <div class="card-header">
-                    <h2 class="card-title">
-                        <span class="card-icon">💰</span>
-                        计算点总计
-                    </h2>
-                </div>
-                <div class="status-item">
-                    <span class="status-label">总计算点</span>
-                    <span class="status-value compute-points">{{ compute_points.total|int }}</span>
-                </div>
-                <div class="status-item">
-                    <span class="status-label">已使用</span>
-                    <span class="status-value compute-points">{{ compute_points.used|int }}</span>
-                </div>
-                <div class="status-item">
-                    <span class="status-label">剩余</span>
-                    <span class="status-value compute-points">{{ compute_points.left|int }}</span>
-                </div>
-                <div class="status-item">
-                    <span class="status-label">使用比例</span>
-                    <div style="width: 100%; text-align: right;">
-                        <span class="status-value compute-points {% if compute_points.percentage > 80 %}danger{% elif compute_points.percentage > 50 %}warning{% endif %}">
-                            {{ compute_points.percentage }}%
-                        </span>
-                        <div class="progress-container">
-                            <div class="progress-bar {% if compute_points.percentage > 80 %}danger{% elif compute_points.percentage > 50 %}warning{% endif %}" style="width: {{ compute_points.percentage }}%"></div>
-                        </div>
-                    </div>
-                </div>
-                {% if compute_points.last_update %}
-                <div class="status-item">
-                    <span class="status-label">最后更新时间</span>
-                    <span class="status-value">{{ compute_points.last_update.strftime('%Y-%m-%d %H:%M:%S') }}</span>
-                </div>
-                {% endif %}
-            </div>
-            
-            <div class="card">
-                <div class="card-header">
-                    <h2 class="card-title">
-                        <span class="card-icon">🔍</span>
-                        Token 使用统计
-                    </h2>
-                </div>
-                <div class="status-item">
-                    <span class="status-label">总输入Token</span>
-                    <span class="status-value token-count">{{ total_tokens.prompt|int }}</span>
-                </div>
-                <div class="status-item">
-                    <span class="status-label">总输出Token</span>
-                    <span class="status-value token-count">{{ total_tokens.completion|int }}</span>
-                </div>
-                <div class="token-note">
-                    <small>* 以上数据仅统计通过本代理使用的token数量，不包含在Abacus官网直接使用的token。数值为粗略估计，可能与实际计费有差异。</small>
-                </div>
-                <div class="table-container">
-                    <table class="data-table token-model-table">
-                        <thead>
-                            <tr>
-                                <th>模型</th>
-                                <th>调用次数</th>
-                                <th>输入Token</th>
-                                <th>输出Token</th>
-                            </tr>
-                        </thead>
-                        <tbody>
-                            {% for model, stats in model_stats.items() %}
-                            <tr>
-                                <td>{{ model }}</td>
-                                <td class="call-count">{{ stats.count }}</td>
-                                <td class="token-count">{{ stats.prompt_tokens|int }}</td>
-                                <td class="token-count">{{ stats.completion_tokens|int }}</td>
-                            </tr>
-                            {% endfor %}
-                        </tbody>
-                    </table>
-                </div>
-            </div>
-        </div>
-        
-        {% if users_compute_points|length > 0 %}
-        <div class="card">
-            <div class="card-header">
-                <h2 class="card-title">
-                    <span class="card-icon">👥</span>
-                    用户计算点详情
-                </h2>
-            </div>
-            <div class="table-container">
-                <table class="data-table">
-                    <thead>
-                        <tr>
-                            <th>用户</th>
-                            <th>总计算点</th>
-                            <th>已使用</th>
-                            <th>剩余</th>
-                            <th>使用比例</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        {% for user in users_compute_points %}
-                        <tr>
-                            <td>用户 {{ user.user_id }}</td>
-                            <td class="compute-points">{{ user.total|int }}</td>
-                            <td class="compute-points">{{ user.used|int }}</td>
-                            <td class="compute-points">{{ user.left|int }}</td>
-                            <td>
-                                <div style="width: 100%; position: relative;">
-                                    <span class="status-value compute-points {% if user.percentage > 80 %}danger{% elif user.percentage > 50 %}warning{% endif %}">
-                                        {{ user.percentage }}%
-                                    </span>
-                                    <div class="progress-container">
-                                        <div class="progress-bar {% if user.percentage > 80 %}danger{% elif user.percentage > 50 %}warning{% endif %}" style="width: {{ user.percentage }}%"></div>
-                                    </div>
-                                </div>
-                            </td>
-                        </tr>
-                        {% endfor %}
-                    </tbody>
-                </table>
-            </div>
-        </div>
-        {% endif %}
-        
-        <div class="card">
-            <div class="card-header">
-                <h2 class="card-title">
-                    <span class="card-icon">📊</span>
-                    计算点使用日志
-                </h2>
-            </div>
-            <div class="table-container">
-                <table class="data-table">
-                    <thead>
-                        <tr>
-                            {% for key, value in compute_points_log.columns.items() %}
-                            <th>{{ value }}</th>
-                            {% endfor %}
-                        </tr>
-                    </thead>
-                    <tbody>
-                        {% for entry in compute_points_log.log %}
-                        <tr>
-                            {% for key, value in compute_points_log.columns.items() %}
-                            <td class="compute-points">{{ entry.get(key, 0) }}</td>
-                            {% endfor %}
-                        </tr>
-                        {% endfor %}
-                    </tbody>
-                </table>
-            </div>
-        </div>
-        
-        <div class="card">
-            <div class="card-header">
-                <h2 class="card-title">
-                    <span class="card-icon">📈</span>
-                    模型调用记录
-                </h2>
-                <button id="toggleModelStats" class="btn-toggle">显示全部</button>
-            </div>
-            <div class="table-container">
-                <table class="data-table">
-                    <thead>
-                        <tr>
-                            <th>调用时间 (北京时间)</th>
-                            <th>模型</th>
-                            <th>输入Token</th>
-                            <th>输出Token</th>
-                            <th>总Token</th>
-                            <th>计算方式</th>
-                            <th>计算点数</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        {% for record in model_usage_records|reverse %}
-                        <tr class="model-row {% if loop.index > 10 %}hidden-model{% endif %}">
-                            <td class="datetime">{{ record.call_time }}</td>
-                            <td>{{ record.model }}</td>
-                            <td class="token-count">{{ record.prompt_tokens }}</td>
-                            <td class="token-count">{{ record.completion_tokens }}</td>
-                            <td>{{ record.prompt_tokens + record.completion_tokens }}</td>
-                            <td>
-                                {% if record.calculation_method == "精确" %}
-                                    <span class="token-method token-method-exact">精确</span>
-                                {% else %}
-                                    <span class="token-method token-method-estimate">估算</span>
-                                {% endif %}
-                            </td>
-                            <td>{{ record.compute_points if record.compute_points is not none and record.compute_points != 0 else 'null' }}</td>
-                        </tr>
-                        {% endfor %}
-                    </tbody>
-                </table>
-                <div class="token-note">
-                    <small>* Token计算方式：<span class="token-method token-method-exact">精确</span> 表示调用官方API精确计算，<span class="token-method token-method-estimate">估算</span> 表示使用gpt-4o模型估算。所有统计数据仅供参考，不代表实际计费标准。</small>
-                </div>
-            </div>
-        </div>
-        
-        <div class="card">
-            <div class="card-header">
-                <h2 class="card-title">
-                    <span class="card-icon">📡</span>
-                    API 端点
-                </h2>
-            </div>
-            <div class="endpoint-item">
-                <p>获取模型列表：</p>
-                {% if space_url %}
-                <a href="{{ space_url }}/v1/models" class="endpoint-url" target="_blank">GET {{ space_url }}/v1/models</a>
-                {% else %}
-                <a href="/v1/models" class="endpoint-url" target="_blank">GET /v1/models</a>
-                {% endif %}
-            </div>
-            <div class="endpoint-item">
-                <p>聊天补全：</p>
-                {% if space_url %}
-                <code class="endpoint-url">POST {{ space_url }}/v1/chat/completions</code>
-                {% else %}
-                <code class="endpoint-url">POST /v1/chat/completions</code>
-                {% endif %}
-            </div>
-            <div class="endpoint-item">
-                <p>健康检查：</p>
-                {% if space_url %}
-                <a href="{{ space_url }}/health" class="endpoint-url" target="_blank">GET {{ space_url }}/health</a>
-                {% else %}
-                <a href="/health" class="endpoint-url" target="_blank">GET /health</a>
-                {% endif %}
-            </div>
-        </div>
-        
-        <div class="footer">
-            <p>© {{ year }} Abacus Chat Proxy. 保持简单，保持可靠。</p>
-        </div>
-    </div>
-    
-    <a href="#" class="float-btn" title="回到顶部">↑</a>
-    
-    <script>
-        // 回到顶部按钮
-        document.querySelector('.float-btn').addEventListener('click', (e) => {
-            e.preventDefault();
-            window.scrollTo({ top: 0, behavior: 'smooth' });
-        });
-        
-        // 显示/隐藏回到顶部按钮
-        window.addEventListener('scroll', () => {
-            const floatBtn = document.querySelector('.float-btn');
-            if (window.pageYOffset > 300) {
-                floatBtn.style.opacity = '1';
-            } else {
-                floatBtn.style.opacity = '0';
-            }
-        });
-        
-        // 初始化隐藏回到顶部按钮
-        document.querySelector('.float-btn').style.opacity = '0';
-        
-        // 模型统计折叠功能
-        const toggleBtn = document.getElementById('toggleModelStats');
-        const hiddenModels = document.querySelectorAll('.hidden-model');
-        let isExpanded = false;
-        
-        if (toggleBtn) {
-            toggleBtn.addEventListener('click', () => {
-                hiddenModels.forEach(model => {
-                    model.classList.toggle('hidden-model');
-                });
-                
-                isExpanded = !isExpanded;
-                toggleBtn.textContent = isExpanded ? '隐藏部分' : '显示全部';
-            });
-        }
-        
-        document.addEventListener('DOMContentLoaded', function() {
-            initCharts();
-            
-            // 显示/隐藏更多模型使用记录
-            const toggleModelStats = document.getElementById('toggleModelStats');
-            if (toggleModelStats) {
-                toggleModelStats.addEventListener('click', function() {
-                    const hiddenRows = document.querySelectorAll('.hidden-model');
-                    hiddenRows.forEach(row => {
-                        row.classList.toggle('show-model');
-                    });
-                    toggleModelStats.textContent = toggleModelStats.textContent === '显示全部' ? '隐藏部分' : '显示全部';
-                });
-            }
-            
-            // 处理计算点数记录开关
-            const computePointToggle = document.getElementById('compute-point-toggle');
-            const computePointStatus = document.getElementById('compute-point-status');
-            
-            if (computePointToggle && computePointStatus) {
-                computePointToggle.addEventListener('change', function() {
-                    const isChecked = this.checked;
-                    computePointStatus.textContent = isChecked ? '开启' : '关闭';
-                    
-                    // 发送更新请求到后端
-                    fetch('/update_compute_point_toggle', {
-                        method: 'POST',
-                        headers: {
-                            'Content-Type': 'application/json',
-                        },
-                        body: JSON.stringify({ always_display: isChecked })
-                    })
-                    .then(response => response.json())
-                    .then(data => {
-                        if (data.success) {
-                            // 显示成功提示
-                            showNotification(isChecked ? '已开启计算点数记录功能' : '已关闭计算点数记录功能', 'success');
-                        } else {
-                            // 显示错误提示
-                            showNotification('设置更新失败: ' + data.error, 'error');
-                            // 回滚UI状态
-                            computePointToggle.checked = !isChecked;
-                            computePointStatus.textContent = !isChecked ? '开启' : '关闭';
-                        }
-                    })
-                    .catch(error => {
-                        console.error('更新设置出错:', error);
-                        showNotification('更新设置失败，请重试', 'error');
-                        // 回滚UI状态
-                        computePointToggle.checked = !isChecked;
-                        computePointStatus.textContent = !isChecked ? '开启' : '关闭';
-                    });
-                });
-            }
-        });
-        
-        // 通知函数
-        function showNotification(message, type = 'info') {
-            const notification = document.createElement('div');
-            notification.className = `notification ${type}`;
-            notification.textContent = message;
-            
-            document.body.appendChild(notification);
-            
-            // 显示动画
-            setTimeout(() => {
-                notification.classList.add('show');
-            }, 10);
-            
-            // 3秒后淡出
-            setTimeout(() => {
-                notification.classList.remove('show');
-                setTimeout(() => {
-                    notification.remove();
-                }, 300);
-            }, 3000);
-        }
-    </script>
-</body>
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Abacus Chat Proxy - 仪表盘</title>
+    <style>
+        :root {
+            --primary-color: #6f42c1;
+            --secondary-color: #4a32a8;
+            --accent-color: #5e85f1;
+            --bg-color: #0a0a1a;
+            --text-color: #e6e6ff;
+            --card-bg: rgba(30, 30, 60, 0.7);
+            --input-bg: rgba(40, 40, 80, 0.6);
+            --success-color: #36d399;
+            --warning-color: #fbbd23;
+            --error-color: #f87272;
+        }
+        
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+        }
+        
+        body {
+            min-height: 100vh;
+            background-color: var(--bg-color);
+            background-image: 
+                radial-gradient(circle at 20% 35%, rgba(111, 66, 193, 0.15) 0%, transparent 40%),
+                radial-gradient(circle at 80% 10%, rgba(70, 111, 171, 0.1) 0%, transparent 40%);
+            color: var(--text-color);
+            position: relative;
+            overflow-x: hidden;
+        }
+        
+        /* 动态背景网格 */
+        .grid-background {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background-image: linear-gradient(rgba(50, 50, 100, 0.05) 1px, transparent 1px),
+                            linear-gradient(90deg, rgba(50, 50, 100, 0.05) 1px, transparent 1px);
+            background-size: 30px 30px;
+            z-index: -1;
+            animation: grid-move 20s linear infinite;
+        }
+        
+        @keyframes grid-move {
+            0% {
+                transform: translateY(0);
+            }
+            100% {
+                transform: translateY(30px);
+            }
+        }
+        
+        /* 顶部导航栏 */
+        .navbar {
+            padding: 1rem 2rem;
+            background: rgba(15, 15, 30, 0.8);
+            backdrop-filter: blur(10px);
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+            position: sticky;
+            top: 0;
+            z-index: 100;
+        }
+        
+        .navbar-brand {
+            display: flex;
+            align-items: center;
+            text-decoration: none;
+            color: var(--text-color);
+        }
+        
+        .navbar-logo {
+            font-size: 1.5rem;
+            margin-right: 0.75rem;
+            animation: pulse 2s infinite alternate;
+        }
+        
+        @keyframes pulse {
+            0% {
+                transform: scale(1);
+                text-shadow: 0 0 5px rgba(111, 66, 193, 0.5);
+            }
+            100% {
+                transform: scale(1.05);
+                text-shadow: 0 0 15px rgba(111, 66, 193, 0.8);
+            }
+        }
+        
+        .navbar-title {
+            font-size: 1.25rem;
+            font-weight: 600;
+            background: linear-gradient(45deg, #6f42c1, #5181f1);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+        }
+        
+        .navbar-actions {
+            display: flex;
+            gap: 1rem;
+        }
+        
+        .btn-logout {
+            background: rgba(255, 255, 255, 0.1);
+            color: var(--text-color);
+            border: none;
+            padding: 0.5rem 1rem;
+            border-radius: 6px;
+            cursor: pointer;
+            transition: all 0.2s;
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+        }
+        
+        .btn-logout:hover {
+            background: rgba(255, 255, 255, 0.2);
+        }
+        
+        /* 主内容区域 */
+        .container {
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 2rem;
+        }
+        
+        /* 信息卡片样式 */
+        .card {
+            background: var(--card-bg);
+            border-radius: 12px;
+            padding: 1.5rem;
+            margin-bottom: 2rem;
+            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
+            backdrop-filter: blur(8px);
+            border: 1px solid rgba(255, 255, 255, 0.1);
+            animation: card-fade-in 0.6s ease-out;
+        }
+        
+        @keyframes card-fade-in {
+            from {
+                opacity: 0;
+                transform: translateY(20px);
+            }
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
+        
+        .card-header {
+            margin-bottom: 1rem;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+        }
+        
+        .card-title {
+            font-size: 1.25rem;
+            font-weight: 600;
+            display: flex;
+            align-items: center;
+            gap: 0.75rem;
+        }
+        
+        .card-icon {
+            width: 32px;
+            height: 32px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            background: linear-gradient(45deg, rgba(111, 66, 193, 0.2), rgba(94, 133, 241, 0.2));
+            border-radius: 8px;
+            font-size: 1.25rem;
+        }
+        
+        /* 状态项样式 */
+        .status-item {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 0.75rem 0;
+            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+        }
+        
+        .status-item:last-child {
+            border-bottom: none;
+        }
+        
+        .status-label {
+            color: rgba(230, 230, 255, 0.7);
+            font-weight: 500;
+        }
+        
+        .status-value {
+            color: var(--text-color);
+            font-weight: 600;
+        }
+        
+        .status-value.success {
+            color: var(--success-color);
+        }
+        
+        .status-value.warning {
+            color: var(--warning-color);
+        }
+        
+        .status-value.danger {
+            color: var(--error-color);
+        }
+        
+        /* 模型标签 */
+        .models-list {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 0.5rem;
+        }
+        
+        .model-tag {
+            background: rgba(111, 66, 193, 0.2);
+            padding: 0.25rem 0.75rem;
+            border-radius: 16px;
+            font-size: 0.875rem;
+            color: var(--text-color);
+            border: 1px solid rgba(111, 66, 193, 0.3);
+        }
+        
+        /* 表格样式 */
+        .table-container {
+            overflow-x: auto;
+            margin-top: 1rem;
+        }
+        
+        .data-table {
+            width: 100%;
+            border-collapse: collapse;
+            text-align: left;
+        }
+        
+        .data-table th {
+            background-color: rgba(50, 50, 100, 0.3);
+            padding: 0.75rem 1rem;
+            font-weight: 600;
+            color: rgba(230, 230, 255, 0.9);
+            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+        }
+        
+        .data-table td {
+            padding: 0.75rem 1rem;
+            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+        }
+        
+        .data-table tbody tr {
+            transition: background-color 0.2s;
+        }
+        
+        .data-table tbody tr:hover {
+            background-color: rgba(50, 50, 100, 0.2);
+        }
+        
+        /* 特殊值样式 */
+        .token-count {
+            font-family: 'Consolas', monospace;
+            color: var(--accent-color);
+            font-weight: bold;
+        }
+        
+        .call-count {
+            font-family: 'Consolas', monospace;
+            color: var(--success-color);
+            font-weight: bold;
+        }
+        
+        .compute-points {
+            font-family: 'Consolas', monospace;
+            color: var(--primary-color);
+            font-weight: bold;
+        }
+        
+        /* 进度条 */
+        .progress-container {
+            width: 100%;
+            height: 8px;
+            background-color: rgba(100, 100, 150, 0.2);
+            border-radius: 4px;
+            margin-top: 0.5rem;
+            overflow: hidden;
+            position: relative;
+        }
+        
+        .progress-bar {
+            height: 100%;
+            border-radius: 4px;
+            background: linear-gradient(90deg, var(--primary-color), var(--accent-color));
+            position: relative;
+            overflow: hidden;
+        }
+        
+        .progress-bar.warning {
+            background: linear-gradient(90deg, #fbbd23, #f59e0b);
+        }
+        
+        .progress-bar.danger {
+            background: linear-gradient(90deg, #f87272, #ef4444);
+        }
+        
+        /* 添加进度条闪光效果 */
+        .progress-bar::after {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: -100%;
+            width: 100%;
+            height: 100%;
+            background: linear-gradient(90deg, 
+                transparent, 
+                rgba(255, 255, 255, 0.2), 
+                transparent);
+            animation: progress-shine 3s infinite;
+        }
+        
+        @keyframes progress-shine {
+            0% {
+                left: -100%;
+            }
+            50%, 100% {
+                left: 100%;
+            }
+        }
+        
+        /* API端点卡片 */
+        .endpoint-item {
+            background: rgba(50, 50, 100, 0.2);
+            padding: 1rem;
+            border-radius: 8px;
+            margin-bottom: 1rem;
+            border-left: 3px solid var(--primary-color);
+        }
+        
+        .endpoint-url {
+            font-family: 'Consolas', monospace;
+            background: rgba(0, 0, 0, 0.2);
+            padding: 0.5rem;
+            border-radius: 4px;
+            margin-top: 0.25rem;
+            display: inline-block;
+            color: var(--text-color);
+            text-decoration: none;
+            transition: all 0.2s;
+        }
+        
+        .endpoint-url:hover {
+            background: rgba(111, 66, 193, 0.3);
+            color: var(--text-color);
+        }
+        
+        /* 响应式布局 */
+        .grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
+            gap: 1.5rem;
+        }
+        
+        /* 页脚 */
+        .footer {
+            text-align: center;
+            padding: 2rem 0;
+            color: rgba(230, 230, 255, 0.5);
+            font-size: 0.9rem;
+            border-top: 1px solid rgba(255, 255, 255, 0.05);
+            margin-top: 2rem;
+        }
+        
+        /* 悬浮图标按钮 */
+        .float-btn {
+            position: fixed;
+            bottom: 2rem;
+            right: 2rem;
+            width: 50px;
+            height: 50px;
+            border-radius: 50%;
+            background: linear-gradient(45deg, var(--primary-color), var(--accent-color));
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: white;
+            font-size: 1.5rem;
+            box-shadow: 0 4px 20px rgba(111, 66, 193, 0.4);
+            cursor: pointer;
+            transition: all 0.3s;
+            z-index: 50;
+        }
+        
+        .float-btn:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 8px 25px rgba(111, 66, 193, 0.5);
+        }
+        
+        /* 滚动条美化 */
+        ::-webkit-scrollbar {
+            width: 8px;
+            height: 8px;
+        }
+        
+        ::-webkit-scrollbar-track {
+            background: rgba(50, 50, 100, 0.1);
+        }
+        
+        ::-webkit-scrollbar-thumb {
+            background: rgba(111, 66, 193, 0.5);
+            border-radius: 4px;
+        }
+        
+        ::-webkit-scrollbar-thumb:hover {
+            background: rgba(111, 66, 193, 0.7);
+        }
+        
+        /* 模型统计折叠样式 */
+        .hidden-model {
+            display: none;
+        }
+        
+        .btn-toggle {
+            background: rgba(111, 66, 193, 0.2);
+            border: 1px solid rgba(111, 66, 193, 0.3);
+            border-radius: 4px;
+            padding: 0.3rem 0.7rem;
+            color: rgba(230, 230, 255, 0.9);
+            cursor: pointer;
+            transition: all 0.2s;
+            font-size: 0.85rem;
+            margin-left: auto;
+        }
+        
+        .btn-toggle:hover {
+            background: rgba(111, 66, 193, 0.4);
+        }
+        
+        /* Token注释样式 */
+        .token-note {
+            margin-top: 0.75rem;
+            color: rgba(230, 230, 255, 0.6);
+            font-style: italic;
+            line-height: 1.4;
+            padding: 0.5rem;
+            border-top: 1px dashed rgba(255, 255, 255, 0.1);
+        }
+        
+        .token-model-table {
+            margin-top: 1rem;
+        }
+        
+        /* Token计算方法标签样式 */
+        .token-method {
+            padding: 4px 8px;
+            border-radius: 4px;
+            font-size: 0.85rem;
+            font-weight: 500;
+        }
+        
+        .token-method-exact {
+            background-color: rgba(54, 211, 153, 0.2);
+            color: #36d399;
+        }
+        
+        .token-method-estimate {
+            background-color: rgba(251, 189, 35, 0.2);
+            color: #fbbd23;
+        }
+        
+        /* 时间日期样式 */
+        .datetime {
+            font-family: 'Consolas', monospace;
+            color: rgba(230, 230, 255, 0.8);
+            font-size: 0.9rem;
+        }
+        
+        /* 媒体查询 */
+        @media (max-width: 768px) {
+            .container {
+                padding: 1rem;
+            }
+            
+            .navbar {
+                padding: 1rem;
+            }
+            
+            .card {
+                padding: 1rem;
+            }
+            
+            .grid {
+                grid-template-columns: 1fr;
+            }
+        }
+        
+        .token-model-table td, .token-model-table th {
+            white-space: nowrap;
+        }
+        
+        /* 开关按钮样式 */
+        .toggle-switch-container {
+            display: flex;
+            align-items: center;
+            gap: 10px;
+        }
+        
+        .toggle-switch {
+            position: relative;
+            display: inline-block;
+            width: 50px;
+            height: 24px;
+        }
+        
+        .toggle-switch input {
+            opacity: 0;
+            width: 0;
+            height: 0;
+        }
+        
+        .toggle-slider {
+            position: absolute;
+            cursor: pointer;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background-color: rgba(100, 100, 150, 0.3);
+            transition: .4s;
+            border-radius: 24px;
+        }
+        
+        .toggle-slider:before {
+            position: absolute;
+            content: "";
+            height: 18px;
+            width: 18px;
+            left: 3px;
+            bottom: 3px;
+            background-color: #e6e6ff;
+            transition: .4s;
+            border-radius: 50%;
+        }
+        
+        input:checked + .toggle-slider {
+            background-color: var(--primary-color);
+        }
+        
+        input:checked + .toggle-slider:before {
+            transform: translateX(26px);
+        }
+        
+        .toggle-status {
+            font-weight: 600;
+        }
+        
+        .info-text {
+            font-size: 0.85rem;
+            color: rgba(230, 230, 255, 0.7);
+        }
+        
+        /* 通知样式 */
+        .notification {
+            position: fixed;
+            top: 20px;
+            right: 20px;
+            padding: 12px 20px;
+            border-radius: 8px;
+            color: white;
+            font-weight: 500;
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+            z-index: 1000;
+            transform: translateY(-20px);
+            opacity: 0;
+            transition: all 0.3s ease;
+            max-width: 300px;
+        }
+        
+        .notification.show {
+            transform: translateY(0);
+            opacity: 1;
+        }
+        
+        .notification.success {
+            background-color: var(--success-color);
+        }
+        
+        .notification.error {
+            background-color: var(--error-color);
+        }
+        
+        .notification.info {
+            background-color: var(--accent-color);
+        }
+        
+        /* 响应式样式 */
+        @media (max-width: 768px) {
+            .container {
+                padding: 1rem;
+            }
+            
+            .navbar {
+                padding: 1rem;
+            }
+            
+            .card {
+                padding: 1rem;
+            }
+            
+            .grid {
+                grid-template-columns: 1fr;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div class="grid-background"></div>
+    
+    <nav class="navbar">
+        <a href="/" class="navbar-brand">
+            <span class="navbar-logo">🤖</span>
+            <span class="navbar-title">Abacus Chat Proxy</span>
+        </a>
+        <div class="navbar-actions">
+            <a href="/logout" class="btn-logout">
+                <span>退出</span>
+                <span>↗</span>
+            </a>
+        </div>
+    </nav>
+    
+    <div class="container">
+        <div class="card">
+            <div class="card-header">
+                <h2 class="card-title">
+                    <span class="card-icon">📊</span>
+                    系统状态
+                </h2>
+            </div>
+            <div class="status-item">
+                <span class="status-label">服务状态</span>
+                <span class="status-value success">运行中</span>
+            </div>
+            <div class="status-item">
+                <span class="status-label">运行时间</span>
+                <span class="status-value">{{ uptime }}</span>
+            </div>
+            <div class="status-item">
+                <span class="status-label">健康检查次数</span>
+                <span class="status-value">{{ health_checks }}</span>
+            </div>
+            <div class="status-item">
+                <span class="status-label">已配置用户数</span>
+                <span class="status-value">{{ user_count }}</span>
+            </div>
+            <div class="status-item">
+                <span class="status-label">可用模型</span>
+                <div class="models-list">
+                    {% for model in models %}
+                    <span class="model-tag">{{ model }}</span>
+                    {% endfor %}
+                </div>
+            </div>
+        </div>
+        
+        <div class="grid">
+            <div class="card">
+                <div class="card-header">
+                    <h2 class="card-title">
+                        <span class="card-icon">💰</span>
+                        计算点总计
+                    </h2>
+                </div>
+                <div class="status-item">
+                    <span class="status-label">总计算点</span>
+                    <span class="status-value compute-points">{{ compute_points.total|int }}</span>
+                </div>
+                <div class="status-item">
+                    <span class="status-label">已使用</span>
+                    <span class="status-value compute-points">{{ compute_points.used|int }}</span>
+                </div>
+                <div class="status-item">
+                    <span class="status-label">剩余</span>
+                    <span class="status-value compute-points">{{ compute_points.left|int }}</span>
+                </div>
+                <div class="status-item">
+                    <span class="status-label">使用比例</span>
+                    <div style="width: 100%; text-align: right;">
+                        <span class="status-value compute-points {% if compute_points.percentage > 80 %}danger{% elif compute_points.percentage > 50 %}warning{% endif %}">
+                            {{ compute_points.percentage }}%
+                        </span>
+                        <div class="progress-container">
+                            <div class="progress-bar {% if compute_points.percentage > 80 %}danger{% elif compute_points.percentage > 50 %}warning{% endif %}" style="width: {{ compute_points.percentage }}%"></div>
+                        </div>
+                    </div>
+                </div>
+                {% if compute_points.last_update %}
+                <div class="status-item">
+                    <span class="status-label">最后更新时间</span>
+                    <span class="status-value">{{ compute_points.last_update.strftime('%Y-%m-%d %H:%M:%S') }}</span>
+                </div>
+                {% endif %}
+            </div>
+            
+            <div class="card">
+                <div class="card-header">
+                    <h2 class="card-title">
+                        <span class="card-icon">🔍</span>
+                        Token 使用统计
+                    </h2>
+                </div>
+                <div class="status-item">
+                    <span class="status-label">总输入Token</span>
+                    <span class="status-value token-count">{{ total_tokens.prompt|int }}</span>
+                </div>
+                <div class="status-item">
+                    <span class="status-label">总输出Token</span>
+                    <span class="status-value token-count">{{ total_tokens.completion|int }}</span>
+                </div>
+                <div class="token-note">
+                    <small>* 以上数据仅统计通过本代理使用的token数量，不包含在Abacus官网直接使用的token。数值为粗略估计，可能与实际计费有差异。</small>
+                </div>
+                <div class="table-container">
+                    <table class="data-table token-model-table">
+                        <thead>
+                            <tr>
+                                <th>模型</th>
+                                <th>调用次数</th>
+                                <th>输入Token</th>
+                                <th>输出Token</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            {% for model, stats in model_stats.items() %}
+                            <tr>
+                                <td>{{ model }}</td>
+                                <td class="call-count">{{ stats.count }}</td>
+                                <td class="token-count">{{ stats.prompt_tokens|int }}</td>
+                                <td class="token-count">{{ stats.completion_tokens|int }}</td>
+                            </tr>
+                            {% endfor %}
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+        </div>
+        
+        {% if users_compute_points|length > 0 %}
+        <div class="card">
+            <div class="card-header">
+                <h2 class="card-title">
+                    <span class="card-icon">👥</span>
+                    用户计算点详情
+                </h2>
+            </div>
+            <div class="table-container">
+                <table class="data-table">
+                    <thead>
+                        <tr>
+                            <th>用户</th>
+                            <th>总计算点</th>
+                            <th>已使用</th>
+                            <th>剩余</th>
+                            <th>使用比例</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        {% for user in users_compute_points %}
+                        <tr>
+                            <td>用户 {{ user.user_id }}</td>
+                            <td class="compute-points">{{ user.total|int }}</td>
+                            <td class="compute-points">{{ user.used|int }}</td>
+                            <td class="compute-points">{{ user.left|int }}</td>
+                            <td>
+                                <div style="width: 100%; position: relative;">
+                                    <span class="status-value compute-points {% if user.percentage > 80 %}danger{% elif user.percentage > 50 %}warning{% endif %}">
+                                        {{ user.percentage }}%
+                                    </span>
+                                    <div class="progress-container">
+                                        <div class="progress-bar {% if user.percentage > 80 %}danger{% elif user.percentage > 50 %}warning{% endif %}" style="width: {{ user.percentage }}%"></div>
+                                    </div>
+                                </div>
+                            </td>
+                        </tr>
+                        {% endfor %}
+                    </tbody>
+                </table>
+            </div>
+        </div>
+        {% endif %}
+        
+        <div class="card">
+            <div class="card-header">
+                <h2 class="card-title">
+                    <span class="card-icon">📊</span>
+                    计算点使用日志
+                </h2>
+            </div>
+            <div class="table-container">
+                <table class="data-table">
+                    <thead>
+                        <tr>
+                            {% for key, value in compute_points_log.columns.items() %}
+                            <th>{{ value }}</th>
+                            {% endfor %}
+                        </tr>
+                    </thead>
+                    <tbody>
+                        {% for entry in compute_points_log.log %}
+                        <tr>
+                            {% for key, value in compute_points_log.columns.items() %}
+                            <td class="compute-points">{{ entry.get(key, 0) }}</td>
+                            {% endfor %}
+                        </tr>
+                        {% endfor %}
+                    </tbody>
+                </table>
+            </div>
+        </div>
+        
+        <div class="card">
+            <div class="card-header">
+                <h2 class="card-title">
+                    <span class="card-icon">📈</span>
+                    模型调用记录
+                </h2>
+                <button id="toggleModelStats" class="btn-toggle">显示全部</button>
+            </div>
+            <div class="table-container">
+                <table class="data-table">
+                    <thead>
+                        <tr>
+                            <th>调用时间 (北京时间)</th>
+                            <th>模型</th>
+                            <th>输入Token</th>
+                            <th>输出Token</th>
+                            <th>总Token</th>
+                            <th>计算方式</th>
+                            <th>计算点数</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        {% for record in model_usage_records|reverse %}
+                        <tr class="model-row {% if loop.index > 10 %}hidden-model{% endif %}">
+                            <td class="datetime">{{ record.call_time }}</td>
+                            <td>{{ record.model }}</td>
+                            <td class="token-count">{{ record.prompt_tokens }}</td>
+                            <td class="token-count">{{ record.completion_tokens }}</td>
+                            <td>{{ record.prompt_tokens + record.completion_tokens }}</td>
+                            <td>
+                                {% if record.calculation_method == "精确" %}
+                                    <span class="token-method token-method-exact">精确</span>
+                                {% else %}
+                                    <span class="token-method token-method-estimate">估算</span>
+                                {% endif %}
+                            </td>
+                            <td>{{ record.compute_points if record.compute_points is not none and record.compute_points != 0 else 'null' }}</td>
+                        </tr>
+                        {% endfor %}
+                    </tbody>
+                </table>
+                <div class="token-note">
+                    <small>* Token计算方式：<span class="token-method token-method-exact">精确</span> 表示调用官方API精确计算，<span class="token-method token-method-estimate">估算</span> 表示使用gpt-4o模型估算。所有统计数据仅供参考，不代表实际计费标准。</small>
+                </div>
+            </div>
+        </div>
+        
+        <div class="card">
+            <div class="card-header">
+                <h2 class="card-title">
+                    <span class="card-icon">📡</span>
+                    API 端点
+                </h2>
+            </div>
+            <div class="endpoint-item">
+                <p>获取模型列表：</p>
+                {% if space_url %}
+                <a href="{{ space_url }}/v1/models" class="endpoint-url" target="_blank">GET {{ space_url }}/v1/models</a>
+                {% else %}
+                <a href="/v1/models" class="endpoint-url" target="_blank">GET /v1/models</a>
+                {% endif %}
+            </div>
+            <div class="endpoint-item">
+                <p>聊天补全：</p>
+                {% if space_url %}
+                <code class="endpoint-url">POST {{ space_url }}/v1/chat/completions</code>
+                {% else %}
+                <code class="endpoint-url">POST /v1/chat/completions</code>
+                {% endif %}
+            </div>
+            <div class="endpoint-item">
+                <p>健康检查：</p>
+                {% if space_url %}
+                <a href="{{ space_url }}/health" class="endpoint-url" target="_blank">GET {{ space_url }}/health</a>
+                {% else %}
+                <a href="/health" class="endpoint-url" target="_blank">GET /health</a>
+                {% endif %}
+            </div>
+        </div>
+        
+        <div class="footer">
+            <p>© {{ year }} Abacus Chat Proxy. 保持简单，保持可靠。</p>
+        </div>
+    </div>
+    
+    <a href="#" class="float-btn" title="回到顶部">↑</a>
+    
+    <script>
+        // 回到顶部按钮
+        document.querySelector('.float-btn').addEventListener('click', (e) => {
+            e.preventDefault();
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        });
+        
+        // 显示/隐藏回到顶部按钮
+        window.addEventListener('scroll', () => {
+            const floatBtn = document.querySelector('.float-btn');
+            if (window.pageYOffset > 300) {
+                floatBtn.style.opacity = '1';
+            } else {
+                floatBtn.style.opacity = '0';
+            }
+        });
+        
+        // 初始化隐藏回到顶部按钮
+        document.querySelector('.float-btn').style.opacity = '0';
+        
+        // 模型统计折叠功能
+        const toggleBtn = document.getElementById('toggleModelStats');
+        const hiddenModels = document.querySelectorAll('.hidden-model');
+        let isExpanded = false;
+        
+        if (toggleBtn) {
+            toggleBtn.addEventListener('click', () => {
+                hiddenModels.forEach(model => {
+                    model.classList.toggle('hidden-model');
+                });
+                
+                isExpanded = !isExpanded;
+                toggleBtn.textContent = isExpanded ? '隐藏部分' : '显示全部';
+            });
+        }
+        
+        document.addEventListener('DOMContentLoaded', function() {
+            initCharts();
+            
+            // 显示/隐藏更多模型使用记录
+            const toggleModelStats = document.getElementById('toggleModelStats');
+            if (toggleModelStats) {
+                toggleModelStats.addEventListener('click', function() {
+                    const hiddenRows = document.querySelectorAll('.hidden-model');
+                    hiddenRows.forEach(row => {
+                        row.classList.toggle('show-model');
+                    });
+                    toggleModelStats.textContent = toggleModelStats.textContent === '显示全部' ? '隐藏部分' : '显示全部';
+                });
+            }
+            
+            // 处理计算点数记录开关
+            const computePointToggle = document.getElementById('compute-point-toggle');
+            const computePointStatus = document.getElementById('compute-point-status');
+            
+            if (computePointToggle && computePointStatus) {
+                computePointToggle.addEventListener('change', function() {
+                    const isChecked = this.checked;
+                    computePointStatus.textContent = isChecked ? '开启' : '关闭';
+                    
+                    // 发送更新请求到后端
+                    fetch('/update_compute_point_toggle', {
+                        method: 'POST',
+                        headers: {
+                            'Content-Type': 'application/json',
+                        },
+                        body: JSON.stringify({ always_display: isChecked })
+                    })
+                    .then(response => response.json())
+                    .then(data => {
+                        if (data.success) {
+                            // 显示成功提示
+                            showNotification(isChecked ? '已开启计算点数记录功能' : '已关闭计算点数记录功能', 'success');
+                        } else {
+                            // 显示错误提示
+                            showNotification('设置更新失败: ' + data.error, 'error');
+                            // 回滚UI状态
+                            computePointToggle.checked = !isChecked;
+                            computePointStatus.textContent = !isChecked ? '开启' : '关闭';
+                        }
+                    })
+                    .catch(error => {
+                        console.error('更新设置出错:', error);
+                        showNotification('更新设置失败，请重试', 'error');
+                        // 回滚UI状态
+                        computePointToggle.checked = !isChecked;
+                        computePointStatus.textContent = !isChecked ? '开启' : '关闭';
+                    });
+                });
+            }
+        });
+        
+        // 通知函数
+        function showNotification(message, type = 'info') {
+            const notification = document.createElement('div');
+            notification.className = `notification ${type}`;
+            notification.textContent = message;
+            
+            document.body.appendChild(notification);
+            
+            // 显示动画
+            setTimeout(() => {
+                notification.classList.add('show');
+            }, 10);
+            
+            // 3秒后淡出
+            setTimeout(() => {
+                notification.classList.remove('show');
+                setTimeout(() => {
+                    notification.remove();
+                }, 300);
+            }, 3000);
+        }
+    </script>
+</body>
 </html> 

templates/login.html

@@ -1,462 +1,462 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Abacus Chat Proxy - 登录</title>
-    <style>
-        :root {
-            --primary-color: #6f42c1;
-            --secondary-color: #4a32a8;
-            --bg-color: #0a0a1a;
-            --text-color: #e6e6ff;
-            --card-bg: rgba(30, 30, 60, 0.7);
-            --input-bg: rgba(40, 40, 80, 0.6);
-            --success-color: #36d399;
-            --error-color: #f87272;
-        }
-        
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-        }
-        
-        body {
-            min-height: 100vh;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            background-color: var(--bg-color);
-            background-image: 
-                radial-gradient(circle at 20% 35%, rgba(111, 66, 193, 0.15) 0%, transparent 40%),
-                radial-gradient(circle at 80% 10%, rgba(70, 111, 171, 0.1) 0%, transparent 40%);
-            color: var(--text-color);
-            position: relative;
-            overflow: hidden;
-        }
-        
-        /* 科幻蜘蛛网动画 */
-        .web-container {
-            position: absolute;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            z-index: -2;
-            opacity: 0.6;
-        }
-        
-        .web {
-            width: 100%;
-            height: 100%;
-        }
-        
-        /* 动态背景网格 */
-        .grid-background {
-            position: absolute;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            background-image: linear-gradient(rgba(50, 50, 100, 0.05) 1px, transparent 1px),
-                              linear-gradient(90deg, rgba(50, 50, 100, 0.05) 1px, transparent 1px);
-            background-size: 30px 30px;
-            z-index: -1;
-            animation: grid-move 20s linear infinite;
-        }
-        
-        @keyframes grid-move {
-            0% {
-                transform: translateY(0);
-            }
-            100% {
-                transform: translateY(30px);
-            }
-        }
-        
-        /* 浮动粒子效果 */
-        .particles {
-            position: absolute;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            overflow: hidden;
-            z-index: -1;
-        }
-        
-        .particle {
-            position: absolute;
-            display: block;
-            pointer-events: none;
-            width: 6px;
-            height: 6px;
-            background-color: rgba(111, 66, 193, 0.2);
-            border-radius: 50%;
-            animation: float 20s infinite ease-in-out;
-        }
-        
-        @keyframes float {
-            0%, 100% {
-                transform: translateY(0) translateX(0);
-                opacity: 0;
-            }
-            50% {
-                opacity: 0.5;
-            }
-            25%, 75% {
-                transform: translateY(-100px) translateX(50px);
-            }
-        }
-        
-        .login-card {
-            width: 420px;
-            padding: 2.5rem;
-            border-radius: 16px;
-            background: var(--card-bg);
-            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
-            backdrop-filter: blur(8px);
-            border: 1px solid rgba(255, 255, 255, 0.1);
-            z-index: 10;
-            animation: card-fade-in 0.6s ease-out;
-        }
-        
-        @keyframes card-fade-in {
-            from {
-                opacity: 0;
-                transform: translateY(20px);
-            }
-            to {
-                opacity: 1;
-                transform: translateY(0);
-            }
-        }
-        
-        .login-header {
-            text-align: center;
-            margin-bottom: 2rem;
-        }
-        
-        .login-header h1 {
-            font-size: 2rem;
-            font-weight: 600;
-            margin-bottom: 0.5rem;
-            background: linear-gradient(45deg, #6f42c1, #5181f1);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            letter-spacing: 0.5px;
-        }
-        
-        .login-header p {
-            color: rgba(230, 230, 255, 0.7);
-            font-size: 0.95rem;
-        }
-        
-        .space-info {
-            text-align: center;
-            background: rgba(50, 50, 150, 0.2);
-            padding: 0.75rem;
-            border-radius: 8px;
-            margin-bottom: 1.5rem;
-            font-size: 0.9rem;
-            border: 1px solid rgba(111, 66, 193, 0.3);
-        }
-        
-        .space-info a {
-            color: var(--primary-color);
-            text-decoration: none;
-            font-weight: bold;
-            transition: all 0.2s;
-        }
-        
-        .space-info a:hover {
-            text-decoration: underline;
-            color: var(--secondary-color);
-        }
-        
-        .login-form {
-            display: flex;
-            flex-direction: column;
-        }
-        
-        .form-group {
-            margin-bottom: 1.5rem;
-            position: relative;
-        }
-        
-        .form-group label {
-            display: block;
-            margin-bottom: 0.5rem;
-            font-size: 0.9rem;
-            font-weight: 500;
-            color: rgba(230, 230, 255, 0.9);
-        }
-        
-        .form-control {
-            width: 100%;
-            padding: 0.75rem 1rem;
-            font-size: 1rem;
-            line-height: 1.5;
-            color: var(--text-color);
-            background-color: var(--input-bg);
-            border: 1px solid rgba(255, 255, 255, 0.1);
-            border-radius: 8px;
-            transition: all 0.2s ease;
-            outline: none;
-        }
-        
-        .form-control:focus {
-            border-color: var(--primary-color);
-            box-shadow: 0 0 0 3px rgba(111, 66, 193, 0.2);
-        }
-        
-        .btn {
-            display: inline-block;
-            font-weight: 500;
-            text-align: center;
-            vertical-align: middle;
-            cursor: pointer;
-            padding: 0.75rem 1rem;
-            font-size: 1rem;
-            line-height: 1.5;
-            border-radius: 8px;
-            transition: all 0.15s ease-in-out;
-            border: none;
-        }
-        
-        .btn-primary {
-            color: #fff;
-            background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
-            box-shadow: 0 4px 10px rgba(111, 66, 193, 0.3);
-            position: relative;
-            overflow: hidden;
-        }
-        
-        .btn-primary:hover {
-            transform: translateY(-2px);
-            box-shadow: 0 6px 15px rgba(111, 66, 193, 0.4);
-        }
-        
-        .btn-primary:active {
-            transform: translateY(0);
-        }
-        
-        /* 添加光效效果 */
-        .btn-primary::before {
-            content: '';
-            position: absolute;
-            top: -50%;
-            left: -50%;
-            width: 200%;
-            height: 200%;
-            background: linear-gradient(
-                to bottom right,
-                rgba(255, 255, 255, 0) 0%,
-                rgba(255, 255, 255, 0.1) 50%,
-                rgba(255, 255, 255, 0) 100%
-            );
-            transform: rotate(45deg);
-            animation: btn-shine 3s infinite;
-        }
-        
-        @keyframes btn-shine {
-            0% {
-                left: -50%;
-            }
-            100% {
-                left: 150%;
-            }
-        }
-        
-        .error-message {
-            background-color: rgba(248, 114, 114, 0.2);
-            color: var(--error-color);
-            padding: 0.75rem;
-            border-radius: 6px;
-            margin-bottom: 1.5rem;
-            font-size: 0.9rem;
-            border-left: 3px solid var(--error-color);
-            display: {{ 'block' if error else 'none' }};
-        }
-        
-        .logo {
-            margin-bottom: 1rem;
-            font-size: 3rem;
-            animation: glow 2s infinite alternate;
-        }
-        
-        @keyframes glow {
-            from {
-                text-shadow: 0 0 5px rgba(111, 66, 193, 0.5), 0 0 10px rgba(111, 66, 193, 0.5);
-            }
-            to {
-                text-shadow: 0 0 10px rgba(111, 66, 193, 0.8), 0 0 20px rgba(111, 66, 193, 0.8);
-            }
-        }
-    </style>
-</head>
-<body>
-    <div class="grid-background"></div>
-    <div class="particles">
-        <!-- 粒子元素会由JS生成 -->
-    </div>
-    <div class="web-container">
-        <canvas class="web" id="webCanvas"></canvas>
-    </div>
-    
-    <div class="login-card">
-        <div class="login-header">
-            <div class="logo">🤖</div>
-            <h1>Abacus Chat Proxy</h1>
-            <p>请输入访问密码</p>
-        </div>
-        
-        {% if space_url %}
-        <div class="space-info">
-            api接口为{{ space_url }}/v1，请点击 <a href="{{ space_url }}" target="_blank">{{ space_url }}</a> 来登录并查看使用情况，
-        </div>
-        {% endif %}
-        
-        <div class="error-message" id="error-message">
-            {{ error }}
-        </div>
-        
-        <form class="login-form" method="post" action="/login">
-            <div class="form-group">
-                <label for="password">密码</label>
-                <input type="password" class="form-control" id="password" name="password" placeholder="请输入访问密码" required>
-            </div>
-            
-            <button type="submit" class="btn btn-primary">登录</button>
-        </form>
-    </div>
-    
-    <script>
-        // 创建浮动粒子
-        function createParticles() {
-            const particlesContainer = document.querySelector('.particles');
-            const particleCount = 20;
-            
-            for (let i = 0; i < particleCount; i++) {
-                const particle = document.createElement('div');
-                particle.className = 'particle';
-                
-                // 随机位置和大小
-                const size = Math.random() * 5 + 2;
-                const x = Math.random() * 100;
-                const y = Math.random() * 100;
-                
-                particle.style.width = `${size}px`;
-                particle.style.height = `${size}px`;
-                particle.style.left = `${x}%`;
-                particle.style.top = `${y}%`;
-                
-                // 随机动画延迟
-                particle.style.animationDelay = `${Math.random() * 10}s`;
-                particle.style.animationDuration = `${Math.random() * 10 + 10}s`;
-                
-                // 随机透明度
-                particle.style.opacity = Math.random() * 0.5;
-                
-                particlesContainer.appendChild(particle);
-            }
-        }
-        
-        // 科幻蜘蛛网效果
-        function initWebCanvas() {
-            const canvas = document.getElementById('webCanvas');
-            const ctx = canvas.getContext('2d');
-            let width = window.innerWidth;
-            let height = window.innerHeight;
-            
-            // 设置canvas尺寸
-            canvas.width = width;
-            canvas.height = height;
-            
-            // 节点类
-            class Node {
-                constructor(x, y) {
-                    this.x = x;
-                    this.y = y;
-                    this.vx = (Math.random() - 0.5) * 0.5;
-                    this.vy = (Math.random() - 0.5) * 0.5;
-                    this.radius = Math.random() * 2 + 1;
-                }
-                
-                update() {
-                    if (this.x < 0 || this.x > width) this.vx = -this.vx;
-                    if (this.y < 0 || this.y > height) this.vy = -this.vy;
-                    
-                    this.x += this.vx;
-                    this.y += this.vy;
-                }
-                
-                draw() {
-                    ctx.beginPath();
-                    ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
-                    ctx.fillStyle = 'rgba(111, 66, 193, 0.4)';
-                    ctx.fill();
-                }
-            }
-            
-            // 创建节点
-            const nodeCount = Math.floor(width * height / 15000);
-            const nodes = [];
-            
-            for (let i = 0; i < nodeCount; i++) {
-                nodes.push(new Node(Math.random() * width, Math.random() * height));
-            }
-            
-            // 绘制线条
-            function drawWeb() {
-                ctx.clearRect(0, 0, width, height);
-                
-                // 更新节点
-                nodes.forEach(node => {
-                    node.update();
-                    node.draw();
-                });
-                
-                // 绘制连线
-                for (let i = 0; i < nodes.length; i++) {
-                    for (let j = i + 1; j < nodes.length; j++) {
-                        const dx = nodes[i].x - nodes[j].x;
-                        const dy = nodes[i].y - nodes[j].y;
-                        const distance = Math.sqrt(dx * dx + dy * dy);
-                        
-                        if (distance < 150) {
-                            ctx.beginPath();
-                            ctx.moveTo(nodes[i].x, nodes[i].y);
-                            ctx.lineTo(nodes[j].x, nodes[j].y);
-                            ctx.strokeStyle = `rgba(111, 66, 193, ${0.2 * (1 - distance / 150)})`;
-                            ctx.lineWidth = 0.5;
-                            ctx.stroke();
-                        }
-                    }
-                }
-                
-                requestAnimationFrame(drawWeb);
-            }
-            
-            // 监听窗口大小变化
-            window.addEventListener('resize', () => {
-                width = window.innerWidth;
-                height = window.innerHeight;
-                canvas.width = width;
-                canvas.height = height;
-            });
-            
-            // 开始动画
-            drawWeb();
-        }
-        
-        // 页面加载时初始化效果
-        window.addEventListener('load', () => {
-            createParticles();
-            initWebCanvas();
-        });
-    </script>
-</body>
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Abacus Chat Proxy - 登录</title>
+    <style>
+        :root {
+            --primary-color: #6f42c1;
+            --secondary-color: #4a32a8;
+            --bg-color: #0a0a1a;
+            --text-color: #e6e6ff;
+            --card-bg: rgba(30, 30, 60, 0.7);
+            --input-bg: rgba(40, 40, 80, 0.6);
+            --success-color: #36d399;
+            --error-color: #f87272;
+        }
+        
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+        }
+        
+        body {
+            min-height: 100vh;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            background-color: var(--bg-color);
+            background-image: 
+                radial-gradient(circle at 20% 35%, rgba(111, 66, 193, 0.15) 0%, transparent 40%),
+                radial-gradient(circle at 80% 10%, rgba(70, 111, 171, 0.1) 0%, transparent 40%);
+            color: var(--text-color);
+            position: relative;
+            overflow: hidden;
+        }
+        
+        /* 科幻蜘蛛网动画 */
+        .web-container {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            z-index: -2;
+            opacity: 0.6;
+        }
+        
+        .web {
+            width: 100%;
+            height: 100%;
+        }
+        
+        /* 动态背景网格 */
+        .grid-background {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background-image: linear-gradient(rgba(50, 50, 100, 0.05) 1px, transparent 1px),
+                              linear-gradient(90deg, rgba(50, 50, 100, 0.05) 1px, transparent 1px);
+            background-size: 30px 30px;
+            z-index: -1;
+            animation: grid-move 20s linear infinite;
+        }
+        
+        @keyframes grid-move {
+            0% {
+                transform: translateY(0);
+            }
+            100% {
+                transform: translateY(30px);
+            }
+        }
+        
+        /* 浮动粒子效果 */
+        .particles {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            overflow: hidden;
+            z-index: -1;
+        }
+        
+        .particle {
+            position: absolute;
+            display: block;
+            pointer-events: none;
+            width: 6px;
+            height: 6px;
+            background-color: rgba(111, 66, 193, 0.2);
+            border-radius: 50%;
+            animation: float 20s infinite ease-in-out;
+        }
+        
+        @keyframes float {
+            0%, 100% {
+                transform: translateY(0) translateX(0);
+                opacity: 0;
+            }
+            50% {
+                opacity: 0.5;
+            }
+            25%, 75% {
+                transform: translateY(-100px) translateX(50px);
+            }
+        }
+        
+        .login-card {
+            width: 420px;
+            padding: 2.5rem;
+            border-radius: 16px;
+            background: var(--card-bg);
+            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
+            backdrop-filter: blur(8px);
+            border: 1px solid rgba(255, 255, 255, 0.1);
+            z-index: 10;
+            animation: card-fade-in 0.6s ease-out;
+        }
+        
+        @keyframes card-fade-in {
+            from {
+                opacity: 0;
+                transform: translateY(20px);
+            }
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
+        
+        .login-header {
+            text-align: center;
+            margin-bottom: 2rem;
+        }
+        
+        .login-header h1 {
+            font-size: 2rem;
+            font-weight: 600;
+            margin-bottom: 0.5rem;
+            background: linear-gradient(45deg, #6f42c1, #5181f1);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            letter-spacing: 0.5px;
+        }
+        
+        .login-header p {
+            color: rgba(230, 230, 255, 0.7);
+            font-size: 0.95rem;
+        }
+        
+        .space-info {
+            text-align: center;
+            background: rgba(50, 50, 150, 0.2);
+            padding: 0.75rem;
+            border-radius: 8px;
+            margin-bottom: 1.5rem;
+            font-size: 0.9rem;
+            border: 1px solid rgba(111, 66, 193, 0.3);
+        }
+        
+        .space-info a {
+            color: var(--primary-color);
+            text-decoration: none;
+            font-weight: bold;
+            transition: all 0.2s;
+        }
+        
+        .space-info a:hover {
+            text-decoration: underline;
+            color: var(--secondary-color);
+        }
+        
+        .login-form {
+            display: flex;
+            flex-direction: column;
+        }
+        
+        .form-group {
+            margin-bottom: 1.5rem;
+            position: relative;
+        }
+        
+        .form-group label {
+            display: block;
+            margin-bottom: 0.5rem;
+            font-size: 0.9rem;
+            font-weight: 500;
+            color: rgba(230, 230, 255, 0.9);
+        }
+        
+        .form-control {
+            width: 100%;
+            padding: 0.75rem 1rem;
+            font-size: 1rem;
+            line-height: 1.5;
+            color: var(--text-color);
+            background-color: var(--input-bg);
+            border: 1px solid rgba(255, 255, 255, 0.1);
+            border-radius: 8px;
+            transition: all 0.2s ease;
+            outline: none;
+        }
+        
+        .form-control:focus {
+            border-color: var(--primary-color);
+            box-shadow: 0 0 0 3px rgba(111, 66, 193, 0.2);
+        }
+        
+        .btn {
+            display: inline-block;
+            font-weight: 500;
+            text-align: center;
+            vertical-align: middle;
+            cursor: pointer;
+            padding: 0.75rem 1rem;
+            font-size: 1rem;
+            line-height: 1.5;
+            border-radius: 8px;
+            transition: all 0.15s ease-in-out;
+            border: none;
+        }
+        
+        .btn-primary {
+            color: #fff;
+            background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
+            box-shadow: 0 4px 10px rgba(111, 66, 193, 0.3);
+            position: relative;
+            overflow: hidden;
+        }
+        
+        .btn-primary:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 6px 15px rgba(111, 66, 193, 0.4);
+        }
+        
+        .btn-primary:active {
+            transform: translateY(0);
+        }
+        
+        /* 添加光效效果 */
+        .btn-primary::before {
+            content: '';
+            position: absolute;
+            top: -50%;
+            left: -50%;
+            width: 200%;
+            height: 200%;
+            background: linear-gradient(
+                to bottom right,
+                rgba(255, 255, 255, 0) 0%,
+                rgba(255, 255, 255, 0.1) 50%,
+                rgba(255, 255, 255, 0) 100%
+            );
+            transform: rotate(45deg);
+            animation: btn-shine 3s infinite;
+        }
+        
+        @keyframes btn-shine {
+            0% {
+                left: -50%;
+            }
+            100% {
+                left: 150%;
+            }
+        }
+        
+        .error-message {
+            background-color: rgba(248, 114, 114, 0.2);
+            color: var(--error-color);
+            padding: 0.75rem;
+            border-radius: 6px;
+            margin-bottom: 1.5rem;
+            font-size: 0.9rem;
+            border-left: 3px solid var(--error-color);
+            display: {{ 'block' if error else 'none' }};
+        }
+        
+        .logo {
+            margin-bottom: 1rem;
+            font-size: 3rem;
+            animation: glow 2s infinite alternate;
+        }
+        
+        @keyframes glow {
+            from {
+                text-shadow: 0 0 5px rgba(111, 66, 193, 0.5), 0 0 10px rgba(111, 66, 193, 0.5);
+            }
+            to {
+                text-shadow: 0 0 10px rgba(111, 66, 193, 0.8), 0 0 20px rgba(111, 66, 193, 0.8);
+            }
+        }
+    </style>
+</head>
+<body>
+    <div class="grid-background"></div>
+    <div class="particles">
+        <!-- 粒子元素会由JS生成 -->
+    </div>
+    <div class="web-container">
+        <canvas class="web" id="webCanvas"></canvas>
+    </div>
+    
+    <div class="login-card">
+        <div class="login-header">
+            <div class="logo">🤖</div>
+            <h1>Abacus Chat Proxy</h1>
+            <p>请输入访问密码</p>
+        </div>
+        
+        {% if space_url %}
+        <div class="space-info">
+            api接口为{{ space_url }}/v1，请点击 <a href="{{ space_url }}" target="_blank">{{ space_url }}</a> 来登录并查看使用情况，
+        </div>
+        {% endif %}
+        
+        <div class="error-message" id="error-message">
+            {{ error }}
+        </div>
+        
+        <form class="login-form" method="post" action="/login">
+            <div class="form-group">
+                <label for="password">密码</label>
+                <input type="password" class="form-control" id="password" name="password" placeholder="请输入访问密码" required>
+            </div>
+            
+            <button type="submit" class="btn btn-primary">登录</button>
+        </form>
+    </div>
+    
+    <script>
+        // 创建浮动粒子
+        function createParticles() {
+            const particlesContainer = document.querySelector('.particles');
+            const particleCount = 20;
+            
+            for (let i = 0; i < particleCount; i++) {
+                const particle = document.createElement('div');
+                particle.className = 'particle';
+                
+                // 随机位置和大小
+                const size = Math.random() * 5 + 2;
+                const x = Math.random() * 100;
+                const y = Math.random() * 100;
+                
+                particle.style.width = `${size}px`;
+                particle.style.height = `${size}px`;
+                particle.style.left = `${x}%`;
+                particle.style.top = `${y}%`;
+                
+                // 随机动画延迟
+                particle.style.animationDelay = `${Math.random() * 10}s`;
+                particle.style.animationDuration = `${Math.random() * 10 + 10}s`;
+                
+                // 随机透明度
+                particle.style.opacity = Math.random() * 0.5;
+                
+                particlesContainer.appendChild(particle);
+            }
+        }
+        
+        // 科幻蜘蛛网效果
+        function initWebCanvas() {
+            const canvas = document.getElementById('webCanvas');
+            const ctx = canvas.getContext('2d');
+            let width = window.innerWidth;
+            let height = window.innerHeight;
+            
+            // 设置canvas尺寸
+            canvas.width = width;
+            canvas.height = height;
+            
+            // 节点类
+            class Node {
+                constructor(x, y) {
+                    this.x = x;
+                    this.y = y;
+                    this.vx = (Math.random() - 0.5) * 0.5;
+                    this.vy = (Math.random() - 0.5) * 0.5;
+                    this.radius = Math.random() * 2 + 1;
+                }
+                
+                update() {
+                    if (this.x < 0 || this.x > width) this.vx = -this.vx;
+                    if (this.y < 0 || this.y > height) this.vy = -this.vy;
+                    
+                    this.x += this.vx;
+                    this.y += this.vy;
+                }
+                
+                draw() {
+                    ctx.beginPath();
+                    ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
+                    ctx.fillStyle = 'rgba(111, 66, 193, 0.4)';
+                    ctx.fill();
+                }
+            }
+            
+            // 创建节点
+            const nodeCount = Math.floor(width * height / 15000);
+            const nodes = [];
+            
+            for (let i = 0; i < nodeCount; i++) {
+                nodes.push(new Node(Math.random() * width, Math.random() * height));
+            }
+            
+            // 绘制线条
+            function drawWeb() {
+                ctx.clearRect(0, 0, width, height);
+                
+                // 更新节点
+                nodes.forEach(node => {
+                    node.update();
+                    node.draw();
+                });
+                
+                // 绘制连线
+                for (let i = 0; i < nodes.length; i++) {
+                    for (let j = i + 1; j < nodes.length; j++) {
+                        const dx = nodes[i].x - nodes[j].x;
+                        const dy = nodes[i].y - nodes[j].y;
+                        const distance = Math.sqrt(dx * dx + dy * dy);
+                        
+                        if (distance < 150) {
+                            ctx.beginPath();
+                            ctx.moveTo(nodes[i].x, nodes[i].y);
+                            ctx.lineTo(nodes[j].x, nodes[j].y);
+                            ctx.strokeStyle = `rgba(111, 66, 193, ${0.2 * (1 - distance / 150)})`;
+                            ctx.lineWidth = 0.5;
+                            ctx.stroke();
+                        }
+                    }
+                }
+                
+                requestAnimationFrame(drawWeb);
+            }
+            
+            // 监听窗口大小变化
+            window.addEventListener('resize', () => {
+                width = window.innerWidth;
+                height = window.innerHeight;
+                canvas.width = width;
+                canvas.height = height;
+            });
+            
+            // 开始动画
+            drawWeb();
+        }
+        
+        // 页面加载时初始化效果
+        window.addEventListener('load', () => {
+            createParticles();
+            initWebCanvas();
+        });
+    </script>
+</body>
 </html>