Spaces:

maydayjeffk
/

batch-image-downloader-and-converter

Running

App Files Files Community

maydayjeffk commited on Apr 11

Commit

e532a92

verified ·

1 Parent(s): ce11844

Add 1 files

Browse files

Files changed (1) hide show

index.html +214 -64

index.html CHANGED Viewed

@@ -117,6 +117,16 @@
             z-index: -1;
             opacity: 0.1;
         }
     </style>
 </head>
 <body>
@@ -148,6 +158,10 @@
             </div>
             <p class="text-sm mt-2 text-gray-400">Works with JPG, PNG, GIF, WEBP, SVG, BMP, TIFF, and more</p>
             <div class="mt-6">
                 <h3 class="text-xl mb-2">OPTIONS</h3>
                 <div class="flex flex-wrap gap-4">
@@ -314,6 +328,7 @@
         const confirmDelete = document.getElementById('confirmDelete');
         const recursiveCheck = document.getElementById('recursiveCheck');
         const filterCheck = document.getElementById('filterCheck');
         // Event listeners
         scrapeBtn.addEventListener('click', startScraping);
@@ -359,76 +374,198 @@
             progressText.textContent = '0%';
             statusText.textContent = 'Starting the digital heist...';
-            // Simulate scraping (in a real app, this would be an API call)
-            simulateScraping(url);
         }
-        function simulateScraping(url) {
-            let progress = 0;
-            const interval = setInterval(() => {
-                progress += Math.random() * 10;
-                if (progress > 100) progress = 100;
-                progressFill.style.width = `${progress}%`;
-                progressText.textContent = `${Math.floor(progress)}%`;
-                if (progress < 30) {
-                    statusText.textContent = 'Bypassing capitalist security...';
-                } else if (progress < 60) {
-                    statusText.textContent = 'Stealing from the rich...';
-                } else if (progress < 90) {
-                    statusText.textContent = 'Sticking it to the man...';
-                } else {
-                    statusText.textContent = 'Almost there, comrade...';
                 }
-                if (progress >= 100) {
-                    clearInterval(interval);
                     finishScraping();
                 }
-            }, 300);
         }
         function finishScraping() {
-            statusText.textContent = 'Done! Images loaded.';
-            // Generate mock images (in a real app, these would come from the scraping)
-            const mockImages = generateMockImages();
-            scrapedImages = mockImages;
             // Display images
-            displayImages(mockImages);
             // Show results section
             resultsSection.classList.remove('hidden');
-        }
-        function generateMockImages() {
-            const formats = ['jpg', 'png', 'gif', 'webp', 'svg', 'bmp', 'tiff'];
-            const images = [];
-            const count = Math.floor(Math.random() * 50) + 30; // 30-80 images
-            for (let i = 0; i < count; i++) {
-                const format = formats[Math.floor(Math.random() * formats.length)];
-                const width = Math.floor(Math.random() * 1000) + 200;
-                const height = Math.floor(Math.random() * 800) + 200;
-                images.push({
-                    url: `https://picsum.photos/${width}/${height}?random=${i}`,
-                    format: format,
-                    width: width,
-                    height: height,
-                    originalUrl: `https://example.com/images/image${i}.${format}`
-                });
-            }
-            // Filter out tiny images if option is checked
-            if (filterCheck.checked) {
-                return images.filter(img => img.width > 100 && img.height > 100);
-            }
-            return images;
         }
         function displayImages(images) {
@@ -441,7 +578,7 @@
                 tile.innerHTML = `
                     <div class="relative pb-full">
-                        <img src="${img.url}" alt="Scraped image" class="absolute h-full w-full object-cover" loading="lazy">
                     </div>
                     <div class="absolute bottom-0 left-0 right-0 bg-black bg-opacity-70 p-2 hidden group-hover:block">
                         <span class="filetype-badge px-2 py-1 text-xs">${img.format.toUpperCase()}</span>
@@ -549,13 +686,20 @@
                 return;
             }
-            // In a real app, this would create a zip file of selected images
             alert(`Preparing to download ${selectedImages.length} images...\n\n(In a real app, this would create a ZIP file)`);
-            // Simulate download
-            setTimeout(() => {
-                alert("Download complete! Stick it to the man!");
-            }, 1500);
         }
         function showDeleteConfirmation() {
@@ -604,11 +748,17 @@
             // In a real app, this would convert images to the selected format
             alert(`Converting ${selectedImages.length} images to ${selectedFormat.toUpperCase()}...\n\n(In a real app, this would use a conversion API)`);
-            // Simulate conversion
-            setTimeout(() => {
-                alert(`Conversion to ${selectedFormat.toUpperCase()} complete! Take that, capitalist image standards!`);
-                convertModal.classList.add('hidden');
-            }, 1500);
         }
         // Close modals when clicking outside

             z-index: -1;
             opacity: 0.1;
         }
+        /* CORS proxy warning */
+        .cors-warning {
+            background-color: #f00;
+            color: #fff;
+            padding: 10px;
+            margin-top: 10px;
+            border: 2px solid #fff;
+            font-size: 14px;
+        }
     </style>
 </head>
 <body>
             </div>
             <p class="text-sm mt-2 text-gray-400">Works with JPG, PNG, GIF, WEBP, SVG, BMP, TIFF, and more</p>
+            <div class="cors-warning hidden" id="corsWarning">
+                WARNING: Due to CORS restrictions, we're using a proxy to scrape this site. Some images may not load properly. For best results, use the browser extension version.
+            </div>
             <div class="mt-6">
                 <h3 class="text-xl mb-2">OPTIONS</h3>
                 <div class="flex flex-wrap gap-4">
         const confirmDelete = document.getElementById('confirmDelete');
         const recursiveCheck = document.getElementById('recursiveCheck');
         const filterCheck = document.getElementById('filterCheck');
+        const corsWarning = document.getElementById('corsWarning');
         // Event listeners
         scrapeBtn.addEventListener('click', startScraping);
             progressText.textContent = '0%';
             statusText.textContent = 'Starting the digital heist...';
+            // Check if URL is from same origin
+            try {
+                const urlObj = new URL(url);
+                const currentOrigin = new URL(window.location.href).origin;
+                if (urlObj.origin === currentOrigin) {
+                    // Same origin - we can scrape directly
+                    corsWarning.classList.add('hidden');
+                    scrapeSameOrigin(url);
+                } else {
+                    // Different origin - need to use proxy
+                    corsWarning.classList.remove('hidden');
+                    scrapeWithProxy(url);
+                }
+            } catch (e) {
+                alert("INVALID URL! TRY AGAIN, COMRADE!");
+                progressContainer.classList.add('hidden');
+            }
         }
+        function scrapeSameOrigin(url) {
+            fetch(url)
+                .then(response => response.text())
+                .then(html => {
+                    // Parse HTML and extract images
+                    const parser = new DOMParser();
+                    const doc = parser.parseFromString(html, 'text/html');
+                    const images = doc.querySelectorAll('img');
+                    // Update progress
+                    progressFill.style.width = '50%';
+                    progressText.textContent = '50%';
+                    statusText.textContent = 'Found ' + images.length + ' images...';
+                    // Process images
+                    processImages(Array.from(images), url);
+                })
+                .catch(error => {
+                    console.error('Error:', error);
+                    statusText.textContent = 'Failed to scrape: ' + error.message;
+                    setTimeout(() => {
+                        progressContainer.classList.add('hidden');
+                    }, 2000);
+                });
+        }
+        function scrapeWithProxy(url) {
+            // Using a CORS proxy - note: in production you'd want your own proxy server
+            const proxyUrl = `https://api.allorigins.win/get?url=${encodeURIComponent(url)}`;
+            fetch(proxyUrl)
+                .then(response => response.json())
+                .then(data => {
+                    if (data.contents) {
+                        // Parse HTML and extract images
+                        const parser = new DOMParser();
+                        const doc = parser.parseFromString(data.contents, 'text/html');
+                        const images = doc.querySelectorAll('img');
+                        // Update progress
+                        progressFill.style.width = '50%';
+                        progressText.textContent = '50%';
+                        statusText.textContent = 'Found ' + images.length + ' images...';
+                        // Process images
+                        processImages(Array.from(images), url);
+                    } else {
+                        throw new Error('Failed to get content through proxy');
+                    }
+                })
+                .catch(error => {
+                    console.error('Error:', error);
+                    statusText.textContent = 'Failed to scrape: ' + error.message;
+                    setTimeout(() => {
+                        progressContainer.classList.add('hidden');
+                    }, 2000);
+                });
+        }
+        function processImages(images, baseUrl) {
+            const baseUrlObj = new URL(baseUrl);
+            const filteredImages = [];
+            // Process each image
+            images.forEach((img, index) => {
+                let src = img.getAttribute('src') || '';
+                let width = img.width || 0;
+                let height = img.height || 0;
+                // Resolve relative URLs
+                if (src.startsWith('//')) {
+                    src = baseUrlObj.protocol + src;
+                } else if (src.startsWith('/')) {
+                    src = baseUrlObj.origin + src;
+                } else if (!src.startsWith('http')) {
+                    src = new URL(src, baseUrl).href;
+                }
+                // Get file extension
+                let format = 'unknown';
+                const match = src.match(/\.(jpe?g|png|gif|webp|svg|bmp|tiff?|ico)/i);
+                if (match) {
+                    format = match[1].toLowerCase();
                 }
+                // Check if we should filter small images
+                const shouldFilter = filterCheck.checked;
+                if (!shouldFilter || (width > 100 && height > 100)) {
+                    filteredImages.push({
+                        url: src,
+                        format: format,
+                        width: width,
+                        height: height,
+                        originalUrl: src
+                    });
+                }
+            });
+            // Update progress
+            progressFill.style.width = '80%';
+            progressText.textContent = '80%';
+            statusText.textContent = 'Processing ' + filteredImages.length + ' images...';
+            // Verify which images are accessible
+            verifyImageAccess(filteredImages);
+        }
+        function verifyImageAccess(images) {
+            let verifiedCount = 0;
+            const verifiedImages = [];
+            // Function to check image access
+            function checkImage(index) {
+                if (index >= images.length) {
+                    // All images checked
+                    scrapedImages = verifiedImages;
                     finishScraping();
+                    return;
                 }
+                const img = images[index];
+                const testImg = new Image();
+                testImg.onload = function() {
+                    // Image is accessible
+                    verifiedImages.push(img);
+                    verifiedCount++;
+                    // Update progress
+                    const progress = 80 + (20 * verifiedCount / images.length);
+                    progressFill.style.width = progress + '%';
+                    progressText.textContent = Math.floor(progress) + '%';
+                    statusText.textContent = `Verified ${verifiedCount}/${images.length} images...`;
+                    // Check next image
+                    checkImage(index + 1);
+                };
+                testImg.onerror = function() {
+                    // Image not accessible, skip it
+                    verifiedCount++;
+                    // Update progress
+                    const progress = 80 + (20 * verifiedCount / images.length);
+                    progressFill.style.width = progress + '%';
+                    progressText.textContent = Math.floor(progress) + '%';
+                    statusText.textContent = `Verified ${verifiedCount}/${images.length} images...`;
+                    // Check next image
+                    checkImage(index + 1);
+                };
+                testImg.src = img.url;
+            }
+            // Start checking images
+            checkImage(0);
         }
         function finishScraping() {
+            statusText.textContent = 'Done! Found ' + scrapedImages.length + ' accessible images.';
             // Display images
+            displayImages(scrapedImages);
             // Show results section
             resultsSection.classList.remove('hidden');
+            // Hide progress after delay
+            setTimeout(() => {
+                progressContainer.classList.add('hidden');
+            }, 2000);
         }
         function displayImages(images) {
                 tile.innerHTML = `
                     <div class="relative pb-full">
+                        <img src="${img.url}" alt="Scraped image" class="absolute h-full w-full object-cover" loading="lazy" onerror="this.parentElement.parentElement.remove()">
                     </div>
                     <div class="absolute bottom-0 left-0 right-0 bg-black bg-opacity-70 p-2 hidden group-hover:block">
                         <span class="filetype-badge px-2 py-1 text-xs">${img.format.toUpperCase()}</span>
                 return;
             }
+            // Create a zip file of selected images
             alert(`Preparing to download ${selectedImages.length} images...\n\n(In a real app, this would create a ZIP file)`);
+            // For demo purposes, we'll download each image individually
+            selectedImages.forEach(index => {
+                const img = scrapedImages[index];
+                const a = document.createElement('a');
+                a.href = img.url;
+                a.download = `stolen-image-${index}.${img.format}`;
+                a.target = '_blank';
+                document.body.appendChild(a);
+                a.click();
+                document.body.removeChild(a);
+            });
         }
         function showDeleteConfirmation() {
             // In a real app, this would convert images to the selected format
             alert(`Converting ${selectedImages.length} images to ${selectedFormat.toUpperCase()}...\n\n(In a real app, this would use a conversion API)`);
+            // Simulate conversion by changing the format in our data
+            selectedImages.forEach(index => {
+                scrapedImages[index].format = selectedFormat;
+            });
+            // Update the display
+            displayImages(scrapedImages);
+            // Show message
+            alert(`Conversion to ${selectedFormat.toUpperCase()} complete! Take that, capitalist image standards!`);
+            convertModal.classList.add('hidden');
         }
         // Close modals when clicking outside