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.

about.vue 9.3KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305
  1. <template>
  2. <div class="about">
  3. <app-title>
  4. <h1 class="title">
  5. 🌌 About {{ $dream.name }}
  6. </h1>
  7. <h3 class="subtitle">
  8. Important information, updates and community links.
  9. </h3>
  10. </app-title>
  11. <div class="about-body">
  12. <div v-if="alert" class="notification is-warning text-lg" v-html="alert" />
  13. <!-- Limited! -->
  14. <section v-if="$platform.isLimited" class="box box-section">
  15. <box-section-item
  16. :description="`It's okay! You can use ${$dream.name} offline, but while you are disconnected we cannot offer you more information about the project, updates or report errors automatically. Connect to the Internet or if you are a developer, set the Nucleus API key and restart the program.`"
  17. label="It seems that you are offline">
  18. </box-section-item>
  19. </section>
  20. <!-- Requirements -->
  21. <section v-if="!$platform.requirements.all" class="box box-section">
  22. <box-section-item :description="`You need to meet all the requirements below to start using ${$dream.name}.`" icon="📜" label="Requirements" />
  23. <box-section-item
  24. label="DreamPower"
  25. description="Deep Learning algorithm that nudify photos.">
  26. <template slot="icon">
  27. <span v-if="$platform.requirements.cli" class="item-icon">✔</span>
  28. <span v-else class="item-icon">❌</span>
  29. </template>
  30. <a href="#dreampower" class="button is-sm">Update</a>
  31. <nuxt-link to="/system/settings/folders" class="button is-sm">Settings</nuxt-link>
  32. </box-section-item>
  33. <box-section-item
  34. label="Checkpoints"
  35. description="Data models required by the algorithm.">
  36. <template slot="icon">
  37. <span v-if="$platform.requirements.checkpoints" class="item-icon">✔</span>
  38. <span v-else class="item-icon">❌</span>
  39. </template>
  40. <a href="#checkpoints" class="button is-sm">Update</a>
  41. </box-section-item>
  42. <box-section-item
  43. label="Media Feature Pack"
  44. description="Multimedia package required by some versions of Windows.">
  45. <template slot="icon">
  46. <span v-if="$platform.requirements.windowsMedia" class="item-icon">✔</span>
  47. <span v-else class="item-icon">❗</span>
  48. </template>
  49. <app-external-link href="https://www.microsoft.com/en-us/software-download/mediafeaturepack" class="button is-sm">Download</app-external-link>
  50. </box-section-item>
  51. </section>
  52. <div class="about-columns">
  53. <!-- DreamTime -->
  54. <section class="box box-section">
  55. <box-section-item
  56. :label="$dream.name"
  57. :description="guiDescription">
  58. <template slot="icon">
  59. <figure class="item-icon">
  60. <img src="~/assets/images/dreamtime.png" />
  61. </figure>
  62. </template>
  63. <button type="button" class="button" @click="openGUI">App</button>
  64. </box-section-item>
  65. <app-update :project-title="$dream.name" project="dreamtime" />
  66. <box-section-item
  67. v-for="(item, index) in guiNavigation"
  68. :key="index"
  69. :label="item.label"
  70. :description="item.description"
  71. :icon="item.icon"
  72. :href="item.href"
  73. :version="item.version" />
  74. </section>
  75. <!-- DreamPower -->
  76. <section class="box box-section">
  77. <box-section-item
  78. :label="cliTitle"
  79. :description="cliDescription">
  80. <template slot="icon">
  81. <figure class="item-icon">
  82. <img src="~/assets/images/dreampower.png" />
  83. </figure>
  84. </template>
  85. <button type="button" class="button" @click="openCLI">App</button>
  86. </box-section-item>
  87. <app-update id="dreampower" project-title="DreamPower" project="dreampower" />
  88. <app-update v-if="$platform.requirements.cli" id="checkpoints" project-title="Checkpoints" project="checkpoints" />
  89. <box-section-item
  90. v-for="(item, index) in cliNavigation"
  91. :key="index"
  92. :label="item.label"
  93. :description="item.description"
  94. :icon="item.icon"
  95. :href="item.href"
  96. :version="item.version" />
  97. </section>
  98. <!-- DreamNet -->
  99. <section class="box box-section">
  100. <box-section-item
  101. label="DreamNet"
  102. description="Community interested in developing the technology introduced by DeepNude.">
  103. <template slot="icon">
  104. <figure class="item-icon">
  105. <img src="~/assets/images/dreamnet.png" />
  106. </figure>
  107. </template>
  108. </box-section-item>
  109. <box-section-item
  110. v-for="(item, index) in dreamNetNavigation"
  111. :key="index"
  112. :label="item.label"
  113. :description="item.description"
  114. :icon="item.icon"
  115. :href="item.href"
  116. :version="item.version" />
  117. </section>
  118. <!-- Contributors -->
  119. <section class="box box-section is-contributors">
  120. <box-section-item
  121. icon="😍"
  122. label="Contributors"
  123. description="People who have helped us in the project either economically or solving problems in the community.">
  124. </box-section-item>
  125. <box-section-item
  126. v-for="(item, index) in contributors"
  127. :key="index"
  128. :label="item.name"
  129. :description="item.description"
  130. :icon="item.icon"
  131. :class="item.role" />
  132. </section>
  133. <!-- Developers -->
  134. <section class="box box-section is-contributors">
  135. <box-section-item
  136. icon="👨‍💻"
  137. label="Developers"
  138. description="Developers and important people in our projects.">
  139. </box-section-item>
  140. <box-section-item
  141. v-for="(item, index) in developers"
  142. :key="index"
  143. :label="item.name"
  144. :description="item.description"
  145. :icon="item.icon"
  146. :class="item.role">
  147. <div class="buttons">
  148. <app-external-link v-for="(link, lindex) in item.links" :key="`link-${lindex}`" :href="link.href" class="button is-sm">{{ link.name }}</app-external-link>
  149. </div>
  150. </box-section-item>
  151. </section>
  152. </div>
  153. </div>
  154. </div>
  155. </template>
  156. <script>
  157. import _ from 'lodash'
  158. export default {
  159. computed: {
  160. guiNavigation() {
  161. return $nucleus.isEnabled ? $nucleus.about.dreamtime.navigation : []
  162. },
  163. guiDescription() {
  164. return $nucleus.isEnabled
  165. ? $nucleus.about.dreamtime.description
  166. : 'Friendly user interface for DreamPower.'
  167. },
  168. cliNavigation() {
  169. return $nucleus.isEnabled ? $nucleus.about.dreampower.navigation : []
  170. },
  171. cliTitle() {
  172. return $nucleus.isEnabled ? $nucleus.about.dreampower.title : 'DreamPower'
  173. },
  174. cliDescription() {
  175. return $nucleus.isEnabled
  176. ? $nucleus.about.dreampower.description
  177. : 'Deep learning algorithm capable of nudify people photos.'
  178. },
  179. dreamNetNavigation() {
  180. return $nucleus.isEnabled ? $nucleus.about.dreamnet.navigation : []
  181. },
  182. contributors() {
  183. return $nucleus.isEnabled ? $nucleus.about.contributors : []
  184. },
  185. developers() {
  186. return $nucleus.isEnabled ? $nucleus.about.developers : []
  187. },
  188. alert() {
  189. return $nucleus.isEnabled ? $nucleus.alerts.about : undefined
  190. }
  191. },
  192. created() {
  193. $nucleus.track('PAGE_ABOUT')
  194. },
  195. methods: {
  196. openGUI() {
  197. $tools.shell.openItem($tools.paths.getGui('..'))
  198. },
  199. openCLI() {
  200. $tools.shell.openItem($tools.paths.getCli())
  201. },
  202. isURL(str) {
  203. if (_.isNil(str)) {
  204. return false
  205. }
  206. const pattern = new RegExp(
  207. '^(https?:\\/\\/)?' + // protocol
  208. '((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|' + // domain name
  209. '((\\d{1,3}\\.){3}\\d{1,3}))' + // OR ip (v4) address
  210. '(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*' + // port and path
  211. '(\\?[;&a-z\\d%_.~+=-]*)?' + // query string
  212. '(\\#[-a-z\\d_]*)?$',
  213. 'i'
  214. ) // fragment locator
  215. return !!pattern.test(str)
  216. }
  217. }
  218. }
  219. </script>
  220. <style lang="scss">
  221. .about {
  222. .about-body {
  223. @apply p-5;
  224. }
  225. .about-columns {
  226. @apply flex flex-wrap;
  227. justify-content: space-between;
  228. .box {
  229. width: calc(1/2*100% - (1 - 1/2)*1rem);
  230. }
  231. }
  232. .is-contributors {
  233. max-height: 400px;
  234. overflow-y: auto;
  235. .is-gold {
  236. .item-label {
  237. @apply font-bold;
  238. color: #d5ad6d; /*if no support for background-clip*/
  239. background: -webkit-linear-gradient(transparent, transparent),
  240. -webkit-linear-gradient(top, rgba(213, 173, 109, 1) 0%, rgba(
  241. 213,
  242. 173,
  243. 109,
  244. 1
  245. )
  246. 26%, rgba(226, 186, 120, 1) 35%, rgba(163, 126, 67, 1) 45%, rgba(
  247. 145,
  248. 112,
  249. 59,
  250. 1
  251. )
  252. 61%, rgba(213, 173, 109, 1) 100%);
  253. background-clip: text;
  254. -webkit-text-fill-color: transparent;
  255. }
  256. }
  257. }
  258. }
  259. </style>