【Gradio】Building With Blocks 自定义您的演示与 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 传递给您的应用程序。您可以传递 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，要么通过 allow_list 参数在 launch() 中允许。在我们的安全和文件访问部分中了解更多信息。

elem_id 和 elem_classes 参数

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

css = """
#warning {background-color: #FFCCCB}  # 为id为warning的元素设置背景颜色为浅红色
.feedback textarea {font-size: 24px !important}  # 将class为feedback的文本区域字体大小设置为24px，并覆盖其他样式
"""


with gr.Blocks(css=css) as demo:  # 使用gr.Blocks创建应用界面，并应用自定义CSS样式
    box1 = gr.Textbox(value="Good Job", elem_classes="feedback")  # 创建一个带有初始值和类名为feedback的文本框
    box2 = gr.Textbox(value="Failure", elem_id="warning", elem_classes="feedback")  # 创建一个带有初始值、类名为feedback和id为warning的文本框