Artifact is loading slow plus the buttons still not working

script.js

@@ -5,11 +5,13 @@ document.addEventListener('DOMContentLoaded', function() {
     
     // Camera and storage access variables
     let cameraStream = null;
+    let isCameraInitialized = false;
     const cameraVideo = document.getElementById('cameraStream');
     const captureCanvas = document.getElementById('captureCanvas');
     const placeholderImage = document.getElementById('placeholderImage');
     const uploadButton = document.getElementById('uploadButton');
     const captureButton = document.getElementById('captureButton');
+    const textPreview = document.querySelector('.text-preview');
     
     // Tab switching functionality
     const tabButtons = document.querySelectorAll('.tab-button');
@@ -38,18 +40,20 @@ document.addEventListener('DOMContentLoaded', function() {
     if (initialTab) {
         initialTab.classList.add('active');
     }
-    const textPreview = document.querySelector('.text-preview');
-    
     // Request camera permission and initialize camera
-async function initializeCamera() {
+    async function initializeCamera() {
+        if (isCameraInitialized) return true;
+        
         try {
             cameraStream = await navigator.mediaDevices.getUserMedia({ 
-            video: { 
-                facingMode: 'environment',
-                width: { ideal: 1920 },
-                height: { ideal: 1080 }
-        });
+                video: { 
+                    facingMode: 'environment',
+                    width: { ideal: 1280 },
+                    height: { ideal: 720 }
+                }
+            );
             cameraVideo.srcObject = cameraStream;
+            isCameraInitialized = true;
             return true;
         } catch (error) {
             console.error('Error accessing camera:', error);
@@ -57,8 +61,7 @@ async function initializeCamera() {
             return false;
         }
     }
-
-    // Capture image from camera
+// Capture image from camera
     function captureImage() {
         if (!cameraStream) {
             alert('Please allow camera access first');
@@ -215,7 +218,6 @@ Due Date: 12/15/2023
         
         fileInput.click();
     });
-
     // Capture button functionality
     captureButton.addEventListener('click', async function() {
         // Request camera permission if not already granted
@@ -224,13 +226,93 @@ Due Date: 12/15/2023
             captureImage();
         }
     });
+
+    // Upload button functionality
+    uploadButton.addEventListener('click', function() {
+        // Create file input for upload
+        const fileInput = document.createElement('input');
+        fileInput.type = 'file';
+        fileInput.accept = 'image/*';
+        fileInput.style.display = 'none';
+        document.body.appendChild(fileInput);
+        
+        fileInput.addEventListener('change', function(e) {
+            const file = e.target.files[0];
+            if (file) {
+                // Show upload processing
+                textPreview.innerHTML = `
+                    <div class="upload-animation">
+                        <div class="progress-bar">
+                            <div class="progress"></div>
+                        </div>
+                        <p><i class="fas fa-cloud-upload-alt fa-pulse"></i> Processing image...</p>
+                    </div>
+                `;
+                
+                const reader = new FileReader();
+                reader.onload = function(event) {
+                    setTimeout(() => {
+                        // Show image preview
+                        const imagePreviewContainer = document.querySelector('.image-preview-container');
+                        const previewImage = document.getElementById('preview-image');
+                        previewImage.src = event.target.result;
+                        imagePreviewContainer.style.display = 'block';
+                        
+                        // Store and simulate OCR results with sample data
+                        const result = {
+                            type: 'document',
+                            content: 'Invoice #INV-2023-0456\nClient: Acme Corporation\nTotal: $1,245.00\nDue Date: 12/15/2023',
+                            timestamp: new Date().toISOString(),
+                            imageData: event.target.result
+                        };
+                        scanResults.push(result);
+                        
+                        // Show results with image preview and processed text
+                        textPreview.innerHTML = `
+                            <div class="result-header">
+                                <div class="result-icon">
+                                    <i class="fas fa-file-alt"></i>
+                                </div>
+                                <h4>Document Analysis</h4>
+                            </div>
+                            <div class="result-content">
+                                <p class="ocr-text">Invoice #INV-2023-0456</p>
+                                <p class="ocr-text">Client: Acme Corporation</p>
+                                <p class="ocr-text">Total: $1,245.00</p>
+                                <p class="ocr-text">Due Date: 12/15/2023</p>
+                            </div>
+                            <p class="timestamp">Processed at ${new Date().toLocaleTimeString()}</p>
+                        `;
+                        
+                        // Add processed text section after results
+                        const processedTextSection = document.createElement('div');
+                        processedTextSection.className = 'processed-text-section';
+                        processedTextSection.innerHTML = `
+                            <h4>Processed Text</h4>
+                            <div class="processed-text-content">
+Invoice #INV-2023-0456
+Client: Acme Corporation
+Total: $1,245.00
+Due Date: 12/15/2023
+                            </div>
+                        `;
+                        
+                        textPreview.appendChild(processedTextSection);
+                    }, 1500);
+                };
+                reader.readAsDataURL(file);
+            }
+        });
+        
+        fileInput.click();
+    });
+
     // Function to close image preview
     window.closeImagePreview = function() {
         const imagePreviewContainer = document.querySelector('.image-preview-container');
         imagePreviewContainer.style.display = 'none';
     };
 });
-
 // Add scanning animation styles
 const style = document.createElement('style');
 style.textContent = `

style.css

@@ -613,7 +613,6 @@ input:checked + .slider:before {
     color: var(--primary-color);
     background: rgba(124, 58, 237, 0.05);
 }
-
 @keyframes rotate {
     from { transform: rotate(0deg); }
     to { transform: rotate(360deg); }