'use client'
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
import { Badge } from '@/components/ui/badge'
import { Button } from '@/components/ui/button'
import { Separator } from '@/components/ui/separator'
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
import {
User,
Zap,
Shield,
Eye,
Navigation,
Cpu,
Battery,
Wifi,
Settings,
Play,
Pause,
RotateCcw,
ChevronRight,
AlertTriangle,
CheckCircle,
Info,
ExternalLink,
Hand,
Brain,
Activity
} from 'lucide-react'
import Link from 'next/link'
const humanoids = [
{
name: 'Unitree H1',
status: 'Available',
height: '180 cm',
weight: '47 kg',
dof: '23 DOF',
payload: '10 kg',
speed: '3.3 km/h',
battery: '2.5 hours',
features: ['Bipedal walking', 'Dual-arm manipulation', 'Advanced balance control', 'Force feedback']
},
{
name: 'Unitree G1',
status: 'Available',
height: '180 cm',
weight: '55 kg',
dof: '43 DOF',
payload: '15 kg',
speed: '2.5 km/h',
battery: '3 hours',
features: ['High-DOF manipulation', 'Whole-body control', 'Human-like dexterity', 'Advanced perception']
}
]
const capabilities = [
{
category: 'Locomotion',
items: [
'Dynamic bipedal walking on various terrains',
'Stair climbing and obstacle navigation',
'Push recovery and balance maintenance',
'Energy-efficient gait optimization',
'Real-time foot placement planning'
]
},
{
category: 'Manipulation',
items: [
'Dual-arm coordinated manipulation',
'Precision grasping and object handling',
'Force control and compliance',
'Whole-body manipulation strategies',
'Human-like dexterity and precision'
]
},
{
category: 'Interaction',
items: [
'Natural human-robot interaction',
'Gesture recognition and response',
'Voice command processing',
'Emotion recognition capabilities',
'Collaborative task execution'
]
},
{
category: 'Perception',
items: [
'Advanced computer vision systems',
'3D environmental mapping',
'Human pose estimation',
'Object recognition and tracking',
'Multi-modal sensor fusion'
]
}
]
const applications = [
{
sector: 'Manufacturing',
uses: [
'Assembly line assistance',
'Quality inspection',
'Material handling',
'Collaborative manufacturing',
'Maintenance and repair tasks'
]
},
{
sector: 'Healthcare',
uses: [
'Patient assistance and mobility',
'Medical supply delivery',
'Rehabilitation therapy',
'Elderly care support',
'Hospital logistics'
]
},
{
sector: 'Service Industry',
uses: [
'Restaurant service',
'Retail assistance',
'Hotel concierge',
'Event support',
'Customer service'
]
},
{
sector: 'Research',
uses: [
'Human-robot interaction studies',
'Manipulation research',
'Locomotion algorithm development',
'AI and ML research',
'Robotics education'
]
}
]
export default function UnitreeHumanoidsPage() {
return (
<div className="min-h-screen bg-background">
<div className="container mx-auto px-4 py-8 max-w-6xl">
{/* Header */}
<div className="mb-8">
<div className="flex items-center space-x-4 mb-4">
<User className="h-12 w-12 text-primary" />
<div>
<h1 className="text-4xl font-bold">Unitree Humanoid Robots</h1>
<p className="text-xl text-muted-foreground">
Advanced Humanoid Robotics Platforms
</p>
</div>
<Badge variant="default" className="text-sm">
Active Development
</Badge>
</div>
<div className="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
<Card>
<CardContent className="p-4 text-center">
<Activity className="h-8 w-8 text-blue-500 mx-auto mb-2" />
<div className="text-2xl font-bold">23-43 DOF</div>
<div className="text-sm text-muted-foreground">Degrees of Freedom</div>
</CardContent>
</Card>
<Card>
<CardContent className="p-4 text-center">
<Hand className="h-8 w-8 text-green-500 mx-auto mb-2" />
<div className="text-2xl font-bold">Dual Arm</div>
<div className="text-sm text-muted-foreground">Manipulation</div>
</CardContent>
</Card>
<Card>
<CardContent className="p-4 text-center">
<Brain className="h-8 w-8 text-purple-500 mx-auto mb-2" />
<div className="text-2xl font-bold">AI-Driven</div>
<div className="text-sm text-muted-foreground">Intelligence</div>
</CardContent>
</Card>
<Card>
<CardContent className="p-4 text-center">
<Shield className="h-8 w-8 text-red-500 mx-auto mb-2" />
<div className="text-2xl font-bold">Safe</div>
<div className="text-sm text-muted-foreground">Human-Robot Interaction</div>
</CardContent>
</Card>
</div>
</div>
<Tabs defaultValue="overview" className="space-y-6">
<TabsList className="grid w-full grid-cols-5">
<TabsTrigger value="overview">Overview</TabsTrigger>
<TabsTrigger value="models">Models</TabsTrigger>
<TabsTrigger value="capabilities">Capabilities</TabsTrigger>
<TabsTrigger value="applications">Applications</TabsTrigger>
<TabsTrigger value="integration">Integration</TabsTrigger>
</TabsList>
<TabsContent value="overview" className="space-y-6">
<Card>
<CardHeader>
<CardTitle>Humanoid Robotics Overview</CardTitle>
<CardDescription>
Unitree's humanoid robots represent the cutting edge of bipedal robotics,
combining advanced locomotion, dexterous manipulation, and human-like interaction capabilities.
</CardDescription>
</CardHeader>
<CardContent className="space-y-4">
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
<div>
<h3 className="font-semibold mb-3">Key Features</h3>
<ul className="space-y-2 text-sm">
<li className="flex items-center space-x-2">
<CheckCircle className="h-4 w-4 text-green-500" />
<span>Bipedal locomotion with dynamic balance control</span>
</li>
<li className="flex items-center space-x-2">
<CheckCircle className="h-4 w-4 text-green-500" />
<span>Dual-arm manipulation with human-like dexterity</span>
</li>
<li className="flex items-center space-x-2">
<CheckCircle className="h-4 w-4 text-green-500" />
<span>Advanced AI-driven perception and decision making</span>
</li>
<li className="flex items-center space-x-2">
<CheckCircle className="h-4 w-4 text-green-500" />
<span>Safe human-robot interaction capabilities</span>
</li>
<li className="flex items-center space-x-2">
<CheckCircle className="h-4 w-4 text-green-500" />
<span>Whole-body control and coordination</span>
</li>
</ul>
</div>
<div>
<h3 className="font-semibold mb-3">Technical Advantages</h3>
<ul className="space-y-2 text-sm">
<li className="flex items-center space-x-2">
<Info className="h-4 w-4 text-blue-500" />
<span>Proprietary force control algorithms</span>
</li>
<li className="flex items-center space-x-2">
<Info className="h-4 w-4 text-blue-500" />
<span>Real-time motion planning and optimization</span>
</li>
<li className="flex items-center space-x-2">
<Info className="h-4 w-4 text-blue-500" />
<span>Multi-modal sensor fusion</span>
</li>
<li className="flex items-center space-x-2">
<Info className="h-4 w-4 text-blue-500" />
<span>Energy-efficient actuation systems</span>
</li>
<li className="flex items-center space-x-2">
<Info className="h-4 w-4 text-blue-500" />
<span>Modular and upgradable architecture</span>
</li>
</ul>
</div>
</div>
</CardContent>
</Card>
<Card>
<CardHeader>
<CardTitle>Research & Development</CardTitle>
<CardDescription>
Ongoing advancements in humanoid robotics technology
</CardDescription>
</CardHeader>
<CardContent>
<div className="space-y-4">
<div className="flex items-start space-x-3">
<div className="flex-shrink-0 w-8 h-8 bg-primary rounded-full flex items-center justify-center text-white font-bold text-sm">1</div>
<div>
<h4 className="font-medium">Dynamic Locomotion</h4>
<p className="text-sm text-muted-foreground">Advanced control algorithms for stable bipedal walking on complex terrain</p>
</div>
</div>
<div className="flex items-start space-x-3">
<div className="flex-shrink-0 w-8 h-8 bg-primary rounded-full flex items-center justify-center text-white font-bold text-sm">2</div>
<div>
<h4 className="font-medium">Dexterous Manipulation</h4>
<p className="text-sm text-muted-foreground">Human-like grasping and manipulation capabilities with tactile feedback</p>
</div>
</div>
<div className="flex items-start space-x-3">
<div className="flex-shrink-0 w-8 h-8 bg-primary rounded-full flex items-center justify-center text-white font-bold text-sm">3</div>
<div>
<h4 className="font-medium">Human-Robot Interaction</h4>
<p className="text-sm text-muted-foreground">Natural interaction through gesture, voice, and visual cues</p>
</div>
</div>
<div className="flex items-start space-x-3">
<div className="flex-shrink-0 w-8 h-8 bg-primary rounded-full flex items-center justify-center text-white font-bold text-sm">4</div>
<div>
<h4 className="font-medium">Autonomous Learning</h4>
<p className="text-sm text-muted-foreground">Self-improving algorithms through reinforcement learning and adaptation</p>
</div>
</div>
</div>
</CardContent>
</Card>
</TabsContent>
<TabsContent value="models" className="space-y-6">
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
{humanoids.map((humanoid) => (
<Card key={humanoid.name}>
<CardHeader>
<CardTitle className="flex items-center justify-between">
{humanoid.name}
<Badge variant={humanoid.status === 'Available' ? 'default' : 'secondary'}>
{humanoid.status}
</Badge>
</CardTitle>
<CardDescription>
Advanced humanoid robotics platform
</CardDescription>
</CardHeader>
<CardContent>
<div className="grid grid-cols-2 gap-4 mb-4">
<div>
<div className="text-2xl font-bold text-primary">{humanoid.height}</div>
<div className="text-sm text-muted-foreground">Height</div>
</div>
<div>
<div className="text-2xl font-bold text-primary">{humanoid.weight}</div>
<div className="text-sm text-muted-foreground">Weight</div>
</div>
<div>
<div className="text-2xl font-bold text-primary">{humanoid.dof}</div>
<div className="text-sm text-muted-foreground">Degrees of Freedom</div>
</div>
<div>
<div className="text-2xl font-bold text-primary">{humanoid.payload}</div>
<div className="text-sm text-muted-foreground">Payload Capacity</div>
</div>
<div>
<div className="text-2xl font-bold text-primary">{humanoid.speed}</div>
<div className="text-sm text-muted-foreground">Walking Speed</div>
</div>
<div>
<div className="text-2xl font-bold text-primary">{humanoid.battery}</div>
<div className="text-sm text-muted-foreground">Battery Life</div>
</div>
</div>
<Separator className="my-4" />
<div>
<h4 className="font-medium mb-2">Key Features</h4>
<ul className="space-y-1">
{humanoid.features.map((feature) => (
<li key={feature} className="flex items-center space-x-2 text-sm">
<CheckCircle className="h-3 w-3 text-green-500" />
<span>{feature}</span>
</li>
))}
</ul>
</div>
</CardContent>
</Card>
))}
</div>
<Card>
<CardHeader>
<CardTitle>Model Comparison</CardTitle>
<CardDescription>
Detailed comparison between H1 and G1 humanoid platforms
</CardDescription>
</CardHeader>
<CardContent>
<div className="overflow-x-auto">
<table className="w-full border-collapse">
<thead>
<tr className="border-b">
<th className="text-left p-2 font-medium">Feature</th>
<th className="text-center p-2 font-medium">Unitree H1</th>
<th className="text-center p-2 font-medium">Unitree G1</th>
</tr>
</thead>
<tbody>
<tr className="border-b">
<td className="p-2 font-medium">Degrees of Freedom</td>
<td className="text-center p-2">23</td>
<td className="text-center p-2">43</td>
</tr>
<tr className="border-b">
<td className="p-2 font-medium">Weight</td>
<td className="text-center p-2">47 kg</td>
<td className="text-center p-2">55 kg</td>
</tr>
<tr className="border-b">
<td className="p-2 font-medium">Payload Capacity</td>
<td className="text-center p-2">10 kg</td>
<td className="text-center p-2">15 kg</td>
</tr>
<tr className="border-b">
<td className="p-2 font-medium">Arm Configuration</td>
<td className="text-center p-2">Dual 6-DOF</td>
<td className="text-center p-2">Dual 7-DOF</td>
</tr>
<tr className="border-b">
<td className="p-2 font-medium">Hand Design</td>
<td className="text-center p-2">Parallel gripper</td>
<td className="text-center p-2">Multi-finger</td>
</tr>
<tr className="border-b">
<td className="p-2 font-medium">Vision System</td>
<td className="text-center p-2">Dual cameras</td>
<td className="text-center p-2">Advanced vision suite</td>
</tr>
</tbody>
</table>
</div>
</CardContent>
</Card>
</TabsContent>
<TabsContent value="capabilities" className="space-y-6">
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
{capabilities.map((category) => (
<Card key={category.category}>
<CardHeader>
<CardTitle>{category.category}</CardTitle>
<CardDescription>
Advanced {category.category.toLowerCase()} capabilities
</CardDescription>
</CardHeader>
<CardContent>
<ul className="space-y-2">
{category.items.map((item) => (
<li key={item} className="flex items-start space-x-2 text-sm">
<CheckCircle className="h-4 w-4 text-green-500 mt-0.5 flex-shrink-0" />
<span>{item}</span>
</li>
))}
</ul>
</CardContent>
</Card>
))}
</div>
<Card>
<CardHeader>
<CardTitle>Control Architecture</CardTitle>
<CardDescription>
Hierarchical control system for coordinated humanoid operation
</CardDescription>
</CardHeader>
<CardContent>
<div className="space-y-4">
<div className="flex items-center space-x-3">
<div className="w-8 h-8 bg-primary rounded-full flex items-center justify-center text-white font-bold text-sm">1</div>
<div>
<h4 className="font-medium">Task Planning Layer</h4>
<p className="text-sm text-muted-foreground">High-level task decomposition and sequencing</p>
</div>
</div>
<div className="flex items-center space-x-3">
<div className="w-8 h-8 bg-primary rounded-full flex items-center justify-center text-white font-bold text-sm">2</div>
<div>
<h4 className="font-medium">Motion Planning Layer</h4>
<p className="text-sm text-muted-foreground">Whole-body motion planning and optimization</p>
</div>
</div>
<div className="flex items-center space-x-3">
<div className="w-8 h-8 bg-primary rounded-full flex items-center justify-center text-white font-bold text-sm">3</div>
<div>
<h4 className="font-medium">Control Layer</h4>
<p className="text-sm text-muted-foreground">Real-time joint control and force regulation</p>
</div>
</div>
<div className="flex items-center space-x-3">
<div className="w-8 h-8 bg-primary rounded-full flex items-center justify-center text-white font-bold text-sm">4</div>
<div>
<h4 className="font-medium">Execution Layer</h4>
<p className="text-sm text-muted-foreground">Low-level actuator control and feedback processing</p>
</div>
</div>
</div>
</CardContent>
</Card>
</TabsContent>
<TabsContent value="applications" className="space-y-6">
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
{applications.map((sector) => (
<Card key={sector.sector}>
<CardHeader>
<CardTitle>{sector.sector}</CardTitle>
<CardDescription>
Applications in the {sector.sector.toLowerCase()} sector
</CardDescription>
</CardHeader>
<CardContent>
<ul className="space-y-2">
{sector.uses.map((use) => (
<li key={use} className="flex items-center space-x-2 text-sm">
<Info className="h-4 w-4 text-blue-500" />
<span>{use}</span>
</li>
))}
</ul>
</CardContent>
</Card>
))}
</div>
<Card>
<CardHeader>
<CardTitle>Industry Impact</CardTitle>
<CardDescription>
How humanoid robots are transforming various industries
</CardDescription>
</CardHeader>
<CardContent>
<div className="space-y-6">
<div>
<h4 className="font-medium mb-2">Manufacturing Revolution</h4>
<p className="text-sm text-muted-foreground mb-3">
Humanoid robots are enabling flexible manufacturing processes, adapting to changing production needs
and working safely alongside human operators.
</p>
<div className="flex flex-wrap gap-2">
<Badge variant="outline">Collaborative Assembly</Badge>
<Badge variant="outline">Quality Inspection</Badge>
<Badge variant="outline">Flexible Production</Badge>
</div>
</div>
<div>
<h4 className="font-medium mb-2">Healthcare Innovation</h4>
<p className="text-sm text-muted-foreground mb-3">
Humanoid robots provide compassionate care and assistance, enhancing patient outcomes
and supporting healthcare professionals.
</p>
<div className="flex flex-wrap gap-2">
<Badge variant="outline">Patient Assistance</Badge>
<Badge variant="outline">Rehabilitation</Badge>
<Badge variant="outline">Medical Logistics</Badge>
</div>
</div>
<div>
<h4 className="font-medium mb-2">Service Excellence</h4>
<p className="text-sm text-muted-foreground mb-3">
Humanoid robots deliver personalized service experiences, enhancing customer satisfaction
and operational efficiency.
</p>
<div className="flex flex-wrap gap-2">
<Badge variant="outline">Customer Service</Badge>
<Badge variant="outline">Hospitality</Badge>
<Badge variant="outline">Retail Support</Badge>
</div>
</div>
</div>
</CardContent>
</Card>
</TabsContent>
<TabsContent value="integration" className="space-y-6">
<Card>
<CardHeader>
<CardTitle>Robotics MCP Integration</CardTitle>
<CardDescription>
Full integration with Robotics MCP for unified humanoid control
</CardDescription>
</CardHeader>
<CardContent>
<div className="space-y-4">
<div className="flex items-center space-x-3">
<div className="w-8 h-8 bg-primary rounded-full flex items-center justify-center text-white font-bold text-sm">1</div>
<div>
<h4 className="font-medium">Unified Control Interface</h4>
<p className="text-sm text-muted-foreground">Access all humanoid capabilities through standardized MCP tools</p>
</div>
</div>
<div className="flex items-center space-x-3">
<div className="w-8 h-8 bg-primary rounded-full flex items-center justify-center text-white font-bold text-sm">2</div>
<div>
<h4 className="font-medium">Multi-Robot Coordination</h4>
<p className="text-sm text-muted-foreground">Coordinate humanoids with other robots in complex tasks</p>
</div>
</div>
<div className="flex items-center space-x-3">
<div className="w-8 h-8 bg-primary rounded-full flex items-center justify-center text-white font-bold text-sm">3</div>
<div>
<h4 className="font-medium">Safety-First Architecture</h4>
<p className="text-sm text-muted-foreground">Built-in safety systems and human-aware navigation</p>
</div>
</div>
<div className="flex items-center space-x-3">
<div className="w-8 h-8 bg-primary rounded-full flex items-center justify-center text-white font-bold text-sm">4</div>
<div>
<h4 className="font-medium">Web Dashboard Control</h4>
<p className="text-sm text-muted-foreground">Full control through the robotics web interface</p>
</div>
</div>
</div>
</CardContent>
</Card>
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
<Card>
<CardHeader>
<CardTitle>ROS 2 Integration</CardTitle>
<CardDescription>
Standard ROS 2 interfaces for humanoid control
</CardDescription>
</CardHeader>
<CardContent>
<ul className="space-y-2 text-sm">
<li className="flex items-center space-x-2">
<CheckCircle className="h-3 w-3 text-green-500" />
<span>MoveIt! motion planning integration</span>
</li>
<li className="flex items-center space-x-2">
<CheckCircle className="h-3 w-3 text-green-500" />
<span>Navigation stack compatibility</span>
</li>
<li className="flex items-center space-x-2">
<CheckCircle className="h-3 w-3 text-green-500" />
<span>Perception pipeline integration</span>
</li>
<li className="flex items-center space-x-2">
<CheckCircle className="h-3 w-3 text-green-500" />
<span>Control interfaces and topics</span>
</li>
</ul>
</CardContent>
</Card>
<Card>
<CardHeader>
<CardTitle>SDK & Development</CardTitle>
<CardDescription>
Comprehensive development tools and APIs
</CardDescription>
</CardHeader>
<CardContent>
<ul className="space-y-2 text-sm">
<li className="flex items-center space-x-2">
<CheckCircle className="h-3 w-3 text-green-500" />
<span>Python SDK with high-level APIs</span>
</li>
<li className="flex items-center space-x-2">
<CheckCircle className="h-3 w-3 text-green-500" />
<span>C++ control libraries</span>
</li>
<li className="flex items-center space-x-2">
<CheckCircle className="h-3 w-3 text-green-500" />
<span>Simulation environments</span>
</li>
<li className="flex items-center space-x-2">
<CheckCircle className="h-3 w-3 text-green-500" />
<span>Documentation and examples</span>
</li>
</ul>
</CardContent>
</Card>
</div>
</TabsContent>
</Tabs>
{/* Navigation Footer */}
<div className="mt-12 pt-8 border-t">
<div className="flex items-center justify-between">
<Link href="/docs/robots">
<Button variant="outline">
<ChevronRight className="mr-2 h-4 w-4 rotate-180" />
Back to Robots
</Button>
</Link>
<div className="flex space-x-2">
<Link href="/docs/robots/scenne-humanoid">
<Button variant="outline">
Scenne Humanoid
<ChevronRight className="ml-2 h-4 w-4" />
</Button>
</Link>
</div>
</div>
</div>
</div>
</div>
)
}
