Tune web-safe border colors and selection outlines

app.py

@@ -40,6 +40,8 @@ import numpy as np
 
 
 PATCH_CHOICES = [14, 16, 28]
+PATCH_OUTLINE_OUTER_BGR = (42, 23, 15)    # dark slate
+PATCH_OUTLINE_INNER_BGR = (11, 158, 245)  # amber
 
 DEMO_VIDEO_PATH = os.path.join(
     os.path.dirname(os.path.abspath(__file__)),
@@ -407,14 +409,25 @@ def overlay_selection(
     keep = pix_mask.astype(bool)[..., None]
     out = np.where(keep, frame_bgr, bg)
     if outline:
+        # A two-tone stroke survives browser H.264/yuv420p encoding better
+        # than a single 1 px saturated line.
+        outer_thickness = 2 if patch >= 20 else 1
         for i in range(hb):
             for j in range(wb):
                 if mask_grid[i, j]:
                     y0, x0 = i * patch, j * patch
+                    y1, x1 = y0 + patch - 1, x0 + patch - 1
                     cv2.rectangle(
-                        out, (x0, y0), (x0 + patch - 1, y0 + patch - 1),
-                        (0, 220, 255), 1,
+                        out, (x0, y0), (x1, y1),
+                        PATCH_OUTLINE_OUTER_BGR, outer_thickness,
+                        lineType=cv2.LINE_AA,
                     )
+                    if patch >= 6 and (x1 - x0) >= 3 and (y1 - y0) >= 3:
+                        cv2.rectangle(
+                            out, (x0 + 1, y0 + 1), (x1 - 1, y1 - 1),
+                            PATCH_OUTLINE_INNER_BGR, 1,
+                            lineType=cv2.LINE_AA,
+                        )
     return out
 
 
@@ -996,8 +1009,14 @@ CUSTOM_CSS = """
 :root, .gradio-container, .gradio-container.dark {
     --ovc-grad: linear-gradient(135deg, #4f46e5 0%, #2563eb 50%, #06b6d4 100%);
     --ovc-grad-soft: linear-gradient(135deg, rgba(79,70,229,0.10), rgba(6,182,212,0.10));
-    --ovc-ring: rgba(99,102,241,0.32);
-    --ovc-ring-strong: rgba(99,102,241,0.55);
+    --ovc-ring: rgba(79,70,229,0.40);
+    --ovc-ring-strong: rgba(79,70,229,0.62);
+    --ovc-line: rgba(100,116,139,0.34);
+    --ovc-line-strong: rgba(100,116,139,0.48);
+    --ovc-line-accent-soft: rgba(79,70,229,0.28);
+    --ovc-line-accent: rgba(79,70,229,0.40);
+    --ovc-line-accent-strong: rgba(79,70,229,0.58);
+    --ovc-line-cyan: rgba(6,182,212,0.26);
 }
 .gradio-container { max-width: 1320px !important; margin: 0 auto !important; }
 @keyframes ovc-shift {
@@ -1024,7 +1043,7 @@ CUSTOM_CSS = """
         linear-gradient(180deg, rgba(79,70,229,0.06), rgba(6,182,212,0.03)),
         repeating-linear-gradient(0deg, rgba(99,102,241,0.05) 0 1px, transparent 1px 28px),
         repeating-linear-gradient(90deg, rgba(99,102,241,0.05) 0 1px, transparent 1px 28px);
-    border: 1px solid rgba(99,102,241,0.22);
+    border: 1px solid var(--ovc-line-accent-soft);
     margin-bottom: 18px;
     position: relative;
     overflow: hidden;
@@ -1068,7 +1087,7 @@ CUSTOM_CSS = """
     padding: 7px 14px;
     border-radius: 999px;
     background: var(--background-fill-primary, #fff);
-    border: 1px solid rgba(99,102,241,0.32);
+    border: 1px solid var(--ovc-line-accent);
     color: #4338ca;
     transition: transform 0.12s ease, box-shadow 0.18s ease,
                 background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
@@ -1085,21 +1104,21 @@ CUSTOM_CSS = """
 .gradio-container.dark .ovc-links a {
     background: rgba(30,41,59,0.7);
     color: #c7d2fe;
-    border-color: rgba(99,102,241,0.4);
+    border-color: var(--ovc-line-accent-strong);
 }
 
 /* Cards */
 .ovc-card {
     border-radius: 16px !important;
     padding: 16px 18px !important;
-    border: 1px solid rgba(148,163,184,0.26) !important;
+    border: 1px solid var(--ovc-line) !important;
     background: var(--background-fill-primary) !important;
     box-shadow: 0 1px 3px rgba(15,23,42,0.04);
     transition: box-shadow 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
     animation: ovc-fade-in 0.32s ease-out;
 }
 .ovc-card:hover {
-    border-color: rgba(99,102,241,0.32) !important;
+    border-color: var(--ovc-line-accent) !important;
     box-shadow: 0 6px 22px rgba(15,23,42,0.07);
 }
 /* Primary outputs: subtle accent ring + lift */
@@ -1161,7 +1180,7 @@ CUSTOM_CSS = """
 .ovc-preset button {
     background: var(--ovc-grad-soft) !important;
     color: #4338ca !important;
-    border: 1px solid rgba(79,70,229,0.25) !important;
+    border: 1px solid var(--ovc-line-accent-soft) !important;
     border-radius: 10px !important;
     font-weight: 600 !important;
     transition: all 0.15s ease;
@@ -1179,7 +1198,7 @@ CUSTOM_CSS = """
     font-size: 0.80rem;
     padding: 22px 8px 10px;
     margin-top: 14px;
-    border-top: 1px solid rgba(148,163,184,0.18);
+    border-top: 1px solid rgba(100,116,139,0.22);
 }
 #ovc-footer code {
     background: rgba(79,70,229,0.08);
@@ -1223,11 +1242,11 @@ CUSTOM_CSS = """
 .ovc-card-primary .video-container,
 .ovc-card-primary .image-container,
 .ovc-card-primary .plot-container {
-    background: linear-gradient(180deg, rgba(99,102,241,0.05), rgba(6,182,212,0.02)) !important;
-    border: 1px dashed rgba(148,163,184,0.32) !important;
+    background: linear-gradient(180deg, rgba(99,102,241,0.05), rgba(6,182,212,0.025)) !important;
+    border: 1px dashed rgba(79,70,229,0.38) !important;
 }
 .ovc-card .gradio-video, .ovc-card .gradio-image, .ovc-card .gradio-plot {
-    border-color: rgba(148,163,184,0.22) !important;
+    border-color: var(--ovc-line) !important;
     background: transparent !important;
 }
 /* Empty placeholder text inside Gradio components */
@@ -1245,7 +1264,7 @@ CUSTOM_CSS = """
     padding: 12px 14px;
     border-radius: 14px;
     background: linear-gradient(135deg, rgba(79,70,229,0.07), rgba(6,182,212,0.04));
-    border: 1px solid rgba(99,102,241,0.18);
+    border: 1px solid var(--ovc-line-accent-soft);
     transition: transform 0.18s ease, box-shadow 0.18s ease;
 }
 .ovc-stat:hover {