add gr.Success and update windows contributing (#10262)

* include windows contributions

* add gr.Success

* add changeset

* contributing

* changes

* clean docstring

* format

* fix typo

---------

Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com>
Co-authored-by: Abubakar Abid <abubakar@huggingface.co>
This commit is contained in:
Hafedh Hichri 2024-12-30 16:25:48 +01:00 committed by GitHub
parent aa2eec284e
commit f3bedd4011
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
25 changed files with 608 additions and 19 deletions

View File

@ -0,0 +1,8 @@
---
"@gradio/client": minor
"@gradio/icons": minor
"@gradio/statustracker": minor
"gradio": minor
---
feat:add gr.Success and update windows contributing

View File

@ -36,30 +36,97 @@ There are a few ways to install and run Gradio.
- Clone this repo
- Navigate to the repo directory and run:
<table>
<tr>
<th>MacOS / Linux</th>
<th>Windows</th>
</tr>
<tr>
<td>
```bash
bash scripts/install_gradio.sh
```
</td>
<td>
```bash
scripts\install_gradio.bat
```
</td>
</tr>
</table>
- Run the frontend (only required if you are making changes to the frontend and would like to preview them)
<table>
<tr>
<th>MacOS / Linux</th>
<th>Windows</th>
</tr>
<tr>
<td>
```bash
bash scripts/run_frontend.sh
```
</td>
<td>
```bash
scripts\run_frontend.bat
```
</td>
</tr>
</table>
- 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)
<table>
<tr>
<th>MacOS / Linux</th>
<th>Windows</th>
</tr>
<tr>
<td>
```bash
bash scripts/install_test_requirements.sh
```
</td>
<td>
```bash
scripts\install_test_requirements.bat
```
</td>
</tr>
</table>
If you have a different Python version and conflicting packages during the installation, please first run:
<table>
<tr>
<th>MacOS / Linux</th>
<th>Windows</th>
</tr>
<tr>
<td>
```bash
bash scripts/create_test_requirements.sh
```
</td>
<td>
```bash
scripts\create_test_requirements.bat
```
</td>
</tr>
</table>
### 📦 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:
<table>
<tr>
<th>MacOS / Linux</th>
<th>Windows</th>
</tr>
<tr>
<td>
```bash
bash scripts/run_frontend.sh
```
</td>
<td>
```bash
scripts\run_frontend.bat
```
</td>
</tr>
</table>
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:
<table>
<tr>
<th>MacOS / Linux</th>
<th>Windows</th>
</tr>
<tr>
<td>
```
bash scripts/run_backend_tests.sh
```
</td>
<td>
```bash
scripts\run_backend_tests.bat
```
</td>
</tr>
</table>
- 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:
<table>
<tr>
<th>MacOS / Linux</th>
<th>Windows</th>
</tr>
<tr>
<td>
```
bash scripts/run_lite.sh
```
</td>
<td>
```bash
scripts\run_lite.bat
```
</td>
</tr>
</table>
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:
<table>
<tr>
<th>MacOS / Linux</th>
<th>Windows</th>
</tr>
<tr>
<td>
```
bash scripts/build_lite.sh
```
</td>
<td>
```bash
scripts\build_lite.bat
```
</td>
</tr>
</table>
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:
<table>
<tr>
<th>MacOS / Linux</th>
<th>Windows</th>
</tr>
<tr>
<td>
```
bash scripts/format_backend.sh
```
</td>
<td>
```bash
scripts\format_backend.bat
```
</td>
</tr>
</table>
And if you made changes to the frontend:
<table>
<tr>
<th>MacOS / Linux</th>
<th>Windows</th>
</tr>
<tr>
<td>
```
bash scripts/format_frontend.sh
```
</td>
<td>
```bash
scripts\format_frontend.bat
```
</td>
</tr>
</table>
Thank you for taking the time to contribute to Gradio!
@ -339,10 +510,29 @@ rm pnpm-lock.yaml
and run the install scripts:
<table>
<tr>
<th>MacOS / Linux</th>
<th>Windows</th>
</tr>
<tr>
<td>
```
bash scripts/install_gradio.sh
bash scripts/build_frontend.sh
```
</td>
<td>
```bash
scripts\install_gradio.bat
scripts\build_frontend.bat
```
</td>
</tr>
</table>
---
```FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory``` when running `scripts/build_frontend.sh`.

View File

@ -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: {

View File

@ -84,13 +84,7 @@ from gradio.flagging import (
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 @@ __all__ = [
"ImageEditor",
"ImageMask",
"Info",
"Success",
"Interface",
"JSON",
"Json",

View File

@ -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 Warning( # noqa: N802
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 Info( # noqa: N802
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
)

View File

@ -396,7 +396,7 @@ class Queue:
event_id: str,
log: str,
title: str,
level: Literal["info", "warning"],
level: Literal["info", "warning", "success"],
duration: float | None = 10,
visible: bool = True,
):

View File

@ -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

View File

@ -0,0 +1,18 @@
<svg
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
width="100%"
height="100%"
xmlns="http://www.w3.org/2000/svg"
aria-hidden="true"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
/>
</svg>

After

Width:  |  Height:  |  Size: 351 B

View File

@ -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";

View File

@ -1,5 +1,5 @@
<script lang="ts">
import { Error, Info, Warning } from "@gradio/icons";
import { Error, Info, Warning, Success } from "@gradio/icons";
import DOMPurify from "dompurify";
import { createEventDispatcher, onMount } from "svelte";
import { fade } from "svelte/transition";
@ -66,6 +66,8 @@
<Warning />
{:else if type === "info"}
<Info />
{:else if type === "success"}
<Success />
{:else if type === "error"}
<Error />
{/if}
@ -133,6 +135,11 @@
background-color: var(--color-grey-950);
}
.toast-body.success {
border: 1px solid var(--color-green-500);
background-color: var(--color-grey-950);
}
.toast-title.error {
color: var(--color-red-50);
}
@ -143,6 +150,9 @@
.toast-title.info {
color: var(--color-grey-50);
}
.toast-title.success {
color: var(--color-green-50);
}
.toast-close.error {
color: var(--color-red-500);
}
@ -152,6 +162,9 @@
.toast-close.info {
color: var(--color-grey-500);
}
.toast-close.success {
color: var(--color-green-500);
}
.toast-text.error {
color: var(--color-red-50);
}
@ -161,6 +174,9 @@
.toast-text.info {
color: var(--color-grey-50);
}
.toast-text.success {
color: var(--color-green-50);
}
.toast-icon.error {
color: var(--color-red-500);
}
@ -170,6 +186,9 @@
.toast-icon.info {
color: var(--color-grey-500);
}
.toast-icon.success {
color: var(--color-green-500);
}
.timer.error {
background: var(--color-red-500);
}
@ -179,6 +198,9 @@
.timer.info {
background: var(--color-grey-500);
}
.timer.success {
background: var(--color-green-500);
}
}
:global(.dark) .toast-body.error {
@ -197,13 +219,22 @@
.toast-body.info {
border: 1px solid var(--color-grey-700);
background: var(--color-grey-50);
background: var (--color-grey-50);
}
:global(.dark) .toast-body.info {
border: 1px solid var(--color-grey-500);
background-color: var(--color-grey-950);
}
.toast-body.success {
border: 1px solid var(--color-green-700);
background: var(--color-green-50);
}
:global(.dark) .toast-body.success {
border: 1px solid var(--color-green-500);
background-color: var(--color-grey-950);
}
.toast-title {
display: flex;
align-items: center;
@ -233,6 +264,13 @@
color: var(--color-grey-50);
}
.toast-title.success {
color: var(--color-green-700);
}
:global(.dark) .toast-title.success {
color: var(--color-green-50);
}
.toast-close {
margin: 0 var(--size-3);
border-radius: var(--size-3);
@ -262,6 +300,13 @@
color: var(--color-grey-500);
}
.toast-close.success {
color: var(--color-green-700);
}
:global(.dark) .toast-close.success {
color: var(--color-green-500);
}
.toast-text {
font-size: var(--text-lg);
}
@ -289,6 +334,13 @@
color: var(--color-grey-50);
}
.toast-text.success {
color: var(--color-green-700);
}
:global(.dark) .toast-text.success {
color: var(--color-green-50);
}
.toast-details {
margin: var(--size-3) var(--size-3) var(--size-3) 0;
width: 100%;
@ -333,6 +385,14 @@
color: var(--color-grey-500);
}
.toast-icon.success {
color: var(--color-green-700);
}
:global(.dark) .toast-icon.success {
color: var(--color-green-500);
}
@keyframes countdown {
from {
transform: scaleX(1);
@ -376,6 +436,14 @@
background: var(--color-grey-500);
}
.timer.success {
background: var(--color-green-700);
}
:global(.dark) .timer.success {
background: var(--color-green-500);
}
.hidden {
display: none;
}

View File

@ -19,7 +19,7 @@ export interface LoadingStatus {
}
export interface ToastMessage {
type: "error" | "warning" | "info";
type: "error" | "warning" | "info" | "success";
title: string;
message: string;
id: number;

View File

@ -0,0 +1,18 @@
@echo off
setlocal EnableDelayedExpansion
:: Change to parent directory of script location
cd /d "%~dp0.."
:: Source the helpers script
call scripts\helpers.bat
:: Check for pnpm
call :pnpm_required
:: Generate theme using Python script
python scripts\generate_theme.py
echo Building the frontend...
pnpm i --frozen-lockfile --ignore-scripts
pnpm build

18
scripts/build_lite.bat Normal file
View File

@ -0,0 +1,18 @@
@echo off
setlocal EnableDelayedExpansion
:: Change to parent directory of script location
cd /d "%~dp0.."
:: Source the helpers script
call scripts\helpers.bat
:: Check for pnpm
call :pnpm_required
:: Generate theme using Python script
python scripts\generate_theme.py
echo Building the frontend...
pnpm i --frozen-lockfile --ignore-scripts
pnpm build

View File

@ -0,0 +1,19 @@
@echo off
setlocal EnableDelayedExpansion
:: Change to parent directory of script location
cd /d "%~dp0.."
:: Source the helpers script
call scripts\helpers.bat
:: Check for pip
call :pip_required
echo Creating test requirements...
echo To match the CI environment, this script should be run from a Unix-like system in Python 3.9.
:: Change to test directory
cd test
pip install --upgrade pip-tools
pip-compile requirements.in --output-file requirements.txt

View File

@ -0,0 +1,17 @@
@echo off
setlocal EnableDelayedExpansion
:: Change to parent directory of script location
cd /d "%~dp0.."
echo Formatting the backend... Our style follows the ruff code style.
:: Check if gradio can be imported
python -c "import gradio"
:: Run ruff checks and formatting
python -m ruff check --fix gradio test client
python -m ruff format gradio test client
:: Run type checking script
call scripts\type_check_backend.bat

View File

@ -0,0 +1,16 @@
@echo off
setlocal EnableDelayedExpansion
:: Change to parent directory of script location
cd /d "%~dp0.."
:: Source the helpers script
call scripts\helpers.bat
:: Check for pnpm
call :pnpm_required
echo Formatting the frontend... Also we'll do type checking with TypeScript.
pnpm i
pnpm format:write
pnpm ts:check

54
scripts/helpers.bat Normal file
View File

@ -0,0 +1,54 @@
@echo off
setlocal EnableDelayedExpansion
:: Tell the user what programs to install for a specific task.
:: Arguments:
:: %1 - Name of the program or actual command, a string.
:: %2 - External link for easier installation help.
:: Outputs:
:: Prints the required program name and the external link (if given).
:program_required
where /q "%~1"
if %ERRORLEVEL% neq 0 (
echo %~1 is not installed on the computer...
if not "%~2"=="" (
echo Check out this link: %~2
)
exit /b 1
)
exit /b 0
:: Check for the PIP program.
:pip_required
call :program_required "pip" "https://pip.pypa.io/en/stable/installation/"
exit /b %ERRORLEVEL%
:: Check for the NPM program.
:npm_required
call :program_required "npm" "https://nodejs.org/en/download/"
exit /b %ERRORLEVEL%
:: Check for the PNPM program.
:pnpm_required
call :program_required "pnpm" "https://pnpm.io/installation"
exit /b %ERRORLEVEL%
:: Check for the AWS CLI program.
:aws_required
call :program_required "aws" "https://aws.amazon.com/cli/"
exit /b %ERRORLEVEL%
:: Check for the Git program.
:git_required
call :program_required "git" "https://git-scm.com/downloads"
exit /b %ERRORLEVEL%
:: Check for the jq program.
:jq_required
call :program_required "jq" "https://jqlang.github.io/jq/"
exit /b %ERRORLEVEL%
:: Check for the foo program.
:foo_required
call :program_required "foo" "https://jqlang.github.io/jq/"
exit /b %ERRORLEVEL%

View File

@ -0,0 +1,17 @@
@echo off
setlocal EnableDelayedExpansion
:: Change to parent directory of script location
cd /d "%~dp0.."
:: Source the helpers script
call scripts\helpers.bat
:: Check for pip
call :pip_required
echo Installing Gradio...
pip install -e .
echo Installing Gradio Client...
pip install -e client\python

View File

@ -0,0 +1,17 @@
@echo off
setlocal EnableDelayedExpansion
:: Change to parent directory of script location
cd /d "%~dp0.."
:: Source the helpers script
call scripts\helpers.bat
:: Check for pip
call :pip_required
echo Installing requirements before running tests...
pip install --upgrade pip
pip install -r test\requirements.txt
pip install -r requirements-oauth.txt
pip install -e client\python

View File

@ -0,0 +1,15 @@
@echo off
setlocal EnableDelayedExpansion
:: Change to parent directory of script location
cd /d "%~dp0.."
:: Source the helpers script
call scripts\helpers.bat
:: Check for pnpm
call :pnpm_required
echo Building the website...
cd js/_website
pnpm dev

8
scripts/lint_backend.bat Normal file
View File

@ -0,0 +1,8 @@
@echo off
setlocal enabledelayedexpansion
cd /d "%~dp0.."
python -c "import gradio"
python -m ruff gradio test client
python -m ruff format --check gradio test client

View File

@ -0,0 +1,7 @@
@echo off
setlocal EnableDelayedExpansion
cd /d "%~dp0.."
echo Running the backend unit tests...
python -m pytest test -m "not flaky"

15
scripts/run_frontend.bat Normal file
View File

@ -0,0 +1,15 @@
@echo off
setlocal EnableDelayedExpansion
:: Change to parent directory of script location
cd /d "%~dp0.."
:: Source the helpers script
call scripts\helpers.bat
:: Check for pnpm
call :pnpm_required
echo Running the frontend...
pnpm i
pnpm dev

43
scripts/run_lite.bat Normal file
View File

@ -0,0 +1,43 @@
@echo off
setlocal enabledelayedexpansion
:: Get the root directory (equivalent to ROOTDIR)
set "SCRIPT_DIR=%~dp0"
set "ROOTDIR=%SCRIPT_DIR%.."
cd /d "%ROOTDIR%"
:: Source helpers (assuming helpers.bat exists)
call scripts\helpers.bat
:: Check requirements (assuming these functions exist in helpers.bat)
call :pnpm_required
call :jq_required
:: Get versions using jq
for /f "tokens=* usebackq" %%a in (`jq -r .version gradio/package.json`) do (
set "GRADIO_VERSION=%%a"
)
for /f "tokens=* usebackq" %%a in (`jq -r .version client/python/gradio_client/package.json`) do (
set "GRADIO_CLIENT_VERSION=%%a"
)
:: Set paths
set "GRADIO_WHEEL_PATH=%ROOTDIR%\dist-lite\gradio-!GRADIO_VERSION!-py3-none-any.whl"
set "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!
:: Check if both files exist
if exist "!GRADIO_WHEEL_PATH!" if exist "!GRADIO_CLIENT_FILE_PATH!" (
echo Found gradio and gradio_client wheel files...
) else (
echo Building gradio and gradio_client wheel files...
call pnpm --filter @gradio/lite pybuild
)
:: Build client and start dev server
call pnpm --filter @gradio/client build
call pnpm dev:lite

View File

@ -0,0 +1,17 @@
@echo off
setlocal
:: Change to parent directory of script location
cd /d "%~dp0.."
:: Source helpers
call scripts\helpers.bat
:: Check pip requirement
call :pip_required
echo Adding py.typed file to gradio.
type nul > gradio\py.typed
:: Run pyright
python -m pyright