Update app.py

app.py

@@ -1,5 +1,6 @@
 import streamlit as st
 import openai
+import urllib.parse
 
 # Function to call OpenAI GPT model for prompt processing
 def get_diagram_code(prompt, diagram_type, api_key):
@@ -25,7 +26,7 @@ def get_diagram_code(prompt, diagram_type, api_key):
 
 # Streamlit App UI
 def main():
-    st.title("Generate Diagrams using GPT-4 and Mermaid AI")
+    st.title("Generate Diagrams using GPT-4 and MermaidFlow")
 
     # User input for OpenAI API key
     api_key = st.text_input("Enter your OpenAI API Key:", type="password")
@@ -49,12 +50,17 @@ def main():
                 # Render Mermaid code to Streamlit
                 st.code(diagram_code, language='mermaid')
 
-                # Prepare Mermaid code for the Mermaid AI platform
-                # encoded_code = diagram_code.replace("\n", "%0A").replace(" ", "%20")  # Encode the Mermaid code
-                # mermaid_ai_url = f"https://www.mermaidchart.com/app/projects/1179e788-52af-40a6-a788-6f15474a9c04/diagrams/f787a6a7-4922-4063-ad40-29bdec71a7ab/version/v0.1/ai?mermaidCode={encoded_code}"
-                mermaid_ai_url =f"https://www.mermaidflow.app/editor"
-                # Provide a link to the Mermaid AI platform
-                st.markdown(f"Click the link to generate and save the diagram: [Mermaid AI - Generate Diagram]({mermaid_ai_url})")
+                # Encode the Mermaid code for use in the MermaidFlow editor URL
+                encoded_code = urllib.parse.quote(diagram_code)  # URL encode the Mermaid code
+
+                # MermaidFlow Editor URL with the encoded Mermaid code
+                mermaidflow_url = f"https://www.mermaidflow.app/editor?code={encoded_code}"
+
+                # Embed MermaidFlow Editor in iframe
+                st.markdown(f'<iframe src="{mermaidflow_url}" width="100%" height="600px"></iframe>', unsafe_allow_html=True)
+
+                # Provide a direct link to MermaidFlow editor for convenience
+                st.markdown(f"Click the link to open and edit the diagram directly: [MermaidFlow Editor](https://www.mermaidflow.app/editor?code={encoded_code})")
 
             else:
                 st.error("Failed to generate diagram code.")