[WIP] Gradio-lite

[whitphx]

Description

A Wasm-port of Gradio using Pyodide.

• /wasm directory contains the Wasm-related code. The architecture is like Shinylive or stlite where Pyodide runs on a WebWorker (src/webworker/index.ts) and the frontend app communicates with the server running on the worker through a "worker proxy" object (src/worker-proxy.ts).
• The frontend app (@gradio/app) in the js/app/ directory uses the worker proxy.
  The frontend app is using a client library (@gradio/client in the client/js directory), so I added overridden_fetch option to the client library to inject the fetch() and used it to make the client object to dispatch requests to the worker proxy.
  • At this point, I choose this design because it minimizes the changes to the existing code of the frontend app and the client, while I don't think it's the best in some aspects, e.g. we should define a plugable interface to inject the HTTP communication layer instead of directly inject the fetch() function. So let us discuss about how we should modify the design around the client to switch between the normal HTTP comms (fetch) and the emulated HTTP for Wasm.
• As written above, currently, the Wasm-version is directly implemented modifying the code in @gradio/app and it will be compiled into the /lite directory with pnpm build:lite command.

TODO:

• Fix the build not to affect the normal build of @gradio/app (making dead code elimination to work on webworker.js).

Future Works

• Make File and UploadButton work on Wasm, which uses upload_files.
• Pre-build the CSS to apply the styles to the loading screen before the server initialization is done.
• Reload the app without re-initialization of the worker.
• Distribute the library via CDN.
• Support FFMpeg.

Closes: # (issue)

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.