feat: Deploy to Hugging Face Space

Dockerfile

@@ -19,6 +19,7 @@ RUN pip install --no-cache-dir --upgrade -r requirements.txt
 # 将src目录下的所有代码复制到工作目录的src子目录中
 COPY --chown=user ./src /app/src
 COPY --chown=user ./templates /app/templates
+COPY --chown=user ./static /app/static
 
 # 暴露端口，让Hugging Face平台可以访问我们的应用
 EXPOSE 7860

docs/修改记录.md

@@ -26,7 +26,7 @@
 - 创建项目规划文档 (docs/项目规划.md)
 - 创建requirements.txt文件
 - 创建README.md文档
-- 创建修改记录文档 (docs/修改记录.md)
+- 创建修改记录文档 (docs/修改记录.md) 
 
 ## 第2次修改
 - 创建更新计划文档 (docs/更新计划.md)

src/app.py

@@ -13,6 +13,7 @@ from datetime import datetime
 from typing import Optional
 import importlib.util
 import asyncio
+import socket
 
 # 在代码开头强制设置终端编码为UTF-8
 os.system('chcp 6001 > nul')
@@ -100,6 +101,8 @@ api_key = "ms-b4690538-3224-493a-8f5b-4073d527f788"
 model_manager = ModelManager(api_key)
 active_debate_session = None
 active_websocket = None
+active_debate_task = None
+
 
 @app.get("/", response_class=HTMLResponse)
 async def read_root(request: Request):
@@ -139,18 +142,20 @@ async def websocket_endpoint(websocket: WebSocket):
 
 async def handle_websocket_message(websocket: WebSocket, message: str):
     """处理WebSocket消息"""
+    global active_debate_task
     try:
         data = json.loads(message)
         action = data.get("action")
         
         if action == "start_debate":
-            await start_debate(websocket, data)
+            if active_debate_task and not active_debate_task.done():
+                await websocket.send_text(json.dumps({
+                    "type": "error", "message": "另一场辩论正在进行中，请等待其结束或停止它。"
+                }))
+                return
+            active_debate_task = asyncio.create_task(start_debate(websocket, data))
         elif action == "stop_debate":
             await stop_debate(websocket)
-        elif action == "pause_debate":
-            await pause_debate(websocket)
-        elif action == "resume_debate":
-            await resume_debate(websocket)
         else:
             await websocket.send_text(json.dumps({
                 "type": "error",
@@ -170,23 +175,19 @@ async def handle_websocket_message(websocket: WebSocket, message: str):
 
 async def start_debate(websocket: WebSocket, data: dict):
     """开始辩论"""
-    global active_debate_session
+    global active_debate_session, active_debate_task
     loop = asyncio.get_event_loop()
     
     try:
         topic = data.get("topic", "人工智能是否会取代人类的工作")
         rounds = int(data.get("rounds", 5))
         first_model = data.get("first_model", "glm45")
-        initial_prompt = data.get("initial_prompt", "").strip() # 新增：获取自定义初始提示
+        initial_prompt = data.get("initial_prompt", "").strip()
         
         await websocket.send_text(json.dumps({ "type": "debate_started", "message": "辩论已开始", "topic": topic, "rounds": rounds, "first_model": first_model }))
         
-        active_debate_session = DebateSession(topic, rounds, first_model)
+        active_debate_session = DebateSession(topic, rounds, first_model, initial_prompt)
         
-        # 新增：如果存在自定义初始提示，则添加到会话历史中
-        if initial_prompt:
-            active_debate_session.add_message(DebateMessage("user", initial_prompt, "system"))
-
         model_a_name = first_model
         model_b_name = 'deepseek_v31' if model_a_name == 'glm45' else 'glm45'
         model_a = model_manager.get_model(model_a_name)
@@ -198,9 +199,6 @@ async def start_debate(websocket: WebSocket, data: dict):
         
         # Main debate loop
         for i in range(rounds * 2):
-            if not active_debate_session.is_active:
-                break
-
             round_num = (i // 2) + 1
             if i % 2 == 0:
                 active_debate_session.current_round = round_num
@@ -228,43 +226,43 @@ async def start_debate(websocket: WebSocket, data: dict):
             active_debate_session.add_message(DebateMessage("assistant", response_content, speaker_name))
             save_debate_record() # Incremental save
 
-        if active_debate_session.is_active:
+        if active_debate_session and active_debate_session.is_active:
             active_debate_session.end_time = datetime.now()
             active_debate_session.is_active = False
             await websocket.send_text(json.dumps({ "type": "debate_ended", "message": "=== 辩论结束 ===" }))
             save_debate_record()
             logger.info("辩论结束")
         
+    except asyncio.CancelledError:
+        logger.info("辩论任务被取消。")
+        if active_debate_session:
+            active_debate_session.is_active = False
+            active_debate_session.end_time = datetime.now()
+            save_debate_record() # 保存部分辩论记录
+            await websocket.send_text(json.dumps({
+                "type": "debate_stopped",
+                "message": "辩论已由用户停止"
+            }))
+        raise  # 重新引发CancelledError以确保任务状态正确
     except Exception as e:
-        logger.error(f"辩论过程中出错: {str(e)}")
+        logger.error(f"辩论过程中出错: {str(e)}", exc_info=True)
         await websocket.send_text(json.dumps({ "type": "error", "message": f"辩论过程中出错: {str(e)}" }))
+    finally:
+        active_debate_session = None
+        active_debate_task = None
+        logger.info("辩论会话清理完毕。")
+
 
 async def stop_debate(websocket: WebSocket):
     """停止辩论"""
-    global active_debate_session
-    if active_debate_session:
-        active_debate_session.is_active = False
-        active_debate_session.end_time = datetime.now()
-        await websocket.send_text(json.dumps({
-            "type": "debate_stopped",
-            "message": "辩论已停止"
-        }))
-        save_debate_record()
-        active_debate_session = None
-
-async def pause_debate(websocket: WebSocket):
-    """暂停辩论"""
-    await websocket.send_text(json.dumps({
-        "type": "debate_paused",
-        "message": "辩论已暂停"
-    }))
+    global active_debate_task
+    if active_debate_task and not active_debate_task.done():
+        active_debate_task.cancel()
+        logger.info("发送取消请求到辩论任务。")
+    else:
+        logger.warning("请求停止辩论，但没有活动的任务。")
+        await websocket.send_text(json.dumps({"type": "info", "message": "没有正在进行的辩论可供停止。"}))
 
-async def resume_debate(websocket: WebSocket):
-    """继续辩论"""
-    await websocket.send_text(json.dumps({
-        "type": "debate_resumed",
-        "message": "辩论已继续"
-    }))
 
 def save_debate_record():
     """保存辩论记录"""
@@ -280,67 +278,17 @@ def save_debate_record():
             logger.error(f"保存辩论记录时出错: {str(e)}")
 
 def create_templates():
-    """创建HTML模板文件"""
-    index_html = """
+    """创建HTML模板文件，如果不存在的话"""
+    template_path = os.path.join(templates_dir, "index.html")
+    if not os.path.exists(template_path):
+        index_html = """
 <!DOCTYPE html>
 <html lang="zh-CN">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>AI大模型辩论系统</title>
-    <style>
-        body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; margin: 0; background-color: #f0f2f5; color: #333; height: 100vh; display: flex; flex-direction: column; }
-        .container { background-color: white; padding: 20px; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); width: 95%; max-width: 1400px; margin: 20px auto; flex-grow: 1; display: flex; flex-direction: column; }
-        .main-layout { display: flex; gap: 20px; flex-grow: 1; min-height: 0; }
-        .sidebar { flex: 0 0 320px; display: flex; flex-direction: column; gap: 15px; }
-        .chat-area { flex: 1; display: flex; flex-direction: column; min-width: 0; }
-        .header { text-align: center; margin-bottom: 20px; flex-shrink: 0; }
-        .header h1 { color: #1a73e8; }
-        .controls, .control-group { margin-bottom: 20px; }
-        .controls { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
-        .control-group { flex: 1; min-width: 200px; }
-        label { display: block; margin-bottom: 5px; font-weight: 600; color: #555; }
-        input, select, button, textarea { width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 6px; box-sizing: border-box; font-size: 16px; }
-        textarea { resize: vertical; }
-        button { background-color: #1a73e8; color: white; border: none; cursor: pointer; transition: background-color 0.3s; }
-        button:hover { background-color: #1558b8; }
-        button:disabled { background-color: #ccc; cursor: not-allowed; }
-        .output-container { background-color: #f8f9fa; border: 1px solid #ddd; border-radius: 8px; padding: 20px; height: 500px; overflow-y: auto; display: flex; flex-direction: column; gap: 15px; }
-        .status { padding: 10px; border-radius: 6px; margin-bottom: 15px; border: 1px solid; }
-        .status.connected { background-color: #e6f4ea; color: #155724; border-color: #c3e6cb; }
-        .status.disconnected { background-color: #f8d7da; color: #721c24; border-color: #f5c6cb; }
-        
-        /* 聊天气泡样式 */
-        .message { display: flex; align-items: flex-start; gap: 10px; max-width: 80%; }
-        .message .avatar { width: 40px; height: 40px; border-radius: 50%; color: white; display: flex; align-items: center; justify-content: center; font-weight: bold; flex-shrink: 0; font-size: 18px; }
-        .message .content { background-color: #ffffff; padding: 10px 15px; border-radius: 18px; box-shadow: 0 1px 2px rgba(0,0,0,0.1); }
-        .message .sender { font-weight: bold; margin-bottom: 5px; color: #333; }
-        .message.glm45 { align-self: flex-start; }
-        .message.glm45 .avatar { background-color: #34a853; } /* Google Green */
-        .message.glm45 .content { border-top-left-radius: 4px; }
-        .message.deepseek_v31 { align-self: flex-end; flex-direction: row-reverse; }
-        .message.deepseek_v31 .avatar { background-color: #4285f4; } /* Google Blue */
-        .message.deepseek_v31 .content { background-color: #e7f3ff; border-top-right-radius: 4px; }
-        .message .text { white-space: pre-wrap; word-wrap: break-word; }
-        .message .text p { margin: 0 0 10px; }
-        .message .text h1, .message .text h2, .message .text h3 { margin: 15px 0 10px; border-bottom: 1px solid #eee; padding-bottom: 5px; }
-        .message .text ul, .message .text ol { padding-left: 20px; }
-        .message .text code { background-color: #eee; padding: 2px 4px; border-radius: 4px; font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace; }
-        .message .text pre { background-color: #2d2d2d; color: #f8f8f2; padding: 15px; border-radius: 6px; overflow-x: auto; }
-        .message .text pre code { background-color: transparent; padding: 0; }
-        .round-separator { text-align: center; color: #888; font-size: 0.9em; margin: 20px 0; font-weight: 600; }
-
-        /* 响应式设计 - 针对手机等小屏幕设备 */
-        @media (max-width: 768px) {
-            body { padding: 0; }
-            .container { width: 100%; margin: 0; border-radius: 0; padding: 10px; height: 100%; }
-            .main-layout { flex-direction: column; }
-            .sidebar { flex: 0 0 auto; }
-            .header h1 { font-size: 1.5em; }
-            .controls { flex-direction: column; }
-            .control-group { min-width: unset; }
-        }
-    </style>
+    <link rel="stylesheet" href="{{ url_for('static', path='css/style.css') }}">
     <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/dompurify/dist/purify.min.js"></script>
 </head>
@@ -368,106 +316,40 @@ def create_templates():
             </div>
         </div>
     </div>
-    <script>
-        let websocket = null, isConnected = false, currentMessageElement = null, currentMessageContent = '';
-        const startBtn = document.getElementById('startBtn'), stopBtn = document.getElementById('stopBtn');
-        const outputDiv = document.getElementById('output');
-        
-        function handleWebSocketMessage(data) {
-            let shouldScroll = Math.abs(outputDiv.scrollHeight - outputDiv.clientHeight - outputDiv.scrollTop) < 10;
-            
-            switch (data.type) {
-                case 'debate_started':
-                    outputDiv.innerHTML = '';
-                    const topicDiv = document.createElement('div');
-                    topicDiv.className = 'round-separator';
-                    topicDiv.innerHTML = `<strong>话题:</strong> ${data.topic}`;
-                    outputDiv.appendChild(topicDiv);
-                    break;
-                case 'round_info':
-                    const separator = document.createElement('div');
-                    separator.className = 'round-separator';
-                    separator.textContent = data.message.trim();
-                    outputDiv.appendChild(separator);
-                    break;
-                case 'model_speaking':
-                    currentMessageContent = ''; // 重置当前消息内容
-                    const messageDiv = document.createElement('div');
-                    messageDiv.className = `message ${data.model}`;
-                    messageDiv.innerHTML = `
-                        <div class="avatar">${data.model.substring(0, 1).toUpperCase()}</div>
-                        <div class="content">
-                            <div class="sender">${data.model} (${data.role})</div>
-                            <div class="text"><i>正在思考...</i></div>
-                        </div>`;
-                    outputDiv.appendChild(messageDiv);
-                    currentMessageElement = messageDiv.querySelector('.text');
-                    break;
-                case 'stream_content':
-                    if (currentMessageElement) {
-                        currentMessageContent += data.content;
-                        currentMessageElement.innerHTML = DOMPurify.sanitize(marked.parse(currentMessageContent));
-                    }
-                    break;
-                case 'stream_end':
-                    currentMessageElement = null;
-                    break;
-                case 'debate_ended':
-                case 'debate_stopped':
-                    const endMsg = document.createElement('div');
-                    endMsg.className = 'round-separator';
-                    endMsg.textContent = data.message;
-                    outputDiv.appendChild(endMsg);
-                    startBtn.disabled = false; stopBtn.disabled = true;
-                    break;
-                case 'error':
-                    outputDiv.innerHTML += `<div class="round-separator" style="color: red;">错误: ${data.message}</div>`;
-                    break;
-            }
-            if(shouldScroll) {
-                outputDiv.scrollTop = outputDiv.scrollHeight;
-            }
-        }
-        
-        function connect() {
-            const wsUrl = `ws://${window.location.host}/ws`;
-            websocket = new WebSocket(wsUrl);
-            websocket.onopen = () => { isConnected = true; startBtn.disabled = false; };
-            websocket.onmessage = (event) => handleWebSocketMessage(JSON.parse(event.data));
-            websocket.onclose = () => { isConnected = false; startBtn.disabled = true; stopBtn.disabled = true; };
-            websocket.onerror = (error) => { console.error('WebSocket Error:', error); };
-        }
-
-        window.addEventListener('load', connect);
-
-        startBtn.addEventListener('click', () => {
-            if (!websocket) return;
-            const message = { 
-                action: "start_debate", 
-                topic: document.getElementById('topic').value, 
-                rounds: parseInt(document.getElementById('rounds').value), 
-                first_model: document.getElementById('firstModel').value,
-                initial_prompt: document.getElementById('initialPrompt').value
-            };
-            websocket.send(JSON.stringify(message));
-            startBtn.disabled = true; stopBtn.disabled = false;
-        });
-        stopBtn.addEventListener('click', () => {
-            if (!websocket) return;
-            websocket.send(JSON.stringify({ action: "stop_debate" }));
-        });
-    </script>
+    <script src="{{ url_for('static', path='js/script.js') }}"></script>
 </body>
 </html>"""
-    with open(os.path.join(templates_dir, "index.html"), "w", encoding="utf-8") as f:
-        f.write(index_html)
-    logger.info("Web应用模板文件已创建")
+        with open(template_path, "w", encoding="utf-8") as f:
+            f.write(index_html)
+        logger.info("Web应用模板文件 'index.html' 不存在，已创建。")
+    else:
+        logger.info("Web应用模板文件 'index.html' 已存在，跳过创建。")
+
+
+def get_local_ip():
+    """获取本机局域网IP地址"""
+    try:
+        with socket.socket(socket.AF_INET, socket.SOCK_DGRAM) as s:
+            # 连接到一个公共DNS服务器的IP（不会真的发送数据）
+            s.connect(("8.8.8.8", 80))
+            return s.getsockname()[0]
+    except Exception:
+        return "127.0.0.1"  # 如果获取失败，返回本地回环地址
+
 
 if __name__ == "__main__":
     os.makedirs(static_dir, exist_ok=True)
     os.makedirs(templates_dir, exist_ok=True)
     create_templates()
-    logger.info("启动Web服务器...")
+    
     # 智能端口切换：优先使用环境变量PORT，否则默认为8000
     port = int(os.environ.get("PORT", 8000))
+    local_ip = get_local_ip()
+    
+    logger.info("="*50)
+    logger.info("AI大模型辩论系统已启动")
+    logger.info(f"  - 本机访问: http://localhost:{port}")
+    logger.info(f"  - 局域网访问: http://{local_ip}:{port}")
+    logger.info("="*50)
+    
     uvicorn.run(app, host="0.0.0.0", port=port) 

src/debate_controller.py

@@ -86,7 +86,7 @@ class DebateMessage:
 class DebateSession:
     """辩论会话类"""
     
-    def __init__(self, topic: str, max_rounds: int = 5, first_model: str = 'glm45'):
+    def __init__(self, topic: str, max_rounds: int = 5, first_model: str = 'glm45', initial_prompt: str = ""):
         """
         初始化辩论会话
         
@@ -94,14 +94,15 @@ class DebateSession:
             topic: 辩论话题
             max_rounds: 最大轮数
             first_model: 首发模型 ('glm45' 或 'kimi_k2')
+            initial_prompt: 自定义初始提示
         """
         self.topic = topic
         self.max_rounds = max_rounds
         self.first_model = first_model
+        self.initial_prompt = initial_prompt
         self.messages: List[DebateMessage] = []
         self.current_round = 0
         self.is_active = True
-        self.is_paused = False
         self.start_time = None
         self.end_time = None
         self.debate_id = f"debate_{datetime.now().strftime('%Y%m%d_%H%M%S')}"
@@ -141,7 +142,6 @@ class DebateSession:
             'current_round': self.current_round,
             'total_messages': len(self.messages),
             'is_active': self.is_active,
-            'is_paused': self.is_paused,
             'start_time': self.start_time.isoformat() if self.start_time else None,
             'end_time': self.end_time.isoformat() if self.end_time else None,
             'duration': (self.end_time - self.start_time).total_seconds() if self.start_time and self.end_time else None
@@ -175,7 +175,6 @@ class DebateSession:
         session.debate_id = debate_info['debate_id']
         session.current_round = debate_info['current_round']
         session.is_active = debate_info['is_active']
-        session.is_paused = debate_info['is_paused']
         session.start_time = datetime.fromisoformat(debate_info['start_time']) if debate_info['start_time'] else None
         session.end_time = datetime.fromisoformat(debate_info['end_time']) if debate_info['end_time'] else None
         
@@ -200,7 +199,10 @@ class DebateSession:
         
         if not self.messages:
             # 辩论开始，第一个发言者
-            return f"你将作为{role}，就以下话题进行辩论：{self.topic}。请提出你的主要论点，陈述你的核心立场和关键论据。"
+            base_prompt = f"你将作为{role}，就以下话题进行辩论：{self.topic}。请提出你的主要论点，陈述你的核心立场和关键论据。"
+            if self.initial_prompt:
+                return f"{base_prompt}\n\n另外，请特别注意以下指示：{self.initial_prompt}"
+            return base_prompt
         else:
             last_message = self.messages[-1]
             opponent_statement = last_message.content
@@ -228,7 +230,6 @@ class DebateController:
         self.current_session: Optional[DebateSession] = None
         self.debate_thread: Optional[threading.Thread] = None
         self.stop_event = threading.Event()
-        self.pause_event = threading.Event()
         
         logger.info("辩论控制器初始化完成")
     
@@ -259,10 +260,8 @@ class DebateController:
             return
         
         self.current_session.is_active = True
-        self.current_session.is_paused = False
         self.current_session.start_time = datetime.now()
         self.stop_event.clear()
-        self.pause_event.clear()
         
         # 启动辩论线程
         self.debate_thread = threading.Thread(target=self._debate_loop)
@@ -271,26 +270,6 @@ class DebateController:
         
         logger.info("辩论开始")
     
-    def pause_debate(self):
-        """暂停辩论"""
-        if not self.current_session or not self.current_session.is_active:
-            logger.warning("没有活动的辩论会话")
-            return
-        
-        self.current_session.is_paused = True
-        self.pause_event.set()
-        logger.info("辩论已暂停")
-    
-    def resume_debate(self):
-        """恢复辩论"""
-        if not self.current_session or not self.current_session.is_active:
-            logger.warning("没有活动的辩论会话")
-            return
-        
-        self.current_session.is_paused = False
-        self.pause_event.clear()
-        logger.info("辩论已恢复")
-    
     def stop_debate(self):
         """停止辩论"""
         if not self.current_session or not self.current_session.is_active:
@@ -299,7 +278,6 @@ class DebateController:
         
         self.stop_event.set()
         self.current_session.is_active = False
-        self.current_session.is_paused = False
         self.current_session.end_time = datetime.now()
         
         if self.debate_thread and self.debate_thread.is_alive():
@@ -348,12 +326,6 @@ class DebateController:
         
         # 后续轮次
         while self._should_continue_debate(session):
-            # 检查暂停状态
-            if self.pause_event.is_set():
-                self._output_message("辩论已暂停，等待恢复...\n")
-                self.pause_event.wait()
-                self._output_message("辩论已恢复\n")
-            
             session.current_round += 1
             self._output_message(f"--- 第{session.current_round}轮 ---\n")
             

static/css/style.css

@@ -0,0 +1,51 @@
+body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; margin: 0; background-color: #f0f2f5; color: #333; height: 100vh; display: flex; flex-direction: column; }
+.container { background-color: white; padding: 20px; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); width: 95%; max-width: 1400px; margin: 20px auto; flex-grow: 1; display: flex; flex-direction: column; }
+.main-layout { display: flex; gap: 20px; flex-grow: 1; min-height: 0; }
+.sidebar { flex: 0 0 320px; display: flex; flex-direction: column; gap: 15px; }
+.chat-area { flex: 1; display: flex; flex-direction: column; min-width: 0; }
+.header { text-align: center; margin-bottom: 20px; flex-shrink: 0; }
+.header h1 { color: #1a73e8; }
+.controls, .control-group { margin-bottom: 20px; }
+.controls { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
+.control-group { flex: 1; min-width: 200px; }
+label { display: block; margin-bottom: 5px; font-weight: 600; color: #555; }
+input, select, button, textarea { width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 6px; box-sizing: border-box; font-size: 16px; }
+textarea { resize: vertical; }
+button { background-color: #1a73e8; color: white; border: none; cursor: pointer; transition: background-color 0.3s; }
+button:hover { background-color: #1558b8; }
+button:disabled { background-color: #ccc; cursor: not-allowed; }
+.output-container { background-color: #f8f9fa; border: 1px solid #ddd; border-radius: 8px; padding: 20px; height: 500px; overflow-y: auto; display: flex; flex-direction: column; gap: 15px; }
+.status { padding: 10px; border-radius: 6px; margin-bottom: 15px; border: 1px solid; }
+.status.connected { background-color: #e6f4ea; color: #155724; border-color: #c3e6cb; }
+.status.disconnected { background-color: #f8d7da; color: #721c24; border-color: #f5c6cb; }
+
+/* 聊天气泡样式 */
+.message { display: flex; align-items: flex-start; gap: 10px; max-width: 80%; }
+.message .avatar { width: 40px; height: 40px; border-radius: 50%; color: white; display: flex; align-items: center; justify-content: center; font-weight: bold; flex-shrink: 0; font-size: 18px; }
+.message .content { background-color: #ffffff; padding: 10px 15px; border-radius: 18px; box-shadow: 0 1px 2px rgba(0,0,0,0.1); }
+.message .sender { font-weight: bold; margin-bottom: 5px; color: #333; }
+.message.glm45 { align-self: flex-start; }
+.message.glm45 .avatar { background-color: #34a853; } /* Google Green */
+.message.glm45 .content { border-top-left-radius: 4px; }
+.message.deepseek_v31 { align-self: flex-end; flex-direction: row-reverse; }
+.message.deepseek_v31 .avatar { background-color: #4285f4; } /* Google Blue */
+.message.deepseek_v31 .content { background-color: #e7f3ff; border-top-right-radius: 4px; }
+.message .text { white-space: pre-wrap; word-wrap: break-word; }
+.message .text p { margin: 0 0 10px; }
+.message .text h1, .message .text h2, .message .text h3 { margin: 15px 0 10px; border-bottom: 1px solid #eee; padding-bottom: 5px; }
+.message .text ul, .message .text ol { padding-left: 20px; }
+.message .text code { background-color: #eee; padding: 2px 4px; border-radius: 4px; font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace; }
+.message .text pre { background-color: #2d2d2d; color: #f8f8f2; padding: 15px; border-radius: 6px; overflow-x: auto; }
+.message .text pre code { background-color: transparent; padding: 0; }
+.round-separator { text-align: center; color: #888; font-size: 0.9em; margin: 20px 0; font-weight: 600; }
+
+/* 响应式设计 - 针对手机等小屏幕设备 */
+@media (max-width: 768px) {
+    body { padding: 0; }
+    .container { width: 100%; margin: 0; border-radius: 0; padding: 10px; height: 100%; }
+    .main-layout { flex-direction: column; }
+    .sidebar { flex: 0 0 auto; }
+    .header h1 { font-size: 1.5em; }
+    .controls { flex-direction: column; }
+    .control-group { min-width: unset; }
+} 

static/js/script.js

@@ -0,0 +1,87 @@
+let websocket = null, isConnected = false, currentMessageElement = null, currentMessageContent = '';
+const startBtn = document.getElementById('startBtn'), stopBtn = document.getElementById('stopBtn');
+const outputDiv = document.getElementById('output');
+
+function handleWebSocketMessage(data) {
+    let shouldScroll = Math.abs(outputDiv.scrollHeight - outputDiv.clientHeight - outputDiv.scrollTop) < 10;
+    
+    switch (data.type) {
+        case 'debate_started':
+            outputDiv.innerHTML = '';
+            const topicDiv = document.createElement('div');
+            topicDiv.className = 'round-separator';
+            topicDiv.innerHTML = `<strong>话题:</strong> ${data.topic}`;
+            outputDiv.appendChild(topicDiv);
+            break;
+        case 'round_info':
+            const separator = document.createElement('div');
+            separator.className = 'round-separator';
+            separator.textContent = data.message.trim();
+            outputDiv.appendChild(separator);
+            break;
+        case 'model_speaking':
+            currentMessageContent = ''; // 重置当前消息内容
+            const messageDiv = document.createElement('div');
+            messageDiv.className = `message ${data.model}`;
+            messageDiv.innerHTML = `
+                <div class="avatar">${data.model.substring(0, 1).toUpperCase()}</div>
+                <div class="content">
+                    <div class="sender">${data.model} (${data.role})</div>
+                    <div class="text"><i>正在思考...</i></div>
+                </div>`;
+            outputDiv.appendChild(messageDiv);
+            currentMessageElement = messageDiv.querySelector('.text');
+            break;
+        case 'stream_content':
+            if (currentMessageElement) {
+                currentMessageContent += data.content;
+                currentMessageElement.innerHTML = DOMPurify.sanitize(marked.parse(currentMessageContent));
+            }
+            break;
+        case 'stream_end':
+            currentMessageElement = null;
+            break;
+        case 'debate_ended':
+        case 'debate_stopped':
+            const endMsg = document.createElement('div');
+            endMsg.className = 'round-separator';
+            endMsg.textContent = data.message;
+            outputDiv.appendChild(endMsg);
+            startBtn.disabled = false; stopBtn.disabled = true;
+            break;
+        case 'error':
+            outputDiv.innerHTML += `<div class="round-separator" style="color: red;">错误: ${data.message}</div>`;
+            break;
+    }
+    if(shouldScroll) {
+        outputDiv.scrollTop = outputDiv.scrollHeight;
+    }
+}
+
+function connect() {
+    const wsUrl = `ws://${window.location.host}/ws`;
+    websocket = new WebSocket(wsUrl);
+    websocket.onopen = () => { isConnected = true; startBtn.disabled = false; };
+    websocket.onmessage = (event) => handleWebSocketMessage(JSON.parse(event.data));
+    websocket.onclose = () => { isConnected = false; startBtn.disabled = true; stopBtn.disabled = true; };
+    websocket.onerror = (error) => { console.error('WebSocket Error:', error); };
+}
+
+window.addEventListener('load', connect);
+
+startBtn.addEventListener('click', () => {
+    if (!websocket) return;
+    const message = { 
+        action: "start_debate", 
+        topic: document.getElementById('topic').value, 
+        rounds: parseInt(document.getElementById('rounds').value), 
+        first_model: document.getElementById('firstModel').value,
+        initial_prompt: document.getElementById('initialPrompt').value
+    };
+    websocket.send(JSON.stringify(message));
+    startBtn.disabled = true; stopBtn.disabled = false;
+});
+stopBtn.addEventListener('click', () => {
+    if (!websocket) return;
+    websocket.send(JSON.stringify({ action: "stop_debate" }));
+}); 

templates/index.html

@@ -5,59 +5,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>AI大模型辩论系统</title>
-    <style>
-        body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; margin: 0; background-color: #f0f2f5; color: #333; height: 100vh; display: flex; flex-direction: column; }
-        .container { background-color: white; padding: 20px; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); width: 95%; max-width: 1400px; margin: 20px auto; flex-grow: 1; display: flex; flex-direction: column; }
-        .main-layout { display: flex; gap: 20px; flex-grow: 1; min-height: 0; }
-        .sidebar { flex: 0 0 320px; display: flex; flex-direction: column; gap: 15px; }
-        .chat-area { flex: 1; display: flex; flex-direction: column; min-width: 0; }
-        .header { text-align: center; margin-bottom: 20px; flex-shrink: 0; }
-        .header h1 { color: #1a73e8; }
-        .controls, .control-group { margin-bottom: 20px; }
-        .controls { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
-        .control-group { flex: 1; min-width: 200px; }
-        label { display: block; margin-bottom: 5px; font-weight: 600; color: #555; }
-        input, select, button, textarea { width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 6px; box-sizing: border-box; font-size: 16px; }
-        textarea { resize: vertical; }
-        button { background-color: #1a73e8; color: white; border: none; cursor: pointer; transition: background-color 0.3s; }
-        button:hover { background-color: #1558b8; }
-        button:disabled { background-color: #ccc; cursor: not-allowed; }
-        .output-container { background-color: #f8f9fa; border: 1px solid #ddd; border-radius: 8px; padding: 20px; height: 500px; overflow-y: auto; display: flex; flex-direction: column; gap: 15px; }
-        .status { padding: 10px; border-radius: 6px; margin-bottom: 15px; border: 1px solid; }
-        .status.connected { background-color: #e6f4ea; color: #155724; border-color: #c3e6cb; }
-        .status.disconnected { background-color: #f8d7da; color: #721c24; border-color: #f5c6cb; }
-        
-        /* 聊天气泡样式 */
-        .message { display: flex; align-items: flex-start; gap: 10px; max-width: 80%; }
-        .message .avatar { width: 40px; height: 40px; border-radius: 50%; color: white; display: flex; align-items: center; justify-content: center; font-weight: bold; flex-shrink: 0; font-size: 18px; }
-        .message .content { background-color: #ffffff; padding: 10px 15px; border-radius: 18px; box-shadow: 0 1px 2px rgba(0,0,0,0.1); }
-        .message .sender { font-weight: bold; margin-bottom: 5px; color: #333; }
-        .message.glm45 { align-self: flex-start; }
-        .message.glm45 .avatar { background-color: #34a853; } /* Google Green */
-        .message.glm45 .content { border-top-left-radius: 4px; }
-        .message.deepseek_v31 { align-self: flex-end; flex-direction: row-reverse; }
-        .message.deepseek_v31 .avatar { background-color: #4285f4; } /* Google Blue */
-        .message.deepseek_v31 .content { background-color: #e7f3ff; border-top-right-radius: 4px; }
-        .message .text { white-space: pre-wrap; word-wrap: break-word; }
-        .message .text p { margin: 0 0 10px; }
-        .message .text h1, .message .text h2, .message .text h3 { margin: 15px 0 10px; border-bottom: 1px solid #eee; padding-bottom: 5px; }
-        .message .text ul, .message .text ol { padding-left: 20px; }
-        .message .text code { background-color: #eee; padding: 2px 4px; border-radius: 4px; font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace; }
-        .message .text pre { background-color: #2d2d2d; color: #f8f8f2; padding: 15px; border-radius: 6px; overflow-x: auto; }
-        .message .text pre code { background-color: transparent; padding: 0; }
-        .round-separator { text-align: center; color: #888; font-size: 0.9em; margin: 20px 0; font-weight: 600; }
-
-        /* 响应式设计 - 针对手机等小屏幕设备 */
-        @media (max-width: 768px) {
-            body { padding: 0; }
-            .container { width: 100%; margin: 0; border-radius: 0; padding: 10px; height: 100%; }
-            .main-layout { flex-direction: column; }
-            .sidebar { flex: 0 0 auto; }
-            .header h1 { font-size: 1.5em; }
-            .controls { flex-direction: column; }
-            .control-group { min-width: unset; }
-        }
-    </style>
+    <link rel="stylesheet" href="{{ url_for('static', path='css/style.css') }}">
     <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/dompurify/dist/purify.min.js"></script>
 </head>
@@ -85,94 +33,6 @@
             </div>
         </div>
     </div>
-    <script>
-        let websocket = null, isConnected = false, currentMessageElement = null, currentMessageContent = '';
-        const startBtn = document.getElementById('startBtn'), stopBtn = document.getElementById('stopBtn');
-        const outputDiv = document.getElementById('output');
-        
-        function handleWebSocketMessage(data) {
-            let shouldScroll = Math.abs(outputDiv.scrollHeight - outputDiv.clientHeight - outputDiv.scrollTop) < 10;
-            
-            switch (data.type) {
-                case 'debate_started':
-                    outputDiv.innerHTML = '';
-                    const topicDiv = document.createElement('div');
-                    topicDiv.className = 'round-separator';
-                    topicDiv.innerHTML = `<strong>话题:</strong> ${data.topic}`;
-                    outputDiv.appendChild(topicDiv);
-                    break;
-                case 'round_info':
-                    const separator = document.createElement('div');
-                    separator.className = 'round-separator';
-                    separator.textContent = data.message.trim();
-                    outputDiv.appendChild(separator);
-                    break;
-                case 'model_speaking':
-                    currentMessageContent = ''; // 重置当前消息内容
-                    const messageDiv = document.createElement('div');
-                    messageDiv.className = `message ${data.model}`;
-                    messageDiv.innerHTML = `
-                        <div class="avatar">${data.model.substring(0, 1).toUpperCase()}</div>
-                        <div class="content">
-                            <div class="sender">${data.model} (${data.role})</div>
-                            <div class="text"><i>正在思考...</i></div>
-                        </div>`;
-                    outputDiv.appendChild(messageDiv);
-                    currentMessageElement = messageDiv.querySelector('.text');
-                    break;
-                case 'stream_content':
-                    if (currentMessageElement) {
-                        currentMessageContent += data.content;
-                        currentMessageElement.innerHTML = DOMPurify.sanitize(marked.parse(currentMessageContent));
-                    }
-                    break;
-                case 'stream_end':
-                    currentMessageElement = null;
-                    break;
-                case 'debate_ended':
-                case 'debate_stopped':
-                    const endMsg = document.createElement('div');
-                    endMsg.className = 'round-separator';
-                    endMsg.textContent = data.message;
-                    outputDiv.appendChild(endMsg);
-                    startBtn.disabled = false; stopBtn.disabled = true;
-                    break;
-                case 'error':
-                    outputDiv.innerHTML += `<div class="round-separator" style="color: red;">错误: ${data.message}</div>`;
-                    break;
-            }
-            if(shouldScroll) {
-                outputDiv.scrollTop = outputDiv.scrollHeight;
-            }
-        }
-        
-        function connect() {
-            const wsUrl = `ws://${window.location.host}/ws`;
-            websocket = new WebSocket(wsUrl);
-            websocket.onopen = () => { isConnected = true; startBtn.disabled = false; };
-            websocket.onmessage = (event) => handleWebSocketMessage(JSON.parse(event.data));
-            websocket.onclose = () => { isConnected = false; startBtn.disabled = true; stopBtn.disabled = true; };
-            websocket.onerror = (error) => { console.error('WebSocket Error:', error); };
-        }
-
-        window.addEventListener('load', connect);
-
-        startBtn.addEventListener('click', () => {
-            if (!websocket) return;
-            const message = { 
-                action: "start_debate", 
-                topic: document.getElementById('topic').value, 
-                rounds: parseInt(document.getElementById('rounds').value), 
-                first_model: document.getElementById('firstModel').value,
-                initial_prompt: document.getElementById('initialPrompt').value
-            };
-            websocket.send(JSON.stringify(message));
-            startBtn.disabled = true; stopBtn.disabled = false;
-        });
-        stopBtn.addEventListener('click', () => {
-            if (!websocket) return;
-            websocket.send(JSON.stringify({ action: "stop_debate" }));
-        });
-    </script>
+    <script src="{{ url_for('static', path='js/script.js') }}"></script>
 </body>
 </html>