| 前端+Python实现Live2D虚拟直播姬 | 您所在的位置：网站首页 › 女孩子嘴型 › 前端+Python实现Live2D虚拟直播姬 |
前端+Python实现Live2D虚拟直播姬
|
写在前面
很早就在b站上看到有虚拟主播的方案，之前看到的方案主要分为3种： ①用的unity+live2d ②有的用的steam的Vtube Studio这款软件 ③也有基于galgame的。基于纯前端和python的我好像没找到，在掘金看到一篇文章：juejin.cn/post/720474… ，使用的pixi-live2d-display这个纯前端es6就可以实现前端的表情控制。不过这个没写口型的控制。对于pixi-live2d-display的口型控制，我在这个 github.com/itorr/itorr… 找到了方案。 下面介绍我实现的live2d虚拟直播姬Demo的过程，代码放在了：github.com/nladuo/live… 视频效果见B站：www.bilibili.com/video/BV1iX… 前端Live2D虚拟形象前端的虚拟形象就是用的pixi-live2d-display，我用vite的vue模版建了一个工程（后来发现用不到vue，本人前端小白哈），首先调通了嘴型的控制，也就是通过按钮来控制嘴型闭合。 HTML代码： Live2d display control 张嘴 闭嘴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本身自带的一堆动作，模型文件删的差不多了，就剩下基本的: github.com/nladuo/live… { "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" } ] } 效果张嘴 闭嘴 我在网上搜了一些音频和口型的控制很多都是深度学习方法的，不过对于直播姬的要求我觉得没必要那么准确。 这里我拍脑袋想了一种方法，通过声音的响度来控制口型。 这里使用librosa得到音频的时域信息，可以看到声音的幅度随着时间变化的情况，然幅度越大也意味着响度越大，代表张嘴越大。 这里我选择采样间隔为0.1秒，算法如下： 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的嘴型大小，前端再去请求嘴型大小进行控制即可。流程如下： 最后的话就是接入ChatGPT了，这里我用了：pypi.org/project/rev…，使用的prompt如下： 请使用女性化的语言风格，扮演一个正在直播的 vtuber，之后我的输入均为用户评论，请用简短的一句话回答它们吧，每句话不要超过20字，并且不要使用表情，使用纯文字进行回答，不要使用emoji表情。 这里我在ChatGPT首先先创建了一个会话窗口然后在指定的conversation_id进行直播内容互动。 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最后效果如下： （真正跑起来口型会动起来，而且我觉得对的还可以。） 补充说明gTTS的发声感觉其实不像一个直播姬（可爱的女孩子）该有的声音，可以加入VITS训练得到自己喜欢的声音【B站有很多教程这里就不说了】，当然也可以用用别的哈。 |
【本文地址】