Adding instructions on how to build Gradio-Lite locally

CONTRIBUTING.md

@@ -107,6 +107,7 @@ If you're making frontend changes, start the frontend server:
 ```
 pnpm dev
 ```
+
 This will open a separate browser tab. By default, Gradio will launch this on port 9876. Any changes to the frontend will also reload automatically in the browser. For more information about developing in the frontend, you can refer to [js/README.md](js/README.md).
 
 We also have demos of all our components in the `/gradio/demo` directory. To get our simple gradio Chatbot running locally:
@@ -150,7 +151,11 @@ You can also run browser tests in the UI mode by adding the `--ui` flag:
 pnpm test:browser --ui
 ```
 
-If you have made any significant visual changes to a component, we encourage you to add a new Storybook story or amend an existing one to reflect them. You can create a new story with a `*.stories.svelte` file. 
+If you have made any significant visual changes to a component, we encourage you to add a new Storybook story or amend an existing one to reflect them. You can create a new story with a `*.stories.svelte` file. You can run the storybook locally:
+
+```
+pnpm storybook
+```
 
 ## 🕸️ Gradio Website
 
@@ -176,22 +181,39 @@ to
 ```
 
 You should now be able to view a local version of the website at `http://localhost:4321`. 
-## 📚 Component Storybook
 
-If you would like to fix an issue or contribute to our Storybook, you can get it running locally with:
+## 🌎 Gradio-Lite
 
+Gradio-Lite is a Pyodide-based library that lets you run Gradio serverless (in other words, directly in your browser).
+
+You can start the development server by running:
 ```
-pnpm storybook
+bash scripts/run_lite.sh
 ```
 
+If you make changes to the Python code during development, you will need to rebuild the Python packages loaded to Graio-Lite. To do this, run:
+```
+pnpm --filter @gradio/app pybuild
+```
+
+To generate the release build, run:
+```
+bash scripts/build_lite.sh
+```
+The release build will be located in the `dist` directory in the `js/lite` project.
+To test it, you can run a local server in the `js/lite` directory:
+```
+python -m http.server --directory js/lite
+```
+and navigate to `http://localhost:8000` in your browser. The demo page `index.html` located in the `js/lite` directory will be loaded.
 
 ## 📮 Submitting PRs
 
 All PRs should be against `main`, and ideally should address an open issue, unless the change is small. Direct commits to main are blocked, and PRs require an approving review to merge into main. By convention, the Gradio maintainers will review PRs when:
 
 - An initial review has been requested
 - A clear, descriptive title has been assigned to the PR
-- A maintainer (@abidlabs, @aliabid94, @aliabd, @AK391, @dawoodkhan82, @pngwn, @freddyaboulton, @hannahblair) is tagged in the PR comments and asked to complete a review
+- A maintainer (@abidlabs, @aliabid94, @aliabd, @AK391, @dawoodkhan82, @pngwn, @freddyaboulton, @hannahblair, @hysts, @whitphx) is tagged in the PR comments and asked to complete a review
 
  🧹 We ask that you make sure initial CI checks are passing before requesting a review. One of the Gradio maintainers will merge the PR when all the checks are passing.  You can safely ignore the Vercel and Spaces checks, which only run under maintainers' pull requests.  
 
@@ -201,11 +223,15 @@ Don't forget the format your code before pushing:
 bash scripts/format_backend.sh
 ```
 
+And if you made changes to the frontend: 
+
 ```
 bash scripts/format_frontend.sh
 ```
 
-Thank you for taking the time to contribute to our project! 
+Thank you for taking the time to contribute to Gradio! 
+
+
 ## ❓ Need help getting started?
 
 - Browse [issues](https://github.com/gradio-app/gradio/issues?q=is%3Aopen+is%3Aissue+label%3A%22good+first+issue%22) with the "good first issue" label. These are issues we think are good for newcomers.

scripts/build_lite.sh

@@ -0,0 +1,8 @@
+#!/bin/bash -eu
+
+cd "$(dirname ${0})/.."
+source scripts/helpers.sh
+
+pnpm_required
+
+pnpm --filter @gradio/app build:lite

scripts/helpers.sh

@@ -72,3 +72,14 @@ function aws_required() {
 function git_required() {
   program_required "git" "https://git-scm.com/downloads"
 }
+
+#######################################
+# Check for the jq program.
+# Arguments:
+#   None
+# Outputs:
+#   None
+#######################################
+function jq_required() {
+  program_required "jq" "https://jqlang.github.io/jq/"
+}

scripts/run_lite.sh

@@ -0,0 +1,29 @@
+#!/bin/bash -eu
+
+ROOTDIR=$(realpath $(dirname ${0})/..)
+
+cd "${ROOTDIR}"
+source scripts/helpers.sh
+
+pnpm_required
+jq_required
+
+GRADIO_VERSION=$(jq -r .version ${ROOTDIR}/gradio/package.json)
+GRADIO_CLIENT_VERSION=$(jq -r .version ${ROOTDIR}/client/python/gradio_client/package.json)
+GRADIO_WHEEL_PATH="${ROOTDIR}/dist/gradio-${GRADIO_VERSION}-py3-none-any.whl"
+GRADIO_CLIENT_FILE_PATH="${ROOTDIR}/client/python/dist/gradio_client-${GRADIO_CLIENT_VERSION}-py3-none-any.whl"
+
+echo "Checking for gradio and gradio_client wheel files..."
+echo "GRADIO_WHEEL_PATH: ${GRADIO_WHEEL_PATH}"
+echo "GRADIO_CLIENT_FILE_PATH: ${GRADIO_CLIENT_FILE_PATH}"
+
+if [ -f "${GRADIO_WHEEL_PATH}" ] && [ -f "${GRADIO_CLIENT_FILE_PATH}" ]; then
+  echo "Found gradio and gradio_client wheel files..."
+else
+  echo "Building gradio and gradio_client wheel files..."
+  pnpm --filter @gradio/app pybuild
+fi
+
+pnpm --filter @gradio/client build
+
+pnpm --filter @gradio/app dev:lite