使用 Gradio 实现多张图片上传并显示图片名称和尺寸

在现代应用中，用户经常需要上传多张图片进行处理或分析。Gradio 是一个非常方便的 Python 库，可以快速构建交互式的 Web 界面，方便用户上传图片、输入文本等。本篇博客将介绍如何使用 Gradio 实现多张图片的上传，并在服务器端处理这些图片，输出每张图片的名称和尺寸，以验证服务器已经成功接收了这些图片。

环境准备

确保你已经安装了以下必要的库：

• Gradio：用于构建交互式界面。
• Pillow：用于处理图像文件。

你可以使用以下命令安装这些库：

bash
展开代码
pip install gradio Pillow

代码实现

以下是实现多张图片上传并显示其名称和尺寸的完整代码：

python
展开代码
import gradio as gr
from PIL import Image

def get_image_info(images):
    if not images:
        return "未上传任何图片。"
    
    result = ""
    for img in images:
        if isinstance(img, tuple):
            img = img[0]
        if isinstance(img, Image.Image):
            width, height = img.size
            name = img.filename if hasattr(img, 'filename') else "未知名称"
            result += f"{name}: {width}x{height} 像素\n"
    return result

def upload_file(files, current_files):
    file_paths = current_files + [file.name for file in files]
    return file_paths

def clear_images():
    return []

with gr.Blocks() as demo:
    with gr.Tab("图片上传与信息展示"):
        with gr.Row():
            with gr.Column():
                image_gallery = gr.Gallery(type='pil', label='图片列表 (Photos)', height=250, columns=4, visible=True)
                upload_button = gr.UploadButton("选择图片上传 (Upload Photos)", file_types=["image"], file_count="multiple")
                clear_button = gr.Button("清空图片 (Clear Photos)")
                analyze_button = gr.Button("显示图片信息 (Show Image Info)")
            with gr.Column():
                analysis_output = gr.Textbox(label="图片信息 (Image Info)", lines=10)
        
        user_images = gr.State([])
        
        upload_button.upload(upload_file, inputs=[upload_button, user_images], outputs=image_gallery)
        clear_button.click(fn=clear_images, inputs=None, outputs=image_gallery)
        analyze_button.click(get_image_info, inputs=image_gallery, outputs=analysis_output)
    
    with gr.Tab("其他功能"):
        gr.Markdown("在这里可以添加其他功能的内容。")

demo.launch(server_name="0.0.0.0", server_port=7891)

运行与测试

1. 运行代码

   将上述代码保存为 app.py，在终端中运行：

   bash
   展开代码
   python app.py
   

2. 访问应用

   运行后，终端会显示类似如下的信息：

   展开代码
   Running on local URL:  http://127.0.0.1:7891/
   

   如果你在局域网内其他设备上访问，需要使用服务器的IP地址，例如 http://192.168.1.100:7891/。

3. 测试功能

   • 上传图片：点击“选择图片上传”按钮，选择多张图片进行上传。上传后的图片会在左侧的图片展示区显示。
   • 显示图片信息：点击“显示图片信息”按钮，右侧的文本框会显示每张图片的名称和尺寸。
   • 清空图片：点击“清空图片”按钮，可以清空上传的所有图片。

   

总结

本文介绍了如何使用 Gradio 实现多张图片的上传，并在服务器端处理这些图片，输出每张图片的名称和尺寸。通过这种方式，可以轻松验证服务器是否成功接收了上传的图片，并为后续的图片处理任务奠定基础。Gradio 的简洁 API 和强大的功能使得快速构建交互式应用变得非常简单，非常适合用于快速原型开发和展示。

希望这篇博客对你有所帮助！如果你有任何问题或建议，欢迎在评论区留言讨论。