Image Sharpening Module added

[waridrox]

Closes #1848

Make sure these boxes are checked before your pull request (PR) is ready to be reviewed and merged. Thanks!

• tests pass -- look for a green checkbox ✔️ a few minutes after opening your PR -- or run tests locally with npm run test-all
• code is in uniquely-named feature branch and has no merge conflicts
• PR is descriptively titled
• ask @publiclab/is-reviewers for help, in a comment below
• Insert-step functionality is working correct as expected.

@jywarren and @harshkhandeparkar, please tell me where I might have gone wrong which is causing the overexposure of the source image and voice your opinions on the same so that we can work this out together...

Thanks!

[gitpod-io]

[harshkhandeparkar]

Can you please explain or send a link explaining how this works?

Thanks.

[waridrox]

Can you please explain or send a link explaining how this works?

Sure, I already mentioned the resource for the implementation in the issue, but here's another one.

• So what we are basically doing is first dividing our image into pixels and then for each 3x3 block of the pixels, we multiply it by the corresponding kernel value and take the sum.
• The 3x3 matrix approach focuses the weight on the center pixel as the sharpening leads to more vividness in the image governed by this algorithm .
• And to maintain the brightness of the image, the sum of the matrix values should add to one so that the resulting image at least has the same brightness level as the initial image.

I looked at the implementation of different module filters and saw the implementation of convolution filter that was applied in various places.
Then I took the sharpening array matrix and ran the convolution filter on that taking the input image to achieve the desired result.

[harshkhandeparkar]

Just a few suggestions :)

Also, can you add a test for this module too?
Thanks!

[harshkhandeparkar]

Sure, I already mentioned the resource for the implementation in the issue,

Oh, sorry.

So what we are basically doing is first dividing our image into pixels and then for each 3x3 block of the pixels, we multiply it by the corresponding kernel value and take the sum.
The 3x3 matrix approach focuses the weight on the center pixel as the sharpening leads to more vividness in the image governed by this algorithm .
And to maintain the brightness of the image, the sum of the matrix values should add to one so that the resulting image at least has the same brightness level as the initial image.
I looked at the implementation of different module filters and saw the implementation of convolution filter that was applied in various places.
Then I took the sharpening array matrix and ran the convolution filter on that taking the input image to achieve the desired result.

Noice

[waridrox]

Also, can you add a test for this module too?

Actually, I am very new to testing but would love to give it a shot if you can guide me how this data file for example got generated.

image-sequencer/test/core/modules/colormap.js

Lines 2 to 3 in 417c1b1

	'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAklEQVR4AewaftIAAAArSURBVKXBAQEAAAiAIPP/ti7VCGFm7wgkkkgiiSSSSCKJJJJIIokkkkiiB53vAu3tsMmFAAAAAElFTkSuQmCC',
	testModule = require('../templates/module-test');

And is there a way to run individual test file.
Every time I try to run a test on a single file using the command npm test -- test/core/modules/colormap.js, all the tests get executed 😅 instead...

Thanks :)

[daemon1024]

And is there a way to run individual test file.
Every time I try to run a test on a single file using the command npm test -- test/core/modules/colormap.js, all the tests get executed 😅 instead...

Try node test/core/modules/colormap.js instead

[daemon1024]

Actually, I am very new to testing but would love to give it a shot if you can guide me how this data file for example got generated.

image-sequencer/test/core/modules/colormap.js

Lines 2 to 3 in 417c1b1

	'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAklEQVR4AewaftIAAAArSURBVKXBAQEAAAiAIPP/ti7VCGFm7wgkkkgiiSSSSCKJJJJIIokkkkiiB53vAu3tsMmFAAAAAElFTkSuQmCC',
	testModule = require('../templates/module-test');

These are standard PNG files converted to base64 encoding, You can use the same image here too but I am not sure how you could generate the benchmark data which should be the sharpened image for the given data.

[harshkhandeparkar]

I am not sure how you could generate the benchmark data which should be the sharpened image for the given data.

Run the module in the browser, download the PNG and convert it to data URI using an online converter :)

[waridrox]

sharpen.js

const testModule = require('../templates/module-test'),
//benchmark has the base64 image with sharpening = 1
    benchmark = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAklEQVR4AewaftIAAAGkSURBVKXBMUozYRCA4Xc+ZzYJpBc8h+QAFpaizZZi7wUs7KwsbG3FwsLK2hsIewQPIFiLMTtfdv4MJCBBbf7nkVhhrdaKqvKXiMDdMTNEBGXN3TEz0u7uLu/v72yLCESEpmmotaKqKCvujpnx9vbG3t4e6ebmhpOTE1SVl5cX2rZFRDg8POT5+RlVpdaKuHuoKl3XMZvNeHx8pG1bfiMipIggFVUlzWYzrq6uaNuWtFgscHf6vqfve2qtpIjgu8KKiJAuLy9J8/mc0WiEmdE0DU3TsLOzw2KxIO3v7yMipMLaw8MD6evri8lkwjYRYaPrOjYKa0dHR6RSCr8xM7YV/lNhres60jAM/Mbd2VZYOzg4II3HY4Zh4CcRQbq4uGCjsBIRfPf5+Umtlb7vcXfm8zkfHx+Mx2PS9fU19/f3pDIMA+ns7AwRIU2nU1SVpmkwMyaTCdPplCQipNPTU5K6O6PRiLu7O15fXxERVBV357vz83Nub29JEUGqtSKx4u6YGRsiwk+enp44Pj4muTtmhrJiZiyXS0SEUgoRwV+WyyVmRvoHouS1dlh/5NQAAAAASUVORK5CYII=',
//benchmark1 has base64 image with sharpening = 1.3
    benchmark1 = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAklEQVR4AewaftIAAADsSURBVKXBsa2CUBiG4fc7wYIdtILGhiVsXMCK3hVo6OhcwdbKBWwcQhsbExsYgtD8cpJDYoj3Xq4+j6zHFyLeWCwWNE3DmJkxFjEiCe90OrFer/EejwdJkiCJPM85HA4MZD0CSdzvd9I05SeS8MwMzxFI4ng8kqYpvzEzXjl6kvA2mw1TrFYrJOE5gtvtxlTn85mBI1gul3zC8SVH0LYtn3AEcRwz1X6/Z+DomRn/sd1uuV6veI6gLEsk8RdJeFmW4UUEVVVxuVyQxGw2o+s6Xu12O4qiwDMzBrIeI5J4p65r5vM5ryLeMDOmegL2QE324dz79wAAAABJRU5ErkJggg==',
  optionsTest = require('../templates/options-test');

testModule('sharpen', {sharpenStrength: 1}, benchmark);

optionsTest('sharpen', [{sharpenStrength: 1.3}, {sharpenStrength: 1}], [benchmark1, benchmark]);

@harshkhandeparkar @daemon1024 Any thoughts where I might have gone wrong 😕...Thanks!

Input source image is

for intensity = 1 (default sharpening value) the image becomes

And the status for tests is still not passed:

Apart from this 2 new image files are created for the tests -
I can't figure out why is the sharpen-result.png another image instead of the image on the right. They should both match I think...

[harshkhandeparkar]

You need to specify the input in testModule otherwise it used a red square by default.

[waridrox]

You need to specify the input in testModule otherwise it used a red square by default.

I've added the tests and they pass now finally :)

@harshkhandeparkar please add the relevant labels before closing the issue. Thanks :)

[daemon1024]

Can you rename the PR, I believe it’s not WIP any more.

Also instead of using ‘Addressing’ can you use one of the keywords that GitHub recognises instead. Ref https://docs.github.com/en/github/managing-your-work-on-github/linking-a-pull-request-to-an-issue#linking-a-pull-request-to-an-issue-using-a-keyword

Is there still an overexposure issue?

[waridrox]

Is there still an overexposure issue?

It's just the way the algorithm works, can't do much about it 😅. To tackle this, I've kept the sharpening intensity such that the image can't get too overexposed to begin with.

[jywarren]

This is looking excellent, thanks especially for the test. I'm dismissing the remaining CodeClimate issues. Would love to hear from @harshkhandeparkar but if @daemon1024 feels confident about this, we can merge!

[daemon1024]

Sure! LGTM 😄

Complete!

[jywarren]

Woohoo!!! ✨✨✨✨

[jywarren]

This should be a minor release bump of +0.1.0, if anyone wants to adjust the package.json file!

I'm interested in whether a similar technique could be used to /assess/ sharpness and do focus stacking of an image series...

https://en.wikipedia.org/wiki/Focus_stacking

[waridrox]

I'm interested in whether a similar technique could be used to /assess/ sharpness and do focus stacking of an image series...

The idea seems so cool! 😄

[waridrox]

This should be a minor release bump of +0.1.0, if anyone wants to adjust the package.json file!

Do we need to change the version in package-lock.json as well ? I can create a fto out of this if that sounds reasonable :)

[jywarren]

I added this update to #1751 - and we should go through the release process over there! Thanks!

[jywarren]

I'm interested in whether a similar technique could be used to /assess/ sharpness and do focus stacking of an image series...

The idea seems so cool! 😄

Feel free to open a new issue with these notes and CC me!

[jywarren]

I guess, one way to think about is:

a module which analyzes the sharpness of each pixel and replaces any

"blurry" pixel with an alpha transparent pixel.

we could then repeatedly import images (i.e. import-image module followed

by "overlay-sharpest" module, or something like that) and they'd "knock out" blurry areas with higher contrast or higher sharpness data. The order of operations might need tweaking. I could imagine other ways to do this too, but that seems like a relatively simple one. Another idea would be a module which imports a video clip and makes each frame available to requests from later modules. That would be a little wild as a module, and maybe would be a separate project.

…

On Thu, Mar 25, 2021 at 12:30 PM Mohammad Warid ***@***.***> wrote: I'm interested in whether a similar technique could be used to /assess/ sharpness and do focus stacking of an image series... The idea seems so cool! 😄 — You are receiving this because you modified the open/close state. Reply to this email directly, view it on GitHub <#1849 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAAF6J5PP2H5FOC7AU4F5OLTFNQLBANCNFSM4ZFAKXIA> .

[harshkhandeparkar]

Would love to hear from @harshkhandeparkar

Perfecto