elismasilva commited on
Commit
8dfe22a
·
verified ·
1 Parent(s): 919197a

Update app.py

Browse files
Files changed (1) hide show
  1. app.py +260 -260
app.py CHANGED
@@ -1,261 +1,261 @@
1
- # app.py
2
-
3
- import gradio as gr
4
- from gradio_creditspanel import CreditsPanel
5
- import os
6
-
7
- def setup_demo_files():
8
- """Creates necessary directories and dummy files for the demo."""
9
- os.makedirs("LICENSES", exist_ok=True)
10
- if not os.path.exists("LICENSES/Apache.txt"):
11
- with open("LICENSES/Apache.txt", "w") as f:
12
- f.write("Apache License\nVersion 2.0, January 2004...")
13
- if not os.path.exists("LICENSES/MIT.txt"):
14
- with open("LICENSES/MIT.txt", "w") as f:
15
- f.write("MIT License\nCopyright (c) 2025 Author...")
16
- os.makedirs("assets", exist_ok=True)
17
- if not os.path.exists("./assets/logo.webp"):
18
- with open("./assets/logo.webp", "w") as f:
19
- f.write("Placeholder WebP logo")
20
-
21
- # --- Credits list with sections ---
22
- credits_list = [
23
- {"section_title": "Project Leadership"},
24
- {"title": "Project Manager", "name": "Emma Thompson"},
25
- {"title": "Scrum Master", "name": "Ava Rodriguez"},
26
-
27
- {"section_title": "Development Team"},
28
- {"title": "Lead Developer", "name": "John Doe"},
29
- {"title": "Senior Backend Engineer", "name": "Michael Chen"},
30
- {"title": "Frontend Developer", "name": "Sarah Johnson"},
31
- {"title": "UI/UX Designer", "name": "Jane Smith"},
32
- {"title": "Database Architect", "name": "Alex Ray"},
33
-
34
- {"section_title": "Quality & Operations"},
35
- {"title": "DevOps Engineer", "name": "Liam Patel"},
36
- {"title": "Quality Assurance Lead", "name": "Sam Wilson"},
37
- {"title": "Test Automation Engineer", "name": "Olivia Brown"},
38
- ]
39
-
40
- license_paths = {
41
- "Gradio Framework": "./LICENSES/Apache.txt",
42
- "This Component": "./LICENSES/MIT.txt"
43
- }
44
-
45
- DEFAULT_SPEEDS = {
46
- "scroll": 40.0,
47
- "starwars": 70.0,
48
- "matrix": 40.0
49
- }
50
- SCROLL_LOGO_PATH = "./assets/gradio_logo_white.png"
51
- LOGO_PATH="./assets/logo.webp"
52
-
53
- def update_panel(
54
- effect: str,
55
- speed: float,
56
- base_font_size: float,
57
- intro_title: str,
58
- intro_subtitle: str,
59
- sidebar_position: str,
60
- show_logo: bool,
61
- show_licenses: bool,
62
- show_credits: bool,
63
- logo_position: str,
64
- logo_sizing: str,
65
- logo_width: str | None,
66
- logo_height: str | None,
67
- scroll_background_color: str | None,
68
- scroll_title_color: str | None,
69
- scroll_section_title_color: str | None,
70
- scroll_name_color: str | None,
71
- layout_style: str,
72
- title_uppercase: bool,
73
- name_uppercase: bool,
74
- section_title_uppercase: bool,
75
- swap_font_sizes: bool,
76
- show_scroll_logo: bool,
77
- scroll_logo_height: str | None
78
- ) -> dict:
79
- """Callback function that updates all properties of the CreditsPanel component."""
80
-
81
- scroll_logo_path = SCROLL_LOGO_PATH if show_scroll_logo else None
82
-
83
- if not scroll_logo_height:
84
- scroll_logo_height = "120px"
85
-
86
- return {
87
- "credits": credits_list,
88
- "licenses": license_paths,
89
- "effect": effect,
90
- "speed": speed,
91
- "base_font_size": base_font_size,
92
- "intro_title": intro_title,
93
- "intro_subtitle": intro_subtitle,
94
- "sidebar_position": sidebar_position,
95
- "logo_path": LOGO_PATH,
96
- "show_logo": show_logo,
97
- "show_licenses": show_licenses,
98
- "show_credits": show_credits,
99
- "logo_position": logo_position,
100
- "logo_sizing": logo_sizing,
101
- "logo_width": logo_width,
102
- "logo_height": logo_height,
103
- "scroll_background_color": scroll_background_color,
104
- "scroll_title_color": scroll_title_color,
105
- "scroll_name_color": scroll_name_color,
106
- "scroll_section_title_color": scroll_section_title_color,
107
- "layout_style": layout_style,
108
- "title_uppercase": title_uppercase,
109
- "name_uppercase": name_uppercase,
110
- "section_title_uppercase": section_title_uppercase,
111
- "swap_font_sizes_on_two_column": swap_font_sizes,
112
- "scroll_logo_path": scroll_logo_path,
113
- "scroll_logo_height": scroll_logo_height,
114
- }
115
-
116
- def update_ui_on_effect_change(effect: str) -> tuple[float, float]:
117
- """Updates sliders to sensible defaults when the animation effect is changed."""
118
- font_size = 1.5
119
- if effect == "starwars":
120
- font_size = 3.8
121
- speed = DEFAULT_SPEEDS.get(effect, 40.0)
122
- return speed, font_size
123
-
124
- def toggle_swap_checkbox_visibility(layout: str) -> dict:
125
- """Show the swap checkbox only for the two-column layout."""
126
- return gr.update(visible=(layout == 'two-column'))
127
-
128
- with gr.Blocks(theme=gr.themes.Ocean(), title="CreditsPanel Demo") as demo:
129
- gr.Markdown(
130
- """
131
- # Interactive CreditsPanel Demo
132
- Use the sidebar controls to customize the `CreditsPanel` component in real-time.
133
- """
134
- )
135
-
136
- with gr.Sidebar(position="right"):
137
- gr.Markdown("### Effects Settings")
138
- effect_radio = gr.Radio(["scroll", "starwars", "matrix"], label="Animation Effect", value="scroll")
139
- speed_slider = gr.Slider(minimum=5.0, maximum=100.0, step=1.0, value=DEFAULT_SPEEDS["scroll"], label="Animation Speed")
140
- font_size_slider = gr.Slider(minimum=1.0, maximum=10.0, step=0.1, value=1.5, label="Base Font Size")
141
-
142
- gr.Markdown("### Credits Layout Settings")
143
- layout_style_radio = gr.Radio(
144
- ["stacked", "two-column"], label="Layout Style", value="stacked",
145
- info="How to display titles and names."
146
- )
147
- swap_sizes_checkbox = gr.Checkbox(
148
- label="Swap Title/Name Font Sizes", value=False,
149
- info="Emphasize name over title in two-column layout.",
150
- visible=False
151
- )
152
- title_uppercase_checkbox = gr.Checkbox(label="Title Uppercase", value=False)
153
- name_uppercase_checkbox = gr.Checkbox(label="Name Uppercase", value=False)
154
- section_title_uppercase_checkbox = gr.Checkbox(label="Section Uppercase", value=True)
155
-
156
- gr.Markdown("### Scrolling Logo")
157
- show_scroll_logo_checkbox = gr.Checkbox(
158
- label="Show Logo in Credits Roll",
159
- value=True,
160
- info="Toggles the logo above the intro text."
161
- )
162
- scroll_logo_height_input = gr.Textbox(label="Scrolling Logo Height", value="100px")
163
-
164
- gr.Markdown("### Intro Text")
165
- intro_title_input = gr.Textbox(label="Intro Title", value="Gradio")
166
- intro_subtitle_input = gr.Textbox(label="Intro Subtitle", value="The best UI framework")
167
-
168
- gr.Markdown("### Layout & Visibility")
169
- sidebar_position_radio = gr.Radio(["right", "bottom"], label="Sidebar Position", value="right")
170
- show_logo_checkbox = gr.Checkbox(label="Show Logo", value=True)
171
- show_licenses_checkbox = gr.Checkbox(label="Show Licenses", value=True)
172
- show_credits_checkbox = gr.Checkbox(label="Show Credits", value=True)
173
-
174
- gr.Markdown("### Logo Customization")
175
- logo_position_radio = gr.Radio(["left", "center", "right"], label="Logo Position", value="center")
176
- logo_sizing_radio = gr.Radio(["stretch", "crop", "resize"], label="Logo Sizing", value="resize")
177
- logo_width_input = gr.Textbox(label="Logo Width", value="200px")
178
- logo_height_input = gr.Textbox(label="Logo Height", value="100px")
179
-
180
- gr.Markdown("### Color Settings (Scroll Effect)")
181
- scroll_background_color = gr.ColorPicker(label="Background Color", value="#000000")
182
- scroll_title_color = gr.ColorPicker(label="Title Color", value="#FFFFFF")
183
- scroll_section_title_color = gr.ColorPicker(label="Section Title Color", value="#FFFFFF")
184
- scroll_name_color = gr.ColorPicker(label="Name Color", value="#FFFFFF")
185
-
186
- panel = CreditsPanel(
187
- height=500,
188
- credits=credits_list,
189
- licenses=license_paths,
190
- effect="scroll",
191
- speed=DEFAULT_SPEEDS["scroll"],
192
- base_font_size=1.5,
193
- intro_title="Gradio",
194
- intro_subtitle="The best UI framework",
195
- sidebar_position="right",
196
- logo_path=LOGO_PATH,
197
- show_logo=True,
198
- show_licenses=True,
199
- show_credits=True,
200
- logo_position="center",
201
- logo_sizing="resize",
202
- logo_width="200px",
203
- logo_height="100px",
204
- scroll_background_color="#000000",
205
- scroll_title_color="#FFFFFF",
206
- scroll_name_color="#FFFFFF",
207
- scroll_section_title_color="#FFFFFF",
208
- layout_style="stacked",
209
- title_uppercase=False,
210
- name_uppercase=False,
211
- section_title_uppercase=True,
212
- swap_font_sizes_on_two_column=False,
213
- scroll_logo_path=SCROLL_LOGO_PATH,
214
- scroll_logo_height="100px",
215
- )
216
-
217
- inputs = [
218
- effect_radio,
219
- speed_slider,
220
- font_size_slider,
221
- intro_title_input,
222
- intro_subtitle_input,
223
- sidebar_position_radio,
224
- show_logo_checkbox,
225
- show_licenses_checkbox,
226
- show_credits_checkbox,
227
- logo_position_radio,
228
- logo_sizing_radio,
229
- logo_width_input,
230
- logo_height_input,
231
- scroll_background_color,
232
- scroll_title_color,
233
- scroll_section_title_color,
234
- scroll_name_color,
235
- layout_style_radio,
236
- title_uppercase_checkbox,
237
- name_uppercase_checkbox,
238
- section_title_uppercase_checkbox,
239
- swap_sizes_checkbox,
240
- show_scroll_logo_checkbox,
241
- scroll_logo_height_input
242
- ]
243
-
244
- demo.load(
245
- fn=update_panel,
246
- inputs=inputs,
247
- outputs=panel
248
- )
249
- layout_style_radio.change(
250
- fn=toggle_swap_checkbox_visibility,
251
- inputs=layout_style_radio,
252
- outputs=swap_sizes_checkbox
253
- )
254
- effect_radio.change(fn=update_ui_on_effect_change, inputs=effect_radio, outputs=[speed_slider, font_size_slider])
255
-
256
- for input_component in inputs:
257
- input_component.change(fn=update_panel, inputs=inputs, outputs=panel)
258
-
259
- if __name__ == "__main__":
260
- setup_demo_files()
261
  demo.launch()
 
1
+ # app.py
2
+
3
+ import gradio as gr
4
+ from gradio_creditspanel import CreditsPanel
5
+ import os
6
+
7
+ def setup_demo_files():
8
+ """Creates necessary directories and dummy files for the demo."""
9
+ os.makedirs("src/LICENSES", exist_ok=True)
10
+ if not os.path.exists("src/LICENSES/Apache.txt"):
11
+ with open("src/LICENSES/Apache.txt", "w") as f:
12
+ f.write("Apache License\nVersion 2.0, January 2004...")
13
+ if not os.path.exists("src/LICENSES/MIT.txt"):
14
+ with open("src/LICENSES/MIT.txt", "w") as f:
15
+ f.write("MIT License\nCopyright (c) 2025 Author...")
16
+ os.makedirs("src/assets", exist_ok=True)
17
+ if not os.path.exists("src/assets/logo.webp"):
18
+ with open("src/assets/logo.webp", "w") as f:
19
+ f.write("Placeholder WebP logo")
20
+
21
+ # --- Credits list with sections ---
22
+ credits_list = [
23
+ {"section_title": "Project Leadership"},
24
+ {"title": "Project Manager", "name": "Emma Thompson"},
25
+ {"title": "Scrum Master", "name": "Ava Rodriguez"},
26
+
27
+ {"section_title": "Development Team"},
28
+ {"title": "Lead Developer", "name": "John Doe"},
29
+ {"title": "Senior Backend Engineer", "name": "Michael Chen"},
30
+ {"title": "Frontend Developer", "name": "Sarah Johnson"},
31
+ {"title": "UI/UX Designer", "name": "Jane Smith"},
32
+ {"title": "Database Architect", "name": "Alex Ray"},
33
+
34
+ {"section_title": "Quality & Operations"},
35
+ {"title": "DevOps Engineer", "name": "Liam Patel"},
36
+ {"title": "Quality Assurance Lead", "name": "Sam Wilson"},
37
+ {"title": "Test Automation Engineer", "name": "Olivia Brown"},
38
+ ]
39
+
40
+ license_paths = {
41
+ "Gradio Framework": "src/LICENSES/Apache.txt",
42
+ "This Component": "src/LICENSES/MIT.txt"
43
+ }
44
+
45
+ DEFAULT_SPEEDS = {
46
+ "scroll": 40.0,
47
+ "starwars": 70.0,
48
+ "matrix": 40.0
49
+ }
50
+ SCROLL_LOGO_PATH = "src/assets/gradio_logo_white.png"
51
+ LOGO_PATH="src/assets/logo.webp"
52
+
53
+ def update_panel(
54
+ effect: str,
55
+ speed: float,
56
+ base_font_size: float,
57
+ intro_title: str,
58
+ intro_subtitle: str,
59
+ sidebar_position: str,
60
+ show_logo: bool,
61
+ show_licenses: bool,
62
+ show_credits: bool,
63
+ logo_position: str,
64
+ logo_sizing: str,
65
+ logo_width: str | None,
66
+ logo_height: str | None,
67
+ scroll_background_color: str | None,
68
+ scroll_title_color: str | None,
69
+ scroll_section_title_color: str | None,
70
+ scroll_name_color: str | None,
71
+ layout_style: str,
72
+ title_uppercase: bool,
73
+ name_uppercase: bool,
74
+ section_title_uppercase: bool,
75
+ swap_font_sizes: bool,
76
+ show_scroll_logo: bool,
77
+ scroll_logo_height: str | None
78
+ ) -> dict:
79
+ """Callback function that updates all properties of the CreditsPanel component."""
80
+
81
+ scroll_logo_path = SCROLL_LOGO_PATH if show_scroll_logo else None
82
+
83
+ if not scroll_logo_height:
84
+ scroll_logo_height = "120px"
85
+
86
+ return {
87
+ "credits": credits_list,
88
+ "licenses": license_paths,
89
+ "effect": effect,
90
+ "speed": speed,
91
+ "base_font_size": base_font_size,
92
+ "intro_title": intro_title,
93
+ "intro_subtitle": intro_subtitle,
94
+ "sidebar_position": sidebar_position,
95
+ "logo_path": LOGO_PATH,
96
+ "show_logo": show_logo,
97
+ "show_licenses": show_licenses,
98
+ "show_credits": show_credits,
99
+ "logo_position": logo_position,
100
+ "logo_sizing": logo_sizing,
101
+ "logo_width": logo_width,
102
+ "logo_height": logo_height,
103
+ "scroll_background_color": scroll_background_color,
104
+ "scroll_title_color": scroll_title_color,
105
+ "scroll_name_color": scroll_name_color,
106
+ "scroll_section_title_color": scroll_section_title_color,
107
+ "layout_style": layout_style,
108
+ "title_uppercase": title_uppercase,
109
+ "name_uppercase": name_uppercase,
110
+ "section_title_uppercase": section_title_uppercase,
111
+ "swap_font_sizes_on_two_column": swap_font_sizes,
112
+ "scroll_logo_path": scroll_logo_path,
113
+ "scroll_logo_height": scroll_logo_height,
114
+ }
115
+
116
+ def update_ui_on_effect_change(effect: str) -> tuple[float, float]:
117
+ """Updates sliders to sensible defaults when the animation effect is changed."""
118
+ font_size = 1.5
119
+ if effect == "starwars":
120
+ font_size = 3.8
121
+ speed = DEFAULT_SPEEDS.get(effect, 40.0)
122
+ return speed, font_size
123
+
124
+ def toggle_swap_checkbox_visibility(layout: str) -> dict:
125
+ """Show the swap checkbox only for the two-column layout."""
126
+ return gr.update(visible=(layout == 'two-column'))
127
+
128
+ with gr.Blocks(theme=gr.themes.Ocean(), title="CreditsPanel Demo") as demo:
129
+ gr.Markdown(
130
+ """
131
+ # Interactive CreditsPanel Demo
132
+ Use the sidebar controls to customize the `CreditsPanel` component in real-time.
133
+ """
134
+ )
135
+
136
+ with gr.Sidebar(position="right"):
137
+ gr.Markdown("### Effects Settings")
138
+ effect_radio = gr.Radio(["scroll", "starwars", "matrix"], label="Animation Effect", value="scroll")
139
+ speed_slider = gr.Slider(minimum=5.0, maximum=100.0, step=1.0, value=DEFAULT_SPEEDS["scroll"], label="Animation Speed")
140
+ font_size_slider = gr.Slider(minimum=1.0, maximum=10.0, step=0.1, value=1.5, label="Base Font Size")
141
+
142
+ gr.Markdown("### Credits Layout Settings")
143
+ layout_style_radio = gr.Radio(
144
+ ["stacked", "two-column"], label="Layout Style", value="stacked",
145
+ info="How to display titles and names."
146
+ )
147
+ swap_sizes_checkbox = gr.Checkbox(
148
+ label="Swap Title/Name Font Sizes", value=False,
149
+ info="Emphasize name over title in two-column layout.",
150
+ visible=False
151
+ )
152
+ title_uppercase_checkbox = gr.Checkbox(label="Title Uppercase", value=False)
153
+ name_uppercase_checkbox = gr.Checkbox(label="Name Uppercase", value=False)
154
+ section_title_uppercase_checkbox = gr.Checkbox(label="Section Uppercase", value=True)
155
+
156
+ gr.Markdown("### Scrolling Logo")
157
+ show_scroll_logo_checkbox = gr.Checkbox(
158
+ label="Show Logo in Credits Roll",
159
+ value=True,
160
+ info="Toggles the logo above the intro text."
161
+ )
162
+ scroll_logo_height_input = gr.Textbox(label="Scrolling Logo Height", value="100px")
163
+
164
+ gr.Markdown("### Intro Text")
165
+ intro_title_input = gr.Textbox(label="Intro Title", value="Gradio")
166
+ intro_subtitle_input = gr.Textbox(label="Intro Subtitle", value="The best UI framework")
167
+
168
+ gr.Markdown("### Layout & Visibility")
169
+ sidebar_position_radio = gr.Radio(["right", "bottom"], label="Sidebar Position", value="right")
170
+ show_logo_checkbox = gr.Checkbox(label="Show Logo", value=True)
171
+ show_licenses_checkbox = gr.Checkbox(label="Show Licenses", value=True)
172
+ show_credits_checkbox = gr.Checkbox(label="Show Credits", value=True)
173
+
174
+ gr.Markdown("### Logo Customization")
175
+ logo_position_radio = gr.Radio(["left", "center", "right"], label="Logo Position", value="center")
176
+ logo_sizing_radio = gr.Radio(["stretch", "crop", "resize"], label="Logo Sizing", value="resize")
177
+ logo_width_input = gr.Textbox(label="Logo Width", value="200px")
178
+ logo_height_input = gr.Textbox(label="Logo Height", value="100px")
179
+
180
+ gr.Markdown("### Color Settings (Scroll Effect)")
181
+ scroll_background_color = gr.ColorPicker(label="Background Color", value="#000000")
182
+ scroll_title_color = gr.ColorPicker(label="Title Color", value="#FFFFFF")
183
+ scroll_section_title_color = gr.ColorPicker(label="Section Title Color", value="#FFFFFF")
184
+ scroll_name_color = gr.ColorPicker(label="Name Color", value="#FFFFFF")
185
+
186
+ panel = CreditsPanel(
187
+ height=500,
188
+ credits=credits_list,
189
+ licenses=license_paths,
190
+ effect="scroll",
191
+ speed=DEFAULT_SPEEDS["scroll"],
192
+ base_font_size=1.5,
193
+ intro_title="Gradio",
194
+ intro_subtitle="The best UI framework",
195
+ sidebar_position="right",
196
+ logo_path=LOGO_PATH,
197
+ show_logo=True,
198
+ show_licenses=True,
199
+ show_credits=True,
200
+ logo_position="center",
201
+ logo_sizing="resize",
202
+ logo_width="200px",
203
+ logo_height="100px",
204
+ scroll_background_color="#000000",
205
+ scroll_title_color="#FFFFFF",
206
+ scroll_name_color="#FFFFFF",
207
+ scroll_section_title_color="#FFFFFF",
208
+ layout_style="stacked",
209
+ title_uppercase=False,
210
+ name_uppercase=False,
211
+ section_title_uppercase=True,
212
+ swap_font_sizes_on_two_column=False,
213
+ scroll_logo_path=SCROLL_LOGO_PATH,
214
+ scroll_logo_height="100px",
215
+ )
216
+
217
+ inputs = [
218
+ effect_radio,
219
+ speed_slider,
220
+ font_size_slider,
221
+ intro_title_input,
222
+ intro_subtitle_input,
223
+ sidebar_position_radio,
224
+ show_logo_checkbox,
225
+ show_licenses_checkbox,
226
+ show_credits_checkbox,
227
+ logo_position_radio,
228
+ logo_sizing_radio,
229
+ logo_width_input,
230
+ logo_height_input,
231
+ scroll_background_color,
232
+ scroll_title_color,
233
+ scroll_section_title_color,
234
+ scroll_name_color,
235
+ layout_style_radio,
236
+ title_uppercase_checkbox,
237
+ name_uppercase_checkbox,
238
+ section_title_uppercase_checkbox,
239
+ swap_sizes_checkbox,
240
+ show_scroll_logo_checkbox,
241
+ scroll_logo_height_input
242
+ ]
243
+
244
+ demo.load(
245
+ fn=update_panel,
246
+ inputs=inputs,
247
+ outputs=panel
248
+ )
249
+ layout_style_radio.change(
250
+ fn=toggle_swap_checkbox_visibility,
251
+ inputs=layout_style_radio,
252
+ outputs=swap_sizes_checkbox
253
+ )
254
+ effect_radio.change(fn=update_ui_on_effect_change, inputs=effect_radio, outputs=[speed_slider, font_size_slider])
255
+
256
+ for input_component in inputs:
257
+ input_component.change(fn=update_panel, inputs=inputs, outputs=panel)
258
+
259
+ if __name__ == "__main__":
260
+ setup_demo_files()
261
  demo.launch()