Update app.py
Browse files
app.py
CHANGED
@@ -3,6 +3,7 @@ from typing import Iterable
|
|
3 |
import gradio as gr
|
4 |
from gradio.themes.base import Base
|
5 |
from gradio.themes.utils import colors, fonts, sizes
|
|
|
6 |
|
7 |
class Neopy(Base):
|
8 |
def __init__(
|
@@ -35,30 +36,30 @@ class Neopy(Base):
|
|
35 |
font=font,
|
36 |
font_mono=font_mono,
|
37 |
)
|
38 |
-
self.name =
|
39 |
# Secondary palette (red, used for errors/warnings)
|
40 |
-
self.secondary_100 =
|
41 |
-
self.secondary_200 =
|
42 |
-
self.secondary_300 =
|
43 |
-
self.secondary_400 =
|
44 |
-
self.secondary_50 =
|
45 |
-
self.secondary_500 =
|
46 |
-
self.secondary_600 =
|
47 |
-
self.secondary_700 =
|
48 |
-
self.secondary_800 =
|
49 |
-
self.secondary_900 =
|
50 |
-
self.secondary_950 =
|
51 |
-
#
|
52 |
-
self.primary_50 =
|
53 |
-
self.primary_100 =
|
54 |
-
self.primary_200 =
|
55 |
-
self.primary_300 =
|
56 |
-
self.primary_400 =
|
57 |
-
self.primary_500 =
|
58 |
-
self.primary_600 =
|
59 |
-
self.primary_700 =
|
60 |
-
self.primary_800 =
|
61 |
-
self.primary_900 =
|
62 |
|
63 |
super().set(
|
64 |
# Backgrounds
|
@@ -82,27 +83,27 @@ class Neopy(Base):
|
|
82 |
block_label_radius="calc(*radius_lg - 1px) 0 calc(*radius_lg - 1px) 0",
|
83 |
block_label_right_radius="0 calc(*radius_lg - 1px) 0 calc(*radius_lg - 1px)",
|
84 |
block_label_shadow="*block_shadow",
|
85 |
-
block_label_text_color="*body_text_color",
|
86 |
block_label_text_color_dark="*body_text_color",
|
87 |
block_label_text_weight="400",
|
88 |
block_padding="*spacing_xl",
|
89 |
block_radius="*radius_md",
|
90 |
-
block_shadow="
|
91 |
block_title_background_fill="rgb(255,255,255)",
|
92 |
block_title_border_color="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_size="*
|
98 |
block_title_text_weight="600",
|
99 |
body_background_fill="#110F0F",
|
100 |
body_text_color="white",
|
101 |
body_text_color_subdued="#cecece",
|
102 |
body_text_size="*text_md",
|
103 |
body_text_weight="400",
|
104 |
-
border_color_accent="
|
105 |
-
border_color_primary="
|
106 |
# Buttons
|
107 |
button_border_width="*input_border_width",
|
108 |
button_cancel_background_fill="*button_secondary_background_fill",
|
@@ -112,14 +113,14 @@ class Neopy(Base):
|
|
112 |
button_large_radius="*radius_lg",
|
113 |
button_large_text_size="*text_lg",
|
114 |
button_large_text_weight="600",
|
115 |
-
button_primary_background_fill="*
|
116 |
-
button_primary_background_fill_hover="*
|
117 |
-
button_primary_border_color="*primary_500",
|
118 |
button_primary_border_color_hover="*primary_400",
|
119 |
button_primary_text_color="white",
|
120 |
-
button_primary_text_color_hover="white",
|
121 |
-
button_secondary_background_fill="
|
122 |
-
button_secondary_background_fill_hover="*
|
123 |
button_secondary_border_color="*neutral_700",
|
124 |
button_secondary_text_color="white",
|
125 |
button_small_padding="*spacing_sm calc(2 * *spacing_sm)",
|
@@ -129,7 +130,7 @@ class Neopy(Base):
|
|
129 |
button_transition="0.3s ease all",
|
130 |
# Checkboxes
|
131 |
checkbox_background_color="*neutral_700",
|
132 |
-
checkbox_background_color_selected="*primary_500", #
|
133 |
checkbox_border_color="*neutral_700",
|
134 |
checkbox_border_color_focus="*primary_500",
|
135 |
checkbox_border_color_selected="*primary_500",
|
@@ -154,24 +155,24 @@ class Neopy(Base):
|
|
154 |
error_background_fill="*background_fill_primary",
|
155 |
error_border_color="*border_color_primary",
|
156 |
error_border_width="1px",
|
157 |
-
error_text_color="*secondary_700",
|
158 |
error_text_color_dark="*secondary_600",
|
159 |
form_gap_width="0px",
|
160 |
# Inputs
|
161 |
input_background_fill="*neutral_900",
|
162 |
-
input_background_fill_focus="*primary_50",
|
163 |
input_border_color="*neutral_700",
|
164 |
-
input_border_color_focus="*primary_500",
|
165 |
input_border_width="1px",
|
166 |
input_padding="*spacing_xl",
|
167 |
input_placeholder_color="*neutral_500",
|
168 |
input_radius="*radius_lg",
|
169 |
-
input_shadow="
|
170 |
input_text_size="*text_md",
|
171 |
input_text_weight="400",
|
172 |
layout_gap="*spacing_xxl",
|
173 |
# Links
|
174 |
-
link_text_color="*primary_500",
|
175 |
link_text_color_active="*primary_500",
|
176 |
link_text_color_hover="*primary_400",
|
177 |
link_text_color_visited="*primary_600",
|
@@ -182,18 +183,18 @@ class Neopy(Base):
|
|
182 |
prose_header_text_weight="600",
|
183 |
prose_text_size="*text_md",
|
184 |
prose_text_weight="400",
|
185 |
-
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
|
186 |
section_header_text_size="*text_md",
|
187 |
section_header_text_weight="400",
|
188 |
shadow_drop="rgba(0,0,0,0.05) 0px 1px 2px 0px",
|
189 |
shadow_drop_lg="0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)",
|
190 |
shadow_inset="rgba(0,0,0,0.05) 0px 2px 4px 0px inset",
|
191 |
shadow_spread="3px",
|
192 |
-
slider_color="*primary_500", #
|
193 |
stat_background_fill="*primary_500",
|
194 |
-
table_border_color="*neutral_700",
|
195 |
-
table_even_background_fill="*
|
196 |
-
table_odd_background_fill="*
|
197 |
table_radius="*radius_lg",
|
198 |
table_row_focus="*color_accent_soft",
|
199 |
)
|
|
|
3 |
import gradio as gr
|
4 |
from gradio.themes.base import Base
|
5 |
from gradio.themes.utils import colors, fonts, sizes
|
6 |
+
import uuid
|
7 |
|
8 |
class Neopy(Base):
|
9 |
def __init__(
|
|
|
36 |
font=font,
|
37 |
font_mono=font_mono,
|
38 |
)
|
39 |
+
self.name = "Neopy"
|
40 |
# Secondary palette (red, used for errors/warnings)
|
41 |
+
self.secondary_100 = "#b80000"
|
42 |
+
self.secondary_200 = "#ff6b6b"
|
43 |
+
self.secondary_300 = "#ff5252"
|
44 |
+
self.secondary_400 = "#ff3232"
|
45 |
+
self.secondary_50 = "#bd5151"
|
46 |
+
self.secondary_500 = "#d31c1c"
|
47 |
+
self.secondary_600 = "#eb2525"
|
48 |
+
self.secondary_700 = "#d81d1d"
|
49 |
+
self.secondary_800 = "#990000" # Fixed from blue to red
|
50 |
+
self.secondary_900 = "#af1e1e"
|
51 |
+
self.secondary_950 = "#601d1d"
|
52 |
+
# Primary palette (blue, for main accents)
|
53 |
+
self.primary_50 = "#eff6ff"
|
54 |
+
self.primary_100 = "#dbeafe"
|
55 |
+
self.primary_200 = "#bfdbfe"
|
56 |
+
self.primary_300 = "#93c5fd"
|
57 |
+
self.primary_400 = "#60a5fa"
|
58 |
+
self.primary_500 = "#3b82f6"
|
59 |
+
self.primary_600 = "#2563eb"
|
60 |
+
self.primary_700 = "#1d4ed8"
|
61 |
+
self.primary_800 = "#1e40af"
|
62 |
+
self.primary_900 = "#1e3a8a"
|
63 |
|
64 |
super().set(
|
65 |
# Backgrounds
|
|
|
83 |
block_label_radius="calc(*radius_lg - 1px) 0 calc(*radius_lg - 1px) 0",
|
84 |
block_label_right_radius="0 calc(*radius_lg - 1px) 0 calc(*radius_lg - 1px)",
|
85 |
block_label_shadow="*block_shadow",
|
86 |
+
block_label_text_color="*body_text_color",
|
87 |
block_label_text_color_dark="*body_text_color",
|
88 |
block_label_text_weight="400",
|
89 |
block_padding="*spacing_xl",
|
90 |
block_radius="*radius_md",
|
91 |
+
block_shadow="*shadow_drop", # Added subtle shadow
|
92 |
block_title_background_fill="rgb(255,255,255)",
|
93 |
block_title_border_color="none",
|
94 |
block_title_border_width="0px",
|
95 |
block_title_padding="*block_label_padding",
|
96 |
block_title_radius="*block_label_radius",
|
97 |
+
block_title_text_color="#110F0F",
|
98 |
+
block_title_text_size="*text_lg", # Increased for hierarchy
|
99 |
block_title_text_weight="600",
|
100 |
body_background_fill="#110F0F",
|
101 |
body_text_color="white",
|
102 |
body_text_color_subdued="#cecece",
|
103 |
body_text_size="*text_md",
|
104 |
body_text_weight="400",
|
105 |
+
border_color_accent="#cecece",
|
106 |
+
border_color_primary="#cecece",
|
107 |
# Buttons
|
108 |
button_border_width="*input_border_width",
|
109 |
button_cancel_background_fill="*button_secondary_background_fill",
|
|
|
113 |
button_large_radius="*radius_lg",
|
114 |
button_large_text_size="*text_lg",
|
115 |
button_large_text_weight="600",
|
116 |
+
button_primary_background_fill="*primary_500",
|
117 |
+
button_primary_background_fill_hover="*primary_400", # Added hover effect
|
118 |
+
button_primary_border_color="*primary_500", # Fixed to match background
|
119 |
button_primary_border_color_hover="*primary_400",
|
120 |
button_primary_text_color="white",
|
121 |
+
button_primary_text_color_hover="white",
|
122 |
+
button_secondary_background_fill="#6a6a6a",
|
123 |
+
button_secondary_background_fill_hover="*neutral_600", # Added hover effect
|
124 |
button_secondary_border_color="*neutral_700",
|
125 |
button_secondary_text_color="white",
|
126 |
button_small_padding="*spacing_sm calc(2 * *spacing_sm)",
|
|
|
130 |
button_transition="0.3s ease all",
|
131 |
# Checkboxes
|
132 |
checkbox_background_color="*neutral_700",
|
133 |
+
checkbox_background_color_selected="*primary_500", # Fixed to blue
|
134 |
checkbox_border_color="*neutral_700",
|
135 |
checkbox_border_color_focus="*primary_500",
|
136 |
checkbox_border_color_selected="*primary_500",
|
|
|
155 |
error_background_fill="*background_fill_primary",
|
156 |
error_border_color="*border_color_primary",
|
157 |
error_border_width="1px",
|
158 |
+
error_text_color="*secondary_700",
|
159 |
error_text_color_dark="*secondary_600",
|
160 |
form_gap_width="0px",
|
161 |
# Inputs
|
162 |
input_background_fill="*neutral_900",
|
163 |
+
input_background_fill_focus="*primary_50",
|
164 |
input_border_color="*neutral_700",
|
165 |
+
input_border_color_focus="*primary_500",
|
166 |
input_border_width="1px",
|
167 |
input_padding="*spacing_xl",
|
168 |
input_placeholder_color="*neutral_500",
|
169 |
input_radius="*radius_lg",
|
170 |
+
input_shadow="*shadow_drop", # Added subtle shadow
|
171 |
input_text_size="*text_md",
|
172 |
input_text_weight="400",
|
173 |
layout_gap="*spacing_xxl",
|
174 |
# Links
|
175 |
+
link_text_color="*primary_500",
|
176 |
link_text_color_active="*primary_500",
|
177 |
link_text_color_hover="*primary_400",
|
178 |
link_text_color_visited="*primary_600",
|
|
|
183 |
prose_header_text_weight="600",
|
184 |
prose_text_size="*text_md",
|
185 |
prose_text_weight="400",
|
186 |
+
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\")",
|
187 |
section_header_text_size="*text_md",
|
188 |
section_header_text_weight="400",
|
189 |
shadow_drop="rgba(0,0,0,0.05) 0px 1px 2px 0px",
|
190 |
shadow_drop_lg="0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)",
|
191 |
shadow_inset="rgba(0,0,0,0.05) 0px 2px 4px 0px inset",
|
192 |
shadow_spread="3px",
|
193 |
+
slider_color="*primary_500", # Changed to blue
|
194 |
stat_background_fill="*primary_500",
|
195 |
+
table_border_color="*neutral_700", # Improved contrast
|
196 |
+
table_even_background_fill="*neutral_800", # Lighter for readability
|
197 |
+
table_odd_background_fill="*neutral_700", # Lighter for readability
|
198 |
table_radius="*radius_lg",
|
199 |
table_row_focus="*color_accent_soft",
|
200 |
)
|