|
|
<!doctype html> |
|
|
<html> |
|
|
|
|
|
<head> |
|
|
<meta charset="utf-8" /> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" /> |
|
|
<title>Reachy Mini Karen Whisperer - Retail Assistant</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"> |
|
|
<span class="logo">🤖</span> |
|
|
<span class="brand-name">Reachy Mini Retail Assistant</span> |
|
|
</div> |
|
|
<div class="pill">De-escalation Pro · Signal Intelligence · Slack Integration</div> |
|
|
</div> |
|
|
<div class="hero-grid"> |
|
|
<div class="hero-copy"> |
|
|
<p class="eyebrow">aka The Karen Whisperer 🤖✨</p> |
|
|
<h1>Small robot. Big patience.</h1> |
|
|
<p class="lede"> |
|
|
De-escalation with built-in chill mode—he handles the "Can I speak to your manager?" so you don't have to. Features signal intelligence, pattern detection, and automatic Slack escalation. |
|
|
</p> |
|
|
<div class="hero-actions"> |
|
|
<a class="btn primary" href="https://huggingface.co/spaces/chelleboyer/reachy_mini_retail_assistant" target="_blank" rel="noopener noreferrer">Try Reachy Mini</a> |
|
|
<a class="btn ghost" href="#highlights">Explore features</a> |
|
|
</div> |
|
|
<div class="hero-badges"> |
|
|
<span>99% De-escalation Rate</span> |
|
|
<span><2s Response Time</span> |
|
|
<span>24/7 Always On</span> |
|
|
<span>Signal Intelligence</span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="hero-visual"> |
|
|
<div class="glass-card carousel-container"> |
|
|
<div class="carousel"> |
|
|
<div class="carousel-track"> |
|
|
<div class="carousel-slide active"> |
|
|
<img src="https://raw.githubusercontent.com/chelleboyer/reachy_mini_karen_whisperer/github-assets/images/1-reachy-mini-retail-assistant.PNG" alt="Reachy Mini Retail Assistant"> |
|
|
</div> |
|
|
<div class="carousel-slide"> |
|
|
<img src="https://raw.githubusercontent.com/chelleboyer/reachy_mini_karen_whisperer/github-assets/images/2-customer-asks-for-snackers.jpg" alt="Customer asks for Snackers"> |
|
|
</div> |
|
|
<div class="carousel-slide"> |
|
|
<img src="https://raw.githubusercontent.com/chelleboyer/reachy_mini_karen_whisperer/github-assets/images/3-reachy-mini-snackers-out-of-stock.png" alt="Reachy Mini: Snackers out of stock"> |
|
|
</div> |
|
|
<div class="carousel-slide"> |
|
|
<img src="https://raw.githubusercontent.com/chelleboyer/reachy_mini_karen_whisperer/github-assets/images/4-customer-unhappy.jpg" alt="Customer unhappy"> |
|
|
</div> |
|
|
<div class="carousel-slide"> |
|
|
<img src="https://raw.githubusercontent.com/chelleboyer/reachy_mini_karen_whisperer/github-assets/images/5-reachy-mini-calls-manager.png" alt="Reachy Mini calls manager"> |
|
|
</div> |
|
|
<div class="carousel-slide"> |
|
|
<img src="https://raw.githubusercontent.com/chelleboyer/reachy_mini_karen_whisperer/github-assets/images/6-manager-saves-the-day.PNG" alt="Manager saves the day"> |
|
|
</div> |
|
|
<div class="carousel-slide"> |
|
|
<img src="https://raw.githubusercontent.com/chelleboyer/reachy_mini_karen_whisperer/github-assets/images/7-final-shot-happy-customer.jpg" alt="Happy customer"> |
|
|
</div> |
|
|
</div> |
|
|
<button class="carousel-btn prev" aria-label="Previous slide">‹</button> |
|
|
<button class="carousel-btn next" aria-label="Next slide">›</button> |
|
|
<div class="carousel-indicators"> |
|
|
<span class="indicator active" data-slide="0"></span> |
|
|
<span class="indicator" data-slide="1"></span> |
|
|
<span class="indicator" data-slide="2"></span> |
|
|
<span class="indicator" data-slide="3"></span> |
|
|
<span class="indicator" data-slide="4"></span> |
|
|
<span class="indicator" data-slide="5"></span> |
|
|
<span class="indicator" data-slide="6"></span> |
|
|
</div> |
|
|
</div> |
|
|
<p class="caption">From "Can I speak to your manager?" to "Thank you!" — See how Reachy Mini handles the challenge.</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
<section id="highlights" class="section features"> |
|
|
<div class="section-header"> |
|
|
<p class="eyebrow">What Reachy Mini Can Do</p> |
|
|
<h2>Customer service superpowers, minus the cape</h2> |
|
|
<p class="intro"> |
|
|
Here's how Reachy keeps his cool while keeping customers happy. |
|
|
</p> |
|
|
</div> |
|
|
<div class="feature-grid"> |
|
|
<div class="feature-card"> |
|
|
<span class="icon">💬</span> |
|
|
<h3>Smart Q&A</h3> |
|
|
<p>Answers common questions about returns, prices, store hours, and policies instantly—no human needed.</p> |
|
|
</div> |
|
|
<div class="feature-card"> |
|
|
<span class="icon">🗺️</span> |
|
|
<h3>Aisle Navigation</h3> |
|
|
<p>Guides customers to the right product or aisle in seconds, reducing wait times and frustration.</p> |
|
|
</div> |
|
|
<div class="feature-card"> |
|
|
<span class="icon">�</span> |
|
|
<h3>Issue Detection</h3> |
|
|
<p>Spots out-of-stock items and inventory issues, flagging them instantly for your team via Slack.</p> |
|
|
</div> |
|
|
<div class="feature-card"> |
|
|
<span class="icon">�</span> |
|
|
<h3>De-escalation Pro</h3> |
|
|
<p>Calms tense situations with friendly, professional prompts designed to diffuse conflict.</p> |
|
|
</div> |
|
|
<div class="feature-card"> |
|
|
<span class="icon">🤝</span> |
|
|
<h3>Smooth Escalation</h3> |
|
|
<p>When it's actually time for a human, hands off gracefully—politely and drama-free.</p> |
|
|
</div> |
|
|
<div class="feature-card"> |
|
|
<span class="icon">⚡</span> |
|
|
<h3>Lightning Fast</h3> |
|
|
<p>Sub-2-second response times keep customers engaged and conversations flowing.</p> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
<section id="story" class="section story"> |
|
|
<div class="story-grid"> |
|
|
<div class="story-card"> |
|
|
<p class="eyebrow">How It Works</p> |
|
|
<h3>From "Can I speak to your manager?" to "Thank you so much!"</h3> |
|
|
<ul class="story-list"> |
|
|
<li><span>01</span> <b>Customer Approaches</b> — A customer asks a question, makes a request, or... starts getting spicy. Reachy Mini is ready.</li> |
|
|
<li><span>02</span> <b>Instant Analysis</b> — Reachy processes the request in milliseconds, understanding intent, emotion, and urgency.</li> |
|
|
<li><span>03</span> <b>Perfect Response</b> — Delivers a friendly, helpful answer—or gracefully escalates when a human touch is truly needed.</li> |
|
|
<li><span>📊</span> <b>Signal Intelligence</b> — Tracks patterns over time and autonomously escalates to Slack when intervention is warranted.</li> |
|
|
</ul> |
|
|
</div> |
|
|
<div class="story-card secondary"> |
|
|
<p class="eyebrow">Status: Chill Mode Active</p> |
|
|
<h3>Built-in retail intelligence</h3> |
|
|
<p class="story-text"> |
|
|
Reachy Mini doesn't just respond—it learns. Every interaction is recorded as a signal (intent, entity, resolution, confidence, sentiment). When patterns emerge (25+ requests for unavailable items, repeated confusion, frustration spikes), Reachy autonomously escalates to your team via Slack with evidence and recommendations. |
|
|
</p> |
|
|
<div class="chips"> |
|
|
<span class="chip">Signal Tracking</span> |
|
|
<span class="chip">Pattern Detection</span> |
|
|
<span class="chip">Slack Integration</span> |
|
|
<span class="chip">De-escalation</span> |
|
|
<span class="chip">Chill Mode</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
<footer class="footer"> |
|
|
<p> |
|
|
Reachy Mini Karen Whisperer - Customer service with built-in chill mode. Built on <a href="https://github.com/pollen-robotics/reachy_mini_conversation_app" target="_blank" rel="noopener">Reachy Mini Conversation App</a> by <a href="https://github.com/pollen-robotics" target="_blank" rel="noopener">Pollen Robotics</a>. |
|
|
Explore more on <a href="https://huggingface.co/spaces/chelleboyer/reachy_mini_karen_whisperer" target="_blank" rel="noopener">Hugging Face</a>. |
|
|
</p> |
|
|
</footer> |
|
|
|
|
|
<script> |
|
|
|
|
|
const track = document.querySelector('.carousel-track'); |
|
|
const slides = document.querySelectorAll('.carousel-slide'); |
|
|
const prevBtn = document.querySelector('.carousel-btn.prev'); |
|
|
const nextBtn = document.querySelector('.carousel-btn.next'); |
|
|
const indicators = document.querySelectorAll('.indicator'); |
|
|
let currentSlide = 0; |
|
|
let autoplayInterval; |
|
|
|
|
|
function goToSlide(index) { |
|
|
slides[currentSlide].classList.remove('active'); |
|
|
indicators[currentSlide].classList.remove('active'); |
|
|
|
|
|
currentSlide = (index + slides.length) % slides.length; |
|
|
|
|
|
slides[currentSlide].classList.add('active'); |
|
|
indicators[currentSlide].classList.add('active'); |
|
|
} |
|
|
|
|
|
function nextSlide() { |
|
|
goToSlide(currentSlide + 1); |
|
|
} |
|
|
|
|
|
function prevSlide() { |
|
|
goToSlide(currentSlide - 1); |
|
|
} |
|
|
|
|
|
function startAutoplay() { |
|
|
autoplayInterval = setInterval(nextSlide, 4000); |
|
|
} |
|
|
|
|
|
function stopAutoplay() { |
|
|
clearInterval(autoplayInterval); |
|
|
} |
|
|
|
|
|
|
|
|
prevBtn.addEventListener('click', () => { |
|
|
stopAutoplay(); |
|
|
prevSlide(); |
|
|
startAutoplay(); |
|
|
}); |
|
|
|
|
|
nextBtn.addEventListener('click', () => { |
|
|
stopAutoplay(); |
|
|
nextSlide(); |
|
|
startAutoplay(); |
|
|
}); |
|
|
|
|
|
indicators.forEach((indicator, index) => { |
|
|
indicator.addEventListener('click', () => { |
|
|
stopAutoplay(); |
|
|
goToSlide(index); |
|
|
startAutoplay(); |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
const carousel = document.querySelector('.carousel'); |
|
|
carousel.addEventListener('mouseenter', stopAutoplay); |
|
|
carousel.addEventListener('mouseleave', startAutoplay); |
|
|
|
|
|
|
|
|
startAutoplay(); |
|
|
</script> |
|
|
|
|
|
</body> |
|
|
|
|
|
</html> |
|
|
|
