Spaces:

pollen-robotics
/

reachy_mini_app_example

Running

App Files Files Community

cduss commited on Jun 27

Commit

b44cc91

1 Parent(s): 0bd1f77

init

Browse files

Files changed (5) hide show

index.html +235 -14
pyproject.toml +15 -0
reachy_mini_app_example/__init__.py +0 -0
reachy_mini_app_example/main.py +27 -0
style.css +399 -16

index.html CHANGED Viewed

@@ -1,19 +1,240 @@
 <!doctype html>
 <html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
 			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
 			</p>
 		</div>
-	</body>
-</html>

 <!doctype html>
 <html>
+<head>
+	<meta charset="utf-8" />
+	<meta name="viewport" content="width=device-width" />
+	<title>Example App - Reachy Mini Template</title>
+	<link rel="stylesheet" href="style.css" />
+</head>
+<body>
+	<div class="hero">
+		<div class="hero-content">
+			<div class="app-icon">🤖⚡</div>
+			<h1>Example Reachy Mini App</h1>
+			<p class="tagline">Template for creating your own Reachy Mini applications</p>
+		</div>
+	</div>
+	<div class="container">
+		<div class="main-card">
+			<div class="app-preview">
+				<div class="preview-image">
+					<div class="camera-feed">🛠️</div>
+					<div class="detection-overlay">
+						<div class="bbox">🎯 Your Code Here</div>
+						<div class="bbox">⚙️ Build Something Cool</div>
+					</div>
+				</div>
+			</div>
+			<div class="app-details">
+				<h2>Example Template App</h2>
+				<div class="template-info">
+					<div class="info-box">
+						<h3>🎨 Template Purpose</h3>
+						<p>This is an example landing page for Reachy Mini apps. Feel free to duplicate this template
+							and customize it for your own applications!</p>
+					</div>
+					<div class="info-box">
+						<h3>🚀 Getting Started</h3>
+						<p>Use this template to showcase your Reachy Mini app with a professional landing page. Simply
+							modify the content, add your app's repository URL, and deploy!</p>
+					</div>
+				</div>
+				<div class="features-grid">
+					<div class="feature">
+						<span class="feature-icon">📝</span>
+						<div>
+							<h3>Easy to Customize</h3>
+							<p>Simple HTML/CSS template that's easy to modify for your needs</p>
+						</div>
+					</div>
+					<div class="feature">
+						<span class="feature-icon">🔌</span>
+						<div>
+							<h3>Dashboard Integration</h3>
+							<p>Built-in install button connects directly to Reachy dashboards</p>
+						</div>
+					</div>
+					<div class="feature">
+						<span class="feature-icon">📱</span>
+						<div>
+							<h3>Responsive Design</h3>
+							<p>Looks great on desktop, tablet, and mobile devices</p>
+						</div>
+					</div>
+					<div class="feature">
+						<span class="feature-icon">⚡</span>
+						<div>
+							<h3>Fast & Modern</h3>
+							<p>Clean, professional design with smooth animations</p>
+						</div>
+					</div>
+				</div>
+				<div class="how-to-use">
+					<h3>How to Use This Template</h3>
+					<div class="steps">
+						<div class="step">
+							<span class="step-number">1</span>
+							<div>
+								<h4>Duplicate & Customize</h4>
+								<p>Copy this template and modify the content for your app</p>
+							</div>
+						</div>
+						<div class="step">
+							<span class="step-number">2</span>
+							<div>
+								<h4>Update Repository URL</h4>
+								<p>Change the JavaScript to point to your app's Git repository</p>
+							</div>
+						</div>
+						<div class="step">
+							<span class="step-number">3</span>
+							<div>
+								<h4>Deploy to HF Spaces</h4>
+								<p>Upload your customized version to Hugging Face Spaces</p>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+		<div class="download-section">
+			<div class="download-card">
+				<h2>Install This Example App</h2>
+				<p>Try out the installation process with this template app</p>
+				<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 Example App to Reachy
+				</button>
+				<div id="installStatus" class="install-status"></div>
+				<div class="manual-option">
+					<h3>Manual Installation</h3>
+					<p>Or copy this repository URL for manual installation:</p>
+					<div class="manual-install">
+						<code id="repoUrl">https://github.com/your-username/your-reachy-app.git</code>
+						<button onclick="copyToClipboard()" class="copy-btn">📋 Copy</button>
+					</div>
+				</div>
+			</div>
+		</div>
+		<div class="footer">
 			<p>
+				🤖 Template for Reachy Mini Apps •
+				<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>
+		// 🔧 CUSTOMIZE THESE VALUES FOR YOUR APP:
+		const APP_REPO_URL = "https://github.com/your-username/your-reachy-app.git";
+		const APP_NAME = "example-app";
+		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', 'Starting installation...');
+				// Start installation
+				const installResponse = await fetch(`${dashboardUrl}/api/install`, {
+					method: 'POST',
+					mode: 'cors',
+					headers: {
+						'Content-Type': 'application/json',
+					},
+					body: JSON.stringify({
+						url: APP_REPO_URL,
+						name: APP_NAME
+					})
+				});
+				const result = await installResponse.json();
+				if (installResponse.ok) {
+					showStatus('success', `✅ Installation started! 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 Example 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.');
+			});
+		}
+		// Event listeners
+		document.getElementById('installBtn').addEventListener('click', installToReachy);
+		// Auto-detect local dashboard
+		document.addEventListener('DOMContentLoaded', () => {
+			const isLocalhost = window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1';
+			if (isLocalhost) {
+				document.getElementById('dashboardUrl').value = 'http://localhost:8000';
+			}
+		});
+	</script>
+</body>
+</html>

pyproject.toml ADDED Viewed

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

+[build-system]
+requires = ["setuptools>=61.0"]
+build-backend = "setuptools.build_meta"
+[project]
+name = "reachy_mini_app_example"
+version = "0.1.0"
+description = "Add your description here"
+readme = "README.md"
+requires-python = ">=3.8"
+dependencies = ["reachy-mini"]
+[project.entry-points."reachy_mini_apps"]
+reachy_mini_app_example = "reachy_mini_app_example.main:ExampleApp"

reachy_mini_app_example/__init__.py ADDED Viewed

File without changes

reachy_mini_app_example/main.py ADDED Viewed

	@@ -0,0 +1,27 @@

+import threading
+import time
+import numpy as np
+from reachy_mini import ReachyMiniApp
+from reachy_mini.reachy_mini import ReachyMini
+from scipy.spatial.transform import Rotation as R
+class ExampleApp(ReachyMiniApp):
+    def run(self, reachy_mini: ReachyMini, stop_event: threading.Event):
+        t0 = time.time()
+        while not stop_event.is_set():
+            t = time.time() - t0
+            target = np.deg2rad(30) * np.sin(2 * np.pi * 0.5 * t)
+            yaw = target
+            head = np.eye(4)
+            head[:3, :3] = R.from_euler("xyz", [0, 0, yaw], degrees=False).as_matrix()
+            reachy_mini.set_position(head=head, antennas=np.array([target, -target]))
+            time.sleep(0.01)
+            # if more than one second since last ping, print ping
+            if t % 1 < 0.01:
+                print("Ping")

style.css CHANGED Viewed

@@ -1,28 +1,411 @@
 body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
 }
-h1 {
-	font-size: 16px;
-	margin-top: 0;
 }
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
 }
-.card {
-	max-width: 620px;
 	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
 	border-radius: 16px;
 }
-.card p:last-child {
-	margin-bottom: 0;
 }

+* {
+	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;
+	}
+}