Nanbeige 4.1-3B代码实例实现系统日志折叠/展开交互控件1. 项目背景与需求Nanbeige 4.1-3B的像素冒险聊天终端是一个充满创意的AI对话界面它将传统的聊天交互转化为JRPG游戏体验。在这个独特的界面中系统日志扮演着重要角色它通过think标签展示模型的思考过程。核心需求保持界面简洁的同时允许用户查看详细思考过程实现类似游戏UI的折叠/展开效果确保交互流畅且符合像素风格设计规范2. 技术方案设计2.1 前端实现思路我们将使用Streamlit的组件系统结合自定义CSS来实现这个功能HTML结构使用st.markdown渲染可交互元素CSS样式为折叠面板设计像素风格的边框和动画JavaScript交互通过Streamlit组件实现状态管理2.2 关键代码结构import streamlit as st from transformers import AutoModelForCausalLM, AutoTokenizer # 初始化模型和tokenizer st.cache_resource def load_model(): model AutoModelForCausalLM.from_pretrained(nanbeige/nanbeige-4.1-3B) tokenizer AutoTokenizer.from_pretrained(nanbeige/nanbeige-4.1-3B) return model, tokenizer model, tokenizer load_model()3. 折叠面板实现细节3.1 HTML与CSS实现以下是折叠面板的核心样式代码.pixel-log { border: 4px solid #2C2C2C; background-color: #FDF6E3; padding: 8px; margin: 12px 0; } .pixel-log-header { cursor: pointer; color: #FFD700; font-weight: bold; display: flex; align-items: center; } .pixel-log-content { display: none; padding: 8px; border-top: 2px dashed #2C2C2C; margin-top: 8px; } .pixel-log.active .pixel-log-content { display: block; }3.2 Python交互逻辑实现折叠/展开功能的完整代码示例def toggle_log(container, log_id): 切换日志面板的显示状态 if flog_{log_id}_open not in st.session_state: st.session_state[flog_{log_id}_open] False st.session_state[flog_{log_id}_open] not st.session_state[flog_{log_id}_open] container.empty() render_log(container, log_id) def render_log(container, log_id): 渲染日志面板 is_open st.session_state.get(flog_{log_id}_open, False) with container: st.markdown(f div classpixel-log {active if is_open else } div classpixel-log-header onclickparent.document.getElementById(log-{log_id}).click() span 系统日志 {log_id}/span span stylemargin-left:auto;{▼ if is_open else ▶}/span /div div classpixel-log-content {st.session_state[flog_{log_id}_content]} /div /div , unsafe_allow_htmlTrue) # 添加隐藏按钮用于触发Python回调 st.button(切换, keyflog-{log_id}, on_clicktoggle_log, args(container, log_id), visibleFalse)4. 完整集成示例4.1 主界面实现将折叠面板集成到聊天界面的完整示例def main(): st.title(Nanbeige 4.1-3B 像素冒险聊天终端) # 初始化会话状态 if messages not in st.session_state: st.session_state.messages [] # 显示历史消息 for message in st.session_state.messages: with st.chat_message(message[role]): st.markdown(message[content]) if message.get(log): log_container st.empty() st.session_state[flog_{message[id]}_content] message[log] render_log(log_container, message[id]) # 用户输入 if prompt : st.chat_input(输入你的指令...): st.session_state.messages.append({role: user, content: prompt, id: len(st.session_state.messages)}) # 模型响应 with st.chat_message(assistant): message_placeholder st.empty() full_response # 模拟思考过程 think_log think分析用户指令...\n确定响应策略...\n生成文本.../think # 流式输出 for chunk in [思考中, 正在生成, 完成响应]: full_response chunk message_placeholder.markdown(full_response ▌) time.sleep(0.5) message_placeholder.markdown(full_response) # 添加日志 log_container st.empty() st.session_state[flog_{len(st.session_state.messages)}_content] think_log st.session_state.messages.append({ role: assistant, content: full_response, log: think_log, id: len(st.session_state.messages) }) render_log(log_container, len(st.session_state.messages)-1) if __name__ __main__: main()4.2 效果展示折叠状态显示简洁的日志标题右侧有▶图标指示可展开符合整体像素风格设计展开状态显示完整的think内容带有像素风格的边框和分隔线▼图标指示可折叠5. 性能优化与注意事项5.1 性能考虑会话状态管理使用st.session_state存储日志状态避免不必要的重新渲染CSS优化将样式提取到外部文件减少重复使用类选择器提高渲染效率5.2 常见问题解决样式冲突# 在Streamlit中注入CSS def load_css(): with open(styles.css) as f: st.markdown(fstyle{f.read()}/style, unsafe_allow_htmlTrue)跨会话状态保持# 重置会话时保留必要状态 if st.button(RESET): st.session_state.messages [] # 保留模型加载状态移动端适配media screen and (max-width: 600px) { .pixel-log { padding: 4px; margin: 8px 0; } }6. 总结与扩展建议通过本教程我们实现了一个符合Nanbeige 4.1-3B像素风格的折叠/展开交互控件。这个解决方案不仅美观实用还能很好地融入整体游戏化UI设计。扩展建议添加动画效果增强游戏感实现多级折叠结构增加日志分类过滤功能集成更多游戏化元素如音效获取更多AI镜像想探索更多AI镜像和应用场景访问 CSDN星图镜像广场提供丰富的预置镜像覆盖大模型推理、图像生成、视频生成、模型微调等多个领域支持一键部署。