|
|
@@ -1,7 +1,7 @@
|
|
|
<template>
|
|
|
<el-dialog title="AI生成PPT" :visible.sync="dialogVisibleAiCreate" :append-to-body="true" width="700px"
|
|
|
:before-close="handleClose" class="dialog_diy">
|
|
|
- <div style="height: 500px; padding: 15px" v-loading="loading">
|
|
|
+ <div style="height: 500px; padding: 15px" v-loading="loading" element-loading-text="小可正在努力生成中，请稍等...">
|
|
|
<!-- <div class="t_box">
|
|
|
<span>选择：</span>
|
|
|
<el-radio-group v-model="radio" @change="changeRadio">
|
|
|
@@ -11,8 +11,17 @@
|
|
|
</el-radio-group>
|
|
|
</div> -->
|
|
|
<div class="t_box" v-if="steps == 1" style="height: 100%">
|
|
|
- <textarea style="height: 100%" rows="10" class="binfo_input binfo_textarea" cols placeholder="请生成大纲"
|
|
|
- v-model="outline"></textarea>
|
|
|
+ <textarea style="height: 100%;width:calc(100% - 260px)" rows="10" class="binfo_input binfo_textarea" cols
|
|
|
+ placeholder="请生成大纲" v-model="outline"></textarea>
|
|
|
+ <div class="template_box">
|
|
|
+ <span class="title">选择模板</span>
|
|
|
+ <div class="template_list">
|
|
|
+ <div class="template_item" :class="{ active: index == templateIndex }"
|
|
|
+ v-for="(item, index) in templateList" :key="index" @click="changeTemplate(index)">
|
|
|
+ <img :src="item.img" alt="" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
<div style="height: 100%" v-else>
|
|
|
<wOffice v-if="url" :url="url"></wOffice>
|
|
|
@@ -22,7 +31,7 @@
|
|
|
<el-button @click="aiGet(2)" type="primary" :disabled="loading">重新生成大纲</el-button>
|
|
|
<el-button @click="aiGet(1)" type="primary" :disabled="loading">{{
|
|
|
url ? "重新生成PPT" : "生成PPT"
|
|
|
- }}</el-button>
|
|
|
+ }}</el-button>
|
|
|
<el-button @click="steps = 1" type="primary" v-if="steps == 2">上一步</el-button>
|
|
|
<el-button @click="steps = 2" type="primary" v-else-if="steps == 1 && url">下一步</el-button>
|
|
|
<el-button @click="confirm" type="primary">确 定</el-button>
|
|
|
@@ -35,6 +44,7 @@
|
|
|
import Pptxgen from "pptxgenjs";
|
|
|
import wOffice from "../components/wOffice.vue";
|
|
|
import { v4 as uuidv4 } from "uuid";
|
|
|
+import { color } from "highcharts";
|
|
|
|
|
|
export default {
|
|
|
components: {
|
|
|
@@ -59,7 +69,7 @@ export default {
|
|
|
},
|
|
|
CourseTypeJson: {
|
|
|
type: Object,
|
|
|
- default: ()=>({}),
|
|
|
+ default: () => ({}),
|
|
|
}
|
|
|
},
|
|
|
// 根据用户给你的参考资料
|
|
|
@@ -93,11 +103,25 @@ export default {
|
|
|
uJson: {},
|
|
|
outline: "",
|
|
|
steps: 1,
|
|
|
+ templateList: [
|
|
|
+ // { img: 'https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/model1-11719468995661.png', img2: 'https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/model1-21719469026755.png',color:'17094F' },
|
|
|
+ // { img: 'https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/model2-11719469051869.png', img2: 'https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/model2-21719469040181.png',color:'052B37' },
|
|
|
+ // { img: 'https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/model3-11719469071576.png', img2: 'https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/model3-21719469092087.png',color:'1D5869' },
|
|
|
+ // { img: 'https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/model4-11719469106190.png', img2: 'https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/model-4-21719469125318.png',color:'372213' },
|
|
|
+ // { img: 'https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/model5-11719295908696.png', img2: 'https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/model5-21719295930345.png',color:'674D40' },
|
|
|
+ { img: require('../../../assets/icon/ppt/model1-1.png'), img2: require('../../../assets/icon/ppt/model1-2.png'),color:'17094F' },
|
|
|
+ { img: require('../../../assets/icon/ppt/model2-1.png'), img2: require('../../../assets/icon/ppt/model2-2.png'),color:'052B37' },
|
|
|
+ { img: require('../../../assets/icon/ppt/model3-1.png'), img2: require('../../../assets/icon/ppt/model3-2.png'),color:'1D5869' },
|
|
|
+ { img: require('../../../assets/icon/ppt/model4-1.png'), img2: require('../../../assets/icon/ppt/model4-2.png'),color:'372213' },
|
|
|
+ { img: require('../../../assets/icon/ppt/model5-1.png'), img2: require('../../../assets/icon/ppt/model5-2.png'),color:'674D40' },
|
|
|
+ ],
|
|
|
+ templateIndex: 0,
|
|
|
};
|
|
|
},
|
|
|
watch: {
|
|
|
dialogVisibleAiCreate(newValue, oldValue) {
|
|
|
if (newValue) {
|
|
|
+ this.loading = false;
|
|
|
this.aiGet(2);
|
|
|
}
|
|
|
},
|
|
|
@@ -209,13 +233,9 @@ Instruction: Based on the context, follow "Format example", write content.
|
|
|
|
|
|
# Context
|
|
|
## 任务
|
|
|
-将参考#参考资料，为教师生成这节课的教学ppt。PPT的内容主要是讲解该课程中所有可能涉及到的知识点，根据大纲内容生成ppt内容。
|
|
|
+将参考#大纲内容，为教师生成这节课的教学ppt。PPT的内容主要是讲解该课程中所有可能涉及到的知识点，根据大纲内容生成ppt内容。
|
|
|
|
|
|
-## 工作流
|
|
|
-1. 针对大纲中的每个知识点，生成200字左右的详细讲解。你的语气应该让小学或初中的学生清晰易懂的讲解。请尽可能的详细，这对我很重要。
|
|
|
-2. 针对大纲中的每个测试，详细设计不同测试题目，例如单选，多选，对错题等。
|
|
|
-
|
|
|
-# 每一页输出格式
|
|
|
+## 每一页输出格式
|
|
|
- 页数：序列数字
|
|
|
- 标题：学科概念（请从给你的大纲中摘取）
|
|
|
- 子标题：知识点（请从给你的大纲中摘取）
|
|
|
@@ -226,13 +246,16 @@ Instruction: Based on the context, follow "Format example", write content.
|
|
|
- 你不能输出违反伦理的内容
|
|
|
|
|
|
## 工作流
|
|
|
-1. 从用户提供的参考资料中提取5个最重要的学科概念，并输出。
|
|
|
-2. 分解每个学科概念为几个子知识点
|
|
|
-3. 简要描述每个知识点
|
|
|
-4.生成5个测试题以考察学生的掌握情况
|
|
|
+1. 针对大纲中的每个知识点，生成200字左右的详细讲解。你的语气应该让小学或初中的学生清晰易懂的讲解。请尽可能的详细，这对我很重要。
|
|
|
+2. 针对大纲中的每个测试，详细设计不同测试题目，例如单选，多选，对错题等。
|
|
|
+3.从用户提供的参考资料中提取5个最重要的学科概念，并输出。
|
|
|
+4.分解每个学科概念为几个子知识点
|
|
|
+5.简要描述每个知识点
|
|
|
+6.生成5个测试题以考察学生的掌握情况
|
|
|
+7.一个知识点一页，一个测试题一页
|
|
|
|
|
|
-## 参考资料
|
|
|
-${_this.outline}
|
|
|
+## 大纲内容
|
|
|
+${_this.outline.replaceAll('#','').replaceAll('*','').replaceAll('-','').replaceAll('\n','')}
|
|
|
|
|
|
# Format example
|
|
|
[{"page": "页码（数字）","title": "学科概念（请从给你的大纲中摘取）（标题）","task": "知识点（请从给你的大纲中摘取）（子标题）","points": "知识点讲解：针对大纲中的每个知识点，生成200字左右的详细讲解。你的语气应该让小学或初中的学生清晰易懂的讲解。你的讲解词在100 token左右。请尽可能的详细，这对我很重要。"}]`;
|
|
|
@@ -241,9 +264,9 @@ ${_this.outline}
|
|
|
请根据参考资料，生成关于${this.courseName}，为教师生成这节课的教学ppt的大纲，大纲的主要内容课程知识点的讲解与相关练习和测试。你的输出应该符合#输出格式
|
|
|
|
|
|
# 工作流
|
|
|
-1. 从用户提供的参考资料中提取5个最重要的学科概念${mclass.length ? "（水平限制在{面向年级}中）" : ""}，并输出。
|
|
|
-2. 分解每个学科概念为几个子知识点
|
|
|
-3. 简要描述每个知识点
|
|
|
+1.从用户提供的参考资料中提取5个最重要的学科概念${mclass.length ? "（水平限制在{面向年级}中）" : ""}，并输出。
|
|
|
+2.分解每个学科概念为几个子知识点
|
|
|
+3.简要描述每个知识点
|
|
|
4.生成5个测试题以考察学生的掌握情况
|
|
|
|
|
|
${mclass.length ? "#参考资料\n面向年级：" + mclass.join(",") : ""}
|
|
|
@@ -257,9 +280,9 @@ ${mclass.length ? "#参考资料\n面向年级：" + mclass.join(",") : ""}
|
|
|
5.知识点：知识点5
|
|
|
|
|
|
# 限制
|
|
|
-- 如果有参考资料请根据参考资料，如果没有无需根据参考资料进行。
|
|
|
-- 你不能输出错误的知识，如果你实在不清楚，输出“对不起，我不确定”
|
|
|
-- 你不能输出违反伦理的内容
|
|
|
+1.如果有参考资料请根据参考资料，如果没有无需根据参考资料进行，随意发挥。
|
|
|
+2.你不能输出错误的知识。
|
|
|
+3.你不能输出违反伦理的内容。
|
|
|
`;
|
|
|
}
|
|
|
|
|
|
@@ -330,25 +353,32 @@ ${mclass.length ? "#参考资料\n面向年级：" + mclass.join(",") : ""}
|
|
|
console.log("error_________________" + e);
|
|
|
// _this.$message.error(data.message)
|
|
|
try {
|
|
|
+ let regex = new RegExp("(?<=```json)([\\s\\S]*?)(?=```)");
|
|
|
+ let match = data.message.match(regex);
|
|
|
+ _data2 = JSON.parse(match[0]);
|
|
|
+ _this.createPpt(_data2);
|
|
|
+ _this.steps = 2;
|
|
|
+
|
|
|
// let _data = JSON.parse(data.message.match(/(?<=```json).*?(?=```)/)[0])
|
|
|
- var message = data.message;
|
|
|
- var jsonStart = message.indexOf("```json") + 7; // `+ 7` 是为了跳过 ```json
|
|
|
- var jsonEnd = message.indexOf("```", jsonStart);
|
|
|
- if (jsonStart !== -1 && jsonEnd !== -1) {
|
|
|
- var jsonString = message
|
|
|
- .substring(jsonStart, jsonEnd)
|
|
|
- .trim();
|
|
|
- var _data2 = JSON.parse(jsonString);
|
|
|
- _this.createPpt(_data2);
|
|
|
- _this.steps = 2;
|
|
|
- } else {
|
|
|
- _this.$message.error("生成失败，正在重新生成");
|
|
|
- _this.aiGet(type);
|
|
|
- }
|
|
|
+
|
|
|
+ // var message = data.message;
|
|
|
+ // var jsonStart = message.indexOf("```json") + 7; // `+ 7` 是为了跳过 ```json
|
|
|
+ // var jsonEnd = message.indexOf("```", jsonStart);
|
|
|
+ // if (jsonStart !== -1 && jsonEnd !== -1) {
|
|
|
+ // var jsonString = message
|
|
|
+ // .substring(jsonStart, jsonEnd)
|
|
|
+ // .trim();
|
|
|
+ // var _data2 = JSON.parse(jsonString);
|
|
|
+ // _this.createPpt(_data2);
|
|
|
+ // _this.steps = 2;
|
|
|
+ // } else {
|
|
|
+ // _this.$message.error("生成失败，正在重新生成");
|
|
|
+ // _this.aiGet(type);
|
|
|
+ // }
|
|
|
} catch (error) {
|
|
|
_this.$message.error("生成失败，正在重新生成");
|
|
|
- _this.aiGet(type);
|
|
|
_this.loading = false;
|
|
|
+ _this.aiGet(type);
|
|
|
}
|
|
|
}
|
|
|
} else {
|
|
|
@@ -367,12 +397,12 @@ ${mclass.length ? "#参考资料\n面向年级：" + mclass.join(",") : ""}
|
|
|
// 1. 创建PPT
|
|
|
const pres = new Pptxgen();
|
|
|
const _slideTou = pres.addSlide();
|
|
|
- _slideTou.background = { path: "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/model5-11719295908696.png" }
|
|
|
+ _slideTou.background = { path: this.templateList[this.templateIndex].img }
|
|
|
_slideTou.addText(this.courseName, {
|
|
|
x: "10%", // 横坐标
|
|
|
y: 3,
|
|
|
width: "90%",
|
|
|
- color: "363636",
|
|
|
+ color: this.templateList[this.templateIndex].color,
|
|
|
fontSize: 38, // 字号
|
|
|
align: "center",
|
|
|
});
|
|
|
@@ -380,18 +410,18 @@ ${mclass.length ? "#参考资料\n面向年级：" + mclass.join(",") : ""}
|
|
|
// 2. 创建一个PPT页面，每调用一次 pres.addSlide() 都可以生成一张新的页面
|
|
|
// 建议把每个页面的构造抽成一个个函数，然后通过函数调用生成新页面，代码不会很乱
|
|
|
const _slide = pres.addSlide();
|
|
|
- _slide.background = { path: "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/model5-21719295930345.png" }
|
|
|
-
|
|
|
+ _slide.background = { path: this.templateList[this.templateIndex].img2 }
|
|
|
+
|
|
|
// 3. 调用addTetx()，在PPT页面中插入文字“Hello World from PptxGenJS...”
|
|
|
// 括号里面是对文字的配置，文字横坐标x为1.5，纵坐标y为1.5，字体颜色 363636……
|
|
|
// 关于坐标长度与px的转换 x 1 = 127~128px 左右
|
|
|
- const page = i+1 > 10 ? i+1 : "0"+(i+1);
|
|
|
+ const page = i + 1 > 10 ? i + 1 : "0" + (i + 1);
|
|
|
const tempResult1 = page + " " + array[i].title;
|
|
|
_slide.addText(tempResult1, {
|
|
|
x: "10%", // 横坐标
|
|
|
y: 1.1,
|
|
|
width: "90%",
|
|
|
- color: "363636",
|
|
|
+ color: this.templateList[this.templateIndex].color,
|
|
|
fontSize: 28, // 字号
|
|
|
align: "center",
|
|
|
});
|
|
|
@@ -400,43 +430,43 @@ ${mclass.length ? "#参考资料\n面向年级：" + mclass.join(",") : ""}
|
|
|
x: "10%", // 横坐标
|
|
|
y: 1.8,
|
|
|
width: "90%",
|
|
|
- color: "363636",
|
|
|
+ color: "222222",
|
|
|
fontSize: 20, // 字号
|
|
|
align: "center",
|
|
|
});
|
|
|
let tempResult3 = '';
|
|
|
- if(typeof array[i].points == 'object'){
|
|
|
+ if (typeof array[i].points == 'object') {
|
|
|
tempResult3 = array[i].points.join('\n')
|
|
|
- }else {
|
|
|
+ } else {
|
|
|
tempResult3 = array[i].points
|
|
|
}
|
|
|
_slide.addText(tempResult3, {
|
|
|
x: "20%", // 横坐标
|
|
|
y: 3.2,
|
|
|
w: "60%",
|
|
|
- color: "363636",
|
|
|
+ color: "444444",
|
|
|
fontSize: 18, // 字号
|
|
|
align: "center",
|
|
|
});
|
|
|
}
|
|
|
const _slideWei = pres.addSlide();
|
|
|
- _slideWei.background = { path: "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/model5-11719295908696.png" }
|
|
|
+ _slideWei.background = { path: this.templateList[this.templateIndex].img }
|
|
|
_slideWei.addText("谢谢观看，下课!", {
|
|
|
x: "10%", // 横坐标
|
|
|
y: 3,
|
|
|
width: "90%",
|
|
|
- color: "363636",
|
|
|
+ color: this.templateList[this.templateIndex].color,
|
|
|
fontSize: 38, // 字号
|
|
|
align: "center",
|
|
|
});
|
|
|
// 获取PPTX文件的ArrayBuffer
|
|
|
-
|
|
|
+
|
|
|
// 保存为 Blob 并处理
|
|
|
pres.write("blob").then((blob) => {
|
|
|
// 现在你有了一个 Blob 对象
|
|
|
console.log(blob);
|
|
|
|
|
|
- const file = new File([blob], this.courseName+".pptx", {
|
|
|
+ const file = new File([blob], this.courseName + ".pptx", {
|
|
|
type: "application/vnd.openxmlformats-officedocument.presentationml.presentation",
|
|
|
});
|
|
|
console.log(pres);
|
|
|
@@ -494,6 +524,9 @@ ${mclass.length ? "#参考资料\n面向年级：" + mclass.join(",") : ""}
|
|
|
});
|
|
|
}
|
|
|
},
|
|
|
+ changeTemplate(index) {
|
|
|
+ this.templateIndex = index;
|
|
|
+ }
|
|
|
},
|
|
|
};
|
|
|
</script>
|
|
|
@@ -564,13 +597,35 @@ ${mclass.length ? "#参考资料\n面向年级：" + mclass.join(",") : ""}
|
|
|
font-family: "Microsoft YaHei";
|
|
|
}
|
|
|
|
|
|
-.binfo_input:focus-visible {
|
|
|
- border: 1.5px solid #3681fc !important;
|
|
|
+.binfo_textarea:focus-visible {
|
|
|
+ border: 1.5px solid #3681fc !important;
|
|
|
+}
|
|
|
+
|
|
|
+.binfo_textarea::-webkit-scrollbar {
|
|
|
+ /*滚动条整体样式*/
|
|
|
+ width: 6px;
|
|
|
+ /*高宽分别对应横竖滚动条的尺寸*/
|
|
|
+ height: 6px;
|
|
|
+}
|
|
|
+
|
|
|
+/*定义滚动条轨道 内阴影+圆角*/
|
|
|
+.binfo_textarea::-webkit-scrollbar {
|
|
|
+ border-radius: 10px;
|
|
|
+ background-color: #eee;
|
|
|
+}
|
|
|
+
|
|
|
+/*定义滑块 内阴影+圆角*/
|
|
|
+.binfo_textarea::-webkit-scrollbar-thumb {
|
|
|
+ border-radius: 10px;
|
|
|
+ -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
|
|
|
+ background-color: rgba(0, 0, 0, 0.1);
|
|
|
}
|
|
|
|
|
|
.t_box {
|
|
|
display: flex;
|
|
|
margin-bottom: 15px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
}
|
|
|
|
|
|
.t_box>span:nth-child(1) {
|
|
|
@@ -578,4 +633,38 @@ ${mclass.length ? "#参考资料\n面向年级：" + mclass.join(",") : ""}
|
|
|
font-size: 16px;
|
|
|
color: #000;
|
|
|
}
|
|
|
+
|
|
|
+.template_box{
|
|
|
+ width: 250px;
|
|
|
+}
|
|
|
+.template_box > .title{
|
|
|
+ font-size: 18px;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ display: block;
|
|
|
+}
|
|
|
+.template_list{
|
|
|
+ overflow: auto;
|
|
|
+ width: 100%;
|
|
|
+ height: calc(100% - 31px);
|
|
|
+}
|
|
|
+.template_item{
|
|
|
+ cursor: pointer;
|
|
|
+ width: 100%;
|
|
|
+ height: 165px;
|
|
|
+ overflow: hidden;
|
|
|
+ border-radius: 5px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ border: 5px solid #e5e5e5ee;
|
|
|
+}
|
|
|
+.template_item + .template_item{
|
|
|
+ margin-top: 10px;
|
|
|
+}
|
|
|
+.template_item.active{
|
|
|
+ border: 5px solid #0061ff;
|
|
|
+}
|
|
|
+.template_item > img{
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ object-fit: cover;
|
|
|
+}
|
|
|
</style>
|
SanHQin
