五分钟学会调整 Gradio 运行界面 WEB UI 的背景图和添加 Html 标签

KOW2

已于 2024-07-27 11:27:46 修改

阅读量487

点赞数 17

分类专栏： Gradio 文章标签： AIGC html ui 前端

于 2024-07-27 11:13:25 首次发布

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

版权

Gradio 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

场景

我在调整 gradio运行界面的组件的 CSS 样式 时，我又再想，能不能给这个运行界面添个 背景图 或者其他 HTML 元素上去呢？如果可以那就真的太棒了吧~

问题

如何给 gradio 运行界面 添加其他 HTML 元素 和 背景图？

解决

✨通过 Markdown() 方法：添加 HTML 标签

通过 gradio 对象 gr 的 Markdown() 方法，直接将合法的 html 标签 传给该方法的 字符串参数

示例代码


# 通过 gradio 对象 gr 的 Markdown("")方法，直接将 合法的html 标签 传给该方法的字符串参数 value 

gr.Markdown(value="<h1 align='center' style='font:darkcyan;' class='title' >一级标题</h1>",label="组件label值",visible=True) # 一级标题
gr.Markdown(value="<hr>") # 分割线

gr.Markdown(value="<br>") # 换行实现 组件块 分割
gr.Markdown(value="<br>") # 换行实现 组件块 分割
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")

gr.Markdown(value="<br>") # 换行实现 组件块 分割
gr.Markdown(value="<br>") # 换行实现 组件块 分割

gr.Markdown(value="<hr>") # 分割线

btn = gr.Button(value="获取下来框所选值")
outputText = gr.Textbox(label="所选值",lines=3,placeholder="下拉框所选值")
btn.click(fn=operation,inputs=[dp1,dp2],outputs=[outputText])

✨ 通过 CSS 样式：添加背景

通过获取运行界面中 “能覆盖页面的 html” 标签的 id 值 或 class 值 来修改对应标签的 css 样式。

步骤1：获取 html 标签的 id 或 class 值

在运行界面的背景空白处 “右键” ，检查 代码，获取 gradio-app 的子标签 div 的 class 值，可以直接双击右侧元素面板中蓝色高亮区的值,拷贝一下，我们下一步用。

步骤2：添加图片背景样式

在css 文件中，通过 步骤1 中拷贝到的 class 值，添加style 样式。其中包括：
1. background-image 属性：给该标签添加图片背景。
  我们可以用 url() 方法 把图片的公网链接 链过来哦~
2. background-size 属性：调整图片尺寸。我们调为覆盖到整个页面。
3. background-position 属性：给该标签添加图片背景。我们调为居中。
4. background-repeat 属性：但图片无法填满背景时，是否重复图片。我们选则不重复。

示例代码

/*index.css 文件*/

.gradio-container.gradio-container-4-32-2.svelte-182fdeq.app{
    background-image:url('https://images.unsplash.com/photo-1577563908411-5077b6dc7624?ixlib=rb-4.0.3&q=85&fm=jpg&crop=entropy&cs=srgb&dl=volodymyr-hryshchenko-V5vqWC9gyEU-unsplash.jpg&w=2400');
    background-size:cover; /*整张图片覆盖页面*/
    background-position: center;
    background-repeat:no-repeat;
}