Refactoring <gradio-lite /> component making the code simpler and fixing a Playground mode bug

[whitphx]

Description

Closes: #7942

Currently, the <Index /> and the <Playground /> components are instantiated at the top level like this:

gradio/js/app/src/lite/index.ts

Line 219 in a92c3e8

app = new Index({

gradio/js/app/src/lite/index.ts

Line 198 in a92c3e8

app = new Playground({

However, it makes the code complex and also causes the problem of #7942 because <Playground /> is recreated upon every run_code() and run_file().

This PR fixes it.

• Introduce a single root component <LiteIndex /> that handles both <Index /> and <Playground />.
  • It keeps the same <Playground /> instance mounted across multiple runs, which solves Undo/redo don't work on the Lite Playground after rerunning #7942 .
• Get rid of <Index /> from <Playground /> by using slots API. This became possible due to the change above, as the slots API is available inside components, but can't be used from the new Playground()-style usage.
• As a result, the code became simpler.

[gradio-pr-bot]

🪼 branch checks and previews

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

---

Install Gradio from this PR

pip install https://gradio-builds.s3.amazonaws.com/7f99573c9f3382bde55778decaf6e8ccc9a72330/gradio-4.37.2-py3-none-any.whl

Install Gradio Python Client from this PR

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

Install Gradio JS Client from this PR

npm install https://gradio-builds.s3.amazonaws.com/7f99573c9f3382bde55778decaf6e8ccc9a72330/gradio-client-1.2.1.tgz

[gradio-pr-bot]

🦄 change detected

This Pull Request includes changes to the following packages.

Package	Version
@gradio/app	patch
gradio	patch

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

With the following changelog entry.

Refactoring component making the code simpler and fixing a Playground mode bug

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.

[aliabd]

Thanks @whitphx! Tested everything and it all works great.

I had tried to do something like this when I first created the playground element, but I couldn't figure it out. I didn't know you could run the worker_proxy methods (like runPythonCode) inside the svelte file, so I thought I'd have to send them back to the index.ts. Anyway, this is much cleaner!

[abidlabs]

Sweet, thanks guys! Going to merge this in so that we can do the release tomorrow :)