Gradio的重要函数以及一些代码示例学习（一）

1 重要函数解析

1.1 Interface()类

最常用的基础模块构成。

应用界面：gr.Interface(简易场景), gr.Blocks(定制化场景)
输入输出：gr.Image(图像), gr.Textbox(文本框), gr.DataFrame(数据框), gr.Dropdown(下拉选项), gr.Number(数字), gr.Markdown, gr.Files
控制组件：gr.Button(按钮)
布局组件：gr.Tab(标签页), gr.Row(行布局), gr.Column(列布局)

1.1.1 Interface()

import gradio as gr

def image_classifier(inp):
    return {'cat': 0.3, 'dog': 0.7}

demo = gr.Interface(fn=image_classifier, inputs="image", outputs="label")
demo.launch()

一些基本参数的解读：

fn(Union[Callable, List[Callable]])：包装的函数，可以是一个或者多个，用列表存放多个函数。
inputs(Union[str, InputComponent, List[Union[str, InputComponent]]])：输入类型/格式，一个参数可以是字符串str；可以是输入组件InputComponent；多个参数可以是列表，列表可以包含字符串str，输入组件InputComponent。输入组件的个数应该和fn函数的参数个数一致。
outputs(Union[str, OutputComponent, List[Union[str, - OutputComponent]]])：输出类型/格式，与inputs类似，区别就算这是输出组件。输出组件的个数应该和fn函数返回个数一致。
live(bool)：默认为False，设置为True，为动态页面，只要输入发生变化，结果马上发生改变。
layout(str)：输入输出面板的布局。"horizontal"安排他们为两列等高；"unaligned"安排他们为两列不等高；"vertical"安排他们为垂直排放。
allow_flagging(str)：有三个选项"never"、“auto”、“manual”。设置为"never"或"auto"时，用户无法看到Flag按钮；设置为"manual"，用户可见Flag按钮。如果设置为"auto"，每次的输入输出都会被标记保存。如果设置为"manual"，当用户按下Flag按钮，标记当前输入输出的结果并保存。
flagging_dir(str)：Flag保存的文件夹名称

1.1.2 Interface.launch

参考：gradio.Interface.launch(···)

import gradio as gr
def reverse(text):
    return text[::-1]
demo = gr.Interface(reverse, "text", "text")
demo.launch(share=True, auth=("username", "password"))

1.1.3 Interface.from_pipeline

2 代码示例

2.1 一些功能片段

2.1.1 密码验证

在首次打开网页前，可以设置账户密码。比如auth参数为（账户，密码）的元组数据。这种模式下不能够使用queue函数。

demo.launch(auth=("admin", "pass1234"))

如果想设置更为复杂的账户密码和密码提示，可以通过函数设置校验规则。

#账户和密码相同就可以通过
def same_auth(username, password):
    return username == password
demo.launch(auth=same_auth,auth_message="username and password must be the same")

2.2 页面完善

参考：Gradio入门到进阶全网最详细教程[二]：快速搭建AI算法可视化部署演示(侧重参数详解和案例实践)

import gradio as gr
from transformers import *

#标题
title = "抽取式问答"
#题下的描述，支持md格式
description = "输入上下文与问题后，点击submit按钮，可从上下文中抽取出答案，赶快试试吧！"
#输入样例
examples = [
    ["普希金从那里学习人民的语言，吸取了许多有益的养料，这一切对普希金后来的创作产生了很大的影响。这两年里，普希金创作了不少优秀的作品，如《囚徒》、《致大海》、《致凯恩》和《假如生活欺骗了你》等几十首抒情诗，叙事诗《努林伯爵》，历史剧《鲍里斯·戈都诺夫》，以及《叶甫盖尼·奥涅金》前六章。", "著名诗歌《假如生活欺骗了你》的作者是"],
    ["普希金从那里学习人民的语言，吸取了许多有益的养料，这一切对普希金后来的创作产生了很大的影响。这两年里，普希金创作了不少优秀的作品，如《囚徒》、《致大海》、《致凯恩》和《假如生活欺骗了你》等几十首抒情诗，叙事诗《努林伯爵》，历史剧《鲍里斯·戈都诺夫》，以及《叶甫盖尼·奥涅金》前六章。", "普希金创作的叙事诗叫什么"]
    ]
#页面最后的信息，可以选择引用文章，支持md格式

article = "感兴趣的小伙伴可以阅读[gradio专栏](https://blog.csdn.net/sinat_39620217/category_12298724.html?spm=1001.2014.3001.5482)"

qa = pipeline("question-answering", model="uer/roberta-base-chinese-extractive-qa")

def custom_predict(context, question):
    answer_result = qa(context=context, question=question)
    answer = question + ": " + answer_result["answer"]
    score = answer_result["score"]
    return answer, score

gr.Interface(fn=custom_predict, inputs=["text", "text"], outputs=[gr.Textbox(label="answer"), gr.Label(label="score")], 
             title=title, description=description, examples=examples, article=article).launch()

运行上述代码，将看到如下页面，这里的example是可以点击的，点击后将自动填充至context和question中
由于description和article字段支持md语法，因此我们可以根据需求，自行的去丰富完善各部分内容

注意点：

其中def custom_predict(context, question):这个函数当中的context和 question的命名会影响到下面框框左上角的命名

Gradio的重要函数以及一些代码示例学习（一）-LMLPHP

参考文献：
Gradio入门到进阶全网最详细教程[一]：快速搭建AI算法可视化部署演示(侧重项目搭建和案例分享)
Gradio入门到进阶全网最详细教程[二]：快速搭建AI算法可视化部署演示(侧重参数详解和案例实践)

悟乙己