Update app.py

app.py

@@ -1,174 +1,119 @@
 import gradio as gr
-import json
-from graphviz import Digraph
-import os
-from tempfile import NamedTemporaryFile
-from sample_data import COMPLEX_SAMPLE_JSON # El JSON de ejemplo se mantiene sin cambios
 
-def generate_concept_map(json_input: str) -> str:
+# Import generator functions and sample JSONs
+from concept_map_generator import generate_concept_map
+from synoptic_chart_generator import generate_synoptic_chart
+from radial_diagram_generator import generate_radial_diagram
+from sample_data import CONCEPT_MAP_JSON, SYNOPTIC_CHART_JSON, RADIAL_DIAGRAM_JSON
+
+def create_interface(generator_fn, sample_json, title, description):
     """
-    Generate concept map from JSON and return as image file
-    
-    Args:
-        json_input (str): JSON describing the concept map structure.
-            
-            REQUIRED FORMAT EXAMPLE:
-            {
-                "central_node": "AI",
-                "nodes": [
-                    {
-                        "id": "ml",
-                        "label": "Machine Learning",
-                        "relationship": "subcategory",
-                        "subnodes": [
-                            {
-                                "id": "dl",
-                                "label": "Deep Learning",
-                                "relationship": "type",
-                                "subnodes": [
-                                    {
-                                        "id": "cnn",
-                                        "label": "CNN",
-                                        "relationship": "architecture"
-                                    }
-                                ]
-                            }
-                        ]
-                    }
-                ]
-            }
-    
-    Returns:
-        str: Path to generated PNG image file
+    Helper function to create a Gradio Interface for a specific generator.
     """
-    try:
-        if not json_input.strip():
-            return "Error: Empty input"
-            
-        data = json.loads(json_input)
-        
-        if 'central_node' not in data or 'nodes' not in data:
-            raise ValueError("Missing required fields: central_node or nodes")
-
-        dot = Digraph(
-            name='ConceptMap',
-            format='png',
-            graph_attr={
-                'rankdir': 'TB', # Top-to-Bottom
-                'splines': 'ortho', # Straight lines
-                'bgcolor': 'white', # Fondo blanco
-                'pad': '0.5' # ¡Este es el margen! 0.5 pulgadas
-            }
-        )
-        
-        # Base color for the central node
-        base_color = '#19191a' # Casi negro
-
-        # Central node (now a rounded box)
-        dot.node(
-            'central',
-            data['central_node'],
-            shape='box', # Ahora es un rectángulo
-            style='filled,rounded', # Redondeado
-            fillcolor=base_color, # Color base
-            fontcolor='white',
-            fontsize='16' # Un poco más grande para el título
-        )
-        
-        # 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
-            
-            # 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
-            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)
-            
-            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'
-            
-            # 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:
-            dot.render(tmp.name, format='png', cleanup=True)
-            return tmp.name + '.png'
-
-    except json.JSONDecodeError:
-        return "Error: Invalid JSON format"
-    except Exception as e:
-        return f"Error: {str(e)}"
-
-if __name__ == "__main__":
-    demo = gr.Interface(
-        fn=generate_concept_map,
+    return gr.Interface(
+        fn=generator_fn,
         inputs=gr.Textbox(
-            value=COMPLEX_SAMPLE_JSON, 
+            value=sample_json,
             placeholder="Paste JSON following the documented format",
             label="Structured JSON Input",
             lines=25
         ),
         outputs=gr.Image(
-            label="Generated Concept Map",
+            label="Generated Graph",
             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=title,
+        description=description
     )
+
+if __name__ == "__main__":
+    with gr.Blocks(
+        title="Advanced Graph Generator",
+        css="""
+        .gradio-container {
+            font-family: 'Inter', sans-serif !important;
+        }
+        .gr-tab-item {
+            padding: 10px 20px;
+            font-size: 1.1em;
+            font-weight: bold;
+        }
+        .gr-button {
+            border-radius: 8px;
+            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+            background-color: #4CAF50; /* Green color for buttons */
+            color: white;
+            padding: 10px 20px;
+            font-size: 1.1em;
+        }
+        .gr-button:hover {
+            background-color: #45a049;
+        }
+        .gr-textbox {
+            border-radius: 8px;
+            padding: 10px;
+        }
+        .gradio-container.dark { /* Tailwind dark mode for overall container if needed */
+            --tw-bg-opacity: 1;
+            background-color: rgb(24 24 27 / var(--tw-bg-opacity)); /* bg-zinc-900 */
+            color: #d4d4d8; /* text-zinc-300 */
+        }
+        .gradio-container.dark .gr-textbox {
+            background-color: rgb(39 39 42 / var(--tw-bg-opacity)); /* bg-zinc-800 */
+            color: #d4d4d8;
+            border-color: #52525b; /* border-zinc-600 */
+        }
+        .gradio-container.dark .gr-tab-item {
+            color: #d4d4d8;
+        }
+        .gradio-container.dark .gr-tab-item.selected {
+            background-color: rgb(39 39 42 / var(--tw-bg-opacity));
+            color: #fff;
+        }
+        """
+    ) as demo:
+        gr.Markdown(
+            """
+            # Advanced Graph Generation Suite
+            Choose a graph type and provide your JSON data to generate a visual representation.
+            All graphs maintain a consistent, elegant style with rounded boxes,
+            a dark-to-light color gradient, and a clean white background.
+            """
+        )
+
+        with gr.Tabs():
+            with gr.TabItem("Concept Map"):
+                concept_map_interface = create_interface(
+                    generate_concept_map,
+                    CONCEPT_MAP_JSON,
+                    "Concept Map Generator (Vertical Hierarchy)",
+                    "Creates a hierarchical concept map, ideal for breaking down complex topics."
+                )
+                concept_map_interface.render() # Render the interface within the tab
+
+            with gr.TabItem("Synoptic Chart"):
+                synoptic_chart_interface = create_interface(
+                    generate_synoptic_chart,
+                    SYNOPTIC_CHART_JSON,
+                    "Synoptic Chart Generator (Horizontal Hierarchy)",
+                    "Generates a horizontal synoptic chart, perfect for outlining processes or structures."
+                )
+                synoptic_chart_interface.render() # Render the interface within the tab
+
+            with gr.TabItem("Radial Diagram"):
+                radial_diagram_interface = create_interface(
+                    generate_radial_diagram,
+                    RADIAL_DIAGRAM_JSON,
+                    "Radial Diagram Generator (Central Expansion)",
+                    "Creates a diagram expanding from a central idea, visualizing interconnected concepts."
+                )
+                radial_diagram_interface.render() # Render the interface within the tab
     
     demo.launch(
         mcp_server=True,
         share=False,
         server_port=7860,
         server_name="0.0.0.0"
-    )
+    )
+