Hugging Face's logo

Spaces:
MARLLY
/
frametoflow-video-wizard
Running

App Files Community
Fadi66 commited on
Commit
27ea470
·
verified ·
1 Parent(s): f1633e0

https://app.klingai.com/global/image-to-video/frame-mode/new?ra=5&klingVersion=2.5

Browse files
Files changed (2) hide show
  1. frame-to-video.html +226 -0
  2. index.html +6 -5
frame-to-video.html ADDED
@@ -0,0 +1,226 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>FrameToFlow | AI Video Creator</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://unpkg.com/feather-icons"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.waves.min.js"></script>
10
+ <style>
11
+ #vanta-bg {
12
+ position: absolute;
13
+ width: 100%;
14
+ height: 100%;
15
+ z-index: -1;
16
+ }
17
+ .dropzone {
18
+ border: 2px dashed rgba(255, 255, 255, 0.3);
19
+ transition: all 0.3s ease;
20
+ }
21
+ .dropzone-active {
22
+ border-color: #4F46E5;
23
+ background-color: rgba(79, 70, 229, 0.1);
24
+ }
25
+ .progress-ring__circle {
26
+ transition: stroke-dashoffset 0.35s;
27
+ transform: rotate(-90deg);
28
+ transform-origin: 50% 50%;
29
+ }
30
+ .ai-preview {
31
+ background: linear-gradient(135deg, rgba(79, 70, 229, 0.1) 0%, rgba(124, 58, 237, 0.1) 100%);
32
+ }
33
+ </style>
34
+ </head>
35
+ <body class="bg-gray-900 text-white min-h-screen flex flex-col">
36
+ <div id="vanta-bg"></div>
37
+
38
+ <header class="py-6 px-4 sm:px-6 lg:px-8">
39
+ <div class="max-w-7xl mx-auto flex justify-between items-center">
40
+ <div class="flex items-center space-x-2">
41
+ <i data-feather="film" class="w-8 h-8 text-indigo-500"></i>
42
+ <h1 class="text-2xl font-bold bg-gradient-to-r from-indigo-400 to-purple-500 bg-clip-text text-transparent">FrameToFlow</h1>
43
+ </div>
44
+ <nav class="hidden md:flex space-x-8">
45
+ <a href="index.html" class="hover:text-indigo-400 transition">Home</a>
46
+ <a href="features.html" class="hover:text-indigo-400 transition">Features</a>
47
+ <a href="pricing.html" class="hover:text-indigo-400 transition">Pricing</a>
48
+ <a href="frame-to-video.html" class="hover:text-indigo-400 transition text-indigo-400">AI Video Creator</a>
49
+ </nav>
50
+ <button class="bg-indigo-600 hover:bg-indigo-700 px-4 py-2 rounded-lg transition flex items-center space-x-2">
51
+ <span>Get Started</span>
52
+ <i data-feather="arrow-right" class="w-4 h-4"></i>
53
+ </button>
54
+ </div>
55
+ </header>
56
+
57
+ <main class="flex-grow flex items-center justify-center px-4 sm:px-6 lg:px-8 py-10">
58
+ <div class="max-w-6xl w-full mx-auto">
59
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
60
+ <div class="bg-gray-800 bg-opacity-60 backdrop-blur-lg rounded-2xl p-8 shadow-2xl border border-gray-700">
61
+ <h2 class="text-2xl font-bold mb-6">AI Video Generation</h2>
62
+
63
+ <div class="space-y-6">
64
+ <div>
65
+ <label class="block text-sm font-medium mb-2">Video Style</label>
66
+ <select class="w-full bg-gray-800 border border-gray-600 rounded-md px-3 py-2 text-sm">
67
+ <option>Cinematic</option>
68
+ <option selected>Realistic</option>
69
+ <option>Anime</option>
70
+ <option>Watercolor</option>
71
+ <option>Cyberpunk</option>
72
+ </select>
73
+ </div>
74
+
75
+ <div>
76
+ <label class="block text-sm font-medium mb-2">Motion Intensity</label>
77
+ <input type="range" min="0" max="100" value="50" class="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer">
78
+ </div>
79
+
80
+ <div>
81
+ <label class="block text-sm font-medium mb-2">Video Length (seconds)</label>
82
+ <input type="number" min="2" max="20" value="5" class="w-full bg-gray-800 border border-gray-600 rounded-md px-3 py-2 text-sm">
83
+ </div>
84
+
85
+ <div id="dropzone" class="dropzone rounded-xl p-8 text-center cursor-pointer">
86
+ <div class="flex flex-col items-center justify-center space-y-4">
87
+ <i data-feather="upload-cloud" class="w-12 h-12 text-indigo-400"></i>
88
+ <h3 class="text-xl font-medium">Upload Reference Image</h3>
89
+ <p class="text-gray-400">or drag and drop here</p>
90
+ <input type="file" id="fileInput" class="hidden" accept="image/*">
91
+ </div>
92
+ </div>
93
+
94
+ <button id="generateBtn" class="w-full bg-gradient-to-r from-indigo-500 to-purple-600 px-6 py-3 rounded-lg font-medium flex items-center justify-center space-x-2 hover:opacity-90 transition">
95
+ <span>Generate AI Video</span>
96
+ <i data-feather="zap" class="w-4 h-4"></i>
97
+ </button>
98
+ </div>
99
+ </div>
100
+
101
+ <div class="ai-preview bg-gray-800 bg-opacity-60 backdrop-blur-lg rounded-2xl p-8 shadow-2xl border border-gray-700 flex flex-col">
102
+ <h2 class="text-2xl font-bold mb-6">AI Video Preview</h2>
103
+ <div class="flex-grow flex items-center justify-center bg-gray-900 rounded-lg">
104
+ <div class="text-center p-8">
105
+ <i data-feather="play-circle" class="w-16 h-16 mx-auto text-indigo-400 mb-4"></i>
106
+ <h3 class="text-xl font-medium mb-2">Your AI-generated video will appear here</h3>
107
+ <p class="text-gray-400">After processing, you can preview and download your video</p>
108
+ </div>
109
+ </div>
110
+ <div id="progressContainer" class="hidden mt-6">
111
+ <div class="flex items-center justify-center space-x-4">
112
+ <svg class="w-10 h-10" viewBox="0 0 36 36">
113
+ <path class="progress-ring__circle"
114
+ d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
115
+ fill="none" stroke="#4F46E5" stroke-width="2" stroke-dasharray="0, 100"/>
116
+ </svg>
117
+ <span id="progressText" class="font-medium">Processing...</span>
118
+ </div>
119
+ </div>
120
+ </div>
121
+ </div>
122
+ </div>
123
+ </main>
124
+
125
+ <footer class="py-6 px-4 sm:px-6 lg:px-8 text-gray-400 text-sm">
126
+ <div class="max-w-7xl mx-auto flex flex-col md:flex-row justify-between items-center">
127
+ <div class="mb-4 md:mb-0">
128
+ © 2023 FrameToFlow. All rights reserved.
129
+ </div>
130
+ <div class="flex space-x-6">
131
+ <a href="#" class="hover:text-indigo-400 transition">Terms</a>
132
+ <a href="#" class="hover:text-indigo-400 transition">Privacy</a>
133
+ <a href="#" class="hover:text-indigo-400 transition">Contact</a>
134
+ </div>
135
+ </div>
136
+ </footer>
137
+
138
+ <script>
139
+ // Initialize Vanta.js background
140
+ VANTA.WAVES({
141
+ el: "#vanta-bg",
142
+ mouseControls: true,
143
+ touchControls: true,
144
+ gyroControls: false,
145
+ minHeight: 200.00,
146
+ minWidth: 200.00,
147
+ scale: 1.00,
148
+ scaleMobile: 1.00,
149
+ color: 0x3b275f,
150
+ shininess: 35.00,
151
+ waveHeight: 15.00,
152
+ waveSpeed: 0.85,
153
+ zoom: 0.85
154
+ });
155
+
156
+ // Initialize Feather Icons
157
+ feather.replace();
158
+
159
+ // Dropzone functionality
160
+ const dropzone = document.getElementById('dropzone');
161
+ const fileInput = document.getElementById('fileInput');
162
+ const generateBtn = document.getElementById('generateBtn');
163
+ const progressContainer = document.getElementById('progressContainer');
164
+ const progressText = document.getElementById('progressText');
165
+ const progressCircle = document.querySelector('.progress-ring__circle');
166
+ const circumference = 2 * Math.PI * 15.9155;
167
+
168
+ dropzone.addEventListener('click', () => fileInput.click());
169
+
170
+ fileInput.addEventListener('change', () => {
171
+ if (fileInput.files.length > 0) {
172
+ dropzone.innerHTML = `
173
+ <div class="flex flex-col items-center space-y-3">
174
+ <i data-feather="check-circle" class="w-10 h-10 text-green-400"></i>
175
+ <h3 class="text-lg font-medium">Image selected</h3>
176
+ <p class="text-sm text-gray-400">Ready to generate</p>
177
+ </div>
178
+ `;
179
+ feather.replace();
180
+ }
181
+ });
182
+
183
+ generateBtn.addEventListener('click', () => {
184
+ if (!fileInput.files || fileInput.files.length === 0) {
185
+ alert('Please upload an image first!');
186
+ return;
187
+ }
188
+
189
+ generateBtn.disabled = true;
190
+ progressContainer.classList.remove('hidden');
191
+
192
+ let progress = 0;
193
+ const interval = setInterval(() => {
194
+ progress += Math.random() * 5;
195
+ if (progress > 100) progress = 100;
196
+
197
+ const offset = circumference - (progress / 100) * circumference;
198
+ progressCircle.style.strokeDasharray = `${offset} ${circumference}`;
199
+ progressText.textContent = `Generating ${Math.floor(progress)}%`;
200
+
201
+ if (progress === 100) {
202
+ clearInterval(interval);
203
+ setTimeout(() => {
204
+ progressText.textContent = 'Video ready!';
205
+ generateBtn.disabled = false;
206
+
207
+ // Show video preview and download
208
+ document.querySelector('.ai-preview > div').innerHTML = `
209
+ <video controls class="w-full h-full rounded-lg">
210
+ <source src="http://static.photos/technology/640x360/42" type="video/mp4">
211
+ </video>
212
+ <div class="mt-4 flex justify-center">
213
+ <button class="bg-green-600 hover:bg-green-700 px-6 py-3 rounded-lg font-medium flex items-center space-x-2 transition">
214
+ <span>Download Video</span>
215
+ <i data-feather="download" class="w-4 h-4"></i>
216
+ </button>
217
+ </div>
218
+ `;
219
+ feather.replace();
220
+ }, 500);
221
+ }
222
+ }, 300);
223
+ });
224
+ </script>
225
+ </body>
226
+ </html>
index.html CHANGED
@@ -40,12 +40,13 @@
40
  <h1 class="text-2xl font-bold bg-gradient-to-r from-indigo-400 to-purple-500 bg-clip-text text-transparent">FrameToFlow</h1>
41
  </div>
42
  <nav class="hidden md:flex space-x-8">
43
- <a href="#" class="hover:text-indigo-400 transition">Home</a>
44
- <a href="#" class="hover:text-indigo-400 transition">Features</a>
45
- <a href="#" class="hover:text-indigo-400 transition">Pricing</a>
46
- <a href="#" class="hover:text-indigo-400 transition">Docs</a>
 
47
  </nav>
48
- <button class="bg-indigo-600 hover:bg-indigo-700 px-4 py-2 rounded-lg transition flex items-center space-x-2">
49
  <span>Get Started</span>
50
  <i data-feather="arrow-right" class="w-4 h-4"></i>
51
  </button>
 
40
  <h1 class="text-2xl font-bold bg-gradient-to-r from-indigo-400 to-purple-500 bg-clip-text text-transparent">FrameToFlow</h1>
41
  </div>
42
  <nav class="hidden md:flex space-x-8">
43
+ <a href="index.html" class="hover:text-indigo-400 transition">Home</a>
44
+ <a href="features.html" class="hover:text-indigo-400 transition">Features</a>
45
+ <a href="pricing.html" class="hover:text-indigo-400 transition">Pricing</a>
46
+ <a href="docs.html" class="hover:text-indigo-400 transition">Docs</a>
47
+ <a href="frame-to-video.html" class="hover:text-indigo-400 transition">AI Video Creator</a>
48
  </nav>
49
+ <button class="bg-indigo-600 hover:bg-indigo-700 px-4 py-2 rounded-lg transition flex items-center space-x-2">
50
  <span>Get Started</span>
51
  <i data-feather="arrow-right" class="w-4 h-4"></i>
52
  </button>