Interactive AI technology and model deployment: use Gradio to complete a simple interactive interface

The code below creates a simple interactive interface using the Gradio library. The user can enter a name, choose whether it is morning or evening, drag the slider to select the temperature, and then click the "Launch" button, and the interface will display the corresponding greeting and temperature in degrees Celsius. For example, if the user enters "John", checks the checkbox to indicate it's morning, and the slider selects 30 degrees, the interface may display "Good morning John. It is 30 degrees today." and return the temperature in degrees Celsius.

Complete implementation code:

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()

operation result:

The above complete code explanation:
import gradio as gr: Import Gradio library and rename it to gr, this library is used to build interactive interface.

def greet(name, is_morning, temperature):: defines a function called greet, which accepts three parameters: name (name), is_morning (whether it is morning), temperature (temperature).

salutation = “Good morning” if is_morning else “Good evening”: Depending on the value of the is_morning parameter, select a different greeting, if is_morning is True, "Good morning" will be used, otherwise "Good evening" will be used.

greeting = f"{salutation} {name}. It is {temperature} degrees today": Create a complete greeting based on the previously selected greeting, including temperature information.

celsius = (temperature - 32) * 5 / 9: Converts the temperature from Fahrenheit to Celsius and stores the result in the variable celsius.

return greeting, round(celsius, 2): The function returns two values, the first is the greeting string, and the second is the converted temperature (with two decimal places).

demo = gr.Interface(…: Create a Gradio interface object to display the interface of the greet function.

fn=greet: Use the greet function defined just now as the processing function of the interface.

inputs=[“text”, “checkbox”, gr.Slider(0, 100)]: defines the components of the input section. Specifically, this interface has three input components: a text box (for entering a name), a checkbox (for selecting whether it is morning or evening), and a slider (for selecting a temperature, ranging from 0 to 100) .

outputs=["text", "number"]: defines the components of the output section. The interface returns a text output and a number output for the greeting and temperature in degrees Celsius, respectively.

demo.launch(): Launch an interactive interface through which users can enter information and view results.

The following Chinese programming:

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()

Screenshot of the complete code running:

Notes on the button mentioned above:
In the above code, the function of the submit button is not directly reflected in the code. The submit button is the default function provided by Gradio, which is used to trigger the data input on the interface to be passed to the background function for processing, and then display the processing results in the output part. The specific submission function is implemented internally by the Gradio library, and developers do not need to explicitly write the logic of the submit button in the code.

When the user enters data on the interface (such as name, whether it is morning, temperature), and then clicks the submit button (usually the "Launch" button), the Gradio library will automatically call the specified processing function (here is the greeting function), and pass the input data Handle this function. After processing, Gradio will display the function's return result in the output section (i.e. greeting message and temperature in Celsius).

Therefore, although there is no function of explicitly writing the submit button in the code, the Gradio library provides developers with this default function, enabling the interactive interface to interact with the background function and display the processing results.