awacke1 commited on
Commit
57c5e5a
Β·
verified Β·
1 Parent(s): ba59039

Update app.py

Browse files
Files changed (1) hide show
  1. app.py +69 -29
app.py CHANGED
@@ -1,27 +1,68 @@
1
  import streamlit as st
2
- # If you want to render Mermaid diagrams directly in Streamlit,
3
- # install streamlit-mermaid: pip install streamlit-mermaid
4
- # and then uncomment the following import:
5
- # import streamlit_mermaid as st_mermaid
6
 
7
- # -----------------------------------------------------------------------------------
8
- # Default Mermaid code: a simple AI Architecture diagram with short text + emoji
9
- # -----------------------------------------------------------------------------------
 
 
 
 
10
  DEFAULT_MERMAID = """
11
  flowchart LR
12
- %% A short, labeled, emoji-filled flow
13
  U((User 😎)) -- "Talk πŸ—£οΈ" --> LLM[LLM Agent πŸ€–\\nExtract Info]
14
  LLM -- "Query πŸ”" --> HS[Hybrid Search πŸ”Ž\\nVector+NER+Lexical]
15
  HS -- "Reason πŸ€”" --> RE[Reasoning Engine πŸ› οΈ\\nNeuralNetwork+Medical]
16
  RE -- "Link πŸ“‘" --> KG((Knowledge Graph πŸ“š\\nOntology+GAR+RAG))
17
  """
18
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
19
  def main():
20
- st.title("Mermaid Diagram Editor 🏺")
21
 
22
- # Create two columns: left for Markdown, right for Mermaid
 
 
 
 
 
 
 
 
 
 
 
23
  left_col, right_col = st.columns(2)
24
-
25
  # --- Left Column: Markdown Editor ---
26
  with left_col:
27
  st.subheader("Markdown Side πŸ“")
@@ -31,17 +72,18 @@ def main():
31
  height=400
32
  )
33
 
34
- # A small button bar at bottom
35
  colA, colB = st.columns([1,1])
36
  with colA:
37
  if st.button("πŸ”„ Refresh Markdown"):
38
- st.write("**Markdown** content refreshed!")
39
  with colB:
40
  if st.button("❌ Clear Markdown"):
41
- markdown_text = ""
 
42
  st.experimental_rerun()
43
-
44
- # Show the rendered Markdown below
45
  st.markdown("---")
46
  st.markdown("**Preview:**")
47
  st.markdown(markdown_text)
@@ -49,31 +91,29 @@ def main():
49
  # --- Right Column: Mermaid Editor ---
50
  with right_col:
51
  st.subheader("Mermaid Side πŸ§œβ€β™‚οΈ")
52
- mermaid_code = st.text_area(
53
  "Edit Mermaid Code:",
54
- value=DEFAULT_MERMAID,
55
  height=400
56
  )
57
 
58
- # A small button bar at bottom
59
  colC, colD = st.columns([1,1])
60
  with colC:
61
  if st.button("🎨 Refresh Diagram"):
62
- st.write("**Mermaid** diagram refreshed!")
 
 
63
  with colD:
64
  if st.button("❌ Clear Mermaid"):
65
- mermaid_code = ""
66
  st.experimental_rerun()
67
-
68
  st.markdown("---")
69
  st.markdown("**Mermaid Source:**")
70
- st.code(mermaid_code, language="python", line_numbers=True)
71
-
72
- # If streamlit-mermaid is installed, render the live diagram here:
73
- # try:
74
- # st_mermaid.mermaid(mermaid_code)
75
- # except Exception as e:
76
- # st.error("Could not render Mermaid diagram. " + str(e))
77
 
78
  if __name__ == "__main__":
79
  main()
 
1
  import streamlit as st
2
+ import streamlit.components.v1 as components
 
 
 
3
 
4
+ # πŸ’‘ If you want to render Mermaid diagrams in pure Streamlit, you can use
5
+ # streamlit-mermaid or other solutions, but here's the direct HTML approach.
6
+ # πŸ’Ώ pip install streamlit-mermaid (optional) if you go that route.
7
+
8
+ # -------------------------------------------
9
+ # πŸŽ‰ Default Mermaid code with emojis πŸŽ‰
10
+ # -------------------------------------------
11
  DEFAULT_MERMAID = """
12
  flowchart LR
13
+ %% The user is unstoppable
14
  U((User 😎)) -- "Talk πŸ—£οΈ" --> LLM[LLM Agent πŸ€–\\nExtract Info]
15
  LLM -- "Query πŸ”" --> HS[Hybrid Search πŸ”Ž\\nVector+NER+Lexical]
16
  HS -- "Reason πŸ€”" --> RE[Reasoning Engine πŸ› οΈ\\nNeuralNetwork+Medical]
17
  RE -- "Link πŸ“‘" --> KG((Knowledge Graph πŸ“š\\nOntology+GAR+RAG))
18
  """
19
 
20
+ def generate_mermaid_html(mermaid_code: str) -> str:
21
+ """
22
+ 🍿 Returns minimal HTML embedding a Mermaid diagram.
23
+ The code is centered using a simple inline style πŸ•Ί
24
+ """
25
+ return f"""
26
+ <html>
27
+ <head>
28
+ <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
29
+ <style>
30
+ /* Quick center alignment: your diagram in spotlight 🀩 */
31
+ .centered-mermaid {{
32
+ display: flex;
33
+ justify-content: center;
34
+ margin: 20px auto;
35
+ }}
36
+ </style>
37
+ </head>
38
+ <body>
39
+ <div class="mermaid centered-mermaid">
40
+ {mermaid_code}
41
+ </div>
42
+ <script>
43
+ mermaid.initialize({{ startOnLoad: true }});
44
+ </script>
45
+ </body>
46
+ </html>
47
+ """
48
+
49
  def main():
50
+ st.set_page_config(page_title="Inline Mermaid Demo", layout="wide")
51
 
52
+ # πŸ”₯ Title for our spiffy app
53
+ st.title("Top-Centered Mermaid Diagram 🏺")
54
+
55
+ # πŸ§ͺ Start with default code or user-modified
56
+ if "current_mermaid" not in st.session_state:
57
+ st.session_state["current_mermaid"] = DEFAULT_MERMAID
58
+
59
+ # πŸš€ Show the diagram *first*, in the center, via HTML embed
60
+ diagram_html = generate_mermaid_html(st.session_state["current_mermaid"])
61
+ components.html(diagram_html, height=400, scrolling=True)
62
+
63
+ # 🌈 Now, place columns for Markdown & Mermaid editing
64
  left_col, right_col = st.columns(2)
65
+
66
  # --- Left Column: Markdown Editor ---
67
  with left_col:
68
  st.subheader("Markdown Side πŸ“")
 
72
  height=400
73
  )
74
 
75
+ # πŸ”˜ Button bar: short, sweet, emoji-laden
76
  colA, colB = st.columns([1,1])
77
  with colA:
78
  if st.button("πŸ”„ Refresh Markdown"):
79
+ st.write("**Markdown** content refreshed! 🍿")
80
  with colB:
81
  if st.button("❌ Clear Markdown"):
82
+ # 🫧 Bye-bye text
83
+ st.session_state["last_markdown"] = ""
84
  st.experimental_rerun()
85
+
86
+ # Preview the user’s Markdown below
87
  st.markdown("---")
88
  st.markdown("**Preview:**")
89
  st.markdown(markdown_text)
 
91
  # --- Right Column: Mermaid Editor ---
92
  with right_col:
93
  st.subheader("Mermaid Side πŸ§œβ€β™‚οΈ")
94
+ mermaid_input = st.text_area(
95
  "Edit Mermaid Code:",
96
+ value=st.session_state["current_mermaid"],
97
  height=400
98
  )
99
 
100
+ # πŸ•ΉοΈ Another lil button bar
101
  colC, colD = st.columns([1,1])
102
  with colC:
103
  if st.button("🎨 Refresh Diagram"):
104
+ st.session_state["current_mermaid"] = mermaid_input
105
+ st.write("**Mermaid** diagram refreshed! 🌈")
106
+ st.experimental_rerun()
107
  with colD:
108
  if st.button("❌ Clear Mermaid"):
109
+ st.session_state["current_mermaid"] = ""
110
  st.experimental_rerun()
111
+
112
  st.markdown("---")
113
  st.markdown("**Mermaid Source:**")
114
+ st.code(mermaid_input, language="python", line_numbers=True)
115
+
116
+ # πŸ¦€ The show is over. Crabs? Possibly. πŸ¦€
 
 
 
 
117
 
118
  if __name__ == "__main__":
119
  main()