web work (#279)

Co-authored-by: jominki354 <jomin354@gmail.com>

Author: jominki354

selfdrive/carrot/realtime/transports/raw_ws.py

@@ -21,11 +21,27 @@ def __init__(self, messaging: Any) -> None:
     self._tasks: dict[str, asyncio.Task] = {}
     self._sockets: dict[str, Any] = {}
     self._send_failures: dict[str, dict[web.WebSocketResponse, int]] = {}
+    self._last_send_time: dict[str, float] = {}
     self._lock = asyncio.Lock()
 
   def is_allowed_service(self, service: str) -> bool:
     return is_supported_raw_service(service)
 
+  # Phase 2-2: per-service throttle intervals (seconds)
+  # 0 = no throttle (send every message)
+  _THROTTLE_MAP = {
+    "modelV2": 0,             # camera-synced, don't throttle
+    "roadCameraState": 0,     # camera-synced
+    "liveCalibration": 0.25,  # slow-changing
+    "liveParameters": 0.25,
+    "liveTorqueParameters": 0.25,
+    "liveDelay": 0.25,
+  }
+  _THROTTLE_DEFAULT = 0.05  # 20Hz for everything else
+
+  def _throttle_interval(self, service: str) -> float:
+    return self._THROTTLE_MAP.get(service, self._THROTTLE_DEFAULT)
+
   def client_count(self, service: str | None = None) -> int:
     if service is None:
       return sum(len(clients) for clients in self._clients.values())
@@ -104,6 +120,15 @@ async def _service_loop(self, service: str) -> None:
           await asyncio.sleep(self.ACTIVE_POLL_SLEEP)
           continue
 
+        # Phase 2-2: per-service throttle — skip if too soon since last send
+        now = asyncio.get_running_loop().time()
+        interval = self._throttle_interval(service)
+        last_send = self._last_send_time.get(service, 0.0)
+        if interval > 0 and (now - last_send) < interval:
+          await asyncio.sleep(self.ACTIVE_POLL_SLEEP)
+          continue
+        self._last_send_time[service] = now
+
         stale: list[web.WebSocketResponse] = []
         client_list = list(clients)
         results = await asyncio.gather(

selfdrive/carrot/web/css/app.css

@@ -1623,6 +1623,19 @@ body[data-page="carrot"] #driveHudCard {
   display: none;
 }
 
+.vision-start-overlay {
+  position: absolute;
+  top: 0; left: 0; right: 0; bottom: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(0, 0, 0, 0.4);
+  backdrop-filter: blur(4px);
+  -webkit-backdrop-filter: blur(4px);
+  z-index: 50;
+  transition: opacity 0.3s ease;
+}
+
 body[data-page="carrot"] #driveHudCard.driveHudCard--inline {
   position: relative !important;
   inset: auto !important;
@@ -1675,6 +1688,12 @@ body[data-page="carrot"] .carrot-hud-dock {
   overflow: hidden;
 }
 
+@media (orientation: landscape) {
+  body[data-page="carrot"] .carrot-hud-dock {
+    display: none !important;
+  }
+}
+
 body[data-page="carrot"] #driveHudCard.driveHudCard--inline .hudWrap {
   margin-inline: auto;
 }
@@ -1687,6 +1706,7 @@ body[data-page="carrot"] #driveHudCard.driveHudCard--overlay {
   top: auto !important;
   width: auto;
   max-width: calc(100% - (var(--carrot-hud-left, 12px) * 2));
+  z-index: 60;
 }
 
 body[data-page="carrot"] #driveHudCard.driveHudCard--overlay .hudWrap {
@@ -1754,6 +1774,7 @@ body[data-page="carrot"] #driveHudCard.driveHudCard--overlay .hudWrap {
     linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0)),
     #04070c;
   box-shadow: 0 20px 48px rgba(0, 0, 0, 0.24);
+  contain: layout style;
 }
 
 .carrot-stage__video,
@@ -1818,6 +1839,7 @@ body[data-page="carrot"] #driveHudCard.driveHudCard--overlay .hudWrap {
   transform-origin: 0 0;
   will-change: transform;
   pointer-events: none;
+  contain: strict;
 }
 
 .carrot-stage__hud {

selfdrive/carrot/web/index.html

@@ -230,6 +230,12 @@ <h2 id="carrotTitle" class="page-title">Home</h2>
         <canvas id="carrotOverlayCanvas" class="carrot-stage__canvas"></canvas>
         <canvas id="carrotHudCanvas" class="carrot-stage__hud"></canvas>
 
+        <div id="visionStartOverlay" class="vision-start-overlay">
+          <button id="btnStartVision" class="btn btn--filled" type="button" style="font-size:1.2rem; padding: 16px 32px; border-radius: 99px;">
+            ▶ 주행 비전 시작
+          </button>
+        </div>
+
         <div class="carrot-stage__topbar">
           <div id="carrotStageStatus" class="carrot-stage__status">waiting stream...</div>
         </div>

selfdrive/carrot/web/js/app_core.js

@@ -825,11 +825,13 @@ function showPage(page, pushHistory = false, transition = null) {
     else if (typeof syncSettingViewportLayout === "function" && typeof isCompactLandscapeMode === "function" && isCompactLandscapeMode()) {
       syncSettingViewportLayout().catch(() => {});
     } else if (pushHistory || !CURRENT_GROUP) showSettingScreen("groups", false);
+    loadCurrentCar().catch(() => {});
   }
 
   if (page === "car") {
     showCarScreen("makers", false);
     if (!CARS) loadCars();
+    loadCurrentCar().catch(() => {});
   }
   if (page === "tools") {
     initToolsPage();

selfdrive/carrot/web/js/app_realtime.js

@@ -81,7 +81,7 @@ async function fetchLiveRuntimeState(force = false) {
 
 function getLiveRuntimePollMs() {
   const carrotVisible = document.body?.dataset?.page === "carrot" && !document.hidden;
-  return carrotVisible ? 350 : 1500;
+  return carrotVisible ? 1000 : 3000;
 }
 
 function scheduleLiveRuntimeStateFetch(ms = getLiveRuntimePollMs()) {
@@ -101,6 +101,7 @@ scheduleLiveRuntimeStateFetch(1500);
 let RTC_PC = null;
 let RTC_RETRY_T = null;
 let RTC_WAIT_TRACK_T = null;
+let RTC_FAIL_COUNT = 0;
 function rtcHasLiveTrack() {
   const video = document.getElementById("rtcVideo");
   return Boolean(video && video.srcObject);
@@ -133,10 +134,12 @@ async function rtcDisconnect() {
 
 function rtcScheduleRetry(ms = 2000) {
   rtcCancelRetry();
+  const backoff = Math.min(ms * Math.pow(1.5, RTC_FAIL_COUNT), 30000);
+  RTC_FAIL_COUNT = Math.min(RTC_FAIL_COUNT + 1, 20);
   RTC_RETRY_T = setTimeout(async () => {
     RTC_RETRY_T = null;
     await rtcConnectOnce().catch(() => {});
-  }, ms);
+  }, backoff);
 }
 
 function rtcArmTrackTimeout(ms = 5000) {
@@ -145,7 +148,7 @@ function rtcArmTrackTimeout(ms = 5000) {
     RTC_WAIT_TRACK_T = null;
     rtcStatusSet("no track, retry...");
     await rtcDisconnect();
-    rtcScheduleRetry(1000);
+    rtcScheduleRetry(2000);
   }, ms);
 }
 
@@ -171,9 +174,13 @@ async function waitIceComplete(pc, timeoutMs = 8000) {
   });
 }
 
+let _rtcConnecting = false;
+
 async function rtcConnectOnce() {
+  if (_rtcConnecting) return;
   if (RTC_PC && (RTC_PC.connectionState === "connected" || RTC_PC.connectionState === "connecting")) return;
 
+  _rtcConnecting = true;
   try {
     await rtcDisconnect();
     rtcStatusSet("connecting...");
@@ -207,12 +214,13 @@ async function rtcConnectOnce() {
       try { await videoEl.play(); } catch (e) { console.log("[RTC] play() failed", e); }
       rtcStatusSet("track: " + ev.track.kind);
       rtcDisarmTrackTimeout();
+      RTC_FAIL_COUNT = 0;
     };
 
     pc.onconnectionstatechange = () => {
       const state = pc.connectionState;
-      console.log("[RTC] connectionState:", state);
       rtcStatusSet("conn: " + state);
+      if (state === "connected") RTC_FAIL_COUNT = 0;
       if (state === "failed" || state === "disconnected" || state === "closed") {
         rtcDisconnect();
         rtcScheduleRetry(2000);
@@ -221,7 +229,6 @@ async function rtcConnectOnce() {
 
     pc.oniceconnectionstatechange = () => {
       const state = pc.iceConnectionState;
-      console.log("[RTC] iceConnectionState:", state);
       rtcStatusSet("ice: " + state);
       if (state === "failed" || state === "disconnected" || state === "closed") {
         rtcDisconnect();
@@ -261,15 +268,15 @@ async function rtcConnectOnce() {
     rtcStatusSet("error: " + e.message);
     await rtcDisconnect();
     rtcScheduleRetry(2000);
-    throw e;
+  } finally {
+    _rtcConnecting = false;
   }
 }
 
 async function waitServerReady(timeoutMs = 8000) {
   const t0 = Date.now();
   while (Date.now() - t0 < timeoutMs) {
     try {
-      // ���� ����ִ����� Ȯ�� (������ API)
       const r = await fetch("/api/settings", { cache: "no-store" });
       if (r.ok) return true;
     } catch {}
@@ -278,15 +285,30 @@ async function waitServerReady(timeoutMs = 8000) {
   return false;
 }
 
+window.CARROT_VISION_ACTIVE = false;
+
+window.CarrotVisionStart = async function() {
+  if (window.CARROT_VISION_ACTIVE) return;
+  window.CARROT_VISION_ACTIVE = true;
+  
+  const btn = document.getElementById("visionStartOverlay");
+  if (btn) btn.style.display = "none";
+  
+  rtcStatusSet("waiting server...");
+  await waitServerReady(8000);
+  await rtcConnectOnce().catch(() => {});
+};
+
 function rtcInitAuto() {
-  (async () => {
-    rtcStatusSet("waiting server...");
-    await waitServerReady(8000);   // �����ص� ��� ����
-    await rtcConnectOnce().catch(() => {});
-  })();
+  const btn = document.getElementById("btnStartVision");
+  if (btn) btn.onclick = window.CarrotVisionStart;
 
   document.addEventListener("visibilitychange", () => {
-    if (!document.hidden) rtcConnectOnce().catch(() => {});
+    if (!document.hidden && !_rtcConnecting && window.CARROT_VISION_ACTIVE) {
+      rtcCancelRetry();
+      RTC_FAIL_COUNT = 0;
+      rtcConnectOnce().catch(() => {});
+    }
   });
 }
 
@@ -539,6 +561,33 @@ function startAll() {
   rawOverlayConnectAll();
 }
 
+/* ── Phase 1: visibilitychange tab pause + WS release ── */
+let _visibilityPaused = false;
+
+function _onVisibilityChange() {
+  if (document.hidden) {
+    if (_visibilityPaused) return;
+    _visibilityPaused = true;
+    console.log("[perf] tab hidden → pausing");
+    _hudStopRenderLoop();
+    rawOverlayDisconnectAll();
+    if (LIVE_RUNTIME_FETCH_T) {
+      clearTimeout(LIVE_RUNTIME_FETCH_T);
+      LIVE_RUNTIME_FETCH_T = null;
+    }
+  } else {
+    if (!_visibilityPaused) return;
+    _visibilityPaused = false;
+    console.log("[perf] tab visible → resuming");
+    _hudStartRenderLoop();
+    _hudMarkDirty();
+    rawOverlayConnectAll();
+    scheduleLiveRuntimeStateFetch(100);
+  }
+}
+
+document.addEventListener("visibilitychange", _onVisibilityChange);
+
 
 
 if (document.readyState === "loading") {