+
+ );
+ }
+ };
+
+ const PageHeader = () => {
+ let title = "DASHBOARD";
+ if (view === "calibrating" && selectedRobot) {
+ title = `CALIBRATE: ${selectedRobot.name.toUpperCase()}`;
+ } else if (view === "teleoperating" && selectedRobot) {
+ title = `TELEOPERATE: ${selectedRobot.name.toUpperCase()}`;
+ }
+
+ return (
+
+
+
+
+ + install +
++ Choose your preferred development environment +
+
+
+
+
+ );
+ };
+
+ return (
+
+
+
+ {view === "calibrating" && selectedRobot ? (
+
+ + + calibrate: + {" "} + + {selectedRobot.name.toUpperCase()} + +
+ ) : view === "teleoperating" && selectedRobot ? ( ++ + teleoperate: + {" "} + + {selectedRobot.name.toUpperCase()} + +
+ ) : ( ++ DASHBOARD +
+ )} +
+ {view !== "dashboard" ? (
+
+ ) : (
+
+ {""}
+ )} +
+
+ !open && setEditingRobot(null)}
+ onSave={handleUpdateRobot}
+ />
+
+
+
+ );
+}
+
+export default App;
diff --git a/examples/cyberpunk-standalone/src/components/VirtualKey.tsx b/examples/cyberpunk-standalone/src/components/VirtualKey.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..d6b7f9e24c7fbbe3e7279ad8111639221aa25722
--- /dev/null
+++ b/examples/cyberpunk-standalone/src/components/VirtualKey.tsx
@@ -0,0 +1,27 @@
+import { cn } from "@/lib/utils"
+
+interface VirtualKeyProps {
+ label: string
+ subLabel?: string
+ isPressed?: boolean
+}
+
+const VirtualKey = ({ label, subLabel, isPressed }: VirtualKeyProps) => {
+ return (
+
+
+ )
+}
+
+export default VirtualKey
diff --git a/examples/cyberpunk-standalone/src/components/boot-sequence.tsx b/examples/cyberpunk-standalone/src/components/boot-sequence.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..549558c337a11c42dd2732571d5cb9873cc42e56
--- /dev/null
+++ b/examples/cyberpunk-standalone/src/components/boot-sequence.tsx
@@ -0,0 +1,61 @@
+"use client"
+
+import { useState, useEffect } from "react"
+import { cn } from "@/lib/utils"
+
+const bootLines = [
+ "INITIALIZING BIOS...",
+ "CHECKING MEMORY: 1024MB OK",
+ "DETECTING PRIMARY BUS...",
+ "LEROBOT.JS CORE v1.0.2",
+ "LOADING OPERATOR CONSOLE...",
+ "CONNECTION PROTOCOL: WEBSERIAL",
+ "ENCRYPTION: AES-256",
+ "SYSTEM STATUS: NOMINAL",
+ "BOOT SEQUENCE COMPLETE.",
+]
+
+export function BootSequence({ onComplete }: { onComplete: () => void }) {
+ const [visibleLines, setVisibleLines] = useState
+ {label}
+
+ {subLabel && {subLabel}}
+
+
+ )
+}
diff --git a/examples/cyberpunk-standalone/src/components/calibration-view.tsx b/examples/cyberpunk-standalone/src/components/calibration-view.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..9dc58256dd57903a409469a345bd5a17d0f604c3
--- /dev/null
+++ b/examples/cyberpunk-standalone/src/components/calibration-view.tsx
@@ -0,0 +1,108 @@
+"use client"
+import { useState, useMemo } from "react"
+import { Download } from "lucide-react"
+import { Button } from "@/components/ui/button"
+import { Card } from "@/components/ui/card"
+import { lerobot } from "@/lib/mock-api"
+import { useLocalStorage } from "@/hooks/use-local-storage"
+import { MotorCalibrationVisual } from "@/components/motor-calibration-visual"
+import type { RobotConnection, LiveCalibrationData, WebCalibrationResults } from "@/types/robot"
+
+interface CalibrationViewProps {
+ robot: RobotConnection
+}
+
+export function CalibrationView({ robot }: CalibrationViewProps) {
+ const [status, setStatus] = useState("Ready to calibrate.")
+ const [liveData, setLiveData] = useState
+ {visibleLines.map((line, index) => (
+
+ + > {line} +
+ ))} +
+
+
+
+
+
+
+ motor calibration
+move all joints to their limits
+
+ {!isCalibrating ? (
+
+ ) : (
+
+ )}
+
+
+
+
+
+
+ Motor Name
+ Visual Range
+ Current
+ Min
+ Max
+ Range
+
+ {motorData.map(([name, data]) => (
+
+
+
+
+
+
+
+ {robots.length > 0 && (
+
+ )}
+
+
+ device registry
+
+ currently supports SO-100
+
+
+
+ {robots.length === 0 ? (
+
+
+
+
+
+ ) : (
+
+
+
+ {isConnecting ? (
+ <>
+
+
+
+ scanning for units
+searching for available devices...
+ + ) : ( + <> +
+
+ no units detected
+ + + + )} +
+ {robots.map((robot) => (
+
+
+
+
+
+
+
+
+
+
+ ))}
+
+ )}
+
+
+
+
+
+ {robot.isConnected ? "ONLINE" : "OFFLINE"}
+
+
+
+
+ {robot.name}
+
+ {robot.serialNumber}
+ •
+ {robot.robotType}
+
+
+
+
+
+
+
+ status:
+
+
+ {robot.isConnected ? "operational" : "disconnected"}
+
+
+ type:
+
+ {robot.robotType}
+
+
+ )
+}
+
+export function DocsSection() {
+ return (
+
+ {children}
+
+
+
+
+ )
+}
diff --git a/examples/cyberpunk-standalone/src/components/edit-robot-dialog.tsx b/examples/cyberpunk-standalone/src/components/edit-robot-dialog.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..0a47e729b8c9b12e08cb0f4ae1acf2e74443e765
--- /dev/null
+++ b/examples/cyberpunk-standalone/src/components/edit-robot-dialog.tsx
@@ -0,0 +1,78 @@
+"use client"
+import { useState, useEffect } from "react"
+import { Button } from "@/components/ui/button"
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, DialogClose } from "@/components/ui/dialog"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
+import type { RobotConnection } from "@/types/robot"
+
+interface EditRobotDialogProps {
+ robot: RobotConnection | null
+ isOpen: boolean
+ onOpenChange: (open: boolean) => void
+ onSave: (updatedRobot: RobotConnection) => void
+}
+
+export function EditRobotDialog({ robot, isOpen, onOpenChange, onSave }: EditRobotDialogProps) {
+ const [name, setName] = useState("")
+ const [type, setType] = useState<"so100_follower" | "so100_leader">("so100_follower")
+
+ useEffect(() => {
+ if (robot) {
+ setName(robot.name)
+ setType(robot.robotType || "so100_follower")
+ }
+ }, [robot])
+
+ const handleSave = () => {
+ if (robot) {
+ onSave({ ...robot, name, robotType: type })
+ }
+ }
+
+ if (!robot) return null
+
+ return (
+
+ )
+}
diff --git a/examples/cyberpunk-standalone/src/components/footer.tsx b/examples/cyberpunk-standalone/src/components/footer.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..173133e77f3c23682c6a9e8b19dee2877bf54f33
--- /dev/null
+++ b/examples/cyberpunk-standalone/src/components/footer.tsx
@@ -0,0 +1,41 @@
+import { Github } from "lucide-react"
+
+export function Footer() {
+ return (
+
+ )
+}
diff --git a/examples/cyberpunk-standalone/src/components/grid-background.tsx b/examples/cyberpunk-standalone/src/components/grid-background.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..dbb893a677f3517fefd5aede80ce14d47a6d42c5
--- /dev/null
+++ b/examples/cyberpunk-standalone/src/components/grid-background.tsx
@@ -0,0 +1,22 @@
+"use client"
+
+import type React from "react"
+
+import { useEffect } from "react"
+
+export function GridBackground({ children }: { children: React.ReactNode }) {
+ useEffect(() => {
+ const handleMouseMove = (e: MouseEvent) => {
+ document.body.style.setProperty("--mouse-x", `${e.clientX}px`)
+ document.body.style.setProperty("--mouse-y", `${e.clientY}px`)
+ }
+
+ window.addEventListener("mousemove", handleMouseMove)
+
+ return () => {
+ window.removeEventListener("mousemove", handleMouseMove)
+ }
+ }, [])
+
+ return <>{children}
+}
diff --git a/examples/cyberpunk-standalone/src/components/hardware-support-section.tsx b/examples/cyberpunk-standalone/src/components/hardware-support-section.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..4125ef934505e10453154806cf76275a47045515
--- /dev/null
+++ b/examples/cyberpunk-standalone/src/components/hardware-support-section.tsx
@@ -0,0 +1,140 @@
+"use client";
+
+import { Cpu, Mail, Plus, ExternalLink } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import HudCorners from "@/components/hud-corners";
+
+const supportedHardware = [
+ {
+ name: "SO-100",
+ status: "supported",
+ description:
+ "6-DOF robotic arm with gripper, leader/follower configuration",
+ },
+];
+
+export function HardwareSupportSection() {
+ return (
+
+
+
+
+
+
+
+ A quick guide to get started with the @lerobot/web API.
+
+ {/* Getting Started */}
+
+
+
+
+
+ {`import { lerobot } from '@lerobot/web';
+
+async function connectToRobot() {
+ const { result } = await lerobot.findPort({
+ onMessage: (message) => console.log('Status:', message),
+ });
+
+ const robots = await result;
+ console.log('Found robots:', robots);
+}`}
+
+
+
+ {/* API Reference */}
+
+
+ + First, import the API from the library. Then you can call its methods to find and control your robot. +
+
+
+
+
+
+
+
+ {/* findPort */}
+
+
+
+ {`// Options
+{
+ robotConfigs?: RobotConfig[], // Optional: Saved configs to try reconnecting
+ onMessage?: (msg: string) => void // Callback for status updates
+}
+
+// Returns
+{
+ result: Promise // A promise that resolves with found robots
+}`}
+
+
+
+ {/* calibrate */}
+ lerobot.findPort(options)
+Scans for available robot connections via WebSerial.
+
+
+ {`// Parameters
+robot: RobotConnection // The robot instance to calibrate
+
+// Options
+{
+ onLiveUpdate: (data: LiveCalibrationData) => void, // Callback for real-time joint data
+ onProgress: (msg: string) => void // Callback for status messages
+}
+
+// Returns
+{
+ result: Promise, // A promise that resolves with final calibration
+ stop: () => void // Function to stop the calibration recording
+}`}
+
+
+
+ {/* teleoperate */}
+ lerobot.calibrate(robot, options)
+Starts the calibration process for a specific robot.
+
+
+ {`// Parameters
+robot: RobotConnection,
+calibrationData: WebCalibrationResults
+
+// Options
+{
+ onStateUpdate: (state: TeleoperationState) => void // Callback for real-time state updates
+}
+
+// Returns
+{
+ start: () => void,
+ stop: () => void,
+ updateKeyState: (key: string, pressed: boolean) => void,
+ moveMotor: (motorName: string, position: number) => void
+}`}
+
+
+ lerobot.teleoperate(robot, options)
+Initializes the teleoperation interface for a robot.
+
+
+ );
+}
diff --git a/examples/cyberpunk-standalone/src/components/header.tsx b/examples/cyberpunk-standalone/src/components/header.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..f834e6ac9a93f260358105f8ff7e5009a3aa882d
--- /dev/null
+++ b/examples/cyberpunk-standalone/src/components/header.tsx
@@ -0,0 +1,27 @@
+import { ThemeToggle } from "./theme-toggle"
+
+export function Header() {
+ return (
+
+
+
+
+
+
+
+ + {"making sure that robotic ai is accessible to everyone"} +
+
+ {/* Currently Supported */}
+
+
+
+ {/* Add New Hardware */}
+
+
+
+
+
+
+
+
+
+
+
+
+ {supportedHardware.map((robot, index) => (
+
+
+
+ ))}
+
+
+
+ {/* Sponsored By Section */}
+
+
+ {robot.name}
++ {robot.description} +
+
+
+ Sponsored by
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + please provide us with access to different robot hardware, so + we can add them to lerobot.js +
+ +
+
+
+ + How to contribute hardware support: +
+-
+
- Loan or donate hardware for development +
- Provide technical documentation and APIs +
- Contribute code for new robot integrations +
- Help with testing and validation +
+
+
+
+
+
+
+
+ LeRobot.js
+
+
+ interact with your robot in JS, inspired by{" "}
+
+ LeRobot
+
+
+
+
+
+
+
+
+ {children}
+
+ )
+}
+
+export default HudCorners
diff --git a/examples/cyberpunk-standalone/src/components/motor-calibration-visual.tsx b/examples/cyberpunk-standalone/src/components/motor-calibration-visual.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..77d2cc2d651d2ac72b67edc17cbab04ae6f13512
--- /dev/null
+++ b/examples/cyberpunk-standalone/src/components/motor-calibration-visual.tsx
@@ -0,0 +1,32 @@
+interface MotorCalibrationVisualProps {
+ name: string
+ data: { current: number; min: number; max: number; range: number }
+}
+
+export function MotorCalibrationVisual({ name, data }: MotorCalibrationVisualProps) {
+ const totalRange = 4095 // Standard range for many servos
+ const toPercent = (val: number) => (val / totalRange) * 100
+
+ const currentPos = toPercent(data.current)
+ const minPos = toPercent(data.min)
+ const maxPos = toPercent(data.max)
+ const rangeWidth = maxPos - minPos
+
+ return (
+
+
+ )
+}
diff --git a/examples/cyberpunk-standalone/src/components/roadmap-section.tsx b/examples/cyberpunk-standalone/src/components/roadmap-section.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..adb3717682ad69418559e7da8f0a3f155460caa7
--- /dev/null
+++ b/examples/cyberpunk-standalone/src/components/roadmap-section.tsx
@@ -0,0 +1,179 @@
+"use client"
+import { CheckCircle, Clock, Target } from "lucide-react"
+import { Badge } from "@/components/ui/badge"
+import { cn } from "@/lib/utils"
+
+interface RoadmapItem {
+ title: string
+ description: string
+ status: "completed" | "planned"
+}
+
+const roadmapItems: RoadmapItem[] = [
+ {
+ title: "findPort",
+ description: "WebSerial-based robot detection and connection management",
+ status: "completed",
+ },
+ {
+ title: "calibrate",
+ description: "Real-time joint calibration with visual feedback and data export",
+ status: "completed",
+ },
+ {
+ title: "teleoperate",
+ description: "Manual robot control with keyboard and slider inputs",
+ status: "completed",
+ },
+ {
+ title: "record",
+ description: "Record robot trajectories and sensor data to create datasets",
+ status: "planned",
+ },
+ {
+ title: "replay",
+ description: "Replay any recorded episode or episodes from existing datasets",
+ status: "planned",
+ },
+ {
+ title: "train",
+ description: "Run training based on a given dataset to create a policy",
+ status: "planned",
+ },
+ {
+ title: "eval",
+ description: "Run inference using trained policies for autonomous operation",
+ status: "planned",
+ },
+]
+
+const statusConfig = {
+ completed: {
+ icon: CheckCircle,
+ label: "COMPLETED",
+ dotColor: "bg-green-500 dark:bg-green-400",
+ textColor: "text-green-600 dark:text-green-400",
+ bgColor: "bg-green-500/10 dark:bg-green-400/5",
+ borderColor: "border-green-500/30 dark:border-green-400/20",
+ },
+ planned: {
+ icon: Clock,
+ label: "PLANNED",
+ dotColor: "bg-slate-500 dark:bg-muted-foreground",
+ textColor: "text-slate-600 dark:text-muted-foreground",
+ bgColor: "bg-slate-500/10 dark:bg-muted-foreground/5",
+ borderColor: "border-slate-500/30 dark:border-muted-foreground/20",
+ },
+}
+
+export function RoadmapSection() {
+ const completedCount = roadmapItems.filter((item) => item.status === "completed").length
+ const totalCount = roadmapItems.length
+
+ return (
+ {name}
+
+
+
+ {data.range > 0 && (
+
+ )}
+
+
+ {data.current}
+ {data.min === 4095 ? "N/A" : data.min}
+ {data.max === 0 ? "N/A" : data.max}
+ {data.range}
+
+
+ )
+}
diff --git a/examples/cyberpunk-standalone/src/components/setup-cards.tsx b/examples/cyberpunk-standalone/src/components/setup-cards.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..96309510eb3d7dcf4dff1c1421f495c8447f2e7c
--- /dev/null
+++ b/examples/cyberpunk-standalone/src/components/setup-cards.tsx
@@ -0,0 +1,160 @@
+"use client"
+import { useState } from "react"
+import { Copy, Package, Clock, Check, Terminal } from "lucide-react"
+import { Button } from "@/components/ui/button"
+import { Card } from "@/components/ui/card"
+import { Badge } from "@/components/ui/badge"
+import HudCorners from "@/components/hud-corners"
+import { cn } from "@/lib/utils"
+
+type PackageManager = "npm" | "yarn" | "pnpm" | "bun"
+
+interface PackageInstallerProps {
+ packageName: string
+ disabled?: boolean
+}
+
+function PackageInstaller({ packageName, disabled = false }: PackageInstallerProps) {
+ const [selectedPM, setSelectedPM] = useState
+
+
+
+
+
+
+ lfg o7
+
+ {/* Header */}
+
+
+
+
+ {/* Progress Bar */}
+
+
+
+
+ SYSTEM OBJECTIVES
+
+
+ {completedCount} ACTIVE
+
+
+ {totalCount - completedCount} QUEUED
+
+
+
+ PROGRESS: {Math.round((completedCount / totalCount) * 100)}%
+
+
+
+
+ {/* Items List */}
+
+
+
+
+
+
+ {/* Footer */}
+
+ {roadmapItems.map((item, index) => {
+ const config = statusConfig[item.status]
+ const StatusIcon = config.icon
+
+ return (
+
+
+ {/* Number */}
+
+ {config.label}
+
+
+ {/* Status Icon */}
+
+ )
+ })}
+
+ {String(index + 1).padStart(2, "0")}
+
+
+ {/* Content */}
+
+
+
+ {/* Status Badge */}
+ {item.title}()
+{item.description}
+
+
+ + REFERENCE: functions based on the original{" "} + + LeRobot + {" "} + (python) and adapted for web robotic ai +
+
+
+ )
+}
+
+export function SetupCards() {
+ return (
+
+
+
+ {packageManagers.map((pm) => (
+
+ ))}
+
+
+
+
+
+ {currentCommand}
+
+
+
+ {/* Web Installation Card */}
+ {/* HudCorners creates 4 absolutely positioned corner elements with primary color borders */}
+
+
+ {/* This div contains the card content and sits above the corner elements due to relative positioning */}
+
+
+
+ {/* Node.js Card - Coming Soon */}
+
+
+ {/* Disabled overlay effect */}
+
+
+
+
+
+ )
+}
diff --git a/examples/cyberpunk-standalone/src/components/teleoperation-view.tsx b/examples/cyberpunk-standalone/src/components/teleoperation-view.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..f33396c8bf9f4767af7a9c6751b95189ec4bd618
--- /dev/null
+++ b/examples/cyberpunk-standalone/src/components/teleoperation-view.tsx
@@ -0,0 +1,240 @@
+"use client"
+import { useState, useEffect, useMemo } from "react"
+import { Power, PowerOff, Keyboard } from "lucide-react"
+import { Button } from "@/components/ui/button"
+import { Card } from "@/components/ui/card"
+import { Badge } from "@/components/ui/badge"
+import { Slider } from "@/components/ui/slider"
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"
+import { cn } from "@/lib/utils"
+import { lerobot } from "@/lib/mock-api"
+import { useLocalStorage } from "@/hooks/use-local-storage"
+import VirtualKey from "@/components/VirtualKey"
+import type { RobotConnection, WebCalibrationResults, TeleoperationState } from "@/types/robot"
+
+interface TeleoperationViewProps {
+ robot: RobotConnection
+}
+
+export function TeleoperationView({ robot }: TeleoperationViewProps) {
+ const [localCalibrationData] = useLocalStorage
+
+
+
+
+
+
+
+
+ web
+run lerobot in the browser
+
+
+
+
+ coming soon
+
+
+
+
+
+
+
+
+
+ node
+run lerobot on the server
+
+
+
+
+
+
+
+
+
+
+
+
+ robot control
++ manual teleoperate interface +
+
+
+
+ {teleopState?.isActive ? (
+
+ ) : (
+
+ )}
+
+
+ status:
+
+ {teleopState?.isActive ? "ACTIVE" : "STOPPED"}
+
+
+
+
+
+
+ Motor Control
+
+ {motorConfigs.map((motor) => (
+
+
+
+
+ ))}
+
+ teleopProcess?.moveMotor(motor.name, val[0])}
+ disabled={!teleopState?.isActive}
+ />
+
+ {Math.round(motor.currentPosition)}
+
+
+
+
+ Keyboard Layout & Status
+
+
+
+
+
+
+
+
+ Shoulder
+
+
+
+
+ Elbow/Wrist
+
+
+
+
+
+
+ Roll/Grip
+
+
+
+
+
+
+
+ Emergency Stop
+
+
+
+
+
+
+ ESC
+
+ {children}
+
+
+
+))
+Card.displayName = "Card"
+
+const CardHeader = React.forwardRef{props.children}
+
+ {children}
+
+
+
+
+ )
+})
+CarouselContent.displayName = "CarouselContent"
+
+const CarouselItem = React.forwardRef<
+ HTMLDivElement,
+ React.HTMLAttributes
+
+ {children}
+
+
+