🎉 wizard: Create GIF/video from chart URL

[pabloarosado]

I've always thought it would be convenient to have an easy way to generate GIFs/Videos from a chart. This PR creates:

• A CLI tool to generate a GIF/mp4 file from a given chart URL.
• A wizard page for that tool.

NOTES:

• If you load a chart that uses population, the range of years includes the entire range of years in the data, instead of those in the chart. Maybe it would be better to get the range of years from DB instead of getting the chart.metadata.json.
• The way we get the PNGs may be a bit aggressive (using the API in parallel), maybe there is a better way to do this.
• It would be good to have an option to download GIF in social media format. But I couldn't figure out how.
• Currently, it generates the PNG images and the GIF in a folder in Downloads. This is convenient, to avoid downloading many images. However, when run on master, this will create unnecessary files, so maybe it would be better to have a temporary folder. Not sure what the best solution is.

Example use of CLI:

python apps/chart_animation/cli.py https://ourworldindata.org/grapher/per-capita-energy-use

[owidbot]

Quick links (staging server):

Site Dev	Site Preview	Admin	Wizard	Docs

Login: ssh owid@staging-site-create-gif-from-chart

chart-diff: ✅

No charts for review.

data-diff: ✅ No differences found

Legend: +New  ~Modified  -Removed  =Identical  Details
Hint: Run this locally with etl diff REMOTE data/ --include yourdataset --verbose --snippet

Automatically updated datasets matching weekly_wildfires|excess_mortality|covid|fluid|flunet|country_profile|garden/ihme_gbd/2019/gbd_risk are not included

Edited: 2024-11-26 11:02:30 UTC
Execution time: 15.14 seconds

[lucasrodes]

Hi Pablo! Thanks for doing this, I'm interested in seeing where this brings us.

I agree that being able to export social-media ready charts would be a win, specially since I think these GIFs/animated content would be valuable in social media platforms.

As I've already mentioned you, I've renamed the app to something a bit more general in case we add support for non-gif exports too. That'd be very cool!

I've added some suggestions for changes that you can introduce to make this app a bit friendlier to the users.

Some other general comments:

• I recommend you take a look at method st_horizontal (in apps.wizard.utils), which allows you to display streamlit widgets in one line. This can be helpful for steps 2/3, where there's lots of options that take lots of vertical space, IMO. You could squeeze them a bit. E.g. I think that one line for a small checkbox is suboptimal.
• I think you can get rid of step 2. Most of its logic can just run after after submitting the char URL in step 1 (it's fast enough I think). Some of the other options can be in step 3 (eventually renamed as step 2).

Also, you may want to look at st.form which might be useful to group different widgets. Alternatively, maybe you can use st.container(border=True) to visually group widgets.

Once again, thanks for your work!

[pabloarosado]

Hi @lucasrodes thanks for all the inputs! In the end, I went all in and allowed conversion to mp4 as well (which requires a couple of extra libraries, but I think that's fine). Feel free to give it another try and please let me know if you have any other suggestions.

[lucasrodes]

Hey @pabloarosado! I've added a couple of cosmetic changes, including:

• Changed radio buttons to be horizontal=True. It makes better use of vertical space.
• I've grouped widgets in containers, adding a border for better visual comprehension.
• I've moved the map-chart selection widgets to the last "step". It felt more natural to have it there.
• I've moved the 'get images' button to the bottom. It was a bit odd to have it in the middle of the flow, but maybe I'm missing something.
  I've changed the button to simply say "Animate," which I think is less confusing. I've left the help message as-is.
• I've improved the error message on 'too many years' to help the user take action. It is good to briefly point to the users to what they can do to solve the raised error.
• I've changed an info message to toast. When you want to show a temporary information message (e.g. the one for 'images deleted') I think st.toast is more appropriate.
• I've changed the chart-type radio button to st.segmented_control; I think it looks nicer. Same for Video/GIF

[lucasrodes]

There is a minor bug. Recreate it as:

1. Add a chart URL and follow all steps. Choose "map" as the chart type
2. GIF is successfully created
3. Then change the map type to "chart".

Nothing seems to happen then. Even after clicking 'animate'. The output remains as the original one, the map.

Related to this bug, I think we should have some flow control for the 'animate' button. Now, whenever you click on something in the third container, it will just run and generate the output. I think we should wait for the user to click on 'animate' right?

---

These are not major bugs, so fine to merge. But if you have time, good to look at.

Once again, thanks for adding this! We should def add mobile export support somehow.