finished BO

Manual case and BO fully functional

ActiveBOWeb/src/components/ControlPanel.vue

@@ -39,11 +39,17 @@
         label="nr runs"
         v-model="cstore.nr_runs"
         :step="1"
-          :min="1"
+        :min="2"
         :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="greedy"
@@ -55,7 +61,9 @@
         :disabled="greedyRef"
       />
       <v-row class="d-flex justify-space-evenly mb-9">
-        <v-btn color="primary" @click="cstore.setSendWeights()">Send Weights</v-btn>
+        <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>
@@ -71,44 +79,56 @@ const pstore = usePStore();
 const cstore = useCStore();
 
 const options = cstore.user_modes;
+const acq_funs = cstore.acq_funs;
 
-const episodeRef = ref(false);
+const episodeRef = ref(true);
 const runRef = ref(true);
+const acqRef = ref(true);
 const greedyRef = ref(true);
 
 const baseFuncsComp = computed({
   get: () => pstore.nr_weights,
   set: (value) => pstore.setNrWeights(value),
-})
+});
 
 const modeSelector = computed({
   get: () => cstore.mode,
-  set: (value) => cstore.setUserMode(value)
-})
+  set: (value) => cstore.setUserMode(value),
+});
 
-watch(() => cstore.getUserMode, () => {
+const acqSelector = computed({
+  get: () => cstore.acq_fun,
+  set: (value) => cstore.setAcq(value),
+});
+
+watch(
+  () => cstore.getUserMode,
+  () => {
     const usrMode = cstore.getUserMode;
 
-  if (usrMode === 'manually') {
+    if (usrMode === "manually") {
       episodeRef.value = true;
       runRef.value = true;
+      acqRef.value = true;
       greedyRef.value = true;
     }
-  if (usrMode === 'BO') {
+    if (usrMode === "BO") {
       episodeRef.value = false;
       runRef.value = false;
+      acqRef.value = false;
       greedyRef.value = true;
     }
-  if (usrMode === 'active BO') {
+    if (usrMode === "active BO") {
       episodeRef.value = false;
       runRef.value = false;
+      acqRef.value = false;
       greedyRef.value = false;
     }
-});
+  }
+);
 </script>
 
 <style scoped>
 .control-slider {
 }
-
 </style>

ActiveBOWeb/src/components/MountainCarCanvas.vue

@@ -9,8 +9,6 @@ import {useMCStore} from "@/store/MountainCarStore";
 const mcstore = useMCStore();
 
 const imageData = ref(null);
-const canvasWidth = mcstore.width;
-const canvasHeight = mcstore.height;
 
 const renderImage = (width, height) => {
   const red = mcstore.getRed;
@@ -31,13 +29,13 @@ const renderImage = (width, height) => {
 
 const drawImage = (width, height) => {
   if (imageData.value) {
-    const canvas = document.getElementById('MCcanvas');
-    const context = canvas.getContext('2d')
+    const canvas = document.getElementById("MCcanvas");
+    const context = canvas.getContext("2d");
 
     const image = new ImageData(imageData.value, width, height);
     context.putImageData(image, 0, 0);
   }
-}
+};
 
 onMounted(() => {
   const height = mcstore.getHeight;
@@ -46,15 +44,15 @@ onMounted(() => {
   drawImage(width, height);
 });
 
-watch(() => mcstore.trigger, () => {
+watch(
+  () => mcstore.trigger,
+  () => {
     const height = mcstore.getHeight;
     const width = mcstore.getWidth;
     renderImage(width, height);
     drawImage(width, height);
-});
-
+  }
+);
 </script>
 
-<style scoped>
-
-</style>
+<style scoped></style>

ActiveBOWeb/src/components/RewardPlot.vue

@@ -3,10 +3,7 @@
 </template>
 
 <script setup>
-import {
-  onMounted,
-  watch,
-} from "vue";
+import { onMounted, watch } from "vue";
 import { Chart } from "chart.js/auto";
 import { useRStore } from "@/store/RewardStore";
 
@@ -17,42 +14,48 @@ let chartHandle;
 function buildChart() {
   const reward_mean = store.getMean;
   const reward_std = store.getStd;
-  const upper_bound = Array(reward_mean.length).fill(0).map((_, i) => reward_mean[i] + 1.96 * reward_std[i]);
-  const lower_bound = Array(reward_mean.length).fill(0).map((_, i) => reward_mean[i] - 1.96 * reward_std[i]);
-  const reward_labels = Array(reward_mean.length).fill(0).map((_, i) => i);
+  const upper_bound = Array(reward_mean.length)
+    .fill(0)
+    .map((_, i) => reward_mean[i] + 1.96 * reward_std[i]);
+  const lower_bound = Array(reward_mean.length)
+    .fill(0)
+    .map((_, i) => reward_mean[i] - 1.96 * reward_std[i]);
+  const reward_labels = Array(reward_mean.length)
+    .fill(0)
+    .map((_, i) => i);
   const RewardPlot = {
     data: {
       datasets: [
         {
-          label: 'Reward',
-          type: 'line',
-          xAxisID: 'x',
-          yAxisID: 'y',
+          label: "Reward",
+          type: "line",
+          xAxisID: "x",
+          yAxisID: "y",
           fill: false,
           data: reward_mean,
-          borderColor: '#3DC47A',
+          borderColor: "#3DC47A",
           borderWidth: 2,
           pointRadius: 0,
         },
         {
-          type: 'line',
-          xAxisID: 'x',
-          yAxisID: 'y',
+          type: "line",
+          xAxisID: "x",
+          yAxisID: "y",
           fill: 0,
           data: upper_bound,
           pointRadius: 0,
-          borderColor: 'transparent',
-
+          borderColor: "transparent",
+          backgroundColor: "rgba(61,196,122,0.5)",
         },
         {
-          type: 'line',
-          xAxisID: 'x',
-          yAxisID: 'y',
+          type: "line",
+          xAxisID: "x",
+          yAxisID: "y",
           fill: 0,
           data: lower_bound,
           pointRadius: 0,
-          borderColor: 'transparent',
-
+          borderColor: "transparent",
+          backgroundColor: "rgba(61,196,122,0.5)",
         },
       ],
     },
@@ -69,7 +72,7 @@ function buildChart() {
       },
       lineTension: 0,
       tooltip: {
-        mode: 'label',
+        mode: "label",
       },
       scales: {
         x: {
@@ -81,17 +84,18 @@ function buildChart() {
             autoSkip: true,
           },
         },
-        y:
-            {
-              type: 'linear',
+        y: {
+          type: "linear",
           ticks: {
-                beginAtZero: true,
+            beginAtZero: false,
+            min: -110,
+            max: 0,
           },
         },
       },
     },
   };
-  const ctx = document.getElementById('reward-chart');
+  const ctx = document.getElementById("reward-chart");
   // eslint-disable-next-line no-new
   chartHandle = new Chart(ctx, RewardPlot);
 }
@@ -100,24 +104,28 @@ onMounted(() => {
   buildChart();
 });
 
-watch(() => store.getTrigger, () => {
+watch(
+  () => store.getTrigger,
+  () => {
     const reward_mean = store.getMean;
     const reward_std = store.getStd;
-  const upper_bound = Array(reward_mean.length).fill(0).map((_, i) => reward_mean[i] + 1.96 * reward_std[i]);
-  const lower_bound = Array(reward_mean.length).fill(0).map((_, i) => reward_mean[i] - 1.96 * reward_std[i]);
+    const upper_bound = Array(reward_mean.length)
+      .fill(0)
+      .map((_, i) => reward_mean[i] + 1.96 * reward_std[i]);
+    const lower_bound = Array(reward_mean.length)
+      .fill(0)
+      .map((_, i) => reward_mean[i] - 1.96 * reward_std[i]);
 
-  const reward_labels = Array(reward_mean.length).fill(0).map((_, i) => i);
-
-  chartHandle.options.scales.x.labels = reward_labels;
+    chartHandle.options.scales.x.labels = Array(reward_mean.length)
+      .fill(0)
+      .map((_, i) => i);
     chartHandle.data.datasets[0].data = reward_mean;
     chartHandle.data.datasets[1].data = upper_bound;
     chartHandle.data.datasets[2].data = lower_bound;
 
     chartHandle.update();
-});
-
+  }
+);
 </script>
 
-<style scoped>
-
-</style>
+<style scoped></style>

ActiveBOWeb/src/components/RosBar.vue

@@ -1,21 +1,24 @@
 <template>
-  <v-navigation-drawer
-      v-model="store.rosBarOpened"
-      temporary
-      location="right">
+  <v-navigation-drawer v-model="store.rosBarOpened" temporary location="right">
     <v-container fluid>
       <v-row justify="space-between">
         <v-col cols="6" md="12">
-          <v-text-field v-model="formState.ipaddress"
+          <v-text-field
+            v-model="formState.ipaddress"
             label="IP Address"
-                        :disabled="connectionState"/>
-          <v-text-field v-model="formState.port"
+            :disabled="connectionState"
+          />
+          <v-text-field
+            v-model="formState.port"
             label="Port"
-                        :disabled="connectionState"/>
-          <v-switch @change="updateConnectionState"
+            :disabled="connectionState"
+          />
+          <v-switch
+            @change="updateConnectionState"
             true-value="connected"
             false-value="not connected"
-                    :label="`${formState.connect}`"/>
+            :label="`${formState.connect}`"
+          />
         </v-col>
       </v-row>
     </v-container>
@@ -23,16 +26,12 @@
 </template>
 
 <script setup>
-import * as ROS from 'roslib';
-import { useBWStore } from '@/store/BaseWebsiteStore';
+import * as ROS from "roslib";
+import { useBWStore } from "@/store/BaseWebsiteStore";
 import { usePStore } from "@/store/PolicyStore";
 import { useCStore } from "@/store/ControlStore";
 
-import {
-  reactive,
-  ref,
-  watch,
-} from 'vue';
+import { reactive, ref, watch } from "vue";
 
 import * as ROSLIB from "roslib";
 import { useRStore } from "@/store/RewardStore";
@@ -45,9 +44,9 @@ const rstore = useRStore();
 const mcstore = useMCStore();
 
 const formState = reactive({
-  ipaddress: 'localhost',
-  port: '9090',
-  connect: 'not connected',
+  ipaddress: "localhost",
+  port: "9090",
+  connect: "not connected",
   // connectionState: computed(() => formState.connect !== 'not connected'),
 });
 
@@ -56,25 +55,27 @@ const stateCounter = ref([0, 0, 0]);
 
 // Open Connection to ROSBridge and subscribe the topics.
 const ros = new ROS.Ros();
-ros.on('connection', () => {
+ros.on("connection", () => {
   stateCounter.value[0] += 1;
 });
 
-ros.on('error', (error) => {
+ros.on("error", (error) => {
   stateCounter.value[1] += 1;
   console.log(error);
 });
 
-ros.on('close', () => { stateCounter.value[2] += 1; });
+ros.on("close", () => {
+  stateCounter.value[2] += 1;
+});
 
 function updateConnectionState() {
   connectionState.value = !connectionState.value;
-  if (formState.connect === 'not connected') {
-    formState.connect = 'connected';
+  if (formState.connect === "not connected") {
+    formState.connect = "connected";
     const rosUrl = `ws://${formState.ipaddress}:${formState.port}`;
     ros.connect(rosUrl);
   } else {
-    formState.connect = 'not connected';
+    formState.connect = "not connected";
     ros.close();
   }
 }
@@ -85,44 +86,46 @@ const lastStateCounter = [0, 0, 0];
 watch(stateCounter.value, (newValue) => {
   let currentState = 0;
   for (let i = 0; i < lastStateCounter.length; i += 1) {
-    if ((newValue[i] - lastStateCounter[i]) === 1) {
+    if (newValue[i] - lastStateCounter[i] === 1) {
       currentState = i;
     }
     lastStateCounter[i] = newValue[i];
   }
   if (currentState === 0) {
-    store.setRosConState('connected');
+    store.setRosConState("connected");
   } else if (currentState === 1) {
-    store.setRosConState('error');
+    store.setRosConState("error");
   } else if (currentState === 2) {
-    store.setRosConState('not connected');
+    store.setRosConState("not connected");
   }
 });
 
 // Policy Service
 const policy_service = new ROSLIB.Service({
   ros: ros,
-  name: '/policy_srv',
-  serviceType: 'active_bo_msgs/srv/WeightToPolicy',
+  name: "/policy_srv",
+  serviceType: "active_bo_msgs/srv/WeightToPolicy",
 });
 
-watch(() => cstore.getSendWeights, () =>{
-
+watch(
+  () => cstore.getSendWeights,
+  () => {
     const policy_request = new ROSLIB.ServiceRequest({
       weights: pstore.weights,
       nr_steps: pstore.max_steps,
-  })
+    });
 
     policy_service.callService(policy_request, function (result) {
-    pstore.setPolicy(result.policy)
-  });
+      pstore.setPolicy(result.policy);
     });
+  }
+);
 
 // RL Service + Feedback Suscriber
 const rl_feedback_subscriber = new ROSLIB.Topic({
   ros: ros,
-  name: '/rl_feedback',
-  message: 'active_bo_msgs/msg/ImageFeedback',
+  name: "/rl_feedback",
+  message: "active_bo_msgs/msg/ImageFeedback",
 });
 
 rl_feedback_subscriber.subscribe((msg) => {
@@ -132,24 +135,52 @@ rl_feedback_subscriber.subscribe( (msg) => {
 
 const rl_service = new ROSLIB.Service({
   ros: ros,
-  name: '/rl_srv',
-  serviceType: 'active_bo_msgs/srv/RLRollOut',
+  name: "/rl_srv",
+  serviceType: "active_bo_msgs/srv/RLRollOut",
 });
 
-watch(() => cstore.getRunner, () =>{
+const bo_service = new ROSLIB.Service({
+  ros: ros,
+  name: "/bo_srv",
+  serviceType: "active_bo_msgs/srv/BO",
+});
 
+watch(
+  () => cstore.getRunner,
+  () => {
+    const usr_mode = cstore.getUserMode;
+
+    if (usr_mode === "manually") {
       const rl_request = new ROSLIB.ServiceRequest({
         policy: pstore.policy,
-  })
-
-  rl_service.callService(rl_request, function (rl_result) {
-    rstore.addMeanManually(rl_result.reward)
-  });
       });
 
+      rl_service.callService(rl_request, function (rl_response) {
+        rstore.addMeanManually(rl_response.reward);
+      });
+    } else if (usr_mode === "BO") {
+      const bo_request = new ROSLIB.ServiceRequest({
+        nr_weights: pstore.nr_weights,
+        max_steps: pstore.max_steps,
+        nr_episodes: cstore.nr_episodes,
+        nr_runs: cstore.nr_runs,
+        acquisition_function: cstore.acq_fun,
+      });
 
+      bo_service.callService(bo_request, function (bo_response) {
+        pstore.setPolicy(bo_response.best_policy);
+        pstore.setWeights(bo_response.best_weights);
+        rstore.setMean(bo_response.reward_mean);
+        rstore.setStd(bo_response.reward_std);
+      });
+      const rl_request = new ROSLIB.ServiceRequest({
+        policy: pstore.policy,
+      });
+
+      rl_service.callService(rl_request, () => {});
+    }
+  }
+);
 </script>
 
-<style scoped>
-
-</style>
+<style scoped></style>

ActiveBOWeb/src/components/SideBar.vue

@@ -10,7 +10,7 @@
 </template>
 
 <script setup>
-import { useBWStore } from '@/store/BaseWebsiteStore';
+import { useBWStore } from "@/store/BaseWebsiteStore";
 
 const store = useBWStore();
 </script>

ActiveBOWeb/src/components/SubLayout.vue

@@ -4,17 +4,26 @@
       <v-col cols="12" md="8">
         <v-row no-gutters>
           <v-col cols="12">
-            <v-card class="tile" :style="{ height: 'calc(40vh - 24px)', width: '100%' }">
+            <v-card
+              class="tile"
+              :style="{ height: 'calc(40vh - 24px)', width: '100%' }"
+            >
               <policy-plot />
             </v-card>
           </v-col>
           <v-col cols="12">
-            <v-card class="tile" :style="{ height: 'calc(20vh - 24px)', width: '100%' }">
+            <v-card
+              class="tile"
+              :style="{ height: 'calc(20vh - 24px)', width: '100%' }"
+            >
               <weight-tuner />
             </v-card>
           </v-col>
           <v-col cols="12">
-            <v-card class="tile" :style="{ height: 'calc(40vh - 24px)', width: '100%' }">
+            <v-card
+              class="tile"
+              :style="{ height: 'calc(40vh - 24px)', width: '100%' }"
+            >
               <reward-plot />
             </v-card>
           </v-col>
@@ -23,12 +32,18 @@
       <v-col cols="12" md="4">
         <v-row no-gutters>
           <v-col cols="12">
-            <v-card class="tile" :style="{ height: 'calc(40vh - 24px)', width: '100%'}">
+            <v-card
+              class="tile"
+              :style="{ height: 'calc(40vh - 24px)', width: '100%' }"
+            >
               <MountainCarCanvas />
             </v-card>
           </v-col>
           <v-col cols="12">
-            <v-card class="tile" :style="{ height: 'calc(60vh - 48px)', width: '100%' }">
+            <v-card
+              class="tile"
+              :style="{ height: 'calc(60vh - 48px)', width: '100%' }"
+            >
               <control-panel />
             </v-card>
           </v-col>

ActiveBOWeb/src/components/TopBar.vue

@@ -3,8 +3,7 @@
     <v-img class="cps-image" :left="true" :src="pic" />
     <v-divider vertical class="image-divider" />
     <v-spacer />
-    <v-btn
-        @click="store.toggleRosBar()" >
+    <v-btn @click="store.toggleRosBar()">
       <v-icon :color="changeRosColor()" large>
         mdi-checkbox-blank-circle
       </v-icon>
@@ -14,22 +13,21 @@
 </template>
 
 <script setup>
-import { useBWStore } from '@/store/BaseWebsiteStore';
-import pic from '../assets/CPS_Logo_White.png';
+import { useBWStore } from "@/store/BaseWebsiteStore";
+import pic from "../assets/CPS_Logo_White.png";
 
 const store = useBWStore();
 
 const changeRosColor = () => {
   const conState = store.getRosConState;
-  if (conState === 'not connected') {
-    return 'red';
+  if (conState === "not connected") {
+    return "red";
   }
-  if (conState === 'connected') {
-    return 'green';
+  if (conState === "connected") {
+    return "green";
   }
-  return 'grey';
+  return "grey";
 };
-
 </script>
 
 <style scoped>

ActiveBOWeb/src/store/BaseWebsiteStore.js

@@ -1,12 +1,12 @@
 import { defineStore } from "pinia";
 
-export const useBWStore = defineStore('Base Website Store', {
+export const useBWStore = defineStore("Base Website Store", {
   state: () => {
     return {
       play: false,
       rosBarOpened: true,
-            rosConState: 'not connected',
-        }
+      rosConState: "not connected",
+    };
   },
   getters: {
     getPlay: (state) => state.play,
@@ -23,5 +23,5 @@ export const useBWStore = defineStore('Base Website Store', {
     setRosConState(value) {
       this.rosConState = value;
     },
-    }
-})
+  },
+});

ActiveBOWeb/src/store/ControlStore.js

@@ -1,16 +1,22 @@
 import { defineStore } from "pinia";
 
-export const useCStore = defineStore('Control Store', {
+export const useCStore = defineStore("Control Store", {
   state: () => {
     return {
-            mode: 'manually',
-            user_modes: ['manually', 'BO', 'active BO'],
+      mode: "manually",
+      user_modes: ["manually", "BO", "active BO"],
+      acq_fun: "Expected Improvement",
+      acq_funs: [
+        "Expected Improvement",
+        "Probability of Improvement",
+        "Upper Confidence Bound",
+      ],
       nr_episodes: 10,
-            nr_runs: 1,
+      nr_runs: 2,
       greedy: 0,
       sendWeights: false,
       runner: false,
-        }
+    };
   },
   getters: {
     getUserMode: (state) => state.mode,
@@ -19,6 +25,7 @@ export const useCStore = defineStore('Control Store', {
     getGreedy: (state) => state.greedy,
     getSendWeights: (state) => state.sendWeights,
     getRunner: (state) => state.runner,
+    getAcq: (state) => state.acq_fun,
   },
   actions: {
     setUserMode(value) {
@@ -39,5 +46,8 @@ export const useCStore = defineStore('Control Store', {
     setRunner() {
       this.runner = !this.runner;
     },
-    }
-})
+    setAcq(value) {
+      this.acq_fun = value;
+    },
+  },
+});

ActiveBOWeb/src/store/MountainCarStore.js

@@ -1,6 +1,6 @@
 import { defineStore } from "pinia";
 
-export const useMCStore = defineStore('Mountain Car Store', {
+export const useMCStore = defineStore("Mountain Car Store", {
   state: () => {
     return {
       red: Array(153600).fill(120),
@@ -9,7 +9,7 @@ export const useMCStore = defineStore('Mountain Car Store', {
       width: 480,
       height: 320,
       trigger: false,
-        }
+    };
   },
   getters: {
     getRed: (state) => state.red,
@@ -29,5 +29,5 @@ export const useMCStore = defineStore('Mountain Car Store', {
       this.height = height;
       this.width = width;
     },
-    }
-})
+  },
+});

ActiveBOWeb/src/store/PolicyStore.js

@@ -1,13 +1,13 @@
 import { defineStore } from "pinia";
 
-export const usePStore = defineStore('Policy Store', {
+export const usePStore = defineStore("Policy Store", {
   state: () => {
     return {
       policy: Array(10).fill(0),
       nr_weights: 5,
       weights: [-1, -1, 1, 0, 0],
       max_steps: 100,
-        }
+    };
   },
   getters: {
     getPolicy: (state) => state.policy,
@@ -30,5 +30,5 @@ export const usePStore = defineStore('Policy Store', {
     setMaxSteps(value) {
       this.max_steps = value;
     },
-    }
-})
+  },
+});

ActiveBOWeb/src/store/RewardStore.js

@@ -1,12 +1,12 @@
 import { defineStore } from "pinia";
 
-export const useRStore = defineStore('Reward Store', {
+export const useRStore = defineStore("Reward Store", {
   state: () => {
     return {
       reward_mean: [],
       reward_std: [],
       trigger: false,
-        }
+    };
   },
   getters: {
     getMean: (state) => state.reward_mean,
@@ -19,11 +19,12 @@ export const useRStore = defineStore('Reward Store', {
     },
     setStd(value) {
       this.reward_std = value;
+      this.trigger = !this.trigger;
     },
     addMeanManually(value) {
       this.reward_mean[this.reward_mean.length] = value;
       this.reward_std[this.reward_std.length] = 0;
       this.trigger = !this.trigger;
     },
-    }
-})
+  },
+});