Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1" /> | |
| <title>DiffLens - Revolutionary File Comparison Tool</title> | |
| <link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 24 24' fill='none' stroke='%230ea5e9' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3Cline x1='16' y1='13' x2='8' y2='13'/%3E%3Cline x1='16' y1='17' x2='8' y2='17'/%3E%3Cpolyline points='10 9 9 9 8 9'/%3E%3Ccircle cx='12' cy='12' r='3' fill='%230ea5e9'/%3E%3C/svg%3E" /> | |
| <link rel="stylesheet" href="style.css" /> | |
| </head> | |
| <body> | |
| <header class="app-header"> | |
| <div class="brand"> | |
| <span class="logo">🔬</span> | |
| <h1>DiffLens</h1> | |
| <span class="tagline">Multi-Dimensional File Comparison</span> | |
| </div> | |
| <div class="header-actions"> | |
| <div class="search-container"> | |
| <input type="text" id="searchInput" placeholder="Search in diffs..." class="search-input" /> | |
| <button id="searchBtn" class="search-btn" title="Search"> | |
| <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> | |
| <circle cx="11" cy="11" r="8"/> | |
| <path d="m21 21-4.35-4.35"/> | |
| </svg> | |
| </button> | |
| </div> | |
| <div class="comparison-modes"> | |
| <select id="comparisonMode" class="mode-select" title="Comparison Mode"> | |
| <option value="standard">Standard Diff</option> | |
| <option value="semantic">Semantic Analysis</option> | |
| <option value="structural">Structural Compare</option> | |
| <option value="visual">Visual Diff</option> | |
| </select> | |
| </div> | |
| <div class="view-controls"> | |
| <button id="layoutBtn" class="btn-ghost" title="Toggle Layout" aria-label="Toggle Layout"> | |
| <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> | |
| <rect x="3" y="3" width="18" height="18" rx="2" ry="2"/> | |
| <line x1="9" y1="9" x2="15" y2="9"/> | |
| <line x1="9" y1="15" x2="15" y2="15"/> | |
| </svg> | |
| </button> | |
| <button id="wordDiffBtn" class="btn-ghost" title="Toggle Word-level Diff" aria-label="Toggle Word-level Diff"> | |
| <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> | |
| <path d="M4 20h8"/> | |
| <path d="M12 20h8"/> | |
| <path d="M4 4h8"/> | |
| <path d="M12 4h8"/> | |
| <path d="M4 12h8"/> | |
| <path d="M12 12h8"/> | |
| </svg> | |
| </button> | |
| </div> | |
| <button class="btn-info" id="infoBtn" title="How DiffLens works" aria-label="How DiffLens works"> | |
| <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> | |
| <circle cx="12" cy="12" r="10"/> | |
| <path d="m9,12l2,2l4,-4"/> | |
| </svg> | |
| </button> | |
| <div class="toggles"> | |
| <label class="switch" title="Sync scrolling"> | |
| <input type="checkbox" id="syncScroll" checked /> | |
| <span class="slider"></span> | |
| <span class="switch-label">Sync scroll</span> | |
| </label> | |
| <label class="switch" title="Ignore whitespace-only changes"> | |
| <input type="checkbox" id="ignoreWs" /> | |
| <span class="slider"></span> | |
| <span class="switch-label">Ignore whitespace</span> | |
| </label> | |
| <label class="switch" title="Enhanced semantic analysis"> | |
| <input type="checkbox" id="semanticMode" /> | |
| <span class="slider"></span> | |
| <span class="switch-label">Semantic mode</span> | |
| </label> | |
| </div> | |
| </div> | |
| </header> | |
| <section class="controls"> | |
| <div class="file-block" data-side="left"> | |
| <div class="block-header"> | |
| <strong>File A</strong> | |
| <div class="file-actions"> | |
| <input type="file" id="fileLeft" accept=".txt,.js,.ts,.json,.md,.css,.html,.xml,.yml,.yaml,.csv,.ini,.py,.rb,.go,.java,.c,.h,.cpp,.cs,.sql,.log,.conf" multiple /> | |
| <button class="btn secondary" id="pasteLeftBtn" type="button">Paste</button> | |
| <button class="btn ghost" id="addFileLeftBtn" type="button" title="Add multiple files">+</button> | |
| </div> | |
| </div> | |
| <div class="textarea-wrap hidden" id="pasteLeftWrap"> | |
| <textarea id="textLeft" placeholder="Paste contents of File A here..." spellcheck="false"></textarea> | |
| <div class="paste-actions"> | |
| <button class="btn" id="applyLeftText" type="button">Use Pasted A</button> | |
| <button class="btn ghost" id="cancelLeftText" type="button">Cancel</button> | |
| </div> | |
| </div> | |
| <div class="file-summary" id="leftSummary">No file selected.</div> | |
| <div class="multi-file-list hidden" id="multiFileListLeft"></div> | |
| </div> | |
| <div class="file-block" data-side="right"> | |
| <div class="block-header"> | |
| <strong>File B</strong> | |
| <div class="file-actions"> | |
| <input type="file" id="fileRight" accept=".txt,.js,.ts,.json,.md,.css,.html,.xml,.yml,.yaml,.csv,.ini,.py,.rb,.go,.java,.c,.h,.cpp,.cs,.sql,.log,.conf" multiple /> | |
| <button class="btn secondary" id="pasteRightBtn" type="button">Paste</button> | |
| <button class="btn ghost" id="addFileRightBtn" type="button" title="Add multiple files">+</button> | |
| </div> | |
| </div> | |
| <div class="textarea-wrap hidden" id="pasteRightWrap"> | |
| <textarea id="textRight" placeholder="Paste contents of File B here..." spellcheck="false"></textarea> | |
| <div class="paste-actions"> | |
| <button class="btn" id="applyRightText" type="button">Use Pasted B</button> | |
| <button class="btn ghost" id="cancelRightText" type="button">Cancel</button> | |
| </div> | |
| </div> | |
| <div class="file-summary" id="rightSummary">No file selected.</div> | |
| <div class="multi-file-list hidden" id="multiFileListRight"></div> | |
| </div> | |
| </section> | |
| <section class="enhanced-stats" id="enhancedStats" hidden> | |
| <div class="stats-grid"> | |
| <div class="stat-card"> | |
| <div class="stat-icon added">+</div> | |
| <div class="stat-content"> | |
| <span class="label">Added Lines</span> | |
| <span class="value" id="statAdded">0</span> | |
| </div> | |
| </div> | |
| <div class="stat-card"> | |
| <div class="stat-icon deleted">-</div> | |
| <div class="stat-content"> | |
| <span class="label">Deleted Lines</span> | |
| <span class="value" id="statDeleted">0</span> | |
| </div> | |
| </div> | |
| <div class="stat-card"> | |
| <div class="stat-icon modified">≈</div> | |
| <div class="stat-content"> | |
| <span class="label">Modified Lines</span> | |
| <span class="value" id="statModified">0</span> | |
| </div> | |
| </div> | |
| <div class="stat-card"> | |
| <div class="stat-icon moved">↔</div> | |
| <div class="stat-content"> | |
| <span class="label">Moved Lines</span> | |
| <span class="value" id="statMoved">0</span> | |
| </div> | |
| </div> | |
| <div class="stat-card"> | |
| <div class="stat-icon semantic">🧠</div> | |
| <div class="stat-content"> | |
| <span class="label">Semantic Changes</span> | |
| <span class="value" id="statSemantic">0</span> | |
| </div> | |
| </div> | |
| <div class="stat-card"> | |
| <div class="stat-icon complexity">📊</div> | |
| <div class="stat-content"> | |
| <span class="label">Change Complexity</span> | |
| <span class="value" id="statComplexity">Low</span> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <section class="comparison-toolbar" id="comparisonToolbar"> | |
| <div class="toolbar-section"> | |
| <h4>Comparison Mode</h4> | |
| <div class="mode-buttons"> | |
| <button class="mode-btn active" data-mode="standard">Standard</button> | |
| <button class="mode-btn" data-mode="side-by-side">Side-by-Side</button> | |
| <button class="mode-btn" data-mode="inline">Inline</button> | |
| <button class="mode-btn" data-mode="unified">Unified</button> | |
| </div> | |
| </div> | |
| <div class="toolbar-section"> | |
| <h4>Analysis Features</h4> | |
| <div class="feature-toggles"> | |
| <button id="toggleHeatmap" class="feature-btn">Heatmap</button> | |
| <button id="toggleMinimap" class="feature-btn">Minimap</button> | |
| <button id="toggleStructure" class="feature-btn">Structure</button> | |
| <button id="toggleSemantics" class="feature-btn">Semantics</button> | |
| </div> | |
| </div> | |
| <div class="toolbar-section"> | |
| <h4>Actions</h4> | |
| <div class="action-buttons"> | |
| <button class="action-btn" id="acceptAllBtn">Accept All</button> | |
| <button class="action-btn" id="rejectAllBtn">Reject All</button> | |
| <button class="action-btn" id="exportBtn">Export Diff</button> | |
| <button class="action-btn" id="reportBtn">Generate Report</button> | |
| </div> | |
| </div> | |
| </section> | |
| <section class="analytics" id="analytics" hidden> | |
| <div class="analytics-header"> | |
| <h3>📊 Advanced Change Analytics</h3> | |
| <div class="analytics-controls"> | |
| <button id="analyticsToggleHeatmap" class="btn ghost small">Toggle Heatmap</button> | |
| <button id="analyticsToggleMinimap" class="btn ghost small">Toggle Minimap</button> | |
| <button id="analyticsToggleStructure" class="btn ghost small">Toggle Structure View</button> | |
| </div> | |
| </div> | |
| <div class="analytics-content"> | |
| <div class="chart-container"> | |
| <h4>Change Distribution & Trends</h4> | |
| <div class="bar-chart" id="changeChart"></div> | |
| <div class="trend-chart" id="trendChart"></div> | |
| </div> | |
| <div class="analysis-panels"> | |
| <div class="change-heatmap" id="changeHeatmap"></div> | |
| <div class="semantic-analysis" id="semanticAnalysis"></div> | |
| <div class="structural-analysis" id="structuralAnalysis"></div> | |
| </div> | |
| </div> | |
| </section> | |
| <main class="diff-container"> | |
| <div class="pane-wrapper" id="paneWrapper"> | |
| <div class="pane" id="paneLeft" aria-label="File A"> | |
| <div class="pane-header"> | |
| <h2>File A</h2> | |
| <span class="file-meta" id="metaLeft"></span> | |
| <div class="pane-actions"> | |
| <button class="pane-btn" id="acceptLeftBtn" title="Accept changes in File A">Accept</button> | |
| <button class="pane-btn" id="rejectLeftBtn" title="Reject changes in File A">Reject</button> | |
| </div> | |
| </div> | |
| <div class="code-wrap"> | |
| <table class="code"> | |
| <tbody id="tbodyLeft"></tbody> | |
| </table> | |
| </div> | |
| </div> | |
| <div class="pane" id="paneRight" aria-label="File B"> | |
| <div class="pane-header"> | |
| <h2>File B</h2> | |
| <span class="file-meta" id="metaRight"></span> | |
| <div class="pane-actions"> | |
| <button class="pane-btn" id="acceptRightBtn" title="Accept changes in File B">Accept</button> | |
| <button class="pane-btn" id="rejectRightBtn" title="Reject changes in File B">Reject</button> | |
| </div> | |
| </div> | |
| <div class="code-wrap"> | |
| <table class="code"> | |
| <tbody id="tbodyRight"></tbody> | |
| </table> | |
| </div> | |
| </div> | |
| <div class="line-connectors" id="lineConnectors"></div> | |
| <div class="visual-overlay" id="visualOverlay"></div> | |
| </div> | |
| </main> | |
| <aside class="minimap" id="minimap" hidden> | |
| <div class="minimap-header"> | |
| <h4>Advanced Diff Overview</h4> | |
| <div class="minimap-controls"> | |
| <select id="minimapMode" class="minimap-select"> | |
| <option value="changes">Changes</option> | |
| <option value="structure">Structure</option> | |
| <option value="semantics">Semantics</option> | |
| </select> | |
| </div> | |
| </div> | |
| <div class="minimap-content" id="minimapContent"> | |
| <!-- Minimap will be generated here --> | |
| </div> | |
| </aside> | |
| <footer class="app-footer"> | |
| <small>DiffLens - Revolutionary multi-dimensional file comparison. Use the comparison modes above to explore different analysis types. Click the accept/reject buttons to interact with changes directly.</small> | |
| </footer> | |
| <!-- Enhanced Modal --> | |
| <div class="modal-overlay hidden" id="modalOverlay"> | |
| <div class="modal"> | |
| <div class="modal-header"> | |
| <h3>DiffLens - Revolutionary File Comparison</h3> | |
| <button class="modal-close" id="modalClose" aria-label="Close modal"> | |
| <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> | |
| <line x1="18" y1="6" x2="6" y2="18"/> | |
| <line x1="6" y1="6" x2="18" y2="18"/> | |
| </svg> | |
| </button> | |
| </div> | |
| <div class="modal-content"> | |
| <div class="modal-section"> | |
| <h4>🔬 Multi-Dimensional Comparison Technology</h4> | |
| <p>DiffLens revolutionizes file comparison through innovative multi-dimensional analysis:</p> | |
| <ul> | |
| <li><strong>Standard Diff:</strong> Traditional line-by-line comparison with enhanced accuracy</li> | |
| <li><strong>Semantic Analysis:</strong> AI-powered understanding of code meaning and context</li> | |
| <li><strong>Structural Comparison:</strong> Analysis of syntax trees and data structure changes</li> | |
| <li><strong>Visual Diff:</strong> Graphical representation of differences for layout-sensitive content</li> | |
| <li><strong>Historical Analysis:</strong> Change pattern recognition and trend identification</li> | |
| </ul> | |
| </div> | |
| <div class="modal-section"> | |
| <h4>⚡ Advanced Features</h4> | |
| <ul> | |
| <li><strong>Interactive Comparison:</strong> Accept, reject, or modify changes directly in the interface</li> | |
| <li><strong>Contextual Information:</strong> Rich metadata about change nature and impact</li> | |
| <li><strong>Multi-File Analysis:</strong> Compare multiple files simultaneously with relationship mapping</li> | |
| <li><strong>Customizable Views:</strong> Tailor the comparison experience to your workflow</li> | |
| <li><strong>Enhanced Accuracy:</strong> Reduce errors with multi-dimensional validation</li> | |
| </ul> | |
| </div> | |
| <div class="modal-section"> | |
| <h4>🎯 Real-World Applications</h4> | |
| <ul> | |
| <li><strong>Software Development:</strong> Advanced code review with semantic understanding</li> | |
| <li><strong>Data Analysis:</strong> Dataset comparison with structural and semantic awareness</li> | |
| <li><strong>Document Collaboration:</strong> Intelligent document merging with context preservation</li> | |
| <li><strong>Version Control Integration:</strong> Enhanced Git/VCS workflows with deeper insights</li> | |
| </ul> | |
| </div> | |
| <div class="modal-section"> | |
| <h4>🔧 Technical Innovation</h4> | |
| <p>DiffLens combines traditional LCS algorithms with cutting-edge AI analysis, semantic understanding, and structural parsing to provide unprecedented accuracy in file comparison. The system adapts its analysis approach based on file type and content characteristics.</p> | |
| </div> | |
| <div class="modal-section"> | |
| <h4>💡 Best Practices</h4> | |
| <ul> | |
| <li>Use <strong>Semantic Mode</strong> for code analysis and context-aware comparison</li> | |
| <li>Enable <strong>Structural Analysis</strong> for data files and structured content</li> | |
| <li>Leverage <strong>Visual Diff</strong> for layout-sensitive documents and designs</li> | |
| <li>Use <strong>Interactive Features</strong> to make decisions directly in the comparison view</li> | |
| <li>Generate <strong>Comparison Reports</strong> for documentation and review purposes</li> | |
| </ul> | |
| </div> | |
| <div class="modal-section"> | |
| <h4>⌨️ Keyboard Shortcuts</h4> | |
| <ul> | |
| <li><strong>Ctrl/Cmd + F</strong> - Focus search box</li> | |
| <li><strong>Ctrl/Cmd + S</strong> - Export diff as HTML</li> | |
| <li><strong>F3 / Enter</strong> - Navigate to next search result (Shift for previous)</li> | |
| <li><strong>Alt + ↓</strong> - Jump to next change</li> | |
| <li><strong>Alt + ↑</strong> - Jump to previous change</li> | |
| <li><strong>Escape</strong> - Close modal / Clear search</li> | |
| <li><strong>Double-click</strong> - Copy line to clipboard</li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script src="script.js"></script> | |
| <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> | |
| </body> | |
| </html> | |