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"""
{mermaid_code}
"""
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()