【Gradio】四种 Gradio 界面

到目前为止，我们一直假设要构建 Gradio 演示，您需要输入和输出。但这并不总是机器学习演示的情况：例如，无条件图像生成模型不需要任何输入，但会产生图像作为输出。

结果显示 gradio.Interface 类实际上可以处理 4 种不同类型的演示：

1. 标准演示：具有独立的输入和输出（例如图像分类器或语音识别模型）

2. 仅输出演示：不需要任何输入但产生输出（例如无条件图像生成模型）

3. 仅输入演示：这些演示不产生任何输出，但确实需要某种输入（例如，将您上传的图像保存到持久性外部数据库的演示）

4. 统一演示：具有输入和输出组件的演示，但输入和输出组件是相同的。这意味着产生的输出覆盖了输入（例如，文本自动完成模型）

根据演示的类型，用户界面（UI）看起来略有不同：

让我们看看如何使用 Interface 类构建每种类型的演示，以及示例：

标准演示 

要创建一个既有输入又有输出组件的演示，您只需在 Interface() 中设置 inputs 和 outputs 参数的值。以下是一个简单图像滤镜的示例演示：

import numpy as np  # 导入numpy库，用于数值计算
import gradio as gr  # 导入gradio库，用于构建web应用界面


# 定义将输入图像转换为棕褐色（sepia）效果的函数
def sepia(input_img):
    sepia_filter = np.array([
        [0.393, 0.769, 0.189],  # 定义棕褐色滤镜的红色通道系数
        [0.349, 0.686, 0.168],  # 定义棕褐色滤镜的绿色通道系数
        [0.272, 0.534, 0.131]   # 定义棕褐色滤镜的蓝色通道系数
    ])
    sepia_img = input_img.dot(sepia_filter.T)  # 使用点乘操作应用滤镜，.T表示转置，以匹配输入图像的形状
    sepia_img /= sepia_img.max()  # 对结果图像进行归一化，使像素值位于0到1之间
    return sepia_img  # 返回处理后的图像


# 创建Gradio界面
demo = gr.Interface(
    sepia,  # 指定处理图像的函数为sepia
    gr.Image(),  # 定义输入控件为图像输入
    "image"  # 定义输出控件为图像显示
)
demo.launch()  # 启动界面

此代码段实现了一个简单的图像处理界面，可以将上传的图像转换成具有棕褐色（sepia）效果的版本。通过结合使用numpy和gradio库，实现了一个交互式的Web应用，用户可以上传图像并立即查看处理后的结果。sepia函数通过与一个预定义的滤镜矩阵进行点乘运算来实现棕褐色效果，同时对结果进行了归一化处理，以确保图像的亮度不会超出显示范围。这个示例提供了一个简单而实用的图像处理工具原型，展示了数字图像处理和Web界面交互集成的基本概念。

仅输出演示 

关于只包含输出的演示怎么样？为了构建这样的演示，你只需将 Interface() 中的 inputs 参数的值设置为 None 。这里有一个模拟图像生成模型的示例演示：

import time  # 导入time库，用于控制时间相关操作


import gradio as gr  # 导入gradio库，用于构建web应用界面


# 定义一个模拟生成对抗网络(GAN)操作的函数
def fake_gan():
    time.sleep(1)  # 模拟生成图像的过程，等待1秒
    # 提供三个预定义的图片URL，模拟GAN生成的图片
    images = [
        "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=387&q=80",
        "https://images.unsplash.com/photo-1554151228-14d9def656e4?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=386&q=80",
        "https://images.unsplash.com/photo-1542909168-82c3e7fdca5c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8aHVtYW4lMjBmYWNlfGVufDB8fDB8fA%3D%3D&w=1000&q=80",
    ]
    return images  # 返回模拟的生成图片URL列表


# 创建Gradio界面
demo = gr.Interface(
    fn=fake_gan,  # 指定处理函数为fake_gan
    inputs=None,  # 指定输入为None，因为该操作不需要从用户获取输入
    outputs=gr.Gallery(label="Generated Images", columns=[2]),  # 定义输出控件为图库，展示生成的图片
    title="FD-GAN",  # 设置界面标题
    description="This is a fake demo of a GAN. In reality, the images are randomly chosen from Unsplash.",  # 设定界面描述
)


demo.launch()  # 启动界面

此代码段展示了一个模拟生成对抗网络（GAN）的示例，通过Gradio库构建了一个交互式Web界面，用户可以查看该模拟GAN生成的图片。实际上，这些图片并非由GAN生成，而是从Unsplash网站上预先选取的。fake_gan函数通过模拟生成过程来演示GAN的概念，等待1秒钟以模拟计算生成图片所需的时间。使用Gradio的Gallery组件将预定义的图片以图库形式展示给用户，每行展示两列图片。这个示例为用户提供了一个直观的方式来理解GAN及其应用，尽管它并未实际执行任何图像生成操作

仅输入演示 

类似地，要创建一个只包含输入的演示，将 Interface() 中的 outputs 参数的值设置为 None 。这里有一个示例演示，它将任何上传的图片保存到磁盘：

import random  # 导入random库，用于生成随机数
import string  # 导入string库，用于字符串处理
import gradio as gr  # 导入gradio库，用于构建web应用界面


# 定义一个函数，用于保存上传的图像，并为其生成一个随机文件名
def save_image_random_name(image):
    # 生成一个长度为20的随机字符串，加上".png"作为文件扩展名
    random_string = ''.join(random.choices(string.ascii_letters, k=20)) + '.png'
    image.save(random_string)  # 使用PIL的save方法保存图像
    print(f"Saved image to {random_string}!")  # 打印保存信息，确认图像已保存


# 创建Gradio界面
demo = gr.Interface(
    fn=save_image_random_name,  # 指定处理函数为save_image_random_name
    inputs=gr.Image(type="pil"),  # 定义输入控件为PIL类型的图像输入
    outputs=None,  # 指定输出控件为None，因为这个函数不返回任何结果给用户，只在后台打印消息
)


demo.launch()  # 启动界面

这段代码创建了一个简单的Web应用，用户可以通过这个应用上传图像。上传的图像会被保存在服务器上，文件名是一个随机生成的20个字符长的字符串，文件扩展名为".png"。这可以避免文件名冲突，并确保用户上传的图像能够被独立保存。

使用random.choices从英文字母中随机选取20个字母组成文件名的主体部分，然后将这个随机字符串与".png"拼接，形成最终的文件名。通过PIL（Python Imaging Library）的save方法将图像保存到指定的文件名中。

这个例子演示了如何处理图像上传的一个实用场景，同时也展示了随机生成字符串作为文件名，以避免文件覆盖的技术手段。这个功能可以适用于需要处理用户上传文件的多种场景。

统一演示 

一个演示，它有一个组件作为输入和输出。只需将 inputs 和 outputs 参数的值设置为相同的组件即可简单创建。这是一个文本生成模型的示例演示：

import gradio as gr  # 导入gradio库，用于构建web应用界面
from transformers import pipeline  # 导入transformers库的pipeline功能，用于载入模型和处理


# 初始化一个文本生成器pipeline，这里使用的是gpt2模型
generator = pipeline('text-generation', model='gpt2')


# 定义一个函数，用于根据用户提供的文本提示生成文本
def generate_text(text_prompt):
    # 调用模型生成文本，max_length限制输出文本的最大长度，num_return_sequences设置返回生成序列的数量
    response = generator(text_prompt, max_length=30, num_return_sequences=5)
    # 从响应中获取第一条生成的文本序列，并返回
    return response[0]['generated_text']


# 创建一个输入框组件
textbox = gr.Textbox()


# 创建Gradio界面
demo = gr.Interface(
    generate_text,  # 指定处理函数为generate_text
    textbox,  # 定义输入控件为文本输入框
    textbox  # 定义输出控件也为文本输入框
)


demo.launch()  # 启动界面

本段代码构建了一个基于Gradio和transformers库的文本生成Web应用。该应用利用预训练的GPT-2模型来根据用户提供的文本提示（text prompt）生成一段文本。通过pipeline函数创建了一个文本生成器generator，它是基于gpt2模型的。然后定义了generate_text函数来实际调用generator，它接受用户的文本提示作为输入，设置生成文本的最大长度为30，并请求模型返回5个可能的序列，最后函数返回第一条生成的文本序列。

此应用通过Gradio的Interface函数创建了一个简洁的界面，用户可以在其中输入一些文本，点击提交后，界面就会展示GPT-2模型基于输入文本生成的文本。这为用户提供了一个互动式体验，可以轻松地探索GPT-2文本生成模型的能力。

输入“hello”提交