Gradio入门（1）输入输出、表格、文本高亮_gradio 表格

  本文将会介绍gradio的入门使用，并结合大模型（LLM），给出三个使用例子。
  Gradio 是通过友好的 Web 界面演示机器学习模型的最快方式，以便任何人都可以在任何地方使用它。其官网网址为：https://www.gradio.app/ ，Github网址为：https://github.com/gradio-app/gradio 。

输入与输出

  一个简单的Web页面的输入、输出代码如下：

# -*- coding: utf-8 -*-
import gradio as gr


def greet(name):
    return "Hello " + name + "!"


demo = gr.Interface(
    fn=greet,
    # 自定义输入框
    inputs=gr.Textbox(lines=3, placeholder="Name Here...", label="my input"),
    outputs="text",
)

demo.launch()
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

页面如下：

  我们使用openai的gpt-3.5-turbo模型进行问答，结合Gradio，代码如下：

# -*- coding: utf-8 -*-
import gradio as gr
import openai


def model_completion(prompt):
    openai.api_type = "open_ai"
    openai.api_base = "https://api.openai.com/v1"
    openai.api_version = None
    openai.api_key = "sk-xxx"

    response = openai.ChatCompletion.create(
        model="gpt-3.5-turbo",
        messages=[
            {"role": "system", "content": "You are a helpful assistant."},
            {"role": "user", "content": prompt}
        ],
        max_tokens=100
    )

    return response['choices'][0]['message']['content']


demo = gr.Interface(
    fn=model_completion,
    inputs=gr.Textbox(lines=3, placeholder="your question here...", label="Question"),
    outputs="text",
)

demo.launch()
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

页面如下：

表格展示

  一个简单的表格展示的示例代码如下：

# -*- coding: utf-8 -*-
import gradio as gr


def make_list(input_str):
    return [_.split(',') for _ in input_str.split('\n')]


demo = gr.Interface(
    fn=make_list,
    # 自定义输入框
    inputs=gr.Textbox(lines=3, placeholder="String Here...", label="input"),
    # 设置输出组件
    outputs=gr.DataFrame(label='Table',
                         interactive=True,
                         wrap=True)
)

demo.launch()
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

页面如下：

  我们使用openai中的gpt-3.5-turbo模型进行文本分类，代码如下：

# -*- coding: utf-8 -*-
import gradio as gr
import openai


def predict(input_str):
    openai.api_type = "open_ai"
    openai.api_base = "https://api.openai.com/v1"
    openai.api_version = None
    openai.api_key = "sk-xxx"

    output_list = []
    for prompt in input_str.split('\n'):
        response = openai.ChatCompletion.create(
            model="gpt-3.5-turbo",
            messages=[
                {"role": "system", "content": "Classify the text into Positive, Negative, Neural."},
                {"role": "user", "content": prompt}
            ],
            max_tokens=5
        )
        output = response['choices'][0]['message']['content']
        output_list.append([prompt, output])

    return output_list


demo = gr.Interface(
    fn=predict,
    # 自定义输入框
    inputs=gr.Textbox(lines=3, placeholder="Documents...", label="Documents"),
    # 设置输出组件
    outputs=gr.DataFrame(label='Predict Result',
                         headers=["document", "class"],
                         datatype=["str", "str"],
                         interactive=True,
                         wrap=True)
)

demo.launch()
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

页面如下：

文本高亮

  Gradio给出了基于文本比对的文本高亮的例子，文本比对使用difflib模块，示例代码如下：

import gradio as gr
from difflib import Differ


def diff_texts(text1, text2):
    d = Differ()
    output = [(token[2:], token[0] if token[0] != " " else None) for token in d.compare(text1, text2)]
    return output


demo = gr.Interface(
    fn=diff_texts,
    inputs=[
            gr.Textbox(
                label="Text 1",
                info="Initial text",
                lines=3,
                value="The quick brown fox jumped over the lazy dogs.",
            ),
            gr.Textbox(
                label="Text 2",
                info="Text to compare",
                lines=3,
                value="The fast brown fox jumps over lazy dogs.",
            ),
           ],
    outputs=gr.HighlightedText(label="Diff",
                               combine_adjacent=True,
                               show_legend=True
                               ).style(color_map={"+": "red", "-": "green"}),
    theme=gr.themes.Base()
)


demo.launch()
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

页面如下：

  我们使用文本高亮来显示文本纠错结果，文本纠错工具我们使用pycorrector模块，其Github网址为：https://github.com/shibing624/pycorrector 。代码如下：

# -*- coding: utf-8 -*-
import gradio as gr
import pycorrector


def corrector(text):
    corrected_text, detail = pycorrector.correct(text)
    index_list = []
    for _ in detail:
        index_list.extend(range(_[2], _[3]))
    output = [(char, '+' if i in index_list else None)for i, char in enumerate(corrected_text)]
    return output


demo = gr.Interface(
    fn=corrector,
    inputs=gr.Textbox(lines=3, placeholder="Text...", label="Text"),
    outputs=gr.HighlightedText(label="Diff",
                               combine_adjacent=True,
                               show_legend=True
                               ).style(color_map={"+": "yellow"}),
    theme=gr.themes.Base()
)


demo.launch()
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

页面如下：

总结

  本文介绍了机器学习领域中一个很好用的前端展示工具Gradio，分别就输入和输出、表格、文本高亮三个功能上给出了简单示例和大模型方面的应用。
  本人个人博客网站为 https://percent4.github.io/ ，欢迎大家访问~