From 9faab147a7dcd523ab200f023c5665568f2f975e Mon Sep 17 00:00:00 2001
From: Julien Vignoud <julien.vignoud@epfl.ch>
Date: Fri, 3 May 2024 14:30:20 +0200
Subject: [PATCH 01/37] Remove list filters in the predefined tasks web-client
 page

---
 .../src/task/display_information.ts           |   6 +-
 web-client/src/components/pages/TaskList.vue  | 143 ++----------------
 .../src/components/training/Trainer.vue       |  17 +--
 3 files changed, 18 insertions(+), 148 deletions(-)

diff --git a/discojs/discojs-core/src/task/display_information.ts b/discojs/discojs-core/src/task/display_information.ts
index f8daa730c..fe154e568 100644
--- a/discojs/discojs-core/src/task/display_information.ts
+++ b/discojs/discojs-core/src/task/display_information.ts
@@ -3,8 +3,8 @@ import { type DataExample, isDataExample } from './data_example.js'
 import { type LabelType, isLabelType } from './label_type.js'
 
 export interface DisplayInformation {
-  taskTitle?: string
-  summary?: Summary
+  taskTitle: string
+  summary: Summary
   tradeoffs?: string
   dataFormatInformation?: string
   // TODO merge dataExample
@@ -51,7 +51,7 @@ export function isDisplayInformation (raw: unknown): raw is DisplayInformation {
     return false
   }
 
-  if (summary !== undefined && !isSummary(summary)) {
+  if (!isSummary(summary)) {
     return false
   }
 
diff --git a/web-client/src/components/pages/TaskList.vue b/web-client/src/components/pages/TaskList.vue
index fe0630cc5..1d0a28ceb 100644
--- a/web-client/src/components/pages/TaskList.vue
+++ b/web-client/src/components/pages/TaskList.vue
@@ -1,73 +1,14 @@
 <template>
   <div class="space-y-8 mt-8 md:mt-16">
-    <div
-      v-show="tasks.size > 0"
-      class="flex flex-wrap gap-8"
-    >
-      <IconCard class="grow shrink-0 basis-48">
-        <template #title>
-          Filter by Training Scheme
-        </template>
-        <template #content>
-          <div
-            class="flex flex-wrap gap-8"
-          >
-            <div
-              v-for="(filter, idx) in schemeFilters"
-              :key="offset + idx"
-              class="text-center"
-            >
-              <CheckBox @clicked="toggle(filter)">
-                {{ filter.name }}
-              </CheckBox>
-            </div>
-          </div>
-        </template>
-      </IconCard>
-      <IconCard class="grow shrink-0 basis-48">
-        <template #title>
-          Filter by Data Type
-        </template>
-        <template #content>
-          <div
-            class="flex flex-wrap gap-8"
-          >
-            <div
-              v-for="(filter, idx) in dataFilters"
-              :key="offset + idx"
-              class="text-center"
-            >
-              <CheckBox @clicked="toggle(filter)">
-                {{ filter.name }}
-              </CheckBox>
-            </div>
-          </div>
-        </template>
-      </IconCard>
-    </div>
     <div class="flex flex-col gap-8 mt-8">
-      <ButtonCard
-        v-show="filteredTasks.length === 0 && tasks.size > 0"
-        class="mx-auto"
-        @action="clearFilters()"
-      >
-        <template #title>
-          No task corresponds to the selected filters
-        </template>
-        <template #text>
-          Please press the button below to clear selected filters.
-        </template>
-        <template #button>
-          clear filters
-        </template>
-      </ButtonCard>
+      <!-- In case no tasks were retrieved, suggest reloading the page -->
       <ButtonCard
         v-show="tasks.size === 0"
         class="mx-auto"
         @action="() => { router.go(0) }"
       >
         <template #title>
-          No task fetched from server
+          Tasks could not be retrieved
         </template>
         <template #text>
           Please press the button below to reload the app. Please ensure the Disco server is up and running.
@@ -76,13 +17,15 @@
           reload page
         </template>
       </ButtonCard>
+
+      <!-- Tasks could be retrieved, display them alphabetically -->
       <div
         id="tasks"
         class="contents"
       >
         <div
-          v-for="task in filteredTasks"
-          v-show="filteredTasks.length > 0"
+          v-for="task in sortedTasks"
+          v-show="sortedTasks.length > 0"
           :id="task.id"
           :key="task.id"
         >
@@ -90,25 +33,14 @@
             button-placement="left"
             @action="() => toTask(task)"
           >
-            <template
-              #title
-            >
+            <template #title>
               {{ task.displayInformation.taskTitle }} - {{ task.trainingInformation.scheme }}
             </template>
             <template #text>
-              <div
-                v-if="task.displayInformation.summary?.preview !== undefined"
-                v-html="task.displayInformation.summary.preview"
-              />
-              <span
-                v-else
-                class="italic"
-              >
-                No description was provided by the task's author.
-              </span>
+              <div v-html="task.displayInformation.summary.preview"/>
             </template>
             <template #button>
-              join
+              participate
             </template>
           </ButtonCard>
         </div>
@@ -118,7 +50,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, reactive, ref } from 'vue'
+import { computed } from 'vue'
 import { useRouter } from 'vue-router'
 import { storeToRefs } from 'pinia'
 
@@ -126,64 +58,15 @@ import type { Task } from '@epfml/discojs-core'
 
 import { useTasksStore } from '@/store/tasks'
 import { useTrainingStore } from '@/store/training'
-import IconCard from '@/components/containers/IconCard.vue'
 import ButtonCard from '@/components/containers/ButtonCard.vue'
-import CheckBox from '@/components/simple/CheckBox.vue'
-
-abstract class Filter {
-  public active: boolean
-  constructor (
-    public readonly name: string,
-    public readonly apply: (task: Task) => boolean
-  ) {
-    this.active = false
-  }
-}
-class SchemeFilter extends Filter {
-  constructor (name: string) {
-    const apply = (task: Task) => task.trainingInformation.scheme === name
-    super(name, apply)
-  }
-}
-
-class DataFilter extends Filter {
-  constructor (name: string) {
-    const apply = (task: Task) => task.trainingInformation.dataType === name
-    super(name, apply)
-  }
-}
 
 const router = useRouter()
 const trainingStore = useTrainingStore()
 const { tasks } = storeToRefs(useTasksStore())
 
-const schemeFilters = reactive(['Decentralized', 'Federated']
-  .map((scheme: string) => new SchemeFilter(scheme)))
-
-const dataFilters = reactive(['image', 'tabular', 'text']
-  .map((dataType: string) => new DataFilter(dataType)))
-
-const offset = ref(0)
-
-const filters = computed(() => schemeFilters.concat(dataFilters))
-
-const filteredTasks = computed(() => {
-  return ([...tasks.value.values()])
-    .filter((task: Task) =>
-      filters.value.every((filter: Filter) =>
-        filter.active ? filter.apply(task) : true)
-    )
-})
-
-const toggle = (filter: Filter): void => {
-  filter.active = !filter.active
-}
-
-const clearFilters = (): void => {
-  filters.value.forEach((filter: Filter) => { filter.active = false })
-  // little trick to reset the affiliated checkboxes
-  offset.value = offset.value === 0 ? filters.value.length : 0
-}
+const sortedTasks = computed(() => [...tasks.value.values()].sort(
+  (task1, task2) => task1.displayInformation.taskTitle.localeCompare(task2.displayInformation.taskTitle)
+))
 
 const toTask = (task: Task): void => {
   trainingStore.setTask(task.id)
diff --git a/web-client/src/components/training/Trainer.vue b/web-client/src/components/training/Trainer.vue
index bede00cb4..db0f128e1 100644
--- a/web-client/src/components/training/Trainer.vue
+++ b/web-client/src/components/training/Trainer.vue
@@ -38,15 +38,13 @@ import { ref, computed } from "vue";
 
 import type { RoundLogs, Task } from "@epfml/discojs-core";
 import {
-  aggregator as aggregators,
-  client as clients,
   data,
   EmptyMemory,
   Disco,
 } from "@epfml/discojs-core";
 import { IndexedDB } from "@epfml/discojs";
 
-import { CONFIG } from "@/config";
+import { getClient } from '@/clients'
 import { useMemoryStore } from "@/store/memory";
 import { useToaster } from "@/composables/toaster";
 import TrainingInformation from "@/components/training/TrainingInformation.vue";
@@ -99,18 +97,7 @@ async function startTraining(distributed: boolean): Promise<void> {
   toaster.info("Model training started");
 
   const scheme = distributed ? props.task.trainingInformation.scheme : "local";
-  const client =
-    scheme === "local"
-      ? new clients.Local(
-          CONFIG.serverUrl,
-          props.task,
-          new aggregators.MeanAggregator(),
-        )
-      : new clients.federated.FederatedClient(
-          CONFIG.serverUrl,
-          props.task,
-          new aggregators.MeanAggregator(),
-        );
+  const client = getClient(scheme, props.task)
 
   const disco = new Disco(props.task, {
     logger: {

From 44750f271620ea15972730afd5678b1b371f19e9 Mon Sep 17 00:00:00 2001
From: Julien Vignoud <julien.vignoud@epfl.ch>
Date: Fri, 3 May 2024 16:13:27 +0200
Subject: [PATCH 02/37] Tmp: save cache model use toggle button

---
 .../src/components/training/ModelCaching.vue  | 188 +++++-------------
 1 file changed, 54 insertions(+), 134 deletions(-)

diff --git a/web-client/src/components/training/ModelCaching.vue b/web-client/src/components/training/ModelCaching.vue
index bb274cb68..7db08a70d 100644
--- a/web-client/src/components/training/ModelCaching.vue
+++ b/web-client/src/components/training/ModelCaching.vue
@@ -1,114 +1,54 @@
 <template>
   <!-- Card to load a model-->
-  <div v-if="workingModelExistsOnMount">
+  <div v-if="memoryStore.useIndexedDB && workingModelExistsOnMount">
     <IconCard>
       <template #title>
-        Join training with a previous model
+        Using an Existing Cached Model
       </template>
       <template #icon>
         <Clock />
       </template>
       <template #content>
         <!-- Restore Model -->
-        <div v-if="memoryStore.useIndexedDB && workingModelExists && !isModelCreated">
-          <div class="grid grid-cols-4 items-center justify-items-center">
-            <div class="col-span-3">
-              <div class="text-sm text-gray-500 dark:text-light">
-                Disco has cached the last model you were working on for you. Select
-                it to start training from it. Otherwise, it will be overridden
-                the next time you train the
-                {{ task.displayInformation.taskTitle }} task.<br> This model was
-                last updated the
-                <span class="text-primary-dark dark:text-primary-light">
-                  {{ dateSaved }}
-                </span>
-                at
-                <span class="text-primary-dark dark:text-primary-light">
-                  {{ hourSaved }}
-                </span>
-              </div>
-            </div>
-            <button
-              class="relative focus:outline-none"
-              @click="toggleUseWorkingModel()"
-            >
-              <div
-                class="
-                    w-12
-                    h-6
-                    transition
-                    rounded-full
-                    outline-none
-                    bg-primary-100
-                    dark:bg-primary-darker
-                  "
-              />
-              <div
-                class="
-                    absolute
-                    top-0
-                    left-0
-                    w-6
-                    h-6
-                    transition-all
-                    duration-200
-                    ease-in-out
-                    transform
-                    scale-110
-                    rounded-full
-                    shadow-sm
-                  "
-                :class="{
-                  'translate-x-0 bg-white dark:bg-primary-100':
-                    !useWorkingModel,
-                  'translate-x-6 bg-primary-light dark:bg-primary':
-                    useWorkingModel,
-                }"
-              />
-            </button>
-          </div>
-          <div class="flex pt-4 space-x-4 justify-center">
-            <button
-              class="
-                  flex
-                  items-center
-                  justify-center
-                  px-4
-                  py-2
-                  space-x-4
-                  transition-colors
-                  border
-                  rounded-md
-                  text-gray-900 border-gray-900
-                "
-              @click="saveModel()"
-            >
-              <span>Save Model</span>
-            </button>
-            <button
-              class="
-                  flex
-                  items-center
-                  justify-center
-                  px-4
-                  py-2
-                  space-x-4
-                  transition-colors
-                  border
-                  rounded-md
-                  text-gray-900 border-gray-900
-                "
-              @click="deleteModel()"
-            >
-              <span>Delete Model</span>
-            </button>
+        <div v-if="workingModelExists && !isModelCreated">
+          <div class="text-sm text-gray-500 dark:text-light">
+            Disco has cached the last model you trained, which was last updated the
+            <span class="text-primary-dark dark:text-primary-light">
+              {{ dateSaved }}
+            </span>
+            at
+            <span class="text-primary-dark dark:text-primary-light">
+              {{ hourSaved }}.
+            </span><br>
+            You can choose to continue training this model or the start from a new one. 
+            Training with a new model will overwrite the cached so you may want to save it to the model library beforehand.
+            
           </div>
-          <div class="flex items-center justify-center pt-4">
-            <CustomButton
-              @click="proceed"
-            >
-              continue training from this model
+          <!-- Buttons row container -->
+          <div class="flex items-center justify-start pt-4 space-x-4">
+            <CustomButton @click="saveModel()">
+              <span>save to library</span>
+            </CustomButton>
+            <CustomButton @click="saveModel()">
+              <span>delete cached model</span>
             </CustomButton>
+          <!-- Toggle button enabling/disabling using the cached model -->
+          <!-- <button
+            class="relative focus:outline-none flex space-x-4 pt-4 items-center"
+            @click="toggleUseWorkingModel()"
+          >
+            <span> Use the cached model </span>
+            <div class="relative focus:outline-none">
+              <div class=" w-12 h-6 transition rounded-full outline-none bg-slate-200"/>
+              <div
+                class="absolute top-0 left-0 inline-flex w-6 h-6
+                  transition-all duration-200 ease-in-out transform
+                  scale-110 rounded-full shadow-sm"
+                :class="{'translate-x-0 bg-slate-300':!useWorkingModel,
+                          'translate-x-6 bg-disco-blue':useWorkingModel}"
+              />
+            </div>
+          </button> -->
           </div>
         </div>
         <div
@@ -116,14 +56,10 @@
           class="text-sm text-gray-500"
         >
           <div v-if="memoryStore.useIndexedDB && isModelCreated">
-            A new model has been created, replacing the previous working model.
-          </div>
-          <div v-else-if="!memoryStore.useIndexedDB && workingModelExists">
-            FeAI cached the last model you were working on for you. Turn on
-            the model library (see settings) to see additional options.
+            A new model has been created.
           </div>
           <div v-else>
-            The previous working model has been deleted.
+            The cached model has been deleted.
           </div>
         </div>
       </template>
@@ -167,7 +103,7 @@ export default {
       isModelCreated: false,
       workingModelExists: false,
       workingModelExistsOnMount: false,
-      useWorkingModel: false,
+      useWorkingModel: true,
       dateSaved: '',
       hourSaved: ''
     }
@@ -194,21 +130,6 @@ export default {
       }
     }
   },
-  watch: {
-    /**
-     * When useWorkingModel changed this function is called since it is "watched"
-     */
-    useWorkingModel (): void {
-      let modelInUseMessage: string
-      if (this.useWorkingModel) {
-        modelInUseMessage = `The previous ${this.task.displayInformation.taskTitle} model has been selected. You can start training!`
-      } else {
-        modelInUseMessage = `A new ${this.task.displayInformation.taskTitle} model will be created. You can start training!`
-      }
-      const toast = toaster.open(modelInUseMessage)
-      setTimeout(toast.dismiss, 30000)
-    }
-  },
   /**
    * This method is called when the component is created
    */
@@ -227,11 +148,7 @@ export default {
           const date = 'dateSaved' in workingModelMetadata ? workingModelMetadata.dateSaved : undefined
           if (date instanceof Date) {
             const zeroPad = (number: number) => String(number).padStart(2, '0')
-            this.dateSaved = [
-              date.getDate(),
-              date.getMonth() + 1,
-              date.getFullYear()
-            ]
+            this.dateSaved = [date.getDate(), date.getMonth() + 1, date.getFullYear()]
               .map(zeroPad)
               .join('/')
             this.hourSaved = [date.getHours(), date.getMinutes()]
@@ -249,27 +166,30 @@ export default {
     async deleteModel (): Promise<void> {
       this.workingModelExists = false
       await this.memory.deleteModel(this.modelInfo)
-      toaster.success(
-        `Deleted the cached ${this.task.displayInformation.taskTitle} model.`
-      )
+      toaster.success(`Deleted the cached model successfully.`)
     },
     /**
      * Save the current working model to IndexedDB
      */
     async saveModel () {
       await this.memory.saveWorkingModel(this.modelInfo)
-      toaster.success(
-        `Saved the cached ${this.task.displayInformation.taskTitle} model to the model library`
-      )
+      toaster.success(`Saved the cached model to the model library`)
     },
     /**
      * Toggle use working model
      */
-    async toggleUseWorkingModel () {
+    async toggleUseWorkingModel() {
       this.useWorkingModel = !this.useWorkingModel
+      let modelInUseMessage: string
+      if (this.useWorkingModel) {
+        modelInUseMessage = "The cached model will be used during training."
+      } else {
+        modelInUseMessage = "A new model will be created and will overwrite the cached model."
+      }
+      toaster.info(modelInUseMessage)
     },
     /**
-     * Create a new model and overwite the IndexedDB model with the new model
+     * Create a new model and overwrite the IndexedDB model with the new model
      */
     async loadFreshModel () {
       // TODO do not force scheme

From 880ef110758ee42ef6252515a64b4fc27888fa53 Mon Sep 17 00:00:00 2001
From: Julien Vignoud <julien.vignoud@epfl.ch>
Date: Fri, 3 May 2024 16:29:28 +0200
Subject: [PATCH 03/37] Rework ModelCaching and move it to Trainer rather than
 task description

---
 web-client/src/components/pages/TaskList.vue  |  2 +-
 .../src/components/training/Description.vue   |  4 -
 .../src/components/training/ModelCaching.vue  | 95 +++++--------------
 .../src/components/training/Trainer.vue       |  8 +-
 4 files changed, 29 insertions(+), 80 deletions(-)

diff --git a/web-client/src/components/pages/TaskList.vue b/web-client/src/components/pages/TaskList.vue
index 1d0a28ceb..f1c60f54d 100644
--- a/web-client/src/components/pages/TaskList.vue
+++ b/web-client/src/components/pages/TaskList.vue
@@ -37,7 +37,7 @@
               {{ task.displayInformation.taskTitle }} - {{ task.trainingInformation.scheme }}
             </template>
             <template #text>
-              <div v-html="task.displayInformation.summary.preview"/>
+              <div v-html="task.displayInformation.summary.preview" />
             </template>
             <template #button>
               participate
diff --git a/web-client/src/components/training/Description.vue b/web-client/src/components/training/Description.vue
index c19685b6e..8f2f2dd59 100644
--- a/web-client/src/components/training/Description.vue
+++ b/web-client/src/components/training/Description.vue
@@ -68,9 +68,6 @@
         </div>
       </template>
     </DropdownCard>
-    <ModelCaching
-      :task="task"
-    />
   </div>
 </template>
 
@@ -81,7 +78,6 @@ import type { Task } from '@epfml/discojs-core'
 
 import type { FormDependency, FormField, FormSection } from '@/task_creation_form'
 import { trainingInformation, privacyParameters } from '@/task_creation_form'
-import ModelCaching from './ModelCaching.vue'
 import IconCard from '@/components/containers/IconCard.vue'
 import DropdownCard from '@/components/containers/DropdownCard.vue'
 import Tasks from '@/assets/svg/Tasks.vue'
diff --git a/web-client/src/components/training/ModelCaching.vue b/web-client/src/components/training/ModelCaching.vue
index 7db08a70d..c486a21cd 100644
--- a/web-client/src/components/training/ModelCaching.vue
+++ b/web-client/src/components/training/ModelCaching.vue
@@ -1,18 +1,24 @@
+<!-- 
+  This component is only displayed if the model library is enabled and a cached model exists.
+  It informs users that the cached model will be used by default during the next training, and let
+  them choose whether they would like to delete it and start with a new model and if they want to 
+  save the cached model to library.
+ -->
 <template>
   <!-- Card to load a model-->
-  <div v-if="memoryStore.useIndexedDB && workingModelExistsOnMount">
+  <div v-if="memoryStore.useIndexedDB && cachedModelExistsOnMount">
     <IconCard>
       <template #title>
-        Using an Existing Cached Model
+        Re-using a Cached Model
       </template>
       <template #icon>
         <Clock />
       </template>
       <template #content>
         <!-- Restore Model -->
-        <div v-if="workingModelExists && !isModelCreated">
+        <div v-if="cachedModelExists && !isNewModelCreated">
           <div class="text-sm text-gray-500 dark:text-light">
-            Disco has cached the last model you trained, which was last updated the
+            Disco has cached and will re-use the last model you trained, which was last updated the
             <span class="text-primary-dark dark:text-primary-light">
               {{ dateSaved }}
             </span>
@@ -20,8 +26,8 @@
             <span class="text-primary-dark dark:text-primary-light">
               {{ hourSaved }}.
             </span><br>
-            You can choose to continue training this model or the start from a new one. 
-            Training with a new model will overwrite the cached so you may want to save it to the model library beforehand.
+            By default this model will be reused when training but you can choose to delete it and start with an untrained one.
+            You may want to save the cached model to the model library beforehand.
             
           </div>
           <!-- Buttons row container -->
@@ -29,33 +35,16 @@
             <CustomButton @click="saveModel()">
               <span>save to library</span>
             </CustomButton>
-            <CustomButton @click="saveModel()">
+            <CustomButton @click="deleteModel()">
               <span>delete cached model</span>
             </CustomButton>
-          <!-- Toggle button enabling/disabling using the cached model -->
-          <!-- <button
-            class="relative focus:outline-none flex space-x-4 pt-4 items-center"
-            @click="toggleUseWorkingModel()"
-          >
-            <span> Use the cached model </span>
-            <div class="relative focus:outline-none">
-              <div class=" w-12 h-6 transition rounded-full outline-none bg-slate-200"/>
-              <div
-                class="absolute top-0 left-0 inline-flex w-6 h-6
-                  transition-all duration-200 ease-in-out transform
-                  scale-110 rounded-full shadow-sm"
-                :class="{'translate-x-0 bg-slate-300':!useWorkingModel,
-                          'translate-x-6 bg-disco-blue':useWorkingModel}"
-              />
-            </div>
-          </button> -->
           </div>
         </div>
         <div
           v-else
           class="text-sm text-gray-500"
         >
-          <div v-if="memoryStore.useIndexedDB && isModelCreated">
+          <div v-if="memoryStore.useIndexedDB && isNewModelCreated">
             A new model has been created.
           </div>
           <div v-else>
@@ -75,7 +64,6 @@ import type { ModelInfo, Task } from '@epfml/discojs-core'
 import { EmptyMemory, Memory, ModelType, isTask } from '@epfml/discojs-core'
 import { IndexedDB } from '@epfml/discojs'
 
-import { getClient } from '@/clients'
 import { useToaster } from '@/composables/toaster'
 import Clock from '@/assets/svg/Clock.vue'
 import IconCard from '@/components/containers/IconCard.vue'
@@ -100,25 +88,17 @@ export default {
   },
   data () {
     return {
-      isModelCreated: false,
-      workingModelExists: false,
-      workingModelExistsOnMount: false,
-      useWorkingModel: true,
+      isNewModelCreated: false,
+      // whether a cached model exists when mounting the page
+      cachedModelExistsOnMount: false,
+      // whether the cached model exists (could be deleted now)
+      cachedModelExists: false,
       dateSaved: '',
       hourSaved: ''
     }
   },
   computed: {
     ...mapStores(useMemoryStore),
-    /**
-       * Returns true if a new model needs to be created
-       */
-    shouldCreateFreshModel (): boolean {
-      return (
-        !this.isModelCreated &&
-          !(this.workingModelExists && this.useWorkingModel)
-      )
-    },
     memory (): Memory {
       return this.memoryStore.useIndexedDB ? new IndexedDB() : new EmptyMemory()
     },
@@ -143,8 +123,8 @@ export default {
       if (this.memoryStore.useIndexedDB) {
         const workingModelMetadata = await this.memory.getModelMetadata(this.modelInfo)
         if (workingModelMetadata) {
-          this.workingModelExistsOnMount = true
-          this.workingModelExists = true
+          this.cachedModelExistsOnMount = true
+          this.cachedModelExists = true
           const date = 'dateSaved' in workingModelMetadata ? workingModelMetadata.dateSaved : undefined
           if (date instanceof Date) {
             const zeroPad = (number: number) => String(number).padStart(2, '0')
@@ -164,7 +144,7 @@ export default {
      * Delete the model stored in IndexedDB corresponding to this task.
      */
     async deleteModel (): Promise<void> {
-      this.workingModelExists = false
+      this.cachedModelExists = false
       await this.memory.deleteModel(this.modelInfo)
       toaster.success(`Deleted the cached model successfully.`)
     },
@@ -175,37 +155,6 @@ export default {
       await this.memory.saveWorkingModel(this.modelInfo)
       toaster.success(`Saved the cached model to the model library`)
     },
-    /**
-     * Toggle use working model
-     */
-    async toggleUseWorkingModel() {
-      this.useWorkingModel = !this.useWorkingModel
-      let modelInUseMessage: string
-      if (this.useWorkingModel) {
-        modelInUseMessage = "The cached model will be used during training."
-      } else {
-        modelInUseMessage = "A new model will be created and will overwrite the cached model."
-      }
-      toaster.info(modelInUseMessage)
-    },
-    /**
-     * Create a new model and overwrite the IndexedDB model with the new model
-     */
-    async loadFreshModel () {
-      // TODO do not force scheme
-      const client = getClient('federated', this.task)
-
-      this.memory.updateWorkingModel(this.modelInfo, await client.getLatestModel())
-    },
-    async proceed () {
-      if (this.memoryStore.useIndexedDB && this.shouldCreateFreshModel) {
-        await this.loadFreshModel()
-        this.isModelCreated = true
-        toaster.success(
-          `A new ${this.task.displayInformation.taskTitle} model has been created. You can start training!`
-        )
-      }
-    }
   }
 }
 </script>
diff --git a/web-client/src/components/training/Trainer.vue b/web-client/src/components/training/Trainer.vue
index db0f128e1..a24bd4def 100644
--- a/web-client/src/components/training/Trainer.vue
+++ b/web-client/src/components/training/Trainer.vue
@@ -1,8 +1,12 @@
 <template>
   <div class="space-y-4 md:space-y-8">
+    <!-- If a cached model exists, display it -->
+    <ModelCaching
+      :task="task"
+    />
     <!-- Train Button -->
     <div class="flex justify-center">
-      <IconCard title-placement="center" class="w-3/5">
+      <IconCard title-placement="center">
         <template #title> Control the Training Flow </template>
         <template v-if="training === undefined" #content>
           <div class="grid grid-cols-2 gap-8">
@@ -43,10 +47,10 @@ import {
   Disco,
 } from "@epfml/discojs-core";
 import { IndexedDB } from "@epfml/discojs";
-
 import { getClient } from '@/clients'
 import { useMemoryStore } from "@/store/memory";
 import { useToaster } from "@/composables/toaster";
+import ModelCaching from './ModelCaching.vue'
 import TrainingInformation from "@/components/training/TrainingInformation.vue";
 import CustomButton from "@/components/simple/CustomButton.vue";
 import IconCard from "@/components/containers/IconCard.vue";

From b35d72e9ff1ef149ee192322e68a1e131ac9ba12 Mon Sep 17 00:00:00 2001
From: Julien Vignoud <julien.vignoud@epfl.ch>
Date: Fri, 3 May 2024 18:25:23 +0200
Subject: [PATCH 04/37] Add loss charts to the web-client training informations

---
 web-client/src/charts.ts                      |   7 +-
 .../src/components/training/Trainer.vue       |  38 ++++--
 .../training/TrainingInformation.vue          | 108 +++++++++++++++++-
 web-client/src/locales/english.ts             |   6 +-
 4 files changed, 140 insertions(+), 19 deletions(-)

diff --git a/web-client/src/charts.ts b/web-client/src/charts.ts
index 42883a3fc..4e83049e3 100644
--- a/web-client/src/charts.ts
+++ b/web-client/src/charts.ts
@@ -51,7 +51,10 @@ const chartOptions = {
     max: 100,
     min: 0,
     labels: {
-      show: false
+      show: true,
+      formatter: function (value: number) {
+        return value.toFixed(0);
+      }
     }
   },
   xaxis: {
@@ -63,7 +66,7 @@ const chartOptions = {
     show: false
   },
   tooltip: {
-    enabled: false
+    enabled: true
   }
 }
 
diff --git a/web-client/src/components/training/Trainer.vue b/web-client/src/components/training/Trainer.vue
index a24bd4def..e417f5f32 100644
--- a/web-client/src/components/training/Trainer.vue
+++ b/web-client/src/components/training/Trainer.vue
@@ -1,14 +1,16 @@
 <template>
   <div class="space-y-4 md:space-y-8">
     <!-- If a cached model exists, display it -->
-    <ModelCaching
-      :task="task"
-    />
+    <div v-if="displayModelCaching">
+      <ModelCaching
+        :task="task"
+      />
+    </div>
     <!-- Train Button -->
     <div class="flex justify-center">
       <IconCard title-placement="center">
         <template #title> Control the Training Flow </template>
-        <template v-if="training === undefined" #content>
+        <template v-if="trainingLogs === undefined" #content>
           <div class="grid grid-cols-2 gap-8">
             <CustomButton @click="startTraining(false)">
               train alone
@@ -63,7 +65,9 @@ const props = defineProps<{
   datasetBuilder: data.DatasetBuilder<File>;
 }>();
 
-const training =
+const displayModelCaching = ref(true)
+
+const trainingLogs =
   ref<AsyncGenerator<RoundLogs & { participants: number }, void>>();
 const logs = ref(List<RoundLogs & { participants: number }>());
 const messages = ref(List<string>());
@@ -72,7 +76,14 @@ const hasValidationData = computed(
   () => props.task.trainingInformation.validationSplit > 0,
 );
 
+function resetTrainingInformation() {
+  trainingLogs.value = undefined
+  logs.value = List<RoundLogs & { participants: number }>()
+  messages.value = List<string>()
+}
+
 async function startTraining(distributed: boolean): Promise<void> {
+  resetTrainingInformation()
   let dataset: data.DataSplit;
   try {
     dataset = await props.datasetBuilder.build({
@@ -118,30 +129,33 @@ async function startTraining(distributed: boolean): Promise<void> {
   });
 
   try {
-    training.value = disco.fit(dataset);
+    displayModelCaching.value= false // hide model caching buttons during training
+    trainingLogs.value = disco.fit(dataset);
     logs.value = List<RoundLogs & { participants: number }>();
-    for await (const roundLogs of training.value)
+    for await (const roundLogs of trainingLogs.value)
       logs.value = logs.value.push(roundLogs);
 
-    if (training.value === undefined) {
-      toaster.success("Training stopped");
+    if (trainingLogs.value === undefined) {
+      toaster.info("Training stopped");
       return;
     }
   } catch (e) {
     toaster.error("An error occurred during training");
     console.error(e);
+    return
   } finally {
-    training.value = undefined;
+    displayModelCaching.value = true // show model caching buttons again after training
+    trainingLogs.value = undefined;
   }
 
   toaster.success("Training successfully completed");
 }
 
 async function stopTraining(): Promise<void> {
-  const generator = training.value;
+  const generator = trainingLogs.value;
   if (generator === undefined) return;
 
-  training.value = undefined;
+  trainingLogs.value = undefined;
   generator.return();
 }
 </script>
diff --git a/web-client/src/components/training/TrainingInformation.vue b/web-client/src/components/training/TrainingInformation.vue
index e01dabf0a..de26500a6 100644
--- a/web-client/src/components/training/TrainingInformation.vue
+++ b/web-client/src/components/training/TrainingInformation.vue
@@ -37,6 +37,69 @@
       </IconCardSmall>
     </div>
 
+    <!-- Training and validation loss charts -->
+    <div
+      class="flex flex-col md:grid gap-4 md:gap-8"
+      :class="hasValidationData ? 'md:grid-cols-2' : ''"
+    >
+      <!-- Training Accuracy users chart -->
+      <IconCard>
+        <!-- Card header -->
+        <template #title>
+          {{
+            $t('training.trainingInformationFrame.accuracyCharts.trainingLossHeader')
+          }}
+        </template>
+        <template #content>
+          <span class="text-2xl font-medium text-slate-500">
+            {{ (latestEpoch?.training.loss ?? 0).toFixed(2) }}
+          </span>
+          <span class="text-sm font-medium text-slate-500">
+            {{
+              $t('training.trainingInformationFrame.accuracyCharts.trainingLossText')
+            }}
+          </span>
+          <!-- Chart -->
+          <ApexChart
+            width="100%"
+            height="200"
+            type="area"
+            :options="lossChartsOptions"
+            :series="[{ name: 'Training loss', data: lossSeries.training }]"
+          />
+        </template>
+      </IconCard>
+
+      <!-- Validation Loss users chart -->
+      <IconCard
+        v-if="hasValidationData"
+      >
+        <!-- Card header -->
+        <template #title>
+          {{
+            $t('training.trainingInformationFrame.accuracyCharts.validationLossHeader')
+          }}
+        </template>
+        <template #content>
+          <span class="text-2xl font-medium text-slate-500">
+            {{ (latestEpoch?.validation?.loss ?? 0).toFixed(2) }}
+          </span>
+          <span class="text-sm font-medium text-slate-500">
+            {{
+              $t('training.trainingInformationFrame.accuracyCharts.validationLossText')
+            }}
+          </span>
+          <!-- Chart -->
+          <ApexChart
+            width="100%"
+            height="200"
+            type="area"
+            :options="lossChartsOptions"
+            :series="[{ name: 'Validation loss', data: lossSeries.validation }]"
+          />
+        </template>
+      </IconCard>
+    </div>
     <!-- Training and validation accuracy charts -->
     <div
       class="flex flex-col md:grid gap-4 md:gap-8"
@@ -65,7 +128,7 @@
             height="200"
             type="area"
             :options="options"
-            :series="[{ data: accuracySeries.training }]"
+            :series="[{ name: 'Training accuracy', data: accuracySeries.training }]"
           />
         </template>
       </IconCard>
@@ -95,7 +158,7 @@
             height="200"
             type="area"
             :options="options"
-            :series="[{ data: accuracySeries.validation }]"
+            :series="[{ name: 'Validation accuracy', data: accuracySeries.validation }]"
           />
         </template>
       </IconCard>
@@ -134,10 +197,10 @@ import { List } from 'immutable'
 import { computed } from 'vue'
 // @ts-expect-error waiting for vue3-apexcharts#98
 import ApexChart from "vue3-apexcharts";
+import { chartOptions } from '@/charts'
 
 import type { RoundLogs } from '@epfml/discojs-core'
 
-import { chartOptions } from '@/charts'
 import IconCardSmall from '@/components/containers/IconCardSmall.vue'
 import IconCard from '@/components/containers/IconCard.vue'
 import Timer from '@/assets/svg/Timer.vue'
@@ -171,7 +234,6 @@ const accuracySeries = computed(() => props.logs
       validation: (epoch.validation?.accuracy ?? 0) * 100,
     }})
   )
-  .takeLast(10)
   .reduce(({ training, validation }, cur) => { return {
     training: training.concat([cur.training]),
     validation: validation.concat([cur.validation]),
@@ -180,6 +242,44 @@ const accuracySeries = computed(() => props.logs
     validation: [] as number[],
   })
 )
+const lossSeries = computed(() => props.logs
+  .flatMap((round) =>
+    round.epochs.map((epoch) => { return {
+      training: epoch.training.loss,
+      validation: (epoch.validation?.loss ?? 0),
+    }})
+  )
+  .reduce(({ training, validation }, cur) => { return {
+    training: training.concat([cur.training]),
+    validation: validation.concat([cur.validation]),
+  }}, {
+    training: [] as number[],
+    validation: [] as number[],
+  })
+)
+
+const yAxisMax = computed(() => {
+  let maxVal = Math.max(...[...lossSeries.value.training, ...lossSeries.value.validation])
+  return (maxVal > 0) ? maxVal : 10 // if Math.max returns -inf or 0, set the max to 10 arbitrarily
+})
+
+const lossChartsOptions = computed(() => {
+  return {
+    ...options,
+    ...{
+      yaxis: {
+        max: () => yAxisMax.value,
+        min: 0,
+        labels: {
+          show: true,
+          formatter: function (value: number) {
+            return value.toFixed(2);
+          }
+        }
+      }
+    }
+  }
+})
 
 function percent(n: number): string {
   return (n * 100).toFixed(2)
diff --git a/web-client/src/locales/english.ts b/web-client/src/locales/english.ts
index ed0e062b7..a5c08fa60 100644
--- a/web-client/src/locales/english.ts
+++ b/web-client/src/locales/english.ts
@@ -119,8 +119,12 @@ export default {
       accuracyCharts: {
         validationAccuracyHeader: 'Validation Accuracy of the Model',
         validationAccuracyText: '% of validation accuracy',
+        validationLossHeader: 'Validation Loss of the Model',
+        validationLossText: ' validation loss',
         trainingAccuracyHeader: 'Training Accuracy of the Model',
-        trainingAccuracyText: '% of training accuracy'
+        trainingAccuracyText: '% of training accuracy',
+        trainingLossHeader: 'Training Loss of the Model',
+        trainingLossText: ' training loss'
       },
       trainingInformations: {
         trainingConsoleHeader: 'Peer Training Console',

From 9aa6d0c5fa8f0e01988f94a2fb82d49aca45bce0 Mon Sep 17 00:00:00 2001
From: Julien Vignoud <julien.vignoud@epfl.ch>
Date: Mon, 6 May 2024 11:46:27 +0200
Subject: [PATCH 05/37] Clean and refactor default tasks tests

---
 .../src/dataset/data/image_data.spec.ts       | 16 ++-----
 .../preprocessing/text_preprocessing.spec.ts  |  5 ++-
 .../src/dataset/data/tabular_data.spec.ts     | 37 ++++------------
 .../src/default_tasks/lus_covid.ts            |  4 +-
 .../src/data/tabular_loader.spec.ts           | 42 +++++--------------
 server/tests/client/federated.spec.ts         |  5 ++-
 6 files changed, 32 insertions(+), 77 deletions(-)

diff --git a/discojs/discojs-core/src/dataset/data/image_data.spec.ts b/discojs/discojs-core/src/dataset/data/image_data.spec.ts
index db4fe0392..72386914e 100644
--- a/discojs/discojs-core/src/dataset/data/image_data.spec.ts
+++ b/discojs/discojs-core/src/dataset/data/image_data.spec.ts
@@ -2,21 +2,13 @@ import { assert, expect } from 'chai'
 import * as tf from '@tensorflow/tfjs'
 
 import { ImageData } from './image_data.js'
-import type { Task } from '../../index.js'
+import { defaultTasks } from '../../index.js'
 
 describe('image data checks', () => {
-  const simplefaceMock: Task = {
-    id: 'simpleface',
-    displayInformation: {},
-    trainingInformation: {
-      IMAGE_H: 200,
-      IMAGE_W: 200
-    }
-  } as unknown as Task
-
+  const simpleFaceTask = defaultTasks.simpleFace.getTask()
   it('throw an error on incorrectly formatted data', async () => {
     try {
-      await ImageData.init(tf.data.array([tf.zeros([150, 150, 3]), tf.zeros([150, 150, 3])]), simplefaceMock, 3)
+      await ImageData.init(tf.data.array([tf.zeros([150, 150, 3]), tf.zeros([150, 150, 3])]), simpleFaceTask, 3)
     } catch (e) {
       expect(e).to.be.an.instanceOf(Error)
       return
@@ -26,6 +18,6 @@ describe('image data checks', () => {
   })
 
   it('do nothing on correctly formatted data', async () => {
-    await ImageData.init(tf.data.array([tf.zeros([200, 200, 3]), tf.zeros([200, 200, 3])]), simplefaceMock, 3)
+    await ImageData.init(tf.data.array([tf.zeros([200, 200, 3]), tf.zeros([200, 200, 3])]), simpleFaceTask, 3)
   })
 })
diff --git a/discojs/discojs-core/src/dataset/data/preprocessing/text_preprocessing.spec.ts b/discojs/discojs-core/src/dataset/data/preprocessing/text_preprocessing.spec.ts
index c6b40e925..794626ea1 100644
--- a/discojs/discojs-core/src/dataset/data/preprocessing/text_preprocessing.spec.ts
+++ b/discojs/discojs-core/src/dataset/data/preprocessing/text_preprocessing.spec.ts
@@ -10,7 +10,10 @@ describe('text preprocessing', function () {
   function initMockTask(): Task {
     return {
       id: 'mock-task-id',
-      displayInformation: {},
+      displayInformation: {
+      taskTitle: 'mock title',
+      summary: { overview: '', preview: '' }
+    },
       trainingInformation: {
         modelID: 'model-id',
         epochs: 1,
diff --git a/discojs/discojs-core/src/dataset/data/tabular_data.spec.ts b/discojs/discojs-core/src/dataset/data/tabular_data.spec.ts
index a0d727570..40040c3e7 100644
--- a/discojs/discojs-core/src/dataset/data/tabular_data.spec.ts
+++ b/discojs/discojs-core/src/dataset/data/tabular_data.spec.ts
@@ -3,37 +3,16 @@ import { Map, Set } from 'immutable'
 import * as tf from '@tensorflow/tfjs'
 
 import { TabularData } from './tabular_data.js'
-import type { Task } from '../../index.js'
+import { defaultTasks } from '../../index.js'
+
 
 describe('tabular data checks', () => {
-  const titanicMock: Task = {
-    id: 'titanic',
-    displayInformation: {},
-    trainingInformation: {
-      modelID: 'titanic',
-      epochs: 1,
-      roundDuration: 1,
-      validationSplit: 0,
-      batchSize: 1,
-      dataType: 'tabular',
-      scheme: 'federated',
-      inputColumns: [
-        'PassengerId',
-        'Age',
-        'SibSp',
-        'Parch',
-        'Fare',
-        'Pclass'
-      ],
-      outputColumns: [
-        'Survived'
-      ]
-    }
-  }
+  const titanicTask = defaultTasks.titanic.getTask()
+  
 
   const dataConfig = {
-    features: titanicMock.trainingInformation.inputColumns,
-    labels: titanicMock.trainingInformation.outputColumns
+    features: titanicTask.trainingInformation.inputColumns,
+    labels: titanicTask.trainingInformation.outputColumns
   }
 
   const columnConfigs = Map(
@@ -51,7 +30,7 @@ describe('tabular data checks', () => {
 
   it('throw an error on incorrectly formatted data', async () => {
     try {
-      await TabularData.init(tf.data.csv('file://../../datasets/cifar10-labels.csv', csvConfig), titanicMock, 3)
+      await TabularData.init(tf.data.csv('file://../../datasets/cifar10-labels.csv', csvConfig), titanicTask, 3)
     } catch (e) {
       expect(e).to.be.an.instanceOf(Error)
       return
@@ -61,6 +40,6 @@ describe('tabular data checks', () => {
   })
 
   it('do nothing on correctly formatted data', async () => {
-    await TabularData.init(tf.data.csv('file://../../datasets/titanic_train.csv', csvConfig), titanicMock, 3)
+    await TabularData.init(tf.data.csv('file://../../datasets/titanic_train.csv', csvConfig), titanicTask, 3)
   })
 })
diff --git a/discojs/discojs-core/src/default_tasks/lus_covid.ts b/discojs/discojs-core/src/default_tasks/lus_covid.ts
index f2404c437..5499138a7 100644
--- a/discojs/discojs-core/src/default_tasks/lus_covid.ts
+++ b/discojs/discojs-core/src/default_tasks/lus_covid.ts
@@ -23,14 +23,14 @@ export const lusCovid: TaskProvider = {
         modelID: 'lus-covid-model',
         epochs: 50,
         roundDuration: 2,
-        validationSplit: 0,
+        validationSplit: 0.2,
         batchSize: 5,
         IMAGE_H: 100,
         IMAGE_W: 100,
         preprocessingFunctions: [data.ImagePreprocessing.Resize, data.ImagePreprocessing.Normalize],
         LABEL_LIST: ['COVID-Positive', 'COVID-Negative'],
         dataType: 'image',
-        scheme: 'federated',
+        scheme: 'decentralized',
         noiseScale: undefined,
         clippingRadius: 20,
         decentralizedSecure: true,
diff --git a/discojs/discojs-node/src/data/tabular_loader.spec.ts b/discojs/discojs-node/src/data/tabular_loader.spec.ts
index 81dcc8fba..ae41d5159 100644
--- a/discojs/discojs-node/src/data/tabular_loader.spec.ts
+++ b/discojs/discojs-node/src/data/tabular_loader.spec.ts
@@ -1,44 +1,22 @@
 import { assert, expect } from 'chai'
 import * as tf from '@tensorflow/tfjs'
 
-import type { Task } from '@epfml/discojs-core'
+import { defaultTasks } from '@epfml/discojs-core'
 
 import { TabularLoader } from './tabular_loader.js'
 
-const inputFiles = ['../../datasets/titanic_train.csv']
-
-const titanicMock: Task = {
-  id: 'titanic',
-  displayInformation: {},
-  trainingInformation: {
-    modelID: 'titanic',
-    epochs: 1,
-    roundDuration: 1,
-    validationSplit: 0,
-    batchSize: 1,
-    dataType: 'tabular',
-    scheme: 'federated',
-    inputColumns: [
-      'PassengerId',
-      'Age',
-      'SibSp',
-      'Parch',
-      'Fare',
-      'Pclass'
-    ],
-    outputColumns: [
-      'Survived'
-    ]
-  }
-}
 
 describe('tabular loader', () => {
+  const inputFiles = ['../../datasets/titanic_train.csv']
+  
+  const titanicTask = defaultTasks.titanic.getTask()
+
   it('loads a single sample', async () => {
-    const loaded = new TabularLoader(titanicMock, ',').loadAll(
+    const loaded = new TabularLoader(titanicTask, ',').loadAll(
       inputFiles,
       {
-        features: titanicMock.trainingInformation?.inputColumns,
-        labels: titanicMock.trainingInformation?.outputColumns,
+        features: titanicTask.trainingInformation?.inputColumns,
+        labels: titanicTask.trainingInformation?.outputColumns,
         shuffle: false
       }
     )
@@ -50,7 +28,7 @@ describe('tabular loader', () => {
      */
     expect(sample).to.eql({
       value: {
-        xs: [1, 3, 22, 1, 0, 7.25],
+        xs: [3, 22, 1, 0, 7.25],
         ys: [0]
       },
       done: false
@@ -58,7 +36,7 @@ describe('tabular loader', () => {
   })
 
   it('shuffles samples', async () => {
-    const titanic = titanicMock
+    const titanic = titanicTask
     const loader = new TabularLoader(titanic, ',')
     const config = {
       features: titanic.trainingInformation?.inputColumns,
diff --git a/server/tests/client/federated.spec.ts b/server/tests/client/federated.spec.ts
index 61d5fa884..6b768632d 100644
--- a/server/tests/client/federated.spec.ts
+++ b/server/tests/client/federated.spec.ts
@@ -37,7 +37,10 @@ describe("federated client", function () {
       url,
       {
         id: "nonValidTask",
-        displayInformation: {},
+        displayInformation: {
+          taskTitle: 'mock title',
+          summary: { overview: '', preview: '' }
+        },
         trainingInformation: {
           modelID: "irrelevant",
           epochs: 1,

From f3aa68a5d4c780557e7095aac1b6a54cabdec8d3 Mon Sep 17 00:00:00 2001
From: Julien Vignoud <julien.vignoud@epfl.ch>
Date: Mon, 6 May 2024 11:49:35 +0200
Subject: [PATCH 06/37] Fix web-client and docs/example tests

---
 docs/examples/custom_task.ts          | 6 +++++-
 web-client/cypress/e2e/training.cy.ts | 6 +++---
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/docs/examples/custom_task.ts b/docs/examples/custom_task.ts
index 064813ba6..873fb4e38 100644
--- a/docs/examples/custom_task.ts
+++ b/docs/examples/custom_task.ts
@@ -10,7 +10,11 @@ const customTask: TaskProvider = {
     return {
       id: 'custom-task',
       displayInformation: {
-        taskTitle: 'Custom task'
+        taskTitle: 'Custom task',
+        summary: {
+          preview: 'task preview',
+          overview: 'task overview'
+        }
       },
       trainingInformation: {
         modelID: 'custom-model',
diff --git a/web-client/cypress/e2e/training.cy.ts b/web-client/cypress/e2e/training.cy.ts
index 7241f68fb..37010dcd1 100644
--- a/web-client/cypress/e2e/training.cy.ts
+++ b/web-client/cypress/e2e/training.cy.ts
@@ -9,7 +9,7 @@ describe("training page", () => {
 
     cy.contains("button", "get started").click();
     cy.contains("button", "train").click();
-    cy.contains("button", "join").click();
+    cy.contains("button", "participate").click();
 
     const navigationButtons = 3;
     for (let i = 0; i < navigationButtons; i++) {
@@ -26,7 +26,7 @@ describe("training page", () => {
     ]);
 
     // cypress really wants to JSON encode our buffer.
-    // to avoid that, we are replacing it directly in the reponse
+    // to avoid that, we are replacing it directly in the response
     cy.intercept(
       { hostname: "server", pathname: "/tasks/titanic/model.json" },
       { statusCode: 200 },
@@ -47,7 +47,7 @@ describe("training page", () => {
 
     cy.contains("button", "get started").click();
     cy.contains("button", "train").click();
-    cy.contains("button", "join").click();
+    cy.contains("button", "participate").click();
     cy.contains("button", "next").click();
 
     cy.contains("label", "select file").selectFile(

From 449e99402d90a292298182980e7ddc3b34e48b1f Mon Sep 17 00:00:00 2001
From: Julien Vignoud <julien.vignoud@epfl.ch>
Date: Mon, 6 May 2024 12:25:50 +0200
Subject: [PATCH 07/37] Add pre-defined task description and fix mlo logo

---
 web-client/src/components/pages/AboutUs.vue  |  6 ++----
 web-client/src/components/pages/TaskList.vue | 19 ++++++++++++++++++-
 2 files changed, 20 insertions(+), 5 deletions(-)

diff --git a/web-client/src/components/pages/AboutUs.vue b/web-client/src/components/pages/AboutUs.vue
index c7bbd5a64..b7daa6e7e 100644
--- a/web-client/src/components/pages/AboutUs.vue
+++ b/web-client/src/components/pages/AboutUs.vue
@@ -15,7 +15,7 @@
         >
           About Us
         </h6>
-        <img :src="mloLogo">
+        <img src="../../assets/images/mlologo.png">
         <ul class="text-lg ont-semibold text-gray-500 dark:text-light p-4">
           This app was developed in the Machine Learning and Optimization
           Laboratory at EPFL.
@@ -58,7 +58,5 @@
 </template>
 
 <script lang="ts" setup>
-import Card from '@/components/containers/Card.vue'
-
-const mloLogo = require('../../assets/images/mlologo.png')
+  import Card from '@/components/containers/Card.vue'
 </script>
diff --git a/web-client/src/components/pages/TaskList.vue b/web-client/src/components/pages/TaskList.vue
index f1c60f54d..a802206ef 100644
--- a/web-client/src/components/pages/TaskList.vue
+++ b/web-client/src/components/pages/TaskList.vue
@@ -22,10 +22,24 @@
       <div
         id="tasks"
         class="contents"
+        v-show="sortedTasks.length > 0"
       >
+        <IconCard class="justify-self-center w-full">
+        <template #title>
+          What are DISCOllaboratives?
+        </template>
+          <template #icon>
+            <Tasks/>
+          </template>
+          <template #content>
+          DISCOllaboratives are pre-defined machine learning tasks, such as diagnosing COVID from ultrasounds or classifying hand written digits, that benefits from your data. 
+          By participating, you can either choose to train a model on your own data or join a collaborative training session. Here you can get a sense of how DISCO can be useful and how it works.
+          If you want to bring your own collaborative task into DISCO, you can do so by creating a new DISCOllaborative from the home page.
+          <br/><br/> <b>The data you connect is never uploaded or shared with anyone and always stays on your computer.</b>
+          </template>
+        </IconCard>
         <div
           v-for="task in sortedTasks"
-          v-show="sortedTasks.length > 0"
           :id="task.id"
           :key="task.id"
         >
@@ -59,6 +73,9 @@ import type { Task } from '@epfml/discojs-core'
 import { useTasksStore } from '@/store/tasks'
 import { useTrainingStore } from '@/store/training'
 import ButtonCard from '@/components/containers/ButtonCard.vue'
+import IconCard from '@/components/containers/IconCard.vue'
+import Tasks from '@/assets/svg/Tasks.vue'
+
 
 const router = useRouter()
 const trainingStore = useTrainingStore()

From 6af385d8afac128aebbf25a9ee637fe72ba09edf Mon Sep 17 00:00:00 2001
From: Julien Vignoud <julien.vignoud@epfl.ch>
Date: Mon, 6 May 2024 13:06:59 +0200
Subject: [PATCH 08/37] Add data selection description

---
 .../data/dataset_input/DatasetInput.vue       | 31 ++++++++++++-------
 web-client/src/components/pages/TaskList.vue  |  6 ++--
 .../src/components/training/Description.vue   |  2 +-
 3 files changed, 23 insertions(+), 16 deletions(-)

diff --git a/web-client/src/components/data/dataset_input/DatasetInput.vue b/web-client/src/components/data/dataset_input/DatasetInput.vue
index 1483d4fda..2f574d112 100644
--- a/web-client/src/components/data/dataset_input/DatasetInput.vue
+++ b/web-client/src/components/data/dataset_input/DatasetInput.vue
@@ -24,31 +24,38 @@
       <div class="flex justify-center">
         <IconCard title-placement="center">
           <template #title>
-            Select labels by
+            Connect your Data
           </template>
           <template #content>
-            <div class="inline-flex">
+            <div class="flex flex-col">
+            <div class="mb-5 text-left">
+              Disco needs to know where your data is located on your computer to train models. You can connect them by selecting the location of each data category or by submitting a csv file.
+              Models are trained on your local data and are periodically aggregated with other users' models.
+              <br/><b>Your data stays private and is never uploaded online.</b>
+            </div>
+            <div class="inline-flex justify-center">
               <button
                 class="w-40 py-2 uppercase text-lg rounded-l-lg border-2 border-disco-cyan focus:outline-none"
-                :class="!isBoxView ? 'text-white bg-disco-cyan' : 'text-disco-cyan bg-transparent'"
-                @click="isBoxView = false"
+                :class="connectImagesByGroup ? 'text-white bg-disco-cyan' : 'text-disco-cyan bg-transparent'"
+                @click="connectImagesByGroup = true"
               >
-                csv
+                group
               </button>
               <button
                 class="w-40 py-2 uppercase text-lg rounded-r-lg border-2 border-disco-cyan focus:outline-none"
-                :class="isBoxView ? 'text-white bg-disco-cyan' : 'text-disco-cyan bg-transparent'"
-                @click="isBoxView = true"
+                :class="!connectImagesByGroup ? 'text-white bg-disco-cyan' : 'text-disco-cyan bg-transparent'"
+                @click="connectImagesByGroup = false"
               >
-                group
+                csv
               </button>
             </div>
+            </div>
           </template>
         </IconCard>
       </div>
 
       <div
-        v-show="isBoxView"
+        v-show="connectImagesByGroup"
         class="grid grid-cols-1 lg:grid-cols-2 gap-4 md:gap-8"
       >
         <div
@@ -60,7 +67,7 @@
             :key="label"
           >
             <template #title>
-              Group label:&nbsp;&nbsp;&nbsp;"{{ label }}"
+              Group label:&nbsp;&nbsp;{{ label }}
             </template>
             <template #content>
               <FileSelection
@@ -77,7 +84,7 @@
         />
       </div>
       <div
-        v-show="!isBoxView"
+        v-show="!connectImagesByGroup"
         class="grid grid-cols-1 lg:grid-cols-2 gap-4 md:gap-8"
       >
         <div v-if="requireLabels">
@@ -160,7 +167,7 @@ interface Props {
 const props = defineProps<Props>()
 
 const csvRows = ref<{ filename: string, label: string }[]>()
-const isBoxView = ref<boolean>(false)
+const connectImagesByGroup = ref<boolean>(true)
 
 const requireLabels = computed(
   () => props.task.trainingInformation.LABEL_LIST !== undefined
diff --git a/web-client/src/components/pages/TaskList.vue b/web-client/src/components/pages/TaskList.vue
index a802206ef..00e930877 100644
--- a/web-client/src/components/pages/TaskList.vue
+++ b/web-client/src/components/pages/TaskList.vue
@@ -1,9 +1,9 @@
 <template>
   <div class="space-y-8 mt-8 md:mt-16">
-    <div class="flex flex-col gap-8 mt-8">
+    <div class="flex flex-col gap-4 mt-8">
       <!-- In case no tasks were retrieved, suggest reloading the page -->
       <ButtonCard
-        v-show="tasks.size === 0"
+        v-if="tasks.size === 0"
         class="mx-auto"
         @action="() => { router.go(0) }"
       >
@@ -22,7 +22,7 @@
       <div
         id="tasks"
         class="contents"
-        v-show="sortedTasks.length > 0"
+        v-else
       >
         <IconCard class="justify-self-center w-full">
         <template #title>
diff --git a/web-client/src/components/training/Description.vue b/web-client/src/components/training/Description.vue
index 8f2f2dd59..debe80112 100644
--- a/web-client/src/components/training/Description.vue
+++ b/web-client/src/components/training/Description.vue
@@ -2,7 +2,7 @@
   <div class="space-y-4 md:space-y-8">
     <IconCard>
       <template #title>
-        The Task
+        {{ props.task.displayInformation.taskTitle }}
       </template>
       <template #icon>
         <Tasks />

From aac0863cc9cd72066cec9e6f5d6ed2f5e925c1a4 Mon Sep 17 00:00:00 2001
From: Julien Vignoud <julien.vignoud@epfl.ch>
Date: Mon, 6 May 2024 17:55:01 +0200
Subject: [PATCH 09/37] Remove some default tasks and add sample dataset links
 in task displayinformation

---
 .../src/dataset/dataset_builder.ts            |   2 +-
 .../discojs-core/src/default_tasks/cifar10.ts |   5 +-
 .../discojs-core/src/default_tasks/geotags.ts |  73 -------------
 .../discojs-core/src/default_tasks/index.ts   |   2 -
 .../src/default_tasks/lus_covid.ts            |   5 +-
 .../src/default_tasks/skin_mnist.ts           | 103 ------------------
 .../src/default_tasks/wikitext.ts             |   3 +-
 .../src/task/display_information.ts           |   6 +
 8 files changed, 15 insertions(+), 184 deletions(-)
 delete mode 100644 discojs/discojs-core/src/default_tasks/geotags.ts
 delete mode 100644 discojs/discojs-core/src/default_tasks/skin_mnist.ts

diff --git a/discojs/discojs-core/src/dataset/dataset_builder.ts b/discojs/discojs-core/src/dataset/dataset_builder.ts
index 6319711e3..991ee1f1d 100644
--- a/discojs/discojs-core/src/dataset/dataset_builder.ts
+++ b/discojs/discojs-core/src/dataset/dataset_builder.ts
@@ -98,7 +98,7 @@ export class DatasetBuilder<Source> {
   async build (config?: DataConfig): Promise<DataSplit> {
     // Require that at least one source collection is non-empty, but not both
     if ((this._sources.length > 0) === (this.labelledSources.size > 0)) {
-      throw new Error('Please provide dataset input files')
+      throw new Error('Please provide dataset input files') // This error message is parsed in DatasetInput.vue
     }
 
     let dataTuple: DataSplit
diff --git a/discojs/discojs-core/src/default_tasks/cifar10.ts b/discojs/discojs-core/src/default_tasks/cifar10.ts
index 413f26baa..da66adc58 100644
--- a/discojs/discojs-core/src/default_tasks/cifar10.ts
+++ b/discojs/discojs-core/src/default_tasks/cifar10.ts
@@ -17,7 +17,8 @@ export const cifar10: TaskProvider = {
         tradeoffs: 'Training success strongly depends on label distribution',
         dataFormatInformation: 'Images should be of .png format and of size 32x32. <br> The label file should be .csv, where each row contains a file_name, class.  <br> <br> e.g. if you have images: 0.png (of a frog) and 1.png (of a car) <br> labels.csv contains: (Note that no header is needed)<br> 0.png, frog <br> 1.png, car',
         dataExampleText: 'Below you can find 10 random examples from each of the 10 classes in the dataset.',
-        dataExampleImage: 'https://storage.googleapis.com/deai-313515.appspot.com/example_training_data/cifar10-example.png'
+        dataExampleImage: 'https://storage.googleapis.com/deai-313515.appspot.com/example_training_data/cifar10-example.png',
+        sampleDatasetLink: 'https://www.kaggle.com/competitions/cifar-10/data'
       },
       trainingInformation: {
         modelID: 'cifar10-model',
@@ -29,7 +30,7 @@ export const cifar10: TaskProvider = {
         preprocessingFunctions: [data.ImagePreprocessing.Resize],
         IMAGE_H: 224,
         IMAGE_W: 224,
-        LABEL_LIST: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'],
+        LABEL_LIST: ['airplane', 'automobile', 'bird', 'cat', 'deer', 'dog', 'frog', 'horse', 'ship', 'truck'],
         scheme: 'decentralized',
         noiseScale: undefined,
         clippingRadius: 20,
diff --git a/discojs/discojs-core/src/default_tasks/geotags.ts b/discojs/discojs-core/src/default_tasks/geotags.ts
deleted file mode 100644
index 14e24c004..000000000
--- a/discojs/discojs-core/src/default_tasks/geotags.ts
+++ /dev/null
@@ -1,73 +0,0 @@
-import { Range } from 'immutable'
-import * as tf from '@tensorflow/tfjs'
-
-import type { Model, Task, TaskProvider } from '../index.js'
-import { data, models } from '../index.js'
-import { LabelTypeEnum } from '../task/label_type.js'
-
-export const geotags: TaskProvider = {
-  getTask (): Task {
-    return {
-      id: 'geotags',
-      displayInformation: {
-        taskTitle: 'GeoTags',
-        summary: {
-          preview: 'In this challenge, we predict the geo-location of a photo given its pixels in terms of a cell number of a grid built on top of Switzerland',
-          overview: 'The geotags dataset is a collection of images with geo-location information used to train a machine learning algorithm to predict the location of a photo given its pixels.'
-        },
-        limitations: 'The training data is limited to images of size 224x224.',
-        tradeoffs: 'Training success strongly depends on label distribution',
-        dataFormatInformation: 'Images should be of .png format and of size 224x224. <br> The label file should be .csv, where each row contains a file_name, class.  The class is the cell number of a the given grid of Switzerland. ',
-        labelDisplay: {
-          labelType: LabelTypeEnum.POLYGON_MAP,
-          mapBaseUrl: 'https://disco-polygon.web.app/'
-        }
-      },
-      trainingInformation: {
-        modelID: 'geotags-model',
-        epochs: 10,
-        roundDuration: 10,
-        validationSplit: 0.2,
-        batchSize: 10,
-        dataType: 'image',
-        IMAGE_H: 224,
-        IMAGE_W: 224,
-        preprocessingFunctions: [data.ImagePreprocessing.Resize],
-        LABEL_LIST: Range(0, 127).map(String).toArray(),
-        scheme: 'federated',
-        noiseScale: undefined,
-        clippingRadius: 20,
-        decentralizedSecure: true,
-        minimumReadyPeers: 3,
-        maxShareValue: 100
-      }
-    }
-  },
-
-  async getModel (): Promise<Model> {
-    const pretrainedModel = await tf.loadLayersModel(
-      'https://storage.googleapis.com/deai-313515.appspot.com/models/geotags/model.json'
-    )
-
-    const numLayers = pretrainedModel.layers.length
-
-    pretrainedModel.layers.forEach(layer => { layer.trainable = false })
-    pretrainedModel.layers[numLayers - 1].trainable = true
-
-    const model = tf.sequential({
-      layers: [
-        tf.layers.inputLayer({ inputShape: [224, 224, 3] }),
-        tf.layers.rescaling({ scale: 1 / 127.5, offset: -1 }), // Rescaling input between -1 and 1
-        pretrainedModel
-      ]
-    })
-
-    model.compile({
-      optimizer: 'adam',
-      loss: 'categoricalCrossentropy',
-      metrics: ['accuracy']
-    })
-
-    return new models.TFJS(model)
-  }
-}
diff --git a/discojs/discojs-core/src/default_tasks/index.ts b/discojs/discojs-core/src/default_tasks/index.ts
index e85e0f216..7ee583f1f 100644
--- a/discojs/discojs-core/src/default_tasks/index.ts
+++ b/discojs/discojs-core/src/default_tasks/index.ts
@@ -1,8 +1,6 @@
 export { cifar10 } from './cifar10.js'
-export { geotags } from './geotags.js'
 export { lusCovid } from './lus_covid.js'
 export { mnist } from './mnist.js'
 export { simpleFace } from './simple_face.js'
-export { skinMnist } from './skin_mnist.js'
 export { titanic } from './titanic.js'
 export { wikitext } from './wikitext.js'
diff --git a/discojs/discojs-core/src/default_tasks/lus_covid.ts b/discojs/discojs-core/src/default_tasks/lus_covid.ts
index 5499138a7..54492dbc6 100644
--- a/discojs/discojs-core/src/default_tasks/lus_covid.ts
+++ b/discojs/discojs-core/src/default_tasks/lus_covid.ts
@@ -17,7 +17,8 @@ export const lusCovid: TaskProvider = {
         tradeoffs: 'We are using a simpler version of DeepChest in order to be able to run it on the browser.',
         dataFormatInformation: 'This model takes as input an image dataset. It consists on a set of lung ultrasound images per patient with its corresponding label of covid positive or negative. Moreover, to identify the images per patient you have to follow the follwing naming pattern: "patientId_*.png"',
         dataExampleText: 'Below you can find an example of an expected lung image for patient 2 named: 2_QAID_1.masked.reshaped.squared.224.png',
-        dataExampleImage: 'https://storage.googleapis.com/deai-313515.appspot.com/example_training_data/2_QAID_1.masked.reshaped.squared.224.png'
+        dataExampleImage: 'https://storage.googleapis.com/deai-313515.appspot.com/example_training_data/2_QAID_1.masked.reshaped.squared.224.png',
+        sampleDatasetLink: 'https://drive.switch.ch/index.php/s/zM5ZrUWK3taaIly'
       },
       trainingInformation: {
         modelID: 'lus-covid-model',
@@ -30,7 +31,7 @@ export const lusCovid: TaskProvider = {
         preprocessingFunctions: [data.ImagePreprocessing.Resize, data.ImagePreprocessing.Normalize],
         LABEL_LIST: ['COVID-Positive', 'COVID-Negative'],
         dataType: 'image',
-        scheme: 'decentralized',
+        scheme: 'federated',
         noiseScale: undefined,
         clippingRadius: 20,
         decentralizedSecure: true,
diff --git a/discojs/discojs-core/src/default_tasks/skin_mnist.ts b/discojs/discojs-core/src/default_tasks/skin_mnist.ts
deleted file mode 100644
index 73a682ab4..000000000
--- a/discojs/discojs-core/src/default_tasks/skin_mnist.ts
+++ /dev/null
@@ -1,103 +0,0 @@
-import * as tf from '@tensorflow/tfjs'
-
-import type { Model, Task, TaskProvider } from '../index.js'
-import { data, models } from '../index.js'
-
-export const skinMnist: TaskProvider = {
-  getTask (): Task {
-    return {
-      id: 'skin_mnist',
-      displayInformation: {
-        taskTitle: 'Skin disease classification',
-        summary: {
-          preview: 'Can you determine the skin disease from the dermatoscopic images?',
-          overview:
-            'HAM10000 "Human Against Machine with 10000 training images" dataset is a large collection of multi-source dermatoscopic images of pigmented lesions from Kaggle'
-        },
-        limitations:
-          'The training data is limited to small images of size 28x28, similarly to the MNIST dataset.',
-        tradeoffs: 'Training success strongly depends on label distribution',
-        dataFormatInformation: '',
-        dataExampleText: 'Below you find an example',
-        dataExampleImage: 'http://walidbn.com/ISIC_0024306.jpg'
-      },
-      trainingInformation: {
-        modelID: 'skin_mnist-model',
-        epochs: 50,
-        roundDuration: 1,
-        validationSplit: 0.1,
-        batchSize: 32,
-        preprocessingFunctions: [data.ImagePreprocessing.Normalize],
-        dataType: 'image',
-        IMAGE_H: 28,
-        IMAGE_W: 28,
-        LABEL_LIST: [
-          'Melanocytic nevi',
-          'Melanoma',
-          'Benign keratosis-like lesions',
-          'Basal cell carcinoma',
-          'Actinic keratoses',
-          'Vascular lesions',
-          'Dermatofibroma'
-        ],
-        scheme: 'federated',
-        noiseScale: undefined,
-        clippingRadius: undefined
-      }
-    }
-  },
-
-  getModel (): Promise<Model> {
-    const numClasses = 7
-    const size = 28
-
-    const model = tf.sequential()
-
-    model.add(
-      tf.layers.conv2d({
-        inputShape: [size, size, 3],
-        filters: 256,
-        kernelSize: 3,
-        activation: 'relu'
-      })
-    )
-
-    model.add(tf.layers.maxPooling2d({ poolSize: [2, 2] }))
-    model.add(tf.layers.dropout({ rate: 0.3 }))
-
-    model.add(
-      tf.layers.conv2d({
-        filters: 128,
-        kernelSize: 3,
-        activation: 'relu'
-      })
-    )
-
-    model.add(tf.layers.maxPooling2d({ poolSize: [2, 2] }))
-    model.add(tf.layers.dropout({ rate: 0.3 }))
-
-    model.add(
-      tf.layers.conv2d({
-        filters: 64,
-        kernelSize: 3,
-        activation: 'relu'
-      })
-    )
-
-    model.add(tf.layers.maxPooling2d({ poolSize: [2, 2] }))
-    model.add(tf.layers.dropout({ rate: 0.3 }))
-
-    model.add(tf.layers.flatten())
-
-    model.add(tf.layers.dense({ units: 32 }))
-    model.add(tf.layers.dense({ units: numClasses, activation: 'softmax' }))
-
-    model.compile({
-      optimizer: tf.train.adam(0.001),
-      loss: 'categoricalCrossentropy',
-      metrics: ['accuracy']
-    })
-
-    return Promise.resolve(new models.TFJS(model))
-  }
-}
diff --git a/discojs/discojs-core/src/default_tasks/wikitext.ts b/discojs/discojs-core/src/default_tasks/wikitext.ts
index 7f80f2db5..22671e9de 100644
--- a/discojs/discojs-core/src/default_tasks/wikitext.ts
+++ b/discojs/discojs-core/src/default_tasks/wikitext.ts
@@ -14,7 +14,8 @@ export const wikitext: TaskProvider = {
         limitations: 'The dataset may contain noise, inconsistencies, and unstructured content due to its raw nature, potentially posing challenges for certain NLP tasks.',
         tradeoffs: 'The raw format may lack structured annotations and may require additional preprocessing for specific applications.',
         dataFormatInformation: 'The dataset is organized as a large text file, with each line representing a segment of raw text from Wikipedia articles.',
-        dataExampleText: 'An example excerpt from the dataset could be: "The history of artificial intelligence dates back to ancient times, with philosophical discussions on the nature of thought and reasoning."'
+        dataExampleText: 'An example excerpt from the dataset could be: "The history of artificial intelligence dates back to ancient times, with philosophical discussions on the nature of thought and reasoning."',
+        sampleDatasetLink: 'https://dax-cdn.cdn.appdomain.cloud/dax-wikitext-103/1.0.1/wikitext-103.tar.gz'
       },
       trainingInformation: {
         dataType: 'text',
diff --git a/discojs/discojs-core/src/task/display_information.ts b/discojs/discojs-core/src/task/display_information.ts
index fe154e568..d39bbec8d 100644
--- a/discojs/discojs-core/src/task/display_information.ts
+++ b/discojs/discojs-core/src/task/display_information.ts
@@ -14,7 +14,10 @@ export interface DisplayInformation {
   dataExample?: DataExample[]
   // TODO no need for undefined
   headers?: string[]
+  // Displays the image at this URL in the UI as an example when connecting data
   dataExampleImage?: string
+  // URL to download a dataset for the task, is displayed in the UI when asking to connect data
+  sampleDatasetLink?: string
   limitations?: string
   labelDisplay?: LabelType
 }
@@ -29,6 +32,7 @@ export function isDisplayInformation (raw: unknown): raw is DisplayInformation {
     dataExampleImage,
     dataExampleText,
     dataFormatInformation,
+    sampleDatasetLink,
     headers,
     labelDisplay,
     limitations,
@@ -41,6 +45,7 @@ export function isDisplayInformation (raw: unknown): raw is DisplayInformation {
   if (
     typeof taskTitle !== 'string' ||
     (dataExampleText !== undefined && typeof dataExampleText !== 'string') ||
+    (sampleDatasetLink !== undefined && typeof sampleDatasetLink !== 'string') ||
     (dataFormatInformation !== undefined && typeof dataFormatInformation !== 'string') ||
     (tradeoffs !== undefined && typeof tradeoffs !== 'string') ||
     (model !== undefined && typeof model !== 'string') ||
@@ -75,6 +80,7 @@ export function isDisplayInformation (raw: unknown): raw is DisplayInformation {
     dataExampleImage,
     dataExampleText,
     dataFormatInformation,
+    sampleDatasetLink,
     headers,
     labelDisplay,
     limitations,

From e3aa0b461cb661c0d7c37257779e7f8290941787 Mon Sep 17 00:00:00 2001
From: Julien Vignoud <julien.vignoud@epfl.ch>
Date: Mon, 6 May 2024 17:56:29 +0200
Subject: [PATCH 10/37] Reword home page text

---
 web-client/src/components/home/GetStarted.vue | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/web-client/src/components/home/GetStarted.vue b/web-client/src/components/home/GetStarted.vue
index f36beab32..3b67985f2 100644
--- a/web-client/src/components/home/GetStarted.vue
+++ b/web-client/src/components/home/GetStarted.vue
@@ -6,9 +6,9 @@
       @action="goToTaskList()"
     >
       <template #title>
-        Join a <span title="A group of (DIS)tributed users with similar data, (CO)llaborating to train a model"><span
+        Train a model on existing <span title="A group of (DIS)tributed users with similar data, (CO)llaborating to train a model"><span
           class="font-disco text-disco-cyan"
-        >DISCO</span>llaborative</span> to train a model
+        >DISCO</span>llaboratives</span>
       </template>
       <template #button>
         train
@@ -20,7 +20,7 @@
       @action="goToModelTesting()"
     >
       <template #title>
-        Evaluate your <span class="font-disco text-disco-cyan">DISCO</span>-trained model
+        Evaluate or download a <span class="font-disco text-disco-cyan">DISCO</span>-trained model
       </template>
       <template #button>
         evaluate
@@ -32,7 +32,9 @@
       @action="goToNewTaskCreationForm()"
     >
       <template #title>
-        Add your own ML task to be trained in <span class="font-disco text-disco-cyan">DISCO</span>
+        Add your own ML task to the <span title="A group of (DIS)tributed users with similar data, (CO)llaborating to train a model"><span
+          class="font-disco text-disco-cyan"
+        >DISCO</span>llaboratives</span>
       </template>
       <template #button>
         create

From 874292bf4ed66e75015f575d467e275961615f26 Mon Sep 17 00:00:00 2001
From: Julien Vignoud <julien.vignoud@epfl.ch>
Date: Mon, 6 May 2024 17:56:50 +0200
Subject: [PATCH 11/37] Bug fix and add error handling to data selection UI

---
 .../data/dataset_input/DatasetInput.vue       | 91 +++++++++++--------
 .../data/dataset_input/FileSelection.vue      |  4 +-
 .../src/components/training/Trainer.vue       |  2 +
 3 files changed, 60 insertions(+), 37 deletions(-)

diff --git a/web-client/src/components/data/dataset_input/DatasetInput.vue b/web-client/src/components/data/dataset_input/DatasetInput.vue
index 2f574d112..b55698950 100644
--- a/web-client/src/components/data/dataset_input/DatasetInput.vue
+++ b/web-client/src/components/data/dataset_input/DatasetInput.vue
@@ -1,39 +1,41 @@
+<!-- 
+  DatasetInput is a component used to connect data to DISCO before training, evaluation and prediction
+  Its behavior is different depending on the type of data and whether it is used for training of inference
+-->
 <template>
   <div class="grid grid-cols-1">
     <IconCard
-      v-if="['tabular', 'text'].includes(task.trainingInformation.dataType) || isOnlyPrediction"
       class="justify-self-center w-full"
     >
       <template #title>
-        My dataset
+        Connect your data
       </template>
       <template #icon>
         <Upload />
       </template>
       <template #content>
+        <div  class="mb-5 text-left" v-show="props.task.displayInformation.sampleDatasetLink !== undefined">
+            <b>Don't have any data?</b> You can download a dataset <a  class='underline' :href="props.task.displayInformation.sampleDatasetLink">here</a>.
+          </div>
+          <div class="mb-5 text-left">
+            Disco needs to know where your data is located to train models. You can connect them by selecting the location of each data category or by submitting a csv file.
+            Models are trained on your local data and are periodically aggregated with other users' models.
+            <br/><br/><b>Your data stays private and is never uploaded online.</b>
+          </div>
+        <!-- If the task data type is tabular, text or if we are doing inference only, then display a single drag and drop box -->
         <FileSelection
+          v-if="['tabular', 'text'].includes(task.trainingInformation.dataType) || isOnlyPrediction"
           @input="addFiles($event)"
           @clear="clearFiles()"
         />
-      </template>
-    </IconCard>
-    <div
-      v-else-if="task.trainingInformation.dataType === 'image'"
-      class="space-y-4 md:space-y-8"
-    >
-      <div class="flex justify-center">
-        <IconCard title-placement="center">
-          <template #title>
-            Connect your Data
-          </template>
-          <template #content>
-            <div class="flex flex-col">
-            <div class="mb-5 text-left">
-              Disco needs to know where your data is located on your computer to train models. You can connect them by selecting the location of each data category or by submitting a csv file.
-              Models are trained on your local data and are periodically aggregated with other users' models.
-              <br/><b>Your data stays private and is never uploaded online.</b>
-            </div>
-            <div class="inline-flex justify-center">
+        <!--
+          If the task data type is image then let the user choose between uploading a csv and all images at once
+          or uploading image groups by categories
+        -->
+        <div 
+          v-else-if="task.trainingInformation.dataType === 'image'"
+          class="flex justify-center"
+        >
               <button
                 class="w-40 py-2 uppercase text-lg rounded-l-lg border-2 border-disco-cyan focus:outline-none"
                 :class="connectImagesByGroup ? 'text-white bg-disco-cyan' : 'text-disco-cyan bg-transparent'"
@@ -49,11 +51,12 @@
                 csv
               </button>
             </div>
-            </div>
-          </template>
-        </IconCard>
-      </div>
-
+      </template>
+    </IconCard>
+    <div
+      v-if="task.trainingInformation.dataType === 'image'"
+      class="space-y-4 md:space-y-8 mt-8"
+    >
       <div
         v-show="connectImagesByGroup"
         class="grid grid-cols-1 lg:grid-cols-2 gap-4 md:gap-8"
@@ -101,7 +104,7 @@
                 @clear="clearCsv()"
               >
                 <template #text>
-                  The CSV file must contain a header with only two columns (file name, label). The file name must NOT include the file
+                  <b>The CSV file must contain a header with only two columns (filename, label)</b>. The file name must NOT include the file
                   extension.
                 </template>
               </FileSelection>
@@ -157,12 +160,14 @@ import { data } from '@epfml/discojs-core'
 import Upload from '@/assets/svg/Upload.vue'
 import IconCard from '@/components/containers/IconCard.vue'
 import FileSelection from './FileSelection.vue'
+import { useToaster } from '@/composables/toaster'
 
 interface Props {
   task: Task
   datasetBuilder: data.DatasetBuilder<File>
-  isOnlyPrediction: Boolean
+  isOnlyPrediction: Boolean //TODO: seems to always be false
 }
+const toaster = useToaster()
 
 const props = defineProps<Props>()
 
@@ -178,7 +183,14 @@ const cannotUploadFiles = computed(
 )
 
 const readCsv = (files: FileList) => {
-  files[0].text().then(file => { csvRows.value = d3.csvParse(file) })
+  files[0].text().then(file => {
+    csvRows.value = d3.csvParse(file)
+    if (csvRows.value[0].filename == undefined || csvRows.value[0].label == undefined) {
+      clearCsv()
+      toaster.error("The CSV file should have a header with the exact column names: filename, label.")
+      throw new Error("Invalid CSV header")
+    }
+  })
 }
 
 const addFiles = (files: FileList, label?: string) => {
@@ -191,13 +203,20 @@ const addFiles = (files: FileList, label?: string) => {
       if (csvRows.value === undefined) {
         throw new Error('adding files but not CSV rows defined')
       }
-
-      csvRows.value.forEach(row => {
-        const imageFile = filesArray.find(file => row.filename === file.name.split('.').slice(0, -1).join('.'))
-        if (imageFile) {
-          props.datasetBuilder.addFiles([imageFile], row.label)
-        }
-      })
+      try {
+        csvRows.value.forEach(row => {
+          // Match the selected files with the csv file names and label
+          const imageFile = filesArray.find(file => row.filename === file.name.split('.').slice(0, -1).join('.'))
+          if (imageFile === undefined) {
+            toaster.error("An image was not found in the CSV file, make sure the CSV filenames don't include file extensions.")
+            throw new Error("Image not found in the CSV file")
+          } else if (imageFile) {
+            props.datasetBuilder.addFiles([imageFile], row.label)
+          }
+        })
+      } catch (e){
+        console.error(e)
+      }
     }
   } else {
     props.datasetBuilder.addFiles(filesArray)
diff --git a/web-client/src/components/data/dataset_input/FileSelection.vue b/web-client/src/components/data/dataset_input/FileSelection.vue
index 272f04a06..b32c74e15 100644
--- a/web-client/src/components/data/dataset_input/FileSelection.vue
+++ b/web-client/src/components/data/dataset_input/FileSelection.vue
@@ -92,7 +92,9 @@
 
         <!-- If no preview of the selected file, display the nbr. of uploaded files -->
         <div class="pt-8 flex flex-col items-center pb-2">
-          <div class="mb-4 flex justify-center items-center text-center md:text-left sm:text-lg text-disco-blue">
+          <div 
+            v-if="selectedFiles?.length"
+            class="mb-4 flex justify-center items-center text-center md:text-left sm:text-lg text-disco-blue">
             <span v-if="isMultiple">Number of selected files: <span class="pl-1 text-xl">{{ selectedFiles?.length ?? 0 }}</span></span>
             <span v-else>Selected file: <span class="pl-1">{{ selectedFiles?.item(0)?.name ?? 'none' }}</span></span>
           </div>
diff --git a/web-client/src/components/training/Trainer.vue b/web-client/src/components/training/Trainer.vue
index e417f5f32..8c14471fd 100644
--- a/web-client/src/components/training/Trainer.vue
+++ b/web-client/src/components/training/Trainer.vue
@@ -101,6 +101,8 @@ async function startTraining(distributed: boolean): Promise<void> {
       // missing field is specified between two "quotes"
       const missingFields: String = e.message.split('"')[1].split('"')[0];
       toaster.error(`The input data is missing the field "${missingFields}"`);
+    } else if (e instanceof Error && e.message.includes("provide dataset input files")) {
+      toaster.error("First connect your data at the previous step.")
     } else {
       toaster.error(
         "Incorrect data format. Please check the expected format at the previous step.",

From bfad11e164f38ebdaac85ece58ff8ad69bf9de82 Mon Sep 17 00:00:00 2001
From: Julien Vignoud <julien.vignoud@epfl.ch>
Date: Mon, 6 May 2024 18:03:35 +0200
Subject: [PATCH 12/37] Fix web-client task test

---
 web-client/cypress/e2e/tasks.cy.ts | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/web-client/cypress/e2e/tasks.cy.ts b/web-client/cypress/e2e/tasks.cy.ts
index 6a3ea672a..9025a3f5b 100644
--- a/web-client/cypress/e2e/tasks.cy.ts
+++ b/web-client/cypress/e2e/tasks.cy.ts
@@ -5,11 +5,12 @@ describe("tasks page", () => {
     cy.intercept({ hostname: "server", pathname: "tasks" }, [
       defaultTasks.titanic.getTask(),
       defaultTasks.mnist.getTask(),
-      defaultTasks.geotags.getTask(),
+      defaultTasks.cifar10.getTask(),
     ]);
     cy.visit("/#/list");
 
-    cy.get('div[id="tasks"]').children().should("have.length", 3);
+    // Length 4 = 3 tasks and 1 div for text description
+    cy.get('div[id="tasks"]').children().should("have.length", 4);
   });
 
   it("redirects to training", () => {

From dcef3f5bf8fada084d56be7b439d062dd9dae2da Mon Sep 17 00:00:00 2001
From: Julien Vignoud <julien.vignoud@epfl.ch>
Date: Tue, 7 May 2024 11:23:22 +0200
Subject: [PATCH 13/37] Fix discojs-node image loader test

---
 discojs/discojs-node/src/data/image_loader.spec.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/discojs/discojs-node/src/data/image_loader.spec.ts b/discojs/discojs-node/src/data/image_loader.spec.ts
index 63009b645..a0beafdf7 100644
--- a/discojs/discojs-node/src/data/image_loader.spec.ts
+++ b/discojs/discojs-node/src/data/image_loader.spec.ts
@@ -84,8 +84,8 @@ describe('image loader', () => {
   })
 
   it('loads multiple samples with labels', async () => {
-    const labels = Range(0, 24).map((label) => (label % 10))
-    const stringLabels = labels.map((label) => label.toString())
+    const labels = Range(0, 24).map(_ => 3) //internally, disco maps string labels to their index in the task LABEL_LIST
+    const stringLabels = labels.map(_ => 'cat') // so cat is mapped to integer 3
     const oneHotLabels = List(tf.oneHot(labels.toArray(), 10).arraySync() as number[])
 
     const datasetContent = List(await (await LOADERS.CIFAR10

From 22e7ed2bae8aadd150394aed679f5118bb2119c7 Mon Sep 17 00:00:00 2001
From: Julien Vignoud <julien.vignoud@epfl.ch>
Date: Tue, 7 May 2024 12:04:20 +0200
Subject: [PATCH 14/37] Move model library toggle button to the model library
 panel

---
 web-client/src/components/home/GetStarted.vue |  20 +--
 web-client/src/components/pages/TaskList.vue  |  13 +-
 .../src/components/sidebar/ModelLibrary.vue   | 103 ++++++++++--
 .../src/components/sidebar/Settings.vue       | 159 ------------------
 web-client/src/components/sidebar/Sidebar.vue |  30 +---
 .../src/components/training/Finished.vue      |   2 +-
 6 files changed, 118 insertions(+), 209 deletions(-)
 delete mode 100644 web-client/src/components/sidebar/Settings.vue

diff --git a/web-client/src/components/home/GetStarted.vue b/web-client/src/components/home/GetStarted.vue
index 3b67985f2..73bfbfe40 100644
--- a/web-client/src/components/home/GetStarted.vue
+++ b/web-client/src/components/home/GetStarted.vue
@@ -14,30 +14,30 @@
         train
       </template>
     </ButtonCard>
-    <!-- Model testing -->
+    <!-- Task creation -->
     <ButtonCard
       title-placement="center"
-      @action="goToModelTesting()"
+      @action="goToNewTaskCreationForm()"
     >
       <template #title>
-        Evaluate or download a <span class="font-disco text-disco-cyan">DISCO</span>-trained model
+        Add your own ML task to the <span title="A group of (DIS)tributed users with similar data, (CO)llaborating to train a model"><span
+          class="font-disco text-disco-cyan"
+        >DISCO</span>llaboratives</span>
       </template>
       <template #button>
-        evaluate
+        create
       </template>
     </ButtonCard>
-    <!-- Task creation -->
+    <!-- Model testing -->
     <ButtonCard
       title-placement="center"
-      @action="goToNewTaskCreationForm()"
+      @action="goToModelTesting()"
     >
       <template #title>
-        Add your own ML task to the <span title="A group of (DIS)tributed users with similar data, (CO)llaborating to train a model"><span
-          class="font-disco text-disco-cyan"
-        >DISCO</span>llaboratives</span>
+        Evaluate or download a <span class="font-disco text-disco-cyan">DISCO</span>-trained model
       </template>
       <template #button>
-        create
+        evaluate
       </template>
     </ButtonCard>
   </div>
diff --git a/web-client/src/components/pages/TaskList.vue b/web-client/src/components/pages/TaskList.vue
index 00e930877..37b3849d5 100644
--- a/web-client/src/components/pages/TaskList.vue
+++ b/web-client/src/components/pages/TaskList.vue
@@ -32,9 +32,13 @@
             <Tasks/>
           </template>
           <template #content>
-          DISCOllaboratives are pre-defined machine learning tasks, such as diagnosing COVID from ultrasounds or classifying hand written digits, that benefits from your data. 
-          By participating, you can either choose to train a model on your own data or join a collaborative training session. Here you can get a sense of how DISCO can be useful and how it works.
-          If you want to bring your own collaborative task into DISCO, you can do so by creating a new DISCOllaborative from the home page.
+          DISCOllaboratives are machine learning tasks, such as diagnosing COVID from ultrasounds or classifying hand written digits, that users can join to train on their own respective data. Some are already pre-defined
+          along with some example data to let you get a sense of how to use DISCO.
+          By participating, you can either choose to train a model on your own data or join a collaborative training session with other users.
+          If you want to bring your own collaborative task into DISCO, you can do so by <button
+            class="text-blue-400"
+            @click="goToCreateTask()"
+          >creating a new DISCOllaborative</button>.
           <br/><br/> <b>The data you connect is never uploaded or shared with anyone and always stays on your computer.</b>
           </template>
         </IconCard>
@@ -90,4 +94,7 @@ const toTask = (task: Task): void => {
   router.push(`/${task.id}`)
 }
 
+const goToCreateTask = (): void => {
+  router.push({ path: '/create' })
+}
 </script>
diff --git a/web-client/src/components/sidebar/ModelLibrary.vue b/web-client/src/components/sidebar/ModelLibrary.vue
index 74cdbcf76..14f53a82b 100644
--- a/web-client/src/components/sidebar/ModelLibrary.vue
+++ b/web-client/src/components/sidebar/ModelLibrary.vue
@@ -14,15 +14,15 @@
         </template>
         <template #content>
           <span class="text-s">
-            <p v-if="memoryStore.useIndexedDB">List of trained models that were saved.</p>
+            <p v-if="memoryStore.useIndexedDB">
+              List of trained models that were saved. 
+              You can download pre-trained models in the <button
+                class="text-blue-600"
+                @click="switchToEvaluate()"
+              >Evaluation page</button>.</p>
             <p v-else>
               The model library is currently unavailable. You can turn it on in
-              the
-              <button
-                class="text-blue-600"
-                @click="switchToSettings()"
-              >
-                settings menu</button>.
+              the settings below.
             </p>
           </span>
           <div
@@ -86,6 +86,72 @@
           </div>
         </template>
       </TippyCard>
+      <div
+        class="overflow-hidden hover:overflow-y-auto"
+      >
+        <!-- IndexedDB -->
+        <TippyCard>
+          <template #title>
+            Settings
+          </template>
+          <template #content>
+            <span class="text-s">
+              Turn on to get storage options for your trained models. This uses
+              your browser's own database, namely
+              <button class="text-blue-600">
+                <a
+                  href="https://en.wikipedia.org/wiki/Indexed_Database_API"
+                  target="_blank"
+                >
+                  IndexedDB</a></button>.<br>
+            </span>
+
+            <div class="flex items-center justify-center">
+              <button
+                :class="buttonClass()"
+                @click="toggleIndexedDB()"
+              >
+                <span class="text-s"> Use model library </span>
+                <div class="relative focus:outline-none">
+                  <div
+                    class="
+                    w-12
+                    h-6
+                    transition
+                    rounded-full
+                    outline-none
+                    bg-slate-200
+                  "
+                  />
+                  <div
+                    class="
+                    absolute
+                    top-0
+                    left-0
+                    inline-flex
+                    w-6
+                    h-6
+                    transition-all
+                    duration-200
+                    ease-in-out
+                    transform
+                    scale-110
+                    rounded-full
+                    shadow-sm
+                  "
+                    :class="{
+              'translate-x-0 bg-slate-300':
+                !memoryStore.useIndexedDB,
+              'translate-x-6 bg-disco-blue':
+                memoryStore.useIndexedDB,
+            }"
+                  />
+                </div>
+              </button>
+            </div>
+          </template>
+        </TippyCard>
+      </div>
     </template>
   </TippyContainer>
 </template>
@@ -121,7 +187,7 @@ export default defineComponent({
     TippyContainer,
     ModelButton
   },
-  emits: ['switch-panel'],
+  emits: ['close-panel'],
   computed: {
     ...mapStores(useMemoryStore, useValidationStore),
 
@@ -133,8 +199,25 @@ export default defineComponent({
     await this.memoryStore.initModels()
   },
   methods: {
-    switchToSettings (): void {
-      this.$emit('switch-panel')
+    buttonClass: function (
+      state = ' ',
+      defaultClass = 'flex items-center justify-center px-4 py-2 space-x-4 transition-colors border rounded-md hover:text-slate-900 hover:border-slate-900 focus:outline-none focus:ring focus:ring-slate-900 focus:ring-offset-2'
+    ) {
+      return (
+        defaultClass +
+        (state === undefined
+          ? ' '
+          : state
+            ? ' border-slate-900 text-slate-900'
+            : ' text-slate-500')
+      )
+    },
+    toggleIndexedDB() {
+      this.memoryStore.setIndexedDB(!this.memoryStore.useIndexedDB && Boolean(window.indexedDB))
+    },
+    switchToEvaluate (): void {
+      this.$router.push({ path: '/evaluate' })
+      this.$emit('close-panel')
     },
 
     async deleteModel (path: Path): Promise<void> {
diff --git a/web-client/src/components/sidebar/Settings.vue b/web-client/src/components/sidebar/Settings.vue
deleted file mode 100644
index 550a6a70d..000000000
--- a/web-client/src/components/sidebar/Settings.vue
+++ /dev/null
@@ -1,159 +0,0 @@
-<template>
-  <TippyContainer>
-    <template #title>
-      Settings
-    </template>
-    <template #icon>
-      <SettingsIcon />
-    </template>
-    <template #content>
-      <div
-        class="overflow-hidden hover:overflow-y-auto"
-      >
-        <!-- IndexedDB -->
-        <TippyCard>
-          <template #title>
-            Model Library
-          </template>
-          <template #content>
-            <span class="text-s">
-              Turn on to get storage options for your trained models. This uses
-              your browser's own database, namely
-              <button class="text-blue-600">
-                <a
-                  href="https://en.wikipedia.org/wiki/Indexed_Database_API"
-                  target="_blank"
-                >
-                  IndexedDB</a></button>.<br>
-            </span>
-
-            <div class="flex items-center justify-center">
-              <button
-                :class="buttonClass()"
-                @click="toggleIndexedDB()"
-              >
-                <span class="text-s"> Use model library </span>
-                <div class="relative focus:outline-none">
-                  <div
-                    class="
-                    w-12
-                    h-6
-                    transition
-                    rounded-full
-                    outline-none
-                    bg-slate-200
-                  "
-                  />
-                  <div
-                    class="
-                    absolute
-                    top-0
-                    left-0
-                    inline-flex
-                    w-6
-                    h-6
-                    transition-all
-                    duration-200
-                    ease-in-out
-                    transform
-                    scale-110
-                    rounded-full
-                    shadow-sm
-                  "
-                    :class="{
-                      'translate-x-0 bg-slate-300':
-                        !memoryStore.useIndexedDB,
-                      'translate-x-6 bg-disco-blue':
-                        memoryStore.useIndexedDB,
-                    }"
-                  />
-                </div>
-              </button>
-            </div>
-          </template>
-        </TippyCard>
-        <!-- Theme
-        <TippyCard title="Theme mode">
-          <div class="flex items-center justify-center space-x-8">
-            Light button
-            <button
-              :class="buttonClass((!$store.state.isDark).toString())"
-              @click="setLightTheme"
-            >
-              <span><StarIcon /></span>
-              <span>Light</span>
-            </button>
-
-            Dark button
-            <button
-              :class="buttonClass(($store.state.isDark).toString())"
-              @click="setDarkTheme"
-            >
-              <span><MoonIcon /></span>
-              <span>Dark</span>
-            </button>
-          </div>
-        </TippyCard>
-      -->
-      </div>
-    </template>
-  </TippyContainer>
-</template>
-
-<script lang="ts">
-import { defineComponent } from 'vue'
-import { mapStores } from 'pinia'
-
-import { useMemoryStore } from '@/store/memory'
-import TippyCard from './containers/TippyCard.vue'
-import TippyContainer from './containers/TippyContainer.vue'
-// import MoonIcon from '../../assets/svg/MoonIcon.vue'
-// import StarIcon from '../../assets/svg/StarIcon.vue'
-import SettingsIcon from '../../assets/svg/SettingsIcon.vue'
-
-export default defineComponent({
-  name: 'Settings',
-  components: {
-    TippyCard,
-    TippyContainer,
-    // MoonIcon,
-    // StarIcon,
-    SettingsIcon
-  },
-  data: function () {
-    return {
-      colors: ['cyan', 'teal', 'green', 'fuchsia', 'blue', 'violet']
-    }
-  },
-  computed: {
-    ...mapStores(useMemoryStore)
-  },
-  methods: {
-    buttonClass: function (
-      state = ' ',
-      defaultClass = 'flex items-center justify-center px-4 py-2 space-x-4 transition-colors border rounded-md hover:text-slate-900 hover:border-slate-900 focus:outline-none focus:ring focus:ring-slate-900 focus:ring-offset-2'
-    ) {
-      return (
-        defaultClass +
-        (state === undefined
-          ? ' '
-          : state
-            ? ' border-slate-900 text-slate-900'
-            : ' text-slate-500')
-      )
-    },
-    toggleIndexedDB () {
-      this.memoryStore.setIndexedDB(!this.memoryStore.useIndexedDB && Boolean(window.indexedDB))
-    },
-    setBrowserTheme (value: string) {
-      window.localStorage.setItem('dark', value)
-    },
-    setLightTheme () {
-      this.setBrowserTheme('false')
-    },
-    setDarkTheme () {
-      this.setBrowserTheme('true')
-    }
-  }
-})
-</script>
diff --git a/web-client/src/components/sidebar/Sidebar.vue b/web-client/src/components/sidebar/Sidebar.vue
index 508853b3d..22a94bf9a 100644
--- a/web-client/src/components/sidebar/Sidebar.vue
+++ b/web-client/src/components/sidebar/Sidebar.vue
@@ -44,14 +44,14 @@
         </SidebarButton>
         <!-- Go to Task List page -->
         <SidebarButton
-          hover-text="tasks"
+          hover-text="DISCOllaboratives"
           @click="goToTaskList()"
         >
           <ListIcon />
         </SidebarButton>
         <!-- Display Model Library panel -->
         <SidebarButton
-          hover-text="models"
+          hover-text="Model Library"
           @click="openModelLibrary()"
         >
           <FileIcon />
@@ -63,13 +63,6 @@
         >
           <InfoIcon />
         </SidebarButton>
-        <!-- Display Settings panel-->
-        <SidebarButton
-          hover-text="settings"
-          @click="openSettingsPanel()"
-        >
-          <SettingsIcon />
-        </SidebarButton>
         <!-- Go to About Us page -->
         <SidebarButton
           hover-text="about"
@@ -138,10 +131,9 @@
             </button>
           </div>
           <!-- Panel content -->
-          <Settings v-if="isSettingsPanelOpen" />
           <ModelLibrary
-            v-else-if="isModelLibraryOpen"
-            @switch-panel="switchFromModelLibraryToSettings()"
+            v-if="isModelLibraryOpen"
+            @close-panel="closeMenu()"
           />
         </section>
       </Transition>
@@ -152,26 +144,22 @@
 import type { Instance, Props, Placement } from 'tippy.js'
 import tippy from 'tippy.js'
 
-import Settings from './Settings.vue'
 import ModelLibrary from './ModelLibrary.vue'
 import SidebarButton from './containers/SidebarButton.vue'
 import HomeIcon from '@/assets/svg/HomeIcon.vue'
 import ListIcon from '@/assets/svg/ListIcon.vue'
 import InfoIcon from '@/assets/svg/InfoIcon.vue'
 import FileIcon from '@/assets/svg/FileIcon.vue'
-import SettingsIcon from '@/assets/svg/SettingsIcon.vue'
 import CrossIcon from '@/assets/svg/CrossIcon.vue'
 import AboutUsIcon from '@/assets/svg/AboutUsIcon.vue'
 
 export default {
   name: 'SidebarMain',
   components: {
-    Settings,
     ModelLibrary,
     HomeIcon,
     FileIcon,
     InfoIcon,
-    SettingsIcon,
     ListIcon,
     CrossIcon,
     AboutUsIcon,
@@ -181,7 +169,6 @@ export default {
     return {
       loading: false,
       isMenuOpen: false,
-      isSettingsPanelOpen: false,
       isModelLibraryOpen: false
     }
   },
@@ -199,21 +186,12 @@ export default {
     })
   },
   methods: {
-    switchFromModelLibraryToSettings () {
-      this.isModelLibraryOpen = false
-      this.isSettingsPanelOpen = true
-    },
     openModelLibrary () {
       this.isMenuOpen = true
       this.isModelLibraryOpen = true
     },
-    openSettingsPanel () {
-      this.isMenuOpen = true
-      this.isSettingsPanelOpen = true
-    },
     closeMenu () {
       this.isMenuOpen = false
-      this.isSettingsPanelOpen = false
       this.isModelLibraryOpen = false
     },
     goToHome () {
diff --git a/web-client/src/components/training/Finished.vue b/web-client/src/components/training/Finished.vue
index 818a56f7b..55e8a2d65 100644
--- a/web-client/src/components/training/Finished.vue
+++ b/web-client/src/components/training/Finished.vue
@@ -88,7 +88,7 @@ async function saveModel () {
     }
   } else {
     toast.error(
-      'The model library is currently turned off. See settings for more information'
+      'The model library is currently turned off. Go to the model library settings to turn it one.'
     )
   }
 }

From 4ae7f12c3fca99e230e3cc414eec2aab519e03c6 Mon Sep 17 00:00:00 2001
From: Julien Vignoud <julien.vignoud@epfl.ch>
Date: Tue, 7 May 2024 12:10:32 +0200
Subject: [PATCH 15/37] Add hover description to model library buttons

---
 web-client/src/components/sidebar/ModelLibrary.vue       | 3 +++
 web-client/src/components/sidebar/simple/ModelButton.vue | 3 ++-
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/web-client/src/components/sidebar/ModelLibrary.vue b/web-client/src/components/sidebar/ModelLibrary.vue
index 14f53a82b..6cab86763 100644
--- a/web-client/src/components/sidebar/ModelLibrary.vue
+++ b/web-client/src/components/sidebar/ModelLibrary.vue
@@ -61,6 +61,7 @@
               <div class="w-1/9">
                 <ModelButton
                   event="delete-model"
+                  hover="Delete"
                   @delete-model="deleteModel(path)"
                 >
                   <Bin2Icon />
@@ -69,6 +70,7 @@
               <div class="w-1/9">
                 <ModelButton
                   event="download-model"
+                  hover="Download"
                   @download-model="downloadModel(path)"
                 >
                   <Download2Icon />
@@ -77,6 +79,7 @@
               <div class="w-1/9">
                 <ModelButton
                   event="load-model"
+                  hover="Load for next training"
                   @load-model="loadModel(path)"
                 >
                   <LoadIcon />
diff --git a/web-client/src/components/sidebar/simple/ModelButton.vue b/web-client/src/components/sidebar/simple/ModelButton.vue
index 13c623cea..03b9abb50 100644
--- a/web-client/src/components/sidebar/simple/ModelButton.vue
+++ b/web-client/src/components/sidebar/simple/ModelButton.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 
-interface Props { event: string }
+interface Props { event: string, hover?: string }
 interface Emits { (e: string): void }
 
 const props = defineProps<Props>()
@@ -22,6 +22,7 @@ const emit = defineEmits<Emits>()
       focus:outline-none focus:ring-1 focus:ring-slate-800
       focus:text-slate-800
     "
+    :title="props.hover"
     @click="emit(props.event)"
   >
     <span><slot /></span>

From 5d1959d60e09356f498a2de7c2ac9e48fc900827 Mon Sep 17 00:00:00 2001
From: Julien Vignoud <julien.vignoud@epfl.ch>
Date: Tue, 7 May 2024 12:35:30 +0200
Subject: [PATCH 16/37] Add new sidebar links to custom task and model
 evaluation

---
 web-client/src/assets/svg/CreateIcon.vue      | 24 +++++++++++++++++++
 web-client/src/assets/svg/EvaluateIcon.vue    | 23 ++++++++++++++++++
 web-client/src/components/sidebar/Sidebar.vue | 24 +++++++++++++++++++
 3 files changed, 71 insertions(+)
 create mode 100644 web-client/src/assets/svg/CreateIcon.vue
 create mode 100644 web-client/src/assets/svg/EvaluateIcon.vue

diff --git a/web-client/src/assets/svg/CreateIcon.vue b/web-client/src/assets/svg/CreateIcon.vue
new file mode 100644
index 000000000..bd6163c4f
--- /dev/null
+++ b/web-client/src/assets/svg/CreateIcon.vue
@@ -0,0 +1,24 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="currentColor"
+    :class="customClass"
+    :viewBox="viewBox"
+    stroke="currentColor"
+  >
+      <path d="M20.71,3.29a2.91,2.91,0,0,0-2.2-.84,3.25,3.25,0,0,0-2.17,1L9.46,10.29s0,0,0,0a.62.62,0,0,0-.11.17,1,1,0,0,0-.1.18l0,0L8,14.72A1,1,0,0,0,9,16a.9.9,0,0,0,.28,0l4-1.17,0,0,.18-.1a.62.62,0,0,0,.17-.11l0,0,6.87-6.88a3.25,3.25,0,0,0,1-2.17A2.91,2.91,0,0,0,20.71,3.29Z"></path>
+      <path d="M20,22H4a2,2,0,0,1-2-2V4A2,2,0,0,1,4,2h8a1,1,0,0,1,0,2H4V20H20V12a1,1,0,0,1,2,0v8A2,2,0,0,1,20,22Z"></path>
+  </svg>
+</template>
+<script lang="ts">
+export default {
+  name: 'CreateIcon',
+  props: {
+    customClass: {
+      default: 'w-6 h-6',
+      type: String
+    },
+    viewBox: { default: '0 0 24 24', type: String }
+  }
+}
+</script>
diff --git a/web-client/src/assets/svg/EvaluateIcon.vue b/web-client/src/assets/svg/EvaluateIcon.vue
new file mode 100644
index 000000000..3b3365ed3
--- /dev/null
+++ b/web-client/src/assets/svg/EvaluateIcon.vue
@@ -0,0 +1,23 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="currentColor"
+    :class="customClass"
+    :viewBox="viewBox"
+    stroke="currentColor"
+  >
+      <path d="M1091,264h-22a1,1,0,0,1-1-1V241a1,1,0,0,1,2,0v21h21A1,1,0,0,1,1091,264Zm-5-4a1,1,0,0,1-1-1V248a1,1,0,0,1,2,0v11A1,1,0,0,1,1086,260Zm-4,0h0a1,1,0,0,1-1-1v-7a1,1,0,0,1,1-1h0a1,1,0,0,1,1,1v7A1,1,0,0,1,1082,260Zm-4,0a1,1,0,0,1-1-1V243a1,1,0,0,1,2,0v16A1,1,0,0,1,1078,260Zm-4,0a1,1,0,0,1-1-1V249a1,1,0,0,1,2,0v10A1,1,0,0,1,1074,260Z" transform="translate(-1068 -240)"/>
+  </svg>
+</template>
+<script lang="ts">
+export default {
+  name: 'CreateIcon',
+  props: {
+    customClass: {
+      default: 'w-6 h-6',
+      type: String
+    },
+    viewBox: { default: '-3 -1 28 28', type: String }
+  }
+}
+</script>
diff --git a/web-client/src/components/sidebar/Sidebar.vue b/web-client/src/components/sidebar/Sidebar.vue
index 22a94bf9a..3a22989e9 100644
--- a/web-client/src/components/sidebar/Sidebar.vue
+++ b/web-client/src/components/sidebar/Sidebar.vue
@@ -49,6 +49,20 @@
         >
           <ListIcon />
         </SidebarButton>
+        <!-- Go to custom task creation page -->
+        <SidebarButton
+          hover-text="Create a new DISCOllaborative"
+          @click="goToNewCustomTask()"
+        >
+          <CreateIcon />
+        </SidebarButton>
+        <!-- Go to model evaluation page -->
+        <SidebarButton
+          hover-text="Evaluate models"
+          @click="goToEvaluate()"
+        >
+          <EvaluateIcon />
+        </SidebarButton>
         <!-- Display Model Library panel -->
         <SidebarButton
           hover-text="Model Library"
@@ -148,6 +162,8 @@ import ModelLibrary from './ModelLibrary.vue'
 import SidebarButton from './containers/SidebarButton.vue'
 import HomeIcon from '@/assets/svg/HomeIcon.vue'
 import ListIcon from '@/assets/svg/ListIcon.vue'
+import CreateIcon from '@/assets/svg/CreateIcon.vue'
+import EvaluateIcon from '@/assets/svg/EvaluateIcon.vue'
 import InfoIcon from '@/assets/svg/InfoIcon.vue'
 import FileIcon from '@/assets/svg/FileIcon.vue'
 import CrossIcon from '@/assets/svg/CrossIcon.vue'
@@ -158,6 +174,8 @@ export default {
   components: {
     ModelLibrary,
     HomeIcon,
+    CreateIcon,
+    EvaluateIcon,
     FileIcon,
     InfoIcon,
     ListIcon,
@@ -200,6 +218,12 @@ export default {
     goToTaskList () {
       this.$router.push({ path: '/list' })
     },
+    goToNewCustomTask () {
+      this.$router.push({ path: '/create' })
+    },
+    goToEvaluate () {
+      this.$router.push({ path: '/evaluate' })
+    },
     goToInformation () {
       this.$router.push({ path: '/information' })
     },

From 1289096bfde6aea0de00a7dd9667d703d9e87a63 Mon Sep 17 00:00:00 2001
From: Julien Vignoud <julien.vignoud@epfl.ch>
Date: Tue, 7 May 2024 12:41:25 +0200
Subject: [PATCH 17/37] Move the about us section to the footer MLO logo

---
 web-client/src/components/sidebar/Sidebar.vue   |  7 -------
 .../src/components/simple/CustomFooter.vue      | 17 ++++++++++++++---
 2 files changed, 14 insertions(+), 10 deletions(-)

diff --git a/web-client/src/components/sidebar/Sidebar.vue b/web-client/src/components/sidebar/Sidebar.vue
index 3a22989e9..2e40370af 100644
--- a/web-client/src/components/sidebar/Sidebar.vue
+++ b/web-client/src/components/sidebar/Sidebar.vue
@@ -77,13 +77,6 @@
         >
           <InfoIcon />
         </SidebarButton>
-        <!-- Go to About Us page -->
-        <SidebarButton
-          hover-text="about"
-          @click="goToAboutUs()"
-        >
-          <AboutUsIcon />
-        </SidebarButton>
       </div>
     </nav>
 
diff --git a/web-client/src/components/simple/CustomFooter.vue b/web-client/src/components/simple/CustomFooter.vue
index 50c013cfe..51ad210c9 100644
--- a/web-client/src/components/simple/CustomFooter.vue
+++ b/web-client/src/components/simple/CustomFooter.vue
@@ -38,11 +38,22 @@
       >
         <i class="fa-solid fa-earth-europe fa-xl" />
       </a>
-      <div class="text-disco-cyan font-bold text-sm">
+      <button 
+        title="About Us"
+        class="text-disco-cyan font-bold text-sm"
+        @click="goToAboutUs"
+        >
         &copy; MLO EPFL
-      </div>
+      </button>
     </div>
   </footer>
 </template>
 
-<script lang="ts" setup />
+<script lang="ts" setup>
+import { useRouter } from 'vue-router';
+
+const router = useRouter()
+function goToAboutUs() {
+  router.push({ path: '/about' })
+}
+</script>

From 6752003aa84c40966b6bb8ca3e80011c683c93c3 Mon Sep 17 00:00:00 2001
From: Julien Vignoud <julien.vignoud@epfl.ch>
Date: Tue, 7 May 2024 13:56:08 +0200
Subject: [PATCH 18/37] Harmonize UI design on information page with the rest
 of the web-client

---
 .../src/components/containers/IconCard.vue    |   3 +-
 web-client/src/components/home/GetStarted.vue |  26 ++--
 .../home/__tests__/GetStarted.spec.ts         |  12 --
 .../components/home/__tests__/Landing.spec.ts |  14 --
 .../src/components/information/Features.vue   |  54 +++----
 .../src/components/information/Further.vue    | 137 +++++++-----------
 .../components/information/Information.vue    |  24 +--
 .../src/components/information/Tutorial.vue   |  71 +++------
 .../progress_bars/InformationBar.vue          |   5 +-
 web-client/src/components/sidebar/Sidebar.vue |   2 +-
 web-client/src/locales/english.ts             |  22 +--
 11 files changed, 130 insertions(+), 240 deletions(-)
 delete mode 100644 web-client/src/components/home/__tests__/GetStarted.spec.ts
 delete mode 100644 web-client/src/components/home/__tests__/Landing.spec.ts

diff --git a/web-client/src/components/containers/IconCard.vue b/web-client/src/components/containers/IconCard.vue
index 8b1b98234..d7247bd10 100644
--- a/web-client/src/components/containers/IconCard.vue
+++ b/web-client/src/components/containers/IconCard.vue
@@ -1,7 +1,6 @@
 <template>
   <!--  Card -->
-  <div class="grid grid-cols-1 space-y-8 lg:gap-8rounded-xl group/super">
-    <!-- div class="container mx-width lg h-full"></div-->
+  <div class="grid grid-cols-1 space-y-8 lg:gap-8 rounded-xl group/super">
     <div class="col-span-1 bg-white rounded-xl">
       <!-- Card header -->
       <div
diff --git a/web-client/src/components/home/GetStarted.vue b/web-client/src/components/home/GetStarted.vue
index 73bfbfe40..6cad6e5d8 100644
--- a/web-client/src/components/home/GetStarted.vue
+++ b/web-client/src/components/home/GetStarted.vue
@@ -1,5 +1,17 @@
 <template>
   <div class="grid grid-cols-1 gap-8 md:mx-20 lg:gap-16 lg:grid-cols-3 items-stretch">
+     <!-- Model testing -->
+    <ButtonCard
+      title-placement="center"
+      @action="goToDiscoInformation()"
+    >
+      <template #title>
+        Learn more about <span class="font-disco text-disco-cyan">DISCO</span> and distributed learning fundamentals
+      </template>
+      <template #button>
+        more info
+      </template>
+    </ButtonCard>
     <!-- List of tasks -->
     <ButtonCard
       title-placement="center"
@@ -28,18 +40,6 @@
         create
       </template>
     </ButtonCard>
-    <!-- Model testing -->
-    <ButtonCard
-      title-placement="center"
-      @action="goToModelTesting()"
-    >
-      <template #title>
-        Evaluate or download a <span class="font-disco text-disco-cyan">DISCO</span>-trained model
-      </template>
-      <template #button>
-        evaluate
-      </template>
-    </ButtonCard>
   </div>
 </template>
 <script lang="ts" setup>
@@ -51,5 +51,5 @@ const router = useRouter()
 
 const goToTaskList = (): void => { router.push({ path: '/list' }) }
 const goToNewTaskCreationForm = (): void => { router.push({ path: '/create' }) }
-const goToModelTesting = (): void => { router.push({ path: '/evaluate' }) }
+const goToDiscoInformation = (): void => { router.push({ path: '/information' }) }
 </script>
diff --git a/web-client/src/components/home/__tests__/GetStarted.spec.ts b/web-client/src/components/home/__tests__/GetStarted.spec.ts
deleted file mode 100644
index 8146e0403..000000000
--- a/web-client/src/components/home/__tests__/GetStarted.spec.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { describe, it, expect } from 'vitest'
-import { mount } from  '@vue/test-utils'
-
-import GetStarted from '../GetStarted.vue'
-
-describe('<Landing />', () => {
-  it('changes route', () => {
-    // TODO: find a way to mock router with the composition API
-    const wrapper = mount(GetStarted)
-    expect(wrapper.findAll('button')).toHaveLength(3)
-  })
-})
diff --git a/web-client/src/components/home/__tests__/Landing.spec.ts b/web-client/src/components/home/__tests__/Landing.spec.ts
deleted file mode 100644
index 61a8c6aa7..000000000
--- a/web-client/src/components/home/__tests__/Landing.spec.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { describe, it, expect } from 'vitest'
-import { mount } from  '@vue/test-utils'
-
-import Landing from '../Landing.vue'
-
-describe('<Landing />', () => {
-  it('emits', () => {
-    const wrapper = mount(Landing)
-
-    wrapper.get('button').trigger('click')
-
-    expect(wrapper.emitted()).toHaveProperty('got-started')
-  })
-})
diff --git a/web-client/src/components/information/Features.vue b/web-client/src/components/information/Features.vue
index 833204991..ad7dd15fa 100644
--- a/web-client/src/components/information/Features.vue
+++ b/web-client/src/components/information/Features.vue
@@ -1,41 +1,21 @@
 <template>
-  <div>
-    <!-- Why use Disco? / Features -->
-    <div class="grid grid-cols-1 gap-4 p-4 lg:grid-cols-1 xl:grid-cols-1 blue">
-      <Card custom-class="hover:text-primary dark:hover:text-light">
-        <h6
-          class="
-              text-xl
-              font-large
-              leading-none
-              tracking-wider
-              dark:group-hover:text-light
-              px-2
-              py-6
-            "
+  <!-- Why use Disco? / Features -->
+  <div class="flex justify-center">
+    <IconCard class="justify-self-center w-full lg:w-4/5">
+      <template #title>
+        {{ $tm('information.featuresTitle') }}
+      </template>
+      <template #content>
+        <div
+          v-for="card in $tm('information.featuresCard')"
+          :key="(card as any).title"
+            class="mb-4"
         >
-          {{ $tm('information.featuresTitle') }}
-        </h6>
-        <div class="ml-10">
-          <Card
-            v-for="card in $tm('information.featuresCard')"
-            :key="(card as any).title"
-            custom-class="hover:text-primary dark:hover:text-light"
-          >
-            <div class="ml-10">
-              <ul
-                class="text-lg ont-semibold text-gray-500 dark:text-light"
-              >
-                <b>{{ (card as any).title }}</b><br>
-                {{
-                  (card as any).text
-                }}
-              </ul>
-            </div>
-          </Card>
-        </div>
-      </Card>
-    </div>
+          <b>{{ (card as any).title }}</b><br>
+          <p>{{ (card as any).text }}</p>
+      </div>
+      </template>
+    </IconCard>
   </div>
 </template>
 
@@ -43,7 +23,7 @@
 import { onActivated } from 'vue'
 
 import { useInformationStore } from '@/store/information'
-import Card from '@/components/containers/Card.vue'
+import IconCard from '@/components/containers/IconCard.vue'
 
 // TODO fix i18n types
 
diff --git a/web-client/src/components/information/Further.vue b/web-client/src/components/information/Further.vue
index 4ecefb1bc..4717a3c51 100644
--- a/web-client/src/components/information/Further.vue
+++ b/web-client/src/components/information/Further.vue
@@ -1,90 +1,57 @@
 <template>
-  <div>
     <!-- Further Information -->
-    <div class="grid grid-cols-1 gap-4 p-4 lg:grid-cols-1 xl:grid-cols-1">
-      <Card custom-class="hover:text-primary dark:hover:text-light">
-        <h6
-          class="
-            text-xl
-            font-large
-            leading-none
-            tracking-wider
-            dark:group-hover:text-light
-            px-2
-            py-6
-          "
+  <div class="flex justify-center">
+    <IconCard class="justify-self-center w-full lg:w-4/5">
+      <template #title>
+        {{ $tm('information.informationTitle') }}
+      </template>
+      <template #content>
+        <div
+          v-for="card in $tm('information.informationCard') "
+          :key="(card as any).title"
+            class="mb-4"
         >
-          {{ $tm('information.informationTitle') }}
-        </h6>
-        <div class="ml-10">
-          <div class="grid grid-cols-1 gap-4 p-4 lg:grid-cols-1 xl:grid-cols-1">
-            <Card
-              v-for="card in $tm('information.informationCard')"
-              :key="(card as any).title"
-              custom-class="hover:text-primary dark:hover:text-light"
-            >
-              <div class="ml-10">
-                <ul class="text-lg ont-semibold text-gray-500 dark:text-light">
-                  <b>{{ (card as any).title }}</b>
-                  {{
-                    (card as any).text
-                  }}
-                </ul>
-              </div>
-            </Card>
-            <Card custom-class="hover:text-primary dark:hover:text-light">
-              <div class="ml-10">
-                <ul class="text-lg ont-semibold text-gray-500 dark:text-light">
-                  <b>Foundation technology:</b>
-                  DISCO uses a public model-private data approach.
-                  The models are trained on the web app via
-                  <a
-                    class="text-blue-600"
-                    href="https://www.tensorflow.org/js"
-                  >TF.js</a>
-                  Decentralized training uses peer2peer communication (<a
-                    class="text-blue-600"
-                    href="https://peerjs.com/"
-                  >peerjs</a>).
-                </ul>
-              </div>
-            </Card>
-            <!--
-              To further seperate the text from the UI i18 interpolation can be be used:
-              https://kazupon.github.io/vue-i18n/guide/interpolation.html
-             -->
-
-            <Card custom-class="hover:text-primary dark:hover:text-light">
-              <div class="ml-10">
-                <ul class="text-lg ont-semibold text-gray-500 dark:text-light">
-                  <b>Research-focused design:</b>
-                  DISCO aims to enable decentralized training of
-                  machine learning algorithms, which is (i) efficient (<a
-                    class="text-blue-600"
-                    href="https://github.com/epfml/powergossip"
-                  >R1</a>,<a
-                    class="text-blue-600"
-                    href="https://github.com/epfml/ChocoSGD"
-                  >R2</a>), (ii) privacy-preserving (<a
-                    class="text-blue-600"
-                    href="https://arxiv.org/abs/2006.04747"
-                  >R3</a>), (iii) fault-tolerant and responsive (<a
-                    class="text-blue-600"
-                    href="https://arxiv.org/abs/1910.12308"
-                  >R4</a>), (iv) robust to malicious actors (<a
-                    class="text-blue-600"
-                    href="https://arxiv.org/abs/2012.10333"
-                  >R5</a>,<a
-                    class="text-blue-600"
-                    href="https://arxiv.org/abs/2006.09365"
-                  >R6</a>), while supporting (iv) fair participation, (v) transparency and (vi) interpretability.
-                </ul>
-              </div>
-            </Card>
-          </div>
-        </div>
-      </Card>
-    </div>
+          <b>{{ (card as any).title }}</b><br>
+          <p>{{ (card as any).text }}</p>
+      </div>
+      <div class="mb-4">
+          <b>Foundation technology</b>
+          <br/>DISCO uses a public model-private data approach.
+          The models are trained on the web app via
+          <a
+            class="text-blue-600"
+            href="https://www.tensorflow.org/js"
+          >TF.js</a>
+          Decentralized training uses peer2peer communication (<a
+            class="text-blue-600"
+            href="https://peerjs.com/"
+          >peerjs</a>).
+      </div>
+      <div class="mb-4">
+          <b>Research-focused design</b>
+          <br/>DISCO aims to enable decentralized training of
+          machine learning algorithms, which is (i) efficient (<a
+            class="text-blue-600"
+            href="https://github.com/epfml/powergossip"
+          >R1</a>,<a
+            class="text-blue-600"
+            href="https://github.com/epfml/ChocoSGD"
+          >R2</a>), (ii) privacy-preserving (<a
+            class="text-blue-600"
+            href="https://arxiv.org/abs/2006.04747"
+          >R3</a>), (iii) fault-tolerant and responsive (<a
+            class="text-blue-600"
+            href="https://arxiv.org/abs/1910.12308"
+          >R4</a>), (iv) robust to malicious actors (<a
+            class="text-blue-600"
+            href="https://arxiv.org/abs/2012.10333"
+          >R5</a>,<a
+            class="text-blue-600"
+            href="https://arxiv.org/abs/2006.09365"
+          >R6</a>), while supporting (iv) fair participation, (v) transparency and (vi) interpretability.
+      </div>
+      </template>
+    </IconCard>
   </div>
 </template>
 
@@ -92,7 +59,7 @@
 import { onActivated } from 'vue'
 
 import { useInformationStore } from '@/store/information'
-import Card from '@/components/containers/Card.vue'
+import IconCard from '@/components/containers/IconCard.vue'
 
 // TODO fix i18n types
 
diff --git a/web-client/src/components/information/Information.vue b/web-client/src/components/information/Information.vue
index 60e07109c..56b3e77ad 100644
--- a/web-client/src/components/information/Information.vue
+++ b/web-client/src/components/information/Information.vue
@@ -1,13 +1,13 @@
 <template>
   <div>
     <!-- Page Content -->
-    <Card class="flex flex-col place-content-center p-6 space-y-6">
+    <Card class="flex flex-col place-content-center p-6 space-y-6 rounded-xl ">
       <p class="flex flex-wrap justify-center text-3xl text-slate-400 mt-2">
         <span><span class="font-disco text-disco-blue uppercase">dis</span><span>-tributed</span>&nbsp;</span>
         <span><span class="font-disco text-disco-cyan uppercase">co</span><span>-llaborative</span>&nbsp;</span>
         learning platform
       </p>
-      <div class="grid gap-8 p-4 sm:grid-cols-2 text-slate-500">
+      <div class="grid gap-8 p-4 sm:grid-cols-2 text-slate-500 border-t">
         <!-- Federated insight -->
         <div class="flex flex-col items-center">
           <h6
@@ -23,8 +23,8 @@
             Federated Learning
           </h6>
           <FederatedGIF class="my-md" />
-          <p class="text-lg py-6">
-            - Server coordinates secure collaborative learning of model
+          <p class="text-sm py-6 text-center">
+            The server puts in common local model updates and sends back an aggregated global model. <br/>No data is shared.
           </p>
         </div>
         <!-- Decentralised insight -->
@@ -42,22 +42,12 @@
             Decentralized Learning
           </h6>
           <DecentralizedGIF class="my-md" />
-          <p class="text-lg py-6">
-            - Peer2Peer secure collaborative learning of model
+          <p class="text-sm py-6 text-center">
+            Local model aggregation is coordinated between peers without any server.
+            <br/> No data is shared.
           </p>
         </div>
       </div>
-      <div class="flex w-full md:w-1/2 justify-center rounded-3xl bg-disco-cyan">
-        <ul class="text-lg ont-semibold text-white">
-          <div
-            class="py-6"
-          >
-            <p>- Data stays local, always</p>
-            <p>- Secure and privacy preserving</p>
-            <p>- Collaborative training</p>
-          </div>
-        </ul>
-      </div>
     </Card>
   </div>
 </template>
diff --git a/web-client/src/components/information/Tutorial.vue b/web-client/src/components/information/Tutorial.vue
index 6589f23eb..8b8780b7b 100644
--- a/web-client/src/components/information/Tutorial.vue
+++ b/web-client/src/components/information/Tutorial.vue
@@ -1,52 +1,28 @@
 <template>
-  <div>
-    <!-- How to use Disco? -->
-    <div class="grid grid-cols-1 gap-4 p-4 lg:grid-cols-1 xl:grid-cols-1">
-      <card custom-class="hover:text-primary dark:hover:text-light">
-        <h6
-          class="
-              text-xl
-              font-large
-              leading-none
-              tracking-wider
-              dark:group-hover:text-light
-              px-2
-              py-6
-            "
+  <div class="flex justify-center">
+    <IconCard class="justify-self-center w-full lg:w-4/5">
+      <template #title>
+        {{ $tm('information.howToUseTitle') }}
+      </template>
+      <template #content>
+        <div
+          v-for="card in $tm('information.howToUseCard') "
+          :key="(card as any).title"
+            class="mb-4"
         >
-          {{ $tm('information.howToUseTitle') }}
-        </h6>
-        <div class="ml-10">
-          <div
-            class="grid grid-cols-1 gap-4 p-4 lg:grid-cols-1 xl:grid-cols-1"
-          >
-            <card
-              v-for="card in $tm('information.howToUseCard')"
-              :key="(card as any).title"
-              custom-class="hover:text-primary dark:hover:text-light"
-            >
-              <div class="ml-10">
-                <ul
-                  class="text-lg ont-semibold text-gray-500 dark:text-light"
-                >
-                  <b>{{ (card as any).title }}</b>
-                  {{ (card as any).text }}
-                </ul>
-              </div>
-            </card>
-          </div>
+          <b>{{ (card as any).title }}</b><br>
+          <p>{{ (card as any).text }}</p>
+      </div>
+      <div class="flex items-center justify-center space-x-8">
+        <CustomButton @click="router.push('/list')">
+          explore DISCOllaboratives
+        </CustomButton>
+        <CustomButton @click="router.push('/create')">
+          create your own task
+        </CustomButton>
         </div>
-        <div class="flex items-center justify-center space-x-8">
-          <!-- Light button -->
-          <CustomButton @click="router.push('/list')">
-            explore examples
-          </CustomButton>
-          <CustomButton @click="router.push('/create')">
-            create your own task
-          </CustomButton>
-        </div>
-      </card>
-    </div>
+      </template>
+    </IconCard>
   </div>
 </template>
 
@@ -55,7 +31,8 @@ import { onActivated } from 'vue'
 import { useRouter } from 'vue-router'
 
 import { useInformationStore } from '@/store/information'
-import Card from '@/components/containers/Card.vue'
+import IconCard from '@/components/containers/IconCard.vue'
+import CustomButton from '@/components/simple/CustomButton.vue'
 
 // TODO fix i18n types
 
diff --git a/web-client/src/components/progress_bars/InformationBar.vue b/web-client/src/components/progress_bars/InformationBar.vue
index eebb08a9f..1dd33a4f0 100644
--- a/web-client/src/components/progress_bars/InformationBar.vue
+++ b/web-client/src/components/progress_bars/InformationBar.vue
@@ -1,5 +1,8 @@
 <template>
-  <div class="space-y-4 md:space-y-8 my-8 md:my-16">
+  <div class="mb-8 md:mb-16 space-y-4 md:space-y-8">
+     <div class="flex flex-wrap text-3xl text-slate-600 justify-center">
+      <span class="font-disco text-disco-cyan">DIS</span><span class="font-disco text-disco-blue">CO</span>
+    </div>
     <div class="hidden md:inline-block w-full">
       <div class="flex">
         <ProgressIcon
diff --git a/web-client/src/components/sidebar/Sidebar.vue b/web-client/src/components/sidebar/Sidebar.vue
index 2e40370af..b11d7cec8 100644
--- a/web-client/src/components/sidebar/Sidebar.vue
+++ b/web-client/src/components/sidebar/Sidebar.vue
@@ -72,7 +72,7 @@
         </SidebarButton>
         <!-- Go to Information page -->
         <SidebarButton
-          hover-text="information"
+          hover-text="More on DISCO"
           @click="goToInformation()"
         >
           <InfoIcon />
diff --git a/web-client/src/locales/english.ts b/web-client/src/locales/english.ts
index a5c08fa60..de079d498 100644
--- a/web-client/src/locales/english.ts
+++ b/web-client/src/locales/english.ts
@@ -15,7 +15,7 @@ export default {
         items: [
           "Exchange <span class='italic'>models</span> not data",
           'Keep data at its source',
-          "choose either <span class='italic'>decentralised</span> or <span class='italic'>federated</span> training"
+          "choose either <span class='italic'>decentralized</span> or <span class='italic'>federated</span> training"
         ]
       }
     ],
@@ -39,19 +39,19 @@ export default {
     informationTitle: 'Further Information',
     informationCard: [
       {
-        title: 'Goal:',
+        title: 'Goal',
         text: 'Disco enables collaborative and privacy-preserving training of machine learning models. Disco is an easy-to-use mobile app & web software, running directly in your browser.'
       },
       {
-        title: 'Key Question:',
+        title: 'Key Question',
         text: 'Can we keep control over our own data, while still benefitting from joint collaborative training with other participants? - or - Can we train an ML model which is equally good as if all data were in one place, but while respecting privacy? Federated and decentralized learning make this possible.'
       },
       {
-        title: 'Federated learning:',
+        title: 'Federated learning',
         text: 'The key insight is to share weight updates instead of data - each user trains on their own device and periodically shares weight updates with a central server, while keeping data local at all times. The server will agreggate all these weights between participants, and send them back.'
       },
       {
-        title: 'Decentralized learning:',
+        title: 'Decentralized learning',
         text: 'Building upon the same principles as in federated learning, decentralized learning achieved allows collaboration and data privacy without the need for a central coordinator. Updates are shared purely via peer2peer communication. Disco puts users in control of the entire collaborative training process, without a central point of failure.'
       }
     ],
@@ -73,24 +73,24 @@ export default {
     howToUseTitle: 'How to use Disco?',
     howToUseCard: [
       {
-        title: 'Step 1: Select a task',
-        text: '- choose different tasks and data sets for training, ranging from tabular data to images, and from binary classification to class-wise prediction (or define your own task).'
+        title: 'Step 1: Select a DISCOllaborative',
+        text: 'Choose different tasks and datasets for training, ranging from tabular data to images, and from binary classification to class-wise prediction. Or you can define your own task.'
       },
       {
         title: 'Step 2: Select data for the training process',
-        text: '- choose the files that are used for the training process on your local devices. Those files will not be uploaded anywhere.'
+        text: 'Connect your local data files to use during the training process. Those files will not be uploaded anywhere.'
       },
       {
         title: 'Step 3: Neural network training',
-        text: '- select between training alone and training collaboratively. Local training will fine tune the model with your local data and the resulting model will only be available to your device. Training collaboratively will allow communication between local devices during training so the local model updatess are aggregated into an improved shared model. After completing training, you can find training statistics on the model accuracy in the dashboard. For training collaboratively, details on the communication rounds will also appear on the board.'
+        text: 'Choose between training alone and training collaboratively. Local training will fine tune the model with your local data and the resulting model will only be available to your device. Training collaboratively will allow model communication between local devices during training. Your local model updates (and not the data) are aggregated into an improved shared model. After completing training, you can find training statistics on the model accuracy in the dashboard. For training collaboratively, details on the communication rounds will also appear on the board.'
       },
       {
         title: 'Step 4: Save the model',
-        text: '- click on the button to save the model for later.'
+        text: 'You can choose to save the model to reuse later.'
       },
       {
         title: 'Step 5: Reuse the model',
-        text: '- come back any time to reuse your local model and resume training or test it against other data.'
+        text: 'Come back any time to reuse your local model: resume training or run inference on new data.'
       }
     ],
     federatedTitle: 'Federated Learning',

From 2413e4853cf0e02f714b302d3df6aa7ceea11c5c Mon Sep 17 00:00:00 2001
From: Julien Vignoud <julien.vignoud@epfl.ch>
Date: Tue, 7 May 2024 14:01:40 +0200
Subject: [PATCH 19/37] Fix web-client unused import

---
 web-client/src/components/sidebar/Sidebar.vue | 8 +-------
 1 file changed, 1 insertion(+), 7 deletions(-)

diff --git a/web-client/src/components/sidebar/Sidebar.vue b/web-client/src/components/sidebar/Sidebar.vue
index b11d7cec8..631b79f61 100644
--- a/web-client/src/components/sidebar/Sidebar.vue
+++ b/web-client/src/components/sidebar/Sidebar.vue
@@ -80,7 +80,7 @@
       </div>
     </nav>
 
-    <!-- Menu (RHS) -->
+    <!-- Menu (RHS)  currently only contains the model library but can be expanded with more -->
     <div class="absolute">
       <!-- Backdrop -->
       <Transition
@@ -139,7 +139,6 @@
           </div>
           <!-- Panel content -->
           <ModelLibrary
-            v-if="isModelLibraryOpen"
             @close-panel="closeMenu()"
           />
         </section>
@@ -160,7 +159,6 @@ import EvaluateIcon from '@/assets/svg/EvaluateIcon.vue'
 import InfoIcon from '@/assets/svg/InfoIcon.vue'
 import FileIcon from '@/assets/svg/FileIcon.vue'
 import CrossIcon from '@/assets/svg/CrossIcon.vue'
-import AboutUsIcon from '@/assets/svg/AboutUsIcon.vue'
 
 export default {
   name: 'SidebarMain',
@@ -173,14 +171,12 @@ export default {
     InfoIcon,
     ListIcon,
     CrossIcon,
-    AboutUsIcon,
     SidebarButton
   },
   data () {
     return {
       loading: false,
       isMenuOpen: false,
-      isModelLibraryOpen: false
     }
   },
   async mounted () {
@@ -199,11 +195,9 @@ export default {
   methods: {
     openModelLibrary () {
       this.isMenuOpen = true
-      this.isModelLibraryOpen = true
     },
     closeMenu () {
       this.isMenuOpen = false
-      this.isModelLibraryOpen = false
     },
     goToHome () {
       this.$router.push({ path: '/' })

From 87e0ffe95914304f02c39bc94739f287b1aad9d6 Mon Sep 17 00:00:00 2001
From: Julien Vignoud <julien.vignoud@epfl.ch>
Date: Tue, 7 May 2024 15:01:10 +0200
Subject: [PATCH 20/37] Fix Cifar10 test

---
 .github/workflows/lint-test-build.yml | 2 +-
 cli/src/data.ts                       | 2 +-
 server/tests/e2e/federated.spec.ts    | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/.github/workflows/lint-test-build.yml b/.github/workflows/lint-test-build.yml
index 1b76d8f17..41eaf42ea 100644
--- a/.github/workflows/lint-test-build.yml
+++ b/.github/workflows/lint-test-build.yml
@@ -332,7 +332,7 @@ jobs:
           cache: npm
       - run: npm ci
       - run: npm --workspace={./discojs/discojs-{core,node},./server} run build
-      - run: npm --workspace=./cli start -- -t cifar10 -u 1 -e 1
+      - run: npm --workspace=./cli start -- -t cifar10 -u 3 -e 1
 
   test-docs-examples:
     needs: [build-lib-core, build-lib-node, build-server, download-datasets]
diff --git a/cli/src/data.ts b/cli/src/data.ts
index 74b50120a..fc49fdfc4 100644
--- a/cli/src/data.ts
+++ b/cli/src/data.ts
@@ -23,7 +23,7 @@ async function simplefaceData (task: Task): Promise<data.DataSplit> {
 async function cifar10Data (cifar10: Task): Promise<data.DataSplit> {
   const dir = '../datasets/CIFAR10/'
   const files = (await fs.readdir(dir)).map((file) => path.join(dir, file))
-  const labels = Range(0, 24).map((label) => (label % 10).toString()).toArray()
+  const labels = Range(0, 24).map(_ => 'airplane').toArray() // TODO read labels in csv
   return await new NodeImageLoader(cifar10).loadAll(files, { labels })
 }
 
diff --git a/server/tests/e2e/federated.spec.ts b/server/tests/e2e/federated.spec.ts
index aa61ec29d..3593c418a 100644
--- a/server/tests/e2e/federated.spec.ts
+++ b/server/tests/e2e/federated.spec.ts
@@ -29,7 +29,7 @@ describe("end-to-end federated", function () {
   async function cifar10user (): Promise<WeightsContainer> {
     const dir = DATASET_DIR + 'CIFAR10/'
     const files = (await fs.readdir(dir)).map((file) => path.join(dir, file))
-    const labels = Range(0, 24).map((label) => (label % 10).toString()).toArray()
+    const labels = Range(0, 24).map(_ => 'cat').toArray() // TODO read labels in csv
 
     const cifar10Task = defaultTasks.cifar10.getTask()
 

From d7abb747bbaa315a1c33b46bd8eff01987973591 Mon Sep 17 00:00:00 2001
From: Julien Vignoud <julien.vignoud@epfl.ch>
Date: Tue, 7 May 2024 17:45:31 +0200
Subject: [PATCH 21/37] Remove i18n internationalizaion plugin

---
 docs/VUEJS.md                                 |  15 +-
 package-lock.json                             |  61 --------
 web-client/package.json                       |   1 -
 .../src/components/information/Features.vue   |  24 +--
 .../src/components/information/Further.vue    | 100 ++++++------
 .../components/information/Information.vue    |   2 -
 .../src/components/information/Tutorial.vue   |  32 ++--
 web-client/src/components/pages/NotFound.vue  |  44 +-----
 .../src/components/simple/CustomHeader.vue    |  18 ---
 .../training/TrainingInformation.vue          |  32 +---
 web-client/src/locales/english.ts             | 145 ------------------
 web-client/src/locales/i18n.ts                |  10 --
 web-client/src/main.ts                        |   2 -
 13 files changed, 109 insertions(+), 377 deletions(-)
 delete mode 100644 web-client/src/components/simple/CustomHeader.vue
 delete mode 100644 web-client/src/locales/english.ts
 delete mode 100644 web-client/src/locales/i18n.ts

diff --git a/docs/VUEJS.md b/docs/VUEJS.md
index 95e180a32..1047eaaad 100644
--- a/docs/VUEJS.md
+++ b/docs/VUEJS.md
@@ -137,11 +137,10 @@ For now a template that shows how to create tasks can be found.
 
 ### Main front-end packages
 
-| Name                                                                         |     Keyword     | Description                                                               |
-| ---------------------------------------------------------------------------- | :-------------: | :------------------------------------------------------------------------ |
-| [vee-validate](https://vee-validate.logaretm.com/v4/)                        |     `Form`      | Form Validation for Vue.js                                                |
-| [vue-toast-notification](https://github.com/ankurk91/vue-toast-notification) | `Notifications` | Toast notification plugin for Vue.js                                      |
-| [tippy](https://atomiks.github.io/tippyjs/)                                  |     `Menu`      | Plugin to build menu / side bars                                          |
-| [vue-i18n](https://vue-i18n.intlify.dev/)                                    | `Internation.`  | Internationalization plugin for Vue.js                                    |
-| [vue-router](https://router.vuejs.org/)                                      |    `Routing`    | Official router plugin for Vue.js                                         |
-| [yup](https://github.com/jquense/yup)                                        |     `Form`      | Schema builder for runtime value parsing and validation (forms).          |
+| Name                                                                         |     Keyword     | Description                                                      |
+| ---------------------------------------------------------------------------- | :-------------: | :--------------------------------------------------------------- |
+| [vee-validate](https://vee-validate.logaretm.com/v4/)                        |     `Form`      | Form Validation for Vue.js                                       |
+| [vue-toast-notification](https://github.com/ankurk91/vue-toast-notification) | `Notifications` | Toast notification plugin for Vue.js                             |
+| [tippy](https://atomiks.github.io/tippyjs/)                                  |     `Menu`      | Plugin to build menu / side bars                                 |
+| [vue-router](https://router.vuejs.org/)                                      |    `Routing`    | Official router plugin for Vue.js                                |
+| [yup](https://github.com/jquense/yup)                                        |     `Form`      | Schema builder for runtime value parsing and validation (forms). |
diff --git a/package-lock.json b/package-lock.json
index 3aac6be98..6d5c48b6a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -773,47 +773,6 @@
       "integrity": "sha512-93zYdMES/c1D69yZiKDBj0V24vqNzB/koF26KPaagAfd3P/4gUlh3Dys5ogAK+Exi9QyzlD8x/08Zt7wIKcDcA==",
       "dev": true
     },
-    "node_modules/@intlify/core-base": {
-      "version": "9.13.1",
-      "resolved": "https://registry.npmjs.org/@intlify/core-base/-/core-base-9.13.1.tgz",
-      "integrity": "sha512-+bcQRkJO9pcX8d0gel9ZNfrzU22sZFSA0WVhfXrf5jdJOS24a+Bp8pozuS9sBI9Hk/tGz83pgKfmqcn/Ci7/8w==",
-      "dependencies": {
-        "@intlify/message-compiler": "9.13.1",
-        "@intlify/shared": "9.13.1"
-      },
-      "engines": {
-        "node": ">= 16"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/kazupon"
-      }
-    },
-    "node_modules/@intlify/message-compiler": {
-      "version": "9.13.1",
-      "resolved": "https://registry.npmjs.org/@intlify/message-compiler/-/message-compiler-9.13.1.tgz",
-      "integrity": "sha512-SKsVa4ajYGBVm7sHMXd5qX70O2XXjm55zdZB3VeMFCvQyvLew/dLvq3MqnaIsTMF1VkkOb9Ttr6tHcMlyPDL9w==",
-      "dependencies": {
-        "@intlify/shared": "9.13.1",
-        "source-map-js": "^1.0.2"
-      },
-      "engines": {
-        "node": ">= 16"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/kazupon"
-      }
-    },
-    "node_modules/@intlify/shared": {
-      "version": "9.13.1",
-      "resolved": "https://registry.npmjs.org/@intlify/shared/-/shared-9.13.1.tgz",
-      "integrity": "sha512-u3b6BKGhE6j/JeRU6C/RL2FgyJfy6LakbtfeVF8fJXURpZZTzfh3e05J0bu0XPw447Q6/WUp3C4ajv4TMS4YsQ==",
-      "engines": {
-        "node": ">= 16"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/kazupon"
-      }
-    },
     "node_modules/@isaacs/cliui": {
       "version": "8.0.2",
       "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz",
@@ -11973,25 +11932,6 @@
         "eslint": ">=6.0.0"
       }
     },
-    "node_modules/vue-i18n": {
-      "version": "9.13.1",
-      "resolved": "https://registry.npmjs.org/vue-i18n/-/vue-i18n-9.13.1.tgz",
-      "integrity": "sha512-mh0GIxx0wPtPlcB1q4k277y0iKgo25xmDPWioVVYanjPufDBpvu5ySTjP5wOrSvlYQ2m1xI+CFhGdauv/61uQg==",
-      "dependencies": {
-        "@intlify/core-base": "9.13.1",
-        "@intlify/shared": "9.13.1",
-        "@vue/devtools-api": "^6.5.0"
-      },
-      "engines": {
-        "node": ">= 16"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/kazupon"
-      },
-      "peerDependencies": {
-        "vue": "^3.0.0"
-      }
-    },
     "node_modules/vue-router": {
       "version": "4.3.2",
       "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.3.2.tgz",
@@ -12477,7 +12417,6 @@
         "tippy.js": "6",
         "vee-validate": "4",
         "vue": "3",
-        "vue-i18n": "9",
         "vue-router": "4",
         "vue-toast-notification": "3",
         "vue3-apexcharts": "1",
diff --git a/web-client/package.json b/web-client/package.json
index a44cb7c5b..57931c9d0 100644
--- a/web-client/package.json
+++ b/web-client/package.json
@@ -21,7 +21,6 @@
     "tippy.js": "6",
     "vee-validate": "4",
     "vue": "3",
-    "vue-i18n": "9",
     "vue-router": "4",
     "vue-toast-notification": "3",
     "vue3-apexcharts": "1",
diff --git a/web-client/src/components/information/Features.vue b/web-client/src/components/information/Features.vue
index ad7dd15fa..373560eaa 100644
--- a/web-client/src/components/information/Features.vue
+++ b/web-client/src/components/information/Features.vue
@@ -3,17 +3,21 @@
   <div class="flex justify-center">
     <IconCard class="justify-self-center w-full lg:w-4/5">
       <template #title>
-        {{ $tm('information.featuresTitle') }}
+        Why use Disco?
       </template>
       <template #content>
-        <div
-          v-for="card in $tm('information.featuresCard')"
-          :key="(card as any).title"
-            class="mb-4"
-        >
-          <b>{{ (card as any).title }}</b><br>
-          <p>{{ (card as any).text }}</p>
-      </div>
+        <div class="mb-4">
+          <b>Supports arbitrary deep learning architectures</b><br>
+          Disco supports arbitrary deep learning tasks and model architectures, running on your device via TensorFlow.js
+        </div>
+        <div class="mb-4">
+          <b>Data and model privacy</b><br>
+          Data privacy by design - no data ever leaves any device. Models updates can be protected by encryption (secure multiparty computation), and by differential privacy.
+        </div>
+        <div class="mb-4">
+          <b>Runs anywhere</b><br>
+          Disco runs in the browser, from any device equipped with a modern browser. For developers, we also offer a standalone node.js version, not needing any browser.
+        </div>
       </template>
     </IconCard>
   </div>
@@ -25,8 +29,6 @@ import { onActivated } from 'vue'
 import { useInformationStore } from '@/store/information'
 import IconCard from '@/components/containers/IconCard.vue'
 
-// TODO fix i18n types
-
 const informationStore = useInformationStore()
 onActivated(() => { informationStore.step = 1 })
 </script>
diff --git a/web-client/src/components/information/Further.vue b/web-client/src/components/information/Further.vue
index 4717a3c51..53b1e317f 100644
--- a/web-client/src/components/information/Further.vue
+++ b/web-client/src/components/information/Further.vue
@@ -3,53 +3,61 @@
   <div class="flex justify-center">
     <IconCard class="justify-self-center w-full lg:w-4/5">
       <template #title>
-        {{ $tm('information.informationTitle') }}
+        Further Information
       </template>
       <template #content>
-        <div
-          v-for="card in $tm('information.informationCard') "
-          :key="(card as any).title"
-            class="mb-4"
-        >
-          <b>{{ (card as any).title }}</b><br>
-          <p>{{ (card as any).text }}</p>
-      </div>
-      <div class="mb-4">
-          <b>Foundation technology</b>
-          <br/>DISCO uses a public model-private data approach.
-          The models are trained on the web app via
-          <a
-            class="text-blue-600"
-            href="https://www.tensorflow.org/js"
-          >TF.js</a>
-          Decentralized training uses peer2peer communication (<a
-            class="text-blue-600"
-            href="https://peerjs.com/"
-          >peerjs</a>).
-      </div>
-      <div class="mb-4">
-          <b>Research-focused design</b>
-          <br/>DISCO aims to enable decentralized training of
-          machine learning algorithms, which is (i) efficient (<a
-            class="text-blue-600"
-            href="https://github.com/epfml/powergossip"
-          >R1</a>,<a
-            class="text-blue-600"
-            href="https://github.com/epfml/ChocoSGD"
-          >R2</a>), (ii) privacy-preserving (<a
-            class="text-blue-600"
-            href="https://arxiv.org/abs/2006.04747"
-          >R3</a>), (iii) fault-tolerant and responsive (<a
-            class="text-blue-600"
-            href="https://arxiv.org/abs/1910.12308"
-          >R4</a>), (iv) robust to malicious actors (<a
-            class="text-blue-600"
-            href="https://arxiv.org/abs/2012.10333"
-          >R5</a>,<a
-            class="text-blue-600"
-            href="https://arxiv.org/abs/2006.09365"
-          >R6</a>), while supporting (iv) fair participation, (v) transparency and (vi) interpretability.
-      </div>
+        <div class="mb-4">
+          <b>Goal</b><br>
+          Disco enables collaborative and privacy-preserving training of machine learning models. Disco is an easy-to-use mobile app & web software, running directly in your browser.
+        </div>
+        <div class="mb-4">
+          <b>Key Question</b><br>
+          Can we keep control over our own data, while still benefitting from joint collaborative training with other participants? - or - Can we train an ML model which is equally good as if all data were in one place, but while respecting privacy? Federated and decentralized learning make this possible.
+        </div>
+        <div class="mb-4">
+          <b>Federated learning</b><br>
+          The key insight is to share weight updates instead of data - each user trains on their own device and periodically shares weight updates with a central server, while keeping data local at all times. The server will agreggate all these weights between participants, and send them back.
+        </div>
+        <div class="mb-4">
+          <b>Decentralized learning</b><br>
+          Building upon the same principles as in federated learning, decentralized learning achieved allows collaboration and data privacy without the need for a central coordinator. Updates are shared purely via peer2peer communication. Disco puts users in control of the entire collaborative training process, without a central point of failure.
+        </div>
+        <div class="mb-4">
+            <b>Foundation technology</b>
+            <br/>DISCO uses a public model-private data approach.
+            The models are trained on the web app via
+            <a
+              class="text-blue-600"
+              href="https://www.tensorflow.org/js"
+            >TF.js</a>
+            Decentralized training uses peer2peer communication (<a
+              class="text-blue-600"
+              href="https://peerjs.com/"
+            >peerjs</a>).
+        </div>
+        <div class="mb-4">
+            <b>Research-focused design</b>
+            <br/>DISCO aims to enable decentralized training of
+            machine learning algorithms, which is (i) efficient (<a
+              class="text-blue-600"
+              href="https://github.com/epfml/powergossip"
+            >R1</a>,<a
+              class="text-blue-600"
+              href="https://github.com/epfml/ChocoSGD"
+            >R2</a>), (ii) privacy-preserving (<a
+              class="text-blue-600"
+              href="https://arxiv.org/abs/2006.04747"
+            >R3</a>), (iii) fault-tolerant and responsive (<a
+              class="text-blue-600"
+              href="https://arxiv.org/abs/1910.12308"
+            >R4</a>), (iv) robust to malicious actors (<a
+              class="text-blue-600"
+              href="https://arxiv.org/abs/2012.10333"
+            >R5</a>,<a
+              class="text-blue-600"
+              href="https://arxiv.org/abs/2006.09365"
+            >R6</a>), while supporting (iv) fair participation, (v) transparency and (vi) interpretability.
+        </div>
       </template>
     </IconCard>
   </div>
@@ -61,8 +69,6 @@ import { onActivated } from 'vue'
 import { useInformationStore } from '@/store/information'
 import IconCard from '@/components/containers/IconCard.vue'
 
-// TODO fix i18n types
-
 const informationStore = useInformationStore()
 onActivated(() => { informationStore.step = 3 })
 </script>
diff --git a/web-client/src/components/information/Information.vue b/web-client/src/components/information/Information.vue
index 56b3e77ad..bfe7aceb0 100644
--- a/web-client/src/components/information/Information.vue
+++ b/web-client/src/components/information/Information.vue
@@ -60,8 +60,6 @@ import Card from '@/components/containers/Card.vue'
 import DecentralizedGIF from '@/assets/gif/DecentralizedGIF.vue'
 import FederatedGIF from '@/assets/gif/FederatedGIF.vue'
 
-// TODO fix i18n types
-
 const informationStore = useInformationStore()
 onActivated(() => { informationStore.step = 0 })
 </script>
diff --git a/web-client/src/components/information/Tutorial.vue b/web-client/src/components/information/Tutorial.vue
index 8b8780b7b..3b58759e8 100644
--- a/web-client/src/components/information/Tutorial.vue
+++ b/web-client/src/components/information/Tutorial.vue
@@ -2,17 +2,29 @@
   <div class="flex justify-center">
     <IconCard class="justify-self-center w-full lg:w-4/5">
       <template #title>
-        {{ $tm('information.howToUseTitle') }}
+        How to use Disco?
       </template>
       <template #content>
-        <div
-          v-for="card in $tm('information.howToUseCard') "
-          :key="(card as any).title"
-            class="mb-4"
-        >
-          <b>{{ (card as any).title }}</b><br>
-          <p>{{ (card as any).text }}</p>
-      </div>
+        <div class="mb-4">
+          <b>Step 1: Select a DISCOllaborative</b><br>
+          Choose different tasks and datasets for training, ranging from tabular data to images, and from binary classification to class-wise prediction. Or you can define your own task.
+        </div>
+        <div class="mb-4">
+          <b>Step 2: Select data for the training process</b><br>
+          Connect your local data files to use during the training process. Those files will not be uploaded anywhere.
+        </div>
+        <div class="mb-4">
+          <b>Step 3: Neural network training</b><br>
+          Choose between training alone and training collaboratively. Local training will fine tune the model with your local data and the resulting model will only be available to your device. Training collaboratively will allow model communication between local devices during training. Your local model updates (and not the data) are aggregated into an improved shared model. After completing training, you can find training statistics on the model accuracy in the dashboard. For training collaboratively, details on the communication rounds will also appear on the board.
+        </div>
+        <div class="mb-4">
+          <b>Step 4: Save the model</b><br>
+          You can choose to save the model to reuse later.
+        </div>
+        <div class="mb-4">
+          <b>Step 5: Reuse the model</b><br>
+          Come back any time to reuse your local model: resume training or run inference on new data.
+        </div>
       <div class="flex items-center justify-center space-x-8">
         <CustomButton @click="router.push('/list')">
           explore DISCOllaboratives
@@ -34,8 +46,6 @@ import { useInformationStore } from '@/store/information'
 import IconCard from '@/components/containers/IconCard.vue'
 import CustomButton from '@/components/simple/CustomButton.vue'
 
-// TODO fix i18n types
-
 const router = useRouter()
 const informationStore = useInformationStore()
 onActivated(() => { informationStore.step = 2 })
diff --git a/web-client/src/components/pages/NotFound.vue b/web-client/src/components/pages/NotFound.vue
index 918636f76..7ebd6d9f8 100644
--- a/web-client/src/components/pages/NotFound.vue
+++ b/web-client/src/components/pages/NotFound.vue
@@ -1,9 +1,7 @@
 <template>
-  <div>
-    <!-- Welcoming words -->
-    <CustomHeader />
+  <div class="flex justify-center">
     <!-- Information sections -->
-    <section class="flex-col items-center justify-center p-4 space-y-4">
+    <section class="flex-col items-center justify-center p-4 space-y-4 w-3/4">
       <div class="grid grid-cols-1 gap-4 p-4">
         <div
           class="
@@ -17,30 +15,14 @@
             dark:bg-darker
           "
         >
-          <TitleCard>
+          <IconCard>
             <template #title>
               404 - Page Not Found
             </template>
-            <template #text>
+            <template #content>
               The page you're looking for does not exist.
-              <div class="grid grid-cols-2 gap-8 items-center">
-                <div class="text-right">
-                  <CustomButton
-                    @click="goToPreviousPage()"
-                  >
-                    go back
-                  </CustomButton>
-                </div>
-                <div class="text-left">
-                  <CustomButton
-                    @click="goToHomePage()"
-                  >
-                    home page
-                  </CustomButton>
-                </div>
-              </div>
             </template>
-          </TitleCard>
+          </IconCard>
         </div>
       </div>
     </section>
@@ -49,24 +31,12 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue'
-import CustomButton from '../simple/CustomButton.vue'
-import CustomHeader from '../simple/CustomHeader.vue'
-import TitleCard from '../containers/TitleCard.vue'
+import IconCard from '../containers/IconCard.vue'
 
 export default defineComponent({
   name: 'NotFound',
   components: {
-    CustomButton,
-    CustomHeader,
-    TitleCard
-  },
-  methods: {
-    goToPreviousPage () {
-      this.$router.go(-1)
-    },
-    goToHomePage () {
-      this.$router.push({ path: '/' })
-    }
+    IconCard
   }
 })
 </script>
diff --git a/web-client/src/components/simple/CustomHeader.vue b/web-client/src/components/simple/CustomHeader.vue
deleted file mode 100644
index 2720ae10a..000000000
--- a/web-client/src/components/simple/CustomHeader.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<template>
-  <!-- Main Page Header-->
-  <div>
-    <h1 class="text-xl pl-10 font-medium leading-none">
-      <span class="text-primary-dark dark:text-primary-light">{{ $t('home.title.name') }}
-      </span>
-      -
-      <span class="text-primary-dark dark:text-primary-light">{{
-        $t('home.title.start')
-      }}</span>{{ $t('home.title.middle') }}
-      <span class="text-primary-dark dark:text-primary-light">{{
-        $t('home.title.end')
-      }}</span>
-    </h1>
-  </div>
-</template>
-
-<script lang="ts" setup />
diff --git a/web-client/src/components/training/TrainingInformation.vue b/web-client/src/components/training/TrainingInformation.vue
index de26500a6..1cecd419a 100644
--- a/web-client/src/components/training/TrainingInformation.vue
+++ b/web-client/src/components/training/TrainingInformation.vue
@@ -46,18 +46,14 @@
       <IconCard>
         <!-- Card header -->
         <template #title>
-          {{
-            $t('training.trainingInformationFrame.accuracyCharts.trainingLossHeader')
-          }}
+          Training Loss of the Model
         </template>
         <template #content>
           <span class="text-2xl font-medium text-slate-500">
             {{ (latestEpoch?.training.loss ?? 0).toFixed(2) }}
           </span>
           <span class="text-sm font-medium text-slate-500">
-            {{
-              $t('training.trainingInformationFrame.accuracyCharts.trainingLossText')
-            }}
+            ' training loss'
           </span>
           <!-- Chart -->
           <ApexChart
@@ -76,18 +72,14 @@
       >
         <!-- Card header -->
         <template #title>
-          {{
-            $t('training.trainingInformationFrame.accuracyCharts.validationLossHeader')
-          }}
+          Validation Loss of the Model
         </template>
         <template #content>
           <span class="text-2xl font-medium text-slate-500">
             {{ (latestEpoch?.validation?.loss ?? 0).toFixed(2) }}
           </span>
           <span class="text-sm font-medium text-slate-500">
-            {{
-              $t('training.trainingInformationFrame.accuracyCharts.validationLossText')
-            }}
+            validation loss
           </span>
           <!-- Chart -->
           <ApexChart
@@ -109,18 +101,14 @@
       <IconCard>
         <!-- Card header -->
         <template #title>
-          {{
-            $t('training.trainingInformationFrame.accuracyCharts.trainingAccuracyHeader')
-          }}
+          Training Accuracy of the Model
         </template>
         <template #content>
           <span class="text-2xl font-medium text-slate-500">
             {{ percent(latestEpoch?.training.accuracy ?? 0) }}
           </span>
           <span class="text-sm font-medium text-slate-500">
-            {{
-              $t('training.trainingInformationFrame.accuracyCharts.trainingAccuracyText')
-            }}
+             '% of training accuracy'
           </span>
           <!-- Chart -->
           <ApexChart
@@ -139,18 +127,14 @@
       >
         <!-- Card header -->
         <template #title>
-          {{
-            $t('training.trainingInformationFrame.accuracyCharts.validationAccuracyHeader')
-          }}
+          Validation Accuracy of the Model
         </template>
         <template #content>
           <span class="text-2xl font-medium text-slate-500">
             {{ percent(latestEpoch?.validation?.accuracy ?? 0) }}
           </span>
           <span class="text-sm font-medium text-slate-500">
-            {{
-              $t('training.trainingInformationFrame.accuracyCharts.validationAccuracyText')
-            }}
+            % of validation accuracy
           </span>
           <!-- Chart -->
           <ApexChart
diff --git a/web-client/src/locales/english.ts b/web-client/src/locales/english.ts
deleted file mode 100644
index de079d498..000000000
--- a/web-client/src/locales/english.ts
+++ /dev/null
@@ -1,145 +0,0 @@
-export default {
-  home: {
-    title: {
-      name: 'Disco',
-      start: 'Distributed ',
-      middle: 'Collaborative ',
-      end: 'AI'
-    },
-    buildCard: [
-      {
-        header: {
-          text: 'Build AI with collaborators but',
-          underlined: 'without sharing any data'
-        },
-        items: [
-          "Exchange <span class='italic'>models</span> not data",
-          'Keep data at its source',
-          "choose either <span class='italic'>decentralized</span> or <span class='italic'>federated</span> training"
-        ]
-      }
-    ],
-    taskCard: [
-      {
-        header: {
-          text: 'Create your',
-          underlined: 'own task'
-        },
-        items: [
-          'Choose a model',
-          'Describe the task',
-          'Specify the desired training and evaluation parameters '
-        ]
-      }
-    ],
-    startBuildingButtonText: 'Start building',
-    createTaskButtonText: 'Create task'
-  },
-  information: {
-    informationTitle: 'Further Information',
-    informationCard: [
-      {
-        title: 'Goal',
-        text: 'Disco enables collaborative and privacy-preserving training of machine learning models. Disco is an easy-to-use mobile app & web software, running directly in your browser.'
-      },
-      {
-        title: 'Key Question',
-        text: 'Can we keep control over our own data, while still benefitting from joint collaborative training with other participants? - or - Can we train an ML model which is equally good as if all data were in one place, but while respecting privacy? Federated and decentralized learning make this possible.'
-      },
-      {
-        title: 'Federated learning',
-        text: 'The key insight is to share weight updates instead of data - each user trains on their own device and periodically shares weight updates with a central server, while keeping data local at all times. The server will agreggate all these weights between participants, and send them back.'
-      },
-      {
-        title: 'Decentralized learning',
-        text: 'Building upon the same principles as in federated learning, decentralized learning achieved allows collaboration and data privacy without the need for a central coordinator. Updates are shared purely via peer2peer communication. Disco puts users in control of the entire collaborative training process, without a central point of failure.'
-      }
-    ],
-    featuresTitle: 'Why use Disco?',
-    featuresCard: [
-      {
-        title: 'Supports arbitrary deep learning architectures',
-        text: 'Disco supports arbitrary deep learning tasks and model architectures, running on your device via TensorFlow.js'
-      },
-      {
-        title: 'Data and model privacy',
-        text: 'Data privacy by design - no data ever leaves any device. Models updates can be protected by encryption (secure multiparty computation), and by differential privacy'
-      },
-      {
-        title: 'Runs anywhere',
-        text: 'Disco runs in the browser, from any device equipped with a modern browser. For developers, we also offer a standalone node.js version, not needing any browser.'
-      }
-    ],
-    howToUseTitle: 'How to use Disco?',
-    howToUseCard: [
-      {
-        title: 'Step 1: Select a DISCOllaborative',
-        text: 'Choose different tasks and datasets for training, ranging from tabular data to images, and from binary classification to class-wise prediction. Or you can define your own task.'
-      },
-      {
-        title: 'Step 2: Select data for the training process',
-        text: 'Connect your local data files to use during the training process. Those files will not be uploaded anywhere.'
-      },
-      {
-        title: 'Step 3: Neural network training',
-        text: 'Choose between training alone and training collaboratively. Local training will fine tune the model with your local data and the resulting model will only be available to your device. Training collaboratively will allow model communication between local devices during training. Your local model updates (and not the data) are aggregated into an improved shared model. After completing training, you can find training statistics on the model accuracy in the dashboard. For training collaboratively, details on the communication rounds will also appear on the board.'
-      },
-      {
-        title: 'Step 4: Save the model',
-        text: 'You can choose to save the model to reuse later.'
-      },
-      {
-        title: 'Step 5: Reuse the model',
-        text: 'Come back any time to reuse your local model: resume training or run inference on new data.'
-      }
-    ],
-    federatedTitle: 'Federated Learning',
-    decentralisedTitle: 'Decentralized Learning'
-  },
-  training: {
-    trainingFrame: {
-      dataExample: 'Data Example',
-      localTrainingButton: 'Train Locally',
-      collaborativeTrainingButton: 'Train Collaboratively',
-      decentralizedTrainingButton: 'Train Decentralized',
-      federatedTrainingButton: 'Train Federated',
-      stopTrainingButton: 'Stop Training',
-      saveModel: {
-        header: 'Save the model',
-        description: "If you are satisfied with the performance of the model, don't forget to save the model by clicking on the button below. The next time you will load the application, you will be able to use your saved model.",
-        button: 'Save my model'
-      },
-      testModel: {
-        header: 'Test the model',
-        description: "If you are satisfied with the performance of the model, don't forget to save the model by clicking on the button below. The next time you will load the application, you will be able to use your saved model.",
-        button: 'Test my model'
-      }
-    },
-    trainingInformationFrame: {
-      accuracyCharts: {
-        validationAccuracyHeader: 'Validation Accuracy of the Model',
-        validationAccuracyText: '% of validation accuracy',
-        validationLossHeader: 'Validation Loss of the Model',
-        validationLossText: ' validation loss',
-        trainingAccuracyHeader: 'Training Accuracy of the Model',
-        trainingAccuracyText: '% of training accuracy',
-        trainingLossHeader: 'Training Loss of the Model',
-        trainingLossText: ' training loss'
-      },
-      trainingInformations: {
-        trainingConsoleHeader: 'Peer Training Console',
-        distributed: {
-          averaging: '# of Averaging',
-          waitingTime: 'Waiting Time',
-          weightRequests: '# Weight Requests',
-          peopleHelped: '# of People Helped'
-        },
-        federated: {
-          round: 'Current Round',
-          numberParticipants: 'Current # of participants',
-          averageParticipants: 'Average # of Participants'
-        }
-      }
-    }
-  }
-}
diff --git a/web-client/src/locales/i18n.ts b/web-client/src/locales/i18n.ts
deleted file mode 100644
index f759dce3c..000000000
--- a/web-client/src/locales/i18n.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { createI18n } from 'vue-i18n'
-import english from './english'
-
-export function createCustomI18n () {
-  return createI18n({
-    locale: 'en',
-    fallbackLocale: 'en',
-    messages: { en: english }
-  })
-}
diff --git a/web-client/src/main.ts b/web-client/src/main.ts
index a0c90b4b2..78b890e93 100644
--- a/web-client/src/main.ts
+++ b/web-client/src/main.ts
@@ -3,7 +3,6 @@ import { createPinia } from 'pinia'
 
 import App from '@/components/App.vue'
 import { router } from '@/router'
-import { createCustomI18n } from './locales/i18n'
 import { useToaster } from './composables/toaster'
 
 import '@/assets/css/tailwind.css'
@@ -33,6 +32,5 @@ app.config.errorHandler = (err, instance, info) => {
 
 app
   .use(createPinia())
-  .use(createCustomI18n())
   .use(router)
   .mount('#app')

From 75ddf947bcb7bd607e80d6a30ed4a34fce9219ae Mon Sep 17 00:00:00 2001
From: Julien Vignoud <33122365+JulienVig@users.noreply.github.com>
Date: Wed, 8 May 2024 13:53:00 +0200
Subject: [PATCH 22/37] Make display_information dataset link a URL type
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Valérian Rousset <tharvik@users.noreply.github.com>
---
 discojs/discojs-core/src/task/display_information.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/discojs/discojs-core/src/task/display_information.ts b/discojs/discojs-core/src/task/display_information.ts
index d39bbec8d..5bf68e943 100644
--- a/discojs/discojs-core/src/task/display_information.ts
+++ b/discojs/discojs-core/src/task/display_information.ts
@@ -17,7 +17,7 @@ export interface DisplayInformation {
   // Displays the image at this URL in the UI as an example when connecting data
   dataExampleImage?: string
   // URL to download a dataset for the task, is displayed in the UI when asking to connect data
-  sampleDatasetLink?: string
+  sampleDatasetLink?: URL
   limitations?: string
   labelDisplay?: LabelType
 }

From a90d6c79abed6c51414d841a47f03056f95c2e3e Mon Sep 17 00:00:00 2001
From: Julien Vignoud <33122365+JulienVig@users.noreply.github.com>
Date: Wed, 8 May 2024 13:55:15 +0200
Subject: [PATCH 23/37] Update cli/src/data.ts with Repeat rather than Range
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Valérian Rousset <tharvik@users.noreply.github.com>
---
 cli/src/data.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/cli/src/data.ts b/cli/src/data.ts
index fc49fdfc4..b18c09866 100644
--- a/cli/src/data.ts
+++ b/cli/src/data.ts
@@ -23,7 +23,7 @@ async function simplefaceData (task: Task): Promise<data.DataSplit> {
 async function cifar10Data (cifar10: Task): Promise<data.DataSplit> {
   const dir = '../datasets/CIFAR10/'
   const files = (await fs.readdir(dir)).map((file) => path.join(dir, file))
-  const labels = Range(0, 24).map(_ => 'airplane').toArray() // TODO read labels in csv
+  const labels = Repeat('airplane', 24).toArray() // TODO read labels in csv
   return await new NodeImageLoader(cifar10).loadAll(files, { labels })
 }
 

From 98ded2b47d15d2fb54a5e83db5a160d79c918ec9 Mon Sep 17 00:00:00 2001
From: Julien Vignoud <33122365+JulienVig@users.noreply.github.com>
Date: Wed, 8 May 2024 13:55:38 +0200
Subject: [PATCH 24/37] Update image_loader.spec.ts with Repeat rather than
 Range
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Valérian Rousset <tharvik@users.noreply.github.com>
---
 discojs/discojs-node/src/data/image_loader.spec.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/discojs/discojs-node/src/data/image_loader.spec.ts b/discojs/discojs-node/src/data/image_loader.spec.ts
index a0beafdf7..f3e8222bc 100644
--- a/discojs/discojs-node/src/data/image_loader.spec.ts
+++ b/discojs/discojs-node/src/data/image_loader.spec.ts
@@ -84,7 +84,7 @@ describe('image loader', () => {
   })
 
   it('loads multiple samples with labels', async () => {
-    const labels = Range(0, 24).map(_ => 3) //internally, disco maps string labels to their index in the task LABEL_LIST
+    const labels = Repeat(3, 24) //internally, disco maps string labels to their index in the task LABEL_LIST
     const stringLabels = labels.map(_ => 'cat') // so cat is mapped to integer 3
     const oneHotLabels = List(tf.oneHot(labels.toArray(), 10).arraySync() as number[])
 

From e21f60e4beedf65d9fa57e8cf22aa8aa3f135582 Mon Sep 17 00:00:00 2001
From: Julien Vignoud <33122365+JulienVig@users.noreply.github.com>
Date: Wed, 8 May 2024 13:56:13 +0200
Subject: [PATCH 25/37] Update federated.spec.ts with Repeat rather than Range
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Valérian Rousset <tharvik@users.noreply.github.com>
---
 server/tests/e2e/federated.spec.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/server/tests/e2e/federated.spec.ts b/server/tests/e2e/federated.spec.ts
index 3593c418a..536fb9b5f 100644
--- a/server/tests/e2e/federated.spec.ts
+++ b/server/tests/e2e/federated.spec.ts
@@ -29,7 +29,7 @@ describe("end-to-end federated", function () {
   async function cifar10user (): Promise<WeightsContainer> {
     const dir = DATASET_DIR + 'CIFAR10/'
     const files = (await fs.readdir(dir)).map((file) => path.join(dir, file))
-    const labels = Range(0, 24).map(_ => 'cat').toArray() // TODO read labels in csv
+    const labels = Repeat('cat', 24).toArray() // TODO read labels in csv
 
     const cifar10Task = defaultTasks.cifar10.getTask()
 

From 73c107c2995e1d766190285c774e8f4031193d9a Mon Sep 17 00:00:00 2001
From: Julien Vignoud <33122365+JulienVig@users.noreply.github.com>
Date: Wed, 8 May 2024 13:56:33 +0200
Subject: [PATCH 26/37] Update
 web-client/src/components/data/dataset_input/DatasetInput.vue
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Valérian Rousset <tharvik@users.noreply.github.com>
---
 web-client/src/components/data/dataset_input/DatasetInput.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web-client/src/components/data/dataset_input/DatasetInput.vue b/web-client/src/components/data/dataset_input/DatasetInput.vue
index b55698950..e337e68b8 100644
--- a/web-client/src/components/data/dataset_input/DatasetInput.vue
+++ b/web-client/src/components/data/dataset_input/DatasetInput.vue
@@ -172,7 +172,7 @@ const toaster = useToaster()
 const props = defineProps<Props>()
 
 const csvRows = ref<{ filename: string, label: string }[]>()
-const connectImagesByGroup = ref<boolean>(true)
+const connectImagesByGroup = ref(true)
 
 const requireLabels = computed(
   () => props.task.trainingInformation.LABEL_LIST !== undefined

From d7c6b10d3ab28f6abdca1fd2bdc95f1536742d77 Mon Sep 17 00:00:00 2001
From: Julien Vignoud <33122365+JulienVig@users.noreply.github.com>
Date: Wed, 8 May 2024 13:57:16 +0200
Subject: [PATCH 27/37] Update
 web-client/src/components/training/TrainingInformation.vue
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Valérian Rousset <tharvik@users.noreply.github.com>
---
 web-client/src/components/training/TrainingInformation.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web-client/src/components/training/TrainingInformation.vue b/web-client/src/components/training/TrainingInformation.vue
index 1cecd419a..ca4e1af14 100644
--- a/web-client/src/components/training/TrainingInformation.vue
+++ b/web-client/src/components/training/TrainingInformation.vue
@@ -243,7 +243,7 @@ const lossSeries = computed(() => props.logs
 )
 
 const yAxisMax = computed(() => {
-  let maxVal = Math.max(...[...lossSeries.value.training, ...lossSeries.value.validation])
+  let maxVal = Math.max(...lossSeries.value.training, ...lossSeries.value.validation)
   return (maxVal > 0) ? maxVal : 10 // if Math.max returns -inf or 0, set the max to 10 arbitrarily
 })
 

From 4d9ad9459f975225a72f37cff36d823fb72ee7a0 Mon Sep 17 00:00:00 2001
From: Julien Vignoud <33122365+JulienVig@users.noreply.github.com>
Date: Wed, 8 May 2024 13:57:39 +0200
Subject: [PATCH 28/37] Update
 web-client/src/components/training/TrainingInformation.vue
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Valérian Rousset <tharvik@users.noreply.github.com>
---
 .../components/training/TrainingInformation.vue  | 16 +++++++---------
 1 file changed, 7 insertions(+), 9 deletions(-)

diff --git a/web-client/src/components/training/TrainingInformation.vue b/web-client/src/components/training/TrainingInformation.vue
index ca4e1af14..24f3fe1c2 100644
--- a/web-client/src/components/training/TrainingInformation.vue
+++ b/web-client/src/components/training/TrainingInformation.vue
@@ -250,15 +250,13 @@ const yAxisMax = computed(() => {
 const lossChartsOptions = computed(() => {
   return {
     ...options,
-    ...{
-      yaxis: {
-        max: () => yAxisMax.value,
-        min: 0,
-        labels: {
-          show: true,
-          formatter: function (value: number) {
-            return value.toFixed(2);
-          }
+    yaxis: {
+      max: () => yAxisMax.value,
+      min: 0,
+      labels: {
+        show: true,
+        formatter: function (value: number) {
+          return value.toFixed(2);
         }
       }
     }

From c66925d7ea5f8b67410e9368120a685fd41b7fe9 Mon Sep 17 00:00:00 2001
From: Julien Vignoud <julien.vignoud@epfl.ch>
Date: Wed, 8 May 2024 14:07:59 +0200
Subject: [PATCH 29/37] Make task information URLs type URL

---
 discojs/discojs-core/src/task/display_information.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/discojs/discojs-core/src/task/display_information.ts b/discojs/discojs-core/src/task/display_information.ts
index 5bf68e943..9b1b39817 100644
--- a/discojs/discojs-core/src/task/display_information.ts
+++ b/discojs/discojs-core/src/task/display_information.ts
@@ -15,7 +15,7 @@ export interface DisplayInformation {
   // TODO no need for undefined
   headers?: string[]
   // Displays the image at this URL in the UI as an example when connecting data
-  dataExampleImage?: string
+  dataExampleImage?: URL
   // URL to download a dataset for the task, is displayed in the UI when asking to connect data
   sampleDatasetLink?: URL
   limitations?: string
@@ -45,11 +45,11 @@ export function isDisplayInformation (raw: unknown): raw is DisplayInformation {
   if (
     typeof taskTitle !== 'string' ||
     (dataExampleText !== undefined && typeof dataExampleText !== 'string') ||
-    (sampleDatasetLink !== undefined && typeof sampleDatasetLink !== 'string') ||
+    (sampleDatasetLink !== undefined && !(sampleDatasetLink instanceof URL)) ||
     (dataFormatInformation !== undefined && typeof dataFormatInformation !== 'string') ||
     (tradeoffs !== undefined && typeof tradeoffs !== 'string') ||
     (model !== undefined && typeof model !== 'string') ||
-    (dataExampleImage !== undefined && typeof dataExampleImage !== 'string') ||
+    (dataExampleImage !== undefined && !(dataExampleImage instanceof URL)) ||
     (labelDisplay !== undefined && !isLabelType(labelDisplay)) ||
     (limitations !== undefined && typeof limitations !== 'string')
   ) {

From 4696c8463d07f53fae24a1eaf1b71df24f2327be Mon Sep 17 00:00:00 2001
From: Julien Vignoud <julien.vignoud@epfl.ch>
Date: Wed, 8 May 2024 14:17:12 +0200
Subject: [PATCH 30/37] Make training logs scrollable

---
 .../src/components/training/Trainer.vue       | 24 +++++++++----------
 .../training/TrainingInformation.vue          |  7 +++---
 2 files changed, 15 insertions(+), 16 deletions(-)

diff --git a/web-client/src/components/training/Trainer.vue b/web-client/src/components/training/Trainer.vue
index 8c14471fd..2a2d71a2d 100644
--- a/web-client/src/components/training/Trainer.vue
+++ b/web-client/src/components/training/Trainer.vue
@@ -10,7 +10,7 @@
     <div class="flex justify-center">
       <IconCard title-placement="center">
         <template #title> Control the Training Flow </template>
-        <template v-if="trainingLogs === undefined" #content>
+        <template v-if="trainingGenerator === undefined" #content>
           <div class="grid grid-cols-2 gap-8">
             <CustomButton @click="startTraining(false)">
               train alone
@@ -67,7 +67,7 @@ const props = defineProps<{
 
 const displayModelCaching = ref(true)
 
-const trainingLogs =
+const trainingGenerator =
   ref<AsyncGenerator<RoundLogs & { participants: number }, void>>();
 const logs = ref(List<RoundLogs & { participants: number }>());
 const messages = ref(List<string>());
@@ -76,14 +76,12 @@ const hasValidationData = computed(
   () => props.task.trainingInformation.validationSplit > 0,
 );
 
-function resetTrainingInformation() {
-  trainingLogs.value = undefined
+async function startTraining(distributed: boolean): Promise<void> {
+  // Reset training information before starting a new training
+  trainingGenerator.value = undefined
   logs.value = List<RoundLogs & { participants: number }>()
   messages.value = List<string>()
-}
 
-async function startTraining(distributed: boolean): Promise<void> {
-  resetTrainingInformation()
   let dataset: data.DataSplit;
   try {
     dataset = await props.datasetBuilder.build({
@@ -132,12 +130,12 @@ async function startTraining(distributed: boolean): Promise<void> {
 
   try {
     displayModelCaching.value= false // hide model caching buttons during training
-    trainingLogs.value = disco.fit(dataset);
+    trainingGenerator.value = disco.fit(dataset);
     logs.value = List<RoundLogs & { participants: number }>();
-    for await (const roundLogs of trainingLogs.value)
+    for await (const roundLogs of trainingGenerator.value)
       logs.value = logs.value.push(roundLogs);
 
-    if (trainingLogs.value === undefined) {
+    if (trainingGenerator.value === undefined) {
       toaster.info("Training stopped");
       return;
     }
@@ -147,17 +145,17 @@ async function startTraining(distributed: boolean): Promise<void> {
     return
   } finally {
     displayModelCaching.value = true // show model caching buttons again after training
-    trainingLogs.value = undefined;
+    trainingGenerator.value = undefined;
   }
 
   toaster.success("Training successfully completed");
 }
 
 async function stopTraining(): Promise<void> {
-  const generator = trainingLogs.value;
+  const generator = trainingGenerator.value;
   if (generator === undefined) return;
 
-  trainingLogs.value = undefined;
+  trainingGenerator.value = undefined;
   generator.return();
 }
 </script>
diff --git a/web-client/src/components/training/TrainingInformation.vue b/web-client/src/components/training/TrainingInformation.vue
index 24f3fe1c2..982b7e299 100644
--- a/web-client/src/components/training/TrainingInformation.vue
+++ b/web-client/src/components/training/TrainingInformation.vue
@@ -53,7 +53,7 @@
             {{ (latestEpoch?.training.loss ?? 0).toFixed(2) }}
           </span>
           <span class="text-sm font-medium text-slate-500">
-            ' training loss'
+            training loss
           </span>
           <!-- Chart -->
           <ApexChart
@@ -108,7 +108,7 @@
             {{ percent(latestEpoch?.training.accuracy ?? 0) }}
           </span>
           <span class="text-sm font-medium text-slate-500">
-             '% of training accuracy'
+             % of training accuracy
           </span>
           <!-- Chart -->
           <ApexChart
@@ -157,7 +157,8 @@
         <Contact />
       </template>
       <template #content>
-        <div id="mapHeader">
+        <!-- Scrollable training logs -->
+        <div id="mapHeader" class="max-h-80 overflow-y-auto">
           <ul class="grid grid-cols-1">
             <li
               v-for="(message, index) in props.messages"

From 06378a8714fa700d316a93a132cea2710d903bb3 Mon Sep 17 00:00:00 2001
From: Julien Vignoud <julien.vignoud@epfl.ch>
Date: Wed, 8 May 2024 14:34:09 +0200
Subject: [PATCH 31/37] Rollback url as type string but add URL checks

---
 .../src/task/display_information.ts           | 22 +++++++++++++++----
 1 file changed, 18 insertions(+), 4 deletions(-)

diff --git a/discojs/discojs-core/src/task/display_information.ts b/discojs/discojs-core/src/task/display_information.ts
index 9b1b39817..44d004966 100644
--- a/discojs/discojs-core/src/task/display_information.ts
+++ b/discojs/discojs-core/src/task/display_information.ts
@@ -15,9 +15,9 @@ export interface DisplayInformation {
   // TODO no need for undefined
   headers?: string[]
   // Displays the image at this URL in the UI as an example when connecting data
-  dataExampleImage?: URL
+  dataExampleImage?: string
   // URL to download a dataset for the task, is displayed in the UI when asking to connect data
-  sampleDatasetLink?: URL
+  sampleDatasetLink?: string
   limitations?: string
   labelDisplay?: LabelType
 }
@@ -45,11 +45,11 @@ export function isDisplayInformation (raw: unknown): raw is DisplayInformation {
   if (
     typeof taskTitle !== 'string' ||
     (dataExampleText !== undefined && typeof dataExampleText !== 'string') ||
-    (sampleDatasetLink !== undefined && !(sampleDatasetLink instanceof URL)) ||
+    (sampleDatasetLink !== undefined && typeof sampleDatasetLink !== 'string') ||
     (dataFormatInformation !== undefined && typeof dataFormatInformation !== 'string') ||
     (tradeoffs !== undefined && typeof tradeoffs !== 'string') ||
     (model !== undefined && typeof model !== 'string') ||
-    (dataExampleImage !== undefined && !(dataExampleImage instanceof URL)) ||
+    (dataExampleImage !== undefined && typeof dataExampleImage !== 'string') ||
     (labelDisplay !== undefined && !isLabelType(labelDisplay)) ||
     (limitations !== undefined && typeof limitations !== 'string')
   ) {
@@ -59,6 +59,20 @@ export function isDisplayInformation (raw: unknown): raw is DisplayInformation {
   if (!isSummary(summary)) {
     return false
   }
+  if (sampleDatasetLink !== undefined) {
+    try {
+      new URL(sampleDatasetLink)
+    } catch {
+      return false
+    }
+  }
+  if (dataExampleImage !== undefined) {
+    try {
+      new URL(dataExampleImage)
+    } catch {
+      return false
+    }
+  }
 
   if (
     dataExample !== undefined && !(

From 2e7db2eec741b072ea4c439d9b8f88e446104906 Mon Sep 17 00:00:00 2001
From: Julien Vignoud <julien.vignoud@epfl.ch>
Date: Wed, 8 May 2024 14:42:29 +0200
Subject: [PATCH 32/37] Make buttons wrap when screen not wide enough

---
 web-client/src/components/containers/ButtonCard.vue | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/web-client/src/components/containers/ButtonCard.vue b/web-client/src/components/containers/ButtonCard.vue
index f5e6f6994..367c5f221 100644
--- a/web-client/src/components/containers/ButtonCard.vue
+++ b/web-client/src/components/containers/ButtonCard.vue
@@ -22,16 +22,18 @@
       <slot name="text" />
     </div>
     <div
-      :class="isAltAction ? 'flex justify-between mt-auto' : ('mt-auto text-'+buttonPlacement)"
+      :class="isAltAction ? 'flex flex-wrap justify-around mt-auto items-center' : ('mt-auto text-'+buttonPlacement)"
     >
       <CustomButton
         @click="$emit('action')"
+        class="mb-1"
       >
         <slot name="button" />
       </CustomButton>
       <CustomButton
         v-if="isAltAction"
         @click="$emit('altAction')"
+        class="mb-1"
       >
         <slot name="altButton" />
       </CustomButton>

From ec26c8fd17aa63e13c6035e53bd8a9078f0352be Mon Sep 17 00:00:00 2001
From: Julien Vignoud <julien.vignoud@epfl.ch>
Date: Wed, 8 May 2024 14:46:56 +0200
Subject: [PATCH 33/37] Add buttons wrap

---
 web-client/src/components/information/Tutorial.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/web-client/src/components/information/Tutorial.vue b/web-client/src/components/information/Tutorial.vue
index 3b58759e8..3c6925532 100644
--- a/web-client/src/components/information/Tutorial.vue
+++ b/web-client/src/components/information/Tutorial.vue
@@ -25,11 +25,11 @@
           <b>Step 5: Reuse the model</b><br>
           Come back any time to reuse your local model: resume training or run inference on new data.
         </div>
-      <div class="flex items-center justify-center space-x-8">
-        <CustomButton @click="router.push('/list')">
+      <div class="flex flex-wrap items-center justify-center space-x-8">
+        <CustomButton @click="router.push('/list')" class="mb-2">
           explore DISCOllaboratives
         </CustomButton>
-        <CustomButton @click="router.push('/create')">
+        <CustomButton @click="router.push('/create')" class="mb-2">
           create your own task
         </CustomButton>
         </div>

From aed256d94cd3531db537f252616395892296ba0e Mon Sep 17 00:00:00 2001
From: Julien Vignoud <julien.vignoud@epfl.ch>
Date: Wed, 8 May 2024 15:01:07 +0200
Subject: [PATCH 34/37] Remove geotag label logic remnants

---
 .../src/task/display_information.ts           |  5 ---
 discojs/discojs-core/src/task/index.ts        |  1 -
 discojs/discojs-core/src/task/label_type.ts   | 41 -------------------
 web-client/src/components/testing/Tester.vue  | 20 +--------
 4 files changed, 1 insertion(+), 66 deletions(-)
 delete mode 100644 discojs/discojs-core/src/task/label_type.ts

diff --git a/discojs/discojs-core/src/task/display_information.ts b/discojs/discojs-core/src/task/display_information.ts
index 44d004966..8c5488786 100644
--- a/discojs/discojs-core/src/task/display_information.ts
+++ b/discojs/discojs-core/src/task/display_information.ts
@@ -1,6 +1,5 @@
 import { type Summary, isSummary } from './summary.js'
 import { type DataExample, isDataExample } from './data_example.js'
-import { type LabelType, isLabelType } from './label_type.js'
 
 export interface DisplayInformation {
   taskTitle: string
@@ -19,7 +18,6 @@ export interface DisplayInformation {
   // URL to download a dataset for the task, is displayed in the UI when asking to connect data
   sampleDatasetLink?: string
   limitations?: string
-  labelDisplay?: LabelType
 }
 
 export function isDisplayInformation (raw: unknown): raw is DisplayInformation {
@@ -34,7 +32,6 @@ export function isDisplayInformation (raw: unknown): raw is DisplayInformation {
     dataFormatInformation,
     sampleDatasetLink,
     headers,
-    labelDisplay,
     limitations,
     model,
     summary,
@@ -50,7 +47,6 @@ export function isDisplayInformation (raw: unknown): raw is DisplayInformation {
     (tradeoffs !== undefined && typeof tradeoffs !== 'string') ||
     (model !== undefined && typeof model !== 'string') ||
     (dataExampleImage !== undefined && typeof dataExampleImage !== 'string') ||
-    (labelDisplay !== undefined && !isLabelType(labelDisplay)) ||
     (limitations !== undefined && typeof limitations !== 'string')
   ) {
     return false
@@ -96,7 +92,6 @@ export function isDisplayInformation (raw: unknown): raw is DisplayInformation {
     dataFormatInformation,
     sampleDatasetLink,
     headers,
-    labelDisplay,
     limitations,
     model,
     summary,
diff --git a/discojs/discojs-core/src/task/index.ts b/discojs/discojs-core/src/task/index.ts
index 64cd69aa6..ed2c3c873 100644
--- a/discojs/discojs-core/src/task/index.ts
+++ b/discojs/discojs-core/src/task/index.ts
@@ -4,4 +4,3 @@ export { isDigest, type Digest } from './digest.js'
 export { isDisplayInformation, type DisplayInformation } from './display_information.js'
 export type { TrainingInformation } from './training_information.js'
 export { pushTask, fetchTasks } from './task_handler.js'
-export { LabelTypeEnum } from './label_type.js'
diff --git a/discojs/discojs-core/src/task/label_type.ts b/discojs/discojs-core/src/task/label_type.ts
deleted file mode 100644
index db31ff247..000000000
--- a/discojs/discojs-core/src/task/label_type.ts
+++ /dev/null
@@ -1,41 +0,0 @@
-export interface LabelType {
-  labelType: LabelTypeEnum
-  mapBaseUrl?: string
-}
-
-export enum LabelTypeEnum {
-  TEXT, POLYGON_MAP
-}
-
-function isLabelTypeEnum(raw: unknown): raw is LabelTypeEnum {
-  switch (raw) {
-    case LabelTypeEnum.TEXT: break
-    case LabelTypeEnum.POLYGON_MAP: break
-    default: return false
-  }
-
-  const _: LabelTypeEnum = raw
-
-  return true
-}
-
-export function isLabelType(raw: unknown): raw is LabelType {
-  if (typeof raw !== 'object' || raw === null) {
-    return false
-  }
-
-  const { labelType, mapBaseUrl }: Partial<Record<keyof LabelType, unknown>> = raw
-
-  if (
-    !isLabelTypeEnum(labelType) ||
-    (mapBaseUrl !== undefined && typeof mapBaseUrl !== 'string')
-  ) {
-    return false
-  }
-
-  const repack = { labelType, mapBaseUrl }
-  const _correct: LabelType = repack
-  const _total: Record<keyof LabelType, unknown> = repack
-
-  return true
-}
diff --git a/web-client/src/components/testing/Tester.vue b/web-client/src/components/testing/Tester.vue
index da69833bd..8bf29cb5f 100644
--- a/web-client/src/components/testing/Tester.vue
+++ b/web-client/src/components/testing/Tester.vue
@@ -83,8 +83,6 @@
             v-for="(value, key) in dataWithPred"
             :key="key"
             :image-url="(value.data as ImageWithUrl).url"
-            :show-button="isPolygonMapVisualization"
-            @click="openMapModal(value.prediction, value.groundTruth)"
           >
             <template #title>
               <p :class="value.groundTruth && value.prediction !== value.groundTruth ? 'text-red-700' : 'text-disco-blue'">
@@ -237,7 +235,7 @@ import { computed, ref } from 'vue'
 import ApexChart from "vue3-apexcharts";
 
 import type { Task } from '@epfml/discojs-core'
-import { data, ConsoleLogger, EmptyMemory, Memory, Validator, LabelTypeEnum } from '@epfml/discojs-core'
+import { data, ConsoleLogger, EmptyMemory, Memory, Validator } from '@epfml/discojs-core'
 import { IndexedDB } from '@epfml/discojs'
 
 import { useMemoryStore } from '@/store/memory'
@@ -285,8 +283,6 @@ const numberOfClasses = computed<number>(() =>
   props.task.trainingInformation.LABEL_LIST?.length ?? 2)
 const isImageTaskType = computed<boolean>(() =>
   props.task.trainingInformation.dataType === 'image')
-const isPolygonMapVisualization = computed<boolean>(() =>
-  props.task.displayInformation.labelDisplay?.labelType === LabelTypeEnum.POLYGON_MAP)
 
 const memory = computed<Memory>(() => useIndexedDB ? new IndexedDB() : new EmptyMemory())
 const accuracyData = computed<number[]>(() => {
@@ -413,20 +409,6 @@ async function assessModel (): Promise<void> {
   }
 }
 
-function openMapModal (prediction?: number, groundTruth?: number) {
-  const baseUrl = props.task.displayInformation.labelDisplay?.mapBaseUrl
-  if (isPolygonMapVisualization.value && baseUrl) {
-    const correctColor = '274C78'
-    const errorColor = 'FF0000'
-
-    if (groundTruth && groundTruth !== prediction) {
-      mapModalUrl.value = `${baseUrl}?cellIds=${prediction},${groundTruth}&colors=${errorColor},${correctColor}`
-    } else {
-      mapModalUrl.value = `${baseUrl}?cellIds=${prediction}&colors=${correctColor}`
-    }
-  }
-}
-
 function saveCsv () {
   if (downloadLink.value === undefined) {
     throw new Error("asked to download CSV but page yet rendered")

From b6ef8e598d49e2af8829f2180001e2ce4d081cfd Mon Sep 17 00:00:00 2001
From: Julien Vignoud <julien.vignoud@epfl.ch>
Date: Wed, 8 May 2024 15:18:00 +0200
Subject: [PATCH 35/37] Remove unused task tradeoffs and limitations

---
 discojs/discojs-core/src/default_tasks/cifar10.ts     |  2 --
 discojs/discojs-core/src/default_tasks/lus_covid.ts   |  1 -
 discojs/discojs-core/src/default_tasks/mnist.ts       |  1 -
 discojs/discojs-core/src/default_tasks/simple_face.ts |  2 --
 discojs/discojs-core/src/default_tasks/titanic.ts     |  1 -
 discojs/discojs-core/src/default_tasks/wikitext.ts    |  2 --
 discojs/discojs-core/src/task/display_information.ts  | 10 +---------
 web-client/src/task_creation_form.ts                  |  9 ---------
 8 files changed, 1 insertion(+), 27 deletions(-)

diff --git a/discojs/discojs-core/src/default_tasks/cifar10.ts b/discojs/discojs-core/src/default_tasks/cifar10.ts
index da66adc58..8202e94a9 100644
--- a/discojs/discojs-core/src/default_tasks/cifar10.ts
+++ b/discojs/discojs-core/src/default_tasks/cifar10.ts
@@ -13,8 +13,6 @@ export const cifar10: TaskProvider = {
           preview: 'In this challenge, we ask you to classify images into categories based on the objects shown on the image.',
           overview: 'The CIFAR-10 dataset is a collection of images that are commonly used to train machine learning and computer vision algorithms. It is one of the most widely used datasets for machine learning research.'
         },
-        limitations: 'The training data is limited to small images of size 32x32.',
-        tradeoffs: 'Training success strongly depends on label distribution',
         dataFormatInformation: 'Images should be of .png format and of size 32x32. <br> The label file should be .csv, where each row contains a file_name, class.  <br> <br> e.g. if you have images: 0.png (of a frog) and 1.png (of a car) <br> labels.csv contains: (Note that no header is needed)<br> 0.png, frog <br> 1.png, car',
         dataExampleText: 'Below you can find 10 random examples from each of the 10 classes in the dataset.',
         dataExampleImage: 'https://storage.googleapis.com/deai-313515.appspot.com/example_training_data/cifar10-example.png',
diff --git a/discojs/discojs-core/src/default_tasks/lus_covid.ts b/discojs/discojs-core/src/default_tasks/lus_covid.ts
index 54492dbc6..a0fa1366a 100644
--- a/discojs/discojs-core/src/default_tasks/lus_covid.ts
+++ b/discojs/discojs-core/src/default_tasks/lus_covid.ts
@@ -14,7 +14,6 @@ export const lusCovid: TaskProvider = {
           overview: "Don’t have a dataset of your own? Download a sample of a few cases <a class='underline' href='https://drive.switch.ch/index.php/s/zM5ZrUWK3taaIly' target='_blank'>here</a>."
         },
         model: "We use a simplified* version of the <b>DeepChest model</b>: A deep learning model developed in our lab (<a class='underline' href='https://www.epfl.ch/labs/mlo/igh-intelligent-global-health/'>intelligent Global Health</a>.). On a cohort of 400 Swiss patients suspected of LRTI, the model obtained over 90% area under the ROC curve for this task. <br><br>*Simplified to ensure smooth running on your browser, the performance is minimally affected. Details of the adaptations are below <br>- <b>Removed</b>: positional embedding (i.e. we don’t take the anatomic position into consideration). Rather, the model now does mean pooling over the feature vector of the images for each patient <br>- <b>Replaced</b>: ResNet18 by Mobilenet",
-        tradeoffs: 'We are using a simpler version of DeepChest in order to be able to run it on the browser.',
         dataFormatInformation: 'This model takes as input an image dataset. It consists on a set of lung ultrasound images per patient with its corresponding label of covid positive or negative. Moreover, to identify the images per patient you have to follow the follwing naming pattern: "patientId_*.png"',
         dataExampleText: 'Below you can find an example of an expected lung image for patient 2 named: 2_QAID_1.masked.reshaped.squared.224.png',
         dataExampleImage: 'https://storage.googleapis.com/deai-313515.appspot.com/example_training_data/2_QAID_1.masked.reshaped.squared.224.png',
diff --git a/discojs/discojs-core/src/default_tasks/mnist.ts b/discojs/discojs-core/src/default_tasks/mnist.ts
index 4e0b62ee6..5c285b4c2 100644
--- a/discojs/discojs-core/src/default_tasks/mnist.ts
+++ b/discojs/discojs-core/src/default_tasks/mnist.ts
@@ -14,7 +14,6 @@ export const mnist: TaskProvider = {
           overview: 'The MNIST handwritten digit classification problem is a standard dataset used in computer vision and deep learning. Although the dataset is effectively solved, we use it to test our Decentralised Learning algorithms and platform.'
         },
         model: 'The current model is a very simple CNN and its main goal is to test the app and the Decentralizsed Learning functionality.',
-        tradeoffs: 'We are using a simple model, first a 2d convolutional layer > max pooling > 2d convolutional layer > max pooling > convolutional layer > 2 dense layers.',
         dataFormatInformation: 'This model is trained on images corresponding to digits 0 to 9. You can upload each digit image of your dataset in the box corresponding to its label. The model taskes images of size 28x28 as input.',
         dataExampleText: 'Below you can find an example of an expected image representing the digit 9.',
         dataExampleImage: 'http://storage.googleapis.com/deai-313515.appspot.com/example_training_data/9-mnist-example.png'
diff --git a/discojs/discojs-core/src/default_tasks/simple_face.ts b/discojs/discojs-core/src/default_tasks/simple_face.ts
index 8d5df19b3..82be26e72 100644
--- a/discojs/discojs-core/src/default_tasks/simple_face.ts
+++ b/discojs/discojs-core/src/default_tasks/simple_face.ts
@@ -13,8 +13,6 @@ export const simpleFace: TaskProvider = {
           preview: 'Can you detect if the person in a picture is a child or an adult?',
           overview: 'Simple face is a small subset of face_task from Kaggle'
         },
-        limitations: 'The training data is limited to small images of size 200x200.',
-        tradeoffs: 'Training success strongly depends on label distribution',
         dataFormatInformation: '',
         dataExampleText: 'Below you find an example',
         dataExampleImage: 'https://storage.googleapis.com/deai-313515.appspot.com/example_training_data/simple_face-example.png'
diff --git a/discojs/discojs-core/src/default_tasks/titanic.ts b/discojs/discojs-core/src/default_tasks/titanic.ts
index fba223e32..9f23e2c93 100644
--- a/discojs/discojs-core/src/default_tasks/titanic.ts
+++ b/discojs/discojs-core/src/default_tasks/titanic.ts
@@ -14,7 +14,6 @@ export const titanic: TaskProvider = {
           overview: 'We all know the unfortunate story of the Titanic: this flamboyant new transatlantic boat that sunk in 1912 in the North Atlantic Ocean. Today, we revist this tragedy by trying to predict the survival odds of the passenger given some basic features.'
         },
         model: 'The current model does not normalize the given data and applies only a very simple pre-processing of the data.',
-        tradeoffs: 'We are using a small model for this task: 4 fully connected layers with few neurons. This allows fast training but can yield to reduced accuracy.',
         dataFormatInformation: 'This model takes as input a CSV file with 12 columns. The features are general information about the passenger (sex, age, name, etc.) and specific related Titanic data such as the ticket class bought by the passenger, its cabin number, etc.<br><br>pclass: A proxy for socio-economic status (SES)<br>1st = Upper<br>2nd = Middle<br>3rd = Lower<br><br>age: Age is fractional if less than 1. If the age is estimated, it is in the form of xx.5<br><br>sibsp: The dataset defines family relations in this way:<br>Sibling = brother, sister, stepbrother, stepsister<br>Spouse = husband, wife (mistresses and fiancés were ignored)<br><br>parch: The dataset defines family relations in this way:<br>Parent = mother, father<br>Child = daughter, son, stepdaughter, stepson<br>Some children travelled only with a nanny, therefore parch=0 for them.<br><br>The first line of the CSV contains the header:<br> PassengerId, Survived, Pclass, Name, Sex, Age, SibSp, Parch, Ticket, Fare, Cabin, Embarked<br><br>Each susequent row contains the corresponding data.',
         dataExampleText: 'Below one can find an example of a datapoint taken as input by our model. In this datapoint, the person is young man named Owen Harris that unfortunnalty perished with the Titanic. He boarded the boat in South Hamptons and was a 3rd class passenger. On the testing & validation page, the data should not contain the label column (Survived).',
         dataExample: [
diff --git a/discojs/discojs-core/src/default_tasks/wikitext.ts b/discojs/discojs-core/src/default_tasks/wikitext.ts
index 22671e9de..deb657c32 100644
--- a/discojs/discojs-core/src/default_tasks/wikitext.ts
+++ b/discojs/discojs-core/src/default_tasks/wikitext.ts
@@ -11,8 +11,6 @@ export const wikitext: TaskProvider = {
           preview: 'In this challenge, we ask you to do next word prediction on a dataset of Wikipedia articles.',
           overview: 'Wikitext-103-raw is a dataset comprising unprocessed text excerpts from Wikipedia articles, designed for tasks related to natural language processing and language modeling.'
         },
-        limitations: 'The dataset may contain noise, inconsistencies, and unstructured content due to its raw nature, potentially posing challenges for certain NLP tasks.',
-        tradeoffs: 'The raw format may lack structured annotations and may require additional preprocessing for specific applications.',
         dataFormatInformation: 'The dataset is organized as a large text file, with each line representing a segment of raw text from Wikipedia articles.',
         dataExampleText: 'An example excerpt from the dataset could be: "The history of artificial intelligence dates back to ancient times, with philosophical discussions on the nature of thought and reasoning."',
         sampleDatasetLink: 'https://dax-cdn.cdn.appdomain.cloud/dax-wikitext-103/1.0.1/wikitext-103.tar.gz'
diff --git a/discojs/discojs-core/src/task/display_information.ts b/discojs/discojs-core/src/task/display_information.ts
index 8c5488786..2fa5a0e30 100644
--- a/discojs/discojs-core/src/task/display_information.ts
+++ b/discojs/discojs-core/src/task/display_information.ts
@@ -4,7 +4,6 @@ import { type DataExample, isDataExample } from './data_example.js'
 export interface DisplayInformation {
   taskTitle: string
   summary: Summary
-  tradeoffs?: string
   dataFormatInformation?: string
   // TODO merge dataExample
   dataExampleText?: string
@@ -17,7 +16,6 @@ export interface DisplayInformation {
   dataExampleImage?: string
   // URL to download a dataset for the task, is displayed in the UI when asking to connect data
   sampleDatasetLink?: string
-  limitations?: string
 }
 
 export function isDisplayInformation (raw: unknown): raw is DisplayInformation {
@@ -32,11 +30,9 @@ export function isDisplayInformation (raw: unknown): raw is DisplayInformation {
     dataFormatInformation,
     sampleDatasetLink,
     headers,
-    limitations,
     model,
     summary,
     taskTitle,
-    tradeoffs
   }: Partial<Record<keyof DisplayInformation, unknown>> = raw
 
   if (
@@ -44,10 +40,8 @@ export function isDisplayInformation (raw: unknown): raw is DisplayInformation {
     (dataExampleText !== undefined && typeof dataExampleText !== 'string') ||
     (sampleDatasetLink !== undefined && typeof sampleDatasetLink !== 'string') ||
     (dataFormatInformation !== undefined && typeof dataFormatInformation !== 'string') ||
-    (tradeoffs !== undefined && typeof tradeoffs !== 'string') ||
     (model !== undefined && typeof model !== 'string') ||
-    (dataExampleImage !== undefined && typeof dataExampleImage !== 'string') ||
-    (limitations !== undefined && typeof limitations !== 'string')
+    (dataExampleImage !== undefined && typeof dataExampleImage !== 'string')
   ) {
     return false
   }
@@ -92,11 +86,9 @@ export function isDisplayInformation (raw: unknown): raw is DisplayInformation {
     dataFormatInformation,
     sampleDatasetLink,
     headers,
-    limitations,
     model,
     summary,
     taskTitle,
-    tradeoffs,
   }
   const _correct: DisplayInformation = repack
   const _total: Record<keyof DisplayInformation, unknown> = repack
diff --git a/web-client/src/task_creation_form.ts b/web-client/src/task_creation_form.ts
index 80b446b9b..861f24a23 100644
--- a/web-client/src/task_creation_form.ts
+++ b/web-client/src/task_creation_form.ts
@@ -109,15 +109,6 @@ export const displayInformation: FormSection = {
       default:
         'The current model is a very simple CNN and its main goal is to test the app and the Decentralizsed Learning functionality.'
     },
-    {
-      id: 'tradeoffs',
-      name: 'Model Tradeoffs',
-      yup: yup.string(),
-      as: 'textarea',
-      type: 'text',
-      default:
-        'We are using a simple model, first a 2d convolutional layer > max pooling > 2d convolutional layer > max pooling > convolutional layer > 2 dense layers.'
-    },
     {
       id: 'dataFormatInformation',
       name: 'Data Format Information',

From 708dae60c28c394419f347a4afae6409749aa491 Mon Sep 17 00:00:00 2001
From: Julien Vignoud <julien.vignoud@epfl.ch>
Date: Wed, 8 May 2024 15:20:41 +0200
Subject: [PATCH 36/37] Add missing Repeat import

---
 cli/src/data.ts                                    | 2 +-
 discojs/discojs-node/src/data/image_loader.spec.ts | 2 +-
 server/tests/e2e/federated.spec.ts                 | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/cli/src/data.ts b/cli/src/data.ts
index b18c09866..8537ebb52 100644
--- a/cli/src/data.ts
+++ b/cli/src/data.ts
@@ -1,4 +1,4 @@
-import { Range } from 'immutable'
+import { Range, Repeat } from 'immutable'
 import fs from 'node:fs/promises'
 import path from 'node:path'
 
diff --git a/discojs/discojs-node/src/data/image_loader.spec.ts b/discojs/discojs-node/src/data/image_loader.spec.ts
index f3e8222bc..dd0a15074 100644
--- a/discojs/discojs-node/src/data/image_loader.spec.ts
+++ b/discojs/discojs-node/src/data/image_loader.spec.ts
@@ -1,5 +1,5 @@
 import { assert, expect } from 'chai'
-import { List, Range } from 'immutable'
+import { List, Range, Repeat } from 'immutable'
 import fs from 'node:fs/promises'
 import * as tf from '@tensorflow/tfjs'
 import { node as tfNode } from '@tensorflow/tfjs-node'
diff --git a/server/tests/e2e/federated.spec.ts b/server/tests/e2e/federated.spec.ts
index 536fb9b5f..e7976b947 100644
--- a/server/tests/e2e/federated.spec.ts
+++ b/server/tests/e2e/federated.spec.ts
@@ -1,7 +1,7 @@
 import fs from 'node:fs/promises'
 import path from 'node:path'
 import type { Server } from 'node:http'
-import { List, Range } from 'immutable'
+import { List, Repeat } from 'immutable'
 import { assert, expect } from 'chai'
 
 import type { RoundLogs, WeightsContainer } from '@epfml/discojs-core'

From 1ae94e3e5ccc3f76ee38fd8348b4182dc6cb987b Mon Sep 17 00:00:00 2001
From: Julien Vignoud <julien.vignoud@epfl.ch>
Date: Wed, 8 May 2024 15:42:52 +0200
Subject: [PATCH 37/37] Update Aobut Us design

---
 web-client/src/components/pages/AboutUs.vue | 34 +++++++--------------
 1 file changed, 11 insertions(+), 23 deletions(-)

diff --git a/web-client/src/components/pages/AboutUs.vue b/web-client/src/components/pages/AboutUs.vue
index b7daa6e7e..12a5338ea 100644
--- a/web-client/src/components/pages/AboutUs.vue
+++ b/web-client/src/components/pages/AboutUs.vue
@@ -1,25 +1,13 @@
 <template>
-  <div class="grid grid-cols-1 gap-4 p-4 lg:grid-cols-1 xl:grid-cols-1">
-    <Card custom-class="hover:text-primary dark:hover:text-light">
-      <div class="ml-10">
-        <h6
-          class="
-                text-xl
-                font-large
-                leading-none
-                tracking-wider
-                dark:group-hover:text-light
-                p-2
-                py-6
-              "
-        >
-          About Us
-        </h6>
+  <div class="flex justify-center">
+    <IconCard class="justify-self-center w-full lg:w-4/5">
+      <template #title>
+        About Us
+      </template>
+      <template #content>
         <img src="../../assets/images/mlologo.png">
-        <ul class="text-lg ont-semibold text-gray-500 dark:text-light p-4">
-          This app was developed in the Machine Learning and Optimization
-          Laboratory at EPFL.
-          <br>
+        This app was developed in the Machine Learning and Optimization Laboratory at EPFL.
+        <ul>
           Visit the our
           <a
             href="https://www.epfl.ch/labs/mlo/"
@@ -52,11 +40,11 @@
           >Slack</a>
           page to discuss the app.
         </ul>
-      </div>
-    </Card>
+      </template>
+    </IconCard>
   </div>
 </template>
 
 <script lang="ts" setup>
-  import Card from '@/components/containers/Card.vue'
+import IconCard from '@/components/containers/IconCard.vue'
 </script>