Introduce templateOptions.json file to Control Training Options for Each Template

src/components/TabTraining.vue

@@ -7,15 +7,14 @@
     using one of the tools provided below:
 
     <h2>Argument Parser</h2>
-
     <ul>
-      <li>
+      <li v-show="argparserOptions.options.includes('argparse')">
         <a href="https://docs.python.org/3/library/argparse.html" id="arg"
           >Argparse</a
         >
         - is a python built-in tool to handle command-line arguments
       </li>
-      <li>
+      <li v-show="argparserOptions.options.includes('fire')">
         <a
           href="https://github.com/google/python-fire/blob/master/docs/guide.md"
           id="arg"
@@ -24,76 +23,85 @@
         - transforms Python functions into user-friendly command-line tools,
         ideal for DL experimentation.
       </li>
-      <li>
+      <li v-show="argparserOptions.options.includes('hydra')">
         <a href="https://hydra.cc" id="arg">Hydra</a>
         - Simplifying deep learning experiments through flexible configuration
         management
       </li>
     </ul>
     <FormSelect
-      :label="argparser.description"
-      :options="argparser.options"
-      :saveKey="argparser.name"
-      :defaultV="argparser.default"
-    />
-    <h2 class="training">Deterministic Training</h2>
-    <FormCheckbox
-      :label="deterministic.description"
-      :saveKey="deterministic.name"
+      :label="argparserOptions.description"
+      :options="argparserOptions.options"
+      :saveKey="argparserOptions.name"
+      :defaultV="argparserOptions.default"
+      v-show="argparserOptions.options.length > 0"
     />
-    <h2 class="training">Distributed Training</h2>
-    <FormCheckbox label="Use distributed training" saveKey="use_dist" />
-    <div v-show="store.config.use_dist">
-      <FormSelect
-        required
-        :saveKey="backend.name"
-        :label="backend.description"
-        :options="backend.options"
-        :defaultV="backend.default"
-      />
-      <FormRadio
-        :options="[torchrun, spawn]"
-        saveKey="dist"
-        defaultV="torchrun"
-      />
-      <FormInput
-        :label="nproc_per_node.description"
-        :type="nproc_per_node.type"
-        :saveKey="nproc_per_node.name"
-        :defaultV="nproc_per_node.default"
-      />
-      <FormInput
-        :label="nnodes.description"
-        :type="nnodes.type"
-        :saveKey="nnodes.name"
-        :defaultV="nnodes.default"
-      />
-      <FormInput
-        :label="master_addr.description"
-        :type="master_addr.type"
-        :saveKey="master_addr.name"
-        :defaultV="master_addr.default"
-        v-show="store.config.nnodes > 1"
-      />
-      <FormInput
-        :label="master_port.description"
-        :type="master_port.type"
-        :saveKey="master_port.name"
-        :defaultV="master_port.default"
-        v-show="store.config.nnodes > 1"
+    <!-- Deterministic Options -->
+    <div v-show="templateOptions.deterministic">
+      <h2 class="training">Deterministic Training</h2>
+      <FormCheckbox
+        :label="deterministic.description"
+        :saveKey="deterministic.name"
       />
     </div>
+    <!-- Distributed Training -->
+    <div v-show="templateOptions.distTraining">
+      <h2 class="training">Distributed Training</h2>
+      <FormCheckbox label="Use distributed training" saveKey="use_dist" />
+      <div v-show="store.config.use_dist && templateOptions.distTraining">
+        <FormSelect
+          required
+          :saveKey="backendOptions.name"
+          :label="backendOptions.description"
+          :options="backendOptions.options"
+          :defaultV="backendOptions.default"
+        />
+        <FormRadio
+          :options="distOptions"
+          saveKey="dist"
+          :defaultV="distOptions.length > 0 ? distOptions[0].name : 'spawn'"
+          v-show="distOptions.length > 0"
+        />
+        <FormInput
+          :label="nproc_per_node.description"
+          :type="nproc_per_node.type"
+          :saveKey="nproc_per_node.name"
+          :defaultV="nproc_per_node.default"
+        />
+        <FormInput
+          :label="nnodes.description"
+          :type="nnodes.type"
+          :saveKey="nnodes.name"
+          :defaultV="nnodes.default"
+        />
+        <FormInput
+          :label="master_addr.description"
+          :type="master_addr.type"
+          :saveKey="master_addr.name"
+          :defaultV="master_addr.default"
+          v-show="store.config.nnodes > 1"
+        />
+        <FormInput
+          :label="master_port.description"
+          :type="master_port.type"
+          :saveKey="master_port.name"
+          :defaultV="master_port.default"
+          v-show="store.config.nnodes > 1"
+        />
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
-import { computed, ref } from 'vue'
+import { computed, ref, watch, reactive } from 'vue'
 import { training } from '../metadata/metadata.json'
 import FormCheckbox from './FormCheckbox.vue'
 import FormInput from './FormInput.vue'
 import FormRadio from './FormRadio.vue'
 import FormSelect from './FormSelect.vue'
-import { store } from '../store.js'
+import { saveConfig, store } from '../store.js'
+import { templates } from '../templates/template_options.json'
 
 export default {
   components: { FormCheckbox, FormInput, FormRadio, FormSelect },
@@ -112,30 +120,76 @@ export default {
     const isDeterministic = ref(false)
 
     // computed properties
+    const templateOptions = computed(() => {
+      return templates[store.config.template]['training']
+    })
+    const argparserOptions = computed(() => {
+      return findAvailableOptions(argparser, templateOptions)
+    })
+    const backendOptions = computed(() => {
+      // To check the state of distTraining
+      if (templateOptions.value.distTraining == false) {
+        saveConfig('backend', null)
+        return backend
+      }
+      return findAvailableOptions(backend, templateOptions)
+    })
+    const distOptions = computed(() => {
+      let dist_options = []
+      if (templateOptions.value.distOptions == 'all') {
+        return [torchrun, spawn]
+      }
+      for (const option of [torchrun, spawn]) {
+        if (templateOptions.value.distOptions.includes(option.name)) {
+          dist_options.push(option)
+        }
+      }
+      return dist_options
+    })
+
     const saveDeterministic = computed(() => {
       saveConfig(deterministic.name, isDeterministic.value)
     })
+
     return {
       store,
-      argparser,
+      argparserOptions,
       deterministic,
-      backend,
-      torchrun,
-      spawn,
+      backendOptions,
+      distOptions,
       nproc_per_node,
       nnodes,
       master_addr,
       master_port,
       isDeterministic,
       saveDeterministic,
-      saveDistributed
+      templateOptions
     }
   }
 }
 
 function saveDistributed(key, value) {
   saveConfig(key, value)
 }
+
+function findAvailableOptions(tempKey, templateOptions) {
+  const key = tempKey.name
+  if (
+    templateOptions.value[key] == 'all' ||
+    !templateOptions.value.hasOwnProperty(key)
+  ) {
+    return tempKey
+  } else {
+    store.config[key] = templateOptions.value[key][0]
+  }
+  return reactive({
+    options: templateOptions.value[key],
+    default: templateOptions.value[key][0],
+    description: tempKey.description,
+    name: key,
+    type: tempKey.type
+  })
+}
 </script>
 
 <style scoped>

src/templates/template-common/README.md

@@ -187,7 +187,7 @@ nproc_per_node: #:::= it.nproc_per_node :::#
 python main.py config.yaml --backend #:::= it.backend :::#  [--override_arg=value]
 
 #::: } else if ((it.argparser == 'hydra')) { :::#
-python main.py --config-dir=[dir-path] --config-name=[config-name] override_arg=[value]
+python main.py ++backend #:::= it.backend :::# --config-dir=[dir-path] --config-name=[config-name] override_arg=[value]
 
 #::: } else { :::#
 python main.py config.yaml --backend #:::= it.backend :::#

src/templates/template_options.json

@@ -0,0 +1,44 @@
+{
+  "templates": {
+    "template-vision-classification": {
+      "training": {
+        "name": "template-vision-classification",
+        "argparser": "all",
+        "deterministic": true,
+        "distTraining": true,
+        "distOptions": "all",
+        "backend": "all"
+      }
+    },
+    "template-vision-dcgan": {
+      "training": {
+        "name": "template-vision-dcgan",
+        "argparser": "all",
+        "deterministic": true,
+        "distTraining": true,
+        "distOptions": "all",
+        "backend": "all"
+      }
+    },
+    "template-vision-segmentation": {
+      "training": {
+        "name": "template-vision-segmentation",
+        "argparser": "all",
+        "deterministic": true,
+        "distTraining": true,
+        "distOptions": "all",
+        "backend": "all"
+      }
+    },
+    "template-text-classification": {
+      "training": {
+        "name": "template-text-classification",
+        "argparser": "all",
+        "deterministic": true,
+        "distTraining": true,
+        "distOptions": "all",
+        "backend": "all"
+      }
+    }
+  }
+}