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

Z-Image-Turbo-rinaiqiao-huiyewunv保姆级教程：Streamlit容器边框设计与响应式布局技巧

news 2026/9/2 4:46:52

Z-Image-Turbo-rinaiqiao-huiyewunv保姆级教程：Streamlit容器边框设计与响应式布局技巧

1. 引言

你是不是也遇到过这样的烦恼？好不容易在本地部署了一个AI绘图工具，但它的界面要么简陋得像上个世纪的产物，要么布局混乱，操作起来让人摸不着头脑。特别是当你用Streamlit这种快速开发框架时，默认的界面风格往往过于朴素，很难做出既专业又美观的应用。

今天，我要分享的就是如何为你的AI绘图工具打造一个既美观又实用的交互界面。我们以Z-Image Turbo（辉夜大小姐-日奈娇）这个二次元人物绘图工具为例，手把手教你如何设计带边框的参数容器，如何实现响应式的宽屏布局，让你的工具看起来就像专业软件一样。

这个工具本身就很酷——它基于Tongyi-MAI Z-Image模型，专门针对辉夜大小姐这个角色进行了微调，你可以在自己的电脑上直接运行，不需要联网，也不需要复杂的云端配置。但再好的引擎，也需要一个漂亮的车身，这就是我们今天要重点聊的界面设计部分。

通过这篇教程，你将学会如何用Streamlit搭建一个宽屏友好的交互界面，让参数设置、图片生成、结果展示都井井有条。无论你是想美化现有的工具，还是正在开发新的AI应用，这些技巧都能直接拿来用。

2. 项目核心：不只是绘图，更是体验优化

在深入界面设计之前，我们先简单了解一下这个工具的核心价值。Z-Image Turbo不是一个普通的文生图工具，它在几个关键点上做了深度优化，这也是为什么我们需要一个与之匹配的优秀界面。

2.1 技术亮点解析

这个工具解决了AI绘图本地部署中的几个常见痛点：

权重加载的智能化处理很多人在使用微调模型时，最头疼的就是权重文件不匹配的问题。不同的训练框架、不同的模型结构，导出的权重文件格式千差万别。这个工具内置了智能的权重清洗机制，能自动处理safetensors格式的微调权重，移除那些不匹配的前缀，确保核心的绘图能力能够正确加载。

显存管理的极致优化本地运行AI模型，显存永远是不够用的。这个工具做了三重优化：首先用torch.bfloat16这种更节省显存的精度加载模型；然后启用模型CPU卸载，让不用的部分暂时移到内存；最后还优化了CUDA的内存分配策略。这意味着即使你的显卡不是顶配，也能流畅运行。

参数配置的科学适配Turbo类型的模型对生成参数很敏感，步数设多了浪费算力，设少了效果不好。这个工具内置了针对辉夜大小姐角色的优化参数，包括推荐的提示词模板、步数设置、CFG Scale值等，这些都是经过测试验证的，你不需要自己反复试错。

2.2 为什么界面设计很重要

你可能觉得，一个工具的核心是算法和模型，界面只是锦上添花。但在实际使用中，好的界面设计能显著提升用户体验：

降低学习成本：清晰的布局让用户一眼就知道该在哪里设置参数，在哪里查看结果
提高使用效率：合理的交互设计减少不必要的点击和等待
增强专业感：美观的界面让工具看起来更可靠，用户更愿意信任它
适应不同设备：响应式布局确保在宽屏显示器上也能完美展示

接下来，我们就进入正题，看看如何用Streamlit实现这些界面效果。

3. 环境准备与快速部署

在开始设计界面之前，我们需要先把工具运行起来。别担心，整个过程很简单，即使你是Streamlit的新手也能轻松搞定。

3.1 基础环境要求

首先确认你的电脑满足以下条件：

操作系统：Windows 10/11，或者Linux系统都可以
Python版本：3.8到3.11之间的版本（推荐3.10）
显卡：需要有NVIDIA显卡，显存至少4GB（6GB或以上体验更好）
CUDA版本：11.7或11.8（如果你已经安装了PyTorch，通常CUDA会一起装好）

如果你不确定自己的环境，可以打开命令行，分别输入以下命令查看：

# 查看Python版本 python --version # 查看PyTorch和CUDA版本（如果已安装） python -c "import torch; print(f'PyTorch版本: {torch.__version__}')" python -c "import torch; print(f'CUDA可用: {torch.cuda.is_available()}')"

3.2 一键安装依赖

工具的所有依赖都写在一个requirements.txt文件里，安装起来非常方便。首先，你需要下载工具的完整代码包，然后打开命令行，进入到代码所在的目录。

# 进入你的项目目录 cd /path/to/your/project # 安装所有依赖包 pip install -r requirements.txt

这个过程可能会花几分钟时间，因为要下载Streamlit、PyTorch、Diffusers等比较大的包。如果遇到网络问题，可以尝试使用国内的镜像源：

pip install -r requirements.txt -i https://pypi.tuna.tsinghua.edu.cn/simple

3.3 启动你的绘图工具

安装完成后，启动就很简单了：

streamlit run app.py

如果一切顺利，你会看到命令行输出类似这样的信息：

You can now view your Streamlit app in your browser. Local URL: http://localhost:8501 Network URL: http://192.168.1.100:8501

用浏览器打开http://localhost:8501，就能看到工具界面了。第一次启动时会加载模型，可能需要等待1-2分钟，界面上会显示“正在初始化二次元绘图引擎...”，加载完成后会有提示。

4. Streamlit容器边框设计技巧

现在工具已经跑起来了，你可能注意到默认的界面比较朴素。别急，我们来一步步美化它。首先从最基础的容器边框开始。

4.1 为什么需要容器边框

在Streamlit中，所有的控件（输入框、滑块、按钮等）默认都是直接排列在页面上的，没有明显的视觉分隔。当你的工具有很多参数需要设置时，用户很容易迷失在密密麻麻的控件中。

容器边框的作用就像文件夹的标签，它能：

将相关的参数分组，逻辑更清晰
提供视觉上的层次感，界面更美观
引导用户的注意力，操作更直观

4.2 基础边框实现方法

Streamlit提供了几种创建带边框容器的方法，最简单的是使用st.container()配合CSS样式：

import streamlit as st # 方法1：使用st.container()和自定义CSS with st.container(): st.markdown( """ <style> .custom-container { border: 2px solid #4CAF50; border-radius: 10px; padding: 20px; margin: 10px 0; background-color: #f9f9f9; } </style> """, unsafe_allow_html=True ) st.markdown('<div class="custom-container">', unsafe_allow_html=True) st.header("🎨 绘图参数设置") st.text_input("提示词", value="辉夜大小姐，红色瞳孔，黑色长发，校服") st.slider("生成步数", min_value=4, max_value=30, value=20) st.markdown('</div>', unsafe_allow_html=True)

这段代码创建了一个绿色边框、圆角、有内边距的容器。但每次都写这么多CSS代码太麻烦了，我们可以把它封装成函数：

def create_styled_container(title, border_color="#4CAF50"): """创建带样式的容器""" st.markdown( f""" <style> .styled-container {{ border: 2px solid {border_color}; border-radius: 10px; padding: 20px; margin: 15px 0; background-color: #fafafa; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }} .container-title {{ color: {border_color}; font-size: 1.2em; font-weight: bold; margin-bottom: 15px; }} </style> """, unsafe_allow_html=True ) st.markdown(f'<div class="styled-container">', unsafe_allow_html=True) st.markdown(f'<div class="container-title">{title}</div>', unsafe_allow_html=True) # 这里返回一个上下文管理器，方便使用with语句 class ContainerContext: def __enter__(self): return self def __exit__(self, *args): st.markdown('</div>', unsafe_allow_html=True) return ContainerContext() # 使用示例 with create_styled_container("📝 提示词设置", "#2196F3"): prompt = st.text_area( "正面提示词", value="1girl, silver hair, red eyes, school uniform, masterpiece, best quality", height=100 ) negative = st.text_area( "负面提示词", value="low quality, worst quality, bad anatomy, nsfw", height=80 )

4.3 高级边框效果：阴影与渐变

如果你想让界面看起来更现代，可以添加阴影和渐变效果：

def create_modern_container(title, color_scheme="blue"): """创建现代风格的容器，支持多种配色方案""" color_schemes = { "blue": {"border": "#2196F3", "bg": "#E3F2FD", "title": "#1565C0"}, "green": {"border": "#4CAF50", "bg": "#E8F5E9", "title": "#2E7D32"}, "purple": {"border": "#9C27B0", "bg": "#F3E5F5", "title": "#6A1B9A"}, "orange": {"border": "#FF9800", "bg": "#FFF3E0", "title": "#EF6C00"} } colors = color_schemes.get(color_scheme, color_schemes["blue"]) st.markdown( f""" <style> .modern-container {{ border: 2px solid {colors['border']}; border-radius: 12px; padding: 25px; margin: 20px 0; background: linear-gradient(135deg, {colors['bg']} 0%, #ffffff 100%); box-shadow: 0 4px 12px rgba(0,0,0,0.08); transition: all 0.3s ease; }} .modern-container:hover {{ box-shadow: 0 6px 16px rgba(0,0,0,0.12); transform: translateY(-2px); }} .modern-title {{ color: {colors['title']}; font-size: 1.3em; font-weight: 600; margin-bottom: 20px; padding-bottom: 10px; border-bottom: 2px solid {colors['border']}; }} </style> """, unsafe_allow_html=True ) st.markdown(f'<div class="modern-container">', unsafe_allow_html=True) st.markdown(f'<div class="modern-title">{title}</div>', unsafe_allow_html=True) class ModernContainerContext: def __enter__(self): return self def __exit__(self, *args): st.markdown('</div>', unsafe_allow_html=True) return ModernContainerContext() # 使用不同颜色的容器 with create_modern_container("🎯 核心参数", "blue"): col1, col2 = st.columns(2) with col1: steps = st.slider("生成步数", 4, 30, 20, help="Turbo模型推荐20步左右") with col2: cfg = st.slider("CFG Scale", 1.0, 5.0, 2.0, 0.5, help="推荐2.0左右") with create_modern_container("🖼️ 图片设置", "green"): col1, col2 = st.columns(2) with col1: width = st.selectbox("图片宽度", [512, 768, 1024], index=1) with col2: height = st.selectbox("图片高度", [512, 768, 1024], index=1)

4.4 实用技巧：动态边框与状态反馈

容器边框不仅可以美化界面，还可以提供状态反馈。比如，当用户点击生成按钮时，我们可以改变边框颜色来表示状态：

import time # 在CSS中添加状态类 st.markdown(""" <style> .status-processing { border-color: #FF9800 !important; animation: pulse 1.5s infinite; } .status-success { border-color: #4CAF50 !important; } .status-error { border-color: #F44336 !important; } @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(255, 152, 0, 0.4); } 70% { box-shadow: 0 0 0 10px rgba(255, 152, 0, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 152, 0, 0); } } </style> """, unsafe_allow_html=True) # 生成按钮 if st.button("🚀 生成人物写真", type="primary"): # 添加处理中状态 st.markdown('<div id="status-container">', unsafe_allow_html=True) st.markdown( """ <script> // 改变容器边框颜色表示处理中 const containers = document.querySelectorAll('.modern-container'); containers.forEach(container => { container.classList.add('status-processing'); }); </script> """, unsafe_allow_html=True ) # 模拟生成过程 with st.spinner("画师正在奋笔疾书中..."): time.sleep(2) # 实际这里是调用模型生成图片 # 生成完成后改变状态 st.markdown( """ <script> const containers = document.querySelectorAll('.modern-container'); containers.forEach(container => { container.classList.remove('status-processing'); container.classList.add('status-success'); }); // 3秒后恢复原状 setTimeout(() => { containers.forEach(container => { container.classList.remove('status-success'); }); }, 3000); </script> """, unsafe_allow_html=True ) st.success("生成完成！") st.markdown('</div>', unsafe_allow_html=True)

5. 响应式宽屏布局设计

有了漂亮的容器，接下来我们需要考虑如何排列它们。特别是现在很多人用宽屏显示器，如何充分利用屏幕空间就很重要了。

5.1 Streamlit的布局基础

Streamlit提供了几种基础的布局组件：

import streamlit as st # 1. 侧边栏 - 适合放导航或次要参数 with st.sidebar: st.header("⚙️ 设置") model_type = st.selectbox("模型类型", ["Z-Image Turbo", "标准版"]) # 2. 列布局 - 将水平空间分成多列 col1, col2 = st.columns(2) # 两等分 col1, col2, col3 = st.columns([1, 2, 1]) # 指定比例 # 3. 容器 - 更灵活的分组 container = st.container() with container: # 这里的内容可以动态更新 pass # 4. 扩展器 - 可折叠的内容区域 with st.expander("高级设置"): st.slider("种子", 0, 1000000, 42)

5.2 宽屏布局的最佳实践

对于AI绘图工具，我推荐使用“参数区-预览区”左右分栏的布局。左边放所有设置参数，右边实时显示生成结果。

# 设置页面为宽屏模式（必须在最前面调用） st.set_page_config(layout="wide") # 创建两列，左边窄一些放参数，右边宽一些放图片 left_col, right_col = st.columns([1, 2]) with left_col: st.markdown("## 🎛️ 参数设置") # 使用我们之前创建的漂亮容器 with create_modern_container("📝 提示词", "blue"): prompt = st.text_area( "正面提示词", value="1girl, silver hair, red eyes, school uniform, masterpiece, best quality, detailed background", height=120, help="描述你想要生成的画面" ) negative = st.text_area( "负面提示词", value="low quality, worst quality, bad anatomy, nsfw, blurry", height=80, help="不希望出现在图片中的内容" ) with create_modern_container("⚙️ 生成参数", "green"): col1, col2 = st.columns(2) with col1: steps = st.slider("步数", 4, 30, 20, help="步数越多细节越丰富，但速度越慢") width = st.selectbox("宽度", [512, 768, 1024], index=1) with col2: cfg_scale = st.slider("CFG", 1.0, 5.0, 2.0, 0.5, help="提示词约束强度") height = st.selectbox("高度", [512, 768, 1024], index=1) with create_modern_container("🎨 风格设置", "purple"): style = st.selectbox( "画风", ["默认二次元", "水彩风格", "厚涂风格", "赛璐璐", "简约风格"] ) sampler = st.selectbox( "采样器", ["DPM++ 2M", "Euler a", "DDIM", "LMS"], help="不同的采样器会影响生成效果和速度" ) # 生成按钮放在参数区底部 generate_btn = st.button( "🚀 生成人物写真", type="primary", use_container_width=True # 按钮宽度充满容器 ) with right_col: st.markdown("## 🖼️ 生成结果") # 结果展示容器 with create_modern_container("实时预览", "orange"): if 'generated_image' in st.session_state: # 显示已生成的图片 st.image( st.session_state.generated_image, caption=f"步数: {steps} | CFG: {cfg_scale} | 尺寸: {width}x{height}", use_column_width=True # 图片宽度自适应容器 ) # 提供下载按钮 st.download_button( label="📥 下载图片", data=st.session_state.generated_image_bytes, file_name=f"generated_{int(time.time())}.png", mime="image/png" ) else: # 初始状态显示占位图或说明 st.info("👈 请在左侧设置参数，然后点击生成按钮") st.image( "https://via.placeholder.com/800x600/FFE4E1/000000?text=等待生成...", use_column_width=True ) # 历史记录区域 with create_modern_container("📚 生成历史", "blue"): if 'history' in st.session_state and st.session_state.history: cols = st.columns(3) # 每行显示3张历史图片 for idx, (img, prompt_text) in enumerate(st.session_state.history[-6:]): # 显示最近6张 with cols[idx % 3]: st.image(img, use_column_width=True) st.caption(prompt_text[:50] + "..." if len(prompt_text) > 50 else prompt_text) else: st.write("暂无生成历史")

5.3 响应式设计的进阶技巧

上面的布局在宽屏上看起来不错，但在小屏幕上可能会拥挤。我们可以通过CSS媒体查询来实现真正的响应式：

# 添加响应式CSS st.markdown(""" <style> /* 默认样式 */ .param-section { padding: 15px; margin-bottom: 15px; } /* 小屏幕设备（手机） */ @media screen and (max-width: 768px) { .param-section { padding: 10px; margin-bottom: 10px; } /* 在小屏幕上将两列布局改为单列 */ .wide-layout { flex-direction: column !important; } /* 调整字体大小 */ .container-title { font-size: 1.1em !important; } } /* 中等屏幕设备（平板） */ @media screen and (min-width: 769px) and (max-width: 1024px) { .param-section { padding: 12px; } } /* 大屏幕设备（桌面） */ @media screen and (min-width: 1025px) { .param-section { padding: 20px; } /* 在大屏幕上增加一些动画效果 */ .modern-container:hover { transform: translateY(-3px); box-shadow: 0 8px 25px rgba(0,0,0,0.15); } } </style> """, unsafe_allow_html=True)

5.4 布局状态保持与用户体验

在AI绘图工具中，用户可能会频繁调整参数并重新生成。好的布局应该记住用户的上次选择：

# 初始化session state if 'prompt' not in st.session_state: st.session_state.prompt = "1girl, silver hair, red eyes, school uniform" if 'negative' not in st.session_state: st.session_state.negative = "low quality, worst quality" if 'steps' not in st.session_state: st.session_state.steps = 20 if 'cfg_scale' not in st.session_state: st.session_state.cfg_scale = 2.0 # 在界面中使用session state with create_modern_container("📝 提示词", "blue"): # 使用st.session_state来保持状态 prompt = st.text_area( "正面提示词", value=st.session_state.prompt, height=120, key="prompt_input", # 指定key，Streamlit会自动管理状态 on_change=lambda: st.session_state.update({"prompt": st.session_state.prompt_input}) ) # 或者更简单的方式：直接绑定到session_state negative = st.text_area( "负面提示词", value=st.session_state.negative, height=80, key="negative" ) # 生成按钮的逻辑 if generate_btn: # 保存当前参数到session state st.session_state.prompt = prompt st.session_state.negative = negative st.session_state.steps = steps st.session_state.cfg_scale = cfg_scale # 显示生成状态 with right_col: with st.spinner("正在生成中，请稍候..."): # 这里调用实际的生成函数 # generated_image = generate_image(prompt, negative, steps, cfg_scale, width, height) # 模拟生成过程 time.sleep(2) # 保存生成结果 st.session_state.generated_image = "path/to/generated/image.png" st.session_state.generated_image_bytes = b"..." # 图片的二进制数据 # 添加到历史记录 if 'history' not in st.session_state: st.session_state.history = [] st.session_state.history.append((st.session_state.generated_image, prompt)) # 显示成功消息 st.success("生成完成！") # 自动滚动到结果区域 st.markdown( """ <script> // 滚动到结果区域 const resultSection = document.querySelectorAll('.modern-container')[1]; resultSection.scrollIntoView({behavior: 'smooth'}); </script> """, unsafe_allow_html=True )

6. 完整界面整合与优化

现在我们把所有技巧整合起来，创建一个完整的、美观的、响应式的AI绘图工具界面。

6.1 完整的界面代码

import streamlit as st import time from PIL import Image import io # 设置页面配置 st.set_page_config( page_title="Z-Image Turbo 二次元绘图工坊", page_icon="🎨", layout="wide", initial_sidebar_state="collapsed" ) # 自定义CSS样式 st.markdown(""" <style> /* 主容器样式 */ .main-container { max-width: 1400px; margin: 0 auto; padding: 20px; } /* 现代风格容器 */ .modern-container { border: 2px solid #4CAF50; border-radius: 12px; padding: 25px; margin: 20px 0; background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%); box-shadow: 0 4px 12px rgba(0,0,0,0.08); transition: all 0.3s ease; } .modern-container:hover { box-shadow: 0 6px 16px rgba(0,0,0,0.12); } .modern-title { color: #2E7D32; font-size: 1.3em; font-weight: 600; margin-bottom: 20px; padding-bottom: 10px; border-bottom: 2px solid #4CAF50; } /* 状态动画 */ @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(255, 152, 0, 0.4); } 70% { box-shadow: 0 0 0 10px rgba(255, 152, 0, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 152, 0, 0); } } .processing { animation: pulse 1.5s infinite; border-color: #FF9800 !important; } /* 响应式设计 */ @media screen and (max-width: 768px) { .modern-container { padding: 15px; margin: 10px 0; } .modern-title { font-size: 1.1em; } } /* 美化按钮 */ .stButton > button { border-radius: 8px; font-weight: 600; transition: all 0.3s ease; } .stButton > button:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.15); } </style> """, unsafe_allow_html=True) # 初始化session state if 'history' not in st.session_state: st.session_state.history = [] if 'current_image' not in st.session_state: st.session_state.current_image = None # 标题区域 st.title("🎨 Z-Image Turbo 二次元绘图工坊") st.markdown("基于辉夜大小姐（日奈娇）专属微调模型 · 本地运行 · 宽屏优化") # 创建两列布局 left_col, right_col = st.columns([1, 1.5]) with left_col: st.markdown("### ⚙️ 参数设置") # 提示词容器 st.markdown('<div class="modern-container">', unsafe_allow_html=True) st.markdown('<div class="modern-title">📝 提示词设置</div>', unsafe_allow_html=True) prompt = st.text_area( "正面提示词", value="1girl, silver hair, red eyes, school uniform, classroom, masterpiece, best quality, detailed background, anime style", height=150, help="描述你想要生成的画面，建议包含：人物特征+场景+画风+质量词" ) negative = st.text_area( "负面提示词", value="low quality, worst quality, bad anatomy, nsfw, blurry, bad hands, extra fingers", height=100, help="不希望出现在图片中的内容" ) st.markdown('</div>', unsafe_allow_html=True) # 生成参数容器 st.markdown('<div class="modern-container">', unsafe_allow_html=True) st.markdown('<div class="modern-title">🎯 生成参数</div>', unsafe_allow_html=True) col1, col2 = st.columns(2) with col1: steps = st.slider( "生成步数", min_value=4, max_value=30, value=20, help="Turbo模型推荐20步左右，步数越多细节越丰富" ) width = st.selectbox( "图片宽度", options=[512, 768, 1024], index=1, help="图片宽度，越大细节越多但需要更多显存" ) with col2: cfg_scale = st.slider( "CFG Scale", min_value=1.0, max_value=5.0, value=2.0, step=0.5, help="提示词约束强度，推荐2.0左右" ) height = st.selectbox( "图片高度", options=[512, 768, 1024], index=1, help="图片高度" ) seed = st.number_input( "随机种子", min_value=0, max_value=1000000, value=42, help="相同的种子+相同的参数=相同的图片" ) st.markdown('</div>', unsafe_allow_html=True) # 风格设置容器 st.markdown('<div class="modern-container">', unsafe_allow_html=True) st.markdown('<div class="modern-title">✨ 风格设置</div>', unsafe_allow_html=True) style_preset = st.selectbox( "风格预设", options=["默认二次元", "水彩风格", "厚涂油画", "赛璐璐动画", "简约插画", "写实风格"], index=0 ) sampler = st.selectbox( "采样方法", options=["DPM++ 2M Karras", "Euler a", "DDIM", "LMS Karras"], index=0, help="不同的采样器会影响生成效果和速度" ) st.markdown('</div>', unsafe_allow_html=True) # 生成按钮 generate_col1, generate_col2 = st.columns([3, 1]) with generate_col1: generate_btn = st.button( "🚀 生成人物写真", type="primary", use_container_width=True ) with generate_col2: if st.button("🔄 清空历史", use_container_width=True): st.session_state.history = [] st.session_state.current_image = None st.rerun() with right_col: st.markdown("### 🖼️ 生成结果") # 当前结果容器 result_container = st.container() with result_container: st.markdown('<div class="modern-container">', unsafe_allow_html=True) st.markdown('<div class="modern-title">🎨 当前作品</div>', unsafe_allow_html=True) if st.session_state.current_image: # 显示当前生成的图片 st.image( st.session_state.current_image, use_column_width=True, caption=f"步数: {steps} | CFG: {cfg_scale} | 尺寸: {width}x{height}" ) # 提供下载 col1, col2, col3 = st.columns(3) with col1: st.download_button( label="📥 下载PNG", data=st.session_state.current_image_bytes, file_name=f"zimage_{int(time.time())}.png", mime="image/png", use_container_width=True ) with col2: if st.button("💾 保存到历史", use_container_width=True): st.session_state.history.append( (st.session_state.current_image, prompt) ) st.success("已保存到历史记录！") with col3: if st.button("🔄 重新生成", use_container_width=True): # 这里触发重新生成逻辑 pass else: # 初始状态显示示例 st.info("👈 请在左侧设置参数，然后点击生成按钮开始创作") st.image( "https://images.unsplash.com/photo-1635070041078-e363dbe005cb?w=800&h=600&fit=crop", use_column_width=True, caption="示例：辉夜大小姐风格" ) st.markdown('</div>', unsafe_allow_html=True) # 历史记录容器 if st.session_state.history: st.markdown('<div class="modern-container">', unsafe_allow_html=True) st.markdown('<div class="modern-title">📚 生成历史</div>', unsafe_allow_html=True) # 每行显示3张历史图片 history_cols = st.columns(3) for idx, (img, prompt_text) in enumerate(st.session_state.history[-6:]): # 显示最近6张 with history_cols[idx % 3]: st.image(img, use_column_width=True) with st.expander("查看提示词"): st.text(prompt_text[:200] + "..." if len(prompt_text) > 200 else prompt_text) st.markdown('</div>', unsafe_allow_html=True) # 生成按钮逻辑 if generate_btn: # 添加处理中状态 st.markdown( """ <script> // 为所有容器添加处理中样式 const containers = document.querySelectorAll('.modern-container'); containers.forEach(container => { container.classList.add('processing'); }); </script> """, unsafe_allow_html=True ) # 显示进度 with st.spinner("🖌️ 画师正在创作中，请稍候..."): progress_bar = st.progress(0) # 模拟生成过程 for i in range(100): time.sleep(0.02) # 实际这里是模型推理 progress_bar.progress(i + 1) # 模拟生成结果（实际应该调用模型） # 这里用示例图片代替 example_image = Image.new('RGB', (width, height), color='pink') # 保存到session state img_byte_arr = io.BytesIO() example_image.save(img_byte_arr, format='PNG') img_byte_arr = img_byte_arr.getvalue() st.session_state.current_image = example_image st.session_state.current_image_bytes = img_byte_arr # 移除处理中状态 st.markdown( """ <script> const containers = document.querySelectorAll('.modern-container'); containers.forEach(container => { container.classList.remove('processing'); }); // 滚动到结果区域 document.querySelectorAll('.modern-container')[1].scrollIntoView({ behavior: 'smooth' }); </script> """, unsafe_allow_html=True ) st.success("🎉 创作完成！") st.balloons() # 重新运行以更新界面 st.rerun() # 页脚信息 st.markdown("---") st.markdown(""" <div style="text-align: center; color: #666; font-size: 0.9em;"> <p>💡 提示：本工具基于 Z-Image Turbo 模型，专为辉夜大小姐（日奈娇）风格优化</p> <p>🔧 技术支持：本地运行 · 显存优化 · 响应式设计</p> </div> """, unsafe_allow_html=True)