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

智谱AI GLM-Image教程：Gradio状态管理与跨组件数据传递

news 2026/3/27 1:36:09

智谱AI GLM-Image教程：Gradio状态管理与跨组件数据传递

1. 引言：从简单界面到复杂交互

当你第一次打开GLM-Image的Web界面，可能会觉得它很简单：一个输入框、几个滑块、一个生成按钮。但当你真正开始用它创作时，很快就会发现一个问题——状态管理太乱了。

想象一下这个场景：

你生成了第一张“赛博朋克城市”的图片，效果不错
你想微调一下，把分辨率从1024x1024改成512x512
你点击生成，结果……模型又重新加载了一遍？还是说参数没保存？

这就是典型的状态管理问题。在简单的Gradio应用中，每个组件都是孤立的，它们不知道彼此的状态变化。今天，我就来带你解决这个问题，让GLM-Image的Web界面变得真正智能起来。

学完这篇教程，你将掌握：

Gradio状态管理的基本原理
如何让不同组件共享数据
如何实现“记住用户设置”的功能
如何构建更流畅的AI图像生成体验

不需要你已经是Gradio专家，我会用最直白的方式讲解，保证你能跟着做出来。

2. 理解Gradio的状态管理问题

2.1 当前GLM-Image界面的局限性

我们先来看看现在这个界面有什么问题。打开/root/build/webui.py，找到主要的界面代码部分：

# 当前的问题代码示例 def create_ui(): with gr.Blocks() as demo: # 输入组件 prompt = gr.Textbox(label="正向提示词") negative_prompt = gr.Textbox(label="负向提示词") # 参数组件 width = gr.Slider(512, 2048, 1024, step=64, label="宽度") height = gr.Slider(512, 2048, 1024, step=64, label="高度") steps = gr.Slider(20, 100, 50, step=5, label="推理步数") # 生成按钮 generate_btn = gr.Button("生成图像") # 输出组件 output_image = gr.Image(label="生成结果") # 事件绑定 generate_btn.click( generate_image, inputs=[prompt, negative_prompt, width, height, steps], outputs=output_image )

问题在哪里？

状态孤立：width和height滑块的值，其他组件完全不知道
无法记忆：每次刷新页面，所有设置都恢复默认
缺乏联动：改变分辨率时，不能自动调整其他相关参数
用户体验差：用户需要反复设置相同的参数

2.2 状态管理的核心概念

在深入代码之前，我们先理解几个关键概念：

什么是状态？状态就是应用在某个时刻的“快照”。比如：

用户输入的提示词是什么
分辨率设置是多少
模型是否已经加载完成
上一次生成的图片是什么

为什么需要状态管理？

保持一致性：确保所有组件显示的是同一套数据
提高效率：避免重复计算和重复请求
改善体验：记住用户偏好，减少重复操作
支持复杂交互：实现组件间的联动效果

Gradio的状态管理方式：

Session State：会话状态，存储在服务器端，每个用户独立
Component Value：组件值，通过事件传递
Global Variables：全局变量，简单但不够灵活

3. 基础实践：为GLM-Image添加会话状态

3.1 第一步：初始化会话状态

我们先从最简单的开始——让应用记住用户的设置。修改webui.py，在文件开头添加状态管理：

import gradio as gr from typing import Dict, Any import json import os # 状态管理类 class AppState: def __init__(self): # 默认状态 self.default_state = { "prompt": "", "negative_prompt": "", "width": 1024, "height": 1024, "steps": 50, "guidance_scale": 7.5, "seed": -1, "model_loaded": False, "last_image_path": None } # 状态文件路径 self.state_file = "/root/build/cache/app_state.json" # 当前状态 self.current_state = self.load_state() def load_state(self): """从文件加载状态""" if os.path.exists(self.state_file): try: with open(self.state_file, 'r', encoding='utf-8') as f: return json.load(f) except: return self.default_state.copy() return self.default_state.copy() def save_state(self): """保存状态到文件""" try: with open(self.state_file, 'w', encoding='utf-8') as f: json.dump(self.current_state, f, ensure_ascii=False, indent=2) except: pass def update(self, key: str, value: Any): """更新状态""" self.current_state[key] = value self.save_state() def get(self, key: str, default=None): """获取状态""" return self.current_state.get(key, default) # 创建全局状态实例 app_state = AppState()

3.2 第二步：改造界面组件

现在我们来修改界面组件，让它们使用状态而不是硬编码的默认值：

def create_ui(): with gr.Blocks() as demo: # 使用状态初始化组件 prompt = gr.Textbox( label="正向提示词", value=app_state.get("prompt", ""), placeholder="描述你想要生成的图像..." ) negative_prompt = gr.Textbox( label="负向提示词", value=app_state.get("negative_prompt", ""), placeholder="描述你不想要的内容..." ) width = gr.Slider( minimum=512, maximum=2048, value=app_state.get("width", 1024), step=64, label="宽度" ) height = gr.Slider( minimum=512, maximum=2048, value=app_state.get("height", 1024), step=64, label="高度" ) steps = gr.Slider( minimum=20, maximum=100, value=app_state.get("steps", 50), step=5, label="推理步数" ) # 添加状态保存的回调 def save_prompt(prompt_text): app_state.update("prompt", prompt_text) return prompt_text def save_negative_prompt(neg_prompt): app_state.update("negative_prompt", neg_prompt) return neg_prompt def save_width(w): app_state.update("width", w) return w def save_height(h): app_state.update("height", h) return h def save_steps(s): app_state.update("steps", s) return s # 绑定change事件 prompt.change(fn=save_prompt, inputs=prompt, outputs=prompt) negative_prompt.change(fn=save_negative_prompt, inputs=negative_prompt, outputs=negative_prompt) width.change(fn=save_width, inputs=width, outputs=width) height.change(fn=save_height, inputs=height, outputs=height) steps.change(fn=save_steps, inputs=steps, outputs=steps) # 其他组件...

这样做的效果：

用户关闭浏览器再打开，提示词还在
分辨率设置会被记住
所有参数都会自动保存
不需要用户手动点击“保存设置”

3.3 第三步：测试状态管理

让我们写一个简单的测试函数，看看状态管理是否正常工作：

def test_state_management(): """测试状态管理功能""" print("=== 状态管理测试 ===") # 模拟用户操作 print("1. 初始状态:") print(f" 提示词: {app_state.get('prompt')}") print(f" 宽度: {app_state.get('width')}") # 更新状态 print("\n2. 更新状态...") app_state.update("prompt", "一只可爱的猫") app_state.update("width", 768) print("3. 更新后的状态:") print(f" 提示词: {app_state.get('prompt')}") print(f" 宽度: {app_state.get('width')}") # 保存到文件 app_state.save_state() print("\n4. 状态已保存到文件") # 重新加载测试 new_state = AppState() print("\n5. 重新加载状态:") print(f" 提示词: {new_state.get('prompt')}") print(f" 宽度: {new_state.get('width')}") print("\n✅ 状态管理测试完成") # 在启动时运行测试 if __name__ == "__main__": test_state_management() # 启动WebUI...

运行这个测试，你会看到状态确实被保存和恢复了。现在，我们的GLM-Image界面已经有了基础的记忆功能。

4. 进阶技巧：组件间的数据传递与联动

4.1 场景一：分辨率与性能提示联动

一个很实用的功能是：当用户选择高分辨率时，自动显示性能警告。我们来实现这个功能：

def create_ui_with_performance_warning(): with gr.Blocks() as demo: # 分辨率组件 width = gr.Slider(512, 2048, 1024, step=64, label="宽度") height = gr.Slider(512, 2048, 1024, step=64, label="高度") # 性能警告组件（初始隐藏） warning_box = gr.HTML( value="", visible=False, elem_classes="warning-box" ) # 联动函数 def update_warning(width_val, height_val): """根据分辨率更新警告信息""" total_pixels = width_val * height_val if total_pixels > 1024 * 1024: # 超过1MP warning_text = f""" <div style=" background-color: #fff3cd; border: 1px solid #ffeaa7; border-radius: 5px; padding: 10px; margin: 10px 0; color: #856404; "> ⚠️ <strong>性能提示</strong><br> 当前分辨率: {width_val}x{height_val} ({total_pixels:,} 像素)<br> 预计生成时间: 2-3分钟<br> 建议显存: 16GB+ </div> """ return gr.update(value=warning_text, visible=True) else: return gr.update(visible=False) # 绑定事件 width.change( fn=update_warning, inputs=[width, height], outputs=warning_box ) height.change( fn=update_warning, inputs=[width, height], outputs=warning_box ) # 其他组件... return demo

这个功能的好处：

用户选择2048x2048时，自动看到警告
不需要用户自己计算像素数
提供实用的性能参考
提升用户体验，避免长时间等待的失望

4.2 场景二：随机种子与“重新生成”功能

另一个常见需求是：用相同的参数重新生成图片。这需要组件间共享随机种子：

def create_ui_with_seed_management(): with gr.Blocks() as demo: # 随机种子组件 seed_slider = gr.Slider( minimum=-1, maximum=999999, value=-1, step=1, label="随机种子 (-1表示随机)" ) seed_display = gr.Textbox( label="当前种子", value="-1", interactive=False ) # 生成按钮 generate_btn = gr.Button("生成图像", variant="primary") regenerate_btn = gr.Button("重新生成", variant="secondary") # 输出图像 output_image = gr.Image(label="生成结果") # 状态变量（在Gradio中） current_seed = gr.State(value=-1) last_params = gr.State(value={}) # 生成函数 def generate_image(prompt, width, height, steps, seed): """生成图像的主函数""" import random import time # 处理随机种子 if seed == -1: actual_seed = random.randint(0, 999999) else: actual_seed = seed # 模拟生成过程 time.sleep(2) # 模拟生成时间 # 保存参数 params = { "prompt": prompt, "width": width, "height": height, "steps": steps, "seed": actual_seed } # 返回结果和状态 return ( f"生成的图片（种子: {actual_seed}）", # 模拟图片 actual_seed, # 更新当前种子 params # 保存参数 ) # 重新生成函数 def regenerate_image(last_params_dict): """使用上次参数重新生成""" if not last_params_dict: return "请先生成一张图片", -1, {} # 使用相同的参数重新生成 result = generate_image( prompt=last_params_dict["prompt"], width=last_params_dict["width"], height=last_params_dict["height"], steps=last_params_dict["steps"], seed=last_params_dict["seed"] # 使用相同的种子 ) return result # 事件绑定 generate_btn.click( fn=generate_image, inputs=[prompt, width, height, steps, seed_slider], outputs=[output_image, current_seed, last_params] ).then( fn=lambda seed: str(seed), inputs=current_seed, outputs=seed_display ) regenerate_btn.click( fn=regenerate_image, inputs=last_params, outputs=[output_image, current_seed, last_params] ).then( fn=lambda seed: str(seed), inputs=current_seed, outputs=seed_display ) return demo

关键点解析：

gr.State()：Gradio提供的状态组件，可以在事件链中传递数据
.then()方法：实现链式调用，一个操作完成后执行下一个
参数保存：把上次生成的所有参数保存起来
重新生成：使用完全相同的参数再次生成

4.3 场景三：批量生成与进度共享

对于AI图像生成，批量生成是个很实用的功能。我们来实现一个简单的批量生成系统：

def create_batch_generation_ui(): with gr.Blocks() as demo: # 批量生成设置 batch_size = gr.Slider(1, 10, 3, step=1, label="生成数量") batch_progress = gr.Slider(0, 100, 0, interactive=False, label="生成进度") batch_status = gr.Textbox("准备就绪", label="状态", interactive=False) # 批量结果展示 batch_results = gr.Gallery( label="批量生成结果", columns=3, height="auto" ) # 状态 current_batch = gr.State(value=[]) is_generating = gr.State(value=False) # 批量生成函数 def batch_generate(prompt, width, height, steps, size): """批量生成图像""" import time import random results = [] for i in range(size): # 更新进度 progress = int((i + 1) / size * 100) status = f"正在生成第 {i+1}/{size} 张..." # 生成图片（模拟） seed = random.randint(0, 999999) # 这里应该是实际的生成代码 # image = generate_single_image(prompt, width, height, steps, seed) # 模拟生成 time.sleep(1) image_data = f"图片 {i+1} (种子: {seed})" results.append(image_data) # 返回中间结果 yield { batch_results: results, batch_progress: progress, batch_status: status } # 完成 yield { batch_results: results, batch_progress: 100, batch_status: "批量生成完成！" } # 事件绑定 generate_btn.click( fn=batch_generate, inputs=[prompt, width, height, steps, batch_size], outputs=[batch_results, batch_progress, batch_status] ) return demo

这个批量生成系统的特点：

实时进度更新：用户可以看到生成进度
逐步显示结果：生成一张显示一张，不用等全部完成
状态反馈：明确的文字提示当前状态
可中断设计：虽然这里没实现，但架构支持中断

5. 实战：为GLM-Image添加完整的状态管理系统

现在，我们把所有技巧整合起来，为GLM-Image打造一个完整的状态管理系统。

5.1 完整的webui.py改造

#!/usr/bin/env python3 """ GLM-Image WebUI with Advanced State Management """ import gradio as gr import json import os from datetime import datetime from typing import Dict, List, Any, Optional import hashlib # ==================== 状态管理类 ==================== class GLMImageState: """GLM-Image应用状态管理器""" def __init__(self, cache_dir: str = "/root/build/cache"): self.cache_dir = cache_dir self.state_file = os.path.join(cache_dir, "app_state_v2.json") self.history_file = os.path.join(cache_dir, "generation_history.json") # 确保目录存在 os.makedirs(cache_dir, exist_ok=True) # 加载状态 self.state = self._load_state() self.history = self._load_history() def _load_state(self) -> Dict: """加载应用状态""" default_state = { "ui": { "prompt": "a beautiful landscape", "negative_prompt": "blurry, low quality", "width": 1024, "height": 1024, "steps": 50, "guidance_scale": 7.5, "seed": -1, "model_loaded": False }, "settings": { "auto_save": True, "show_preview": True, "default_resolution": "1024x1024", "theme": "light" }, "user": { "favorite_prompts": [], "recent_images": [], "total_generations": 0 } } if os.path.exists(self.state_file): try: with open(self.state_file, 'r', encoding='utf-8') as f: loaded = json.load(f) # 合并默认值和加载值 return self._merge_dicts(default_state, loaded) except: return default_state return default_state def _load_history(self) -> List: """加载生成历史""" if os.path.exists(self.history_file): try: with open(self.history_file, 'r', encoding='utf-8') as f: return json.load(f) except: return [] return [] def _merge_dicts(self, base: Dict, update: Dict) -> Dict: """深度合并字典""" result = base.copy() for key, value in update.items(): if key in result and isinstance(result[key], dict) and isinstance(value, dict): result[key] = self._merge_dicts(result[key], value) else: result[key] = value return result def save(self): """保存所有状态""" try: with open(self.state_file, 'w', encoding='utf-8') as f: json.dump(self.state, f, ensure_ascii=False, indent=2) # 只保留最近100条历史记录 if len(self.history) > 100: self.history = self.history[-100:] with open(self.history_file, 'w', encoding='utf-8') as f: json.dump(self.history, f, ensure_ascii=False, indent=2) except Exception as e: print(f"保存状态失败: {e}") def update_ui_state(self, key: str, value: Any): """更新UI状态""" keys = key.split('.') target = self.state['ui'] for k in keys[:-1]: if k not in target: target[k] = {} target = target[k] target[keys[-1]] = value self.save() def add_to_history(self, generation_data: Dict): """添加到生成历史""" generation_data['timestamp'] = datetime.now().isoformat() generation_data['id'] = hashlib.md5( json.dumps(generation_data, sort_keys=True).encode() ).hexdigest()[:8] self.history.append(generation_data) self.state['user']['total_generations'] += 1 self.save() def get_recent_history(self, limit: int = 10) -> List: """获取最近的生成历史""" return self.history[-limit:] if self.history else [] def get_favorite_prompts(self) -> List[str]: """获取收藏的提示词""" return self.state['user'].get('favorite_prompts', []) def add_favorite_prompt(self, prompt: str): """添加收藏提示词""" if prompt not in self.state['user']['favorite_prompts']: self.state['user']['favorite_prompts'].append(prompt) self.save() # ==================== UI组件工厂 ==================== class ComponentFactory: """创建带有状态管理的UI组件""" def __init__(self, state_manager: GLMImageState): self.state = state_manager def create_prompt_input(self): """创建提示词输入框""" current_prompt = self.state.state['ui']['prompt'] prompt_box = gr.Textbox( label="正向提示词", value=current_prompt, placeholder="描述你想要生成的图像...", lines=3 ) # 绑定状态更新 def update_prompt(prompt): self.state.update_ui_state('prompt', prompt) return prompt prompt_box.change(fn=update_prompt, inputs=prompt_box, outputs=prompt_box) return prompt_box def create_parameter_sliders(self): """创建参数滑块组""" ui_state = self.state.state['ui'] # 分辨率滑块 width = gr.Slider( minimum=512, maximum=2048, value=ui_state['width'], step=64, label="宽度" ) height = gr.Slider( minimum=512, maximum=2048, value=ui_state['height'], step=64, label="高度" ) # 绑定状态更新 def update_width(w): self.state.update_ui_state('width', w) return w def update_height(h): self.state.update_ui_state('height', h) return h width.change(fn=update_width, inputs=width, outputs=width) height.change(fn=update_height, inputs=height, outputs=height) return width, height def create_preset_buttons(self): """创建预设按钮""" presets = [ ("肖像画", "1024x1024", "portrait of a person, highly detailed, professional photography"), ("风景画", "1024x768", "beautiful landscape, mountains, sunset, 8k, ultra detailed"), ("动漫风格", "768x1024", "anime style, cute character, vibrant colors, masterpiece"), ("科幻场景", "1024x1024", "cyberpunk city, neon lights, rain, futuristic, cinematic") ] preset_components = [] for name, resolution, prompt in presets: btn = gr.Button(name, size="sm") def create_preset_handler(res=resolution, prom=prompt): def handler(): # 解析分辨率 w, h = map(int, res.split('x')) return prom, w, h return handler preset_components.append(btn) return preset_components # ==================== 主UI构建 ==================== def create_advanced_ui(): """创建带有高级状态管理的UI""" # 初始化状态管理器 state_manager = GLMImageState() component_factory = ComponentFactory(state_manager) with gr.Blocks( title="GLM-Image Pro", theme=gr.themes.Soft(), css=""" .warning-box { border-left: 4px solid #ff9800; padding: 10px; } .success-box { border-left: 4px solid #4caf50; padding: 10px; } .preset-btn { margin: 5px; } """ ) as demo: # ========== 标题区域 ========== gr.Markdown("# 🎨 GLM-Image 智能图像生成") gr.Markdown("基于智谱AI GLM-Image模型的高级Web界面") # ========== 主控制区域 ========== with gr.Row(): with gr.Column(scale=2): # 提示词区域 prompt_input = component_factory.create_prompt_input() negative_prompt = gr.Textbox( label="负向提示词", value=state_manager.state['ui']['negative_prompt'], placeholder="描述你不想要的内容..." ) # 参数区域 with gr.Row(): width, height = component_factory.create_parameter_sliders() with gr.Row(): steps = gr.Slider(20, 100, 50, step=5, label="推理步数") guidance = gr.Slider(1.0, 20.0, 7.5, step=0.5, label="引导系数") seed = gr.Number(-1, label="随机种子", precision=0) # 预设按钮 gr.Markdown("### 快速预设") preset_btns = component_factory.create_preset_buttons() # 操作按钮 with gr.Row(): generate_btn = gr.Button("🚀 生成图像", variant="primary", size="lg") load_model_btn = gr.Button("📥 加载模型", variant="secondary") clear_btn = gr.Button("🗑️ 清空", variant="secondary") with gr.Column(scale=1): # 状态显示区域 gr.Markdown("### 状态信息") model_status = gr.HTML( value="<div class='warning-box'>模型未加载</div>", label="模型状态" ) performance_warning = gr.HTML( value="", label="性能提示" ) # 生成历史 gr.Markdown("### 最近生成") history_gallery = gr.Gallery( label="历史记录", columns=2, height=300, show_label=False ) # ========== 结果展示区域 ========== gr.Markdown("## 生成结果") with gr.Row(): output_image = gr.Image( label="当前生成", height=500 ) with gr.Column(): generation_info = gr.JSON( label="生成参数", value={} ) save_btn = gr.Button("💾 保存到收藏") share_btn = gr.Button("🔗 分享链接") # ========== 状态变量 ========== current_generation = gr.State(value={}) is_model_loaded = gr.State(value=False) # ========== 事件处理函数 ========== def update_performance_warning(width_val, height_val): """更新性能警告""" megapixels = (width_val * height_val) / 1_000_000 if megapixels > 2.0: return f""" <div class='warning-box'> ⚠️ <b>高分辨率警告</b><br> 当前: {width_val}x{height_val} ({megapixels:.1f}MP)<br> 预计时间: 3-5分钟<br> 建议使用: 步骤≤30 </div> """ elif megapixels > 1.0: return f""" <div class='warning-box'> ⚠️ <b>中等分辨率</b><br> 当前: {width_val}x{height_val} ({megapixels:.1f}MP)<br> 预计时间: 1-3分钟 </div> """ return "" def load_model_handler(): """加载模型""" # 这里应该是实际的模型加载代码 # model = load_glm_image_model() # 模拟加载 import time time.sleep(2) return ( "<div class='success-box'>✅ 模型加载成功</div>", True ) def generate_image_handler(prompt, neg_prompt, w, h, s, g, seed_val): """生成图像处理函数""" # 这里应该是实际的图像生成代码 # image = generate_with_glm(prompt, w, h, s, g, seed_val) # 模拟生成 import time import random if seed_val == -1: actual_seed = random.randint(0, 999999) else: actual_seed = seed_val time.sleep(1) # 模拟生成时间 # 构建生成数据 generation_data = { "prompt": prompt, "negative_prompt": neg_prompt, "width": w, "height": h, "steps": s, "guidance_scale": g, "seed": actual_seed, "timestamp": datetime.now().isoformat(), "image_url": f"generated_{actual_seed}.png" # 模拟图片URL } # 添加到历史 state_manager.add_to_history(generation_data) # 更新最近历史显示 recent = state_manager.get_recent_history(6) history_images = [item.get("image_url", "") for item in recent] return ( f"生成的图像 (种子: {actual_seed})", # 模拟图像 generation_data, history_images ) # ========== 事件绑定 ========== # 性能警告 width.change( fn=update_performance_warning, inputs=[width, height], outputs=performance_warning ) height.change( fn=update_performance_warning, inputs=[width, height], outputs=performance_warning ) # 加载模型 load_model_btn.click( fn=load_model_handler, outputs=[model_status, is_model_loaded] ) # 生成图像 generate_btn.click( fn=generate_image_handler, inputs=[prompt_input, negative_prompt, width, height, steps, guidance, seed], outputs=[output_image, current_generation, history_gallery] ) # 预设按钮事件 for i, btn in enumerate(preset_btns): btn.click( fn=lambda idx=i: ( presets[idx][2], # prompt int(presets[idx][1].split('x')[0]), # width int(presets[idx][1].split('x')[1]) # height ), outputs=[prompt_input, width, height] ) # 保存到收藏 def save_to_favorites(gen_data): if gen_data: state_manager.add_favorite_prompt(gen_data.get("prompt", "")) return "✅ 已添加到收藏" return "请先生成一张图片" save_btn.click( fn=save_to_favorites, inputs=current_generation, outputs=gr.Textbox(visible=False) # 可以改成Toast提示 ) # 初始化性能警告 demo.load( fn=lambda: update_performance_warning( state_manager.state['ui']['width'], state_manager.state['ui']['height'] ), outputs=performance_warning ) return demo # ==================== 主程序 ==================== def main(): """主函数""" print("启动 GLM-Image Pro WebUI...") print(f"状态文件: /root/build/cache/app_state_v2.json") print(f"历史文件: /root/build/cache/generation_history.json") # 创建UI demo = create_advanced_ui() # 启动服务 demo.launch( server_name="0.0.0.0", server_port=7860, share=False, debug=True ) if __name__ == "__main__": main()

5.2 配套的CSS样式文件

为了让界面更美观，我们添加一个CSS文件：

/* /root/build/static/style.css */ :root { --primary-color: #6366f1; --secondary-color: #8b5cf6; --warning-color: #f59e0b; --success-color: #10b981; --danger-color: #ef4444; } /* 警告框样式 */ .warning-box { background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%); border-left: 4px solid var(--warning-color); padding: 12px 16px; border-radius: 8px; margin: 10px 0; box-shadow: 0 2px 4px rgba(0,0,0,0.05); } .success-box { background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%); border-left: 4px solid var(--success-color); padding: 12px 16px; border-radius: 8px; margin: 10px 0; box-shadow: 0 2px 4px rgba(0,0,0,0.05); } /* 按钮样式 */ .preset-btn { background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)); color: white; border: none; padding: 8px 16px; border-radius: 6px; cursor: pointer; transition: all 0.3s ease; margin: 4px; } .preset-btn:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3); } /* 滑块样式 */ input[type="range"] { accent-color: var(--primary-color); } /* 画廊样式 */ .gallery-container { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; padding: 16px; background: #f8fafc; border-radius: 12px; border: 1px solid #e2e8f0; } .gallery-item { border-radius: 8px; overflow: hidden; transition: transform 0.3s ease; cursor: pointer; } .gallery-item:hover { transform: scale(1.05); } /* 响应式设计 */ @media (max-width: 768px) { .gallery-container { grid-template-columns: repeat(2, 1fr); } .preset-btn { width: 100%; margin: 4px 0; } }

5.3 部署和测试脚本

最后，我们创建一个部署和测试脚本：

#!/bin/bash # /root/build/deploy_with_state.sh echo "🚀 部署 GLM-Image Pro 版本..." # 备份原始文件 if [ -f "/root/build/webui.py" ]; then cp "/root/build/webui.py" "/root/build/webui.py.backup.$(date +%Y%m%d_%H%M%S)" echo "✅ 已备份原始 webui.py" fi # 创建缓存目录 mkdir -p /root/build/cache mkdir -p /root/build/static # 复制新文件 echo "📁 设置文件权限..." chmod +x /root/build/*.py chmod +x /root/build/*.sh # 安装额外依赖（如果需要） echo "📦 检查Python依赖..." pip install gradio==4.19.0 --upgrade # 启动测试 echo "🧪 运行状态管理测试..." python3 -c " import sys sys.path.append('/root/build') try: from webui import GLMImageState state = GLMImageState() print('✅ 状态管理器测试通过') # 测试基本功能 state.update_ui_state('test_key', 'test_value') state.save() # 验证保存 import os if os.path.exists('/root/build/cache/app_state_v2.json'): print('✅ 状态文件创建成功') else: print('❌ 状态文件创建失败') except Exception as e: print(f'❌ 测试失败: {e}') sys.exit(1) " # 启动服务 echo "🌐 启动 WebUI 服务..." cd /root/build python3 webui.py