Merge branch 'main' of github-space-nuko:gradio-app/gradio into windo…

…ws-tests

CHANGELOG.md

@@ -3,7 +3,13 @@
 
 ## New Features:
 
-- Add keyword argument `elem_classes` to Components to control class names of components, in the same manner as existing `elem_id`. 
+### Official Theme release
+
+Gradio now supports a new theme system, which allows you to customize the look and feel of your app. You can now use the `theme=` kwarg to pass in a prebuilt theme, or customize your own! See guides/06_other-tutorials/theming-guide for more details. By [@aliabid94](https://github.com/aliabid94) in [PR 3494](https://github.com/gradio-app/gradio/pull/3494) 
+
+### `elem_classes`
+
+Add keyword argument `elem_classes` to Components to control class names of components, in the same manner as existing `elem_id`. 
 By [@aliabid94](https://github.com/aliabid94) in [PR 3466](https://github.com/gradio-app/gradio/pull/3466)
 
 ## Bug Fixes:

demo/blocks_kitchen_sink/run.py

@@ -10,7 +10,7 @@
 soft_theme = gr.themes.Soft()
 glass_theme = gr.themes.Glass()
 
-with gr.Blocks() as demo:
+with gr.Blocks(theme=base_theme) as demo:
     gr.Markdown(
         """
     # Blocks Kitchen Sink
@@ -31,13 +31,13 @@
         _js="""
         () => { 
             document.body.classList.toggle('dark');
-            document.querySelector('gradio-app').style.backgroundColor = 'var(--color-background-primary)'
+            document.querySelector('gradio-app').style.backgroundColor = 'var(--background-primary)'
         }
         """,
     )
     theme_selector = gr.Radio(
         ["Base", "Default", "Monochrome", "Soft", "Glass"],
-        value="Default",
+        value="Base",
         label="Theme",
     )
     theme_selector.change(
@@ -50,21 +50,33 @@
                 var theme_elem = document.createElement('style');
                 theme_elem.classList.add('theme-css');
                 document.head.appendChild(theme_elem);
+
+                var link_elem = document.createElement('link');
+                link_elem.classList.add('link-css');
+                link_elem.rel = 'stylesheet';
+                document.head.appendChild(link_elem);
             }} else {{
                 var theme_elem = document.querySelector('.theme-css');
+                var link_elem = document.querySelector('.link-css');
             }}
             if (theme == "Base") {{
                 var theme_css = `{base_theme._get_theme_css()}`;
+                var link_css = `{base_theme._stylesheets[0]}`;
             }} else if (theme == "Default") {{
                 var theme_css = `{default_theme._get_theme_css()}`;
+                var link_css = `{default_theme._stylesheets[0]}`;
             }} else if (theme == "Monochrome") {{
                 var theme_css = `{monochrome_theme._get_theme_css()}`;
+                var link_css = `{monochrome_theme._stylesheets[0]}`;
             }} else if (theme == "Soft") {{
                 var theme_css = `{soft_theme._get_theme_css()}`;
+                var link_css = `{soft_theme._stylesheets[0]}`;
             }} else if (theme == "Glass") {{
                 var theme_css = `{glass_theme._get_theme_css()}`;
+                var link_css = `{glass_theme._stylesheets[0]}`;
             }}
             theme_elem.innerHTML = theme_css;
+            link_elem.href = link_css;
         }}
     """,
     )

demo/theme_extended_step_1/run.ipynb

@@ -0,0 +1 @@
+{"cells": [{"cell_type": "markdown", "id": 302934307671667531413257853548643485645, "metadata": {}, "source": ["# Gradio Demo: theme_extended_step_1"]}, {"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", "\n", "with gr.Blocks(theme=gr.themes.Default(primary_hue=\"red\", secondary_hue=\"pink\")) as demo:\n", "    textbox = gr.Textbox(label=\"Name\")\n", "    slider = gr.Slider(label=\"Count\", minimum=0, maximum=100, step=1)\n", "    with gr.Row():\n", "        button = gr.Button(\"Submit\", variant=\"primary\")\n", "        clear = gr.Button(\"Clear\")\n", "    output = gr.Textbox(label=\"Output\")\n", "\n", "    def repeat(name, count):\n", "        time.sleep(3)\n", "        return name * count\n", "    \n", "    button.click(repeat, [textbox, slider], output)\n", "\n", "if __name__ == \"__main__\":\n", "    demo.launch()"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}

demo/theme_extended_step_1/run.py

@@ -0,0 +1,19 @@
+import gradio as gr
+import time
+
+with gr.Blocks(theme=gr.themes.Default(primary_hue="red", secondary_hue="pink")) as demo:
+    textbox = gr.Textbox(label="Name")
+    slider = gr.Slider(label="Count", minimum=0, maximum=100, step=1)
+    with gr.Row():
+        button = gr.Button("Submit", variant="primary")
+        clear = gr.Button("Clear")
+    output = gr.Textbox(label="Output")
+
+    def repeat(name, count):
+        time.sleep(3)
+        return name * count
+
+    button.click(repeat, [textbox, slider], output)
+
+if __name__ == "__main__":
+    demo.launch()

demo/theme_extended_step_2/run.ipynb

@@ -0,0 +1 @@
+{"cells": [{"cell_type": "markdown", "id": 302934307671667531413257853548643485645, "metadata": {}, "source": ["# Gradio Demo: theme_extended_step_2"]}, {"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", "\n", "with gr.Blocks(theme=gr.themes.Default(spacing_size=\"sm\", radius_size=\"none\")) as demo:\n", "    textbox = gr.Textbox(label=\"Name\")\n", "    slider = gr.Slider(label=\"Count\", minimum=0, maximum=100, step=1)\n", "    with gr.Row():\n", "        button = gr.Button(\"Submit\", variant=\"primary\")\n", "        clear = gr.Button(\"Clear\")\n", "    output = gr.Textbox(label=\"Output\")\n", "\n", "    def repeat(name, count):\n", "        time.sleep(3)\n", "        return name * count\n", "    \n", "    button.click(repeat, [textbox, slider], output)\n", "\n", "if __name__ == \"__main__\":\n", "    demo.launch()"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}

demo/theme_extended_step_2/run.py

@@ -0,0 +1,19 @@
+import gradio as gr
+import time
+
+with gr.Blocks(theme=gr.themes.Default(spacing_size="sm", radius_size="none")) as demo:
+    textbox = gr.Textbox(label="Name")
+    slider = gr.Slider(label="Count", minimum=0, maximum=100, step=1)
+    with gr.Row():
+        button = gr.Button("Submit", variant="primary")
+        clear = gr.Button("Clear")
+    output = gr.Textbox(label="Output")
+
+    def repeat(name, count):
+        time.sleep(3)
+        return name * count
+
+    button.click(repeat, [textbox, slider], output)
+
+if __name__ == "__main__":
+    demo.launch()

demo/theme_extended_step_3/run.ipynb

@@ -0,0 +1 @@
+{"cells": [{"cell_type": "markdown", "id": 302934307671667531413257853548643485645, "metadata": {}, "source": ["# Gradio Demo: theme_extended_step_3"]}, {"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", "\n", "with gr.Blocks(\n", "    theme=gr.themes.Default(\n", "        font=[gr.themes.GoogleFont(\"Inconsolata\"), \"Arial\", \"sans-serif\"]\n", "    )\n", ") as demo:\n", "    textbox = gr.Textbox(label=\"Name\")\n", "    slider = gr.Slider(label=\"Count\", minimum=0, maximum=100, step=1)\n", "    with gr.Row():\n", "        button = gr.Button(\"Submit\", variant=\"primary\")\n", "        clear = gr.Button(\"Clear\")\n", "    output = gr.Textbox(label=\"Output\")\n", "\n", "    def repeat(name, count):\n", "        time.sleep(3)\n", "        return name * count\n", "\n", "    button.click(repeat, [textbox, slider], output)\n", "\n", "if __name__ == \"__main__\":\n", "    demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}

demo/theme_extended_step_3/run.py

@@ -0,0 +1,23 @@
+import gradio as gr
+import time
+
+with gr.Blocks(
+    theme=gr.themes.Default(
+        font=[gr.themes.GoogleFont("Inconsolata"), "Arial", "sans-serif"]
+    )
+) as demo:
+    textbox = gr.Textbox(label="Name")
+    slider = gr.Slider(label="Count", minimum=0, maximum=100, step=1)
+    with gr.Row():
+        button = gr.Button("Submit", variant="primary")
+        clear = gr.Button("Clear")
+    output = gr.Textbox(label="Output")
+
+    def repeat(name, count):
+        time.sleep(3)
+        return name * count
+
+    button.click(repeat, [textbox, slider], output)
+
+if __name__ == "__main__":
+    demo.launch()

demo/theme_extended_step_4/run.ipynb

@@ -0,0 +1 @@
+{"cells": [{"cell_type": "markdown", "id": 302934307671667531413257853548643485645, "metadata": {}, "source": ["# Gradio Demo: theme_extended_step_4"]}, {"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", "\n", "theme = gr.themes.Default(primary_hue=\"blue\").set(\n", "    loader_color=\"#FF0000\",\n", "    slider_color=\"#FF0000\",\n", ")\n", "\n", "with gr.Blocks(\n", "    theme=theme\n", ") as demo:\n", "    textbox = gr.Textbox(label=\"Name\")\n", "    slider = gr.Slider(label=\"Count\", minimum=0, maximum=100, step=1)\n", "    with gr.Row():\n", "        button = gr.Button(\"Submit\", variant=\"primary\")\n", "        clear = gr.Button(\"Clear\")\n", "    output = gr.Textbox(label=\"Output\")\n", "\n", "    def repeat(name, count):\n", "        time.sleep(3)\n", "        return name * count\n", "\n", "    button.click(repeat, [textbox, slider], output)\n", "\n", "if __name__ == \"__main__\":\n", "    demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}

demo/theme_extended_step_4/run.py

@@ -0,0 +1,26 @@
+import gradio as gr
+import time
+
+theme = gr.themes.Default(primary_hue="blue").set(
+    loader_color="#FF0000",
+    slider_color="#FF0000",
+)
+
+with gr.Blocks(
+    theme=theme
+) as demo:
+    textbox = gr.Textbox(label="Name")
+    slider = gr.Slider(label="Count", minimum=0, maximum=100, step=1)
+    with gr.Row():
+        button = gr.Button("Submit", variant="primary")
+        clear = gr.Button("Clear")
+    output = gr.Textbox(label="Output")
+
+    def repeat(name, count):
+        time.sleep(3)
+        return name * count
+
+    button.click(repeat, [textbox, slider], output)
+
+if __name__ == "__main__":
+    demo.launch()

demo/theme_glass/run.ipynb

@@ -0,0 +1 @@
+{"cells": [{"cell_type": "markdown", "id": 302934307671667531413257853548643485645, "metadata": {}, "source": ["# Gradio Demo: theme_glass"]}, {"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", "\n", "with gr.Blocks(theme=gr.themes.Glass()) as demo:\n", "    textbox = gr.Textbox(label=\"Name\")\n", "    slider = gr.Slider(label=\"Count\", minimum=0, maximum=100, step=1)\n", "    with gr.Row():\n", "        button = gr.Button(\"Submit\", variant=\"primary\")\n", "        clear = gr.Button(\"Clear\")\n", "    output = gr.Textbox(label=\"Output\")\n", "\n", "    def repeat(name, count):\n", "        time.sleep(3)\n", "        return name * count\n", "    \n", "    button.click(repeat, [textbox, slider], output)\n", "\n", "if __name__ == \"__main__\":\n", "    demo.launch()"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}

demo/theme_glass/run.py

@@ -0,0 +1,19 @@
+import gradio as gr
+import time
+
+with gr.Blocks(theme=gr.themes.Glass()) as demo:
+    textbox = gr.Textbox(label="Name")
+    slider = gr.Slider(label="Count", minimum=0, maximum=100, step=1)
+    with gr.Row():
+        button = gr.Button("Submit", variant="primary")
+        clear = gr.Button("Clear")
+    output = gr.Textbox(label="Output")
+
+    def repeat(name, count):
+        time.sleep(3)
+        return name * count
+
+    button.click(repeat, [textbox, slider], output)
+
+if __name__ == "__main__":
+    demo.launch()

demo/theme_new_step_1/run.ipynb

@@ -0,0 +1 @@
+{"cells": [{"cell_type": "markdown", "id": 302934307671667531413257853548643485645, "metadata": {}, "source": ["# Gradio Demo: theme_new_step_1"]}, {"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", "from gradio.themes.base import Base\n", "import time\n", "\n", "class Seafoam(Base):\n", "    pass\n", "\n", "seafoam = Seafoam()\n", "\n", "with gr.Blocks(theme=seafoam) as demo:\n", "    textbox = gr.Textbox(label=\"Name\")\n", "    slider = gr.Slider(label=\"Count\", minimum=0, maximum=100, step=1)\n", "    with gr.Row():\n", "        button = gr.Button(\"Submit\", variant=\"primary\")\n", "        clear = gr.Button(\"Clear\")\n", "    output = gr.Textbox(label=\"Output\")\n", "\n", "    def repeat(name, count):\n", "        time.sleep(3)\n", "        return name * count\n", "    \n", "    button.click(repeat, [textbox, slider], output)\n", "\n", "if __name__ == \"__main__\":\n", "    demo.launch()"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}

demo/theme_new_step_1/run.py

@@ -0,0 +1,25 @@
+import gradio as gr
+from gradio.themes.base import Base
+import time
+
+class Seafoam(Base):
+    pass
+
+seafoam = Seafoam()
+
+with gr.Blocks(theme=seafoam) as demo:
+    textbox = gr.Textbox(label="Name")
+    slider = gr.Slider(label="Count", minimum=0, maximum=100, step=1)
+    with gr.Row():
+        button = gr.Button("Submit", variant="primary")
+        clear = gr.Button("Clear")
+    output = gr.Textbox(label="Output")
+
+    def repeat(name, count):
+        time.sleep(3)
+        return name * count
+
+    button.click(repeat, [textbox, slider], output)
+
+if __name__ == "__main__":
+    demo.launch()

demo/theme_new_step_2/run.ipynb

@@ -0,0 +1 @@
+{"cells": [{"cell_type": "markdown", "id": 302934307671667531413257853548643485645, "metadata": {}, "source": ["# Gradio Demo: theme_new_step_2"]}, {"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 __future__ import annotations\n", "from typing import Iterable\n", "import gradio as gr\n", "from gradio.themes.base import Base\n", "from gradio.themes.utils import colors, fonts, sizes\n", "import time\n", "\n", "\n", "class Seafoam(Base):\n", "    def __init__(\n", "        self,\n", "        *,\n", "        primary_hue: colors.Color | str = colors.emerald,\n", "        secondary_hue: colors.Color | str = colors.blue,\n", "        neutral_hue: colors.Color | str = colors.gray,\n", "        spacing_size: sizes.Size | str = sizes.spacing_md,\n", "        radius_size: sizes.Size | str = sizes.radius_md,\n", "        text_size: sizes.Size | str = sizes.text_lg,\n", "        font: fonts.Font\n", "        | str\n", "        | Iterable[fonts.Font | str] = (\n", "            fonts.GoogleFont(\"Quicksand\"),\n", "            \"ui-sans-serif\",\n", "            \"sans-serif\",\n", "        ),\n", "        font_mono: fonts.Font\n", "        | str\n", "        | Iterable[fonts.Font | str] = (\n", "            fonts.GoogleFont(\"IBM Plex Mono\"),\n", "            \"ui-monospace\",\n", "            \"monospace\",\n", "        ),\n", "    ):\n", "        super().__init__(\n", "            primary_hue=primary_hue,\n", "            secondary_hue=secondary_hue,\n", "            neutral_hue=neutral_hue,\n", "            spacing_size=spacing_size,\n", "            radius_size=radius_size,\n", "            text_size=text_size,\n", "            font=font,\n", "            font_mono=font_mono,\n", "        )\n", "\n", "\n", "seafoam = Seafoam()\n", "\n", "with gr.Blocks(theme=seafoam) as demo:\n", "    textbox = gr.Textbox(label=\"Name\")\n", "    slider = gr.Slider(label=\"Count\", minimum=0, maximum=100, step=1)\n", "    with gr.Row():\n", "        button = gr.Button(\"Submit\", variant=\"primary\")\n", "        clear = gr.Button(\"Clear\")\n", "    output = gr.Textbox(label=\"Output\")\n", "\n", "    def repeat(name, count):\n", "        time.sleep(3)\n", "        return name * count\n", "\n", "    button.click(repeat, [textbox, slider], output)\n", "\n", "if __name__ == \"__main__\":\n", "    demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}

demo/theme_new_step_2/run.py

@@ -0,0 +1,63 @@
+from __future__ import annotations
+from typing import Iterable
+import gradio as gr
+from gradio.themes.base import Base
+from gradio.themes.utils import colors, fonts, sizes
+import time
+
+
+class Seafoam(Base):
+    def __init__(
+        self,
+        *,
+        primary_hue: colors.Color | str = colors.emerald,
+        secondary_hue: colors.Color | str = colors.blue,
+        neutral_hue: colors.Color | str = colors.gray,
+        spacing_size: sizes.Size | str = sizes.spacing_md,
+        radius_size: sizes.Size | str = sizes.radius_md,
+        text_size: sizes.Size | str = sizes.text_lg,
+        font: fonts.Font
+        | str
+        | Iterable[fonts.Font | str] = (
+            fonts.GoogleFont("Quicksand"),
+            "ui-sans-serif",
+            "sans-serif",
+        ),
+        font_mono: fonts.Font
+        | str
+        | Iterable[fonts.Font | str] = (
+            fonts.GoogleFont("IBM Plex Mono"),
+            "ui-monospace",
+            "monospace",
+        ),
+    ):
+        super().__init__(
+            primary_hue=primary_hue,
+            secondary_hue=secondary_hue,
+            neutral_hue=neutral_hue,
+            spacing_size=spacing_size,
+            radius_size=radius_size,
+            text_size=text_size,
+            font=font,
+            font_mono=font_mono,
+        )
+
+
+seafoam = Seafoam()
+
+with gr.Blocks(theme=seafoam) as demo:
+    textbox = gr.Textbox(label="Name")
+    slider = gr.Slider(label="Count", minimum=0, maximum=100, step=1)
+    with gr.Row():
+        button = gr.Button("Submit", variant="primary")
+        clear = gr.Button("Clear")
+    output = gr.Textbox(label="Output")
+
+    def repeat(name, count):
+        time.sleep(3)
+        return name * count
+
+    button.click(repeat, [textbox, slider], output)
+
+if __name__ == "__main__":
+    demo.launch()