File size: 3,602 Bytes
4bc593c | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 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 |