当前位置： 首页 > news >正文

240907-Gradio插入Mermaid流程图并自适应浏览器高度

news 2026/5/27 12:07:28

A. 最终效果

在这里插入图片描述

B. 示例代码

import gradio as grmermaid_code = """
<iframe srcdoc='
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><meta name="viewport" content="width=device-width" /><title>My static Space</title><link rel="stylesheet" href="style.css" /><script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script><script>mermaid.initialize({startOnLoad:true});</script><script src="https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js"></script>
<script>// 当文档内容加载完成时，初始化并渲染 Mermaid 图表document.addEventListener("DOMContentLoaded", function() {mermaid.initialize({ startOnLoad: true });});
</script> </head><body><div class="mermaid">
journeytitle Create AIsection TrainingFormat DataSet Inputs Files, Data Splits: 5: TeacherModel Build w/ SKLearn, TF, Pytorch: 3: StudentDetermine Model Performance: 1: Teacher, Studentsection DeployWeb Deploy Local and Cloud: 5: TeacherArchitecture Spaces Gradio Streamlit Heroku AWS Azure and GCCP: 5: Teachersection TestingTest Model with Input Datasets: 5: TeacherExamples. Inputs that Work, Inputs That Break Model: 5: TeacherGovernance - Analyze, Publish Fairness, Equity, Bias for Datasets and Outputs: 5: Teacher
</div><div class="mermaid">
sequenceDiagramparticipant Aliceparticipant BobAlice->>John: Hello John, how are you?loop HealthcheckJohn->>John: Fight against hypochondriaendNote right of John: Rational thoughts<br/>prevail...John-->>Alice: Great!John->>Bob: How about you?Bob-->>John: Jolly good!
</div><div class="card">
<h1>Welcome to the Mermaid Modeler Tip Sheet</h1><p>You can use Mermaid inside HTML5 by including the script and a div with the class or mermaid.</p><p>Documentation is located here: <a href="https://mermaid.js.org/syntax/flowchart.html" target="_blank">Mermaid documentation</a>.</p>
</div><div class="mermaid">graph TD;A[开始] --> B{是否正常运行?};B -->|是| C[很好];B -->|否| D[进行修复];D --> A;
</div></body>
</html> ' width="100%" height="800px" style="border:none;">
</iframe>
"""css = """
/* ⭐️ 流程图的css*/
body {padding: 2rem;font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
}h1 {font-size: 16px;margin-top: 0;
}p {color: rgb(107, 114, 128);font-size: 15px;margin-bottom: 10px;margin-top: 5px;
}.card {max-width: 620px;margin: 0 auto;padding: 16px;border: 1px solid lightgray;border-radius: 16px;
}.card p:last-child {margin-bottom: 0;
}/* ⭐️ 自适应浏览器高度的css*/
.contain { display: flex; flex-direction: column; height: 95vh; padding: 10px; /* Optional: adjust padding around the container */gap: 8px; /* Reduce the gap between components */
}
.gradio-container { height: 100vh !important; 
}
#html-component { flex-grow: 1; overflow: auto; 
}
.fixed-textbox { height: 40px; /* Set a fixed height for the textbox */flex-shrink: 0; /* Prevent shrinking */
}
.fixed-button { height: 40px; /* Set a fixed height for the button */flex-shrink: 0; /* Prevent shrinking */
}
* {border: 1px solid black; /* 设置所有元素的边框宽度为1px，样式为实线，颜色为黑色 */
}
"""def display_diagram():return mermaid_codewith gr.Blocks(css=css) as demo:with gr.Row():with gr.Column(elem_classes="contain"):gr.HTML(mermaid_code, elem_id='html-container')with gr.Column(elem_classes="contain"):html = gr.HTML(mermaid_code, elem_id="html-component")msg = gr.Textbox()clear = gr.Button("Clear",  elem_classes="fixed-button")demo.launch()

C. 参考文献

  • Allow gr.Chatbot to fill all height of rest of space · Issue #4001 · gradio-app/gradio
  • mariashay/DataViz-Mermaid at main

相关文章：

240907-Gradio插入Mermaid流程图并自适应浏览器高度

A. 最终效果 B. 示例代码 import gradio as grmermaid_code """ <iframe srcdoc <!DOCTYPE html> <html><head><meta charset"utf-8" /><meta name"viewport" content"widthdevice-width" />…...

编程日记 2024/9/7 22:30:16

ubuntu 安装python3 教程

本篇教程，主要介绍如何在Ubuntu上安装python3教程。 1、查看是否有python 在安装前，首先看看自己系统上，是否存在python环境，可能有些系统，默认就安装过python，如果已经有python了，可以直接跳过安装教程。 2、安装步骤 apt update && apt install -y python3 p…...

编程日记 2024/9/7 22:29:15

NOR Flash、NAND Flash……

存储类型描述Compact Flash一种用于便携式电子设备的数据存储设备&#xff0c;于1994年由SanDisk公司推出。SRAM静态随机存取存储器&#xff0c;不需要刷新电路即能保存数据&#xff0c;速度快但集成度低、功耗大。PSRAM伪静态随机存取存储器&#xff0c;结合了SRAM和DRAM的特点…...

编程日记 2024/9/7 22:27:11

【高性能代码】提高代码的性能有哪些方式，如何写出高性能代码，一段代码如何提高这段代码的执行性能，高性能代码开发

【高性能代码】提高代码的性能有哪些方式&#xff0c;如何写出高性能代码&#xff0c;一段代码如何提高这段代码的执行性能&#xff0c;高性能代码开发 提高代码的性能是软件开发中一个重要的方面&#xff0c;尤其是在处理大数据、高并发或实时性要求较高的应用时。以下是一些提…...

编程日记 2024/9/7 22:25:09

2024整理 iptables防火墙学习笔记大全_modepro iptables

Iptables名词和术语 2iptables表&#xff08;tables&#xff09;和链&#xff08;chains&#xff09; 2表及其链的功能 2  Filter表 2  NAT表 2  MANGLE表 2iptables的工作流程 3iptables表和链的工作流程图 3 二、 iptables实战应用 4iptables命令参数详解 4  iptable…...

编程日记 2024/9/7 22:24:08

实验记录 | 点云处理 | K-NN算法3种实现的性能比较

引言 K近邻&#xff08;K-Nearest Neighbors, KNN&#xff09;算法作为一种经典的无监督学习算法&#xff0c;在点云处理中的应用尤为广泛。它通过计算点与点之间的距离来寻找数据点的邻居&#xff0c;从而有效进行点云分类、聚类和特征提取。本菜在复现点云文章过程&#xff…...

编程日记 2024/9/7 22:23:07

【OJ】常用技巧

1. 模版 #include<bits/stdc.h> using namespace std;int main(){ios::sync_with_stdio(false);cin.tie(0);// write herereturn 0; }2. 填充数组 memset是一个字节一个字节填充&#xff0c;如果是使int类型填充非0或者-1就会报错&#xff0c;如 int a[100]; memset(a…...

编程日记 2024/9/7 22:22:06

Redis：Redis性能变慢的原因

一、淘汰策略性能问题 当使用Redis当作缓存使用时&#xff0c;通常会给这个实例设置内存上限maxmemory&#xff0c;然后设置一个数据淘汰策略&#xff1b;如果Redis实例设置了内存上限maxmemory&#xff0c;那么也有可能导致Redis变慢。 原因在于&#xff0c;当Redis内存达到…...

编程日记 2024/9/7 22:20:03

Linux多线程——利用C++模板对pthread线程库封装

文章目录 线程封装主要框架线程启动线程等待其他信息 测试函数 线程封装 我们之前介绍过pthread的线程库&#xff0c;这个线程库主要是基于C语言的void*指针来进行传参和返回 我们使用C的模板对其封装可以让他的使用更加方便&#xff0c;并且经过测试可以让我们更加直观的了解…...

编程日记 2024/9/7 22:19:02

SpringBoot教程（十五） | SpringBoot集成RabbitMq（消息丢失、消息重复、消息顺序、消息顺序）

SpringBoot教程&#xff08;十五&#xff09; | SpringBoot集成RabbitMq&#xff08;消息丢失、消息重复、消息顺序、消息顺序&#xff09; RabbitMQ常见问题解决方案问题一&#xff1a;消息丢失的解决方案&#xff08;1&#xff09;生成者丢失消息丢失的情景解决方案1&#xf…...

编程日记 2024/9/7 22:16:59

TensorRT-LLM高级用法

--multi_block_mode decoding phase, 推理1个新token&#xff0c; 平时&#xff1a;按照batch样本&#xff0c;按照head&#xff0c;将计算平均分给所有SM&#xff1b; batch_size*num_heads和SM数目相比较小时&#xff1a;有些SM会空闲&#xff1b;加了--multi_block_mode&…...

编程日记 2024/9/7 22:15:58

文心一言功能新升级：读文档、懂翻译、能识图

9月4日&#xff0c;百度文心一言官网显示&#xff0c;在向全社会开放一周年之际&#xff0c;文心一言进行了功能最新全面升级&#xff0c;同时在周年期间为新老会员增加1个月专业版免费使用体验。 据了解&#xff0c;针对网页版用户需求&#xff0c;文心一言实现了创作内容更加…...

编程日记 2024/9/7 22:14:57

C++机试——走方格的方案

题目 请计算n*m的棋盘格子&#xff08;n为横向的格子数&#xff0c;m为竖向的格子数&#xff09;从棋盘左上角出发沿着边缘线从左上角走到右下角&#xff0c;总共有多少种走法&#xff0c;要求不能走回头路&#xff0c;即&#xff1a;只能往右和往下走&#xff0c;不能往左和往…...

编程日记 2024/9/7 22:10:52

Bootstrap 字体图标无法显示问题，＜i＞标签字体图标无法显示问题

bootstrap fileInput 以及 Bootstrap 字体图标无法显示问题。 今天在用 bootstrap fileInput 插件的时候发现图标无法显示&#xff0c;如下&#xff1a; 查看DOM&#xff0c;发现那些图标是<i>标签做的&#xff1a; 网上的方案 方案1 网上很多人说是我们打乱了boots…...

编程日记 2024/9/7 22:08:50

docker registry 仓库加密

docker registry 仓库加密 1、背景 ​ 公司一直用的镜像仓库是docker registry&#xff0c;但是有个安全问题&#xff0c;就是仓库从web ui的浏览到镜像的拉取都是可以直接使用的&#xff0c;还是放到了公网上&#xff0c;只需要知道你的域名那就是畅通无阻了&#xff0c;可以…...

编程日记 2024/9/7 22:07:49

利用高德+ArcGIS优雅获取任何感兴趣的矢量边界

荷花十里&#xff0c;清风鉴水&#xff0c;明月天衣。 四时之景不同&#xff0c;乐亦无穷尽也。今天呢&#xff0c;梧桐君给大家讲解一下&#xff0c;如何利用高德地图&#xff0c;随机所欲的获取shp边界数据。 文章主要分成以下几个步骤&#xff1a; 首先搜索你想获取的矢量…...

编程日记 2024/9/7 22:06:45

炮弹【USACO】

题目背景 时/空限制&#xff1a;1s / 64MB 题目描述 贝茜已经精通了变成炮弹并沿着长度为 N 的数轴弹跳的艺术&#xff0c;数轴上的位置从左到右编号为 1,2,…,N 。 她从某个整数位置 S 开始&#xff0c;以 1 的起始能量向右弹跳。 如果贝茜的能量为 k &#xff0c;则她将…...

编程日记 2024/9/7 22:05:44

python如何读取excel文件内的数据

目录 前言一、安装openpyxl二、读取Excel数据总结前言 在Python中读取Excel数据，最常用的库之一是openpyxl（用于.xlsx格式）和xlrd（尽管xlrd从版本2.0开始不再支持.xlsx，仅支持旧的.xls格式）。然而，对于大多数现代应用来说，openpyxl是一个更好的选择，因为它支持.xlsx格…...

编程日记 2024/9/7 22:02:41

Java项目: 基于SpringBoot+mybatis+maven+mysql教师工作量管理系统(含源码+数据库+毕业论文)

一、项目简介 本项目是一套基于SpringBootmybatismavenmysql教师工作量管理系统 包含&#xff1a;项目源码、数据库脚本等&#xff0c;该项目附带全部源码可作为毕设使用。 项目都经过严格调试&#xff0c;eclipse或者idea 确保可以运行&#xff01; 该系统功能完善、界面美观…...

编程日记 2024/9/7 22:01:37

项目开发--数据库--postgresql数据库操作

背景 1、安装postgresql的基础方法 2、基本操作命令 解决方案 安装命令 在ubuntu环境当中进行安装。 sudo apt install postgresql安装完毕之后直接进行测试&#xff0c;如果看到如下内容则安装成功。 sudo systemctl status postgresql使用DBeaver进行连接报错&#xff…...

编程日记 2024/9/7 21:56:28

2026年LLM推理加速全景：量化、投机解码与KV Cache工程实战

大语言模型推理速度慢、成本高&#xff0c;是阻碍AI大规模落地的核心障碍之一。一个7B参数的模型&#xff0c;在标准配置下每秒只能生成约30个token&#xff0c;对于需要实时响应的应用来说几乎无法接受。但2026年&#xff0c;一系列推理加速技术的成熟&#xff0c;让这一局面发…...

编程新知 2026/5/26 0:05:58

别被忽悠了！2026亲测靠谱的AI论文网站|避坑精选版

2026 年学术写作工具已高度分化&#xff0c;千笔AI与ThouPen为全流程首选&#xff0c;豆包、DeepSeek 为专项强手&#xff1b;避坑关键&#xff1a;拒绝假文献、严控 AIGC 率、优先国内适配、免费试用先行。 一、TOP3 全流程首选&#xff08;亲测不踩雷&#xff09; 1. 千笔AI&…...

编程新知 2026/5/25 23:31:41

百度文心一言开发者如何通过Taotoken低成本接入多模型API

&#x1f680; 告别海外账号与网络限制&#xff01;稳定直连全球优质大模型&#xff0c;限时半价接入中。 &#x1f449; 点击领取海量免费额度 百度文心一言开发者如何通过Taotoken低成本接入多模型API 对于已经熟悉并正在使用百度文心一言等国产大模型API的开发者而言&#…...

编程新知 2026/5/25 23:00:46

如何快速掌握MoveIt2：面向ROS 2开发者的工业机器人运动规划完整指南

如何快速掌握MoveIt2&#xff1a;面向ROS 2开发者的工业机器人运动规划完整指南 【免费下载链接】moveit2 :robot: MoveIt for ROS 2 项目地址: https://gitcode.com/gh_mirrors/mo/moveit2 想要为你的机器人实现智能运动规划吗&#xff1f;MoveIt2作为ROS 2生态中最强大…...

编程新知 2026/5/25 22:18:24

免费抓包工具选型指南：Wireshark、Fiddler、mitmproxy、Charles实战对比

1. 抓包工具不是“黑科技”&#xff0c;而是网络世界的显微镜很多人第一次听说“抓包”&#xff0c;脑子里立刻浮现出黑客电影里满屏滚动的绿色代码、键盘敲得噼啪作响、三秒破解银行防火墙的画面。其实完全不是这样——抓包&#xff08;Packet Capture&#xff09;本质上就是把…...

编程新知 2026/5/25 21:25:42

OpenCore Legacy Patcher完全指南：3步让旧款Mac焕发新生的终极方案

OpenCore Legacy Patcher完全指南&#xff1a;3步让旧款Mac焕发新生的终极方案 【免费下载链接】OpenCore-Legacy-Patcher Experience macOS just like before 项目地址: https://gitcode.com/GitHub_Trending/op/OpenCore-Legacy-Patcher 你是否拥有一台性能尚可但已被…...

编程新知 2026/5/25 21:05:31

氘可来昔替尼常见副作用为鼻咽炎头痛及腹泻，如何应对

任何口服药物的临床价值&#xff0c;都必须在疗效与安全性的天平上找到精准的平衡点。氘可来昔替尼以PASI 75应答率的全面胜出证明了自己在银屑病治疗中的卓越地位&#xff0c;而其不良反应谱同样经过了严苛的临床验证。鼻咽炎、头痛和腹泻构成了这款药物最需关注的三大安全信号…...

编程新知 2026/5/25 20:57:14

告别杂乱！用FileMenu Tools 8.4.2一键清理Windows 11右键菜单（附隐藏技巧）

Windows 11右键菜单精简指南&#xff1a;用FileMenu Tools打造高效工作流每次在文件上点击右键时&#xff0c;那个缓慢弹出的冗长菜单是否让你感到烦躁&#xff1f;随着安装的软件越来越多&#xff0c;Windows的右键菜单往往会变得臃肿不堪&#xff0c;严重影响工作效率。今天&…...

编程新知 2026/5/25 20:14:00

告别Windows卡顿！在VMware里给Kubuntu 22.04 LTS分区和安装的保姆级避坑指南

告别Windows卡顿&#xff01;在VMware里给Kubuntu 22.04 LTS分区和安装的保姆级避坑指南你是否已经厌倦了Windows系统越来越慢的启动速度、频繁的后台更新和资源占用&#xff1f;当你的电脑开始频繁卡顿&#xff0c;或许该考虑给系统来一次"减负"了。Kubuntu 22.04 L…...

编程新知 2026/5/27 6:01:52

Metabase：零代码 BI 数据可视化工具，自建数据看板

Metabase&#xff1a;零代码 BI 数据可视化工具&#xff0c;自建数据看板 在数据驱动决策的时代&#xff0c;能快速看到业务数据的变化趋势至关重要。然而&#xff0c;专业 BI 工具&#xff08;如 Tableau、Power BI&#xff09;价格昂贵&#xff0c;而让每个业务同学都学 SQL …...

编程新知 2026/5/25 17:13:03