如何基于ChatGPT+Avatar搭建24小时无人直播间

0 前言

最近朋友圈以及身边很多朋友都在研究GPT开发,做了各种各样的小工具小Demo,AI工具用起来是真的香!在他们的影响下,我也继续捣鼓GPT Demo,希望更多的开发者加入一起多多交流。
上一篇结合即时通 IM SDK捣鼓了一个Demo ChatGPT群聊机器人Demo ,也收到了一些还不错的反馈,有伙伴用于客服场景解放了一部分人工重复工作提升了效率。趁着周末我捣鼓了一个ChatGPT虚拟人直播,结合了同样热门的元宇宙技术。

本文将通过详细开发流程来为大家举例如何快速实现一个虚拟人直播,可用于无人直播场景。ChatGPT虚拟人可抓取直播中粉丝弹幕和评论并回复来进行用户互动,提升直播间的活跃与用户体验。

最终实现效果如下所示:
GPT虚拟人直播

1 实现思路

ChatGPT4.0虚拟人直播,首先得要有2个最基本的能力:ChatGPT4.0接口和虚拟人交互能力,这两块我们后面具体讲。整个流程如下图所示:
在这里插入图片描述

1.需要有具备文字驱动能力的虚拟人。具体来说,需要将文字转为语音,然后虚拟人能根据语音对口型。这里推荐使用即构Avatar,即构Avatar可以捏脸定制,同时具备文字驱动口型能力。
2. 直播推流。抖音、快手可以用直播伴侣实时截屏推流。
3. 获取实时弹幕/评论。虚拟人根据观众发的弹幕或者评论文本数据发送给ChatGPT,可以去github找开源代码。这里提供一个最简单的思路:在网页版注入JS代码,js实时读取网页上的弹幕。
4. 调用ChatGPT。将实时弹幕/评论数据发送给ChatGPT并获取回复。
5. 虚拟人播报ChatGPT的回复。

2 ChatGPT接入

目前openAI提供的接口是ChatGPT3.5,可以直接调用。bing在最新版Edge浏览器提供ChatGPT4.0体验,有一些开源库对其做了二次封装,只需提供Cookie即可体验。这里我们把两种方式都讲解。

2.1 ChatGPT 4.0 接入

首先注册bing账号:
1.前往https://www.microsoft.com/zh-cn/edge/download?ch&form=MA13FJ 下载最新的Edge浏览器。
2. 开启VPN,注册用户或使用已有账号登录,点击右上角「设置」图标,将所在区域设置如下
3. 打开Edge,输入网址https://www.bing.com/search?form=MY0291&OCID=MY0291&q=Bing+AI&showconv=1
在这里插入图片描述
接下来在代码里面封装ChatGPT4.0接口,先安装第三方基于Edge浏览器的库:

npm i @waylaidwanderer/chatgpt-api

接下来二次封装

import { BingAIClient } from '@waylaidwanderer/chatgpt-api';
export class BingGPT {
    /*
    * http_proxy, apiKey
    **/
    constructor(http_proxy, userCookie) {
        this.api = this.init(http_proxy, userCookie); 
    }
    init(http_proxy, userCookie) {
       console.log(http_proxy, userCookie)
        const options = {
            // Necessary for some people in different countries, e.g. China (https://cn.bing.com)
            host: 'https://www.bing.com',
            // "_U" cookie from bing.com
            userToken: userCookie,
            // If the above doesn't work, provide all your cookies as a string instead
            cookies: '',
            // A proxy string like "http://<ip>:<port>"
            proxy: http_proxy,
            // (Optional) Set to true to enable `console.debug()` logging
            debug: false,
        };

        return new BingAIClient(options);
    }
    //调用chatpgt 
    chat(text, cb) {
        var res=""
        var that = this;
        console.log("正在向bing发送提问", text ) 
        this.api.sendMessage(text, { 
            toneStyle: 'balanced',
            onProgress: (token) => { 
                if(token.length==2 && token.charCodeAt(0)==55357&&token.charCodeAt(1)==56842){
                    cb(true, res);
                } 
                res+=token;
            }
        });  
    }
} 

注意到,除了需要提供vpn地址以外,还需要提供cookie数据。cookie可以在Edge浏览器中按F12打开开发工具,点击应用程序Tab,从左侧Cookie中找到_U的value即为想要的cookie,如下图所示:

在这里插入图片描述

2.2 ChatGPT 3.5接入

因为ChatGPT4.0基于浏览器,非官方提供的API,整体会有些不太稳定。而OpenAI官方提供了ChatGPT3.5,相比之下更稳定。

首先要有OpenAI的ChatGPT账号,在这里我们不细讲,不了解的同学可以参考我另一篇文章,链接: 《当我把ChatGPT拉进群聊里,我的朋友都玩疯了》接下来只需安装ChatGPT库:

npm install chatgpt

注意要使用nodejs 18.0以上版本安装,因为国内的IP无法使用ChatGPT,因此必须要有VPN代理。再安装一个代理库:

npm install https-proxy-agent node-fetch

接下来,二次封装一下:

import { ChatGPTAPI } from "chatgpt";
import proxy from "https-proxy-agent";
import nodeFetch from "node-fetch";

export class ChatGPT {
 
    constructor(http_proxy, apiKey) {
        this.api = this.init(http_proxy, apiKey);
        this.conversationId = null;
        this.ParentMessageId = null;
    }
    init(http_proxy, apiKey) {
        console.log(http_proxy, apiKey)
        return new ChatGPTAPI({
            apiKey: apiKey,
            fetch: (url, options = {}) => {
                const defaultOptions = {
                    agent: proxy(http_proxy),
                };

                const mergedOptions = {
                    ...defaultOptions,
                    ...options,
                };

                return nodeFetch(url, mergedOptions);
            },
        });
    }
    //调用chatpgt 
    chat(text, cb) {
        let that = this
        console.log("正在向ChatGPT发送提问:", text)
        that.api.sendMessage(text, {
            conversationId: that.ConversationId,
            parentMessageId: that.ParentMessageId
        }).then(
            function (res) {
                that.ConversationId = res.conversationId
                that.ParentMessageId = res.id
                cb && cb(true, res.text)
            }
        ).catch(function (err) {
            console.log(err)
            cb && cb(false, err);
        });
    }
} 

注意到除了需要提供VPN地址,还需要提供apiKey。登录OpenAI后,打开链接https://platform.openai.com/account/api-keys 即可获取apiKey,如下图所示
在这里插入图片描述

3 虚拟人接入

虚拟人提供商有很多,由于目前我们不仅仅需要有虚拟形象,还需要虚拟人能够说话(ChatGPT提供逻辑思维能力)。因此,我们这里直接选用 即构Avatar,它内置了文本驱动能力,可以很方便将ChatGPT的回复文字内容直接读出来,并有口型匹配。非常适合我们这个场景。

官方提供了非常详细的教程:官方教程地址,本文简单讲解一些关键实现,具体完整代码可以参考文末资源附件。

设置虚拟人形象:

private void setCharacter(User user) {
    String sex = ZegoCharacterHelper.MODEL_ID_MALE;
    if (!user.isMan) sex = ZegoCharacterHelper.MODEL_ID_FEMALE;

    // 创建 helper 简化调用
    // base.bundle 是头模, human.bundle 是全身人模
    mCharacterHelper = new ZegoCharacterHelper(FileUtils.getPhonePath(mApp, "human.bundle", "assets"));
    mCharacterHelper.setExtendPackagePath(FileUtils.getPhonePath(mApp, "Packages", "assets"));
    // 设置形象配置
    mCharacterHelper.setDefaultAvatar(sex);
    // 角色上屏, 必须在 UI 线程, 必须设置过avatar形象后才可调用(用 setDefaultAvatar 或者 setAvatarJson 都可以)
    mCharacterHelper.setCharacterView(user.avatarView, () -> {
    });
    mCharacterHelper.setViewport(ZegoAvatarViewState.half);
    //设置头发、衣服等
    mCharacterHelper.setPackage("ZEGO_Girl_Hair_0001");
    mCharacterHelper.setPackage("ZEGO_Girl_Tshirt_0001_0002");
    mCharacterHelper.setPackage("facepaint5");
    mCharacterHelper.setPackage("irises2"); 
    
    initTextApi();
    updateUser(user); 
}

可以看到,只需简单几行代码即可定制虚拟人“皮肤”,使用非常友好。在文字驱动虚拟人说话方面就更简单:

public void playText(String text) {
    if (mTextApi == null) return;
    mTextApi.playTextExpression(text); 
}

当然了,这里展示的是最关键代码。要想使用即构avatar还需要做一些权鉴认证、引擎初始化等工作,直接复用本文文末提供的代码附件即可。
需要注意的是,官方提供的Demo源码中只有基础资源。换句话说,还有很多非常酷炫的“皮肤”可以使用。但是因为资源太大,不方便打包。如果读者有更多资源需求,可以直接去官网找客服索要。

下面列出一些官方能提供的虚拟形象“皮肤”示例:
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

还有很多捏脸能力,这里不一一描述,感兴趣的同学可以直接去官网 (点击这里)去下载体验app,直接感受一下即构Avatar的强大。

4 基于即构SDK实现虚拟直播

对于B站、抖音、快手等第三方平台,想要做虚拟直播得借助官方提供的推流工具,如直播伴侣等。但官方没有提供实时获取直播间评论(或弹幕)的接口,当然了,你可以用一些技术手段来获取,这里不过多讲解。接下来我们讲解不用第三方平台,自己简单几行代码实现搭建直播平台。

4.1 搭建虚拟人直播平台思路

搭建虚拟直播平台有2个思路:

1.主播实时传输手机画面,观众实时接收主播发送的内容(图像),即构实时音视频RTC 该方案实现 可查看,RTC+Avatar方案可查看。
我之前基于抖音平台做的虚拟人直播Demo, B站、快手等第三方直播平台的实现原理类似。
在这里插入图片描述

2.基于即构ZIM,实时传输文字(文字)

虚拟人直播与其他直播有一个差别是虚拟人是在用户端上使用固定算法渲染出来的,而不是主播实时拍摄的画面。因此我们完全不需要主播实时传输画面(图像),只需通过广播文字内容(相当于群组聊天),观众接收到文字内容后实时渲染虚拟人表情即可。这样可以大大节省带宽成本。

即构ZIM提供全面的IM能力,支持单聊/群聊/房间聊天,可根据实际业务自由组合IM能力。群聊消息稳定可靠、延迟低,全球任何一个地区都有接入服务的节点保障消息到达。 了解更多

4.2 具体实现

从上面两个方案可以看到,对于虚拟直播间来说,使用文字实时传输到每个端上,再本地渲染虚拟人画面,可以做到最低成本。
具体来说,一个直播间可以通过一个房间(room)来管理,在即构IM的房间内,可以使用弹幕功能来实现收发文字。相比发送聊天消息,发送弹幕消息不会被存储,更适合直播间评论功能。用户创建直播间时,底层代码创建的是一个房间,并自动加入ChatGPT这个群成员。ChatGPT在群里接收到数据时,调用ChatGPT接口,得到文字回复后,再转发到群里。每个观众接收到ChatGPT回复的文字后,自动渲染虚拟人播报文字内容。

同样的,这里我们只展示关键代码。创建房间、加入房间、收到实时评论(弹幕)。
创建房间、加入房间:

//创建房间
public void createRoom(String masterId, String roomId, String roomName, CB cb) {
    
    ZIMRoomInfo groupInfo = new ZIMRoomInfo();
    groupInfo.roomID = roomId;
    groupInfo.roomName = roomName;

    zim.createRoom(groupInfo, new ZIMRoomCreatedCallback() {
        @Override
        public void onRoomCreated(ZIMRoomFullInfo roomInfo, ZIMError errorInfo) {
            if (errorInfo.code == ZIMErrorCode.SUCCESS) {

                inviteJoinRoom(masterId, roomId, CHATGPT_ID, cb);//这里把chagpt的用户id硬编码
            } else {
                cb.complete(false, "房号已存在,请更换一个房间号!");
            }
        }
    });
}

//加入房间
public void joinRoom(String roomId, CB cb) {
    zim.joinRoom(roomId, new ZIMRoomJoinedCallback() {
        @Override
        public void onRoomJoined(ZIMRoomFullInfo roomInfo, ZIMError errorInfo) {
            Log.e(TAG, ">>" + errorInfo.code);
            if (errorInfo.code == ZIMErrorCode.ROOM_DOES_NOT_EXIST) {
                cb.complete(false, "房间不存在!");
            } else if (errorInfo.code == ZIMErrorCode.SUCCESS || errorInfo.code == ZIMErrorCode.THE_ROOM_ALREADY_EXISTS) {
                cb.complete(true, roomInfo.baseInfo.roomName);
            }
        }
    });
}

接收到消息

//接收到文字消息
@Override
public void onRcvMsg(Msg msg) { 
    switch (msg.proto) {//判断消息类型
        case ChatGPT: {//来自ChatGPT的消息,语音播报文字
            mZegoMngr.getAvatarMngr().playText(msg.msg);
            sendDM(msg.msg.replace("\n", ""), 0);
            break;
        }
        case DanMu: {//收到弹幕消息,直接在屏幕上展示
            sendDM(msg.msg, msg.extInt);
            break;
        }
        case DismissRoom: {//收到解散房间消息,退出房间
            mZegoMngr.getZIMMngr().leaveRoom(msg.msg, new CB() {
                @Override
                public void complete(boolean succ, String msg) {
                    ShowUtils.alert(RoomActivity.this, "提示", "房间已解散!", new ShowUtils.OnClickOkListener() {
                        @Override
                        public void onOk() {
                            back();
                        }
                    });
                }
            });
            break;
        }
    }
}

5 开源-Github源码

  1. ChatGPT调用代码(nodejs)https://github.com/RTCWang/ChatGPT-Avatar-live?source=CSDNarticle66
  2. 直播客户端客户端(android)https://github.com/RTCWang/ChatGPT-Avatar-live?source=CSDNarticle66

6 ChatGPT虚拟人直播Demo 使用工具

  1. 直播产品:RTC SDK Android Java实时音视频实现流程 - 开发者中心
  2. 语聊房:ZIM SDK Android即时通讯SDK实现基本消息收发功能 - 开发者中心
  3. GPT4.0: New bing
  4. GPT3.5: ChatGPT

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/9984.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

SpringAOP入门基础银行转账实例(进阶版)------------事务处理

SpringAOP入门基础银行转账实例**&#xff08;进阶版&#xff09;**------------事务处理 由上一节讲述的通过Connection和QueryRunner对事务进行的处理(详情可以去我之前写的博客文章&#xff1a;https://blog.csdn.net/m0_56245143/article/details/130069160?spm1001.2014…

VMware vSphere 8.0c - 企业级工作负载平台

ESXi 8.0.0 & vCenter Server 8.0.0 GA (General Availability) 请访问原文链接&#xff1a;https://sysin.org/blog/vmware-vsphere-8/&#xff0c;查看最新版。原创作品&#xff0c;转载请保留出处。 作者主页&#xff1a;sysin.org 2023-03-30, VMware vSphere 8.0c 发…

静态库与动态库

库是已经写好的、成熟的、可复用的代码。在我们的开发的应用中经常有一些公共代码是需要反复使用的&#xff0c;就把这些代码编译为库文件。库可以简单看成一组目标文件的集合&#xff0c;将这些目标文件经过压缩打包之后形成的一个可执行代码的二进制文件。库有两种&#xff1…

Ubuntu硬盘分区、挂载

文章目录1、使用命令查看硬盘情况2、分区3、格式化分区4、挂载手动挂载自动挂载1、使用命令查看硬盘情况 sudo fdisk -l 可以看到这里有个未分区的4T硬盘 如&#xff1a;sdb 这样的是硬盘 sdb1 sdb2 这样的是分区&#xff0c;现在还没分区 2、分区 sudo parted /dev/sdb (s…

一切都是命中注定的!

“光锥之内就是命运”&#xff0c;这是刘慈欣的《三体黑暗森林》里一句话&#xff0c;如果我们看到一件事情正在发生&#xff0c;那么它早在过去无论是几秒前还是几千年前&#xff0c;就已经发生了&#xff0c;我们无法改变这个命运。 孔明叹曰&#xff1a;“谋事在人&#xf…

树莓派通过网线连接笔记本实现笔记本电脑Wifi的网络共享

基于windows电脑连接树莓派进行设置&#xff1a;通过通过一根网线&#xff0c;连接树莓派和电脑&#xff0c;使电脑和树莓派构成一个局域网&#xff0c;然后树莓派接收来自笔记本电脑wifi网络的共享网络。操作方法类似台式机通过网线共享笔记本电脑无线网络的步骤 1、 保证笔记…

总结816

学习目标&#xff1a; 4月&#xff08;复习完高数18讲内容&#xff0c;背诵21篇短文&#xff0c;熟词僻义300词基础词&#xff09; 学习内容&#xff1a; 高等数学&#xff1a;一元积分&#xff0c;算是彻底过一遍了&#xff0c;但还是需要再回顾一遍。今日一道变限积分求导出…

简单的单目测距实验

一、原理 简单的单目测距方法&#xff0c;假设相机平面和物体平面平行&#xff0c;相机正对着物体表面拍摄&#xff0c;则可以利用相似三角形法。 用相似三角形计算物体或者目标到相机的距离&#xff0c;将使用相似三角形来计算相机到一个已知的物体或者目标的距离。 假设有…

执行数学的运算

数学是计算机编程的重要能力。遗憾的是&#xff0c;对shell脚本来说&#xff0c;这个处理过程比较麻烦。在shell脚本中两种途径来进行数学运算。 expr命令 最开始&#xff0c;Bourne shell提供了一个特别的命令用来处理数学表达式。expr命令允许在命令行上处理数学数学表达式。…

算法学习day59

算法学习day591.力扣503.下一个更大元素II1.1 题目描述1.2 分析1.3代码2.力扣42. 接雨水2.1 题目描述2.2 分析2.3 代码3.参考资料1.力扣503.下一个更大元素II 1.1 题目描述 题目描述&#xff1a; 给定一个循环数组&#xff08;最后一个元素的下一个元素是数组的第一个元素&a…

【Java 并发编程】一文了解线程间有哪些通信方式?

一文了解线程间有哪些通信方式&#xff1f;1. synchronized 内置锁2. volatile 关键字3. 等待/通知机制3.1 等待wait()wait(long)wait(long, int)等待方需遵循如下原则3.2 通知notify()notifyAll()通知方需遵循如下原则notify() 和 notifyAll() 应该用谁&#xff1f;4. 管道输入…

BusterNet网络Python模型实现学习笔记一

实在是无力吐槽了&#xff0c;心力交瘁。作者Github仓库给了错误的 USCISI-CMFD-Small 数据集。自己捣鼓了半天&#xff0c;发现原来是压缩之后数据集&#xff0c;也就是 LMDB 文件格式出错了。实在是误人子弟&#xff0c;自己已经气急败坏了现在… 但是既然论文都花那么长时间…

数据分析之Pandas 基础入门

一、初始Pandas pandas 是数据分析三大件之一&#xff0c;是Python的核心分析库&#xff0c;它提供了快捷、灵活、明确的数据结构&#xff0c;它能够简单、直观、快速的处理各种类型的数据结构。 pandas 支持的数据结构如下&#xff1a; SQL 或Excel 类似的数据有序或无序的…

【学习笔记】unity脚本学习(三)(向量 Vector3)

目录向量复习高中向量基础【数学】向量的四则运算、点积、叉积、正交基叉乘公式叉乘运算定理向量、坐标系点积叉积Vector3 三维向量静态变量变量变量normalized 与 Normalize() 方法静态方法ClampMagnitudeCrossDistanceDotMoveTowards其他变换类似Lerp 在两个点之间进行线性插…

实现一个简单但有趣的AR效果(Web)

有人说:一个人从1岁活到80岁很平凡,但如果从80岁倒着活,那么一半以上的人都可能不凡。 生活没有捷径,我们踩过的坑都成为了生活的经验,这些经验越早知道,你要走的弯路就会越少。

MySQL 库操作

目录 创建数据库 语法 案例 字符集和校验规则&#xff08;建数据库/建表用&#xff09; 查看系统默认字符集以及校验规则 db.opt 更改 查看数据库支持的字符集 查看数据库支持的字符集校验规则 校验规则对数据库的影响 排升序 操纵数据库 查看数据库 显示创建语…

洛谷P2822:组合数问题 ←(帕斯卡法则+取模+前缀和)

【题目来源】https://www.luogu.com.cn/problem/P2822https://www.acwing.com/problem/content/525/【题目描述】 组合数​表示的是从n个物品中选出m个物品的方案数。举个例子&#xff1a;从(1,2,3)三个物品中选择两个物品可以有(1,2)&#xff0c;(1,3)&#xff0c;(2,3) 这三种…

MySQl_1

一.相关概念 数据库&#xff1a;存放数据的仓库 数据库管理系统&#xff1a;操作和管理数据库的大型软件&#xff0c;如mysql SQL&#xff1a;一种操作 关系型数据库管理系统的语言&#xff0c;定义了一套操作关系型数据库管理系统的统一标准。 关系型数据库&#xff1a;有多…

客户案例 | 迎接智能化浪潮,传统水厂数字化势在必行

关键发现 客户痛点&#xff1a;传统水厂业务离散&#xff0c;无法实现数据实时同步&#xff0c;为收集和分析处理数据并辅助决策带来障碍。需要智能化管理系统帮助水厂提升管理效率&#xff0c;优化管理流程&#xff0c;实现数字化、智能化的目标。 解决方案&#xff1a;天津腾…

PyTorch深度学习实战 | 基于ResNet的人脸关键点检测

人脸关键点检测指的是用于标定人脸五官和轮廓位置的一系列特征点的检测&#xff0c;是对于人脸形状的稀疏表示。关键点的精确定位可以为后续应用提供十分丰富的信息。因此&#xff0c;人脸关键点检测是人脸分析领域的基础技术之一。许多应用场景(如人脸识别、人脸三维重塑、表情…