wip

README.md

@@ -1,55 +1,76 @@
----
-title: Reachy Mini Simple Control Panel
-emoji: 🤖
-colorFrom: blue
-colorTo: purple
-sdk: gradio
-sdk_version: "6.0.0"
-app_file: app.py
-pinned: false
----
-
 # Reachy Mini Simple Control Panel
 
-A simple web-based control panel for the Reachy Mini robot.
+A lightweight, static HTML/JS control panel for Reachy Mini robot using WebSockets for real-time control.
 
 ## Features
 
-- **Connect to Robot**: Connect to your Reachy Mini robot at localhost:8000
-- **Real-time Status**: Monitor robot status with 5Hz polling
-- **Motor Control**: Enable/disable motors (torque on/off)
-- **Movement Commands**: Wake up and go to sleep commands
-- **Task Space Control**: Control robot's head pose (X, Y, Z, Roll, Pitch, Yaw)
-- **Body Control**: Control body yaw rotation
-- **Antenna Control**: Control left and right antennas
+- **Real-time WebSocket Control**: Instant response using WebSocket streaming
+- **Wake Up / Go to Sleep**: Movement command buttons
+- **Task Space Control**: Real-time head pose control (X, Y, Z, Roll, Pitch, Yaw)
+- **Body & Antennas**: Control body yaw and antenna positions
+- **Auto-reconnect**: Automatically reconnects if connection is lost
+- **No Dependencies**: Pure HTML/CSS/JavaScript
 
 ## How to Use
 
-1. Make sure your Reachy Mini robot daemon is running on localhost:8000
-2. Click "Connect to Robot" button
-3. Use the buttons and sliders to control your robot
+### Option 1: Open Directly (Simple)
+
+Just open `index.html` in your web browser:
+
+```bash
+open index.html  # macOS
+xdg-open index.html  # Linux
+start index.html  # Windows
+```
 
-## Local Testing
+**Note**: The robot daemon must be running on `localhost:8000`
 
-To test locally:
+### Option 2: Serve with Python (Recommended for HuggingFace Spaces)
 
 ```bash
-pip install -r requirements.txt
-python app.py
+python server.py
 ```
 
 Then open http://localhost:7860 in your browser.
 
+### Option 3: Serve with any HTTP server
+
+```bash
+# Using Python 3
+python3 -m http.server 7860
+
+# Using Node.js
+npx http-server -p 7860
+
+# Using PHP
+php -S localhost:7860
+```
+
+## Requirements
+
+- Reachy Mini daemon running on `localhost:8000`
+- Modern web browser with WebSocket support
+- Motors must be enabled before using wake/sleep commands
+
 ## Architecture
 
-This app uses the Reachy Mini HTTP REST API. It communicates with the following endpoints:
+This app uses:
+- **WebSocket** (`ws://localhost:8000/api/move/ws/set_target`) for real-time pose streaming
+- **HTTP POST** for wake_up and goto_sleep commands
+- Pure client-side JavaScript (no backend needed)
+
+The app automatically connects to the robot when loaded and reconnects if the connection is lost.
+
+## Deployment on HuggingFace Spaces
 
-- `GET /api/state/full` - Get robot state (polled at 5Hz)
-- `POST /api/motors/set_mode/{mode}` - Set motor mode (enabled/disabled)
-- `POST /api/move/play/wake_up` - Wake up robot
-- `POST /api/move/play/goto_sleep` - Put robot to sleep
-- `POST /api/move/set_target` - Set target pose
+1. Copy `index.html`, `app.js`, and `server.py` to your Space
+2. Set SDK to `gradio` with sdk_version `6.0.0` (only needed for the server)
+3. Or use `static` SDK if HF supports it
+4. Users will need to have the robot daemon accessible from their machine
 
-## HuggingFace Spaces Deployment
+## Technical Details
 
-To deploy on HuggingFace Spaces, you'll need to set up a tunnel or VPN to make your robot accessible from the internet. The app assumes the robot is at localhost:8000.
+- **Slider Updates**: Use `input` event for real-time updates
+- **Auto-reconnect**: WebSocket reconnects every 2 seconds if disconnected
+- **State Management**: Client-side state tracking prevents feedback loops
+- **Error Handling**: Graceful error messages and automatic recovery

app.js

@@ -0,0 +1,270 @@
+// Reachy Mini Control Panel - WebSocket Version
+// Connects to localhost:8000 WebSocket and HTTP APIs
+
+const ROBOT_URL = 'localhost:8000';
+const WS_URL = `ws://${ROBOT_URL}/api/move/ws/set_target`;
+const HTTP_URL = `http://${ROBOT_URL}`;
+
+// Global state
+const state = {
+    ws: null,
+    connected: false,
+    isRefreshing: false,
+    currentPose: {
+        head: { x: 0, y: 0, z: 0, roll: 0, pitch: 0, yaw: 0 },
+        bodyYaw: 0,
+        antennas: [0, 0]
+    }
+};
+
+// DOM elements
+const elements = {
+    status: document.getElementById('connectionStatus'),
+    wakeUpBtn: document.getElementById('wakeUpBtn'),
+    sleepBtn: document.getElementById('sleepBtn'),
+    sliders: {
+        headX: document.getElementById('headX'),
+        headY: document.getElementById('headY'),
+        headZ: document.getElementById('headZ'),
+        headRoll: document.getElementById('headRoll'),
+        headPitch: document.getElementById('headPitch'),
+        headYaw: document.getElementById('headYaw'),
+        bodyYaw: document.getElementById('bodyYaw'),
+        antennaLeft: document.getElementById('antennaLeft'),
+        antennaRight: document.getElementById('antennaRight')
+    },
+    values: {
+        headX: document.getElementById('headXValue'),
+        headY: document.getElementById('headYValue'),
+        headZ: document.getElementById('headZValue'),
+        headRoll: document.getElementById('headRollValue'),
+        headPitch: document.getElementById('headPitchValue'),
+        headYaw: document.getElementById('headYawValue'),
+        bodyYaw: document.getElementById('bodyYawValue'),
+        antennaLeft: document.getElementById('antennaLeftValue'),
+        antennaRight: document.getElementById('antennaRightValue')
+    }
+};
+
+// WebSocket connection
+function connectWebSocket() {
+    console.log('Connecting to WebSocket:', WS_URL);
+
+    state.ws = new WebSocket(WS_URL);
+
+    state.ws.onopen = () => {
+        console.log('WebSocket connected');
+        state.connected = true;
+        updateConnectionStatus(true);
+        enableControls(true);
+    };
+
+    state.ws.onclose = () => {
+        console.log('WebSocket disconnected');
+        state.connected = false;
+        updateConnectionStatus(false);
+        enableControls(false);
+
+        // Reconnect after 2 seconds
+        setTimeout(connectWebSocket, 2000);
+    };
+
+    state.ws.onerror = (error) => {
+        console.error('WebSocket error:', error);
+    };
+
+    state.ws.onmessage = (event) => {
+        try {
+            const message = JSON.parse(event.data);
+            if (message.status === 'error') {
+                console.error('Server error:', message.detail);
+            }
+        } catch (e) {
+            console.error('Failed to parse message:', e);
+        }
+    };
+}
+
+// Update connection status UI
+function updateConnectionStatus(connected) {
+    if (connected) {
+        elements.status.className = 'status connected';
+        elements.status.innerHTML = '<span><span class="status-dot green"></span>Connected to robot</span>';
+    } else {
+        elements.status.className = 'status disconnected';
+        elements.status.innerHTML = '<span><span class="status-dot red"></span>Disconnected - Reconnecting...</span>';
+    }
+}
+
+// Enable/disable controls
+function enableControls(enabled) {
+    elements.wakeUpBtn.disabled = !enabled;
+    elements.sleepBtn.disabled = !enabled;
+
+    Object.values(elements.sliders).forEach(slider => {
+        slider.disabled = !enabled;
+    });
+}
+
+// Send target pose via WebSocket
+function sendTargetPose() {
+    if (!state.connected || !state.ws || state.ws.readyState !== WebSocket.OPEN) {
+        console.warn('WebSocket not connected');
+        return;
+    }
+
+    if (state.isRefreshing) {
+        return; // Don't send during refresh
+    }
+
+    const message = {
+        target_head_pose: {
+            x: state.currentPose.head.x,
+            y: state.currentPose.head.y,
+            z: state.currentPose.head.z,
+            roll: state.currentPose.head.roll,
+            pitch: state.currentPose.head.pitch,
+            yaw: state.currentPose.head.yaw
+        },
+        target_body_yaw: state.currentPose.bodyYaw,
+        target_antennas: state.currentPose.antennas
+    };
+
+    try {
+        state.ws.send(JSON.stringify(message));
+    } catch (error) {
+        console.error('Failed to send message:', error);
+    }
+}
+
+// Slider change handlers
+function setupSliderHandlers() {
+    // Head pose sliders
+    elements.sliders.headX.addEventListener('input', (e) => {
+        const value = parseFloat(e.target.value);
+        state.currentPose.head.x = value;
+        elements.values.headX.textContent = value.toFixed(3);
+        sendTargetPose();
+    });
+
+    elements.sliders.headY.addEventListener('input', (e) => {
+        const value = parseFloat(e.target.value);
+        state.currentPose.head.y = value;
+        elements.values.headY.textContent = value.toFixed(3);
+        sendTargetPose();
+    });
+
+    elements.sliders.headZ.addEventListener('input', (e) => {
+        const value = parseFloat(e.target.value);
+        state.currentPose.head.z = value;
+        elements.values.headZ.textContent = value.toFixed(3);
+        sendTargetPose();
+    });
+
+    elements.sliders.headRoll.addEventListener('input', (e) => {
+        const value = parseFloat(e.target.value);
+        state.currentPose.head.roll = value;
+        elements.values.headRoll.textContent = value.toFixed(2);
+        sendTargetPose();
+    });
+
+    elements.sliders.headPitch.addEventListener('input', (e) => {
+        const value = parseFloat(e.target.value);
+        state.currentPose.head.pitch = value;
+        elements.values.headPitch.textContent = value.toFixed(2);
+        sendTargetPose();
+    });
+
+    elements.sliders.headYaw.addEventListener('input', (e) => {
+        const value = parseFloat(e.target.value);
+        state.currentPose.head.yaw = value;
+        elements.values.headYaw.textContent = value.toFixed(2);
+        sendTargetPose();
+    });
+
+    // Body yaw slider
+    elements.sliders.bodyYaw.addEventListener('input', (e) => {
+        const value = parseFloat(e.target.value);
+        state.currentPose.bodyYaw = value;
+        elements.values.bodyYaw.textContent = value.toFixed(2);
+        sendTargetPose();
+    });
+
+    // Antenna sliders
+    elements.sliders.antennaLeft.addEventListener('input', (e) => {
+        const value = parseFloat(e.target.value);
+        state.currentPose.antennas[0] = value;
+        elements.values.antennaLeft.textContent = value.toFixed(2);
+        sendTargetPose();
+    });
+
+    elements.sliders.antennaRight.addEventListener('input', (e) => {
+        const value = parseFloat(e.target.value);
+        state.currentPose.antennas[1] = value;
+        elements.values.antennaRight.textContent = value.toFixed(2);
+        sendTargetPose();
+    });
+}
+
+// HTTP API calls for movement commands
+async function playWakeUp() {
+    try {
+        const response = await fetch(`${HTTP_URL}/api/move/play/wake_up`, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' }
+        });
+
+        if (!response.ok) {
+            throw new Error(`HTTP ${response.status}`);
+        }
+
+        const result = await response.json();
+        console.log('Wake up started:', result.uuid);
+    } catch (error) {
+        console.error('Wake up failed:', error);
+        alert('Failed to wake up robot: ' + error.message);
+    }
+}
+
+async function playGotoSleep() {
+    try {
+        const response = await fetch(`${HTTP_URL}/api/move/play/goto_sleep`, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' }
+        });
+
+        if (!response.ok) {
+            throw new Error(`HTTP ${response.status}`);
+        }
+
+        const result = await response.json();
+        console.log('Go to sleep started:', result.uuid);
+    } catch (error) {
+        console.error('Go to sleep failed:', error);
+        alert('Failed to put robot to sleep: ' + error.message);
+    }
+}
+
+// Button handlers
+function setupButtonHandlers() {
+    elements.wakeUpBtn.addEventListener('click', playWakeUp);
+    elements.sleepBtn.addEventListener('click', playGotoSleep);
+}
+
+// Initialize app
+function init() {
+    console.log('Initializing Reachy Mini Control Panel');
+
+    setupSliderHandlers();
+    setupButtonHandlers();
+    connectWebSocket();
+
+    console.log('Control panel ready');
+}
+
+// Start when DOM is loaded
+if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', init);
+} else {
+    init();
+}

app.py

@@ -1,478 +1,33 @@
 """
-Reachy Mini Simple Control Panel - Gradio App
-
-A simple web-based control panel for Reachy Mini robot using HTTP API.
-Uses client-side JavaScript to connect to localhost:8000 on user's machine.
-Works on HuggingFace Spaces by making requests from the browser.
+Reachy Mini Simple Control Panel - Static File Server for HuggingFace Spaces
+Serves the static HTML/JS control panel that uses WebSockets to connect to localhost:8000
 """
 
 import gradio as gr
+from pathlib import Path
 
-# All HTTP requests are made from JavaScript (client-side)
-# to allow connection to localhost on user's computer when running on HF Spaces
-
-def create_app():
-    """Create the Gradio application."""
-
-    with gr.Blocks(title="Reachy Mini Simple Control Panel") as app:
-
-        gr.Markdown("# Reachy Mini Simple Control Panel")
-        gr.Markdown("Control your Reachy Mini robot via HTTP API (localhost:8000)")
-
-        # Hidden state to track if user is controlling (prevents polling interference)
-        user_controlling = gr.State(False)
-
-        # Connection Section
-        with gr.Group():
-            gr.Markdown("### Connection")
-            connect_btn = gr.Button("Connect to Robot", variant="primary")
-            status_text = gr.Textbox(label="Connection Status", value="Disconnected", interactive=False)
-            motor_status = gr.Textbox(label="Motor Status", value="N/A", interactive=False)
-
-        # Motor Control Section
-        with gr.Group():
-            gr.Markdown("### Motor Control")
-            with gr.Row():
-                enable_btn = gr.Button("Torque On", variant="primary")
-                disable_btn = gr.Button("Torque Off", variant="stop")
-            log_output = gr.Textbox(label="Log", lines=2, interactive=False)
-
-        # Movement Commands Section
-        with gr.Group():
-            gr.Markdown("### Movement Commands")
-            with gr.Row():
-                wakeup_btn = gr.Button("Wake Up", variant="primary")
-                sleep_btn = gr.Button("Go to Sleep")
-                test_btn = gr.Button("Test Movement", variant="secondary")
-
-        # Task Space Control Section
-        with gr.Group():
-            gr.Markdown("### Task Space Control - Head Pose")
-
-            head_x = gr.Slider(
-                minimum=-0.2, maximum=0.2, value=0, step=0.001,
-                label="X (forward/backward) [m]"
-            )
-            head_y = gr.Slider(
-                minimum=-0.2, maximum=0.2, value=0, step=0.001,
-                label="Y (left/right) [m]"
-            )
-            head_z = gr.Slider(
-                minimum=-0.2, maximum=0.2, value=0, step=0.001,
-                label="Z (up/down) [m]"
-            )
-            head_roll = gr.Slider(
-                minimum=-3.2, maximum=3.2, value=0, step=0.01,
-                label="Roll [rad]"
-            )
-            head_pitch = gr.Slider(
-                minimum=-3.2, maximum=3.2, value=0, step=0.01,
-                label="Pitch [rad]"
-            )
-            head_yaw = gr.Slider(
-                minimum=-3.2, maximum=3.2, value=0, step=0.01,
-                label="Yaw [rad]"
-            )
-
-        # Body & Antennas Section
-        with gr.Group():
-            gr.Markdown("### Body & Antennas")
-
-            body_yaw = gr.Slider(
-                minimum=-3.2, maximum=3.2, value=0, step=0.01,
-                label="Body Yaw [rad]"
-            )
-            antenna_left = gr.Slider(
-                minimum=-3.2, maximum=3.2, value=0, step=0.01,
-                label="Left Antenna [rad]"
-            )
-            antenna_right = gr.Slider(
-                minimum=-3.2, maximum=3.2, value=0, step=0.01,
-                label="Right Antenna [rad]"
-            )
-
-        # JavaScript helper - initialization wrapped in async IIFE
-        def wrap_js(handler_code):
-            return f"""
-            (async () => {{
-                if (!window.reachyApi) {{
-                    window.reachyApi = {{
-                        url: 'http://localhost:8000',
-                        connected: false,
-                        controlling: false,
-                        isRefreshing: false,
-                        currentHeadPose: {{ x: 0, y: 0, z: 0, roll: 0, pitch: 0, yaw: 0 }},
-                        currentBodyYaw: 0,
-                        currentAntennas: [0, 0],
-                        request: async function(endpoint, method = 'GET', body = null) {{
-                            try {{
-                                const options = {{
-                                    method: method,
-                                    headers: {{'Content-Type': 'application/json'}},
-                                }};
-                                if (body) {{
-                                    options.body = JSON.stringify(body);
-                                    console.log('Request body:', JSON.stringify(body, null, 2));
-                                }}
-                                const response = await fetch(window.reachyApi.url + endpoint, options);
-                                if (!response.ok) {{
-                                    const errorText = await response.text();
-                                    console.error('API Error Response:', errorText);
-                                    throw new Error(`HTTP ${{response.status}}: ${{errorText}}`);
-                                }}
-                                return await response.json();
-                            }} catch (error) {{
-                                console.error('API Error:', error);
-                                throw error;
-                            }}
-                        }}
-                    }};
-                }}
-
-                // Execute handler
-                const handler = {handler_code};
-                return await handler(...arguments);
-            }})
-            """
-
-        # Connect button handler
-        connect_btn.click(
-            fn=None,
-            inputs=[],
-            outputs=[status_text, motor_status, head_x, head_y, head_z, head_roll, head_pitch, head_yaw, body_yaw, antenna_left, antenna_right],
-            js=wrap_js("""
-            async () => {
-                try {
-                    const state = await window.reachyApi.request('/api/state/full?with_control_mode=true&with_head_pose=true&with_body_yaw=true&with_antenna_positions=true');
-                    const daemonStatus = await window.reachyApi.request('/api/daemon/status');
-                    const daemonState = daemonStatus.state || 'unknown';
-
-                    window.reachyApi.connected = true;
-                    const statusMsg = daemonState !== 'running'
-                        ? `Connected | Daemon: ${daemonState} ⚠️ NOT RUNNING`
-                        : `Connected | Daemon: ${daemonState}`;
-
-                    const headPose = state.head_pose || {};
-                    const bodyYaw = state.body_yaw || 0;
-                    const antennas = state.antennas_position || [0, 0];
-                    const motorMode = state.control_mode || 'unknown';
-
-                    // Initialize current state
-                    window.reachyApi.currentHeadPose = {
-                        x: headPose.x || 0,
-                        y: headPose.y || 0,
-                        z: headPose.z || 0,
-                        roll: headPose.roll || 0,
-                        pitch: headPose.pitch || 0,
-                        yaw: headPose.yaw || 0
-                    };
-                    window.reachyApi.currentBodyYaw = bodyYaw;
-                    window.reachyApi.currentAntennas = [antennas[0] || 0, antennas[1] || 0];
-
-                    return [
-                        statusMsg,
-                        `Motor Mode: ${motorMode}`,
-                        headPose.x || 0,
-                        headPose.y || 0,
-                        headPose.z || 0,
-                        headPose.roll || 0,
-                        headPose.pitch || 0,
-                        headPose.yaw || 0,
-                        bodyYaw,
-                        antennas[0] || 0,
-                        antennas[1] || 0
-                    ];
-                } catch (error) {
-                    window.reachyApi.connected = false;
-                    return ['Connection failed: ' + error.message, 'Disconnected', 0, 0, 0, 0, 0, 0, 0, 0, 0];
-                }
-            }
-            """)
-        )
-
-        # Motor control handlers
-        enable_btn.click(
-            fn=None,
-            inputs=[],
-            outputs=[log_output],
-            js=wrap_js("""
-            async () => {
-                if (!window.reachyApi.connected) return 'Not connected';
-                try {
-                    await window.reachyApi.request('/api/motors/set_mode/enabled', 'POST');
-                    return 'Motors enabled';
-                } catch (error) {
-                    return 'Error: ' + error.message;
-                }
-            }
-            """)
-        )
-
-        disable_btn.click(
-            fn=None,
-            inputs=[],
-            outputs=[log_output],
-            js=wrap_js("""
-            async () => {
-                if (!window.reachyApi.connected) return 'Not connected';
-                try {
-                    await window.reachyApi.request('/api/motors/set_mode/disabled', 'POST');
-                    return 'Motors disabled';
-                } catch (error) {
-                    return 'Error: ' + error.message;
-                }
-            }
-            """)
-        )
-
-        # Movement command handlers
-        wakeup_btn.click(
-            fn=None,
-            inputs=[],
-            outputs=[log_output],
-            js=wrap_js("""
-            async () => {
-                if (!window.reachyApi.connected) return 'Not connected';
-                try {
-                    const motorStatus = await window.reachyApi.request('/api/motors/status');
-                    if (motorStatus.mode === 'disabled') {
-                        return 'Cannot wake up: motors disabled. Enable motors first!';
-                    }
-                    const result = await window.reachyApi.request('/api/move/play/wake_up', 'POST');
-                    return 'Wake up started (ID: ' + result.uuid.substring(0, 8) + '...)';
-                } catch (error) {
-                    return 'Error: ' + error.message;
-                }
-            }
-            """)
-        )
-
-        sleep_btn.click(
-            fn=None,
-            inputs=[],
-            outputs=[log_output],
-            js=wrap_js("""
-            async () => {
-                if (!window.reachyApi.connected) return 'Not connected';
-                try {
-                    const motorStatus = await window.reachyApi.request('/api/motors/status');
-                    if (motorStatus.mode === 'disabled') {
-                        return 'Cannot sleep: motors disabled. Enable motors first!';
-                    }
-                    const result = await window.reachyApi.request('/api/move/play/goto_sleep', 'POST');
-                    return 'Sleep started (ID: ' + result.uuid.substring(0, 8) + '...)';
-                } catch (error) {
-                    return 'Error: ' + error.message;
-                }
-            }
-            """)
-        )
-
-        test_btn.click(
-            fn=None,
-            inputs=[],
-            outputs=[log_output],
-            js=wrap_js("""
-            async () => {
-                if (!window.reachyApi.connected) return 'Not connected';
-                try {
-                    const result = await window.reachyApi.request('/api/move/goto', 'POST', {
-                        head_pose: {x: 0.02, y: 0, z: 0, roll: 0, pitch: 0, yaw: 0},
-                        duration: 1.0,
-                        interpolation: 'minjerk'
-                    });
-                    return 'Test movement started: ' + result.uuid.substring(0, 8) + '...';
-                } catch (error) {
-                    return 'Error: ' + error.message;
-                }
-            }
-            """)
-        )
-
-        # Head pose slider handlers - individual handlers like in working control panel
-        def create_pose_handler(key):
-            return f"""
-            async (value) => {{
-                if (!window.reachyApi || !window.reachyApi.connected) return;
-                if (window.reachyApi.isRefreshing) return;
-                window.reachyApi.controlling = true;
-                window.reachyApi.currentHeadPose.{key} = value;
-                try {{
-                    await window.reachyApi.request('/api/move/set_target', 'POST', {{
-                        target_head_pose: window.reachyApi.currentHeadPose,
-                        target_body_yaw: window.reachyApi.currentBodyYaw,
-                        target_antennas: window.reachyApi.currentAntennas
-                    }});
-                }} catch (error) {{
-                    console.error('Set target error:', error);
-                }}
-            }}
-            """
-
-        head_x.change(fn=None, inputs=[head_x], outputs=[], js=create_pose_handler('x'))
-        head_y.change(fn=None, inputs=[head_y], outputs=[], js=create_pose_handler('y'))
-        head_z.change(fn=None, inputs=[head_z], outputs=[], js=create_pose_handler('z'))
-        head_roll.change(fn=None, inputs=[head_roll], outputs=[], js=create_pose_handler('roll'))
-        head_pitch.change(fn=None, inputs=[head_pitch], outputs=[], js=create_pose_handler('pitch'))
-        head_yaw.change(fn=None, inputs=[head_yaw], outputs=[], js=create_pose_handler('yaw'))
-
-        # Body yaw handler
-        body_yaw.change(
-            fn=None,
-            inputs=[body_yaw],
-            outputs=[],
-            js="""
-            async (value) => {
-                if (!window.reachyApi || !window.reachyApi.connected) return;
-                if (window.reachyApi.isRefreshing) return;
-                window.reachyApi.controlling = true;
-                window.reachyApi.currentBodyYaw = value;
-                try {
-                    await window.reachyApi.request('/api/move/set_target', 'POST', {
-                        target_head_pose: window.reachyApi.currentHeadPose,
-                        target_body_yaw: window.reachyApi.currentBodyYaw,
-                        target_antennas: window.reachyApi.currentAntennas
-                    });
-                } catch (error) {
-                    console.error('Set target error:', error);
-                }
-            }
-            """
-        )
-
-        # Antenna handlers
-        antenna_left.change(
-            fn=None,
-            inputs=[antenna_left],
-            outputs=[],
-            js="""
-            async (value) => {
-                if (!window.reachyApi || !window.reachyApi.connected) return;
-                if (window.reachyApi.isRefreshing) return;
-                window.reachyApi.controlling = true;
-                window.reachyApi.currentAntennas[0] = value;
-                try {
-                    await window.reachyApi.request('/api/move/set_target', 'POST', {
-                        target_head_pose: window.reachyApi.currentHeadPose,
-                        target_body_yaw: window.reachyApi.currentBodyYaw,
-                        target_antennas: window.reachyApi.currentAntennas
-                    });
-                } catch (error) {
-                    console.error('Set target error:', error);
-                }
-            }
-            """
-        )
-
-        antenna_right.change(
-            fn=None,
-            inputs=[antenna_right],
-            outputs=[],
-            js="""
-            async (value) => {
-                if (!window.reachyApi || !window.reachyApi.connected) return;
-                if (window.reachyApi.isRefreshing) return;
-                window.reachyApi.controlling = true;
-                window.reachyApi.currentAntennas[1] = value;
-                try {
-                    await window.reachyApi.request('/api/move/set_target', 'POST', {
-                        target_head_pose: window.reachyApi.currentHeadPose,
-                        target_body_yaw: window.reachyApi.currentBodyYaw,
-                        target_antennas: window.reachyApi.currentAntennas
-                    });
-                } catch (error) {
-                    console.error('Set target error:', error);
-                }
-            }
-            """
-        )
-
-        # Release handler to stop controlling
-        all_sliders = [head_x, head_y, head_z, head_roll, head_pitch, head_yaw, body_yaw, antenna_left, antenna_right]
-        for slider in all_sliders:
-            slider.release(
-                fn=None,
-                inputs=[],
-                outputs=[],
-                js="async () => { if (window.reachyApi) window.reachyApi.controlling = false; }"
-            )
-
-        # Polling timer - updates state at 5Hz (every 200ms)
-        timer = gr.Timer(value=0.2)
-        timer.tick(
-            fn=None,
-            inputs=[],
-            outputs=[status_text, motor_status, head_x, head_y, head_z, head_roll, head_pitch, head_yaw, body_yaw, antenna_left, antenna_right],
-            js=wrap_js("""
-            async () => {
-                if (!window.reachyApi.connected) {
-                    return ['Disconnected', 'N/A', null, null, null, null, null, null, null, null, null];
-                }
-
-                // Don't update sliders if user is controlling
-                if (window.reachyApi.controlling) {
-                    try {
-                        const state = await window.reachyApi.request('/api/state/full?with_control_mode=true');
-                        const motorMode = state.control_mode || 'unknown';
-                        return ['Connected', `Motor Mode: ${motorMode}`, null, null, null, null, null, null, null, null, null];
-                    } catch (error) {
-                        window.reachyApi.connected = false;
-                        return ['Connection lost', 'Disconnected', null, null, null, null, null, null, null, null, null];
-                    }
-                }
-
-                try {
-                    // Set flag to prevent input handlers from triggering during update
-                    window.reachyApi.isRefreshing = true;
-
-                    const state = await window.reachyApi.request('/api/state/full?with_control_mode=true&with_head_pose=true&with_body_yaw=true&with_antenna_positions=true');
-                    const headPose = state.head_pose || {};
-                    const bodyYaw = state.body_yaw || 0;
-                    const antennas = state.antennas_position || [0, 0];
-                    const motorMode = state.control_mode || 'unknown';
-
-                    // Update current state
-                    window.reachyApi.currentHeadPose = {
-                        x: headPose.x || 0,
-                        y: headPose.y || 0,
-                        z: headPose.z || 0,
-                        roll: headPose.roll || 0,
-                        pitch: headPose.pitch || 0,
-                        yaw: headPose.yaw || 0
-                    };
-                    window.reachyApi.currentBodyYaw = bodyYaw;
-                    window.reachyApi.currentAntennas = [antennas[0] || 0, antennas[1] || 0];
+# Get the directory where this file is located
+BASE_DIR = Path(__file__).parent
 
-                    // Clear flag after a short delay
-                    setTimeout(() => { window.reachyApi.isRefreshing = false; }, 100);
+# Read the HTML file
+html_path = BASE_DIR / "index.html"
+js_path = BASE_DIR / "app.js"
 
-                    return [
-                        'Connected',
-                        `Motor Mode: ${motorMode}`,
-                        headPose.x || 0,
-                        headPose.y || 0,
-                        headPose.z || 0,
-                        headPose.roll || 0,
-                        headPose.pitch || 0,
-                        headPose.yaw || 0,
-                        bodyYaw,
-                        antennas[0] || 0,
-                        antennas[1] || 0
-                    ];
-                } catch (error) {
-                    window.reachyApi.connected = false;
-                    window.reachyApi.isRefreshing = false;
-                    return ['Connection lost', 'Disconnected', 0, 0, 0, 0, 0, 0, 0, 0, 0];
-                }
-            }
-            """)
-        )
+with open(html_path, 'r') as f:
+    html_content = f.read()
 
-    return app
+with open(js_path, 'r') as f:
+    js_content = f.read()
 
+# Inject JavaScript directly into HTML
+full_html = html_content.replace(
+    '<script src="app.js"></script>',
+    f'<script>{js_content}</script>'
+)
 
-# Create and launch the app
-app = create_app()
+# Create Gradio app with just the HTML
+with gr.Blocks(title="Reachy Mini Simple Control Panel") as app:
+    gr.HTML(full_html)
 
 if __name__ == "__main__":
     app.launch(

index.html

@@ -0,0 +1,324 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Reachy Mini Simple Control Panel</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            min-height: 100vh;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: 20px;
+        }
+
+        .container {
+            background: white;
+            border-radius: 20px;
+            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+            max-width: 600px;
+            width: 100%;
+            padding: 40px;
+        }
+
+        h1 {
+            color: #333;
+            margin-bottom: 10px;
+            font-size: 28px;
+        }
+
+        .subtitle {
+            color: #666;
+            margin-bottom: 30px;
+            font-size: 14px;
+        }
+
+        .section {
+            margin-bottom: 30px;
+        }
+
+        .section h2 {
+            color: #555;
+            font-size: 16px;
+            margin-bottom: 15px;
+            text-transform: uppercase;
+            letter-spacing: 1px;
+        }
+
+        .status {
+            padding: 12px;
+            border-radius: 8px;
+            background: #f5f5f5;
+            margin-bottom: 10px;
+            font-size: 14px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+
+        .status.connected {
+            background: #d4edda;
+            color: #155724;
+        }
+
+        .status.disconnected {
+            background: #f8d7da;
+            color: #721c24;
+        }
+
+        .status-dot {
+            width: 10px;
+            height: 10px;
+            border-radius: 50%;
+            margin-right: 8px;
+            display: inline-block;
+        }
+
+        .status-dot.green {
+            background: #28a745;
+            box-shadow: 0 0 10px #28a745;
+        }
+
+        .status-dot.red {
+            background: #dc3545;
+        }
+
+        button {
+            background: #667eea;
+            color: white;
+            border: none;
+            padding: 12px 24px;
+            border-radius: 8px;
+            font-size: 14px;
+            font-weight: 600;
+            cursor: pointer;
+            transition: all 0.3s;
+            margin-right: 10px;
+            margin-bottom: 10px;
+        }
+
+        button:hover {
+            background: #5568d3;
+            transform: translateY(-2px);
+            box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
+        }
+
+        button:active {
+            transform: translateY(0);
+        }
+
+        button:disabled {
+            background: #ccc;
+            cursor: not-allowed;
+            transform: none;
+        }
+
+        button.secondary {
+            background: #6c757d;
+        }
+
+        button.secondary:hover {
+            background: #5a6268;
+        }
+
+        button.danger {
+            background: #dc3545;
+        }
+
+        button.danger:hover {
+            background: #c82333;
+        }
+
+        .slider-group {
+            margin-bottom: 20px;
+        }
+
+        label {
+            display: block;
+            color: #555;
+            font-size: 13px;
+            margin-bottom: 8px;
+            font-weight: 500;
+        }
+
+        .slider-container {
+            display: flex;
+            align-items: center;
+            gap: 10px;
+        }
+
+        input[type="range"] {
+            flex: 1;
+            height: 6px;
+            border-radius: 3px;
+            background: #ddd;
+            outline: none;
+            -webkit-appearance: none;
+        }
+
+        input[type="range"]::-webkit-slider-thumb {
+            -webkit-appearance: none;
+            appearance: none;
+            width: 18px;
+            height: 18px;
+            border-radius: 50%;
+            background: #667eea;
+            cursor: pointer;
+            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+        }
+
+        input[type="range"]::-moz-range-thumb {
+            width: 18px;
+            height: 18px;
+            border-radius: 50%;
+            background: #667eea;
+            cursor: pointer;
+            border: none;
+        }
+
+        .slider-value {
+            min-width: 60px;
+            text-align: right;
+            color: #666;
+            font-size: 13px;
+            font-family: 'Courier New', monospace;
+        }
+
+        .button-row {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 10px;
+        }
+
+        @media (max-width: 600px) {
+            .container {
+                padding: 20px;
+            }
+
+            h1 {
+                font-size: 24px;
+            }
+
+            button {
+                width: 100%;
+                margin-right: 0;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <h1>🤖 Reachy Mini Control Panel</h1>
+        <p class="subtitle">WebSocket Real-time Control</p>
+
+        <!-- Connection Status -->
+        <div class="section">
+            <div id="connectionStatus" class="status disconnected">
+                <span><span class="status-dot red"></span>Disconnected</span>
+            </div>
+        </div>
+
+        <!-- Movement Commands -->
+        <div class="section">
+            <h2>Movement Commands</h2>
+            <div class="button-row">
+                <button id="wakeUpBtn" disabled>Wake Up</button>
+                <button id="sleepBtn" class="secondary" disabled>Go to Sleep</button>
+            </div>
+        </div>
+
+        <!-- Head Pose Control -->
+        <div class="section">
+            <h2>Head Pose Control</h2>
+
+            <div class="slider-group">
+                <label>X (forward/backward) [m]</label>
+                <div class="slider-container">
+                    <input type="range" id="headX" min="-0.2" max="0.2" step="0.001" value="0" disabled>
+                    <span class="slider-value" id="headXValue">0.000</span>
+                </div>
+            </div>
+
+            <div class="slider-group">
+                <label>Y (left/right) [m]</label>
+                <div class="slider-container">
+                    <input type="range" id="headY" min="-0.2" max="0.2" step="0.001" value="0" disabled>
+                    <span class="slider-value" id="headYValue">0.000</span>
+                </div>
+            </div>
+
+            <div class="slider-group">
+                <label>Z (up/down) [m]</label>
+                <div class="slider-container">
+                    <input type="range" id="headZ" min="-0.2" max="0.2" step="0.001" value="0" disabled>
+                    <span class="slider-value" id="headZValue">0.000</span>
+                </div>
+            </div>
+
+            <div class="slider-group">
+                <label>Roll [rad]</label>
+                <div class="slider-container">
+                    <input type="range" id="headRoll" min="-3.2" max="3.2" step="0.01" value="0" disabled>
+                    <span class="slider-value" id="headRollValue">0.00</span>
+                </div>
+            </div>
+
+            <div class="slider-group">
+                <label>Pitch [rad]</label>
+                <div class="slider-container">
+                    <input type="range" id="headPitch" min="-3.2" max="3.2" step="0.01" value="0" disabled>
+                    <span class="slider-value" id="headPitchValue">0.00</span>
+                </div>
+            </div>
+
+            <div class="slider-group">
+                <label>Yaw [rad]</label>
+                <div class="slider-container">
+                    <input type="range" id="headYaw" min="-3.2" max="3.2" step="0.01" value="0" disabled>
+                    <span class="slider-value" id="headYawValue">0.00</span>
+                </div>
+            </div>
+        </div>
+
+        <!-- Body & Antennas -->
+        <div class="section">
+            <h2>Body & Antennas</h2>
+
+            <div class="slider-group">
+                <label>Body Yaw [rad]</label>
+                <div class="slider-container">
+                    <input type="range" id="bodyYaw" min="-3.2" max="3.2" step="0.01" value="0" disabled>
+                    <span class="slider-value" id="bodyYawValue">0.00</span>
+                </div>
+            </div>
+
+            <div class="slider-group">
+                <label>Left Antenna [rad]</label>
+                <div class="slider-container">
+                    <input type="range" id="antennaLeft" min="-3.2" max="3.2" step="0.01" value="0" disabled>
+                    <span class="slider-value" id="antennaLeftValue">0.00</span>
+                </div>
+            </div>
+
+            <div class="slider-group">
+                <label>Right Antenna [rad]</label>
+                <div class="slider-container">
+                    <input type="range" id="antennaRight" min="-3.2" max="3.2" step="0.01" value="0" disabled>
+                    <span class="slider-value" id="antennaRightValue">0.00</span>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script src="app.js"></script>
+</body>
+</html>

server.py

@@ -0,0 +1,43 @@
+#!/usr/bin/env python3
+"""
+Simple HTTP server to serve the static Reachy Mini Control Panel.
+This is only needed if you want to serve the files, otherwise you can open index.html directly.
+"""
+
+import http.server
+import socketserver
+import os
+from pathlib import Path
+
+PORT = 7860
+DIRECTORY = Path(__file__).parent
+
+class MyHTTPRequestHandler(http.server.SimpleHTTPRequestHandler):
+    def __init__(self, *args, **kwargs):
+        super().__init__(*args, directory=str(DIRECTORY), **kwargs)
+
+    def end_headers(self):
+        # Add CORS headers to allow localhost:8000 WebSocket connections
+        self.send_header('Access-Control-Allow-Origin', '*')
+        self.send_header('Access-Control-Allow-Methods', 'GET, POST, OPTIONS')
+        self.send_header('Access-Control-Allow-Headers', 'Content-Type')
+        super().end_headers()
+
+def main():
+    os.chdir(DIRECTORY)
+
+    with socketserver.TCPServer(("", PORT), MyHTTPRequestHandler) as httpd:
+        print(f"🤖 Reachy Mini Control Panel")
+        print(f"📡 Serving at http://localhost:{PORT}")
+        print(f"📁 Directory: {DIRECTORY}")
+        print(f"\n🔗 Open http://localhost:{PORT} in your browser")
+        print(f"⚠️  Make sure robot daemon is running on localhost:8000")
+        print(f"\nPress Ctrl+C to stop\n")
+
+        try:
+            httpd.serve_forever()
+        except KeyboardInterrupt:
+            print("\n\n👋 Shutting down server...")
+
+if __name__ == "__main__":
+    main()