Convert Docs Demos to Lite

[aliabd]

Converts the demos on the docs to use the lite playground element instead of embedding from spaces.

This is what it looks like:

lite-docs.mp4

I removed/replaced the demos that won't work with lite. Please test them out on the preview (make sure you're on main!)

I also overided some small styling on the playground element, for example i don't think side by side works with this amount of space, so I used css to force code editor to be on top of preview (where it normally does that at <md breakpoint). I can clean this up on the Playground element in the future once i'm sure about the styling. I actually have a few other things i'd like to change as well.

There are still a lot of demos on the website that embed from spaces (guides, landing page, embedded components in docs, etc) but this is a good place to start.

Also so that there aren't any broken demos on /docs when this is merged, I kept those embedding from spaces for now. So only /main/docs uses lite. This is because some of the demos on the released version don't work with lite. Right before the next release I can undo the changes in this commit and those will be lite too.

[gradio-pr-bot]

🪼 branch checks and previews

•	Name	Status	URL
	Spaces	ready!	Spaces preview
	Website	ready!	Website preview
	Storybook	ready!	Storybook preview
🦄	Changes	detected!	Details

---

Install Gradio from this PR

pip install https://gradio-builds.s3.amazonaws.com/6133642fee8330a87fb12029d556a7867e55512d/gradio-4.22.0-py3-none-any.whl

Install Gradio Python Client from this PR

pip install "gradio-client @ git+https://github.com/gradio-app/gradio@6133642fee8330a87fb12029d556a7867e55512d#subdirectory=client/python"

[gradio-pr-bot]

🦄 change detected

This Pull Request includes changes to the following packages.

Package	Version
gradio	minor
website	minor

• Maintainers can select this checkbox to manually select packages to update.

With the following changelog entry.

Convert Docs Demos to Lite

Maintainers or the PR author can modify the PR title to modify this entry.

Something isn't right?

• Maintainers can change the version label to modify the version bump.
• If the bot has failed to detect any changes, or if this pull request needs to update multiple packages to different versions or requires a more comprehensive changelog entry, maintainers can update the changelog file directly.

[abidlabs]

This looks awesome @aliabd! Thanks for through and updating the demos as well

I just noticed two small issues:

1. When you change the component whose docs you are viewing, gradio/lite has to load all over again. I thought the SPA nature of our website would mean we only have to load it once? If there's a way to enable that, that'd be awesome.

2. While gradio/lite is loading, there's no way for a user to copy-paste the code for a particular demo. Its not as big of a problem when the demo is interactive, because at that point, you can just click inside the code block, and select all of the text, but otherwise its kind of annoying.

Ideally, we include both the copy and download buttons that are present in the regular Code component:

Neither of these are blockers. In particular, for the 2nd one, perhaps it'd be good to have a separate PR that updates the <gradio-lite playground> tag to include this.

If so, I'd also suggest a few other things I noticed:

• When pressing CMD+Enter, it also creates a new line in the code. It should only Run the code block
• I think we should add a layout attribute that can be "horizontal" or "vertical" so that we don't need the custom css in this PR
• Design nits:

• I think the size of words "app.py", "interactive", and "run" should all be the same. They should all be the size that "app.py" currently is
• I think the lightning bolt next to Interactive should actually be orange (sorry I said gray before but I think orange is better since the color of the loading circle is also orange)
• I think the Run button should be orange as well to make it more prominent.
• Btw love the ⌘+↵

[aliabd]

Thanks @abidlabs for the detailed feedback!

1. Check now! :)

2. There was a really annoying styling issue with those buttons that I couldn't figure out. So I temporarily hid them using css.
   

   gradio/js/app/src/lite/Playground.svelte

   Lines 322 to 327 in cf98c7e

   	:global(.code-editor .container) {
   	display: none;
   	}
   	:global(.code-editor button) {
   	display: none;
   	}

   
   Then I kind of forgot about them. I'll add them back for sure.

I agree with all your suggestions, and had thought about some independently while I was making the PR. Def wanna change the design a bit more. Anyway will make a PR that:

• brings back code editor buttons
• fixes cmd+enter so there's no newline
• adds the layout attr
• design nits

[abidlabs]

🔥🔥🔥🔥

Dope! What was the fix for (1)?

[aliabd]

shared-worker mode! cc @whitphx