Spaces:

RehamAAhmed
/

count-model

Paused

App Files Files Community

RehamAAhmed commited on Jun 13

Commit

43d5325

verified ·

1 Parent(s): 2dc49d3

Upload 5 files

Browse files

Files changed (6) hide show

.gitattributes +2 -0
after.mp4 +3 -0
before.mp4 +3 -0
index.html +182 -0
main.js +458 -0
styles.css +843 -0

.gitattributes CHANGED Viewed

@@ -33,3 +33,5 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text

 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
+after.mp4 filter=lfs diff=lfs merge=lfs -text
+before.mp4 filter=lfs diff=lfs merge=lfs -text

after.mp4 ADDED Viewed

	@@ -0,0 +1,3 @@

+version https://git-lfs.github.com/spec/v1
+oid sha256:4b9ff8e1a29973187d89f62bd587ca47b667a077155859120fdb308cdb063e04
+size 3901769

before.mp4 ADDED Viewed

	@@ -0,0 +1,3 @@

+version https://git-lfs.github.com/spec/v1
+oid sha256:4b9ff8e1a29973187d89f62bd587ca47b667a077155859120fdb308cdb063e04
+size 3901769

index.html ADDED Viewed

	@@ -0,0 +1,182 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Apartment Inspector - SAM 2 & Grounding DINO Dashboard</title>
+    <!-- Google Fonts -->
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&family=Space+Grotesk:wght@400;500;600&display=swap" rel="stylesheet">
+    <!-- FontAwesome icons -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <!-- Vanilla CSS stylesheet -->
+    <link rel="stylesheet" href="/static/css/styles.css">
+</head>
+<body>
+    <div class="glass-bg"></div>
+    <div class="app-container">
+        <!-- Header -->
+        <header class="app-header">
+            <div class="logo">
+                <i class="fa-solid fa-house-laptop logo-icon"></i>
+                <div class="logo-text">
+                    <h1>Apartment Inspector</h1>
+                    <span>Smart Asset Damage & Missing Item Evaluator</span>
+                </div>
+            </div>
+            <div class="status-indicator">
+                <span class="pulse-dot"></span>
+                <span id="backend-status-text">System Ready</span>
+            </div>
+        </header>
+        <!-- Main Layout Grid -->
+        <main class="app-grid">
+            <!-- Left Side: Config & Uploads -->
+            <section class="card config-card">
+                <h2 class="section-title"><i class="fa-solid fa-sliders"></i> Configuration & Upload</h2>
+                <form id="upload-form" enctype="multipart/form-data">
+                    <!-- Target Inspection Items Prompt -->
+                    <div class="input-group">
+                        <label for="prompt-input">
+                            Target Inspection Items
+                            <span class="tooltip" data-tooltip="Define what objects to track and compare. Separate by commas.">
+                                <i class="fa-solid fa-circle-info"></i>
+                            </span>
+                        </label>
+                        <textarea id="prompt-input" name="prompt" rows="3" placeholder="sofa, tv, refrigerator, door, window, bed, microwave, sink">door, sofa, cabinet, refrigerator, tv, table, microwave, chair, toilet, bed, window</textarea>
+                    </div>
+                    <!-- Speed & Resolution Settings -->
+                    <div class="settings-row">
+                        <div class="input-group half">
+                            <label for="speed-mode-select">Speed Mode</label>
+                            <select id="speed-mode-select" class="styled-select">
+                                <option value="super-fast">Super Fast (360p)</option>
+                                <option value="fast" selected>Fast (480p) - Recommended</option>
+                                <option value="detailed">Detailed (720p)</option>
+                            </select>
+                        </div>
+                        <div class="input-group half">
+                            <label for="fps-select">Frame Rate (FPS)</label>
+                            <select id="fps-select" class="styled-select">
+                                <option value="0.25">0.25 FPS (Ultra Fast)</option>
+                                <option value="0.5">0.5 FPS (Super Fast)</option>
+                                <option value="1.0">1.0 FPS (Fast)</option>
+                                <option value="2.0" selected>2.0 FPS (Normal)</option>
+                                <option value="3.0">3.0 FPS (Detailed)</option>
+                            </select>
+                        </div>
+                    </div>
+                    <!-- Gemini AI Key -->
+                    <div class="input-group">
+                        <label for="gemini-key-input">
+                            Gemini API Key (Optional)
+                            <span class="tooltip" data-tooltip="Enter your Gemini API Key to enable AI-powered condition analysis and explanations.">
+                                <i class="fa-solid fa-circle-info"></i>
+                            </span>
+                        </label>
+                        <input type="password" id="gemini-key-input" placeholder="AI final judgment key..." class="styled-input">
+                    </div>
+                    <!-- Upload Zone: Before Video -->
+                    <div class="upload-box" id="upload-before-zone">
+                        <input type="file" id="video-before" name="video_before" accept="video/mp4" class="file-input">
+                        <div class="upload-content">
+                            <i class="fa-solid fa-cloud-arrow-up upload-icon before-icon"></i>
+                            <h3>Before Renting Video</h3>
+                            <p class="file-name-display" id="before-file-name">Drag & drop or click to upload (.mp4)</p>
+                        </div>
+                    </div>
+                    <!-- Upload Zone: After Video -->
+                    <div class="upload-box" id="upload-after-zone">
+                        <input type="file" id="video-after" name="video_after" accept="video/mp4" class="file-input">
+                        <div class="upload-content">
+                            <i class="fa-solid fa-cloud-arrow-up upload-icon after-icon"></i>
+                            <h3>After Renting Video</h3>
+                            <p class="file-name-display" id="after-file-name">Drag & drop or click to upload (.mp4)</p>
+                        </div>
+                    </div>
+                    <!-- Action buttons -->
+                    <div class="actions">
+                        <button type="submit" id="upload-btn" class="btn btn-primary">
+                            <i class="fa-solid fa-arrow-up-from-bracket"></i> Upload Videos
+                        </button>
+                        <button type="button" id="start-btn" class="btn btn-accent btn-disabled" disabled>
+                            <i class="fa-solid fa-play"></i> Run Asset Evaluation
+                        </button>
+                        <button type="button" id="reset-btn" class="btn btn-danger">
+                            <i class="fa-solid fa-rotate-left"></i> Reset
+                        </button>
+                    </div>
+                </form>
+                <!-- Processing Screen / Status details -->
+                <div class="processing-overlay hidden" id="processing-view">
+                    <div class="progress-container">
+                        <div class="spinner">
+                            <div class="double-bounce1"></div>
+                            <div class="double-bounce2"></div>
+                        </div>
+                        <h2>Evaluating Apartment Videos</h2>
+                        <p id="progress-status">Starting up SAM 2 tracker...</p>
+                        <div class="progress-bar-bg">
+                            <div class="progress-bar-fill" id="progress-fill" style="width: 0%;"></div>
+                        </div>
+                        <span class="progress-percentage" id="progress-pct">0%</span>
+                    </div>
+                </div>
+            </section>
+            <!-- Right Side: Results & Video Outputs -->
+            <section class="card results-card">
+                <h2 class="section-title"><i class="fa-solid fa-chart-line"></i> Evaluation Report</h2>
+                <!-- Welcome/Placeholder Message -->
+                <div class="placeholder-msg" id="results-placeholder">
+                    <i class="fa-solid fa-wand-magic-sparkles placeholder-icon"></i>
+                    <h3>No Active Evaluation</h3>
+                    <p>Upload your apartment condition videos (Before & After renting) on the left panel, configure the asset prompts, and run the evaluation to generate the report.</p>
+                </div>
+                <!-- Main results view -->
+                <div class="results-content hidden" id="results-view">
+                    <!-- Summary Dashboard Banner -->
+                    <div id="summary-banner" class="summary-banner"></div>
+                    <!-- Video streams side by side -->
+                    <div class="videos-comparison-grid">
+                        <div class="video-container">
+                            <h4><i class="fa-solid fa-circle-dot text-success"></i> Before Renting Tracker</h4>
+                            <video id="out-video-before" controls src="" type="video/mp4"></video>
+                        </div>
+                        <div class="video-container">
+                            <h4><i class="fa-solid fa-circle-dot text-danger"></i> After Renting Tracker</h4>
+                            <video id="out-video-after" controls src="" type="video/mp4"></video>
+                        </div>
+                    </div>
+                    <!-- Condition Report Cards -->
+                    <div class="report-section">
+                        <h3><i class="fa-solid fa-clipboard-check"></i> Asset Comparison Details</h3>
+                        <div class="asset-cards-grid" id="asset-cards-container">
+                            <!-- Populated dynamically by javascript -->
+                        </div>
+                    </div>
+                </div>
+            </section>
+        </main>
+    </div>
+    <!-- Main JS script -->
+    <script src="/static/js/main.js"></script>
+</body>
+</html>

main.js ADDED Viewed

	@@ -0,0 +1,458 @@

+document.addEventListener('DOMContentLoaded', () => {
+    // DOM Elements
+    const uploadForm = document.getElementById('upload-form');
+    const promptInput = document.getElementById('prompt-input');
+    const beforeInput = document.getElementById('video-before');
+    const afterInput = document.getElementById('video-after');
+    const beforeZone = document.getElementById('upload-before-zone');
+    const afterZone = document.getElementById('upload-after-zone');
+    const beforeFileName = document.getElementById('before-file-name');
+    const afterFileName = document.getElementById('after-file-name');
+    const speedModeSelect = document.getElementById('speed-mode-select');
+    const fpsSelect = document.getElementById('fps-select');
+    const geminiKeyInput = document.getElementById('gemini-key-input');
+    const uploadBtn = document.getElementById('upload-btn');
+    const startBtn = document.getElementById('start-btn');
+    const resetBtn = document.getElementById('reset-btn');
+    const processingView = document.getElementById('processing-view');
+    const progressStatus = document.getElementById('progress-status');
+    const progressFill = document.getElementById('progress-fill');
+    const progressPct = document.getElementById('progress-pct');
+    const backendStatusText = document.getElementById('backend-status-text');
+    const resultsPlaceholder = document.getElementById('results-placeholder');
+    const resultsView = document.getElementById('results-view');
+    const outVideoBefore = document.getElementById('out-video-before');
+    const outVideoAfter = document.getElementById('out-video-after');
+    const assetCardsContainer = document.getElementById('asset-cards-container');
+    let pollInterval = null;
+    // --- Load saved Gemini API Key ---
+    const savedKey = localStorage.getItem('gemini_api_key');
+    if (savedKey) {
+        geminiKeyInput.value = savedKey;
+    }
+    // --- File Drag & Drop Listeners ---
+    setupDragAndDrop(beforeZone, beforeInput, beforeFileName, "Before Renting Video Selected");
+    setupDragAndDrop(afterZone, afterInput, afterFileName, "After Renting Video Selected");
+    function setupDragAndDrop(zone, input, display, successMsg) {
+        zone.addEventListener('click', () => input.click());
+        input.addEventListener('change', (e) => {
+            if (input.files.length > 0) {
+                display.textContent = `${input.files[0].name} (${(input.files[0].size / 1e6).toFixed(1)} MB)`;
+                zone.style.borderColor = 'var(--success)';
+            }
+        });
+        zone.addEventListener('dragover', (e) => {
+            e.preventDefault();
+            zone.classList.add('drag-over');
+        });
+        zone.addEventListener('dragleave', () => {
+            zone.classList.remove('drag-over');
+        });
+        zone.addEventListener('drop', (e) => {
+            e.preventDefault();
+            zone.classList.remove('drag-over');
+            if (e.dataTransfer.files.length > 0) {
+                input.files = e.dataTransfer.files;
+                display.textContent = `${input.files[0].name} (${(input.files[0].size / 1e6).toFixed(1)} MB)`;
+                zone.style.borderColor = 'var(--success)';
+            }
+        });
+    }
+    // --- Upload Videos ---
+    uploadForm.addEventListener('submit', async (e) => {
+        e.preventDefault();
+        if (beforeInput.files.length === 0 || afterInput.files.length === 0) {
+            alert('Please select both "Before" and "After" renting videos first.');
+            return;
+        }
+        const prompt = promptInput.value.trim();
+        if (!prompt) {
+            alert('Please define target inspection items prompt.');
+            return;
+        }
+        const formData = new FormData();
+        formData.append('video_before', beforeInput.files[0]);
+        formData.append('video_after', afterInput.files[0]);
+        formData.append('prompt', prompt);
+        try {
+            uploadBtn.disabled = true;
+            uploadBtn.innerHTML = '<i class="fa-solid fa-spinner fa-spin"></i> Uploading...';
+            backendStatusText.textContent = "Uploading videos...";
+            const response = await fetch('/upload', {
+                method: 'POST',
+                body: formData
+            });
+            const data = await response.json();
+            if (!response.ok) {
+                throw new Error(data.error || 'Upload failed.');
+            }
+            uploadBtn.innerHTML = '<i class="fa-solid fa-check"></i> Uploaded!';
+            uploadBtn.style.background = 'var(--success)';
+            // Enable Start button
+            startBtn.removeAttribute('disabled');
+            startBtn.classList.remove('btn-disabled');
+            backendStatusText.textContent = "Ready to analyze";
+            alert('Videos uploaded successfully. You can now start the evaluation.');
+        } catch (error) {
+            console.error(error);
+            alert(`Error: ${error.message}`);
+            uploadBtn.disabled = false;
+            uploadBtn.innerHTML = '<i class="fa-solid fa-arrow-up-from-bracket"></i> Upload Videos';
+            backendStatusText.textContent = "Upload failed";
+        }
+    });
+    // --- Start Tracking / Evaluation ---
+    startBtn.addEventListener('click', async () => {
+        const prompt = promptInput.value.trim();
+        const geminiKey = geminiKeyInput.value.trim();
+        const speedMode = speedModeSelect.value;
+        const fps = fpsSelect.value;
+        // Securely cache Gemini API key in browser
+        if (geminiKey) {
+            localStorage.setItem('gemini_api_key', geminiKey);
+        } else {
+            localStorage.removeItem('gemini_api_key');
+        }
+        try {
+            startBtn.disabled = true;
+            startBtn.classList.add('btn-disabled');
+            processingView.classList.remove('hidden');
+            backendStatusText.textContent = "Running evaluation...";
+            const response = await fetch('/process', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify({
+                    prompt: prompt,
+                    gemini_api_key: geminiKey,
+                    speed_mode: speedMode,
+                    fps: parseFloat(fps)
+                })
+            });
+            const data = await response.json();
+            if (!response.ok) {
+                throw new Error(data.error || 'Failed to start process.');
+            }
+            // Start polling status
+            startStatusPolling();
+        } catch (error) {
+            console.error(error);
+            alert(`Error: ${error.message}`);
+            processingView.classList.add('hidden');
+            startBtn.disabled = false;
+            startBtn.classList.remove('btn-disabled');
+            backendStatusText.textContent = "Error occurred";
+        }
+    });
+    // --- Reset ---
+    resetBtn.addEventListener('click', async () => {
+        if (confirm('Are you sure you want to reset and clear all data?')) {
+            try {
+                await fetch('/reset', { method: 'POST' });
+                // Clear intervals
+                clearInterval(pollInterval);
+                pollInterval = null;
+                // Reset inputs and displays
+                uploadForm.reset();
+                beforeInput.value = '';
+                afterInput.value = '';
+                beforeZone.style.borderColor = 'var(--border-color)';
+                afterZone.style.borderColor = 'var(--border-color)';
+                beforeFileName.textContent = 'Drag & drop or click to upload (.mp4)';
+                afterFileName.textContent = 'Drag & drop or click to upload (.mp4)';
+                // Retain Gemini Key
+                const savedKey = localStorage.getItem('gemini_api_key');
+                if (savedKey) {
+                    geminiKeyInput.value = savedKey;
+                }
+                uploadBtn.disabled = false;
+                uploadBtn.innerHTML = '<i class="fa-solid fa-arrow-up-from-bracket"></i> Upload Videos';
+                uploadBtn.style.background = 'var(--primary)';
+                startBtn.disabled = true;
+                startBtn.classList.add('btn-disabled');
+                processingView.classList.add('hidden');
+                resultsView.classList.add('hidden');
+                resultsPlaceholder.classList.remove('hidden');
+                outVideoBefore.src = '';
+                outVideoAfter.src = '';
+                assetCardsContainer.innerHTML = '';
+                backendStatusText.textContent = "System Ready";
+            } catch (error) {
+                console.error(error);
+                alert('Reset failed.');
+            }
+        }
+    });
+    // --- Status Polling ---
+    function startStatusPolling() {
+        if (pollInterval) clearInterval(pollInterval);
+        pollInterval = setInterval(async () => {
+            try {
+                const response = await fetch('/status');
+                const data = await response.json();
+                if (data.error) {
+                    clearInterval(pollInterval);
+                    alert(`Evaluation Error: ${data.error}`);
+                    processingView.classList.add('hidden');
+                    startBtn.disabled = false;
+                    startBtn.classList.remove('btn-disabled');
+                    backendStatusText.textContent = "Analysis Failed";
+                    return;
+                }
+                // Update progress overlay
+                progressStatus.textContent = data.status;
+                progressFill.style.width = `${data.percent}%`;
+                progressPct.textContent = `${data.percent}%`;
+                if (!data.running && data.percent === 100 && data.result) {
+                    clearInterval(pollInterval);
+                    pollInterval = null;
+                    displayResults(data.result);
+                }
+            } catch (error) {
+                console.error('Polling error:', error);
+            }
+        }, 1500);
+    }
+    // --- Display Results ---
+    function displayResults(result) {
+        // Hide processing and placeholder
+        processingView.classList.add('hidden');
+        resultsPlaceholder.classList.add('hidden');
+        resultsView.classList.remove('hidden');
+        backendStatusText.textContent = "Evaluation Complete";
+        // Render Summary Banner
+        const summaryBanner = document.getElementById('summary-banner');
+        if (summaryBanner && result.summary) {
+            const s = result.summary;
+            // Format elapsed time (e.g. "45.2s" or "1m 15s")
+            let timeStr = "";
+            if (s.elapsed_time < 60) {
+                timeStr = `${s.elapsed_time}s`;
+            } else {
+                const mins = Math.floor(s.elapsed_time / 60);
+                const secs = Math.round(s.elapsed_time % 60);
+                timeStr = `${mins}m ${secs}s`;
+            }
+            // Compensation judgment logic: if any item is Missing or Damaged, tenant must pay compensation
+            const compensationRequired = (s.statuses.Missing || 0) > 0 || (s.statuses["Potential Damage / Altered"] || 0) > 0;
+            const verdictTitle = compensationRequired ? "Tenant Must Pay Compensation" : "No Compensation Required";
+            const verdictColor = compensationRequired ? "var(--danger)" : "var(--success)";
+            const verdictIcon = compensationRequired ? "fa-solid fa-circle-exclamation" : "fa-solid fa-circle-check";
+            const verdictDesc = compensationRequired
+                ? "Damage or missing assets detected. Tenant is liable for compensation."
+                : "All tracked assets are intact. No compensation required.";
+            // Create unique list of all discovered item labels
+            const uniqueLabels = Array.from(new Set([...s.before_items, ...s.after_items]));
+            const labelsHtml = uniqueLabels.length > 0
+                ? uniqueLabels.map(lbl => `<span class="discovered-tag">${lbl}</span>`).join('')
+                : '<span class="text-secondary">None</span>';
+            summaryBanner.innerHTML = `
+                <div class="summary-card highlight" style="grid-column: span 2; border-color: ${verdictColor}; background: linear-gradient(135deg, rgba(20, 24, 33, 0.85), ${compensationRequired ? 'rgba(255, 82, 82, 0.05)' : 'rgba(0, 219, 139, 0.05)'});">
+                    <span class="summary-card-val" style="color: ${verdictColor}; font-size: 1.35rem; display: flex; align-items: center; gap: 8px;">
+                        <i class="${verdictIcon}"></i> ${verdictTitle}
+                    </span>
+                    <span class="summary-card-label" style="margin-top: 5px;">AI Final Verdict</span>
+                    <span style="font-size: 0.82rem; color: var(--text-secondary); margin-top: 4px; line-height: 1.3;">${verdictDesc}</span>
+                </div>
+                <div class="summary-card">
+                    <span class="summary-card-val time">${timeStr}</span>
+                    <span class="summary-card-label">Time Taken</span>
+                </div>
+                <div class="summary-card">
+                    <span class="summary-card-val before">${s.total_before}</span>
+                    <span class="summary-card-label">Assets (Before)</span>
+                </div>
+                <div class="summary-card">
+                    <span class="summary-card-val after">${s.total_after}</span>
+                    <span class="summary-card-label">Assets (After)</span>
+                </div>
+                <div class="summary-card">
+                    <span class="summary-card-val missing">${s.statuses.Missing || 0}</span>
+                    <span class="summary-card-label">Missing Items</span>
+                </div>
+                <div class="summary-card">
+                    <span class="summary-card-val" style="color: var(--warning);">${s.statuses["Potential Damage / Altered"] || 0}</span>
+                    <span class="summary-card-label">Damaged Items</span>
+                </div>
+                <div class="summary-card">
+                    <span class="summary-card-val" style="color: var(--success);">${(s.statuses.Intact || 0) + (s.statuses["Fair / Minor Change"] || 0)}</span>
+                    <span class="summary-card-label">Intact / Fair</span>
+                </div>
+                <div class="discovered-labels-list">
+                    <strong><i class="fa-solid fa-list-check"></i> Discovered Items:</strong>
+                    ${labelsHtml}
+                </div>
+            `;
+        }
+        // Set video sources (add timestamp parameter to bypass browser cache)
+        const t = new Date().getTime();
+        outVideoBefore.src = `${result.annotated_before}?t=${t}`;
+        outVideoAfter.src = `${result.annotated_after}?t=${t}`;
+        outVideoBefore.load();
+        outVideoAfter.load();
+        // Render Asset Cards
+        assetCardsContainer.innerHTML = '';
+        result.report.forEach(item => {
+            const card = document.createElement('div');
+            card.className = 'asset-card';
+            // Top Row of card: Info, Crops, and Status
+            const mainDiv = document.createElement('div');
+            mainDiv.className = 'asset-card-main';
+            // 1. Info section
+            const infoDiv = document.createElement('div');
+            infoDiv.className = 'asset-info';
+            const labelH3 = document.createElement('h3');
+            labelH3.className = 'asset-label';
+            labelH3.textContent = item.label;
+            const scoreSpan = document.createElement('span');
+            scoreSpan.className = 'asset-score';
+            scoreSpan.textContent = item.before_crop && item.after_crop ? `Similarity: ${item.similarity}%` : '';
+            infoDiv.appendChild(labelH3);
+            infoDiv.appendChild(scoreSpan);
+            mainDiv.appendChild(infoDiv);
+            // 2. Before Crop
+            const beforeCropDiv = createCropView(item.before_crop, "Before");
+            mainDiv.appendChild(beforeCropDiv);
+            // 3. After Crop
+            const afterCropDiv = createCropView(item.after_crop, "After");
+            mainDiv.appendChild(afterCropDiv);
+            // 4. Status Badge
+            const badgeDiv = document.createElement('div');
+            const badge = document.createElement('span');
+            badge.className = `status-badge ${getBadgeClass(item.status)}`;
+            badge.textContent = item.status;
+            badgeDiv.appendChild(badge);
+            mainDiv.appendChild(badgeDiv);
+            card.appendChild(mainDiv);
+            // Bottom Row of card: Explanation (AI-generated or fallback)
+            if (item.explanation) {
+                const explanationDiv = document.createElement('div');
+                explanationDiv.className = 'asset-explanation';
+                const icon = document.createElement('i');
+                // Use robot icon if Gemini was used, sparkles icon if local CV fallback was used
+                icon.className = item.ai_evaluated ? 'fa-solid fa-robot explanation-icon' : 'fa-solid fa-wand-magic-sparkles explanation-icon';
+                const textSpan = document.createElement('span');
+                textSpan.textContent = item.explanation;
+                explanationDiv.appendChild(icon);
+                explanationDiv.appendChild(textSpan);
+                card.appendChild(explanationDiv);
+            }
+            assetCardsContainer.appendChild(card);
+        });
+    }
+    function createCropView(src, label) {
+        const container = document.createElement('div');
+        container.className = 'crop-img-container';
+        const title = document.createElement('span');
+        title.textContent = label;
+        container.appendChild(title);
+        const frame = document.createElement('div');
+        frame.className = 'crop-frame';
+        if (src) {
+            const img = document.createElement('img');
+            // Add cache-busting timestamp
+            img.src = `${src}?t=${new Date().getTime()}`;
+            img.alt = label;
+            frame.appendChild(img);
+        } else {
+            const icon = document.createElement('i');
+            icon.className = 'fa-solid fa-circle-question crop-missing-icon';
+            frame.appendChild(icon);
+        }
+        container.appendChild(frame);
+        return container;
+    }
+    function getBadgeClass(status) {
+        switch (status) {
+            case 'Intact':
+                return 'badge-intact';
+            case 'Fair / Minor Change':
+                return 'badge-fair';
+            case 'Potential Damage / Altered':
+                return 'badge-damaged';
+            case 'Missing':
+                return 'badge-missing';
+            case 'New Item':
+                return 'badge-new';
+            default:
+                return '';
+        }
+    }
+});

styles.css ADDED Viewed

	@@ -0,0 +1,843 @@

+/* CSS Variables for Premium Aesthetics */
+:root {
+    --bg-dark: #0a0c10;
+    --bg-card: rgba(20, 24, 33, 0.65);
+    --border-color: rgba(255, 255, 255, 0.08);
+    --border-focus: rgba(124, 77, 255, 0.4);
+    --text-primary: #f1f3f9;
+    --text-secondary: #909bb4;
+    --text-disabled: #4e5566;
+    --primary: #6c5ce7;
+    --primary-hover: #5b4bc4;
+    --accent: #00cec9;
+    --accent-hover: #00b5b0;
+    --success: #00db8b;
+    --warning: #ff9f43;
+    --danger: #ff5252;
+    --info: #0984e3;
+    --font-main: 'Outfit', sans-serif;
+    --font-mono: 'Space Grotesk', sans-serif;
+    --radius-sm: 8px;
+    --radius-md: 16px;
+    --radius-lg: 24px;
+    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+/* Reset */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+body {
+    background-color: var(--bg-dark);
+    color: var(--text-primary);
+    font-family: var(--font-main);
+    overflow-x: hidden;
+    min-height: 100vh;
+    display: flex;
+    justify-content: center;
+    position: relative;
+}
+/* Glassmorphism Background elements */
+.glass-bg {
+    position: absolute;
+    width: 600px;
+    height: 600px;
+    background: radial-gradient(circle, rgba(108, 92, 231, 0.12) 0%, rgba(0, 206, 201, 0.05) 50%, rgba(0,0,0,0) 100%);
+    top: -10%;
+    right: -10%;
+    z-index: -1;
+    filter: blur(80px);
+    pointer-events: none;
+}
+/* App Container */
+.app-container {
+    width: 100%;
+    max-width: 1600px;
+    padding: 30px;
+    display: flex;
+    flex-direction: column;
+    gap: 30px;
+    z-index: 1;
+}
+/* Header */
+.app-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 10px 20px;
+    background: var(--bg-card);
+    backdrop-filter: blur(12px);
+    border: 1px solid var(--border-color);
+    border-radius: var(--radius-md);
+    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
+}
+.logo {
+    display: flex;
+    align-items: center;
+    gap: 15px;
+}
+.logo-icon {
+    font-size: 2.5rem;
+    background: linear-gradient(135deg, var(--primary), var(--accent));
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+}
+.logo-text h1 {
+    font-size: 1.5rem;
+    font-weight: 700;
+    letter-spacing: -0.5px;
+}
+.logo-text span {
+    font-size: 0.85rem;
+    color: var(--text-secondary);
+}
+.status-indicator {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    background: rgba(255, 255, 255, 0.04);
+    padding: 8px 16px;
+    border-radius: 50px;
+    border: 1px solid var(--border-color);
+    font-family: var(--font-mono);
+    font-size: 0.9rem;
+}
+.pulse-dot {
+    width: 10px;
+    height: 10px;
+    background-color: var(--success);
+    border-radius: 50%;
+    box-shadow: 0 0 0 0 rgba(0, 219, 139, 0.7);
+    animation: pulse 1.6s infinite;
+}
+/* Grid Layout */
+.app-grid {
+    display: grid;
+    grid-template-columns: 450px 1fr;
+    gap: 30px;
+    align-items: start;
+}
+@media (max-width: 1100px) {
+    .app-grid {
+        grid-template-columns: 1fr;
+    }
+}
+/* Cards */
+.card {
+    background: var(--bg-card);
+    backdrop-filter: blur(12px);
+    border: 1px solid var(--border-color);
+    border-radius: var(--radius-md);
+    padding: 30px;
+    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.25);
+    position: relative;
+    transition: var(--transition);
+}
+.card:hover {
+    border-color: rgba(255, 255, 255, 0.12);
+}
+.config-card {
+    min-height: 500px;
+}
+.results-card {
+    min-height: 700px;
+    display: flex;
+    flex-direction: column;
+}
+.section-title {
+    font-size: 1.25rem;
+    font-weight: 600;
+    margin-bottom: 25px;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    border-bottom: 1px solid var(--border-color);
+    padding-bottom: 12px;
+}
+/* Input Fields */
+.input-group {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    margin-bottom: 20px;
+}
+.input-group label {
+    font-size: 0.95rem;
+    font-weight: 500;
+    color: var(--text-primary);
+    display: flex;
+    align-items: center;
+    gap: 6px;
+}
+textarea {
+    width: 100%;
+    background: rgba(0, 0, 0, 0.25);
+    border: 1px solid var(--border-color);
+    border-radius: var(--radius-sm);
+    color: var(--text-primary);
+    padding: 12px;
+    font-family: var(--font-main);
+    font-size: 0.95rem;
+    line-height: 1.5;
+    resize: vertical;
+    transition: var(--transition);
+}
+textarea:focus {
+    outline: none;
+    border-color: var(--primary);
+    box-shadow: 0 0 0 3px rgba(108, 92, 231, 0.15);
+}
+/* Upload boxes */
+.upload-box {
+    border: 2px dashed var(--border-color);
+    border-radius: var(--radius-md);
+    padding: 24px;
+    text-align: center;
+    position: relative;
+    margin-bottom: 20px;
+    cursor: pointer;
+    background: rgba(255, 255, 255, 0.01);
+    transition: var(--transition);
+}
+.upload-box:hover {
+    border-color: var(--primary);
+    background: rgba(108, 92, 231, 0.02);
+}
+.upload-box.drag-over {
+    border-color: var(--accent);
+    background: rgba(0, 206, 201, 0.05);
+}
+.file-input {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    opacity: 0;
+    cursor: pointer;
+}
+.upload-icon {
+    font-size: 2.2rem;
+    margin-bottom: 12px;
+    transition: var(--transition);
+}
+.before-icon {
+    color: var(--accent);
+}
+.after-icon {
+    color: var(--primary);
+}
+.upload-box:hover .upload-icon {
+    transform: translateY(-4px);
+}
+.upload-box h3 {
+    font-size: 1.05rem;
+    font-weight: 500;
+    margin-bottom: 6px;
+}
+.upload-box p {
+    font-size: 0.85rem;
+    color: var(--text-secondary);
+}
+/* Buttons */
+.actions {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    margin-top: 25px;
+}
+.btn {
+    width: 100%;
+    padding: 14px;
+    border: none;
+    border-radius: var(--radius-sm);
+    font-family: var(--font-main);
+    font-size: 1rem;
+    font-weight: 600;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 10px;
+    transition: var(--transition);
+}
+.btn-primary {
+    background: var(--primary);
+    color: #fff;
+}
+.btn-primary:hover:not(:disabled) {
+    background: var(--primary-hover);
+}
+.btn-accent {
+    background: var(--accent);
+    color: #0a0c10;
+}
+.btn-accent:hover:not(:disabled) {
+    background: var(--accent-hover);
+}
+.btn-danger {
+    background: transparent;
+    border: 1px solid var(--danger);
+    color: var(--danger);
+}
+.btn-danger:hover:not(:disabled) {
+    background: rgba(255, 82, 82, 0.1);
+}
+.btn-disabled, .btn:disabled {
+    background: var(--text-disabled) !important;
+    color: var(--text-secondary) !important;
+    cursor: not-allowed;
+    opacity: 0.5;
+}
+/* Tooltips */
+.tooltip {
+    cursor: pointer;
+    color: var(--text-secondary);
+    font-size: 0.85rem;
+    position: relative;
+}
+/* Processing Overlay Screen */
+.processing-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(10, 12, 16, 0.95);
+    border-radius: var(--radius-md);
+    z-index: 10;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 40px;
+    animation: fadeIn 0.3s ease-in-out;
+}
+.progress-container {
+    width: 100%;
+    max-width: 380px;
+    text-align: center;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 15px;
+}
+.progress-container h2 {
+    font-size: 1.4rem;
+    font-weight: 600;
+}
+.progress-container p {
+    font-size: 0.95rem;
+    color: var(--text-secondary);
+    min-height: 44px;
+}
+.progress-bar-bg {
+    width: 100%;
+    height: 8px;
+    background: rgba(255, 255, 255, 0.08);
+    border-radius: 10px;
+    overflow: hidden;
+    margin-top: 10px;
+}
+.progress-bar-fill {
+    height: 100%;
+    background: linear-gradient(90deg, var(--accent), var(--primary));
+    border-radius: 10px;
+    transition: width 0.4s ease;
+}
+.progress-percentage {
+    font-family: var(--font-mono);
+    font-size: 1.5rem;
+    font-weight: 700;
+    color: var(--accent);
+}
+/* Results Placeholder */
+.placeholder-msg {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    max-width: 500px;
+    margin: 100px auto;
+    gap: 15px;
+}
+.placeholder-icon {
+    font-size: 4rem;
+    background: linear-gradient(135deg, var(--accent), var(--primary));
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    margin-bottom: 10px;
+}
+.placeholder-msg h3 {
+    font-size: 1.4rem;
+    font-weight: 600;
+}
+.placeholder-msg p {
+    font-size: 0.95rem;
+    color: var(--text-secondary);
+    line-height: 1.6;
+}
+/* Active Results Content */
+.results-content {
+    display: flex;
+    flex-direction: column;
+    gap: 30px;
+    animation: fadeIn 0.4s ease-in-out;
+}
+/* Video side-by-side comparison */
+.videos-comparison-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 20px;
+}
+@media (max-width: 768px) {
+    .videos-comparison-grid {
+        grid-template-columns: 1fr;
+    }
+}
+.video-container {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+}
+.video-container h4 {
+    font-size: 0.95rem;
+    font-weight: 600;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+.video-container video {
+    width: 100%;
+    border-radius: var(--radius-sm);
+    border: 1px solid var(--border-color);
+    background: #000;
+    aspect-ratio: 16/9;
+    object-fit: contain;
+}
+/* Report Section */
+.report-section {
+    display: flex;
+    flex-direction: column;
+    gap: 15px;
+}
+.report-section h3 {
+    font-size: 1.2rem;
+    font-weight: 600;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding-bottom: 8px;
+    border-bottom: 1px solid var(--border-color);
+}
+/* Dynamic Cards Grid */
+.asset-cards-grid {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+}
+/* Glassmorphic asset detail card */
+.asset-card {
+    background: rgba(255, 255, 255, 0.02);
+    border: 1px solid var(--border-color);
+    border-radius: var(--radius-md);
+    padding: 20px;
+    display: grid;
+    grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
+    align-items: center;
+    gap: 20px;
+    transition: var(--transition);
+}
+.asset-card:hover {
+    background: rgba(255, 255, 255, 0.04);
+    transform: translateY(-2px);
+    border-color: rgba(255, 255, 255, 0.15);
+}
+.asset-info {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+}
+.asset-label {
+    font-size: 1.2rem;
+    font-weight: 600;
+    text-transform: capitalize;
+}
+.asset-score {
+    font-family: var(--font-mono);
+    font-size: 0.9rem;
+    color: var(--text-secondary);
+}
+/* Crop image frame */
+.crop-img-container {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    align-items: center;
+}
+.crop-img-container span {
+    font-size: 0.75rem;
+    color: var(--text-secondary);
+}
+.crop-frame {
+    width: 90px;
+    height: 90px;
+    border-radius: var(--radius-sm);
+    border: 1px solid var(--border-color);
+    background: rgba(0,0,0,0.3);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    position: relative;
+}
+.crop-frame img {
+    max-width: 100%;
+    max-height: 100%;
+    object-fit: cover;
+}
+.crop-missing-icon {
+    font-size: 1.8rem;
+    color: var(--text-disabled);
+}
+/* Badge Status Styles */
+.status-badge {
+    padding: 8px 16px;
+    border-radius: 50px;
+    font-size: 0.85rem;
+    font-weight: 600;
+    text-align: center;
+    display: inline-block;
+    width: fit-content;
+}
+.badge-intact {
+    background: rgba(0, 219, 139, 0.12);
+    color: var(--success);
+    border: 1px solid rgba(0, 219, 139, 0.2);
+}
+.badge-fair {
+    background: rgba(255, 159, 67, 0.12);
+    color: var(--warning);
+    border: 1px solid rgba(255, 159, 67, 0.2);
+}
+.badge-damaged {
+    background: rgba(255, 82, 82, 0.12);
+    color: var(--danger);
+    border: 1px solid rgba(255, 82, 82, 0.2);
+}
+.badge-missing {
+    background: rgba(255, 82, 82, 0.12);
+    color: var(--danger);
+    border: 1px solid rgba(255, 82, 82, 0.2);
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+}
+.badge-new {
+    background: rgba(9, 132, 227, 0.12);
+    color: var(--info);
+    border: 1px solid rgba(9, 132, 227, 0.2);
+}
+/* Spinner Animation */
+.spinner {
+    width: 60px;
+    height: 60px;
+    position: relative;
+    margin: 20px auto;
+}
+.double-bounce1, .double-bounce2 {
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    background-color: var(--accent);
+    opacity: 0.6;
+    position: absolute;
+    top: 0;
+    left: 0;
+    animation: bounce 2.0s infinite ease-in-out;
+}
+.double-bounce2 {
+    background-color: var(--primary);
+    animation-delay: -1.0s;
+}
+/* Helpers */
+.hidden {
+    display: none !important;
+}
+.text-success { color: var(--success); }
+.text-danger { color: var(--danger); }
+/* Keyframe Animations */
+@keyframes pulse {
+    0% {
+        box-shadow: 0 0 0 0 rgba(0, 219, 139, 0.4);
+    }
+    70% {
+        box-shadow: 0 0 0 10px rgba(0, 219, 139, 0);
+    }
+    100% {
+        box-shadow: 0 0 0 0 rgba(0, 219, 139, 0);
+    }
+}
+@keyframes bounce {
+    0%, 100% {
+        transform: scale(0.0);
+    } 50% {
+        transform: scale(1.0);
+    }
+}
+@keyframes fadeIn {
+    from { opacity: 0; transform: translateY(10px); }
+    to { opacity: 1; transform: translateY(0); }
+}
+/* Settings, Select and Inputs */
+.settings-row {
+    display: flex;
+    gap: 15px;
+    width: 100%;
+}
+.settings-row .half {
+    flex: 1;
+}
+.styled-select, .styled-input {
+    width: 100%;
+    background: rgba(0, 0, 0, 0.25);
+    border: 1px solid var(--border-color);
+    border-radius: var(--radius-sm);
+    color: var(--text-primary);
+    padding: 10px 12px;
+    font-family: var(--font-main);
+    font-size: 0.9rem;
+    transition: var(--transition);
+}
+.styled-select:focus, .styled-input:focus {
+    outline: none;
+    border-color: var(--primary);
+    box-shadow: 0 0 0 3px rgba(108, 92, 231, 0.15);
+}
+/* Card layout update for AI Explanations */
+.asset-card {
+    background: rgba(255, 255, 255, 0.02);
+    border: 1px solid var(--border-color);
+    border-radius: var(--radius-md);
+    padding: 20px;
+    display: flex;
+    flex-direction: column;
+    gap: 15px;
+    transition: var(--transition);
+}
+.asset-card-main {
+    display: grid;
+    grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
+    align-items: center;
+    gap: 20px;
+    width: 100%;
+}
+.asset-explanation {
+    font-size: 0.9rem;
+    color: var(--text-secondary);
+    border-top: 1px dashed var(--border-color);
+    padding-top: 12px;
+    margin-top: 2px;
+    line-height: 1.5;
+    display: flex;
+    align-items: flex-start;
+    gap: 8px;
+}
+.explanation-icon {
+    color: var(--accent);
+    margin-top: 3px;
+    font-size: 0.95rem;
+}
+/* Summary Dashboard Banner styling */
+.summary-banner {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+    gap: 15px;
+    width: 100%;
+    margin-bottom: 25px;
+    animation: fadeIn 0.5s ease-out;
+}
+.summary-card {
+    background: rgba(255, 255, 255, 0.02);
+    border: 1px solid var(--border-color);
+    border-radius: var(--radius-md);
+    padding: 18px 15px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    gap: 5px;
+    transition: var(--transition);
+}
+.summary-card:hover {
+    transform: translateY(-2px);
+    border-color: rgba(255, 255, 255, 0.15);
+    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+}
+.summary-card.highlight {
+    background: linear-gradient(135deg, rgba(108, 92, 231, 0.06), rgba(0, 206, 201, 0.04));
+    border-color: rgba(108, 92, 231, 0.2);
+}
+.summary-card-val {
+    font-size: 1.8rem;
+    font-weight: 700;
+    color: var(--text-primary);
+    font-family: var(--font-mono);
+}
+.summary-card-val.time {
+    color: var(--accent);
+    text-shadow: 0 0 10px rgba(0, 206, 201, 0.2);
+}
+.summary-card-val.before {
+    color: var(--success);
+}
+.summary-card-val.after {
+    color: var(--warning);
+}
+.summary-card-val.missing {
+    color: var(--danger);
+}
+.summary-card-label {
+    font-size: 0.75rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    color: var(--text-secondary);
+}
+.discovered-labels-list {
+    grid-column: 1 / -1;
+    background: rgba(255, 255, 255, 0.01);
+    border: 1px dashed var(--border-color);
+    border-radius: var(--radius-sm);
+    padding: 12px 18px;
+    text-align: left;
+    font-size: 0.85rem;
+    color: var(--text-secondary);
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 8px;
+}
+.discovered-tag {
+    background: rgba(255, 255, 255, 0.05);
+    border: 1px solid var(--border-color);
+    border-radius: 50px;
+    padding: 2px 10px;
+    font-size: 0.8rem;
+    color: var(--text-primary);
+    font-family: var(--font-mono);
+}