From 7a6b2b8ba707d7488c8b2084cf73526b315bd686 Mon Sep 17 00:00:00 2001 From: Abubakar Abid Date: Fri, 22 Dec 2023 11:57:00 -0800 Subject: [PATCH 1/9] changes --- CONTRIBUTING.md | 31 +++++++++++++++++++++++++------ scripts/build_lite.sh | 8 ++++++++ scripts/launch_lite.sh | 9 +++++++++ 3 files changed, 42 insertions(+), 6 deletions(-) create mode 100644 scripts/build_lite.sh create mode 100644 scripts/launch_lite.sh diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 645d033e1606..e359238cb505 100644 --- a/CONTRIBUTING.md +++ b/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,12 +181,22 @@ 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). The files specific to Gradio-Lite are located in the `js/lite` folder. + +You can build Gradio-lite locally by running: + ``` -pnpm storybook +bash scripts/build_lite.sh +``` + +and launch a test app by doing: + +``` +bash scripts/launch_lite.sh ``` @@ -191,7 +206,7 @@ All PRs should be against `main`, and ideally should address an open issue, unle - 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 +216,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. diff --git a/scripts/build_lite.sh b/scripts/build_lite.sh new file mode 100644 index 000000000000..2894e2e6854b --- /dev/null +++ b/scripts/build_lite.sh @@ -0,0 +1,8 @@ +#!/bin/bash + +cd "$(dirname ${0})/.." +source scripts/helpers.sh + +pnpm_required + +pnpm --filter @gradio/app dev:lite \ No newline at end of file diff --git a/scripts/launch_lite.sh b/scripts/launch_lite.sh new file mode 100644 index 000000000000..e9f4ac82c5b4 --- /dev/null +++ b/scripts/launch_lite.sh @@ -0,0 +1,9 @@ +#!/bin/bash + +cd "$(dirname ${0})/.." +source scripts/helpers.sh + +pnpm_required + +pnpm --filter @gradio/app dev:lite +python -m http.server -d js/lite \ No newline at end of file From f1ef1608f40cea18202dedefc0e1549ccde3bbbc Mon Sep 17 00:00:00 2001 From: "Yuichiro Tachibana (Tsuchiya)" Date: Tue, 26 Dec 2023 17:02:04 +0900 Subject: [PATCH 2/9] Fix scripts/launch_lite.sh removing the unnecessary execution of `python -m http.server` --- scripts/launch_lite.sh | 1 - 1 file changed, 1 deletion(-) diff --git a/scripts/launch_lite.sh b/scripts/launch_lite.sh index e9f4ac82c5b4..9c2465885617 100644 --- a/scripts/launch_lite.sh +++ b/scripts/launch_lite.sh @@ -6,4 +6,3 @@ source scripts/helpers.sh pnpm_required pnpm --filter @gradio/app dev:lite -python -m http.server -d js/lite \ No newline at end of file From c0ecde406d593d29778fb9f7520cd445a5c665e1 Mon Sep 17 00:00:00 2001 From: "Yuichiro Tachibana (Tsuchiya)" Date: Tue, 26 Dec 2023 17:02:49 +0900 Subject: [PATCH 3/9] Add an exec permission to scripts/launch_lite.sh (`chmod +x`) --- scripts/launch_lite.sh | 0 1 file changed, 0 insertions(+), 0 deletions(-) mode change 100644 => 100755 scripts/launch_lite.sh diff --git a/scripts/launch_lite.sh b/scripts/launch_lite.sh old mode 100644 new mode 100755 From eb912d52da06451a9a9c6fd1d572e8b0a8ed8d64 Mon Sep 17 00:00:00 2001 From: "Yuichiro Tachibana (Tsuchiya)" Date: Tue, 26 Dec 2023 17:17:55 +0900 Subject: [PATCH 4/9] Update launch_lite.sh to run the pybuild command when necessary --- scripts/helpers.sh | 11 +++++++++++ scripts/launch_lite.sh | 23 +++++++++++++++++++++-- 2 files changed, 32 insertions(+), 2 deletions(-) diff --git a/scripts/helpers.sh b/scripts/helpers.sh index 17ebbf7546a7..14e735d13bd6 100644 --- a/scripts/helpers.sh +++ b/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/" +} diff --git a/scripts/launch_lite.sh b/scripts/launch_lite.sh index 9c2465885617..71ab80e39983 100755 --- a/scripts/launch_lite.sh +++ b/scripts/launch_lite.sh @@ -1,8 +1,27 @@ -#!/bin/bash +#!/bin/bash -eu -cd "$(dirname ${0})/.." +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/app dev:lite From 2d5a4de01fac04e6518c1865998057982cd700f7 Mon Sep 17 00:00:00 2001 From: "Yuichiro Tachibana (Tsuchiya)" Date: Tue, 26 Dec 2023 17:28:17 +0900 Subject: [PATCH 5/9] Update CONTRIBUTING.md --- CONTRIBUTING.md | 18 ++++++++++-------- 1 file changed, 10 insertions(+), 8 deletions(-) diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index e359238cb505..94c5df853591 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -184,21 +184,23 @@ You should now be able to view a local version of the website at `http://localho ## ๐ŸŒŽ Gradio-Lite -Gradio-Lite is a Pyodide-based library that lets you run Gradio serverless (in other words, directly in your browser). The files specific to Gradio-Lite are located in the `js/lite` folder. - -You can build Gradio-lite locally by running: +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: +``` +bash scripts/launch_lite.sh +``` +To generate the release build, run: ``` bash scripts/build_lite.sh ``` - -and launch a test app by doing: - +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: ``` -bash scripts/launch_lite.sh +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 From a971aaa78855220e8a1e7f2ddfe28bf44ec3c897 Mon Sep 17 00:00:00 2001 From: "Yuichiro Tachibana (Tsuchiya)" Date: Tue, 26 Dec 2023 17:28:30 +0900 Subject: [PATCH 6/9] Fix scripts/build_lite.sh --- scripts/build_lite.sh | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/scripts/build_lite.sh b/scripts/build_lite.sh index 2894e2e6854b..275b0b9061b3 100644 --- a/scripts/build_lite.sh +++ b/scripts/build_lite.sh @@ -1,8 +1,8 @@ -#!/bin/bash +#!/bin/bash -eu cd "$(dirname ${0})/.." source scripts/helpers.sh pnpm_required -pnpm --filter @gradio/app dev:lite \ No newline at end of file +pnpm --filter @gradio/app build:lite From 69bc6b6030b595d7535fd399ed33cefb9becc011 Mon Sep 17 00:00:00 2001 From: Abubakar Abid Date: Tue, 26 Dec 2023 11:56:35 -0800 Subject: [PATCH 7/9] rename --- CONTRIBUTING.md | 2 +- scripts/{launch_lite.sh => run_lite.sh} | 0 2 files changed, 1 insertion(+), 1 deletion(-) rename scripts/{launch_lite.sh => run_lite.sh} (100%) diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 94c5df853591..141cfa36e646 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -188,7 +188,7 @@ Gradio-Lite is a Pyodide-based library that lets you run Gradio serverless (in o You can start the development server by running: ``` -bash scripts/launch_lite.sh +bash scripts/run_lite.sh ``` To generate the release build, run: diff --git a/scripts/launch_lite.sh b/scripts/run_lite.sh similarity index 100% rename from scripts/launch_lite.sh rename to scripts/run_lite.sh From 6f53c765959dedaad9cec8a8b8327b63df09f3de Mon Sep 17 00:00:00 2001 From: "Yuichiro Tachibana (Tsuchiya)" Date: Wed, 27 Dec 2023 10:45:11 +0900 Subject: [PATCH 8/9] Update CONTRIBUTING.md --- CONTRIBUTING.md | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 141cfa36e646..8c16f67fb76c 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -191,6 +191,11 @@ You can start the development server by running: 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 From fe0ab0cd777c8270c58625a8bc60f409f6badd2d Mon Sep 17 00:00:00 2001 From: "Yuichiro Tachibana (Tsuchiya)" Date: Wed, 27 Dec 2023 11:11:55 +0900 Subject: [PATCH 9/9] Update scripts/run_lite.sh --- scripts/run_lite.sh | 2 ++ 1 file changed, 2 insertions(+) diff --git a/scripts/run_lite.sh b/scripts/run_lite.sh index 71ab80e39983..b8522f33ffc7 100755 --- a/scripts/run_lite.sh +++ b/scripts/run_lite.sh @@ -24,4 +24,6 @@ else pnpm --filter @gradio/app pybuild fi +pnpm --filter @gradio/client build + pnpm --filter @gradio/app dev:lite