app.py

import streamlit as st
from datasets import load_dataset
import pandas as pd
import plotly.graph_objects as go


@st.cache_data
def fetch_counts():
    dataset = load_dataset("atlasia/darija-translation", split="train")
    dataset = pd.DataFrame(dataset)
    n_eng = len(dataset["en"].dropna())
    n_fr = len(dataset["fr"].dropna())
    n = len(dataset)
    return {"n_eng": n_eng, "n_fr": n_fr, "n": n}


if __name__ == "__main__":
    st.image("atlasia_white_wtext_nobg.png")

    counts = fetch_counts()
    n_goal = 40000
    total_submissions = counts["n"] 

    st.text("")
    # center text
    st.markdown(
    """
    <h1 style='text-align: center; font-size: 20px;'>
    Help building a Darija 
    dataset for all Moroccans.
    Contribute here: <a href="https://atlasia.ma" target="_blank">atlasia.ma</a>
    </h1>
    """,
    unsafe_allow_html=True,
)

    # make progress chart
    fig = go.Figure(
        go.Indicator(
            domain={"x": [0, 1], "y": [0, 1]},
            value=total_submissions,
            mode="gauge+number+delta",
            title={"text": "Number of translations"},
            delta={"reference": 0},
            gauge={
                "axis": {"range": [0, n_goal]},
                "steps": [
                    {"range": [0, total_submissions], "color": "gray"},
                ],
                "threshold": {
                    "line": {"color": "green", "width": 4},
                    "thickness": 0.75,
                    "value": n_goal / 2,
                },
            },
        )
    )

    st.plotly_chart(fig, use_container_width=True)

    labels = ["English", "French"]
    values = [counts["n_eng"], counts["n_fr"]]
    # change color to blue and white
    fig = go.Figure(data=[go.Pie(labels=labels, values=values, pull=[0.2, 0])])
    fig.update_traces(marker=dict(colors=["#46607b", "#FFFFFF"]))
    st.plotly_chart(fig, use_container_width=True)