Hugging Face's logo

Spaces:
XOFSOUNDIA
/
youtube-miniature
Running

App Files Community
XOFSOUNDIA commited on
Commit
e84d6f5
·
verified ·
1 Parent(s): eaa4b9e

undefined - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +343 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Youtube Miniature
3
- emoji: 💻
4
- colorFrom: red
5
- colorTo: pink
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: youtube-miniature
3
+ emoji: 🐳
4
+ colorFrom: pink
5
+ colorTo: red
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,343 @@
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="fr">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>YouTube Thumbnail Enhancer</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
+ <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
10
+ <style>
11
+ .gradient-bg {
12
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
13
+ }
14
+ .thumbnail-container {
15
+ transition: all 0.3s ease;
16
+ }
17
+ .thumbnail-container:hover {
18
+ transform: translateY(-5px);
19
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
20
+ }
21
+ .enhanced-thumbnail {
22
+ border: 3px solid #4f46e5;
23
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2);
24
+ }
25
+ .loading-spinner {
26
+ border-top-color: #4f46e5;
27
+ animation: spin 1s linear infinite;
28
+ }
29
+ @keyframes spin {
30
+ 0% { transform: rotate(0deg); }
31
+ 100% { transform: rotate(360deg); }
32
+ }
33
+ </style>
34
+ </head>
35
+ <body class="bg-gray-100 min-h-screen">
36
+ <header class="gradient-bg text-white py-8">
37
+ <div class="container mx-auto px-4">
38
+ <div class="flex flex-col md:flex-row justify-between items-center">
39
+ <div class="mb-6 md:mb-0">
40
+ <h1 class="text-3xl md:text-4xl font-bold mb-2">YouTube Thumbnail Enhancer</h1>
41
+ <p class="text-lg opacity-90">Analysez et améliorez vos miniatures YouTube en un clic</p>
42
+ </div>
43
+ <div class="flex items-center space-x-4">
44
+ <div class="bg-white bg-opacity-20 p-3 rounded-full">
45
+ <i class="fab fa-youtube text-3xl"></i>
46
+ </div>
47
+ </div>
48
+ </div>
49
+ </div>
50
+ </header>
51
+
52
+ <main class="container mx-auto px-4 py-12">
53
+ <section class="mb-16">
54
+ <div class="bg-white rounded-xl shadow-lg p-6 max-w-3xl mx-auto">
55
+ <h2 class="text-2xl font-bold mb-6 text-gray-800">Analysez une miniature YouTube</h2>
56
+
57
+ <div class="mb-6">
58
+ <label for="youtube-url" class="block text-sm font-medium text-gray-700 mb-2">URL de la vidéo YouTube</label>
59
+ <div class="flex">
60
+ <input type="text" id="youtube-url" placeholder="https://www.youtube.com/watch?v=..."
61
+ class="flex-1 px-4 py-3 border border-gray-300 rounded-l-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500">
62
+ <button id="analyze-btn" class="bg-indigo-600 hover:bg-indigo-700 text-white px-6 py-3 rounded-r-lg font-medium transition duration-300">
63
+ Analyser
64
+ </button>
65
+ </div>
66
+ </div>
67
+
68
+ <div id="loading" class="hidden flex flex-col items-center justify-center py-8">
69
+ <div class="w-12 h-12 border-4 border-gray-300 rounded-full loading-spinner"></div>
70
+ <p class="mt-4 text-gray-600">Analyse en cours...</p>
71
+ </div>
72
+
73
+ <div id="error-message" class="hidden bg-red-100 border-l-4 border-red-500 text-red-700 p-4 mb-6">
74
+ <p>Une erreur s'est produite. Veuillez vérifier l'URL et réessayer.</p>
75
+ </div>
76
+
77
+ <div id="results" class="hidden">
78
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-8">
79
+ <div class="thumbnail-container bg-gray-50 p-4 rounded-lg">
80
+ <h3 class="font-semibold text-lg mb-3 text-gray-700">Miniature originale</h3>
81
+ <img id="original-thumbnail" src="" alt="Miniature originale" class="w-full rounded-md">
82
+ <div class="mt-4">
83
+ <p class="text-sm text-gray-500">Résolution: <span id="original-resolution" class="font-medium">-</span></p>
84
+ <p class="text-sm text-gray-500">Taille du fichier: <span id="original-size" class="font-medium">-</span></p>
85
+ </div>
86
+ </div>
87
+
88
+ <div class="thumbnail-container bg-gray-50 p-4 rounded-lg">
89
+ <h3 class="font-semibold text-lg mb-3 text-gray-700">Miniature améliorée</h3>
90
+ <img id="enhanced-thumbnail" src="" alt="Miniature améliorée" class="w-full rounded-md enhanced-thumbnail">
91
+ <div class="mt-4">
92
+ <p class="text-sm text-gray-500">Résolution: <span id="enhanced-resolution" class="font-medium">-</span></p>
93
+ <p class="text-sm text-gray-500">Taille du fichier: <span id="enhanced-size" class="font-medium">-</span></p>
94
+ </div>
95
+ </div>
96
+ </div>
97
+
98
+ <div class="bg-blue-50 border-l-4 border-blue-500 p-4 mb-6">
99
+ <h3 class="font-semibold text-lg mb-2 text-blue-800">Suggestions d'amélioration</h3>
100
+ <ul id="improvement-suggestions" class="list-disc pl-5 space-y-2 text-blue-700">
101
+ <!-- Suggestions will be added here by JavaScript -->
102
+ </ul>
103
+ </div>
104
+
105
+ <div class="flex flex-wrap gap-4">
106
+ <button id="download-enhanced" class="bg-green-600 hover:bg-green-700 text-white px-6 py-2 rounded-lg font-medium transition duration-300 flex items-center">
107
+ <i class="fas fa-download mr-2"></i> Télécharger l'image améliorée
108
+ </button>
109
+ <button id="try-another" class="bg-gray-200 hover:bg-gray-300 text-gray-800 px-6 py-2 rounded-lg font-medium transition duration-300">
110
+ Essayer une autre vidéo
111
+ </button>
112
+ </div>
113
+ </div>
114
+ </div>
115
+ </section>
116
+
117
+ <section class="mt-20">
118
+ <h2 class="text-2xl font-bold mb-8 text-center text-gray-800">Analyse IA avancée des miniatures</h2>
119
+ <div class="bg-white p-6 rounded-xl shadow-lg max-w-4xl mx-auto mb-12">
120
+ <h3 class="font-bold text-xl mb-4 text-indigo-700">Notre technologie d'analyse</h3>
121
+ <p class="text-gray-600 mb-4">
122
+ Notre système utilise une intelligence artificielle avancée pour analyser votre miniature YouTube selon 5 critères clés :
123
+ </p>
124
+ <div class="grid grid-cols-2 md:grid-cols-5 gap-4 mb-6">
125
+ <div class="bg-indigo-50 p-3 rounded-lg text-center">
126
+ <div class="bg-indigo-100 w-10 h-10 rounded-full flex items-center justify-center mx-auto mb-2">
127
+ <i class="fas fa-eye text-indigo-600"></i>
128
+ </div>
129
+ <p class="text-sm font-medium">Visibilité</p>
130
+ </div>
131
+ <div class="bg-indigo-50 p-3 rounded-lg text-center">
132
+ <div class="bg-indigo-100 w-10 h-10 rounded-full flex items-center justify-center mx-auto mb-2">
133
+ <i class="fas fa-palette text-indigo-600"></i>
134
+ </div>
135
+ <p class="text-sm font-medium">Couleurs</p>
136
+ </div>
137
+ <div class="bg-indigo-50 p-3 rounded-lg text-center">
138
+ <div class="bg-indigo-100 w-10 h-10 rounded-full flex items-center justify-center mx-auto mb-2">
139
+ <i class="fas fa-font text-indigo-600"></i>
140
+ </div>
141
+ <p class="text-sm font-medium">Texte</p>
142
+ </div>
143
+ <div class="bg-indigo-50 p-3 rounded-lg text-center">
144
+ <div class="bg-indigo-100 w-10 h-10 rounded-full flex items-center justify-center mx-auto mb-2">
145
+ <i class="fas fa-user text-indigo-600"></i>
146
+ </div>
147
+ <p class="text-sm font-medium">Visages</p>
148
+ </div>
149
+ <div class="bg-indigo-50 p-3 rounded-lg text-center">
150
+ <div class="bg-indigo-100 w-10 h-10 rounded-full flex items-center justify-center mx-auto mb-2">
151
+ <i class="fas fa-bolt text-indigo-600"></i>
152
+ </div>
153
+ <p class="text-sm font-medium">Impact</p>
154
+ </div>
155
+ </div>
156
+ <p class="text-gray-600">
157
+ L'IA génère ensuite une version optimisée de votre miniature et vous fournit des recommandations personnalisées pour augmenter votre taux de clics.
158
+ </p>
159
+ </div>
160
+
161
+ <h2 class="text-2xl font-bold mb-8 text-center text-gray-800">Comment améliorer vos miniatures YouTube</h2>
162
+
163
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
164
+ <div class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition duration-300">
165
+ <div class="bg-indigo-100 w-12 h-12 rounded-full flex items-center justify-center mb-4">
166
+ <i class="fas fa-eye text-indigo-600 text-xl"></i>
167
+ </div>
168
+ <h3 class="font-bold text-lg mb-2 text-gray-800">Visibilité</h3>
169
+ <p class="text-gray-600">Utilisez des couleurs vives et des contrastes élevés pour attirer l'attention dans les résultats de recherche.</p>
170
+ </div>
171
+
172
+ <div class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition duration-300">
173
+ <div class="bg-indigo-100 w-12 h-12 rounded-full flex items-center justify-center mb-4">
174
+ <i class="fas fa-font text-indigo-600 text-xl"></i>
175
+ </div>
176
+ <h3 class="font-bold text-lg mb-2 text-gray-800">Texte lisible</h3>
177
+ <p class="text-gray-600">Ajoutez un texte court et percutant avec une police facile à lire même en miniature.</p>
178
+ </div>
179
+
180
+ <div class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition duration-300">
181
+ <div class="bg-indigo-100 w-12 h-12 rounded-full flex items-center justify-center mb-4">
182
+ <i class="fas fa-user text-indigo-600 text-xl"></i>
183
+ </div>
184
+ <h3 class="font-bold text-lg mb-2 text-gray-800">Visages expressifs</h3>
185
+ <p class="text-gray-600">Les visages humains avec des expressions émotionnelles augmentent le taux de clics.</p>
186
+ </div>
187
+ </div>
188
+ </section>
189
+ </main>
190
+
191
+ <footer class="bg-gray-800 text-white py-8">
192
+ <div class="container mx-auto px-4">
193
+ <div class="flex flex-col md:flex-row justify-between items-center">
194
+ <div class="mb-4 md:mb-0">
195
+ <p class="text-gray-400">© 2023 YouTube Thumbnail Enhancer. Tous droits réservés.</p>
196
+ </div>
197
+ <div class="flex space-x-6">
198
+ <a href="#" class="text-gray-400 hover:text-white transition duration-300">
199
+ <i class="fab fa-twitter"></i>
200
+ </a>
201
+ <a href="#" class="text-gray-400 hover:text-white transition duration-300">
202
+ <i class="fab fa-github"></i>
203
+ </a>
204
+ <a href="#" class="text-gray-400 hover:text-white transition duration-300">
205
+ <i class="fab fa-youtube"></i>
206
+ </a>
207
+ </div>
208
+ </div>
209
+ </div>
210
+ </footer>
211
+
212
+ <script>
213
+ document.addEventListener('DOMContentLoaded', function() {
214
+ const analyzeBtn = document.getElementById('analyze-btn');
215
+ const youtubeUrlInput = document.getElementById('youtube-url');
216
+ const loadingElement = document.getElementById('loading');
217
+ const errorMessage = document.getElementById('error-message');
218
+ const resultsElement = document.getElementById('results');
219
+ const originalThumbnail = document.getElementById('original-thumbnail');
220
+ const enhancedThumbnail = document.getElementById('enhanced-thumbnail');
221
+ const originalResolution = document.getElementById('original-resolution');
222
+ const enhancedResolution = document.getElementById('enhanced-resolution');
223
+ const originalSize = document.getElementById('original-size');
224
+ const enhancedSize = document.getElementById('enhanced-size');
225
+ const improvementSuggestions = document.getElementById('improvement-suggestions');
226
+ const downloadEnhancedBtn = document.getElementById('download-enhanced');
227
+ const tryAnotherBtn = document.getElementById('try-another');
228
+
229
+ analyzeBtn.addEventListener('click', analyzeThumbnail);
230
+ tryAnotherBtn.addEventListener('click', resetForm);
231
+ downloadEnhancedBtn.addEventListener('click', downloadEnhancedThumbnail);
232
+
233
+ async function analyzeThumbnail() {
234
+ const youtubeUrl = youtubeUrlInput.value.trim();
235
+
236
+ if (!youtubeUrl) {
237
+ showError("Veuillez entrer une URL YouTube valide");
238
+ return;
239
+ }
240
+
241
+ let videoId = '';
242
+ const regExp = /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|&v=)([^#&?]*).*/;
243
+ const match = youtubeUrl.match(regExp);
244
+
245
+ if (match && match[2].length === 11) {
246
+ videoId = match[2];
247
+ } else {
248
+ showError("URL YouTube non valide");
249
+ return;
250
+ }
251
+
252
+ loadingElement.classList.remove('hidden');
253
+ errorMessage.classList.add('hidden');
254
+ resultsElement.classList.add('hidden');
255
+
256
+ try {
257
+ // URL de la miniature originale
258
+ const originalThumbUrl = `https://img.youtube.com/vi/${videoId}/maxresdefault.jpg`;
259
+ originalThumbnail.src = originalThumbUrl;
260
+
261
+ // Simulation d'une requête à une API d'IA
262
+ const response = await axios.post('https://api.thumbnail-analyzer.com/v1/analyze', {
263
+ thumbnail_url: originalThumbUrl,
264
+ video_id: videoId
265
+ }, {
266
+ headers: {
267
+ 'Authorization': 'Bearer YOUR_AI_API_KEY',
268
+ 'Content-Type': 'application/json'
269
+ }
270
+ });
271
+
272
+ const analysis = response.data;
273
+
274
+ // Afficher les résultats de l'analyse IA
275
+ originalResolution.textContent = analysis.original.resolution;
276
+ originalSize.textContent = analysis.original.size;
277
+
278
+ // Appliquer les améliorations basées sur l'analyse IA
279
+ enhancedThumbnail.src = analysis.enhanced_image_url;
280
+ enhancedResolution.textContent = analysis.enhanced.resolution;
281
+ enhancedSize.textContent = analysis.enhanced.size;
282
+
283
+ // Afficher les suggestions d'amélioration
284
+ improvementSuggestions.innerHTML = '';
285
+ analysis.improvements.forEach(suggestion => {
286
+ const li = document.createElement('li');
287
+ li.textContent = suggestion;
288
+ improvementSuggestions.appendChild(li);
289
+ });
290
+
291
+ // Afficher le score d'optimisation
292
+ const scoreElement = document.createElement('div');
293
+ scoreElement.className = 'mt-4 p-3 rounded-lg text-center font-bold';
294
+
295
+ if (analysis.score >= 80) {
296
+ scoreElement.className += ' bg-green-100 text-green-800';
297
+ scoreElement.innerHTML = `<i class="fas fa-check-circle mr-2"></i> Score d'optimisation: ${analysis.score}/100 (Excellent)`;
298
+ } else if (analysis.score >= 50) {
299
+ scoreElement.className += ' bg-yellow-100 text-yellow-800';
300
+ scoreElement.innerHTML = `<i class="fas fa-exclamation-circle mr-2"></i> Score d'optimisation: ${analysis.score}/100 (Moyen)`;
301
+ } else {
302
+ scoreElement.className += ' bg-red-100 text-red-800';
303
+ scoreElement.innerHTML = `<i class="fas fa-exclamation-triangle mr-2"></i> Score d'optimisation: ${analysis.score}/100 (Faible)`;
304
+ }
305
+
306
+ improvementSuggestions.parentNode.insertBefore(scoreElement, improvementSuggestions.nextSibling);
307
+
308
+ resultsElement.classList.remove('hidden');
309
+ } catch (error) {
310
+ showError("Erreur lors de l'analyse IA de la miniature");
311
+ console.error("Erreur d'analyse:", error);
312
+ } finally {
313
+ loadingElement.classList.add('hidden');
314
+ }
315
+ }
316
+
317
+ function showError(message) {
318
+ errorMessage.querySelector('p').textContent = message;
319
+ errorMessage.classList.remove('hidden');
320
+ loadingElement.classList.add('hidden');
321
+ }
322
+
323
+ function resetForm() {
324
+ youtubeUrlInput.value = '';
325
+ resultsElement.classList.add('hidden');
326
+ errorMessage.classList.add('hidden');
327
+ }
328
+
329
+ function downloadEnhancedThumbnail() {
330
+ if (!enhancedThumbnail.src) return;
331
+
332
+ // Créer un lien de téléchargement
333
+ const link = document.createElement('a');
334
+ link.href = enhancedThumbnail.src;
335
+ link.download = 'youtube-thumbnail-enhanced.jpg';
336
+ document.body.appendChild(link);
337
+ link.click();
338
+ document.body.removeChild(link);
339
+ }
340
+ });
341
+ </script>
342
+ <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=XOFSOUNDIA/youtube-miniature" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
343
+ </html>