Z-Image-Turbo-辉夜巫女Gradio定制修改UI标题、添加版权提示与使用说明1. 引言为什么需要定制Gradio界面当你部署好一个AI模型比如我们这里用Xinference部署的Z-Image-Turbo-辉夜巫女文生图模型第一件事是什么当然是打开界面开始使用。但默认的Gradio界面往往比较朴素——标题是默认的没有使用说明也没有版权信息。想象一下这个场景你把模型分享给朋友或同事他们打开界面后一脸茫然这是什么工具怎么用需要注意什么 这时候一个经过定制的界面就显得特别重要了。它不仅能提升用户体验还能保护你的劳动成果明确使用规则。今天我就带你一步步改造这个辉夜巫女图片生成器的Gradio界面。我们会做三件事修改UI标题让界面一眼就能看出是做什么的添加版权提示保护你的模型不被滥用添加使用说明让新手也能快速上手整个过程不需要复杂的代码跟着我做10分钟就能搞定。无论你是AI开发者还是普通用户都能轻松掌握。2. 准备工作了解你的模型服务在开始定制之前我们先确认一下模型服务是否正常运行。这是基础就像装修房子前要先确认房子结构完好一样。2.1 检查模型服务状态打开终端运行这个命令查看服务日志cat /root/workspace/xinference.log如果你看到类似下面的输出说明模型启动成功了INFO: Started server process [1234] INFO: Waiting for application startup. INFO: Application startup complete. INFO: Uvicorn running on http://0.0.0.0:9997 (Press CTRLC to quit)关键点看到Application startup complete和具体的端口号比如这里的9997就说明服务已经就绪可以正常访问了。2.2 访问默认界面服务启动后在CSDN星图镜像的控制台找到webui按钮点击进入。你会看到一个基础的Gradio界面大概长这样左上角是默认的Gradio标题中间有一个文本输入框下面有一个Submit按钮右侧是图片显示区域现在试着输入一个简单的提示词看看效果辉夜巫女点击生成如果一切正常你应该能看到一张日系风格的巫女图片。这说明模型工作正常我们可以开始定制界面了。3. 定制第一步修改UI标题和描述默认的Gradio标题太普通了我们要把它改成更有辨识度的名字。同时加上一段描述让用户一眼就知道这个工具是做什么的。3.1 找到并修改Gradio应用文件首先我们需要找到运行Gradio界面的Python文件。通常它会在/root/workspace/目录下文件名可能是app.py、webui.py或者gradio_app.py。用文本编辑器打开这个文件找到创建Gradio界面的代码。它大概长这样import gradio as gr # 原来的代码可能是这样的 demo gr.Interface( fngenerate_image, # 生成图片的函数 inputsgr.Textbox(label输入提示词), # 输入框 outputsgr.Image(label生成的图片), # 输出图片 titleGradio, # 这里就是我们要改的标题 description, # 这里可以添加描述 )3.2 修改标题和描述我们把上面的代码改成这样import gradio as gr demo gr.Interface( fngenerate_image, inputsgr.Textbox( label✨ 请输入图片描述, placeholder例如辉夜巫女在樱花树下祈福, lines2 ), outputsgr.Image( label 生成的辉夜巫女图片, typepil ), title辉夜巫女图片生成器 - Z-Image-Turbo定制版, description ## 工具简介 这是一个基于Z-Image-Turbo模型的辉夜巫女风格图片生成器。 ## 使用说明 1. 在左侧输入框描述你想要的画面 2. 点击生成图片按钮 3. 等待几秒钟右侧就会显示生成的图片 ## 提示词建议 - 简单描述辉夜巫女 - 详细描述辉夜巫女穿着传统服饰在月光下的神社前 - 场景描述辉夜巫女在樱花雨中起舞背景是古老的神社 , themesoft, # 使用更柔和的主题 )修改说明title改成了辉夜巫女图片生成器 - Z-Image-Turbo定制版明确工具用途description添加了工具简介、使用步骤和提示词建议inputs输入框加了placeholder占位提示告诉用户可以输入什么outputs输出图片的标签也改得更明确theme换了一个更美观的主题3.3 测试修改效果保存文件后Gradio界面会自动刷新如果没有可能需要重启服务。刷新后你会看到标题变成了我们设置的新标题下方有了详细的使用说明输入框有了示例提示整体界面看起来更专业、更友好了4. 定制第二步添加版权提示和使用条款版权提示很重要特别是当你分享模型给其他人使用时。它能明确告知用户使用规则避免不必要的纠纷。4.1 在界面中添加版权信息我们继续修改Gradio的创建代码添加一个专门的版权区域。在description后面添加一个新的参数articledemo gr.Interface( # ... 前面的参数保持不变 ... article ## ⚠️ 重要声明 ### 版权信息 - 模型名称Z-Image-Turbo-辉夜巫女 - 开发者个人开发者 - 开源协议保留所有权利 ### 使用条款 1. **个人使用**欢迎用于个人学习、研究和非商业创作 2. **禁止商用**未经许可不得用于任何商业用途 3. **禁止滥用**不得用于生成违法、违规或不适当内容 4. **保留权利**开发者保留对模型和界面的修改、更新权利 ### 联系方式 如有问题或建议请访问[开发者博客](https://sonhhxg0529.blog.csdn.net/) --- *使用本工具即表示您同意以上条款* , # ... 其他参数 ... )4.2 添加更醒目的顶部提示如果你觉得上面的版权信息还不够明显可以在界面顶部添加一个更醒目的提示框。Gradio提供了gr.Markdown组件来实现这个效果# 先创建各个组件 with gr.Blocks(title辉夜巫女图片生成器 - Z-Image-Turbo定制版, themesoft) as demo: # 顶部版权提示红色边框更醒目 gr.Markdown( div style border: 2px solid #ff6b6b; border-radius: 10px; padding: 15px; margin-bottom: 20px; background-color: #fff5f5; h3 stylecolor: #d63031; margin-top: 0;⚠️ 重要提示/h3 pstrong版权声明/strong本工具基于Z-Image-Turbo-辉夜巫女模型仅供个人学习研究使用。/p pstrong禁止商用/strong未经授权不得用于任何商业用途。/p pstrong问题反馈/strong如有问题请联系 a hrefhttps://sonhhxg0529.blog.csdn.net/开发者博客/a/p /div ) # 工具简介 gr.Markdown( ## 辉夜巫女图片生成器 这是一个基于Z-Image-Turbo模型的日系巫女风格图片生成工具。 输入文字描述即可生成独特的辉夜巫女图片。 ) # 输入输出区域 with gr.Row(): with gr.Column(): prompt_input gr.Textbox( label✨ 描述你想要的画面, placeholder例如辉夜巫女在樱花树下祈福月光洒在神社的石阶上..., lines3 ) generate_btn gr.Button(生成图片, variantprimary) with gr.Column(): output_image gr.Image( label 生成结果, typepil, height500 ) # 示例提示词 with gr.Accordion( 点击查看提示词示例, openFalse): gr.Markdown( ### 简单提示词 - 辉夜巫女 - 巫女祈祷 - 神社的巫女 ### 详细提示词 - 辉夜巫女穿着红白巫女服在樱花树下祈福 - 月光下的巫女背景是古老的神社建筑 - 巫女在晨雾中清扫神社的石阶 ### 场景提示词 - 辉夜巫女在樱花雨中起舞花瓣飘落 - 巫女在神社前点燃灯笼夜晚氛围 - 下雨天巫女撑着纸伞走过鸟居 ) # 底部使用条款 gr.Markdown( --- ## 使用条款与免责声明 1. **使用范围**本工具仅供个人学习、研究和非商业创作使用。 2. **禁止事项**严禁用于商业用途、违法活动或生成不当内容。 3. **责任声明**使用者应对生成内容负全部责任开发者不承担任何连带责任。 4. **版权保护**模型及相关代码保留所有权利。 5. **问题反馈**[开发者博客](https://sonhhxg0529.blog.csdn.net/) *使用本工具即表示您已阅读、理解并同意以上所有条款。* ) # 连接按钮和函数 generate_btn.click( fngenerate_image, inputsprompt_input, outputsoutput_image )这样设计的好处顶部醒目标识用户一打开就能看到版权提示清晰的功能区域输入、输出、示例分开界面整洁可折叠的示例不占用太多空间需要时再展开详细的底部条款完整的法律声明美观的样式通过CSS简单美化体验更好5. 定制第三步优化用户体验除了基本的标题和版权我们还可以添加一些实用功能让工具更好用。5.1 添加生成参数控制有时候用户可能想调整生成效果我们可以添加一些简单的参数控制with gr.Blocks(title辉夜巫女图片生成器 - Z-Image-Turbo定制版, themesoft) as demo: # ... 顶部版权和简介保持不变 ... with gr.Row(): with gr.Column(): prompt_input gr.Textbox( label✨ 图片描述, placeholder描述你想要的辉夜巫女画面..., lines3 ) # 参数控制区域 with gr.Accordion(⚙️ 高级参数可选, openFalse): image_size gr.Radio( [512x512, 768x768, 512x768], label图片尺寸, value512x512 ) guidance_scale gr.Slider( minimum1.0, maximum20.0, value7.5, label生成强度, info数值越高越贴近描述但可能降低多样性 ) num_steps gr.Slider( minimum10, maximum50, value25, step5, label生成步数, info步数越多质量可能越高但需要更长时间 ) generate_btn gr.Button( 生成图片, variantprimary, sizelg) with gr.Column(): output_image gr.Image( label生成结果, typepil, height500 ) download_btn gr.Button( 下载图片, variantsecondary) # ... 其他部分保持不变 ...5.2 添加生成历史记录对于图片生成工具历史记录功能很实用。我们可以简单实现一个import os from datetime import datetime # 创建保存图片的目录 os.makedirs(generated_images, exist_okTrue) def generate_and_save(prompt, size512x512, guidance7.5, steps25): 生成图片并保存到本地 # 调用模型生成图片这里需要根据你的实际模型调整 image generate_image(prompt, size, guidance, steps) # 生成文件名时间提示词前10个字符 timestamp datetime.now().strftime(%Y%m%d_%H%M%S) safe_prompt .join([c for c in prompt[:20] if c.isalnum()]) filename fgenerated_images/{timestamp}_{safe_prompt}.png # 保存图片 image.save(filename) # 更新历史记录文件 with open(generation_history.txt, a, encodingutf-8) as f: f.write(f{timestamp}|{prompt}|{filename}\n) return image, f图片已保存为{filename} # 在Gradio界面中添加历史记录显示 with gr.Blocks() as demo: # ... 前面的界面代码 ... # 历史记录区域 with gr.Accordion( 生成历史最近5次, openFalse): history_output gr.Textbox( label历史记录, lines5, interactiveFalse ) refresh_btn gr.Button( 刷新历史) # 更新按钮事件 generate_btn.click( fngenerate_and_save, inputs[prompt_input, image_size, guidance_scale, num_steps], outputs[output_image, history_output] ) # 刷新历史记录的函数 def load_history(): if os.path.exists(generation_history.txt): with open(generation_history.txt, r, encodingutf-8) as f: lines f.readlines()[-5:] # 只显示最近5条 return .join(lines) return 暂无生成记录 refresh_btn.click( fnload_history, outputshistory_output )5.3 添加图片放大功能有时候生成的图片尺寸较小我们可以添加一个简单的放大功能from PIL import Image def upscale_image(input_image, scale2): 简单放大图片 if input_image is None: return None, 请先生成图片 width, height input_image.size new_size (width * scale, height * scale) # 使用高质量的重采样方法 upscaled input_image.resize(new_size, Image.Resampling.LANCZOS) # 保存放大后的图片 timestamp datetime.now().strftime(%Y%m%d_%H%M%S) filename fgenerated_images/upscaled_{timestamp}.png upscaled.save(filename) return upscaled, f图片已放大并保存为{filename} # 在界面中添加放大功能 with gr.Blocks() as demo: # ... 前面的界面代码 ... with gr.Row(): # 生成按钮列 with gr.Column(): generate_btn gr.Button( 生成图片, variantprimary) # 放大按钮列 with gr.Column(): upscale_btn gr.Button( 放大图片2倍, variantsecondary) upscale_status gr.Textbox( label放大状态, interactiveFalse, visibleFalse ) # 放大功能 upscale_btn.click( fnupscale_image, inputsoutput_image, outputs[output_image, upscale_status] )6. 完整代码示例与部署经过以上定制我们得到了一个功能完善、界面友好的辉夜巫女图片生成器。下面是完整的代码示例import gradio as gr import os from datetime import datetime from PIL import Image import requests import json # 假设这是你的图片生成函数需要根据实际模型调整 def generate_image(prompt, size512x512, guidance7.5, steps25): 调用Xinference部署的模型生成图片 这里需要替换成你实际的模型调用代码 # 示例调用本地Xinference服务 # 实际使用时需要根据你的模型API调整 try: # 这里只是示例实际调用需要根据你的模型配置 # 假设模型服务在 http://localhost:9997 api_url http://localhost:9997/v1/images/generations headers { Content-Type: application/json } payload { prompt: prompt, size: size, guidance_scale: guidance, num_inference_steps: steps } response requests.post(api_url, jsonpayload, headersheaders) if response.status_code 200: # 假设返回的是base64编码的图片 result response.json() image_data result.get(data, [{}])[0].get(b64_json, ) if image_data: # 将base64转换为图片 import base64 from io import BytesIO image_bytes base64.b64decode(image_data) image Image.open(BytesIO(image_bytes)) return image else: # 如果API调用失败返回一个示例图片 return Image.new(RGB, (512, 512), colorpink) else: # 如果API调用失败返回一个示例图片 return Image.new(RGB, (512, 512), colorlightblue) except Exception as e: print(f生成图片时出错{e}) # 返回一个错误提示图片 img Image.new(RGB, (512, 512), colorlightgray) return img def generate_and_save(prompt, size512x512, guidance7.5, steps25): 生成图片并保存 # 生成图片 image generate_image(prompt, size, guidance, steps) # 保存图片 os.makedirs(generated_images, exist_okTrue) timestamp datetime.now().strftime(%Y%m%d_%H%M%S) safe_prompt .join([c for c in prompt[:20] if c.isalnum() or c in _-]) safe_prompt safe_prompt or image filename fgenerated_images/{timestamp}_{safe_prompt}.png image.save(filename) # 记录历史 with open(generation_history.txt, a, encodingutf-8) as f: f.write(f{timestamp} | {prompt[:50]}... | {filename}\n) return image, f✅ 图片已保存{filename} def load_history(): 加载生成历史 if os.path.exists(generation_history.txt): with open(generation_history.txt, r, encodingutf-8) as f: lines f.readlines()[-5:] # 最近5条 if lines: return 最近生成的图片\n .join(lines) return 暂无生成记录请先生成一张图片吧 def upscale_image(input_image, scale2): 放大图片 if input_image is None: return None, 请先生成图片 width, height input_image.size new_size (width * scale, height * scale) upscaled input_image.resize(new_size, Image.Resampling.LANCZOS) timestamp datetime.now().strftime(%Y%m%d_%H%M%S) filename fgenerated_images/upscaled_{timestamp}.png upscaled.save(filename) return upscaled, f 图片已放大保存{filename} # 创建Gradio界面 with gr.Blocks( title辉夜巫女图片生成器 - Z-Image-Turbo定制版, themegr.themes.Soft(), css .important-box { border: 2px solid #ff6b6b; border-radius: 10px; padding: 15px; margin-bottom: 20px; background-color: #fff5f5; } .example-prompt { background-color: #f8f9fa; padding: 10px; border-radius: 5px; margin: 5px 0; border-left: 4px solid #4dabf7; } ) as demo: # 顶部版权声明 gr.Markdown( div classimportant-box h3 stylecolor: #d63031; margin-top: 0;⚠️ 重要声明/h3 pstrong 版权信息/strongZ-Image-Turbo-辉夜巫女模型定制版/p pstrong 使用范围/strong仅供个人学习研究禁止商业用途/p pstrong 问题反馈/stronga hrefhttps://sonhhxg0529.blog.csdn.net/ target_blank开发者博客/a/p /div ) # 工具标题和简介 gr.Markdown( # 辉夜巫女图片生成器 基于Z-Image-Turbo模型的日系巫女风格AI画图工具。 输入文字描述生成独特的辉夜巫女主题图片。 ) # 主功能区域 with gr.Row(): # 左侧输入和控制面板 with gr.Column(scale1): # 提示词输入 prompt_input gr.Textbox( label✨ 描述你想要画面, placeholder例如辉夜巫女在樱花树下祈福月光洒在神社的石阶上..., lines3, max_lines5 ) # 高级参数可折叠 with gr.Accordion(⚙️ 高级参数设置, openFalse): image_size gr.Radio( [512x512, 768x768, 512x768, 768x512], label图片尺寸, value512x512, info选择生成图片的尺寸 ) guidance_scale gr.Slider( minimum1.0, maximum20.0, value7.5, step0.5, label提示词跟随强度, info值越高越贴近描述建议7-10之间 ) num_steps gr.Slider( minimum10, maximum50, value25, step5, label生成步数, info步数越多细节越好但需要更长时间 ) # 操作按钮 with gr.Row(): generate_btn gr.Button( 生成图片, variantprimary, scale2) upscale_btn gr.Button( 放大图片, variantsecondary, scale1) # 状态显示 status_output gr.Textbox( label状态, interactiveFalse, visibleTrue ) # 右侧图片显示 with gr.Column(scale1): output_image gr.Image( label 生成结果, typepil, height500, show_labelTrue ) # 下载按钮 with gr.Row(): download_btn gr.Button( 下载图片, variantsecondary) clear_btn gr.Button(️ 清空, variantsecondary) # 示例提示词 with gr.Accordion( 提示词示例点击展开, openFalse): gr.Markdown( div classexample-prompt strong简单描述/strong辉夜巫女 /div div classexample-prompt strong角色描述/strong辉夜巫女穿着红白巫女服手持神乐铃 /div div classexample-prompt strong场景描述/strong月光下的神社辉夜巫女在樱花树下祈福 /div div classexample-prompt strong氛围描述/strong晨雾弥漫的神社巫女清扫石阶宁静祥和的氛围 /div div classexample-prompt strong动作描述/strong辉夜巫女在樱花雨中起舞花瓣随风飘落 /div ) # 历史记录 with gr.Accordion( 生成历史, openFalse): history_output gr.Textbox( label最近记录, lines5, interactiveFalse ) refresh_btn gr.Button( 刷新历史记录) # 底部使用条款 gr.Markdown( --- ## 使用条款与免责声明 1. **使用目的**本工具仅限于个人学习、研究及非商业创作使用。 2. **禁止事项**严禁用于任何商业用途、违法活动或生成不当内容。 3. **内容责任**使用者应对生成的所有内容承担全部责任。 4. **版权声明**模型权归相关开发者所有界面定制代码可自由使用。 5. **技术支持**遇到问题请访问 [开发者博客](https://sonhhxg0529.blog.csdn.net/) *继续使用即表示您同意以上条款。* ) # 按钮事件绑定 generate_btn.click( fngenerate_and_save, inputs[prompt_input, image_size, guidance_scale, num_steps], outputs[output_image, status_output] ) upscale_btn.click( fnupscale_image, inputsoutput_image, outputs[output_image, status_output] ) refresh_btn.click( fnload_history, outputshistory_output ) clear_btn.click( fnlambda: [None, ], outputs[output_image, status_output] ) # 初始化历史记录 demo.load( fnload_history, outputshistory_output ) # 启动应用 if __name__ __main__: # 创建必要的目录 os.makedirs(generated_images, exist_okTrue) # 启动Gradio服务 demo.launch( server_name0.0.0.0, server_port7860, shareFalse, show_errorTrue )6.1 如何部署这个定制界面保存代码将上面的代码保存为custom_app.py安装依赖如果还没有的话pip install gradio pillow requests修改模型调用代码中的generate_image函数需要根据你的实际模型API进行调整运行应用python custom_app.py访问界面打开浏览器访问http://你的服务器IP:78607. 总结定制带来的价值通过今天的定制改造我们把一个基础的Gradio界面变成了一个专业、易用、功能完善的辉夜巫女图片生成工具。让我们回顾一下都做了哪些改进7.1 界面定制成果明确的身份标识标题从Gradio变成了辉夜巫女图片生成器用户一眼就知道这是什么工具完整的使用引导添加了使用说明、示例提示词新手也能快速上手必要的版权声明明确了使用规则保护了开发者的权益增强的用户体验添加了参数控制、历史记录、图片放大等实用功能美观的界面设计通过CSS简单美化让界面看起来更专业7.2 定制的重要性你可能觉得不就是改个标题加个说明吗但实际上这些定制非常重要降低使用门槛明确的说明让新手不需要摸索就能使用减少误用风险版权提示能避免很多不必要的纠纷提升工具价值专业的界面让人更愿意使用和分享保护劳动成果明确的版权声明保护了你的工作7.3 进一步定制建议如果你还想继续优化可以考虑多语言支持如果你的用户有国际友人可以添加英文界面主题切换让用户可以选择深色/浅色主题批量生成支持一次生成多张图片风格选择提供不同的绘画风格选项社区分享添加图片分享功能7.4 最后的建议定制Gradio界面其实很简单关键是站在用户角度思考用户第一次打开时最需要看到什么用户可能会遇到什么问题如何让用户用得更顺手记住好的工具不仅要功能强大还要用起来舒服。花一点时间定制界面能让你的AI模型发挥更大的价值。现在你的辉夜巫女图片生成器已经准备好了。快去试试生成一些美丽的巫女图片吧如果有任何问题记得查看使用说明或者联系开发者获取帮助。获取更多AI镜像想探索更多AI镜像和应用场景访问 CSDN星图镜像广场提供丰富的预置镜像覆盖大模型推理、图像生成、视频生成、模型微调等多个领域支持一键部署。