From 6f76551203ec098f857732279e786674fcbbb9f2 Mon Sep 17 00:00:00 2001
From: khoaguin <dkn.work@protonmail.com>
Date: Tue, 19 Nov 2024 17:00:50 +0700
Subject: [PATCH] done confetti effect after training is done

---
 dashboard/index.html                 | 59 ++++++++++++++++++++++++++++
 main.py                              | 17 ++++++++
 samples/launch_config/fl_config.json |  2 +-
 3 files changed, 77 insertions(+), 1 deletion(-)

diff --git a/dashboard/index.html b/dashboard/index.html
index 8e7f119..3fcf355 100644
--- a/dashboard/index.html
+++ b/dashboard/index.html
@@ -6,6 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Training Results Dashboard</title>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.6.0/dist/confetti.browser.min.js"></script>
     <style>
         .header {
             display: flex;
@@ -383,10 +384,68 @@ <h1 class="app-title">Federated Training Results</h1>
             }
         }
 
+        // Function to trigger confetti animation
+        function triggerConfetti() {
+            // First burst with text
+            var duration = 3 * 1000;
+            var end = Date.now() + duration;
+
+            // Create text element
+            const text = document.createElement('div');
+            text.textContent = 'Congratulations, you have completed Federated Learning on SyftBox 🎉🎉🎉';
+            text.style.position = 'fixed';
+            text.style.top = '40%';
+            text.style.left = '50%';
+            text.style.transform = 'translate(-50%, -50%)';
+            text.style.fontSize = '3em';
+            text.style.fontWeight = 'bold';
+            text.style.color = '#dc2626';
+            text.style.opacity = '0';
+            text.style.transition = 'opacity 1s';
+            document.body.appendChild(text);
+
+            // Fade in text
+            setTimeout(() => {
+                text.style.opacity = '1';
+            }, 100);
+
+            // Multiple confetti bursts
+            (function frame() {
+                confetti({
+                    particleCount: 20,
+                    angle: 60,
+                    spread: 55,
+                    origin: { x: 0, y: 0.6 }
+                });
+                confetti({
+                    particleCount: 20,
+                    angle: 120,
+                    spread: 55,
+                    origin: { x: 1, y: 0.6 }
+                });
+
+                if (Date.now() < end) {
+                    requestAnimationFrame(frame);
+                }
+            }());
+        }
+
+        // Function to check if the main.py script has finished running
+        async function checkIfDone() {
+            // Check done.json file
+            const doneData = await loadJSON('done.json');
+            if (doneData) {
+                console.log('Training completed:', doneData);
+                // Trigger confetti
+                triggerConfetti();
+            }
+        }
+
         // Initialize the dashboard and start polling
         async function initDashboard() {
             await checkForUpdates();
             setInterval(checkForUpdates, POLLING_INTERVAL);
+            setInterval(checkIfDone, POLLING_INTERVAL);
         }
 
         // Start the application
diff --git a/main.py b/main.py
index d35cdbe..869762b 100644
--- a/main.py
+++ b/main.py
@@ -1,3 +1,4 @@
+from datetime import datetime
 import importlib.util
 from syftbox.lib import Client
 from syftbox.lib import SyftPermission
@@ -493,6 +494,19 @@ def save_model_accuracy_metrics(
         json.dump(metrics, f)
 
 
+def create_done_file(client: Client, proj_folder: Path) -> None:
+    """
+    Create a done.json file to indicate that the script has finished running
+    """
+    metrics_folder = client.my_datasite / "public" / "fl" / proj_folder.name
+    done_file = metrics_folder / "done.json"
+    done_data = {
+        "done_time": datetime.now().isoformat()
+    }
+    with open(done_file, "w") as f:
+        json.dump(done_data, f)
+
+
 def advance_fl_round(client: Client, proj_folder: Path):
     """
     1. Wait for the trained model from the clients
@@ -510,6 +524,7 @@ def advance_fl_round(client: Client, proj_folder: Path):
     if current_round >= total_rounds + 1:
         print(f"FL project {proj_folder.name} is complete ✅")
         shift_project_to_done_folder(client, proj_folder, total_rounds)
+        create_done_file(client, proj_folder)
         return
 
     participants = fl_config["participants"]
@@ -598,6 +613,8 @@ def _advance_fl_project(client: Client, proj_folder: Path) -> None:
     5. wait for the trained model from the clients
     6. aggregate the trained model
     7. repeat d until all the rounds are complete
+    8. move weights to done folder and create a done.json file to indicate that 
+        the script has finished running
     """
 
     try:
diff --git a/samples/launch_config/fl_config.json b/samples/launch_config/fl_config.json
index 69ed417..f73fe44 100644
--- a/samples/launch_config/fl_config.json
+++ b/samples/launch_config/fl_config.json
@@ -11,5 +11,5 @@
     "test_dataset": "mnist_test_dataset.pt",
     "rounds": 3,
     "epoch": 10,
-    "learning_rate": 0.1
+    "learning_rate": 0.01
 }
\ No newline at end of file