feat: Redesign the user interface with a modern aesthetic, enhanced styling, and updated project metadata.

.gitignore

@@ -7,4 +7,6 @@ __pycache__/
 
 .pytest_cache
 
-venv
+venv
+
+build

README.md

@@ -1,13 +1,17 @@
 ---
 title: Reachy Mini DanceML
 emoji: 🔄
-colorFrom: purple
+colorFrom: indigo
 colorTo: blue
 sdk: static
 pinned: false
-short_description: Write your description here
+short_description: Voice-controlled movement SDK for Reachy Mini robot.
 tags:
+ - reachy_mini
  - reachy_mini_python_app
+ - voice_control
+ - movement_control
+ - choreography
 ---
 
 # Reachy Mini DanceML

pyproject.toml

@@ -13,7 +13,7 @@ dependencies = [
     "reachy-mini",
     "fastrtc[vad]>=0.0.16",
     "openai>=1.0.0",
-    "gradio>=4.0.0",
+    "gradio>=5.0.0",
     "scipy>=1.10.0",
     "sounddevice>=0.4.6",
 ]

reachy_mini_danceml/main.py

@@ -166,37 +166,35 @@ class ReachyMiniDanceml(ReachyMiniApp):
         }
         
         .gradio-container {
-            background-color: #F3F4F6 !important;
-            background-image: 
-                radial-gradient(at 0% 0%, rgba(99, 102, 241, 0.1) 0px, transparent 50%),
-                radial-gradient(at 100% 100%, rgba(139, 92, 246, 0.1) 0px, transparent 50%) !important;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
+            min-height: 100vh;
         }
         
         .main-card {
-            background: white !important;
+            background: rgba(255, 255, 255, 0.15) !important;
+            backdrop-filter: blur(20px) !important;
+            -webkit-backdrop-filter: blur(20px) !important;
             border-radius: 24px !important;
             box-shadow: 
-                0 4px 6px -1px rgba(0, 0, 0, 0.05),
-                0 10px 15px -3px rgba(0, 0, 0, 0.05) !important;
-            border: 1px solid rgba(229, 231, 235, 0.5) !important;
+                0 8px 32px rgba(0, 0, 0, 0.1),
+                inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
+            border: 1px solid rgba(255, 255, 255, 0.2) !important;
             max-width: 800px !important;
             margin: 2rem auto !important;
             padding: 40px !important;
         }
         
         .header-title {
-            color: #111827;
+            color: white;
             text-align: center;
             font-size: 2.5rem !important;
             font-weight: 700 !important;
             margin-bottom: 0.5rem !important;
-            background: linear-gradient(135deg, #4F46E5 0%, #7C3AED 100%);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
+            text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
         }
         
         .header-subtitle {
-            color: #6B7280;
+            color: rgba(255, 255, 255, 0.9);
             text-align: center;
             font-size: 1.1rem !important;
             margin-bottom: 0.5rem !important;
@@ -204,8 +202,9 @@ class ReachyMiniDanceml(ReachyMiniApp):
 
         /* Status Box */
         .status-box {
-            background: #F8FAFC !important;
-            border: 1px solid #E2E8F0 !important;
+            background: rgba(255, 255, 255, 0.2) !important;
+            backdrop-filter: blur(10px) !important;
+            border: 1px solid rgba(255, 255, 255, 0.3) !important;
             border-radius: 16px !important;
             padding: 1.5rem !important;
             text-align: center;
@@ -213,15 +212,15 @@ class ReachyMiniDanceml(ReachyMiniApp):
         }
         
         .status-box.active {
-            background: #EFF6FF !important;
-            border-color: #60A5FA !important;
-            box-shadow: 0 0 0 4px rgba(96, 165, 250, 0.1) !important;
+            background: rgba(96, 165, 250, 0.3) !important;
+            border-color: rgba(96, 165, 250, 0.5) !important;
+            box-shadow: 0 0 20px rgba(96, 165, 250, 0.3) !important;
         }
         
         .status-text {
             font-size: 1.25rem !important;
             font-weight: 500 !important;
-            color: #334155 !important;
+            color: white !important;
         }
         
         /* Wave Animation */
@@ -270,10 +269,33 @@ class ReachyMiniDanceml(ReachyMiniApp):
         }
         
         .tip-card {
-            background: #F9FAFB;
-            padding: 1rem;
-            border-radius: 12px;
-            border: 1px solid #F3F4F6;
+            background: white;
+            padding: 1.25rem;
+            border-radius: 16px;
+            border: none;
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+        }
+        
+        .tip-card h3 {
+            color: #1e293b !important;
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+        }
+        
+        .tip-card li {
+            color: #64748b !important;
+        }
+        
+        .emoji-icon {
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            width: 2.5rem;
+            height: 2.5rem;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-radius: 10px;
+            font-size: 1.25rem;
         }
         
         /* Button Styling */
@@ -299,23 +321,32 @@ class ReachyMiniDanceml(ReachyMiniApp):
         
         .footer-tip {
             text-align: center;
-            color: #9CA3AF;
+            color: rgba(255, 255, 255, 0.8);
             margin-top: 2rem;
             font-size: 0.9rem;
         }
         
         /* Activity Feed */
         .activity-feed {
-            background: #F8FAFC;
-            border: 1px solid #E2E8F0;
-            border-radius: 12px;
-            padding: 1rem;
+            background: white;
+            border: none;
+            border-radius: 16px;
+            padding: 1.25rem;
             margin-top: 1rem;
             min-height: 200px;
             max-height: 400px;
             overflow-y: auto;
             font-family: 'Monaco', 'Menlo', monospace;
             font-size: 0.85rem;
+            color: #334155;
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+        }
+        
+        .activity-feed h3 {
+            color: #1e293b !important;
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
         }
         
         .move-item {
@@ -323,7 +354,8 @@ class ReachyMiniDanceml(ReachyMiniApp):
             align-items: center;
             gap: 8px;
             padding: 6px 0;
-            border-bottom: 1px solid #E2E8F0;
+            border-bottom: 1px solid #f1f5f9;
+            color: #334155;
         }
         
         .move-item:last-child {
@@ -383,12 +415,11 @@ class ReachyMiniDanceml(ReachyMiniApp):
                         label=None
                     )
 
-                # Instructions
                 with gr.Row():
                     gr.HTML("""
                     <div class="instruction-grid">
                         <div class="tip-card">
-                            <h3 style="margin-top:0">🎯 Commands</h3>
+                            <h3 style="margin-top:0"><span class="emoji-icon">🎯</span> Commands</h3>
                             <ul style="padding-left:1.5rem; margin-bottom:0">
                                 <li>"Look up/down/left/right"</li>
                                 <li>"Nod your head"</li>
@@ -396,7 +427,7 @@ class ReachyMiniDanceml(ReachyMiniApp):
                             </ul>
                         </div>
                         <div class="tip-card">
-                            <h3 style="margin-top:0">🎭 Fun</h3>
+                            <h3 style="margin-top:0"><span class="emoji-icon">🎭</span> Fun</h3>
                             <ul style="padding-left:1.5rem; margin-bottom:0">
                                 <li>"Do a happy dance"</li>
                                 <li>"Show me surprise"</li>
@@ -423,7 +454,7 @@ class ReachyMiniDanceml(ReachyMiniApp):
                     move_activity = gr.HTML(
                         """
                         <div class="activity-feed">
-                            <h3 style="margin:0 0 0.5rem 0; font-size:1rem; color:#64748B">📋 Recent Movements</h3>
+                            <h3 style="margin:0 0 0.5rem 0; font-size:1rem;"><span class="emoji-icon">📋</span> Recent Movements</h3>
                             <div id="move-list" style="font-size:0.9rem; color:#64748B">
                                 <em>Waiting for commands...</em>
                             </div>
@@ -464,7 +495,7 @@ class ReachyMiniDanceml(ReachyMiniApp):
                 if not move_history:
                     return """
                         <div class="activity-feed">
-                            <h3 style="margin:0 0 0.5rem 0; font-size:1rem; color:#64748B">📋 Recent Movements</h3>
+                            <h3 style="margin:0 0 0.5rem 0; font-size:1rem;"><span class="emoji-icon">📋</span> Recent Movements</h3>
                             <div id="move-list" style="font-size:0.9rem; color:#64748B">
                                 <em>Waiting for commands...</em>
                             </div>
@@ -493,7 +524,7 @@ class ReachyMiniDanceml(ReachyMiniApp):
                 
                 return f"""
                     <div class="activity-feed">
-                        <h3 style="margin:0 0 0.5rem 0; font-size:1rem; color:#64748B">📋 Recent Movements</h3>
+                        <h3 style="margin:0 0 0.5rem 0; font-size:1rem;"><span class="emoji-icon">📋</span> Recent Movements</h3>
                         <div id="move-list">{items_html}</div>
                     </div>
                 """

reachy_mini_danceml/static/index.html

@@ -3,24 +3,46 @@
 
 <head>
     <meta charset="UTF-8">
-    <title>Reachy Mini example app template</title>
+    <title>Reachy Mini Danceml</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="/static/style.css">
 </head>
 
 <body>
-    <h1>Reachy Mini – Control Panel</h1>
+    <div class="hero">
+        <div class="hero-content">
+            <div class="app-icon">🤖⚡</div>
+            <h1>Reachy Mini Danceml</h1>
+            <p class="tagline">Voice Assisted Realtime Dance Composition</p>
+        </div>
+    </div>
+
+    <div class="container">
+        <div class="control-card">
+            <h2>Control Panel</h2>
+
+            <div id="controls">
+                <div class="control-item">
+                    <label>
+                        <input type="checkbox" id="antenna-checkbox" checked>
+                        Antennas
+                    </label>
+                </div>
 
-    <div id="controls">
-        <label style="display:flex; align-items:center; gap:8px;">
-            <input type="checkbox" id="antenna-checkbox" checked>
-            Antennas
-        </label>
+                <button id="sound-btn">🔊 Play Sound</button>
+            </div>
+
+            <div id="status">Antennas status: running</div>
+        </div>
+    </div>
 
-        <button id="sound-btn">Play Sound</button>
+    <div class="footer">
+        <p>
+            🤖 Reachy Mini Danceml •
+            <a href="https://github.com/pollen-robotics" target="_blank">Pollen Robotics</a>
+        </p>
     </div>
 
-    <div id="status">Antennas status: running</div>
     <script src="/static/main.js"></script>
 </body>
 

reachy_mini_danceml/static/style.css

@@ -1,25 +1,176 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
 body {
-    font-family: sans-serif;
-    margin: 24px;
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+    line-height: 1.6;
+    color: #333;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    min-height: 100vh;
 }
 
-#sound-btn {
-    padding: 10px 20px;
-    border: none;
+.hero {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
     color: white;
-    cursor: pointer;
-    font-size: 16px;
-    border-radius: 6px;
-    background-color: #3498db;
+    padding: 3rem 2rem;
+    text-align: center;
 }
 
-#status {
-    margin-top: 16px;
-    font-weight: bold;
+.hero-content {
+    max-width: 800px;
+    margin: 0 auto;
+}
+
+.app-icon {
+    font-size: 3rem;
+    margin-bottom: 0.5rem;
+    display: inline-block;
+}
+
+.hero h1 {
+    font-size: 2.5rem;
+    font-weight: 700;
+    margin-bottom: 0.5rem;
+    background: linear-gradient(45deg, #fff, #f0f9ff);
+    background-clip: text;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+}
+
+.tagline {
+    font-size: 1.1rem;
+    opacity: 0.9;
+    max-width: 600px;
+    margin: 0 auto;
+}
+
+.container {
+    max-width: 800px;
+    margin: 0 auto;
+    padding: 2rem;
+}
+
+.control-card {
+    background: white;
+    border-radius: 20px;
+    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
+    padding: 2rem;
+    margin-bottom: 2rem;
+}
+
+.control-card h2 {
+    font-size: 1.5rem;
+    color: #1e293b;
+    margin-bottom: 1.5rem;
+    text-align: center;
 }
 
 #controls {
     display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: center;
+    gap: 1.5rem;
+    margin-bottom: 1.5rem;
+}
+
+.control-item {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    background: #f0f9ff;
+    padding: 0.75rem 1.25rem;
+    border-radius: 12px;
+    border: 2px solid #e0f2fe;
+}
+
+.control-item label {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    color: #0c4a6e;
+    font-weight: 600;
+    cursor: pointer;
+}
+
+.control-item input[type="checkbox"] {
+    width: 1.25rem;
+    height: 1.25rem;
+    accent-color: #667eea;
+}
+
+#sound-btn {
+    background: linear-gradient(135deg, #667eea, #764ba2);
+    color: white;
+    border: none;
+    padding: 0.875rem 2rem;
+    border-radius: 12px;
+    font-size: 1rem;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    display: inline-flex;
     align-items: center;
-    gap: 20px;
+    gap: 0.5rem;
+    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
+}
+
+#sound-btn:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 12px 30px rgba(102, 126, 234, 0.4);
+}
+
+#status {
+    text-align: center;
+    padding: 1rem;
+    background: #dcfce7;
+    color: #166534;
+    border-radius: 8px;
+    font-weight: 600;
+    border: 1px solid #bbf7d0;
+}
+
+#status.error {
+    background: #fef2f2;
+    color: #dc2626;
+    border-color: #fecaca;
+}
+
+.footer {
+    text-align: center;
+    padding: 2rem;
+    color: white;
+    opacity: 0.8;
+}
+
+.footer a {
+    color: white;
+    text-decoration: none;
+    font-weight: 600;
+}
+
+.footer a:hover {
+    text-decoration: underline;
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+    .hero {
+        padding: 2rem 1rem;
+    }
+
+    .hero h1 {
+        font-size: 1.75rem;
+    }
+
+    .container {
+        padding: 1rem;
+    }
+
+    #controls {
+        flex-direction: column;
+    }
 }