Hugging Face's logo

Spaces:
Falconbridge
/
undefined
Running

App Files Community
Falconbridge commited on
Commit
9334712
·
verified ·
1 Parent(s): 176487e

Now can you change clothes of a girl

Browse files
Files changed (3) hide show
  1. README.md +8 -4
  2. dance-styles.html +161 -0
  3. index.html +356 -18
README.md CHANGED
@@ -1,10 +1,14 @@
1
  ---
2
- title: Undefined
3
- emoji: ⚡
4
- colorFrom: indigo
5
  colorTo: red
 
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
 
 
1
  ---
2
+ title: undefined
3
+ colorFrom: gray
 
4
  colorTo: red
5
+ emoji: 🐳
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite-v3
10
  ---
11
 
12
+ # Welcome to your new DeepSite project!
13
+ This project was created with [DeepSite](https://deepsite.hf.co).
14
+
dance-styles.html ADDED
@@ -0,0 +1,161 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Dance Styles - ClothSwap AI</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://unpkg.com/feather-icons"></script>
9
+ </head>
10
+ <body class="bg-gray-50 min-h-screen">
11
+ <div class="gradient-bg text-white py-6 shadow-lg">
12
+ <div class="container mx-auto px-4">
13
+ <div class="flex items-center justify-between">
14
+ <div class="flex items-center space-x-2">
15
+ <i data-feather="magic" class="w-8 h-8"></i>
16
+ <h1 class="text-2xl font-bold">ClothSwap AI</h1>
17
+ </div>
18
+ <nav>
19
+ <ul class="flex space-x-6">
20
+ <li><a href="index.html" class="hover:underline">Home</a></li>
21
+ <li><a href="#" class="hover:underline">Pricing</a></li>
22
+ <li><a href="dance-styles.html" class="hover:underline font-bold">Dance Styles</a></li>
23
+ <li><a href="#" class="hover:underline">FAQ</a></li>
24
+ </ul>
25
+ </nav>
26
+ </div>
27
+ </div>
28
+ </div>
29
+
30
+ <main class="container mx-auto px-4 py-12">
31
+ <h2 class="text-3xl font-bold text-center text-gray-800 mb-8">Available Dance Styles</h2>
32
+
33
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
34
+ <div class="bg-white rounded-xl shadow-md overflow-hidden">
35
+ <div class="relative h-48 overflow-hidden">
36
+ <video autoplay loop muted class="w-full h-full object-cover">
37
+ <source src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerJoyrides.mp4" type="video/mp4">
38
+ </video>
39
+ </div>
40
+ <div class="p-6">
41
+ <h3 class="text-xl font-bold text-gray-800 mb-2">Hip Hop</h3>
42
+ <p class="text-gray-600 mb-4">Urban street dance style with popping, locking and breaking moves.</p>
43
+ <button class="w-full bg-purple-600 hover:bg-purple-700 text-white py-2 px-4 rounded-lg transition">
44
+ Try This Style
45
+ </button>
46
+ </div>
47
+ </div>
48
+
49
+ <div class="bg-white rounded-xl shadow-md overflow-hidden">
50
+ <div class="relative h-48 overflow-hidden">
51
+ <video autoplay loop muted class="w-full h-full object-cover">
52
+ <source src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerBlazes.mp4" type="video/mp4">
53
+ </video>
54
+ </div>
55
+ <div class="p-6">
56
+ <h3 class="text-xl font-bold text-gray-800 mb-2">Salsa</h3>
57
+ <p class="text-gray-600 mb-4">Latin dance with flowing movements and quick footwork patterns.</p>
58
+ <button class="w-full bg-purple-600 hover:bg-purple-700 text-white py-2 px-4 rounded-lg transition">
59
+ Try This Style
60
+ </button>
61
+ </div>
62
+ </div>
63
+
64
+ <div class="bg-white rounded-xl shadow-md overflow-hidden">
65
+ <div class="relative h-48 overflow-hidden">
66
+ <video autoplay loop muted class="w-full h-full object-cover">
67
+ <source src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerFun.mp4" type="video/mp4">
68
+ </video>
69
+ </div>
70
+ <div class="p-6">
71
+ <h3 class="text-xl font-bold text-gray-800 mb-2">Ballet</h3>
72
+ <p class="text-gray-600 mb-4">Classical dance form with graceful, flowing movements and precise technique.</p>
73
+ <button class="w-full bg-purple-600 hover:bg-purple-700 text-white py-2 px-4 rounded-lg transition">
74
+ Try This Style
75
+ </button>
76
+ </div>
77
+ </div>
78
+
79
+ <div class="bg-white rounded-xl shadow-md overflow-hidden">
80
+ <div class="relative h-48 overflow-hidden">
81
+ <video autoplay loop muted class="w-full h-full object-cover">
82
+ <source src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerMeltdowns.mp4" type="video/mp4">
83
+ </video>
84
+ </div>
85
+ <div class="p-6">
86
+ <h3 class="text-xl font-bold text-gray-800 mb-2">Breakdance</h3>
87
+ <p class="text-gray-600 mb-4">Energetic street dance with power moves, freezes and floor work.</p>
88
+ <button class="w-full bg-purple-600 hover:bg-purple-700 text-white py-2 px-4 rounded-lg transition">
89
+ Try This Style
90
+ </button>
91
+ </div>
92
+ </div>
93
+
94
+ <div class="bg-white rounded-xl shadow-md overflow-hidden">
95
+ <div class="relative h-48 overflow-hidden">
96
+ <video autoplay loop muted class="w-full h-full object-cover">
97
+ <source src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/TearsOfSteel.mp4" type="video/mp4">
98
+ </video>
99
+ </div>
100
+ <div class="p-6">
101
+ <h3 class="text-xl font-bold text-gray-800 mb-2">Twerk</h3>
102
+ <p class="text-gray-600 mb-4">Booty-shaking dance style focusing on hip and butt movements.</p>
103
+ <button class="w-full bg-purple-600 hover:bg-purple-700 text-white py-2 px-4 rounded-lg transition">
104
+ Try This Style
105
+ </button>
106
+ </div>
107
+ </div>
108
+
109
+ <div class="bg-white rounded-xl shadow-md overflow-hidden">
110
+ <div class="relative h-48 overflow-hidden">
111
+ <video autoplay loop muted class="w-full h-full object-cover">
112
+ <source src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/WeAreGoingOnBullrun.mp4" type="video/mp4">
113
+ </video>
114
+ </div>
115
+ <div class="p-6">
116
+ <h3 class="text-xl font-bold text-gray-800 mb-2">K-Pop</h3>
117
+ <p class="text-gray-600 mb-4">Energetic Korean pop dance with synchronized group formations.</p>
118
+ <button class="w-full bg-purple-600 hover:bg-purple-700 text-white py-2 px-4 rounded-lg transition">
119
+ Try This Style
120
+ </button>
121
+ </div>
122
+ </div>
123
+ </div>
124
+ </main>
125
+
126
+ <footer class="bg-gray-800 text-white py-8 mt-16">
127
+ <div class="container mx-auto px-4">
128
+ <div class="flex flex-col md:flex-row justify-between items-center">
129
+ <div class="mb-4 md:mb-0">
130
+ <div class="flex items-center space-x-2">
131
+ <i data-feather="magic" class="w-6 h-6"></i>
132
+ <span class="text-xl font-bold">ClothSwap AI</span>
133
+ </div>
134
+ <p class="text-gray-400 mt-2">The future of outfit transformation</p>
135
+ </div>
136
+ <div class="text-center md:text-right">
137
+ <p class="text-gray-400">© 2023 StripAI Magic. All rights reserved.</p>
138
+ <div class="flex justify-center md:justify-end space-x-4 mt-2">
139
+ <a href="#" class="text-gray-400 hover:text-white">Privacy Policy</a>
140
+ <a href="#" class="text-gray-400 hover:text-white">Terms of Service</a>
141
+ <a href="#" class="text-gray-400 hover:text-white">Contact</a>
142
+ </div>
143
+ </div>
144
+ </div>
145
+ </div>
146
+ </footer>
147
+
148
+ <script>
149
+ document.addEventListener('DOMContentLoaded', function() {
150
+ feather.replace();
151
+
152
+ // Make "Try This Style" buttons link back to main page
153
+ document.querySelectorAll('button').forEach(btn => {
154
+ btn.addEventListener('click', () => {
155
+ window.location.href = 'index.html';
156
+ });
157
+ });
158
+ });
159
+ </script>
160
+ </body>
161
+ </html>
index.html CHANGED
@@ -1,19 +1,357 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
19
  </html>
 
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>StripAI Magic - Remove Clothes from Images</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/feather-icons/dist/feather.min.js"></script>
10
+ <style>
11
+ .upload-area {
12
+ border: 2px dashed #ccc;
13
+ transition: all 0.3s ease;
14
+ }
15
+ .upload-area:hover {
16
+ border-color: #888;
17
+ background-color: rgba(0, 0, 0, 0.02);
18
+ }
19
+ .gradient-bg {
20
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
21
+ }
22
+ .result-container {
23
+ transition: all 0.5s ease;
24
+ opacity: 0;
25
+ height: 0;
26
+ overflow: hidden;
27
+ }
28
+ .result-container.show {
29
+ opacity: 1;
30
+ height: auto;
31
+ }
32
+ </style>
33
+ </head>
34
+ <body class="bg-gray-50 min-h-screen">
35
+ <div class="gradient-bg text-white py-6 shadow-lg">
36
+ <div class="container mx-auto px-4">
37
+ <div class="flex items-center justify-between">
38
+ <div class="flex items-center space-x-2">
39
+ <i data-feather="magic" class="w-8 h-8"></i>
40
+ <h1 class="text-2xl font-bold">StripAI Magic</h1>
41
+ </div>
42
+ <nav>
43
+ <ul class="flex space-x-6">
44
+ <li><a href="#" class="hover:underline">Home</a></li>
45
+ <li><a href="#" class="hover:underline">Pricing</a></li>
46
+ <li><a href="#" class="hover:underline">Dance Styles</a></li>
47
+ <li><a href="#" class="hover:underline">FAQ</a></li>
48
+ </ul>
49
+ </nav>
50
+ </div>
51
+ </div>
52
+ </div>
53
+
54
+ <main class="container mx-auto px-4 py-12">
55
+ <section class="text-center mb-12">
56
+ <h2 class="text-4xl font-bold text-gray-800 mb-4">AI-Powered Outfit Changer</h2>
57
+ <p class="text-xl text-gray-600 max-w-2xl mx-auto">
58
+ Upload any photo and let our powerful AI swap outfits magically. Transform any look instantly!
59
+ Uses advanced deep learning models for realistic results. 100% private processing.
60
+ </p>
61
+ </section>
62
+
63
+ <section class="max-w-3xl mx-auto bg-white rounded-xl shadow-md overflow-hidden p-6 mb-12">
64
+ <div class="upload-area rounded-lg p-8 text-center cursor-pointer mb-6" id="uploadArea">
65
+ <i data-feather="upload" class="w-12 h-12 mx-auto text-gray-400 mb-4"></i>
66
+ <h3 class="text-xl font-semibold text-gray-700 mb-2">Drag & Drop Your Image Here</h3>
67
+ <p class="text-gray-500 mb-4">or click to browse files</p>
68
+ <input type="file" id="fileInput" class="hidden" accept="image/*">
69
+ <button class="bg-purple-600 hover:bg-purple-700 text-white font-medium py-2 px-6 rounded-lg transition">
70
+ Select Image
71
+ </button>
72
+ </div>
73
+
74
+ <div class="settings mb-6">
75
+ <h4 class="text-lg font-medium text-gray-700 mb-3">Adjust Settings</h4>
76
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
77
+ <div>
78
+ <label class="block text-gray-600 text-sm mb-2">Clothing Type</label>
79
+ <select class="w-full p-2 border rounded-lg">
80
+ <option>Automatic Detection</option>
81
+ <option>Casual Wear</option>
82
+ <option>Party Outfit</option>
83
+ <option>Swimwear</option>
84
+ <option>Formal Attire</option>
85
+ </select>
86
+ </div>
87
+ <div>
88
+ <label class="block text-gray-600 text-sm mb-2">Strength</label>
89
+ <input type="range" min="1" max="10" value="5" class="w-full">
90
+ </div>
91
+ <div>
92
+ <label class="block text-gray-600 text-sm mb-2">Privacy Level</label>
93
+ <select class="w-full p-2 border rounded-lg">
94
+ <option>High (Auto-delete in 1h)</option>
95
+ <option>Medium (Auto-delete in 24h)</option>
96
+ <option>None (Save my images)</option>
97
+ </select>
98
+ </div>
99
+ </div>
100
+ </div>
101
+
102
+ <div class="text-center mb-6">
103
+ <h4 class="text-lg font-medium text-gray-700 mb-3">AI Dance Mode</h4>
104
+ <div class="flex justify-center space-x-4">
105
+ <button id="danceBtn" class="bg-green-600 hover:bg-green-700 text-white font-medium py-2 px-6 rounded-lg transition transform hover:scale-105 disabled:opacity-50 disabled:cursor-not-allowed" disabled>
106
+ <i data-feather="activity" class="w-4 h-4 mr-2"></i>
107
+ Make Me Dance
108
+ </button>
109
+ <select id="danceStyle" class="p-2 border rounded-lg" disabled>
110
+ <option>Select Dance Style</option>
111
+ <option>Hip Hop</option>
112
+ <option>Salsa</option>
113
+ <option>Ballet</option>
114
+ <option>Breakdance</option>
115
+ <option>Twerk</option>
116
+ </select>
117
+ </div>
118
+ </div>
119
+
120
+ <div class="text-center">
121
+ <button id="processBtn" class="bg-pink-600 hover:bg-pink-700 text-white font-bold py-3 px-8 rounded-lg text-lg transition transform hover:scale-105 disabled:opacity-50 disabled:cursor-not-allowed" disabled>
122
+ <span id="btnText">Process Image</span>
123
+ <i data-feather="loader" class="w-5 h-5 ml-2 animate-spin hidden" id="spinner"></i>
124
+ </button>
125
+ </div>
126
+ </section>
127
+
128
+ <section class="result-container max-w-4xl mx-auto bg-white rounded-xl shadow-md overflow-hidden p-6" id="resultContainer">
129
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
130
+ <div class="text-center">
131
+ <h4 class="text-lg font-medium text-gray-700 mb-3">Original</h4>
132
+ <div class="border rounded-lg overflow-hidden">
133
+ <img id="originalImage" src="" alt="Original Image" class="w-full h-auto">
134
+ </div>
135
+ </div>
136
+ <div class="text-center">
137
+ <h4 class="text-lg font-medium text-gray-700 mb-3">Result</h4>
138
+ <div class="border rounded-lg overflow-hidden bg-gray-100 flex items-center justify-center" style="min-height: 300px;">
139
+ <video id="resultVideo" controls class="w-full hidden"></video>
140
+ <p id="placeholderText" class="text-gray-500">Your processed video will appear here</p>
141
+ </div>
142
+ </div>
143
+ </div>
144
+
145
+ <div class="mt-6 flex justify-center space-x-4">
146
+ <button id="downloadVideoBtn" class="bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-6 rounded-lg transition flex items-center">
147
+ <i data-feather="download" class="w-4 h-4 mr-2"></i>
148
+ Download Video
149
+ </button>
150
+ <button class="bg-gray-600 hover:bg-gray-700 text-white font-medium py-2 px-6 rounded-lg transition flex items-center">
151
+ <i data-feather="share-2" class="w-4 h-4 mr-2"></i>
152
+ Share
153
+ </button>
154
+ <button class="bg-purple-600 hover:bg-purple-700 text-white font-medium py-2 px-6 rounded-lg transition flex items-center">
155
+ <i data-feather="repeat" class="w-4 h-4 mr-2"></i>
156
+ Try Another
157
+ </button>
158
+ </div>
159
+ </section>
160
+
161
+ <section class="max-w-4xl mx-auto mt-16">
162
+ <h3 class="text-2xl font-bold text-center text-gray-800 mb-8">How It Works</h3>
163
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
164
+ <div class="text-center">
165
+ <div class="bg-purple-100 rounded-full w-16 h-16 flex items-center justify-center mx-auto mb-4">
166
+ <i data-feather="upload" class="text-purple-600 w-6 h-6"></i>
167
+ </div>
168
+ <h4 class="font-medium text-gray-700 mb-2">1. Upload Image</h4>
169
+ <p class="text-gray-600">Select any photo from your device or drag and drop it into our uploader</p>
170
+ </div>
171
+ <div class="text-center">
172
+ <div class="bg-pink-100 rounded-full w-16 h-16 flex items-center justify-center mx-auto mb-4">
173
+ <i data-feather="cpu" class="text-pink-600 w-6 h-6"></i>
174
+ </div>
175
+ <h4 class="font-medium text-gray-700 mb-2">2. AI Processing</h4>
176
+ <p class="text-gray-600">Our advanced AI analyzes the image and swaps outfits with precision</p>
177
+ </div>
178
+ <div class="text-center">
179
+ <div class="bg-blue-100 rounded-full w-16 h-16 flex items-center justify-center mx-auto mb-4">
180
+ <i data-feather="download" class="text-blue-600 w-6 h-6"></i>
181
+ </div>
182
+ <h4 class="font-medium text-gray-700 mb-2">3. Download Result</h4>
183
+ <p class="text-gray-600">Get your outfit-swapped image instantly and download it privately</p>
184
+ </div>
185
+ </div>
186
+ </section>
187
+ </main>
188
+
189
+ <footer class="bg-gray-800 text-white py-8 mt-16">
190
+ <div class="container mx-auto px-4">
191
+ <div class="flex flex-col md:flex-row justify-between items-center">
192
+ <div class="mb-4 md:mb-0">
193
+ <div class="flex items-center space-x-2">
194
+ <i data-feather="magic" class="w-6 h-6"></i>
195
+ <span class="text-xl font-bold">StripAI Magic</span>
196
+ </div>
197
+ <p class="text-gray-400 mt-2">The future of image processing is here</p>
198
+ </div>
199
+ <div class="text-center md:text-right">
200
+ <p class="text-gray-400">© 2023 StripAI Magic. All rights reserved.</p>
201
+ <div class="flex justify-center md:justify-end space-x-4 mt-2">
202
+ <a href="#" class="text-gray-400 hover:text-white">Privacy Policy</a>
203
+ <a href="#" class="text-gray-400 hover:text-white">Terms of Service</a>
204
+ <a href="#" class="text-gray-400 hover:text-white">Contact</a>
205
+ </div>
206
+ </div>
207
+ </div>
208
+ </div>
209
+ </footer>
210
+
211
+ <script>
212
+ document.addEventListener('DOMContentLoaded', function() {
213
+ feather.replace();
214
+
215
+ const uploadArea = document.getElementById('uploadArea');
216
+ const fileInput = document.getElementById('fileInput');
217
+ const processBtn = document.getElementById('processBtn');
218
+ const danceBtn = document.getElementById('danceBtn');
219
+ const danceStyle = document.getElementById('danceStyle');
220
+ const originalImage = document.getElementById('originalImage');
221
+ const resultVideo = document.getElementById('resultVideo');
222
+ const placeholderText = document.getElementById('placeholderText');
223
+ const resultContainer = document.getElementById('resultContainer');
224
+ const btnText = document.getElementById('btnText');
225
+ const spinner = document.getElementById('spinner');
226
+
227
+ // Handle drag and drop
228
+ uploadArea.addEventListener('click', function() {
229
+ fileInput.click();
230
+
231
+ // Add warning about demo version
232
+ const warningDiv = document.createElement('div');
233
+ warningDiv.className = 'bg-yellow-100 border-l-4 border-yellow-500 text-yellow-700 p-4 mb-6 rounded mx-auto max-w-3xl';
234
+ warningDiv.innerHTML = `
235
+ <p class="font-bold">Demo Version Notice</p>
236
+ <p>This is a demonstration interface only. No actual image processing occurs.</p>
237
+ `;
238
+ document.querySelector('main').insertBefore(warningDiv, document.querySelector('main').firstChild);
239
+ });
240
+
241
+ // Dance functionality
242
+ danceBtn.addEventListener('click', function() {
243
+ if (!fileInput.files[0]) return;
244
+
245
+ danceBtn.innerHTML = '<i data-feather="loader" class="w-4 h-4 mr-2 animate-spin"></i> Generating Dance Video';
246
+ danceBtn.disabled = true;
247
+
248
+ // Simulate dance video generation
249
+ setTimeout(() => {
250
+ const videoContainer = document.createElement('div');
251
+ videoContainer.className = 'mt-6 border rounded-lg overflow-hidden bg-gray-100';
252
+ videoContainer.innerHTML = `
253
+ <video controls autoplay loop class="w-full" id="danceVideo">
254
+ <source src="https://dance-ai-demo.s3.amazonaws.com/${danceStyle.value.toLowerCase()}.mp4" type="video/mp4">
255
+ Your browser does not support the video tag.
256
+ </video>
257
+ <div class="p-4 bg-gray-800 text-white text-center">
258
+ <p>Your AI-generated ${danceStyle.value} dance video</p>
259
+ <button class="mt-2 bg-green-600 hover:bg-green-700 text-white font-medium py-2 px-6 rounded-lg transition">
260
+ <i data-feather="download" class="w-4 h-4 mr-2"></i>
261
+ Download Video
262
+ </button>
263
+ </div>
264
+ `;
265
+ // Insert after result container with reliable video source
266
+ const danceVideo = videoContainer.querySelector('video');
267
+ danceVideo.src = 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerBlazes.mp4';
268
+ danceVideo.load();
269
+ resultContainer.parentNode.insertBefore(videoContainer, resultContainer.nextSibling);
270
+ danceBtn.innerHTML = '<i data-feather="activity" class="w-4 h-4 mr-2"></i> Make Me Dance';
271
+ danceBtn.disabled = false;
272
+ feather.replace();
273
+ }, 4000);
274
+ });
275
+ uploadArea.addEventListener('dragover', function(e) {
276
+ e.preventDefault();
277
+ this.classList.add('border-pink-500', 'bg-pink-50');
278
+ });
279
+
280
+ uploadArea.addEventListener('dragleave', function() {
281
+ this.classList.remove('border-pink-500', 'bg-pink-50');
282
+ });
283
+
284
+ uploadArea.addEventListener('drop', function(e) {
285
+ e.preventDefault();
286
+ this.classList.remove('border-pink-500', 'bg-pink-50');
287
+
288
+ if (e.dataTransfer.files.length) {
289
+ fileInput.files = e.dataTransfer.files;
290
+ handleFileSelect();
291
+ }
292
+ });
293
+
294
+ fileInput.addEventListener('change', handleFileSelect);
295
+
296
+ function handleFileSelect() {
297
+ if (fileInput.files && fileInput.files[0]) {
298
+ const reader = new FileReader();
299
+
300
+ reader.onload = function(e) {
301
+ originalImage.src = e.target.result;
302
+ processBtn.disabled = false;
303
+ danceBtn.disabled = false;
304
+ danceStyle.disabled = false;
305
+ danceBtn.disabled = false;
306
+ danceStyle.disabled = false;
307
+ uploadArea.innerHTML = `
308
+ <div class="flex items-center justify-center space-x-4">
309
+ <img src="${e.target.result}" alt="Preview" class="h-16 w-16 object-cover rounded-lg">
310
+ <div class="text-left">
311
+ <p class="font-medium">${fileInput.files[0].name}</p>
312
+ <p class="text-sm text-gray-500">${(fileInput.files[0].size / 1024 / 1024).toFixed(2)} MB</p>
313
+ </div>
314
+ </div>
315
+ `;
316
+ };
317
+
318
+ reader.readAsDataURL(fileInput.files[0]);
319
+ }
320
+ }
321
+ processBtn.addEventListener('click', function() {
322
+ // Show processing state
323
+ btnText.textContent = 'Processing...';
324
+ spinner.classList.remove('hidden');
325
+ processBtn.disabled = true;
326
+
327
+ // Simulate AI processing with timeout
328
+ setTimeout(() => {
329
+ // Use a reliable demo video source
330
+ resultVideo.src = 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerJoyrides.mp4';
331
+ resultVideo.load();
332
+ resultVideo.classList.remove('hidden');
333
+ placeholderText.classList.add('hidden');
334
+ resultContainer.classList.add('show');
335
+
336
+ // Reset button state
337
+ btnText.textContent = 'Process Image';
338
+ spinner.classList.add('hidden');
339
+ processBtn.disabled = false;
340
+ }, 3000); // 3 second delay to simulate processing
341
+
342
+ // Add download functionality for video
343
+ document.getElementById('downloadVideoBtn').addEventListener('click', function() {
344
+ if (resultVideo.src) {
345
+ const a = document.createElement('a');
346
+ a.href = resultVideo.src;
347
+ a.download = 'stripai-result.mp4';
348
+ document.body.appendChild(a);
349
+ a.click();
350
+ document.body.removeChild(a);
351
+ }
352
+ });
353
+ });
354
+ });
355
+ </script>
356
+ </body>
357
  </html>