Spaces:

cduss
/

mini-finder

Running

App Files Files Community

cduss commited on Dec 21, 2025

Commit

fbc565a

1 Parent(s): 981516e

wip

Browse files

Files changed (1) hide show

index.html +392 -18

index.html CHANGED Viewed

@@ -1,19 +1,393 @@
-<!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 lang="en">
+<head>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<title>Reachy Mini Finder</title>
+	<style>
+		* {
+			margin: 0;
+			padding: 0;
+			box-sizing: border-box;
+		}
+		body {
+			font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+			background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+			min-height: 100vh;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			padding: 20px;
+		}
+		.container {
+			background: white;
+			border-radius: 20px;
+			padding: 40px;
+			max-width: 500px;
+			width: 100%;
+			box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+		}
+		h1 {
+			color: #333;
+			margin-bottom: 10px;
+			font-size: 28px;
+		}
+		.subtitle {
+			color: #666;
+			margin-bottom: 30px;
+			font-size: 14px;
+		}
+		.status {
+			background: #f5f5f5;
+			padding: 20px;
+			border-radius: 10px;
+			margin-bottom: 20px;
+			min-height: 120px;
+		}
+		.status-text {
+			color: #333;
+			line-height: 1.6;
+		}
+		.progress-bar {
+			width: 100%;
+			height: 6px;
+			background: #e0e0e0;
+			border-radius: 3px;
+			margin-top: 15px;
+			overflow: hidden;
+		}
+		.progress-fill {
+			height: 100%;
+			background: linear-gradient(90deg, #667eea, #764ba2);
+			width: 0%;
+			transition: width 0.3s ease;
+		}
+		button {
+			width: 100%;
+			padding: 15px;
+			background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+			color: white;
+			border: none;
+			border-radius: 10px;
+			font-size: 16px;
+			font-weight: 600;
+			cursor: pointer;
+			transition: transform 0.2s;
+		}
+		button:hover {
+			transform: translateY(-2px);
+		}
+		button:active {
+			transform: translateY(0);
+		}
+		button:disabled {
+			opacity: 0.6;
+			cursor: not-allowed;
+			transform: none;
+		}
+		.manual-input {
+			margin-top: 20px;
+			padding-top: 20px;
+			border-top: 1px solid #e0e0e0;
+		}
+		.manual-input input {
+			width: 100%;
+			padding: 12px;
+			border: 2px solid #e0e0e0;
+			border-radius: 8px;
+			font-size: 14px;
+			margin-bottom: 10px;
+		}
+		.manual-input input:focus {
+			outline: none;
+			border-color: #667eea;
+		}
+		.ip-list {
+			max-height: 200px;
+			overflow-y: auto;
+			margin-top: 10px;
+		}
+		.ip-item {
+			padding: 8px;
+			background: #f9f9f9;
+			margin-bottom: 5px;
+			border-radius: 5px;
+			font-size: 12px;
+			color: #666;
+			font-family: monospace;
+		}
+		.ip-item.checking {
+			background: #fff3cd;
+		}
+		.ip-item.found {
+			background: #d4edda;
+			color: #155724;
+			font-weight: 600;
+		}
+		.robot-info {
+			background: #e7f3ff;
+			padding: 15px;
+			border-radius: 8px;
+			margin-top: 15px;
+			font-size: 13px;
+			color: #004085;
+		}
+		.robot-info strong {
+			display: block;
+			margin-bottom: 5px;
+		}
+	</style>
+</head>
+<body>
+	<div class="container">
+		<h1>🤖 Reachy Mini Finder</h1>
+		<p class="subtitle">Automatically detect your Reachy Mini robot on the network</p>
+		<div class="status">
+			<div class="status-text" id="statusText">
+				Click "Find Reachy" to start scanning your network.
+			</div>
+			<div class="progress-bar">
+				<div class="progress-fill" id="progressBar"></div>
+			</div>
 		</div>
+		<button id="scanBtn" onclick="startScan()">Find Reachy</button>
+		<div class="manual-input">
+			<input type="text" id="manualIP" placeholder="Or enter IP manually (e.g., 192.168.1.100)" />
+			<button onclick="connectManual()">Connect</button>
+		</div>
+		<div class="ip-list" id="ipList"></div>
+		<div id="robotInfo"></div>
+	</div>
+	<script>
+		const PORT = 8000;
+		const TIMEOUT_MS = 500;
+		let scanning = false;
+		async function getLocalIP() {
+			return new Promise((resolve, reject) => {
+				const pc = new RTCPeerConnection({ iceServers: [] });
+				pc.createDataChannel('');
+				pc.createOffer().then(offer => pc.setLocalDescription(offer));
+				pc.onicecandidate = (ice) => {
+					if (!ice || !ice.candidate || !ice.candidate.candidate) return;
+					const match = /([0-9]{1,3}\.){3}[0-9]{1,3}/.exec(ice.candidate.candidate);
+					if (match) {
+						pc.close();
+						resolve(match[0]);
+					}
+				};
+				setTimeout(() => {
+					pc.close();
+					reject(new Error('Could not detect local IP'));
+				}, 5000);
+			});
+		}
+		async function tryIP(ip) {
+			const controller = new AbortController();
+			const timeoutId = setTimeout(() => controller.abort(), TIMEOUT_MS);
+			try {
+				const response = await fetch(`http://${ip}:${PORT}/api/daemon/status`, {
+					signal: controller.signal,
+					mode: 'cors'
+				});
+				clearTimeout(timeoutId);
+				if (response.ok) {
+					const data = await response.json();
+					return { ip, data };
+				}
+			} catch (err) {
+				// Timeout or connection refused
+			}
+			clearTimeout(timeoutId);
+			return null;
+		}
+		function updateStatus(text, progress = null) {
+			document.getElementById('statusText').innerHTML = text;
+			if (progress !== null) {
+				document.getElementById('progressBar').style.width = progress + '%';
+			}
+		}
+		function addIPToList(ip, status = 'checking') {
+			const ipList = document.getElementById('ipList');
+			const existing = document.getElementById('ip-' + ip.replace(/\./g, '-'));
+			if (existing) {
+				existing.className = 'ip-item ' + status;
+			} else {
+				const item = document.createElement('div');
+				item.id = 'ip-' + ip.replace(/\./g, '-');
+				item.className = 'ip-item ' + status;
+				item.textContent = status === 'found' ? `✓ Found: ${ip}` : `Checking: ${ip}`;
+				ipList.appendChild(item);
+			}
+		}
+		function showRobotInfo(ip, data) {
+			const infoDiv = document.getElementById('robotInfo');
+			infoDiv.innerHTML = `
+                <div class="robot-info">
+                    <strong>✅ Reachy Mini Found!</strong>
+                    IP: ${ip}<br>
+                    Server ID: ${data.server_id || 'N/A'}<br>
+                    Version: ${data.version || 'N/A'}
+                </div>
+            `;
+		}
+		async function startScan() {
+			if (scanning) return;
+			scanning = true;
+			const btn = document.getElementById('scanBtn');
+			btn.disabled = true;
+			btn.textContent = 'Scanning...';
+			document.getElementById('ipList').innerHTML = '';
+			document.getElementById('robotInfo').innerHTML = '';
+			try {
+				updateStatus('🔍 Detecting your phone\'s IP address...', 5);
+				const phoneIP = await getLocalIP();
+				const subnet = phoneIP.split('.').slice(0, 3).join('.');
+				updateStatus(`📡 Phone IP: ${phoneIP}<br>Scanning subnet: ${subnet}.0/24`, 10);
+				// Priority IPs to check first
+				const priorityIPs = [
+					`${subnet}.1`,   // Router
+					`${subnet}.100`, // Common DHCP start
+				];
+				// Build full scan list, excluding phone's IP
+				const allIPs = [];
+				for (let i = 1; i < 255; i++) {
+					const ip = `${subnet}.${i}`;
+					if (ip !== phoneIP) {
+						allIPs.push(ip);
+					}
+				}
+				// Put priority IPs first
+				const scanList = [
+					...priorityIPs.filter(ip => allIPs.includes(ip)),
+					...allIPs.filter(ip => !priorityIPs.includes(ip))
+				];
+				// Scan in batches of 20 for better responsiveness
+				const BATCH_SIZE = 20;
+				let scanned = 0;
+				for (let i = 0; i < scanList.length; i += BATCH_SIZE) {
+					const batch = scanList.slice(i, i + BATCH_SIZE);
+					// Show which IPs we're checking
+					batch.forEach(ip => addIPToList(ip, 'checking'));
+					const results = await Promise.all(batch.map(tryIP));
+					const found = results.find(r => r !== null);
+					scanned += batch.length;
+					const progress = 10 + (scanned / scanList.length) * 90;
+					updateStatus(
+						`🔍 Scanning: ${scanned}/${scanList.length} IPs checked...`,
+						progress
+					);
+					if (found) {
+						addIPToList(found.ip, 'found');
+						showRobotInfo(found.ip, found.data);
+						updateStatus(
+							`✅ Reachy Mini found at ${found.ip}!<br>Redirecting...`,
+							100
+						);
+						setTimeout(() => {
+							window.location.href = `http://${found.ip}:${PORT}`;
+						}, 2000);
+						return;
+					}
+				}
+				updateStatus(
+					`❌ No Reachy Mini found on ${subnet}.0/24<br>Please check:<br>
+                    • Robot is powered on<br>
+                    • Connected to same WiFi<br>
+                    • Daemon running on port ${PORT}<br>
+                    • Try manual IP below`,
+					100
+				);
+			} catch (err) {
+				updateStatus(
+					`⚠️ Error: ${err.message}<br>Try entering IP manually below`,
+					0
+				);
+			} finally {
+				scanning = false;
+				btn.disabled = false;
+				btn.textContent = 'Scan Again';
+			}
+		}
+		function connectManual() {
+			const ip = document.getElementById('manualIP').value.trim();
+			if (!ip) {
+				alert('Please enter an IP address');
+				return;
+			}
+			// Validate IP format
+			const ipRegex = /^(\d{1,3}\.){3}\d{1,3}$/;
+			if (!ipRegex.test(ip)) {
+				alert('Invalid IP format. Example: 192.168.1.100');
+				return;
+			}
+			updateStatus(`🔗 Connecting to ${ip}...`, 50);
+			window.location.href = `http://${ip}:${PORT}`;
+		}
+		// Allow Enter key in manual input
+		document.getElementById('manualIP').addEventListener('keypress', (e) => {
+			if (e.key === 'Enter') {
+				connectManual();
+			}
+		});
+	</script>
+</body>
+</html>