Interactive Applications 📤

Word count

650 words

Reading time

5 minutes

Gradio is an open-source library for quickly building interactive interfaces for machine learning models, scripts, or tools. It supports web-based displays, link sharing, and component drag-and-drop functionality, making it ideal for visualization, demonstrations, or validation.

Here, you can freely customize development and integration, flexibly adapt to your specific needs, and create personalized applications.

Application List

Tip

Use as needed. After enabling successfully, a restart is required.

Application Preview

1 / 9

Capcut Material Extractor

Plugin Development

1. Define Application

src\gradio\pages\dlp_.py

...
from src.app.prefs import INSTANCES as prefs
from src.gradio.tools import helper
from src.gradio.tools.toast import Toast

def gradio(i18n=None, **kwargs):

    # Configuration
    cfg = prefs.get()

    # Interface
    with gr.Blocks(**kwargs) as app:

        helper.header_description("YouTube Downloader Plus")

        input_url = gr.Textbox(label="Link", placeholder="Paste the link")

        with gr.Accordion("Resources", open=True):
            title_txt = gr.Textbox(label="Title", lines=1, interactive=False)
            with gr.Tabs() as tabs:
                with gr.TabItem("Thumbnail"):
                    thumb_image = gr.Image(label="Preview", height=300)
                with gr.TabItem("Video"):
                    video_table = gr.Dataframe(label="List", headers=["ID", "Format", "Resolution", "Size", "Audio"], interactive=True, elem_id="output-table")
                    video_fmt_input = gr.Textbox(label="ID")
                    btn_v_download = gr.Button("Download")
                    video_file = gr.Video(label="Preview", height=300)

                with gr.TabItem("Audio"):
                    audio_table = gr.Dataframe(label="List", headers=["ID", "Format", "Bitrate", "Size"], interactive=True, elem_id="output-table")
                    audio_fmt_input = gr.Textbox(label="ID")
                    btn_a_download = gr.Button("Download")
                    audio_file = gr.Audio(label="Preview", type="filepath")

        with gr.Row():
            parse_btn = gr.Button("Parse", variant="primary")

        with gr.Accordion("Examples", open=True):
            gr.Examples(
                label="Link",
                examples=[
                    ["https://www.youtube.com/watch?v=SMWdVHNByhk"],
                ],
                inputs=[input_url],
                cache_examples=False,
            )

        # Parsing
        @gr.on(parse_btn.click, inputs=input_url, outputs=[thumb_image, title_txt, video_table, audio_table])
        def on_parse(url):
            try:
                if not url:
                    raise Toast.warn("Please enter a link")
                thumb, title, v_formats, a_formats = parse_video(url)
                return thumb, title, v_formats, a_formats
            except Exception as e:
                return None, None, [], []

        # Tab switching
        @gr.on(tabs.change, outputs=[video_fmt_input, audio_fmt_input])
        def on_tab_change(active_tab):
            return "", ""

        # Table row selection
        # Video
        @gr.on(video_table.select, outputs=video_fmt_input)
        def on_video_select(evt: gr.SelectData):
            selected_row = evt.row_value
            return selected_row[0]

        # Audio
        ...

        # Video download
        # Video
        @gr.on(btn_v_download.click, inputs=[input_url, video_fmt_input], outputs=video_file)
        def on_download_video(url, fmt_id):
            if not url:
                return Toast.warn("Please enter a link")
            if not fmt_id:
                return Toast.warn("Please select an ID")
            # Output directory
            output_dir = os.path.join(cfg.gradio.output_dir, DLP_DIR)
            cbfile.mk_folder(output_dir, is_clean=cfg.gradio.debug)
            # Download
            filepath = download_by_format(url, output_dir, fmt_id)
            return cbfile.move_to_temp(filepath) if filepath else None

        # Audio
        ...

    return app

if __name__ == "__main__":
    gradio().launch(server_port=8001)

src\gradio\theme.py

import gradio as gr

###################### Theme Customization ######################
theme = gr.themes.Ocean(
    text_size="sm",
)
###################### Theme Customization ######################

def _default_theme():
    return theme

if __name__ == "__main__":
    # 1、run `python src\gradio\theme.py` to open the theme builder
    # 2、or see https://huggingface.co/spaces/gradio/theme_builder
    from gradio import themes as t
    t.builder()

2. Register Application

curl -X 'POST' \
  'http://172.18.0.1:8000/gr/mounts' \
  -H 'accept: application/json' \
  -H 'Content-Type: application/json' \
  -d '{
        "name": "dlp",                                      # Name
        "description": "YouTube Downloader Plus (yt-dlp)",  # Description
        "module": "src.gradio.pages.dlp_",                  # Path
        "attr": "gradio",                                   # Method
        "path": "/dlp",                                     # Request
        "status": 1                                         # Status
    }'

3. Open Application

• Open http://172.18.0.1:8000/plugins
• Open http://172.18.0.1:8000/dlp

Thumbnail	Video	Audio	Subtitle

Scenario Customization

1: Batch Processing

Batch Operations?

To be added

2: AI Integration

How to integrate third-party AI workflows

To be added

Exclusive Plugin

Design, develop, and integrate specialized plugins based on CreatorBox to extend existing software functionality.

If you need custom plugin development, please leave a message at Plugin Development & Integration.