NeoPy commited on
Commit
9bc40ae
·
verified ·
1 Parent(s): 8fb4365

Update app.py

Browse files
Files changed (1) hide show
  1. app.py +241 -59
app.py CHANGED
@@ -1,11 +1,14 @@
1
- #from future import annotations
 
2
  from typing import Iterable
3
  import gradio as gr
4
- #gr.themes.builder()
 
5
  from gradio.themes.base import Base
6
  from gradio.themes.utils import colors, fonts, sizes
7
 
8
- class Modern(Base):
 
9
  def __init__(
10
  self,
11
  *,
@@ -16,15 +19,14 @@ class Modern(Base):
16
  radius_size: sizes.Size | str = sizes.radius_md,
17
  text_size: sizes.Size | str = sizes.text_lg,
18
  font: fonts.Font | str | Iterable[fonts.Font | str] = (
 
 
19
  "ui-sans-serif",
20
  "system-ui",
21
- "Segoe UI",
22
- "Roboto",
23
  ),
24
  font_mono: fonts.Font | str | Iterable[fonts.Font | str] = (
25
  "ui-monospace",
26
- "SFMono-Regular",
27
- "Consolas",
28
  ),
29
  ):
30
  super().__init__(
@@ -37,64 +39,244 @@ class Modern(Base):
37
  font=font,
38
  font_mono=font_mono,
39
  )
40
- self.name = ("Modern",)
 
 
 
 
 
 
 
 
 
 
 
41
 
42
- def set(self):
43
  super().set(
44
- # Base styles
45
- background_fill_primary="#0F0F0F",
46
- background_fill_primary_dark="#0F0F0F",
47
- background_fill_secondary="#0F0F0F",
48
- background_fill_secondary_dark="#0F0F0F",
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
49
  body_text_color="white",
50
  body_text_color_dark="white",
51
- body_text_color_subdued="#999",
52
- body_text_color_subdued_dark="#999",
53
- border_color_primary="#333",
54
- border_color_primary_dark="#333",
55
-
56
- # Blocks
57
- block_radius="0 0 0 0",
58
- block_border_width="1px",
59
- block_border_color="#333",
60
- block_background_fill="#151515",
61
- block_padding="*spacing_lg",
62
- block_margin="*spacing_md 0",
63
-
64
- # Buttons
65
- button_primary_background_fill="#111",
66
- button_primary_background_fill_hover="#222",
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
67
  button_primary_text_color="white",
 
 
 
68
  button_secondary_background_fill="transparent",
69
- button_secondary_border_color="#666",
70
- button_secondary_text_color="#fff",
71
- button_secondary_border_width="1px",
72
- button_radius="6px",
73
- button_transition="0.2s",
74
-
75
- # Inputs
76
- input_background_fill="#181818",
77
- input_border_color="#444",
78
- input_text_color="white",
79
- input_padding="*spacing_md",
80
- input_radius="6px",
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
81
  input_border_width="1px",
82
-
83
- # Textarea
84
- textarea_background_fill="#181818",
85
- textarea_border_color="#444",
86
- textarea_text_color="white",
87
- textarea_padding="*spacing_md",
88
- textarea_radius="6px",
89
- textarea_border_width="1px",
90
-
91
- # Layout
92
- layout_gap="*spacing_lg",
93
- block_label_padding="*spacing_sm *spacing_lg",
94
- block_label_radius="6px",
95
- block_label_border_width="1px",
96
- block_label_border_color="#333",
97
- block_label_background_fill="#151515",
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
98
  )
99
 
100
 
@@ -109,7 +291,7 @@ demo = gr.Interface(
109
  fn=your_function,
110
  inputs=gr.Textbox(),
111
  outputs=gr.Textbox(),
112
- theme=Modern(),
113
  title="Test App",
114
  )
115
 
 
1
+ from __future__ import annotations
2
+
3
  from typing import Iterable
4
  import gradio as gr
5
+
6
+ # gr.themes.builder()
7
  from gradio.themes.base import Base
8
  from gradio.themes.utils import colors, fonts, sizes
9
 
10
+
11
+ class Applio(Base):
12
  def __init__(
13
  self,
14
  *,
 
19
  radius_size: sizes.Size | str = sizes.radius_md,
20
  text_size: sizes.Size | str = sizes.text_lg,
21
  font: fonts.Font | str | Iterable[fonts.Font | str] = (
22
+ "Syne V",
23
+ fonts.GoogleFont("Syne"),
24
  "ui-sans-serif",
25
  "system-ui",
 
 
26
  ),
27
  font_mono: fonts.Font | str | Iterable[fonts.Font | str] = (
28
  "ui-monospace",
29
+ fonts.GoogleFont("Nunito Sans"),
 
30
  ),
31
  ):
32
  super().__init__(
 
39
  font=font,
40
  font_mono=font_mono,
41
  )
42
+ self.name = ("Applio",)
43
+ self.secondary_100 = ("#dbeafe",)
44
+ self.secondary_200 = ("#bfdbfe",)
45
+ self.secondary_300 = ("#93c5fd",)
46
+ self.secondary_400 = ("#60a5fa",)
47
+ self.secondary_50 = ("#eff6ff",)
48
+ self.secondary_500 = ("#3b82f6",)
49
+ self.secondary_600 = ("#2563eb",)
50
+ self.secondary_700 = ("#1d4ed8",)
51
+ self.secondary_800 = ("#1e40af",)
52
+ self.secondary_900 = ("#1e3a8a",)
53
+ self.secondary_950 = ("#1d3660",)
54
 
 
55
  super().set(
56
+ # Blaise
57
+ background_fill_primary="#000000",
58
+ background_fill_primary_dark="#110F0F",
59
+ background_fill_secondary="#110F0F",
60
+ background_fill_secondary_dark="#110F0F",
61
+ block_background_fill="*neutral_800",
62
+ block_background_fill_dark="*neutral_800",
63
+ block_border_color="*border_color_primary",
64
+ block_border_color_dark="*border_color_primary",
65
+ block_border_width="1px",
66
+ block_border_width_dark="1px",
67
+ block_info_text_color="*body_text_color_subdued",
68
+ block_info_text_color_dark="*body_text_color_subdued",
69
+ block_info_text_size="*text_sm",
70
+ block_info_text_weight="400",
71
+ block_label_background_fill="*background_fill_primary",
72
+ block_label_background_fill_dark="*background_fill_secondary",
73
+ block_label_border_color="*border_color_primary",
74
+ block_label_border_color_dark="*border_color_primary",
75
+ block_label_border_width="1px",
76
+ block_label_border_width_dark="1px",
77
+ block_label_margin="0",
78
+ block_label_padding="*spacing_sm *spacing_lg",
79
+ block_label_radius="calc(*radius_lg - 1px) 0 calc(*radius_lg - 1px) 0",
80
+ block_label_right_radius="0 calc(*radius_lg - 1px) 0 calc(*radius_lg - 1px)",
81
+ block_label_shadow="*block_shadow",
82
+ block_label_text_color="*#110F0F",
83
+ block_label_text_color_dark="*#110F0F",
84
+ block_label_text_weight="400",
85
+ block_padding="*spacing_xl",
86
+ block_radius="*radius_md",
87
+ block_shadow="none",
88
+ block_shadow_dark="none",
89
+ block_title_background_fill="rgb(255,255,255)",
90
+ block_title_background_fill_dark="rgb(255,255,255)",
91
+ block_title_border_color="none",
92
+ block_title_border_color_dark="none",
93
+ block_title_border_width="0px",
94
+ block_title_padding="*block_label_padding",
95
+ block_title_radius="*block_label_radius",
96
+ block_title_text_color="#110F0F",
97
+ block_title_text_color_dark="#110F0F",
98
+ block_title_text_size="*text_md",
99
+ block_title_text_weight="600",
100
+ body_background_fill="#110F0F",
101
+ body_background_fill_dark="#110F0F",
102
  body_text_color="white",
103
  body_text_color_dark="white",
104
+ body_text_color_subdued="*neutral_400",
105
+ body_text_color_subdued_dark="*neutral_400",
106
+ body_text_size="*text_md",
107
+ body_text_weight="400",
108
+ border_color_accent="*neutral_600",
109
+ border_color_accent_dark="*neutral_600",
110
+ border_color_primary="*neutral_800",
111
+ border_color_primary_dark="*neutral_800",
112
+ button_border_width="*input_border_width",
113
+ button_border_width_dark="*input_border_width",
114
+ button_cancel_background_fill="*button_secondary_background_fill",
115
+ button_cancel_background_fill_dark="*button_secondary_background_fill",
116
+ button_cancel_background_fill_hover="*button_cancel_background_fill",
117
+ button_cancel_background_fill_hover_dark="*button_cancel_background_fill",
118
+ button_cancel_border_color="*button_secondary_border_color",
119
+ button_cancel_border_color_dark="*button_secondary_border_color",
120
+ button_cancel_border_color_hover="*button_cancel_border_color",
121
+ button_cancel_border_color_hover_dark="*button_cancel_border_color",
122
+ button_cancel_text_color="#110F0F",
123
+ button_cancel_text_color_dark="#110F0F",
124
+ button_cancel_text_color_hover="#110F0F",
125
+ button_cancel_text_color_hover_dark="#110F0F",
126
+ button_large_padding="*spacing_lg calc(2 * *spacing_lg)",
127
+ button_large_radius="*radius_lg",
128
+ button_large_text_size="*text_lg",
129
+ button_large_text_weight="600",
130
+ button_primary_background_fill="*primary_600",
131
+ button_primary_background_fill_dark="*primary_600",
132
+ button_primary_background_fill_hover="*primary_500",
133
+ button_primary_background_fill_hover_dark="*primary_500",
134
+ button_primary_border_color="*primary_500",
135
+ button_primary_border_color_dark="*primary_500",
136
+ button_primary_border_color_hover="*primary_400",
137
+ button_primary_border_color_hover_dark="*primary_400",
138
  button_primary_text_color="white",
139
+ button_primary_text_color_dark="white",
140
+ button_primary_text_color_hover="#110F0F",
141
+ button_primary_text_color_hover_dark="#110F0F",
142
  button_secondary_background_fill="transparent",
143
+ button_secondary_background_fill_dark="transparent",
144
+ button_secondary_background_fill_hover="*neutral_800",
145
+ button_secondary_background_fill_hover_dark="*neutral_800",
146
+ button_secondary_border_color="*neutral_700",
147
+ button_secondary_border_color_dark="*neutral_700",
148
+ button_secondary_border_color_hover="*neutral_600",
149
+ button_secondary_border_color_hover_dark="*neutral_600",
150
+ button_secondary_text_color="white",
151
+ button_secondary_text_color_dark="white",
152
+ button_secondary_text_color_hover="*button_secondary_text_color",
153
+ button_secondary_text_color_hover_dark="*button_secondary_text_color",
154
+ button_small_padding="*spacing_sm calc(2 * *spacing_sm)",
155
+ button_small_radius="*radius_lg",
156
+ button_small_text_size="*text_md",
157
+ button_small_text_weight="400",
158
+ button_transition="0.3s ease all",
159
+ checkbox_background_color="*neutral_700",
160
+ checkbox_background_color_dark="*neutral_700",
161
+ checkbox_background_color_focus="*checkbox_background_color",
162
+ checkbox_background_color_focus_dark="*checkbox_background_color",
163
+ checkbox_background_color_hover="*checkbox_background_color",
164
+ checkbox_background_color_hover_dark="*checkbox_background_color",
165
+ checkbox_background_color_selected="*secondary_600",
166
+ checkbox_background_color_selected_dark="*secondary_600",
167
+ checkbox_border_color="*neutral_700",
168
+ checkbox_border_color_dark="*neutral_700",
169
+ checkbox_border_color_focus="*secondary_500",
170
+ checkbox_border_color_focus_dark="*secondary_500",
171
+ checkbox_border_color_hover="*neutral_600",
172
+ checkbox_border_color_hover_dark="*neutral_600",
173
+ checkbox_border_color_selected="*secondary_600",
174
+ checkbox_border_color_selected_dark="*secondary_600",
175
+ checkbox_border_radius="*radius_sm",
176
+ checkbox_border_width="*input_border_width",
177
+ checkbox_border_width_dark="*input_border_width",
178
+ checkbox_check="url(\"data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e\")",
179
+ checkbox_label_background_fill="transparent",
180
+ checkbox_label_background_fill_dark="transparent",
181
+ checkbox_label_background_fill_hover="transparent",
182
+ checkbox_label_background_fill_hover_dark="transparent",
183
+ checkbox_label_background_fill_selected="transparent",
184
+ checkbox_label_background_fill_selected_dark="transparent",
185
+ checkbox_label_border_color="transparent",
186
+ checkbox_label_border_color_dark="transparent",
187
+ checkbox_label_border_color_hover="transparent",
188
+ checkbox_label_border_color_hover_dark="transparent",
189
+ checkbox_label_border_width="transparent",
190
+ checkbox_label_border_width_dark="transparent",
191
+ checkbox_label_gap="*spacing_lg",
192
+ checkbox_label_padding="*spacing_md calc(2 * *spacing_md)",
193
+ checkbox_label_shadow="none",
194
+ checkbox_label_text_color="*body_text_color",
195
+ checkbox_label_text_color_dark="*body_text_color",
196
+ checkbox_label_text_color_selected="*checkbox_label_text_color",
197
+ checkbox_label_text_color_selected_dark="*checkbox_label_text_color",
198
+ checkbox_label_text_size="*text_md",
199
+ checkbox_label_text_weight="400",
200
+ checkbox_shadow="*input_shadow",
201
+ color_accent="*primary_500",
202
+ color_accent_soft="*primary_50",
203
+ color_accent_soft_dark="*neutral_700",
204
+ container_radius="*radius_xl",
205
+ embed_radius="*radius_lg",
206
+ error_background_fill="*background_fill_primary",
207
+ error_background_fill_dark="*background_fill_primary",
208
+ error_border_color="*border_color_primary",
209
+ error_border_color_dark="*border_color_primary",
210
+ error_border_width="1px",
211
+ error_border_width_dark="1px",
212
+ error_text_color="#ef4444",
213
+ error_text_color_dark="#ef4444",
214
+ form_gap_width="0px",
215
+ input_background_fill="*neutral_900",
216
+ input_background_fill_dark="*neutral_900",
217
+ input_background_fill_focus="*secondary_600",
218
+ input_background_fill_focus_dark="*secondary_600",
219
+ input_background_fill_hover="*input_background_fill",
220
+ input_background_fill_hover_dark="*input_background_fill",
221
+ input_border_color="*neutral_700",
222
+ input_border_color_dark="*neutral_700",
223
+ input_border_color_focus="*secondary_600",
224
+ input_border_color_focus_dark="*primary_600",
225
+ input_border_color_hover="*input_border_color",
226
+ input_border_color_hover_dark="*input_border_color",
227
  input_border_width="1px",
228
+ input_border_width_dark="1px",
229
+ input_padding="*spacing_xl",
230
+ input_placeholder_color="*neutral_500",
231
+ input_placeholder_color_dark="*neutral_500",
232
+ input_radius="*radius_lg",
233
+ input_shadow="none",
234
+ input_shadow_dark="none",
235
+ input_shadow_focus="*input_shadow",
236
+ input_shadow_focus_dark="*input_shadow",
237
+ input_text_size="*text_md",
238
+ input_text_weight="400",
239
+ layout_gap="*spacing_xxl",
240
+ link_text_color="*secondary_500",
241
+ link_text_color_active="*secondary_500",
242
+ link_text_color_active_dark="*secondary_500",
243
+ link_text_color_dark="*secondary_500",
244
+ link_text_color_hover="*secondary_400",
245
+ link_text_color_hover_dark="*secondary_400",
246
+ link_text_color_visited="*secondary_600",
247
+ link_text_color_visited_dark="*secondary_600",
248
+ loader_color="*color_accent",
249
+ loader_color_dark="*color_accent",
250
+ panel_background_fill="*background_fill_secondary",
251
+ panel_background_fill_dark="*background_fill_secondary",
252
+ panel_border_color="*border_color_primary",
253
+ panel_border_color_dark="*border_color_primary",
254
+ panel_border_width="1px",
255
+ panel_border_width_dark="1px",
256
+ prose_header_text_weight="600",
257
+ prose_text_size="*text_md",
258
+ prose_text_weight="400",
259
+ radio_circle="url(\"data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e\")",
260
+ section_header_text_size="*text_md",
261
+ section_header_text_weight="400",
262
+ shadow_drop="rgba(0,0,0,0.05) 0px 1px 2px 0px",
263
+ shadow_drop_lg="0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)",
264
+ shadow_inset="rgba(0,0,0,0.05) 0px 2px 4px 0px inset",
265
+ shadow_spread="3px",
266
+ shadow_spread_dark="1px",
267
+ slider_color="#9E9E9E",
268
+ slider_color_dark="#9E9E9E",
269
+ stat_background_fill="*primary_500",
270
+ stat_background_fill_dark="*primary_500",
271
+ table_border_color="*neutral_700",
272
+ table_border_color_dark="*neutral_700",
273
+ table_even_background_fill="*neutral_950",
274
+ table_even_background_fill_dark="*neutral_950",
275
+ table_odd_background_fill="*neutral_900",
276
+ table_odd_background_fill_dark="*neutral_900",
277
+ table_radius="*radius_lg",
278
+ table_row_focus="*color_accent_soft",
279
+ table_row_focus_dark="*color_accent_soft",
280
  )
281
 
282
 
 
291
  fn=your_function,
292
  inputs=gr.Textbox(),
293
  outputs=gr.Textbox(),
294
+ theme=Applio(),
295
  title="Test App",
296
  )
297