1

db714491 · haojie · 77a60532 · db714491 · db714491 · db714491
Commit db714491 authored Apr 25, 2023 by haojie
13 changed files
--- a/src/components/custom/ImgSizeRadioGroup.vue
+++ b/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>

--- a/src/components/custom/SelectModel.vue
+++ b/src/components/custom/SelectModel.vue
 <template>
  <div class="custom-select-model">
-    <CustomInput
+    <div class="select-model-btns">
-      v-model="InputValue"
+      <ResetButton
-      :placeholder="placeholder"
+        class="model-btn"
-      @inputChange="InputChange"
+        v-for="item in options"
-      align="left"
+        :key="item.label"
-      class="select-model-input"
+        >{{ item.label }}</ResetButton
-    >
+      >
-      <template #rightIcon>
+    </div>
-        <span class="right-input-icon">
-          <ChevronDown></ChevronDown>
+    <div class="model-dialog-box">
-        </span>
+      <CustomInput
-      </template>
+        v-model="InputValue"
-    </CustomInput>
+        :placeholder="placeholder"
-    <div class="search-area-box narrow-scrollbar">
+        @inputChange="InputChange"
-      <OnWaitVue
+        align="left"
-        v-if="SearchStatus == 'wait'"
+        class="select-model-input"
-        label="未有图片，快去上方输入模特样式吧"
+      >
-      ></OnWaitVue>
+        <template #rightIcon>
-      <OnLoading
+          <span class="right-input-icon">
-        v-else-if="SearchStatus == 'loading'"
+            <ChevronDown></ChevronDown>
-        label="搜索中"
+          </span>
-      ></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>
+      </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 {
+  .select-model-btns {
-    width: 100% !important;
+    display: flex;
-    height: auto !important;
+    justify-content: space-between;
-    .right-input-icon {
+    .model-btn {
-      padding-right: 12px;
+      width: 48% !important;
+      &:hover {
+        border: 1px solid #00f9f9 !important;
+        background: #181818 !important;
+        color: white;
+      }
    }
  }
-  .search-area-box {
+  .model-dialog-box {
-    width: 100%;
-    height: 389px;
-    background: #181818;
-    border: @main-border;
-    border-radius: 8px;
    margin-top: 6px;
-    display: flex;
+    .select-model-input {
-    justify-content: center;
+      width: 100% !important;
-    align-items: center;
+      height: auto !important;
-    overflow-y: auto;
+      .right-input-icon {
-    .search-result-image {
+        padding-right: 12px;
+      }
+    }
+    .search-area-box {
      width: 100%;
-      height: 100%;
+      height: 389px;
-      padding: 12px;
+      background: #181818;
+      border: @main-border;
+      border-radius: 8px;
+      margin-top: 6px;
      display: flex;
-      justify-content: space-between;
+      justify-content: center;
-      flex-wrap: wrap;
+      align-items: center;
-      row-gap: 12px;
+      overflow-y: auto;
-      i {
+      .search-result-image {
-        width: 150px;
+        width: 100%;
-      }
+        height: 100%;
-      img {
+        padding: 12px;
-        width: 150px;
+        display: flex;
-        height: 150px;
+        justify-content: space-between;
-        border-radius: 8px;
+        flex-wrap: wrap;
-        cursor: pointer;
+        row-gap: 12px;
-        border: 1.5px solid transparent;
+        i {
-        transition: border 0.2s;
+          width: 150px;
-      }
+        }
-      .image-active {
+        img {
-        border: 1.5px solid #00f9f9;
+          width: 150px;
-        transition: border 0.2s;
+          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;
+        }
      }
    }
  }

--- a/src/components/custom/SelectModelDialog.vue
+++ b/src/components/custom/SelectModelDialog.vue
--- a/src/constants/router.ts
+++ b/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({

--- a/src/pages/CreationRecord/components/MappingRecord.vue
+++ b/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;

--- a/src/pages/ModelGeneration/components/GenerateResult/index.less
+++ b/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%;
+        width: 48%;
-        height: 100%;
+        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;

--- a/src/pages/ModelGeneration/components/GenerateResult/index.tsx
+++ b/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
+          {Object.keys(props.SelectImageGroup).length ? (
-            v-model={SplitImage.value}
+            <RadioGroup
-            list={btn_list}
+              v-model={SplitImage.value}
-            class="chose-img-group"
+              list={props.SelectImageGroup.options}
-          ></RadioGroup>
+              class="chose-img-group"
+            ></RadioGroup>
+          ) : (
+            ''
+          )}
          <div class="download-img-box">
-            <CustomResetButton class="reset-next-btn" onClick={Composition}>
+            <CustomResetButton
-              图片合成
+              class="reset-down-load-btn"
-            </CustomResetButton>
+              onClick={SubmitImage}
-            <CustomResetButton class="reset-down-load-btn">
+            >
-              下载
+              提交
            </CustomResetButton>
          </div>
        </div>

--- a/src/pages/ModelGeneration/index.vue
+++ b/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 (
+        if (res.data.image.length == 4) {
-          res.data.image.length == 4 ||
-          res.data.image.length == CurSubmitNum.value
-        ) {
          // 关闭定时器
          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);

--- a/src/pages/ModelTemplate/index.vue
+++ b/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"
+                  ></SelectModelDialog>
-                  ></SelectModel>
+                </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) {

--- a/src/utils/OutsideRequest.ts
+++ b/src/utils/OutsideRequest.ts
+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;
--- a/src/utils/api/Task.ts
+++ b/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: '模特样式',
+        label: '选择模特',
-        value: null,
+        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',
          },

--- a/src/utils/http/http.ts
+++ b/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()}`,
+          }
+        : {},
+    });
+  }
+};
--- a/vite.config.ts
+++ b/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: {