| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>XSeg Annotator - DeepFaceLab Linux</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet"> |
| <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script> |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
| <script src="https://unpkg.com/feather-icons"></script> |
| <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script> |
| <style> |
| .hero-bg { |
| background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%); |
| } |
| .feature-card { |
| transition: all 0.3s ease; |
| } |
| .feature-card:hover { |
| transform: translateY(-5px); |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); |
| } |
| .keyboard-key { |
| display: inline-block; |
| padding: 0.25rem 0.5rem; |
| background-color: #374151; |
| border-radius: 0.25rem; |
| font-family: monospace; |
| font-size: 0.875rem; |
| color: white; |
| box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); |
| } |
| </style> |
| </head> |
| <body class="bg-gray-900 text-gray-100"> |
| <div id="vanta-bg" class="fixed inset-0 z-0"></div> |
| |
| <div class="relative z-10"> |
| |
| <nav class="bg-gray-800 bg-opacity-90 backdrop-blur-sm py-4 px-6 sticky top-0 z-50"> |
| <div class="container mx-auto flex justify-between items-center"> |
| <div class="flex items-center space-x-2"> |
| <i data-feather="edit-3" class="text-blue-400"></i> |
| <span class="text-xl font-bold">XSeg Annotator</span> |
| </div> |
| <div class="hidden md:flex space-x-6"> |
| <a href="#features" class="hover:text-blue-400 transition-colors">Features</a> |
| <a href="#setup" class="hover:text-blue-400 transition-colors">Setup</a> |
| <a href="#usage" class="hover:text-blue-400 transition-colors">Usage</a> |
| <a href="#hotkeys" class="hover:text-blue-400 transition-colors">Hotkeys</a> |
| </div> |
| <a href="#get-started" class="bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded-md font-medium transition-colors"> |
| Get Started |
| </a> |
| </div> |
| </nav> |
|
|
| |
| <section class="hero-bg py-20 px-6"> |
| <div class="container mx-auto text-center" data-aos="fade-up"> |
| <h1 class="text-4xl md:text-6xl font-bold mb-6">Advanced XSeg Annotation Tool</h1> |
| <p class="text-xl md:text-2xl text-gray-300 mb-10 max-w-3xl mx-auto"> |
| Professional segmentation annotation for DeepFaceLab with SAM integration, |
| polygon tools, and real-time mask editing |
| </p> |
| <div class="flex flex-col sm:flex-row justify-center gap-4"> |
| <a href="#setup" class="bg-blue-600 hover:bg-blue-700 px-6 py-3 rounded-md font-medium text-lg transition-colors"> |
| Quick Setup |
| </a> |
| <a href="#usage" class="bg-gray-700 hover:bg-gray-600 px-6 py-3 rounded-md font-medium text-lg transition-colors"> |
| View Documentation |
| </a> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="features" class="py-20 px-6 bg-gray-800 bg-opacity-50"> |
| <div class="container mx-auto"> |
| <h2 class="text-3xl md:text-4xl font-bold text-center mb-16" data-aos="fade-up">Powerful Features</h2> |
| |
| <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8"> |
| |
| <div class="feature-card bg-gray-800 p-6 rounded-lg" data-aos="fade-up" data-aos-delay="100"> |
| <div class="w-12 h-12 bg-blue-600 rounded-lg flex items-center justify-center mb-4"> |
| <i data-feather="edit-3" class="text-white"></i> |
| </div> |
| <h3 class="text-xl font-semibold mb-3">Brush & Polygon Tools</h3> |
| <p class="text-gray-300">Precision painting with adjustable brush sizes and polygon drawing for complex shapes</p> |
| </div> |
|
|
| |
| <div class="feature-card bg-gray-800 p-6 rounded-lg" data-aos="fade-up" data-aos-delay="200"> |
| <div class="w-12 h-12 bg-green-600 rounded-lg flex items-center justify-center mb-4"> |
| <i data-feather="zap" class="text-white"></i> |
| </div> |
| <h3 class="text-xl font-semibold mb-3">SAM Integration</h3> |
| <p class="text-gray-300">Segment Anything Model auto-masking for rapid annotation with AI assistance</p> |
| </div> |
|
|
| |
| <div class="feature-card bg-gray-800 p-6 rounded-lg" data-aos="fade-up" data-aos-delay="300"> |
| <div class="w-12 h-12 bg-purple-600 rounded-lg flex items-center justify-center mb-4"> |
| <i data-feather="rotate-ccw" class="text-white"></i> |
| </div> |
| <h3 class="text-xl font-semibold mb-3">Undo/Redo History</h3> |
| <p class="text-gray-300">30-step history with Ctrl+Z/Y support for seamless workflow and error correction</p> |
| </div> |
|
|
| |
| <div class="feature-card bg-gray-800 p-6 rounded-lg" data-aos="fade-up" data-aos-delay="400"> |
| <div class="w-12 h-12 bg-yellow-600 rounded-lg flex items-center justify-center mb-4"> |
| <i data-feather="zoom-in" class="text-white"></i> |
| </div> |
| <h3 class="text-xl font-semibold mb-3">Zoom & Pan</h3> |
| <p class="text-gray-300">Smooth zooming with mouse wheel and right-drag panning for detailed work</p> |
| </div> |
|
|
| |
| <div class="feature-card bg-gray-800 p-6 rounded-lg" data-aos="fade-up" data-aos-delay="500"> |
| <div class="w-12 h-12 bg-red-600 rounded-lg flex items-center justify-center mb-4"> |
| <i data-feather="tool" class="text-white"></i> |
| </div> |
| <h3 class="text-xl font-semibold mb-3">Morphology Tools</h3> |
| <p class="text-gray-300">Erode, dilate, and feather operations with adjustable kernel sizes</p> |
| </div> |
|
|
| |
| <div class="feature-card bg-gray-800 p-6 rounded-lg" data-aos="fade-up" data-aos-delay="600"> |
| <div class="w-12 h-12 bg-indigo-600 rounded-lg flex items-center justify-center mb-4"> |
| <i data-feather="save" class="text-white"></i> |
| </div> |
| <h3 class="text-xl font-semibold mb-3">Dual Export</h3> |
| <p class="text-gray-300">Save masks as PNG and export polygon annotations as LabelMe JSON format</p> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="setup" class="py-20 px-6 bg-gray-900"> |
| <div class="container mx-auto"> |
| <h2 class="text-3xl md:text-4xl font-bold text-center mb-16" data-aos="fade-up">Quick Setup</h2> |
| |
| <div class="max-w-4xl mx-auto bg-gray-800 rounded-lg p-6" data-aos="fade-up"> |
| <div class="bg-gray-700 p-4 rounded-md mb-6"> |
| <pre class="text-green-400 overflow-x-auto"><code># Run the scaffold script |
| ./scripts/scaffold_annotator.sh |
|
|
| # Install dependencies |
| pip install -r requirements-annotator.txt |
|
|
| # Optional: Install SAM dependencies |
| pip install torch torchvision |
| pip install git+https://github.com/facebookresearch/segment-anything.git</code></pre> |
| </div> |
| |
| <div class="grid md:grid-cols-2 gap-6"> |
| <div> |
| <h3 class="text-xl font-semibold mb-3 flex items-center"> |
| <i data-feather="folder" class="mr-2 text-blue-400"></i> |
| Directory Structure |
| </h3> |
| <ul class="text-gray-300 space-y-2"> |
| <li class="flex items-center"><i data-feather="chevron-right" class="mr-2 text-gray-500"></i> extract_frames/ - Source images</li> |
| <li class="flex items-center"><i data-feather="chevron-right" class="mr-2 text-gray-500"></i> masks/ - Output masks</li> |
| <li class="flex items-center"><i data-feather="chevron-right" class="mr-2 text-gray-500"></i> annotations/ - JSON files</li> |
| <li class="flex items-center"><i data-feather="chevron-right" class="mr-2 text-gray-500"></i> pyscripts/annotator/ - Python code</li> |
| </ul> |
| </div> |
| |
| <div> |
| <h3 class="text-xl font-semibold mb-3 flex items-center"> |
| <i data-feather="download" class="mr-2 text-green-400"></i> |
| SAM Checkpoints |
| </h3> |
| <p class="text-gray-300 mb-3">Download SAM model checkpoints:</p> |
| <ul class="text-gray-300 space-y-1 text-sm"> |
| <li><a href="https://dl.fbaipublicfiles.com/segment_anything/sam_vit_h_4b8939.pth" class="text-blue-400 hover:underline">ViT-H</a> (2.56GB)</li> |
| <li><a href="https://dl.fbaipublicfiles.com/segment_anything/sam_vit_l_0b3195.pth" class="text-blue-400 hover:underline">ViT-L</a> (1.25GB)</li> |
| <li><a href="https://dl.fbaipublicfiles.com/segment_anything/sam_vit_b_01ec64.pth" class="text-blue-400 hover:underline">ViT-B</a> (375MB)</li> |
| </ul> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="usage" class="py-20 px-6 bg-gray-800 bg-opacity-50"> |
| <div class="container mx-auto"> |
| <h2 class="text-3xl md:text-4xl font-bold text-center mb-16" data-aos="fade-up">Usage Guide</h2> |
| |
| <div class="max-w-4xl mx-auto space-y-8"> |
| <div class="bg-gray-800 p-6 rounded-lg" data-aos="fade-up"> |
| <h3 class="text-xl font-semibold mb-4 flex items-center"> |
| <i data-feather="play" class="mr-2 text-green-400"></i> |
| Basic Usage |
| </h3> |
| <div class="bg-gray-700 p-4 rounded-md mb-4"> |
| <pre class="text-green-400 overflow-x-auto"><code># Start the annotator |
| ./scripts/run_annotator.sh |
|
|
| # With SAM enabled |
| ./scripts/run_annotator.sh --sam --sam-checkpoint /path/to/sam_vit_h.pth |
|
|
| # With auto-fill on load |
| ./scripts/run_annotator.sh --sam --sam-checkpoint /path/to/sam_vit_h.pth --sam-autofill</code></pre> |
| </div> |
| <p class="text-gray-300">Place your source images in the extract_frames directory before starting. The annotator will automatically detect them.</p> |
| </div> |
|
|
| <div class="bg-gray-800 p-6 rounded-lg" data-aos="fade-up" data-aos-delay="100"> |
| <h3 class="text-xl font-semibold mb-4 flex items-center"> |
| <i data-feather="settings" class="mr-2 text-yellow-400"></i> |
| Custom Paths |
| </h3> |
| <div class="bg-gray-700 p-4 rounded-md"> |
| <pre class="text-green-400 overflow-x-auto"><code># Custom directories |
| ./scripts/run_annotator.sh \ |
| --frame-dir /path/to/your/frames \ |
| --mask-dir /path/to/your/masks \ |
| --ann-dir /path/to/your/annotations</code></pre> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="hotkeys" class="py-20 px-6 bg-gray-900"> |
| <div class="container mx-auto"> |
| <h2 class="text-3xl md:text-4xl font-bold text-center mb-16" data-aos="fade-up">Keyboard Shortcuts</h2> |
| |
| <div class="max-w-4xl mx-auto grid md:grid-cols-2 gap-6"> |
| <div class="bg-gray-800 p-6 rounded-lg" data-aos="fade-up"> |
| <h3 class="text-xl font-semibold mb-4 flex items-center"> |
| <i data-feather="navigation" class="mr-2 text-blue-400"></i> |
| Navigation & Tools |
| </h3> |
| <div class="space-y-3"> |
| <div class="flex justify-between items-center py-2 border-b border-gray-700"> |
| <span class="text-gray-300">Next frame</span> |
| <span class="keyboard-key">n</span> |
| </div> |
| <div class="flex justify-between items-center py-2 border-b border-gray-700"> |
| <span class="text-gray-300">Previous frame</span> |
| <span class="keyboard-key">b</span> |
| </div> |
| <div class="flex justify-between items-center py-2 border-b border-gray-700"> |
| <span class="text-gray-300">Toggle polygon mode</span> |
| <span class="keyboard-key">p</span> |
| </div> |
| <div class="flex justify-between items-center py-2 border-b border-gray-700"> |
| <span class="text-gray-300">Commit polygon</span> |
| <span class="keyboard-key">c</span> |
| </div> |
| <div class="flex justify-between items-center py-2 border-b border-gray-700"> |
| <span class="text-gray-300">Brush size +</span> |
| <span class="keyboard-key">]</span> |
| </div> |
| <div class="flex justify-between items-center py-2 border-b border-gray-700"> |
| <span class="text-gray-300">Brush size -</span> |
| <span class="keyboard-key">[</span> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="bg-gray-800 p-6 rounded-lg" data-aos="fade-up" data-aos-delay="100"> |
| <h3 class="text-xl font-semibold mb-4 flex items-center"> |
| <i data-feather="command" class="mr-2 text-purple-400"></i> |
| Operations & Actions |
| </h3> |
| <div class="space-y-3"> |
| <div class="flex justify-between items-center py-2 border-b border-gray-700"> |
| <span class="text-gray-300">Save mask</span> |
| <span class="keyboard-key">s</span> |
| </div> |
| <div class="flex justify-between items-center py-2 border-b border-gray-700"> |
| <span class="text-gray-300">Clear mask</span> |
| <span class="keyboard-key">x</span> |
| </div> |
| <div class="flex justify-between items-center py-2 border-b border-gray-700"> |
| <span class="text-gray-300">Toggle overlay</span> |
| <span class="keyboard-key">m</span> |
| </div> |
| <div class="flex justify-between items-center py-2 border-b border-gray-700"> |
| <span class="text-gray-300">SAM auto-mask</span> |
| <span class="keyboard-key">a</span> |
| </div> |
| <div class="flex justify-between items-center py-2 border-b border-gray-700"> |
| <span class="text-gray-300">Undo</span> |
| <span class="keyboard-key">u</span> |
| </div> |
| <div class="flex justify-between items-center py-2 border-b border-gray-700"> |
| <span class="text-gray-300">Redo</span> |
| <span class="keyboard-key">y</span> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="get-started" class="py-20 px-6 hero-bg"> |
| <div class="container mx-auto text-center"> |
| <h2 class="text-3xl md:text-4xl font-bold mb-6" data-aos="fade-up">Ready to Get Started?</h2> |
| <p class="text-xl text-gray-300 mb-10 max-w-2xl mx-auto" data-aos="fade-up" data-aos-delay="100"> |
| Start annotating your face segmentation masks with professional tools and AI assistance |
| </p> |
| <div class="flex flex-col sm:flex-row justify-center gap-4" data-aos="fade-up" data-aos-delay="200"> |
| <a href="#setup" class="bg-blue-600 hover:bg-blue-700 px-8 py-4 rounded-md font-medium text-lg transition-colors"> |
| Begin Setup |
| </a> |
| <a href="#usage" class="bg-gray-700 hover:bg-gray-600 px-8 py-4 rounded-md font-medium text-lg transition-colors"> |
| View Documentation |
| </a> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <footer class="bg-gray-800 py-8 px-6"> |
| <div class="container mx-auto text-center"> |
| <div class="flex justify-center mb-4"> |
| <i data-feather="edit-3" class="text-blue-400 mr-2"></i> |
| <span class="text-lg font-semibold">XSeg Annotator</span> |
| </div> |
| <p class="text-gray-400">Professional segmentation annotation tool for DeepFaceLab Linux</p> |
| <p class="text-gray-500 text-sm mt-4">© 2023 DeepFaceLab Linux Community</p> |
| </div> |
| </footer> |
| </div> |
|
|
| <script> |
| |
| AOS.init({ |
| duration: 800, |
| once: true, |
| offset: 100 |
| }); |
| |
| |
| feather.replace(); |
| |
| |
| VANTA.GLOBE({ |
| el: "#vanta-bg", |
| mouseControls: true, |
| touchControls: true, |
| gyroControls: false, |
| minHeight: 200.00, |
| minWidth: 200.00, |
| scale: 1.00, |
| scaleMobile: 1.00, |
| color: 0x3b82f6, |
| backgroundColor: 0x111827, |
| size: 0.8 |
| }); |
| </script> |
| </body> |
| </html> |
|
|
