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

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

news 2025/9/17 2:11:48

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

synchronized 学习

学习源&#xff1a; https://www.bilibili.com/video/BV1aJ411V763?spm_id_from333.788.videopod.episodes&vd_source32e1c41a9370911ab06d12fbc36c4ebc 1.应用场景 不超卖&#xff0c;也要考虑性能问题&#xff08;场景&#xff09; 2.常见面试问题&#xff1a; sync出…...

编程新知 2025/9/8 2:34:58

大话软工笔记—需求分析概述

需求分析&#xff0c;就是要对需求调研收集到的资料信息逐个地进行拆分、研究&#xff0c;从大量的不确定“需求”中确定出哪些需求最终要转换为确定的“功能需求”。 需求分析的作用非常重要&#xff0c;后续设计的依据主要来自于需求分析的成果&#xff0c;包括: 项目的目的…...

编程新知 2025/9/16 1:33:49

linux arm系统烧录

1、打开瑞芯微程序 2、按住linux arm 的 recover按键 插入电源 3、当瑞芯微检测到有设备 4、松开recover按键 5、选择升级固件 6、点击固件选择本地刷机的linux arm 镜像 7、点击升级 &#xff08;忘了有没有这步了 估计有&#xff09; 刷机程序 和 镜像 就不提供了。要刷的时…...

编程新知 2025/9/15 3:25:50

c#开发AI模型对话

AI模型 前面已经介绍了一般AI模型本地部署&#xff0c;直接调用现成的模型数据。这里主要讲述讲接口集成到我们自己的程序中使用方式。 微软提供了ML.NET来开发和使用AI模型&#xff0c;但是目前国内可能使用不多&#xff0c;至少实践例子很少看见。开发训练模型就不介绍了&am…...

编程新知 2025/8/6 7:59:50

python执行测试用例，allure报乱码且未成功生成报告

allure执行测试用例时显示乱码&#xff1a;‘allure’ &#xfffd;&#xfffd;&#xfffd;&#xfffd;&#xfffd;ڲ&#xfffd;&#xfffd;&#xfffd;&#xfffd;ⲿ&#xfffd;&#xfffd;&#xfffd;Ҳ&#xfffd;&#xfffd;&#xfffd;ǿ&#xfffd;&am…...

编程新知 2025/9/9 10:10:36

MySQL 部分重点知识篇

一、数据库对象 1. 主键 定义 &#xff1a;主键是用于唯一标识表中每一行记录的字段或字段组合。它具有唯一性和非空性特点。 作用 &#xff1a;确保数据的完整性&#xff0c;便于数据的查询和管理。 示例 &#xff1a;在学生信息表中&#xff0c;学号可以作为主键&#xff…...

编程新知 2025/8/19 22:24:50

Vite中定义@软链接

在webpack中可以直接通过符号表示src路径&#xff0c;但是vite中默认不可以。 如何实现&#xff1a; vite中提供了resolve.alias&#xff1a;通过别名在指向一个具体的路径 在vite.config.js中 import { join } from pathexport default defineConfig({plugins: [vue()],//…...

编程新知 2025/7/9 18:52:53

Bean 作用域有哪些？如何答出技术深度？

导语&#xff1a; Spring 面试绕不开 Bean 的作用域问题&#xff0c;这是面试官考察候选人对 Spring 框架理解深度的常见方式。本文将围绕“Spring 中的 Bean 作用域”展开&#xff0c;结合典型面试题及实战场景&#xff0c;帮你厘清重点&#xff0c;打破模板式回答&#xff0c…...

编程新知 2025/7/9 17:59:19

【LeetCode】算法详解#6 ---除自身以外数组的乘积

1.题目介绍 给定一个整数数组 nums&#xff0c;返回 数组 answer &#xff0c;其中 answer[i] 等于 nums 中除 nums[i] 之外其余各元素的乘积 。 题目数据 保证 数组 nums之中任意元素的全部前缀元素和后缀的乘积都在 32 位 整数范围内。 请 不要使用除法&#xff0c;且在 O…...

编程新知 2025/9/9 10:09:02

STM32 低功耗设计全攻略：PWR 模块原理 + 睡眠 / 停止 / 待机模式实战（串口 + 红外 + RTC 应用全解析）

文章目录 PWRPWR&#xff08;电源控制模块&#xff09;核心功能 电源框图上电复位和掉电复位可编程电压监测器低功耗模式模式选择睡眠模式停止模式待机模式 修改主频一、准备工作二、修改主频的核心步骤&#xff1a;宏定义配置三、程序流程&#xff1a;时钟配置函数解析四、注意…...

编程新知 2025/9/2 17:24:58