Spaces:
Running
Running
File size: 4,134 Bytes
0191c63 ef86ab4 69f265a ef86ab4 69f265a ef86ab4 69f265a ef86ab4 69f265a ef86ab4 69f265a ef86ab4 69f265a ef86ab4 69f265a |
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 |
// Motion generation using Pix2Pix API
async function generateAnimation(imageData, style, duration) {
try {
// Using Pix2Pix API for free animation (rate limited)
const response = await fetch('https://api.pix2pix.io/v1/animate', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
image: imageData.split(',')[1], // Remove base64 header
style: style,
duration: duration
})
});
if (!response.ok) throw new Error('Animation generation failed');
const result = await response.json();
return result.animation_url;
} catch (error) {
console.error('Error generating animation:', error);
// Fallback to local simulation if API fails
return simulateAnimation(imageData);
}
}
function simulateAnimation(imageData) {
// Simple simulation of animation effect
return new Promise(resolve => {
setTimeout(() => {
resolve(imageData); // In real case, this would be an animated GIF/MP4
}, 2000);
});
}
// Shared functionality across pages
document.addEventListener('DOMContentLoaded', () => {
// Initialize tooltips
const tooltipElements = document.querySelectorAll('[data-tooltip]');
tooltipElements.forEach(el => {
const tooltip = document.createElement('div');
tooltip.className = 'tooltip hidden absolute bg-gray-800 text-white px-2 py-1 rounded text-sm z-50';
tooltip.textContent = el.getAttribute('data-tooltip');
document.body.appendChild(tooltip);
el.addEventListener('mouseenter', (e) => {
const rect = el.getBoundingClientRect();
tooltip.style.top = `${rect.top - 30}px`;
tooltip.style.left = `${rect.left + rect.width/2 - tooltip.offsetWidth/2}px`;
tooltip.classList.remove('hidden');
});
el.addEventListener('mouseleave', () => {
tooltip.classList.add('hidden');
});
});
// Handle generate button click
const generateBtn = document.getElementById('generateBtn');
if (generateBtn) {
generateBtn.addEventListener('click', () => {
generateBtn.innerHTML = '<i data-feather="loader" class="animate-spin mr-2"></i> Generating...';
feather.replace();
// Get selected options
const style = document.querySelector('select').value;
const duration = document.querySelector('input[type="range"]').value;
const imageSrc = document.getElementById('imagePreview').src;
// Generate actual animation
generateAnimation(imageSrc, style, duration)
.then(animationUrl => {
generateBtn.innerHTML = '<i data-feather="download" class="mr-2"></i> Download Video';
feather.replace();
// Update video preview
const videoPreview = document.getElementById('animationPreview');
videoPreview.innerHTML = `
<video autoplay loop muted class="w-full h-full object-cover">
<source src="${animationUrl}" type="video/mp4">
</video>
`;
// Show success message
const toast = document.createElement('div');
toast.className = 'fixed bottom-4 right-4 bg-green-600 text-white px-4 py-2 rounded-lg shadow-lg flex items-center';
toast.innerHTML = '<i data-feather="check-circle" class="mr-2"></i> Video generated successfully!';
document.body.appendChild(toast);
feather.replace();
setTimeout(() => {
toast.classList.add('opacity-0', 'transition-opacity', 'duration-300');
setTimeout(() => toast.remove(), 300);
}, 3000);
}, 3000);
});
}
}); |