交互式AI技术与模型部署：使用Gradio完成一项简单的交互式界面

news2024/11/13 11:02:02

下面的这段代码使用Gradio库创建了一个简单的交互式界面。用户可以输入名称、选择是早上还是晚上、拖动滑动条来选择温度，然后点击"Launch"按钮，界面会显示相应的问候语和摄氏度温度。例如，如果用户输入"John"，勾选复选框表示是早上，滑动条选择30度，界面可能会显示"Good morning John. It is 30 degrees today."并返回摄氏度温度值。

完整实现代码：

import gradio as gr

def greet(name, is_morning, temperature):
    salutation = "Good morning" if is_morning else "Good evening"
    greeting = f"{salutation} {name}. It is {temperature} degrees today"
    celsius = (temperature - 32) * 5 / 9
    return greeting, round(celsius, 2)

demo = gr.Interface(
    fn=greet,
    inputs=["text", "checkbox", gr.Slider(0, 100)],
    outputs=["text", "number"],
)
demo.launch()

运行结果：

在这里插入图片描述
上述完整代码解释：
import gradio as gr: 导入Gradio库并将其重命名为gr，这个库用于构建交互式界面。

def greet(name, is_morning, temperature):: 定义了一个名为greet的函数，该函数接受三个参数：name（名称）、is_morning（是否为早上）、temperature（温度）。

salutation = “Good morning” if is_morning else “Good evening”: 根据is_morning参数的值，选择不同的问候语，如果is_morning为True，将使用"Good morning"，否则使用"Good evening"。

greeting = f"{salutation} {name}. It is {temperature} degrees today": 根据之前选择的问候语，创建一个完整的问候语，并包含温度信息。

celsius = (temperature - 32) * 5 / 9: 将温度从华氏度转换为摄氏度，并将结果存储在变量celsius中。

return greeting, round(celsius, 2): 函数返回两个值，第一个是问候语字符串，第二个是转换后的温度（保留两位小数）。

demo = gr.Interface(…: 创建一个Gradio的接口对象，用于展示greet函数的交互界面。

fn=greet: 将刚才定义的greet函数作为接口的处理函数。

inputs=[“text”, “checkbox”, gr.Slider(0, 100)]: 定义了输入部分的组件。具体来说，这个接口有三个输入组件：一个文本框（用于输入名称）、一个复选框（用于选择是早上还是晚上）、一个滑动条（用于选择温度，范围从0到100）。

outputs=[“text”, “number”]: 定义了输出部分的组件。接口会返回一个文本输出和一个数字输出，分别对应问候语和摄氏度温度。

demo.launch(): 启动交互式界面，用户可以通过这个界面输入信息并查看结果。

下面的中文编程：

import gradio as gr

def 问候(name, 是否早上, 温度):
    问候语 = "早上好" if 是否早上 else "晚上好"
    问候消息 = f"{问候语} {name}。今天的温度是 {温度} 度"
    摄氏温度 = (温度 - 32) * 5 / 9
    return 问候消息, round(摄氏温度, 2)

演示 = gr.Interface(
    fn=问候,
    inputs=["text", "checkbox", gr.Slider(0, 100)],
    outputs=["text", "number"],
)
演示.launch()

完整代码运行截图：
在这里插入图片描述
关于上述提及按钮的说明：
在上述代码中，提交按钮的功能并未在代码中直接体现。提交按钮是Gradio提供的默认功能，用于触发界面上输入的数据传递给后台的函数进行处理，然后将处理结果显示在输出部分。具体的提交功能由Gradio库内部实现，开发者不需要显式地在代码中编写提交按钮的逻辑。