Spaces:

Boopster
/

reachy_mini_metronome

Running

App Files Files Community

Boopster commited on Dec 12, 2025

Commit

df20c79

1 Parent(s): 5c78d2c

feat: Redesign the landing page to showcase app features and usage instructions, removing the direct installation UI.

Browse files

Files changed (2) hide show

index.html +58 -200
style.css +127 -0

index.html CHANGED Viewed

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

 <head>
 	<meta charset="utf-8" />
 	<meta name="viewport" content="width=device-width" />
+	<title>Reachy Mini Metronome</title>
+	<meta name="description"
+		content="A visual and audible metronome for Reachy Mini that uses both antennas as a pendulum while producing synthesized click sounds." />
 	<link rel="stylesheet" href="style.css" />
 </head>
 <body>
 	<div class="hero">
 		<div class="hero-content">
+			<div class="app-icon">🎵🤖</div>
+			<h1>Reachy Mini Metronome</h1>
+			<p class="tagline">Turn your Reachy Mini into a playful, animated metronome</p>
 		</div>
 	</div>
 	<div class="container">
 		<div class="main-card">
+			<div class="features-section">
+				<h2>✨ Features</h2>
+				<div class="feature-grid">
+					<div class="feature-item">
+						<div class="feature-icon">🎵</div>
+						<h3>BPM Control</h3>
+						<p>Adjustable tempo from 40 to 208 BPM with preset options for common tempos like Largo,
+							Moderato, and Presto.</p>
+					</div>
+					<div class="feature-item">
+						<div class="feature-icon">🎼</div>
+						<h3>Time Signatures</h3>
+						<p>Support for multiple time signatures including 2/4, 3/4, 4/4, 5/4, and 6/8 to match your
+							music.</p>
+					</div>
+					<div class="feature-item">
+						<div class="feature-icon">🔊</div>
+						<h3>Accented Downbeats</h3>
+						<p>Clear audio feedback with a higher-pitched click on beat 1 to help you keep track of
+							measures.</p>
+					</div>
+					<div class="feature-item">
+						<div class="feature-icon">🤖</div>
+						<h3>Animated Antennas</h3>
+						<p>Both antennas swing in mirror motion like a pendulum, giving you a visual beat indicator.</p>
+					</div>
 				</div>
 			</div>
 		</div>
+		<div class="info-card">
+			<h2>🎯 How It Works</h2>
+			<p>
+				When running, Reachy Mini's antennas swing back and forth in sync with the tempo you've set.
+				Each beat is accompanied by a synthesized click sound played through the robot's speaker,
+				with a distinctive accent on the first beat of each measure.
+			</p>
+			<p>
+				Use the web interface at <code>http://localhost:8042</code> to control the metronome in real-time —
+				adjust the BPM, change time signatures, and start or stop the beat.
+			</p>
+		</div>
+		<div class="info-card">
+			<h2>🚀 Getting Started</h2>
+			<ol class="steps-list">
+				<li>Start the Reachy Mini daemon on your robot or simulator</li>
+				<li>Go to the dashboard at <code>http://localhost:8000</code></li>
+				<li>Find <strong>Reachy Mini Metronome</strong> in the Applications section and toggle it on</li>
+				<li>Click the ⚙️ icon on the app tile, or go directly to <code>http://localhost:8042</code> to open the
+					metronome controls</li>
+			</ol>
 		</div>
 	</div>
 	<div class="footer">
 		<p>
+			🎵 Reachy Mini 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>
 </body>
 </html>

style.css CHANGED Viewed

@@ -365,6 +365,133 @@ body {
 	line-height: 1.8;
 }
 .footer {
 	text-align: center;
 	padding: 2rem;

 	line-height: 1.8;
 }
+/* Features Section */
+.features-section {
+	padding: 2rem;
+}
+.features-section h2 {
+	font-size: 1.5rem;
+	color: #1e293b;
+	margin-bottom: 1.5rem;
+	text-align: center;
+}
+.feature-grid {
+	display: grid;
+	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+	gap: 1rem;
+}
+.feature-item {
+	background: linear-gradient(135deg, #f8fafc, #f1f5f9);
+	border-radius: 12px;
+	padding: 1.25rem;
+	text-align: center;
+	transition: transform 0.3s ease, box-shadow 0.3s ease;
+	border: 1px solid #e2e8f0;
+}
+.feature-item:hover {
+	transform: translateY(-5px);
+	box-shadow: 0 10px 30px rgba(102, 126, 234, 0.15);
+}
+.feature-icon {
+	font-size: 2rem;
+	margin-bottom: 0.5rem;
+	display: block;
+}
+.feature-item h3 {
+	color: #1e293b;
+	font-size: 1rem;
+	margin-bottom: 0.25rem;
+}
+.feature-item p {
+	color: #64748b;
+	font-size: 0.85rem;
+	line-height: 1.5;
+}
+/* Info Cards */
+.info-card {
+	background: white;
+	border-radius: 20px;
+	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
+	padding: 2.5rem;
+	margin-bottom: 2rem;
+}
+.info-card h2 {
+	font-size: 1.5rem;
+	color: #1e293b;
+	margin-bottom: 1.5rem;
+}
+.info-card p {
+	color: #475569;
+	font-size: 1.05rem;
+	line-height: 1.8;
+	margin-bottom: 1rem;
+}
+.info-card p:last-child {
+	margin-bottom: 0;
+}
+.info-card code {
+	background: #f1f5f9;
+	color: #7c3aed;
+	padding: 0.2rem 0.5rem;
+	border-radius: 6px;
+	font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace;
+	font-size: 0.9rem;
+}
+/* Steps List */
+.steps-list {
+	counter-reset: step-counter;
+	list-style: none;
+	padding: 0;
+}
+.steps-list li {
+	position: relative;
+	padding-left: 3rem;
+	margin-bottom: 1.25rem;
+	color: #475569;
+	font-size: 1.05rem;
+	line-height: 1.6;
+}
+.steps-list li:last-child {
+	margin-bottom: 0;
+}
+.steps-list li::before {
+	counter-increment: step-counter;
+	content: counter(step-counter);
+	position: absolute;
+	left: 0;
+	top: 0;
+	width: 2rem;
+	height: 2rem;
+	background: linear-gradient(135deg, #667eea, #764ba2);
+	color: white;
+	border-radius: 50%;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	font-weight: 700;
+	font-size: 0.9rem;
+}
+.steps-list li strong {
+	color: #1e293b;
+}
 .footer {
 	text-align: center;
 	padding: 2rem;