How do I use Gradio blocks as variables that can be used in a local function?

Explanation

I am trying to use Gradio blocks as inputs to create variables. The variables are then sent to a function to be used to format a string.

The problem

The variables that the Gradio blocks create are not accepted by the later function. Details below.

Code

Gradio Blocks

Here is the Gradio "front-end" Gradio code that aims to produce the variables that I want:

with gr.Blocks() as main:
    with gr.Tab("The Workout Plan"):
        with gr.Column():
            with gr.Row():
                age = gr.Number(label="Age"), #1 Age
                weight = gr.Number(label="Weight (lbs)"), #2 weight 
                sex = gr.Dropdown( #3 sex
                label="Biological Sex",
                choices=["Male", "Female"]),
            with gr.Column():
                goal = gr.Dropdown( #4 goal
                    label="What is your primary goal?",
                    choices=["Hypertrophy (muscle growth)", "Power Lifting (strength increase)", "Flexibility and Mobility"]),
                location = gr.Dropdown( #5 location
                    label="Where do you work out?",
                    choices=["At a gym", "At home"]
                ),
                style = gr.Dropdown( #6 workout style
                    label="What type of training do you prefer?",
                    choices=["Full body", "Upper-lower split", "Push-pull split", "Body-part split", "Compound exercises", "Olympic lifts"]
                ),
                days = gr.Slider(1, 7, value=3, step=1, label="Days per Week"), #7
                workout_time = gr.Dropdown( #8
                    label="How much time per workout?",
                    choices=["30 minutes", "45 minutes", "60 minutes", "75 minutes", "90 minutes", "120 minutes"]
                ),
                warm_up = gr.Checkbox(label="Do you want a warm-up included?"), #9
                stretching = gr.Checkbox(label="Do you want a stretching session after?") #10
            submit_btn = gr.Button(value="Create my plan")
        with gr.Column():
            plan = gr.Textbox("The final plan") 
    with gr.Tab("Explanation"):
        gr.Markdown("this is where the explination will go")

Gradio Blocks → Function Code

And here is the function that I am trying to use these variables in:

def generate_workout(age, weight, sex, goal, location, style, days, workout_time, warm_up, stretching): # all 10 "variables"

    age = int(age)
    
    if warm_up:
        warm_up =  "that includes a warmup"
    else:
        warm_up = ""
    if stretching:
        stretching = "than includes stretching"
    else:
        stretching = ""
    
    prompt = f"Create a {goal} {style} workout plan for a {age}-year-old {sex} weighing {weight} lbs using {location} equipment, working out {days} days a week, where each workout is less than {workout_time}, {warm_up}, {stretching}"
    
    return prompt

Gradio Submit Button Code

Here is the code for the "submit_btn" that is supposed to create the prompt:

submit_btn.click(
    generate_workout, 
        inputs=[
            age,
            weight,
            sex,
            goal,
            location,
            style,
            days,
            workout_time,
            warm_up,
            stretching
                        ],
            outputs=[
                        plan
                ]
    )

The error

line 78, in <module>
    submit_btn.click(
  File "../lib/python3.10/site-packages/gradio/events.py", line 145, in click
    dep = self.set_event_trigger(
  File "../lib/python3.10/site-packages/gradio/blocks.py", line 227, in set_event_trigger
    "inputs": [block._id for block in inputs],
  File "../lib/python3.10/site-packages/gradio/blocks.py", line 227, in <listcomp>
    "inputs": [block._id for block in inputs],
AttributeError: 'tuple' object has no attribute '_id'

What I'm expecting to happen

I'm expecting the variables to get saved, which they seem to be, and then be able to use them within other functions to later be linked to Gradio buttons or events.

I'm not sure if this is an inherent flaw with Gradio, or if I am missing something from the Gradio Blocks Docs.

Thanks in advance,
Noam

Solution

The problem of your code are the commas after the component definitions for example:

age = gr.Number(label="Age"), #1 Age

As those are normal python variable declarations, commas are not supposed to be there removing them everywhere where necessary makes your code working fine:

age = gr.Number(label="Age") #1 Age

The reason for this is that commas automatically create a tuple:

a = 3,
print(type(a))

>>> <class 'tuple'>

contrary to

a = 3
print(type(a))

>>> <class 'int'>