| <!DOCTYPE html> |
| <html lang="tr"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Etiketleme - Birleşik Etiketleyici Pro</title> |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> |
| <link rel="stylesheet" href="style.css"> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <script src="https://unpkg.com/feather-icons"></script> |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet"> |
| <script> |
| tailwind.config = { |
| theme: { |
| extend: { |
| colors: { |
| primary: '#6a11cb', |
| secondary: '#2575fc', |
| accent: '#ff4e50', |
| dark: '#0f172a', |
| light: '#f8fafc' |
| } |
| } |
| } |
| } |
| </script> |
| </head> |
| <body> |
| <custom-navbar></custom-navbar> |
|
|
| |
| <section class="py-8 px-4"> |
| <div class="max-w-6xl mx-auto"> |
| <h2 class="text-3xl font-bold text-center text-dark mb-8">Anime Etiketleme Aracı</h2> |
| |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-8"> |
| |
| <div class="bg-white rounded-xl shadow-md p-6"> |
| <h3 class="text-xl font-semibold text-dark mb-4">Görsel Yükle</h3> |
| |
| <div class="mb-6"> |
| <div class="border-2 border-dashed border-gray-300 rounded-lg p-8 text-center cursor-pointer hover:border-primary transition"> |
| <i data-feather="upload" class="mx-auto text-gray-400 mb-2"></i> |
| <p class="text-gray-600">Görsel sürükleyin veya yüklemek için tıklayın</p> |
| <input type="file" class="hidden" accept="image/*"> |
| </div> |
| </div> |
| |
| <div class="mb-6"> |
| <h4 class="font-medium text-dark mb-2">Önizleme</h4> |
| <div class="bg-gray-100 rounded-lg h-64 flex items-center justify-center"> |
| <img src="http://static.photos/technology/320x240/1" alt="Preview" class="max-h-full max-w-full object-contain"> |
| </div> |
| </div> |
| |
| <div class="flex gap-3"> |
| <button class="flex-1 bg-primary text-white py-2 px-4 rounded-lg hover:bg-purple-700 transition">Etiketle</button> |
| <button class="flex-1 bg-gray-200 text-dark py-2 px-4 rounded-lg hover:bg-gray-300 transition">Temizle</button> |
| </div> |
| </div> |
| |
| |
| <div class="bg-white rounded-xl shadow-md p-6"> |
| <h3 class="text-xl font-semibold text-dark mb-4">Sonuçlar</h3> |
| |
| <div class="mb-6"> |
| <h4 class="font-medium text-dark mb-2">Etiketler</h4> |
| <div class="bg-gray-50 rounded-lg p-4 min-h-[200px]"> |
| <p class="text-gray-600">Etiketler burada görünecek...</p> |
| </div> |
| </div> |
| |
| <div class="mb-6"> |
| <h4 class="font-medium text-dark mb-2">Kategorize Edilmiş Etiketler</h4> |
| <div class="bg-gray-50 rounded-lg p-4 min-h-[150px]"> |
| <p class="text-gray-600">Kategorize edilmiş etiketler burada görünecek...</p> |
| </div> |
| </div> |
| |
| <div> |
| <h4 class="font-medium text-dark mb-2">Gemini Caption</h4> |
| <div class="bg-gray-50 rounded-lg p-4 min-h-[100px]"> |
| <p class="text-gray-600">Caption burada görünecek...</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="mt-8 bg-white rounded-xl shadow-md p-6"> |
| <h3 class="text-xl font-semibold text-dark mb-4">Ayarlar</h3> |
| |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> |
| |
| <div> |
| <h4 class="font-medium text-dark mb-3">Modeller</h4> |
| <div class="space-y-3"> |
| <div class="flex items-center"> |
| <input type="checkbox" id="joint-model" class="mr-2"> |
| <label for="joint-model" class="text-gray-700">Joint Tagger (JTP-3)</label> |
| <input type="range" min="0" max="100" value="25" class="ml-auto w-24"> |
| <span class="ml-2 text-sm text-gray-500">25%</span> |
| </div> |
| <div class="flex items-center"> |
| <input type="checkbox" id="cl-model" class="mr-2" checked> |
| <label for="cl-model" class="text-gray-700">CL Tagger</label> |
| <div class="ml-auto flex gap-2"> |
| <input type="range" min="0" max="100" value="55" class="w-24"> |
| <span class="text-sm text-gray-500">55%</span> |
| <input type="range" min="0" max="100" value="60" class="w-24"> |
| <span class="text-sm text-gray-500">60%</span> |
| </div> |
| </div> |
| <div class="flex items-center"> |
| <input type="checkbox" id="pixai-model" class="mr-2"> |
| <label for="pixai-model" class="text-gray-700">PixAI Tagger</label> |
| <div class="ml-auto flex gap-2"> |
| <input type="range" min="0" max="100" value="30" class="w-24"> |
| <span class="text-sm text-gray-500">30%</span> |
| <input type="range" min="0" max="100" value="85" class="w-24"> |
| <span class="text-sm text-gray-500">85%</span> |
| </div> |
| </div> |
| <div class="flex items-center"> |
| <input type="checkbox" id="anime-model" class="mr-2"> |
| <label for="anime-model" class="text-gray-700">Anime Tagger</label> |
| <select class="ml-auto text-sm border rounded px-2 py-1"> |
| <option>MobileNet V4 (Hızlı)</option> |
| <option>ConvNeXt V2 Huge (Pro)</option> |
| <option>Caformer B36 (Yeni)</option> |
| </select> |
| <input type="range" min="0" max="100" value="35" class="w-24 ml-2"> |
| <span class="ml-2 text-sm text-gray-500">35%</span> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div> |
| <h4 class="font-medium text-dark mb-3">Ek Ayarlar</h4> |
| <div class="space-y-4"> |
| <div> |
| <label class="block text-gray-700 mb-2">Sıralama</label> |
| <select class="w-full border rounded px-3 py-2"> |
| <option>Alfabetik</option> |
| <option>Orijinal</option> |
| <option>Rastgele</option> |
| </select> |
| </div> |
| |
| <div> |
| <label class="block text-gray-700 mb-2">Cihaz</label> |
| <select class="w-full border rounded px-3 py-2"> |
| <option>Otomatik</option> |
| <option>CUDA</option> |
| <option>CPU</option> |
| </select> |
| </div> |
| |
| <div> |
| <label class="block text-gray-700 mb-2">Bağlam Ağırlığı: <span class="text-primary">0.0</span></label> |
| <input type="range" min="0" max="100" value="0" class="w-full"> |
| </div> |
| |
| <div class="flex items-center"> |
| <input type="checkbox" id="categorization" class="mr-2"> |
| <label for="categorization" class="text-gray-700">Kategorizasyon</label> |
| </div> |
| |
| <div class="flex items-center"> |
| <input type="checkbox" id="gemini" class="mr-2"> |
| <label for="gemini" class="text-gray-700">Gemini Caption</label> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
| <custom-footer></custom-footer> |
| <script src="components/navbar.js"></script> |
| <script src="components/footer.js"></script> |
| <script src="script.js"></script> |
| <script> |
| feather.replace(); |
| </script> |
| </body> |
| </html> |
|
|
