MNT: add gooey to index page

[jsheunis]

This PR:

• Closes Let datalad-gooey feature on the index page #122
• Adds a gif of the gooey
• changes wording of the "Use DataLad" section to refer to GUI as well as cli
• adds code to alternate between gifs of gui and cli (every 20s), and allow user to select either
• also adds some tweaks to the 404-game

[jsheunis]

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:

Screen.Recording.2022-11-08.at.12.00.08.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]

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]

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

[bpoldrack]

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

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

[yarikoptic]

@jsheunis any plans to complete this goodness?

[jsheunis]

@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]

@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]

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]

Sad, but thanks for the explanation - TIL :)

[aqw]

@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:

• if you stay with gif, then reduce the pallet size and framerate. 30 is quite high.
• alternatively: look at a video format or animated webp

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]

Thanks @aqw will try these options

[jsheunis]

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]

Demo:

video5.mp4

[jsheunis]

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.