Spaces:

MethdAI
/

receptionist-app

Running

mukul-chauhan-methdai Claude Opus 4.7 commited on May 26

Commit

bbafb94

1 Parent(s): 53c0e3e

Restore Reachy Mini app Space landing page

Per the official Pollen Robotics 'Make and publish your Reachy Mini App'
guide, index.html + style.css at repo root are the Space's landing page
(not Gradio app files). I incorrectly removed them in 9b1f90c as 'fork
artifacts' — they're actually a required part of the Reachy Mini app
template. Restored from history and rebranded:

- Footer: 'Built by MethdAI' (was 'by Toon Beerten')
- Brand block: shows MethdAI logo + 'MethdAI Receptionist' text
- Page title: 'MethdAI Receptionist - Reachy Mini App'

README frontmatter:
- sdk: gradio -> sdk: static (HF should serve the landing page, not try
to build a Gradio app that needs hardware — was producing the red
'Runtime error' badge on the Space)
- Drop app_file (not needed for static)
- Add tags: reachy-mini / robotics / receptionist for discoverability

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

Files changed (3) hide show

README.md +5 -2
index.html +142 -0
style.css +437 -0

README.md CHANGED Viewed

@@ -3,11 +3,14 @@ title: MethdAI Receptionist
 emoji: 🤖
 colorFrom: indigo
 colorTo: purple
-sdk: gradio
-app_file: src/reachy_mini_receptionist/main.py
 pinned: false
 license: apache-2.0
 short_description: Voice + face recognition receptionist for Reachy Mini
 ---
 # MethdAI Receptionist

 emoji: 🤖
 colorFrom: indigo
 colorTo: purple
+sdk: static
 pinned: false
 license: apache-2.0
 short_description: Voice + face recognition receptionist for Reachy Mini
+tags:
+  - reachy-mini
+  - robotics
+  - receptionist
 ---
 # MethdAI Receptionist

index.html ADDED Viewed

	@@ -0,0 +1,142 @@

+<!doctype html>
+<html>
+<head>
+	<meta charset="utf-8" />
+	<meta name="viewport" content="width=device-width, initial-scale=1" />
+	<title>MethdAI Receptionist — 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">
+		<div class="topline">
+			<div class="brand">
+				<img src="src/reachy_mini_receptionist/static/logo.png" alt="MethdAI" class="brand-logo" onerror="this.style.display='none'; this.nextElementSibling.style.display='inline';" />
+				<span class="logo" style="display:none">🤖</span>
+				<span class="brand-name">MethdAI Receptionist</span>
+			</div>
+			<div class="pill">Realtime voice · Vision aware · Expressive motion</div>
+		</div>
+		<div class="hero-grid">
+			<div class="hero-copy">
+				<p class="eyebrow">AI Receptionist</p>
+				<h1>
+					Face-aware receptionist with tool-calling automation.
+					<a class="live-demo-badge" href="#live-demo">Live demo</a>
+				</h1>
+				<p class="lede">
+					A camera-aware front-desk assistant for Reachy Mini. Greet visitors naturally, register guests, check appointments, and log handoff actions from a single dashboard.
+				</p>
+				<p class="lede">
+					Built for reception workflows: realtime face detection to know when someone is present, face recognition to personalize interactions, and structured tool calls so the AI can register guests, query appointments, and trigger handoff actions reliably.
+				</p>
+				<div class="hero-actions">
+					<a class="btn primary" href="#highlights">Explore features</a>
+					<a class="btn ghost" href="#story">See how it feels</a>
+				</div>
+				<div class="hero-badges">
+					<span>Realtime face detection</span>
+					<span>Visitor face recognition</span>
+					<span>Model tool-calling workflows</span>
+					<span>Low-latency voice + dashboard ops</span>
+				</div>
+			</div>
+			<div class="hero-visual">
+				<div class="glass-card">
+					<img src="screenshot.png" alt="Reachy Mini AI Receptionist screenshot" class="hero-gif">
+					<p class="caption">Reachy Mini can greet, identify, and assist visitors with receptionist-specific context.</p>
+					<div class="video-embed-wrapper" id="live-demo">
+						<iframe
+							src="https://www.youtube.com/embed/4U9uj5b9p2Y"
+							title="Reachy Mini AI Receptionist live demo"
+							loading="lazy"
+							allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+							allowfullscreen>
+						</iframe>
+					</div>
+					<p class="video-link"><a href="https://youtu.be/4U9uj5b9p2Y" target="_blank" rel="noopener">Watch on YouTube</a></p>
+				</div>
+			</div>
+		</div>
+	</header>
+	<section id="highlights" class="section features">
+		<div class="section-header">
+			<p class="eyebrow">What’s inside</p>
+			<h2>All-in-one receptionist layer for your robot</h2>
+			<p class="intro">
+				The app blends realtime speech, vision, and workflow tools so Reachy Mini can run a front desk flow.
+			</p>
+		</div>
+		<div class="feature-grid">
+			<div class="feature-card">
+				<span class="icon">🎤</span>
+				<h3>Natural voice chat</h3>
+				<p>Talk freely and get fast, high-quality replies powered by realtime models.</p>
+			</div>
+			<div class="feature-card">
+				<span class="icon">🎥</span>
+				<h3>Face-aware onboarding</h3>
+				<p>Recognize known visitors, register new guests, and keep the latest face context synced with the conversation.</p>
+			</div>
+			<div class="feature-card">
+				<span class="icon">💃</span>
+				<h3>Expressive motion</h3>
+				<p>Use subtle head and antenna gestures during welcome and registration interactions.</p>
+			</div>
+			<div class="feature-card">
+				<span class="icon">🧠</span>
+				<h3>Calendar-aware assistance</h3>
+				<p>Use appointment context to welcome guests on time and guide follow-up actions.</p>
+			</div>
+			<div class="feature-card">
+				<span class="icon">🌐</span>
+				<h3>Ready for your setup</h3>
+				<p>Works in console mode or web mode with dashboard APIs for quick operator visibility.</p>
+			</div>
+		</div>
+	</section>
+	<section id="story" class="section story">
+		<div class="story-grid">
+			<div class="story-card">
+				<p class="eyebrow">How it feels</p>
+				<h3>From greeting to handoff in seconds</h3>
+				<ul class="story-list">
+					<li><span>👋</span> Greet visitors naturally with low-latency voice conversation.</li>
+					<li><span>👀</span> Use camera context to identify known guests or register new ones.</li>
+					<li><span>📅</span> Check appointment context and respond with relevant timing cues.</li>
+					<li><span>📨</span> Log handoff actions in the outbox for host follow-up.</li>
+				</ul>
+			</div>
+			<div class="story-card secondary">
+				<p class="eyebrow">Where it shines</p>
+				<h3>Great for offices, demos, and guided reception flows</h3>
+				<p class="story-text">
+					Show how Reachy Mini can handle repeatable visitor workflows while staying expressive and conversational. It is ideal for front-desk demos, events, and product showcases.
+				</p>
+				<div class="chips">
+					<span class="chip">Guest recognition</span>
+					<span class="chip">Calendar check</span>
+					<span class="chip">Outbox logging</span>
+					<span class="chip">Dashboard APIs</span>
+					<span class="chip">Realtime conversation</span>
+				</div>
+			</div>
+		</div>
+	</section>
+	<footer class="footer">
+		<p>
+			Built by <a href="https://methdai.com" target="_blank" rel="noopener">MethdAI</a>, based on the Reachy Mini conversation app by <a href="https://github.com/pollen-robotics" target="_blank" rel="noopener">Pollen Robotics</a>.
+			Explore more apps on <a href="https://huggingface.co/spaces/pollen-robotics/Reachy_Mini_Apps" target="_blank" rel="noopener">Hugging Face Spaces</a>.
+		</p>
+	</footer>
+</body>
+</html>

style.css ADDED Viewed

	@@ -0,0 +1,437 @@

+:root {
+	--bg: #060c1d;
+	--panel: #0c172b;
+	--glass: rgba(17, 27, 48, 0.7);
+	--card: rgba(255, 255, 255, 0.04);
+	--accent: #7af5c4;
+	--accent-2: #f6c452;
+	--text: #e8edf7;
+	--muted: #9fb3ce;
+	--border: rgba(255, 255, 255, 0.08);
+	--shadow: 0 25px 70px rgba(0, 0, 0, 0.45);
+	font-family: "Space Grotesk", "Manrope", system-ui, -apple-system, sans-serif;
+}
+* {
+	margin: 0;
+	padding: 0;
+	box-sizing: border-box;
+}
+body {
+	background: radial-gradient(circle at 20% 20%, rgba(122, 245, 196, 0.12), transparent 30%),
+		radial-gradient(circle at 80% 0%, rgba(246, 196, 82, 0.14), transparent 32%),
+		radial-gradient(circle at 50% 70%, rgba(124, 142, 255, 0.1), transparent 30%),
+		var(--bg);
+	color: var(--text);
+	min-height: 100vh;
+	line-height: 1.6;
+	padding-bottom: 3rem;
+}
+a {
+	color: inherit;
+	text-decoration: none;
+}
+.hero {
+	padding: 3.5rem clamp(1.5rem, 3vw, 3rem) 2.5rem;
+	position: relative;
+	overflow: hidden;
+}
+.hero::after {
+	content: "";
+	position: absolute;
+	inset: 0;
+	background: linear-gradient(120deg, rgba(122, 245, 196, 0.12), rgba(246, 196, 82, 0.08), transparent);
+	pointer-events: none;
+}
+.topline {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	max-width: 1200px;
+	margin: 0 auto 2rem;
+	position: relative;
+	z-index: 2;
+}
+.brand {
+	display: flex;
+	align-items: center;
+	gap: 0.5rem;
+	font-weight: 700;
+	letter-spacing: 0.5px;
+	color: var(--text);
+}
+.logo {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	width: 2.2rem;
+	height: 2.2rem;
+	border-radius: 10px;
+	background: linear-gradient(145deg, rgba(122, 245, 196, 0.15), rgba(124, 142, 255, 0.15));
+	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
+}
+.brand-name {
+	font-size: 1.1rem;
+}
+.pill {
+	background: rgba(255, 255, 255, 0.06);
+	border: 1px solid var(--border);
+	padding: 0.6rem 1rem;
+	border-radius: 999px;
+	color: var(--muted);
+	font-size: 0.9rem;
+	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
+}
+.hero-grid {
+	display: grid;
+	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+	gap: clamp(1.5rem, 2.5vw, 2.5rem);
+	max-width: 1200px;
+	margin: 0 auto;
+	position: relative;
+	z-index: 2;
+	align-items: center;
+}
+.hero-copy h1 {
+	font-size: clamp(2.6rem, 4vw, 3.6rem);
+	margin-bottom: 1rem;
+	line-height: 1.1;
+	letter-spacing: -0.5px;
+}
+.live-demo-badge {
+	display: inline-flex;
+	align-items: center;
+	margin-left: 0.65rem;
+	padding: 0.2rem 0.55rem;
+	font-size: 0.34em;
+	line-height: 1;
+	letter-spacing: 0.02em;
+	font-weight: 600;
+	border-radius: 999px;
+	border: 1px solid var(--border);
+	color: var(--muted);
+	background: rgba(255, 255, 255, 0.04);
+	vertical-align: middle;
+}
+.live-demo-badge:hover {
+	color: var(--text);
+	border-color: rgba(255, 255, 255, 0.22);
+	background: rgba(255, 255, 255, 0.07);
+}
+.eyebrow {
+	display: inline-flex;
+	align-items: center;
+	gap: 0.5rem;
+	text-transform: uppercase;
+	letter-spacing: 1px;
+	font-size: 0.8rem;
+	color: var(--muted);
+	margin-bottom: 0.75rem;
+}
+.eyebrow::before {
+	content: "";
+	display: inline-block;
+	width: 24px;
+	height: 2px;
+	background: linear-gradient(90deg, var(--accent), var(--accent-2));
+	border-radius: 999px;
+}
+.lede {
+	font-size: 1.1rem;
+	color: var(--muted);
+	max-width: 620px;
+}
+.hero-actions {
+	display: flex;
+	gap: 1rem;
+	align-items: center;
+	margin: 1.6rem 0 1.2rem;
+	flex-wrap: wrap;
+}
+.btn {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	gap: 0.6rem;
+	padding: 0.85rem 1.4rem;
+	border-radius: 12px;
+	font-weight: 700;
+	border: 1px solid transparent;
+	cursor: pointer;
+	transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease;
+}
+.btn.primary {
+	background: linear-gradient(135deg, #7af5c4, #7c8eff);
+	color: #0a0f1f;
+	box-shadow: 0 15px 30px rgba(122, 245, 196, 0.25);
+}
+.btn.primary:hover {
+	transform: translateY(-2px);
+	box-shadow: 0 25px 45px rgba(122, 245, 196, 0.35);
+}
+.btn.ghost {
+	background: rgba(255, 255, 255, 0.05);
+	border-color: var(--border);
+	color: var(--text);
+}
+.btn.ghost:hover {
+	border-color: rgba(255, 255, 255, 0.3);
+	transform: translateY(-2px);
+}
+.btn.wide {
+	width: 100%;
+	justify-content: center;
+}
+.hero-badges {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 0.6rem;
+	color: var(--muted);
+	font-size: 0.9rem;
+}
+.hero-badges span {
+	padding: 0.5rem 0.8rem;
+	border-radius: 10px;
+	border: 1px solid var(--border);
+	background: rgba(255, 255, 255, 0.04);
+}
+.hero-visual .glass-card {
+	background: rgba(255, 255, 255, 0.03);
+	border: 1px solid var(--border);
+	border-radius: 18px;
+	padding: 1.2rem;
+	box-shadow: var(--shadow);
+	backdrop-filter: blur(10px);
+}
+.hero-gif {
+	width: 100%;
+	display: block;
+	border-radius: 14px;
+	border: 1px solid var(--border);
+	box-shadow: 0 12px 35px rgba(0, 0, 0, 0.35);
+}
+.caption {
+	margin-top: 0.75rem;
+	color: var(--muted);
+	font-size: 0.95rem;
+}
+.video-embed-wrapper {
+	margin-top: 0.9rem;
+	position: relative;
+	width: 100%;
+	aspect-ratio: 16 / 9;
+	border-radius: 12px;
+	overflow: hidden;
+	border: 1px solid var(--border);
+	background: rgba(0, 0, 0, 0.35);
+}
+.video-embed-wrapper iframe {
+	width: 100%;
+	height: 100%;
+	display: block;
+	border: 0;
+}
+.video-link {
+	margin-top: 0.55rem;
+	font-size: 0.85rem;
+	color: var(--muted);
+}
+.video-link a {
+	text-decoration: underline;
+	text-underline-offset: 2px;
+}
+.section {
+	max-width: 1200px;
+	margin: 0 auto;
+	padding: clamp(2rem, 4vw, 3.5rem) clamp(1.5rem, 3vw, 3rem);
+}
+.section-header {
+	text-align: center;
+	max-width: 780px;
+	margin: 0 auto 2rem;
+}
+.section-header h2 {
+	font-size: clamp(2rem, 3vw, 2.6rem);
+	margin-bottom: 0.5rem;
+}
+.intro {
+	color: var(--muted);
+	font-size: 1.05rem;
+}
+.feature-grid {
+	display: grid;
+	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+	gap: 1rem;
+}
+.feature-card {
+	background: rgba(255, 255, 255, 0.03);
+	border: 1px solid var(--border);
+	border-radius: 16px;
+	padding: 1.25rem;
+	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
+	transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
+}
+.feature-card:hover {
+	transform: translateY(-4px);
+	border-color: rgba(122, 245, 196, 0.3);
+	box-shadow: 0 18px 40px rgba(0, 0, 0, 0.3);
+}
+.feature-card .icon {
+	width: 48px;
+	height: 48px;
+	border-radius: 12px;
+	display: grid;
+	place-items: center;
+	background: rgba(122, 245, 196, 0.14);
+	margin-bottom: 0.8rem;
+	font-size: 1.4rem;
+}
+.feature-card h3 {
+	margin-bottom: 0.35rem;
+}
+.feature-card p {
+	color: var(--muted);
+}
+.story {
+	padding-top: 1rem;
+}
+.story-grid {
+	display: grid;
+	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+	gap: 1rem;
+}
+.story-card {
+	background: rgba(255, 255, 255, 0.03);
+	border: 1px solid var(--border);
+	border-radius: 18px;
+	padding: 1.5rem;
+	box-shadow: var(--shadow);
+}
+.story-card.secondary {
+	background: linear-gradient(145deg, rgba(124, 142, 255, 0.08), rgba(122, 245, 196, 0.06));
+}
+.story-card h3 {
+	margin-bottom: 0.8rem;
+}
+.story-list {
+	list-style: none;
+	display: grid;
+	gap: 0.7rem;
+	color: var(--muted);
+	font-size: 0.98rem;
+}
+.story-list li {
+	display: flex;
+	gap: 0.7rem;
+	align-items: flex-start;
+}
+.story-text {
+	color: var(--muted);
+	line-height: 1.7;
+	margin-bottom: 1rem;
+}
+.chips {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 0.5rem;
+}
+.chip {
+	padding: 0.45rem 0.8rem;
+	border-radius: 12px;
+	background: rgba(0, 0, 0, 0.2);
+	border: 1px solid var(--border);
+	color: var(--text);
+	font-size: 0.9rem;
+}
+.footer {
+	text-align: center;
+	color: var(--muted);
+	padding: 2rem 1.5rem 0;
+}
+.footer a {
+	color: var(--text);
+	border-bottom: 1px solid transparent;
+}
+.footer a:hover {
+	border-color: rgba(255, 255, 255, 0.5);
+}
+@media (max-width: 768px) {
+	.hero {
+		padding-top: 2.5rem;
+	}
+	.topline {
+		flex-direction: column;
+		gap: 0.8rem;
+		align-items: flex-start;
+	}
+	.hero-actions {
+		width: 100%;
+	}
+	.btn {
+		width: 100%;
+		justify-content: center;
+	}
+	.hero-badges {
+		gap: 0.4rem;
+	}
+}