| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Batch Processing | AutoCaption Magic</title> |
| <link rel="stylesheet" href="style.css"> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
| <script src="https://unpkg.com/feather-icons"></script> |
| </head> |
| <body class="bg-gray-50 min-h-screen flex flex-col"> |
| <custom-navbar></custom-navbar> |
| |
| <main class="flex-grow container mx-auto px-4 py-12"> |
| <div class="max-w-6xl mx-auto bg-white rounded-xl shadow-md overflow-hidden p-8"> |
| <div class="text-center mb-10"> |
| <h1 class="text-4xl font-bold text-primary-500 mb-4">Batch Processing</h1> |
| <p class="text-lg text-gray-600">Process multiple datasets at once with advanced options</p> |
| </div> |
|
|
| <div class="grid md:grid-cols-2 gap-8"> |
| <div class="space-y-6"> |
| <div class="bg-gray-50 p-6 rounded-lg border border-gray-200"> |
| <h2 class="text-2xl font-semibold text-gray-800 mb-4">Upload Multiple Datasets</h2> |
| <div class="border-2 border-dashed border-gray-300 rounded-lg p-12 text-center cursor-pointer hover:bg-gray-100 transition" id="batchUploadArea"> |
| <i data-feather="folder" class="w-12 h-12 mx-auto text-primary-500 mb-4"></i> |
| <p class="text-gray-600">Drag & drop your dataset folders here</p> |
| <p class="text-sm text-gray-500 mt-2">Supports ZIP files containing images</p> |
| </div> |
| </div> |
|
|
| <div class="bg-gray-50 p-6 rounded-lg border border-gray-200"> |
| <h2 class="text-2xl font-semibold text-gray-800 mb-4">Output Settings</h2> |
| <div class="space-y-4"> |
| <div> |
| <label class="block text-sm font-medium text-gray-700 mb-1">Output Format</label> |
| <select class="w-full rounded-md border-gray-300 shadow-sm focus:border-primary-500 focus:ring-primary-500"> |
| <option>JSON (Recommended)</option> |
| <option>CSV</option> |
| <option>Text Files</option> |
| </select> |
| </div> |
| <div> |
| <label class="block text-sm font-medium text-gray-700 mb-1">Filename Pattern</label> |
| <input type="text" placeholder="e.g. 'captions_{index}.txt'" class="w-full rounded-md border-gray-300 shadow-sm focus:border-primary-500 focus:ring-primary-500"> |
| </div> |
| <div> |
| <label class="block text-sm font-medium text-gray-700 mb-1">Trigger Word</label> |
| <input type="text" placeholder="e.g. 'myLoraStyle'" class="w-full rounded-md border-gray-300 shadow-sm focus:border-primary-500 focus:ring-primary-500"> |
| <p class="text-xs text-gray-500 mt-1">This word will be prepended to all captions</p> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="space-y-6"> |
| <div class="bg-gray-50 p-6 rounded-lg border border-gray-200"> |
| <h2 class="text-2xl font-semibold text-gray-800 mb-4">Advanced Options</h2> |
| <div class="space-y-4"> |
| <div> |
| <label class="block text-sm font-medium text-gray-700 mb-1">Concurrent Processing</label> |
| <select class="w-full rounded-md border-gray-300 shadow-sm focus:border-primary-500 focus:ring-primary-500"> |
| <option>Auto (Recommended)</option> |
| <option>1 thread</option> |
| <option>2 threads</option> |
| <option>4 threads</option> |
| <option>8 threads</option> |
| </select> |
| </div> |
| <div> |
| <label class="block text-sm font-medium text-gray-700 mb-1">Quality Check</label> |
| <div class="flex items-center space-x-4"> |
| <label class="inline-flex items-center"> |
| <input type="checkbox" checked class="rounded border-gray-300 text-primary-500 shadow-sm focus:border-primary-500 focus:ring-primary-500"> |
| <span class="ml-2">Filter low-confidence captions</span> |
| </label> |
| </div> |
| </div> |
| <div> |
| <label class="block text-sm font-medium text-gray-700 mb-1">Post-Processing</label> |
| <div class="flex items-center space-x-4"> |
| <label class="inline-flex items-center"> |
| <input type="checkbox" checked class="rounded border-gray-300 text-primary-500 shadow-sm focus:border-primary-500 focus:ring-primary-500"> |
| <span class="ml-2">Remove duplicates</span> |
| </label> |
| <label class="inline-flex items-center"> |
| <input type="checkbox" class="rounded border-gray-300 text-primary-500 shadow-sm focus:border-primary-500 focus:ring-primary-500"> |
| <span class="ml-2">Capitalize first letter</span> |
| </label> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="flex justify-center pt-4"> |
| <button class="px-8 py-3 bg-primary-500 hover:bg-primary-600 text-white font-medium rounded-lg shadow-md transition duration-300 flex items-center" id="batchProcessBtn"> |
| <i data-feather="play" class="w-5 h-5 mr-2"></i> |
| Start Batch Processing |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
| </main> |
|
|
| <custom-footer></custom-footer> |
|
|
| <script src="components/navbar.js"></script> |
| <script src="components/footer.js"></script> |
| <script src="script.js"></script> |
| <script> |
| document.addEventListener('DOMContentLoaded', function() { |
| feather.replace(); |
| |
| |
| const batchUploadArea = document.getElementById('batchUploadArea'); |
| const batchProcessBtn = document.getElementById('batchProcessBtn'); |
| |
| if (batchUploadArea) { |
| batchUploadArea.addEventListener('click', function() { |
| const fileInput = document.createElement('input'); |
| fileInput.type = 'file'; |
| fileInput.multiple = true; |
| fileInput.accept = '.zip,.rar,.7z'; |
| fileInput.click(); |
| |
| fileInput.addEventListener('change', function(e) { |
| if (e.target.files.length > 0) { |
| batchUploadArea.innerHTML = ` |
| <i data-feather="check-circle" class="w-12 h-12 mx-auto text-green-500 mb-4"></i> |
| <p class="text-gray-600">${e.target.files.length} datasets selected</p> |
| <p class="text-sm text-gray-500 mt-2">Ready for batch processing</p> |
| `; |
| feather.replace(); |
| |
| |
| if (batchProcessBtn) { |
| batchProcessBtn.disabled = false; |
| } |
| } |
| }); |
| }); |
| } |
| |
| if (batchProcessBtn) { |
| batchProcessBtn.addEventListener('click', function() { |
| if (!this.disabled) { |
| this.innerHTML = ` |
| <i data-feather="loader" class="w-5 h-5 mr-2 animate-spin"></i> |
| Processing Datasets... |
| `; |
| feather.replace(); |
| |
| |
| setTimeout(() => { |
| this.innerHTML = ` |
| <i data-feather="check-circle" class="w-5 h-5 mr-2"></i> |
| Processing Complete! |
| `; |
| feather.replace(); |
| |
| |
| setTimeout(() => { |
| this.innerHTML = ` |
| <i data-feather="download" class="w-5 h-5 mr-2"></i> |
| Download All Results |
| `; |
| feather.replace(); |
| } |
| }); |
| } |
| }); |
| </script> |
| </body> |
| </html> |
