fix

app.py

@@ -316,14 +316,14 @@ with gr.Blocks() as demo:
         fn=None,
         inputs=[image_bef],
         outputs=[],
-        _js="(image) => { initializeEditorBefore(); importBackground(image); return []; }",
+        _js="(image) => { initializeEditorBefore(); importBackgroundBefore(image); return []; }",
     )
 
     image_aft.change(
         fn=None,
         inputs=[image_aft],
         outputs=[],
-        _js="(image) => { initializeEditorAfter(); importBackground(image); return []; }",
+        _js="(image) => { initializeEditorAfter(); importBackgroundAfter(image); return []; }",
     )
 
 

js/interactive_grid.js

@@ -1,31 +1,58 @@
 const gridSize = 14;
 var cellSize = null;
 var inputImage = null;
-var image = null;
-var canvas = null;
-var ctx = null;
-var canvasBg = null;
-let grid = new Array(gridSize).fill(null).map(() => new Array(gridSize).fill(false));
-var isInitialized = false;
+var image_bef = null;
+var image_aft = null;
+var canvas_before = null;
+var canvas_after = null;
+var ctx_bef = null;
+var ctx_aft = null;
+var canvasBg_bef = null;
+var canvasBg_aft = null;
+let grid_bef = new Array(gridSize).fill(null).map(() => new Array(gridSize).fill(false));
+let grid_aft = new Array(gridSize).fill(null).map(() => new Array(gridSize).fill(false));
+var isInitialized_bef = false;
+var isInitialized_aft = false;
+
+let selectedCells_bef = 0;
+let selectedCells_aft = 0;
+
+function createGridBefore() {
+    console.log('createGrid')
 
-let selectedCells = 0;
+    for (let i = 0; i < 196; i++) {
+        const div = document.createElement('div');
+        div.classList.add('checkbox');
+        div.innerHTML = '<input type="checkbox">';
+        grid_bef.appendChild(div);
+    }
+}
 
-function createGrid() {
+function createGridAfter() {
     console.log('createGrid')
 
     for (let i = 0; i < 196; i++) {
         const div = document.createElement('div');
         div.classList.add('checkbox');
         div.innerHTML = '<input type="checkbox">';
-        grid.appendChild(div);
+        grid_aft.appendChild(div);
     }
 }
 
-function loadImage(event) {
+function loadImageBefore(event) {
+    const file = event.target.files[0];
+    const reader = new FileReader();
+    reader.onload = function (e) {
+        image_bef.src = e.target.result;
+    }
+    reader.readAsDataURL(file);
+}
+
+function loadImageAfter(event) {
     const file = event.target.files[0];
     const reader = new FileReader();
     reader.onload = function (e) {
-        image.src = e.target.result;
+        image_aft.src = e.target.result;
     }
     reader.readAsDataURL(file);
 }
@@ -48,127 +75,170 @@ function handleMouseLeave(event) {
 }
 
 
-function drawGrid() {
-    ctx.clearRect(0, 0, canvas.width, canvas.height);
-    drawBackground();
+function drawGridBefore() {
+    ctx_bef.clearRect(0, 0, canvas_before.width, canvas_before.height);
+    drawBackgroundBefore();
     for (let row = 0; row < gridSize; row++) {
         for (let col = 0; col < gridSize; col++) {
-            ctx.beginPath();
-            ctx.rect(col * cellSize, row * cellSize, cellSize, cellSize);
-            ctx.strokeStyle = 'black';
-            ctx.lineWidth = 2;
-            ctx.stroke();
+            ctx_bef.beginPath();
+            ctx_bef.rect(col * cellSize, row * cellSize, cellSize, cellSize);
+            ctx_bef.strokeStyle = 'black';
+            ctx_bef.lineWidth = 2;
+            ctx_bef.stroke();
+
+            if (grid_bef[row][col]) {
+                ctx_bef.fillStyle = 'rgba(0, 255, 0, 0.5)';
+                ctx_bef.fillRect(col * cellSize, row * cellSize, cellSize, cellSize);
+            }
+        }
+    }
+}
+
+
+
+function drawGridAfter() {
+    ctx_aft.clearRect(0, 0, canvas_after.width, canvas_after.height);
+    drawBackgroundAfter();
+    for (let row = 0; row < gridSize; row++) {
+        for (let col = 0; col < gridSize; col++) {
+            ctx_aft.beginPath();
+            ctx_aft.rect(col * cellSize, row * cellSize, cellSize, cellSize);
+            ctx_aft.strokeStyle = 'black';
+            ctx_aft.lineWidth = 2;
+            ctx_aft.stroke();
 
             if (grid[row][col]) {
-                ctx.fillStyle = 'rgba(0, 255, 0, 0.5)';
-                ctx.fillRect(col * cellSize, row * cellSize, cellSize, cellSize);
+                ctx_aft.fillStyle = 'rgba(0, 255, 0, 0.5)';
+                ctx_aft.fillRect(col * cellSize, row * cellSize, cellSize, cellSize);
             }
         }
     }
 }
 
-
 function initializeEditorBefore() {
     console.log("initializeEditorBefore");
 
-    if (isInitialized) {
+    if (isInitialized_bef) {
         return;
     }
-    isInitialized = true;
+    isInitialized_bef = true;
 
-    image = document.getElementById('image');
-    canvas = document.getElementById('before');
-    ctx = canvas.getContext('2d');
+    image_bef = document.getElementById('image-before');
+    canvas_before = document.getElementById('before');
+    ctx_bef = canvas.getContext('2d');
 
     // Add click event listener to canvas
-    canvas.addEventListener('mousedown', handleMouseDown);
-    canvas.addEventListener('mousemove', handleMouseMove);
-    canvas.addEventListener('mouseup', handleMouseUp);
-    canvas.addEventListener('mouseleave', handleMouseLeave);
+    canvas_before.addEventListener('mousedown', handleMouseDown);
+    canvas_before.addEventListener('mousemove', handleMouseMove);
+    canvas_before.addEventListener('mouseup', handleMouseUp);
+    canvas_before.addEventListener('mouseleave', handleMouseLeave);
 
     cellSize = canvas.width / gridSize;
 
-    canvas.addEventListener('click', (event) => {
-        const rect = canvas.getBoundingClientRect();
-        const scaleX = canvas.width / rect.width;
-        const scaleY = canvas.height / rect.height;
+    canvas_before.addEventListener('click', (event) => {
+        const rect = canvas_before.getBoundingClientRect();
+        const scaleX = canvas_before.width / rect.width;
+        const scaleY = canvas_before.height / rect.height;
         const x = (event.clientX - rect.left) * scaleX;
         const y = (event.clientY - rect.top) * scaleY;
         const row = Math.floor(y / cellSize);
         const col = Math.floor(x / cellSize);
 
         // If the cell is already selected, it's always allowed to deselect it
-        if (grid[row][col]) {
-            grid[row][col] = false;
-            selectedCells--; // Decrement the selected cell count
+        if (grid_bef[row][col]) {
+            grid_bef[row][col] = false;
+            selectedCells_bef--; // Decrement the selected cell count
         } else {
             // Only select a new cell if less than 50 cells are already selected
-            if (selectedCells < 50) {
-                grid[row][col] = true;
-                selectedCells++; // Increment the selected cell count
+            if (selectedCells_bef < 50) {
+                grid_bef[row][col] = true;
+                selectedCells_bef++; // Increment the selected cell count
             }
         }
-        drawGrid();
+        drawGridBefore();
     });
 
-    drawGrid();
+    drawGridBefore();
 }
 
 
 function initializeEditorAfter() {
     console.log("initializeEditorAfter");
 
-    if (isInitialized) {
+    if (isInitialized_aft) {
         return;
     }
-    isInitialized = true;
+    isInitialized_aft = true;
 
-    image = document.getElementById('image');
-    canvas = document.getElementById('after');
-    ctx = canvas.getContext('2d');
+    image_aft = document.getElementById('image-after');
+    canvas_after = document.getElementById('after');
+    ctx_aft = canvas_after.getContext('2d');
 
     // Add click event listener to canvas
-    canvas.addEventListener('mousedown', handleMouseDown);
-    canvas.addEventListener('mousemove', handleMouseMove);
-    canvas.addEventListener('mouseup', handleMouseUp);
-    canvas.addEventListener('mouseleave', handleMouseLeave);
+    canvas_after.addEventListener('mousedown', handleMouseDown);
+    canvas_after.addEventListener('mousemove', handleMouseMove);
+    canvas_after.addEventListener('mouseup', handleMouseUp);
+    canvas_after.addEventListener('mouseleave', handleMouseLeave);
 
-    cellSize = canvas.width / gridSize;
+    cellSize = canvas_after.width / gridSize;
 
-    canvas.addEventListener('click', (event) => {
-        const rect = canvas.getBoundingClientRect();
-        const scaleX = canvas.width / rect.width;
-        const scaleY = canvas.height / rect.height;
+    canvas_after.addEventListener('click', (event) => {
+        const rect = canvas_after.getBoundingClientRect();
+        const scaleX = canvas_after.width / rect.width;
+        const scaleY = canvas_after.height / rect.height;
         const x = (event.clientX - rect.left) * scaleX;
         const y = (event.clientY - rect.top) * scaleY;
         const row = Math.floor(y / cellSize);
         const col = Math.floor(x / cellSize);
 
         // If the cell is already selected, it's always allowed to deselect it
-        if (grid[row][col]) {
-            grid[row][col] = false;
-            selectedCells--; // Decrement the selected cell count
+        if (grid_aft[row][col]) {
+            grid_aft[row][col] = false;
+            selectedCells_aft--; // Decrement the selected cell count
         } else {
             // Only select a new cell if less than 50 cells are already selected
-            if (selectedCells < 50) {
-                grid[row][col] = true;
-                selectedCells++; // Increment the selected cell count
+            if (selectedCells_aft < 50) {
+                grid_aft[row][col] = true;
+                selectedCells_aft++; // Increment the selected cell count
             }
         }
-        drawGrid();
+        drawGridAfter();
     });
 
-    drawGrid();
+    drawGridAfter();
 }
 
 
-function drawBackground() {
-    if (canvasBg != null) {
-        const canvasWidth = canvas.width;
-        const canvasHeight = canvas.height;
+function drawBackgroundBefore() {
+    if (canvasBg_bef != null) {
+        const canvasWidth = canvas_before.width;
+        const canvasHeight = canvas_before.height;
+
+        const bgWidth = canvasBg_bef.width;
+        const bgHeight = canvasBg_bef.height;
+
+        const scaleX = canvasWidth / bgWidth;
+        const scaleY = canvasHeight / bgHeight;
+
+        const scale = Math.max(scaleX, scaleY);
+
+        const newWidth = bgWidth * scale;
+        const newHeight = bgHeight * scale;
+
+        const xOffset = (canvasWidth - newWidth) / 2;
+        const yOffset = (canvasHeight - newHeight) / 2;
+
+        ctx_bef.drawImage(canvasBg_bef, 0, 0, bgWidth, bgHeight, xOffset, yOffset, newWidth, newHeight);
+    }
+}
+
+function drawBackgroundAfter() {
+    if (canvasBg_aft != null) {
+        const canvasWidth = canvas_after.width;
+        const canvasHeight = canvas_after.height;
 
-        const bgWidth = canvasBg.width;
-        const bgHeight = canvasBg.height;
+        const bgWidth = canvasBg_aft.width;
+        const bgHeight = canvasBg_aft.height;
 
         const scaleX = canvasWidth / bgWidth;
         const scaleY = canvasHeight / bgHeight;
@@ -181,22 +251,38 @@ function drawBackground() {
         const xOffset = (canvasWidth - newWidth) / 2;
         const yOffset = (canvasHeight - newHeight) / 2;
 
-        ctx.drawImage(canvasBg, 0, 0, bgWidth, bgHeight, xOffset, yOffset, newWidth, newHeight);
+        ctx_aft.drawImage(canvasBg_aft, 0, 0, bgWidth, bgHeight, xOffset, yOffset, newWidth, newHeight);
+    }
+}
+
+function importBackgroundBefore(image) {
+    if (image == null) {
+        canvasBg_bef = null;
+        drawGridBefore();
+        return;
+    }
+
+    let m = new Image();
+    m.src = image;
+    m.onload = function () {
+        canvasBg_bef = m;
+        drawGridBefore();
     }
 }
 
-function importBackground(image) {
+
+function importBackgroundAfter(image) {
     if (image == null) {
-        canvasBg = null;
-        drawGrid();
+        canvasBg_aft = null;
+        drawGridAfter();
         return;
     }
 
     let m = new Image();
     m.src = image;
     m.onload = function () {
-        canvasBg = m;
-        drawGrid();
+        canvasBg_aft = m;
+        drawGridAfter();
     }
 }