MatchExtractsWithReference.vue 7.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195
  1. <template>
  2. <ExperimentBlock
  3. :run-expe="runExpe"
  4. :experiment-name="experimentName"
  5. :scene-name="sceneName"
  6. :loading-message="loadingMessage"
  7. :loading-error-message="loadingErrorMessage"
  8. >
  9. <template v-slot:header>
  10. <!-- Extract configuration -->
  11. <extract-configuration
  12. v-if="lockConfig === false"
  13. @setExtractConfig="setExtractConfig($event, $refs.configurator)"
  14. :loading-error-message="loadingErrorMessage"
  15. ref="configurator"
  16. />
  17. <!--/ Extract configuration -->
  18. </template>
  19. <template v-slot:content>
  20. <v-flex v-if="explanation === true" xs12 sm12>
  21. <div style="margin-top:15%">
  22. <p>
  23. Vous allez voir des images, l'image de droite constitue toujours l'image de référence. Vous devez régler la qualité de l'image de gauche pour qu'elle soit la plus proche de l'image de droite.
  24. La première image est constitué de carré gris, c'est une partie de calibration. Si vous souhaitez régler votre écran (contraste, luminosité) vous pouvez le faire maintenant mais il vous est demandé de ne plus changer ce réglage au cours de l'expérience.
  25. Vous allez ensuite voir des scènes d'image de synthèse. Vous pouvez arrêter l'expérience quand vous souhaitez (ou faire une pause).
  26. </p>
  27. <v-btn @click="startExperiment" color="#007acc" large>Commencer l'expérience</v-btn>
  28. </div>
  29. </v-flex>
  30. <v-flex v-if="haveBreak === true" xs12 sm12>
  31. <div style="margin-top:15%">
  32. <p>
  33. Nous vous remercions d'avoir participé à cette expérience.
  34. Elle va nous permettre d'améliorer les calculs d'images. Si vous le souhaitez, vous pouvez revenir sur l'expérience via le <a :href="launcherURI" target="_blank">launcher</a> pour revoir de nouvelles images.
  35. </p>
  36. <v-btn @click="startExperiment" color="#007acc" large>Continuer l'expérience</v-btn>
  37. </div>
  38. </v-flex>
  39. <v-flex v-if="runExpe === true" xs12 sm6 :style="{ 'max-width': maxWidth + 'px', 'min-width': maxWidth + 'px', 'margin-right': 20 + 'px' }">
  40. <v-card dark color="primary" :max-width="maxWidth" :min-width="maxWidth">
  41. <!-- <v-card-text class="px-0">Experiment image</v-card-text> -->
  42. <v-container class="pa-1">
  43. <template v-for="i in extractConfig.y">
  44. <v-layout row wrap :key="`row-${i}`">
  45. <v-flex
  46. v-for="(anExtract, index) in extracts.slice(extractConfig.x * (i - 1), (extractConfig.x * i))"
  47. :key="`extract-${i}-${extractConfig.x}-${extractConfig.y}-${index}-${anExtract.quality}`"
  48. class="pa-0"
  49. >
  50. <v-card flat tile class="d-flex height100">
  51. <div
  52. v-if="anExtract.loading"
  53. class="img-extract-loader"
  54. @click.right.prevent
  55. >
  56. <v-progress-circular
  57. :indeterminate="true"
  58. />
  59. </div>
  60. <v-img
  61. v-else
  62. :src="anExtract.link"
  63. @click.left.prevent="extractAction($event, anExtract)"
  64. @click.right.prevent="extractAction($event, anExtract)"
  65. class="cursor"
  66. :class="{ 'extract-hover-border': showHoverBorder === true }"
  67. @error="extractsRemovedFromServerFallback"
  68. >
  69. <template v-slot:placeholder>
  70. <v-layout fill-height align-center justify-center ma-0>
  71. <v-progress-circular indeterminate color="grey lighten-5" />
  72. </v-layout>
  73. </template>
  74. </v-img>
  75. </v-card>
  76. </v-flex>
  77. </v-layout>
  78. </template>
  79. </v-container>
  80. </v-card>
  81. </v-flex>
  82. <v-flex v-if="runExpe === true" sm6 xs12 :style="{ 'max-width': maxWidth + 'px', 'min-width': maxWidth + 'px' }">
  83. <v-card dark color="primary" :max-width="maxWidth" :min-width="maxWidth">
  84. <!-- <v-card-text>Reference image</v-card-text> -->
  85. <v-img v-if="referenceImage" :src="referenceImage" :max-height="maxHeight" :max-width="maxWidth" :min-width="maxWidth" />
  86. </v-card>
  87. </v-flex>
  88. <!-- Experiment validation button -->
  89. <v-layout v-if="runExpe === true" justify-end align-content-end>
  90. <v-text-field
  91. v-model="comment"
  92. label="Ajouter un commentaire ici"
  93. />
  94. <v-btn @click="userBreak" color="primary" large right>Arrêter ou faire une pause</v-btn>
  95. <v-btn @click="finishExperiment" color="success" large right>Valider & passer à l'image suivante</v-btn>
  96. </v-layout>
  97. <!--/ Experiment validation button -->
  98. </template>
  99. </ExperimentBlock>
  100. </template>
  101. <script>
  102. import { mapGetters } from 'vuex'
  103. import ExperimentBlock from '@/components/ExperimentBlock.vue'
  104. import ExperimentBaseExtracts from '@/mixins/ExperimentBaseExtracts'
  105. import ExtractConfiguration from '@/components/ExperimentsComponents/ExtractConfiguration.vue'
  106. export default {
  107. components: {
  108. ExperimentBlock,
  109. ExtractConfiguration
  110. },
  111. mixins: [ExperimentBaseExtracts],
  112. data() {
  113. return {
  114. referenceImage: null,
  115. maxWidth: null,
  116. maxHeight: null,
  117. launcherURI: null,
  118. explanation: false,
  119. haveBreak: false,
  120. runExpe: false
  121. }
  122. },
  123. computed: {
  124. ...mapGetters(['getHostURI'])
  125. },
  126. async mounted() {
  127. // Load config for this scene to local state
  128. this.loadConfig()
  129. // Load progress from store into local state
  130. this.loadProgress()
  131. this.launcherURI = this.getHostURI + '/launcher/'
  132. let reference = null
  133. // Load scene data from the API
  134. await Promise.all([
  135. this.getImage('max').then(res => (reference = res)),
  136. this.getQualitiesList()
  137. ])
  138. this.referenceImage = reference.link
  139. this.maxWidth = reference.metadata.width
  140. this.maxHeight = reference.metadata.height
  141. // Load the cached configuration in the configurator component
  142. if (this.lockConfig === false) this.$refs.configurator.setDefaultConfig(this.extractConfig)
  143. // Load extracts if none were cached
  144. // if (this.extracts.length === 0)
  145. await this.setExtractConfig(this.extractConfig, this.$refs.configurator)
  146. this.saveProgress()
  147. this.loadExperimentState()
  148. },
  149. methods: {
  150. startExperiment() {
  151. this.explanation = false
  152. this.haveBreak = false
  153. this.runExpe = true
  154. },
  155. userBreak() {
  156. this.haveBreak = true
  157. this.explanation = false
  158. this.runExpe = false
  159. },
  160. loadExperimentState() {
  161. this.explanation = false
  162. this.haveBreak = false
  163. this.runExpe = false
  164. if (this.sceneName === '50_shades_of_grey') {
  165. this.explanation = true
  166. }
  167. else {
  168. this.runExpe = true
  169. }
  170. }
  171. }
  172. }
  173. </script>