Update app.py

app.py

@@ -1,10 +1,9 @@
-# app.py
 import gradio as gr
 import json
 from graphviz import Digraph
 import os
 from tempfile import NamedTemporaryFile
-from sample_data import COMPLEX_SAMPLE_JSON 
+from sample_data import COMPLEX_SAMPLE_JSON # El JSON de ejemplo se mantiene sin cambios
 
 def generate_concept_map(json_input: str) -> str:
     """
@@ -51,100 +50,99 @@ def generate_concept_map(json_input: str) -> str:
         if 'central_node' not in data or 'nodes' not in data:
             raise ValueError("Missing required fields: central_node or nodes")
 
-        # Create graph
         dot = Digraph(
             name='ConceptMap',
             format='png',
             graph_attr={
-                'rankdir': 'TB',
-                'splines': 'ortho',
-                'bgcolor': 'transparent'
+                'rankdir': 'TB', # Top-to-Bottom
+                'splines': 'ortho', # Straight lines
+                'bgcolor': 'white' # Fondo blanco
             }
         )
         
-        # Central node (ellipse)
+        # Base color for the central node
+        base_color = '#19191a' # Casi negro
+
+        # Central node (now a rounded box)
         dot.node(
             'central',
             data['central_node'],
-            shape='ellipse',
-            style='filled',
-            fillcolor='#2196F3',
+            shape='box', # Ahora es un rectángulo
+            style='filled,rounded', # Redondeado
+            fillcolor=base_color, # Color base
             fontcolor='white',
-            fontsize='14'
+            fontsize='16' # Un poco más grande para el título
         )
         
-        # Process nodes (rectangles)
-        for node in data['nodes']:
-            node_id = node.get('id')
-            label = node.get('label')
-            relationship = node.get('relationship')
+        # 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
+            # We'll blend towards white based on depth
+            # Max depth in your example is 5 (central + 4 levels of nodes)
+            # We want colors to get lighter as depth increases
             
-            # Validate node
-            if not all([node_id, label, relationship]):
-                raise ValueError(f"Invalid node: {node}")
-                
-            # Create main node (rectangle)
-            dot.node(
-                node_id,
-                label,
-                shape='box',
-                style='filled',
-                fillcolor='#4CAF50',
-                fontcolor='white',
-                fontsize='12'
-            )
+            # Simple linear interpolation for color lightening
+            # You can adjust the lightening factor (e.g., 0.15)
+            lightening_factor = 0.12 # How much lighter each level gets
             
-            # Connect to central node
-            dot.edge(
-                'central',
-                node_id,
-                label=relationship,
-                color='#9C27B0',
-                fontsize='10'
-            )
+            # Convert base_color hex to RGB
+            base_r = int(base_color[1:3], 16)
+            base_g = int(base_color[3:5], 16)
+            base_b = int(base_color[5:7], 16)
+
+            # Calculate current node color
+            # Target is white (255, 255, 255)
+            current_r = base_r + int((255 - base_r) * current_depth * lightening_factor)
+            current_g = base_g + int((255 - base_g) * current_depth * lightening_factor)
+            current_b = base_b + int((255 - base_b) * current_depth * lightening_factor)
+
+            # Clamp values to 255
+            current_r = min(255, current_r)
+            current_g = min(255, current_g)
+            current_b = min(255, current_b)
             
-            # Helper function to recursively add subnodes and edges
-            def add_subnodes(parent_id, subnodes_list, fill_color, font_size, edge_color, edge_font_size):
-                for subnode in subnodes_list:
-                    sub_id = subnode.get('id')
-                    sub_label = subnode.get('label')
-                    sub_rel = subnode.get('relationship')
-                    
-                    if not all([sub_id, sub_label, sub_rel]):
-                        raise ValueError(f"Invalid subnode: {subnode}")
-                        
-                    dot.node(
-                        sub_id,
-                        sub_label,
-                        shape='box',
-                        style='filled',
-                        fillcolor=fill_color,
-                        fontcolor='white',
-                        fontsize=str(font_size)
-                    )
-                    
-                    dot.edge(
-                        parent_id,
-                        sub_id,
-                        label=sub_rel,
-                        color=edge_color,
-                        fontsize=str(edge_font_size)
-                    )
-                    
-                    # Recursively call for deeper levels
-                    if 'subnodes' in subnode:
-                        # Slightly adjust colors/sizes for deeper levels if desired
-                        # For fixed 2 children per parent, you might keep colors consistent per level or vary them.
-                        # Here, I'll slightly adjust font size for consistency with depth.
-                        add_subnodes(sub_id, subnode['subnodes'], 
-                                     '#FFA726' if font_size > 8 else '#FFCC80', # Lighter orange/yellow for deeper levels
-                                     font_size - 1 if font_size > 7 else font_size, 
-                                     '#E91E63' if edge_font_size > 7 else '#FF5252', # Reddish for deeper edges
-                                     edge_font_size - 1 if edge_font_size > 7 else edge_font_size)
+            node_fill_color = f'#{current_r:02x}{current_g:02x}{current_b:02x}'
+
+            # Font color: white for dark nodes, black for very light nodes
+            font_color = 'white' if current_depth * lightening_factor < 0.6 else 'black'
             
-            # Start processing subnodes from the first level
-            add_subnodes(node_id, node.get('subnodes', []), '#FFA726', 10, '#E91E63', 8)
+            # 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_font_size = max(7, 10 - (current_depth * 1))
+
+            for node in nodes_list:
+                node_id = node.get('id')
+                label = node.get('label')
+                relationship = node.get('relationship')
+                
+                if not all([node_id, label, relationship]):
+                    raise ValueError(f"Invalid node: {node}")
+                    
+                dot.node(
+                    node_id,
+                    label,
+                    shape='box', # Rectángulo
+                    style='filled,rounded', # Redondeado
+                    fillcolor=node_fill_color, 
+                    fontcolor=font_color,
+                    fontsize=str(font_size) 
+                )
+                
+                dot.edge(
+                    parent_id,
+                    node_id,
+                    label=relationship,
+                    color=edge_color,
+                    fontcolor=edge_color, # Color de la fuente de la arista también gris
+                    fontsize=str(edge_font_size) 
+                )
+                
+                if 'subnodes' in node:
+                    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
 
         # Save to temporary file
         with NamedTemporaryFile(delete=False, suffix='.png') as tmp:
@@ -160,7 +158,7 @@ if __name__ == "__main__":
     demo = gr.Interface(
         fn=generate_concept_map,
         inputs=gr.Textbox(
-            value=COMPLEX_SAMPLE_JSON, # ¡Ahora usa el JSON AI simétrico y complejo!
+            value=COMPLEX_SAMPLE_JSON, 
             placeholder="Paste JSON following the documented format",
             label="Structured JSON Input",
             lines=25
@@ -170,8 +168,8 @@ if __name__ == "__main__":
             type="filepath",
             show_download_button=True
         ),
-        title="Advanced Concept Map Generator (Symmetric AI)",
-        description="Create symmetric, multi-level concept maps for AI from properly formatted JSON."
+        title="AI Concept Map (Custom Style)",
+        description="Generates an AI concept map with custom rounded boxes, color gradient, and white background."
     )
     
     demo.launch(