Hugging Face's logo

Spaces:
WasaD13
/
wasa-test
Running

App Files Community
WasaD13 commited on
Commit
faeded8
·
verified ·
1 Parent(s): bab2945

Prompt: Build a Viral Video AI Better Than OpusClip "Enhance my current video upload website with a professional-grade, AI-powered clip generator that outperforms OpusClip in precision, control, and social-readiness. This add-on should automate the viral content process for creators and provide powerful editing control directly in the browser." 🔧 Features to Add (Outperform OpusClip): 🔹 1. AI-Powered Auto-Clip Engine Extract 3–10 short clips from videos up to 4GB in size Use multi-factor highlight detection: NLP-based excitement and hook detection (e.g., “what just happened”, “you won’t believe…”) Volume/voice intensity spikes Facial emotion detection or scene change tracking Let users select a "Style" preset: Funny, Motivational, Educational, or Drama/Hot Takes Add a manual override toggle: if users disagree with AI, they can re-pick timestamps or delete clips before export 🔹 2. Advanced Captions (Better Than Opus) Use OpenAI Whisper or Deepgram to generate hyper-accurate word-level transcripts Auto-style captions like: Bolded keywords Bounce/fade-in effects Emoji and color injection Support for multiple caption fonts Allow export with: Burned-in captions (MP4) SRT/VTT download Captions in both standard and viral styles 🔹 3. Dynamic Framing + Resizing (AI Smart Reframing) Smart subject tracking using AI (e.g., center face or body) Generate all major formats: 9:16 (TikTok/Reels/Shorts) 1:1 (Instagram feed) 16:9 (YouTube/Landscape) Apply safe-zone overlays to prevent cropping out text/speaker 🔹 4. Visual Enhancements & Branding Tools Optional Top/Bottom Bar overlays with: Auto titles: Hook-based using GPT ("He Didn’t See That Coming…") Profile handle or CTA (“Follow @Wasa ”) Built-in zoom/pan effect and motion tracking (Ken Burns style) Color themes and preset animation packs for text and overlays User uploads a logo or watermark to apply across all clips 🔹 5. Export Options & Batch Downloads Clip preview carousel with: Format picker (MP4, square, vertical) Toggle captions on/off Select clips to include in ZIP Export includes: MP4 clip Caption file (SRT/VTT) JSON with clip metadata (timestamps, summary, emotion score) 🔹 6. Bonus: AI Titles + Hashtag Generator Generate 3+ clip titles using GPT-4 based on each highlight Recommend hashtags per platform (TikTok, YT, IG) using content tags ⚙️ Technical Instructions for AI Backend Additions Integrate FFmpeg (trimming, formatting, caption burning) Use Whisper (or Deepgram) for transcription Clip scoring model using: Hugging Face (e.g., sentiment/emotion classifiers) NLP keyword match + energy curve from audio Add a task queue (Celery or similar) to process large files async Max upload size: 4GB (enforced via server config & client check) Frontend Additions New dashboard: “Clip Generator” Upload → Process → Preview & Customize → Download Live clip preview with format/caption toggles Caption styling UI (font, color, animation) Clip filtering (remove unwanted clips) Storage/Timeout Store processed clips & files for 24 hours, then auto-delete to save space ✅ Output Summary Feature Better Than OpusClip Because… Highlight Detection Uses multi-layer emotion, keyword, and speech excitement Captions Fully stylized, animated, font-controlled Format Options Auto-reframes in 3 social formats Customization Manual clip editing + branding overlays AI Titles/Hashtags GPT integration for hooks & virality User Branding Logo watermark + CTA text - Initial Deployment

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +1086 -19
  3. prompts.txt +1 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Wasa Test
3
- emoji: 📊
4
- colorFrom: indigo
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: wasa-test
3
+ emoji: 🐳
4
+ colorFrom: pink
5
+ colorTo: yellow
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,1086 @@
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>ClipGenius - AI Video Highlights Generator</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=Inter:wght@300;400;500;600;700&display=swap');
11
+
12
+ body {
13
+ font-family: 'Inter', sans-serif;
14
+ background-color: #f9fafb;
15
+ color: #111827;
16
+ }
17
+
18
+ .gradient-bg {
19
+ background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #d946ef 100%);
20
+ }
21
+
22
+ .clip-preview {
23
+ transition: all 0.2s ease;
24
+ }
25
+
26
+ .clip-preview:hover {
27
+ transform: translateY(-4px);
28
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
29
+ }
30
+
31
+ .upload-container {
32
+ border: 2px dashed #e5e7eb;
33
+ transition: all 0.2s ease;
34
+ }
35
+
36
+ .upload-container:hover {
37
+ border-color: #8b5cf6;
38
+ background-color: rgba(139, 92, 246, 0.05);
39
+ }
40
+
41
+ .upload-container.drag-over {
42
+ border-color: #6366f1;
43
+ background-color: rgba(99, 102, 241, 0.1);
44
+ }
45
+
46
+ .progress-bar {
47
+ transition: width 0.5s ease;
48
+ }
49
+
50
+ /* Custom checkbox */
51
+ .custom-checkbox {
52
+ width: 18px;
53
+ height: 18px;
54
+ }
55
+
56
+ /* Hide default file input */
57
+ .file-input {
58
+ width: 0.1px;
59
+ height: 0.1px;
60
+ opacity: 0;
61
+ overflow: hidden;
62
+ position: absolute;
63
+ z-index: -1;
64
+ }
65
+
66
+ /* Tooltip */
67
+ .tooltip {
68
+ position: relative;
69
+ }
70
+
71
+ .tooltip .tooltip-text {
72
+ visibility: hidden;
73
+ width: 200px;
74
+ background-color: #111827;
75
+ color: #fff;
76
+ text-align: center;
77
+ border-radius: 6px;
78
+ padding: 5px;
79
+ position: absolute;
80
+ z-index: 1;
81
+ bottom: 125%;
82
+ left: 50%;
83
+ transform: translateX(-50%);
84
+ opacity: 0;
85
+ transition: opacity 0.3s;
86
+ }
87
+
88
+ .tooltip:hover .tooltip-text {
89
+ visibility: visible;
90
+ opacity: 1;
91
+ }
92
+ </style>
93
+ </head>
94
+ <body>
95
+ <!-- Navigation -->
96
+ <nav class="bg-white shadow-sm">
97
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
98
+ <div class="flex justify-between h-16">
99
+ <div class="flex items-center">
100
+ <div class="flex-shrink-0 flex items-center">
101
+ <i class="fas fa-cut text-indigo-600 text-2xl mr-2"></i>
102
+ <span class="text-xl font-bold text-gray-900">ClipGenius</span>
103
+ </div>
104
+ </div>
105
+ <div class="hidden sm:ml-6 sm:flex sm:items-center space-x-8">
106
+ <a href="#" class="text-gray-500 hover:text-gray-700 px-3 py-2 text-sm font-medium">Features</a>
107
+ <a href="#" class="text-gray-500 hover:text-gray-700 px-3 py-2 text-sm font-medium">Pricing</a>
108
+ <a href="#" class="text-gray-500 hover:text-gray-700 px-3 py-2 text-sm font-medium">Documentation</a>
109
+ <button class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-md text-sm font-medium transition-colors">
110
+ Sign In
111
+ </button>
112
+ </div>
113
+ <div class="-mr-2 flex items-center sm:hidden">
114
+ <button type="button" class="mobile-menu-button inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none">
115
+ <i class="fas fa-bars"></i>
116
+ </button>
117
+ </div>
118
+ </div>
119
+ </div>
120
+ </nav>
121
+
122
+ <div class="mobile-menu hidden sm:hidden">
123
+ <div class="px-2 pt-2 pb-3 space-y-1">
124
+ <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-50">Features</a>
125
+ <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-50">Pricing</a>
126
+ <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-50">Documentation</a>
127
+ <button class="w-full bg-indigo-600 hover:bg-indigo-700 text-white px-3 py-2 rounded-md text-base font-medium mt-2">
128
+ Sign In
129
+ </button>
130
+ </div>
131
+ </div>
132
+
133
+ <!-- Hero Section -->
134
+ <div class="gradient-bg text-white">
135
+ <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8 lg:py-24">
136
+ <div class="text-center">
137
+ <h1 class="text-4xl font-extrabold tracking-tight sm:text-5xl lg:text-6xl mb-6">
138
+ Turn Your Videos into Viral Highlights
139
+ </h1>
140
+ <p class="max-w-3xl mx-auto text-xl text-indigo-100">
141
+ AI-powered video clipping that automatically finds the most engaging moments and creates shareable short-form content.
142
+ </p>
143
+ <div class="mt-10 flex justify-center space-x-4">
144
+ <button class="upload-trigger bg-white text-indigo-600 hover:bg-gray-100 px-6 py-3 rounded-md text-lg font-semibold transition-colors">
145
+ Upload Video
146
+ </button>
147
+ <button class="bg-indigo-900 hover:bg-indigo-800 text-white px-6 py-3 rounded-md text-lg font-semibold transition-colors">
148
+ How It Works
149
+ </button>
150
+ </div>
151
+ </div>
152
+ </div>
153
+ </div>
154
+
155
+ <!-- Main Content -->
156
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
157
+ <!-- Process Steps -->
158
+ <div class="mb-16">
159
+ <h2 class="text-3xl font-extrabold text-gray-900 mb-8 text-center">Simple Process, Powerful Results</h2>
160
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
161
+ <div class="text-center">
162
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-100 text-indigo-600 mx-auto mb-4">
163
+ <i class="fas fa-upload text-lg"></i>
164
+ </div>
165
+ <h3 class="text-lg font-medium text-gray-900 mb-2">1. Upload Video</h3>
166
+ <p class="text-gray-500">Upload your MP4, MOV or AVI file or paste a YouTube URL</p>
167
+ </div>
168
+ <div class="text-center">
169
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-100 text-indigo-600 mx-auto mb-4">
170
+ <i class="fas fa-cogs text-lg"></i>
171
+ </div>
172
+ <h3 class="text-lg font-medium text-gray-900 mb-2">2. AI Analysis</h3>
173
+ <p class="text-gray-500">Our AI detects exciting moments using visual and audio cues</p>
174
+ </div>
175
+ <div class="text-center">
176
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-100 text-indigo-600 mx-auto mb-4">
177
+ <i class="fas fa-eye text-lg"></i>
178
+ </div>
179
+ <h3 class="text-lg font-medium text-gray-900 mb-2">3. Review & Edit</h3>
180
+ <p class="text-gray-500">Edit auto-generated clips or captions if needed</p>
181
+ </div>
182
+ <div class="text-center">
183
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-100 text-indigo-600 mx-auto mb-4">
184
+ <i class="fas fa-download text-lg"></i>
185
+ </div>
186
+ <h3 class="text-lg font-medium text-gray-900 mb-2">4. Download & Share</h3>
187
+ <p class="text-gray-500">Download your highlights or share directly to social media</p>
188
+ </div>
189
+ </div>
190
+ </div>
191
+
192
+ <!-- Video Upload Section -->
193
+ <div class="bg-white shadow rounded-lg p-8 mb-16">
194
+ <div class="mb-8">
195
+ <h2 class="text-2xl font-bold text-gray-900 mb-2">Create New Highlights</h2>
196
+ <p class="text-gray-500">Upload your video and let our AI find the most engaging moments</p>
197
+ </div>
198
+
199
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
200
+ <!-- Upload Panel -->
201
+ <div>
202
+ <div id="uploadContainer" class="upload-container rounded-lg p-8 text-center cursor-pointer mb-6">
203
+ <input type="file" id="videoUpload" class="file-input" accept="video/mp4,video/quicktime,video/x-msvideo">
204
+ <div class="flex justify-center mb-4">
205
+ <i class="fas fa-cloud-upload-alt text-4xl text-indigo-500"></i>
206
+ </div>
207
+ <h3 class="text-lg font-medium text-gray-900 mb-2">Upload Your Video</h3>
208
+ <p class="text-gray-500 mb-4">Drag & drop your file here or click to browse</p>
209
+ <p class="text-xs text-gray-400">Supported formats: MP4, MOV, AVI (Max 4GB)</p>
210
+ </div>
211
+
212
+ <!-- Enhanced Advanced Options -->
213
+ <div class="mb-6">
214
+ <button id="toggleAdvanced" class="text-indigo-600 hover:text-indigo-800 font-medium flex items-center">
215
+ <span>AI Clip Settings</span>
216
+ <i class="fas fa-chevron-down ml-2 text-sm"></i>
217
+ </button>
218
+
219
+ <div id="advancedOptions" class="mt-4 hidden space-y-4 p-4 bg-gray-50 rounded-md">
220
+ <div>
221
+ <label class="block text-sm font-medium text-gray-700 mb-1">Content Style</label>
222
+ <select class="w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
223
+ <option value="balanced">Auto-Detect (Recommended)</option>
224
+ <option value="funny">Funny/Entertaining</option>
225
+ <option value="motivational">Motivational</option>
226
+ <option value="educational">Educational</option>
227
+ <option value="drama">Drama/Hot Takes</option>
228
+ </select>
229
+ </div>
230
+ <div>
231
+ <label class="block text-sm font-medium text-gray-700 mb-1">Clip Length</label>
232
+ <select class="w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
233
+ <option value="auto">Auto (AI determined)</option>
234
+ <option value="15">15 seconds</option>
235
+ <option value="30">30 seconds</option>
236
+ <option value="60">60 seconds</option>
237
+ <option value="custom">Custom</option>
238
+ </select>
239
+ </div>
240
+
241
+ <div>
242
+ <label class="block text-sm font-medium text-gray-700 mb-1">Number of Highlights</label>
243
+ <input type="number" min="1" max="10" value="3" class="w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
244
+ </div>
245
+
246
+ <div>
247
+ <label class="flex items-center space-x-3">
248
+ <input type="checkbox" class="custom-checkbox rounded text-indigo-600 focus:ring-indigo-500" checked>
249
+ <span class="text-sm text-gray-700">Generate automatic captions</span>
250
+ </label>
251
+ </div>
252
+
253
+ <div>
254
+ <label class="block text-sm font-medium text-gray-700 mb-1">AI Processing Intensity</label>
255
+ <select class="w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
256
+ <option value="balanced">Balanced (3-5 clips)</option>
257
+ <option value="aggressive">Aggressive (8-10 clips)</option>
258
+ </select>
259
+ </div>
260
+
261
+ <div>
262
+ <label class="block text-sm font-medium text-gray-700 mb-1">Keyword Detection</label>
263
+ <input type="text" placeholder="crazy, bro, no way" class="w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
264
+ </div>
265
+
266
+ <div class="space-y-3">
267
+ <h4 class="text-sm font-medium text-gray-700">Style & Branding</h4>
268
+
269
+ <div class="grid grid-cols-2 gap-4">
270
+ <div>
271
+ <label class="block text-sm font-medium text-gray-700 mb-1">Caption Style</label>
272
+ <select class="w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
273
+ <option value="viral">Viral (Bold Keywords)</option>
274
+ <option value="clean">Clean</option>
275
+ <option value="animated1">Animated Fade</option>
276
+ <option value="animated2">Bounce Effect</option>
277
+ </select>
278
+ </div>
279
+ <div>
280
+ <label class="block text-sm font-medium text-gray-700 mb-1">Output Format</label>
281
+ <select class="w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500" multiple>
282
+ <option value="9:16" selected>9:16 (TikTok/Reels)</option>
283
+ <option value="1:1" selected>1:1 (Instagram)</option>
284
+ <option value="16:9">16:9 (YouTube)</option>
285
+ </select>
286
+ </div>
287
+ </div>
288
+
289
+ <label class="flex items-center space-x-3">
290
+ <input type="checkbox" class="custom-checkbox rounded text-indigo-600 focus:ring-indigo-500" checked>
291
+ <span class="text-sm text-gray-700">Auto facial tracking & reframing</span>
292
+ </label>
293
+
294
+ <div>
295
+ <label class="block text-sm font-medium text-gray-700 mb-1">Upload Logo/Watermark</label>
296
+ <input type="file" class="block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-md file:border-0 file:text-sm file:font-semibold file:bg-indigo-50 file:text-indigo-700 hover:file:bg-indigo-100" accept="image/*">
297
+ </div>
298
+
299
+ <div>
300
+ <label class="block text-sm font-medium text-gray-700 mb-1">CTA Text (e.g. Follow @username)</label>
301
+ <input type="text" class="w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
302
+ </div>
303
+ </div>
304
+ </div>
305
+ </div>
306
+
307
+ <button id="analyzeBtn" class="w-full bg-indigo-600 hover:bg-indigo-700 text-white py-3 px-4 rounded-md font-medium transition-colors disabled:opacity-50 disabled:cursor-not-allowed" disabled>
308
+ Analyze Video
309
+ </button>
310
+ </div>
311
+
312
+ <!-- Preview Panel -->
313
+ <div id="uploadPreview" class="hidden">
314
+ <div class="border border-gray-200 rounded-lg p-4 mb-4">
315
+ <div class="flex items-start">
316
+ <div class="flex-shrink-0 h-16 w-16 rounded-md overflow-hidden bg-gray-100">
317
+ <img id="videoThumbnail" src="" alt="Video thumbnail" class="h-full w-full object-cover">
318
+ </div>
319
+ <div class="ml-4 flex-1">
320
+ <h4 id="videoName" class="text-sm font-medium text-gray-900 truncate">Video file name</h4>
321
+ <p id="videoSize" class="text-sm text-gray-500">File size</p>
322
+ <p id="videoDuration" class="text-sm text-gray-500">Duration</p>
323
+ </div>
324
+ <button id="clearUpload" class="text-gray-400 hover:text-gray-500">
325
+ <i class="fas fa-times"></i>
326
+ </button>
327
+ </div>
328
+ </div>
329
+
330
+ <div class="progress-container hidden">
331
+ <div class="flex justify-between mb-1">
332
+ <span class="text-sm font-medium text-gray-700">Processing...</span>
333
+ <span class="text-sm text-gray-500 progress-percentage">0%</span>
334
+ </div>
335
+ <div class="w-full bg-gray-200 rounded-full h-2.5">
336
+ <div class="progress-bar bg-indigo-600 h-2.5 rounded-full" style="width: 0%"></div>
337
+ </div>
338
+ </div>
339
+
340
+ <div class="mt-4">
341
+ <h4 class="text-sm font-medium text-gray-700 mb-2">AI Processing Features:</h4>
342
+ <ul class="space-y-2">
343
+ <li class="flex items-center text-sm text-gray-600">
344
+ <i class="fas fa-check-circle text-green-500 mr-2"></i>
345
+ Speech recognition & keyword detection
346
+ </li>
347
+ <li class="flex items-center text-sm text-gray-600">
348
+ <i class="fas fa-check-circle text-green-500 mr-2"></i>
349
+ Emotion analysis from voice tone
350
+ </li>
351
+ <li class="flex items-center text-sm text-gray-600">
352
+ <i class="fas fa-check-circle text-green-500 mr-2"></i>
353
+ Visual excitement detection
354
+ </li>
355
+ <li class="flex items-center text-sm text-gray-600">
356
+ <i class="fas fa-check-circle text-green-500 mr-2"></i>
357
+ Automatic caption generation
358
+ </li>
359
+ </ul>
360
+ </div>
361
+ </div>
362
+ </div>
363
+
364
+ <!-- YouTube URL Option -->
365
+ <div class="mt-6 pt-6 border-t border-gray-200">
366
+ <div class="relative">
367
+ <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
368
+ <i class="fab fa-youtube text-red-500"></i>
369
+ </div>
370
+ <input type="text" id="youtubeUrl" class="block w-full pl-10 pr-12 py-3 border border-gray-300 rounded-md leading-5 bg-white placeholder-gray-500 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500" placeholder="Or paste YouTube URL">
371
+ <div class="absolute inset-y-0 right-0 flex items-center">
372
+ <button id="processYoutube" class="text-indigo-600 hover:text-indigo-800 font-medium px-4 py-2">
373
+ Process
374
+ </button>
375
+ </div>
376
+ </div>
377
+ </div>
378
+ </div>
379
+
380
+ <!-- Results Section (Initially hidden) -->
381
+ <div id="resultsSection" class="hidden">
382
+ <div class="flex flex-col md:flex-row md:justify-between md:items-center mb-6 gap-4">
383
+ <div>
384
+ <h2 class="text-2xl font-bold text-gray-900">Your AI-Generated Highlights</h2>
385
+ <p class="text-sm text-gray-500">Generated using multi-factor AI detection powered by GPT-4 and Whisper</p>
386
+ </div>
387
+ <div class="flex flex-wrap gap-2">
388
+ <div class="relative">
389
+ <button class="inline-flex items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
390
+ <i class="fas fa-download mr-2"></i> Batch Export
391
+ <i class="fas fa-chevron-down ml-2"></i>
392
+ </button>
393
+ <div class="absolute hidden right-0 mt-2 w-48 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 z-10 group-hover:block">
394
+ <div class="py-1">
395
+ <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">All Original MP4</a>
396
+ <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">All Vertical (9:16)</a>
397
+ <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">All Square (1:1)</a>
398
+ <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Complete Package (ZIP)</a>
399
+ </div>
400
+ </div>
401
+ </div>
402
+ <div class="relative" data-dropdown-toggle="exportDropdown">
403
+ <button class="inline-flex items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
404
+ <i class="fas fa-share-alt mr-2"></i> Share
405
+ <i class="fas fa-chevron-down ml-2"></i>
406
+ </button>
407
+ <div id="exportDropdown" class="hidden absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 z-10">
408
+ <div class="py-1">
409
+ <a href="#" class="flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"><i class="fab fa-tiktok mr-2 text-pink-500"></i> TikTok</a>
410
+ <a href="#" class="flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"><i class="fab fa-youtube mr-2 text-red-500"></i> YouTube Shorts</a>
411
+ <a href="#" class="flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"><i class="fab fa-instagram mr-2 text-purple-500"></i> Instagram Reels</a>
412
+ <a href="#" class="flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"><i class="fab fa-twitter mr-2 text-blue-400"></i> Twitter</a>
413
+ </div>
414
+ </div>
415
+ </div>
416
+ </div>
417
+ </div>
418
+
419
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">
420
+ <!-- Clip Preview Cards (Dynamically Generated) -->
421
+ <div class="clip-preview bg-white rounded-lg overflow-hidden shadow-md">
422
+ <div class="relative pb-[56.25%] bg-gray-100">
423
+ <img src="https://via.placeholder.com/800x450" alt="Video clip" class="absolute h-full w-full object-cover">
424
+ <div class="absolute inset-0 flex items-center justify-center">
425
+ <button class="w-16 h-16 flex items-center justify-center rounded-full bg-white bg-opacity-80 text-indigo-600 hover:bg-opacity-100 transition-all">
426
+ <i class="fas fa-play text-2xl ml-1"></i>
427
+ </button>
428
+ </div>
429
+ <span class="absolute bottom-2 right-2 bg-black bg-opacity-70 text-white text-xs px-2 py-1 rounded">0:12 - 0:28</span>
430
+ </div>
431
+ <div class="p-4">
432
+ <div class="flex justify-between items-start mb-2">
433
+ <h3 class="font-medium text-gray-900">Exciting Product Reveal</h3>
434
+ <div class="flex items-center space-x-2">
435
+ <div class="relative group">
436
+ <button class="text-gray-400 hover:text-indigo-600 tooltip">
437
+ <i class="fas fa-download"></i>
438
+ <span class="tooltip-text">Download options</span>
439
+ </button>
440
+ <div class="absolute hidden group-hover:block right-0 mt-2 w-48 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 z-10 py-1">
441
+ <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">MP4 (Original)</a>
442
+ <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">9:16 Vertical</a>
443
+ <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">1:1 Square</a>
444
+ <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">All Formats (ZIP)</a>
445
+ </div>
446
+ </div>
447
+ <button class="text-gray-400 hover:text-indigo-600 tooltip">
448
+ <i class="fas fa-closed-captioning"></i>
449
+ <span class="tooltip-text">Download captions (SRT)</span>
450
+ </button>
451
+ </div>
452
+ </div>
453
+ <div class="flex justify-between items-center mb-2">
454
+ <button class="caption-toggle text-xs text-indigo-600 hover:text-indigo-800">
455
+ <i class="fas fa-closed-captioning mr-1"></i> Toggle Captions
456
+ </button>
457
+ </div>
458
+ <p class="text-sm text-gray-600 mb-3 caption-preview" style="display: none;">
459
+ <span class="font-bold">This is</span> the most <span class="text-indigo-600 font-bold">exciting</span> feature we've ever developed!
460
+ </p>
461
+ <div class="relative mb-3">
462
+ <video class="w-full h-auto rounded-md" controls style="display: none;">
463
+ <source src="" type="video/mp4">
464
+ </video>
465
+ </div>
466
+ <div class="flex items-center text-xs text-gray-500">
467
+ <span class="inline-flex items-center mr-3">
468
+ <i class="fas fa-bolt text-yellow-500 mr-1"></i> 92% exciting
469
+ </span>
470
+ <span class="inline-flex items-center">
471
+ <i class="fas fa-chart-line text-blue-500 mr-1"></i> 12.4s
472
+ </span>
473
+ </div>
474
+ </div>
475
+ </div>
476
+
477
+ <div class="clip-preview bg-white rounded-lg overflow-hidden shadow-md">
478
+ <div class="relative pb-[56.25%] bg-gray-100">
479
+ <img src="https://via.placeholder.com/800x450" alt="Video clip" class="absolute h-full w-full object-cover">
480
+ <div class="absolute inset-0 flex items-center justify-center">
481
+ <button class="w-16 h-16 flex items-center justify-center rounded-full bg-white bg-opacity-80 text-indigo-600 hover:bg-opacity-100 transition-all">
482
+ <i class="fas fa-play text-2xl ml-1"></i>
483
+ </button>
484
+ </div>
485
+ <span class="absolute bottom-2 right-2 bg-black bg-opacity-70 text-white text-xs px-2 py-1 rounded">1:45 - 2:03</span>
486
+ </div>
487
+ <div class="p-4">
488
+ <div class="flex justify-between items-start mb-2">
489
+ <h3 class="font-medium text-gray-900">Audience Reaction</h3>
490
+ <div class="flex items-center space-x-2">
491
+ <button class="text-gray-400 hover:text-indigo-600 tooltip">
492
+ <i class="fas fa-download"></i>
493
+ <span class="tooltip-text">Download clip (MP4)</span>
494
+ </button>
495
+ <button class="text-gray-400 hover:text-indigo-600 tooltip">
496
+ <i class="fas fa-closed-captioning"></i>
497
+ <span class="tooltip-text">Download captions (SRT)</span>
498
+ </button>
499
+ </div>
500
+ </div>
501
+ <p class="text-sm text-gray-600 mb-3">Laughter and applause from the audience after humorous anecdote.</p>
502
+ <div class="flex items-center text-xs text-gray-500">
503
+ <span class="inline-flex items-center mr-3">
504
+ <i class="fas fa-laugh-squint text-pink-500 mr-1"></i> 85% funny
505
+ </span>
506
+ <span class="inline-flex items-center">
507
+ <i class="fas fa-chart-line text-blue-500 mr-1"></i> 18.7s
508
+ </span>
509
+ </div>
510
+ </div>
511
+ </div>
512
+
513
+ <div class="clip-preview bg-white rounded-lg overflow-hidden shadow-md">
514
+ <div class="relative pb-[56.25%] bg-gray-100">
515
+ <img src="https://via.placeholder.com/800x450" alt="Video clip" class="absolute h-full w-full object-cover">
516
+ <div class="absolute inset-0 flex items-center justify-center">
517
+ <button class="w-16 h-16 flex items-center justify-center rounded-full bg-white bg-opacity-80 text-indigo-600 hover:bg-opacity-100 transition-all">
518
+ <i class="fas fa-play text-2xl ml-1"></i>
519
+ </button>
520
+ </div>
521
+ <span class="absolute bottom-2 right-2 bg-black bg-opacity-70 text-white text-xs px-2 py-1 rounded">3:22 - 3:37</span>
522
+ </div>
523
+ <div class="p-4">
524
+ <div class="flex justify-between items-start mb-2">
525
+ <h3 class="font-medium text-gray-900">Key Takeaway</h3>
526
+ <div class="flex items-center space-x-2">
527
+ <button class="text-gray-400 hover:text-indigo-600 tooltip">
528
+ <i class="fas fa-download"></i>
529
+ <span class="tooltip-text">Download clip (MP4)</span>
530
+ </button>
531
+ <button class="text-gray-400 hover:text-indigo-600 tooltip">
532
+ <i class="fas fa-closed-captioning"></i>
533
+ <span class="tooltip-text">Download captions (SRT)</span>
534
+ </button>
535
+ </div>
536
+ </div>
537
+ <p class="text-sm text-gray-600 mb-3">"The most important thing to remember is consistency over intensity."</p>
538
+ <div class="flex items-center text-xs text-gray-500">
539
+ <span class="inline-flex items-center mr-3">
540
+ <i class="fas fa-lightbulb text-amber-500 mr-1"></i> 88% informative
541
+ </span>
542
+ <span class="inline-flex items-center">
543
+ <i class="fas fa-chart-line text-blue-500 mr-1"></i> 15.3s
544
+ </span>
545
+ </div>
546
+ </div>
547
+ </div>
548
+ </div>
549
+
550
+ <!-- Analytics Section -->
551
+ <div class="bg-white rounded-lg shadow p-6 mb-8">
552
+ <h3 class="text-lg font-medium text-gray-900 mb-4">Clip Analytics</h3>
553
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
554
+ <div class="border border-gray-200 rounded-lg p-4">
555
+ <div class="flex items-center">
556
+ <div class="p-3 rounded-full bg-indigo-100 text-indigo-600 mr-4">
557
+ <i class="fas fa-chart-pie"></i>
558
+ </div>
559
+ <div>
560
+ <h4 class="text-gray-500 text-sm font-medium">Most Engaging Clip</h4>
561
+ <p class="text-lg font-semibold">Exciting Product Reveal</p>
562
+ </div>
563
+ </div>
564
+ </div>
565
+ <div class="border border-gray-200 rounded-lg p-4">
566
+ <div class="flex items-center">
567
+ <div class="p-3 rounded-full bg-green-100 text-green-600 mr-4">
568
+ <i class="fas fa-stopwatch"></i>
569
+ </div>
570
+ <div>
571
+ <h4 class="text-gray-500 text-sm font-medium">Average Engagement</h4>
572
+ <p class="text-lg font-semibold">92%</p>
573
+ </div>
574
+ </div>
575
+ </div>
576
+ <div class="border border-gray-200 rounded-lg p-4">
577
+ <div class="flex items-center">
578
+ <div class="p-3 rounded-full bg-blue-100 text-blue-600 mr-4">
579
+ <i class="fas fa-tags"></i>
580
+ </div>
581
+ <div>
582
+ <h4 class="text-gray-500 text-sm font-medium">Top Keywords</h4>
583
+ <p class="text-lg font-semibold">feature, exciting, important</p>
584
+ </div>
585
+ </div>
586
+ </div>
587
+ </div>
588
+ </div>
589
+
590
+ <!-- Feedback Section -->
591
+ <div class="bg-indigo-50 rounded-lg p-6">
592
+ <h3 class="text-lg font-medium text-gray-900 mb-2">Help Improve Our AI</h3>
593
+ <p class="text-gray-600 mb-4">How accurate were these highlights for your video?</p>
594
+ <div class="flex items-center space-x-4">
595
+ <button class="flex-1 bg-white hover:bg-gray-50 text-gray-800 py-2 px-4 border border-gray-300 rounded-md shadow-sm text-sm font-medium focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
596
+ <i class="fas fa-frown text-yellow-500 mr-2"></i> Not Very Accurate
597
+ </button>
598
+ <button class="flex-1 bg-white hover:bg-gray-50 text-gray-800 py-2 px-4 border border-gray-300 rounded-md shadow-sm text-sm font-medium focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
599
+ <i class="fas fa-meh text-indigo-500 mr-2"></i> Somewhat Accurate
600
+ </button>
601
+ <button class="flex-1 bg-white hover:bg-gray-50 text-gray-800 py-2 px-4 border border-gray-300 rounded-md shadow-sm text-sm font-medium focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
602
+ <i class="fas fa-grin text-green-500 mr-2"></i> Very Accurate
603
+ </button>
604
+ </div>
605
+ </div>
606
+ </div>
607
+ </div>
608
+
609
+ <!-- Footer -->
610
+ <footer class="bg-white border-t border-gray-200">
611
+ <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8">
612
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
613
+ <div class="col-span-1">
614
+ <h3 class="text-lg font-medium text-gray-900 mb-4">ClipGenius</h3>
615
+ <p class="text-gray-500 text-sm">AI-powered video highlight generation for content creators, marketers, and video professionals.</p>
616
+ </div>
617
+ <div>
618
+ <h4 class="text-sm font-semibold text-gray-900 uppercase tracking-wider mb-4">Product</h4>
619
+ <ul class="space-y-2">
620
+ <li><a href="#" class="text-gray-500 hover:text-gray-900">Features</a></li>
621
+ <li><a href="#" class="text-gray-500 hover:text-gray-900">Pricing</a></li>
622
+ <li><a href="#" class="text-gray-500 hover:text-gray-900">API</a></li>
623
+ <li><a href="#" class="text-gray-500 hover:text-gray-900">Integrations</a></li>
624
+ </ul>
625
+ </div>
626
+ <div>
627
+ <h4 class="text-sm font-semibold text-gray-900 uppercase tracking-wider mb-4">Resources</h4>
628
+ <ul class="space-y-2">
629
+ <li><a href="#" class="text-gray-500 hover:text-gray-900">Documentation</a></li>
630
+ <li><a href="#" class="text-gray-500 hover:text-gray-900">Guides</a></li>
631
+ <li><a href="#" class="text-gray-500 hover:text-gray-900">Blog</a></li>
632
+ <li><a href="#" class="text-gray-500 hover:text-gray-900">Support</a></li>
633
+ </ul>
634
+ </div>
635
+ <div>
636
+ <h4 class="text-sm font-semibold text-gray-900 uppercase tracking-wider mb-4">Company</h4>
637
+ <ul class="space-y-2">
638
+ <li><a href="#" class="text-gray-500 hover:text-gray-900">About</a></li>
639
+ <li><a href="#" class="text-gray-500 hover:text-gray-900">Careers</a></li>
640
+ <li><a href="#" class="text-gray-500 hover:text-gray-900">Privacy</a></li>
641
+ <li><a href="#" class="text-gray-500 hover:text-gray-900">Terms</a></li>
642
+ </ul>
643
+ </div>
644
+ </div>
645
+ <div class="mt-12 pt-8 border-t border-gray-200 flex flex-col items-center">
646
+ <div class="flex justify-center space-x-6">
647
+ <a href="#" class="text-gray-400 hover:text-gray-500">
648
+ <i class="fab fa-facebook-f"></i>
649
+ </a>
650
+ <a href="#" class="text-gray-400 hover:text-gray-500">
651
+ <i class="fab fa-twitter"></i>
652
+ </a>
653
+ <a href="#" class="text-gray-400 hover:text-gray-500">
654
+ <i class="fab fa-instagram"></i>
655
+ </a>
656
+ <a href="#" class="text-gray-400 hover:text-gray-500">
657
+ <i class="fab fa-linkedin-in"></i>
658
+ </a>
659
+ <a href="#" class="text-gray-400 hover:text-gray-500">
660
+ <i class="fab fa-youtube"></i>
661
+ </a>
662
+ </div>
663
+ <p class="mt-8 text-center text-gray-400 text-sm">
664
+ &copy; 2023 ClipGenius. All rights reserved.
665
+ </p>
666
+ </div>
667
+
668
+ <!-- AI Hashtag Generator -->
669
+ <div class="bg-white rounded-lg shadow p-6 mb-8">
670
+ <h3 class="text-lg font-medium text-gray-900 mb-2">AI-Powered Hashtags</h3>
671
+ <p class="text-gray-600 mb-4">Optimized hashtags generated based on your video content</p>
672
+
673
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
674
+ <div class="border border-gray-200 rounded-lg p-4">
675
+ <div class="flex items-center mb-2">
676
+ <i class="fab fa-tiktok text-gray-700 mr-2"></i>
677
+ <h4 class="font-medium">TikTok Hashtags</h4>
678
+ </div>
679
+ <p class="text-sm">#viral #productreveal #unboxing #tech #shocking</p>
680
+ </div>
681
+ <div class="border border-gray-200 rounded-lg p-4">
682
+ <div class="flex items-center mb-2">
683
+ <i class="fab fa-instagram text-purple-600 mr-2"></i>
684
+ <h4 class="font-medium">Instagram Hashtags</h4>
685
+ </div>
686
+ <p class="text-sm">#trending #techreview #gadget #musthave #2024tech</p>
687
+ </div>
688
+ <div class="border border-gray-200 rounded-lg p-4">
689
+ <div class="flex items-center mb-2">
690
+ <i class="fab fa-youtube text-red-600 mr-2"></i>
691
+ <h4 class="font-medium">YouTube Hashtags</h4>
692
+ </div>
693
+ <p class="text-sm">#TechReview #GadgetUnboxing #ProductLaunch #ViralMoment</p>
694
+ </div>
695
+ </div>
696
+ </div>
697
+ </div>
698
+ </footer>
699
+
700
+ <!-- Video Modal -->
701
+ <div id="videoModal" class="fixed inset-0 z-50 hidden overflow-y-auto">
702
+ <div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
703
+ <div class="fixed inset-0 transition-opacity" aria-hidden="true">
704
+ <div class="absolute inset-0 bg-gray-500 opacity-75"></div>
705
+ </div>
706
+ <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
707
+ <div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-3xl sm:w-full">
708
+ <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
709
+ <div class="sm:flex sm:items-start">
710
+ <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left w-full">
711
+ <div class="flex justify-between items-center mb-4">
712
+ <h3 class="text-lg leading-6 font-medium text-gray-900">Clip Preview</h3>
713
+ <button id="closeModal" type="button" class="text-gray-400 hover:text-gray-500">
714
+ <i class="fas fa-times"></i>
715
+ </button>
716
+ </div>
717
+ <div class="relative pb-[56.25%] bg-black">
718
+ <video id="clipPlayer" controls class="absolute h-full w-full">
719
+ <source src="" type="video/mp4">
720
+ Your browser does not support the video tag.
721
+ </video>
722
+ </div>
723
+ <div class="mt-4">
724
+ <h4 class="font-medium text-gray-900" id="modalClipTitle">Clip Title</h4>
725
+ <p class="text-gray-600 mt-1 text-sm" id="modalClipDescription">Clip description goes here</p>
726
+ </div>
727
+ </div>
728
+ </div>
729
+ </div>
730
+ <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
731
+ <button type="button" class="download-clip w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-indigo-600 text-base font-medium text-white hover:bg-indigo-700 focus:outline-none sm:ml-3 sm:w-auto sm:text-sm">
732
+ <i class="fas fa-download mr-2"></i> Download Clip
733
+ </button>
734
+ <button type="button" class="download-captions mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">
735
+ <i class="fas fa-closed-captioning mr-2"></i> Download Captions
736
+ </button>
737
+ </div>
738
+ </div>
739
+ </div>
740
+ </div>
741
+
742
+ <script>
743
+ // Mobile menu toggle
744
+ const mobileMenuButton = document.querySelector('.mobile-menu-button');
745
+ const mobileMenu = document.querySelector('.mobile-menu');
746
+
747
+ mobileMenuButton.addEventListener('click', () => {
748
+ mobileMenu.classList.toggle('hidden');
749
+ });
750
+
751
+ // Upload functionality
752
+ const uploadContainer = document.getElementById('uploadContainer');
753
+ const videoUpload = document.getElementById('videoUpload');
754
+ const uploadTrigger = document.querySelector('.upload-trigger');
755
+ const uploadPreview = document.getElementById('uploadPreview');
756
+ const analyzeBtn = document.getElementById('analyzeBtn');
757
+ const clearUpload = document.getElementById('clearUpload');
758
+ const toggleAdvanced = document.getElementById('toggleAdvanced');
759
+ const advancedOptions = document.getElementById('advancedOptions');
760
+ const resultsSection = document.getElementById('resultsSection');
761
+ const progressContainer = document.querySelector('.progress-container');
762
+ const progressBar = document.querySelector('.progress-bar');
763
+ const progressPercentage = document.querySelector('.progress-percentage');
764
+ const youtubeUrl = document.getElementById('youtubeUrl');
765
+ const processYoutube = document.getElementById('processYoutube');
766
+ const exportDropdown = document.getElementById('exportDropdown');
767
+ const videoModal = document.getElementById('videoModal');
768
+ const closeModal = document.getElementById('closeModal');
769
+ const clipPlayer = document.getElementById('clipPlayer');
770
+
771
+ // Trigger file input when clicking anywhere in the upload container
772
+ uploadContainer.addEventListener('click', () => {
773
+ videoUpload.click();
774
+ });
775
+
776
+ uploadTrigger.addEventListener('click', () => {
777
+ videoUpload.click();
778
+ });
779
+
780
+ // Handle drag and drop
781
+ ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
782
+ uploadContainer.addEventListener(eventName, preventDefaults, false);
783
+ });
784
+
785
+ function preventDefaults(e) {
786
+ e.preventDefault();
787
+ e.stopPropagation();
788
+ }
789
+
790
+ ['dragenter', 'dragover'].forEach(eventName => {
791
+ uploadContainer.addEventListener(eventName, highlight, false);
792
+ });
793
+
794
+ ['dragleave', 'drop'].forEach(eventName => {
795
+ uploadContainer.addEventListener(eventName, unhighlight, false);
796
+ });
797
+
798
+ function highlight() {
799
+ uploadContainer.classList.add('drag-over');
800
+ }
801
+
802
+ function unhighlight() {
803
+ uploadContainer.classList.remove('drag-over');
804
+ }
805
+
806
+ // Handle dropped files
807
+ uploadContainer.addEventListener('drop', handleDrop, false);
808
+
809
+ function handleDrop(e) {
810
+ const dt = e.dataTransfer;
811
+ const files = dt.files;
812
+ handleFiles(files);
813
+ }
814
+
815
+ // Handle selected files
816
+ videoUpload.addEventListener('change', function() {
817
+ if (this.files.length) {
818
+ handleFiles(this.files);
819
+ }
820
+ });
821
+
822
+ // AI Processing Functions
823
+ function analyzeVideo(file) {
824
+ return new Promise((resolve) => {
825
+ // Simulate AI processing with mock data
826
+ setTimeout(() => {
827
+ resolve({
828
+ clips: [
829
+ { start: 12.4, end: 28.7, score: 92, type: 'exciting' },
830
+ { start: 104.1, end: 118.3, score: 85, type: 'funny' },
831
+ { start: 195.6, end: 210.9, score: 88, type: 'informative' }
832
+ ],
833
+ keywords: ['feature', 'exciting', 'important', 'reveal'],
834
+ emotions: ['surprise', 'joy', 'anticipation'],
835
+ transcript: {
836
+ text: "This is the most exciting feature we've ever developed! Wait until you see what it can do.",
837
+ words: [
838
+ { word: "This", start: 12.4, end: 12.7 },
839
+ { word: "is", start: 12.7, end: 12.9 }
840
+ ]
841
+ }
842
+ });
843
+ }, 1000);
844
+ });
845
+ }
846
+
847
+ function generateAITitles(clip) {
848
+ return [
849
+ `Wait until you see this ${clip.type} moment!`,
850
+ `This ${clip.type} clip will surprise you`,
851
+ `No one expected this ${clip.type} reveal`
852
+ ];
853
+ }
854
+
855
+ function generateHashtags(clip) {
856
+ const base = {
857
+ exciting: ['viral', 'wow', 'amazing'],
858
+ funny: ['comedy', 'lol', 'hilarious'],
859
+ informative: ['learn', 'howto', 'tips']
860
+ };
861
+ return base[clip.type] || base.exciting;
862
+ }
863
+
864
+ async function handleFiles(files) {
865
+ const file = files[0];
866
+
867
+ // Check file size (max 4GB)
868
+ if (file.size > 4 * 1024 * 1024 * 1024) {
869
+ alert('File too large. Maximum size is 4GB.');
870
+ return;
871
+ }
872
+
873
+ if (!file.type.match('video.*')) {
874
+ alert('Please select a video file (MP4, MOV, AVI)');
875
+ return;
876
+ }
877
+
878
+ // Show preview
879
+ showFilePreview(file);
880
+
881
+ // Start AI analysis
882
+ const analysis = await analyzeVideo(file);
883
+ console.log('AI Analysis:', analysis);
884
+
885
+ // Process would continue with generating clip previews, titles etc...
886
+ }
887
+
888
+ function showFilePreview(file) {
889
+ const videoName = document.getElementById('videoName');
890
+ const videoSize = document.getElementById('videoSize');
891
+ const videoThumbnail = document.getElementById('videoThumbnail');
892
+ const videoDuration = document.getElementById('videoDuration');
893
+
894
+ videoName.textContent = file.name;
895
+ videoSize.textContent = formatFileSize(file.size);
896
+
897
+ // Generate thumbnail (simplified - in real app you would create from video)
898
+ const videoURL = URL.createObjectURL(file);
899
+ videoThumbnail.src = 'https://via.placeholder.com/800x450';
900
+
901
+ // Simple duration simulation
902
+ videoDuration.textContent = '1:45';
903
+
904
+ // Show preview and enable analyze button
905
+ uploadPreview.classList.remove('hidden');
906
+ uploadContainer.classList.add('hidden');
907
+ analyzeBtn.disabled = false;
908
+ }
909
+
910
+ clearUpload.addEventListener('click', () => {
911
+ videoUpload.value = '';
912
+ uploadPreview.classList.add('hidden');
913
+ uploadContainer.classList.remove('hidden');
914
+ analyzeBtn.disabled = true;
915
+ });
916
+
917
+ toggleAdvanced.addEventListener('click', () => {
918
+ advancedOptions.classList.toggle('hidden');
919
+ const icon = toggleAdvanced.querySelector('i');
920
+ if (advancedOptions.classList.contains('hidden')) {
921
+ icon.classList.remove('fa-chevron-up');
922
+ icon.classList.add('fa-chevron-down');
923
+ } else {
924
+ icon.classList.remove('fa-chevron-down');
925
+ icon.classList.add('fa-chevron-up');
926
+ }
927
+ });
928
+
929
+ analyzeBtn.addEventListener('click', () => {
930
+ progressContainer.classList.remove('hidden');
931
+
932
+ // Simulate processing
933
+ let progress = 0;
934
+ const interval = setInterval(() => {
935
+ progress += Math.random() * 10;
936
+ if (progress >= 100) {
937
+ progress = 100;
938
+ clearInterval(interval);
939
+
940
+ // Show results after delay to simulate processing complete
941
+ setTimeout(() => {
942
+ progressContainer.classList.add('hidden');
943
+ resultsSection.classList.remove('hidden');
944
+
945
+ // Scroll to results
946
+ document.getElementById('resultsSection').scrollIntoView({ behavior: 'smooth' });
947
+ }, 500);
948
+ }
949
+
950
+ progressBar.style.width = `${progress}%`;
951
+ progressPercentage.textContent = `${Math.round(progress)}%`;
952
+ }, 300);
953
+ });
954
+
955
+ processYoutube.addEventListener('click', () => {
956
+ if (youtubeUrl.value.trim() === '' || !isValidYouTubeUrl(youtubeUrl.value)) {
957
+ alert('Please enter a valid YouTube URL');
958
+ return;
959
+ }
960
+
961
+ // Show preview with YouTube data
962
+ const videoName = document.getElementById('videoName');
963
+ const videoSize = document.getElementById('videoSize');
964
+ const videoThumbnail = document.getElementById('videoThumbnail');
965
+ const videoDuration = document.getElementById('videoDuration');
966
+
967
+ // These would come from YouTube API in a real app
968
+ videoName.textContent = 'YouTube Video';
969
+ videoSize.textContent = 'YouTube source';
970
+ videoThumbnail.src = 'https://via.placeholder.com/800x450';
971
+ videoDuration.textContent = '2:30';
972
+
973
+ // Show preview and enable analyze button
974
+ uploadPreview.classList.remove('hidden');
975
+ uploadContainer.classList.add('hidden');
976
+ analyzeBtn.disabled = false;
977
+ youtubeUrl.value = '';
978
+ });
979
+
980
+ function isValidYouTubeUrl(url) {
981
+ // Simple validation
982
+ return url.includes('youtube.com') || url.includes('youtu.be');
983
+ }
984
+
985
+ function formatFileSize(bytes) {
986
+ if (bytes === 0) return '0 Bytes';
987
+ const k = 1024;
988
+ const sizes = ['Bytes', 'KB', 'MB', 'GB'];
989
+ const i = Math.floor(Math.log(bytes) / Math.log(k));
990
+ return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
991
+ }
992
+
993
+ // Handle export dropdown
994
+ document.querySelector('[data-dropdown-toggle="exportDropdown"]').addEventListener('click', function() {
995
+ exportDropdown.classList.toggle('hidden');
996
+ });
997
+
998
+ // Close dropdown when clicking outside
999
+ document.addEventListener('click', function(event) {
1000
+ if (!event.target.closest('[data-dropdown-toggle="exportDropdown"]')) {
1001
+ exportDropdown.classList.add('hidden');
1002
+ }
1003
+ });
1004
+
1005
+ // Video modal functionality
1006
+ document.querySelectorAll('.clip-preview .fa-play').forEach(playButton => {
1007
+ playButton.addEventListener('click', function(e) {
1008
+ e.stopPropagation();
1009
+ const clipCard = this.closest('.clip-preview');
1010
+ const clipTitle = clipCard.querySelector('h3').textContent;
1011
+ const clipDescription = clipCard.querySelector('p').textContent;
1012
+
1013
+ // In a real app, set the actual video source
1014
+ document.getElementById('modalClipTitle').textContent = clipTitle;
1015
+ document.getElementById('modalClipDescription').textContent = clipDescription;
1016
+
1017
+ videoModal.classList.remove('hidden');
1018
+ document.body.style.overflow = 'hidden';
1019
+ });
1020
+ });
1021
+
1022
+ closeModal.addEventListener('click', () => {
1023
+ videoModal.classList.add('hidden');
1024
+ document.body.style.overflow = 'auto';
1025
+ clipPlayer.pause();
1026
+ });
1027
+
1028
+ videoModal.addEventListener('click', function(e) {
1029
+ if (e.target === this) {
1030
+ videoModal.classList.add('hidden');
1031
+ document.body.style.overflow = 'auto';
1032
+ clipPlayer.pause();
1033
+ }
1034
+ });
1035
+
1036
+ // Caption toggle functionality
1037
+ document.querySelectorAll('.caption-toggle').forEach(button => {
1038
+ button.addEventListener('click', function(e) {
1039
+ e.preventDefault();
1040
+ e.stopPropagation();
1041
+ const clipCard = this.closest('.clip-preview');
1042
+ const captionPreview = clipCard.querySelector('.caption-preview');
1043
+ const videoPreview = clipCard.querySelector('video');
1044
+
1045
+ if (captionPreview.style.display === 'none') {
1046
+ captionPreview.style.display = 'block';
1047
+ videoPreview.style.display = 'none';
1048
+ } else {
1049
+ captionPreview.style.display = 'none';
1050
+ videoPreview.style.display = 'block';
1051
+ }
1052
+ });
1053
+ });
1054
+
1055
+ // Handle format selection
1056
+ document.querySelectorAll('.format-select').forEach(select => {
1057
+ select.addEventListener('change', function() {
1058
+ const clipId = this.dataset.clipId;
1059
+ // In a real app, this would update the clip format
1060
+ console.log(`Changed format for clip ${clipId} to ${this.value}`);
1061
+ });
1062
+ });
1063
+
1064
+ // Handle batch downloads
1065
+ document.querySelectorAll('.batch-download').forEach(button => {
1066
+ button.addEventListener('click', function(e) {
1067
+ const format = this.dataset.format;
1068
+ // In a real app, this would trigger download of all clips in specified format
1069
+ console.log(`Downloading all clips in ${format} format`);
1070
+ });
1071
+ });
1072
+ document.querySelectorAll('.clip-preview').forEach(preview => {
1073
+ preview.addEventListener('click', function() {
1074
+ const clipTitle = this.querySelector('h3').textContent;
1075
+ const clipDescription = this.querySelector('p').textContent;
1076
+
1077
+ document.getElementById('modalClipTitle').textContent = clipTitle;
1078
+ document.getElementById('modalClipDescription').textContent = clipDescription;
1079
+
1080
+ videoModal.classList.remove('hidden');
1081
+ document.body.style.overflow = 'hidden';
1082
+ });
1083
+ });
1084
+ </script>
1085
+ <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=WasaD13/wasa-test" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
1086
+ </html>
prompts.txt ADDED
@@ -0,0 +1 @@
 
 
1
+ Prompt: Build a Viral Video AI Better Than OpusClip "Enhance my current video upload website with a professional-grade, AI-powered clip generator that outperforms OpusClip in precision, control, and social-readiness. This add-on should automate the viral content process for creators and provide powerful editing control directly in the browser." 🔧 Features to Add (Outperform OpusClip): 🔹 1. AI-Powered Auto-Clip Engine Extract 3–10 short clips from videos up to 4GB in size Use multi-factor highlight detection: NLP-based excitement and hook detection (e.g., “what just happened”, “you won’t believe…”) Volume/voice intensity spikes Facial emotion detection or scene change tracking Let users select a "Style" preset: Funny, Motivational, Educational, or Drama/Hot Takes Add a manual override toggle: if users disagree with AI, they can re-pick timestamps or delete clips before export 🔹 2. Advanced Captions (Better Than Opus) Use OpenAI Whisper or Deepgram to generate hyper-accurate word-level transcripts Auto-style captions like: Bolded keywords Bounce/fade-in effects Emoji and color injection Support for multiple caption fonts Allow export with: Burned-in captions (MP4) SRT/VTT download Captions in both standard and viral styles 🔹 3. Dynamic Framing + Resizing (AI Smart Reframing) Smart subject tracking using AI (e.g., center face or body) Generate all major formats: 9:16 (TikTok/Reels/Shorts) 1:1 (Instagram feed) 16:9 (YouTube/Landscape) Apply safe-zone overlays to prevent cropping out text/speaker 🔹 4. Visual Enhancements & Branding Tools Optional Top/Bottom Bar overlays with: Auto titles: Hook-based using GPT ("He Didn’t See That Coming…") Profile handle or CTA (“Follow @Wasa”) Built-in zoom/pan effect and motion tracking (Ken Burns style) Color themes and preset animation packs for text and overlays User uploads a logo or watermark to apply across all clips 🔹 5. Export Options & Batch Downloads Clip preview carousel with: Format picker (MP4, square, vertical) Toggle captions on/off Select clips to include in ZIP Export includes: MP4 clip Caption file (SRT/VTT) JSON with clip metadata (timestamps, summary, emotion score) 🔹 6. Bonus: AI Titles + Hashtag Generator Generate 3+ clip titles using GPT-4 based on each highlight Recommend hashtags per platform (TikTok, YT, IG) using content tags ⚙️ Technical Instructions for AI Backend Additions Integrate FFmpeg (trimming, formatting, caption burning) Use Whisper (or Deepgram) for transcription Clip scoring model using: Hugging Face (e.g., sentiment/emotion classifiers) NLP keyword match + energy curve from audio Add a task queue (Celery or similar) to process large files async Max upload size: 4GB (enforced via server config & client check) Frontend Additions New dashboard: “Clip Generator” Upload → Process → Preview & Customize → Download Live clip preview with format/caption toggles Caption styling UI (font, color, animation) Clip filtering (remove unwanted clips) Storage/Timeout Store processed clips & files for 24 hours, then auto-delete to save space ✅ Output Summary Feature Better Than OpusClip Because… Highlight Detection Uses multi-layer emotion, keyword, and speech excitement Captions Fully stylized, animated, font-controlled Format Options Auto-reframes in 3 social formats Customization Manual clip editing + branding overlays AI Titles/Hashtags GPT integration for hooks & virality User Branding Logo watermark + CTA text