Create modern_integration.py

ui/modern_integration.py

@@ -0,0 +1,80 @@
+"""
+ui/modern_integration.py
+Modern UI integration for Gradio app
+"""
+
+import gradio as gr
+from ui.modern_components import (
+    initialize_modern_ui,
+    Card, Button, Badge, Grid, Stack,
+    ObservationGate, SequencingFlow, ProcessDisplay, Chart,
+    ResponsiveUtils, Accessibility, DarkMode
+)
+
+class ModernUIIntegration:
+    """Integrate modern UI components with Gradio"""
+    
+    @staticmethod
+    def inject_css_and_js() -> str:
+        """Inject modern UI CSS and JavaScript"""
+        return initialize_modern_ui()
+    
+    @staticmethod
+    def create_modern_layout() -> dict:
+        """Create modern layout structure for tabs"""
+        return {
+            "css": ModernUIIntegration.inject_css_and_js(),
+            "container_class": "container container-lg",
+            "header": """
+                <div class="app-header">
+                    <h1 class="text-3xl font-bold text-primary mb-2">
+                        🚀 Agentic Reliability Framework v3.3.9
+                    </h1>
+                    <p class="text-muted mb-6">
+                        OSS advises → Enterprise executes | Modern UI Enabled
+                    </p>
+                </div>
+            """,
+            "tab_classes": {
+                "live_demo": "p-4 bg-gradient-to-br from-green-50 to-white dark:from-green-900/20 dark:to-gray-900",
+                "roi": "p-4 bg-gradient-to-br from-blue-50 to-white dark:from-blue-900/20 dark:to-gray-900",
+                "enterprise": "p-4 bg-gradient-to-br from-purple-50 to-white dark:from-purple-900/20 dark:to-gray-900",
+                "audit": "p-4 bg-gradient-to-br from-orange-50 to-white dark:from-orange-900/20 dark:to-gray-900",
+                "learning": "p-4 bg-gradient-to-br from-indigo-50 to-white dark:from-indigo-900/20 dark:to-gray-900"
+            }
+        }
+    
+    @staticmethod
+    def wrap_component(component, card_config=None):
+        """Wrap Gradio component with modern styling"""
+        if card_config:
+            # Create a card wrapper
+            title = card_config.get("title", "")
+            variant = card_config.get("variant", "default")
+            border_color = card_config.get("border_color", "")
+            
+            with gr.Group(elem_classes=f"card card-{variant}"):
+                if title:
+                    gr.Markdown(f"### {title}", elem_classes="card-title")
+                return component
+        return component
+    
+    @staticmethod
+    def create_boundary_display(oss_content, enterprise_content):
+        """Create OSS vs Enterprise boundary display"""
+        with gr.Row(elem_classes="boundary-row"):
+            with gr.Column(scale=1, elem_classes="oss-column"):
+                with gr.Group(elem_classes="card card-outlined border-l-4 border-l-green-500"):
+                    gr.Markdown("### 🟢 OSS Advisory Layer", 
+                              elem_classes="text-lg font-semibold mb-2")
+                    gr.Markdown("*Analysis & Recommendations*", 
+                              elem_classes="text-sm text-muted mb-4")
+                    yield oss_content
+            
+            with gr.Column(scale=1, elem_classes="enterprise-column"):
+                with gr.Group(elem_classes="card card-elevated border-l-4 border-l-purple-500"):
+                    gr.Markdown("### 🟣 Enterprise Execution Layer", 
+                              elem_classes="text-lg font-semibold mb-2")
+                    gr.Markdown("*Autonomous Action & Execution*", 
+                              elem_classes="text-sm text-muted mb-4")
+                    yield enterprise_content