From 6e3cf2a37fae3e27566d868609105a44e4ab9591 Mon Sep 17 00:00:00 2001
From: tharvik <tharvik@users.noreply.github.com>
Date: Thu, 14 Nov 2024 22:04:45 +0100
Subject: [PATCH] webapp/task-creation: revamp

---
 package-lock.json                             |  31 +-
 webapp/cypress/e2e/task-creation.cy.ts        | 119 +++
 webapp/cypress/support/e2e.ts                 |   2 +
 webapp/package.json                           |   2 +-
 .../task_creation_form/FormField.vue          |  23 +
 .../task_creation_form/FormLabel.vue          |  32 +
 .../task_creation_form/TaskForm.vue           | 813 ++++++++++++------
 .../containers/ArrayContainer.vue             | 145 ----
 .../containers/CheckboxContainer.vue          |  45 -
 .../containers/FileContainer.vue              | 166 ----
 .../containers/FloatContainer.vue             |  13 -
 .../containers/NumberContainer.vue            |  16 -
 .../containers/ObjectArrayContainer.vue       | 174 ----
 .../containers/SelectContainer.vue            |  38 -
 .../containers/TextContainer.vue              |  27 -
 .../task_creation_form/simple/CustomField.vue |  44 -
 .../src/components/training/Description.vue   |   4 +-
 webapp/src/task_creation_form.ts              | 379 --------
 18 files changed, 744 insertions(+), 1329 deletions(-)
 create mode 100644 webapp/cypress/e2e/task-creation.cy.ts
 create mode 100644 webapp/src/components/task_creation_form/FormField.vue
 create mode 100644 webapp/src/components/task_creation_form/FormLabel.vue
 delete mode 100644 webapp/src/components/task_creation_form/containers/ArrayContainer.vue
 delete mode 100644 webapp/src/components/task_creation_form/containers/CheckboxContainer.vue
 delete mode 100644 webapp/src/components/task_creation_form/containers/FileContainer.vue
 delete mode 100644 webapp/src/components/task_creation_form/containers/FloatContainer.vue
 delete mode 100644 webapp/src/components/task_creation_form/containers/NumberContainer.vue
 delete mode 100644 webapp/src/components/task_creation_form/containers/ObjectArrayContainer.vue
 delete mode 100644 webapp/src/components/task_creation_form/containers/SelectContainer.vue
 delete mode 100644 webapp/src/components/task_creation_form/containers/TextContainer.vue
 delete mode 100644 webapp/src/components/task_creation_form/simple/CustomField.vue
 delete mode 100644 webapp/src/task_creation_form.ts

diff --git a/package-lock.json b/package-lock.json
index ffb241a66..4f52ef01f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3063,6 +3063,29 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/@vee-validate/zod": {
+      "version": "4.14.7",
+      "resolved": "https://registry.npmjs.org/@vee-validate/zod/-/zod-4.14.7.tgz",
+      "integrity": "sha512-UD0Tfyz1cKKd7BinnUztqKL+oeMjg/T4ZEguN/uZV4DsR9z7gdrD0lOuOU7aVl9UpVK6NM7MhDka35Lj7b/DTw==",
+      "license": "MIT",
+      "dependencies": {
+        "type-fest": "^4.8.3",
+        "vee-validate": "4.14.7",
+        "zod": "^3.22.4"
+      }
+    },
+    "node_modules/@vee-validate/zod/node_modules/type-fest": {
+      "version": "4.30.0",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-4.30.0.tgz",
+      "integrity": "sha512-G6zXWS1dLj6eagy6sVhOMQiLtJdxQBHIA9Z6HFUNLOlr6MFOgzV8wvmidtPONfPtEUv0uZsy77XJNzTAfwPDaA==",
+      "license": "(MIT OR CC0-1.0)",
+      "engines": {
+        "node": ">=16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/@vitejs/plugin-vue": {
       "version": "5.1.4",
       "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-5.1.4.tgz",
@@ -12885,9 +12908,9 @@
       }
     },
     "node_modules/vee-validate": {
-      "version": "4.14.4",
-      "resolved": "https://registry.npmjs.org/vee-validate/-/vee-validate-4.14.4.tgz",
-      "integrity": "sha512-Eg1FK2IqxqmujjN8Oehvqfx+QynyrIVc6Su2h/HQI/m3VEyUXW4wlB0h0sLkNizsEWlTj7Kwxn5Q2UWCr7RTQg==",
+      "version": "4.14.7",
+      "resolved": "https://registry.npmjs.org/vee-validate/-/vee-validate-4.14.7.tgz",
+      "integrity": "sha512-XVb1gBFJR57equ11HEI8uxNqFJkwvCP/b+p+saDPQYaW7k45cdF5jsYPEJud1o29GD6h2y7Awm7Qfm89yKi74A==",
       "license": "MIT",
       "dependencies": {
         "@vue/devtools-api": "^7.5.2",
@@ -13742,13 +13765,13 @@
         "@epfml/discojs": "*",
         "@epfml/discojs-web": "*",
         "@msgpack/msgpack": "^3.0.0-beta2",
+        "@vee-validate/zod": "4",
         "apexcharts": "3",
         "cypress": "13",
         "d3": "7",
         "immutable": "4",
         "pinia": "<2.2.3",
         "pinia-plugin-persistedstate-2": "2",
-        "vee-validate": "4",
         "vue": "3",
         "vue-router": "4",
         "vue-tippy": "6",
diff --git a/webapp/cypress/e2e/task-creation.cy.ts b/webapp/cypress/e2e/task-creation.cy.ts
new file mode 100644
index 000000000..20fd63892
--- /dev/null
+++ b/webapp/cypress/e2e/task-creation.cy.ts
@@ -0,0 +1,119 @@
+import type { Task } from "@epfml/discojs";
+
+import * as tf from "@tensorflow/tfjs";
+
+it("submits with tabular task", () => {
+  cy.intercept(
+    { hostname: "server", pathname: "tasks", method: "POST" },
+    { statusCode: 200 },
+  ).as("posted");
+
+  cy.visit("/#/create");
+
+  cy.get("input[name='id']").type("id");
+  cy.get("select[name='dataType']").select("tabular");
+
+  cy.get("input[name='displayInformation.title']").type("simple");
+  cy.get("input[name='displayInformation.summary.preview']").type("preview");
+  cy.get("textarea[name='displayInformation.summary.overview']").type(
+    "overview",
+  );
+  cy.contains("Example tabular data").within(() => {
+    cy.contains("add example").click();
+    cy.get("input[name='displayInformation.dataExample[0].name']").type("name");
+    cy.get("input[name='displayInformation.dataExample[0].data']").type("data");
+  });
+
+  cy.get("select[name='trainingInformation.scheme']").select("federated");
+  cy.get("input[name='trainingInformation.epochs']").type("10");
+  cy.get("input[name='trainingInformation.batchSize']").type("5");
+  cy.get("input[name='trainingInformation.roundDuration']").type("2");
+  cy.get("input[name='trainingInformation.validationSplit']").type("0");
+  cy.get("input[name='trainingInformation.minNbOfParticipants']").type("2");
+  cy.contains("Input columns names").within(() => {
+    cy.contains("add column").click();
+    cy.get("input[name='trainingInformation.inputColumns[0]']").type("input");
+  });
+  cy.get("input[name='trainingInformation.outputColumn']").type("output");
+
+  const model = tf.sequential({
+    layers: [
+      tf.layers.conv2d({
+        inputShape: [32, 32, 3],
+        kernelSize: 3,
+        filters: 16,
+        activation: "relu",
+      }),
+    ],
+  });
+  model.compile({ loss: "hinge", optimizer: "sgd" });
+  cy.wrap(getArtifacts(model))
+    .then((artifacts) => JSON.stringify(artifacts))
+    .then((json) => new TextEncoder().encode(json))
+    .then((raw) =>
+      cy.get("input[type='file']").selectFile(new Uint8Array(raw), {
+        force: true, // input is hidden
+      }),
+    );
+  cy.get("input[name='model.loss']").type("hinge");
+  cy.get("input[name='model.optimizer']").type("sgd");
+
+  cy.get("button[type='submit']").click();
+
+  cy.wait("@posted")
+    .its("request.body")
+    .then((body) => JSON.parse(body))
+    .its("task")
+    .should("deep.equal", {
+      id: "id",
+      dataType: "tabular",
+      displayInformation: {
+        title: "simple",
+        summary: {
+          preview: "preview",
+          overview: "overview",
+        },
+        dataExample: [{ name: "name", data: "data" }],
+      },
+      trainingInformation: {
+        scheme: "federated",
+        epochs: 10,
+        batchSize: 5,
+        roundDuration: 2,
+        validationSplit: 0,
+        minNbOfParticipants: 2,
+        inputColumns: ["input"],
+        outputColumn: "output",
+        tensorBackend: "tfjs",
+      },
+    } satisfies Task<"tabular">);
+});
+
+async function getArtifacts(
+  model: tf.LayersModel,
+): Promise<tf.io.ModelArtifacts & { weightsManifest: never[] }> {
+  let resolveArtifacts: (_: tf.io.ModelArtifacts) => void;
+  const ret = new Promise<tf.io.ModelArtifacts>((resolve) => {
+    resolveArtifacts = resolve;
+  });
+
+  await model.save(
+    {
+      save: (artifacts) => {
+        resolveArtifacts(artifacts);
+        return Promise.resolve({
+          modelArtifactsInfo: {
+            dateSaved: new Date(),
+            modelTopologyType: "JSON",
+          },
+        });
+      },
+    },
+    { includeOptimizer: true },
+  );
+
+  return {
+    ...(await ret),
+    weightsManifest: [], // required by tf.loadLayersModel
+  };
+}
diff --git a/webapp/cypress/support/e2e.ts b/webapp/cypress/support/e2e.ts
index 309caa30a..41b05b8d9 100644
--- a/webapp/cypress/support/e2e.ts
+++ b/webapp/cypress/support/e2e.ts
@@ -84,3 +84,5 @@ beforeEach(() =>
     .getDirectory()
     .then((root) => root.removeEntry("models", { recursive: true })),
 );
+
+before(() => (localStorage.debug = "discojs*,webapp*"));
diff --git a/webapp/package.json b/webapp/package.json
index 342144ea7..a1030b20e 100644
--- a/webapp/package.json
+++ b/webapp/package.json
@@ -14,13 +14,13 @@
     "@epfml/discojs": "*",
     "@epfml/discojs-web": "*",
     "@msgpack/msgpack": "^3.0.0-beta2",
+    "@vee-validate/zod": "4",
     "apexcharts": "3",
     "cypress": "13",
     "d3": "7",
     "immutable": "4",
     "pinia": "<2.2.3",
     "pinia-plugin-persistedstate-2": "2",
-    "vee-validate": "4",
     "vue": "3",
     "vue-router": "4",
     "vue-tippy": "6",
diff --git a/webapp/src/components/task_creation_form/FormField.vue b/webapp/src/components/task_creation_form/FormField.vue
new file mode 100644
index 000000000..97da19aa8
--- /dev/null
+++ b/webapp/src/components/task_creation_form/FormField.vue
@@ -0,0 +1,23 @@
+<template>
+  <Field
+    :name
+    class="p-2 bg-gray-100 dark:bg-slate-700 border rounded-md dark:border-slate-400 text-gray-700 dark:text-gray-200 focus:outline-none focus:border-disco-cyan"
+    v-model="model"
+    v-bind="$attrs"
+  >
+    <!-- forward slots, https://stackoverflow.com/questions/50891858/vue-how-to-pass-down-slots-inside-wrapper-component -->
+    <template v-for="(_, slot) in $slots" v-slot:[slot]="scope">
+      <slot :name="slot" v-bind="scope" />
+    </template>
+  </Field>
+
+  <ErrorMessage class="text-red-600" :name />
+</template>
+
+<script lang="ts" setup>
+import { ErrorMessage, Field } from "vee-validate";
+
+defineProps<{ name: string }>();
+
+const model = defineModel<string>();
+</script>
diff --git a/webapp/src/components/task_creation_form/FormLabel.vue b/webapp/src/components/task_creation_form/FormLabel.vue
new file mode 100644
index 000000000..fb63a3f34
--- /dev/null
+++ b/webapp/src/components/task_creation_form/FormLabel.vue
@@ -0,0 +1,32 @@
+<template>
+  <label class="root">
+    <span class="text-slate-600 dark:text-slate-200">
+      {{ label }}
+    </span>
+
+    <slot />
+  </label>
+</template>
+
+<style lang="css" scoped>
+.root {
+  display: flex;
+  flex-direction: column;
+  flex: auto;
+}
+
+.root > * {
+  margin: 0.25rem 0.5rem;
+}
+.root > :first-child {
+  margin-left: 0;
+}
+
+.root > :first-child {
+  font-weight: bold;
+}
+</style>
+
+<script lang="ts" setup>
+defineProps<{ label: string }>();
+</script>
diff --git a/webapp/src/components/task_creation_form/TaskForm.vue b/webapp/src/components/task_creation_form/TaskForm.vue
index 8e184bd70..57f67aaa7 100644
--- a/webapp/src/components/task_creation_form/TaskForm.vue
+++ b/webapp/src/components/task_creation_form/TaskForm.vue
@@ -1,328 +1,589 @@
 <template>
-  <VeeForm
-    v-slot="{ handleSubmit }"
-    :validation-schema="schema"
+  <Form
+    @submit="onSubmit"
+    :validation-schema="toTypedSchema(schema)"
+    class="flex flex-col cards-gap"
   >
-    <form
-      class="grid grid-cols-1 gap-8 lg:grid-cols-1 xl:grid-cols-1"
-      @submit="handleSubmit($event, onSubmit)"
+    <div
+      class="grid grid-flow-row-dense grid-cols-1 md:grid-cols-2 xl:grid-cols-3 cards-gap"
     >
-      <div
-        v-for="section in sections"
-        :key="section.id"
-      >
-        <IconCard>
-          <template #title> {{ section.title }} </template>
-
-          <div class="space-y-10">
-            <div
-              v-for="field in section.fields"
-              :key="field.id"
+      <IconCard>
+        <template #title> General </template>
+
+        <FormLabel label="Unique identifier">
+          <FormField
+            name="id"
+            placeholder="my-task-identifier"
+            as="input"
+            size="20"
+          />
+        </FormLabel>
+
+        <FormLabel label="Category of data">
+          <FormField name="dataType" as="select" v-model="dataType">
+            <option value="image">Image</option>
+            <option value="tabular">Tabular</option>
+            <option value="text">Text</option>
+          </FormField>
+        </FormLabel>
+      </IconCard>
+
+      <IconCard>
+        <template #title> Model </template>
+
+        <div class="flex flex-col">
+          <FormLabel v-if="dataType === 'image'" label="Labels">
+            <FieldArray
+              name="trainingInformation.LABEL_LIST"
+              v-slot="{ fields, push, remove }"
             >
-              <div
-                v-if="isFieldVisible(
-                  field,
-                  {
-                    dataType,
-                    scheme
-                  }
-                )"
-              >
-              <div class="flex">
-                <label
-                  :for="field.id"
-                  class="
-                    inline
-                    text-slate-600
-                    dark:text-slate-200
-                    font-bold
-                    md:text-right
-                    mb-1
-                    md:mb-0
-                    pr-2
-                  "
+              <div class="flex flex-row flex-wrap elems-gap">
+                <div
+                  v-for="(entry, i) in fields"
+                  :key="entry.key"
+                  class="flex flex-row elems-gap"
                 >
-                  <span
-                    v-if="field.description !== undefined"
-                    v-html="field.description"
-                  />
-                  <span
-                    v-else
-                    v-html="field.name"
+                  <FormField
+                    :name="`trainingInformation.LABEL_LIST[${i}]`"
+                    placeholder="label"
+                    as="input"
                   />
-                </label>
-                <div v-if="field.type !== 'select' && field.type !== 'text'">
-                <span
-                  class="hover:cursor-pointer"
-                  v-tippy="{
-                    content: getContent(field),
-                  }"
+
+                  <CustomButton @click="remove(i)">
+                    <i class="fa-solid fa-xmark"></i>
+                  </CustomButton>
+                </div>
+
+                <CustomButton @click="push('')"> add label </CustomButton>
+              </div>
+            </FieldArray>
+          </FormLabel>
+
+          <div v-if="dataType === 'image'" class="flex flex-row">
+            <FormLabel label="Width to scale images to">
+              <FormField
+                name="trainingInformation.IMAGE_W"
+                placeholder="100"
+                as="input"
+                type="number"
+                min="1"
+              />
+            </FormLabel>
+
+            <FormLabel label="Height to scale images to">
+              <FormField
+                name="trainingInformation.IMAGE_H"
+                placeholder="100"
+                as="input"
+                type="number"
+                min="1"
+              />
+            </FormLabel>
+          </div>
+
+          <FormLabel v-if="dataType === 'tabular'" label="Input columns names">
+            <FieldArray
+              name="trainingInformation.inputColumns"
+              v-slot="{ fields, push, remove }"
+            >
+              <div class="flex flex-row flex-wrap elems-gap">
+                <div
+                  v-for="(entry, i) in fields"
+                  :key="entry.key"
+                  class="flex flex-row elems-gap"
                 >
-                  <i class="fa fa-question mr-1" />
-                </span>
+                  <FormField
+                    :name="`trainingInformation.inputColumns[${i}]`"
+                    placeholder="field_name"
+                    as="input"
+                  />
+
+                  <CustomButton @click="remove(i)">
+                    <i class="fa-solid fa-xmark"></i>
+                  </CustomButton>
                 </div>
-                <ErrorMessage
-                  class="text-red-600 pl-2"
-                  :name="field.id"
+
+                <CustomButton @click="push('')"> add column </CustomButton>
+              </div>
+            </FieldArray>
+          </FormLabel>
+
+          <FormLabel v-if="dataType === 'tabular'" label="Output column name">
+            <FormField
+              name="trainingInformation.outputColumn"
+              placeholder="predicated_value"
+              as="input"
+            />
+          </FormLabel>
+
+          <div v-if="dataType === 'text'" class="flex flex-row flex-wrap">
+            <FormLabel label="Name of a HuggingFace tokenizer">
+              <FormField
+                name="trainingInformation.tokenizer"
+                placeholder="Xenova/gpt2"
+                as="input"
+              />
+            </FormLabel>
+
+            <FormLabel label="Number of token used for context">
+              <FormField
+                name="trainingInformation.contextLength"
+                placeholder="128"
+                as="input"
+                type="number"
+                min="1"
+              />
+            </FormLabel>
+          </div>
+
+          <FormLabel label="TFJS model.json file">
+            <FormField
+              name="model.topology"
+              v-slot="{ handleChange, handleBlur }"
+            >
+              <FileSelection
+                type="json"
+                @update:modelValue="handleChange"
+                @blur="handleBlur"
+              />
+            </FormField>
+          </FormLabel>
+
+          <div class="flex flex-row flex-wrap">
+            <FormLabel label="TFJS model optimizer">
+              <FormField name="model.optimizer" placeholder="sgd" as="input" />
+            </FormLabel>
+
+            <FormLabel label="TFJS model loss">
+              <FormField name="model.loss" placeholder="hinge" as="input" />
+            </FormLabel>
+          </div>
+        </div>
+      </IconCard>
+
+      <IconCard>
+        <template #title> Training </template>
+
+        <div class="flex flex-row flex-wrap">
+          <FormLabel label="Number of pass over the data">
+            <FormField
+              name="trainingInformation.epochs"
+              placeholder="30"
+              as="input"
+              type="number"
+              min="1"
+            />
+          </FormLabel>
+
+          <FormLabel label="Number of dataset element to process at once">
+            <FormField
+              name="trainingInformation.batchSize"
+              placeholder="10"
+              as="input"
+              type="number"
+              min="1"
+            />
+          </FormLabel>
+
+          <FormLabel label="Fraction of dataset used for validation">
+            <FormField
+              name="trainingInformation.validationSplit"
+              placeholder="0.1"
+              as="input"
+              type="number"
+              min="0"
+              step="0.1"
+              max="1"
+            />
+          </FormLabel>
+        </div>
+      </IconCard>
+
+      <IconCard>
+        <template #title> Network </template>
+
+        <div class="flex flex-col">
+          <FormLabel label="Kind of network to run on">
+            <FormField name="trainingInformation.scheme" as="select">
+              <option value="federated">Federated</option>
+              <option value="decentralized">Decentralized</option>
+              <option value="local">Local</option>
+            </FormField>
+          </FormLabel>
+
+          <FormLabel label="Type of aggregation to perform">
+            <FormField
+              name="trainingInformation.aggregationStrategy"
+              as="select"
+            >
+              <option value="mean">Mean</option>
+              <option value="secure">Secure</option>
+            </FormField>
+          </FormLabel>
+
+          <FormLabel label="Number of epoch before exchanging with the network">
+            <FormField
+              name="trainingInformation.roundDuration"
+              placeholder="5"
+              as="input"
+              type="number"
+            />
+          </FormLabel>
+
+          <FormLabel label="Minimum number of peers per round">
+            <FormField
+              name="trainingInformation.minNbOfParticipants"
+              placeholder="3"
+              as="input"
+              type="number"
+            />
+          </FormLabel>
+
+          <FormLabel label="Differential privacy">
+            <div class="flex flex-col">
+              <FormLabel label="Maximum weights difference between each round">
+                <FormField
+                  name="trainingInformation.privacy.clippingRadius"
+                  placeholder="40"
+                  as="input"
+                  type="number"
                 />
-                </div>
-                <SelectContainer
-                  v-if="field.id === 'dataType'"
-                  v-model="dataType"
-                  :field="field"
+              </FormLabel>
+
+              <FormLabel label="Size of the noise added to the weights">
+                <FormField
+                  name="trainingInformation.privacy.noiseScale"
+                  placeholder="2"
+                  as="input"
+                  type="number"
                 />
-                <SelectContainer
-                  v-else-if="field.id === 'scheme'"
-                  v-model="scheme"
-                  :field="field"
+              </FormLabel>
+            </div>
+          </FormLabel>
+
+          <FormLabel label="Secure Aggregation">
+            <FormLabel label="Maximum value of a single weight">
+              <FormField
+                name="trainingInformation.maxShareValue"
+                placeholder="100"
+                as="input"
+                type="number"
+              />
+            </FormLabel>
+          </FormLabel>
+        </div>
+      </IconCard>
+
+      <IconCard>
+        <template #title> Description </template>
+
+        <div class="flex flex-col">
+          <FormLabel label="Title">
+            <FormField
+              name="displayInformation.title"
+              placeholder="Home Labelator"
+              as="input"
+            />
+          </FormLabel>
+
+          <FormLabel label="Short description">
+            <FormField
+              name="displayInformation.summary.preview"
+              placeholder="Detect and label everyday objects"
+              as="input"
+            />
+          </FormLabel>
+
+          <FormLabel label="Extended description">
+            <FormField
+              name="displayInformation.summary.overview"
+              placeholder="Standard classification model used in computer vision."
+              as="textarea"
+            />
+          </FormLabel>
+
+          <FormLabel label="Model information">
+            <FormField
+              name="displayInformation.model"
+              placeholder="Two-layers convolution network"
+              as="input"
+            />
+          </FormLabel>
+
+          <FormLabel label="Expected data format">
+            <FormField
+              name="displayInformation.dataFormatInformation"
+              placeholder="Images with a single object and a clear background"
+              as="input"
+            />
+          </FormLabel>
+
+          <FormLabel
+            v-if="dataType === 'image'"
+            label="URL to an example image"
+          >
+            <FormField
+              name="displayInformation.dataExample"
+              placeholder="https://example.com/image.jpeg"
+              as="input"
+              type="url"
+            />
+          </FormLabel>
+
+          <FieldArray
+            v-if="dataType === 'tabular'"
+            name="displayInformation.dataExample"
+            v-slot="{ fields, push, remove }"
+          >
+            <FormLabel label="Example tabular data">
+              <div
+                v-for="(entry, i) in fields"
+                :key="entry.key"
+                class="flex flex-row flex-wrap elems-gap"
+              >
+                <FormField
+                  :name="`displayInformation.dataExample[${i}].name`"
+                  label="Name of the column"
+                  placeholder="field_name"
+                  as="input"
                 />
-                <TextContainer
-                  v-else-if="field.id === 'modelURL'"
-                  v-model="modelURL"
-                  :field="field"
-                  :available="modelFiles.size === 0"
+                <FormField
+                  :name="`displayInformation.dataExample[${i}].data`"
+                  label="Example data"
+                  placeholder="1312"
+                  as="input"
                 />
-                <div v-else>
-                  <SelectContainer
-                    v-if="['select', 'select-multiple'].includes(field.type)"
-                    :field="field"
-                  />
-                  <FileContainer
-                    v-else-if="field.type === 'file'"
-                    :field="field"
-                    :available="!modelURL"
-                    @input="handleModelFiles($event)"
-                  />
-                  <ArrayContainer
-                    v-else-if="field.type === 'array'"
-                    :field="field"
-                  />
-                  <ObjectArrayContainer
-                    v-else-if="field.type === 'arrayObject'"
-                    :field="field"
-                  />
-                  <TextContainer
-                    v-else-if="field.type === 'text'"
-                    :field="field"
-                  />
-                  <CheckboxContainer
-                    v-else-if="field.type === 'checkbox'"
-                    :field="field"
-                  />
-                  <NumberContainer
-                    v-else-if="field.type === 'number'"
-                    :field="field"
-                  />
-                  <FloatContainer
-                    v-else-if="field.type === 'float'"
-                    :field="field"
-                  />
-                </div>
+
+                <CustomButton @click="remove(i)">
+                  <i class="fa-solid fa-xmark"></i>
+                </CustomButton>
               </div>
-            </div>
-          </div>
-        </IconCard>
-      </div>
-      <IconCard>
-        <template #title> How to join after ?</template>
-        <div>
-            After submitting the form, others will be able to join the task from the
-            <span @click="goToDiscollaborative()" class="underline text-blue-400 cursor-pointer"><DISCOllaboratives /> page</span>. You can find more explanations about
-            <DISCO /> in the <span @click="goToInformation()" class="underline text-blue-400 cursor-pointer">Information page</span>.
+
+              <div class="flex-none">
+                <CustomButton @click="push({})"> add example </CustomButton>
+              </div>
+            </FormLabel>
+          </FieldArray>
+
+          <FormLabel v-if="dataType === 'text'" label="Excerpt of some text">
+            <FormField
+              name="displayInformation.dataExample"
+              placeholder="First, there was nothing. Then, nothing happened as time didn't exist yet."
+              as="input"
+            />
+          </FormLabel>
         </div>
       </IconCard>
-      <div class="flex flex-wrap justify-center gap-8 my-2">
-        <CustomButton
-          type="submit"
-          class="basis-48"
-        >
-          submit
-        </CustomButton>
-        <CustomButton
-          type="reset"
-          class="basis-48"
-        >
-          reset
-        </CustomButton>
+    </div>
+
+    <IconCard>
+      <template #title> How to join after ?</template>
+
+      <div>
+        After submitting the form, others will be able to join the task from the
+        <RouterLink to="/list" class="underline text-blue-400 cursor-pointer">
+          <DISCOllaboratives /> page </RouterLink
+        >.
       </div>
-    </form>
-  </VeeForm>
+    </IconCard>
+
+    <div class="flex justify-center">
+      <CustomButton type="submit" class="basis-48"> submit </CustomButton>
+    </div>
+  </Form>
 </template>
 
+<style lang="css" scoped>
+.elems-gap {
+  gap: 0.75rem;
+}
+</style>
+
 <script lang="ts" setup>
 import createDebug from "debug";
-import * as yup from 'yup'
-import { ref, shallowRef } from 'vue'
-import { Form as VeeForm, ErrorMessage } from 'vee-validate'
+import { FieldArray, Form } from "vee-validate";
+import { toTypedSchema } from "@vee-validate/zod";
+import { ref } from "vue";
+import * as z from "zod";
 
-import { List, Map } from 'immutable'
-import * as tf from '@tensorflow/tfjs'
+import { isSet } from "immutable";
+import * as tf from "@tensorflow/tfjs";
 
 import type { DataType, Task } from "@epfml/discojs";
-import { models, pushTask } from '@epfml/discojs'
-
-import type { FormDependency, FormField, FormSection } from '@/task_creation_form'
-import { sections, privacyParameters } from '@/task_creation_form'
-import { useToaster } from '@/composables/toaster'
-import { CONFIG } from '@/config'
-import IconCard from '@/components/containers/IconCard.vue'
-import SelectContainer from './containers/SelectContainer.vue'
-import FileContainer from './containers/FileContainer.vue'
-import ArrayContainer from './containers/ArrayContainer.vue'
-import ObjectArrayContainer from './containers/ObjectArrayContainer.vue'
-import TextContainer from './containers/TextContainer.vue'
-import CheckboxContainer from './containers/CheckboxContainer.vue'
-import NumberContainer from './containers/NumberContainer.vue'
-import FloatContainer from './containers/FloatContainer.vue'
-import CustomButton from '@/components/simple/CustomButton.vue'
-import { useRouter } from "vue-router";
-import DISCO from "@/components/simple/DISCO.vue";
+import { isTask, models, pushTask } from "@epfml/discojs";
+
+import { useToaster } from "@/composables/toaster";
+import { CONFIG } from "@/config";
+import IconCard from "@/components/containers/IconCard.vue";
+import CustomButton from "@/components/simple/CustomButton.vue";
 import DISCOllaboratives from "@/components/simple/DISCOllaboratives.vue";
 
-const router = useRouter()
+import FormField from "./FormField.vue";
+import FormLabel from "./FormLabel.vue";
+import FileSelection from "../dataset_input/FileSelection.vue";
 
 const debug = createDebug("webapp:TaskForm");
-const toaster = useToaster()
-
-// Maps sections to a form-wide yup schema object composed of labelled yup fields.
-// A list of (K, V) pair tuples is converted to a K -> V map, which directly corresponds
-// to a { K: V } JavaScript object, as required by yup.
-const schemaData =
-  Map(
-    List(Object.values(sections))
-      .flatMap((section) => List(section.fields)
-        .map((field) =>
-          [field.id, field.yup.label(field.name)] as [string, yup.AnySchema]))
-      .values()
-  ).toObject()
-const schema = yup.object().shape(schemaData, [['modelURL', 'weightsFile'], ['modelURL', 'modelFile']])
-
-const dataType = ref('')
-const scheme = ref('')
-const modelURL = ref('')
-const modelFiles = shallowRef(List<File>())
-
-
-const formatSection = (section: FormSection, rawTask: any): any => {
-  let fields = List(section.fields)
-    .map((field) => {
-      const content = rawTask[field.id]
-      if (content === undefined) {
-        return undefined
-      }
-      if (['number', 'float'].includes(field.type)) {
-        return [field.id, Number(content)]
+const toaster = useToaster();
+
+const dataType = ref();
+
+const baseTaskSchema = z.object({
+  id: z.string(),
+  model: z.object({
+    loss: z.string(),
+    optimizer: z.string(),
+    topology: z.unknown().transform((files, ctx) => {
+      if (files === undefined) {
+        ctx.addIssue({
+          code: z.ZodIssueCode.custom,
+          message: "Missing JSON file",
+        });
+        return z.NEVER;
       }
-      if (field.type === 'checkbox') {
-        return [field.id, Boolean(content)]
+      if (!isSet(files)) throw new Error("FileSelection didn't return a Set");
+
+      const file = files.first();
+      if (file === undefined) {
+        ctx.addIssue({
+          code: z.ZodIssueCode.custom,
+          message: "No model selected",
+        });
+        return z.NEVER;
       }
-      return [field.id, content]
+
+      if (!(file instanceof File))
+        throw new Error("FileSelection didn't return Set<File>");
+      return file;
+    }),
+  }),
+});
+
+const baseDisplayInformationSchema = z.object({
+  title: z.string(),
+  summary: z.object({
+    preview: z.string(),
+    overview: z.string(),
+  }),
+  dataFormatInformation: z.string().optional(),
+  model: z.string().optional(),
+});
+
+const baseTrainingInformationSchema = z.object({
+  epochs: z.number().positive().int(),
+  roundDuration: z.number().positive().int(),
+  validationSplit: z.number().min(0).max(1),
+  batchSize: z.number().positive().int(),
+  scheme: z.enum(["decentralized", "federated", "local"]),
+
+  privacy: z
+    .object({
+      clippingRadius: z.number().optional(),
+      noiseScale: z.number().optional(),
     })
-    .filter((entry) => entry !== undefined)
-
-  // nest special sections into training information
-  if (section.id === 'trainingInformation') {
-    fields = fields
-      .push(
-        formatSection(
-          privacyParameters,
-          rawTask
-        )
-      )
-      // basically generalInformation, with the exception of taskID
-      .push([
-        'scheme',
-        rawTask.scheme
-      ])
-      .push([
-        'dataType',
-        rawTask.dataType
-      ])
-  }
+    .optional(),
+  maxShareValue: z.number().positive().int().optional(),
+  minNbOfParticipants: z.number().positive().int(),
+  aggregationStrategy: z.enum(["mean", "secure"]).optional(),
+  // TODO how to select GPT model?
+  tensorBackend: z.enum(["gpt", "tfjs"]).default("tfjs"),
+});
 
-  return [section.id, Map(fields).toObject()]
-}
+const schema: z.ZodType<
+  Task<DataType> & {
+    model: { topology: File; loss: string; optimizer: string };
+  },
+  z.ZodTypeDef,
+  Omit<Task<DataType>, "trainingInformation"> & {
+    trainingInformation: Omit<
+      Task<DataType>["trainingInformation"],
+      "tensorBackend"
+    > &
+      Partial<Pick<Task<DataType>["trainingInformation"], "tensorBackend">>;
+  } & { model: { topology?: unknown; loss: string; optimizer: string } }
+> = z.discriminatedUnion("dataType", [
+  baseTaskSchema.extend({
+    dataType: z.literal("image"),
+    displayInformation: baseDisplayInformationSchema.extend({
+      dataExample: z.string().optional(),
+    }),
+    trainingInformation: baseTrainingInformationSchema.extend({
+      LABEL_LIST: z.array(z.string()).min(1),
+      IMAGE_W: z.number().positive().int(),
+      IMAGE_H: z.number().positive().int(),
+    }),
+  }),
+  baseTaskSchema.extend({
+    dataType: z.literal("tabular"),
+    displayInformation: baseDisplayInformationSchema.extend({
+      dataExample: z
+        .array(z.object({ name: z.string(), data: z.string() }))
+        .optional(),
+    }),
+    trainingInformation: baseTrainingInformationSchema.extend({
+      inputColumns: z.array(z.string()),
+      outputColumn: z.string(),
+    }),
+  }),
+  baseTaskSchema.extend({
+    dataType: z.literal("text"),
+    displayInformation: baseDisplayInformationSchema.extend({
+      dataExample: z.string().optional(),
+    }),
+    trainingInformation: baseTrainingInformationSchema.extend({
+      tokenizer: z.string(),
+      contextLength: z.number().positive().int(),
+    }),
+  }),
+]);
 
-const handleModelFiles = async (files: FileList): Promise<void> => {
-  modelFiles.value = modelFiles.value.push(...files)
-}
+async function onSubmit(form: unknown): Promise<void> {
+  // TODO double check as @submit isn't generic vee-validate#4845
+  if (typeof form !== "object" || form === null)
+    throw new Error("zod validated form isn't one");
+  const { model: rawModel, ...task }: Partial<Record<string, unknown>> = form;
 
-const onSubmit = async (rawTask: any): Promise<void> => {
-  toaster.success('Form validation succeeded! Uploading...')
-
-  // format the flat form entries to a nested task object
-  const specialSections = [
-    'generalInformation', 'privacyParamters', 'modelFiles'
-  ]
-  const task = Map(
-    List(sections)
-      .filter((section) => !specialSections.includes(section.id))
-      .map((section) => formatSection(section, rawTask))
+  if (!isTask(task)) throw new Error("zod validated Task isn't one");
+
+  if (typeof rawModel !== "object" || rawModel === null)
+    throw new Error("zod validated model info isn't one");
+  const { topology, loss, optimizer }: Partial<Record<string, unknown>> =
+    rawModel;
+  if (
+    !(topology instanceof File) ||
+    typeof loss !== "string" ||
+    typeof optimizer !== "string"
   )
-    .set('id', rawTask.taskID)
-    .toObject() as unknown as Task<DataType>
+    throw new Error("zod validated model info aren't valid");
+
+  toaster.success("Form validation succeeded! Uploading...");
 
-  let model
+  let model;
   try {
     switch (task.dataType) {
       case "image":
-      case "tabular":
-        model = new models.TFJS(
-          task.dataType,
-          await tf.loadLayersModel(
-            tf.io.browserFiles(modelFiles.value.toArray()),
-          ),
-        );
+      case "tabular": {
+        const loaded = await tf.loadLayersModel(tf.io.browserFiles([topology]));
+        loaded.compile({ loss, optimizer });
+        model = new models.TFJS(task.dataType, loaded);
         break;
+      }
       case "text":
         toaster.error("Currently no support of TFJS text model");
         return;
     }
   } catch (e) {
-    debug("while loading model:%o", e);
-    toaster.error('Model loading failed');
-    return
+    debug("load TFJS model: %o", e);
+    toaster.error("Model loading failed");
+    return;
   }
 
   try {
-    await pushTask(CONFIG.serverUrl, task, model)
+    await pushTask(CONFIG.serverUrl, task, model);
   } catch (e) {
-    toaster.error('An error occured server-side')
+    toaster.error("An error occured server-side");
     debug("while pushing task to server: %o", e);
-    return
-  }
-  toaster.success('Task successfully submitted')
-}
-
-const isFieldVisible = (
-  field: FormField,
-  dependencies: Record<string, unknown>
-): boolean => {
-  const fieldDeps = field.dependencies
-  if (fieldDeps === undefined) {
-    return true
-  }
-  const potentialDependencies: Array<keyof FormDependency> = ['dataType', 'scheme']
-  return potentialDependencies.every((key) => fieldDeps[key] !== dependencies[key])
-}
-
-const getContent = (field: FormField): string => {
-  return "Expected type : " + field.type
-}
-
-function goToInformation () {
-  const scrollableDiv = document.getElementById('scrollable-div');
-  if (scrollableDiv !== null) {
-    scrollableDiv.scrollTo(0, 0) // doesn't work with behavior: 'smooth'
-  }
-  router.push({ path: '/information' })
-}
-
-function goToDiscollaborative () {
-  const scrollableDiv = document.getElementById('scrollable-div');
-  if (scrollableDiv !== null) {
-    scrollableDiv.scrollTo(0, 0) // doesn't work with behavior: 'smooth'
+    return;
   }
-  router.push({ path: '/list' })
+  toaster.success("Task successfully submitted");
 }
 </script>
diff --git a/webapp/src/components/task_creation_form/containers/ArrayContainer.vue b/webapp/src/components/task_creation_form/containers/ArrayContainer.vue
deleted file mode 100644
index 79bb2b795..000000000
--- a/webapp/src/components/task_creation_form/containers/ArrayContainer.vue
+++ /dev/null
@@ -1,145 +0,0 @@
-<template>
-  <FieldArray
-    :id="props.field.id"
-    v-slot="{ fields, push, remove }"
-    :name="props.field.id"
-  >
-    <br>
-    <fieldset
-      v-for="(entry, idx) in fields"
-      :key="(entry as any).key"
-    >
-      <div
-        class="
-          grid grid-flow-col
-          auto-cols-max
-          md:auto-cols-min
-          space-x-2
-        "
-      >
-        <div class="w-4/5 md:w-full">
-          <VeeField
-            :id="`${props.field.id}_${idx as any}`"
-            :name="`${props.field.id}[${idx as any}]`"
-            :placeholder="props.field.default"
-            class="
-              inline
-              bg-gray-100
-              dark:bg-slate-700
-              appearance-none
-              border-0 border-gray-200
-              rounded
-              py-2
-              px-4
-              text-gray-700
-              dark:text-gray-200
-              leading-tight
-              focus:outline-none
-              focus:bg-white
-              dark:focus:bg-slate-900
-            "
-          />
-          <ErrorMessage
-            class="text-red-600"
-            :name="`${props.field.id}[${idx as any}]`"
-          />
-        </div>
-        <div class="w-1/5 md:w-full">
-          <button
-            type="button"
-            class="
-              h-7
-              w-7
-              flex
-              justify-center
-              items-center
-              mt-1
-              transition-colors
-              duration-150
-              bg-transparent
-              rounded
-              focus:shadow-outline
-              hover:bg-red-100
-              dark:hover:bg-red-900
-            "
-            @click="remove(idx as unknown as number)"
-          >
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              x="0px"
-              y="0px"
-              width="40"
-              height="40"
-              viewBox="0 0 48 48"
-              style="fill: #000000"
-            >
-              <path
-                fill="#F44336"
-                d="M21.5 4.5H26.501V43.5H21.5z"
-                transform="rotate(45.001 24 24)"
-              />
-              <path
-                fill="#F44336"
-                d="M21.5 4.5H26.5V43.501H21.5z"
-                transform="rotate(135.008 24 24)"
-              />
-            </svg>
-          </button>
-        </div>
-      </div>
-    </fieldset>
-
-    <button
-      type="button"
-      class="
-        inline-flex
-        items-center
-        h-10
-        px-5
-        transition-colors
-        duration-150
-        bg-transparent
-        border-0
-        rounded
-        focus:shadow-outline
-        hover:bg-gray-100
-        dark:hover:bg-gray-800
-      "
-      @click="push('')"
-    >
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        x="0px"
-        y="0px"
-        width="24"
-        height="24"
-        viewBox="0 0 24 24"
-        style="fill: #6b7280"
-        class="w-4 h-4 mr-3 fill-current"
-      >
-        <path
-          fill-rule="evenodd"
-          d="M 11 2 L 11 11 L 2 11 L 2 13 L 11 13 L 11 22 L 13 22 L 13 13 L 22 13 L 22 11 L 13 11 L 13 2 Z"
-        />
-      </svg>
-      <span class="md:text-right mb-1 md:mb-0 pr-4">
-        Add Element
-      </span>
-    </button>
-  </FieldArray>
-</template>
-
-<script lang="ts" setup>
-import {
-  Field as VeeField,
-  FieldArray,
-  ErrorMessage
-} from 'vee-validate'
-
-import type { FormField } from '@/task_creation_form'
-
-interface Props {
-  field: FormField
-}
-const props = defineProps<Props>()
-</script>
diff --git a/webapp/src/components/task_creation_form/containers/CheckboxContainer.vue b/webapp/src/components/task_creation_form/containers/CheckboxContainer.vue
deleted file mode 100644
index 196c13044..000000000
--- a/webapp/src/components/task_creation_form/containers/CheckboxContainer.vue
+++ /dev/null
@@ -1,45 +0,0 @@
-<template>
-  <div class="flex justify-left">
-    <VeeField
-      :id="props.field.id"
-      v-model="validationValue"
-      :name="props.field.id"
-      type="text"
-      :value="value"
-      hidden
-    />
-    <CheckBox
-      :value="value"
-      @clicked="clicked"
-    />
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { ref } from 'vue'
-import { Field as VeeField } from 'vee-validate'
-
-import type { FormField } from '@/task_creation_form'
-import CheckBox from '@/components/simple/CheckBox.vue'
-
-interface Props {
-  field: FormField
-}
-const props = defineProps<Props>()
-
-interface Emits {
-  (e: 'clicked', v: boolean): void
-}
-const emit = defineEmits<Emits>()
-
-const value = typeof props.field.default === 'boolean' ? props.field.default : false
-
-const mutatedValue = ref(value)
-const validationValue = ref('')
-
-const clicked = () => {
-  mutatedValue.value = !mutatedValue.value
-  validationValue.value = mutatedValue.value ? 'true' : ''
-  emit('clicked', mutatedValue.value)
-}
-</script>
diff --git a/webapp/src/components/task_creation_form/containers/FileContainer.vue b/webapp/src/components/task_creation_form/containers/FileContainer.vue
deleted file mode 100644
index ae9e65965..000000000
--- a/webapp/src/components/task_creation_form/containers/FileContainer.vue
+++ /dev/null
@@ -1,166 +0,0 @@
-<template>
-  <div>
-    <div
-      class="h-72 my-3"
-      @dragover.prevent="onDragOver"
-      @drop.prevent="onDrop"
-    >
-      <div
-        class="
-          relative h-full
-          border-dashed border-2 border-disco-cyan
-          flex flex-col justify-center items-center
-        "
-        :class="available ? 'hover:cursor-pointer' : 'hover:cursor-not-allowed'"
-      >
-        <div class="absolute">
-          <div class="flex flex-col items-center">
-            <svg
-              class="w-8 h-8"
-              fill="currentColor"
-              xmlns="http://www.w3.org/2000/svg"
-              viewBox="0 0 20 20"
-            >
-              <path
-                d="M16.88 9.1A4 4 0 0 1 16 17H5a5 5 0 0 1-1-9.9V7a3 3 0 0 1 4.52-2.59A4.98 4.98 0 0 1 17 8c0 .38-.04.74-.12 1.1zM11 11h3l-4-4-4 4h3v3h2v-3z"
-              />
-            </svg>
-            <span
-              v-if="!fileName"
-              class="block text-gray-400 font-normal"
-            >
-              Drag and drop your file anywhere
-            </span>
-            <span
-              v-else
-              class="block text-gray-600 dark:text-slate-200 font-normal"
-            >
-              {{ fileName }}
-            </span>
-            <span v-if="!fileName" class="block text-gray-400 font-normal">or</span>
-            <label
-              :for="`hidden_${field.id}`"
-              class="
-                block
-                font-normal
-                mt-2 p-2
-                rounded-sm
-                text-slate-700
-                transition-colors
-                duration-200
-                bg-slate-100
-                focus:outline-none
-              "
-              :class="available ? 'hover:cursor-pointer hover:text-disco-cyan' : 'hover:cursor-not-allowed'"
-            >
-              {{ fileName ? 'Change file' : 'Select file' }}
-            </label>
-            <VeeField
-              :id="field.id"
-              v-model="fileName"
-              :name="field.id"
-              hidden
-            />
-            <input
-              ref="upload"
-              :id="`hidden_${field.id}`"
-              :accept="field.extension"
-              :disable="!available"
-              type="file"
-              class="h-full w-full"
-              multiple
-              :disabled="!available"
-              hidden
-              @change="onChange"
-            >
-            <!-- Clear Button -->
-            <div
-              v-if="fileName"
-              @click="clearInput"
-              class="mt-2 p-2 rounded-sm text-slate-700 bg-slate-100 hover:bg-slate-200 transition-colors duration-200"
-            >
-              Clear
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      class="flex justify-between items-center text-gray-400"
-    >
-      <span>Accepted file type: {{ field.extension }} only</span>
-      <span class="flex items-center" title="Your files will stay in the browser, on your computer"><i class="fa fa-lock mr-1" /> secure</span>    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { ref } from 'vue'
-import { useToast } from 'vue-toast-notification';
-import { Field as VeeField } from 'vee-validate'
-
-import type { FormField } from '@/task_creation_form'
-
-const { field, available = true } = defineProps({
-  field: {
-    type: Object as () => FormField,
-    required: true
-  },
-  available: {
-    type: Boolean,
-    default: true
-  }
-})
-
-interface Emits {
-  (e: 'input', files: FileList): void
-}
-const emit = defineEmits<Emits>()
-
-const fileName = ref('')
-const upload = ref<HTMLInputElement>()
-  const toast = useToast()
-
-function onChange(): void {
-  showUploadingToast()
-  if (upload.value === undefined) return
-  const files = upload.value.files
-  if (files === null) return
-
-  // fill in the vee-field to trigger yup validation
-  fileName.value = (files.length > 0) ? files[0].name : ''
-  emit('input', files)
-  toast.success("Upload complete")
-}
-
-function onDragOver(event: DragEvent): void {
-  event.preventDefault();
-  // Optional: Add visual feedback
-}
-
-function onDrop(event: DragEvent): void {
-  if (!available) return;
-  showUploadingToast()
-
-  const files = event.dataTransfer?.files;
-  if (files && files.length > 0) {
-    // Process the files
-    fileName.value = files[0].name;
-    toast.success("Upload complete")
-    emit('input', files);
-  } else {
-    toast.error("Upload failed, please try again")
-  }
-}
-
-function showUploadingToast() {
-  toast.info("Uploading your data in the browser (your data stays on your computer)")
-}
-
-function clearInput(): void {
-  fileName.value = ''
-  if (upload.value) {
-    upload.value.value = '' // Clear the file input for browsers that support it
-  }
-  toast.info("Selection cleared")
-}
-</script>
diff --git a/webapp/src/components/task_creation_form/containers/FloatContainer.vue b/webapp/src/components/task_creation_form/containers/FloatContainer.vue
deleted file mode 100644
index ce214ca61..000000000
--- a/webapp/src/components/task_creation_form/containers/FloatContainer.vue
+++ /dev/null
@@ -1,13 +0,0 @@
-<template>
-  <CustomField :field="props.field" />
-</template>
-
-<script lang="ts" setup>
-import type { FormField } from '@/task_creation_form'
-import CustomField from '@/components/task_creation_form/simple/CustomField.vue'
-
-interface Props {
-    field: FormField
-}
-const props = defineProps<Props>()
-</script>
diff --git a/webapp/src/components/task_creation_form/containers/NumberContainer.vue b/webapp/src/components/task_creation_form/containers/NumberContainer.vue
deleted file mode 100644
index 3d21d87dd..000000000
--- a/webapp/src/components/task_creation_form/containers/NumberContainer.vue
+++ /dev/null
@@ -1,16 +0,0 @@
-<template>
-  <CustomField
-    :field="props.field"
-    step="any"
-  />
-</template>
-
-<script lang="ts" setup>
-import type { FormField } from '@/task_creation_form'
-import CustomField from '@/components/task_creation_form/simple/CustomField.vue'
-
-interface Props {
-  field: FormField
-}
-const props = defineProps<Props>()
-</script>
diff --git a/webapp/src/components/task_creation_form/containers/ObjectArrayContainer.vue b/webapp/src/components/task_creation_form/containers/ObjectArrayContainer.vue
deleted file mode 100644
index 0e0febb90..000000000
--- a/webapp/src/components/task_creation_form/containers/ObjectArrayContainer.vue
+++ /dev/null
@@ -1,174 +0,0 @@
-<template>
-  <FieldArray
-    :id="props.field.id"
-    v-slot="{ fields, push, remove }"
-    :name="props.field.id"
-  >
-    <br>
-    <div class="space-y-2">
-      <fieldset
-        v-for="(entry, idx) in fields"
-        :key="(entry as any).key"
-      >
-        <div
-          class="
-            grid grid-flow-col
-            auto-cols-max
-            md:auto-cols-min
-            space-x-2
-          "
-        >
-          <div
-            v-for="element in field.elements"
-            :key="element.key"
-          >
-            <div class="w-2/5 md:w-full">
-              <label
-                :for="`${element.key}_${idx as any}`"
-                class="inline md:text-right mb-1 md:mb-0 pr-4"
-              >{{ element.key }}</label>
-              <VeeField
-                :id="`${element.key}_${idx as any}`"
-                :name="`${props.field.id}[${idx as any}].${element.key}`"
-                :placeholder="element.default"
-                class="
-                  inline
-                  bg-gray-100
-                  dark:bg-slate-700
-                  appearance-none
-                  border-0 border-gray-200
-                  rounded
-                  py-2
-                  px-4
-                  text-gray-700
-                  dark:text-gray-200
-                  leading-tight
-                  focus:outline-none
-                  focus:bg-white
-                  dark:focus:bg-slate-900
-                  focus:border-gray-500
-                  dark:focus:border-slate-500
-                "
-              />
-              <ErrorMessage
-                :name="`${props.field.id}[${idx as any}].${element.key}`"
-                class="text-red-600"
-              />
-            </div>
-          </div>
-
-          <div class="w-1/5 md:w-full">
-            <label
-              class="
-                inline
-                md:text-right
-                mb-1
-                md:mb-0
-                pr-4
-                text-black
-              "
-            >.</label>
-            <button
-              type="button"
-              class="
-                h-7
-                w-7
-                flex
-                justify-center
-                items-center
-                mt-1
-                transition-colors
-                duration-150
-                bg-transparent
-                rounded
-                focus:shadow-outline
-                hover:bg-red-100
-                dark:hover:bg-red-900
-              "
-              @click="remove(idx as unknown as any)"
-            >
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                x="0px"
-                y="0px"
-                width="40"
-                height="40"
-                viewBox="0 0 48 48"
-                style="fill: #000000"
-              >
-                <path
-                  fill="#F44336"
-                  d="M21.5 4.5H26.501V43.5H21.5z"
-                  transform="rotate(45.001 24 24)"
-                />
-                <path
-                  fill="#F44336"
-                  d="M21.5 4.5H26.5V43.501H21.5z"
-                  transform="rotate(135.008 24 24)"
-                />
-              </svg>
-            </button>
-          </div>
-        </div>
-      </fieldset>
-
-      <button
-        type="button"
-        class="
-          inline-flex
-          items-center
-          h-10
-          px-5
-          transition-colors
-          duration-150
-          bg-transparent
-          border-0
-          rounded
-          focus:shadow-outline
-          hover:bg-gray-100
-          dark:hover:bg-gray-800
-        "
-        @click="
-          push(
-            (field.elements ?? []).reduce(
-              (acc, element) => ((acc[element.key] = ''), acc),
-              {} as Record<string, string>
-            )
-          )
-        "
-      >
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          x="0px"
-          y="0px"
-          width="24"
-          height="24"
-          viewBox="0 0 24 24"
-          style="fill: #6b7280"
-          class="w-4 h-4 mr-3 fill-current"
-        >
-          <path
-            fill-rule="evenodd"
-            d="M 11 2 L 11 11 L 2 11 L 2 13 L 11 13 L 11 22 L 13 22 L 13 13 L 22 13 L 22 11 L 13 11 L 13 2 Z"
-          />
-        </svg>
-        <span class="md:text-right mb-1 md:mb-0 pr-4">
-          Add Element
-        </span>
-      </button>
-    </div>
-  </FieldArray>
-</template>
-
-<script lang="ts" setup>
-import {
-  Field as VeeField,
-  FieldArray,
-  ErrorMessage
-} from 'vee-validate'
-
-import type { FormField } from '@/task_creation_form'
-
-interface Props { field: FormField }
-const props = defineProps<Props>()
-</script>
diff --git a/webapp/src/components/task_creation_form/containers/SelectContainer.vue b/webapp/src/components/task_creation_form/containers/SelectContainer.vue
deleted file mode 100644
index 44784dad5..000000000
--- a/webapp/src/components/task_creation_form/containers/SelectContainer.vue
+++ /dev/null
@@ -1,38 +0,0 @@
-<template>
-  <VeeField
-    :id="props.field.id"
-    v-slot="{ value }"
-    as="select"
-    :name="props.field.id"
-    :select="props.field.type === 'select-multiple'"
-    :multiple="props.field.type === 'select-multiple'"
-    class="
-      bg-gray-100 rounded-md border p-2 mt-1
-      dark:bg-slate-700 dark:border-slate-400
-      block w-full
-      text-gray-700
-      dark:text-gray-200
-      focus:outline-none focus:border-disco-cyan
-    "
-  >
-    <option
-      v-for="option in props.field.options"
-      :key="option"
-      :value="option.split(' ')[0].toLowerCase()"
-      :selected="value !== undefined && (value as unknown[]).includes(option)"
-    >
-      {{ option }}
-    </option>
-  </VeeField>
-</template>
-
-<script lang="ts" setup>
-import { Field as VeeField } from 'vee-validate'
-
-import type { FormField } from '@/task_creation_form'
-
-interface Props {
-  field: FormField
-}
-const props = defineProps<Props>()
-</script>
diff --git a/webapp/src/components/task_creation_form/containers/TextContainer.vue b/webapp/src/components/task_creation_form/containers/TextContainer.vue
deleted file mode 100644
index f41874011..000000000
--- a/webapp/src/components/task_creation_form/containers/TextContainer.vue
+++ /dev/null
@@ -1,27 +0,0 @@
-<template>
-  <CustomField
-    :field="field"
-    :available="available"
-    :rows="rows"
-  />
-</template>
-
-<script lang="ts" setup>
-import { computed } from 'vue'
-
-import type { FormField } from '@/task_creation_form'
-import CustomField from '@/components/task_creation_form/simple/CustomField.vue'
-
-const props = defineProps({
-  field: {
-    type: Object as () => FormField,
-    required: true
-  },
-  available: {
-    type: Boolean,
-    default: true
-  }
-})
-
-const rows = computed(() => props.field.as === 'textarea' ? 6 : undefined)
-</script>
diff --git a/webapp/src/components/task_creation_form/simple/CustomField.vue b/webapp/src/components/task_creation_form/simple/CustomField.vue
deleted file mode 100644
index a2fd46199..000000000
--- a/webapp/src/components/task_creation_form/simple/CustomField.vue
+++ /dev/null
@@ -1,44 +0,0 @@
-<template>
-  <VeeField
-    :id="props.field.id"
-    :name="props.field.id"
-    class="
-    bg-gray-100 rounded-md border px-3 py-2 mt-1
-    dark:bg-slate-700 dark:border-slate-400
-      block w-full
-    text-gray-700
-    dark:text-gray-200
-      focus:outline-none focus:border-disco-cyan
-    "
-    :class="{ 'hover:cursor-not-allowed': !available }"
-    :as="props.field.as"
-    :type="props.field.type"
-    :placeholder="props.field.default"
-    v-bind="{ ...props, field: undefined }"
-  />
-</template>
-
-<script lang="ts" setup>
-import { Field as VeeField } from 'vee-validate'
-
-import type { FormField } from '@/task_creation_form'
-
-const props = defineProps({
-  field: {
-    type: Object as () => FormField,
-    required: true
-  },
-  rows: {
-    type: Number,
-    default: undefined
-  },
-  step: {
-    type: String,
-    default: undefined
-  },
-  available: {
-    type: Boolean,
-    default: true
-  }
-})
-</script>
diff --git a/webapp/src/components/training/Description.vue b/webapp/src/components/training/Description.vue
index 35ee5f40e..1ab1920ea 100644
--- a/webapp/src/components/training/Description.vue
+++ b/webapp/src/components/training/Description.vue
@@ -1,7 +1,9 @@
 <template>
   <div class="space-y-4 md:space-y-8">
     <IconCard>
-      <template #title> {{ props.task.displayInformation.title }} </template>
+      <template #title>
+        {{ props.task.displayInformation.title }}
+      </template>
 
       <div v-html="props.task.displayInformation.summary.preview" />
       <div v-html="props.task.displayInformation.summary.overview" />
diff --git a/webapp/src/task_creation_form.ts b/webapp/src/task_creation_form.ts
deleted file mode 100644
index f33420364..000000000
--- a/webapp/src/task_creation_form.ts
+++ /dev/null
@@ -1,379 +0,0 @@
-import * as yup from 'yup'
-
-interface FormElement {
-  key: string
-  default: string
-}
-
-export interface FormDependency {
-  dataType?: string
-  scheme?: string
-}
-
-export interface FormField {
-  id: string
-  name: string
-  yup: yup.AnySchema
-  as?: 'input' | 'textarea'
-  type: 'text' | 'select' | 'select-multiple' | 'checkbox' | 'number' | 'float' | 'array' | 'arrayObject' | 'file'
-  options?: string[]
-  default?: string | boolean | string[] | boolean[]
-  elements?: FormElement[]
-  dependencies?: FormDependency
-  extension?: '.bin' | '.json'
-  description?: string
-}
-
-export interface FormSection {
-  id: string
-  title: string
-  fields: FormField[]
-}
-
-const otherReq = (req: any) => {
-  return {
-    is: req,
-    then: (schema: yup.AnySchema) => schema.required()
-  }
-}
-
-const generalInformation: FormSection = {
-  id: 'generalInformation',
-  title: 'General Information',
-  fields: [
-    {
-      id: 'taskID',
-      name: 'Task IDentifier',
-      yup: yup.string().required(),
-      as: 'input',
-      type: 'text',
-      default: 'cifar10'
-    },
-    {
-      id: 'dataType',
-      name: 'Data Type',
-      yup: yup.string().required(),
-      as: 'input',
-      type: 'select',
-      options: ['Image (.png, .jpg)', 'Tabular (.csv)', 'Text (.txt)'],
-      default: 'Image (.png, .jpg)'
-    },
-    {
-      id: 'scheme',
-      name: 'Training Scheme',
-      yup: yup.string().required(),
-      as: 'input',
-      type: 'select',
-      options: ['Decentralized', 'Federated'],
-      default: 'Decentralized'
-    }
-  ]
-}
-
-const displayInformation: FormSection = {
-  id: 'displayInformation',
-  title: 'Task & Model Description',
-  fields: [
-    {
-      id: 'taskTitle',
-      name: 'Task Title',
-      yup: yup.string().required(),
-      as: 'input',
-      type: 'text',
-      default: 'MNIST'
-    },
-    {
-      id: 'preview',
-      name: 'Task Preview',
-      yup: yup.string(),
-      as: 'textarea',
-      type: 'text',
-      default:
-        "Test our platform by using a publicly available <b>image</b> dataset. <br><br> Download the classic MNIST imagebank of hand-written numbers <a class='underline text-blue-400' target='_blank' href='https://www.kaggle.com/scolianni/mnistasjpg'>here</a>. <br> This model learns to identify hand written numbers."
-    },
-    {
-      id: 'overview',
-      name: 'Task Overview',
-      yup: yup.string(),
-      as: 'textarea',
-      type: 'text',
-      default:
-        'The MNIST handwritten digit classification problem is a standard dataset used in computer vision and deep learning. Although the dataset is effectively solved, we use it to test our Decentralised Learning algorithms and platform.'
-    },
-    {
-      id: 'model',
-      name: 'Model Description',
-      yup: yup.string(),
-      as: 'textarea',
-      type: 'text',
-      default:
-        'The current model is a very simple CNN and its main goal is to test the app and the Decentralizsed Learning functionality.'
-    },
-    {
-      id: 'dataFormatInformation',
-      name: 'Data Format Information',
-      yup: yup.string(),
-      as: 'textarea',
-      type: 'text',
-      default:
-        'This model is trained on images corresponding to digits 0 to 9. You can upload each digit image of your dataset in the box corresponding to its label. The model taskes images of size 28x28 as input.'
-    },
-    {
-      id: 'dataExampleText',
-      name: 'Data Example Description',
-      description: 'Data Example: Description',
-      yup: yup.string(),
-      as: 'input',
-      type: 'text',
-      default:
-        'Below you can find an example of an expected image representing the digit 9.'
-    },
-    {
-      id: 'dataExample',
-      name: 'Data Example',
-      description: 'Data Example: CSV header and row',
-      yup: yup
-        .array()
-        .of(
-          yup
-            .object()
-            .shape({
-              columnName: yup.string().required().label('Column Name'),
-              columnData: yup.string().required().label('Column Data')
-            })
-            .required()
-        )
-        .strict(),
-      as: 'input',
-      type: 'arrayObject',
-      elements: [
-        {
-          key: 'columnName',
-          default: 'PassengerID'
-        },
-        {
-          key: 'columnData',
-          default: '1'
-        }
-      ],
-      dependencies: {
-        dataType: 'tabular'
-      }
-    },
-    {
-      id: 'dataExampleImage',
-      name: 'Data Example',
-      description: 'Data Example: Image (.jpg, .png)',
-      yup: yup.string(),
-      as: 'input',
-      type: 'text',
-      default: 'https://example.com/your/example/image.jpg',
-      dependencies: {
-        dataType: 'image'
-      }
-    }
-  ]
-}
-
-export const trainingInformation: FormSection = {
-  id: 'trainingInformation',
-  title: 'Training Parameters',
-  fields: [
-    {
-      id: 'epochs',
-      name: 'Epochs',
-      yup: yup.number().integer().positive().required(),
-      as: 'input',
-      type: 'number',
-      default: '10'
-    },
-    {
-      id: 'validationSplit',
-      name: 'Validation Split',
-      yup: yup.number().positive().lessThan(1).required(),
-      as: 'input',
-      type: 'float',
-      default: '0.2'
-    },
-    {
-      id: 'batchSize',
-      name: 'Batch Size',
-      yup: yup.number().integer().positive().required(),
-      as: 'input',
-      type: 'number',
-      default: '30'
-    },
-    {
-      id: 'minNbOfParticipants',
-      name: 'Minimum # of Peers',
-      description: 'Minimum # of Ready Peers before Aggregation',
-      yup: yup
-        .number()
-        .integer()
-        .positive(),
-      as: 'input',
-      type: 'number',
-      default: '3'
-    },
-    {
-      id: 'modelTrainData',
-      name: 'Model Train Data',
-      yup: yup
-        .array()
-        .of(
-          yup
-            .object()
-            .shape({
-              trainingParameter: yup
-                .string()
-                .required()
-                .label('Training Parameter'),
-              value: yup.string().required().label('Value')
-            })
-            .required()
-        )
-        .strict(),
-      as: 'input',
-      type: 'arrayObject',
-      elements: [
-        {
-          key: 'Training Parameter',
-          default: 'epochs'
-        },
-        {
-          key: 'value',
-          default: '10'
-        }
-      ]
-    },
-    {
-      id: 'outputColumn',
-      name: 'Output Column',
-      yup: yup.string().when('dataType', otherReq('tabular')),
-      as: 'input',
-      type: 'text',
-      default: 'Survived',
-      dependencies: {
-        dataType: 'tabular'
-      }
-    },
-    {
-      id: 'inputColumns',
-      name: 'Input Column',
-      yup: yup.array().of(yup.string()).min(1),
-      as: 'input',
-      type: 'array',
-      default: 'PassengerID',
-      dependencies: {
-        dataType: 'tabular'
-      }
-    },
-    {
-      id: 'IMAGE_H',
-      name: 'Height of Image (pixels)',
-      yup: yup.number().integer().positive().when('dataType', otherReq('image')),
-      as: 'input',
-      type: 'number',
-      default: '28',
-      dependencies: {
-        dataType: 'image'
-      }
-    },
-    {
-      id: 'IMAGE_W',
-      name: 'Width of Image (pixels)',
-      yup: yup.number().integer().positive().when('dataType', otherReq('image')),
-      as: 'input',
-      type: 'number',
-      default: '28',
-      dependencies: {
-        dataType: 'image'
-      }
-    },
-    {
-      id: 'LABEL_LIST',
-      name: 'List of labels',
-      yup: yup.array().of(yup.string()).min(1),
-      as: 'input',
-      type: 'array',
-      default: '0'
-    }
-  ]
-}
-
-export const privacyParameters: FormSection = {
-  id: 'privacyParameters',
-  title: 'Privacy Parameters',
-  fields: [
-    {
-      id: 'noiseScale',
-      name: 'Noise Scale',
-      description: 'Differential Privacy: Noise Scale',
-      yup: yup.number().positive(),
-      as: 'input',
-      type: 'number',
-      default: '0.1'
-    },
-    {
-      id: 'clippingRadius',
-      name: 'Clipping Radius',
-      description: 'Differential Privacy: Clipping Radius',
-      yup: yup.number().positive(),
-      as: 'input',
-      type: 'number',
-      default: '40.0'
-    },
-    {
-      id: 'maxShareValue',
-      name: 'Maximum Share Value',
-      description: 'Maximum Value of Shares used in Secure Aggregation',
-      yup: yup.number().integer().positive(),
-      as: 'input',
-      type: 'number',
-      default: '100',
-    }
-  ]
-}
-
-const modelFiles: FormSection = {
-  id: 'modelFiles',
-  title: 'Model Files',
-  fields: [
-    {
-      id: 'modelURL',
-      name: 'Model URL',
-      description: 'URL endpoint serving the initial model files. See <a class="text-disco-cyan hover:text-disco-blue" target="_blank" href="https://www.tensorflow.org/js/guide/save_load#https">Tensorflow.js docs</a> for more information.',
-      type: 'text',
-      yup: yup
-        .string()
-        .when(['modelFile', 'weightsFile'], otherReq((v: string) => !v)),
-      default: 'https://example.com/model.json'
-    },
-    {
-      id: 'modelFile',
-      name: 'Model File',
-      description: 'Alternatively: Tensorflow.js Model in JSON format',
-      type: 'file',
-      yup: yup.string().when('modelURL', otherReq((v: string) => !v)),
-      extension: '.json',
-      default: 'model.json'
-    },
-    {
-      id: 'weightsFile',
-      name: 'Weights File',
-      description: 'Alternatively: Initial Tensorflow.js Model Weights in .bin format',
-      type: 'file',
-      yup: yup.string().when('modelURL', otherReq((v: string) => !v)),
-      extension: '.bin',
-      default: 'weights.bin'
-    }
-  ]
-}
-
-export const sections: FormSection[] = [
-  generalInformation,
-  displayInformation,
-  trainingInformation,
-  privacyParameters,
-  modelFiles
-]