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.
607 lines
12 KiB
607 lines
12 KiB
<template>
|
|
<view class="container">
|
|
<uni-forms :modelValue="formData">
|
|
<!-- 提示词 -->
|
|
<view class="head">
|
|
<view>
|
|
<uni-easyinput type="textarea" autoHeight v-model="formData.promptText" placeholder="请输入想生成画的提示词" class="promptInput"></uni-easyinput>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="keywords">
|
|
<view class="head">
|
|
<view class="left">
|
|
<view class="icon">
|
|
<uni-icons type="fire-filled" size="20"></uni-icons>
|
|
</view>
|
|
<view class="title">提示词示例</view>
|
|
</view>
|
|
<view class="right" @click="getRandPrompt">
|
|
<view class="title">换一批</view>
|
|
<view class="icon">
|
|
<uni-icons type="refreshempty" size="20"></uni-icons>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="lists">
|
|
<view @click="onClickPrompt(index)" :class="index == prompt_active?'item active':'item'"
|
|
v-for="(item,index) in promptList" :key="index">{{ item.text }}</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 创作风格 -->
|
|
<view class="style">
|
|
<view class="head">
|
|
<view class="left">
|
|
<view class="icon">
|
|
<uni-icons type="star-filled" size="20"></uni-icons>
|
|
</view>
|
|
<view class="title">选择创作风格</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<scroll-view scroll-x="true" class="styleBox">
|
|
<block v-for="(item,index) in paintStyle" :key="index">
|
|
<view class="styleItem" :class="style_active == item.id?'styleItem styleActive':'styleItem'" @click="onClickStyle(item.id,item.modelName,item.name)">
|
|
<image :src="item.imgUrl" class="styleCover" mode="aspectFill"></image>
|
|
<text class="styleName">{{item.name}}</text>
|
|
</view>
|
|
</block>
|
|
</scroll-view>
|
|
|
|
<!-- 尺寸 -->
|
|
<view class="size">
|
|
<view class="head">
|
|
<view class="left">
|
|
<view class="icon">
|
|
<uni-icons type="map-filled" size="20"></uni-icons>
|
|
</view>
|
|
<view class="title">选择画布大小</view>
|
|
</view>
|
|
</view>
|
|
<view class="lists">
|
|
<view :class="size_active==item.id?'item active':'item'" @click="onClickSize(item.id,item.height,item.width)"
|
|
v-for="(item,index) in size" :key="index">{{ item.text }}</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="bottom">
|
|
<view>
|
|
<button type="default" @click="$noMultipleClicks(startPaint)" class="startPaint">开始创作</button>
|
|
</view>
|
|
</view>
|
|
</uni-forms>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import base64ToImg from '@/utils/base64Utils';
|
|
import {getPaintStyle, getPrompt, textToImg} from '@/api/paint.js';
|
|
export default {
|
|
data() {
|
|
return {
|
|
formData:{
|
|
size_height: undefined,
|
|
size_width: undefined,
|
|
modelName: undefined,
|
|
styleName: undefined,
|
|
promptText: undefined
|
|
},
|
|
noClick:true, //防止重复提交
|
|
promptList: [],
|
|
paintStyle:[],
|
|
size_active: 0,
|
|
prompt_active: 0,
|
|
style_active: 0,
|
|
size: [
|
|
{
|
|
id: 1,
|
|
text: '正方形(512x512)',
|
|
height: 512,
|
|
width: 512
|
|
},
|
|
{
|
|
id: 2,
|
|
text: '宽屏(1280x720)',
|
|
height: 1280,
|
|
width: 720
|
|
},
|
|
{
|
|
id: 3,
|
|
text: '竖屏(720x1280)',
|
|
height: 720,
|
|
width: 1280
|
|
}
|
|
],
|
|
rules:{
|
|
prompt:{
|
|
rules:[{
|
|
required: true,
|
|
errorMessage: '请输入关键词',
|
|
}]
|
|
}
|
|
}
|
|
}
|
|
},
|
|
// onReady() {
|
|
// //设置校验规则
|
|
// this.$refs.form.setRules(this.rules);
|
|
// },
|
|
created() {
|
|
//this.base64ToPath();
|
|
|
|
},
|
|
onLoad() {
|
|
this.getPaintStyleList();
|
|
this.getPrompt();
|
|
},
|
|
|
|
methods: {
|
|
|
|
|
|
startPaint(){
|
|
//判断必填项是否都填了
|
|
let that = this;
|
|
// console.log('创作prompt为：',that.formData.promptText)
|
|
// console.log('创作尺寸高度为：',that.formData.size_height)
|
|
// console.log('创作尺寸宽度为：',that.formData.size_width)
|
|
// console.log('创作风格为：',that.formData.style_model_name)
|
|
|
|
//判断是否登录
|
|
const userInfo = uni.getStorageSync('userInfo');
|
|
console.log('userInfo：',userInfo)
|
|
const token = uni.getStorageSync('token');
|
|
if((Object.keys(userInfo).length!=0) && (Object.keys(token).length!=0)){
|
|
//跳转详情页生成图片
|
|
uni.showModal({
|
|
title: '温馨提示',
|
|
content: '任务创建完成,点击跳转生成内容！',
|
|
success(res) {
|
|
if(res.confirm){
|
|
const data = {
|
|
width: that.formData.size_width,
|
|
height: that.formData.size_height,
|
|
prompt: that.formData.promptText,
|
|
modelName: that.formData.modelName,
|
|
styleName: that.formData.styleName,
|
|
painterId: userInfo.id,
|
|
painterName: userInfo.username
|
|
}
|
|
uni.navigateTo({
|
|
url: './paintDetail?data='+JSON.stringify(data)
|
|
})
|
|
}
|
|
}
|
|
});
|
|
}else{
|
|
uni.showModal({
|
|
title:'提示',
|
|
content:'您还没有登录!点击确定跳转登录界面以体验服务',
|
|
success(res) {
|
|
if (res.confirm) {
|
|
//跳转登录界面
|
|
uni.switchTab({
|
|
url: '/pages/userInfo/userInfo'
|
|
});
|
|
}else if(res.cancel){
|
|
uni.showToast({
|
|
title:'登录获取更好的服务体验哟!',
|
|
duration: 2000
|
|
});
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
},
|
|
//画布大小
|
|
onClickSize(id,height,width) {
|
|
this.size_active = id
|
|
//console.log('所选尺寸id为：',this.size_active)
|
|
this.formData.size_height = height
|
|
//console.log('所选尺寸高度为：',this.formData.size_height)
|
|
this.formData.size_width = width
|
|
//console.log('所选尺寸宽度为：',this.formData.size_width)
|
|
},
|
|
//提示词
|
|
onClickPrompt(index) {
|
|
this.prompt_active = index
|
|
this.formData.promptText = this.promptList[index].text
|
|
//console.log('this.prompt_active',this.prompt_active)
|
|
},
|
|
//创作风格
|
|
onClickStyle(id,modelName,styleName) {
|
|
this.style_active = id
|
|
//console.log('所选风格id为',this.style_active)
|
|
this.formData.modelName = modelName
|
|
this.formData.styleName = styleName
|
|
//console.log('所选风格为',this.formData.style_model_name)
|
|
},
|
|
//随机选取提示词
|
|
getRandPrompt() {
|
|
this.promptList = this.getRandomArrayElements(this.promptList, 10)
|
|
this.promptText = this.promptList[this.prompt_active].text
|
|
},
|
|
|
|
//获取绘画风格
|
|
async getPaintStyleList() {
|
|
const res = await getPaintStyle();
|
|
if (res.data.code === 200) {
|
|
this.paintStyle = res.data.data
|
|
//console.log('this.paintStyle',this.paintStyle)
|
|
}else {
|
|
uni.showModal({
|
|
content: '绘画风格加载失败！',
|
|
showCancel: false
|
|
});
|
|
}
|
|
},
|
|
|
|
//获取提示词列表
|
|
async getPrompt() {
|
|
const res = await getPrompt();
|
|
if (res.data.code === 200) {
|
|
this.promptList = res.data.data
|
|
//console.log('this.promptList',this.promptList)
|
|
}else {
|
|
uni.showModal({
|
|
content: '提示词列表加载失败！',
|
|
showCancel: false
|
|
});
|
|
}
|
|
},
|
|
|
|
|
|
|
|
getRandomArrayElements(arr, count) {
|
|
var shuffled = arr.slice(0),
|
|
i = arr.length,
|
|
min = i - count,
|
|
temp, index;
|
|
while (i-- > min) {
|
|
index = Math.floor((i + 1) * Math.random());
|
|
temp = shuffled[index];
|
|
shuffled[index] = shuffled[i];
|
|
shuffled[i] = temp;
|
|
}
|
|
return shuffled.slice(min);
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.size {
|
|
width: 100%;
|
|
margin: 15rpx auto;
|
|
|
|
.lists {
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
justify-content: space-between;
|
|
|
|
.item {
|
|
background-color: #fff;
|
|
padding: 10rpx 30rpx;
|
|
border-radius: 10rpx;
|
|
color: #666;
|
|
border: 1rpx solid #666;
|
|
margin-bottom: 10rpx;
|
|
font-size: 24rpx;
|
|
}
|
|
|
|
.active {
|
|
color: #060101;
|
|
border: 1rpx solid #F22E38;
|
|
background-color: #FFDEE0; //# FFDEE0
|
|
}
|
|
}
|
|
|
|
.head {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
margin-bottom: 30rpx;
|
|
|
|
.left {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
|
|
.title {
|
|
font-size: 28rpx;
|
|
}
|
|
}
|
|
|
|
.right {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
|
|
.title {
|
|
margin-right: 15rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.play {
|
|
width: 92%;
|
|
margin: 15rpx auto;
|
|
|
|
.lists {
|
|
display: flex;
|
|
flex-direction: row;
|
|
|
|
.item {
|
|
background-color: #FFDEE0;
|
|
padding: 10rpx 30rpx;
|
|
border-radius: 10rpx;
|
|
height: 30rpx;
|
|
color: #F22E38;
|
|
border: 1rpx solid #F22E38;
|
|
margin-bottom: 10rpx;
|
|
font-size: 24rpx;
|
|
}
|
|
}
|
|
|
|
.head {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
margin-bottom: 30rpx;
|
|
|
|
.left {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
|
|
.title {
|
|
font-size: 28rpx;
|
|
}
|
|
}
|
|
|
|
.right {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
|
|
.title {
|
|
margin-right: 15rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.style {
|
|
width: 92%;
|
|
margin: 15rpx auto;
|
|
|
|
.lists {
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
justify-content: space-between;
|
|
|
|
.item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-bottom: 30rpx;
|
|
|
|
.title {
|
|
margin-top: 15rpx;
|
|
}
|
|
|
|
}
|
|
|
|
.active {
|
|
position: relative;
|
|
|
|
color: #F22E38;
|
|
}
|
|
}
|
|
|
|
.head {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
margin-bottom: 30rpx;
|
|
|
|
.left {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
|
|
.title {
|
|
font-size: 28rpx;
|
|
}
|
|
}
|
|
|
|
.right {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
|
|
.title {
|
|
margin-right: 15rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.keywords {
|
|
width: 92%;
|
|
margin: 15rpx auto;
|
|
|
|
.lists {
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
justify-content: space-between;
|
|
|
|
.item {
|
|
background-color: #fff;
|
|
padding: 10rpx 15rpx;
|
|
border-radius: 10rpx;
|
|
color: #666;
|
|
border: 1rpx solid #666;
|
|
max-width: 128rpx;
|
|
margin-bottom: 10rpx;
|
|
font-size: 24rpx;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.active {
|
|
color: #060101;
|
|
border: 1rpx solid #F22E38;
|
|
background-color: #FFDEE0;
|
|
}
|
|
|
|
}
|
|
|
|
.head {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
margin-bottom: 15rpx;
|
|
|
|
.left {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
|
|
.title {
|
|
font-size: 28rpx;
|
|
}
|
|
}
|
|
|
|
.right {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
|
|
.title {
|
|
margin-right: 15rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
page {
|
|
background-color: #fff;
|
|
padding-bottom: 120rpx;
|
|
}
|
|
|
|
.btn-action {
|
|
width: 90%;
|
|
position: fixed;
|
|
bottom: 0rpx;
|
|
left: 4%;
|
|
height: 120rpx;
|
|
|
|
.btn-group {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
|
|
.rand {
|
|
width: 40%;
|
|
|
|
.u-button {
|
|
height: 100rpx;
|
|
}
|
|
}
|
|
|
|
.start {
|
|
width: 55%;
|
|
|
|
.btn-normal {
|
|
height: 100rpx;
|
|
line-height: normal;
|
|
font-size: 28rpx;
|
|
border-radius: 50rpx;
|
|
background-color: #f22e38;
|
|
border: none;
|
|
color: #f4f4f5;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
box-shadow: 3rpx 3rpx 10rpx #dd6161;
|
|
|
|
.title {
|
|
font-weight: bolder;
|
|
}
|
|
|
|
.small {
|
|
font-size: 24rpx;
|
|
}
|
|
}
|
|
|
|
.btn-normal::after {
|
|
border: initial;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.styleBox{
|
|
white-space: nowrap; // 滚动必须加的属性
|
|
width: 700rpx;
|
|
margin-left: 30rpx;
|
|
//padding-right: 20rpx;
|
|
|
|
.styleItem{
|
|
width: 166rpx;
|
|
height: 170rpx;
|
|
margin-right: 20rpx;
|
|
display: inline-flex; // item的外层定义成行内元素才可进行滚动 inline-block / inline-flex 均可
|
|
flex-direction: column;
|
|
align-items: center;
|
|
border: 5rpx solid #fff;
|
|
border-radius: 10rpx;
|
|
overflow: hidden;
|
|
position: relative;
|
|
}
|
|
|
|
.styleActive {
|
|
color: #060101;
|
|
border: 1rpx solid #F22E38;
|
|
background-color: #FFDEE0;
|
|
opacity: 0.9;
|
|
font-weight: 900;
|
|
}
|
|
|
|
.styleCover{
|
|
width: 165rpx;
|
|
height: 165rpx;
|
|
}
|
|
|
|
.styleName{
|
|
font-size: 36rpx;
|
|
color: #000000;
|
|
line-height: 42rpx;
|
|
padding: 0;
|
|
width: 100%;
|
|
text-align: center;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
position: absolute;
|
|
background-color: #FFF;
|
|
opacity: 0.5;
|
|
top: 125rpx;
|
|
}
|
|
}
|
|
|
|
.startPaint{
|
|
background-color: #1A96DB;
|
|
border: 1px solid #F22E38;
|
|
border-radius: 10rpx;
|
|
}
|
|
</style>
|
|
|