File size: 1,706 Bytes
c939d66 | 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 | """Feedback components for user interaction."""
import gradio as gr
def ProcessingIndicator(steps: list[dict], current_step: int = 0) -> gr.HTML:
"""
Render a processing indicator with steps.
Args:
steps: List of {"label": str, "status": "pending"|"active"|"complete"}
current_step: Index of current step
"""
html = '<div style="padding: 16px;">'
for i, step in enumerate(steps):
if i < current_step:
icon = "✓"
color = "#22c55e"
elif i == current_step:
icon = "●"
color = "#3b82f6"
else:
icon = "○"
color = "#9ca3af"
html += f'''
<div style="display: flex; align-items: center; margin-bottom: 8px;">
<span style="color: {color}; margin-right: 8px; font-size: 16px;">{icon}</span>
<span style="color: {'#111827' if i <= current_step else '#9ca3af'};">{step["label"]}</span>
</div>
'''
html += '</div>'
return gr.HTML(html)
def EmptyState(
title: str,
description: str | None = None,
icon: str = "📭",
) -> None:
"""
Render an empty state message.
Args:
title: Empty state title
description: Optional description
icon: Emoji icon
"""
gr.HTML(f'''
<div style="
text-align: center;
padding: 48px 24px;
color: #6b7280;
">
<div style="font-size: 48px; margin-bottom: 16px;">{icon}</div>
<div style="font-size: 18px; font-weight: 600; color: #374151; margin-bottom: 8px;">{title}</div>
{f'<div style="font-size: 14px;">{description}</div>' if description else ''}
</div>
''')
|