Update app.py

app.py

@@ -271,6 +271,109 @@ class S2GeometryCalculator:
 # Initialize calculator
 calc = S2GeometryCalculator()
 
+# Multi-cell visualization function
+def visualize_multiple_cells(batch_text, input_type):
+    lines = [line.strip() for line in batch_text.split('\n') if line.strip()]
+    
+    # Start with default center
+    m = Map(location=[12.935656, 77.543204], zoom_start=12)
+    
+    colors = ['red', 'blue', 'green', 'purple', 'orange', 'darkred', 'lightred', 
+              'beige', 'darkblue', 'darkgreen', 'cadetblue', 'darkpurple', 'white', 
+              'pink', 'lightblue', 'lightgreen', 'gray', 'black', 'lightgray']
+    
+    valid_cells = 0
+    total_lat, total_lng = 0, 0
+    
+    for i, line in enumerate(lines):
+        try:
+            if input_type == "token":
+                cell_id = CellId.from_token(line)
+            else:  # cell_id
+                if isinstance(line, str) and line.startswith('0x'):
+                    cell_id_int = int(line, 16)
+                else:
+                    cell_id_int = int(line)
+                cell_id = CellId(cell_id_int)
+            
+            # Get cell center
+            center = cell_id.to_lat_lng()
+            center_lat = center.lat().degrees
+            center_lng = center.lng().degrees
+            
+            total_lat += center_lat
+            total_lng += center_lng
+            valid_cells += 1
+            
+            # Get cell vertices
+            cell = Cell(cell_id)
+            vertices = []
+            for j in range(4):
+                vertex = cell.get_vertex(j)
+                lat_lng = LatLng.from_point(vertex)
+                vertices.append([lat_lng.lat().degrees, lat_lng.lng().degrees])
+            
+            # Close the polygon
+            vertices.append(vertices[0])
+            
+            # Use different colors for different cells
+            color = colors[i % len(colors)]
+            
+            # Add cell as polygon
+            folium.Polygon(
+                locations=vertices,
+                color=color,
+                weight=2,
+                fillColor=color,
+                fillOpacity=0.3,
+                popup=f"Cell {i+1}: {cell_id.to_token()}<br>Level: {cell_id.level()}"
+            ).add_to(m)
+            
+            # Add center marker
+            folium.Marker(
+                [center_lat, center_lng],
+                popup=f"Cell {i+1}: {cell_id.to_token()}",
+                icon=folium.Icon(color=color, icon='info-sign')
+            ).add_to(m)
+            
+        except Exception as e:
+            print(f"Error processing cell {i+1} ({line}): {str(e)}")
+    
+    # Center map on average of all valid cells
+    if valid_cells > 0:
+        avg_lat = total_lat / valid_cells
+        avg_lng = total_lng / valid_cells
+        m.location = [avg_lat, avg_lng]
+    
+    return m
+
+# Batch operations helper functions
+def process_batch_info(batch_text, input_type):
+    lines = [line.strip() for line in batch_text.split('\n') if line.strip()]
+    results = []
+    for i, line in enumerate(lines, 1):
+        try:
+            info = calc.get_cell_info(line, input_type)
+            results.append(f"=== Cell {i}: {line} ===")
+            results.append(info)
+            results.append("")
+        except Exception as e:
+            results.append(f"=== Cell {i}: {line} ===")
+            results.append(f"Error: {str(e)}")
+            results.append("")
+    return "\n".join(results)
+
+def process_batch_coords(batch_text, input_type):
+    lines = [line.strip() for line in batch_text.split('\n') if line.strip()]
+    results = []
+    for i, line in enumerate(lines, 1):
+        try:
+            coords = calc.cell_to_latlng(line, input_type)
+            results.append(f"Cell {i} ({line}): {coords}")
+        except Exception as e:
+            results.append(f"Cell {i} ({line}): Error - {str(e)}")
+    return "\n".join(results)
+
 # Create Gradio interface
 with gr.Blocks(title="S2 Geometry Calculator", theme=gr.themes.Soft()) as app:
     gr.Markdown("""
@@ -278,6 +381,8 @@ with gr.Blocks(title="S2 Geometry Calculator", theme=gr.themes.Soft()) as app:
     
     A comprehensive tool for working with Google's S2 spherical geometry library.
     S2 cells are hierarchical decompositions of the sphere useful for geographic indexing.
+    
+    **✨ Reactive Interface - All updates happen automatically as you type!**
     """)
     
     with gr.Tabs():
@@ -472,170 +577,144 @@ with gr.Blocks(title="S2 Geometry Calculator", theme=gr.themes.Soft()) as app:
                 interactive=False
             )
     
-    # Event handlers
-    id_to_token_btn.click(
+    # Event handlers - All reactive (no buttons needed)
+    
+    # Basic conversions - auto update on input change
+    cell_id_input.change(
         calc.cell_id_to_token,
         inputs=[cell_id_input],
         outputs=[id_to_token_output]
     )
     
-    token_to_id_btn.click(
+    token_input.change(
         calc.token_to_cell_id,
         inputs=[token_input],
         outputs=[token_to_id_output]
     )
     
-    change_level_btn.click(
-        calc.change_cell_level,
-        inputs=[level_input, target_level, level_input_type],
-        outputs=[level_output]
-    )
+    # Level operations - auto update on any input change
+    def update_level_change(cell_input, target_level, input_type):
+        return calc.change_cell_level(cell_input, target_level, input_type)
+    
+    for component in [level_input, target_level, level_input_type]:
+        component.change(
+            update_level_change,
+            inputs=[level_input, target_level, level_input_type],
+            outputs=[level_output]
+        )
+    
+    # Coordinate conversions - auto update
+    def update_cell_to_coord(cell_input, input_type):
+        return calc.cell_to_latlng(cell_input, input_type)
     
-    cell_to_coord_btn.click(
-        calc.cell_to_latlng,
+    coord_cell_input.change(
+        update_cell_to_coord,
         inputs=[coord_cell_input, coord_input_type],
         outputs=[coord_output]
     )
     
-    coord_to_cell_btn.click(
-        calc.latlng_to_cell,
-        inputs=[lat_input, lng_input, coord_level],
-        outputs=[cell_from_coord_output]
+    coord_input_type.change(
+        update_cell_to_coord,
+        inputs=[coord_cell_input, coord_input_type],
+        outputs=[coord_output]
     )
     
-    get_info_btn.click(
-        calc.get_cell_info,
+    def update_coord_to_cell(lat, lng, level):
+        return calc.latlng_to_cell(lat, lng, level)
+    
+    for component in [lat_input, lng_input, coord_level]:
+        component.change(
+            update_coord_to_cell,
+            inputs=[lat_input, lng_input, coord_level],
+            outputs=[cell_from_coord_output]
+        )
+    
+    # Cell information - auto update
+    def update_cell_info(cell_input, input_type):
+        info = calc.get_cell_info(cell_input, input_type)
+        neighbors = calc.get_cell_neighbors(cell_input, input_type)
+        return info, neighbors
+    
+    info_cell_input.change(
+        update_cell_info,
         inputs=[info_cell_input, info_input_type],
-        outputs=[cell_info_output]
+        outputs=[cell_info_output, neighbors_output]
     )
     
-    get_neighbors_btn.click(
-        calc.get_cell_neighbors,
+    info_input_type.change(
+        update_cell_info,
         inputs=[info_cell_input, info_input_type],
-        outputs=[neighbors_output]
+        outputs=[cell_info_output, neighbors_output]
     )
     
-    visualize_btn.click(
-        calc.visualize_cell_on_map,
+    # Single cell visualization - auto update
+    def update_visualization(cell_input, input_type):
+        return calc.visualize_cell_on_map(cell_input, input_type)
+    
+    viz_cell_input.change(
+        update_visualization,
         inputs=[viz_cell_input, viz_input_type],
         outputs=[map_output]
     )
     
-    # Multi-cell visualization function
-    def visualize_multiple_cells(batch_text, input_type):
-        lines = [line.strip() for line in batch_text.split('\n') if line.strip()]
-        
-        # Start with default center
-        m = Map(location=[12.935656, 77.543204], zoom_start=12)
-        
-        colors = ['red', 'blue', 'green', 'purple', 'orange', 'darkred', 'lightred', 
-                  'beige', 'darkblue', 'darkgreen', 'cadetblue', 'darkpurple', 'white', 
-                  'pink', 'lightblue', 'lightgreen', 'gray', 'black', 'lightgray']
-        
-        valid_cells = 0
-        total_lat, total_lng = 0, 0
-        
-        for i, line in enumerate(lines):
-            try:
-                if input_type == "token":
-                    cell_id = CellId.from_token(line)
-                else:  # cell_id
-                    if isinstance(line, str) and line.startswith('0x'):
-                        cell_id_int = int(line, 16)
-                    else:
-                        cell_id_int = int(line)
-                    cell_id = CellId(cell_id_int)
-                
-                # Get cell center
-                center = cell_id.to_lat_lng()
-                center_lat = center.lat().degrees
-                center_lng = center.lng().degrees
-                
-                total_lat += center_lat
-                total_lng += center_lng
-                valid_cells += 1
-                
-                # Get cell vertices
-                cell = Cell(cell_id)
-                vertices = []
-                for j in range(4):
-                    vertex = cell.get_vertex(j)
-                    lat_lng = LatLng.from_point(vertex)
-                    vertices.append([lat_lng.lat().degrees, lat_lng.lng().degrees])
-                
-                # Close the polygon
-                vertices.append(vertices[0])
-                
-                # Use different colors for different cells
-                color = colors[i % len(colors)]
-                
-                # Add cell as polygon
-                folium.Polygon(
-                    locations=vertices,
-                    color=color,
-                    weight=2,
-                    fillColor=color,
-                    fillOpacity=0.3,
-                    popup=f"Cell {i+1}: {cell_id.to_token()}<br>Level: {cell_id.level()}"
-                ).add_to(m)
-                
-                # Add center marker
-                folium.Marker(
-                    [center_lat, center_lng],
-                    popup=f"Cell {i+1}: {cell_id.to_token()}",
-                    icon=folium.Icon(color=color, icon='info-sign')
-                ).add_to(m)
-                
-            except Exception as e:
-                print(f"Error processing cell {i+1} ({line}): {str(e)}")
-        
-        # Center map on average of all valid cells
-        if valid_cells > 0:
-            avg_lat = total_lat / valid_cells
-            avg_lng = total_lng / valid_cells
-            m.location = [avg_lat, avg_lng]
-        
-        return m
-    def process_batch_info(batch_text, input_type):
-        lines = [line.strip() for line in batch_text.split('\n') if line.strip()]
-        results = []
-        for i, line in enumerate(lines, 1):
-            try:
-                info = calc.get_cell_info(line, input_type)
-                results.append(f"=== Cell {i}: {line} ===")
-                results.append(info)
-                results.append("")
-            except Exception as e:
-                results.append(f"=== Cell {i}: {line} ===")
-                results.append(f"Error: {str(e)}")
-                results.append("")
-        return "\n".join(results)
-    
-    def process_batch_coords(batch_text, input_type):
-        lines = [line.strip() for line in batch_text.split('\n') if line.strip()]
-        results = []
-        for i, line in enumerate(lines, 1):
-            try:
-                coords = calc.cell_to_latlng(line, input_type)
-                results.append(f"Cell {i} ({line}): {coords}")
-            except Exception as e:
-                results.append(f"Cell {i} ({line}): Error - {str(e)}")
-        return "\n".join(results)
-    
-    batch_info_btn.click(
-        process_batch_info,
-        inputs=[batch_input, batch_input_type],
-        outputs=[batch_output]
+    viz_input_type.change(
+        update_visualization,
+        inputs=[viz_cell_input, viz_input_type],
+        outputs=[map_output]
     )
     
-    batch_coords_btn.click(
-        process_batch_coords,
-        inputs=[batch_input, batch_input_type],
-        outputs=[batch_output]
+    # Multi-cell visualization - auto update
+    multi_viz_input.change(
+        visualize_multiple_cells,
+        inputs=[multi_viz_input, multi_viz_input_type],
+        outputs=[multi_map_output]
     )
+    
+    multi_viz_input_type.change(
+        visualize_multiple_cells,
+        inputs=[multi_viz_input, multi_viz_input_type],
+        outputs=[multi_map_output]
+    )
+    
+    # Batch operations - auto update
+    def update_batch_operations(batch_text, input_type, operation):
+        if operation == "Get Info":
+            return process_batch_info(batch_text, input_type)
+        else:  # Get Coordinates
+            return process_batch_coords(batch_text, input_type)
+    
+    for component in [batch_input, batch_input_type, batch_operation]:
+        component.change(
+            update_batch_operations,
+            inputs=[batch_input, batch_input_type, batch_operation],
+            outputs=[batch_output]
+        )
+    
+    gr.Markdown("""
+    ## About this app
+    
+    This app provides comprehensive S2 geometry calculations with real-time, reactive updates. 
+    Simply change any input and watch the results update automatically!
+    
+    ### Features:
+    - **Basic Conversions**: Cell ID ↔ Token conversion
+    - **Level Operations**: Navigate S2 hierarchy 
+    - **Coordinate Conversion**: Cell ↔ Lat/Lng conversion
+    - **Cell Information**: Detailed cell properties and neighbors
+    - **Visualization**: Interactive maps with cell boundaries
+    - **Multi-Cell Display**: Visualize multiple cells simultaneously
+    - **Batch Processing**: Handle multiple cells efficiently
+    
+    ### S2 Levels:
+    - Level 0: ~85,000 km cell edge
+    - Level 10: ~78 km cell edge  
+    - Level 16: ~1.2 km cell edge (commonly used)
+    - Level 20: ~76 m cell edge
+    - Level 30: ~7.5 cm cell edge (maximum)
+    """)
 
 if __name__ == "__main__":
-    
+    # Launch the app
     app.launch(
         show_error=True
     )