Hugging Face's logo

Spaces:
Rogerjs
/
haircut-advisor
Running

App Files Community
Rogerjs commited on
Commit
df67c6a
·
verified ·
1 Parent(s): 40323fc

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +448 -19
  3. prompts.txt +0 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Haircut Advisor
3
- emoji: 🏢
4
- colorFrom: green
5
- colorTo: green
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: haircut-advisor
3
+ emoji: 🐳
4
+ colorFrom: red
5
+ colorTo: pink
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,448 @@
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>Haircut Advisor - Find Your Perfect Style</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
+ .face-outline {
11
+ position: relative;
12
+ width: 300px;
13
+ height: 400px;
14
+ border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
15
+ background: #f3e7d3;
16
+ margin: 0 auto;
17
+ box-shadow: 0 10px 25px rgba(0,0,0,0.2);
18
+ }
19
+
20
+ .face-landmark {
21
+ position: absolute;
22
+ background: rgba(255,0,0,0.3);
23
+ border-radius: 50%;
24
+ }
25
+
26
+ .face-shape-indicator {
27
+ position: absolute;
28
+ border: 2px dashed #4f46e5;
29
+ border-radius: 50%;
30
+ }
31
+
32
+ .hair-preview {
33
+ position: absolute;
34
+ width: 100%;
35
+ height: 100%;
36
+ top: 0;
37
+ left: 0;
38
+ z-index: 10;
39
+ pointer-events: none;
40
+ }
41
+
42
+ .result-card {
43
+ transition: all 0.3s ease;
44
+ }
45
+
46
+ .result-card:hover {
47
+ transform: translateY(-5px);
48
+ box-shadow: 0 15px 30px rgba(0,0,0,0.15);
49
+ }
50
+
51
+ #previewCanvas {
52
+ display: none;
53
+ }
54
+
55
+ .upload-area {
56
+ border: 2px dashed #cbd5e1;
57
+ transition: all 0.3s ease;
58
+ }
59
+
60
+ .upload-area:hover {
61
+ border-color: #818cf8;
62
+ background-color: #f8fafc;
63
+ }
64
+
65
+ .upload-area.dragover {
66
+ border-color: #4f46e5;
67
+ background-color: #eef2ff;
68
+ }
69
+ </style>
70
+ </head>
71
+ <body class="bg-gray-50 min-h-screen">
72
+ <div class="container mx-auto px-4 py-12">
73
+ <!-- Header -->
74
+ <header class="text-center mb-12">
75
+ <h1 class="text-4xl md:text-5xl font-bold text-indigo-800 mb-3">Haircut Advisor</h1>
76
+ <p class="text-lg text-gray-600 max-w-2xl mx-auto">Upload your photo and discover the perfect hairstyle that complements your facial features and proportions.</p>
77
+ </header>
78
+
79
+ <!-- Main Content -->
80
+ <div class="flex flex-col lg:flex-row gap-8">
81
+ <!-- Upload Section -->
82
+ <div class="lg:w-1/2 bg-white rounded-xl shadow-md p-6">
83
+ <h2 class="text-2xl font-semibold text-gray-800 mb-6">Analyze Your Face</h2>
84
+
85
+ <div id="uploadArea" class="upload-area rounded-lg p-8 text-center cursor-pointer mb-6">
86
+ <div class="flex flex-col items-center justify-center">
87
+ <i class="fas fa-cloud-upload-alt text-4xl text-indigo-500 mb-3"></i>
88
+ <p class="text-gray-600 mb-2">Drag & drop your photo here</p>
89
+ <p class="text-sm text-gray-500 mb-4">or</p>
90
+ <label for="fileInput" class="bg-indigo-600 hover:bg-indigo-700 text-white font-medium py-2 px-6 rounded-full cursor-pointer transition">
91
+ Browse Files
92
+ </label>
93
+ <input id="fileInput" type="file" accept="image/*" class="hidden">
94
+ </div>
95
+ </div>
96
+
97
+ <div id="facePreview" class="hidden">
98
+ <div class="flex flex-col md:flex-row gap-6 items-center">
99
+ <div class="relative">
100
+ <div class="face-outline">
101
+ <canvas id="previewCanvas" width="300" height="400"></canvas>
102
+ <div id="faceLandmarks" class="hair-preview"></div>
103
+ </div>
104
+ </div>
105
+
106
+ <div class="flex-1">
107
+ <h3 class="text-xl font-medium text-gray-800 mb-3">Facial Analysis</h3>
108
+ <div id="faceStats" class="space-y-3">
109
+ <!-- Will be populated by JS -->
110
+ </div>
111
+ </div>
112
+ </div>
113
+
114
+ <button id="analyzeBtn" class="mt-6 w-full bg-indigo-600 hover:bg-indigo-700 text-white font-medium py-3 px-6 rounded-lg transition">
115
+ <i class="fas fa-magic mr-2"></i> Suggest Hairstyles
116
+ </button>
117
+ </div>
118
+ </div>
119
+
120
+ <!-- Results Section -->
121
+ <div class="lg:w-1/2">
122
+ <div id="resultsContainer" class="hidden bg-white rounded-xl shadow-md p-6">
123
+ <h2 class="text-2xl font-semibold text-gray-800 mb-6">Recommended Hairstyles</h2>
124
+
125
+ <div id="faceShapeInfo" class="mb-6 p-4 bg-indigo-50 rounded-lg">
126
+ <h3 class="text-lg font-medium text-indigo-800 mb-2">Your Face Shape: <span id="faceShapeLabel" class="font-bold">Oval</span></h3>
127
+ <p id="faceShapeDesc" class="text-gray-700">Based on your facial proportions, these hairstyles will best complement your features.</p>
128
+ </div>
129
+
130
+ <div id="resultsGrid" class="grid grid-cols-1 md:grid-cols-2 gap-4">
131
+ <!-- Will be populated by JS -->
132
+ </div>
133
+ </div>
134
+
135
+ <div id="instructions" class="bg-white rounded-xl shadow-md p-6">
136
+ <h2 class="text-2xl font-semibold text-gray-800 mb-4">How It Works</h2>
137
+ <ol class="space-y-4">
138
+ <li class="flex items-start">
139
+ <span class="flex items-center justify-center bg-indigo-100 text-indigo-800 rounded-full w-6 h-6 mr-3 font-medium">1</span>
140
+ <span>Upload a clear front-facing photo with good lighting</span>
141
+ </li>
142
+ <li class="flex items-start">
143
+ <span class="flex items-center justify-center bg-indigo-100 text-indigo-800 rounded-full w-6 h-6 mr-3 font-medium">2</span>
144
+ <span>Our system analyzes your facial proportions and shape</span>
145
+ </li>
146
+ <li class="flex items-start">
147
+ <span class="flex items-center justify-center bg-indigo-100 text-indigo-800 rounded-full w-6 h-6 mr-3 font-medium">3</span>
148
+ <span>Get personalized hairstyle recommendations based on your features</span>
149
+ </li>
150
+ </ol>
151
+
152
+ <div class="mt-8 p-4 bg-yellow-50 rounded-lg border border-yellow-200">
153
+ <h3 class="text-lg font-medium text-yellow-800 mb-2"><i class="fas fa-lightbulb mr-2"></i> Pro Tip</h3>
154
+ <p class="text-yellow-700">For best results, remove glasses and pull hair back to clearly show your facial structure.</p>
155
+ </div>
156
+ </div>
157
+ </div>
158
+ </div>
159
+ </div>
160
+
161
+ <script>
162
+ document.addEventListener('DOMContentLoaded', function() {
163
+ // DOM Elements
164
+ const fileInput = document.getElementById('fileInput');
165
+ const uploadArea = document.getElementById('uploadArea');
166
+ const facePreview = document.getElementById('facePreview');
167
+ const previewCanvas = document.getElementById('previewCanvas');
168
+ const faceLandmarks = document.getElementById('faceLandmarks');
169
+ const faceStats = document.getElementById('faceStats');
170
+ const analyzeBtn = document.getElementById('analyzeBtn');
171
+ const resultsContainer = document.getElementById('resultsContainer');
172
+ const resultsGrid = document.getElementById('resultsGrid');
173
+ const faceShapeLabel = document.getElementById('faceShapeLabel');
174
+ const faceShapeDesc = document.getElementById('faceShapeDesc');
175
+ const instructions = document.getElementById('instructions');
176
+
177
+ // Drag and drop functionality
178
+ uploadArea.addEventListener('dragover', (e) => {
179
+ e.preventDefault();
180
+ uploadArea.classList.add('dragover');
181
+ });
182
+
183
+ uploadArea.addEventListener('dragleave', () => {
184
+ uploadArea.classList.remove('dragover');
185
+ });
186
+
187
+ uploadArea.addEventListener('drop', (e) => {
188
+ e.preventDefault();
189
+ uploadArea.classList.remove('dragover');
190
+ if (e.dataTransfer.files.length) {
191
+ fileInput.files = e.dataTransfer.files;
192
+ handleFileUpload(e.dataTransfer.files[0]);
193
+ }
194
+ });
195
+
196
+ // File input change handler
197
+ fileInput.addEventListener('change', () => {
198
+ if (fileInput.files.length) {
199
+ handleFileUpload(fileInput.files[0]);
200
+ }
201
+ });
202
+
203
+ // Analyze button click handler
204
+ analyzeBtn.addEventListener('click', analyzeFaceAndSuggestHairstyles);
205
+
206
+ // Handle file upload
207
+ function handleFileUpload(file) {
208
+ if (!file.type.match('image.*')) {
209
+ alert('Please upload an image file.');
210
+ return;
211
+ }
212
+
213
+ const reader = new FileReader();
214
+ reader.onload = function(e) {
215
+ // Show preview
216
+ const img = new Image();
217
+ img.onload = function() {
218
+ const ctx = previewCanvas.getContext('2d');
219
+
220
+ // Calculate dimensions to fit in canvas while maintaining aspect ratio
221
+ const hRatio = previewCanvas.width / img.width;
222
+ const vRatio = previewCanvas.height / img.height;
223
+ const ratio = Math.min(hRatio, vRatio);
224
+
225
+ const centerShiftX = (previewCanvas.width - img.width * ratio) / 2;
226
+ const centerShiftY = (previewCanvas.height - img.height * ratio) / 2;
227
+
228
+ ctx.clearRect(0, 0, previewCanvas.width, previewCanvas.height);
229
+ ctx.drawImage(img, 0, 0, img.width, img.height,
230
+ centerShiftX, centerShiftY, img.width * ratio, img.height * ratio);
231
+
232
+ // Show the preview section
233
+ facePreview.classList.remove('hidden');
234
+ uploadArea.classList.add('hidden');
235
+
236
+ // Simulate face detection (in a real app, you'd use a face detection API)
237
+ simulateFaceDetection();
238
+ };
239
+ img.src = e.target.result;
240
+ };
241
+ reader.readAsDataURL(file);
242
+ }
243
+
244
+ // Simulate face detection (in a real app, replace with actual face detection)
245
+ function simulateFaceDetection() {
246
+ // Generate random facial proportions for demo purposes
247
+ const faceWidth = 0.7 + Math.random() * 0.1;
248
+ const faceLength = 1.0 + Math.random() * 0.2;
249
+ const foreheadHeight = 0.3 + Math.random() * 0.1;
250
+ const cheekboneWidth = 0.6 + Math.random() * 0.1;
251
+ const jawWidth = 0.5 + Math.random() * 0.15;
252
+
253
+ // Calculate ratios
254
+ const lengthToWidthRatio = faceLength / faceWidth;
255
+ const jawToCheekRatio = jawWidth / cheekboneWidth;
256
+
257
+ // Display facial analysis
258
+ faceStats.innerHTML = `
259
+ <div class="flex justify-between">
260
+ <span class="text-gray-600">Face Length/Width Ratio:</span>
261
+ <span class="font-medium">${lengthToWidthRatio.toFixed(2)}</span>
262
+ </div>
263
+ <div class="flex justify-between">
264
+ <span class="text-gray-600">Jaw/Cheekbone Ratio:</span>
265
+ <span class="font-medium">${jawToCheekRatio.toFixed(2)}</span>
266
+ </div>
267
+ <div class="flex justify-between">
268
+ <span class="text-gray-600">Forehead Height:</span>
269
+ <span class="font-medium">${(foreheadHeight * 100).toFixed(0)}%</span>
270
+ </div>
271
+ <div class="flex justify-between">
272
+ <span class="text-gray-600">Cheekbone Prominence:</span>
273
+ <span class="font-medium">${(cheekboneWidth * 100).toFixed(0)}%</span>
274
+ </div>
275
+ `;
276
+
277
+ // Add simulated face landmarks
278
+ faceLandmarks.innerHTML = '';
279
+
280
+ // Forehead
281
+ addLandmark(150, 80, 60, 30, 'Forehead');
282
+
283
+ // Eyes
284
+ addLandmark(110, 150, 40, 20, 'Left Eye');
285
+ addLandmark(190, 150, 40, 20, 'Right Eye');
286
+
287
+ // Nose
288
+ addLandmark(150, 200, 20, 40, 'Nose');
289
+
290
+ // Mouth
291
+ addLandmark(150, 250, 50, 15, 'Mouth');
292
+
293
+ // Jawline
294
+ addLandmark(100, 300, 20, 20, 'Jaw');
295
+ addLandmark(200, 300, 20, 20, 'Jaw');
296
+
297
+ // Face shape indicator
298
+ const shapeIndicator = document.createElement('div');
299
+ shapeIndicator.className = 'face-shape-indicator';
300
+ shapeIndicator.style.width = `${faceWidth * 200}px`;
301
+ shapeIndicator.style.height = `${faceLength * 300}px`;
302
+ shapeIndicator.style.left = `${150 - (faceWidth * 200)/2}px`;
303
+ shapeIndicator.style.top = `${100 - (faceLength * 300)/4}px`;
304
+ faceLandmarks.appendChild(shapeIndicator);
305
+ }
306
+
307
+ function addLandmark(left, top, width, height, label) {
308
+ const landmark = document.createElement('div');
309
+ landmark.className = 'face-landmark';
310
+ landmark.style.width = `${width}px`;
311
+ landmark.style.height = `${height}px`;
312
+ landmark.style.left = `${left - width/2}px`;
313
+ landmark.style.top = `${top - height/2}px`;
314
+ landmark.title = label;
315
+ faceLandmarks.appendChild(landmark);
316
+ }
317
+
318
+ // Analyze face and suggest hairstyles
319
+ function analyzeFaceAndSuggestHairstyles() {
320
+ // Show loading state
321
+ analyzeBtn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> Analyzing...';
322
+ analyzeBtn.disabled = true;
323
+
324
+ // Simulate API call delay
325
+ setTimeout(() => {
326
+ // Determine face shape (simplified for demo)
327
+ const faceShapes = [
328
+ { name: 'Oval', desc: 'Oval faces are well-balanced and versatile. Most hairstyles work well with this shape.' },
329
+ { name: 'Round', desc: 'Round faces benefit from hairstyles that add height and length to create the illusion of a more oval shape.' },
330
+ { name: 'Square', desc: 'Square faces look great with styles that soften the angular jawline.' },
331
+ { name: 'Heart', desc: 'Heart-shaped faces suit styles that balance the wider forehead with the narrower chin.' },
332
+ { name: 'Long', desc: 'Long faces benefit from styles that add width and volume to the sides.' }
333
+ ];
334
+
335
+ const randomShape = faceShapes[Math.floor(Math.random() * faceShapes.length)];
336
+ faceShapeLabel.textContent = randomShape.name;
337
+ faceShapeDesc.textContent = randomShape.desc;
338
+
339
+ // Generate hairstyle suggestions
340
+ const hairstyles = getHairstyleSuggestions(randomShape.name);
341
+
342
+ // Display results
343
+ resultsGrid.innerHTML = '';
344
+ hairstyles.forEach(style => {
345
+ const card = document.createElement('div');
346
+ card.className = 'result-card bg-white rounded-lg overflow-hidden shadow-md border border-gray-100';
347
+ card.innerHTML = `
348
+ <div class="h-48 bg-gray-200 relative overflow-hidden">
349
+ <img src="${style.image}" alt="${style.name}" class="w-full h-full object-cover">
350
+ <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/70 to-transparent p-3">
351
+ <h3 class="text-white font-semibold">${style.name}</h3>
352
+ </div>
353
+ </div>
354
+ <div class="p-4">
355
+ <p class="text-gray-600 text-sm mb-3">${style.description}</p>
356
+ <div class="flex justify-between items-center">
357
+ <span class="text-xs px-2 py-1 rounded-full ${style.difficulty === 'Easy' ? 'bg-green-100 text-green-800' :
358
+ style.difficulty === 'Medium' ? 'bg-yellow-100 text-yellow-800' : 'bg-purple-100 text-purple-800'}">
359
+ ${style.difficulty}
360
+ </span>
361
+ <button class="text-xs text-indigo-600 hover:text-indigo-800 font-medium">
362
+ <i class="far fa-save mr-1"></i> Save
363
+ </button>
364
+ </div>
365
+ </div>
366
+ `;
367
+ resultsGrid.appendChild(card);
368
+ });
369
+
370
+ // Show results
371
+ resultsContainer.classList.remove('hidden');
372
+ instructions.classList.add('hidden');
373
+
374
+ // Reset button
375
+ analyzeBtn.innerHTML = '<i class="fas fa-magic mr-2"></i> Suggest Hairstyles';
376
+ analyzeBtn.disabled = false;
377
+ }, 1500);
378
+ }
379
+
380
+ // Get hairstyle suggestions based on face shape
381
+ function getHairstyleSuggestions(faceShape) {
382
+ // Base hairstyles
383
+ const allHairstyles = [
384
+ {
385
+ name: "Classic Layers",
386
+ description: "Face-framing layers that add movement and texture while maintaining a polished look.",
387
+ difficulty: "Medium",
388
+ suits: ["Oval", "Round", "Heart"],
389
+ image: "https://images.unsplash.com/photo-1595476108010-b4d1f102b1b1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80"
390
+ },
391
+ {
392
+ name: "Blunt Bob",
393
+ description: "A sharp, clean-cut bob that emphasizes jawlines and works well with straight hair.",
394
+ difficulty: "Easy",
395
+ suits: ["Square", "Oval"],
396
+ image: "https://images.unsplash.com/photo-1534528741775-53994a69daeb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80"
397
+ },
398
+ {
399
+ name: "Long with Side Bangs",
400
+ description: "Soft side bangs that gracefully frame the face and draw attention to the eyes.",
401
+ difficulty: "Easy",
402
+ suits: ["Square", "Long", "Heart"],
403
+ image: "https://images.unsplash.com/photo-1529626455594-4ff0802cfb7e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80"
404
+ },
405
+ {
406
+ name: "Pixie Cut",
407
+ description: "A short, chic cut that highlights facial features and works well with delicate bone structure.",
408
+ difficulty: "Medium",
409
+ suits: ["Heart", "Oval", "Round"],
410
+ image: "https://images.unsplash.com/photo-1519699047748-de8e457a634e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80"
411
+ },
412
+ {
413
+ name: "Shag with Curtain Bangs",
414
+ description: "A textured shag cut with face-framing curtain bangs for a modern, effortless look.",
415
+ difficulty: "Medium",
416
+ suits: ["Oval", "Round", "Square"],
417
+ image: "https://images.unsplash.com/photo-1515886657613-9f3515b0c78f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80"
418
+ },
419
+ {
420
+ name: "Asymmetrical Lob",
421
+ description: "A longer bob cut with asymmetrical lines that add interest and balance to facial features.",
422
+ difficulty: "Hard",
423
+ suits: ["Square", "Heart", "Oval"],
424
+ image: "https://images.unsplash.com/photo-1544005313-94ddf0286df2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80"
425
+ },
426
+ {
427
+ name: "Voluminous Curls",
428
+ description: "Full, bouncy curls that add width and balance to longer face shapes.",
429
+ difficulty: "Medium",
430
+ suits: ["Long", "Oval", "Square"],
431
+ image: "https://images.unsplash.com/photo-1492106087820-71f1a00d2b11?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80"
432
+ },
433
+ {
434
+ name: "Textured Crop",
435
+ description: "A short, textured cut with piece-y layers for a modern, edgy look.",
436
+ difficulty: "Hard",
437
+ suits: ["Round", "Oval", "Heart"],
438
+ image: "https://images.unsplash.com/photo-1517841905240-472988babdf9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80"
439
+ }
440
+ ];
441
+
442
+ // Filter hairstyles that suit the face shape
443
+ return allHairstyles.filter(style => style.suits.includes(faceShape));
444
+ }
445
+ });
446
+ </script>
447
+ <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=Rogerjs/haircut-advisor" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
448
+ </html>
prompts.txt ADDED
File without changes