Hugging Face's logo

Spaces:
LeRobot-worldwide-hackathon
/
LeFunnyRobot
Running

App Files Community
LeFunnyRobot / index.html
YoussefSharawy91's picture
YoussefSharawy91
Update index.html
032aa32 verified
raw
history blame contribute delete
23.4 kB
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>🇪🇬Wall-E Training Interface</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>
 @keyframes pulse {
 0%, 100% { opacity: 1; }
 50% { opacity: 0.6; }
 }
 .pulse-animation {
 animation: pulse 2s infinite;
 }
 .graph-line {
 stroke-width: 3;
 stroke-linecap: round;
 }
 #wall-e-container {
 transition: all 0.3s ease;
 }
 .joint-highlight {
 box-shadow: 0 0 15px currentColor;
 }
 /* Specific Wall-E part styles for transform origins */
 /* #wall-e-neck is removed */
 #wall-e-head {
 transform-origin: bottom center; /* Rotate from the base of the head */
 }
 #wall-e-left-arm, #wall-e-right-arm {
 transform-origin: top center; /* Arms swing from the shoulder/top joint */
 }
 #wall-e-left-wheel, #wall-e-right-wheel {
 transform-origin: center center; /* Wheels rotate around their center */
 }
 /* Ensure Wall-E parts are positioned absolutely within their container for movement */
 #wall-e-body-main {
 position: absolute;
 top: 0;
 left: 50%;
 transform: translateX(-50%);
 }
 #wall-e-tracks-base {
 position: absolute;
 bottom: 0;
 left: 0;
 }
 /* #wall-e-neck positioning removed */
 #wall-e-head {
 position: absolute;
 top: 50px; /* Adjusted: now positioned relative to the main Wall-E container */
 left: 50%;
 transform: translateX(-50%);
 z-index: 15; /* Ensure head is above other parts if needed */
 }
 #wall-e-left-arm {
 position: absolute;
 top: 30px; /* Adjusted position to look like it comes from the body */
 left: -10px;
 z-index: 5;
 }
 #wall-e-right-arm {
 position: absolute;
 top: 30px; /* Adjusted position */
 right: -10px;
 z-index: 5;
 }
 #wall-e-left-wheel {
 position: absolute;
 bottom: 2px;
 left: 10px;
 }
 #wall-e-right-wheel {
 position: absolute;
 bottom: 2px;
 right: 10px;
 }
 </style>
</head>
<body class="bg-gray-900 text-white min-h-screen">
 <div class="container mx-auto px-4 py-8">
 <header class="flex flex-col md:flex-row justify-between items-center mb-8">
 <div class="flex items-center mb-4 md:mb-0">
 <i class="fas fa-robot text-4xl text-yellow-400 mr-3"></i>
 <h1 class="text-3xl font-bold bg-gradient-to-r from-yellow-400 to-green-400 bg-clip-text text-transparent">
 🇪🇬Wall-E Training Module
 </h1>
 </div>
 <div class="flex items-center space-x-4">
 <div class="relative">
 <div class="h-3 w-3 rounded-full bg-green-500 absolute -top-1 -right-1 animate-ping"></div>
 <span class="px-4 py-2 bg-gray-800 rounded-lg flex items-center">
 <span class="mr-2">Training Mode</span>
 <i class="fas fa-brain text-yellow-400"></i>
 </span>
 </div>
 </div>
 </header>
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
 <div class="lg:col-span-2 space-y-6">
 <div class="bg-gray-800 rounded-xl p-6 shadow-lg border border-gray-700">
 <h2 class="text-xl font-semibold mb-4 flex items-center">
 <i class="fas fa-video mr-2 text-yellow-400"></i>
 Video Input Source
 </h2>
 <div class="relative pt-[56.25%] bg-black rounded-lg overflow-hidden mb-4">
 <iframe class="absolute top-0 left-0 w-full h-full"
src="https://www.youtube.com/embed/8-_9n5DtKOc?modestbranding=1&rel=0"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen></iframe>
 </div>
 <div class="flex flex-wrap gap-3 mt-4">
 <input type="text" placeholder="Enter YouTube URL..."
class="flex-1 px-4 py-2 bg-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-yellow-400">
 <button class="px-6 py-2 bg-yellow-500 hover:bg-yellow-600 text-gray-900 font-semibold rounded-lg transition flex items-center">
 <i class="fas fa-link mr-2"></i> Load
 </button>
 </div>
 </div>
<div class="bg-gray-800 rounded-xl p-6 shadow-lg border border-gray-700">
 <h2 class="text-xl font-semibold mb-4 flex items-center">
 <i class="fas fa-database mr-2 text-green-400"></i>
 Data Collection
 </h2>
 <div class="grid grid-cols-2 md:grid-cols-3 gap-4 mb-6">
 <div class="bg-gray-700 p-4 rounded-lg">
 <div class="text-sm text-gray-400 mb-1">Frames Processed</div>
 <div class="text-2xl font-mono">1,248</div>
 </div>
 <div class="bg-gray-700 p-4 rounded-lg">
 <div class="text-sm text-gray-400 mb-1">Data Points</div>
 <div class="text-2xl font-mono">7,488</div>
 </div>
 <div class="bg-gray-700 p-4 rounded-lg">
 <div class="text-sm text-gray-400 mb-1">Accuracy</div>
 <div class="text-2xl font-mono">92.7%</div>
 </div>
 </div>
 <div class="flex flex-wrap gap-3">
 <button id="start-btn" class="px-6 py-3 bg-green-600 hover:bg-green-700 text-white font-semibold rounded-lg transition flex items-center">
 <i class="fas fa-play mr-2"></i> Start Collection
 </button>
 <button class="px-6 py-3 bg-red-600 hover:bg-red-700 text-white font-semibold rounded-lg transition flex items-center">
 <i class="fas fa-stop mr-2"></i> Stop
 </button>
 <button class="px-6 py-3 bg-blue-600 hover:bg-blue-700 text-white font-semibold rounded-lg transition flex items-center">
 <i class="fas fa-save mr-2"></i> Save Dataset
 </button>
 </div>
 </div>
 </div>
<div class="space-y-6">
 <div class="bg-gray-800 rounded-xl p-6 shadow-lg border border-gray-700">
 <h2 class="text-xl font-semibold mb-4 flex items-center">
 <i class="fas fa-robot mr-2 text-yellow-400"></i>
 Joint Visualization
 </h2>
 <div id="wall-e-container" class="flex justify-center items-center h-64 relative">
 <div class="relative w-40 h-48">
 <div id="wall-e-body-main" class="w-24 h-32 bg-yellow-400 rounded-t-full"></div>
 <div id="wall-e-tracks-base" class="w-full h-8 bg-gray-600 rounded-full"></div>
<div id="wall-e-head" class="w-12 h-8 bg-yellow-300 rounded-t-full">
 <div class="absolute top-1 left-2 w-8 h-6 bg-white rounded-full flex justify-between px-1">
 <div class="w-3 h-3 bg-blue-500 rounded-full mt-1"></div>
 <div class="w-3 h-3 bg-blue-500 rounded-full mt-1"></div>
 </div>
 </div>
<div id="wall-e-left-arm" class="w-4 h-16 bg-yellow-500 rounded-lg">
 <div class="absolute bottom-0 w-6 h-4 bg-gray-600 rounded-full -left-1"></div>
 </div>
 <div id="wall-e-right-arm" class="w-4 h-16 bg-yellow-500 rounded-lg">
 <div class="absolute bottom-0 w-6 h-4 bg-gray-600 rounded-full -right-1"></div>
 </div>
<div id="wall-e-left-wheel" class="w-8 h-8 rounded-full bg-gray-700 border-2 border-gray-500"></div>
 <div id="wall-e-right-wheel" class="w-8 h-8 rounded-full bg-gray-700 border-2 border-gray-500"></div>
 </div>
 </div>
 <div class="mt-4 grid grid-cols-3 gap-2">
 <div class="flex items-center">
 <div class="w-4 h-4 rounded-full bg-blue-500 mr-2"></div>
 <span class="text-sm">Left Arm</span>
 </div>
 <div class="flex items-center">
 <div class="w-4 h-4 rounded-full bg-green-500 mr-2"></div>
 <span class="text-sm">Right Arm</span>
 </div>
 <div class="flex items-center">
 <div class="w-4 h-4 rounded-full bg-purple-500 mr-2"></div>
 <span class="text-sm">Left Wheel</span>
 </div>
 <div class="flex items-center">
 <div class="w-4 h-4 rounded-full bg-yellow-500 mr-2"></div>
 <span class="text-sm">Right Wheel</span>
 </div>
 <div class="flex items-center">
 <div class="w-4 h-4 rounded-full bg-pink-500 mr-2"></div>
 <span class="text-sm">Head</span>
 </div>
 </div>
 </div>
<div class="bg-gray-800 rounded-xl p-6 shadow-lg border border-gray-700">
 <h2 class="text-xl font-semibold mb-4 flex items-center">
 <i class="fas fa-chart-line mr-2 text-blue-400"></i>
 Joint Motion Data
 </h2>
 <div class="h-64 relative">
 <svg id="motion-graph" class="w-full h-full" viewBox="0 0 500 250" preserveAspectRatio="none">
 <line x1="0" y1="50" x2="500" y2="50" stroke="#374151" stroke-width="1" stroke-dasharray="5,5" />
 <line x1="0" y1="100" x2="500" y2="100" stroke="#374151" stroke-width="1" stroke-dasharray="5,5" />
 <line x1="0" y1="150" x2="500" y2="150" stroke="#374151" stroke-width="1" stroke-dasharray="5,5" />
 <line x1="0" y1="200" x2="500" y2="200" stroke="#374151" stroke-width="1" stroke-dasharray="5,5" />
</svg>
 <div id="graph-legend" class="absolute bottom-0 right-0 bg-gray-900 bg-opacity-80 p-2 rounded-tl-lg text-xs">
 <div class="flex items-center mb-1">
 <div class="w-3 h-3 rounded-full bg-blue-500 mr-2"></div>
 <span>Left Arm</span>
 </div>
 <div class="flex items-center mb-1">
 <div class="w-3 h-3 rounded-full bg-green-500 mr-2"></div>
 <span>Right Arm</span>
 </div>
 <div class="flex items-center mb-1">
 <div class="w-3 h-3 rounded-full bg-purple-500 mr-2"></div>
 <span>Left Wheel</span>
 </div>
 <div class="flex items-center mb-1">
 <div class="w-3 h-3 rounded-full bg-yellow-500 mr-2"></div>
 <span>Right Wheel</span>
 </div>
 <div class="flex items-center">
 <div class="w-3 h-3 rounded-full bg-pink-500 mr-2"></div>
 <span>Head</span>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
<div class="mt-8 bg-gray-800 rounded-xl p-4 shadow-lg border border-gray-700">
 <div class="flex items-center justify-between">
 <div class="flex items-center">
 <div class="h-3 w-3 rounded-full bg-green-500 mr-2"></div>
 <span class="text-sm">System Active</span>
 </div>
 <div class="text-sm text-gray-400">
 <span id="status-message">Ready to collect training data...</span>
 </div>
 <div class="text-sm">
 <i class="fas fa-battery-three-quarters text-green-500 mr-1"></i>
 <span>78% Power</span>
 </div>
 </div>
 </div>
 </div>
<script>
 document.addEventListener('DOMContentLoaded', function() {
 // Update joint references - 'neck' element is now removed
 const joints = {
 'left-arm': { element: document.getElementById('wall-e-left-arm'), color: 'blue', path: null, points: [], currentRotation: 0 },
 'right-arm': { element: document.getElementById('wall-e-right-arm'), color: 'green', path: null, points: [], currentRotation: 0 },
 'left-wheel': { element: document.getElementById('wall-e-left-wheel'), color: 'purple', path: null, points: [], currentRotation: 0 },
 'right-wheel': { element: document.getElementById('wall-e-right-wheel'), color: 'yellow', path: null, points: [], currentRotation: 0 },
 'head': { element: document.getElementById('wall-e-head'), color: 'pink', path: null, points: [], currentRotation: 0, currentY: 0 }
 };
 const svg = document.getElementById('motion-graph');
 const statusMessage = document.getElementById('status-message');
 const startBtn = document.getElementById('start-btn');
// Initialize graph paths
 Object.keys(joints).forEach(joint => {
 joints[joint].path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
 joints[joint].path.classList.add('graph-line');
 joints[joint].path.setAttribute('stroke', joints[joint].color);
 joints[joint].path.setAttribute('fill', 'none');
 svg.appendChild(joints[joint].path);
 });
 // Generate funny joint movements
 function generateRandomMovement() {
 Object.keys(joints).forEach(jointName => {
 const joint = joints[jointName];
 let movementValue = 0;
 let transformStyle = '';
 const randomAmplitude = (Math.random() * 0.7 + 0.3); // Between 0.3 and 1.0 for more varied movement
if (jointName === 'head') {
 // Head: Bobbing, tilting, and swiveling slightly (now directly from body)
 const rotationRange = 25; // Max 25 degrees tilt
 const bobbingAmplitude = 20; // Max 20px bob
 const baseHeadY = 50; // Original top positioning of head div in CSS
movementValue = rotationRange * (Math.sin(Date.now() / 250 + Math.PI / 2) * randomAmplitude); // Tilt
 joint.currentY = baseHeadY + (bobbingAmplitude * (Math.sin(Date.now() / 150) * randomAmplitude)); // Bobbing
transformStyle = `translateX(-50%) translateY(${joint.currentY}px) rotate(${movementValue}deg)`;
 } else if (jointName === 'left-arm') {
 // Left Arm: Wild, exaggerated swings
 const swingRange = 70; // Max 70 degrees swing
 movementValue = swingRange * (Math.sin(Date.now() / 200) * randomAmplitude);
 transformStyle = `rotate(${movementValue}deg)`;
 } else if (jointName === 'right-arm') {
 // Right Arm: Opposite wild swing to left arm
 const swingRange = 70; // Max 70 degrees swing
 movementValue = swingRange * (-Math.sin(Date.now() / 200) * randomAmplitude); // Opposite phase
 transformStyle = `rotate(${movementValue}deg)`;
 } else if (jointName === 'left-wheel' || jointName === 'right-wheel') {
 // Wheels: Subtle bounce
 const bounceAmplitude = 5; // Max 5px bounce
 movementValue = bounceAmplitude * (Math.sin(Date.now() / 100) * randomAmplitude);
 transformStyle = `translateY(${movementValue}px)`;
 }
joint.element.style.transform = transformStyle;
 // Add point to graph (normalized to 0-200 range)
 let graphNormalizedValue = 100; // default to center
 if (jointName === 'head') {
 graphNormalizedValue = 100 + (movementValue * 2); // Scale degrees for graph
 } else if (jointName.includes('arm')) {
 graphNormalizedValue = 100 + (movementValue * 1.5); // Scale degrees for graph
 } else if (jointName.includes('wheel')) {
 graphNormalizedValue = 100 + (movementValue * 5); // Scale pixels for graph
 }
 joint.points.push(graphNormalizedValue);
 if (joint.points.length > 100) {
 joint.points.shift();
 }
// Highlight the joint
 joint.element.classList.add('joint-highlight');
 setTimeout(() => {
 joint.element.classList.remove('joint-highlight');
 }, 200); // Shorter highlight duration
 });
updateGraph();
 }
// Update the graph with current data points
 function updateGraph() {
 Object.keys(joints).forEach(joint => {
 let pathData = '';
 joints[joint].points.forEach((point, index) => {
 const x = index * (500 / 100);
 const y = 250 - point;
 if (index === 0) {
 pathData += `M ${x} ${y}`;
 } else {
 pathData += ` L ${x} ${y}`;
 }
 });
 joints[joint].path.setAttribute('d', pathData);
 });
 }
// Start/stop data collection
 let isCollecting = false;
 let collectionInterval;
startBtn.addEventListener('click', function() {
 if (isCollecting) return;
isCollecting = true;
 startBtn.innerHTML = '<i class="fas fa-circle-notch fa-spin mr-2"></i> Collecting...';
 startBtn.classList.remove('bg-green-600', 'hover:bg-green-700');
 startBtn.classList.add('bg-yellow-600', 'hover:bg-yellow-700');
statusMessage.textContent = "Analyzing Wall-E's movements from video...";
// Start generating funny movements continuously
 collectionInterval = setInterval(() => {
 generateRandomMovement();
// Funny status updates
 const messages = [
 "Wall-E is telling robot jokes...",
 "Analyzing comedy patterns...",
 "Detecting sarcasm in movements...",
 "Translating robot laughter...",
 "Teaching Wall-E stand-up...",
 "Processing punchlines...",
 "Calculating funny bone position..."
 ];
 if (Math.random() > 0.6) { // More frequent funny messages
 statusMessage.textContent = messages[Math.floor(Math.random() * messages.length)];
 }
 }, 100); // Even faster update for more fluid animation
// Simulate completion after 15 seconds
 setTimeout(() => {
 stopCollection();
 statusMessage.textContent = "Training complete! Wall-E's humor rating increased by 12%!"; // Funnier completion message
 }, 15000);
 });
function stopCollection() {
 clearInterval(collectionInterval);
 isCollecting = false;
 startBtn.innerHTML = '<i class="fas fa-play mr-2"></i> Start Collection';
 startBtn.classList.remove('bg-yellow-600', 'hover:bg-yellow-700');
 startBtn.classList.add('bg-green-600', 'hover:bg-green-700');
 }
// Start animation immediately
 const autoInterval = setInterval(generateRandomMovement, 100); // Start faster
 updateGraph();
// Highlight joints on legend hover
 const legendItems = document.querySelectorAll('#graph-legend > div');
 legendItems.forEach((item, index) => {
 const jointName = Object.keys(joints)[index];
 item.addEventListener('mouseenter', () => {
 joints[jointName].path.setAttribute('stroke-width', '5');
 joints[jointName].element.classList.add('joint-highlight');
});
 item.addEventListener('mouseleave', () => {
 joints[jointName].path.setAttribute('stroke-width', '3');
 joints[jointName].element.classList.remove('joint-highlight');
 });
 });
 });
 </script>
</body>
</html>