ExperimentValidated.vue 4.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156
  1. <template>
  2. <div style="text-align:center">
  3. <!-- <h2>"{{ experimentFullName }}"</h2> -->
  4. <!-- <v-card>
  5. <v-card-title primary-title>
  6. <v-spacer />
  7. <div class="headline">Experiment validated for the scene "{{ sceneName }}"</div>
  8. <v-spacer />
  9. </v-card-title>
  10. <v-card-actions>
  11. <v-spacer />
  12. <v-btn flat exact to="/experiments/">
  13. <v-icon left>home</v-icon>
  14. Select another experiment
  15. </v-btn>
  16. <v-btn flat exact :to="`/experiments/${experimentName}`">
  17. <v-icon left>arrow_back</v-icon>
  18. Go back to scene selection
  19. </v-btn>
  20. <v-btn v-if="hasScenesLeft" flat exact :to="`/experiments/${experimentName}/${getRandomScene}`">
  21. <v-icon left>shuffle</v-icon>
  22. Continue with a random scene
  23. </v-btn>
  24. <div v-if="!hasScenesLeft" class="headline">You finished all the scenes, thanks for your contribution!</div>
  25. <v-spacer />
  26. </v-card-actions>
  27. </v-card> -->
  28. <loader v-if="!loaded" :message="loadingMessage" />
  29. <div v-if="loaded" style="margin-top:10%">
  30. <p style="font-size: 1.4em;">
  31. Nous vous remercions d'avoir participé à cette expérience.
  32. Elle va nous permettre d'améliorer les calculs d'images.
  33. </p>
  34. </div>
  35. <!-- Add of newsletter component -->
  36. <Newsletter v-if="loaded" />
  37. </div>
  38. </template>
  39. <script>
  40. import Loader from '@/components/Loader.vue'
  41. import { mapActions, mapGetters } from 'vuex'
  42. import Experiments from '@/router/experiments'
  43. import { getExperimentSceneList, getCalibrationScene, getCalibrationFrequency } from '@/config.utils'
  44. // import { rand } from '@/functions'
  45. import Newsletter from '@/components/ExperimentsComponents/Newsletter.vue'
  46. import stats from './../../results/match_extracts_probs.json'
  47. export default {
  48. name: 'ExperimentValidated',
  49. components: {
  50. Newsletter,
  51. Loader
  52. },
  53. props: {
  54. experimentName: {
  55. type: String,
  56. required: true
  57. },
  58. sceneName: {
  59. type: String,
  60. required: true
  61. }
  62. },
  63. data() {
  64. return {
  65. experimentFullName: null,
  66. availableScenes: [],
  67. loaded: false,
  68. loadingMessage: 'Chargement...'
  69. }
  70. },
  71. computed: {
  72. ...mapGetters(['getAllExperimentProgress']),
  73. ...mapActions(['loadScenesList']),
  74. hasScenesLeft() {
  75. return this.availableScenes.length > 0
  76. },
  77. getRandomScene() {
  78. // need to get only data from available data
  79. let availableStats = {}
  80. let sumProbs = 0
  81. for (let scene of this.availableScenes) {
  82. availableStats[scene] = stats[scene]
  83. sumProbs += stats[scene]
  84. }
  85. // renormalize probs for specific available scenes
  86. for (let scene of this.availableScenes) {
  87. availableStats[scene] /= sumProbs
  88. }
  89. let sceneChoice = this.availableScenes[0] // default choice
  90. let sum = 0 // store sum prob during choice selection
  91. let p = Math.random() // random number between 0 and 1
  92. for (let scene of this.availableScenes) {
  93. sum += availableStats[scene]
  94. // get choice selection
  95. if (sum >= p) {
  96. sceneChoice = scene
  97. break
  98. }
  99. }
  100. return sceneChoice
  101. }
  102. },
  103. async mounted() {
  104. // get information about calibration scene
  105. let calibrationScene = getCalibrationScene(this.experimentName)
  106. let calibrationSceneFreq = getCalibrationFrequency(this.experimentName)
  107. // reload scene list to update
  108. await this.loadScenesList
  109. const scenesList = getExperimentSceneList(this.experimentName)
  110. // load current user progression
  111. this.progression = this.getAllExperimentProgress()
  112. // Find the selected experiment full name
  113. this.experimentFullName = Experiments.find(x => x.name === this.experimentName).meta.fullName
  114. // Get a list of available and not already validated scenes for this experiment
  115. this.availableScenes = Object.keys(this.progression[this.experimentName])
  116. .filter(aScene =>
  117. scenesList.includes(aScene) &&
  118. this.progression[this.experimentName] &&
  119. !this.progression[this.experimentName][aScene].done)
  120. // check if necessary to show calibration before new scenes
  121. if (window.sessionStorage.getItem('sin3d-nb-scenes') !== null) {
  122. let nScenes = Number(window.sessionStorage.getItem('sin3d-nb-scenes'))
  123. window.sessionStorage.setItem('sin3d-nb-scenes', nScenes + 1)
  124. if (nScenes % calibrationSceneFreq === 0) {
  125. this.$router.push(`/experiments/${this.experimentName}/${calibrationScene}`)
  126. }
  127. else if (this.hasScenesLeft) {
  128. this.$router.push(`/experiments/${this.experimentName}/${this.getRandomScene}`)
  129. }
  130. }
  131. this.loaded = true
  132. }
  133. }
  134. </script>