AI文生图

src/views/digitalMarketTech/AIGCLargeModel/components/AIArticleToPic.vue

@@ -0,0 +1,314 @@
+<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工具，分别生成图片。
+        <br />
+        1、风景画创作图片。文字描述："夏日傍晚，（xxxxxx）。湖边有（xxxxxx）。远处是（xxxxxx），天空中（xxxxxx）。"
+        <br />
+        2、未来城市构想图片。文字描述："一个高科技的未来城市，有着（xxxxxx）。城市中心（xxxxxx）。空中（xxxxxx）。夜晚（xxxxxx）。"
+        <br />
+        3、幻想生物插画。文字描述："一只神秘的幻想生物，它有着（xxxxxx）。站在（xxxxxx），周边（xxxxxx）。
+      </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/d24cf8e976d6f9fd2695222347683d6.png" alt="" />
+          </div>
+          <div class="detail">
+            <div class="title">Stable Diffusion</div>
+            <el-tooltip
+              popper-class="tooltip"
+              effect="light"
+              content="Stable Difusion 是于2022年发布的一个基于深度学习的A1文本到图像生成模型，该模型主要用于生成以文本描述为条件的详细图像和插画，由初创公司StabilityAl与一些学术研究人员和非营利组织合作开发的。
+"
+              placement="top-start"
+            >
+              <div style="line-height: 24px; font-size: 13px">Stable Difusion 是于2022年发布的一个基于深度学习的A1文本到图像生成模型，该模型主要用于生成以文本描述为条件的详细图像和插画，由初创公司StabilityAl与一些学术研究人员和非营利组织合作开发的。</div>
+            </el-tooltip>
+            <a class="btn" href="https://stabledifffusion.com/" target="_blank">
+              <span>访问官网</span>
+            </a>
+          </div>
+        </div>
+        <div class="case">
+          <div class="bgItem">
+            <img src="@/assets/images/4ef9378778f4cc503f2a8c24c0858ba.png" alt="" />
+          </div>
+          <div class="detail">
+            <div class="title">文心一格</div>
+            <el-tooltip popper-class="tooltip" effect="light" content="文心一格是由百度推出的依托其文心大模型和飞桨技术的文本生成图片的 A| 艺术和创意辅助平台，于2022年8月正式发布。作为国内第一梯队的A|图片生成的工具和平台，文心一格可以进行国风、油画、水彩、水粉、动漫、写实等十余种不同风格高清画作的生成。" placement="top-start">
+              <div style="line-height: 24px; font-size: 13px">文心一格是由百度推出的依托其文心大模型和飞桨技术的文本生成图片的 A| 艺术和创意辅助平台，于2022年8月正式发布。作为国内第一梯队的A|图片生成的工具和平台，文心一格可以进行国风、油画、水彩...</div>
+            </el-tooltip>
+            <a class="btn" href="https://yige.baidu.com/" target="_blank">
+              <span>访问官网</span>
+            </a>
+          </div>
+        </div>
+        <div class="case">
+          <div class="bgItem">
+            <img src="@/assets/images/664a12e0c54099bdebfc7cfb9eff809.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">WHEE</div>
+            <el-tooltip popper-class="tooltip" effect="light" content="WHEE是美图基于其视觉大模型Miraclevision最新推出的AI图片和绘画创作平台，该A|图片生成工具支持多种模式的图片创作，包括文生图、图生图、风格模型训练和创作提示词库。用户仅需输入简单的文字描述，即可将创意快速变为高质量的优秀画作。" placement="top-start">
+              <div style="line-height: 24px; font-size: 13px">WHEE是美图基于其视觉大模型Miraclevision最新推出的AI图片和绘画创作平台，该A|图片生成工具支持多种模式的图片创作，包括文生图、图生图、风格模型训练和创作提示词库。用户仅需输入...</div>
+            </el-tooltip>
+            <a class="btn" href="https://www.whee.com/" 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>

src/views/digitalMarketTech/AIGCLargeModel/index.vue

@@ -13,7 +13,7 @@
   <component v-if="page" :is="page"></component>
 </template>
 <script setup>
-const pageData = [defineAsyncComponent(() => import("./components/AIVenisonDiagram.vue")), defineAsyncComponent(() => import("./components/AIPicture.vue")), defineAsyncComponent(() => import("./components/AIVideo.vue")), defineAsyncComponent(() => import("./components/AIWriting.vue")), defineAsyncComponent(() => import("./components/AIDataAnalysis.vue")),  defineAsyncComponent(() => import("./components/thirdPartyAIGC.vue"))];
+const pageData = [defineAsyncComponent(() => import("./components/AIArticleToPic.vue")), defineAsyncComponent(() => import("./components/AIPicture.vue")), defineAsyncComponent(() => import("./components/AIVideo.vue")), defineAsyncComponent(() => import("./components/AIWriting.vue")), defineAsyncComponent(() => import("./components/AIDataAnalysis.vue")),  defineAsyncComponent(() => import("./components/thirdPartyAIGC.vue"))];
 const page = ref(pageData[0]);
 const clickIndx = (index) => {
   page.value = pageData[index];