Hugging Face's logo

Spaces:
Beko2210
/
ai-tools
Running

App Files Community
Beko2210 commited on
Commit
e8b31a7
·
verified ·
1 Parent(s): efcaf89

Erstelle mir eine webseite mit allen KI-Tools die es zur Zeit auf dem Markt gibt mit Link und jeweil eine Erklärung und ein masterprompt - Initial Deployment

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +324 -18
  3. prompts.txt +1 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Ai Tools
3
- emoji: 🏃
4
- colorFrom: green
5
- colorTo: red
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: ai-tools
3
+ emoji: 🐳
4
+ colorFrom: blue
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,325 @@
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="de">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>KI-Tools Übersicht</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
9
+ <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
11
+ <script src="https://unpkg.com/feather-icons"></script>
12
+ <style>
13
+ .gradient-bg {
14
+ background: linear-gradient(135deg, #6e8efb 0%, #a777e3 100%);
15
+ }
16
+ .tool-card:hover {
17
+ transform: translateY(-5px);
18
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
19
+ }
20
+ .prompt-box {
21
+ background: rgba(255, 255, 255, 0.1);
22
+ backdrop-filter: blur(10px);
23
+ }
24
+ </style>
25
+ </head>
26
+ <body class="bg-gray-50">
27
+ <!-- Hero Section -->
28
+ <div class="gradient-bg text-white py-20 px-4">
29
+ <div class="max-w-6xl mx-auto text-center">
30
+ <h1 class="text-5xl font-bold mb-6" data-aos="fade-down">Die ultimative KI-Tools Sammlung</h1>
31
+ <p class="text-xl mb-8 max-w-3xl mx-auto" data-aos="fade-down" data-aos-delay="100">
32
+ Entdecke die besten KI-Tools auf dem Markt mit Links, Erklärungen und Master-Prompts für maximale Ergebnisse.
33
+ </p>
34
+ <div class="flex justify-center gap-4" data-aos="fade-up" data-aos-delay="200">
35
+ <a href="#tools" class="bg-white text-purple-600 px-6 py-3 rounded-lg font-medium hover:bg-gray-100 transition">
36
+ Tools entdecken
37
+ </a>
38
+ <a href="#prompts" class="border-2 border-white text-white px-6 py-3 rounded-lg font-medium hover:bg-white hover:text-purple-600 transition">
39
+ Master Prompts
40
+ </a>
41
+ </div>
42
+ </div>
43
+ </div>
44
+
45
+ <!-- Tools Section -->
46
+ <section id="tools" class="py-16 px-4 max-w-6xl mx-auto">
47
+ <h2 class="text-3xl font-bold text-center mb-12" data-aos="fade-up">KI-Tools Kategorien</h2>
48
+
49
+ <!-- Navigation Tabs -->
50
+ <div class="flex overflow-x-auto pb-2 mb-8" data-aos="fade-up">
51
+ <div class="flex space-x-2">
52
+ <button class="category-btn px-4 py-2 rounded-full bg-purple-600 text-white font-medium" data-category="all">
53
+ Alle
54
+ </button>
55
+ <button class="category-btn px-4 py-2 rounded-full bg-gray-200 hover:bg-gray-300 font-medium" data-category="text">
56
+ Text
57
+ </button>
58
+ <button class="category-btn px-4 py-2 rounded-full bg-gray-200 hover:bg-gray-300 font-medium" data-category="image">
59
+ Bilder
60
+ </button>
61
+ <button class="category-btn px-4 py-2 rounded-full bg-gray-200 hover:bg-gray-300 font-medium" data-category="video">
62
+ Video
63
+ </button>
64
+ <button class="category-btn px-4 py-2 rounded-full bg-gray-200 hover:bg-gray-300 font-medium" data-category="audio">
65
+ Audio
66
+ </button>
67
+ <button class="category-btn px-4 py-2 rounded-full bg-gray-200 hover:bg-gray-300 font-medium" data-category="code">
68
+ Programmierung
69
+ </button>
70
+ </div>
71
+ </div>
72
+
73
+ <!-- Tools Grid -->
74
+ <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
75
+ <!-- ChatGPT -->
76
+ <div class="tool-card bg-white rounded-xl shadow-md overflow-hidden transition-all duration-300" data-category="text">
77
+ <div class="p-6">
78
+ <div class="flex items-center mb-4">
79
+ <img src="http://static.photos/technology/200x200/1" alt="ChatGPT" class="w-12 h-12 rounded-lg mr-4">
80
+ <div>
81
+ <h3 class="font-bold text-xl">ChatGPT</h3>
82
+ <p class="text-gray-500">OpenAI</p>
83
+ </div>
84
+ </div>
85
+ <p class="text-gray-700 mb-4">
86
+ Ein fortschrittlicher Chatbot, der menschenähnliche Konversationen führen und bei verschiedenen Aufgaben helfen kann.
87
+ </p>
88
+ <a href="https://chat.openai.com" target="_blank" class="text-purple-600 font-medium flex items-center">
89
+ <i data-feather="external-link" class="w-4 h-4 mr-1"></i> Zur Webseite
90
+ </a>
91
+ </div>
92
+ </div>
93
+
94
+ <!-- Midjourney -->
95
+ <div class="tool-card bg-white rounded-xl shadow-md overflow-hidden transition-all duration-300" data-category="image">
96
+ <div class="p-6">
97
+ <div class="flex items-center mb-4">
98
+ <img src="http://static.photos/art/200x200/2" alt="Midjourney" class="w-12 h-12 rounded-lg mr-4">
99
+ <div>
100
+ <h3 class="font-bold text-xl">Midjourney</h3>
101
+ <p class="text-gray-500">Midjourney Inc.</p>
102
+ </div>
103
+ </div>
104
+ <p class="text-gray-700 mb-4">
105
+ Eine KI, die atemberaubende Bilder aus Textbeschreibungen generiert. Perfekt für Künstler und Designer.
106
+ </p>
107
+ <a href="https://www.midjourney.com" target="_blank" class="text-purple-600 font-medium flex items-center">
108
+ <i data-feather="external-link" class="w-4 h-4 mr-1"></i> Zur Webseite
109
+ </a>
110
+ </div>
111
+ </div>
112
+
113
+ <!-- GitHub Copilot -->
114
+ <div class="tool-card bg-white rounded-xl shadow-md overflow-hidden transition-all duration-300" data-category="code">
115
+ <div class="p-6">
116
+ <div class="flex items-center mb-4">
117
+ <img src="http://static.photos/technology/200x200/3" alt="GitHub Copilot" class="w-12 h-12 rounded-lg mr-4">
118
+ <div>
119
+ <h3 class="font-bold text-xl">GitHub Copilot</h3>
120
+ <p class="text-gray-500">GitHub & OpenAI</p>
121
+ </div>
122
+ </div>
123
+ <p class="text-gray-700 mb-4">
124
+ Ein KI-Pair-Programmierer, der Code-Vervollständigungen in Echtzeit vorschlägt und Entwicklern hilft.
125
+ </p>
126
+ <a href="https://github.com/features/copilot" target="_blank" class="text-purple-600 font-medium flex items-center">
127
+ <i data-feather="external-link" class="w-4 h-4 mr-1"></i> Zur Webseite
128
+ </a>
129
+ </div>
130
+ </div>
131
+
132
+ <!-- Runway ML -->
133
+ <div class="tool-card bg-white rounded-xl shadow-md overflow-hidden transition-all duration-300" data-category="video">
134
+ <div class="p-6">
135
+ <div class="flex items-center mb-4">
136
+ <img src="http://static.photos/technology/200x200/4" alt="Runway ML" class="w-12 h-12 rounded-lg mr-4">
137
+ <div>
138
+ <h3 class="font-bold text-xl">Runway ML</h3>
139
+ <p class="text-gray-500">Runway Research</p>
140
+ </div>
141
+ </div>
142
+ <p class="text-gray-700 mb-4">
143
+ Eine kreative Suite mit KI-Tools für Videobearbeitung, Bildgenerierung und mehr für Kreativprofis.
144
+ </p>
145
+ <a href="https://runwayml.com" target="_blank" class="text-purple-600 font-medium flex items-center">
146
+ <i data-feather="external-link" class="w-4 h-4 mr-1"></i> Zur Webseite
147
+ </a>
148
+ </div>
149
+ </div>
150
+
151
+ <!-- ElevenLabs -->
152
+ <div class="tool-card bg-white rounded-xl shadow-md overflow-hidden transition-all duration-300" data-category="audio">
153
+ <div class="p-6">
154
+ <div class="flex items-center mb-4">
155
+ <img src="http://static.photos/technology/200x200/5" alt="ElevenLabs" class="w-12 h-12 rounded-lg mr-4">
156
+ <div>
157
+ <h3 class="font-bold text-xl">ElevenLabs</h3>
158
+ <p class="text-gray-500">ElevenLabs</p>
159
+ </div>
160
+ </div>
161
+ <p class="text-gray-700 mb-4">
162
+ Führende Text-zu-Sprache KI mit natürlich klingenden Stimmen für Podcasts, Hörbücher und mehr.
163
+ </p>
164
+ <a href="https://elevenlabs.io" target="_blank" class="text-purple-600 font-medium flex items-center">
165
+ <i data-feather="external-link" class="w-4 h-4 mr-1"></i> Zur Webseite
166
+ </a>
167
+ </div>
168
+ </div>
169
+
170
+ <!-- Claude -->
171
+ <div class="tool-card bg-white rounded-xl shadow-md overflow-hidden transition-all duration-300" data-category="text">
172
+ <div class="p-6">
173
+ <div class="flex items-center mb-4">
174
+ <img src="http://static.photos/technology/200x200/6" alt="Claude" class="w-12 h-12 rounded-lg mr-4">
175
+ <div>
176
+ <h3 class="font-bold text-xl">Claude</h3>
177
+ <p class="text-gray-500">Anthropic</p>
178
+ </div>
179
+ </div>
180
+ <p class="text-gray-700 mb-4">
181
+ Ein sicherer, hilfreicher und harmloser KI-Assistent mit Fokus auf ethische KI-Entwicklung.
182
+ </p>
183
+ <a href="https://claude.ai" target="_blank" class="text-purple-600 font-medium flex items-center">
184
+ <i data-feather="external-link" class="w-4 h-4 mr-1"></i> Zur Webseite
185
+ </a>
186
+ </div>
187
+ </div>
188
+ </div>
189
+ </section>
190
+
191
+ <!-- Master Prompts Section -->
192
+ <section id="prompts" class="py-16 px-4 bg-gray-100">
193
+ <div class="max-w-6xl mx-auto">
194
+ <h2 class="text-3xl font-bold text-center mb-12" data-aos="fade-up">Master Prompts</h2>
195
+
196
+ <div class="prompt-box rounded-xl p-6 mb-8" data-aos="fade-up">
197
+ <h3 class="font-bold text-xl mb-4">Allgemeiner Master Prompt</h3>
198
+ <div class="bg-white p-4 rounded-lg">
199
+ <p class="font-mono text-gray-800">
200
+ "Handele als Experte auf dem Gebiet [Thema einfügen]. Erstelle eine umfassende, detaillierte und gut strukturierte Antwort auf die folgende Frage: [Frage einfügen]. Bitte gehe dabei auf alle relevanten Aspekte ein, verwende klare Beispiele und erkläre Fachbegriffe. Strukturiere die Antwort mit Überschriften, Aufzählungen und Zusammenfassungen, wo es sinnvoll ist."
201
+ </p>
202
+ </div>
203
+ </div>
204
+
205
+ <div class="grid md:grid-cols-2 gap-8">
206
+ <div class="prompt-box rounded-xl p-6 bg-white shadow-md" data-aos="fade-up" data-aos-delay="100">
207
+ <h3 class="font-bold text-xl mb-4">Für Content Creation</h3>
208
+ <div class="bg-gray-100 p-4 rounded-lg">
209
+ <p class="font-mono text-gray-800">
210
+ "Erstelle einen ausführlichen Blogpost über [Thema]. Der Post sollte mindestens 1000 Wörter umfassen und folgende Elemente enthalten: eine fesselnde Einleitung, Hauptabschnitte mit Unterüberschriften, praktische Beispiele, Statistiken oder Zitate von Experten, eine Zusammenfassung und einen Call-to-Action. Achte auf SEO-Optimierung mit relevanten Keywords."
211
+ </p>
212
+ </div>
213
+ </div>
214
+
215
+ <div class="prompt-box rounded-xl p-6 bg-white shadow-md" data-aos="fade-up" data-aos-delay="200">
216
+ <h3 class="font-bold text-xl mb-4">Für Bildgenerierung</h3>
217
+ <div class="bg-gray-100 p-4 rounded-lg">
218
+ <p class="font-mono text-gray-800">
219
+ "Erstelle ein hochauflösendes Bild im Stil von [Künstler/Stil]. Das Bild sollte zeigen [detaillierte Beschreibung], mit den folgenden Elementen: [Liste der Elemente]. Der Stil sollte [Beschreibung des gewünschten Stils] sein, mit [Farbpalette] Farben und [Stimmung/Atmosphäre]. Achte auf realistische Details und harmonische Komposition."
220
+ </p>
221
+ </div>
222
+ </div>
223
+
224
+ <div class="prompt-box rounded-xl p-6 bg-white shadow-md" data-aos="fade-up" data-aos-delay="300">
225
+ <h3 class="font-bold text-xl mb-4">Für Code-Generierung</h3>
226
+ <div class="bg-gray-100 p-4 rounded-lg">
227
+ <p class="font-mono text-gray-800">
228
+ "Schreibe einen vollständigen, gut dokumentierten Code in [Programmiersprache] für [Funktionalität]. Der Code sollte folgende Anforderungen erfüllen: [Anforderungen auflisten]. Füge Kommentare hinzu, die jede wichtige Funktion erklären, und implementiere Fehlerbehandlung. Erstelle auch eine kurze Dokumentation mit Installationsanweisungen und Beispielen zur Verwendung."
229
+ </p>
230
+ </div>
231
+ </div>
232
+
233
+ <div class="prompt-box rounded-xl p-6 bg-white shadow-md" data-aos="fade-up" data-aos-delay="400">
234
+ <h3 class="font-bold text-xl mb-4">Für Marktanalyse</h3>
235
+ <div class="bg-gray-100 p-4 rounded-lg">
236
+ <p class="font-mono text-gray-800">
237
+ "Erstelle eine umfassende Marktanalyse für [Produkt/Dienstleistung/Branche]. Beziehe folgende Aspekte ein: Marktgröße und Wachstumstrends, Hauptwettbewerber, Zielgruppe und Kundensegmente, SWOT-Analyse, aktuelle Herausforderungen und Chancen, sowie zukünftige Entwicklungen. Präsentiere die Daten in klaren Visualisierungen und mit konkreten Handlungsempfehlungen."
238
+ </p>
239
+ </div>
240
+ </div>
241
+ </div>
242
+ </div>
243
+ </section>
244
+
245
+ <!-- Newsletter -->
246
+ <section class="py-16 px-4 gradient-bg text-white">
247
+ <div class="max-w-4xl mx-auto text-center">
248
+ <h2 class="text-3xl font-bold mb-6" data-aos="fade-up">Bleib auf dem Laufenden</h2>
249
+ <p class="text-xl mb-8" data-aos="fade-up" data-aos-delay="100">
250
+ Erhalte wöchentliche Updates über neue KI-Tools und die besten Prompts direkt in dein Postfach.
251
+ </p>
252
+ <form class="flex flex-col sm:flex-row gap-4 max-w-md mx-auto" data-aos="fade-up" data-aos-delay="200">
253
+ <input type="email" placeholder="Deine E-Mail-Adresse" class="flex-grow px-4 py-3 rounded-lg text-gray-900 focus:outline-none focus:ring-2 focus:ring-purple-500">
254
+ <button type="submit" class="bg-purple-800 hover:bg-purple-900 text-white px-6 py-3 rounded-lg font-medium transition">
255
+ Abonnieren
256
+ </button>
257
+ </form>
258
+ </div>
259
+ </section>
260
+
261
+ <!-- Footer -->
262
+ <footer class="bg-gray-900 text-white py-12 px-4">
263
+ <div class="max-w-6xl mx-auto">
264
+ <div class="grid md:grid-cols-3 gap-8">
265
+ <div>
266
+ <h3 class="text-xl font-bold mb-4">KI-Tools Übersicht</h3>
267
+ <p class="text-gray-400">
268
+ Die umfassendste Sammlung der besten KI-Tools mit praktischen Prompts für maximale Ergebnisse.
269
+ </p>
270
+ </div>
271
+ <div>
272
+ <h3 class="text-xl font-bold mb-4">Kategorien</h3>
273
+ <ul class="space-y-2">
274
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Text-Tools</a></li>
275
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Bild-Tools</a></li>
276
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Video-Tools</a></li>
277
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Audio-Tools</a></li>
278
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Code-Tools</a></li>
279
+ </ul>
280
+ </div>
281
+ <div>
282
+ <h3 class="text-xl font-bold mb-4">Kontakt</h3>
283
+ <p class="text-gray-400 mb-4">Fragen oder Anregungen? Wir freuen uns von dir zu hören!</p>
284
+ <div class="flex space-x-4">
285
+ <a href="#" class="text-gray-400 hover:text-white transition"><i data-feather="mail"></i></a>
286
+ <a href="#" class="text-gray-400 hover:text-white transition"><i data-feather="twitter"></i></a>
287
+ <a href="#" class="text-gray-400 hover:text-white transition"><i data-feather="github"></i></a>
288
+ </div>
289
+ </div>
290
+ </div>
291
+ <div class="border-t border-gray-800 mt-12 pt-8 text-center text-gray-500">
292
+ <p>&copy; 2023 KI-Tools Übersicht. Alle Rechte vorbehalten.</p>
293
+ </div>
294
+ </div>
295
+ </footer>
296
+
297
+ <script>
298
+ AOS.init();
299
+ feather.replace();
300
+
301
+ // Category filtering
302
+ document.querySelectorAll('.category-btn').forEach(btn => {
303
+ btn.addEventListener('click', function() {
304
+ // Update active button
305
+ document.querySelectorAll('.category-btn').forEach(b => {
306
+ b.classList.remove('bg-purple-600', 'text-white');
307
+ b.classList.add('bg-gray-200', 'hover:bg-gray-300');
308
+ });
309
+ this.classList.add('bg-purple-600', 'text-white');
310
+ this.classList.remove('bg-gray-200', 'hover:bg-gray-300');
311
+
312
+ // Filter tools
313
+ const category = this.dataset.category;
314
+ document.querySelectorAll('.tool-card').forEach(card => {
315
+ if (category === 'all' || card.dataset.category === category) {
316
+ card.style.display = 'block';
317
+ } else {
318
+ card.style.display = 'none';
319
+ }
320
+ });
321
+ });
322
+ });
323
+ </script>
324
+ </body>
325
  </html>
prompts.txt ADDED
@@ -0,0 +1 @@
 
 
1
+ Erstelle mir eine webseite mit allen KI-Tools die es zur Zeit auf dem Markt gibt mit Link und jeweil eine Erklärung und ein masterprompt