From 6af3d75fc2b8ac6bd1b0580dd9c70b3fcb61f399 Mon Sep 17 00:00:00 2001
From: Julien Vignoud <julien.vignoud@epfl.ch>
Date: Thu, 20 Feb 2025 11:47:13 +0100
Subject: [PATCH 1/5] webapp: create a tutorial store and install Driver.js

---
 package-lock.json            |  7 +++++++
 webapp/package.json          |  1 +
 webapp/src/store/index.ts    |  1 +
 webapp/src/store/tutorial.ts | 11 +++++++++++
 4 files changed, 20 insertions(+)
 create mode 100644 webapp/src/store/tutorial.ts

diff --git a/package-lock.json b/package-lock.json
index cc363e25f..11d3b0d26 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -6228,6 +6228,12 @@
         "webidl-conversions": "^4.0.2"
       }
     },
+    "node_modules/driver.js": {
+      "version": "1.3.5",
+      "resolved": "https://registry.npmjs.org/driver.js/-/driver.js-1.3.5.tgz",
+      "integrity": "sha512-exkp49hXuujvTOZ3zYgySWRlEAa8/3nA8glYjtuZjmkTdsQITXivBsW1ytyhKQx3WkeYaovlnvVcLbtTaN86kA==",
+      "license": "MIT"
+    },
     "node_modules/duplexer": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/duplexer/-/duplexer-0.1.2.tgz",
@@ -13848,6 +13854,7 @@
         "apexcharts": "4",
         "cypress": "13",
         "d3": "7",
+        "driver.js": "^1.3.5",
         "pinia": "<2.2.3",
         "pinia-plugin-persistedstate-2": "2",
         "vee-validate": "4",
diff --git a/webapp/package.json b/webapp/package.json
index 8554f7b93..380cf65e1 100644
--- a/webapp/package.json
+++ b/webapp/package.json
@@ -17,6 +17,7 @@
     "apexcharts": "4",
     "cypress": "13",
     "d3": "7",
+    "driver.js": "1",
     "pinia": "<2.2.3",
     "pinia-plugin-persistedstate-2": "2",
     "vee-validate": "4",
diff --git a/webapp/src/store/index.ts b/webapp/src/store/index.ts
index 6ae53d5cd..2c9123c82 100644
--- a/webapp/src/store/index.ts
+++ b/webapp/src/store/index.ts
@@ -4,3 +4,4 @@ export { useModelsStore } from "./models";
 export { useTasksStore } from "./tasks";
 export { useTrainingStore } from "./training";
 export { useValidationStore } from "./validation";
+export { useTutorialStore } from "./tutorial";
diff --git a/webapp/src/store/tutorial.ts b/webapp/src/store/tutorial.ts
new file mode 100644
index 000000000..604ad39aa
--- /dev/null
+++ b/webapp/src/store/tutorial.ts
@@ -0,0 +1,11 @@
+import { ref } from "vue";
+import { defineStore } from "pinia";
+
+export const useTutorialStore = defineStore("guide", () => {
+  const showGuide = ref(false);
+  
+  function toggleGuide() {
+      showGuide.value = !showGuide.value;
+  }
+  return { showGuide, toggleGuide };
+});

From aadb2b813182a9cd69ec26335e012adf3f8e2f49 Mon Sep 17 00:00:00 2001
From: Julien Vignoud <julien.vignoud@epfl.ch>
Date: Thu, 20 Feb 2025 11:39:43 +0100
Subject: [PATCH 2/5] webapp: home page tutorial on sidebar

---
 webapp/src/assets/svg/QuestionMarkIcon.vue | 13 ++++
 webapp/src/components/home/Home.vue        | 84 ++++++++++++++++++++++
 webapp/src/components/sidebar/SideBar.vue  | 28 +++++---
 3 files changed, 117 insertions(+), 8 deletions(-)
 create mode 100644 webapp/src/assets/svg/QuestionMarkIcon.vue

diff --git a/webapp/src/assets/svg/QuestionMarkIcon.vue b/webapp/src/assets/svg/QuestionMarkIcon.vue
new file mode 100644
index 000000000..bcf806841
--- /dev/null
+++ b/webapp/src/assets/svg/QuestionMarkIcon.vue
@@ -0,0 +1,13 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="currentColor"
+    class="w-6 h-6"
+    viewBox="0 0 512 512"
+    stroke="currentColor"
+  >
+    <path
+      d="M80 160c0-35.3 28.7-64 64-64h32c35.3 0 64 28.7 64 64v3.6c0 21.8-11.1 42.1-29.4 53.8l-42.2 27.1c-25.2 16.2-40.4 44.1-40.4 74v1.4c0 17.7 14.3 32 32 32s32-14.3 32-32v-1.4c0-8.2 4.2-15.8 11-20.2l42.2-27.1c36.6-23.6 58.8-64.1 58.8-107.7V160c0-70.7-57.3-128-128-128H144C73.3 32 16 89.3 16 160c0 17.7 14.3 32 32 32s32-14.3 32-32zm80 320a40 40 0 1 0 0-80 40 40 0 1 0 0 80z"
+    />
+  </svg>
+</template>
diff --git a/webapp/src/components/home/Home.vue b/webapp/src/components/home/Home.vue
index 69874db72..33021cb2a 100644
--- a/webapp/src/components/home/Home.vue
+++ b/webapp/src/components/home/Home.vue
@@ -41,5 +41,89 @@ import GetStarted from "@/components/home/GetStarted.vue";
 import FeedbackIcon from "@/assets/svg/FeedbackIcon.vue";
 import InfoIcon from "@/assets/svg/InfoIcon.vue";
 
+import { nextTick, watch } from "vue";
+import { useRouter } from "vue-router";
+
+import { driver, type DriveStep } from "driver.js";
+import "driver.js/dist/driver.css";
+
+import { useTutorialStore } from "@/store";
+
 const started = ref(false);
+const router = useRouter();
+const tutorialStore = useTutorialStore();
+
+// Create a driver object
+const driverObj = driver({
+  showProgress: false,
+});
+
+const steps: DriveStep[] = [
+  {
+    element: "#task-icon",
+    popover: {
+      title: "Collaborate on ML Tasks",
+      description:
+        "DISCOllaboratives let users collaboratively train ML models while keeping their datasets private.",
+      side: "left",
+      align: "start",
+    },
+  },
+  {
+    element: "#create-icon",
+    popover: {
+      title: "Create a Collaborative ML Task",
+      description:
+        "Create a DISCOllaborative by defining an ML model and task, allowing others to join and contribute while keeping their data private.",
+      side: "left",
+      align: "start",
+    },
+  },
+  {
+    element: "#evaluate-icon",
+    popover: {
+      title: "Evaluate ML Models",
+      description:
+        "Test locally stored models or download models from the DISCO server to evaluate their performance.",
+      side: "left",
+      align: "start",
+    },
+  },
+  {
+    element: ".theme-button",
+    popover: {
+      title: "Switch Theme",
+      description:
+        "Toggle between light and dark themes for a personalized visual experience.",
+      side: "left",
+      align: "start",
+    },
+  },
+  {
+    element: "#help-icon",
+    popover: {
+      title: "Show help",
+      description: "You can access a hint at any time if something is unclear.",
+      side: "left",
+      align: "start",
+    },
+  },
+];
+
+driverObj.setSteps(steps);
+driverObj.drive();
+
+watch(
+  () => tutorialStore.showGuide,
+  async (_) => {
+    if (driverObj.isActive()) {
+      await driverObj.destroy();
+    }
+    if (router.currentRoute.value.path === "/") {
+      driverObj.setSteps(steps);
+      await nextTick();
+      driverObj.drive();
+    }
+  },
+);
 </script>
diff --git a/webapp/src/components/sidebar/SideBar.vue b/webapp/src/components/sidebar/SideBar.vue
index fe0806650..844884a7d 100644
--- a/webapp/src/components/sidebar/SideBar.vue
+++ b/webapp/src/components/sidebar/SideBar.vue
@@ -14,18 +14,20 @@
 
       <!-- Mini Sidebar content-->
       <div class="flex flex-col items-center justify-center flex-1 space-y-4">
-        <SidebarButton to="/" text="Home"> <HomeIcon /> </SidebarButton>
+        <SidebarButton to="/" text="Home" id="home-icon">
+          <HomeIcon />
+        </SidebarButton>
 
         <SidebarButton to="/list" text="DISCOllaboratives">
-          <TasksIcon class="w-6 h-6" />
+          <TasksIcon class="w-6 h-6" id="task-icon" />
         </SidebarButton>
 
         <SidebarButton to="/create" text="Create a new DISCOllaborative">
-          <CreateIcon />
+          <CreateIcon id="create-icon" />
         </SidebarButton>
 
         <SidebarButton to="/evaluate" text="Evaluate models">
-          <EvaluateIcon />
+          <EvaluateIcon id="evaluate-icon" />
         </SidebarButton>
 
         <SidebarButton to="/information" text="More on DISCO">
@@ -37,8 +39,12 @@
           :text="currentTheme === 'light' ? 'Switch to Dark Mode' : 'Switch to Light Mode'" 
           @click="toggleDarkMode"
         >
-          <MoonIcon v-if="currentTheme === 'light'"/>
-          <SunIcon v-else/>
+          <MoonIcon v-if="currentTheme === 'light'" class="theme-button" />
+          <SunIcon v-else class="theme-button" />
+        </SidebarButton>
+
+        <SidebarButton text="Show tutorial" to="" @click="showGuide">
+          <QuestionMarkIcon id="help-icon" />
         </SidebarButton>
       </div>
     </nav>
@@ -58,8 +64,12 @@ import DISCO from "@/components/simple/DISCO.vue";
 import SidebarButton from "./SidebarButton.vue";
 import MoonIcon from "@/assets/svg/MoonIcon.vue";
 import SunIcon from "@/assets/svg/SunIcon.vue";
+import QuestionMarkIcon from "@/assets/svg/QuestionMarkIcon.vue";
 
-const currentTheme = ref(localStorage.getItem('theme') || 'light');
+import { useTutorialStore } from "@/store";
+
+const currentTheme = ref(localStorage.getItem("theme") || "light");
+const tutorialStore = useTutorialStore();
 
 // Apply the initial theme on mount
 onMounted(() => {
@@ -75,5 +85,7 @@ const toggleDarkMode = () => {
   currentTheme.value = newTheme;
 };
 
-
+const showGuide = () => {
+  tutorialStore.toggleGuide();
+};
 </script>

From cf4c82329b5e4dab4a2f7d692b44e7157097b99c Mon Sep 17 00:00:00 2001
From: Julien Vignoud <julien.vignoud@epfl.ch>
Date: Thu, 20 Feb 2025 11:40:21 +0100
Subject: [PATCH 3/5] webapp: data input and training tutorial

---
 .../dataset_input/DataDescription.vue         |  37 ++--
 .../dataset_input/FileSelection.vue           |   5 +-
 .../LabeledImageDatasetInput/index.vue        |   2 +
 webapp/src/components/training/Finished.vue   |  30 +--
 .../src/components/training/TrainingSteps.vue | 172 +++++++++++++++++-
 5 files changed, 218 insertions(+), 28 deletions(-)

diff --git a/webapp/src/components/dataset_input/DataDescription.vue b/webapp/src/components/dataset_input/DataDescription.vue
index 45f0bc111..32b584fa1 100644
--- a/webapp/src/components/dataset_input/DataDescription.vue
+++ b/webapp/src/components/dataset_input/DataDescription.vue
@@ -4,18 +4,30 @@
       <template #title> Expected Data Format </template>
 
       <!-- Sample dataset link and instructions -->
-       <div class="mb-5 text-left" v-show="task.displayInformation.sampleDatasetLink !== undefined">
-          <b>Don't have any data?</b> You can download an example dataset <a target="_blank" class='underline text-blue-400' :href="task.displayInformation.sampleDatasetLink">here</a>.
-          <br/><span v-html="task.displayInformation.sampleDatasetInstructions"/><br/>
+      <div
+        class="mb-5 text-left"
+        v-show="task.displayInformation.sampleDatasetLink !== undefined"
+      >
+        <b>Don't have any data?</b> You can download an example dataset
+        <a
+          id="data-link-download"
+          target="_blank"
+          class="underline text-blue-400"
+          :href="task.displayInformation.sampleDatasetLink"
+          >here</a
+        >. <br /><span
+          v-html="task.displayInformation.sampleDatasetInstructions"
+        /><br />
       </div>
 
       <div v-if="task.displayInformation.dataFormatInformation !== undefined">
-        <div v-html="task.displayInformation.dataFormatInformation" /><br>
+        <div v-html="task.displayInformation.dataFormatInformation" />
+        <br />
       </div>
 
       <!-- Tabular data example -->
-      <div v-if="task.displayInformation.dataExampleText !== undefined" >
-        <span v-html="task.displayInformation.dataExampleText" /><br>
+      <div v-if="task.displayInformation.dataExampleText !== undefined">
+        <span v-html="task.displayInformation.dataExampleText" /><br />
         <div
           v-if="['tabular', 'text'].includes(task.trainingInformation.dataType)"
           class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4"
@@ -24,19 +36,20 @@
             v-for="(column, idx) in task.displayInformation.dataExample"
             :key="idx"
           >
-            <span class="font-bold">{{ column.columnName }}:</span> {{ column.columnData }}
+            <span class="font-bold">{{ column.columnName }}:</span>
+            {{ column.columnData }}
           </span>
         </div>
       </div>
 
       <!-- Image data example -->
       <div v-if="task.displayInformation.dataExampleImage !== undefined">
-        <br>
+        <br />
         <img
           class="mx-auto"
           :src="task.displayInformation.dataExampleImage"
           alt="Error! Image not found"
-        >
+        />
       </div>
     </DropdownCard>
   </div>
@@ -45,10 +58,10 @@
 <script setup lang="ts">
 import type { DataType, Task } from "@epfml/discojs";
 
-import DropdownCard from '@/components/containers/DropdownCard.vue'
+import DropdownCard from "@/components/containers/DropdownCard.vue";
 
 interface Props {
-  task: Task<DataType>
+  task: Task<DataType>;
 }
-const _ = defineProps<Props>()
+const _ = defineProps<Props>();
 </script>
diff --git a/webapp/src/components/dataset_input/FileSelection.vue b/webapp/src/components/dataset_input/FileSelection.vue
index fb521ef15..380e715fb 100644
--- a/webapp/src/components/dataset_input/FileSelection.vue
+++ b/webapp/src/components/dataset_input/FileSelection.vue
@@ -18,11 +18,14 @@
         @dragleave="onDragLeave"
         @drop="async (e: DragEvent) => await dragFiles(e)"
       >
-        <p class="p-4 text-lg text-disco-blue dark:text-disco-light-blue flex-wrap justify-center">
+        <p
+          class="p-4 text-lg text-disco-blue dark:text-disco-light-blue flex-wrap justify-center"
+        >
           <span>Drag and drop the {{ fileType }} or</span>
         </p>
         <label class="mb-6">
           <span
+            id="select-data-bttn"
             class="px-4 py-2 min-w-[8rem] text-lg uppercase text-white bg-disco-cyan rounded duration-200 hover:bg-white hover:dark:bg-slate-950 hover:outline hover:outline-disco-cyan hover:outline-2 hover:text-disco-cyan hover:cursor-pointer"
           >
             select {{ fileType }}
diff --git a/webapp/src/components/dataset_input/LabeledImageDatasetInput/index.vue b/webapp/src/components/dataset_input/LabeledImageDatasetInput/index.vue
index 3e6cac98b..d2ec1772e 100644
--- a/webapp/src/components/dataset_input/LabeledImageDatasetInput/index.vue
+++ b/webapp/src/components/dataset_input/LabeledImageDatasetInput/index.vue
@@ -8,6 +8,7 @@
 
       <div class="flex justify-center">
         <button
+          id="group-data-bttn"
           class="w-40 py-2 uppercase text-lg rounded-l-lg border-2 border-disco-cyan focus:outline-none"
           :class="
             connectImagesByGroup
@@ -19,6 +20,7 @@
           group
         </button>
         <button
+          id="csv-file-bttn"
           class="w-40 py-2 uppercase text-lg rounded-r-lg border-2 border-disco-cyan focus:outline-none"
           :class="
             !connectImagesByGroup
diff --git a/webapp/src/components/training/Finished.vue b/webapp/src/components/training/Finished.vue
index 3be187907..029a58557 100644
--- a/webapp/src/components/training/Finished.vue
+++ b/webapp/src/components/training/Finished.vue
@@ -1,20 +1,24 @@
 <template>
   <div class="grid grid-cols-1 md:grid-cols-2 gap-8 mt-10 items-stretch">
-    <!-- Save the model -->
-    <ButtonsCard :buttons="List.of(['test model', onTestModel])">
-      <template #title> Test the model </template>
-
-      Check the performance of your <DISCOllaborative /> trained model by
-      testing it on new data (that was not used in training).
-    </ButtonsCard>
-
     <!-- Test the model -->
-    <ButtonsCard :buttons="List.of(['save model', onSaveModel])">
-      <template #title> Save the model </template>
+    <div id="test-model">
+      <ButtonsCard :buttons="List.of(['test model', onTestModel])">
+        <template #title> Test the model </template>
 
-      Saving the model will allow you to access it later to update training in a
-      new <DISCOllaborative />.
-    </ButtonsCard>
+        Check the performance of your <DISCOllaborative /> trained model by
+        testing it on new data (that was not used in training).
+      </ButtonsCard>
+    </div>
+
+    <!-- Save the model -->
+    <div id="save-model">
+      <ButtonsCard :buttons="List.of(['save model', onSaveModel])">
+        <template #title> Save the model </template>
+
+        Saving the model will allow you to access it later to update training in
+        a new <DISCOllaborative />.
+      </ButtonsCard>
+    </div>
   </div>
 </template>
 
diff --git a/webapp/src/components/training/TrainingSteps.vue b/webapp/src/components/training/TrainingSteps.vue
index cdfa63408..7f7306af5 100644
--- a/webapp/src/components/training/TrainingSteps.vue
+++ b/webapp/src/components/training/TrainingSteps.vue
@@ -26,7 +26,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, onMounted, ref, toRaw, watch } from "vue";
+import { computed, nextTick, onMounted, ref, toRaw, watch } from "vue";
 import { useRouter, useRoute } from "vue-router";
 
 import type {
@@ -45,7 +45,9 @@ import TrainingButtons from "@/components/progress_bars/TrainingButtons.vue";
 import Description from "@/components/training/Description.vue";
 import Finished from "@/components/training/Finished.vue";
 import Trainer from "@/components/training/Trainer.vue";
-import { useTasksStore, useTrainingStore } from "@/store";
+import { useTasksStore, useTrainingStore, useTutorialStore } from "@/store";
+import { driver } from "driver.js";
+import "driver.js/dist/driver.css";
 
 const router = useRouter();
 const route = useRoute();
@@ -111,4 +113,170 @@ const unamedDataset = computed<Dataset<DataFormat.Raw[DataType]> | undefined>(
   },
 );
 const trainedModel = ref<Model<DataType>>();
+
+const tutorialStore = useTutorialStore();
+
+const driverTraining = driver({
+  showProgress: false,
+});
+
+const createSteps = (
+  steps:
+    | (
+        | { title: string; description: string; element?: undefined }
+        | { element: string; title: string; description: string }
+      )[]
+    | { element: any; title: any; description: any }[],
+) =>
+  steps.map(({ element, title, description }) => ({
+    ...(element && { element }),
+    popover: {
+      title,
+      description,
+      side: "top",
+      align: "center",
+    },
+  }));
+
+const stepsConfig = {
+  data: [
+    {
+      title: "Expected Data Format",
+      description:
+        "This section describes the criteria for the data required by the model. Please upload your dataset to proceed with training.",
+    },
+    {
+      element: "#data-link-download",
+      title: "Get Sample Data",
+      description:
+        "Click here to download a sample dataset if you don't have your own. Perfect for testing and experimenting!",
+    },
+    {
+      element: "#select-data-bttn",
+      title: "Upload Your Dataset",
+      description:
+        "Click here to upload your dataset for model training. Your data stays secure and never leaves your device.",
+    },
+  ],
+  dataImage: [
+    {
+      title: "Expected Data Format",
+      description:
+        "This section describes the criteria for the data required by the model. Please upload your dataset to proceed with training.",
+    },
+    {
+      element: "#data-link-download",
+      title: "Get Sample Data",
+      description:
+        "Click here to download a sample dataset if you don't have your own. Perfect for testing and experimenting!",
+    },
+    {
+      element: "#group-data-bttn",
+      title: "Group Selection",
+      description:
+        "Use this option to manually create labeled data groups by selecting images for each category.",
+    },
+    {
+      element: "#csv-file-bttn",
+      title: "CSV Upload",
+      description:
+        "Upload a CSV file to connect your data. Each row should link data points to their respective labels.",
+    },
+    {
+      element: "#select-data-bttn",
+      title: "Upload Your Dataset",
+      description:
+        "Click here to upload your dataset for model training. Your data stays secure and never leaves your device.",
+    },
+  ],
+  training: [
+    {
+      title: "Training Mode",
+      description:
+        "This section allows you to choose how the model will be trained. Select between collaborative or local training modes.",
+    },
+    {
+      element: "#train-collaboratively-bttn",
+      title: "Collaborative Training",
+      description:
+        "Train the model together with other users in a shared session. This requires multiple participants and is ideal for distributed data tasks.",
+    },
+    {
+      element: "#training-locally-bttn",
+      title: "Local Training",
+      description:
+        "Train the model on your own device using only your data. This method is recommended for most users as it ensures privacy and simplicity.",
+    },
+  ],
+  evaluation: [
+    {
+      title: "Model Evaluation",
+      description:
+        "This section allows you to evaluate and finalize your trained model by testing and saving it.",
+    },
+    {
+      element: "#test-model",
+      title: "Test the Model",
+      description:
+        "Check how well your model performs by testing it on new data not used during training.",
+    },
+    {
+      element: "#save-model",
+      title: "Save the Model",
+      description:
+        "Save your trained model to access it later or continue improving it in future training sessions.",
+    },
+  ],
+  collaboratives: [
+    {
+      title: "Explore DISCOllaboratives",
+      description:
+        "Choose from the available machine learning tasks below and train models with your own private data.",
+    },
+  ],
+};
+
+const getStepsForStep = (
+  step: number | undefined,
+  dataType: string | undefined,
+) => {
+  switch (step) {
+    case 2:
+      return dataType === "image"
+        ? createSteps(stepsConfig.dataImage)
+        : createSteps(stepsConfig.data);
+    case 3:
+      return createSteps(stepsConfig.training);
+    case 4:
+      return createSteps(stepsConfig.evaluation);
+    default:
+      return [];
+  }
+};
+
+watch(
+  () => tutorialStore.showGuide,
+  async (_) => {
+    if (driverTraining.isActive()) {
+      await driverTraining.destroy();
+    }
+
+    if (
+      ["/llm_task", "/tinder_dog", "/mnist", "/lus_covid", "/titanic"].includes(
+        router.currentRoute.value.path,
+      )
+    ) {
+      const steps = getStepsForStep(
+        trainingStore.step,
+        task?.value?.trainingInformation.dataType,
+      );
+
+      if (steps.length) {
+        driverTraining.setSteps(steps);
+        await nextTick();
+        driverTraining.drive();
+      }
+    }
+  },
+);
 </script>

From aac64c6d1c77d2944bf6bff06e0a309359125801 Mon Sep 17 00:00:00 2001
From: Julien Vignoud <julien.vignoud@epfl.ch>
Date: Thu, 20 Feb 2025 11:40:37 +0100
Subject: [PATCH 4/5] webapp/components/testing: testing tutorial

---
 webapp/src/components/testing/Testing.vue | 180 ++++++++++++++++++++--
 1 file changed, 168 insertions(+), 12 deletions(-)

diff --git a/webapp/src/components/testing/Testing.vue b/webapp/src/components/testing/Testing.vue
index 8c93c002b..c1e32327a 100644
--- a/webapp/src/components/testing/Testing.vue
+++ b/webapp/src/components/testing/Testing.vue
@@ -1,7 +1,7 @@
 <template>
   <div v-show="validationStore.step === 0">
     <div class="flex flex-col gap-8">
-      <div v-if="!models.infos.isEmpty()">
+      <div v-if="!models.infos.isEmpty()" class="model-library">
         <IconCard title-placement="center">
           <template #title>
             Model Library —
@@ -57,7 +57,7 @@
           </div>
         </IconCard>
       </div>
-      <div v-else>
+      <div v-else class="model-library">
         <IconCard>
           <template #title> Empty Model Library </template>
 
@@ -69,12 +69,13 @@
         </IconCard>
       </div>
 
-      <div>
+      <div id="model-repository">
         <IconCard title-placement="center">
           <template #title>
-            <span><DISCO /> Model Repository — <span class="italic">Download and Test</span></span>
-            
-            
+            <span
+              ><DISCO /> Model Repository —
+              <span class="italic">Download and Test</span></span
+            >
           </template>
 
           <div
@@ -124,7 +125,6 @@
 
   <div v-if="selection !== undefined">
     <div v-if="validationStore.step !== 0">
-
       <TestSteps
         v-if="selection.mode === 'test'"
         :task="selection.task"
@@ -144,8 +144,8 @@
 <script lang="ts" setup>
 import createDebug from "debug";
 import { List } from "immutable";
-import { computed, ref, onActivated } from "vue";
-import { RouterLink } from "vue-router";
+import { computed, ref, onActivated, watch, nextTick } from "vue";
+import { RouterLink, useRouter } from "vue-router";
 import { VueSpinner } from "vue3-spinners";
 
 import type { DataType, Model, Task } from "@epfml/discojs";
@@ -155,9 +155,9 @@ import Bin2Icon from "@/assets/svg/Bin2Icon.vue";
 import { useToaster } from "@/composables/toaster";
 import { CONFIG } from "@/config";
 import type { ModelID } from "@/store";
-import { useModelsStore } from "@/store";
-import { useTasksStore } from "@/store";
-import { useValidationStore } from "@/store";
+import {
+  useModelsStore, useTasksStore, useValidationStore, useTutorialStore
+} from "@/store";
 
 import ButtonsCard from "@/components/containers/ButtonsCard.vue";
 import IconCard from "@/components/containers/IconCard.vue";
@@ -167,12 +167,19 @@ import DISCOllaboratives from "@/components/simple/DISCOllaboratives.vue";
 
 import TestSteps from "./TestSteps.vue";
 import PredictSteps from "./PredictSteps.vue";
+import { driver, type DriveStep } from "driver.js";
+import "driver.js/dist/driver.css";
 
 const debug = createDebug("webapp:Testing");
 const validationStore = useValidationStore();
 const models = useModelsStore();
 const tasksStore = useTasksStore();
 const toaster = useToaster();
+const tutorialStore = useTutorialStore();
+const router = useRouter();
+const driverTesting = driver({
+  showProgress: false,
+});
 
 type Selection<D extends DataType> = {
   mode: "predict" | "test";
@@ -288,4 +295,153 @@ function taskTitle(taskID: string): string | undefined {
 
   return titled.displayInformation.taskTitle;
 }
+//Define the steps for the guide when no user's models are available
+const modelEmptySteps: DriveStep[] = [
+  {
+    popover: {
+      title: "Model Evaluation",
+      description:
+        "This page allows you to test and validate models stored locally or download new models from the DISCO Model Repository for further testing and evaluation.",
+      side: "top",
+      align: "center",
+    },
+  },
+  {
+    element: ".model-library",
+    popover: {
+      title: "Model Library",
+      description:
+        "Test any locally stored model against a validation dataset to evaluate its performance.",
+      side: "top",
+      align: "center",
+    },
+  },
+  {
+    element: "#model-repository",
+    popover: {
+      title: "DISCO Model Repository",
+      description:
+        "Download additional models from the repository for testing or federated training tasks.",
+      side: "top",
+      align: "center",
+    },
+  },
+];
+// Define the steps for the guide when user's models are available
+const modelSteps: DriveStep[] = [
+  {
+    popover: {
+      title: "Model Evaluation",
+      description:
+        "This page allows you to test and validate models stored locally or download new models from the DISCO Model Repository for further testing and evaluation.",
+      side: "top",
+      align: "center",
+    },
+  },
+
+  {
+    element: ".model-library",
+    popover: {
+      title: "Model Library",
+      description:
+        "Test any locally stored model against a validation dataset to evaluate its performance.",
+      side: "top",
+      align: "center",
+    },
+  },
+  {
+    element: ".mb-1:nth-child(1)",
+    popover: {
+      description:
+        "Run the model on a validation dataset to assess its accuracy.",
+      side: "top",
+      align: "center",
+    },
+  },
+  {
+    element: ".mb-1:nth-child(2)",
+    popover: {
+      description:
+        "Use the selected model to make predictions on new data inputs.",
+      side: "top",
+      align: "center",
+    },
+  },
+  {
+    element: "#model-repository",
+    popover: {
+      title: "DISCO Model Repository",
+      description:
+        "Download additional models from the repository for testing or federated training tasks.",
+      side: "top",
+      align: "center",
+    },
+  },
+];
+// Define the steps for the guide related to data handling
+const dataSteps: DriveStep[] = [
+  {
+    popover: {
+      title: "Expected Data Format",
+      description:
+        "Testing your model on unseen data is crucial. Make sure the dataset you select was not part of the training process to ensure accurate evaluation.",
+      side: "top",
+      align: "center",
+    },
+  },
+  {
+    element: "#data-link-download",
+    popover: {
+      title: "Test",
+      description:
+        "Click here to download a sample dataset if you don't have your own. Perfect for testing and experimenting!",
+      side: "top",
+      align: "center",
+    },
+  },
+  {
+    element: "#select-data-bttn",
+    popover: {
+      title: "Upload Your Dataset",
+      description:
+        "Click here to upload your dataset for model training. Your data stays secure and never leaves your device.",
+      side: "top",
+      align: "center",
+    },
+  },
+];
+// Define the steps for the guide related to model evaluation
+const evaluationSteps: DriveStep[] = [
+  {
+    popover: {
+      title: "Model Evaluation",
+      description:
+        "This page is intended for testing or validating the selected model. After the testing is complete, the results can be saved in CSV file format for further analysis or use.",
+      side: "top",
+      align: "center",
+    },
+  },
+];
+watch(
+  () => tutorialStore.showGuide,
+  async (_) => {
+    if (driverTesting.isActive()) {
+      await driverTesting.destroy();
+    }
+    if (router.currentRoute.value.path === "/evaluate") {
+      const stepsMap: Record<number, DriveStep[]> = {
+        0: models.infos.isEmpty() ? modelEmptySteps : modelSteps,
+        1: dataSteps,
+        2: evaluationSteps,
+      };
+
+      const steps = stepsMap[validationStore.step] || [];
+      if (steps.length) {
+        driverTesting.setSteps(steps);
+        await nextTick();
+        driverTesting.drive();
+      }
+    }
+  },
+);
 </script>

From 10ee9a741494e19b083b3100c8e70c7930e6a140 Mon Sep 17 00:00:00 2001
From: Julien Vignoud <julien.vignoud@epfl.ch>
Date: Wed, 26 Feb 2025 12:02:24 +0100
Subject: [PATCH 5/5] tmp: prevent tutorial from triggering upon page load

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

diff --git a/webapp/src/components/home/Home.vue b/webapp/src/components/home/Home.vue
index 33021cb2a..c7a47cc83 100644
--- a/webapp/src/components/home/Home.vue
+++ b/webapp/src/components/home/Home.vue
@@ -111,7 +111,7 @@ const steps: DriveStep[] = [
 ];
 
 driverObj.setSteps(steps);
-driverObj.drive();
+// driverObj.drive();
 
 watch(
   () => tutorialStore.showGuide,