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

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

news 2026/2/9 21:53:40

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一种用于便携式电子设备的数据存储设备，于1994年由SanDisk公司推出。SRAM静态随机存取存储器，不需要刷新电路即能保存数据，速度快但集成度低、功耗大。PSRAM伪静态随机存取存储器，结合了SRAM和DRAM的特点…...

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

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

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

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

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

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

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

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

引言 K近邻（K-Nearest Neighbors, KNN）算法作为一种经典的无监督学习算法，在点云处理中的应用尤为广泛。它通过计算点与点之间的距离来寻找数据点的邻居，从而有效进行点云分类、聚类和特征提取。本菜在复现点云文章过程&#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是一个字节一个字节填充，如果是使int类型填充非0或者-1就会报错，如 int a[100]; memset(a…...

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

Redis：Redis性能变慢的原因

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

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

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

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

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

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

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

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

TensorRT-LLM高级用法

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

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

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

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

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

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

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

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

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

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

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

docker registry 仓库加密

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

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

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

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

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

炮弹【USACO】

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

编程日记 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教师工作量管理系统包含：项目源码、数据库脚本等，该项目附带全部源码可作为毕设使用。项目都经过严格调试，eclipse或者idea 确保可以运行！ 该系统功能完善、界面美观…...

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

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

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

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

51c自动驾驶~合集58

我自己的原文哦~ https://blog.51cto.com/whaosoft/13967107 #CCA-Attention 全局池化局部保留，CCA-Attention为LLM长文本建模带来突破性进展琶洲实验室、华南理工大学联合推出关键上下文感知注意力机制（CCA-Attention），…...

编程新知 2026/2/5 4:25:15

【Redis技术进阶之路】「原理分析系列开篇」分析客户端和服务端网络诵信交互实现（服务端执行命令请求的过程 - 初始化服务器）

服务端执行命令请求的过程【专栏简介】【技术大纲】【专栏目标】【目标人群】1. Redis爱好者与社区成员2. 后端开发和系统架构师3. 计算机专业的本科生及研究生初始化服务器1. 初始化服务器状态结构初始化RedisServer变量 2. 加载相关系统配置和用户配置参数定制化配置参数案…...

编程新知 2026/2/2 0:45:02

（转）什么是DockerCompose?它有什么作用？

一、什么是DockerCompose? DockerCompose可以基于Compose文件帮我们快速的部署分布式应用，而无需手动一个个创建和运行容器。 Compose文件是一个文本文件，通过指令定义集群中的每个容器如何运行。 DockerCompose就是把DockerFile转换成指令去运行。 …...

编程新知 2026/1/31 22:59:12

第 86 场周赛：矩阵中的幻方、钥匙和房间、将数组拆分成斐波那契序列、猜猜这个单词

Q1、[中等] 矩阵中的幻方 1、题目描述 3 x 3 的幻方是一个填充有从 1 到 9 的不同数字的 3 x 3 矩阵，其中每行，每列以及两条对角线上的各数之和都相等。给定一个由整数组成的row x col 的 grid，其中有多少个 3 3 的 “幻方” 子矩阵&am…...

编程新知 2026/2/7 13:27:36

vue3+vite项目中使用.env文件环境变量方法

vue3vite项目中使用.env文件环境变量方法 .env文件作用命名规则常用的配置项示例使用方法注意事项在vite.config.js文件中读取环境变量方法 .env文件作用 .env 文件用于定义环境变量，这些变量可以在项目中通过 import.meta.env 进行访问。Vite 会自动加载这些环境变…...

编程新知 2026/1/26 19:12:01

.Net Framework 4/C# 关键字（非常用，持续更新...）

一、is 关键字 is 关键字用于检查对象是否于给定类型兼容，如果兼容将返回 true，如果不兼容则返回 false，在进行类型转换前，可以先使用 is 关键字判断对象是否与指定类型兼容，如果兼容才进行转换，这样的转换是安全的。例如有：首先创建一个字符串对象，然后将字符串对象隐…...

编程新知 2025/9/25 18:41:38

STM32HAL库USART源代码解析及应用

STM32HAL库USART源代码解析前言STM32CubeIDE配置串口USART和UART的选择使用模式参数设置GPIO配置DMA配置中断配置硬件流控制使能生成代码解析和使用方法串口初始化__UART_HandleTypeDef结构体浅析HAL库代码实际使用方法使用轮询方式发送使用轮询方式接收使用中断方式发送使用中…...

编程新知 2026/1/31 13:18:46

Git 3天2K星标：Datawhale 的 Happy-LLM 项目介绍（附教程）

引言在人工智能飞速发展的今天，大语言模型（Large Language Models, LLMs）已成为技术领域的焦点。从智能写作到代码生成，LLM 的应用场景不断扩展，深刻改变了我们的工作和生活方式。然而，理解这些模型的内部…...

编程新知 2026/1/29 11:06:33

pycharm 设置环境出错 pycharm 新建项目，设置虚拟环境，出错 pycharm 出错 Cannot open Local Failed to start [powershell.exe, -NoExit, -ExecutionPolicy, Bypass, -File, C:\Program Files\JetBrains\PyCharm 2024.1.3\plugins\terminal\shell-int…...

编程新知 2026/1/16 15:03:10

【HarmonyOS 5】鸿蒙中Stage模型与FA模型详解

一、前言在HarmonyOS 5的应用开发模型中，featureAbility是旧版FA模型（Feature Ability）的用法，Stage模型已采用全新的应用架构，推荐使用组件化的上下文获取方式，而非依赖featureAbility。 FA大概是API7之…...

编程新知 2025/10/9 0:45:56

A. 最终效果

B. 示例代码

C. 参考文献

相关文章：