Streamlit WebUI 实战：适配 Nanbeige、Qwen 与 Llama 大模型的方法

注意使用绝对路径并确保读取权限。

2.5 启动服务

streamlit run app.py

浏览器访问 http://localhost:8501。

3. 核心技术解析：CSS 魔法改造 Streamlit

3.1 动态聊天气泡对齐

利用 CSS :has() 伪类选择器实现动态对齐：

1. Python 注入标记：

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)

2. CSS 检测调整：

.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); }

3.2 思考过程的智能折叠

提取 `") 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

4. 通用改造：适配 Qwen、Llama 等其他模型

4.1 适配 Qwen 系列模型

需设置 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)

4.2 适配 Llama 系列模型

注意 pad_token 设置及特定对话格式：

elif model_type == "Llama":
    tokenizer.pad_token = tokenizer.eos_token
    # Llama3 对话模板处理...

4.3 通用对话处理器

创建统一类管理不同模型逻辑：

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)

4.4 界面适配注意事项

1. 参数设置：Temperature、Max Tokens 等。
2. 特殊 Token 处理。
3. 流式输出适配。

5. 实际应用与效果展示

5.1 Nanbeige 4.1-3B 实际效果

对话流畅，思考过程折叠显示。

用户：计算斐波那契数列
AI：<details><summary>查看思考过程</summary>...</details>
```python
def fibonacci(n): ...

5.2 适配 Qwen 模型效果

界面美观，无思考过程折叠部分。

用户：描述夏天
AI：夏日的阳光洒在波光粼粼的湖面上...

5.3 多模型切换体验

使用 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"):
    # 重新加载模型逻辑

6. 总结与扩展建议

6.1 核心收获

1. Streamlit 配合 CSS 可创造精美界面。
2. 极简设计提升专注度。
3. 思考过程折叠实用。
4. 流式输出必备。
5. 单文件设计便于维护。

6.2 扩展方向

1. 添加多轮对话记忆（st.session_state）。
2. 支持文件上传解析。
3. 语音输入输出。
4. 模型参数实时调整。
5. 对话导出功能。

6.3 开发者建议

1. 理解 CSS 布局（:has()、Flex）。
2. 逐步测试适配。
3. 注意性能优化（加载进度）。
4. 保持代码简洁。

本项目展示了用最简单技术栈创造最佳用户体验的思路，适合 AI 研究者、开发者参考。