Hugging Face's logo

Spaces:
MARLLY
/
frametoflow-video-wizard
Running

App Files Community
Fadi66 commited on
Commit
f9cfb97
·
verified ·
1 Parent(s): 58e076c

https://app.pixverse.ai/create/image-text

Browse files
Files changed (2) hide show
  1. index.html +15 -16
  2. texttoimage.html +202 -0
index.html CHANGED
@@ -40,12 +40,12 @@
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>
@@ -98,32 +98,31 @@
98
  <option>Zoom In</option>
99
  </select>
100
  </div>
 
101
  <div class="bg-gray-700 bg-opacity-50 p-4 rounded-lg border border-gray-600">
102
  <div class="flex items-center space-x-3 mb-3">
103
  <div class="p-2 bg-indigo-900 bg-opacity-40 rounded-lg">
104
- <i data-feather="zap" class="w-5 h-5 text-indigo-400"></i>
105
  </div>
106
- <h4 class="font-medium">AI Model</h4>
107
  </div>
108
  <select class="w-full bg-gray-800 border border-gray-600 rounded-md px-3 py-2 text-sm">
109
- <option selected>Kling AI (Recommended)</option>
110
- <option>Stable Diffusion</option>
111
- <option>Runway ML</option>
112
- <option>Pika Labs</option>
113
  </select>
114
  </div>
115
- </div>
116
- <div class="flex justify-center space-x-4">
 
117
  <button id="processBtn" class="bg-gradient-to-r from-indigo-500 to-purple-600 px-6 py-3 rounded-lg font-medium flex items-center space-x-2 hover:opacity-90 transition">
118
  <span>Generate Video</span>
119
  <i data-feather="play" class="w-4 h-4"></i>
120
  </button>
121
- <a href="https://app.klingai.com/global/image-to-video/frame-mode/new?ra=5&klingVersion=2.5" target="_blank" class="bg-gradient-to-r from-blue-500 to-indigo-600 px-6 py-3 rounded-lg font-medium flex items-center space-x-2 hover:opacity-90 transition">
122
- <span>Try Kling AI</span>
123
- <i data-feather="external-link" class="w-4 h-4"></i>
124
- </a>
125
  </div>
126
- <div id="progressContainer" class="hidden mt-8">
 
127
  <div class="flex items-center justify-center mb-4 space-x-4">
128
  <svg class="w-12 h-12" viewBox="0 0 36 36">
129
  <path
 
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="text-indigo-400 transition">Home</a>
44
+ <a href="texttoimage.html" class="hover:text-indigo-400 transition">Text to Image</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>
 
98
  <option>Zoom In</option>
99
  </select>
100
  </div>
101
+
102
  <div class="bg-gray-700 bg-opacity-50 p-4 rounded-lg border border-gray-600">
103
  <div class="flex items-center space-x-3 mb-3">
104
  <div class="p-2 bg-indigo-900 bg-opacity-40 rounded-lg">
105
+ <i data-feather="music" class="w-5 h-5 text-indigo-400"></i>
106
  </div>
107
+ <h4 class="font-medium">Background Music</h4>
108
  </div>
109
  <select class="w-full bg-gray-800 border border-gray-600 rounded-md px-3 py-2 text-sm">
110
+ <option selected>None</option>
111
+ <option>Cinematic</option>
112
+ <option>Upbeat</option>
113
+ <option>Calm</option>
114
  </select>
115
  </div>
116
+ </div>
117
+
118
+ <div class="flex justify-center">
119
  <button id="processBtn" class="bg-gradient-to-r from-indigo-500 to-purple-600 px-6 py-3 rounded-lg font-medium flex items-center space-x-2 hover:opacity-90 transition">
120
  <span>Generate Video</span>
121
  <i data-feather="play" class="w-4 h-4"></i>
122
  </button>
 
 
 
 
123
  </div>
124
+
125
+ <div id="progressContainer" class="hidden mt-8">
126
  <div class="flex items-center justify-center mb-4 space-x-4">
127
  <svg class="w-12 h-12" viewBox="0 0 36 36">
128
  <path
texttoimage.html ADDED
@@ -0,0 +1,202 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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 | Text to Image Generation</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
+ .generated-image {
18
+ transition: all 0.3s ease;
19
+ box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3);
20
+ }
21
+ .generated-image:hover {
22
+ transform: scale(1.02);
23
+ }
24
+ </style>
25
+ </head>
26
+ <body class="bg-gray-900 text-white min-h-screen flex flex-col">
27
+ <div id="vanta-bg"></div>
28
+
29
+ <header class="py-6 px-4 sm:px-6 lg:px-8">
30
+ <div class="max-w-7xl mx-auto flex justify-between items-center">
31
+ <div class="flex items-center space-x-2">
32
+ <i data-feather="image" class="w-8 h-8 text-indigo-500"></i>
33
+ <h1 class="text-2xl font-bold bg-gradient-to-r from-indigo-400 to-purple-500 bg-clip-text text-transparent">FrameToFlow</h1>
34
+ </div>
35
+ <nav class="hidden md:flex space-x-8">
36
+ <a href="index.html" class="hover:text-indigo-400 transition">Home</a>
37
+ <a href="texttoimage.html" class="text-indigo-400 transition">Text to Image</a>
38
+ <a href="#" class="hover:text-indigo-400 transition">Pricing</a>
39
+ <a href="#" class="hover:text-indigo-400 transition">Docs</a>
40
+ </nav>
41
+ <button class="bg-indigo-600 hover:bg-indigo-700 px-4 py-2 rounded-lg transition flex items-center space-x-2">
42
+ <span>Get Started</span>
43
+ <i data-feather="arrow-right" class="w-4 h-4"></i>
44
+ </button>
45
+ </div>
46
+ </header>
47
+
48
+ <main class="flex-grow px-4 sm:px-6 lg:px-8 py-8">
49
+ <div class="max-w-4xl w-full mx-auto">
50
+ <div class="bg-gray-800 bg-opacity-60 backdrop-blur-lg rounded-2xl p-8 shadow-2xl border border-gray-700 mb-8">
51
+ <div class="text-center mb-6">
52
+ <h2 class="text-3xl font-bold mb-2">Create Stunning Images from Text</h2>
53
+ <p class="text-gray-300 max-w-2xl mx-auto">Describe your vision and let our AI bring it to life</p>
54
+ </div>
55
+
56
+ <div class="space-y-6">
57
+ <div>
58
+ <label for="prompt" class="block text-sm font-medium mb-2">Prompt</label>
59
+ <textarea id="prompt" rows="3" class="w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-3 focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500" placeholder="A futuristic city at sunset with flying cars..."></textarea>
60
+ </div>
61
+
62
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
63
+ <div>
64
+ <label for="style" class="block text-sm font-medium mb-2">Style</label>
65
+ <select id="style" class="w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-3">
66
+ <option value="realistic">Realistic</option>
67
+ <option value="fantasy">Fantasy</option>
68
+ <option value="anime">Anime</option>
69
+ <option value="digital-art">Digital Art</option>
70
+ <option value="photographic">Photographic</option>
71
+ </select>
72
+ </div>
73
+
74
+ <div>
75
+ <label for="ratio" class="block text-sm font-medium mb-2">Aspect Ratio</label>
76
+ <select id="ratio" class="w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-3">
77
+ <option value="1:1">Square (1:1)</option>
78
+ <option value="4:3">Standard (4:3)</option>
79
+ <option value="16:9">Widescreen (16:9)</option>
80
+ <option value="9:16">Portrait (9:16)</option>
81
+ </select>
82
+ </div>
83
+ </div>
84
+
85
+ <button id="generateBtn" class="w-full bg-gradient-to-r from-indigo-500 to-purple-600 px-6 py-4 rounded-lg font-medium flex items-center justify-center space-x-2 hover:opacity-90 transition">
86
+ <span>Generate Images</span>
87
+ <i data-feather="sparkles" class="w-5 h-5"></i>
88
+ </button>
89
+ </div>
90
+ </div>
91
+
92
+ <div id="resultsContainer" class="hidden">
93
+ <h3 class="text-xl font-bold mb-4">Generated Images</h3>
94
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
95
+ <div class="generated-image bg-gray-800 rounded-xl overflow-hidden">
96
+ <img id="result1" src="" alt="Generated image 1" class="w-full h-auto">
97
+ <div class="p-4 flex justify-between items-center">
98
+ <button class="text-indigo-400 hover:text-indigo-300 transition">
99
+ <i data-feather="download" class="w-5 h-5"></i>
100
+ </button>
101
+ <button class="text-indigo-400 hover:text-indigo-300 transition">
102
+ <i data-feather="refresh-cw" class="w-5 h-5"></i>
103
+ </button>
104
+ </div>
105
+ </div>
106
+ <div class="generated-image bg-gray-800 rounded-xl overflow-hidden">
107
+ <img id="result2" src="" alt="Generated image 2" class="w-full h-auto">
108
+ <div class="p-4 flex justify-between items-center">
109
+ <button class="text-indigo-400 hover:text-indigo-300 transition">
110
+ <i data-feather="download" class="w-5 h-5"></i>
111
+ </button>
112
+ <button class="text-indigo-400 hover:text-indigo-300 transition">
113
+ <i data-feather="refresh-cw" class="w-5 h-5"></i>
114
+ </button>
115
+ </div>
116
+ </div>
117
+ </div>
118
+ </div>
119
+ </div>
120
+ </main>
121
+
122
+ <footer class="py-6 px-4 sm:px-6 lg:px-8 text-gray-400 text-sm">
123
+ <div class="max-w-7xl mx-auto flex flex-col md:flex-row justify-between items-center">
124
+ <div class="mb-4 md:mb-0">
125
+ © 2023 FrameToFlow. All rights reserved.
126
+ </div>
127
+ <div class="flex space-x-6">
128
+ <a href="#" class="hover:text-indigo-400 transition">Terms</a>
129
+ <a href="#" class="hover:text-indigo-400 transition">Privacy</a>
130
+ <a href="#" class="hover:text-indigo-400 transition">Contact</a>
131
+ </div>
132
+ </div>
133
+ </footer>
134
+
135
+ <script>
136
+ // Initialize Vanta.js background
137
+ VANTA.WAVES({
138
+ el: "#vanta-bg",
139
+ mouseControls: true,
140
+ touchControls: true,
141
+ gyroControls: false,
142
+ minHeight: 200.00,
143
+ minWidth: 200.00,
144
+ scale: 1.00,
145
+ scaleMobile: 1.00,
146
+ color: 0x3b275f,
147
+ shininess: 35.00,
148
+ waveHeight: 15.00,
149
+ waveSpeed: 0.85,
150
+ zoom: 0.85
151
+ });
152
+
153
+ // Initialize Feather Icons
154
+ feather.replace();
155
+
156
+ // Generate button functionality
157
+ document.getElementById('generateBtn').addEventListener('click', function() {
158
+ const prompt = document.getElementById('prompt').value;
159
+ if (!prompt) {
160
+ alert('Please enter a prompt first!');
161
+ return;
162
+ }
163
+
164
+ this.disabled = true;
165
+ const originalText = this.querySelector('span').textContent;
166
+ this.querySelector('span').textContent = 'Generating...';
167
+
168
+ // Simulate API call with timeout
169
+ setTimeout(() => {
170
+ this.disabled = false;
171
+ this.querySelector('span').textContent = originalText;
172
+
173
+ // Show results with placeholder images
174
+ document.getElementById('resultsContainer').classList.remove('hidden');
175
+ document.getElementById('result1').src = `http://static.photos/${document.getElementById('style').value}/640x360/1`;
176
+ document.getElementById('result2').src = `http://static.photos/${document.getElementById('style').value}/640x360/2`;
177
+
178
+ // Scroll to results
179
+ document.getElementById('resultsContainer').scrollIntoView({ behavior: 'smooth' });
180
+
181
+ // Replace icons
182
+ feather.replace();
183
+ }, 2000);
184
+ });
185
+
186
+ // Download and regenerate buttons functionality
187
+ document.addEventListener('click', function(e) {
188
+ if (e.target.closest('[data-feather="download"]')) {
189
+ alert('Download functionality would be implemented here');
190
+ }
191
+
192
+ if (e.target.closest('[data-feather="refresh-cw"]')) {
193
+ const imgContainer = e.target.closest('.generated-image');
194
+ const img = imgContainer.querySelector('img');
195
+ const currentSrc = img.src;
196
+ const newSeed = parseInt(currentSrc.split('/').pop()) + 10;
197
+ img.src = currentSrc.replace(/\/\d+$/, `/${newSeed}`);
198
+ }
199
+ });
200
+ </script>
201
+ </body>
202
+ </html>