Nanbeige 4.1-3B Streamlit UI实操手册：自定义背景色与气泡样式的修改方法

Nanbeige 4.1-3B Streamlit UI实操手册自定义背景色与气泡样式的修改方法1. 引言从“能用”到“好看”的界面定制如果你已经体验过Nanbeige 4.1-3B Streamlit WebUI第一印象可能是“清爽”、“现代”。它确实打破了Streamlit原生界面的那种“开发工具感”把对话界面做得像手机聊天软件一样舒服。但你可能会有这样的想法“这个浅灰蓝背景挺好看但我想换成我喜欢的深色模式”“气泡样式不错但我想调整圆角大小或者换个颜色”“整体风格很二次元但我想适配我们公司的品牌色”这些想法都很正常。毕竟一个真正好用的工具不仅要功能强大还要能“长得像自己人”。今天这篇文章就是为你准备的界面定制指南。我会手把手带你了解这个WebUI的样式系统教你如何轻松修改背景色、气泡样式甚至打造完全属于你自己的对话界面。你将学到什么理解这个WebUI的CSS样式架构找到并修改背景颜色的方法自定义聊天气泡的样式颜色、圆角、阴影等一些实用的样式调整技巧前置知识只需要基础的Python知识完全不需要前端开发经验。我会用最直白的方式解释一切。2. 理解WebUI的样式架构在开始修改之前我们先花几分钟了解一下这个项目的样式是怎么工作的。理解了架构修改起来就会得心应手。2.1 核心原理CSS注入这个WebUI最巧妙的地方在于它没有使用复杂的前端框架比如React、Vue而是用纯Python的Streamlit通过“CSS注入”的方式实现了华丽的界面效果。什么是CSS注入简单说就是在Python代码里写CSS样式然后让Streamlit在页面加载时把这些样式应用到页面上。这样做的好处是不需要单独的前端项目修改样式后立即生效刷新页面即可所有代码都在一个app.py文件里管理方便2.2 样式代码在哪里打开你的app.py文件往下翻你会看到一大段以st.markdown()开头的代码里面包含了很多CSS样式。这段代码通常长这样# 注入自定义CSS样式 st.markdown( style /* 这里就是所有的CSS样式代码 */ :root { --primary-color: #4A90E2; --user-bubble-bg: #E3F2FD; --ai-bubble-bg: #FFFFFF; /* ... 更多颜色变量 ... */ } body { background-color: var(--background-color); background-image: radial-gradient(circle at 1px 1px, rgba(0, 0, 0, 0.05) 1px, transparent 0); background-size: 40px 40px; /* ... 更多样式 ... */ } /* 用户气泡样式 */ .stChatMessage:has(.user-mark) { flex-direction: row-reverse; } .stChatMessage:has(.user-mark) .stChatMessageContent { background-color: var(--user-bubble-bg); border-radius: 18px 18px 4px 18px; } /* AI气泡样式 */ .stChatMessage:not(:has(.user-mark)) .stChatMessageContent { background-color: var(--ai-bubble-bg); border-radius: 18px 18px 18px 4px; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08); } /style , unsafe_allow_htmlTrue)关键点:root部分这里定义了一些“颜色变量”比如--primary-color、--user-bubble-bg等。修改这些变量就能一次性改变所有用到这个颜色的地方。body部分这里定义了整个页面的背景样式包括背景颜色和那个很有特色的圆点网格。气泡样式部分这里定义了用户气泡和AI气泡的不同样式。2.3 气泡对齐的魔法:has()选择器你可能注意到代码里有这样的写法.stChatMessage:has(.user-mark)。这是CSS的一个高级功能意思是“选择那些包含了.user-mark元素的.stChatMessage元素”。在这个WebUI里用户消息会被标记一个隐藏的span classuser-mark/spanCSS检测到这个标记就把气泡布局方向反过来flex-direction: row-reverse这样用户气泡就显示在右侧AI气泡显示在左侧这个技巧很巧妙但对我们修改样式来说只需要知道用户气泡和AI气泡是通过不同的CSS选择器来区分的。3. 修改背景颜色和图案现在我们来实际操作。背景修改是最简单也最有效果的定制方式。3.1 找到背景样式代码在app.py的CSS部分找到body相关的样式。它通常长这样body { background-color: var(--background-color); background-image: radial-gradient(circle at 1px 1px, rgba(0, 0, 0, 0.05) 1px, transparent 0); background-size: 40px 40px; margin: 0; padding: 20px; min-height: 100vh; font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif; }3.2 修改纯色背景如果你想要一个纯色背景没有圆点网格最简单的方法是修改颜色变量在:root部分找到--background-color变量改成你想要的颜色比如深色模式可以用#1a1a1a:root { /* 原来的浅色背景 */ /* --background-color: #f8fafc; */ /* 改为深色背景 */ --background-color: #1a1a1a; /* 同时可能需要调整文字颜色让文字在深色背景上可见 */ --text-color: #ffffff; }应用到body确保body的background-color使用的是这个变量body { background-color: var(--background-color); /* 如果想要纯色背景可以注释掉background-image这行 */ /* background-image: radial-gradient(circle at 1px 1px, rgba(0, 0, 0, 0.05) 1px, transparent 0); */ /* background-size: 40px 40px; */ /* ... 其他样式 ... */ }颜色值参考深灰#1a1a1a或#2d2d2d深蓝#0f172a或#1e293b黑色#000000浅色系#f8fafc原版、#f1f5f9、#ffffff3.3 修改圆点网格背景如果你喜欢圆点网格效果但想调整它的样式调整圆点颜色修改background-image中的rgba值最后一个参数是透明度0.05是很淡的点0.1会明显一些颜色可以调整rgba(255, 255, 255, 0.1)是白色圆点适合深色背景/* 深色背景上的白色圆点 */ body { background-color: #1a1a1a; background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.1) 1px, transparent 0); background-size: 40px 40px; }调整圆点间距修改background-size的值40px 40px圆点间距40像素30px 30px间距更小圆点更密集50px 50px间距更大圆点更稀疏调整圆点大小修改radial-gradient中的圆点半径1px圆点半径为1像素2px圆点更大修改后可能需要同时调整background-size3.4 使用渐变背景或图片背景如果你想要更复杂的背景/* 线性渐变背景 */ body { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); } /* 或者使用图片背景 */ body { background-image: url(https://example.com/your-background.jpg); background-size: cover; background-attachment: fixed; }注意使用图片背景时要确保文字可读性。可以在背景上加一个半透明遮罩body::before { content: ; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.5); /* 黑色半透明遮罩 */ z-index: -1; }4. 自定义聊天气泡样式聊天气泡是对话界面的核心修改气泡样式能让界面风格大变样。4.1 理解气泡的CSS结构在CSS代码中气泡样式主要分为两部分/* 用户气泡右侧 */ .stChatMessage:has(.user-mark) .stChatMessageContent { background-color: var(--user-bubble-bg); /* 背景色 */ color: var(--user-text-color); /* 文字颜色 */ border-radius: 18px 18px 4px 18px; /* 圆角左上 右上 右下 左下 */ /* ... 其他样式 ... */ } /* AI气泡左侧 */ .stChatMessage:not(:has(.user-mark)) .stChatMessageContent { background-color: var(--ai-bubble-bg); /* 背景色 */ color: var(--ai-text-color); /* 文字颜色 */ border-radius: 18px 18px 18px 4px; /* 圆角左上 右上 右下 左下 */ box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08); /* 阴影 */ /* ... 其他样式 ... */ }4.2 修改气泡颜色最直接的修改就是换颜色修改颜色变量推荐在:root部分修改变量这样所有相关颜色会一起改变:root { /* 用户气泡颜色 */ --user-bubble-bg: #4A90E2; /* 蓝色 */ --user-text-color: #FFFFFF; /* 白色文字 */ /* AI气泡颜色 */ --ai-bubble-bg: #F0F4F8; /* 浅灰色 */ --ai-text-color: #1A202C; /* 深灰色文字 */ /* 或者尝试其他配色方案 */ /* --user-bubble-bg: #10B981; 绿色 */ /* --ai-bubble-bg: #FEF3C7; 浅黄色 */ }直接修改样式也可以直接修改气泡的CSS规则/* 用户气泡改为绿色 */ .stChatMessage:has(.user-mark) .stChatMessageContent { background-color: #10B981; color: white; } /* AI气泡改为浅黄色 */ .stChatMessage:not(:has(.user-mark)) .stChatMessageContent { background-color: #FEF3C7; color: #1A202C; }配色建议用户气泡通常用亮色、品牌色AI气泡通常用中性色、浅色确保文字颜色和背景色有足够对比度方便阅读4.3 调整气泡圆角圆角大小影响气泡的“柔软”程度/* 小圆角更方正 */ border-radius: 8px; /* 中等圆角默认 */ border-radius: 18px 18px 4px 18px; /* 用户气泡 */ border-radius: 18px 18px 18px 4px; /* AI气泡 */ /* 大圆角更圆润 */ border-radius: 24px; /* 完全圆形如果气泡接近正方形 */ border-radius: 50%;四个值的含义border-radius: 左上 右上 右下 左下;用户气泡18px 18px 4px 18px意思是右下角小圆角其他角大圆角AI气泡18px 18px 18px 4px意思是左下角小圆角其他角大圆角这种不对称设计模仿了手机聊天软件的气泡样式。4.4 添加或修改阴影效果阴影能让气泡有“浮起来”的感觉/* 轻微阴影默认 */ box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08); /* 更明显的阴影 */ box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); /* 内阴影效果 */ box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1); /* 多重阴影 */ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 4px 20px rgba(0, 0, 0, 0.05); /* 无阴影 */ box-shadow: none;阴影参数解释0水平偏移0表示不偏移2px垂直偏移向下2像素12px模糊半径值越大越模糊rgba(0, 0, 0, 0.08)阴影颜色和透明度黑色8%透明度4.5 调整气泡内边距和最大宽度让气泡内的文字排版更舒服.stChatMessage:has(.user-mark) .stChatMessageContent, .stChatMessage:not(:has(.user-mark)) .stChatMessageContent { /* 内边距上 右 下 左 */ padding: 12px 16px; /* 最大宽度避免气泡过宽 */ max-width: 70%; /* 文字行高 */ line-height: 1.5; /* 文字大小 */ font-size: 15px; }建议值padding: 12px 16px;上下12像素左右16像素的内边距max-width: 70%;气泡最大宽度为容器宽度的70%用户气泡和AI气泡可以设置不同的最大宽度形成对比5. 其他实用样式调整除了背景和气泡还有一些细节调整能让界面更完美。5.1 修改输入框样式输入框在页面底部修改它的样式/* 找到输入框的样式可能在CSS靠后的位置 */ .stTextInputdivdivinput { background-color: rgba(255, 255, 255, 0.9); border: 1px solid #E2E8F0; border-radius: 24px; /* 药丸形状 */ padding: 12px 20px; font-size: 15px; } /* 输入框获得焦点时的样式 */ .stTextInputdivdivinput:focus { border-color: var(--primary-color); box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.1); outline: none; }5.2 修改按钮样式清空记录按钮在右上角/* 找到按钮样式 */ .stButtonbutton { background-color: var(--primary-color); color: white; border: none; border-radius: 6px; padding: 8px 16px; font-weight: 500; } /* 鼠标悬停效果 */ .stButtonbutton:hover { background-color: #3a7bc8; /* 稍深的颜色 */ transform: translateY(-1px); transition: all 0.2s; }5.3 添加动画效果让界面交互更流畅/* 气泡出现动画 */ keyframes fadeInUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .stChatMessage { animation: fadeInUp 0.3s ease-out; } /* 流式输出时的光标闪烁效果 */ keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } .streaming-cursor::after { content: |; animation: blink 1s infinite; font-weight: bold; }5.4 调整整体布局和间距/* 主容器样式 */ .main .block-container { padding-top: 2rem; padding-bottom: 6rem; /* 给底部输入框留空间 */ max-width: 800px; /* 限制最大宽度 */ margin: 0 auto; /* 居中 */ } /* 消息之间的间距 */ .stChatMessage { margin-bottom: 1rem; } /* 滚动条样式深色模式时可能需要 */ ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.05); border-radius: 4px; } ::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.2); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, 0.3); }6. 完整示例打造深色模式界面让我们把所有的修改整合起来创建一个完整的深色模式主题:root { /* 深色主题颜色变量 */ --background-color: #0f172a; --text-color: #e2e8f0; --primary-color: #60a5fa; /* 气泡颜色 */ --user-bubble-bg: #3b82f6; --user-text-color: #ffffff; --ai-bubble-bg: #1e293b; --ai-text-color: #e2e8f0; /* 输入框和按钮 */ --input-bg: rgba(30, 41, 59, 0.8); --input-border: #475569; --button-bg: #3b82f6; --button-hover: #2563eb; } /* 应用样式 */ body { background-color: var(--background-color); background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.05) 1px, transparent 0); background-size: 40px 40px; color: var(--text-color); margin: 0; padding: 20px; min-height: 100vh; font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif; } /* 用户气泡 */ .stChatMessage:has(.user-mark) .stChatMessageContent { background-color: var(--user-bubble-bg); color: var(--user-text-color); border-radius: 18px 18px 4px 18px; padding: 12px 16px; max-width: 70%; margin-left: auto; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); } /* AI气泡 */ .stChatMessage:not(:has(.user-mark)) .stChatMessageContent { background-color: var(--ai-bubble-bg); color: var(--ai-text-color); border-radius: 18px 18px 18px 4px; padding: 12px 16px; max-width: 70%; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); border: 1px solid rgba(255, 255, 255, 0.1); } /* 输入框 */ .stTextInputdivdivinput { background-color: var(--input-bg); border: 1px solid var(--input-border); border-radius: 24px; padding: 14px 20px; font-size: 15px; color: var(--text-color); } .stTextInputdivdivinput:focus { border-color: var(--primary-color); box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.2); outline: none; } /* 按钮 */ .stButtonbutton { background-color: var(--button-bg); color: white; border: none; border-radius: 8px; padding: 8px 20px; font-weight: 500; transition: all 0.2s; } .stButtonbutton:hover { background-color: var(--button-hover); transform: translateY(-1px); } /* 滚动条 */ ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.05); border-radius: 4px; } ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.2); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.3); }把这段CSS替换掉原来的样式代码刷新页面你就会看到一个全新的深色模式界面。7. 调试技巧和常见问题7.1 如何调试CSS浏览器开发者工具按F12打开在Elements面板查看元素的CSS样式实时修改测试在开发者工具的Styles面板直接修改CSS立即看到效果复制生效的样式找到生效的CSS选择器复制到你的代码中7.2 修改后没生效可能的原因和解决方法缓存问题Streamlit有缓存尝试# 清除Streamlit缓存 rm -rf ~/.streamlit/cache # 或者重启Streamlit服务CSS选择器不对用浏览器开发者工具检查元素的实际class样式被覆盖确保你的CSS在Streamlit默认样式之后加载或者使用!importantbackground-color: #ff0000 !important;7.3 样式冲突怎么办如果修改一个样式影响了其他地方使用更具体的选择器比如不只是.stChatMessageContent而是.stChatMessage:has(.user-mark) .stChatMessageContent缩小影响范围只修改特定元素的样式而不是全局样式使用CSS变量修改变量值而不是直接修改样式规则7.4 想要更复杂的修改如果你需要更复杂的界面定制学习基础CSS了解盒模型、Flex布局、Grid布局等参考Streamlit文档了解Streamlit生成的HTML结构查看社区主题GitHub上有一些Streamlit主题项目可以参考8. 总结通过这篇文章你应该已经掌握了Nanbeige 4.1-3B Streamlit WebUI的样式定制方法。让我们回顾一下关键点核心思路这个WebUI的所有样式都通过CSS注入实现修改app.py中的CSS代码就能改变界面外观。修改背景找到body样式修改background-color换纯色调整background-image和background-size改变圆点网格可以尝试渐变、图片等更复杂的背景修改气泡用户气泡和AI气泡通过不同的CSS选择器区分修改颜色、圆角、阴影、内边距等属性使用CSS变量方便统一管理颜色其他调整输入框、按钮、滚动条等细节样式添加动画效果提升体验调整布局和间距实用建议先备份原文件再开始修改使用浏览器开发者工具调试一次只修改一个地方测试效果深色模式注意文字对比度现在你可以根据自己的喜好打造独一无二的对话界面了。无论是为了品牌统一还是个人审美或是更好的使用体验界面定制都能让你的AI对话工具更加贴心好用。记住好的界面不只是好看更是好用。在修改样式时始终以用户体验为中心文字要清晰易读操作要直观方便风格要一致协调。获取更多AI镜像想探索更多AI镜像和应用场景访问 CSDN星图镜像广场提供丰富的预置镜像覆盖大模型推理、图像生成、视频生成、模型微调等多个领域支持一键部署。