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 3.9KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167
  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. Generate and customize the masks to create the nude of your dreams.
  11. <AppTip :tooltip="{ content: 'As long as you stay on this page the drag and drop functionality will be limited to masks.', placement: 'bottom' }" />
  12. </h3>
  13. <template v-slot:right>
  14. <button v-tooltip="{ content: 'Open the folder where the masks are stored.<br><br>The changes you make externally in the files will be reflected in real time here.', placement: 'bottom' }"
  15. class="button"
  16. @click.prevent="openMasksFolder">
  17. <span class="icon"><font-awesome-icon icon="folder-open" /></span>
  18. <span>Masks</span>
  19. </button>
  20. </template>
  21. </PageHeader>
  22. <PageHeader v-else>
  23. <h2 class="title">
  24. <span class="icon"><font-awesome-icon icon="heart" /></span>
  25. <span>Results</span>
  26. </h2>
  27. <h3 class="subtitle">
  28. Look at the results of the nudification. Sweet Dreams!
  29. </h3>
  30. <template v-slot:right>
  31. <button v-tooltip="{ content: 'Open the folder where the results are stored.', placement: 'bottom' }"
  32. class="button"
  33. @click.prevent="openFolder">
  34. <span class="icon"><font-awesome-icon icon="folder-open" /></span>
  35. <span>Folder</span>
  36. </button>
  37. </template>
  38. </PageHeader>
  39. <!-- Custom Masks -->
  40. <section v-if="photo.withCustomMasks" class="results__masks">
  41. <NudifyMaskPhoto :mask="photo.masks.correct" />
  42. <NudifyMaskPhoto :mask="photo.masks.mask" />
  43. <NudifyMaskPhoto :mask="photo.masks.maskref" />
  44. <NudifyMaskPhoto :mask="photo.masks.maskdet" />
  45. <NudifyMaskPhoto :mask="photo.masks.maskfin" />
  46. <NudifyMaskPhoto :mask="photo.masks.nude" />
  47. <NudifyMaskPhoto v-show="photo.scaleMode === 'overlay'" :mask="photo.masks.overlay" />
  48. <NudifyMaskPhoto v-show="photo.useColorPaddingRemoval" :mask="photo.masks.padding" />
  49. <NudifyMaskPhoto v-show="photo.useUpscaling" :mask="photo.masks.scale" />
  50. </section>
  51. <!-- Results -->
  52. <section v-else-if="photo.started" class="results__runs">
  53. <NudifyPhotoRun v-for="(run, index) in photo.runs"
  54. :key="index"
  55. :run="run" />
  56. </section>
  57. <!-- Waiting -->
  58. <section v-else-if="photo.waiting" class="results__status">
  59. <font-awesome-icon icon="cloud-sun-rain" class="icon" />
  60. <h2>
  61. Waiting for other dreams to complete...
  62. </h2>
  63. </section>
  64. <!-- Pending -->
  65. <section v-else class="results__status">
  66. <font-awesome-icon icon="cloud-moon" class="icon" />
  67. <h2>
  68. Add me to the queue and let's dream together.
  69. </h2>
  70. </section>
  71. </div>
  72. </template>
  73. <script>
  74. const { shell } = $provider.api
  75. export default {
  76. layout: 'layout--wide',
  77. computed: {
  78. photo() {
  79. return this.$parent.photo
  80. },
  81. /**
  82. *
  83. */
  84. preferences() {
  85. return this.photo.preferences
  86. },
  87. },
  88. mounted() {
  89. this.$store.commit('app/setDragDropEnabled', false)
  90. },
  91. methods: {
  92. openMasksFolder() {
  93. shell.openPath(this.photo.getFilesPath())
  94. },
  95. openFolder() {
  96. shell.openPath(this.photo.getFolderPath())
  97. },
  98. },
  99. }
  100. </script>
  101. <style lang="scss" scoped>
  102. .results {
  103. @apply h-full;
  104. }
  105. .results__masks {
  106. @apply grid grid-cols-3 gap-6;
  107. @screen sm {
  108. @apply grid-cols-2;
  109. }
  110. }
  111. .results__runs {
  112. @apply grid grid-cols-2 gap-6;
  113. @screen sm {
  114. @apply grid-cols-1;
  115. }
  116. .run {
  117. @media (min-height: 1280px) {
  118. height: 1024px;
  119. }
  120. }
  121. }
  122. .results__status {
  123. @apply flex flex-col justify-center items-center;
  124. height: 300px;
  125. .icon {
  126. @apply text-6xl text-white mb-4;
  127. }
  128. h2 {
  129. @apply text-2xl;
  130. }
  131. }
  132. </style>