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.

SettingsPreferences.vue 11KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362
  1. <template>
  2. <div class="c-preferences">
  3. <section class="box box--items">
  4. <div class="box__header">
  5. <h2 class="title">
  6. Runs
  7. </h2>
  8. <h3 class="subtitle">
  9. Customize what will happen in each processing.
  10. </h3>
  11. </div>
  12. <div class="box__content">
  13. <box-item
  14. label="Number of runs"
  15. description="How many times will the photo be processed?">
  16. <input v-model="currentValue.body.executions" type="number" min="1" class="input">
  17. </box-item>
  18. <box-item
  19. label="Randomize"
  20. description="Random body preferences will be set at each run.">
  21. <select v-model="currentValue.body.randomize" class="input">
  22. <option :value="true">
  23. Enabled
  24. </option>
  25. <option :value="false">
  26. Disabled
  27. </option>
  28. </select>
  29. </box-item>
  30. <box-item
  31. v-show="!currentValue.body.randomize"
  32. label="Progressive"
  33. :description="`Body preferences will increase their value ${currentValue.body.progressive.rate} at each run.`">
  34. <select v-model="currentValue.body.progressive.enabled" class="input">
  35. <option :value="true">
  36. Enabled
  37. </option>
  38. <option :value="false">
  39. Disabled
  40. </option>
  41. </select>
  42. </box-item>
  43. <box-item
  44. v-show="!currentValue.body.randomize"
  45. label="Progressive rate"
  46. :description="`Current value: ${currentValue.body.progressive.rate}`">
  47. <div class="slider-container">
  48. <input
  49. v-model="currentValue.body.progressive.rate"
  50. type="range"
  51. class="slider"
  52. min="0.1"
  53. max="0.9"
  54. step="0.1">
  55. <span class="min">0.1</span>
  56. <span class="max">0.9</span>
  57. </div>
  58. </box-item>
  59. </div>
  60. </section>
  61. <section class="box box--items">
  62. <div class="box__header">
  63. <h2 class="title">
  64. Body
  65. </h2>
  66. <h3 class="subtitle">
  67. Customize the body of your dream.
  68. </h3>
  69. </div>
  70. <div class="box__content">
  71. <!-- Boobs -->
  72. <box-item :description="`Current value: ${currentValue.body.boobs.size}`" label="Boobs size">
  73. <div class="slider-container">
  74. <input
  75. v-model="currentValue.body.boobs.size"
  76. type="range"
  77. class="slider"
  78. in="0.3"
  79. max="2"
  80. step="0.1">
  81. <span class="min">0.3</span>
  82. <span class="max">2.0</span>
  83. </div>
  84. </box-item>
  85. <box-item
  86. v-show="currentValue.body.randomize"
  87. label="Randomize"
  88. description="Randomize the value in each run."
  89. class="box__item--sub">
  90. <select v-model="currentValue.body.boobs.randomize" class="input">
  91. <option :value="true">
  92. Enabled
  93. </option>
  94. <option :value="false">
  95. Disabled
  96. </option>
  97. </select>
  98. </box-item>
  99. <box-item
  100. v-show="!currentValue.body.randomize && currentValue.body.progressive.enabled"
  101. label="Progressive"
  102. description="Increase the value progressively in each run"
  103. class="box__item--sub">
  104. <select v-model="currentValue.body.boobs.progressive" class="input">
  105. <option :value="true">
  106. Enabled
  107. </option>
  108. <option :value="false">
  109. Disabled
  110. </option>
  111. </select>
  112. </box-item>
  113. <!-- Areola -->
  114. <box-item :description="`Current value: ${currentValue.body.areola.size}`" label="Areola size">
  115. <div class="slider-container">
  116. <input
  117. v-model="currentValue.body.areola.size"
  118. type="range"
  119. class="slider"
  120. in="0.3"
  121. max="2"
  122. step="0.1">
  123. <span class="min">0.3</span>
  124. <span class="max">2.0</span>
  125. </div>
  126. </box-item>
  127. <box-item
  128. v-show="currentValue.body.randomize"
  129. label="Randomize"
  130. description="Randomize the value in each run."
  131. class="box__item--sub">
  132. <select v-model="currentValue.body.areola.randomize" class="input">
  133. <option :value="true">
  134. Enabled
  135. </option>
  136. <option :value="false">
  137. Disabled
  138. </option>
  139. </select>
  140. </box-item>
  141. <box-item
  142. v-show="!currentValue.body.randomize && currentValue.body.progressive.enabled"
  143. label="Progressive"
  144. description="Increase the value progressively in each run"
  145. class="box__item--sub">
  146. <select v-model="currentValue.body.areola.progressive" class="input">
  147. <option :value="true">
  148. Enabled
  149. </option>
  150. <option :value="false">
  151. Disabled
  152. </option>
  153. </select>
  154. </box-item>
  155. <!-- Nipple -->
  156. <box-item :description="`Current value: ${currentValue.body.nipple.size}`" label="Nipple Size">
  157. <div class="slider-container">
  158. <input
  159. v-model="currentValue.body.nipple.size"
  160. type="range"
  161. class="slider"
  162. in="0.3"
  163. max="2"
  164. step="0.1">
  165. <span class="min">0.3</span>
  166. <span class="max">2.0</span>
  167. </div>
  168. </box-item>
  169. <box-item
  170. v-show="currentValue.body.randomize"
  171. label="Randomize"
  172. description="Randomize the value in each run."
  173. class="box__item--sub">
  174. <select v-model="currentValue.body.nipple.randomize" class="input">
  175. <option :value="true">
  176. Enabled
  177. </option>
  178. <option :value="false">
  179. Disabled
  180. </option>
  181. </select>
  182. </box-item>
  183. <box-item
  184. v-show="!currentValue.body.randomize && currentValue.body.progressive.enabled"
  185. label="Progressive"
  186. description="Increase the value progressively in each run"
  187. class="box__item--sub">
  188. <select v-model="currentValue.body.nipple.progressive" class="input">
  189. <option :value="true">
  190. Enabled
  191. </option>
  192. <option :value="false">
  193. Disabled
  194. </option>
  195. </select>
  196. </box-item>
  197. <!-- Vagina -->
  198. <box-item :description="`Current value: ${currentValue.body.vagina.size}`" label="Vagina Size">
  199. <div class="slider-container">
  200. <input
  201. v-model="currentValue.body.vagina.size"
  202. type="range"
  203. class="slider"
  204. in="0.3"
  205. max="1.5"
  206. step="0.1"></input>
  207. <span class="min">0.3</span>
  208. <span class="max">1.5</span>
  209. </div>
  210. </box-item>
  211. <box-item
  212. v-show="currentValue.body.randomize"
  213. label="Randomize"
  214. description="Randomize the value in each run."
  215. class="box__item--sub">
  216. <select v-model="currentValue.body.vagina.randomize" class="input">
  217. <option :value="true">
  218. Enabled
  219. </option>
  220. <option :value="false">
  221. Disabled
  222. </option>
  223. </select>
  224. </box-item>
  225. <box-item
  226. v-show="!currentValue.body.randomize && currentValue.body.progressive.enabled"
  227. label="Progressive"
  228. description="Increase the value progressively in each run"
  229. class="box__item--sub">
  230. <select v-model="currentValue.body.vagina.progressive" class="input">
  231. <option :value="true">
  232. Enabled
  233. </option>
  234. <option :value="false">
  235. Disabled
  236. </option>
  237. </select>
  238. </box-item>
  239. <box-item :description="`Current value: ${currentValue.body.pubicHair.size}`" label="Pubic Hair">
  240. <div class="slider-container">
  241. <input
  242. v-model="currentValue.body.pubicHair.size"
  243. type="range"
  244. class="slider"
  245. in="0"
  246. max="2"
  247. step="0.1"></input>
  248. <span class="min">Disabled</span>
  249. <span class="max">2.0</span>
  250. </div>
  251. </box-item>
  252. <box-item
  253. v-show="currentValue.body.randomize"
  254. label="Randomize"
  255. description="Randomize the value in each run."
  256. class="box__item--sub">
  257. <select v-model="currentValue.body.pubicHair.randomize" class="input">
  258. <option :value="true">
  259. Enabled
  260. </option>
  261. <option :value="false">
  262. Disabled
  263. </option>
  264. </select>
  265. </box-item>
  266. <box-item
  267. v-show="!currentValue.body.randomize && currentValue.body.progressive.enabled"
  268. label="Progressive"
  269. description="Increase the value progressively in each run"
  270. class="box__item--sub">
  271. <select v-model="currentValue.body.pubicHair.progressive" class="input">
  272. <option :value="true">
  273. Enabled
  274. </option>
  275. <option :value="false">
  276. Disabled
  277. </option>
  278. </select>
  279. </box-item>
  280. </div>
  281. </section>
  282. <section class="box box--items">
  283. <div class="box__header">
  284. <h2 class="title">
  285. Advanced
  286. </h2>
  287. <h3 class="subtitle">
  288. Additional processing settings.
  289. </h3>
  290. </div>
  291. <div class="box__content">
  292. <box-item
  293. label="Scale mode"
  294. description="Method that will be used to scale your photo to 512x512.">
  295. <select v-model="currentValue.advanced.scaleMode" class="input">
  296. <option value="none">
  297. None
  298. </option>
  299. <option value="cropjs">
  300. Manual Crop (Not recommended)
  301. </option>
  302. <option value="overlay">
  303. Overlay
  304. </option>
  305. <option value="auto-rescale">
  306. Fixed scale
  307. </option>
  308. <option value="auto-resize">
  309. Scale and pad
  310. </option>
  311. <option value="auto-resize-crop">
  312. Scale and crop
  313. </option>
  314. </select>
  315. </box-item>
  316. <box-item
  317. label="Color transfer"
  318. description="(Experimental) At the end of the transformation, a color transfer algorithm will be applied to try to recover the original colors of the photo.">
  319. <select v-model="currentValue.advanced.useColorTransfer" class="input">
  320. <option :value="true">
  321. Enabled
  322. </option>
  323. <option :value="false">
  324. Disabled
  325. </option>
  326. </select>
  327. </box-item>
  328. </div>
  329. </section>
  330. </div>
  331. </template>
  332. <script>
  333. import { VModel } from '~/mixins'
  334. export default {
  335. mixins: [VModel],
  336. }
  337. </script>