Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>TraceScene — Visual Intelligence for Law Enforcement</title> | |
| <meta name="description" | |
| content="AI-powered accident scene analysis: upload photos, detect traffic violations, determine fault."> | |
| <!-- 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=Inter:wght@300;400;500;600;700&family=Outfit:wght@400;600;700&display=swap" | |
| rel="stylesheet"> | |
| <!-- Icons --> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <!-- Styles --> | |
| <link rel="stylesheet" href="css/styles.css"> | |
| </head> | |
| <body> | |
| <div class="app-container"> | |
| <!-- Sidebar --> | |
| <aside class="sidebar glass"> | |
| <div class="brand"> | |
| <i class="fa-solid fa-shield-halved"></i> | |
| <h1>TraceScene</h1> | |
| </div> | |
| <nav class="nav-menu"> | |
| <button class="nav-item active" data-view="landing"> | |
| <i class="fa-solid fa-home"></i> Home | |
| </button> | |
| <div class="nav-section-title">Law Enforcement</div> | |
| <button class="nav-item" data-view="le-dashboard"> | |
| <i class="fa-solid fa-chart-line"></i> Dashboard | |
| </button> | |
| <button class="nav-item" data-view="le-new-case"> | |
| <i class="fa-solid fa-shield-halved"></i> New Case | |
| </button> | |
| <div class="nav-section-title">Insurance</div> | |
| <button class="nav-item" data-view="ins-dashboard"> | |
| <i class="fa-solid fa-chart-line"></i> Dashboard | |
| </button> | |
| <button class="nav-item" data-view="ins-new-case"> | |
| <i class="fa-solid fa-file-invoice-dollar"></i> New Case | |
| </button> | |
| <div class="nav-divider"></div> | |
| <button class="nav-item" data-view="rules"> | |
| <i class="fa-solid fa-book-open"></i> Traffic Rules | |
| </button> | |
| </nav> | |
| <!-- Sidebar: Founder (collapsible) --> | |
| <div class="sidebar-collapsible"> | |
| <button class="sidebar-collapse-btn" aria-expanded="false" | |
| onclick="this.parentElement.classList.toggle('open'); this.setAttribute('aria-expanded', this.parentElement.classList.contains('open'))"> | |
| <span><i class="fa-solid fa-user-tie"></i> Built by</span> | |
| <i class="fa-solid fa-chevron-down sidebar-collapse-icon"></i> | |
| </button> | |
| <div class="sidebar-collapse-body"> | |
| <div class="sidebar-collapse-content"> | |
| <a href="https://www.linkedin.com/in/siddharth-ravikumar-17262a50/" target="_blank" | |
| rel="noopener noreferrer" class="sidebar-linkedin"> | |
| <i class="fa-brands fa-linkedin"></i> LinkedIn | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Sidebar: Contact (collapsible) --> | |
| <div class="sidebar-collapsible"> | |
| <button class="sidebar-collapse-btn" aria-expanded="false" | |
| onclick="this.parentElement.classList.toggle('open'); this.setAttribute('aria-expanded', this.parentElement.classList.contains('open'))"> | |
| <span><i class="fa-solid fa-envelope"></i> Request Demo</span> | |
| <i class="fa-solid fa-chevron-down sidebar-collapse-icon"></i> | |
| </button> | |
| <div class="sidebar-collapse-body"> | |
| <div class="sidebar-collapse-content"> | |
| <a href="mailto:tracescene@zohomail.ae" class="sidebar-contact-link"> | |
| <i class="fa-solid fa-at"></i> tracescene@zohomail.ae | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="status-panel"> | |
| <div class="status-item"> | |
| <span class="status-label">Model</span> | |
| <span class="status-value" id="status-model">Loading...</span> | |
| </div> | |
| <div class="status-item"> | |
| <span class="status-label">Device</span> | |
| <span class="status-value" id="status-device">—</span> | |
| </div> | |
| <div class="status-item"> | |
| <span class="status-label">Rules</span> | |
| <span class="status-value" id="status-rules">—</span> | |
| </div> | |
| </div> | |
| <div class="disclaimer-badge"> | |
| <i class="fa-solid fa-triangle-exclamation"></i> | |
| <span>AI Advisory Only</span> | |
| </div> | |
| </aside> | |
| <!-- Main Content --> | |
| <main class="main-content"> | |
| <!-- Landing Page View --> | |
| <section id="view-landing" class="view active"> | |
| <div class="landing-hero"> | |
| <h1 class="landing-title">TraceScene</h1> | |
| <h2 class="landing-subtitle">Edge AI for Accident Intelligence — Fully Offline. Fully Private.</h2> | |
| <p class="landing-description"> | |
| Edge-based AI enables powerful reasoning, and real-time physical world analysis directly on edge | |
| devices custom-trained in specialized physical conditions for accurate accident analysis and | |
| Insurance Verification—all fully offline and privacy-preserving, with no data leaving the device | |
| </p> | |
| </div> | |
| <div class="landing-use-cases"> | |
| <h3 class="use-cases-title">Cross-Vertical Use Cases: From Intelligence to Implementation</h3> | |
| <div class="accordion-container"> | |
| <!-- Law Enforcement --> | |
| <div class="accordion-item glass"> | |
| <button class="accordion-header" aria-expanded="false"> | |
| <span><i class="fa-solid fa-shield-halved"></i> Law Enforcement and Public Safety</span> | |
| <i class="fa-solid fa-chevron-down accordion-icon"></i> | |
| </button> | |
| <div class="accordion-body"> | |
| <div class="accordion-content"> | |
| <p><strong>Automated Incident Reporting:</strong> Field officers capture a 30-second | |
| scene walkthrough. The engine determines causality (e.g., "Vehicle A rear-ended | |
| Vehicle B due to wet road conditions") and | |
| auto-generates a structured First Information Report (FIR) instantly.</p> | |
| <p><strong>Rule-Book Verification:</strong> Insights are matched against the UAE | |
| Federal Traffic rulebook to identify violations like Article 18 tailgating or | |
| signal jumping.</p> | |
| <p><strong>Forensic Reconstructions:</strong> Generates "frozen-in-time" 3D digital | |
| twins and evidence maps locally on mobile NPUs.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Insurance --> | |
| <div class="accordion-item glass"> | |
| <button class="accordion-header" aria-expanded="false"> | |
| <span><i class="fa-solid fa-file-invoice-dollar"></i> Insurance and Claims | |
| Management</span> | |
| <i class="fa-solid fa-chevron-down accordion-icon"></i> | |
| </button> | |
| <div class="accordion-body"> | |
| <div class="accordion-content"> | |
| <p><strong>Verified Local Law Mapping:</strong> Automatically cross-references | |
| visual evidence | |
| against the UAE Federal Traffic Law (e.g., Article 18 for tailgating or Article | |
| 12 for accident assistance) to determine fault based on objective legal | |
| standards rather than human estimation.</p> | |
| <p><strong>Real-Time Reasoning vs. Manual Verification:</strong> Shifts the | |
| adjuster's | |
| workflow from "Collect-then-Verify" to an Analyze-while-Collecting model. | |
| Real-time physical-AI analyzes impact trajectories and debris patterns to | |
| justify or flag claims instantly.</p> | |
| <p><strong>Auto-Filled Insurance Pointers:</strong> Uses document intelligence to | |
| instantly extract data from Emirates IDs, Mulkiya cards, and police reports, | |
| converting them into structured JSON to auto-populate mandatory claim fields. | |
| </p> | |
| <p><strong>Rapid Triage and settlement:</strong> Reduces the average UAE claims | |
| lifecycle from 15 days to minutes by automating the intake and verification of | |
| accident photos.</p> | |
| <p><strong>Fraud Shielding and CBUAE 2026 Compliance:</strong> Identifies suspicious | |
| patterns that contradict the reported scene context. Every reasoning deduction | |
| is | |
| linked to an auditable Evidence Map (linking frame coordinates to specific law | |
| articles) as mandated by 2026 Central Bank guidelines on AI transparency.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Real Estate & Legal Removed for Alternative UI --> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- LE Dashboard View --> | |
| <section id="view-le-dashboard" class="view hidden"> | |
| <div class="view-header"> | |
| <h2><i class="fa-solid fa-chart-line"></i> Active Cases</h2> | |
| <button class="btn-secondary" id="btn-refresh-cases"> | |
| <i class="fa-solid fa-rotate-right"></i> | |
| </button> | |
| </div> | |
| <div id="le-cases-grid" class="cases-grid"> | |
| <!-- Cases injected here --> | |
| </div> | |
| <div id="le-empty-state-dashboard" class="empty-state"> | |
| <i class="fa-solid fa-folder-open"></i> | |
| <h3>No Cases Yet</h3> | |
| <p>Create a new case to begin accident analysis.</p> | |
| <button class="btn-primary" id="btn-le-empty-new-case"> | |
| <i class="fa-solid fa-plus"></i> Create First Case | |
| </button> | |
| </div> | |
| </section> | |
| <!-- LE New Case View --> | |
| <section id="view-le-new-case" class="view hidden"> | |
| <div class="view-header"> | |
| <h2><i class="fa-solid fa-plus-circle"></i> New Accident Case</h2> | |
| </div> | |
| <div class="form-container glass"> | |
| <div class="form-grid"> | |
| <div class="form-group"> | |
| <label for="case-number">Case / Incident Number *</label> | |
| <input type="text" id="case-number" placeholder="e.g., ACC-2026-001"> | |
| </div> | |
| <div class="form-group"> | |
| <label for="officer-name">Officer Name</label> | |
| <input type="text" id="officer-name" placeholder="e.g., Officer Smith"> | |
| </div> | |
| <div class="form-group"> | |
| <label for="incident-location">Location</label> | |
| <input type="text" id="incident-location" placeholder="e.g., Main St & 5th Ave"> | |
| </div> | |
| <div class="form-group"> | |
| <label for="incident-date">Incident Date</label> | |
| <input type="date" id="incident-date"> | |
| </div> | |
| <div class="form-group full-width"> | |
| <label for="officer-notes">Officer Notes</label> | |
| <textarea id="officer-notes" rows="3" | |
| placeholder="Initial observations, weather conditions, etc."></textarea> | |
| </div> | |
| </div> | |
| <div class="drop-zone" id="drop-zone"> | |
| <i class="fa-solid fa-camera"></i> | |
| <p>Drag & drop accident scene photos here</p> | |
| <span class="sub-text">or click to browse • Max 20 photos • JPG, PNG, WebP</span> | |
| <input type="file" id="file-input" multiple accept="image/*" capture="environment" hidden> | |
| </div> | |
| <div id="photo-preview" class="photo-preview hidden"> | |
| <div id="photo-thumbnails" class="photo-thumbnails"></div> | |
| <span id="photo-count" class="photo-count">0 photos selected</span> | |
| </div> | |
| <div class="form-actions"> | |
| <button class="btn-primary btn-large" id="btn-create-case" disabled> | |
| <i class="fa-solid fa-shield-halved"></i> Create Case & Upload Photos | |
| </button> | |
| </div> | |
| <div id="upload-progress" class="progress-section hidden"> | |
| <div class="progress-bar"> | |
| <div class="progress-fill" id="upload-progress-fill"></div> | |
| </div> | |
| <span id="upload-status-text">Uploading photos...</span> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- INS Dashboard View --> | |
| <section id="view-ins-dashboard" class="view hidden"> | |
| <div class="view-header"> | |
| <h2><i class="fa-solid fa-chart-line"></i> Active Cases</h2> | |
| <button class="btn-secondary" id="btn-refresh-cases-ins"> | |
| <i class="fa-solid fa-rotate-right"></i> | |
| </button> | |
| </div> | |
| <div id="ins-cases-grid" class="cases-grid"> | |
| <!-- Cases injected here --> | |
| </div> | |
| <div id="ins-empty-state-dashboard" class="empty-state"> | |
| <i class="fa-solid fa-folder-open"></i> | |
| <h3>No Cases Yet</h3> | |
| <p>Create a new case to begin accident analysis.</p> | |
| <button class="btn-primary" id="btn-ins-empty-new-case"> | |
| <i class="fa-solid fa-plus"></i> Create First Case | |
| </button> | |
| </div> | |
| </section> | |
| <!-- INS New Case View --> | |
| <section id="view-ins-new-case" class="view hidden"> | |
| <div class="view-header"> | |
| <h2><i class="fa-solid fa-plus-circle"></i> New Accident Case</h2> | |
| </div> | |
| <div class="form-container glass"> | |
| <div class="form-grid"> | |
| <div class="form-group"> | |
| <label for="ins-case-number">Case / Incident Number *</label> | |
| <input type="text" id="ins-case-number" placeholder="e.g., ACC-2026-001"> | |
| </div> | |
| <div class="form-group"> | |
| <label for="ins-officer-name">Adjuster Name</label> | |
| <input type="text" id="ins-officer-name" placeholder="e.g., Adjuster Smith"> | |
| </div> | |
| <div class="form-group"> | |
| <label for="ins-incident-location">Location</label> | |
| <input type="text" id="ins-incident-location" placeholder="e.g., Main St & 5th Ave"> | |
| </div> | |
| <div class="form-group"> | |
| <label for="ins-incident-date">Incident Date</label> | |
| <input type="date" id="ins-incident-date"> | |
| </div> | |
| <div class="form-group full-width"> | |
| <label for="ins-officer-notes">Adjuster Notes</label> | |
| <textarea id="ins-officer-notes" rows="3" | |
| placeholder="Initial observations, weather conditions, etc."></textarea> | |
| </div> | |
| </div> | |
| <div class="drop-zone" id="ins-drop-zone"> | |
| <i class="fa-solid fa-camera"></i> | |
| <p>Drag & drop accident scene photos here</p> | |
| <span class="sub-text">or click to browse • Max 20 photos • JPG, PNG, WebP</span> | |
| <input type="file" id="ins-file-input" multiple accept="image/*" capture="environment" hidden> | |
| </div> | |
| <div id="ins-photo-preview" class="photo-preview hidden"> | |
| <div id="ins-photo-thumbnails" class="photo-thumbnails"></div> | |
| <span id="ins-photo-count" class="photo-count">0 photos selected</span> | |
| </div> | |
| <div class="form-actions"> | |
| <button class="btn-primary btn-large" id="btn-ins-create-case" disabled> | |
| <i class="fa-solid fa-file-invoice-dollar"></i> Create Case & Upload Photos | |
| </button> | |
| </div> | |
| <div id="ins-upload-progress" class="progress-section hidden"> | |
| <div class="progress-bar"> | |
| <div class="progress-fill" id="ins-upload-progress-fill"></div> | |
| </div> | |
| <span id="ins-upload-status-text">Uploading photos...</span> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Case Detail View --> | |
| <section id="view-case-detail" class="view hidden"> | |
| <div class="view-header"> | |
| <button class="btn-back" id="btn-back-dashboard"> | |
| <i class="fa-solid fa-arrow-left"></i> | |
| </button> | |
| <h2 id="case-detail-title">Case Details</h2> | |
| <div class="header-actions"> | |
| <button class="btn-primary" id="btn-run-analysis" disabled> | |
| <i class="fa-solid fa-brain"></i> Run AI Analysis | |
| </button> | |
| <button class="btn-secondary" id="btn-edit-case"> | |
| <i class="fa-solid fa-pen-to-square"></i> Edit | |
| </button> | |
| <button class="btn-secondary" id="btn-view-report" disabled> | |
| <i class="fa-solid fa-file-lines"></i> View Report | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Case Info Bar --> | |
| <div class="case-info-bar glass"> | |
| <div class="info-chip"> | |
| <i class="fa-solid fa-hashtag"></i> | |
| <span id="detail-case-number">—</span> | |
| </div> | |
| <div class="info-chip"> | |
| <i class="fa-solid fa-user-shield"></i> | |
| <span id="detail-officer">—</span> | |
| </div> | |
| <div class="info-chip"> | |
| <i class="fa-solid fa-location-dot"></i> | |
| <span id="detail-location">—</span> | |
| </div> | |
| <div class="info-chip"> | |
| <i class="fa-solid fa-calendar"></i> | |
| <span id="detail-date">—</span> | |
| </div> | |
| <div class="info-chip status-chip" id="detail-status-chip"> | |
| <i class="fa-solid fa-circle"></i> | |
| <span id="detail-status">—</span> | |
| </div> | |
| </div> | |
| <!-- Analysis Panels --> | |
| <div class="analysis-grid"> | |
| <!-- Photo Gallery Panel --> | |
| <div class="panel glass" id="panel-photos"> | |
| <div class="panel-header"> | |
| <h3><i class="fa-solid fa-images"></i> Scene Photos</h3> | |
| <div class="panel-actions"> | |
| <span class="badge" id="photo-badge">0</span> | |
| <button class="btn-icon-sm" id="btn-add-photos-inline" title="Add Photos"> | |
| <i class="fa-solid fa-plus"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div id="detail-photos-grid" class="detail-photos-grid"> | |
| <!-- Photo thumbnails injected here --> | |
| </div> | |
| </div> | |
| <!-- Scene Analysis Panel --> | |
| <div class="panel glass" id="panel-analysis"> | |
| <div class="panel-header"> | |
| <h3><i class="fa-solid fa-eye"></i> Scene Analysis</h3> | |
| </div> | |
| <div id="analysis-content" class="analysis-content"> | |
| <p class="placeholder-text">Run analysis to see AI observations.</p> | |
| </div> | |
| </div> | |
| <!-- Violations Panel --> | |
| <div class="panel glass" id="panel-violations"> | |
| <div class="panel-header"> | |
| <h3><i class="fa-solid fa-gavel"></i> Violations Detected</h3> | |
| <span class="badge danger" id="violation-badge">0</span> | |
| </div> | |
| <div id="violations-list" class="violations-list"> | |
| <p class="placeholder-text">No violations detected yet.</p> | |
| </div> | |
| </div> | |
| <!-- Fault Analysis Panel --> | |
| <div class="panel glass" id="panel-fault"> | |
| <div class="panel-header"> | |
| <h3><i class="fa-solid fa-scale-balanced"></i> Fault Analysis</h3> | |
| </div> | |
| <div id="fault-content" class="fault-content"> | |
| <p class="placeholder-text">Run analysis to determine fault.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Analysis Progress Overlay --> | |
| <div id="analysis-overlay" class="analysis-overlay hidden"> | |
| <div class="overlay-content glass"> | |
| <div class="spinner-large"></div> | |
| <h3 id="analysis-step">Analyzing scene photos...</h3> | |
| <p id="analysis-detail">This may take a few minutes depending on the number of photos.</p> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Report View --> | |
| <section id="view-report" class="view hidden"> | |
| <div class="view-header"> | |
| <button class="btn-back" id="btn-back-case"> | |
| <i class="fa-solid fa-arrow-left"></i> | |
| </button> | |
| <h2><i class="fa-solid fa-file-lines"></i> Incident Report</h2> | |
| </div> | |
| <div id="report-content" class="report-content glass"> | |
| <!-- Report injected here --> | |
| </div> | |
| </section> | |
| <!-- Rules View --> | |
| <section id="view-rules" class="view hidden"> | |
| <div class="view-header"> | |
| <h2><i class="fa-solid fa-book-open"></i> Traffic Rules Reference</h2> | |
| </div> | |
| <div id="rules-content" class="rules-content"> | |
| <!-- Rules injected here --> | |
| </div> | |
| </section> | |
| </main> | |
| </div> | |
| <!-- Toast Container --> | |
| <div id="toast-container"></div> | |
| <!-- Edit Case Modal --> | |
| <div id="modal-edit-case" class="modal hidden"> | |
| <div class="modal-content glass"> | |
| <div class="modal-header"> | |
| <h2><i class="fa-solid fa-pen-to-square"></i> Edit Case Details</h2> | |
| <button class="btn-close" id="btn-close-edit-modal">×</button> | |
| </div> | |
| <div class="modal-body"> | |
| <div class="form-grid"> | |
| <div class="form-group"> | |
| <label for="edit-officer-name">Officer Name</label> | |
| <input type="text" id="edit-officer-name" placeholder="e.g., Officer Smith"> | |
| </div> | |
| <div class="form-group"> | |
| <label for="edit-incident-location">Location</label> | |
| <input type="text" id="edit-incident-location" placeholder="e.g., Main St & 5th Ave"> | |
| </div> | |
| <div class="form-group"> | |
| <label for="edit-incident-date">Incident Date</label> | |
| <input type="date" id="edit-incident-date"> | |
| </div> | |
| <div class="form-group full-width"> | |
| <label for="edit-officer-notes">Officer Notes</label> | |
| <textarea id="edit-officer-notes" rows="4" placeholder="Update observations..."></textarea> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="modal-footer"> | |
| <button class="btn-secondary" id="btn-cancel-edit">Cancel</button> | |
| <button class="btn-primary" id="btn-save-case">Save Changes</button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Add Photos Modal/Overlay --> | |
| <div id="modal-add-photos" class="modal hidden"> | |
| <div class="modal-content glass"> | |
| <div class="modal-header"> | |
| <h2><i class="fa-solid fa-images"></i> Add More Photos</h2> | |
| <button class="btn-close" id="btn-close-photos-modal">×</button> | |
| </div> | |
| <div class="modal-body"> | |
| <div class="drop-zone" id="edit-drop-zone"> | |
| <i class="fa-solid fa-camera"></i> | |
| <p>Drag & drop additional photos here</p> | |
| <span class="sub-text">or click to browse</span> | |
| <input type="file" id="edit-file-input" multiple accept="image/*" capture="environment" hidden> | |
| </div> | |
| <div id="edit-photo-preview" class="photo-preview hidden"> | |
| <div id="edit-photo-thumbnails" class="photo-thumbnails"></div> | |
| <span id="edit-photo-count" class="photo-count">0 photos selected</span> | |
| </div> | |
| <div id="edit-upload-progress" class="progress-section hidden"> | |
| <div class="progress-bar"> | |
| <div class="progress-fill" id="edit-upload-progress-fill"></div> | |
| </div> | |
| <span id="edit-upload-status-text">Uploading photos...</span> | |
| </div> | |
| </div> | |
| <div class="modal-footer"> | |
| <button class="btn-secondary" id="btn-cancel-photos">Cancel</button> | |
| <button class="btn-primary" id="btn-upload-more" disabled>Upload Photos</button> | |
| </div> | |
| </div> | |
| </div> | |
| <script src="js/alt_app.js"></script> | |
| </body> | |
| </html> |