Nanbeige 4.1-3B代码实例：st.markdown重写button/textarea的像素风格适配

Nanbeige 4.1-3B代码实例st.markdown重写button/textarea的像素风格适配1. 项目概述Nanbeige 4.1-3B像素冒险聊天终端是一款专为对话模型设计的复古风格前端界面。这个项目通过重写Streamlit原生组件样式实现了独特的JRPG像素游戏视觉效果。核心创新点完全使用st.markdown配合CSS自定义样式保留Streamlit功能完整性的同时实现视觉重构像素级精确控制的UI元素设计2. 像素风格适配原理2.1 Streamlit样式重写机制Streamlit允许通过unsafe_allow_htmlTrue参数注入自定义CSS。这是实现像素风格适配的基础st.markdown( style /* 自定义CSS代码 */ /style , unsafe_allow_htmlTrue)2.2 关键组件样式重写2.2.1 按钮(button)像素化原始Streamlit按钮过于现代化通过CSS实现像素风格.stButtonbutton { border: 4px solid #2C2C2C !important; background-color: #FFD700 !important; color: #2C2C2C !important; font-family: Courier New, monospace !important; padding: 8px 16px !important; box-shadow: 4px 4px 0px #2C2C2C !important; transition: all 0.1s ease !important; } .stButtonbutton:hover { transform: translate(2px, 2px) !important; box-shadow: 2px 2px 0px #2C2C2C !important; }2.2.2 文本框(textarea)像素化对话输入框改造为游戏风格.stTextAreadivdivtextarea { border: 4px solid #2C2C2C !important; background-color: #FDF6E3 !important; font-family: Courier New, monospace !important; padding: 12px !important; box-shadow: inset 4px 4px 0px rgba(0,0,0,0.1) !important; }3. 完整实现代码3.1 基础样式设置import streamlit as st def setup_pixel_style(): st.markdown( style /* 全局样式 */ body { background-color: #FDF6E3; font-family: Courier New, monospace; } /* 主容器 */ .main { border: 4px solid #2C2C2C; padding: 16px; background-color: #FFF; box-shadow: 8px 8px 0px #2C2C2C; } /* 对话气泡样式 */ .player-bubble { background-color: #4D96FF; border: 4px solid #2C2C2C; padding: 12px; margin: 8px 0; border-radius: 0; position: relative; } .bot-bubble { background-color: #6BCB77; border: 4px solid #2C2C2C; padding: 12px; margin: 8px 0; border-radius: 0; position: relative; } /style , unsafe_allow_htmlTrue)3.2 组件重写实现def create_pixel_ui(): # 设置标题 st.markdown( div classmain h1 stylecolor: #2C2C2C; text-align: center;NANBEIGE RPG TERMINAL/h1 hr styleborder: 2px solid #2C2C2C; , unsafe_allow_htmlTrue) # 对话历史显示 if messages not in st.session_state: st.session_state.messages [] for message in st.session_state.messages: bubble_class player-bubble if message[role] user else bot-bubble st.markdown(f div class{bubble_class} strong{message[role].upper()}:/strong {message[content]} /div , unsafe_allow_htmlTrue) # 输入区域 user_input st.text_area(, placeholder输入你的指令..., keyinput) # 操作按钮 col1, col2 st.columns([1, 1]) with col1: if st.button(发送, keysend): if user_input: st.session_state.messages.append({role: user, content: user_input}) # 这里添加模型响应逻辑 st.experimental_rerun() with col2: if st.button(重置, keyreset): st.session_state.messages [] st.experimental_rerun() st.markdown(/div, unsafe_allow_htmlTrue)4. 效果优化技巧4.1 像素动画效果为增强复古游戏感可以添加简单的像素动画keyframes pixel-blink { 0% { opacity: 1; } 50% { opacity: 0.5; } 100% { opacity: 1; } } .cursor { display: inline-block; width: 8px; height: 16px; background-color: #2C2C2C; animation: pixel-blink 1s infinite; vertical-align: middle; }4.2 响应式布局调整确保在不同设备上保持像素风格media (max-width: 768px) { .main { padding: 8px; box-shadow: 4px 4px 0px #2C2C2C; } .stButtonbutton { padding: 6px 12px !important; font-size: 14px !important; } }5. 总结通过本文介绍的技术方案我们成功实现了完整的像素风格适配从按钮到文本框的全组件像素化性能与美观的平衡纯CSS实现不影响Streamlit原有功能可扩展的设计系统颜色和尺寸变量便于主题切换这种实现方式不仅适用于Nanbeige模型也可轻松适配其他AI对话场景为技术应用增添独特的视觉魅力。获取更多AI镜像想探索更多AI镜像和应用场景访问 CSDN星图镜像广场提供丰富的预置镜像覆盖大模型推理、图像生成、视频生成、模型微调等多个领域支持一键部署。