Hugging Face's logo

Spaces:
nitubhai
/
creatorplus
Sleeping

App Files Community
nitubhai commited on
Commit
1a8bddb
·
verified ·
1 Parent(s): b52f846

Delete metadata_generator.html

Browse files
Files changed (1) hide show
  1. metadata_generator.html +0 -412
metadata_generator.html DELETED
@@ -1,412 +0,0 @@
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>AI Metadata Generator - YouTube Automation</title>
7
- <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
8
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
- </head>
10
- <body>
11
- <div class="background-animation">
12
- <div class="gradient-orb orb-1"></div>
13
- <div class="gradient-orb orb-2"></div>
14
- <div class="gradient-orb orb-3"></div>
15
- </div>
16
-
17
- <!-- Navigation -->
18
- <nav class="navbar glass-card">
19
- <div class="nav-container">
20
- <a href="/" class="nav-brand">
21
- <i class="fab fa-youtube"></i>
22
- <span>YouTube Automation</span>
23
- </a>
24
- <div class="nav-menu">
25
- <a href="/" class="nav-link"><i class="fas fa-home"></i> Home</a>
26
- <a href="/downloader" class="nav-link"><i class="fas fa-download"></i> Downloader</a>
27
- <a href="/metadata-generator" class="nav-link active"><i class="fas fa-brain"></i> Metadata</a>
28
- <a href="/uploader" class="nav-link"><i class="fas fa-upload"></i> Uploader</a>
29
- </div>
30
- <button class="mobile-menu-toggle" id="mobileMenuToggle">
31
- <i class="fas fa-bars"></i>
32
- </button>
33
- </div>
34
- </nav>
35
-
36
- <!-- Mobile Menu -->
37
- <div class="mobile-menu glass-card" id="mobileMenu">
38
- <a href="/" class="mobile-menu-link"><i class="fas fa-home"></i> Home</a>
39
- <a href="/downloader" class="mobile-menu-link"><i class="fas fa-download"></i> Downloader</a>
40
- <a href="/metadata-generator" class="mobile-menu-link"><i class="fas fa-brain"></i> Metadata Generator</a>
41
- <a href="/uploader" class="mobile-menu-link"><i class="fas fa-upload"></i> Uploader</a>
42
- </div>
43
-
44
- <div class="container">
45
- <!-- Hero Section -->
46
- <section class="page-hero fade-in">
47
- <div class="hero-badge">
48
- <i class="fas fa-brain"></i>
49
- <span>AI-Powered Intelligence</span>
50
- </div>
51
- <h1>AI Metadata Generator</h1>
52
- <p class="hero-subtitle">Generate SEO-optimized titles, descriptions, and tags using advanced AI. Powered by Google Gemini for intelligent content analysis.</p>
53
- </section>
54
-
55
- <!-- Metadata Generator Section -->
56
- <section class="upload-section glass-card fade-in-delay">
57
- <div class="section-header">
58
- <i class="fas fa-magic"></i>
59
- <h2>Generate Metadata</h2>
60
- <p>Our AI will analyze your video and create perfect metadata</p>
61
- </div>
62
-
63
- <div class="input-group">
64
- <i class="fab fa-instagram"></i>
65
- <input type="text" id="metadataUrl" class="glass-input"
66
- placeholder="Paste Instagram Reel URL here...">
67
- </div>
68
-
69
- <div class="button-group">
70
- <button id="generateBtn" class="btn btn-preview">
71
- <i class="fas fa-magic"></i> Generate Metadata
72
- </button>
73
- </div>
74
-
75
- <!-- Metadata Preview -->
76
- <div id="metadataPreview" class="metadata-preview glass-card" style="display: none;">
77
- <h3><i class="fas fa-sparkles"></i> AI Generated Metadata</h3>
78
- <div class="metadata-content">
79
- <div class="metadata-item">
80
- <label><i class="fas fa-heading"></i> Title</label>
81
- <div id="previewTitle" class="metadata-value"></div>
82
- </div>
83
- <div class="metadata-item">
84
- <label><i class="fas fa-align-left"></i> Description</label>
85
- <div id="previewDescription" class="metadata-value scrollable"></div>
86
- </div>
87
- <div class="metadata-item">
88
- <label><i class="fas fa-tags"></i> Tags</label>
89
- <div id="previewTags" class="metadata-tags"></div>
90
- </div>
91
- <div class="metadata-item">
92
- <label><i class="fas fa-hashtag"></i> Hashtags</label>
93
- <div id="previewHashtags" class="metadata-tags"></div>
94
- </div>
95
- </div>
96
- </div>
97
- </section>
98
-
99
- <!-- AI Features Section -->
100
- <section class="features-section fade-in-delay-1">
101
- <div class="section-header">
102
- <h2>AI-Powered Features</h2>
103
- <p>Advanced capabilities powered by Google Gemini</p>
104
- </div>
105
-
106
- <div class="features-grid-small">
107
- <div class="feature-card glass-card">
108
- <i class="fas fa-eye feature-icon-small"></i>
109
- <h3>Video Analysis</h3>
110
- <p>AI analyzes video content, scenes, objects, and context to understand what your video is about.</p>
111
- </div>
112
-
113
- <div class="feature-card glass-card">
114
- <i class="fas fa-search feature-icon-small"></i>
115
- <h3>SEO Optimization</h3>
116
- <p>Generate titles and descriptions optimized for search engines to help your content rank higher.</p>
117
- </div>
118
-
119
- <div class="feature-card glass-card">
120
- <i class="fas fa-hashtag feature-icon-small"></i>
121
- <h3>Smart Hashtags</h3>
122
- <p>AI suggests trending and relevant hashtags to maximize your content's reach and engagement.</p>
123
- </div>
124
-
125
- <div class="feature-card glass-card">
126
- <i class="fas fa-bullseye feature-icon-small"></i>
127
- <h3>Targeted Keywords</h3>
128
- <p>Generate keywords that match your target audience's search intent and interests.</p>
129
- </div>
130
-
131
- <div class="feature-card glass-card">
132
- <i class="fas fa-language feature-icon-small"></i>
133
- <h3>Natural Language</h3>
134
- <p>Descriptions written in natural, engaging language that connects with viewers.</p>
135
- </div>
136
-
137
- <div class="feature-card glass-card">
138
- <i class="fas fa-chart-line feature-icon-small"></i>
139
- <h3>Trend Awareness</h3>
140
- <p>AI stays updated with current trends to suggest relevant and timely metadata.</p>
141
- </div>
142
- </div>
143
- </section>
144
-
145
- <!-- How It Works Section -->
146
- <section class="how-to-use glass-card fade-in-delay-2">
147
- <div class="section-header">
148
- <h2>How AI Metadata Generation Works</h2>
149
- <p>Behind the scenes intelligence</p>
150
- </div>
151
-
152
- <div class="steps-list">
153
- <div class="step-card">
154
- <div class="step-number-badge">1</div>
155
- <div class="step-info">
156
- <h3>Video Download & Analysis</h3>
157
- <p>The system downloads the reel and AI analyzes frames, audio, text overlays, and overall content to understand the video's theme and message.</p>
158
- <div class="step-tip">
159
- <i class="fas fa-robot"></i>
160
- <span>Powered by Google Gemini Vision AI</span>
161
- </div>
162
- </div>
163
- </div>
164
-
165
- <div class="step-card">
166
- <div class="step-number-badge">2</div>
167
- <div class="step-info">
168
- <h3>Context Understanding</h3>
169
- <p>AI identifies key elements, emotions, actions, and themes. It understands the story, purpose, and target audience of your content.</p>
170
- <div class="step-tip">
171
- <i class="fas fa-brain"></i>
172
- <span>Deep learning models process video semantics</span>
173
- </div>
174
- </div>
175
- </div>
176
-
177
- <div class="step-card">
178
- <div class="step-number-badge">3</div>
179
- <div class="step-info">
180
- <h3>Metadata Generation</h3>
181
- <p>Based on analysis, AI creates engaging titles, detailed descriptions, relevant tags, and trending hashtags optimized for maximum visibility.</p>
182
- <div class="step-tip">
183
- <i class="fas fa-magic"></i>
184
- <span>SEO-optimized for better discoverability</span>
185
- </div>
186
- </div>
187
- </div>
188
- </div>
189
- </section>
190
-
191
- <!-- Benefits Section -->
192
- <section class="benefits-section fade-in-delay-2">
193
- <div class="section-header">
194
- <h2>Why Use AI for Metadata?</h2>
195
- <p>Advantages over manual metadata creation</p>
196
- </div>
197
-
198
- <div class="benefits-grid">
199
- <div class="benefit-card glass-card">
200
- <i class="fas fa-clock benefit-icon"></i>
201
- <h3>Save Hours</h3>
202
- <p>No more brainstorming titles or writing descriptions. AI does it instantly.</p>
203
- </div>
204
-
205
- <div class="benefit-card glass-card">
206
- <i class="fas fa-trophy benefit-icon"></i>
207
- <h3>Better Results</h3>
208
- <p>AI-generated metadata often performs better than manual creation.</p>
209
- </div>
210
-
211
- <div class="benefit-card glass-card">
212
- <i class="fas fa-chart-line benefit-icon"></i>
213
- <h3>SEO Optimized</h3>
214
- <p>Built-in SEO best practices for improved search rankings.</p>
215
- </div>
216
-
217
- <div class="benefit-card glass-card">
218
- <i class="fas fa-brain benefit-icon"></i>
219
- <h3>Intelligent Analysis</h3>
220
- <p>Deep understanding of video content beyond what humans can process quickly.</p>
221
- </div>
222
-
223
- <div class="benefit-card glass-card">
224
- <i class="fas fa-globe benefit-icon"></i>
225
- <h3>Trend Aware</h3>
226
- <p>Stays current with trending topics and popular keywords.</p>
227
- </div>
228
-
229
- <div class="benefit-card glass-card">
230
- <i class="fas fa-sync benefit-icon"></i>
231
- <h3>Consistent Quality</h3>
232
- <p>Every video gets professional-quality metadata, every time.</p>
233
- </div>
234
- </div>
235
- </section>
236
-
237
- <!-- Use Cases Section -->
238
- <section class="use-cases-section glass-card fade-in-delay-3">
239
- <div class="section-header">
240
- <h2>Perfect For</h2>
241
- <p>Who benefits from AI metadata generation</p>
242
- </div>
243
-
244
- <div class="use-cases-grid">
245
- <div class="use-case-item">
246
- <i class="fas fa-video"></i>
247
- <h4>YouTubers</h4>
248
- <p>Optimize every upload for maximum views and engagement</p>
249
- </div>
250
-
251
- <div class="use-case-item">
252
- <i class="fas fa-bullhorn"></i>
253
- <h4>Digital Marketers</h4>
254
- <p>Create SEO-friendly content at scale</p>
255
- </div>
256
-
257
- <div class="use-case-item">
258
- <i class="fas fa-store"></i>
259
- <h4>E-commerce Brands</h4>
260
- <p>Generate product video descriptions automatically</p>
261
- </div>
262
-
263
- <div class="use-case-item">
264
- <i class="fas fa-users"></i>
265
- <h4>Social Media Teams</h4>
266
- <p>Maintain consistency across multiple content pieces</p>
267
- </div>
268
-
269
- <div class="use-case-item">
270
- <i class="fas fa-graduation-cap"></i>
271
- <h4>Content Educators</h4>
272
- <p>Make educational content more discoverable</p>
273
- </div>
274
-
275
- <div class="use-case-item">
276
- <i class="fas fa-film"></i>
277
- <h4>Production Companies</h4>
278
- <p>Streamline post-production metadata workflow</p>
279
- </div>
280
- </div>
281
- </section>
282
-
283
- <!-- FAQ Section -->
284
- <section class="faq-section fade-in-delay-3">
285
- <div class="section-header">
286
- <h2>Frequently Asked Questions</h2>
287
- <p>Learn more about AI metadata generation</p>
288
- </div>
289
-
290
- <div class="faq-container">
291
- <div class="faq-item glass-card">
292
- <div class="faq-question">
293
- <i class="fas fa-question-circle"></i>
294
- <h3>How accurate is the AI metadata?</h3>
295
- <i class="fas fa-chevron-down faq-toggle"></i>
296
- </div>
297
- <div class="faq-answer">
298
- <p>Our AI uses Google's Gemini model which provides highly accurate and contextually relevant metadata. It analyzes video content comprehensively and generates professional-quality results.</p>
299
- </div>
300
- </div>
301
-
302
- <div class="faq-item glass-card">
303
- <div class="faq-question">
304
- <i class="fas fa-question-circle"></i>
305
- <h3>Can I edit the generated metadata?</h3>
306
- <i class="fas fa-chevron-down faq-toggle"></i>
307
- </div>
308
- <div class="faq-answer">
309
- <p>Currently, metadata is automatically generated and applied. We're working on adding an editor feature where you can review and modify metadata before applying it.</p>
310
- </div>
311
- </div>
312
-
313
- <div class="faq-item glass-card">
314
- <div class="faq-question">
315
- <i class="fas fa-question-circle"></i>
316
- <h3>What languages are supported?</h3>
317
- <i class="fas fa-chevron-down faq-toggle"></i>
318
- </div>
319
- <div class="faq-answer">
320
- <p>Currently, the AI generates metadata primarily in English. We're working on adding support for multiple languages in future updates.</p>
321
- </div>
322
- </div>
323
-
324
- <div class="faq-item glass-card">
325
- <div class="faq-question">
326
- <i class="fas fa-question-circle"></i>
327
- <h3>How long does generation take?</h3>
328
- <i class="fas fa-chevron-down faq-toggle"></i>
329
- </div>
330
- <div class="faq-answer">
331
- <p>The AI typically takes 10-30 seconds to analyze a video and generate complete metadata including title, description, tags, and hashtags.</p>
332
- </div>
333
- </div>
334
-
335
- <div class="faq-item glass-card">
336
- <div class="faq-question">
337
- <i class="fas fa-question-circle"></i>
338
- <h3>Is there a limit on video length?</h3>
339
- <i class="fas fa-chevron-down faq-toggle"></i>
340
- </div>
341
- <div class="faq-answer">
342
- <p>The AI works best with Instagram Reels (typically under 90 seconds). Longer videos may take more time to process but are supported.</p>
343
- </div>
344
- </div>
345
- </div>
346
- </section>
347
-
348
- <!-- CTA Section -->
349
- <section class="cta-section glass-card fade-in-delay-3 text-center">
350
- <i class="fas fa-rocket cta-icon"></i>
351
- <h2>Ready to Automate?</h2>
352
- <p>Use AI-generated metadata with our auto-uploader</p>
353
- <div class="cta-buttons">
354
- <a href="/uploader" class="btn btn-primary btn-large">
355
- <i class="fas fa-upload"></i> Try Auto Uploader
356
- </a>
357
- <a href="/downloader" class="btn btn-secondary btn-large">
358
- <i class="fas fa-download"></i> Download Only
359
- </a>
360
- </div>
361
- </section>
362
- </div>
363
-
364
- <!-- Loading Overlay -->
365
- <div id="loadingOverlay" class="loading-overlay" style="display: none;">
366
- <div class="loading-spinner"></div>
367
- <p>AI is analyzing your video...</p>
368
- </div>
369
-
370
- <!-- Toast Notification -->
371
- <div id="toast" class="toast"></div>
372
-
373
- <script>
374
- // Mobile menu toggle
375
- const mobileMenuToggle = document.getElementById('mobileMenuToggle');
376
- const mobileMenu = document.getElementById('mobileMenu');
377
-
378
- if (mobileMenuToggle) {
379
- mobileMenuToggle.addEventListener('click', () => {
380
- mobileMenu.classList.toggle('active');
381
- });
382
- }
383
-
384
- // Close mobile menu when clicking outside
385
- document.addEventListener('click', (e) => {
386
- if (mobileMenu &&
387
- mobileMenu.classList.contains('active') &&
388
- !mobileMenu.contains(e.target) &&
389
- !mobileMenuToggle.contains(e.target)) {
390
- mobileMenu.classList.remove('active');
391
- }
392
- });
393
-
394
- // FAQ Accordion
395
- document.querySelectorAll('.faq-question').forEach(question => {
396
- question.addEventListener('click', () => {
397
- const faqItem = question.parentElement;
398
- const isActive = faqItem.classList.contains('active');
399
-
400
- document.querySelectorAll('.faq-item').forEach(item => {
401
- item.classList.remove('active');
402
- });
403
-
404
- if (!isActive) {
405
- faqItem.classList.add('active');
406
- }
407
- });
408
- });
409
- </script>
410
- <script src="{{ url_for('static', filename='js/metadata.js') }}"></script>
411
- </body>
412
- </html>