Update app.py

app.py

@@ -21,31 +21,42 @@ st.set_page_config(
 # 自定义样式
 st.markdown("""
 <style>
-/* 左侧思考面板样式 */
-.thinking-panel {
+/* 面板通用样式 */
+.panel {
     background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
     border: 1px solid #e2e8f0;
     border-radius: 12px;
     padding: 16px;
-    height: calc(100vh - 200px);
+    height: calc(100vh - 280px);
     overflow-y: auto;
     font-size: 14px;
     line-height: 1.7;
-    color: #475569;
     white-space: pre-wrap;
     word-break: break-word;
 }
-.thinking-panel::-webkit-scrollbar {
+.panel::-webkit-scrollbar {
     width: 6px;
 }
-.thinking-panel::-webkit-scrollbar-thumb {
+.panel::-webkit-scrollbar-thumb {
     background: #cbd5e1;
     border-radius: 3px;
 }
-.thinking-panel::-webkit-scrollbar-thumb:hover {
+.panel::-webkit-scrollbar-thumb:hover {
     background: #94a3b8;
 }
-.thinking-title {
+
+/* 思考面板 */
+.thinking-panel {
+    color: #64748b;
+}
+
+/* 回答面板 */
+.answer-panel {
+    color: #1e293b;
+    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
+}
+
+.panel-title {
     font-size: 14px;
     font-weight: 600;
     color: #64748b;
@@ -54,10 +65,8 @@ st.markdown("""
     align-items: center;
     gap: 6px;
 }
-.thinking-content {
-    color: #64748b;
-}
-.no-thinking {
+
+.no-content {
     color: #94a3b8;
     font-style: italic;
     text-align: center;
@@ -68,9 +77,10 @@ st.markdown("""
 #MainMenu {visibility: hidden;}
 footer {visibility: hidden;}
 
-/* 调整列间距 */
+/* 调整布局 */
 .block-container {
-    padding-top: 2rem;
+    padding-top: 1.5rem;
+    padding-bottom: 1rem;
 }
 </style>
 """, unsafe_allow_html=True)
@@ -149,33 +159,40 @@ def chat_stream(message: str, history: list, system_prompt: str, max_tokens: int
 
 
 def render_thinking_panel(thinking_text: str):
-    """渲染左侧思考面板"""
+    """渲染思考面板"""
     if thinking_text:
         escaped_text = thinking_text.replace("&", "&amp;").replace("<", "&lt;").replace(">", "&gt;")
         st.markdown(f"""
-        <div class="thinking-title">💭 思考过程</div>
-        <div class="thinking-panel">{escaped_text}</div>
+        <div class="panel-title">💭 思考过程</div>
+        <div class="panel thinking-panel">{escaped_text}</div>
         """, unsafe_allow_html=True)
     else:
         st.markdown("""
-        <div class="thinking-title">💭 思考过程</div>
-        <div class="thinking-panel">
-            <div class="no-thinking">等待模型思考...</div>
+        <div class="panel-title">💭 思考过程</div>
+        <div class="panel thinking-panel">
+            <div class="no-content">等待模型思考...</div>
         </div>
         """, unsafe_allow_html=True)
 
 
-def main():
-    st.title("🚀 Step-3.5-Flash")
+def render_answer_panel(answer_text: str):
+    """渲染回答面板"""
+    if answer_text:
+        escaped_text = answer_text.replace("&", "&amp;").replace("<", "&lt;").replace(">", "&gt;")
+        st.markdown(f"""
+        <div class="panel-title">💬 回答</div>
+        <div class="panel answer-panel">{escaped_text}</div>
+        """, unsafe_allow_html=True)
+    else:
+        st.markdown("""
+        <div class="panel-title">💬 回答</div>
+        <div class="panel answer-panel">
+            <div class="no-content">等待模型回答...</div>
+        </div>
+        """, unsafe_allow_html=True)
 
-    # 初始化 session state
-    if "messages" not in st.session_state:
-        st.session_state.messages = []
-    if "pending_prompt" not in st.session_state:
-        st.session_state.pending_prompt = None
-    if "current_thinking" not in st.session_state:
-        st.session_state.current_thinking = ""
 
+def main():
     # 侧边栏设置
     with st.sidebar:
         st.header("⚙️ 设置")
@@ -188,6 +205,7 @@ def main():
         if st.button("🗑️ 清空对话", use_container_width=True):
             st.session_state.messages = []
             st.session_state.current_thinking = ""
+            st.session_state.current_answer = ""
             st.rerun()
 
         st.divider()
@@ -196,106 +214,115 @@ def main():
             if config:
                 st.json(config)
 
-    # 主布局：左右分栏
-    left_col, right_col = st.columns([1, 3])
+    # 初始化 session state
+    if "messages" not in st.session_state:
+        st.session_state.messages = []
+    if "pending_prompt" not in st.session_state:
+        st.session_state.pending_prompt = None
+    if "current_thinking" not in st.session_state:
+        st.session_state.current_thinking = ""
+    if "current_answer" not in st.session_state:
+        st.session_state.current_answer = ""
 
-    # 左侧：思考过程
-    with left_col:
-        # 获取最新的思考内容
-        latest_thinking = st.session_state.current_thinking
-        if not latest_thinking and st.session_state.messages:
-            # 从最后一条 assistant 消息获取思考内容
-            for msg in reversed(st.session_state.messages):
-                if msg["role"] == "assistant" and msg.get("thinking"):
-                    latest_thinking = msg["thinking"]
-                    break
+    # 标题
+    st.title("🚀 Step-3.5-Flash")
 
+    # 输入区域（标题下方）
+    input_col1, input_col2 = st.columns([6, 1])
+    with input_col1:
+        user_input = st.text_input("输入消息", placeholder="请输入您的问题...", label_visibility="collapsed")
+    with input_col2:
+        send_clicked = st.button("发送", use_container_width=True, type="primary")
+
+    # 示例问题
+    if not st.session_state.messages:
+        st.caption("💡 试试这些问题：")
+        examples = [
+            "请解释一下什么是机器学习？",
+            "帮我写一个 Python 快速排序算法",
+            "1000以内有多少个质数？",
+        ]
+        cols = st.columns(len(examples))
+        for i, example in enumerate(examples):
+            if cols[i].button(example, key=f"ex_{i}", use_container_width=True):
+                st.session_state.pending_prompt = example
+                st.rerun()
+
+    st.divider()
+
+    # 左右等高布局
+    left_col, right_col = st.columns(2)
+
+    # 获取当前显示内容
+    display_thinking = st.session_state.current_thinking
+    display_answer = st.session_state.current_answer
+
+    # 如果没有正在生成的内容，显示最后一条消息
+    if not display_thinking and not display_answer and st.session_state.messages:
+        for msg in reversed(st.session_state.messages):
+            if msg["role"] == "assistant":
+                display_thinking = msg.get("thinking", "")
+                display_answer = msg.get("content", "")
+                break
+
+    # 创建占位符
+    with left_col:
         thinking_placeholder = st.empty()
         with thinking_placeholder:
-            render_thinking_panel(latest_thinking)
+            render_thinking_panel(display_thinking)
 
-    # 右侧：对话区域
     with right_col:
-        # 创建一个容器用于对话
-        chat_container = st.container(height=500)
-
-        with chat_container:
-            # 显示历史消息
-            for msg in st.session_state.messages:
-                if msg["role"] == "user":
-                    with st.chat_message("user"):
-                        st.markdown(msg["content"])
-                elif msg["role"] == "assistant":
-                    with st.chat_message("assistant", avatar=STEPFUN_LOGO):
-                        st.markdown(msg["content"])
-
-        # 处理 pending_prompt（来自示例按钮）
-        prompt = None
-        if st.session_state.pending_prompt:
-            prompt = st.session_state.pending_prompt
-            st.session_state.pending_prompt = None
-        else:
-            prompt = st.chat_input("输入消息...")
-
-        if prompt:
-            # 添加用户消息
-            st.session_state.messages.append({"role": "user", "content": prompt})
-
-            # 在聊天容器中显示
-            with chat_container:
-                with st.chat_message("user"):
-                    st.markdown(prompt)
-
-                # 生成回复
-                with st.chat_message("assistant", avatar=STEPFUN_LOGO):
-                    response_placeholder = st.empty()
-
-                    full_response = ""
-                    full_thinking = ""
-
-                    for thinking, response in chat_stream(
-                        prompt,
-                        st.session_state.messages[:-1],
-                        system_prompt,
-                        max_tokens,
-                        temperature,
-                        top_p,
-                    ):
-                        full_thinking = thinking
-                        full_response = response if response else "▌"
-
-                        # 更新思考面板
-                        st.session_state.current_thinking = full_thinking
-                        with left_col:
-                            with thinking_placeholder:
-                                render_thinking_panel(full_thinking)
-
-                        # 更新回答
-                        response_placeholder.markdown(full_response)
-
-                    # 保存消息
-                    st.session_state.messages.append({
-                        "role": "assistant",
-                        "content": full_response,
-                        "thinking": full_thinking,
-                    })
-                    st.session_state.current_thinking = ""
-                    st.rerun()
-
-        # 示例问题（底部）
-        if not st.session_state.messages:
-            st.divider()
-            st.caption("💡 试试这些问题：")
-            examples = [
-                "请解释一下什么是机器学习？",
-                "帮我写一个 Python 快速排序算法",
-                "1000以内有多少个质数？",
-            ]
-            cols = st.columns(len(examples))
-            for i, example in enumerate(examples):
-                if cols[i].button(example, key=f"ex_{i}", use_container_width=True):
-                    st.session_state.pending_prompt = example
-                    st.rerun()
+        answer_placeholder = st.empty()
+        with answer_placeholder:
+            render_answer_panel(display_answer)
+
+    # 处理输入
+    prompt = None
+    if st.session_state.pending_prompt:
+        prompt = st.session_state.pending_prompt
+        st.session_state.pending_prompt = None
+    elif send_clicked and user_input:
+        prompt = user_input
+    elif user_input and st.session_state.get("last_input") != user_input:
+        # 检测回车提交（通过检测输入变化）
+        pass
+
+    if prompt:
+        # 添加用户消息
+        st.session_state.messages.append({"role": "user", "content": prompt})
+
+        full_response = ""
+        full_thinking = ""
+
+        for thinking, response in chat_stream(
+            prompt,
+            st.session_state.messages[:-1],
+            system_prompt,
+            max_tokens,
+            temperature,
+            top_p,
+        ):
+            full_thinking = thinking
+            full_response = response if response else "▌"
+
+            # 更新显示
+            st.session_state.current_thinking = full_thinking
+            st.session_state.current_answer = full_response
+
+            with thinking_placeholder:
+                render_thinking_panel(full_thinking)
+            with answer_placeholder:
+                render_answer_panel(full_response)
+
+        # 保存消息
+        st.session_state.messages.append({
+            "role": "assistant",
+            "content": full_response,
+            "thinking": full_thinking,
+        })
+        st.session_state.current_thinking = ""
+        st.session_state.current_answer = ""
+        st.rerun()
 
 
 if __name__ == "__main__":