Hugging Face's logo

Spaces:
bep40
/
bep40-ai-tool
Running

App Files Community
bep40 commited on
Commit
031cd0f
·
verified ·
1 Parent(s): 5e1d221

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +324 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Bep40 Ai Tool
3
- emoji: 🏃
4
- colorFrom: pink
5
- colorTo: purple
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: bep40-ai-tool
3
+ emoji: 🐳
4
+ colorFrom: red
5
+ colorTo: green
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,324 @@
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>AI Tools Hub - bep40's Collection</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
+ .gradient-bg {
11
+ background: linear-gradient(135deg, #6e8efb, #a777e3);
12
+ }
13
+ .card-hover:hover {
14
+ transform: translateY(-5px);
15
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
16
+ }
17
+ .category-btn.active {
18
+ background-color: #4f46e5;
19
+ color: white;
20
+ }
21
+ .tool-iframe {
22
+ height: 400px;
23
+ border-radius: 0.5rem;
24
+ }
25
+ .fade-in {
26
+ animation: fadeIn 0.5s ease-in;
27
+ }
28
+ @keyframes fadeIn {
29
+ from { opacity: 0; }
30
+ to { opacity: 1; }
31
+ }
32
+ </style>
33
+ </head>
34
+ <body class="bg-gray-50 min-h-screen">
35
+ <!-- Header -->
36
+ <header class="gradient-bg text-white shadow-lg">
37
+ <div class="container mx-auto px-4 py-6">
38
+ <div class="flex flex-col md:flex-row justify-between items-center">
39
+ <div class="flex items-center mb-4 md:mb-0">
40
+ <i class="fas fa-robot text-3xl mr-3"></i>
41
+ <h1 class="text-2xl md:text-3xl font-bold">AI Tools Hub</h1>
42
+ </div>
43
+ <div class="flex items-center space-x-2">
44
+ <span class="text-sm md:text-base">by</span>
45
+ <div class="flex items-center bg-white text-purple-700 px-3 py-1 rounded-full">
46
+ <i class="fas fa-user mr-2"></i>
47
+ <span class="font-medium">bep40</span>
48
+ </div>
49
+ <span class="text-sm md:text-base">on HuggingFace</span>
50
+ </div>
51
+ </div>
52
+ </div>
53
+ </header>
54
+
55
+ <!-- Main Content -->
56
+ <main class="container mx-auto px-4 py-8">
57
+ <!-- Category Navigation -->
58
+ <div class="mb-8">
59
+ <h2 class="text-xl font-semibold mb-4 text-gray-700">Explore AI Tools Collection</h2>
60
+ <div class="flex flex-wrap gap-2">
61
+ <button onclick="filterTools('all')" class="category-btn active px-4 py-2 rounded-full bg-gray-200 hover:bg-gray-300 transition">
62
+ <i class="fas fa-th-list mr-2"></i>All Tools
63
+ </button>
64
+ <button onclick="filterTools('text')" class="category-btn px-4 py-2 rounded-full bg-gray-200 hover:bg-gray-300 transition">
65
+ <i class="fas fa-font mr-2"></i>TẠO VĂN BẢN
66
+ </button>
67
+ <button onclick="filterTools('image')" class="category-btn px-4 py-2 rounded-full bg-gray-200 hover:bg-gray-300 transition">
68
+ <i class="fas fa-image mr-2"></i>TẠO ẢNH
69
+ </button>
70
+ <button onclick="filterTools('video')" class="category-btn px-4 py-2 rounded-full bg-gray-200 hover:bg-gray-300 transition">
71
+ <i class="fas fa-video mr-2"></i>TẠO VIDEO
72
+ </button>
73
+ <button onclick="filterTools('audio')" class="category-btn px-4 py-2 rounded-full bg-gray-200 hover:bg-gray-300 transition">
74
+ <i class="fas fa-music mr-2"></i>TẠO ÂM THANH
75
+ </button>
76
+ <button onclick="filterTools('chatbot')" class="category-btn px-4 py-2 rounded-full bg-gray-200 hover:bg-gray-300 transition">
77
+ <i class="fas fa-comments mr-2"></i>CHATBOT
78
+ </button>
79
+ <button onclick="filterTools('edit')" class="category-btn px-4 py-2 rounded-full bg-gray-200 hover:bg-gray-300 transition">
80
+ <i class="fas fa-edit mr-2"></i>CHỈNH SỬA
81
+ </button>
82
+ <button onclick="filterTools('other')" class="category-btn px-4 py-2 rounded-full bg-gray-200 hover:bg-gray-300 transition">
83
+ <i class="fas fa-ellipsis-h mr-2"></i>KHÁC
84
+ </button>
85
+ </div>
86
+ </div>
87
+
88
+ <!-- Search Box -->
89
+ <div class="mb-8">
90
+ <div class="relative max-w-md">
91
+ <input type="text" id="searchInput" placeholder="Search tools..."
92
+ class="w-full pl-10 pr-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-purple-500">
93
+ <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i>
94
+ </div>
95
+ </div>
96
+
97
+ <!-- Tools Grid -->
98
+ <div id="toolsContainer" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
99
+ <!-- Text Generation Tools -->
100
+ <div class="tool-card fade-in" data-category="text">
101
+ <div class="bg-white rounded-xl shadow-md overflow-hidden card-hover transition duration-300">
102
+ <div class="p-5">
103
+ <h3 class="text-xl font-semibold text-gray-800 mb-2">Text Generation Model</h3>
104
+ <p class="text-gray-600 mb-4">Advanced AI for generating human-like text based on prompts.</p>
105
+ <iframe src="https://huggingface.co/bep40/text-generation-model" class="w-full tool-iframe"></iframe>
106
+ <div class="mt-4 flex justify-between items-center">
107
+ <span class="bg-purple-100 text-purple-800 text-xs px-2 py-1 rounded">TẠO VĂN BẢN</span>
108
+ <a href="https://huggingface.co/bep40/text-generation-model" target="_blank" class="text-purple-600 hover:text-purple-800 flex items-center">
109
+ <i class="fas fa-external-link-alt mr-1"></i> Open
110
+ </a>
111
+ </div>
112
+ </div>
113
+ </div>
114
+ </div>
115
+
116
+ <!-- Image Generation Tools -->
117
+ <div class="tool-card fade-in" data-category="image">
118
+ <div class="bg-white rounded-xl shadow-md overflow-hidden card-hover transition duration-300">
119
+ <div class="p-5">
120
+ <h3 class="text-xl font-semibold text-gray-800 mb-2">AI Image Creator</h3>
121
+ <p class="text-gray-600 mb-4">Generate stunning images from text descriptions with AI.</p>
122
+ <iframe src="https://huggingface.co/bep40/image-generation" class="w-full tool-iframe"></iframe>
123
+ <div class="mt-4 flex justify-between items-center">
124
+ <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded">TẠO ẢNH</span>
125
+ <a href="https://huggingface.co/bep40/image-generation" target="_blank" class="text-blue-600 hover:text-blue-800 flex items-center">
126
+ <i class="fas fa-external-link-alt mr-1"></i> Open
127
+ </a>
128
+ </div>
129
+ </div>
130
+ </div>
131
+ </div>
132
+
133
+ <!-- Video Generation Tools -->
134
+ <div class="tool-card fade-in" data-category="video">
135
+ <div class="bg-white rounded-xl shadow-md overflow-hidden card-hover transition duration-300">
136
+ <div class="p-5">
137
+ <h3 class="text-xl font-semibold text-gray-800 mb-2">Video Synthesis AI</h3>
138
+ <p class="text-gray-600 mb-4">Create short video clips from text or image inputs.</p>
139
+ <iframe src="https://huggingface.co/bep40/video-generation" class="w-full tool-iframe"></iframe>
140
+ <div class="mt-4 flex justify-between items-center">
141
+ <span class="bg-red-100 text-red-800 text-xs px-2 py-1 rounded">TẠO VIDEO</span>
142
+ <a href="https://huggingface.co/bep40/video-generation" target="_blank" class="text-red-600 hover:text-red-800 flex items-center">
143
+ <i class="fas fa-external-link-alt mr-1"></i> Open
144
+ </a>
145
+ </div>
146
+ </div>
147
+ </div>
148
+ </div>
149
+
150
+ <!-- Audio Generation Tools -->
151
+ <div class="tool-card fade-in" data-category="audio">
152
+ <div class="bg-white rounded-xl shadow-md overflow-hidden card-hover transition duration-300">
153
+ <div class="p-5">
154
+ <h3 class="text-xl font-semibold text-gray-800 mb-2">AI Music Composer</h3>
155
+ <p class="text-gray-600 mb-4">Generate original music tracks or sound effects.</p>
156
+ <iframe src="https://huggingface.co/bep40/audio-generation" class="w-full tool-iframe"></iframe>
157
+ <div class="mt-4 flex justify-between items-center">
158
+ <span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded">TẠO ÂM THANH</span>
159
+ <a href="https://huggingface.co/bep40/audio-generation" target="_blank" class="text-green-600 hover:text-green-800 flex items-center">
160
+ <i class="fas fa-external-link-alt mr-1"></i> Open
161
+ </a>
162
+ </div>
163
+ </div>
164
+ </div>
165
+ </div>
166
+
167
+ <!-- Chatbot Tools -->
168
+ <div class="tool-card fade-in" data-category="chatbot">
169
+ <div class="bg-white rounded-xl shadow-md overflow-hidden card-hover transition duration-300">
170
+ <div class="p-5">
171
+ <h3 class="text-xl font-semibold text-gray-800 mb-2">Conversational AI</h3>
172
+ <p class="text-gray-600 mb-4">Interactive chatbot that can answer questions and hold conversations.</p>
173
+ <iframe src="https://huggingface.co/bep40/chatbot" class="w-full tool-iframe"></iframe>
174
+ <div class="mt-4 flex justify-between items-center">
175
+ <span class="bg-yellow-100 text-yellow-800 text-xs px-2 py-1 rounded">CHATBOT</span>
176
+ <a href="https://huggingface.co/bep40/chatbot" target="_blank" class="text-yellow-600 hover:text-yellow-800 flex items-center">
177
+ <i class="fas fa-external-link-alt mr-1"></i> Open
178
+ </a>
179
+ </div>
180
+ </div>
181
+ </div>
182
+ </div>
183
+
184
+ <!-- Editing Tools -->
185
+ <div class="tool-card fade-in" data-category="edit">
186
+ <div class="bg-white rounded-xl shadow-md overflow-hidden card-hover transition duration-300">
187
+ <div class="p-5">
188
+ <h3 class="text-xl font-semibold text-gray-800 mb-2">Image Enhancer</h3>
189
+ <p class="text-gray-600 mb-4">AI-powered tool for improving and editing images.</p>
190
+ <iframe src="https://huggingface.co/bep40/image-editing" class="w-full tool-iframe"></iframe>
191
+ <div class="mt-4 flex justify-between items-center">
192
+ <span class="bg-indigo-100 text-indigo-800 text-xs px-2 py-1 rounded">CHỈNH SỬA</span>
193
+ <a href="https://huggingface.co/bep40/image-editing" target="_blank" class="text-indigo-600 hover:text-indigo-800 flex items-center">
194
+ <i class="fas fa-external-link-alt mr-1"></i> Open
195
+ </a>
196
+ </div>
197
+ </div>
198
+ </div>
199
+ </div>
200
+
201
+ <!-- Other Tools -->
202
+ <div class="tool-card fade-in" data-category="other">
203
+ <div class="bg-white rounded-xl shadow-md overflow-hidden card-hover transition duration-300">
204
+ <div class="p-5">
205
+ <h3 class="text-xl font-semibold text-gray-800 mb-2">AI Code Generator</h3>
206
+ <p class="text-gray-600 mb-4">Generate code snippets based on natural language descriptions.</p>
207
+ <iframe src="https://huggingface.co/bep40/code-generation" class="w-full tool-iframe"></iframe>
208
+ <div class="mt-4 flex justify-between items-center">
209
+ <span class="bg-gray-100 text-gray-800 text-xs px-2 py-1 rounded">KHÁC</span>
210
+ <a href="https://huggingface.co/bep40/code-generation" target="_blank" class="text-gray-600 hover:text-gray-800 flex items-center">
211
+ <i class="fas fa-external-link-alt mr-1"></i> Open
212
+ </a>
213
+ </div>
214
+ </div>
215
+ </div>
216
+ </div>
217
+
218
+ <!-- Additional Text Tool -->
219
+ <div class="tool-card fade-in" data-category="text">
220
+ <div class="bg-white rounded-xl shadow-md overflow-hidden card-hover transition duration-300">
221
+ <div class="p-5">
222
+ <h3 class="text-xl font-semibold text-gray-800 mb-2">Text Summarizer</h3>
223
+ <p class="text-gray-600 mb-4">Condense long articles into concise summaries automatically.</p>
224
+ <iframe src="https://huggingface.co/bep40/text-summarization" class="w-full tool-iframe"></iframe>
225
+ <div class="mt-4 flex justify-between items-center">
226
+ <span class="bg-purple-100 text-purple-800 text-xs px-2 py-1 rounded">TẠO VĂN BẢN</span>
227
+ <a href="https://huggingface.co/bep40/text-summarization" target="_blank" class="text-purple-600 hover:text-purple-800 flex items-center">
228
+ <i class="fas fa-external-link-alt mr-1"></i> Open
229
+ </a>
230
+ </div>
231
+ </div>
232
+ </div>
233
+ </div>
234
+
235
+ <!-- Additional Image Tool -->
236
+ <div class="tool-card fade-in" data-category="image">
237
+ <div class="bg-white rounded-xl shadow-md overflow-hidden card-hover transition duration-300">
238
+ <div class="p-5">
239
+ <h3 class="text-xl font-semibold text-gray-800 mb-2">Art Style Transfer</h3>
240
+ <p class="text-gray-600 mb-4">Apply artistic styles to your photos automatically.</p>
241
+ <iframe src="https://huggingface.co/bep40/style-transfer" class="w-full tool-iframe"></iframe>
242
+ <div class="mt-4 flex justify-between items-center">
243
+ <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded">TẠO ẢNH</span>
244
+ <a href="https://huggingface.co/bep40/style-transfer" target="_blank" class="text-blue-600 hover:text-blue-800 flex items-center">
245
+ <i class="fas fa-external-link-alt mr-1"></i> Open
246
+ </a>
247
+ </div>
248
+ </div>
249
+ </div>
250
+ </div>
251
+ </div>
252
+ </main>
253
+
254
+ <!-- Footer -->
255
+ <footer class="bg-gray-800 text-white py-8">
256
+ <div class="container mx-auto px-4">
257
+ <div class="flex flex-col md:flex-row justify-between items-center">
258
+ <div class="mb-4 md:mb-0">
259
+ <h2 class="text-xl font-bold mb-2">AI Tools Hub</h2>
260
+ <p class="text-gray-400">Curated collection of bep40's AI tools on HuggingFace</p>
261
+ </div>
262
+ <div class="flex space-x-4">
263
+ <a href="https://huggingface.co/bep40" target="_blank" class="hover:text-purple-300 transition">
264
+ <i class="fab fa-github text-2xl"></i>
265
+ </a>
266
+ <a href="https://huggingface.co" target="_blank" class="hover:text-purple-300 transition">
267
+ <i class="fas fa-external-link-alt text-2xl"></i>
268
+ </a>
269
+ </div>
270
+ </div>
271
+ <div class="mt-6 pt-6 border-t border-gray-700 text-center text-gray-400 text-sm">
272
+ <p>© 2023 AI Tools Hub. All tools belong to their respective owners.</p>
273
+ </div>
274
+ </div>
275
+ </footer>
276
+
277
+ <script>
278
+ // Filter tools by category
279
+ function filterTools(category) {
280
+ // Update active button
281
+ document.querySelectorAll('.category-btn').forEach(btn => {
282
+ btn.classList.remove('active');
283
+ });
284
+ event.target.classList.add('active');
285
+
286
+ // Show/hide tools
287
+ const tools = document.querySelectorAll('.tool-card');
288
+ tools.forEach(tool => {
289
+ if (category === 'all' || tool.dataset.category === category) {
290
+ tool.style.display = 'block';
291
+ tool.classList.add('fade-in');
292
+ } else {
293
+ tool.style.display = 'none';
294
+ tool.classList.remove('fade-in');
295
+ }
296
+ });
297
+ }
298
+
299
+ // Search functionality
300
+ document.getElementById('searchInput').addEventListener('input', function() {
301
+ const searchTerm = this.value.toLowerCase();
302
+ const tools = document.querySelectorAll('.tool-card');
303
+
304
+ tools.forEach(tool => {
305
+ const title = tool.querySelector('h3').textContent.toLowerCase();
306
+ const description = tool.querySelector('p').textContent.toLowerCase();
307
+
308
+ if (title.includes(searchTerm) || description.includes(searchTerm)) {
309
+ tool.style.display = 'block';
310
+ tool.classList.add('fade-in');
311
+ } else {
312
+ tool.style.display = 'none';
313
+ tool.classList.remove('fade-in');
314
+ }
315
+ });
316
+ });
317
+
318
+ // Initialize - show all tools
319
+ window.onload = function() {
320
+ filterTools('all');
321
+ };
322
+ </script>
323
+ <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=bep40/bep40-ai-tool" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
324
+ </html>