Upload folder using huggingface_hub

README.md

@@ -10,7 +10,8 @@ app_file: space.py
 ---
 
 # `gradio_creditspanel`
-<a href="https://pypi.org/project/gradio_creditspanel/" target="_blank"><img alt="PyPI - Version" src="https://img.shields.io/pypi/v/gradio_creditspanel"></a>  
+<img alt="Static Badge" src="https://img.shields.io/badge/version%20-%200.0.4%20-%20blue"> <a href="https://huggingface.co/spaces/elismasilva/gradio_creditspanel"><img src="https://img.shields.io/badge/%F0%9F%A4%97%20Hugging%20Face-Demo-blue"></a><p><span>💻 <a href='https://github.com/DEVAIEXP/gradio_component_creditspanel'>Component GitHub Code</a></span></p>
+
 
 Credits Panel for Gradio UI
 
@@ -43,7 +44,7 @@ def setup_demo_files():
         with open("./assets/logo.webp", "w") as f:
             f.write("Placeholder WebP logo")
 
-# --- UPDATED: Credits list with sections ---
+# --- Credits list with sections ---
 credits_list = [
     {"section_title": "Project Leadership"},
     {"title": "Project Manager", "name": "Emma Thompson"},
@@ -72,6 +73,8 @@ DEFAULT_SPEEDS = {
     "starwars": 70.0,
     "matrix": 40.0
 }
+SCROLL_LOGO_PATH = "./assets/gradio_logo_white.png"
+LOGO_PATH="./assets/logo.webp"
 
 def update_panel(
     effect: str, 
@@ -89,39 +92,52 @@ def update_panel(
     logo_height: str | None,
     scroll_background_color: str | None, 
     scroll_title_color: str | None, 
+    scroll_section_title_color: str | None,
     scroll_name_color: str | None,    
     layout_style: str, 
     title_uppercase: bool, 
     name_uppercase: bool, 
     section_title_uppercase: bool,
-    swap_font_sizes: bool
+    swap_font_sizes: bool,
+    show_scroll_logo: bool,
+    scroll_logo_height: str | None
 ) -> dict:
     """Callback function that updates all properties of the CreditsPanel component."""
-    return gr.update(
-        visible=True,
-        effect=effect, 
-        speed=speed, 
-        base_font_size=base_font_size,
-        intro_title=intro_title, 
-        intro_subtitle=intro_subtitle,
-        sidebar_position=sidebar_position, 
-        show_logo=show_logo,
-        show_licenses=show_licenses, 
-        show_credits=show_credits,
-        logo_position=logo_position, 
-        logo_sizing=logo_sizing,
-        logo_width=logo_width, 
-        logo_height=logo_height,
-        scroll_background_color=scroll_background_color,
-        scroll_title_color=scroll_title_color,
-        scroll_name_color=scroll_name_color,        
-        layout_style=layout_style,
-        title_uppercase=title_uppercase,
-        name_uppercase=name_uppercase,
-        section_title_uppercase=section_title_uppercase,
-        swap_font_sizes_on_two_column=swap_font_sizes,
-        value=credits_list
-    )
+        
+    scroll_logo_path = SCROLL_LOGO_PATH if show_scroll_logo else None
+    
+    if not scroll_logo_height:
+        scroll_logo_height = "120px"
+        
+    return {
+        "credits": credits_list,
+        "licenses": license_paths,
+        "effect": effect,
+        "speed": speed,
+        "base_font_size": base_font_size,
+        "intro_title": intro_title,
+        "intro_subtitle": intro_subtitle,
+        "sidebar_position": sidebar_position,
+        "logo_path": LOGO_PATH, 
+        "show_logo": show_logo,
+        "show_licenses": show_licenses,
+        "show_credits": show_credits,
+        "logo_position": logo_position,
+        "logo_sizing": logo_sizing,
+        "logo_width": logo_width,
+        "logo_height": logo_height,
+        "scroll_background_color": scroll_background_color,
+        "scroll_title_color": scroll_title_color,
+        "scroll_name_color": scroll_name_color,
+        "scroll_section_title_color": scroll_section_title_color,
+        "layout_style": layout_style,
+        "title_uppercase": title_uppercase,
+        "name_uppercase": name_uppercase,
+        "section_title_uppercase": section_title_uppercase,
+        "swap_font_sizes_on_two_column": swap_font_sizes,
+        "scroll_logo_path": scroll_logo_path,
+        "scroll_logo_height": scroll_logo_height,
+    }
 
 def update_ui_on_effect_change(effect: str) -> tuple[float, float]:
     """Updates sliders to sensible defaults when the animation effect is changed."""
@@ -163,6 +179,14 @@ with gr.Blocks(theme=gr.themes.Ocean(), title="CreditsPanel Demo") as demo:
         name_uppercase_checkbox = gr.Checkbox(label="Name Uppercase", value=False)
         section_title_uppercase_checkbox = gr.Checkbox(label="Section Uppercase", value=True)
         
+        gr.Markdown("### Scrolling Logo")
+        show_scroll_logo_checkbox = gr.Checkbox(
+            label="Show Logo in Credits Roll", 
+            value=True, 
+            info="Toggles the logo above the intro text."
+        )
+        scroll_logo_height_input = gr.Textbox(label="Scrolling Logo Height", value="100px")
+        
         gr.Markdown("### Intro Text")
         intro_title_input = gr.Textbox(label="Intro Title", value="Gradio")
         intro_subtitle_input = gr.Textbox(label="Intro Subtitle", value="The best UI framework")
@@ -182,19 +206,20 @@ with gr.Blocks(theme=gr.themes.Ocean(), title="CreditsPanel Demo") as demo:
         gr.Markdown("### Color Settings (Scroll Effect)")
         scroll_background_color = gr.ColorPicker(label="Background Color", value="#000000")
         scroll_title_color = gr.ColorPicker(label="Title Color", value="#FFFFFF")
+        scroll_section_title_color = gr.ColorPicker(label="Section Title Color", value="#FFFFFF")
         scroll_name_color = gr.ColorPicker(label="Name Color", value="#FFFFFF")
 
-    panel = CreditsPanel(
+    panel = CreditsPanel(       
+        height=500,
         credits=credits_list,
         licenses=license_paths,
         effect="scroll",
-        height=500,
         speed=DEFAULT_SPEEDS["scroll"],
         base_font_size=1.5,
         intro_title="Gradio",
         intro_subtitle="The best UI framework",
         sidebar_position="right",
-        logo_path="./assets/logo.webp",
+        logo_path=LOGO_PATH,
         show_logo=True,
         show_licenses=True,
         show_credits=True,
@@ -205,11 +230,14 @@ with gr.Blocks(theme=gr.themes.Ocean(), title="CreditsPanel Demo") as demo:
         scroll_background_color="#000000",
         scroll_title_color="#FFFFFF",
         scroll_name_color="#FFFFFF",       
+        scroll_section_title_color="#FFFFFF",
         layout_style="stacked",
         title_uppercase=False,
         name_uppercase=False,
         section_title_uppercase=True,
         swap_font_sizes_on_two_column=False,
+        scroll_logo_path=SCROLL_LOGO_PATH,
+        scroll_logo_height="100px",
     )
 
     inputs = [
@@ -227,15 +255,23 @@ with gr.Blocks(theme=gr.themes.Ocean(), title="CreditsPanel Demo") as demo:
         logo_width_input, 
         logo_height_input,
         scroll_background_color, 
-        scroll_title_color, 
+        scroll_title_color,
+        scroll_section_title_color, 
         scroll_name_color,        
         layout_style_radio, 
         title_uppercase_checkbox, 
         name_uppercase_checkbox,
         section_title_uppercase_checkbox,
-        swap_sizes_checkbox
+        swap_sizes_checkbox,
+        show_scroll_logo_checkbox,
+        scroll_logo_height_input
     ]
 
+    demo.load(
+        fn=update_panel,
+        inputs=inputs,
+        outputs=panel
+    )
     layout_style_radio.change(
         fn=toggle_swap_checkbox_visibility,
         inputs=layout_style_radio,
@@ -270,7 +306,9 @@ if __name__ == "__main__":
 <td align="left" style="width: 25%;">
 
 ```python
-Any
+typing.Optional[typing.Dict[str, typing.Any]][
+    typing.Dict[str, typing.Any][str, Any], None
+]
 ```
 
 </td>
@@ -279,21 +317,11 @@ Any
 </tr>
 
 <tr>
-<td align="left"><code>credits</code></td>
+<td align="left"><code>height</code></td>
 <td align="left" style="width: 25%;">
 
 ```python
-typing.Union[
-    typing.List[typing.Dict[str, str]],
-    typing.Callable,
-    NoneType,
-][
-    typing.List[typing.Dict[str, str]][
-        typing.Dict[str, str][str, str]
-    ],
-    Callable,
-    None,
-]
+int | str | None
 ```
 
 </td>
@@ -302,7 +330,7 @@ typing.Union[
 </tr>
 
 <tr>
-<td align="left"><code>height</code></td>
+<td align="left"><code>width</code></td>
 <td align="left" style="width: 25%;">
 
 ```python
@@ -315,11 +343,21 @@ int | str | None
 </tr>
 
 <tr>
-<td align="left"><code>width</code></td>
+<td align="left"><code>credits</code></td>
 <td align="left" style="width: 25%;">
 
 ```python
-int | str | None
+typing.Union[
+    typing.List[typing.Dict[str, str]],
+    typing.Callable,
+    NoneType,
+][
+    typing.List[typing.Dict[str, str]][
+        typing.Dict[str, str][str, str]
+    ],
+    Callable,
+    None,
+]
 ```
 
 </td>
@@ -566,6 +604,19 @@ str | None
 <td align="left">None</td>
 </tr>
 
+<tr>
+<td align="left"><code>scroll_section_title_color</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+str | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">None</td>
+</tr>
+
 <tr>
 <td align="left"><code>layout_style</code></td>
 <td align="left" style="width: 25%;">
@@ -631,6 +682,32 @@ bool
 <td align="left">None</td>
 </tr>
 
+<tr>
+<td align="left"><code>scroll_logo_path</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+str | pathlib.Path | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">None</td>
+</tr>
+
+<tr>
+<td align="left"><code>scroll_logo_height</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+str
+```
+
+</td>
+<td align="left"><code>"120px"</code></td>
+<td align="left">None</td>
+</tr>
+
 <tr>
 <td align="left"><code>label</code></td>
 <td align="left" style="width: 25%;">
@@ -844,7 +921,6 @@ The impact on the users predict function varies depending on whether the compone
 
 The code snippet below is accurate in cases where the component is used as both an input and an output.
 
-- **As output:** Is passed, dict[str, Any] | None: The input payload, returned unchanged.
 
 
  ```python
@@ -852,7 +928,9 @@ The code snippet below is accurate in cases where the component is used as both
      value: typing.Optional[typing.Dict[str, typing.Any]][
     typing.Dict[str, typing.Any][str, Any], None
 ]
- ) -> Any:
+ ) -> typing.Optional[typing.Dict[str, typing.Any]][
+    typing.Dict[str, typing.Any][str, Any], None
+]:
      return value
  ```
  

app.py

@@ -1,226 +1,261 @@
-# app.py
-
-import gradio as gr
-from gradio_creditspanel import CreditsPanel
-import os
-
-def setup_demo_files():
-    """Creates necessary directories and dummy files for the demo."""
-    os.makedirs("src/LICENSES", exist_ok=True)
-    if not os.path.exists("src/LICENSES/Apache.txt"):
-        with open("src/LICENSES/Apache.txt", "w") as f:
-            f.write("Apache License\nVersion 2.0, January 2004...")
-    if not os.path.exists("src/LICENSES/MIT.txt"):
-        with open("src/LICENSES/MIT.txt", "w") as f:
-            f.write("MIT License\nCopyright (c) 2025 Author...")
-    os.makedirs("src/assets", exist_ok=True)
-    if not os.path.exists("src/assets/logo.webp"):
-        with open("src/assets/logo.webp", "w") as f:
-            f.write("Placeholder WebP logo")
-
-# --- Credits list with sections ---
-credits_list = [
-    {"section_title": "Project Leadership"},
-    {"title": "Project Manager", "name": "Emma Thompson"},
-    {"title": "Scrum Master", "name": "Ava Rodriguez"},
-    
-    {"section_title": "Development Team"},
-    {"title": "Lead Developer", "name": "John Doe"},
-    {"title": "Senior Backend Engineer", "name": "Michael Chen"},
-    {"title": "Frontend Developer", "name": "Sarah Johnson"},
-    {"title": "UI/UX Designer", "name": "Jane Smith"},
-    {"title": "Database Architect", "name": "Alex Ray"},
-    
-    {"section_title": "Quality & Operations"},
-    {"title": "DevOps Engineer", "name": "Liam Patel"},
-    {"title": "Quality Assurance Lead", "name": "Sam Wilson"},
-    {"title": "Test Automation Engineer", "name": "Olivia Brown"},
-]
-
-license_paths = {
-    "Gradio Framework": "src/LICENSES/Apache.txt",
-    "This Component": "src/LICENSES/MIT.txt"
-}
-
-DEFAULT_SPEEDS = {
-    "scroll": 40.0,
-    "starwars": 70.0,
-    "matrix": 40.0
-}
-
-def update_panel(
-    effect: str, 
-    speed: float, 
-    base_font_size: float,
-    intro_title: str, 
-    intro_subtitle: str, 
-    sidebar_position: str,
-    show_logo: bool, 
-    show_licenses: bool, 
-    show_credits: bool, 
-    logo_position: str, 
-    logo_sizing: str, 
-    logo_width: str | None, 
-    logo_height: str | None,
-    scroll_background_color: str | None, 
-    scroll_title_color: str | None, 
-    scroll_name_color: str | None,    
-    layout_style: str, 
-    title_uppercase: bool, 
-    name_uppercase: bool, 
-    section_title_uppercase: bool,
-    swap_font_sizes: bool
-) -> dict:
-    """Callback function that updates all properties of the CreditsPanel component."""
-    return gr.update(
-        visible=True,
-        effect=effect, 
-        speed=speed, 
-        base_font_size=base_font_size,
-        intro_title=intro_title, 
-        intro_subtitle=intro_subtitle,
-        sidebar_position=sidebar_position, 
-        show_logo=show_logo,
-        show_licenses=show_licenses, 
-        show_credits=show_credits,
-        logo_position=logo_position, 
-        logo_sizing=logo_sizing,
-        logo_width=logo_width, 
-        logo_height=logo_height,
-        scroll_background_color=scroll_background_color,
-        scroll_title_color=scroll_title_color,
-        scroll_name_color=scroll_name_color,        
-        layout_style=layout_style,
-        title_uppercase=title_uppercase,
-        name_uppercase=name_uppercase,
-        section_title_uppercase=section_title_uppercase,
-        swap_font_sizes_on_two_column=swap_font_sizes,
-        value=credits_list
-    )
-
-def update_ui_on_effect_change(effect: str) -> tuple[float, float]:
-    """Updates sliders to sensible defaults when the animation effect is changed."""
-    font_size = 1.5
-    if effect == "starwars":
-        font_size = 3.8
-    speed = DEFAULT_SPEEDS.get(effect, 40.0)
-    return speed, font_size
-
-def toggle_swap_checkbox_visibility(layout: str) -> dict:
-    """Show the swap checkbox only for the two-column layout."""
-    return gr.update(visible=(layout == 'two-column'))
-
-with gr.Blocks(theme=gr.themes.Ocean(), title="CreditsPanel Demo") as demo:
-    gr.Markdown(
-        """
-        # Interactive CreditsPanel Demo
-        Use the sidebar controls to customize the `CreditsPanel` component in real-time.
-        """
-    )
-
-    with gr.Sidebar(position="right"):
-        gr.Markdown("### Effects Settings")
-        effect_radio = gr.Radio(["scroll", "starwars", "matrix"], label="Animation Effect", value="scroll")
-        speed_slider = gr.Slider(minimum=5.0, maximum=100.0, step=1.0, value=DEFAULT_SPEEDS["scroll"], label="Animation Speed")
-        font_size_slider = gr.Slider(minimum=1.0, maximum=10.0, step=0.1, value=1.5, label="Base Font Size")      
-        
-        gr.Markdown("### Credits Layout Settings")
-        layout_style_radio = gr.Radio(
-            ["stacked", "two-column"], label="Layout Style", value="stacked",
-            info="How to display titles and names."
-        )
-        swap_sizes_checkbox = gr.Checkbox(
-            label="Swap Title/Name Font Sizes", value=False,
-            info="Emphasize name over title in two-column layout.",
-            visible=False
-        )
-        title_uppercase_checkbox = gr.Checkbox(label="Title Uppercase", value=False)
-        name_uppercase_checkbox = gr.Checkbox(label="Name Uppercase", value=False)
-        section_title_uppercase_checkbox = gr.Checkbox(label="Section Uppercase", value=True)
-        
-        gr.Markdown("### Intro Text")
-        intro_title_input = gr.Textbox(label="Intro Title", value="Gradio")
-        intro_subtitle_input = gr.Textbox(label="Intro Subtitle", value="The best UI framework")
-
-        gr.Markdown("### Layout & Visibility")
-        sidebar_position_radio = gr.Radio(["right", "bottom"], label="Sidebar Position", value="right")
-        show_logo_checkbox = gr.Checkbox(label="Show Logo", value=True)
-        show_licenses_checkbox = gr.Checkbox(label="Show Licenses", value=True)
-        show_credits_checkbox = gr.Checkbox(label="Show Credits", value=True)
-        
-        gr.Markdown("### Logo Customization")
-        logo_position_radio = gr.Radio(["left", "center", "right"], label="Logo Position", value="center")
-        logo_sizing_radio = gr.Radio(["stretch", "crop", "resize"], label="Logo Sizing", value="resize")
-        logo_width_input = gr.Textbox(label="Logo Width", value="200px")
-        logo_height_input = gr.Textbox(label="Logo Height", value="100px")
-
-        gr.Markdown("### Color Settings (Scroll Effect)")
-        scroll_background_color = gr.ColorPicker(label="Background Color", value="#000000")
-        scroll_title_color = gr.ColorPicker(label="Title Color", value="#FFFFFF")
-        scroll_name_color = gr.ColorPicker(label="Name Color", value="#FFFFFF")
-
-    panel = CreditsPanel(
-        credits=credits_list,
-        licenses=license_paths,
-        effect="scroll",
-        height=500,
-        speed=DEFAULT_SPEEDS["scroll"],
-        base_font_size=1.5,
-        intro_title="Gradio",
-        intro_subtitle="The best UI framework",
-        sidebar_position="right",
-        logo_path="src/assets/logo.webp",
-        show_logo=True,
-        show_licenses=True,
-        show_credits=True,
-        logo_position="center",
-        logo_sizing="resize",
-        logo_width="200px",
-        logo_height="100px",
-        scroll_background_color="#000000",
-        scroll_title_color="#FFFFFF",
-        scroll_name_color="#FFFFFF",       
-        layout_style="stacked",
-        title_uppercase=False,
-        name_uppercase=False,
-        section_title_uppercase=True,
-        swap_font_sizes_on_two_column=False,
-    )
-
-    inputs = [
-        effect_radio, 
-        speed_slider, 
-        font_size_slider,
-        intro_title_input, 
-        intro_subtitle_input,
-        sidebar_position_radio, 
-        show_logo_checkbox, 
-        show_licenses_checkbox,
-        show_credits_checkbox, 
-        logo_position_radio, 
-        logo_sizing_radio, 
-        logo_width_input, 
-        logo_height_input,
-        scroll_background_color, 
-        scroll_title_color, 
-        scroll_name_color,        
-        layout_style_radio, 
-        title_uppercase_checkbox, 
-        name_uppercase_checkbox,
-        section_title_uppercase_checkbox,
-        swap_sizes_checkbox
-    ]
-
-    layout_style_radio.change(
-        fn=toggle_swap_checkbox_visibility,
-        inputs=layout_style_radio,
-        outputs=swap_sizes_checkbox
-    )
-    effect_radio.change(fn=update_ui_on_effect_change, inputs=effect_radio, outputs=[speed_slider, font_size_slider])
-
-    for input_component in inputs:
-        input_component.change(fn=update_panel, inputs=inputs, outputs=panel)
-
-if __name__ == "__main__":
-    setup_demo_files()
+# app.py
+
+import gradio as gr
+from gradio_creditspanel import CreditsPanel
+import os
+
+def setup_demo_files():
+    """Creates necessary directories and dummy files for the demo."""
+    os.makedirs("LICENSES", exist_ok=True)
+    if not os.path.exists("LICENSES/Apache.txt"):
+        with open("LICENSES/Apache.txt", "w") as f:
+            f.write("Apache License\nVersion 2.0, January 2004...")
+    if not os.path.exists("LICENSES/MIT.txt"):
+        with open("LICENSES/MIT.txt", "w") as f:
+            f.write("MIT License\nCopyright (c) 2025 Author...")
+    os.makedirs("assets", exist_ok=True)
+    if not os.path.exists("./assets/logo.webp"):
+        with open("./assets/logo.webp", "w") as f:
+            f.write("Placeholder WebP logo")
+
+# --- Credits list with sections ---
+credits_list = [
+    {"section_title": "Project Leadership"},
+    {"title": "Project Manager", "name": "Emma Thompson"},
+    {"title": "Scrum Master", "name": "Ava Rodriguez"},
+    
+    {"section_title": "Development Team"},
+    {"title": "Lead Developer", "name": "John Doe"},
+    {"title": "Senior Backend Engineer", "name": "Michael Chen"},
+    {"title": "Frontend Developer", "name": "Sarah Johnson"},
+    {"title": "UI/UX Designer", "name": "Jane Smith"},
+    {"title": "Database Architect", "name": "Alex Ray"},
+    
+    {"section_title": "Quality & Operations"},
+    {"title": "DevOps Engineer", "name": "Liam Patel"},
+    {"title": "Quality Assurance Lead", "name": "Sam Wilson"},
+    {"title": "Test Automation Engineer", "name": "Olivia Brown"},
+]
+
+license_paths = {
+    "Gradio Framework": "./LICENSES/Apache.txt",
+    "This Component": "./LICENSES/MIT.txt"
+}
+
+DEFAULT_SPEEDS = {
+    "scroll": 40.0,
+    "starwars": 70.0,
+    "matrix": 40.0
+}
+SCROLL_LOGO_PATH = "./assets/gradio_logo_white.png"
+LOGO_PATH="./assets/logo.webp"
+
+def update_panel(
+    effect: str, 
+    speed: float, 
+    base_font_size: float,
+    intro_title: str, 
+    intro_subtitle: str, 
+    sidebar_position: str,
+    show_logo: bool, 
+    show_licenses: bool, 
+    show_credits: bool, 
+    logo_position: str, 
+    logo_sizing: str, 
+    logo_width: str | None, 
+    logo_height: str | None,
+    scroll_background_color: str | None, 
+    scroll_title_color: str | None, 
+    scroll_section_title_color: str | None,
+    scroll_name_color: str | None,    
+    layout_style: str, 
+    title_uppercase: bool, 
+    name_uppercase: bool, 
+    section_title_uppercase: bool,
+    swap_font_sizes: bool,
+    show_scroll_logo: bool,
+    scroll_logo_height: str | None
+) -> dict:
+    """Callback function that updates all properties of the CreditsPanel component."""
+        
+    scroll_logo_path = SCROLL_LOGO_PATH if show_scroll_logo else None
+    
+    if not scroll_logo_height:
+        scroll_logo_height = "120px"
+        
+    return {
+        "credits": credits_list,
+        "licenses": license_paths,
+        "effect": effect,
+        "speed": speed,
+        "base_font_size": base_font_size,
+        "intro_title": intro_title,
+        "intro_subtitle": intro_subtitle,
+        "sidebar_position": sidebar_position,
+        "logo_path": LOGO_PATH, 
+        "show_logo": show_logo,
+        "show_licenses": show_licenses,
+        "show_credits": show_credits,
+        "logo_position": logo_position,
+        "logo_sizing": logo_sizing,
+        "logo_width": logo_width,
+        "logo_height": logo_height,
+        "scroll_background_color": scroll_background_color,
+        "scroll_title_color": scroll_title_color,
+        "scroll_name_color": scroll_name_color,
+        "scroll_section_title_color": scroll_section_title_color,
+        "layout_style": layout_style,
+        "title_uppercase": title_uppercase,
+        "name_uppercase": name_uppercase,
+        "section_title_uppercase": section_title_uppercase,
+        "swap_font_sizes_on_two_column": swap_font_sizes,
+        "scroll_logo_path": scroll_logo_path,
+        "scroll_logo_height": scroll_logo_height,
+    }
+
+def update_ui_on_effect_change(effect: str) -> tuple[float, float]:
+    """Updates sliders to sensible defaults when the animation effect is changed."""
+    font_size = 1.5
+    if effect == "starwars":
+        font_size = 3.8
+    speed = DEFAULT_SPEEDS.get(effect, 40.0)
+    return speed, font_size
+
+def toggle_swap_checkbox_visibility(layout: str) -> dict:
+    """Show the swap checkbox only for the two-column layout."""
+    return gr.update(visible=(layout == 'two-column'))
+
+with gr.Blocks(theme=gr.themes.Ocean(), title="CreditsPanel Demo") as demo:
+    gr.Markdown(
+        """
+        # Interactive CreditsPanel Demo
+        Use the sidebar controls to customize the `CreditsPanel` component in real-time.
+        """
+    )
+
+    with gr.Sidebar(position="right"):
+        gr.Markdown("### Effects Settings")
+        effect_radio = gr.Radio(["scroll", "starwars", "matrix"], label="Animation Effect", value="scroll")
+        speed_slider = gr.Slider(minimum=5.0, maximum=100.0, step=1.0, value=DEFAULT_SPEEDS["scroll"], label="Animation Speed")
+        font_size_slider = gr.Slider(minimum=1.0, maximum=10.0, step=0.1, value=1.5, label="Base Font Size")      
+        
+        gr.Markdown("### Credits Layout Settings")
+        layout_style_radio = gr.Radio(
+            ["stacked", "two-column"], label="Layout Style", value="stacked",
+            info="How to display titles and names."
+        )
+        swap_sizes_checkbox = gr.Checkbox(
+            label="Swap Title/Name Font Sizes", value=False,
+            info="Emphasize name over title in two-column layout.",
+            visible=False
+        )
+        title_uppercase_checkbox = gr.Checkbox(label="Title Uppercase", value=False)
+        name_uppercase_checkbox = gr.Checkbox(label="Name Uppercase", value=False)
+        section_title_uppercase_checkbox = gr.Checkbox(label="Section Uppercase", value=True)
+        
+        gr.Markdown("### Scrolling Logo")
+        show_scroll_logo_checkbox = gr.Checkbox(
+            label="Show Logo in Credits Roll", 
+            value=True, 
+            info="Toggles the logo above the intro text."
+        )
+        scroll_logo_height_input = gr.Textbox(label="Scrolling Logo Height", value="100px")
+        
+        gr.Markdown("### Intro Text")
+        intro_title_input = gr.Textbox(label="Intro Title", value="Gradio")
+        intro_subtitle_input = gr.Textbox(label="Intro Subtitle", value="The best UI framework")
+
+        gr.Markdown("### Layout & Visibility")
+        sidebar_position_radio = gr.Radio(["right", "bottom"], label="Sidebar Position", value="right")
+        show_logo_checkbox = gr.Checkbox(label="Show Logo", value=True)
+        show_licenses_checkbox = gr.Checkbox(label="Show Licenses", value=True)
+        show_credits_checkbox = gr.Checkbox(label="Show Credits", value=True)
+        
+        gr.Markdown("### Logo Customization")
+        logo_position_radio = gr.Radio(["left", "center", "right"], label="Logo Position", value="center")
+        logo_sizing_radio = gr.Radio(["stretch", "crop", "resize"], label="Logo Sizing", value="resize")
+        logo_width_input = gr.Textbox(label="Logo Width", value="200px")
+        logo_height_input = gr.Textbox(label="Logo Height", value="100px")
+
+        gr.Markdown("### Color Settings (Scroll Effect)")
+        scroll_background_color = gr.ColorPicker(label="Background Color", value="#000000")
+        scroll_title_color = gr.ColorPicker(label="Title Color", value="#FFFFFF")
+        scroll_section_title_color = gr.ColorPicker(label="Section Title Color", value="#FFFFFF")
+        scroll_name_color = gr.ColorPicker(label="Name Color", value="#FFFFFF")
+
+    panel = CreditsPanel(       
+        height=500,
+        credits=credits_list,
+        licenses=license_paths,
+        effect="scroll",
+        speed=DEFAULT_SPEEDS["scroll"],
+        base_font_size=1.5,
+        intro_title="Gradio",
+        intro_subtitle="The best UI framework",
+        sidebar_position="right",
+        logo_path=LOGO_PATH,
+        show_logo=True,
+        show_licenses=True,
+        show_credits=True,
+        logo_position="center",
+        logo_sizing="resize",
+        logo_width="200px",
+        logo_height="100px",
+        scroll_background_color="#000000",
+        scroll_title_color="#FFFFFF",
+        scroll_name_color="#FFFFFF",       
+        scroll_section_title_color="#FFFFFF",
+        layout_style="stacked",
+        title_uppercase=False,
+        name_uppercase=False,
+        section_title_uppercase=True,
+        swap_font_sizes_on_two_column=False,
+        scroll_logo_path=SCROLL_LOGO_PATH,
+        scroll_logo_height="100px",
+    )
+
+    inputs = [
+        effect_radio, 
+        speed_slider, 
+        font_size_slider,
+        intro_title_input, 
+        intro_subtitle_input,
+        sidebar_position_radio, 
+        show_logo_checkbox, 
+        show_licenses_checkbox,
+        show_credits_checkbox, 
+        logo_position_radio, 
+        logo_sizing_radio, 
+        logo_width_input, 
+        logo_height_input,
+        scroll_background_color, 
+        scroll_title_color,
+        scroll_section_title_color, 
+        scroll_name_color,        
+        layout_style_radio, 
+        title_uppercase_checkbox, 
+        name_uppercase_checkbox,
+        section_title_uppercase_checkbox,
+        swap_sizes_checkbox,
+        show_scroll_logo_checkbox,
+        scroll_logo_height_input
+    ]
+
+    demo.load(
+        fn=update_panel,
+        inputs=inputs,
+        outputs=panel
+    )
+    layout_style_radio.change(
+        fn=toggle_swap_checkbox_visibility,
+        inputs=layout_style_radio,
+        outputs=swap_sizes_checkbox
+    )
+    effect_radio.change(fn=update_ui_on_effect_change, inputs=effect_radio, outputs=[speed_slider, font_size_slider])
+
+    for input_component in inputs:
+        input_component.change(fn=update_panel, inputs=inputs, outputs=panel)
+
+if __name__ == "__main__":
+    setup_demo_files()
     demo.launch()

space.py

@@ -3,7 +3,7 @@ import gradio as gr
 from app import demo as app
 import os
 
-_docs = {'CreditsPanel': {'description': 'A Gradio component for displaying credits with customizable visual effects, such as scrolling or Star Wars-style animations.\nSupports displaying a logo, licenses, and configurable text styling.\n\n    EVENTS (list): Supported events for the component, currently only `change`.', 'members': {'__init__': {'value': {'type': 'Any', 'default': 'None', 'description': None}, 'credits': {'type': 'typing.Union[\n    typing.List[typing.Dict[str, str]],\n    typing.Callable,\n    NoneType,\n][\n    typing.List[typing.Dict[str, str]][\n        typing.Dict[str, str][str, str]\n    ],\n    Callable,\n    None,\n]', 'default': 'None', 'description': None}, 'height': {'type': 'int | str | None', 'default': 'None', 'description': None}, 'width': {'type': 'int | str | None', 'default': 'None', 'description': None}, 'licenses': {'type': 'typing.Optional[typing.Dict[str, str | pathlib.Path]][\n    typing.Dict[str, str | pathlib.Path][\n        str, str | pathlib.Path\n    ],\n    None,\n]', 'default': 'None', 'description': None}, 'effect': {'type': '"scroll" | "starwars" | "matrix"', 'default': '"scroll"', 'description': None}, 'speed': {'type': 'float', 'default': '40.0', 'description': None}, 'base_font_size': {'type': 'float', 'default': '1.5', 'description': None}, 'intro_title': {'type': 'str | None', 'default': 'None', 'description': None}, 'intro_subtitle': {'type': 'str | None', 'default': 'None', 'description': None}, 'sidebar_position': {'type': '"right" | "bottom"', 'default': '"right"', 'description': None}, 'logo_path': {'type': 'str | pathlib.Path | None', 'default': 'None', 'description': None}, 'show_logo': {'type': 'bool', 'default': 'True', 'description': None}, 'show_licenses': {'type': 'bool', 'default': 'True', 'description': None}, 'show_credits': {'type': 'bool', 'default': 'True', 'description': None}, 'logo_position': {'type': '"center" | "left" | "right"', 'default': '"center"', 'description': None}, 'logo_sizing': {'type': '"stretch" | "crop" | "resize"', 'default': '"resize"', 'description': None}, 'logo_width': {'type': 'int | str | None', 'default': 'None', 'description': None}, 'logo_height': {'type': 'int | str | None', 'default': 'None', 'description': None}, 'scroll_background_color': {'type': 'str | None', 'default': 'None', 'description': None}, 'scroll_title_color': {'type': 'str | None', 'default': 'None', 'description': None}, 'scroll_name_color': {'type': 'str | None', 'default': 'None', 'description': None}, 'layout_style': {'type': '"stacked" | "two-column"', 'default': '"stacked"', 'description': None}, 'title_uppercase': {'type': 'bool', 'default': 'False', 'description': None}, 'name_uppercase': {'type': 'bool', 'default': 'False', 'description': None}, 'section_title_uppercase': {'type': 'bool', 'default': 'True', 'description': None}, 'swap_font_sizes_on_two_column': {'type': 'bool', 'default': 'False', 'description': None}, 'label': {'type': 'str | gradio.i18n.I18nData | None', 'default': 'None', 'description': None}, 'every': {'type': 'float | None', 'default': 'None', 'description': None}, 'inputs': {'type': 'typing.Union[\n    gradio.components.base.Component,\n    typing.Sequence[gradio.components.base.Component],\n    set[gradio.components.base.Component],\n    NoneType,\n][\n    gradio.components.base.Component,\n    typing.Sequence[gradio.components.base.Component][\n        gradio.components.base.Component\n    ],\n    set[gradio.components.base.Component],\n    None,\n]', 'default': 'None', 'description': None}, 'show_label': {'type': 'bool', 'default': 'False', 'description': None}, 'container': {'type': 'bool', 'default': 'True', 'description': None}, 'scale': {'type': 'int | None', 'default': 'None', 'description': None}, 'min_width': {'type': 'int', 'default': '160', 'description': None}, 'interactive': {'type': 'bool | None', 'default': 'None', 'description': None}, 'visible': {'type': 'bool', 'default': 'True', 'description': None}, 'elem_id': {'type': 'str | None', 'default': 'None', 'description': None}, 'elem_classes': {'type': 'list[str] | str | None', 'default': 'None', 'description': None}, 'render': {'type': 'bool', 'default': 'True', 'description': None}, 'key': {'type': 'int | str | tuple[int | str, Ellipsis] | None', 'default': 'None', 'description': None}, 'preserved_by_key': {'type': 'list[str] | str | None', 'default': '"value"', 'description': None}}, 'postprocess': {'value': {'type': 'Any', 'description': None}}, 'preprocess': {'return': {'type': 'typing.Optional[typing.Dict[str, typing.Any]][\n    typing.Dict[str, typing.Any][str, Any], None\n]', 'description': 'Dict[str, Any] | None: The input payload, returned unchanged.'}, 'value': None}}, 'events': {'change': {'type': None, 'default': None, 'description': 'Triggered when the value of the CreditsPanel changes either because of user input (e.g. a user types in a textbox) OR because of a function update (e.g. an image receives a value from the output of an event trigger). See `.input()` for a listener that is only triggered by user input.'}}}, '__meta__': {'additional_interfaces': {}, 'user_fn_refs': {'CreditsPanel': []}}}
+_docs = {'CreditsPanel': {'description': 'A Gradio component for displaying credits with customizable visual effects, such as scrolling or Star Wars-style animations.\nThis component is configured via a single dictionary `value` that holds all settings.\nIt supports displaying a logo, licenses, sections, and various text styling options.\n\n    EVENTS (list): Supported events for the component, currently only `change`.', 'members': {'__init__': {'value': {'type': 'typing.Optional[typing.Dict[str, typing.Any]][\n    typing.Dict[str, typing.Any][str, Any], None\n]', 'default': 'None', 'description': None}, 'height': {'type': 'int | str | None', 'default': 'None', 'description': None}, 'width': {'type': 'int | str | None', 'default': 'None', 'description': None}, 'credits': {'type': 'typing.Union[\n    typing.List[typing.Dict[str, str]],\n    typing.Callable,\n    NoneType,\n][\n    typing.List[typing.Dict[str, str]][\n        typing.Dict[str, str][str, str]\n    ],\n    Callable,\n    None,\n]', 'default': 'None', 'description': None}, 'licenses': {'type': 'typing.Optional[typing.Dict[str, str | pathlib.Path]][\n    typing.Dict[str, str | pathlib.Path][\n        str, str | pathlib.Path\n    ],\n    None,\n]', 'default': 'None', 'description': None}, 'effect': {'type': '"scroll" | "starwars" | "matrix"', 'default': '"scroll"', 'description': None}, 'speed': {'type': 'float', 'default': '40.0', 'description': None}, 'base_font_size': {'type': 'float', 'default': '1.5', 'description': None}, 'intro_title': {'type': 'str | None', 'default': 'None', 'description': None}, 'intro_subtitle': {'type': 'str | None', 'default': 'None', 'description': None}, 'sidebar_position': {'type': '"right" | "bottom"', 'default': '"right"', 'description': None}, 'logo_path': {'type': 'str | pathlib.Path | None', 'default': 'None', 'description': None}, 'show_logo': {'type': 'bool', 'default': 'True', 'description': None}, 'show_licenses': {'type': 'bool', 'default': 'True', 'description': None}, 'show_credits': {'type': 'bool', 'default': 'True', 'description': None}, 'logo_position': {'type': '"center" | "left" | "right"', 'default': '"center"', 'description': None}, 'logo_sizing': {'type': '"stretch" | "crop" | "resize"', 'default': '"resize"', 'description': None}, 'logo_width': {'type': 'int | str | None', 'default': 'None', 'description': None}, 'logo_height': {'type': 'int | str | None', 'default': 'None', 'description': None}, 'scroll_background_color': {'type': 'str | None', 'default': 'None', 'description': None}, 'scroll_title_color': {'type': 'str | None', 'default': 'None', 'description': None}, 'scroll_name_color': {'type': 'str | None', 'default': 'None', 'description': None}, 'scroll_section_title_color': {'type': 'str | None', 'default': 'None', 'description': None}, 'layout_style': {'type': '"stacked" | "two-column"', 'default': '"stacked"', 'description': None}, 'title_uppercase': {'type': 'bool', 'default': 'False', 'description': None}, 'name_uppercase': {'type': 'bool', 'default': 'False', 'description': None}, 'section_title_uppercase': {'type': 'bool', 'default': 'True', 'description': None}, 'swap_font_sizes_on_two_column': {'type': 'bool', 'default': 'False', 'description': None}, 'scroll_logo_path': {'type': 'str | pathlib.Path | None', 'default': 'None', 'description': None}, 'scroll_logo_height': {'type': 'str', 'default': '"120px"', 'description': None}, 'label': {'type': 'str | gradio.i18n.I18nData | None', 'default': 'None', 'description': None}, 'every': {'type': 'float | None', 'default': 'None', 'description': None}, 'inputs': {'type': 'typing.Union[\n    gradio.components.base.Component,\n    typing.Sequence[gradio.components.base.Component],\n    set[gradio.components.base.Component],\n    NoneType,\n][\n    gradio.components.base.Component,\n    typing.Sequence[gradio.components.base.Component][\n        gradio.components.base.Component\n    ],\n    set[gradio.components.base.Component],\n    None,\n]', 'default': 'None', 'description': None}, 'show_label': {'type': 'bool', 'default': 'False', 'description': None}, 'container': {'type': 'bool', 'default': 'True', 'description': None}, 'scale': {'type': 'int | None', 'default': 'None', 'description': None}, 'min_width': {'type': 'int', 'default': '160', 'description': None}, 'interactive': {'type': 'bool | None', 'default': 'None', 'description': None}, 'visible': {'type': 'bool', 'default': 'True', 'description': None}, 'elem_id': {'type': 'str | None', 'default': 'None', 'description': None}, 'elem_classes': {'type': 'list[str] | str | None', 'default': 'None', 'description': None}, 'render': {'type': 'bool', 'default': 'True', 'description': None}, 'key': {'type': 'int | str | tuple[int | str, Ellipsis] | None', 'default': 'None', 'description': None}, 'preserved_by_key': {'type': 'list[str] | str | None', 'default': '"value"', 'description': None}}, 'postprocess': {'value': {'type': 'typing.Optional[typing.Dict[str, typing.Any]][\n    typing.Dict[str, typing.Any][str, Any], None\n]', 'description': None}}, 'preprocess': {'return': {'type': 'typing.Optional[typing.Dict[str, typing.Any]][\n    typing.Dict[str, typing.Any][str, Any], None\n]', 'description': None}, 'value': None}}, 'events': {'change': {'type': None, 'default': None, 'description': 'Triggered when the value of the CreditsPanel changes either because of user input (e.g. a user types in a textbox) OR because of a function update (e.g. an image receives a value from the output of an event trigger). See `.input()` for a listener that is only triggered by user input.'}}}, '__meta__': {'additional_interfaces': {}, 'user_fn_refs': {'CreditsPanel': []}}}
 
 abs_path = os.path.join(os.path.dirname(__file__), "css.css")
 
@@ -58,7 +58,7 @@ def setup_demo_files():
         with open("./assets/logo.webp", "w") as f:
             f.write("Placeholder WebP logo")
 
-# --- UPDATED: Credits list with sections ---
+# --- Credits list with sections ---
 credits_list = [
     {"section_title": "Project Leadership"},
     {"title": "Project Manager", "name": "Emma Thompson"},
@@ -87,6 +87,8 @@ DEFAULT_SPEEDS = {
     "starwars": 70.0,
     "matrix": 40.0
 }
+SCROLL_LOGO_PATH = "./assets/gradio_logo_white.png"
+LOGO_PATH="./assets/logo.webp"
 
 def update_panel(
     effect: str, 
@@ -104,39 +106,52 @@ def update_panel(
     logo_height: str | None,
     scroll_background_color: str | None, 
     scroll_title_color: str | None, 
+    scroll_section_title_color: str | None,
     scroll_name_color: str | None,    
     layout_style: str, 
     title_uppercase: bool, 
     name_uppercase: bool, 
     section_title_uppercase: bool,
-    swap_font_sizes: bool
+    swap_font_sizes: bool,
+    show_scroll_logo: bool,
+    scroll_logo_height: str | None
 ) -> dict:
     \"\"\"Callback function that updates all properties of the CreditsPanel component.\"\"\"
-    return gr.update(
-        visible=True,
-        effect=effect, 
-        speed=speed, 
-        base_font_size=base_font_size,
-        intro_title=intro_title, 
-        intro_subtitle=intro_subtitle,
-        sidebar_position=sidebar_position, 
-        show_logo=show_logo,
-        show_licenses=show_licenses, 
-        show_credits=show_credits,
-        logo_position=logo_position, 
-        logo_sizing=logo_sizing,
-        logo_width=logo_width, 
-        logo_height=logo_height,
-        scroll_background_color=scroll_background_color,
-        scroll_title_color=scroll_title_color,
-        scroll_name_color=scroll_name_color,        
-        layout_style=layout_style,
-        title_uppercase=title_uppercase,
-        name_uppercase=name_uppercase,
-        section_title_uppercase=section_title_uppercase,
-        swap_font_sizes_on_two_column=swap_font_sizes,
-        value=credits_list
-    )
+        
+    scroll_logo_path = SCROLL_LOGO_PATH if show_scroll_logo else None
+    
+    if not scroll_logo_height:
+        scroll_logo_height = "120px"
+        
+    return {
+        "credits": credits_list,
+        "licenses": license_paths,
+        "effect": effect,
+        "speed": speed,
+        "base_font_size": base_font_size,
+        "intro_title": intro_title,
+        "intro_subtitle": intro_subtitle,
+        "sidebar_position": sidebar_position,
+        "logo_path": LOGO_PATH, 
+        "show_logo": show_logo,
+        "show_licenses": show_licenses,
+        "show_credits": show_credits,
+        "logo_position": logo_position,
+        "logo_sizing": logo_sizing,
+        "logo_width": logo_width,
+        "logo_height": logo_height,
+        "scroll_background_color": scroll_background_color,
+        "scroll_title_color": scroll_title_color,
+        "scroll_name_color": scroll_name_color,
+        "scroll_section_title_color": scroll_section_title_color,
+        "layout_style": layout_style,
+        "title_uppercase": title_uppercase,
+        "name_uppercase": name_uppercase,
+        "section_title_uppercase": section_title_uppercase,
+        "swap_font_sizes_on_two_column": swap_font_sizes,
+        "scroll_logo_path": scroll_logo_path,
+        "scroll_logo_height": scroll_logo_height,
+    }
 
 def update_ui_on_effect_change(effect: str) -> tuple[float, float]:
     \"\"\"Updates sliders to sensible defaults when the animation effect is changed.\"\"\"
@@ -178,6 +193,14 @@ with gr.Blocks(theme=gr.themes.Ocean(), title="CreditsPanel Demo") as demo:
         name_uppercase_checkbox = gr.Checkbox(label="Name Uppercase", value=False)
         section_title_uppercase_checkbox = gr.Checkbox(label="Section Uppercase", value=True)
         
+        gr.Markdown("### Scrolling Logo")
+        show_scroll_logo_checkbox = gr.Checkbox(
+            label="Show Logo in Credits Roll", 
+            value=True, 
+            info="Toggles the logo above the intro text."
+        )
+        scroll_logo_height_input = gr.Textbox(label="Scrolling Logo Height", value="100px")
+        
         gr.Markdown("### Intro Text")
         intro_title_input = gr.Textbox(label="Intro Title", value="Gradio")
         intro_subtitle_input = gr.Textbox(label="Intro Subtitle", value="The best UI framework")
@@ -197,19 +220,20 @@ with gr.Blocks(theme=gr.themes.Ocean(), title="CreditsPanel Demo") as demo:
         gr.Markdown("### Color Settings (Scroll Effect)")
         scroll_background_color = gr.ColorPicker(label="Background Color", value="#000000")
         scroll_title_color = gr.ColorPicker(label="Title Color", value="#FFFFFF")
+        scroll_section_title_color = gr.ColorPicker(label="Section Title Color", value="#FFFFFF")
         scroll_name_color = gr.ColorPicker(label="Name Color", value="#FFFFFF")
 
-    panel = CreditsPanel(
+    panel = CreditsPanel(       
+        height=500,
         credits=credits_list,
         licenses=license_paths,
         effect="scroll",
-        height=500,
         speed=DEFAULT_SPEEDS["scroll"],
         base_font_size=1.5,
         intro_title="Gradio",
         intro_subtitle="The best UI framework",
         sidebar_position="right",
-        logo_path="./assets/logo.webp",
+        logo_path=LOGO_PATH,
         show_logo=True,
         show_licenses=True,
         show_credits=True,
@@ -220,11 +244,14 @@ with gr.Blocks(theme=gr.themes.Ocean(), title="CreditsPanel Demo") as demo:
         scroll_background_color="#000000",
         scroll_title_color="#FFFFFF",
         scroll_name_color="#FFFFFF",       
+        scroll_section_title_color="#FFFFFF",
         layout_style="stacked",
         title_uppercase=False,
         name_uppercase=False,
         section_title_uppercase=True,
         swap_font_sizes_on_two_column=False,
+        scroll_logo_path=SCROLL_LOGO_PATH,
+        scroll_logo_height="100px",
     )
 
     inputs = [
@@ -242,15 +269,23 @@ with gr.Blocks(theme=gr.themes.Ocean(), title="CreditsPanel Demo") as demo:
         logo_width_input, 
         logo_height_input,
         scroll_background_color, 
-        scroll_title_color, 
+        scroll_title_color,
+        scroll_section_title_color, 
         scroll_name_color,        
         layout_style_radio, 
         title_uppercase_checkbox, 
         name_uppercase_checkbox,
         section_title_uppercase_checkbox,
-        swap_sizes_checkbox
+        swap_sizes_checkbox,
+        show_scroll_logo_checkbox,
+        scroll_logo_height_input
     ]
 
+    demo.load(
+        fn=update_panel,
+        inputs=inputs,
+        outputs=panel
+    )
     layout_style_radio.change(
         fn=toggle_swap_checkbox_visibility,
         inputs=layout_style_radio,
@@ -294,7 +329,6 @@ The impact on the users predict function varies depending on whether the compone
 
 The code snippet below is accurate in cases where the component is used as both an input and an output.
 
-- **As input:** Is passed, dict[str, Any] | None: The input payload, returned unchanged.
 
 
  ```python
@@ -302,7 +336,9 @@ def predict(
     value: typing.Optional[typing.Dict[str, typing.Any]][
     typing.Dict[str, typing.Any][str, Any], None
 ]
-) -> Any:
+) -> typing.Optional[typing.Dict[str, typing.Any]][
+    typing.Dict[str, typing.Any][str, Any], None
+]:
     return value
 ```
 """, elem_classes=["md-custom", "CreditsPanel-user-fn"], header_links=True)

src/README.md

@@ -10,7 +10,8 @@ app_file: space.py
 ---
 
 # `gradio_creditspanel`
-<a href="https://pypi.org/project/gradio_creditspanel/" target="_blank"><img alt="PyPI - Version" src="https://img.shields.io/pypi/v/gradio_creditspanel"></a>  
+<img alt="Static Badge" src="https://img.shields.io/badge/version%20-%200.0.4%20-%20blue"> <a href="https://huggingface.co/spaces/elismasilva/gradio_creditspanel"><img src="https://img.shields.io/badge/%F0%9F%A4%97%20Hugging%20Face-Demo-blue"></a><p><span>💻 <a href='https://github.com/DEVAIEXP/gradio_component_creditspanel'>Component GitHub Code</a></span></p>
+
 
 Credits Panel for Gradio UI
 
@@ -43,7 +44,7 @@ def setup_demo_files():
         with open("./assets/logo.webp", "w") as f:
             f.write("Placeholder WebP logo")
 
-# --- UPDATED: Credits list with sections ---
+# --- Credits list with sections ---
 credits_list = [
     {"section_title": "Project Leadership"},
     {"title": "Project Manager", "name": "Emma Thompson"},
@@ -72,6 +73,8 @@ DEFAULT_SPEEDS = {
     "starwars": 70.0,
     "matrix": 40.0
 }
+SCROLL_LOGO_PATH = "./assets/gradio_logo_white.png"
+LOGO_PATH="./assets/logo.webp"
 
 def update_panel(
     effect: str, 
@@ -89,39 +92,52 @@ def update_panel(
     logo_height: str | None,
     scroll_background_color: str | None, 
     scroll_title_color: str | None, 
+    scroll_section_title_color: str | None,
     scroll_name_color: str | None,    
     layout_style: str, 
     title_uppercase: bool, 
     name_uppercase: bool, 
     section_title_uppercase: bool,
-    swap_font_sizes: bool
+    swap_font_sizes: bool,
+    show_scroll_logo: bool,
+    scroll_logo_height: str | None
 ) -> dict:
     """Callback function that updates all properties of the CreditsPanel component."""
-    return gr.update(
-        visible=True,
-        effect=effect, 
-        speed=speed, 
-        base_font_size=base_font_size,
-        intro_title=intro_title, 
-        intro_subtitle=intro_subtitle,
-        sidebar_position=sidebar_position, 
-        show_logo=show_logo,
-        show_licenses=show_licenses, 
-        show_credits=show_credits,
-        logo_position=logo_position, 
-        logo_sizing=logo_sizing,
-        logo_width=logo_width, 
-        logo_height=logo_height,
-        scroll_background_color=scroll_background_color,
-        scroll_title_color=scroll_title_color,
-        scroll_name_color=scroll_name_color,        
-        layout_style=layout_style,
-        title_uppercase=title_uppercase,
-        name_uppercase=name_uppercase,
-        section_title_uppercase=section_title_uppercase,
-        swap_font_sizes_on_two_column=swap_font_sizes,
-        value=credits_list
-    )
+        
+    scroll_logo_path = SCROLL_LOGO_PATH if show_scroll_logo else None
+    
+    if not scroll_logo_height:
+        scroll_logo_height = "120px"
+        
+    return {
+        "credits": credits_list,
+        "licenses": license_paths,
+        "effect": effect,
+        "speed": speed,
+        "base_font_size": base_font_size,
+        "intro_title": intro_title,
+        "intro_subtitle": intro_subtitle,
+        "sidebar_position": sidebar_position,
+        "logo_path": LOGO_PATH, 
+        "show_logo": show_logo,
+        "show_licenses": show_licenses,
+        "show_credits": show_credits,
+        "logo_position": logo_position,
+        "logo_sizing": logo_sizing,
+        "logo_width": logo_width,
+        "logo_height": logo_height,
+        "scroll_background_color": scroll_background_color,
+        "scroll_title_color": scroll_title_color,
+        "scroll_name_color": scroll_name_color,
+        "scroll_section_title_color": scroll_section_title_color,
+        "layout_style": layout_style,
+        "title_uppercase": title_uppercase,
+        "name_uppercase": name_uppercase,
+        "section_title_uppercase": section_title_uppercase,
+        "swap_font_sizes_on_two_column": swap_font_sizes,
+        "scroll_logo_path": scroll_logo_path,
+        "scroll_logo_height": scroll_logo_height,
+    }
 
 def update_ui_on_effect_change(effect: str) -> tuple[float, float]:
     """Updates sliders to sensible defaults when the animation effect is changed."""
@@ -163,6 +179,14 @@ with gr.Blocks(theme=gr.themes.Ocean(), title="CreditsPanel Demo") as demo:
         name_uppercase_checkbox = gr.Checkbox(label="Name Uppercase", value=False)
         section_title_uppercase_checkbox = gr.Checkbox(label="Section Uppercase", value=True)
         
+        gr.Markdown("### Scrolling Logo")
+        show_scroll_logo_checkbox = gr.Checkbox(
+            label="Show Logo in Credits Roll", 
+            value=True, 
+            info="Toggles the logo above the intro text."
+        )
+        scroll_logo_height_input = gr.Textbox(label="Scrolling Logo Height", value="100px")
+        
         gr.Markdown("### Intro Text")
         intro_title_input = gr.Textbox(label="Intro Title", value="Gradio")
         intro_subtitle_input = gr.Textbox(label="Intro Subtitle", value="The best UI framework")
@@ -182,19 +206,20 @@ with gr.Blocks(theme=gr.themes.Ocean(), title="CreditsPanel Demo") as demo:
         gr.Markdown("### Color Settings (Scroll Effect)")
         scroll_background_color = gr.ColorPicker(label="Background Color", value="#000000")
         scroll_title_color = gr.ColorPicker(label="Title Color", value="#FFFFFF")
+        scroll_section_title_color = gr.ColorPicker(label="Section Title Color", value="#FFFFFF")
         scroll_name_color = gr.ColorPicker(label="Name Color", value="#FFFFFF")
 
-    panel = CreditsPanel(
+    panel = CreditsPanel(       
+        height=500,
         credits=credits_list,
         licenses=license_paths,
         effect="scroll",
-        height=500,
         speed=DEFAULT_SPEEDS["scroll"],
         base_font_size=1.5,
         intro_title="Gradio",
         intro_subtitle="The best UI framework",
         sidebar_position="right",
-        logo_path="./assets/logo.webp",
+        logo_path=LOGO_PATH,
         show_logo=True,
         show_licenses=True,
         show_credits=True,
@@ -205,11 +230,14 @@ with gr.Blocks(theme=gr.themes.Ocean(), title="CreditsPanel Demo") as demo:
         scroll_background_color="#000000",
         scroll_title_color="#FFFFFF",
         scroll_name_color="#FFFFFF",       
+        scroll_section_title_color="#FFFFFF",
         layout_style="stacked",
         title_uppercase=False,
         name_uppercase=False,
         section_title_uppercase=True,
         swap_font_sizes_on_two_column=False,
+        scroll_logo_path=SCROLL_LOGO_PATH,
+        scroll_logo_height="100px",
     )
 
     inputs = [
@@ -227,15 +255,23 @@ with gr.Blocks(theme=gr.themes.Ocean(), title="CreditsPanel Demo") as demo:
         logo_width_input, 
         logo_height_input,
         scroll_background_color, 
-        scroll_title_color, 
+        scroll_title_color,
+        scroll_section_title_color, 
         scroll_name_color,        
         layout_style_radio, 
         title_uppercase_checkbox, 
         name_uppercase_checkbox,
         section_title_uppercase_checkbox,
-        swap_sizes_checkbox
+        swap_sizes_checkbox,
+        show_scroll_logo_checkbox,
+        scroll_logo_height_input
     ]
 
+    demo.load(
+        fn=update_panel,
+        inputs=inputs,
+        outputs=panel
+    )
     layout_style_radio.change(
         fn=toggle_swap_checkbox_visibility,
         inputs=layout_style_radio,
@@ -270,7 +306,9 @@ if __name__ == "__main__":
 <td align="left" style="width: 25%;">
 
 ```python
-Any
+typing.Optional[typing.Dict[str, typing.Any]][
+    typing.Dict[str, typing.Any][str, Any], None
+]
 ```
 
 </td>
@@ -279,21 +317,11 @@ Any
 </tr>
 
 <tr>
-<td align="left"><code>credits</code></td>
+<td align="left"><code>height</code></td>
 <td align="left" style="width: 25%;">
 
 ```python
-typing.Union[
-    typing.List[typing.Dict[str, str]],
-    typing.Callable,
-    NoneType,
-][
-    typing.List[typing.Dict[str, str]][
-        typing.Dict[str, str][str, str]
-    ],
-    Callable,
-    None,
-]
+int | str | None
 ```
 
 </td>
@@ -302,7 +330,7 @@ typing.Union[
 </tr>
 
 <tr>
-<td align="left"><code>height</code></td>
+<td align="left"><code>width</code></td>
 <td align="left" style="width: 25%;">
 
 ```python
@@ -315,11 +343,21 @@ int | str | None
 </tr>
 
 <tr>
-<td align="left"><code>width</code></td>
+<td align="left"><code>credits</code></td>
 <td align="left" style="width: 25%;">
 
 ```python
-int | str | None
+typing.Union[
+    typing.List[typing.Dict[str, str]],
+    typing.Callable,
+    NoneType,
+][
+    typing.List[typing.Dict[str, str]][
+        typing.Dict[str, str][str, str]
+    ],
+    Callable,
+    None,
+]
 ```
 
 </td>
@@ -566,6 +604,19 @@ str | None
 <td align="left">None</td>
 </tr>
 
+<tr>
+<td align="left"><code>scroll_section_title_color</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+str | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">None</td>
+</tr>
+
 <tr>
 <td align="left"><code>layout_style</code></td>
 <td align="left" style="width: 25%;">
@@ -631,6 +682,32 @@ bool
 <td align="left">None</td>
 </tr>
 
+<tr>
+<td align="left"><code>scroll_logo_path</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+str | pathlib.Path | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">None</td>
+</tr>
+
+<tr>
+<td align="left"><code>scroll_logo_height</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+str
+```
+
+</td>
+<td align="left"><code>"120px"</code></td>
+<td align="left">None</td>
+</tr>
+
 <tr>
 <td align="left"><code>label</code></td>
 <td align="left" style="width: 25%;">
@@ -844,7 +921,6 @@ The impact on the users predict function varies depending on whether the compone
 
 The code snippet below is accurate in cases where the component is used as both an input and an output.
 
-- **As output:** Is passed, dict[str, Any] | None: The input payload, returned unchanged.
 
 
  ```python
@@ -852,7 +928,9 @@ The code snippet below is accurate in cases where the component is used as both
      value: typing.Optional[typing.Dict[str, typing.Any]][
     typing.Dict[str, typing.Any][str, Any], None
 ]
- ) -> Any:
+ ) -> typing.Optional[typing.Dict[str, typing.Any]][
+    typing.Dict[str, typing.Any][str, Any], None
+]:
      return value
  ```
  

src/backend/gradio_creditspanel/creditspanel.py

@@ -13,7 +13,8 @@ import os
 class CreditsPanel(Component):
     """
     A Gradio component for displaying credits with customizable visual effects, such as scrolling or Star Wars-style animations.
-    Supports displaying a logo, licenses, and configurable text styling.
+    This component is configured via a single dictionary `value` that holds all settings.
+    It supports displaying a logo, licenses, sections, and various text styling options.
 
     Attributes:
         EVENTS (list): Supported events for the component, currently only `change`.
@@ -23,11 +24,13 @@ class CreditsPanel(Component):
 
     def __init__(
         self,
-        value: Any = None,
-        credits: List[Dict[str, str]] | Callable | None = None,
+        value: Dict[str, Any] | None = None,
         *,
+        # Structural parameters
         height: int | str | None = None,
         width: int | str | None = None,
+        # Configuration parameters (will be part of the `value` dictionary)
+        credits: List[Dict[str, str]] | Callable | None = None,
         licenses: Dict[str, str | Path] | None = None,
         effect: Literal["scroll", "starwars", "matrix"] = "scroll",
         speed: float = 40.0,
@@ -46,11 +49,15 @@ class CreditsPanel(Component):
         scroll_background_color: str | None = None,
         scroll_title_color: str | None = None,
         scroll_name_color: str | None = None,
+        scroll_section_title_color: str | None = None,
         layout_style: Literal["stacked", "two-column"] = "stacked",
         title_uppercase: bool = False,
         name_uppercase: bool = False,
         section_title_uppercase: bool = True,
         swap_font_sizes_on_two_column: bool = False,
+        scroll_logo_path: str | Path | None = None,
+        scroll_logo_height: str = "120px",
+        # Standard Gradio parameters
         label: str | I18nData | None = None,
         every: float | None = None,
         inputs: Component | Sequence[Component] | set[Component] | None = None,
@@ -70,74 +77,77 @@ class CreditsPanel(Component):
         Initialize the CreditsPanel component.
 
         Args:
-            value (Any, optional): Initial value for the component.
-            credits (List[Dict[str, str]] | Callable | None, optional): List of credits as dictionaries with 'title' and 'name' keys, or a callable that returns such a list.
-            height (int | str | None, optional): Height of the component (e.g., in pixels or CSS units).
-            width (int | str | None, optional): Width of the component (e.g., in pixels or CSS units).
-            licenses (Dict[str, str | Path] | None, optional): Dictionary mapping license names to file paths or content strings.
-            effect (Literal["scroll", "starwars", "matrix"], optional): Visual effect for credits display. Defaults to "scroll".
+            value (Dict[str, Any], optional): The dictionary containing the component's full configuration. 
+                                              If provided, it overrides all other configuration parameters.
+            height (int | str | None, optional): The structural height of the component.
+            width (int | str | None, optional): The structural width of the component.
+            credits (List[Dict[str, str]] | Callable | None, optional): List of credits, can include section headers.
+            licenses (Dict[str, str | Path] | None, optional): Dictionary mapping license names to file paths.
+            effect (Literal["scroll", "starwars", "matrix"], optional): Visual effect for the credits. Defaults to "scroll".
             speed (float, optional): Animation speed in seconds. Defaults to 40.0.
-            base_font_size (float, optional): Base font size in rem for credits text. Defaults to 1.5.
-            intro_title (str | None, optional): Title for the intro section, if any.
-            intro_subtitle (str | None, optional): Subtitle for the intro section, if any.
+            base_font_size (float, optional): Base font size in rem. Defaults to 1.5.
+            intro_title (str | None, optional): Title for the intro sequence.
+            intro_subtitle (str | None, optional): Subtitle for the intro sequence.
             sidebar_position (Literal["right", "bottom"], optional): Position of the licenses sidebar. Defaults to "right".
-            logo_path (str | Path | None, optional): Path or URL to the logo image.
-            show_logo (bool, optional): Whether to display the logo. Defaults to True.
+            logo_path (str | Path | None, optional): Path or URL to the main static logo.
+            show_logo (bool, optional): Whether to display the main logo. Defaults to True.
             show_licenses (bool, optional): Whether to display licenses. Defaults to True.
-            show_credits (bool, optional): Whether to display the credits. Defaults to True.
-            logo_position (Literal["center", "left", "right"], optional): Logo alignment. Defaults to "center".
-            logo_sizing (Literal["stretch", "crop", "resize"], optional): Logo sizing mode. Defaults to "resize".
-            logo_width (int | str | None, optional): Logo width (e.g., in pixels or CSS units).
-            logo_height (int | str | None, optional): Logo height (e.g., in pixels or CSS units).
-            scroll_background_color (str | None, optional): Background color for scroll effect.
+            show_credits (bool, optional): Whether to display the credits panel. Defaults to True.
+            logo_position (Literal["center", "left", "right"], optional): Main logo alignment. Defaults to "center".
+            logo_sizing (Literal["stretch", "crop", "resize"], optional): Main logo sizing mode. Defaults to "resize".
+            logo_width (int | str | None, optional): Main logo width.
+            logo_height (int | str | None, optional): Main logo height.
+            scroll_background_color (str | None, optional): Background color for the scroll effect.
             scroll_title_color (str | None, optional): Color for credit titles.
             scroll_name_color (str | None, optional): Color for credit names.
-            layout_style (Literal["stacked", "two-column"], optional): Layout for credits ('title' above 'name' or side-by-side). Defaults to "stacked".
+            scroll_section_title_color (str | None, optional): Color for section titles in the scroll effect.
+            layout_style (Literal["stacked", "two-column"], optional): Layout for credits. Defaults to "stacked".
             title_uppercase (bool, optional): Whether to display titles in uppercase. Defaults to False.
-            name_uppercase (bool, optional): Whether to display names in uppercase. Defaults to False.            
+            name_uppercase (bool, optional): Whether to display names in uppercase. Defaults to False.
             section_title_uppercase (bool, optional): Whether to display section titles in uppercase. Defaults to True.
-            swap_font_sizes_on_two_column (bool, optional): If True and layout is 'two-column', swap the font sizes of title and name. Defaults to False.
-            label (str | I18nData | None, optional): Component label.
-            every (float | None, optional): Interval for periodic updates.
-            inputs (Component | Sequence[Component] | set[Component] | None, optional): Input components for events.
-            show_label (bool, optional): Whether to show the label. Defaults to False.
-            container (bool, optional): Whether to render in a container. Defaults to True.
-            scale (int | None, optional): Scaling factor for the component.
-            min_width (int, optional): Minimum width in pixels. Defaults to 160.
-            interactive (bool | None, optional): Whether the component is interactive.
-            visible (bool, optional): Whether the component is visible. Defaults to True.
-            elem_id (str | None, optional): Custom HTML element ID.
-            elem_classes (list[str] | str | None, optional): CSS classes for the component.
-            render (bool, optional): Whether to render the component. Defaults to True.
-            key (int | str | tuple[int | str, ...] | None, optional): Component key for state preservation.
-            preserved_by_key (list[str] | str | None, optional): Properties preserved by key. Defaults to "value".
+            swap_font_sizes_on_two_column (bool, optional): Swaps title and name font sizes in two-column layout. Defaults to False.
+            scroll_logo_path (str | Path | None, optional): Path or URL to a logo inside the scrolling credits.
+            scroll_logo_height (str, optional): The height of the scrolling logo. Defaults to "120px".
+            (Other standard Gradio arguments)
         """
+        # Structural parameters are stored directly on self.
         self.height = height
         self.width = width
-        self.credits_data = credits if credits is not None else []
-        self.licenses_paths = licenses or {}
-        self.effect = effect
-        self.speed = speed
-        self.base_font_size = base_font_size
-        self.intro_title = intro_title
-        self.intro_subtitle = intro_subtitle
-        self.sidebar_position = sidebar_position
-        self.logo_path = logo_path
-        self.show_logo = show_logo
-        self.show_licenses = show_licenses
-        self.show_credits = show_credits
-        self.logo_position = logo_position
-        self.logo_sizing = logo_sizing
-        self.logo_width = logo_width
-        self.logo_height = logo_height
-        self.scroll_background_color = scroll_background_color
-        self.scroll_title_color = scroll_title_color
-        self.scroll_name_color = scroll_name_color
-        self.layout_style = layout_style
-        self.title_uppercase = title_uppercase
-        self.name_uppercase = name_uppercase
-        self.section_title_uppercase = section_title_uppercase
-        self.swap_font_sizes_on_two_column = swap_font_sizes_on_two_column
+        
+        # All other configuration parameters are bundled into a dictionary.
+        # This dictionary is the component's main `value`.
+        self._config = {
+            "credits": credits if credits is not None else [],
+            "licenses": licenses or {},
+            "effect": effect,
+            "speed": speed,
+            "base_font_size": base_font_size,
+            "intro_title": intro_title,
+            "intro_subtitle": intro_subtitle,
+            "sidebar_position": sidebar_position,
+            "logo_path": logo_path,
+            "show_logo": show_logo,
+            "show_licenses": show_licenses,
+            "show_credits": show_credits,
+            "logo_position": logo_position,
+            "logo_sizing": logo_sizing,
+            "logo_width": logo_width,
+            "logo_height": logo_height,
+            "scroll_background_color": scroll_background_color,
+            "scroll_title_color": scroll_title_color,
+            "scroll_name_color": scroll_name_color,
+            "scroll_section_title_color": scroll_section_title_color,
+            "layout_style": layout_style,
+            "title_uppercase": title_uppercase,
+            "name_uppercase": name_uppercase,
+            "section_title_uppercase": section_title_uppercase,
+            "swap_font_sizes_on_two_column": swap_font_sizes_on_two_column,
+            "scroll_logo_path": scroll_logo_path,
+            "scroll_logo_height": scroll_logo_height,
+        }
+        
+        # If a `value` dictionary is passed directly, it overrides the individual parameters.
+        initial_value = value if value is not None else self._config
         
         super().__init__(
             label=label,
@@ -154,35 +164,14 @@ class CreditsPanel(Component):
             key=key,
             visible=visible,
             preserved_by_key=preserved_by_key,
-            value=value,
+            value=initial_value, # The component's state is its configuration dictionary.
         )
 
-    def _process_license_files(self) -> Dict[str, str]:
-        """
-        Process license files into a dictionary of name-content pairs.
-
-        Returns:
-            Dict[str, str]: Dictionary mapping license names to their content or error messages if loading fails.
-        """
-        processed = {}
-        for name, path in self.licenses_paths.items():
-            try:
-                with open(path, "r", encoding="utf-8") as f:
-                    processed[name] = f.read()
-            except Exception as e:
-                processed[name] = f"Error loading license file '{path}':\n{e}"
-        return processed
-
-    def _process_logo_path(self) -> Dict[str, Any] | None:
-        """
-        Process the logo path, handling both local files and URLs.
-
-        Returns:
-            Dict[str, Any] | None: Dictionary with logo details (path, url, orig_name, mime_type) or None if no logo_path is provided or the file is not found.
-        """
-        if not self.logo_path:
+    def _process_image_path(self, image_path: str | Path | None) -> Dict[str, Any] | None:
+        """Helper function to process an image path, handling local files and URLs."""
+        if not image_path:
             return None
-        path = str(self.logo_path)
+        path = str(image_path)
         if is_http_url_like(path):
             return {"path": None, "url": path, "orig_name": Path(path).name, "mime_type": None}
         if os.path.exists(path):
@@ -191,75 +180,55 @@ class CreditsPanel(Component):
 
     def preprocess(self, payload: Dict[str, Any] | None) -> Dict[str, Any] | None:
         """
-        Preprocess the input payload.
-
-        Args:
-            payload (Dict[str, Any] | None): Input data to preprocess.
-
-        Returns:
-            Dict[str, Any] | None: The input payload, returned unchanged.
+        Passes the payload from the frontend through, unmodified.
         """
         return payload
 
-    def postprocess(self, value: Any) -> Dict[str, Any] | None:
+    def postprocess(self, value: Dict[str, Any] | None) -> Dict[str, Any] | None:
         """
-        Postprocess the component's value to prepare data for rendering.
-
+        Processes the component's `value` dictionary to prepare data for the frontend.
+        This involves resolving file paths for licenses and images.
+        
         Args:
-            value (Any): Input value, typically a list of credits.
+            value (Dict[str, Any] | None): The component's configuration dictionary.
 
         Returns:
-            Dict[str, Any] | None: Dictionary containing processed credits, licenses, and configuration, or None if no credits or licenses are provided.
+            Dict[str, Any] | None: The processed dictionary ready to be sent to the frontend.
         """
-        credits_source = value if isinstance(value, list) else self.credits_data
-        if not credits_source and not self.licenses_paths:
+        if not value:
             return None
-        return {
-            "credits": credits_source,
-            "licenses": self._process_license_files() if self.show_licenses else {},
-            "effect": self.effect,
-            "speed": self.speed,
-            "base_font_size": self.base_font_size,
-            "intro_title": self.intro_title,
-            "intro_subtitle": self.intro_subtitle,
-            "sidebar_position": self.sidebar_position,
-            "logo_path": self._process_logo_path(),
-            "show_logo": self.show_logo,
-            "show_licenses": self.show_licenses,
-            "show_credits": self.show_credits,
-            "logo_position": self.logo_position,
-            "logo_sizing": self.logo_sizing,
-            "logo_width": self.logo_width,
-            "logo_height": self.logo_height,
-            "scroll_background_color": self.scroll_background_color,
-            "scroll_title_color": self.scroll_title_color,
-            "scroll_name_color": self.scroll_name_color,
-            "layout_style": self.layout_style,
-            "title_uppercase": self.title_uppercase,
-            "name_uppercase": self.name_uppercase,
-            "section_title_uppercase": self.section_title_uppercase,
-            "swap_font_sizes_on_two_column": self.swap_font_sizes_on_two_column,
-        }
+        
+        processed_value = value.copy()
+        
+        # Process license file paths from the 'licenses' dictionary
+        license_paths = processed_value.get("licenses", {})
+        processed_licenses = {}
+        if isinstance(license_paths, dict): # Check if licenses are in the expected format
+            for name, path in license_paths.items():
+                try:
+                    with open(path, "r", encoding="utf-8") as f:
+                        processed_licenses[name] = f.read()
+                except Exception as e:
+                    # Silently fail or log, to avoid crashing the app for a missing license file
+                    processed_licenses[name] = f"Error loading license file '{path}':\n{e}"
+        processed_value["licenses"] = processed_licenses
 
-    def api_info(self) -> Dict[str, Any]:
-        """
-        Provide API information for the component.
+        # Process image paths
+        processed_value["logo_path"] = self._process_image_path(processed_value.get("logo_path"))
+        processed_value["scroll_logo_path"] = self._process_image_path(processed_value.get("scroll_logo_path"))
 
-        Returns:
-            Dict[str, Any]: Dictionary indicating the component's data type ("object").
-        """
+        return processed_value
+    
+    def api_info(self) -> Dict[str, Any]:
+        """Returns API info for the component."""
         return {"type": "object"}
 
     def example_payload(self) -> Any:
-        """
-        Provide an example payload for the component.
-
-        Returns:
-            Dict[str, Any]: Example data structure for the component's payload.
-        """
+        """Returns an example payload for the component's API."""
+        # This now directly returns a dictionary matching the `value` structure.
         return {
-            "credits": [{"title": "Example", "name": "Credit"}],
-            "licenses": {},
+            "credits": [{"title": "API Example", "name": "Credit"}],
+            "licenses": {"MIT": "MIT License text..."},
             "effect": "scroll",
             "speed": 20,
             "sidebar_position": "right",
@@ -274,18 +243,17 @@ class CreditsPanel(Component):
             "scroll_background_color": None,
             "scroll_title_color": None,
             "scroll_name_color": None,
+            "scroll_section_title_color": None,
             "layout_style": "stacked",
             "title_uppercase": False,
             "name_uppercase": False,
             "section_title_uppercase": True,
             "swap_font_sizes_on_two_column": False,
+            "scroll_logo_path": None,
+            "scroll_logo_height": "120px",
         }
 
     def example_value(self) -> Any:
-        """
-        Provide an example value for the component.
-
-        Returns:
-            List[Dict[str, str]]: Example list of credits.
-        """
-        return [{"title": "Example", "name": "Credit"}]
+        """Returns an example value for the component."""
+        # The example value is now the entire configuration dictionary.
+        return self.example_payload()

src/backend/gradio_creditspanel/templates/component/style.css

@@ -1 +1 @@
-.block.svelte-239wnu{position:relative;margin:0;box-shadow:var(--block-shadow);border-width:var(--block-border-width);border-color:var(--block-border-color);border-radius:var(--block-radius);background:var(--block-background-fill);width:100%;line-height:var(--line-sm)}.block.fullscreen.svelte-239wnu{border-radius:0}.auto-margin.svelte-239wnu{margin-left:auto;margin-right:auto}.block.border_focus.svelte-239wnu{border-color:var(--color-accent)}.block.border_contrast.svelte-239wnu{border-color:var(--body-text-color)}.padded.svelte-239wnu{padding:var(--block-padding)}.hidden.svelte-239wnu{display:none}.flex.svelte-239wnu{display:flex;flex-direction:column}.hide-container.svelte-239wnu:not(.fullscreen){margin:0;box-shadow:none;--block-border-width:0;background:transparent;padding:0;overflow:visible}.resize-handle.svelte-239wnu{position:absolute;bottom:0;right:0;width:10px;height:10px;fill:var(--block-border-color);cursor:nwse-resize}.fullscreen.svelte-239wnu{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:1000;overflow:auto}.animating.svelte-239wnu{animation:svelte-239wnu-pop-out .1s ease-out forwards}@keyframes svelte-239wnu-pop-out{0%{position:fixed;top:var(--start-top);left:var(--start-left);width:var(--start-width);height:var(--start-height);z-index:100}to{position:fixed;top:0vh;left:0vw;width:100vw;height:100vh;z-index:1000}}.placeholder.svelte-239wnu{border-radius:var(--block-radius);border-width:var(--block-border-width);border-color:var(--block-border-color);border-style:dashed}Tables */ table,tr,td,th{margin-top:var(--spacing-sm);margin-bottom:var(--spacing-sm);padding:var(--spacing-xl)}.md code,.md pre{background:none;font-family:var(--font-mono);font-size:var(--text-sm);text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:2;tab-size:2;-webkit-hyphens:none;hyphens:none}.md pre[class*=language-]::selection,.md pre[class*=language-] ::selection,.md code[class*=language-]::selection,.md code[class*=language-] ::selection{text-shadow:none;background:#b3d4fc}.md pre{padding:1em;margin:.5em 0;overflow:auto;position:relative;margin-top:var(--spacing-sm);margin-bottom:var(--spacing-sm);box-shadow:none;border:none;border-radius:var(--radius-md);background:var(--code-background-fill);padding:var(--spacing-xxl);font-family:var(--font-mono);text-shadow:none;border-radius:var(--radius-sm);white-space:nowrap;display:block;white-space:pre}.md :not(pre)>code{padding:.1em;border-radius:var(--radius-xs);white-space:normal;background:var(--code-background-fill);border:1px solid var(--panel-border-color);padding:var(--spacing-xxs) var(--spacing-xs)}.md .token.comment,.md .token.prolog,.md .token.doctype,.md .token.cdata{color:#708090}.md .token.punctuation{color:#999}.md .token.namespace{opacity:.7}.md .token.property,.md .token.tag,.md .token.boolean,.md .token.number,.md .token.constant,.md .token.symbol,.md .token.deleted{color:#905}.md .token.selector,.md .token.attr-name,.md .token.string,.md .token.char,.md .token.builtin,.md .token.inserted{color:#690}.md .token.atrule,.md .token.attr-value,.md .token.keyword{color:#07a}.md .token.function,.md .token.class-name{color:#dd4a68}.md .token.regex,.md .token.important,.md .token.variable{color:#e90}.md .token.important,.md .token.bold{font-weight:700}.md .token.italic{font-style:italic}.md .token.entity{cursor:help}.dark .md .token.comment,.dark .md .token.prolog,.dark .md .token.cdata{color:#5c6370}.dark .md .token.doctype,.dark .md .token.punctuation,.dark .md .token.entity{color:#abb2bf}.dark .md .token.attr-name,.dark .md .token.class-name,.dark .md .token.boolean,.dark .md .token.constant,.dark .md .token.number,.dark .md .token.atrule{color:#d19a66}.dark .md .token.keyword{color:#c678dd}.dark .md .token.property,.dark .md .token.tag,.dark .md .token.symbol,.dark .md .token.deleted,.dark .md .token.important{color:#e06c75}.dark .md .token.selector,.dark .md .token.string,.dark .md .token.char,.dark .md .token.builtin,.dark .md .token.inserted,.dark .md .token.regex,.dark .md .token.attr-value,.dark .md .token.attr-value>.token.punctuation{color:#98c379}.dark .md .token.variable,.dark .md .token.operator,.dark .md .token.function{color:#61afef}.dark .md .token.url{color:#56b6c2}span.svelte-1m32c2s div[class*=code_wrap]{position:relative}span.svelte-1m32c2s span.katex{font-size:var(--text-lg);direction:ltr}span.svelte-1m32c2s div[class*=code_wrap]>button{z-index:1;cursor:pointer;border-bottom-left-radius:var(--radius-sm);padding:var(--spacing-md);width:25px;height:25px;position:absolute;right:0}span.svelte-1m32c2s .check{opacity:0;z-index:var(--layer-top);transition:opacity .2s;background:var(--code-background-fill);color:var(--body-text-color);position:absolute;top:var(--size-1-5);left:var(--size-1-5)}span.svelte-1m32c2s p:not(:first-child){margin-top:var(--spacing-xxl)}span.svelte-1m32c2s .md-header-anchor{margin-left:-25px;padding-right:8px;line-height:1;color:var(--body-text-color-subdued);opacity:0}span.svelte-1m32c2s h1:hover .md-header-anchor,span.svelte-1m32c2s h2:hover .md-header-anchor,span.svelte-1m32c2s h3:hover .md-header-anchor,span.svelte-1m32c2s h4:hover .md-header-anchor,span.svelte-1m32c2s h5:hover .md-header-anchor,span.svelte-1m32c2s h6:hover .md-header-anchor{opacity:1}span.md.svelte-1m32c2s .md-header-anchor>svg{color:var(--body-text-color-subdued)}span.svelte-1m32c2s table{word-break:break-word}div.svelte-17qq50w>.md.prose{font-weight:var(--block-info-text-weight);font-size:var(--block-info-text-size);line-height:var(--line-sm)}div.svelte-17qq50w>.md.prose *{color:var(--block-info-text-color)}div.svelte-17qq50w{margin-bottom:var(--spacing-md)}span.has-info.svelte-zgrq3{margin-bottom:var(--spacing-xs)}span.svelte-zgrq3:not(.has-info){margin-bottom:var(--spacing-lg)}span.svelte-zgrq3{display:inline-block;position:relative;z-index:var(--layer-4);border:solid var(--block-title-border-width) var(--block-title-border-color);border-radius:var(--block-title-radius);background:var(--block-title-background-fill);padding:var(--block-title-padding);color:var(--block-title-text-color);font-weight:var(--block-title-text-weight);font-size:var(--block-title-text-size);line-height:var(--line-sm)}span[dir=rtl].svelte-zgrq3{display:block}.hide.svelte-zgrq3{margin:0;height:0}label.svelte-13ao5pu.svelte-13ao5pu{display:inline-flex;align-items:center;z-index:var(--layer-2);box-shadow:var(--block-label-shadow);border:var(--block-label-border-width) solid var(--block-label-border-color);border-top:none;border-left:none;border-radius:var(--block-label-radius);background:var(--block-label-background-fill);padding:var(--block-label-padding);pointer-events:none;color:var(--block-label-text-color);font-weight:var(--block-label-text-weight);font-size:var(--block-label-text-size);line-height:var(--line-sm)}.gr-group label.svelte-13ao5pu.svelte-13ao5pu{border-top-left-radius:0}label.float.svelte-13ao5pu.svelte-13ao5pu{position:absolute;top:var(--block-label-margin);left:var(--block-label-margin)}label.svelte-13ao5pu.svelte-13ao5pu:not(.float){position:static;margin-top:var(--block-label-margin);margin-left:var(--block-label-margin)}.hide.svelte-13ao5pu.svelte-13ao5pu{height:0}span.svelte-13ao5pu.svelte-13ao5pu{opacity:.8;margin-right:var(--size-2);width:calc(var(--block-label-text-size) - 1px);height:calc(var(--block-label-text-size) - 1px)}.hide-label.svelte-13ao5pu.svelte-13ao5pu{box-shadow:none;border-width:0;background:transparent;overflow:visible}label[dir=rtl].svelte-13ao5pu.svelte-13ao5pu{border:var(--block-label-border-width) solid var(--block-label-border-color);border-top:none;border-right:none;border-bottom-left-radius:var(--block-radius);border-bottom-right-radius:var(--block-label-radius);border-top-left-radius:var(--block-label-radius)}label[dir=rtl].svelte-13ao5pu span.svelte-13ao5pu{margin-left:var(--size-2);margin-right:0}button.svelte-qgco6m{display:flex;justify-content:center;align-items:center;gap:1px;z-index:var(--layer-2);border-radius:var(--radius-xs);color:var(--block-label-text-color);border:1px solid transparent;padding:var(--spacing-xxs)}button.svelte-qgco6m:hover{background-color:var(--background-fill-secondary)}button[disabled].svelte-qgco6m{opacity:.5;box-shadow:none}button[disabled].svelte-qgco6m:hover{cursor:not-allowed}.padded.svelte-qgco6m{background:var(--bg-color)}button.svelte-qgco6m:hover,button.highlight.svelte-qgco6m{cursor:pointer;color:var(--color-accent)}.padded.svelte-qgco6m:hover{color:var(--block-label-text-color)}span.svelte-qgco6m{padding:0 1px;font-size:10px}div.svelte-qgco6m{display:flex;align-items:center;justify-content:center;transition:filter .2s ease-in-out}.x-small.svelte-qgco6m{width:10px;height:10px}.small.svelte-qgco6m{width:14px;height:14px}.medium.svelte-qgco6m{width:20px;height:20px}.large.svelte-qgco6m{width:22px;height:22px}.pending.svelte-qgco6m{animation:svelte-qgco6m-flash .5s infinite}@keyframes svelte-qgco6m-flash{0%{opacity:.5}50%{opacity:1}to{opacity:.5}}.transparent.svelte-qgco6m{background:transparent;border:none;box-shadow:none}.empty.svelte-3w3rth{display:flex;justify-content:center;align-items:center;margin-top:calc(0px - var(--size-6));height:var(--size-full)}.icon.svelte-3w3rth{opacity:.5;height:var(--size-5);color:var(--body-text-color)}.small.svelte-3w3rth{min-height:calc(var(--size-32) - 20px)}.large.svelte-3w3rth{min-height:calc(var(--size-64) - 20px)}.unpadded_box.svelte-3w3rth{margin-top:0}.small_parent.svelte-3w3rth{min-height:100%!important}.dropdown-arrow.svelte-145leq6,.dropdown-arrow.svelte-ihhdbf{fill:currentColor}.circle.svelte-ihhdbf{fill:currentColor;opacity:.1}svg.svelte-pb9pol{animation:svelte-pb9pol-spin 1.5s linear infinite}@keyframes svelte-pb9pol-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}h2.svelte-1xg7h5n{font-size:var(--text-xl)!important}p.svelte-1xg7h5n,h2.svelte-1xg7h5n{white-space:pre-line}.wrap.svelte-1xg7h5n{display:flex;flex-direction:column;justify-content:center;align-items:center;min-height:var(--size-60);color:var(--block-label-text-color);line-height:var(--line-md);height:100%;padding-top:var(--size-3);text-align:center;margin:auto var(--spacing-lg)}.or.svelte-1xg7h5n{color:var(--body-text-color-subdued);display:flex}.icon-wrap.svelte-1xg7h5n{width:30px;margin-bottom:var(--spacing-lg)}@media (--screen-md){.wrap.svelte-1xg7h5n{font-size:var(--text-lg)}}.hovered.svelte-1xg7h5n{color:var(--color-accent)}div.svelte-q32hvf{border-top:1px solid transparent;display:flex;max-height:100%;justify-content:center;align-items:center;gap:var(--spacing-sm);height:auto;align-items:flex-end;color:var(--block-label-text-color);flex-shrink:0}.show_border.svelte-q32hvf{border-top:1px solid var(--block-border-color);margin-top:var(--spacing-xxl);box-shadow:var(--shadow-drop)}.source-selection.svelte-15ls1gu{display:flex;align-items:center;justify-content:center;border-top:1px solid var(--border-color-primary);width:100%;margin-left:auto;margin-right:auto;height:var(--size-10)}.icon.svelte-15ls1gu{width:22px;height:22px;margin:var(--spacing-lg) var(--spacing-xs);padding:var(--spacing-xs);color:var(--neutral-400);border-radius:var(--radius-md)}.selected.svelte-15ls1gu{color:var(--color-accent)}.icon.svelte-15ls1gu:hover,.icon.svelte-15ls1gu:focus{color:var(--color-accent)}.icon-button-wrapper.svelte-1h0hs6p{display:flex;flex-direction:row;align-items:center;justify-content:center;z-index:var(--layer-2);gap:var(--spacing-sm);box-shadow:var(--shadow-drop);border:1px solid var(--border-color-primary);background:var(--block-background-fill);padding:var(--spacing-xxs)}.icon-button-wrapper.hide-top-corner.svelte-1h0hs6p{border-top:none;border-right:none;border-radius:var(--block-label-right-radius)}.icon-button-wrapper.display-top-corner.svelte-1h0hs6p{border-radius:var(--radius-sm) 0 0 var(--radius-sm);top:var(--spacing-sm);right:-1px}.icon-button-wrapper.svelte-1h0hs6p:not(.top-panel){border:1px solid var(--border-color-primary);border-radius:var(--radius-sm)}.top-panel.svelte-1h0hs6p{position:absolute;top:var(--block-label-margin);right:var(--block-label-margin);margin:0}.icon-button-wrapper.svelte-1h0hs6p button{margin:var(--spacing-xxs);border-radius:var(--radius-xs);position:relative}.icon-button-wrapper.svelte-1h0hs6p a.download-link:not(:last-child),.icon-button-wrapper.svelte-1h0hs6p button:not(:last-child){margin-right:var(--spacing-xxs)}.icon-button-wrapper.svelte-1h0hs6p a.download-link:not(:last-child):not(.no-border *):after,.icon-button-wrapper.svelte-1h0hs6p button:not(:last-child):not(.no-border *):after{content:"";position:absolute;right:-4.5px;top:15%;height:70%;width:1px;background-color:var(--border-color-primary)}.icon-button-wrapper.svelte-1h0hs6p>*{height:100%}svg.svelte-43sxxs.svelte-43sxxs{width:var(--size-20);height:var(--size-20)}svg.svelte-43sxxs path.svelte-43sxxs{fill:var(--loader-color)}div.svelte-43sxxs.svelte-43sxxs{z-index:var(--layer-2)}.margin.svelte-43sxxs.svelte-43sxxs{margin:var(--size-4)}.wrap.svelte-17v219f.svelte-17v219f{display:flex;flex-direction:column;justify-content:center;align-items:center;z-index:var(--layer-2);transition:opacity .1s ease-in-out;border-radius:var(--block-radius);background:var(--block-background-fill);padding:0 var(--size-6);max-height:var(--size-screen-h);overflow:hidden}.wrap.center.svelte-17v219f.svelte-17v219f{top:0;right:0;left:0}.wrap.default.svelte-17v219f.svelte-17v219f{top:0;right:0;bottom:0;left:0}.hide.svelte-17v219f.svelte-17v219f{opacity:0;pointer-events:none}.generating.svelte-17v219f.svelte-17v219f{animation:svelte-17v219f-pulseStart 1s cubic-bezier(.4,0,.6,1),svelte-17v219f-pulse 2s cubic-bezier(.4,0,.6,1) 1s infinite;border:2px solid var(--color-accent);background:transparent;z-index:var(--layer-1);pointer-events:none}.translucent.svelte-17v219f.svelte-17v219f{background:none}@keyframes svelte-17v219f-pulseStart{0%{opacity:0}to{opacity:1}}@keyframes svelte-17v219f-pulse{0%,to{opacity:1}50%{opacity:.5}}.loading.svelte-17v219f.svelte-17v219f{z-index:var(--layer-2);color:var(--body-text-color)}.eta-bar.svelte-17v219f.svelte-17v219f{position:absolute;top:0;right:0;bottom:0;left:0;transform-origin:left;opacity:.8;z-index:var(--layer-1);transition:10ms;background:var(--background-fill-secondary)}.progress-bar-wrap.svelte-17v219f.svelte-17v219f{border:1px solid var(--border-color-primary);background:var(--background-fill-primary);width:55.5%;height:var(--size-4)}.progress-bar.svelte-17v219f.svelte-17v219f{transform-origin:left;background-color:var(--loader-color);width:var(--size-full);height:var(--size-full)}.progress-level.svelte-17v219f.svelte-17v219f{display:flex;flex-direction:column;align-items:center;gap:1;z-index:var(--layer-2);width:var(--size-full)}.progress-level-inner.svelte-17v219f.svelte-17v219f{margin:var(--size-2) auto;color:var(--body-text-color);font-size:var(--text-sm);font-family:var(--font-mono)}.meta-text.svelte-17v219f.svelte-17v219f{position:absolute;bottom:0;right:0;z-index:var(--layer-2);padding:var(--size-1) var(--size-2);font-size:var(--text-sm);font-family:var(--font-mono)}.meta-text-center.svelte-17v219f.svelte-17v219f{display:flex;position:absolute;top:0;right:0;justify-content:center;align-items:center;transform:translateY(var(--size-6));z-index:var(--layer-2);padding:var(--size-1) var(--size-2);font-size:var(--text-sm);font-family:var(--font-mono);text-align:center}.error.svelte-17v219f.svelte-17v219f{box-shadow:var(--shadow-drop);border:solid 1px var(--error-border-color);border-radius:var(--radius-full);background:var(--error-background-fill);padding-right:var(--size-4);padding-left:var(--size-4);color:var(--error-text-color);font-weight:var(--weight-semibold);font-size:var(--text-lg);line-height:var(--line-lg);font-family:var(--font)}.minimal.svelte-17v219f.svelte-17v219f{pointer-events:none}.minimal.svelte-17v219f .progress-text.svelte-17v219f{background:var(--block-background-fill)}.border.svelte-17v219f.svelte-17v219f{border:1px solid var(--border-color-primary)}.clear-status.svelte-17v219f.svelte-17v219f{position:absolute;display:flex;top:var(--size-2);right:var(--size-2);justify-content:flex-end;gap:var(--spacing-sm);z-index:var(--layer-1)}.toast-body.svelte-syezpc{display:flex;position:relative;right:0;left:0;align-items:center;margin:var(--size-6) var(--size-4);margin:auto;border-radius:var(--container-radius);overflow:hidden;pointer-events:auto}.toast-body.error.svelte-syezpc{border:1px solid var(--color-red-700);background:var(--color-red-50)}.dark .toast-body.error.svelte-syezpc{border:1px solid var(--color-red-500);background-color:var(--color-grey-950)}.toast-body.warning.svelte-syezpc{border:1px solid var(--color-yellow-700);background:var(--color-yellow-50)}.dark .toast-body.warning.svelte-syezpc{border:1px solid var(--color-yellow-500);background-color:var(--color-grey-950)}.toast-body.info.svelte-syezpc{border:1px solid var(--color-grey-700);background:var(--color-grey-50)}.dark .toast-body.info.svelte-syezpc{border:1px solid var(--color-grey-500);background-color:var(--color-grey-950)}.toast-body.success.svelte-syezpc{border:1px solid var(--color-green-700);background:var(--color-green-50)}.dark .toast-body.success.svelte-syezpc{border:1px solid var(--color-green-500);background-color:var(--color-grey-950)}.toast-title.svelte-syezpc{display:flex;align-items:center;font-weight:var(--weight-bold);font-size:var(--text-lg);line-height:var(--line-sm)}.toast-title.error.svelte-syezpc{color:var(--color-red-700)}.dark .toast-title.error.svelte-syezpc{color:var(--color-red-50)}.toast-title.warning.svelte-syezpc{color:var(--color-yellow-700)}.dark .toast-title.warning.svelte-syezpc{color:var(--color-yellow-50)}.toast-title.info.svelte-syezpc{color:var(--color-grey-700)}.dark .toast-title.info.svelte-syezpc{color:var(--color-grey-50)}.toast-title.success.svelte-syezpc{color:var(--color-green-700)}.dark .toast-title.success.svelte-syezpc{color:var(--color-green-50)}.toast-close.svelte-syezpc{margin:0 var(--size-3);border-radius:var(--size-3);padding:0px var(--size-1-5);font-size:var(--size-5);line-height:var(--size-5)}.toast-close.error.svelte-syezpc{color:var(--color-red-700)}.dark .toast-close.error.svelte-syezpc{color:var(--color-red-500)}.toast-close.warning.svelte-syezpc{color:var(--color-yellow-700)}.dark .toast-close.warning.svelte-syezpc{color:var(--color-yellow-500)}.toast-close.info.svelte-syezpc{color:var(--color-grey-700)}.dark .toast-close.info.svelte-syezpc{color:var(--color-grey-500)}.toast-close.success.svelte-syezpc{color:var(--color-green-700)}.dark .toast-close.success.svelte-syezpc{color:var(--color-green-500)}.toast-text.svelte-syezpc{font-size:var(--text-lg);word-wrap:break-word;overflow-wrap:break-word;word-break:break-word}.toast-text.error.svelte-syezpc{color:var(--color-red-700)}.dark .toast-text.error.svelte-syezpc{color:var(--color-red-50)}.toast-text.warning.svelte-syezpc{color:var(--color-yellow-700)}.dark .toast-text.warning.svelte-syezpc{color:var(--color-yellow-50)}.toast-text.info.svelte-syezpc{color:var(--color-grey-700)}.dark .toast-text.info.svelte-syezpc{color:var(--color-grey-50)}.toast-text.success.svelte-syezpc{color:var(--color-green-700)}.dark .toast-text.success.svelte-syezpc{color:var(--color-green-50)}.toast-details.svelte-syezpc{margin:var(--size-3) var(--size-3) var(--size-3) 0;width:100%}.toast-icon.svelte-syezpc{display:flex;position:absolute;position:relative;flex-shrink:0;justify-content:center;align-items:center;margin:var(--size-2);border-radius:var(--radius-full);padding:var(--size-1);padding-left:calc(var(--size-1) - 1px);width:35px;height:35px}.toast-icon.error.svelte-syezpc{color:var(--color-red-700)}.dark .toast-icon.error.svelte-syezpc{color:var(--color-red-500)}.toast-icon.warning.svelte-syezpc{color:var(--color-yellow-700)}.dark .toast-icon.warning.svelte-syezpc{color:var(--color-yellow-500)}.toast-icon.info.svelte-syezpc{color:var(--color-grey-700)}.dark .toast-icon.info.svelte-syezpc{color:var(--color-grey-500)}.toast-icon.success.svelte-syezpc{color:var(--color-green-700)}.dark .toast-icon.success.svelte-syezpc{color:var(--color-green-500)}@keyframes svelte-syezpc-countdown{0%{transform:scaleX(1)}to{transform:scaleX(0)}}.timer.svelte-syezpc{position:absolute;bottom:0;left:0;transform-origin:0 0;animation:svelte-syezpc-countdown 10s linear forwards;width:100%;height:var(--size-1)}.timer.error.svelte-syezpc{background:var(--color-red-700)}.dark .timer.error.svelte-syezpc{background:var(--color-red-500)}.timer.warning.svelte-syezpc{background:var(--color-yellow-700)}.dark .timer.warning.svelte-syezpc{background:var(--color-yellow-500)}.timer.info.svelte-syezpc{background:var(--color-grey-700)}.dark .timer.info.svelte-syezpc{background:var(--color-grey-500)}.timer.success.svelte-syezpc{background:var(--color-green-700)}.dark .timer.success.svelte-syezpc{background:var(--color-green-500)}.hidden.svelte-syezpc{display:none}.toast-text.svelte-syezpc a{text-decoration:underline}.toast-wrap.svelte-gatr8h{display:flex;position:fixed;top:var(--size-4);right:var(--size-4);flex-direction:column;align-items:end;gap:var(--size-2);z-index:var(--layer-top);width:calc(100% - var(--size-8))}@media (--screen-sm){.toast-wrap.svelte-gatr8h{width:calc(var(--size-96) + var(--size-10))}}.streaming-bar.svelte-ga0jj6{position:absolute;bottom:0;left:0;right:0;height:4px;background-color:var(--primary-600);animation:svelte-ga0jj6-countdown linear forwards;z-index:1}@keyframes svelte-ga0jj6-countdown{0%{transform:translate(0)}to{transform:translate(-100%)}}.wrapper.svelte-1t8lt48.svelte-1t8lt48{width:100%;height:100%;overflow:hidden;position:relative;font-family:sans-serif}.credits-container.svelte-1t8lt48.svelte-1t8lt48{position:absolute;bottom:0;transform:translateY(100%);width:100%;text-align:center;animation:svelte-1t8lt48-scroll var(--animation-duration) linear infinite;padding:0 2rem;box-sizing:border-box}.section-title.svelte-1t8lt48.svelte-1t8lt48{margin-top:4rem;margin-bottom:2.5rem;font-weight:700}.credit.intro-block.svelte-1t8lt48.svelte-1t8lt48{margin-bottom:5rem}.credit.svelte-1t8lt48.svelte-1t8lt48{margin-bottom:2rem}.credit.svelte-1t8lt48 h2.svelte-1t8lt48,.credit.svelte-1t8lt48 p.svelte-1t8lt48{margin:.5rem 0;font-family:sans-serif}.credit-two-column.svelte-1t8lt48.svelte-1t8lt48{display:flex;justify-content:space-between;align-items:baseline;text-align:left;margin:.8rem auto;max-width:80%;gap:1rem}.credit-two-column.svelte-1t8lt48 .title.svelte-1t8lt48{flex:1;text-align:right;padding-right:1rem}.credit-two-column.svelte-1t8lt48 .name.svelte-1t8lt48{flex:1;text-align:left;padding-left:1rem}.uppercase.svelte-1t8lt48.svelte-1t8lt48{text-transform:uppercase}@keyframes svelte-1t8lt48-scroll{0%{transform:translateY(100%)}to{transform:translateY(-100%)}}.viewport.svelte-upsott.svelte-upsott{width:100%;height:100%;position:relative;overflow:hidden;perspective:400px;-webkit-mask-image:linear-gradient(to bottom,black 60%,transparent 100%);mask-image:linear-gradient(to bottom,black 60%,transparent 100%);font-family:Droid Sans,sans-serif;font-weight:700}.stars.svelte-upsott.svelte-upsott{position:absolute;top:0;left:0;width:1px;height:1px;background:transparent;z-index:0;animation:svelte-upsott-twinkle 10s linear infinite}.stars.small.svelte-upsott.svelte-upsott{animation-duration:10s}.stars.medium.svelte-upsott.svelte-upsott{animation-duration:15s}.stars.large.svelte-upsott.svelte-upsott{animation-duration:20s}@keyframes svelte-upsott-twinkle{0%{opacity:.6}50%{opacity:1}to{opacity:.6}}.crawl.svelte-upsott.svelte-upsott{position:absolute;width:100%;bottom:0;transform-origin:50% 100%;animation:svelte-upsott-crawl-animation var(--animation-duration) linear infinite;z-index:1;text-align:center}@keyframes svelte-upsott-crawl-animation{0%{transform:rotateX(60deg) translateY(100%) translateZ(100px)}to{transform:rotateX(60deg) translateY(-150%) translateZ(-1200px)}}.uppercase.svelte-upsott.svelte-upsott{text-transform:uppercase}.section-title.svelte-upsott.svelte-upsott{margin-top:5rem;margin-bottom:3rem;font-weight:700}.credit.intro-block.svelte-upsott.svelte-upsott{margin-bottom:5rem}.credit.svelte-upsott.svelte-upsott{margin-bottom:2rem}.credit.svelte-upsott h2.svelte-upsott,.credit.svelte-upsott p.svelte-upsott{margin:.5rem 0;padding:0;white-space:nowrap}.credit-two-column.svelte-upsott.svelte-upsott{display:flex;justify-content:space-between;align-items:baseline;margin:.8rem auto;width:90%;white-space:nowrap}.credit-two-column.svelte-upsott .spacer.svelte-upsott{flex-grow:1;border-bottom:1px dotted rgba(254,218,74,.3);margin:0 1em;transform:translateY(-.5em)}.matrix-container.svelte-1851m15.svelte-1851m15{width:100%;height:100%;position:relative;overflow:hidden}canvas.svelte-1851m15.svelte-1851m15{display:block;position:absolute;top:0;left:0;width:100%;height:100%;z-index:1}.credits-scroll-overlay.svelte-1851m15.svelte-1851m15{position:absolute;top:0;left:0;width:100%;height:100%;z-index:2;color:#fff;font-family:monospace;text-align:center;-webkit-mask-image:linear-gradient(transparent,black 20%,black 80%,transparent);mask-image:linear-gradient(transparent,black 20%,black 80%,transparent)}.credits-content.svelte-1851m15.svelte-1851m15{position:absolute;width:100%;bottom:0;transform:translateY(100%);animation:svelte-1851m15-scroll-from-bottom var(--animation-duration) linear infinite;padding:0 2rem;box-sizing:border-box}@keyframes svelte-1851m15-scroll-from-bottom{0%{transform:translateY(100%)}to{transform:translateY(-100%)}}.uppercase.svelte-1851m15.svelte-1851m15{text-transform:uppercase}.section-title.svelte-1851m15.svelte-1851m15{margin-top:4rem;margin-bottom:2.5rem;font-weight:700;color:#5f5;text-shadow:0 0 8px #0f0}.credit-block.intro-block.svelte-1851m15.svelte-1851m15{margin-bottom:5rem}.credit-block.svelte-1851m15.svelte-1851m15{margin-bottom:2.5em}.title.svelte-1851m15.svelte-1851m15{color:#0f0;opacity:.8}.name.svelte-1851m15.svelte-1851m15{font-weight:700;color:#5f5;text-shadow:0 0 5px #0f0}.credit-two-column.svelte-1851m15.svelte-1851m15{display:flex;justify-content:space-between;align-items:baseline;text-align:left;margin:.8em auto;max-width:80%;gap:1em}.credit-two-column.svelte-1851m15 .title.svelte-1851m15{flex:1;text-align:right;padding-right:1em}.credit-two-column.svelte-1851m15 .name.svelte-1851m15{flex:1;text-align:left;padding-left:1em}.unstyled-link.svelte-151nsdd{all:unset;cursor:pointer}img.svelte-kxeri3{object-fit:cover}.image-container.svelte-x2tujq.svelte-x2tujq{height:100%;position:relative;min-width:var(--size-20)}.image-container.svelte-x2tujq button.svelte-x2tujq{width:var(--size-full);height:var(--size-full);border-radius:var(--radius-lg);display:flex;align-items:center;justify-content:center}.image-frame.svelte-x2tujq img{width:var(--size-full);height:var(--size-full);object-fit:scale-down}.selectable.svelte-x2tujq.svelte-x2tujq{cursor:crosshair}.fullscreen-controls svg{position:relative;top:0}.image-container:fullscreen{background-color:#000;display:flex;justify-content:center;align-items:center}.image-container:fullscreen img{max-width:90vw;max-height:90vh;object-fit:scale-down}.image-frame.svelte-x2tujq.svelte-x2tujq{width:auto;height:100%;display:flex;align-items:center;justify-content:center}.block{border:none!important;box-shadow:none!important;border-style:none!important}.outer-logo-wrapper.svelte-1hawtr7.svelte-1hawtr7,.outer-credits-wrapper.svelte-1hawtr7.svelte-1hawtr7{display:flex;flex-direction:column;width:100%;border:none}.logo-panel.svelte-1hawtr7.svelte-1hawtr7{background:var(--background-fill-primary);border:none;display:flex!important;align-items:center;justify-content:var(--logo-justify, center);padding:0 0 20px;width:100%}.credits-panel-wrapper.svelte-1hawtr7.svelte-1hawtr7{display:flex;flex-direction:var(--panel-direction, row);min-height:var(--size-full, 500px);width:100%;background:var(--background-fill-primary);border:1px solid var(--border-color-primary);border-radius:var(--radius-lg);overflow:hidden}.main-credits-panel.svelte-1hawtr7.svelte-1hawtr7{flex-grow:1;flex-shrink:1;min-width:200px;background:#000;overflow:hidden;position:relative}.licenses-sidebar.svelte-1hawtr7.svelte-1hawtr7{width:calc(100% - var(--main-panel-width, 400px));max-width:100%;max-height:var(--sidebar-max-height, none);flex-shrink:1;flex-grow:1;background:var(--background-fill-secondary);overflow-y:auto;border-left:var(--border-left, 1px solid var(--border-color-primary));border-top:var(--border-top, none)}.licenses-sidebar.svelte-1hawtr7 h3.svelte-1hawtr7{margin:var(--spacing-lg);font-size:var(--text-lg)}.licenses-sidebar.svelte-1hawtr7 li.svelte-1hawtr7{padding:0;margin:0;cursor:default;border-bottom:1px solid var(--border-color-primary)}.licenses-sidebar.svelte-1hawtr7 li button.svelte-1hawtr7{background:none;border:none;font:inherit;color:inherit;text-align:left;width:100%;cursor:pointer;padding:var(--spacing-md) var(--spacing-lg);transition:background-color .2s}.licenses-sidebar.svelte-1hawtr7 li button.svelte-1hawtr7:hover{background-color:var(--background-fill-primary)}.licenses-sidebar.svelte-1hawtr7 li button.svelte-1hawtr7:focus-visible{outline:2px solid var(--color-accent);outline-offset:-2px}.licenses-sidebar.svelte-1hawtr7 li button.selected.svelte-1hawtr7{background-color:var(--color-accent);color:#fff;font-weight:700}.license-display.svelte-1hawtr7.svelte-1hawtr7{padding:var(--spacing-lg);overflow-y:auto;flex-grow:1;border-top:1px solid var(--border-color-primary);background:var(--background-fill-primary)}.license-display.svelte-1hawtr7 h4.svelte-1hawtr7{margin-top:0}.license-display.svelte-1hawtr7 pre.svelte-1hawtr7{white-space:pre-wrap;word-break:break-word;font-size:var(--text-sm);color:var(--body-text-color-subdued)}
+.block.svelte-239wnu{position:relative;margin:0;box-shadow:var(--block-shadow);border-width:var(--block-border-width);border-color:var(--block-border-color);border-radius:var(--block-radius);background:var(--block-background-fill);width:100%;line-height:var(--line-sm)}.block.fullscreen.svelte-239wnu{border-radius:0}.auto-margin.svelte-239wnu{margin-left:auto;margin-right:auto}.block.border_focus.svelte-239wnu{border-color:var(--color-accent)}.block.border_contrast.svelte-239wnu{border-color:var(--body-text-color)}.padded.svelte-239wnu{padding:var(--block-padding)}.hidden.svelte-239wnu{display:none}.flex.svelte-239wnu{display:flex;flex-direction:column}.hide-container.svelte-239wnu:not(.fullscreen){margin:0;box-shadow:none;--block-border-width:0;background:transparent;padding:0;overflow:visible}.resize-handle.svelte-239wnu{position:absolute;bottom:0;right:0;width:10px;height:10px;fill:var(--block-border-color);cursor:nwse-resize}.fullscreen.svelte-239wnu{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:1000;overflow:auto}.animating.svelte-239wnu{animation:svelte-239wnu-pop-out .1s ease-out forwards}@keyframes svelte-239wnu-pop-out{0%{position:fixed;top:var(--start-top);left:var(--start-left);width:var(--start-width);height:var(--start-height);z-index:100}to{position:fixed;top:0vh;left:0vw;width:100vw;height:100vh;z-index:1000}}.placeholder.svelte-239wnu{border-radius:var(--block-radius);border-width:var(--block-border-width);border-color:var(--block-border-color);border-style:dashed}Tables */ table,tr,td,th{margin-top:var(--spacing-sm);margin-bottom:var(--spacing-sm);padding:var(--spacing-xl)}.md code,.md pre{background:none;font-family:var(--font-mono);font-size:var(--text-sm);text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:2;tab-size:2;-webkit-hyphens:none;hyphens:none}.md pre[class*=language-]::selection,.md pre[class*=language-] ::selection,.md code[class*=language-]::selection,.md code[class*=language-] ::selection{text-shadow:none;background:#b3d4fc}.md pre{padding:1em;margin:.5em 0;overflow:auto;position:relative;margin-top:var(--spacing-sm);margin-bottom:var(--spacing-sm);box-shadow:none;border:none;border-radius:var(--radius-md);background:var(--code-background-fill);padding:var(--spacing-xxl);font-family:var(--font-mono);text-shadow:none;border-radius:var(--radius-sm);white-space:nowrap;display:block;white-space:pre}.md :not(pre)>code{padding:.1em;border-radius:var(--radius-xs);white-space:normal;background:var(--code-background-fill);border:1px solid var(--panel-border-color);padding:var(--spacing-xxs) var(--spacing-xs)}.md .token.comment,.md .token.prolog,.md .token.doctype,.md .token.cdata{color:#708090}.md .token.punctuation{color:#999}.md .token.namespace{opacity:.7}.md .token.property,.md .token.tag,.md .token.boolean,.md .token.number,.md .token.constant,.md .token.symbol,.md .token.deleted{color:#905}.md .token.selector,.md .token.attr-name,.md .token.string,.md .token.char,.md .token.builtin,.md .token.inserted{color:#690}.md .token.atrule,.md .token.attr-value,.md .token.keyword{color:#07a}.md .token.function,.md .token.class-name{color:#dd4a68}.md .token.regex,.md .token.important,.md .token.variable{color:#e90}.md .token.important,.md .token.bold{font-weight:700}.md .token.italic{font-style:italic}.md .token.entity{cursor:help}.dark .md .token.comment,.dark .md .token.prolog,.dark .md .token.cdata{color:#5c6370}.dark .md .token.doctype,.dark .md .token.punctuation,.dark .md .token.entity{color:#abb2bf}.dark .md .token.attr-name,.dark .md .token.class-name,.dark .md .token.boolean,.dark .md .token.constant,.dark .md .token.number,.dark .md .token.atrule{color:#d19a66}.dark .md .token.keyword{color:#c678dd}.dark .md .token.property,.dark .md .token.tag,.dark .md .token.symbol,.dark .md .token.deleted,.dark .md .token.important{color:#e06c75}.dark .md .token.selector,.dark .md .token.string,.dark .md .token.char,.dark .md .token.builtin,.dark .md .token.inserted,.dark .md .token.regex,.dark .md .token.attr-value,.dark .md .token.attr-value>.token.punctuation{color:#98c379}.dark .md .token.variable,.dark .md .token.operator,.dark .md .token.function{color:#61afef}.dark .md .token.url{color:#56b6c2}span.svelte-1m32c2s div[class*=code_wrap]{position:relative}span.svelte-1m32c2s span.katex{font-size:var(--text-lg);direction:ltr}span.svelte-1m32c2s div[class*=code_wrap]>button{z-index:1;cursor:pointer;border-bottom-left-radius:var(--radius-sm);padding:var(--spacing-md);width:25px;height:25px;position:absolute;right:0}span.svelte-1m32c2s .check{opacity:0;z-index:var(--layer-top);transition:opacity .2s;background:var(--code-background-fill);color:var(--body-text-color);position:absolute;top:var(--size-1-5);left:var(--size-1-5)}span.svelte-1m32c2s p:not(:first-child){margin-top:var(--spacing-xxl)}span.svelte-1m32c2s .md-header-anchor{margin-left:-25px;padding-right:8px;line-height:1;color:var(--body-text-color-subdued);opacity:0}span.svelte-1m32c2s h1:hover .md-header-anchor,span.svelte-1m32c2s h2:hover .md-header-anchor,span.svelte-1m32c2s h3:hover .md-header-anchor,span.svelte-1m32c2s h4:hover .md-header-anchor,span.svelte-1m32c2s h5:hover .md-header-anchor,span.svelte-1m32c2s h6:hover .md-header-anchor{opacity:1}span.md.svelte-1m32c2s .md-header-anchor>svg{color:var(--body-text-color-subdued)}span.svelte-1m32c2s table{word-break:break-word}div.svelte-17qq50w>.md.prose{font-weight:var(--block-info-text-weight);font-size:var(--block-info-text-size);line-height:var(--line-sm)}div.svelte-17qq50w>.md.prose *{color:var(--block-info-text-color)}div.svelte-17qq50w{margin-bottom:var(--spacing-md)}span.has-info.svelte-zgrq3{margin-bottom:var(--spacing-xs)}span.svelte-zgrq3:not(.has-info){margin-bottom:var(--spacing-lg)}span.svelte-zgrq3{display:inline-block;position:relative;z-index:var(--layer-4);border:solid var(--block-title-border-width) var(--block-title-border-color);border-radius:var(--block-title-radius);background:var(--block-title-background-fill);padding:var(--block-title-padding);color:var(--block-title-text-color);font-weight:var(--block-title-text-weight);font-size:var(--block-title-text-size);line-height:var(--line-sm)}span[dir=rtl].svelte-zgrq3{display:block}.hide.svelte-zgrq3{margin:0;height:0}label.svelte-13ao5pu.svelte-13ao5pu{display:inline-flex;align-items:center;z-index:var(--layer-2);box-shadow:var(--block-label-shadow);border:var(--block-label-border-width) solid var(--block-label-border-color);border-top:none;border-left:none;border-radius:var(--block-label-radius);background:var(--block-label-background-fill);padding:var(--block-label-padding);pointer-events:none;color:var(--block-label-text-color);font-weight:var(--block-label-text-weight);font-size:var(--block-label-text-size);line-height:var(--line-sm)}.gr-group label.svelte-13ao5pu.svelte-13ao5pu{border-top-left-radius:0}label.float.svelte-13ao5pu.svelte-13ao5pu{position:absolute;top:var(--block-label-margin);left:var(--block-label-margin)}label.svelte-13ao5pu.svelte-13ao5pu:not(.float){position:static;margin-top:var(--block-label-margin);margin-left:var(--block-label-margin)}.hide.svelte-13ao5pu.svelte-13ao5pu{height:0}span.svelte-13ao5pu.svelte-13ao5pu{opacity:.8;margin-right:var(--size-2);width:calc(var(--block-label-text-size) - 1px);height:calc(var(--block-label-text-size) - 1px)}.hide-label.svelte-13ao5pu.svelte-13ao5pu{box-shadow:none;border-width:0;background:transparent;overflow:visible}label[dir=rtl].svelte-13ao5pu.svelte-13ao5pu{border:var(--block-label-border-width) solid var(--block-label-border-color);border-top:none;border-right:none;border-bottom-left-radius:var(--block-radius);border-bottom-right-radius:var(--block-label-radius);border-top-left-radius:var(--block-label-radius)}label[dir=rtl].svelte-13ao5pu span.svelte-13ao5pu{margin-left:var(--size-2);margin-right:0}button.svelte-qgco6m{display:flex;justify-content:center;align-items:center;gap:1px;z-index:var(--layer-2);border-radius:var(--radius-xs);color:var(--block-label-text-color);border:1px solid transparent;padding:var(--spacing-xxs)}button.svelte-qgco6m:hover{background-color:var(--background-fill-secondary)}button[disabled].svelte-qgco6m{opacity:.5;box-shadow:none}button[disabled].svelte-qgco6m:hover{cursor:not-allowed}.padded.svelte-qgco6m{background:var(--bg-color)}button.svelte-qgco6m:hover,button.highlight.svelte-qgco6m{cursor:pointer;color:var(--color-accent)}.padded.svelte-qgco6m:hover{color:var(--block-label-text-color)}span.svelte-qgco6m{padding:0 1px;font-size:10px}div.svelte-qgco6m{display:flex;align-items:center;justify-content:center;transition:filter .2s ease-in-out}.x-small.svelte-qgco6m{width:10px;height:10px}.small.svelte-qgco6m{width:14px;height:14px}.medium.svelte-qgco6m{width:20px;height:20px}.large.svelte-qgco6m{width:22px;height:22px}.pending.svelte-qgco6m{animation:svelte-qgco6m-flash .5s infinite}@keyframes svelte-qgco6m-flash{0%{opacity:.5}50%{opacity:1}to{opacity:.5}}.transparent.svelte-qgco6m{background:transparent;border:none;box-shadow:none}.empty.svelte-3w3rth{display:flex;justify-content:center;align-items:center;margin-top:calc(0px - var(--size-6));height:var(--size-full)}.icon.svelte-3w3rth{opacity:.5;height:var(--size-5);color:var(--body-text-color)}.small.svelte-3w3rth{min-height:calc(var(--size-32) - 20px)}.large.svelte-3w3rth{min-height:calc(var(--size-64) - 20px)}.unpadded_box.svelte-3w3rth{margin-top:0}.small_parent.svelte-3w3rth{min-height:100%!important}.dropdown-arrow.svelte-145leq6,.dropdown-arrow.svelte-ihhdbf{fill:currentColor}.circle.svelte-ihhdbf{fill:currentColor;opacity:.1}svg.svelte-pb9pol{animation:svelte-pb9pol-spin 1.5s linear infinite}@keyframes svelte-pb9pol-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}h2.svelte-1xg7h5n{font-size:var(--text-xl)!important}p.svelte-1xg7h5n,h2.svelte-1xg7h5n{white-space:pre-line}.wrap.svelte-1xg7h5n{display:flex;flex-direction:column;justify-content:center;align-items:center;min-height:var(--size-60);color:var(--block-label-text-color);line-height:var(--line-md);height:100%;padding-top:var(--size-3);text-align:center;margin:auto var(--spacing-lg)}.or.svelte-1xg7h5n{color:var(--body-text-color-subdued);display:flex}.icon-wrap.svelte-1xg7h5n{width:30px;margin-bottom:var(--spacing-lg)}@media (--screen-md){.wrap.svelte-1xg7h5n{font-size:var(--text-lg)}}.hovered.svelte-1xg7h5n{color:var(--color-accent)}div.svelte-q32hvf{border-top:1px solid transparent;display:flex;max-height:100%;justify-content:center;align-items:center;gap:var(--spacing-sm);height:auto;align-items:flex-end;color:var(--block-label-text-color);flex-shrink:0}.show_border.svelte-q32hvf{border-top:1px solid var(--block-border-color);margin-top:var(--spacing-xxl);box-shadow:var(--shadow-drop)}.source-selection.svelte-15ls1gu{display:flex;align-items:center;justify-content:center;border-top:1px solid var(--border-color-primary);width:100%;margin-left:auto;margin-right:auto;height:var(--size-10)}.icon.svelte-15ls1gu{width:22px;height:22px;margin:var(--spacing-lg) var(--spacing-xs);padding:var(--spacing-xs);color:var(--neutral-400);border-radius:var(--radius-md)}.selected.svelte-15ls1gu{color:var(--color-accent)}.icon.svelte-15ls1gu:hover,.icon.svelte-15ls1gu:focus{color:var(--color-accent)}.icon-button-wrapper.svelte-1h0hs6p{display:flex;flex-direction:row;align-items:center;justify-content:center;z-index:var(--layer-2);gap:var(--spacing-sm);box-shadow:var(--shadow-drop);border:1px solid var(--border-color-primary);background:var(--block-background-fill);padding:var(--spacing-xxs)}.icon-button-wrapper.hide-top-corner.svelte-1h0hs6p{border-top:none;border-right:none;border-radius:var(--block-label-right-radius)}.icon-button-wrapper.display-top-corner.svelte-1h0hs6p{border-radius:var(--radius-sm) 0 0 var(--radius-sm);top:var(--spacing-sm);right:-1px}.icon-button-wrapper.svelte-1h0hs6p:not(.top-panel){border:1px solid var(--border-color-primary);border-radius:var(--radius-sm)}.top-panel.svelte-1h0hs6p{position:absolute;top:var(--block-label-margin);right:var(--block-label-margin);margin:0}.icon-button-wrapper.svelte-1h0hs6p button{margin:var(--spacing-xxs);border-radius:var(--radius-xs);position:relative}.icon-button-wrapper.svelte-1h0hs6p a.download-link:not(:last-child),.icon-button-wrapper.svelte-1h0hs6p button:not(:last-child){margin-right:var(--spacing-xxs)}.icon-button-wrapper.svelte-1h0hs6p a.download-link:not(:last-child):not(.no-border *):after,.icon-button-wrapper.svelte-1h0hs6p button:not(:last-child):not(.no-border *):after{content:"";position:absolute;right:-4.5px;top:15%;height:70%;width:1px;background-color:var(--border-color-primary)}.icon-button-wrapper.svelte-1h0hs6p>*{height:100%}svg.svelte-43sxxs.svelte-43sxxs{width:var(--size-20);height:var(--size-20)}svg.svelte-43sxxs path.svelte-43sxxs{fill:var(--loader-color)}div.svelte-43sxxs.svelte-43sxxs{z-index:var(--layer-2)}.margin.svelte-43sxxs.svelte-43sxxs{margin:var(--size-4)}.wrap.svelte-17v219f.svelte-17v219f{display:flex;flex-direction:column;justify-content:center;align-items:center;z-index:var(--layer-2);transition:opacity .1s ease-in-out;border-radius:var(--block-radius);background:var(--block-background-fill);padding:0 var(--size-6);max-height:var(--size-screen-h);overflow:hidden}.wrap.center.svelte-17v219f.svelte-17v219f{top:0;right:0;left:0}.wrap.default.svelte-17v219f.svelte-17v219f{top:0;right:0;bottom:0;left:0}.hide.svelte-17v219f.svelte-17v219f{opacity:0;pointer-events:none}.generating.svelte-17v219f.svelte-17v219f{animation:svelte-17v219f-pulseStart 1s cubic-bezier(.4,0,.6,1),svelte-17v219f-pulse 2s cubic-bezier(.4,0,.6,1) 1s infinite;border:2px solid var(--color-accent);background:transparent;z-index:var(--layer-1);pointer-events:none}.translucent.svelte-17v219f.svelte-17v219f{background:none}@keyframes svelte-17v219f-pulseStart{0%{opacity:0}to{opacity:1}}@keyframes svelte-17v219f-pulse{0%,to{opacity:1}50%{opacity:.5}}.loading.svelte-17v219f.svelte-17v219f{z-index:var(--layer-2);color:var(--body-text-color)}.eta-bar.svelte-17v219f.svelte-17v219f{position:absolute;top:0;right:0;bottom:0;left:0;transform-origin:left;opacity:.8;z-index:var(--layer-1);transition:10ms;background:var(--background-fill-secondary)}.progress-bar-wrap.svelte-17v219f.svelte-17v219f{border:1px solid var(--border-color-primary);background:var(--background-fill-primary);width:55.5%;height:var(--size-4)}.progress-bar.svelte-17v219f.svelte-17v219f{transform-origin:left;background-color:var(--loader-color);width:var(--size-full);height:var(--size-full)}.progress-level.svelte-17v219f.svelte-17v219f{display:flex;flex-direction:column;align-items:center;gap:1;z-index:var(--layer-2);width:var(--size-full)}.progress-level-inner.svelte-17v219f.svelte-17v219f{margin:var(--size-2) auto;color:var(--body-text-color);font-size:var(--text-sm);font-family:var(--font-mono)}.meta-text.svelte-17v219f.svelte-17v219f{position:absolute;bottom:0;right:0;z-index:var(--layer-2);padding:var(--size-1) var(--size-2);font-size:var(--text-sm);font-family:var(--font-mono)}.meta-text-center.svelte-17v219f.svelte-17v219f{display:flex;position:absolute;top:0;right:0;justify-content:center;align-items:center;transform:translateY(var(--size-6));z-index:var(--layer-2);padding:var(--size-1) var(--size-2);font-size:var(--text-sm);font-family:var(--font-mono);text-align:center}.error.svelte-17v219f.svelte-17v219f{box-shadow:var(--shadow-drop);border:solid 1px var(--error-border-color);border-radius:var(--radius-full);background:var(--error-background-fill);padding-right:var(--size-4);padding-left:var(--size-4);color:var(--error-text-color);font-weight:var(--weight-semibold);font-size:var(--text-lg);line-height:var(--line-lg);font-family:var(--font)}.minimal.svelte-17v219f.svelte-17v219f{pointer-events:none}.minimal.svelte-17v219f .progress-text.svelte-17v219f{background:var(--block-background-fill)}.border.svelte-17v219f.svelte-17v219f{border:1px solid var(--border-color-primary)}.clear-status.svelte-17v219f.svelte-17v219f{position:absolute;display:flex;top:var(--size-2);right:var(--size-2);justify-content:flex-end;gap:var(--spacing-sm);z-index:var(--layer-1)}.toast-body.svelte-syezpc{display:flex;position:relative;right:0;left:0;align-items:center;margin:var(--size-6) var(--size-4);margin:auto;border-radius:var(--container-radius);overflow:hidden;pointer-events:auto}.toast-body.error.svelte-syezpc{border:1px solid var(--color-red-700);background:var(--color-red-50)}.dark .toast-body.error.svelte-syezpc{border:1px solid var(--color-red-500);background-color:var(--color-grey-950)}.toast-body.warning.svelte-syezpc{border:1px solid var(--color-yellow-700);background:var(--color-yellow-50)}.dark .toast-body.warning.svelte-syezpc{border:1px solid var(--color-yellow-500);background-color:var(--color-grey-950)}.toast-body.info.svelte-syezpc{border:1px solid var(--color-grey-700);background:var(--color-grey-50)}.dark .toast-body.info.svelte-syezpc{border:1px solid var(--color-grey-500);background-color:var(--color-grey-950)}.toast-body.success.svelte-syezpc{border:1px solid var(--color-green-700);background:var(--color-green-50)}.dark .toast-body.success.svelte-syezpc{border:1px solid var(--color-green-500);background-color:var(--color-grey-950)}.toast-title.svelte-syezpc{display:flex;align-items:center;font-weight:var(--weight-bold);font-size:var(--text-lg);line-height:var(--line-sm)}.toast-title.error.svelte-syezpc{color:var(--color-red-700)}.dark .toast-title.error.svelte-syezpc{color:var(--color-red-50)}.toast-title.warning.svelte-syezpc{color:var(--color-yellow-700)}.dark .toast-title.warning.svelte-syezpc{color:var(--color-yellow-50)}.toast-title.info.svelte-syezpc{color:var(--color-grey-700)}.dark .toast-title.info.svelte-syezpc{color:var(--color-grey-50)}.toast-title.success.svelte-syezpc{color:var(--color-green-700)}.dark .toast-title.success.svelte-syezpc{color:var(--color-green-50)}.toast-close.svelte-syezpc{margin:0 var(--size-3);border-radius:var(--size-3);padding:0px var(--size-1-5);font-size:var(--size-5);line-height:var(--size-5)}.toast-close.error.svelte-syezpc{color:var(--color-red-700)}.dark .toast-close.error.svelte-syezpc{color:var(--color-red-500)}.toast-close.warning.svelte-syezpc{color:var(--color-yellow-700)}.dark .toast-close.warning.svelte-syezpc{color:var(--color-yellow-500)}.toast-close.info.svelte-syezpc{color:var(--color-grey-700)}.dark .toast-close.info.svelte-syezpc{color:var(--color-grey-500)}.toast-close.success.svelte-syezpc{color:var(--color-green-700)}.dark .toast-close.success.svelte-syezpc{color:var(--color-green-500)}.toast-text.svelte-syezpc{font-size:var(--text-lg);word-wrap:break-word;overflow-wrap:break-word;word-break:break-word}.toast-text.error.svelte-syezpc{color:var(--color-red-700)}.dark .toast-text.error.svelte-syezpc{color:var(--color-red-50)}.toast-text.warning.svelte-syezpc{color:var(--color-yellow-700)}.dark .toast-text.warning.svelte-syezpc{color:var(--color-yellow-50)}.toast-text.info.svelte-syezpc{color:var(--color-grey-700)}.dark .toast-text.info.svelte-syezpc{color:var(--color-grey-50)}.toast-text.success.svelte-syezpc{color:var(--color-green-700)}.dark .toast-text.success.svelte-syezpc{color:var(--color-green-50)}.toast-details.svelte-syezpc{margin:var(--size-3) var(--size-3) var(--size-3) 0;width:100%}.toast-icon.svelte-syezpc{display:flex;position:absolute;position:relative;flex-shrink:0;justify-content:center;align-items:center;margin:var(--size-2);border-radius:var(--radius-full);padding:var(--size-1);padding-left:calc(var(--size-1) - 1px);width:35px;height:35px}.toast-icon.error.svelte-syezpc{color:var(--color-red-700)}.dark .toast-icon.error.svelte-syezpc{color:var(--color-red-500)}.toast-icon.warning.svelte-syezpc{color:var(--color-yellow-700)}.dark .toast-icon.warning.svelte-syezpc{color:var(--color-yellow-500)}.toast-icon.info.svelte-syezpc{color:var(--color-grey-700)}.dark .toast-icon.info.svelte-syezpc{color:var(--color-grey-500)}.toast-icon.success.svelte-syezpc{color:var(--color-green-700)}.dark .toast-icon.success.svelte-syezpc{color:var(--color-green-500)}@keyframes svelte-syezpc-countdown{0%{transform:scaleX(1)}to{transform:scaleX(0)}}.timer.svelte-syezpc{position:absolute;bottom:0;left:0;transform-origin:0 0;animation:svelte-syezpc-countdown 10s linear forwards;width:100%;height:var(--size-1)}.timer.error.svelte-syezpc{background:var(--color-red-700)}.dark .timer.error.svelte-syezpc{background:var(--color-red-500)}.timer.warning.svelte-syezpc{background:var(--color-yellow-700)}.dark .timer.warning.svelte-syezpc{background:var(--color-yellow-500)}.timer.info.svelte-syezpc{background:var(--color-grey-700)}.dark .timer.info.svelte-syezpc{background:var(--color-grey-500)}.timer.success.svelte-syezpc{background:var(--color-green-700)}.dark .timer.success.svelte-syezpc{background:var(--color-green-500)}.hidden.svelte-syezpc{display:none}.toast-text.svelte-syezpc a{text-decoration:underline}.toast-wrap.svelte-gatr8h{display:flex;position:fixed;top:var(--size-4);right:var(--size-4);flex-direction:column;align-items:end;gap:var(--size-2);z-index:var(--layer-top);width:calc(100% - var(--size-8))}@media (--screen-sm){.toast-wrap.svelte-gatr8h{width:calc(var(--size-96) + var(--size-10))}}.streaming-bar.svelte-ga0jj6{position:absolute;bottom:0;left:0;right:0;height:4px;background-color:var(--primary-600);animation:svelte-ga0jj6-countdown linear forwards;z-index:1}@keyframes svelte-ga0jj6-countdown{0%{transform:translate(0)}to{transform:translate(-100%)}}.wrapper.svelte-1nrfbo6.svelte-1nrfbo6{width:100%;height:100%;overflow:hidden;position:relative;font-family:sans-serif}.scroll-logo-container.svelte-1nrfbo6.svelte-1nrfbo6{text-align:center;margin-bottom:2rem}.scroll-logo-container.svelte-1nrfbo6 img.svelte-1nrfbo6{display:block;margin-left:auto;margin-right:auto;max-width:80%;object-fit:contain}.credits-container.svelte-1nrfbo6.svelte-1nrfbo6{position:absolute;bottom:0;transform:translateY(100%);width:100%;text-align:center;animation:svelte-1nrfbo6-scroll var(--animation-duration) linear infinite;padding:0 2rem;box-sizing:border-box}.section-title.svelte-1nrfbo6.svelte-1nrfbo6{margin-top:4rem;margin-bottom:2.5rem;font-weight:700}.credit.intro-block.svelte-1nrfbo6.svelte-1nrfbo6{margin-bottom:5rem}.credit.svelte-1nrfbo6.svelte-1nrfbo6{margin-bottom:2rem}.credit.svelte-1nrfbo6 h2.svelte-1nrfbo6,.credit.svelte-1nrfbo6 p.svelte-1nrfbo6{margin:.5rem 0;font-family:sans-serif}.credit-two-column.svelte-1nrfbo6.svelte-1nrfbo6{display:flex;justify-content:space-between;align-items:baseline;text-align:left;margin:.8rem auto;max-width:80%;gap:1rem}.credit-two-column.svelte-1nrfbo6 .title.svelte-1nrfbo6{flex:1;text-align:right;padding-right:1rem}.credit-two-column.svelte-1nrfbo6 .name.svelte-1nrfbo6{flex:1;text-align:left;padding-left:1rem}.uppercase.svelte-1nrfbo6.svelte-1nrfbo6{text-transform:uppercase}@keyframes svelte-1nrfbo6-scroll{0%{transform:translateY(100%)}to{transform:translateY(-100%)}}.viewport.svelte-1hia40q.svelte-1hia40q{width:100%;height:100%;position:relative;overflow:hidden;perspective:400px;-webkit-mask-image:linear-gradient(to bottom,black 60%,transparent 100%);mask-image:linear-gradient(to bottom,black 60%,transparent 100%);font-family:Droid Sans,sans-serif;font-weight:700}.stars.svelte-1hia40q.svelte-1hia40q{position:absolute;top:0;left:0;width:1px;height:1px;background:transparent;z-index:0;animation:svelte-1hia40q-twinkle 10s linear infinite}.stars.small.svelte-1hia40q.svelte-1hia40q{animation-duration:10s}.stars.medium.svelte-1hia40q.svelte-1hia40q{animation-duration:15s}.stars.large.svelte-1hia40q.svelte-1hia40q{animation-duration:20s}@keyframes svelte-1hia40q-twinkle{0%{opacity:.6}50%{opacity:1}to{opacity:.6}}.crawl.svelte-1hia40q.svelte-1hia40q{position:absolute;width:100%;bottom:0;transform-origin:50% 100%;animation:svelte-1hia40q-crawl-animation var(--animation-duration) linear infinite;z-index:1;text-align:center}@keyframes svelte-1hia40q-crawl-animation{0%{transform:rotateX(60deg) translateY(100%) translateZ(100px)}to{transform:rotateX(60deg) translateY(-150%) translateZ(-1200px)}}.scroll-logo-container.svelte-1hia40q.svelte-1hia40q{text-align:center;margin-bottom:2rem}.scroll-logo-container.svelte-1hia40q img.svelte-1hia40q{display:block;margin-left:auto;margin-right:auto;max-width:70%;object-fit:contain;filter:grayscale(1) sepia(100%) hue-rotate(15deg) saturate(8) brightness(1.2)}.uppercase.svelte-1hia40q.svelte-1hia40q{text-transform:uppercase}.section-title.svelte-1hia40q.svelte-1hia40q{margin-top:5rem;margin-bottom:3rem;font-weight:700}.credit.intro-block.svelte-1hia40q.svelte-1hia40q{margin-bottom:5rem}.credit.svelte-1hia40q.svelte-1hia40q{margin-bottom:2rem}.credit.svelte-1hia40q h2.svelte-1hia40q,.credit.svelte-1hia40q p.svelte-1hia40q{margin:.5rem 0;padding:0;white-space:nowrap}.credit-two-column.svelte-1hia40q.svelte-1hia40q{display:flex;justify-content:space-between;align-items:baseline;margin:.8rem auto;width:90%;white-space:nowrap}.credit-two-column.svelte-1hia40q .spacer.svelte-1hia40q{flex-grow:1;border-bottom:1px dotted rgba(254,218,74,.3);margin:0 1em;transform:translateY(-.5em)}.matrix-container.svelte-1bt5wt2.svelte-1bt5wt2{width:100%;height:100%;position:relative;overflow:hidden}canvas.svelte-1bt5wt2.svelte-1bt5wt2{display:block;position:absolute;top:0;left:0;width:100%;height:100%;z-index:1}.credits-scroll-overlay.svelte-1bt5wt2.svelte-1bt5wt2{position:absolute;top:0;left:0;width:100%;height:100%;z-index:2;color:#fff;font-family:monospace;text-align:center;-webkit-mask-image:linear-gradient(transparent,black 20%,black 80%,transparent);mask-image:linear-gradient(transparent,black 20%,black 80%,transparent)}.credits-content.svelte-1bt5wt2.svelte-1bt5wt2{position:absolute;width:100%;bottom:0;transform:translateY(100%);animation:svelte-1bt5wt2-scroll-from-bottom var(--animation-duration) linear infinite;padding:0 2rem;box-sizing:border-box}@keyframes svelte-1bt5wt2-scroll-from-bottom{0%{transform:translateY(100%)}to{transform:translateY(-100%)}}.uppercase.svelte-1bt5wt2.svelte-1bt5wt2{text-transform:uppercase}.section-title.svelte-1bt5wt2.svelte-1bt5wt2{margin-top:4rem;margin-bottom:2.5rem;font-weight:700;color:#5f5;text-shadow:0 0 8px #0f0}.credit-block.intro-block.svelte-1bt5wt2.svelte-1bt5wt2{margin-bottom:5rem}.credit-block.svelte-1bt5wt2.svelte-1bt5wt2{margin-bottom:2.5em}.title.svelte-1bt5wt2.svelte-1bt5wt2{color:#0f0;opacity:.8}.name.svelte-1bt5wt2.svelte-1bt5wt2{font-weight:700;color:#5f5;text-shadow:0 0 5px #0f0}.credit-two-column.svelte-1bt5wt2.svelte-1bt5wt2{display:flex;justify-content:space-between;align-items:baseline;text-align:left;margin:.8em auto;max-width:80%;gap:1em}.credit-two-column.svelte-1bt5wt2 .title.svelte-1bt5wt2{flex:1;text-align:right;padding-right:1em}.credit-two-column.svelte-1bt5wt2 .name.svelte-1bt5wt2{flex:1;text-align:left;padding-left:1em}.scroll-logo-container.svelte-1bt5wt2.svelte-1bt5wt2{text-align:center;margin-bottom:2rem}.scroll-logo-container.svelte-1bt5wt2 img.svelte-1bt5wt2{display:block;margin-left:auto;margin-right:auto;max-width:80%;object-fit:contain;filter:grayscale(1) brightness(.5) sepia(100%) hue-rotate(50deg) saturate(500%)}.unstyled-link.svelte-151nsdd{all:unset;cursor:pointer}img.svelte-kxeri3{object-fit:cover}.image-container.svelte-x2tujq.svelte-x2tujq{height:100%;position:relative;min-width:var(--size-20)}.image-container.svelte-x2tujq button.svelte-x2tujq{width:var(--size-full);height:var(--size-full);border-radius:var(--radius-lg);display:flex;align-items:center;justify-content:center}.image-frame.svelte-x2tujq img{width:var(--size-full);height:var(--size-full);object-fit:scale-down}.selectable.svelte-x2tujq.svelte-x2tujq{cursor:crosshair}.fullscreen-controls svg{position:relative;top:0}.image-container:fullscreen{background-color:#000;display:flex;justify-content:center;align-items:center}.image-container:fullscreen img{max-width:90vw;max-height:90vh;object-fit:scale-down}.image-frame.svelte-x2tujq.svelte-x2tujq{width:auto;height:100%;display:flex;align-items:center;justify-content:center}.block{border:none!important;box-shadow:none!important;border-style:none!important}.outer-logo-wrapper.svelte-1hawtr7.svelte-1hawtr7,.outer-credits-wrapper.svelte-1hawtr7.svelte-1hawtr7{display:flex;flex-direction:column;width:100%;border:none}.logo-panel.svelte-1hawtr7.svelte-1hawtr7{background:var(--background-fill-primary);border:none;display:flex!important;align-items:center;justify-content:var(--logo-justify, center);padding:0 0 20px;width:100%}.credits-panel-wrapper.svelte-1hawtr7.svelte-1hawtr7{display:flex;flex-direction:var(--panel-direction, row);min-height:var(--size-full, 500px);width:100%;background:var(--background-fill-primary);border:1px solid var(--border-color-primary);border-radius:var(--radius-lg);overflow:hidden}.main-credits-panel.svelte-1hawtr7.svelte-1hawtr7{flex-grow:1;flex-shrink:1;min-width:200px;background:#000;overflow:hidden;position:relative}.licenses-sidebar.svelte-1hawtr7.svelte-1hawtr7{width:calc(100% - var(--main-panel-width, 400px));max-width:100%;max-height:var(--sidebar-max-height, none);flex-shrink:1;flex-grow:1;background:var(--background-fill-secondary);overflow-y:auto;border-left:var(--border-left, 1px solid var(--border-color-primary));border-top:var(--border-top, none)}.licenses-sidebar.svelte-1hawtr7 h3.svelte-1hawtr7{margin:var(--spacing-lg);font-size:var(--text-lg)}.licenses-sidebar.svelte-1hawtr7 li.svelte-1hawtr7{padding:0;margin:0;cursor:default;border-bottom:1px solid var(--border-color-primary)}.licenses-sidebar.svelte-1hawtr7 li button.svelte-1hawtr7{background:none;border:none;font:inherit;color:inherit;text-align:left;width:100%;cursor:pointer;padding:var(--spacing-md) var(--spacing-lg);transition:background-color .2s}.licenses-sidebar.svelte-1hawtr7 li button.svelte-1hawtr7:hover{background-color:var(--background-fill-primary)}.licenses-sidebar.svelte-1hawtr7 li button.svelte-1hawtr7:focus-visible{outline:2px solid var(--color-accent);outline-offset:-2px}.licenses-sidebar.svelte-1hawtr7 li button.selected.svelte-1hawtr7{background-color:var(--color-accent);color:#fff;font-weight:700}.license-display.svelte-1hawtr7.svelte-1hawtr7{padding:var(--spacing-lg);overflow-y:auto;flex-grow:1;border-top:1px solid var(--border-color-primary);background:var(--background-fill-primary)}.license-display.svelte-1hawtr7 h4.svelte-1hawtr7{margin-top:0}.license-display.svelte-1hawtr7 pre.svelte-1hawtr7{white-space:pre-wrap;word-break:break-word;font-size:var(--text-sm);color:var(--body-text-color-subdued)}

src/demo/app.py

@@ -18,7 +18,7 @@ def setup_demo_files():
         with open("./assets/logo.webp", "w") as f:
             f.write("Placeholder WebP logo")
 
-# --- UPDATED: Credits list with sections ---
+# --- Credits list with sections ---
 credits_list = [
     {"section_title": "Project Leadership"},
     {"title": "Project Manager", "name": "Emma Thompson"},
@@ -47,6 +47,8 @@ DEFAULT_SPEEDS = {
     "starwars": 70.0,
     "matrix": 40.0
 }
+SCROLL_LOGO_PATH = "./assets/gradio_logo_white.png"
+LOGO_PATH="./assets/logo.webp"
 
 def update_panel(
     effect: str, 
@@ -64,39 +66,52 @@ def update_panel(
     logo_height: str | None,
     scroll_background_color: str | None, 
     scroll_title_color: str | None, 
+    scroll_section_title_color: str | None,
     scroll_name_color: str | None,    
     layout_style: str, 
     title_uppercase: bool, 
     name_uppercase: bool, 
     section_title_uppercase: bool,
-    swap_font_sizes: bool
+    swap_font_sizes: bool,
+    show_scroll_logo: bool,
+    scroll_logo_height: str | None
 ) -> dict:
     """Callback function that updates all properties of the CreditsPanel component."""
-    return gr.update(
-        visible=True,
-        effect=effect, 
-        speed=speed, 
-        base_font_size=base_font_size,
-        intro_title=intro_title, 
-        intro_subtitle=intro_subtitle,
-        sidebar_position=sidebar_position, 
-        show_logo=show_logo,
-        show_licenses=show_licenses, 
-        show_credits=show_credits,
-        logo_position=logo_position, 
-        logo_sizing=logo_sizing,
-        logo_width=logo_width, 
-        logo_height=logo_height,
-        scroll_background_color=scroll_background_color,
-        scroll_title_color=scroll_title_color,
-        scroll_name_color=scroll_name_color,        
-        layout_style=layout_style,
-        title_uppercase=title_uppercase,
-        name_uppercase=name_uppercase,
-        section_title_uppercase=section_title_uppercase,
-        swap_font_sizes_on_two_column=swap_font_sizes,
-        value=credits_list
-    )
+        
+    scroll_logo_path = SCROLL_LOGO_PATH if show_scroll_logo else None
+    
+    if not scroll_logo_height:
+        scroll_logo_height = "120px"
+        
+    return {
+        "credits": credits_list,
+        "licenses": license_paths,
+        "effect": effect,
+        "speed": speed,
+        "base_font_size": base_font_size,
+        "intro_title": intro_title,
+        "intro_subtitle": intro_subtitle,
+        "sidebar_position": sidebar_position,
+        "logo_path": LOGO_PATH, 
+        "show_logo": show_logo,
+        "show_licenses": show_licenses,
+        "show_credits": show_credits,
+        "logo_position": logo_position,
+        "logo_sizing": logo_sizing,
+        "logo_width": logo_width,
+        "logo_height": logo_height,
+        "scroll_background_color": scroll_background_color,
+        "scroll_title_color": scroll_title_color,
+        "scroll_name_color": scroll_name_color,
+        "scroll_section_title_color": scroll_section_title_color,
+        "layout_style": layout_style,
+        "title_uppercase": title_uppercase,
+        "name_uppercase": name_uppercase,
+        "section_title_uppercase": section_title_uppercase,
+        "swap_font_sizes_on_two_column": swap_font_sizes,
+        "scroll_logo_path": scroll_logo_path,
+        "scroll_logo_height": scroll_logo_height,
+    }
 
 def update_ui_on_effect_change(effect: str) -> tuple[float, float]:
     """Updates sliders to sensible defaults when the animation effect is changed."""
@@ -138,6 +153,14 @@ with gr.Blocks(theme=gr.themes.Ocean(), title="CreditsPanel Demo") as demo:
         name_uppercase_checkbox = gr.Checkbox(label="Name Uppercase", value=False)
         section_title_uppercase_checkbox = gr.Checkbox(label="Section Uppercase", value=True)
         
+        gr.Markdown("### Scrolling Logo")
+        show_scroll_logo_checkbox = gr.Checkbox(
+            label="Show Logo in Credits Roll", 
+            value=True, 
+            info="Toggles the logo above the intro text."
+        )
+        scroll_logo_height_input = gr.Textbox(label="Scrolling Logo Height", value="100px")
+        
         gr.Markdown("### Intro Text")
         intro_title_input = gr.Textbox(label="Intro Title", value="Gradio")
         intro_subtitle_input = gr.Textbox(label="Intro Subtitle", value="The best UI framework")
@@ -157,19 +180,20 @@ with gr.Blocks(theme=gr.themes.Ocean(), title="CreditsPanel Demo") as demo:
         gr.Markdown("### Color Settings (Scroll Effect)")
         scroll_background_color = gr.ColorPicker(label="Background Color", value="#000000")
         scroll_title_color = gr.ColorPicker(label="Title Color", value="#FFFFFF")
+        scroll_section_title_color = gr.ColorPicker(label="Section Title Color", value="#FFFFFF")
         scroll_name_color = gr.ColorPicker(label="Name Color", value="#FFFFFF")
 
-    panel = CreditsPanel(
+    panel = CreditsPanel(       
+        height=500,
         credits=credits_list,
         licenses=license_paths,
         effect="scroll",
-        height=500,
         speed=DEFAULT_SPEEDS["scroll"],
         base_font_size=1.5,
         intro_title="Gradio",
         intro_subtitle="The best UI framework",
         sidebar_position="right",
-        logo_path="./assets/logo.webp",
+        logo_path=LOGO_PATH,
         show_logo=True,
         show_licenses=True,
         show_credits=True,
@@ -180,11 +204,14 @@ with gr.Blocks(theme=gr.themes.Ocean(), title="CreditsPanel Demo") as demo:
         scroll_background_color="#000000",
         scroll_title_color="#FFFFFF",
         scroll_name_color="#FFFFFF",       
+        scroll_section_title_color="#FFFFFF",
         layout_style="stacked",
         title_uppercase=False,
         name_uppercase=False,
         section_title_uppercase=True,
         swap_font_sizes_on_two_column=False,
+        scroll_logo_path=SCROLL_LOGO_PATH,
+        scroll_logo_height="100px",
     )
 
     inputs = [
@@ -202,15 +229,23 @@ with gr.Blocks(theme=gr.themes.Ocean(), title="CreditsPanel Demo") as demo:
         logo_width_input, 
         logo_height_input,
         scroll_background_color, 
-        scroll_title_color, 
+        scroll_title_color,
+        scroll_section_title_color, 
         scroll_name_color,        
         layout_style_radio, 
         title_uppercase_checkbox, 
         name_uppercase_checkbox,
         section_title_uppercase_checkbox,
-        swap_sizes_checkbox
+        swap_sizes_checkbox,
+        show_scroll_logo_checkbox,
+        scroll_logo_height_input
     ]
 
+    demo.load(
+        fn=update_panel,
+        inputs=inputs,
+        outputs=panel
+    )
     layout_style_radio.change(
         fn=toggle_swap_checkbox_visibility,
         inputs=layout_style_radio,

src/demo/space.py

@@ -3,7 +3,7 @@ import gradio as gr
 from app import demo as app
 import os
 
-_docs = {'CreditsPanel': {'description': 'A Gradio component for displaying credits with customizable visual effects, such as scrolling or Star Wars-style animations.\nSupports displaying a logo, licenses, and configurable text styling.\n\n    EVENTS (list): Supported events for the component, currently only `change`.', 'members': {'__init__': {'value': {'type': 'Any', 'default': 'None', 'description': None}, 'credits': {'type': 'typing.Union[\n    typing.List[typing.Dict[str, str]],\n    typing.Callable,\n    NoneType,\n][\n    typing.List[typing.Dict[str, str]][\n        typing.Dict[str, str][str, str]\n    ],\n    Callable,\n    None,\n]', 'default': 'None', 'description': None}, 'height': {'type': 'int | str | None', 'default': 'None', 'description': None}, 'width': {'type': 'int | str | None', 'default': 'None', 'description': None}, 'licenses': {'type': 'typing.Optional[typing.Dict[str, str | pathlib.Path]][\n    typing.Dict[str, str | pathlib.Path][\n        str, str | pathlib.Path\n    ],\n    None,\n]', 'default': 'None', 'description': None}, 'effect': {'type': '"scroll" | "starwars" | "matrix"', 'default': '"scroll"', 'description': None}, 'speed': {'type': 'float', 'default': '40.0', 'description': None}, 'base_font_size': {'type': 'float', 'default': '1.5', 'description': None}, 'intro_title': {'type': 'str | None', 'default': 'None', 'description': None}, 'intro_subtitle': {'type': 'str | None', 'default': 'None', 'description': None}, 'sidebar_position': {'type': '"right" | "bottom"', 'default': '"right"', 'description': None}, 'logo_path': {'type': 'str | pathlib.Path | None', 'default': 'None', 'description': None}, 'show_logo': {'type': 'bool', 'default': 'True', 'description': None}, 'show_licenses': {'type': 'bool', 'default': 'True', 'description': None}, 'show_credits': {'type': 'bool', 'default': 'True', 'description': None}, 'logo_position': {'type': '"center" | "left" | "right"', 'default': '"center"', 'description': None}, 'logo_sizing': {'type': '"stretch" | "crop" | "resize"', 'default': '"resize"', 'description': None}, 'logo_width': {'type': 'int | str | None', 'default': 'None', 'description': None}, 'logo_height': {'type': 'int | str | None', 'default': 'None', 'description': None}, 'scroll_background_color': {'type': 'str | None', 'default': 'None', 'description': None}, 'scroll_title_color': {'type': 'str | None', 'default': 'None', 'description': None}, 'scroll_name_color': {'type': 'str | None', 'default': 'None', 'description': None}, 'layout_style': {'type': '"stacked" | "two-column"', 'default': '"stacked"', 'description': None}, 'title_uppercase': {'type': 'bool', 'default': 'False', 'description': None}, 'name_uppercase': {'type': 'bool', 'default': 'False', 'description': None}, 'section_title_uppercase': {'type': 'bool', 'default': 'True', 'description': None}, 'swap_font_sizes_on_two_column': {'type': 'bool', 'default': 'False', 'description': None}, 'label': {'type': 'str | gradio.i18n.I18nData | None', 'default': 'None', 'description': None}, 'every': {'type': 'float | None', 'default': 'None', 'description': None}, 'inputs': {'type': 'typing.Union[\n    gradio.components.base.Component,\n    typing.Sequence[gradio.components.base.Component],\n    set[gradio.components.base.Component],\n    NoneType,\n][\n    gradio.components.base.Component,\n    typing.Sequence[gradio.components.base.Component][\n        gradio.components.base.Component\n    ],\n    set[gradio.components.base.Component],\n    None,\n]', 'default': 'None', 'description': None}, 'show_label': {'type': 'bool', 'default': 'False', 'description': None}, 'container': {'type': 'bool', 'default': 'True', 'description': None}, 'scale': {'type': 'int | None', 'default': 'None', 'description': None}, 'min_width': {'type': 'int', 'default': '160', 'description': None}, 'interactive': {'type': 'bool | None', 'default': 'None', 'description': None}, 'visible': {'type': 'bool', 'default': 'True', 'description': None}, 'elem_id': {'type': 'str | None', 'default': 'None', 'description': None}, 'elem_classes': {'type': 'list[str] | str | None', 'default': 'None', 'description': None}, 'render': {'type': 'bool', 'default': 'True', 'description': None}, 'key': {'type': 'int | str | tuple[int | str, Ellipsis] | None', 'default': 'None', 'description': None}, 'preserved_by_key': {'type': 'list[str] | str | None', 'default': '"value"', 'description': None}}, 'postprocess': {'value': {'type': 'Any', 'description': None}}, 'preprocess': {'return': {'type': 'typing.Optional[typing.Dict[str, typing.Any]][\n    typing.Dict[str, typing.Any][str, Any], None\n]', 'description': 'Dict[str, Any] | None: The input payload, returned unchanged.'}, 'value': None}}, 'events': {'change': {'type': None, 'default': None, 'description': 'Triggered when the value of the CreditsPanel changes either because of user input (e.g. a user types in a textbox) OR because of a function update (e.g. an image receives a value from the output of an event trigger). See `.input()` for a listener that is only triggered by user input.'}}}, '__meta__': {'additional_interfaces': {}, 'user_fn_refs': {'CreditsPanel': []}}}
+_docs = {'CreditsPanel': {'description': 'A Gradio component for displaying credits with customizable visual effects, such as scrolling or Star Wars-style animations.\nThis component is configured via a single dictionary `value` that holds all settings.\nIt supports displaying a logo, licenses, sections, and various text styling options.\n\n    EVENTS (list): Supported events for the component, currently only `change`.', 'members': {'__init__': {'value': {'type': 'typing.Optional[typing.Dict[str, typing.Any]][\n    typing.Dict[str, typing.Any][str, Any], None\n]', 'default': 'None', 'description': None}, 'height': {'type': 'int | str | None', 'default': 'None', 'description': None}, 'width': {'type': 'int | str | None', 'default': 'None', 'description': None}, 'credits': {'type': 'typing.Union[\n    typing.List[typing.Dict[str, str]],\n    typing.Callable,\n    NoneType,\n][\n    typing.List[typing.Dict[str, str]][\n        typing.Dict[str, str][str, str]\n    ],\n    Callable,\n    None,\n]', 'default': 'None', 'description': None}, 'licenses': {'type': 'typing.Optional[typing.Dict[str, str | pathlib.Path]][\n    typing.Dict[str, str | pathlib.Path][\n        str, str | pathlib.Path\n    ],\n    None,\n]', 'default': 'None', 'description': None}, 'effect': {'type': '"scroll" | "starwars" | "matrix"', 'default': '"scroll"', 'description': None}, 'speed': {'type': 'float', 'default': '40.0', 'description': None}, 'base_font_size': {'type': 'float', 'default': '1.5', 'description': None}, 'intro_title': {'type': 'str | None', 'default': 'None', 'description': None}, 'intro_subtitle': {'type': 'str | None', 'default': 'None', 'description': None}, 'sidebar_position': {'type': '"right" | "bottom"', 'default': '"right"', 'description': None}, 'logo_path': {'type': 'str | pathlib.Path | None', 'default': 'None', 'description': None}, 'show_logo': {'type': 'bool', 'default': 'True', 'description': None}, 'show_licenses': {'type': 'bool', 'default': 'True', 'description': None}, 'show_credits': {'type': 'bool', 'default': 'True', 'description': None}, 'logo_position': {'type': '"center" | "left" | "right"', 'default': '"center"', 'description': None}, 'logo_sizing': {'type': '"stretch" | "crop" | "resize"', 'default': '"resize"', 'description': None}, 'logo_width': {'type': 'int | str | None', 'default': 'None', 'description': None}, 'logo_height': {'type': 'int | str | None', 'default': 'None', 'description': None}, 'scroll_background_color': {'type': 'str | None', 'default': 'None', 'description': None}, 'scroll_title_color': {'type': 'str | None', 'default': 'None', 'description': None}, 'scroll_name_color': {'type': 'str | None', 'default': 'None', 'description': None}, 'scroll_section_title_color': {'type': 'str | None', 'default': 'None', 'description': None}, 'layout_style': {'type': '"stacked" | "two-column"', 'default': '"stacked"', 'description': None}, 'title_uppercase': {'type': 'bool', 'default': 'False', 'description': None}, 'name_uppercase': {'type': 'bool', 'default': 'False', 'description': None}, 'section_title_uppercase': {'type': 'bool', 'default': 'True', 'description': None}, 'swap_font_sizes_on_two_column': {'type': 'bool', 'default': 'False', 'description': None}, 'scroll_logo_path': {'type': 'str | pathlib.Path | None', 'default': 'None', 'description': None}, 'scroll_logo_height': {'type': 'str', 'default': '"120px"', 'description': None}, 'label': {'type': 'str | gradio.i18n.I18nData | None', 'default': 'None', 'description': None}, 'every': {'type': 'float | None', 'default': 'None', 'description': None}, 'inputs': {'type': 'typing.Union[\n    gradio.components.base.Component,\n    typing.Sequence[gradio.components.base.Component],\n    set[gradio.components.base.Component],\n    NoneType,\n][\n    gradio.components.base.Component,\n    typing.Sequence[gradio.components.base.Component][\n        gradio.components.base.Component\n    ],\n    set[gradio.components.base.Component],\n    None,\n]', 'default': 'None', 'description': None}, 'show_label': {'type': 'bool', 'default': 'False', 'description': None}, 'container': {'type': 'bool', 'default': 'True', 'description': None}, 'scale': {'type': 'int | None', 'default': 'None', 'description': None}, 'min_width': {'type': 'int', 'default': '160', 'description': None}, 'interactive': {'type': 'bool | None', 'default': 'None', 'description': None}, 'visible': {'type': 'bool', 'default': 'True', 'description': None}, 'elem_id': {'type': 'str | None', 'default': 'None', 'description': None}, 'elem_classes': {'type': 'list[str] | str | None', 'default': 'None', 'description': None}, 'render': {'type': 'bool', 'default': 'True', 'description': None}, 'key': {'type': 'int | str | tuple[int | str, Ellipsis] | None', 'default': 'None', 'description': None}, 'preserved_by_key': {'type': 'list[str] | str | None', 'default': '"value"', 'description': None}}, 'postprocess': {'value': {'type': 'typing.Optional[typing.Dict[str, typing.Any]][\n    typing.Dict[str, typing.Any][str, Any], None\n]', 'description': None}}, 'preprocess': {'return': {'type': 'typing.Optional[typing.Dict[str, typing.Any]][\n    typing.Dict[str, typing.Any][str, Any], None\n]', 'description': None}, 'value': None}}, 'events': {'change': {'type': None, 'default': None, 'description': 'Triggered when the value of the CreditsPanel changes either because of user input (e.g. a user types in a textbox) OR because of a function update (e.g. an image receives a value from the output of an event trigger). See `.input()` for a listener that is only triggered by user input.'}}}, '__meta__': {'additional_interfaces': {}, 'user_fn_refs': {'CreditsPanel': []}}}
 
 abs_path = os.path.join(os.path.dirname(__file__), "css.css")
 
@@ -58,7 +58,7 @@ def setup_demo_files():
         with open("./assets/logo.webp", "w") as f:
             f.write("Placeholder WebP logo")
 
-# --- UPDATED: Credits list with sections ---
+# --- Credits list with sections ---
 credits_list = [
     {"section_title": "Project Leadership"},
     {"title": "Project Manager", "name": "Emma Thompson"},
@@ -87,6 +87,8 @@ DEFAULT_SPEEDS = {
     "starwars": 70.0,
     "matrix": 40.0
 }
+SCROLL_LOGO_PATH = "./assets/gradio_logo_white.png"
+LOGO_PATH="./assets/logo.webp"
 
 def update_panel(
     effect: str, 
@@ -104,39 +106,52 @@ def update_panel(
     logo_height: str | None,
     scroll_background_color: str | None, 
     scroll_title_color: str | None, 
+    scroll_section_title_color: str | None,
     scroll_name_color: str | None,    
     layout_style: str, 
     title_uppercase: bool, 
     name_uppercase: bool, 
     section_title_uppercase: bool,
-    swap_font_sizes: bool
+    swap_font_sizes: bool,
+    show_scroll_logo: bool,
+    scroll_logo_height: str | None
 ) -> dict:
     \"\"\"Callback function that updates all properties of the CreditsPanel component.\"\"\"
-    return gr.update(
-        visible=True,
-        effect=effect, 
-        speed=speed, 
-        base_font_size=base_font_size,
-        intro_title=intro_title, 
-        intro_subtitle=intro_subtitle,
-        sidebar_position=sidebar_position, 
-        show_logo=show_logo,
-        show_licenses=show_licenses, 
-        show_credits=show_credits,
-        logo_position=logo_position, 
-        logo_sizing=logo_sizing,
-        logo_width=logo_width, 
-        logo_height=logo_height,
-        scroll_background_color=scroll_background_color,
-        scroll_title_color=scroll_title_color,
-        scroll_name_color=scroll_name_color,        
-        layout_style=layout_style,
-        title_uppercase=title_uppercase,
-        name_uppercase=name_uppercase,
-        section_title_uppercase=section_title_uppercase,
-        swap_font_sizes_on_two_column=swap_font_sizes,
-        value=credits_list
-    )
+        
+    scroll_logo_path = SCROLL_LOGO_PATH if show_scroll_logo else None
+    
+    if not scroll_logo_height:
+        scroll_logo_height = "120px"
+        
+    return {
+        "credits": credits_list,
+        "licenses": license_paths,
+        "effect": effect,
+        "speed": speed,
+        "base_font_size": base_font_size,
+        "intro_title": intro_title,
+        "intro_subtitle": intro_subtitle,
+        "sidebar_position": sidebar_position,
+        "logo_path": LOGO_PATH, 
+        "show_logo": show_logo,
+        "show_licenses": show_licenses,
+        "show_credits": show_credits,
+        "logo_position": logo_position,
+        "logo_sizing": logo_sizing,
+        "logo_width": logo_width,
+        "logo_height": logo_height,
+        "scroll_background_color": scroll_background_color,
+        "scroll_title_color": scroll_title_color,
+        "scroll_name_color": scroll_name_color,
+        "scroll_section_title_color": scroll_section_title_color,
+        "layout_style": layout_style,
+        "title_uppercase": title_uppercase,
+        "name_uppercase": name_uppercase,
+        "section_title_uppercase": section_title_uppercase,
+        "swap_font_sizes_on_two_column": swap_font_sizes,
+        "scroll_logo_path": scroll_logo_path,
+        "scroll_logo_height": scroll_logo_height,
+    }
 
 def update_ui_on_effect_change(effect: str) -> tuple[float, float]:
     \"\"\"Updates sliders to sensible defaults when the animation effect is changed.\"\"\"
@@ -178,6 +193,14 @@ with gr.Blocks(theme=gr.themes.Ocean(), title="CreditsPanel Demo") as demo:
         name_uppercase_checkbox = gr.Checkbox(label="Name Uppercase", value=False)
         section_title_uppercase_checkbox = gr.Checkbox(label="Section Uppercase", value=True)
         
+        gr.Markdown("### Scrolling Logo")
+        show_scroll_logo_checkbox = gr.Checkbox(
+            label="Show Logo in Credits Roll", 
+            value=True, 
+            info="Toggles the logo above the intro text."
+        )
+        scroll_logo_height_input = gr.Textbox(label="Scrolling Logo Height", value="100px")
+        
         gr.Markdown("### Intro Text")
         intro_title_input = gr.Textbox(label="Intro Title", value="Gradio")
         intro_subtitle_input = gr.Textbox(label="Intro Subtitle", value="The best UI framework")
@@ -197,19 +220,20 @@ with gr.Blocks(theme=gr.themes.Ocean(), title="CreditsPanel Demo") as demo:
         gr.Markdown("### Color Settings (Scroll Effect)")
         scroll_background_color = gr.ColorPicker(label="Background Color", value="#000000")
         scroll_title_color = gr.ColorPicker(label="Title Color", value="#FFFFFF")
+        scroll_section_title_color = gr.ColorPicker(label="Section Title Color", value="#FFFFFF")
         scroll_name_color = gr.ColorPicker(label="Name Color", value="#FFFFFF")
 
-    panel = CreditsPanel(
+    panel = CreditsPanel(       
+        height=500,
         credits=credits_list,
         licenses=license_paths,
         effect="scroll",
-        height=500,
         speed=DEFAULT_SPEEDS["scroll"],
         base_font_size=1.5,
         intro_title="Gradio",
         intro_subtitle="The best UI framework",
         sidebar_position="right",
-        logo_path="./assets/logo.webp",
+        logo_path=LOGO_PATH,
         show_logo=True,
         show_licenses=True,
         show_credits=True,
@@ -220,11 +244,14 @@ with gr.Blocks(theme=gr.themes.Ocean(), title="CreditsPanel Demo") as demo:
         scroll_background_color="#000000",
         scroll_title_color="#FFFFFF",
         scroll_name_color="#FFFFFF",       
+        scroll_section_title_color="#FFFFFF",
         layout_style="stacked",
         title_uppercase=False,
         name_uppercase=False,
         section_title_uppercase=True,
         swap_font_sizes_on_two_column=False,
+        scroll_logo_path=SCROLL_LOGO_PATH,
+        scroll_logo_height="100px",
     )
 
     inputs = [
@@ -242,15 +269,23 @@ with gr.Blocks(theme=gr.themes.Ocean(), title="CreditsPanel Demo") as demo:
         logo_width_input, 
         logo_height_input,
         scroll_background_color, 
-        scroll_title_color, 
+        scroll_title_color,
+        scroll_section_title_color, 
         scroll_name_color,        
         layout_style_radio, 
         title_uppercase_checkbox, 
         name_uppercase_checkbox,
         section_title_uppercase_checkbox,
-        swap_sizes_checkbox
+        swap_sizes_checkbox,
+        show_scroll_logo_checkbox,
+        scroll_logo_height_input
     ]
 
+    demo.load(
+        fn=update_panel,
+        inputs=inputs,
+        outputs=panel
+    )
     layout_style_radio.change(
         fn=toggle_swap_checkbox_visibility,
         inputs=layout_style_radio,
@@ -294,7 +329,6 @@ The impact on the users predict function varies depending on whether the compone
 
 The code snippet below is accurate in cases where the component is used as both an input and an output.
 
-- **As input:** Is passed, dict[str, Any] | None: The input payload, returned unchanged.
 
 
  ```python
@@ -302,7 +336,9 @@ def predict(
     value: typing.Optional[typing.Dict[str, typing.Any]][
     typing.Dict[str, typing.Any][str, Any], None
 ]
-) -> Any:
+) -> typing.Optional[typing.Dict[str, typing.Any]][
+    typing.Dict[str, typing.Any][str, Any], None
+]:
     return value
 ```
 """, elem_classes=["md-custom", "CreditsPanel-user-fn"], header_links=True)

src/frontend/Index.svelte

@@ -29,6 +29,7 @@
    * @property {number | string | null} logo_height - Logo height.
    * @property {string | null} scroll_background_color - Scroll effect background color.
    * @property {string | null} scroll_title_color - Credit title color.
+   * @property {string | null} scroll_section_title_color - Section title color.
    * @property {string | null} scroll_name_color - Credit name color.
    * @property {number} title_font_size - Title font size (unused in StarWarsEffect).
    * @property {number} name_font_size - Name font size (unused in StarWarsEffect).
@@ -37,6 +38,8 @@
    * @property {boolean} name_uppercase - Transform name to uppercase.
    * @property {boolean} section_title_uppercase - Transform section title to uppercase.
    * @property {boolean} swap_font_sizes_on_two_column - Swap title/name font sizes in two-column layout.
+   * @property {{path: string | null, url: string | null, ...} | null} scroll_logo_path - Logo to display inside the scroll.
+   * @property {string} scroll_logo_height - Height of the scrolling logo.
    */
   export let value: Value | null = null;
   export let elem_id = "";
@@ -77,12 +80,15 @@
     logo_height: null,
     scroll_background_color: null,
     scroll_title_color: null,
+    scroll_section_title_color: null,
     scroll_name_color: null,    
     layout_style: "stacked",
     title_uppercase: false,
     name_uppercase: false,
     section_title_uppercase: true,
     swap_font_sizes_on_two_column: false,
+    scroll_logo_path: null,
+    scroll_logo_height: "120px",
   };
 
   // Tracks selected license for display
@@ -211,9 +217,12 @@
                       name_color={effectiveValue.scroll_name_color}                     
                       layout_style={effectiveValue.layout_style}
                       title_uppercase={effectiveValue.title_uppercase}
+                      scroll_section_title_color={effectiveValue.scroll_section_title_color}
                       name_uppercase={effectiveValue.name_uppercase}
                       section_title_uppercase={effectiveValue.section_title_uppercase}
                       swap_font_sizes_on_two_column={effectiveValue.swap_font_sizes_on_two_column}
+                      scroll_logo_path={effectiveValue.scroll_logo_path}
+                      scroll_logo_height={effectiveValue.scroll_logo_height}
                     />
                   {:else if effectiveValue.effect === "starwars"}
                     <StarWarsEffect
@@ -227,6 +236,8 @@
                       name_uppercase={effectiveValue.name_uppercase}
                       section_title_uppercase={effectiveValue.section_title_uppercase}
                       swap_font_sizes_on_two_column={effectiveValue.swap_font_sizes_on_two_column}           
+                      scroll_logo_path={effectiveValue.scroll_logo_path}
+                      scroll_logo_height={effectiveValue.scroll_logo_height}
                     />
                   {:else if effectiveValue.effect === "matrix"}
                     <MatrixEffect
@@ -240,6 +251,8 @@
                       name_uppercase={effectiveValue.name_uppercase}
                       section_title_uppercase={effectiveValue.section_title_uppercase}
                       swap_font_sizes_on_two_column={effectiveValue.swap_font_sizes_on_two_column}            
+                      scroll_logo_path={effectiveValue.scroll_logo_path}
+                      scroll_logo_height={effectiveValue.scroll_logo_height}
                     />
                   {/if}
                 </div>

src/frontend/shared/MatrixEffect.svelte

@@ -14,6 +14,8 @@
    * @property {boolean} name_uppercase - Transform name to uppercase.
    * @property {boolean} section_title_uppercase - Transform section title to uppercase.
    * @property {boolean} swap_font_sizes_on_two_column - Swap title/name font sizes.
+   * @property {{path: string | null, url: string | null, ...} | null} scroll_logo_path - Logo to display inside the scroll.
+   * @property {string} scroll_logo_height - Height of the scrolling logo.
    */
   export let credits: Props["credits"];
   export let speed: number = 20;
@@ -25,6 +27,8 @@
   export let name_uppercase: boolean = false;
   export let section_title_uppercase: boolean = true;
   export let swap_font_sizes_on_two_column: boolean = false;
+  export let scroll_logo_path: { url: string | null } | null = null;
+  export let scroll_logo_height: string = "120px";
 
   // Combines intro and credits for display
   $: display_items = (() => {
@@ -142,6 +146,11 @@
       bind:this={contentElement}
       style="--animation-duration: {speed}s;"
     >
+      {#if scroll_logo_path?.url}
+        <div class="scroll-logo-container">
+          <img src={scroll_logo_path.url} alt="Scrolling Logo" style:height={scroll_logo_height} />
+        </div>
+      {/if}
       {#each display_items as item}
         <!-- Render Section Title -->
         {#if item.section_title}
@@ -305,4 +314,16 @@
     text-align: left;
     padding-left: 1em;
   }
+  .scroll-logo-container {
+    text-align: center;
+    margin-bottom: 2rem;
+  }
+  .scroll-logo-container img {
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+    max-width: 80%;
+    object-fit: contain;    
+    filter: grayscale(1) brightness(0.5) sepia(100%) hue-rotate(50deg) saturate(500%); 
+  }
 </style>

src/frontend/shared/ScrollEffect.svelte

@@ -7,6 +7,7 @@
      * @property {number} base_font_size - Base font size in rem (default: 1.5).
      * @property {string | null} background_color - Background color (default: black).
      * @property {string | null} title_color - Title text color (default: white).
+     * @property {string | null} scroll_section_title_color - Section title color.
      * @property {string | null} name_color - Name text color (default: white).
      * @property {string | null} intro_title - Optional intro title.
      * @property {string | null} intro_subtitle - Optional intro subtitle.
@@ -15,12 +16,16 @@
      * @property {boolean} name_uppercase - Transform name to uppercase.
      * @property {boolean} section_title_uppercase - Transform section title to uppercase.
      * @property {boolean} swap_font_sizes_on_two_column - Swap title/name font sizes.
+     * @property {{path: string | null, url: string | null, ...} | null} scroll_logo_path - Logo to display inside the scroll.
+     * @property {string} scroll_logo_height - Height of the scrolling logo.
+     * 
      */
     export let credits: Props['credits'];
     export let speed: number;
     export let base_font_size: number = 1.5;
     export let background_color: string | null = null;
     export let title_color: string | null = null;
+    export let scroll_section_title_color: string | null = null;
     export let name_color: string | null = null;
     export let intro_title: string | null = null;
     export let intro_subtitle: string | null = null;
@@ -29,6 +34,8 @@
     export let name_uppercase: boolean = false;
     export let section_title_uppercase: boolean = true;
     export let swap_font_sizes_on_two_column: boolean = false;
+    export let scroll_logo_path: { url: string | null } | null = null;
+    export let scroll_logo_height: string = "120px";
 
     // Flag to trigger animation reset
     let reset = false;
@@ -48,8 +55,8 @@
 
     // Reactive styles for title and name
     $: title_style = (is_intro: boolean) => `color: ${title_color || 'white'}; font-size: ${is_intro ? base_font_size * 1.5 : base_font_size}rem;`;
-    $: name_style = (is_intro: boolean) => `color: ${name_color || 'white'}; font-size: ${is_intro ? base_font_size * 0.9 : base_font_size * 0.8}rem;`;
-    $: section_title_style = `color: ${title_color || 'white'}; font-size: ${base_font_size * 1.2}rem;`;
+    $: name_style = (is_intro: boolean) => `color: ${name_color || 'white'}; font-size: ${is_intro ? base_font_size * 0.9 : base_font_size * 0.8}rem;`;    
+    $: section_title_style = `color: ${scroll_section_title_color || title_color || 'white'}; font-size: ${base_font_size * 1.2}rem;`;
     
     // Reset animation on prop changes
    function resetAnimation() {
@@ -64,6 +71,11 @@
 <div class="wrapper" style:--animation-duration="{speed}s" style:background={background_color || 'black'}>
     {#if !reset}
         <div class="credits-container">
+            {#if scroll_logo_path?.url}
+                <div class="scroll-logo-container" style:height={scroll_logo_height}>
+                <img src={scroll_logo_path.url} alt="Scrolling Logo" style:height={scroll_logo_height} />
+                </div>
+            {/if}
             {#each display_items as item}
                 <!-- Render Section Title -->
                 {#if item.section_title}
@@ -108,6 +120,17 @@
         position: relative;
         font-family: sans-serif;
     }
+    .scroll-logo-container {                
+        text-align: center;
+        margin-bottom: 2rem; /* Space between logo and intro text */
+    }
+    .scroll-logo-container img {
+        display: block;
+        margin-left: auto;
+        margin-right: auto;
+        max-width: 80%;
+        object-fit: contain;
+    }
 
     /* Animated container holding all credit items */
     .credits-container {

src/frontend/shared/StarWarsEffect.svelte

@@ -19,6 +19,8 @@
      * @property {boolean} name_uppercase - Transform name to uppercase.
      * @property {boolean} section_title_uppercase - Transform section title to uppercase.
      * @property {boolean} swap_font_sizes_on_two_column - Swap title/name font sizes.
+     * @property {{path: string | null, url: string | null, ...} | null} scroll_logo_path - Logo to display inside the scroll.
+     * @property {string} scroll_logo_height - Height of the scrolling logo.
      */
     export let credits: Props['credits'];
     export let speed: number = 40;
@@ -33,6 +35,8 @@
     export let name_uppercase: boolean = false;
     export let section_title_uppercase: boolean = true;
     export let swap_font_sizes_on_two_column: boolean = false;
+    export let scroll_logo_path: { url: string | null } | null = null;
+    export let scroll_logo_height: string = "120px";
     
     // Reactive styles
     $: title_style = (is_intro: boolean) => `color: ${title_color || '#feda4a'}; font-size: ${is_intro ? base_font_size * 1.5 : base_font_size}rem;`;
@@ -84,6 +88,11 @@
     <div class="stars large" style="box-shadow: {large_stars};"></div>
 
     <div class="crawl" bind:this={crawlElement} style="--animation-duration: {speed}s;">
+        {#if scroll_logo_path?.url}
+                <div class="scroll-logo-container">
+                <img src={scroll_logo_path.url} alt="Scrolling Logo" style:height={scroll_logo_height} />
+                </div>
+        {/if}
         {#each display_items as item}
             <!-- Render Section Title -->
             {#if item.section_title}
@@ -112,6 +121,7 @@
 </div>
 
 <style>
+    
     .viewport {
         width: 100%;
         height: 100%;
@@ -146,6 +156,18 @@
     }
     
     /* STYLES */
+    .scroll-logo-container {
+        text-align: center;
+        margin-bottom: 2rem;
+    }
+    .scroll-logo-container img {
+        display: block;
+        margin-left: auto;
+        margin-right: auto;
+        max-width: 70%;
+        object-fit: contain;    
+        filter: grayscale(1) sepia(100%) hue-rotate(15deg) saturate(8) brightness(1.2);
+    }
     .uppercase { text-transform: uppercase; }
     
     .section-title {

src/pyproject.toml

@@ -8,7 +8,7 @@ build-backend = "hatchling.build"
 
 [project]
 name = "gradio_creditspanel"
-version = "0.0.3"
+version = "0.0.4"
 description = "Credits Panel for Gradio UI"
 readme = "README.md"
 license = "apache-2.0"