cv_unet_image-colorization实战教程：自定义CSS美化Streamlit界面方法

cv_unet_image-colorization实战教程自定义CSS美化Streamlit界面方法1. 项目简介与美化动机基于UNet 架构深度学习模型开发的本地化图像上色工具本身已经具备了强大的核心功能。它能精准识别黑白图像中的物体特征、自然场景及人物服饰并自动填充自然、和谐的色彩。通过 Streamlit 构建的简洁交互界面支持一键上传修复、实时对比预览及高清结果下载。然而默认的 Streamlit 界面风格相对朴素。为了让这个强大的工具在视觉上更专业、更符合品牌调性或者仅仅是让它看起来更“酷”我们可以通过自定义 CSS 来彻底改变它的外观。本教程将手把手教你如何为这个图像上色工具“换肤”从布局、颜色到字体打造一个独一无二的交互界面。2. 环境准备与基础代码回顾在开始美化之前我们需要确保基础环境已经就绪并理解现有应用的结构。2.1 环境依赖确认确保你的环境中已经安装了必要的库pip install modelscope opencv-python torch streamlit pillow numpy2.2 原始应用核心代码结构了解我们即将美化的对象是关键。以下是工具的核心代码框架简化版import streamlit as st from modelscope.pipelines import pipeline from modelscope.utils.constant import Tasks import cv2 from PIL import Image import numpy as np # 初始化模型使用缓存提高性能 st.cache_resource def load_model(): return pipeline(Tasks.image_colorization, model/root/ai-models/iic/cv_unet_image-colorization) def main(): st.title( 旧照片修复AI 智能图像上色工具) # 侧边栏 - 文件上传 with st.sidebar: st.header(上传图片) uploaded_file st.file_uploader(选择黑白图片, type[jpg, jpeg, png]) if st.button(清除缓存): st.cache_resource.clear() # 主界面 if uploaded_file is not None: col1, col2 st.columns(2) with col1: st.subheader(原始黑白图) original_image Image.open(uploaded_file) st.image(original_image, use_column_widthTrue) with col2: st.subheader(AI上色结果) if st.button(✨ 开始上色): with st.spinner(AI正在为图片上色...): # 调用模型进行上色 colorizer load_model() result colorizer(np.array(original_image)) colored_img result[output_img] st.image(colored_img, use_column_widthTrue) # 提供下载 result_pil Image.fromarray(colored_img) st.download_button( label 下载彩色图片, dataresult_pil.tobytes(), file_namecolored_image.png, mimeimage/png ) if __name__ __main__: main()3. Streamlit自定义CSS基础Streamlit 允许我们通过st.markdown配合 HTML 样式标签来注入自定义 CSS。这是美化界面的核心方法。3.1 如何注入CSS到Streamlit在 Streamlit 应用的顶部最好在设置页面配置之后添加以下代码来注入自定义样式# 在main()函数开始处添加 def main(): # 注入自定义CSS st.markdown( style /* 这里写你的CSS代码 */ /style , unsafe_allow_htmlTrue) # 原有的应用代码...unsafe_allow_htmlTrue参数是必须的它允许 Streamlit 渲染 HTML 和 CSS 代码。3.2 理解Streamlit的HTML结构要有效地美化 Streamlit我们需要知道它生成的 HTML 结构。Streamlit 应用主要包含以下部分整体容器div classmain侧边栏section>def main(): # 页面配置先设置页面再注入CSS st.set_page_config( page_titleAI图像上色大师, page_icon, layoutwide, initial_sidebar_stateexpanded ) # 注入自定义CSS st.markdown( style /* 全局样式重置与基础设置 */ * { margin: 0; padding: 0; box-sizing: border-box; font-family: Segoe UI, Microsoft YaHei, sans-serif; } /* 主容器样式 */ .main { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); min-height: 100vh; } .block-container { padding-top: 2rem; padding-bottom: 2rem; max-width: 1200px; margin: 0 auto; } /* 标题与文字美化 */ h1 { color: white !important; text-align: center; font-size: 2.8rem !important; margin-bottom: 1.5rem !important; text-shadow: 2px 2px 4px rgba(0,0,0,0.3); background: linear-gradient(45deg, #FFD700, #FFA500); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } h2, h3 { color: #333 !important; margin-top: 1.5rem !important; margin-bottom: 1rem !important; border-left: 4px solid #667eea; padding-left: 12px; } /* 侧边栏深度美化 */ section[data-testidstSidebar] { background: linear-gradient(180deg, #2c3e50 0%, #1a1a2e 100%) !important; border-right: 3px solid #667eea; } section[data-testidstSidebar] div { padding-top: 2rem; } section[data-testidstSidebar] h1, section[data-testidstSidebar] h2, section[data-testidstSidebar] h3 { color: white !important; border-left: 4px solid #FFD700; } /* 侧边栏上传区域 */ .stFileUploader { background: rgba(255, 255, 255, 0.1) !important; border-radius: 15px !important; padding: 20px !important; border: 2px dashed rgba(255, 255, 255, 0.3) !important; transition: all 0.3s ease !important; } .stFileUploader:hover { background: rgba(255, 255, 255, 0.15) !important; border-color: #FFD700 !important; } /* 按钮全面美化 */ /* 主操作按钮 */ div.stButton button { background: linear-gradient(45deg, #667eea, #764ba2) !important; color: white !important; border: none !important; padding: 12px 30px !important; border-radius: 25px !important; font-size: 1.1rem !important; font-weight: 600 !important; cursor: pointer !important; transition: all 0.3s ease !important; box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4) !important; display: block !important; margin: 20px auto !important; width: 80% !important; } div.stButton button:hover { transform: translateY(-2px) !important; box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6) !important; background: linear-gradient(45deg, #764ba2, #667eea) !important; } /* 下载按钮特殊样式 */ div.stDownloadButton button { background: linear-gradient(45deg, #00b09b, #96c93d) !important; color: white !important; border: none !important; padding: 10px 25px !important; border-radius: 20px !important; font-weight: 600 !important; margin-top: 15px !important; } /* 清除按钮样式 */ div.stButton button:contains(清除) { background: linear-gradient(45deg, #ff416c, #ff4b2b) !important; width: 60% !important; margin-top: 30px !important; } /* 图片展示区域美化 */ /* 列容器 */ .stColumns { background: white; border-radius: 20px; padding: 25px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); margin: 20px 0; } /* 图片容器 */ .stImage { border-radius: 15px; overflow: hidden; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); transition: transform 0.3s ease; } .stImage:hover { transform: scale(1.02); } /* 图片标题 */ .stImage div { text-align: center; font-weight: 600; color: #444; margin-top: 10px; font-size: 1.1rem; } /* 加载动画美化 */ .stSpinner div { border-color: #667eea transparent transparent transparent !important; } /* 响应式调整 */ media (max-width: 768px) { .block-container { padding: 1rem; } h1 { font-size: 2rem !important; } .stColumns { padding: 15px; } } /* 自定义滚动条 */ ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.1); border-radius: 4px; } ::-webkit-scrollbar-thumb { background: linear-gradient(45deg, #667eea, #764ba2); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: linear-gradient(45deg, #764ba2, #667eea); } /style , unsafe_allow_htmlTrue) # 原有的应用代码继续...4.2 关键美化效果详解让我们分解一下上面的 CSS 代码看看每个部分实现了什么效果渐变背景与整体布局为主容器添加了紫色渐变背景营造科技感设置了最大宽度和居中布局确保在大屏幕上也不会过宽添加了内边距让内容有呼吸空间标题艺术字效果使用 CSS 渐变文本效果让标题有金色渐变添加文字阴影增强立体感通过-webkit-background-clip: text实现渐变文字侧边栏深度定制深色渐变背景与主界面形成对比添加金色左边框作为视觉引导文件上传区域有悬停效果和虚线边框按钮全面升级所有按钮都有渐变背景和圆角设计主操作按钮有阴影和悬停动画效果不同功能的按钮使用不同颜色紫色用于上色绿色用于下载红色用于清除图片展示区域白色卡片式设计有圆角和阴影图片容器有轻微的悬停放大效果图片标题居中并加粗显示细节优化自定义滚动条与主题色匹配加载动画颜色与主题一致响应式设计适配移动设备5. 高级美化技巧与自定义如果你想要进一步个性化界面这里有一些高级技巧。5.1 添加自定义字体想要使用 Google Fonts 或其他网络字体可以这样添加/* 在style标签内添加 */ import url(https://fonts.googleapis.com/css2?familyPoppins:wght300;400;600;700displayswap); * { font-family: Poppins, Segoe UI, sans-serif; } h1 { font-family: Poppins, sans-serif; font-weight: 700; }5.2 创建主题切换功能虽然 Streamlit 没有内置的暗黑模式切换但我们可以通过 CSS 变量和按钮来实现简单的主题切换# 在侧边栏添加主题切换 with st.sidebar: theme st.radio(选择主题, [明亮主题, 暗黑主题], index0) # 根据选择注入不同的CSS if theme 暗黑主题: dark_css style .main { background: #1a1a1a; } .block-container { background: #2d2d2d; color: #fff; } /* 更多暗色样式... */ /style st.markdown(dark_css, unsafe_allow_htmlTrue)5.3 添加动画和过渡效果让界面更加生动/* 淡入动画 */ keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .block-container { animation: fadeIn 0.8s ease-out; } /* 按钮点击效果 */ div.stButton button:active { transform: scale(0.98) !important; } /* 图片加载动画 */ .stImage { animation: fadeIn 0.5s ease-out; }5.4 自定义文件上传区域让文件上传区域更加美观/* 自定义文件上传按钮 */ .stFileUploader label { background: linear-gradient(45deg, #667eea, #764ba2) !important; color: white !important; border-radius: 20px !important; padding: 12px 24px !important; border: none !important; cursor: pointer !important; transition: all 0.3s ease !important; } .stFileUploader label:hover { background: linear-gradient(45deg, #764ba2, #667eea) !important; transform: translateY(-2px); box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4); }6. 美化后的完整应用代码将所有的美化代码整合到原始应用中以下是完整的示例import streamlit as st from modelscope.pipelines import pipeline from modelscope.utils.constant import Tasks import cv2 from PIL import Image import numpy as np # 初始化模型 st.cache_resource def load_model(): return pipeline(Tasks.image_colorization, model/root/ai-models/iic/cv_unet_image-colorization) def inject_custom_css(): 注入自定义CSS样式 st.markdown( style /* 这里放入前面第4.1节的所有CSS代码 */ /* 为了简洁这里省略具体CSS代码请参考上一节 */ /style , unsafe_allow_htmlTrue) def main(): # 页面配置 st.set_page_config( page_titleAI图像上色大师 - 专业版, page_icon, layoutwide, initial_sidebar_stateexpanded ) # 注入自定义CSS inject_custom_css() # 应用标题 st.title( AI智能图像上色大师) # 侧边栏 with st.sidebar: st.header( 图片上传) st.markdown(---) uploaded_file st.file_uploader( 点击或拖拽上传黑白图片, type[jpg, jpeg, png], help支持 JPG、JPEG、PNG 格式的黑白图片 ) st.markdown(---) if st.button( 清除缓存, use_container_widthTrue): st.cache_resource.clear() st.success(缓存已清除) st.rerun() # 可选添加一些使用提示 with st.expander( 使用提示): st.info( 1. 上传清晰的黑白图片效果更佳 2. 人物照片建议面部清晰 3. 处理时间通常为3-10秒 4. 结果可下载为PNG格式 ) # 主内容区 if uploaded_file is not None: # 显示原始图片 original_image Image.open(uploaded_file) # 创建两列布局 col1, col2 st.columns(2) with col1: st.subheader(️ 原始黑白图) st.image(original_image, use_column_widthTrue) st.caption(f尺寸: {original_image.size[0]}×{original_image.size[1]}) with col2: st.subheader( AI上色结果) # 上色按钮居中显示 col_btn1, col_btn2, col_btn3 st.columns([1, 2, 1]) with col_btn2: if st.button(✨ 开始智能上色, use_container_widthTrue): with st.spinner(AI正在分析图片并智能上色中...): try: # 调用模型 colorizer load_model() result colorizer(np.array(original_image)) colored_img result[output_img] # 显示结果 st.image(colored_img, use_column_widthTrue) st.success(上色完成) # 转换为PIL格式供下载 result_pil Image.fromarray(colored_img) # 下载按钮 st.download_button( label 下载彩色图片, dataresult_pil.tobytes(), file_namefcolored_{uploaded_file.name.split(.)[0]}.png, mimeimage/png, use_container_widthTrue ) # 显示处理信息 st.info( 提示下载的图片为PNG格式保留了最高质量) except Exception as e: st.error(f处理过程中出现错误: {str(e)}) else: # 未处理时的占位图 st.info(点击上方按钮开始AI上色处理) st.image(https://via.placeholder.com/400x300/667eea/ffffff?text等待上色结果, use_column_widthTrue) else: # 未上传图片时的引导界面 st.markdown(---) col_guide1, col_guide2, col_guide3 st.columns([1, 2, 1]) with col_guide2: st.markdown( div styletext-align: center; padding: 40px; background: rgba(255,255,255,0.1); border-radius: 20px; margin: 20px 0; h3 stylecolor: white; 开始使用指南/h3 p stylecolor: rgba(255,255,255,0.8); margin: 20px 0; 1. 在左侧边栏上传黑白图片br 2. 点击开始智能上色按钮br 3. 等待AI处理并预览结果br 4. 下载彩色图片到本地 /p /div , unsafe_allow_htmlTrue) # 添加示例展示 st.subheader( 效果示例) example_cols st.columns(3) example_images [ (人物照片, https://via.placeholder.com/300x200/ccc/333?text人物示例), (风景照片, https://via.placeholder.com/300x200/ccc/333?text风景示例), (建筑照片, https://via.placeholder.com/300x200/ccc/333?text建筑示例) ] for idx, (title, img_url) in enumerate(example_images): with example_cols[idx]: st.image(img_url, use_column_widthTrue) st.caption(title) if __name__ __main__: main()7. 总结通过本教程我们完成了从基础到高级的 Streamlit 界面美化。让我们回顾一下关键要点7.1 美化成果总结视觉升级从默认的朴素界面升级为具有现代感的渐变设计界面交互优化按钮有了悬停和点击反馈提升了用户体验布局美化卡片式设计、圆角边框、阴影效果让界面更加精致响应式设计确保在不同设备上都有良好的显示效果细节打磨自定义滚动条、加载动画等细节让应用更加专业7.2 核心技巧回顾CSS注入使用st.markdown配合style标签注入自定义 CSS选择器使用理解 Streamlit 的 HTML 结构使用正确的 CSS 选择器渐变与阴影合理使用 CSS 渐变和阴影提升视觉层次动画效果适当的过渡和动画让界面更加生动响应式设计使用媒体查询确保移动端兼容性7.3 进一步优化建议如果你想让界面更加出色可以考虑添加加载进度条使用st.progress显示处理进度实现主题切换让用户可以选择明亮/暗黑主题添加更多交互动画如图片切换动画、按钮涟漪效果等优化移动端体验针对小屏幕设备进一步调整布局添加音效反馈处理完成时播放提示音需浏览器支持7.4 实用建议保持一致性确保颜色、字体、间距在整个应用中保持一致性能考虑复杂的 CSS 动画可能会影响性能适度使用测试兼容性在不同浏览器和设备上测试美化效果备份原始代码在重大修改前备份原始代码方便回滚美化界面不仅能提升用户体验也能让你的应用看起来更加专业。最重要的是这些美化不会影响核心的图像上色功能UNet 模型依然会精准地完成它的工作为黑白照片注入色彩。现在你的图像上色工具不仅功能强大外观也同样出色了。尝试运行美化后的应用看看它如何让黑白照片焕发色彩的同时也让整个使用过程变得更加愉悦。获取更多AI镜像想探索更多AI镜像和应用场景访问 CSDN星图镜像广场提供丰富的预置镜像覆盖大模型推理、图像生成、视频生成、模型微调等多个领域支持一键部署。