当前位置：首页 > news >正文

Nanbeige 4.1-3B保姆级教程：从零配置像素UI、think标签支持到流式渲染

news 2026/5/11 20:58:30

Nanbeige 4.1-3B保姆级教程：从零配置像素UI、think标签支持到流式渲染

1. 环境准备与快速部署

1.1 系统要求

Python 3.8+
CUDA 11.7+ (如需GPU加速)
至少16GB内存 (推荐32GB)
显存要求：最低8GB (3B模型推理)

1.2 一键安装命令

# 创建虚拟环境 python -m venv nanbeige_env source nanbeige_env/bin/activate # Linux/Mac # nanbeige_env\Scripts\activate # Windows # 安装核心依赖 pip install streamlit transformers torch sentencepiece

1.3 快速启动

将以下代码保存为nanbeige_ui.py：

import streamlit as st from transformers import AutoModelForCausalLM, AutoTokenizer @st.cache_resource def load_model(): return AutoModelForCausalLM.from_pretrained("nanbeige/nanbeige-4.1-3B") model = load_model() tokenizer = AutoTokenizer.from_pretrained("nanbeige/nanbeige-4.1-3B") # 启动UI st.title("Nanbeige 4.1-3B 像素冒险终端")

运行命令：

streamlit run nanbeige_ui.py

2. 像素UI核心配置

2.1 基础样式注入

在Streamlit中插入以下CSS代码实现像素风格：

def inject_pixel_style(): pixel_css = """ <style> /* 主容器 */ .stApp { background-color: #FDF6E3; border: 4px solid #2C2C2C; font-family: 'Courier New', monospace; } /* 玩家对话框 */ .user-message { background-color: #4D96FF; padding: 12px; border-radius: 0; border: 2px solid #2C2C2C; margin: 8px 0; } </style> """ st.markdown(pixel_css, unsafe_allow_html=True)

2.2 角色气泡设计

实现JRPG风格的对话气泡：

def create_message_bubble(text, is_user=True): color = "#4D96FF" if is_user else "#6BCB77" role = "PLAYER" if is_user else "NANBEIGE LV.99" html = f""" <div style="background-color: {color}; border: 2px solid #2C2C2C; padding: 10px; margin: 10px 0; font-family: 'Courier New', monospace;"> <strong>{role}:</strong> {text} </div> """ return st.markdown(html, unsafe_allow_html=True)

3. Think标签支持实现

3.1 标签解析逻辑

def parse_think_tags(text): import re thinks = re.findall(r'<think>(.*?)</think>', text, re.DOTALL) cleaned_text = re.sub(r'<think>.*?</think>', '', text, flags=re.DOTALL) return cleaned_text, thinks

3.2 系统日志展示

在侧边栏显示思考过程：

def show_think_log(thinks): with st.sidebar: st.subheader("📜 系统日志") for i, thought in enumerate(thinks, 1): st.text(f"思考{i}: {thought.strip()}")

4. 流式渲染实现

4.1 逐字输出效果

import time def stream_text(text, speed=0.05): placeholder = st.empty() full_text = "" for char in text: full_text += char placeholder.markdown(f""" <div style="font-family: 'Courier New', monospace;"> {full_text}<span style="border-right: 2px solid #2C2C2C; animation: blink 1s infinite;">█</span> </div> <style> @keyframes blink {{ 0% {{ opacity: 1; }} 50% {{ opacity: 0; }} 100% {{ opacity: 1; }} }} </style> """, unsafe_allow_html=True) time.sleep(speed) return full_text

4.2 完整对话流程

def chat_loop(): if "history" not in st.session_state: st.session_state.history = [] user_input = st.text_input("你的指令:", key="input") if st.button("⚔️ 发送") or user_input: # 玩家消息 create_message_bubble(user_input, is_user=True) # 模型生成 inputs = tokenizer(user_input, return_tensors="pt") outputs = model.generate(**inputs, max_new_tokens=2048) response = tokenizer.decode(outputs[0], skip_special_tokens=True) # 处理think标签 cleaned_response, thinks = parse_think_tags(response) if thinks: show_think_log(thinks) # 流式输出 stream_text(cleaned_response) # 保存历史 st.session_state.history.append((user_input, cleaned_response))

5. 完整UI集成

5.1 主函数整合

def main(): inject_pixel_style() st.title("🎮 Nanbeige 4.1-3B 像素冒险终端") # 重置按钮 if st.button("🔴 RESET", type="primary"): st.session_state.clear() st.experimental_rerun() # 对话区域 chat_loop() if __name__ == "__main__": main()

5.2 高级配置选项

在侧边栏添加参数调节：

def advanced_options(): with st.sidebar: st.subheader("⚙️ 冒险配置") max_tokens = st.slider("最大Token数", 512, 4096, 2048) temperature = st.slider("创意温度", 0.1, 1.0, 0.7) # 更新模型参数 global generation_config generation_config = { "max_new_tokens": max_tokens, "temperature": temperature, "do_sample": True }