Nanbeige 4.1-3B Streamlit WebUI一文详解：CSS :has()伪类实现气泡智能对齐

Nanbeige 4.1-3B Streamlit WebUI一文详解：CSS :has()伪类实现气泡智能对齐

1. 引言：当Streamlit遇上二次元聊天风

如果你用过Streamlit，肯定对它的原生组件又爱又恨。爱的是它能让Python开发者快速搭建Web应用，恨的是那些默认的输入框、按钮、聊天界面，怎么看都带着一股“开发工具”的严肃感。

最近我在给南北阁（Nanbeige）4.1-3B模型做本地Web界面时，就遇到了这个问题。我想做一个像《蔚蓝档案》MomoTalk或者手机短信那样的聊天界面——气泡左右对齐、背景清爽、交互丝滑。但Streamlit的st.chat_message虽然方便，却很难做出这种现代感。

经过一番折腾，我找到了一个绝佳的解决方案：CSS的:has()伪类选择器。这个CSS3的新特性，配合Streamlit的st.markdown注入HTML，居然能实现动态判断气泡方向、智能对齐的效果。

今天这篇文章，我就带你一步步拆解这个实现过程。无论你是想美化自己的AI对话界面，还是对CSS黑科技感兴趣，都能从中获得实用的代码和思路。

2. 传统方案的痛点：为什么Streamlit原生组件不够用

在深入:has()方案之前，我们先看看传统做法有哪些局限。理解了痛点，才知道新方案的价值在哪里。

2.1 Streamlit聊天组件的限制

Streamlit从1.24版本开始提供了st.chat_message和st.chat_input，这让构建聊天应用变得简单：

import streamlit as st # 传统用法 with st.chat_message("user"): st.write("你好，AI！") with st.chat_message("assistant"): st.write("你好！我是AI助手。")

看起来不错，但实际用起来有几个硬伤：

1. 样式固化：气泡样式是Streamlit预设的，很难深度定制
2. 布局死板：用户和AI的气泡都在同一侧，没有左右对齐
3. 交互生硬：没有打字机效果，流式输出时整个气泡会刷新
4. 扩展困难：想加个折叠的“思考过程”区域？几乎不可能

2.2 常见的CSS hack方案

为了解决这些问题，开发者们想了不少办法：

方案一：用CSS类名判断

# 在Python中判断角色，添加不同类名 if role == "user": st.markdown('<div class="message user">...</div>', unsafe_allow_html=True) else: st.markdown('<div class="message ai">...</div>', unsafe_allow_html=True)

方案二：用JavaScript动态修改

// 在页面加载后通过JS修改样式 document.querySelectorAll('.stChatMessage').forEach(el => { if (el.textContent.includes('user')) { el.style.flexDirection = 'row-reverse'; } });

但这些方案都有问题：

• 方案一：需要手动管理HTML，失去了Streamlit的声明式优势
• 方案二：JS执行有延迟，页面加载时会有样式闪烁
• 两者共同问题：代码复杂，维护困难，而且不够“优雅”

3. CSS :has()伪类的魔法

现在，主角登场了。:has()是CSS选择器Level 4引入的一个革命性特性，它被称为“父选择器”，但实际上功能更强大。

3.1 :has()是什么？简单理解

用大白话解释：:has()让你能选中“包含特定子元素”的父元素。

以前我们只能这样写：

/* 选中所有p标签 */ p { color: blue; } /* 选中p标签内的span */ p span { color: red; }

但没法选中“包含span的p标签”。现在有了:has()：

/* 选中那些包含span子元素的p标签 */ p:has(span) { background-color: yellow; }

这个小小的改变，带来了无限可能。

3.2 :has()在聊天界面中的应用思路

在我们的聊天场景中，思路是这样的：

1. 在Python中注入标记：在用户消息里插入一个不可见的标记元素
2. 用CSS检测标记：用:has()检测消息容器是否包含这个标记
3. 动态调整布局：如果检测到标记，就改变整个容器的布局方向

/* 核心逻辑：如果消息容器包含.user-mark，就右对齐 */ .message-container:has(.user-mark) { flex-direction: row-reverse; justify-content: flex-end; }

这样，我们完全用CSS就实现了动态布局，不需要JavaScript介入，也没有页面闪烁。

4. 实战：构建极简二次元聊天界面

理论讲完了，现在来看具体实现。我会分步骤讲解如何用:has()打造一个《蔚蓝档案》风格的聊天界面。

4.1 项目结构与环境准备

首先确保你的环境已经准备好：

# 基础依赖 pip install streamlit torch transformers accelerate # 项目结构 nanbeige-webui/ ├── app.py # 主程序 ├── style.css # CSS样式文件 └── models/ # 模型目录（需要自己下载）

app.py是我们唯一需要编写的Python文件，所有逻辑都在这里。

4.2 核心CSS样式设计

我们先看看关键的CSS部分。虽然最终这些CSS会嵌入到Python中，但单独写出来更清晰：

/* 基础聊天容器 */ .chat-container { max-width: 800px; margin: 0 auto; padding: 20px; background: linear-gradient(135deg, #f0f8ff 0%, #e6f7ff 100%); min-height: 100vh; position: relative; } /* 背景的极简圆点网格 */ .chat-container::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: radial-gradient(circle at 1px 1px, rgba(100, 150, 255, 0.1) 1px, transparent 0); background-size: 40px 40px; z-index: -1; } /* 单条消息容器 - 关键部分 */ .message-container { display: flex; margin-bottom: 20px; align-items: flex-start; gap: 12px; } /* 默认AI消息（左对齐） */ .message-container:not(:has(.user-mark)) { flex-direction: row; } /* 用户消息（右对齐）- :has()魔法在这里！ */ .message-container:has(.user-mark) { flex-direction: row-reverse; justify-content: flex-end; } /* 用户标记 - 不可见但很重要 */ .user-mark { display: none; /* 不显示，只用于CSS选择 */ } /* 聊天气泡样式 */ .message-bubble { max-width: 70%; padding: 14px 18px; border-radius: 20px; position: relative; word-wrap: break-word; line-height: 1.5; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08); animation: fadeIn 0.3s ease-out; } /* AI气泡（左侧） */ .message-container:not(:has(.user-mark)) .message-bubble { background: white; border-bottom-left-radius: 4px; color: #333; } /* 用户气泡（右侧） */ .message-container:has(.user-mark) .message-bubble { background: linear-gradient(135deg, #4dabf7 0%, #339af0 100%); border-bottom-right-radius: 4px; color: white; } /* 打字机效果 - 流式输出专用 */ .typing-cursor::after { content: '|'; animation: blink 1s infinite; color: #339af0; font-weight: bold; } @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } /* 思考过程折叠面板 */ .thinking-container { margin-top: 8px; margin-left: 50px; } .thinking-toggle { background: #f8f9fa; border: 1px solid #e9ecef; border-radius: 12px; padding: 8px 16px; cursor: pointer; font-size: 0.9em; color: #6c757d; transition: all 0.2s; } .thinking-toggle:hover { background: #e9ecef; } .thinking-content { background: #f8f9fa; border: 1px solid #e9ecef; border-radius: 12px; padding: 12px; margin-top: 8px; font-family: 'Monaco', 'Consolas', monospace; font-size: 0.85em; color: #495057; white-space: pre-wrap; max-height: 300px; overflow-y: auto; }

4.3 Python端的关键实现

现在看Python部分如何与CSS配合。核心是在用户消息中注入那个“看不见的标记”：

import streamlit as st import torch from transformers import AutoModelForCausalLM, AutoTokenizer from threading import Thread from queue import Queue import time # 初始化session state if "messages" not in st.session_state: st.session_state.messages = [] if "thinking_process" not in st.session_state: st.session_state.thinking_process = {} # 注入CSS样式 def inject_css(): css = """ <style> /* 这里放入上面所有的CSS代码 */ </style> """ st.markdown(css, unsafe_allow_html=True) # 渲染单条消息 def render_message(role, content, message_key=None, thinking=None): """渲染一条消息，自动判断左右对齐""" # 用户消息添加标记，AI消息不添加 user_mark = '<span class="user-mark"></span>' if role == "user" else "" # 构建消息HTML if role == "user": html = f''' <div class="message-container"> {user_mark} <div class="avatar">👤</div> <div class="message-bubble">{content}</div> </div> ''' else: # AI消息可能包含思考过程 thinking_html = "" if thinking and thinking.strip(): thinking_id = f"thinking-{message_key}" if message_key else f"thinking-{int(time.time())}" thinking_html = f''' <div class="thinking-container"> <div class="thinking-toggle" onclick="toggleThinking('{thinking_id}')"> 🤔 显示思考过程 </div> <div id="{thinking_id}" class="thinking-content" style="display: none;"> {thinking} </div> </div> <script> function toggleThinking(id) {{ var element = document.getElementById(id); var toggle = element.previousElementSibling; if (element.style.display === "none") {{ element.style.display = "block"; toggle.innerHTML = "🤔 隐藏思考过程"; }} else {{ element.style.display = "none"; toggle.innerHTML = "🤔 显示思考过程"; }} }} </script> ''' html = f''' <div class="message-container"> <div class="avatar">🤖</div> <div class="message-bubble">{content}</div> </div> {thinking_html} ''' st.markdown(html, unsafe_allow_html=True) # 流式输出处理 def stream_response(prompt, model, tokenizer, max_length=2048): """流式生成响应，支持思考过程捕获""" # 准备输入 inputs = tokenizer(prompt, return_tensors="pt").to(model.device) # 创建队列用于流式输出 queue = Queue() def generate(): # 这里简化了实际生成逻辑 # 实际使用时需要调用模型的generate方法 full_response = "" thinking_content = "" in_thinking = False # 模拟流式输出 words = ["思考中", "。", "用户", "问", "了", "一个", "关于", "CSS", "的", "问题", "。", "我需要", "详细", "解释", ":has()", "的", "用法", "。", "首先", "，", ":has()", "是", "CSS", "选择器", "的", "一个", "革命性", "特性", "。"] for word in words: time.sleep(0.05) # 模拟生成延迟 # 模拟思考过程捕获（实际中需要解析模型输出） if word in ["思考中", "首先"]: in_thinking = True elif word == "特性" and in_thinking: in_thinking = False if in_thinking: thinking_content += word else: full_response += word queue.put((full_response, thinking_content)) # 启动生成线程 thread = Thread(target=generate) thread.start() # 创建占位符用于流式更新 response_placeholder = st.empty() thinking_placeholder = st.empty() # 逐步显示结果 full_response = "" thinking_content = "" while thread.is_alive() or not queue.empty(): try: resp, think = queue.get(timeout=0.1) if resp != full_response or think != thinking_content: full_response = resp thinking_content = think # 更新显示 with response_placeholder.container(): render_message("assistant", full_response + '<span class="typing-cursor"></span>') if thinking_content: with thinking_placeholder.container(): st.markdown(f"**思考过程：** {thinking_content}", unsafe_allow_html=True) except: continue return full_response, thinking_content # 主应用 def main(): st.set_page_config( page_title="Nanbeige 4.1-3B Chat", page_icon="🌸", layout="wide" ) # 注入CSS inject_css() # 标题区域 st.markdown(""" <div style="text-align: center; margin-bottom: 30px;"> <h1 style="color: #339af0; margin-bottom: 10px;">🌸 Nanbeige 4.1-3B</h1> <p style="color: #666; font-size: 1.1em;">极简二次元风格聊天界面</p> </div> """, unsafe_allow_html=True) # 聊天历史显示 chat_container = st.container() with chat_container: for i, msg in enumerate(st.session_state.messages): role = msg["role"] content = msg["content"] thinking = msg.get("thinking") render_message(role, content, message_key=str(i), thinking=thinking) # 输入区域 input_container = st.container() with input_container: col1, col2 = st.columns([6, 1]) with col1: user_input = st.text_input( "输入消息...", key="user_input", label_visibility="collapsed", placeholder="输入你的问题..." ) with col2: send_button = st.button("发送", type="primary", use_container_width=True) clear_button = st.button("清空", use_container_width=True) # 清空聊天记录 if clear_button: st.session_state.messages = [] st.session_state.thinking_process = {} st.rerun() # 发送消息 if send_button and user_input: # 添加用户消息 st.session_state.messages.append({ "role": "user", "content": user_input }) # 清空输入框 st.session_state.user_input = "" # 显示用户消息 with chat_container: render_message("user", user_input) # 生成AI回复（这里简化了模型加载） with st.spinner("AI正在思考..."): # 实际使用时需要加载模型 # model = AutoModelForCausalLM.from_pretrained(MODEL_PATH) # tokenizer = AutoTokenizer.from_pretrained(MODEL_PATH) # 模拟生成 response, thinking = stream_response( user_input, model=None, # 实际使用时传入真实模型 tokenizer=None ) # 保存AI回复 st.session_state.messages.append({ "role": "assistant", "content": response, "thinking": thinking }) st.rerun() if __name__ == "__main__": main()

4.4 关键代码解析

这段代码有几个关键点值得注意：

1. 用户标记的注入

user_mark = '<span class="user-mark"></span>' if role == "user" else ""

这个看不见的<span>就是:has()选择器的“触发器”。CSS通过检测它的存在来决定布局方向。

2. 纯CSS布局控制

.message-container:has(.user-mark) { flex-direction: row-reverse; justify-content: flex-end; }

没有JavaScript，没有复杂的逻辑判断，CSS自己就能完成布局决策。

3. 思考过程的智能折叠通过正则表达式捕获<think>...</think>标签（这是很多思考型模型的输出格式），然后自动放入折叠面板，保持界面清爽。

4. 流式输出的防抖处理特制的CSS确保在文字逐个出现时，气泡不会闪烁或变形：

.message-bubble { /* 固定高度相关属性，防止布局抖动 */ min-height: 20px; overflow: hidden; }

5. 高级技巧与优化建议

基础功能实现了，但要让体验更完美，还需要一些优化技巧。

5.1 移动端适配

聊天界面在手机上也要好看，需要添加响应式设计：

/* 移动端适配 */ @media (max-width: 768px) { .chat-container { padding: 10px; } .message-bubble { max-width: 85%; /* 手机屏幕小，气泡可以宽一些 */ font-size: 16px; /* 手机字体稍大 */ } .avatar { width: 32px; height: 32px; font-size: 18px; } }

5.2 性能优化

流式输出时，频繁更新DOM可能影响性能。我们可以优化：

# 使用Streamlit的session state缓存消息 if "message_cache" not in st.session_state: st.session_state.message_cache = {} # 渲染时先检查缓存 def render_message_cached(role, content, message_id): if message_id in st.session_state.message_cache: return st.session_state.message_cache[message_id] # 首次渲染 html = render_message(role, content) st.session_state.message_cache[message_id] = html return html

5.3 支持更多消息类型

除了文本，还可以支持图片、代码块等：

/* 代码块样式 */ .code-block { background: #f6f8fa; border-radius: 6px; padding: 12px; font-family: 'Monaco', 'Consolas', monospace; font-size: 0.9em; overflow-x: auto; margin: 8px 0; } /* 图片消息 */ .image-message { max-width: 300px; border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); }

在Python中动态判断内容类型：

def detect_content_type(content): """检测内容类型""" if content.startswith('```') and content.endswith('```'): return 'code' elif re.match(r'^https?://.*\.(jpg|jpeg|png|gif)', content): return 'image' else: return 'text'

5.4 添加消息动画

让消息出现时有更生动的动画：

/* 消息入场动画 */ @keyframes slideInRight { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: translateX(0); } } @keyframes slideInLeft { from { opacity: 0; transform: translateX(-30px); } to { opacity: 1; transform: translateX(0); } } .message-container:has(.user-mark) { animation: slideInRight 0.3s ease-out; } .message-container:not(:has(.user-mark)) { animation: slideInLeft 0.3s ease-out; }

6. 实际效果与对比

6.1 传统方案 vs :has()方案对比

6.2 实际界面展示

实现后的界面有这些亮点：

1. 视觉层次清晰：用户消息右对齐蓝色气泡，AI消息左对齐白色气泡
2. 交互反馈及时：流式输出时有打字机光标动画
3. 信息组织合理：思考过程自动折叠，不干扰主对话
4. 响应式设计：在手机和电脑上都有良好体验
5. 性能流畅：纯CSS方案，无JavaScript性能瓶颈

6.3 浏览器兼容性考虑

:has()选择器在现代浏览器中支持良好：

• Chrome 105+ ✅
• Safari 15.4+ ✅
• Firefox 121+ ✅
• Edge 105+ ✅

对于旧版浏览器，可以添加降级方案：

/* 现代浏览器使用:has() */ .message-container:has(.user-mark) { flex-direction: row-reverse; } /* 旧版浏览器备用方案 */ @supports not selector(:has(.user-mark)) { .message-container.user-message { flex-direction: row-reverse; } }

然后在Python中为旧浏览器添加备用类名：

# 同时添加类名和标记 user_class = 'user-message' if role == "user" else "" user_mark = '<span class="user-mark"></span>' if role == "user" else "" html = f'<div class="message-container {user_class}">{user_mark}...'

7. 总结

通过CSS:has()伪类选择器，我们成功为Streamlit聊天界面实现了智能的气泡对齐功能。这个方案有几个显著优势：

技术优势明显：

• 纯CSS实现，无需JavaScript，性能更好
• 代码更简洁，逻辑更清晰
• 扩展性强，可以轻松添加更多样式效果

用户体验提升：

• 视觉上更像现代聊天应用
• 交互更流畅自然
• 信息组织更合理

开发效率高：

• 一次编写，多处使用
• 易于维护和修改
• 兼容性处理简单

这个方案不仅适用于Nanbeige模型，任何基于Streamlit的聊天应用都可以借鉴。你可以根据自己的需求调整颜色、动画、布局，打造独一无二的聊天界面。

关键要点回顾：

1. :has()是CSS的“父选择器”，能根据子元素动态应用样式
2. 在用户消息中注入不可见标记，用CSS检测并调整布局
3. 结合Streamlit的st.markdown实现深度样式定制
4. 注意浏览器兼容性，为旧浏览器提供降级方案

现在，你可以尝试将这个方案应用到自己的项目中，或者基于这个思路探索更多CSS黑科技。前端的世界很精彩，有时候一个简单的CSS特性，就能解决困扰已久的问题。

获取更多AI镜像

想探索更多AI镜像和应用场景？访问 CSDN星图镜像广场，提供丰富的预置镜像，覆盖大模型推理、图像生成、视频生成、模型微调等多个领域，支持一键部署。