当前位置:   article > 正文

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

gradio 界面

下面的这段代码使用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()
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14

运行结果:

在这里插入图片描述
上述完整代码解释:
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()

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15

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

当用户在界面上输入数据(例如名称、是否早上、温度),然后点击提交按钮(通常是"Launch"按钮),Gradio库会自动调用指定的处理函数(这里是问候函数),将输入数据传递给这个函数进行处理。处理完成后,Gradio将显示函数的返回结果在输出部分(即问候消息和摄氏度温度)。

所以,虽然在代码中没有显式编写提交按钮的功能,但是Gradio库为开发者提供了这个默认功能,使得交互式界面能够与后台函数进行交互,并展示处理结果。

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/知新_RL/article/detail/437932
推荐阅读
相关标签
  

闽ICP备14008679号