这是一个完整的全栈交付包，包含Vue3 前端交互界面（集成数字人视频流、ECharts 图表、语音对话）和Docker Compose 一键部署脚本。

姓王名礼

400人浏览 · 2026-03-19 02:37:04

姓王名礼 · 2026-03-19 02:37:04 发布

📂 项目最终目录结构
text

编辑

smart-pool-ai-fullstack/
├── backend/ # 后端代码 (之前提供的 Python 代码)
│ ├── app.py
│ ├── brain_agent/
│ ├── data_engine/
│ ├── digital_human/
│ ├── requirements.txt
│ └── Dockerfile
├── frontend/ # Vue3 前端代码
│ ├── src/
│ │ ├── components/
│ │ │ ├── DigitalHuman.vue # 数字人视频组件
│ │ │ ├── ChatInterface.vue # 对话与图表组件
│ │ │ └── VoiceControl.vue # 语音控制组件
│ │ ├── App.vue
│ │ └── main.js
│ ├── package.json
│ ├── vite.config.js
│ └── Dockerfile
├── docker-compose.yml # 编排文件
└── .env # 环境变量配置

1. 🎨 前端部分 (Vue 3 + TypeScript + ECharts)

1.1 初始化项目

bash

编辑

npm create vite@latest frontend -- --template vue-ts
cd frontend
npm install echarts websocket-async axios

.2 核心组件：src/components/DigitalHuman.vue
功能：渲染 UE5 推流的数字人视频，并根据情感指令切换滤镜/覆盖层。
vue

编辑

<template>
<div class="digital-human-container">

<video
ref="videoRef"
autoplay
playsinline
class="human-video"
:class="currentEmotion"
></video>


<div class="status-badge">{{ currentEmotion }}</div>


<div v-if="!isConnected" class="loading-overlay">
正在连接数字人专家...
</div>
</div>
</template>

const videoRef = ref<HTMLVideoElement | null>(null);
const isConnected = ref(false);
const currentEmotion = ref('calm'); // calm, urgent, happy, concerned

// 接收来自父组件的情感指令
defineExpose({
updateEmotion: (emotion: string) => {
currentEmotion.value = emotion;
// 这里可以添加更复杂的逻辑，比如触发特定的 CSS 动画或叠加层
console.log(`[DigitalHuman] 表情切换为: ${emotion}`);
},
setStream: (stream: MediaStream) => {
if (videoRef.value) {
videoRef.value.srcObject = stream;
isConnected.value = true;
}
}
});

onMounted(() => {
// 实际项目中，这里会建立 WebRTC 连接连接到 UE5 服务器
// 演示模式：模拟一个黑屏或占位图
console.log("数字人组件已挂载");
});
</script>

.human-video {
width: 100%;
height: 100%;
object-fit: cover;
transition: filter 0.3s ease;
}

/* 情感滤镜效果 */
.human-video.urgent {
filter: contrast(1.2) saturate(1.5) hue-rotate(-10deg); /* 偏红，高对比 */
box-shadow: 0 0 20px rgba(255, 0, 0, 0.3) inset;
}
.human-video.happy {
filter: brightness(1.1) saturate(1.2);
}
.human-video.concerned {
filter: grayscale(0.2) brightness(0.9);
}

.status-badge {
position: absolute;
top: 10px;
right: 10px;
background: rgba(0,0,0,0.6);
color: #fff;
padding: 4px 8px;
border-radius: 4px;
font-size: 12px;
text-transform: uppercase;
}

.loading-overlay {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
display: flex;
align-items: center;
justify-content: center;
color: white;
background: rgba(0,0,0,0.8);
}
</style>

.3 核心组件：src/components/ChatInterface.vue
功能：显示对话气泡，动态渲染 ECharts 图表，处理后端指令。
vue

编辑

const messages = ref<any[]>([]);
const inputText = ref('');
const messagesContainer = ref<HTMLElement | null>(null);

// 暴露方法供父组件调用，用于接收后端 WebSocket 消息
const addMessage = (text: string, role: 'user' | 'ai', chartType?: string) => {
const newMsg = {
text,
role,
chartData: chartType ? { type: chartType, mockData: generateMockData(chartType) } : null
};
messages.value.push(newMsg);

nextTick(() => {
scrollToBottom();
if (newMsg.chartData) {
renderChart('chart-' + (messages.value.length - 1), newMsg.chartData);
}
});
};

const generateMockData = (type: string) => {
return type === 'risk'
? [0.1, 0.2, 0.4, 0.9, 0.85, 0.6]
: [24, 24.5, 26, 27.5, 27, 26.5];
};

const sendMessage = () => {
if (!inputText.value.trim()) return;
addMessage(inputText.value, 'user');
// 这里触发父组件的 WebSocket 发送逻辑
emit('send-message', inputText.value);
inputText.value = '';
};

const scrollToBottom = () => {
if (messagesContainer.value) {
messagesContainer.value.scrollTop = messagesContainer.value.scrollHeight;
}
};

const emit = defineEmits(['send-message']);
defineExpose({ addMessage });
</script>

编辑

const humanRef = ref<InstanceType<typeof DigitalHuman> | null>(null);
const chatRef = ref<InstanceType<typeof ChatInterface> | null>(null);
let ws: WebSocket | null = null;

const handleSendMessage = (text: string) => {
if (ws && ws.readyState === WebSocket.OPEN) {
ws.send(text);
}
};

onMounted(() => {
connectWebSocket();
});
</script>

编辑

FROM python:3.9-slim

WORKDIR /app

# 安装系统依赖
RUN apt-get update && apt-get install -y gcc g++ && rm -rf /var/lib/apt/lists/*

COPY requirements.txt .
RUN pip install --no-cache-dir -r requirements.txt

COPY . .

# 暴露端口
EXPOSE 8080

CMD ["uvicorn", "app:app", "--host", "0.0.0.0", "--port", "8080"]
.2 前端 frontend/Dockerfile
dockerfile

编辑

# 构建阶段
FROM node:18-alpine as build-stage
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build

# 生产阶段
FROM nginx:alpine
COPY --from=build-stage /app/dist /usr/share/nginx/html
COPY nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
注意：需要在 frontend/ 下创建一个简单的 nginx.conf：
nginx

编辑

server {
listen 80;
location / {
root /usr/share/nginx/html;
index index.html;
try_files $uri $uri/ /index.html;
}
# 代理 WebSocket 请求到后端 (如果前端和后端域名不同)
location /ws/ {
proxy_pass http://backend:8080/ws/;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
}
}
.3 根目录 docker-compose.yml
功能：一键启动 LLM (vLLM)、后端、前端、向量库 (Milvus)。
yaml

编辑

version: '3.8'

services:
# 1. 大模型推理服务 (需要 NVIDIA GPU)
llm-service:
image: vllm/vllm-openai:latest
command: --model /models/Qwen-14B-Chat --tensor-parallel-size 1 --trust-remote-code
volumes:
- ./models:/models # 请将下载好的 Qwen 模型放在此目录
ports:
- "8000:8000"
deploy:
resources:
reservations:
devices:
- driver: nvidia
count: 1
capabilities: [gpu]
restart: always

# 2. 向量数据库 (Milvus)
milvus:
image: milvusdb/milvus:v2.3.0
environment:
- ETCD_ENDPOINTS=etcd:2379
- MINIO_ADDRESS=minio:9000
depends_on:
- etcd
- minio
ports:
- "19530:19530"
volumes:
- milvus_data:/var/lib/milvus

# 简化版：Etcd 和 Minio (Milvus 依赖)
etcd:
image: quay.io/coreos/etcd:v3.5.5
environment:
- ETCD_AUTO_COMPACTION_MODE=revision
- ETCD_AUTO_COMPACTION_RETENTION=1000
volumes:
- etcd_data:/etcd
minio:
image: minio/minio:RELEASE.2023-03-20T20-16-18Z
command: server /minio_data
environment:
- MINIO_ROOT_USER=minioadmin
- MINIO_ROOT_PASSWORD=minioadmin
volumes:
- minio_data:/minio_data

# 3. 后端 API 服务
backend:
build: ./backend
ports:
- "8080:8080"
environment:
- LLM_URL=http://llm-service:8000/v1
- MILVUS_HOST=milvus
- MILVUS_PORT=19530
depends_on:
- llm-service
- milvus
restart: always

# 4. 前端 Web 服务
frontend:
build: ./frontend
ports:
- "3000:80"
depends_on:
- backend
restart: always

volumes:
milvus_data:
etcd_data:
minio_data:
. 🚀 快速启动指南
步骤 1: 准备模型
你需要下载一个 Qwen-14B (或 7B) 的模型文件放到 ./models 目录。
bash

编辑

# 示例：使用 huggingface-cli 下载 (需安装 huggingface_hub)
mkdir -p models
huggingface-cli download Qwen/Qwen-14B-Chat --local-dir ./models/Qwen-14B-Chat
如果显存不足，可改为 Qwen-7B-Chat 并修改 docker-compose.yml 中的 model 路径。
步骤 2: 启动所有服务
在项目根目录执行：
bash

编辑

docker-compose up --build
步骤 3: 访问系统
前端界面：打开浏览器访问 http://localhost:3000。
验证功能：
在输入框输入：“3号水泵有什么风险？”
观察：
右侧聊天框出现 AI 回复。
如果出现高风险预警，左侧数字人区域变红（CSS 滤镜效果）。
如果 AI 返回了图表指令，聊天框内自动渲染 ECharts 折线图。

关键注意事项
GPU 要求：运行 vllm + Qwen-14B 至少需要 24GB 显存 (如 RTX 3090/4090)。如果是 12GB 显存，请改用 Qwen-7B 或 Qwen-1.8B。
数字人视频流：目前的 DigitalHuman.vue 是模拟状态。真实生产中，你需要部署 UE5 Pixel Streaming 服务，并将 <video> 标签的 srcObject 绑定到 WebRTC 流。
网络配置：如果在局域网其他机器访问，需将 localhost 替换为服务器 IP，并在防火墙开放 3000 和 8080 端口。
这套代码实现了从数据预测到大模型决策再到前端可视化交互的完整闭环。您可以直接在此基础上进行业务数据的对接和 UI 的美化！

亚马逊云科技技术品牌专区

更多推荐

open-code-review Codex 插件教程：对话式调用评审技能指南

本文是一份面向新手的 **open-code-review Codex 插件教程**，教你在 Codex 中通过对话式方式调用 open-code-review 的 AI 代码评审技能。open-code-review 是阿里巴巴开源的 AI 代码评审工具，采用"确定性流水线 + LLM Agent"混合架构，内置多语言评审规则（NPE、线程安全、XSS、SQL 注入等），可在 Codex 里用一

亚马逊云科技技术品牌专区

OBS Studio 完整指南：免费开源录屏与直播软件从零上手

想做一场像模像样的直播，或者把屏幕内容录成教程视频，但一想到商用软件的订阅费就有些犹豫？其实你不需要花一分钱。OBS Studio 是一款免费开源的直播与录屏软件，支持 Windows、macOS 和 Linux，采集、混音、编码、推流、录制，一条流水线全包了。## 先搞清楚 OBS Studio 是什么OBS Studio 是一个"场景化"的采集合成工具：你把摄像头、窗口、浏览器、图片、

亚马逊云科技技术品牌专区

如何用MediaCrawler爬取小红书抖音数据？7大平台爬虫从安装到实战完整指南

MediaCrawler 是一个支持小红书、抖音、快手、B站、微博、百度贴吧、知乎的开源自媒体数据采集工具。它能按关键词、按帖子、按创作者主页三种方式抓取笔记/视频内容、评论甚至二级评论，并把结果存成 JSON、CSV、Excel 或数据库。适合做市场调研、竞品监控、内容选题的运营人员，以及想要现成爬虫框架而不想从零写 JS 逆向的开发者。## 从一次"手动抄数据"说起想象这个场景：你负责