| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Reachy Mini Space Template</title> |
| <link rel="stylesheet" href="style.css"> |
| </head> |
| <body> |
| |
| |
| |
| <section class="guide-section"> |
| <div class="container"> |
| <div class="guide-header"> |
| <img src="reachy-mini-icon-happy.png" alt="Reachy Mini Robot" class="robot-icon"> |
| <h1>Reachy Mini Template</h1> |
| <p class="guide-description"> |
| Duplicate and customize this template to quickly set up a Space for your Reachy Mini project. |
| Add your app's content, repository URL, and deploy your Space in just a few minutes! |
| </p> |
| <p class="guide-info"> |
| Creating a Hugging Face Space for your Reachy Mini app will make it visible on the Hugging Face platform |
| and directly accessible from the Reachy Mini dashboard, so users can easily discover, install, and run your |
| app on their robots. |
| </p> |
| </div> |
|
|
| <div class="how-to-section"> |
| <h2>How to Use This Template</h2> |
| |
| |
| <div class="carousel"> |
| <div class="carousel-inner"> |
| |
| <div class="carousel-item active"> |
| <div class="step-content"> |
| <img src="step1.png" alt="Step 1: Duplicate this space" class="step-image"> |
| <div class="step-text"> |
| <h3>STEP 1: Duplicate this space</h3> |
| <p>Click on the three dots menu and select "Duplicate this Space" to create your own copy.</p> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="carousel-item"> |
| <div class="step-content"> |
| <img src="step2.png" alt="Step 2: Change the name" class="step-image"> |
| <div class="step-text"> |
| <h3>STEP 2: Change the name of the space</h3> |
| <p><strong>NOTE:</strong> Put visibility on 'Private' as long as your space is not ready for new users.</p> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="carousel-item"> |
| <div class="step-content"> |
| <img src="step3.png" alt="Step 3: Go to Files" class="step-image"> |
| <div class="step-text"> |
| <h3>STEP 3: Go to "Files"</h3> |
| <p>Navigate to the Files tab to access your Space's code and configuration files.</p> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="carousel-item"> |
| <div class="step-content"> |
| <img src="step4.png" alt="Step 4: Edit README.md" class="step-image"> |
| <div class="step-text"> |
| <h3>STEP 4: Click on README.md section, then on the 'Edit' button</h3> |
| <p>The README.md contains your Space's metadata and configuration.</p> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="carousel-item"> |
| <div class="step-content"> |
| <img src="step5.png" alt="Step 5: Update metadata" class="step-image"> |
| <div class="step-text"> |
| <h3>STEP 5: Update your Space's metadata</h3> |
| <p>This will update your Space's thumbnail across all Hugging Face Spaces. |
| Make sure to include a clear description and add the <code>reachy_mini</code> tag so people can easily find your Space.</p> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="carousel-item"> |
| <div class="step-content"> |
| <img src="step6.png" alt="Step 6: Update HTML and CSS" class="step-image"> |
| <div class="step-text"> |
| <h3>STEP 6: Update index.html and style.css</h3> |
| <p>Create a nice landing page for your Space. This is the storefront of your space. |
| Add as much useful information as possible so future users will want to install it. |
| Clearly state the goals and benefits of your space, and don't hesitate to mention its |
| limitations to encourage potential contributions.</p> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="carousel-item"> |
| <div class="step-content"> |
| <img src="step7.png" alt="Step 7: Update Repository URL" class="step-image"> |
| <div class="step-text"> |
| <h3>STEP 7: Update Repository URL</h3> |
| <p>Change the JavaScript to point to your space's Git repository so users can install your app.</p> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="carousel-item"> |
| <div class="step-content"> |
| <img src="step8.png" alt="Step 8: Make your space public" class="step-image"> |
| <div class="step-text"> |
| <h3>STEP 8: Put your space on PUBLIC</h3> |
| <p>Once everything is ready and tested, change your Space visibility to Public so everyone can use it!</p> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <button class="carousel-control prev" onclick="changeSlide(-1)">❮</button> |
| <button class="carousel-control next" onclick="changeSlide(1)">❯</button> |
|
|
| |
| <div class="carousel-indicators"> |
| <span class="indicator active" onclick="currentSlide(1)"></span> |
| <span class="indicator" onclick="currentSlide(2)"></span> |
| <span class="indicator" onclick="currentSlide(3)"></span> |
| <span class="indicator" onclick="currentSlide(4)"></span> |
| <span class="indicator" onclick="currentSlide(5)"></span> |
| <span class="indicator" onclick="currentSlide(6)"></span> |
| <span class="indicator" onclick="currentSlide(7)"></span> |
| <span class="indicator" onclick="currentSlide(8)"></span> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="delete-warning"> |
| ⚠️ <strong>Don't forget to remove this customization guide before making your Space public!</strong> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <div class="separator"> |
| <h2>The template starts here 👇</h2> |
| </div> |
|
|
| |
| |
| |
| <section class="template-section"> |
| <div class="container"> |
| |
| <div class="hero"> |
| <img src="reachy-mini-icon-happy.png" alt="Reachy Mini Robot" class="hero-robot-icon"> |
| <h1 class="hero-title">Your Space Title Here</h1> |
| |
| |
| <div class="demo-placeholder"> |
| <p>Add your image, GIF, or demo of your Reachy Mini project here</p> |
| </div> |
|
|
| |
| <div class="keywords"> |
| <span class="keyword">AI</span> |
| <span class="keyword">Fun</span> |
| <span class="keyword">LLM</span> |
| <span class="keyword">VLM</span> |
| </div> |
|
|
| |
| <p class="description"> |
| Your space description here. Write a short and clear description so people immediately understand |
| your project. Be sure to describe your space well and include relevant keywords so people can easily |
| find it. The more details you add, the more attractive and useful your space will be for future users! |
| </p> |
|
|
| |
| <button class="install-button" onclick="installToReachy()"> |
| <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"> |
| <path d="M10 2V14M10 14L14 10M10 14L6 10" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> |
| <path d="M2 18H18" stroke="currentColor" stroke-width="2" stroke-linecap="round"/> |
| </svg> |
| Install to Your Reachy Mini |
| </button> |
|
|
| |
| <div id="dashboard-input" class="dashboard-input" style="display: none;"> |
| <label for="dashboardUrl">Your Reachy Dashboard URL:</label> |
| <input type="text" id="dashboardUrl" placeholder="http://localhost:8000" value="http://localhost:8000"> |
| <button onclick="proceedInstall()">Proceed with Installation</button> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <footer class="footer"> |
| <div class="container"> |
| <p>Created by <strong>[Your Name]</strong></p> |
| <a href="https://huggingface.co/spaces?search=reachy_mini" target="_blank" class="browse-link"> |
| Browse More Reachy Mini Spaces → |
| </a> |
| </div> |
| </footer> |
|
|
| |
| <script> |
| |
| let currentSlideIndex = 1; |
| showSlide(currentSlideIndex); |
| |
| function changeSlide(n) { |
| showSlide(currentSlideIndex += n); |
| } |
| |
| function currentSlide(n) { |
| showSlide(currentSlideIndex = n); |
| } |
| |
| function showSlide(n) { |
| const slides = document.getElementsByClassName("carousel-item"); |
| const indicators = document.getElementsByClassName("indicator"); |
| |
| if (n > slides.length) { currentSlideIndex = 1; } |
| if (n < 1) { currentSlideIndex = slides.length; } |
| |
| for (let i = 0; i < slides.length; i++) { |
| slides[i].classList.remove("active"); |
| } |
| for (let i = 0; i < indicators.length; i++) { |
| indicators[i].classList.remove("active"); |
| } |
| |
| slides[currentSlideIndex - 1].classList.add("active"); |
| indicators[currentSlideIndex - 1].classList.add("active"); |
| } |
| |
| |
| function installToReachy() { |
| document.getElementById('dashboard-input').style.display = 'flex'; |
| } |
| |
| function proceedInstall() { |
| const dashboardUrl = document.getElementById('dashboardUrl').value; |
| |
| const repoUrl = 'https://huggingface.co/spaces/YOUR-USERNAME/YOUR-SPACE-NAME'; |
| |
| |
| const installUrl = `${dashboardUrl}/install?repo=${encodeURIComponent(repoUrl)}`; |
| |
| |
| window.open(installUrl, '_blank'); |
| } |
| </script> |
| </body> |
| </html> |
|
|
