사용자 정의 CSS 및 JavaScript

---

사용자 정의 CSS

Gradio를 사용하면 css = kwarg를 사용하여 앱에 사용자 정의 CSS를 적용하여 앱을 원하는 대로 스타일링할 수 있다.
예를 들어, Tab 레이아웃 예제에서 다음과 같이 사용자 정의 배경 CSS를 정의할 수 있다.

import gradio as gr

with gr.Blocks(css=".gradio-container {background-color: grey}") as demo:
    with gr.Tab(label = "Button tab"):
        btn1 = gr.Button("Button 1")
        btn2 = gr.Button("Button 2")
    with gr.Tab(label = "Textbox tab"):
        text1 = gr.Textbox()
        text2 = gr.Textbox()

demo.launch()

사용자 정의 JavaScript

마찬가지로 앱에 사용자 정의 JavaScript를 정의할 수도 있다.

import gradio as gr

def welcome(name):
    return f"Welcome to Gradio, {name}!"

js = """
function createGradioAnimation() {
    var container = document.createElement('div');
    container.id = 'gradio-animation';
    container.style.fontSize = '2em';
    container.style.fontWeight = 'bold';
    container.style.textAlign = 'center';
    container.style.marginBottom = '20px';

    var text = 'Welcome to Gradio!';
    for (var i = 0; i < text.length; i++) {
        (function(i){
            setTimeout(function(){
                var letter = document.createElement('span');
                letter.style.opacity = '0';
                letter.style.transition = 'opacity 0.5s';
                letter.innerText = text[i];

                container.appendChild(letter);

                setTimeout(function() {
                    letter.style.opacity = '1';
                }, 50);
            }, i * 250);
        })(i);
    }

    var gradioContainer = document.querySelector('.gradio-container');
    gradioContainer.insertBefore(container, gradioContainer.firstChild);

    return 'Animation created';
}
"""

with gr.Blocks(js=js) as demo:
    inp = gr.Textbox(placeholder="What is your name?")
    out = gr.Textbox()
    inp.change(welcome, inp, out)

demo.launch()

이와 같이 코드를 작성하면 Gradio 앱에 사용자 정의 JavaScript를 적용할 수 있다.