pbl-teacher-table/src/components/pages/aiAddCourse/aiCreateDialog.vue

<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 class="t_box">
                <span>选择：</span>
                <el-radio-group v-model="radio" @change="changeRadio">
                    <el-radio :label="0">PPT</el-radio>
                    <el-radio :label="1">教案</el-radio>
                    <el-radio :label="2">视频</el-radio>
                </el-radio-group>
            </div> -->
            <!-- <div class="t_box">
                <span>提示词：</span>
                <textarea rows="10" class="binfo_input binfo_textarea" cols placeholder="请输入提示词"
                    v-model="detail"></textarea>
            </div> -->
            <wOffice v-if="url" :url="url"></wOffice>
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button @click="aiGet" type="primary">重新生成</el-button>
            <el-button @click="confirm" type="primary">确 定</el-button>
            <el-button @click="close">关 闭</el-button>
        </span>
    </el-dialog>
</template>

<script>
import Pptxgen from "pptxgenjs"
import wOffice from '../components/wOffice.vue'

export default {
    components: {
        wOffice,
    },
    props: {
        dialogVisibleAiCreate: {
            type: Boolean,
            default: false
        },
        courseName: {
            type: String,
            default: ""
        }
    },
    // 根据用户给你的参考资料
    data() {
        return {
            userid: this.$route.query.userid,
            radio: 0,
            aiJson: {
                ppt: `## 任务
请生成关于${this.courseName}，为教师生成这节课的教学ppt，页数在20页左右。PPT的内容主要是讲解该课程中所有可能涉及到的知识点。

## 工作流
1. 从用户提供的参考资料中提取10个最重要的知识点（知识点水平限制在小学和初中），并输出。
2. 针对10个知识点中的每个，你使用1~3页ppt详细的对知识点进行讲解。你的讲解词应该在100token左右
3. 讲解完所有知识点后，再根据知识点出5道单选题（放在5页ppt中）

## 限制
- 你不能输出错误的知识，如果你实在不清楚，输出“对不起，我不确定”
- 你不能输出违反伦理的内容`,
                word: '',
                video: ''
            },
            aiUrl: {
                ppt: '',
                word: '',
                video: ''
            },
            detail: "",
            loading: false,
            url: "",
            uJson: {}
        }
    },
    watch: {
        dialogVisibleAiCreate(newValue, oldValue) {
            if (newValue) {
                // if (this.radio == 0) {
                    this.detail = this.aiJson.ppt
                // }
                // if (this.radio == 1) {
                //     this.detail = this.aiJson.word
                // }
                // if (this.radio == 2) {
                //     this.detail = this.aiJson.video
                // }
                // this.loading = false
                this.aiGet()
            }
        },
    },
    methods: {
        handleClose(done) {
            this.close()
            done();
        },
        close() {
            this.$emit('update:dialogVisibleAiCreate', false)
        },
        confirm() {
            if(this.url){
                this.$emit('createAiPpt', this.uJson)
            }else {
                this.$message.error('请先生成ppt');
            }
        },
        changeRadio() {
            if (this.radio == 0) {
                this.detail = this.aiJson.ppt
            }
            if (this.radio == 1) {
                this.detail = this.aiJson.word
            }
            if (this.radio == 2) {
                this.detail = this.aiJson.video
            }
        },
        aiGet() {
            if(this.loading){
                this.$message.error('正在生成中，请稍后');
                return;
            }
            this.url = ''
            this.uJson = {}
            let _this = this
            let message = ''
            if (_this.radio == 0) {
                message = `ATTENTION: Use '##' to SPLIT SECTIONS, not '#'. Output format carefully referenced "Format example".

${this.detail}

## 要求
根据Format example的要求返回要以数组的格式

## Format example
[{"page": "页码（数字）","title": "标题","task": "对应教学任务：依据用户输入的参考资料而定，如果用户未提供则不输出","points": "知识点讲解：针对知识点的详细讲解，你的语气应该让小学或初中的学生清晰易懂的讲解。你的讲解词在100 token左右。请尽可能的详细，这对我很重要。"}]`
            } else if (_this.radio == 1) {

            } else if (_this.radio == 2) {

            }
            let params = JSON.stringify({
                // "model": "Chat",
                model: 'gpt-3.5-turbo',
                temperature: 0,
                max_tokens: 4096,
                top_p: 1,
                frequency_penalty: 0,
                presence_penalty: 0,
                messages: [{
                    content: message,
                    role: 'user'
                }],
                stream: false,
                uid: this.userid,
                mind_map_question: "",
            })

            _this.loading = true
            _this.ajax.post('https://gpt4.cocorobo.cn/chat', params).then(function (response) {
                console.log(response);
                let data = response.data.FunctionResponse
                if (data.choices && data.choices.length && data.choices[0].message) {
                    console.log(data.choices[0].message.content);
                    try {
                        let _data = JSON.parse(data.choices[0].message.content)
                        _this.createPpt(_data)
                    } catch (e) {
                        console.log('error_________________'+e);
                        _this.$message.error(data.choices[0].message.content)
                        _this.loading = false
                    }

                }
            }).catch(function (error) {
                _this.loading = false
                console.log(error);
            });
        },
        createPpt(array) {
            // 1. 创建PPT
            const pres = new Pptxgen()
            for (var i = 0; i < array.length; i++) {
                // 2. 创建一个PPT页面，每调用一次 pres.addSlide() 都可以生成一张新的页面
                // 建议把每个页面的构造抽成一个个函数，然后通过函数调用生成新页面，代码不会很乱
                const _slide = pres.addSlide()

                // 3. 调用addTetx()，在PPT页面中插入文字“Hello World from PptxGenJS...”
                // 括号里面是对文字的配置，文字横坐标x为1.5，纵坐标y为1.5，字体颜色 363636……
                // 关于坐标长度与px的转换 x 1 = 127~128px 左右
                const tempResult1 = array[i].title
                _slide.addText(tempResult1, {
                    x: 0.5, // 横坐标
                    y: 0.5,
                    color: '363636',
                    fontSize: 24, // 字号
                    fill: { color: 'F1F1F1' },
                    align: 'center'
                })
                const tempResult2 = array[i].task
                _slide.addText(tempResult2, {
                    x: 0.5, // 横坐标
                    y: 2,
                    color: '363636',
                    fontSize: 18, // 字号
                    fill: { color: 'F1F1F1' },
                    align: 'center'
                })
                const tempResult3 = array[i].points
                _slide.addText(tempResult3, {
                    x: 0.5, // 横坐标
                    y: 4,
                    color: '363636',
                    fontSize: 18, // 字号
                    fill: { color: 'F1F1F1' },
                    align: 'center'
                })
            }

            // 获取PPTX文件的ArrayBuffer

            // 保存为 Blob 并处理
            pres.write('blob').then((blob) => {
                // 现在你有了一个 Blob 对象
                console.log(blob);

                const file = new File([blob], 'aiPpt.pptx', { type: "application/vnd.openxmlformats-officedocument.presentationml.presentation" });
                console.log(pres)
                this.beforeUpload(file)
            });

        },
        beforeUpload(event) {
            var file = event;
            var credentials = {
                accessKeyId: "AKIATLPEDU37QV5CHLMH",
                secretAccessKey: "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",
            }; //秘钥形式的登录上传
            window.AWS.config.update(credentials);
            window.AWS.config.region = "cn-northwest-1"; //设置区域

            var bucket = new window.AWS.S3({ params: { Bucket: "ccrb" } }); //选择桶
            var _this = this;

            if (file) {
                var params = {
                    Key:
                        file.name.split(".")[0] +
                        new Date().getTime() +
                        "." +
                        file.name.split(".")[file.name.split(".").length - 1],
                    ContentType: file.type,
                    Body: file,
                    "Access-Control-Allow-Credentials": "*",
                    ACL: "public-read",
                }; //key可以设置为桶的相抵路径，Body为文件， ACL最好要设置
                var options = {
                    partSize: 2048 * 1024 * 1024,
                    queueSize: 2,
                    leavePartsOnError: true,
                };
                bucket
                    .upload(params, options)
                    .on("httpUploadProgress", function (evt) {
                        //这里可以写进度条
                        // console.log("Uploaded : " + parseInt((evt.loaded * 80) / evt.total) + '%');
                    })
                    .send(function (err, data) {
                        _this.loading = false
                        if (err) {
                            _this.$message.error("上传失败");
                        } else {
                            _this.url = data.Location
                            _this.uJson = {
                              name: file.name,
                              url: data.Location,
                              type: 3,
                            }
                            console.log(data.Location);
                        }
                    });
            }
        },
    },
}
</script>

<style scoped>
.dialog_diy>>>.el-dialog {
    height: auto;
    margin: 15vh auto 0 !important;
}

.dialog_diy>>>.el-dialog__header {
    background: #454545 !important;
    padding: 15px 20px;
}

.dialog_diy>>>.el-dialog__body {
    height: calc(100% - 124px);
    box-sizing: border-box;
    padding: 0px;
}


.dialog_diy>>>.el-dialog__title {
    color: #fff;
}

.dialog_diy>>>.el-dialog__headerbtn {
    top: 19px;
}

.dialog_diy>>>.el-dialog__headerbtn .el-dialog__close {
    color: #fff;
}

.dialog_diy>>>.el-dialog__headerbtn .el-dialog__close:hover {
    color: #fff;
}


.dialog_diy>>>.el-dialog__body,
.dialog_diy>>>.el-dialog__footer {
    background: #fafafa;
}

.binfo_input {
    width: 100%;
    margin: 0;
    padding: 5px 7px;
    display: block;
    min-width: 0;
    outline: none;
    box-sizing: border-box;
    background: none;
    border: none;
    border-radius: 4px;
    background: #fff;
    font-size: 15px;
    resize: none;
    font-family: "Microsoft YaHei";
    min-height: 48px;
    /* border: 1px solid #3682fc00; */
    border: 1.5px solid #cad1dc;
}

.binfo_textarea {
    border: 1.5px solid #cad1dc;
    font-size: 15px;
    resize: none;
    /* background: #f6f6f6; */
    font-family: "Microsoft YaHei";
}

.binfo_input:focus-visible {
    border: 1.5px solid #3681fc !important;
}


.t_box {
    display: flex;
    margin-bottom: 15px;
}

.t_box>span:nth-child(1) {
    min-width: 80px;
    font-size: 16px;
    color: #000;
}
</style>