Spaces:
Running
Running
File size: 4,673 Bytes
946780b a8d792f 946780b a8d792f 946780b a8d792f 946780b a8d792f 946780b a8d792f 946780b a8d792f 946780b a8d792f 946780b a8d792f 946780b a8d792f 946780b a8d792f 946780b a8d792f 946780b a8d792f 946780b a8d792f 946780b a8d792f |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 |
# lerobot.js - Cyberpunk Demo
**Real-world robotics control in the browser** - A comprehensive demonstration of lerobot.js capabilities with cyberpunk aesthetics.
🚀 **[Try the live demo →](https://huggingface.co/spaces/NERDDISCO/LeRobot.js)**
## What is lerobot.js?
**lerobot.js** is a TypeScript/JavaScript implementation of [Hugging Face lerobot](https://github.com/huggingface/lerobot) - bringing state-of-the-art AI for real-world robotics directly to the JavaScript ecosystem.
### Available Packages
- **[@lerobot/web](https://www.npmjs.com/package/@lerobot/web)** - Browser robotics with Web Serial API
- **[@lerobot/node](https://www.npmjs.com/package/@lerobot/node)** - Node.js robotics library with serialport
- **[lerobot](https://www.npmjs.com/package/lerobot)** - CLI tool (Python lerobot compatible)
## Quick Start
### Browser (This Demo)
```bash
# Clone and run this cyberpunk demo
git clone https://github.com/timpietrusky/lerobot.js
cd lerobot.js/examples/cyberpunk-standalone
pnpm install
pnpm dev
```
Visit `http://localhost:5173` with Chrome/Edge 89+ and connect your robot hardware.
### Node.js Library
```bash
# Install the Node.js library
pnpm add @lerobot/node
# Use in your TypeScript/JavaScript project
import { findPort, calibrate, teleoperate } from "@lerobot/node";
```
### CLI (Python lerobot compatible)
```bash
# Install globally
npm install -g lerobot
# Use identical commands to Python lerobot
lerobot find-port
lerobot calibrate --robot.type=so100_follower --robot.port=/dev/ttyUSB0 --robot.id=my_arm
lerobot teleoperate --robot.type=so100_follower --robot.port=/dev/ttyUSB0 --robot.id=my_arm
```
## This Demo
This cyberpunk-themed demo showcases the complete lerobot.js web capabilities:
- **Real-time robot control** in the browser
- **Interactive calibration** with live position feedback
- **Teleoperation** with keyboard and visual controls
- **Device management** with automatic reconnection
- **Data visualization** including motor positions and ranges
- **Modern UI** with cyberpunk aesthetics and responsive design
## Hardware Requirements
- **Chromium 89+** browser (Chrome, Edge, Brave)
- **HTTPS or localhost** (Web Serial API requirement)
- **SO-100 robot arms** or compatible hardware
- **USB connection** to robot
## Development
### Running the Demo
```bash
# Install dependencies
pnpm install
# Start development server
pnpm dev
# Build for production
pnpm build
```
### Project Structure
```
src/
├── components/ # React components
│ ├── calibration-view.tsx # Interactive calibration
│ ├── teleoperation-view.tsx # Robot control interface
│ ├── device-dashboard.tsx # Hardware management
│ └── docs-section.tsx # API documentation
├── lib/ # Utilities
└── types/ # TypeScript definitions
```
## Expanding the ESLint configuration
If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
```js
export default tseslint.config([
globalIgnores(["dist"]),
{
files: ["**/*.{ts,tsx}"],
extends: [
// Other configs...
// Remove tseslint.configs.recommended and replace with this
...tseslint.configs.recommendedTypeChecked,
// Alternatively, use this for stricter rules
...tseslint.configs.strictTypeChecked,
// Optionally, add this for stylistic rules
...tseslint.configs.stylisticTypeChecked,
// Other configs...
],
languageOptions: {
parserOptions: {
project: ["./tsconfig.node.json", "./tsconfig.app.json"],
tsconfigRootDir: import.meta.dirname,
},
// other options...
},
},
]);
```
You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
```js
// eslint.config.js
import reactX from "eslint-plugin-react-x";
import reactDom from "eslint-plugin-react-dom";
export default tseslint.config([
globalIgnores(["dist"]),
{
files: ["**/*.{ts,tsx}"],
extends: [
// Other configs...
// Enable lint rules for React
reactX.configs["recommended-typescript"],
// Enable lint rules for React DOM
reactDom.configs.recommended,
],
languageOptions: {
parserOptions: {
project: ["./tsconfig.node.json", "./tsconfig.app.json"],
tsconfigRootDir: import.meta.dirname,
},
// other options...
},
},
]);
```
|