213 lines
15 KiB
HTML
213 lines
15 KiB
HTML
<html>
|
|
<head>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<meta content="text/html;charset=utf-8" http-equiv="Content-Type"/>
|
|
<link rel="stylesheet" href="colors.css" type="text/css">
|
|
<link rel="stylesheet" href="style.css" type="text/css">
|
|
<link rel="stylesheet" href="/highlight.css">
|
|
<script src="highlight/highlight.min.js"></script>
|
|
</head>
|
|
<body>
|
|
<div id="wrapper">
|
|
<article>
|
|
<h1>Small image descriptors for near-copy detection</h1>
|
|
<h2>Introduction</h2>
|
|
<p>
|
|
<em>This is quite a long setup towards playing around with small image fingerprints for similarity matching.
|
|
If you don't care about the background, feel free to skip straight to the <a href="#demo">demo</a>!</em>
|
|
</p>
|
|
<p>
|
|
Many computer vision applications don't process the image directly, but use some kind of representation of the image instead.
|
|
Usually this takes the form of some one-way function that calculates a vector of some dimensionality.
|
|
In modern machine learning this is called an <strong>embedding</strong>.
|
|
In computer vision we might consider something a <strong>feature</strong>, a <strong>descriptor</strong> or even a <strong>fingerprint</strong>, depending on the application.
|
|
</p>
|
|
<p>
|
|
The basic ideas are the same: We want to say something about the image, and to have the computer do some calculations with this image it is almost always easier to work with some (often smaller) representation of that image.
|
|
Even the biggest representations are usually at least an order of magnitude smaller than the original image, which makes running computations on them much faster.
|
|
</p>
|
|
<p>
|
|
Different tasks require larger representations of the image.
|
|
Object recognition, image classification, or even 3d image reconstruction require more precise input and thus more data to represent the image.
|
|
However, some simpler tasks might be accomplished with much less data.
|
|
One of these simpler applications is perceptual hashing.
|
|
</p>
|
|
<h2>Image compare</h2>
|
|
<p>
|
|
Let's imagine that we have two images, and we want to check if these two images are the same image.
|
|
Well, you might start by simply comparing data byte-for-byte, which works quite well for direct copies.
|
|
GNU diffutils even has a nice <code>cmp</code> tool that will do exactly that.
|
|
It will look through two files until it finds a byte that does not match between the two:
|
|
<pre>
|
|
<code class="language-bash">$ cp a.jpg a.copy.jpg
|
|
$ cmp a.jpg a.copy.jpg && echo "Same" || echo "Not same"
|
|
Same
|
|
</code>
|
|
</pre>
|
|
<p>
|
|
This works for our direct copy.
|
|
Now lets see how it handles two entirely different images:
|
|
</p>
|
|
<pre>
|
|
<code class="language-bash">$ cmp a.jpg b.jpg
|
|
a.jpg b.jpg differ: byte 14, line 1
|
|
</code>
|
|
</pre>
|
|
<p>
|
|
The two different images differ on byte 14, which is the byte in the JPEG header which defines the "density", or pixels per length of an image.
|
|
In this case, <code>a.jpg</code> does not have anything set, while <code>b.jpg</code> defines its density as pixels per inch.
|
|
What about two images that are the same, but reencoded?
|
|
</p>
|
|
<pre>
|
|
<code class="language-bash">$ convert c.png c.jpg && convert c.jpg d.png
|
|
$ cmp c.png d.png
|
|
c.png d.png differ: byte 36, line 3
|
|
</code>
|
|
</pre>
|
|
<p>
|
|
In this case we convert a png image into a jpeg and then back into a png.
|
|
This introduces jpeg encoding artefacts into the image, which subtly alter the pixel values such that <code>cmp</code> no longer considers them the same image.
|
|
</p>
|
|
<p>
|
|
This gives us our first hints at why image comparisons are tricky.
|
|
Even when both files are jpeg images, the subtle differences in encoding already trip us up before we even get to the actual pixel information.
|
|
And even when both files are visually identical (and identically encoded), the subtle differences in pixel values still gets us.
|
|
<!-- <pre>
|
|
<code class="language-bash">$ magick a.jpg a.png
|
|
$ cmp a.jpg a.png && echo "Same file" || echo "Not same file"
|
|
a.jpg a.png differ: byte 1, line 1
|
|
Not same file
|
|
</code>
|
|
</pre> -->
|
|
</p>
|
|
<p>
|
|
This might all seem a little silly so far.
|
|
Of course comparing images in this way does not make sense.
|
|
What we are looking for is a method that uses a more complex perception-based model to say if two images are the same.
|
|
Even more so, we are looking for a method to not only compare two given images,
|
|
but quickly calculate the nearest neighbours of a given image based on their similarity.
|
|
</p>
|
|
</article>
|
|
<article>
|
|
<h1>Perceptual hashing</h1>
|
|
<h2>Locality-sensitive hashing</h2>
|
|
<p>
|
|
I am going to assume you know what a hashing function is.
|
|
Different hashing functions have various properties that make them more or less suited to various purposes,
|
|
but one common feature is that they try to avoid collisions by having small changes in input correspond to large changes in the output.
|
|
When we want to avoid this behaviour we are doing something called <strong>locality-sensitive hashing</strong> (LSH).
|
|
In locality-sensitive hashing we are more likely to put similar data into the same <strong>bucket</strong>.
|
|
</p>
|
|
<p>
|
|
<em>
|
|
In normal hashing we want to avoid the same output values so we call it a collision (bad!).
|
|
For LSH we want to encourage the same output values, so we say we "put it in a bucket" (good!).
|
|
</em>
|
|
</p>
|
|
<p>
|
|
So what are the requirements of a good perceptual hash?
|
|
<ol>
|
|
<li>Small (i.e. good dimensionality reduction)</li>
|
|
<li>Avoid collisions between <strong>different</strong> images.</li>
|
|
<li>High similarity between <strong>similar</strong> images.</li>
|
|
</ol>
|
|
We see that we have multiple objectives to optimize for, but we also see that two of our requirements depend on a subjective measure.
|
|
</p>
|
|
<h3>Size</h3>
|
|
<p>
|
|
I have decided to limit myself to fingerprints that are <em>at most</em> 64 bits (or 8 bytes) in size.
|
|
Firstly, this allows me to "compete" in a little happy place of small descriptors.
|
|
But more importantly, because modern processors are very good at processing 64 bit integers, this should also be a very performant fingerprint.
|
|
</p>
|
|
<p>
|
|
The good news is that this takes care of our first requirement.
|
|
</p>
|
|
<h3>Subjective image similarity</h3>
|
|
<p>
|
|
Broadly speaking, we have to answer the question: when are two images the same?
|
|
</p>
|
|
<p>
|
|
Lets start by looking at some examples.
|
|
<div class="similarity-example">
|
|
<figure>
|
|
<img src="/img/sunflower1.jpg" />
|
|
<figcaption><a href="https://www.publicdomainpictures.net/en/view-image.php?image=222210&picture=sunflower">Close Up of a Sunflower in a Field of Sunflowers</a></figcaption>
|
|
</figure>
|
|
<figure>
|
|
<img src="/img/sunflower2.jpg" />
|
|
<figcaption><a href="https://www.publicdomainpictures.net/en/view-image.php?image=30918&picture=sunflower">Sunflower against the sky</a></figcaption>
|
|
</figure>
|
|
</div>
|
|
These two pictures are, to a human observer, definitely <em>similar</em>, but also not <em>the same</em>.
|
|
The framing is similar, the subject is similar, the colors are different.
|
|
So we would like a good perceptual hashing algorithm to generate hashes for these images that are close, but not to put them in the same bucket.
|
|
</p>
|
|
<p>
|
|
<div class="similarity-example">
|
|
<figure>
|
|
<img src="/img/moon1.jpg" />
|
|
<figcaption><a href="https://pixabay.com/photos/full-moon-moon-bright-sky-space-496873/">Full moon by dunc</a></figcaption>
|
|
</figure>
|
|
<figure>
|
|
<img src="/img/moon2.jpg" />
|
|
<figcaption><a href="https://commons.wikimedia.org/wiki/File:Vollmond.P1080516.jpg">Vollmond nahe dem Zenit</a></figcaption>
|
|
</figure>
|
|
</div>
|
|
These are more similar.
|
|
We have the same subject, same coloring, very similar brightness and contrast values.
|
|
If we look a bit closer we see that the rotation is a bit different in both images, the left one is a bit sharper, and the right image has more "empty space" around the subject.
|
|
</p>
|
|
<p>
|
|
All things considered, these image should probably be classified as <em>very similar</em> by most perceptual hashing algorithms.
|
|
</p>
|
|
</article>
|
|
<article id="demo">
|
|
<h1>Demo</h1>
|
|
<p>Select an image to run this demo with. Don't worry, nothing will be sent to any server! All calculations are done in the browser.</p>
|
|
<p>Unanimated images with no transparancy work best, but feel free to experiment.</p>
|
|
<input
|
|
type="file"
|
|
id="dctimage"
|
|
accept="image/*" />
|
|
<div id="base">
|
|
<div class="image-original"></div>
|
|
</div>
|
|
</article>
|
|
<article id="demo-cont">
|
|
<h2>Resize</h2>
|
|
<p>The first step is to size the image down. Since we are aiming for a 64-bit descriptor, the logical target size is 8 by 8 since that will give us 64 pixels to work with.</p>
|
|
<div id="resize">
|
|
<div class="image-original" id="resize-original"></div>
|
|
<div id="image-resize"></div>
|
|
</div>
|
|
<p>
|
|
It is obvious, but worth noting, that this action is <em>destructive</em>.
|
|
We are throwing away a lot of information here, especially regarding the finer details.
|
|
For now, this is a good thing.
|
|
</p>
|
|
<p>
|
|
After all, we have to <em>describe</em> our image in only 64-bits, so throwing away information was inevitable.
|
|
If you squint your eyes the original image can be recognized. Sort of.
|
|
</p>
|
|
<h2>DCT</h2>
|
|
<p>What is DCT?</p>
|
|
<p>Frequency domain. Plaatje. Bla bla.</p>
|
|
<div id="image-dct"></div>
|
|
<div class="image-original" id="dct-original"></div>
|
|
<p>Mauris semper ipsum libero. Praesent laoreet massa sagittis enim consequat malesuada. Nullam viverra nibh sit amet lacus volutpat sollicitudin. Nullam lacus sem, commodo ut vulputate nec, consectetur in erat. Quisque eget nunc ac felis condimentum ultrices eu sit amet arcu. Praesent imperdiet faucibus aliquam. Curabitur sit amet faucibus erat. </p>
|
|
<p>Nam pulvinar, mi id sagittis laoreet, risus dolor pellentesque metus, sed mattis nunc erat sed urna. Ut facilisis, velit vel condimentum euismod, ex ante dictum leo, lobortis feugiat eros sem nec velit. Aliquam quis eros lacus. Duis venenatis purus at luctus tempor. Praesent gravida euismod ante, tristique placerat tortor mattis molestie. Duis viverra ex eget lectus tempus consectetur. Aliquam semper, ligula at molestie dapibus, sapien turpis rutrum massa, ac tristique lorem ex eget neque. Donec vel turpis odio. </p>
|
|
<p>Mauris semper ipsum libero. Praesent laoreet massa sagittis enim consequat malesuada. Nullam viverra nibh sit amet lacus volutpat sollicitudin. Nullam lacus sem, commodo ut vulputate nec, consectetur in erat. Quisque eget nunc ac felis condimentum ultrices eu sit amet arcu. Praesent imperdiet faucibus aliquam. Curabitur sit amet faucibus erat. </p>
|
|
<p>Mauris semper ipsum libero. Praesent laoreet massa sagittis enim consequat malesuada. Nullam viverra nibh sit amet lacus volutpat sollicitudin. Nullam lacus sem, commodo ut vulputate nec, consectetur in erat. Quisque eget nunc ac felis condimentum ultrices eu sit amet arcu. Praesent imperdiet faucibus aliquam. Curabitur sit amet faucibus erat. </p>
|
|
<p>Mauris semper ipsum libero. Praesent laoreet massa sagittis enim consequat malesuada. Nullam viverra nibh sit amet lacus volutpat sollicitudin. Nullam lacus sem, commodo ut vulputate nec, consectetur in erat. Quisque eget nunc ac felis condimentum ultrices eu sit amet arcu. Praesent imperdiet faucibus aliquam. Curabitur sit amet faucibus erat. </p>
|
|
<p>Mauris semper ipsum libero. Praesent laoreet massa sagittis enim consequat malesuada. Nullam viverra nibh sit amet lacus volutpat sollicitudin. Nullam lacus sem, commodo ut vulputate nec, consectetur in erat. Quisque eget nunc ac felis condimentum ultrices eu sit amet arcu. Praesent imperdiet faucibus aliquam. Curabitur sit amet faucibus erat. </p>
|
|
<p>Nam pulvinar, mi id sagittis laoreet, risus dolor pellentesque metus, sed mattis nunc erat sed urna. Ut facilisis, velit vel condimentum euismod, ex ante dictum leo, lobortis feugiat eros sem nec velit. Aliquam quis eros lacus. Duis venenatis purus at luctus tempor. Praesent gravida euismod ante, tristique placerat tortor mattis molestie. Duis viverra ex eget lectus tempus consectetur. Aliquam semper, ligula at molestie dapibus, sapien turpis rutrum massa, ac tristique lorem ex eget neque. Donec vel turpis odio. </p>
|
|
<p>Nam pulvinar, mi id sagittis laoreet, risus dolor pellentesque metus, sed mattis nunc erat sed urna. Ut facilisis, velit vel condimentum euismod, ex ante dictum leo, lobortis feugiat eros sem nec velit. Aliquam quis eros lacus. Duis venenatis purus at luctus tempor. Praesent gravida euismod ante, tristique placerat tortor mattis molestie. Duis viverra ex eget lectus tempus consectetur. Aliquam semper, ligula at molestie dapibus, sapien turpis rutrum massa, ac tristique lorem ex eget neque. Donec vel turpis odio. </p>
|
|
<p>Nam pulvinar, mi id sagittis laoreet, risus dolor pellentesque metus, sed mattis nunc erat sed urna. Ut facilisis, velit vel condimentum euismod, ex ante dictum leo, lobortis feugiat eros sem nec velit. Aliquam quis eros lacus. Duis venenatis purus at luctus tempor. Praesent gravida euismod ante, tristique placerat tortor mattis molestie. Duis viverra ex eget lectus tempus consectetur. Aliquam semper, ligula at molestie dapibus, sapien turpis rutrum massa, ac tristique lorem ex eget neque. Donec vel turpis odio. </p>
|
|
<p>Nam pulvinar, mi id sagittis laoreet, risus dolor pellentesque metus, sed mattis nunc erat sed urna. Ut facilisis, velit vel condimentum euismod, ex ante dictum leo, lobortis feugiat eros sem nec velit. Aliquam quis eros lacus. Duis venenatis purus at luctus tempor. Praesent gravida euismod ante, tristique placerat tortor mattis molestie. Duis viverra ex eget lectus tempus consectetur. Aliquam semper, ligula at molestie dapibus, sapien turpis rutrum massa, ac tristique lorem ex eget neque. Donec vel turpis odio. </p>
|
|
</article>
|
|
</div>
|
|
<script type="module" src="script.js"></script>
|
|
<script>hljs.highlightAll();</script>
|
|
</body>
|
|
</html>
|