Adds a Credit Card Fraud Detection demo

docs/knowledge_base/demos/fraud_detection.md

@@ -0,0 +1,22 @@
+A Taipy Application that analyzes credit card transactions to detect fraud.
+
+[Try it live](https://fraud-detection.taipy.cloud/Transactions?null=){: .tp-btn target='blank' }
+[Get it on GitHub](https://github.com/Avaiga/demo-fraud-detection){: .tp-btn .tp-btn--accent target='blank' }
+
+# Understanding the Application
+This application shows a list of credit card transactions. The user can select a date range to
+predict fraud. The application will then use an XGB model to mark potentially fraudulent
+transactions in red or yellow. 
+
+![List of Transactions Page](images/fraud_transactions.png){width=100%}
+
+The user can select a transaction to see an explanation of the model's prediction, as well as the client's
+ other transactions.
+
+![Prediction Explanation Page](images/fraud_explanation.png){width=100%}
+
+The user can also choose the threshold of the model. The threshold is the output of the model
+ above which a transaction is considered fraudulent. The user can choose the model according
+  to the displayed confusion matrix and by looking at False Positive and False Negative transactions.
+
+![Threshold Selection Page](images/fraud_threshold.png){width=100%}

docs/knowledge_base/demos/index.md

@@ -259,4 +259,18 @@ Let's explore demos of applications made with Taipy.
       </div> 
     </a>
   </li>
+
+  <li class="tp-col-12 tp-col-md-6 d-flex" data-keywords="gui dashboard vizelement layout chart ai multi-page classification">
+    <a class="tp-content-card tp-content-card--horizontal tp-content-card--small" href="pollution_sensors">
+      <header class="tp-content-card-header">
+        <img class="tp-content-card-image" src="images/fraud_threshold.png">
+      </header>
+      <div class="tp-content-card-body">
+        <h4>Fraud Detection</h4>
+        <span class="tp-tag">Front-end</span>
+        <p> A Taipy Application that analyzes credit card transactions to detect fraud.
+        </p>
+      </div> 
+    </a>
+  </li>
 </ul>

docs/knowledge_base/index.md

@@ -491,6 +491,18 @@ hide:
       </div> 
     </a>
   </li>
+  <li data-keywords="gui dashboard vizelement layout chart ai multi-page classification">
+    <a class="tp-content-card tp-content-card--horizontal tp-content-card--small" href="demos/fraud_detection/">
+      <header class="tp-content-card-header">
+        <img class="tp-content-card-icon" src="demos/images/icon-code.svg">
+      </header>
+      <div class="tp-content-card-body">
+        <h4> Fraud Detection </h4>
+        <p> A Taipy Application that analyzes credit card transactions to detect fraud.
+        </p>
+      </div> 
+    </a>
+  </li>
 </ul>
 
 # Tips & Tricks

mkdocs.yml_template

@@ -57,6 +57,7 @@ nav:
         - "Drift Detection": knowledge_base/demos/drift_detection.md
         - "Realtime Pollution Dashboard" : knowledge_base/demos/pollution_sensors.md
         - "Background Remover" : knowledge_base/demos/background_remover.md
+        - "Fraud Detection": knowledge_base/demos/fraud_detection.md
     - "Tips and tricks":
         - "Tips and tricks": knowledge_base/tips/index.md
         - "Scenarios": knowledge_base/tips/scenarios/index.md