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

news2024/9/20 16:47:33

A. 最终效果

在这里插入图片描述

B. 示例代码

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