Gemma-3-12b-it Streamlit应用实战：顶部像素控制面板CSS3定制详解

Gemma-3-12b-it Streamlit应用实战顶部像素控制面板CSS3定制详解1. 引言从传统侧边栏到像素控制面板如果你用过Streamlit肯定对那个默认的侧边栏不陌生。它很方便但有时候也挺碍事——特别是当你想要一个全屏、沉浸式的对话界面时侧边栏会占用宝贵的横向空间让整个应用看起来有点“挤”。今天要聊的Gemma-3 Pixel Studio就彻底抛弃了这个传统设计。我们把所有控制功能——上传图片、清理对话——都搬到了顶部做成了一个叫“像素控制面板”的东西。这个面板不只是位置变了它的整个视觉风格也完全不一样。我们用了Gemma标志性的靛蓝色加上粗线条的像素边框让它看起来既有科技感又带点复古游戏的趣味。更重要的是去掉侧边栏后中间的对话区域变得特别宽敞你可以更专注地和Gemma-3模型交流不会被其他元素干扰。这篇文章我就带你一步步拆解这个顶部像素控制面板是怎么用CSS3定制出来的。你会发现其实不用多复杂的代码就能让Streamlit应用焕然一新。2. 为什么选择顶部面板设计在动手写代码之前我们先搞清楚为什么要这么设计。知道“为什么”才能更好地理解“怎么做”。2.1 传统侧边栏的局限性Streamlit的侧边栏st.sidebar用起来确实简单一行代码就能搞定。但它有几个问题占用横向空间侧边栏通常占页面宽度的20%-30%在宽屏显示器上尤其明显导致主内容区变窄。视觉分割一条竖线把页面分成两块破坏了整体感不够简洁。移动端体验差在手机或平板上侧边栏要么隐藏要么折叠操作起来不如顶部直接。功能入口深用户需要先“看到”侧边栏再在里面找功能多了一步操作。2.2 顶部面板的优势换成顶部面板后这些问题都解决了最大化内容区域去掉侧边栏对话区域可以横跨整个页面宽度看着就舒服。操作更直观所有控制功能都在顶部一眼就能看到点一下就行符合“F型”阅读习惯。移动端友好顶部导航是移动端的标准设计适配起来更自然。视觉更统一整个页面从上到下是一个整体没有割裂感更容易营造沉浸式体验。2.3 Gemma-3 Pixel Studio的设计目标基于这些考虑我们给Pixel Studio定了几个设计目标通透大气去掉所有不必要的边框和分割让界面“呼吸”起来。快速访问核心功能上传图片、重置对话要在最显眼的位置一步到位。风格独特要体现Gemma的“靛蓝像素”美学有辨识度。专注对话一切设计都为对话服务减少干扰元素。想清楚这些我们就可以开始动手了。3. 基础布局去掉侧边栏全屏化主区域第一步先把Streamlit默认的侧边栏去掉让主区域占满整个宽度。3.1 修改Streamlit的页面配置在Streamlit里页面配置通常在st.set_page_config里设置。我们要做两件事隐藏侧边栏调整主区域的内边距。import streamlit as st # 设置页面配置 st.set_page_config( page_titleGemma-3 Pixel Studio, page_icon, layoutwide, # 使用宽布局 initial_sidebar_statecollapsed # 初始状态为折叠隐藏 ) # 在app启动时彻底隐藏侧边栏 st.markdown( style /* 隐藏侧边栏 */ section[data-testidstSidebar] { display: none !important; } /* 调整主区域去掉默认的内边距 */ .main .block-container { padding-top: 1rem; padding-bottom: 1rem; padding-left: 2rem; padding-right: 2rem; max-width: 100% !important; /* 让内容区域占满宽度 */ } /* 调整标题的样式让它更贴合顶部 */ h1 { margin-top: 0.5rem !important; margin-bottom: 1.5rem !important; } /style , unsafe_allow_htmlTrue)这段代码做了几件事layoutwide使用宽屏布局为全屏化做准备。initial_sidebar_statecollapsed侧边栏初始状态为折叠但还不够我们还要用CSS彻底隐藏它。CSS部分用display: none彻底隐藏侧边栏然后调整主容器的内边距让它更贴合顶部。3.2 创建顶部面板的HTML结构接下来我们在Streamlit里创建一个顶部的容器。Streamlit本身没有“顶部面板”这个组件但我们可以用st.container配合HTML/CSS来实现。# 创建顶部面板 def create_top_panel(): 创建顶部像素控制面板 # 使用st.container创建一个容器 with st.container(): # 用HTML和CSS来构建面板 st.markdown( div classpixel-panel div classpanel-header span classpanel-title PIXEL CONTROL PANEL/span /div div classpanel-content !-- 这里后面会放具体的功能按钮 -- /div /div , unsafe_allow_htmlTrue) # 添加一点垂直间距 st.markdown(div stylemargin-bottom: 2rem;/div, unsafe_allow_htmlTrue) # 在app中调用 create_top_panel()现在有了基本的HTML结构但还看不到样式。别急我们马上来添加CSS。4. CSS3定制实现靛蓝像素美学这是最核心的部分。我们要用CSS3来实现那个独特的“靛蓝像素”风格。4.1 定义颜色和基础样式首先定义一套颜色方案以Gemma的靛蓝色为主色调/* 在Streamlit的st.markdown中嵌入这些样式 */ st.markdown( style /* 定义颜色变量方便统一修改 */ :root { --indigo-primary: #4f46e5; /* 主靛蓝色 */ --indigo-dark: #3730a3; /* 深靛蓝用于边框阴影 */ --indigo-light: #818cf8; /* 浅靛蓝用于高光 */ --pixel-gray: #1f2937; /* 像素灰用于背景 */ --text-light: #f3f4f6; /* 浅色文字 */ --text-muted: #9ca3af; /* 次要文字 */ } /* 基础像素边框样式 - 这是核心效果 */ .pixel-border { border: 3px solid var(--indigo-primary) !important; border-image-slice: 2 !important; border-image-width: 2 !important; border-image-outset: 0 !important; border-image-source: url(data:image/svgxml;utf8,svg xmlnshttp://www.w3.org/2000/svg width12 height12rect x1 y1 width10 height10 fillnone stroke%234f46e5 stroke-width2//svg) !important; box-shadow: 4px 4px 0px var(--indigo-dark), /* 右下阴影 */ inset 2px 2px 0px var(--indigo-light); /* 内发光 */ } /* 像素化背景纹理 */ .pixel-bg { background-color: var(--pixel-gray); background-image: radial-gradient(circle at 25% 25%, rgba(79, 70, 229, 0.1) 2px, transparent 2px), radial-gradient(circle at 75% 75%, rgba(79, 70, 229, 0.1) 2px, transparent 2px); background-size: 20px 20px; } /style , unsafe_allow_htmlTrue)这里有几个关键点border-image-source我们用SVG创建了一个像素化的边框图案。这是实现“像素”效果的核心。box-shadow两层阴影一层向外右下角一层向内左上角营造出立体感。background-image用径向渐变创建了微弱的像素点背景纹理增加细节。4.2 完善顶部面板样式现在把样式应用到我们之前创建的HTML结构上/* 顶部面板容器 */ .pixel-panel { background: linear-gradient(135deg, var(--pixel-gray) 0%, #111827 100%); border-radius: 0 0 12px 12px; /* 只圆化底部两个角 */ padding: 1rem 2rem; margin-bottom: 2rem; position: relative; overflow: hidden; } /* 面板头部 - 标题区域 */ .panel-header { display: flex; align-items: center; margin-bottom: 1rem; padding-bottom: 0.75rem; border-bottom: 2px solid var(--indigo-primary); } .panel-title { font-family: Courier New, monospace; font-weight: bold; font-size: 1.25rem; color: var(--text-light); letter-spacing: 1px; text-shadow: 2px 2px 0px var(--indigo-dark); } /* 面板内容区域 - 放按钮的地方 */ .panel-content { display: flex; gap: 1.5rem; align-items: center; flex-wrap: wrap; } /* 添加一些像素装饰元素 */ .pixel-panel::before { content: ; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--indigo-primary) 0%, var(--indigo-light) 50%, var(--indigo-primary) 100%); z-index: 1; } .pixel-panel::after { content: ; position: absolute; bottom: 0; left: 10%; right: 10%; height: 2px; background: linear-gradient(90deg, transparent 0%, var(--indigo-primary) 20%, var(--indigo-primary) 80%, transparent 100%); opacity: 0.5; }这样顶部面板就有了基本的样式深色渐变背景、像素风格的标题、顶部的装饰条。5. 功能实现上传图片与重置对话按钮样式做好了现在来添加实际的功能。我们要在面板里放两个核心功能上传图片和重置对话。5.1 自定义样式的上传按钮Streamlit自带的文件上传组件样式比较固定我们可以把它包装一下让它符合我们的像素风格。def create_upload_button(): 创建自定义样式的图片上传按钮 # 先用一个div包装方便添加样式 st.markdown( div classpixel-upload-container label classpixel-upload-label UPLOAD IMAGE /label /div , unsafe_allow_htmlTrue) # 实际的Streamlit上传组件但隐藏默认样式 col1, col2 st.columns([1, 4]) with col1: uploaded_file st.file_uploader( 选择图片, type[jpg, jpeg, png, webp], label_visibilitycollapsed, # 隐藏标签 keyimage_uploader ) # 添加对应的CSS样式 st.markdown( style /* 隐藏默认的上传组件样式 */ .stFileUploader { visibility: hidden; height: 0; width: 0; position: absolute; } /* 自定义上传按钮样式 */ .pixel-upload-container { display: inline-block; } .pixel-upload-label { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1.5rem; background: linear-gradient(135deg, var(--indigo-primary) 0%, var(--indigo-dark) 100%); color: white; border: none; border-radius: 6px; font-family: Courier New, monospace; font-weight: bold; font-size: 0.9rem; cursor: pointer; transition: all 0.2s ease; box-shadow: 3px 3px 0px rgba(0, 0, 0, 0.2); user-select: none; } .pixel-upload-label:hover { transform: translateY(-2px); box-shadow: 4px 4px 0px rgba(0, 0, 0, 0.3); background: linear-gradient(135deg, var(--indigo-light) 0%, var(--indigo-primary) 100%); } .pixel-upload-label:active { transform: translateY(1px); box-shadow: 2px 2px 0px rgba(0, 0, 0, 0.2); } /* 当有文件上传时改变按钮样式 */ .stFileUploader:not([data-testidstFileUploader]) div .pixel-upload-label { background: linear-gradient(135deg, #10b981 0%, #059669 100%); } /style , unsafe_allow_htmlTrue) return uploaded_file这个实现有点技巧我们创建了一个自定义的标签label作为按钮外观把真正的Streamlit上传组件隐藏起来visibility: hidden通过CSS让自定义标签和隐藏的上传组件关联起来添加了悬停效果和点击反馈让按钮更有交互感5.2 像素风格的重置按钮重置按钮相对简单我们可以用Streamlit的按钮组件然后通过CSS重新设计样式。def create_reset_button(): 创建像素风格的重置对话按钮 # 添加按钮样式 st.markdown( style /* 自定义Streamlit按钮样式 */ .stButton button { display: inline-flex !important; align-items: center !important; gap: 0.5rem !important; padding: 0.75rem 1.5rem !important; background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important; color: white !important; border: 3px solid #dc2626 !important; border-radius: 6px !important; font-family: Courier New, monospace !important; font-weight: bold !important; font-size: 0.9rem !important; cursor: pointer !important; transition: all 0.2s ease !important; box-shadow: 3px 3px 0px rgba(0, 0, 0, 0.2) !important; min-width: 140px !important; justify-content: center !important; } .stButton button:hover { transform: translateY(-2px) !important; box-shadow: 4px 4px 0px rgba(0, 0, 0, 0.3) !important; background: linear-gradient(135deg, #f87171 0%, #ef4444 100%) !important; border-color: #ef4444 !important; } .stButton button:active { transform: translateY(1px) !important; box-shadow: 2px 2px 0px rgba(0, 0, 0, 0.2) !important; } /* 像素边框效果 */ .stButton button { border-image-slice: 2 !important; border-image-width: 2 !important; border-image-outset: 0 !important; border-image-source: url(data:image/svgxml;utf8,svg xmlnshttp://www.w3.org/2000/svg width12 height12rect x1 y1 width10 height10 fillnone stroke%23dc2626 stroke-width2//svg) !important; } /style , unsafe_allow_htmlTrue) # 创建按钮 col1, col2 st.columns([1, 4]) with col1: if st.button( RESET_CHAT, keyreset_chat): # 这里执行重置对话的逻辑 st.session_state.messages [] # 清空消息历史 st.rerun() # 重新运行应用 return True return False注意这里用了红色系和上传按钮的靛蓝色形成对比让用户一眼就能区分不同功能。5.3 整合到顶部面板现在把这两个功能按钮放到顶部面板里def create_top_panel(): 创建完整的顶部像素控制面板 with st.container(): # 面板HTML结构 st.markdown( div classpixel-panel div classpanel-header span classpanel-title PIXEL CONTROL PANEL/span /div div classpanel-content !-- 这里用两个div来放按钮 -- div idupload-container/div div idreset-container/div /div /div div stylemargin-bottom: 2rem;/div , unsafe_allow_htmlTrue) # 在面板内容区域创建两列来放按钮 col1, col2 st.columns(2) with col1: st.markdown(div classpixel-upload-container, unsafe_allow_htmlTrue) uploaded_file create_upload_button() st.markdown(/div, unsafe_allow_htmlTrue) with col2: reset_clicked create_reset_button() return uploaded_file, reset_clicked6. 响应式设计与细节优化一个好的UI不仅要好看还要在不同设备上都能正常显示。我们来做一些响应式调整和细节优化。6.1 响应式布局调整/* 响应式设计 - 适应不同屏幕尺寸 */ media (max-width: 768px) { /* 在小屏幕上调整面板样式 */ .pixel-panel { padding: 0.75rem 1rem; margin-bottom: 1.5rem; border-radius: 0 0 8px 8px; } .panel-title { font-size: 1rem; letter-spacing: 0.5px; } .panel-content { gap: 1rem; flex-direction: column; align-items: stretch; } /* 调整按钮在小屏幕上的显示 */ .pixel-upload-label, .stButton button { width: 100% !important; justify-content: center !important; padding: 0.75rem 1rem !important; font-size: 0.85rem !important; } /* 调整主内容区域的内边距 */ .main .block-container { padding-left: 1rem !important; padding-right: 1rem !important; } } /* 中等屏幕调整 */ media (min-width: 769px) and (max-width: 1024px) { .pixel-panel { padding: 1rem 1.5rem; } .panel-content { gap: 1.25rem; } }6.2 添加加载状态反馈当用户上传图片或重置对话时应该给一些视觉反馈/* 加载状态样式 */ keyframes pixel-pulse { 0% { opacity: 0.6; } 50% { opacity: 1; } 100% { opacity: 0.6; } } .loading .pixel-upload-label, .loading .stButton button { animation: pixel-pulse 1.5s infinite; cursor: wait !important; } /* 成功状态 */ .upload-success .pixel-upload-label { background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important; border-color: #059669 !important; } .upload-success .pixel-upload-label::after { content: ✓; font-weight: bold; } /* 错误状态 */ .upload-error .pixel-upload-label { background: linear-gradient(135deg, #f87171 0%, #ef4444 100%) !important; border-color: #ef4444 !important; } .upload-error .pixel-upload-label::after { content: ✗; font-weight: bold; }6.3 添加键盘快捷键提示对于高级用户可以添加键盘快捷键提示def add_keyboard_hints(): 添加快捷键提示 st.markdown( style /* 快捷键提示样式 */ .keyboard-hint { position: absolute; top: 0.5rem; right: 1rem; font-family: Courier New, monospace; font-size: 0.75rem; color: var(--text-muted); background: rgba(0, 0, 0, 0.3); padding: 0.25rem 0.5rem; border-radius: 4px; border: 1px solid var(--indigo-primary); opacity: 0.7; transition: opacity 0.2s; } .keyboard-hint:hover { opacity: 1; } .keyboard-hint kbd { background: var(--indigo-dark); color: white; padding: 0.1rem 0.3rem; border-radius: 3px; border: 1px solid var(--indigo-primary); font-size: 0.7rem; margin: 0 0.1rem; } media (max-width: 768px) { .keyboard-hint { display: none; /* 小屏幕上隐藏快捷键提示 */ } } /style div classkeyboard-hint span快捷键: /span kbdCtrl/kbd kbdU/kbd 上传 span stylemargin: 0 0.3rem;•/span kbdCtrl/kbd kbdR/kbd 重置 /div , unsafe_allow_htmlTrue)7. 完整实现与使用示例把上面的所有代码整合起来就是一个完整的顶部像素控制面板了。下面是一个完整的使用示例import streamlit as st import base64 def inject_custom_css(): 注入所有自定义CSS样式 # 这里包含前面所有的CSS代码 # 为了简洁这里只写函数定义实际使用时需要把前面的CSS代码都放进来 pass def create_top_control_panel(): 创建完整的顶部控制面板 # 注入CSS inject_custom_css() # 创建面板容器 with st.container(): st.markdown( div classpixel-panel div classpanel-header span classpanel-title PIXEL CONTROL PANEL/span /div div classpanel-content !-- 按钮容器 -- div styledisplay: flex; gap: 1.5rem; align-items: center; flex-wrap: wrap; , unsafe_allow_htmlTrue) # 创建两列布局放按钮 col1, col2 st.columns([1, 1]) with col1: # 上传按钮 st.markdown( div classpixel-upload-container label classpixel-upload-label forimage-upload UPLOAD IMAGE /label /div , unsafe_allow_htmlTrue) # 隐藏的实际上传组件 uploaded_file st.file_uploader( 选择图片, type[jpg, jpeg, png, webp], label_visibilitycollapsed, keyimage_uploader ) with col2: # 重置按钮 if st.button( RESET_CHAT, keyreset_chat_main): # 重置逻辑 st.session_state.clear() st.rerun() st.markdown(/div/div/div, unsafe_allow_htmlTrue) # 添加快捷键提示 st.markdown( div classkeyboard-hint span快捷键: /span kbdCtrl/kbd kbdU/kbd 上传 span stylemargin: 0 0.3rem;•/span kbdCtrl/kbd kbdR/kbd 重置 /div , unsafe_allow_htmlTrue) return uploaded_file # 在主应用中使用 def main(): # 页面配置 st.set_page_config( page_titleGemma-3 Pixel Studio, page_icon, layoutwide, initial_sidebar_statecollapsed ) # 隐藏侧边栏 st.markdown( style section[data-testidstSidebar] { display: none !important; } .main .block-container { padding-top: 1rem; max-width: 100% !important; } /style , unsafe_allow_htmlTrue) # 创建顶部面板 uploaded_file create_top_control_panel() # 主内容区域 st.title(Gemma-3 Pixel Studio) st.markdown(### 与Gemma-3进行多模态对话) # 如果有上传的图片显示预览 if uploaded_file is not None: st.image(uploaded_file, caption已上传的图片, width300) # 对话界面 # ... 这里放Gemma-3的对话逻辑 if __name__ __main__: main()8. 总结通过上面的步骤我们完成了一个具有独特风格的Streamlit顶部像素控制面板。回顾一下关键点设计思路抛弃传统的侧边栏采用顶部面板设计最大化对话区域提升视觉沉浸感。核心实现用CSS彻底隐藏Streamlit侧边栏通过HTMLCSS创建自定义顶部面板使用border-image实现像素边框效果用渐变和阴影营造立体感功能集成自定义样式的文件上传按钮像素风格的重置对话按钮响应式设计适配不同屏幕添加加载状态和快捷键提示视觉风格靛蓝色主色调呼应Gemma品牌色像素化边框和背景纹理简洁现代的界面布局这个设计不仅美观而且实用。顶部面板让核心功能一目了然全宽的对话区域提供了更好的使用体验。更重要的是这套CSS代码是模块化的你可以轻松地复用到其他Streamlit项目中只需要调整颜色和内容即可。Streamlit的强大之处就在于这种灵活性——它提供了足够的基础组件同时又允许我们通过CSS进行深度定制。希望这个像素控制面板的设计能给你带来灵感创造出更多独特的Streamlit应用界面。获取更多AI镜像想探索更多AI镜像和应用场景访问 CSDN星图镜像广场提供丰富的预置镜像覆盖大模型推理、图像生成、视频生成、模型微调等多个领域支持一键部署。