Hugging Face's logo

Spaces:
itsMarco-G
/
reachy_phone_home
Running

App Files Community
reachy_phone_home / index.html
itsMarco-G's picture
itsMarco-G
Adding demo link
bfed06f
raw
history blame
10.7 kB
 <!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="description" content="Reachy Phone Home: a tiny focus buddy that tracks your phone and reacts with emotions and movements." />
<meta name="theme-color" content="#0f1115" />
<title>Reachy Phone Home • Reachy Mini App</title>
<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=Space+Grotesk:wght@400;500;600;700&family=Manrope:wght@400;500;600&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<header class="hero" id="top">
<div class="wrap">
<div class="topline">
<div class="brand" aria-label="Brand">
<span class="logo" aria-hidden="true">📱</span>
<span class="brand-name">Reachy Mini</span>
</div>
</div>
<div class="hero-grid">
<div class="hero-copy">
<nav class="page-nav" aria-label="Page navigation">
<a
class="btn"
href="https://www.linkedin.com/posts/marcodomingo_nvidiagtc-edgeai-physicalai-activity-7426592008334397440-oQ67?utm_source=social_share_send&utm_medium=member_desktop_web&rcm=ACoAAB_g7q0BSVro1tLCKRRRIVo_DBFF19EyTcY"
target="_blank"
rel="noopener noreferrer"
aria-label="Demo (opens a new tab to LinkedIn)"
>
Demo <span class="btn-note">(opens new tab)</span>
</a>
<a class="btn" href="#features">Features</a>
<a class="btn" href="#webapp">Web App</a>
<a class="btn ghost" href="#quickstart">Quick start</a>
</nav>
<h1>Reachy Phone Home</h1>
<p class="lede">
E.T. wanted to phone home. Reachy wants your phone to <em>stay</em> home. Camera-based tracking watches your phone's designated spot.
</p>
<div class="hero-badges" aria-label="Highlights">
<div class="badges-row benefits">
<span>Real-time tracking</span>
<span>Expressive reactions</span>
<span>Voice + motion</span>
<span>Runs locally</span>
</div>
<div class="badges-row tech-stack">
<span>Arm</span>
<span>Ultralytics YOLO26</span>
<span>Eleven Labs</span>
<span>Hugging Face</span>
<span>Pollen Robotics</span>
</div>
</div>
</div>
<div class="hero-visual">
<div class="glass-card">
<div class="media" role="img" aria-label="Reachy Phone Home demo">
<div class="media-inner">
<img
src="reachy_phone_home/assets/reachy-phone-home.gif"
alt="Reachy Phone Home demo showing phone tracking and reactions"
class="hero-media"
loading="eager"
/>
</div>
</div>
<p class="caption">
</p>
</div>
</div>
</div>
</div>
</header>
<main class="wrap">
<section id="features" class="section features" aria-label="Features">
<div class="section-header">
<p class="eyebrow">Features</p>
<h2>A gentle focus loop with personality</h2>
<p class="intro">
Designed for a desk setup: simple, playful, and obvious when you drift.
</p>
</div>
<div class="feature-grid">
<div class="feature-card">
<img
src="reachy_phone_home/assets/detection.gif"
alt="Phone and person detection in action"
class="feature-image"
loading="lazy"
/>
<h3>Phone + person detection</h3>
<p>YOLO-based vision to spot your phone and understand context.</p>
</div>
<div class="feature-card">
<img
src="reachy_phone_home/assets/reachy-reacts.gif"
alt="Reachy expressing emotions and reactions"
class="feature-image"
loading="lazy"
/>
<h3>Expressive reactions</h3>
<p>Movements + emotion make accountability feel like a companion, not a timer.</p>
</div>
<div class="feature-card">
<img
src="reachy_phone_home/assets/phone-home-zone.gif"
alt="Phone home zone tracking demonstration"
class="feature-image"
loading="lazy"
/>
<h3>Home zone tracking</h3>
<p>Define a "home" spot in front of the camera. Phone stays home? Focus vibes.</p>
</div>
</div>
</section>
<section id="webapp" class="section webapp" aria-label="Web App">
<div class="section-header">
<p class="eyebrow">Web interface</p>
<h2>Monitor and tune from your browser</h2>
<p class="intro">
Access Reachy's live status and tweak behavior for real-time feedback.
</p>
</div>
<div class="webapp-grid">
<div class="webapp-visual">
<div class="glass-card">
<div class="media" role="img" aria-label="Web app interface">
<div class="media-inner">
<img
src="reachy_phone_home/assets/web-app.gif"
alt="Web app interface showing live status and settings"
class="hero-media"
loading="lazy"
/>
</div>
</div>
<p class="caption">
</p>
</div>
</div>
<div class="webapp-copy">
<h3>See what Reachy sees</h3>
<ul class="list">
<li><span aria-hidden="true">📊</span> Live status of phone detection and current behavior state.</li>
<li><span aria-hidden="true">⏱️</span> Adjust behavior timings (how long before Reachy reacts).</li>
<li><span aria-hidden="true">🔊</span> Toggle audio quips. While Reachy is cute, it can be distracting or can bother others</li>
<li><span aria-hidden="true">⚙️</span> Fine-tune detection confidence and processing intervals.</li>
</ul>
<p class="note">
The web interface runs locally alongside the app—no cloud required.
</p>
</div>
</div>
</section>
<section id="quickstart" class="section quickstart" aria-label="Quick start">
<div class="section-header">
<p class="eyebrow">Quick start</p>
<h2>Install via the Reachy Mini Control App (Recommended)</h2>
</div>
<div class="install-grid" aria-label="Recommended install">
<div class="install-copy">
<p class="eyebrow">Option A</p>
<h3>Download the app & run</h3>
<p class="intro">
Recommended if you just want it working fast on Reachy Mini.
</p>
<ul class="list compact">
<li><span aria-hidden="true">📍</span> Place your phone in front of Reachy (camera view).</li>
<li><span aria-hidden="true">▶️</span> Launch it and let Reachy track the phone “home” zone.</li>
</ul>
<p class="note">
Note: the first run may download YOLO weights automatically.
</p>
</div>
<div class="install-visual">
<div class="glass-card">
<div class="media" role="img" aria-label="Installation process">
<div class="media-inner">
<img
src="reachy_phone_home/assets/install.gif"
alt="Installation process demonstration"
class="hero-media"
loading="lazy"
/>
</div>
</div>
<p class="caption">
</p>
</div>
</div>
</div>
<div class="optional" aria-label="Optional developer route">
<details class="optional-card">
<summary>
<span class="eyebrow">Option B (optional)</span>
<h3>Clone & run with Python</h3>
<p class="intro">Best for development and tweaking thresholds/behaviors.</p>
</summary>
<div class="optional-content">
<div class="codeblock" role="group" aria-label="Clone and run">
<div class="codeblock-title">Clone and run</div>
<pre><code>git clone &lt;YOUR_REPO_URL&gt;
cd reachy_mini/reachy_phone_home
python reachy_phone_home_app.py</code></pre>
</div>
<div class="codeblock" role="group" aria-label="Example flags">
<div class="codeblock-title">Example flags</div>
<pre><code>python reachy_phone_home_app.py --conf 0.15 --process-every 1</code></pre>
</div>
</div>
</details>
</div>
<div class="optional" aria-label="Simulation mode">
<details class="optional-card">
<summary>
<span class="eyebrow">Option C (simulation)</span>
<h3>Run without Reachy hardware</h3>
<p class="intro">Test the app using simulation if you don't have a physical Reachy Mini.</p>
</summary>
<div class="optional-content">
<p>Install the same way as Option A through the Reachy Mini Control app, but select <strong>Simulation</strong> mode instead of connecting to physical hardware.</p>
<p class="note">
<strong>Note:</strong> Simulation mode uses your webcam for phone detection, but Reachy's head movements won't change the camera POV—you'll miss the full "tracking" experience. Great for testing detection logic.
</p>
</div>
</details>
</div>
</section>
<footer class="footer" aria-label="Footer">
<p>
Reachy Phone Home — Reachy Mini App.
<a href="#top">Back to top</a> · <a href="README.md">README</a>
</p>
</footer>
</main>
</body>
</html>