|
|
<!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; |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
#wall-e-head { |
|
|
transform-origin: bottom center; |
|
|
} |
|
|
#wall-e-left-arm, #wall-e-right-arm { |
|
|
transform-origin: top center; |
|
|
} |
|
|
#wall-e-left-wheel, #wall-e-right-wheel { |
|
|
transform-origin: center center; |
|
|
} |
|
|
|
|
|
#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-head { |
|
|
position: absolute; |
|
|
top: 50px; |
|
|
left: 50%; |
|
|
transform: translateX(-50%); |
|
|
z-index: 15; |
|
|
} |
|
|
#wall-e-left-arm { |
|
|
position: absolute; |
|
|
top: 30px; |
|
|
left: -10px; |
|
|
z-index: 5; |
|
|
} |
|
|
#wall-e-right-arm { |
|
|
position: absolute; |
|
|
top: 30px; |
|
|
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() { |
|
|
|
|
|
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'); |
|
|
|
|
|
|
|
|
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); |
|
|
}); |
|
|
|
|
|
|
|
|
function generateRandomMovement() { |
|
|
Object.keys(joints).forEach(jointName => { |
|
|
const joint = joints[jointName]; |
|
|
let movementValue = 0; |
|
|
let transformStyle = ''; |
|
|
|
|
|
const randomAmplitude = (Math.random() * 0.7 + 0.3); |
|
|
|
|
|
if (jointName === 'head') { |
|
|
|
|
|
const rotationRange = 25; |
|
|
const bobbingAmplitude = 20; |
|
|
const baseHeadY = 50; |
|
|
|
|
|
movementValue = rotationRange * (Math.sin(Date.now() / 250 + Math.PI / 2) * randomAmplitude); |
|
|
joint.currentY = baseHeadY + (bobbingAmplitude * (Math.sin(Date.now() / 150) * randomAmplitude)); |
|
|
|
|
|
transformStyle = `translateX(-50%) translateY(${joint.currentY}px) rotate(${movementValue}deg)`; |
|
|
} else if (jointName === 'left-arm') { |
|
|
|
|
|
const swingRange = 70; |
|
|
movementValue = swingRange * (Math.sin(Date.now() / 200) * randomAmplitude); |
|
|
transformStyle = `rotate(${movementValue}deg)`; |
|
|
} else if (jointName === 'right-arm') { |
|
|
|
|
|
const swingRange = 70; |
|
|
movementValue = swingRange * (-Math.sin(Date.now() / 200) * randomAmplitude); |
|
|
transformStyle = `rotate(${movementValue}deg)`; |
|
|
} else if (jointName === 'left-wheel' || jointName === 'right-wheel') { |
|
|
|
|
|
const bounceAmplitude = 5; |
|
|
movementValue = bounceAmplitude * (Math.sin(Date.now() / 100) * randomAmplitude); |
|
|
transformStyle = `translateY(${movementValue}px)`; |
|
|
} |
|
|
|
|
|
joint.element.style.transform = transformStyle; |
|
|
|
|
|
|
|
|
let graphNormalizedValue = 100; |
|
|
if (jointName === 'head') { |
|
|
graphNormalizedValue = 100 + (movementValue * 2); |
|
|
} else if (jointName.includes('arm')) { |
|
|
graphNormalizedValue = 100 + (movementValue * 1.5); |
|
|
} else if (jointName.includes('wheel')) { |
|
|
graphNormalizedValue = 100 + (movementValue * 5); |
|
|
} |
|
|
|
|
|
joint.points.push(graphNormalizedValue); |
|
|
if (joint.points.length > 100) { |
|
|
joint.points.shift(); |
|
|
} |
|
|
|
|
|
|
|
|
joint.element.classList.add('joint-highlight'); |
|
|
setTimeout(() => { |
|
|
joint.element.classList.remove('joint-highlight'); |
|
|
}, 200); |
|
|
}); |
|
|
|
|
|
updateGraph(); |
|
|
} |
|
|
|
|
|
|
|
|
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); |
|
|
}); |
|
|
} |
|
|
|
|
|
|
|
|
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..."; |
|
|
|
|
|
|
|
|
collectionInterval = setInterval(() => { |
|
|
generateRandomMovement(); |
|
|
|
|
|
|
|
|
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) { |
|
|
statusMessage.textContent = messages[Math.floor(Math.random() * messages.length)]; |
|
|
} |
|
|
}, 100); |
|
|
|
|
|
|
|
|
setTimeout(() => { |
|
|
stopCollection(); |
|
|
statusMessage.textContent = "Training complete! Wall-E's humor rating increased by 12%!"; |
|
|
}, 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'); |
|
|
} |
|
|
|
|
|
|
|
|
const autoInterval = setInterval(generateRandomMovement, 100); |
|
|
updateGraph(); |
|
|
|
|
|
|
|
|
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> |
