Update app.py

app.py

@@ -15,9 +15,47 @@ STEPFUN_LOGO = "https://huggingface.co/stepfun-ai/Step-3.5-Flash/resolve/main/st
 st.set_page_config(
     page_title="Step-3.5-Flash",
     page_icon="🚀",
-    layout="wide",
+    layout="centered",
 )
 
+# 自定义样式
+st.markdown("""
+<style>
+/* 思考气泡样式 - 6行高度，超长滚动 */
+.thinking-bubble {
+    background: linear-gradient(135deg, #f0f4f8 0%, #e2e8f0 100%);
+    border: 1px solid #cbd5e1;
+    border-radius: 12px;
+    padding: 12px 16px;
+    margin-bottom: 8px;
+    max-height: 156px;  /* 约6行 */
+    overflow-y: auto;
+    font-size: 13px;
+    line-height: 1.6;
+    color: #64748b;
+    white-space: pre-wrap;
+    word-break: break-word;
+}
+.thinking-bubble::-webkit-scrollbar {
+    width: 4px;
+}
+.thinking-bubble::-webkit-scrollbar-thumb {
+    background: #94a3b8;
+    border-radius: 2px;
+}
+.thinking-header {
+    font-size: 12px;
+    color: #94a3b8;
+    margin-bottom: 4px;
+    font-weight: 500;
+}
+
+/* 隐藏 Streamlit 默认元素 */
+#MainMenu {visibility: hidden;}
+footer {visibility: hidden;}
+</style>
+""", unsafe_allow_html=True)
+
 
 @st.cache_data(ttl=3600)
 def fetch_model_config():
@@ -25,8 +63,8 @@ def fetch_model_config():
         response = httpx.get(HF_CONFIG_URL, timeout=10.0)
         if response.status_code == 200:
             return response.json()
-    except Exception as e:
-        st.error(f"拉取 config.json 失败: {e}")
+    except:
+        pass
     return None
 
 
@@ -35,7 +73,10 @@ def format_messages(history, system_prompt: str, user_message: str):
     if system_prompt.strip():
         messages.append({"role": "system", "content": system_prompt})
     for msg in history:
-        messages.append({"role": msg["role"], "content": msg["content"]})
+        if msg["role"] in ["user", "assistant"]:
+            content = msg.get("content", "")
+            if content:
+                messages.append({"role": msg["role"], "content": content})
     messages.append({"role": "user", "content": user_message})
     return messages
 
@@ -88,15 +129,23 @@ def chat_stream(message: str, history: list, system_prompt: str, max_tokens: int
         yield reasoning, f"❌ 错误: {str(e)}"
 
 
+def render_thinking_bubble(thinking_text: str):
+    """渲染思考气泡"""
+    if thinking_text:
+        # 转义 HTML 特殊字符
+        escaped_text = thinking_text.replace("&", "&amp;").replace("<", "&lt;").replace(">", "&gt;")
+        st.markdown(f"""
+        <div class="thinking-header">💭 思考过程</div>
+        <div class="thinking-bubble">{escaped_text}</div>
+        """, unsafe_allow_html=True)
+
+
 def main():
     st.title("🚀 Step-3.5-Flash")
-    st.caption("基于 [Step-3.5-Flash](https://huggingface.co/stepfun-ai/Step-3.5-Flash) 的智能对话助手")
 
     # 初始化 session state
     if "messages" not in st.session_state:
         st.session_state.messages = []
-    if "thinking" not in st.session_state:
-        st.session_state.thinking = ""
 
     # 侧边栏设置
     with st.sidebar:
@@ -109,7 +158,6 @@ def main():
         st.divider()
         if st.button("🗑️ 清空对话", use_container_width=True):
             st.session_state.messages = []
-            st.session_state.thinking = ""
             st.rerun()
 
         st.divider()
@@ -118,86 +166,75 @@ def main():
             if config:
                 st.json(config)
 
-    # 主界面：左右布局
-    col_thinking, col_chat = st.columns([1, 4])
-
-    # 左侧：思考过程
-    with col_thinking:
-        st.subheader("💭 思考过程")
-        thinking_container = st.container(height=500)
-        with thinking_container:
-            if st.session_state.thinking:
-                st.markdown(st.session_state.thinking)
-            else:
-                st.caption("等待输入...")
-
-    # 右侧：对话
-    with col_chat:
-        st.subheader("💬 对话")
-
-        # 显示历史消息
-        chat_container = st.container(height=450)
-        with chat_container:
-            for msg in st.session_state.messages:
-                with st.chat_message(msg["role"], avatar=STEPFUN_LOGO if msg["role"] == "assistant" else None):
-                    st.markdown(msg["content"])
-
-        # 输入框
-        if prompt := st.chat_input("输入消息..."):
-            # 添加用户消息
-            st.session_state.messages.append({"role": "user", "content": prompt})
-
-            # 显示用户消息
-            with chat_container:
-                with st.chat_message("user"):
-                    st.markdown(prompt)
-
-            # 生成回复
-            with chat_container:
-                with st.chat_message("assistant", avatar=STEPFUN_LOGO):
-                    response_placeholder = st.empty()
-                    thinking_placeholder = col_thinking.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 "▌"
-                        response_placeholder.markdown(full_response)
-
-                        # 更新思考过程
-                        with thinking_placeholder.container(height=500):
-                            if full_thinking:
-                                st.markdown(full_thinking)
-
-                    # 保存消息
-                    st.session_state.messages.append({"role": "assistant", "content": full_response})
-                    st.session_state.thinking = full_thinking
-                    st.rerun()
-
-    # 示例问题
-    st.divider()
-    st.subheader("💡 试试这些")
-    examples = [
-        "请解释一下什么是机器学习？",
-        "帮我写一个 Python 快速排序算法",
-        "1000以内有多少个质数？",
-        "一个农夫需要把狼、羊和白菜都带过河，请问农夫该怎么办？",
-    ]
-    cols = st.columns(len(examples))
-    for i, example in enumerate(examples):
-        if cols[i].button(example, key=f"example_{i}", use_container_width=True):
-            st.session_state.messages.append({"role": "user", "content": example})
+    # 显示历史消息
+    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):
+                # 显示思考过程气泡
+                if msg.get("thinking"):
+                    render_thinking_bubble(msg["thinking"])
+                st.markdown(msg["content"])
+
+    # 输入框
+    if prompt := st.chat_input("输入消息..."):
+        # 添加并显示用户消息
+        st.session_state.messages.append({"role": "user", "content": prompt})
+        with st.chat_message("user"):
+            st.markdown(prompt)
+
+        # 生成回复
+        with st.chat_message("assistant", avatar=STEPFUN_LOGO):
+            thinking_placeholder = st.empty()
+            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 "▌"
+
+                # 更新思考气泡
+                if full_thinking:
+                    with thinking_placeholder:
+                        render_thinking_bubble(full_thinking)
+
+                # 更新回答
+                response_placeholder.markdown(full_response)
+
+            # 保存消息（包含思考过程）
+            st.session_state.messages.append({
+                "role": "assistant",
+                "content": full_response,
+                "thinking": full_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.messages.append({"role": "user", "content": example})
+                st.rerun()
+
 
 if __name__ == "__main__":
     main()