Merge branch 'dev_vite' of ssh://18.167.251.121:10002/aidlab/aida_front into dev_vite

src/assets/icons/promptEditProductNo.svg

@@ -0,0 +1,3 @@
+<svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M25 0C20.0555 0 15.222 1.46622 11.1108 4.21326C6.99953 6.9603 3.79521 10.8648 1.90302 15.4329C0.0108322 20.0011 -0.484251 25.0277 0.480379 29.8773C1.44501 34.7268 3.82603 39.1814 7.32234 42.6777C10.8187 46.174 15.2732 48.555 20.1228 49.5196C24.9723 50.4843 29.9989 49.9892 34.5671 48.097C39.1353 46.2048 43.0397 43.0005 45.7867 38.8893C48.5338 34.778 50 29.9445 50 25C50 18.3696 47.3661 12.0107 42.6777 7.32233C37.9893 2.63392 31.6304 0 25 0ZM34.8063 31.8604L31.8604 34.8063L25 27.9458L18.1396 34.8063L15.1938 31.8604L22.0542 25L15.1938 18.1396L18.1396 15.1938L25 22.0542L31.8604 15.1938L34.8063 18.1396L27.9458 25L34.8063 31.8604Z" fill="black"/>
+</svg>

src/assets/icons/promptEditProductYes.svg

@@ -0,0 +1,3 @@
+<svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M25 0C11.2146 0 0 11.2146 0 25C0 38.7854 11.2146 50 25 50C38.7854 50 50 38.7854 50 25C50 11.2146 38.7854 0 25 0ZM24.8104 32.1229C24.0042 32.9292 22.9437 33.3312 21.8792 33.3312C20.8146 33.3312 19.7437 32.925 18.9292 32.1125L13.1333 26.4958L16.0354 23.5021L21.8542 29.1417L33.9562 17.2646L36.8812 20.2333L24.8104 32.1229Z" fill="black"/>
+</svg>

src/component/home/tools/poseTransfer/promptInput.vue

@@ -311,6 +311,20 @@ const handleInputChange = (index: number, event: Event) => {
   }
 }
 
+// 增强中文输入事件处理
+const handleCompositionStart = (index: number, event: CompositionEvent) => {
+  compositionState.isComposing = true
+  compositionState.currentInputIndex = index
+  
+  const target = event.target as HTMLSpanElement
+  // 如果是placeholder状态，开始中文输入时清除placeholder
+  if (target.classList.contains('has-placeholder')) {
+    target.classList.remove('has-placeholder')
+    target.textContent = ''
+    data.content[index].value = ''
+  }
+}
+
 // 添加专门的粘贴事件处理
 const handleInputPaste = (event: ClipboardEvent, index: number) => {
   const target = event.target as HTMLSpanElement
@@ -341,6 +355,11 @@ const handleInputPaste = (event: ClipboardEvent, index: number) => {
 const handleInputKeydown = (event: KeyboardEvent, index: number) => {
   const target = event.target as HTMLSpanElement
 
+  // 如果是中文输入过程中，不处理普通按键
+  if (compositionState.isComposing) {
+    return
+  }
+
   if (event.key === 'Backspace') {
     // 如果显示placeholder，阻止删除
     if (target.classList.contains('has-placeholder')) {
@@ -360,7 +379,7 @@ const handleInputKeydown = (event: KeyboardEvent, index: number) => {
       }
     }
   } else if (event.key.length === 1 && !event.ctrlKey && !event.metaKey) {
-    // 普通字符输入
+    // 普通字符输入 - 只有在非中文输入状态下才处理
     if (target.classList.contains('has-placeholder')) {
       event.preventDefault()
       target.textContent = event.key
@@ -410,24 +429,13 @@ const handlePasteInInput = (index: number, element: HTMLElement) => {
   }
 }
 
-// 添加中文输入事件处理
-const handleCompositionStart = (index: number, event: CompositionEvent) => {
-  compositionState.isComposing = true
-  compositionState.currentInputIndex = index
-
-  const target = event.target as HTMLSpanElement
-  // 如果是placeholder状态，开始中文输入时清除placeholder
-  if (target.classList.contains('has-placeholder')) {
-    target.classList.remove('has-placeholder')
-    target.textContent = ''
-    data.content[index].value = ''
-  }
-}
-
 const handleCompositionEnd = (index: number, event: CompositionEvent) => {
-  compositionState.isComposing = false
-  compositionState.currentInputIndex = -1
-
+  // 延迟设置 isComposing 为 false，确保所有相关事件都处理完毕
+  setTimeout(() => {
+    compositionState.isComposing = false
+    compositionState.currentInputIndex = -1
+  }, 0)
+  
   const target = event.target as HTMLSpanElement
   const newValue = target.textContent || ''
   data.content[index].value = newValue
@@ -435,14 +443,28 @@ const handleCompositionEnd = (index: number, event: CompositionEvent) => {
   // 如果中文输入后内容为空，显示placeholder
   const item = data.content[index]
   if (newValue.trim() === '' && item.placeholder) {
-    target.classList.add('has-placeholder')
-    target.textContent = item.placeholder
+    // 延迟显示 placeholder，确保光标位置正确
+    nextTick(() => {
+      if (target.textContent?.trim() === '') {
+        target.classList.add('has-placeholder')
+        target.textContent = item.placeholder
+      }
+    })
   }
 }
 
+// 添加输入框焦点事件处理，确保中文输入状态正确重置
+const handleInputFocus = (index: number) => {
+  compositionState.currentInputIndex = index
+}
+
+// 修改输入框的 blur 处理
 const handleInputBlur = (index: number) => {
-  compositionState.isComposing = false
-  compositionState.currentInputIndex = -1
+  // 延迟重置状态，避免与 compositionend 冲突
+  setTimeout(() => {
+    compositionState.isComposing = false
+    compositionState.currentInputIndex = -1
+  }, 100)
   updateInputDisplay(index)
 }
 
@@ -544,6 +566,7 @@ defineExpose({
       <span>{{ $t('ProductImg.PromptAssit') }}</span>
     </div>
   </div>
+  <!-- {{ data.content }} -->
   <div
     v-show="assistModel"
     ref="editableArea"
@@ -563,11 +586,12 @@ defineExpose({
         </span>
 
         <span v-else class="input-field" :data-index="index">
-          <span
+		  <span
             class="input-content"
             contenteditable="plaintext-only"
             @input="e => handleInputChange(index, e)"
             @keydown="e => handleInputKeydown(e, index)"
+            @focus="() => handleInputFocus(index)"
             @blur="() => handleInputBlur(index)"
             @paste="e => handleInputPaste(e, index)"
             @compositionstart="e => handleCompositionStart(index, e)"

src/component/home/tools/toProduct/PromptEditProduct.vue

@@ -0,0 +1,467 @@
+<template>
+  <!-- <div ref="modalContainer"></div> -->
+  <a-modal
+    class="promptEditProduct-modal generalModel"
+    v-model:visible="showModal"
+    :footer="null"
+    width="78%"
+    :maskClosable="false"
+    :centered="true"
+    :closable="false"
+    wrapClassName="#app"
+    :keyboard="false"
+  >
+    <div class="generalModel_btn">
+      <div class="generalModel_closeIcon" @click.stop="handleClose()">
+        <svg
+          width="100%"
+          height="100%"
+          viewBox="0 0 46 46"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <circle cx="23" cy="23" r="23" fill="#000" fill-opacity="0.3" />
+          <rect
+            x="32.5063"
+            y="12"
+            width="3"
+            height="29"
+            rx="1.5"
+            transform="rotate(45 32.5063 12)"
+            fill="white"
+          />
+          <rect
+            x="34.6274"
+            y="32.5059"
+            width="3"
+            height="29"
+            rx="1.5"
+            transform="rotate(135 34.6274 32.5059)"
+            fill="white"
+          />
+        </svg>
+      </div>
+    </div>
+    <div class="title-container">
+      <div class="title">{{ $t('ProductImg.PromptAssit') }}</div>
+      <div class="sub-title">{{ status == 0 ? $t('ProductImg.Edited') : $t('ProductImg.AssitSubTitle') }}</div>
+    </div>
+    <div class="example-content" v-show="status == 0" :class="{'active': status !== 0}">
+      <div
+        class="example-wrapper"
+      >
+        <div class="example-item"
+			v-for="item in editedList"
+			:key="item.text">
+			<div class="imgItem">
+				<img :src="item.src" />
+				<div class="icon">
+					<SvgIcon v-if="item.status === 1" name="promptEditProductYes" size="35" />
+					<SvgIcon v-else name="promptEditProductNo" size="35" />
+				</div>
+			</div>
+		  <div class="text">
+				{{ item.text }}
+		  </div>
+        </div>
+      </div>
+    </div>
+	<div class="example-content prompt" v-show="status == 1" :class="{'active': status == 0}">
+      <div
+        class="example-wrapper"
+      >
+	  
+	  	<div class="example-item">
+			<div class="imgItem">
+				<img :src="listImgOriginal" />
+				<div class="info">{{ $t('ProductImg.OriginalImage') }}</div>
+			</div>
+			<SvgIcon
+            class="download-icon"
+            name="CDownload"
+            size="20"
+            color="#8E8E8E"
+            @click.stop="handleDownload(item)"
+          />
+		  <div class="text">
+			{{ $t('ProductImg.EditGarmen') }}:
+		  </div>
+        </div>
+        <div class="example-item"
+			v-for="item in presentList"
+			:key="item.text">
+			<div class="imgItem">
+				<img :src="item.src" />
+				<div class="info">{{ item.info }}</div>
+			</div>
+
+          
+		  <div class="textCopy">
+				{{ item.text }}
+				 <SvgIcon
+				name="CCopy"
+				size="25"
+				color="#BCBCBC"
+				class="copy-icon"
+				@click.stop="handleCopy(item)"
+				/>
+		  </div>
+        </div>
+      </div>
+    </div>
+    <!-- <div class="prompt-list">
+      <div v-for="item in promptList" :key="item" class="prompt-item">
+        <SvgIcon
+          name="CCopy"
+          size="25"
+          color="#BCBCBC"
+          class="copy-icon"
+          @click.stop="handleCopy(item)"
+        />
+        {{ item }}
+      </div>
+    </div> -->
+	<div class="nextOrPrevious">
+		<div class="Previous" @click="setNextOrPrevious('Previous')">
+			<i class="fi fi-bs-angle-left"></i>
+		</div>
+		<div class="next" @click="setNextOrPrevious('next')">
+			<i class="fi fi-bs-angle-right"></i>
+		</div>
+	</div>
+  </a-modal>
+</template>
+
+<script lang="ts" setup>
+import { ref, useTemplateRef, onMounted } from 'vue'
+import { message } from 'ant-design-vue'
+import listImgOriginal from '@/assets/images/editProduct/PromptEditProduct_listOriginal.png'
+import edited1 from '@/assets/images/editProduct/PromptEditProduct_edited1.png'
+import edited2 from '@/assets/images/editProduct/PromptEditProduct_edited2.png'
+import edited3 from '@/assets/images/editProduct/PromptEditProduct_edited3.png'
+
+import listImg1 from '@/assets/images/editProduct/PromptEditProduct_list1.png'
+import listImg2 from '@/assets/images/editProduct/PromptEditProduct_list2.png'
+import listImg3 from '@/assets/images/editProduct/PromptEditProduct_list3.png'
+import listImg4 from '@/assets/images/editProduct/PromptEditProduct_list4.png'
+import listImg5 from '@/assets/images/editProduct/PromptEditProduct_list5.png'
+import listImg6 from '@/assets/images/editProduct/PromptEditProduct_list6.png'
+import listImg7 from '@/assets/images/editProduct/PromptEditProduct_list7.png'
+import listImg8 from '@/assets/images/editProduct/PromptEditProduct_list8.png'
+import listImg9 from '@/assets/images/editProduct/PromptEditProduct_list9.png'
+import listImg10 from '@/assets/images/editProduct/PromptEditProduct_list10.png'
+import listImg11 from '@/assets/images/editProduct/PromptEditProduct_list11.png'
+
+import { downloadIamge } from '@/tool/util'
+import { useI18n } from 'vue-i18n'
+const { t, locale } = useI18n()
+
+const props = defineProps<{
+}>()
+
+const showModal = defineModel<boolean>('showModal', { required: true })
+
+const status = ref(0)
+const promptPage = ref(1)
+const editedList = ref([
+	{
+		src:edited1,
+		text:t('ProductImg.Background'),
+		status:1,
+	},
+	{
+		src:edited2,
+		text:t('ProductImg.BackgroundColor'),
+		status:1,
+	},
+	{
+		src:edited3,
+		text:t('ProductImg.ComplexBackground'),
+		status:0,
+	}
+])
+const promptList = ref([
+	{
+		src:listImg1,
+		info:t('ProductImg.ChangeviewInfo'),
+		text:t('ProductImg.Changeview')
+	},{
+		src:listImg2,
+		info:t('ProductImg.ChangeposeInfo'),
+		text:t('ProductImg.Changepose')
+	},{
+		src:listImg3,
+		info:t('ProductImg.ChangehairInfo'),
+		text:t('ProductImg.Changehair')
+	},{
+		src:listImg4,
+		info:t('ProductImg.ChangeAsianInfo'),
+		text:t('ProductImg.ChangeAsian')
+	},{
+		src:listImg5,
+		info:t('ProductImg.ChangedeminInfo'),
+		text:t('ProductImg.Changedemin')
+	},{
+		src:listImg6,
+		info:t('ProductImg.ChaRemoveInfo'),
+		text:t('ProductImg.ChaRemove')
+	},{
+		src:listImg7,
+		info:t('ProductImg.ChangeSunglassesInfo'),
+		text:t('ProductImg.ChangeSunglasses')
+	},{
+		src:listImg8,
+		info:t('ProductImg.ChangeHeelsInfo'),
+		text:t('ProductImg.ChangeHeels')
+	},{
+		src:listImg9,
+		info:t('ProductImg.ChangeUrbanInfo'),
+		text:t('ProductImg.ChangeUrban')
+	},{
+		src:listImg10,
+		info:t('ProductImg.ChangeBarInfo'),
+		text:t('ProductImg.ChangeBar')
+	},{
+		src:listImg11,
+		info:t('ProductImg.ChangeGardenInfo'),
+		text:t('ProductImg.ChangeGarden')
+	},
+])
+const presentList = ref([
+
+]) as any
+
+const setPresentList = (pageSize = 4)=>{
+    const startIndex = (promptPage.value - 1) * pageSize;
+    const endIndex = startIndex + pageSize;
+    return promptList.value.slice(startIndex, endIndex);
+}
+
+const handleClose = () => {
+  showModal.value = false
+}
+
+const handleDownload = () => {
+  downloadIamge(listImgOriginal)
+}
+
+const handleCopy = async (item: any) => {
+	let value = item.text.replace(/\n/g, ' ');
+  try {
+    if (navigator.clipboard && navigator.clipboard.writeText) {
+      await navigator.clipboard.writeText(value)
+      message.success(t('ProductImg.CopySuccess'))
+    } else {
+      // 降级方案：使用传统的 document.execCommand 方法
+      const textArea = document.createElement('textarea')
+      textArea.value = value
+      textArea.style.position = 'fixed'
+      textArea.style.left = '-999999px'
+      textArea.style.top = '-999999px'
+      document.body.appendChild(textArea)
+      textArea.focus()
+      textArea.select()
+      try {
+        document.execCommand('copy')
+        message.success(t('ProductImg.CopySuccess'))
+      } catch (err) {
+        message.error(t('ProductImg.CopyFailed'))
+      }
+      document.body.removeChild(textArea)
+    }
+  } catch (err) {
+    message.error(t('ProductImg.CopyFailed'))
+  }
+	
+}
+const setNextOrPrevious = (type) => {
+	if(type === 'Previous'){
+		if(promptPage.value == 1){
+			status.value = 0
+		}else{
+			promptPage.value--
+		} 	
+	}else{
+		if(status.value == 0){
+			status.value = 1
+		}else{
+			promptPage.value++
+		} 	
+	}
+	if(promptPage.value > 0)presentList.value = setPresentList()
+}
+</script>
+
+<style lang="less">
+	.promptEditProduct-modal{
+		&.generalModel{
+			.ant-modal-body{
+				padding: 5rem 4.7rem;
+			}
+		}
+	}
+</style>
+
+<style lang="less" scoped>
+.promptEditProduct-modal {
+  .title-container {
+    .title {
+      font-size: 3.5rem;
+      color: #181818;
+    }
+    .sub-title {
+      font-size: 2rem;
+      font-weight: 400;
+      color: #000;
+    }
+  }
+  .nextOrPrevious{
+	position: absolute;
+	bottom: 2.2rem;
+	display: flex;
+	left: 0;
+	width: 100%;
+    justify-content: center;
+	gap: 3.6rem;
+	> div{
+		width: 3.6rem;
+		height: 3.6rem;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		border-radius: 50%;
+		border: 2px solid #E9E9E9;
+		&:hover{
+			background: #000000;
+			color: #fff;
+		}
+		> i{
+			display: flex;
+		}
+	}
+  }
+  .example-content {
+    margin-top: 4.7rem;
+    display: flex;
+    justify-content: space-between;
+    overflow-x: auto;
+	justify-content: center;
+    .example-wrapper {
+      display: flex;
+      gap: 6.4rem;
+      .example-item {
+        // width: 20.3rem;
+        position: relative;
+		> .imgItem{
+			position: relative;
+			height: 44.6rem;
+			border: 1px solid #EEEEEE;
+			img {
+				height: 100%;
+			}
+			> .icon{
+				position: absolute;
+				z-index: 2;
+				bottom: -.3rem;
+				right: -1.4rem;
+				background-color: #fff;
+				border-radius: 50%;
+			}
+			> .info{
+
+			}
+		}
+		> .text{
+			margin-top: 4rem;
+			font-size: 2rem;
+			font-weight: 400;
+			text-align: center;
+		}
+        .download-icon {
+          position: absolute;
+          top: 0.77rem;
+          right: 0.84rem;
+          cursor: pointer;
+		  z-index: 2;
+        }
+      }
+    }
+	&.prompt{
+		margin-top: 2.5rem;
+		.example-wrapper {
+			gap: 4rem;
+			.example-item {
+				> .imgItem{
+					height: 45.7rem;
+					img {
+						height: 100%;
+					}
+					> .info{
+						position: absolute;
+						z-index: 2;
+						line-height: 2.2rem;
+						text-align: center;
+						background-color: #fff;
+						bottom: 0;
+						left: 0;
+						width: 100%;
+						font-size: 1.2rem;
+					}
+				}
+				> .textCopy{
+					margin-top: 3rem;
+					width: 22.8rem;
+					height: 6.6rem;
+					border-radius: 8px;
+					word-break: break-word;
+					white-space: pre-wrap;
+					border: 1px solid #000;
+					display: flex;
+					align-items: center;
+					color: #969696;
+					padding: 0 1.3rem;
+					position: relative;
+					> .copy-icon{
+						position: absolute;
+						right: .7rem;
+						top: .7rem;
+						cursor: pointer;
+					}
+				}
+				.download-icon {
+				}
+			}
+		}
+	}
+  }
+//   .prompt-list {
+//     margin-top: 3.5rem;
+//     display: flex;
+//     column-gap: 6.3rem;
+//     .prompt-item {
+//       height: 12.8rem;
+//       line-height: 2.3rem;
+//       padding: 1.8rem 3.5rem 1.8rem 2rem;
+//       color: #969696;
+//       font-size: 1.9rem;
+//       border: 1px solid #000;
+//       border-radius: 0.8rem;
+//       overflow-y: auto;
+//       position: relative;
+//       // &:first-child{
+//       //   width: 53.6rem;
+//       // }
+//       .copy-icon {
+//         position: absolute;
+//         top: 1.1rem;
+//         right: 1rem;
+//         cursor: pointer;
+//       }
+//     }
+//   }
+}
+.c-svg {
+  width: initial;
+  height: initial;
+}
+</style>

src/component/home/tools/toProduct/index.vue

@@ -320,7 +320,8 @@
       }"
       :isProductimg="true"
     ></scaleImage>
-    <Prompt v-model:showModal="showPromptAssist" :promptList="promptTextList" />
+    <Prompt v-if="productimgMenu.value == 'ToProductImage'" v-model:showModal="showPromptAssist" :promptList="promptTextList" />
+	<PromptEditProduct v-if="productimgMenu.value == 'Relight'" v-model:showModal="showPromptAssist"></PromptEditProduct>
   </div>
 </template>
 
@@ -353,6 +354,7 @@ import scaleImage from '@/component/HomePage/scaleImage.vue'
 import generalMenu from '@/component/HomePage/generalMenu.vue'
 import generalDrag from '@/component/modules/generalDrag.vue'
 import Prompt from './Prompt.vue'
+import PromptEditProduct from './PromptEditProduct.vue'
 import { List } from 'echarts'
 import { useRouter, useRoute } from 'vue-router'
 
@@ -361,7 +363,8 @@ export default defineComponent({
     scaleImage,
     generalMenu,
     generalDrag,
-    Prompt
+    Prompt,
+	PromptEditProduct
   },
   props: {
     setTask: {

src/lang/cn.ts

@@ -283,9 +283,37 @@ export default {
     Prompt: '提示词',
     PromptAssit: '提示词助手',
     AssitSubTitle: '您可以复制并使用以下提示词：',
+    Edited: '以下是编辑后的图像中需要注意的事项。',
     CopySuccess: '已复制到剪贴板',
     CopyFiled: '复制失败',
-    noPrompt: '请输入提示词'
+    noPrompt: '请输入提示词',
+	OriginalImage: '原始图像',
+    EditGarmen: '您可以编辑这件服装',
+	Background: '白色背景',
+	BackgroundColor: '纯色背景',
+	ComplexBackground: '复杂背景',
+	Changeview: '改为背面视角。',
+	ChangeviewInfo: '切换视角',
+	Changepose: '将姿势改为坐下并交叉脚踝\n的姿势。',
+	ChangeposeInfo: '改变姿势',
+	Changehair: '将发型改为金色直发。',
+	ChangehairInfo: '改变发型',
+	ChangeAsian: '将模特改为亚洲人。',
+	ChangeAsianInfo: '改变面部特征',
+	Changedemin: '将黑色西装改为黄色牛仔...',
+	ChangedeminInfo: '替换服装纹理和颜色',
+	ChaRemove: '移除黑色西装。',
+	ChaRemoveInfo: '移除服装',
+	ChangeSunglasses: '为模特添加棕色牛仔帽和\n太阳镜',
+	ChangeSunglassesInfo: '添加配饰',
+	ChangeHeels: '将白色鞋子改为黑色高跟鞋。',
+	ChangeHeelsInfo: '更换鞋子',
+	ChangeUrban: '在城市街道，正午时分。',
+	ChangeUrbanInfo: '替换服装纹理和颜色',
+	ChangeBar: '在酒吧，傍晚时分。',
+	ChangeBarInfo: '移除服装',
+	ChangeGarden: '在花园，清晨时分。',
+	ChangeGardenInfo: '添加配饰',
   },
   poseTransfer: {
     SelectDesign: '产品图',

src/lang/en.ts

@@ -293,9 +293,37 @@ export default {
     Prompt: 'Prompt',
     PromptAssit: 'Prompt Assist',
     AssitSubTitle: 'You can copy following prompt and try:',
+    Edited: 'Here’s what to notice in the edited image.',
     CopySuccess: 'Copied to clipboard',
     CopyFiled: 'Failed to copy',
-    noPrompt: 'Please enter prompt'
+    noPrompt: 'Please enter prompt',
+    OriginalImage: 'Original Image',
+    EditGarmen: 'You can edit the garmen',
+	Background: 'White Background',
+	BackgroundColor: 'Background with Pure Color',
+	ComplexBackground: 'with Complex Background',
+	Changeview: 'Change to back view.',
+	ChangeviewInfo: 'Alter View',
+	Changepose: 'Change the pose to sit\ndown and cross ankle pose.',
+	ChangeposeInfo: 'Change Pose',
+	Changehair: 'Change the haircut to\nblonde straight hair.',
+	ChangehairInfo: 'Change Haircut',
+	ChangeAsian: 'Change model to Asian.',
+	ChangeAsianInfo: 'Change Facial',
+	Changedemin: 'Change the black\nsuit to yellow demin...',
+	ChangedeminInfo: 'Replace Garment Texture and Color',
+	ChaRemove: 'ChaRemove the black suit.',
+	ChaRemoveInfo: 'Remove Garment',
+	ChangeSunglasses: 'Change this model with\nbrown cowboy hat and sunglasses',
+	ChangeSunglassesInfo: 'Add Accessories',
+	ChangeHeels: 'Change white shoes to\nblack high heels.',
+	ChangeHeelsInfo: 'Change Shoes',
+	ChangeUrban: 'In the urban street,\nat noon.',
+	ChangeUrbanInfo: 'Replace Garment Texture and Color',
+	ChangeBar: 'In the bar, in the evening.',
+	ChangeBarInfo: 'Remove Garment',
+	ChangeGarden: 'In the garden, in the morning.',
+	ChangeGardenInfo: 'Add Accessories',
   },
   poseTransfer: {
     SelectDesign: 'Product image',