Hugging Face's logo

Spaces:
A-R-F
/
Agentic-Reliability-Framework-API
Running

App Files Community
2
petter2025 commited on
Commit
bbe2211
Β·
verified Β·
1 Parent(s): 9c06673

Update ui/components.py

Browse files
Files changed (1) hide show
  1. ui/components.py +194 -0
ui/components.py CHANGED
@@ -0,0 +1,194 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ """
2
+ Reusable UI components
3
+ """
4
+
5
+ import gradio as gr
6
+ from typing import Dict, List, Optional, Callable
7
+
8
+ def create_metric_card(title: str, value: str, is_critical: bool = False) -> gr.HTML:
9
+ """Create a styled metric card"""
10
+ color = "#FF6B6B" if is_critical else "#4ECDC4"
11
+ bg_color = "rgba(255,107,107,0.1)" if is_critical else "rgba(78,205,196,0.1)"
12
+
13
+ html = f"""
14
+ <div style='
15
+ padding: 15px;
16
+ background: {bg_color};
17
+ border-radius: 8px;
18
+ border-left: 4px solid {color};
19
+ margin: 10px 0;
20
+ '>
21
+ <div style='font-size: 12px; color: #666; margin-bottom: 5px;'>{title}</div>
22
+ <div style='font-size: 18px; font-weight: bold; color: {color};'>{value}</div>
23
+ </div>
24
+ """
25
+ return gr.HTML(value=html)
26
+
27
+ def create_business_impact_section(impact_data: Dict[str, str]) -> gr.HTML:
28
+ """Create business impact section"""
29
+ html = "<div style='margin: 20px 0;'>"
30
+ html += "<h4 style='margin: 0 0 15px 0; color: #2c3e50;'>πŸ’° Business Impact</h4>"
31
+
32
+ for key, value in impact_data.items():
33
+ is_loss = any(word in key.lower() for word in ['loss', 'impact', 'violation'])
34
+ icon = "πŸ“‰" if is_loss else "πŸ“Š"
35
+
36
+ html += f"""
37
+ <div style='
38
+ display: flex;
39
+ justify-content: space-between;
40
+ padding: 10px 15px;
41
+ background: {'rgba(255,107,107,0.05)' if is_loss else 'rgba(78,205,196,0.05)'};
42
+ border-radius: 6px;
43
+ margin: 8px 0;
44
+ border-left: 3px solid {'#FF6B6B' if is_loss else '#4ECDC4'};
45
+ '>
46
+ <span>{icon} {key}</span>
47
+ <span style='font-weight: bold; color: {'#FF6B6B' if is_loss else '#4ECDC4'};'>{value}</span>
48
+ </div>
49
+ """
50
+
51
+ html += "</div>"
52
+ return gr.HTML(value=html)
53
+
54
+ def create_approval_workflow(requires_approval: bool = True) -> gr.HTML:
55
+ """Create approval workflow visualization"""
56
+ if requires_approval:
57
+ html = """
58
+ <div style='
59
+ padding: 20px;
60
+ background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
61
+ border-radius: 10px;
62
+ border: 2px dashed #6c757d;
63
+ margin: 15px 0;
64
+ '>
65
+ <div style='display: flex; align-items: center; margin-bottom: 15px;'>
66
+ <div style='
67
+ background: #007bff;
68
+ color: white;
69
+ width: 30px;
70
+ height: 30px;
71
+ border-radius: 50%;
72
+ display: flex;
73
+ align-items: center;
74
+ justify-content: center;
75
+ margin-right: 10px;
76
+ '>1</div>
77
+ <h4 style='margin: 0;'>πŸ›‘οΈ Approval Required</h4>
78
+ </div>
79
+
80
+ <div style='display: flex; justify-content: space-between; margin-bottom: 15px;'>
81
+ <div style='text-align: center;'>
82
+ <div style='font-size: 24px;'>πŸ€–</div>
83
+ <div style='font-size: 12px;'>ARF Analysis</div>
84
+ </div>
85
+ <div style='align-self: center;'>β†’</div>
86
+ <div style='text-align: center;'>
87
+ <div style='font-size: 24px;'>πŸ‘¨β€πŸ’Ό</div>
88
+ <div style='font-size: 12px;'>Human Review</div>
89
+ </div>
90
+ <div style='align-self: center;'>β†’</div>
91
+ <div style='text-align: center;'>
92
+ <div style='font-size: 24px;'>⚑</div>
93
+ <div style='font-size: 12px;'>Execution</div>
94
+ </div>
95
+ </div>
96
+
97
+ <div style='
98
+ background: rgba(0,123,255,0.1);
99
+ padding: 10px;
100
+ border-radius: 5px;
101
+ font-size: 14px;
102
+ '>
103
+ <b>Status:</b> βœ… <span style='color: #28a745;'>Approved & Executed</span>
104
+ </div>
105
+ </div>
106
+ """
107
+ else:
108
+ html = """
109
+ <div style='
110
+ padding: 20px;
111
+ background: linear-gradient(135deg, #e8f5e8 0%, #d4edda 100%);
112
+ border-radius: 10px;
113
+ border: 2px solid #28a745;
114
+ margin: 15px 0;
115
+ '>
116
+ <div style='display: flex; align-items: center; margin-bottom: 15px;'>
117
+ <div style='
118
+ background: #28a745;
119
+ color: white;
120
+ width: 30px;
121
+ height: 30px;
122
+ border-radius: 50%;
123
+ display: flex;
124
+ align-items: center;
125
+ justify-content: center;
126
+ margin-right: 10px;
127
+ '>⚑</div>
128
+ <h4 style='margin: 0;'>Autonomous Execution</h4>
129
+ </div>
130
+
131
+ <div style='text-align: center; margin: 20px 0;'>
132
+ <div style='font-size: 48px; margin-bottom: 10px;'>πŸ€– οΏ½οΏ½ ⚑</div>
133
+ <div style='color: #666;'>ARF directly executes with safety guardrails</div>
134
+ </div>
135
+
136
+ <div style='
137
+ background: rgba(40,167,69,0.1);
138
+ padding: 10px;
139
+ border-radius: 5px;
140
+ font-size: 14px;
141
+ '>
142
+ <b>Status:</b> βœ… <span style='color: #28a745;'>Auto-Executed Successfully</span>
143
+ </div>
144
+ </div>
145
+ """
146
+
147
+ return gr.HTML(value=html)
148
+
149
+ def create_roi_comparison_table() -> gr.HTML:
150
+ """Create ROI comparison table"""
151
+ html = """
152
+ <div style='margin: 20px 0;'>
153
+ <h4 style='margin: 0 0 15px 0; color: #2c3e50;'>πŸ“Š Capability Comparison</h4>
154
+
155
+ <table style='
156
+ width: 100%;
157
+ border-collapse: collapse;
158
+ border: 1px solid #dee2e6;
159
+ border-radius: 8px;
160
+ overflow: hidden;
161
+ '>
162
+ <thead>
163
+ <tr style='background: #f8f9fa;'>
164
+ <th style='padding: 12px; text-align: left; border-bottom: 2px solid #dee2e6;'>Feature</th>
165
+ <th style='padding: 12px; text-align: left; border-bottom: 2px solid #dee2e6;'>OSS (Free)</th>
166
+ <th style='padding: 12px; text-align: left; border-bottom: 2px solid #dee2e6;'>Enterprise</th>
167
+ </tr>
168
+ </thead>
169
+ <tbody>
170
+ <tr>
171
+ <td style='padding: 10px; border-bottom: 1px solid #dee2e6;'>Execution</td>
172
+ <td style='padding: 10px; border-bottom: 1px solid #dee2e6; color: #dc3545;'>❌ Advisory only</td>
173
+ <td style='padding: 10px; border-bottom: 1px solid #dee2e6; color: #28a745;'>βœ… Autonomous</td>
174
+ </tr>
175
+ <tr>
176
+ <td style='padding: 10px; border-bottom: 1px solid #dee2e6;'>Learning</td>
177
+ <td style='padding: 10px; border-bottom: 1px solid #dee2e6; color: #dc3545;'>❌ None</td>
178
+ <td style='padding: 10px; border-bottom: 1px solid #dee2e6; color: #28a745;'>βœ… Continuous</td>
179
+ </tr>
180
+ <tr>
181
+ <td style='padding: 10px; border-bottom: 1px solid #dee2e6;'>ROI Measurement</td>
182
+ <td style='padding: 10px; border-bottom: 1px solid #dee2e6; color: #dc3545;'>❌ No ROI</td>
183
+ <td style='padding: 10px; border-bottom: 1px solid #dee2e6; color: #28a745;'>βœ… 5.2Γ— average</td>
184
+ </tr>
185
+ <tr>
186
+ <td style='padding: 10px;'>Payback Period</td>
187
+ <td style='padding: 10px;'>N/A</td>
188
+ <td style='padding: 10px; color: #28a745;'>βœ… 2-3 months</td>
189
+ </tr>
190
+ </tbody>
191
+ </table>
192
+ </div>
193
+ """
194
+ return gr.HTML(value=html)