Spaces:

Domotick
/

reachy_mirror

Running

App Files Files Community

Domotick commited on 18 days ago

Commit

9ad2616

0 Parent(s):

Initial commit: Reachy Mirror app

Browse files

Files changed (12) hide show

.gitattributes +1 -0
.gitignore +6 -0
README.md +15 -0
index.html +42 -0
pyproject.toml +30 -0
reachy_mirror.gif +3 -0
reachy_mirror/__init__.py +0 -0
reachy_mirror/main.py +306 -0
reachy_mirror/static/index.html +100 -0
reachy_mirror/static/main.js +266 -0
reachy_mirror/static/style.css +367 -0
style.css +391 -0

.gitattributes ADDED Viewed

	@@ -0,0 +1 @@


1	+ *.gif filter=lfs diff=lfs merge=lfs -text

.gitignore ADDED Viewed

	@@ -0,0 +1,6 @@

+.DS_Store
+__pycache__/
+*.egg-info/
+build/
+*.lock
+._*

README.md ADDED Viewed

	@@ -0,0 +1,15 @@

+---
+title: Reachy Mirror
+emoji: 🪞
+colorFrom: red
+colorTo: blue
+sdk: static
+pinned: false
+short_description: Mimic your moves
+tags:
+ - reachy_mini
+ - reachy_mirror
+ - communication
+ - emotion
+ - reachy_mini_python_app
+---

index.html ADDED Viewed

	@@ -0,0 +1,42 @@

+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Reachy Mirror</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🪞</text></svg>" />
+    <link rel="stylesheet" href="style.css" />
+  </head>
+  <body>
+    <header class="hero">
+      <div class="topline">
+        <div class="brand">
+          <span class="logo">🪞</span>
+          <span class="brand-name">Reachy Mirror</span>
+        </div>
+        <div class="pill">Realtime · Fluid · Expressive · Customizable</div>
+      </div>
+      <div class="hero-grid">
+        <div class="hero-copy">
+          <p class="eyebrow">Communication App</p>
+          <h1>Mimic your moves</h1>
+          <p class="lede">Use your laptop's camera to reproduce your moves on Reachy Mini!</p>
+          <p class="lede">Head and hands detected (using <a href="https://github.com/google-ai-edge/mediapipe" target="_blank">MediaPipe</a>)</p>
+          <p class="lede">Adjustable frame rate and motion, mirror mode, and automatic reconnection are available through a lovely web interface.</p>
+          </p>
+        </div>
+        <div class="hero-visual">
+          <div class="glass-card">
+            <img src="reachy_mirror.gif" alt="Reachy Mini dancing" class="hero-gif">
+            <p class="caption">Reachy Mini reproduce head and hand moves</p>
+          </div>
+        </div>
+      </div>
+    </header>
+    <div class="footer">
+      Made with ❤︎ by <a href="https://github.com/domotick" target="_blank">@domotick</a>
+    </div>
+  </body>
+</html>

pyproject.toml ADDED Viewed

	@@ -0,0 +1,30 @@

+[build-system]
+requires = ["setuptools>=61.0"]
+build-backend = "setuptools.build_meta"
+[project]
+name = "reachy_mirror"
+version = "0.1.0"
+description = "Add your description here"
+readme = "README.md"
+requires-python = ">=3.10"
+dependencies = [
+    "reachy-mini>=1.2.5",
+    "opencv-python>=4.12.0",
+    "numpy>=1.24.0",
+    "mediapipe==0.10.14"
+]
+keywords = ["reachy-mini-app","reachy-mirror","mirror"]
+[project.entry-points."reachy_mini_apps"]
+reachy_mirror = "reachy_mirror.main:ReachyMirror"
+[tool.setuptools]
+package-dir = { "" = "." }
+include-package-data = true
+[tool.setuptools.packages.find]
+where = ["."]
+[tool.setuptools.package-data]
+reachy_mirror = ["**/*"] # Also include all non-.py files

reachy_mirror.gif ADDED Viewed

Git LFS Details

SHA256: c69ea95997383b5fb21ce34a3066b0a4c25fb041bdd47db6f746cc133a0e6404
Pointer size: 132 Bytes
Size of remote file: 4.79 MB

reachy_mirror/__init__.py ADDED Viewed

File without changes

reachy_mirror/main.py ADDED Viewed

	@@ -0,0 +1,306 @@

+import threading
+import time
+import math
+from typing import Optional
+import cv2
+import base64
+import numpy as np
+import mediapipe as mp
+import math
+from pydantic import BaseModel
+from reachy_mini.utils import create_head_pose
+from reachy_mini import ReachyMini, ReachyMiniApp
+from reachy_mini.motion.recorded_move import RecordedMoves
+from fastapi.responses import StreamingResponse
+mpFaceMesh = mp.solutions.face_mesh
+faceMesh = mpFaceMesh.FaceMesh(static_image_mode=True, max_num_faces=1, min_detection_confidence=0.5, min_tracking_confidence=0.5)
+mpHands = mp.solutions.hands
+hands = mpHands.Hands()
+mpDraw = mp.solutions.drawing_utils
+mpDrawingStyles = mp.solutions.drawing_styles
+VERTICAL_PITCH_CORRECTION=-5
+class ReachyMirror(ReachyMiniApp):
+  custom_app_url: str | None = "http://0.0.0.0:7860"
+  request_media_backend: str | None = None
+  def __init__(self):
+    super().__init__()
+    self.appReady: bool = False
+    self.isProcessing = False
+    self.width: int = 640
+    self.height: int = 480
+    self.lastFrame: Optional[np.ndarray] = None
+    self.headAngles = [0,0,0]
+    self.antennaAngles = [0,0]
+    self.frameRateDown = 30
+    self.motionReduction = 60
+    self.showProcessing = True
+    self.isMirror = True
+    self.frameCount = 0
+    self.frameCountTotal = 0
+    self.downValue = 0
+    self.downValueAvg = 0
+    self._setupEndpoints()
+  def _setupEndpoints(self):
+    """Set up FastAPI endpoints for the web UI"""
+    @self.settings_app.get("/ready")
+    async def ready():
+      return {"ready": self.appReady}
+    @self.settings_app.get("/webcam_feed")
+    def webcam_feed():
+      return StreamingResponse(
+        self._frameGenerator(),
+        media_type="multipart/x-mixed-replace; boundary=frame"
+      )
+    class UIState(BaseModel):
+      frameRateDown: int | None = None
+      motionReduction: int | None = None
+      showProcessing: bool | None = None
+      isMirror: bool | None = None
+    @self.settings_app.post("/settings")
+    async def update_settings(state: UIState):
+      if state.motionReduction is not None:
+        self.motionReduction = state.motionReduction
+      if state.frameRateDown is not None:
+        self.frameRateDown = state.frameRateDown
+      if state.showProcessing is not None:
+        self.showProcessing = state.showProcessing
+      if state.isMirror is not None:
+        self.isMirror = state.isMirror
+    class FrameData(BaseModel):
+      image: str | None = None
+    @self.settings_app.post("/process_frame")
+    def process_frame(data: FrameData):
+      if self.isProcessing is False:
+        self.isProcessing = True
+        try:
+          # Remove data:image/jpeg;base64, prefix
+          image_data = data.image.split(',')[1]
+          image_bytes = base64.b64decode(image_data)
+          # Convert to numpy array
+          nparr = np.frombuffer(image_bytes, np.uint8)
+          frame = cv2.imdecode(nparr, cv2.IMREAD_COLOR)
+          if frame is None:
+            self.isProcessing = False
+            return {'error': 'Could not decode frame'}
+          # Process frame and get image with landmarks
+          image = self._drawLandmarksToFrame(frame)
+          if image is not None and self.showProcessing is True:
+            ret, buffer = cv2.imencode('.jpg', image)
+            if ret is None:
+              return {'error': 'Could not convert frame'}
+            processed_frame = base64.b64encode(buffer).decode('utf-8')
+            self.isProcessing = False
+            return {
+              'image': f'data:image/jpeg;base64,{processed_frame}',
+              'head': [int(self.headAngles[0]), int(self.headAngles[1]), int(self.headAngles[2])],
+              'hands': [int(180*self.antennaAngles[0]/math.pi), int(180*self.antennaAngles[1]/math.pi)],
+              'downValue': self.downValue,
+              'downValueAvg': self.downValueAvg
+            }
+          self.isProcessing = False
+          return {}
+        except Exception as e:
+          self.isProcessing = False
+          return {'error': str(e)}
+      return {}
+  def _frameGenerator(self):
+    """Generate MJPEG frames for streaming"""
+    while True:
+      if self.lastFrame is None:
+        time.sleep(0.05)
+        continue
+      ret, jpeg = cv2.imencode(".jpg", self.lastFrame)
+      if ret:
+        yield (
+          b"--frame\r\n"
+          b"Content-Type: image/jpeg\r\n\r\n" + jpeg.tobytes() + b"\r\n"
+        )
+      time.sleep(0.05)
+  # inspired by https://github.com/shenasa-ai/head-pose-estimation/blob/main/estimator.py
+  def _rotationMatrixToAngles(self, rotationMatrix):
+    """
+    Calculate Euler angles from rotation matrix.
+    :param rotationMatrix: A 3*3 matrix with the following structure
+    [Cosz*Cosy  Cosz*Siny*Sinx - Sinz*Cosx  Cosz*Siny*Cosx + Sinz*Sinx]
+    [Sinz*Cosy  Sinz*Siny*Sinx + Sinz*Cosx  Sinz*Siny*Cosx - Cosz*Sinx]
+    [  -Siny             CosySinx                   Cosy*Cosx         ]
+    :return: Image with landmarks for head and hands
+    """
+    x = math.atan2(rotationMatrix[2, 1], rotationMatrix[2, 2])
+    y = math.atan2(-rotationMatrix[2, 0], math.sqrt(rotationMatrix[0, 0] ** 2 + rotationMatrix[1, 0] ** 2))
+    z = math.atan2(rotationMatrix[1, 0], rotationMatrix[0, 0])
+    return np.array([x, y, z]) * 180. / math.pi
+  def _drawLandmarksToFrame(self, image):
+    if image is None:
+      return None
+    if self.isMirror:
+      image = cv2.flip(image, 1)
+    h, w, _ = image.shape
+    faceCoordinationInImage = []
+    imgRGB = cv2.cvtColor(image, cv2.COLOR_BGR2RGB)
+    resultsHand = hands.process(imgRGB)
+    handsAngle = []
+    handsType=[]
+    if resultsHand.multi_hand_landmarks:
+      for hand in resultsHand.multi_handedness:
+        handType=hand.classification[0].label
+        handsType.append(handType)
+      for handLms in resultsHand.multi_hand_landmarks:
+        mpDraw.draw_landmarks(image, handLms, mpHands.HAND_CONNECTIONS, None)
+        base = None
+        tip = None
+        for id, lm in enumerate(handLms.landmark):
+          h, w, c = image.shape
+          cx, cy = int(lm.x * w), int(lm.y * h)
+          if id == 0:
+            base = [cx, cy]
+            cv2.circle(image, (cx, cy), 8, (255, 196, 69), cv2.FILLED)
+          elif id == 8:
+            cv2.circle(image, (cx, cy), 8, (255, 196, 69), cv2.FILLED)
+            tip = [cx, cy]
+          else:
+            cv2.circle(image, (cx, cy), 4, (255, 196, 69), cv2.FILLED)
+        handsAngle.append(math.atan2(tip[0]-base[0],tip[1]-base[1]))
+    angles = [0,0]
+    if len(handsAngle) > 0:
+      if handsType[0] == 'Left':
+        angles[0] = -handsAngle[0]+math.pi
+      else:
+        angles[1] = -handsAngle[0]-math.pi
+    if len(handsAngle) > 1:
+      if handsType[1] == 'Left':
+        angles[0] = -handsAngle[1]+math.pi
+      else:
+        angles[1] = -handsAngle[1]-math.pi
+    if abs(angles[0]) > math.pi:
+      angles[0] = angles[0]-2*math.pi
+    if abs(angles[1]) > math.pi:
+      angles[1] = angles[1]+2*math.pi
+    self.antennaAngles = angles
+    resultsHead = faceMesh.process(imgRGB)
+    faceCoordinationInRealWorld = np.array([
+        [285, 528, 200],
+        [285, 371, 152],
+        [197, 574, 128],
+        [173, 425, 108],
+        [360, 574, 128],
+        [391, 425, 108]
+    ], dtype=np.float64)
+    if resultsHead.multi_face_landmarks:
+      for face_landmarks in resultsHead.multi_face_landmarks:
+        for idx, lm in enumerate(face_landmarks.landmark):
+          h, w, _ = image.shape
+          x, y, z = int(lm.x * w), int(lm.y * h), lm.z
+          if self.showProcessing is True:
+            cv2.circle(image, (x, y), 1, (255, 196, 69), cv2.FILLED)
+          if idx in [1, 9, 57, 130, 287, 359]:
+            x, y = int(lm.x * w), int(lm.y * h)
+            faceCoordinationInImage.append([x, y])
+        faceCoordinationInImage = np.array(faceCoordinationInImage, dtype=np.float64)
+        focalLength = 1 * w
+        camMatrix = np.array([[focalLength, 0, w / 2], [0, focalLength, h / 2], [0, 0, 1]])
+        distMatrix = np.zeros((4, 1), dtype=np.float64)
+        _, rotationVec, _ = cv2.solvePnP(faceCoordinationInRealWorld, faceCoordinationInImage, camMatrix, distMatrix)
+        rotationMatrix, _ = cv2.Rodrigues(rotationVec)
+        self.headAngles = self._rotationMatrixToAngles(rotationMatrix)
+        return image
+    return None
+  def run(self, reachy_mini: ReachyMini, stop_event: threading.Event):
+    """
+    Main loop
+    """
+    t0Total = time.time()
+    t0Last = time.time()
+    t0 = time.time()
+    frame = None
+    # Load recorded moves for sounds
+    try:
+      self.recorded_moves = RecordedMoves("pollen-robotics/reachy-mini-emotions-library")
+    except Exception as e:
+      print(f"Could not load emotions library: {e}")
+    try:
+      head_pose = create_head_pose(pitch=VERTICAL_PITCH_CORRECTION)
+      reachy_mini.goto_target(head_pose, antennas=[-.5, .5], body_yaw=0.0, duration=1.0)
+      reachy_mini.media.play_sound("wake_up.wav")
+    except Exception as e:
+      print(f"Greeting failed: {e}")
+    self.appReady = True
+    print("🪞 Reachy Mirror is ready !")
+    # Main control loop
+    while not stop_event.is_set():
+      frame = reachy_mini.media.get_frame()
+      if frame is None:
+        print("Failed to grab frame.")
+        continue
+      # Resize and flip frame if isMirror
+      image = cv2.resize(frame, (640, 480))
+      if self.isMirror:
+        image = cv2.flip(image, 1)
+      self.lastFrame = image
+      # Set head pose with motion reduction param
+      r=self.motionReduction/100
+      if self.isMirror:
+        reachy_mini.set_target(
+          head=create_head_pose(pitch=-self.headAngles[0]*r+VERTICAL_PITCH_CORRECTION, yaw=self.headAngles[1]*r, roll=-self.headAngles[2]*r),
+          antennas=self.antennaAngles
+        )
+      else:
+        reachy_mini.set_target(
+          head=create_head_pose(pitch=-self.headAngles[0]*r+VERTICAL_PITCH_CORRECTION, yaw=self.headAngles[1]*r, roll=-self.headAngles[2]*r),
+          antennas=[self.antennaAngles[0], self.antennaAngles[1]]
+        )
+      self.frameCount += 1
+      self.frameCountTotal += 1
+      now = time.time()
+      elapsed = now - t0Last
+      sleep_time = max(0, (1.0 / self.frameRateDown) - elapsed)
+      t0Last = now
+      if now - t0 > 1.0:
+        self.downValue = math.floor(self.frameCount/(now - t0)*10)/10
+        self.downValueAvg = math.floor(self.frameCountTotal/(now - t0Total)*10)/10
+        t0 = now
+        self.frameCount = 0
+      time.sleep(sleep_time)
+if __name__ == "__main__":
+  app = ReachyMirror()
+  try:
+    app.wrapped_run()
+  except KeyboardInterrupt:
+    app.stop()

reachy_mirror/static/index.html ADDED Viewed

	@@ -0,0 +1,100 @@

+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Reachy Mirror</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🪞</text></svg>" />
+    <link rel="stylesheet" href="/static/style.css" />
+  </head>
+  <body>
+    <h1>Reachy Mirror</h1>
+    <div class="container">
+      <div class="controls">
+        <div class="controls-panel panel">
+          <div class="setting-item">
+            <div class="setting-label">
+              <label for="motionReductionSlider"><span class="emoji">👋</span> Motion </label>
+            </div>
+            <div class="slider-wrapper">
+              <input type="range" id="motionReductionSlider" min="20" max="100" class="slider" />
+            </div>
+            <div class="setting-value">
+              <span id="motionReductionValue"></span>%
+            </div>
+          </div>
+          <div class="setting-item">
+            <div class="setting-label">
+              <label for="frameRateUpSlider"><span class="emoji">⬆️</span> UP Limit</label>
+            </div>
+            <div class="slider-wrapper">
+              <input type="range" id="frameRateUpSlider" min="1" max="30" class="slider" />
+            </div>
+            <div class="setting-value">
+              <span id="frameRateUpValue"></span> FPS
+            </div>
+          </div>
+          <div class="setting-item">
+            <div class="setting-label">
+              <label for="frameRateDownSlider"><span class="emoji">⬇️</span> DOWN Limit</label>
+            </div>
+            <div class="slider-wrapper">
+              <input type="range" id="frameRateDownSlider" min="1" max="60" class="slider" />
+            </div>
+            <div class="setting-value">
+              <span id="frameRateDownValue"></span> FPS
+            </div>
+          </div>
+        </div>
+        <div class="controls-panel panel">
+          <div class="setting-item">
+            <div class="setting-label-right">
+              <label for="showProcessingToggle"><span class="emoji">⚙️</span> Show Process</label>
+            </div>
+            <label class="switch">
+              <input type="checkbox" id="showProcessingToggle" checked />
+              <span class="switch-slider"></span>
+            </label>
+          </div>
+          <div class="setting-item">
+            <div class="setting-label-right">
+              <label for="isMirrorToggle"><span class="emoji">🪞</span> Mirror Mode</label>
+            </div>
+            <label class="switch">
+              <input type="checkbox" id="isMirrorToggle" checked />
+              <span class="switch-slider"></span>
+            </label>
+          </div>
+          <div class="setting-button">
+            <button id="resetButton">RESET</button>
+          </div>
+        </div>
+      </div>
+      <div class="video-container">
+        <video id="webcam" autoplay playsinline></video>
+        <div id="processed-wrapper" style="display: none;">
+          <img id="processed" />
+          <div id="processed-head"></div>
+          <div id="processed-hands"></div>
+        </div>
+        <img id="remote" style="display: none;" />
+      </div>
+      <div class="status">
+        <div id="spinner"></div>
+        <div id="status">🪞 Loading…</div>
+      </div>
+    </div>
+    <div class="footer">
+      Made with ❤︎ by <a href="https://github.com/domotick" target="_blank">@domotick</a>
+    </div>
+    <script src="/static/main.js"></script>
+  </body>
+</html>

reachy_mirror/static/main.js ADDED Viewed

	@@ -0,0 +1,266 @@

+// ** INITIAL VARS
+let appState
+let stream
+let frameRateUp = 10
+let frameCount = 0
+let frameCountTotal = 0
+let streamInterval
+let readyInterval
+let ready = false
+let t0 = new Date()
+let t0Total = new Date()
+// ** PROCESS STATUS
+async function checkStatus() {
+  try {
+    const resp = await fetch('/ready')
+    const data = await resp.json()
+    if( data.ready ) {
+      status.textContent = '✅ Streaming'
+      remote.style.display = ''
+      spinner.style.display = 'none'
+      remote.setAttribute('src', '/webcam_feed')
+      await startWebcam()
+      await setAppState()
+      setStreamInterval()
+      setReadyInterval()
+    }
+    else {
+      status.textContent = '⏳ Initializing...'
+      processedWrapper.style.display = 'none'
+      spinner.style.display = 'block'
+    }
+  } catch( e ) {
+    status.textContent = '🔄 Connecting...'
+    processedWrapper.style.display = 'none'
+    remote.style.display = 'none'
+    remote.setAttribute('src', '')
+    spinner.style.display = 'block'
+  }
+}
+function setReadyInterval(running) {
+  if( readyInterval ) {
+    clearInterval(readyInterval)
+    readyInterval = null
+  }
+  if( running ) readyInterval = setInterval(checkStatus, 1000)
+}
+function setStreamInterval() {
+  if( streamInterval ) clearInterval(streamInterval)
+  streamInterval = setInterval(sendFrameToBackend, 1000/appState.frameRateUp)
+}
+async function startWebcam() {
+  try {
+    stream = await navigator.mediaDevices.getUserMedia({ video: { width: { ideal: 640 }, height: { ideal: 480 } } })
+    webcam.srcObject = stream
+    frameCount = 0
+    frameCountTotal = 0
+    t0 = new Date()
+    t0Total = new Date()
+  } catch (err) {
+    console.error('Erreur video:', err)
+  }
+}
+function stopWebcam() {
+  if( stream ) {
+    stream.getTracks().forEach(track => track.stop())
+    webcam.srcObject = null
+    stream = null
+  }
+  if( streamInterval ) {
+    clearInterval(streamInterval)
+    streamInterval = null
+  }
+  processed.src = ''
+  processedHead.textContent = ''
+  processedHands.textContent = ''
+  processedWrapper.style.display = 'none'
+}
+// ** HTML ELEMENT
+const status = document.getElementById('status')
+const spinner = document.getElementById('spinner')
+const webcam = document.getElementById('webcam')
+const remote = document.getElementById('remote')
+const processed = document.getElementById('processed')
+const processedWrapper = document.getElementById('processed-wrapper')
+const processedHead = document.getElementById('processed-head')
+const processedHands = document.getElementById('processed-hands')
+const frameRateUpValue = document.getElementById('frameRateUpValue')
+const frameRateDownValue = document.getElementById('frameRateDownValue')
+const motionReductionValue = document.getElementById('motionReductionValue')
+const showProcessingToggle = document.getElementById('showProcessingToggle')
+const isMirrorToggle = document.getElementById('isMirrorToggle')
+// * FPS UP
+document.getElementById('frameRateUpSlider').addEventListener('input', function() {
+  document.getElementById('frameRateUpValue').textContent = parseInt(this.value)
+})
+document.getElementById('frameRateUpSlider').addEventListener('change', function() {
+  const value = parseInt(this.value)
+  appState.frameRateUp = value
+  setCookie('frameRateUp', value)
+  setStreamInterval()
+})
+// * FPS DOWN
+document.getElementById('frameRateDownSlider').addEventListener('input', function() {
+  document.getElementById('frameRateDownValue').textContent = parseInt(this.value)
+})
+document.getElementById('frameRateDownSlider').addEventListener('change', async function() {
+  const value = parseInt(this.value)
+  appState.frameRateDown = value
+  setCookie('frameRateDown', value)
+  await fetch('/settings', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ frameRateDown: value })
+  })
+})
+// * MOTION REDUCTION
+document.getElementById('motionReductionSlider').addEventListener('input', function() {
+  document.getElementById('motionReductionValue').textContent = parseInt(this.value)
+})
+document.getElementById('motionReductionSlider').addEventListener('change', async function() {
+  const value = parseInt(this.value)
+  appState.motionReduction = value
+  await fetch('/settings', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ motionReduction: value })
+  })
+  setCookie('motionReduction', value)
+})
+// * PROCESSING DISPLAY
+document.getElementById('showProcessingToggle').addEventListener('change', async function() {
+  appState.showProcessing = this.checked
+  await fetch('/settings', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ showProcessing: this.checked })
+  })
+  setCookie('showProcessing', this.checked ? 'true' : 'false')
+  processedWrapper.style.display = this.checked ? 'block' : 'none'
+})
+// * MIRROR MODE
+document.getElementById('isMirrorToggle').addEventListener('change', async function() {
+  appState.isMirror = this.checked
+  await fetch('/settings', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ isMirror: this.checked })
+  })
+  setCookie('isMirror', this.checked ? 'true' : 'false')
+})
+document.getElementById('resetButton').addEventListener('click', async function() {
+  reset()
+  setAppState()
+})
+// ** COOKIE MANAGEMENT
+function setCookie(key, value) {
+    const expires = new Date()
+    expires.setTime(expires.getTime() + (1 * 24 * 60 * 60 * 1000))
+    document.cookie = key + '=' + value + ';expires=' + expires.toUTCString()
+}
+function getCookie(key) {
+    const keyValue = document.cookie.match('(^|;) ?' + key + '=([^;]*)(;|$)')
+    return keyValue ? keyValue[2] : null
+}
+function deleteCookie(name) {
+  document.cookie = name+'=; Max-Age=-99999999;';
+}
+// ** BACKEND HANDLER
+async function sendFrameToBackend() {
+  if (!webcam || webcam.paused || webcam.ended) return
+  const canvas = document.createElement('canvas')
+  canvas.width = webcam.videoWidth
+  canvas.height = webcam.videoHeight
+  const ctx = canvas.getContext('2d')
+  ctx.drawImage(webcam, 0, 0)
+  const imageData = canvas.toDataURL('image/jpeg', 0.8)
+  try {
+    const resp = await fetch('/process_frame', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ image: imageData })
+    })
+    if( appState.showProcessing ) {
+      const data = await resp.json()
+      if( data.image ) {
+        processed.src = data.image
+        frameCount++
+        frameCountTotal++
+        const now = new Date()
+        if( now - t0 > 1000 ) { // 1 second
+          status.textContent = `✅ Streaming `
+          status.textContent += `• UP: ${Math.floor(frameCount/(now - t0)*10000)/10} FPS (~avg ${Math.floor(frameCountTotal/(now - t0Total)*10000)/10})`
+          if( data.downValue && data.downValueAvg ) status.textContent += ` • DOWN: ${data.downValue} FPS (~avg ${data.downValueAvg})`
+          t0 = now
+          frameCount = 0
+        }
+        if( data.head ) processedHead.textContent = `pitch: ${data.head[0]}\nyaw: ${data.head[1]}\nroll: ${data.head[2]}`
+        if( data.hands ) processedHands.textContent = `left: ${data.hands[0]}\nright: ${data.hands[1]}`
+        processedWrapper.style.display = 'block'
+      }
+      else if( data.error ) console.error('Erreur backend:', data.error)
+    }
+  }
+  catch(e) {
+    console.error('Erreur réseau:', e)
+    stopWebcam()
+    setReadyInterval(true)
+  }
+}
+function reset() {
+  deleteCookie('frameRateUp')
+  deleteCookie('frameRateDown')
+  deleteCookie('motionReduction')
+  deleteCookie('showProcessing')
+  deleteCookie('isMirror')
+}
+async function setAppState() {
+  appState = {}
+  appState.frameRateUp = frameRateUpSlider.value = frameRateUpValue.textContent = getCookie('frameRateUp') ?? 30, // 30 FPS UP
+  appState.frameRateDown = frameRateDownSlider.value = frameRateDownValue.textContent = getCookie('frameRateDown') ?? 60, // 60 FPS DOWN
+  appState.motionReduction = motionReductionSlider.value = motionReductionValue.textContent = getCookie('motionReduction') ?? 60, // 60% by default
+  appState.showProcessing = showProcessingToggle.checked = getCookie('showProcessing') === null ? true : getCookie('showProcessing') === 'true' ? true : false // Show processed
+  processedWrapper.style.display = 'none'
+  appState.isMirror = isMirrorToggle.checked = getCookie('isMirror') === null ? true : getCookie('isMirror') === 'true' ? true : false // Mirror mode
+  await fetch('/settings', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({
+      frameRateDown: appState.frameRateDown,
+      motionReduction: appState.motionReduction,
+      showProcessing: appState.showProcessing,
+      isMirror: appState.isMirror
+    })
+  })
+}
+window.addEventListener('beforeunload', _ => {
+  stopWebcam()
+  setReadyInterval()
+})
+setReadyInterval(true)

reachy_mirror/static/style.css ADDED Viewed

	@@ -0,0 +1,367 @@

+:root {
+  --bg: #667eea;
+  --bg-2: #764ba2;
+  --panel: rgba(11, 18, 36, 0.8);
+  --border: rgba(255, 255, 255, 0.08);
+  --text: #eaf2ff;
+  --muted: #9fb6d7;
+  --ok: #4ce0b3;
+  --warn: #ffb547;
+  --error: #ff5c70;
+  --accent: #45c4ff;
+  --hover: #1a739d;
+  --accent-2: #5ef0c1;
+  --background: #e9ecef;
+  --shadow: 0 20px 70px rgba(0, 0, 0, 0.45);
+}
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+body {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  background: radial-gradient(circle at 20% 20%, rgba(69, 196, 255, 0.16), transparent 35%),
+              radial-gradient(circle at 80% 0%, rgba(94, 240, 193, 0.16), transparent 32%),
+              linear-gradient(135deg, var(--bg), var(--bg-2));
+  color: var(--text);
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  color: var(--text);
+  padding: 20px;
+}
+a,
+a:hover,
+&:link,
+&:visited,
+&:active {
+  color: white;
+  text-decoration: none;
+}
+.footer {
+  position: sticky;
+  bottom: 10px;
+  left: 50%;
+  transform: translateX(-50%);
+}
+#spinner {
+  width: 46px;
+  height: 46px;
+  border: 4px solid rgba(255,255,255,0.15);
+  border-top-color: var(--accent);
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+  margin-bottom: 12px;
+}
+@keyframes spin { to { transform: rotate(360deg); } }
+#status { color: var(--text); margin: 0; letter-spacing: 0.4px; }
+.panel {
+  background: var(--panel);
+  border: 1px solid var(--border);
+  border-radius: 14px;
+  padding: 16px 24px;
+  box-shadow: var(--shadow);
+  backdrop-filter: blur(10px);
+}
+.container {
+  text-align: center;
+  width: 100%;
+  padding-bottom: 20px;
+}
+.video-container {
+  justify-content: center;
+  display: flex;
+  gap: 20px;
+  margin-bottom: 10px;
+}
+h1 {
+  display: flex;
+  align-items: center;
+  margin-bottom: 15px;
+}
+.emoji {
+  font-size: 24px;
+  margin-right: 10px;
+  width: 32px;
+  height: 32px;
+  background-color: white;
+  border-radius: 50%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.status {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+}
+#processed-wrapper {
+  position: relative;
+  width: 50%;
+}
+#processed-head,
+#processed-hands {
+  position: absolute;
+  top: 20px;
+  color: var(--text);
+  white-space: pre-wrap;
+  text-transform: capitalize;
+  font-family: 'Courier New', Courier, monospace;
+  text-align: left;
+}
+#processed-head {
+  left: 20px;
+}
+#processed-hands {
+  right: 20px;
+}
+#remote,
+#webcam,
+#processed {
+  background: white;
+  width: 50%;
+  border-radius: 1em;
+  padding: 4px;
+  box-shadow: var(--shadow);
+  backdrop-filter: blur(10px);
+}
+#processed {
+  width: 100%;
+}
+#webcam {
+  display: none;
+  visibility: hidden;
+}
+.controls {
+  border-radius: 8px;
+  margin: 20px 0;
+  display: flex;
+  justify-content: center;
+  gap: 20px;
+}
+.controls-panel {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.setting-item {
+  display: flex;
+  align-items: center;
+  padding: 8px 0;
+}
+.setting-button {
+  display: flex;
+  justify-content: end;
+  padding: 8px 0;
+}
+label {
+  display: flex;
+  align-items: center;
+}
+.setting-label {
+  width: 160px;
+  text-align: left;
+}
+.setting-label-right {
+  width: 190px;
+  text-align: left;
+}
+.setting-value {
+  width: 80px;
+  text-align: right;
+}
+button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 11px 16px;
+  border: none;
+  border-radius: 10px;
+  background: linear-gradient(120deg, var(--accent), var(--accent-2));
+  color: var(--text);
+  cursor: pointer;
+  font-weight: 600;
+  letter-spacing: 0.2px;
+  box-shadow: 0 14px 40px rgba(69, 196, 255, 0.25);
+  transition: transform 0.12s ease, filter 0.12s ease, box-shadow 0.12s ease;
+}
+button:hover { filter: brightness(1.06); transform: translateY(-1px); }
+button:active { transform: translateY(0); }
+button.ghost {
+  background: rgba(255, 255, 255, 0.05);
+  color: var(--text);
+  box-shadow: none;
+  border: 1px solid var(--border);
+}
+button.ghost:hover { border-color: rgba(94, 240, 193, 0.4); }
+.slider-container {
+  width: 100%;
+  margin: 15px 0;
+}
+.slider-container label {
+  display: block;
+  margin-bottom: 5px;
+  font-weight: 500;
+  color: #495057;
+}
+.slider-wrapper {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+.slider-value {
+  min-width: 30px;
+  text-align: right;
+  font-weight: bold;
+  color: var(--accent);
+}
+input[type="range"] {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 100%;
+  height: 10px;
+  border-radius: 4px;
+  background: var(--background);
+  outline: none;
+  margin: 10px 0;
+}
+.switch {
+  position: relative;
+  display: inline-block;
+  width: 50px;
+  height: 24px;
+}
+.switch input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+.switch-slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: var(--muted);
+  transition: 0.4s;
+  border-radius: 24px;
+}
+.switch-slider:before {
+  position: absolute;
+  content: "";
+  height: 16px;
+  width: 16px;
+  left: 4px;
+  bottom: 4px;
+  background-color: var(--text);
+  transition: 0.4s;
+  border-radius: 50%;
+}
+input:checked + .switch-slider {
+  background-color: var(--accent);
+}
+input:focus + .switch-slider {
+  box-shadow: 0 0 1px var(--accent);
+}
+input[type="range"]::-moz-range-track {
+  width: 100%;
+  height: 10px;
+  border-radius: 4px;
+  background: var(--background);
+  border: none;
+}
+input[type="range"]::-webkit-slider-runnable-track {
+  height: 10px;
+  border-radius: 4px;
+  background: var(--background);
+}
+input[type="range"]::-moz-range-progress {
+  height: 10px;
+  border-radius: 4px;
+  background-color: var(--accent);
+}
+input[type="range"]::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  background: var(--accent);
+  cursor: pointer;
+  transition: all 0.15s ease;
+  transform: translateY(-8px);
+}
+input[type="range"]::-moz-range-thumb {
+  width: 24px;
+  height: 24px;
+  border: none;
+  border-radius: 50%;
+  background: var(--accent);
+  cursor: pointer;
+  transition: all 0.15s ease;
+}
+input[type="range"]::-webkit-slider-thumb:hover {
+  background: var(--hover);
+  transform: translateY(-8px) scale(1.2);
+}
+input[type="range"]::-moz-range-thumb:hover {
+  background: var(--hover);
+  transform: scale(1.2);
+}
+input:checked + .switch-slider:before {
+  transform: translateX(26px);
+}

style.css ADDED Viewed

	@@ -0,0 +1,391 @@

+:root {
+  --bg: #667eea;
+  --bg-2: #764ba2;
+  --panel: rgba(11, 18, 36, 0.8);
+  --border: rgba(255, 255, 255, 0.08);
+  --text: #eaf2ff;
+  --content: #d1deee;
+  --ok: #4ce0b3;
+  --warn: #ffb547;
+  --error: #ff5c70;
+  --accent: #45c4ff;
+  --hover: #1a739d;
+  --accent-2: #5ef0c1;
+  --background: #e9ecef;
+  --shadow: 0 20px 70px rgba(0, 0, 0, 0.45);
+}
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+body {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  background: radial-gradient(circle at 20% 20%, rgba(69, 196, 255, 0.16), transparent 35%),
+              radial-gradient(circle at 80% 0%, rgba(94, 240, 193, 0.16), transparent 32%),
+              linear-gradient(135deg, var(--bg), var(--bg-2));
+  color: var(--text);
+  min-height: 100vh;
+  color: var(--text);
+  line-height: 1.6;
+}
+a,
+a:hover,
+&:link,
+&:visited,
+&:active {
+  color: white;
+  text-decoration: none;
+}
+p {
+  margin-bottom: 1em;
+}
+.footer {
+  color: white;
+  position: absolute;
+  bottom: 10px;
+  left: 50%;
+  transform: translateX(-50%);
+}
+.hero {
+  padding: 3.5rem clamp(1.5rem, 3vw, 3rem) 2.5rem;
+  position: relative;
+  overflow: hidden;
+  min-height: 100vh;
+}
+.hero::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(120deg, rgba(122, 245, 196, 0.12), rgba(246, 196, 82, 0.08), transparent);
+  pointer-events: none;
+}
+.topline {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  max-width: 1200px;
+  margin: 0 auto 2rem;
+  position: relative;
+  z-index: 2;
+}
+.brand {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-weight: 700;
+  letter-spacing: 0.5px;
+  color: var(--text);
+}
+.logo {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.2rem;
+  height: 2.2rem;
+  border-radius: 10px;
+  background: linear-gradient(145deg, rgba(122, 245, 196, 0.15), rgba(124, 142, 255, 0.15));
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
+}
+.brand-name {
+  font-size: 1.1rem;
+}
+.pill {
+  background: rgba(255, 255, 255, 0.06);
+  border: 1px solid var(--border);
+  padding: 0.6rem 1rem;
+  border-radius: 999px;
+  color: var(--content);
+  font-size: 0.9rem;
+  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
+}
+.hero-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+  gap: clamp(1.5rem, 2.5vw, 2.5rem);
+  max-width: 1200px;
+  margin: 0 auto;
+  position: relative;
+  z-index: 2;
+  align-items: center;
+}
+.hero-copy h1 {
+  font-size: clamp(2.6rem, 4vw, 3.6rem);
+  margin-bottom: 1rem;
+  line-height: 1.1;
+  letter-spacing: -0.5px;
+}
+.eyebrow {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  font-size: 0.8rem;
+  color: var(--content);
+  margin-bottom: 0.75rem;
+}
+.eyebrow::before {
+  content: "";
+  display: inline-block;
+  width: 24px;
+  height: 2px;
+  background: linear-gradient(90deg, var(--accent), var(--accent-2));
+  border-radius: 999px;
+}
+.lede {
+  font-size: 1.1rem;
+  color: var(--content);
+  max-width: 620px;
+}
+.hero-actions {
+  display: flex;
+  gap: 1rem;
+  align-items: center;
+  margin: 1.6rem 0 1.2rem;
+  flex-wrap: wrap;
+}
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.6rem;
+  padding: 0.85rem 1.4rem;
+  border-radius: 12px;
+  font-weight: 700;
+  border: 1px solid transparent;
+  cursor: pointer;
+  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease;
+}
+.btn.primary {
+  background: linear-gradient(135deg, #7af5c4, #7c8eff);
+  color: white;
+  box-shadow: 0 15px 30px rgba(122, 245, 196, 0.25);
+}
+.btn.primary:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 25px 45px rgba(122, 245, 196, 0.35);
+}
+.btn.ghost {
+  background: rgba(255, 255, 255, 0.05);
+  border-color: var(--border);
+  color: var(--text);
+}
+.btn.ghost:hover {
+  border-color: rgba(255, 255, 255, 0.3);
+  transform: translateY(-2px);
+}
+.btn.wide {
+  width: 100%;
+  justify-content: center;
+}
+.hero-badges {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.6rem;
+  color: var(--content);
+  font-size: 0.9rem;
+}
+.hero-badges span {
+  padding: 0.5rem 0.8rem;
+  border-radius: 10px;
+  border: 1px solid var(--border);
+  background: rgba(255, 255, 255, 0.04);
+}
+.hero-visual .glass-card {
+  background: rgba(255, 255, 255, 0.03);
+  border: 1px solid var(--border);
+  border-radius: 18px;
+  padding: 1.2rem;
+  box-shadow: var(--shadow);
+  backdrop-filter: blur(10px);
+}
+.hero-gif {
+  width: 100%;
+  display: block;
+  border-radius: 14px;
+  border: 1px solid var(--border);
+  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.35);
+}
+.caption {
+  margin-top: 0.75rem;
+  color: var(--content);
+  font-size: 0.95rem;
+}
+.section {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: clamp(2rem, 4vw, 3.5rem) clamp(1.5rem, 3vw, 3rem);
+}
+.section-header {
+  text-align: center;
+  max-width: 780px;
+  margin: 0 auto 2rem;
+}
+.section-header h2 {
+  font-size: clamp(2rem, 3vw, 2.6rem);
+  margin-bottom: 0.5rem;
+}
+.intro {
+  color: var(--content);
+  font-size: 1.05rem;
+}
+.feature-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+  gap: 1rem;
+}
+.feature-card {
+  background: rgba(255, 255, 255, 0.03);
+  border: 1px solid var(--border);
+  border-radius: 16px;
+  padding: 1.25rem;
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
+  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
+}
+.feature-card:hover {
+  transform: translateY(-4px);
+  border-color: rgba(122, 245, 196, 0.3);
+  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.3);
+}
+.feature-card .icon {
+  width: 48px;
+  height: 48px;
+  border-radius: 12px;
+  display: grid;
+  place-items: center;
+  background: rgba(122, 245, 196, 0.14);
+  margin-bottom: 0.8rem;
+  font-size: 1.4rem;
+}
+.feature-card h3 {
+  margin-bottom: 0.35rem;
+}
+.feature-card p {
+  color: var(--content);
+}
+.story {
+  padding-top: 1rem;
+}
+.story-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+  gap: 1rem;
+}
+.story-card {
+  background: rgba(255, 255, 255, 0.03);
+  border: 1px solid var(--border);
+  border-radius: 18px;
+  padding: 1.5rem;
+  box-shadow: var(--shadow);
+}
+.story-card.secondary {
+  background: linear-gradient(145deg, rgba(124, 142, 255, 0.08), rgba(122, 245, 196, 0.06));
+}
+.story-card h3 {
+  margin-bottom: 0.8rem;
+}
+.story-list {
+  list-style: none;
+  display: grid;
+  gap: 0.7rem;
+  color: var(--content);
+  font-size: 0.98rem;
+}
+.story-list li {
+  display: flex;
+  gap: 0.7rem;
+  align-items: flex-start;
+}
+.story-text {
+  color: var(--content);
+  line-height: 1.7;
+  margin-bottom: 1rem;
+}
+.chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+.chip {
+  padding: 0.45rem 0.8rem;
+  border-radius: 12px;
+  background: rgba(0, 0, 0, 0.2);
+  border: 1px solid var(--border);
+  color: var(--text);
+  font-size: 0.9rem;
+}
+@media (max-width: 768px) {
+  .hero {
+    padding-top: 2.5rem;
+  }
+  .topline {
+    flex-direction: column;
+    gap: 0.8rem;
+    align-items: flex-start;
+  }
+  .hero-actions {
+    width: 100%;
+  }
+  .btn {
+    width: 100%;
+    justify-content: center;
+  }
+  .hero-badges {
+    gap: 0.4rem;
+  }
+}