fix: restructure and add more Ignite core features (#116)

* wip: group into metadata.json

* wip: restructure metadata

* feat: add full ignite core features

* chore: rename dev config file to avoid collision

src/App.vue

@@ -46,7 +46,7 @@ export default {
   --c-white-dark: #e4e4e7;
   --c-brand-red: #ee4c2c;
   --c-brand-yellow: #eaa700;
-  --c-text: #475569;
+  --c-text: #334155;
   --font-size: 1rem;
   --font-family-base: 'Inter', Avenir, -apple-system, BlinkMacSystemFont,
     'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans',
@@ -64,6 +64,7 @@ body {
   margin: 0;
   height: 100%;
   color: var(--c-text);
+  background-color: var(--c-white);
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }

src/components/CodeBlock.vue

@@ -61,7 +61,7 @@ export default {
         console.error(e)
       }
       copyText.value = 'Copied'
-      setTimeout(() => (copyText.value = 'Copy'), 3000)
+      setTimeout(() => (copyText.value = 'Copy'), 1500)
     }
 
     return { className, highlightCode, getLineNumbers, copyCode, copyText }

src/components/FormCheckbox.vue

@@ -9,8 +9,9 @@
           v-model="checked"
           @change="saveChecked"
         />
-        {{ label }} – <code>{{ saveKey }}</code> {{ isRequired }}
+        {{ label }}
       </label>
+      {{ isRequired }}
     </p>
   </form>
 </template>

src/components/FormInput.vue

@@ -2,8 +2,9 @@
   <form class="inputs-wrapper" @submit.prevent="saveInput">
     <p class="label-wrapper">
       <label :for="inputId">
-        {{ label }} – <code>{{ saveKey }}</code> {{ isRequired }}
+        {{ label }}
       </label>
+      {{ isRequired }}
     </p>
     <input
       minlength="1"

src/components/FormRadio.vue

@@ -0,0 +1,65 @@
+<template>
+  <div class="inputs-wrapper">
+    <p v-for="(o, index) in options" :key="index">
+      <input
+        type="radio"
+        v-model="picked"
+        :name="saveKey"
+        :id="o.description"
+        :required="required"
+        :value="o.name"
+        @change.prevent="saveInput"
+      />
+      <label :for="o.description">
+        {{ o.description }}
+      </label>
+      {{ isRequired }}
+    </p>
+  </div>
+</template>
+
+<script>
+import { computed, ref, toRefs } from 'vue'
+import { saveConfig } from '../store'
+export default {
+  props: {
+    required: {
+      type: Boolean,
+      default: false
+    },
+    saveKey: {
+      type: String,
+      required: true
+    },
+    options: {
+      type: Array,
+      required: true
+    }
+  },
+  setup(props) {
+    const { options, saveKey, required } = toRefs(props)
+    const picked = ref('')
+
+    const saveInput = () => saveConfig(saveKey.value, picked.value)
+    const isRequired = computed(() => (required.value ? '*' : ''))
+    return {
+      options,
+      saveKey,
+      required,
+      picked,
+      saveInput,
+      isRequired
+    }
+  }
+}
+</script>
+
+<style scoped>
+input {
+  font-family: var(--font-family-base);
+  font-size: var(--font-size);
+}
+input[type='radio'] {
+  margin-right: 0.5rem;
+}
+</style>

src/components/FormSelect.vue

@@ -2,8 +2,9 @@
   <form class="selector">
     <p>
       <label :for="selectId">
-        {{ label }} – <code>{{ saveKey }}</code> {{ isRequired }}
+        {{ label }}
       </label>
+      {{ isRequired }}
     </p>
     <select
       :id="selectId"

src/components/NavBar.vue

@@ -100,13 +100,15 @@ export default {
     const currentCommit = import.meta.env.VITE_COMMIT
 
     const downloadProject = () => {
-      for (const filename in store.code) {
-        zip.file(filename, store.code[filename])
+      if (store.code && Object.keys(store.code).length) {
+        for (const filename in store.code) {
+          zip.file(filename, store.code[filename])
+        }
+        zip.generateAsync({ type: 'blob' }).then((content) => {
+          saveAs(content, `ignite-${store.config.template}.zip`)
+        })
+        showDownloadMsg.value = true
       }
-      zip.generateAsync({ type: 'blob' }).then((content) => {
-        saveAs(content, 'ignite-project.zip')
-      })
-      showDownloadMsg.value = true
     }
     return { version, downloadProject, showDownloadMsg, currentCommit }
   }

src/components/PaneRight.vue

@@ -29,7 +29,7 @@
 <script>
 import CodeBlock from './CodeBlock.vue'
 import Instruction from './Instruction.vue'
-import { store } from '../store'
+import { store, __DEV_CONFIG_FILE__ } from '../store'
 import { computed, ref } from 'vue'
 import templates from '../templates/templates.json'
 import '@iconify/iconify'
@@ -40,7 +40,11 @@ export default {
     const currentTab = ref('README.md')
     const tabs = computed(() => {
       if (store.config.template) {
-        return Object.keys(templates[store.config.template])
+        const tabsArr = Object.keys(templates[store.config.template])
+        if (import.meta.env.DEV) {
+          tabsArr.push(__DEV_CONFIG_FILE__)
+        }
+        return tabsArr
       }
     })
     // search more file types mapping on

src/components/TabHandlers.vue

@@ -2,44 +2,55 @@
   <div class="tab handlers">
     <h1>Ignite Handlers Options</h1>
     <h2>Checkpointing</h2>
-    <p>{{ to_save.description }}</p>
-    <template v-for="(o, index) in to_save.options" :key="index">
-      <FormCheckbox :label="o.description" :saveKey="o.name" />
-    </template>
+    <FormCheckbox
+      :label="save_training.description"
+      :saveKey="save_training.name"
+    />
+    <FormCheckbox
+      :label="save_evaluation.description"
+      :saveKey="save_evaluation.name"
+    />
+    <FormInput
+      :label="filename_prefix.description"
+      :saveKey="filename_prefix.name"
+      :type="filename_prefix.type"
+    />
+    <FormInput
+      :label="n_saved.description"
+      :saveKey="n_saved.name"
+      :type="n_saved.type"
+    />
+    <h2>Training Termination</h2>
     <FormCheckbox
       :label="terminate_on_nan.description"
       :saveKey="terminate_on_nan.name"
     />
-    <template
-      v-for="(o, index) in [filename_prefix, n_saved, limit_sec]"
-      :key="index"
-    >
-      <FormInput :label="o.description" :saveKey="o.name" :type="o.type" />
-    </template>
+    <h2>Events Timer</h2>
+    <FormCheckbox :label="timer.description" :saveKey="timer.name" />
+    <h2>Early Stopping</h2>
+    <FormInput
+      :label="patience.description"
+      :saveKey="patience.name"
+      :type="patience.type"
+    />
+    <h2>Limit Training Time</h2>
+    <FormInput
+      :label="limit_sec.description"
+      :saveKey="limit_sec.name"
+      :type="limit_sec.type"
+    />
   </div>
 </template>
 
 <script>
-import {
-  to_save,
-  filename_prefix,
-  n_saved,
-  terminate_on_nan,
-  limit_sec
-} from '../metadata/utils.json'
+import { handlers } from '../metadata/metadata.json'
 import FormInput from './FormInput.vue'
 import FormCheckbox from './FormCheckbox.vue'
 
 export default {
   components: { FormInput, FormCheckbox },
   setup() {
-    return {
-      to_save,
-      filename_prefix,
-      n_saved,
-      terminate_on_nan,
-      limit_sec
-    }
+    return { ...handlers }
   }
 }
 </script>

src/components/TabLoggers.vue

@@ -17,7 +17,7 @@
 
 <script>
 import { ref } from 'vue'
-import { logger, output_dir } from '../metadata/utils.json'
+import { loggers } from '../metadata/metadata.json'
 import { saveConfig } from '../store'
 import FormSelect from './FormSelect.vue'
 import FormInput from './FormInput.vue'
@@ -28,13 +28,7 @@ export default {
     const outputDirValue = ref('')
     const loggerValue = ref('')
 
-    return {
-      logger,
-      output_dir,
-      saveConfig,
-      outputDirValue,
-      loggerValue
-    }
+    return { ...loggers, saveConfig, outputDirValue, loggerValue }
   }
 }
 </script>

src/components/TabTraining.vue

@@ -6,7 +6,8 @@
       :label="deterministic.description"
       :saveKey="deterministic.name"
     />
-    <h2 class="training">Distributed Training</h2>
+    <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>
@@ -15,33 +16,25 @@
 
 <script>
 import { computed, ref } from 'vue'
-import {
-  deterministic,
-  nproc_per_node,
-  nnodes,
-  master_addr,
-  master_port
-} from '../metadata/training.json'
+import { training } from '../metadata/metadata.json'
 import FormCheckbox from './FormCheckbox.vue'
 import FormInput from './FormInput.vue'
+import FormRadio from './FormRadio.vue'
 
 export default {
-  components: { FormCheckbox, FormInput },
+  components: { FormCheckbox, FormInput, FormRadio },
   setup() {
+    const { deterministic, launch, spawn, ...distributedConfigs } = training
     const isDeterministic = ref(false)
     const distributedValue = ref({})
-    const distributedConfigs = [
-      nproc_per_node,
-      nnodes,
-      master_addr,
-      master_port
-    ]
 
     // computed properties
     const saveDeterministic = computed(() => {
       saveConfig(deterministic.name, isDeterministic.value)
     })
     return {
+      launch,
+      spawn,
       deterministic,
       isDeterministic,
       saveDeterministic,