import streamlit as st import streamlit.components.v1 as components # π‘ If you want to render Mermaid diagrams in pure Streamlit, you can use # streamlit-mermaid or other solutions, but here's the direct HTML approach. # πΏ pip install streamlit-mermaid (optional) if you go that route. # ------------------------------------------- # π Default Mermaid code with emojis π # ------------------------------------------- DEFAULT_MERMAID = """ flowchart LR %% The user is unstoppable U((User π)) -- "Talk π£οΈ" --> LLM[LLM Agent π€\\nExtract Info] LLM -- "Query π" --> HS[Hybrid Search π\\nVector+NER+Lexical] HS -- "Reason π€" --> RE[Reasoning Engine π οΈ\\nNeuralNetwork+Medical] RE -- "Link π‘" --> KG((Knowledge Graph π\\nOntology+GAR+RAG)) """ def generate_mermaid_html(mermaid_code: str) -> str: """ πΏ Returns minimal HTML embedding a Mermaid diagram. The code is centered using a simple inline style πΊ """ return f""" <html> <head> <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script> <style> /* Quick center alignment: your diagram in spotlight π€© */ .centered-mermaid {{ display: flex; justify-content: center; margin: 20px auto; }} </style> </head> <body> <div class="mermaid centered-mermaid"> {mermaid_code} </div> <script> mermaid.initialize({{ startOnLoad: true }}); </script> </body> </html> """ def main(): st.set_page_config(page_title="Inline Mermaid Demo", layout="wide") # π₯ Title for our spiffy app st.title("Top-Centered Mermaid Diagram πΊ") # π§ͺ Start with default code or user-modified if "current_mermaid" not in st.session_state: st.session_state["current_mermaid"] = DEFAULT_MERMAID # π Show the diagram *first*, in the center, via HTML embed diagram_html = generate_mermaid_html(st.session_state["current_mermaid"]) components.html(diagram_html, height=400, scrolling=True) # π Now, place columns for Markdown & Mermaid editing left_col, right_col = st.columns(2) # --- Left Column: Markdown Editor --- with left_col: st.subheader("Markdown Side π") markdown_text = st.text_area( "Edit Markdown:", value="## Hello!\nYou can type *Markdown* here.\n", height=400 ) # π Button bar: short, sweet, emoji-laden colA, colB = st.columns([1,1]) with colA: if st.button("π Refresh Markdown"): st.write("**Markdown** content refreshed! πΏ") with colB: if st.button("β Clear Markdown"): # 𫧠Bye-bye text st.session_state["last_markdown"] = "" st.experimental_rerun() # Preview the userβs Markdown below st.markdown("---") st.markdown("**Preview:**") st.markdown(markdown_text) # --- Right Column: Mermaid Editor --- with right_col: st.subheader("Mermaid Side π§ββοΈ") mermaid_input = st.text_area( "Edit Mermaid Code:", value=st.session_state["current_mermaid"], height=400 ) # πΉοΈ Another lil button bar colC, colD = st.columns([1,1]) with colC: if st.button("π¨ Refresh Diagram"): st.session_state["current_mermaid"] = mermaid_input st.write("**Mermaid** diagram refreshed! π") st.experimental_rerun() with colD: if st.button("β Clear Mermaid"): st.session_state["current_mermaid"] = "" st.experimental_rerun() st.markdown("---") st.markdown("**Mermaid Source:**") st.code(mermaid_input, language="python", line_numbers=True) # π¦ The show is over. Crabs? Possibly. π¦ if __name__ == "__main__": main()