hand_tracker_app / index.html
cduss's picture
init
b44cc91
raw
history blame
7.35 kB
<!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>