app.py

# Step 6.1: Define different input components
import gradio as gr

# a. define text data type
input_module1 = gr.inputs.Textbox(label = "Input Text")

# b. define image data type
input_module2 = gr.inputs.Image(label = "Input Image")

# c. define Number data type
input_module3 = gr.inputs.Number(label = "Input Number")

# d. define Slider data type
input_module4 = gr.inputs.Slider(minimum=1,maximum=100, step=5, label = "Input Slider")

# e. define Checkbox data type
input_module5 = gr.inputs.Checkbox(label = "Does it work?")

# f. define Radio data type
input_module6 = gr.inputs.Radio(choices=["park", "zoo", "road"], label = "Input Radio")

# g. define Dropdown data type
input_module7 = gr.inputs.Dropdown(choices=["park", "zoo", "road"], label = "Input Dropdown")
# Step 6.2: Define different output components
# a. define text data type
output_module1 = gr.outputs.Textbox(label = "Output Text")

# b. define image data type
output_module2 = gr.outputs.Image(type="pil",label = "Output Image")

# you can define more output components
# Step 6.3: Define a new function that accommodates the input modules.
def multi_inputs(input1, input2, input3, input4, input5, input6, input7 ):
    import numpy as np
    ## processing inputs

    ## return outputs
    output1 = "Processing inputs and return outputs" # text output example
    output2 = np.random.rand(6,6) # image-like array output example
    return output1,output2
# Step 6.4: Put all three component together into the gradio's interface function 
gr.Interface(fn=multi_inputs, 
             inputs=[input_module1, input_module2, input_module3,
                     input_module4, input_module5, input_module6,
                     input_module7], 
             outputs=[output_module1, output_module2]
            ).launch()