Add support for altair plots

[freddyaboulton]

Description

Run python demo/altair_plot/run.py

Getting the spacing to work out may be tricky. I tried setting the width and height to container (https://vega.github.io/vega-lite/docs/size.html#specifying-responsive-width-and-height) but that doesn't work (plot doesn't show up). To complicate matters, users can specify their own plot width and height on the python side so we should be careful to respect those choices.

For now I'm centering the plot to make it look nicer despite the white space.

Checklist:

• I have performed a self-review of my own code
• I have added a short summary of my change to the CHANGELOG.md
• My code follows the style guidelines of this project
• I have commented my code in hard-to-understand areas
• I have made corresponding changes to the documentation
• I have added tests that prove my fix is effective or that my feature works
• New and existing unit tests pass locally with my changes

A note about the CHANGELOG

Hello 👋 and thank you for contributing to Gradio!

All pull requests must update the change log located in CHANGELOG.md, unless the pull request is labeled with the "no-changelog-update" label.

Please add a brief summary of the change to the Upcoming Release > Full Changelog section of the CHANGELOG.md file and include
a link to the PR (formatted in markdown) and a link to your github profile (if you like). For example, "* Added a cool new feature by [@myusername](link-to-your-github-profile) in [PR 11111](https://github.com/gradio-app/gradio/pull/11111)".

If you would like to elaborate on your change further, feel free to include a longer explanation in the other sections.
If you would like an image/gif/video showcasing your feature, it may be best to edit the CHANGELOG file using the
GitHub web UI since that lets you upload files directly via drag-and-drop.

[github-actions]

All the demos for this PR have been deployed at https://huggingface.co/spaces/gradio-pr-deploys/pr-2741-all-demos

[freddyaboulton]

I added this cause I got missing peer dependencies errors in pnpm. Not sure if it's actually needed

[abidlabs]

This is really great @freddyaboulton! LGTM

Suggestions:

• add Altair plots to the outbreak_forecast demo since that's our go-to demo for plots
• add altair_plot as a demo in the docstring for the Plot component

Some suggestions for future:

• When we implement our native plots, it would be great if we could make the plots have a transparent background instead of a white background so that they work well in dark mode too. Or we pass down the appropriate background color as part of the theme
• It would be great if the Plot component could support .style(container=False) like the other components so that we could only display the plot and not the container if needed

[freddyaboulton]

@abidlabs Turns out transparent background will be straightforward. You can even specify that from the python side. I think the tricky thing will be applying the theme colors. Will definitely have to chat with @pngwn about that!

Thank you for the review!

[github-actions]

The demo notebooks don't match the run.py files. Please run this command from the root of the repo and then commit the changes:

pip install nbformat && cd demo && python generate_notebooks.py

[github-actions]

The demo notebooks don't match the run.py files. Please run this command from the root of the repo and then commit the changes:

pip install nbformat && cd demo && python generate_notebooks.py

[github-actions]

The demo notebooks don't match the run.py files. Please run this command from the root of the repo and then commit the changes:

pip install nbformat && cd demo && python generate_notebooks.py

[github-actions]

The demo notebooks don't match the run.py files. Please run this command from the root of the repo and then commit the changes:

pip install nbformat && cd demo && python generate_notebooks.py

[pngwn]

Frontend looks good to me!

[freddyaboulton]

Thank you @pngwn !! 🐧