Hugging Face's logo

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

App Files Community
2
petter2025 commited on
Commit
09aa1d1
·
verified ·
1 Parent(s): d79de79

Update ui/components.py

Browse files
Files changed (1) hide show
  1. ui/components.py +209 -84
ui/components.py CHANGED
@@ -83,134 +83,259 @@ def create_observation_gate_placeholder(confidence: float = 65.0) -> gr.HTML:
83
  if confidence < 70.0:
84
  html_content = f"""
85
  <div class="observation-gate" style="
86
- border: 2px solid #4A5568;
87
- border-radius: 8px;
88
- padding: 20px;
89
- margin: 10px 0;
90
- background: linear-gradient(135deg, #1A202C 0%, #2D3748 100%);
91
- color: #E2E8F0;
92
- font-family: 'Inter', sans-serif;
 
93
  ">
94
- <div style="display: flex; align-items: center; margin-bottom: 15px;">
95
  <div style="
96
- background: #2D3748;
97
  border-radius: 50%;
98
- width: 40px;
99
- height: 40px;
100
  display: flex;
101
  align-items: center;
102
  justify-content: center;
103
  margin-right: 15px;
104
- border: 2px solid #4A5568;
 
105
  ">
106
- <span style="font-size: 20px;">⚠️</span>
107
  </div>
108
  <div>
109
- <h3 style="margin: 0; color: #E2E8F0; font-weight: 600;">OBSERVATION GATE ACTIVE</h3>
110
- <p style="margin: 5px 0 0 0; color: #A0AEC0; font-size: 14px;">System restraint engaged</p>
 
 
 
 
111
  </div>
112
  </div>
113
 
114
  <div style="
115
- background: rgba(45, 55, 72, 0.5);
116
- border-left: 4px solid #ECC94B;
117
- padding: 15px;
118
- margin: 15px 0;
119
- border-radius: 0 4px 4px 0;
 
120
  ">
121
- <h4 style="margin: 0 0 10px 0; color: #ECC94B; font-weight: 500;">
122
- Decision Intentionally Deferred
123
- </h4>
124
- <p style="margin: 0; color: #CBD5E0; font-size: 14px; line-height: 1.5;">
125
- The system has detected uncertainty ({confidence:.1f}% confidence) and has chosen to observe rather than act.
126
- This is not a limitation—it is a psychological advantage demonstrating restraint.
127
- Historical evidence suggests premature action increases risk by 47%.
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
128
  </p>
129
  </div>
130
 
131
- <div style="display: flex; justify-content: space-between; align-items: center;">
132
- <div>
133
- <span style="color: #A0AEC0; font-size: 13px;">Confidence threshold: 70.0%</span>
 
 
 
 
134
  </div>
135
- <div>
136
- <span style="
137
- display: inline-block;
138
- background: #4A5568;
139
- color: white;
140
- padding: 4px 12px;
141
- border-radius: 12px;
142
- font-size: 13px;
143
- font-weight: 500;
144
- ">
145
- {confidence:.1f}% confidence
146
- </span>
147
  </div>
148
  </div>
149
  </div>
150
  """
151
  else:
152
- html_content = """
153
  <div class="observation-gate" style="
154
- border: 2px solid #38A169;
155
- border-radius: 8px;
156
- padding: 20px;
157
- margin: 10px 0;
158
- background: linear-gradient(135deg, #1A202C 0%, #2D3748 100%);
159
- color: #E2E8F0;
160
- font-family: 'Inter', sans-serif;
 
161
  ">
162
- <div style="display: flex; align-items: center; margin-bottom: 15px;">
163
  <div style="
164
- background: #2D3748;
165
  border-radius: 50%;
166
- width: 40px;
167
- height: 40px;
168
  display: flex;
169
  align-items: center;
170
  justify-content: center;
171
  margin-right: 15px;
172
- border: 2px solid #38A169;
 
173
  ">
174
- <span style="font-size: 20px;">✅</span>
175
  </div>
176
  <div>
177
- <h3 style="margin: 0; color: #E2E8F0; font-weight: 600;">OBSERVATION GATE CLEARED</h3>
178
- <p style="margin: 5px 0 0 0; color: #A0AEC0; font-size: 14px;">Confidence threshold met</p>
 
 
 
 
179
  </div>
180
  </div>
181
 
182
  <div style="
183
- background: rgba(56, 161, 105, 0.15);
184
- border-left: 4px solid #38A169;
185
- padding: 15px;
186
- margin: 15px 0;
187
- border-radius: 0 4px 4px 0;
 
188
  ">
189
- <h4 style="margin: 0 0 10px 0; color: #38A169; font-weight: 500;">
190
- Proceed with Policy Action
191
- </h4>
192
- <p style="margin: 0; color: #CBD5E0; font-size: 14px; line-height: 1.5;">
193
- Confidence exceeds threshold. System may proceed with sequenced actions.
194
- Historical evidence will be consulted before any execution.
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
195
  </p>
196
  </div>
197
 
198
- <div style="display: flex; justify-content: space-between; align-items: center;">
199
- <div>
200
- <span style="color: #A0AEC0; font-size: 13px;">Confidence threshold: 70.0%</span>
 
 
 
 
201
  </div>
202
- <div>
203
- <span style="
204
- display: inline-block;
205
- background: #38A169;
206
- color: white;
207
- padding: 4px 12px;
208
- border-radius: 12px;
209
- font-size: 13px;
210
- font-weight: 500;
211
- ">
212
- 85.0% confidence
213
- </span>
214
  </div>
215
  </div>
216
  </div>
 
83
  if confidence < 70.0:
84
  html_content = f"""
85
  <div class="observation-gate" style="
86
+ border: 3px solid #f59e0b;
87
+ border-radius: 16px;
88
+ padding: 30px;
89
+ margin: 25px 0;
90
+ background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
91
+ color: #78350f;
92
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
93
+ box-shadow: 0 8px 32px rgba(245, 158, 11, 0.1);
94
  ">
95
+ <div style="display: flex; align-items: center; margin-bottom: 20px; justify-content: center;">
96
  <div style="
97
+ background: white;
98
  border-radius: 50%;
99
+ width: 50px;
100
+ height: 50px;
101
  display: flex;
102
  align-items: center;
103
  justify-content: center;
104
  margin-right: 15px;
105
+ border: 3px solid #f59e0b;
106
+ box-shadow: 0 4px 12px rgba(245, 158, 11, 0.2);
107
  ">
108
+ <span style="font-size: 24px; color: #92400e;">⚠️</span>
109
  </div>
110
  <div>
111
+ <h3 style="margin: 0; color: #92400e; font-weight: 800; font-size: 22px; letter-spacing: 0.5px;">
112
+ OBSERVATION GATE ACTIVE
113
+ </h3>
114
+ <p style="margin: 5px 0 0 0; color: #b45309; font-size: 16px; font-weight: 500;">
115
+ System restraint engaged
116
+ </p>
117
  </div>
118
  </div>
119
 
120
  <div style="
121
+ background: white;
122
+ border: 2px solid #f59e0b;
123
+ padding: 25px;
124
+ margin: 20px 0;
125
+ border-radius: 12px;
126
+ box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
127
  ">
128
+ <div style="display: flex; align-items: flex-start; gap: 15px;">
129
+ <div style="font-size: 32px; color: #92400e; line-height: 1;">⏸️</div>
130
+ <div>
131
+ <h4 style="margin: 0 0 12px 0; color: #92400e; font-weight: 700; font-size: 20px;">
132
+ Decision Intentionally Deferred
133
+ </h4>
134
+ <p style="margin: 0; color: #78350f; font-size: 16px; line-height: 1.6;">
135
+ The system has detected uncertainty (<strong style="color: #dc2626;">{confidence:.1f}% confidence</strong>)
136
+ and has chosen to observe rather than act.
137
+ <em style="color: #92400e;">This is not a limitation—it is a psychological advantage demonstrating restraint.</em>
138
+ Historical evidence suggests premature action increases risk by <strong>47%</strong>.
139
+ </p>
140
+ </div>
141
+ </div>
142
+ </div>
143
+
144
+ <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 25px 0;">
145
+ <div style="
146
+ background: #f0f9ff;
147
+ border: 2px solid #0ea5e9;
148
+ border-radius: 12px;
149
+ padding: 20px;
150
+ text-align: center;
151
+ ">
152
+ <div style="color: #0369a1; font-size: 14px; font-weight: 600; text-transform: uppercase; margin-bottom: 10px;">
153
+ Confidence Threshold
154
+ </div>
155
+ <div style="color: #0ea5e9; font-size: 36px; font-weight: 800; line-height: 1;">
156
+ 70.0%
157
+ </div>
158
+ <div style="color: #64748b; font-size: 13px; margin-top: 8px;">
159
+ Required for action
160
+ </div>
161
+ </div>
162
+
163
+ <div style="
164
+ background: #fef2f2;
165
+ border: 2px solid #ef4444;
166
+ border-radius: 12px;
167
+ padding: 20px;
168
+ text-align: center;
169
+ ">
170
+ <div style="color: #dc2626; font-size: 14px; font-weight: 600; text-transform: uppercase; margin-bottom: 10px;">
171
+ Current Confidence
172
+ </div>
173
+ <div style="color: #ef4444; font-size: 36px; font-weight: 800; line-height: 1;">
174
+ {confidence:.1f}%
175
+ </div>
176
+ <div style="color: #dc2626; font-size: 13px; margin-top: 8px;">
177
+ Below threshold → Observe
178
+ </div>
179
+ </div>
180
+ </div>
181
+
182
+ <div style="
183
+ background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
184
+ border-radius: 12px;
185
+ border-left: 4px solid #f59e0b;
186
+ padding: 20px;
187
+ margin-top: 20px;
188
+ ">
189
+ <div style="color: #64748b; font-size: 14px; font-weight: 600; text-transform: uppercase; margin-bottom: 8px;">
190
+ 🧠 Psychological Principle
191
+ </div>
192
+ <p style="margin: 0; color: #475569; font-size: 15px; line-height: 1.5; font-style: italic;">
193
+ "Restraint is not inaction. It is the system's most sophisticated response to uncertainty.
194
+ When confidence is low, the wisest action is often to wait for better data."
195
  </p>
196
  </div>
197
 
198
+ <div style="margin-top: 30px; padding-top: 20px; border-top: 2px dashed #f59e0b;">
199
+ <div style="display: flex; justify-content: center; align-items: center; gap: 15px; margin-bottom: 10px;">
200
+ <div style="width: 12px; height: 12px; background: #ef4444; border-radius: 50%;"></div>
201
+ <div style="flex: 1; height: 4px; background: linear-gradient(90deg, #ef4444 0%, #f59e0b 100%);"></div>
202
+ <div style="width: 12px; height: 12px; background: #f59e0b; border-radius: 50%;"></div>
203
+ <div style="flex: 1; height: 4px; background: linear-gradient(90deg, #f59e0b 0%, #10b981 100%);"></div>
204
+ <div style="width: 12px; height: 12px; background: #10b981; border-radius: 50%;"></div>
205
  </div>
206
+ <div style="display: flex; justify-content: space-between;">
207
+ <span style="font-size: 12px; color: #dc2626; font-weight: 600;">Observe ({confidence:.1f}%)</span>
208
+ <span style="font-size: 12px; color: #64748b;">Threshold (70%)</span>
209
+ <span style="font-size: 12px; color: #059669; font-weight: 600;">Act (75%+)</span>
 
 
 
 
 
 
 
 
210
  </div>
211
  </div>
212
  </div>
213
  """
214
  else:
215
+ html_content = f"""
216
  <div class="observation-gate" style="
217
+ border: 3px solid #10b981;
218
+ border-radius: 16px;
219
+ padding: 30px;
220
+ margin: 25px 0;
221
+ background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
222
+ color: #065f46;
223
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
224
+ box-shadow: 0 8px 32px rgba(16, 185, 129, 0.1);
225
  ">
226
+ <div style="display: flex; align-items: center; margin-bottom: 20px; justify-content: center;">
227
  <div style="
228
+ background: white;
229
  border-radius: 50%;
230
+ width: 50px;
231
+ height: 50px;
232
  display: flex;
233
  align-items: center;
234
  justify-content: center;
235
  margin-right: 15px;
236
+ border: 3px solid #10b981;
237
+ box-shadow: 0 4px 12px rgba(16, 185, 129, 0.2);
238
  ">
239
+ <span style="font-size: 24px; color: #059669;">✅</span>
240
  </div>
241
  <div>
242
+ <h3 style="margin: 0; color: #065f46; font-weight: 800; font-size: 22px; letter-spacing: 0.5px;">
243
+ OBSERVATION GATE CLEARED
244
+ </h3>
245
+ <p style="margin: 5px 0 0 0; color: #059669; font-size: 16px; font-weight: 500;">
246
+ Confidence threshold met
247
+ </p>
248
  </div>
249
  </div>
250
 
251
  <div style="
252
+ background: white;
253
+ border: 2px solid #10b981;
254
+ padding: 25px;
255
+ margin: 20px 0;
256
+ border-radius: 12px;
257
+ box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
258
  ">
259
+ <div style="display: flex; align-items: flex-start; gap: 15px;">
260
+ <div style="font-size: 32px; color: #065f46; line-height: 1;">⚡</div>
261
+ <div>
262
+ <h4 style="margin: 0 0 12px 0; color: #065f46; font-weight: 700; font-size: 20px;">
263
+ Proceed with Policy Action
264
+ </h4>
265
+ <p style="margin: 0; color: #047857; font-size: 16px; line-height: 1.6;">
266
+ Confidence exceeds threshold. System may proceed with sequenced actions.
267
+ Historical evidence will be consulted before any execution.
268
+ </p>
269
+ </div>
270
+ </div>
271
+ </div>
272
+
273
+ <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 25px 0;">
274
+ <div style="
275
+ background: #f0f9ff;
276
+ border: 2px solid #0ea5e9;
277
+ border-radius: 12px;
278
+ padding: 20px;
279
+ text-align: center;
280
+ ">
281
+ <div style="color: #0369a1; font-size: 14px; font-weight: 600; text-transform: uppercase; margin-bottom: 10px;">
282
+ Confidence Threshold
283
+ </div>
284
+ <div style="color: #0ea5e9; font-size: 36px; font-weight: 800; line-height: 1;">
285
+ 70.0%
286
+ </div>
287
+ <div style="color: #64748b; font-size: 13px; margin-top: 8px;">
288
+ Required for action
289
+ </div>
290
+ </div>
291
+
292
+ <div style="
293
+ background: #f0fdf4;
294
+ border: 2px solid #10b981;
295
+ border-radius: 12px;
296
+ padding: 20px;
297
+ text-align: center;
298
+ ">
299
+ <div style="color: #059669; font-size: 14px; font-weight: 600; text-transform: uppercase; margin-bottom: 10px;">
300
+ Current Confidence
301
+ </div>
302
+ <div style="color: #10b981; font-size: 36px; font-weight: 800; line-height: 1;">
303
+ {confidence:.1f}%
304
+ </div>
305
+ <div style="color: #059669; font-size: 13px; margin-top: 8px;">
306
+ Above threshold → Proceed
307
+ </div>
308
+ </div>
309
+ </div>
310
+
311
+ <div style="
312
+ background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
313
+ border-radius: 12px;
314
+ border-left: 4px solid #10b981;
315
+ padding: 20px;
316
+ margin-top: 20px;
317
+ ">
318
+ <div style="color: #64748b; font-size: 14px; font-weight: 600; text-transform: uppercase; margin-bottom: 8px;">
319
+ ✅ Safety Principle
320
+ </div>
321
+ <p style="margin: 0; color: #475569; font-size: 15px; line-height: 1.5; font-style: italic;">
322
+ "When confidence is high, proceed with sequenced actions. Each step is validated
323
+ against historical evidence before proceeding to the next."
324
  </p>
325
  </div>
326
 
327
+ <div style="margin-top: 30px; padding-top: 20px; border-top: 2px dashed #10b981;">
328
+ <div style="display: flex; justify-content: center; align-items: center; gap: 15px; margin-bottom: 10px;">
329
+ <div style="width: 12px; height: 12px; background: #10b981; border-radius: 50%;"></div>
330
+ <div style="flex: 1; height: 4px; background: linear-gradient(90deg, #10b981 0%, #22c55e 100%);"></div>
331
+ <div style="width: 12px; height: 12px; background: #22c55e; border-radius: 50%;"></div>
332
+ <div style="flex: 1; height: 4px; background: linear-gradient(90deg, #22c55e 0%, #4ade80 100%);"></div>
333
+ <div style="width: 12px; height: 12px; background: #4ade80; border-radius: 50%;"></div>
334
  </div>
335
+ <div style="display: flex; justify-content: space-between;">
336
+ <span style="font-size: 12px; color: #065f46; font-weight: 600;">Ready ({confidence:.1f}%)</span>
337
+ <span style="font-size: 12px; color: #059669;">Threshold (70%)</span>
338
+ <span style="font-size: 12px; color: #16a34a; font-weight: 600;">Proceed</span>
 
 
 
 
 
 
 
 
339
  </div>
340
  </div>
341
  </div>