Hugging Face's logo

Spaces:
ChetanSaifsAi
/
AI_Sound_Effect_Generator
Running

App Files Community
ChetanSaifsAi commited on
Commit
4a0ef5d
·
verified ·
1 Parent(s): bf1a35e

Ai_Sound_effect_Generator

Browse files

Looking to add audio to video online? Saif's AI Sound Effect Generator makes it easy to put sound to video and insert audio to video with just a few clicks. Our audio to video AI technology automatically analyzes your content and adds perfectly matched sound effects. Whether you need to put music in a video or add ambient sounds, our AI understands your video's context and creates the perfect soundtrack. No more searching through endless sound libraries or struggling with manual timing - our free AI sound effect generator does it all!

Try Now For Free
No credit card required

Files changed (3) hide show
  1. app.js +47 -0
  2. index.html +68 -19
  3. style.css +212 -28
app.js ADDED
@@ -0,0 +1,47 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ new Vue({
2
+ el: '#app',
3
+ data: {
4
+ isDragging: false,
5
+ videoPreview: null,
6
+ soundDescription: '',
7
+ selectedFile: null
8
+ },
9
+ methods: {
10
+ handleFileDrop(e) {
11
+ this.isDragging = false;
12
+ const file = e.dataTransfer.files[0];
13
+ if (file && file.type.startsWith('video/')) {
14
+ this.handleFile(file);
15
+ } else {
16
+ alert('Please upload a video file (MP4, MOV, or AVI)');
17
+ }
18
+ },
19
+ handleFileSelect(e) {
20
+ const file = e.target.files[0];
21
+ if (file) {
22
+ this.handleFile(file);
23
+ }
24
+ },
25
+ handleFile(file) {
26
+ if (file.size > 100 * 1024 * 1024) { // 100MB limit
27
+ alert('File size must be less than 100MB');
28
+ return;
29
+ }
30
+
31
+ const validTypes = ['video/mp4', 'video/quicktime', 'video/x-msvideo'];
32
+ if (!validTypes.includes(file.type)) {
33
+ alert('Please upload a valid video file (MP4, MOV, or AVI)');
34
+ return;
35
+ }
36
+
37
+ this.selectedFile = file;
38
+ this.videoPreview = URL.createObjectURL(file);
39
+ }
40
+ },
41
+ beforeDestroy() {
42
+ // Clean up video preview URL
43
+ if (this.videoPreview) {
44
+ URL.revokeObjectURL(this.videoPreview);
45
+ }
46
+ }
47
+ });
index.html CHANGED
@@ -1,19 +1,68 @@
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>Add Audio to Video with AI Sound Effect Generator | Saifs.ai</title>
7
+ <meta name="description" content="Upload your video and let our AI add sound to video - Insert audio, music, or AI-generated sound effects to your videos online">
8
+ <link rel="stylesheet" href="style.css">
9
+ <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
10
+ </head>
11
+ <body>
12
+ <div id="app">
13
+ <main>
14
+ <section class="hero">
15
+ <h1>Add Audio to Video with AI Sound Effect Generator</h1>
16
+ <p>Upload your video and let our AI add sound to video - Insert audio, music, or AI-generated sound effects to your videos online</p>
17
+ <div class="hero-border"></div>
18
+ </section>
19
+
20
+ <section class="upload-container">
21
+ <div class="card">
22
+ <div class="flex-container">
23
+ <!-- Left side - Upload -->
24
+ <div class="upload-section">
25
+ <div class="upload-area" :class="{ 'drag-over': isDragging }"
26
+ @dragover.prevent="isDragging = true"
27
+ @dragleave.prevent="isDragging = false"
28
+ @drop.prevent="handleFileDrop">
29
+ <div class="upload-icon">
30
+ <svg viewBox="0 0 24 24" width="48" height="48" fill="currentColor">
31
+ <path d="M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM14 13v4h-4v-4H7l5-5 5 5h-3z"/>
32
+ </svg>
33
+ </div>
34
+ <div class="upload-text">
35
+ <p>Drag and drop your video here or click to browse</p>
36
+ <p class="upload-formats">Supported formats: MP4, MOV, AVI (Max 100MB)</p>
37
+ </div>
38
+ <input type="file" ref="fileInput" @change="handleFileSelect" accept="video/*" class="file-input">
39
+ </div>
40
+ </div>
41
+
42
+ <!-- Right side - Preview -->
43
+ <div class="preview-section">
44
+ <div class="music-icon">
45
+ <svg viewBox="0 0 24 24" width="48" height="48" fill="#6366f1">
46
+ <path d="M12 3v10.55c-.59-.34-1.27-.55-2-.55-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4V7h4V3h-6z"/>
47
+ </svg>
48
+ </div>
49
+ <p class="preview-text">Your enhanced video will appear here</p>
50
+ </div>
51
+ </div>
52
+
53
+ <div class="input-section">
54
+ <input type="text"
55
+ v-model="soundDescription"
56
+ placeholder="Describe the sound effects you want (e.g., 'ambient background music')"
57
+ class="sound-input">
58
+ <a href="https://saifs.ai/ai-sound-effect-generator" class="generate-btn">
59
+ <span class="btn-icon">✨</span> Generate Sound Effects
60
+ </a>
61
+ </div>
62
+ </div>
63
+ </section>
64
+ </main>
65
+ </div>
66
+ <script src="app.js"></script>
67
+ </body>
68
+ </html>
style.css CHANGED
@@ -1,28 +1,212 @@
1
- body {
2
- padding: 2rem;
3
- font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
4
- }
5
-
6
- h1 {
7
- font-size: 16px;
8
- margin-top: 0;
9
- }
10
-
11
- p {
12
- color: rgb(107, 114, 128);
13
- font-size: 15px;
14
- margin-bottom: 10px;
15
- margin-top: 5px;
16
- }
17
-
18
- .card {
19
- max-width: 620px;
20
- margin: 0 auto;
21
- padding: 16px;
22
- border: 1px solid lightgray;
23
- border-radius: 16px;
24
- }
25
-
26
- .card p:last-child {
27
- margin-bottom: 0;
28
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ :root {
2
+ --primary-color: #6366f1;
3
+ --secondary-color: #818cf8;
4
+ --background-color: #f3f4f6;
5
+ --text-color: #1e293b;
6
+ --border-color: #e2e8f0;
7
+ --card-bg: #ffffff;
8
+ }
9
+
10
+ * {
11
+ margin: 0;
12
+ padding: 0;
13
+ box-sizing: border-box;
14
+ }
15
+
16
+ body {
17
+ font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
18
+ background-color: var(--background-color);
19
+ color: var(--text-color);
20
+ line-height: 1.6;
21
+ }
22
+
23
+ #app {
24
+ min-height: 100vh;
25
+ display: flex;
26
+ flex-direction: column;
27
+ }
28
+
29
+ main {
30
+ flex: 1;
31
+ max-width: 1200px;
32
+ margin: 0 auto;
33
+ padding: 2rem;
34
+ }
35
+
36
+ .hero {
37
+ text-align: center;
38
+ margin-bottom: 2rem;
39
+ position: relative;
40
+ padding-bottom: 2rem;
41
+ }
42
+
43
+ .hero h1 {
44
+ font-size: 2.5rem;
45
+ margin-bottom: 1rem;
46
+ color: var(--text-color);
47
+ }
48
+
49
+ .hero p {
50
+ color: #64748b;
51
+ max-width: 800px;
52
+ margin: 0 auto;
53
+ }
54
+
55
+ .hero-border {
56
+ position: absolute;
57
+ bottom: 0;
58
+ left: 50%;
59
+ transform: translateX(-50%);
60
+ width: 100%;
61
+ max-width: 800px;
62
+ height: 2px;
63
+ background: linear-gradient(to right, transparent, var(--primary-color), transparent);
64
+ }
65
+
66
+ .upload-container {
67
+ max-width: 1000px;
68
+ margin: 0 auto;
69
+ }
70
+
71
+ .card {
72
+ background: var(--card-bg);
73
+ border-radius: 1rem;
74
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
75
+ padding: 2rem;
76
+ }
77
+
78
+ .flex-container {
79
+ display: flex;
80
+ gap: 2rem;
81
+ margin-bottom: 2rem;
82
+ }
83
+
84
+ .upload-section {
85
+ flex: 1;
86
+ }
87
+
88
+ .upload-area {
89
+ border: 2px dashed #e5e7eb;
90
+ border-radius: 0.5rem;
91
+ padding: 2rem;
92
+ text-align: center;
93
+ cursor: pointer;
94
+ transition: all 0.3s ease;
95
+ background-color: #f9fafb;
96
+ height: 100%;
97
+ display: flex;
98
+ flex-direction: column;
99
+ justify-content: center;
100
+ align-items: center;
101
+ }
102
+
103
+ .upload-area:hover, .upload-area.drag-over {
104
+ border-color: var(--primary-color);
105
+ background-color: #f3f4f6;
106
+ }
107
+
108
+ .upload-icon {
109
+ color: var(--primary-color);
110
+ margin-bottom: 1rem;
111
+ }
112
+
113
+ .upload-text p {
114
+ margin-bottom: 0.5rem;
115
+ }
116
+
117
+ .upload-formats {
118
+ color: #64748b;
119
+ font-size: 0.875rem;
120
+ }
121
+
122
+ .file-input {
123
+ display: none;
124
+ }
125
+
126
+ .preview-section {
127
+ flex: 1;
128
+ display: flex;
129
+ flex-direction: column;
130
+ align-items: center;
131
+ justify-content: center;
132
+ padding: 2rem;
133
+ background-color: #f9fafb;
134
+ border-radius: 0.5rem;
135
+ }
136
+
137
+ .music-icon {
138
+ margin-bottom: 1rem;
139
+ }
140
+
141
+ .preview-text {
142
+ color: #64748b;
143
+ font-size: 0.875rem;
144
+ }
145
+
146
+ .input-section {
147
+ display: flex;
148
+ flex-direction: column;
149
+ gap: 1rem;
150
+ }
151
+
152
+ .sound-input {
153
+ width: 100%;
154
+ padding: 0.75rem;
155
+ border: 1px solid var(--border-color);
156
+ border-radius: 0.375rem;
157
+ font-size: 0.875rem;
158
+ outline: none;
159
+ }
160
+
161
+ .sound-input:focus {
162
+ border-color: var(--primary-color);
163
+ box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.1);
164
+ }
165
+
166
+ .generate-btn {
167
+ background-color: var(--primary-color);
168
+ color: white;
169
+ border: none;
170
+ padding: 0.75rem;
171
+ border-radius: 0.375rem;
172
+ cursor: pointer;
173
+ font-size: 0.875rem;
174
+ font-weight: 500;
175
+ display: flex;
176
+ align-items: center;
177
+ justify-content: center;
178
+ gap: 0.5rem;
179
+ transition: background-color 0.3s ease;
180
+ text-decoration: none;
181
+ }
182
+
183
+ .btn-icon {
184
+ font-size: 1.25rem;
185
+ }
186
+
187
+ .generate-btn:hover {
188
+ background-color: var(--secondary-color);
189
+ }
190
+
191
+ @media (max-width: 768px) {
192
+ .hero h1 {
193
+ font-size: 1.75rem;
194
+ }
195
+
196
+ main {
197
+ padding: 1rem;
198
+ }
199
+
200
+ .card {
201
+ padding: 1rem;
202
+ }
203
+
204
+ .flex-container {
205
+ flex-direction: column;
206
+ gap: 1rem;
207
+ }
208
+
209
+ .upload-area {
210
+ padding: 1.5rem;
211
+ }
212
+ }