import gradio as gr


theme = gr.themes.Default(primary_hue="blue").set(
    background_fill_primary="#F9F2EA",
    block_background_fill="#FFFFFF",
)


demo = gr.Blocks(theme=theme, css="""\
.gradio-container {
    width: 100%;
}

.margin-top {
    margin-top: 20px;
}

.white {
    background-color: white;
}

.column {
    border-radius: 20px;
    padding: 30px;
}

.blue {
    /**
    background-image: url("https://huggingface.co/datasets/huggingface/documentation-images/resolve/main/substra-banner.png");
    background-size: cover;
    **/
    background-color: #223fb3;
}

.blue p {
    color: white !important;
}

.info-box {
    background: transparent !important;
}
""")

with demo:
    gr.HTML("""
    <img src="https://raw.githubusercontent.com/substra/substra/main/Substra-logo-colour.svg" style="height: 5em;" />
    """)
    gr.Markdown("# Federated  Learning with Substra")
    with gr.Row():
        with gr.Column(scale=1, elem_classes=["blue", "column"]):
            gr.Markdown("Here you can run a quick simulation of Federated Learning with Substra.")
            gr.Markdown("Check out the accompanying blog post to learn more.")
            with gr.Box(elem_classes=["info-box"]):
                gr.Markdown("""\
                This space is an introduction to federated learning. \
                We will create new spaces soon where you will be able to control the models, datasets and \
                federation strategies.\
                """)
        with gr.Column(scale=3, elem_classes=["white", "column"]):
            gr.Markdown("""\
            Data scientists doing medical research often face a shortage of high quality and diverse data to \
            effectively train models. This challenge can be overcome by securely allowing training on pro- tected \
            data through (Federated Learning). Substra is a Python based Federated Learning soft- ware that \
            enables researchers to easily train ML models on remote data regardless of the ML library they are \
            using or the data modality they are working with.\
            """)
            gr.Markdown("### Here we show an example of image data located in two different hospitals.")
            gr.Markdown("""\
            By playing with the distribution of data in the 2 simulated hospitals, you'll be able to compare how \
            the federated models compare with models trained on single datasets. The data used is from the \
            Camelyon17 dataset, a commonly used benchmark in the medical world that comes from this challenge. \
            The sample below shows normal cells on the left compared with cancer cells on the right.\
            """)
            gr.HTML("""
            <img
            src="https://huggingface.co/datasets/huggingface/documentation-images/resolve/main/substra-tumor.png"
            style="padding: 20px 150px;"
            />
            """)
            gr.Markdown("""\
            A problem often faced by researchers is that datasets lack the necessary amount of positive samples \
            (samples containing cancer tissues) that are needed to reliably classify cancer. In this interface you \
            can use the slider to control the percentage of negative and positive samples in each hospital. \
            Setting this slider to minimum will mean there are 0 positive samples, whereas 0.5 would mean that \
            half the dataset contains slides with positive tumor samples.\
            """)

            with gr.Row(elem_classes=["margin-top"]):
                gr.Slider()
                gr.Slider()
                gr.Button(value="Launch Experiment 🚀")

demo.launch()