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

本文主要是介绍240907-Gradio插入Mermaid流程图并自适应浏览器高度，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

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()