diff --git a/.changeset/old-maps-enter.md b/.changeset/old-maps-enter.md new file mode 100644 index 0000000000000..3f7ee8c47a57e --- /dev/null +++ b/.changeset/old-maps-enter.md @@ -0,0 +1,8 @@ +--- +"@gradio/client": minor +"@gradio/icons": minor +"@gradio/statustracker": minor +"gradio": minor +--- + +feat:add gr.Success and update windows contributing diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 5c97432c23ca7..772b24e3cf94c 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -36,30 +36,97 @@ There are a few ways to install and run Gradio. - Clone this repo - Navigate to the repo directory and run: + + + + + + + + + +
MacOS / LinuxWindows
```bash bash scripts/install_gradio.sh ``` + + +```bash +scripts\install_gradio.bat +``` +
- Run the frontend (only required if you are making changes to the frontend and would like to preview them) + + + + + + + + + +
MacOS / LinuxWindows
```bash bash scripts/run_frontend.sh ``` + + +```bash +scripts\run_frontend.bat +``` +
- Install test requirements (only required if you want to run tests locally) (Note that it is highly recommended to use a virtual environment running **Python 3.10** since the versions of Gradio's dependencies are pinned) + + + + + + + + + +
MacOS / LinuxWindows
+ ```bash bash scripts/install_test_requirements.sh ``` + + +```bash +scripts\install_test_requirements.bat +``` +
If you have a different Python version and conflicting packages during the installation, please first run: + + + + + + + + + +
MacOS / LinuxWindows
+ ```bash bash scripts/create_test_requirements.sh ``` + + +```bash +scripts\create_test_requirements.bat +``` +
+ ### 📦 Using dev containers @@ -99,7 +166,7 @@ If you're a newcomer to Gradio, we recommend getting familiar with the overall s You can get started by creating an `app.py` file in the root: -``` +```py import gradio as gr with gr.Blocks() as demo: @@ -123,9 +190,27 @@ Note: if you have `gradio` installed elsewhere in your system, you may need to u If you're making frontend changes, start the frontend server: + + + + + + + + + + +
MacOS / LinuxWindows
+ ```bash bash scripts/run_frontend.sh ``` + + +```bash +scripts\run_frontend.bat +``` +
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). @@ -142,9 +227,26 @@ We use Pytest, Playwright and Vitest to test our code. - The Python tests are located in `/test`. To run these tests: + + + + + + + + + +
MacOS / LinuxWindows
+ ``` bash scripts/run_backend_tests.sh ``` + + +```bash +scripts\run_backend_tests.bat +``` +
- The frontend unit tests are any defined with the filename `*.test.ts`. To run them: @@ -259,7 +361,7 @@ and then from the website directory: pnpm dev ``` -#### Main vs Released +#### Main vs. Released The website supports documentation for both the latest released version on pypi as well as the main build on github. You can switch between them on the website by using the toggle on any page or by prefixing '/main' before the route in the url. For example: https://www.gradio.app/main/guides/quickstart @@ -270,9 +372,26 @@ If you're making changes to documentation and are wondering why they're not show 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: + + + + + + + + + +
MacOS / LinuxWindows
+ ``` bash scripts/run_lite.sh ``` + + +```bash +scripts\run_lite.bat +``` +
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: ``` @@ -280,9 +399,26 @@ pnpm --filter @gradio/lite pybuild ``` To generate the release build, run: + + + + + + + + + +
MacOS / LinuxWindows
+ ``` bash scripts/build_lite.sh ``` + + +```bash +scripts\build_lite.bat +``` +
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: ``` @@ -302,15 +438,50 @@ All PRs should be submitted against `main`, and ideally should address an open i Don't forget to format your code before pushing: + + + + + + + + + +
MacOS / LinuxWindows
+ ``` bash scripts/format_backend.sh ``` + + +```bash +scripts\format_backend.bat +``` +
And if you made changes to the frontend: + + + + + + + + + + +
MacOS / LinuxWindows
+ ``` bash scripts/format_frontend.sh ``` + + +```bash +scripts\format_frontend.bat +``` +
Thank you for taking the time to contribute to Gradio! @@ -339,10 +510,29 @@ rm pnpm-lock.yaml and run the install scripts: + + + + + + + + + + +
MacOS / LinuxWindows
+ ``` bash scripts/install_gradio.sh bash scripts/build_frontend.sh ``` + + +```bash +scripts\install_gradio.bat +scripts\build_frontend.bat +``` +
--- ```FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory``` when running `scripts/build_frontend.sh`. diff --git a/client/js/src/types.ts b/client/js/src/types.ts index 84baddf2bafe1..853fc7639048b 100644 --- a/client/js/src/types.ts +++ b/client/js/src/types.ts @@ -331,7 +331,7 @@ export type GradioEvent = { export interface Log { log: string; title: string; - level: "warning" | "info"; + level: "warning" | "info" | "success"; } export interface Render { data: { diff --git a/gradio/__init__.py b/gradio/__init__.py index e5c0ae975313b..f621285f0039f 100644 --- a/gradio/__init__.py +++ b/gradio/__init__.py @@ -84,13 +84,7 @@ FlaggingCallback, SimpleCSVLogger, ) -from gradio.helpers import ( - Info, - Progress, - Warning, - skip, - update, -) +from gradio.helpers import Info, Progress, Success, Warning, skip, update from gradio.helpers import create_examples as Examples # noqa: N812 from gradio.interface import Interface, TabbedInterface, close_all from gradio.layouts import Accordion, Column, Group, Row, Tab, TabItem, Tabs @@ -173,6 +167,7 @@ "ImageEditor", "ImageMask", "Info", + "Success", "Interface", "JSON", "Json", diff --git a/gradio/helpers.py b/gradio/helpers.py index c5e9f17f8514f..12461a3bb2a8a 100644 --- a/gradio/helpers.py +++ b/gradio/helpers.py @@ -1018,7 +1018,7 @@ def skip() -> dict: def log_message( message: str, title: str, - level: Literal["info", "warning"] = "info", + level: Literal["info", "warning", "success"] = "info", duration: float | None = 10, visible: bool = True, ): @@ -1029,7 +1029,7 @@ def log_message( if blocks is None or event_id is None: # Function called outside of Gradio if blocks is None # Or from /api/predict if event_id is None - if level == "info": + if level in ("info", "success"): print(message) elif level == "warning": warnings.warn(message) @@ -1067,7 +1067,7 @@ def hello_world(): with gr.Blocks() as demo: md = gr.Markdown() demo.load(hello_world, inputs=None, outputs=[md]) - demo.queue().launch() + demo.launch() """ log_message( message, title=title, level="warning", duration=duration, visible=visible @@ -1097,6 +1097,34 @@ def hello_world(): with gr.Blocks() as demo: md = gr.Markdown() demo.load(hello_world, inputs=None, outputs=[md]) - demo.queue().launch() + demo.launch() """ log_message(message, title=title, level="info", duration=duration, visible=visible) + + +@document(documentation_group="modals") +def Success( # noqa: N802 + message: str = "Success.", + duration: float | None = 10, + visible: bool = True, + title: str = "Success", +): + """ + This function allows you to pass custom success messages to the user. You can do so simply by writing `gr.Success('message here')` in your function, and when that line is executed the custom message will appear in a modal on the demo. The modal is green by default and has the heading: "Success." Queue must be enabled for this behavior; otherwise, the message will be printed to the console. + Parameters: + message: The success message to be displayed to the user. Can be HTML, which will be rendered in the modal. + duration: The duration in seconds that the success message should be displayed for. If None or 0, the message will be displayed indefinitely until the user closes it. + visible: Whether the error message should be displayed in the UI. + title: The title to be displayed to the user at the top of the modal. + Example: + def hello_world(): + gr.Success('Operation completed successfully!') + return "hello world" + with gr.Blocks() as demo: + md = gr.Markdown() + demo.load(hello_world, inputs=None, outputs=[md]) + demo.launch() + """ + log_message( + message, title=title, level="success", duration=duration, visible=visible + ) diff --git a/gradio/queueing.py b/gradio/queueing.py index 82ad5568d6fe9..712caf24354b9 100644 --- a/gradio/queueing.py +++ b/gradio/queueing.py @@ -396,7 +396,7 @@ def log_message( event_id: str, log: str, title: str, - level: Literal["info", "warning"], + level: Literal["info", "warning", "success"], duration: float | None = 10, visible: bool = True, ): diff --git a/gradio/server_messages.py b/gradio/server_messages.py index 7eadc4437d2a5..e07477c5e7c97 100644 --- a/gradio/server_messages.py +++ b/gradio/server_messages.py @@ -25,7 +25,7 @@ class ProgressMessage(BaseMessage): class LogMessage(BaseMessage): msg: Literal[ServerMessage.log] = ServerMessage.log # type: ignore log: str - level: Literal["info", "warning"] + level: Literal["info", "warning", "success"] duration: Optional[float] = 10 visible: bool = True title: str diff --git a/js/icons/src/Success.svelte b/js/icons/src/Success.svelte new file mode 100644 index 0000000000000..436fcec208190 --- /dev/null +++ b/js/icons/src/Success.svelte @@ -0,0 +1,18 @@ + diff --git a/js/icons/src/index.ts b/js/icons/src/index.ts index 75cdc71a921e3..9cfcae47b2482 100644 --- a/js/icons/src/index.ts +++ b/js/icons/src/index.ts @@ -24,6 +24,7 @@ export { default as Maximize } from "./Maximize.svelte"; export { default as Forward } from "./Forward.svelte"; export { default as File } from "./File.svelte"; export { default as Info } from "./Info.svelte"; +export { default as Success } from "./Success.svelte"; export { default as Image } from "./Image.svelte"; export { default as ImagePaste } from "./ImagePaste.svelte"; export { default as JSON } from "./JSON.svelte"; diff --git a/js/statustracker/static/ToastContent.svelte b/js/statustracker/static/ToastContent.svelte index 63969d43dcb1b..641f7ff9a2636 100644 --- a/js/statustracker/static/ToastContent.svelte +++ b/js/statustracker/static/ToastContent.svelte @@ -1,5 +1,5 @@