gradio调用多个CSS的HTML页
很多博客介绍的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>相关文章：
gradio调用多个CSS的HTML页
很多博客介绍的gradio读取html和css比较简单，如果要做很细致的前端页面优化，比如丰富的响应式的cssjs，至少要有html多个css，是暂不能实现的。bootstrap、font-awesome、jquery等 方案一当然是直接更换htmlcss为主的部署方式&#…...
NVIDIA NeMo 全面教程：从入门到精通
NVIDIA NeMo 全面教程：从入门到精通 文章目录 NVIDIA NeMo 全面教程：从入门到精通目录框架介绍NeMo的核心特点NeMo的架构NeMo与其他框架的比较NeMo的模型集合NeMo的工作流程NeMo 2.0的新特性 安装指南系统要求使用Docker容器安装步骤1：安装Do…...
Go 语言封装邮件发送功能
Go 语言封装邮件发送功能 🏆 目标📦 依赖包🌟 项目结构🚀 代码实现🛠️ 主要方法说明🧪 单元测试🌈 使用示例🏆 代码亮点🌟 改进方向🚀 总结 在现代 Web 开发…...
加新题了，MySQL 8.0 OCP 认证考试 题库更新
MySQL 8.0 OCP 认证考试 题库更新 MySQL 8.0 Database Administrator 考试科目：1Z0-908 近期发现，MySQL OCP认证考试题库发生变化，出现了很多新题，对此，CUUG专门收集整理了最新版本的MySQL考试原题，并会给…...
Thales靶机攻略
1.下载导入VBox，并启动靶机 靶机地址：https://download.vulnhub.com/thales/Thales.zip 解压后，在VBox中导入虚拟电脑。包含所有网卡的MAC地址。 导入完成，设置网卡模式为仅主机网络。开启靶机。 kali网卡更改为桥接模式。点击工…...
尝试使用Tauri2+Django+React项目（2）
前言 尝试使用tauri2DjangoReact的项目-CSDN博客https://blog.csdn.net/qq_63401240/article/details/146403103在前面笔者不知道怎么做，搞了半天 笔者看到官网，原来可以使用二进制文件，好好好 嵌入外部二进制文件 | Taurihttps://v2.taur…...
6.1 模拟专题：LeetCode 1576. 替换所有的问号
1. 题目链接 LeetCode 1576. 替换所有的问号 2. 题目描述 给定一个仅包含小写字母和问号 ? 的字符串 s，要求将所有 ? 替换为任意小写字母，使得替换后的字符串中 没有相邻的两个字符相同。 示例： 输入：s "?zs" →…...
Linux安装go环境
安装一个lazydocker，根据文档需要先安装go环境 https://github.com/jesseduffield/lazydocker 官方文档解析 https://go.dev/doc/install 文档内容如下，一共三步 1.删除先前安装的go，解压下载的go压缩包到/usr/local目录 2.添加环境变量&…...
卡特兰数在数据结构上面的运用
原理 Catalan数是一个数列，其第n项表示n个不同结点可以构成的二叉排序树的数量。Catalan数的第n项公式为：  其中，是组合数，表示从2n个元素中选择n个元素的组合数。 Catalan数的原理可以通过以下方式理解&…...
Unity知识点快速回顾系列
Unity知识点快速回顾系列导航 主要想用于快速回顾unity相关知识点，基本只讲解知识点，只有简单的示例，目前还在整理中。 一、C#知识点入门、基础、核心、进阶 二、Unity 知识点入门、基础、核心、进阶 三、Unity 数据持久化 四、Unity 知识点快…...
悟空crm v12安装好后出现 网络错误问题（已解决）
请求网址: http://wwww.aaaa.com/gateway/adminUser/queryUserNumInfo 请求方法: POST 状态代码: 502 Bad Gateway 远程地址: 101.37.79.226:9807 引荐来源网址政策: strict-origin-when-cross-origin...
便携版：随时随地，高效处理 PDF 文件
PDF-XChange Editor Plus 便携版是一款功能强大且极其实用的 PDF 阅读与编辑工具。它不仅支持快速浏览 PDF 文件，还提供了丰富的编辑功能，让用户可以轻松处理 PDF 文档。经过大神优化处理，这款软件已经变得十分轻便，非常适合需要随…...
【Golang】补充：占位符、转义字符、错误处理
🔥 个人主页：星云爱编程 🔥 所属专栏：Golang 🌷追光的人，终会万丈光芒 🎉欢迎大家点赞👍评论📝收藏⭐文章 1、占位符 1.1通用占位符 %v ：默认格式的值。适…...
文件上传绕过的小点总结(4)
9.末尾点删除处理缺陷 给出源码： $file_name trim($_FILES[upload_file][name]); $file_name deldot($file_name);//删除文件名末尾的点 $file_ext strrchr($file_name, .); $file_ext strtolower($file_ext); //转换为小写 $file_ext str_ireplace(::$DATA,…...
AI比人脑更强，因为被植入思维模型【23】损失规避思维模型
我觉得这是一个很有趣的思维模型。 我们学习一个思维模型，不光是指导自己的思维，其实也可以预测或者思考别人的思维模型，也就是别人会怎么想，怎么做？ 定义 三层解释思维模型是一种深入剖析事物本质的思考框架&#x…...
如何用Spring AI构建MCP Client-Server架构
现代 Web 应用正加速与大语言模型（LLMs）深度融合，构建超越传统问答场景的智能解决方案。为突破模型知识边界，增强上下文理解能力，开发者普遍采用多源数据集成策略，将 LLM 与搜索引擎、数据库、文件系统等外部资源互联。然而，异构数据源的协议差异与格式壁垒，往往导致集…...
如何让WordPress不同的页面、栏目显示不同的小工具侧边栏
WooSidebars 是一款用于 WordPress 的插件，主要功能是允许用户根据不同的上下文条件（如特定页面、博客文章、分类目录或搜索结果页面等）来更改侧边栏中显示的小工具。 自定义小工具区域：用户可以轻松创建自定义的小工具区域，并将其设置为在多种条件下显示，只需点击几次即…...
智慧座椅的节能效果如何？
嘿呀，你知道不，咱这叁仟智慧座椅的节能效果，那可是像个神秘小宇宙，根据不同的技术和应用场景，会展现出超有趣的变化哦，下面就给你唠唠常见的几种情况哈！ 能源回收大变身：有些叁仟智…...
Matlab:二维绘图篇——不同坐标系下的绘图命令
目录 1.极坐标系下绘图：polar命令 实例——极坐标图形 实例——直角坐标与极坐标系图形 2.半对数坐标系下绘图：semilogx和semilogy 实例——半对数坐标系图形 3.双对数坐标系下绘图：loglog 实例——双对数坐标系绘图 4.双y轴坐标&…...
HTTP 协议中请求与响应的详细解析
前言：HTTP（Hypertext Transfer Protocol，超文本传输协议）是用于在互联网上传输超文本的协议 --由一个请求和响应组成，一个完整的 HTTP 请求由请求行（Request Line）、请求头（Headers&…...
对三维物体模型的阈值操作
对三维物体模型的阈值操作 1. 使用point_coord_x、point_coord_y、point_coord_z阈值分割麻辣兔头2. point_normal_x、point_normal_y、point_normal_z有什么区别？3. 去除离群点 1. 使用point_coord_x、point_coord_y、point_coord_z阈值分割麻辣兔头 dev_open_win…...
prometheus 添加alertmanager添加dingtalk机器人告警
1、dingtalk创建机器人,目前我们采用加白名单的方式校验 2、定位到如下图 test结果如下...
一些题目记录
别人面经题目记录 https://zhuanlan.zhihu.com/p/32626732052 实现 NMS，七八次，很高频； 实现 MultiHeadSelfAttention，大概 三四次； 用 Numpy 或者 List 实现MLP 的前向和反向，4次； Leetcode …...
向量数据库学习笔记（1） —— 基础概念
一、 嵌入模型 Embedding Models 嵌入模型是将复杂数据（如文本、图像、音频等）转换为向量表示的机器学习模型 1. 核心概念 嵌入(Embedding)：将高维、非结构化的数据映射到低维、稠密的向量空间 向量表示：输出固定长度的数值向量…...
Python学习第二十五天
Scrapy框架 官网概念 Scrapy 是一个强大的 Python 网络爬虫框架。 最新版本学习 安装 pip install scrapy 使用 # 创建名称为myscrapy的爬虫项目 scrapy starpoject myscrapy # 创建爬那个 就是比如 需要爬http://quotes.toscrape.com 运行的名称：toscrape运行…...
GitHub Copilot平替：CodeGeeX 2.0实测报告
本文基于20个真实开发场景对CodeGeeX 2.0进行深度评测，涵盖代码生成质量、上下文理解能力、多语言支持度等关键维度。通过Python数据分析、Java微服务、React前端开发三大核心场景的对比实验，揭示其相比GitHub Copilot在中文语境支持、本地化部署、隐私保…...
【算法】动态规划：回文子串问题、两个数组的dp
⭐️个人主页：小羊 ⭐️所属专栏：Linux 很荣幸您能阅读我的文章，诚请评论指点，欢迎欢迎 ~ 目录 回文子串问题回文子串最长回文子串分割回文串 IV分割回文串 II *最长回文子序列让字符串成为回文串的最少插入次数 两个数组的dp最…...
文件上传绕过的小点总结(3)
6.文件首尾加空绕过 源码给出这样的，发现文件名处理没有首尾去空，于是我们可以采用首尾加空的方式绕过。 $file_name $_FILES[upload_file][name]; $file_name deldot($file_name);//删除文件名末尾的点 $file_ext strrchr($file_name, .); $file_e…...
OpenHarmony 入门——ArkUI 跨页面数据同步和应用全局单例的UI状态存储AppStorage 小结（三）
文章大纲 引言一、AppStorage 应用全局的UI状态存储1、StorageProp和StorageLink装饰器建立联系2、StorageProp2.1、StorageProp使用规则2.2、StorageProp变量的传递/访问规则2.3、StorageProp支持的观察变化2.4、StorageProp 值初始化和更新 3、StorageLink3.1、StorageLink使…...
4. 如何减少大模型幻觉？⸺大模型外挂向量数据库的分析（知识延伸版）
本文原创作者：姚瑞南 AI-agent 大模型运营专家，先后任职于美团、猎聘等中大厂AI训练专家和智能运营专家岗；多年人工智能行业智能产品运营及大模型落地经验，拥有AI外呼方向国家专利与PMP项目管理证书。（转载需经授权） 目录 1. 大模型幻觉 1.1 大模型幻觉的含义 1.2 大…...