Merge pull request #858 from epfml/interactive-tutorial-olena

Add interactive tutorial guide to enhance user experience

Author: JulienVig

datasets/populate

@@ -17,8 +17,9 @@ rm archive.zip DeAI-testimages
 
 # wikitext
 mkdir -p wikitext
-curl 'https://dax-cdn.cdn.appdomain.cloud/dax-wikitext-103/1.0.1/wikitext-103.tar.gz' |
-	tar --extract --gzip --strip-components=1 -C wikitext
+curl 'https://storage.googleapis.com/deai-313515.appspot.com/wikitext.zip' > wikitext.zip
+unzip -u wikitext.zip
+rm wikitext.zip
 
 # tinder_dog
 curl 'https://storage.googleapis.com/deai-313515.appspot.com/tinder_dog.zip' > tinder_dog.zip

discojs/src/default_tasks/wikitext.ts

@@ -20,7 +20,7 @@ export const wikitext: TaskProvider<'text'> = {
         ].join(" "),
         dataFormatInformation: 'You can use any natural language (text) dataset you like. For example the Wikitext-103 dataset is organized as a large text file, with each line representing a segment of raw text from Wikipedia articles.',
         dataExampleText: 'An example excerpt from the dataset is: <i>"For the first twenty years of its existence , the only staged performances of Parsifal took place in the Bayreuth Festspielhaus , the venue for which Wagner conceived the work ( except eight private performances for Ludwig II at Munich in 1884 and 1885 ) ."</i>',
-        sampleDatasetLink: 'https://dax-cdn.cdn.appdomain.cloud/dax-wikitext-103/1.0.1/wikitext-103.tar.gz',
+        sampleDatasetLink: 'https://storage.googleapis.com/deai-313515.appspot.com/wikitext.zip',
         sampleDatasetInstructions: 'Opening the link should start downloading a zip file. Unzip it and drag and drop the training set named "wiki.train.tokens" in the field below (or use the "Select File" button). Even though the file extension is ".tokens" it is indeed a text file. You can use "wiki.test.tokens" at the evaluation step after training a language model.'
       },
       trainingInformation: {

package-lock.json

@@ -3,6 +3,13 @@ import { basicTask, setupServerWith } from "../support/e2e";
 // TODO move to components testing
 // upstream doesn't yet allow that vuejs/test-utils#2468
 
+function goToDatasetInputStep() {
+  cy.visit("/#/list");
+  cy.get(".driver-popover-close-btn").click();
+  cy.get("button").contains("participate").click();
+  cy.get("button").contains("next").click();
+}
+
 describe("image dataset input by group", () => {
   it("shows passed labels", () => {
     setupServerWith(
@@ -14,11 +21,7 @@ describe("image dataset input by group", () => {
       }),
     );
 
-    cy.visit("/#/list");
-    cy.get("button").contains("participate").click();
-
-    cy.get("button").contains("next").click();
-
+    goToDatasetInputStep();
     cy.get("button").contains("group").click();
 
     cy.contains("Group label: first").should("exist");
@@ -36,11 +39,7 @@ describe("image dataset input by group", () => {
       }),
     );
 
-    cy.visit("/#/list");
-    cy.get("button").contains("participate").click();
-
-    cy.get("button").contains("next").click();
-
+    goToDatasetInputStep();
     cy.get("button").contains("group").click();
     cy.contains("select images").selectFile([
       { fileName: "first.png", contents: new Uint8Array() },
@@ -63,11 +62,7 @@ describe("image dataset input by csv", () => {
       }),
     );
 
-    cy.visit("/#/list");
-    cy.get("button").contains("participate").click();
-
-    cy.get("button").contains("next").click();
-
+    goToDatasetInputStep();
     cy.get("button").contains("csv").click();
     cy.contains("select CSV").selectFile({
       fileName: "csv",
@@ -99,11 +94,7 @@ describe("tabular dataset input", () => {
       }),
     );
 
-    cy.visit("/#/list");
-    cy.get("button").contains("participate").click();
-
-    cy.get("button").contains("next").click();
-
+    goToDatasetInputStep();
     cy.contains("select CSV").selectFile({
       fileName: "filename",
       contents: new TextEncoder().encode("a,b,c\n1,2,3\n"),

webapp/cypress/e2e/datasetInput.cy.ts

@@ -2,7 +2,9 @@ import { defaultTasks } from "@epfml/discojs";
 
 import { setupServerWith } from "../../support/e2e";
 
-it("stores models", () => {
+it("stores models",
+  { retries: 5 }, // can exhaust memory
+  () => {
   setupServerWith(defaultTasks.titanic);
 
   cy.visit("/#/evaluate");
@@ -13,7 +15,9 @@ it("stores models", () => {
   cy.contains("button", "test").should("exist");
 });
 
-it("stores larger models", () => {
+it("stores larger models",
+  { retries: 5 }, // can exhaust memory
+  () => {
   setupServerWith(defaultTasks.wikitext);
 
   cy.visit("/#/evaluate");

webapp/cypress/e2e/store/models.cy.ts

@@ -19,7 +19,7 @@ describe("tasks page", () => {
     setupServerWith(defaultTasks.titanic);
 
     cy.visit("/#/list").contains("button", "participate");
-
+    cy.get(".driver-popover-close-btn").click();
     cy.get(`div[id="titanic"]`).find("button").click();
     cy.url().should("eq", `${Cypress.config().baseUrl}#/titanic`);
 

webapp/cypress/e2e/tasks.cy.ts

@@ -41,7 +41,7 @@ it("can test lus_covid", () => {
     .contains("button", "test")
     .click();
 
-  cy.contains("button", "download as csv", { timeout: 10_000 });
+  cy.contains("button", "download as csv", { timeout: 20_000 });
 });
 
 it("can start and stop testing of wikitext", () => {

webapp/cypress/e2e/testing.cy.ts

@@ -2,14 +2,18 @@ import { defaultTasks } from "@epfml/discojs";
 
 import { setupServerWith } from "../support/e2e";
 
+function goToTaskOverview() {
+  cy.visit("/");
+  cy.contains("a", "Start training").click();
+  cy.get(".driver-popover-close-btn").click();
+  cy.contains("button", "participate").click();
+}
+
 describe("training page", () => {
   it("is navigable", () => {
     setupServerWith(defaultTasks.titanic);
 
-    cy.visit("/");
-
-    cy.contains("a", "Start training").click();
-    cy.contains("button", "participate").click();
+    goToTaskOverview();
 
     const navigationButtons = 3;
     for (let i = 0; i < navigationButtons; i++) {
@@ -23,10 +27,7 @@ describe("training page", () => {
   it("can train titanic", () => {
     setupServerWith(defaultTasks.titanic);
 
-    cy.visit("/");
-
-    cy.contains("a", "Start training").click();
-    cy.contains("button", "participate").click();
+    goToTaskOverview();
     cy.contains("button", "next").click();
 
     cy.contains("label", "select CSV").selectFile(
@@ -52,10 +53,7 @@ describe("training page", () => {
     // throwing to stop training
     cy.on("uncaught:exception", (e) => !e.message.includes("stop training"));
 
-    cy.visit("/");
-
-    cy.contains("a", "Start training").click();
-    cy.contains("button", "participate").click();
+    goToTaskOverview();
     cy.contains("button", "next").click();
 
     cy.task<string[]>("readdir", "../datasets/lus_covid/COVID+/").then(

webapp/cypress/e2e/training.cy.ts

@@ -17,6 +17,7 @@
     "apexcharts": "4",
     "cypress": "14",
     "d3": "7",
+    "driver.js": "1",
     "pinia": "<2.2.3",
     "pinia-plugin-persistedstate-2": "2",
     "vee-validate": "4",

webapp/package.json

@@ -0,0 +1,13 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="currentColor"
+    class="w-6 h-6"
+    viewBox="-60 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>