Spaces:

simsdin55
/

pixflow-motion-magic

Running

App Files Files Community

simsdin55 commited on Oct 21, 2025

Commit

0191c63

verified ·

1 Parent(s): d95ce5c

use motionmuse.ai like engine for free to make the operation going

Browse files

Files changed (4) hide show

components/motionmuse-integration.js +51 -0
index.html +1 -0
script.js +77 -12
style.css +12 -0

components/motionmuse-integration.js ADDED Viewed

	@@ -0,0 +1,51 @@

+class MotionMuseIntegration extends HTMLElement {
+  constructor() {
+    super();
+    this.apiKey = 'free_tier_key'; // Replace with actual free tier key
+    this.baseUrl = 'https://api.motionmuse.ai/v1';
+  }
+  async generateAnimation(imageData, options = {}) {
+    try {
+      const response = await fetch(`${this.baseUrl}/animate`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          'Authorization': `Bearer ${this.apiKey}`
+        },
+        body: JSON.stringify({
+          image: imageData,
+          duration: options.duration || 10,
+          style: options.style || 'realistic',
+          music: options.music || false,
+          nsfw: true
+        })
+      });
+      if (!response.ok) {
+        throw new Error('Animation generation failed');
+      }
+      return await response.json();
+    } catch (error) {
+      console.error('MotionMuse API error:', error);
+      throw error;
+    }
+  }
+  async getStatus(jobId) {
+    try {
+      const response = await fetch(`${this.baseUrl}/status/${jobId}`, {
+        headers: {
+          'Authorization': `Bearer ${this.apiKey}`
+        }
+      });
+      return await response.json();
+    } catch (error) {
+      console.error('Status check error:', error);
+      throw error;
+    }
+  }
+}
+customElements.define('motionmuse-integration', MotionMuseIntegration);

index.html CHANGED Viewed

@@ -11,6 +11,7 @@
     <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
     <script src="components/navbar.js"></script>
     <script src="components/footer.js"></script>
 </head>
 <body class="bg-gray-900 text-white min-h-screen flex flex-col">
     <nsfw-warning></nsfw-warning>

     <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
     <script src="components/navbar.js"></script>
     <script src="components/footer.js"></script>
+    <script src="components/motionmuse-integration.js"></script>
 </head>
 <body class="bg-gray-900 text-white min-h-screen flex flex-col">
     <nsfw-warning></nsfw-warning>

script.js CHANGED Viewed

@@ -1,6 +1,11 @@
 // Shared functionality across pages
-document.addEventListener('DOMContentLoaded', () => {
-    // Initialize tooltips
     const tooltipElements = document.querySelectorAll('[data-tooltip]');
     tooltipElements.forEach(el => {
         const tooltip = document.createElement('div');
@@ -19,23 +24,83 @@ document.addEventListener('DOMContentLoaded', () => {
             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();
-            // Simulate generation time
-            setTimeout(() => {
-                generateBtn.innerHTML = '<i data-feather="download" class="mr-2"></i> Download Video';
                 feather.replace();
-                // 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();
@@ -43,7 +108,7 @@ document.addEventListener('DOMContentLoaded', () => {
                     toast.classList.add('opacity-0', 'transition-opacity', 'duration-300');
                     setTimeout(() => toast.remove(), 300);
                 }, 3000);
-            }, 3000);
-        });
     }
 });

 // Shared functionality across pages
+document.addEventListener('DOMContentLoaded', async () => {
+    // Initialize MotionMuse integration
+    const motionMuse = document.createElement('motionmuse-integration');
+    document.body.appendChild(motionMuse);
+// Initialize tooltips
     const tooltipElements = document.querySelectorAll('[data-tooltip]');
     tooltipElements.forEach(el => {
         const tooltip = document.createElement('div');
             tooltip.classList.add('hidden');
         });
     });
     // Handle generate button click
     const generateBtn = document.getElementById('generateBtn');
     if (generateBtn) {
+        generateBtn.addEventListener('click', async () => {
+            const imagePreview = document.getElementById('imagePreview');
+            if (!imagePreview.src) return;
             generateBtn.innerHTML = '<i data-feather="loader" class="animate-spin mr-2"></i> Generating...';
             feather.replace();
+            generateBtn.disabled = true;
+            try {
+                // Get user options
+                const style = document.querySelector('select:nth-of-type(1)').value;
+                const duration = document.querySelector('input[type="range"]').value;
+                const music = document.querySelector('select:nth-of-type(2)').value;
+                // Generate animation
+                const result = await motionMuse.generateAnimation(imagePreview.src, {
+                    duration,
+                    style,
+                    music: music !== 'None'
+                });
+                // Poll for completion
+                const pollStatus = async () => {
+                    const status = await motionMuse.getStatus(result.jobId);
+                    if (status.progress === 100) {
+                        // Update video preview
+                        const videoPreview = document.getElementById('animationPreview');
+                        videoPreview.innerHTML = `
+                            <video src="${status.videoUrl}" autoplay loop muted class="w-full h-full object-cover"></video>
+                            <div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent"></div>
+                        `;
+                        generateBtn.innerHTML = '<i data-feather="download" class="mr-2"></i> Download Video';
+                        feather.replace();
+                        generateBtn.disabled = false;
+                        // 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);
+                        // Enable download
+                        generateBtn.addEventListener('click', () => {
+                            const a = document.createElement('a');
+                            a.href = status.videoUrl;
+                            a.download = 'pixflow-animation.mp4';
+                            a.click();
+                        });
+                    } else {
+                        // Update progress
+                        generateBtn.innerHTML = `<i data-feather="loader" class="animate-spin mr-2"></i> Generating (${status.progress}%)`;
+                        feather.replace();
+                        setTimeout(pollStatus, 1500);
+                    }
+                };
+                await pollStatus();
+            } catch (error) {
+                console.error('Generation error:', error);
+                generateBtn.innerHTML = '<i data-feather="alert-circle" class="mr-2"></i> Try Again';
                 feather.replace();
+                generateBtn.disabled = false;
+                // Show error message
                 const toast = document.createElement('div');
+                toast.className = 'fixed bottom-4 right-4 bg-red-600 text-white px-4 py-2 rounded-lg shadow-lg flex items-center';
+                toast.innerHTML = '<i data-feather="alert-triangle" class="mr-2"></i> Generation failed. Please try again.';
                 document.body.appendChild(toast);
                 feather.replace();
                     toast.classList.add('opacity-0', 'transition-opacity', 'duration-300');
                     setTimeout(() => toast.remove(), 300);
                 }, 3000);
+            }
+});
     }
 });

style.css CHANGED Viewed

@@ -21,6 +21,18 @@ body {
 ::-webkit-scrollbar-thumb:hover {
     background: #dc2626;
 }
 /* Animation effects */
 @keyframes float {

 ::-webkit-scrollbar-thumb:hover {
     background: #dc2626;
 }
+/* Animation effects and video styles */
+video {
+    object-fit: cover;
+    width: 100%;
+    height: 100%;
+}
+.progress-bar {
+    height: 4px;
+    background: #3b82f6;
+    transition: width 0.3s;
+}
 /* Animation effects */
 @keyframes float {