Upd JS

static/script.js

@@ -17,13 +17,11 @@ function resetUI() {
     </div>
   `;
 
-  // ✅ Update canvas & ctx properly
-  const newCanvas = document.getElementById("lines-canvas");
-  canvas.width = newCanvas.width = 0;
-  canvas.height = newCanvas.height = 0;
-  ctx.clearRect?.(0, 0, canvas.width, canvas.height);
+  // Re-attach canvas & ctx properly
+  canvas = document.getElementById("lines-canvas");
+  ctx    = canvas.getContext("2d");
 
-  // 🧼 Remove old button & loader if exists
+  // Remove old button & loader if exists
   if (loaderDiv) loaderDiv.remove();
   if (generateBtn) generateBtn.remove();
 }
@@ -96,12 +94,17 @@ function renderResults({ tester, results }) {
   const testerSquare = createSquare(testerInput.files[0], "#3b82f6");
   testerSquare.classList.add("tester-node");
   testerColumn.appendChild(testerSquare);
-
-  results.forEach((r, idx) => {
-    const square = createSquare(samplerInput.files[idx], getBorderColor(r.similarity));
+  // Append results
+  results.forEach((r,idx)=>{
+    const square = createSquare(
+      samplerInput.files[idx],
+      getBorderColor(r.similarity)
+    );
     samplerColumn.appendChild(square);
-    drawLineBetween(testerSquare, square, r.similarity);
+    /* Wait for browser calculate layout then draw line */
+    requestAnimationFrame(()=>drawLineBetween(testerSquare,square,r.similarity));
   });
+  
 }
 
 

static/styles.css

@@ -90,78 +90,54 @@
     overflow-x: auto;
   }
 
-  #result-layout {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    position: relative;
-    width: 100%;
-    padding: 2rem 0;
-    gap: 3rem;
-    flex-wrap: wrap;
-  }
-  
-  #tester-column {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
-  .tester-node {
-    box-shadow: 0 0 10px rgba(59,130,246,0.5);
-  }  
-  
-  #sampler-column {
-    display: flex;
-    flex-direction: column;
-    gap: 2rem;
-    align-items: center;
-  }
-  
-  .square {
-    width: 120px;
-    height: 120px;
-    border-radius: 0.5rem;
-    overflow: hidden;
-    position: relative;
-    flex-shrink: 0;
+  /* ─── RESULT LAYOUT ───────────────────────────────── */
+  #result-layout{
+    display:flex;
+    justify-content:center;
+    align-items:center;
+    position:relative;
+    width:100%;
+    padding:2rem 0;
+    gap:clamp(3rem,8vw,6rem);   /*   ⬅︎ lớn hơn ⇒ label + line không bị chạm   */
+    overflow-x:auto;            /*   nếu màn nhỏ sẽ scroll ngang   */
   }
-  .square img {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
+
+  /* Tester đứng giữa cột trái */
+  #tester-column{
+    display:flex;
+    justify-content:center;
+    align-items:center;
   }
-  
-  #lines-canvas {
-    position: absolute;
-    top: 0;
-    left: 0;
-    pointer-events: none;
+
+  /* Sampler xếp cột phải */
+  #sampler-column{
+    display:flex;
+    flex-direction:column;
+    gap:2.5rem;                 /*   giãn từng ảnh   */
+    align-items:center;
   }
-  
-  .label {
-    position: absolute;
-    background: rgba(0, 0, 0, 0.7);
-    color: #fff;
-    padding: 2px 6px;
-    border-radius: 4px;
-    font-size: 0.8rem;
-    transform: translate(-50%, -50%);
+
+  /* Ảnh vuông */
+  .square{
+    width:120px;
+    height:120px;
+    border-radius:0.5rem;
+    overflow:hidden;
+    flex-shrink:0;
+  }
+  .square img{width:100%;height:100%;object-fit:cover}
+
+  /* Canvas + nhãn */
+  #lines-canvas{position:absolute;top:0;left:0;pointer-events:none;z-index:0}
+  .label{position:absolute;transform:translate(-50%,-50%);z-index:1}
+
+  /* ─── MOBILE ≤600 px: giữ hai cột nhưng thu nhỏ ảnh ─── */
+  @media (max-width:600px){
+    #result-layout{gap:2rem}         /*   hẹp lại   */
+    .square{width:72px;height:72px;} /*   nhỏ hơn   */
   }
 
-  @media (max-width: 600px) {
-    #result-layout {
-      flex-direction: column;
-      gap: 2rem;
-    }
-  
-    #sampler-column {
-      flex-direction: row;
-      flex-wrap: wrap;
-      justify-content: center;
-    }
-  
-    .square {
-      width: 80px;
-      height: 80px;
-    }
-  }
+    .tester-node {
+      box-shadow: 0 0 10px rgba(59,130,246,0.5);
+    }  
+