Gradio入门（1）输入输出、表格、文本高亮-编程知识

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

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

输入与输出

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

# -*- coding: utf-8 -*-
import gradio as grdef 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()

页面如下：

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

# -*- coding: utf-8 -*-
import gradio as gr
import openaidef model_completion(prompt):openai.api_type = "open_ai"openai.api_base = "https://api.openai.com/v1"openai.api_version = Noneopenai.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()

页面如下：

大模型问答页面

表格展示

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

# -*- coding: utf-8 -*-
import gradio as grdef 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()

页面如下：
简单的表格应用
我们使用openai中的gpt-3.5-turbo模型进行文本分类，代码如下：

# -*- coding: utf-8 -*-
import gradio as gr
import openaidef predict(input_str):openai.api_type = "open_ai"openai.api_base = "https://api.openai.com/v1"openai.api_version = Noneopenai.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_listdemo = 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()

页面如下：

在Gradio中实现文本分类

文本高亮

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

import gradio as gr
from difflib import Differdef diff_texts(text1, text2):d = Differ()output = [(token[2:], token[0] if token[0] != " " else None) for token in d.compare(text1, text2)]return outputdemo = 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()

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

# -*- coding: utf-8 -*-
import gradio as gr
import pycorrectordef 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 outputdemo = 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()