Add checkmarks to all buttons

app.py

@@ -40,6 +40,24 @@ demo = gr.Blocks()
 
 print("Starting the demo...")
 with demo:
+    gr.Markdown(
+        """
+        <p align="center">
+            <img width=200 src="file/images/logos/zama.jpg">
+        </p>
+        <h1 align="center">Encrypted Credit Card Approval Prediction Using Fully Homomorphic Encryption</h1>
+        <p align="center">
+            <a href="https://github.com/zama-ai/concrete-ml"> <img style="vertical-align: middle; display:inline-block; margin-right: 3px;" width=15 src="file/images/logos/github.png">Concrete-ML</a>
+            —
+            <a href="https://docs.zama.ai/concrete-ml"> <img style="vertical-align: middle; display:inline-block; margin-right: 3px;" width=15 src="file/images/logos/documentation.png">Documentation</a>
+            —
+            <a href="https://zama.ai/community"> <img style="vertical-align: middle; display:inline-block; margin-right: 3px;" width=15 src="file/images/logos/community.png">Community</a>
+            —
+            <a href="https://twitter.com/zama_fhe"> <img style="vertical-align: middle; display:inline-block; margin-right: 3px;" width=15 src="file/images/logos/x.png">@zama_fhe</a>
+        </p>
+        """
+    )
+
     with gr.Accordion("What is credit scoring for card approval?", open=False):
         gr.Markdown(
             """
@@ -100,19 +118,6 @@ with demo:
 
     gr.Markdown(
         """
-        <p align="center">
-            <img width=200 src="file/images/logos/zama.jpg">
-        </p>
-        <h1 align="center">Encrypted Credit Card Approval Prediction Using Fully Homomorphic Encryption</h1>
-        <p align="center">
-            <a href="https://github.com/zama-ai/concrete-ml"> <img style="vertical-align: middle; display:inline-block; margin-right: 3px;" width=15 src="file/images/logos/github.png">Concrete-ML</a>
-            —
-            <a href="https://docs.zama.ai/concrete-ml"> <img style="vertical-align: middle; display:inline-block; margin-right: 3px;" width=15 src="file/images/logos/documentation.png">Documentation</a>
-            —
-            <a href="https://zama.ai/community"> <img style="vertical-align: middle; display:inline-block; margin-right: 3px;" width=15 src="file/images/logos/community.png">Community</a>
-            —
-            <a href="https://twitter.com/zama_fhe"> <img style="vertical-align: middle; display:inline-block; margin-right: 3px;" width=15 src="file/images/logos/x.png">@zama_fhe</a>
-        </p>
         <p align="center">
             <img src="file/images/banner.png">
         </p>
@@ -278,7 +283,7 @@ with demo:
         pre_process_encrypt_send_applicant,
         inputs=[client_id, bool_inputs, num_children, household_size, total_income, age, \
                 income_type, education_type, family_status, occupation_type, housing_type],
-        outputs=[encrypted_input_applicant],
+        outputs=[encrypted_input_applicant, encrypt_button_applicant],
     )
 
     # Button to pre-process, generate the key, encrypt and send the bank inputs from the client 
@@ -286,7 +291,7 @@ with demo:
     encrypt_button_bank.click(
         pre_process_encrypt_send_bank,
         inputs=[client_id, account_age],
-        outputs=[encrypted_input_bank],
+        outputs=[encrypted_input_bank, encrypt_button_bank],
     )
 
     # Button to pre-process, generate the key, encrypt and send the credit bureau inputs from the 
@@ -294,10 +299,10 @@ with demo:
     encrypt_button_credit_bureau.click(
         pre_process_encrypt_send_credit_bureau,
         inputs=[client_id, years_employed, employed],
-        outputs=[encrypted_input_credit_bureau],
+        outputs=[encrypted_input_credit_bureau, encrypt_button_credit_bureau],
     )
 
-    gr.Markdown("## Step 3: Run FHE execution.")
+    gr.Markdown("## Step 3: Run the FHE evaluation.")
     gr.Markdown("<hr />")
     gr.Markdown("<span style='color:grey'>Server Side</span>")
     gr.Markdown(
@@ -310,13 +315,13 @@ with demo:
         """
     )
 
-    execute_fhe_button = gr.Button("Run FHE execution.")
+    execute_fhe_button = gr.Button("Run the FHE evaluation.")
     fhe_execution_time = gr.Textbox(
         label="Total FHE execution time (in seconds):", max_lines=1, interactive=False
     )
 
     # Button to send the encodings to the server using post method
-    execute_fhe_button.click(run_fhe, inputs=[client_id], outputs=[fhe_execution_time])
+    execute_fhe_button.click(run_fhe, inputs=[client_id], outputs=[fhe_execution_time, execute_fhe_button])
 
     gr.Markdown("## Step 4: Receive the encrypted output from the server and decrypt.")
     gr.Markdown("<hr />")
@@ -350,7 +355,7 @@ with demo:
     get_output_button.click(
         get_output_and_decrypt, 
         inputs=[client_id], 
-        outputs=[prediction_output, encrypted_output_representation],
+        outputs=[prediction_output, encrypted_output_representation, get_output_button],
     )
 
     gr.Markdown("## Step 5 (optional): Explain the prediction.")
@@ -380,7 +385,7 @@ with demo:
     explain_button.click(
         explain_encrypt_run_decrypt,
         inputs=[client_id, prediction_output, years_employed, employed],
-        outputs=[explain_prediction],
+        outputs=[explain_prediction, explain_button],
     )
 
     gr.Markdown(

backend.py

@@ -242,7 +242,7 @@ def _encrypt_send(client_id, inputs, client_type):
 
     _send_to_server(client_id, client_type, file_name)
 
-    return encrypted_inputs_short
+    return encrypted_inputs_short, gr.update(value="Inputs are encrypted and sent to server. ✅")
 
 
 def pre_process_encrypt_send_applicant(client_id, *inputs):
@@ -355,7 +355,7 @@ def run_fhe(client_id):
         data=data,
     ) as response:
         if response.ok:
-            return response.json()
+            return response.json(), gr.update(value="FHE evaluation is done. ✅")
         else:
             raise gr.Error("Please send the inputs from all three parties to the server first.")
 
@@ -402,6 +402,7 @@ def get_output_and_decrypt(client_id):
             return (
                 APPROVED_MESSAGE if output == 1 else DENIED_MESSAGE,
                 encrypted_output_short,
+                gr.update(value="Encrypted outputs have been received from the server. ✅"),
             )
 
         else:
@@ -426,6 +427,8 @@ def explain_encrypt_run_decrypt(client_id, prediction_output, *inputs):
         raise gr.Error(
             "Explaining the prediction can only be done if the credit card is likely to be denied."
         )
+    
+    button_update = gr.update(value="Prediction has been explained. ✅")
 
     # Retrieve the credit bureau inputs
     years_employed, employed = inputs
@@ -458,14 +461,14 @@ def explain_encrypt_run_decrypt(client_id, prediction_output, *inputs):
                 # likely tried the bin suggested in a previous explainability run. In that case, we 
                 # confirm that the credit card is likely to be approved
                 if years_employed_bin == years_employed:
-                    return APPROVED_MESSAGE
+                    return APPROVED_MESSAGE, button_update
 
                 # Else, that means the applicant is looking for some explainability. We therefore 
                 # suggest to try the obtained bin
                 return (
                     DENIED_MESSAGE + f" However, having at least {years_employed_bin} years of "
                     "employment would increase your chance of having your credit card approved."
-                )
+                ), button_update
 
         # In case no bins made the model predict an approval, explain why
         return (
@@ -473,12 +476,12 @@ def explain_encrypt_run_decrypt(client_id, prediction_output, *inputs):
             f"{YEARS_EMPLOYED_BINS[-1]} years does not seem to be enough to get an approval based "
             "on the given inputs. Other inputs like the income or the account's age might have "
             "bigger impact in this particular case."
-        )  
+        ), button_update
 
     # In case the applicant tried the "oldest" bin (but still got denied), explain why
     return (
         DENIED_MESSAGE + " Unfortunately, you already have the maximum amount of years of "
         f"employment ({years_employed} years). Other inputs like the income or the account's age "
         "might have a bigger impact in this particular case."
-    )
+    ), button_update