Spaces:

Meroar
/

filediff-viewer

Running

App Files Files Community

Meroar commited on Nov 4, 2025

Commit

b4a9186

verified ·

1 Parent(s): c238fdf

DiffLens is a revolutionary file comparison tool designed to compare files in innovative ways, addressing the limitations of traditional diff viewers. It offers a range of features that enhance the comparison experience, including:

Browse files

Key Features:

1. **Multi-Dimensional Comparison**: Compare files across multiple dimensions, including structure, content, and change history.
2. **Visual Diff**: Graphically represent differences between files, useful for graphical or layout-sensitive content.
3. **Interactive Comparison**: Engage with differences directly, accepting, rejecting, or modifying changes within the app.
4. **Contextual Information**: Provide context about differences, including the nature of changes and reasoning behind them.
5. **Integration with Development Tools**: Seamlessly integrate with popular version control systems and development environments.
6. **Customizable Views**: Tailor the comparison experience to user preferences, adjusting layout, highlighting differences, and displaying detail levels.

Benefits:

1. **Enhanced Productivity**: Streamline the comparison process, saving time and effort.
2. **Improved Accuracy**: Reduce errors with detailed, multi-dimensional comparisons.
3. **Better Decision Making**: Make informed decisions with a clearer understanding of differences between files.

Advanced Features:

1. **Structural Comparison**: Compare structural elements of files, such as syntax trees or data structures.
2. **Semantic Diff**: Analyze the meaning and context of code or data to identify semantically significant changes.
3. **Multi-File Comparison**: Compare multiple files simultaneously, toggling between comparison modes and visualizing relationships.

Real-World Applications:

1. **Software Development**: Compare code versions, track changes, and identify potential bugs.
2. **Data Analysis**: Compare datasets, identify trends, and visualize changes over time.
3. **Document Collaboration**: Compare document versions, track changes, and ensure consistency.

By utilizing DiffLens, users can save time, improve accuracy, and enhance collaboration, making it a valuable tool for developers, data analysts, and document collaborators.

Files changed (1) hide show

index.html +193 -63

index.html CHANGED Viewed

@@ -3,15 +3,16 @@
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <title>FileDiff Viewer</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%3C/svg%3E" />
   <link rel="stylesheet" href="style.css" />
 </head>
 <body>
   <header class="app-header">
     <div class="brand">
-      <span class="logo">≋</span>
-      <h1>FileDiff Viewer</h1>
     </div>
     <div class="header-actions">
       <div class="search-container">
@@ -24,24 +25,61 @@
         </button>
       </div>
-      <button class="btn-info" id="infoBtn" title="How it works" aria-label="How it 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>
-      <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>
     </div>
 </header>
 <section class="controls">
@@ -49,8 +87,9 @@
       <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" />
           <button class="btn secondary" id="pasteLeftBtn" type="button">Paste</button>
         </div>
       </div>
@@ -63,14 +102,16 @@
       </div>
       <div class="file-summary" id="leftSummary">No file selected.</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" />
           <button class="btn secondary" id="pasteRightBtn" type="button">Paste</button>
         </div>
       </div>
@@ -83,53 +124,119 @@
       </div>
       <div class="file-summary" id="rightSummary">No file selected.</div>
     </div>
   </section>
-  <section class="stats" id="stats" hidden>
-    <div class="stat">
-      <span class="label">Added</span>
-      <span class="value" id="statAdded">0</span>
-    </div>
-    <div class="stat">
-      <span class="label">Deleted</span>
-      <span class="value" id="statDeleted">0</span>
     </div>
-    <div class="stat">
-      <span class="label">Modified</span>
-      <span class="value" id="statModified">0</span>
     </div>
-    <div class="stat">
-      <span class="label">Moved</span>
-      <span class="value" id="statMoved">0</span>
     </div>
-    <div class="stat">
-      <span class="label">Similarity</span>
-      <span class="value" id="statSimilarity">0%</span>
     </div>
   </section>
   <section class="analytics" id="analytics" hidden>
     <div class="analytics-header">
-      <h3>📊 Change Analytics</h3>
       <div class="analytics-controls">
         <button id="toggleHeatmap" class="btn ghost small">Toggle Heatmap</button>
         <button id="toggleMinimap" class="btn ghost small">Toggle Minimap</button>
       </div>
     </div>
     <div class="analytics-content">
       <div class="chart-container">
-        <h4>Change Distribution</h4>
         <div class="bar-chart" id="changeChart"></div>
       </div>
-      <div class="change-heatmap" id="changeHeatmap"></div>
     </div>
   </section>
   <main class="diff-container">
-    <div class="pane-wrapper">
       <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>
         <div class="code-wrap">
           <table class="code">
@@ -142,6 +249,10 @@
         <div class="pane-header">
           <h2>File B</h2>
           <span class="file-meta" id="metaRight"></span>
         </div>
         <div class="code-wrap">
           <table class="code">
@@ -151,12 +262,20 @@
       </div>
       <div class="line-connectors" id="lineConnectors"></div>
     </div>
   </main>
   <aside class="minimap" id="minimap" hidden>
     <div class="minimap-header">
-      <h4>Diff Overview</h4>
     </div>
     <div class="minimap-content" id="minimapContent">
       <!-- Minimap will be generated here -->
@@ -164,13 +283,13 @@
   </aside>
   <footer class="app-footer">
-    <small>Tip: Click the jump button next to a moved/modified line to focus its counterpart. Use arrow keys to navigate changes.</small>
   </footer>
-<!-- Modal -->
   <div class="modal-overlay hidden" id="modalOverlay">
     <div class="modal">
       <div class="modal-header">
-        <h3>How FileDiff Viewer Works</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"/>
@@ -180,41 +299,52 @@
       </div>
       <div class="modal-content">
         <div class="modal-section">
-          <h4>🔍 Algorithm Overview</h4>
-          <p>FileDiff Viewer uses a <strong>Longest Common Subsequence (LCS)</strong>-based algorithm to identify changes between two files:</p>
           <ul>
-            <li><strong>Equal lines:</strong> Identical content (whitespace-aware if the ignore option is enabled)</li>
-            <li><strong>Modified lines:</strong> Similar but not identical content (detected using token similarity)</li>
-            <li><strong>Added lines:</strong> Lines present in File B but not in File A</li>
-            <li><strong>Deleted lines:</strong> Lines present in File A but not in File B</li>
-            <li><strong>Moved lines:</strong> Lines that are identical but appear in different positions</li>
           </ul>
         </div>
         <div class="modal-section">
-          <h4>⚠️ Limitations & Known Issues</h4>
           <ul>
-            <li><strong>Token similarity threshold:</strong> Modified lines are detected using a 55% similarity threshold, which may not always match human intuition</li>
-            <li><strong>Moved line detection:</strong> Only detects exact matches that aren't already classified as modifications</li>
-            <li><strong>Large files:</strong> Performance degrades with files larger than 5MB due to O(n²) complexity</li>
-            <li><strong>Context awareness:</strong> The algorithm works line-by-line without understanding code structure or semantics</li>
-            <li><strong>Whitespace handling:</strong> The "ignore whitespace" option only affects change detection, not the actual displayed content</li>
           </ul>
         </div>
         <div class="modal-section">
-          <h4>💡 Best Practices</h4>
           <ul>
-            <li>Use the <strong>Jump buttons (⟷)</strong> to quickly navigate between related changes</li>
-            <li>Enable <strong>Sync scroll</strong> for easier comparison of large diffs</li>
-            <li>For large files, consider using the <strong>ignore whitespace</strong> option to focus on meaningful changes</li>
-            <li>Review the statistics to get a quick overview of change types</li>
           </ul>
         </div>
         <div class="modal-section">
-          <h4>🔧 Technical Details</h4>
-          <p>The algorithm combines LCS for exact matches with Jaccard similarity for modified line detection. Similarity is computed by comparing token sets between lines, providing a balance between accuracy and performance.</p>
         </div>
       </div>
     </div>

 <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">
         </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="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>
       <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>
       <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="toggleHeatmap" class="btn ghost small">Toggle Heatmap</button>
         <button id="toggleMinimap" class="btn ghost small">Toggle Minimap</button>
+        <button id="toggleStructure" 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">
         <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">
       </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 -->
   </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"/>
       </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>
     </div>