很多博客介绍的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 gr
def 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>
