Gradio 如何修改运行界面原组件的 css 样式？

KOW2

已于 2024-07-19 16:06:09 修改

阅读量963

点赞数 12

分类专栏： Gradio 文章标签： css 前端 AIGC aigc

于 2024-07-19 15:55:01 首次发布

本文链接：https://blog.csdn.net/weixin_56684524/article/details/140545634

版权

Gradio 专栏收录该内容

3 篇文章 1 订阅

订阅专栏

场景

我在用 Gradio 绘制 web 运行的 UI 界面时，我就在想，除了官方提供的 CSS 样式，我们能不能给 CSS 样式 加入一些 自己的想法 呢？

问题

如何修改原组件的 css 样式？

分析

既然是html 页面，那么组成该 html 页面内容对应一定有一个个的标签，那么通过标签的id 值或 class 值在 CSS 文件中来写对应组件的 CSS 样式，就能实现标签对应的样式！

解决

在这里插入图片描述

步骤1：创建自己的CSS 样式文件

添加 class 或 id 值

通过 elem_classes 属性 在 gradio 中元素组件添加 html 标签对应的 class 值：
```
dp1 = gr.Dropdown(label="性别",choices=["男","女"],elem_classes="dropDown sex")
```

通过 elem_id 属性 在 gradio 中元素组件添加 html 标签对应的 id 值：

dp2 = gr.Dropdown(label="特长",choices=["腿","胳膊"],elem_id="dropDownSpecialty")

*test1.css 代码

/*
    下拉框1： 性别 ； 标签的 class="dropDown sex"
*/
.dropDown.sex{
    width:300px;
    height:auto;
    color:white;
    background: royalblue;
}

/*
    下拉框2： 特长 ； 标签的 id="dropDown specialty"
*/
#dropDownSpecialty{
    width:500px;
    height:auto;
    color:white;
    background: deepskyblue;
}

把 css 文件 引入 gradio 画板 demo 对象中：
在这里插入图片描述

with gr.Blocks(css="SenseVoice/css/test1.css") as demo:

步骤2：给组件排行列

把组件分为 一行两列

with gr.Blocks(css="SenseVoice/css/test1.css") as demo:

    with gr.Row(): # 第一行
        with gr.Column(): # 第一列
            dp1 = gr.Dropdown(label="性别",choices=["男","女"],elem_classes="dropDown sex")
        
        with gr.Column(): # 第二列
            dp2 = gr.Dropdown(label="特长",choices=["腿","胳膊"],elem_id="dropDownSpecialty")
    
    btn = gr.Button(value="获取下来框所选值")
    outputText = gr.Textbox(label="所选值",lines=3,placeholder="下拉框所选值")
    btn.click(fn=operation,inputs=[dp1,dp2],outputs=[outputText])

步骤3：调整父级元素的 width

在这里插入图片描述

检查并拿到 下拉框 的 父级元素 的 id 或 class 值

注：同理获取到 特长下拉框 的父级元素的 class = "form svelte-sfqy0y"
添加 CSS 代码

由于 两个下拉框的 父级标签元素的 class = "form svelte-sfqy0y" 都相同，并不能同时设置长度不同的标签，因此，我们让width 再填充父级内容。再去获取能够 唯一区分的上一级的标签 id值为 id="component-2" 和 id="component-5" 的父级标签。

统一 span 的 字体颜色
在这里插入图片描述

/* test1.css 最终代码 */
/*
    下拉框1： 性别 ； 标签的 class="dropDown sex"
*/
.dropDown.sex{
    width:400px;
    height:auto;
    color:white;
    background: royalblue;
}

/*
    下拉框2： 特长 ； 标签的 id="dropDown specialty"
*/
#dropDownSpecialty{
    width:500px;
    height:auto;
    color:white;
    background: deepskyblue;
}

/*
    2个 下拉框 组件的 父级元素 class 都是 ".form.svelte-sfqy0y"
*/
.form.svelte-sfqy0y{
    width:inherit;
    height:auto;
    color:white;
}

/*
    gradio 组件号 为 component-2  的 标签 id = "component-2"
*/
#component-2{
    width:400px;
}

/*
    gradio 组件号 为 component-5  的 标签 id = "component-5"
*/
#component-5{
    width:500px;
}

/*
    同一 全局的 span 标签 的字体颜色 为 黑色
*/
span{
    color : black;
}

最终效果
在这里插入图片描述