Update app.py

app.py

@@ -54,13 +54,12 @@ def generate_concept_map(json_input: str) -> str:
             name='ConceptMap',
             format='png',
             graph_attr={
-                'rankdir': 'TB',        # Top-to-Bottom
-                'splines': 'ortho',     # Straight lines
-                'bgcolor': 'white',     # Fondo blanco
-                'pad': '0.5',           # Margen alrededor del gráfico
-                'size': '8,12!',        # ¡Nuevo! Tamaño deseado (ancho, alto en pulgadas). El '!' es importante.
-                'ranksep': '1.0'        # ¡Nuevo! Aumenta la separación vertical entre niveles
-                # 'ratio': 'fill'       # Podría usarse con 'size' para forzar a rellenar el espacio
+                'rankdir': 'TB', # Top-to-Bottom (layout de arriba a abajo)
+                'splines': 'ortho', # Líneas rectas
+                'bgcolor': 'white', # Fondo blanco
+                'pad': '0.5', # Margen interno (padding)
+                'ranksep': '1.8', # ¡Aumenta la separación vertical entre niveles! (más alto)
+                'ratio': '1.2' # ¡Relación de aspecto (altura/anchura)! >1 para más alto que ancho
             }
         )
         
@@ -81,7 +80,7 @@ def generate_concept_map(json_input: str) -> str:
         # Helper function to recursively add nodes and edges
         def add_nodes_and_edges(parent_id, nodes_list, current_depth=0):
             # Calculate color for current depth, making it lighter
-            lightening_factor = 0.12 # How much lighter each level gets
+            lightening_factor = 0.12 
             
             # Convert base_color hex to RGB
             base_r = int(base_color[1:3], 16)
@@ -103,9 +102,8 @@ def generate_concept_map(json_input: str) -> str:
             # Font color: white for dark nodes, black for very light nodes
             font_color = 'white' if current_depth * lightening_factor < 0.6 else 'black'
             
-            # Edge colors can remain constant or change. Let's make them slightly visible.
-            edge_color = '#4a4a4a' # Un gris oscuro para las líneas
-            font_size = max(9, 14 - (current_depth * 2)) # Adjust font size based on depth
+            edge_color = '#4a4a4a' 
+            font_size = max(9, 14 - (current_depth * 2)) 
             edge_font_size = max(7, 10 - (current_depth * 1))
 
             for node in nodes_list:
@@ -119,8 +117,8 @@ def generate_concept_map(json_input: str) -> str:
                 dot.node(
                     node_id,
                     label,
-                    shape='box', # Rectángulo
-                    style='filled,rounded', # Redondeado
+                    shape='box', 
+                    style='filled,rounded', 
                     fillcolor=node_fill_color, 
                     fontcolor=font_color,
                     fontsize=str(font_size) 
@@ -131,7 +129,7 @@ def generate_concept_map(json_input: str) -> str:
                     node_id,
                     label=relationship,
                     color=edge_color,
-                    fontcolor=edge_color, # Color de la fuente de la arista también gris
+                    fontcolor=edge_color, 
                     fontsize=str(edge_font_size) 
                 )
                 
@@ -139,7 +137,7 @@ def generate_concept_map(json_input: str) -> str:
                     add_nodes_and_edges(node_id, node['subnodes'], current_depth + 1)
 
         # Start processing from the top-level nodes connected to the central node
-        add_nodes_and_edges('central', data.get('nodes', []), current_depth=1) # Initial depth is 1 for nodes under central
+        add_nodes_and_edges('central', data.get('nodes', []), current_depth=1) 
 
         # Save to temporary file
         with NamedTemporaryFile(delete=False, suffix='.png') as tmp:
@@ -165,8 +163,8 @@ if __name__ == "__main__":
             type="filepath",
             show_download_button=True
         ),
-        title="AI Concept Map (Custom Style)",
-        description="Generates an AI concept map with custom rounded boxes, color gradient, and white background."
+        title="AI Concept Map (Optimized Proportions)",
+        description="Generates an AI concept map with custom rounded boxes, color gradient, white background, and improved aspect ratio for vertical display."
     )
     
     demo.launch(