Lite playground design changes

[aliabd]

Makes a lot of changes to the lite playground element:

• Adds an optional layout attribute to the custom element. If horizontal code and preview will always be side by side, if vertical they'll always be on top of each other. If it isn't provided it will switch at the md breakpoint.
• Adds copy and download buttons to the code editor
• Fixes issue with CMD+Enter adding a new line
• Cleans up the header, colors and font sizes. Moved things around a bit and removed the barrier in the middle. Not sure if the run button is in the right place though..

Having an issue getting the heights to work right, will spend more time on that.

To test just run

sh scripts/build_lite.sh
python -m http.server --directory js/lite

and open http://localhost:8000/. you can also edit js/lite/index.html

[gradio-pr-bot]

🪼 branch checks and previews

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

---

Install Gradio from this PR

pip install https://gradio-builds.s3.amazonaws.com/d1701fcd0661c810cd314829b9afa2be302939c9/gradio-4.25.0-py3-none-any.whl

Install Gradio Python Client from this PR

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

[gradio-pr-bot]

🦄 change detected

This Pull Request includes changes to the following packages.

Package	Version
@gradio/app	minor
@gradio/lite	minor
gradio	minor

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

With the following changelog entry.

Lite playground design changes

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.

[whitphx]

I also found when the system is set as dark-mode, the Gradio Playground is initialized in light-mode during the initial load, but becomes dark after the initialization finishes.

[abidlabs]

Thanks @aliabd! UI/UX looks great. I don't have much to add beyond what @whitphx pointed out in his review. The only other thing I noticed was that copy button was not working for me. Clicking on it has no effect (does not copy anything to clipboard, no console error logs)

Also the padding around the code buttons maybe should be a bit smaller:

Otherwise very nice!

[aliabd]

@abidlabs navigator clipboard access is blocked by chrome on localhost. But I tested it and it will work fine otherwise. Will fix the padding

[abidlabs]

Ah okay thanks for clarifying @aliabd! Btw I realized we don’t document the playground tag anywhere! We should add it to the Lite Guide?

[aliabd]

@abidlabs yup will add to the guide as well. Btw, it's prettier that keeps removing the line breaks in index.html, will try to fix that

[aliabd]

@abidlabs @whitphx this is ready for another pass. I fixed everything you pointed out.

Also added dark mode!

https://github.com/gradio-app/gradio/assets/9021060/69b8c9ef-3ed0-4bcb-9f62-a9f05723358d

[abidlabs]

Hmm wait actually I'm seeing something weird -- when I open http://localhost:8000/, my memory usage jumps ~15GB and other tabs start to freeze up. Do you see this behavior?

[aliabd]

@abidlabs i guess this is what happens when you have three gradio-lite elements on one page.. adding shared-worker reduces the memory load though. Just added it to index.html so at least the problem will be gone there. And we use it on the website already (that's why it doesn't reload lite for every page).

I agree with you losing focus is annoying, but we can't fix that now because currently running the code reloads the whole playground element. we discussed this a bit here: https://github.com/gradio-app/gradio/pull/7660#discussion_r1520786298 but i think we should revisit later.

[whitphx]

@aliabd Thank you, I checked the changes and confirmed it has nice look and feel! I left one comment. I think it's technically a bug but not critical so we can deal with it later in a separate PR if this PR should go.

[abidlabs]

@abidlabs i guess this is what happens when you have three gradio-lite elements on one page.. adding shared-worker reduces the memory load though. Just added it to index.html so at least the problem will be gone there. And we use it on the website already (that's why it doesn't reload lite for every page).

Got it, thanks for adding this. I tested and confirmed that the memory usage is a lot better now. Can we just make this the default? Is there any downside of using shared-worker by default @whitphx @aliabd?

I agree with you losing focus is annoying, but we can't fix that now because currently running the code reloads the whole playground element. we discussed this a bit here: https://github.com/gradio-app/gradio/pull/7660#discussion_r1520786298 but i think we should revisit later.

I agree sounds good.

Everything else lgtm! Let's get this out to the world

[whitphx]

@abidlabs

Can we just make this the default? Is there any downside of using shared-worker by default?

Yea, that's an option. On the other hand, these are what I thought when I made the SharedWorker mode optional, not the default:

• The worker logs are printed in the SharedWorker's console, not the normal developer console. So it's a bit cumbersome for users to get the logs to report errors. In Chrome, for example, users have to open chrome://inspect/#workers to access the SharedWorker's console.
• The SharedWorker mode has some things to know like below, so I thought users should be aware of using the SharedWorker mode by explicitly enabling it.
  • The file system is shared among all the Lite apps using the SharedWorker while each has a separated home dirs, so file operations outside the home e.g. on / may conflict.
  • Likewise, the Python runtime is shared, so apps may conflict. For example, if one app monkey-patches some module, another app using that module is affected too.

WDYT?

[abidlabs]

Thanks for the info @whitphx, I agree with keeping shared workers optional then. But let’s add this information to the documentation and make the recommendation that shared workers should be enabled if you have multiple playground instances on a webpage?

[whitphx]

Yes, definitely. Will write it.

[whitphx]

Added a section about SharedWorker: #7923

Update: Merged it to this PR.

[aliabd]

Thanks @whitphx for the changes. I also edited the guide to make layout attribute clearer.

Will merge this, we can make any other changes in a separate PR.