Parcourir la source

Is Image correct with one different extract created

Jérôme BUISINE il y a 4 ans
Parent
commit
8975b71947

+ 17 - 1
experimentConfig.default.js

@@ -90,7 +90,7 @@ export const experiments = {
     }
   },
   IsImageCorrect: {
-    mixins: [mixins.ExperimentBase],
+    mixins: [mixins.ExperimentBase, mixins.ExperimentBaseExtracts],
     defaultConfig: {
       lockConfig: false,
       showHoverBorder: false,
@@ -104,5 +104,21 @@ export const experiments = {
       whitelist: ['Appart1opt02', 'EchecsBas'],
       blacklist: null
     }
+  },
+  IsImageCorrectOneExtract: {
+    mixins: [mixins.ExperimentBase, mixins.ExperimentBaseExtracts],
+    defaultConfig: {
+      lockConfig: false,
+      showHoverBorder: false,
+      extractConfig: {
+        x: 4,
+        y: 4
+      }
+    },
+    scenesConfig: {},
+    availableScenes: {
+      whitelist: null,
+      blacklist: null
+    }
   }
 }

+ 10 - 1
src/router/experiments.js

@@ -50,7 +50,16 @@ export default [
     component: () => import('@/views/Experiments/IsImageCorrect'),
     props: true,
     meta: {
-      fullName: 'Check if image is correct'
+      fullName: 'Check if reconstructed image is correct'
+    }
+  },
+  {
+    path: '/experiments/IsImageCorrectOneExtract/:sceneName',
+    name: 'IsImageCorrectOneExtract',
+    component: () => import('@/views/Experiments/IsImageCorrectOneExtract'),
+    props: true,
+    meta: {
+      fullName: 'Check if reconstructed image with one different extract is correct'
     }
   }
 ]

+ 174 - 0
src/views/Experiments/IsImageCorrectOneExtract.vue

@@ -0,0 +1,174 @@
+<template>
+  <ExperimentBlock
+    :experiment-name="experimentName"
+    :scene-name="sceneName"
+    :loading-message="loadingMessage"
+    :loading-error-message="loadingErrorMessage"
+  >
+    <template v-slot:header>
+      <!-- ## Template to place in the header (example: Extract-configurator) ## -->
+    </template>
+
+    <template v-if="reconstructedImage" v-slot:content>
+      <!-- ## Actual experiment template ## -->
+
+      <!-- Image -->
+      <v-flex xs0 sm3 />
+
+      <v-flex xs12 sm6>
+        <v-card dark color="primary">
+          <v-card-text class="px-0">Reconstructed image</v-card-text>
+          <v-container class="pa-1">
+            <ExtractsToImage :extracts="reconstructedImage" :extract-config="extractConfig" />
+          </v-container>
+        </v-card>
+      </v-flex>
+
+
+      <v-flex xs0 sm3 />
+
+      <!-- Experiment validation button -->
+      <v-layout justify-center align-content-center>
+        <div id="choice">
+          <v-container grid-list-md text-xs-center fluid>
+            <h2>Test {{ testCount }} / {{ maxTestCount }}</h2>
+            <v-layout row wrap>
+              <v-flex sm6 xs12>
+                <v-btn @click="nextReconstructedImage(false)" color="error" large>Images is NOT correct</v-btn>
+              </v-flex>
+              <v-flex sm6 xs12>
+                <v-btn @click="nextReconstructedImage(true)" color="success" large>Images is correct</v-btn>
+              </v-flex>
+            </v-layout>
+          </v-container>
+        </div>
+      </v-layout>
+      <!--/ Experiment validation button -->
+    </template>
+  </ExperimentBlock>
+</template>
+
+<script>
+import ExperimentBlock from '@/components/ExperimentBlock.vue'
+import ExperimentBaseExtracts from '@/mixins/ExperimentBaseExtracts'
+import ExtractsToImage from '@/components/ExperimentsComponents/ExtractsToImage'
+import { EXPERIMENT as experimentMsgId } from '@/../config.messagesId'
+import { rand } from '@/functions'
+
+export default {
+  name: 'IsImageCorrectOneExtract', // experiment filename
+  components: {
+    ExperimentBlock,
+    ExtractsToImage
+  },
+  mixins: [
+    ExperimentBaseExtracts
+  ],
+  data() {
+    return {
+      experimentName: 'IsImageCorrectOneExtract', // experiment filename
+      refImage: null,
+      randImage: null,
+      reconstructedImage: null,
+      selectedQuality: 50,
+      testCount: 1,
+      maxTestCount: 10
+    }
+  },
+
+  // When experiment is loaded, this function is ran
+  async mounted() {
+    // Load config and progress for this scene to local state
+    this.loadConfig()
+    this.loadProgress()
+
+    // ## Do your experiment initialization stuff here ##
+    this.loadingMessage = 'Loading experiment data...'
+    this.loadingErrorMessage = null
+    try {
+      // Load scene qualities list
+      await this.getQualitiesList()
+
+      if (!this.reconstructedImage) await this.getReconstructedImage()
+    }
+    catch (err) {
+      console.error(err)
+      this.loadingErrorMessage = err.message
+      return
+    }
+    finally {
+      this.loadingMessage = null
+    }
+    // ##/ Do your experiment initialization stuff here ##
+
+    // Save progress from local state into store
+    this.saveProgress()
+  },
+
+  // List of experiment-specific methods
+  methods: {
+    // load reconstructed image
+    async getReconstructedImage() {
+      const randomQuality = this.qualities[rand(0, this.qualities.length - 1)]
+      const maxQuality = this.qualities[this.qualities.length - 1]
+
+      // Get the reference image, extracts of reference image and random quality extracts
+      const [maxExtracts, randomExtracts, maxImage, randImage] = await Promise.all([
+        this.getExtracts('max'),
+        this.getExtracts(randomQuality),
+        this.getImage(maxQuality),
+        this.getImage(randomQuality)
+      ])
+
+      this.refImage = maxImage
+      this.randImage = randImage
+
+      // get part to keep into refImage
+      let position = rand(0, randomExtracts.extracts.length)
+      this.randZonePosition = position
+
+      // construct new image with two different parts
+      maxExtracts.extracts[position] = randomExtracts.extracts[position]
+      this.reconstructedImage = maxExtracts.extracts.map(url => this.getHostURI + url)
+    },
+    // get next reconstructed image
+    async nextReconstructedImage(correct) {
+      this.loadingMessage = 'Loading new test...'
+      this.loadingErrorMessage = null
+      try {
+        this.testCount++
+
+        const experimentalData = {
+          refImage: this.refImage,
+          randImage: this.randImage,
+          randZoneId: this.randZonePosition,
+          imageCorrect: correct,
+          stepCounter: this.testCount,
+          maxStepCount: this.maxTestCount,
+          experimentName: this.experimentName,
+          sceneName: this.sceneName
+        }
+        this.sendMessage({ msgId: experimentMsgId.DATA, msg: experimentalData })
+
+        await this.getReconstructedImage()
+
+        // Experiment end
+        if (this.testCount > this.maxTestCount) return this.finishExperiment()
+      }
+      catch (err) {
+        console.error('Failed to load new test', err)
+        this.loadingErrorMessage = 'Failed to load new test. ' + err.message
+      }
+      finally {
+        this.loadingMessage = null
+        this.saveProgress()
+      }
+    }
+  }
+}
+</script>
+
+
+<style scoped>
+/* Experiment-specific style (CSS) */
+</style>