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

<template>
    <el-dialog title="智能检索" :visible.sync="dialogVisibleAiCreateVideo" :append-to-body="true" width="90%"
        :before-close="handleClose" class="dialog_diy">
        <div style="box-sizing:border-box;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="nav_box">
                <div class="nav" :class="{ active: navActive == 0 }" @click="navClick(0)">综合排序</div>
                <div class="nav" :class="{ active: navActive == 1 }" @click="navClick(1)">最多播放</div>
                <div class="nav" :class="{ active: navActive == 2 }" @click="navClick(2)">最新发布</div>
                <div class="nav" :class="{ active: navActive == 3 }" @click="navClick(3)">最多弹幕</div>
                <div class="nav" :class="{ active: navActive == 4 }" @click="navClick(4)">最多收藏</div>
            </div>
            <div class="Box">
                <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="author">作者:{{ item.author }}</span>
                    <span class="detail">{{ item.description }}</span>
                    <div class="tag" v-if="item.tag.split(',').length > 0">
                        <span v-for="(tag, index) in item.tag.split(',')" :key="index">{{ tag }}</span>
                    </div>
                    <div class="btn">
                        <span @click="openUrl(item.bvid)">查看</span>
                        <span @click="checkUrl(item.title, item.bvid)">加入</span>
                    </div>
                </div>
                <div v-if="data.length == 0" class="no_data">暂无数据</div>
            </div>
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button @click="close">关 闭</el-button>
        </span>
    </el-dialog>
</template>

<script>
import { v4 as uuidv4 } from "uuid";
import _ from "lodash";

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: {},
            navActive: 0
        }
    },
    watch: {
        dialogVisibleAiCreateVideo(newValue, oldValue) {
            if (newValue) {
                this.searchA = ""
                this.data = []
                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: "bilibiliNew",
                    keyword: msg,
                    page: 1,
                    page_size: 20,
                    order: this.navActive,
                    duration: 0,
                }).then(response => {
                    console.log(response);
                    // _this.data = [..._this.data,...response.data.FunctionResponse]
                    resolve(response.data.FunctionResponse)
                })
                    .catch((error) => {
                        resolve([])
                        console.log(error);
                    });
            });
        },
        navClick(item) {
            if(this.navActive == item){
                return
            }
            this.navActive = item
            this.searchA()
        },
        async searchA(){
            let _this = this
            try {
                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 = []
                let data2 = []
                for (var a = 0; a < _content.length; a++) {
                    let _data = await _this.aiGet2(_content[a])
                    data2[a] = _data
                }
                _this.data = _.flatMap(_.zip(...data2), (pair) => pair.filter(value => value !== undefined))
                // _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 = 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 = []
                        let data2 = []
                        for (var a = 0; a < _content.length; a++) {
                            let _data = await _this.aiGet2(_content[a])
                            data2[a] = _data
                        }
                        _this.data = _.flatMap(_.zip(...data2), (pair) => pair.filter(value => value !== undefined))
                        // _this.data = _this.data.sort(
                        //     function (a, b) {
                        //         return b.play - a.play;
                        //     }
                        // );
                        _this.againEva2();
                    }else {
                        _this.$message.error("哎呀，请求太多了，服务器忙不过来了，请自行搜索关键词")
                        _this.loading = false
                    }
                    // _this.loading = false

                })
                .catch((error) => {
                    console.log(error);
                    _this.$message.error("哎呀，请求太多了，服务器忙不过来了，请自行搜索关键词")
                    _this.loading = false
                });
        },
        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.$message.error("哎呀，请求太多了，服务器忙不过来了，请自行搜索关键词")
                    _this.loading = false
                });
        },
    },
    mounted () {
        
    },
}
</script>

<style scoped>
@media screen and (max-width: 1080px) {
.video_box {
    width: calc(100% / 3 - 10px) !important;
  }
}
@media screen and (max-width: 760px) {
.video_box {
    width: calc(100% / 2 - 10px) !important;
  }
}
.dialog_diy>>>.el-dialog {
    height: auto;
    margin: 50px 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: 500px;
    overflow: auto;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    flex-wrap: wrap;
    padding: 5px;
    box-sizing: border-box;
}

.video_box {
    width: calc(100% / 4 - 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;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3; /* 显示3行文本 */
    overflow: hidden;
    text-overflow: ellipsis; /* 超出部分显示点点点 */
    margin: 0 0 5px;
}

.video_box>.name {
    color: #000;
    margin: 5px 0;
    height: 32px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2; /* 显示3行文本 */
    overflow: hidden;
    text-overflow: ellipsis; /* 超出部分显示点点点 */
}

.video_box>.author{
    margin: 0 0 5px;
    width: 100%;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis; /* 超出部分显示点点点 */
    white-space: nowrap;
}

.video_box>.tag{
    display: flex;
    flex-wrap: wrap;
    margin-top: auto;
}

.video_box>.tag>span{
    background-color: #007bff;
    color: white;
    padding: 5px 10px;
    border-radius: 15px;
    font-size: 0.9em;
    margin: 0 0 5px 5px;
}

.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;
}


.nav_box {
    display: flex;
    margin-bottom: 10px;
    align-content: center;
}

.nav_box .nav{
    padding: 8px 10px;
    color: #060e17;
    border-radius: 5px;
    cursor: pointer;
}

.nav_box .nav.active{
    background: #eef3fb;
    font-weight: bold;
    color: #0061ff;
}

.nav_box .nav + .nav{
    margin-left: 20px;
}

.no_data{
    height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 500px;
}
</style>