|
@@ -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>
|