From 7904e5d60208f909be17248fe6c6ed433669202b Mon Sep 17 00:00:00 2001
From: Aryan Gupta <guptaaryan16@gmail.com>
Date: Fri, 22 Sep 2023 18:20:26 +0530
Subject: [PATCH 1/3] feat: Introduce templateOptions.json file to control
 options for each template individually

---
 src/components/TabTraining.vue          | 124 ++++++++++++++++++------
 src/templates/template-common/README.md |   2 +-
 src/templates/template_options.json     |  44 +++++++++
 3 files changed, 137 insertions(+), 33 deletions(-)
 create mode 100644 src/templates/template_options.json

diff --git a/src/components/TabTraining.vue b/src/components/TabTraining.vue
index df367b53..d85498e6 100644
--- a/src/components/TabTraining.vue
+++ b/src/components/TabTraining.vue
@@ -7,15 +7,13 @@
     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
-        >
+          >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,37 +22,45 @@
         - transforms Python functions into user-friendly command-line tools,
         ideal for DL experimentation.
       </li>
-      <li>
-        <a href="https://hydra.cc" id="arg">Hydra</a>
+      <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"
     />
+    <!-- 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">
+    <div v-show="store.config.use_dist && templateOptions.distTraining">
       <FormSelect
         required
-        :saveKey="backend.name"
-        :label="backend.description"
-        :options="backend.options"
-        :defaultV="backend.default"
+        :saveKey="backendOptions.name"
+        :label="backendOptions.description"
+        :options="backendOptions.options"
+        :defaultV="backendOptions.default"
       />
       <FormRadio
-        :options="[torchrun, spawn]"
+        :options="distOptions"
         saveKey="dist"
-        defaultV="torchrun"
+        :defaultV="distOptions.length > 0? distOptions[0].name : 'spawn'"
+        v-show="distOptions.length > 0"
       />
       <FormInput
         :label="nproc_per_node.description"
@@ -84,16 +90,18 @@
       />
     </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 },
@@ -110,25 +118,60 @@ export default {
       master_port
     } = training
     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 [spawn, torchrun]
+      }
+      for (const option of [spawn, torchrun]){
+        if (templateOptions.value.distOptions.includes(option.name)){
+          dist_options.push(option)
+        }
+      }
+      console.log('Printing dist options')
+      console.log(dist_options)
+      return dist_options
+    })
+
+    watch(store.config, () => {
+      console.log(templateOptions.value)
+      console.log(store.config.template)
+      console.log(argparserOptions.value)
+    })
+
     const saveDeterministic = computed(() => {
-      saveConfig(deterministic.name, isDeterministic.value)
+      saveConfig(deterministic.name, isDeterministic)
     })
+
     return {
       store,
-      argparser,
+      argparserOptions,
       deterministic,
-      backend,
-      torchrun,
-      spawn,
+      backendOptions,
+      distOptions,
       nproc_per_node,
       nnodes,
       master_addr,
       master_port,
       isDeterministic,
       saveDeterministic,
-      saveDistributed
+      templateOptions
     }
   }
 }
@@ -136,6 +179,23 @@ export default {
 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>
diff --git a/src/templates/template-common/README.md b/src/templates/template-common/README.md
index a242c365..9570575a 100644
--- a/src/templates/template-common/README.md
+++ b/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 :::#
diff --git a/src/templates/template_options.json b/src/templates/template_options.json
new file mode 100644
index 00000000..afde38ec
--- /dev/null
+++ b/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"
+      }
+    }
+  }
+}

From e341801496ce56960cd547d87e9ae021622d00db Mon Sep 17 00:00:00 2001
From: Aryan Gupta <guptaaryan16@gmail.com>
Date: Wed, 27 Sep 2023 18:22:51 +0530
Subject: [PATCH 2/3] bug fix

---
 src/components/TabTraining.vue | 10 +---------
 1 file changed, 1 insertion(+), 9 deletions(-)

diff --git a/src/components/TabTraining.vue b/src/components/TabTraining.vue
index d462a08b..1bb3b134 100644
--- a/src/components/TabTraining.vue
+++ b/src/components/TabTraining.vue
@@ -144,19 +144,11 @@ export default {
           dist_options.push(option)
         }
       }
-      console.log('Printing dist options')
-      console.log(dist_options)
       return dist_options
     })
 
-    watch(store.config, () => {
-      console.log(templateOptions.value)
-      console.log(store.config.template)
-      console.log(argparserOptions.value)
-    })
-
     const saveDeterministic = computed(() => {
-      saveConfig(deterministic.name, isDeterministic)
+      saveConfig(deterministic.name, isDeterministic.value)
     })
 
     return {

From 20b7c6786ff6b5c8a5b4a689bde67480fbbaf2df Mon Sep 17 00:00:00 2001
From: Aryan Gupta <guptaaryan16@gmail.com>
Date: Fri, 29 Sep 2023 18:48:58 +0530
Subject: [PATCH 3/3] fix error for tests

---
 src/components/TabTraining.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/TabTraining.vue b/src/components/TabTraining.vue
index 1bb3b134..6c778530 100644
--- a/src/components/TabTraining.vue
+++ b/src/components/TabTraining.vue
@@ -137,9 +137,9 @@ export default {
     const distOptions = computed(() => {
       let dist_options = []
       if (templateOptions.value.distOptions == 'all') {
-        return [spawn, torchrun]
+        return [torchrun, spawn]
       }
-      for (const option of [spawn, torchrun]) {
+      for (const option of [torchrun, spawn]) {
         if (templateOptions.value.distOptions.includes(option.name)) {
           dist_options.push(option)
         }