mirror/gradio
2
0
Fork 0
mirror of https://github.com/gradio-app/gradio.git synced 2025-03-25 12:10:31 +08:00
Code Issues Packages Projects Releases Wiki Activity

Add info= parameter to form type inputs to provide more context for users (#3291)

Browse Source 
* changes

* changes

* changes

* changes

* changes

* changes
This commit is contained in:
aliabid94 2023-02-22 15:16:15 -08:00 committed by GitHub
parent c4f23bf4b3
commit 9c811ed892
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
27 changed files with 106 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
CHANGELOG.md
View File

@ -3,7 +3,7 @@
## New Features:
- Updated image upload component to accept all image formats, including lossless formats like .webp by [@fienestar](https://github.com/fienestar) in [PR 3225](https://github.com/gradio-app/gradio/pull/3225)
- Adds a disabled mode to the `gr.Button` component by setting `interactive=False` by [@abidlabs](https://github.com/abidlabs) in [PR 3266](https://github.com/gradio-app/gradio/pull/3266) and [PR 3288](https://github.com/gradio-app/gradio/pull/3288)
- Added `info=` argument to form components to enable extra context provided to users, by [@aliabid94](https://github.com/aliabid94) in [PR 3291](https://github.com/gradio-app/gradio/pull/3291)
## Bug Fixes:
- Ensure `mirror_webcam` is always respected by [@pngwn](https://github.com/pngwn) in [PR 3245](https://github.com/gradio-app/gradio/pull/3245)

2
demo/blocks_xray/run.ipynb
View File

@ -1 +1 @@
{"cells": [{"cell_type": "markdown", "id": 302934307671667531413257853548643485645, "metadata": {}, "source": ["# Gradio Demo: blocks_xray"]}, {"cell_type": "code", "execution_count": null, "id": 272996653310673477252411125948039410165, "metadata": {}, "outputs": [], "source": ["!pip install -q gradio "]}, {"cell_type": "code", "execution_count": null, "id": 288918539441861185822528903084949547379, "metadata": {}, "outputs": [], "source": ["import gradio as gr\n", "import random\n", "import time\n", "\n", "\n", "def xray_model(diseases, img):\n", " time.sleep(4)\n", " return [{disease: random.random() for disease in diseases}]\n", "\n", "\n", "def ct_model(diseases, img):\n", " time.sleep(3)\n", " return [{disease: 0.1 for disease in diseases}]\n", "\n", "with gr.Blocks() as demo:\n", " gr.Markdown(\n", " \"\"\"\n", "# Detect Disease From Scan\n", "With this model you can lorem ipsum\n", "- ipsum 1\n", "- ipsum 2\n", "\"\"\"\n", " )\n", " disease = gr.CheckboxGroup(\n", " choices=[\"Covid\", \"Malaria\", \"Lung Cancer\"], label=\"Disease to Scan For\"\n", " )\n", "\n", " with gr.Tab(\"X-ray\") as x_tab:\n", " with gr.Row():\n", " xray_scan = gr.Image()\n", " xray_results = gr.JSON()\n", " xray_run = gr.Button(\"Run\")\n", " xray_run.click(\n", " xray_model,\n", " inputs=[disease, xray_scan],\n", " outputs=xray_results,\n", " api_name=\"xray_model\"\n", " )\n", "\n", " with gr.Tab(\"CT Scan\"):\n", " with gr.Row():\n", " ct_scan = gr.Image()\n", " ct_results = gr.JSON()\n", " ct_run = gr.Button(\"Run\")\n", " ct_run.click(\n", " ct_model,\n", " inputs=[disease, ct_scan],\n", " outputs=ct_results,\n", " api_name=\"ct_model\"\n", " )\n", "\n", " upload_btn = gr.Button(\"Upload Results\")\n", " upload_btn.click(\n", " lambda ct, xr: time.sleep(5),\n", " inputs=[ct_results, xray_results],\n", " outputs=[],\n", " )\n", "\n", "if __name__ == \"__main__\":\n", " demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}
{"cells": [{"cell_type": "markdown", "id": 302934307671667531413257853548643485645, "metadata": {}, "source": ["# Gradio Demo: blocks_xray"]}, {"cell_type": "code", "execution_count": null, "id": 272996653310673477252411125948039410165, "metadata": {}, "outputs": [], "source": ["!pip install -q gradio "]}, {"cell_type": "code", "execution_count": null, "id": 288918539441861185822528903084949547379, "metadata": {}, "outputs": [], "source": ["import gradio as gr\n", "import random\n", "import time\n", "\n", "\n", "def xray_model(diseases, img):\n", " time.sleep(4)\n", " return [{disease: random.random() for disease in diseases}]\n", "\n", "\n", "def ct_model(diseases, img):\n", " time.sleep(3)\n", " return [{disease: 0.1 for disease in diseases}]\n", "\n", "with gr.Blocks() as demo:\n", " gr.Markdown(\n", " \"\"\"\n", "# Detect Disease From Scan\n", "With this model you can lorem ipsum\n", "- ipsum 1\n", "- ipsum 2\n", "\"\"\"\n", " )\n", " disease = gr.CheckboxGroup(\n", " info=\"Select the diseases you want to scan for.\",\n", " choices=[\"Covid\", \"Malaria\", \"Lung Cancer\"], label=\"Disease to Scan For\"\n", " )\n", "\n", " with gr.Tab(\"X-ray\") as x_tab:\n", " with gr.Row():\n", " xray_scan = gr.Image()\n", " xray_results = gr.JSON()\n", " xray_run = gr.Button(\"Run\")\n", " xray_run.click(\n", " xray_model,\n", " inputs=[disease, xray_scan],\n", " outputs=xray_results,\n", " api_name=\"xray_model\"\n", " )\n", "\n", " with gr.Tab(\"CT Scan\"):\n", " with gr.Row():\n", " ct_scan = gr.Image()\n", " ct_results = gr.JSON()\n", " ct_run = gr.Button(\"Run\")\n", " ct_run.click(\n", " ct_model,\n", " inputs=[disease, ct_scan],\n", " outputs=ct_results,\n", " api_name=\"ct_model\"\n", " )\n", "\n", " upload_btn = gr.Button(\"Upload Results\")\n", " upload_btn.click(\n", " lambda ct, xr: time.sleep(5),\n", " inputs=[ct_results, xray_results],\n", " outputs=[],\n", " )\n", "\n", "if __name__ == \"__main__\":\n", " demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}

1
demo/blocks_xray/run.py
View File

@ -22,6 +22,7 @@ With this model you can lorem ipsum
"""
)
disease = gr.CheckboxGroup(
info="Select the diseases you want to scan for.",
choices=["Covid", "Malaria", "Lung Cancer"], label="Disease to Scan For"
)

2
demo/diff_texts/run.ipynb
View File

@ -1 +1 @@
{"cells": [{"cell_type": "markdown", "id": 302934307671667531413257853548643485645, "metadata": {}, "source": ["# Gradio Demo: diff_texts"]}, {"cell_type": "code", "execution_count": null, "id": 272996653310673477252411125948039410165, "metadata": {}, "outputs": [], "source": ["!pip install -q gradio "]}, {"cell_type": "code", "execution_count": null, "id": 288918539441861185822528903084949547379, "metadata": {}, "outputs": [], "source": ["from difflib import Differ\n", "\n", "import gradio as gr\n", "\n", "\n", "def diff_texts(text1, text2):\n", " d = Differ()\n", " return [\n", " (token[2:], token[0] if token[0] != \" \" else None)\n", " for token in d.compare(text1, text2)\n", " ]\n", "\n", "\n", "demo = gr.Interface(\n", " diff_texts,\n", " [\n", " gr.Textbox(\n", " label=\"Initial text\",\n", " lines=3,\n", " value=\"The quick brown fox jumped over the lazy dogs.\",\n", " ),\n", " gr.Textbox(\n", " label=\"Text to compare\",\n", " lines=3,\n", " value=\"The fast brown fox jumps over lazy dogs.\",\n", " ),\n", " ],\n", " gr.HighlightedText(\n", " label=\"Diff\",\n", " combine_adjacent=True,\n", " ).style(color_map={\"+\": \"red\", \"-\": \"green\"}),\n", ")\n", "if __name__ == \"__main__\":\n", " demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}
{"cells": [{"cell_type": "markdown", "id": 302934307671667531413257853548643485645, "metadata": {}, "source": ["# Gradio Demo: diff_texts"]}, {"cell_type": "code", "execution_count": null, "id": 272996653310673477252411125948039410165, "metadata": {}, "outputs": [], "source": ["!pip install -q gradio "]}, {"cell_type": "code", "execution_count": null, "id": 288918539441861185822528903084949547379, "metadata": {}, "outputs": [], "source": ["from difflib import Differ\n", "\n", "import gradio as gr\n", "\n", "\n", "def diff_texts(text1, text2):\n", " d = Differ()\n", " return [\n", " (token[2:], token[0] if token[0] != \" \" else None)\n", " for token in d.compare(text1, text2)\n", " ]\n", "\n", "\n", "demo = gr.Interface(\n", " diff_texts,\n", " [\n", " gr.Textbox(\n", " label=\"Text 1\",\n", " info=\"Initial text\",\n", " lines=3,\n", " value=\"The quick brown fox jumped over the lazy dogs.\",\n", " ),\n", " gr.Textbox(\n", " label=\"Text 2\",\n", " info=\"Text to compare\",\n", " lines=3,\n", " value=\"The fast brown fox jumps over lazy dogs.\",\n", " ),\n", " ],\n", " gr.HighlightedText(\n", " label=\"Diff\",\n", " combine_adjacent=True,\n", " ).style(color_map={\"+\": \"red\", \"-\": \"green\"}),\n", ")\n", "if __name__ == \"__main__\":\n", " demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}

6
demo/diff_texts/run.py
View File

@ -15,12 +15,14 @@ demo = gr.Interface(
diff_texts,
[
gr.Textbox(
label="Initial text",
label="Text 1",
info="Initial text",
lines=3,
value="The quick brown fox jumped over the lazy dogs.",
),
gr.Textbox(
label="Text to compare",
label="Text 2",
info="Text to compare",
lines=3,
value="The fast brown fox jumps over lazy dogs.",
),

2
demo/sentence_builder/run.ipynb
View File

@ -1 +1 @@
{"cells": [{"cell_type": "markdown", "id": 302934307671667531413257853548643485645, "metadata": {}, "source": ["# Gradio Demo: sentence_builder"]}, {"cell_type": "code", "execution_count": null, "id": 272996653310673477252411125948039410165, "metadata": {}, "outputs": [], "source": ["!pip install -q gradio "]}, {"cell_type": "code", "execution_count": null, "id": 288918539441861185822528903084949547379, "metadata": {}, "outputs": [], "source": ["import gradio as gr\n", "\n", "\n", "def sentence_builder(quantity, animal, place, activity_list, morning):\n", " return f\"\"\"The {quantity} {animal}s went to the {place} where they {\" and \".join(activity_list)} until the {\"morning\" if morning else \"night\"}\"\"\"\n", "\n", "\n", "demo = gr.Interface(\n", " sentence_builder,\n", " [\n", " gr.Slider(2, 20, value=4),\n", " gr.Dropdown([\"cat\", \"dog\", \"bird\"]),\n", " gr.Radio([\"park\", \"zoo\", \"road\"]),\n", " gr.Dropdown([\"ran\", \"swam\", \"ate\", \"slept\"], value=[\"swam\", \"slept\"], multiselect=True),\n", " gr.Checkbox(label=\"Is it the morning?\"),\n", " ],\n", " \"text\",\n", " examples=[\n", " [2, \"cat\", \"park\", [\"ran\", \"swam\"], True],\n", " [4, \"dog\", \"zoo\", [\"ate\", \"swam\"], False],\n", " [10, \"bird\", \"road\", [\"ran\"], False],\n", " [8, \"cat\", \"zoo\", [\"ate\"], True],\n", " ],\n", ")\n", "\n", "if __name__ == \"__main__\":\n", " demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}
{"cells": [{"cell_type": "markdown", "id": 302934307671667531413257853548643485645, "metadata": {}, "source": ["# Gradio Demo: sentence_builder"]}, {"cell_type": "code", "execution_count": null, "id": 272996653310673477252411125948039410165, "metadata": {}, "outputs": [], "source": ["!pip install -q gradio "]}, {"cell_type": "code", "execution_count": null, "id": 288918539441861185822528903084949547379, "metadata": {}, "outputs": [], "source": ["import gradio as gr\n", "\n", "\n", "def sentence_builder(quantity, animal, countries, place, activity_list, morning):\n", " return f\"\"\"The {quantity} {animal}s from {\" and \".join(countries)} went to the {place} where they {\" and \".join(activity_list)} until the {\"morning\" if morning else \"night\"}\"\"\"\n", "\n", "\n", "demo = gr.Interface(\n", " sentence_builder,\n", " [\n", " gr.Slider(2, 20, value=4, label=\"Count\", info=\"Choose betwen 2 and 20\"),\n", " gr.Dropdown(\n", " [\"cat\", \"dog\", \"bird\"], label=\"Animal\", info=\"Will add more animals later!\"\n", " ),\n", " gr.CheckboxGroup([\"USA\", \"Japan\", \"Pakistan\"], label=\"Countries\", info=\"Where are they from?\"),\n", " gr.Radio([\"park\", \"zoo\", \"road\"], label=\"Location\", info=\"Where did they go?\"),\n", " gr.Dropdown(\n", " [\"ran\", \"swam\", \"ate\", \"slept\"], value=[\"swam\", \"slept\"], multiselect=True, label=\"Activity\", info=\"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed auctor, nisl eget ultricies aliquam, nunc nisl aliquet nunc, eget aliquam nisl nunc vel nisl.\"\n", " ),\n", " gr.Checkbox(label=\"Morning\", info=\"Did they do it in the morning?\"),\n", " ],\n", " \"text\",\n", " examples=[\n", " [2, \"cat\", \"park\", [\"ran\", \"swam\"], True],\n", " [4, \"dog\", \"zoo\", [\"ate\", \"swam\"], False],\n", " [10, \"bird\", \"road\", [\"ran\"], False],\n", " [8, \"cat\", \"zoo\", [\"ate\"], True],\n", " ],\n", ")\n", "\n", "if __name__ == \"__main__\":\n", " demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}

19
demo/sentence_builder/run.py
View File

@ -1,18 +1,23 @@
import gradio as gr
def sentence_builder(quantity, animal, place, activity_list, morning):
return f"""The {quantity} {animal}s went to the {place} where they {" and ".join(activity_list)} until the {"morning" if morning else "night"}"""
def sentence_builder(quantity, animal, countries, place, activity_list, morning):
return f"""The {quantity} {animal}s from {" and ".join(countries)} went to the {place} where they {" and ".join(activity_list)} until the {"morning" if morning else "night"}"""
demo = gr.Interface(
sentence_builder,
[
gr.Slider(2, 20, value=4),
gr.Dropdown(["cat", "dog", "bird"]),
gr.Radio(["park", "zoo", "road"]),
gr.Dropdown(["ran", "swam", "ate", "slept"], value=["swam", "slept"], multiselect=True),
gr.Checkbox(label="Is it the morning?"),
gr.Slider(2, 20, value=4, label="Count", info="Choose betwen 2 and 20"),
gr.Dropdown(
["cat", "dog", "bird"], label="Animal", info="Will add more animals later!"
),
gr.CheckboxGroup(["USA", "Japan", "Pakistan"], label="Countries", info="Where are they from?"),
gr.Radio(["park", "zoo", "road"], label="Location", info="Where did they go?"),
gr.Dropdown(
["ran", "swam", "ate", "slept"], value=["swam", "slept"], multiselect=True, label="Activity", info="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed auctor, nisl eget ultricies aliquam, nunc nisl aliquet nunc, eget aliquam nisl nunc vel nisl."
),
gr.Checkbox(label="Morning", info="Did they do it in the morning?"),
],
"text",
examples=[

31
gradio/components.py
View File

@ -160,6 +160,7 @@ class IOComponent(Component, Serializable):
*,
value: Any = None,
label: str | None = None,
info: str | None = None,
show_label: bool = True,
interactive: bool | None = None,
visible: bool = True,
@ -171,6 +172,7 @@ class IOComponent(Component, Serializable):
super().__init__(elem_id=elem_id, visible=visible, **kwargs)
self.label = label
self.info = info
self.show_label = show_label
self.interactive = interactive
@ -186,12 +188,15 @@ class IOComponent(Component, Serializable):
self.load_event = self.attach_load_event(load_fn, every)
def get_config(self):
return {
config = {
"label": self.label,
"show_label": self.show_label,
"interactive": self.interactive,
**super().get_config(),
}
if self.info:
config["info"] = self.info
return config
def generate_sample(self) -> Any:
"""
@ -266,6 +271,7 @@ class Textbox(
max_lines: int = 20,
placeholder: str | None = None,
label: str | None = None,
info: str | None = None,
every: float | None = None,
show_label: bool = True,
interactive: bool | None = None,
@ -281,6 +287,7 @@ class Textbox(
max_lines: maximum number of line rows to provide in textarea.
placeholder: placeholder hint to provide behind textarea.
label: component name in interface.
info: additional component description.
every: If `value` is a callable, run the function 'every' number of seconds while the client connection is open. Has no effect otherwise. Queue must be enabled. The event can be accessed (e.g. to cancel it) via this component's .load_event attribute.
show_label: if True, will display label.
interactive: if True, will be rendered as an editable textbox; if False, editing will be disabled. If not provided, this is inferred based on whether the component is used as an input or output.
@ -298,6 +305,7 @@ class Textbox(
IOComponent.__init__(
self,
label=label,
info=info,
every=every,
show_label=show_label,
interactive=interactive,
@ -449,6 +457,7 @@ class Number(
value: float | Callable | None = None,
*,
label: str | None = None,
info: str | None = None,
every: float | None = None,
show_label: bool = True,
interactive: bool | None = None,
@ -461,6 +470,7 @@ class Number(
Parameters:
value: default value. If callable, the function will be called whenever the app loads to set the initial value of the component.
label: component name in interface.
info: additional component description.
every: If `value` is a callable, run the function 'every' number of seconds while the client connection is open. Has no effect otherwise. Queue must be enabled. The event can be accessed (e.g. to cancel it) via this component's .load_event attribute.
show_label: if True, will display label.
interactive: if True, will be editable; if False, editing will be disabled. If not provided, this is inferred based on whether the component is used as an input or output.
@ -472,6 +482,7 @@ class Number(
IOComponent.__init__(
self,
label=label,
info=info,
every=every,
show_label=show_label,
interactive=interactive,
@ -625,6 +636,7 @@ class Slider(
*,
step: float | None = None,
label: str | None = None,
info: str | None = None,
every: float | None = None,
show_label: bool = True,
interactive: bool | None = None,
@ -640,6 +652,7 @@ class Slider(
value: default value. If callable, the function will be called whenever the app loads to set the initial value of the component. Ignored if randomized=True.
step: increment between slider values.
label: component name in interface.
info: additional component description.
every: If `value` is a callable, run the function 'every' number of seconds while the client connection is open. Has no effect otherwise. Queue must be enabled. The event can be accessed (e.g. to cancel it) via this component's .load_event attribute.
show_label: if True, will display label.
interactive: if True, slider will be adjustable; if False, adjusting will be disabled. If not provided, this is inferred based on whether the component is used as an input or output.
@ -660,6 +673,7 @@ class Slider(
IOComponent.__init__(
self,
label=label,
info=info,
every=every,
show_label=show_label,
interactive=interactive,
@ -777,6 +791,7 @@ class Checkbox(
value: bool | Callable = False,
*,
label: str | None = None,
info: str | None = None,
every: float | None = None,
show_label: bool = True,
interactive: bool | None = None,
@ -788,6 +803,7 @@ class Checkbox(
Parameters:
value: if True, checked by default. If callable, the function will be called whenever the app loads to set the initial value of the component.
label: component name in interface.
info: additional component description.
every: If `value` is a callable, run the function 'every' number of seconds while the client connection is open. Has no effect otherwise. Queue must be enabled. The event can be accessed (e.g. to cancel it) via this component's .load_event attribute.
show_label: if True, will display label.
interactive: if True, this checkbox can be checked; if False, checking will be disabled. If not provided, this is inferred based on whether the component is used as an input or output.
@ -798,6 +814,7 @@ class Checkbox(
IOComponent.__init__(
self,
label=label,
info=info,
every=every,
show_label=show_label,
interactive=interactive,
@ -868,6 +885,7 @@ class CheckboxGroup(
value: List[str] | str | Callable | None = None,
type: str = "value",
label: str | None = None,
info: str | None = None,
every: float | None = None,
show_label: bool = True,
interactive: bool | None = None,
@ -881,6 +899,7 @@ class CheckboxGroup(
value: default selected list of options. If callable, the function will be called whenever the app loads to set the initial value of the component.
type: Type of value to be returned by component. "value" returns the list of strings of the choices selected, "index" returns the list of indicies of the choices selected.
label: component name in interface.
info: additional component description.
every: If `value` is a callable, run the function 'every' number of seconds while the client connection is open. Has no effect otherwise. Queue must be enabled. The event can be accessed (e.g. to cancel it) via this component's .load_event attribute.
show_label: if True, will display label.
interactive: if True, choices in this checkbox group will be checkable; if False, checking will be disabled. If not provided, this is inferred based on whether the component is used as an input or output.
@ -899,6 +918,7 @@ class CheckboxGroup(
IOComponent.__init__(
self,
label=label,
info=info,
every=every,
show_label=show_label,
interactive=interactive,
@ -1038,6 +1058,7 @@ class Radio(
value: str | Callable | None = None,
type: str = "value",
label: str | None = None,
info: str | None = None,
every: float | None = None,
show_label: bool = True,
interactive: bool | None = None,
@ -1051,6 +1072,7 @@ class Radio(
value: the button selected by default. If None, no button is selected by default. If callable, the function will be called whenever the app loads to set the initial value of the component.
type: Type of value to be returned by component. "value" returns the string of the choice selected, "index" returns the index of the choice selected.
label: component name in interface.
info: additional component description.
every: If `value` is a callable, run the function 'every' number of seconds while the client connection is open. Has no effect otherwise. Queue must be enabled. The event can be accessed (e.g. to cancel it) via this component's .load_event attribute.
show_label: if True, will display label.
interactive: if True, choices in this radio group will be selectable; if False, selection will be disabled. If not provided, this is inferred based on whether the component is used as an input or output.
@ -1068,6 +1090,7 @@ class Radio(
IOComponent.__init__(
self,
label=label,
info=info,
every=every,
show_label=show_label,
interactive=interactive,
@ -1182,6 +1205,7 @@ class Dropdown(Changeable, IOComponent, SimpleSerializable, FormComponent):
type: str = "value",
multiselect: bool | None = None,
label: str | None = None,
info: str | None = None,
every: float | None = None,
show_label: bool = True,
interactive: bool | None = None,
@ -1196,6 +1220,7 @@ class Dropdown(Changeable, IOComponent, SimpleSerializable, FormComponent):
type: Type of value to be returned by component. "value" returns the string of the choice selected, "index" returns the index of the choice selected.
multiselect: if True, multiple choices can be selected.
label: component name in interface.
info: additional component description.
every: If `value` is a callable, run the function 'every' number of seconds while the client connection is open. Has no effect otherwise. Queue must be enabled. The event can be accessed (e.g. to cancel it) via this component's .load_event attribute.
show_label: if True, will display label.
interactive: if True, choices in this dropdown will be selectable; if False, selection will be disabled. If not provided, this is inferred based on whether the component is used as an input or output.
@ -1218,6 +1243,7 @@ class Dropdown(Changeable, IOComponent, SimpleSerializable, FormComponent):
IOComponent.__init__(
self,
label=label,
info=info,
every=every,
show_label=show_label,
interactive=interactive,
@ -3134,6 +3160,7 @@ class ColorPicker(Changeable, Submittable, IOComponent, SimpleSerializable):
value: str | Callable | None = None,
*,
label: str | None = None,
info: str | None = None,
every: float | None = None,
show_label: bool = True,
interactive: bool | None = None,
@ -3145,6 +3172,7 @@ class ColorPicker(Changeable, Submittable, IOComponent, SimpleSerializable):
Parameters:
value: default text to provide in color picker. If callable, the function will be called whenever the app loads to set the initial value of the component.
label: component name in interface.
info: additional component description.
every: If `value` is a callable, run the function 'every' number of seconds while the client connection is open. Has no effect otherwise. Queue must be enabled. The event can be accessed (e.g. to cancel it) via this component's .load_event attribute.
show_label: if True, will display label.
interactive: if True, will be rendered as an editable color picker; if False, editing will be disabled. If not provided, this is inferred based on whether the component is used as an input or output.
@ -3156,6 +3184,7 @@ class ColorPicker(Changeable, Submittable, IOComponent, SimpleSerializable):
IOComponent.__init__(
self,
label=label,
info=info,
every=every,
show_label=show_label,
interactive=interactive,

4
guides/01_getting-started/02_key-features.md
View File

@ -42,10 +42,10 @@ There are three arguments in the `Interface` constructor to specify where this c
If you're using the `Blocks` API instead, you can insert text, markdown, or HTML anywhere using the `gr.Markdown(...)` or `gr.HTML(...)` components, with descriptive content inside the `Component` constructor.
Another useful keyword argument is `label=`, which is present in every `Component`. This modifies the label text at the top of each `Component`.
Another useful keyword argument is `label=`, which is present in every `Component`. This modifies the label text at the top of each `Component`. You can also add the `info=` keyword argument to form elements like `Textbox` or `Radio` to provide further information on their usage.
```python
gr.Number(label='Age')
gr.Number(label='Age', info='In years, must be greater than 0')
```
## Flagging

6
ui/packages/app/src/components/Checkbox/Checkbox.svelte
View File

@ -1,6 +1,6 @@
<script lang="ts">
import { Checkbox } from "@gradio/form";
import { Block } from "@gradio/atoms";
import { Block, Info } from "@gradio/atoms";
import StatusTracker from "../StatusTracker/StatusTracker.svelte";
import type { LoadingStatus } from "../StatusTracker/types";
import type { Styles } from "@gradio/utils";
@ -9,6 +9,7 @@
export let visible: boolean = true;
export let value: boolean = false;
export let label: string = "Checkbox";
export let info: string | undefined = undefined;
export let mode: "static" | "dynamic";
export let style: Styles = {};
export let loading_status: LoadingStatus;
@ -21,5 +22,8 @@
>
<StatusTracker {...loading_status} />
{#if info}
<Info>{info}</Info>
{/if}
<Checkbox {label} bind:value on:change disabled={mode === "static"} />
</Block>

2
ui/packages/app/src/components/CheckboxGroup/CheckboxGroup.svelte
View File

@ -12,6 +12,7 @@
export let style: Styles = {};
export let mode: "static" | "dynamic";
export let label: string = "Checkbox Group";
export let info: string | undefined = undefined;
export let show_label: boolean;
export let loading_status: LoadingStatus;
@ -29,6 +30,7 @@
bind:value
{choices}
{label}
{info}
{style}
{show_label}
on:change

2
ui/packages/app/src/components/ColorPicker/ColorPicker.svelte
View File

@ -8,6 +8,7 @@
import type { Styles } from "@gradio/utils";
export let label: string = "ColorPicker";
export let info: string | undefined = undefined;
export let elem_id: string = "";
export let visible: boolean = true;
export let value: string;
@ -30,6 +31,7 @@
<ColorPicker
bind:value
{label}
{info}
{show_label}
on:change
on:submit

2
ui/packages/app/src/components/Dropdown/Dropdown.svelte
View File

@ -6,6 +6,7 @@
import type { Styles } from "@gradio/utils";
export let label: string = "Dropdown";
export let info: string | undefined = undefined;
export let elem_id: string = "";
export let visible: boolean = true;
export let value: string | Array<string> = [];
@ -30,6 +31,7 @@
{choices}
{multiselect}
{label}
{info}
{show_label}
on:change
disabled={mode === "static"}

2
ui/packages/app/src/components/Number/Number.svelte
View File

@ -6,6 +6,7 @@
import type { Styles } from "@gradio/utils";
export let label: string = "Number";
export let info: string | undefined = undefined;
export let elem_id: string = "";
export let visible: boolean = true;
export let style: Styles = {};
@ -26,6 +27,7 @@
<Number
bind:value
{label}
{info}
{show_label}
disabled={mode === "static"}
on:change

2
ui/packages/app/src/components/Radio/Radio.svelte
View File

@ -6,6 +6,7 @@
import type { Styles } from "@gradio/utils";
export let label: string = "Radio";
export let info: string | undefined = undefined;
export let elem_id: string = "";
export let visible: boolean = true;
export let value: string = "";
@ -27,6 +28,7 @@
<Radio
bind:value
{label}
{info}
{elem_id}
{show_label}
{choices}

2
ui/packages/app/src/components/Slider/Slider.svelte
View File

@ -9,6 +9,7 @@
export let visible: boolean = true;
export let value: number = 0;
export let label: string = "Slider";
export let info: string | undefined = undefined;
export let style: Styles = {};
export let minimum: number;
export let maximum: number;
@ -29,6 +30,7 @@
<Range
bind:value
{label}
{info}
{show_label}
{minimum}
{maximum}

2
ui/packages/app/src/components/Textbox/Textbox.svelte
View File

@ -8,6 +8,7 @@
import type { Styles } from "@gradio/utils";
export let label: string = "Textbox";
export let info: string | undefined = undefined;
export let elem_id: string = "";
export let visible: boolean = true;
export let value: string = "";
@ -36,6 +37,7 @@
<TextBox
bind:value
{label}
{info}
{show_label}
{lines}
{type}

5
ui/packages/atoms/src/BlockTitle.svelte
View File

@ -1,9 +1,14 @@
<script lang="ts">
import { default as Info } from "./Info.svelte";
export let show_label: boolean = true;
export let info: string | undefined = undefined;
</script>
<span class:sr-only={!show_label} class:hide={!show_label}>
<slot />
{#if info}
<Info>{info}</Info>
{/if}
</span>
<style>

13
ui/packages/atoms/src/Info.svelte Normal file
View File

@ -0,0 +1,13 @@
<div>
<slot />
</div>
<style>
div {
margin-top: var(--size-0-5);
margin-bottom: var(--size-1);
color: var(--color-text-subdued);
font-size: var(--scale-000);
line-height: var(--line-sm);
}
</style>

1
ui/packages/atoms/src/index.ts
View File

@ -4,5 +4,6 @@ export { default as BlockTitle } from "./BlockTitle.svelte";
export { default as BlockLabel } from "./BlockLabel.svelte";
export { default as IconButton } from "./IconButton.svelte";
export { default as Empty } from "./Empty.svelte";
export { default as Info } from "./Info.svelte";
export const BLOCK_KEY = {};

5
ui/packages/form/src/CheckboxGroup.svelte
View File

@ -1,6 +1,6 @@
<script lang="ts">
import { createEventDispatcher } from "svelte";
import { BlockTitle } from "@gradio/atoms";
import { BlockTitle, Info } from "@gradio/atoms";
import { get_styles } from "@gradio/utils";
import type { Styles } from "@gradio/utils";
@ -9,6 +9,7 @@
export let choices: Array<string>;
export let disabled: boolean = false;
export let label: string;
export let info: string | undefined = undefined;
export let show_label: boolean;
const dispatch = createEventDispatcher<{ change: Array<string> }>();
@ -26,7 +27,7 @@
$: ({ item_container } = get_styles(style, ["item_container"]));
</script>
<BlockTitle {show_label}>{label}</BlockTitle>
<BlockTitle {show_label} {info}>{label}</BlockTitle>
<div class="wrap" data-testid="checkbox-group">
{#each choices as choice}

3
ui/packages/form/src/ColorPicker.svelte
View File

@ -4,6 +4,7 @@
export let value: string = "#000000";
export let label: string;
export let info: string | undefined = undefined;
export let disabled = false;
export let show_label: boolean = true;
@ -22,7 +23,7 @@
<!-- svelte-ignore a11y-label-has-associated-control -->
<label class="block">
<BlockTitle {show_label}>{label}</BlockTitle>
<BlockTitle {show_label} {info}>{label}</BlockTitle>
<input type="color" bind:value {disabled} />
</label>

3
ui/packages/form/src/Dropdown.svelte
View File

@ -3,6 +3,7 @@
import { createEventDispatcher } from "svelte";
import { BlockTitle } from "@gradio/atoms";
export let label: string;
export let info: string | undefined = undefined;
export let value: string | Array<string> | undefined = undefined;
export let multiselect: boolean = false;
export let choices: Array<string>;
@ -20,7 +21,7 @@
<!-- svelte-ignore a11y-label-has-associated-control -->
<label>
<BlockTitle {show_label}>{label}</BlockTitle>
<BlockTitle {show_label} {info}>{label}</BlockTitle>
{#if !multiselect}
<select bind:value {disabled}>

3
ui/packages/form/src/Number.svelte
View File

@ -5,6 +5,7 @@
export let value: number = 0;
export let disabled: boolean = false;
export let label: string;
export let info: string | undefined = undefined;
export let show_label: boolean = true;
const dispatch = createEventDispatcher<{
@ -37,7 +38,7 @@
<!-- svelte-ignore a11y-label-has-associated-control -->
<label class="block">
<BlockTitle {show_label}>{label}</BlockTitle>
<BlockTitle {show_label} {info}>{label}</BlockTitle>
<input
type="number"
bind:value

3
ui/packages/form/src/Radio.svelte
View File

@ -9,6 +9,7 @@
export let choices: Array<string>;
export let disabled: boolean = false;
export let label: string;
export let info: string | undefined = undefined;
export let show_label: boolean = true;
export let elem_id: string;
@ -19,7 +20,7 @@
$: ({ item_container } = get_styles(style, ["item_container"]));
</script>
<BlockTitle {show_label}>{label}</BlockTitle>
<BlockTitle {show_label} {info}>{label}</BlockTitle>
<div class="wrap">
{#each choices as choice, i (i)}

3
ui/packages/form/src/Range.svelte
View File

@ -12,6 +12,7 @@
export let step: number = 1;
export let disabled: boolean = false;
export let label: string;
export let info: string | undefined = undefined;
export let show_label: boolean;
const id = `range_id_${_id++}`;
@ -24,7 +25,7 @@
<div class="wrap">
<div class="head">
<label for={id}>
<BlockTitle {show_label}>{label}</BlockTitle>
<BlockTitle {show_label} {info}>{label}</BlockTitle>
</label>
<input
type="number"

3
ui/packages/form/src/Textbox.svelte
View File

@ -6,6 +6,7 @@
export let lines: number = 1;
export let placeholder: string = "Type here...";
export let label: string;
export let info: string | undefined = undefined;
export let disabled = false;
export let show_label: boolean = true;
export let max_lines: number | false;
@ -91,7 +92,7 @@
<!-- svelte-ignore a11y-label-has-associated-control -->
<label>
<BlockTitle {show_label}>{label}</BlockTitle>
<BlockTitle {show_label} {info}>{label}</BlockTitle>
{#if lines === 1 && max_lines === 1}
{#if type === "text"}