Update app.py

app.py

@@ -26,18 +26,6 @@ def get_diagram_code(prompt, diagram_type, api_key):
         st.error(f"Error: {e}")
         return None
 
-# Function to convert SVG to PNG
-def convert_svg_to_png(svg_file):
-    try:
-        # Read the uploaded SVG file and convert it to PNG using cairosvg
-        png_output = io.BytesIO()
-        cairosvg.svg2png(file_obj=svg_file, write_to=png_output)
-        png_output.seek(0)
-        return png_output
-    except Exception as e:
-        st.error(f"Error during SVG to PNG conversion: {e}")
-        return None
-
 # Adding custom CSS
 def custom_css():
     st.markdown("""
@@ -101,15 +89,58 @@ def custom_css():
         </style>
     """, unsafe_allow_html=True)
 
+# Add anime.js CDN and custom JS for animations
+def anime_js():
+    st.markdown("""
+        <script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/anime.min.js"></script>
+        <script>
+            document.addEventListener('DOMContentLoaded', function() {
+                // Example animation for the button when clicked
+                const button = document.querySelector('.stButton>button');
+                if (button) {
+                    button.addEventListener('mouseover', function() {
+                        anime({
+                            targets: button,
+                            scale: [1, 1.1],
+                            duration: 300,
+                            easing: 'easeInOutQuad'
+                        });
+                    });
+                    button.addEventListener('mouseout', function() {
+                        anime({
+                            targets: button,
+                            scale: [1.1, 1],
+                            duration: 300,
+                            easing: 'easeInOutQuad'
+                        });
+                    });
+                }
+                
+                // Example animation for diagram generation code
+                const diagramCode = document.querySelector('pre code');
+                if (diagramCode) {
+                    anime({
+                        targets: diagramCode,
+                        opacity: [0, 1],
+                        translateY: [-50, 0],
+                        duration: 1000,
+                        easing: 'easeOutExpo'
+                    });
+                }
+            });
+        </script>
+    """, unsafe_allow_html=True)
+
 # Streamlit App UI
 def main():
     custom_css()  # Apply custom CSS
+    anime_js()  # Add anime.js functionality
     
     st.title("Generate Diagrams using AI and MermaidFlow")
     
     # Display a logo or icon with subtle animation
     image = Image.open("11.png")  # Path to your image file
-    st.image(image, width=300) 
+    st.image(image, width=300, use_column_width=False) 
 
     # Display sample prompt
     with st.expander("Sample Prompt For Users", expanded=True):
@@ -145,7 +176,7 @@ def main():
                 # Hide the spinner after diagram code is generated
                 loading_spinner.empty()
 
-                # Render Mermaid code to Streamlit
+                # Render Mermaid code to Streamlit with animation
                 st.code(diagram_code, language='mermaid')
 
                 # Encode the Mermaid code for use in the MermaidFlow editor URL