You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

results.vue 4.8KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193
  1. <template>
  2. <!-- Results -->
  3. <div class="results">
  4. <PageHeader v-if="photo.withCustomMasks">
  5. <h2 class="title">
  6. <span class="icon"><font-awesome-icon icon="mask" /></span>
  7. <span>Masks</span>
  8. </h2>
  9. <h3 class="subtitle">
  10. Manually generate and improve the algorithm masks.
  11. <AppTip :tooltip="{ content: tooltip, placement: 'bottom' }" />
  12. </h3>
  13. <template v-slot:right>
  14. <div class="buttons">
  15. <a class="button button--info" href="https://dreamtime.tech/docs/guide/custom-masks" target="_blank">
  16. <span class="icon"><font-awesome-icon icon="question-circle" /></span>
  17. <span>Guide</span>
  18. </a>
  19. <button
  20. class="button"
  21. @click.prevent="openMasksFolder">
  22. <span class="icon"><font-awesome-icon icon="folder-open" /></span>
  23. <span>Masks</span>
  24. </button>
  25. </div>
  26. </template>
  27. </PageHeader>
  28. <PageHeader v-else>
  29. <h2 class="title">
  30. <span class="icon"><font-awesome-icon icon="heart" /></span>
  31. <span>Results</span>
  32. </h2>
  33. <h3 class="subtitle">
  34. Look at the results of the nudification. Sweet Dreams!
  35. </h3>
  36. <template v-slot:right>
  37. <button v-tooltip="{ content: 'Open the folder where the results are stored.', placement: 'bottom' }"
  38. class="button"
  39. @click.prevent="openFolder">
  40. <span class="icon"><font-awesome-icon icon="folder-open" /></span>
  41. <span>Folder</span>
  42. </button>
  43. </template>
  44. </PageHeader>
  45. <div v-if="photo.isScaleModeCorrected && !photo.pending" class="notification notification--warning">
  46. <span class="icon"><font-awesome-icon icon="exclamation-triangle" /></span>
  47. You have selected the scale method <strong>{{ photo.preferences.advanced.scaleMode }}</strong> but have not used the tool! <strong>Automatic Resize</strong> will be used instead.
  48. </div>
  49. <!-- Custom Masks -->
  50. <section v-if="photo.withCustomMasks" class="results__masks">
  51. <NudifyMaskPhoto :mask="photo.masks.correct" />
  52. <NudifyMaskPhoto :mask="photo.masks.mask" />
  53. <NudifyMaskPhoto :mask="photo.masks.maskref" />
  54. <NudifyMaskPhoto :mask="photo.masks.maskdet" />
  55. <NudifyMaskPhoto :mask="photo.masks.maskfin" />
  56. <NudifyMaskPhoto :mask="photo.masks.nude" />
  57. <NudifyMaskPhoto v-show="photo.scaleMode === 'overlay'" :mask="photo.masks.overlay" />
  58. <NudifyMaskPhoto v-show="photo.useColorPaddingRemoval" :mask="photo.masks.padding" />
  59. <NudifyMaskPhoto v-show="photo.useUpscaling" :mask="photo.masks.scale" />
  60. </section>
  61. <!-- Results -->
  62. <section v-else-if="photo.started" class="results__runs">
  63. <NudifyPhotoRun v-for="(run, index) in validRuns"
  64. :key="index"
  65. :run="run" />
  66. </section>
  67. <!-- Waiting -->
  68. <section v-else-if="photo.waiting" class="results__status">
  69. <font-awesome-icon icon="cloud-sun-rain" class="icon" />
  70. <h2>
  71. Waiting for other dreams to complete...
  72. </h2>
  73. </section>
  74. <!-- Pending -->
  75. <section v-else class="results__status">
  76. <font-awesome-icon icon="cloud-moon" class="icon" />
  77. <h2>
  78. Add me to the queue and let's dream together.
  79. </h2>
  80. </section>
  81. </div>
  82. </template>
  83. <script>
  84. const { shell } = $provider.api
  85. export default {
  86. layout: 'layout--wide',
  87. computed: {
  88. photo() {
  89. return this.$parent.photo
  90. },
  91. /**
  92. *
  93. */
  94. preferences() {
  95. return this.photo.preferences
  96. },
  97. tooltip() {
  98. return `- Generate mask by mask by clicking on the green button.<br>
  99. - The changes you make externally to the masks will be captured in real time.<br>
  100. - As long as you stay on this page the drag and drop functionality will be limited to the masks box.<br><br>
  101. Read the guide to better understand this mode.`
  102. },
  103. validRuns() {
  104. return this.photo.runs.filter((item) => !item.isMaskGeneration)
  105. },
  106. },
  107. mounted() {
  108. if (this.photo.withCustomMasks) {
  109. this.$store.commit('app/setDragDropEnabled', false)
  110. }
  111. },
  112. methods: {
  113. openMasksFolder() {
  114. shell.openPath(this.photo.getFilesPath())
  115. },
  116. openFolder() {
  117. shell.openPath(this.photo.getFolderPath())
  118. },
  119. },
  120. }
  121. </script>
  122. <style lang="scss" scoped>
  123. .results {
  124. @apply h-full;
  125. }
  126. .results__masks {
  127. @apply grid grid-cols-3 gap-6;
  128. @screen sm {
  129. @apply grid-cols-2;
  130. }
  131. }
  132. .results__runs {
  133. @apply grid grid-cols-2 gap-6;
  134. @screen sm {
  135. @apply grid-cols-1;
  136. }
  137. .run {
  138. @media (min-height: 1280px) {
  139. height: 1024px;
  140. }
  141. }
  142. }
  143. .results__status {
  144. @apply flex flex-col justify-center items-center;
  145. height: 300px;
  146. .icon {
  147. @apply text-6xl text-white mb-4;
  148. }
  149. h2 {
  150. @apply text-2xl;
  151. }
  152. }
  153. </style>