mirror/gradio
2
0
Fork 0
mirror of https://github.com/gradio-app/gradio.git synced 2024-11-27 01:40:20 +08:00
Code Issues Packages Projects Releases Wiki Activity

Use soft theme instead of glass theme in demo (#3503)

Browse Source 
* changes

* changes

* changes

* changes

* changes

* Update gradio/themes/base.py

Co-authored-by: Abubakar Abid <abubakar@huggingface.co>

* Update gradio/themes/base.py

Co-authored-by: Abubakar Abid <abubakar@huggingface.co>

* Update guides/03_building-with-blocks/06_theming-guide

Co-authored-by: Abubakar Abid <abubakar@huggingface.co>

* Update guides/03_building-with-blocks/06_theming-guide

Co-authored-by: Abubakar Abid <abubakar@huggingface.co>

* Update guides/03_building-with-blocks/06_theming-guide

Co-authored-by: Abubakar Abid <abubakar@huggingface.co>

* Update guides/03_building-with-blocks/06_theming-guide

Co-authored-by: Abubakar Abid <abubakar@huggingface.co>

* Update guides/03_building-with-blocks/06_theming-guide

Co-authored-by: Abubakar Abid <abubakar@huggingface.co>

* Update guides/03_building-with-blocks/06_theming-guide

Co-authored-by: Abubakar Abid <abubakar@huggingface.co>

* Update guides/03_building-with-blocks/06_theming-guide

Co-authored-by: Abubakar Abid <abubakar@huggingface.co>

* Update guides/03_building-with-blocks/06_theming-guide

Co-authored-by: Abubakar Abid <abubakar@huggingface.co>

* Update guides/03_building-with-blocks/06_theming-guide

Co-authored-by: Abubakar Abid <abubakar@huggingface.co>

* Update guides/03_building-with-blocks/06_theming-guide

Co-authored-by: Abubakar Abid <abubakar@huggingface.co>

* Update guides/03_building-with-blocks/06_theming-guide

Co-authored-by: Abubakar Abid <abubakar@huggingface.co>

* changes

* changes

* changes

* changes

* changes

* undo merge break

* changes

* changes

* changes

* fix

* theme_to_soft

* changes

* formatting

---------

Co-authored-by: Abubakar Abid <abubakar@huggingface.co>
This commit is contained in:
aliabid94 2023-03-18 13:07:23 -07:00 committed by GitHub
parent 52253b8bb1
commit 8114202697
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 17 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
demo/theme_glass/run.ipynb
View File

@ -1 +0,0 @@
{"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}

1
demo/theme_soft/run.ipynb Normal file
View File

@ -0,0 +1 @@
{"cells": [{"cell_type": "markdown", "id": 302934307671667531413257853548643485645, "metadata": {}, "source": ["# Gradio Demo: theme_soft"]}, {"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.Soft()) 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}

2
demo/theme_glass/run.py → demo/theme_soft/run.py
View File

@ -1,7 +1,7 @@
import gradio as gr
import time
with gr.Blocks(theme=gr.themes.Glass()) as demo:
with gr.Blocks(theme=gr.themes.Soft()) as demo:
textbox = gr.Textbox(label="Name")
slider = gr.Slider(label="Count", minimum=0, maximum=100, step=1)
with gr.Row():

2
gradio/themes/base.py
View File

@ -1217,7 +1217,7 @@ class Base(ThemeClass):
self, "input_border_width", "0px"
)
self.input_border_width_dark = input_border_width_dark or getattr(
self, "input_border_width_dark", "0px"
self, "input_border_width_dark", None
)
self.input_padding = input_padding or getattr(
self, "input_padding", "*spacing_xl"

7
gradio/themes/glass.py
View File

@ -19,9 +19,10 @@ class Glass(Base):
font: fonts.Font
| str
| Iterable[fonts.Font | str] = (
"Verdana",
"ui-sans-serif",
"system-ui",
"Optima",
"Candara",
"Noto Sans",
"source-sans-pro",
"sans-serif",
),
font_mono: fonts.Font

8
guides/06_other-tutorials/theming-guide.md
View File

@ -6,10 +6,10 @@ Tags: THEMES
Gradio features a built-in theming engine that lets you customize the look and feel of your app. You can choose from a variety of themes, or create your own. To do so, pass the `theme=` kwarg to the `Blocks` or `Interface` constructor. For example:
```python
with gr.Blocks(theme=gr.themes.Glass()):
with gr.Blocks(theme=gr.themes.Soft()):
...
```
$demo_theme_glass
$demo_theme_soft
Gradio comes with a set of prebuilt themes which you can load from `gr.themes.*`. Each of these themes set values for hundreds of CSS variables.
@ -200,7 +200,9 @@ We'll use `gr.themes.Emerald` as our primary color, and set secondary and neutra
$code_theme_new_step_2
$demo_theme_new_step_2
See how the primary button and the loading animation are now green? These CSS variables are tied to the `primary_hue` variable. Let's modify the theme a bit more directly. We'll call the `set()` method to overwrite CSS variable values explicitly. We can use any CSS logic, and reference our core constructor arguments using the `*` prefix.
See how the primary button and the loading animation are now green? These CSS variables are tied to the `primary_hue` variable.
Let's modify the theme a bit more directly. We'll call the `set()` method to overwrite CSS variable values explicitly. We can use any CSS logic, and reference our core constructor arguments using the `*` prefix.
$code_theme_new_step_3
$demo_theme_new_step_3

4
test/test_blocks.py
View File

@ -884,7 +884,7 @@ class TestSpecificUpdate:
"interactive": False,
"visible": None,
"value": gr.components._Keywords.NO_VALUE,
"__type__": "update"
"__type__": "update",
}
specific_update = gr.Textbox.get_specific_update(
@ -900,7 +900,7 @@ class TestSpecificUpdate:
"interactive": True,
"visible": None,
"value": gr.components._Keywords.NO_VALUE,
"__type__": "update"
"__type__": "update",
}
def test_with_generic_update(self):

2
ui/packages/form/src/Checkbox.svelte
View File

@ -57,7 +57,6 @@
box-shadow: var(--input-shadow);
border: 1px solid var(--checkbox-border-color);
border-radius: var(--checkbox-border-radius);
background-image: var(--checkbox-check);
background-color: var(--checkbox-background-color);
line-height: var(--line-sm);
}
@ -66,6 +65,7 @@
input:checked:hover,
input:checked:focus {
border-color: var(--checkbox-border-color-selected);
background-image: var(--checkbox-check);
background-color: var(--checkbox-background-color-selected);
}

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

@ -101,7 +101,6 @@
box-shadow: var(--checkbox-shadow);
border: var(--checkbox-border-width) solid var(--checkbox-border-color);
border-radius: var(--checkbox-border-radius);
background-image: var(--checkbox-check);
background-color: var(--checkbox-background-color);
line-height: var(--line-sm);
}
@ -110,6 +109,7 @@
input:checked:hover,
input:checked:focus {
border-color: var(--checkbox-border-color-selected);
background-image: var(--checkbox-check);
background-color: var(--checkbox-background-color-selected);
}

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

@ -89,7 +89,6 @@
box-shadow: var(--checkbox-shadow);
border: var(--checkbox-border-width) solid var(--checkbox-border-color);
border-radius: var(--radius-full);
background-image: var(--radio-circle);
background-color: var(--checkbox-background-color);
line-height: var(--line-sm);
}
@ -98,6 +97,7 @@
input:checked:hover,
input:checked:focus {
border-color: var(--checkbox-border-color-selected);
background-image: var(--radio-circle);
background-color: var(--checkbox-background-color-selected);
}