Hugging Face's logo

Spaces:
00Boobs00
/
frameforge-studio
Running

App Files Community
00Boobs00 commited on
Commit
12a4e8b
·
verified ·
1 Parent(s): c6e21e7

To successfully establish a robust image-to-video generation pipeline using the Lora models available at [Hugging Face's Wan2.2 Loras repository](https://huggingface.co/Playtime-AI/Wan2.2-Loras), we will need to create a user-friendly system that simplifies the process of loading models and generating videos from uploaded images.

Browse files

The first step in this enhanced setup involves selecting the optimal base model varieties that align with the desired functionality. Users should be presented with a curated selection of models tailored for various use cases, enabling them to easily decide which model best fits their specific requirements. This selection process should include detailed descriptions and use-case scenarios for each model, helping users make informed choices.

Once users have chosen their preferred base model, the next crucial element is implementing an intuitive model loading mechanism. This will facilitate seamless integration of the selected models into the image-to-video generation process. By offering straightforward instructions and a streamlined interface, users can upload one or more images to guide the Lora models and their respective base generators with ease.

To enrich the functionality of our application, we must incorporate a variety of advanced customization options that allow users to tailor the output to their preferences. This could include settings for adjusting the duration of the video, the transition effects between images, and the overall aesthetic style of the generated video. Furthermore, incorporating sliders or input fields for parameters such as frame rate, resolution, and visual effects would greatly enhance user engagement and creative control.

Moreover, it is essential to optimize the framework to support additional models capable of handling the various adjustable steps within the image-to-video generation process. This could mean integrating models specifically designed for enhancing image quality, improving video stability, or applying artistic filters to produce a more appealing final product. The application's architecture should be designed with scalability in mind, ensuring that new models can be added in the future without extensive reconfiguration.

To maximize reliability in accessing the repository of Lora models, implementing a robust system for loading and using these models in context is vital. This could involve creating a tutorial or a help section within the application that guides users through loading the models and using them effectively. Having user-friendly documentation and example workflows can greatly reduce any barriers to entry and assist users in navigating the functionalities offered by the repository.

In conclusion, to create a feature-rich, user-centric image-to-video generation tool, we need to focus on creating a seamless model loading experience, offering a broad range of customization options, and optimizing the integration of additional models. By prioritizing these elements, along with ensuring reliable access to the Lora models in the given repository, we will empower users to transform their photographs into captivating videos effortlessly.

Files changed (10) hide show
  1. components/header.js +3 -3
  2. index.html +10 -8
  3. models.html +147 -0
  4. models/artistic-filter.html +1 -1
  5. models/cinematic-motion.html +1 -1
  6. models/huggingface-wan22.html +153 -0
  7. models/smooth-transitions.html +1 -1
  8. signin.html +1 -1
  9. signup.html +1 -1
  10. upload.html +1 -2
components/header.js CHANGED
@@ -129,12 +129,12 @@ class CustomHeader extends HTMLElement {
129
  </a>
130
  <ul class="nav-links">
131
  <li><a href="/">Home</a></li>
132
- <li><a href="/#models">Models</a></li>
133
  <li><a href="/#features">Features</a></li>
134
  <li><a href="/upload">Upload</a></li>
135
- <li><a href="#">Documentation</a></li>
136
  </ul>
137
- <div class="nav-buttons">
138
  <a href="/signin" class="btn btn-outline">Sign In</a>
139
  <a href="/signup" class="btn btn-primary">Get Started</a>
140
  </div>
 
129
  </a>
130
  <ul class="nav-links">
131
  <li><a href="/">Home</a></li>
132
+ <li><a href="/models">Models</a></li>
133
  <li><a href="/#features">Features</a></li>
134
  <li><a href="/upload">Upload</a></li>
135
+ <li><a href="/documentation">Documentation</a></li>
136
  </ul>
137
+ <div class="nav-buttons">
138
  <a href="/signin" class="btn btn-outline">Sign In</a>
139
  <a href="/signup" class="btn btn-primary">Get Started</a>
140
  </div>
index.html CHANGED
@@ -10,13 +10,12 @@
10
  </head>
11
  <body class="bg-gray-900 text-white">
12
  <custom-header></custom-header>
13
-
14
  <main class="container mx-auto px-4 py-8">
15
  <section class="text-center mb-16">
16
  <h1 class="text-4xl md:text-6xl font-bold mb-4">Transform Images into Stunning Videos</h1>
17
  <p class="text-xl text-gray-300 max-w-2xl mx-auto mb-8">Leverage powerful Lora models to create dynamic visual stories from your still images</p>
18
  <div class="flex flex-col sm:flex-row justify-center gap-4">
19
- <a href="#models" class="bg-green-500 hover:bg-green-600 text-white font-bold py-3 px-6 rounded-full transition duration-300">Get Started</a>
20
  <a href="#features" class="bg-orange-500 hover:bg-orange-600 text-white font-bold py-3 px-6 rounded-full transition duration-300">Explore Features</a>
21
  </div>
22
  </section>
@@ -50,10 +49,14 @@
50
  <p class="text-gray-300 mb-4">Generate seamless morphing effects between images</p>
51
  <a href="/models/smooth-transitions" class="text-green-400 hover:text-green-300 font-medium">Select Model →</a>
52
  </div>
53
- </div>
 
 
 
 
 
54
  </section>
55
-
56
- <section id="features" class="mb-16">
57
  <h2 class="text-3xl font-bold mb-8 text-center">Powerful Features</h2>
58
  <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
59
  <div>
@@ -117,11 +120,10 @@
117
  <i data-feather="upload" class="mr-2"></i>
118
  Upload Images
119
  </a>
120
- </div>
121
  </section>
122
  </main>
123
-
124
- <custom-footer></custom-footer>
125
 
126
  <script src="components/header.js"></script>
127
  <script src="components/footer.js"></script>
 
10
  </head>
11
  <body class="bg-gray-900 text-white">
12
  <custom-header></custom-header>
 
13
  <main class="container mx-auto px-4 py-8">
14
  <section class="text-center mb-16">
15
  <h1 class="text-4xl md:text-6xl font-bold mb-4">Transform Images into Stunning Videos</h1>
16
  <p class="text-xl text-gray-300 max-w-2xl mx-auto mb-8">Leverage powerful Lora models to create dynamic visual stories from your still images</p>
17
  <div class="flex flex-col sm:flex-row justify-center gap-4">
18
+ <a href="/models" class="bg-green-500 hover:bg-green-600 text-white font-bold py-3 px-6 rounded-full transition duration-300">Get Started</a>
19
  <a href="#features" class="bg-orange-500 hover:bg-orange-600 text-white font-bold py-3 px-6 rounded-full transition duration-300">Explore Features</a>
20
  </div>
21
  </section>
 
49
  <p class="text-gray-300 mb-4">Generate seamless morphing effects between images</p>
50
  <a href="/models/smooth-transitions" class="text-green-400 hover:text-green-300 font-medium">Select Model →</a>
51
  </div>
52
+ </div>
53
+ <div class="text-center mt-8">
54
+ <a href="/models" class="text-green-400 hover:text-green-300 font-medium inline-flex items-center">
55
+ View All Models <i data-feather="arrow-right" class="w-4 h-4 ml-1"></i>
56
+ </a>
57
+ </div>
58
  </section>
59
+ <section id="features" class="mb-16">
 
60
  <h2 class="text-3xl font-bold mb-8 text-center">Powerful Features</h2>
61
  <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
62
  <div>
 
120
  <i data-feather="upload" class="mr-2"></i>
121
  Upload Images
122
  </a>
123
+ </div>
124
  </section>
125
  </main>
126
+ <custom-footer></custom-footer>
 
127
 
128
  <script src="components/header.js"></script>
129
  <script src="components/footer.js"></script>
models.html ADDED
@@ -0,0 +1,147 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Lora Models - FrameForge Studio</title>
7
+ <link rel="stylesheet" href="style.css">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://unpkg.com/feather-icons"></script>
10
+ </head>
11
+ <body class="bg-gray-900 text-white">
12
+ <custom-header></custom-header>
13
+
14
+ <main class="container mx-auto px-4 py-8">
15
+ <section class="text-center mb-16">
16
+ <h1 class="text-4xl md:text-5xl font-bold mb-4">Lora Model Selection</h1>
17
+ <p class="text-xl text-gray-300 max-w-3xl mx-auto mb-8">
18
+ Choose from our curated collection of Lora models to transform your images into stunning videos.
19
+ Each model is optimized for specific use cases and creative styles.
20
+ </p>
21
+ </section>
22
+
23
+ <section class="mb-16">
24
+ <h2 class="text-3xl font-bold mb-8 text-center">Featured Models</h2>
25
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
26
+ <!-- Model 1 -->
27
+ <div class="bg-gray-800 rounded-xl p-6 hover:bg-gray-700 transition duration-300 transform hover:-translate-y-1">
28
+ <div class="bg-gray-700 h-48 rounded-lg mb-4 flex items-center justify-center">
29
+ <i data-feather="film" class="text-green-500 w-16 h-16"></i>
30
+ </div>
31
+ <h3 class="text-xl font-bold mb-2">Cinematic Motion</h3>
32
+ <p class="text-gray-300 mb-4">Create dramatic cinematic transitions with dynamic camera movements</p>
33
+ <div class="flex flex-wrap gap-2 mb-4">
34
+ <span class="bg-green-900 text-green-300 text-xs px-2 py-1 rounded">Action</span>
35
+ <span class="bg-blue-900 text-blue-300 text-xs px-2 py-1 rounded">Professional</span>
36
+ </div>
37
+ <a href="/models/cinematic-motion" class="text-green-400 hover:text-green-300 font-medium flex items-center">
38
+ Select Model <i data-feather="arrow-right" class="w-4 h-4 ml-1"></i>
39
+ </a>
40
+ </div>
41
+
42
+ <!-- Model 2 -->
43
+ <div class="bg-gray-800 rounded-xl p-6 hover:bg-gray-700 transition duration-300 transform hover:-translate-y-1">
44
+ <div class="bg-gray-700 h-48 rounded-lg mb-4 flex items-center justify-center">
45
+ <i data-feather="aperture" class="text-orange-500 w-16 h-16"></i>
46
+ </div>
47
+ <h3 class="text-xl font-bold mb-2">Artistic Filter</h3>
48
+ <p class="text-gray-300 mb-4">Apply painterly effects and artistic styles to your videos</p>
49
+ <div class="flex flex-wrap gap-2 mb-4">
50
+ <span class="bg-purple-900 text-purple-300 text-xs px-2 py-1 rounded">Creative</span>
51
+ <span class="bg-pink-900 text-pink-300 text-xs px-2 py-1 rounded">Artistic</span>
52
+ </div>
53
+ <a href="/models/artistic-filter" class="text-green-400 hover:text-green-300 font-medium flex items-center">
54
+ Select Model <i data-feather="arrow-right" class="w-4 h-4 ml-1"></i>
55
+ </a>
56
+ </div>
57
+
58
+ <!-- Model 3 -->
59
+ <div class="bg-gray-800 rounded-xl p-6 hover:bg-gray-700 transition duration-300 transform hover:-translate-y-1">
60
+ <div class="bg-gray-700 h-48 rounded-lg mb-4 flex items-center justify-center">
61
+ <i data-feather="zap" class="text-green-500 w-16 h-16"></i>
62
+ </div>
63
+ <h3 class="text-xl font-bold mb-2">Smooth Transitions</h3>
64
+ <p class="text-gray-300 mb-4">Generate seamless morphing effects between images</p>
65
+ <div class="flex flex-wrap gap-2 mb-4">
66
+ <span class="bg-yellow-900 text-yellow-300 text-xs px-2 py-1 rounded">Smooth</span>
67
+ <span class="bg-teal-900 text-teal-300 text-xs px-2 py-1 rounded">Fluid</span>
68
+ </div>
69
+ <a href="/models/smooth-transitions" class="text-green-400 hover:text-green-300 font-medium flex items-center">
70
+ Select Model <i data-feather="arrow-right" class="w-4 h-4 ml-1"></i>
71
+ </a>
72
+ </div>
73
+
74
+ <!-- Model 4 -->
75
+ <div class="bg-gray-800 rounded-xl p-6 hover:bg-gray-700 transition duration-300 transform hover:-translate-y-1">
76
+ <div class="bg-gray-700 h-48 rounded-lg mb-4 flex items-center justify-center">
77
+ <i data-feather="star" class="text-yellow-500 w-16 h-16"></i>
78
+ </div>
79
+ <h3 class="text-xl font-bold mb-2">Hugging Face Wan2.2</h3>
80
+ <p class="text-gray-300 mb-4">Advanced model from Hugging Face repository for high-quality generation</p>
81
+ <div class="flex flex-wrap gap-2 mb-4">
82
+ <span class="bg-red-900 text-red-300 text-xs px-2 py-1 rounded">Advanced</span>
83
+ <span class="bg-indigo-900 text-indigo-300 text-xs px-2 py-1 rounded">High-Quality</span>
84
+ </div>
85
+ <a href="/models/huggingface-wan22" class="text-green-400 hover:text-green-300 font-medium flex items-center">
86
+ Select Model <i data-feather="arrow-right" class="w-4 h-4 ml-1"></i>
87
+ </a>
88
+ </div>
89
+
90
+ <!-- Model 5 -->
91
+ <div class="bg-gray-800 rounded-xl p-6 hover:bg-gray-700 transition duration-300 transform hover:-translate-y-1">
92
+ <div class="bg-gray-700 h-48 rounded-lg mb-4 flex items-center justify-center">
93
+ <i data-feather="image" class="text-blue-500 w-16 h-16"></i>
94
+ </div>
95
+ <h3 class="text-xl font-bold mb-2">Image Enhancer</h3>
96
+ <p class="text-gray-300 mb-4">Enhance image quality before video generation for crisp results</p>
97
+ <div class="flex flex-wrap gap-2 mb-4">
98
+ <span class="bg-cyan-900 text-cyan-300 text-xs px-2 py-1 rounded">Quality</span>
99
+ <span class="bg-emerald-900 text-emerald-300 text-xs px-2 py-1 rounded">Enhancement</span>
100
+ </div>
101
+ <a href="/models/image-enhancer" class="text-green-400 hover:text-green-300 font-medium flex items-center">
102
+ Select Model <i data-feather="arrow-right" class="w-4 h-4 ml-1"></i>
103
+ </a>
104
+ </div>
105
+
106
+ <!-- Model 6 -->
107
+ <div class="bg-gray-800 rounded-xl p-6 hover:bg-gray-700 transition duration-300 transform hover:-translate-y-1">
108
+ <div class="bg-gray-700 h-48 rounded-lg mb-4 flex items-center justify-center">
109
+ <i data-feather="layers" class="text-purple-500 w-16 h-16"></i>
110
+ </div>
111
+ <h3 class="text-xl font-bold mb-2">Stable Video</h3>
112
+ <p class="text-gray-300 mb-4">Ensure smooth and stable video output with advanced stabilization</p>
113
+ <div class="flex flex-wrap gap-2 mb-4">
114
+ <span class="bg-amber-900 text-amber-300 text-xs px-2 py-1 rounded">Stable</span>
115
+ <span class="bg-rose-900 text-rose-300 text-xs px-2 py-1 rounded">Professional</span>
116
+ </div>
117
+ <a href="/models/stable-video" class="text-green-400 hover:text-green-300 font-medium flex items-center">
118
+ Select Model <i data-feather="arrow-right" class="w-4 h-4 ml-1"></i>
119
+ </a>
120
+ </div>
121
+ </div>
122
+ </section>
123
+
124
+ <section class="bg-gradient-to-r from-green-900 to-orange-900 rounded-2xl p-8 mb-16">
125
+ <div class="max-w-3xl mx-auto text-center">
126
+ <h2 class="text-3xl font-bold mb-4">Need Help Choosing?</h2>
127
+ <p class="text-gray-200 mb-6">
128
+ Explore our documentation to understand how each model works and which one suits your project best.
129
+ </p>
130
+ <a href="/documentation" class="bg-white text-gray-900 hover:bg-gray-200 font-bold py-3 px-8 rounded-full inline-flex items-center transition duration-300">
131
+ <i data-feather="book" class="mr-2"></i>
132
+ View Documentation
133
+ </a>
134
+ </div>
135
+ </section>
136
+ </main>
137
+
138
+ <custom-footer></custom-footer>
139
+
140
+ <script src="components/header.js"></script>
141
+ <script src="components/footer.js"></script>
142
+ <script src="script.js"></script>
143
+ <script>
144
+ feather.replace();
145
+ </script>
146
+ </body>
147
+ </html>
models/artistic-filter.html CHANGED
@@ -127,4 +127,4 @@
127
  });
128
  </script>
129
  </body>
130
- </html>
 
127
  });
128
  </script>
129
  </body>
130
+ </html>
models/cinematic-motion.html CHANGED
@@ -127,4 +127,4 @@
127
  });
128
  </script>
129
  </body>
130
- </html>
 
127
  });
128
  </script>
129
  </body>
130
+ </html>
models/huggingface-wan22.html ADDED
@@ -0,0 +1,153 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Hugging Face Wan2.2 - FrameForge Studio</title>
7
+ <link rel="stylesheet" href="/style.css">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://unpkg.com/feather-icons"></script>
10
+ </head>
11
+ <body class="bg-gray-900 text-white">
12
+ <custom-header></custom-header>
13
+
14
+ <main class="container mx-auto px-4 py-8">
15
+ <section class="mb-12">
16
+ <div class="flex flex-col md:flex-row gap-8">
17
+ <div class="md:w-1/2">
18
+ <h1 class="text-4xl font-bold mb-4">Hugging Face Wan2.2</h1>
19
+ <p class="text-gray-300 mb-6">
20
+ Advanced model from Hugging Face repository for high-quality image-to-video generation.
21
+ This model provides state-of-the-art results with enhanced visual fidelity.
22
+ </p>
23
+
24
+ <div class="bg-gray-800 rounded-xl p-6 mb-6">
25
+ <h2 class="text-2xl font-bold mb-4">Model Parameters</h2>
26
+ <div class="space-y-4">
27
+ <div>
28
+ <label class="block text-gray-300 mb-2">Quality Level</label>
29
+ <select class="w-full bg-gray-700 text-white rounded p-2" id="quality-level">
30
+ <option value="standard">Standard</option>
31
+ <option value="high">High</option>
32
+ <option value="ultra">Ultra</option>
33
+ </select>
34
+ </div>
35
+
36
+ <div>
37
+ <label class="block text-gray-300 mb-2">Style Intensity: <span id="style-value">7</span>/10</label>
38
+ <input type="range" min="1" max="10" value="7" class="w-full accent-green-500" id="style-slider">
39
+ </div>
40
+
41
+ <div>
42
+ <label class="block text-gray-300 mb-2">Frame Rate: <span id="fps-value">24</span>fps</label>
43
+ <input type="range" min="12" max="60" value="24" class="w-full accent-orange-500" id="fps-slider">
44
+ </div>
45
+
46
+ <div>
47
+ <label class="block text-gray-300 mb-2">Duration: <span id="duration-value">5</span>s</label>
48
+ <input type="range" min="1" max="30" value="5" class="w-full accent-purple-500" id="duration-slider">
49
+ </div>
50
+ </div>
51
+ </div>
52
+
53
+ <button id="generate-btn" class="bg-green-500 hover:bg-green-600 text-white font-bold py-3 px-6 rounded-full transition duration-300 w-full">
54
+ Generate Video
55
+ </button>
56
+ </div>
57
+
58
+ <div class="md:w-1/2">
59
+ <div class="bg-gray-800 rounded-xl p-6">
60
+ <h2 class="text-2xl font-bold mb-4">Preview</h2>
61
+ <div class="bg-gray-700 h-80 rounded-lg flex items-center justify-center">
62
+ <i data-feather="star" class="text-yellow-500 w-16 h-16"></i>
63
+ </div>
64
+ <div class="mt-4 flex justify-between">
65
+ <button class="bg-gray-700 hover:bg-gray-600 text-white py-2 px-4 rounded">
66
+ <i data-feather="play" class="w-4 h-4"></i>
67
+ </button>
68
+ <button class="bg-gray-700 hover:bg-gray-600 text-white py-2 px-4 rounded">
69
+ <i data-feather="download" class="w-4 h-4"></i>
70
+ </button>
71
+ </div>
72
+ </div>
73
+ </div>
74
+ </div>
75
+ </section>
76
+
77
+ <section class="mb-12">
78
+ <h2 class="text-3xl font-bold mb-6">Model Information</h2>
79
+ <div class="bg-gray-800 rounded-xl p-6">
80
+ <h3 class="text-xl font-bold mb-4">About Wan2.2</h3>
81
+ <p class="text-gray-300 mb-4">
82
+ The Wan2.2 model from Hugging Face is a cutting-edge solution for image-to-video generation.
83
+ It leverages advanced diffusion techniques to create smooth, high-quality videos from static images.
84
+ </p>
85
+
86
+ <h3 class="text-xl font-bold mb-4">Key Features</h3>
87
+ <ul class="list-disc list-inside text-gray-300 mb-4">
88
+ <li>High-resolution video output (up to 4K)</li>
89
+ <li>Advanced motion synthesis algorithms</li>
90
+ <li>Support for complex scene transitions</li>
91
+ <li>Optimized for diverse artistic styles</li>
92
+ <li>Fast processing with GPU acceleration</li>
93
+ </ul>
94
+
95
+ <h3 class="text-xl font-bold mb-4">Recommended Use Cases</h3>
96
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
97
+ <div class="bg-gray-700 p-4 rounded-lg">
98
+ <h4 class="font-bold mb-2">Professional Content Creation</h4>
99
+ <p class="text-gray-400 text-sm">Ideal for marketing videos, presentations, and promotional content</p>
100
+ </div>
101
+ <div class="bg-gray-700 p-4 rounded-lg">
102
+ <h4 class="font-bold mb-2">Artistic Projects</h4>
103
+ <p class="text-gray-400 text-sm">Perfect for digital artists and creative storytellers</p>
104
+ </div>
105
+ <div class="bg-gray-700 p-4 rounded-lg">
106
+ <h4 class="font-bold mb-2">Social Media Content</h4>
107
+ <p class="text-gray-400 text-sm">Create engaging posts for various social platforms</p>
108
+ </div>
109
+ <div class="bg-gray-700 p-4 rounded-lg">
110
+ <h4 class="font-bold mb-2">Educational Materials</h4>
111
+ <p class="text-gray-400 text-sm">Transform static educational images into dynamic videos</p>
112
+ </div>
113
+ </div>
114
+ </div>
115
+ </section>
116
+ </main>
117
+
118
+ <custom-footer></custom-footer>
119
+
120
+ <script src="/components/header.js"></script>
121
+ <script src="/components/footer.js"></script>
122
+ <script src="/script.js"></script>
123
+ <script>
124
+ feather.replace();
125
+
126
+ // Slider functionality
127
+ document.getElementById('style-slider').addEventListener('input', function() {
128
+ document.getElementById('style-value').textContent = this.value;
129
+ });
130
+
131
+ document.getElementById('fps-slider').addEventListener('input', function() {
132
+ document.getElementById('fps-value').textContent = this.value;
133
+ });
134
+
135
+ document.getElementById('duration-slider').addEventListener('input', function() {
136
+ document.getElementById('duration-value').textContent = this.value;
137
+ });
138
+
139
+ // Generate button functionality
140
+ document.getElementById('generate-btn').addEventListener('click', function() {
141
+ this.innerHTML = '<i data-feather="loader" class="animate-spin mr-2"></i> Generating...';
142
+ feather.replace();
143
+
144
+ // Simulate processing time
145
+ setTimeout(() => {
146
+ this.innerHTML = 'Generate Video';
147
+ feather.replace();
148
+ alert('Video generated successfully! Check the preview section.');
149
+ }, 2000);
150
+ });
151
+ </script>
152
+ </body>
153
+ </html>
models/smooth-transitions.html CHANGED
@@ -126,4 +126,4 @@
126
  });
127
  </script>
128
  </body>
129
- </html>
 
126
  });
127
  </script>
128
  </body>
129
+ </html>
signin.html CHANGED
@@ -62,4 +62,4 @@
62
  });
63
  </script>
64
  </body>
65
- </html>
 
62
  });
63
  </script>
64
  </body>
65
+ </html>
signup.html CHANGED
@@ -69,4 +69,4 @@
69
  });
70
  </script>
71
  </body>
72
- </html>
 
69
  });
70
  </script>
71
  </body>
72
+ </html>
upload.html CHANGED
@@ -29,8 +29,7 @@
29
  <p class="text-gray-400 mt-4">Supports JPG, PNG, WEBP (Max 10MB each)</p>
30
  </div>
31
  </div>
32
-
33
- <div id="preview-container" class="hidden">
34
  <h2 class="text-2xl font-bold mb-4">Image Preview</h2>
35
  <div id="image-preview" class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6"></div>
36
  <button id="process-btn" class="bg-orange-500 hover:bg-orange-600 text-white font-bold py-3 px-6 rounded-full transition duration-300 w-full">
 
29
  <p class="text-gray-400 mt-4">Supports JPG, PNG, WEBP (Max 10MB each)</p>
30
  </div>
31
  </div>
32
+ <div id="preview-container" class="hidden">
 
33
  <h2 class="text-2xl font-bold mb-4">Image Preview</h2>
34
  <div id="image-preview" class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6"></div>
35
  <button id="process-btn" class="bg-orange-500 hover:bg-orange-600 text-white font-bold py-3 px-6 rounded-full transition duration-300 w-full">