Update app.py

app.py

@@ -5,10 +5,10 @@ import os
 import base64
 from io import StringIO
 
-# Fix Graphviz PATH error for Hugging Face
+# Configure system path for Hugging Face Spaces
 os.environ["PATH"] += os.pathsep + '/usr/bin/graphviz'
 
-# Enhanced UI CSS
+# Enhanced 3D styling CSS
 st.markdown("""
 <style>
     .stApp {
@@ -26,9 +26,6 @@ st.markdown("""
         border: none;
         font-weight: 600;
         transition: transform 0.3s;
-    }
-    .stButton>button:hover {
-        transform: scale(1.05);
         box-shadow: 0 4px 12px rgba(76,175,80,0.3);
     }
     .stDownloadButton>button {
@@ -38,26 +35,41 @@ st.markdown("""
         border-radius: 10px;
         box-shadow: 0 2px 8px rgba(0,0,0,0.1);
     }
+    .node rect {
+        filter: drop-shadow(2px 2px 2px rgba(0,0,0,0.2));
+    }
 </style>
 """, unsafe_allow_html=True)
 
 def create_org_chart(df, title):
-    """Create professional org chart with straight lines"""
+    """Create professional org chart with 3D effects"""
     dot = Digraph(comment=title)
     dot.attr(rankdir='TB', labelloc='t', label=title, 
             fontsize='24', fontname='Arial', margin='0.5',
-            splines='ortho')  # Force straight lines
+            splines='ortho', bgcolor='transparent')
     
-    # Node styling
-    dot.attr('node', shape='box', style='filled',
-            fillcolor='linear-gradient(#4CAF50, #45a049)', 
-            fontname='Arial', fontcolor='white',
-            margin='0.4', width='2', height='0.9',
-            fixedsize='false', fontsize='14')
+    # 3D Node styling with gradient and shadow
+    dot.attr('node', 
+            shape='box',
+            style='filled,rounded',
+            fillcolor='linear-gradient(45deg, #45a049 0%, #4CAF50 100%)',
+            gradientangle='270',
+            fontname='Arial', 
+            fontcolor='white',
+            margin='0.4', 
+            width='2', 
+            height='0.9',
+            fixedsize='false', 
+            fontsize='14',
+            penwidth='0',
+            color='#2c3e50')
     
-    # Edge styling for straight lines
-    dot.attr('edge', color='#666666', arrowsize='0.8', 
-            penwidth='1.2', dir='forward')
+    # Edge styling for 3D effect
+    dot.attr('edge', 
+            color='#666666', 
+            arrowsize='0.8', 
+            penwidth='1.5', 
+            dir='forward')
 
     # Process relationships
     added_nodes = set()
@@ -66,65 +78,77 @@ def create_org_chart(df, title):
         child = row['Child'].strip()
         if parent and child:
             if parent not in added_nodes:
-                dot.node(parent)
+                dot.node(parent, _attributes={'label': f'<<B>{parent}</B>>'})
                 added_nodes.add(parent)
             if child not in added_nodes:
-                dot.node(child)
+                dot.node(child, _attributes={'label': f'<<B>{child}</B>>'})
                 added_nodes.add(child)
             dot.edge(parent, child)
     
     return dot
 
 def main():
-    st.title("🏢 Professional Organization Chart Generator")
+    st.title("🏢 3D Organization Chart Generator")
     
     with st.sidebar:
         st.header("⚙️ Configuration")
         chart_title = st.text_input("Chart Title", "Company Structure")
         st.markdown("---")
-        st.markdown("### 📋 CSV Instructions")
-        st.write("1. Download template\n2. Edit in Excel/Sheets\n3. Upload your file")
+        st.markdown("### 📋 CSV Template")
         
-        # CSV template download
+        # CSV template download with 3D styling
         template = "Parent,Child\nCEO,CTO\nCEO,CFO\nCTO,Engineering Manager"
         b64 = base64.b64encode(template.encode()).decode()
-        href = f'<a href="data:file/csv;base64,{b64}" download="template.csv" style="text-decoration: none; color: white; background: #4CAF50; padding: 10px 20px; border-radius: 8px; display: inline-block; margin-top: 10px;">📥 Download Template</a>'
+        href = f'''
+        <a href="data:file/csv;base64,{b64}" download="template.csv" 
+           style="display: inline-block;
+                  padding: 12px 24px;
+                  border-radius: 8px;
+                  background: linear-gradient(135deg, #4CAF50, #45a049);
+                  color: white;
+                  text-decoration: none;
+                  font-weight: bold;
+                  box-shadow: 0 4px 12px rgba(76,175,80,0.3);
+                  transition: transform 0.3s;">
+           📥 Download Template
+        </a>
+        '''
         st.markdown(href, unsafe_allow_html=True)
 
-    uploaded_file = st.file_uploader("📤 Upload CSV File", type=["csv"], 
-                                   help="Upload your organizational hierarchy CSV file")
+    uploaded_file = st.file_uploader("📤 Upload CSV File", type=["csv"])
     
     if uploaded_file:
         try:
             df = pd.read_csv(uploaded_file)
             if {'Parent', 'Child'}.issubset(df.columns):
-                with st.spinner("🔍 Analyzing structure..."):
+                with st.spinner("🔍 Generating 3D visualization..."):
                     chart = create_org_chart(df, chart_title)
                     
-                    # Display chart
+                    # Two-column layout
                     col1, col2 = st.columns([3, 1])
+                    
                     with col1:
                         st.graphviz_chart(chart, use_container_width=True)
                     
-                    # PDF Generation
                     with col2:
                         st.markdown("### 📤 Export Options")
+                        
+                        # PDF Export
                         pdf_bytes = chart.pipe(format='pdf')
                         st.download_button(
                             label="📄 Download PDF",
                             data=pdf_bytes,
                             file_name=f"{chart_title.replace(' ', '_')}.pdf",
                             mime="application/pdf",
-                            help="Download high-quality PDF version"
                         )
                         
+                        # PNG Export
                         png_bytes = chart.pipe(format='png')
                         st.download_button(
                             label="🖼️ Download PNG",
                             data=png_bytes,
                             file_name=f"{chart_title.replace(' ', '_')}.png",
                             mime="image/png",
-                            help="Download image version"
                         )
             else:
                 st.error("❌ CSV must contain 'Parent' and 'Child' columns")