Live2d display control

## 写在前面很早就在b站上看到有虚拟主播的方案，之前看到的方案主要分为3种： * ①用的unity+live2d * ②有的用的steam的Vtube Studio这款软件 * ③也有基于galgame的。基于纯前端和python的我好像没找到，在掘金看到一篇文章：，使用的pixi-live2d-display这个纯前端es6就可以实现前端的表情控制。不过这个没写口型的控制。对于pixi-live2d-display的口型控制，我在这个找到了方案。下面介绍我实现的live2d虚拟直播姬Demo的过程，代码放在了：视频效果见B站： ## 前端Live2D虚拟形象前端的虚拟形象就是用的pixi-live2d-display，我用vite的vue模版建了一个工程（后来发现用不到vue，本人前端小白哈），首先调通了嘴型的控制，也就是通过按钮来控制嘴型闭合。 HTML代码： ```html Live2d display control

``` JS代码： ```js import * as PIXI from 'pixi.js'; import { Live2DModel } from 'pixi-live2d-display/cubism4'; window.PIXI = PIXI; const app = new PIXI.Application({ view: document.getElementById("canvas2"), autoStart: true, // resizeTo: window }); const cubism4Model = "assets/haru/haru_greeter_t03.model3.json"; const model = await Live2DModel.from(cubism4Model); app.stage.addChild(model); // transforms model.x = 900; model.y = 0; model.rotation = Math.PI; model.skew.x = Math.PI; model.scale.set(0.45); // 设置嘴型 const setMouthOpenY = v=>{ v = Math.max(0,Math.min(1,v)); model.internalModel.coreModel.setParameterValueById('ParamMouthOpenY',v); } document.getElementById("mbtn").onclick = () =>{ setMouthOpenY(1) } document.getElementById("mbtn2").onclick = () =>{ setMouthOpenY(0) } ``` 这里通过`setMouthOpenY`来设置嘴型开闭，1为张嘴，0为闭嘴。 ### live2d模型修改因为要控制口型，需要删掉live2d本身自带的一堆动作，模型文件删的差不多了，就剩下基本的: ```json { "Version": 3, "FileReferences": { "Moc": "haru_greeter_t03.moc3", "Textures": [ "haru_greeter_t03.2048/texture_00.png", "haru_greeter_t03.2048/texture_01.png" ], "Expressions": [ ], "Motions": { } }, "Groups": [ { "Target": "Parameter", "Name": "EyeBlink", "Ids": [ "ParamEyeLOpen", "ParamEyeROpen" ] } ], "HitAreas": [ { "Id": "HitArea", "Name": "Head" }, { "Id": "HitArea2", "Name": "Body" } ] } ``` ### 效果张嘴 ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/25f0c5b11ac64d8fa9bab2a512f7d57a~tplv-k3u1fbpfcp-watermark.image?) 闭嘴 ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/249db57a315746f982ba73da893168a6~tplv-k3u1fbpfcp-watermark.image?) ## 音频和虚拟形象嘴型对应我在网上搜了一些音频和口型的控制很多都是深度学习方法的，不过对于直播姬的要求我觉得没必要那么准确。这里我拍脑袋想了一种方法，通过声音的响度来控制口型。这里使用librosa得到音频的时域信息，可以看到声音的幅度随着时间变化的情况，然幅度越大也意味着响度越大，代表张嘴越大。 ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/665be5a5fefd4d47a6afe186ab13155b~tplv-k3u1fbpfcp-watermark.image?) 这里我选择采样间隔为0.1秒，算法如下： ```python def my_tts(text, save_path): tts = gTTS(text, lang="zh-CN") tts.save(save_path) def tts_and_play_audio(text): tmp_audio_path = 'tmp.mp3' my_tts(text, tmp_audio_path) pygame.mixer.init() pygame.mixer.music.load(tmp_audio_path) pygame.mixer.music.set_volume(0.8) x , sr = librosa.load(tmp_audio_path, sr=8000) x = x - min(x) x = x / max(x) x= np.log(x) + 1 x = x / max(x) * 1.2 pygame.mixer.music.play() s_time = time.time() try: for _ in range(int(len(x) / 800)): it = x[int((time.time() - s_time) * 8000)+1] if it < 0: it = 0 with open("tmp.txt", "w") as f: f.write(str(float(it))) time.sleep(0.1) except: pass time.sleep(0.1) with open("tmp.txt", "w") as f: f.write("0") ``` 这里我使用了`gTTS`来做文字转声音，把tts的输出的音频通过pygame进行后台播放，同时根据时间来控制嘴的大小，把嘴型的大小写到tmp.txt文件中。 ### 前后端控制然后写个后端不断的读取tmp.txt的嘴型大小，前端再去请求嘴型大小进行控制即可。流程如下： ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a13ff32cb0d74173a558f1471f55cecf~tplv-k3u1fbpfcp-watermark.image?) ## 接入ChatGPT 最后的话就是接入ChatGPT了，这里我用了：，使用的prompt如下： > 请使用女性化的语言风格，扮演一个正在直播的 vtuber，之后我的输入均为用户评论，请用简短的一句话回答它们吧，每句话不要超过20字，并且不要使用表情，使用纯文字进行回答，不要使用emoji表情。 ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1df44f4d95974caf992b6c39ffcb52a7~tplv-k3u1fbpfcp-watermark.image?) 这里我在ChatGPT首先先创建了一个会话窗口然后在指定的conversation\_id进行直播内容互动。 ```python from revChatGPT.V1 import Chatbot access_token = "浏览器访问https://chat.openai.com/api/auth/session获取" conversation_id = "" chatbot = Chatbot(config={"access_token": access_token}, conversation_id=conversation_id) def ask(prompt): for data in chatbot.ask(prompt): response = data["message"] return response ``` 最后效果如下： ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7784ed3604174da088f6063729408b84~tplv-k3u1fbpfcp-watermark.image?) （真正跑起来口型会动起来，而且我觉得对的还可以。） ## 补充说明 gTTS的发声感觉其实不像一个直播姬（可爱的女孩子）该有的声音，可以加入VITS训练得到自己喜欢的声音【B站有很多教程这里就不说了】，当然也可以用用别的哈。