diff --git a/CHANGELOG.md b/CHANGELOG.md index 40e553360918..29f05a882387 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -26,6 +26,7 @@ demo.launch() - Add missing `display: flex` property to `Row` so that flex styling is applied to children by [@hannahblair] in [PR 4896](https://github.com/gradio-app/gradio/pull/4896) - Fixed bug where `gr.Video` could not preprocess urls by [@freddyaboulton](https://github.com/freddyaboulton) in [PR 4904](https://github.com/gradio-app/gradio/pull/4904) - Fixed copy button rendering in API page on Safari by [@aliabid94](https://github.com/aliabid94) in [PR 4924](https://github.com/gradio-app/gradio/pull/4924) +- Fixed `gr.Group` and `container=False`. `container` parameter only available for `Textbox`, `Number`, and `Dropdown`, the only elements where it makes sense. By [@aliabid94](https://github.com/aliabid94) in [PR 4916](https://github.com/gradio-app/gradio/pull/4916) - Fixed broken image link in auto-generated `app.py` from `ThemeClass.push_to_hub` by [@deepkyu](https://github.com/deepkyu) in [PR 4944](https://github.com/gradio-app/gradio/pull/4944) ## Other Changes: diff --git a/demo/blocks_group/run.ipynb b/demo/blocks_group/run.ipynb new file mode 100644 index 000000000000..90a5a5f07069 --- /dev/null +++ b/demo/blocks_group/run.ipynb @@ -0,0 +1 @@ +{"cells": [{"cell_type": "markdown", "id": 302934307671667531413257853548643485645, "metadata": {}, "source": ["# Gradio Demo: blocks_group"]}, {"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", "def greet(name):\n", " return \"Hello \" + name + \"!\"\n", "\n", "with gr.Blocks() as demo:\n", " gr.Markdown(\"### This is a couple of elements without any gr.Group. Form elements naturally group together anyway.\")\n", " gr.Textbox(\"A\")\n", " gr.Number(3)\n", " gr.Button()\n", " gr.Image()\n", " gr.Slider()\n", "\n", " gr.Markdown(\"### This is the same set put in a gr.Group.\")\n", " with gr.Group():\n", " gr.Textbox(\"A\")\n", " gr.Number(3)\n", " gr.Button()\n", " gr.Image()\n", " gr.Slider()\n", "\n", " gr.Markdown(\"### Now in a Row, no group.\")\n", " with gr.Row():\n", " gr.Textbox(\"A\")\n", " gr.Number(3)\n", " gr.Button()\n", " gr.Image()\n", " gr.Slider()\n", "\n", " gr.Markdown(\"### Now in a Row in a group.\")\n", " with gr.Group():\n", " with gr.Row():\n", " gr.Textbox(\"A\")\n", " gr.Number(3)\n", " gr.Button()\n", " gr.Image()\n", " gr.Slider()\n", "\n", " gr.Markdown(\"### Several rows grouped together.\")\n", " with gr.Group():\n", " with gr.Row():\n", " gr.Textbox(\"A\")\n", " gr.Number(3)\n", " gr.Button()\n", " with gr.Row():\n", " gr.Image()\n", " gr.Audio()\n", "\n", " gr.Markdown(\"### Several columns grouped together. If columns are uneven, there is a gray group background.\")\n", " with gr.Group():\n", " with gr.Row():\n", " with gr.Column():\n", " name = gr.Textbox(label=\"Name\")\n", " btn = gr.Button(\"Hello\")\n", " gr.Dropdown([\"a\", \"b\", \"c\"], interactive=True)\n", " gr.Number()\n", " gr.Textbox()\n", " with gr.Column():\n", " gr.Image()\n", " gr.Dropdown([\"a\", \"b\", \"c\"], interactive=True)\n", " with gr.Row():\n", " gr.Number(scale=2)\n", " gr.Textbox()\n", "\n", " gr.Markdown(\"### container=False removes label, padding, and block border, placing elements 'directly' on background.\")\n", " gr.Radio([1,2,3], container=False)\n", " gr.Textbox(container=False)\n", " gr.Image(\"https://picsum.photos/id/237/200/300\", container=False, height=200)\n", "\n", " gr.Markdown(\"### Textbox, Dropdown, and Number input boxes takes up full space when within a group without a container.\")\n", "\n", "\n", " with gr.Group():\n", " name = gr.Textbox(label=\"Name\")\n", " output = gr.Textbox(show_label=False, container=False)\n", " greet_btn = gr.Button(\"Greet\")\n", " with gr.Row():\n", " gr.Dropdown([\"a\", \"b\", \"c\"], interactive=True, container=False)\n", " gr.Textbox(container=False)\n", " gr.Number(container=False)\n", " gr.Image(height=100)\n", " greet_btn.click(fn=greet, inputs=name, outputs=output, api_name=\"greet\")\n", "\n", "\n", " gr.Markdown(\"### More examples\")\n", "\n", " with gr.Group():\n", " gr.Chatbot()\n", " with gr.Row():\n", " name = gr.Textbox(label=\"Prompot\", container=False)\n", " go = gr.Button(\"go\", scale=0)\n", "\n", " with gr.Column():\n", " gr.Radio([1,2,3], container=False)\n", " gr.Slider(0, 20, container=False)\n", "\n", " with gr.Group():\n", " with gr.Row():\n", " gr.Dropdown([\"a\", \"b\", \"c\"], interactive=True, container=False, elem_id=\"here2\")\n", " gr.Number(container=False)\n", " gr.Textbox(container=False)\n", "\n", " with gr.Row():\n", " with gr.Column():\n", " gr.Dropdown([\"a\", \"b\", \"c\"], interactive=True, container=False, elem_id=\"here2\")\n", " with gr.Column():\n", " gr.Number(container=False)\n", " with gr.Column():\n", " gr.Textbox(container=False)\n", "\n", "\n", "if __name__ == \"__main__\":\n", " demo.launch()"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5} \ No newline at end of file diff --git a/demo/blocks_group/run.py b/demo/blocks_group/run.py new file mode 100644 index 000000000000..a5c548589141 --- /dev/null +++ b/demo/blocks_group/run.py @@ -0,0 +1,113 @@ +import gradio as gr + +def greet(name): + return "Hello " + name + "!" + +with gr.Blocks() as demo: + gr.Markdown("### This is a couple of elements without any gr.Group. Form elements naturally group together anyway.") + gr.Textbox("A") + gr.Number(3) + gr.Button() + gr.Image() + gr.Slider() + + gr.Markdown("### This is the same set put in a gr.Group.") + with gr.Group(): + gr.Textbox("A") + gr.Number(3) + gr.Button() + gr.Image() + gr.Slider() + + gr.Markdown("### Now in a Row, no group.") + with gr.Row(): + gr.Textbox("A") + gr.Number(3) + gr.Button() + gr.Image() + gr.Slider() + + gr.Markdown("### Now in a Row in a group.") + with gr.Group(): + with gr.Row(): + gr.Textbox("A") + gr.Number(3) + gr.Button() + gr.Image() + gr.Slider() + + gr.Markdown("### Several rows grouped together.") + with gr.Group(): + with gr.Row(): + gr.Textbox("A") + gr.Number(3) + gr.Button() + with gr.Row(): + gr.Image() + gr.Audio() + + gr.Markdown("### Several columns grouped together. If columns are uneven, there is a gray group background.") + with gr.Group(): + with gr.Row(): + with gr.Column(): + name = gr.Textbox(label="Name") + btn = gr.Button("Hello") + gr.Dropdown(["a", "b", "c"], interactive=True) + gr.Number() + gr.Textbox() + with gr.Column(): + gr.Image() + gr.Dropdown(["a", "b", "c"], interactive=True) + with gr.Row(): + gr.Number(scale=2) + gr.Textbox() + + gr.Markdown("### container=False removes label, padding, and block border, placing elements 'directly' on background.") + gr.Radio([1,2,3], container=False) + gr.Textbox(container=False) + gr.Image("https://picsum.photos/id/237/200/300", container=False, height=200) + + gr.Markdown("### Textbox, Dropdown, and Number input boxes takes up full space when within a group without a container.") + + + with gr.Group(): + name = gr.Textbox(label="Name") + output = gr.Textbox(show_label=False, container=False) + greet_btn = gr.Button("Greet") + with gr.Row(): + gr.Dropdown(["a", "b", "c"], interactive=True, container=False) + gr.Textbox(container=False) + gr.Number(container=False) + gr.Image(height=100) + greet_btn.click(fn=greet, inputs=name, outputs=output, api_name="greet") + + + gr.Markdown("### More examples") + + with gr.Group(): + gr.Chatbot() + with gr.Row(): + name = gr.Textbox(label="Prompot", container=False) + go = gr.Button("go", scale=0) + + with gr.Column(): + gr.Radio([1,2,3], container=False) + gr.Slider(0, 20, container=False) + + with gr.Group(): + with gr.Row(): + gr.Dropdown(["a", "b", "c"], interactive=True, container=False, elem_id="here2") + gr.Number(container=False) + gr.Textbox(container=False) + + with gr.Row(): + with gr.Column(): + gr.Dropdown(["a", "b", "c"], interactive=True, container=False, elem_id="here2") + with gr.Column(): + gr.Number(container=False) + with gr.Column(): + gr.Textbox(container=False) + + +if __name__ == "__main__": + demo.launch() \ No newline at end of file diff --git a/demo/blocks_kitchen_sink/run.ipynb b/demo/blocks_kitchen_sink/run.ipynb index 05b5bc977d36..f235288bd824 100644 --- a/demo/blocks_kitchen_sink/run.ipynb +++ b/demo/blocks_kitchen_sink/run.ipynb @@ -1 +1 @@ -{"cells": [{"cell_type": "markdown", "id": 302934307671667531413257853548643485645, "metadata": {}, "source": ["# Gradio Demo: blocks_kitchen_sink"]}, {"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 time\n", "from os.path import abspath, join, pardir\n", "\n", "KS_FILES = abspath(join(__file__, pardir, pardir, \"kitchen_sink\", \"files\"))\n", "\n", "base_theme = gr.themes.Base()\n", "default_theme = gr.themes.Default()\n", "monochrome_theme = gr.themes.Monochrome()\n", "soft_theme = gr.themes.Soft()\n", "glass_theme = gr.themes.Glass()\n", "\n", "with gr.Blocks(theme=base_theme) as demo:\n", " gr.Markdown(\n", " \"\"\"\n", " # Blocks Kitchen Sink\n", " This is a demo of most Gradio features. Test all themes and toggle dark mode\n", " ## Elements\n", " - Use of Rows, Columns, Tabs, and Accordion\n", " - Use of Form elements: Textbox, Dropdown, Checkbox, Radio, Slider\n", " ## Other\n", " Other stuff\n", " - Buttons of variants: \"primary\", \"secondary\", \"stop\"\n", " - Embedded interface\n", " - Custom progress bar\n", " \"\"\"\n", " )\n", " toggle_dark = gr.Button(\"Toggle Dark\").style(full_width=False)\n", " toggle_dark.click(\n", " None,\n", " _js=\"\"\"\n", " () => { \n", " document.body.classList.toggle('dark');\n", " }\n", " \"\"\",\n", " )\n", " theme_selector = gr.Radio(\n", " [\"Base\", \"Default\", \"Monochrome\", \"Soft\", \"Glass\"],\n", " value=\"Base\",\n", " label=\"Theme\",\n", " )\n", " theme_selector.change(\n", " None,\n", " theme_selector,\n", " None,\n", " _js=f\"\"\"\n", " (theme) => {{\n", " if (!document.querySelector('.theme-css')) {{\n", " var theme_elem = document.createElement('style');\n", " theme_elem.classList.add('theme-css');\n", " document.head.appendChild(theme_elem);\n", "\n", " var link_elem = document.createElement('link');\n", " link_elem.classList.add('link-css');\n", " link_elem.rel = 'stylesheet';\n", " document.head.appendChild(link_elem);\n", " }} else {{\n", " var theme_elem = document.querySelector('.theme-css');\n", " var link_elem = document.querySelector('.link-css');\n", " }}\n", " if (theme == \"Base\") {{\n", " var theme_css = `{base_theme._get_theme_css()}`;\n", " var link_css = `{base_theme._stylesheets[0]}`;\n", " }} else if (theme == \"Default\") {{\n", " var theme_css = `{default_theme._get_theme_css()}`;\n", " var link_css = `{default_theme._stylesheets[0]}`;\n", " }} else if (theme == \"Monochrome\") {{\n", " var theme_css = `{monochrome_theme._get_theme_css()}`;\n", " var link_css = `{monochrome_theme._stylesheets[0]}`;\n", " }} else if (theme == \"Soft\") {{\n", " var theme_css = `{soft_theme._get_theme_css()}`;\n", " var link_css = `{soft_theme._stylesheets[0]}`;\n", " }} else if (theme == \"Glass\") {{\n", " var theme_css = `{glass_theme._get_theme_css()}`;\n", " var link_css = `{glass_theme._stylesheets[0]}`;\n", " }}\n", " theme_elem.innerHTML = theme_css;\n", " link_elem.href = link_css;\n", " }}\n", " \"\"\",\n", " )\n", "\n", " name = gr.Textbox(\n", " label=\"Name (select)\",\n", " info=\"Full name, including middle name. No special characters.\",\n", " placeholder=\"John Doe\",\n", " value=\"John Doe\",\n", " interactive=True,\n", " )\n", "\n", " with gr.Row():\n", " slider1 = gr.Slider(label=\"Slider 1\")\n", " slider2 = gr.Slider(label=\"Slider 2\")\n", " checkboxes = gr.CheckboxGroup([\"A\", \"B\", \"C\"], label=\"Checkbox Group (select)\")\n", "\n", " with gr.Row():\n", " with gr.Column(variant=\"panel\", scale=1):\n", " gr.Markdown(\"## Panel 1\")\n", " radio = gr.Radio(\n", " [\"A\", \"B\", \"C\"],\n", " label=\"Radio (select)\",\n", " info=\"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\",\n", " )\n", " drop = gr.Dropdown([\"Option 1\", \"Option 2\", \"Option 3\"], show_label=False)\n", " drop_2 = gr.Dropdown(\n", " [\"Option A\", \"Option B\", \"Option C\"],\n", " multiselect=True,\n", " value=[\"Option A\"],\n", " label=\"Dropdown (select)\",\n", " interactive=True,\n", " )\n", " check = gr.Checkbox(label=\"Go\")\n", " with gr.Column(variant=\"panel\", scale=2):\n", " img = gr.Image(\n", " \"https://raw.githubusercontent.com/gradio-app/gradio/main/js/_website/src/assets/img/header-image.jpg\",\n", " label=\"Image\"\n", " ).style(height=320)\n", " with gr.Row():\n", " go_btn = gr.Button(\"Go\", label=\"Primary Button\", variant=\"primary\")\n", " clear_btn = gr.Button(\n", " \"Clear\", label=\"Secondary Button\", variant=\"secondary\"\n", " )\n", "\n", " def go(*args):\n", " time.sleep(3)\n", " return \"https://raw.githubusercontent.com/gradio-app/gradio/main/js/_website/src/assets/img/header-image.jpg\"\n", "\n", " go_btn.click(go, [radio, drop, drop_2, check, name], img, api_name=\"go\")\n", "\n", " def clear():\n", " time.sleep(0.2)\n", " return None\n", "\n", " clear_btn.click(clear, None, img)\n", "\n", " with gr.Row():\n", " btn1 = gr.Button(\"Button 1\").style(size=\"sm\")\n", " btn2 = gr.UploadButton().style(size=\"sm\")\n", " stop_btn = gr.Button(\"Stop\", label=\"Stop Button\", variant=\"stop\").style(\n", " size=\"sm\"\n", " )\n", "\n", " gr.Examples(\n", " examples=[join(KS_FILES, \"lion.jpg\"), join(KS_FILES, \"tower.jpg\")],\n", " inputs=img,\n", " )\n", "\n", " gr.Examples(\n", " examples=[\n", " [\"A\", \"Option 1\", [\"Option B\"], True, join(KS_FILES, \"lion.jpg\")],\n", " [\n", " \"B\",\n", " \"Option 2\",\n", " [\"Option B\", \"Option C\"],\n", " False,\n", " join(KS_FILES, \"tower.jpg\"),\n", " ],\n", " ],\n", " inputs=[radio, drop, drop_2, check, img],\n", " label=\"Examples (select)\",\n", " )\n", "\n", " gr.Markdown(\"## Media Files\")\n", "\n", " with gr.Tabs() as tabs:\n", " with gr.Tab(\"Audio\"):\n", " with gr.Row():\n", " gr.Audio()\n", " gr.Audio(source=\"microphone\")\n", " gr.Audio(join(KS_FILES, \"cantina.wav\"))\n", " with gr.Tab(\"Other\"):\n", " # gr.Image(source=\"webcam\")\n", " gr.HTML(\n", " \"
\"\n", " )\n", " with gr.Row():\n", " dataframe = gr.Dataframe(\n", " value=[[1, 2, 3], [4, 5, 6], [7, 8, 9]], label=\"Dataframe (select)\"\n", " )\n", " gr.JSON(\n", " value={\"a\": 1, \"b\": 2, \"c\": {\"test\": \"a\", \"test2\": [1, 2, 3]}}, label=\"JSON\"\n", " )\n", " label = gr.Label(\n", " value={\"cat\": 0.7, \"dog\": 0.2, \"fish\": 0.1}, label=\"Label (select)\"\n", " )\n", " file = gr.File(label=\"File (select)\")\n", " with gr.Row():\n", " gr.ColorPicker()\n", " gr.Video(join(KS_FILES, \"world.mp4\"))\n", " gallery = gr.Gallery(\n", " [\n", " (join(KS_FILES, \"lion.jpg\"), \"lion\"),\n", " (join(KS_FILES, \"logo.png\"), \"logo\"),\n", " (join(KS_FILES, \"tower.jpg\"), \"tower\"),\n", " ],\n", " label=\"Gallery (select)\",\n", " )\n", "\n", " with gr.Row():\n", " with gr.Column(scale=2):\n", " highlight = gr.HighlightedText(\n", " [[\"The\", \"art\"], [\"dog\", \"noun\"], [\"is\", None], [\"fat\", \"adj\"]],\n", " label=\"Highlighted Text (select)\",\n", " )\n", " chatbot = gr.Chatbot([[\"Hello\", \"Hi\"]], label=\"Chatbot (select)\")\n", " chat_btn = gr.Button(\"Add messages\")\n", "\n", " def chat(history):\n", " time.sleep(2)\n", " yield [[\"How are you?\", \"I am good.\"]]\n", " time\n", "\n", " chat_btn.click(\n", " lambda history: history\n", " + [[\"How are you?\", \"I am good.\"]]\n", " + (time.sleep(2) or []),\n", " chatbot,\n", " chatbot,\n", " )\n", " with gr.Column(scale=1):\n", " with gr.Accordion(\"Select Info\"):\n", " gr.Markdown(\n", " \"Click on any part of any component with '(select)' in the label and see the SelectData data here.\"\n", " )\n", " select_index = gr.Textbox(label=\"Index\")\n", " select_value = gr.Textbox(label=\"Value\")\n", " select_selected = gr.Textbox(label=\"Selected\")\n", "\n", " selectables = [\n", " name,\n", " checkboxes,\n", " radio,\n", " drop_2,\n", " dataframe,\n", " label,\n", " file,\n", " highlight,\n", " chatbot,\n", " gallery,\n", " tabs\n", " ]\n", "\n", " def select_data(evt: gr.SelectData):\n", " return [\n", " evt.index,\n", " evt.value,\n", " evt.selected,\n", " ]\n", "\n", " for selectable in selectables:\n", " selectable.select(\n", " select_data,\n", " None,\n", " [select_index, select_value, select_selected],\n", " )\n", "\n", " gr.Markdown(\"## Dataset Examples\")\n", "\n", " component_example_set = [\n", " (gr.Audio(render=False), join(KS_FILES, \"cantina.wav\")),\n", " (gr.Checkbox(render=False), True),\n", " (gr.CheckboxGroup(render=False), [\"A\", \"B\"]),\n", " (gr.ColorPicker(render=False), \"#FF0000\"),\n", " (gr.Dataframe(render=False), [[1, 2, 3], [4, 5, 6]]),\n", " (gr.Dropdown(render=False), \"A\"),\n", " (gr.File(render=False), join(KS_FILES, \"lion.jpg\")),\n", " (gr.HTML(render=False), \"
Test
\"),\n", " (gr.Image(render=False), join(KS_FILES, \"lion.jpg\")),\n", " (gr.Markdown(render=False), \"# Test\"),\n", " (gr.Number(render=False), 1),\n", " (gr.Radio(render=False), \"A\"),\n", " (gr.Slider(render=False), 1),\n", " (gr.Textbox(render=False), \"A\"),\n", " (gr.Video(render=False), join(KS_FILES, \"world.mp4\")),\n", " ]\n", " gr.Dataset(\n", " components=[c for c, _ in component_example_set],\n", " samples=[[e for _, e in component_example_set]],\n", " )\n", "\n", " with gr.Tabs():\n", " for c, e in component_example_set:\n", " with gr.Tab(c.__class__.__name__):\n", " gr.Dataset(components=[c], samples=[[e]] * 3)\n", "\n", "\n", "if __name__ == \"__main__\":\n", " demo.launch(file_directories=[KS_FILES])\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5} \ No newline at end of file +{"cells": [{"cell_type": "markdown", "id": 302934307671667531413257853548643485645, "metadata": {}, "source": ["# Gradio Demo: blocks_kitchen_sink"]}, {"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 time\n", "from os.path import abspath, join, pardir\n", "\n", "KS_FILES = abspath(join(__file__, pardir, pardir, \"kitchen_sink\", \"files\"))\n", "\n", "base_theme = gr.themes.Base()\n", "default_theme = gr.themes.Default()\n", "monochrome_theme = gr.themes.Monochrome()\n", "soft_theme = gr.themes.Soft()\n", "glass_theme = gr.themes.Glass()\n", "\n", "with gr.Blocks(theme=base_theme) as demo:\n", " gr.Markdown(\n", " \"\"\"\n", " # Blocks Kitchen Sink\n", " This is a demo of most Gradio features. Test all themes and toggle dark mode\n", " ## Elements\n", " - Use of Rows, Columns, Tabs, and Accordion\n", " - Use of Form elements: Textbox, Dropdown, Checkbox, Radio, Slider\n", " ## Other\n", " Other stuff\n", " - Buttons of variants: \"primary\", \"secondary\", \"stop\"\n", " - Embedded interface\n", " - Custom progress bar\n", " \"\"\"\n", " )\n", " toggle_dark = gr.Button(\"Toggle Dark\").style(full_width=False)\n", " toggle_dark.click(\n", " None,\n", " _js=\"\"\"\n", " () => { \n", " document.body.classList.toggle('dark');\n", " }\n", " \"\"\",\n", " )\n", " theme_selector = gr.Radio(\n", " [\"Base\", \"Default\", \"Monochrome\", \"Soft\", \"Glass\"],\n", " value=\"Base\",\n", " label=\"Theme\",\n", " )\n", " theme_selector.change(\n", " None,\n", " theme_selector,\n", " None,\n", " _js=f\"\"\"\n", " (theme) => {{\n", " if (!document.querySelector('.theme-css')) {{\n", " var theme_elem = document.createElement('style');\n", " theme_elem.classList.add('theme-css');\n", " document.head.appendChild(theme_elem);\n", "\n", " var link_elem = document.createElement('link');\n", " link_elem.classList.add('link-css');\n", " link_elem.rel = 'stylesheet';\n", " document.head.appendChild(link_elem);\n", " }} else {{\n", " var theme_elem = document.querySelector('.theme-css');\n", " var link_elem = document.querySelector('.link-css');\n", " }}\n", " if (theme == \"Base\") {{\n", " var theme_css = `{base_theme._get_theme_css()}`;\n", " var link_css = `{base_theme._stylesheets[0]}`;\n", " }} else if (theme == \"Default\") {{\n", " var theme_css = `{default_theme._get_theme_css()}`;\n", " var link_css = `{default_theme._stylesheets[0]}`;\n", " }} else if (theme == \"Monochrome\") {{\n", " var theme_css = `{monochrome_theme._get_theme_css()}`;\n", " var link_css = `{monochrome_theme._stylesheets[0]}`;\n", " }} else if (theme == \"Soft\") {{\n", " var theme_css = `{soft_theme._get_theme_css()}`;\n", " var link_css = `{soft_theme._stylesheets[0]}`;\n", " }} else if (theme == \"Glass\") {{\n", " var theme_css = `{glass_theme._get_theme_css()}`;\n", " var link_css = `{glass_theme._stylesheets[0]}`;\n", " }}\n", " theme_elem.innerHTML = theme_css;\n", " link_elem.href = link_css;\n", " }}\n", " \"\"\",\n", " )\n", "\n", " name = gr.Textbox(\n", " label=\"Name (select)\",\n", " info=\"Full name, including middle name. No special characters.\",\n", " placeholder=\"John Doe\",\n", " value=\"John Doe\",\n", " interactive=True,\n", " )\n", "\n", " with gr.Row():\n", " slider1 = gr.Slider(label=\"Slider 1\")\n", " slider2 = gr.Slider(label=\"Slider 2\")\n", " checkboxes = gr.CheckboxGroup([\"A\", \"B\", \"C\"], label=\"Checkbox Group (select)\")\n", "\n", " with gr.Row():\n", " with gr.Column(variant=\"panel\", scale=1):\n", " gr.Markdown(\"## Panel 1\")\n", " radio = gr.Radio(\n", " [\"A\", \"B\", \"C\"],\n", " label=\"Radio (select)\",\n", " info=\"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\",\n", " )\n", " drop = gr.Dropdown([\"Option 1\", \"Option 2\", \"Option 3\"], show_label=False)\n", " drop_2 = gr.Dropdown(\n", " [\"Option A\", \"Option B\", \"Option C\"],\n", " multiselect=True,\n", " value=[\"Option A\"],\n", " label=\"Dropdown (select)\",\n", " interactive=True,\n", " )\n", " check = gr.Checkbox(label=\"Go\")\n", " with gr.Column(variant=\"panel\", scale=2):\n", " img = gr.Image(\n", " \"https://gradio.app/assets/img/header-image.jpg\", label=\"Image\"\n", " ).style(height=320)\n", " with gr.Row():\n", " go_btn = gr.Button(\"Go\", label=\"Primary Button\", variant=\"primary\")\n", " clear_btn = gr.Button(\n", " \"Clear\", label=\"Secondary Button\", variant=\"secondary\"\n", " )\n", "\n", " def go(*args):\n", " time.sleep(3)\n", " return \"https://i.ibb.co/6BgKdSj/groot.jpg\"\n", "\n", " go_btn.click(go, [radio, drop, drop_2, check, name], img, api_name=\"go\")\n", "\n", " def clear():\n", " time.sleep(0.2)\n", " return None\n", "\n", " clear_btn.click(clear, None, img)\n", "\n", " with gr.Row():\n", " btn1 = gr.Button(\"Button 1\").style(size=\"sm\")\n", " btn2 = gr.UploadButton().style(size=\"sm\")\n", " stop_btn = gr.Button(\"Stop\", label=\"Stop Button\", variant=\"stop\").style(\n", " size=\"sm\"\n", " )\n", "\n", " gr.Examples(\n", " examples=[join(KS_FILES, \"lion.jpg\"), join(KS_FILES, \"tower.jpg\")],\n", " inputs=img,\n", " )\n", "\n", " gr.Examples(\n", " examples=[\n", " [\"A\", \"Option 1\", [\"Option B\"], True, join(KS_FILES, \"lion.jpg\")],\n", " [\n", " \"B\",\n", " \"Option 2\",\n", " [\"Option B\", \"Option C\"],\n", " False,\n", " join(KS_FILES, \"tower.jpg\"),\n", " ],\n", " ],\n", " inputs=[radio, drop, drop_2, check, img],\n", " label=\"Examples (select)\",\n", " )\n", "\n", " gr.Markdown(\"## Media Files\")\n", "\n", " with gr.Tabs() as tabs:\n", " with gr.Tab(\"Audio\"):\n", " with gr.Row():\n", " gr.Audio()\n", " gr.Audio(source=\"microphone\")\n", " gr.Audio(join(KS_FILES, \"cantina.wav\"))\n", " with gr.Tab(\"Other\"):\n", " # gr.Image(source=\"webcam\")\n", " gr.HTML(\n", " \"
\"\n", " )\n", " with gr.Row():\n", " dataframe = gr.Dataframe(\n", " value=[[1, 2, 3], [4, 5, 6], [7, 8, 9]], label=\"Dataframe (select)\"\n", " )\n", " gr.JSON(\n", " value={\"a\": 1, \"b\": 2, \"c\": {\"test\": \"a\", \"test2\": [1, 2, 3]}}, label=\"JSON\"\n", " )\n", " label = gr.Label(\n", " value={\"cat\": 0.7, \"dog\": 0.2, \"fish\": 0.1}, label=\"Label (select)\"\n", " )\n", " file = gr.File(label=\"File (select)\")\n", " with gr.Row():\n", " gr.ColorPicker()\n", " gr.Video(join(KS_FILES, \"world.mp4\"))\n", " gallery = gr.Gallery(\n", " [\n", " (join(KS_FILES, \"lion.jpg\"), \"lion\"),\n", " (join(KS_FILES, \"logo.png\"), \"logo\"),\n", " (join(KS_FILES, \"tower.jpg\"), \"tower\"),\n", " ],\n", " label=\"Gallery (select)\",\n", " )\n", "\n", " with gr.Row():\n", " with gr.Column(scale=2):\n", " highlight = gr.HighlightedText(\n", " [[\"The\", \"art\"], [\"dog\", \"noun\"], [\"is\", None], [\"fat\", \"adj\"]],\n", " label=\"Highlighted Text (select)\",\n", " )\n", " chatbot = gr.Chatbot([[\"Hello\", \"Hi\"]], label=\"Chatbot (select)\")\n", " chat_btn = gr.Button(\"Add messages\")\n", "\n", " def chat(history):\n", " time.sleep(2)\n", " yield [[\"How are you?\", \"I am good.\"]]\n", " time\n", "\n", " chat_btn.click(\n", " lambda history: history\n", " + [[\"How are you?\", \"I am good.\"]]\n", " + (time.sleep(2) or []),\n", " chatbot,\n", " chatbot,\n", " )\n", " with gr.Column(scale=1):\n", " with gr.Accordion(\"Select Info\"):\n", " gr.Markdown(\n", " \"Click on any part of any component with '(select)' in the label and see the SelectData data here.\"\n", " )\n", " select_index = gr.Textbox(label=\"Index\")\n", " select_value = gr.Textbox(label=\"Value\")\n", " select_selected = gr.Textbox(label=\"Selected\")\n", "\n", " selectables = [\n", " name,\n", " checkboxes,\n", " radio,\n", " drop_2,\n", " dataframe,\n", " label,\n", " file,\n", " highlight,\n", " chatbot,\n", " gallery,\n", " tabs\n", " ]\n", "\n", " def select_data(evt: gr.SelectData):\n", " return [\n", " evt.index,\n", " evt.value,\n", " evt.selected,\n", " ]\n", "\n", " for selectable in selectables:\n", " selectable.select(\n", " select_data,\n", " None,\n", " [select_index, select_value, select_selected],\n", " )\n", "\n", " gr.Markdown(\"## Dataset Examples\")\n", "\n", " component_example_set = [\n", " (gr.Audio(render=False), join(KS_FILES, \"cantina.wav\")),\n", " (gr.Checkbox(render=False), True),\n", " (gr.CheckboxGroup(render=False), [\"A\", \"B\"]),\n", " (gr.ColorPicker(render=False), \"#FF0000\"),\n", " (gr.Dataframe(render=False), [[1, 2, 3], [4, 5, 6]]),\n", " (gr.Dropdown(render=False), \"A\"),\n", " (gr.File(render=False), join(KS_FILES, \"lion.jpg\")),\n", " (gr.HTML(render=False), \"
Test
\"),\n", " (gr.Image(render=False), join(KS_FILES, \"lion.jpg\")),\n", " (gr.Markdown(render=False), \"# Test\"),\n", " (gr.Number(render=False), 1),\n", " (gr.Radio(render=False), \"A\"),\n", " (gr.Slider(render=False), 1),\n", " (gr.Textbox(render=False), \"A\"),\n", " (gr.Video(render=False), join(KS_FILES, \"world.mp4\")),\n", " ]\n", " gr.Dataset(\n", " components=[c for c, _ in component_example_set],\n", " samples=[[e for _, e in component_example_set]],\n", " )\n", "\n", " with gr.Tabs():\n", " for c, e in component_example_set:\n", " with gr.Tab(c.__class__.__name__):\n", " gr.Dataset(components=[c], samples=[[e]] * 3)\n", "\n", "\n", "if __name__ == \"__main__\":\n", " demo.launch(file_directories=[KS_FILES])\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5} \ No newline at end of file diff --git a/demo/blocks_kitchen_sink/run.py b/demo/blocks_kitchen_sink/run.py index f3bda112cd9b..58517ba2d4d5 100644 --- a/demo/blocks_kitchen_sink/run.py +++ b/demo/blocks_kitchen_sink/run.py @@ -112,8 +112,7 @@ check = gr.Checkbox(label="Go") with gr.Column(variant="panel", scale=2): img = gr.Image( - "https://raw.githubusercontent.com/gradio-app/gradio/main/js/_website/src/assets/img/header-image.jpg", - label="Image" + "https://gradio.app/assets/img/header-image.jpg", label="Image" ).style(height=320) with gr.Row(): go_btn = gr.Button("Go", label="Primary Button", variant="primary") @@ -123,7 +122,7 @@ def go(*args): time.sleep(3) - return "https://raw.githubusercontent.com/gradio-app/gradio/main/js/_website/src/assets/img/header-image.jpg" + return "https://i.ibb.co/6BgKdSj/groot.jpg" go_btn.click(go, [radio, drop, drop_2, check, name], img, api_name="go") diff --git a/gradio/components/annotated_image.py b/gradio/components/annotated_image.py index cdc690243781..acb137566dc0 100644 --- a/gradio/components/annotated_image.py +++ b/gradio/components/annotated_image.py @@ -46,7 +46,7 @@ def __init__( color_map: dict[str, str] | None = None, label: str | None = None, every: float | None = None, - show_label: bool = True, + show_label: bool | None = None, container: bool = True, scale: int | None = None, min_width: int = 160, diff --git a/gradio/components/audio.py b/gradio/components/audio.py index 7263c2bf7978..a8e2a74ee557 100644 --- a/gradio/components/audio.py +++ b/gradio/components/audio.py @@ -56,7 +56,7 @@ def __init__( type: Literal["numpy", "filepath"] = "numpy", label: str | None = None, every: float | None = None, - show_label: bool = True, + show_label: bool | None = None, container: bool = True, scale: int | None = None, min_width: int = 160, diff --git a/gradio/components/bar_plot.py b/gradio/components/bar_plot.py index 988a43f943ac..4a018590c7db 100644 --- a/gradio/components/bar_plot.py +++ b/gradio/components/bar_plot.py @@ -58,7 +58,7 @@ def __init__( caption: str | None = None, interactive: bool | None = True, label: str | None = None, - show_label: bool = True, + show_label: bool | None = None, container: bool = True, scale: int | None = None, min_width: int = 160, diff --git a/gradio/components/base.py b/gradio/components/base.py index 7dc5a934abbc..4a2ae002ef07 100644 --- a/gradio/components/base.py +++ b/gradio/components/base.py @@ -133,7 +133,7 @@ def __init__( value: Any = None, label: str | None = None, info: str | None = None, - show_label: bool = True, + show_label: bool | None = None, container: bool = True, scale: int | None = None, min_width: int | None = None, @@ -156,6 +156,12 @@ def __init__( self.label = label self.info = info + if not container: + if show_label: + warn_deprecation("show_label has no effect when container is False.") + show_label = False + if show_label is None: + show_label = True self.show_label = show_label self.container = container if scale is not None and scale != round(scale): @@ -366,6 +372,8 @@ def as_example(self, input_data): class FormComponent: def get_expected_parent(self) -> type[Form]: + if getattr(self, "container", None) is False: + return None return Form diff --git a/gradio/components/chatbot.py b/gradio/components/chatbot.py index 39c31c5fcdfc..43ea670f80f0 100644 --- a/gradio/components/chatbot.py +++ b/gradio/components/chatbot.py @@ -42,7 +42,7 @@ def __init__( *, label: str | None = None, every: float | None = None, - show_label: bool = True, + show_label: bool | None = None, container: bool = True, scale: int | None = None, min_width: int = 160, diff --git a/gradio/components/checkbox.py b/gradio/components/checkbox.py index c8681b735e5a..08b6478f4b18 100644 --- a/gradio/components/checkbox.py +++ b/gradio/components/checkbox.py @@ -40,7 +40,7 @@ def __init__( label: str | None = None, info: str | None = None, every: float | None = None, - show_label: bool = True, + show_label: bool | None = None, container: bool = True, scale: int | None = None, min_width: int = 160, diff --git a/gradio/components/checkboxgroup.py b/gradio/components/checkboxgroup.py index c3ac415d6fb8..3e67090ac8af 100644 --- a/gradio/components/checkboxgroup.py +++ b/gradio/components/checkboxgroup.py @@ -42,7 +42,7 @@ def __init__( label: str | None = None, info: str | None = None, every: float | None = None, - show_label: bool = True, + show_label: bool | None = None, container: bool = True, scale: int | None = None, min_width: int = 160, diff --git a/gradio/components/code.py b/gradio/components/code.py index 30134c8ead56..134877a4036d 100644 --- a/gradio/components/code.py +++ b/gradio/components/code.py @@ -57,7 +57,7 @@ def __init__( lines: int = 5, label: str | None = None, interactive: bool | None = None, - show_label: bool = True, + show_label: bool | None = None, container: bool = True, scale: int | None = None, min_width: int = 160, diff --git a/gradio/components/color_picker.py b/gradio/components/color_picker.py index ff7c68f08281..49881866187e 100644 --- a/gradio/components/color_picker.py +++ b/gradio/components/color_picker.py @@ -37,7 +37,7 @@ def __init__( label: str | None = None, info: str | None = None, every: float | None = None, - show_label: bool = True, + show_label: bool | None = None, container: bool = True, scale: int | None = None, min_width: int = 160, diff --git a/gradio/components/dataframe.py b/gradio/components/dataframe.py index f0ed13adafa0..8c8c78a3d9c6 100644 --- a/gradio/components/dataframe.py +++ b/gradio/components/dataframe.py @@ -55,7 +55,7 @@ def __init__( overflow_row_behaviour: Literal["paginate", "show_ends"] = "paginate", label: str | None = None, every: float | None = None, - show_label: bool = True, + show_label: bool | None = None, scale: int | None = None, min_width: int = 160, interactive: bool | None = None, diff --git a/gradio/components/dropdown.py b/gradio/components/dropdown.py index aaab982a8cf7..473e105268e8 100644 --- a/gradio/components/dropdown.py +++ b/gradio/components/dropdown.py @@ -50,7 +50,7 @@ def __init__( label: str | None = None, info: str | None = None, every: float | None = None, - show_label: bool = True, + show_label: bool | None = None, container: bool = True, scale: int | None = None, min_width: int = 160, @@ -155,6 +155,7 @@ def get_config(self): "multiselect": self.multiselect, "max_choices": self.max_choices, "allow_custom_value": self.allow_custom_value, + "container": self.container, **IOComponent.get_config(self), } diff --git a/gradio/components/file.py b/gradio/components/file.py index 9202dc323bbc..79426473d605 100644 --- a/gradio/components/file.py +++ b/gradio/components/file.py @@ -51,7 +51,7 @@ def __init__( type: Literal["file", "binary"] = "file", label: str | None = None, every: float | None = None, - show_label: bool = True, + show_label: bool | None = None, container: bool = True, scale: int | None = None, min_width: int = 160, diff --git a/gradio/components/gallery.py b/gradio/components/gallery.py index 47db43e107f7..7e4278a1d0b5 100644 --- a/gradio/components/gallery.py +++ b/gradio/components/gallery.py @@ -39,7 +39,7 @@ def __init__( *, label: str | None = None, every: float | None = None, - show_label: bool = True, + show_label: bool | None = None, container: bool = True, scale: int | None = None, min_width: int = 160, diff --git a/gradio/components/highlighted_text.py b/gradio/components/highlighted_text.py index 89b6c0aa27e5..8d8c9b0d0b34 100644 --- a/gradio/components/highlighted_text.py +++ b/gradio/components/highlighted_text.py @@ -42,7 +42,7 @@ def __init__( adjacent_separator: str = "", label: str | None = None, every: float | None = None, - show_label: bool = True, + show_label: bool | None = None, container: bool = True, scale: int | None = None, min_width: int = 160, diff --git a/gradio/components/html.py b/gradio/components/html.py index cc5634e72b5a..4fd58cf95261 100644 --- a/gradio/components/html.py +++ b/gradio/components/html.py @@ -30,7 +30,7 @@ def __init__( *, label: str | None = None, every: float | None = None, - show_label: bool = True, + show_label: bool | None = None, visible: bool = True, elem_id: str | None = None, elem_classes: list[str] | str | None = None, diff --git a/gradio/components/image.py b/gradio/components/image.py index b4f0ea8366c0..8d2a65041648 100644 --- a/gradio/components/image.py +++ b/gradio/components/image.py @@ -69,7 +69,7 @@ def __init__( type: Literal["numpy", "pil", "filepath"] = "numpy", label: str | None = None, every: float | None = None, - show_label: bool = True, + show_label: bool | None = None, container: bool = True, scale: int | None = None, min_width: int = 160, diff --git a/gradio/components/json_component.py b/gradio/components/json_component.py index 937d002d2475..bdd32c51febf 100644 --- a/gradio/components/json_component.py +++ b/gradio/components/json_component.py @@ -33,7 +33,7 @@ def __init__( *, label: str | None = None, every: float | None = None, - show_label: bool = True, + show_label: bool | None = None, container: bool = True, scale: int | None = None, min_width: int = 160, diff --git a/gradio/components/label.py b/gradio/components/label.py index 140b6bb27f76..5a2c40fd387b 100644 --- a/gradio/components/label.py +++ b/gradio/components/label.py @@ -42,7 +42,7 @@ def __init__( num_top_classes: int | None = None, label: str | None = None, every: float | None = None, - show_label: bool = True, + show_label: bool | None = None, container: bool = True, scale: int | None = None, min_width: int = 160, diff --git a/gradio/components/line_plot.py b/gradio/components/line_plot.py index a3099134cd81..b24c9245d478 100644 --- a/gradio/components/line_plot.py +++ b/gradio/components/line_plot.py @@ -71,7 +71,7 @@ def __init__( caption: str | None = None, interactive: bool | None = True, label: str | None = None, - show_label: bool = True, + show_label: bool | None = None, container: bool = True, scale: int | None = None, min_width: int = 160, diff --git a/gradio/components/model3d.py b/gradio/components/model3d.py index ac0278955d60..aed05a215df8 100644 --- a/gradio/components/model3d.py +++ b/gradio/components/model3d.py @@ -40,7 +40,7 @@ def __init__( clear_color: list[float] | None = None, label: str | None = None, every: float | None = None, - show_label: bool = True, + show_label: bool | None = None, container: bool = True, scale: int | None = None, min_width: int = 160, diff --git a/gradio/components/number.py b/gradio/components/number.py index ee6297756737..1b2029a7042c 100644 --- a/gradio/components/number.py +++ b/gradio/components/number.py @@ -49,7 +49,7 @@ def __init__( label: str | None = None, info: str | None = None, every: float | None = None, - show_label: bool = True, + show_label: bool | None = None, container: bool = True, scale: int | None = None, min_width: int = 160, @@ -127,6 +127,7 @@ def get_config(self): "value": self.value, "minimum": self.minimum, "maximum": self.maximum, + "container": self.container, **IOComponent.get_config(self), } diff --git a/gradio/components/plot.py b/gradio/components/plot.py index 203d933afb8b..54927b8b8988 100644 --- a/gradio/components/plot.py +++ b/gradio/components/plot.py @@ -36,7 +36,7 @@ def __init__( *, label: str | None = None, every: float | None = None, - show_label: bool = True, + show_label: bool | None = None, container: bool = True, scale: int | None = None, min_width: int = 160, diff --git a/gradio/components/radio.py b/gradio/components/radio.py index f379badbead2..a8846a84a621 100644 --- a/gradio/components/radio.py +++ b/gradio/components/radio.py @@ -43,7 +43,7 @@ def __init__( label: str | None = None, info: str | None = None, every: float | None = None, - show_label: bool = True, + show_label: bool | None = None, container: bool = True, scale: int | None = None, min_width: int = 160, diff --git a/gradio/components/scatter_plot.py b/gradio/components/scatter_plot.py index a788b0b96bb1..8c5a45fc48ee 100644 --- a/gradio/components/scatter_plot.py +++ b/gradio/components/scatter_plot.py @@ -87,7 +87,7 @@ def __init__( interactive: bool | None = True, label: str | None = None, every: float | None = None, - show_label: bool = True, + show_label: bool | None = None, container: bool = True, scale: int | None = None, min_width: int = 160, diff --git a/gradio/components/slider.py b/gradio/components/slider.py index 31677345a70d..c589eb675d09 100644 --- a/gradio/components/slider.py +++ b/gradio/components/slider.py @@ -48,7 +48,7 @@ def __init__( label: str | None = None, info: str | None = None, every: float | None = None, - show_label: bool = True, + show_label: bool | None = None, container: bool = True, scale: int | None = None, min_width: int = 160, diff --git a/gradio/components/textbox.py b/gradio/components/textbox.py index 77141f9b3c20..5b7699ffdf75 100644 --- a/gradio/components/textbox.py +++ b/gradio/components/textbox.py @@ -59,7 +59,7 @@ def __init__( label: str | None = None, info: str | None = None, every: float | None = None, - show_label: bool = True, + show_label: bool | None = None, container: bool = True, scale: int | None = None, min_width: int = 160, @@ -140,6 +140,7 @@ def get_config(self): "value": self.value, "type": self.type, "show_copy_button": self.show_copy_button, + "container": self.container, "text_align": self.text_align, "rtl": self.rtl, **IOComponent.get_config(self), diff --git a/gradio/components/timeseries.py b/gradio/components/timeseries.py index 53acd46d11e2..92d9086108bd 100644 --- a/gradio/components/timeseries.py +++ b/gradio/components/timeseries.py @@ -34,7 +34,7 @@ def __init__( colors: list[str] | None = None, label: str | None = None, every: float | None = None, - show_label: bool = True, + show_label: bool | None = None, container: bool = True, scale: int | None = None, min_width: int = 160, diff --git a/gradio/components/video.py b/gradio/components/video.py index 9c808e6cc763..4cbe9294b2d5 100644 --- a/gradio/components/video.py +++ b/gradio/components/video.py @@ -60,7 +60,7 @@ def __init__( width: int | None = None, label: str | None = None, every: float | None = None, - show_label: bool = True, + show_label: bool | None = None, container: bool = True, scale: int | None = None, min_width: int = 160, diff --git a/gradio/layouts.py b/gradio/layouts.py index 41af443dccad..58a4f20ba2cc 100644 --- a/gradio/layouts.py +++ b/gradio/layouts.py @@ -1,5 +1,6 @@ from __future__ import annotations +import warnings from typing import TYPE_CHECKING, Literal from gradio_client.documentation import document, set_documentation_group @@ -295,6 +296,7 @@ def __init__( visible: If False, box will be hidden. elem_id: An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles. """ + warnings.warn("gr.Box is deprecated. Use gr.Group instead.", DeprecationWarning) super().__init__(visible=visible, elem_id=elem_id, **kwargs) def get_config(self): diff --git a/js/app/src/components/AnnotatedImage/AnnotatedImage.svelte b/js/app/src/components/AnnotatedImage/AnnotatedImage.svelte index 0dafd32e2ca6..4b8269c2f6be 100644 --- a/js/app/src/components/AnnotatedImage/AnnotatedImage.svelte +++ b/js/app/src/components/AnnotatedImage/AnnotatedImage.svelte @@ -19,7 +19,7 @@ export let height: number | undefined; export let width: number | undefined; export let color_map: Record; - export let container: boolean = false; + export let container: boolean = true; export let scale: number | null = null; export let min_width: number | undefined = undefined; export let root: string; diff --git a/js/app/src/components/Audio/Audio.svelte b/js/app/src/components/Audio/Audio.svelte index 192bfdd66580..84ca71267312 100644 --- a/js/app/src/components/Audio/Audio.svelte +++ b/js/app/src/components/Audio/Audio.svelte @@ -34,7 +34,7 @@ export let pending: boolean; export let streaming: boolean; export let root_url: null | string; - export let container = false; + export let container: boolean = true; export let scale: number | null = null; export let min_width: number | undefined = undefined; export let loading_status: LoadingStatus; diff --git a/js/app/src/components/Checkbox/Checkbox.svelte b/js/app/src/components/Checkbox/Checkbox.svelte index 34cd6adb30ee..60d095a8e7f4 100644 --- a/js/app/src/components/Checkbox/Checkbox.svelte +++ b/js/app/src/components/Checkbox/Checkbox.svelte @@ -12,7 +12,7 @@ export let label: string = "Checkbox"; export let info: string | undefined = undefined; export let mode: "static" | "dynamic"; - export let container: boolean = false; + export let container: boolean = true; export let scale: number | null = null; export let min_width: number | undefined = undefined; export let loading_status: LoadingStatus; diff --git a/js/app/src/components/CheckboxGroup/CheckboxGroup.svelte b/js/app/src/components/CheckboxGroup/CheckboxGroup.svelte index e2774b3793cd..9a2d2861e854 100644 --- a/js/app/src/components/CheckboxGroup/CheckboxGroup.svelte +++ b/js/app/src/components/CheckboxGroup/CheckboxGroup.svelte @@ -10,7 +10,7 @@ export let value: Array = []; export let value_is_output: boolean = false; export let choices: Array; - export let container: boolean = false; + export let container: boolean = true; export let scale: number | null = null; export let min_width: number | undefined = undefined; export let mode: "static" | "dynamic"; diff --git a/js/app/src/components/ColorPicker/ColorPicker.svelte b/js/app/src/components/ColorPicker/ColorPicker.svelte index dc6ffc411156..0051376455e3 100644 --- a/js/app/src/components/ColorPicker/ColorPicker.svelte +++ b/js/app/src/components/ColorPicker/ColorPicker.svelte @@ -14,7 +14,7 @@ export let value: string; export let value_is_output: boolean = false; export let show_label: boolean; - export let container: boolean = false; + export let container: boolean = true; export let scale: number | null = null; export let min_width: number | undefined = undefined; export let loading_status: LoadingStatus; diff --git a/js/app/src/components/Dropdown/Dropdown.svelte b/js/app/src/components/Dropdown/Dropdown.svelte index 6b6a379f737c..5b9a1bb8834f 100644 --- a/js/app/src/components/Dropdown/Dropdown.svelte +++ b/js/app/src/components/Dropdown/Dropdown.svelte @@ -15,7 +15,7 @@ export let max_choices: number; export let choices: Array; export let show_label: boolean; - export let container: boolean = false; + export let container: boolean = true; export let scale: number | null = null; export let min_width: number | undefined = undefined; export let loading_status: LoadingStatus; @@ -30,7 +30,7 @@ } - + | undefined = [2]; diff --git a/js/app/src/components/Group/Group.svelte b/js/app/src/components/Group/Group.svelte index 91df05b31f05..711ff33c2486 100644 --- a/js/app/src/components/Group/Group.svelte +++ b/js/app/src/components/Group/Group.svelte @@ -4,30 +4,39 @@ export let visible: boolean = true; -
+
+
+
+ \ No newline at end of file diff --git a/js/app/src/components/HighlightedText/HighlightedText.svelte b/js/app/src/components/HighlightedText/HighlightedText.svelte index 47c980f21462..f7a6b7f770bf 100644 --- a/js/app/src/components/HighlightedText/HighlightedText.svelte +++ b/js/app/src/components/HighlightedText/HighlightedText.svelte @@ -14,7 +14,7 @@ export let show_legend: boolean; export let color_map: Record = {}; export let label: string = "Highlighted Text"; - export let container: boolean = false; + export let container: boolean = true; export let scale: number | null = null; export let min_width: number | undefined = undefined; export let selectable: boolean = false; diff --git a/js/app/src/components/Image/Image.svelte b/js/app/src/components/Image/Image.svelte index b4e88f164bf8..375c2141ce2a 100644 --- a/js/app/src/components/Image/Image.svelte +++ b/js/app/src/components/Image/Image.svelte @@ -25,7 +25,7 @@ export let shape: [number, number]; export let brush_radius: number; export let selectable: boolean = false; - export let container: boolean = false; + export let container: boolean = true; export let scale: number | null = null; export let min_width: number | undefined = undefined; export let loading_status: LoadingStatus; diff --git a/js/app/src/components/Json/Json.svelte b/js/app/src/components/Json/Json.svelte index aee70fa64137..fee0b965fe72 100644 --- a/js/app/src/components/Json/Json.svelte +++ b/js/app/src/components/Json/Json.svelte @@ -16,7 +16,7 @@ export let loading_status: LoadingStatus; export let label: string; export let show_label: boolean; - export let container: boolean = false; + export let container: boolean = true; export let scale: number | null = null; export let min_width: number | undefined = undefined; diff --git a/js/app/src/components/Label/Label.svelte b/js/app/src/components/Label/Label.svelte index af26d4c8f995..fac92442b7ff 100644 --- a/js/app/src/components/Label/Label.svelte +++ b/js/app/src/components/Label/Label.svelte @@ -15,7 +15,7 @@ confidences?: Array<{ label: string; confidence: number }>; } = {}; export let label: string = "Label"; - export let container: boolean = false; + export let container: boolean = true; export let scale: number | null = null; export let min_width: number | undefined = undefined; export let loading_status: LoadingStatus; diff --git a/js/app/src/components/Model3D/Model3D.svelte b/js/app/src/components/Model3D/Model3D.svelte index 467f2ab0c265..56168d3c3577 100644 --- a/js/app/src/components/Model3D/Model3D.svelte +++ b/js/app/src/components/Model3D/Model3D.svelte @@ -21,7 +21,7 @@ export let loading_status: LoadingStatus; export let label: string; export let show_label: boolean; - export let container: boolean = false; + export let container: boolean = true; export let scale: number | null = null; export let min_width: number | undefined = undefined; diff --git a/js/app/src/components/Number/Number.svelte b/js/app/src/components/Number/Number.svelte index d0d70775354e..0edc44e669c7 100644 --- a/js/app/src/components/Number/Number.svelte +++ b/js/app/src/components/Number/Number.svelte @@ -9,7 +9,7 @@ export let elem_id: string = ""; export let elem_classes: Array = []; export let visible: boolean = true; - export let container: boolean = false; + export let container: boolean = true; export let scale: number | null = null; export let min_width: number | undefined = undefined; export let value: number = 0; @@ -21,7 +21,7 @@ export let value_is_output: boolean = false; - + - + {#if loading_status} {/if} @@ -46,6 +46,7 @@ max_lines={!max_lines && mode === "static" ? lines + 1 : max_lines} {placeholder} {show_copy_button} + {container} on:change on:input on:submit diff --git a/js/app/src/components/TimeSeries/TimeSeries.svelte b/js/app/src/components/TimeSeries/TimeSeries.svelte index 43b4b9c437c1..59dbf2c89513 100644 --- a/js/app/src/components/TimeSeries/TimeSeries.svelte +++ b/js/app/src/components/TimeSeries/TimeSeries.svelte @@ -42,7 +42,7 @@ export let label: string; export let show_label: boolean; export let colors: Array; - export let container: boolean = false; + export let container: boolean = true; export let scale: number | null = null; export let min_width: number | undefined = undefined; export let loading_status: LoadingStatus; diff --git a/js/app/test/components.test.ts b/js/app/test/components.test.ts index 70bbab0c499a..f269daa1a7d4 100644 --- a/js/app/test/components.test.ts +++ b/js/app/test/components.test.ts @@ -155,7 +155,7 @@ describe("all components should be invisible when visible=false", () => { const elem = container.querySelector(`#test-id`); - expect(elem).toHaveClass("hide-container"); + expect(elem).toHaveClass("hidden"); }); }); diff --git a/js/atoms/src/Block.svelte b/js/atoms/src/Block.svelte index bdd536d72c64..57f0e37dfa64 100644 --- a/js/atoms/src/Block.svelte +++ b/js/atoms/src/Block.svelte @@ -1,5 +1,4 @@ -