Show captured border width overlay in picture CSS test preview

Backend: send border_width in WS metadata and frame_dims (width, height)
as a separate JSON message on first JPEG frame.

Frontend: render semi-transparent green overlay rectangles on each active
edge showing the sampling region depth, plus a small px label. Overlays
are proportionally sized based on border_width relative to frame dimensions.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-03-17 02:09:29 +03:00
parent 00c9ad3a86
commit 823cb90d2d
3 changed files with 85 additions and 1 deletions

View File

@@ -822,6 +822,7 @@ async def test_color_strip_ws(
indices = [(idx + offset) % total for idx in indices]
edges.append({"edge": seg.edge, "indices": indices})
meta["edges"] = edges
meta["border_width"] = cal.border_width
if is_composite and hasattr(source, "layers"):
# Send layer info for composite preview
enabled_layers = [l for l in source.layers if l.get("enabled", True)]
@@ -850,6 +851,7 @@ async def test_color_strip_ws(
_frame_live = stream.live_stream
_last_aux_time = 0.0
_AUX_INTERVAL = 0.08 # send JPEG preview / brightness updates ~12 FPS
_frame_dims_sent = False # send frame dimensions once with first JPEG
# Stream binary RGB frames at ~20 Hz
while True:
@@ -904,8 +906,16 @@ async def test_color_strip_ws(
# Ensure 3-channel RGB (some engines may produce BGRA)
if img.ndim == 3 and img.shape[2] == 4:
img = img[:, :, :3]
# Downscale for bandwidth
h, w = img.shape[:2]
# Send frame dimensions once so client can compute border overlay
if not _frame_dims_sent:
_frame_dims_sent = True
await websocket.send_text(_json.dumps({
"type": "frame_dims",
"width": w,
"height": h,
}))
# Downscale for bandwidth
scale = min(960 / w, 540 / h, 1.0)
if scale < 1.0:
new_w = max(1, int(w * scale))