项目发起:云端源想
项目描述
GPT带来的智能化变革正在推动虚拟数字人产业迅猛发展。在AI技术的赋能下,增强数字虚拟人已经具备了多模态交互能力。数字人创作已经迈入AIGC时代,数字人产业也进入了蓬勃发展期。本课程以项目实战的方式,基于ChatGPT完成AI数字虚拟人,打造专属对话虚拟人。通过语音唤醒、识别及合成、前后端快速搭建等技术,使用户具备将AI技术真实落地工作中,高效快速提高自身核心竞争力。
应用场景
直播带货:AI数字人通过模拟人类的面部表情和语言,能够在直播平台上进行商品展示和推广,为消费者提供更加个性化和互动的购物体验
客户服务:在客户服务领域,AI数字人可以利用自然语言处理和智能推荐技术,为用户提供在线咨询解答和服务支持,提高服务效率和用户 满意度。
教育培训:AI数字人可以作为在线教育的一部分,通过直播和互动方式,为学生提供个性化的教学和辅导,帮助学生更有效地学习和掌握知 识。
游戏和动画:在游戏和动画产业中,AI数字人可以扮演角色或非玩家角色(NPC),与玩家进行互动,增强游戏的趣味性和沉浸感。
虚拟现实:AI数字人可以在虚拟现实(VR)环境中与用户互动,提供沉浸式的虚拟体验,如虚拟旅游、虚拟培训等。
智慧展厅:AI数字人可以作为虚拟讲解员,在智慧展厅中为访客提供信息和导览服务,提升参观体验。
电商虚拟直播:在电子商务领域,AI数字人可以进行虚拟直播,为线上购物提供创新的展示方式。
元宇宙主角:随着元宇宙概念的兴起,AI数字人有望成为用户在虚拟世界中的代表或伙伴,拓展数字人的应用范围。
健康管理:结合生理数据监测,AI数字人可能在未来扮演个人健康顾问的角色,提供健康建议和生活方式指导。
娱乐伴侣:AI数字人还可以作为虚拟伴侣,参与影视剧制作或提供陪伴服务,满足用户的情感交流需求。
技术选型参考
前端:Vue3
后端:SpringBoot
AI数字人:UE5+ChatGPT
功能点
3D 人物形象合成:确保虚拟数字人能够在多种平台上运行,例如网页、移动设备等
语音服务接入:实现语音识别和合成,允许用户与虚拟数字人进行语音交互。
UI界面联动:设计用户界面,使得虚拟数字人可以通过图形界面与用户进行互动对话。
智能回复:通过ChatGPT,使虚拟数字人具备从交互中学习的能力,提高其智能水平和服务质量
实时响应:确保虚拟数字人能够实时响应用户的输入,提供即时的反馈和互动
个性化定制: 根据不同的应用场景和用户需求,定制个性化的虚拟数字人形象和行为特征
项目实现参考
- 前端实现:
使用Vue3框架构建数字人互动页面。
2. 后端开发:
基于SpringBoot搭建RESTful API服务,整合AI 相关API,最终实现AI虚拟数字人的实时交互功能。
基于ChatGPT的AI数字虚拟人开发教程
一、项目架构设计
1. 技术架构图
┌───────────────┐ ┌───────────────┐ ┌───────────────┐
│ 前端 │ │ 后端 │ │ AI服务 │
│ (Vue3) │◄─────►│ (SpringBoot) │◄─────►│ (ChatGPT/UE5)│
└───────────────┘ HTTP └───────────────┘ REST └───────────────┘▲ WebSocket ▲│ │
┌──────┴───────┐ ┌───────┴───────┐
│ 用户交互层 │ │ 业务逻辑层 │
│ 语音/UI/3D │ │ API路由/数据处理│
└──────────────┘ └───────────────┘
2. 模块划分
- 前端:3D数字人展示、语音交互、UI界面
- 后端:API服务、AI接口代理、数据存储
- AI服务:ChatGPT对话生成、UE5数字人动画驱动
二、环境准备
1. 开发工具
- 前端:VSCode + Vue CLI + Three.js/Babylon.js
- 后端:IntelliJ IDEA + JDK 17 + Maven
- AI数字人:Unreal Engine 5 + ChatGPT API
- 语音服务:阿里云智能语音交互(免费试用)
2. 依赖安装
前端:
npm install vue@next vue-router@4 axios three babylonjs
npm install @vueuse/core # 工具库
后端(pom.xml
):
<dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency><groupId>com.squareup.okhttp3</groupId><artifactId>okhttp</artifactId><version>4.10.0</version>
</dependency>
三、核心功能实现
1. 3D数字人集成(UE5 → Web)
步骤:
-
UE5模型导出:
- 在UE5中完成数字人建模与动画(骨骼绑定、表情控制)。
- 导出为
.glb
格式(支持Web端渲染)。
-
前端加载模型:
// 使用Three.js加载模型 import * as THREE from 'three'; import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';const loader = new GLTFLoader(); loader.load('digital-human.glb', (gltf) => {const model = gltf.scene;scene.add(model);// 绑定动画控制器const mixer = new THREE.AnimationMixer(model);const action = mixer.clipAction(gltf.animations[0]);action.play(); });
2. 语音交互实现
语音识别与合成(阿里云API):
// 前端录音与识别
navigator.mediaDevices.getUserMedia({ audio: true }).then(stream => {const recorder = new MediaRecorder(stream);recorder.ondataavailable = async (e) => {const audioBlob = new Blob([e.data], { type: 'audio/wav' });const text = await transcribeAudio(audioBlob); // 调用阿里云ASRconst reply = await getChatGPTResponse(text); // 调用后端APIplayReplyAudio(reply); // 语音合成(TTS)};recorder.start();
});// 后端代理ChatGPT请求(SpringBoot)
@PostMapping("/chat")
public String chat(@RequestBody String userInput) {OkHttpClient client = new OkHttpClient();RequestBody body = RequestBody.create("{\"model\": \"gpt-4\", \"messages\": [{\"role\": \"user\", \"content\": \"" + userInput + "\"}]}",MediaType.parse("application/json"));Request request = new Request.Builder().url("https://api.openai.com/v1/chat/completions").header("Authorization", "Bearer YOUR_API_KEY").post(body).build();try (Response response = client.newCall(request).execute()) {return response.body().string();}
}
3. 数字人动画与UI联动
Vue组件示例:
<template><div><canvas ref="canvas"></canvas><div class="chat-box"><input v-model="userInput" @keyup.enter="sendMessage" /><div v-for="msg in messages" :key="msg.id">{{ msg.text }}</div></div></div>
</template><script>
export default {data() {return {userInput: '',messages: [],};},methods: {async sendMessage() {const response = await axios.post('/api/chat', { text: this.userInput });this.messages.push({ text: response.data });// 触发数字人表情动画this.triggerEmotionAnimation(response.data);},triggerEmotionAnimation(text) {// 根据情感分析结果播放对应动画const emotion = analyzeEmotion(text); // 调用情感分析APIthis.digitalHuman.playAnimation(emotion);}}
};
</script>
四、进阶功能实现
1. 实时响应优化(WebSocket)
后端配置:
@Configuration
@EnableWebSocket
public class WebSocketConfig implements WebSocketConfigurer {@Overridepublic void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {registry.addHandler(new ChatHandler(), "/ws/chat").setAllowedOrigins("*");}
}public class ChatHandler extends TextWebSocketHandler {@Overrideprotected void handleTextMessage(WebSocketSession session, TextMessage message) {String reply = getChatGPTResponse(message.getPayload());session.sendMessage(new TextMessage(reply));}
}
前端连接:
const socket = new WebSocket('ws://localhost:8080/ws/chat');
socket.onmessage = (event) => {this.messages.push({ text: event.data });
};
2. 个性化数字人定制
-
外观配置:
<template><div><input type="color" v-model="skinColor" @change="updateModelColor" /><input type="range" v-model="height" @input="updateModelHeight" /></div> </template>
-
行为规则引擎:
// 根据用户输入动态切换动画 if (userInput.includes("跳舞")) {model.playAnimation('dance'); } else if (userInput.includes("挥手")) {model.playAnimation('wave'); }
五、部署与优化
1. 生产环境部署
-
前端:
npm run build # 部署到Nginx location / {root /var/www/digital-human;try_files $uri $uri/ /index.html; }
-
后端:
mvn clean package java -jar target/digital-human.jar --server.port=8080
2. 性能优化
- CDN加速:静态资源托管到阿里云OSS + CDN
- 缓存策略:
@Cacheable(value = "chatResponses", key = "#userInput") public String getCachedResponse(String userInput) {// 缓存高频对话 }
六、扩展场景示例
直播带货集成
// 弹幕互动驱动数字人
socket.on('danmaku', (msg) => {if (msg.includes("价格")) {digitalHuman.speak("这款商品限时折扣中,点击下方链接购买!");}
});
教育场景(代码交互)
// 学生输入代码,数字人实时反馈
if (userCode.includes("for loop")) {digitalHuman.speak("你的循环逻辑可能需要优化时间复杂度!");
}
七、完整代码仓库
一、项目完整代码结构
1. 前端项目(Vue3)
digital-human-vue/
├─ public/
│ ├─ digital-human.glb # UE5导出的3D模型文件
├─ src/
│ ├─ assets/ # 静态资源
│ ├─ components/
│ │ ├─ DigitalHuman.vue # 3D数字人组件
│ │ ├─ ChatBox.vue # 聊天交互组件
│ ├─ utils/
│ │ ├─ voice.js # 语音识别与合成封装
│ │ ├─ websocket.js # WebSocket通信封装
│ ├─ App.vue
│ ├─ main.js
关键代码:DigitalHuman.vue
<template><div ref="canvasContainer" class="canvas-container"></div>
</template><script>
import * as THREE from 'three';
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';export default {mounted() {this.initScene();this.loadModel();},methods: {initScene() {// 初始化Three.js场景this.scene = new THREE.Scene();this.camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);this.renderer = new THREE.WebGLRenderer({ antialias: true });this.renderer.setSize(window.innerWidth, window.innerHeight);this.$refs.canvasContainer.appendChild(this.renderer.domElement);},async loadModel() {const loader = new GLTFLoader();const gltf = await loader.loadAsync('/digital-human.glb');this.model = gltf.scene;this.scene.add(this.model);// 绑定动画this.mixer = new THREE.AnimationMixer(this.model);this.clips = gltf.animations;},playAnimation(name) {// 根据名称播放动画(如idle, wave, dance)const clip = this.clips.find(clip => clip.name === name);if (clip) this.mixer.clipAction(clip).play();}}
};
</script>
2. 后端项目(SpringBoot)
digital-human-springboot/
├─ src/main/java/com/example/
│ ├─ config/
│ │ ├─ WebSocketConfig.java # WebSocket配置
│ ├─ controller/
│ │ ├─ ChatController.java # ChatGPT API代理
│ ├─ service/
│ │ ├─ ChatGPTService.java # OpenAI请求封装
│ ├─ Application.java
关键代码:ChatGPTService.java
@Service
public class ChatGPTService {private static final String OPENAI_URL = "https://api.openai.com/v1/chat/completions";@Value("${openai.api-key}")private String apiKey;public String getChatResponse(String message) throws IOException {OkHttpClient client = new OkHttpClient();// 构建请求体String jsonBody = String.format("{\"model\": \"gpt-4\", \"messages\": [{\"role\": \"user\", \"content\": \"%s\"}]}", message);RequestBody body = RequestBody.create(jsonBody, MediaType.parse("application/json"));Request request = new Request.Builder().url(OPENAI_URL).post(body).addHeader("Authorization", "Bearer " + apiKey).build();try (Response response = client.newCall(request).execute()) {if (!response.isSuccessful()) throw new IOException("Unexpected code " + response);// 解析响应JsonNode rootNode = new ObjectMapper().readTree(response.body().string());return rootNode.get("choices").get(0).get("message").get("content").asText();}}
}
二、关键配置说明
1. 前端环境变量(.env
)
VUE_APP_WS_URL=ws://localhost:8080/ws/chat
VUE_APP_VOICE_KEY=your-aliyun-voice-key
2. 后端配置(application.properties
)
# OpenAI
openai.api-key=your-openai-api-key# SpringBoot
server.port=8080
spring.servlet.multipart.max-file-size=10MB
三、本地运行步骤
1. 启动后端
cd digital-human-springboot
mvn spring-boot:run
2. 启动前端
cd digital-human-vue
npm install
npm run serve
3. 测试交互
- 访问
http://localhost:8081
- 点击麦克风按钮说话 → 数字人将通过语音回复
- 在输入框输入文字 → 数字人口型与表情同步变化
四、常见问题解决
1. 3D模型无法加载
- 检查模型路径:确保
.glb
文件在public
目录 - 跨域问题:开发模式下配置代理(
vue.config.js
):module.exports = {devServer: {proxy: {'/api': {target: 'http://localhost:8080',changeOrigin: true}}} };
2. WebSocket连接失败
- 检查后端是否启用WebSocket支持
- 前端代码中确认
VUE_APP_WS_URL
配置正确
五、扩展功能实现
1. 情感分析驱动表情
// 在ChatBox.vue中扩展
async sendMessage() {const response = await axios.post('/api/chat', { text: this.userInput });// 调用情感分析API(示例使用NLP.js)const emotion = await axios.post('/api/emotion', { text: response.data });this.$refs.digitalHuman.playEmotion(emotion.data.type); // 如happy, angry
}
2. 数字人换装系统
<template><div><button @click="changeClothes('casual')">休闲装</button><button @click="changeClothes('formal')">正装</button></div>
</template><script>
export default {methods: {async changeClothes(style) {// 动态加载不同服装模型const gltf = await this.loader.loadAsync(`/models/${style}.glb`);this.model.children[0].geometry = gltf.scene.children[0].geometry;}}
};
</script>
通过本教程,您将掌握从3D建模到AI对话引擎集成的全流程开发能力,快速构建可落地的智能数字人应用。