From 9a45069960086ced523aff426fc0a7623e839b0d Mon Sep 17 00:00:00 2001
From: Julien Vignoud <julien.vignoud@epfl.ch>
Date: Wed, 26 Aug 2026 13:58:37 +0200
Subject: [PATCH 01/12] fix: new lus_covid URL

---
 datasets/populate | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/datasets/populate b/datasets/populate
index 17a7d482c..41156afc0 100755
--- a/datasets/populate
+++ b/datasets/populate
@@ -10,10 +10,8 @@ curl 'https://storage.googleapis.com/deai-313515.appspot.com/example_training_da
 
 # lungs ultrasound
 mkdir -p lus_covid
-curl 'https://drive.switch.ch/index.php/s/zM5ZrUWK3taaIly/download' > archive.zip
-ln -fs lus_covid DeAI-testimages # redirect top level dir
-unzip -u archive.zip
-rm archive.zip DeAI-testimages
+curl 'https://storage.googleapis.com/deai-313515.appspot.com/lus_covid.tar.gz'|
+	tar -xz
 
 # wikitext
 mkdir -p wikitext

From 11b2909f0cbaad273b6e36894ebe5f31834bd37d Mon Sep 17 00:00:00 2001
From: Julien Vignoud <julien.vignoud@epfl.ch>
Date: Wed, 26 Aug 2026 12:31:07 +0200
Subject: [PATCH 02/12] fix: use tailwind's theme max-w-card instead of
 hardcoding 700px

---
 webapp/src/assets/css/tailwind.css                          | 5 +++++
 webapp/src/components/dataset_input/DataDescription.vue     | 2 +-
 webapp/src/components/dataset_input/DatasetInput.vue        | 2 +-
 .../dataset_input/LabeledImageDatasetInput/index.vue        | 4 +++-
 webapp/src/components/pages/TaskList.vue                    | 6 +++---
 webapp/src/components/testing/PredictSteps.vue              | 2 +-
 webapp/src/components/testing/TestSteps.vue                 | 4 ++--
 webapp/src/components/training/TrainerDashboard.vue         | 2 +-
 webapp/src/components/training/TrainingDescription.vue      | 2 +-
 webapp/src/components/training/TrainingFinished.vue         | 4 +++-
 webapp/src/components/training/TrainingInformation.vue      | 2 +-
 11 files changed, 22 insertions(+), 13 deletions(-)

diff --git a/webapp/src/assets/css/tailwind.css b/webapp/src/assets/css/tailwind.css
index e66dc68c1..a578db524 100644
--- a/webapp/src/assets/css/tailwind.css
+++ b/webapp/src/assets/css/tailwind.css
@@ -25,4 +25,9 @@
 
   --color-heading-light: #334155;
   --color-heading-dark: #fff;
+
+  /* width of a single content card, the page's content column */
+  --container-card: 700px;
+  /* two cards side by side, separated by `cards-gap` at md and above */
+  --container-cards-2: calc(2 * 700px + 2rem);
 }
diff --git a/webapp/src/components/dataset_input/DataDescription.vue b/webapp/src/components/dataset_input/DataDescription.vue
index 0382548a6..af41e8d73 100644
--- a/webapp/src/components/dataset_input/DataDescription.vue
+++ b/webapp/src/components/dataset_input/DataDescription.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="mx-auto w-full max-w-[700px] space-y-4 md:space-y-8">
+  <div class="mx-auto w-full max-w-card space-y-4 md:space-y-8">
     <DropdownCard>
       <template #title> Expected Data Format </template>
 
diff --git a/webapp/src/components/dataset_input/DatasetInput.vue b/webapp/src/components/dataset_input/DatasetInput.vue
index efe213c61..53c46f75e 100644
--- a/webapp/src/components/dataset_input/DatasetInput.vue
+++ b/webapp/src/components/dataset_input/DatasetInput.vue
@@ -1,5 +1,5 @@
 <template>
-  <IconCard class="justify-self-center mx-auto w-full max-w-[700px]">
+  <IconCard class="justify-self-center mx-auto w-full max-w-card">
     <template #title> Connect your data </template>
     <template #icon> <PlugIcon /> </template>
 
diff --git a/webapp/src/components/dataset_input/LabeledImageDatasetInput/index.vue b/webapp/src/components/dataset_input/LabeledImageDatasetInput/index.vue
index 57c3857fe..16697eb72 100644
--- a/webapp/src/components/dataset_input/LabeledImageDatasetInput/index.vue
+++ b/webapp/src/components/dataset_input/LabeledImageDatasetInput/index.vue
@@ -1,5 +1,7 @@
 <template>
-  <div class="flex flex-col cards-gap">
+  <div
+    class="mx-auto w-full max-w-card lg:max-w-cards-2 flex flex-col cards-gap"
+  >
     <DatasetInput>
       <div class="mb-5 text-left">
         You can connect images by selecting the location of each data category
diff --git a/webapp/src/components/pages/TaskList.vue b/webapp/src/components/pages/TaskList.vue
index 443c6a7e9..46af1d76f 100644
--- a/webapp/src/components/pages/TaskList.vue
+++ b/webapp/src/components/pages/TaskList.vue
@@ -4,7 +4,7 @@
     <ButtonsCard
       v-if="sortedTasks === 'failed'"
       :buttons="List.of(['reload page', () => router.go(0)])"
-      class="mx-auto"
+      class="mx-auto max-w-card"
     >
       <template #title> The server is unreachable </template>
       Please reload the app and make sure you are connected to internet.
@@ -13,7 +13,7 @@
     <!-- Tasks could be retrieved, display them alphabetically -->
     <div v-else class="contents">
       <div
-        class="max-w-[700px] lg:max-w-full mx-auto flex flex-col lg:flex-row justify-center items-start"
+        class="max-w-card lg:max-w-full mx-auto flex flex-col lg:flex-row justify-center items-start"
       >
         <!-- swap ordering with screen width to ensure text is at the top on narrow screens and on the right on wide ones-->
         <div
@@ -63,7 +63,7 @@
         <div
           v-else
           id="tasks"
-          class="order-2 lg:order-1 w-full max-w-[700px] flex flex-col gap-y-4 lg:px-8"
+          class="order-2 lg:order-1 w-full max-w-card flex flex-col gap-y-4 lg:px-8"
         >
           <div v-for="task in sortedTasks" :id="task.id" :key="task.id">
             <ButtonsCard
diff --git a/webapp/src/components/testing/PredictSteps.vue b/webapp/src/components/testing/PredictSteps.vue
index c1b6db1eb..ee5798d72 100644
--- a/webapp/src/components/testing/PredictSteps.vue
+++ b/webapp/src/components/testing/PredictSteps.vue
@@ -22,7 +22,7 @@
   </div>
 
   <div v-show="validationStore.step === 2">
-    <div class="space-y-8 mb-8 w-full lg:max-w-[700px] mx-auto">
+    <div class="space-y-8 mb-8 w-full lg:max-w-card mx-auto">
       <IconCard>
         <template #title> Run model inference </template>
 
diff --git a/webapp/src/components/testing/TestSteps.vue b/webapp/src/components/testing/TestSteps.vue
index 5cd73bbad..120ce8c4b 100644
--- a/webapp/src/components/testing/TestSteps.vue
+++ b/webapp/src/components/testing/TestSteps.vue
@@ -5,7 +5,7 @@
   >
     <LabeledDatasetInput v-model="dataset" :task>
       <template #header>
-        <IconCard class="mx-auto w-full max-w-[700px]">
+        <IconCard class="mx-auto w-full max-w-card">
           <template #title> Model Validation </template>
 
           It is very important that your model is tested against
@@ -21,7 +21,7 @@
 
   <div v-show="validationStore.step === 2">
     <!-- Test the model on a data set with labels -->
-    <div class="space-y-8 mb-8 w-full lg:max-w-[700px] mx-auto">
+    <div class="space-y-8 mb-8 w-full lg:max-w-card mx-auto">
       <IconCard>
         <template #title>Validate your model</template>
 
diff --git a/webapp/src/components/training/TrainerDashboard.vue b/webapp/src/components/training/TrainerDashboard.vue
index 9324cdf00..96f95e8f4 100644
--- a/webapp/src/components/training/TrainerDashboard.vue
+++ b/webapp/src/components/training/TrainerDashboard.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="space-y-4 md:space-y-8">
     <!-- Train Button -->
-    <div class="w-full lg:w-1/2 lg:max-w-[640px] mx-auto tuto-train-dash">
+    <div class="mx-auto w-full max-w-card tuto-train-dash">
       <IconCard title-placement="center">
         <template #title> Control the Training Flow </template>
         <!-- If we are not currently training -->
diff --git a/webapp/src/components/training/TrainingDescription.vue b/webapp/src/components/training/TrainingDescription.vue
index 3c66889e4..fe643ac1d 100644
--- a/webapp/src/components/training/TrainingDescription.vue
+++ b/webapp/src/components/training/TrainingDescription.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="space-y-4 md:space-y-8 mx-auto w-full max-w-[700px]">
+  <div class="space-y-4 md:space-y-8 mx-auto w-full max-w-card">
     <IconCard>
       <template #title>
         {{ props.task.displayInformation.title }}
diff --git a/webapp/src/components/training/TrainingFinished.vue b/webapp/src/components/training/TrainingFinished.vue
index c67ccd635..cb676a75e 100644
--- a/webapp/src/components/training/TrainingFinished.vue
+++ b/webapp/src/components/training/TrainingFinished.vue
@@ -1,5 +1,7 @@
 <template>
-  <div class="grid grid-cols-1 md:grid-cols-2 cards-gap mt-10 items-stretch">
+  <div
+    class="mx-auto w-full max-w-card md:max-w-cards-2 grid grid-cols-1 md:grid-cols-2 cards-gap mt-10 items-stretch"
+  >
     <!-- Test the model -->
     <ButtonsCard :buttons="List.of(['test model', onTestModel])">
       <template #title> Test the model </template>
diff --git a/webapp/src/components/training/TrainingInformation.vue b/webapp/src/components/training/TrainingInformation.vue
index 114eabcd3..e7b28426f 100644
--- a/webapp/src/components/training/TrainingInformation.vue
+++ b/webapp/src/components/training/TrainingInformation.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="space-y-4 md:space-y-8">
     <!-- Fancy training statistics -->
-    <div class="flex flex-wrap justify-center 2xl:justify-between cards-gap">
+    <div class="flex flex-wrap justify-center cards-gap">
       <!-- Hide the communication rounds when training alone -->
       <IconCardSmall
         v-if="!isTrainingAlone"

From dd48dfdc17710a75ea7729d4f342fca97b6c594a Mon Sep 17 00:00:00 2001
From: Julien Vignoud <julien.vignoud@epfl.ch>
Date: Wed, 26 Aug 2026 12:39:40 +0200
Subject: [PATCH 03/12] fix: make button look consistent

---
 webapp/src/components/simple/CTAButton.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/webapp/src/components/simple/CTAButton.vue b/webapp/src/components/simple/CTAButton.vue
index 0f1a341d5..3fe25e913 100644
--- a/webapp/src/components/simple/CTAButton.vue
+++ b/webapp/src/components/simple/CTAButton.vue
@@ -2,7 +2,7 @@
 <template>
   <RouterLink
     to="/list"
-    class="px-6 py-3 min-w-32 text-xl text-white tracking-wide font-disco bg-disco-cyan rounded-full duration-200 hover:scale-105 transform"
+    class="px-6 py-3 min-w-32 text-xl text-white tracking-wide font-disco bg-disco-cyan rounded-full duration-200 hover:scale-105 capitalize hover:bg-transparent dark:hover:bg-transparent hover:outline-solid hover:outline-2 hover:outline-disco-cyan dark:hover:outline-disco-light-cyan hover:text-disco-cyan dark:hover:text-disco-light-cyan"
   >
     <slot />
   </RouterLink>

From 17b7c473d0b2cc2e687011e91ad603c191c3e878 Mon Sep 17 00:00:00 2001
From: Julien Vignoud <julien.vignoud@epfl.ch>
Date: Wed, 26 Aug 2026 12:39:50 +0200
Subject: [PATCH 04/12] fix: remove demo banner

---
 .../components/training/TrainerDashboard.vue  | 25 -------------------
 1 file changed, 25 deletions(-)

diff --git a/webapp/src/components/training/TrainerDashboard.vue b/webapp/src/components/training/TrainerDashboard.vue
index 96f95e8f4..40dab45d2 100644
--- a/webapp/src/components/training/TrainerDashboard.vue
+++ b/webapp/src/components/training/TrainerDashboard.vue
@@ -94,30 +94,6 @@
         </div>
       </IconCard>
     </div>
-    <!-- Demo warning -->
-    <div
-      class="flex flex-row justify-between gap-x-4 items-center mb-5 py-4 px-4 bg-purple-100 dark:text-body-light rounded-md"
-    >
-      <InfoIcon custom-class="min-w-6 min-h-6 w-6 h-6" />
-      <p class="text-sm pt-0.5">
-        In this live demo, the model you are training is a newly initialized
-        one. In a real use case you would start training with the latest model
-        resulting from all users' collaborative training. To persist
-        collaborative models, you can launch your own DISCO instance following
-        <a
-          class="underline text-blue-400 font-bold"
-          target="_blank"
-          href="https://github.com/epfml/disco/blob/main/DEV.md"
-          >these steps</a
-        >.
-        <!-- Warning about the maximum nb of iteration per epoch for LLMs -->
-        <span v-if="task.dataType === 'text'" class="text-sm">
-          <!-- Leading space is important -->
-          Additionally, when training language models we have limited the number
-          of batches per epoch to 10.
-        </span>
-      </p>
-    </div>
     <!-- Training Board -->
     <div>
       <TrainingInformation
@@ -157,7 +133,6 @@ import { useToaster } from "@/composables/toaster";
 import TrainingInformation from "@/components/training/TrainingInformation.vue";
 import CustomButton from "@/components/simple/CustomButton.vue";
 import IconCard from "@/components/containers/IconCard.vue";
-import InfoIcon from "@/assets/svg/InfoIcon.vue";
 import { CONFIG } from "../../config";
 import { VueSpinnerPuff, VueSpinnerGears } from "vue3-spinners";
 

From 3cffa8408575d97af406be9ab69dfc9d88abb119 Mon Sep 17 00:00:00 2001
From: Julien Vignoud <julien.vignoud@epfl.ch>
Date: Wed, 26 Aug 2026 13:36:38 +0200
Subject: [PATCH 05/12] fix: avoid getting stuck in 404 page

---
 webapp/cypress/e2e/notFound.cy.ts             | 41 +++++++++++++++++++
 .../src/components/training/TrainingSteps.vue | 22 ++++++----
 webapp/src/router/router.ts                   |  5 +--
 webapp/src/store/tutorial.ts                  | 25 +++++++++--
 4 files changed, 79 insertions(+), 14 deletions(-)
 create mode 100644 webapp/cypress/e2e/notFound.cy.ts

diff --git a/webapp/cypress/e2e/notFound.cy.ts b/webapp/cypress/e2e/notFound.cy.ts
new file mode 100644
index 000000000..7b41ce6e3
--- /dev/null
+++ b/webapp/cypress/e2e/notFound.cy.ts
@@ -0,0 +1,41 @@
+import { defaultTasks } from "@epfml/discojs";
+
+import { setupServerWith } from "../support/e2e.ts";
+
+describe("not-found page", () => {
+  it("is shown for an unknown task", () => {
+    setupServerWith(defaultTasks.titanic);
+
+    cy.visit("/not-a-task");
+    cy.url().should("eq", `${Cypress.config().baseUrl}not-found`);
+    cy.contains("404");
+  });
+
+  it("can be navigated away from", () => {
+    setupServerWith(defaultTasks.titanic);
+
+    cy.visit("/not-a-task");
+    cy.contains("404");
+
+    // the component of the unknown task is kept alive, it shouldn't redirect anymore
+    cy.get('aside a[href="/list"]').click();
+    cy.url().should("eq", `${Cypress.config().baseUrl}list`);
+  });
+
+  it("is not covered by the tutorial when leaving it", () => {
+    setupServerWith(defaultTasks.titanic);
+
+    cy.visit("/not-a-task");
+    cy.contains("404");
+
+    // the tutorial starts on the task list and overlays the whole page
+    cy.get('aside a[href="/list"]').click();
+    cy.get(".driver-popover");
+
+    // going back leaves no overlay swallowing the clicks
+    cy.go("back");
+    cy.get(".driver-popover").should("not.exist");
+    cy.get('aside a[href="/create"]').click();
+    cy.url().should("eq", `${Cypress.config().baseUrl}create`);
+  });
+});
diff --git a/webapp/src/components/training/TrainingSteps.vue b/webapp/src/components/training/TrainingSteps.vue
index f02255609..86ea6a90c 100644
--- a/webapp/src/components/training/TrainingSteps.vue
+++ b/webapp/src/components/training/TrainingSteps.vue
@@ -89,22 +89,28 @@ const isLoading = computed<boolean>(() => {
 });
 
 // Init the task once the taskStore has been loaded successfully
-// If it is not available we redirect to not-found
 const task = computed<Task<DataType, Network> | undefined>(() => {
   if (typeof tasks.value === "string") {
     // Tasks are still loading, return undefined to show loading indicator
     return undefined;
   }
 
-  const foundTask = tasks.value.get(props.id);
+  // return undefined if the task id doesn't match anything
+  return tasks.value.get(props.id);
+});
 
-  // Redirect to not-found if tasks have loaded but this specific task doesn't exist
-  if (foundTask === undefined) {
-    void router.replace({ name: "not-found" });
-  }
+// Redirect to not-found once the tasks have loaded and this task isn't one of them.
+watch(
+  [() => route.params.id, tasks],
+  () => {
+    if (route.params.id !== props.id) return; // another route is displayed
+    if (typeof tasks.value === "string") return; // tasks are still loading
+    if (tasks.value.has(props.id)) return; // task exists
 
-  return foundTask;
-});
+    void router.replace({ name: "not-found" });
+  },
+  { immediate: true },
+);
 
 // Addresses the case when users enter a url manually
 // Force the training store to synch with the task specified in the url
diff --git a/webapp/src/router/router.ts b/webapp/src/router/router.ts
index bad9866b1..628afea71 100644
--- a/webapp/src/router/router.ts
+++ b/webapp/src/router/router.ts
@@ -75,13 +75,12 @@ const router = createRouter({
       },
     },
     {
-      path: "/:pathMatch(.*)*",
+      path: "/not-found",
       name: "not-found",
       component: NotFound,
     },
     {
-      path: "/not-found",
-      name: "not-found",
+      path: "/:pathMatch(.*)*",
       component: NotFound,
     },
   ],
diff --git a/webapp/src/store/tutorial.ts b/webapp/src/store/tutorial.ts
index fbd8f0129..714fca9df 100644
--- a/webapp/src/store/tutorial.ts
+++ b/webapp/src/store/tutorial.ts
@@ -32,6 +32,25 @@ export const useTutorialStore = defineStore(
     // Note: The tutorial interacts with the router and the training store
     driverObj.setSteps(getTaskSteps(driverObj));
 
+    // Some steps navigate to another page, in which case the tutorial keeps going
+    let isNavigatingStep = false;
+    async function navigateStep(to: string): Promise<void> {
+      isNavigatingStep = true;
+      try {
+        await router.push(to);
+      } finally {
+        isNavigatingStep = false;
+      }
+    }
+
+    // Close the tutorial after each navigation except if isNavigatingStep is true
+    // This avoids leaving a persistent overlay covering everything when the user navigates manually
+    // (browser's back button, a redirection, changing the url)
+    router.afterEach(() => {
+      if (isNavigatingStep) return;
+      if (driverObj.isActive()) driverObj.destroy();
+    });
+
     async function startOnFirstVisit(): Promise<void> {
       // Check if the tutorial has already been shown
       if (hasAlreadyBeenShown.value) return;
@@ -44,7 +63,7 @@ export const useTutorialStore = defineStore(
 
     async function start(skipFirstStep: boolean = false): Promise<void> {
       if (router.currentRoute.value.path !== "/list") {
-        await router.push({ path: "/list" });
+        await navigateStep("/list");
       }
       scrollToTop();
       driverObj.drive(skipFirstStep ? 1 : 0);
@@ -106,7 +125,7 @@ export const useTutorialStore = defineStore(
             align: "start",
             side: "right",
             onNextClick: () =>
-              void router.push("/lus_covid").then(() => driverObj.moveNext()),
+              void navigateStep("/lus_covid").then(() => driverObj.moveNext()),
           },
         },
         {
@@ -226,7 +245,7 @@ export const useTutorialStore = defineStore(
             align: "center",
             onNextClick: () => {
               trainingStore.setStep(1);
-              void router.push("/list").then(() => {
+              void navigateStep("/list").then(() => {
                 scrollToTop();
                 driverObj.moveNext();
               });

From 47716fd16f3b099103b8d29606e1a07fc72f887e Mon Sep 17 00:00:00 2001
From: Julien Vignoud <julien.vignoud@epfl.ch>
Date: Wed, 26 Aug 2026 16:38:01 +0200
Subject: [PATCH 06/12] fix: persist if tutorial has been shown

---
 webapp/cypress/e2e/tutorial.cy.ts | 27 +++++++++++++++++++++++++++
 webapp/src/store/tutorial.ts      |  2 +-
 2 files changed, 28 insertions(+), 1 deletion(-)
 create mode 100644 webapp/cypress/e2e/tutorial.cy.ts

diff --git a/webapp/cypress/e2e/tutorial.cy.ts b/webapp/cypress/e2e/tutorial.cy.ts
new file mode 100644
index 000000000..8796fb0cc
--- /dev/null
+++ b/webapp/cypress/e2e/tutorial.cy.ts
@@ -0,0 +1,27 @@
+import { defaultTasks } from "@epfml/discojs";
+
+import { setupServerWith } from "../support/e2e.ts";
+
+describe("tutorial", () => {
+  it("is shown on the first visit only", () => {
+    setupServerWith(defaultTasks.titanic);
+
+    cy.visit("/list");
+    cy.get(".driver-popover-close-btn").click();
+
+    // having been shown is persisted, it shouldn't show up again on a new load
+    cy.visit("/list");
+    cy.contains("button", "participate"); // wait for the page to be loaded
+    cy.get(".driver-popover").should("not.exist");
+  });
+
+  it("can still be started from the sidebar", () => {
+    setupServerWith(defaultTasks.titanic);
+
+    cy.visit("/list");
+    cy.get(".driver-popover-close-btn").click();
+
+    cy.get("#tuto-help-bttn").click();
+    cy.get(".driver-popover");
+  });
+});
diff --git a/webapp/src/store/tutorial.ts b/webapp/src/store/tutorial.ts
index 714fca9df..9b17732ba 100644
--- a/webapp/src/store/tutorial.ts
+++ b/webapp/src/store/tutorial.ts
@@ -256,7 +256,7 @@ export const useTutorialStore = defineStore(
       return steps;
     }
 
-    return { startFromSidebar, startOnFirstVisit };
+    return { hasAlreadyBeenShown, startFromSidebar, startOnFirstVisit };
   },
   { persistedState: { persist: true } },
 );

From 848b214be5a4f5dbada69d6fa1f8ff61975f845a Mon Sep 17 00:00:00 2001
From: Julien Vignoud <julien.vignoud@epfl.ch>
Date: Wed, 26 Aug 2026 16:47:58 +0200
Subject: [PATCH 07/12] fix: typo

---
 webapp/src/store/tutorial.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/webapp/src/store/tutorial.ts b/webapp/src/store/tutorial.ts
index 9b17732ba..b355f918a 100644
--- a/webapp/src/store/tutorial.ts
+++ b/webapp/src/store/tutorial.ts
@@ -94,7 +94,7 @@ export const useTutorialStore = defineStore(
           popover: {
             title: "Join existing DISCOllaboratives",
             description:
-              "DISCOllaboratives are ML tasks like image recognition, LLM training, etc., that let users collaboratively train ML models without sharing data private.",
+              "DISCOllaboratives are ML tasks like image recognition, LLM training, etc., that let users collaboratively train ML models without sharing private data.",
             align: "start",
           },
         },
@@ -220,7 +220,7 @@ export const useTutorialStore = defineStore(
         },
         {
           popover: {
-            title: "Save and ty out your model",
+            title: "Save and try out your model",
             description:
               "After training, you can save the model and evaluate it on test data.",
             align: "center",

From ca3afafa0af40c0990e12fc2ba8137ea56b08cc5 Mon Sep 17 00:00:00 2001
From: Julien Vignoud <julien.vignoud@epfl.ch>
Date: Wed, 26 Aug 2026 17:14:11 +0200
Subject: [PATCH 08/12] fix: tutorial step count

---
 webapp/cypress/e2e/tutorial.cy.ts | 43 +++++++++++++++++++++++++++++++
 webapp/src/store/tutorial.ts      | 19 +++++++++-----
 2 files changed, 56 insertions(+), 6 deletions(-)

diff --git a/webapp/cypress/e2e/tutorial.cy.ts b/webapp/cypress/e2e/tutorial.cy.ts
index 8796fb0cc..c6f211228 100644
--- a/webapp/cypress/e2e/tutorial.cy.ts
+++ b/webapp/cypress/e2e/tutorial.cy.ts
@@ -24,4 +24,47 @@ describe("tutorial", () => {
     cy.get("#tuto-help-bttn").click();
     cy.get(".driver-popover");
   });
+
+  it("shows a single popover when started while navigating to the task list", () => {
+    setupServerWith(defaultTasks.titanic);
+
+    // starting from another page navigates to the task list, whose mounting
+    // shouldn't start the tutorial a second time
+    cy.visit("/");
+    cy.get("#tuto-help-bttn").click();
+
+    cy.contains(".driver-popover-title", "Welcome to DISCO!");
+    cy.get(".driver-popover").should("have.length", 1);
+  });
+
+  it("only closes when clicking on the cross", () => {
+    setupServerWith(defaultTasks.titanic);
+
+    cy.visit("/list");
+    cy.get(".driver-popover");
+
+    // clicking outside of the popover is most likely a misclick, it shouldn't close
+    cy.get(".driver-overlay").click({ force: true });
+    cy.get(".driver-popover");
+
+    cy.get(".driver-popover-close-btn").click();
+    cy.get(".driver-popover").should("not.exist");
+  });
+
+  it("displays the current step and the total number of steps", () => {
+    setupServerWith(defaultTasks.titanic);
+
+    cy.visit("/list");
+    cy.get(".driver-popover-progress-text").should("contain", "Step 1 of");
+    cy.get(".driver-popover-next-btn").click();
+    cy.get(".driver-popover-progress-text").should("contain", "Step 2 of");
+
+    cy.get(".driver-popover-close-btn").click();
+
+    // the first step is skipped when starting from the sidebar,
+    // it shouldn't be counted
+    cy.get("#tuto-help-bttn").click();
+    cy.contains(".driver-popover-title", "Welcome to DISCO!");
+    cy.get(".driver-popover-progress-text").should("contain", "Step 1 of");
+  });
 });
diff --git a/webapp/src/store/tutorial.ts b/webapp/src/store/tutorial.ts
index b355f918a..cdeb50750 100644
--- a/webapp/src/store/tutorial.ts
+++ b/webapp/src/store/tutorial.ts
@@ -20,17 +20,18 @@ export const useTutorialStore = defineStore(
     const hasAlreadyBeenShown = ref(false);
 
     const driverObj = driver({
-      showProgress: false,
+      showProgress: true,
+      progressText: "Step {{current}} of {{total}}",
       smoothScroll: true,
       disableActiveInteraction: true,
       showButtons: ["next", "close"],
+      // Only close the tutorial when clicking on the cross, clicking outside
+      // of the popover doesn't do anything
+      overlayClickBehavior: () => {},
     });
 
     const trainingStore = useTrainingStore();
     const router = useRouter();
-    // Set the steps for the tutorial
-    // Note: The tutorial interacts with the router and the training store
-    driverObj.setSteps(getTaskSteps(driverObj));
 
     // Some steps navigate to another page, in which case the tutorial keeps going
     let isNavigatingStep = false;
@@ -62,12 +63,18 @@ export const useTutorialStore = defineStore(
     }
 
     async function start(skipFirstStep: boolean = false): Promise<void> {
+      // Flag the tutorial as shown right away
+      hasAlreadyBeenShown.value = true;
+      // close any running tutorial
+      if (driverObj.isActive()) driverObj.destroy();
+
       if (router.currentRoute.value.path !== "/list") {
         await navigateStep("/list");
       }
       scrollToTop();
-      driverObj.drive(skipFirstStep ? 1 : 0);
-      hasAlreadyBeenShown.value = true;
+      const steps = getTaskSteps(driverObj);
+      driverObj.setSteps(skipFirstStep ? steps.slice(1) : steps);
+      driverObj.drive(0);
     }
 
     function getTaskSteps(driverObj: Driver): DriveStep[] {

From 67a32bd8f8cc7fef4fc784a8f870f4786ac6e75e Mon Sep 17 00:00:00 2001
From: Julien Vignoud <julien.vignoud@epfl.ch>
Date: Thu, 27 Aug 2026 11:47:14 +0200
Subject: [PATCH 09/12] fix: tutorial highlight alignment

---
 webapp/src/store/tutorial.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/webapp/src/store/tutorial.ts b/webapp/src/store/tutorial.ts
index cdeb50750..f2422e8d4 100644
--- a/webapp/src/store/tutorial.ts
+++ b/webapp/src/store/tutorial.ts
@@ -22,7 +22,7 @@ export const useTutorialStore = defineStore(
     const driverObj = driver({
       showProgress: true,
       progressText: "Step {{current}} of {{total}}",
-      smoothScroll: true,
+      smoothScroll: false,
       disableActiveInteraction: true,
       showButtons: ["next", "close"],
       // Only close the tutorial when clicking on the cross, clicking outside

From c95f3ac4c01373d971edc12930e585b158414cae Mon Sep 17 00:00:00 2001
From: Julien Vignoud <julien.vignoud@epfl.ch>
Date: Thu, 27 Aug 2026 12:47:30 +0200
Subject: [PATCH 10/12] feat: enable going back during the tutorial

---
 webapp/cypress/e2e/tutorial.cy.ts |  77 +++++++++++++++++++++
 webapp/src/store/tutorial.ts      | 108 ++++++++++++++++++++++--------
 2 files changed, 157 insertions(+), 28 deletions(-)

diff --git a/webapp/cypress/e2e/tutorial.cy.ts b/webapp/cypress/e2e/tutorial.cy.ts
index c6f211228..751ee3658 100644
--- a/webapp/cypress/e2e/tutorial.cy.ts
+++ b/webapp/cypress/e2e/tutorial.cy.ts
@@ -2,6 +2,48 @@ import { defaultTasks } from "@epfml/discojs";
 
 import { setupServerWith } from "../support/e2e.ts";
 
+// The element highlighted by each step of the tutorial, in order.
+// `undefined` for the steps that only display a centered popover.
+const STEPS = [
+  "#tuto-help-bttn",
+  undefined,
+  "#llm_task",
+  "#tuto-create-bttn",
+  "#tuto-evaluate-bttn",
+  "#lus_covid",
+  undefined,
+  "#tuto-training-bar",
+  ".tuto-data-desc",
+  ".tuto-example-data",
+  "#tuto-group-bttn",
+  ".group-data-field",
+  ".tuto-train-dash",
+  "#train-collab-bttn",
+  "#train-locally-bttn",
+  undefined,
+  "#tuto-evaluate-bttn",
+  "#tuto-slack-link",
+];
+
+function expectStep(index: number): void {
+  cy.get(".driver-popover-progress-text").should(
+    "have.text",
+    `Step ${index + 1} of ${STEPS.length}`,
+  );
+  const selector = STEPS[index];
+  if (selector === undefined) return;
+  cy.get(selector)
+    .should("have.class", "driver-active-element")
+    // the highlighted element has to be rendered: the elements of another
+    // training step are in the DOM but hidden, hence have no dimension
+    .and(($element) => {
+      expect(
+        $element[0].getBoundingClientRect().height,
+        `${selector} is displayed`,
+      ).to.be.greaterThan(0);
+    });
+}
+
 describe("tutorial", () => {
   it("is shown on the first visit only", () => {
     setupServerWith(defaultTasks.titanic);
@@ -23,6 +65,9 @@ describe("tutorial", () => {
 
     cy.get("#tuto-help-bttn").click();
     cy.get(".driver-popover");
+
+    // the skipped first step isn't reachable by going back
+    cy.get(".driver-popover-prev-btn").should("be.disabled");
   });
 
   it("shows a single popover when started while navigating to the task list", () => {
@@ -67,4 +112,36 @@ describe("tutorial", () => {
     cy.contains(".driver-popover-title", "Welcome to DISCO!");
     cy.get(".driver-popover-progress-text").should("contain", "Step 1 of");
   });
+  it("can be navigated back and forth", () => {
+    setupServerWith(defaultTasks.lusCovid, defaultTasks.wikitext);
+
+    cy.visit("/list");
+
+    // "previous" is disabled on the first step
+    cy.get(".driver-popover-prev-btn").should("be.disabled");
+
+    // go through the whole tutorial
+    for (let index = 0; index < STEPS.length; index++) {
+      expectStep(index);
+      if (index < STEPS.length - 1) cy.get(".driver-popover-next-btn").click();
+    }
+    cy.url().should("match", /\/lus_covid$/);
+
+    // go back to the beginning
+    for (let index = STEPS.length - 1; index >= 0; index--) {
+      expectStep(index);
+      if (index > 0) cy.get(".driver-popover-prev-btn").click();
+    }
+    cy.url().should("match", /\/list$/);
+
+    // and go the the end again
+    for (let index = 0; index < STEPS.length; index++) {
+      expectStep(index);
+      cy.get(".driver-popover-next-btn").click();
+    }
+
+    // the last step closes the tutorial and goes back to the task list
+    cy.get(".driver-popover").should("not.exist");
+    cy.url().should("match", /\/list$/);
+  });
 });
diff --git a/webapp/src/store/tutorial.ts b/webapp/src/store/tutorial.ts
index f2422e8d4..363908ad7 100644
--- a/webapp/src/store/tutorial.ts
+++ b/webapp/src/store/tutorial.ts
@@ -1,4 +1,4 @@
-import type { Driver, DriveStep } from "driver.js";
+import type { DriveStep } from "driver.js";
 import { driver } from "driver.js";
 import { defineStore } from "pinia";
 import { ref } from "vue";
@@ -24,7 +24,9 @@ export const useTutorialStore = defineStore(
       progressText: "Step {{current}} of {{total}}",
       smoothScroll: false,
       disableActiveInteraction: true,
-      showButtons: ["next", "close"],
+      showButtons: ["previous", "next", "close"],
+      nextBtnText: "Next",
+      prevBtnText: "Previous",
       // Only close the tutorial when clicking on the cross, clicking outside
       // of the popover doesn't do anything
       overlayClickBehavior: () => {},
@@ -44,6 +46,43 @@ export const useTutorialStore = defineStore(
       }
     }
 
+    // The state the webapp has to be in to display a step: the page it is on
+    // and, on a task page, the training step showing the highlighted element
+    type StepContext = { path: string; trainingStep?: number };
+    type TutorialStep = DriveStep & { context: StepContext };
+
+    // Used so that going back undoes what going forward did.
+    async function goToStep(
+      steps: TutorialStep[],
+      index: number,
+    ): Promise<void> {
+      const { path, trainingStep } = steps[index].context;
+
+      const changesPage = router.currentRoute.value.path !== path;
+      if (changesPage) await navigateStep(path);
+
+      // A task page initializes the training store to its first step when
+      // mounting, which is all the tutorial needs when landing on it.
+      const changesTrainingStep =
+        trainingStep !== undefined &&
+        trainingStore.task !== undefined &&
+        trainingStore.step !== trainingStep;
+      if (changesTrainingStep) trainingStore.setStep(trainingStep);
+
+      // scroll to top on change
+      if (changesPage || changesTrainingStep) scrollToTop();
+
+      driverObj.moveTo(index);
+    }
+
+    async function endTutorial(): Promise<void> {
+      // leave the task page on its first step, ready for the next visit
+      if (trainingStore.task !== undefined) trainingStore.setStep(1);
+      await navigateStep("/list");
+      scrollToTop();
+      driverObj.destroy();
+    }
+
     // Close the tutorial after each navigation except if isNavigatingStep is true
     // This avoids leaving a persistent overlay covering everything when the user navigates manually
     // (browser's back button, a redirection, changing the url)
@@ -72,14 +111,32 @@ export const useTutorialStore = defineStore(
         await navigateStep("/list");
       }
       scrollToTop();
-      const steps = getTaskSteps(driverObj);
-      driverObj.setSteps(skipFirstStep ? steps.slice(1) : steps);
+      driverObj.setSteps(getNavigableSteps(skipFirstStep));
       driverObj.drive(0);
     }
 
-    function getTaskSteps(driverObj: Driver): DriveStep[] {
-      const steps: DriveStep[] = [
+    function getNavigableSteps(skipFirstStep: boolean): DriveStep[] {
+      const steps = getTaskSteps();
+      const displayed = skipFirstStep ? steps.slice(1) : steps;
+
+      return displayed.map((step, index) => ({
+        ...step,
+        popover: {
+          ...step.popover,
+          onNextClick: () =>
+            index + 1 < displayed.length
+              ? void goToStep(displayed, index + 1)
+              : void endTutorial(),
+          onPrevClick: () => void goToStep(displayed, index - 1),
+        },
+      }));
+    }
+
+    function getTaskSteps(): TutorialStep[] {
+      const taskPath = "/lus_covid";
+      const steps: TutorialStep[] = [
         {
+          context: { path: "/list" },
           element: "#tuto-help-bttn",
           popover: {
             title: "First time here?",
@@ -89,6 +146,7 @@ export const useTutorialStore = defineStore(
           },
         },
         {
+          context: { path: "/list" },
           popover: {
             title: "Welcome to DISCO!",
             description:
@@ -97,6 +155,7 @@ export const useTutorialStore = defineStore(
           },
         },
         {
+          context: { path: "/list" },
           element: "#llm_task",
           popover: {
             title: "Join existing DISCOllaboratives",
@@ -106,6 +165,7 @@ export const useTutorialStore = defineStore(
           },
         },
         {
+          context: { path: "/list" },
           element: "#tuto-create-bttn",
           popover: {
             title: "Create your own",
@@ -115,6 +175,7 @@ export const useTutorialStore = defineStore(
           },
         },
         {
+          context: { path: "/list" },
           element: "#tuto-evaluate-bttn",
           popover: {
             title: "The Model Library",
@@ -124,6 +185,7 @@ export const useTutorialStore = defineStore(
           },
         },
         {
+          context: { path: "/list" },
           element: "#lus_covid",
           popover: {
             title: "Let's check out a DISCOllaborative!",
@@ -131,11 +193,10 @@ export const useTutorialStore = defineStore(
               "Let's see how to join an existing DISCOllaborative with the LUS COVID task.",
             align: "start",
             side: "right",
-            onNextClick: () =>
-              void navigateStep("/lus_covid").then(() => driverObj.moveNext()),
           },
         },
         {
+          context: { path: taskPath, trainingStep: 1 },
           popover: {
             title: "Task Overview",
             description:
@@ -143,19 +204,17 @@ export const useTutorialStore = defineStore(
           },
         },
         {
+          context: { path: taskPath, trainingStep: 1 },
           element: "#tuto-training-bar",
           popover: {
             title: "Only 3 steps",
             description:
               "There are mainly 3 steps in a DISCOllaborative: connect your data, join the training session, and then you can use the model. Let's now get some data!",
             align: "center",
-            onNextClick: () => {
-              trainingStore.setStep(2);
-              driverObj.moveNext();
-            },
           },
         },
         {
+          context: { path: taskPath, trainingStep: 2 },
           element: ".tuto-data-desc",
           popover: {
             title: "Expected Data Format",
@@ -164,6 +223,7 @@ export const useTutorialStore = defineStore(
           },
         },
         {
+          context: { path: taskPath, trainingStep: 2 },
           element: ".tuto-example-data",
           popover: {
             title: "Example Data",
@@ -172,6 +232,7 @@ export const useTutorialStore = defineStore(
           },
         },
         {
+          context: { path: taskPath, trainingStep: 2 },
           element: "#tuto-group-bttn",
           popover: {
             title: "How to connect your data?",
@@ -180,20 +241,17 @@ export const useTutorialStore = defineStore(
           },
         },
         {
+          context: { path: taskPath, trainingStep: 2 },
           element: ".group-data-field",
           popover: {
             title: "Connect Your Dataset",
             description:
               "Finally, this is where you can drag and drop your dataset for model training. Your data stays secure and never leaves your device.",
             align: "center",
-            onNextClick: () => {
-              trainingStore.setStep(3);
-              scrollToTop();
-              driverObj.moveNext();
-            },
           },
         },
         {
+          context: { path: taskPath, trainingStep: 3 },
           element: ".tuto-train-dash",
           popover: {
             title: "Training Mode",
@@ -202,6 +260,7 @@ export const useTutorialStore = defineStore(
           },
         },
         {
+          context: { path: taskPath, trainingStep: 3 },
           element: "#train-collab-bttn",
           popover: {
             title: "Collaborative Training",
@@ -212,6 +271,7 @@ export const useTutorialStore = defineStore(
           },
         },
         {
+          context: { path: taskPath, trainingStep: 3 },
           element: "#train-locally-bttn",
           popover: {
             title: "Experiment on your own",
@@ -219,13 +279,10 @@ export const useTutorialStore = defineStore(
               "To play around, you can train the model on your own device using only your data.",
             align: "center",
             side: "top",
-            onNextClick: () => {
-              trainingStore.setStep(4);
-              driverObj.moveNext();
-            },
           },
         },
         {
+          context: { path: taskPath, trainingStep: 4 },
           popover: {
             title: "Save and try out your model",
             description:
@@ -234,6 +291,7 @@ export const useTutorialStore = defineStore(
           },
         },
         {
+          context: { path: taskPath, trainingStep: 4 },
           element: "#tuto-evaluate-bttn",
           popover: {
             title: "The Model Library",
@@ -243,6 +301,7 @@ export const useTutorialStore = defineStore(
           },
         },
         {
+          context: { path: taskPath, trainingStep: 4 },
           element: "#tuto-slack-link",
           popover: {
             title: "The End!",
@@ -250,13 +309,6 @@ export const useTutorialStore = defineStore(
               "If you encounter any issue, feel free to ask questions or share your feedback on our Slack channel!",
             side: "top",
             align: "center",
-            onNextClick: () => {
-              trainingStore.setStep(1);
-              void navigateStep("/list").then(() => {
-                scrollToTop();
-                driverObj.moveNext();
-              });
-            },
           },
         },
       ];

From 2580b1e2519b766c90f0a18395d4626f6d6ff904 Mon Sep 17 00:00:00 2001
From: Julien Vignoud <julien.vignoud@epfl.ch>
Date: Thu, 27 Aug 2026 16:27:45 +0200
Subject: [PATCH 11/12] fix: warning "Invalid prop: type check failed for prop
 "labels". Expected Set, got Object"

---
 .../LabeledImageDatasetInput/ByGroup.vue      | 37 ++++++++++---------
 .../LabeledImageDatasetInput/index.vue        |  5 ++-
 2 files changed, 22 insertions(+), 20 deletions(-)

diff --git a/webapp/src/components/dataset_input/LabeledImageDatasetInput/ByGroup.vue b/webapp/src/components/dataset_input/LabeledImageDatasetInput/ByGroup.vue
index ba53fd95b..6c72e41aa 100644
--- a/webapp/src/components/dataset_input/LabeledImageDatasetInput/ByGroup.vue
+++ b/webapp/src/components/dataset_input/LabeledImageDatasetInput/ByGroup.vue
@@ -11,7 +11,8 @@
 </template>
 
 <script lang="ts" setup>
-import type { Set } from "immutable";
+// Vue turns immutable Set into the native JS Set
+import type { Set as ImmutableSet } from "immutable";
 import { Map } from "immutable";
 import type { Ref, WatchHandle } from "vue";
 import { computed, ref, watch } from "vue";
@@ -26,7 +27,7 @@ import FileSelection from "../FileSelection.vue";
 import type { NamedLabeledImageDataset } from "../types.js";
 
 const props = defineProps<{
-  labels: Set<string>;
+  labels: ImmutableSet<string>;
 }>();
 
 const dataset = defineModel<NamedLabeledImageDataset | undefined>();
@@ -37,23 +38,23 @@ watch(dataset, (dataset: NamedLabeledImageDataset | undefined) => {
     });
 });
 
-const labelsAndFiles = computed<Array<[string, Ref<Set<File> | undefined>]>>(
-  (oldArray) => {
-    const old = Map(oldArray);
+const labelsAndFiles = computed<
+  Array<[string, Ref<ImmutableSet<File> | undefined>]>
+>((oldArray) => {
+  const old = Map(oldArray);
 
-    return props.labels
-      .valueSeq()
-      .sort()
-      .map(
-        (label) =>
-          [label, old.get(label) ?? ref()] as [
-            string,
-            Ref<Set<File> | undefined>,
-          ],
-      )
-      .toArray();
-  },
-);
+  return props.labels
+    .valueSeq()
+    .sort()
+    .map(
+      (label) =>
+        [label, old.get(label) ?? ref()] as [
+          string,
+          Ref<ImmutableSet<File> | undefined>,
+        ],
+    )
+    .toArray();
+});
 
 let watcher: WatchHandle;
 function refreshWatcher() {
diff --git a/webapp/src/components/dataset_input/LabeledImageDatasetInput/index.vue b/webapp/src/components/dataset_input/LabeledImageDatasetInput/index.vue
index 16697eb72..7f878ef8d 100644
--- a/webapp/src/components/dataset_input/LabeledImageDatasetInput/index.vue
+++ b/webapp/src/components/dataset_input/LabeledImageDatasetInput/index.vue
@@ -49,7 +49,8 @@
 <script lang="ts" setup>
 defineOptions({ name: "LabeledImageDatasetInput" });
 
-import type { Set } from "immutable";
+// Vue turns immutable Set into the native JS Set
+import type { Set as ImmutableSet } from "immutable";
 import { ref } from "vue";
 
 import DatasetInput from "../DatasetInput.vue";
@@ -59,7 +60,7 @@ import ByCSV from "./ByCSV.vue";
 import ByGroup from "./ByGroup.vue";
 
 const props = defineProps<{
-  labels: Set<string>;
+  labels: ImmutableSet<string>;
 }>();
 
 const dataset = defineModel<NamedLabeledImageDataset>();

From 0a363dcef7f58e76976074e1c9bf043696bcbbe5 Mon Sep 17 00:00:00 2001
From: Julien Vignoud <julien.vignoud@epfl.ch>
Date: Thu, 27 Aug 2026 16:32:52 +0200
Subject: [PATCH 12/12] feat: allow drag and dropping folders

---
 webapp/cypress/e2e/datasetInput.cy.ts         |  98 +++++++++++
 .../dataset_input/FileSelection.vue           |  50 ++++--
 .../dataset_input/__tests__/files.spec.ts     | 163 ++++++++++++++++++
 webapp/src/components/dataset_input/files.ts  | 116 +++++++++++++
 4 files changed, 413 insertions(+), 14 deletions(-)
 create mode 100644 webapp/src/components/dataset_input/__tests__/files.spec.ts
 create mode 100644 webapp/src/components/dataset_input/files.ts

diff --git a/webapp/cypress/e2e/datasetInput.cy.ts b/webapp/cypress/e2e/datasetInput.cy.ts
index 50aeafbe6..43b2da26e 100644
--- a/webapp/cypress/e2e/datasetInput.cy.ts
+++ b/webapp/cypress/e2e/datasetInput.cy.ts
@@ -3,6 +3,55 @@ import { basicTask, setupServerWith } from "../support/e2e";
 // TODO move to components testing
 // upstream doesn't yet allow that vuejs/test-utils#2468
 
+function droppedFolder(name: string, filenames: string[]): unknown {
+  const fileEntry = (filename: string) => ({
+    isFile: true,
+    isDirectory: false,
+    name: filename,
+    file: (onSuccess: (file: File) => void) =>
+      onSuccess(
+        new File([], filename, {
+          type: filename.endsWith(".png") ? "image/png" : "",
+        }),
+      ),
+  });
+
+  let read = false;
+  const directoryEntry = {
+    isFile: false,
+    isDirectory: true,
+    name,
+    createReader: () => ({
+      readEntries: (onSuccess: (entries: unknown[]) => void) => {
+        onSuccess(read ? [] : filenames.map(fileEntry));
+        read = true;
+      },
+    }),
+  };
+
+  return {
+    items: [{ webkitGetAsEntry: () => directoryEntry }],
+    files: [],
+    dropEffect: "none",
+  };
+}
+
+function droppedFile(name: string, type: string): unknown {
+  const fileEntry = {
+    isFile: true,
+    isDirectory: false,
+    name,
+    file: (onSuccess: (file: File) => void) =>
+      onSuccess(new File([], name, { type })),
+  };
+
+  return {
+    items: [{ webkitGetAsEntry: () => fileEntry }],
+    files: [],
+    dropEffect: "none",
+  };
+}
+
 function goToDatasetInputStep() {
   cy.visit("/list");
   cy.get(".driver-popover-close-btn").click();
@@ -50,6 +99,55 @@ describe("image dataset input by group", () => {
 
     cy.contains("Number of selected files: 3").should("exist");
   });
+
+  it("allows to drop a folder of images", () => {
+    setupServerWith(
+      basicTask("image", {
+        LABEL_LIST: ["label"],
+        IMAGE_H: 100,
+        IMAGE_W: 100,
+      }),
+    );
+
+    goToDatasetInputStep();
+    cy.get("button").contains("group").click();
+    cy.contains("Drop images or a folder here");
+
+    cy.get('[data-testid="drop-image-area"]')
+      .first()
+      .trigger("drop", {
+        dataTransfer: droppedFolder("COVID+", [
+          "first.png",
+          "second.png",
+          ".DS_Store",
+        ]),
+      });
+
+    cy.contains("Number of selected files: 2").should("exist");
+    cy.contains("Ignored 1 file(s) that aren't images").should("exist");
+  });
+
+  it("rejects a dropped file that isn't an image", () => {
+    setupServerWith(
+      basicTask("image", {
+        LABEL_LIST: ["label"],
+        IMAGE_H: 100,
+        IMAGE_W: 100,
+      }),
+    );
+
+    goToDatasetInputStep();
+    cy.get("button").contains("group").click();
+
+    cy.get('[data-testid="drop-image-area"]')
+      .first()
+      .trigger("drop", {
+        dataTransfer: droppedFile("data.xlsx", "application/vnd.ms-excel"),
+      });
+
+    cy.contains("Didn't find any images in what you dropped").should("exist");
+    cy.contains("Number of selected files").should("not.exist");
+  });
 });
 
 describe("image dataset input by csv", () => {
diff --git a/webapp/src/components/dataset_input/FileSelection.vue b/webapp/src/components/dataset_input/FileSelection.vue
index 4fae6dfd2..2f604984d 100644
--- a/webapp/src/components/dataset_input/FileSelection.vue
+++ b/webapp/src/components/dataset_input/FileSelection.vue
@@ -22,24 +22,25 @@
       </div>
       <div
         v-if="!hideConnectField"
+        :data-testid="`drop-${props.type}-area`"
         class="border-dashed rounded-xl border-disco-cyan flex flex-col justify-center items-center min-h-48"
         :class="
           isDragHoverActive ? 'bg-blue-100 opacity-75 border-8' : 'border-2'
         "
         @dragenter="onDragEnter"
         @dragleave="onDragLeave"
-        @drop="(e: DragEvent) => dragFiles(e)"
+        @drop="(e: DragEvent) => void dragFiles(e)"
       >
         <p
           class="p-4 text-lg text-disco-blue dark:text-white flex-wrap justify-center"
         >
-          <span>Drop {{ fileType }} here or</span>
+          <span>Drop {{ droppable }} here or</span>
         </p>
         <label class="mb-6" :data-testid="`select-${props.type}-button`">
           <span
             class="px-4 py-2 min-w-32 text-lg capitalize text-white bg-disco-cyan font-disco rounded-full duration-200 hover:bg-transparent dark:hover:bg-transparent hover:outline-solid hover:outline-2 hover:outline-disco-cyan dark:hover:outline-disco-light-cyan hover:text-disco-cyan dark:hover:text-disco-light-cyan"
           >
-            <i v-if="noUpload" class="fas fa-folder-open mr-2" />
+            <i v-if="noUpload" class="fas fa-file mr-2" />
             <span>select</span>
           </span>
           <input
@@ -94,15 +95,20 @@
 </template>
 
 <script lang="ts" setup>
-import type { Set } from "immutable";
-import { Range } from "immutable";
+import { Range, Set } from "immutable";
 import { computed, ref } from "vue";
 
 import CustomButton from "@/components/simple/CustomButton.vue";
+import { useToaster } from "@/composables/toaster";
+
+import { dropped } from "./files";
+import type { FileType } from "./files";
+
+const toaster = useToaster();
 
 const props = withDefaults(
   defineProps<{
-    type: "image" | "json" | "tabular" | "text";
+    type: FileType;
     multiple?: boolean; // accept one or multiple files
     noUpload?: boolean;
   }>(),
@@ -113,17 +119,15 @@ const props = withDefaults(
 );
 
 const emit = defineEmits<{
-  // foward some more event to mimick more <file>
+  // forward some more event to mimick more <file>
   // needed to better integrate with vee
   // https://vee-validate.logaretm.com/v4/api/field/#rendering-complex-fields-with-scoped-slots
   blur: [];
 }>();
 
 const files = defineModel<Set<File> | undefined>();
-
-const inputFileElement = ref<HTMLInputElement | null>(null);
-
 const hideConnectField = computed(() => files.value !== undefined);
+const inputFileElement = ref<HTMLInputElement | null>(null);
 
 const fileType = computed(() => {
   const name = (() => {
@@ -142,6 +146,10 @@ const fileType = computed(() => {
   return `${name}${props.multiple ? "s" : ""}`;
 });
 
+const droppable = computed(() =>
+  props.multiple ? `${fileType.value} or a folder` : fileType.value,
+);
+
 const acceptFilter = computed(() => {
   switch (props.type) {
     case "image":
@@ -185,16 +193,30 @@ function submitFiles() {
 
   setFiles(inputs);
 }
-function dragFiles(e: DragEvent) {
+
+async function dragFiles(e: DragEvent) {
   dragEventCount.value = 0;
 
   if (e.dataTransfer === null) return;
   e.dataTransfer.dropEffect = "copy";
 
-  const inputs = e.dataTransfer.files;
-  if (inputs === null) return;
+  const { files: selected, ignored } = await dropped(
+    e.dataTransfer,
+    props.type,
+  );
 
-  setFiles(inputs);
+  if (selected.length === 0) {
+    toaster.error(`Didn't find any ${fileType.value} in what you dropped`);
+    return;
+  }
+  if (!props.multiple && selected.length > 1) {
+    toaster.error(`Drop a single ${fileType.value}`);
+    return;
+  }
+  if (ignored > 0)
+    toaster.info(`Ignored ${ignored} file(s) that aren't ${fileType.value}`);
+
+  files.value = Set(selected);
 }
 function clearFiles() {
   files.value = undefined;
diff --git a/webapp/src/components/dataset_input/__tests__/files.spec.ts b/webapp/src/components/dataset_input/__tests__/files.spec.ts
new file mode 100644
index 000000000..50183a35e
--- /dev/null
+++ b/webapp/src/components/dataset_input/__tests__/files.spec.ts
@@ -0,0 +1,163 @@
+import { expect, it } from "vitest";
+
+import { dropped, matching } from "../files";
+
+function file(name: string, type = ""): File {
+  return new File([], name, { type });
+}
+
+function names(files: File[]): string[] {
+  return files.map((f) => f.name);
+}
+
+it("keeps the files of the wanted type", () => {
+  const files = [
+    file("scan.png", "image/png"),
+    file("notes.txt", "text/plain"),
+    file("labels.csv", "text/csv"),
+  ];
+
+  expect(names(matching(files, "image"))).toEqual(["scan.png"]);
+  expect(names(matching(files, "text"))).toEqual(["notes.txt"]);
+  expect(names(matching(files, "tabular"))).toEqual(["labels.csv"]);
+});
+
+it("falls back to the extension when the type is unknown", () => {
+  const files = [file("scan.JPEG"), file("scan.tiff"), file("notes.txt")];
+
+  expect(names(matching(files, "image"))).toEqual(["scan.JPEG", "scan.tiff"]);
+});
+
+it("drops the hidden files a folder contains", () => {
+  // macOS adds .DS_Store to every folder and ._ files when zipping
+  const files = [
+    file(".DS_Store"),
+    file("._scan.png", "image/png"),
+    file("scan.png", "image/png"),
+  ];
+
+  expect(names(matching(files, "image"))).toEqual(["scan.png"]);
+});
+
+it("drops the files without extension nor type", () => {
+  expect(matching([file("README")], "image")).toHaveLength(0);
+});
+
+function fileEntry(name: string, type: string = ""): FileSystemFileEntry {
+  return {
+    isFile: true,
+    isDirectory: false,
+    name,
+    file: (onSuccess: (file: File) => void) => onSuccess(file(name, type)),
+  } as FileSystemFileEntry;
+}
+
+function directoryEntry(
+  name: string,
+  contained: FileSystemEntry[],
+  batchSize: number = 100,
+): FileSystemDirectoryEntry {
+  return {
+    isFile: false,
+    isDirectory: true,
+    name,
+    createReader: () => {
+      // a reader hands out its entries by batch, then an empty one
+      let read = 0;
+      return {
+        readEntries: (onSuccess: (entries: FileSystemEntry[]) => void) => {
+          const batch = contained.slice(read, read + batchSize);
+          read += batch.length;
+          onSuccess(batch);
+        },
+      };
+    },
+  } as FileSystemDirectoryEntry;
+}
+
+function dataTransferOf(entries: FileSystemEntry[]): DataTransfer {
+  return {
+    items: entries.map((entry) => ({ webkitGetAsEntry: () => entry })),
+    files: [],
+  } as unknown as DataTransfer;
+}
+
+it("expands a dropped folder into the files it contains", async () => {
+  const dataTransfer = dataTransferOf([
+    directoryEntry("COVID+", [
+      fileEntry("first.png", "image/png"),
+      fileEntry("second.png", "image/png"),
+    ]),
+  ]);
+
+  const { files, ignored } = await dropped(dataTransfer, "image");
+
+  expect(names(files)).toEqual(["first.png", "second.png"]);
+  expect(ignored).toBe(0);
+});
+
+it("expands the subfolders of a dropped folder", async () => {
+  const dataTransfer = dataTransferOf([
+    directoryEntry("dataset", [
+      fileEntry("top.png", "image/png"),
+      directoryEntry("nested", [fileEntry("deep.png", "image/png")]),
+    ]),
+  ]);
+
+  const { files } = await dropped(dataTransfer, "image");
+
+  expect(names(files)).toEqual(["top.png", "deep.png"]);
+});
+
+it("reads folders bigger than a reader batch", async () => {
+  const contained = Array.from({ length: 250 }, (_, i) =>
+    fileEntry(`image-${i}.png`, "image/png"),
+  );
+
+  const { files } = await dropped(
+    dataTransferOf([directoryEntry("many", contained, 100)]),
+    "image",
+  );
+
+  expect(files).toHaveLength(250);
+});
+
+it("only keeps the files of the wanted type inside a folder", async () => {
+  const dataTransfer = dataTransferOf([
+    directoryEntry("COVID+", [
+      fileEntry("scan.png", "image/png"),
+      fileEntry(".DS_Store"),
+      fileEntry("notes.txt", "text/plain"),
+    ]),
+  ]);
+
+  const { files, ignored } = await dropped(dataTransfer, "image");
+
+  expect(names(files)).toEqual(["scan.png"]);
+  expect(ignored).toBe(2);
+});
+
+it("only keeps the files of the wanted type dropped directly", async () => {
+  // nothing filters what is dropped, unlike the file picker
+  const dataTransfer = dataTransferOf([
+    fileEntry("scan.png", "image/png"),
+    fileEntry("data.xlsx", "application/vnd.ms-excel"),
+  ]);
+
+  const { files, ignored } = await dropped(dataTransfer, "image");
+
+  expect(names(files)).toEqual(["scan.png"]);
+  expect(ignored).toBe(1);
+});
+
+it("falls back to the dropped files without entries", async () => {
+  const dataTransfer = {
+    items: [{ webkitGetAsEntry: () => null }],
+    files: [file("scan.png", "image/png"), file("data.xlsx")],
+  } as unknown as DataTransfer;
+
+  const { files, ignored } = await dropped(dataTransfer, "image");
+
+  expect(names(files)).toEqual(["scan.png"]);
+  expect(ignored).toBe(1);
+});
diff --git a/webapp/src/components/dataset_input/files.ts b/webapp/src/components/dataset_input/files.ts
new file mode 100644
index 000000000..10474ba8c
--- /dev/null
+++ b/webapp/src/components/dataset_input/files.ts
@@ -0,0 +1,116 @@
+export type FileType = "image" | "json" | "tabular" | "text";
+
+const MIME_PREFIXES: Record<FileType, string> = {
+  image: "image/",
+  json: "application/json",
+  tabular: "text/csv",
+  text: "text/plain",
+};
+
+const EXTENSIONS: Record<FileType, string[]> = {
+  image: [
+    ".png",
+    ".jpg",
+    ".jpeg",
+    ".gif",
+    ".webp",
+    ".bmp",
+    ".tif",
+    ".tiff",
+    ".avif",
+  ],
+  json: [".json"],
+  tabular: [".csv"],
+  text: [".txt"],
+};
+
+/**
+ * Keeps the files of the given type.
+ *
+ * Used to filter a folder that has been dropped
+ * (file type is not checked automatically in this case)
+ */
+export function matching(files: Iterable<File>, type: FileType): File[] {
+  return Array.from(files).filter((file) => {
+    // hidden files, such as the .DS_Store macOS adds to every folder
+    if (file.name.startsWith(".")) return false;
+
+    if (file.type.startsWith(MIME_PREFIXES[type])) return true;
+
+    // browsers don't always know the type of a file, fall back to its extension
+    const dot = file.name.lastIndexOf(".");
+    if (dot === -1) return false;
+    return EXTENSIONS[type].includes(file.name.slice(dot).toLowerCase());
+  });
+}
+
+/**
+ * The files of the wanted type dropped on a field, folders expanded into the
+ * files they contain.
+ */
+export async function dropped(
+  dataTransfer: DataTransfer,
+  type: FileType,
+): Promise<{ files: File[]; ignored: number }> {
+  // dataTransfer is only readable while handling the event, get the entries
+  // before awaiting anything
+  const entries = Array.from(dataTransfer.items, (item) =>
+    item.webkitGetAsEntry(),
+  ).filter((entry) => entry !== null);
+
+  const all: File[] = [];
+  if (entries.length === 0)
+    // nothing was dropped as an entry, e.g. text or an unsupported browser
+    all.push(...dataTransfer.files);
+  else
+    for (const entry of entries)
+      if (isFile(entry)) all.push(await fileOf(entry));
+      else if (isDirectory(entry)) all.push(...(await filesIn(entry)));
+
+  const files = matching(all, type);
+  return { files, ignored: all.length - files.length };
+}
+
+async function filesIn(directory: FileSystemDirectoryEntry): Promise<File[]> {
+  const files: File[] = [];
+
+  for (const entry of await entriesIn(directory))
+    if (isFile(entry)) files.push(await fileOf(entry));
+    else if (isDirectory(entry)) files.push(...(await filesIn(entry)));
+
+  return files;
+}
+
+async function entriesIn(
+  directory: FileSystemDirectoryEntry,
+): Promise<FileSystemEntry[]> {
+  const reader = directory.createReader();
+
+  // a reader only returns a batch of entries at a time, at most 100 on Chrome,
+  // and an empty one once the whole directory has been read
+  const entries: FileSystemEntry[] = [];
+  for (;;) {
+    const batch = await new Promise<FileSystemEntry[]>((resolve, reject) => {
+      reader.readEntries(resolve, reject);
+    });
+    if (batch.length === 0) return entries;
+
+    entries.push(...batch);
+  }
+}
+
+function fileOf(entry: FileSystemFileEntry): Promise<File> {
+  return new Promise((resolve, reject) => entry.file(resolve, reject));
+}
+
+// TS type guard
+function isFile(entry: FileSystemEntry): entry is FileSystemFileEntry {
+  return entry.isFile;
+}
+
+// TS type guard
+function isDirectory(
+  entry: FileSystemEntry,
+): entry is FileSystemDirectoryEntry {
+  return entry.isDirectory;
+}