Spaces:

cdeplanne
/

reachy_mini_controller

Running

App Files Files Community

drenayaz commited on Dec 9, 2025

Commit

7e89a64

0 Parent(s):

Initial commit

Browse files

Files changed (13) hide show

.gitignore +2 -0
README.md +11 -0
index.html +235 -0
pyproject.toml +29 -0
reachy_mini_controller/__init__.py +0 -0
reachy_mini_controller/key_bindings.json +33 -0
reachy_mini_controller/key_bindings.py +50 -0
reachy_mini_controller/key_listener.py +25 -0
reachy_mini_controller/main.py +203 -0
reachy_mini_controller/static/index.html +43 -0
reachy_mini_controller/static/main.js +156 -0
reachy_mini_controller/static/style.css +80 -0
style.css +411 -0

.gitignore ADDED Viewed

	@@ -0,0 +1,2 @@


1	+ __pycache__/
2	+ *.egg-info/

README.md ADDED Viewed

	@@ -0,0 +1,11 @@

+---
+title: Reachy Mini Controller
+emoji: 👋
+colorFrom: red
+colorTo: blue
+sdk: static
+pinned: false
+short_description: Write your description here
+tags:
+ - reachy_mini
+---

index.html ADDED Viewed

	@@ -0,0 +1,235 @@

+<!doctype html>
+<html>
+<head>
+	<meta charset="utf-8" />
+	<meta name="viewport" content="width=device-width" />
+	<title> Reachy Mini Controller </title>
+	<link rel="stylesheet" href="style.css" />
+</head>
+<body>
+	<div class="hero">
+		<div class="hero-content">
+			<div class="app-icon">🤖⚡</div>
+			<h1> Reachy Mini Controller </h1>
+			<p class="tagline">Enter your tagline here</p>
+		</div>
+	</div>
+	<div class="container">
+		<div class="main-card">
+			<div class="app-preview">
+				<div class="preview-image">
+					<div class="camera-feed">🛠️</div>
+				</div>
+			</div>
+		</div>
+	</div>
+	<div class="download-section">
+		<div class="download-card">
+			<h2>Install This App</h2>
+			<div class="dashboard-config">
+				<label for="dashboardUrl">Your Reachy Dashboard URL:</label>
+				<input type="url" id="dashboardUrl" value="http://localhost:8000"
+					placeholder="http://your-reachy-ip:8000" />
+			</div>
+			<button id="installBtn" class="install-btn primary">
+				<span class="btn-icon">📥</span>
+				Install Reachy Mini Controller to Reachy Mini
+			</button>
+			<div id="installStatus" class="install-status"></div>
+		</div>
+	</div>
+	<div class="footer">
+		<p>
+			🤖 Reachy Mini Controller •
+			<a href="https://github.com/pollen-robotics" target="_blank">Pollen Robotics</a> •
+			<a href="https://huggingface.co/spaces/pollen-robotics/Reachy_Mini_Apps" target="_blank">Browse More
+				Apps</a>
+		</p>
+	</div>
+	</div>
+	<script>
+		// Get the current Hugging Face Space URL as the repository URL
+		function getCurrentSpaceUrl() {
+			// Get current page URL and convert to repository format
+			const currentUrl = window.location.href;
+			// Remove any trailing slashes and query parameters
+			const cleanUrl = currentUrl.split('?')[0].replace(/\/$/, '');
+			return cleanUrl;
+		}
+		// Parse TOML content to extract project name
+		function parseTomlProjectName(tomlContent) {
+			try {
+				const lines = tomlContent.split('\n');
+				let inProjectSection = false;
+				for (const line of lines) {
+					const trimmedLine = line.trim();
+					// Check if we're entering the [project] section
+					if (trimmedLine === '[project]') {
+						inProjectSection = true;
+						continue;
+					}
+					// Check if we're entering a different section
+					if (trimmedLine.startsWith('[') && trimmedLine !== '[project]') {
+						inProjectSection = false;
+						continue;
+					}
+					// If we're in the project section, look for the name field
+					if (inProjectSection && trimmedLine.startsWith('name')) {
+						const match = trimmedLine.match(/name\s*=\s*["']([^"']+)["']/);
+						if (match) {
+							// Convert to lowercase and replace invalid characters for app naming
+							return match[1].toLowerCase().replace(/[^a-z0-9-_]/g, '-');
+						}
+					}
+				}
+				throw new Error('Project name not found in pyproject.toml');
+			} catch (error) {
+				console.error('Error parsing pyproject.toml:', error);
+				return 'unknown-app';
+			}
+		}
+		// Fetch and parse pyproject.toml from the current space
+		async function getAppNameFromCurrentSpace() {
+			try {
+				// Fetch pyproject.toml from the current space
+				const response = await fetch('./pyproject.toml');
+				if (!response.ok) {
+					throw new Error(`Failed to fetch pyproject.toml: ${response.status}`);
+				}
+				const tomlContent = await response.text();
+				return parseTomlProjectName(tomlContent);
+			} catch (error) {
+				console.error('Error fetching app name from current space:', error);
+				// Fallback to extracting from URL if pyproject.toml is not accessible
+				const url = getCurrentSpaceUrl();
+				const parts = url.split('/');
+				const spaceName = parts[parts.length - 1];
+				return spaceName.toLowerCase().replace(/[^a-z0-9-_]/g, '-');
+			}
+		}
+		async function installToReachy() {
+			const dashboardUrl = document.getElementById('dashboardUrl').value.trim();
+			const statusDiv = document.getElementById('installStatus');
+			const installBtn = document.getElementById('installBtn');
+			if (!dashboardUrl) {
+				showStatus('error', 'Please enter your Reachy dashboard URL');
+				return;
+			}
+			try {
+				installBtn.disabled = true;
+				installBtn.innerHTML = '<span class="btn-icon">⏳</span>Installing...';
+				showStatus('loading', 'Connecting to your Reachy dashboard...');
+				// Test connection
+				const testResponse = await fetch(`${dashboardUrl}/api/status`, {
+					method: 'GET',
+					mode: 'cors',
+				});
+				if (!testResponse.ok) {
+					throw new Error('Cannot connect to dashboard. Make sure the URL is correct and the dashboard is running.');
+				}
+				showStatus('loading', 'Reading app configuration...');
+				// Get app name from pyproject.toml in current space
+				const appName = await getAppNameFromCurrentSpace();
+				// Get current space URL as repository URL
+				const repoUrl = getCurrentSpaceUrl();
+				showStatus('loading', `Starting installation of "${appName}"...`);
+				// Start installation
+				const installResponse = await fetch(`${dashboardUrl}/api/install`, {
+					method: 'POST',
+					mode: 'cors',
+					headers: {
+						'Content-Type': 'application/json',
+					},
+					body: JSON.stringify({
+						url: repoUrl,
+						name: appName
+					})
+				});
+				const result = await installResponse.json();
+				if (installResponse.ok) {
+					showStatus('success', `✅ Installation started for "${appName}"! Check your dashboard for progress.`);
+					setTimeout(() => {
+						showStatus('info', `Open your dashboard at ${dashboardUrl} to see the installed app.`);
+					}, 3000);
+				} else {
+					throw new Error(result.detail || 'Installation failed');
+				}
+			} catch (error) {
+				console.error('Installation error:', error);
+				showStatus('error', `❌ ${error.message}`);
+			} finally {
+				installBtn.disabled = false;
+				installBtn.innerHTML = '<span class="btn-icon">📥</span>Install App to Reachy';
+			}
+		}
+		function showStatus(type, message) {
+			const statusDiv = document.getElementById('installStatus');
+			statusDiv.className = `install-status ${type}`;
+			statusDiv.textContent = message;
+			statusDiv.style.display = 'block';
+		}
+		function copyToClipboard() {
+			const repoUrl = document.getElementById('repoUrl').textContent;
+			navigator.clipboard.writeText(repoUrl).then(() => {
+				showStatus('success', '📋 Repository URL copied to clipboard!');
+			}).catch(() => {
+				showStatus('error', 'Failed to copy URL. Please copy manually.');
+			});
+		}
+		// Update the displayed repository URL on page load
+		document.addEventListener('DOMContentLoaded', () => {
+			// Auto-detect local dashboard
+			const isLocalhost = window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1';
+			if (isLocalhost) {
+				document.getElementById('dashboardUrl').value = 'http://localhost:8000';
+			}
+			// Update the repository URL display if element exists
+			const repoUrlElement = document.getElementById('repoUrl');
+			if (repoUrlElement) {
+				repoUrlElement.textContent = getCurrentSpaceUrl();
+			}
+		});
+		// Event listeners
+		document.getElementById('installBtn').addEventListener('click', installToReachy);
+	</script>
+</body>
+</html>

pyproject.toml ADDED Viewed

	@@ -0,0 +1,29 @@

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

reachy_mini_controller/__init__.py ADDED Viewed

File without changes

reachy_mini_controller/key_bindings.json ADDED Viewed

	@@ -0,0 +1,33 @@

+{
+    "key_binding": {
+        "move_forward": "w",
+        "move_backward": "s",
+        "move_left": "a",
+        "move_right": "d",
+        "move_up": "q",
+        "move_down": "e",
+        "turn_yaw_clockwise": "u",
+        "turn_yaw_counterclockwise": "o",
+        "turn_pitch_clockwise": "i",
+        "turn_pitch_counterclockwise": "k",
+        "turn_roll_clockwise": "j",
+        "turn_roll_counterclockwise": "l",
+        "move_right_antenna_clockwise": "b",
+        "move_right_antenna_counterclockwise": "n",
+        "move_left_antenna_clockwise": "z",
+        "move_left_antenna_counterclockwise": "x",
+        "turn_body_yaw_clockwise": "c",
+        "turn_body_yaw_counterclockwise": "v"
+    },
+    "speed": {
+        "x_speed": 1.0,
+        "y_speed": 1.0,
+        "z_speed": 1.0,
+        "roll_speed": 1.0,
+        "pitch_speed": 1.0,
+        "yaw_speed": 1.0,
+        "left_antenna_speed": 1.0,
+        "right_antenna_speed": 0.9,
+        "body_speed": 1.0
+    }
+}

reachy_mini_controller/key_bindings.py ADDED Viewed

	@@ -0,0 +1,50 @@

+import json
+from pathlib import Path
+class KeyBindings:
+    def __init__(self, path: Path):
+        self.path = path
+        self.data = {}
+        self.load()
+    def load(self):
+        """Charge le JSON complet (touches + vitesses)."""
+        if not self.path.exists():
+            raise FileNotFoundError(f"Fichier {self.path} introuvable")
+        with open(self.path, "r") as f:
+            self.data = json.load(f)
+        self.data.setdefault("key_binding", {})
+        self.data.setdefault("speed", {})
+    def save(self):
+        """Sauvegarde tout (touches + vitesses)."""
+        with open(self.path, "w") as f:
+            json.dump(self.data, f, indent=4)
+    def get(self, action: str):
+        """Retourne la touche associée à une action."""
+        return self.data["key_binding"].get(action)
+    def set_key(self, action: str, key: str):
+        """Change une touche et sauvegarde."""
+        self.data["key_binding"][action] = key
+        self.save()
+    def get_all_keys(self):
+        """Retourne toutes les actions → touches."""
+        return self.data["key_binding"]
+    def get_speed(self, speed_name: str):
+        """Retourne une valeur de vitesse."""
+        return self.data["speed"].get(speed_name)
+    def set_speed(self, speed_name: str, value: float | int):
+        """Modifie une vitesse et sauvegarde."""
+        self.data["speed"][speed_name] = value
+        self.save()
+    def get_all_speed(self):
+        """Retourne toutes les vitesses."""
+        return self.data["speed"]

reachy_mini_controller/key_listener.py ADDED Viewed

	@@ -0,0 +1,25 @@

+from pynput import keyboard
+class KeyListener:
+    def __init__(self):
+        self.pressed = set()
+        self.listener = keyboard.Listener(
+            on_press=self.on_press,
+            on_release=self.on_release
+        )
+        self.listener.start()
+    def on_press(self, key):
+        try:
+            self.pressed.add(key.char)
+        except AttributeError:
+            pass
+    def on_release(self, key):
+        try:
+            self.pressed.discard(key.char)
+        except AttributeError:
+            pass
+    def is_pressed(self, key_char):
+        return key_char in self.pressed

reachy_mini_controller/main.py ADDED Viewed

	@@ -0,0 +1,203 @@

+import threading
+from reachy_mini import ReachyMini, ReachyMiniApp
+from reachy_mini.utils import create_head_pose
+import time
+from pydantic import BaseModel
+from reachy_mini_controller.key_bindings import KeyBindings
+from reachy_mini_controller.key_listener import KeyListener
+from pathlib import Path
+KEY_BINDINGS_FILE = Path(__file__).parent / "key_bindings.json"
+ROLL_DELTA = 1.0  # degrees
+PITCH_DELTA = 1.0  # degrees
+YAW_DELTA = 1.0  # degrees
+X_DELTA = 0.001  # meters
+Y_DELTA = 0.001  # meters
+Z_DELTA = 0.001  # meters
+BODY_YAW_DELTA = 0.05  # degrees
+RIGHT_ANTENNA_DELTA = 0.08  # degrees
+LEFT_ANTENNA_DELTA = 0.08  # degrees
+FREQUENCE = 100  # Hz
+class ReachyMiniController(ReachyMiniApp):
+    # Optional: URL to a custom configuration page for the app
+    # eg. "http://localhost:8042"
+    custom_app_url: str | None = "http://0.0.0.0:8042"
+    def run(self, reachy_mini: ReachyMini, stop_event: threading.Event):
+        kb = KeyBindings(KEY_BINDINGS_FILE)
+        keys = KeyListener()
+        class ChangeKeyRequest(BaseModel):
+            action: str
+            key: str
+        @self.settings_app.get("/get_key_bindings")
+        def get_key_bindings():
+            return kb.get_all_keys()
+        @self.settings_app.post("/change_key")
+        def change_key(req: ChangeKeyRequest):
+            kb.set_key(req.action, req.key)
+            return {"status": "ok"}
+        class ChangeSpeedRequest(BaseModel):
+            name: str
+            value: float
+        @self.settings_app.get("/get_speeds")
+        def get_speeds():
+            return kb.get_all_speed()
+        @self.settings_app.post("/change_speed")
+        def change_speed(req: ChangeSpeedRequest):
+            kb.set_speed(req.name, req.value)
+            return {"status": "ok"}
+        previous_pose = {
+            "roll": 0.0,
+            "pitch": 0.0,
+            "yaw": 0.0,
+            "x": 0.0,
+            "y": 0.0,
+            "z": 0.0,
+            "right_antenna": 0.0,
+            "left_antenna": 0.0,
+            "body_yaw": 0.0
+        }
+        head_pose = create_head_pose(
+            previous_pose["x"],
+            previous_pose["y"],
+            previous_pose["z"],
+            previous_pose["roll"],
+            previous_pose["pitch"],
+            previous_pose["yaw"]
+        )
+        reachy_mini.goto_target(
+            head=head_pose,
+            antennas=[previous_pose["right_antenna"], previous_pose["left_antenna"]],
+            body_yaw=previous_pose["body_yaw"],
+            duration=1.0
+        )
+        while not stop_event.is_set():
+            t0 = time.time()
+            new_poses = previous_pose.copy()
+            if keys.is_pressed(kb.get("move_forward")):
+                x_speed = kb.get_speed("x_speed")
+                new_poses["x"] += X_DELTA * x_speed
+                # print("move forward")
+            if keys.is_pressed(kb.get("move_backward")):
+                x_speed = kb.get_speed("x_speed")
+                new_poses["x"] -= X_DELTA * x_speed
+                # print("move backward")
+            if keys.is_pressed(kb.get("move_left")):
+                y_speed = kb.get_speed("y_speed")
+                new_poses["y"] += Y_DELTA * y_speed
+                # print("move left")
+            if keys.is_pressed(kb.get("move_right")):
+                y_speed = kb.get_speed("y_speed")
+                new_poses["y"] -= Y_DELTA * y_speed
+                # print("move right")
+            if keys.is_pressed(kb.get("move_up")):
+                z_speed = kb.get_speed("z_speed")
+                new_poses["z"] += Z_DELTA * z_speed
+                # print("move up")
+            if keys.is_pressed(kb.get("move_down")):
+                z_speed = kb.get_speed("z_speed")
+                new_poses["z"] -= Z_DELTA * z_speed
+                # print("move down")
+            if keys.is_pressed(kb.get("turn_yaw_clockwise")):
+                yaw_speed = kb.get_speed("yaw_speed")
+                new_poses["yaw"] -= YAW_DELTA * yaw_speed
+                # print("turn yaw clockwise")
+            if keys.is_pressed(kb.get("turn_yaw_counterclockwise")):
+                yaw_speed = kb.get_speed("yaw_speed")
+                new_poses["yaw"] += YAW_DELTA * yaw_speed
+                # print("turn yaw counterclockwise")
+            if keys.is_pressed(kb.get("turn_pitch_clockwise")):
+                pitch_speed = kb.get_speed("pitch_speed")
+                new_poses["pitch"] += PITCH_DELTA * pitch_speed
+                # print("turn pitch clockwise")
+            if keys.is_pressed(kb.get("turn_pitch_counterclockwise")):
+                pitch_speed = kb.get_speed("pitch_speed")
+                new_poses["pitch"] -= PITCH_DELTA * pitch_speed
+                # print("turn pitch counterclockwise")
+            if keys.is_pressed(kb.get("turn_roll_clockwise")):
+                roll_speed = kb.get_speed("roll_speed")
+                new_poses["roll"] += ROLL_DELTA * roll_speed
+                # print("turn roll clockwise")
+            if keys.is_pressed(kb.get("turn_roll_counterclockwise")):
+                roll_speed = kb.get_speed("roll_speed")
+                new_poses["roll"] -= ROLL_DELTA * roll_speed
+                # print("turn roll counterclockwise")
+            if keys.is_pressed(kb.get("move_right_antenna_clockwise")):
+                right_antenna_speed = kb.get_speed("right_antenna_speed")
+                new_poses["right_antenna"] -= RIGHT_ANTENNA_DELTA * right_antenna_speed
+                # print("move right antenna clockwise")
+            if keys.is_pressed(kb.get("move_right_antenna_counterclockwise")):
+                right_antenna_speed = kb.get_speed("right_antenna_speed")
+                new_poses["right_antenna"] += RIGHT_ANTENNA_DELTA * right_antenna_speed
+                # print("move right antenna counterclockwise")
+            if keys.is_pressed(kb.get("move_left_antenna_clockwise")):
+                left_antenna_speed = kb.get_speed("left_antenna_speed")
+                new_poses["left_antenna"] -= LEFT_ANTENNA_DELTA * left_antenna_speed
+                # print("move left antenna clockwise")
+            if keys.is_pressed(kb.get("move_left_antenna_counterclockwise")):
+                left_antenna_speed = kb.get_speed("left_antenna_speed")
+                new_poses["left_antenna"] += LEFT_ANTENNA_DELTA * left_antenna_speed
+                # print("move left antenna counterclockwise")
+            if keys.is_pressed(kb.get("turn_body_yaw_clockwise")):
+                body_speed = kb.get_speed("body_speed")
+                new_poses["body_yaw"] += BODY_YAW_DELTA * body_speed
+                # print("turn body yaw clockwise")
+            if keys.is_pressed(kb.get("turn_body_yaw_counterclockwise")):
+                body_speed = kb.get_speed("body_speed")
+                new_poses["body_yaw"] -= BODY_YAW_DELTA * body_speed
+                # print("turn body yaw counterclockwise")
+            head_pose = create_head_pose(
+                new_poses["x"],
+                new_poses["y"],
+                new_poses["z"],
+                new_poses["roll"],
+                new_poses["pitch"],
+                new_poses["yaw"],
+                degrees=True
+            )
+            reachy_mini.set_target(
+                head=head_pose,
+                antennas=[new_poses["right_antenna"], new_poses["left_antenna"]],
+                body_yaw=new_poses["body_yaw"],
+            )
+            previous_pose = new_poses
+            time.sleep(max(0, 1.0 / FREQUENCE - (time.time() - t0)))
+if __name__ == "__main__":
+    app = ReachyMiniController()
+    app.wrapped_run()

reachy_mini_controller/static/index.html ADDED Viewed

	@@ -0,0 +1,43 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Key Binding Config</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="/static/style.css">
+</head>
+<body>
+<div class="container">
+    <h1>Key Binding Configuration</h1>
+    <div id="status" class="status"></div>
+    <table>
+        <thead>
+            <tr>
+                <th>Action</th>
+                <th>Current Key</th>
+                <th>Change</th>
+            </tr>
+        </thead>
+        <tbody id="bindings-table"></tbody>
+    </table>
+    <hr>
+    <h2>Speed Settings</h2>
+    <div id="speed-container">
+    </div>
+</div>
+<script src="/static/main.js"></script>
+</body>
+</html>

reachy_mini_controller/static/main.js ADDED Viewed

	@@ -0,0 +1,156 @@

+let currentBindings = {};
+let currentSpeeds = {};
+let waitingForKey = null;
+async function loadBindings() {
+    try {
+        const resp = await fetch("/get_key_bindings");
+        currentBindings = await resp.json();
+        renderBindingsTable();
+    } catch (e) {
+        console.error(e);
+        document.getElementById("status").textContent =
+            "Error loading key bindings";
+    }
+}
+async function loadSpeeds() {
+    try {
+        const resp = await fetch("/get_speeds");
+        currentSpeeds = await resp.json();
+        renderSpeedSliders();
+    } catch (e) {
+        console.error(e);
+        document.getElementById("status").textContent =
+            "Error loading speeds";
+    }
+}
+function renderBindingsTable() {
+    const tbody = document.getElementById("bindings-table");
+    tbody.innerHTML = "";
+    for (const action in currentBindings) {
+        const key = currentBindings[action];
+        const row = document.createElement("tr");
+        row.innerHTML = `
+            <td>${action}</td>
+            <td id="current-${action}">${key}</td>
+            <td><button class="change-btn" onclick="startKeyChange('${action}')">Change</button></td>
+        `;
+        tbody.appendChild(row);
+    }
+}
+function renderSpeedSliders() {
+    const container = document.getElementById("speed-container");
+    container.innerHTML = "";
+    for (const speedName in currentSpeeds) {
+        const value = currentSpeeds[speedName];
+        const block = document.createElement("div");
+        block.className = "speed-block";
+        block.innerHTML = `
+            <label for="speed-${speedName}">
+                ${speedName} :
+                <span id="value-${speedName}">${value}</span>
+            </label>
+            <input
+                type="range"
+                min="0" max="3" step="0.1"
+                id="speed-${speedName}"
+                value="${value}"
+                oninput="updateSpeedValue('${speedName}', this.value)"
+                onchange="sendSpeedChange('${speedName}', this.value)"
+            >
+        `;
+        container.appendChild(block);
+    }
+}
+function updateSpeedValue(speedName, val) {
+    document.getElementById(`value-${speedName}`).textContent = val;
+}
+async function sendSpeedChange(name, value) {
+    try {
+        const resp = await fetch("/change_speed", {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({ name, value: parseFloat(value) }),
+        });
+        const data = await resp.json();
+        if (data.status === "ok") {
+            currentSpeeds[name] = value;
+            document.getElementById("status").textContent =
+                `✔ Speed "${name}" updated to ${value}`;
+        }
+    } catch (e) {
+        console.error(e);
+        document.getElementById("status").textContent = "Server error";
+    }
+}
+function startKeyChange(action) {
+    waitingForKey = action;
+    document.getElementById("status").textContent =
+        `Press a key to assign to "${action}"...`;
+    const td = document.getElementById(`current-${action}`);
+    td.textContent = "Press a key...";
+}
+document.addEventListener("keydown", async (event) => {
+    if (!waitingForKey) return;
+    const action = waitingForKey;
+    const newKey = event.key;
+    waitingForKey = null;
+    await changeKey(action, newKey);
+});
+async function changeKey(action, key) {
+    try {
+        const resp = await fetch("/change_key", {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({ action, key }),
+        });
+        const data = await resp.json();
+        if (data.status === "ok") {
+            currentBindings[action] = key;
+            document.getElementById(`current-${action}`).textContent = key;
+            document.getElementById("status").textContent =
+                `✔ "${action}" updated to "${key}"`;
+        } else {
+            document.getElementById("status").textContent =
+                `Failed: ${data.message}`;
+        }
+    } catch (e) {
+        console.error(e);
+        document.getElementById("status").textContent = "Server error";
+    }
+}
+loadBindings();
+loadSpeeds();

reachy_mini_controller/static/style.css ADDED Viewed

	@@ -0,0 +1,80 @@

+body {
+    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
+    background-color: #f4f7f9;
+    margin: 0;
+    padding: 0;
+}
+.container {
+    max-width: 700px;
+    margin: 40px auto;
+    background: #ffffff;
+    padding: 30px 40px;
+    border-radius: 12px;
+    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
+}
+h1, h2 {
+    text-align: center;
+    color: #333;
+}
+table {
+    width: 100%;
+    border-collapse: collapse;
+    margin-top: 15px;
+}
+th, td {
+    text-align: left;
+    padding: 12px;
+    border-bottom: 1px solid #ddd;
+}
+th {
+    background-color: #f0f0f0;
+}
+button {
+    padding: 6px 12px;
+    background-color: #4CAF50;
+    color: white;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    transition: 0.2s;
+}
+button:hover {
+    background-color: #45a049;
+}
+.status {
+    margin-top: 20px;
+    text-align: center;
+    font-weight: bold;
+    color: #444;
+}
+.speed-item {
+    margin: 15px 0;
+    padding: 15px;
+    border-radius: 8px;
+    background-color: #f8f8f8;
+    border: 1px solid #ddd;
+}
+.speed-item label {
+    display: block;
+    font-weight: bold;
+    margin-bottom: 5px;
+}
+.speed-item input[type="range"] {
+    width: 100%;
+}
+.speed-value {
+    font-weight: bold;
+    float: right;
+}

style.css ADDED Viewed

	@@ -0,0 +1,411 @@

+* {
+	margin: 0;
+	padding: 0;
+	box-sizing: border-box;
+}
+body {
+	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+	line-height: 1.6;
+	color: #333;
+	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+	min-height: 100vh;
+}
+.hero {
+	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+	color: white;
+	padding: 4rem 2rem;
+	text-align: center;
+}
+.hero-content {
+	max-width: 800px;
+	margin: 0 auto;
+}
+.app-icon {
+	font-size: 4rem;
+	margin-bottom: 1rem;
+	display: inline-block;
+}
+.hero h1 {
+	font-size: 3rem;
+	font-weight: 700;
+	margin-bottom: 1rem;
+	background: linear-gradient(45deg, #fff, #f0f9ff);
+	background-clip: text;
+	-webkit-background-clip: text;
+	-webkit-text-fill-color: transparent;
+}
+.tagline {
+	font-size: 1.25rem;
+	opacity: 0.9;
+	max-width: 600px;
+	margin: 0 auto;
+}
+.container {
+	max-width: 1200px;
+	margin: 0 auto;
+	padding: 0 2rem;
+	position: relative;
+	z-index: 2;
+}
+.main-card {
+	background: white;
+	border-radius: 20px;
+	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
+	margin-top: -2rem;
+	overflow: hidden;
+	margin-bottom: 3rem;
+}
+.app-preview {
+	background: linear-gradient(135deg, #1e3a8a, #3b82f6);
+	padding: 3rem;
+	color: white;
+	text-align: center;
+	position: relative;
+}
+.preview-image {
+	background: #000;
+	border-radius: 15px;
+	padding: 2rem;
+	max-width: 500px;
+	margin: 0 auto;
+	position: relative;
+	overflow: hidden;
+}
+.camera-feed {
+	font-size: 4rem;
+	margin-bottom: 1rem;
+	opacity: 0.7;
+}
+.detection-overlay {
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -50%);
+	width: 100%;
+}
+.bbox {
+	background: rgba(34, 197, 94, 0.9);
+	color: white;
+	padding: 0.5rem 1rem;
+	border-radius: 8px;
+	font-size: 0.9rem;
+	font-weight: 600;
+	margin: 0.5rem;
+	display: inline-block;
+	border: 2px solid #22c55e;
+}
+.app-details {
+	padding: 3rem;
+}
+.app-details h2 {
+	font-size: 2rem;
+	color: #1e293b;
+	margin-bottom: 2rem;
+	text-align: center;
+}
+.template-info {
+	display: grid;
+	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+	gap: 2rem;
+	margin-bottom: 3rem;
+}
+.info-box {
+	background: #f0f9ff;
+	border: 2px solid #e0f2fe;
+	border-radius: 12px;
+	padding: 2rem;
+}
+.info-box h3 {
+	color: #0c4a6e;
+	margin-bottom: 1rem;
+	font-size: 1.2rem;
+}
+.info-box p {
+	color: #0369a1;
+	line-height: 1.6;
+}
+.how-to-use {
+	background: #fefce8;
+	border: 2px solid #fde047;
+	border-radius: 12px;
+	padding: 2rem;
+	margin-top: 3rem;
+}
+.how-to-use h3 {
+	color: #a16207;
+	margin-bottom: 1.5rem;
+	font-size: 1.3rem;
+	text-align: center;
+}
+.steps {
+	display: flex;
+	flex-direction: column;
+	gap: 1.5rem;
+}
+.step {
+	display: flex;
+	align-items: flex-start;
+	gap: 1rem;
+}
+.step-number {
+	background: #eab308;
+	color: white;
+	width: 2rem;
+	height: 2rem;
+	border-radius: 50%;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	font-weight: bold;
+	flex-shrink: 0;
+}
+.step h4 {
+	color: #a16207;
+	margin-bottom: 0.5rem;
+	font-size: 1.1rem;
+}
+.step p {
+	color: #ca8a04;
+}
+.download-card {
+	background: white;
+	border-radius: 20px;
+	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
+	padding: 3rem;
+	text-align: center;
+}
+.download-card h2 {
+	font-size: 2rem;
+	color: #1e293b;
+	margin-bottom: 1rem;
+}
+.download-card>p {
+	color: #64748b;
+	font-size: 1.1rem;
+	margin-bottom: 2rem;
+}
+.dashboard-config {
+	margin-bottom: 2rem;
+	text-align: left;
+	max-width: 400px;
+	margin-left: auto;
+	margin-right: auto;
+}
+.dashboard-config label {
+	display: block;
+	color: #374151;
+	font-weight: 600;
+	margin-bottom: 0.5rem;
+}
+.dashboard-config input {
+	width: 100%;
+	padding: 0.75rem 1rem;
+	border: 2px solid #e5e7eb;
+	border-radius: 8px;
+	font-size: 0.95rem;
+	transition: border-color 0.2s;
+}
+.dashboard-config input:focus {
+	outline: none;
+	border-color: #667eea;
+}
+.install-btn {
+	background: linear-gradient(135deg, #667eea, #764ba2);
+	color: white;
+	border: none;
+	padding: 1.25rem 3rem;
+	border-radius: 16px;
+	font-size: 1.2rem;
+	font-weight: 700;
+	cursor: pointer;
+	transition: all 0.3s ease;
+	display: inline-flex;
+	align-items: center;
+	gap: 0.75rem;
+	margin-bottom: 2rem;
+	box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
+}
+.install-btn:hover:not(:disabled) {
+	transform: translateY(-3px);
+	box-shadow: 0 15px 35px rgba(102, 126, 234, 0.4);
+}
+.install-btn:disabled {
+	opacity: 0.7;
+	cursor: not-allowed;
+	transform: none;
+}
+.manual-option {
+	background: #f8fafc;
+	border-radius: 12px;
+	padding: 2rem;
+	margin-top: 2rem;
+}
+.manual-option h3 {
+	color: #1e293b;
+	margin-bottom: 1rem;
+	font-size: 1.2rem;
+}
+.manual-option>p {
+	color: #64748b;
+	margin-bottom: 1rem;
+}
+.btn-icon {
+	font-size: 1.1rem;
+}
+.install-status {
+	padding: 1rem;
+	border-radius: 8px;
+	font-size: 0.9rem;
+	text-align: center;
+	display: none;
+	margin-top: 1rem;
+}
+.install-status.success {
+	background: #dcfce7;
+	color: #166534;
+	border: 1px solid #bbf7d0;
+}
+.install-status.error {
+	background: #fef2f2;
+	color: #dc2626;
+	border: 1px solid #fecaca;
+}
+.install-status.loading {
+	background: #dbeafe;
+	color: #1d4ed8;
+	border: 1px solid #bfdbfe;
+}
+.install-status.info {
+	background: #e0f2fe;
+	color: #0369a1;
+	border: 1px solid #7dd3fc;
+}
+.manual-install {
+	background: #1f2937;
+	border-radius: 8px;
+	padding: 1rem;
+	margin-bottom: 1rem;
+	display: flex;
+	align-items: center;
+	gap: 1rem;
+}
+.manual-install code {
+	color: #10b981;
+	font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace;
+	font-size: 0.85rem;
+	flex: 1;
+	overflow-x: auto;
+}
+.copy-btn {
+	background: #374151;
+	color: white;
+	border: none;
+	padding: 0.5rem 1rem;
+	border-radius: 6px;
+	font-size: 0.8rem;
+	cursor: pointer;
+	transition: background-color 0.2s;
+}
+.copy-btn:hover {
+	background: #4b5563;
+}
+.manual-steps {
+	color: #6b7280;
+	font-size: 0.9rem;
+	line-height: 1.8;
+}
+.footer {
+	text-align: center;
+	padding: 2rem;
+	color: white;
+	opacity: 0.8;
+}
+.footer a {
+	color: white;
+	text-decoration: none;
+	font-weight: 600;
+}
+.footer a:hover {
+	text-decoration: underline;
+}
+/* Responsive Design */
+@media (max-width: 768px) {
+	.hero {
+		padding: 2rem 1rem;
+	}
+	.hero h1 {
+		font-size: 2rem;
+	}
+	.container {
+		padding: 0 1rem;
+	}
+	.app-details,
+	.download-card {
+		padding: 2rem;
+	}
+	.features-grid {
+		grid-template-columns: 1fr;
+	}
+	.download-options {
+		grid-template-columns: 1fr;
+	}
+}