pbl-teacher-table/src/components/pages/aiAddCourse/aiCreateVideoDialog copy.vue

<template>
    <el-dialog title="智能检索" :visible.sync="dialogVisibleAiCreateVideo" :append-to-body="true" width="700px"
        :before-close="handleClose" class="dialog_diy">
        <div style="height: 500px;padding:15px" v-loading="loading" element-loading-text="小可正在努力生成中，请稍等...">
            <div style="position: relative; width: 100%;height: 40px;margin-bottom: 10px;">
                <el-input class="inputC" style="height: 100%;" placeholder="搜索视频关键字（如需搜索多个可“，”隔开）" v-model="detail"
                    @keyup.enter.native="searchA()"></el-input>
                <div class="search_img" @click="searchA" style="right: 10px">
                    <img src="../../../assets/icon/search.png" alt />
                </div>
            </div>
            <div class="Box">
                <!-- <div class="video_box" v-for="(item,index) in data" :key="index">
                    <img :src="item.snippet.thumbnails.high.url" />
                    <span class="name">{{ item.snippet.title }}</span> 
                    <span class="detail">{{ item.snippet.description }}</span> 
                    <div class="btn">
                        <span @click="openUrl(item.id.videoId)">查看</span>
                        <span @click="checkUrl(item.snippet.title,item.id.videoId)">加入</span>
                    </div>
                </div> -->
                <div class="video_box video_box2" v-for="(item, index) in data" :key="index">
                    <!-- <img :src="item.pic" /> -->
                    <span class="name" v-html="item.title"></span>
                    <span class="detail">{{ item.description }}</span>
                    <div class="btn">
                        <span @click="openUrl(item.bvid)">查看</span>
                        <span @click="checkUrl(item.title, item.bvid)">加入</span>
                    </div>
                </div>
            </div>
        </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 { v4 as uuidv4 } from "uuid";

export default {
    components: {
    },
    props: {
        dialogVisibleAiCreateVideo: {
            type: Boolean,
            default: false
        },
        courseName: {
            type: String,
            default: ""
        },
        courseState: {
            type: Number,
        },
        lineCount: {
            type: Number,
        },
        unitJson: {
            type: Array,
        }
    },
    // 根据用户给你的参考资料
    data() {
        return {
            userid: this.$route.query.userid,
            radio: 0,
            aiJson: {
                ppt: ``,
                word: '',
                video: ''
            },
            aiUrl: {
                ppt: '',
                word: '',
                video: ''
            },
            detail: "",
            loading: false,
            url: "",
            data: [],
            uJson: {}
        }
    },
    watch: {
        dialogVisibleAiCreateVideo(newValue, oldValue) {
            if (newValue) {
                // if (this.radio == 0) {
                if (this.courseState == 4) {
                    this.detail = this.courseName
                    this.aiGet()
                } else if (this.courseState == 5) {
                    // this.detail = this.unitJson[0].chapterInfo[0].taskJson[this.lineCount].task.replace("任务"+(this.lineCount+1)+"：","")
                    this.againEva()
                }
                // }
                // if (this.radio == 1) {
                //     this.detail = this.aiJson.word
                // }
                // if (this.radio == 2) {
                //     this.detail = this.aiJson.video
                // }
                // this.loading = false

                // this.aiGet()
                // this.againEva()
            }
        },
    },
    methods: {
        handleClose(done) {
            this.close()
            done();
        },
        close() {
            this.$emit('update:dialogVisibleAiCreateVideo', false)
        },
        openUrl(url) {
            // window.open('https://www.youtube.com/embed/'+url)
            window.open(`//www.bilibili.com/video/${url}`)
        },
        checkUrl(name, id) {
            let json = {
                name: "链接",
                title: name.replace(/<[^>]*>?/gm, ''),
                // url: 'https://www.youtube.com/embed/'+id,
                url: `//player.bilibili.com/player.html?isOutside=true&bvid=${id}`,
                type: 8,
            }
            this.$emit('createAiVideo', json)
            this.$message.success('加入成功')
        },
        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
            }
        },
        // async aiGet() {
        //     let _this = this
        //     _this.loading = true
        //     this.ajax
        //         .get(`https://www.googleapis.com/youtube/v3/search?key=AIzaSyBUvNQ5Wyua4PbStE2vp3t7MIY4htry-4M&part=snippet&q=${this.detail}&maxResults=10&type=video&order=relevance&regionCode=HK`)
        //         .then((response) => {
        //             console.log(response);
        //             _this.data = response.data.items
        //             _this.loading = false

        //         })
        //         .catch((error) => {
        //             _this.loading = false
        //             console.log(error);
        //         });
        // },
        async aiGet() {
            let _this = this
            _this.loading = true
            this.ajax.post(`https://gpt4.cocorobo.cn/get_network_search`, {
                engine: "bilibili",
                keyword: this.detail
            }).then(response => {
                console.log(response);
                _this.data = response.data.FunctionResponse
                _this.loading = false

            })
                .catch((error) => {
                    _this.loading = false
                    console.log(error);
                });
        },
        // async aiGet2(msg) {
        //     let _this = this
        //     _this.loading = true
        //     this.ajax
        //         .get(`https://www.googleapis.com/youtube/v3/search?key=AIzaSyBUvNQ5Wyua4PbStE2vp3t7MIY4htry-4M&part=snippet&q=${msg}&maxResults=10&type=video&order=relevance&regionCode=HK`)
        //         .then((response) => {
        //             console.log(response);
        //             _this.data = response.data.items
        //             _this.loading = false

        //         })
        //         .catch((error) => {
        //             _this.loading = false
        //             console.log(error);
        //         });
        // },
        async aiGet2(msg) {
            let _this = this
            return new Promise((resolve, reject) => {
                this.ajax.post(`https://gpt4.cocorobo.cn/get_network_search`, {
                    engine: "bilibili",
                    keyword: msg
                }).then(response => {
                    console.log(response);
                    // _this.data = [..._this.data,...response.data.FunctionResponse]
                    resolve(response.data.FunctionResponse)
                })
                    .catch((error) => {
                        resolve([])
                        console.log(error);
                    });
            });
        },
        async searchA(){
            let _this = this
            if(!_this.detail){
                _this.$message.error("请输入关键字")
                return
            }
            _this.loading = true
            let _content = ""
            if(_this.detail.split("，").length>1){
                _content = _this.detail.split("，")
            }else{
                _content = _this.detail.split(",")
            }
            _this.data = []
            for (var a = 0; a < _content.length; a++) {
                let _data = await _this.aiGet2(_content[a])
                _this.data = [..._this.data, ..._data]
            }
            _this.data = _this.data.sort(
                function (a, b) {
                    return b.play - a.play;
                }
            );
            _this.againEva2();
            // _this.loading = false
        },
        againEva() {
            let _this = this
            _this.loading = true
            let message = `从以下内容中识别出1~2个学科知识点关键词，用于检索知识点相关视频。注意，你仅需要返回关键词，“，”分开。教案：${_this.unitJson[0].chapterInfo[0].taskJson[_this.lineCount].taskDetail3.replaceAll('#', '').replaceAll('*', '').replaceAll('-', '').replaceAll('\n', '')}`
            let parm = {
                assistant_id: 'f8e1ebb2-2e0d-11ef-8bf4-12e77c4cb76b',
                message: [{ "type": "text", "text": message.replaceAll('\n', " ").replaceAll('*', "") }],
                session_name: uuidv4(),
                userId: _this.userid,
                file_ids: [],
                model: 'gpt-4o-2024-08-06',
            }
            _this.ajax
                .post("https://gpt4.cocorobo.cn/ai_agent_park_chat", parm)
                .then(async (response) => {
                    console.log(response);
                    let data = response.data.FunctionResponse
                    if (data.message) {
                        console.log(data.message);

                        let content = data.message;
                        _this.detail = content
                        let _content = content.split("，")
                        if(content.split("，").length>1){
                            _content = content.split("，")
                        }else{
                            _content = content.split(",")
                        }
                        _this.data = []
                        for (var a = 0; a < _content.length; a++) {
                            let _data = await _this.aiGet2(_content[a])
                            _this.data = [..._this.data, ..._data]
                        }
                        _this.data = _this.data.sort(
                            function (a, b) {
                                return b.play - a.play;
                            }
                        );
                        _this.againEva2();
                    }
                    // _this.loading = false

                })
                .catch((error) => {
                    console.log(error);
                    _this.loading = true
                });
        },
        againEva2() {
            let _this = this
            _this.loading = true
            let message = `ATTENTION: Use '##' to SPLIT SECTIONS, not '#'.Output format carefully referenced "Format example".
针对以下视频数组内容，删除其中不适合k12年级的学生在教室里看到的条目，返回以下视频数组不符合的视频的aid，视频数组：${JSON.stringify(_this.data)}

# Format example
[{aid:""},{aid:""}]
`
            let parm = {
              model: 'gpt-4o-2024-08-06',
              temperature: 0,
              max_tokens: 4096,
              top_p: 1,
              frequency_penalty: 0,
              presence_penalty: 0,
              messages: [{
                content: message.replaceAll('\n', " ").replaceAll('*', ""),
                role: 'user'
              }],
              uid: uuidv4(),
              stream: false,
              mind_map_question: "",
            }
            _this.ajax
                .post("https://gpt4.cocorobo.cn/chat", parm)
                .then(async (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);
                        let dArray = []
                        try {
                            dArray = JSON.parse(data.choices[0].message.content.replaceAll('```json','').replaceAll('```',''))
                        } catch (error) {
                            console.log("error_________________" + error);
                            try {
                                let regex = new RegExp("(?<=```json)([\\s\\S]*?)(?=```)");
                                let match = data.choices[0].message.content.match(regex);
                                dArray = JSON.parse(match[0]);
                            } catch (error) {
                                console.log("error_________________" + error);
                            }
                        }

                        let aid = []
                        for(var i = 0; i < dArray.length; i++){
                            aid.push(dArray[i].aid)
                        }
                        _this.data = _this.data.filter(el => {
                            return aid.indexOf(el.aid) === -1
                        })
                        _this.$forceUpdate()
                    }
                    _this.loading = false
                })
                .catch((error) => {
                    console.log(error);
                    _this.loading = true
                });
        },
    },
}
</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;
}

.inputC>>>.el-input__inner {
    padding: '0 35px 0 15px'
}

.search_img {
    width: 20px;
    height: 20px;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
}

.search_img>img {
    width: 100%;
    height: 100%;
}


.Box {
    width: 100%;
    height: calc(100% - 50px);
    overflow: auto;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    flex-wrap: wrap;
}

.video_box {
    width: calc(100% / 2 - 10px);
    /* overflow: hidden; */
    margin-right: 10px;
    display: flex;
    flex-direction: column;
    margin-bottom: 15px;
    cursor: pointer;
}

.video_box>img {
    height: 200px;
    object-fit: cover;
}

.video_box>.detail {
    color: #cecece;
}

.video_box>.name {
    color: #000;
    margin: 5px 0;
    height: 32px;
}

.btn {
    width: 100%;
    height: 35px;
    display: flex;
    align-items: center;
    margin-top: auto;
}

.btn>span:hover {
    background: #4087f1;
}

.btn>span {
    width: 100%;
    height: 100%;
    background: #3681fc;
    color: #fff;
    border-radius: 5px;
    margin-top: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn>span+span {
    margin-left: 10px;
}

.video_box2 {
    box-shadow: 0px 0px 4px 2px #d2d2d282;
    padding: 5px 10px 10px;
    box-sizing: border-box;
    border-radius: 5px;
}
</style>