Update app.py

app.py

@@ -2,48 +2,29 @@ import gradio as gr
 import requests
 import re
 import json
-from typing import Iterator
+from typing import Iterator, List, Tuple
+
+
+
+
+# API配置
 
 API_KEY = "sk-5c2b6a56-2e2f-45f7-9a26-3fe42a218eb9"
 API_BASE = "https://api.visionsic.com/v1"
 
 
-def format_think_tags(content: str) -> str:
-    """处理<think>标签的函数"""
-    if not content:
-        return ""
-    
-    formatted_content = ""
-    current_pos = 0
-    
-    think_pattern = r"<think>(.*?)</think>"
-    matches = re.finditer(think_pattern, content, re.DOTALL)
-    
-    for match in matches:
-        formatted_content += content[current_pos:match.start()]
-        
-        think_content = match.group(1)
-        formatted_content += f"""
-        <details class="think-container" open>
-            <summary class="think-summary">思考过程(点击展开)</summary>
-            <div class="think-content">{think_content}</div>
-        </details>
-        """
-        current_pos = match.end()
-    
-    formatted_content += content[current_pos:]
-    return formatted_content
-
-def chat_stream(message: str, history: List[Tuple[str, str]], system_prompt: str) -> Iterator[List[Tuple[str, str]]]:
+def chat_stream(message: str, history: list, system_prompt: str) -> Iterator[list]:
     """处理聊天流式响应"""
     messages = [{"role": "system", "content": system_prompt}]
     
+    # 添加历史对话
     for human, assistant in history:
         messages.append({"role": "user", "content": human})
         messages.append({"role": "assistant", "content": assistant})
     
     messages.append({"role": "user", "content": message})
     
+    # 调用API进行流式对话
     headers = {
         "Authorization": f"Bearer {API_KEY}",
         "Content-Type": "application/json"
@@ -54,33 +35,126 @@ def chat_stream(message: str, history: List[Tuple[str, str]], system_prompt: str
         "stream": True
     }
     
-    response = requests.post(f"{API_BASE}/chat/completions", headers=headers, json=data, stream=True)
+    try:
+        response = requests.post(
+            f"{API_BASE}/chat/completions", 
+            headers=headers, 
+            json=data, 
+            stream=True
+        )
+        
+        collected_messages = []
+        new_history = history.copy()
+        new_history.append([message, ""])  # 添加用户消息和空的助手消息
+        
+        for line in response.iter_lines():
+            if line:
+                line = line.decode('utf-8')
+                if line.startswith("
+                    json_str = line[6:]
+                    if json_str.strip() == "[DONE]":
+                        break
+                    try:
+                        chunk = json.loads(json_str)
+                        if chunk['choices'][0]['delta'].get('content'):
+                            chunk_message = chunk['choices'][0]['delta']['content']
+                            collected_messages.append(chunk_message)
+                            partial_message = "".join(collected_messages)
+                            new_history[-1][1] = partial_message  # 更新最后一条助手消息
+                            yield new_history
+                    except json.JSONDecodeError:
+                        continue
+    except Exception as e:
+        print(f"Error occurred: {str(e)}")
+        new_history[-1][1] = f"Error: {str(e)}"
+        yield new_history
+
+# 创建Gradio界面
+theme = gr.themes.Soft(
+    primary_hue="blue",
+    secondary_hue="blue",
+).set(
+    body_background_fill="#F5F5F5",
+    block_background_fill="#FFFFFF",
+    button_primary_background_fill="#2196F3",
+)
+
+with gr.Blocks(theme=theme) as demo:
+    gr.Markdown(
+        """
+        # Tifa-Deepsex-COT-14B
+        ### 请设置你喜欢的角色聊天吧
+        """
+    )
+    
+    chatbot = gr.Chatbot(
+        height=500,
+        show_copy_button=True,
+        container=True,
+        elem_classes="chatbot"
+    )
+    
+    with gr.Row():
+        with gr.Column(scale=4):
+            msg = gr.Textbox(
+                label="发送消息",
+                placeholder="在这里输入你的消息...",
+                show_label=True,
+                lines=3,
+                container=True
+            )
+        with gr.Column(scale=1):
+            system = gr.Textbox(
+                label="System Prompt",
+                value="你是tifa",
+                lines=3,
+                show_label=True,
+                container=True
+            )
     
-    collected_messages = []
-    for line in response.iter_lines():
-        if line:
-            line = line.decode('utf-8')
-            if line.startswith("data: "):
-                json_str = line[6:]
-                if json_str.strip() == "[DONE]":
-                    break
-                try:
-                    chunk = json.loads(json_str)
-                    if chunk['choices'][0]['delta'].get('content'):
-                        chunk_message = chunk['choices'][0]['delta']['content']
-                        collected_messages.append(chunk_message)
-                        partial_message = "".join(collected_messages)
-                        formatted_message = format_think_tags(partial_message)
-                        yield history + [(message, formatted_message)]
-                except json.JSONDecodeError:
-                    continue
+    with gr.Row():
+        submit = gr.Button("发送", variant="primary", size="lg")
+        clear = gr.Button("清除对话", size="lg")
 
-# 自定义CSS样式
-custom_css = """
-.container {
-    max-width: 950px !important;
-    margin: 0 auto;
-    padding: 20px;
+    # 事件处理
+    submit_event = submit.click(
+        chat_stream,
+        inputs=[msg, chatbot, system],
+        outputs=chatbot,
+        queue=True
+    )
+    
+    msg_event = msg.submit(
+        chat_stream,
+        inputs=[msg, chatbot, system],
+        outputs=chatbot,
+        queue=True
+    )
+    
+    clear.click(lambda: None, None, chatbot, queue=False)
+    
+    # 发送后清空输入框
+    submit_event.then(lambda: "", None, msg)
+    msg_event.then(lambda: "", None, msg)
+
+# 自定义样式
+css = """
+.chatbot {
+    height: 500px;
+    overflow-y: auto;
+}
+.message {
+    padding: 10px;
+    margin: 5px;
+    border-radius: 10px;
+}
+.user-message {
+    background-color: #E3F2FD;
+    margin-left: 20%;
+}
+.bot-message {
+    background-color: #F5F5F5;
+    margin-right: 20%;
 }
 .think-container {
     background: #f5f5f5;
@@ -100,53 +174,9 @@ custom_css = """
     background: #fff;
     border-radius: 3px;
 }
-.code-block {
-    background: #f8f8f8;
-    padding: 10px;
-    border-radius: 5px;
-    font-family: monospace;
-}
 """
 
-# 创建Gradio界面
-with gr.Blocks(css=custom_css) as demo:
-    gr.Markdown("# Tifa-Deepsex-COT-14B")
-    gr.Markdown("### 请设置你喜欢的角色聊天吧")
-    
-    chatbot = gr.Chatbot(height=600, show_copy_button=True)
-    
-    with gr.Row():
-        with gr.Column(scale=4):
-            message = gr.Textbox(
-                label="发送消息",
-                placeholder="在这里输入你的消息...",
-                lines=3
-            )
-        with gr.Column(scale=1):
-            system_prompt = gr.Textbox(
-                value="你是tifa",
-                label="System Prompt",
-                lines=3
-            )
-    
-    with gr.Row():
-        submit = gr.Button("发送", variant="primary")
-        clear = gr.Button("清除对话")
-    
-    # 事件处理
-    submit.click(
-        chat_stream,
-        inputs=[message, chatbot, system_prompt],
-        outputs=chatbot
-    )
-    message.submit(
-        chat_stream,
-        inputs=[message, chatbot, system_prompt],
-        outputs=chatbot
-    )
-    clear.click(lambda: None, None, chatbot, queue=False)
-
 # 启动应用
 if __name__ == "__main__":
     demo.queue()
-    demo.launch()
+    demo.launch(share=False, css=css)