Update app.py (#2)

- Update app.py (9a9e943813136d7e7bfb4aa6c35d8db0020da115)


Co-authored-by: Sandro Ferroni <[email protected]>

app.py

@@ -1,54 +1,250 @@
 import gradio as gr
-from predictor import predict
+from predictor import predict, key_already_generated, pre_process_encrypt_send_purchase, decrypt_prediction
 
-def make_prediction(distance_from_home, distance_from_last_transaction, 
-                    ratio_to_median_purchase_price, repeat_retailer, 
-                    used_chip, used_pin_number, online_order):
+def key_generated():
     """
-    Prepares user input data and performs a local prediction.
-
-    Args:
-        distance_from_home (float): Distance from home.
-        distance_from_last_transaction (float): Distance from the last transaction.
-        ratio_to_median_purchase_price (float): Ratio to the median purchase price.
-        repeat_retailer (bool): Repeated retailer.
-        used_chip (bool): Used chip.
-        used_pin_number (bool): Used PIN number.
-        online_order (bool): Online order.
+    Check if the evaluation keys have already been generated.
 
     Returns:
-        str: Prediction result ("Fraudulent" or "Non-fraudulent").
+        bool: True if the evaluation keys have already been generated, False otherwise.
+    """
+    if not key_already_generated():
+        error_message = (
+            f"Error Encountered While generating the evaluation keys."
+        )
+        print(error_message)
+        return {gen_key_btn: gr.update(value=error_message)}
+    else:
+        print("Keys have been generated ✅")
+        return {gen_key_btn: gr.update(value="Keys have been generated ✅")}
+    
+demo = gr.Blocks(css=".markdown-body { font-size: 18px; }")
+
+with demo:
+    gr.Markdown(
+        """
+        <div style="display: flex; justify-content: center; align-items: center;">
+            <img style="margin-right: 50px;" width=200 src="https://user-images.githubusercontent.com/5758427/197816413-d9cddad3-ba38-4793-847d-120975e1da11.png">
+            <img width=200 src="https://upload.wikimedia.org/wikipedia/fr/d/d8/Epita.png">
+        </div>
+        """
+    )
+
+    gr.Markdown(
+        """
+        <h1 style="text-align: center;">Fraud Detection with FHE Model</h1>
+        <p align="center">
+            <a href="https://github.com/CirSandro/private-fhe-fraud-detection">
+                <span style="vertical-align: middle; display:inline-block; margin-right: 3px;">💳</span>private-fhe-fraud-detection
+            </a>
+            —
+            <a href="https://docs.zama.ai/concrete-ml">
+                <span style="vertical-align: middle; display:inline-block; margin-right: 3px;">🔒</span>Documentation Concrete-ML
+            </a>
+        </p>
+        """
+    )
+
+    gr.Markdown(
     """
-    try:
-        input_data = {
-            "distance_from_home": distance_from_home,
-            "distance_from_last_transaction": distance_from_last_transaction,
-            "ratio_to_median_purchase_price": ratio_to_median_purchase_price,
-            "repeat_retailer": int(repeat_retailer),
-            "used_chip": int(used_chip),
-            "used_pin_number": int(used_pin_number),
-            "online_order": int(online_order),
-        }
-        return predict(input_data)
-    except Exception as e:
-        return f"Unexpected error: {e}"
-
-# Gradio user interface
-iface = gr.Interface(
-    fn=make_prediction,
-    inputs=[
-        gr.Number(label="Distance from Home"),
-        gr.Number(label="Distance from Last Transaction"),
-        gr.Number(label="Ratio to Median Purchase Price"),
-        gr.Checkbox(label="Repeat Retailer"),
-        gr.Checkbox(label="Used Chip"),
-        gr.Checkbox(label="Used PIN Number"),
-        gr.Checkbox(label="Online Order"),
-    ],
-    outputs=gr.Textbox(label="Output"),
-    title="Fraud Detection with Local FHE Model",
-    description="Local interface using a compiled FHE model to detect fraud."
-)
+    <p align="center" style="font-size: 16px;">
+        How to detect bank fraud without using your personal data ?</p>
+    """
+    )   
+
+    with gr.Accordion("What is bank fraud detection?", open=False):
+        gr.Markdown(
+            """
+            Bank fraud detection is the process of identifying fraudulent activities or transactions 
+            that may pose a risk to a bank or its customers. It is essential to detect fraudulent 
+            activities to prevent financial losses and protect the integrity of the banking system.
+            """
+        )
+
+    with gr.Accordion("Why is it important to protect this data?", open=False):
+        gr.Markdown(
+            """
+            Banking and financial data often contain sensitive personal information, such as income,
+            spending habits, and account numbers. Protecting this information ensures that customers'
+            privacy is respected and safeguarded from unauthorized access.
+            """
+        )
+
+    with gr.Accordion("Why is Fully Homomorphic Encryption (FHE) a good solution?", open=False):
+        gr.Markdown(
+            """
+            Fully Homomorphic Encryption (FHE) is a powerful technique for enhancing privacy and accuracy
+            in the context of fraud detection, particularly when dealing with sensitive banking data. FHE
+            allows for the encryption of data, which can then be processed and analyzed without ever needing
+            to decrypt it. 
+
+            Each party involved in the detection process can collaborate without compromising user privacy,
+            minimizing the risk of data leaks or breaches. The data remains confidential throughout the entire
+            process, ensuring that the privacy of users is maintained.
+            """
+        )
+
+    gr.Markdown(
+        """
+        <p style="text-align: center;">
+            Below, we will explain the flow in the image by simulating a purchase you've just made, and show you how our fraud detection model processes the transaction.
+        </p>
+        """
+    )
+
+    gr.Markdown(
+        """
+        <p align="center">
+            <img width="75%" height="30%" src="https://raw.githubusercontent.com/kcelia/Img/main/fhe_anonymization_banner.png">
+        </p>
+        """
+    )
+
+    gr.Markdown("<hr />")
+
+    ########################## Key Gen Part ##########################
+
+    gr.Markdown(
+        "## Step 1: Generate the keys\n\n"
+        """In Fully Homomorphic Encryption (FHE) methods, two types of keys are created. The first 
+        type, called secret keys, are used to encrypt and decrypt the user's data. The second type, 
+        called evaluation keys, enables a server to work on the encrypted data without seeing the 
+        actual data.
+        """
+    )
+
+    gen_key_btn = gr.Button("Generate the secret and evaluation keys")
+
+    gen_key_btn.click(
+        key_generated,
+        inputs=[],
+        outputs=[gen_key_btn],
+    )#547
+
+    gr.Markdown("<hr />")
+
+    ########################## Encrypt Data ##########################
+
+    gr.Markdown(
+        "## Step 2: Make your purchase\n\n"
+        """ 🛍️ It's time to shop! To simulate your latest purchase, please provide the details of your most recent transaction.
+        """
+    )
+
+    with gr.Row():
+        with gr.Column():
+            distance_home = gr.Slider(
+                minimum=float(0),
+                maximum=float(22000),
+                step=1, 
+                value=10,
+                label="Distance from Home", 
+                info="How far was the purchase from your home (in km)?"
+            )
+            distance_last = gr.Slider(
+                minimum=float(0),
+                maximum=float(22000),
+                step=1,
+                value=1,
+                label="Distance from Last Transaction", 
+                info="Distance between this purchase and the last one (in km)?"
+            )
+            ratio = gr.Slider(
+                minimum=float(0),
+                maximum=float(10000),
+                step=0.1,
+                value=1,
+                label="Ratio to Median Purchase Price", 
+                info="Purchase ratio compared to your average purchase",
+            )
+            repeat_retailer = gr.Checkbox(
+                label="Repeat Retailer",
+                info="Check if you are purchasing from the same retailer as your last transaction"
+            )
+            used_chip = gr.Checkbox(
+                label="Used Chip",
+                info="Check if you used a chip card for this transaction"
+            )
+            used_pin_number = gr.Checkbox(
+                label="Used Pin Number",
+                info="Check if you used your PIN number during the transaction"
+            )
+            online = gr.Checkbox(
+                label="Online Order",
+                info="Check if you made your purchase online"
+            )
+
+    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
+            )
+
+    encrypt_button_applicant.click(
+        pre_process_encrypt_send_purchase,
+        inputs=[distance_home, distance_last, ratio, repeat_retailer, used_chip, used_pin_number, \
+                online],
+        outputs=[encrypted_input_applicant, encrypt_button_applicant],
+    )
+
+    gr.Markdown("<hr />")
+
+    ########################## Model Prediction ##########################
+
+    gr.Markdown("## Step 3: Run the FHE evaluation.")
+    gr.Markdown("<span style='color:grey'>Server Side</span>")
+    gr.Markdown(
+        """
+        It's high time to launch our prediction, by pressing the button you will launch the 
+        fraud analysis that our fictitious bank offers you.
+
+        This server employs a [Decision Tree (by Concrete-ML)](https://github.com/zama-ai/concrete-ml/blob/release/1.8.x/docs/references/api/concrete.ml.sklearn.tree.md#class-decisiontreeclassifier)
+        classifier model that has been trained on a synthetic data-set.
+        """
+    )
+
+    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(predict, outputs=[fhe_execution_time, execute_fhe_button])
+
+    gr.Markdown("<hr />")
+
+    ########################## Decrypt Prediction ##########################
+
+    gr.Markdown("## Step 4: Receive the encrypted output from the server and decrypt.")
+    gr.Markdown(
+        """
+        🔔 You will receive a notification! Is this a Fraud? The message is decrypted by pressing the button.
+        """
+    )
+
+    get_output_button = gr.Button("Decrypt the prediction.")
+    prediction_output = gr.Textbox(
+        label="Prediction", max_lines=1, interactive=False
+    )
+    get_output_button.click(
+        decrypt_prediction,
+        outputs=[prediction_output, get_output_button],
+    )
+    
+
+    gr.Markdown(
+        """
+        You now know that it is possible to detect bank fraud without knowing your personal information.
+        """
+    )
+
+    gr.Markdown(
+        "The app was built with [Concrete-ML](https://github.com/zama-ai/concrete-ml), a "
+        "Privacy-Preserving Machine Learning (PPML) open-source set of tools by [Zama](https://zama.ai/). "
+        "Try it yourself and don't forget to star on Github &#11088;."
+    )
 
 if __name__ == "__main__":
-    iface.launch()
+    demo.launch()