Merge branch 'dev_vite' of http://18.167.251.121:10003/aidlab/aida_front into dev_vite
This commit is contained in:
6
src/assets/icons/CPlay.svg
Normal file
6
src/assets/icons/CPlay.svg
Normal file
@@ -0,0 +1,6 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
|
||||||
|
<path fill="currentColor" fill-opacity="0" stroke="currentColor" stroke-dasharray="40" stroke-dashoffset="40" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 6l10 6l-10 6Z">
|
||||||
|
<animate fill="freeze" attributeName="fill-opacity" begin="0.5s" dur="0.5s" values="0;1" />
|
||||||
|
<animate fill="freeze" attributeName="stroke-dashoffset" dur="0.5s" values="40;0" />
|
||||||
|
</path>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 477 B |
@@ -2,18 +2,29 @@
|
|||||||
<div class="poseTransfer">
|
<div class="poseTransfer">
|
||||||
<div class="configuratioBox" :class="{active:button.left}">
|
<div class="configuratioBox" :class="{active:button.left}">
|
||||||
<div class="configuratio">
|
<div class="configuratio">
|
||||||
<!-- <div class="title">Give pose for them to select</div> -->
|
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<!-- <selectList @selectImgItem="selectImgItem" level1Type="Printboard" type="print"></selectList> -->
|
<div class="video-type-container">
|
||||||
|
<div class="title">Video Type</div>
|
||||||
|
<a-select
|
||||||
|
class="video-type-selection"
|
||||||
|
v-model:value="videoType"
|
||||||
|
size="large"
|
||||||
|
placeholder="Please select"
|
||||||
|
>
|
||||||
|
<a-select-option
|
||||||
|
v-for="item in options"
|
||||||
|
:key="item.vlaue"
|
||||||
|
:value="item.value"
|
||||||
|
>
|
||||||
|
{{ item.label }}
|
||||||
|
</a-select-option>
|
||||||
|
</a-select>
|
||||||
|
</div>
|
||||||
<div class="selectImg">
|
<div class="selectImg">
|
||||||
<div class="head">
|
<div class="head">
|
||||||
<div class="text">{{ $t('poseTransfer.SelectDesign') }}</div>
|
<div class="text">{{ $t('poseTransfer.SelectDesign') }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="imgBox" v-mousewheel>
|
<div class="imgBox" v-mousewheel>
|
||||||
<!-- <div class="item" :class="{active:item.id == selectImg.id}" v-for="item in currentList" @click="selectImgItem(item)">
|
|
||||||
<img :src="item.imgUrl || item.url" alt="">
|
|
||||||
<a-checkbox v-model:checked="item.isChecked"></a-checkbox>
|
|
||||||
</div> -->
|
|
||||||
<div class="item" :class="{active:item.id == selectImg.id}" v-for="item,index in fileList" @click="selectImgItem(item)">
|
<div class="item" :class="{active:item.id == selectImg.id}" v-for="item,index in fileList" @click="selectImgItem(item)">
|
||||||
<div class="" v-if="item.status == 'uploading'" style="display: flex;align-items: center;">
|
<div class="" v-if="item.status == 'uploading'" style="display: flex;align-items: center;">
|
||||||
<a-spin size="large" />
|
<a-spin size="large" />
|
||||||
@@ -54,7 +65,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="poses">
|
<div class="poses" v-show="showMotion">
|
||||||
<div class="head">
|
<div class="head">
|
||||||
<div class="text">{{$t('poseTransfer.Selectpose')}}</div>
|
<div class="text">{{$t('poseTransfer.Selectpose')}}</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -614,7 +625,20 @@ export default defineComponent({
|
|||||||
setGenerate(taskIdList[0].taskId)
|
setGenerate(taskIdList[0].taskId)
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
},{immediate: true })
|
},
|
||||||
|
{immediate: true }
|
||||||
|
)
|
||||||
|
|
||||||
|
const videoType = ref('1')
|
||||||
|
const showMotion = computed(()=> videoType.value === '3' )
|
||||||
|
const options = ref([
|
||||||
|
{ vlaue: '1', label: 'First frame' },
|
||||||
|
{ value: '2', label: 'First and last frames' },
|
||||||
|
{ value: '3', label: 'First frame and skeleton' },
|
||||||
|
|
||||||
|
])
|
||||||
|
|
||||||
|
|
||||||
onBeforeUnmount(()=>{
|
onBeforeUnmount(()=>{
|
||||||
clearInterval(data.generateTime)
|
clearInterval(data.generateTime)
|
||||||
clearInterval(data.remGenerateTime)
|
clearInterval(data.remGenerateTime)
|
||||||
@@ -643,6 +667,9 @@ export default defineComponent({
|
|||||||
setSpeed,
|
setSpeed,
|
||||||
setUploadDelete,
|
setUploadDelete,
|
||||||
locale,
|
locale,
|
||||||
|
videoType,
|
||||||
|
options,
|
||||||
|
showMotion,
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
directives:{
|
directives:{
|
||||||
@@ -746,21 +773,22 @@ export default defineComponent({
|
|||||||
max-height: 45rem;
|
max-height: 45rem;
|
||||||
margin-top: 2rem;
|
margin-top: 2rem;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
|
||||||
flex-wrap: nowrap;
|
flex-wrap: nowrap;
|
||||||
justify-content: space-between;
|
// justify-content: space-between;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
overflow-x: auto;
|
overflow-x: auto;
|
||||||
|
column-gap: 2.4rem;
|
||||||
> .item{
|
> .item{
|
||||||
margin-right: 1rem;
|
// width: calc(100% / 2 - .5rem);
|
||||||
width: calc(100% / 2 - .5rem);
|
// height: 25rem;
|
||||||
|
width: 12.7rem;
|
||||||
|
height: 17.8rem;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
height: 25rem;
|
|
||||||
position: relative;
|
position: relative;
|
||||||
// &.active{
|
// &.active{
|
||||||
// border: 2px solid;
|
// border: 2px solid;
|
||||||
@@ -841,6 +869,7 @@ export default defineComponent({
|
|||||||
> img{
|
> img{
|
||||||
width: 100%;
|
width: 100%;
|
||||||
object-fit: contain;
|
object-fit: contain;
|
||||||
|
border: 1px solid #D0D0D0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
> .upload_item{
|
> .upload_item{
|
||||||
@@ -937,5 +966,39 @@ export default defineComponent({
|
|||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.upload_file_item {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
:deep(.ant-upload-picture-card-wrapper) {
|
||||||
|
width: 100% !important;
|
||||||
|
height: 100%;
|
||||||
|
.ant-upload-list-picture-card {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
.ant-upload-select-picture-card {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
border: 1px solid #000;
|
||||||
|
background: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.video-type-container{
|
||||||
|
margin-bottom: 4rem;
|
||||||
|
.title{
|
||||||
|
font-size: 1.8rem;
|
||||||
|
color: #000;
|
||||||
|
margin-bottom: 1.4rem;
|
||||||
|
}
|
||||||
|
:deep(.ant-select){
|
||||||
|
width: 100%;
|
||||||
|
.ant-select-selector{
|
||||||
|
border: 2px solid #D0D0D0;
|
||||||
|
border-radius: 1rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
@@ -83,7 +83,7 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { ref, useTemplateRef } from 'vue'
|
import { ref, useTemplateRef, onMounted } from 'vue'
|
||||||
import { message } from 'ant-design-vue'
|
import { message } from 'ant-design-vue'
|
||||||
import originalDress from '@/assets/images/product/original_dress.png'
|
import originalDress from '@/assets/images/product/original_dress.png'
|
||||||
import generatedDress from '@/assets/images/product/geneated_dress.png'
|
import generatedDress from '@/assets/images/product/geneated_dress.png'
|
||||||
@@ -94,7 +94,7 @@ import { downloadIamge } from '@/tool/util'
|
|||||||
import { useI18n } from 'vue-i18n'
|
import { useI18n } from 'vue-i18n'
|
||||||
const { t, locale } = useI18n()
|
const { t, locale } = useI18n()
|
||||||
|
|
||||||
defineProps<{
|
const props = defineProps<{
|
||||||
promptList: string[]
|
promptList: string[]
|
||||||
}>()
|
}>()
|
||||||
|
|
||||||
|
|||||||
@@ -166,14 +166,14 @@
|
|||||||
@keydown.enter.prevent="getPrductimg()"
|
@keydown.enter.prevent="getPrductimg()"
|
||||||
v-model="searchName[productimgMenu.value]"
|
v-model="searchName[productimgMenu.value]"
|
||||||
></textarea>
|
></textarea>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="asistant-btn" @click="handleClickAssistBtn">
|
<div class="asistant-btn" @click="handleClickAssistBtn">
|
||||||
<i class="fi fi-bs-magic-wand asistant-icon"></i>
|
<i class="fi fi-bs-magic-wand asistant-icon"></i>
|
||||||
<span>{{ $t('ProductImg.PromptAssit') }}</span>
|
<span>{{ $t('ProductImg.PromptAssit') }}</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
<div class="productImg_content_item_generate_btn input_border">
|
<div class="productImg_content_item_generate_btn input_border">
|
||||||
<div class="generage_btn_box">
|
<div class="generage_btn_box">
|
||||||
<div v-show="!isProductimg" class="generage_btn started_btn">
|
<div v-show="!isProductimg" class="generage_btn started_btn">
|
||||||
@@ -1036,17 +1036,21 @@ export default defineComponent({
|
|||||||
})
|
})
|
||||||
}
|
}
|
||||||
const ifMaximumLength = async () => {
|
const ifMaximumLength = async () => {
|
||||||
await nextTick()
|
// await nextTick()
|
||||||
|
// let textarea = productImgData.textarea
|
||||||
|
// const scrollTop = textarea.scrollTop
|
||||||
|
// // 2. 计算单行高度
|
||||||
|
// const lineHeight = parseInt(getComputedStyle(textarea).lineHeight) || 20 // 默认20px
|
||||||
|
// // 3. 重置高度为1行
|
||||||
|
// textarea.style.height = lineHeight + 'px'
|
||||||
|
// // 4. 计算实际需要的高度
|
||||||
|
// const newHeight = Math.max(lineHeight, textarea.scrollHeight)
|
||||||
|
// textarea.style.height = newHeight + 'px'
|
||||||
|
// textarea.scrollTop = scrollTop
|
||||||
|
// 随着输入内容自动调整高度
|
||||||
let textarea = productImgData.textarea
|
let textarea = productImgData.textarea
|
||||||
const scrollTop = textarea.scrollTop
|
textarea.style.height = 'auto'
|
||||||
// 2. 计算单行高度
|
textarea.style.height = textarea.scrollHeight + 'px'
|
||||||
const lineHeight = parseInt(getComputedStyle(textarea).lineHeight) || 20 // 默认20px
|
|
||||||
// 3. 重置高度为1行
|
|
||||||
textarea.style.height = lineHeight + 'px'
|
|
||||||
// 4. 计算实际需要的高度
|
|
||||||
const newHeight = Math.max(lineHeight, textarea.scrollHeight)
|
|
||||||
textarea.style.height = newHeight + 'px'
|
|
||||||
textarea.scrollTop = scrollTop
|
|
||||||
}
|
}
|
||||||
const openSpeed = () => {
|
const openSpeed = () => {
|
||||||
speed.speedState = !speed.speedState
|
speed.speedState = !speed.speedState
|
||||||
@@ -1099,7 +1103,7 @@ export default defineComponent({
|
|||||||
|
|
||||||
if (!isFromDesignPage) {
|
if (!isFromDesignPage) {
|
||||||
// 如果不是从design来的,返回两个提示词
|
// 如果不是从design来的,返回两个提示词
|
||||||
return [t('poseTransfer.UploadWithModel'), t('poseTransfer.UploadWithoutModel')]
|
return [t('poseTransfer.UploadWithoutModel'), t('poseTransfer.UploadWithModel')]
|
||||||
} else {
|
} else {
|
||||||
// 如果是从design来的
|
// 如果是从design来的
|
||||||
if (isSingleDesign) {
|
if (isSingleDesign) {
|
||||||
@@ -1540,7 +1544,6 @@ export default defineComponent({
|
|||||||
margin-right: 4rem;
|
margin-right: 4rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.upload_file_item {
|
.upload_file_item {
|
||||||
:deep(.ant-upload-picture-card-wrapper) {
|
:deep(.ant-upload-picture-card-wrapper) {
|
||||||
.ant-upload-list-picture-card {
|
.ant-upload-list-picture-card {
|
||||||
@@ -1563,19 +1566,18 @@ export default defineComponent({
|
|||||||
.input_border {
|
.input_border {
|
||||||
padding-bottom: 0;
|
padding-bottom: 0;
|
||||||
.input_box {
|
.input_box {
|
||||||
.input_box_btnBox .textarea {
|
|
||||||
min-height: 12.7rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.input_box_btnBox {
|
.input_box_btnBox {
|
||||||
padding-bottom: 4rem;
|
position: relative;
|
||||||
|
.textarea {
|
||||||
|
min-height: 12.7rem;
|
||||||
|
max-height: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
.asistant-btn {
|
.asistant-btn {
|
||||||
// width: 9rem;
|
|
||||||
padding: 0.45rem 0.6rem;
|
|
||||||
height: 2.3rem;
|
height: 2.3rem;
|
||||||
line-height: 2.3rem;
|
padding: 0 0.6rem;
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
color: #313131;
|
color: #313131;
|
||||||
@@ -1592,6 +1594,9 @@ export default defineComponent({
|
|||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
.asistant-icon {
|
.asistant-icon {
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
|
margin-right: 0;
|
||||||
|
width: initial;
|
||||||
|
// margin-top: -0.2rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -291,7 +291,7 @@ export default {
|
|||||||
jsContent2: 'Please select at least one picture',
|
jsContent2: 'Please select at least one picture',
|
||||||
jsContent3: 'One of your images failed to generate. Please try again.',
|
jsContent3: 'One of your images failed to generate. Please try again.',
|
||||||
Prompt: 'Prompt',
|
Prompt: 'Prompt',
|
||||||
PromptAssit: 'Prompt Assit',
|
PromptAssit: 'Prompt Assist',
|
||||||
AssitSubTitle: 'You can copy following prompt and try:',
|
AssitSubTitle: 'You can copy following prompt and try:',
|
||||||
CopySuccess: 'Copied to clipboard',
|
CopySuccess: 'Copied to clipboard',
|
||||||
CopyFiled: 'Failed to copy'
|
CopyFiled: 'Failed to copy'
|
||||||
|
|||||||
Reference in New Issue
Block a user