Spaces:
Running
Running
File size: 9,397 Bytes
ac3c070 |
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 160 161 162 163 164 165 166 167 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>LeggedGym Structure Diagram</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
.connector {
position: relative;
}
.connector::after {
content: '';
position: absolute;
top: 100%;
left: 50%;
width: 2px;
height: 20px;
background-color: #4b5563;
transform: translateX(-50%);
}
.horizontal-connector {
position: relative;
}
.horizontal-connector::after {
content: '';
position: absolute;
top: 50%;
left: 100%;
width: 20px;
height: 2px;
background-color: #4b5563;
}
@media (max-width: 768px) {
.mobile-stack {
flex-direction: column;
}
.mobile-stack .horizontal-connector::after {
width: 0;
height: 20px;
top: 100%;
left: 50%;
transform: translateX(-50%);
}
}
</style>
</head>
<body class="bg-gray-50 min-h-screen py-8 px-4">
<div class="max-w-6xl mx-auto">
<h1 class="text-3xl font-bold text-center text-gray-800 mb-2">
<i class="fas fa-robot mr-2 text-blue-500"></i>LeggedGym Architecture
</h1>
<p class="text-center text-gray-600 mb-8">A modular framework for legged robot learning</p>
<div class="bg-white rounded-xl shadow-lg p-6 mb-8">
<!-- Main Structure -->
<div class="flex flex-col items-center">
<!-- Top Level -->
<div class="bg-blue-600 text-white px-6 py-3 rounded-lg shadow-md text-center mb-6 connector">
<h2 class="font-bold text-xl">LeggedGym Core</h2>
<p class="text-sm opacity-80">Main framework for legged robot training</p>
</div>
<!-- Second Level -->
<div class="flex mobile-stack justify-center gap-8 mb-6">
<!-- Simulation Module -->
<div class="flex flex-col items-center">
<div class="bg-purple-500 text-white px-5 py-2 rounded-lg shadow-sm text-center mb-6 connector">
<h3 class="font-semibold"><i class="fas fa-cube mr-1"></i> Simulation</h3>
<p class="text-xs opacity-80">Physics engine integration</p>
</div>
<!-- Simulation Children -->
<div class="flex mobile-stack gap-4">
<div class="bg-purple-300 px-4 py-2 rounded text-center text-sm horizontal-connector">
<i class="fas fa-cogs mr-1"></i> Isaac Gym
</div>
<div class="bg-purple-300 px-4 py-2 rounded text-center text-sm">
<i class="fas fa-project-diagram mr-1"></i> PyBullet
</div>
</div>
</div>
<!-- Learning Module -->
<div class="flex flex-col items-center">
<div class="bg-green-500 text-white px-5 py-2 rounded-lg shadow-sm text-center mb-6 connector">
<h3 class="font-semibold"><i class="fas fa-brain mr-1"></i> Learning</h3>
<p class="text-xs opacity-80">RL algorithms & policies</p>
</div>
<!-- Learning Children -->
<div class="flex mobile-stack gap-4">
<div class="bg-green-300 px-4 py-2 rounded text-center text-sm horizontal-connector">
<i class="fas fa-network-wired mr-1"></i> PPO
</div>
<div class="bg-green-300 px-4 py-2 rounded text-center text-sm horizontal-connector">
<i class="fas fa-random mr-1"></i> SAC
</div>
<div class="bg-green-300 px-4 py-2 rounded text-center text-sm">
<i class="fas fa-route mr-1"></i> AMP
</div>
</div>
</div>
<!-- Robot Interface -->
<div class="flex flex-col items-center">
<div class="bg-yellow-500 text-white px-5 py-2 rounded-lg shadow-sm text-center mb-6 connector">
<h3 class="font-semibold"><i class="fas fa-robot mr-1"></i> Robot Interface</h3>
<p class="text-xs opacity-80">Hardware abstraction</p>
</div>
<!-- Robot Children -->
<div class="flex mobile-stack gap-4">
<div class="bg-yellow-300 px-4 py-2 rounded text-center text-sm horizontal-connector">
<i class="fas fa-paw mr-1"></i> ANYmal
</div>
<div class="bg-yellow-300 px-4 py-2 rounded text-center text-sm">
<i class="fas fa-dog mr-1"></i> Unitree
</div>
</div>
</div>
</div>
<!-- Third Level -->
<div class="bg-blue-400 text-white px-6 py-3 rounded-lg shadow-md text-center">
<h2 class="font-bold"><i class="fas fa-tasks mr-1"></i> Applications</h2>
<div class="flex flex-wrap justify-center gap-3 mt-2">
<span class="bg-blue-200 text-blue-800 px-3 py-1 rounded-full text-xs">Locomotion</span>
<span class="bg-blue-200 text-blue-800 px-3 py-1 rounded-full text-xs">Manipulation</span>
<span class="bg-blue-200 text-blue-800 px-3 py-1 rounded-full text-xs">Navigation</span>
<span class="bg-blue-200 text-blue-800 px-3 py-1 rounded-full text-xs">Recovery</span>
</div>
</div>
</div>
</div>
<div class="grid md:grid-cols-3 gap-6">
<div class="bg-white p-4 rounded-lg shadow">
<h3 class="font-semibold text-blue-600 mb-2"><i class="fas fa-cube mr-2"></i>Key Features</h3>
<ul class="text-sm text-gray-600 space-y-1">
<li><i class="fas fa-check-circle text-green-500 mr-1"></i> GPU-accelerated simulation</li>
<li><i class="fas fa-check-circle text-green-500 mr-1"></i> Modular architecture</li>
<li><i class="fas fa-check-circle text-green-500 mr-1"></i> Multi-robot support</li>
<li><i class="fas fa-check-circle text-green-500 mr-1"></i> Curriculum learning</li>
</ul>
</div>
<div class="bg-white p-4 rounded-lg shadow">
<h3 class="font-semibold text-purple-600 mb-2"><i class="fas fa-exchange-alt mr-2"></i>Data Flow</h3>
<div class="text-sm text-gray-600">
<p class="mb-1"><i class="fas fa-arrow-right text-purple-500 mr-1"></i> Observations → Policy</p>
<p class="mb-1"><i class="fas fa-arrow-right text-purple-500 mr-1"></i> Actions → Simulation</p>
<p><i class="fas fa-sync-alt text-purple-500 mr-1"></i> Reward calculation</p>
</div>
</div>
<div class="bg-white p-4 rounded-lg shadow">
<h3 class="font-semibold text-green-600 mb-2"><i class="fas fa-code-branch mr-2"></i>Extensions</h3>
<div class="text-sm text-gray-600">
<p><i class="fas fa-plus-circle text-green-500 mr-1"></i> Custom environments</p>
<p><i class="fas fa-plus-circle text-green-500 mr-1"></i> New robot models</p>
<p><i class="fas fa-plus-circle text-green-500 mr-1"></i> Alternative algorithms</p>
</div>
</div>
</div>
</div>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=MightyCrane/isaacgym" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html> |