Add settings tab controls and refine UI layout

reachy_phone_home/main.py

@@ -158,7 +158,7 @@ class TrackerConfig:
     phone_use_clear_sec: float = 0.5
     phone_not_seen_clear_sec: float = 1.0
     pad: float = 0.1
-    missing_neutral_sec: float = 0.5
+    missing_neutral_sec: float = 0.6
     neutral_duration: float = 1.2
     person_y_ratio: float = 0.3
     look_down_after_sec: float = 5.0
@@ -201,6 +201,7 @@ def run_tracker(
     logging.basicConfig(level=logging.INFO, format="%(asctime)s %(levelname)s %(message)s")
     logger = logging.getLogger("yolo26l_phone_use_tracker")
     logger.setLevel(logging.INFO)
+    WEB_UI.set_download_callback(lambda w: _resolve_weights(w, logger))
 
     weights = _resolve_weights(config.weights, logger)
     model = YOLO(weights)
@@ -267,7 +268,7 @@ def run_tracker(
             frame,
             verbose=False,
             classes=[PERSON_CLASS_ID, PHONE_CLASS_ID],
-            conf=config.conf,
+            conf=WEB_UI.get_conf(config.conf),
             imgsz=config.imgsz,
         )
         boxes = results[0].boxes if results else None
@@ -449,6 +450,9 @@ def run_tracker(
             ):
                 oscillate_start = time.time()
             last_heartbeat = time.time()
+            scheduler.good_job_heartbeats = WEB_UI.get_good_job_heartbeats(
+                config.good_job_heartbeats
+            )
             scheduler.on_heartbeat(
                 phone_tracked=(last_track_state == "tracking_phone"),
                 phone_use=last_phone_use_state,
@@ -626,99 +630,27 @@ def main() -> None:
     parser = argparse.ArgumentParser(description="Reachy phone use tracker (YOLO26l)")
     parser.add_argument("--weights", type=str, default="yolo26l")
     parser.add_argument("--conf", type=float, default=0.15)
-    parser.add_argument("--process-every", type=int, default=1)
-    parser.add_argument("--imgsz", type=int, default=640)
-    parser.add_argument("--head-duration", type=float, default=1.2)
-    parser.add_argument("--move-threshold-px", type=int, default=60)
-    parser.add_argument("--no-head", action="store_true")
-    parser.add_argument("--phone-use-confirm-sec", type=float, default=0.5)
-    parser.add_argument("--phone-use-clear-sec", type=float, default=0.5)
-    parser.add_argument("--phone-not-seen-clear-sec", type=float, default=1.0)
-    parser.add_argument("--pad", type=float, default=0.1)
-    parser.add_argument("--missing-neutral-sec", type=float, default=0.5)
-    parser.add_argument("--neutral-duration", type=float, default=1.2)
-    parser.add_argument("--person-y-ratio", type=float, default=0.3)
-    parser.add_argument("--look-down-after-sec", type=float, default=5.0)
-    parser.add_argument("--look-down-duration", type=float, default=1.2)
-    parser.add_argument("--look-down-z-mm", type=float, default=8.0)
-    parser.add_argument("--look-down-pitch-deg", type=float, default=30.0)
-    parser.add_argument("--look-down-window-sec", type=float, default=5.0)
-    parser.add_argument("--person-search-window-sec", type=float, default=5.0)
-    parser.add_argument("--no-antenna", action="store_true")
-    parser.add_argument("--antenna-angry-left", type=float, default=-2.6)
-    parser.add_argument("--antenna-angry-right", type=float, default=2.6)
-    parser.add_argument("--antenna-neutral-left", type=float, default=0.0)
-    parser.add_argument("--antenna-neutral-right", type=float, default=0.0)
-    parser.add_argument("--antenna-transition-sec", type=float, default=0.5)
-    parser.add_argument("--antenna-relax-sec", type=float, default=1.0)
-    parser.add_argument("--antenna-happy-amp", type=float, default=0.2)
-    parser.add_argument("--antenna-happy-duration", type=float, default=0.5)
     parser.add_argument("--good-job-heartbeats", type=int, default=3)
-    parser.add_argument("--phone-use-bad-sec", type=float, default=10.0)
-    parser.add_argument("--movement-restore-sec", type=float, default=0.6)
-    parser.add_argument("--phone-home-x-frac", type=float, default=0.0)
-    parser.add_argument("--phone-home-y-frac", type=float, default=0.5)
-    parser.add_argument("--phone-home-w-frac", type=float, default=1.0)
-    parser.add_argument("--phone-home-h-frac", type=float, default=0.5)
-    parser.add_argument("--phone-home-confirm-sec", type=float, default=0.5)
-    parser.add_argument("--phone-home-clear-sec", type=float, default=1.0)
-    parser.add_argument("--phone-home-pitch-deg", type=float, default=25.0)
     parser.add_argument("--display", action="store_true", help="Show the OpenCV window")
-    parser.add_argument("--no-display", action="store_true", help="Disable the OpenCV window")
-    parser.add_argument("--with-web-ui", action="store_true", help="Run the web UI server")
     parser.add_argument("--no-web-ui", action="store_true", help="Disable the web UI server")
     parser.set_defaults(no_display=True)
     args = parser.parse_args()
-    if args.display:
-        args.no_display = False
     display_env = os.getenv("REACHY_PHONE_HOME_DISPLAY", "")
-    if display_env.strip() in ("1", "true", "TRUE", "yes", "YES"):
-        args.no_display = False
+    display_enabled = args.display or display_env.strip() in ("1", "true", "TRUE", "yes", "YES")
+    no_display = not display_enabled
+
+    web_env = os.getenv("REACHY_PHONE_HOME_WEB_UI", "")
+    env_disable = web_env.strip() in ("0", "false", "FALSE", "no", "NO")
+    web_ui_enabled = not args.no_web_ui and not env_disable
 
     config = TrackerConfig(
         weights=args.weights,
         conf=args.conf,
-        process_every=args.process_every,
-        imgsz=args.imgsz,
-        head_duration=args.head_duration,
-        move_threshold_px=args.move_threshold_px,
-        no_head=args.no_head,
-        phone_use_confirm_sec=args.phone_use_confirm_sec,
-        phone_use_clear_sec=args.phone_use_clear_sec,
-        phone_not_seen_clear_sec=args.phone_not_seen_clear_sec,
-        pad=args.pad,
-        missing_neutral_sec=args.missing_neutral_sec,
-        neutral_duration=args.neutral_duration,
-        person_y_ratio=args.person_y_ratio,
-        look_down_after_sec=args.look_down_after_sec,
-        look_down_duration=args.look_down_duration,
-        look_down_z_mm=args.look_down_z_mm,
-        look_down_pitch_deg=args.look_down_pitch_deg,
-        look_down_window_sec=args.look_down_window_sec,
-        person_search_window_sec=args.person_search_window_sec,
-        no_antenna=args.no_antenna,
-        antenna_angry_left=args.antenna_angry_left,
-        antenna_angry_right=args.antenna_angry_right,
-        antenna_neutral_left=args.antenna_neutral_left,
-        antenna_neutral_right=args.antenna_neutral_right,
-        antenna_transition_sec=args.antenna_transition_sec,
-        antenna_relax_sec=args.antenna_relax_sec,
-        antenna_happy_amp=args.antenna_happy_amp,
-        antenna_happy_duration=args.antenna_happy_duration,
         good_job_heartbeats=args.good_job_heartbeats,
-        phone_use_bad_sec=args.phone_use_bad_sec,
-        movement_restore_sec=args.movement_restore_sec,
-        phone_home_x_frac=args.phone_home_x_frac,
-        phone_home_y_frac=args.phone_home_y_frac,
-        phone_home_w_frac=args.phone_home_w_frac,
-        phone_home_h_frac=args.phone_home_h_frac,
-        phone_home_confirm_sec=args.phone_home_confirm_sec,
-        phone_home_clear_sec=args.phone_home_clear_sec,
-        phone_home_pitch_deg=args.phone_home_pitch_deg,
-        no_display=args.no_display,
+        no_display=no_display,
     )
 
-    if not args.no_web_ui:
+    if web_ui_enabled:
         ReachyPhoneHome(config=config).wrapped_run()
         return
 

reachy_phone_home/static/index.html

@@ -8,7 +8,7 @@
       :root {
         color-scheme: dark;
         --video-max-width: 720px;
-        --video-aspect: 16 / 9;
+        --video-aspect: 4 / 3;
       }
       body {
         margin: 0;
@@ -137,6 +137,86 @@
         max-width: 960px;
         width: min(960px, 100%);
       }
+      .tabs {
+        display: flex;
+        gap: 8px;
+        margin: 16px 20px 0;
+      }
+      .tab-btn {
+        background: #1b2230;
+        color: #e9e6e0;
+        border: 1px solid #2b3447;
+        padding: 6px 12px;
+        border-radius: 999px;
+        cursor: pointer;
+        font-size: 12px;
+      }
+      .tab-btn.active {
+        background: #2a3448;
+      }
+      .panel {
+        width: 100%;
+        max-width: 960px;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+      }
+      .settings-card {
+        border: 1px solid #232836;
+        background: #0b0e13;
+        border-radius: 12px;
+        padding: 16px;
+        flex: 0 0 420px;
+        max-width: 420px;
+      }
+      .settings-row {
+        display: flex;
+        align-items: flex-start;
+        justify-content: space-between;
+        gap: 12px;
+        margin-bottom: 12px;
+        flex-wrap: wrap;
+      }
+      .settings-row label {
+        font-size: 12px;
+        color: #c9d1d9;
+        flex: 1 1 140px;
+      }
+      .settings-row input,
+      .settings-row select {
+        background: #10141c;
+        border: 1px solid #2b3447;
+        color: #e9e6e0;
+        padding: 6px 8px;
+        border-radius: 8px;
+        max-width: 100%;
+        box-sizing: border-box;
+        flex: 1 1 160px;
+      }
+      .settings-actions {
+        display: flex;
+        gap: 10px;
+        flex-wrap: wrap;
+        align-items: center;
+      }
+      .settings-actions select {
+        flex: 1 1 160px;
+        min-width: 0;
+      }
+      .settings-grid {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 12px;
+        margin: 16px auto 40px;
+        width: min(960px, 100%);
+        box-sizing: border-box;
+        justify-content: center;
+      }
+      .settings-card h4 {
+        margin: 0 0 10px 0;
+        font-size: 13px;
+        color: #e9e6e0;
+      }
       .card {
         border: 1px solid #232836;
         background: #0b0e13;
@@ -233,6 +313,11 @@
       <div class="status" id="status">Connecting...</div>
     </header>
     <div class="container">
+    <div class="tabs">
+      <button class="tab-btn active" id="tabStatus">Status</button>
+      <button class="tab-btn" id="tabSettings">Settings</button>
+    </div>
+    <div class="panel" id="panelStatus">
     <div class="cards">
       <div class="card" id="cardPhoneHome">
         <div class="card-header">
@@ -263,7 +348,7 @@
         <div class="sub" id="subReachy">Waiting for signals</div>
       </div>
     </div>
-      <div id="video">
+    <div id="video">
       <div class="video-frame">
         <div id="videoPlaceholder" class="video-placeholder">Debug video disabled</div>
         <img id="videoStream" data-src="/stream.mjpg" alt="Reachy camera stream" />
@@ -274,12 +359,64 @@
       </div>
     </div>
     </div>
+    <div class="panel" id="panelSettings" style="display: none;">
+      <div class="settings-grid">
+        <div class="settings-card">
+          <h4>Weights</h4>
+          <div class="settings-row">
+            <label for="weightsSelect">Download weights</label>
+          </div>
+          <div class="settings-actions">
+            <select id="weightsSelect">
+              <option value="yolo26l">yolo26l</option>
+              <option value="yolo26m">yolo26m</option>
+              <option value="yolo26s">yolo26s</option>
+              <option value="yolo26n">yolo26n</option>
+            </select>
+            <button id="downloadWeightsBtn" class="tab-btn" type="button">Download</button>
+          </div>
+        </div>
+        <div class="settings-card">
+          <h4>Detection</h4>
+          <div class="settings-row">
+            <label for="confInput">Confidence</label>
+            <input id="confInput" type="number" min="0.05" max="0.9" step="0.01" value="0.15" />
+          </div>
+          <div class="settings-row">
+            <label for="goodJobSelect">Celebration delay</label>
+            <select id="goodJobSelect">
+              <option value="10">10s</option>
+              <option value="30" selected>30s</option>
+              <option value="60">1 min</option>
+              <option value="120">2 min</option>
+              <option value="300">5 min</option>
+              <option value="600">10 min</option>
+            </select>
+          </div>
+          <div class="settings-actions">
+            <button id="saveSettingsBtn" class="tab-btn" type="button">Save</button>
+            <span class="muted" id="settingsStatus"></span>
+          </div>
+        </div>
+      </div>
+    </div>
+    </div>
     <script>
       let lastId = 0;
       const statusEl = document.getElementById("status");
       const debugBtn = document.getElementById("debugBtn");
       const videoStream = document.getElementById("videoStream");
       const videoPlaceholder = document.getElementById("videoPlaceholder");
+      const tabStatus = document.getElementById("tabStatus");
+      const tabSettings = document.getElementById("tabSettings");
+      const panelStatus = document.getElementById("panelStatus");
+      const panelSettings = document.getElementById("panelSettings");
+      const weightsSelect = document.getElementById("weightsSelect");
+      const downloadWeightsBtn = document.getElementById("downloadWeightsBtn");
+      const confInput = document.getElementById("confInput");
+      const goodJobSelect = document.getElementById("goodJobSelect");
+      const saveSettingsBtn = document.getElementById("saveSettingsBtn");
+      const settingsStatus = document.getElementById("settingsStatus");
       let videoEnabled = false;
       let currentState = null;
       let phoneDetected = null;
@@ -296,6 +433,31 @@
       const statusReachy = document.getElementById("statusReachy");
       const subReachy = document.getElementById("subReachy");
       const statusPhoneHome = document.getElementById("statusPhoneHome");
+      let aspectTimer = null;
+      let snapshotTimer = null;
+
+      function updateAspectFromStream() {
+        if (videoStream.naturalWidth && videoStream.naturalHeight) {
+          document.documentElement.style.setProperty(
+            "--video-aspect",
+            `${videoStream.naturalWidth} / ${videoStream.naturalHeight}`
+          );
+        }
+      }
+
+      function updateAspectFromSnapshot() {
+        const img = new Image();
+        img.onload = () => {
+          if (img.naturalWidth && img.naturalHeight) {
+            document.documentElement.style.setProperty(
+              "--video-aspect",
+              `${img.naturalWidth} / ${img.naturalHeight}`
+            );
+          }
+        };
+        img.src = `/snapshot.jpg?t=${Date.now()}`;
+      }
+
       function setVideoEnabled(enabled) {
         videoEnabled = enabled;
         if (videoEnabled) {
@@ -306,6 +468,16 @@
               videoStream.src = `${base}?t=${Date.now()}`;
               videoStream.style.display = "block";
               videoPlaceholder.style.display = "none";
+              updateAspectFromStream();
+              if (aspectTimer) {
+                clearInterval(aspectTimer);
+              }
+              aspectTimer = setInterval(updateAspectFromStream, 500);
+              updateAspectFromSnapshot();
+              if (snapshotTimer) {
+                clearInterval(snapshotTimer);
+              }
+              snapshotTimer = setInterval(updateAspectFromSnapshot, 2000);
             })
             .catch(() => {});
         } else {
@@ -314,6 +486,14 @@
           videoPlaceholder.style.display = "flex";
           debugBtn.textContent = "Enable debug video";
           fetch("/debug?enabled=0").catch(() => {});
+          if (aspectTimer) {
+            clearInterval(aspectTimer);
+            aspectTimer = null;
+          }
+          if (snapshotTimer) {
+            clearInterval(snapshotTimer);
+            snapshotTimer = null;
+          }
         }
       }
 
@@ -323,12 +503,69 @@
 
       setVideoEnabled(false);
 
-      videoStream.addEventListener("load", () => {
-        if (videoStream.naturalWidth && videoStream.naturalHeight) {
-          document.documentElement.style.setProperty(
-            "--video-aspect",
-            `${videoStream.naturalWidth} / ${videoStream.naturalHeight}`
-          );
+      videoStream.addEventListener("load", updateAspectFromStream);
+
+      function setTab(name) {
+        if (name === "settings") {
+          panelStatus.style.display = "none";
+          panelSettings.style.display = "flex";
+          tabStatus.classList.remove("active");
+          tabSettings.classList.add("active");
+        } else {
+          panelStatus.style.display = "block";
+          panelSettings.style.display = "none";
+          tabStatus.classList.add("active");
+          tabSettings.classList.remove("active");
+        }
+      }
+
+      tabStatus.addEventListener("click", () => setTab("status"));
+      tabSettings.addEventListener("click", () => setTab("settings"));
+
+      async function loadSettings() {
+        try {
+          const res = await fetch("/settings");
+          const data = await res.json();
+          if (data.conf !== null && data.conf !== undefined) {
+            confInput.value = data.conf;
+          }
+          if (data.good_job_heartbeats !== null && data.good_job_heartbeats !== undefined) {
+            const seconds = data.good_job_heartbeats * 10;
+            goodJobSelect.value = String(seconds);
+          }
+        } catch (err) {
+          settingsStatus.textContent = "Failed to load settings";
+        }
+      }
+
+      saveSettingsBtn.addEventListener("click", async () => {
+        settingsStatus.textContent = "Saving...";
+        const confVal = parseFloat(confInput.value);
+        const seconds = parseInt(goodJobSelect.value, 10);
+        const beats = Math.max(1, Math.round(seconds / 10));
+        try {
+          await fetch("/settings", {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({ conf: confVal, good_job_heartbeats: beats }),
+          });
+          settingsStatus.textContent = "Saved";
+        } catch (err) {
+          settingsStatus.textContent = "Save failed";
+        }
+      });
+
+      downloadWeightsBtn.addEventListener("click", async () => {
+        settingsStatus.textContent = "Downloading...";
+        try {
+          await fetch("/download_weights", {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({ weights: weightsSelect.value }),
+          });
+          settingsStatus.textContent = "Download queued";
+        } catch (err) {
+          settingsStatus.textContent = "Download failed";
         }
       });
 
@@ -439,6 +676,7 @@
       }
 
       poll();
+      loadSettings();
     </script>
   </body>
 </html>

reachy_phone_home/web_ui.py

@@ -2,14 +2,15 @@ from __future__ import annotations
 
 import threading
 import time
-from typing import Any, Iterable
+from typing import Any, Callable, Iterable, Optional
 
 import cv2
 
 try:
-    from fastapi import Response
+    from fastapi import Request, Response
     from starlette.responses import JSONResponse, StreamingResponse
 except Exception:  # pragma: no cover - optional for script usage
+    Request = None
     Response = None
     JSONResponse = None
     StreamingResponse = None
@@ -25,6 +26,9 @@ class WebUIState:
         self._latest_frame = None
         self._video_enabled = False
         self._max_log_lines = 300
+        self._conf_override: Optional[float] = None
+        self._good_job_heartbeats: Optional[int] = None
+        self._download_callback: Optional[Callable[[str], None]] = None
 
     def append_log(self, line: str) -> None:
         with self._log_lock:
@@ -54,6 +58,34 @@ class WebUIState:
         with self._frame_lock:
             self._latest_frame = frame.copy()
 
+    def set_conf_override(self, conf: Optional[float]) -> None:
+        self._conf_override = conf
+
+    def get_conf(self, default: float) -> float:
+        if self._conf_override is None:
+            return default
+        return float(self._conf_override)
+
+    def set_good_job_heartbeats(self, beats: Optional[int]) -> None:
+        if beats is None:
+            self._good_job_heartbeats = None
+        else:
+            self._good_job_heartbeats = max(1, int(beats))
+
+    def get_good_job_heartbeats(self, default: int) -> int:
+        if self._good_job_heartbeats is None:
+            return int(default)
+        return int(self._good_job_heartbeats)
+
+    def set_download_callback(self, callback: Callable[[str], None]) -> None:
+        self._download_callback = callback
+
+    def download_weights(self, weights: str) -> bool:
+        if self._download_callback is None:
+            return False
+        self._download_callback(weights)
+        return True
+
     def _placeholder(self, text: str) -> bytes:
         import numpy as np
 
@@ -126,5 +158,47 @@ class WebUIState:
         async def snapshot() -> Response:
             return Response(content=self.snapshot_jpg(), media_type="image/jpeg")
 
+        @app.get("/settings")
+        async def settings() -> JSONResponse:
+            return JSONResponse(
+                {
+                    "conf": self._conf_override,
+                    "good_job_heartbeats": self._good_job_heartbeats,
+                }
+            )
+
+        @app.post("/settings")
+        async def update_settings(request: Request) -> JSONResponse:
+            data = {}
+            if request is not None:
+                try:
+                    data = await request.json()
+                except Exception:
+                    data = {}
+            conf = data.get("conf")
+            beats = data.get("good_job_heartbeats")
+            self.set_conf_override(conf if conf is None else float(conf))
+            self.set_good_job_heartbeats(beats if beats is None else int(beats))
+            return JSONResponse(
+                {
+                    "conf": self._conf_override,
+                    "good_job_heartbeats": self._good_job_heartbeats,
+                }
+            )
+
+        @app.post("/download_weights")
+        async def download_weights(request: Request) -> JSONResponse:
+            data = {}
+            if request is not None:
+                try:
+                    data = await request.json()
+                except Exception:
+                    data = {}
+            weights = str(data.get("weights", "")).strip()
+            ok = False
+            if weights:
+                ok = self.download_weights(weights)
+            return JSONResponse({"ok": ok, "weights": weights})
+
 
 WEB_UI = WebUIState()

web_log_ui.html

@@ -137,6 +137,86 @@
         max-width: 960px;
         width: min(960px, 100%);
       }
+      .tabs {
+        display: flex;
+        gap: 8px;
+        margin: 16px 20px 0;
+      }
+      .tab-btn {
+        background: #1b2230;
+        color: #e9e6e0;
+        border: 1px solid #2b3447;
+        padding: 6px 12px;
+        border-radius: 999px;
+        cursor: pointer;
+        font-size: 12px;
+      }
+      .tab-btn.active {
+        background: #2a3448;
+      }
+      .panel {
+        width: 100%;
+        max-width: 960px;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+      }
+      .settings-card {
+        border: 1px solid #232836;
+        background: #0b0e13;
+        border-radius: 12px;
+        padding: 16px;
+        flex: 0 0 420px;
+        max-width: 420px;
+      }
+      .settings-row {
+        display: flex;
+        align-items: flex-start;
+        justify-content: space-between;
+        gap: 12px;
+        margin-bottom: 12px;
+        flex-wrap: wrap;
+      }
+      .settings-row label {
+        font-size: 12px;
+        color: #c9d1d9;
+        flex: 1 1 140px;
+      }
+      .settings-row input,
+      .settings-row select {
+        background: #10141c;
+        border: 1px solid #2b3447;
+        color: #e9e6e0;
+        padding: 6px 8px;
+        border-radius: 8px;
+        max-width: 100%;
+        box-sizing: border-box;
+        flex: 1 1 160px;
+      }
+      .settings-actions {
+        display: flex;
+        gap: 10px;
+        flex-wrap: wrap;
+        align-items: center;
+      }
+      .settings-actions select {
+        flex: 1 1 160px;
+        min-width: 0;
+      }
+      .settings-grid {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 12px;
+        margin: 16px auto 40px;
+        width: min(960px, 100%);
+        box-sizing: border-box;
+        justify-content: center;
+      }
+      .settings-card h4 {
+        margin: 0 0 10px 0;
+        font-size: 13px;
+        color: #e9e6e0;
+      }
       .card {
         border: 1px solid #232836;
         background: #0b0e13;
@@ -233,6 +313,11 @@
       <div class="status" id="status">Connecting...</div>
     </header>
     <div class="container">
+    <div class="tabs">
+      <button class="tab-btn active" id="tabStatus">Status</button>
+      <button class="tab-btn" id="tabSettings">Settings</button>
+    </div>
+    <div class="panel" id="panelStatus">
     <div class="cards">
       <div class="card" id="cardPhoneHome">
         <div class="card-header">
@@ -263,7 +348,7 @@
         <div class="sub" id="subReachy">Waiting for signals</div>
       </div>
     </div>
-      <div id="video">
+    <div id="video">
       <div class="video-frame">
         <div id="videoPlaceholder" class="video-placeholder">Debug video disabled</div>
         <img id="videoStream" data-src="/stream.mjpg" alt="Reachy camera stream" />
@@ -274,12 +359,64 @@
       </div>
     </div>
     </div>
+    <div class="panel" id="panelSettings" style="display: none;">
+      <div class="settings-grid">
+        <div class="settings-card">
+          <h4>Weights</h4>
+          <div class="settings-row">
+            <label for="weightsSelect">Download weights</label>
+          </div>
+          <div class="settings-actions">
+            <select id="weightsSelect">
+              <option value="yolo26l">yolo26l</option>
+              <option value="yolo26m">yolo26m</option>
+              <option value="yolo26s">yolo26s</option>
+              <option value="yolo26n">yolo26n</option>
+            </select>
+            <button id="downloadWeightsBtn" class="tab-btn" type="button">Download</button>
+          </div>
+        </div>
+        <div class="settings-card">
+          <h4>Detection</h4>
+          <div class="settings-row">
+            <label for="confInput">Confidence</label>
+            <input id="confInput" type="number" min="0.05" max="0.9" step="0.01" value="0.15" />
+          </div>
+          <div class="settings-row">
+            <label for="goodJobSelect">Celebration delay</label>
+            <select id="goodJobSelect">
+              <option value="10">10s</option>
+              <option value="30" selected>30s</option>
+              <option value="60">1 min</option>
+              <option value="120">2 min</option>
+              <option value="300">5 min</option>
+              <option value="600">10 min</option>
+            </select>
+          </div>
+          <div class="settings-actions">
+            <button id="saveSettingsBtn" class="tab-btn" type="button">Save</button>
+            <span class="muted" id="settingsStatus"></span>
+          </div>
+        </div>
+      </div>
+    </div>
+    </div>
     <script>
       let lastId = 0;
       const statusEl = document.getElementById("status");
       const debugBtn = document.getElementById("debugBtn");
       const videoStream = document.getElementById("videoStream");
       const videoPlaceholder = document.getElementById("videoPlaceholder");
+      const tabStatus = document.getElementById("tabStatus");
+      const tabSettings = document.getElementById("tabSettings");
+      const panelStatus = document.getElementById("panelStatus");
+      const panelSettings = document.getElementById("panelSettings");
+      const weightsSelect = document.getElementById("weightsSelect");
+      const downloadWeightsBtn = document.getElementById("downloadWeightsBtn");
+      const confInput = document.getElementById("confInput");
+      const goodJobSelect = document.getElementById("goodJobSelect");
+      const saveSettingsBtn = document.getElementById("saveSettingsBtn");
+      const settingsStatus = document.getElementById("settingsStatus");
       let videoEnabled = false;
       let currentState = null;
       let phoneDetected = null;
@@ -368,6 +505,70 @@
 
       videoStream.addEventListener("load", updateAspectFromStream);
 
+      function setTab(name) {
+        if (name === "settings") {
+          panelStatus.style.display = "none";
+          panelSettings.style.display = "flex";
+          tabStatus.classList.remove("active");
+          tabSettings.classList.add("active");
+        } else {
+          panelStatus.style.display = "block";
+          panelSettings.style.display = "none";
+          tabStatus.classList.add("active");
+          tabSettings.classList.remove("active");
+        }
+      }
+
+      tabStatus.addEventListener("click", () => setTab("status"));
+      tabSettings.addEventListener("click", () => setTab("settings"));
+
+      async function loadSettings() {
+        try {
+          const res = await fetch("/settings");
+          const data = await res.json();
+          if (data.conf !== null && data.conf !== undefined) {
+            confInput.value = data.conf;
+          }
+          if (data.good_job_heartbeats !== null && data.good_job_heartbeats !== undefined) {
+            const seconds = data.good_job_heartbeats * 10;
+            goodJobSelect.value = String(seconds);
+          }
+        } catch (err) {
+          settingsStatus.textContent = "Failed to load settings";
+        }
+      }
+
+      saveSettingsBtn.addEventListener("click", async () => {
+        settingsStatus.textContent = "Saving...";
+        const confVal = parseFloat(confInput.value);
+        const seconds = parseInt(goodJobSelect.value, 10);
+        const beats = Math.max(1, Math.round(seconds / 10));
+        try {
+          await fetch("/settings", {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({ conf: confVal, good_job_heartbeats: beats }),
+          });
+          settingsStatus.textContent = "Saved";
+        } catch (err) {
+          settingsStatus.textContent = "Save failed";
+        }
+      });
+
+      downloadWeightsBtn.addEventListener("click", async () => {
+        settingsStatus.textContent = "Downloading...";
+        try {
+          await fetch("/download_weights", {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({ weights: weightsSelect.value }),
+          });
+          settingsStatus.textContent = "Download queued";
+        } catch (err) {
+          settingsStatus.textContent = "Download failed";
+        }
+      });
+
       function setCard(card, statusEl, active, text, alert = false) {
         card.classList.toggle("active", active);
         card.classList.toggle("alert", alert);
@@ -475,6 +676,7 @@
       }
 
       poll();
+      loadSettings();
     </script>
   </body>
 </html>