python系列&deep_study系列：Gradio中文教程（十二）Customizing your demo with CSS and Javascript
Gradio中文教程（十二）Customizing your demo with CSS and Javascript
Gradio中文教程（十二）Customizing your demo with CSS and Javascript
使用CSS和JavaScript自定义您的演示
Gradio允许您以多种方式自定义您的演示。您可以自定义演示的布局，添加自定义HTML，以及添加自定义主题。本教程将超越这些内容，指导您如何向演示中添加自定义CSS和JavaScript代码，以便添加自定义样式、动画、自定义UI功能、分析等。
向您的演示添加自定义CSS
Gradio主题是自定义应用程序外观和感觉的最简单方法。您可以从多种主题中选择，或者创建自己的主题。为此，请将theme=关键字参数传递给Blocks构造函数。例如：
with gr.Blocks(theme=gr.themes.Glass()):
...
Gradio附带了一套预建主题，您可以从gr.themes.*加载。您可以扩展这些主题或从头开始创建自己的主题 - 有关更多详细信息，请参阅主题指南。
为了获得额外的样式能力，您可以使用css=关键字参数将任何CSS传递给您的应用程序。您可以传递CSS文件的路径，或者传递CSS代码的字符串。
警告：在自定义JS和CSS中使用查询选择器不能保证在不同版本的Gradio中都能工作，因为Gradio的HTML DOM可能会发生变化。我们建议谨慎使用查询选择器。
Gradio应用程序的基础类是gradio-container，所以这里有一个例子，它改变了Gradio应用程序的背景颜色：
with gr.Blocks(css=".gradio-container {background-color: red}") as demo:
...
如果您想在CSS中引用外部文件，请在文件路径（可以是相对路径或绝对路径）前加上"file="，例如：
with gr.Blocks(css=".gradio-container {background: url('file=clouds.jpg')}") as demo:
...
注意：默认情况下，主机机器上的文件对运行Gradio应用程序的用户不可访问。因此，您应该确保任何引用的文件（例如这里的clouds.jpg）要么是URL，要么通过launch()中的allow_list参数允许。在我们的安全性和文件访问部分了解更多信息。
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规则集将只针对第二个文本框，而.feedback规则集将针对两者。请注意，在针对类时，您可能需要使用!important选择器来覆盖默认的Gradio样式。
向您的演示添加自定义JavaScript
有三种方法可以将JavaScript代码添加到您的Gradio演示中：
您可以将JavaScript代码作为字符串或文件路径添加到Blocks或Interface初始化器的js参数中。这将使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()
注意：您也可以将自定义JavaScript代码作为文件路径提供。例如，如果您有一个名为custom.js的文件与您的Python脚本在同一目录中，您可以像这样将其添加到您的演示中：with gr.Blocks(js="custom.js") as demo:。对于Interface也是如此（例如：gr.Interface(..., js="custom.js")）。
当使用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文档的头部。例如，您可以像这样将Google Analytics添加到您的演示中：
head = f"""
<script async src="https://www.googletagmanager.com/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标签。例如，您还可以在head中包含<meta>标签。
请注意，注入自定义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()
浙公网安备 33010602011771号