WIP: Substra styling

app.py

@@ -1,16 +1,94 @@
 import gradio as gr
-from huggingface_hub import HfApi
-from substra_launcher import launch_substra_space
-
-api = HfApi()
-
-gr.Interface(
-    title="Susbtra Demo - Orchestrator",
-    fn=lambda *args, **kwargs: launch_substra_space(api, *args, **kwargs),
-    inputs=[
-        gr.Slider(label="num_hospitals", value=3, minimum=2, maximum=5, step=1),
-        gr.Text(label="space_name")
-    ],
-    outputs="text",
-    examples=[[2, "substra-test"]]
-).launch()
+
+
+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()