streamlit美化

### Streamlit 应用的美化技巧与自定义样式 Streamlit 提供了多种方式来增强应用程序的视觉效果和用户体验。以下是关于如何对 Streamlit 应用进行美化的详细介绍： #### 1. **自定义主题设置** 从版本 0.79 开始，Streamlit 支持通过 `.streamlit/config.toml` 文件或其内置设置界面来自定义应用的主题[^1]。 用户可以在 `config.toml` 中配置诸如背景颜色、字体样式和其他全局属性等内容。例如： ```toml [theme] primaryColor="#ff4b4b" backgroundColor="#ffffff" secondaryBackgroundColor="#f0f2f6" textColor="#262626" font="sans serif" ``` 上述代码片段展示了如何修改主要颜色、背景颜色以及文字颜色等参数。 --- #### 2. **使用 CSS 样式** 为了进一步优化 UI 设计，可以直接嵌入 HTML 和 CSS 来实现更复杂的布局和样式调整。Streamlit 提供了一个组件 `st.markdown()` 可用于注入原始 HTML/CSS 内容。例如： ```python import streamlit as st # 添加自定义 CSS def add_custom_css(): custom_css = """ <style> h1, .css-1v3fvcr { color: #FF5733; font-family: 'Arial', sans-serif; } body { background-color: #F8F8F8 !important; } button { border-radius: 10px !important; } </style> """ st.markdown(custom_css, unsafe_allow_html=True) add_custom_css() ``` 这段脚本实现了标题的颜色变化、按钮样式的圆角处理等功能[^2]。 --- #### 3. **引入第三方扩展工具** 对于更加高级的需求，可以利用社区开发的一些插件，比如 `streamlit-hover-tabs`。该工具提供了现代化的导航栏功能，能够显著改善用户的操作体验。具体来说，它可以做到以下几点： - **悬浮交互**：当鼠标悬停时显示选项卡。 - **图标自定义**：支持 Google Fonts 图标库中的任意图形作为标签标志。 - **CSS 深度定制**：允许开发者自由设定配色方案、字体尺寸以及其他动态特效。 安装方法如下所示： ```bash pip install streamlit-hover-tabs ``` 随后在 Python 脚本里调用此模块即可创建美观大方的多页结构。 --- #### 4. **图文混排与内容丰富化** 除了技术层面的设计外，合理安排页面上的信息也至关重要。如果想向用户提供详尽的文字说明配合相应的图像素材，则可参考官方指南[^3]。下面是一个简单的例子演示怎样组合段落叙述同图表一起呈现给访问者查看： ```python import streamlit as st st.title("欢迎来到我们的智能问答知识库") with st.container(): col1, col2 = st.columns([2, 1]) with col1: st.write(""" ### 智能问答知识库简介 我们的系统基于自然语言处理技术和机器学习模型构建而成， 它可以从海量数据源提取有用的知识点，并将其整理成易于检索的形式。 此外还具备强大的语义理解能力，从而确保每次查询都能获得精准的结果反馈。 """) with col2: st.image('architecture_diagram.png', caption='智能问答知识库架构图') ``` 这里采用了两列布局分别放置描述性的文案和代表系统的框架示意照片。 ---