joaovmp39/selfie-sparkle-studio

1 2document.addEventListener('DOMContentLoaded', function() {3    const fileInput = document.getElementById('file-input');4    const uploadArea = document.getElementById('upload-area');5    const previewImage = document.getElementById('preview-image');6    const originalImage = document.getElementById('original-image');7    const enhancedImage = document.getElementById('enhanced-image');8    const resultSection = document.getElementById('result-section');9    const enhanceBtn = document.getElementById('enhance-btn');10    const cameraOption = document.getElementById('camera-option');11    const cameraBtn = document.getElementById('camera-btn');12    const cameraContainer = document.getElementById('camera-container');13    const cameraView = document.getElementById('camera-view');14    const captureBtn = document.getElementById('capture-btn');15    const cancelCameraBtn = document.getElementById('cancel-camera-btn');16    let stream = null;17    // Camera functionality18    cameraOption.addEventListener('click', async () => {19        try {20            stream = await navigator.mediaDevices.getUserMedia({ 21                video: { 22                    width: { ideal: 1280 },23                    height: { ideal: 720 },24                    facingMode: 'user' 25                },26                audio: false 27            });28            cameraView.srcObject = stream;29            uploadArea.classList.add('hidden');30            cameraContainer.classList.remove('hidden');31        } catch (err) {32            console.error("Camera error: ", err);33            alert("Could not access the camera. Please check permissions.");34        }35    });36 37    // Capture photo from camera38    captureBtn.addEventListener('click', () => {39        const canvas = document.createElement('canvas');40        canvas.width = cameraView.videoWidth;41        canvas.height = cameraView.videoHeight;42        canvas.getContext('2d').drawImage(cameraView, 0, 0);43        44        const imageDataUrl = canvas.toDataURL('image/png');45        previewImage.src = imageDataUrl;46        previewImage.classList.remove('hidden');47        48        // For demo purposes, we'll just copy the image to both result sections49        originalImage.src = imageDataUrl;50        enhancedImage.src = imageDataUrl;51        52        stopCamera();53    });54 55    // Cancel camera56    cancelCameraBtn.addEventListener('click', () => {57        stopCamera();58    });59 60    function stopCamera() {61        if (stream) {62            stream.getTracks().forEach(track => track.stop());63            stream = null;64        }65        cameraContainer.classList.add('hidden');66        uploadArea.classList.remove('hidden');67    }68 69    // Handle file upload70fileInput.addEventListener('change', function(e) {71        const file = e.target.files[0];72        if (file) {73            const reader = new FileReader();74            reader.onload = function(event) {75                previewImage.src = event.target.result;76                previewImage.classList.remove('hidden');77                uploadArea.classList.add('hidden');78                79                // For demo purposes, we'll just copy the image to both result sections80                originalImage.src = event.target.result;81                enhancedImage.src = event.target.result;82            };83            reader.readAsDataURL(file);84        }85    });86 87    // Handle drag and drop88    uploadArea.addEventListener('dragover', (e) => {89        e.preventDefault();90        uploadArea.classList.add('border-primary-500', 'bg-gray-800');91    });92 93    uploadArea.addEventListener('dragleave', () => {94        uploadArea.classList.remove('border-primary-500', 'bg-gray-800');95    });96 97    uploadArea.addEventListener('drop', (e) => {98        e.preventDefault();99        uploadArea.classList.remove('border-primary-500', 'bg-gray-800');100        101        const file = e.dataTransfer.files[0];102        if (file && file.type.match('image.*')) {103            fileInput.files = e.dataTransfer.files;104            const event = new Event('change');105            fileInput.dispatchEvent(event);106        }107    });108 109    // Enhance button click110    enhanceBtn.addEventListener('click', function() {111        if (!previewImage.src) {112            alert('Please upload an image first');113            return;114        }115        116        // Show loading state117        enhanceBtn.disabled = true;118        enhanceBtn.innerHTML = '<i data-feather="loader" class="animate-spin"></i> Processing...';119        feather.replace();120        121        // Simulate processing delay122        setTimeout(() => {123            resultSection.classList.remove('hidden');124            enhanceBtn.disabled = false;125            enhanceBtn.innerHTML = '<i data-feather="sparkles"></i> Enhance My Photo';126            feather.replace();127            128            // Scroll to results129            resultSection.scrollIntoView({ behavior: 'smooth' });130        }, 2000);131    });132});