使用 CSS 和 Javascript 自定义你的演示

Gradio 允许你通过多种方式自定义你的演示。你可以自定义演示的布局，添加自定义 HTML，以及添加自定义主题。本教程将更进一步，指导你如何向演示添加自定义 CSS 和 JavaScript 代码，以便添加自定义样式、动画、自定义 UI 功能、分析等等。

向演示添加自定义 CSS

Gradio 主题是自定义你的应用外观和感觉的最简单方法。你可以从各种主题中选择，或者创建自己的主题。为此，请将 theme= kwarg 传递给 Blocks 构造函数。例如

with gr.Blocks(theme=gr.themes.Glass()):
    ...

Gradio 附带了一组预构建的主题，你可以从 gr.themes.* 加载。你可以扩展这些主题或从头开始创建自己的主题 - 有关更多详细信息，请参阅主题指南。

为了获得额外的样式能力，你可以使用 css= kwarg 将任何 CSS 作为字符串传递给你的应用。你还可以将 pathlib.Path 传递给 css 文件，或将此类路径的列表传递给 css_paths= kwarg。

警告：自定义 JS 和 CSS 中查询选择器的使用不能保证在绑定到 Gradio 自身 HTML 元素的 Gradio 版本中都能正常工作，因为 Gradio HTML DOM 可能会更改。我们建议谨慎使用查询选择器。

Gradio 应用的基础类是 gradio-container，所以这是一个更改 Gradio 应用背景颜色的示例

with gr.Blocks(css=".gradio-container {background-color: red}") as demo:
    ...

如果你想在你的 css 中引用外部文件，请在文件路径（可以是相对路径或绝对路径）前加上 "/gradio_api/file="，例如

with gr.Blocks(css=".gradio-container {background: url('/gradio_api/file=clouds.jpg')}") as demo:
    ...

注意：默认情况下，主机中的大多数文件对于运行 Gradio 应用的用户来说是不可访问的。因此，你应该确保任何引用的文件（例如这里的 clouds.jpg）是 URL 或允许的路径，如此处所述。

elem_id 和 elem_classes 参数

你可以使用 elem_id 为任何组件添加 HTML 元素 id，并使用 elem_classes 添加类或类列表。这将使你能够更轻松地使用 CSS 选择元素。这种方法也更可能在 Gradio 版本之间保持稳定，因为内置的类名或 id 可能会更改（但是，如上面的警告中所述，如果你使用自定义 CSS，我们不能保证 Gradio 版本之间的完全兼容性，因为 DOM 元素本身可能会更改）。

css = """
#warning {background-color: #FFCCCB}
.feedback textarea {font-size: 24px !important}
"""

with gr.Blocks(css=css) as demo:
    box1 = gr.Textbox(value="Good Job", elem_classes="feedback")
    box2 = gr.Textbox(value="Failure", elem_id="warning", elem_classes="feedback")

CSS #warning 规则集将仅针对第二个 Textbox，而 .feedback 规则集将针对两者。请注意，在定位类时，你可能需要放置 !important 选择器以覆盖默认的 Gradio 样式。

向演示添加自定义 JavaScript

有 3 种方法可以向 Gradio 演示添加 javascript 代码

你可以将 JavaScript 代码作为字符串添加到 Blocks 或 Interface 初始化程序的 js 参数中。这将在首次加载演示时运行 JavaScript 代码。

下面是一个添加自定义 js 的示例，用于在首次加载演示时显示动画欢迎消息。

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()

当使用 Blocks 和事件监听器时，事件有一个 js 参数，该参数可以将 JavaScript 函数作为字符串并像 Python 事件监听器函数一样对待它。你可以同时传递 JavaScript 函数和 Python 函数（在这种情况下，JavaScript 函数首先运行）或仅传递 Javascript（并将 Python fn 设置为 None）。看看下面的代码

import gradio as gr

blocks = gr.Blocks()

with blocks as demo:
    subject = gr.Textbox(placeholder="subject")
    verb = gr.Radio(["ate", "loved", "hated"])
    object = gr.Textbox(placeholder="object")

    with gr.Row():
        btn = gr.Button("Create sentence.")
        reverse_btn = gr.Button("Reverse sentence.")
        foo_bar_btn = gr.Button("Append foo")
        reverse_then_to_the_server_btn = gr.Button(
            "Reverse sentence and send to server."
        )

    def sentence_maker(w1, w2, w3):
        return f"{w1} {w2} {w3}"

    output1 = gr.Textbox(label="output 1")
    output2 = gr.Textbox(label="verb")
    output3 = gr.Textbox(label="verb reversed")
    output4 = gr.Textbox(label="front end process and then send to backend")

    btn.click(sentence_maker, [subject, verb, object], output1)
    reverse_btn.click(
        None, [subject, verb, object], output2, js="(s, v, o) => o + ' ' + v + ' ' + s"
    )
    verb.change(lambda x: x, verb, output3, js="(x) => [...x].reverse().join('')")
    foo_bar_btn.click(None, [], subject, js="(x) => x + ' foo'")

    reverse_then_to_the_server_btn.click(
        sentence_maker,
        [subject, verb, object],
        output4,
        js="(s, v, o) => [s, v, o].map(x => [...x].reverse().join(''))",
    )

demo.launch()

最后，你可以将 JavaScript 代码添加到 Blocks 初始化程序的 head 参数中。这会将代码添加到 HTML 文档的 head 中。例如，你可以像这样将 Google Analytics 添加到你的演示中

head = f"""
<script async src="https://#/gtag/js?id={google_analytics_tracking_id}"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){{dataLayer.push(arguments);}}
  gtag('js', new Date());
  gtag('config', '{google_analytics_tracking_id}');
</script>
"""

with gr.Blocks(head=head) as demo:
    ...demo code...

head 参数接受你通常会插入到页面的 <head> 中的任何 HTML 标签。例如，你还可以将 <meta> 标签包含到 head 中。

请注意，注入自定义 HTML 可能会影响浏览器行为和兼容性（例如，键盘快捷键）。你应该在不同的浏览器中测试你的界面，并注意脚本可能如何与浏览器默认设置交互。这是一个示例，如果浏览器焦点不在输入组件上（例如 Textbox 组件），则按 Shift + s 会触发特定 Button 组件的 click 事件

import gradio as gr

shortcut_js = """
<script>
function shortcuts(e) {
    var event = document.all ? window.event : e;
    switch (e.target.tagName.toLowerCase()) {
        case "input":
        case "textarea":
        break;
        default:
        if (e.key.toLowerCase() == "s" && e.shiftKey) {
            document.getElementById("my_btn").click();
        }
    }
}
document.addEventListener('keypress', shortcuts, false);
</script>
"""

with gr.Blocks(head=shortcut_js) as demo:
    action_button = gr.Button(value="Name", elem_id="my_btn")
    textbox = gr.Textbox()
    action_button.click(lambda : "button pressed", None, textbox)
    
demo.launch()