LiuJuan20260223Zimage实战案例：使用Gradio构建可分享的LiuJuan专属AI绘图Web工具

1. 引言：从模型到应用，打造专属AI绘图工具

你有没有想过，把一个训练好的AI绘图模型，变成一个可以随时访问、轻松分享的在线工具？今天，我们就来一起动手，把部署在Xinference上的LiuJuan20260223Zimage文生图模型，用Gradio包装成一个功能完整的Web应用。

LiuJuan20260223Zimage是一个基于Z-Image LoRA技术微调的模型，专门用于生成特定风格的LiuJuan主题图片。它本身已经很强大了，但每次使用都需要通过命令行或者特定的接口调用，对很多朋友来说还是不够方便。我们的目标就是给它加上一个简单好用的网页界面，让任何人都能通过浏览器直接使用。

通过这篇教程，你将学会：

• 如何确认你的Xinference模型服务已经正常运行
• 使用Gradio快速搭建一个交互式Web界面
• 将模型服务与前端界面连接起来
• 创建一个可以分享给朋友使用的AI绘图工具

整个过程不需要复杂的Web开发知识，跟着步骤走，你就能拥有一个属于自己的AI绘图网站。

2. 环境准备与模型服务确认

在开始构建Web工具之前，我们首先要确保模型服务已经准备就绪。LiuJuan20260223Zimage镜像已经预装了所有必要的环境，我们只需要确认服务状态。

2.1 检查Xinference服务状态

当你启动镜像后，模型需要一些时间来加载。我们可以通过查看日志文件来确认服务是否已经启动成功。

打开终端，运行以下命令：

cat /root/workspace/xinference.log

如果看到类似下面的输出，说明模型服务已经成功启动：

[INFO] Model loaded successfully
[INFO] Inference server started on port 9997
[INFO] LiuJuan20260223Zimage model ready for use

服务启动时间取决于模型大小和系统资源，通常需要1-3分钟。如果看到"loading"或"initializing"字样，可以稍等片刻再检查。

2.2 访问内置WebUI界面

镜像已经提供了一个基础的Web界面，我们可以先通过它来测试模型的基本功能。

在镜像环境中，找到并点击"webui"入口。你会看到一个简单的界面，通常包含以下元素：

• 文本输入框：用于输入图片描述
• 生成按钮：触发图片生成
• 图片显示区域：展示生成的图片

这个内置界面虽然简单，但能帮助我们快速验证模型是否工作正常。

2.3 测试基础功能

在文本输入框中，尝试输入简单的提示词。对于LiuJuan20260223Zimage模型，最基础的测试词就是：

LiuJuan

点击生成按钮后，等待几秒钟，你应该能看到一张LiuJuan风格的图片出现在显示区域。如果成功生成，说明模型服务完全正常，我们可以开始构建更强大的Web工具了。

3. 使用Gradio构建交互式Web界面

现在模型服务已经确认正常，我们来用Gradio给它打造一个更友好、功能更丰富的界面。Gradio是一个专门为机器学习模型快速创建Web界面的Python库，特别适合AI应用。

3.1 安装必要的Python包

虽然镜像可能已经预装了一些包，但我们最好确认一下。打开终端，运行：

pip install gradio requests pillow

这三个包的作用分别是：

• gradio：创建Web界面的核心库
• requests：用于向模型服务发送HTTP请求
• pillow：处理图片的Python库

安装完成后，我们可以开始编写界面代码了。

3.2 创建基础的Gradio应用

让我们从一个最简单的界面开始。创建一个新的Python文件，比如叫做liujuan_app.py：

import gradio as gr
import requests
import json
from PIL import Image
import io
import base64

# 模型服务的地址
MODEL_API_URL = "http://localhost:9997/v1/images/generations"

def generate_image(prompt):
    """调用模型API生成图片"""
    # 准备请求数据
    payload = {
        "prompt": prompt,
        "n": 1,
        "size": "512x512",
        "response_format": "b64_json"
    }
    
    headers = {
        "Content-Type": "application/json"
    }
    
    try:
        # 发送请求到模型服务
        response = requests.post(MODEL_API_URL, 
                                json=payload, 
                                headers=headers, 
                                timeout=30)
        
        if response.status_code == 200:
            # 解析返回的图片数据
            result = response.json()
            image_b64 = result["data"][0]["b64_json"]
            
            # 将base64编码的图片转换为PIL Image对象
            image_data = base64.b64decode(image_b64)
            image = Image.open(io.BytesIO(image_data))
            
            return image
        else:
            return f"生成失败: {response.status_code} - {response.text}"
            
    except Exception as e:
        return f"请求出错: {str(e)}"

# 创建Gradio界面
with gr.Blocks(title="LiuJuan AI绘图工具") as app:
    gr.Markdown("# 🎨 LiuJuan专属AI绘图工具")
    gr.Markdown("输入描述，生成专属LiuJuan风格图片")
    
    with gr.Row():
        with gr.Column(scale=2):
            prompt_input = gr.Textbox(
                label="图片描述",
                placeholder="例如: LiuJuan在花园中",
                lines=3
            )
            
            generate_btn = gr.Button("生成图片", variant="primary")
            
            with gr.Accordion("高级选项", open=False):
                size_select = gr.Radio(
                    ["512x512", "768x768", "1024x1024"],
                    label="图片尺寸",
                    value="512x512"
                )
                guidance_scale = gr.Slider(
                    minimum=1.0,
                    maximum=20.0,
                    value=7.5,
                    label="生成强度",
                    step=0.5
                )
        
        with gr.Column(scale=3):
            output_image = gr.Image(label="生成的图片", type="pil")
    
    # 绑定生成函数
    generate_btn.click(
        fn=generate_image,
        inputs=[prompt_input],
        outputs=[output_image]
    )

# 启动应用
if __name__ == "__main__":
    app.launch(server_name="0.0.0.0", server_port=7860, share=False)

这个基础版本已经包含了核心功能：输入描述、生成图片、显示结果。保存文件后，在终端运行：

python liujuan_app.py

然后在浏览器中打开http://localhost:7860，你就能看到刚刚创建的Web界面了。

3.3 添加更多实用功能

基础功能有了，但我们还可以做得更好。让我们给应用添加一些实用的功能：

# 在原有代码基础上添加以下功能

def generate_with_options(prompt, size, guidance):
    """带参数的生成函数"""
    payload = {
        "prompt": prompt,
        "n": 1,
        "size": size,
        "guidance_scale": guidance,
        "response_format": "b64_json"
    }
    
    # ... 其余代码与之前相同 ...

# 更新界面，添加更多功能
with gr.Blocks(title="LiuJuan AI绘图工具 - 增强版") as app:
    gr.Markdown("# 🎨 LiuJuan专属AI绘图工具")
    gr.Markdown("### 输入描述，生成专属LiuJuan风格图片")
    
    # 添加示例提示词
    with gr.Row():
        examples = gr.Examples(
            examples=[
                ["LiuJuan", "基础LiuJuan形象"],
                ["LiuJuan在樱花树下", "场景化描述"],
                ["未来风格的LiuJuan", "风格化描述"],
                ["卡通版的LiuJuan在读书", "具体场景"]
            ],
            inputs=[prompt_input],
            label="示例提示词"
        )
    
    with gr.Row():
        with gr.Column(scale=2):
            prompt_input = gr.Textbox(
                label="图片描述",
                placeholder="详细描述你想要的图片...",
                lines=4
            )
            
            # 添加生成历史记录
            history_btn = gr.Button("查看历史", variant="secondary")
            clear_btn = gr.Button("清空输入", variant="secondary")
            
            generate_btn = gr.Button("🚀 生成图片", variant="primary", scale=2)
            
            with gr.Accordion("🎛️ 高级选项", open=False):
                size_select = gr.Radio(
                    ["512x512", "768x768", "1024x1024"],
                    label="图片尺寸",
                    value="512x512"
                )
                guidance_scale = gr.Slider(
                    minimum=1.0,
                    maximum=20.0,
                    value=7.5,
                    label="生成强度",
                    step=0.5
                )
                num_steps = gr.Slider(
                    minimum=10,
                    maximum=100,
                    value=30,
                    label="生成步数",
                    step=5
                )
        
        with gr.Column(scale=3):
            output_image = gr.Image(label="生成的图片", type="pil")
            
            # 添加图片操作按钮
            with gr.Row():
                download_btn = gr.Button("💾 下载图片")
                share_btn = gr.Button("🔗 分享链接")
                retry_btn = gr.Button("🔄 重新生成")
    
    # 状态提示
    status = gr.Textbox(label="状态", interactive=False)
    
    # 绑定所有功能
    generate_btn.click(
        fn=generate_with_options,
        inputs=[prompt_input, size_select, guidance_scale],
        outputs=[output_image]
    ).then(
        fn=lambda: "图片生成完成！",
        outputs=[status]
    )
    
    clear_btn.click(
        fn=lambda: ("", "已清空输入"),
        outputs=[prompt_input, status]
    )
    
    # 添加错误处理
    app.load(
        fn=lambda: "应用已就绪，请输入描述开始生成图片",
        outputs=[status]
    )

现在我们的应用功能丰富多了：

• 示例提示词：点击就能快速尝试
• 高级选项：可以调整图片尺寸、生成强度等参数
• 状态提示：实时显示操作状态
• 图片操作：下载、分享、重新生成

3.4 优化用户体验

为了让应用用起来更顺手，我们还可以做一些优化：

# 添加图片历史记录功能
import os
import datetime

HISTORY_DIR = "generated_images"

def save_to_history(image, prompt):
    """保存生成历史"""
    if not os.path.exists(HISTORY_DIR):
        os.makedirs(HISTORY_DIR)
    
    timestamp = datetime.datetime.now().strftime("%Y%m%d_%H%M%S")
    filename = f"{HISTORY_DIR}/{timestamp}_{prompt[:20]}.png"
    image.save(filename)
    return filename

def get_history():
    """获取历史记录"""
    if not os.path.exists(HISTORY_DIR):
        return []
    
    files = os.listdir(HISTORY_DIR)
    files.sort(reverse=True)  # 按时间倒序
    return files[:10]  # 返回最近10个

# 在界面中添加历史记录面板
with gr.Blocks(title="LiuJuan AI绘图工具 - 完整版") as app:
    # ... 之前的界面代码 ...
    
    # 添加历史记录标签页
    with gr.Tab("📚 生成历史"):
        history_gallery = gr.Gallery(
            label="最近生成的图片",
            columns=4,
            height="auto"
        )
        
        refresh_btn = gr.Button("刷新历史")
        
        refresh_btn.click(
            fn=get_history,
            outputs=[history_gallery]
        )
    
    # 修改生成函数，保存历史
    def generate_and_save(prompt, size, guidance):
        image = generate_with_options(prompt, size, guidance)
        if isinstance(image, Image.Image):
            save_to_history(image, prompt)
        return image
    
    # 更新生成按钮的绑定
    generate_btn.click(
        fn=generate_and_save,
        inputs=[prompt_input, size_select, guidance_scale],
        outputs=[output_image]
    ).then(
        fn=get_history,
        outputs=[history_gallery]
    ).then(
        fn=lambda: f"图片生成完成！已保存到历史记录。时间: {datetime.datetime.now().strftime('%H:%M:%S')}",
        outputs=[status]
    )

现在应用有了历史记录功能，每次生成的图片都会自动保存，方便后续查看和下载。

4. 部署与分享你的Web工具

应用开发完成了，接下来就是让它能够被访问和分享。Gradio提供了几种不同的部署方式。

4.1 本地运行与测试

首先在本地完整测试所有功能：

# 确保在正确的目录下
cd /root/workspace

# 启动应用
python liujuan_app.py

应用启动后，你会看到类似这样的输出：

Running on local URL:  http://0.0.0.0:7860
Running on public URL: https://xxxxxx.gradio.live

• http://localhost:7860 是本地访问地址
• https://xxxxxx.gradio.live 是Gradio提供的临时公共链接（需要设置share=True）

在浏览器中打开本地地址，全面测试所有功能：

1. 尝试不同的提示词
2. 调整各种参数
3. 测试历史记录功能
4. 验证图片下载是否正常

4.2 创建可分享的公共链接

如果你想让朋友也能使用这个工具，可以创建一个公共链接：

# 修改启动代码
if __name__ == "__main__":
    # share=True 会创建一个72小时有效的公共链接
    app.launch(
        server_name="0.0.0.0",
        server_port=7860,
        share=True,  # 启用分享功能
        debug=False  # 生产环境关闭debug
    )

重新启动应用，你会看到一个公共URL。把这个链接发给朋友，他们就能直接访问你的AI绘图工具了。

4.3 优化生产环境部署

对于长期使用的场景，我们可以做一些优化：

# 创建生产环境配置
production_config = {
    "server_name": "0.0.0.0",
    "server_port": 7860,
    "share": False,  # 不自动创建公共链接
    "auth": None,  # 可以设置访问密码: ("用户名", "密码")
    "auth_message": "请输入访问密码",
    "enable_queue": True,  # 启用请求队列，避免并发问题
    "max_threads": 10,  # 最大线程数
    "show_error": True,  # 显示错误信息
    "quiet": False  # 显示详细日志
}

# 添加健康检查接口
@app.get("/health")
async def health_check():
    return {"status": "healthy", "model": "LiuJuan20260223Zimage"}

# 启动应用
if __name__ == "__main__":
    # 检查模型服务是否可用
    try:
        response = requests.get("http://localhost:9997/health", timeout=5)
        if response.status_code == 200:
            print("✅ 模型服务连接正常")
            app.launch(**production_config)
        else:
            print("❌ 模型服务不可用，请检查Xinference服务")
    except Exception as e:
        print(f"❌ 连接模型服务失败: {e}")

4.4 使用反向代理（可选）

如果你有自己的域名，或者想要更稳定的访问，可以配置反向代理：

# Nginx配置示例
server {
    listen 80;
    server_name your-domain.com;
    
    location / {
        proxy_pass http://localhost:7860;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        
        # WebSocket支持
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
    }
}

这样你就可以通过http://your-domain.com来访问应用了。

5. 实用技巧与进阶功能

基本的工具已经搭建好了，但我们可以让它变得更强大、更好用。这里分享一些实用技巧。

5.1 添加批量生成功能

有时候我们可能需要一次生成多张图片，可以添加批量处理功能：

def batch_generate(prompts_text, size, guidance):
    """批量生成图片"""
    prompts = [p.strip() for p in prompts_text.split('\n') if p.strip()]
    images = []
    
    for prompt in prompts:
        image = generate_with_options(prompt, size, guidance)
        if isinstance(image, Image.Image):
            images.append((image, prompt))
    
    return images

# 在界面中添加批量生成标签页
with gr.Tab("📦 批量生成"):
    batch_input = gr.Textbox(
        label="批量提示词",
        placeholder="每行一个提示词\n例如:\nLiuJuan在公园\nLiuJuan在图书馆\n未来LiuJuan",
        lines=10
    )
    
    batch_size = gr.Slider(
        minimum=1,
        maximum=10,
        value=3,
        label="每次生成数量",
        step=1
    )
    
    batch_btn = gr.Button("开始批量生成", variant="primary")
    batch_gallery = gr.Gallery(label="批量生成结果", columns=3)
    
    batch_btn.click(
        fn=batch_generate,
        inputs=[batch_input, size_select, guidance_scale],
        outputs=[batch_gallery]
    )

5.2 添加图片编辑功能

生成图片后，可能还需要一些简单的编辑：

from PIL import ImageFilter, ImageEnhance

def edit_image(image, operation, value):
    """编辑图片"""
    if not isinstance(image, Image.Image):
        return image
    
    if operation == "brightness":
        enhancer = ImageEnhance.Brightness(image)
        return enhancer.enhance(value)
    elif operation == "contrast":
        enhancer = ImageEnhance.Contrast(image)
        return enhancer.enhance(value)
    elif operation == "sharpness":
        enhancer = ImageEnhance.Sharpness(image)
        return enhancer.enhance(value)
    elif operation == "blur":
        return image.filter(ImageFilter.GaussianBlur(value))
    else:
        return image

# 在图片显示区域添加编辑功能
with gr.Accordion("🖌️ 图片编辑", open=False):
    edit_operation = gr.Radio(
        ["brightness", "contrast", "sharpness", "blur"],
        label="编辑操作",
        value="brightness"
    )
    
    edit_value = gr.Slider(
        minimum=0.1,
        maximum=3.0,
        value=1.0,
        label="强度",
        step=0.1
    )
    
    edit_btn = gr.Button("应用编辑")
    
    edit_btn.click(
        fn=edit_image,
        inputs=[output_image, edit_operation, edit_value],
        outputs=[output_image]
    )

5.3 添加提示词建议功能

对于不熟悉AI绘图提示词的用户，可以提供一些建议：

# 提示词建议库
PROMPT_SUGGESTIONS = {
    "场景": [
        "LiuJuan在樱花树下",
        "LiuJuan在海边看日落",
        "LiuJuan在图书馆读书",
        "LiuJuan在咖啡厅工作"
    ],
    "风格": [
        "卡通风格的LiuJuan",
        "水彩画风格的LiuJuan",
        "赛博朋克风格的LiuJuan",
        "古风风格的LiuJuan"
    ],
    "动作": [
        "LiuJuan在微笑",
        "LiuJuan在思考",
        "LiuJuan在跳舞",
        "LiuJuan在弹钢琴"
    ],
    "细节": [
        "精致的面部特征",
        "柔和的光线",
        "丰富的背景细节",
        "生动的表情"
    ]
}

def get_suggestions(category):
    """获取提示词建议"""
    return PROMPT_SUGGESTIONS.get(category, [])

# 在界面中添加提示词建议
with gr.Accordion("💡 提示词建议", open=True):
    suggestion_category = gr.Dropdown(
        list(PROMPT_SUGGESTIONS.keys()),
        label="建议类型",
        value="场景"
    )
    
    suggestion_list = gr.Radio(
        [],
        label="建议提示词",
        interactive=True
    )
    
    # 更新建议列表
    suggestion_category.change(
        fn=get_suggestions,
        inputs=[suggestion_category],
        outputs=[suggestion_list]
    )
    
    # 点击建议自动填充
    suggestion_list.select(
        fn=lambda x: x,
        inputs=[suggestion_list],
        outputs=[prompt_input]
    )

5.4 性能优化建议

随着使用量增加，可能需要考虑性能优化：

# 添加缓存机制
from functools import lru_cache
import hashlib

@lru_cache(maxsize=100)
def generate_with_cache(prompt, size, guidance, steps):
    """带缓存的生成函数"""
    cache_key = hashlib.md5(f"{prompt}_{size}_{guidance}_{steps}".encode()).hexdigest()
    
    # 检查缓存
    cache_file = f"cache/{cache_key}.png"
    if os.path.exists(cache_file):
        return Image.open(cache_file)
    
    # 生成新图片
    image = generate_with_options(prompt, size, guidance, steps)
    
    # 保存到缓存
    if isinstance(image, Image.Image):
        os.makedirs("cache", exist_ok=True)
        image.save(cache_file)
    
    return image

# 定期清理缓存
import schedule
import time
import threading

def clean_cache():
    """清理7天前的缓存文件"""
    cache_dir = "cache"
    if not os.path.exists(cache_dir):
        return
    
    now = time.time()
    for filename in os.listdir(cache_dir):
        filepath = os.path.join(cache_dir, filename)
        if os.path.isfile(filepath):
            if now - os.path.getmtime(filepath) > 7 * 24 * 3600:  # 7天
                os.remove(filepath)

# 启动定时清理任务
def start_cleaner():
    schedule.every().day.at("03:00").do(clean_cache)
    while True:
        schedule.run_pending()
        time.sleep(60)

cleaner_thread = threading.Thread(target=start_cleaner, daemon=True)
cleaner_thread.start()

6. 总结：从模型到可分享工具的完整旅程

通过这篇教程，我们完成了一个完整的项目：将部署在Xinference上的LiuJuan20260223Zimage文生图模型，变成了一个功能丰富、易于使用的Web应用。

6.1 我们实现了什么

回顾一下整个构建过程：

1. 确认模型服务：首先确保Xinference服务正常运行，这是所有功能的基础
2. 搭建基础界面：使用Gradio快速创建了输入、输出、控制等核心界面元素
3. 连接模型API：通过HTTP请求将前端界面与后端模型服务连接起来
4. 增强用户体验：添加了历史记录、批量生成、图片编辑等实用功能
5. 部署与分享：配置了本地运行和公共访问的多种方式
6. 性能优化：引入了缓存、错误处理等提升稳定性的机制

6.2 关键收获

在这个过程中，有几个重要的经验值得分享：

技术层面：

• Gradio让AI应用的前端开发变得异常简单
• 合理的错误处理能大幅提升应用稳定性
• 缓存机制可以有效减少重复计算，提升响应速度

用户体验层面：

• 示例和提示词建议能帮助用户更快上手
• 历史记录功能让用户能回顾和管理自己的创作
• 渐进式功能展示（基础功能→高级功能）降低学习成本

部署层面：

• 本地测试确保核心功能稳定
• 公共链接让分享变得简单
• 生产环境配置需要考虑安全性和性能

6.3 下一步可以做什么

如果你对这个项目感兴趣，还可以继续扩展：

1. 用户系统：添加用户登录、个人作品集、收藏功能
2. 社区功能：让用户分享自己的作品，互相点赞评论
3. 模型切换：支持多个不同风格的模型，让用户选择
4. 移动端适配：优化界面，让手机访问体验更好
5. API接口：提供标准的REST API，方便其他应用调用

6.4 最后的建议

构建AI应用不仅仅是技术实现，更重要的是理解用户需求。LiuJuan20260223Zimage模型本身已经具备了强大的生成能力，我们通过Gradio为它打造了一个友好的访问界面，让更多人能够轻松使用。

记住，好的工具应该是：

• 易用：不需要专业知识就能上手
• 稳定：在各种情况下都能可靠工作
• 高效：快速响应，不浪费用户时间
• 可扩展：能够随着需求增长而进化

希望这个项目能给你带来启发，不仅仅是学会了一个工具的使用，更重要的是理解如何将AI能力转化为实际可用的产品。技术最终要服务于人，而好的界面就是技术与用户之间的桥梁。

现在，你的LiuJuan专属AI绘图工具已经准备好了。试试看，用它创作一些有趣的作品，分享给朋友，看看他们有什么反馈。实践是最好的学习方式，在使用中不断优化，你的工具会变得越来越好用。

---

获取更多AI镜像

想探索更多AI镜像和应用场景？访问 CSDN星图镜像广场，提供丰富的预置镜像，覆盖大模型推理、图像生成、视频生成、模型微调等多个领域，支持一键部署。