介绍基于 Streamlit 构建极简 WebUI 的方案，针对 Nanbeige 4.1-3B 模型进行定制，并展示如何适配 Qwen 和 Llama 系列模型。内容包括视觉设计优化（CSS 布局）、思考过程（CoT）折叠处理、流式输出实现以及多模型通用适配逻辑。通过单文件 Python 驱动，无需复杂前端框架即可实现类似移动端聊天的交互体验，并提供参数调整与扩展建议。
本文介绍基于 Streamlit 构建极简 WebUI 的方案，专为 Nanbeige 4.1-3B 模型打造，并支持适配 Qwen 或 Llama 等主流模型。核心思路通用，通过 CSS 技巧打破原生组件限制，实现现代化交互体验。
现代大模型具备深度思考（Chain-of-Thought）能力，输出常含 `` 标签。WebUI 自动捕获并折叠思考内容：
基于 TextIteratorStreamer 和多线程技术，实现打字机效果：
仅需一个 Python 文件（app.py）运行：
确保 Python 3.10+，安装依赖：
# 创建虚拟环境
python -m venv nanbeige-ui
source nanbeige-ui/bin/activate
# 安装依赖
pip install streamlit torch transformers accelerate
包说明：streamlit（界面框架）、torch（深度学习）、transformers（模型加载）、accelerate（推理优化）。
克隆项目或直接复制 app.py 文件。
从 Hugging Face 下载 Nanbeige 4.1-3B 权重：
from transformers import AutoModelForCausalLM, AutoTokenizer
model_name = "Nanbeige/Nanbeige4-3B"
model = AutoModelForCausalLM.from_pretrained(model_name)
tokenizer = AutoTokenizer.from_pretrained(model_name)
model.save_pretrained("./nanbeige-model")
tokenizer.save_pretrained("./nanbeige-model")
打开 app.py，设置模型路径：
MODEL_PATH = "/home/username/models/nanbeige-4.1-3b"
注意使用绝对路径并确保读取权限。
streamlit run app.py
浏览器访问 http://localhost:8501。
利用 CSS :has() 伪类选择器实现动态对齐：
user_html = f"""<div class="user-mark"><span></span><div>{message}</div></div>"""
st.markdown(user_html, unsafe_allow_html=True)
ai_html = f"""<div><div>{message}</div></div>"""
st.markdown(ai_html, unsafe_allow_html=True)
.message-wrapper:has(.user-mark) { flex-direction: row-reverse; }
.message-wrapper:has(.user-mark) .message-bubble { background-color: #007AFF; color: white; }
.message-bubble.ai { background-color: white; box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
提取 `") if thought_start != -1 and thought_end != -1: thought = text[thought_start+5:thought_end] answer = text[thought_end+5:].strip() return f"""
#### 3.3 流式输出的平滑实现
使用 `st.empty()` 占位符更新内容避免闪烁：
```python
import threading
from transformers import TextIteratorStreamer
def stream_response(prompt):
inputs = tokenizer(prompt, return_tensors="pt").to(device)
streamer = TextIteratorStreamer(tokenizer, timeout=60.0, skip_prompt=True)
generation_kwargs = dict(inputs, streamer=streamer, max_new_tokens=1024, temperature=0.7)
thread = threading.Thread(target=model.generate, kwargs=generation_kwargs)
thread.start()
placeholder = st.empty()
generated_text = ""
for text in streamer:
generated_text += text
placeholder.markdown(f'<div>{generated_text}</div>', unsafe_allow_html=True)
return generated_text
需设置 trust_remote_code=True 及特定对话模板：
if model_type == "Qwen":
tokenizer = AutoTokenizer.from_pretrained(MODEL_PATH, trust_remote_code=True)
model = AutoModelForCausalLM.from_pretrained(MODEL_PATH, trust_remote_code=True, torch_dtype=torch.float16, device_map="auto")
Qwen 对话格式示例：
messages = [{"role": "system", "content": "你是一个有帮助的助手"}, {"role": "user", "content": "你好"}]
text = tokenizer.apply_chat_template(messages, tokenize=False, add_generation_prompt=True)
注意 pad_token 设置及特定对话格式：
elif model_type == "Llama":
tokenizer.pad_token = tokenizer.eos_token
# Llama3 对话模板处理...
创建统一类管理不同模型逻辑：
class ChatProcessor:
def __init__(self, model_type="Nanbeige"):
self.model_type = model_type
self.setup_model()
def setup_model(self):
if self.model_type == "Qwen": self.load_qwen()
elif self.model_type == "Llama": self.load_llama()
else: self.load_nanbeige()
def format_messages(self, messages):
if self.model_type == "Qwen": return self.format_qwen(messages)
elif self.model_type == "Llama": return self.format_llama(messages)
else: return self.format_nanbeige(messages)
对话流畅，思考过程折叠显示。
用户：计算斐波那契数列
AI：<details><summary>查看思考过程</summary>...</details>
```python
def fibonacci(n): ...
界面美观，无思考过程折叠部分。
用户：描述夏天
AI：夏日的阳光洒在波光粼粼的湖面上...
使用 st.selectbox 切换模型，无需重启应用。
model_choice = st.selectbox("选择 AI 模型", ["Nanbeige 4.1-3B", "Qwen 7B", "Llama 3 8B"])
if model_choice != st.session_state.get("current_model"):
# 重新加载模型逻辑
st.session_state）。:has()、Flex）。本项目展示了用最简单技术栈创造最佳用户体验的思路，适合 AI 研究者、开发者参考。
微信公众号「极客日志」，在微信中扫描左侧二维码关注。展示文案：极客日志 zeeklog
使用加密算法（如AES、TripleDES、Rabbit或RC4）加密和解密文本明文。 在线工具，加密/解密文本在线工具，online
生成新的随机RSA私钥和公钥pem证书。 在线工具，RSA密钥对生成器在线工具，online
基于 Mermaid.js 实时预览流程图、时序图等图表，支持源码编辑与即时渲染。 在线工具，Mermaid 预览与可视化编辑在线工具，online
解析常见 curl 参数并生成 fetch、axios、PHP curl 或 Python requests 示例代码。 在线工具，curl 转代码在线工具，online
将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具，Base64 字符串编码/解码在线工具，online
将字符串、文件或图像转换为其 Base64 表示形式。 在线工具，Base64 文件转换器在线工具，online