1. Application must have access to the user storage to upload documents or images, 2. Application must have camera access for user the capture images

index.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>ClarifAI - Smart Image Recognition</title>
-<link rel="stylesheet" href="style.css">
+    <link rel="stylesheet" href="style.css">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
@@ -29,8 +29,8 @@
             
             <div class="tab-content active" id="home">
                 <div class="scan-area">
-            <div class="camera-view">
-        <div class="placeholder-image">
+<div class="camera-view">
+        <div class="placeholder-image" id="placeholderImage">
             <div class="camera-overlay">
                 <div class="camera-icon">
                     <i class="fas fa-brain"></i>
@@ -61,7 +61,9 @@
                 </div>
             </div>
         </div>
-        <div class="image-preview-container" style="display: none;">
+        <video id="cameraStream" style="display: none; width: 100%; height: 100%; object-fit: cover;"></video>
+        <canvas id="captureCanvas" style="display: none;"></canvas>
+<div class="image-preview-container" style="display: none;">
             <h4>Original Image</h4>
             <div class="image-preview">
                 <img id="preview-image" src="" alt="Captured image">
@@ -72,10 +74,10 @@
         </div>
 </div>
 <div class="scan-buttons">
-    <button class="scan-button upload-button">
+    <button class="scan-button upload-button" id="uploadButton">
         <i class="fas fa-upload"></i>
     </button>
-    <button class="scan-button capture-button">
+    <button class="scan-button capture-button" id="captureButton">
         <i class="fas fa-camera"></i>
     </button>
 </div>

script.js

@@ -2,6 +2,14 @@
 document.addEventListener('DOMContentLoaded', function() {
     // Initialize empty results array
     const scanResults = [];
+    
+    // Camera and storage access variables
+    let cameraStream = null;
+    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');
 // Tab switching functionality
 const tabButtons = document.querySelectorAll('.tab-button');
     const tabContents = document.querySelectorAll('.tab-content');
@@ -24,6 +32,103 @@ const tabButtons = document.querySelectorAll('.tab-button');
     const uploadButton = document.querySelector('.upload-button');
     const captureButton = document.querySelector('.capture-button');
     const textPreview = document.querySelector('.text-preview');
+    // Request camera permission and initialize camera
+    async function initializeCamera() {
+        try {
+            cameraStream = await navigator.mediaDevices.getUserMedia({ 
+            video: { 
+                facingMode: 'environment',
+                width: { ideal: 1920 },
+                height: { ideal: 1080 }
+        });
+            cameraVideo.srcObject = cameraStream;
+            return true;
+        } catch (error) {
+            console.error('Error accessing camera:', error);
+            alert('Camera access is required for capturing images. Please allow camera permissions.');
+            return false;
+        }
+    }
+
+    // Capture image from camera
+    function captureImage() {
+        if (!cameraStream) {
+            alert('Please allow camera access first');
+            return;
+        }
+        
+        // Show camera stream and hide placeholder
+        placeholderImage.style.display = 'none';
+        cameraVideo.style.display = 'block';
+        
+        // Set canvas dimensions to match video
+        captureCanvas.width = cameraVideo.videoWidth;
+        captureCanvas.height = cameraVideo.videoHeight;
+        
+        const context = captureCanvas.getContext('2d');
+        context.drawImage(cameraVideo, 0, 0);
+        
+        // Get image data URL
+        const imageData = captureCanvas.toDataURL('image/jpeg');
+        
+        // Process the captured image
+        processCapturedImage(imageData);
+    }
+
+    // Process captured image and show results
+    function processCapturedImage(imageData) {
+        // Show image preview
+        const imagePreviewContainer = document.querySelector('.image-preview-container');
+        const previewImage = document.getElementById('preview-image');
+        previewImage.src = imageData;
+        imagePreviewContainer.style.display = 'block';
+        
+        // Store and simulate OCR results with sample data
+        const result = {
+            type: 'scan',
+            content: 'The quick brown fox jumps over the lazy dog\n1234567890',
+            confidence: '98.7%',
+            timestamp: new Date().toISOString(),
+            imageData: imageData
+        };
+        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-camera"></i>
+                </div>
+                <h4>Scan Results</h4>
+            </div>
+            <div class="result-content">
+                <p class="ocr-text">The quick brown fox jumps over the lazy dog</p>
+                <p class="ocr-text">1234567890</p>
+            </div>
+            <div class="result-meta">
+                <span class="confidence">Confidence: 98.7%</span>
+            </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">
+The quick brown fox jumps over the lazy dog
+1234567890
+            </div>
+        `;
+        
+        textPreview.appendChild(processedTextSection);
+        
+        // Hide camera and show placeholder again
+        cameraVideo.style.display = 'none';
+        placeholderImage.style.display = 'block';
+    }
+
     uploadButton.addEventListener('click', function() {
         // Create file input for upload
         const fileInput = document.createElement('input');
@@ -134,67 +239,14 @@ Due Date: 12/15/2023
         `;
         document.head.appendChild(uploadStyle);
     });
-captureButton.addEventListener('click', function() {
-        // Simulate capture process with camera
-        document.querySelector('.camera-view').classList.add('active-scan');
-        textPreview.innerHTML = `
-            <div class="scanning-animation">
-                <div class="scan-line"></div>
-                <p><i class="fas fa-spinner fa-spin"></i> Analyzing text...</p>
-            </div>
-        `;
-        
-        setTimeout(() => {
-            // Store and simulate OCR results with better sample data
-            const result = {
-                type: 'scan',
-                content: 'The quick brown fox jumps over the lazy dog\n1234567890',
-                confidence: '98.7%',
-                timestamp: new Date().toISOString(),
-                imageData: 'http://static.photos/office/375x320/78'
-            };
-            scanResults.push(result);
-            document.querySelector('.camera-view').classList.remove('active-scan');
-            
-            // Show image preview
-            const imagePreviewContainer = document.querySelector('.image-preview-container');
-            const previewImage = document.getElementById('preview-image');
-            previewImage.src = result.imageData;
-            imagePreviewContainer.style.display = 'block';
-            
-            textPreview.innerHTML = `
-                <div class="result-header">
-                    <div class="result-icon">
-                        <i class="fas fa-camera"></i>
-                    </div>
-                    <h4>Scan Results</h4>
-                </div>
-                <div class="result-content">
-                    <p class="ocr-text">The quick brown fox jumps over the lazy dog</p>
-                    <p class="ocr-text">1234567890</p>
-                </div>
-                <div class="result-meta">
-                    <span class="confidence">Confidence: 98.7%</span>
-                </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">
-The quick brown fox jumps over the lazy dog
-1234567890
-                </div>
-            `;
-            
-            textPreview.appendChild(processedTextSection);
-        }, 3000);
+    captureButton.addEventListener('click', async function() {
+        // Request camera permission if not already granted
+        const cameraInitialized = await initializeCamera();
+        if (cameraInitialized) {
+            captureImage();
+        }
     });
-    
-    // Function to close image preview
+// Function to close image preview
     window.closeImagePreview = function() {
         const imagePreviewContainer = document.querySelector('.image-preview-container');
         imagePreviewContainer.style.display = 'none';