| | <!DOCTYPE html> |
| | <html lang="tr"> |
| | <head> |
| | <meta charset="UTF-8"> |
| | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| | <title>AI Hub - Yapay Zeka Siteleri Rehberi</title> |
| | <script src="https://cdn.tailwindcss.com"></script> |
| | <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet"> |
| | <style> |
| | @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); |
| | |
| | * { |
| | font-family: 'Inter', sans-serif; |
| | } |
| | |
| | .gradient-text { |
| | background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
| | -webkit-background-clip: text; |
| | -webkit-text-fill-color: transparent; |
| | background-clip: text; |
| | } |
| | |
| | .card-hover { |
| | transition: all 0.3s ease; |
| | } |
| | |
| | .card-hover:hover { |
| | transform: translateY(-5px); |
| | box-shadow: 0 20px 40px rgba(0,0,0,0.1); |
| | } |
| | |
| | .tab-active { |
| | background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
| | color: white; |
| | } |
| | |
| | .tab-inactive { |
| | background: #f3f4f6; |
| | color: #6b7280; |
| | } |
| | |
| | .tab-inactive:hover { |
| | background: #e5e7eb; |
| | } |
| | |
| | .search-input { |
| | background: rgba(255,255,255,0.9); |
| | backdrop-filter: blur(10px); |
| | } |
| | |
| | .category-badge { |
| | background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
| | } |
| | |
| | @keyframes fadeIn { |
| | from { opacity: 0; transform: translateY(20px); } |
| | to { opacity: 1; transform: translateY(0); } |
| | } |
| | |
| | .fade-in { |
| | animation: fadeIn 0.5s ease forwards; |
| | } |
| | |
| | .glass-effect { |
| | background: rgba(255,255,255,0.8); |
| | backdrop-filter: blur(10px); |
| | border: 1px solid rgba(255,255,255,0.2); |
| | } |
| | |
| | .dark-glass { |
| | background: rgba(17,24,39,0.8); |
| | backdrop-filter: blur(10px); |
| | } |
| | </style> |
| | </head> |
| | <body class="bg-gray-50 min-h-screen"> |
| | |
| | <header class="sticky top-0 z-50 glass-effect shadow-lg"> |
| | <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4"> |
| | <div class="flex items-center justify-between"> |
| | <div class="flex items-center space-x-3"> |
| | <div class="w-10 h-10 rounded-xl bg-gradient-to-br from-indigo-500 to-purple-600 flex items-center justify-center"> |
| | <i class="fas fa-robot text-white text-xl"></i> |
| | </div> |
| | <div> |
| | <h1 class="text-2xl font-bold gradient-text">AI Hub</h1> |
| | <p class="text-xs text-gray-500">Yapay Zeka Siteleri Rehberi</p> |
| | </div> |
| | </div> |
| | |
| | |
| | <div class="hidden md:flex flex-1 max-w-xl mx-8"> |
| | <div class="relative w-full"> |
| | <input type="text" id="searchInput" placeholder="AI sitesi ara..." |
| | class="w-full pl-12 pr-4 py-3 rounded-xl border-2 border-gray-200 focus:border-indigo-500 focus:outline-none transition-colors search-input"> |
| | <i class="fas fa-search absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400"></i> |
| | </div> |
| | </div> |
| | |
| | <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" |
| | class="hidden md:flex items-center space-x-2 px-4 py-2 rounded-lg bg-gradient-to-r from-indigo-500 to-purple-600 text-white text-sm font-medium hover:shadow-lg transition-shadow"> |
| | <i class="fas fa-code"></i> |
| | <span>Built with anycoder</span> |
| | </a> |
| | </div> |
| | |
| | |
| | <div class="md:hidden mt-4"> |
| | <div class="relative"> |
| | <input type="text" id="searchInputMobile" placeholder="AI sitesi ara..." |
| | class="w-full pl-12 pr-4 py-3 rounded-xl border-2 border-gray-200 focus:border-indigo-500 focus:outline-none transition-colors search-input"> |
| | <i class="fas fa-search absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400"></i> |
| | </div> |
| | </div> |
| | </div> |
| | </header> |
| |
|
| | |
| | <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8"> |
| | |
| | <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-8"> |
| | <div class="bg-white rounded-xl p-4 shadow-sm border border-gray-100"> |
| | <div class="text-2xl font-bold text-indigo-600" id="totalSites">0</div> |
| | <div class="text-sm text-gray-500">Toplam Site</div> |
| | </div> |
| | <div class="bg-white rounded-xl p-4 shadow-sm border border-gray-100"> |
| | <div class="text-2xl font-bold text-purple-600" id="totalCategories">0</div> |
| | <div class="text-sm text-gray-500">Kategori</div> |
| | </div> |
| | <div class="bg-white rounded-xl p-4 shadow-sm border border-gray-100"> |
| | <div class="text-2xl font-bold text-pink-600">150+</div> |
| | <div class="text-sm text-gray-500">AI Aracı</div> |
| | </div> |
| | <div class="bg-white rounded-xl p-4 shadow-sm border border-gray-100"> |
| | <div class="text-2xl font-bold text-blue-600">Günlük</div> |
| | <div class="text-sm text-gray-500">Güncellenir</div> |
| | </div> |
| | </div> |
| |
|
| | |
| | <div class="mb-8"> |
| | <div class="flex flex-wrap gap-2" id="categoryTabs"> |
| | |
| | </div> |
| | </div> |
| |
|
| | |
| | <div id="sitesGrid" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6"> |
| | |
| | </div> |
| |
|
| | |
| | <div id="emptyState" class="hidden text-center py-16"> |
| | <div class="w-24 h-24 mx-auto mb-4 rounded-full bg-gray-100 flex items-center justify-center"> |
| | <i class="fas fa-search text-4xl text-gray-400"></i> |
| | </div> |
| | <h3 class="text-xl font-semibold text-gray-700 mb-2">Sonuç bulunamadı</h3> |
| | <p class="text-gray-500">Aramanızla eşleşen bir site bulunamadı.</p> |
| | </div> |
| | </main> |
| |
|
| | |
| | <footer class="bg-gray-900 text-white py-8 mt-16"> |
| | <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| | <div class="flex flex-col md:flex-row items-center justify-between"> |
| | <div class="flex items-center space-x-3 mb-4 md:mb-0"> |
| | <div class="w-8 h-8 rounded-lg bg-gradient-to-br from-indigo-500 to-purple-600 flex items-center justify-center"> |
| | <i class="fas fa-robot text-white text-sm"></i> |
| | </div> |
| | <span class="font-semibold">AI Hub</span> |
| | </div> |
| | <div class="flex items-center space-x-6 text-sm text-gray-400"> |
| | <a href="#" class="hover:text-white transition-colors">Hakkında</a> |
| | <a href="#" class="hover:text-white transition-colors">İletişim</a> |
| | <a href="#" class="hover:text-white transition-colors">Gizlilik</a> |
| | </div> |
| | <div class="mt-4 md:mt-0"> |
| | <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" |
| | class="text-sm text-gray-400 hover:text-white transition-colors"> |
| | Built with anycoder |
| | </a> |
| | </div> |
| | </div> |
| | </div> |
| | </footer> |
| |
|
| | <script> |
| | // AI Sites Database |
| | const aiSites = { |
| | "chatbots": { |
| | name: "Sohbet Botları", |
| | icon: "fa-comments", |
| | color: "from-blue-500 to-cyan-500", |
| | sites: [ |
| | { name: "ChatGPT", url: "https://chat.openai.com", desc: "OpenAI'nin güçlü sohbet botu", featured: true, tags: ["Metin", "Kod", "Analiz"] }, |
| | { name: "Claude", url: "https://claude.ai", desc: "Anthropic'ın güvenli AI asistanı", featured: true, tags: ["Metin", "Doküman", "Analiz"] }, |
| | { name: "Gemini", url: "https://gemini.google.com", desc: "Google'ın yapay zeka asistanı", featured: true, tags: ["Metin", "Görsel", "Arama"] }, |
| | { name: "Perplexity", url: "https://perplexity.ai", desc: "AI destekli arama motoru", featured: true, tags: ["Arama", "Kaynak", "Araştırma"] }, |
| | { name: "Copilot", url: "https://copilot.microsoft.com", desc: "Microsoft'un AI asistanı", featured: false, tags: ["Metin", "Görsel", "Ofis"] }, |
| | { name: "Poe", url: "https://poe.com", desc: "Birçok AI modeli tek yerde", featured: false, tags: ["Çoklu", "Bot", "Sohbet"] }, |
| | { name: "Character.AI", url: "https://character.ai", desc: "AI karakterlerle sohbet", featured: false, tags: ["Eğlence", "Karakter", "Sohbet"] }, |
| | { name: "YouChat", url: "https://you.com", desc: "AI arama ve sohbet", featured: false, tags: ["Arama", "Sohbet", "Özet"] }, |
| | { name: "Pi", url: "https://pi.ai", desc: "Kişisel AI asistanı", featured: false, tags: ["Kişisel", "Sohbet", "Destek"] }, |
| | { name: "HuggingChat", url: "https://huggingface.co/chat", desc: "Açık kaynak sohbet botu", featured: false, tags: ["Açık Kaynak", "Metin", "Kod"] } |
| | ] |
| | }, |
| | "image": { |
| | name: "Görsel Oluşturma", |
| | icon: "fa-image", |
| | color: "from-purple-500 to-pink-500", |
| | sites: [ |
| | { name: "Midjourney", url: "https://www.midjourney.com", desc: "En iyi AI görsel oluşturucu", featured: true, tags: ["Sanat", "Tasarım", "Profesyonel"] }, |
| | { name: "DALL-E 3", url: "https://openai.com/dall-e-3", desc: "OpenAI'ın görsel oluşturucusu", featured: true, tags: ["Metin-Görsel", "Gerçekçi", "Yaratıcı"] }, |
| | { name: "Stable Diffusion", url: "https://stability.ai", desc: "Açık kaynak görsel AI", featured: true, tags: ["Açık Kaynak", "Lokal", "Özelleştirilebilir"] }, |
| | { name: "Adobe Firefly", url: "https://www.adobe.com/sensei/generative-ai/firefly.html", desc: "Adobe'nin yaratıcı AI'sı", featured: true, tags: ["Tasarım", "Profesyonel", "Ticari"] }, |
| | { name: "Leonardo.ai", url: "https://leonardo.ai", desc: "Oyun ve sanat için AI görsel", featured: false, tags: ["Oyun", "Sanat", "3D"] }, |
| | { name: "Ideogram", url: "https://ideogram.ai", desc: "Metin içeren görseller", featured: false, tags: ["Tipografi", "Logo", "Metin"] }, |
| | { name: "Playground", url: "https://playgroundai.com", desc: "Ücretsiz AI görsel oluşturma", featured: false, tags: ["Ücretsiz", "Hızlı", "Kolay"] }, |
| | { name: "NightCafe", url: "https://nightcafe.studio", desc: "AI sanat topluluğu", featured: false, tags: ["Topluluk", "Sanat", "Yarışma"] }, |
| | { name: "Artbreeder", desc: "Karma ve evrimleşen görseller", featured: false, tags: ["Portre", "Karakter", "Karma"] }, |
| | { name: "Craiyon", url: "https://www.craiyon.com", desc: "Ücretsiz DALL-E mini", featured: false, tags: ["Ücretsiz", "Basit", "Hızlı"] }, |
| | { name: "DeepAI", url: "https://deepai.org", desc: "Çeşitli AI görsel araçları", featured: false, tags: ["Çeşitli", "API", "Araçlar"] }, |
| | { name: "Runway ML", url: "https://runwayml.com", desc: "Yaratıcı AI araçları", featured: true, tags: ["Video", "Görsel", "Profesyonel"] } |
| | ] |
| | }, |
| | "video": { |
| | name: "Video Oluşturma", |
| | icon: "fa-video", |
| | color: "from-red-500 to-orange-500", |
| | sites: [ |
| | { name: "Sora", url: "https://openai.com/sora", desc: "OpenAI'ın video oluşturucusu", featured: true, tags: ["Metin-Video", "Gerçekçi", "Uzun"] }, |
| | { name: "Runway Gen-2", url: "https://runwayml.com/gen-2", desc: "Metin/görselden video", featured: true, tags: ["Metin-Video", "Görsel-Video", "Profesyonel"] }, |
| | { name: "Pika Labs", url: "https://pika.art", desc: "AI video oluşturma", featured: true, tags: ["Hızlı", "Yaratıcı", "Kolay"] }, |
| | { name: "HeyGen", url: "https://www.heygen.com", desc: "AI avatar ve video", featured: true, tags: ["Avatar", "TTS", "Pazarlama"] }, |
| | { name: "Synthesia", url: "https://www.synthesia.io", desc: "AI video sunumları", featured: false, tags: ["Eğitim", "Kurumsal", "Avatar"] }, |
| | { name: "InVideo", url: "https://invideo.io", desc: "Metinden video oluşturma", featured: false, tags: ["Metin-Video", "Şablon", "Hızlı"] }, |
| | { name: "Fliki", url: "https://fliki.ai", desc: "Blogdan video yapma", featured: false, tags: ["Blog-Video", "TTS", "Sosyal"] }, |
| | { name: "Descript", url: "https://www.descript.com", desc: "Video düzenleme ve AI", featured: false, tags: ["Düzenleme", "Transkript", "Podcast"] }, |
| | { name: "Lumen5", url: "https://lumen5.com", desc: "Metinden video oluşturma", featured: false, tags: ["Pazarlama", "Sosyal", "Hızlı"] }, |
| | { name: "Pictory", url: "https://pictory.ai", desc: "Uzun videodan kısa içerik", featured: false, tags: ["Özet", "Klip", "Sosyal"] } |
| | ] |
| | }, |
| | "code": { |
| | name: "Kod & Geliştirme", |
| | icon: "fa-code", |
| | color: "from-green-500 to-emerald-500", |
| | sites: [ |
| | { name: "GitHub Copilot", url: "https://github.com/features/copilot", desc: "AI kod tamamlayıcı", featured: true, tags: ["Kod", "IDE", "Üretkenlik"] }, |
| | { name: "Cursor", url: "https://cursor.sh", desc: "AI-first kod editörü", featured: true, tags: ["Editör", "Chat", "Kod"] }, |
| | { name: "Codeium", url: "https://codeium.com", desc: "Ücretsiz GitHub Copilot alternatifi", featured: true, tags: ["Ücretsiz", "Hızlı", "IDE"] }, |
| | { name: "Tabnine", url: "https://www.tabnine.com", desc: "AI kod tamamlayıcı", featured: false, tags: ["Gizlilik", "Lokal", "Kurumsal"] }, |
| | { name: "Replit Ghostwriter", url: "https://replit.com", desc: "Replit'in AI asistanı", featured: false, tags: ["Bulut", "Eğitim", "Hızlı"] }, |
| | { name: "Amazon CodeWhisperer", url: "https://aws.amazon.com/codewhisperer", desc: "AWS'nin kod AI'sı", featured: false, tags: ["AWS", "Güvenlik", "Ücretsiz"] }, |
| | { name: "Sourcegraph Cody", url: "https://sourcegraph.com/cody", desc: "Kod anlayışı ve AI", featured: false, tags: ["Kod Arama", "Analiz", "Büyük Kod"] }, |
| | { name: "JetBrains AI", url: "https://www.jetbrains.com/ai", desc: "IDE'ler için AI", featured: false, tags: ["IDE", "Entegre", "Profesyonel"] }, |
| | { name: "CodeT5", url: "https://huggingface.co/Salesforce/codet5-base", desc: "Açık kaynak kod modeli", featured: false, tags: ["Açık Kaynak", "Araştırma", "Hugging Face"] }, |
| | { name: "AlphaCode", url: "https://alphacode.deepmind.com", desc: "DeepMind'ın kod AI'sı", featured: false, tags: ["Yarışma", "Araştırma", "Derin"] } |
| | ] |
| | }, |
| | "audio": { |
| | name: "Ses & Müzik", |
| | icon: "fa-music", |
| | color: "from-yellow-500 to-amber-500", |
| | sites: [ |
| | { name: "Suno AI", url: "https://www.suno.ai", desc: "Metinden şarkı oluşturma", featured: true, tags: ["Müzik", "Şarkı", "Yaratıcı"] }, |
| | { name: "Udio", url: "https://www.udio.com", desc: "AI müzik oluşturucu", featured: true, tags: ["Müzik", "Yüksek Kalite", "Yaratıcı"] }, |
| | { name: "ElevenLabs", url: "https://elevenlabs.io", desc: "En gerçekçi AI ses", featured: true, tags: ["TTS", "Ses Klonlama", "Profesyonel"] }, |
| | { name: "Murf AI", url: "https://murf.ai", desc: "AI seslendirme stüdyosu", featured: true, tags: ["TTS", "Video", "Kurumsal"] }, |
| | { name: "AIVA", url: "https://www.aiva.ai", desc: "AI müzik bestecisi", featured: false, tags: ["Klasik",Film", "Lisans"] }, |
| | { name: "Soundraw", url: "https://soundraw.io", desc: "Telifsiz AI müzik", featured: false, tags: ["Telifsiz", "Özelleştirilebilir", "İçerik"] }, |
| | { name: "Boomy", url: "https://boomy.com", desc: "Hızlı AI şarkı yapma", featured: false, tags: ["Hızlı", "Kolay", "Dağıtım"] }, |
| | { name: "Voice.ai", url: "https://voice.ai", desc: "Gerçek zamanlı ses değiştirme", featured: false, tags: ["Ses Değiştirme", "Canlı", "Oyun"] }, |
| | { name: "Whisper", url: "https://openai.com/whisper", desc: "OpenAI'ın konuşma tanıma", featured: false, tags: ["Transkript", "Çeviri", "Açık Kaynak"] }, |
| | { name: "Descript Overdub", url: "https://www.descript.com/overdub", desc: "Ses klonlama ve düzenleme", featured: false, tags: ["Ses Klonlama", "Düzenleme", "Podcast"] } |
| | ] |
| | }, |
| | "writing": { |
| | name: "Yazı & İçerik", |
| | icon: "fa-pen-fancy", |
| | color: "from-pink-500 to-rose-500", |
| | sites: [ |
| | { name: "Jasper", url: "https://www.jasper.ai", desc: "AI pazarlama yazıları", featured: true, tags: ["Pazarlama", "SEO", "Kurumsal"] }, |
| | { name: "Copy.ai", url: "https://www.copy.ai", desc: "AI kopya yazma", featured: true, tags: ["Kopya", "Sosyal", "Hızlı"] }, |
| | { name: "Notion AI", url: "https://www.notion.so/product/ai", desc: "Notion'un AI asistanı", featured: true, tags: ["Notlar", "Özet", "Yazı"] }, |
| | { name: "Grammarly", url: "https://www.grammarly.com", desc: "AI yazım asistanı", featured: true, tags: ["Dil Bilgisi", "İmla", "Profesyonel"] }, |
| | { name: "Writesonic", url: "https://writesonic.com", desc: "AI içerik oluşturucu", featured: false, tags: ["Blog", "SEO", "Reklam"] }, |
| | { name: "Rytr", url: "https://rytr.me", desc: "Uygun fiyatlı AI yazar", featured: false, tags: ["Ekonomik", "Çoklu Dil", "Hızlı"] }, |
| | { name: "Wordtune", url: "https://www.wordtune.com", desc: "Cümle yeniden yazma", featured: false, tags: ["Parafraz", "Netlik", "İyileştirme"] }, |
| | { name: "Sudowrite", url: "https://www.sudowrite.com", desc: "Yaratıcı yazım AI'sı", featured: false, tags: ["Hikaye", "Roman", "Yaratıcı"] }, |
| | { name: "QuillBot", url: "https://quillbot.com", desc: "Parafraz ve özetleme", featured: false, tags: ["Parafraz", "Özet", "Akademik"] }, |
| | { name: "Lex", url: "https://lex.page", desc: "AI destekli yazım", featured: false, tags: ["Minimal", "Odak", "Yazarlar"] } |
| | ] |
| | }, |
| | "design": { |
| | name: "Tasarım & UI", |
| | icon: "fa-palette", |
| | color: "from-indigo-500 to-violet-500", |
| | sites: [ |
| | { name: "Canva AI", url: "https://www.canva.com/magic", desc: "Canva'nın AI araçları", featured: true, tags: ["Tasarım", "Sosyal", "Kolay"] }, |
| | { name: "Figma AI", url: "https://www.figma.com/ai", desc: "Figma'nın AI özellikleri", featured: true, tags: ["UI/UX", "Tasarım", "İşbirliği"] }, |
| | { name: "Uizard", url: "https://uizard.io", desc: "AI UI tasarım aracı", featured: true, tags: ["UI", "Tel Çerçeve", "Otomatik"] }, |
| | { name: "Galileo AI", url: "https://www.usegalileo.ai", desc: "Metinden UI tasarımı", featured: true, tags: ["Metin-UI", "Hızlı", "Profesyonel"] }, |
| | { name: "Framer AI", url: "https://www.framer.com/ai", desc: "AI web sitesi oluşturucu", featured: false, tags: ["Web", "Site", "Canlı"] }, |
| | { name: "Visily", url: "https://www.visily.ai", desc: "AI tel çerçeve ve prototip", featured: false, tags: ["Tel Çerçeve", "Ekran Görüntüsü", "Hızlı"] }, |
| | { name: "Khroma", url: "http://khroma.co", desc: "AI renk paleti üretici", featured: false, tags: ["Renk", "Palet", "Tasarım"] }, |
| | { name: "Let's Enhance", url: "https://letsenhance.io", desc: "AI görsel yükseltme", featured: false, tags: ["Yükseltme", "Kalite", "Baskı"] }, |
| | { name: "Remove.bg", url: "https://www.remove.bg", desc: "Arka plan kaldırma", featured: false, tags: ["Arka Plan", "Hızlı", "Otomatik"] }, |
| | { name: "Looka", url: "https://looka.com", desc: "AI logo oluşturucu", featured: false, tags: ["Logo", "Marka", "Kimlik"] } |
| | ] |
| | }, |
| | "productivity": { |
| | name: "Verimlilik & Araçlar", |
| | icon: "fa-bolt", |
| | color: "from-teal-500 to-cyan-500", |
| | sites: [ |
| | { name: "Mem.ai", url: "https://mem.ai", desc: "AI not alma uygulaması", featured: true, tags: ["Notlar", "Bellek", "Organizasyon"] }, |
| | { name: "Otter.ai", url: "https://otter.ai", desc: "AI toplantı asistanı", featured: true, tags: ["Transkript", "Toplantı", "İş"] }, |
| | { name: "Fireflies.ai", url: "https://fireflies.ai", desc: "Toplantı kayıt ve analiz", featured: true, tags: ["Toplantı", "CRM", "Analiz"] }, |
| | { name: "Rewind", url: "https://www.rewind.ai", desc: "Kişisel AI belleği", featured: true, tags: ["Bellek", "Arama", "Gizlilik"] }, |
| | { name: "Raycast AI", url: "https://www.raycast.com", desc: "Mac için AI asistanı", featured: false, tags: ["Mac", "Kısayol", "Üretkenlik"] }, |
| | { name: "Taskade", url: "https://www.taskade.com", desc: "AI proje yönetimi", featured: false, tags: ["Proje", "Takım", "Otomasyon"] }, |
| | { name: "Motion", url: "https://www.usemotion.com", desc: "AI takvim ve planlayıcı", featured: false, tags: ["Takvim", "Planlama", "Zaman"] }, |
| | { name: "Reclaim.ai", url: "https://reclaim.ai", desc: "Akıllı takvim planlama", featured: false, tags: ["Takvim", "Zaman", "Denge"] }, |
| | { name: "Tome", url: "https://tome.app", desc: "AI sunum oluşturucu", featured: false, tags: ["Sunum", "Hikaye", "Görsel"] }, |
| | { name: "Gamma", url: "https://gamma.app", desc: "AI belge ve sunum", featured: false, tags: ["Belge", "Sunum", "Web"] } |
| | ] |
| | }, |
| | "research": { |
| | name: "Araştırma & Eğitim", |
| | icon: "fa-graduation-cap", |
| | color: "from-orange-500 to-red-500", |
| | sites: [ |
| | { name: "Elicit", url: "https://elicit.org", desc: "AI araştırma asistanı", featured: true, tags: ["Araştırma", "Makale", "Analiz"] }, |
| | { name: "Consensus", url: "https://consensus.app", desc: "Bilimsel arama motoru", featured: true, tags: ["Bilim", "Kanıt", "Arama"] }, |
| | { name: "Semantic Scholar", url: "https://www.semanticscholar.org", desc: "AI destekli akademik arama", featured: true, tags: ["Akademik", "Makale", "Özet"] }, |
| | { name: "Research Rabbit", url: "https://www.researchrabbit.ai", desc: "Araştırma haritası oluşturucu", featured: true, tags: ["Keşif", "Harita", "İlişki"] }, |
| | { name: "Connected Papers", url: "https://www.connectedpapers.com", desc: "Makale ilişki grafiği", featured: false, tags: ["Graf", "İlişki", "Keşif"] }, |
| | { name: "Scite", url: "https://scite.ai", desc: "Akıllı alıntı analizi", featured: false, tags: ["Alıntı", "Doğrulama", "Kontekst"] }, |
| | { name: "Scholarcy", url: "https://www.scholarcy.com", desc: "Araştırma özetleyici", featured: false, tags: ["Özet", "Flashcard", "Hızlı"] }, |
| | { name: "Jenni AI", url: "https://jenni.ai", desc: "Akademik yazım asistanı", featured: false, tags: ["Akademik", "Yazı", "Atıf"] }, |
| | { name: "Explainpaper", url: "https://www.explainpaper.com", desc: "Karmaşık makaleleri açıkla", featured: false, tags: ["Açıklama", "Basitleştirme", "Öğrenme"] }, |
| | { name: "SciSpace", url: "https://typeset.io", desc: "Araştırma okuma ve yazma", featured: false, tags: ["Okuma", "Yazı", "İşbirliği"] } |
| | ] |
| | }, |
| | "multimodal": { |
| | name: "Çok Modlu AI", |
| | icon: "fa-layer-group", |
| | color: "from-emerald-500 to-green-500", |
| | sites: [ |
| | { name: "GPT-4V", url: "https://openai.com/gpt-4", desc: "Görsel anlayışlı GPT-4", featured: true, tags: ["Görsel", "Metin", "Analiz"] }, |
| | { name: "Gemini Pro", url: "https://deepmind.google/technologies/gemini", desc: "Google'ın çok modlu AI'sı", featured: true, tags: ["Çok Modlu", "Görsel", "Video"] }, |
| | { name: "Claude 3", url: "https://www.anthropic.com/claude", desc: "Çok modlu Claude", featured: true, tags: ["Görsel", "Doküman", "Analiz"] }, |
| | { name: "LLaVA", url: "https://llava-vl.github.io", desc: "Açık kaynak çok modlu", featured: false, tags: ["Açık Kaynak", "Görsel", "Sohbet"] }, |
| | { name: "Bard / Gemini", url: "https://gemini.google.com", desc: "Google'ın evrimleşen AI'sı", featured: false, tags: ["Arama", "Görsel", "Entegre"] }, |
| | { name: "Meta AI", url: "https://www.meta.ai", desc: "Meta'nın çok modlu AI'sı", featured: false, tags: ["Sosyal", "Görsel", "Ücretsiz"] }, |
| | { name: "Qwen-VL", url: "https://huggingface.co/Qwen", desc: "Alibaba'nın görsel LLM'i", featured: false, tags: ["Görsel", "Çoklu Dil", "Açık"] }, |
| | { name: "Fuyu-8B", url: "https://www.adept.ai/blog/fuyu-8b", desc: "Adept'in çok modlu modeli", featured: false, tags: ["Doküman", "Arayüz", "Eylem"] }, |
| | { name: "IDEFICS", url: "https://huggingface.co/blog/idefics", desc: "Açık çok modlu model", featured: false, tags: ["Açık Kaynak", "Görsel", "Sohbet"] }, |
| | { name: "KOSMOS-2", url: "https://huggingface.co/microsoft/kosmos-2-patch14-224", desc: "Microsoft'un çok modlu", featured: false, tags: ["Görsel",Yerleştirme", "Açık"] } |
| | ] |
| | } |
| | }; |
| | |
| | let currentCategory = 'all'; |
| | let searchTerm = ''; |
| | |
| | // Initialize |
| | document.addEventListener('DOMContentLoaded', () => { |
| | renderStats(); |
| | renderTabs(); |
| | renderSites(); |
| | setupSearch(); |
| | }); |
| | |
| | function renderStats() { |
| | let totalSites = 0; |
| | let totalCategories = Object.keys(aiSites).length; |
| | |
| | Object.values(aiSites).forEach(cat => { |
| | totalSites += cat.sites.length; |
| | }); |
| | |
| | document.getElementById('totalSites').textContent = totalSites; |
| | document.getElementById('totalCategories').textContent = totalCategories; |
| | } |
| | |
| | function renderTabs() { |
| | const tabsContainer = document.getElementById('categoryTabs'); |
| | const categories = Object.entries(aiSites); |
| | |
| | // All tab |
| | const allBtn = createTab('all', 'Tümü', 'fa-th-large', true); |
| | tabsContainer.appendChild(allBtn); |
| | |
| | // Category tabs |
| | categories.forEach(([key, category]) => { |
| | const btn = createTab(key, category.name, category.icon, false); |
| | tabsContainer.appendChild(btn); |
| | }); |
| | } |
| | |
| | function createTab(key, name, icon, isActive) { |
| | const btn = document.createElement('button'); |
| | btn.className = `px-4 py-2 rounded-lg font-medium text-sm transition-all flex items-center space-x-2 ${ |
| | isActive ? 'tab-active' : 'tab-inactive' |
| | }`; |
| | btn.innerHTML = `<i class="fas ${icon}"></i><span>${name}</span>`; |
| | btn.onclick = () => switchCategory(key, btn); |
| | btn.dataset.category = key; |
| | return btn; |
| | } |
| | |
| | function switchCategory(category, clickedBtn) { |
| | currentCategory = category; |
| | |
| | // Update active state |
| | document.querySelectorAll('#categoryTabs button').forEach(btn => { |
| | btn.className = 'px-4 py-2 rounded-lg font-medium text-sm transition-all flex items-center space-x-2 tab-inactive'; |
| | }); |
| | clickedBtn.className = 'px-4 py-2 rounded-lg font-medium text-sm transition-all flex items-center space-x-2 tab-active'; |
| | |
| | renderSites(); |
| | } |
| | |
| | function renderSites() { |
| | const grid = document.getElementById('sitesGrid'); |
| | const emptyState = document.getElementById('emptyState'); |
| | grid.innerHTML = ''; |
| | |
| | let sitesToShow = []; |
| | |
| | if (currentCategory === 'all') { |
| | Object.entries(aiSites).forEach(([catKey, category]) => { |
| | category.sites.forEach(site => { |
| | sitesToShow.push({ ...site, category: category.name, categoryKey: catKey, color: category.color }); |
| | }); |
| | }); |
| | } else { |
| | const category = aiSites[currentCategory]; |
| | sitesToShow = category.sites.map(site => ({ |
| | ...site, |
| | category: category.name, |
| | categoryKey: currentCategory, |
| | color: category.color |
| | })); |
| | } |
| | |
| | // Filter by search |
| | if (searchTerm) { |
| | sitesToShow = sitesToShow.filter(site => |
| | site.name.toLowerCase().includes(searchTerm.toLowerCase()) || |
| | site.desc.toLowerCase().includes(searchTerm.toLowerCase()) || |
| | site.tags.some(tag => tag.toLowerCase().includes(searchTerm.toLowerCase())) |
| | ); |
| | } |
| | |
| | // Sort: featured first |
| | sitesToShow.sort((a, b) => (b.featured === a.featured) ? 0 : b.featured ? 1 : -1); |
| | |
| | if (sitesToShow.length === 0) { |
| | emptyState.classList.remove('hidden'); |
| | return; |
| | } else { |
| | emptyState.classList.add('hidden'); |
| | } |
| | |
| | sitesToShow.forEach((site, index) => { |
| | const card = createSiteCard(site, index); |
| | grid.appendChild(card); |
| | }); |
| | } |
| | |
| | function createSiteCard(site, index) { |
| | const div = document.createElement('div'); |
| | div.className = 'bg-white rounded-2xl p-6 shadow-sm border border-gray-100 card-hover fade-in'; |
| | div.style.animationDelay = `${index * 0.05}s`; |
| | |
| | const featuredBadge = site.featured ? |
| | `<span class="absolute -top-2 -right-2 w-8 h-8 bg-gradient-to-r from-yellow-400 to-orange-500 rounded-full flex items-center justify-center shadow-lg"> |
| | <i class="fas fa-star text-white text-xs"></i> |
| | </span>` : ''; |
| | |
| | div.innerHTML = ` |
| | <div class="relative"> |
| | ${featuredBadge} |
| | <div class="flex items-start justify-between mb-4"> |
| | <div class="w-12 h-12 rounded-xl bg-gradient-to-br ${site.color} flex items-center justify-center text-white font-bold text-lg"> |
| | ${site.name.charAt(0)} |
| | </div> |
| | <span class="text-xs font-medium px-2 py-1 rounded-full bg-gray-100 text-gray-600"> |
| | ${site.category} |
| | </span> |
| | </div> |
| | |
| | <h3 class="text-lg font-bold text-gray-900 mb-2">${site.name}</h3> |
| | <p class="text-sm text-gray-600 mb-4 line-clamp-2">${site.desc}</p> |
| | |
| | <div class="flex flex-wrap gap-1 mb-4"> |
| | ${site.tags.map(tag => `<span class="text-xs px-2 py-1 rounded-md bg-indigo-50 text-indigo-600">${tag}</span>`).join('')} |
| | </div> |
| | |
| | <a href="${site.url || '#'}" target="_blank" rel="noopener noreferrer" |
| | class="w-full flex items-center justify-center space-x-2 py-2.5 rounded-xl bg-gray-900 text-white text-sm font-medium hover:bg-gray-800 transition-colors"> |
| | <span>Ziyaret Et</span> |
| | <i class="fas fa-external-link-alt text-xs"></i> |
| | </a> |
| | </div> |
| | `; |
| | |
| | return div; |
| | } |
| | |
| | function setupSearch() { |
| | const searchInput = document.getElementById('searchInput'); |
| | const searchInputMobile = document.getElementById('searchInputMobile'); |
| | |
| | const handleSearch = (e) => { |
| | searchTerm = e.target.value; |
| | renderSites(); |
| | }; |
| | |
| | searchInput.addEventListener('input', handleSearch); |
| | searchInputMobile.addEventListener('input', handleSearch); |
| | } |
| | </script> |
| | </body> |
| | </html> |
