A. 最终效果
B. 示例代码
python
import gradio as gr
mermaid_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">
journey
title Create AI
section Training
Format DataSet Inputs Files, Data Splits: 5: Teacher
Model Build w/ SKLearn, TF, Pytorch: 3: Student
Determine Model Performance: 1: Teacher, Student
section Deploy
Web Deploy Local and Cloud: 5: Teacher
Architecture Spaces Gradio Streamlit Heroku AWS Azure and GCCP: 5: Teacher
section Testing
Test Model with Input Datasets: 5: Teacher
Examples. Inputs that Work, Inputs That Break Model: 5: Teacher
Governance - Analyze, Publish Fairness, Equity, Bias for Datasets and Outputs: 5: Teacher
</div>
<div class="mermaid">
sequenceDiagram
participant Alice
participant Bob
Alice->>John: Hello John, how are you?
loop Healthcheck
John->>John: Fight against hypochondria
end
Note 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_code
with 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()