Skip to content

A
ai_web_page_prod
Commit db714491 by haojie
Options

1

parent 77a60532
Showing with 283 additions and 149 deletions
src/components/custom/ImgSizeRadioGroup.vue
......@@ -29,7 +29,7 @@
:class="{ active: item.value == Current_btn }"
@click="onBtnChange(item)"
>
<div class="img-size-text">{{ item.size }}</div>
<div class="img-size-text">{{ item.value }}</div>
<div class="label-text">{{ item.label }}</div>
</div>
</template>
......
src/components/custom/SelectModel.vue
<template>
<div class="custom-select-model">
<CustomInput
v-model="InputValue"
:placeholder="placeholder"
@inputChange="InputChange"
align="left"
class="select-model-input"
>
<template #rightIcon>
<span class="right-input-icon">
<ChevronDown></ChevronDown>
</span>
</template>
</CustomInput>
<div class="search-area-box narrow-scrollbar">
<OnWaitVue
v-if="SearchStatus == 'wait'"
label="未有图片，快去上方输入模特样式吧"
></OnWaitVue>
<OnLoading
v-else-if="SearchStatus == 'loading'"
label="搜索中"
></OnLoading>
<div class="search-result-image" v-else-if="SearchList.list.length">
<img
v-for="item in SearchList.list"
:key="item.image"
:src="item.image"
@click="ChoseModel(item)"
:class="{ 'image-active': item.image == SearchList.image }"
/>
<template
v-for="(item, index) in SearchList.list"
:key="item.image + '1'"
>
<i v-if="index !== SearchList.list.length - 1"></i>
<div class="select-model-btns">
<ResetButton
class="model-btn"
v-for="item in options"
:key="item.label"
>{{ item.label }}</ResetButton
>
</div>
<div class="model-dialog-box">
<CustomInput
v-model="InputValue"
:placeholder="placeholder"
@inputChange="InputChange"
align="left"
class="select-model-input"
>
<template #rightIcon>
<span class="right-input-icon">
<ChevronDown></ChevronDown>
</span>
</template>
</CustomInput>
<div class="search-area-box narrow-scrollbar">
<OnWaitVue
v-if="SearchStatus == 'wait'"
label="未有图片，快去上方输入模特样式吧"
></OnWaitVue>
<OnLoading
v-else-if="SearchStatus == 'loading'"
label="搜索中"
></OnLoading>
<div class="search-result-image" v-else-if="SearchList.list.length">
<img
v-for="item in SearchList.list"
:key="item.image"
:src="item.image"
@click="ChoseModel(item)"
:class="{ 'image-active': item.image == SearchList.image }"
/>
<template
v-for="(item, index) in SearchList.list"
:key="item.image + '1'"
>
<i v-if="index !== SearchList.list.length - 1"></i>
</template>
</div>
<OnWaitVue v-else label="未搜索到模特"></OnWaitVue>
</div>
<OnWaitVue v-else label="未搜索到模特"></OnWaitVue>
</div>
</div>
</template>
......@@ -52,10 +63,12 @@ import { debounce } from '@/utils/tool';
import request from '@/utils/request';
import { show_message } from '@/utils/tdesign_tool';
import { getUserCookie } from '@/utils/api/userApi';
import ResetButton from '@/components/custom/resetbutton.vue';
const props = withDefaults(
defineProps<{
tool_url: string;
placeholder?: string;
options: any[];
}>(),
{
placeholder: '请输入',
......@@ -144,46 +157,61 @@ const InputChange = debounce(Search, 1000);
@import '@/style/variables.less';
.custom-select-model {
width: 100%;
.select-model-input {
width: 100% !important;
height: auto !important;
.right-input-icon {
padding-right: 12px;
.select-model-btns {
display: flex;
justify-content: space-between;
.model-btn {
width: 48% !important;
&:hover {
border: 1px solid #00f9f9 !important;
background: #181818 !important;
color: white;
}
}
}
.search-area-box {
width: 100%;
height: 389px;
background: #181818;
border: @main-border;
border-radius: 8px;
.model-dialog-box {
margin-top: 6px;
display: flex;
justify-content: center;
align-items: center;
overflow-y: auto;
.search-result-image {
.select-model-input {
width: 100% !important;
height: auto !important;
.right-input-icon {
padding-right: 12px;
}
}
.search-area-box {
width: 100%;
height: 100%;
padding: 12px;
height: 389px;
background: #181818;
border: @main-border;
border-radius: 8px;
margin-top: 6px;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
row-gap: 12px;
i {
width: 150px;
}
img {
width: 150px;
height: 150px;
border-radius: 8px;
cursor: pointer;
border: 1.5px solid transparent;
transition: border 0.2s;
}
.image-active {
border: 1.5px solid #00f9f9;
transition: border 0.2s;
justify-content: center;
align-items: center;
overflow-y: auto;
.search-result-image {
width: 100%;
height: 100%;
padding: 12px;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
row-gap: 12px;
i {
width: 150px;
}
img {
width: 150px;
height: 150px;
border-radius: 8px;
cursor: pointer;
border: 1.5px solid transparent;
transition: border 0.2s;
}
.image-active {
border: 1.5px solid #00f9f9;
transition: border 0.2s;
}
}
}
}
......
src/constants/router.ts
......@@ -4,22 +4,36 @@ import { TASKTYPE } from '@/utils/api/Task';
// 跳转产品详情页
export const JumpDetailPage = (item: any) => {
// 本地写死
// item.type = TASKTYPE.MODEL_GENERATION;
item.type = TASKTYPE.MODEL_GENERATION;
// 模板选择
// item.type = TASKTYPE.MODELTEMPLATE;
item.type = TASKTYPE.MODELTEMPLATE;
let path = '';
if (item.type == TASKTYPE.CHAT) {
// if (item.type == TASKTYPE.CHAT) {
// // 文案1
// path = '/CopywritingGeneration';
// } else if (item.type == TASKTYPE.PAINTING) {
// // 绘图2
// path = '/ImageGeneration';
// } else if (item.type == TASKTYPE.MODEL_GENERATION) {
// // 模特生成+换衣 4
// path = '/ModelGeneration';
// } else if (item.type == TASKTYPE.MODELTEMPLATE) {
// // 选择模特模板
// path = '/ModelTemplate';
// }
item.url = 'ModelTemplate';
if (item.url.indexOf('ModelTemplate') !== -1) {
// 选择模特模板
path = '/ModelTemplate';
} else if (item.url.indexOf('ModelGeneration') !== -1) {
// 模特生成
path = '/ModelGeneration';
} else if (item.url.indexOf('CopywritingGeneration') !== -1) {
// 文案1
path = '/CopywritingGeneration';
} else if (item.type == TASKTYPE.PAINTING) {
} else if (item.url.indexOf('ImageGeneration') !== -1) {
// 绘图2
path = '/ImageGeneration';
} else if (item.type == TASKTYPE.MODEL_GENERATION) {
// 模特生成+换衣 4
path = '/ModelGeneration';
} else if (item.type == TASKTYPE.MODELTEMPLATE) {
// 选择模特模板
path = '/ModelTemplate';
}
if (path) {
const url = router.resolve({
......
src/pages/CreationRecord/components/MappingRecord.vue
......@@ -103,7 +103,10 @@ const columns = [
];
// 图片链接
const getImage = (row: any) => {
if (row.response && row.response.url && row.response.url[0]) {
const res = row.response;
// 必须是数组
const is_array = Object.prototype.toString.call(res.url) === '[object Array]';
if (res && res.url && res.url[0] && is_array) {
return row.response.url[0];
}
return imgs.empty;
......
src/pages/ModelGeneration/components/GenerateResult/index.less
......@@ -29,14 +29,14 @@
flex-direction: column;
.result-img-box {
display: flex;
justify-content: center;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
row-gap: 20px;
width: 100%;
.result-img {
width: 80%;
height: 100%;
width: 48%;
height: 330px;
border-radius: 8px;
.img {
width: 100%;
......@@ -51,7 +51,7 @@
justify-content: space-between;
align-items: flex-end;
.reset-down-load-btn {
width: 48% !important;
width: 100% !important;
border: 2px solid #00dddd !important;
font-weight: 600 !important;
font-size: @font-size-16;
......
src/pages/ModelGeneration/components/GenerateResult/index.tsx
......@@ -4,34 +4,18 @@ import CustomResetButton from '@/components/custom/resetbutton.vue';
import OnWait from '@/components/custom/ImgLoadingStatus/OnWait.vue';
import OnLoading from '@/components/custom/ImgLoadingStatus/OnLoading.vue';
import RadioGroup from '@/components/custom/RadioGroup.vue';
import request from '@/utils/request';
export default defineComponent({
props: {
list: Object as any,
SelectImageGroup: Object as any,
status: String,
page_module: Number,
edit_image: String,
},
emits: ['update:page_module', 'update:status', 'update:edit_image'],
emits: ['update:page_module', 'update:status', 'update:edit_image', 'submit'],
setup(props, { emit }) {
// 按钮组
const btn_list = [
{
label: 1,
value: 1,
},
{
label: 2,
value: 2,
},
{
label: 3,
value: 3,
},
{
label: 4,
value: 4,
},
];
const SplitImage = reactive({
// 选择切割第几张图片
value: 1,
......@@ -50,7 +34,6 @@ export default defineComponent({
// 接口回调中提交要修改的图片链接
emit(
'update:edit_image',
// ' https://img1.baidu.com/it/u=1210516829,3619266924&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=750'
new URL('../../../../assets/img/mote2.png', import.meta.url).href
);
resolve('三秒后出现');
......@@ -60,6 +43,10 @@ export default defineComponent({
console.log(e);
}
};
// 提交图片
const SubmitImage = () => {
emit('submit', SplitImage.value);
};
// 图片切割并打开图片合并模块
const Composition = async () => {
// 提交图片切割任务
......@@ -81,7 +68,6 @@ export default defineComponent({
return (
<div class="load-success-box">
<div class="result-img-box narrow-scrollbar">
{/* 结果可选择 */}
{props.list
? props.list.map((item: any) => (
<div class="result-img">
......@@ -90,17 +76,21 @@ export default defineComponent({
))
: ''}
</div>
<RadioGroup
v-model={SplitImage.value}
list={btn_list}
class="chose-img-group"
></RadioGroup>
{Object.keys(props.SelectImageGroup).length ? (
<RadioGroup
v-model={SplitImage.value}
list={props.SelectImageGroup.options}
class="chose-img-group"
></RadioGroup>
) : (
''
)}
<div class="download-img-box">
<CustomResetButton class="reset-next-btn" onClick={Composition}>
图片合成
</CustomResetButton>
<CustomResetButton class="reset-down-load-btn">
下载
<CustomResetButton
class="reset-down-load-btn"
onClick={SubmitImage}
>
提交
</CustomResetButton>
</div>
</div>
......
src/pages/ModelGeneration/index.vue
......@@ -68,7 +68,9 @@
v-model:status="AdminData.status"
v-model:page_module="AdminData.page_module"
v-model:edit_image="AdminData.edit_image"
:list="test_list"
:SelectImageGroup="SelectImageGroup"
:list="AdminData.callback_list"
@submit="SubmitModel"
></GenerateResult>
</div>
</div>
......@@ -91,6 +93,7 @@ import CustomTextArea from '@/components/custom/textarea.vue';
import CustomInput from '@/components/custom/input/index.vue';
import CustomResetButton from '@/components/custom/resetbutton.vue';
import GenerateResult from './components/GenerateResult';
import { useRequest } from '@/utils/http/http';
import {
onBeforeMount,
nextTick,
......@@ -111,35 +114,32 @@ import { Validationrules, ChangePageHeight } from '@/utils/tool';
import { useRoute } from 'vue-router';
import { show_message } from '@/utils/tdesign_tool';
import CompositeImage from './components/CompositeImage.vue';
import request from '@/utils/request';
const loading = ref(false);
const route = useRoute();
// 当前
const id = route.query.id;
// 模特生成测试列表
const test_list = [
'https://img1.baidu.com/it/u=1210516829,3619266924&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=750',
];
// el
const GenerationBox = ref();
// 定时器
let IntervalImg: any = null;
// 本次提交的数量
const CurSubmitNum = ref(0);
// 上传策略状态
const StrategyStatus = ref(false);
// 右侧选择图片按钮组
const SelectImageGroup = ref({});
// 上传策略
const StrategyConfig = ref({});
const AdminData = reactive({
list: [],
// 回调图片列表
callback_list: [],
callback_list: ['http://11', 'http://11', 'http://11', 'http://11'],
/**
* 模特生成状态
* loading-生成中
* success-结束
*/
status: 'success',
status: '',
/**
* 当前显示的模块
* 1--模特生成
......@@ -152,6 +152,8 @@ const AdminData = reactive({
reset_num: 1,
});
const scenario_id = ref();
//当前prompt
const current_prompt = ref('');
// 元素高度和页面高度比较
const getElementHeight = () => {
if (GenerationBox.value) {
......@@ -168,8 +170,6 @@ const getAdminComponent = async () => {
// 取id
scenario_id.value = res.data.id;
let list = res.data.form;
// 测试用的数据
list = FormExample3;
if (list.length) {
// 修改数据
list.forEach((item: any) => {
......@@ -198,6 +198,10 @@ const getAdminComponent = async () => {
if (!it.value) {
it.value = '';
}
if (it.name == 'select_image') {
// 将列表传给右侧模块
SelectImageGroup.value = it;
}
});
});
} else {
......@@ -234,6 +238,24 @@ watch(
}
}
);
// 提交模特
const SubmitModel = async (index: number) => {
const url = SelectImageGroup.value.tool_url;
if (!url) {
show_message('tool_url empty');
}
let params: any = {};
params.prompt = current_prompt.value;
const newIndex = parseInt(index + '') - 1;
params.url = AdminData.callback_list[newIndex];
try {
// 提交
const res: any = await useRequest('post', url, params);
console.log(res);
} catch (e) {
console.log(e);
}
};
// 获取图片回调
const ImageCallback = async (uuid: string) => {
try {
......@@ -247,10 +269,7 @@ const ImageCallback = async (uuid: string) => {
if (res.data.image.length > AdminData.callback_list.length) {
AdminData.callback_list = res.data.image;
}
if (
res.data.image.length == 4 ||
res.data.image.length == CurSubmitNum.value
) {
if (res.data.image.length == 4) {
// 关闭定时器
closeInterval();
}
......@@ -300,10 +319,10 @@ const onSubmit = async (params: any) => {
parameters: params,
});
if (res.code == 0) {
// 记录本次提交的数量
CurSubmitNum.value = params.number;
// 开启定时器
openInterval(res.data.uuid);
// 保存prompt
current_prompt.value = res.data.prompt;
AdminData.status = 'loading';
}
console.log(res);
......
src/pages/ModelTemplate/index.vue
......@@ -48,11 +48,19 @@
></CustomInput>
</template>
<template v-else-if="it.component_type == 'select_model'">
<SelectModel
<!-- -->
<SelectModelDialog
v-model="it.dialog_visible"
:label="it.label"
:dialog_title="it.dialog_title"
:placeholder="it.placeholder"
:tool_url="it.tool_url"
@SubmitModel="SubmitModel"
></SelectModel>
></SelectModelDialog>
</template>
<template v-else-if="it.component_type == 'button'">
<CustomResetButton width="48%">{{
it.label
}}</CustomResetButton>
</template>
<template v-else-if="it.component_type == 'local_upload'">
<LocalUpload @SubmitImg="SubmitImg"></LocalUpload>
......@@ -96,9 +104,9 @@ import CustomSelect from '@/components/custom/Select.vue';
import CustomTextArea from '@/components/custom/textarea.vue';
import CustomInput from '@/components/custom/input/index.vue';
import CustomResetButton from '@/components/custom/resetbutton.vue';
import SelectModel from '@/components/custom/SelectModel.vue';
import CustomGenerateResult from './components/GenerateResult';
import LocalUpload from '@/components/custom/LocalUpload.vue';
import SelectModelDialog from '@/components/custom/SelectModelDialog.vue';
import {
nextTick,
onBeforeMount,
......@@ -173,7 +181,6 @@ const getAdminComponent = async () => {
// 取id
scenario_id.value = res.data.id;
let list = res.data.form;
list = FormExample4;
if (list.length) {
// 修改数据
list.forEach((item: any) => {
......@@ -196,6 +203,8 @@ const getAdminComponent = async () => {
it.component_type = 'select_model';
} else if (it.type == 'local_upload') {
it.component_type = 'local_upload';
} else if (it.type == 'button') {
it.component_type = 'button';
}
// 判断value的值
if (!it.value) {
......
src/utils/OutsideRequest.ts 0 → 100644
import axios from 'axios';
import { MessagePlugin } from 'tdesign-vue-next';
const instance = axios.create({
timeout: 6000000,
// withCredentials: mode == 'development' ? false : true,
withCredentials: false,
});
// 请求头
instance.interceptors.request.use((config: any) => {
return config;
});
instance.interceptors.response.use(
(response) => {
const { data } = response;
if (data.code === 0) {
return data;
} else {
MessagePlugin.error(data.msg || '请求错误');
return Promise.reject(data.msg);
}
},
(err) => {
console.log(err);
if ('response' in err) {
const { message: msg } = err.response.data;
MessagePlugin.error(msg || '请求错误');
return err.response;
}
}
);
export default instance;
src/utils/api/Task.ts
......@@ -207,12 +207,10 @@ export const FormExample2 = [
placeholder: '详细描述产品细节，生成的文案更加完美。',
options: [
{
size: '1600x1600',
label: '亚马逊产品图尺寸',
value: '1600x1600',
},
{
size: '600x180',
label: '亚马逊a+主图',
value: '600x180',
},
......@@ -325,15 +323,17 @@ export const FormExample4 = [
name: '模特样式',
lists: [
{
// 选择模特
// 选择模特弹窗
type: 'select_model',
name: 'model_1',
label: '模特样式',
value: null,
label: '选择模特',
value: '',
span: 24,
tool_url: 'http://ai-gpt.test/api/users/photo/search',
dialog_title: '请选择一个模特',
placeholder:
'输入模特性别、区域、服装类别 “例如：女模特、亚洲、连衣裙”',
tool_url: '',
dialog_visible: false,
rules: [
{
type: 'required',
......@@ -341,6 +341,17 @@ export const FormExample4 = [
},
],
},
{
// 跳转到生成页面
type: 'button',
name: 'model_2',
label: '模特生成',
value: '',
span: 24,
tool_url: '',
dialog_title: '请选择一个模特',
rules: [],
},
],
},
// 图片尺寸
......@@ -357,12 +368,10 @@ export const FormExample4 = [
placeholder: '详细描述产品细节，生成的文案更加完美。',
options: [
{
size: '1600x1600',
label: '亚马逊产品图尺寸',
value: '1600x1600',
},
{
size: '600x180',
label: '亚马逊a+主图',
value: '600x180',
},
......
src/utils/http/http.ts
import { RequestMethodResponse } from 'tdesign-vue-next';
import { v4 } from 'uuid';
import request from '@/utils/otherRequest';
import request2 from '@/utils/OutsideRequest';
import { getUserCookie } from '../api/userApi';
/**
* 可复用的http请求
......@@ -53,3 +55,30 @@ export const UploadImageToAly = (config: any, file: File) => {
}, 1000);
});
};
// 请求外部链接
export const useRequest = (
type: 'get' | 'post',
url: string,
data: any,
needToken: boolean = true
) => {
if (type == 'get') {
return request2.get(url, {
params: data,
headers: needToken
? {
authorization: `Bearer ${getUserCookie()}`,
}
: {},
});
} else if (type == 'post') {
return request2.post(url, data, {
headers: needToken
? {
authorization: `Bearer ${getUserCookie()}`,
}
: {},
});
}
};
vite.config.ts
......@@ -13,7 +13,7 @@ export default defineConfig(({ mode }) => {
const newDate = `${date.getFullYear()}-${
date.getMonth() + 1
}-${date.getDate()}--${date.getHours()}.${date.getMinutes()}`;
const api = 1 ? 'http://45.207.61.22:91' : 'http://ai-gpt.test';
const api = 0 ? 'http://45.207.61.22:91' : 'http://ai-gpt.test';
return {
base: '/',
resolve: {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment