Change to vertical display for inputs

app.py

@@ -87,6 +87,8 @@ with demo:
             household_size = gr.Slider(**FAMILY_MIN_MAX, step=1, label="Household size", info="How many members does your household have ?")
             total_income = gr.Slider(**INCOME_MIN_MAX, label="Income", info="What's you total yearly income (in euros) ?")
             age = gr.Slider(**AGE_MIN_MAX, step=1, label="Age", info="How old are you ?")
+
+        with gr.Column():
             income_type = gr.Dropdown(choices=INCOME_TYPES, value=INCOME_TYPES[0], label="Income type", info="What is your main type of income ?")
             education_type = gr.Dropdown(choices=EDUCATION_TYPES, value=EDUCATION_TYPES[0], label="Education", info="What is your education background ?")
             family_status = gr.Dropdown(choices=FAMILY_STATUS, value=FAMILY_STATUS[0], label="Family", info="What is your family status ?")
@@ -94,37 +96,31 @@ with demo:
             housing_type = gr.Dropdown(choices=HOUSING_TYPES, value=HOUSING_TYPES[0], label="Housing", info="In what type of housing do you live ?")
 
         with gr.Column():
-            gr.Markdown("### Bank ")
-            account_age = gr.Slider(**ACCOUNT_MIN_MAX, step=1, label="Account age (months)", info="How long have this person had this bank account (in months) ?")
-
-        with gr.Column():
-            gr.Markdown("### Third party ")
-            employed = gr.Radio(["Yes", "No"], label="Is the person employed ?", value="Yes")
-            years_employed = gr.Slider(**EMPLOYED_MIN_MAX, step=1, label="Years of employment", info="How long have this person been employed (in years) ?")
-
-
-    gr.Markdown("## Step 3: Encrypt the inputs using FHE and send them to the server.")
-    with gr.Row():
-        with gr.Column():
-            gr.Markdown("### User")
             encrypt_button_user = gr.Button("Encrypt the inputs and send to server.")
             
             encrypted_input_user = gr.Textbox(
                 label="Encrypted input representation:", max_lines=2, interactive=False
             )
 
+    with gr.Row():
+        with gr.Column(scale=2):
+            gr.Markdown("### Bank ")
+            account_age = gr.Slider(**ACCOUNT_MIN_MAX, step=1, label="Account age (months)", info="How long have this person had this bank account (in months) ?")
 
         with gr.Column():
-            gr.Markdown("### Bank ")
             encrypt_button_bank = gr.Button("Encrypt the inputs and send to server.")
 
             encrypted_input_bank = gr.Textbox(
                 label="Encrypted input representation:", max_lines=2, interactive=False
             )
 
+    with gr.Row():
+        with gr.Column(scale=2):
+            gr.Markdown("### Third party ")
+            employed = gr.Radio(["Yes", "No"], label="Is the person employed ?", value="Yes")
+            years_employed = gr.Slider(**EMPLOYED_MIN_MAX, step=1, label="Years of employment", info="How long have this person been employed (in years) ?")
 
         with gr.Column():
-            gr.Markdown("### Third Party ")
             encrypt_button_third_party = gr.Button("Encrypt the inputs and send to server.")
 
             encrypted_input_third_party = gr.Textbox(
@@ -186,7 +182,9 @@ with demo:
     gr.Markdown("## Step 5: Receive the encrypted output from the server and decrypt.")
     gr.Markdown(
         """
-        The value displayed below is a shortened byte representation of the actual encrypted output.
+        The first value displayed below is a shortened byte representation of the actual encrypted 
+        output.
+        The user is then able to decrypt the value using its private key.
         """
     )