Hugging Face's logo

Spaces:
Buck3tHead
/
testing
Running

App Files Community
Buck3tHead commited on
Commit
a354a98
·
verified ·
1 Parent(s): 374e442

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +866 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Testing
3
- emoji: 📈
4
- colorFrom: pink
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: testing
3
+ emoji: 🐳
4
+ colorFrom: blue
5
+ colorTo: blue
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,866 @@
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>Photo Visual Enhancer Pro</title>
7
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
8
+ <style>
9
+ :root {
10
+ --primary-color: #4361ee;
11
+ --secondary-color: #3a0ca3;
12
+ --accent-color: #f72585;
13
+ --light-color: #f8f9fa;
14
+ --dark-color: #212529;
15
+ --success-color: #2ecc71;
16
+ }
17
+
18
+ * {
19
+ margin: 0;
20
+ padding: 0;
21
+ box-sizing: border-box;
22
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
23
+ }
24
+
25
+ body {
26
+ background-color: #f0f2f5;
27
+ color: var(--dark-color);
28
+ line-height: 1.6;
29
+ }
30
+
31
+ .container {
32
+ max-width: 1200px;
33
+ margin: 0 auto;
34
+ padding: 20px;
35
+ }
36
+
37
+ header {
38
+ text-align: center;
39
+ margin-bottom: 30px;
40
+ padding: 20px 0;
41
+ background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
42
+ color: white;
43
+ border-radius: 10px;
44
+ box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
45
+ }
46
+
47
+ h1 {
48
+ font-size: 2.5rem;
49
+ margin-bottom: 10px;
50
+ }
51
+
52
+ .description {
53
+ font-size: 1.1rem;
54
+ opacity: 0.9;
55
+ }
56
+
57
+ .app-container {
58
+ display: flex;
59
+ flex-wrap: wrap;
60
+ gap: 20px;
61
+ }
62
+
63
+ .image-section {
64
+ flex: 3;
65
+ min-width: 300px;
66
+ background-color: white;
67
+ border-radius: 10px;
68
+ padding: 20px;
69
+ box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
70
+ }
71
+
72
+ .controls-section {
73
+ flex: 2;
74
+ min-width: 300px;
75
+ background-color: white;
76
+ border-radius: 10px;
77
+ padding: 20px;
78
+ box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
79
+ }
80
+
81
+ .image-container {
82
+ width: 100%;
83
+ aspect-ratio: 1;
84
+ margin-bottom: 20px;
85
+ position: relative;
86
+ border: 2px dashed #ddd;
87
+ border-radius: 8px;
88
+ overflow: hidden;
89
+ display: flex;
90
+ justify-content: center;
91
+ align-items: center;
92
+ }
93
+
94
+ #uploaded-image {
95
+ max-width: 100%;
96
+ max-height: 100%;
97
+ display: none;
98
+ object-fit: contain;
99
+ }
100
+
101
+ .upload-area {
102
+ text-align: center;
103
+ padding: 40px 20px;
104
+ cursor: pointer;
105
+ }
106
+
107
+ .upload-icon {
108
+ font-size: 3rem;
109
+ color: var(--primary-color);
110
+ margin-bottom: 15px;
111
+ }
112
+
113
+ .upload-text {
114
+ font-size: 1.2rem;
115
+ color: #666;
116
+ }
117
+
118
+ .btn {
119
+ display: inline-block;
120
+ padding: 10px 20px;
121
+ background-color: var(--primary-color);
122
+ color: white;
123
+ border: none;
124
+ border-radius: 5px;
125
+ cursor: pointer;
126
+ font-size: 1rem;
127
+ transition: all 0.3s ease;
128
+ margin-right: 10px;
129
+ margin-bottom: 10px;
130
+ }
131
+
132
+ .btn:hover {
133
+ background-color: var(--secondary-color);
134
+ transform: translateY(-2px);
135
+ }
136
+
137
+ .btn-secondary {
138
+ background-color: #6c757d;
139
+ }
140
+
141
+ .btn-secondary:hover {
142
+ background-color: #5a6268;
143
+ }
144
+
145
+ .btn-accent {
146
+ background-color: var(--accent-color);
147
+ }
148
+
149
+ .btn-accent:hover {
150
+ background-color: #c91867;
151
+ }
152
+
153
+ .btn-group {
154
+ margin-bottom: 20px;
155
+ }
156
+
157
+ .control-group {
158
+ margin-bottom: 25px;
159
+ }
160
+
161
+ .control-title {
162
+ font-weight: 600;
163
+ margin-bottom: 10px;
164
+ display: flex;
165
+ align-items: center;
166
+ }
167
+
168
+ .control-title i {
169
+ margin-right: 10px;
170
+ color: var(--primary-color);
171
+ }
172
+
173
+ .filter-grid {
174
+ display: grid;
175
+ grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
176
+ gap: 10px;
177
+ }
178
+
179
+ .filter-btn {
180
+ background-color: white;
181
+ border: 1px solid #ddd;
182
+ border-radius: 5px;
183
+ padding: 10px;
184
+ text-align: center;
185
+ cursor: pointer;
186
+ transition: all 0.3s ease;
187
+ }
188
+
189
+ .filter-btn:hover {
190
+ background-color: #f0f8ff;
191
+ transform: translateY(-2px);
192
+ border-color: var(--primary-color);
193
+ }
194
+
195
+ .filter-preview {
196
+ width: 80px;
197
+ height: 80px;
198
+ margin: 0 auto 5px;
199
+ border-radius: 5px;
200
+ overflow: hidden;
201
+ }
202
+
203
+ .filter-name {
204
+ font-size: 0.9rem;
205
+ }
206
+
207
+ .slider-group {
208
+ margin-top: 15px;
209
+ }
210
+
211
+ .slider-label {
212
+ display: flex;
213
+ justify-content: space-between;
214
+ margin-bottom: 5px;
215
+ }
216
+
217
+ .slider-container {
218
+ width: 100%;
219
+ }
220
+
221
+ input[type="range"] {
222
+ width: 100%;
223
+ height: 8px;
224
+ border-radius: 5px;
225
+ -webkit-appearance: none;
226
+ background: #ddd;
227
+ outline: none;
228
+ }
229
+
230
+ input[type="range"]::-webkit-slider-thumb {
231
+ -webkit-appearance: none;
232
+ appearance: none;
233
+ width: 20px;
234
+ height: 20px;
235
+ border-radius: 50%;
236
+ background: var(--primary-color);
237
+ cursor: pointer;
238
+ }
239
+
240
+ .result-value {
241
+ font-weight: bold;
242
+ color: var(--primary-color);
243
+ }
244
+
245
+ .download-section {
246
+ margin-top: 30px;
247
+ text-align: center;
248
+ }
249
+
250
+ .canvas-container {
251
+ display: none;
252
+ }
253
+
254
+ .status-message {
255
+ padding: 10px;
256
+ border-radius: 5px;
257
+ margin-bottom: 20px;
258
+ text-align: center;
259
+ display: none;
260
+ }
261
+
262
+ .success {
263
+ background-color: rgba(46, 204, 113, 0.2);
264
+ color: var(--success-color);
265
+ border: 1px solid var(--success-color);
266
+ }
267
+
268
+ .error {
269
+ background-color: rgba(231, 76, 60, 0.2);
270
+ color: #e74c3c;
271
+ border: 1px solid #e74c3c;
272
+ }
273
+
274
+ @media (max-width: 768px) {
275
+ .app-container {
276
+ flex-direction: column;
277
+ }
278
+
279
+ .filter-grid {
280
+ grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
281
+ }
282
+ }
283
+ </style>
284
+ </head>
285
+ <body>
286
+ <div class="container">
287
+ <header>
288
+ <h1><i class="fas fa-magic"></i> Photo Visual Enhancer Pro</h1>
289
+ <p class="description">Transform your images with powerful enhancement tools and filters</p>
290
+ </header>
291
+
292
+ <div class="app-container">
293
+ <div class="image-section">
294
+ <div class="image-container" id="image-container">
295
+ <div class="upload-area" id="upload-area">
296
+ <div class="upload-icon">
297
+ <i class="fas fa-cloud-upload-alt"></i>
298
+ </div>
299
+ <p class="upload-text">Drag & Drop your image here or click to browse</p>
300
+ <input type="file" id="file-input" accept="image/*" style="display: none;">
301
+ </div>
302
+ <img id="uploaded-image" alt="Uploaded Photo">
303
+ </div>
304
+
305
+ <div class="status-message" id="status-message"></div>
306
+
307
+ <div class="btn-group">
308
+ <button class="btn" id="enhance-btn"><i class="fas fa-star"></i> Auto Enhance</button>
309
+ <button class="btn btn-secondary" id="reset-btn"><i class="fas fa-redo"></i> Reset</button>
310
+ <button class="btn btn-accent" id="save-preset-btn"><i class="fas fa-save"></i> Save Preset</button>
311
+ </div>
312
+
313
+ <div class="canvas-container">
314
+ <canvas id="canvas"></canvas>
315
+ </div>
316
+ </div>
317
+
318
+ <div class="controls-section">
319
+ <div class="control-group">
320
+ <h3 class="control-title"><i class="fas fa-sliders-h"></i> Basic Adjustments</h3>
321
+ <div class="slider-group">
322
+ <div class="slider-label">
323
+ <span>Brightness</span>
324
+ <span class="result-value" id="brightness-value">0%</span>
325
+ </div>
326
+ <div class="slider-container">
327
+ <input type="range" id="brightness" min="-100" max="100" value="0" step="1">
328
+ </div>
329
+ </div>
330
+
331
+ <div class="slider-group">
332
+ <div class="slider-label">
333
+ <span>Contrast</span>
334
+ <span class="result-value" id="contrast-value">100%</span>
335
+ </div>
336
+ <div class="slider-container">
337
+ <input type="range" id="contrast" min="0" max="200" value="100" step="1">
338
+ </div>
339
+ </div>
340
+
341
+ <div class="slider-group">
342
+ <div class="slider-label">
343
+ <span>Saturation</span>
344
+ <span class="result-value" id="saturation-value">100%</span>
345
+ </div>
346
+ <div class="slider-container">
347
+ <input type="range" id="saturation" min="0" max="200" value="100" step="1">
348
+ </div>
349
+ </div>
350
+ </div>
351
+
352
+ <div class="control-group">
353
+ <h3 class="control-title"><i class="fas fa-filter"></i> Creative Filters</h3>
354
+ <div class="filter-grid">
355
+ <div class="filter-btn" data-filter="none">
356
+ <div class="filter-preview" style="background: #f8f9fa;"></div>
357
+ <div class="filter-name">None</div>
358
+ </div>
359
+ <div class="filter-btn" data-filter="vintage">
360
+ <div class="filter-preview" style="background: #e6dbc9;"></div>
361
+ <div class="filter-name">Vintage</div>
362
+ </div>
363
+ <div class="filter-btn" data-filter="blackWhite">
364
+ <div class="filter-preview" style="background: linear-gradient(to right, #000, #fff);"></div>
365
+ <div class="filter-name">B&W</div>
366
+ </div>
367
+ <div class="filter-btn" data-filter="sepia">
368
+ <div class="filter-preview" style="background: #704214;"></div>
369
+ <div class="filter-name">Sepia</div>
370
+ </div>
371
+ <div class="filter-btn" data-filter="clarendon">
372
+ <div class="filter-preview" style="background: linear-gradient(135deg, #4361ee, #f72585);"></div>
373
+ <div class="filter-name">Clarendon</div>
374
+ </div>
375
+ <div class="filter-btn" data-filter="lark">
376
+ <div class="filter-preview" style="background: linear-gradient(135deg, #3a0ca3, #2ec4b6);"></div>
377
+ <div class="filter-name">Lark</div>
378
+ </div>
379
+ <div class="filter-btn" data-filter="moon">
380
+ <div class="filter-preview" style="background: linear-gradient(135deg, #0c1a3a, #4cc9f0);"></div>
381
+ <div class="filter-name">Moon</div>
382
+ </div>
383
+ <div class="filter-btn" data-filter="willow">
384
+ <div class="filter-preview" style="background: linear-gradient(135deg, #3a5a40, #a3b18a);"></div>
385
+ <div class="filter-name">Willow</div>
386
+ </div>
387
+ </div>
388
+ </div>
389
+
390
+ <div class="control-group">
391
+ <h3 class="control-title"><i class="fas fa-tint"></i> Color Balance</h3>
392
+ <div class="slider-group">
393
+ <div class="slider-label">
394
+ <span>Red</span>
395
+ <span class="result-value" id="red-value">0</span>
396
+ </div>
397
+ <div class="slider-container">
398
+ <input type="range" id="red" min="-100" max="100" value="0" step="1">
399
+ </div>
400
+ </div>
401
+
402
+ <div class="slider-group">
403
+ <div class="slider-label">
404
+ <span>Green</span>
405
+ <span class="result-value" id="green-value">0</span>
406
+ </div>
407
+ <div class="slider-container">
408
+ <input type="range" id="green" min="-100" max="100" value="0" step="1">
409
+ </div>
410
+ </div>
411
+
412
+ <div class="slider-group">
413
+ <div class="slider-label">
414
+ <span>Blue</span>
415
+ <span class="result-value" id="blue-value">0</span>
416
+ </div>
417
+ <div class="slider-container">
418
+ <input type="range" id="blue" min="-100" max="100" value="0" step="1">
419
+ </div>
420
+ </div>
421
+ </div>
422
+
423
+ <div class="control-group">
424
+ <h3 class="control-title"><i class="fas fa-crop"></i> Transform</h3>
425
+ <div class="slider-group">
426
+ <div class="slider-label">
427
+ <span>Rotate</span>
428
+ <span class="result-value" id="rotate-value">0°</span>
429
+ </div>
430
+ <div class="slider-container">
431
+ <input type="range" id="rotate" min="0" max="360" value="0" step="1">
432
+ </div>
433
+ </div>
434
+
435
+ <div class="btn-group">
436
+ <button class="btn" id="flip-h"><i class="fas fa-arrows-alt-h"></i> Flip H</button>
437
+ <button class="btn" id="flip-v"><i class="fas fa-arrows-alt-v"></i> Flip V</button>
438
+ </div>
439
+ </div>
440
+
441
+ <div class="download-section">
442
+ <button class="btn btn-accent" id="download-btn"><i class="fas fa-download"></i> Download Enhanced Image</button>
443
+ </div>
444
+ </div>
445
+ </div>
446
+ </div>
447
+
448
+ <script>
449
+ document.addEventListener('DOMContentLoaded', function() {
450
+ // DOM Elements
451
+ const fileInput = document.getElementById('file-input');
452
+ const uploadArea = document.getElementById('upload-area');
453
+ const uploadedImage = document.getElementById('uploaded-image');
454
+ const imageContainer = document.getElementById('image-container');
455
+ const canvas = document.getElementById('canvas');
456
+ const ctx = canvas.getContext('2d');
457
+
458
+ // Controls
459
+ const brightnessSlider = document.getElementById('brightness');
460
+ const contrastSlider = document.getElementById('contrast');
461
+ const saturationSlider = document.getElementById('saturation');
462
+ const redSlider = document.getElementById('red');
463
+ const greenSlider = document.getElementById('green');
464
+ const blueSlider = document.getElementById('blue');
465
+ const rotateSlider = document.getElementById('rotate');
466
+
467
+ // Buttons
468
+ const enhanceBtn = document.getElementById('enhance-btn');
469
+ const resetBtn = document.getElementById('reset-btn');
470
+ const savePresetBtn = document.getElementById('save-preset-btn');
471
+ const downloadBtn = document.getElementById('download-btn');
472
+ const flipHBtn = document.getElementById('flip-h');
473
+ const flipVBtn = document.getElementById('flip-v');
474
+
475
+ // Value displays
476
+ const brightnessValue = document.getElementById('brightness-value');
477
+ const contrastValue = document.getElementById('contrast-value');
478
+ const saturationValue = document.getElementById('saturation-value');
479
+ const redValue = document.getElementById('red-value');
480
+ const greenValue = document.getElementById('green-value');
481
+ const blueValue = document.getElementById('blue-value');
482
+ const rotateValue = document.getElementById('rotate-value');
483
+
484
+ // Status message
485
+ const statusMessage = document.getElementById('status-message');
486
+
487
+ // Global variables
488
+ let originalImageData = null;
489
+ let flipHorizontal = false;
490
+ let flipVertical = false;
491
+
492
+ // Event listeners for drag and drop
493
+ uploadArea.addEventListener('click', () => fileInput.click());
494
+ uploadArea.addEventListener('dragover', (e) => {
495
+ e.preventDefault();
496
+ imageContainer.style.borderColor = var(--primary-color);
497
+ });
498
+ uploadArea.addEventListener('dragleave', () => {
499
+ imageContainer.style.borderColor = '#ddd';
500
+ });
501
+ uploadArea.addEventListener('drop', (e) => {
502
+ e.preventDefault();
503
+ imageContainer.style.borderColor = '#ddd';
504
+ if (e.dataTransfer.files.length) {
505
+ fileInput.files = e.dataTransfer.files;
506
+ handleImageUpload();
507
+ }
508
+ });
509
+ fileInput.addEventListener('change', handleImageUpload);
510
+
511
+ // Slider event listeners
512
+ brightnessSlider.addEventListener('input', updateSliderValues);
513
+ contrastSlider.addEventListener('input', updateSliderValues);
514
+ saturationSlider.addEventListener('input', updateSliderValues);
515
+ redSlider.addEventListener('input', updateSliderValues);
516
+ greenSlider.addEventListener('input', updateSliderValues);
517
+ blueSlider.addEventListener('input', updateSliderValues);
518
+ rotateSlider.addEventListener('input', updateSliderValues);
519
+
520
+ // Button event listeners
521
+ document.querySelectorAll('.filter-btn').forEach(btn => {
522
+ btn.addEventListener('click', applyFilter);
523
+ });
524
+
525
+ enhanceBtn.addEventListener('click', autoEnhance);
526
+ resetBtn.addEventListener('click', resetImage);
527
+ downloadBtn.addEventListener('click', downloadImage);
528
+ flipHBtn.addEventListener('click', () => {
529
+ flipHorizontal = !flipHorizontal;
530
+ applyChanges();
531
+ });
532
+ flipVBtn.addEventListener('click', () => {
533
+ flipVertical = !flipVertical;
534
+ applyChanges();
535
+ });
536
+
537
+ // Handle image upload
538
+ function handleImageUpload() {
539
+ const file = fileInput.files[0];
540
+ if (!file) return;
541
+
542
+ if (!file.type.match('image.*')) {
543
+ showStatus('Please select an image file', 'error');
544
+ return;
545
+ }
546
+
547
+ const reader = new FileReader();
548
+ reader.onload = function(e) {
549
+ uploadedImage.src = e.target.result;
550
+ uploadedImage.onload = function() {
551
+ uploadArea.style.display = 'none';
552
+ uploadedImage.style.display = 'block';
553
+
554
+ // Set canvas size to match image
555
+ canvas.width = uploadedImage.naturalWidth;
556
+ canvas.height = uploadedImage.naturalHeight;
557
+
558
+ // Draw original image to canvas and save original data
559
+ ctx.drawImage(uploadedImage, 0, 0);
560
+ originalImageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
561
+
562
+ showStatus('Image uploaded successfully!', 'success');
563
+ };
564
+ };
565
+ reader.readAsDataURL(file);
566
+ }
567
+
568
+ // Update slider value displays
569
+ function updateSliderValues() {
570
+ brightnessValue.textContent = brightnessSlider.value + '%';
571
+ contrastValue.textContent = contrastSlider.value + '%';
572
+ saturationValue.textContent = saturationSlider.value + '%';
573
+ redValue.textContent = redSlider.value;
574
+ greenValue.textContent = greenSlider.value;
575
+ blueValue.textContent = blueSlider.value;
576
+ rotateValue.textContent = rotateSlider.value + '°';
577
+
578
+ applyChanges();
579
+ }
580
+
581
+ // Apply all adjustments to the image
582
+ function applyChanges() {
583
+ if (!originalImageData) return;
584
+
585
+ // Restore original image data
586
+ ctx.putImageData(originalImageData, 0, 0);
587
+
588
+ // Apply filters
589
+ applyBrightnessContrast();
590
+ applyColorBalance();
591
+ applySaturation();
592
+
593
+ // Simple rotation (for demo purposes - would need more complex transformation for better quality)
594
+ if (rotateSlider.value != 0 || flipHorizontal || flipVertical) {
595
+ rotateImage();
596
+ }
597
+ }
598
+
599
+ // Apply brightness and contrast
600
+ function applyBrightnessContrast() {
601
+ const brightness = parseInt(brightnessSlider.value);
602
+ const contrast = parseInt(contrastSlider.value) / 100;
603
+
604
+ const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
605
+ const data = imageData.data;
606
+
607
+ // Apply brightness and contrast
608
+ const factor = (259 * (contrast * 255 + 255)) / (255 * (259 - contrast * 255));
609
+ for (let i = 0; i < data.length; i += 4) {
610
+ // Contrast
611
+ data[i] = factor * (data[i] - 128) + 128;
612
+ data[i+1] = factor * (data[i+1] - 128) + 128;
613
+ data[i+2] = factor * (data[i+2] - 128) + 128;
614
+
615
+ // Brightness
616
+ data[i] += brightness * 2.55;
617
+ data[i+1] += brightness * 2.55;
618
+ data[i+2] += brightness * 2.55;
619
+ }
620
+
621
+ ctx.putImageData(imageData, 0, 0);
622
+ }
623
+
624
+ // Apply color balance (red, green, blue)
625
+ function applyColorBalance() {
626
+ const red = parseInt(redSlider.value) / 100;
627
+ const green = parseInt(greenSlider.value) / 100;
628
+ const blue = parseInt(blueSlider.value) / 100;
629
+
630
+ const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
631
+ const data = imageData.data;
632
+
633
+ for (let i = 0; i < data.length; i += 4) {
634
+ // Red channel
635
+ data[i] = data[i] + (255 - data[i]) * red;
636
+
637
+ // Green channel
638
+ data[i+1] = data[i+1] + (255 - data[i+1]) * green;
639
+
640
+ // Blue channel
641
+ data[i+2] = data[i+2] + (255 - data[i+2]) * blue;
642
+ }
643
+
644
+ ctx.putImageData(imageData, 0, 0);
645
+ }
646
+
647
+ // Apply saturation
648
+ function applySaturation() {
649
+ const saturation = parseInt(saturationSlider.value) / 100;
650
+
651
+ const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
652
+ const data = imageData.data;
653
+
654
+ for (let i = 0; i < data.length; i += 4) {
655
+ const r = data[i];
656
+ const g = data[i+1];
657
+ const b = data[i+2];
658
+
659
+ // Calculate grayscale value
660
+ const gray = 0.299 * r + 0.587 * g + 0.114 * b;
661
+
662
+ // Apply saturation
663
+ data[i] = gray + (r - gray) * saturation;
664
+ data[i+1] = gray + (g - gray) * saturation;
665
+ data[i+2] = gray + (b - gray) * saturation;
666
+ }
667
+
668
+ ctx.putImageData(imageData, 0, 0);
669
+ }
670
+
671
+ // Rotate and flip image
672
+ function rotateImage() {
673
+ const angle = parseInt(rotateSlider.value);
674
+
675
+ // Save current canvas content
676
+ const tempCanvas = document.createElement('canvas');
677
+ tempCanvas.width = canvas.width;
678
+ tempCanvas.height = canvas.height;
679
+ const tempCtx = tempCanvas.getContext('2d');
680
+ tempCtx.drawImage(canvas, 0, 0);
681
+
682
+ // Clear canvas
683
+ ctx.clearRect(0, 0, canvas.width, canvas.height);
684
+
685
+ // Save context
686
+ ctx.save();
687
+
688
+ // Move to center of canvas
689
+ ctx.translate(canvas.width / 2, canvas.height / 2);
690
+
691
+ // Apply rotation
692
+ if (angle !== 0) {
693
+ ctx.rotate(angle * Math.PI / 180);
694
+ }
695
+
696
+ // Apply flips
697
+ let scaleX = 1;
698
+ let scaleY = 1;
699
+ if (flipHorizontal) scaleX = -1;
700
+ if (flipVertical) scaleY = -1;
701
+ ctx.scale(scaleX, scaleY);
702
+
703
+ // Draw image
704
+ ctx.drawImage(tempCanvas, -tempCanvas.width / 2, -tempCanvas.height / 2);
705
+
706
+ // Restore context
707
+ ctx.restore();
708
+ }
709
+
710
+ // Apply filter preset
711
+ function applyFilter(e) {
712
+ const filter = e.currentTarget.getAttribute('data-filter');
713
+
714
+ switch(filter) {
715
+ case 'vintage':
716
+ brightnessSlider.value = 10;
717
+ contrastSlider.value = 90;
718
+ saturationSlider.value = 60;
719
+ redSlider.value = 30;
720
+ greenSlider.value = -10;
721
+ blueSlider.value = -20;
722
+ break;
723
+ case 'blackWhite':
724
+ brightnessSlider.value = 5;
725
+ contrastSlider.value = 120;
726
+ saturationSlider.value = 0;
727
+ break;
728
+ case 'sepia':
729
+ brightnessSlider.value = 10;
730
+ contrastSlider.value = 90;
731
+ saturationSlider.value = 60;
732
+ redSlider.value = 40;
733
+ greenSlider.value = 20;
734
+ blueSlider.value = -40;
735
+ break;
736
+ case 'clarendon':
737
+ brightnessSlider.value = 5;
738
+ contrastSlider.value = 120;
739
+ saturationSlider.value = 110;
740
+ redSlider.value = 10;
741
+ greenSlider.value = 0;
742
+ blueSlider.value = 10;
743
+ break;
744
+ case 'lark':
745
+ brightnessSlider.value = 15;
746
+ contrastSlider.value = 110;
747
+ saturationSlider.value = 120;
748
+ redSlider.value = -10;
749
+ greenSlider.value = 5;
750
+ blueSlider.value = 25;
751
+ break;
752
+ case 'moon':
753
+ brightnessSlider.value = 0;
754
+ contrastSlider.value = 130;
755
+ saturationSlider.value = 0;
756
+ redSlider.value = 0;
757
+ greenSlider.value = 0;
758
+ blueSlider.value = 30;
759
+ break;
760
+ case 'willow':
761
+ brightnessSlider.value = 10;
762
+ contrastSlider.value = 90;
763
+ saturationSlider.value = 80;
764
+ redSlider.value = -15;
765
+ greenSlider.value = 20;
766
+ blueSlider.value = -20;
767
+ break;
768
+ case 'none':
769
+ default:
770
+ brightnessSlider.value = 0;
771
+ contrastSlider.value = 100;
772
+ saturationSlider.value = 100;
773
+ redSlider.value = 0;
774
+ greenSlider.value = 0;
775
+ blueSlider.value = 0;
776
+ }
777
+
778
+ updateSliderValues();
779
+ applyChanges();
780
+
781
+ // Highlight selected filter
782
+ document.querySelectorAll('.filter-btn').forEach(btn => {
783
+ btn.style.borderColor = btn === e.currentTarget ? var(--primary-color) : '#ddd';
784
+ });
785
+ }
786
+
787
+ // Auto enhance image
788
+ function autoEnhance() {
789
+ brightnessSlider.value = 15;
790
+ contrastSlider.value = 115;
791
+ saturationSlider.value = 110;
792
+ redSlider.value = 5;
793
+ greenSlider.value = 0;
794
+ blueSlider.value = 0;
795
+
796
+ updateSliderValues();
797
+ applyChanges();
798
+
799
+ showStatus('Image auto-enhanced!', 'success');
800
+ }
801
+
802
+ // Reset image to original
803
+ function resetImage() {
804
+ brightnessSlider.value = 0;
805
+ contrastSlider.value = 100;
806
+ saturationSlider.value = 100;
807
+ redSlider.value = 0;
808
+ greenSlider.value = 0;
809
+ blueSlider.value = 0;
810
+ rotateSlider.value = 0;
811
+ flipHorizontal = false;
812
+ flipVertical = false;
813
+
814
+ updateSliderValues();
815
+
816
+ if (originalImageData) {
817
+ ctx.putImageData(originalImageData, 0, 0);
818
+ }
819
+
820
+ // Reset filter selection
821
+ document.querySelectorAll('.filter-btn').forEach(btn => {
822
+ btn.style.borderColor = '#ddd';
823
+ });
824
+
825
+ showStatus('Image reset to original', 'success');
826
+ }
827
+
828
+ // Download enhanced image
829
+ function downloadImage() {
830
+ if (!originalImageData) {
831
+ showStatus('No image to download', 'error');
832
+ return;
833
+ }
834
+
835
+ // Create a temporary canvas for final processing
836
+ const tempCanvas = document.createElement('canvas');
837
+ tempCanvas.width = canvas.width;
838
+ tempCanvas.height = canvas.height;
839
+ const tempCtx = tempCanvas.getContext('2d');
840
+ tempCtx.drawImage(canvas, 0, 0);
841
+
842
+ // Convert to data URL and create download link
843
+ const dataURL = tempCanvas.toDataURL('image/jpeg', 0.9);
844
+ const link = document.createElement('a');
845
+ link.download = 'enhanced-photo.jpg';
846
+ link.href = dataURL;
847
+ link.click();
848
+
849
+ showStatus('Image downloaded successfully!', 'success');
850
+ }
851
+
852
+ // Show status message
853
+ function showStatus(message, type) {
854
+ statusMessage.textContent = message;
855
+ statusMessage.className = 'status-message ' + type;
856
+ statusMessage.style.display = 'block';
857
+
858
+ // Hide after 3 seconds
859
+ setTimeout(() => {
860
+ statusMessage.style.display = 'none';
861
+ }, 3000);
862
+ }
863
+ });
864
+ </script>
865
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <a href="https://enzostvs-deepsite.hf.space" style="color: #fff;" target="_blank" >DeepSite</a> <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;"></p></body>
866
+ </html>