SEECBC/FrontEnd/components/playground/tf/Index.vue

<template>
  <v-row>
    <v-col cols="2">
      <v-btn class="mx-2" icon small color="black" @click.stop="reset">
        <v-icon>mdi-replay</v-icon>
      </v-btn>
      <v-btn
        v-show="!isTraining"
        class="mx-2"
        fab
        large
        color="primary"
        @click.stop="isTraining = true"
      >
        <v-icon>mdi-play</v-icon>
      </v-btn>
      <v-btn
        v-show="isTraining"
        class="mx-2"
        fab
        large
        color="primary"
        @click.stop="isTraining = false"
      >
        <v-icon>mdi-pause</v-icon>
      </v-btn>
    </v-col>
    <v-col cols="1">
      <span class="d-block label">{{ $t('playground.tf.epochNum') }}</span>
      <span id="epoch-number" class="d-block ma-0">000,000</span>
    </v-col>
    <v-col cols="9">
      <v-row>
        <!-- learning rate selects -->
        <v-col md="3">
          <v-select
            v-model="learningRate"
            :class="[$vuetify.breakpoint.mdAndUp ? '' : 'mb-6', 'mx-2']"
            :items="learningRates"
            menu-props="auto"
            hide-details
            :label="$t('playground.tf.learningRate')"
          />
        </v-col>
        <!-- optimizer selects -->
        <v-col md="3">
          <v-select
            v-model="optimizer"
            :class="[$vuetify.breakpoint.mdAndUp ? '' : 'mb-6', 'mx-2']"
            :items="optimizers"
            menu-props="auto"
            hide-details
            :label="$t('playground.tf.optimizer')"
          />
        </v-col>
        <!-- activation function -->
        <v-col md="3">
          <v-select
            v-model="activation"
            :class="[$vuetify.breakpoint.mdAndUp ? '' : 'mb-6', 'mx-2']"
            :items="activations"
            menu-props="auto"
            hide-details
            :label="$t('playground.tf.activation')"
          />
        </v-col>
        <!-- epoch -->
        <v-col md="3">
          <v-slider
            v-model="epoch"
            color="primary"
            track-color="grey"
            min="0"
            max="10"
            thumb-label
            :label="$t('playground.tf.epoch')"
          >
            <template v-slot:prepend>
              <v-icon @click="epoch--">
                mdi-minus
              </v-icon>
            </template>

            <template v-slot:append>
              <v-icon @click="epoch++">
                mdi-plus
              </v-icon>
            </template>
          </v-slider>
        </v-col>
        <!-- batch size -->
        <v-col md="3" class="my-3">
          <v-slider
            v-model="batchSize"
            color="primary"
            track-color="grey"
            min="10"
            max="400"
            thumb-label
            :label="$t('playground.tf.batchSize')"
          >
            <template v-slot:prepend>
              <v-icon @click="btachSize--">
                mdi-minus
              </v-icon>
            </template>

            <template v-slot:append>
              <v-icon @click="batchSize++">
                mdi-plus
              </v-icon>
            </template>
          </v-slider>
        </v-col>
      </v-row>
    </v-col>
    <v-col cols="12">
      <!-- models -->
      <model-board />
    </v-col>
  </v-row>
</template>

<script lang="ts">
import Vue from 'vue'
import ModelBoard from './ModelBoard.vue'

const learningRates = [0.01, 0.005, 0.001, 0.0005, 0.0001]
const activations = ['sigmoid', 'tanh', 'relu']
const optimizers = ['adam', 'sgd', 'rmsprop']

export default Vue.extend({
  components: {
    ModelBoard
  },
  data() {
    return {
      learningRates,
      activations,
      optimizers,
      learningRate: 0.001,
      activation: 'tanh',
      optimizer: 'rmsprop',
      epoch: 3,
      batchSize: 320,
      isTraining: false
    }
  }
})
</script>

<style scoped>
.label {
  font-size: 12px;
  opacity: 0.6;
  margin-top: 2px;
}

#epoch-number {
  font-size: 21.5px;
  font-weight: 300;
}
</style>