chatgpt实现抖音直播虚拟数字人说话聊天动画效果代码-html代码-BFW代码库

chatgpt实现抖音直播虚拟数字人说话聊天动画效果代码

代码语言：html

所属分类：其他

代码描述：chatgpt实现抖音直播虚拟数字人说话聊天动画效果代码，用户提问后回答，可改变声音或自己修改图片换成自己的角色，结合抖音直播公屏抓取技术可实现与观众互动。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<html lang="en">

<head>

    <meta charset="UTF-8">

    <style>
        body{
            background: white;
            padding: 0;
            margin: 0;
            display: flex;
        }
      
            .master-animation {
            
             filter:brightness(110%);
          
           
              width: 440px;
              display: block;
              
              
            }
            #messagelist{
                height: 70vh;
                padding: 0;
                list-style: none;
                margin: 0;
            }
            .my{
                padding: 10px;
                color: green;
                
            }
            .gpt{
                 padding: 10px;
                text-align: right;
                color: blue;
            }
    </style>

</head>

<body>

   
 <img class="master-animation" src="//repo.bfw.wiki/bfwrepo/images/avatar/Image2.jpg" alt="blinking master animation">
    <div style="padding:20px;">
        <ul id="messagelist">
            
        </ul>
         <textarea id="saytext" placeholder="请输入说话内容">你好</textarea>
    <button id="sbtn">
        提问
    </button>
    <span id="leftnum"> </span>
        
    </div>

    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/axios-0.18.js"></script>
    <script>
 

        var quene = [];
        var issaying=false;
        
        const $element = $('.master-animation');
        const imagePath = '//repo.bfw.wiki/bfwrepo/images/avatar';
        const totalFrames =3;
        const animationDuration = 1000;
        const timePerFrame = animationDuration / totalFrames;
        let timeWhenLastUpdate;
        let timeFromLastUpdate;
        let frameNumber = 1;

          


function askchagpt(word){
    document.getElementById("sbtn").disabled=true;
    $("#messagelist").append("<li class='my'>"+word+"</li>");
    	 axios.post('https://5c64cfef73f6be2474c19990a0c1eb6b.debug.test.bfw.wiki/Api/Chatgpt/Talk', {
                            words: word
                           
                        }, {
                      headers: {
                          'Content-Type': 'application/x-www-form-urlencoded',

                      }
                  })
                  .then(function(response) {
                       document.getElementById("sbtn").disabled=false;
                      	if(response.data.err){
                      	    alert(response.data.data);
                      	}else{
                      	    $("#messagelist").append("<li class='gpt'>"+response.data.data+"</li>");
                      	    say(response.data.data);
                      	}
                     
                      

                  })
                  .catch(function(error) {
                       document.getElementById("sbtn").disabled=false;
                       alert("出错了");
                .........完整代码请登录后点击上方下载按钮下载查看