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.

_id.vue 5.0KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220
  1. <template>
  2. <div v-if="photo" class="nudify">
  3. <!-- Menu -->
  4. <portal to="menu">
  5. <!-- Original Preview -->
  6. <section class="nudify__photo">
  7. <NudifyPhotoPreview :photo="photo" />
  8. </section>
  9. <!-- Menu -->
  10. <section class="menu__items">
  11. <MenuItem
  12. label="Photo Preferences"
  13. icon="sliders-h"
  14. :href="`/nudify/${photo.id}/preferences`" />
  15. <MenuItem
  16. v-show="photo.canShowEditor"
  17. label="Editor"
  18. icon="paint-brush"
  19. :href="`/nudify/${photo.id}/editor`" />
  20. <MenuItem
  21. v-show="photo.canShowCropTool"
  22. label="Crop"
  23. icon="crop"
  24. :href="`/nudify/${photo.id}/crop`" />
  25. <MenuItem
  26. v-show="photo.canShowOverlayTool"
  27. label="Overlay"
  28. icon="magic"
  29. :href="`/nudify/${photo.id}/overlay`" />
  30. <MenuItem
  31. v-show="photo.canShowPaddingTool"
  32. label="Color Padding"
  33. icon="compress-arrows-alt"
  34. :href="`/nudify/${photo.id}/padding`" />
  35. <MenuItem
  36. v-show="!photo.withCustomMasks"
  37. label="Results"
  38. icon="heart"
  39. :href="`/nudify/${photo.id}/results`" />
  40. <MenuItem
  41. v-show="photo.withCustomMasks"
  42. label="Masks"
  43. icon="mask"
  44. :href="`/nudify/${photo.id}/results`" />
  45. </section>
  46. <!-- Buttons -->
  47. <section class="nudify__buttons">
  48. <!-- Nudify -->
  49. <button
  50. v-if="!photo.running && !photo.waiting && !photo.withCustomMasks"
  51. id="nudify-nudify"
  52. key="nudify"
  53. v-tooltip="{content: 'Add the photo to the queue.', placement: 'right'}"
  54. class="button button--lg button--success"
  55. @click.prevent="add">
  56. <span class="icon"><font-awesome-icon icon="play" /></span>
  57. <span>Nudify</span>
  58. </button>
  59. <!-- Save all -->
  60. <button
  61. v-if="photo.finished && photo.runsCount > 1"
  62. key="save-all"
  63. v-tooltip="{content: 'Save all the nudes.', placement: 'right'}"
  64. class="button button--info"
  65. @click.prevent="saveAll">
  66. <span class="icon"><font-awesome-icon icon="save" /></span>
  67. <span>Save all</span>
  68. </button>
  69. <!-- Remove from queue-->
  70. <button
  71. v-if="photo.waiting"
  72. key="cancel"
  73. class="button button--danger"
  74. @click.prevent="cancel">
  75. <span>Cancel</span>
  76. </button>
  77. <!-- Stop -->
  78. <button
  79. v-if="photo.running"
  80. key="stop"
  81. class="button button--danger"
  82. @click.prevent="stop">
  83. <span class="icon"><font-awesome-icon icon="stop" /></span>
  84. <span>Stop</span>
  85. </button>
  86. <!-- Forget -->
  87. <button
  88. id="nudify-forget"
  89. v-tooltip="{
  90. content: 'Free memory by removing the photo from the application. (Nudified photos will not be deleted)',
  91. placement: 'right',
  92. boundary: 'viewport'}"
  93. class="button"
  94. @click.prevent="forget">
  95. <span class="icon"><font-awesome-icon icon="trash-alt" /></span>
  96. <span>Forget</span>
  97. </button>
  98. </section>
  99. </portal>
  100. <nuxt-child keep-alive />
  101. </div>
  102. </template>
  103. <script>
  104. import { isNil } from 'lodash'
  105. import { Nudify } from '~/modules/nudify'
  106. import { tutorial } from '~/modules'
  107. export default {
  108. middleware: ({ route, redirect }) => {
  109. const { params, fullPath } = route
  110. if (isNil(params.id)) {
  111. redirect('/')
  112. return
  113. }
  114. const photo = Nudify.getPhotoById(params.id)
  115. if (isNil(photo)) {
  116. redirect('/')
  117. return
  118. }
  119. if (fullPath === `/nudify/${params.id}`) {
  120. if (photo.running || photo.finished) {
  121. redirect(`/nudify/${params.id}/results`)
  122. } else {
  123. redirect(`/nudify/${params.id}/preferences`)
  124. }
  125. }
  126. },
  127. data: () => ({
  128. photo: null,
  129. }),
  130. created() {
  131. const { params } = this.$route
  132. this.photo = Nudify.getPhotoById(params.id)
  133. },
  134. mounted() {
  135. tutorial.photo()
  136. },
  137. methods: {
  138. add() {
  139. this.photo.add()
  140. this.$router.push(`/nudify/${this.photo.id}/results`)
  141. },
  142. cancel() {
  143. this.photo.cancel()
  144. },
  145. stop() {
  146. this.photo.cancel()
  147. },
  148. saveAll() {
  149. this.photo.saveAll()
  150. },
  151. openFolder() {
  152. this.photo.openFolder()
  153. },
  154. forget() {
  155. this.$router.push('/')
  156. this.photo.forget()
  157. },
  158. },
  159. }
  160. </script>
  161. <style lang="scss" scoped>
  162. .nudify {
  163. @apply relative h-full;
  164. }
  165. .nudify__photo {
  166. @apply relative rounded;
  167. background-image: url('~@/assets/images/repeated-square-dark.png');
  168. will-change: transform;
  169. height: 250px;
  170. }
  171. .nudify__photo__preview {
  172. @apply absolute top-0 bottom-0 left-0 right-0 z-10;
  173. @apply bg-contain bg-no-repeat bg-center;
  174. }
  175. .nudify__photo__badge {
  176. @apply absolute z-20;
  177. top: 5px;
  178. right: 5px;
  179. width: 40px;
  180. height: 40px;
  181. }
  182. .nudify__buttons {
  183. .button {
  184. @apply w-full mb-3;
  185. }
  186. }
  187. </style>