Flipper-Code-Generator

Running

App Files Files Community

ginipick commited on 22 days ago

Commit

3453b9b

verified ·

1 Parent(s): 4e5cd2c

Update index.html

Browse files

Files changed (1) hide show

index.html +386 -374

index.html CHANGED Viewed

@@ -3,485 +3,497 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Advanced Facial Emotion Analysis System</title>
-    <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs"></script>
-    <script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/face-detection"></script>
-    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
     <style>
-        :root {
-            --primary: #3498db;
-            --success: #2ecc71;
-            --warning: #f1c40f;
-            --danger: #e74c3c;
-            --dark: #2c3e50;
-            --light: #ecf0f1;
-        }
         * {
             margin: 0;
             padding: 0;
             box-sizing: border-box;
-            font-family: 'Segoe UI', system-ui, sans-serif;
         }
-        body {
-            background: var(--dark);
-            color: var(--light);
-            line-height: 1.6;
-        }
-        .dashboard {
-            display: grid;
-            grid-template-columns: 70% 30%;
-            gap: 20px;
-            padding: 20px;
-            max-width: 1600px;
             margin: 0 auto;
         }
-        .main-panel {
-            background: rgba(255,255,255,0.1);
-            border-radius: 15px;
             padding: 20px;
         }
-        .controls-panel {
-            background: rgba(255,255,255,0.1);
-            border-radius: 15px;
-            padding: 20px;
         }
-        .video-container {
-            position: relative;
-            width: 100%;
-            border-radius: 10px;
-            overflow: hidden;
-            background: #000;
         }
-        #video, #canvas {
-            width: 100%;
-            transform: scaleX(-1);
         }
-        #canvas {
-            position: absolute;
-            top: 0;
-            left: 0;
         }
-        .settings-group {
-            margin: 15px 0;
-            padding: 15px;
-            background: rgba(255,255,255,0.05);
-            border-radius: 8px;
         }
-        .settings-group h3 {
-            color: var(--primary);
-            margin-bottom: 10px;
         }
-        .control-button {
             padding: 10px 20px;
             border: none;
-            border-radius: 5px;
-            background: var(--primary);
-            color: white;
             cursor: pointer;
-            transition: all 0.3s ease;
-            margin: 5px;
-            width: 100%;
         }
-        .control-button:hover {
-            opacity: 0.9;
-            transform: translateY(-2px);
         }
-        .emotion-indicator {
-            display: grid;
-            grid-template-columns: repeat(2, 1fr);
-            gap: 10px;
-            margin-top: 10px;
         }
-        .emotion-item {
-            padding: 10px;
-            background: rgba(255,255,255,0.05);
-            border-radius: 5px;
-            text-align: center;
-            transition: all 0.3s ease;
         }
-        .emotion-item.active {
-            background: var(--success);
-            transform: scale(1.05);
         }
-        .stats-container {
-            margin-top: 20px;
         }
-        .meter {
-            height: 20px;
-            background: rgba(255,255,255,0.1);
-            border-radius: 10px;
             overflow: hidden;
-            margin: 10px 0;
         }
-        .meter-fill {
-            height: 100%;
-            background: var(--primary);
-            transition: width 0.3s ease;
         }
-        .privacy-toggle {
-            margin: 10px 0;
         }
-        #emotionChart {
-            margin-top: 20px;
-            background: rgba(255,255,255,0.05);
-            border-radius: 8px;
-            padding: 10px;
         }
-        .fps-counter {
-            position: absolute;
-            top: 10px;
-            right: 10px;
-            background: rgba(0,0,0,0.7);
-            padding: 5px 10px;
-            border-radius: 5px;
-            font-size: 14px;
         }
-        .detection-settings {
-            display: grid;
-            gap: 10px;
-            margin: 10px 0;
         }
-        .slider-control {
             display: flex;
             flex-direction: column;
-            gap: 5px;
         }
-        input[type="range"] {
-            width: 100%;
-            background: var(--primary);
         }
-        .face-count {
-            font-size: 1.2em;
-            text-align: center;
-            margin: 10px 0;
-            color: var(--success);
         }
-        @keyframes pulse {
-            0% { transform: scale(1); }
-            50% { transform: scale(1.05); }
-            100% { transform: scale(1); }
         }
-        .detecting {
-            animation: pulse 2s infinite;
         }
     </style>
 </head>
 <body>
-    <div class="dashboard">
-        <div class="main-panel">
-            <div class="video-container">
-                <video id="video" playsinline></video>
-                <canvas id="canvas"></canvas>
-                <div class="fps-counter">FPS: <span id="fpsCounter">0</span></div>
-            </div>
-            <canvas id="emotionChart"></canvas>
         </div>
-        <div class="controls-panel">
-            <div class="settings-group">
-                <h3>Detection Controls</h3>
-                <button id="toggleDetection" class="control-button">Start Detection</button>
-                <button id="togglePrivacy" class="control-button">Toggle Face Blur</button>
-                <div class="detection-settings">
-                    <div class="slider-control">
-                        <label>Detection Sensitivity</label>
-                        <input type="range" id="sensitivity" min="0" max="100" value="50">
-                    </div>
-                    <div class="slider-control">
-                        <label>Minimum Face Size</label>
-                        <input type="range" id="minFaceSize" min="20" max="200" value="50">
-                    </div>
-                </div>
-            </div>
-            <div class="settings-group">
-                <h3>Current Analysis</h3>
-                <div class="face-count">Detected Faces: <span id="faceCount">0</span></div>
-                <div class="emotion-indicator">
-                    <div class="emotion-item" data-emotion="happy">😊 Happy</div>
-                    <div class="emotion-item" data-emotion="sad">😢 Sad</div>
-                    <div class="emotion-item" data-emotion="angry">😠 Angry</div>
-                    <div class="emotion-item" data-emotion="neutral">😐 Neutral</div>
-                    <div class="emotion-item" data-emotion="surprised">😲 Surprised</div>
-                    <div class="emotion-item" data-emotion="fearful">😨 Fearful</div>
-                </div>
             </div>
-            <div class="settings-group">
-                <h3>Confidence Level</h3>
-                <div class="meter">
-                    <div id="confidenceMeter" class="meter-fill" style="width: 0%"></div>
-                </div>
             </div>
         </div>
-    </div>
-    <script>
-        let model;
-        let isDetecting = false;
-        let blurFaces = false;
-        let lastFrameTime = 0;
-        let smoothedEmotions = {};
-        const emotions = ['happy', 'sad', 'angry', 'neutral', 'surprised', 'fearful'];
-        emotions.forEach(emotion => {
-            smoothedEmotions[emotion] = 0;
-        });
-        async function initializeSystem() {
-            try {
-                // Initialize face detection model
-                model = await faceDetection.createDetector(
-                    faceDetection.SupportedModels.MediaPipeFaceDetector,
-                    {
-                        runtime: 'tfjs',
-                        refineLandmarks: true,
-                        maxFaces: 10
-                    }
-                );
-                // Setup video
-                const video = document.getElementById('video');
-                const stream = await navigator.mediaDevices.getUserMedia({
-                    video: {
-                        width: 640,
-                        height: 480,
-                        facingMode: 'user'
-                    }
-                });
-                video.srcObject = stream;
-                await video.play();
-                // Setup canvas
-                const canvas = document.getElementById('canvas');
-                canvas.width = video.videoWidth;
-                canvas.height = video.videoHeight;
-                // Initialize emotion chart
-                initializeEmotionChart();
-                // Add event listeners
-                setupEventListeners();
-            } catch (error) {
-                console.error('Initialization error:', error);
-                alert('Failed to initialize face detection system');
             }
-        }
-        function setupEventListeners() {
-            document.getElementById('toggleDetection').addEventListener('click', toggleDetection);
-            document.getElementById('togglePrivacy').addEventListener('click', () => blurFaces = !blurFaces);
-            document.getElementById('sensitivity').addEventListener('input', updateDetectionSettings);
-            document.getElementById('minFaceSize').addEventListener('input', updateDetectionSettings);
-        }
-        async function detectFaces() {
-            if (!isDetecting) return;
-            const video = document.getElementById('video');
-            const canvas = document.getElementById('canvas');
-            const ctx = canvas.getContext('2d');
-            // Calculate FPS
-            const now = performance.now();
-            const fps = 1000 / (now - lastFrameTime);
-            lastFrameTime = now;
-            document.getElementById('fpsCounter').textContent = Math.round(fps);
-            try {
-                const faces = await model.estimateFaces(video, {
-                    flipHorizontal: false
-                });
-                ctx.clearRect(0, 0, canvas.width, canvas.height);
-                faces.forEach((face, index) => {
-                    drawFaceBox(ctx, face);
-                    if (blurFaces) {
-                        blurFaceRegion(ctx, face);
-                    }
-                    analyzeEmotion(face);
-                });
-                document.getElementById('faceCount').textContent = faces.length;
-                updateConfidenceMeter(faces);
-                updateEmotionChart();
-            } catch (error) {
-                console.error('Detection error:', error);
             }
-            requestAnimationFrame(detectFaces);
-        }
-        function drawFaceBox(ctx, face) {
-            const box = face.box;
-            ctx.strokeStyle = '#3498db';
-            ctx.lineWidth = 2;
-            ctx.strokeRect(box.xMin, box.yMin, box.width, box.height);
-            // Draw landmarks
-            if (face.keypoints) {
-                ctx.fillStyle = '#2ecc71';
-                face.keypoints.forEach(keypoint => {
-                    ctx.beginPath();
-                    ctx.arc(keypoint.x, keypoint.y, 2, 0, 2 * Math.PI);
-                    ctx.fill();
-                });
             }
-        }
-        function blurFaceRegion(ctx, face) {
-            const box = face.box;
-            ctx.filter = 'blur(10px)';
-            ctx.fillStyle = 'rgba(0,0,0,0.5)';
-            ctx.fillRect(box.xMin, box.yMin, box.width, box.height);
-            ctx.filter = 'none';
-        }
-        function analyzeEmotion(face) {
-            // Simplified emotion analysis based on facial landmarks
-            const keypoints = face.keypoints;
-            if (!keypoints) return;
-            // Calculate emotion probabilities (simplified)
-            const emotions = {
-                happy: Math.random(),
-                sad: Math.random(),
-                angry: Math.random(),
-                neutral: Math.random(),
-                surprised: Math.random(),
-                fearful: Math.random()
-            };
-            // Apply smoothing
-            Object.keys(emotions).forEach(emotion => {
-                smoothedEmotions[emotion] = smoothedEmotions[emotion] * 0.8 + emotions[emotion] * 0.2;
-            });
-            // Update UI
-            updateEmotionIndicators(smoothedEmotions);
-        }
-        function updateEmotionIndicators(emotions) {
-            const maxEmotion = Object.entries(emotions).reduce((a, b) => a[1] > b[1] ? a : b)[0];
-            document.querySelectorAll('.emotion-item').forEach(item => {
-                item.classList.remove('active');
-                if (item.dataset.emotion === maxEmotion) {
-                    item.classList.add('active');
                 }
-            });
-        }
-        function updateConfidenceMeter(faces) {
-            if (faces.length === 0) return;
-            const avgConfidence = faces.reduce((sum, face) => sum + face.box.score, 0) / faces.length;
-            document.getElementById('confidenceMeter').style.width = `${avgConfidence * 100}%`;
-        }
-        function toggleDetection() {
-            isDetecting = !isDetecting;
-            const button = document.getElementById('toggleDetection');
-            button.textContent = isDetecting ? 'Stop Detection' : 'Start Detection';
-            button.style.background = isDetecting ? '#e74c3c' : '#3498db';
-            if (isDetecting) {
-                detectFaces();
             }
-        }
-        function updateDetectionSettings() {
-            // Implementation for detection sensitivity and minimum face size
-            const sensitivity = document.getElementById('sensitivity').value;
-            const minFaceSize = document.getElementById('minFaceSize').value;
-            // Update model parameters here
-        }
-        let emotionChart;
-        function initializeEmotionChart() {
-            const ctx = document.getElementById('emotionChart').getContext('2d');
-            emotionChart = new Chart(ctx, {
-                type: 'line',
-                data: {
-                    labels: [],
-                    datasets: emotions.map(emotion => ({
-                        label: emotion,
-                        data: [],
-                        borderColor: getEmotionColor(emotion),
-                        fill: false
-                    }))
-                },
-                options: {
-                    responsive: true,
-                    scales: {
-                        y: {
-                            beginAtZero: true,
-                            max: 1
                         }
                     }
                 }
-            });
-        }
-        function updateEmotionChart() {
-            const timestamp = new Date().toLocaleTimeString();
-            emotionChart.data.labels.push(timestamp);
-            emotions.forEach((emotion, index) => {
-                emotionChart.data.datasets[index].data.push(smoothedEmotions[emotion]);
-            });
-            if (emotionChart.data.labels.length > 30) {
-                emotionChart.data.labels.shift();
-                emotionChart.data.datasets.forEach(dataset => dataset.data.shift());
             }
-            emotionChart.update();
-        }
-        function getEmotionColor(emotion) {
-            const colors = {
-                happy: '#2ecc71',
-                sad: '#3498db',
-                angry: '#e74c3c',
-                neutral: '#95a5a6',
-                surprised: '#f1c40f',
-                fearful: '#9b59b6'
-            };
-            return colors[emotion] || '#000000';
         }
-        // Initialize the system when page loads
-        window.onload = initializeSystem;
     </script>
 </body>
 </html>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Screen Monitor Pro</title>
+    <script src="https://unpkg.com/tesseract.js@v2.1.0/dist/tesseract.min.js"></script>
     <style>
         * {
             margin: 0;
             padding: 0;
             box-sizing: border-box;
+            font-family: -apple-system, system-ui, sans-serif;
         }
+        .app-container {
+            max-width: 1200px;
             margin: 0 auto;
+            padding: 20px;
+            background: #f8fafc;
+            min-height: 100vh;
         }
+        .header {
+            background: white;
             padding: 20px;
+            border-radius: 8px;
+            margin-bottom: 20px;
+            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+            text-align: center;
         }
+        .status-bar {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            background: white;
+            padding: 15px;
+            border-radius: 8px;
+            margin-bottom: 20px;
+            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
         }
+        .status-indicator {
+            display: flex;
+            align-items: center;
+            gap: 8px;
         }
+        .status-dot {
+            width: 10px;
+            height: 10px;
+            border-radius: 50%;
+            background: #cbd5e1;
         }
+        .status-dot.active {
+            background: #22c55e;
+            animation: pulse 1s infinite;
         }
+        @keyframes pulse {
+            0% { opacity: 1; }
+            50% { opacity: 0.5; }
+            100% { opacity: 1; }
         }
+        .controls {
+            display: flex;
+            gap: 10px;
         }
+        button {
             padding: 10px 20px;
             border: none;
+            border-radius: 6px;
             cursor: pointer;
+            font-weight: 500;
+            transition: all 0.2s;
         }
+        button:disabled {
+            opacity: 0.5;
+            cursor: not-allowed;
         }
+        .start-btn {
+            background: #22c55e;
+            color: white;
         }
+        .stop-btn {
+            background: #ef4444;
+            color: white;
         }
+        .preview-container {
+            background: black;
+            border-radius: 8px;
+            overflow: hidden;
+            margin-bottom: 20px;
+            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+            position: relative;
         }
+        #preview {
+            width: 100%;
+            aspect-ratio: 16/9;
+            object-fit: contain;
         }
+        .logs {
+            background: white;
+            border-radius: 8px;
+            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
             overflow: hidden;
         }
+        .log-header {
+            background: #1e293b;
+            color: white;
+            padding: 15px;
+            font-weight: 500;
         }
+        .log-entry {
+            padding: 20px;
+            border-bottom: 1px solid #e2e8f0;
+            display: grid;
+            grid-template-columns: 300px 1fr;
+            gap: 20px;
         }
+        .screenshot-container {
+            position: relative;
         }
+        .screenshot {
+            width: 100%;
+            border-radius: 4px;
+            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
         }
+        .change-highlight {
+            position: absolute;
+            border: 2px solid #ef4444;
+            background: rgba(239, 68, 68, 0.2);
+            pointer-events: none;
+            transition: all 0.3s;
         }
+        .info-panel {
             display: flex;
             flex-direction: column;
+            gap: 15px;
         }
+        .timestamp {
+            color: #64748b;
+            font-size: 0.9rem;
         }
+        .analysis {
+            background: #f8fafc;
+            padding: 15px;
+            border-radius: 6px;
+            font-size: 0.95rem;
+            line-height: 1.5;
         }
+        .analysis h4 {
+            margin-bottom: 8px;
+            color: #1e293b;
+        }
+        .ocr-text {
+            font-family: monospace;
+            white-space: pre-wrap;
+            background: #f1f5f9;
+            padding: 10px;
+            border-radius: 4px;
+            margin-top: 8px;
+        }
+        .actions {
+            display: flex;
+            gap: 10px;
+            margin-top: auto;
         }
+        .download-btn {
+            padding: 8px 16px;
+            background: #3b82f6;
+            color: white;
+            text-decoration: none;
+            border-radius: 4px;
+            font-size: 0.9rem;
+            display: flex;
+            align-items: center;
+            gap: 6px;
+        }
+        .error-message {
+            background: #fef2f2;
+            color: #ef4444;
+            padding: 10px;
+            border-radius: 4px;
+            margin: 10px 0;
+            display: none;
+        }
+        @media (max-width: 768px) {
+            .log-entry {
+                grid-template-columns: 1fr;
+            }
         }
     </style>
 </head>
 <body>
+    <div class="app-container">
+        <div class="header">
+            <h1>Screen Monitor Pro</h1>
+            <p>Advanced screen capture and analysis</p>
         </div>
+        <div class="status-bar">
+            <div class="status-indicator">
+                <div class="status-dot" id="statusDot"></div>
+                <span id="statusText">Ready</span>
             </div>
+            <div class="controls">
+                <button class="start-btn" id="startBtn">Start Capture</button>
+                <button class="stop-btn" id="stopBtn" disabled>Stop</button>
             </div>
         </div>
+        <div class="error-message" id="errorMessage"></div>
+        <div class="preview-container">
+            <video id="preview" autoplay></video>
+        </div>
+        <div class="logs">
+            <div class="log-header">Change Log</div>
+            <div id="logContainer"></div>
+        </div>
+    </div>
+    <script>
+        class ScreenAnalyzer {
+            constructor() {
+                this.mediaStream = null;
+                this.captureInterval = null;
+                this.lastImageData = null;
+                this.worker = null;
+                this.isProcessing = false;
+                this.initializeOCR();
+                this.bindElements();
+                this.bindEvents();
             }
+            async initializeOCR() {
+                try {
+                    this.worker = await Tesseract.createWorker();
+                    await this.worker.loadLanguage('eng');
+                    await this.worker.initialize('eng');
+                } catch (error) {
+                    this.showError('Failed to initialize OCR');
+                }
+            }
+            bindElements() {
+                this.elements = {
+                    startBtn: document.getElementById('startBtn'),
+                    stopBtn: document.getElementById('stopBtn'),
+                    preview: document.getElementById('preview'),
+                    logContainer: document.getElementById('logContainer'),
+                    statusDot: document.getElementById('statusDot'),
+                    statusText: document.getElementById('statusText'),
+                    errorMessage: document.getElementById('errorMessage')
+                };
+            }
+            bindEvents() {
+                this.elements.startBtn.addEventListener('click', () => this.start());
+                this.elements.stopBtn.addEventListener('click', () => this.stop());
+            }
+            updateStatus(status, isError = false) {
+                this.elements.statusDot.className = `status-dot ${status === 'recording' ? 'active' : ''}`;
+                this.elements.statusText.textContent = status.charAt(0).toUpperCase() + status.slice(1);
+                if (isError) {
+                    this.elements.errorMessage.textContent = status;
+                    this.elements.errorMessage.style.display = 'block';
+                } else {
+                    this.elements.errorMessage.style.display = 'none';
+                }
+            }
+            async start() {
+                try {
+                    this.mediaStream = await navigator.mediaDevices.getDisplayMedia({
+                        video: { cursor: "always" }
+                    });
+                    this.elements.preview.srcObject = this.mediaStream;
+                    this.elements.startBtn.disabled = true;
+                    this.elements.stopBtn.disabled = false;
+                    this.updateStatus('recording');
+                    this.captureInterval = setInterval(() => this.capture(), 1000);
+                    this.mediaStream.getVideoTracks()[0].onended = () => this.stop();
+                } catch (error) {
+                    this.showError('Failed to start screen capture');
+                }
+            }
+            stop() {
+                if (this.mediaStream) {
+                    this.mediaStream.getTracks().forEach(track => track.stop());
+                    this.elements.preview.srcObject = null;
+                }
+                clearInterval(this.captureInterval);
+                this.elements.startBtn.disabled = false;
+                this.elements.stopBtn.disabled = true;
+                this.lastImageData = null;
+                this.updateStatus('ready');
             }
+            async capture() {
+                if (this.isProcessing) return;
+                this.isProcessing = true;
+                try {
+                    const canvas = document.createElement('canvas');
+                    canvas.width = this.elements.preview.videoWidth;
+                    canvas.height = this.elements.preview.videoHeight;
+                    const ctx = canvas.getContext('2d');
+                    ctx.drawImage(this.elements.preview, 0, 0);
+                    const currentImageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+                    const changes = this.detectChanges(currentImageData);
+                    if (changes.length > 0 || !this.lastImageData) {
+                        const imageUrl = canvas.toDataURL('image/jpeg', 0.8);
+                        const ocrResults = await this.analyzeChanges(canvas, changes);
+                        this.addLogEntry(imageUrl, changes, ocrResults);
+                    }
+                    this.lastImageData = currentImageData;
+                } catch (error) {
+                    this.showError('Failed to process capture');
+                } finally {
+                    this.isProcessing = false;
+                }
             }
+            detectChanges(currentImageData) {
+                if (!this.lastImageData) return [];
+                const changes = [];
+                const blockSize = 20;
+                const threshold = 30;
+                const width = currentImageData.width;
+                const height = currentImageData.height;
+                for (let y = 0; y < height; y += blockSize) {
+                    for (let x = 0; x < width; x += blockSize) {
+                        let diffCount = 0;
+                        const maxY = Math.min(y + blockSize, height);
+                        const maxX = Math.min(x + blockSize, width);
+                        for (let py = y; py < maxY; py++) {
+                            for (let px = x; px < maxX; px++) {
+                                const i = (py * width + px) * 4;
+                                if (Math.abs(currentImageData.data[i] - this.lastImageData.data[i]) > threshold ||
+                                    Math.abs(currentImageData.data[i + 1] - this.lastImageData.data[i + 1]) > threshold ||
+                                    Math.abs(currentImageData.data[i + 2] - this.lastImageData.data[i + 2]) > threshold) {
+                                    diffCount++;
+                                }
+                            }
+                        }
+                        if (diffCount > (blockSize * blockSize * 0.3)) {
+                            changes.push({
+                                x: x / width * 100,
+                                y: y / height * 100,
+                                width: Math.min(blockSize / width * 100, 100 - x / width * 100),
+                                height: Math.min(blockSize / height * 100, 100 - y / height * 100),
+                                pixels: {x, y, width: maxX - x, height: maxY - y}
+                            });
+                        }
+                    }
                 }
+                return changes;
             }
+            async analyzeChanges(canvas, changes) {
+                const results = [];
+                for (const change of changes) {
+                    const tempCanvas = document.createElement('canvas');
+                    tempCanvas.width = change.pixels.width;
+                    tempCanvas.height = change.pixels.height;
+                    const tempCtx = tempCanvas.getContext('2d');
+                    tempCtx.drawImage(
+                        canvas,
+                        change.pixels.x, change.pixels.y,
+                        change.pixels.width, change.pixels.height,
+                        0, 0,
+                        change.pixels.width, change.pixels.height
+                    );
+                    try {
+                        const result = await this.worker.recognize(tempCanvas);
+                        if (result.data.text.trim()) {
+                            results.push({
+                                text: result.data.text.trim(),
+                                confidence: result.data.confidence,
+                                region: change
+                            });
                         }
+                    } catch (error) {
+                        console.error('OCR Error:', error);
                     }
                 }
+                return results;
             }
+            addLogEntry(imageUrl, changes, ocrResults) {
+                const logEntry = document.createElement('div');
+                logEntry.className = 'log-entry';
+                const timestamp = new Date().toLocaleString();
+                logEntry.innerHTML = `
+                    <div class="screenshot-container">
+                        <img class="screenshot" src="${imageUrl}" alt="Screenshot">
+                        ${changes.map((change, index) => `
+                            <div class="change-highlight" style="
+                                left: ${change.x}%;
+                                top: ${change.y}%;
+                                width: ${change.width}%;
+                                height: ${change.height}%;
+                            "></div>
+                        `).join('')}
+                    </div>
+                    <div class="info-panel">
+                        <div class="timestamp">📅 ${timestamp}</div>
+                        <div class="analysis">
+                            <h4>Changes Detected</h4>
+                            <p>${changes.length} regions changed</p>
+                            ${ocrResults.length > 0 ? `
+                                <h4>Text Content</h4>
+                                <div class="ocr-text">
+                                    ${ocrResults.map(result =>
+                                        `[Region ${Math.round(result.confidence)}% confidence]\n${result.text}`
+                                    ).join('\n\n')}
+                                </div>
+                            ` : ''}
+                        </div>
+                        <div class="actions">
+                            <a href="${imageUrl}" download="screenshot-${Date.now()}.jpg"
+                               class="download-btn">
+                                📸 Download Screenshot
+                            </a>
+                        </div>
+                    </div>
+                `;
+                this.elements.logContainer.insertBefore(logEntry, this.elements.logContainer.firstChild);
+            }
+            showError(message) {
+                this.updateStatus(message, true);
+                console.error(message);
+            }
+            async cleanup() {
+                if (this.worker) {
+                    await this.worker.terminate();
+                }
+                this.stop();
+            }
         }
+        // Initialize the application
+        const analyzer = new ScreenAnalyzer();
+        window.addEventListener('beforeunload', () => analyzer.cleanup());
     </script>
 </body>
 </html>