dianshang-qianduan/src/views/digitalMarketTech/AIGCLargeModel/components/AIPicture.vue

<template>
  <div class="app-containere">
    <div class="material">
      <div class="title">
        <img src="@/assets/images/caseIcon.png" alt="" />
        <span>任务素材</span>
      </div>
      <div style="font-size: 15px; line-height: 30px; margin-top: 10px; margin-bottom: 10px">
        根据文字描述要求，利用推荐的AI工具，进行图片修复美化。
        <div class="remand">
          <span>1、AI消除：去除图片中的水印和文字，只保留鞋子。</span>
          <div class="download" @click="downloadData('AI消除')">素材1</div>
        </div>
        <div class="remand">
          <span>2、AI抠图：将人物照中的背景去除，抠出人物。</span>
          <div class="download" @click="downloadData('AI抠图')">素材2</div>
        </div>
        <div class="remand">
          <span>3、AI扩图：将金鱼图片进行尺寸扩展，或者周边扩展。</span>
          <div class="download" @click="downloadData('AI扩图')">素材3</div>
        </div>
      </div>
    </div>
    <div class="material">
      <div class="title">
        <img src="@/assets/images/步骤.png" alt="" />
        <span>任务提交</span>
        <span style="font-size: 13px">(请按照任务素材顺序依次提交)</span>
      </div>
      <div style="margin-top: 10px; width: 200px">
        <el-upload ref="uploadRef" class="upload-demo" :file-list="previewFile1" :auto-upload="false" :on-change="handleChange1" :show-file-list="true" :limit="1">
          <el-button type="primary" class="uploadBtn">+任务提交1</el-button>
        </el-upload>
      </div>
      <div style="margin-top: 10px; width: 200px">
        <el-upload ref="uploadRef" class="upload-demo" :file-list="previewFile2" :auto-upload="false" :on-change="handleChange2" :show-file-list="true" :limit="1">
          <el-button type="primary" class="uploadBtn">+任务提交2</el-button>
        </el-upload>
      </div>
      <div style="margin-top: 10px; width: 200px">
        <el-upload ref="uploadRef" class="upload-demo" :file-list="previewFile3" :auto-upload="false" :on-change="handleChange3" :show-file-list="true" :limit="1">
          <el-button type="primary" class="uploadBtn">+任务提交3</el-button>
        </el-upload>
      </div>
    </div>
    <div class="material" style="margin-top: 20px">
      <div class="title">
        <img src="@/assets/icons/svg/sxbg.svg" style="width: 30px; height: 30px" />
        <span>大模型参考工具</span>
      </div>
      <div style="display: flex">
        <div class="case">
          <div class="bgItem">
            <img src="@/assets/images/aiPic.png" alt="" />
          </div>
          <div class="detail">
            <div class="title">美图AI文生图</div>
            <el-tooltip
              popper-class="tooltip"
              effect="light"
              content="美图A|文生图原是由美图创意平台推出的A|图像创作工具，现已集成到美图设计室中，用户只需输入文字创意描述，并选择自己喜欢的模型风格。
点击立即生成即可获得由美图AI创作的一幅画作。
"
              placement="top-start"
            >
              <div style="line-height: 24px; font-size: 13px">美图A|文生图原是由美图创意平台推出的A|图像创作工具，现已集成到美图设计室中，用户只需输入文字创意描述，并选择自己喜欢的模型风格。 点击立即生成即可获得由美图AI创作的一幅画作。</div>
            </el-tooltip>
            <a class="btn" href="https://www.designkit.com/" target="_blank">
              <span>访问官网</span>
            </a>
          </div>
        </div>
        <div class="case">
          <div class="bgItem">
            <img src="@/assets/images/21bc66fba04ca35e7640b1cb1d5d7e4.png" alt="" />
          </div>
          <div class="detail">
            <div class="title">堆友AI</div>
            <el-tooltip popper-class="tooltip" effect="light" content="堆友AI是由阿里巴巴设计师团队原创的一个免费可商用的3D头像、3D场景、3D元素等资源网站和在线编辑神器。用户可以通过简洁模式或自由模式进行AI绘画创作，选择不同的模型效果生成设计作品，并且可以下载、分享图片、进行二次创作抠图和高分辨率处理。" placement="top-start">
              <div style="line-height: 24px; font-size: 13px">堆友AI是由阿里巴巴设计师团队原创的一个免费可商用的3D头像、3D场景、3D元素等资源网站和在线编辑神器。用户可以通过简洁模式或自由模式进行AI绘画创作，选择不同的模型效果生成设计...</div>
            </el-tooltip>
            <a class="btn" href="https://d.design/toolbox" target="_blank">
              <span>访问官网</span>
            </a>
          </div>
        </div>
        <div class="case">
          <div class="bgItem">
            <img src="@/assets/images/gaodingAi.png" alt="" />
          </div>
          <div class="detail">
            <!-- <div class="icon">
              <div class="iconItem">AI工具</div>
              <span>＞</span>
              <div class="iconItem">AI写作对话</div>
            </div> -->
            <div class="title">稿定AI</div>
            <el-tooltip popper-class="tooltip" effect="light" content="稿定AI是稿定设计提供的一款集合了多种AI设计工具的平台，旨在帮助用户快速实现创意设计。它包括AI绘图、AI文案、AI商品图设计、AI素材搜寻以及AI场景图生成等功能，满足不同设计需求。用户可以通过输入文案或提供参考图，利用AI技术生成画面，还可以选择不同风格，实现灵感落地和创意表达。" placement="top-start">
              <div style="line-height: 24px; font-size: 13px">稿定AI是稿定设计提供的一款集合了多种AI设计工具的平台，旨在帮助用户快速实现创意设计。它包括AI绘图、AI文案、AI商品图设计、AI素材搜寻以及AI场景图生成等功能，满足不同设计需求。用户可以...</div>
            </el-tooltip>
            <a class="btn" href="https://www.gaoding.com/ai" target="_blank">
              <span>访问官网</span>
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import popModal from "@/views/components/popModal.vue";
import { getUserInfo, getToken } from "@/utils/auth";
import * as portraitModel from "@/api/portraitModel";
import { uploadFile } from "@/api/portraitModel";
import { downBlobFile } from "@/utils/index.js";
import * as echarts from "echarts";
const { proxy } = getCurrentInstance();
const baseUrl = import.meta.env.VITE_APP_BASE_API;
const previewFile1 = ref([]);
const previewFile2 = ref([]);
const previewFile3 = ref([]);
const fileList1 = ref([]);
const fileList2 = ref([]);
const fileList3 = ref([]);
const handleChange1 = async (info) => {
  fileList1.value = [];
  fileList1.value.push(info);
  let formData = new FormData();
  formData.append("file", fileList1.value[0].raw);
  formData.append("userId", JSON.parse(getUserInfo()).userId);
  formData.append("module", "AI修图");
  formData.append("count", 1);
  try {
    previewFile1.value = [];
    const res = await uploadFile(formData);
    // registerParams.value.imgAddress = res.data;
    proxy.$modal.msgSuccess("上传成功！");
    previewFile1.value.push({
      name: fileList1.value[0].raw.name,
    });
    // getMessage();
  } catch (e) {
    // console.log(e);
  }
};
const handleChange2 = async (info) => {
  fileList2.value = [];
  fileList2.value.push(info);
  let formData = new FormData();
  formData.append("file", fileList2.value[0].raw);
  formData.append("userId", JSON.parse(getUserInfo()).userId);
  formData.append("module", "AI修图");
  formData.append("count", 2);

  try {
    previewFile2.value = [];
    const res = await uploadFile(formData);
    // registerParams.value.imgAddress = res.data;
    proxy.$modal.msgSuccess("上传成功！");
    previewFile2.value.push({
      name: fileList2.value[0].raw.name,
    });
    // getMessage();
  } catch (e) {
    // console.log(e);
  }
};
const handleChange3 = async (info) => {
  fileList3.value = [];
  fileList3.value.push(info);
  let formData = new FormData();
  formData.append("file", fileList3.value[0].raw);
  formData.append("userId", JSON.parse(getUserInfo()).userId);
  formData.append("module", "AI修图");
  formData.append("count", 3);
  try {
    previewFile3.value = [];
    const res = await uploadFile(formData);
    // registerParams.value.imgAddress = res.data;
    proxy.$modal.msgSuccess("上传成功！");
    previewFile3.value.push({
      name: fileList3.value[0].raw.name,
    });
    // getMessage();
  } catch (e) {
    // console.log(e);
  }
};
const downloadData = (name) => {
  window.open(baseUrl + "/api/bigModule/download?name=" + name + "&TOKEN=Bearer " + getToken());
};
</script>

<style lang="scss" scoped>
.app-containere {
  margin: 10px 4px 10px 10px;
  border: 1px solid #0452c6;
  //   background-color: rgba(0, 0, 0, 0.5);
  background: rgba(0, 29, 64, 0.5);
  padding: 25px;
  color: #fff;
  .material {
    .title {
      display: flex;
      align-items: center;
      font-size: 18px;
      span {
        margin-left: 10px;
      }
    }
    p {
      font-size: 15px;
      line-height: 30px;
    }
    .download {
      cursor: pointer;
      margin-left: 20px;
      color: #000;
      padding-left: 10px;
      font-size: 14px;
      text-align: center;
      line-height: 26px;
      width: 76px;
      height: 26px;
      background: url("@/assets/images/downloadIcon.png");
      background-size: 76px 26px;
    }
    .remand {
      display: flex;
      align-items: center;
      width: 470px;
      justify-content: space-between;
    }
    .case {
      margin-right: 18px;
      padding: 10px;
      padding-top: 20px;
      padding-bottom: 20px;
      color: #fff;
      margin-top: 10px;
      //   width: calc(100% - 100px);
      width: 500px;
      //   background: #fff;
      //   background: #002c5b;
      background: #011031;
      border-radius: 10px;
      border: 1px solid #003e7c;
      display: flex;
      align-items: center;

      .bgItem {
        display: flex;
        align-items: center;
        justify-content: center;
        img {
          // 186px
          width: 258px;
          height: 134px;
          border-radius: 5px;
          scale: 0.8;
        }
        // background-color: #e6e8ed;
        background-color: #002c5b;
        width: 240px;
        height: 170px;
        // padding: 20px;
        border-radius: 10px;
        box-shadow: 0 30px 20px -20px rgba(0, 0, 0, 0.15);
      }
      .detail {
        width: 300px;
        margin-left: 20px;
        .icon {
          display: flex;
          align-items: center;
          span {
            color: #f1404b;
          }
          .iconItem {
            background-color: #f1404b;
            color: #fff;
            font-size: 12px;
            padding: 2px;
            border-radius: 4px;
            padding-left: 4px;
            padding-right: 4px;
          }
        }
        .title {
          font-size: 20px;
          font-weight: bold;
          margin-top: 5px;
          margin-bottom: 5px;
          // font-weight: bold;
        }
        .btn {
          display: block;
          background-color: #e7e6e8;
          color: #333;
          width: 90px;
          height: 30px;
          text-align: center;
          line-height: 30px;
          border-radius: 5px;
          margin-top: 10px;
          cursor: pointer;
        }
        .btn:hover {
          background-color: #409eff;
          color: #fff;
        }
      }
    }
  }
}
</style>
<style>
.tooltip {
  max-width: 260px;
}
</style>