Streamlit主题定制：DeepSeek-R1-Distill-Qwen-1.5B适配企业VI色系与品牌标识方案

马屿人

892人浏览 · 2026-04-09 04:39:52

马屿人 · 2026-04-09 04:39:52 发布

Streamlit主题定制：DeepSeek-R1-Distill-Qwen-1.5B适配企业VI色系与品牌标识方案

1. 引言：为什么你的AI助手也需要“品牌皮肤”？

想象一下，你为公司内部部署了一个强大的本地AI对话助手，它基于DeepSeek-R1-Distill-Qwen-1.5B模型，推理能力强，响应速度快，数据绝对安全。但当员工打开这个工具时，看到的却是一个“素颜”的默认界面——白色的背景，蓝色的按钮，和公司官网、内部系统格格不入的设计风格。

这就像给员工配了一台性能顶级的电脑，却装了一个满是广告弹窗的操作系统。功能虽好，体验却打了折扣。

今天我要分享的，就是如何为你已经部署好的DeepSeek-R1-Distill-Qwen-1.5B智能对话助手，量身定制一套符合企业VI（视觉识别系统）的主题界面。这不是简单的“换肤”，而是从颜色、字体、布局到交互细节的全面品牌化改造。

核心价值很简单：让技术工具不再冰冷，让AI助手真正融入企业的工作环境，提升使用体验，强化品牌认知。

2. 理解Streamlit的主题定制能力

在开始动手之前，我们先要搞清楚Streamlit能让我们“改”什么。很多人以为主题定制就是换个颜色，其实远不止于此。

2.1 Streamlit主题系统的三个层次

Streamlit的主题系统分为三个可定制层次，理解这个结构，你才能知道从哪里下手：

第一层：全局主题配置 这是最基础的设置，通过st.set_page_config和主题配置文件来调整。主要包括：

页面标题和图标
布局模式（宽屏/窄屏）
侧边栏状态（展开/折叠）
基础颜色主题（浅色/深色）

第二层：CSS样式覆盖 这是定制的主力军。Streamlit允许我们通过自定义CSS来覆盖几乎所有元素的样式：

颜色体系（主色、辅色、背景色、文字色）
字体家族（中英文字体、字号、字重）
间距和边距（内边距、外边距、行高）
边框和圆角（按钮、输入框、卡片）

第三层：组件级微调 针对特定组件进行精细调整：

聊天气泡的样式和动画
按钮的悬停和点击效果
输入框的焦点状态
侧边栏的交互细节

2.2 企业VI适配的关键要素

当我们说要“适配企业VI”时，具体要适配哪些东西？我总结为以下五个核心要素：

品牌主色：企业Logo和宣传材料中的主导颜色
辅助色系：与主色搭配使用的颜色组合
字体规范：中英文标准字体、字号层级
图标系统：企业专用的图标风格
间距规范：页面元素之间的标准距离

举个例子，如果你的企业VI主色是深蓝色（#1E3A8A），那么你的AI助手界面就应该以这个蓝色作为主要交互色——按钮、链接、高亮文本都用这个蓝色，而不是Streamlit默认的天蓝色。

3. 实战：为DeepSeek助手定制企业级主题

现在我们来实际操作。假设我们要为一家科技公司定制主题，他们的VI规范如下：

主色：科技蓝 #2563EB
辅色：活力橙 #F97316
字体：思源黑体（中文），Inter（英文）
圆角：8px
阴影：轻度阴影提升层次感

3.1 第一步：创建主题配置文件

在项目根目录下创建.streamlit文件夹，然后在里面创建config.toml文件：

# .streamlit/config.toml
[theme]
primaryColor = "#2563EB"  # 品牌主色 - 科技蓝
backgroundColor = "#FFFFFF"  # 背景色 - 纯白
secondaryBackgroundColor = "#F8FAFC"  # 次要背景 - 浅灰
textColor = "#1E293B"  # 主要文字 - 深灰
font = "sans serif"  # 使用自定义CSS覆盖具体字体

[server]
maxUploadSize = 200  # 文件上传大小限制（MB）

[browser]
gatherUsageStats = false  # 关闭使用统计

这个配置文件设置了基础的颜色主题。但要注意，config.toml能调整的样式有限，很多细节还需要CSS来完善。

3.2 第二步：编写企业级CSS样式

在.streamlit文件夹下创建style.css文件，这是主题定制的核心：

/* .streamlit/style.css */

/* 1. 全局字体设置 */
* {
    font-family: 'Inter', 'Source Han Sans CN', sans-serif;
}

/* 2. 主容器样式 */
.main {
    background-color: #FFFFFF;
    padding: 2rem;
}

/* 3. 侧边栏品牌化改造 */
section[data-testid="stSidebar"] {
    background-color: #F8FAFC;
    border-right: 1px solid #E2E8F0;
}

section[data-testid="stSidebar"] > div {
    padding-top: 2rem;
}

/* 4. 按钮样式 - 使用品牌主色 */
.stButton > button {
    background-color: #2563EB;
    color: white;
    border: none;
    border-radius: 8px;
    padding: 0.5rem 1.5rem;
    font-weight: 500;
    transition: all 0.2s ease;
}

.stButton > button:hover {
    background-color: #1D4ED8;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2);
}

/* 5. 输入框样式 */
.stTextInput > div > div > input {
    border: 2px solid #E2E8F0;
    border-radius: 8px;
    padding: 0.75rem;
    font-size: 1rem;
}

.stTextInput > div > div > input:focus {
    border-color: #2563EB;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
    outline: none;
}

/* 6. 聊天消息气泡定制 */
.stChatMessage {
    padding: 1rem;
    border-radius: 12px;
    margin-bottom: 1rem;
    max-width: 85%;
}

/* 用户消息 - 使用品牌辅色 */
.stChatMessage[data-testid="user"] {
    background-color: #FEF3C7;
    border-left: 4px solid #F97316;
    margin-left: auto;
}

/* AI消息 - 使用品牌主色渐变 */
.stChatMessage[data-testid="assistant"] {
    background: linear-gradient(135deg, #F0F9FF 0%, #E0F2FE 100%);
    border-left: 4px solid #2563EB;
    margin-right: auto;
}

/* 7. 思考过程标签样式 */
.thinking-process {
    background-color: #F1F5F9;
    border-left: 3px solid #94A3B8;
    padding: 0.75rem;
    margin: 0.5rem 0;
    border-radius: 6px;
    font-style: italic;
    color: #475569;
}

.final-answer {
    background-color: #FFFFFF;
    padding: 0.75rem;
    margin: 0.5rem 0;
    border-radius: 6px;
    border: 1px solid #E2E8F0;
}

/* 8. 标题和文字样式 */
h1, h2, h3 {
    color: #1E293B;
    font-weight: 600;
}

h1 {
    border-bottom: 3px solid #2563EB;
    padding-bottom: 0.5rem;
}

/* 9. 代码块样式 */
code {
    background-color: #F1F5F9;
    color: #DC2626;
    padding: 0.2rem 0.4rem;
    border-radius: 4px;
    font-family: 'Monaco', 'Consolas', monospace;
}

pre {
    background-color: #1E293B;
    color: #E2E8F0;
    padding: 1rem;
    border-radius: 8px;
    overflow-x: auto;
    border-left: 4px solid #2563EB;
}

/* 10. 响应式调整 */
@media (max-width: 768px) {
    .main {
        padding: 1rem;
    }
    
    .stChatMessage {
        max-width: 95%;
    }
}

3.3 第三步：在Streamlit应用中加载自定义样式

修改你的主应用文件（比如app.py），在开头加载CSS：

import streamlit as st
from pathlib import Path

# 设置页面配置 - 这里可以设置一些基础主题
st.set_page_config(
    page_title="企业AI助手 - 智能对话平台",
    page_icon="🤖",  # 可以替换为企业Logo
    layout="wide",
    initial_sidebar_state="expanded"
)

# 加载自定义CSS
def load_css():
    css_file = Path(__file__).parent / ".streamlit" / "style.css"
    with open(css_file) as f:
        st.markdown(f"<style>{f.read()}</style>", unsafe_allow_html=True)

# 在应用启动时加载CSS
load_css()

# 原有的模型加载和聊天逻辑保持不变
# ...

3.4 第四步：增强聊天界面的品牌元素

除了颜色和字体，我们还可以在聊天界面中加入更多的品牌元素。修改聊天消息的显示逻辑：

import streamlit as st
from datetime import datetime

# 自定义聊天消息显示函数
def display_message(role, content, avatar):
    """显示品牌化聊天消息"""
    
    # 解析思考过程和最终答案
    if "思考过程" in content and "最终答案" in content:
        # 分割内容
        parts = content.split("最终答案")
        thinking = parts[0].replace("思考过程：", "").strip()
        answer = "最终答案" + parts[1] if len(parts) > 1 else ""
        
        # 使用自定义容器显示
        with st.chat_message(role, avatar=avatar):
            # 思考过程 - 使用自定义样式
            st.markdown(
                f'<div class="thinking-process">💭 思考过程：{thinking}</div>',
                unsafe_allow_html=True
            )
            
            # 最终答案
            if answer:
                st.markdown(
                    f'<div class="final-answer">✅ {answer}</div>',
                    unsafe_allow_html=True
                )
    else:
        # 普通消息
        with st.chat_message(role, avatar=avatar):
            st.markdown(content)
    
    # 添加时间戳（企业级应用常用）
    current_time = datetime.now().strftime("%H:%M")
    st.caption(f"发送于 {current_time}")

# 在聊天循环中使用
for message in st.session_state.messages:
    avatar = "👤" if message["role"] == "user" else "🤖"
    display_message(message["role"], message["content"], avatar)

4. 高级定制：让主题“活”起来

基础的颜色和字体定制只是第一步。真正专业的企业级主题，还需要考虑交互细节和动态效果。

4.1 添加品牌交互动画

交互动画能让界面感觉更流畅、更专业。我们可以在CSS中添加一些微动画：

/* 添加到style.css中 */

/* 消息出现动画 */
@keyframes messageSlideIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.stChatMessage {
    animation: messageSlideIn 0.3s ease-out;
}

/* 加载状态指示器 - 使用品牌色 */
.stSpinner > div {
    border-color: #2563EB transparent transparent transparent;
}

/* 进度条样式 */
.stProgress > div > div {
    background-color: #2563EB;
}

/* 标签页激活状态 */
.stTabs [data-baseweb="tab-list"] {
    gap: 8px;
}

.stTabs [data-baseweb="tab"] {
    border-radius: 8px;
    padding: 0.5rem 1rem;
}

.stTabs [aria-selected="true"] {
    background-color: #2563EB;
    color: white;
}

4.2 实现主题切换功能

有些企业可能需要支持浅色/深色双模式。我们可以通过Streamlit的会话状态来实现：

import streamlit as st

# 主题切换功能
def init_theme():
    """初始化主题设置"""
    if "theme" not in st.session_state:
        st.session_state.theme = "light"  # 默认浅色主题
    
    # 在侧边栏添加主题切换
    with st.sidebar:
        st.markdown("---")
        st.markdown("### 🎨 主题设置")
        
        # 主题切换按钮
        col1, col2 = st.columns(2)
        with col1:
            if st.button("🌞 浅色", use_container_width=True):
                st.session_state.theme = "light"
                st.rerun()
        with col2:
            if st.button("🌙 深色", use_container_width=True):
                st.session_state.theme = "dark"
                st.rerun()

# 根据主题动态加载CSS
def load_theme_css(theme):
    """加载对应主题的CSS"""
    if theme == "dark":
        css_file = Path(__file__).parent / ".streamlit" / "style_dark.css"
    else:
        css_file = Path(__file__).parent / ".streamlit" / "style.css"
    
    with open(css_file) as f:
        st.markdown(f"<style>{f.read()}</style>", unsafe_allow_html=True)

# 在应用中使用
init_theme()
load_theme_css(st.session_state.theme)

然后创建对应的深色主题CSS文件（.streamlit/style_dark.css）：

/* 深色主题样式 */
.main {
    background-color: #0F172A;
    color: #E2E8F0;
}

section[data-testid="stSidebar"] {
    background-color: #1E293B;
    border-right: 1px solid #334155;
}

/* 调整深色主题下的文字颜色 */
h1, h2, h3, p, div {
    color: #E2E8F0;
}

/* 深色主题下的聊天气泡 */
.stChatMessage[data-testid="user"] {
    background-color: #334155;
    border-left: 4px solid #F97316;
}

.stChatMessage[data-testid="assistant"] {
    background: linear-gradient(135deg, #1E293B 0%, #0F172A 100%);
    border-left: 4px solid #60A5FA;
}

4.3 添加企业Logo和品牌水印

最后，我们可以在界面中添加企业的Logo和品牌标识：

import streamlit as st
from PIL import Image
import base64

def add_branding():
    """添加企业品牌元素"""
    
    # 方法1：使用Base64编码的Logo（简单，无需外部文件）
    logo_svg = """
    <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
        <rect width="40" height="40" rx="8" fill="#2563EB"/>
        <path d="M20 12L28 20L20 28L12 20L20 12Z" fill="white"/>
        <path d="M20 16L24 20L20 24L16 20L20 16Z" fill="#2563EB"/>
    </svg>
    """
    
    logo_b64 = base64.b64encode(logo_svg.encode()).decode()
    
    # 在侧边栏顶部添加Logo
    st.sidebar.markdown(
        f"""
        <div style="text-align: center; padding: 1rem 0;">
            <img src="data:image/svg+xml;base64,{logo_b64}" alt="企业Logo" style="margin-bottom: 0.5rem;">
            <h3 style="color: #2563EB; margin: 0;">企业AI助手</h3>
            <p style="color: #64748B; font-size: 0.9rem; margin: 0.25rem 0;">v2.0 · 基于DeepSeek-R1</p>
        </div>
        """,
        unsafe_allow_html=True
    )
    
    # 在页面底部添加品牌水印
    st.markdown(
        """
        <div style="position: fixed; bottom: 20px; right: 20px; opacity: 0.1; z-index: -1;">
            <div style="transform: rotate(-45deg); font-size: 48px; color: #2563EB; font-weight: bold;">
                企业专属AI
            </div>
        </div>
        """,
        unsafe_allow_html=True
    )

# 在侧边栏配置前调用
add_branding()