Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <title>Chess Emotions - Play chess while Reachy Mini reacts!</title> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet"> | |
| <style> | |
| *, *::before, *::after { | |
| box-sizing: border-box; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| :root { | |
| --background: #F6F6F8; | |
| --foreground: #333333; | |
| --card: hsl(0 0% 100%); | |
| --card-foreground: hsl(240 10% 3.9%); | |
| --primary: #FF9900; | |
| --primary-foreground: hsl(0 0% 100%); | |
| --muted: #E8E8EB; | |
| --muted-foreground: #878789; | |
| --border: #E0E0E0; | |
| } | |
| body { | |
| font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; | |
| background-color: var(--background); | |
| color: var(--foreground); | |
| line-height: 1.6; | |
| min-height: 100vh; | |
| } | |
| .container { | |
| max-width: 90rem; | |
| margin: 0 auto; | |
| padding: 0 1.5rem; | |
| } | |
| /* Hero Section */ | |
| .hero { | |
| padding: 4rem 0; | |
| } | |
| .hero-grid { | |
| display: grid; | |
| grid-template-columns: 1fr; | |
| gap: 3rem; | |
| align-items: center; | |
| } | |
| @media (min-width: 768px) { | |
| .hero-grid { | |
| grid-template-columns: 3fr 1fr; | |
| } | |
| } | |
| .hero video { | |
| width: 100%; | |
| max-width: 1400px; | |
| border-radius: 0.5rem; | |
| box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); | |
| } | |
| .hero-content { | |
| text-align: left; | |
| } | |
| .hero-title-wrapper { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 1rem; | |
| margin-bottom: 1.5rem; | |
| } | |
| .hero-emoji { | |
| font-size: 3.75rem; | |
| } | |
| .hero-title { | |
| font-size: 3rem; | |
| font-weight: 700; | |
| color: var(--foreground); | |
| } | |
| .tags { | |
| display: flex; | |
| flex-wrap: wrap; | |
| justify-content: center; | |
| gap: 0.5rem; | |
| margin-bottom: 1.5rem; | |
| } | |
| .tag { | |
| display: inline-flex; | |
| align-items: center; | |
| padding: 0.25rem 0.75rem; | |
| font-size: 0.75rem; | |
| font-weight: 500; | |
| border-radius: 9999px; | |
| background-color: rgba(255, 153, 0, 0.15); | |
| color: var(--primary); | |
| } | |
| .hero-description { | |
| font-size: 1.125rem; | |
| color: var(--muted-foreground); | |
| max-width: 600px; | |
| margin: 0 auto; | |
| } | |
| .hero-description strong { | |
| color: var(--foreground); | |
| } | |
| /* Technical Section */ | |
| .technical { | |
| padding: 4rem 0; | |
| background-color: var(--card); | |
| } | |
| .technical-grid { | |
| display: grid; | |
| grid-template-columns: 1fr; | |
| gap: 4rem; | |
| align-items: flex-start; | |
| } | |
| @media (min-width: 768px) { | |
| .technical-grid { | |
| grid-template-columns: 1fr 1fr; | |
| } | |
| } | |
| .technical h2 { | |
| font-size: 1.5rem; | |
| font-weight: 700; | |
| color: var(--foreground); | |
| margin-bottom: 1rem; | |
| margin-top: 2rem; | |
| } | |
| .steps { | |
| list-style: none; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 1rem; | |
| } | |
| .step { | |
| display: flex; | |
| align-items: flex-start; | |
| gap: 1rem; | |
| color: var(--muted-foreground); | |
| } | |
| .step-number { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| min-width: 1.75rem; | |
| height: 1.75rem; | |
| border-radius: 9999px; | |
| background-color: var(--primary); | |
| color: white; | |
| font-size: 0.875rem; | |
| font-weight: 600; | |
| } | |
| .step-content { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 0.25rem; | |
| } | |
| .step-title { | |
| font-size: 0.875rem; | |
| font-weight: 600; | |
| color: var(--foreground); | |
| } | |
| .step-body { | |
| font-size: 0.875rem; | |
| color: var(--muted-foreground); | |
| } | |
| .step-body a { | |
| color: var(--muted-foreground); | |
| text-decoration: underline; | |
| transition: color 0.2s; | |
| } | |
| .step-body a:hover { | |
| color: var(--primary); | |
| } | |
| /* Emotion Table */ | |
| .emotion-section { | |
| margin-top: 2rem; | |
| } | |
| .emotion-table { | |
| width: 100%; | |
| border-collapse: collapse; | |
| font-size: 0.875rem; | |
| margin-top: 1rem; | |
| } | |
| .emotion-table th, | |
| .emotion-table td { | |
| padding: 0.75rem; | |
| text-align: left; | |
| border-bottom: 1px solid var(--border); | |
| } | |
| .emotion-table th { | |
| font-weight: 600; | |
| color: var(--foreground); | |
| background-color: var(--muted); | |
| } | |
| .emotion-table td { | |
| color: var(--muted-foreground); | |
| } | |
| .emotion-table tr:hover td { | |
| background-color: rgba(255, 153, 0, 0.05); | |
| } | |
| /* Footer */ | |
| footer { | |
| background-color: var(--background); | |
| border-top: 1px solid var(--border); | |
| padding: 3rem 0; | |
| } | |
| .footer-grid { | |
| display: grid; | |
| grid-template-columns: 1fr; | |
| gap: 2rem; | |
| margin-bottom: 2rem; | |
| } | |
| @media (min-width: 768px) { | |
| .footer-grid { | |
| grid-template-columns: repeat(3, 1fr); | |
| } | |
| } | |
| .footer-section h4 { | |
| font-size: 0.875rem; | |
| font-weight: 600; | |
| color: var(--foreground); | |
| margin-bottom: 0.75rem; | |
| } | |
| .footer-section ul { | |
| list-style: none; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 0.5rem; | |
| } | |
| .footer-section a { | |
| font-size: 0.875rem; | |
| color: var(--muted-foreground); | |
| text-decoration: none; | |
| transition: color 0.2s; | |
| } | |
| .footer-section a:hover { | |
| color: var(--primary); | |
| } | |
| .social-links { | |
| display: flex; | |
| gap: 0.75rem; | |
| } | |
| .social-link { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| width: 2.25rem; | |
| height: 2.25rem; | |
| border-radius: 9999px; | |
| background-color: var(--muted); | |
| color: var(--muted-foreground); | |
| transition: all 0.2s; | |
| } | |
| .social-link:hover { | |
| background-color: var(--primary); | |
| color: white; | |
| } | |
| .social-link svg { | |
| width: 1.25rem; | |
| height: 1.25rem; | |
| } | |
| .footer-credit { | |
| font-size: 0.875rem; | |
| color: var(--muted-foreground); | |
| text-align: center; | |
| padding-top: 1.5rem; | |
| border-top: 1px solid var(--border); | |
| } | |
| .footer-credit a { | |
| color: var(--foreground); | |
| font-weight: 600; | |
| text-decoration: none; | |
| transition: color 0.2s; | |
| } | |
| .footer-credit a:hover { | |
| color: var(--primary); | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Hero Section --> | |
| <section class="hero"> | |
| <div class="container"> | |
| <div class="hero-grid"> | |
| <div> | |
| <video autoplay loop muted playsinline> | |
| <source src="chess_emotions_app/assets/chess_cut.mp4" type="video/mp4" /> | |
| </video> | |
| </div> | |
| <div class="hero-content"> | |
| <div class="hero-title-wrapper"> | |
| <span class="hero-emoji">♟️</span> | |
| <h1 class="hero-title">Chess Emotions</h1> | |
| </div> | |
| <div class="tags"> | |
| <span class="tag">chess</span> | |
| <span class="tag">emotions</span> | |
| <span class="tag">games</span> | |
| <span class="tag">Stockfish</span> | |
| </div> | |
| <p class="hero-description"> | |
| <strong>Play chess against Stockfish while Reachy Mini reacts!</strong><br /> | |
| Here's the twist: Reachy is rooting for Stockfish. Make a brilliant move and watch Reachy get nervous. Blunder your queen? Reachy celebrates! | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Technical Section --> | |
| <section class="technical"> | |
| <div class="container"> | |
| <div class="technical-grid"> | |
| <div> | |
| <h2>How it works</h2> | |
| <ol class="steps"> | |
| <li class="step"> | |
| <span class="step-number">1</span> | |
| <div class="step-content"> | |
| <div class="step-title">Connect Reachy Mini & launch the app</div> | |
| <div class="step-body"> | |
| Connect to your Reachy Mini, navigate to the "Applications" tab, find "Chess Emotions" and click "Launch" (make sure you already have the <a href="https://hf.co/reachy-mini/#download" target="_blank" rel="noreferrer">dashboard</a> installed). | |
| </div> | |
| </div> | |
| </li> | |
| <li class="step"> | |
| <span class="step-number">2</span> | |
| <div class="step-content"> | |
| <div class="step-title">Set the difficulty</div> | |
| <div class="step-body">Use the ELO slider (800-2800) to adjust Stockfish's strength. Lower ELO means easier games, but Reachy might get bored winning too easily!</div> | |
| </div> | |
| </li> | |
| <li class="step"> | |
| <span class="step-number">3</span> | |
| <div class="step-content"> | |
| <div class="step-title">Play chess</div> | |
| <div class="step-body">Drag and drop pieces on the board to make your moves. The evaluation bar shows who's winning. Stockfish responds automatically after each of your moves.</div> | |
| </div> | |
| </li> | |
| <li class="step"> | |
| <span class="step-number">4</span> | |
| <div class="step-content"> | |
| <div class="step-title">Watch Reachy react</div> | |
| <div class="step-body">After every move, Reachy evaluates the position and reacts with emotions. Good moves make Reachy worried, blunders make Reachy dance with joy!</div> | |
| </div> | |
| </li> | |
| </ol> | |
| <div class="emotion-section"> | |
| <h2>Emotion mapping</h2> | |
| <table class="emotion-table"> | |
| <thead> | |
| <tr> | |
| <th>Your move</th> | |
| <th>Reachy's reaction</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr> | |
| <td>Brilliant! (+200cp)</td> | |
| <td>Scared, anxious</td> | |
| </tr> | |
| <tr> | |
| <td>Good move (+50-200cp)</td> | |
| <td>Uncomfortable, worried</td> | |
| </tr> | |
| <tr> | |
| <td>Neutral move</td> | |
| <td>Attentive, watching</td> | |
| </tr> | |
| <tr> | |
| <td>Mistake (-50-200cp)</td> | |
| <td>Cheerful, hopeful</td> | |
| </tr> | |
| <tr> | |
| <td>Blunder! (-200cp)</td> | |
| <td>Laughing, dancing!</td> | |
| </tr> | |
| <tr> | |
| <td>You win</td> | |
| <td>Rage, fury</td> | |
| </tr> | |
| <tr> | |
| <td>Stockfish wins</td> | |
| <td>Proud celebration!</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| <div> | |
| <h2>Features</h2> | |
| <ol class="steps"> | |
| <li class="step"> | |
| <span class="step-number">1</span> | |
| <div class="step-content"> | |
| <div class="step-title">Stockfish 16 in your browser</div> | |
| <div class="step-body">Full chess engine running as WebAssembly - no server needed. Adjustable ELO from beginner to grandmaster level.</div> | |
| </div> | |
| </li> | |
| <li class="step"> | |
| <span class="step-number">2</span> | |
| <div class="step-content"> | |
| <div class="step-title">Real-time evaluation</div> | |
| <div class="step-body">Visual evaluation bar shows the position advantage in centipawns. Watch it swing as the game progresses!</div> | |
| </div> | |
| </li> | |
| <li class="step"> | |
| <span class="step-number">3</span> | |
| <div class="step-content"> | |
| <div class="step-title">Expressive reactions</div> | |
| <div class="step-body">Reachy uses the emotions library to react with over 20 different expressions, complete with sounds and movements.</div> | |
| </div> | |
| </li> | |
| <li class="step"> | |
| <span class="step-number">4</span> | |
| <div class="step-content"> | |
| <div class="step-title">Pure browser experience</div> | |
| <div class="step-body">Chess logic runs entirely in your browser. Reachy's emotions are triggered via REST API calls to the daemon.</div> | |
| </div> | |
| </li> | |
| </ol> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer> | |
| <div class="container"> | |
| <div class="footer-grid"> | |
| <div class="footer-section"> | |
| <h4>Resources</h4> | |
| <ul> | |
| <li><a href="https://github.com/pollen-robotics/reachy_mini" target="_blank" rel="noopener noreferrer">Read the Documentation</a></li> | |
| <li><a href="https://github.com/pollen-robotics/reachy_mini/blob/develop/docs/troubleshooting.md" target="_blank" rel="noopener noreferrer">Troubleshooting & FAQ</a></li> | |
| </ul> | |
| </div> | |
| <div class="footer-section"> | |
| <h4>Reachy Mini Apps</h4> | |
| <ul> | |
| <li><a href="https://hf.co/reachy-mini/#apps" target="_blank" rel="noopener noreferrer">Browse other apps</a></li> | |
| <li><a href="https://huggingface.co/blog/pollen-robotics/make-and-publish-your-reachy-mini-apps" target="_blank" rel="noopener noreferrer">Make and publish your own app</a></li> | |
| </ul> | |
| </div> | |
| <div class="footer-section"> | |
| <h4>Follow us</h4> | |
| <div class="social-links"> | |
| <a href="https://discord.gg/2bAhWfXme9" target="_blank" rel="noopener noreferrer" aria-label="Discord" class="social-link"> | |
| <svg viewBox="0 0 24 24" fill="currentColor"><path d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028 14.09 14.09 0 0 0 1.226-1.994.076.076 0 0 0-.041-.106 13.107 13.107 0 0 1-1.872-.892.077.077 0 0 1-.008-.128 10.2 10.2 0 0 0 .372-.292.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127 12.299 12.299 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.839 19.839 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.946 2.418-2.157 2.418z"/></svg> | |
| </a> | |
| <a href="https://www.linkedin.com/company/pollen-robotics" target="_blank" rel="noopener noreferrer" aria-label="LinkedIn" class="social-link"> | |
| <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"/><rect width="4" height="12" x="2" y="9"/><circle cx="4" cy="4" r="2"/></svg> | |
| </a> | |
| <a href="https://www.youtube.com/c/pollenrobotics" target="_blank" rel="noopener noreferrer" aria-label="YouTube" class="social-link"> | |
| <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2.5 17a24.12 24.12 0 0 1 0-10 2 2 0 0 1 1.4-1.4 49.56 49.56 0 0 1 16.2 0A2 2 0 0 1 21.5 7a24.12 24.12 0 0 1 0 10 2 2 0 0 1-1.4 1.4 49.55 49.55 0 0 1-16.2 0A2 2 0 0 1 2.5 17"/><path d="m10 15 5-3-5-3z"/></svg> | |
| </a> | |
| <a href="https://github.com/pollen-robotics" target="_blank" rel="noopener noreferrer" aria-label="GitHub" class="social-link"> | |
| <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4"/><path d="M9 18c-4.51 2-5-2-7-2"/></svg> | |
| </a> | |
| <a href="https://x.com/pollenrobotics" target="_blank" rel="noopener noreferrer" aria-label="X" class="social-link"> | |
| <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 4s-.7 2.1-2 3.4c1.6 10-9.4 17.3-18 11.6 2.2.1 4.4-.6 6-2C3 15.5.5 9.6 3 5c2.2 2.6 5.6 4.1 9 4-.9-4.2 4-6.6 7-3.8 1.1 0 3-1.2 3-1.2z"/></svg> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="footer-credit"> | |
| Proudly brought by <a href="https://www.pollen-robotics.com/" target="_blank" rel="noopener noreferrer">Pollen Robotics</a> x <a href="https://huggingface.co" target="_blank" rel="noopener noreferrer">Hugging Face</a> | |
| </div> | |
| </div> | |
| </footer> | |
| </body> | |
| </html> | |