Nanbeige 4.1-3B部署教程：解决st.markdown(unsafe_allow_html=True)样式冲突
Nanbeige 4.1-3B部署教程：解决st.markdown(unsafe_allow_html=True)样式冲突
1. 项目介绍
Nanbeige 4.1-3B是一款具有独特像素游戏风格的AI对话前端，专为Nanbeige 4.1-3B大语言模型设计。这个项目将现代AI技术与复古JRPG视觉风格完美结合，为用户带来全新的交互体验。
1.1 核心特点
- 像素游戏风格UI：采用4px像素边框和高饱和度色彩方案
- 角色化对话界面：区分用户(蓝色气泡)和AI(绿色气泡)的对话样式
- 流式文本渲染：模拟老式游戏机的文字显示效果
- 思考过程可视化：通过
<think>标签展示模型内部推理过程
2. 环境准备
在开始部署前，请确保您的系统满足以下要求：
2.1 硬件要求
- GPU：至少16GB显存(NVIDIA推荐)
- 内存：32GB或以上
- 存储：20GB可用空间
2.2 软件依赖
pip install streamlit transformers torch3. 部署步骤
3.1 克隆项目仓库
git clone https://github.com/your-repo/nanbeige-pixel-ui.git cd nanbeige-pixel-ui3.2 模型下载与加载
from transformers import AutoModelForCausalLM, AutoTokenizer model_path = "nanbeige-4.1-3b" tokenizer = AutoTokenizer.from_pretrained(model_path) model = AutoModelForCausalLM.from_pretrained(model_path, device_map="auto")3.3 解决样式冲突问题
本项目大量使用st.markdown(unsafe_allow_html=True)来实现自定义样式，这可能导致与Streamlit默认样式的冲突。以下是解决方案：
3.3.1 重置默认样式
def reset_streamlit_style(): st.markdown(""" <style> /* 重置Streamlit默认样式 */ .stTextInput, .stTextArea, .stButton>button { all: unset; } /* 添加自定义像素风格 */ .pixel-border { border: 4px solid #2C2C2C !important; } </style> """, unsafe_allow_html=True)3.3.2 隔离样式作用域
def scoped_style(): st.markdown(""" <style> /* 使用特定类名前缀隔离样式 */ .nanbeige-container .chat-bubble { border-radius: 0; border: 2px solid #000; } </style> """, unsafe_allow_html=True)4. 关键功能实现
4.1 像素风格对话框
def pixel_chat_bubble(text, is_user=False): color = "#4D96FF" if is_user else "#6BCB77" st.markdown(f""" <div class="pixel-border" style="background: {color}; padding: 10px; margin: 5px 0;"> {text} </div> """, unsafe_allow_html=True)4.2 流式文本渲染
import time def stream_text(text): placeholder = st.empty() for i in range(len(text)): placeholder.markdown(f""" <div class="pixel-border"> {text[:i+1]}<span class="blinking-cursor">█</span> </div> """, unsafe_allow_html=True) time.sleep(0.05)4.3 思考过程可视化
def show_thinking(thoughts): with st.expander("系统日志 (点击查看思考过程)"): st.markdown(f""" <div class="pixel-border" style="background: #FDF6E3; color: #2C2C2C;"> <think>{thoughts}</think> </div> """, unsafe_allow_html=True)5. 常见问题解决
5.1 样式不生效
如果自定义样式没有正确应用，请检查：
- 确保
unsafe_allow_html=True参数已设置 - 确认CSS选择器优先级高于Streamlit默认样式
- 检查是否有其他样式覆盖了您的定义
5.2 布局错乱
像素风格依赖固定尺寸元素，如果出现布局问题：
# 在Streamlit配置中添加 st.set_page_config(layout="centered", initial_sidebar_state="collapsed")5.3 性能优化
对于大型模型，建议添加缓存：
@st.cache_resource def load_model(): return AutoModelForCausalLM.from_pretrained("nanbeige-4.1-3b")6. 总结
通过本教程，您已经学会了如何部署Nanbeige 4.1-3B像素风格聊天界面，并解决了使用st.markdown(unsafe_allow_html=True)时的样式冲突问题。关键要点包括：
- 样式隔离：通过重置默认样式和添加作用域前缀来避免冲突
- 性能优化：使用缓存加速模型加载
- 特色功能：实现了像素风格的对话框和流式文本渲染
现在您可以启动Streamlit应用，体验这款独特的像素风格AI对话界面了：
streamlit run app.py获取更多AI镜像
想探索更多AI镜像和应用场景？访问 CSDN星图镜像广场，提供丰富的预置镜像，覆盖大模型推理、图像生成、视频生成、模型微调等多个领域，支持一键部署。