Nanbeige 4.1-3B Streamlit WebUI实战教程自定义CSS修改气泡颜色与间距你是不是已经用上了那个界面超酷的Nanbeige 4.1-3B Streamlit WebUI那个像手机聊天软件一样的界面确实让人眼前一亮。但用久了之后你可能会想这个气泡颜色能不能换成我喜欢的气泡之间的间距能不能再大一点看着更舒服今天我就来手把手教你怎么通过修改CSS把这个WebUI的聊天气泡变成你想要的样子。不需要懂前端框架不需要复杂的配置只需要改几行代码就能让你的对话界面焕然一新。1. 先看看我们能改什么在开始动手之前我们先明确一下目标。这个WebUI的界面主要由几个部分组成每个部分都可以通过CSS来调整聊天气泡包括用户气泡和AI气泡可以改颜色、圆角、阴影、内边距气泡间距气泡之间的垂直距离让对话看起来更宽松背景样式那个很酷的浅灰蓝波点背景可以换成其他颜色或图案输入框悬浮的药丸状输入框可以调整大小、颜色、位置按钮样式清空记录按钮和其他操作按钮的外观最重要的是所有这些修改都只需要在一个地方完成——就是那个神奇的CSS代码块。你甚至不需要知道CSS的所有细节只需要知道要改哪里、怎么改就行。2. 找到CSS代码的位置首先你需要打开项目中的app.py文件。这个文件包含了所有的界面代码和样式定义。CSS代码通常放在文件的顶部或者中间部分用st.markdown()函数包裹着并且带有style标签。在这个Nanbeige WebUI项目中CSS代码大概在文件的中部位置。你可以用文本编辑器比如VS Code、Sublime Text甚至记事本打开app.py然后搜索style这个关键词。通常你会找到类似下面这样的代码块st.markdown( style /* 这里就是所有的CSS样式代码 */ :root { --primary-color: #4A90E2; --user-bubble: #4A90E2; --ai-bubble: #FFFFFF; /* 更多颜色定义... */ } /* 聊天气泡样式 */ .stChatMessage { /* 气泡容器样式 */ } /* 更多样式规则... */ /style , unsafe_allow_htmlTrue)找到这个style标签里面的内容就是我们接下来要修改的地方。别担心我会告诉你每一部分是干什么的以及怎么安全地修改。3. 修改聊天气泡颜色气泡颜色可能是你最想改的部分。默认的用户气泡是天蓝色AI气泡是白色。让我们看看怎么把它们换成你喜欢的颜色。3.1 理解颜色变量在这个CSS代码的开头你会看到一些以--开头的定义这些叫做CSS变量。它们就像编程中的变量一样定义了一次可以在多个地方使用。:root { --primary-color: #4A90E2; /* 主色调天蓝色 */ --user-bubble: #4A90E2; /* 用户气泡颜色 */ --ai-bubble: #FFFFFF; /* AI气泡颜色白色 */ --user-text: #FFFFFF; /* 用户气泡内文字颜色 */ --ai-text: #333333; /* AI气泡内文字颜色 */ --background: #F5F9FF; /* 背景主色 */ --dot-color: rgba(74, 144, 226, 0.1); /* 波点颜色 */ }:root表示这些变量在整个页面中都有效。#4A90E2这种格式是十六进制颜色代码#FFFFFF是白色#333333是深灰色。3.2 修改用户气泡颜色假设你想把用户气泡从蓝色改成绿色只需要修改--user-bubble这个变量的值。把原来的--user-bubble: #4A90E2;改成你喜欢的颜色比如--user-bubble: #34C759; /* 苹果绿 */或者--user-bubble: #FF9500; /* 橙色 */如果你不知道颜色代码可以去网上搜颜色代码表或者颜色选择器找到喜欢的颜色后复制它的十六进制代码。3.3 修改AI气泡颜色AI气泡默认是白色你可能想给它加一点淡淡的背景色让界面更有层次感。把原来的--ai-bubble: #FFFFFF;改成--ai-bubble: #F8F9FA; /* 非常浅的灰色 */或者如果你想要更明显的颜色--ai-bubble: #FFF8E1; /* 浅黄色 */3.4 修改文字颜色改了气泡颜色后可能需要调整文字颜色以确保可读性。深色背景上要用浅色文字浅色背景上要用深色文字。如果你把用户气泡改成了深色记得检查文字颜色--user-text: #FFFFFF; /* 白色文字在深色背景上清晰 */如果你把AI气泡改成了深色需要修改--ai-text: #FFFFFF; /* 白色文字如果AI气泡是深色 */3.5 实际效果预览修改后保存文件然后重新启动Streamlit服务streamlit run app.py刷新浏览器页面你就能看到新的气泡颜色了。如果不满意可以继续调整直到找到喜欢的配色。4. 调整气泡间距和大小默认的气泡间距可能对有些人来说太紧凑了。让我们看看怎么调整气泡的大小和间距让对话看起来更舒服。4.1 找到气泡样式规则在CSS代码中搜索.stChatMessage这是Streamlit聊天消息的容器类。你会找到类似下面的代码.stChatMessage { padding: 16px; border-radius: 18px; margin-bottom: 12px; max-width: 85%; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); }让我们分解一下每个属性的作用padding: 16px;- 气泡内部内容与边框的距离border-radius: 18px;- 气泡圆角的大小值越大越圆margin-bottom: 12px;- 气泡底部的外边距就是气泡之间的垂直间距max-width: 85%;- 气泡最大宽度占容器的85%box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);- 气泡阴影效果4.2 增加气泡间距如果你想增加气泡之间的垂直距离修改margin-bottom的值.stChatMessage { margin-bottom: 20px; /* 从12px增加到20px */ }这个值越大气泡之间的距离就越大。你可以尝试不同的值比如16px、20px、24px看看哪个最舒服。4.3 调整气泡大小如果你觉得气泡太大或太小可以调整这几个值.stChatMessage { padding: 20px; /* 增加内部间距气泡会变大 */ max-width: 80%; /* 减小最大宽度气泡会变窄 */ border-radius: 22px; /* 增加圆角气泡更圆润 */ }padding控制气泡内部的空间值越大气泡看起来越胖max-width控制气泡的最大宽度值越小气泡越窄border-radius控制圆角值越大角越圆4.4 区分用户和AI气泡的样式你可能想给用户和AI气泡设置不同的间距或大小。CSS代码中应该有专门针对用户和AI气泡的规则/* 用户气泡 - 右侧 */ .stChatMessage:has(div:has( div .stChatMessageContent:has( div:has(.user-mark)))) { /* 用户气泡的特殊样式 */ margin-left: auto; background-color: var(--user-bubble); color: var(--user-text); } /* AI气泡 - 左侧 */ .stChatMessage:not(:has(div:has( div .stChatMessageContent:has( div:has(.user-mark)))) { /* AI气泡的特殊样式 */ background-color: var(--ai-bubble); color: var(--ai-text); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05); }你可以在这里为两种气泡设置不同的间距/* 用户气泡 */ .stChatMessage:has(div:has( div .stChatMessageContent:has( div:has(.user-mark)))) { margin-bottom: 24px; /* 用户气泡下方间距更大 */ } /* AI气泡 */ .stChatMessage:not(:has(div:has( div .stChatMessageContent:has( div:has(.user-mark)))) { margin-bottom: 16px; /* AI气泡下方间距稍小 */ }这样用户气泡和AI气泡之间就有不同的间距了。5. 修改背景样式那个浅灰蓝波点背景很酷但你可能想换成其他风格。让我们看看怎么修改背景。5.1 找到背景样式搜索background相关的CSS规则body { background-color: var(--background); background-image: radial-gradient(var(--dot-color) 2px, transparent 2px), radial-gradient(var(--dot-color) 2px, transparent 2px); background-size: 40px 40px; background-position: 0 0, 20px 20px; }这是创建波点背景的关键代码。它用了两个径向渐变重叠形成了点阵效果。5.2 修改背景颜色如果你想换一个背景色修改--background变量:root { --background: #F0F8FF; /* 爱丽丝蓝更浅的蓝色 */ }或者换成完全不同的颜色--background: #FFF5F5; /* 浅粉色 */ --background: #F0FFF0; /* 蜜瓜绿 */ --background: #FAFAFA; /* 接近白色的浅灰 */5.3 修改波点样式波点的颜色、大小和间距都可以调整body { background-image: radial-gradient(var(--dot-color) 3px, transparent 3px), /* 点的大小从2px改为3px */ radial-gradient(var(--dot-color) 3px, transparent 3px); background-size: 50px 50px; /* 点阵间距从40px改为50px */ background-position: 0 0, 25px 25px; /* 对应调整 */ }修改--dot-color可以改变波点颜色:root { --dot-color: rgba(52, 199, 89, 0.1); /* 半透明的绿色波点 */ }rgba中的最后一个值0.1是透明度值越小越透明越大越明显。5.4 换成其他背景图案如果你不想要波点想要其他背景可以替换整个background-image。比如换成网格body { background-color: var(--background); background-image: linear-gradient(var(--dot-color) 1px, transparent 1px), linear-gradient(90deg, var(--dot-color) 1px, transparent 1px); background-size: 30px 30px; }或者简单的纯色body { background-color: var(--background); background-image: none; /* 去掉背景图案 */ }6. 自定义输入框和按钮输入框和按钮是界面的重要组成部分也可以根据你的喜好调整。6.1 修改输入框样式搜索stTextInput或input相关的CSS/* 输入框容器 */ .stTextInput div div { background: white; border-radius: 24px; border: 1px solid #E0E0E0; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); } /* 输入框本身 */ .stTextInput input { border: none; background: transparent; }你可以这样修改.stTextInput div div { background: #FFFFFF; /* 背景色 */ border-radius: 28px; /* 更圆的药丸形状 */ border: 2px solid var(--primary-color); /* 边框用主色调 */ box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12); /* 更强的阴影 */ } .stTextInput input { color: #333333; /* 输入文字颜色 */ font-size: 16px; /* 文字大小 */ }6.2 修改按钮样式搜索stButton相关的CSS/* 按钮样式 */ .stButton button { background-color: var(--primary-color); color: white; border: none; border-radius: 8px; padding: 8px 16px; font-weight: 500; }调整按钮外观.stButton button { background-color: var(--primary-color); color: white; border: none; border-radius: 12px; /* 更圆的按钮 */ padding: 10px 20px; /* 更大的内边距 */ font-weight: 600; /* 更粗的文字 */ transition: all 0.2s; /* 添加过渡动画 */ } /* 鼠标悬停效果 */ .stButton button:hover { background-color: #3A80D2; /* 悬停时稍深的颜色 */ transform: translateY(-2px); /* 轻微上浮效果 */ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); }7. 完整修改示例下面是一个完整的修改示例把界面改成绿色主题:root { --primary-color: #34C759; /* 主色调改为绿色 */ --user-bubble: #34C759; /* 用户气泡绿色 */ --ai-bubble: #F8F9FA; /* AI气泡浅灰色 */ --user-text: #FFFFFF; /* 用户气泡白色文字 */ --ai-text: #333333; /* AI气泡深灰色文字 */ --background: #F0FFF0; /* 背景改为蜜瓜绿 */ --dot-color: rgba(52, 199, 89, 0.08); /* 绿色半透明波点 */ } /* 增加气泡间距 */ .stChatMessage { padding: 18px; border-radius: 20px; margin-bottom: 20px; /* 增加间距 */ max-width: 82%; /* 稍微调窄 */ box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08); } /* 用户气泡特殊样式 */ .stChatMessage:has(div:has( div .stChatMessageContent:has( div:has(.user-mark)))) { margin-bottom: 24px; /* 用户气泡间距更大 */ } /* 输入框样式调整 */ .stTextInput div div { background: white; border-radius: 26px; border: 2px solid var(--primary-color); /* 绿色边框 */ box-shadow: 0 5px 15px rgba(52, 199, 89, 0.15); /* 绿色调阴影 */ } /* 按钮样式调整 */ .stButton button { background-color: var(--primary-color); border-radius: 12px; padding: 10px 22px; font-weight: 600; }8. 调试技巧和常见问题修改CSS时可能会遇到一些问题这里有一些调试技巧8.1 修改不生效怎么办检查语法错误CSS对语法很严格少一个分号或括号都可能导致整个样式失效清除浏览器缓存按CtrlF5强制刷新页面或者打开开发者工具F12在Network标签下勾选Disable cache检查选择器确保你修改的是正确的CSS选择器查看Streamlit日志运行streamlit run app.py的终端会显示错误信息8.2 如何快速预览效果使用浏览器开发者工具按F12打开在Elements标签下找到对应的元素在Styles面板中直接修改CSS可以实时看到效果修改后实时生效Streamlit支持热重载保存app.py后页面会自动刷新分段测试一次只修改一个地方确认效果后再修改下一个8.3 常见问题解决问题气泡对齐乱了原因可能修改了包含:has()选择器的规则解决尽量不要修改那些复杂的选择器只修改颜色、间距等样式属性问题文字看不清原因背景色和文字颜色对比度不够解决确保深色背景配浅色文字浅色背景配深色文字问题界面变形或错位原因可能修改了布局相关的属性如display、position等解决恢复原来的布局属性只修改颜色、大小、间距等外观属性9. 总结通过这篇教程你应该已经掌握了如何自定义Nanbeige 4.1-3B Streamlit WebUI的界面样式。我们主要学习了找到CSS代码位置在app.py文件的style标签内修改气泡颜色通过调整CSS变量如--user-bubble和--ai-bubble调整气泡间距和大小修改margin-bottom、padding、border-radius等属性自定义背景样式更换背景颜色、波点样式或整个背景图案美化输入框和按钮让整个界面的视觉风格统一最重要的是这些修改都不需要你成为前端专家。CSS看起来复杂但实际修改起来就像填色游戏一样简单——找到要改的地方换上喜欢的颜色或数值保存刷新就能看到效果。你可以根据自己的喜好创造出独一无二的对话界面。比如深色模式深色背景配亮色文字粉色主题适合喜欢可爱风格的用户专业风格简洁的灰白配色适合工作场景节日主题根据节日更换配色比如春节用红色系记住修改前最好备份原来的CSS代码这样如果改乱了可以随时恢复。多尝试不同的配色和间距找到最适合你眼睛和心情的组合。现在就去试试吧让你的Nanbeige WebUI变成真正属于你的样子获取更多AI镜像想探索更多AI镜像和应用场景访问 CSDN星图镜像广场提供丰富的预置镜像覆盖大模型推理、图像生成、视频生成、模型微调等多个领域支持一键部署。