fdaudens HF staff commited on
Commit
62391cb
·
verified ·
1 Parent(s): f082914

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +593 -19
index.html CHANGED
@@ -1,19 +1,593 @@
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>The Essential AI Toolkit for Journalists and Content Creators</title>
7
+
8
+ <!-- Tailwind CSS -->
9
+ <script src="https://cdn.tailwindcss.com"></script>
10
+
11
+ <!-- Simple search functionality -->
12
+ <script>
13
+ document.addEventListener('DOMContentLoaded', function() {
14
+ const searchInput = document.getElementById('search');
15
+ const cards = document.querySelectorAll('.tool-card');
16
+
17
+ searchInput.addEventListener('input', function() {
18
+ const searchTerm = this.value.toLowerCase();
19
+
20
+ cards.forEach(card => {
21
+ const content = card.textContent.toLowerCase();
22
+ if (content.includes(searchTerm)) {
23
+ card.style.display = 'block';
24
+ } else {
25
+ card.style.display = 'none';
26
+ }
27
+ });
28
+ });
29
+ });
30
+ </script>
31
+
32
+ </head>
33
+ <body>
34
+ <div class="container mx-auto px-4 py-8 max-w-4xl">
35
+ <header class="text-center mb-12">
36
+ <h1 class="text-4xl font-bold mb-4">The Essential AI Toolkit for Journalists and Content Creators</h1>
37
+ <!-- <p class="text-lg text-gray-600 mb-2">
38
+ Discover the best free AI tools for journalism and content creation
39
+ </p> -->
40
+ <p class="text-md text-gray-600 mb-2">
41
+ All the tools listed here are free to use and open-source!<br/>
42
+ Have a favorite tool or need help with a specific use case?
43
+ <a href="https://huggingface.co/spaces/JournalistsonHF/ai-toolkit/discussions" class="text-blue-600 hover:underline">Share in the community tab!</a>
44
+ </p>
45
+ </header>
46
+
47
+ <div class="relative mb-8">
48
+ <input
49
+ id="search"
50
+ type="text"
51
+ placeholder="Search tasks, examples, or tools..."
52
+ class="w-full p-3 pl-10 border rounded-lg"
53
+ />
54
+ <svg xmlns="http://www.w3.org/2000/svg" class="absolute left-3 top-3 text-gray-400" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
55
+ <circle cx="11" cy="11" r="8"></circle>
56
+ <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
57
+ </svg>
58
+ </div>
59
+
60
+ <div class="space-y-6">
61
+ <!-- Card 3: Transcribe audio -->
62
+ <div class="tool-card border rounded-lg p-6 bg-white shadow-sm hover:shadow-md transition-shadow">
63
+ <h2 class="text-xl font-bold mb-4">Transcribe audio or video files</h2>
64
+
65
+ <div class="ml-4">
66
+ <p class="text-gray-600 mb-4">
67
+ Transcribe your interviews or audio files directly on your computer—privately, with speaker identification. Click on video or words to jump to the relevant clip. Supports 100 different languages.
68
+ </p>
69
+ </div>
70
+
71
+ <div class="mt-4 pt-4 border-t">
72
+ <h3 class="font-medium text-gray-700 mb-2">Recommended Tools:</h3>
73
+ <div class="flex flex-wrap gap-2">
74
+ <a href="https://huggingface.co/spaces/Xenova/whisper-speaker-diarization/" target="_blank" rel="noopener noreferrer" class="tool-link">
75
+ Whisper Speaker Diarization
76
+ <svg xmlns="http://www.w3.org/2000/svg" class="external-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
77
+ <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path>
78
+ <polyline points="15 3 21 3 21 9"></polyline>
79
+ <line x1="10" y1="14" x2="21" y2="3"></line>
80
+ </svg>
81
+ </a>
82
+ <a href="https://huggingface.co/spaces/webml-community/whisper-large-v3-turbo-webgpu?v2=" target="_blank" rel="noopener noreferrer" class="tool-link">
83
+ Whisper Large v3 Turbo
84
+ <svg xmlns="http://www.w3.org/2000/svg" class="external-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
85
+ <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path>
86
+ <polyline points="15 3 21 3 21 9"></polyline>
87
+ <line x1="10" y1="14" x2="21" y2="3"></line>
88
+ </svg>
89
+ </a>
90
+ </div>
91
+ </div>
92
+ </div>
93
+
94
+ <!-- Card 1: Scrape websites -->
95
+ <div class="tool-card border rounded-lg p-6 bg-white shadow-sm hover:shadow-md transition-shadow">
96
+ <h2 class="text-xl font-bold mb-4">Scrape websites without coding</h2>
97
+ <div class="ml-4">
98
+ Simply enter your prompt and website URL to receive a formatted result.</p><br/>
99
+
100
+ <h3 class="font-medium text-gray-700 mb-2">Examples:</h3>
101
+ <ul class="list-disc pl-5 space-y-2">
102
+ <li class="text-gray-600">Download all press releases from a candidate</li>
103
+ <li class="text-gray-600">Download a list of events</li>
104
+ </ul>
105
+ </div>
106
+
107
+ <div class="mt-4 pt-4 border-t">
108
+ <div class="flex flex-wrap gap-2">
109
+ <a href="https://huggingface.co/spaces/JournalistsonHF/ai-scraper" target="_blank" rel="noopener noreferrer" class="tool-link">
110
+ AI Scraper
111
+ <svg xmlns="http://www.w3.org/2000/svg" class="external-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
112
+ <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path>
113
+ <polyline points="15 3 21 3 21 9"></polyline>
114
+ <line x1="10" y1="14" x2="21" y2="3"></line>
115
+ </svg>
116
+ </a>
117
+ </div>
118
+ </div>
119
+ </div>
120
+
121
+ <!-- Card 2: Analyze bias -->
122
+ <div class="tool-card border rounded-lg p-6 bg-white shadow-sm hover:shadow-md transition-shadow">
123
+ <h2 class="text-xl font-bold mb-4">Analyze bias in image-generation tools</h2>
124
+
125
+ <div class="ml-4">
126
+ Generate AI images of people in specific professions using different models.</p><br/>
127
+ <h3 class="font-medium text-gray-700 mb-2">Examples:</h3>
128
+ <ul class="list-disc pl-5 space-y-2">
129
+ <li class="text-gray-600">Analyze how a candidate is represented by these tools</li>
130
+ <li class="text-gray-600">Analyze how professions are represented in a specific country</li>
131
+ </ul>
132
+ </div>
133
+
134
+ <div class="mt-4 pt-4 border-t">
135
+ <h3 class="font-medium text-gray-700 mb-2">Recommended Tools:</h3>
136
+ <div class="flex flex-wrap gap-2">
137
+ <a href="https://huggingface.co/spaces/JournalistsonHF/text-to-image-bias" target="_blank" rel="noopener noreferrer" class="tool-link">
138
+ Text-to-image bias
139
+ <svg xmlns="http://www.w3.org/2000/svg" class="external-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
140
+ <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path>
141
+ <polyline points="15 3 21 3 21 9"></polyline>
142
+ <line x1="10" y1="14" x2="21" y2="3"></line>
143
+ </svg>
144
+ </a>
145
+ </div>
146
+ </div>
147
+ </div>
148
+
149
+ <!-- Card 4: Retouch images -->
150
+ <div class="tool-card border rounded-lg p-6 bg-white shadow-sm hover:shadow-md transition-shadow">
151
+ <h2 class="text-xl font-bold mb-4">Edit images using just your words</h2>
152
+ <div class="ml-4">
153
+ <h3 class="font-medium text-gray-700 mb-2">Examples:</h3>
154
+ <ul class="list-disc pl-5 space-y-2">
155
+ <li class="text-gray-600">Prepare images for video thumbnails and social media posts</li>
156
+ <li class="text-gray-600">Remove distracting elements from photos</li>
157
+ <li class="text-gray-600">Create visually consistent branding materials</li>
158
+ <li class="text-gray-600">Enhance historical images for storytelling</li>
159
+ </ul>
160
+ </div>
161
+
162
+ <div class="mt-4 pt-4 border-t">
163
+ <h3 class="font-medium text-gray-700 mb-2">Recommended Tools:</h3>
164
+ <div class="flex flex-wrap gap-2">
165
+ <a href="https://huggingface.co/spaces/finegrain/finegrain-object-eraser" target="_blank" rel="noopener noreferrer" class="tool-link">
166
+ Finegrain Object Eraser
167
+ <svg xmlns="http://www.w3.org/2000/svg" class="external-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
168
+ <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path>
169
+ <polyline points="15 3 21 3 21 9"></polyline>
170
+ <line x1="10" y1="14" x2="21" y2="3"></line>
171
+ </svg>
172
+ </a>
173
+ <a href="https://huggingface.co/spaces/finegrain/finegrain-object-cutter" target="_blank" rel="noopener noreferrer" class="tool-link">
174
+ Finegrain Object Cutter
175
+ <svg xmlns="http://www.w3.org/2000/svg" class="external-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
176
+ <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path>
177
+ <polyline points="15 3 21 3 21 9"></polyline>
178
+ <line x1="10" y1="14" x2="21" y2="3"></line>
179
+ </svg>
180
+ </a>
181
+ <a href="https://huggingface.co/spaces/fffiloni/text-guided-image-colorization" target="_blank" rel="noopener noreferrer" class="tool-link">
182
+ Image Colorization
183
+ <svg xmlns="http://www.w3.org/2000/svg" class="external-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
184
+ <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path>
185
+ <polyline points="15 3 21 3 21 9"></polyline>
186
+ <line x1="10" y1="14" x2="21" y2="3"></line>
187
+ </svg>
188
+ </a>
189
+ <a href="https://huggingface.co/spaces/multimodalart/flux-fill-outpaint" target="_blank" rel="noopener noreferrer" class="tool-link">
190
+ Flux Image Extender
191
+ <svg xmlns="http://www.w3.org/2000/svg" class="external-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
192
+ <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path>
193
+ <polyline points="15 3 21 3 21 9"></polyline>
194
+ <line x1="10" y1="14" x2="21" y2="3"></line>
195
+ </svg>
196
+ </a>
197
+ </div>
198
+ </div>
199
+ </div>
200
+
201
+ <!-- Card 5: Generate AI Images -->
202
+ <div class="tool-card border rounded-lg p-6 bg-white shadow-sm hover:shadow-md transition-shadow">
203
+ <h2 class="text-xl font-bold mb-4">Generate AI Images in Various Styles</h2>
204
+
205
+ <div class="ml-4">
206
+ <h3 class="font-medium text-gray-700 mb-2">Description:</h3>
207
+ <p class="text-gray-600 mb-4">Choose from dozens of unique styles and describe the image you want to create.</p>
208
+ </div>
209
+
210
+ <div class="mt-4 pt-4 border-t">
211
+ <h3 class="font-medium text-gray-700 mb-2">Recommended Tools:</h3>
212
+ <div class="flex flex-wrap gap-2">
213
+ <a href="https://huggingface.co/spaces/multimodalart/LoraTheExplorer" target="_blank" rel="noopener noreferrer" class="tool-link">
214
+ LoRA the Explorer
215
+ <svg xmlns="http://www.w3.org/2000/svg" class="external-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
216
+ <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path>
217
+ <polyline points="15 3 21 3 21 9"></polyline>
218
+ <line x1="10" y1="14" x2="21" y2="3"></line>
219
+ </svg>
220
+ </a>
221
+ </div>
222
+ </div>
223
+ </div>
224
+
225
+ <!-- Card 6: Extract from images -->
226
+ <div class="tool-card border rounded-lg p-6 bg-white shadow-sm hover:shadow-md transition-shadow">
227
+ <h2 class="text-xl font-bold mb-4">Extract information from images and handwritten documents</h2>
228
+
229
+ <div class="ml-4">
230
+ <h3 class="font-medium text-gray-700 mb-2">Description:</h3>
231
+ <p class="text-gray-600 mb-4">Upload a file and specify what you want to extract.</p> </div>
232
+
233
+ <div class="mt-4 pt-4 border-t">
234
+ <h3 class="font-medium text-gray-700 mb-2">Recommended Tools:</h3>
235
+ <div class="flex flex-wrap gap-2">
236
+ <a href="https://huggingface.co/spaces/Qwen/Qwen2-VL" target="_blank" rel="noopener noreferrer" class="tool-link">
237
+ Qwen2-VL-Max
238
+ <svg xmlns="http://www.w3.org/2000/svg" class="external-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
239
+ <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path>
240
+ <polyline points="15 3 21 3 21 9"></polyline>
241
+ <line x1="10" y1="14" x2="21" y2="3"></line>
242
+ </svg>
243
+ </a>
244
+ </div>
245
+ </div>
246
+ </div>
247
+
248
+ <!-- Card 7: Extract from charts -->
249
+ <div class="tool-card border rounded-lg p-6 bg-white shadow-sm hover:shadow-md transition-shadow">
250
+ <h2 class="text-xl font-bold mb-4">Extract information from charts</h2>
251
+
252
+ <div class="ml-4">
253
+ <h3 class="font-medium text-gray-700 mb-2">Example:</h3>
254
+ <ul class="list-disc pl-5 space-y-2">
255
+ <li class="text-gray-600">Generate a spreadsheet to conduct your own analysis.</li>
256
+ </ul>
257
+ </div>
258
+
259
+ <div class="mt-4 pt-4 border-t">
260
+ <h3 class="font-medium text-gray-700 mb-2">Recommended Tools:</h3>
261
+ <div class="flex flex-wrap gap-2">
262
+ <a href="https://huggingface.co/spaces/ahmed-masry/ChartGemma" target="_blank" rel="noopener noreferrer" class="tool-link">
263
+ ChartGemma
264
+ <svg xmlns="http://www.w3.org/2000/svg" class="external-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
265
+ <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path>
266
+ <polyline points="15 3 21 3 21 9"></polyline>
267
+ <line x1="10" y1="14" x2="21" y2="3"></line>
268
+ </svg>
269
+ </a>
270
+ </div>
271
+ </div>
272
+ </div>
273
+
274
+ <!-- Card 8: Improve SEO -->
275
+ <div class="tool-card border rounded-lg p-6 bg-white shadow-sm hover:shadow-md transition-shadow">
276
+ <h2 class="text-xl font-bold mb-4">Optimize an article for SEO</h2>
277
+
278
+ <div class="ml-4">
279
+ <h3 class="font-medium text-gray-700 mb-2">Description:</h3>
280
+ <p class="text-gray-600 mb-4">Paste your content to receive recommendations.</p> </div>
281
+
282
+ <div class="mt-4 pt-4 border-t">
283
+ <h3 class="font-medium text-gray-700 mb-2">Recommended Tools:</h3>
284
+ <div class="flex flex-wrap gap-2">
285
+ <a href="https://huggingface.co/chat/assistant/66227594635ce17e1b021daf" target="_blank" rel="noopener noreferrer" class="tool-link">
286
+ SEO Assistant
287
+ <svg xmlns="http://www.w3.org/2000/svg" class="external-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
288
+ <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path>
289
+ <polyline points="15 3 21 3 21 9"></polyline>
290
+ <line x1="10" y1="14" x2="21" y2="3"></line>
291
+ </svg>
292
+ </a>
293
+ </div>
294
+ </div>
295
+ </div>
296
+
297
+ <!-- Card 9: Use AI in Google Sheets -->
298
+ <div class="tool-card border rounded-lg p-6 bg-white shadow-sm hover:shadow-md transition-shadow">
299
+ <h2 class="text-xl font-bold mb-4">Use AI models in Google Sheets</h2>
300
+
301
+ <div class="ml-4">
302
+ <h3 class="font-medium text-gray-700 mb-2">Examples:</h3>
303
+ <ul class="list-disc pl-5 space-y-2">
304
+ <li class="text-gray-600">Classify data</li>
305
+ <li class="text-gray-600">Extract information</li>
306
+ <li class="text-gray-600">Clean data</li>
307
+ </ul>
308
+ </div>
309
+
310
+ <div class="mt-4 pt-4 border-t">
311
+ <h3 class="font-medium text-gray-700 mb-2">Recommended Tools:</h3>
312
+ <div class="flex flex-wrap gap-2">
313
+ <a href="https://huggingface.co/spaces/JournalistsonHF/huggingface-on-sheets" target="_blank" rel="noopener noreferrer" class="tool-link">
314
+ HuggingFace on Sheets
315
+ <svg xmlns="http://www.w3.org/2000/svg" class="external-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
316
+ <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path>
317
+ <polyline points="15 3 21 3 21 9"></polyline>
318
+ <line x1="10" y1="14" x2="21" y2="3"></line>
319
+ </svg>
320
+ </a>
321
+ </div>
322
+ </div>
323
+ </div>
324
+
325
+ <!-- Card 10: Code a web app -->
326
+ <div class="tool-card border rounded-lg p-6 bg-white shadow-sm hover:shadow-md transition-shadow">
327
+ <h2 class="text-xl font-bold mb-4">Code a web app</h2>
328
+
329
+ <div class="ml-4">
330
+ <h3 class="font-medium text-gray-700 mb-2">Example:</h3>
331
+ <ul class="list-disc pl-5 space-y-2">
332
+ <li class="text-gray-600">Rapidly prototype and refine ideas.</li>
333
+ </ul>
334
+ </div>
335
+
336
+ <div class="mt-4 pt-4 border-t">
337
+ <h3 class="font-medium text-gray-700 mb-2">Recommended Tools:</h3>
338
+ <div class="flex flex-wrap gap-2">
339
+ <a href="https://huggingface.co/spaces/Qwen/Qwen2.5-Coder-Artifacts" target="_blank" rel="noopener noreferrer" class="tool-link">
340
+ Qwen2.5-Coder
341
+ <svg xmlns="http://www.w3.org/2000/svg" class="external-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
342
+ <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path>
343
+ <polyline points="15 3 21 3 21 9"></polyline>
344
+ <line x1="10" y1="14" x2="21" y2="3"></line>
345
+ </svg>
346
+ </a>
347
+ </div>
348
+ </div>
349
+ </div>
350
+
351
+ <!-- Card 11: Shotlist a video -->
352
+ <div class="tool-card border rounded-lg p-6 bg-white shadow-sm hover:shadow-md transition-shadow">
353
+ <h2 class="text-xl font-bold mb-4">Shotlist a Video</h2>
354
+
355
+ <div class="ml-4">
356
+ <h3 class="font-medium text-gray-700 mb-2">Description:</h3>
357
+ <p class="text-gray-600 mb-4">Compatible with VLC Video</p>
358
+
359
+ <h3 class="font-medium text-gray-700 mb-2">Examples:</h3>
360
+ <ul class="list-disc pl-5 space-y-2">
361
+ <li class="text-gray-600">Shotlist a press conference</li>
362
+ <li class="text-gray-600">Identify the different plans of a video</li>
363
+ </ul>
364
+ </div>
365
+
366
+ <div class="mt-4 pt-4 border-t">
367
+ <h3 class="font-medium text-gray-700 mb-2">Recommended Tools:</h3>
368
+ <div class="flex flex-wrap gap-2">
369
+ <a href="https://huggingface.co/spaces/HuggingFaceTB/SmolVLM2-XSPFGenerator" target="_blank" rel="noopener noreferrer" class="tool-link">
370
+ VLC Highlight Generator
371
+ <svg xmlns="http://www.w3.org/2000/svg" class="external-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
372
+ <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path>
373
+ <polyline points="15 3 21 3 21 9"></polyline>
374
+ <line x1="10" y1="14" x2="21" y2="3"></line>
375
+ </svg>
376
+ </a>
377
+ </div>
378
+ </div>
379
+ </div>
380
+
381
+ <!-- Card 12: Chat with documents -->
382
+ <div class="tool-card border rounded-lg p-6 bg-white shadow-sm hover:shadow-md transition-shadow">
383
+ <h2 class="text-xl font-bold mb-4">Chat with Documents</h2>
384
+
385
+ <div class="ml-4">
386
+ <h3 class="font-medium text-gray-700 mb-2">Description:</h3>
387
+ <p class="text-gray-600 mb-4">Upload your document to the chatbot window and ask questions about it to the model. Your conversations are private.</p>
388
+
389
+ <h3 class="font-medium text-gray-700 mb-2">Examples:</h3>
390
+ <ul class="list-disc pl-5 space-y-2">
391
+ <li class="text-gray-600">Analyze lengthy research papers</li>
392
+ <li class="text-gray-600">Extract key insights from reports</li>
393
+ <li class="text-gray-600">Summarize technical documents</li>
394
+ </ul>
395
+ </div>
396
+
397
+ <div class="mt-4 pt-4 border-t">
398
+ <h3 class="font-medium text-gray-700 mb-2">Recommended Tools:</h3>
399
+ <div class="flex flex-wrap gap-2">
400
+ <a href="https://huggingface.co/chat/" target="_blank" rel="noopener noreferrer" class="tool-link">
401
+ HuggingChat with Qwen 2.5 72B
402
+ <svg xmlns="http://www.w3.org/2000/svg" class="external-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
403
+ <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path>
404
+ <polyline points="15 3 21 3 21 9"></polyline>
405
+ <line x1="10" y1="14" x2="21" y2="3"></line>
406
+ </svg>
407
+ </a>
408
+ </div>
409
+ </div>
410
+ </div>
411
+
412
+ <!-- Card 13: Extract information from websites -->
413
+ <div class="tool-card border rounded-lg p-6 bg-white shadow-sm hover:shadow-md transition-shadow">
414
+ <h2 class="text-xl font-bold mb-4">Extract Information from Websites</h2>
415
+
416
+ <div class="ml-4">
417
+ <h3 class="font-medium text-gray-700 mb-2">Description:</h3>
418
+ <p class="text-gray-600 mb-4">Create a new assistant with the model of your choice and add the website in the "domains search" or "specific links" boxes, depending on your needs.</p>
419
+
420
+ <h3 class="font-medium text-gray-700 mb-2">Examples:</h3>
421
+ <ul class="list-disc pl-5 space-y-2">
422
+ <li class="text-gray-600">Research competitor content</li>
423
+ <li class="text-gray-600">Create a custom knowledge base for your niche</li>
424
+ <li class="text-gray-600">Stay updated on specific topics</li>
425
+ </ul>
426
+ </div>
427
+
428
+ <div class="mt-4 pt-4 border-t">
429
+ <h3 class="font-medium text-gray-700 mb-2">Recommended Tools:</h3>
430
+ <div class="flex flex-wrap gap-2">
431
+ <a href="https://huggingface.co/chat/settings/assistants/new" target="_blank" rel="noopener noreferrer" class="tool-link">
432
+ HuggingChat Assistants
433
+ <svg xmlns="http://www.w3.org/2000/svg" class="external-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
434
+ <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path>
435
+ <polyline points="15 3 21 3 21 9"></polyline>
436
+ <line x1="10" y1="14" x2="21" y2="3"></line>
437
+ </svg>
438
+ </a>
439
+ </div>
440
+ </div>
441
+ </div>
442
+
443
+ <!-- Card 14: Create audio from text -->
444
+ <div class="tool-card border rounded-lg p-6 bg-white shadow-sm hover:shadow-md transition-shadow">
445
+ <h2 class="text-xl font-bold mb-4">Create an Audio File from Text</h2>
446
+
447
+ <div class="ml-4">
448
+ <h3 class="font-medium text-gray-700 mb-2">Description:</h3>
449
+ <p class="text-gray-600 mb-4">Runs 100% in your browser, with no limit of text size. Apache 2.0 license (free for commercial use).</p>
450
+
451
+ <h3 class="font-medium text-gray-700 mb-2">Examples:</h3>
452
+ <ul class="list-disc pl-5 space-y-2">
453
+ <li class="text-gray-600">Create audio versions of articles</li>
454
+ <li class="text-gray-600">Generate voiceovers for videos</li>
455
+ <li class="text-gray-600">Produce accessibility content</li>
456
+ </ul>
457
+ </div>
458
+
459
+ <div class="mt-4 pt-4 border-t">
460
+ <h3 class="font-medium text-gray-700 mb-2">Recommended Tools:</h3>
461
+ <div class="flex flex-wrap gap-2">
462
+ <a href="https://huggingface.co/spaces/Xenova/kokoro-web" target="_blank" rel="noopener noreferrer" class="tool-link">
463
+ Kokoro Web
464
+ <svg xmlns="http://www.w3.org/2000/svg" class="external-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
465
+ <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path>
466
+ <polyline points="15 3 21 3 21 9"></polyline>
467
+ <line x1="10" y1="14" x2="21" y2="3"></line>
468
+ </svg>
469
+ </a>
470
+ </div>
471
+ </div>
472
+ </div>
473
+
474
+ <!-- Card 15: Create a podcast -->
475
+ <div class="tool-card border rounded-lg p-6 bg-white shadow-sm hover:shadow-md transition-shadow">
476
+ <h2 class="text-xl font-bold mb-4">Create a Podcast from Text</h2>
477
+
478
+ <div class="ml-4">
479
+ <h3 class="font-medium text-gray-700 mb-2">Description:</h3>
480
+ <p class="text-gray-600 mb-4">Generates audio conversations à la NotebookLM.</p>
481
+
482
+ <h3 class="font-medium text-gray-700 mb-2">Examples:</h3>
483
+ <ul class="list-disc pl-5 space-y-2">
484
+ <li class="text-gray-600">Turn blog posts into podcast episodes</li>
485
+ <li class="text-gray-600">Create conversational content from research</li>
486
+ <li class="text-gray-600">Develop audio series from written content</li>
487
+ </ul>
488
+ </div>
489
+
490
+ <div class="mt-4 pt-4 border-t">
491
+ <h3 class="font-medium text-gray-700 mb-2">Recommended Tools:</h3>
492
+ <div class="flex flex-wrap gap-2">
493
+ <a href="https://huggingface.co/spaces/ngxson/kokoro-podcast-generator" target="_blank" rel="noopener noreferrer" class="tool-link">
494
+ Podcast Generator
495
+ <svg xmlns="http://www.w3.org/2000/svg" class="external-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
496
+ <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path>
497
+ <polyline points="15 3 21 3 21 9"></polyline>
498
+ <line x1="10" y1="14" x2="21" y2="3"></line>
499
+ </svg>
500
+ </a>
501
+ </div>
502
+ </div>
503
+ </div>
504
+
505
+ <!-- Card 16: Choose best model -->
506
+ <div class="tool-card border rounded-lg p-6 bg-white shadow-sm hover:shadow-md transition-shadow">
507
+ <h2 class="text-xl font-bold mb-4">Choose the best model</h2>
508
+
509
+ <div class="ml-4">
510
+ <h3 class="font-medium text-gray-700 mb-2">Description:</h3>
511
+ <p class="text-gray-600 mb-4">Evaluate open-source models on different benchmarks.</p>
512
+
513
+ <h3 class="font-medium text-gray-700 mb-2">Examples:</h3>
514
+ <ul class="list-disc pl-5 space-y-2">
515
+ <li class="text-gray-600">Compare models for specific use cases</li>
516
+ <li class="text-gray-600">Find the most efficient model for your needs</li>
517
+ <li class="text-gray-600">Stay updated on the latest advancements</li>
518
+ </ul>
519
+ </div>
520
+
521
+ <div class="mt-4 pt-4 border-t">
522
+ <h3 class="font-medium text-gray-700 mb-2">Recommended Tools:</h3>
523
+ <div class="flex flex-wrap gap-2">
524
+ <a href="https://huggingface.co/spaces/open-llm-leaderboard/open_llm_leaderboard#/" target="_blank" rel="noopener noreferrer" class="tool-link">
525
+ OpenLLM Leaderboard
526
+ <svg xmlns="http://www.w3.org/2000/svg" class="external-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
527
+ <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path>
528
+ <polyline points="15 3 21 3 21 9"></polyline>
529
+ <line x1="10" y1="14" x2="21" y2="3"></line>
530
+ </svg>
531
+ </a>
532
+ </div>
533
+ </div>
534
+ </div>
535
+
536
+ <!-- Card 17: Convert graphic interface to data -->
537
+ <div class="tool-card border rounded-lg p-6 bg-white shadow-sm hover:shadow-md transition-shadow">
538
+ <h2 class="text-xl font-bold mb-4">Convert graphic interface to data</h2>
539
+
540
+ <div class="ml-4">
541
+ <h3 class="font-medium text-gray-700 mb-2">Description:</h3>
542
+ <p class="text-gray-600 mb-4">OmniParser is a screen parsing tool to convert general GUI screen to structured elements.</p>
543
+
544
+ <h3 class="font-medium text-gray-700 mb-2">Examples:</h3>
545
+ <ul class="list-disc pl-5 space-y-2">
546
+ <li class="text-gray-600">Extract data from app screenshots</li>
547
+ <li class="text-gray-600">Convert visual information to structured data</li>
548
+ <li class="text-gray-600">Analyze interface designs</li>
549
+ </ul>
550
+ </div>
551
+
552
+ <div class="mt-4 pt-4 border-t">
553
+ <h3 class="font-medium text-gray-700 mb-2">Recommended Tools:</h3>
554
+ <div class="flex flex-wrap gap-2">
555
+ <a href="https://huggingface.co/spaces/microsoft/OmniParser-v2" target="_blank" rel="noopener noreferrer" class="tool-link">
556
+ OmniParser V2
557
+ <svg xmlns="http://www.w3.org/2000/svg" class="external-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
558
+ <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path>
559
+ <polyline points="15 3 21 3 21 9"></polyline>
560
+ <line x1="10" y1="14" x2="21" y2="3"></line>
561
+ </svg>
562
+ </a>
563
+ </div>
564
+ </div>
565
+ </div>
566
+
567
+ <!-- Card 18: Evaluate environmental footprint -->
568
+ <div class="tool-card border rounded-lg p-6 bg-white shadow-sm hover:shadow-md transition-shadow">
569
+ <h2 class="text-xl font-bold mb-4">Evaluate the environmental footprint of a model</h2>
570
+
571
+ <div class="ml-4">
572
+ <h3 class="font-medium text-gray-700 mb-2">Examples:</h3>
573
+ <ul class="list-disc pl-5 space-y-2">
574
+ <li class="text-gray-600">Make sustainable AI choices</li>
575
+ <li class="text-gray-600">Compare energy usage between models</li>
576
+ <li class="text-gray-600">Report on AI sustainability</li>
577
+ </ul>
578
+ </div>
579
+
580
+ <div class="mt-4 pt-4 border-t">
581
+ <h3 class="font-medium text-gray-700 mb-2">Recommended Tools:</h3>
582
+ <div class="flex flex-wrap gap-2">
583
+ <a href="https://huggingface.co/spaces/AIEnergyScore/Leaderboard" target="_blank" rel="noopener noreferrer" class="tool-link">
584
+ AI Energy Score
585
+ <svg xmlns="http://www.w3.org/2000/svg" class="external-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
586
+ <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path>
587
+ <polyline points="15 3 21 3 21 9"></polyline>
588
+ <line x1="10" y1="14" x2="21" y2="3"></line>
589
+ </svg>
590
+ </a>
591
+ </div>
592
+ </div>
593
+ </div>