UI tweaks

DEV.md

@@ -77,7 +77,7 @@ npm ci
 
 **4.** Build the projects
 
-Then we need to builds the packages meaning compile TypeScript into JavaScript.
+Then we need to build the packages, which means to compile TypeScript into JavaScript.
 
 Disco is split in multiple packages, called workspaces in NPM, which are described in the [Structure Section](#structure).
 You can add `--workspaces` (or shorter as `-ws`) to many `npm` commands to act on all packages.

discojs/src/client/decentralized/base.ts

@@ -37,7 +37,7 @@ export class Base extends Client {
 
     // Wait for peers to be connected before sending any update information
     try {
-      const receivedMessage = await waitMessageWithTimeout(this.server, type.PeersForRound)
+      const receivedMessage = await waitMessageWithTimeout(this.server, type.PeersForRound, undefined, "Timeout waiting for the round's peer list")
       if (this.nodes.size > 0) {
         throw new Error('got new peer list from server but was already received for this round')
       }
@@ -190,14 +190,16 @@ export class Base extends Client {
           throw new Error('error while sending weights')
         }
       }
-
       if (this.aggregationResult === undefined) {
         throw new TypeError('aggregation result promise is undefined')
       }
 
       // Wait for aggregation before proceeding to the next communication round.
       // The current result will be used as payload for the eventual next communication round.
-      result = await Promise.race([this.aggregationResult, timeout()])
+      result = await Promise.race([
+        this.aggregationResult,
+        timeout(undefined, "Timeout waiting on the aggregation result promise to resolve")
+      ])
 
       // There is at least one communication round remaining
       if (r < this.aggregator.communicationRounds - 1) {
@@ -216,14 +218,15 @@ export class Base extends Client {
       let receivedPayloads = 0
       do {
         try {
-          const message = await waitMessageWithTimeout(connection, type.Payload)
+          const message = await waitMessageWithTimeout(connection, type.Payload,
+            undefined, "Timeout waiting for a contribution from peer " + peerId)
           const decoded = serialization.weights.decode(message.payload)
 
           if (!this.aggregator.add(peerId, decoded, round, message.round)) {
             console.warn(`[${this.ownId}] Failed to add contribution from peer ${peerId}`)
           }
         } catch (e) {
-          console.warn(e instanceof Error ? e.message : e)
+          console.error(e instanceof Error ? e.message : e)
         }
       } while (++receivedPayloads < this.aggregator.communicationRounds)
     })

discojs/src/client/event_connection.ts

@@ -24,8 +24,12 @@ export async function waitMessage<T extends type> (connection: EventConnection,
   })
 }
 
-export async function waitMessageWithTimeout<T extends type> (connection: EventConnection, type: T, timeoutMs?: number): Promise<NarrowMessage<T>> {
-  return await Promise.race([waitMessage(connection, type), timeout(timeoutMs)])
+export async function waitMessageWithTimeout<T extends type>(
+  connection: EventConnection,
+  type: T, timeoutMs?: number,
+  errorMsg: string = 'timeout'): Promise<NarrowMessage<T>> {
+
+  return await Promise.race([waitMessage(connection, type), timeout(timeoutMs, errorMsg)])
 }
 
 export class PeerConnection extends EventEmitter<{ [K in type]: NarrowMessage<K> }> implements EventConnection {

discojs/src/client/messages.ts

@@ -8,7 +8,6 @@ export enum type {
 
   // Decentralized
   SignalForPeer,
-
   PeerIsReady,
   PeersForRound,
 

discojs/src/client/utils.ts

@@ -1,8 +1,8 @@
 // Time to wait for the others in milliseconds.
 export const MAX_WAIT_PER_ROUND = 15_000
 
-export async function timeout (ms = MAX_WAIT_PER_ROUND): Promise<never> {
+export async function timeout (ms = MAX_WAIT_PER_ROUND, errorMsg: string = 'timeout'): Promise<never> {
   return await new Promise((_, reject) => {
-    setTimeout(() => { reject(new Error('timeout')) }, ms)
+    setTimeout(() => { reject(new Error(errorMsg)) }, ms)
   })
 }

discojs/src/default_tasks/lus_covid.ts

@@ -32,11 +32,6 @@ export const lusCovid: TaskProvider = {
         LABEL_LIST: ['COVID-Positive', 'COVID-Negative'],
         dataType: 'image',
         scheme: 'federated',
-        noiseScale: undefined,
-        clippingRadius: 20,
-        decentralizedSecure: true,
-        minimumReadyPeers: 2,
-        maxShareValue: 100,
         tensorBackend: 'tfjs'
       }
     }

discojs/src/default_tasks/mnist.ts

@@ -33,7 +33,7 @@ export const mnist: TaskProvider = {
         LABEL_LIST: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'],
         scheme: 'decentralized',
         noiseScale: undefined,
-        clippingRadius: 20,
+        clippingRadius: undefined,
         decentralizedSecure: true,
         minimumReadyPeers: 3,
         maxShareValue: 100,

discojs/src/models/gpt/config.ts

@@ -35,7 +35,7 @@ export const DEFAULT_CONFIG: Required<GPTConfig> = {
   name: 'transformer',
   lr: 0.001,
   weightDecay: 0,
-  maxIter: 5,
+  maxIter: 10,
   verbose: 0,
   modelType: 'gpt-nano',
   evaluate: true,

server/src/router/decentralized/server.ts

@@ -96,7 +96,6 @@ export class Decentralized extends Server {
               throw new Error(`task ${task.id} doesn't exist in ready buffer`)
             }
             this.readyNodes = this.readyNodes.set(task.id, peers)
-
             if (peers.size >= minimumReadyPeers) {
               this.readyNodes = this.readyNodes.set(task.id, Set())
 

server/tests/validator.spec.ts

@@ -132,8 +132,8 @@ describe('validator', function () {
       `Expected ${size} visited samples but got ${validator.visitedSamples}`
     )
     assert(
-      validator.accuracy > 0.4,
-      `Expected random weight init accuracy greater than 0.4 but got ${validator.accuracy}`
+      validator.accuracy > 0.3,
+      `Expected random weight init accuracy greater than 0.3 but got ${validator.accuracy}`
     )
   }).timeout(1000)
 

webapp/cypress/e2e/library.cy.ts

@@ -103,9 +103,9 @@ describe("model library", () => {
     cy.contains("button", "next").click();
 
     cy.contains("button", "train alone").click();
-    cy.contains("h6", "current round")
+    cy.contains("h6", "epochs")
       .next({ timeout: 10_000 })
-      .should("have.text", "1");
+      .should("have.text", "3 / 3");
     cy.contains("button", "next").click();
 
     // TODO do not save by default, only via "save model" button

webapp/cypress/e2e/tasks.cy.ts

@@ -6,11 +6,12 @@ describe("tasks page", () => {
       defaultTasks.titanic.getTask(),
       defaultTasks.mnist.getTask(),
       defaultTasks.lusCovid.getTask(),
+      defaultTasks.wikitext.getTask(),
     ]);
     cy.visit("/#/list");
 
-    // Length 4 = 3 tasks and 1 div for text description
-    cy.get('div[id="tasks"]').children().should("have.length", 4);
+    // Length 5 = 4 tasks and 1 div for text description
+    cy.get('div[id="tasks"]').children().should("have.length", 5);
   });
 
   it("redirects to training", () => {

webapp/cypress/e2e/training.cy.ts

@@ -56,9 +56,9 @@ describe("training page", () => {
     cy.contains("button", "next").click();
 
     cy.contains("button", "train alone").click();
-    cy.contains("h6", "current round")
+    cy.contains("h6", "epochs")
       .next({ timeout: 40_000 })
-      .should("have.text", "2");
+      .should("have.text", "40 / 40");
     cy.contains("button", "next").click();
 
     cy.contains("button", "test model").click();

webapp/package.json

@@ -13,7 +13,7 @@
   "dependencies": {
     "@epfml/discojs": "*",
     "@epfml/discojs-web": "*",
-    "apexcharts": "3",
+    "apexcharts": "3.50",
     "cypress": "13",
     "d3": "7",
     "immutable": "4",

webapp/src/assets/gif/DiscoGIF.vue

@@ -1,5 +1,8 @@
 <template>
-  <img src="https://storage.googleapis.com/deai-313515.appspot.com/gifs/disco_middle.gif">
+  <img 
+    style="max-height:500px; max-width:500px; height:auto; width:auto;"
+    src="https://storage.googleapis.com/deai-313515.appspot.com/gifs/disco_middle.gif" 
+  />
 </template>
 <script lang="ts">
 import { defineComponent } from 'vue'

webapp/src/assets/svg/FeedbackIcon.vue

@@ -0,0 +1,52 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="currentColor"
+    :class="customClass"
+    :viewBox="viewBox"
+  >
+    <g>
+      <g>
+      <path d="M197.33,395.905c-54.065,0-98.051-43.98-98.051-98.04c0-54.065,43.985-98.05,98.051-98.05    c11.189,0,22.169,1.875,32.632,5.571c3.972,1.403,6.638,5.144,6.669,9.355c0.24,32.773,21.16,62.115,52.055,73.013    c3.846,1.356,6.482,4.913,6.664,8.986c0.016,0.363,0.02,0.744,0.02,1.125C295.369,351.924,251.389,395.905,197.33,395.905z     M197.33,219.815c-43.037,0-78.051,35.013-78.051,78.05c0,43.031,35.014,78.04,78.051,78.04c41.006,0,74.727-31.79,77.81-72.02    c-32.749-14.438-55.187-45.902-58.172-81.578C210.59,220.652,204.009,219.815,197.33,219.815z" fill="#444B54"/>
+      </g>
+    <g>
+    <path d="M314.67,312.185c-11.196,0-22.179-1.875-32.642-5.571c-38.758-13.671-65.021-50.45-65.396-91.552    c-0.011-0.305-0.014-0.616-0.014-0.917c0-54.065,43.985-98.05,98.051-98.05s98.051,43.985,98.051,98.05    C412.721,268.205,368.735,312.185,314.67,312.185z M314.67,136.095c-43.037,0-78.051,35.013-78.051,78.05l0.001,0.216    c0.008,0.153,0.01,0.228,0.011,0.381c0.24,32.773,21.159,62.115,52.055,73.013c8.323,2.94,17.063,4.431,25.984,4.431    c43.037,0,78.051-35.009,78.051-78.04C392.721,171.108,357.707,136.095,314.67,136.095z" fill="#444B54"/>
+    </g>
+    <g>
+    <path d="M167.055,335.666c-2.56,0-5.118-0.976-7.071-2.929c-3.905-3.905-3.905-10.237,0-14.142l51.779-51.778    c3.907-3.905,10.237-3.905,14.143,0s3.905,10.237,0,14.142l-51.779,51.778C172.173,334.689,169.613,335.666,167.055,335.666z" fill="#444B54"/>
+    </g>
+    <g>
+    <path d="M218.834,335.666c-2.56,0-5.118-0.976-7.071-2.929l-51.779-51.78c-3.905-3.905-3.905-10.237,0-14.142    c3.907-3.905,10.237-3.905,14.143,0l51.779,51.78c3.905,3.905,3.905,10.237,0,14.142    C223.952,334.689,221.393,335.666,218.834,335.666z" fill="#444B54"/>
+    </g>
+    <g>
+    <path d="M299.19,252.681c-0.291,0-0.582-0.013-0.873-0.038c-2.944-0.258-5.623-1.805-7.318-4.225l-23.02-32.866    c-3.169-4.523-2.07-10.759,2.453-13.928c4.523-3.168,10.76-2.07,13.928,2.454l16.187,23.109l45.554-45.526    c3.908-3.905,10.238-3.902,14.143,0.004s3.902,10.238-0.004,14.142l-53.98,53.947C304.375,251.636,301.829,252.681,299.19,252.681    z" fill="#444B54"/>
+    </g>
+    <g>
+    <path d="M285.369,297.865c0,48.62-39.42,88.04-88.039,88.04c-48.631,0-88.051-39.42-88.051-88.04    c0-48.63,39.42-88.05,88.051-88.05c10.27,0,20.131,1.76,29.301,5c0.279,38.06,24.709,70.37,58.729,82.37    C285.369,297.405,285.369,297.635,285.369,297.865z" fill="transparent"/>
+    <path d="M197.33,395.905c-54.065,0-98.051-43.98-98.051-98.04c0-54.065,43.985-98.05,98.051-98.05    c11.189,0,22.169,1.875,32.632,5.571c3.972,1.403,6.638,5.144,6.669,9.355c0.24,32.773,21.16,62.115,52.055,73.013    c3.846,1.356,6.482,4.913,6.664,8.986c0.016,0.363,0.02,0.744,0.02,1.125C295.369,351.924,251.389,395.905,197.33,395.905z     M197.33,219.815c-43.037,0-78.051,35.013-78.051,78.05c0,43.031,35.014,78.04,78.051,78.04c41.006,0,74.727-31.79,77.81-72.02    c-32.749-14.438-55.187-45.902-58.172-81.578C210.59,220.652,204.009,219.815,197.33,219.815z" fill="#444B54"/>
+    </g>
+    <g>
+    <path d="M402.721,214.145c0,48.62-39.43,88.04-88.051,88.04c-10.279,0-20.141-1.76-29.311-5    c-34.02-12-58.449-44.31-58.729-82.37c-0.012-0.22-0.012-0.45-0.012-0.67c0-48.63,39.422-88.05,88.051-88.05    C363.291,126.095,402.721,165.515,402.721,214.145z" fill="transparent"/>
+    <path d="M314.67,312.185c-11.196,0-22.179-1.875-32.642-5.571c-38.758-13.671-65.021-50.45-65.396-91.552    c-0.011-0.305-0.014-0.616-0.014-0.917c0-54.065,43.985-98.05,98.051-98.05s98.051,43.985,98.051,98.05    C412.721,268.205,368.735,312.185,314.67,312.185z M314.67,136.095c-43.037,0-78.051,35.013-78.051,78.05l0.001,0.216    c0.008,0.153,0.01,0.228,0.011,0.381c0.24,32.773,21.159,62.115,52.055,73.013c8.323,2.94,17.063,4.431,25.984,4.431    c43.037,0,78.051-35.009,78.051-78.04C392.721,171.108,357.707,136.095,314.67,136.095z" fill="#444B54"/>
+    </g>
+    <g>
+    <path d="M167.055,335.666c-2.56,0-5.118-0.976-7.071-2.929c-3.905-3.905-3.905-10.237,0-14.142l51.779-51.778    c3.907-3.905,10.237-3.905,14.143,0s3.905,10.237,0,14.142l-51.779,51.778C172.173,334.689,169.613,335.666,167.055,335.666z" fill="#444B54"/>
+    </g>
+    <g>
+    <path d="M218.834,335.666c-2.56,0-5.118-0.976-7.071-2.929l-51.779-51.78c-3.905-3.905-3.905-10.237,0-14.142    c3.907-3.905,10.237-3.905,14.143,0l51.779,51.78c3.905,3.905,3.905,10.237,0,14.142    C223.952,334.689,221.393,335.666,218.834,335.666z" fill="#444B54"/>
+    </g>
+    <g>
+    <path d="M299.19,252.681c-0.291,0-0.582-0.013-0.873-0.038c-2.944-0.258-5.623-1.805-7.318-4.225l-23.02-32.866    c-3.169-4.523-2.07-10.759,2.453-13.928c4.523-3.168,10.76-2.07,13.928,2.454l16.187,23.109l45.554-45.526    c3.908-3.905,10.238-3.902,14.143,0.004s3.902,10.238-0.004,14.142l-53.98,53.947C304.375,251.636,301.829,252.681,299.19,252.681    z" fill="#444B54"/>
+    </g>
+    </g>
+  </svg>
+</template>
+<script lang="ts">
+export default {
+  name: 'FeedbackIcon',
+  props: {
+    customClass: { default: 'w-8 h-8', type: String },
+    viewBox: { default: '0 0 512 512', type: String }
+  }
+}
+</script>

webapp/src/assets/svg/InfoIcon.vue

@@ -1,7 +1,7 @@
 <template>
   <svg
     xmlns="http://www.w3.org/2000/svg"
-    fill="none"
+    fill="currentColor"
     :class="customClass"
     :viewBox="viewBox"
     stroke="currentColor"

webapp/src/assets/svg/ModelExchangeIcon.vue

@@ -0,0 +1,21 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="currentColor"
+    :class="customClass"
+    :viewBox="viewBox"
+  >
+    <path d="M21.41,8.26l-.84,1.82a1,1,0,0,1-.91.57,1,1,0,0,1-.42-.09l-1.82-.85a1,1,0,0,1,.21-1.86A7.48,7.48,0,0,0,17,7a7.13,7.13,0,0,0-2.69-1.66,1,1,0,1,1,.62-1.9,9,9,0,0,1,3.48,2.15,8.9,8.9,0,0,1,1.31,1.69,1,1,0,0,1,1.74.94ZM9.74,18.62A7.13,7.13,0,0,1,7.05,17a6.4,6.4,0,0,1-.67-.81,1,1,0,0,0,.68-.53,1,1,0,0,0-.48-1.33l-1.82-.85a1,1,0,0,0-.76,0,1,1,0,0,0-.57.51l-.84,1.82a1,1,0,0,0,.48,1.33,1.07,1.07,0,0,0,.43.09,1,1,0,0,0,.84-.48,8.46,8.46,0,0,0,1.3,1.69,9,9,0,0,0,3.48,2.15,1.12,1.12,0,0,0,.31.05,1,1,0,0,0,.31-1.95Z">
+    </path>
+    <path d="M22,17a5,5,0,1,1-5-5A5,5,0,0,1,22,17ZM7,2a5,5,0,1,0,5,5A5,5,0,0,0,7,2Z"></path>
+  </svg>
+</template>
+<script lang="ts">
+export default {
+  name: 'ModelExchangeIcon',
+  props: {
+    customClass: { default: 'w-9 h-9', type: String },
+    viewBox: { default: '0 0 24 24', type: String }
+  }
+}
+</script>

webapp/src/assets/svg/Model.vue → webapp/src/assets/svg/ModelIcon.vue

@@ -16,7 +16,7 @@
 </template>
 <script lang="ts">
 export default {
-  name: 'Model',
+  name: 'ModelIcon',
   props: {
     customClass: { default: 'bi h-7 w-7 text-disco-cyan', type: String },
     viewBox: { default: '0 0 24 24', type: String }

webapp/src/assets/svg/ModelUpdateIcon.vue

@@ -0,0 +1,35 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="currentColor"
+    :class="customClass"
+    :viewBox="viewBox"
+  >
+	<path d="M19.5,28.1h-2.9c-0.5,0-0.9-0.3-1-0.8l-0.5-1.8c-0.2-0.1-0.2-0.1-0.4-0.2l-1.6,0.9c-0.4,0.2-0.9,0.2-1.2-0.2l-2.1-2.1
+				c-0.3-0.3-0.4-0.8-0.2-1.2l0.9-1.6c-0.1-0.2-0.1-0.2-0.2-0.4l-1.8-0.5c-0.4-0.1-0.8-0.5-0.8-1v-2.9c0-0.5,0.3-0.9,0.8-1l1.8-0.5
+				c0.1-0.2,0.1-0.2,0.2-0.4l-0.9-1.6c-0.2-0.4-0.2-0.9,0.2-1.2l2.1-2.1c0.3-0.3,0.8-0.4,1.2-0.2l1.6,0.9c0.2-0.1,0.2-0.1,0.4-0.2
+				l0.5-1.8c0.1-0.4,0.5-0.8,1-0.8h2.9c0.5,0,0.9,0.3,1,0.8l0.5,1.8c0.2,0.1,0.2,0.1,0.4,0.2l1.6-0.9c0.4-0.2,0.9-0.2,1.2,0.2
+				l2.1,2.1c0.3,0.3,0.4,0.8,0.2,1.2l-0.9,1.6c0.1,0.2,0.1,0.2,0.2,0.4l1.8,0.5c0.4,0.1,0.8,0.5,0.8,1v2.9c0,0.5-0.3,0.9-0.8,1
+				l-1.8,0.5c-0.1,0.2-0.1,0.2-0.2,0.4l0.9,1.6c0.2,0.4,0.2,0.9-0.2,1.2l-2.1,2.1c-0.3,0.3-0.8,0.4-1.2,0.2l-1.6-0.9
+				c-0.2,0.1-0.2,0.1-0.4,0.2l-0.5,1.8C20.3,27.8,19.9,28.1,19.5,28.1z M17.3,26.1h1.4l0.5-2.1l0.5-0.2c0.4-0.1,0.7-0.3,1.1-0.4
+				l0.5-0.3l1.9,1.1l1-1l-1.1-1.9l0.3-0.5c0.2-0.3,0.3-0.7,0.4-1.1l0.2-0.5l2.1-0.5v-1.4L24,16.8l-0.2-0.5c-0.1-0.4-0.3-0.7-0.4-1.1
+				l-0.3-0.5l1.1-1.9l-1-1l-1.9,1.1l-0.5-0.3c-0.3-0.2-0.7-0.3-1.1-0.4L19.2,12l-0.5-2.1h-1.4L16.8,12l-0.5,0.2
+				c-0.4,0.1-0.7,0.3-1.1,0.4l-0.5,0.3l-1.9-1.1l-1,1l1.1,1.9l-0.3,0.5c-0.2,0.3-0.3,0.7-0.4,1.1L12,16.8l-2.1,0.5v1.4l2.1,0.5
+				l0.2,0.5c0.1,0.4,0.3,0.7,0.4,1.1l0.3,0.5l-1.1,1.9l1,1l1.9-1.1l0.5,0.3c0.3,0.2,0.7,0.3,1.1,0.4l0.5,0.2L17.3,26.1z M27.1,19.5
+				L27.1,19.5L27.1,19.5z"/>
+	<path d="M18,22.3c-2.4,0-4.3-1.9-4.3-4.3s1.9-4.3,4.3-4.3c2.4,0,4.3,1.9,4.3,4.3S20.4,22.3,18,22.3z M18,15.7
+				c-1.3,0-2.3,1-2.3,2.3s1,2.3,2.3,2.3c1.3,0,2.3-1,2.3-2.3S19.3,15.7,18,15.7z"/>
+	<path d="M18,2c-0.6,0-1,0.4-1,1s0.4,1,1,1c7.7,0,14,6.3,14,14s-6.3,14-14,14S4,25.7,4,18c0-2.8,0.8-5.5,2.4-7.8v1.2
+		c0,0.6,0.4,1,1,1s1-0.4,1-1v-5h-5c-0.6,0-1,0.4-1,1s0.4,1,1,1h1.8C3.1,11.1,2,14.5,2,18c0,8.8,7.2,16,16,16s16-7.2,16-16
+		S26.8,2,18,2z"/>
+</svg>
+</template>
+<script lang="ts">
+export default {
+  name: 'ModelUpdateIcon',
+  props: {
+		customClass: { default: 'w-12 h-12  text-gray-400', type: String },
+    viewBox: { default: '-6 -6 48 48', type: String }
+  }
+}
+</script>

webapp/src/assets/svg/People.vue → webapp/src/assets/svg/PeopleIcon.vue

@@ -1,7 +1,7 @@
 <template>
   <svg
     xmlns="http://www.w3.org/2000/svg"
-    fill="none"
+    fill="currentColor"
     stroke="currentColor"
     :class="customClass"
     :viewBox="viewBox"
@@ -18,10 +18,10 @@
 </template>
 <script lang="ts">
 export default {
-  name: 'People',
+  name: 'PeopleIcon',
   props: {
     customClass: {
-      default: 'w-12 h-12 text-gray-300 dark:text-primary-dark',
+      default: 'w-12 h-12 text-gray-300',
       type: String
     },
     viewBox: { default: '-6 -3 24 24', type: String }

webapp/src/assets/svg/Performances.vue → webapp/src/assets/svg/PerformanceIcon.vue

@@ -17,7 +17,7 @@
 </template>
 <script lang="ts">
 export default {
-  name: 'Performances',
+  name: 'PerformanceIcon',
   props: {
     customClass: {
       default: 'w-12 h-12 text-gray-300 dark:text-primary-dark',

webapp/src/assets/svg/Tasks.vue → webapp/src/assets/svg/TasksIcon.vue

@@ -12,7 +12,7 @@
 </template>
 <script lang="ts">
 export default {
-  name: 'Tasks',
+  name: 'TasksIcon',
   props: {
     customClass: { default: 'bi bi-ui-checks w-7 h-7 text-disco-cyan', type: String },
     viewBox: { default: '0 0 16 16', type: String }