harshit.pathak
/
content_quality_tool


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194
							{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI Background Remover</title>
    
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/overlayscrollbars@2.3.0/styles/overlayscrollbars.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.min.css">
    <link rel="stylesheet" href="{% static './css/adminlte.css' %}">
    <script src="https://cdn.tailwindcss.com"></script>

    <style>
        .nav-pills .nav-link.active { background-color: #3b82f6 !important; }
        .checkerboard-bg {
            background-image: linear-gradient(45deg, #eee 25%, transparent 25%), linear-gradient(-45deg, #eee 25%, transparent 25%), 
                              linear-gradient(45deg, transparent 75%, #eee 75%), linear-gradient(-45deg, transparent 75%, #eee 75%);
            background-size: 20px 20px;
            background-color: white;
        }
    </style>
</head>

<body class="layout-fixed sidebar-expand-lg sidebar-mini app-loaded sidebar-collapse">
    
    <div id="bulk-loader" class="hidden fixed inset-0 bg-black/60 backdrop-blur-md z-[9999] flex flex-col items-center justify-center text-white">
        <div class="w-16 h-16 border-4 border-indigo-500 border-t-transparent rounded-full animate-spin mb-4"></div>
        <h2 class="text-2xl font-bold">Processing Batch...</h2>
    </div>

    <div class="app-wrapper">
        {% include 'header.html' %}
        {% include 'sidebar.html' %}

        <main class="app-main">
            <div class="app-content pt-10">
                <div class="max-w-5xl mx-auto px-4">
                    
                    <ul class="nav nav-pills justify-content-center mb-8 gap-3" id="pills-tab" role="tablist">
                        <li class="nav-item">
                            <button class="nav-link active" id="pills-single-tab" data-bs-toggle="pill" data-bs-target="#pills-single" type="button">Single Image</button>
                        </li>
                        <li class="nav-item">
                            <button class="nav-link" id="pills-bulk-tab" data-bs-toggle="pill" data-bs-target="#pills-bulk" type="button">Bulk Process</button>
                        </li>
                    </ul>

                    <div class="tab-content">
                        <div class="tab-pane fade show active" id="pills-single">
                            <div id="single-upload-card" class="bg-white p-8 rounded-3xl shadow-sm border border-gray-200">
                                <div class="border-2 border-dashed border-gray-300 flex flex-col items-center justify-center rounded-2xl p-12 cursor-pointer hover:border-blue-500 transition-all" onclick="document.getElementById('single-file-input').click()">
                                    <input type="file" id="single-file-input" class="hidden" accept="image/*">
                                    <i class="bi bi-image text-4xl text-blue-600 mb-4"></i>
                                    <p class="text-lg font-semibold text-gray-700">Upload a single image</p>
                                </div>
                            </div>

                            <div id="single-result-area" class="hidden mt-8 space-y-6">
                                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                                    <div>
                                        <p class="text-xs font-bold text-gray-400 uppercase mb-2">Original</p>
                                        <img id="single-orig-prev" class="rounded-xl w-full border bg-white p-1">
                                    </div>
                                    <div>
                                        <p class="text-xs font-bold text-gray-400 uppercase mb-2">Result</p>
                                        <div class="checkerboard-bg rounded-xl border p-1 relative min-h-[200px] flex items-center justify-center">
                                            <div id="single-item-loader" class="hidden animate-spin w-10 h-10 border-4 border-blue-500 border-t-transparent rounded-full"></div>
                                            <img id="single-proc-prev" class="rounded-xl w-full">
                                        </div>
                                    </div>
                                </div>
                                <div class="flex justify-center gap-4">
                                    <button onclick="location.reload()" class="px-6 py-2 bg-gray-100 rounded-xl font-bold">Try Another</button>
                                    <a id="single-download-btn" class="hidden px-10 py-2 bg-green-600 text-white rounded-xl font-bold shadow-lg">Download PNG</a>
                                </div>
                            </div>
                        </div>

                        <div class="tab-pane fade" id="pills-bulk">
                            <div id="bulk-container" class="bg-white p-8 rounded-3xl shadow-sm border border-gray-200">
                                <div class="border-2 border-dashed border-gray-300 flex flex-col items-center justify-center rounded-2xl p-12 cursor-pointer hover:border-indigo-500" onclick="document.getElementById('bulk-file-input').click()">
                                    <input type="file" id="bulk-file-input" class="hidden" accept="image/*" multiple>
                                    <i class="bi bi-layers text-4xl text-indigo-600 mb-4"></i>
                                    <p class="text-lg font-semibold">Select Multiple Images</p>
                                </div>
                                <div id="bulk-queue-section" class="hidden mt-6">
                                    <div class="flex justify-between items-center mb-4">
                                        <span class="font-bold text-gray-700"><span id="bulk-count">0</span> files selected</span>
                                        <button id="start-bulk-btn" class="bg-indigo-600 text-white px-6 py-2 rounded-lg font-bold">Process & Zip</button>
                                    </div>
                                    <div id="bulk-preview-grid" class="grid grid-cols-4 md:grid-cols-6 gap-2"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </main>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/overlayscrollbars@2.3.0/browser/overlayscrollbars.browser.es6.min.js"></script>
    <script src="{% static './js/adminlte.js' %}"></script>

    <script>
        // --- SINGLE IMAGE LOGIC ---
        const singleInput = document.getElementById('single-file-input');
        singleInput.onchange = async (e) => {
            const file = e.target.files[0];
            if (!file) return;

            // Show UI
            document.getElementById('single-upload-card').classList.add('hidden');
            document.getElementById('single-result-area').classList.remove('hidden');
            document.getElementById('single-item-loader').classList.remove('hidden');
            document.getElementById('single-orig-prev').src = URL.createObjectURL(file);

            const formData = new FormData();
            formData.append('image', file);

            try {
                const response = await fetch('/bg-remover/remove-bg/single/', {
                    method: 'POST',
                    body: formData,
                    headers: {'X-CSRFToken': '{{ csrf_token }}'}
                });
                
                if (response.ok) {
                    const blob = await response.blob();
                    const url = URL.createObjectURL(blob);
                    document.getElementById('single-proc-prev').src = url;
                    const dlBtn = document.getElementById('single-download-btn');
                    dlBtn.href = url;
                    dlBtn.download = "bg-removed.png";
                    dlBtn.classList.remove('hidden');
                }
            } catch (err) { alert("Error processing image."); }
            finally { document.getElementById('single-item-loader').classList.add('hidden'); }
        };

        // --- BULK IMAGE LOGIC ---
        const bulkInput = document.getElementById('bulk-file-input');
        bulkInput.onchange = (e) => {
            const files = Array.from(e.target.files);
            document.getElementById('bulk-queue-section').classList.remove('hidden');
            document.getElementById('bulk-count').innerText = files.length;
            const grid = document.getElementById('bulk-preview-grid');
            grid.innerHTML = '';
            files.slice(0, 12).forEach(f => {
                const img = document.createElement('div');
                img.className = "h-12 bg-gray-100 rounded border text-[8px] overflow-hidden p-1";
                img.innerText = f.name;
                grid.appendChild(img);
            });
        };

        document.getElementById('start-bulk-btn').onclick = async () => {
            const formData = new FormData();
            for(let f of bulkInput.files) { formData.append('images', f); }
            document.getElementById('bulk-loader').classList.remove('hidden');

            try {
                const res = await fetch('/bg-remover/remove-bg/bulk/', {
                    method: 'POST', body: formData, headers: {'X-CSRFToken': '{{ csrf_token }}'}
                });
                if (res.ok) {
                    const blob = await res.blob();
                    const url = URL.createObjectURL(blob);
                    document.getElementById('bulk-container').innerHTML = `
                        <div class="text-center py-10">
                            <i class="bi bi-check-circle-fill text-6xl text-green-500 mb-4"></i>
                            <h2 class="text-2xl font-bold mb-6">ZIP File Ready</h2>
                            <a href="${url}" download="processed.zip" class="bg-indigo-600 text-white px-10 py-4 rounded-xl font-bold">Download All Images</a>
                            <button onclick="location.reload()" class="block mx-auto mt-6 text-gray-400 underline">Upload More</button>
                        </div>`;
                }
            } finally { document.getElementById('bulk-loader').classList.add('hidden'); }
        };

        // AdminLTE Sidebar Scrollbar
        document.addEventListener("DOMContentLoaded", function () {
            const sidebarWrapper = document.querySelector(".sidebar-wrapper");
            if (sidebarWrapper && typeof OverlayScrollbarsGlobal?.OverlayScrollbars !== "undefined") {
                OverlayScrollbarsGlobal.OverlayScrollbars(sidebarWrapper, {
                    scrollbars: { theme: "os-theme-light", autoHide: "leave", clickScroll: true }
                });
            }
        });
    </script>
</body>
</html>