index.jsx 26 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815
  1. import { Component } from 'react'
  2. import { View, Text, Button, Image, Swiper, SwiperItem, ScrollView, Input, Textarea, Slider, Block } from '@tarojs/components'
  3. import Taro, { getCurrentInstance } from '@tarojs/taro'
  4. import tool from '../../common/tool'
  5. import { AtFloatLayout } from 'taro-ui'
  6. import "taro-ui/dist/style/components/float-layout.scss";
  7. import * as api from '../../service/index'
  8. import './index.less'
  9. export default class Mine extends Component {
  10. $instance = getCurrentInstance()
  11. state = {
  12. models: [],//模板
  13. imgSize: [],//图片尺寸
  14. sampling: [],//采样方式
  15. draw_infos: [
  16. ],//banner
  17. samplingIndex: 0,//当前选择的采样方式
  18. loraIndex: 0,//当前选择的风格
  19. sizeIndex: 0,//当前选择的尺寸
  20. isOpen: false,
  21. value: '杰作,顶级质量,女孩',//绘画描述
  22. negativeValue: '',//不要的元素
  23. modelIndex: 0,//当前选择的模型
  24. sliderNum: 7,//色彩丰富度
  25. drawNum: 1,//图片数量
  26. mass: 0,//图片质量
  27. tmplIds: [],//订阅列标
  28. tags: [],//标签列表
  29. tagsIndex: 0,//当前选择的主标签
  30. isTags: false,//是否打开标签弹窗
  31. consultImg: '',//参考图
  32. lastTime: 0
  33. }
  34. componentDidShow () {
  35. //接收裁剪图片
  36. let pages = Taro.getCurrentPages();
  37. let currentPage = pages[pages.length - 1]; // 获取当前页面
  38. if (process.env.TARO_ENV == 'weapp') {
  39. if (currentPage.__data__.consultImg) { // 获取值
  40. this.setState({
  41. consultImg: currentPage.__data__.consultImg,
  42. sizeIndex: currentPage.__data__.sizeIndex
  43. })
  44. currentPage.__data__.consultImg = ''
  45. }
  46. } else if (process.env.TARO_ENV == 'tt') {
  47. if (currentPage.data.consultImg) { // 获取值
  48. this.setState({
  49. consultImg: currentPage.data.consultImg,
  50. sizeIndex: currentPage.data.sizeIndex
  51. })
  52. currentPage.data.consultImg = ''
  53. }
  54. }
  55. this.getDrawIndex()
  56. this.getWxTemplate()
  57. this.getTagsDev()
  58. }
  59. componentDidMount () {
  60. }
  61. getTagsDev () {
  62. api.getTagsDev().then(res => {
  63. if (res.code == 200) {
  64. let _tags = res.data
  65. _tags.forEach(item => {
  66. item.tags.forEach(e => {
  67. e['isSelect'] = false
  68. })
  69. })
  70. console.log(_tags, '_tags');
  71. this.setState({
  72. tags: _tags
  73. })
  74. }
  75. })
  76. }
  77. onShareAppMessage = (res) => {
  78. let path = `/pages/index/index?c=${Taro.getStorageSync('user_id')}&s=rightTap`
  79. if (process.env.TARO_ENV == 'tt') {
  80. path = `/pages/index/index?c=channel_name&s=douyinguazai`
  81. }
  82. let shareData = {
  83. title: tool.shareTitle,
  84. path: path,
  85. imageUrl: tool.shareImg
  86. }
  87. return shareData;
  88. }
  89. getMyDraw () {
  90. api.getMyDraw({ page_size: 100 })
  91. }
  92. getDrawIndex () {
  93. api.getDrawIndex().then(res => {
  94. if (res.code == 200) {
  95. this.setState({
  96. models: res.data.models,
  97. imgSize: res.data.img_size,
  98. sampling: res.data.Sampler,
  99. draw_infos: res.data.banner_info
  100. }, () => {
  101. let routers = this.$instance.router.params
  102. console.log(routers, 'rou');
  103. if (routers.task_id) {
  104. Taro.showLoading({
  105. title: '加载中',
  106. })
  107. this.getDrawTaskStatus()
  108. }
  109. })
  110. }
  111. })
  112. }
  113. //获取同款信息
  114. getDrawTaskStatus () {
  115. let routers = this.$instance.router.params
  116. api.getImgDetail({ img_id: routers.task_id }).then(res => {
  117. Taro.hideLoading()
  118. if (res.code == 200) {
  119. let model_id_index = 0
  120. this.state.models.forEach((item, index) => {
  121. if (item.id == res.data.task_info.model_id) {
  122. model_id_index = index
  123. }
  124. });
  125. let style_id_index = 0
  126. this.state.models[model_id_index].lora_infos.forEach((item, index) => {
  127. if (item.id == res.data.task_info.style_id) {
  128. style_id_index = index
  129. }
  130. })
  131. let _sizeIndex = 0
  132. this.state.imgSize.forEach((item, index) => {
  133. if (res.data.task_info.img_size == item.name) {
  134. _sizeIndex = index
  135. }
  136. })
  137. let _samplingIndex = 0
  138. this.state.sampling.forEach((item, index) => {
  139. if (item == res.data.task_info.sampler) {
  140. _samplingIndex = index
  141. }
  142. })
  143. //定时器不要轻易改,避免造成服务器攻击
  144. if (res.code == 200) {
  145. this.setState({
  146. value: res.data.task_info.prompt,
  147. negativeValue: res.data.task_info.negative_prompt,
  148. modelIndex: model_id_index,
  149. loraIndex: style_id_index,
  150. sizeIndex: _sizeIndex,
  151. mass: res.data.task_info.img_type,
  152. samplingIndex: _samplingIndex
  153. })
  154. }
  155. }
  156. })
  157. }
  158. getRadomPrompt () {
  159. api.getRadomPrompt().then(res => {
  160. if (res.code == 200) {
  161. this.setState({
  162. value: res.data.prompt,
  163. negativeValue: res.data.negative_prompt
  164. })
  165. document.getElementById('textarea-num').innerHTML = res.data.prompt.length + "/1000";
  166. document.getElementById('negative_prompt').innerHTML = res.data.negative_prompt.length + "/1000";
  167. }
  168. })
  169. }
  170. deleteDrawText () {
  171. setTimeout(() => {
  172. this.setState({
  173. value: ''
  174. })
  175. document.getElementById('textarea-num').innerHTML = 0 + "/1000";
  176. }, 200)
  177. }
  178. deleteNegativeValue () {
  179. setTimeout(() => {
  180. this.setState({
  181. negativeValue: ''
  182. })
  183. document.getElementById('negative_prompt').innerHTML = 0 + "/1000";
  184. }, 200)
  185. }
  186. onInput (e) {
  187. var num = e.detail.cursor;
  188. document.getElementById('textarea-num').innerHTML = num + "/1000";
  189. }
  190. onBlur (e) {
  191. this.setState({
  192. value: e.detail.value
  193. })
  194. }
  195. onInputNegative (e) {
  196. var num = e.detail.cursor;
  197. document.getElementById('negative_prompt').innerHTML = num + "/1000";
  198. }
  199. onBlurNegative (e) {
  200. this.setState({
  201. negativeValue: e.detail.value
  202. })
  203. }
  204. changeOpen () {
  205. this.setState({
  206. isOpen: !this.state.isOpen
  207. })
  208. }
  209. selectModel (item, index) {
  210. this.setState({
  211. modelIndex: index,
  212. loraIndex: 0
  213. })
  214. }
  215. subNum () {
  216. if (this.state.drawNum <= 1) return
  217. this.setState({
  218. drawNum: this.state.drawNum - 1
  219. })
  220. }
  221. addNum () {
  222. if (this.state.drawNum >= 4) return
  223. this.setState({
  224. drawNum: this.state.drawNum + 1
  225. })
  226. }
  227. changeMeasurement (item, index) {
  228. if (this.state.consultImg.length > 0) {
  229. Taro.showToast({
  230. title: `您已选择图尺寸`,
  231. icon: 'error',
  232. });
  233. return
  234. }
  235. this.setState({
  236. sizeIndex: index
  237. })
  238. }
  239. changeSampling (item, index) {
  240. this.setState({
  241. samplingIndex: index
  242. })
  243. }
  244. changeLora (item, index) {
  245. this.setState({
  246. loraIndex: index
  247. })
  248. }
  249. changeMass (e) {
  250. this.setState({
  251. mass: e
  252. })
  253. }
  254. getWxTemplate () {
  255. api.getWxTemplate().then(res => {
  256. let tmplIds = []
  257. res.data.forEach(item => {
  258. tmplIds.push(item.template_id)
  259. })
  260. this.setState({
  261. tmplIds: tmplIds
  262. })
  263. })
  264. }
  265. //订阅
  266. subscribe (task_id) {
  267. let that = this
  268. console.log('订阅', this.state.tmplIds);
  269. Taro.requestSubscribeMessage({
  270. tmplIds: this.state.tmplIds,
  271. success: function (item) {
  272. console.log('订阅成功');
  273. if (item.errMsg === 'requestSubscribeMessage:ok') {
  274. let keys = Object.keys(item);
  275. let tempids = [];
  276. keys.forEach(element => {
  277. if (item[element] == "accept") {
  278. tempids.push(element)
  279. }
  280. });
  281. console.log(tempids, 'tempidstempids');
  282. let pramas = {
  283. task_id: task_id,
  284. template_ids: tempids
  285. }
  286. api.subscribeTemplate(pramas)
  287. }
  288. Taro.showToast({
  289. title: '已订阅',
  290. icon: 'none',
  291. duration: 2000
  292. })
  293. },
  294. complete: function (res) {
  295. },
  296. fail: function (res) {
  297. }
  298. })
  299. }
  300. //生成图片
  301. generatePictures () {
  302. let that = this
  303. Taro.showLoading({
  304. title: '加载中',
  305. })
  306. console.log('生成图片');
  307. console.log();
  308. // setTimeout(() => {
  309. if (this.state.value.length == 0) {
  310. Taro.showToast({
  311. title: `请填写绘画描述`,
  312. icon: 'error',
  313. });
  314. return
  315. }
  316. let pramas = {
  317. // model_name: this.state.models[this.state.modelIndex].model_name,
  318. // file_name: this.state.models[this.state.modelIndex].lora_infos.length > 0 ? this.state.models[this.state.modelIndex].lora_infos[this.state.loraIndex].file_name : '',
  319. model_id: this.state.models[this.state.modelIndex].id,
  320. style_id: this.state.models[this.state.modelIndex].lora_infos.length > 0 ? this.state.models[this.state.modelIndex].lora_infos[this.state.loraIndex].id : 0,
  321. img_size: this.state.imgSize[this.state.sizeIndex].name,
  322. img_cnt: this.state.drawNum,
  323. cfg_scale: this.state.sliderNum,
  324. sampler: this.state.sampling[this.state.samplingIndex],
  325. prompt: this.state.value,
  326. negative_prompt: this.state.negativeValue,
  327. img_type: this.state.mass,
  328. img_url: this.state.consultImg
  329. }
  330. api.drawTxt2img(pramas).then(res => {
  331. if (res.code == 200) {
  332. Taro.hideLoading()
  333. if (process.env.TARO_ENV == 'weapp') {
  334. this.subscribe(res.data.task_id)
  335. }
  336. Taro.navigateTo({
  337. url: `/pages/darwDetailIndex/index?task_id=${res.data.task_id}`
  338. })
  339. } else {
  340. console.log('11111111111');
  341. Taro.hideLoading()
  342. if (res.code == 4001) {
  343. Taro.showModal({
  344. title: '您的余额不足',
  345. content: '是否前往获取点券?',
  346. success: function (res) {
  347. if (res.confirm) {
  348. Taro.navigateTo({
  349. url: `/pages/earnPoints/index`
  350. })
  351. } else if (res.cancel) {
  352. console.log('用户点击取消')
  353. }
  354. }
  355. })
  356. } if (res.code == 4002) {
  357. Taro.showModal({
  358. title: '提示',
  359. content: res.msg,
  360. success: function (item) {
  361. if (item.confirm) {
  362. if (process.env.TARO_ENV != 'weapp') {
  363. that.playVideoTT(res.data)
  364. } else {
  365. that.playVideo(res.data)
  366. }
  367. } else if (item.cancel) {
  368. console.log('用户点击取消')
  369. }
  370. }
  371. })
  372. } else {
  373. Taro.showToast({ icon: 'none', title: res.msg })
  374. }
  375. }
  376. })
  377. // }, 1000)
  378. }
  379. //抖音激励广告
  380. playVideoTT (item) {
  381. let that = this
  382. let lastTime = this.state.lastTime;
  383. let now = new Date().getTime();
  384. if (now - lastTime < 2000) return
  385. console.log(item, 'itehndodjd');
  386. this.setState({
  387. lastTime: now
  388. })
  389. Taro.showLoading({
  390. title: '加载中...'
  391. })
  392. const videoAd = tt.createRewardedVideoAd({ adUnitId: item.jumpurl });
  393. videoAd.show()
  394. videoAd.onError((err) => {
  395. Taro.hideLoading();
  396. switch (err.errCode) {
  397. case 1004:
  398. // 无合适的广告
  399. break;
  400. default:
  401. // 更多请参考错误码文档
  402. }
  403. });
  404. try {
  405. if (videoAd.closeHandler) {
  406. videoAd.offClose(videoAd.closeHandler);
  407. console.log("videoAd.offClose卸载成功");
  408. }
  409. } catch (e) {
  410. console.log("videoAd.offClose 卸载失败");
  411. console.error(e);
  412. }
  413. videoAd.closeHandler = function (data) {
  414. Taro.hideLoading();
  415. if (data.isEnded) {
  416. api.finishTask({ task_id: item.id }).then(res => {
  417. if (res.code == 200) {
  418. Taro.showToast({
  419. title: '领取点券成功',
  420. icon: 'none',
  421. duration: 2000
  422. })
  423. }
  424. })
  425. } else {
  426. Taro.showToast({
  427. title: '领取点券失败',
  428. icon: 'none',
  429. duration: 2000
  430. })
  431. }
  432. }
  433. // 监听视频播放完成
  434. videoAd.onClose(videoAd.closeHandler);
  435. }
  436. //微信激励广告
  437. playVideo (item) {
  438. let lastTime = this.state.lastTime;
  439. let now = new Date().getTime();
  440. if (now - lastTime < 2000) return
  441. console.log(item, 'itehndodjd');
  442. this.setState({
  443. lastTime: now
  444. })
  445. // 在页面中定义激励视频广告
  446. let adUnitId = item.jumpurl
  447. // 在页面中定义激励视频广告
  448. let videoAd = null
  449. let that = this
  450. console.log(videoAd, 'videoAd');
  451. // 在页面onLoad回调事件中创建激励视频广告实例
  452. if (wx.createRewardedVideoAd) {
  453. videoAd = wx.createRewardedVideoAd({
  454. adUnitId: adUnitId
  455. })
  456. videoAd.onLoad(() => { })
  457. videoAd.onError((err) => { })
  458. try {
  459. if (videoAd.closeHandler) {
  460. videoAd.offClose(videoAd.closeHandler);
  461. console.log("videoAd.offClose卸载成功");
  462. }
  463. } catch (e) {
  464. console.log("videoAd.offClose 卸载失败");
  465. console.error(e);
  466. }
  467. videoAd.closeHandler = function (res) {
  468. // 用户点击了【关闭广告】按钮
  469. if (res && res.isEnded || res === undefined) {
  470. // 正常播放结束,可以下发游戏奖励
  471. api.finishTask({ task_id: item.id }).then(res => {
  472. if (res.code == 200) {
  473. Taro.showToast({
  474. title: '领取点券成功',
  475. icon: 'none',
  476. duration: 2000
  477. })
  478. }
  479. })
  480. } else {
  481. //提前关闭小程序
  482. }
  483. };
  484. videoAd.onClose(videoAd.closeHandler);
  485. }
  486. // 用户触发广告后,显示激励视频广告
  487. if (videoAd) {
  488. videoAd.show().catch(() => {
  489. // 失败重试
  490. videoAd.load()
  491. .then(() => videoAd.show())
  492. .catch(err => {
  493. Taro.showToast({
  494. title: '暂无广告',
  495. icon: 'none',
  496. duration: 2000
  497. })
  498. console.log('激励视频 广告显示失败')
  499. })
  500. })
  501. }
  502. }
  503. toChat (e) {
  504. }
  505. //选择标签
  506. selectedLabel (item, index) {
  507. this.setState({
  508. tagsIndex: index,
  509. isTags: true
  510. })
  511. }
  512. //选择子标签
  513. selectedSubtag (item, index) {
  514. let tags = this.state.tags
  515. tags[this.state.tagsIndex].tags[index].isSelect = !tags[this.state.tagsIndex].tags[index].isSelect
  516. this.setState({
  517. tags: tags
  518. })
  519. }
  520. //确定标签
  521. defineSubtag () {
  522. console.log('defineSubtag');
  523. let nowSelectTag = []
  524. let value = this.state.value
  525. let nowSelectTagObj = ''
  526. this.state.tags[this.state.tagsIndex].tags.forEach(item => {
  527. if (item.isSelect) {
  528. nowSelectTag.push(item.zh_name)
  529. }
  530. })
  531. nowSelectTagObj = nowSelectTag.toString()
  532. let _value = value.length > 0 ? `${value},${nowSelectTagObj}` : nowSelectTagObj
  533. this.setState({
  534. value: _value,
  535. isTags: !this.state.isTags
  536. }, () => {
  537. let _tags = this.state.tags
  538. _tags.forEach(item => {
  539. item.tags.forEach(e => {
  540. e['isSelect'] = false
  541. })
  542. })
  543. this.setState({
  544. tags: _tags
  545. })
  546. })
  547. }
  548. onClose (e) {
  549. console.log('onClose');
  550. this.setState({
  551. isTags: false
  552. })
  553. }
  554. //上传参考图
  555. upLode () {
  556. let that = this
  557. ks.chooseImage({
  558. count: 1, // 默认9
  559. sizeType: ['compressed'], // 可以指定是原图还是压缩图,默认二者都有
  560. sourceType: ['album', 'camera'],
  561. success: function (res) {
  562. console.log(res, 'res');
  563. const file = res.tempFiles[0].tempFilePath
  564. if (res.tempFiles[0].size > 2000000) {
  565. Taro.showToast({ title: '图片大小不能超过2M', icon: 'none' })
  566. return
  567. }
  568. Taro.hideLoading()
  569. Taro.navigateTo({
  570. url: `/pages/upload/index?image=${file}`
  571. })
  572. }
  573. })
  574. }
  575. deleteImg () {
  576. this.setState({
  577. consultImg: ''
  578. })
  579. }
  580. toRealDetail (item, index) {
  581. Taro.navigateTo({
  582. url: item.jpath
  583. })
  584. }
  585. render () {
  586. return (
  587. <View className='mine'>
  588. {
  589. this.state.draw_infos.length > 0 &&
  590. <Swiper
  591. className='banner'
  592. indicatorColor='#121D34'
  593. indicatorActiveColor='#0F84EC'
  594. circular
  595. autoplay
  596. interval='3000'
  597. adjustHeight='first'
  598. indicatorDots
  599. >
  600. {
  601. this.state.draw_infos.map((item, index) => (
  602. <SwiperItem key={index}>
  603. <View className='banner-info'>
  604. <Image className='banner-image' src={item.img} onClick={e => (this.toRealDetail(item, index))}></Image>
  605. </View>
  606. </SwiperItem>
  607. ))
  608. }
  609. </Swiper>
  610. }
  611. <View className='draw-content'>
  612. <View className='draw-title'>绘画描述</View>
  613. <View className='draw-text'>
  614. <View className='draw-content-func'>
  615. <View className='recommend'>
  616. <Image className='recommend-img' src='https://we-spa.oss-cn-shenzhen.aliyuncs.com/total_picture/1678934357612.png'></Image>
  617. <View className='recommend-text' onClick={e => (this.getRadomPrompt())}>使用推荐词</View>
  618. </View>
  619. <View className='delete-draw-text' onClick={e => (this.deleteDrawText())}>清空</View>
  620. </View>
  621. <Textarea
  622. value={this.state.value}
  623. className='draw-taxtarea'
  624. placeholder='| 请输入相关描述,也可以输入关键词~'
  625. showCount
  626. onInput={e => (this.onInput(e))}
  627. onBlur={e => (this.onBlur(e))}
  628. maxlength='1000' />
  629. <View className='textarea-num' id='textarea-num'>{this.state.value.length}/1000</View>
  630. </View>
  631. <View className='draw-title'>选择标签</View>
  632. <ScrollView
  633. className='recharge'
  634. scrollX
  635. >
  636. {
  637. this.state.tags.map((item, index) => (
  638. <View className='recharge-info'
  639. key={index}
  640. onClick={e => (this.selectedLabel(item, index))}>
  641. {item.name}
  642. </View>
  643. ))
  644. }
  645. </ScrollView>
  646. <Block>
  647. {
  648. this.state.isTags &&
  649. <AtFloatLayout isOpened scrollX title={this.state.tags[this.state.tagsIndex].name} onClose={e => (this.onClose(e))}>
  650. <View className='layout-content'>
  651. {
  652. this.state.tags[this.state.tagsIndex].tags.map((item, index) => (
  653. <View className='layout-block'
  654. key={index}
  655. style={item.isSelect ? ' border: 2px solid #0F84EC;background: #0F84EC;color: #FFFFFF;' : 'border: 2px solid rgba(2, 2, 2, 0.75); color: rgba(2, 2, 2, 0.75);background: #FFFFFF;'}
  656. onClick={e => (this.selectedSubtag(item, index))}
  657. >
  658. {item.zh_name}
  659. </View>
  660. ))
  661. }
  662. </View>
  663. <View className='selection'>
  664. <View className='selection-botton' onClick={e => (this.defineSubtag())}>
  665. 确定标签
  666. </View>
  667. </View>
  668. </AtFloatLayout>
  669. }
  670. </Block>
  671. <View className='draw-title'>选择模型</View>
  672. <View className='model-list'>
  673. {
  674. !this.state.isOpen ?
  675. this.state.models.slice(0, 6).map((item, index) => (
  676. <View className='model-info'
  677. style={this.state.modelIndex == index ? `border: 2px solid #0F84EC; background:url(${item.img});background-size: 100% 100%;` : `background:url(${item.img});background-size: 100% 100%;`}
  678. key={index}
  679. onClick={e => (this.selectModel(item, index))}>
  680. <View className='model-info-bottom'>
  681. {item.name}
  682. </View>
  683. </View>
  684. )) :
  685. this.state.models.map((item, index) => (
  686. <View className='model-info'
  687. style={this.state.modelIndex == index ? `border: 2px solid #0F84EC; background:url(${item.img});background-size: 100% 100%;` : `background:url(${item.img});background-size: 100% 100%;`}
  688. key={index}
  689. onClick={e => (this.selectModel(item, index))}>
  690. <View className='model-info-bottom'>
  691. {item.name}
  692. </View>
  693. </View>
  694. ))
  695. }
  696. </View>
  697. {
  698. this.state.models.length > 6 &&
  699. <View className='isOpen'>
  700. <View className='open-content' onClick={e => (this.changeOpen())}>
  701. <View className='open-title'>{!this.state.isOpen ? '展开' : '收起'}</View>
  702. <Image className='open-img' src={!this.state.isOpen ? 'https://we-spa.oss-cn-shenzhen.aliyuncs.com/total_picture/1678935050487.png' : 'https://we-spa.oss-cn-shenzhen.aliyuncs.com/total_picture/1678935114571.png'}></Image>
  703. </View>
  704. </View>
  705. }
  706. {
  707. this.state.models[this.state.modelIndex] &&
  708. this.state.models[this.state.modelIndex].lora_infos.length > 0 &&
  709. <View>
  710. <View className='draw-title'>风格</View>
  711. <View className='model-style-list'>
  712. {
  713. this.state.models[this.state.modelIndex].lora_infos.map((item, index) => (
  714. <View className='model-style-info' key={index} style={this.state.loraIndex == index ? `border: 2px solid #0F84EC;background:url(${item.img});background-size: 100% 100%;` : `background:url(${item.img});background-size: 100% 100%;`} onClick={e => (this.changeLora(item, index))}>
  715. <View className='model-style-info-name'>{item.name}</View>
  716. </View>
  717. ))
  718. }
  719. </View>
  720. </View>
  721. }
  722. {/* <View className='draw-title'>上传参考图</View>
  723. <View className='consult'>
  724. {
  725. this.state.consultImg.length == 0 ?
  726. <View className='consult-content' onClick={e => (this.upLode())}>
  727. +
  728. </View>
  729. :
  730. <View className='consult-model'>
  731. <Image className='consult-img' mode='aspectFit' onClick={e => (this.upLode())} src={this.state.consultImg}></Image>
  732. <Image className='delete' src='http://video-img.fyshark.com/1680147210173guanbi.png' onClick={e => (this.deleteImg())}></Image>
  733. </View>
  734. }
  735. </View> */}
  736. <View className='draw-title'>色彩丰富度</View>
  737. <View className='components-page'>
  738. <Slider style={'margin: 10px 0;'} showValue step={1} max={15} min={1} activeColor='#0F84EC' value={this.state.sliderNum} />
  739. </View>
  740. <View className='draw-title'>图片尺寸</View>
  741. <View className='measurement-list'>
  742. {
  743. this.state.imgSize.map((item, index) => (
  744. <View className='measurement-info' style={this.state.sizeIndex == index ? 'border: 2px solid #0F84EC;' : ''} key={index} onClick={e => (this.changeMeasurement(item, index))}>
  745. <Image className='measurement-img' src={item.img}></Image>
  746. <View className='measurement-title'>{item.name}</View>
  747. </View>
  748. ))
  749. }
  750. </View>
  751. <View className='draw-title'>生成数量</View>
  752. <View className='draw-num'>
  753. <View className='subtract' onClick={e => (this.subNum())}>-</View>
  754. <View className='num'>{this.state.drawNum}</View>
  755. <View className='add' onClick={e => (this.addNum())}>+</View>
  756. </View>
  757. <View className='draw-title'>图片质量</View>
  758. <View className='draw-mass'>
  759. <View className='mass-same' style={this.state.mass == 0 ? 'border: 2px solid #0F84EC;' : ''} onClick={e => (this.changeMass(0))}>普通</View>
  760. <View className='mass-high' style={this.state.mass == 1 ? 'border: 2px solid #0F84EC;' : ''} onClick={e => (this.changeMass(1))}>高清</View>
  761. </View>
  762. <View className='draw-title'>采样方式</View>
  763. <View className='draw-sampling'>
  764. {
  765. this.state.sampling.map((item, index) => (
  766. <View className='sampling-same' style={this.state.samplingIndex == index ? 'border: 2px solid #0F84EC;' : ''} key={index} onClick={e => (this.changeSampling(item, index))}>{item}</View>
  767. ))
  768. }
  769. </View>
  770. <View className='draw-title'>绘画不要的元素</View>
  771. <View className='draw-text'>
  772. <View className='draw-content-func'>
  773. <View className='delete-draw-text' onClick={e => (this.deleteNegativeValue())}>清空</View>
  774. </View>
  775. <Textarea
  776. value={this.state.negativeValue}
  777. className='draw-taxtarea'
  778. placeholder='| 请输入相关描述,也可以输入关键词~'
  779. showCount
  780. onInput={e => (this.onInputNegative(e))}
  781. onBlur={e => (this.onBlurNegative(e))}
  782. maxlength='1000' />
  783. <View className='textarea-num' id='negative_prompt'>{this.state.negativeValue.length}/1000</View>
  784. </View>
  785. </View>
  786. <View className='generate-pictures' onClick={e => (this.generatePictures(e))} >
  787. 生成图片(消耗{this.state.drawNum * 2 * (this.state.mass + 1)}点券)
  788. </View>
  789. </View>
  790. )
  791. }
  792. }