# app dashboard from https://huggingface.co/spaces/davanstrien/argilla-progress/blob/main/app.py
import os
from typing import List
import argilla as rg
import gradio as gr
import pandas as pd
import plotly.colors as colors
import plotly.graph_objects as go
client = rg.Argilla(
api_url=os.getenv("ARGILLA_API_URL"),
api_key=os.getenv("ARGILLA_API_KEY"),
)
def get_progress(dataset: rg.Dataset) -> dict:
dataset_progress = dataset.progress(with_users_distribution=True)
total, completed = dataset_progress["total"], dataset_progress["completed"]
progress = (completed / total) * 100 if total > 0 else 0
return {
"total": total,
"annotated": completed,
"progress": progress,
"users": {
username: user_progress["completed"].get("submitted")
for username, user_progress in dataset_progress["users"].items()
}
}
def create_gauge_chart(progress):
fig = go.Figure(
go.Indicator(
mode="gauge+number+delta",
value=progress["progress"],
title={"text": "Dataset Annotation Progress", "font": {"size": 24}},
delta={"reference": 100, "increasing": {"color": "RebeccaPurple"}},
number={"font": {"size": 40}, "valueformat": ".1f", "suffix": "%"},
gauge={
"axis": {"range": [None, 100], "tickwidth": 1, "tickcolor": "darkblue"},
"bar": {"color": "deepskyblue"},
"bgcolor": "white",
"borderwidth": 2,
"bordercolor": "gray",
"steps": [
{"range": [0, progress["progress"]], "color": "royalblue"},
{"range": [progress["progress"], 100], "color": "lightgray"},
],
"threshold": {
"line": {"color": "red", "width": 4},
"thickness": 0.75,
"value": 100,
},
},
)
)
fig.update_layout(
annotations=[
dict(
text=(
f"Total records: {progress['total']}
"
f"Annotated: {progress['annotated']} ({progress['progress']:.1f}%)
"
f"Remaining: {progress['total'] - progress['annotated']} ({100 - progress['progress']:.1f}%)"
),
# x=0.5,
# y=-0.2,
showarrow=False,
xref="paper",
yref="paper",
font=dict(size=16),
)
],
)
fig.add_annotation(
text=(
f"Current Progress: {progress['progress']:.1f}% complete
"
f"({progress['annotated']} out of {progress['total']} records annotated)"
),
xref="paper",
yref="paper",
x=0.5,
y=1.1,
showarrow=False,
font=dict(size=18),
align="center",
)
return fig
def create_treemap(user_annotations, total_records):
sorted_users = sorted(user_annotations.items(), key=lambda x: x[1], reverse=True)
color_scale = colors.qualitative.Pastel + colors.qualitative.Set3
labels, parents, values, text, user_colors = [], [], [], [], []
for i, (user, contribution) in enumerate(sorted_users):
percentage = (contribution / total_records) * 100
labels.append(user)
parents.append("Annotations")
values.append(contribution)
text.append(f"{contribution} annotations
{percentage:.2f}%")
user_colors.append(color_scale[i % len(color_scale)])
labels.append("Annotations")
parents.append("")
values.append(total_records)
text.append(f"Total: {total_records} annotations")
user_colors.append("#FFFFFF")
fig = go.Figure(
go.Treemap(
labels=labels,
parents=parents,
values=values,
text=text,
textinfo="label+text",
hoverinfo="label+text+value",
marker=dict(colors=user_colors, line=dict(width=2)),
)
)
fig.update_layout(
title_text="User contributions to the total end dataset",
height=500,
margin=dict(l=10, r=10, t=50, b=10),
paper_bgcolor="#F0F0F0", # Light gray background
plot_bgcolor="#F0F0F0", # Light gray background
)
return fig
def get_datasets(client: rg.Argilla) -> List[rg.Dataset]:
return client.datasets.list()
datasets = get_datasets(client)
def update_dashboard(dataset_idx: int| None = None):
if dataset_idx is None:
return [None, None, None]
dataset = datasets[dataset_idx]
progress = get_progress(dataset)
gauge_chart = create_gauge_chart(progress)
treemap = create_treemap(progress["users"], progress["total"])
leaderboard_df = pd.DataFrame(
list(progress["users"].items()), columns=["User", "Annotations"]
)
leaderboard_df = leaderboard_df.sort_values(
"Annotations", ascending=False
).reset_index(drop=True)
return gauge_chart, treemap, leaderboard_df
with gr.Blocks() as demo:
gr.Markdown("# Argilla Dataset Dashboard")
datasets_dropdown = gr.Dropdown(label="Select your dataset")
datasets_dropdown.choices = [(dataset.name, idx) for idx, dataset in enumerate(datasets)]
def set_selected_dataset(dataset_idx) -> None:
global selected_dataset
dataset = datasets[dataset_idx]
selected_dataset = dataset
with gr.Row():
gauge_output = gr.Plot(label="Overall Progress")
treemap_output = gr.Plot(label="User contributions")
with gr.Row():
leaderboard_output = gr.Dataframe(
label="Leaderboard", headers=["User", "Annotations"]
)
demo.load(
update_dashboard,
inputs=[datasets_dropdown],
outputs=[gauge_output, treemap_output, leaderboard_output],
every=5,
)
datasets_dropdown.change(
update_dashboard,
inputs=[datasets_dropdown],
outputs=[gauge_output, treemap_output, leaderboard_output],
)
if __name__ == "__main__":
demo.launch()
# app dashboard from https://huggingface.co/spaces/davanstrien/argilla-progress/blob/main/app.py
import os
from typing import List
import argilla as rg
import gradio as gr
import pandas as pd
import plotly.colors as colors
import plotly.graph_objects as go
client = rg.Argilla(
api_url=os.getenv("ARGILLA_API_URL"),
api_key=os.getenv("ARGILLA_API_KEY"),
)
def get_progress(dataset: rg.Dataset) -> dict:
dataset_progress = dataset.progress(with_users_distribution=True)
total, completed = dataset_progress["total"], dataset_progress["completed"]
progress = (completed / total) * 100 if total > 0 else 0
return {
"total": total,
"annotated": completed,
"progress": progress,
"users": {
username: user_progress["completed"].get("submitted")
for username, user_progress in dataset_progress["users"].items()
}
}
def create_gauge_chart(progress):
fig = go.Figure(
go.Indicator(
mode="gauge+number+delta",
value=progress["progress"],
title={"text": "Dataset Annotation Progress", "font": {"size": 24}},
delta={"reference": 100, "increasing": {"color": "RebeccaPurple"}},
number={"font": {"size": 40}, "valueformat": ".1f", "suffix": "%"},
gauge={
"axis": {"range": [None, 100], "tickwidth": 1, "tickcolor": "darkblue"},
"bar": {"color": "deepskyblue"},
"bgcolor": "white",
"borderwidth": 2,
"bordercolor": "gray",
"steps": [
{"range": [0, progress["progress"]], "color": "royalblue"},
{"range": [progress["progress"], 100], "color": "lightgray"},
],
"threshold": {
"line": {"color": "red", "width": 4},
"thickness": 0.75,
"value": 100,
},
},
)
)
fig.update_layout(
annotations=[
dict(
text=(
f"Total records: {progress['total']}
"
f"Annotated: {progress['annotated']} ({progress['progress']:.1f}%)
"
f"Remaining: {progress['total'] - progress['annotated']} ({100 - progress['progress']:.1f}%)"
),
# x=0.5,
# y=-0.2,
showarrow=False,
xref="paper",
yref="paper",
font=dict(size=16),
)
],
)
fig.add_annotation(
text=(
f"Current Progress: {progress['progress']:.1f}% complete
"
f"({progress['annotated']} out of {progress['total']} records annotated)"
),
xref="paper",
yref="paper",
x=0.5,
y=1.1,
showarrow=False,
font=dict(size=18),
align="center",
)
return fig
def create_treemap(user_annotations, total_records):
sorted_users = sorted(user_annotations.items(), key=lambda x: x[1], reverse=True)
color_scale = colors.qualitative.Pastel + colors.qualitative.Set3
labels, parents, values, text, user_colors = [], [], [], [], []
for i, (user, contribution) in enumerate(sorted_users):
percentage = (contribution / total_records) * 100
labels.append(user)
parents.append("Annotations")
values.append(contribution)
text.append(f"{contribution} annotations
{percentage:.2f}%")
user_colors.append(color_scale[i % len(color_scale)])
labels.append("Annotations")
parents.append("")
values.append(total_records)
text.append(f"Total: {total_records} annotations")
user_colors.append("#FFFFFF")
fig = go.Figure(
go.Treemap(
labels=labels,
parents=parents,
values=values,
text=text,
textinfo="label+text",
hoverinfo="label+text+value",
marker=dict(colors=user_colors, line=dict(width=2)),
)
)
fig.update_layout(
title_text="User contributions to the total end dataset",
height=500,
margin=dict(l=10, r=10, t=50, b=10),
paper_bgcolor="#F0F0F0", # Light gray background
plot_bgcolor="#F0F0F0", # Light gray background
)
return fig
def get_datasets(client: rg.Argilla) -> List[rg.Dataset]:
return client.datasets.list()
datasets = get_datasets(client)
def update_dashboard(dataset_idx: int| None = None):
if dataset_idx is None:
return [None, None, None]
dataset = datasets[dataset_idx]
progress = get_progress(dataset)
gauge_chart = create_gauge_chart(progress)
treemap = create_treemap(progress["users"], progress["total"])
leaderboard_df = pd.DataFrame(
list(progress["users"].items()), columns=["User", "Annotations"]
)
leaderboard_df = leaderboard_df.sort_values(
"Annotations", ascending=False
).reset_index(drop=True)
return gauge_chart, treemap, leaderboard_df
with gr.Blocks() as demo:
gr.Markdown("# Argilla Dataset Dashboard")
datasets_dropdown = gr.Dropdown(label="Select your dataset")
datasets_dropdown.choices = [(dataset.name, idx) for idx, dataset in enumerate(datasets)]
def set_selected_dataset(dataset_idx) -> None:
global selected_dataset
dataset = datasets[dataset_idx]
selected_dataset = dataset
with gr.Row():
gauge_output = gr.Plot(label="Overall Progress")
treemap_output = gr.Plot(label="User contributions")
with gr.Row():
leaderboard_output = gr.Dataframe(
label="Leaderboard", headers=["User", "Annotations"]
)
demo.load(
update_dashboard,
inputs=[datasets_dropdown],
outputs=[gauge_output, treemap_output, leaderboard_output],
every=5,
)
datasets_dropdown.change(
update_dashboard,
inputs=[datasets_dropdown],
outputs=[gauge_output, treemap_output, leaderboard_output],
)
if __name__ == "__main__":
demo.launch()