gradio调用多个CSS的HTML页

很多博客介绍的gradio读取html和css比较简单，如果要做很细致的前端页面优化，比如丰富的响应式的css+js，至少要有html+多个css，是暂不能实现的。

bootstrap、font-awesome、jquery等

---

方案一当然是直接更换html+css为主的部署方式，仅用gradio传回的数据，重新设计前端
方案二可以考虑把多个css直接拼接后再生效，举例如下：

1. 原html

  


   
   
   
   
   
   
   
   
   
   
   




    

        

            OOPS! 
        
        

             4 
        
        

             0 
        
        

             4 
        
        

             Page Not Found 
        
        

             
        

    

2.1 改后的gradio

import gradio as gr


def load_css(*filenames):
    css_content = []
    for file in filenames:
        with open(file, "r", encoding="utf-8") as f:
            css_content.append(f"")
    return "\n".join(css_content)


# 读取外部 HTML 文件
with open("metrolab/404.html", "r", encoding="utf-8") as f:
    html_content = f.read()

# # 读取外部 CSS 文件
# with open(load_css("metrolab/assets/bootstrap/css/bootstrap.min.css", "metrolab/assets/bootstrap/css/bootstrap-responsive.min.css",
#                      "metrolab/assets/font-awesome/css/font-awesome.css", "metrolab/css/style.css", "metrolab/css/style-responsive.css",
#                      "metrolab/css/style-default.css"), "r", encoding="utf-8") as f:
#     css_content = f.read()

# 创建 Gradio 界面
with gr.Blocks() as demo:
    gr.HTML(load_css("custom-only.css", "metrolab/assets/bootstrap/css/bootstrap.min.css",
             "metrolab/assets/bootstrap/css/bootstrap-responsive.min.css",
             "metrolab/assets/font-awesome/css/font-awesome.css", "metrolab/css/style.css",
             "metrolab/css/style-responsive.css",
             "metrolab/css/style-default.css"))
    gr.HTML(html_content)

demo.launch()

2.2  改后的html

注意：可以注释掉css，其实还可以去掉html head body等标签

  


   
   
   
   
   










    

        

            OOPS! 
        
        

             4 
        
        

             0 
        
        

             4 
        
        

             Page Not Found