fix: change back to have previous UI (#126)

- have default value in `output_dir` and `log_every_iters`
- distributed training checkbox
- distributed default values (`nproc_per_node`, `nnodes`, `master_addr`, and `master_port`)
- updated READMEs
- updated config.yaml

Author: ydcjeff

src/components/FormCheckbox.vue

@@ -7,7 +7,7 @@
           :id="checkboxId"
           :required="required"
           v-model="checked"
-          @change="saveChecked"
+          @change.prevent="saveChecked"
         />
         {{ label }}
       </label>

src/components/FormInput.vue

@@ -1,5 +1,5 @@
 <template>
-  <form class="inputs-wrapper" @submit.prevent="saveInput">
+  <div class="inputs-wrapper">
     <p class="label-wrapper">
       <label :for="inputId">
         {{ label }}
@@ -13,24 +13,27 @@
       :type="type"
       :id="inputId"
       :required="required"
+      @change.prevent="saveInput"
     />
     <input
-      min="0"
+      min="1"
       v-else-if="type === 'number'"
       v-model.number="inputted"
       :type="type"
       :id="inputId"
       :required="required"
+      @change.prevent="saveInput"
     />
     <input
       v-else
       v-model="inputted"
       :type="type"
       :id="inputId"
       :required="required"
+      @change.prevent="saveInput"
     />
     <span class="expand"></span>
-  </form>
+  </div>
 </template>
 
 <script>
@@ -53,11 +56,19 @@ export default {
     saveKey: {
       type: String,
       required: true
+    },
+    defaultV: {
+      type: [String, Number],
+      default: ''
     }
   },
   setup(props) {
-    const { label, type, saveKey, required } = toRefs(props)
+    const { label, type, saveKey, required, defaultV } = toRefs(props)
     const inputted = ref('')
+    if (defaultV.value.length > 0 || defaultV.value) {
+      inputted.value = defaultV.value
+      saveConfig(saveKey.value, inputted.value)
+    }
 
     const saveInput = () => saveConfig(saveKey.value, inputted.value)
     const inputId = computed(() => label.value + '-input-' + type.value)

src/components/FormRadio.vue

@@ -34,11 +34,19 @@ export default {
     options: {
       type: Array,
       required: true
+    },
+    defaultV: {
+      type: String,
+      default: ''
     }
   },
   setup(props) {
-    const { options, saveKey, required } = toRefs(props)
+    const { options, saveKey, required, defaultV } = toRefs(props)
     const picked = ref('')
+    if (defaultV.value.length > 0) {
+      picked.value = defaultV.value
+      saveConfig(saveKey.value, picked.value)
+    }
 
     const saveInput = () => saveConfig(saveKey.value, picked.value)
     const isRequired = computed(() => (required.value ? '*' : ''))

src/components/TabLoggers.vue

@@ -5,12 +5,14 @@
       type="text"
       :label="output_dir.description"
       :saveKey="output_dir.name"
+      :defaultV="output_dir.default"
       required
     />
     <FormInput
       type="number"
       :label="log_every_iters.description"
       :saveKey="log_every_iters.name"
+      :defaultV="log_every_iters.default"
       required
     />
     <FormSelect

src/components/TabTraining.vue

@@ -7,10 +7,36 @@
       :saveKey="deterministic.name"
     />
     <h2 class="training">Distributed Training (NCCL backend)</h2>
-    <FormRadio :options="[launch, spawn]" saveKey="dist" />
-    <template v-for="(d, index) in distributedConfigs" :key="index">
-      <FormInput :label="d.description" :type="d.type" :saveKey="d.name" />
-    </template>
+    <FormCheckbox label="Use distributed training" saveKey="use_dist" />
+    <div v-show="store.config.use_dist">
+      <FormRadio :options="[launch, spawn]" saveKey="dist" defaultV="launch" />
+      <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>
 </template>
 
@@ -20,26 +46,37 @@ import { training } from '../metadata/metadata.json'
 import FormCheckbox from './FormCheckbox.vue'
 import FormInput from './FormInput.vue'
 import FormRadio from './FormRadio.vue'
+import { store } from '../store.js'
 
 export default {
   components: { FormCheckbox, FormInput, FormRadio },
   setup() {
-    const { deterministic, launch, spawn, ...distributedConfigs } = training
+    const {
+      deterministic,
+      launch,
+      spawn,
+      nproc_per_node,
+      nnodes,
+      master_addr,
+      master_port
+    } = training
     const isDeterministic = ref(false)
-    const distributedValue = ref({})
 
     // computed properties
     const saveDeterministic = computed(() => {
       saveConfig(deterministic.name, isDeterministic.value)
     })
     return {
+      store,
+      deterministic,
       launch,
       spawn,
-      deterministic,
+      nproc_per_node,
+      nnodes,
+      master_addr,
+      master_port,
       isDeterministic,
       saveDeterministic,
-      distributedConfigs,
-      distributedValue,
       saveDistributed
     }
   }

src/metadata/metadata.json

@@ -19,24 +19,28 @@
       "name": "nproc_per_node",
       "type": "number",
       "description": "Number of processes to launch on each node (mandatory for single node, multi gpus distributed training)",
-      "min": 1
+      "min": 1,
+      "default": 2
     },
     "nnodes": {
       "name": "nnodes",
       "type": "number",
       "description": "Number of nodes to use for distributed training (mandatory for multi nodes, multi gpus distributed training)",
-      "min": 1
+      "min": 1,
+      "default": 1
     },
     "master_addr": {
       "name": "master_addr",
       "type": "text",
-      "description": "Master node TCP/IP address for torch native backends (mandatory if you have filled number of nodes)"
+      "description": "Master node TCP/IP address for torch native backends (mandatory if you have filled number of nodes)",
+      "default": "127.0.0.1"
     },
     "master_port": {
       "name": "master_port",
       "type": "number",
       "description": "Master node port for torch native backends (mandatory if you have filled number of nodes)",
-      "min": 0
+      "min": 0,
+      "default": 8080
     }
   },
   "handlers": {
@@ -93,12 +97,14 @@
     "output_dir": {
       "name": "output_dir",
       "type": "text",
-      "description": "Directory to save all outputs"
+      "description": "Directory to save all outputs",
+      "default": "./logs"
     },
     "log_every_iters": {
       "name": "log_every_iters",
       "type": "number",
-      "description": "Logging interval for training statistics"
+      "description": "Logging interval for training statistics",
+      "default": 2
     },
     "logger": {
       "name": "logger",

src/templates/template-common/README.md

@@ -1,6 +1,7 @@
+#::: if (it.use_dist) { :::#
 #::: if (it.dist === 'launch') { :::#
 #::: if (it.nproc_per_node) { :::#
-#::: if (it.nnodes && it.master_addr && it.master_port) { :::#
+#::: if (it.nnodes > 1 && it.master_addr && it.master_port) { :::#
 
 ### Multi Node, Multi GPU Training (`torch.distributed.launch`) (recommended)
 
@@ -56,7 +57,7 @@ python -m torch.distributed.launch \
 
 #::: if (it.dist === 'spawn') { :::#
 #::: if (it.nproc_per_node) { :::#
-#::: if (it.nnodes && it.master_addr && it.master_port) { :::#
+#::: if (it.nnodes > 1 && it.master_addr && it.master_port) { :::#
 
 ### Multi Node, Multi GPU Training (`torch.multiprocessing.spawn`)
 
@@ -110,7 +111,7 @@ python main.py  \
 #::: } :::#
 #::: } :::#
 
-#::: if (!it.nproc_per_node) { :::#
+#::: } else { :::#
 
 ### 1 GPU Training
 

src/templates/template-common/config.yaml

@@ -17,11 +17,13 @@ nproc_per_node: #:::= it.nproc_per_node :::#
 #::: if (it.nnodes) { :::#
 # distributed multi node spawn
 nnodes: #:::= it.nnodes :::#
+#::: if (it.nnodes > 1) { :::#
 node_rank: 0
 master_addr: #:::= it.master_addr :::#
 master_port: #:::= it.master_port :::#
 #::: } :::#
 #::: } :::#
+#::: } :::#
 
 #::: if (it.filename_prefix) { :::#
 filename_prefix: #:::= it.filename_prefix :::#

src/templates/template-vision-classification/README.md

@@ -10,9 +10,10 @@ pip install -r requirements.txt --progress-bar off -U
 
 ## Training
 
+#::: if (it.use_dist) { :::#
 #::: if (it.dist === 'launch') { :::#
 #::: if (it.nproc_per_node) { :::#
-#::: if (it.nnodes && it.master_addr && it.master_port) { :::#
+#::: if (it.nnodes > 1 && it.master_addr && it.master_port) { :::#
 
 ### Multi Node, Multi GPU Training (`torch.distributed.launch`) (recommended)
 
@@ -68,7 +69,7 @@ python -m torch.distributed.launch \
 
 #::: if (it.dist === 'spawn') { :::#
 #::: if (it.nproc_per_node) { :::#
-#::: if (it.nnodes && it.master_addr && it.master_port) { :::#
+#::: if (it.nnodes > 1 && it.master_addr && it.master_port) { :::#
 
 ### Multi Node, Multi GPU Training (`torch.multiprocessing.spawn`)
 
@@ -122,7 +123,7 @@ python main.py  \
 #::: } :::#
 #::: } :::#
 
-#::: if (!it.nproc_per_node) { :::#
+#::: } else { :::#
 
 ### 1 GPU Training
 

src/templates/template-vision-classification/config.yaml

@@ -17,11 +17,13 @@ nproc_per_node: #:::= it.nproc_per_node :::#
 #::: if (it.nnodes) { :::#
 # distributed multi node spawn
 nnodes: #:::= it.nnodes :::#
+#::: if (it.nnodes > 1) { :::#
 node_rank: 0
 master_addr: #:::= it.master_addr :::#
 master_port: #:::= it.master_port :::#
 #::: } :::#
 #::: } :::#
+#::: } :::#
 
 #::: if (it.filename_prefix) { :::#
 filename_prefix: #:::= it.filename_prefix :::#

src/templates/template-vision-dcgan/README.md

@@ -10,9 +10,10 @@ pip install -r requirements.txt --progress-bar off -U
 
 ## Training
 
+#::: if (it.use_dist) { :::#
 #::: if (it.dist === 'launch') { :::#
 #::: if (it.nproc_per_node) { :::#
-#::: if (it.nnodes && it.master_addr && it.master_port) { :::#
+#::: if (it.nnodes > 1 && it.master_addr && it.master_port) { :::#
 
 ### Multi Node, Multi GPU Training (`torch.distributed.launch`) (recommended)
 
@@ -68,7 +69,7 @@ python -m torch.distributed.launch \
 
 #::: if (it.dist === 'spawn') { :::#
 #::: if (it.nproc_per_node) { :::#
-#::: if (it.nnodes && it.master_addr && it.master_port) { :::#
+#::: if (it.nnodes > 1 && it.master_addr && it.master_port) { :::#
 
 ### Multi Node, Multi GPU Training (`torch.multiprocessing.spawn`)
 
@@ -122,7 +123,7 @@ python main.py  \
 #::: } :::#
 #::: } :::#
 
-#::: if (!it.nproc_per_node) { :::#
+#::: } else { :::#
 
 ### 1 GPU Training
 

src/templates/template-vision-dcgan/config.yaml

@@ -20,11 +20,13 @@ nproc_per_node: #:::= it.nproc_per_node :::#
 #::: if (it.nnodes) { :::#
 # distributed multi node spawn
 nnodes: #:::= it.nnodes :::#
+#::: if (it.nnodes > 1) { :::#
 node_rank: 0
 master_addr: #:::= it.master_addr :::#
 master_port: #:::= it.master_port :::#
 #::: } :::#
 #::: } :::#
+#::: } :::#
 
 #::: if (it.filename_prefix) { :::#
 filename_prefix: #:::= it.filename_prefix :::#