Update app.py

app.py

@@ -13,7 +13,7 @@ def get_diagram_code(prompt, diagram_type, api_key):
         # For GPT-4 and other chat models, use the v1/chat/completions endpoint
         response = openai.ChatCompletion.create(
             model="gpt-4o",  # Make sure you're using the right model
-            messages=[
+            messages=[ 
                 {"role": "system", "content": "You are a helpful assistant."},
                 {"role": "user", "content": f"Generate a {diagram_type} diagram in Mermaid.js syntax based on the following prompt: {prompt}"}
             ],
@@ -38,18 +38,83 @@ def convert_svg_to_png(svg_file):
         st.error(f"Error during SVG to PNG conversion: {e}")
         return None
 
+# Adding custom CSS
+def custom_css():
+    st.markdown("""
+        <style>
+            body {
+                background-color: #f0f4f8;
+                font-family: 'Roboto', sans-serif;
+            }
+            .stButton>button {
+                background-color: #4CAF50;
+                color: white;
+                font-size: 18px;
+                padding: 12px 24px;
+                border-radius: 8px;
+                transition: background-color 0.3s ease;
+            }
+            .stButton>button:hover {
+                background-color: #45a049;
+            }
+            .stTextInput, .stTextArea {
+                background-color: #fff;
+                border: 2px solid #ddd;
+                border-radius: 8px;
+                padding: 12px;
+                font-size: 16px;
+                transition: border 0.3s ease;
+            }
+            .stTextInput:focus, .stTextArea:focus {
+                border-color: #4CAF50;
+            }
+            .stImage {
+                margin-bottom: 20px;
+                border-radius: 10px;
+            }
+            h1 {
+                color: #333;
+                text-align: center;
+                font-size: 36px;
+            }
+            .expandable-section {
+                margin-top: 20px;
+            }
+            iframe {
+                border: 0;
+                border-radius: 10px;
+            }
+            .loading-spinner {
+                display: none;
+                animation: spin 2s infinite linear;
+                border: 6px solid #f3f3f3;
+                border-top: 6px solid #3498db;
+                border-radius: 50%;
+                width: 50px;
+                height: 50px;
+                margin: 0 auto;
+            }
+            @keyframes spin {
+                0% { transform: rotate(0deg); }
+                100% { transform: rotate(360deg); }
+            }
+        </style>
+    """, unsafe_allow_html=True)
+
 # Streamlit App UI
 def main():
+    custom_css()  # Apply custom CSS
+    
     st.title("Generate Diagrams using AI and MermaidFlow")
-
-    # Display a logo or icon
+    
+    # Display a logo or icon with subtle animation
     image = Image.open("11.png")  # Path to your image file
-    st.image(image, width=300)  # You can adjust the width as needed
+    st.image(image, width=300, use_column_width=False) 
 
     # Display sample prompt
-    with st.expander("Sample Prompt For Users"):
+    with st.expander("Sample Prompt For Users", expanded=True):
         st.markdown("""
-        Create a UML diagram for a **Library Management System** that includes classes such as **Book** (with attributes like `bookID`, `title`, `author`, `publisher`, `genre`, `availabilityStatus` and methods like `checkAvailability()`, `updateAvailability()`), **Member** (with attributes such as `memberID`, `name`, `email`, `phoneNumber`, `membershipDate` and methods like `borrowBook()`, `returnBook()`, `reserveBook()`), **Staff** (with attributes such as `staffID`, `name`, `role`, `email`, `phoneNumber` and methods like `addBook()`, `removeBook()`, `updateBookInfo()`), **Transaction** (with attributes like `transactionID`, `transactionDate`, `dueDate`, `fineAmount` and methods like `calculateFine()`, `generateReceipt()`), and **Reservation** (with attributes like `reservationID`, `reservationDate`, `expirationDate` and methods like `cancelReservation()`, `checkReservationStatus()`). Define the relationships where a **Member** can borrow many **Books**, a **Staff** can manage many **Books**, a **Transaction** is linked to one **Book** and one **Member**, and a **Reservation** is made by a **Member** for a **Book**. Ensure appropriate visibility markers for methods and attributes, and include necessary relationships such as associations, multiplicities, and inheritance. Optionally, consider adding sequence or activity diagrams for processes like book borrowing.
+            Create a UML diagram for a **Library Management System** that includes classes such as **Book** (with attributes like `bookID`, `title`, `author`, `publisher`, `genre`, `availabilityStatus` and methods like `checkAvailability()`, `updateAvailability()`), **Member** (with attributes such as `memberID`, `name`, `email`, `phoneNumber`, `membershipDate` and methods like `borrowBook()`, `returnBook()`, `reserveBook()`), **Staff** (with attributes such as `staffID`, `name`, `role`, `email`, `phoneNumber` and methods like `addBook()`, `removeBook()`, `updateBookInfo()`), **Transaction** (with attributes like `transactionID`, `transactionDate`, `dueDate`, `fineAmount` and methods like `calculateFine()`, `generateReceipt()`), and **Reservation** (with attributes like `reservationID`, `reservationDate`, `expirationDate` and methods like `cancelReservation()`, `checkReservationStatus()`). Define the relationships where a **Member** can borrow many **Books**, a **Staff** can manage many **Books**, a **Transaction** is linked to one **Book** and one **Member**, and a **Reservation** is made by a **Member** for a **Book**. Ensure appropriate visibility markers for methods and attributes, and include necessary relationships such as associations, multiplicities, and inheritance. Optionally, consider adding sequence or activity diagrams for processes like book borrowing.
         """)
 
     # User input for OpenAI API key
@@ -66,11 +131,20 @@ def main():
     diagram_types = ["UML Diagram", "ER Diagram", "State Diagram", "Class Diagram", "Sequence Diagram"]
     diagram_choice = st.selectbox("Select the type of diagram to generate:", diagram_types)
 
+    # Show loading spinner when generating the diagram
+    loading_spinner = st.empty()
+    
     if st.button("Generate Diagram"):
         if prompt:
+            # Show loading animation
+            loading_spinner.markdown("<div class='loading-spinner'></div>", unsafe_allow_html=True)
+            
             diagram_code = get_diagram_code(prompt, diagram_choice, api_key)
             
             if diagram_code:
+                # Hide the spinner after diagram code is generated
+                loading_spinner.empty()
+
                 # Render Mermaid code to Streamlit
                 st.code(diagram_code, language='mermaid')
 
@@ -85,7 +159,6 @@ def main():
 
                 # Provide a direct link to MermaidFlow editor for convenience
                 st.markdown(f"Copy and paste the Generated Mermaid Code in the Live Editor and download the generated diagram by clicking on Export as SVG format to get a high-resolution generated image.")
-
             else:
                 st.error("Failed to generate diagram code.")
         else: