Spaces:

cdeplanne
/

wake_me_up

Running

App Files Files Community

drenayaz commited on 24 days ago

Commit

569067e

0 Parent(s):

Initial commit

Browse files

Files changed (14) hide show

.gitattributes +5 -0
.gitignore +3 -0
README.md +12 -0
assets/.gitkeep +0 -0
index.html +101 -0
pyproject.toml +28 -0
style.css +252 -0
wake_me_up/__init__.py +0 -0
wake_me_up/main.py +662 -0
wake_me_up/moves/hello-world.json +0 -0
wake_me_up/static/assets/.gitkeep +0 -0
wake_me_up/static/index.html +142 -0
wake_me_up/static/main.js +328 -0
wake_me_up/static/style.css +397 -0

.gitattributes ADDED Viewed

	@@ -0,0 +1,5 @@

+*.mp4 filter=xet diff=xet merge=xet -text
+*.png filter=xet diff=xet merge=xet -text
+*.jpg filter=xet diff=xet merge=xet -text
+*.jpeg filter=xet diff=xet merge=xet -text
+*.svg filter=xet diff=xet merge=xet -text

.gitignore ADDED Viewed

	@@ -0,0 +1,3 @@

+__pycache__/
+*.egg-info/
+build/

README.md ADDED Viewed

	@@ -0,0 +1,12 @@

+---
+title: Wake Me Up
+emoji: 👋
+colorFrom: red
+colorTo: blue
+sdk: static
+pinned: false
+short_description: Your first app to test Reachy Mini features
+tags:
+ - reachy_mini
+ - reachy_mini_python_app
+---

assets/.gitkeep ADDED Viewed

File without changes

index.html ADDED Viewed

	@@ -0,0 +1,101 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Wake Me Up - Reachy Mini</title>
+  <meta name="description" content="Your first app with Reachy Mini - Test all the robot's features in simple steps.">
+  <link rel="stylesheet" href="style.css">
+</head>
+<body>
+  <!-- Hero Section -->
+  <section class="hero">
+    <div class="container">
+      <div class="hero-grid">
+        <div>
+          <video class="hero-video" autoplay loop muted playsinline>
+            <source src="assets/touch_demo.mp4" type="video/mp4">
+            <div class="hero-placeholder">🤖⚡</div>
+          </video>
+        </div>
+        <div class="hero-content">
+          <div class="hero-header">
+            <div class="hero-icon">👋</div>
+            <h1 class="hero-title">Wake Me Up</h1>
+          </div>
+          <div class="tags">
+            <span class="tag">first app</span>
+            <span class="tag">testing</span>
+            <span class="tag">beginner-friendly</span>
+          </div>
+          <p class="hero-description">
+            Welcome to your <b>first app with Reachy Mini</b>! This simple and friendly application helps you test all the robot's features in a few easy steps.
+            <br><br>
+            Test the microphone, motors, speaker, and camera to make sure everything works perfectly.
+          </p>
+        </div>
+      </div>
+    </div>
+  </section>
+  <!-- Technical Section -->
+  <section class="technical">
+    <div class="container">
+      <div class="technical-grid">
+        <div>
+          <h2 class="section-title">How to install</h2>
+          <ol class="install-steps">
+            <li>
+              <span>
+                Make sure you already have the
+                <a href="https://github.com/pollen-robotics/reachy-mini-desktop-app/releases/latest"
+                   class="link-tertiary">dashboard</a>
+                installed.
+              </span>
+            </li>
+            <li>
+              <span>Connect to your Reachy Mini using the dashboard.</span>
+            </li>
+            <li>
+              <span>Navigate to the "Applications" tab in the dashboard.</span>
+            </li>
+            <li>
+              <span>Find "Wake Me Up" in the list of available applications.</span>
+            </li>
+            <li>
+              <span>Click "Install" and the app will be ready to use!</span>
+            </li>
+          </ol>
+        </div>
+        <div>
+          <div class="demo-placeholder">Video coming soon</div>
+        </div>
+      </div>
+    </div>
+  </section>
+  <!-- Footer -->
+  <footer class="footer">
+    <div class="container">
+      <div class="footer-content">
+        <div class="footer-links">
+          <a href="https://github.com/pollen-robotics/reachy_mini" target="_blank" rel="noopener">> Documentation</a>
+          <a href="https://huggingface.co/spaces/pollen-robotics/Reachy-Mini_Best_Spaces" target="_blank" rel="noopener">> Browse other apps</a>
+          <a href="https://huggingface.co/blog/pollen-robotics/make-and-publish-your-reachy-mini-apps" target="_blank" rel="noopener">> Create your own app</a>
+        </div>
+        <p class="footer-help">
+          Need help? Contact us on <a href="https://discord.gg/u3QtUBhy" target="_blank" rel="noopener">Discord</a> and join the community.
+          Proudly brought by <a href="https://www.pollen-robotics.com/" target="_blank">Pollen Robotics</a> x 🤗 <a href="https://huggingface.co" target="_blank">Hugging Face</a>
+        </p>
+      </div>
+    </div>
+  </footer>
+</body>
+</html>

pyproject.toml ADDED Viewed

	@@ -0,0 +1,28 @@

+[build-system]
+requires = ["setuptools>=61.0"]
+build-backend = "setuptools.build_meta"
+[project]
+name = "wake_me_up"
+version = "0.1.0"
+description = "Your first app with Reachy Mini - Test all the robot's features"
+readme = "README.md"
+requires-python = ">=3.10"
+dependencies = [
+    "reachy-mini"
+]
+keywords = ["reachy-mini-app"]
+[project.entry-points."reachy_mini_apps"]
+wake_me_up = "wake_me_up.main:WakeMeUp"
+[tool.setuptools]
+package-dir = { "" = "." }
+include-package-data = true
+[tool.setuptools.packages.find]
+where = ["."]
+[tool.setuptools.package-data]
+wake_me_up = ["**/*"] # Also include all non-.py files

style.css ADDED Viewed

	@@ -0,0 +1,252 @@

+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+:root {
+  --background: #F6F6F8;
+  --foreground: #333333;
+  --primary: #FF9900;
+  --primary-hover: #FFB333;
+  --muted: #E8E8EB;
+  --muted-foreground: #878789;
+  --border: #E0E0E0;
+  --card: #FFFFFF;
+  --radius: 0.5rem;
+}
+body {
+  font-family: 'Inter', sans-serif;
+  background-color: var(--background);
+  color: var(--foreground);
+  line-height: 1.6;
+  -webkit-font-smoothing: antialiased;
+}
+.container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 1.5rem;
+}
+/* Hero Section */
+.hero {
+  padding: 4rem 0;
+}
+.hero-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 3rem;
+  align-items: center;
+}
+.hero-video {
+  width: 100%;
+  height: auto;
+  border-radius: var(--radius);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  background: #000;
+}
+@media (max-width: 768px) {
+  .hero-grid {
+    grid-template-columns: 1fr;
+  }
+}
+.hero-content {
+  text-align: left;
+}
+.hero-header {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 1rem;
+  margin-bottom: 1.5rem;
+}
+.hero-icon {
+  font-size: 4rem;
+}
+.hero-title {
+  font-size: 3rem;
+  font-weight: 700;
+  color: var(--foreground);
+}
+.tags {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 0.5rem;
+  margin-bottom: 1.5rem;
+}
+.tag {
+  display: inline-flex;
+  align-items: center;
+  padding: 0.25rem 0.75rem;
+  font-size: 0.75rem;
+  font-weight: 500;
+  border-radius: 9999px;
+  background-color: var(--muted);
+  color: var(--muted-foreground);
+}
+.hero-description {
+  font-size: 1.125rem;
+  color: var(--muted-foreground);
+  max-width: 600px;
+  margin: 0 auto 2rem;
+}
+.hero-placeholder {
+  width: 100%;
+  max-width: 700px;
+  height: 400px;
+  border-radius: var(--radius);
+  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  font-size: 3rem;
+}
+/* Technical Section */
+.technical {
+  padding: 4rem 0;
+  background-color: var(--card);
+}
+.technical-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 4rem;
+  align-items: start;
+}
+@media (max-width: 768px) {
+  .technical-grid {
+    grid-template-columns: 1fr;
+    gap: 2rem;
+  }
+}
+.section-title {
+  font-size: 1.5rem;
+  font-weight: 700;
+  color: var(--foreground);
+  margin-bottom: 1rem;
+}
+.section-text {
+  color: var(--muted-foreground);
+  margin-bottom: 1.5rem;
+}
+.install-steps {
+  list-style: none;
+  counter-reset: step;
+}
+.install-steps li {
+  counter-increment: step;
+  display: flex;
+  align-items: flex-start;
+  gap: 1rem;
+  margin-bottom: 1rem;
+  color: var(--muted-foreground);
+}
+.install-steps li::before {
+  content: counter(step);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 1.75rem;
+  height: 1.75rem;
+  border-radius: 50%;
+  background-color: var(--primary);
+  color: white;
+  font-size: 0.875rem;
+  font-weight: 600;
+}
+.link-tertiary {
+  color: var(--muted-foreground);
+  text-decoration: underline;
+  transition: color 0.2s;
+}
+.link-tertiary:hover {
+  color: var(--primary);
+}
+.demo-placeholder {
+  width: 100%;
+  height: 400px;
+  border-radius: var(--radius);
+  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.1);
+  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  font-size: 2rem;
+  font-weight: 600;
+}
+/* Footer */
+.footer {
+  background-color: #F6F6F8;
+  border-top: 1px solid var(--border);
+  padding: 2rem 0;
+}
+.footer-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1rem;
+  text-align: center;
+}
+.footer-links {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 1.5rem;
+  font-size: 0.875rem;
+}
+.footer-links a {
+  color: var(--muted-foreground);
+  text-decoration: none;
+  transition: color 0.2s;
+}
+.footer-links a:hover {
+  color: var(--primary);
+}
+.footer-help {
+  font-size: 0.875rem;
+  color: var(--muted-foreground);
+}
+.footer-help a {
+  color: var(--primary);
+  text-decoration: underline;
+}
+.footer-help a:hover {
+  color: var(--primary-hover);
+}

wake_me_up/__init__.py ADDED Viewed

File without changes

wake_me_up/main.py ADDED Viewed

	@@ -0,0 +1,662 @@

+import threading
+import time
+import json
+from pathlib import Path
+import numpy as np
+import cv2
+from fastapi.responses import StreamingResponse
+from pydantic import BaseModel
+from reachy_mini import ReachyMini, ReachyMiniApp
+from reachy_mini.utils import create_head_pose
+from reachy_mini.motion.recorded_move import RecordedMove, RecordedMoves
+class WakeMeUp(ReachyMiniApp):
+    """
+    Wake Me Up - Your first app with Reachy Mini.
+    Tests: audio input, motors, audio output, camera.
+    """
+    custom_app_url: str | None = "http://0.0.0.0:8042"
+    request_media_backend: str | None = None
+    # Touch detection constants
+    TOUCH_THRESHOLD = 10  # Audio level threshold for touch detection
+    TOUCH_DURATION_REQUIRED = 1.5  # Seconds of continuous touch required
+    TOUCH_GRACE_PERIOD = 0.4  # Allow 0.4s breaks without resetting
+    # Loop timing constants
+    MAIN_LOOP_FREQUENCY = 50  # Hz - frequency of main loop
+    STATE_POLL_INTERVAL = 500  # ms - frontend polling interval
+    AUDIO_POLL_INTERVAL = 100  # ms - audio level polling interval
+    def __init__(self):
+        super().__init__()
+        self._state_lock = threading.Lock()
+        self._current_step = 0  # Steps 0-5 (0=init, 1-4=tests, 5=success)
+        self._is_sleeping = False
+        self._audio_level = 0.0
+        self._audio_stream = None
+        self._last_frame = None
+        self._volume = self._get_current_volume()  # Read actual system volume
+        self._movement_playing = False
+        self._movement_busy = False  # Tracks entire process (including go to sleep)
+        self._cancel_movement = threading.Event()
+        self._is_first_movement = True  # Track if this is the first play (auto-play)
+        self._is_first_emotion = True  # Track if this is the first emotion play
+        self._emotion_playing = False  # Track if emotion is currently playing
+        self._auto_play_emotion = False  # Flag to auto-play emotion in step 3
+        self._auto_play_curious = False  # Flag to auto-play curious emotion before step 4
+        self._auto_play_enthusiastic = False  # Flag to auto-play enthusiastic emotion on step 5
+        self._reachy_mini = None
+        self._emotions = None  # Pre-loaded emotions
+        # Touch detection for audio test
+        self._touch_detected = False
+        self._touch_start_time = None
+        self._touch_accumulated_time = 0.0  # Total time above threshold
+        self._last_audio_check = None
+        self._auto_play_movement = False  # Flag to auto-play movement in step 2
+        self._register_routes()
+    def run(self, reachy_mini: ReachyMini, stop_event: threading.Event):
+        self._reachy_mini = reachy_mini
+        # Pre-load emotions library (so no wait during diagnostic)
+        print("Pre-loading emotions library...")
+        try:
+            self._emotions = RecordedMoves("pollen-robotics/reachy-mini-emotions-library")
+            print("Emotions loaded successfully")
+        except Exception as e:
+            print(f"Failed to pre-load emotions: {e}")
+        # Put robot in sleeping pose at startup
+        print("Setting sleeping pose...")
+        try:
+            reachy_mini.goto_sleep()
+            with self._state_lock:
+                self._is_sleeping = True
+                # Auto-advance to step 1 when sleeping
+                if self._current_step == 0:
+                    self._current_step = 1
+            print("Sleeping pose set, advancing to step 1")
+        except Exception as e:
+            print(f"Failed to set sleeping pose: {e}")
+        # Start audio input stream (always listening)
+        self._start_audio_input()
+        # Helper function to check and execute auto-play actions
+        def check_auto_play(flag_attr, step, delay, target_func, args, description):
+            with self._state_lock:
+                should_play = getattr(self, flag_attr)
+                current = self._current_step
+            if should_play and current == step:
+                with self._state_lock:
+                    setattr(self, flag_attr, False)
+                time.sleep(delay)
+                print(f"Auto-playing {description}...")
+                threading.Thread(target=target_func, args=args, daemon=True).start()
+                return True
+            return False
+        # Main loop
+        while not stop_event.is_set():
+            # Check and execute auto-play actions (one per iteration)
+            check_auto_play('_auto_play_movement', 2, 0.5, self._play_test_movement, (reachy_mini,), "test movement") or \
+            check_auto_play('_auto_play_emotion', 3, 0.5, self._play_emotion, (reachy_mini, "success2"), "happy emotion") or \
+            check_auto_play('_auto_play_curious', 4, 1.0, self._play_emotion, (reachy_mini, "curious1"), "curious emotion") or \
+            check_auto_play('_auto_play_enthusiastic', 5, 0.5, self._play_emotion, (reachy_mini, "enthusiastic1"), "enthusiastic emotion")
+            # Capture camera frames only during step 4
+            with self._state_lock:
+                current = self._current_step
+            if current == 4:
+                frame = reachy_mini.media.get_frame()
+                if frame is not None:
+                    with self._state_lock:
+                        self._last_frame = cv2.resize(frame, (640, 480))
+            time.sleep(1.0 / self.MAIN_LOOP_FREQUENCY)
+        # Cleanup
+        self._stop_audio_input()
+    # ========== Audio Input ==========
+    def _start_audio_input(self):
+        """Start continuous audio monitoring"""
+        try:
+            import sounddevice as sd
+        except ImportError:
+            print("sounddevice not available - audio monitoring disabled")
+            return
+        def audio_callback(indata, frames, time_info, status):
+            if status:
+                print(f"Audio status: {status}")
+            rms = np.sqrt(np.mean(indata**2))
+            audio_level = float(rms * 100)  # Scale to 0-100
+            with self._state_lock:
+                self._audio_level = audio_level
+                # Touch detection logic (only during step 1)
+                if self._current_step == 1 and not self._touch_detected:
+                    current_time = time.time()
+                    if audio_level > self.TOUCH_THRESHOLD:
+                        # High audio level - touching/rubbing
+                        if self._last_audio_check is not None:
+                            # Accumulate the time since last check
+                            delta = current_time - self._last_audio_check
+                            self._touch_accumulated_time += delta
+                            # Check if accumulated time reaches required duration
+                            if self._touch_accumulated_time >= self.TOUCH_DURATION_REQUIRED:
+                                self._touch_detected = True
+                                print("Touch detected! Auto-advancing to step 2")
+                                # Auto-advance to step 2
+                                self._current_step = 2
+                                self._auto_play_movement = True
+                        if self._touch_start_time is None:
+                            self._touch_start_time = current_time
+                        self._last_audio_check = current_time
+                    else:
+                        # Audio level dropped
+                        if self._last_audio_check is not None:
+                            # Check if break is within grace period
+                            break_duration = current_time - self._last_audio_check
+                            if break_duration > self.TOUCH_GRACE_PERIOD:
+                                # Break too long - reset progress
+                                self._touch_start_time = None
+                                self._touch_accumulated_time = 0.0
+                                self._last_audio_check = None
+        try:
+            self._audio_stream = sd.InputStream(
+                samplerate=44100,
+                channels=1,
+                dtype='float32',
+                callback=audio_callback
+            )
+            self._audio_stream.start()
+            print("Audio monitoring started")
+        except Exception as e:
+            print(f"Failed to start audio monitoring: {e}")
+    def _stop_audio_input(self):
+        if self._audio_stream:
+            try:
+                self._audio_stream.stop()
+                self._audio_stream.close()
+                print("Audio monitoring stopped")
+            except Exception as e:
+                print(f"Error stopping audio: {e}")
+    def _get_current_volume(self) -> float:
+        """Read current system volume (same method as dashboard)"""
+        try:
+            import subprocess
+            import re
+            card_name = "Audio"  # Reachy Mini Audio card
+            # Get current volume using amixer
+            result = subprocess.run(
+                ["amixer", "-c", card_name, "sget", "PCM"],
+                capture_output=True,
+                text=True,
+                timeout=2
+            )
+            if result.returncode == 0:
+                # Parse output to extract volume percentage
+                # Example: [75%] [on]
+                match = re.search(r'\[(\d+)%\]', result.stdout)
+                if match:
+                    volume_percent = int(match.group(1))
+                    volume = volume_percent / 100.0
+                    print(f"Current system volume: {volume_percent}%")
+                    return volume
+        except Exception as e:
+            print(f"Failed to read system volume: {e}")
+        # Default to 50% if we can't read
+        print("Using default volume: 50%")
+        return 0.5
+    # ========== Motor Movement ==========
+    def _play_test_movement(self, reachy_mini):
+        """Play movement from moves/test_movement.json"""
+        with self._state_lock:
+            if self._movement_busy:
+                return  # Already busy
+            self._movement_busy = True
+            self._cancel_movement.clear()
+            is_first = self._is_first_movement
+            is_sleeping = self._is_sleeping
+        try:
+            # Only go to sleep if:
+            # - This is NOT the first movement (auto-play)
+            # - Robot is NOT already in sleep position (after stop)
+            if not is_first and not is_sleeping:
+                print("Going to sleep before replay...")
+                reachy_mini.goto_sleep()
+                with self._state_lock:
+                    self._is_sleeping = True
+                time.sleep(0.3)  # Brief pause after reaching sleep position
+                print("Sleep position reached, starting movement...")
+            elif is_first:
+                print("First movement play, starting directly...")
+            else:
+                print("Already in sleep position, starting movement...")
+            # Mark that first movement has been played
+            with self._state_lock:
+                self._is_first_movement = False
+            # Now set movement_playing to trigger video sync
+            with self._state_lock:
+                self._movement_playing = True
+            # Load movement
+            move_path = Path(__file__).parent / "moves" / "hello-world.json"
+            if not move_path.exists():
+                print(f"Movement file not found: {move_path}")
+                # Fallback: simple head movement
+                self._play_simple_movement(reachy_mini)
+            else:
+                move = self._load_move(move_path)
+                reachy_mini.enable_motors()
+                # Check for cancellation before playing
+                if self._cancel_movement.is_set():
+                    print("Movement cancelled before starting")
+                    return
+                # Use streaming playback instead of play_move to allow cancellation
+                cancelled = not self._stream_playback(reachy_mini, move)
+                if cancelled:
+                    print("Movement was cancelled, going to sleep...")
+                    # Stop robot at current position by going to sleep (blocking)
+                    reachy_mini.goto_sleep()
+                    with self._state_lock:
+                        self._is_sleeping = True
+                    print("Robot in sleep position")
+                else:
+                    # Movement completed successfully, return to neutral position
+                    print("Test movement completed, returning to neutral position...")
+                    reachy_mini.goto_target(
+                        head=create_head_pose(pitch=0.0, yaw=0.0, roll=0.0),
+                        antennas=[0, 0],
+                        duration=0.8
+                    )
+                    with self._state_lock:
+                        self._is_sleeping = False
+                    print("Robot in neutral position (motors still enabled)")
+        except Exception as e:
+            print(f"Failed to play movement: {e}")
+            # Fallback
+            try:
+                if not self._cancel_movement.is_set():
+                    self._play_simple_movement(reachy_mini)
+            except Exception as e2:
+                print(f"Fallback movement also failed: {e2}")
+        finally:
+            with self._state_lock:
+                self._movement_playing = False
+                self._movement_busy = False
+    def _stream_playback(self, reachy_mini, move: RecordedMove) -> bool:
+        """Stream movement playback with cancellation support (from marionette pattern)"""
+        try:
+            start_head_pose, start_antennas, start_body_yaw = move.evaluate(0.0)
+        except Exception:
+            return False
+        # Go to starting position
+        reachy_mini.goto_target(
+            head=start_head_pose,
+            antennas=list(start_antennas) if start_antennas is not None else None,
+            duration=0.8,
+        )
+        if start_body_yaw is not None:
+            reachy_mini.set_target_body_yaw(float(start_body_yaw))
+        playback_freq = 100.0
+        sleep_period = 1.0 / playback_freq
+        t0 = time.time()
+        while True:
+            if self._cancel_movement.is_set():
+                return False
+            elapsed = time.time() - t0
+            if elapsed >= move.duration:
+                break
+            t = min(max(elapsed, 0.0), max(move.duration - 1e-3, 0.0))
+            head, antennas, body_yaw = move.evaluate(t)
+            reachy_mini.set_target_head_pose(head)
+            if body_yaw is not None:
+                reachy_mini.set_target_body_yaw(float(body_yaw))
+            if antennas is not None:
+                reachy_mini.set_target_antenna_joint_positions(list(antennas))
+            remaining = move.duration - elapsed
+            wait_time = max(0.001, min(sleep_period, remaining))
+            if self._cancel_movement.wait(wait_time):
+                return False
+        return True
+    def _play_simple_movement(self, reachy_mini):
+        """Fallback: simple head movement sequence"""
+        print("Playing simple fallback movement")
+        reachy_mini.enable_motors()
+        try:
+            # Look up
+            if self._cancel_movement.is_set():
+                return
+            reachy_mini.goto_target(
+                head=create_head_pose(pitch=15, degrees=True),
+                antennas=[0, 0],
+                duration=1.0
+            )
+            time.sleep(1.0)
+            # Look left
+            if self._cancel_movement.is_set():
+                return
+            reachy_mini.goto_target(
+                head=create_head_pose(yaw=30, degrees=True),
+                antennas=[0, 0],
+                duration=1.0
+            )
+            time.sleep(1.0)
+            # Look right
+            if self._cancel_movement.is_set():
+                return
+            reachy_mini.goto_target(
+                head=create_head_pose(yaw=-30, degrees=True),
+                antennas=[0, 0],
+                duration=1.0
+            )
+            time.sleep(1.0)
+            # Center
+            if self._cancel_movement.is_set():
+                return
+            reachy_mini.goto_target(
+                head=create_head_pose(),
+                antennas=[0, 0],
+                duration=1.0
+            )
+            time.sleep(1.0)
+            # Keep motors enabled after movement
+        except Exception as e:
+            print(f"Error in simple movement: {e}")
+    def _load_move(self, json_path: Path) -> RecordedMove:
+        """Load a recorded movement from JSON file"""
+        move_data = json.loads(json_path.read_text(encoding='utf-8'))
+        return RecordedMove(move_data, sound_path=None)
+    # ========== Emotion Playback ==========
+    def _play_emotion(self, reachy_mini, emotion_name):
+        """Play an emotion from the library with sound"""
+        with self._state_lock:
+            is_first = self._is_first_emotion
+            is_sleeping = self._is_sleeping
+            self._emotion_playing = True
+        try:
+            # Check if robot is sleeping and wake it up if needed
+            if is_sleeping:
+                print(f"Robot is sleeping, waking up before playing {emotion_name}...")
+                reachy_mini.enable_motors()
+                reachy_mini.goto_target(
+                    head=create_head_pose(pitch=0.0, yaw=0.0, roll=0.0),
+                    duration=1.0
+                )
+                with self._state_lock:
+                    self._is_sleeping = False
+                time.sleep(0.3)
+                print(f"Robot awake, playing {emotion_name}...")
+            elif is_first:
+                print(f"First emotion play, starting {emotion_name} directly...")
+            else:
+                print(f"Playing {emotion_name}...")
+            # Mark that first emotion has been played
+            with self._state_lock:
+                self._is_first_emotion = False
+            # Use pre-loaded emotions (no wait time!)
+            if self._emotions is None:
+                print("Emotions not loaded, loading now...")
+                self._emotions = RecordedMoves("pollen-robotics/reachy-mini-emotions-library")
+            emotion_move = self._emotions.get(emotion_name)
+            reachy_mini.enable_motors()
+            reachy_mini.play_move(emotion_move, initial_goto_duration=0.8, sound=True)
+            # Return to neutral position after emotion
+            print(f"{emotion_name} completed, returning to neutral position...")
+            reachy_mini.goto_target(
+                head=create_head_pose(pitch=0.0, yaw=0.0, roll=0.0),
+                antennas=[0, 0],
+                duration=0.8
+            )
+            with self._state_lock:
+                self._is_sleeping = False
+            print("Robot in neutral position (motors still enabled)")
+        except Exception as e:
+            print(f"Failed to play {emotion_name}: {e}")
+            # Fallback: just play sound (only for happy/success2)
+            if emotion_name == "success2":
+                try:
+                    reachy_mini.media.play_sound("wake_up.wav")
+                    print("Played fallback sound")
+                except Exception as e2:
+                    print(f"Failed to play fallback sound: {e2}")
+        finally:
+            with self._state_lock:
+                self._emotion_playing = False
+    # ========== Camera Streaming ==========
+    def _frame_generator(self):
+        """MJPEG streaming generator"""
+        while True:
+            with self._state_lock:
+                frame = self._last_frame
+            if frame is None:
+                time.sleep(0.01)
+                continue
+            try:
+                ret, jpeg = cv2.imencode('.jpg', frame)
+                if not ret:
+                    time.sleep(0.01)
+                    continue
+                frame_bytes = jpeg.tobytes()
+                yield (
+                    b'--frame\r\n'
+                    b'Content-Type: image/jpeg\r\n\r\n' + frame_bytes + b'\r\n'
+                )
+            except Exception as e:
+                print(f"Frame encoding error: {e}")
+            time.sleep(0.05)  # ~20 FPS
+    # ========== FastAPI Routes ==========
+    def _register_routes(self):
+        @self.settings_app.get("/api/state")
+        def get_state():
+            return self._serialize_state()
+        @self.settings_app.get("/api/audio_level")
+        def get_audio_level():
+            """Fast endpoint for real-time audio visualization"""
+            with self._state_lock:
+                # Calculate touch progress (0.0 to 1.0) based on accumulated time
+                touch_progress = 0.0
+                if not self._touch_detected:
+                    touch_progress = min(self._touch_accumulated_time / self.TOUCH_DURATION_REQUIRED, 1.0)
+                return {
+                    "audio_level": self._audio_level,
+                    "touch_detected": self._touch_detected,
+                    "touch_progress": touch_progress
+                }
+        @self.settings_app.post("/api/validate_step")
+        def validate_step(payload: dict):
+            """User validates current step with works/doesn't work"""
+            step = payload.get("step")  # 1, 2, 3, or 4
+            works = payload.get("works")  # True or False
+            with self._state_lock:
+                if step == 1:
+                    self._current_step = 2
+                    # Reset touch detection for next time
+                    self._touch_detected = False
+                    self._touch_start_time = None
+                    self._touch_accumulated_time = 0.0
+                    self._last_audio_check = None
+                elif step == 2:
+                    self._current_step = 3
+                    # Auto-play emotion when entering step 3
+                    self._auto_play_emotion = True
+                elif step == 3:
+                    self._current_step = 4
+                    # Auto-play curious emotion after 1s on step 4
+                    self._auto_play_curious = True
+                elif step == 4:
+                    self._current_step = 5  # Done
+                    # Auto-play enthusiastic emotion on step 5
+                    self._auto_play_enthusiastic = True
+                next_step = self._current_step
+            return {"status": "ok", "next_step": next_step}
+        @self.settings_app.post("/api/play_movement")
+        def play_movement():
+            """Trigger motor test movement"""
+            if self._reachy_mini is None:
+                return {"status": "error", "message": "Robot not initialized"}
+            threading.Thread(
+                target=self._play_test_movement,
+                args=(self._reachy_mini,),
+                daemon=True
+            ).start()
+            return {"status": "playing"}
+        @self.settings_app.post("/api/stop_movement")
+        def stop_movement():
+            """Stop the current movement"""
+            if self._reachy_mini is None:
+                return {"status": "error", "message": "Robot not initialized"}
+            try:
+                # Signal the movement thread to stop
+                self._cancel_movement.set()
+                print("Movement cancellation requested")
+                return {"status": "stopping"}
+            except Exception as e:
+                print(f"Failed to stop movement: {e}")
+                return {"status": "error", "message": str(e)}
+        @self.settings_app.post("/api/play_happy")
+        def play_happy():
+            """Play happy emotion with sound"""
+            if self._reachy_mini is None:
+                return {"status": "error", "message": "Robot not initialized"}
+            threading.Thread(
+                target=self._play_emotion,
+                args=(self._reachy_mini, "success2"),
+                daemon=True
+            ).start()
+            return {"status": "playing"}
+        @self.settings_app.post("/api/set_volume")
+        def set_volume(payload: dict):
+            volume = payload.get("volume", 0.5)
+            with self._state_lock:
+                self._volume = max(0.0, min(1.0, float(volume)))
+            # Apply volume to system using amixer (same method as dashboard)
+            try:
+                import subprocess
+                volume_percent = int(self._volume * 100)
+                # Detect audio card (same as dashboard implementation)
+                card_name = "Audio"  # Default for Reachy Mini Audio
+                # Set volume using amixer with card name
+                subprocess.run(
+                    ["amixer", "-c", card_name, "sset", "PCM", f"{volume_percent}%"],
+                    check=False,
+                    capture_output=True,
+                    timeout=2
+                )
+                # Also set PCM,1 to 100% (dashboard quirk for compatibility)
+                subprocess.run(
+                    ["amixer", "-c", card_name, "sset", "PCM,1", "100%"],
+                    check=False,
+                    capture_output=True,
+                    timeout=2
+                )
+                print(f"Volume set to {volume_percent}%")
+            except Exception as e:
+                print(f"Failed to set system volume: {e}")
+            return {"volume": self._volume}
+        @self.settings_app.get("/video_feed")
+        def video_feed():
+            return StreamingResponse(
+                self._frame_generator(),
+                media_type="multipart/x-mixed-replace; boundary=frame"
+            )
+    def _serialize_state(self):
+        """Serialize current state for API"""
+        with self._state_lock:
+            return {
+                "current_step": self._current_step,
+                "is_sleeping": self._is_sleeping,
+                "audio_level": self._audio_level,
+                "volume": self._volume,
+                "movement_playing": self._movement_playing,
+                "movement_busy": self._movement_busy,
+                "is_first_emotion": self._is_first_emotion,
+                "emotion_playing": self._emotion_playing,
+            }
+if __name__ == "__main__":
+    app = WakeMeUp()
+    try:
+        app.wrapped_run()
+    except KeyboardInterrupt:
+        app.stop()

wake_me_up/moves/hello-world.json ADDED Viewed

The diff for this file is too large to render. See raw diff

wake_me_up/static/assets/.gitkeep ADDED Viewed

File without changes

wake_me_up/static/index.html ADDED Viewed

	@@ -0,0 +1,142 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Reachy Mini Diagnostic</title>
+    <link rel="stylesheet" href="/static/style.css">
+</head>
+<body>
+    <header class="header">
+        <h1>First Steps with Reachy Mini</h1>
+    </header>
+    <main class="container">
+        <!-- Step 0: Scanning Motors -->
+        <section id="step-0" class="step-screen active">
+            <div class="card">
+                <h2>Initializing Reachy Mini</h2>
+                <p class="instruction">Scanning motors and setting sleeping pose...</p>
+                <div class="loading-spinner">
+                    <div class="spinner"></div>
+                </div>
+            </div>
+        </section>
+        <!-- Step 1: Audio Input Test -->
+        <section id="step-1" class="step-screen">
+            <div class="card">
+                <div class="title-with-icon">
+                    <img src="/static/assets/sleeping-reachy.svg" alt="Sleeping Reachy" class="sleeping-reachy-icon">
+                    <h2>Time to Wake Up!</h2>
+                </div>
+                <video class="demo-video" autoplay loop muted playsinline>
+                    <source src="/static/assets/touch_demo.mp4" type="video/mp4">
+                    <p style="color: #999;">Demo video not available</p>
+                </video>
+                <p class="instruction">Wake up Reachy Mini</p>
+                <div class="touch-progress-container">
+                    <div class="touch-progress-bar" id="touch-progress-bar"></div>
+                </div>
+                <div class="waveform-container" id="waveform"></div>
+                <div class="button-group">
+                    <a href="https://huggingface.co/docs/reachy_mini/troubleshooting" target="_blank" class="btn-fail">Sound doesn't work </a>
+                </div>
+                <div class="step-indicator" id="step-indicator">Step <span id="current-step">1</span> of 4</div>
+            </div>
+        </section>
+        <!-- Step 2: Motor Test -->
+        <section id="step-2" class="step-screen">
+            <div class="card">
+                <div class="title-with-icon">
+                    <img src="/static/assets/reachy-mini.png" alt="Reachy Mini" class="reachy-mini-icon">
+                    <h2>Stretch Time!</h2>
+                </div>
+                <video class="demo-video" muted playsinline preload="auto">
+                    <source src="/static/assets/movement_demo.mp4" type="video/mp4">
+                    <p style="color: #999;">Demo video not available</p>
+                </video>
+                <p class="instruction">Watch the robot perform the movement</p>
+                <button class="btn-text" id="btn-play-movement" onclick="playMovement()">
+                    Replay Movement
+                </button>
+                <div class="button-group" id="motor-validate" style="display: none;">
+                    <a href="https://huggingface.co/docs/reachy_mini/troubleshooting" target="_blank" class="btn-fail">Robot didn't move correctly </a>
+                    <button class="btn-success" onclick="validateStep(2, true)">Robot did the same </button>
+                </div>
+                <div class="step-indicator">Step 2 of 4</div>
+            </div>
+        </section>
+        <!-- Step 3: Audio Output Test -->
+        <section id="step-3" class="step-screen">
+            <div class="card">
+                <div class="title-with-icon">
+                    <img src="/static/assets/reachy-mini-sav.png" alt="Reachy Mini" class="reachy-mini-icon">
+                    <h2>Can You Hear Me?</h2>
+                </div>
+                <p class="instruction">Listen to the robot's happy sound</p>
+                <div class="volume-control">
+                    <label for="volume-slider">Volume</label>
+                    <input type="range" id="volume-slider" min="0" max="100" value="50">
+                    <span id="volume-value">50%</span>
+                </div>
+                <button class="btn-text" id="btn-play-sound" onclick="playHappy()">Play Sound</button>
+                <div class="button-group">
+                    <a href="https://huggingface.co/docs/reachy_mini/troubleshooting" target="_blank" class="btn-fail">No sound </a>
+                    <button class="btn-success" onclick="validateStep(3, true)">I hear the sound </button>
+                </div>
+                <div class="step-indicator">Step 3 of 4</div>
+            </div>
+        </section>
+        <!-- Step 4: Camera Test -->
+        <section id="step-4" class="step-screen">
+            <div class="card">
+                <div class="title-with-icon">
+                    <img src="/static/assets/reachy-mini-explorer.png" alt="Reachy Mini" class="reachy-mini-icon explorer-icon">
+                    <h2>Let's Look Around!</h2>
+                </div>
+                <p class="instruction">Check if you can see the camera feed</p>
+                <div class="camera-container">
+                    <img id="camera-feed" src="/video_feed" alt="Camera feed">
+                </div>
+                <div class="button-group">
+                    <a href="https://huggingface.co/docs/reachy_mini/troubleshooting" target="_blank" class="btn-fail">Camera doesn't work </a>
+                    <button class="btn-success" onclick="validateStep(4, true)">Camera works </button>
+                </div>
+                <div class="step-indicator">Step 4 of 4</div>
+            </div>
+        </section>
+        <!-- Step 5: Summary -->
+        <section id="step-5" class="step-screen">
+            <div class="card">
+                <div class="title-with-icon">
+                    <img src="/static/assets/reachy-mini-party.png" alt="Reachy Mini" class="reachy-mini-icon">
+                    <h2>We're Ready to Play!</h2>
+                </div>
+                <p class="instruction" style="font-size: 18px; margin: 30px 0;">Everything is working correctly</p>
+            </div>
+        </section>
+    </main>
+    <script src="/static/main.js"></script>
+</body>
+</html>

wake_me_up/static/main.js ADDED Viewed

	@@ -0,0 +1,328 @@

+let waveformBars = [];
+let audioPollingInterval = null;
+let wasMovementPlaying = false;
+let lastStep = null;
+// Initialize
+document.addEventListener('DOMContentLoaded', () => {
+    initWaveform();
+    startPolling();
+    setupVolumeSlider();
+});
+// Create waveform bars
+function initWaveform() {
+    const container = document.getElementById('waveform');
+    if (!container) return;
+    const barCount = 50;
+    for (let i = 0; i < barCount; i++) {
+        const bar = document.createElement('div');
+        bar.className = 'waveform-bar';
+        bar.style.height = '4px';
+        container.appendChild(bar);
+        waveformBars.push(bar);
+    }
+}
+// State polling
+async function fetchState() {
+    try {
+        const resp = await fetch('/api/state', { cache: 'no-store' });
+        const state = await resp.json();
+        updateUI(state);
+    } catch (err) {
+        console.error('State fetch failed:', err);
+    }
+}
+function startPolling() {
+    fetchState();
+    setInterval(fetchState, 500);
+}
+// Fast audio polling for live waveform
+async function fetchAudioLevel() {
+    try {
+        const resp = await fetch('/api/audio_level', { cache: 'no-store' });
+        const data = await resp.json();
+        updateWaveform(data.audio_level);
+        updateTouchDetection(data.touch_progress, data.touch_detected);
+    } catch (err) {
+        console.error('Audio fetch failed:', err);
+    }
+}
+function updateTouchDetection(progress, detected) {
+    const progressBar = document.getElementById('touch-progress-bar');
+    if (!progressBar) return;
+    if (detected) {
+        progressBar.style.width = '100%';
+    } else {
+        progressBar.style.width = (progress * 100) + '%';
+    }
+}
+function startAudioPolling() {
+    if (audioPollingInterval) return; // Already running
+    fetchAudioLevel(); // Immediate first fetch
+    audioPollingInterval = setInterval(fetchAudioLevel, 100); // 10 Hz
+}
+function stopAudioPolling() {
+    if (audioPollingInterval) {
+        clearInterval(audioPollingInterval);
+        audioPollingInterval = null;
+    }
+}
+// Helper function to toggle button states
+function setButtonsDisabled(selector, disabled) {
+    const buttons = document.querySelectorAll(selector);
+    buttons.forEach(button => {
+        button.disabled = disabled;
+        button.style.opacity = disabled ? '0.5' : '1';
+        button.style.cursor = disabled ? 'not-allowed' : 'pointer';
+    });
+}
+// UI Updates
+function updateUI(state) {
+    // Update current step number in step 1 indicator
+    const currentStepSpan = document.getElementById('current-step');
+    if (currentStepSpan) {
+        currentStepSpan.textContent = state.current_step;
+    }
+    document.querySelectorAll('.step-screen').forEach(s => s.classList.remove('active'));
+    document.getElementById('step-' + state.current_step).classList.add('active');
+    // Start/stop fast audio polling based on step
+    if (state.current_step === 1) {
+        startAudioPolling();
+    } else {
+        stopAudioPolling();
+    }
+    if (state.current_step === 2) {
+        const btn = document.getElementById('btn-play-movement');
+        const validateDiv = document.getElementById('motor-validate');
+        const validateButtons = document.querySelectorAll('#motor-validate button');
+        const video = document.querySelector('#step-2 .demo-video');
+        // Detect when movement starts playing (transition from false to true)
+        if (state.movement_playing && !wasMovementPlaying) {
+            // Movement just started - sync video
+            if (video) {
+                video.currentTime = 0;
+                setTimeout(() => {
+                    video.play().catch(err => console.log('Video play failed:', err));
+                }, 600);
+            }
+        }
+        // Use movement_busy for button state (covers entire process including sleep)
+        if (!state.movement_busy) {
+            // Process finished, reset button and enable validation
+            if (btn) {
+                btn.dataset.playing = 'false';
+                btn.textContent = 'Replay Movement';
+                btn.disabled = false;
+                // Switch back to text link style
+                btn.classList.remove('btn-primary');
+                btn.classList.add('btn-text');
+            }
+            if (validateDiv) validateDiv.style.display = 'flex';
+            // Enable validation buttons
+            validateButtons.forEach(b => b.disabled = false);
+        } else {
+            // Process is busy (sleeping or playing)
+            if (btn) {
+                btn.dataset.playing = 'true';
+                btn.textContent = 'Stop';
+                btn.disabled = false;
+                // Switch to solid button style
+                btn.classList.remove('btn-text');
+                btn.classList.add('btn-primary');
+            }
+            // Disable validation buttons
+            validateButtons.forEach(b => b.disabled = true);
+        }
+        wasMovementPlaying = state.movement_playing;
+    }
+    if (state.current_step === 3) {
+        // Update button text based on whether emotion has been played
+        const btn = document.getElementById('btn-play-sound');
+        if (btn && !state.is_first_emotion) {
+            btn.textContent = 'Replay Sound';
+        }
+        // Update volume slider to match current system volume
+        const slider = document.getElementById('volume-slider');
+        const volumeValue = document.getElementById('volume-value');
+        if (slider && volumeValue) {
+            const volumePercent = Math.round(state.volume * 100);
+            slider.value = volumePercent;
+            volumeValue.textContent = volumePercent + '%';
+        }
+        // Disable validation buttons while emotion is playing
+        setButtonsDisabled('#step-3 .button-group button, #step-3 .button-group a', state.emotion_playing);
+    }
+    if (state.current_step === 4 && lastStep !== 4) {
+        // Reload camera feed only once when entering step 4 to prevent frozen image
+        const cameraFeed = document.getElementById('camera-feed');
+        if (cameraFeed) {
+            // Force reload by adding timestamp to prevent caching
+            const timestamp = new Date().getTime();
+            cameraFeed.src = '/video_feed?' + timestamp;
+            // Remove any previous animation class and reset style
+            cameraFeed.classList.remove('camera-wake-up');
+            cameraFeed.style.clipPath = '';
+            // Add eye-opening animation
+            cameraFeed.classList.add('camera-wake-up');
+            // After animations complete, maintain eye shape (ellipse)
+            setTimeout(() => {
+                cameraFeed.classList.remove('camera-wake-up');
+                cameraFeed.style.clipPath = 'ellipse(100% 50% at 50% 50%)';
+            }, 2700);
+        }
+    }
+    if (state.current_step === 4) {
+        // Disable validation buttons while curious emotion is playing
+        setButtonsDisabled('#step-4 .button-group button, #step-4 .button-group a', state.emotion_playing);
+    }
+    lastStep = state.current_step;
+}
+async function validateStep(step, works) {
+    try {
+        await fetch('/api/validate_step', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ step, works })
+        });
+        await fetchState();
+    } catch (err) {
+        console.error('Validation failed:', err);
+        alert('Failed to validate step');
+    }
+}
+async function playMovement() {
+    try {
+        const btn = document.getElementById('btn-play-movement');
+        // If currently playing, stop it
+        if (btn.dataset.playing === 'true') {
+            await stopMovement();
+            return;
+        }
+        btn.dataset.playing = 'true';
+        btn.textContent = 'Stop';
+        // Switch to solid button for Stop action
+        btn.classList.remove('btn-text');
+        btn.classList.add('btn-primary');
+        // Find the video element and pause it at frame 0
+        const video = document.querySelector('#step-2 .demo-video');
+        if (video) {
+            // Pause video and reset to start - keep it paused during sleep phase
+            video.pause();
+            video.currentTime = 0;
+        }
+        // Start the robot movement (video will auto-start when movement_playing becomes true)
+        await fetch('/api/play_movement', { method: 'POST' });
+    } catch (err) {
+        console.error('Play movement failed:', err);
+        alert('Failed to play movement');
+    }
+}
+async function stopMovement() {
+    try {
+        // Disable the button immediately to show it's processing
+        const btn = document.getElementById('btn-play-movement');
+        if (btn) {
+            btn.disabled = true;
+        }
+        // Stop the video
+        const video = document.querySelector('#step-2 .demo-video');
+        if (video) {
+            video.pause();
+            video.currentTime = 0;
+        }
+        // Call stop API (backend will handle stopping the robot)
+        await fetch('/api/stop_movement', { method: 'POST' });
+        // Don't reset button state here - let the polling update it
+        // when movement_busy becomes false (after robot goes to sleep)
+    } catch (err) {
+        console.error('Stop movement failed:', err);
+    }
+}
+async function playHappy() {
+    try {
+        await fetch('/api/play_happy', { method: 'POST' });
+    } catch (err) {
+        console.error('Play happy failed:', err);
+        alert('Failed to play sound');
+    }
+}
+// Update waveform visualization
+function updateWaveform(audioLevel) {
+    if (waveformBars.length === 0) return;
+    const maxHeight = 120;
+    const minHeight = 4;
+    const baseLevel = Math.min(audioLevel / 100, 1);
+    waveformBars.forEach((bar, index) => {
+        const position = index / waveformBars.length;
+        const centerDistance = Math.abs(position - 0.5) * 2;
+        const envelope = 1 - Math.pow(centerDistance, 2);
+        const randomness = Math.random() * 0.4 + 0.8;
+        const height = minHeight + (maxHeight - minHeight) * baseLevel * envelope * randomness;
+        bar.style.height = height + 'px';
+    });
+}
+function setupVolumeSlider() {
+    const slider = document.getElementById('volume-slider');
+    if (!slider) return;
+    slider.addEventListener('input', async (e) => {
+        const value = parseInt(e.target.value);
+        document.getElementById('volume-value').textContent = value + '%';
+        try {
+            await fetch('/api/set_volume', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ volume: value / 100 })
+            });
+        } catch (err) {
+            console.error('Set volume failed:', err);
+        }
+    });
+}

wake_me_up/static/style.css ADDED Viewed

	@@ -0,0 +1,397 @@

+body {
+    margin: 0;
+    padding: 0;
+    min-height: 100vh;
+    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+    color: #1e293b;
+    /* Clean light background */
+    background: #e5e7eb;
+}
+.header {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 8px;
+    padding: 32px 0 24px;
+    margin-bottom: 8px;
+}
+.header h1 {
+    font-size: 36px;
+    font-weight: 600;
+    letter-spacing: -0.3px;
+    margin: 0;
+    color: #0f172a;
+}
+.step-indicator {
+    position: absolute;
+    bottom: 20px;
+    left: 20px;
+    font-size: 13px;
+    font-weight: 500;
+    color: #64748b;
+    background: transparent;
+    padding: 0;
+    border-radius: 0;
+}
+.container {
+    max-width: 900px;
+    margin: 0 auto;
+    padding: 20px;
+}
+.card {
+    background: #FFFFFF;
+    padding: 40px;
+    border-radius: 12px;
+    /* Material-UI elevation-2 inspired shadow */
+    box-shadow:
+        0px 2px 4px rgba(0, 0, 0, 0.06),
+        0px 4px 6px rgba(0, 0, 0, 0.1);
+    margin-bottom: 24px;
+    text-align: center;
+    position: relative;
+    border: 1px solid #e2e8f0;
+}
+.step-screen {
+    display: none;
+}
+.step-screen.active {
+    display: block;
+}
+.card h2 {
+    margin: 0 0 8px 0;
+    font-size: 28px;
+    font-weight: 600;
+    color: #0f172a;
+    letter-spacing: -0.2px;
+}
+.instruction {
+    font-size: 15px;
+    color: #64748b;
+    margin: 8px 0 28px;
+    line-height: 1.6;
+}
+.demo-video {
+    width: 100%;
+    max-width: 600px;
+    height: auto;
+    object-fit: contain;
+    border-radius: 12px;
+    margin: 20px 0;
+    background: #000;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+}
+/* Crop movement video in height */
+#step-2 .demo-video {
+    max-height: 400px;
+    object-fit: cover;
+}
+/* Touch Detection Progress */
+.touch-progress-container {
+    width: 100%;
+    max-width: 400px;
+    height: 8px;
+    background: #e2e8f0;
+    border-radius: 4px;
+    overflow: hidden;
+    margin: 20px auto;
+}
+.touch-progress-bar {
+    height: 100%;
+    width: 0%;
+    background: linear-gradient(90deg, #FFC107, #FF9900);
+    border-radius: 4px;
+    transition: width 0.1s linear;
+}
+/* Waveform */
+.waveform-container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 3px;
+    height: 120px;
+    margin: 28px 0;
+    padding: 24px;
+    background: #f8fafc;
+    border-radius: 10px;
+    border: 1px solid #e2e8f0;
+}
+.waveform-bar {
+    flex: 1;
+    background: #FF9900;
+    border-radius: 3px;
+    transition: height 0.1s ease;
+    min-height: 4px;
+    max-width: 8px;
+}
+/* Volume Control */
+.volume-control {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+    justify-content: center;
+    margin: 28px 0;
+    padding: 20px 24px;
+    background: #f8fafc;
+    border-radius: 10px;
+    border: 1px solid #e2e8f0;
+}
+.volume-control label {
+    font-weight: 500;
+    color: #475569;
+    font-size: 14px;
+}
+#volume-slider {
+    flex: 1;
+    max-width: 400px;
+    height: 4px;
+    border-radius: 2px;
+    background: #cbd5e1;
+    outline: none;
+    -webkit-appearance: none;
+}
+#volume-slider::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    appearance: none;
+    width: 16px;
+    height: 16px;
+    border-radius: 50%;
+    background: #FF9900;
+    cursor: pointer;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+}
+#volume-slider::-moz-range-thumb {
+    width: 16px;
+    height: 16px;
+    border-radius: 50%;
+    background: #FF9900;
+    cursor: pointer;
+    border: none;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+}
+#volume-value {
+    font-weight: 600;
+    color: #475569;
+    min-width: 45px;
+    font-size: 14px;
+}
+/* Title with icon layout */
+.title-with-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 16px;
+    margin-bottom: 20px;
+}
+.title-with-icon h2 {
+    font-size: 28px;
+    margin: 0;
+}
+/* Reachy icons */
+.sleeping-reachy-icon,
+.reachy-mini-icon {
+    width: 100px;
+    height: auto;
+}
+/* Explorer icon is bigger */
+.explorer-icon {
+    width: 130px;
+    height: auto;
+}
+/* Camera Feed */
+.camera-container {
+    margin: 20px 0;
+}
+#camera-feed {
+    width: 100%;
+    max-width: 640px;
+    border-radius: 12px;
+    background: #000;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+}
+/* Buttons */
+.button-group {
+    display: flex;
+    gap: 16px;
+    justify-content: center;
+    align-items: center;
+    margin: 30px 0 0;
+    flex-wrap: wrap;
+}
+.btn-primary,
+.btn-success,
+.btn-fail {
+    padding: 12px 24px;
+    border-radius: 8px;
+    font-size: 14px;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    border: none;
+}
+/* Orange buttons (primary actions and validation) */
+.btn-primary,
+.btn-success {
+    background: linear-gradient(135deg, #FF9900, #FFB333);
+    color: white;
+}
+.btn-primary:hover:not(:disabled),
+.btn-success:hover:not(:disabled) {
+    background: linear-gradient(135deg, #FFB333, #FFCC66);
+    transform: translateY(-1px);
+    box-shadow: 0 4px 8px rgba(255, 153, 0, 0.3);
+}
+/* Text link style for "doesn't work" */
+.btn-fail {
+    background: transparent;
+    color: #64748b;
+    border: none;
+    padding: 8px 12px;
+    font-size: 14px;
+    text-decoration: underline;
+}
+.btn-fail:hover:not(:disabled) {
+    color: #FF9900;
+}
+/* Text link style for secondary actions */
+.btn-text {
+    background: transparent;
+    color: #FF9900;
+    border: none;
+    padding: 8px 12px;
+    font-size: 14px;
+    font-weight: 500;
+    cursor: pointer;
+    text-decoration: none;
+    transition: all 0.2s ease;
+}
+.btn-text:hover:not(:disabled) {
+    color: #FFB333;
+    text-decoration: underline;
+}
+.btn-primary:disabled,
+.btn-success:disabled,
+.btn-text:disabled {
+    background: #f3f4f6;
+    color: #9ca3af;
+    cursor: not-allowed;
+    opacity: 0.6;
+}
+/* Summary */
+.summary-list {
+    list-style: none;
+    padding: 0;
+    text-align: left;
+    max-width: 400px;
+    margin: 30px auto;
+    font-size: 16px;
+}
+.summary-list li {
+    padding: 14px 18px;
+    margin: 10px 0;
+    border-radius: 10px;
+    font-weight: 500;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+.summary-list li.pass {
+    background: #d1fae5;
+    color: #065f46;
+}
+.summary-list li.fail {
+    background: #fee2e2;
+    color: #991b1b;
+}
+/* Loading Spinner */
+.loading-spinner {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 200px;
+}
+.spinner {
+    width: 48px;
+    height: 48px;
+    border: 4px solid rgba(255, 153, 0, 0.2);
+    border-top-color: #FF9900;
+    border-radius: 50%;
+    animation: spin 1s linear infinite;
+}
+@keyframes spin {
+    to {
+        transform: rotate(360deg);
+    }
+}
+/* Camera eyes blinking animation */
+/* Camera eye-opening animation */
+@keyframes eye-open {
+    0% {
+        clip-path: ellipse(100% 0% at 50% 50%);
+    }
+    100% {
+        clip-path: ellipse(100% 50% at 50% 50%);
+    }
+}
+@keyframes eye-blink {
+    0%, 100% {
+        clip-path: ellipse(100% 50% at 50% 50%);
+    }
+    50% {
+        clip-path: ellipse(100% 5% at 50% 50%);
+    }
+}
+.camera-wake-up {
+    animation:
+        eye-open 1s ease-out forwards,
+        eye-blink 0.25s ease-in-out 1.2s,
+        eye-blink 0.25s ease-in-out 1.5s,
+        eye-blink 0.3s ease-in-out 2.3s;
+    animation-fill-mode: forwards;
+}