search

datalad / datalad.org

Website sources of datalad.org
https://www.datalad.org
4 stars 10 forks source link

MNT: add gooey to index page #126

Closed jsheunis closed 1 year ago

jsheunis commented 1 year ago

This PR:

jsheunis commented 1 year ago

What changed: just the "Use datalad" section, which now refers to the GUI as well as the CLI, and also shows a gooey gif and allows user to toggle between cli view and gooey view. The view automatically toggles every 20 seconds.

Video:

https://user-images.githubusercontent.com/10141237/200547833-eec300b9-346a-4387-ad83-3c9cca4a372d.mov

One challenge that still needs to be addressed is getting a small gif size. The current size is 5mb, which is way too high for a quick page load. I used ffmpeg to generate images from a .mov file, and then to create a gif from these images, also scaling the size down to what still looked like decent quality (see code below), but this still results in a large file. I am not sure how this can be compressed more without making the quality bad. An alternative is making the video/gif shorter. Any thoughts? 

ffmpeg -f image2 -framerate 30 -i gooey/out%02d.jpg -loop 0 -vf scale=1600:-1 gooey/gooey_30fps_scaled1600.gif
mih commented 1 year ago

Is it possible to make "Graphical User Interface" a link that would toggle the demo animation immediately? ATM I think most people will have scrolled past that section before the 20s mark hits.

jsheunis commented 1 year ago

Cool idea. can do the same for the "command line interface"

bpoldrack commented 1 year ago

Cool idea. can do the same for the "command line interface"

Eventually we can also add "python interface". So, +1 :)

yarikoptic commented 1 year ago

@jsheunis any plans to complete this goodness?

jsheunis commented 1 year ago

@yarikoptic I think it's ready to merge apart from the large gif file size. @aqw do you have ideas about what else I can try here?

One challenge that still needs to be addressed is getting a small gif size. The current size is 5mb, which is way too high for a quick page load. I used ffmpeg to generate images from a .mov file, and then to create a gif from these images, also scaling the size down to what still looked like decent quality (see code below), but this still results in a large file. I am not sure how this can be compressed more without making the quality bad. An alternative is making the video/gif shorter. Any thoughts?

ffmpeg -f image2 -framerate 30 -i gooey/out%02d.jpg -loop 0 -vf scale=1600:-1 gooey/gooey_30fps_scaled1600.gif

adswa commented 1 year ago

@yarikoptic I think it's ready to merge apart from the large gif file size. @aqw do you have ideas about what else I can try here?

Uninformed side-comment: Would it work to host the gif elsewhere instead of committing it, and supplying the hosting url as a src?

aqw commented 1 year ago

Uninformed side-comment: Would it work to host the gif elsewhere instead of committing it, and supplying the hosting url as a src?

That's possible, but doesn't decrease the size of the asset delivered. And if it's not a place we're hosting, then it's known as hotlinking, which is frowned upon. :-)

adswa commented 1 year ago

Sad, but thanks for the explanation - TIL :)

aqw commented 1 year ago

@yarikoptic I think it's ready to merge apart from the large gif file size. @aqw do you have ideas about what else I can try here?

One challenge that still needs to be addressed is getting a small gif size. The current size is 5mb, which is way too high for a quick page load. I used ffmpeg to generate images from a .mov file, and then to create a gif from these images, also scaling the size down to what still looked like decent quality (see code below), but this still results in a large file. I am not sure how this can be compressed more without making the quality bad. An alternative is making the video/gif shorter. Any thoughts?

ffmpeg -f image2 -framerate 30 -i gooey/out%02d.jpg -loop 0 -vf scale=1600:-1 gooey/gooey_30fps_scaled1600.gif

There's a few options:

I have a command in my history when we were working on the studyforrest website. No idea what this monstrosity means anymore, but perhaps it's a useful starting point. :-)

ffmpeg -i freesurfer_parcellations.mp4 -vf "fps=1,scale=1600:-1:flags=lanczos,split[s0][s1];[s0]palettegen=max_colors=48:reserve_transparent=0[p];[s1][p]paletteuse" -loop 0 output.gif

Obviously, adjust framerate and scale, etc to your needs.

jsheunis commented 1 year ago

Thanks @aqw will try these options

jsheunis commented 1 year ago

Ended up with the following:

ffmpeg -i gooey.mov -vcodec h264 -acodec aac -vf "setpts=0.4*PTS,scale=1600:-1" gooey_converted_pts04_scale1600.mp4

got it down to 1.6 MB from ~6MB.

jsheunis commented 1 year ago

Demo:

https://user-images.githubusercontent.com/10141237/237021868-9f2e21c0-1ef9-4157-a505-0634825a1c2d.mp4

jsheunis commented 1 year ago

Ok, merging this. If we realise in future that we want to change the gooey video, let's do that in a new issue+PR.