Spaces:

mrfakename
/

metronome

Running

App Files Files Community

mrfakename commited on 8 days ago

Commit

b23ed54

0 Parent(s):

metronome app

Browse files

Files changed (11) hide show

.gitignore +4 -0
README.md +12 -0
index.html +235 -0
metronome/__init__.py +0 -0
metronome/main.py +142 -0
metronome/static/click.wav +0 -0
metronome/static/index.html +91 -0
metronome/static/main.js +301 -0
metronome/static/style.css +392 -0
pyproject.toml +28 -0
style.css +351 -0

.gitignore ADDED Viewed

	@@ -0,0 +1,4 @@

+__pycache__/
+*.egg-info/
+.claude/
+.DS_Store

README.md ADDED Viewed

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

+---
+title: Metronome
+emoji: 🎵
+colorFrom: red
+colorTo: blue
+sdk: static
+pinned: false
+short_description: Metronome app for Reachy Mini
+tags:
+ - reachy_mini
+ - reachy_mini_python_app
+---

index.html ADDED Viewed

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

+<!doctype html>
+<html>
+<head>
+	<meta charset="utf-8" />
+	<meta name="viewport" content="width=device-width" />
+	<title> Metronome </title>
+	<link rel="stylesheet" href="style.css" />
+</head>
+<body>
+	<div class="hero">
+		<div class="hero-content">
+			<div class="app-icon">🤖⚡</div>
+			<h1> Metronome </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 Metronome to Reachy Mini
+			</button>
+			<div id="installStatus" class="install-status"></div>
+		</div>
+	</div>
+	<div class="footer">
+		<p>
+			🤖 Metronome •
+			<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>

metronome/__init__.py ADDED Viewed

File without changes

metronome/main.py ADDED Viewed

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

+import threading
+import math
+from pathlib import Path
+from reachy_mini import ReachyMini, ReachyMiniApp
+from reachy_mini.utils import create_head_pose
+import numpy as np
+import time
+from pydantic import BaseModel
+from typing import Optional
+# Path to click sound
+CLICK_SOUND = str(Path(__file__).parent / "static" / "click.wav")
+class Metronome(ReachyMiniApp):
+    custom_app_url: str | None = "http://0.0.0.0:8082"
+    def run(self, reachy_mini: ReachyMini, stop_event: threading.Event):
+        # Metronome state
+        bpm = 120
+        is_running = False
+        amplitude_deg = 35.0  # Antenna swing amplitude in degrees
+        # Beat tracking
+        beat_start_time = 0.0
+        current_beat = 0
+        play_tick = False
+        # API models
+        class MetronomeState(BaseModel):
+            bpm: Optional[int] = None
+            is_running: Optional[bool] = None
+            amplitude: Optional[float] = None
+        class TickRequest(BaseModel):
+            pass
+        @self.settings_app.get("/state")
+        def get_state():
+            return {
+                "bpm": bpm,
+                "is_running": is_running,
+                "amplitude": amplitude_deg,
+                "current_beat": current_beat
+            }
+        @self.settings_app.post("/state")
+        def update_state(state: MetronomeState):
+            nonlocal bpm, is_running, amplitude_deg, beat_start_time, current_beat
+            if state.bpm is not None:
+                bpm = max(40, min(240, state.bpm))
+            if state.is_running is not None:
+                is_running = state.is_running
+                if is_running:
+                    beat_start_time = time.time()
+                    current_beat = 0
+            if state.amplitude is not None:
+                amplitude_deg = max(10, min(50, state.amplitude))
+            return {
+                "bpm": bpm,
+                "is_running": is_running,
+                "amplitude": amplitude_deg,
+                "current_beat": current_beat
+            }
+        @self.settings_app.post("/tap")
+        def tap_tempo():
+            """Tap tempo - calculates BPM from tap intervals"""
+            nonlocal bpm
+            # This endpoint can be used for tap tempo feature
+            return {"bpm": bpm}
+        @self.settings_app.post("/tick")
+        def request_tick():
+            nonlocal play_tick
+            play_tick = True
+            return {"status": "ok"}
+        # Main control loop at 50Hz
+        last_beat = -1
+        while not stop_event.is_set():
+            if is_running:
+                current_time = time.time()
+                elapsed = current_time - beat_start_time
+                # Calculate beat timing
+                beat_duration = 60.0 / bpm  # seconds per beat
+                beat_progress = (elapsed % beat_duration) / beat_duration  # 0 to 1
+                current_beat = int(elapsed / beat_duration) % 4  # 0, 1, 2, 3 for 4/4 time
+                # Detect new beat for sound
+                if current_beat != last_beat:
+                    last_beat = current_beat
+                    # Play tick sound on each beat
+                    try:
+                        reachy_mini.media.play_sound(CLICK_SOUND)
+                    except Exception:
+                        pass  # Sound file might not exist
+                # Pendulum motion: smooth sine wave oscillation
+                # Full cycle = 2 beats (swing left, swing right)
+                cycle_progress = (elapsed % (beat_duration * 2)) / (beat_duration * 2)
+                angle = amplitude_deg * math.sin(2 * math.pi * cycle_progress)
+                # Both antennas move together like a metronome pendulum
+                antennas_deg = np.array([angle, angle])
+                # Head follows slightly
+                head_yaw = angle * 0.3
+                head_pose = create_head_pose(yaw=head_yaw, degrees=True)
+            else:
+                # Stopped: antennas at rest
+                antennas_deg = np.array([0.0, 0.0])
+                head_pose = create_head_pose(yaw=0, degrees=True)
+                last_beat = -1
+            # Handle manual tick request
+            if play_tick:
+                try:
+                    reachy_mini.media.play_sound(CLICK_SOUND)
+                except Exception:
+                    pass
+                play_tick = False
+            antennas_rad = np.deg2rad(antennas_deg)
+            reachy_mini.set_target(
+                head=head_pose,
+                antennas=antennas_rad,
+            )
+            time.sleep(0.02)  # 50Hz update rate
+if __name__ == "__main__":
+    app = Metronome()
+    app.wrapped_run(media_backend="default_no_video")

metronome/static/click.wav ADDED Viewed

Binary file (4.45 kB). View file

metronome/static/index.html ADDED Viewed

	@@ -0,0 +1,91 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Reachy Mini Metronome</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=JetBrains+Mono:wght@400;600&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="/static/style.css">
+</head>
+<body>
+    <div class="container">
+        <header>
+            <div class="logo">
+                <div class="logo-icon"></div>
+                <span>REACHY MINI</span>
+            </div>
+            <h1>METRONOME</h1>
+        </header>
+        <main>
+            <!-- Pendulum visualization -->
+            <div class="pendulum-container">
+                <div class="pendulum-track"></div>
+                <div class="pendulum-arm" id="pendulum">
+                    <div class="pendulum-weight"></div>
+                </div>
+                <div class="beat-indicators">
+                    <div class="beat-dot" data-beat="0"></div>
+                    <div class="beat-dot" data-beat="1"></div>
+                    <div class="beat-dot" data-beat="2"></div>
+                    <div class="beat-dot" data-beat="3"></div>
+                </div>
+            </div>
+            <!-- BPM Display -->
+            <div class="bpm-display">
+                <button class="bpm-adjust" id="bpm-down">-</button>
+                <div class="bpm-value">
+                    <input type="number" id="bpm-input" value="120" min="40" max="240">
+                    <span class="bpm-label">BPM</span>
+                </div>
+                <button class="bpm-adjust" id="bpm-up">+</button>
+            </div>
+            <!-- BPM Slider -->
+            <div class="slider-container">
+                <span class="slider-label">40</span>
+                <input type="range" id="bpm-slider" min="40" max="240" value="120">
+                <span class="slider-label">240</span>
+            </div>
+            <!-- Tempo markings -->
+            <div class="tempo-marks">
+                <button class="tempo-preset" data-bpm="60">Largo</button>
+                <button class="tempo-preset" data-bpm="90">Andante</button>
+                <button class="tempo-preset" data-bpm="120">Allegro</button>
+                <button class="tempo-preset" data-bpm="160">Vivace</button>
+                <button class="tempo-preset" data-bpm="200">Presto</button>
+            </div>
+            <!-- Controls -->
+            <div class="controls">
+                <button class="control-btn secondary" id="tap-btn">
+                    TAP TEMPO
+                </button>
+                <button class="control-btn primary" id="play-btn">
+                    <span class="play-icon"></span>
+                    START
+                </button>
+            </div>
+            <!-- Status -->
+            <div class="status" id="status">
+                <div class="status-indicator"></div>
+                <span>Ready</span>
+            </div>
+        </main>
+        <footer>
+            <p>Antenna amplitude: <span id="amplitude-value">35</span>&deg;</p>
+        </footer>
+    </div>
+    <script src="/static/main.js"></script>
+</body>
+</html>

metronome/static/main.js ADDED Viewed

	@@ -0,0 +1,301 @@

+// Metronome state
+let state = {
+    bpm: 120,
+    isRunning: false,
+    amplitude: 35,
+    currentBeat: 0
+};
+// Audio context for click sounds
+let audioCtx = null;
+function initAudio() {
+    if (!audioCtx) {
+        audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+    }
+}
+function playClick(isDownbeat = false) {
+    if (!audioCtx) return;
+    const osc = audioCtx.createOscillator();
+    const gain = audioCtx.createGain();
+    osc.connect(gain);
+    gain.connect(audioCtx.destination);
+    // Higher pitch for downbeat (beat 1)
+    osc.frequency.value = isDownbeat ? 1000 : 800;
+    osc.type = 'sine';
+    gain.gain.setValueAtTime(0.3, audioCtx.currentTime);
+    gain.gain.exponentialRampToValueAtTime(0.001, audioCtx.currentTime + 0.1);
+    osc.start(audioCtx.currentTime);
+    osc.stop(audioCtx.currentTime + 0.1);
+}
+// Tap tempo tracking
+let tapTimes = [];
+const TAP_TIMEOUT = 2000; // Reset after 2 seconds of no taps
+// DOM Elements
+const pendulum = document.getElementById('pendulum');
+const bpmInput = document.getElementById('bpm-input');
+const bpmSlider = document.getElementById('bpm-slider');
+const bpmUp = document.getElementById('bpm-up');
+const bpmDown = document.getElementById('bpm-down');
+const playBtn = document.getElementById('play-btn');
+const tapBtn = document.getElementById('tap-btn');
+const statusEl = document.getElementById('status');
+const amplitudeValue = document.getElementById('amplitude-value');
+const beatDots = document.querySelectorAll('.beat-dot');
+const tempoPresets = document.querySelectorAll('.tempo-preset');
+// Animation
+let animationStartTime = null;
+let animationFrame = null;
+// API Functions
+async function fetchState() {
+    try {
+        const resp = await fetch('/state');
+        const data = await resp.json();
+        state.bpm = data.bpm;
+        state.isRunning = data.is_running;
+        state.amplitude = data.amplitude;
+        state.currentBeat = data.current_beat;
+        updateUI();
+    } catch (e) {
+        console.error('Failed to fetch state:', e);
+    }
+}
+async function updateState(updates) {
+    try {
+        const resp = await fetch('/state', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify(updates)
+        });
+        const data = await resp.json();
+        state.bpm = data.bpm;
+        state.isRunning = data.is_running;
+        state.amplitude = data.amplitude;
+        state.currentBeat = data.current_beat;
+        updateUI();
+    } catch (e) {
+        console.error('Failed to update state:', e);
+        statusEl.querySelector('span').textContent = 'Connection error';
+    }
+}
+// UI Update
+function updateUI() {
+    // BPM displays
+    bpmInput.value = state.bpm;
+    bpmSlider.value = state.bpm;
+    amplitudeValue.textContent = Math.round(state.amplitude);
+    // Play button
+    if (state.isRunning) {
+        playBtn.innerHTML = '<span class="stop-icon"></span>STOP';
+        playBtn.classList.add('running');
+        statusEl.querySelector('span').textContent = 'Running';
+        statusEl.classList.add('active');
+        startPendulumAnimation();
+    } else {
+        playBtn.innerHTML = '<span class="play-icon"></span>START';
+        playBtn.classList.remove('running');
+        statusEl.querySelector('span').textContent = 'Ready';
+        statusEl.classList.remove('active');
+        stopPendulumAnimation();
+    }
+    // Beat indicators
+    beatDots.forEach((dot, i) => {
+        if (i === state.currentBeat && state.isRunning) {
+            dot.classList.add('active');
+        } else {
+            dot.classList.remove('active');
+        }
+    });
+    // Tempo presets
+    tempoPresets.forEach(preset => {
+        const presetBpm = parseInt(preset.dataset.bpm);
+        if (Math.abs(state.bpm - presetBpm) < 10) {
+            preset.classList.add('active');
+        } else {
+            preset.classList.remove('active');
+        }
+    });
+}
+// Pendulum Animation
+function startPendulumAnimation() {
+    if (animationFrame) return;
+    animationStartTime = performance.now();
+    animatePendulum();
+}
+function stopPendulumAnimation() {
+    if (animationFrame) {
+        cancelAnimationFrame(animationFrame);
+        animationFrame = null;
+    }
+    pendulum.style.transform = 'translateX(-50%) rotate(0deg)';
+}
+function animatePendulum() {
+    if (!state.isRunning) {
+        stopPendulumAnimation();
+        return;
+    }
+    const now = performance.now();
+    const elapsed = (now - animationStartTime) / 1000; // seconds
+    const beatDuration = 60 / state.bpm;
+    const cycleProgress = (elapsed % (beatDuration * 2)) / (beatDuration * 2);
+    const angle = 35 * Math.sin(2 * Math.PI * cycleProgress);
+    pendulum.style.transform = `translateX(-50%) rotate(${angle}deg)`;
+    // Update beat indicator
+    const currentBeat = Math.floor((elapsed / beatDuration) % 4);
+    if (currentBeat !== state.currentBeat) {
+        state.currentBeat = currentBeat;
+        updateBeatIndicators();
+    }
+    animationFrame = requestAnimationFrame(animatePendulum);
+}
+function updateBeatIndicators() {
+    beatDots.forEach((dot, i) => {
+        if (i === state.currentBeat) {
+            dot.classList.add('active');
+        } else {
+            dot.classList.remove('active');
+        }
+    });
+    // Play click sound on beat change
+    playClick(state.currentBeat === 0);
+}
+// Tap Tempo
+function handleTap() {
+    const now = Date.now();
+    // Reset if too long since last tap
+    if (tapTimes.length > 0 && now - tapTimes[tapTimes.length - 1] > TAP_TIMEOUT) {
+        tapTimes = [];
+    }
+    tapTimes.push(now);
+    // Need at least 2 taps to calculate BPM
+    if (tapTimes.length >= 2) {
+        // Keep only last 8 taps
+        if (tapTimes.length > 8) {
+            tapTimes = tapTimes.slice(-8);
+        }
+        // Calculate average interval
+        let totalInterval = 0;
+        for (let i = 1; i < tapTimes.length; i++) {
+            totalInterval += tapTimes[i] - tapTimes[i - 1];
+        }
+        const avgInterval = totalInterval / (tapTimes.length - 1);
+        const newBpm = Math.round(60000 / avgInterval);
+        // Clamp to valid range
+        const clampedBpm = Math.max(40, Math.min(240, newBpm));
+        updateState({ bpm: clampedBpm });
+    }
+    // Visual feedback
+    tapBtn.classList.add('tapped');
+    setTimeout(() => tapBtn.classList.remove('tapped'), 100);
+}
+// Event Listeners
+playBtn.addEventListener('click', () => {
+    initAudio(); // Initialize audio on user gesture
+    updateState({ is_running: !state.isRunning });
+});
+tapBtn.addEventListener('click', () => {
+    initAudio();
+    playClick(true);
+    handleTap();
+});
+bpmInput.addEventListener('change', (e) => {
+    const newBpm = parseInt(e.target.value) || 120;
+    updateState({ bpm: newBpm });
+});
+bpmSlider.addEventListener('input', (e) => {
+    const newBpm = parseInt(e.target.value);
+    bpmInput.value = newBpm;
+});
+bpmSlider.addEventListener('change', (e) => {
+    const newBpm = parseInt(e.target.value);
+    updateState({ bpm: newBpm });
+});
+bpmUp.addEventListener('click', () => {
+    updateState({ bpm: state.bpm + 1 });
+});
+bpmDown.addEventListener('click', () => {
+    updateState({ bpm: state.bpm - 1 });
+});
+tempoPresets.forEach(preset => {
+    preset.addEventListener('click', () => {
+        const newBpm = parseInt(preset.dataset.bpm);
+        updateState({ bpm: newBpm });
+    });
+});
+// Keyboard shortcuts
+document.addEventListener('keydown', (e) => {
+    if (e.target.tagName === 'INPUT') return;
+    switch (e.code) {
+        case 'Space':
+            e.preventDefault();
+            updateState({ is_running: !state.isRunning });
+            break;
+        case 'KeyT':
+            handleTap();
+            break;
+        case 'ArrowUp':
+            updateState({ bpm: state.bpm + 5 });
+            break;
+        case 'ArrowDown':
+            updateState({ bpm: state.bpm - 5 });
+            break;
+        case 'ArrowRight':
+            updateState({ bpm: state.bpm + 1 });
+            break;
+        case 'ArrowLeft':
+            updateState({ bpm: state.bpm - 1 });
+            break;
+    }
+});
+// Poll for state updates when running (to stay in sync with robot)
+setInterval(() => {
+    if (state.isRunning) {
+        fetchState();
+    }
+}, 500);
+// Initialize
+fetchState();

metronome/static/style.css ADDED Viewed

	@@ -0,0 +1,392 @@

+:root {
+    --bg: #ffffff;
+    --bg-secondary: #f5f5f5;
+    --text: #111111;
+    --text-muted: #888888;
+    --border: #e0e0e0;
+    --accent: #111111;
+}
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+body {
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+    background: var(--bg);
+    color: var(--text);
+    min-height: 100vh;
+}
+.container {
+    max-width: 280px;
+    margin: 0 auto;
+    padding: 24px 16px;
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+}
+header {
+    text-align: center;
+    margin-bottom: 24px;
+}
+.logo {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 6px;
+    margin-bottom: 4px;
+}
+.logo-icon {
+    width: 4px;
+    height: 4px;
+    background: var(--text);
+    border-radius: 50%;
+}
+.logo span {
+    font-size: 9px;
+    letter-spacing: 2px;
+    color: var(--text-muted);
+    text-transform: uppercase;
+}
+h1 {
+    font-size: 14px;
+    font-weight: 500;
+    letter-spacing: 4px;
+    text-transform: uppercase;
+}
+main {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+}
+/* Pendulum */
+.pendulum-container {
+    position: relative;
+    height: 80px;
+    display: flex;
+    align-items: flex-start;
+    justify-content: center;
+    padding-top: 8px;
+}
+.pendulum-track {
+    display: none;
+}
+.pendulum-arm {
+    position: absolute;
+    top: 8px;
+    left: 50%;
+    width: 1px;
+    height: 50px;
+    background: var(--text);
+    transform-origin: top center;
+    transform: translateX(-50%) rotate(0deg);
+    transition: transform 0.016s linear;
+}
+.pendulum-weight {
+    position: absolute;
+    bottom: -4px;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 8px;
+    height: 8px;
+    background: var(--text);
+    border-radius: 50%;
+}
+.beat-indicators {
+    position: absolute;
+    bottom: 8px;
+    left: 50%;
+    transform: translateX(-50%);
+    display: flex;
+    gap: 6px;
+}
+.beat-dot {
+    width: 6px;
+    height: 6px;
+    background: var(--bg);
+    border: 1px solid var(--border);
+    border-radius: 50%;
+    transition: all 0.1s ease;
+}
+.beat-dot.active {
+    background: var(--text);
+    border-color: var(--text);
+}
+/* BPM Display */
+.bpm-display {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 16px;
+}
+.bpm-adjust {
+    width: 28px;
+    height: 28px;
+    background: var(--bg);
+    border: 1px solid var(--border);
+    border-radius: 4px;
+    color: var(--text);
+    font-size: 14px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.bpm-adjust:hover {
+    background: var(--bg-secondary);
+}
+.bpm-adjust:active {
+    background: var(--text);
+    color: var(--bg);
+}
+.bpm-value {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+.bpm-value input {
+    width: 64px;
+    background: transparent;
+    border: none;
+    font-family: inherit;
+    font-size: 32px;
+    font-weight: 300;
+    color: var(--text);
+    text-align: center;
+    appearance: textfield;
+    -moz-appearance: textfield;
+}
+.bpm-value input::-webkit-outer-spin-button,
+.bpm-value input::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+}
+.bpm-value input:focus {
+    outline: none;
+}
+.bpm-label {
+    font-size: 9px;
+    letter-spacing: 2px;
+    color: var(--text-muted);
+    text-transform: uppercase;
+}
+/* Slider */
+.slider-container {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+.slider-label {
+    font-size: 9px;
+    color: var(--text-muted);
+    min-width: 20px;
+}
+input[type="range"] {
+    flex: 1;
+    height: 1px;
+    background: var(--border);
+    outline: none;
+    -webkit-appearance: none;
+    border: none;
+}
+input[type="range"]::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    width: 12px;
+    height: 12px;
+    background: var(--text);
+    border-radius: 50%;
+    cursor: pointer;
+}
+input[type="range"]::-moz-range-thumb {
+    width: 12px;
+    height: 12px;
+    background: var(--text);
+    border-radius: 50%;
+    cursor: pointer;
+    border: none;
+}
+/* Tempo Presets */
+.tempo-marks {
+    display: flex;
+    justify-content: center;
+    gap: 4px;
+}
+.tempo-preset {
+    padding: 4px 8px;
+    background: var(--bg);
+    border: 1px solid var(--border);
+    border-radius: 3px;
+    color: var(--text-muted);
+    font-family: inherit;
+    font-size: 9px;
+    cursor: pointer;
+}
+.tempo-preset:hover {
+    color: var(--text);
+}
+.tempo-preset.active {
+    background: var(--text);
+    border-color: var(--text);
+    color: var(--bg);
+}
+/* Controls */
+.controls {
+    display: flex;
+    gap: 8px;
+    margin-top: 8px;
+}
+.control-btn {
+    flex: 1;
+    padding: 12px;
+    border: 1px solid var(--border);
+    border-radius: 4px;
+    font-family: inherit;
+    font-size: 11px;
+    letter-spacing: 1px;
+    text-transform: uppercase;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 6px;
+    background: var(--bg);
+    color: var(--text);
+}
+.control-btn.primary {
+    background: var(--text);
+    border-color: var(--text);
+    color: var(--bg);
+}
+.control-btn.primary:hover {
+    opacity: 0.9;
+}
+.control-btn.primary.running {
+    background: var(--bg);
+    color: var(--text);
+}
+.control-btn.secondary:hover {
+    background: var(--bg-secondary);
+}
+.control-btn.secondary.tapped {
+    background: var(--text);
+    color: var(--bg);
+}
+/* Play/Stop Icons */
+.play-icon {
+    width: 0;
+    height: 0;
+    border-left: 6px solid var(--bg);
+    border-top: 4px solid transparent;
+    border-bottom: 4px solid transparent;
+}
+.control-btn.primary.running .play-icon {
+    border-left-color: var(--text);
+}
+.stop-icon {
+    width: 8px;
+    height: 8px;
+    background: var(--bg);
+}
+.control-btn.primary.running .stop-icon {
+    background: var(--text);
+}
+/* Status */
+.status {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 6px;
+    padding: 8px;
+}
+.status-indicator {
+    width: 4px;
+    height: 4px;
+    background: var(--border);
+    border-radius: 50%;
+}
+.status.active .status-indicator {
+    background: var(--text);
+}
+.status span {
+    font-size: 9px;
+    letter-spacing: 1px;
+    color: var(--text-muted);
+    text-transform: uppercase;
+}
+.status.active span {
+    color: var(--text);
+}
+/* Footer */
+footer {
+    margin-top: auto;
+    padding-top: 16px;
+    text-align: center;
+}
+footer p {
+    font-size: 9px;
+    color: var(--text-muted);
+}
+/* Responsive */
+@media (max-width: 480px) {
+    .container {
+        padding: 16px 12px;
+    }
+    .bpm-value input {
+        font-size: 28px;
+    }
+}

pyproject.toml ADDED Viewed

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

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

style.css ADDED Viewed

	@@ -0,0 +1,351 @@

+* {
+	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: #fff;
+	min-height: 100vh;
+}
+.hero {
+	background: #f5f5f5;
+	color: #333;
+	padding: 2rem 1rem;
+	text-align: center;
+}
+.hero-content {
+	max-width: 600px;
+	margin: 0 auto;
+}
+.app-icon {
+	font-size: 2rem;
+	margin-bottom: 0.5rem;
+	display: inline-block;
+}
+.hero h1 {
+	font-size: 1.5rem;
+	font-weight: 600;
+	margin-bottom: 0.5rem;
+}
+.tagline {
+	font-size: 1rem;
+	color: #666;
+}
+.container {
+	max-width: 600px;
+	margin: 0 auto;
+	padding: 1rem;
+}
+.main-card {
+	background: #fff;
+	border: 1px solid #eee;
+	margin-bottom: 1rem;
+}
+.app-preview {
+	background: #f5f5f5;
+	padding: 1rem;
+	text-align: center;
+}
+.preview-image {
+	background: #eee;
+	padding: 1rem;
+	max-width: 300px;
+	margin: 0 auto;
+}
+.camera-feed {
+	font-size: 2rem;
+	opacity: 0.5;
+}
+.detection-overlay {
+	display: none;
+}
+.bbox {
+	background: #333;
+	color: white;
+	padding: 0.25rem 0.5rem;
+	font-size: 0.8rem;
+	display: inline-block;
+}
+.app-details {
+	padding: 1rem;
+}
+.app-details h2 {
+	font-size: 1.25rem;
+	margin-bottom: 1rem;
+}
+.template-info {
+	display: block;
+}
+.info-box {
+	background: #f9f9f9;
+	border: 1px solid #eee;
+	padding: 1rem;
+	margin-bottom: 1rem;
+}
+.info-box h3 {
+	font-size: 1rem;
+	margin-bottom: 0.5rem;
+}
+.info-box p {
+	color: #666;
+}
+.how-to-use {
+	background: #f9f9f9;
+	border: 1px solid #eee;
+	padding: 1rem;
+	margin-top: 1rem;
+}
+.how-to-use h3 {
+	font-size: 1rem;
+	margin-bottom: 1rem;
+}
+.steps {
+	display: block;
+}
+.step {
+	display: flex;
+	align-items: flex-start;
+	gap: 0.5rem;
+	margin-bottom: 0.5rem;
+}
+.step-number {
+	background: #333;
+	color: white;
+	width: 1.5rem;
+	height: 1.5rem;
+	border-radius: 50%;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	font-size: 0.75rem;
+	flex-shrink: 0;
+}
+.step h4 {
+	font-size: 0.9rem;
+	margin-bottom: 0.25rem;
+}
+.step p {
+	color: #666;
+	font-size: 0.85rem;
+}
+.download-section {
+	padding: 1rem;
+}
+.download-card {
+	background: #fff;
+	border: 1px solid #eee;
+	padding: 1.5rem;
+	text-align: center;
+	max-width: 600px;
+	margin: 0 auto;
+}
+.download-card h2 {
+	font-size: 1.25rem;
+	margin-bottom: 1rem;
+}
+.download-card>p {
+	color: #666;
+	margin-bottom: 1rem;
+}
+.dashboard-config {
+	margin-bottom: 1rem;
+	text-align: left;
+}
+.dashboard-config label {
+	display: block;
+	font-size: 0.9rem;
+	margin-bottom: 0.25rem;
+}
+.dashboard-config input {
+	width: 100%;
+	padding: 0.5rem;
+	border: 1px solid #ddd;
+	font-size: 0.9rem;
+}
+.dashboard-config input:focus {
+	outline: none;
+	border-color: #333;
+}
+.install-btn {
+	background: #333;
+	color: white;
+	border: none;
+	padding: 0.75rem 1.5rem;
+	font-size: 1rem;
+	cursor: pointer;
+	display: inline-flex;
+	align-items: center;
+	gap: 0.5rem;
+	margin-bottom: 1rem;
+}
+.install-btn:hover:not(:disabled) {
+	background: #555;
+}
+.install-btn:disabled {
+	opacity: 0.5;
+	cursor: not-allowed;
+}
+.manual-option {
+	background: #f9f9f9;
+	padding: 1rem;
+	margin-top: 1rem;
+}
+.manual-option h3 {
+	font-size: 1rem;
+	margin-bottom: 0.5rem;
+}
+.manual-option>p {
+	color: #666;
+	margin-bottom: 0.5rem;
+}
+.btn-icon {
+	font-size: 1rem;
+}
+.install-status {
+	padding: 0.75rem;
+	font-size: 0.85rem;
+	text-align: center;
+	display: none;
+	margin-top: 0.5rem;
+}
+.install-status.success {
+	background: #e8f5e9;
+	color: #2e7d32;
+}
+.install-status.error {
+	background: #ffebee;
+	color: #c62828;
+}
+.install-status.loading {
+	background: #e3f2fd;
+	color: #1565c0;
+}
+.install-status.info {
+	background: #e3f2fd;
+	color: #1565c0;
+}
+.manual-install {
+	background: #333;
+	padding: 0.75rem;
+	margin-bottom: 0.5rem;
+	display: flex;
+	align-items: center;
+	gap: 0.5rem;
+}
+.manual-install code {
+	color: #4caf50;
+	font-family: monospace;
+	font-size: 0.8rem;
+	flex: 1;
+	overflow-x: auto;
+}
+.copy-btn {
+	background: #555;
+	color: white;
+	border: none;
+	padding: 0.25rem 0.5rem;
+	font-size: 0.75rem;
+	cursor: pointer;
+}
+.copy-btn:hover {
+	background: #777;
+}
+.manual-steps {
+	color: #666;
+	font-size: 0.85rem;
+}
+.footer {
+	text-align: center;
+	padding: 1rem;
+	color: #666;
+}
+.footer a {
+	color: #333;
+}
+.footer a:hover {
+	text-decoration: underline;
+}
+@media (max-width: 768px) {
+	.hero {
+		padding: 1rem;
+	}
+	.hero h1 {
+		font-size: 1.25rem;
+	}
+	.container {
+		padding: 0.5rem;
+	}
+	.app-details,
+	.download-card {
+		padding: 1rem;
+	}
+	.features-grid {
+		grid-template-columns: 1fr;
+	}
+	.download-options {
+		grid-template-columns: 1fr;
+	}
+}