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

场景

• 我在调整 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;
  }
  

步骤3：引入 css 文件到 gradio 组件代码页

• 找准 css文件的 相对路径
  

• gradio 组件代码页中：
  

• 运行 test1.py 并 访问运行界面
  

  若还需其他修改，还可以移步到 如何修改 gradio 运行界面的 CSS 样式 ?

注:

1. 不是获取 gradio-app 标签 的 class 值 哦，而是它的下一级 的 子标签 div 中 的 class 值 , 这一点是非常重要的，要找对哦~
2. css 文件中 class 值用点隔开。
3. css 文件 相对路径要找准哦。

写在最后

• 非常推荐 需要修改 gradio 运行界面 webui 设计的 小伙伴们使用 这两招 ！ 愉快地绘制自己想要的 webui 吧！
• 若有 不对❌ 的地方，还请伙伴们斧正！
• 若有 疑问❓ 的地方，请留言或私信，我会在看到的第一时间回复！