<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Lucy Night</title>
    <description>The latest articles on DEV Community by Lucy Night (@lucy_night_010ee69884d312).</description>
    <link>https://dev.to/lucy_night_010ee69884d312</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3965064%2F091daf41-b149-4a69-822d-1f599156253d.png</url>
      <title>DEV Community: Lucy Night</title>
      <link>https://dev.to/lucy_night_010ee69884d312</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/lucy_night_010ee69884d312"/>
    <language>en</language>
    <item>
      <title>Why I chose SSIM over pixel diff — and MFCC over waveforms — when building a file comparison tool</title>
      <dc:creator>Lucy Night</dc:creator>
      <pubDate>Tue, 02 Jun 2026 17:16:57 +0000</pubDate>
      <link>https://dev.to/lucy_night_010ee69884d312/how-i-built-a-frame-by-frame-video-comparison-tool-with-python-and-opencv-4ijh</link>
      <guid>https://dev.to/lucy_night_010ee69884d312/how-i-built-a-frame-by-frame-video-comparison-tool-with-python-and-opencv-4ijh</guid>
      <description>&lt;h2&gt;
  
  
  The problem with pixel diff
&lt;/h2&gt;

&lt;p&gt;When comparing two video frames, the obvious approach is pixel &lt;br&gt;
subtraction. Take frame A, take frame B, subtract.&lt;/p&gt;

&lt;p&gt;The problem: it's too sensitive. Compression artifacts, a 1-pixel &lt;br&gt;
encode difference, slight brightness variation — all produce noisy &lt;br&gt;
results that don't reflect what a human would actually notice.&lt;/p&gt;

&lt;p&gt;SSIM (Structural Similarity Index) solves this. It compares &lt;br&gt;
luminance, contrast, and structure locally — producing a score that &lt;br&gt;
correlates much better with how humans perceive visual quality.&lt;br&gt;
The result: a heatmap that shows &lt;em&gt;where&lt;/em&gt; frames differ, not just a &lt;br&gt;
number.&lt;/p&gt;

&lt;h2&gt;
  
  
  Why MFCC for audio
&lt;/h2&gt;

&lt;p&gt;For audio comparison, waveform correlation was my first attempt. &lt;br&gt;
It's too sensitive to timing offsets — even a 10ms shift between &lt;br&gt;
identical audio files produces a misleadingly low score.&lt;/p&gt;

&lt;p&gt;MFCC (Mel-Frequency Cepstral Coefficients) captures the shape of &lt;br&gt;
the sound spectrum rather than the raw signal. It's the same &lt;br&gt;
technique used in speech recognition — robust to minor timing &lt;br&gt;
differences and perceptually meaningful.&lt;/p&gt;

&lt;h2&gt;
  
  
  The memory problem on a free server
&lt;/h2&gt;

&lt;p&gt;Running frame-by-frame SSIM on a 60-second video at full resolution &lt;br&gt;
would crash a 512MB server instantly.&lt;/p&gt;

&lt;p&gt;The solution: resize frames before analysis and sample at intervals &lt;br&gt;
rather than every frame. You lose nothing perceptually relevant — &lt;br&gt;
and the per-second similarity graph still catches exactly the kind &lt;br&gt;
of transient drop that means one scene rendered differently.&lt;/p&gt;

&lt;h2&gt;
  
  
  What I ended up building
&lt;/h2&gt;

&lt;p&gt;DiffALL — drop any two files, get a structured diff in seconds.&lt;/p&gt;

&lt;p&gt;Supports video (SSIM + PSNR + live heatmap player), images &lt;br&gt;
(pixel diff + flexible mode for different angles), audio (MFCC), &lt;br&gt;
subtitles (WER + timing drift), and text/JSON/CSV/YAML.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;&lt;a href="https://diffall.onrender.com" rel="noopener noreferrer"&gt;diffall.onrender.com&lt;/a&gt;&lt;/strong&gt; — free, &lt;br&gt;
no install.&lt;/p&gt;

&lt;p&gt;Happy to answer questions about the approach.&lt;/p&gt;

</description>
      <category>opencv</category>
      <category>showdev</category>
      <category>computerscience</category>
      <category>automation</category>
    </item>
    <item>
      <title>I built a tool to diff video, image, audio, subtitles and text files — all in one place</title>
      <dc:creator>Lucy Night</dc:creator>
      <pubDate>Tue, 02 Jun 2026 17:09:46 +0000</pubDate>
      <link>https://dev.to/lucy_night_010ee69884d312/i-built-a-tool-to-diff-video-image-audio-subtitles-and-text-files-all-in-one-place-202n</link>
      <guid>https://dev.to/lucy_night_010ee69884d312/i-built-a-tool-to-diff-video-image-audio-subtitles-and-text-files-all-in-one-place-202n</guid>
      <description>&lt;h2&gt;
  
  
  The problem
&lt;/h2&gt;

&lt;p&gt;Every time I needed to compare two video renders, two exported images, &lt;br&gt;
or two subtitle files — I ended up with three different tools open, &lt;br&gt;
none of them showing me &lt;em&gt;exactly&lt;/em&gt; what changed.&lt;/p&gt;

&lt;p&gt;So I built DiffALL.&lt;/p&gt;

&lt;h2&gt;
  
  
  What it does
&lt;/h2&gt;

&lt;p&gt;Drop any two files. It picks the right engine automatically and gives &lt;br&gt;
you a structured diff in seconds.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Video&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Frame-by-frame SSIM &amp;amp; PSNR scoring&lt;/li&gt;
&lt;li&gt;Synchronized 3-panel live player (expected / heatmap / actual)&lt;/li&gt;
&lt;li&gt;Bounding boxes around every changed region&lt;/li&gt;
&lt;li&gt;Per-second similarity graph — catches transient drops a single 
score would miss&lt;/li&gt;
&lt;li&gt;Worst-moment timestamp so you jump straight to the bug
&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fanqoowrn3t2o5xf5m12t.png" alt=" " width="799" height="152"&gt;
&lt;strong&gt;Images&lt;/strong&gt;
&lt;/li&gt;
&lt;li&gt;Pixel-level difference heatmap&lt;/li&gt;
&lt;li&gt;Standard mode: Expected | Difference | Actual side by side&lt;/li&gt;
&lt;li&gt;Flexible mode: ORB feature matching + homography alignment 
for photos taken at different angles or lighting&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fn4ltj5wte7gjsnfukbt4.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fn4ltj5wte7gjsnfukbt4.png" alt=" " width="799" height="253"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Audio&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;MFCC spectral similarity (50% weight)&lt;/li&gt;
&lt;li&gt;Spectral centroid + RMS energy&lt;/li&gt;
&lt;li&gt;Mel spectrogram diff overlay&lt;/li&gt;
&lt;li&gt;Browser playback of both files for manual listening&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Subtitles (SRT / VTT)&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Word Error Rate (WER)&lt;/li&gt;
&lt;li&gt;Line-by-line diff with insertions and deletions highlighted&lt;/li&gt;
&lt;li&gt;Timing drift analysis — average, max, and std dev of ms offsets&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Text / JSON / CSV / XML / YAML&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Semantic line diff with inline character-level highlighting&lt;/li&gt;
&lt;li&gt;JSON mode: recursive flatten into dotted paths, then structural diff&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Tech stack
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;Python / Flask on Render free tier&lt;/li&gt;
&lt;li&gt;OpenCV + scikit-image for image and video analysis&lt;/li&gt;
&lt;li&gt;librosa for audio (MFCC, spectral centroid)&lt;/li&gt;
&lt;li&gt;difflib SequenceMatcher for text&lt;/li&gt;
&lt;li&gt;Chart.js for the SSIM timeline&lt;/li&gt;
&lt;li&gt;Supabase for auth&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Try it
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;&lt;a href="https://diffall.onrender.com" rel="noopener noreferrer"&gt;diffall.onrender.com&lt;/a&gt;&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Free — no sign-up needed for the first comparison.&lt;/p&gt;

&lt;p&gt;Would love feedback on what's missing or broken.&lt;/p&gt;

</description>
      <category>showdev</category>
      <category>testing</category>
      <category>productivity</category>
      <category>qa</category>
    </item>
  </channel>
</rss>
