Hugging Face's logo

Spaces:
gaur3009
/
imaginecolorng
Running

App Files Community
gaur3009 commited on
Commit
567afb4
·
verified ·
1 Parent(s): a22ee90

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +490 -19
index.html CHANGED
@@ -1,19 +1,490 @@
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>RookusAI - Dress Recoloring with CosXL</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ .gradient-bg {
11
+ background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
12
+ }
13
+ .upload-area {
14
+ border: 2px dashed #cbd5e0;
15
+ transition: all 0.3s ease;
16
+ }
17
+ .upload-area:hover {
18
+ border-color: #667eea;
19
+ }
20
+ .upload-area.active {
21
+ border-color: #667eea;
22
+ background-color: #ebf4ff;
23
+ }
24
+ .color-option {
25
+ width: 40px;
26
+ height: 40px;
27
+ border-radius: 50%;
28
+ cursor: pointer;
29
+ transition: transform 0.2s;
30
+ }
31
+ .color-option:hover {
32
+ transform: scale(1.1);
33
+ }
34
+ .color-option.selected {
35
+ border: 3px solid #4f46e5;
36
+ transform: scale(1.1);
37
+ }
38
+ .result-container {
39
+ box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
40
+ }
41
+ .loading-spinner {
42
+ animation: spin 1s linear infinite;
43
+ }
44
+ @keyframes spin {
45
+ 0% { transform: rotate(0deg); }
46
+ 100% { transform: rotate(360deg); }
47
+ }
48
+ .history-item {
49
+ transition: all 0.2s ease;
50
+ }
51
+ .history-item:hover {
52
+ transform: translateY(-2px);
53
+ }
54
+ </style>
55
+ </head>
56
+ <body class="gradient-bg min-h-screen">
57
+ <!-- Navigation -->
58
+ <nav class="bg-white shadow-sm">
59
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
60
+ <div class="flex justify-between h-16">
61
+ <div class="flex items-center">
62
+ <div class="flex-shrink-0 flex items-center">
63
+ <i class="fas fa-tshirt text-indigo-600 text-2xl mr-2"></i>
64
+ <span class="text-xl font-bold text-gray-900">RookusAI</span>
65
+ </div>
66
+ </div>
67
+ <div class="hidden sm:ml-6 sm:flex sm:items-center">
68
+ <a href="#" class="px-3 py-2 rounded-md text-sm font-medium text-gray-700 hover:text-indigo-600">Home</a>
69
+ <a href="#" class="px-3 py-2 rounded-md text-sm font-medium text-gray-700 hover:text-indigo-600">Features</a>
70
+ <a href="#" class="px-3 py-2 rounded-md text-sm font-medium text-gray-700 hover:text-indigo-600">Pricing</a>
71
+ <a href="#" class="px-3 py-2 rounded-md text-sm font-medium text-gray-700 hover:text-indigo-600">About</a>
72
+ </div>
73
+ <div class="hidden sm:ml-6 sm:flex sm:items-center">
74
+ <button class="px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
75
+ Sign In
76
+ </button>
77
+ </div>
78
+ <div class="-mr-2 flex items-center sm:hidden">
79
+ <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500" aria-controls="mobile-menu" aria-expanded="false">
80
+ <span class="sr-only">Open main menu</span>
81
+ <i class="fas fa-bars"></i>
82
+ </button>
83
+ </div>
84
+ </div>
85
+ </div>
86
+ </nav>
87
+
88
+ <!-- Main Content -->
89
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
90
+ <div class="text-center mb-12">
91
+ <h1 class="text-4xl font-extrabold text-gray-900 sm:text-5xl sm:tracking-tight lg:text-6xl">
92
+ AI-Powered Dress Recoloring
93
+ </h1>
94
+ <p class="mt-5 max-w-xl mx-auto text-xl text-gray-500">
95
+ Transform your outfit with CosXL's advanced AI technology. Simply upload a photo and choose your desired color.
96
+ </p>
97
+ </div>
98
+
99
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
100
+ <!-- Upload and Controls Section -->
101
+ <div class="bg-white rounded-xl shadow-md p-6">
102
+ <div class="mb-6">
103
+ <h2 class="text-xl font-semibold text-gray-800 mb-4">Upload Your Dress Photo</h2>
104
+ <div id="upload-area" class="upload-area rounded-lg p-8 text-center cursor-pointer">
105
+ <input type="file" id="file-input" class="hidden" accept="image/*">
106
+ <div id="upload-content">
107
+ <i class="fas fa-cloud-upload-alt text-4xl text-gray-400 mb-3"></i>
108
+ <p class="text-gray-500">Drag & drop your photo here or click to browse</p>
109
+ <p class="text-sm text-gray-400 mt-2">Supports JPG, PNG (Max 5MB)</p>
110
+ </div>
111
+ <img id="preview-image" class="hidden max-w-full h-auto rounded-lg mx-auto" alt="Preview">
112
+ </div>
113
+ </div>
114
+
115
+ <div class="mb-6">
116
+ <h2 class="text-xl font-semibold text-gray-800 mb-4">Color Instructions</h2>
117
+ <div class="mb-4">
118
+ <label for="color-prompt" class="block text-sm font-medium text-gray-700 mb-1">Describe the color change</label>
119
+ <input type="text" id="color-prompt" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500" placeholder="e.g. Change the dress to emerald green">
120
+ </div>
121
+ <div class="grid grid-cols-5 gap-4 mb-4">
122
+ <div class="color-option bg-red-500 selected" data-prompt="change the dress to bright red" title="Red"></div>
123
+ <div class="color-option bg-blue-500" data-prompt="change the dress to deep blue" title="Blue"></div>
124
+ <div class="color-option bg-green-500" data-prompt="change the dress to emerald green" title="Green"></div>
125
+ <div class="color-option bg-yellow-400" data-prompt="change the dress to golden yellow" title="Yellow"></div>
126
+ <div class="color-option bg-purple-500" data-prompt="change the dress to royal purple" title="Purple"></div>
127
+ <div class="color-option bg-pink-500" data-prompt="change the dress to hot pink" title="Pink"></div>
128
+ <div class="color-option bg-indigo-500" data-prompt="change the dress to indigo" title="Indigo"></div>
129
+ <div class="color-option bg-teal-500" data-prompt="change the dress to teal" title="Teal"></div>
130
+ <div class="color-option bg-gray-500" data-prompt="change the dress to charcoal gray" title="Gray"></div>
131
+ <div class="color-option bg-black" data-prompt="change the dress to black" title="Black"></div>
132
+ </div>
133
+ </div>
134
+
135
+ <div class="mb-6">
136
+ <h2 class="text-xl font-semibold text-gray-800 mb-4">Advanced Options</h2>
137
+ <div class="space-y-4">
138
+ <div>
139
+ <label for="negative-prompt" class="block text-sm font-medium text-gray-700 mb-1">Negative Prompt</label>
140
+ <input type="text" id="negative-prompt" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500" placeholder="Things you don't want in the result">
141
+ </div>
142
+ <div>
143
+ <label for="guidance-scale" class="block text-sm font-medium text-gray-700 mb-1">Guidance Scale</label>
144
+ <input type="range" id="guidance-scale" min="1" max="20" value="7" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer">
145
+ <div class="flex justify-between text-xs text-gray-500 mt-1">
146
+ <span>1</span>
147
+ <span>7</span>
148
+ <span>20</span>
149
+ </div>
150
+ </div>
151
+ <div>
152
+ <label for="steps" class="block text-sm font-medium text-gray-700 mb-1">Steps</label>
153
+ <input type="range" id="steps" min="10" max="50" value="20" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer">
154
+ <div class="flex justify-between text-xs text-gray-500 mt-1">
155
+ <span>10</span>
156
+ <span>20</span>
157
+ <span>50</span>
158
+ </div>
159
+ </div>
160
+ </div>
161
+ </div>
162
+
163
+ <button id="generate-btn" class="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-3 px-4 rounded-lg transition duration-200 flex items-center justify-center">
164
+ <span>Recolor Dress</span>
165
+ <i id="generate-icon" class="fas fa-magic ml-2"></i>
166
+ <i id="loading-icon" class="fas fa-circle-notch loading-spinner ml-2 hidden"></i>
167
+ </button>
168
+ </div>
169
+
170
+ <!-- Results Section -->
171
+ <div class="bg-white rounded-xl shadow-md p-6">
172
+ <h2 class="text-xl font-semibold text-gray-800 mb-4">Your Results</h2>
173
+
174
+ <div id="result-container" class="result-container bg-gray-50 rounded-lg p-4 hidden">
175
+ <div class="flex justify-between mb-4">
176
+ <h3 class="text-lg font-medium text-gray-700">Original</h3>
177
+ <h3 class="text-lg font-medium text-gray-700">Recolored</h3>
178
+ </div>
179
+ <div class="grid grid-cols-2 gap-4">
180
+ <img id="original-image" class="w-full h-auto rounded-lg" alt="Original">
181
+ <img id="result-image" class="w-full h-auto rounded-lg" alt="Result">
182
+ </div>
183
+ <div class="mt-4 flex justify-between">
184
+ <button id="download-btn" class="bg-indigo-100 hover:bg-indigo-200 text-indigo-700 font-medium py-2 px-4 rounded-lg transition duration-200">
185
+ <i class="fas fa-download mr-2"></i> Download
186
+ </button>
187
+ <button id="save-btn" class="bg-gray-100 hover:bg-gray-200 text-gray-700 font-medium py-2 px-4 rounded-lg transition duration-200">
188
+ <i class="fas fa-save mr-2"></i> Save to Profile
189
+ </button>
190
+ <button id="share-btn" class="bg-gray-100 hover:bg-gray-200 text-gray-700 font-medium py-2 px-4 rounded-lg transition duration-200">
191
+ <i class="fas fa-share-alt mr-2"></i> Share
192
+ </button>
193
+ </div>
194
+ </div>
195
+
196
+ <div id="empty-state" class="text-center py-12">
197
+ <i class="fas fa-tshirt text-4xl text-gray-300 mb-4"></i>
198
+ <h3 class="text-lg font-medium text-gray-500">No results yet</h3>
199
+ <p class="text-gray-400 mt-1">Upload a photo and click "Recolor Dress" to see the magic!</p>
200
+ </div>
201
+
202
+ <div id="history-section" class="mt-8 hidden">
203
+ <h3 class="text-lg font-medium text-gray-700 mb-3">Recent Recolors</h3>
204
+ <div class="grid grid-cols-3 gap-3" id="history-grid">
205
+ <!-- History items will be added here dynamically -->
206
+ </div>
207
+ </div>
208
+ </div>
209
+ </div>
210
+
211
+ <!-- Features Section -->
212
+ <div class="mt-16">
213
+ <h2 class="text-3xl font-bold text-center text-gray-900 mb-12">Why Choose RookusAI with CosXL?</h2>
214
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
215
+ <div class="bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition duration-200">
216
+ <div class="text-indigo-600 mb-4">
217
+ <i class="fas fa-bolt text-3xl"></i>
218
+ </div>
219
+ <h3 class="text-xl font-semibold mb-2">Advanced AI Technology</h3>
220
+ <p class="text-gray-500">Powered by CosXL's state-of-the-art image editing capabilities for realistic color transformations.</p>
221
+ </div>
222
+ <div class="bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition duration-200">
223
+ <div class="text-indigo-600 mb-4">
224
+ <i class="fas fa-palette text-3xl"></i>
225
+ </div>
226
+ <h3 class="text-xl font-semibold mb-2">Precise Color Control</h3>
227
+ <p class="text-gray-500">Get exactly the color you want with natural-looking results that maintain fabric textures.</p>
228
+ </div>
229
+ <div class="bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition duration-200">
230
+ <div class="text-indigo-600 mb-4">
231
+ <i class="fas fa-lock text-3xl"></i>
232
+ </div>
233
+ <h3 class="text-xl font-semibold mb-2">Secure Processing</h3>
234
+ <p class="text-gray-500">Your images are processed securely through CosXL's API with no permanent storage.</p>
235
+ </div>
236
+ </div>
237
+ </div>
238
+ </div>
239
+
240
+ <!-- Footer -->
241
+ <footer class="bg-white mt-16">
242
+ <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8">
243
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-8">
244
+ <div>
245
+ <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Product</h3>
246
+ <ul class="mt-4 space-y-2">
247
+ <li><a href="#" class="text-base text-gray-500 hover:text-indigo-600">Features</a></li>
248
+ <li><a href="#" class="text-base text-gray-500 hover:text-indigo-600">Pricing</a></li>
249
+ <li><a href="#" class="text-base text-gray-500 hover:text-indigo-600">API</a></li>
250
+ </ul>
251
+ </div>
252
+ <div>
253
+ <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Resources</h3>
254
+ <ul class="mt-4 space-y-2">
255
+ <li><a href="#" class="text-base text-gray-500 hover:text-indigo-600">Documentation</a></li>
256
+ <li><a href="#" class="text-base text-gray-500 hover:text-indigo-600">Tutorials</a></li>
257
+ <li><a href="#" class="text-base text-gray-500 hover:text-indigo-600">Blog</a></li>
258
+ </ul>
259
+ </div>
260
+ <div>
261
+ <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Company</h3>
262
+ <ul class="mt-4 space-y-2">
263
+ <li><a href="#" class="text-base text-gray-500 hover:text-indigo-600">About</a></li>
264
+ <li><a href="#" class="text-base text-gray-500 hover:text-indigo-600">Careers</a></li>
265
+ <li><a href="#" class="text-base text-gray-500 hover:text-indigo-600">Contact</a></li>
266
+ </ul>
267
+ </div>
268
+ <div>
269
+ <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Legal</h3>
270
+ <ul class="mt-4 space-y-2">
271
+ <li><a href="#" class="text-base text-gray-500 hover:text-indigo-600">Privacy</a></li>
272
+ <li><a href="#" class="text-base text-gray-500 hover:text-indigo-600">Terms</a></li>
273
+ <li><a href="#" class="text-base text-gray-500 hover:text-indigo-600">License</a></li>
274
+ </ul>
275
+ </div>
276
+ </div>
277
+ <div class="mt-8 border-t border-gray-200 pt-8 flex flex-col md:flex-row justify-between items-center">
278
+ <p class="text-gray-500 text-sm">© 2023 RookusAI. All rights reserved.</p>
279
+ <div class="flex space-x-6 mt-4 md:mt-0">
280
+ <a href="#" class="text-gray-400 hover:text-indigo-600">
281
+ <i class="fab fa-twitter"></i>
282
+ </a>
283
+ <a href="#" class="text-gray-400 hover:text-indigo-600">
284
+ <i class="fab fa-instagram"></i>
285
+ </a>
286
+ <a href="#" class="text-gray-400 hover:text-indigo-600">
287
+ <i class="fab fa-facebook"></i>
288
+ </a>
289
+ <a href="#" class="text-gray-400 hover:text-indigo-600">
290
+ <i class="fab fa-github"></i>
291
+ </a>
292
+ </div>
293
+ </div>
294
+ </div>
295
+ </footer>
296
+
297
+ <script>
298
+ document.addEventListener('DOMContentLoaded', function() {
299
+ // DOM Elements
300
+ const uploadArea = document.getElementById('upload-area');
301
+ const fileInput = document.getElementById('file-input');
302
+ const uploadContent = document.getElementById('upload-content');
303
+ const previewImage = document.getElementById('preview-image');
304
+ const generateBtn = document.getElementById('generate-btn');
305
+ const generateIcon = document.getElementById('generate-icon');
306
+ const loadingIcon = document.getElementById('loading-icon');
307
+ const resultContainer = document.getElementById('result-container');
308
+ const emptyState = document.getElementById('empty-state');
309
+ const originalImage = document.getElementById('original-image');
310
+ const resultImage = document.getElementById('result-image');
311
+ const colorOptions = document.querySelectorAll('.color-option');
312
+ const colorPrompt = document.getElementById('color-prompt');
313
+ const negativePrompt = document.getElementById('negative-prompt');
314
+ const guidanceScale = document.getElementById('guidance-scale');
315
+ const steps = document.getElementById('steps');
316
+ const downloadBtn = document.getElementById('download-btn');
317
+ const historySection = document.getElementById('history-section');
318
+ const historyGrid = document.getElementById('history-grid');
319
+
320
+ // API Endpoint
321
+ const API_URL = 'https://multimodalart-cosxl.hf.space/run/predict';
322
+
323
+ // Current state
324
+ let uploadedImage = null;
325
+ let uploadedFile = null;
326
+
327
+ // Event Listeners
328
+ uploadArea.addEventListener('click', () => fileInput.click());
329
+
330
+ fileInput.addEventListener('change', (e) => {
331
+ const file = e.target.files[0];
332
+ if (file) {
333
+ if (file.size > 5 * 1024 * 1024) {
334
+ alert('File size exceeds 5MB limit');
335
+ return;
336
+ }
337
+
338
+ uploadedFile = file;
339
+ const reader = new FileReader();
340
+ reader.onload = (event) => {
341
+ uploadedImage = event.target.result;
342
+ previewImage.src = uploadedImage;
343
+ previewImage.classList.remove('hidden');
344
+ uploadContent.classList.add('hidden');
345
+ uploadArea.classList.add('active');
346
+ };
347
+ reader.readAsDataURL(file);
348
+ }
349
+ });
350
+
351
+ uploadArea.addEventListener('dragover', (e) => {
352
+ e.preventDefault();
353
+ uploadArea.classList.add('active');
354
+ });
355
+
356
+ uploadArea.addEventListener('dragleave', () => {
357
+ uploadArea.classList.remove('active');
358
+ });
359
+
360
+ uploadArea.addEventListener('drop', (e) => {
361
+ e.preventDefault();
362
+ uploadArea.classList.remove('active');
363
+
364
+ const file = e.dataTransfer.files[0];
365
+ if (file && file.type.match('image.*')) {
366
+ if (file.size > 5 * 1024 * 1024) {
367
+ alert('File size exceeds 5MB limit');
368
+ return;
369
+ }
370
+
371
+ uploadedFile = file;
372
+ const reader = new FileReader();
373
+ reader.onload = (event) => {
374
+ uploadedImage = event.target.result;
375
+ previewImage.src = uploadedImage;
376
+ previewImage.classList.remove('hidden');
377
+ uploadContent.classList.add('hidden');
378
+ };
379
+ reader.readAsDataURL(file);
380
+ }
381
+ });
382
+
383
+ colorOptions.forEach(option => {
384
+ option.addEventListener('click', () => {
385
+ document.querySelector('.color-option.selected').classList.remove('selected');
386
+ option.classList.add('selected');
387
+ colorPrompt.value = option.dataset.prompt;
388
+ });
389
+ });
390
+
391
+ generateBtn.addEventListener('click', async () => {
392
+ if (!uploadedImage) {
393
+ alert('Please upload an image first');
394
+ return;
395
+ }
396
+
397
+ if (!colorPrompt.value.trim()) {
398
+ alert('Please describe the color change you want');
399
+ return;
400
+ }
401
+
402
+ // Show loading state
403
+ generateIcon.classList.add('hidden');
404
+ loadingIcon.classList.remove('hidden');
405
+ generateBtn.disabled = true;
406
+
407
+ try {
408
+ // Prepare the form data
409
+ const formData = new FormData();
410
+ formData.append('data', JSON.stringify({
411
+ 'fn_index': 1,
412
+ 'data': [
413
+ uploadedImage, // image
414
+ colorPrompt.value, // prompt
415
+ negativePrompt.value, // negative prompt
416
+ Number(guidanceScale.value), // guidance scale
417
+ Number(steps.value) // steps
418
+ ]
419
+ }));
420
+
421
+ // Call the CosXL API
422
+ const response = await fetch(API_URL, {
423
+ method: 'POST',
424
+ body: formData
425
+ });
426
+
427
+ if (!response.ok) {
428
+ throw new Error(`API request failed with status ${response.status}`);
429
+ }
430
+
431
+ const result = await response.json();
432
+
433
+ if (result.error) {
434
+ throw new Error(result.error);
435
+ }
436
+
437
+ // Display results
438
+ originalImage.src = uploadedImage;
439
+ resultImage.src = `data:image/png;base64,${result.data[0]}`;
440
+ emptyState.classList.add('hidden');
441
+ resultContainer.classList.remove('hidden');
442
+
443
+ // Add to history
444
+ addToHistory(uploadedImage, `data:image/png;base64,${result.data[0]}`);
445
+ historySection.classList.remove('hidden');
446
+ } catch (error) {
447
+ console.error('Error:', error);
448
+ alert(`An error occurred: ${error.message}`);
449
+ } finally {
450
+ // Reset button state
451
+ generateIcon.classList.remove('hidden');
452
+ loadingIcon.classList.add('hidden');
453
+ generateBtn.disabled = false;
454
+ }
455
+ });
456
+
457
+ downloadBtn.addEventListener('click', () => {
458
+ if (resultImage.src) {
459
+ const link = document.createElement('a');
460
+ link.href = resultImage.src;
461
+ link.download = 'rookusai-recolored-dress.png';
462
+ document.body.appendChild(link);
463
+ link.click();
464
+ document.body.removeChild(link);
465
+ }
466
+ });
467
+
468
+ function addToHistory(originalUrl, resultUrl) {
469
+ const historyItem = document.createElement('div');
470
+ historyItem.className = 'history-item bg-white p-2 rounded-lg shadow-sm cursor-pointer';
471
+ historyItem.innerHTML = `
472
+ <img src="${resultUrl}" class="w-full h-auto rounded" alt="History item">
473
+ `;
474
+ historyItem.addEventListener('click', () => {
475
+ originalImage.src = originalUrl;
476
+ resultImage.src = resultUrl;
477
+ emptyState.classList.add('hidden');
478
+ resultContainer.classList.remove('hidden');
479
+ });
480
+ historyGrid.insertBefore(historyItem, historyGrid.firstChild);
481
+
482
+ // Limit history to 6 items
483
+ if (historyGrid.children.length > 6) {
484
+ historyGrid.removeChild(historyGrid.lastChild);
485
+ }
486
+ }
487
+ });
488
+ </script>
489
+ </body>
490
+ </html>