Improve app display

app.py

@@ -61,9 +61,9 @@ with demo:
         """
     )
 
-    gr.Markdown("# Applicant, Bank and Credit bureau setup")
-
     gr.Markdown("## Step 1: Generate the keys.")
+    gr.Markdown("<hr />")
+    gr.Markdown("<span style='color:grey'>Applicant, Bank and Credit bureau setup</span>")
     gr.Markdown(
         """
         - The private key is generated jointly by the entities that collaborate to compute the 
@@ -86,6 +86,8 @@ with demo:
     )
 
     gr.Markdown("## Step 2: Fill in some information.")
+    gr.Markdown("<hr />")
+    gr.Markdown("<span style='color:grey'>Applicant, Bank and Credit bureau setup</span>")
     gr.Markdown(
         """
         Select the information that corresponds to the profile you want to evaluate. Three sources 
@@ -104,7 +106,7 @@ with demo:
 
     with gr.Row():
         with gr.Column():
-            gr.Markdown("### Applicant information")
+            gr.Markdown("### Step 2.1 - Applicant information")
             bool_inputs = gr.CheckboxGroup(
                 ["Car", "Property", "Mobile phone"], 
                 label="Which of the following do you actively hold or own?"
@@ -167,42 +169,45 @@ with demo:
                 info="In what type of housing do you live ?"
             )
 
-        with gr.Column():
+    with gr.Row():
+        with gr.Column(scale=2):
             encrypt_button_applicant = gr.Button("Encrypt the inputs and send to server.")
             
             encrypted_input_applicant = gr.Textbox(
                 label="Encrypted input representation:", max_lines=2, interactive=False
             )
 
+    gr.Markdown("<hr />")
+    with gr.Column():
+        gr.Markdown("### Step 2.2 - Bank information")
+        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.Row():
         with gr.Column(scale=2):
-            gr.Markdown("### Bank information")
-            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():
             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
             )
 
+    gr.Markdown("<hr />")
+    with gr.Column():
+        gr.Markdown("### Step 2.3 - Credit bureau information")
+        employed = gr.Radio(["Yes", "No"], label="Is the person employed ?", value="Yes")
+        years_employed = gr.Dropdown(
+            choices=YEARS_EMPLOYED_BINS, 
+            value=YEARS_EMPLOYED_BINS[0], 
+            label="Years of employment", 
+            info="How long have this person been employed (in years) ?"
+        )
+
     with gr.Row():
         with gr.Column(scale=2):
-            gr.Markdown("### Credit bureau information ")
-            employed = gr.Radio(["Yes", "No"], label="Is the person employed ?", value="Yes")
-            years_employed = gr.Dropdown(
-                choices=YEARS_EMPLOYED_BINS, 
-                value=YEARS_EMPLOYED_BINS[0], 
-                label="Years of employment", 
-                info="How long have this person been employed (in years) ?"
-            )
-
-        with gr.Column():
             encrypt_button_credit_bureau = gr.Button("Encrypt the inputs and send to server.")
 
             encrypted_input_credit_bureau = gr.Textbox(
@@ -234,7 +239,9 @@ with demo:
         outputs=[encrypted_input_credit_bureau],
     )
 
-    gr.Markdown("# Server side")
+    gr.Markdown("## Step 3: Run FHE execution.")
+    gr.Markdown("<hr />")
+    gr.Markdown("<span style='color:grey'>Server Side</span>")
     gr.Markdown(
         """
         Once the server receives the encrypted inputs, it can compute the prediction without ever 
@@ -245,7 +252,6 @@ with demo:
         """
     )
 
-    gr.Markdown("## Step 4: Run FHE execution.")
     execute_fhe_button = gr.Button("Run FHE execution.")
     fhe_execution_time = gr.Textbox(
         label="Total FHE execution time (in seconds):", max_lines=1, interactive=False
@@ -254,7 +260,9 @@ with demo:
     # Button to send the encodings to the server using post method
     execute_fhe_button.click(run_fhe, inputs=[client_id], outputs=[fhe_execution_time])
 
-    gr.Markdown("# Applicant, Bank and Credit bureau decryption")  
+    gr.Markdown("## Step 4: Receive the encrypted output from the server and decrypt.")
+    gr.Markdown("<hr />")
+    gr.Markdown("<span style='color:grey'>Applicant, Bank and Credit bureau decryption</span>")
     gr.Markdown(
         """
         Once the server completed the inference, the encrypted output is returned to the applicant.
@@ -264,8 +272,6 @@ with demo:
         only decrypt the full result when all three parties decrypt their share of the result.
         """
     )
-
-    gr.Markdown("## Step 5: Receive the encrypted output from the server and decrypt.")
     gr.Markdown(
         """
         The first value displayed below is a shortened byte representation of the actual encrypted 
@@ -289,7 +295,8 @@ with demo:
         outputs=[prediction_output, encrypted_output_representation],
     )
 
-    gr.Markdown("## Step 6 (optional): Explain the prediction.")
+    gr.Markdown("## Step 5 (optional): Explain the prediction.")
+    gr.Markdown("<hr />")
     gr.Markdown(
         """
         In case the credit card is likely to be denied, the applicant can ask for how many years of