Hugging Face's logo

Spaces:
6ee5ali
/
face-blury
Running

App Files Community
6ee5ali commited on
Commit
3569cc7
·
verified ·
1 Parent(s): 81af85a

undefined - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +246 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Face Blury
3
- emoji: 🐢
4
- colorFrom: indigo
5
- colorTo: indigo
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: face-blury
3
+ emoji: 🐳
4
+ colorFrom: pink
5
+ colorTo: green
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,246 @@
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="ar" dir="rtl">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>استعادة الوجه المطموس</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
+ @import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700&display=swap');
11
+
12
+ body {
13
+ font-family: 'Tajawal', sans-serif;
14
+ background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
15
+ }
16
+
17
+ .image-container {
18
+ transition: all 0.3s ease;
19
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
20
+ }
21
+
22
+ .image-container:hover {
23
+ transform: translateY(-5px);
24
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
25
+ }
26
+
27
+ .btn {
28
+ transition: all 0.3s ease;
29
+ }
30
+
31
+ .btn:hover {
32
+ transform: scale(1.05);
33
+ }
34
+
35
+ canvas {
36
+ border-radius: 0.5rem;
37
+ background-color: #f8fafc;
38
+ }
39
+ </style>
40
+ </head>
41
+ <body class="min-h-screen py-8 px-4">
42
+ <div class="max-w-6xl mx-auto">
43
+ <!-- Header -->
44
+ <header class="text-center mb-12">
45
+ <h1 class="text-4xl font-bold text-gray-800 mb-2">استعادة الوجه المطموس</h1>
46
+ <p class="text-lg text-gray-600">أداة ذكاء اصطناعي لاستعادة الوجوه المطموسة في الصور</p>
47
+ </header>
48
+
49
+ <!-- Main Content -->
50
+ <div class="bg-white rounded-xl shadow-xl p-6 mb-8">
51
+ <!-- Controls -->
52
+ <div class="flex flex-col md:flex-row justify-center items-center gap-4 mb-8">
53
+ <button id="loadBtn" class="btn bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-lg flex items-center gap-2">
54
+ <i class="fas fa-image"></i>
55
+ تحميل الصورة
56
+ </button>
57
+ <button id="restoreBtn" class="btn bg-green-600 hover:bg-green-700 text-white px-6 py-3 rounded-lg flex items-center gap-2" disabled>
58
+ <i class="fas fa-magic"></i>
59
+ استعادة الوجه
60
+ </button>
61
+ <input type="file" id="fileInput" class="hidden" accept="image/*">
62
+ </div>
63
+
64
+ <!-- Image Comparison -->
65
+ <div class="flex flex-col lg:flex-row gap-8 justify-center items-center">
66
+ <!-- Original Image -->
67
+ <div class="image-container bg-gray-50 p-4 rounded-xl">
68
+ <h3 class="text-xl font-semibold text-center mb-4 text-gray-700">الصورة الأصلية</h3>
69
+ <div class="relative">
70
+ <canvas id="beforeCanvas" width="300" height="300" class="border border-gray-200"></canvas>
71
+ <div id="beforePlaceholder" class="absolute inset-0 flex items-center justify-center bg-gray-100 text-gray-400">
72
+ <div class="text-center">
73
+ <i class="fas fa-image text-4xl mb-2"></i>
74
+ <p>سيتم عرض الصورة هنا</p>
75
+ </div>
76
+ </div>
77
+ </div>
78
+ </div>
79
+
80
+ <!-- Comparison Arrow -->
81
+ <div class="flex items-center justify-center text-4xl text-gray-400">
82
+ <i class="fas fa-arrow-left lg:rotate-0 rotate-90"></i>
83
+ </div>
84
+
85
+ <!-- Restored Image -->
86
+ <div class="image-container bg-gray-50 p-4 rounded-xl">
87
+ <h3 class="text-xl font-semibold text-center mb-4 text-gray-700">الصورة المستعادة</h3>
88
+ <div class="relative">
89
+ <canvas id="afterCanvas" width="300" height="300" class="border border-gray-200"></canvas>
90
+ <div id="afterPlaceholder" class="absolute inset-0 flex items-center justify-center bg-gray-100 text-gray-400">
91
+ <div class="text-center">
92
+ <i class="fas fa-magic text-4xl mb-2"></i>
93
+ <p>سيتم عرض ��لنتيجة هنا</p>
94
+ </div>
95
+ </div>
96
+ </div>
97
+ </div>
98
+ </div>
99
+ </div>
100
+
101
+ <!-- Info Section -->
102
+ <div class="bg-white rounded-xl shadow-xl p-6">
103
+ <h2 class="text-2xl font-bold text-gray-800 mb-4">كيف تعمل الأداة؟</h2>
104
+ <div class="grid md:grid-cols-3 gap-6">
105
+ <div class="bg-blue-50 p-4 rounded-lg">
106
+ <div class="text-blue-600 text-2xl mb-2">
107
+ <i class="fas fa-upload"></i>
108
+ </div>
109
+ <h3 class="font-semibold text-lg mb-2">1. تحميل الصورة</h3>
110
+ <p class="text-gray-600">قم بتحميل الصورة التي تحتوي على وجه مطموس أو غير واضح</p>
111
+ </div>
112
+ <div class="bg-purple-50 p-4 rounded-lg">
113
+ <div class="text-purple-600 text-2xl mb-2">
114
+ <i class="fas fa-cogs"></i>
115
+ </div>
116
+ <h3 class="font-semibold text-lg mb-2">2. معالجة الذكاء الاصطناعي</h3>
117
+ <p class="text-gray-600">يقوم نظامنا بتحليل الصورة واستعادة الوجه باستخدام خوارزميات متقدمة</p>
118
+ </div>
119
+ <div class="bg-green-50 p-4 rounded-lg">
120
+ <div class="text-green-600 text-2xl mb-2">
121
+ <i class="fas fa-download"></i>
122
+ </div>
123
+ <h3 class="font-semibold text-lg mb-2">3. الحصول على النتيجة</h3>
124
+ <p class="text-gray-600">احصل على الصورة مع الوجه المستعاد وحفظها على جهازك</p>
125
+ </div>
126
+ </div>
127
+ </div>
128
+ </div>
129
+
130
+ <script>
131
+ document.addEventListener('DOMContentLoaded', function() {
132
+ const loadBtn = document.getElementById('loadBtn');
133
+ const restoreBtn = document.getElementById('restoreBtn');
134
+ const fileInput = document.getElementById('fileInput');
135
+ const beforeCanvas = document.getElementById('beforeCanvas');
136
+ const afterCanvas = document.getElementById('afterCanvas');
137
+ const beforePlaceholder = document.getElementById('beforePlaceholder');
138
+ const afterPlaceholder = document.getElementById('afterPlaceholder');
139
+
140
+ let originalImage = null;
141
+
142
+ // Load image button click handler
143
+ loadBtn.addEventListener('click', function() {
144
+ fileInput.click();
145
+ });
146
+
147
+ // File input change handler
148
+ fileInput.addEventListener('change', function(e) {
149
+ if (e.target.files && e.target.files[0]) {
150
+ const reader = new FileReader();
151
+
152
+ reader.onload = function(event) {
153
+ originalImage = new Image();
154
+ originalImage.onload = function() {
155
+ // Display original image
156
+ displayImage(originalImage, beforeCanvas);
157
+ beforePlaceholder.style.display = 'none';
158
+
159
+ // Enable restore button
160
+ restoreBtn.disabled = false;
161
+ };
162
+ originalImage.src = event.target.result;
163
+ };
164
+
165
+ reader.readAsDataURL(e.target.files[0]);
166
+ }
167
+ });
168
+
169
+ // Restore button click handler
170
+ restoreBtn.addEventListener('click', function() {
171
+ if (originalImage) {
172
+ // Simulate restoration process (in a real app, this would call an API)
173
+ afterPlaceholder.style.display = 'none';
174
+
175
+ // Show loading state
176
+ const loadingText = document.createElement('div');
177
+ loadingText.className = 'absolute inset-0 flex items-center justify-center bg-black bg-opacity-50 text-white';
178
+ loadingText.innerHTML = '<div class="text-center"><i class="fas fa-spinner fa-spin text-3xl mb-2"></i><p>جاري معالجة الصورة...</p></div>';
179
+ afterCanvas.parentNode.appendChild(loadingText);
180
+
181
+ // Simulate API delay
182
+ setTimeout(() => {
183
+ // For demo purposes, we'll just copy the original image
184
+ // In a real app, you would call your face restoration API here
185
+ displayImage(originalImage, afterCanvas);
186
+
187
+ // Remove loading state
188
+ afterCanvas.parentNode.removeChild(loadingText);
189
+
190
+ // Show success message
191
+ const successToast = document.createElement('div');
192
+ successToast.className = 'fixed bottom-4 left-4 right-4 md:left-auto md:right-4 bg-green-500 text-white px-6 py-3 rounded-lg shadow-lg flex items-center justify-between max-w-md mx-auto';
193
+ successToast.innerHTML = `
194
+ <div class="flex items-center gap-2">
195
+ <i class="fas fa-check-circle"></i>
196
+ <span>تم استعادة الوجه بنجاح!</span>
197
+ </div>
198
+ <button onclick="this.parentNode.remove()" class="text-white hover:text-gray-200">
199
+ <i class="fas fa-times"></i>
200
+ </button>
201
+ `;
202
+ document.body.appendChild(successToast);
203
+
204
+ // Auto-remove toast after 5 seconds
205
+ setTimeout(() => {
206
+ if (successToast.parentNode) {
207
+ successToast.parentNode.removeChild(successToast);
208
+ }
209
+ }, 5000);
210
+
211
+ }, 2000);
212
+ }
213
+ });
214
+
215
+ // Helper function to display image on canvas
216
+ function displayImage(image, canvas) {
217
+ const ctx = canvas.getContext('2d');
218
+
219
+ // Calculate dimensions to maintain aspect ratio
220
+ const maxWidth = canvas.width;
221
+ const maxHeight = canvas.height;
222
+ let width = image.width;
223
+ let height = image.height;
224
+
225
+ if (width > maxWidth) {
226
+ const ratio = maxWidth / width;
227
+ width = maxWidth;
228
+ height = height * ratio;
229
+ }
230
+
231
+ if (height > maxHeight) {
232
+ const ratio = maxHeight / height;
233
+ height = maxHeight;
234
+ width = width * ratio;
235
+ }
236
+
237
+ // Clear canvas and draw image
238
+ ctx.clearRect(0, 0, canvas.width, canvas.height);
239
+ const x = (canvas.width - width) / 2;
240
+ const y = (canvas.height - height) / 2;
241
+ ctx.drawImage(image, x, y, width, height);
242
+ }
243
+ });
244
+ </script>
245
+ <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 <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=6ee5ali/face-blury" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
246
+ </html>