DeepResearchEvaluator

Sleeping

App Files Files Community

awacke1 commited on Dec 30, 2024

Commit

57c5e5a

verified ·

1 Parent(s): ba59039

Update app.py

Browse files

Files changed (1) hide show

app.py +69 -29

app.py CHANGED Viewed

@@ -1,27 +1,68 @@
 import streamlit as st
-# If you want to render Mermaid diagrams directly in Streamlit,
-# install streamlit-mermaid:  pip install streamlit-mermaid
-# and then uncomment the following import:
-# import streamlit_mermaid as st_mermaid
-# -----------------------------------------------------------------------------------
-# Default Mermaid code: a simple AI Architecture diagram with short text + emoji
-# -----------------------------------------------------------------------------------
 DEFAULT_MERMAID = """
 flowchart LR
-    %% A short, labeled, emoji-filled flow
     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 main():
-    st.title("Mermaid Diagram Editor 🏺")
-    # Create two columns: left for Markdown, right for Mermaid
     left_col, right_col = st.columns(2)
     # --- Left Column: Markdown Editor ---
     with left_col:
         st.subheader("Markdown Side 📝")
@@ -31,17 +72,18 @@ def main():
             height=400
         )
-        # A small button bar at bottom
         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"):
-                markdown_text = ""
                 st.experimental_rerun()
-        # Show the rendered Markdown below
         st.markdown("---")
         st.markdown("**Preview:**")
         st.markdown(markdown_text)
@@ -49,31 +91,29 @@ def main():
     # --- Right Column: Mermaid Editor ---
     with right_col:
         st.subheader("Mermaid Side 🧜‍♂️")
-        mermaid_code = st.text_area(
             "Edit Mermaid Code:",
-            value=DEFAULT_MERMAID,
             height=400
         )
-        # A small button bar at bottom
         colC, colD = st.columns([1,1])
         with colC:
             if st.button("🎨 Refresh Diagram"):
-                st.write("**Mermaid** diagram refreshed!")
         with colD:
             if st.button("❌ Clear Mermaid"):
-                mermaid_code = ""
                 st.experimental_rerun()
         st.markdown("---")
         st.markdown("**Mermaid Source:**")
-        st.code(mermaid_code, language="python", line_numbers=True)
-        # If streamlit-mermaid is installed, render the live diagram here:
-        # try:
-        #     st_mermaid.mermaid(mermaid_code)
-        # except Exception as e:
-        #     st.error("Could not render Mermaid diagram. " + str(e))
 if __name__ == "__main__":
     main()

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