Update app.py

app.py

@@ -248,125 +248,127 @@ def point(img, object):
     )
 
 
-js = """
-    function createBgAnimation() {
-        var canvas = document.createElement('canvas');
-        canvas.id = 'life-canvas';
-        document.body.appendChild(canvas);
-
-        var canvas = document.getElementById('life-canvas');
-        var ctx = canvas.getContext('2d');
+# js = """
+#     function createBgAnimation() {
+#         var canvas = document.createElement('canvas');
+#         canvas.id = 'life-canvas';
+#         document.body.appendChild(canvas);
+
+#         var canvas = document.getElementById('life-canvas');
+#         var ctx = canvas.getContext('2d');
         
-        function resizeCanvas() {
-            canvas.width = window.innerWidth;
-            canvas.height = window.innerHeight;
-        }
-        resizeCanvas();
-        window.addEventListener('resize', resizeCanvas);
-
-        var cellSize = 8;
-        var cols = Math.ceil(canvas.width / cellSize);
-        var rows = Math.ceil(canvas.height / cellSize);
-
-        // Track cell age for color variation
-        var grid = new Array(cols).fill(null)
-            .map(() => new Array(rows).fill(null)
-            .map(() => Math.random() > 0.8 ? 1 : 0)); // If alive, start with age 1
-
-        function countNeighbors(grid, x, y) {
-            var sum = 0;
-            for (var i = -1; i < 2; i++) {
-                for (var j = -1; j < 2; j++) {
-                    var col = (x + i + cols) % cols;
-                    var row = (y + j + rows) % rows;
-                    sum += grid[col][row] ? 1 : 0;
-                }
-            }
-            sum -= grid[x][y] ? 1 : 0;
-            return sum;
-        }
-
-        function computeNextGeneration() {
-            var next = grid.map(arr => [...arr]);
+#         function resizeCanvas() {
+#             canvas.width = window.innerWidth;
+#             canvas.height = window.innerHeight;
+#         }
+#         resizeCanvas();
+#         window.addEventListener('resize', resizeCanvas);
+
+#         var cellSize = 8;
+#         var cols = Math.ceil(canvas.width / cellSize);
+#         var rows = Math.ceil(canvas.height / cellSize);
+
+#         // Track cell age for color variation
+#         var grid = new Array(cols).fill(null)
+#             .map(() => new Array(rows).fill(null)
+#             .map(() => Math.random() > 0.8 ? 1 : 0)); // If alive, start with age 1
+
+#         function countNeighbors(grid, x, y) {
+#             var sum = 0;
+#             for (var i = -1; i < 2; i++) {
+#                 for (var j = -1; j < 2; j++) {
+#                     var col = (x + i + cols) % cols;
+#                     var row = (y + j + rows) % rows;
+#                     sum += grid[col][row] ? 1 : 0;
+#                 }
+#             }
+#             sum -= grid[x][y] ? 1 : 0;
+#             return sum;
+#         }
+
+#         function computeNextGeneration() {
+#             var next = grid.map(arr => [...arr]);
             
-            for (var i = 0; i < cols; i++) {
-                for (var j = 0; j < rows; j++) {
-                    var neighbors = countNeighbors(grid, i, j);
-                    var state = grid[i][j];
-
-                    if (state) {
-                        if (neighbors < 2 || neighbors > 3) {
-                            next[i][j] = 0; // Cell dies
-                        } else {
-                            next[i][j] = Math.min(state + 1, 5); // Age the cell, max age of 5
-                        }
-                    } else if (neighbors === 3) {
-                        next[i][j] = 1; // New cell born
-                    }
-                }
-            }
+#             for (var i = 0; i < cols; i++) {
+#                 for (var j = 0; j < rows; j++) {
+#                     var neighbors = countNeighbors(grid, i, j);
+#                     var state = grid[i][j];
+
+#                     if (state) {
+#                         if (neighbors < 2 || neighbors > 3) {
+#                             next[i][j] = 0; // Cell dies
+#                         } else {
+#                             next[i][j] = Math.min(state + 1, 5); // Age the cell, max age of 5
+#                         }
+#                     } else if (neighbors === 3) {
+#                         next[i][j] = 1; // New cell born
+#                     }
+#                 }
+#             }
             
-            grid = next;
-        }
-
-        function getColor(age, isDarkMode) {
-            // Light mode colors
-            var lightColors = {
-                1: '#dae1f5', // Light blue-grey
-                2: '#d3e0f4',
-                3: '#ccdff3',
-                4: '#c5def2',
-                5: '#beddf1'  // Slightly deeper blue-grey
-            };
-
-            // Dark mode colors
-            var darkColors = {
-                /*
-                1: '#4a5788', // Deep blue-grey
-                2: '#4c5a8d',
-                3: '#4e5d92',
-                4: '#506097',
-                5: '#52639c'  // Brighter blue-grey
-                */
-                1: 'rgb(16, 20, 32)',
-                2: 'rgb(21, 25, 39)',
-                3: 'rgb(26, 30, 46)',
-                4: 'rgb(31, 35, 53)',
-                5: 'rgb(36, 40, 60)'
-            };
-
-            return isDarkMode ? darkColors[age] : lightColors[age];
-        }
-
-        function draw() {
-            var isDarkMode = document.body.classList.contains('dark');
-            ctx.fillStyle = isDarkMode ? '#0b0f19' : '#f0f0f0';
-            ctx.fillRect(0, 0, canvas.width, canvas.height);
-            for (var i = 0; i < cols; i++) {
-                for (var j = 0; j < rows; j++) {
-                    if (grid[i][j]) {
-                        ctx.fillStyle = getColor(grid[i][j], isDarkMode);
-                        ctx.fillRect(i * cellSize, j * cellSize, cellSize - 1, cellSize - 1);
-                    }
-                }
-            }
-        }
-
-        var lastFrame = 0;
-        var frameInterval = 300;
-
-        function animate(timestamp) {
-            if (timestamp - lastFrame >= frameInterval) {
-                draw();
-                computeNextGeneration();
-                lastFrame = timestamp;
-            }
-            requestAnimationFrame(animate);
-        }
-
-        animate(0);
-    }
-"""
+#             grid = next;
+#         }
+
+#         function getColor(age, isDarkMode) {
+#             // Light mode colors
+#             var lightColors = {
+#                 1: '#dae1f5', // Light blue-grey
+#                 2: '#d3e0f4',
+#                 3: '#ccdff3',
+#                 4: '#c5def2',
+#                 5: '#beddf1'  // Slightly deeper blue-grey
+#             };
+
+#             // Dark mode colors
+#             var darkColors = {
+#                 /*
+#                 1: '#4a5788', // Deep blue-grey
+#                 2: '#4c5a8d',
+#                 3: '#4e5d92',
+#                 4: '#506097',
+#                 5: '#52639c'  // Brighter blue-grey
+#                 */
+#                 1: 'rgb(16, 20, 32)',
+#                 2: 'rgb(21, 25, 39)',
+#                 3: 'rgb(26, 30, 46)',
+#                 4: 'rgb(31, 35, 53)',
+#                 5: 'rgb(36, 40, 60)'
+#             };
+
+#             return isDarkMode ? darkColors[age] : lightColors[age];
+#         }
+
+#         function draw() {
+#             var isDarkMode = document.body.classList.contains('dark');
+#             ctx.fillStyle = isDarkMode ? '#0b0f19' : '#f0f0f0';
+#             ctx.fillRect(0, 0, canvas.width, canvas.height);
+#             for (var i = 0; i < cols; i++) {
+#                 for (var j = 0; j < rows; j++) {
+#                     if (grid[i][j]) {
+#                         ctx.fillStyle = getColor(grid[i][j], isDarkMode);
+#                         ctx.fillRect(i * cellSize, j * cellSize, cellSize - 1, cellSize - 1);
+#                     }
+#                 }
+#             }
+#         }
+
+#         var lastFrame = 0;
+#         var frameInterval = 300;
+
+#         function animate(timestamp) {
+#             if (timestamp - lastFrame >= frameInterval) {
+#                 draw();
+#                 computeNextGeneration();
+#                 lastFrame = timestamp;
+#             }
+#             requestAnimationFrame(animate);
+#         }
+
+#         animate(0);
+#     }
+# """
+
+js = ""
 
 css = """
     .output-text span p {
@@ -384,13 +386,13 @@ css = """
     }
 
     #life-canvas {
-        position: fixed;
+        /*position: fixed;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
         z-index: -1;
-        opacity: 0.3;
+        opacity: 0.3;*/
     }
 
 """