|
|
<template>
|
|
|
<div class="app-containere">
|
|
|
<div class="material">
|
|
|
<div class="title">
|
|
|
<img src="@/assets/images/caseIcon.png" alt="" />
|
|
|
<span>任务素材</span>
|
|
|
</div>
|
|
|
<div>
|
|
|
<p>
|
|
|
根据内容主题，利用推荐的三个AI工具，撰写相关的文章。
|
|
|
<br />
|
|
|
1、撰写博客文章：假设你是一个美食博客的作者，想要撰写一篇关于“如何推荐外地游客品尝本地美食”的文章。
|
|
|
<br />
|
|
|
2、编写产品描述：你是一家电子商务公司的营销人员，需要为一款新型智能手表编写产品描述，突出其独特功能和设计。
|
|
|
<br />
|
|
|
3、撰写研究报告摘要：你是一名研究人员，需要为一篇关于“可持续发展城市”的研究报告撰写摘要。
|
|
|
</p>
|
|
|
</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/1723156589-image.png" alt="" />
|
|
|
</div>
|
|
|
<div class="detail">
|
|
|
<div class="title">讯飞写作</div>
|
|
|
<el-tooltip popper-class="tooltip" effect="light" content="讯飞写作是科大讯飞推出的一款智能AI写作助手，它基于科大讯飞的星火大模型，专注于写作、创作、学习等办公场景的应用，为各行各业提供AIGC新质生产力工具。用户可以通过讯飞写作快速生成新闻稿件、种草文案、品宣策划、工作总结、心得体会等各类文本内容。它支持AI对话写作、多场景模板、AI工具润色改写扩写缩写续写、AI文生图图生图、素材辅助写作等功能，全面提升用户的写作效率。" placement="top-start">
|
|
|
<div style="line-height: 24px; font-size: 13px">讯飞写作是科大讯飞推出的一款智能AI写作助手，它基于科大讯飞的星火大模型，专注于写作、创作、学习等办公场景的应用，为各行各业提供AIGC新质生产力工具。用户可以通过讯飞写作快...</div>
|
|
|
</el-tooltip>
|
|
|
<a class="btn" href=" https://huixie.iflyrec.com/" target="_blank">
|
|
|
<span>访问官网</span>
|
|
|
</a>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="case">
|
|
|
<div class="bgItem">
|
|
|
<img src="@/assets/images/huoshan.png" alt="" />
|
|
|
</div>
|
|
|
<div class="detail">
|
|
|
<div class="title">火山写作</div>
|
|
|
<el-tooltip popper-class="tooltip" effect="light" content="火山写作是由字节跳动推出的一款中英文AI写作助手，它集成了创作、润色、纠错、改写、翻译等多种功能，旨在帮助用户提高写作质量和效率。此外，火山写作还提供了一系列实用工具，比如博客文章生成器、小红书文案生成器、SEO元标签、知乎回答、电商产品描述等，以支持内容创作和营销活动。" placement="top-start">
|
|
|
<div style="line-height: 24px; font-size: 13px">火山写作是由字节跳动推出的一款中英文AI写作助手，它集成了创作、润色、纠错、改写、翻译等多种功能，旨在帮助用户提高写作质量和效率。此外，火山写作还提供了一系列实用工具，比如博客文章生成器...</div>
|
|
|
</el-tooltip>
|
|
|
<a class="btn" href="https://www.writingo.net/" target="_blank">
|
|
|
<span>访问官网</span>
|
|
|
</a>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="case">
|
|
|
<div class="bgItem">
|
|
|
<img src="@/assets/images/Pasted-628.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智能体创建等功能。" placement="top-start">
|
|
|
<div style="line-height: 24px; font-size: 13px">豆包AI是由字节跳动公司开发的一款多功能人工智能助手，它具备强大的对话能力、个性化互动、文案创作与优化、文档阅读与深度分析、文本到图片生成、AI音乐生成、学习辅助工具、信息搜索与整合...</div>
|
|
|
</el-tooltip>
|
|
|
<a class="btn" href="https://www.doubao.com/chat/" target="_blank">
|
|
|
<span>访问官网</span>
|
|
|
</a>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
<script setup>
|
|
|
import popModal from "@/views/components/popModal.vue";
|
|
|
import { getUserInfo } 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 props = defineProps({
|
|
|
info: {
|
|
|
type: Object,
|
|
|
default: () => ({}),
|
|
|
},
|
|
|
});
|
|
|
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);
|
|
|
}
|
|
|
};
|
|
|
// 监听props.info
|
|
|
watch(
|
|
|
() => props.info,
|
|
|
(newVal) => {
|
|
|
if (newVal && newVal.length > 0) {
|
|
|
newVal.forEach((item) => {
|
|
|
item.name = item.fileName;
|
|
|
item.uid = Date.now();
|
|
|
});
|
|
|
if (newVal[0]) previewFile1.value = [newVal[0]];
|
|
|
if (newVal[1]) previewFile2.value = [newVal[1]];
|
|
|
if (newVal[2]) previewFile3.value = [newVal[2]];
|
|
|
}
|
|
|
},
|
|
|
{ immediate: true }
|
|
|
);
|
|
|
</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: var(--student-fs-h1);
|
|
|
span {
|
|
|
margin-left: 10px;
|
|
|
}
|
|
|
}
|
|
|
p {
|
|
|
font-size: var(--student-fs-body);
|
|
|
line-height: 30px;
|
|
|
}
|
|
|
.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: var(--student-fs-caption);
|
|
|
padding: 2px;
|
|
|
border-radius: 4px;
|
|
|
padding-left: 4px;
|
|
|
padding-right: 4px;
|
|
|
}
|
|
|
}
|
|
|
.title {
|
|
|
font-size: var(--student-fs-display);
|
|
|
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>
|