8、Gradio构建用户界面应用程序

1、Gradio构建用户界面应用程序

1.1gradio安装与启动

pip install gradio==3.50.2

import gradio as gr


# 输入文本处理程序
def greet(name):
    return f"Hello {name} !"

# 创建接口函数
# Interface 交互界面
# fn 设置处理函数，表示界面要执行的一些功能（函数）
# inputs 设置输入接口组件，"text" 接受文本的输入
# outputs 设置输出接口组件，"text" 进行文本的输出
# fn, inputs, outputs 都是必填函数
demo = gr.Interface(fn=greet, inputs="text", outputs="text")

# 启动界面
demo.launch()
# demo.launch(server_port=8000)  # server_port 设置端口号

运行程序后，打开 http://127.0.0.1:7860 即可看到网页效果。

左边是文本输入框，右边是结果展示框。Clear 按钮用于重置网页状态，Submit 按钮用于执行处理程序，Flag 按钮用于保存结果到本地，会自动生成 flagged 文件夹和 log.csv文件。

自动重载运行，在 Terminal 终端中运行一下代码

gradio 文件名.py

报错，编码问题

将 gradio 的当前版本卸载安装最新版本后运行正常。

将链接改为共享地址

demo.launch(server_port=8000, share=True)  # server_port 设置端口号，share=True 生成公网链接

 缺少文件，需要通过以下方式操作：1.下载文件 2.更改名字 3.放到指定位置。之后重启电脑。

不好用，其他方式网上搜索。

2、gradio常见输入

2.1文本输入

import gradio as gr


def demo(*args):
    pass

demo = gr.Interface(fn=demo,
                    inputs=[gr.Text(label="账号", placeholder="请输入账号"),
                            # label 标签；placeholder 提示信息
                            gr.Text(label="邮箱", placeholder="请输入邮箱", type="email"),
                            gr.Text(label="密码", placeholder="请输入密码", type="password"),
                            gr.Textbox(label="Texbox", lines=3, max_lines=5, placeholder="请填写信息"),
                            # Textbox 创建一个文本区域，供用户输入字符串或显示字符串输出。
                            # lines 文本区域中要提供的最小行数。max_lines 文本区域中提供的最大行数。
                            gr.TextArea(label="TextArea", lines=3, max_lines=5, placeholder="请填写信息")],
                    outputs="text")

demo.launch()

2.2数字输入框

import gradio as gr

def add(a, b):
    return a + b

demo = gr.Interface(fn=add,
                    # inputs = ["number", gr.Number()],
                    inputs=[gr.Number(label="数字1", info="请输入数字"),
                            gr.Number(label="数字2", info="请输入数字")],
                    outputs="text")  # 或 outputs="number"

demo.launch()

2.3滑动条

import gradio as gr

def exclamation_point(nums):
    return "!" * nums

demo = gr.Interface(fn = exclamation_point,
                    # inputs = "slider",
                    inputs = gr.Slider(minimum=10,  # 最小值
                                       maximum=50,  # 最大值
                                       value=20,  # 默认值
                                       step=1,
                                       label="感叹号数量"),
                    outputs = "text")

demo.launch()

2.4选项选择框

# 勾选框、单选框、多选框、下拉框
import gradio as gr

def function(choose1, choose2, choose3, choose4):
    return f"{str(choose1)} , {str(choose2)} , {str(choose3)} , {str(choose4)}"


demo = gr.Interface(fn=function,
                    inputs=[
                        gr.Checkbox(label="勾选框"),  # 勾选框
                        gr.Radio(choices=["选项A", "选项B", "选项C"], label="单选框"),  # 单选框
                        gr.Checkboxgroup(choices=["选项A", "选项B", "选项C"], label="多选框"),  # 多选框
                        gr.Dropdown(choices=["选项A", "选项B", "选项C"], label="下拉框")  # 下拉框
                    ],
                    outputs="text")

demo.launch()

2.5资源选择器——文本输入

import gradio as gr

def data(file):
    return file

demo = gr.Interface(fn=data,
                    inputs=gr.File(label="文件选择框",
                                   file_count="directory",
                                   file_types=None,
                                   type="filepath"),
                    outputs="text")

demo.launch()

2.6资源选择器——图片输入

import gradio as gr

def data(file):
    return file

demo = gr.Interface(fn=data,
                    inputs=gr.Image(sources=["upload", "webcam", "clipboard"]),
                    # upload 上传；webcam 使用相机；clipboard “剪贴板”允许用户粘贴剪贴板中的图像。
                    outputs="text")

demo.launch()

 

import gradio as gr
import cv2

def turn_gray(image):
    # 将图片转换为灰色
    gray = cv2.cvtColor(image, cv2.COLOR_BGR2GRAY)
    return gray

demo = gr.Interface(fn=turn_gray,
                    inputs=gr.Image(sources=["upload", "webcam", "clipboard"]),
                    # upload 上传；webcam 使用相机；clipboard “剪贴板”允许用户粘贴剪贴板中的图像。
                    outputs="image")  # gr.Image()

demo.launch()

2.7资源选择器——视频输入

import gradio as gr

def data(file):
    return file

demo = gr.Interface(fn=data,
                    inputs=gr.Video(sources=["upload"], label="Video"),  # 使用 webcam 需要安装 ffmpeg
                    outputs="text")

demo.launch()

2.8按钮

from distutils.command.install import value

import gradio as gr


def button_action(button_name):
    return f"{button_name} was clicked"


with gr.Blocks() as demo:
    normal_button = gr.Button(value="Normal Button")  # 普通按钮
    # variant 样式：'primary' 主要，'secondary' 次要，'stop' 停止
    primary_button = gr.Button(value="Primary Button", variant="primary")
    secondary_button = gr.Button(value="Secondary Button", variant="secondary")
    stop_button = gr.Button(value="Stop Button", variant="stop")

    button_1 = gr.Button(icon="resources/三明治.png")
    button_2 = gr.Button(value="蛋挞", icon="resources/蛋挞.png")
    button_3 = gr.Button(value="", icon="resources/饭团.png")


    result_label = gr.Label()

    normal_button.click(fn=lambda : button_action("Normal Button"), outputs=result_label)
    primary_button.click(fn=lambda : button_action("Primary Button"), outputs=result_label)
    secondary_button.click(fn=lambda : button_action("Secondary Button"), outputs=result_label)
    stop_button.click(fn=lambda : button_action("Stop Button"), outputs=result_label)

demo.launch()

3、gradio常见输出

3.1文本输出

import gradio as gr


def output():
    return "Hello World " * 20


demo = gr.Interface(fn=output,
                    inputs=None,
                    outputs=gr.Textbox(lines=3, placeholder="默认输出文字"))

demo.launch()

3.2Matplotlib图例输出

import gradio as gr
import numpy as np
import matplotlib.pyplot as plt


def fig_output():
    x = np.linspace(start=0, stop=10, num=100)  # 在指定间隔内返回均匀间隔的数字。
    y = np.sin(x)
    plt.plot(x, y)
    return plt

demo = gr.Interface(fn=fig_output,
                    inputs=None,
                    outputs=gr.Plot())

demo.launch()

3.3画廊输出

import gradio as gr


def process():
    img_paths = [
        "resources/imgs/1.jpg",
        "resources/imgs/2.jpg",
        "resources/imgs/3.jpg",
        "resources/imgs/4.jpg",
        "resources/imgs/5.jpg",
        "resources/imgs/6.jpg",
        "resources/imgs/7.jpg",
        "resources/imgs/8.jpg",
        "resources/imgs/9.jpg",
        "resources/imgs/10.jpg"
    ]
    # results = img_paths
    results = [(img_i, f"cat {i}") for i, img_i in enumerate(img_paths, start=1)]

    return results

demo = gr.Interface(fn=process,
                    inputs=None,
                    outputs=gr.Gallery(columns=4))

demo.launch()

4、gradio常见排版

4.1行排版

import gradio as gr


def greet_1(name):
    return f"Hello, {name}!"

with gr.Blocks() as demo:
    with gr.Row():
        input_1 = gr.Textbox(label="Your Name", placeholder="请输入名字")
        button_1 = gr.Button("Greet")
        output_1 = gr.Textbox(label="Greeting")

    button_1.click(fn=greet_1, inputs=input_1, outputs=output_1)

    with gr.Row():
        input_2 = gr.Textbox(label="Your Name", placeholder="请输入名字", scale=5)  # scale 表示一行中所占分数
        button_2 = gr.Button("Greet", scale=2)
        output_2 = gr.Textbox(label="Greeting", scale=1)

    button_2.click(fn=greet_1, inputs=input_2, outputs=output_2)

demo.launch()

4.2列排版

import gradio as gr


with gr.Blocks() as demo:
    with gr.Row():
        with gr.Column(scale=5):
            text1 = gr.Textbox(label="提示词", placeholder="请输入提示词", lines=5)
            text2 = gr.Textbox(label="反向提示词", placeholder="请输入反向提示词", lines=2)
        with gr.Column(scale=1, min_width=1):
            button1 = gr.Button(icon="resources/icon/长箭头.png",value="箭头", min_width=1)
            button2 = gr.Button(icon="resources/icon/save.png", value="保存", min_width=1)
            button3 = gr.Button(icon="resources/icon/File.png", value="文件", min_width=1)
            button4 = gr.Button(icon="resources/icon/删除.png", value="删除", min_width=1)
        with gr.Column(scale=2, min_width=2):
            button5 = gr.Button(value="生成", scale=2,min_width=2, variant="primary")
            with gr.Row():
                gr.Dropdown(choices=["1", "2", "3"], label="Style 1", scale=2,min_width=2)
                gr.Dropdown(choices=["1", "2", "3"], label="Style 2", scale=2,min_width=2)

demo.launch()

4.3标签排版

import gradio as gr


with gr.Blocks() as demo:
    with gr.Tab("文生图"):
        with gr.Row():
            with gr.Column(scale=5):
                text1 = gr.Textbox(label="提示词", placeholder="请输入提示词", lines=5)
                text2 = gr.Textbox(label="反向提示词", placeholder="请输入反向提示词", lines=2)
            with gr.Column(scale=1, min_width=1):
                button1 = gr.Button(icon="resources/icon/长箭头.png",value="箭头", min_width=1)
                button2 = gr.Button(icon="resources/icon/save.png", value="保存", min_width=1)
                button3 = gr.Button(icon="resources/icon/File.png", value="文件", min_width=1)
                button4 = gr.Button(icon="resources/icon/删除.png", value="删除", min_width=1)
            with gr.Column(scale=2, min_width=2):
                button5 = gr.Button(value="生成", scale=2,min_width=2, variant="primary")
                with gr.Row():
                    gr.Dropdown(choices=["1", "2", "3"], label="Style 1", scale=2,min_width=2)
                    gr.Dropdown(choices=["1", "2", "3"], label="Style 2", scale=2,min_width=2)

    with gr.Tab("图生图"):
        gr.Label("图生图窗口")
        with gr.Row():
            with gr.Column(scale=5):
                text1_ = gr.Textbox(label="提示词", placeholder="请输入提示词", lines=5)
                text2_ = gr.Textbox(label="反向提示词", placeholder="请输入反向提示词", lines=2)
            with gr.Column(scale=1, min_width=1):
                button1_ = gr.Button(icon="resources/icon/长箭头.png",value="箭头", min_width=1)
                button2_ = gr.Button(icon="resources/icon/save.png", value="保存", min_width=1)
                button3_ = gr.Button(icon="resources/icon/File.png", value="文件", min_width=1)
                button4_ = gr.Button(icon="resources/icon/删除.png", value="删除", min_width=1)
            with gr.Column(scale=2, min_width=2):
                button5_ = gr.Button(value="生成", scale=2,min_width=2, variant="primary")
                with gr.Row():
                    gr.Dropdown(choices=["1", "2", "3"], label="Style 1", scale=2,min_width=2)
                    gr.Dropdown(choices=["1", "2", "3"], label="Style 2", scale=2,min_width=2)
    with gr.Tab("图片信息"):
        gr.Label("图片信息窗口")
    with gr.Tab("模型信息"):
        pass
    with gr.Tab("模型融合"):
        pass
    with gr.Tab("设置"):
        pass


demo.launch()

4.4折叠排版

import gradio as gr


with gr.Blocks() as demo:
    with gr.Accordion("折叠排版"):
        with gr.Row():
            with gr.Column(scale=5):
                text1 = gr.Textbox(label="提示词", placeholder="请输入提示词", lines=5)
                text2 = gr.Textbox(label="反向提示词", placeholder="请输入反向提示词", lines=2)
            with gr.Column(scale=1, min_width=1):
                button1 = gr.Button(icon="resources/icon/长箭头.png",value="箭头", min_width=1)
                button2 = gr.Button(icon="resources/icon/save.png", value="保存", min_width=1)
                button3 = gr.Button(icon="resources/icon/File.png", value="文件", min_width=1)
                button4 = gr.Button(icon="resources/icon/删除.png", value="删除", min_width=1)
            with gr.Column(scale=2, min_width=2):
                button5 = gr.Button(value="生成", scale=2,min_width=2, variant="primary")
                with gr.Row():
                    gr.Dropdown(choices=["1", "2", "3"], label="Style 1", scale=2,min_width=2)
                    gr.Dropdown(choices=["1", "2", "3"], label="Style 2", scale=2,min_width=2)

    with gr.Accordion("折叠排版"):
        pass


demo.launch()

5、gradio综合案例

import gradio as gr
from numpy.ma.core import minimum

with gr.Blocks() as demo:
    with gr.Row():
        gr.Dropdown(choices=["模型1", "模型2", "模型3"], label="Stable Diffusion模型")
        gr.Dropdown(choices=["模型1", "模型2", "模型3"], label="外挂VAE模型")
        gr.Slider(minimum=0, maximum=100, step=1, label="CLIP终止层数")

    with gr.Tab("文生图"):
        with gr.Row():
            with gr.Column(scale=3):
                text1 = gr.Textbox(label="提示词", placeholder="请输入提示词", lines=3, max_lines=5)
                text2 = gr.Textbox(label="反向提示词", placeholder="请输入反向提示词", lines=2, max_lines=5)
            with gr.Column(scale=1, min_width=1):
                button1 = gr.Button(value="生成", scale=2, min_width=2, variant="primary")
                with gr.Row():
                    button2 = gr.Button(icon="resources/icon/长箭头.png",value="箭头", min_width=1)
                    button3 = gr.Button(icon="resources/icon/File.png", value="文件", min_width=1)
                    button4 = gr.Button(icon="resources/icon/删除.png", value="删除", min_width=1)
                gr.Dropdown(choices=["模型1", "模型2", "模型3"], label="Stable Diffusion模型", scale=2, min_width=2)
        with gr.Tab("生成"):
            with gr.Row():
                with gr.Column():
                    gr.Slider(minimum=0, maximum=100, step=1, label="采样步数")
                    gr.Radio(choices=["DPM++2M Karras","DPM++ SDE Karras","DPM++2M SDE Exponential",
                              "DPM++2M SDE Karras", "Euler a", "Eular", "LMS", "Heun", "DPM2",
                              "DPM2 a","DPM++ 2M","DPM++ SDE", "DPM++ 2M SDE","DPM++ 2M SDE Heun",
                              "DPM Fast", "DPM Adaptive", "DPM Adaptive Karras", "LMS Karras", "DPM2 Karras",
                              "DPM2 a Karras", "DPM++ 2M Karras", "DPM++ 2M SDE Karras", "DPM++ 2M SDE Karras Heun"],
                             label="采样方法")
                    with gr.Accordion("高分辨率修复"):
                        with gr.Row():
                            gr.Dropdown(choices=["模型1", "模型2"], label="放大算法")
                            gr.Slider(minimum=0, maximum=10, step=1, label="高分迭代步数")
                            gr.Slider(minimum=0, maximum=10, step=1, label="重绘幅度")
                        with gr.Row():
                            gr.Dropdown(choices=["模型1", "模型2"], label="放大倍数")
                            gr.Slider(minimum=0, maximum=10, step=1, label="将宽度调整为")
                            gr.Slider(minimum=0, maximum=10, step=1, label="将高度调整为")
                    with gr.Accordion("Refiner"):
                        with gr.Row():
                            gr.Dropdown(choices=["模型1", "模型2"], label="模型")
                            gr.Slider(minimum=0, maximum=10, step=1, label="切换时机")
                    with gr.Row():
                        with gr.Column(scale=5, min_width=1):
                            gr.Slider(minimum=0, maximum=1000, step=1, label="宽度")
                            gr.Slider(minimum=0, maximum=1000, step=1, label="高度")
                        with gr.Column(scale=2, min_width=1):
                            gr.Slider(minimum=0, maximum=100, step=1, label="总批次")
                            gr.Slider(minimum=0, maximum=100, step=1, label="单批数量")
                    with gr.Row():
                        gr.Slider(minimum=0, maximum=100, step=1, label="提示词引导系数")
                with gr.Column():
                    img_paths = [
                        "resources/imgs/1.jpg",
                        "resources/imgs/2.jpg",
                        "resources/imgs/3.jpg",
                        "resources/imgs/4.jpg",
                        "resources/imgs/5.jpg",
                        "resources/imgs/6.jpg",
                        "resources/imgs/7.jpg",
                        "resources/imgs/8.jpg",
                        "resources/imgs/9.jpg",
                        "resources/imgs/10.jpg"
                    ]
                    gr.Gallery(img_paths)
                    with gr.Row():
                        gr.Button("发送到重绘")
                        gr.Button("发送到后期处理")
                        gr.Button("下载")
                    gr.Textbox(label="图像信息", lines=5)
        with gr.Tab("嵌入式"):
            pass
        with gr.Tab("超网络"):
            pass
        with gr.Tab("模型"):
            pass
        with gr.Tab("LORA"):
            pass

    with gr.Tab("图生图"):
        pass
    with gr.Tab("后期处理"):
        pass
    with gr.Tab("PNG图片信息"):
        pass
    with gr.Tab("模型融合"):
        pass
    with gr.Tab("训练"):
        pass
    with gr.Tab("无边图像浏览"):
        pass




demo.launch()