Spaces:
Sleeping
Sleeping
File size: 4,115 Bytes
ba59039 57c5e5a ba59039 57c5e5a ba59039 57c5e5a ba59039 57c5e5a ba59039 57c5e5a ba59039 57c5e5a ba59039 57c5e5a ba59039 57c5e5a ba59039 57c5e5a ba59039 57c5e5a ba59039 57c5e5a ba59039 57c5e5a ba59039 57c5e5a ba59039 57c5e5a ba59039 57c5e5a ba59039 57c5e5a ba59039 57c5e5a ba59039 57c5e5a ba59039 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 |
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()
|