当前位置：首页 > news >正文

MusePublic Art Studio实操手册：自定义CSS美化Streamlit界面教程

news 2026/5/12 13:25:51

MusePublic Art Studio实操手册：自定义CSS美化Streamlit界面教程

1. 为什么需要美化Streamlit界面

Streamlit作为数据科学和AI应用的快速开发框架，默认界面虽然功能完整，但往往缺乏个性化和专业感。对于MusePublic Art Studio这样的创意工具来说，界面美观度直接影响用户体验和创作心情。

通过自定义CSS，我们可以：

提升整体视觉品质，让界面更符合艺术创作工具的定位
改善用户体验，让操作流程更加流畅自然
强化品牌识别度，形成独特的视觉风格
优化布局结构，让重要功能更加突出

2. 准备工作与环境配置

在开始美化之前，确保你已经具备以下条件：

2.1 基础要求

已部署MusePublic Art Studio并能够正常运行
了解基本的HTML/CSS概念
熟悉Streamlit的基本组件和布局方式

2.2 文件结构准备

在项目根目录创建以下结构：

musepublic/ ├── app.py ├── assets/ │ └── style.css └── ...其他文件

3. 核心美化技巧与实践

3.1 基础CSS注入方法

在Streamlit中注入CSS有三种主要方式：

# 方法1：直接注入CSS代码 st.markdown(""" <style> /* 你的CSS代码 */ </style> """, unsafe_allow_html=True) # 方法2：引用外部CSS文件 def inject_css(file_path): with open(file_path) as f: st.markdown(f'<style>{f.read()}</style>', unsafe_allow_html=True) # 方法3：使用st.html（需要Streamlit 1.25+） st.html("<style>/* CSS代码 */</style>")

推荐使用外部CSS文件的方式，便于维护和管理。

3.2 主要界面元素美化

3.2.1 整体布局优化

/* 基础布局调整 */ .main { background-color: #f8f9fa; padding: 2rem; } /* 侧边栏样式 */ .css-1d391kg { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; } /* 内容区域 */ .block-container { padding-top: 2rem; max-width: 1200px; }

3.2.2 按钮与交互元素美化

/* 主要按钮样式 */ .stButton > button { background: linear-gradient(45deg, #667eea, #764ba2); border: none; border-radius: 25px; color: white; font-weight: 600; padding: 12px 24px; transition: all 0.3s ease; } .stButton > button:hover { transform: translateY(-2px); box-shadow: 0 10px 20px rgba(0,0,0,0.2); } /* 输入框样式 */ .stTextInput > div > div > input { border-radius: 12px; border: 2px solid #e9ecef; padding: 12px 16px; } .stTextInput > div > div > input:focus { border-color: #667eea; box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1); }

3.2.3 图片展示区域优化

/* 生成图片的展示区域 */ .stImage { border-radius: 16px; box-shadow: 0 20px 40px rgba(0,0,0,0.1); margin: 2rem 0; transition: all 0.3s ease; } .stImage:hover { transform: scale(1.02); box-shadow: 0 25px 50px rgba(0,0,0,0.15); }

3.3 响应式设计适配

/* 移动端适配 */ @media (max-width: 768px) { .main { padding: 1rem; } .stButton > button { width: 100%; margin-bottom: 1rem; } .stTextInput > div > div > input { font-size: 16px; /* 防止iOS缩放 */ } }

4. 完整美化方案示例

下面是一个完整的CSS美化方案，可以直接用于MusePublic Art Studio：

/* assets/style.css */ /* 基础重置与字体 */ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; line-height: 1.6; color: #333; } /* 主容器 */ .main .block-container { padding: 2rem 1rem; max-width: 1400px; } /* 标题美化 */ h1 { color: #2c3e50; font-weight: 300; font-size: 2.5rem; margin-bottom: 2rem; text-align: center; } /* 卡片式设计 */ .css-1v0mbdj { background: white; border-radius: 20px; padding: 2rem; margin: 1rem 0; box-shadow: 0 10px 30px rgba(0,0,0,0.1); } /* 按钮组样式 */ .stButton > button { background: linear-gradient(45deg, #667eea, #764ba2); border: none; border-radius: 50px; color: white; font-weight: 600; padding: 15px 30px; font-size: 1.1rem; transition: all 0.3s ease; cursor: pointer; } .stButton > button:hover { transform: translateY(-3px); box-shadow: 0 15px 30px rgba(102, 126, 234, 0.3); } .stButton > button:active { transform: translateY(-1px); } /* 输入区域美化 */ .stTextInput > div > div > input { border-radius: 15px; border: 2px solid #e9ecef; padding: 15px 20px; font-size: 1rem; transition: all 0.3s ease; } .stTextInput > div > div > input:focus { border-color: #667eea; box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1); outline: none; } /* 图片展示优化 */ .stImage img { border-radius: 20px; box-shadow: 0 25px 50px rgba(0,0,0,0.15); transition: all 0.4s ease; } .stImage img:hover { transform: scale(1.03); box-shadow: 0 30px 60px rgba(0,0,0,0.2); } /* 进度条美化 */ .stProgress > div > div > div { background: linear-gradient(90deg, #667eea, #764ba2); } /* 折叠面板样式 */ .streamlit-expanderHeader { background: linear-gradient(135deg, #f8f9fa, #e9ecef); border-radius: 10px; padding: 1rem; font-weight: 600; color: #2c3e50; } /* 响应式设计 */ @media (max-width: 768px) { h1 { font-size: 2rem; } .stButton > button { width: 100%; padding: 12px 24px; } .css-1v0mbdj { padding: 1.5rem; margin: 0.5rem 0; } }

5. 在MusePublic中应用美化

在app.py中添加CSS注入代码：

import streamlit as st import os # 设置页面配置 st.set_page_config( page_title="MusePublic Art Studio", page_icon="🎨", layout="wide", initial_sidebar_state="expanded" ) # 注入CSS样式 def load_css(): css_path = os.path.join(os.path.dirname(__file__), 'assets', 'style.css') with open(css_path) as f: st.markdown(f'<style>{f.read()}</style>', unsafe_allow_html=True) # 应用样式 load_css() # 你的应用代码... st.title("🎨 MusePublic Art Studio") # 其他组件和逻辑...