Upload folder using huggingface_hub

.gitignore

@@ -0,0 +1,14 @@
+.eggs/
+dist/
+.vscode/
+*.pyc
+__pycache__/
+*.py[cod]
+*$py.class
+__tmp/*
+*.pyi
+.mypycache
+.ruff_cache
+node_modules
+backend/**/templates/
+README_TEMPLATE.md

README.md

@@ -1,12 +1,781 @@
----
-title: Gradio Creditspanel
-emoji: 🏆
-colorFrom: purple
-colorTo: red
-sdk: gradio
-sdk_version: 5.45.0
-app_file: app.py
-pinned: false
----
-
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+---
+tags: [gradio-custom-component, HTML]
+title: gradio_creditspanel
+short_description: Credits Panel for Gradio UI
+colorFrom: blue
+colorTo: yellow
+sdk: gradio
+pinned: false
+app_file: space.py
+---
+
+# `gradio_creditspanel`
+<img alt="Static Badge" src="https://img.shields.io/badge/version%20-%200.0.1%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
+
+## Installation
+
+```bash
+pip install gradio_creditspanel
+```
+
+## Usage
+
+```python
+"""
+app.py
+
+This script serves as an interactive demonstration for the custom Gradio component `CreditsPanel`.
+It showcases all available features of the component, allowing users to dynamically adjust
+properties like animation effects, speed, layout, and styling. The app also demonstrates
+how to handle file dependencies (logo, licenses) in a portable way.
+"""
+
+import gradio as gr
+from gradio_creditspanel import CreditsPanel
+import os
+
+# --- 1. SETUP & DATA PREPARATION ---
+# This section prepares all necessary assets and data for the demo.
+# It ensures the demo runs out-of-the-box without manual setup.
+
+def setup_demo_files():
+    """
+    Creates necessary directories and dummy files (logo, licenses) for the demo.
+    This makes the application self-contained and easy to run.
+    """
+    # Create dummy license files
+    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\nhttp://www.apache.org/licenses/...")
+    if not os.path.exists("LICENSES/MIT.txt"):
+        with open("LICENSES/MIT.txt", "w") as f:
+            f.write("MIT License\nCopyright (c) 2025 Author\nPermission is hereby granted...")
+
+    # Create a placeholder logo if it doesn't exist
+    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")
+
+# Initial data for the credits roll
+credits_list = [
+    {"title": "Project Manager", "name": "Emma Thompson"},
+    {"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"},
+    {"title": "DevOps Engineer", "name": "Liam Patel"},
+    {"title": "Quality Assurance Lead", "name": "Sam Wilson"},
+    {"title": "Test Automation Engineer", "name": "Olivia Brown"},
+    {"title": "Security Analyst", "name": "David Kim"},
+    {"title": "Data Scientist", "name": "Sophie Martinez"},
+    {"title": "Machine Learning Engineer", "name": "Ethan Lee"},
+    {"title": "API Developer", "name": "Isabella Garcia"},
+    {"title": "Technical Writer", "name": "Noah Davis"},
+    {"title": "Scrum Master", "name": "Ava Rodriguez"},
+]
+
+# Paths to license files
+license_paths = {
+    "Gradio Framework": "./LICENSES/Apache.txt",
+    "This Component": "./LICENSES/MIT.txt"
+}
+
+# Default animation speeds for each effect to provide a good user experience
+DEFAULT_SPEEDS = {
+    "scroll": 40.0,
+    "starwars": 80.0,
+    "matrix": 40.0
+}
+
+# --- 2. GRADIO EVENT HANDLER FUNCTIONS ---
+# These functions define the application's interactive logic.
+
+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, 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
+) -> dict:
+    """
+    Callback function that updates all properties of the CreditsPanel component.
+    It takes the current state of all UI controls and returns a gr.update() dictionary.
+    """
+    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,
+        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,
+        value=credits_list  # The list of credits to display
+    )
+
+def update_ui_on_effect_change(effect: str) -> tuple[float, float]:
+    """
+    Updates the speed and font size sliders to sensible defaults when the
+    animation effect is changed.
+    """
+    font_size = 1.5
+    if effect == "starwars":
+        font_size = 6.0  # Star Wars effect looks better with a larger font
+    
+    speed = DEFAULT_SPEEDS.get(effect, 40.0)
+    return speed, font_size
+
+# --- 3. GRADIO UI DEFINITION ---
+# This section constructs the user interface using gr.Blocks.
+
+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",
+            info="Select the visual style for the credits."
+        )
+        speed_slider = gr.Slider(
+            minimum=5.0, maximum=100.0, step=1.0, value=DEFAULT_SPEEDS["scroll"],
+            label="Animation Speed (seconds)", info="Duration of one animation cycle."
+        )
+        font_size_slider = gr.Slider(
+            minimum=1.0, maximum=10.0, step=0.1, value=1.5,
+            label="Base Font Size (rem)", info="Controls the base font size."
+        )
+
+        gr.Markdown("### Intro Text")
+        intro_title_input = gr.Textbox(
+            label="Intro Title", value="Gradio", info="Main title for the intro sequence."
+        )
+        intro_subtitle_input = gr.Textbox(
+            label="Intro Subtitle", value="The best UI framework", info="Subtitle for the intro sequence."
+        )
+
+        gr.Markdown("### Layout & Visibility")
+        sidebar_position_radio = gr.Radio(
+            ["right", "bottom"], label="Sidebar Position", value="right",
+            info="Place the licenses sidebar on the right or bottom."
+        )
+        show_logo_checkbox = gr.Checkbox(label="Show Logo", value=True)
+        show_licenses_checkbox = gr.Checkbox(label="Show Licenses", 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")
+
+    # Instantiate the custom CreditsPanel component with default values
+    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="./assets/logo.webp",
+        show_logo=True,
+        show_licenses=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",
+    )
+
+    # List of all input components that should trigger a panel update
+    inputs = [
+        effect_radio, speed_slider, font_size_slider,
+        intro_title_input, intro_subtitle_input,
+        sidebar_position_radio, show_logo_checkbox, show_licenses_checkbox,
+        logo_position_radio, logo_sizing_radio, logo_width_input, logo_height_input,
+        scroll_background_color, scroll_title_color, scroll_name_color
+    ]
+
+    # --- 4. EVENT BINDING ---
+    # Connect the UI controls to the handler functions.
+
+    # Special event: changing the effect also updates speed and font size sliders
+    effect_radio.change(
+        fn=update_ui_on_effect_change,
+        inputs=effect_radio,
+        outputs=[speed_slider, font_size_slider]
+    )
+
+    # General event: any change in an input control updates the main panel
+    for input_component in inputs:
+        input_component.change(
+            fn=update_panel,
+            inputs=inputs,
+            outputs=panel
+        )
+
+# --- 5. APP LAUNCH ---
+if __name__ == "__main__":
+    setup_demo_files()
+    demo.launch()
+```
+
+## `CreditsPanel`
+
+### Initialization
+
+<table>
+<thead>
+<tr>
+<th align="left">name</th>
+<th align="left" style="width: 25%;">type</th>
+<th align="left">default</th>
+<th align="left">description</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td align="left"><code>value</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+Any
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">None</td>
+</tr>
+
+<tr>
+<td align="left"><code>credits</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,
+]
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">None</td>
+</tr>
+
+<tr>
+<td align="left"><code>height</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+int | str | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">None</td>
+</tr>
+
+<tr>
+<td align="left"><code>width</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+int | str | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">None</td>
+</tr>
+
+<tr>
+<td align="left"><code>licenses</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+typing.Optional[typing.Dict[str, str | pathlib.Path]][
+    typing.Dict[str, str | pathlib.Path][
+        str, str | pathlib.Path
+    ],
+    None,
+]
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">None</td>
+</tr>
+
+<tr>
+<td align="left"><code>effect</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+"scroll" | "starwars" | "matrix"
+```
+
+</td>
+<td align="left"><code>"scroll"</code></td>
+<td align="left">None</td>
+</tr>
+
+<tr>
+<td align="left"><code>speed</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+float
+```
+
+</td>
+<td align="left"><code>40.0</code></td>
+<td align="left">None</td>
+</tr>
+
+<tr>
+<td align="left"><code>base_font_size</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+float
+```
+
+</td>
+<td align="left"><code>1.5</code></td>
+<td align="left">None</td>
+</tr>
+
+<tr>
+<td align="left"><code>intro_title</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>intro_subtitle</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>sidebar_position</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+"right" | "bottom"
+```
+
+</td>
+<td align="left"><code>"right"</code></td>
+<td align="left">None</td>
+</tr>
+
+<tr>
+<td align="left"><code>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>show_logo</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+bool
+```
+
+</td>
+<td align="left"><code>True</code></td>
+<td align="left">None</td>
+</tr>
+
+<tr>
+<td align="left"><code>show_licenses</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+bool
+```
+
+</td>
+<td align="left"><code>True</code></td>
+<td align="left">None</td>
+</tr>
+
+<tr>
+<td align="left"><code>logo_position</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+"center" | "left" | "right"
+```
+
+</td>
+<td align="left"><code>"center"</code></td>
+<td align="left">None</td>
+</tr>
+
+<tr>
+<td align="left"><code>logo_sizing</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+"stretch" | "crop" | "resize"
+```
+
+</td>
+<td align="left"><code>"resize"</code></td>
+<td align="left">None</td>
+</tr>
+
+<tr>
+<td align="left"><code>logo_width</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+int | str | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">None</td>
+</tr>
+
+<tr>
+<td align="left"><code>logo_height</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+int | str | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">None</td>
+</tr>
+
+<tr>
+<td align="left"><code>scroll_background_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>scroll_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>scroll_name_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>label</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+str | gradio.i18n.I18nData | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">None</td>
+</tr>
+
+<tr>
+<td align="left"><code>every</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+float | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">None</td>
+</tr>
+
+<tr>
+<td align="left"><code>inputs</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+typing.Union[
+    gradio.components.base.Component,
+    typing.Sequence[gradio.components.base.Component],
+    set[gradio.components.base.Component],
+    NoneType,
+][
+    gradio.components.base.Component,
+    typing.Sequence[gradio.components.base.Component][
+        gradio.components.base.Component
+    ],
+    set[gradio.components.base.Component],
+    None,
+]
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">None</td>
+</tr>
+
+<tr>
+<td align="left"><code>show_label</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+bool
+```
+
+</td>
+<td align="left"><code>False</code></td>
+<td align="left">None</td>
+</tr>
+
+<tr>
+<td align="left"><code>container</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+bool
+```
+
+</td>
+<td align="left"><code>True</code></td>
+<td align="left">None</td>
+</tr>
+
+<tr>
+<td align="left"><code>scale</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+int | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">None</td>
+</tr>
+
+<tr>
+<td align="left"><code>min_width</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+int
+```
+
+</td>
+<td align="left"><code>160</code></td>
+<td align="left">None</td>
+</tr>
+
+<tr>
+<td align="left"><code>interactive</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+bool | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">None</td>
+</tr>
+
+<tr>
+<td align="left"><code>visible</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+bool
+```
+
+</td>
+<td align="left"><code>True</code></td>
+<td align="left">None</td>
+</tr>
+
+<tr>
+<td align="left"><code>elem_id</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>elem_classes</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+list[str] | str | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">None</td>
+</tr>
+
+<tr>
+<td align="left"><code>render</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+bool
+```
+
+</td>
+<td align="left"><code>True</code></td>
+<td align="left">None</td>
+</tr>
+
+<tr>
+<td align="left"><code>key</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+int | str | tuple[int | str, Ellipsis] | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">None</td>
+</tr>
+
+<tr>
+<td align="left"><code>preserved_by_key</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+list[str] | str | None
+```
+
+</td>
+<td align="left"><code>"value"</code></td>
+<td align="left">None</td>
+</tr>
+</tbody></table>
+
+
+### Events
+
+| name | description |
+|:-----|:------------|
+| `change` | 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. |
+
+
+
+### User function
+
+The impact on the users predict function varies depending on whether the component is used as an input or output for an event (or both).
+
+- When used as an Input, the component only impacts the input signature of the user function.
+- When used as an output, the component only impacts the return signature of the user function.
+
+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
+ def predict(
+     value: typing.Optional[typing.Dict[str, typing.Any]][
+    typing.Dict[str, typing.Any][str, Any], None
+]
+ ) -> Any:
+     return value
+ ```
+ 

app copy.py

@@ -0,0 +1,238 @@
+import gradio as gr
+from gradio_creditspanel import CreditsPanel
+import os
+
+# Create dummy license files
+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\nhttp://www.apache.org/licenses/...")
+if not os.path.exists("LICENSES/MIT.txt"):
+    with open("LICENSES/MIT.txt", "w") as f:
+        f.write("MIT License\nCopyright (c) 2025 Author\nPermission is hereby granted...")
+
+# Create assets directory for logo
+os.makedirs("assets", exist_ok=True)
+if not os.path.exists("./assets/logo.webp"):
+    print("Warning: ./assets/logo.webp not found. Creating placeholder. Replace with a valid WebP image.")
+    with open("./assets/logo.webp", "w") as f:
+        f.write("Placeholder WebP logo")
+else:
+    print("Logo found at ./assets/logo.webp")
+
+credits_list = [
+    {"title": "Project Manager", "name": "Emma Thompson"},
+    {"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"},
+    {"title": "DevOps Engineer", "name": "Liam Patel"},
+    {"title": "Quality Assurance Lead", "name": "Sam Wilson"},
+    {"title": "Test Automation Engineer", "name": "Olivia Brown"},
+    {"title": "Security Analyst", "name": "David Kim"},
+    {"title": "Data Scientist", "name": "Sophie Martinez"},
+    {"title": "Machine Learning Engineer", "name": "Ethan Lee"},
+    {"title": "API Developer", "name": "Isabella Garcia"},
+    {"title": "Technical Writer", "name": "Noah Davis"},
+    {"title": "Scrum Master", "name": "Ava Rodriguez"},
+    {"title": "Cloud Infrastructure Engineer", "name": "Lucas Nguyen"},
+    {"title": "Mobile Developer", "name": "Mia Hernandez"},
+    {"title": "Performance Engineer", "name": "James Taylor"},
+    {"title": "Component Concept", "name": "Your Name"},
+    {"title": "Support Engineer", "name": "Charlotte Moore"}
+]
+
+license_paths = {
+    "Gradio Framework": "./LICENSES/Apache.txt",
+    "This Component": "./LICENSES/MIT.txt"
+}
+
+DEFAULT_SPEEDS = {
+    "scroll": 40.0,
+    "starwars": 80.0,
+    "matrix": 40.0
+}
+
+def update_panel(
+    effect: str,
+    speed: float,
+    sidebar_position: str,
+    show_logo: bool,
+    show_licenses: bool,
+    logo_position: str,
+    logo_sizing: str,
+    logo_width: int | str | None,
+    logo_height: int | str | None,
+    scroll_background_color: str | None,
+    scroll_title_color: str | None,
+    scroll_name_color: str | None
+):
+    print(f"Updating panel: effect={effect}, speed={speed}, sidebar_position={sidebar_position}, show_logo={show_logo}, show_licenses={show_licenses}, logo_position={logo_position}, logo_sizing={logo_sizing}, logo_width={logo_width}, logo_height={logo_height}")
+    return gr.update(
+        visible=True,
+        effect=effect,
+        speed=speed,
+        sidebar_position=sidebar_position,
+        show_logo=show_logo,
+        show_licenses=show_licenses,
+        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,
+        value=credits_list
+        # value={
+        #     "credits": credits_list,
+        #     "licenses": license_paths,
+        #     "effect": effect,
+        #     "speed": speed,
+        #     "sidebar_position": sidebar_position,
+        #     "logo_path": "./assets/logo.webp",  # Handled by Gradio's file serving
+        #     "show_logo": show_logo,
+        #     "show_licenses": show_licenses,
+        #     "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
+        # }
+    )
+
+def update_speed_on_effect_change(effect: str):
+    """Update speed_slider to default speed when effect changes."""
+    return DEFAULT_SPEEDS.get(effect, 40.0)
+
+with gr.Blocks(theme=gr.themes.Ocean(), title="CreditsPanel Demo", css="") as demo:
+    gr.Markdown(
+        """
+        # Interactive CreditsPanel Demo
+        Use the sidebar controls to customize the credits panel.
+        """
+    )
+
+    with gr.Sidebar(position="right"):
+        effect_radio = gr.Radio(
+            ["scroll", "starwars", "matrix"],
+            label="Animation Effect",
+            value="scroll",
+            info="Select the visual style for the credits."
+        )
+        speed_slider = gr.Slider(
+            minimum=5.0,
+            maximum=100.0,
+            step=1.0,
+            value=DEFAULT_SPEEDS["scroll"],
+            label="Animation Speed (seconds)",
+            info="Duration of the animation cycle."
+        )
+        sidebar_position_radio = gr.Radio(
+            ["right", "bottom"],
+            label="Sidebar Position",
+            value="right",
+            info="Place the licenses sidebar on the right or bottom."
+        )
+        show_logo_checkbox = gr.Checkbox(
+            label="Show Logo",
+            value=True,
+            info="Toggle the logo panel."
+        )
+        show_licenses_checkbox = gr.Checkbox(
+            label="Show Licenses",
+            value=True,
+            info="Toggle the licenses sidebar."
+        )
+        logo_position_radio = gr.Radio(
+            ["center", "left", "right"],
+            label="Logo Position",
+            value="center",
+            info="Position of the logo in the panel."
+        )
+        logo_sizing_radio = gr.Radio(
+            ["stretch", "crop", "resize"],
+            label="Logo Sizing",
+            value="resize",
+            info="How the logo fits in the panel."
+        )
+        logo_width_input = gr.Textbox(
+            label="Logo Width (px or CSS)",
+            value="200px",
+            info="Width of the logo (e.g., '200px' or '50%')."
+        )
+        logo_height_input = gr.Textbox(
+            label="Logo Height (px or CSS)",
+            value="100px",
+            info="Height of the logo (e.g., '100px' or '10%')."
+        )
+        scroll_background_color = gr.ColorPicker(
+            label="Scroll Background Color",
+            value="#000000",
+            info="Background color for ScrollEffect."
+        )
+        scroll_title_color = gr.ColorPicker(
+            label="Scroll Title Color",
+            value="#FFFFFF",
+            info="Color for title text in ScrollEffect."
+        )
+        scroll_name_color = gr.ColorPicker(
+            label="Scroll Name Color",
+            value="#FFFFFF",
+            info="Color for name text in ScrollEffect."
+        )
+
+    panel = CreditsPanel(
+        credits=credits_list,
+        licenses=license_paths,
+        effect="scroll",
+        height=500,
+        speed=DEFAULT_SPEEDS["scroll"],
+        sidebar_position="right",
+        logo_path="./assets/logo.webp",  # Handled by Gradio's file serving
+        show_logo=True,
+        show_licenses=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",
+        visible=True
+    )
+
+    inputs = [
+        effect_radio,
+        speed_slider,
+        sidebar_position_radio,
+        show_logo_checkbox,
+        show_licenses_checkbox,
+        logo_position_radio,
+        logo_sizing_radio,
+        logo_width_input,
+        logo_height_input,
+        scroll_background_color,
+        scroll_title_color,
+        scroll_name_color
+    ]
+    
+    # Update speed when effect changes
+    effect_radio.change(
+        fn=update_speed_on_effect_change,
+        inputs=effect_radio,
+        outputs=speed_slider
+    )
+    
+    # Update panel for all inputs
+    for input_component in inputs:
+        input_component.change(
+            fn=update_panel,
+            inputs=inputs,
+            outputs=panel
+        )
+
+if __name__ == "__main__":
+    demo.launch(debug=True, share=False)

app.py

@@ -0,0 +1,227 @@
+"""
+app.py
+
+This script serves as an interactive demonstration for the custom Gradio component `CreditsPanel`.
+It showcases all available features of the component, allowing users to dynamically adjust
+properties like animation effects, speed, layout, and styling. The app also demonstrates
+how to handle file dependencies (logo, licenses) in a portable way.
+"""
+
+import gradio as gr
+from gradio_creditspanel import CreditsPanel
+import os
+
+# --- 1. SETUP & DATA PREPARATION ---
+# This section prepares all necessary assets and data for the demo.
+# It ensures the demo runs out-of-the-box without manual setup.
+
+def setup_demo_files():
+    """
+    Creates necessary directories and dummy files (logo, licenses) for the demo.
+    This makes the application self-contained and easy to run.
+    """
+    # Create dummy license files
+    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\nhttp://www.apache.org/licenses/...")
+    if not os.path.exists("LICENSES/MIT.txt"):
+        with open("LICENSES/MIT.txt", "w") as f:
+            f.write("MIT License\nCopyright (c) 2025 Author\nPermission is hereby granted...")
+
+    # Create a placeholder logo if it doesn't exist
+    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")
+
+# Initial data for the credits roll
+credits_list = [
+    {"title": "Project Manager", "name": "Emma Thompson"},
+    {"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"},
+    {"title": "DevOps Engineer", "name": "Liam Patel"},
+    {"title": "Quality Assurance Lead", "name": "Sam Wilson"},
+    {"title": "Test Automation Engineer", "name": "Olivia Brown"},
+    {"title": "Security Analyst", "name": "David Kim"},
+    {"title": "Data Scientist", "name": "Sophie Martinez"},
+    {"title": "Machine Learning Engineer", "name": "Ethan Lee"},
+    {"title": "API Developer", "name": "Isabella Garcia"},
+    {"title": "Technical Writer", "name": "Noah Davis"},
+    {"title": "Scrum Master", "name": "Ava Rodriguez"},
+]
+
+# Paths to license files
+license_paths = {
+    "Gradio Framework": "./LICENSES/Apache.txt",
+    "This Component": "./LICENSES/MIT.txt"
+}
+
+# Default animation speeds for each effect to provide a good user experience
+DEFAULT_SPEEDS = {
+    "scroll": 40.0,
+    "starwars": 80.0,
+    "matrix": 40.0
+}
+
+# --- 2. GRADIO EVENT HANDLER FUNCTIONS ---
+# These functions define the application's interactive logic.
+
+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, 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
+) -> dict:
+    """
+    Callback function that updates all properties of the CreditsPanel component.
+    It takes the current state of all UI controls and returns a gr.update() dictionary.
+    """
+    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,
+        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,
+        value=credits_list  # The list of credits to display
+    )
+
+def update_ui_on_effect_change(effect: str) -> tuple[float, float]:
+    """
+    Updates the speed and font size sliders to sensible defaults when the
+    animation effect is changed.
+    """
+    font_size = 1.5
+    if effect == "starwars":
+        font_size = 6.0  # Star Wars effect looks better with a larger font
+    
+    speed = DEFAULT_SPEEDS.get(effect, 40.0)
+    return speed, font_size
+
+# --- 3. GRADIO UI DEFINITION ---
+# This section constructs the user interface using gr.Blocks.
+
+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",
+            info="Select the visual style for the credits."
+        )
+        speed_slider = gr.Slider(
+            minimum=5.0, maximum=100.0, step=1.0, value=DEFAULT_SPEEDS["scroll"],
+            label="Animation Speed (seconds)", info="Duration of one animation cycle."
+        )
+        font_size_slider = gr.Slider(
+            minimum=1.0, maximum=10.0, step=0.1, value=1.5,
+            label="Base Font Size (rem)", info="Controls the base font size."
+        )
+
+        gr.Markdown("### Intro Text")
+        intro_title_input = gr.Textbox(
+            label="Intro Title", value="Gradio", info="Main title for the intro sequence."
+        )
+        intro_subtitle_input = gr.Textbox(
+            label="Intro Subtitle", value="The best UI framework", info="Subtitle for the intro sequence."
+        )
+
+        gr.Markdown("### Layout & Visibility")
+        sidebar_position_radio = gr.Radio(
+            ["right", "bottom"], label="Sidebar Position", value="right",
+            info="Place the licenses sidebar on the right or bottom."
+        )
+        show_logo_checkbox = gr.Checkbox(label="Show Logo", value=True)
+        show_licenses_checkbox = gr.Checkbox(label="Show Licenses", 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")
+
+    # Instantiate the custom CreditsPanel component with default values
+    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="./assets/logo.webp",
+        show_logo=True,
+        show_licenses=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",
+    )
+
+    # List of all input components that should trigger a panel update
+    inputs = [
+        effect_radio, speed_slider, font_size_slider,
+        intro_title_input, intro_subtitle_input,
+        sidebar_position_radio, show_logo_checkbox, show_licenses_checkbox,
+        logo_position_radio, logo_sizing_radio, logo_width_input, logo_height_input,
+        scroll_background_color, scroll_title_color, scroll_name_color
+    ]
+
+    # --- 4. EVENT BINDING ---
+    # Connect the UI controls to the handler functions.
+
+    # Special event: changing the effect also updates speed and font size sliders
+    effect_radio.change(
+        fn=update_ui_on_effect_change,
+        inputs=effect_radio,
+        outputs=[speed_slider, font_size_slider]
+    )
+
+    # General event: any change in an input control updates the main panel
+    for input_component in inputs:
+        input_component.change(
+            fn=update_panel,
+            inputs=inputs,
+            outputs=panel
+        )
+
+# --- 5. APP LAUNCH ---
+if __name__ == "__main__":
+    setup_demo_files()
+    demo.launch()

css.css

@@ -0,0 +1,157 @@
+html {
+	font-family: Inter;
+	font-size: 16px;
+	font-weight: 400;
+	line-height: 1.5;
+	-webkit-text-size-adjust: 100%;
+	background: #fff;
+	color: #323232;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+	text-rendering: optimizeLegibility;
+}
+
+:root {
+	--space: 1;
+	--vspace: calc(var(--space) * 1rem);
+	--vspace-0: calc(3 * var(--space) * 1rem);
+	--vspace-1: calc(2 * var(--space) * 1rem);
+	--vspace-2: calc(1.5 * var(--space) * 1rem);
+	--vspace-3: calc(0.5 * var(--space) * 1rem);
+}
+
+.app {
+	max-width: 748px !important;
+}
+
+.prose p {
+	margin: var(--vspace) 0;
+	line-height: var(--vspace * 2);
+	font-size: 1rem;
+}
+
+code {
+	font-family: "Inconsolata", sans-serif;
+	font-size: 16px;
+}
+
+h1,
+h1 code {
+	font-weight: 400;
+	line-height: calc(2.5 / var(--space) * var(--vspace));
+}
+
+h1 code {
+	background: none;
+	border: none;
+	letter-spacing: 0.05em;
+	padding-bottom: 5px;
+	position: relative;
+	padding: 0;
+}
+
+h2 {
+	margin: var(--vspace-1) 0 var(--vspace-2) 0;
+	line-height: 1em;
+}
+
+h3,
+h3 code {
+	margin: var(--vspace-1) 0 var(--vspace-2) 0;
+	line-height: 1em;
+}
+
+h4,
+h5,
+h6 {
+	margin: var(--vspace-3) 0 var(--vspace-3) 0;
+	line-height: var(--vspace);
+}
+
+.bigtitle,
+h1,
+h1 code {
+	font-size: calc(8px * 4.5);
+	word-break: break-word;
+}
+
+.title,
+h2,
+h2 code {
+	font-size: calc(8px * 3.375);
+	font-weight: lighter;
+	word-break: break-word;
+	border: none;
+	background: none;
+}
+
+.subheading1,
+h3,
+h3 code {
+	font-size: calc(8px * 1.8);
+	font-weight: 600;
+	border: none;
+	background: none;
+	letter-spacing: 0.1em;
+	text-transform: uppercase;
+}
+
+h2 code {
+	padding: 0;
+	position: relative;
+	letter-spacing: 0.05em;
+}
+
+blockquote {
+	font-size: calc(8px * 1.1667);
+	font-style: italic;
+	line-height: calc(1.1667 * var(--vspace));
+	margin: var(--vspace-2) var(--vspace-2);
+}
+
+.subheading2,
+h4 {
+	font-size: calc(8px * 1.4292);
+	text-transform: uppercase;
+	font-weight: 600;
+}
+
+.subheading3,
+h5 {
+	font-size: calc(8px * 1.2917);
+	line-height: calc(1.2917 * var(--vspace));
+
+	font-weight: lighter;
+	text-transform: uppercase;
+	letter-spacing: 0.15em;
+}
+
+h6 {
+	font-size: calc(8px * 1.1667);
+	font-size: 1.1667em;
+	font-weight: normal;
+	font-style: italic;
+	font-family: "le-monde-livre-classic-byol", serif !important;
+	letter-spacing: 0px !important;
+}
+
+#start .md > *:first-child {
+	margin-top: 0;
+}
+
+h2 + h3 {
+	margin-top: 0;
+}
+
+.md hr {
+	border: none;
+	border-top: 1px solid var(--block-border-color);
+	margin: var(--vspace-2) 0 var(--vspace-2) 0;
+}
+.prose ul {
+	margin: var(--vspace-2) 0 var(--vspace-1) 0;
+}
+
+.gap {
+	gap: 0;
+}

requirements.txt

@@ -0,0 +1 @@
+gradio_creditspanel

space.py

@@ -0,0 +1,350 @@
+
+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}, '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}, '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': []}}}
+
+abs_path = os.path.join(os.path.dirname(__file__), "css.css")
+
+with gr.Blocks(
+    css=abs_path,
+    theme=gr.themes.Ocean(
+        font_mono=[
+            gr.themes.GoogleFont("Inconsolata"),
+            "monospace",
+        ],
+    ),
+) as demo:
+    gr.Markdown(
+"""
+# `gradio_creditspanel`
+
+<div style="display: flex; gap: 7px;">
+<img alt="Static Badge" src="https://img.shields.io/badge/version%20-%200.0.1%20-%20orange">  
+</div>
+
+Credits Panel for Gradio UI
+""", elem_classes=["md-custom"], header_links=True)
+    app.render()
+    gr.Markdown(
+"""
+## Installation
+
+```bash
+pip install gradio_creditspanel
+```
+
+## Usage
+
+```python
+\"\"\"
+app.py
+
+This script serves as an interactive demonstration for the custom Gradio component `CreditsPanel`.
+It showcases all available features of the component, allowing users to dynamically adjust
+properties like animation effects, speed, layout, and styling. The app also demonstrates
+how to handle file dependencies (logo, licenses) in a portable way.
+\"\"\"
+
+import gradio as gr
+from gradio_creditspanel import CreditsPanel
+import os
+
+# --- 1. SETUP & DATA PREPARATION ---
+# This section prepares all necessary assets and data for the demo.
+# It ensures the demo runs out-of-the-box without manual setup.
+
+def setup_demo_files():
+    \"\"\"
+    Creates necessary directories and dummy files (logo, licenses) for the demo.
+    This makes the application self-contained and easy to run.
+    \"\"\"
+    # Create dummy license files
+    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\nhttp://www.apache.org/licenses/...")
+    if not os.path.exists("LICENSES/MIT.txt"):
+        with open("LICENSES/MIT.txt", "w") as f:
+            f.write("MIT License\nCopyright (c) 2025 Author\nPermission is hereby granted...")
+
+    # Create a placeholder logo if it doesn't exist
+    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")
+
+# Initial data for the credits roll
+credits_list = [
+    {"title": "Project Manager", "name": "Emma Thompson"},
+    {"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"},
+    {"title": "DevOps Engineer", "name": "Liam Patel"},
+    {"title": "Quality Assurance Lead", "name": "Sam Wilson"},
+    {"title": "Test Automation Engineer", "name": "Olivia Brown"},
+    {"title": "Security Analyst", "name": "David Kim"},
+    {"title": "Data Scientist", "name": "Sophie Martinez"},
+    {"title": "Machine Learning Engineer", "name": "Ethan Lee"},
+    {"title": "API Developer", "name": "Isabella Garcia"},
+    {"title": "Technical Writer", "name": "Noah Davis"},
+    {"title": "Scrum Master", "name": "Ava Rodriguez"},
+]
+
+# Paths to license files
+license_paths = {
+    "Gradio Framework": "./LICENSES/Apache.txt",
+    "This Component": "./LICENSES/MIT.txt"
+}
+
+# Default animation speeds for each effect to provide a good user experience
+DEFAULT_SPEEDS = {
+    "scroll": 40.0,
+    "starwars": 80.0,
+    "matrix": 40.0
+}
+
+# --- 2. GRADIO EVENT HANDLER FUNCTIONS ---
+# These functions define the application's interactive logic.
+
+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, 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
+) -> dict:
+    \"\"\"
+    Callback function that updates all properties of the CreditsPanel component.
+    It takes the current state of all UI controls and returns a gr.update() dictionary.
+    \"\"\"
+    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,
+        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,
+        value=credits_list  # The list of credits to display
+    )
+
+def update_ui_on_effect_change(effect: str) -> tuple[float, float]:
+    \"\"\"
+    Updates the speed and font size sliders to sensible defaults when the
+    animation effect is changed.
+    \"\"\"
+    font_size = 1.5
+    if effect == "starwars":
+        font_size = 6.0  # Star Wars effect looks better with a larger font
+    
+    speed = DEFAULT_SPEEDS.get(effect, 40.0)
+    return speed, font_size
+
+# --- 3. GRADIO UI DEFINITION ---
+# This section constructs the user interface using gr.Blocks.
+
+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",
+            info="Select the visual style for the credits."
+        )
+        speed_slider = gr.Slider(
+            minimum=5.0, maximum=100.0, step=1.0, value=DEFAULT_SPEEDS["scroll"],
+            label="Animation Speed (seconds)", info="Duration of one animation cycle."
+        )
+        font_size_slider = gr.Slider(
+            minimum=1.0, maximum=10.0, step=0.1, value=1.5,
+            label="Base Font Size (rem)", info="Controls the base font size."
+        )
+
+        gr.Markdown("### Intro Text")
+        intro_title_input = gr.Textbox(
+            label="Intro Title", value="Gradio", info="Main title for the intro sequence."
+        )
+        intro_subtitle_input = gr.Textbox(
+            label="Intro Subtitle", value="The best UI framework", info="Subtitle for the intro sequence."
+        )
+
+        gr.Markdown("### Layout & Visibility")
+        sidebar_position_radio = gr.Radio(
+            ["right", "bottom"], label="Sidebar Position", value="right",
+            info="Place the licenses sidebar on the right or bottom."
+        )
+        show_logo_checkbox = gr.Checkbox(label="Show Logo", value=True)
+        show_licenses_checkbox = gr.Checkbox(label="Show Licenses", 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")
+
+    # Instantiate the custom CreditsPanel component with default values
+    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="./assets/logo.webp",
+        show_logo=True,
+        show_licenses=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",
+    )
+
+    # List of all input components that should trigger a panel update
+    inputs = [
+        effect_radio, speed_slider, font_size_slider,
+        intro_title_input, intro_subtitle_input,
+        sidebar_position_radio, show_logo_checkbox, show_licenses_checkbox,
+        logo_position_radio, logo_sizing_radio, logo_width_input, logo_height_input,
+        scroll_background_color, scroll_title_color, scroll_name_color
+    ]
+
+    # --- 4. EVENT BINDING ---
+    # Connect the UI controls to the handler functions.
+
+    # Special event: changing the effect also updates speed and font size sliders
+    effect_radio.change(
+        fn=update_ui_on_effect_change,
+        inputs=effect_radio,
+        outputs=[speed_slider, font_size_slider]
+    )
+
+    # General event: any change in an input control updates the main panel
+    for input_component in inputs:
+        input_component.change(
+            fn=update_panel,
+            inputs=inputs,
+            outputs=panel
+        )
+
+# --- 5. APP LAUNCH ---
+if __name__ == "__main__":
+    setup_demo_files()
+    demo.launch()
+```
+""", elem_classes=["md-custom"], header_links=True)
+
+
+    gr.Markdown("""
+## `CreditsPanel`
+
+### Initialization
+""", elem_classes=["md-custom"], header_links=True)
+
+    gr.ParamViewer(value=_docs["CreditsPanel"]["members"]["__init__"], linkify=[])
+
+
+    gr.Markdown("### Events")
+    gr.ParamViewer(value=_docs["CreditsPanel"]["events"], linkify=['Event'])
+
+
+
+
+    gr.Markdown("""
+
+### User function
+
+The impact on the users predict function varies depending on whether the component is used as an input or output for an event (or both).
+
+- When used as an Input, the component only impacts the input signature of the user function.
+- When used as an output, the component only impacts the return signature of the user function.
+
+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
+def predict(
+    value: typing.Optional[typing.Dict[str, typing.Any]][
+    typing.Dict[str, typing.Any][str, Any], None
+]
+) -> Any:
+    return value
+```
+""", elem_classes=["md-custom", "CreditsPanel-user-fn"], header_links=True)
+
+
+
+
+    demo.load(None, js=r"""function() {
+    const refs = {};
+    const user_fn_refs = {
+          CreditsPanel: [], };
+    requestAnimationFrame(() => {
+
+        Object.entries(user_fn_refs).forEach(([key, refs]) => {
+            if (refs.length > 0) {
+                const el = document.querySelector(`.${key}-user-fn`);
+                if (!el) return;
+                refs.forEach(ref => {
+                    el.innerHTML = el.innerHTML.replace(
+                        new RegExp("\\b"+ref+"\\b", "g"),
+                        `<a href="#h-${ref.toLowerCase()}">${ref}</a>`
+                    );
+                })
+            }
+        })
+
+        Object.entries(refs).forEach(([key, refs]) => {
+            if (refs.length > 0) {
+                const el = document.querySelector(`.${key}`);
+                if (!el) return;
+                refs.forEach(ref => {
+                    el.innerHTML = el.innerHTML.replace(
+                        new RegExp("\\b"+ref+"\\b", "g"),
+                        `<a href="#h-${ref.toLowerCase()}">${ref}</a>`
+                    );
+                })
+            }
+        })
+    })
+}
+
+""")
+
+demo.launch()

src/.gitignore

@@ -0,0 +1,14 @@
+.eggs/
+dist/
+.vscode/
+*.pyc
+__pycache__/
+*.py[cod]
+*$py.class
+__tmp/*
+*.pyi
+.mypycache
+.ruff_cache
+node_modules
+backend/**/templates/
+README_TEMPLATE.md

src/.vscode/launch.json

@@ -0,0 +1,29 @@
+{
+    // Use IntelliSense to learn about possible attributes.
+    // Hover to view descriptions of existing attributes.
+    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "name": "Python Debugger: Current File",
+            "type": "debugpy",
+            "request": "launch",
+            "program": "${file}",
+            "console": "integratedTerminal",
+            "justMyCode": false
+        },
+        {
+            "name": "Gradio dev (Python attach)",
+            "type": "debugpy",
+            "request": "attach",
+            "processId": "${command:pickProcess}",
+            "justMyCode": false
+        },
+        {
+            "name": "Gradio dev (Svelte attach)",
+            "type": "chrome",
+            "request": "attach",
+            "port": 9222,
+        }
+    ]
+}

src/LICENSES/Apache.txt

@@ -0,0 +1,201 @@
+             Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+
+   APPENDIX: How to apply the Apache License to your work.
+
+      To apply the Apache License to your work, attach the following
+      boilerplate notice, with the fields enclosed by brackets "[]"
+      replaced with your own identifying information. (Don't include
+      the brackets!)  The text should be enclosed in the appropriate
+      comment syntax for the file format. We also recommend that a
+      file or class name and description of purpose be included on the
+      same "printed page" as the copyright notice for easier
+      identification within third-party archives.
+
+   Copyright [yyyy] [name of copyright owner]
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.

src/LICENSES/MIT.txt

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Author
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

src/README.md

@@ -0,0 +1,781 @@
+---
+tags: [gradio-custom-component, HTML]
+title: gradio_creditspanel
+short_description: Credits Panel for Gradio UI
+colorFrom: blue
+colorTo: yellow
+sdk: gradio
+pinned: false
+app_file: space.py
+---
+
+# `gradio_creditspanel`
+<img alt="Static Badge" src="https://img.shields.io/badge/version%20-%200.0.1%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
+
+## Installation
+
+```bash
+pip install gradio_creditspanel
+```
+
+## Usage
+
+```python
+"""
+app.py
+
+This script serves as an interactive demonstration for the custom Gradio component `CreditsPanel`.
+It showcases all available features of the component, allowing users to dynamically adjust
+properties like animation effects, speed, layout, and styling. The app also demonstrates
+how to handle file dependencies (logo, licenses) in a portable way.
+"""
+
+import gradio as gr
+from gradio_creditspanel import CreditsPanel
+import os
+
+# --- 1. SETUP & DATA PREPARATION ---
+# This section prepares all necessary assets and data for the demo.
+# It ensures the demo runs out-of-the-box without manual setup.
+
+def setup_demo_files():
+    """
+    Creates necessary directories and dummy files (logo, licenses) for the demo.
+    This makes the application self-contained and easy to run.
+    """
+    # Create dummy license files
+    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\nhttp://www.apache.org/licenses/...")
+    if not os.path.exists("LICENSES/MIT.txt"):
+        with open("LICENSES/MIT.txt", "w") as f:
+            f.write("MIT License\nCopyright (c) 2025 Author\nPermission is hereby granted...")
+
+    # Create a placeholder logo if it doesn't exist
+    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")
+
+# Initial data for the credits roll
+credits_list = [
+    {"title": "Project Manager", "name": "Emma Thompson"},
+    {"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"},
+    {"title": "DevOps Engineer", "name": "Liam Patel"},
+    {"title": "Quality Assurance Lead", "name": "Sam Wilson"},
+    {"title": "Test Automation Engineer", "name": "Olivia Brown"},
+    {"title": "Security Analyst", "name": "David Kim"},
+    {"title": "Data Scientist", "name": "Sophie Martinez"},
+    {"title": "Machine Learning Engineer", "name": "Ethan Lee"},
+    {"title": "API Developer", "name": "Isabella Garcia"},
+    {"title": "Technical Writer", "name": "Noah Davis"},
+    {"title": "Scrum Master", "name": "Ava Rodriguez"},
+]
+
+# Paths to license files
+license_paths = {
+    "Gradio Framework": "./LICENSES/Apache.txt",
+    "This Component": "./LICENSES/MIT.txt"
+}
+
+# Default animation speeds for each effect to provide a good user experience
+DEFAULT_SPEEDS = {
+    "scroll": 40.0,
+    "starwars": 80.0,
+    "matrix": 40.0
+}
+
+# --- 2. GRADIO EVENT HANDLER FUNCTIONS ---
+# These functions define the application's interactive logic.
+
+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, 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
+) -> dict:
+    """
+    Callback function that updates all properties of the CreditsPanel component.
+    It takes the current state of all UI controls and returns a gr.update() dictionary.
+    """
+    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,
+        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,
+        value=credits_list  # The list of credits to display
+    )
+
+def update_ui_on_effect_change(effect: str) -> tuple[float, float]:
+    """
+    Updates the speed and font size sliders to sensible defaults when the
+    animation effect is changed.
+    """
+    font_size = 1.5
+    if effect == "starwars":
+        font_size = 6.0  # Star Wars effect looks better with a larger font
+    
+    speed = DEFAULT_SPEEDS.get(effect, 40.0)
+    return speed, font_size
+
+# --- 3. GRADIO UI DEFINITION ---
+# This section constructs the user interface using gr.Blocks.
+
+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",
+            info="Select the visual style for the credits."
+        )
+        speed_slider = gr.Slider(
+            minimum=5.0, maximum=100.0, step=1.0, value=DEFAULT_SPEEDS["scroll"],
+            label="Animation Speed (seconds)", info="Duration of one animation cycle."
+        )
+        font_size_slider = gr.Slider(
+            minimum=1.0, maximum=10.0, step=0.1, value=1.5,
+            label="Base Font Size (rem)", info="Controls the base font size."
+        )
+
+        gr.Markdown("### Intro Text")
+        intro_title_input = gr.Textbox(
+            label="Intro Title", value="Gradio", info="Main title for the intro sequence."
+        )
+        intro_subtitle_input = gr.Textbox(
+            label="Intro Subtitle", value="The best UI framework", info="Subtitle for the intro sequence."
+        )
+
+        gr.Markdown("### Layout & Visibility")
+        sidebar_position_radio = gr.Radio(
+            ["right", "bottom"], label="Sidebar Position", value="right",
+            info="Place the licenses sidebar on the right or bottom."
+        )
+        show_logo_checkbox = gr.Checkbox(label="Show Logo", value=True)
+        show_licenses_checkbox = gr.Checkbox(label="Show Licenses", 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")
+
+    # Instantiate the custom CreditsPanel component with default values
+    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="./assets/logo.webp",
+        show_logo=True,
+        show_licenses=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",
+    )
+
+    # List of all input components that should trigger a panel update
+    inputs = [
+        effect_radio, speed_slider, font_size_slider,
+        intro_title_input, intro_subtitle_input,
+        sidebar_position_radio, show_logo_checkbox, show_licenses_checkbox,
+        logo_position_radio, logo_sizing_radio, logo_width_input, logo_height_input,
+        scroll_background_color, scroll_title_color, scroll_name_color
+    ]
+
+    # --- 4. EVENT BINDING ---
+    # Connect the UI controls to the handler functions.
+
+    # Special event: changing the effect also updates speed and font size sliders
+    effect_radio.change(
+        fn=update_ui_on_effect_change,
+        inputs=effect_radio,
+        outputs=[speed_slider, font_size_slider]
+    )
+
+    # General event: any change in an input control updates the main panel
+    for input_component in inputs:
+        input_component.change(
+            fn=update_panel,
+            inputs=inputs,
+            outputs=panel
+        )
+
+# --- 5. APP LAUNCH ---
+if __name__ == "__main__":
+    setup_demo_files()
+    demo.launch()
+```
+
+## `CreditsPanel`
+
+### Initialization
+
+<table>
+<thead>
+<tr>
+<th align="left">name</th>
+<th align="left" style="width: 25%;">type</th>
+<th align="left">default</th>
+<th align="left">description</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td align="left"><code>value</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+Any
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">None</td>
+</tr>
+
+<tr>
+<td align="left"><code>credits</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,
+]
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">None</td>
+</tr>
+
+<tr>
+<td align="left"><code>height</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+int | str | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">None</td>
+</tr>
+
+<tr>
+<td align="left"><code>width</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+int | str | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">None</td>
+</tr>
+
+<tr>
+<td align="left"><code>licenses</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+typing.Optional[typing.Dict[str, str | pathlib.Path]][
+    typing.Dict[str, str | pathlib.Path][
+        str, str | pathlib.Path
+    ],
+    None,
+]
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">None</td>
+</tr>
+
+<tr>
+<td align="left"><code>effect</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+"scroll" | "starwars" | "matrix"
+```
+
+</td>
+<td align="left"><code>"scroll"</code></td>
+<td align="left">None</td>
+</tr>
+
+<tr>
+<td align="left"><code>speed</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+float
+```
+
+</td>
+<td align="left"><code>40.0</code></td>
+<td align="left">None</td>
+</tr>
+
+<tr>
+<td align="left"><code>base_font_size</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+float
+```
+
+</td>
+<td align="left"><code>1.5</code></td>
+<td align="left">None</td>
+</tr>
+
+<tr>
+<td align="left"><code>intro_title</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>intro_subtitle</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>sidebar_position</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+"right" | "bottom"
+```
+
+</td>
+<td align="left"><code>"right"</code></td>
+<td align="left">None</td>
+</tr>
+
+<tr>
+<td align="left"><code>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>show_logo</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+bool
+```
+
+</td>
+<td align="left"><code>True</code></td>
+<td align="left">None</td>
+</tr>
+
+<tr>
+<td align="left"><code>show_licenses</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+bool
+```
+
+</td>
+<td align="left"><code>True</code></td>
+<td align="left">None</td>
+</tr>
+
+<tr>
+<td align="left"><code>logo_position</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+"center" | "left" | "right"
+```
+
+</td>
+<td align="left"><code>"center"</code></td>
+<td align="left">None</td>
+</tr>
+
+<tr>
+<td align="left"><code>logo_sizing</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+"stretch" | "crop" | "resize"
+```
+
+</td>
+<td align="left"><code>"resize"</code></td>
+<td align="left">None</td>
+</tr>
+
+<tr>
+<td align="left"><code>logo_width</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+int | str | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">None</td>
+</tr>
+
+<tr>
+<td align="left"><code>logo_height</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+int | str | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">None</td>
+</tr>
+
+<tr>
+<td align="left"><code>scroll_background_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>scroll_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>scroll_name_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>label</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+str | gradio.i18n.I18nData | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">None</td>
+</tr>
+
+<tr>
+<td align="left"><code>every</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+float | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">None</td>
+</tr>
+
+<tr>
+<td align="left"><code>inputs</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+typing.Union[
+    gradio.components.base.Component,
+    typing.Sequence[gradio.components.base.Component],
+    set[gradio.components.base.Component],
+    NoneType,
+][
+    gradio.components.base.Component,
+    typing.Sequence[gradio.components.base.Component][
+        gradio.components.base.Component
+    ],
+    set[gradio.components.base.Component],
+    None,
+]
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">None</td>
+</tr>
+
+<tr>
+<td align="left"><code>show_label</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+bool
+```
+
+</td>
+<td align="left"><code>False</code></td>
+<td align="left">None</td>
+</tr>
+
+<tr>
+<td align="left"><code>container</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+bool
+```
+
+</td>
+<td align="left"><code>True</code></td>
+<td align="left">None</td>
+</tr>
+
+<tr>
+<td align="left"><code>scale</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+int | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">None</td>
+</tr>
+
+<tr>
+<td align="left"><code>min_width</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+int
+```
+
+</td>
+<td align="left"><code>160</code></td>
+<td align="left">None</td>
+</tr>
+
+<tr>
+<td align="left"><code>interactive</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+bool | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">None</td>
+</tr>
+
+<tr>
+<td align="left"><code>visible</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+bool
+```
+
+</td>
+<td align="left"><code>True</code></td>
+<td align="left">None</td>
+</tr>
+
+<tr>
+<td align="left"><code>elem_id</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>elem_classes</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+list[str] | str | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">None</td>
+</tr>
+
+<tr>
+<td align="left"><code>render</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+bool
+```
+
+</td>
+<td align="left"><code>True</code></td>
+<td align="left">None</td>
+</tr>
+
+<tr>
+<td align="left"><code>key</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+int | str | tuple[int | str, Ellipsis] | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">None</td>
+</tr>
+
+<tr>
+<td align="left"><code>preserved_by_key</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+list[str] | str | None
+```
+
+</td>
+<td align="left"><code>"value"</code></td>
+<td align="left">None</td>
+</tr>
+</tbody></table>
+
+
+### Events
+
+| name | description |
+|:-----|:------------|
+| `change` | 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. |
+
+
+
+### User function
+
+The impact on the users predict function varies depending on whether the component is used as an input or output for an event (or both).
+
+- When used as an Input, the component only impacts the input signature of the user function.
+- When used as an output, the component only impacts the return signature of the user function.
+
+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
+ def predict(
+     value: typing.Optional[typing.Dict[str, typing.Any]][
+    typing.Dict[str, typing.Any][str, Any], None
+]
+ ) -> Any:
+     return value
+ ```
+ 

src/backend/gradio_creditspanel/__init__.py

@@ -0,0 +1,4 @@
+
+from .creditspanel import CreditsPanel
+
+__all__ = ['CreditsPanel']

src/backend/gradio_creditspanel/creditspanel.py

@@ -0,0 +1,260 @@
+from __future__ import annotations
+from typing import Any, Dict, List, Literal, Callable, Sequence
+from pathlib import Path
+from gradio_client import handle_file
+from gradio_client.utils import is_http_url_like
+from gradio_client.documentation import document
+from gradio.components import Component
+from gradio.events import Events
+from gradio.i18n import I18nData
+import os
+
+@document()
+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.
+
+    Attributes:
+        EVENTS (list): Supported events for the component, currently only `change`.
+    """
+
+    EVENTS = [Events.change]
+
+    def __init__(
+        self,
+        value: Any = None,
+        credits: List[Dict[str, str]] | Callable | None = None,
+        *,
+        height: int | str | None = None,
+        width: int | str | None = None,
+        licenses: Dict[str, str | Path] | None = None,
+        effect: Literal["scroll", "starwars", "matrix"] = "scroll",
+        speed: float = 40.0,
+        base_font_size: float = 1.5,
+        intro_title: str | None = None,
+        intro_subtitle: str | None = None,
+        sidebar_position: Literal["right", "bottom"] = "right",
+        logo_path: str | Path | None = None,
+        show_logo: bool = True,
+        show_licenses: bool = True,
+        logo_position: Literal["center", "left", "right"] = "center",
+        logo_sizing: Literal["stretch", "crop", "resize"] = "resize",
+        logo_width: int | str | None = None,
+        logo_height: int | str | None = None,
+        scroll_background_color: str | None = None,
+        scroll_title_color: str | None = None,
+        scroll_name_color: str | None = None,
+        label: str | I18nData | None = None,
+        every: float | None = None,
+        inputs: Component | Sequence[Component] | set[Component] | None = None,
+        show_label: bool = False,
+        container: bool = True,
+        scale: int | None = None,
+        min_width: int = 160,
+        interactive: bool | None = None,
+        visible: bool = True,
+        elem_id: str | None = None,
+        elem_classes: list[str] | str | None = None,
+        render: bool = True,
+        key: int | str | tuple[int | str, ...] | None = None,
+        preserved_by_key: list[str] | str | None = "value",
+    ):
+        """
+        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".
+            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.
+            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.
+            show_licenses (bool, optional): Whether to display licenses. 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.
+            scroll_title_color (str | None, optional): Color for credit titles.
+            scroll_name_color (str | None, optional): Color for credit names.
+            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".
+        """
+        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.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
+        super().__init__(
+            label=label,
+            every=every,
+            inputs=inputs,
+            show_label=show_label,
+            container=container,
+            scale=scale,
+            min_width=min_width,
+            interactive=interactive,
+            elem_id=elem_id,
+            elem_classes=elem_classes,
+            render=render,
+            key=key,
+            visible=visible,
+            preserved_by_key=preserved_by_key,
+            value=value,
+        )
+
+    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:
+            return None
+        path = str(self.logo_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):
+            return handle_file(path)
+        return None
+
+    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.
+        """
+        return payload
+
+    def postprocess(self, value: Any) -> Dict[str, Any] | None:
+        """
+        Postprocess the component's value to prepare data for rendering.
+
+        Args:
+            value (Any): Input value, typically a list of credits.
+
+        Returns:
+            Dict[str, Any] | None: Dictionary containing processed credits, licenses, and configuration, or None if no credits or licenses are provided.
+        """
+        credits_source = value if isinstance(value, list) else self.credits_data
+        if not credits_source and not self.licenses_paths:
+            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,
+            "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
+        }
+
+    def api_info(self) -> Dict[str, Any]:
+        """
+        Provide API information for the component.
+
+        Returns:
+            Dict[str, Any]: Dictionary indicating the component's data type ("object").
+        """
+        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.
+        """
+        return {
+            "credits": [{"title": "Example", "name": "Credit"}],
+            "licenses": {},
+            "effect": "scroll",
+            "speed": 20,
+            "sidebar_position": "right",
+            "logo_path": None,
+            "show_logo": True,
+            "show_licenses": True,
+            "logo_position": "center",
+            "logo_sizing": "resize",
+            "logo_width": None,
+            "logo_height": None,
+            "scroll_background_color": None,
+            "scroll_title_color": None,
+            "scroll_name_color": None
+        }
+
+    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"}]

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

@@ -0,0 +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-141h5y1.svelte-141h5y1{width:100%;height:100%;overflow:hidden;position:relative;font-family:sans-serif}.credit.intro-block.svelte-141h5y1.svelte-141h5y1{margin-bottom:5rem;text-align:center}.credits-container.svelte-141h5y1.svelte-141h5y1{position:absolute;bottom:0;transform:translateY(100%);width:100%;text-align:center;animation:svelte-141h5y1-scroll var(--animation-duration) linear infinite}.credit.svelte-141h5y1.svelte-141h5y1{margin-bottom:2rem}.credit.svelte-141h5y1 h2.svelte-141h5y1,.credit.svelte-141h5y1 p.svelte-141h5y1{margin:.5rem 0;font-family:sans-serif}@keyframes svelte-141h5y1-scroll{0%{transform:translateY(100%)}to{transform:translateY(-100%)}}.viewport.svelte-1gy01d0{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-1gy01d0{position:absolute;top:0;left:0;width:1px;height:1px;background:transparent;z-index:0;animation:svelte-1gy01d0-twinkle 10s linear infinite}.stars.small.svelte-1gy01d0{animation-duration:10s}.stars.medium.svelte-1gy01d0{animation-duration:15s}.stars.large.svelte-1gy01d0{animation-duration:20s}@keyframes svelte-1gy01d0-twinkle{0%{opacity:.6}50%{opacity:1}to{opacity:.6}}.crawl.svelte-1gy01d0{position:absolute;width:100%;bottom:0;transform-origin:50% 100%;animation:svelte-1gy01d0-crawl-animation var(--animation-duration) linear infinite;z-index:1;text-align:center}@keyframes svelte-1gy01d0-crawl-animation{0%{transform:rotateX(60deg) translateY(100%) translateZ(100px);opacity:1}to{transform:rotateX(60deg) translateY(-150%) translateZ(-1200px);opacity:1}}.credit.intro-block.svelte-1gy01d0{margin-bottom:5rem}.credit.svelte-1gy01d0{margin-bottom:2rem}h2.svelte-1gy01d0,p.svelte-1gy01d0{margin:.5rem 0;padding:0;white-space:nowrap}.matrix-container.svelte-8jsw80{width:100%;height:100%;position:relative;overflow:hidden}canvas.svelte-8jsw80{display:block;position:absolute;top:0;left:0;width:100%;height:100%;z-index:1}.credits-scroll-overlay.svelte-8jsw80{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-8jsw80{position:absolute;width:100%;bottom:0;transform:translateY(100%);animation:svelte-8jsw80-scroll-from-bottom var(--animation-duration) linear infinite}@keyframes svelte-8jsw80-scroll-from-bottom{0%{transform:translateY(100%)}to{transform:translateY(-100%)}}.credit-block.intro-block.svelte-8jsw80{margin-bottom:5rem}.credit-block.svelte-8jsw80{margin-bottom:2.5em}.title.svelte-8jsw80{color:#0f0;text-transform:uppercase;opacity:.8}.name.svelte-8jsw80{font-weight:700;color:#5f5;text-shadow:0 0 5px #0F0}.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-1ewbjj5.svelte-1ewbjj5,.outer-credits-wrapper.svelte-1ewbjj5.svelte-1ewbjj5{display:flex;flex-direction:column;width:100%;border:none}.logo-panel.svelte-1ewbjj5.svelte-1ewbjj5{background:var(--background-fill-primary);border:none;border-bottom:1px solid var(--border-color-primary);display:flex!important;align-items:center;justify-content:var(--logo-justify, center);width:100%}.credits-panel-wrapper.svelte-1ewbjj5.svelte-1ewbjj5{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-1ewbjj5.svelte-1ewbjj5{flex-grow:1;flex-shrink:1;min-width:200px;background:#000;overflow:hidden;position:relative}.licenses-sidebar.svelte-1ewbjj5.svelte-1ewbjj5{width:var(--sidebar-width, 400px);max-width:100%;max-height:var(--sidebar-max-height, none);flex-shrink:1;flex-grow:0;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-1ewbjj5 h3.svelte-1ewbjj5{margin:var(--spacing-lg);font-size:var(--text-lg)}.licenses-sidebar.svelte-1ewbjj5 li.svelte-1ewbjj5{padding:0;margin:0;cursor:default;border-bottom:1px solid var(--border-color-primary)}.licenses-sidebar.svelte-1ewbjj5 li button.svelte-1ewbjj5{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-1ewbjj5 li button.svelte-1ewbjj5:hover{background-color:var(--background-fill-primary)}.licenses-sidebar.svelte-1ewbjj5 li button.svelte-1ewbjj5:focus-visible{outline:2px solid var(--color-accent);outline-offset:-2px}.licenses-sidebar.svelte-1ewbjj5 li button.selected.svelte-1ewbjj5{background-color:var(--color-accent);color:#fff;font-weight:700}.license-display.svelte-1ewbjj5.svelte-1ewbjj5{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-1ewbjj5 h4.svelte-1ewbjj5{margin-top:0}.license-display.svelte-1ewbjj5 pre.svelte-1ewbjj5{white-space:pre-wrap;word-break:break-word;font-size:var(--text-sm);color:var(--body-text-color-subdued)}

src/backend/gradio_creditspanel/templates/example/index.js

@@ -0,0 +1,97 @@
+const {
+  HtmlTagHydration: r,
+  SvelteComponent: d,
+  attr: u,
+  children: o,
+  claim_element: h,
+  claim_html_tag: m,
+  detach: c,
+  element: g,
+  init: v,
+  insert_hydration: y,
+  noop: _,
+  safe_not_equal: b,
+  toggle_class: i
+} = window.__gradio__svelte__internal;
+function q(n) {
+  let e, a;
+  return {
+    c() {
+      e = g("div"), a = new r(!1), this.h();
+    },
+    l(l) {
+      e = h(l, "DIV", { class: !0 });
+      var t = o(e);
+      a = m(t, !1), t.forEach(c), this.h();
+    },
+    h() {
+      a.a = null, u(e, "class", "prose svelte-180qqaf"), i(
+        e,
+        "table",
+        /*type*/
+        n[1] === "table"
+      ), i(
+        e,
+        "gallery",
+        /*type*/
+        n[1] === "gallery"
+      ), i(
+        e,
+        "selected",
+        /*selected*/
+        n[2]
+      );
+    },
+    m(l, t) {
+      y(l, e, t), a.m(
+        /*value*/
+        n[0],
+        e
+      );
+    },
+    p(l, [t]) {
+      t & /*value*/
+      1 && a.p(
+        /*value*/
+        l[0]
+      ), t & /*type*/
+      2 && i(
+        e,
+        "table",
+        /*type*/
+        l[1] === "table"
+      ), t & /*type*/
+      2 && i(
+        e,
+        "gallery",
+        /*type*/
+        l[1] === "gallery"
+      ), t & /*selected*/
+      4 && i(
+        e,
+        "selected",
+        /*selected*/
+        l[2]
+      );
+    },
+    i: _,
+    o: _,
+    d(l) {
+      l && c(e);
+    }
+  };
+}
+function w(n, e, a) {
+  let { value: l } = e, { type: t } = e, { selected: f = !1 } = e;
+  return n.$$set = (s) => {
+    "value" in s && a(0, l = s.value), "type" in s && a(1, t = s.type), "selected" in s && a(2, f = s.selected);
+  }, [l, t, f];
+}
+class E extends d {
+  constructor(e) {
+    super(), v(this, e, w, q, b, { value: 0, type: 1, selected: 2 });
+  }
+}
+export {
+  E as default
+};

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

@@ -0,0 +1 @@
+.gallery.svelte-180qqaf{padding:var(--size-2)}

src/demo/app copy.py

@@ -0,0 +1,238 @@
+import gradio as gr
+from gradio_creditspanel import CreditsPanel
+import os
+
+# Create dummy license files
+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\nhttp://www.apache.org/licenses/...")
+if not os.path.exists("LICENSES/MIT.txt"):
+    with open("LICENSES/MIT.txt", "w") as f:
+        f.write("MIT License\nCopyright (c) 2025 Author\nPermission is hereby granted...")
+
+# Create assets directory for logo
+os.makedirs("assets", exist_ok=True)
+if not os.path.exists("./assets/logo.webp"):
+    print("Warning: ./assets/logo.webp not found. Creating placeholder. Replace with a valid WebP image.")
+    with open("./assets/logo.webp", "w") as f:
+        f.write("Placeholder WebP logo")
+else:
+    print("Logo found at ./assets/logo.webp")
+
+credits_list = [
+    {"title": "Project Manager", "name": "Emma Thompson"},
+    {"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"},
+    {"title": "DevOps Engineer", "name": "Liam Patel"},
+    {"title": "Quality Assurance Lead", "name": "Sam Wilson"},
+    {"title": "Test Automation Engineer", "name": "Olivia Brown"},
+    {"title": "Security Analyst", "name": "David Kim"},
+    {"title": "Data Scientist", "name": "Sophie Martinez"},
+    {"title": "Machine Learning Engineer", "name": "Ethan Lee"},
+    {"title": "API Developer", "name": "Isabella Garcia"},
+    {"title": "Technical Writer", "name": "Noah Davis"},
+    {"title": "Scrum Master", "name": "Ava Rodriguez"},
+    {"title": "Cloud Infrastructure Engineer", "name": "Lucas Nguyen"},
+    {"title": "Mobile Developer", "name": "Mia Hernandez"},
+    {"title": "Performance Engineer", "name": "James Taylor"},
+    {"title": "Component Concept", "name": "Your Name"},
+    {"title": "Support Engineer", "name": "Charlotte Moore"}
+]
+
+license_paths = {
+    "Gradio Framework": "./LICENSES/Apache.txt",
+    "This Component": "./LICENSES/MIT.txt"
+}
+
+DEFAULT_SPEEDS = {
+    "scroll": 40.0,
+    "starwars": 80.0,
+    "matrix": 40.0
+}
+
+def update_panel(
+    effect: str,
+    speed: float,
+    sidebar_position: str,
+    show_logo: bool,
+    show_licenses: bool,
+    logo_position: str,
+    logo_sizing: str,
+    logo_width: int | str | None,
+    logo_height: int | str | None,
+    scroll_background_color: str | None,
+    scroll_title_color: str | None,
+    scroll_name_color: str | None
+):
+    print(f"Updating panel: effect={effect}, speed={speed}, sidebar_position={sidebar_position}, show_logo={show_logo}, show_licenses={show_licenses}, logo_position={logo_position}, logo_sizing={logo_sizing}, logo_width={logo_width}, logo_height={logo_height}")
+    return gr.update(
+        visible=True,
+        effect=effect,
+        speed=speed,
+        sidebar_position=sidebar_position,
+        show_logo=show_logo,
+        show_licenses=show_licenses,
+        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,
+        value=credits_list
+        # value={
+        #     "credits": credits_list,
+        #     "licenses": license_paths,
+        #     "effect": effect,
+        #     "speed": speed,
+        #     "sidebar_position": sidebar_position,
+        #     "logo_path": "./assets/logo.webp",  # Handled by Gradio's file serving
+        #     "show_logo": show_logo,
+        #     "show_licenses": show_licenses,
+        #     "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
+        # }
+    )
+
+def update_speed_on_effect_change(effect: str):
+    """Update speed_slider to default speed when effect changes."""
+    return DEFAULT_SPEEDS.get(effect, 40.0)
+
+with gr.Blocks(theme=gr.themes.Ocean(), title="CreditsPanel Demo", css="") as demo:
+    gr.Markdown(
+        """
+        # Interactive CreditsPanel Demo
+        Use the sidebar controls to customize the credits panel.
+        """
+    )
+
+    with gr.Sidebar(position="right"):
+        effect_radio = gr.Radio(
+            ["scroll", "starwars", "matrix"],
+            label="Animation Effect",
+            value="scroll",
+            info="Select the visual style for the credits."
+        )
+        speed_slider = gr.Slider(
+            minimum=5.0,
+            maximum=100.0,
+            step=1.0,
+            value=DEFAULT_SPEEDS["scroll"],
+            label="Animation Speed (seconds)",
+            info="Duration of the animation cycle."
+        )
+        sidebar_position_radio = gr.Radio(
+            ["right", "bottom"],
+            label="Sidebar Position",
+            value="right",
+            info="Place the licenses sidebar on the right or bottom."
+        )
+        show_logo_checkbox = gr.Checkbox(
+            label="Show Logo",
+            value=True,
+            info="Toggle the logo panel."
+        )
+        show_licenses_checkbox = gr.Checkbox(
+            label="Show Licenses",
+            value=True,
+            info="Toggle the licenses sidebar."
+        )
+        logo_position_radio = gr.Radio(
+            ["center", "left", "right"],
+            label="Logo Position",
+            value="center",
+            info="Position of the logo in the panel."
+        )
+        logo_sizing_radio = gr.Radio(
+            ["stretch", "crop", "resize"],
+            label="Logo Sizing",
+            value="resize",
+            info="How the logo fits in the panel."
+        )
+        logo_width_input = gr.Textbox(
+            label="Logo Width (px or CSS)",
+            value="200px",
+            info="Width of the logo (e.g., '200px' or '50%')."
+        )
+        logo_height_input = gr.Textbox(
+            label="Logo Height (px or CSS)",
+            value="100px",
+            info="Height of the logo (e.g., '100px' or '10%')."
+        )
+        scroll_background_color = gr.ColorPicker(
+            label="Scroll Background Color",
+            value="#000000",
+            info="Background color for ScrollEffect."
+        )
+        scroll_title_color = gr.ColorPicker(
+            label="Scroll Title Color",
+            value="#FFFFFF",
+            info="Color for title text in ScrollEffect."
+        )
+        scroll_name_color = gr.ColorPicker(
+            label="Scroll Name Color",
+            value="#FFFFFF",
+            info="Color for name text in ScrollEffect."
+        )
+
+    panel = CreditsPanel(
+        credits=credits_list,
+        licenses=license_paths,
+        effect="scroll",
+        height=500,
+        speed=DEFAULT_SPEEDS["scroll"],
+        sidebar_position="right",
+        logo_path="./assets/logo.webp",  # Handled by Gradio's file serving
+        show_logo=True,
+        show_licenses=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",
+        visible=True
+    )
+
+    inputs = [
+        effect_radio,
+        speed_slider,
+        sidebar_position_radio,
+        show_logo_checkbox,
+        show_licenses_checkbox,
+        logo_position_radio,
+        logo_sizing_radio,
+        logo_width_input,
+        logo_height_input,
+        scroll_background_color,
+        scroll_title_color,
+        scroll_name_color
+    ]
+    
+    # Update speed when effect changes
+    effect_radio.change(
+        fn=update_speed_on_effect_change,
+        inputs=effect_radio,
+        outputs=speed_slider
+    )
+    
+    # Update panel for all inputs
+    for input_component in inputs:
+        input_component.change(
+            fn=update_panel,
+            inputs=inputs,
+            outputs=panel
+        )
+
+if __name__ == "__main__":
+    demo.launch(debug=True, share=False)

src/demo/app.py

@@ -0,0 +1,227 @@
+"""
+app.py
+
+This script serves as an interactive demonstration for the custom Gradio component `CreditsPanel`.
+It showcases all available features of the component, allowing users to dynamically adjust
+properties like animation effects, speed, layout, and styling. The app also demonstrates
+how to handle file dependencies (logo, licenses) in a portable way.
+"""
+
+import gradio as gr
+from gradio_creditspanel import CreditsPanel
+import os
+
+# --- 1. SETUP & DATA PREPARATION ---
+# This section prepares all necessary assets and data for the demo.
+# It ensures the demo runs out-of-the-box without manual setup.
+
+def setup_demo_files():
+    """
+    Creates necessary directories and dummy files (logo, licenses) for the demo.
+    This makes the application self-contained and easy to run.
+    """
+    # Create dummy license files
+    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\nhttp://www.apache.org/licenses/...")
+    if not os.path.exists("LICENSES/MIT.txt"):
+        with open("LICENSES/MIT.txt", "w") as f:
+            f.write("MIT License\nCopyright (c) 2025 Author\nPermission is hereby granted...")
+
+    # Create a placeholder logo if it doesn't exist
+    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")
+
+# Initial data for the credits roll
+credits_list = [
+    {"title": "Project Manager", "name": "Emma Thompson"},
+    {"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"},
+    {"title": "DevOps Engineer", "name": "Liam Patel"},
+    {"title": "Quality Assurance Lead", "name": "Sam Wilson"},
+    {"title": "Test Automation Engineer", "name": "Olivia Brown"},
+    {"title": "Security Analyst", "name": "David Kim"},
+    {"title": "Data Scientist", "name": "Sophie Martinez"},
+    {"title": "Machine Learning Engineer", "name": "Ethan Lee"},
+    {"title": "API Developer", "name": "Isabella Garcia"},
+    {"title": "Technical Writer", "name": "Noah Davis"},
+    {"title": "Scrum Master", "name": "Ava Rodriguez"},
+]
+
+# Paths to license files
+license_paths = {
+    "Gradio Framework": "./LICENSES/Apache.txt",
+    "This Component": "./LICENSES/MIT.txt"
+}
+
+# Default animation speeds for each effect to provide a good user experience
+DEFAULT_SPEEDS = {
+    "scroll": 40.0,
+    "starwars": 80.0,
+    "matrix": 40.0
+}
+
+# --- 2. GRADIO EVENT HANDLER FUNCTIONS ---
+# These functions define the application's interactive logic.
+
+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, 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
+) -> dict:
+    """
+    Callback function that updates all properties of the CreditsPanel component.
+    It takes the current state of all UI controls and returns a gr.update() dictionary.
+    """
+    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,
+        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,
+        value=credits_list  # The list of credits to display
+    )
+
+def update_ui_on_effect_change(effect: str) -> tuple[float, float]:
+    """
+    Updates the speed and font size sliders to sensible defaults when the
+    animation effect is changed.
+    """
+    font_size = 1.5
+    if effect == "starwars":
+        font_size = 6.0  # Star Wars effect looks better with a larger font
+    
+    speed = DEFAULT_SPEEDS.get(effect, 40.0)
+    return speed, font_size
+
+# --- 3. GRADIO UI DEFINITION ---
+# This section constructs the user interface using gr.Blocks.
+
+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",
+            info="Select the visual style for the credits."
+        )
+        speed_slider = gr.Slider(
+            minimum=5.0, maximum=100.0, step=1.0, value=DEFAULT_SPEEDS["scroll"],
+            label="Animation Speed (seconds)", info="Duration of one animation cycle."
+        )
+        font_size_slider = gr.Slider(
+            minimum=1.0, maximum=10.0, step=0.1, value=1.5,
+            label="Base Font Size (rem)", info="Controls the base font size."
+        )
+
+        gr.Markdown("### Intro Text")
+        intro_title_input = gr.Textbox(
+            label="Intro Title", value="Gradio", info="Main title for the intro sequence."
+        )
+        intro_subtitle_input = gr.Textbox(
+            label="Intro Subtitle", value="The best UI framework", info="Subtitle for the intro sequence."
+        )
+
+        gr.Markdown("### Layout & Visibility")
+        sidebar_position_radio = gr.Radio(
+            ["right", "bottom"], label="Sidebar Position", value="right",
+            info="Place the licenses sidebar on the right or bottom."
+        )
+        show_logo_checkbox = gr.Checkbox(label="Show Logo", value=True)
+        show_licenses_checkbox = gr.Checkbox(label="Show Licenses", 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")
+
+    # Instantiate the custom CreditsPanel component with default values
+    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="./assets/logo.webp",
+        show_logo=True,
+        show_licenses=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",
+    )
+
+    # List of all input components that should trigger a panel update
+    inputs = [
+        effect_radio, speed_slider, font_size_slider,
+        intro_title_input, intro_subtitle_input,
+        sidebar_position_radio, show_logo_checkbox, show_licenses_checkbox,
+        logo_position_radio, logo_sizing_radio, logo_width_input, logo_height_input,
+        scroll_background_color, scroll_title_color, scroll_name_color
+    ]
+
+    # --- 4. EVENT BINDING ---
+    # Connect the UI controls to the handler functions.
+
+    # Special event: changing the effect also updates speed and font size sliders
+    effect_radio.change(
+        fn=update_ui_on_effect_change,
+        inputs=effect_radio,
+        outputs=[speed_slider, font_size_slider]
+    )
+
+    # General event: any change in an input control updates the main panel
+    for input_component in inputs:
+        input_component.change(
+            fn=update_panel,
+            inputs=inputs,
+            outputs=panel
+        )
+
+# --- 5. APP LAUNCH ---
+if __name__ == "__main__":
+    setup_demo_files()
+    demo.launch()

src/demo/css.css

@@ -0,0 +1,157 @@
+html {
+	font-family: Inter;
+	font-size: 16px;
+	font-weight: 400;
+	line-height: 1.5;
+	-webkit-text-size-adjust: 100%;
+	background: #fff;
+	color: #323232;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+	text-rendering: optimizeLegibility;
+}
+
+:root {
+	--space: 1;
+	--vspace: calc(var(--space) * 1rem);
+	--vspace-0: calc(3 * var(--space) * 1rem);
+	--vspace-1: calc(2 * var(--space) * 1rem);
+	--vspace-2: calc(1.5 * var(--space) * 1rem);
+	--vspace-3: calc(0.5 * var(--space) * 1rem);
+}
+
+.app {
+	max-width: 748px !important;
+}
+
+.prose p {
+	margin: var(--vspace) 0;
+	line-height: var(--vspace * 2);
+	font-size: 1rem;
+}
+
+code {
+	font-family: "Inconsolata", sans-serif;
+	font-size: 16px;
+}
+
+h1,
+h1 code {
+	font-weight: 400;
+	line-height: calc(2.5 / var(--space) * var(--vspace));
+}
+
+h1 code {
+	background: none;
+	border: none;
+	letter-spacing: 0.05em;
+	padding-bottom: 5px;
+	position: relative;
+	padding: 0;
+}
+
+h2 {
+	margin: var(--vspace-1) 0 var(--vspace-2) 0;
+	line-height: 1em;
+}
+
+h3,
+h3 code {
+	margin: var(--vspace-1) 0 var(--vspace-2) 0;
+	line-height: 1em;
+}
+
+h4,
+h5,
+h6 {
+	margin: var(--vspace-3) 0 var(--vspace-3) 0;
+	line-height: var(--vspace);
+}
+
+.bigtitle,
+h1,
+h1 code {
+	font-size: calc(8px * 4.5);
+	word-break: break-word;
+}
+
+.title,
+h2,
+h2 code {
+	font-size: calc(8px * 3.375);
+	font-weight: lighter;
+	word-break: break-word;
+	border: none;
+	background: none;
+}
+
+.subheading1,
+h3,
+h3 code {
+	font-size: calc(8px * 1.8);
+	font-weight: 600;
+	border: none;
+	background: none;
+	letter-spacing: 0.1em;
+	text-transform: uppercase;
+}
+
+h2 code {
+	padding: 0;
+	position: relative;
+	letter-spacing: 0.05em;
+}
+
+blockquote {
+	font-size: calc(8px * 1.1667);
+	font-style: italic;
+	line-height: calc(1.1667 * var(--vspace));
+	margin: var(--vspace-2) var(--vspace-2);
+}
+
+.subheading2,
+h4 {
+	font-size: calc(8px * 1.4292);
+	text-transform: uppercase;
+	font-weight: 600;
+}
+
+.subheading3,
+h5 {
+	font-size: calc(8px * 1.2917);
+	line-height: calc(1.2917 * var(--vspace));
+
+	font-weight: lighter;
+	text-transform: uppercase;
+	letter-spacing: 0.15em;
+}
+
+h6 {
+	font-size: calc(8px * 1.1667);
+	font-size: 1.1667em;
+	font-weight: normal;
+	font-style: italic;
+	font-family: "le-monde-livre-classic-byol", serif !important;
+	letter-spacing: 0px !important;
+}
+
+#start .md > *:first-child {
+	margin-top: 0;
+}
+
+h2 + h3 {
+	margin-top: 0;
+}
+
+.md hr {
+	border: none;
+	border-top: 1px solid var(--block-border-color);
+	margin: var(--vspace-2) 0 var(--vspace-2) 0;
+}
+.prose ul {
+	margin: var(--vspace-2) 0 var(--vspace-1) 0;
+}
+
+.gap {
+	gap: 0;
+}

src/demo/requirements.txt

@@ -0,0 +1 @@
+gradio_creditspanel

src/demo/space.py

@@ -0,0 +1,350 @@
+
+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}, '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}, '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': []}}}
+
+abs_path = os.path.join(os.path.dirname(__file__), "css.css")
+
+with gr.Blocks(
+    css=abs_path,
+    theme=gr.themes.Ocean(
+        font_mono=[
+            gr.themes.GoogleFont("Inconsolata"),
+            "monospace",
+        ],
+    ),
+) as demo:
+    gr.Markdown(
+"""
+# `gradio_creditspanel`
+
+<div style="display: flex; gap: 7px;">
+<img alt="Static Badge" src="https://img.shields.io/badge/version%20-%200.0.1%20-%20orange">  
+</div>
+
+Credits Panel for Gradio UI
+""", elem_classes=["md-custom"], header_links=True)
+    app.render()
+    gr.Markdown(
+"""
+## Installation
+
+```bash
+pip install gradio_creditspanel
+```
+
+## Usage
+
+```python
+\"\"\"
+app.py
+
+This script serves as an interactive demonstration for the custom Gradio component `CreditsPanel`.
+It showcases all available features of the component, allowing users to dynamically adjust
+properties like animation effects, speed, layout, and styling. The app also demonstrates
+how to handle file dependencies (logo, licenses) in a portable way.
+\"\"\"
+
+import gradio as gr
+from gradio_creditspanel import CreditsPanel
+import os
+
+# --- 1. SETUP & DATA PREPARATION ---
+# This section prepares all necessary assets and data for the demo.
+# It ensures the demo runs out-of-the-box without manual setup.
+
+def setup_demo_files():
+    \"\"\"
+    Creates necessary directories and dummy files (logo, licenses) for the demo.
+    This makes the application self-contained and easy to run.
+    \"\"\"
+    # Create dummy license files
+    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\nhttp://www.apache.org/licenses/...")
+    if not os.path.exists("LICENSES/MIT.txt"):
+        with open("LICENSES/MIT.txt", "w") as f:
+            f.write("MIT License\nCopyright (c) 2025 Author\nPermission is hereby granted...")
+
+    # Create a placeholder logo if it doesn't exist
+    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")
+
+# Initial data for the credits roll
+credits_list = [
+    {"title": "Project Manager", "name": "Emma Thompson"},
+    {"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"},
+    {"title": "DevOps Engineer", "name": "Liam Patel"},
+    {"title": "Quality Assurance Lead", "name": "Sam Wilson"},
+    {"title": "Test Automation Engineer", "name": "Olivia Brown"},
+    {"title": "Security Analyst", "name": "David Kim"},
+    {"title": "Data Scientist", "name": "Sophie Martinez"},
+    {"title": "Machine Learning Engineer", "name": "Ethan Lee"},
+    {"title": "API Developer", "name": "Isabella Garcia"},
+    {"title": "Technical Writer", "name": "Noah Davis"},
+    {"title": "Scrum Master", "name": "Ava Rodriguez"},
+]
+
+# Paths to license files
+license_paths = {
+    "Gradio Framework": "./LICENSES/Apache.txt",
+    "This Component": "./LICENSES/MIT.txt"
+}
+
+# Default animation speeds for each effect to provide a good user experience
+DEFAULT_SPEEDS = {
+    "scroll": 40.0,
+    "starwars": 80.0,
+    "matrix": 40.0
+}
+
+# --- 2. GRADIO EVENT HANDLER FUNCTIONS ---
+# These functions define the application's interactive logic.
+
+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, 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
+) -> dict:
+    \"\"\"
+    Callback function that updates all properties of the CreditsPanel component.
+    It takes the current state of all UI controls and returns a gr.update() dictionary.
+    \"\"\"
+    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,
+        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,
+        value=credits_list  # The list of credits to display
+    )
+
+def update_ui_on_effect_change(effect: str) -> tuple[float, float]:
+    \"\"\"
+    Updates the speed and font size sliders to sensible defaults when the
+    animation effect is changed.
+    \"\"\"
+    font_size = 1.5
+    if effect == "starwars":
+        font_size = 6.0  # Star Wars effect looks better with a larger font
+    
+    speed = DEFAULT_SPEEDS.get(effect, 40.0)
+    return speed, font_size
+
+# --- 3. GRADIO UI DEFINITION ---
+# This section constructs the user interface using gr.Blocks.
+
+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",
+            info="Select the visual style for the credits."
+        )
+        speed_slider = gr.Slider(
+            minimum=5.0, maximum=100.0, step=1.0, value=DEFAULT_SPEEDS["scroll"],
+            label="Animation Speed (seconds)", info="Duration of one animation cycle."
+        )
+        font_size_slider = gr.Slider(
+            minimum=1.0, maximum=10.0, step=0.1, value=1.5,
+            label="Base Font Size (rem)", info="Controls the base font size."
+        )
+
+        gr.Markdown("### Intro Text")
+        intro_title_input = gr.Textbox(
+            label="Intro Title", value="Gradio", info="Main title for the intro sequence."
+        )
+        intro_subtitle_input = gr.Textbox(
+            label="Intro Subtitle", value="The best UI framework", info="Subtitle for the intro sequence."
+        )
+
+        gr.Markdown("### Layout & Visibility")
+        sidebar_position_radio = gr.Radio(
+            ["right", "bottom"], label="Sidebar Position", value="right",
+            info="Place the licenses sidebar on the right or bottom."
+        )
+        show_logo_checkbox = gr.Checkbox(label="Show Logo", value=True)
+        show_licenses_checkbox = gr.Checkbox(label="Show Licenses", 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")
+
+    # Instantiate the custom CreditsPanel component with default values
+    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="./assets/logo.webp",
+        show_logo=True,
+        show_licenses=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",
+    )
+
+    # List of all input components that should trigger a panel update
+    inputs = [
+        effect_radio, speed_slider, font_size_slider,
+        intro_title_input, intro_subtitle_input,
+        sidebar_position_radio, show_logo_checkbox, show_licenses_checkbox,
+        logo_position_radio, logo_sizing_radio, logo_width_input, logo_height_input,
+        scroll_background_color, scroll_title_color, scroll_name_color
+    ]
+
+    # --- 4. EVENT BINDING ---
+    # Connect the UI controls to the handler functions.
+
+    # Special event: changing the effect also updates speed and font size sliders
+    effect_radio.change(
+        fn=update_ui_on_effect_change,
+        inputs=effect_radio,
+        outputs=[speed_slider, font_size_slider]
+    )
+
+    # General event: any change in an input control updates the main panel
+    for input_component in inputs:
+        input_component.change(
+            fn=update_panel,
+            inputs=inputs,
+            outputs=panel
+        )
+
+# --- 5. APP LAUNCH ---
+if __name__ == "__main__":
+    setup_demo_files()
+    demo.launch()
+```
+""", elem_classes=["md-custom"], header_links=True)
+
+
+    gr.Markdown("""
+## `CreditsPanel`
+
+### Initialization
+""", elem_classes=["md-custom"], header_links=True)
+
+    gr.ParamViewer(value=_docs["CreditsPanel"]["members"]["__init__"], linkify=[])
+
+
+    gr.Markdown("### Events")
+    gr.ParamViewer(value=_docs["CreditsPanel"]["events"], linkify=['Event'])
+
+
+
+
+    gr.Markdown("""
+
+### User function
+
+The impact on the users predict function varies depending on whether the component is used as an input or output for an event (or both).
+
+- When used as an Input, the component only impacts the input signature of the user function.
+- When used as an output, the component only impacts the return signature of the user function.
+
+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
+def predict(
+    value: typing.Optional[typing.Dict[str, typing.Any]][
+    typing.Dict[str, typing.Any][str, Any], None
+]
+) -> Any:
+    return value
+```
+""", elem_classes=["md-custom", "CreditsPanel-user-fn"], header_links=True)
+
+
+
+
+    demo.load(None, js=r"""function() {
+    const refs = {};
+    const user_fn_refs = {
+          CreditsPanel: [], };
+    requestAnimationFrame(() => {
+
+        Object.entries(user_fn_refs).forEach(([key, refs]) => {
+            if (refs.length > 0) {
+                const el = document.querySelector(`.${key}-user-fn`);
+                if (!el) return;
+                refs.forEach(ref => {
+                    el.innerHTML = el.innerHTML.replace(
+                        new RegExp("\\b"+ref+"\\b", "g"),
+                        `<a href="#h-${ref.toLowerCase()}">${ref}</a>`
+                    );
+                })
+            }
+        })
+
+        Object.entries(refs).forEach(([key, refs]) => {
+            if (refs.length > 0) {
+                const el = document.querySelector(`.${key}`);
+                if (!el) return;
+                refs.forEach(ref => {
+                    el.innerHTML = el.innerHTML.replace(
+                        new RegExp("\\b"+ref+"\\b", "g"),
+                        `<a href="#h-${ref.toLowerCase()}">${ref}</a>`
+                    );
+                })
+            }
+        })
+    })
+}
+
+""")
+
+demo.launch()

src/frontend/Example.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	export let value: string;
+	export let type: "gallery" | "table";
+	export let selected = false;
+</script>
+
+<div
+	class:table={type === "table"}
+	class:gallery={type === "gallery"}
+	class:selected
+	class="prose"
+>
+	{@html value}
+</div>
+
+<style>
+	.gallery {
+		padding: var(--size-2);
+	}
+</style>

src/frontend/Index.svelte

@@ -0,0 +1,389 @@
+<script lang="ts">
+  import type { Gradio } from "@gradio/utils";
+  import { Block } from "@gradio/atoms";
+  import { StatusTracker } from "@gradio/statustracker";
+  import type { LoadingStatus } from "@gradio/statustracker";
+  import ScrollEffect from "./shared/ScrollEffect.svelte";
+  import StarWarsEffect from "./shared/StarWarsEffect.svelte";
+  import MatrixEffect from "./shared/MatrixEffect.svelte";
+  import { Image } from "@gradio/image/shared";
+
+  /**
+   * Props for the Index component.
+   * @typedef {Object} Value
+   * @property {Array<{title: string, name: string}>} credits - List of credits with title and name.
+   * @property {Record<string, string>} licenses - License names and content.
+   * @property {"scroll" | "starwars" | "matrix"} effect - Credits display effect.
+   * @property {number} speed - Animation speed in seconds.
+   * @property {number} base_font_size - Base font size in rem.
+   * @property {string | null} intro_title - Intro title.
+   * @property {string | null} intro_subtitle - Intro subtitle.
+   * @property {"right" | "bottom"} sidebar_position - Licenses sidebar position.
+   * @property {{path: string | null, url: string | null, orig_name: string | null, mime_type: string | null} | null} logo_path - Logo file details.
+   * @property {boolean} show_logo - Show logo.
+   * @property {boolean} show_licenses - Show licenses.
+   * @property {"center" | "left" | "right"} logo_position - Logo alignment.
+   * @property {"stretch" | "crop" | "resize"} logo_sizing - Logo sizing mode.
+   * @property {number | string | null} logo_width - Logo width.
+   * @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_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).
+   */
+  export let value: Value | null = null;
+  export let elem_id = "";
+  export let elem_classes: string[] = [];
+  export let visible = true;
+  export let container = true;
+  export let scale: number | null = null;
+  export let min_width: number | undefined = undefined;
+  export let height: number | string | undefined = undefined;
+  export let width: number | string | undefined = undefined;
+  export let loading_status: LoadingStatus;
+  export let gradio: Gradio<{ change: never }>;
+
+  // Default value if `value` is null
+  $: effectiveValue = value || {
+    credits: [
+      { title: "Lead Developer", name: "John Doe" },
+      { title: "UI/UX Design", name: "Jane Smith" },
+      { title: "Backend Engineering", name: "Alex Ray" },
+      { title: "Component Concept", name: "Your Name" },
+      { title: "Quality Assurance", name: "Sam Wilson" },
+    ],
+    licenses: {
+      "Gradio Framework": "Apache License placeholder",
+      "This Component": "MIT License placeholder",
+    },
+    effect: "scroll",
+    speed: 40,
+    base_font_size: 1.5,
+    intro_title: "",
+    intro_subtitle: "",
+    sidebar_position: "right",
+    logo_path: null,
+    show_logo: true,
+    show_licenses: true,
+    logo_position: "center",
+    logo_sizing: "resize",
+    logo_width: null,
+    logo_height: null,
+    scroll_background_color: null,
+    scroll_title_color: null,
+    scroll_name_color: null   
+  };
+
+  // Tracks selected license for display
+  let selected_license_name: string | null = null;
+
+  // Toggles license content display
+  function show_license(name: string) {
+    selected_license_name = selected_license_name === name ? null : name;
+  }
+
+  // Reactive styles for dimensions and logo
+  $: height_style =
+    typeof height === "number" ? `${height}px` : height || "500px";
+  $: width_style = typeof width === "number" ? `${width}px` : width || "100%";
+  $: logo_width_style = effectiveValue.logo_width
+    ? typeof effectiveValue.logo_width === "number"
+      ? `${effectiveValue.logo_width}px`
+      : effectiveValue.logo_width
+    : "auto";
+  $: logo_height_style = effectiveValue.logo_height
+    ? typeof effectiveValue.logo_height === "number"
+      ? `${effectiveValue.logo_height}px`
+      : effectiveValue.logo_height
+    : "100px";
+  $: logo_panel_height = effectiveValue.logo_height
+    ? typeof effectiveValue.logo_height === "number"
+      ? `${effectiveValue.logo_height}px`
+      : effectiveValue.logo_height
+    : "100px";
+  $: object_fit =
+    effectiveValue.logo_sizing === "stretch"
+      ? "fill"
+      : effectiveValue.logo_sizing === "crop"
+        ? "cover"
+        : "contain";
+  $: logo_justify =
+    effectiveValue.logo_position === "center"
+      ? "center"
+      : effectiveValue.logo_position === "left"
+        ? "flex-start"
+        : "flex-end";
+</script>
+
+<Block
+  {visible}
+  {elem_id}
+  {elem_classes}
+  {container}
+  {scale}
+  {min_width}
+  padding={false}
+>
+  <!-- Loading status tracker -->
+  <StatusTracker
+    autoscroll={gradio.autoscroll}
+    i18n={gradio.i18n}
+    queue_position={loading_status?.queue_position ?? -1}
+    queue_size={loading_status?.queue_size ?? 0}
+    status={loading_status?.status ?? "complete"}
+  />
+  <slot />
+
+  <!-- Logo panel -->
+  {#key effectiveValue.logo_position}
+    <div class="outer-logo-wrapper" style:width={width_style}>
+      {#if effectiveValue.show_logo && effectiveValue.logo_path?.url}
+        <div
+          class="logo-panel"
+          style:height={logo_panel_height}
+          style:display="flex"
+          style:justify-content={logo_justify}
+        >
+          {#if gradio}
+            <Image
+              src={effectiveValue.logo_path.url}
+              alt="Logo"
+              loading="lazy"
+              {gradio}
+              style="width: {logo_width_style}; height: {logo_height_style}; object-fit: {object_fit};"
+            />
+          {:else}
+            <img
+              src={effectiveValue.logo_path.url}
+              alt="Logo"
+              style="width: {logo_width_style}; height: {logo_height_style}; object-fit: {object_fit};"
+            />
+          {/if}
+        </div>
+      {/if}
+    </div>
+  {/key}
+
+  <!-- Credits and licenses panel -->
+  {#key effectiveValue.sidebar_position}
+    <div class="outer-credits-wrapper" style:width={width_style}>
+      <div
+        class="credits-panel-wrapper"
+        style:width={width_style}
+        style:height={effectiveValue.sidebar_position === "right"
+          ? height_style
+          : undefined}
+      >
+        {#key { effect: effectiveValue.effect, speed: effectiveValue.speed }}
+          <div
+            class="main-credits-panel"
+            style:height={height_style}
+            style:width={effectiveValue.sidebar_position === "right" &&
+            effectiveValue.show_licenses
+              ? "calc(100% - var(--sidebar-width, 400px))"
+              : width_style}
+          >
+            {#if effectiveValue.effect === "scroll"}
+              <ScrollEffect
+                credits={effectiveValue.credits}
+                speed={effectiveValue.speed}
+                base_font_size={effectiveValue.base_font_size}
+                intro_title={effectiveValue.intro_title}
+                intro_subtitle={effectiveValue.intro_subtitle}
+                background_color={effectiveValue.scroll_background_color}
+                title_color={effectiveValue.scroll_title_color}
+                name_color={effectiveValue.scroll_name_color}               
+              />
+            {:else if effectiveValue.effect === "starwars"}
+              <StarWarsEffect
+                credits={effectiveValue.credits}
+                speed={effectiveValue.speed}
+                base_font_size={effectiveValue.base_font_size}
+                intro_title={effectiveValue.intro_title}
+                intro_subtitle={effectiveValue.intro_subtitle}                
+              />
+            {:else if effectiveValue.effect === "matrix"}
+              <MatrixEffect
+                credits={effectiveValue.credits}
+                speed={effectiveValue.speed}
+                base_font_size={effectiveValue.base_font_size}
+                intro_title={effectiveValue.intro_title}
+                intro_subtitle={effectiveValue.intro_subtitle}                
+              />
+            {/if}
+          </div>
+        {/key}
+        {#if effectiveValue.show_licenses && Object.keys(effectiveValue.licenses).length > 0}
+          <div class="licenses-sidebar">
+            <h3>Licenses</h3>
+            <ul>
+              {#each Object.entries(effectiveValue.licenses) as [name, content] (name)}
+                <li>
+                  <button
+                    class:selected={selected_license_name === name}
+                    on:click={() => show_license(name)}
+                    type="button"
+                  >
+                    {name}
+                  </button>
+                </li>
+              {/each}
+            </ul>
+            {#if selected_license_name}
+              <div class="license-display">
+                <h4>{selected_license_name}</h4>
+                <pre>{effectiveValue.licenses[selected_license_name]}</pre>
+              </div>
+            {/if}
+          </div>
+        {/if}
+      </div>
+    </div>
+  {/key}
+</Block>
+
+<svelte:head>
+  {#if effectiveValue.sidebar_position === "bottom"}
+    <!-- Bottom sidebar styles -->
+    <style>
+      .credits-panel-wrapper {
+        flex-direction: column !important;
+        --panel-direction: column;
+        --sidebar-width: 100%;
+        --border-left: none;
+        --border-top: 1px solid var(--border-color-primary);
+        --sidebar-max-height: 400px;
+      }
+      .licenses-sidebar {
+        width: 100% !important;
+        border-left: none !important;
+        border-top: 1px solid var(--border-color-primary) !important;
+      }
+      .main-credits-panel {
+        width: 100% !important;
+      }
+    </style>
+  {:else}
+    <!-- Right sidebar styles -->
+    <style>
+            .credits-panel-wrapper { flex-direction: row !important; --panel-direction: row; --sidebar-width: 400px; --border-left: 1px solid var(--border-color-primary); --border-top: none; --sidebar-max-height: {height_style}; }
+            .licenses-sidebar { width: var(--sidebar-width, 400px) !important; border-left: 1px solid var(--border-color-primary) !important; border-top: none !important; }
+            .main-credits-panel { width: calc(100% - var(--sidebar-width, 400px)) !important; }
+    </style>
+  {/if}
+</svelte:head>
+
+<style>
+  /* Remove default block styling */
+  :global(.block) {
+    border: none !important;
+    box-shadow: none !important;
+    border-style: none !important;
+  }
+  /* Logo wrapper */
+  .outer-logo-wrapper {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    border: none;
+  }
+  /* Credits wrapper */
+  .outer-credits-wrapper {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    border: none;
+  }
+  /* Logo panel */
+  .logo-panel {
+    background: var(--background-fill-primary);
+    border: none;
+    border-bottom: 1px solid var(--border-color-primary);
+    display: flex !important;
+    align-items: center;
+    justify-content: var(--logo-justify, center);
+    width: 100%;
+  }
+  /* Credits and licenses container */
+  .credits-panel-wrapper {
+    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;
+  }
+  /* Credits display panel */
+  .main-credits-panel {
+    flex-grow: 1;
+    flex-shrink: 1;
+    min-width: 200px;
+    background: black;
+    overflow: hidden;
+    position: relative;
+  }
+  /* Licenses sidebar */
+  .licenses-sidebar {
+    width: var(--sidebar-width, 400px);
+    max-width: 100%;
+    max-height: var(--sidebar-max-height, none);
+    flex-shrink: 1;
+    flex-grow: 0;
+    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 h3 {
+    margin: var(--spacing-lg);
+    font-size: var(--text-lg);
+  }
+  .licenses-sidebar li {
+    padding: 0;
+    margin: 0;
+    cursor: default;
+    border-bottom: 1px solid var(--border-color-primary);
+  }
+  .licenses-sidebar li button {
+    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 0.2s;
+  }
+  .licenses-sidebar li button:hover {
+    background-color: var(--background-fill-primary);
+  }
+  .licenses-sidebar li button:focus-visible {
+    outline: 2px solid var(--color-accent);
+    outline-offset: -2px;
+  }
+  .licenses-sidebar li button.selected {
+    background-color: var(--color-accent);
+    color: white;
+    font-weight: bold;
+  }
+  .license-display {
+    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 h4 {
+    margin-top: 0;
+  }
+  .license-display pre {
+    white-space: pre-wrap;
+    word-break: break-word;
+    font-size: var(--text-sm);
+    color: var(--body-text-color-subdued);
+  }
+</style>

src/frontend/gradio.config.js

@@ -0,0 +1,9 @@
+export default {
+  plugins: [],
+  svelte: {
+    preprocess: [],
+  },
+  build: {
+    target: "modules",
+  },
+};

src/frontend/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "gradio_creditspanel",
+  "version": "0.7.0",
+  "description": "Gradio UI packages",
+  "type": "module",
+  "author": "",
+  "license": "ISC",
+  "private": false,
+  "main_changeset": true,
+  "dependencies": {
+    "@gradio/atoms": "0.16.5",
+    "@gradio/image": "^0.22.17",
+    "@gradio/statustracker": "0.10.18",
+    "@gradio/utils": "0.10.2",
+    "@gradio/icons": "0.13.1"
+  },
+  "devDependencies": {
+    "@gradio/preview": "0.14.0"
+  },
+  "exports": {
+    "./package.json": "./package.json",
+    ".": {
+      "gradio": "./Index.svelte",
+      "svelte": "./dist/Index.svelte",
+      "types": "./dist/Index.svelte.d.ts"
+    },
+    "./example": {
+      "gradio": "./Example.svelte",
+      "svelte": "./dist/Example.svelte",
+      "types": "./dist/Example.svelte.d.ts"
+    },
+    "./base": {
+      "gradio": "./Index.svelte",
+      "svelte": "./dist/Index.svelte",
+      "types": "./dist/Index.svelte.d.ts"
+    }
+  },
+  "peerDependencies": {
+    "svelte": "^4.0.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/gradio-app/gradio.git",
+    "directory": "js/html"
+  }
+}

src/frontend/shared/MatrixEffect.svelte

@@ -0,0 +1,192 @@
+<script lang="ts">
+    import { onMount, onDestroy } from 'svelte';
+
+    /**
+     * Props for the MatrixEffect component.
+     * @typedef {Object} Props
+     * @property {Array<{title: string, name: string}>} credits - List of credits with title and name.
+     * @property {number} speed - Animation speed in seconds (default: 20).
+     * @property {number} base_font_size - Base font size in em (default: 1.0).
+     * @property {string | null} intro_title - Optional intro title.
+     * @property {string | null} intro_subtitle - Optional intro subtitle.
+     */
+    export let credits: Props['credits'];
+    export let speed: number = 20;
+    export let base_font_size: number = 1.0;
+    export let intro_title: string | null = null;
+    export let intro_subtitle: string | null = null;
+
+    // Combines intro and credits for display
+    $: display_items = (() => {
+        const items = [];
+        if (intro_title || intro_subtitle) {
+            items.push({ 
+                title: intro_title || '', 
+                name: intro_subtitle || '',
+                is_intro: true
+            });
+        }
+        return [...items, ...credits.map(c => ({ ...c, is_intro: false }))];
+    })();
+
+    // Reactive font size styles
+    $: title_style = (is_intro: boolean) => `font-size: ${is_intro ? base_font_size * 1.2 : base_font_size * 0.8}em;`;
+    $: name_style = (is_intro: boolean) => `font-size: ${is_intro ? base_font_size * 1.5 : base_font_size}em;`;
+
+    // Canvas setup for Matrix effect
+    let canvas: HTMLCanvasElement;
+    let ctx: CanvasRenderingContext2D;
+    let contentElement: HTMLElement | null;
+    const fontSize = 16;
+    const characters = 'アァカサタナハマヤャラワガザダバパイィキシチニヒミリヰギジヂビピウゥクスツヌフムユュルグズブヅプエェケセテネヘメレヱゲゼデベペオォコソトノホモヨョロヲゴゾドボポヴッン01';
+    let columns: number;
+    let drops: number[] = [];
+    let animationFrameId: number;
+
+    // Initialize canvas and drops
+    function setup() {
+        if (!canvas) return;
+        const parent = canvas.parentElement;
+        if (parent) {
+            canvas.width = parent.clientWidth;
+            canvas.height = parent.clientHeight;
+        }
+        ctx = canvas.getContext('2d')!;
+        columns = Math.floor(canvas.width / fontSize);
+        drops = Array(columns).fill(1);
+    }
+
+    // Draw Matrix falling characters
+    function drawMatrix() {
+        if (!ctx) return;
+        ctx.fillStyle = 'rgba(0, 0, 0, 0.05)';
+        ctx.fillRect(0, 0, canvas.width, canvas.height);
+        ctx.fillStyle = '#0F0';
+        ctx.font = `${fontSize}px monospace`;
+        for (let i = 0; i < drops.length; i++) {
+            const text = characters.charAt(Math.floor(Math.random() * characters.length));
+            ctx.fillText(text, i * fontSize, drops[i] * fontSize);
+            if (drops[i] * fontSize > canvas.height && Math.random() > 0.975) {
+                drops[i] = 0;
+            }
+            drops[i]++;
+        }
+        animationFrameId = requestAnimationFrame(drawMatrix);
+    }
+
+    // Reset credits animation
+    function resetCreditsAnimation() {
+        if (contentElement) {
+            contentElement.style.animation = 'none';
+            void contentElement.offsetHeight; // Trigger reflow
+            contentElement.style.animation = '';
+        }
+    }
+
+    // Setup canvas and animation on mount
+    onMount(() => {
+        setup();
+        drawMatrix();
+        resetCreditsAnimation();
+        const resizeObserver = new ResizeObserver(() => {
+            cancelAnimationFrame(animationFrameId);
+            setup();
+            drawMatrix();
+        });
+        if (canvas.parentElement) {
+            resizeObserver.observe(canvas.parentElement);
+        }
+        return () => {
+            cancelAnimationFrame(animationFrameId);
+            if (canvas.parentElement) {
+                resizeObserver.unobserve(canvas.parentElement);
+            }
+        };
+    });
+
+    // Reset animation on prop changes
+    $: credits, speed, intro_title, intro_subtitle, resetCreditsAnimation();
+
+    // Cleanup on destroy
+    onDestroy(() => {
+        contentElement = null;
+    });
+</script>
+
+<div class="matrix-container">
+    <canvas bind:this={canvas}></canvas>
+    <div class="credits-scroll-overlay">
+        <div class="credits-content" bind:this={contentElement} style="--animation-duration: {speed}s;">
+            {#each display_items as item}
+                <div class="credit-block" class:intro-block={item.is_intro}>
+                    <div style={title_style(item.is_intro)} class="title">{item.title}</div>
+                    {#if item.name}
+                        <div style={name_style(item.is_intro)} class="name">{item.name}</div>
+                    {/if}
+                </div>
+            {/each}
+        </div>
+    </div>
+</div>
+
+<style>
+    /* Container for Matrix effect */
+    .matrix-container {
+        width: 100%;
+        height: 100%;
+        position: relative;
+        overflow: hidden;
+    }
+    /* Canvas for falling characters */
+    canvas {
+        display: block;
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        z-index: 1;
+    }
+    /* Overlay for scrolling credits */
+    .credits-scroll-overlay {
+        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);
+    }
+    /* Scrolling credits container */
+    .credits-content {
+        position: absolute;
+        width: 100%;
+        bottom: 0;
+        transform: translateY(100%);
+        animation: scroll-from-bottom var(--animation-duration) linear infinite;
+    }
+    @keyframes scroll-from-bottom {
+        from { transform: translateY(100%); }
+        to { transform: translateY(-100%); }
+    }
+    /* Intro block spacing */
+    .credit-block.intro-block { margin-bottom: 5rem; }
+    /* Credit block spacing */
+    .credit-block { margin-bottom: 2.5em; }
+    /* Title styling */
+    .title {
+        color: #0F0;
+        text-transform: uppercase;
+        opacity: 0.8;
+    }
+    /* Name styling */
+    .name {
+        font-weight: bold;
+        color: #5F5;
+        text-shadow: 0 0 5px #0F0;
+    }
+</style>

src/frontend/shared/ScrollEffect.svelte

@@ -0,0 +1,108 @@
+<script lang="ts">
+    /**
+     * Props for the ScrollEffect component.
+     * @typedef {Object} Props
+     * @property {Array<{title: string, name: string}>} credits - List of credits with title and name.
+     * @property {number} speed - Animation speed in seconds.
+     * @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} name_color - Name text color (default: white).
+     * @property {string | null} intro_title - Optional intro title.
+     * @property {string | null} intro_subtitle - Optional intro subtitle.
+     */
+    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 name_color: string | null = null;
+    export let intro_title: string | null = null;
+    export let intro_subtitle: string | null = null;
+
+    // Flag to trigger animation reset
+    let reset = false;
+
+    // Combine intro and credits for display
+    $: display_items = (() => {
+        const items = [];
+        if (intro_title || intro_subtitle) {
+            items.push({ 
+                title: intro_title || '', 
+                name: intro_subtitle || '',
+                is_intro: true
+            });
+        }
+        return [...items, ...credits.map(c => ({ ...c, is_intro: false }))];
+    })();
+
+    // 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;`;
+
+    // Reset animation on prop changes
+   function resetAnimation() {
+        reset = true;
+        setTimeout(() => (reset = false), 0);
+    }
+
+
+
+    // Trigger reset on prop changes
+    $: credits, speed, resetAnimation();
+</script>
+
+<div class="wrapper" style:--animation-duration="{speed}s" style:background={background_color || 'black'}>
+    {#if !reset}
+        <div class="credits-container">
+            {#each display_items as item}
+                <div class="credit" class:intro-block={item.is_intro}>
+                    <h2 style={title_style(item.is_intro)}>{item.title}</h2>
+                    {#if item.name}<p style={name_style(item.is_intro)}>{item.name}</p>{/if}
+                </div>
+            {/each}
+        </div>
+    {/if}
+</div>
+
+<style>
+    /* Container for scrolling credits */
+    .wrapper {
+        width: 100%;
+        height: 100%;
+        overflow: hidden;
+        position: relative;
+        font-family: sans-serif;
+    }
+    /* Intro block styling */
+    .credit.intro-block {
+        margin-bottom: 5rem;
+        text-align: center;
+    }
+    /* Credits container with scroll animation */
+    .credits-container {
+        position: absolute;
+        bottom: 0;
+        transform: translateY(100%);
+        width: 100%;
+        text-align: center;
+        animation: scroll var(--animation-duration) linear infinite;
+    }
+    /* Individual credit block */
+    .credit {
+        margin-bottom: 2rem;
+    }
+    .credit h2 {
+        margin: 0.5rem 0;
+        font-family: sans-serif;
+    }
+    .credit p {
+        margin: 0.5rem 0;
+        font-family: sans-serif;
+    }
+    /* Scroll animation keyframes */
+    @keyframes scroll {
+        0% { transform: translateY(100%); }
+        100% { transform: translateY(-100%); }
+    }
+</style>

src/frontend/shared/StarWarsEffect.svelte

@@ -0,0 +1,156 @@
+<script lang="ts">
+    import { onMount, onDestroy } from 'svelte';
+
+    /**
+     * Props for the StarWarsEffect component.
+     * @typedef {Object} Props
+     * @property {Array<{title: string, name: string}>} credits - List of credits with title and name.
+     * @property {number} speed - Animation speed in seconds (default: 40).
+     * @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: #feda4a).
+     * @property {string | null} name_color - Name text color (default: #feda4a).
+     * @property {string | null} intro_title - Optional intro title.
+     * @property {string | null} intro_subtitle - Optional intro subtitle.
+     */
+    export let credits: Props['credits'];
+    export let speed: number = 40;
+    export let base_font_size: number = 1.5;
+    export let background_color: string | null = null;
+    export let 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;
+
+    // Reactive styles for title and name
+    $: title_style = (is_intro: boolean) => `color: ${title_color || '#feda4a'}; font-size: ${is_intro ? base_font_size * 1.5 : base_font_size}rem !important;`;
+    $: name_style = (is_intro: boolean) => `color: ${name_color || '#feda4a'}; font-size: ${is_intro ? base_font_size * 0.9 : base_font_size * 0.7}rem !important;`;
+
+    // Combine intro and credits for display
+    $: display_items = (() => {
+        const items = [];
+        if (intro_title || intro_subtitle) {
+            items.push({
+                title: intro_title || '',
+                name: intro_subtitle || '',
+                is_intro: true
+            });
+        }
+        return [...items, ...credits.map(c => ({ ...c, is_intro: false }))];
+    })();
+
+    // Element for animation reset
+    let crawlElement: HTMLElement | null;
+
+    // Reset animation on prop changes
+    function resetAnimation() {
+        if (crawlElement) {
+            crawlElement.style.animation = 'none';
+            void crawlElement.offsetHeight; // Trigger reflow
+            crawlElement.style.animation = '';
+        }
+    }
+
+    // Initialize animation on mount
+    onMount(() => {
+        resetAnimation();
+        return () => {};
+    });
+
+    // Trigger reset on prop changes
+    $: credits, speed, base_font_size, background_color, title_color, name_color, intro_title, intro_subtitle, resetAnimation();
+
+    // Cleanup on destroy
+    onDestroy(() => {
+        crawlElement = null;
+    });
+
+    // Generate star shadows for background
+    const generate_star_shadows = (count: number, size: string) => {
+        let shadows = '';
+        for (let i = 0; i < count; i++) {
+            shadows += `${Math.random() * 2000}px ${Math.random() * 2000}px ${size} white, `;
+        }
+        return shadows.slice(0, -2);
+    };
+
+    const small_stars = generate_star_shadows(200, '1px');
+    const medium_stars = generate_star_shadows(100, '2px');
+    const large_stars = generate_star_shadows(50, '3px');
+</script>
+
+<div class="viewport" style:background={background_color || 'black'}>
+    <!-- Star layers for background -->
+    <div class="stars small" style="box-shadow: {small_stars};"></div>
+    <div class="stars medium" style="box-shadow: {medium_stars};"></div>
+    <div class="stars large" style="box-shadow: {large_stars};"></div>
+
+    <!-- Crawling credits -->
+    <div class="crawl" bind:this={crawlElement} style="--animation-duration: {speed}s;">
+        {#each display_items as item}
+            <div class="credit" class:intro-block={item.is_intro}>
+                <h2 style={title_style(item.is_intro)}>{item.title}</h2>
+                {#if item.name}<p style={name_style(item.is_intro)}>{item.name}</p>{/if}
+            </div>
+        {/each}
+    </div>
+</div>
+
+<style>
+    /* Container with perspective for 3D effect */
+    .viewport {
+        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: bold;
+    }
+    /* Star layers with twinkling animation */
+    .stars {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 1px;
+        height: 1px;
+        background: transparent;
+        z-index: 0;
+        animation: twinkle 10s linear infinite;
+    }
+    .stars.small { animation-duration: 10s; }
+    .stars.medium { animation-duration: 15s; }
+    .stars.large { animation-duration: 20s; }
+    @keyframes twinkle {
+        0% { opacity: 0.6; }
+        50% { opacity: 1; }
+        100% { opacity: 0.6; }
+    }
+    /* Crawling text container */
+    .crawl {
+        position: absolute;
+        width: 100%;
+        bottom: 0;
+        transform-origin: 50% 100%;
+        animation: crawl-animation var(--animation-duration) linear infinite;
+        z-index: 1;
+        text-align: center;
+    }
+    /* Crawl animation with 3D transform */
+    @keyframes crawl-animation {
+        0% { transform: rotateX(60deg) translateY(100%) translateZ(100px); opacity: 1; }
+        100% { transform: rotateX(60deg) translateY(-150%) translateZ(-1200px); opacity: 1; }
+    }
+    /* Intro block spacing */
+    .credit.intro-block { margin-bottom: 5rem; }
+    /* Credit block spacing */
+    .credit { margin-bottom: 2rem; }
+    /* Text styling */
+    h2, p {
+        margin: 0.5rem 0;
+        padding: 0;
+        white-space: nowrap;
+    }
+</style>

src/frontend/tsconfig.json

@@ -0,0 +1,14 @@
+{
+	"compilerOptions": {
+		"allowJs": true,
+		"checkJs": true,
+		"esModuleInterop": true,
+		"forceConsistentCasingInFileNames": true,
+		"resolveJsonModule": true,
+		"skipLibCheck": true,
+		"sourceMap": true,
+		"strict": true,
+		"verbatimModuleSyntax": true
+	},
+	"exclude": ["node_modules", "dist", "./gradio.config.js"]
+}

src/package-lock.json

@@ -0,0 +1,6 @@
+{
+  "name": "creditspanel",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {}
+}

src/pyproject.toml

@@ -0,0 +1,51 @@
+[build-system]
+requires = [
+  "hatchling",
+  "hatch-requirements-txt",
+  "hatch-fancy-pypi-readme>=22.5.0",
+]
+build-backend = "hatchling.build"
+
+[project]
+name = "gradio_creditspanel"
+version = "0.0.1"
+description = "Credits Panel for Gradio UI"
+readme = "README.md"
+license = "apache-2.0"
+requires-python = ">=3.10"
+authors = [{ name = "Eliseu Silva", email = "elismasilva@gmail.com" }]
+keywords = ["gradio-custom-component", "gradio-template-HTML"]
+# Add dependencies here
+dependencies = ["gradio>=4.0,<6.0"]
+classifiers = [
+  'Development Status :: 3 - Alpha',
+  'Operating System :: OS Independent',
+  'Programming Language :: Python :: 3',
+  'Programming Language :: Python :: 3 :: Only',
+  'Programming Language :: Python :: 3.8',
+  'Programming Language :: Python :: 3.9',
+  'Programming Language :: Python :: 3.10',
+  'Programming Language :: Python :: 3.11',
+  'Topic :: Scientific/Engineering',
+  'Topic :: Scientific/Engineering :: Artificial Intelligence',
+  'Topic :: Scientific/Engineering :: Visualization',
+]
+
+# The repository and space URLs are optional, but recommended.
+# Adding a repository URL will create a badge in the auto-generated README that links to the repository.
+# Adding a space URL will create a badge in the auto-generated README that links to the space.
+# This will make it easy for people to find your deployed demo or source code when they
+# encounter your project in the wild.
+
+# [project.urls]
+# repository = "your github repository"
+# space = "your space url"
+
+[project.optional-dependencies]
+dev = ["build", "twine"]
+
+[tool.hatch.build]
+artifacts = ["/backend/gradio_creditspanel/templates", "*.pyi", "/\\backend\\gradio_creditspanel\\templates"]
+
+[tool.hatch.build.targets.wheel]
+packages = ["/backend/gradio_creditspanel"]