很多博客介绍的gradio读取html和css比较简单，如果要做很细致的前端页面优化，比如丰富的响应式的css+js，至少要有html+多个css，是暂不能实现的。
bootstrap、font-awesome、jquery等
方案一当然是直接更换html+css为主的部署方式，仅用gradio传回的数据，重新设计前端 方案二可以考虑把多个css直接拼接后再生效，举例如下：
1. 原html
<!DOCTYPE html>
<!--[if IE 8]> <html lang="en" class="ie8"> <![endif]-->
<!--[if IE 9]> <html lang="en" class="ie9"> <![endif]-->
<!--[if !IE]><!--> <html lang="en"> <!--<![endif]-->
<!-- BEGIN HEAD -->
<head><meta charset="utf-8" /><title>404 Page</title><meta content="width=device-width, initial-scale=1.0" name="viewport" /><meta content="" name="description" /><meta content="" name="author" /><link href="assets/bootstrap/css/bootstrap.min.css" rel="stylesheet" /><link href="assets/bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet" /><link href="assets/font-awesome/css/font-awesome.css" rel="stylesheet" /><link href="css/style.css" rel="stylesheet" /><link href="css/style-responsive.css" rel="stylesheet" /><link href="css/style-default.css" rel="stylesheet" id="style_color" />
</head>
<!-- END HEAD -->
<!-- BEGIN BODY -->
<body class="error-404"><div class="error-wrap error-wrap-404"><div class="metro big terques"><span> OOPS! </span></div><div class="metro green"><span> 4 </span></div><div class="metro yellow"><span> 0 </span></div><div class="metro purple"><span> 4 </span></div><div class="metro double red"><span class="page-txt"> Page Not Found </span></div><div class="metro gray"><a href="index.html" class="home"><i class="icon-home"></i> </a></div></div>
</body>
<!-- END BODY -->
</html>2.1 改后的gradio
import gradio as grdef load_css(*filenames):css_content = []for file in filenames:with open(file, "r", encoding="utf-8") as f:css_content.append(f"<style>{f.read()}</style>")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等标签
<!DOCTYPE html>
<!--[if IE 8]> <html lang="en" class="ie8"> <![endif]-->
<!--[if IE 9]> <html lang="en" class="ie9"> <![endif]-->
<!--[if !IE]><!--> <html lang="en"> <!--<![endif]-->
<!-- BEGIN HEAD -->
<head><meta charset="utf-8" /><title>404 Page</title><meta content="width=device-width, initial-scale=1.0" name="viewport" /><meta content="" name="description" /><meta content="" name="author" />
<!-- <link href="assets/bootstrap/css/bootstrap.min.css" rel="stylesheet" />-->
<!-- <link href="assets/bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet" />-->
<!-- <link href="assets/font-awesome/css/font-awesome.css" rel="stylesheet" />-->
<!-- <link href="css/style.css" rel="stylesheet" />-->
<!-- <link href="css/style-responsive.css" rel="stylesheet" />-->
<!-- <link href="css/style-default.css" rel="stylesheet" id="style_color" />-->
</head>
<!-- END HEAD -->
<!-- BEGIN BODY -->
<body class="error-404"><div class="error-wrap error-wrap-404"><div class="metro big terques"><span> OOPS! </span></div><div class="metro green"><span> 4 </span></div><div class="metro yellow"><span> 0 </span></div><div class="metro purple"><span> 4 </span></div><div class="metro double red"><span class="page-txt"> Page Not Found </span></div><div class="metro gray"><a href="index.html" class="home"><i class="icon-home"></i> </a></div></div>
</body>
<!-- END BODY -->
</html>
