FanucWeb/ActiveBOWeb/src/components/ControlPanel.vue

153 lines
3.3 KiB
Vue

<template>
<v-row>
<v-col>
<v-row class="d-flex justify-space-evenly">
<v-select
:items="envs"
label="Environments"
v-model="envSelector"
></v-select>
<v-select
:items="metrics"
label="Metric"
v-model="metricSelector"
></v-select>
</v-row>
<v-slider
class="control-slider"
label="maximum steps"
v-model="maxStepComp"
:step="1"
:min="10"
:max="200"
thumb-label
/>
<v-slider
class="control-slider"
label="nr base funcs"
v-model="baseFuncsComp"
:step="1"
:min="2"
:max="20"
thumb-label
/>
<v-slider
class="control-slider"
label="nr episodes"
v-model="cstore.nr_episodes"
:step="1"
:min="10"
:max="200"
thumb-label
:disabled="episodeRef"
/>
<v-slider
class="control-slider"
label="nr runs"
v-model="cstore.nr_runs"
:step="1"
:min="1"
:max="50"
thumb-label
:disabled="runRef"
/>
<v-select
:items="acq_funs"
label="Acquisition Function"
v-model="acqSelector"
:disabled="acqRef"
></v-select>
<v-slider
class="control-slider"
label="Metric Parameter"
v-model="cstore.metric_parameter"
:step="0.01"
:min="0"
:max="1"
thumb-label
:disabled="epsilonRef"
/>
<v-row class="d-flex justify-space-evenly mb-9">
<v-btn color="primary" @click="cstore.setSendWeights()"
>Send Weights</v-btn
>
<v-btn color="secondary" @click="cstore.setRunner()">Run</v-btn>
</v-row>
</v-col>
</v-row>
</template>
<script setup>
import { usePStore } from "@/store/PolicyStore";
import { useCStore } from "@/store/ControlStore";
import { computed, watch, ref } from "vue";
const pstore = usePStore();
const cstore = useCStore();
const envs = cstore.envs;
const metrics = cstore.metircs;
const acq_funs = cstore.acq_funs;
const episodeRef = ref(true);
const runRef = ref(true);
const acqRef = ref(true);
const epsilonRef = ref(true);
const maxStepComp = computed({
get: () => pstore.max_steps,
set: (value) => pstore.setMaxSteps(value),
});
const baseFuncsComp = computed({
get: () => pstore.nr_weights,
set: (value) => pstore.setNrWeights(value),
});
const envSelector = computed({
get: () => cstore.env,
set: (value) => cstore.setEnv(value),
});
const metricSelector = computed({
get: () => cstore.metric,
set: (value) => cstore.setMetric(value),
});
const acqSelector = computed({
get: () => cstore.acq_fun,
set: (value) => cstore.setAcq(value),
});
watch(
() => cstore.getMetric,
() => {
const usrMode = cstore.getMetric;
if (usrMode === "manually") {
episodeRef.value = true;
runRef.value = true;
acqRef.value = true;
epsilonRef.value = true;
}
if (usrMode === "BO") {
episodeRef.value = false;
runRef.value = false;
acqRef.value = false;
epsilonRef.value = true;
}
if (usrMode === "active BO") {
episodeRef.value = false;
runRef.value = false;
acqRef.value = false;
epsilonRef.value = false;
}
}
);
</script>
<style scoped>
.control-slider {
}
</style>