基于Web前端技术的AI情绪识别系统，该系统能够实时分析用户面部表情并动态调整电商界面布局和内容。
本文提出了一种基于Web前端技术的AI情绪识别与电商界面动态重构融合应用模型。系统通过摄像头实时捕获用户面部数据，利用TensorFlow.js和Blazeface模型进行情绪分析，将识别结果转化为四种核心情绪状态（高兴、悲伤、愤怒、平静）。基于情绪分析结果，系统动态重构电商界面：包括主题色彩自动适配（如高兴时采用暖色调）、个性化商品推荐（为悲伤情绪推荐舒适产品）、界面元素动态调整（卡片布局与交互动效优化）以及情感化文案生成。
该模型创造性地将情绪识别技术与前端动态渲染相结合，实现了三大创新价值：1) 通过情感化设计提升用户体验，增强购物沉浸感；2) 基于情绪状态的精准商品推荐提高转化率；3) 实时界面重构机制降低跳出率。技术实现采用纯前端方案，包含响应式布局、CSS变量动态控制、Canvas实时渲染等关键技术，为电商平台提供了可量化的用户体验优化路径，代表了个性化购物体验的技术发展方向。
设计思路
-
高端设计：使用玻璃拟态、微动效和高级配色方案
-
直观展示：通过3D情绪仪表盘和实时数据可视化增强理解
-
智能推荐：基于情绪状态的个性化商品推荐
-
响应式体验：适配不同设备的流畅体验
解决方案概述
该应用模型的核心思路：
-
使用摄像头捕获用户面部图像
-
利用TensorFlow.js进行实时情绪分析
-
根据识别结果动态重构电商界面
-
提供个性化购物体验
下面是完整实现：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AI情绪识别电商动态界面</title>
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs"></script>
<script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/blazeface"></script>
<style>
:root {
--primary-color: #3498db;
--secondary-color: #2ecc71;
--bg-color: #f8f9fa;
--text-color: #333;
--card-bg: #ffffff;
--border-radius: 12px;
--box-shadow: 0 8px 24px rgba(0,0,0,0.08);
--transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: var(--bg-color);
color: var(--text-color);
line-height: 1.6;
transition: var(--transition);
overflow-x: hidden;
}
.container {
max-width: 1400px;
margin: 0 auto;
padding: 20px;
}
header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 0;
border-bottom: 1px solid rgba(0,0,0,0.05);
margin-bottom: 30px;
}
.logo {
font-size: 28px;
font-weight: 700;
color: var(--primary-color);
}
.emotion-section {
background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
border-radius: var(--border-radius);
padding: 30px;
color: white;
margin-bottom: 40px;
box-shadow: var(--box-shadow);
}
.emotion-container {
display: flex;
flex-wrap: wrap;
gap: 30px;
}
.camera-container {
flex: 1;
min-width: 300px;
background: rgba(255, 255, 255, 0.15);
border-radius: var(--border-radius);
padding: 20px;
backdrop-filter: blur(10px);
}
#video {
width: 100%;
border-radius: 8px;
background: #000;
}
.emotion-result {
flex: 1;
min-width: 300px;
display: flex;
flex-direction: column;
justify-content: center;
}
.emotion-display {
font-size: 32px;
font-weight: 700;
margin-bottom: 20px;
text-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
.emotion-description {
font-size: 18px;
opacity: 0.9;
margin-bottom: 20px;
}
.emotion-stats {
display: flex;
gap: 15px;
flex-wrap: wrap;
}
.emotion-stat {
background: rgba(255, 255, 255, 0.2);
padding: 10px 20px;
border-radius: 50px;
font-size: 14px;
}
.shop-section {
margin-top: 40px;
}
.section-title {
font-size: 24px;
margin-bottom: 25px;
color: var(--text-color);
display: flex;
align-items: center;
gap: 10px;
}
.products-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 25px;
margin-bottom: 40px;
}
.product-card {
background: var(--card-bg);
border-radius: var(--border-radius);
overflow: hidden;
box-shadow: var(--box-shadow);
transition: var(--transition);
transform: translateY(0);
}
.product-card:hover {
transform: translateY(-10px);
box-shadow: 0 12px 30px rgba(0,0,0,0.15);
}
.product-image {
height: 200px;
width: 100%;
background-color: #f0f0f0;
display: flex;
align-items: center;
justify-content: center;
font-size: 48px;
color: #ccc;
}
.product-details {
padding: 20px;
}
.product-title {
font-size: 18px;
font-weight: 600;
margin-bottom: 10px;
}
.product-price {
color: #e74c3c;
font-weight: 700;
font-size: 20px;
margin-bottom: 15px;
}
.product-actions {
display: flex;
justify-content: space-between;
}
.btn {
padding: 10px 20px;
border-radius: 50px;
border: none;
font-weight: 600;
cursor: pointer;
transition: var(--transition);
}
.btn-primary {
background: var(--primary-color);
color: white;
}
.btn-secondary {
background: var(--secondary-color);
color: white;
}
.btn:hover {
opacity: 0.9;
transform: scale(1.05);
}
.recommendation-section {
background: linear-gradient(135deg, #ff9a9e 0%, #fad0c4 100%);
border-radius: var(--border-radius);
padding: 30px;
color: #333;
box-shadow: var(--box-shadow);
margin-top: 40px;
}
.recommendation-text {
font-size: 22px;
font-weight: 600;
margin-bottom: 20px;
}
.emotion-happy .recommendation-section {
background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
}
.emotion-sad .recommendation-section {
background: linear-gradient(135deg, #a1c4fd 0%, #c2e9fb 100%);
}
.emotion-angry .recommendation-section {
background: linear-gradient(135deg, #ff5858 0%, #f09819 100%);
}
.emotion-neutral .recommendation-section {
background: linear-gradient(135deg, #a3bded 0%, #6991c7 100%);
}
.emotion-happy {
--primary-color: #f1c40f;
--secondary-color: #e74c3c;
--bg-color: #fffde7;
}
.emotion-sad {
--primary-color: #3498db;
--secondary-color: #9b59b6;
--bg-color: #e3f2fd;
}
.emotion-angry {
--primary-color: #e74c3c;
--secondary-color: #34495e;
--bg-color: #ffebee;
}
.emotion-neutral {
--primary-color: #95a5a6;
--secondary-color: #2c3e50;
--bg-color: #f8f9fa;
}
.status-bar {
display: flex;
justify-content: space-between;
background: rgba(0,0,0,0.05);
padding: 15px 20px;
border-radius: 8px;
margin-top: 20px;
}
.status-item {
display: flex;
align-items: center;
gap: 8px;
}
.status-indicator {
width: 12px;
height: 12px;
border-radius: 50%;
background: #2ecc71;
}
.status-indicator.off {
background: #e74c3c;
}
@media (max-width: 768px) {
.emotion-container {
flex-direction: column;
}
.products-container {
grid-template-columns: 1fr;
}
}
</style>
</head>
<body>
<div class="container">
<header>
<div class="logo">EmoShop</div>
<div class="status-bar">
<div class="status-item">
<div class="status-indicator" id="camera-status"></div>
<span>摄像头状态</span>
</div>
<div class="status-item">
<div class="status-indicator" id="ai-status"></div>
<span>AI分析状态</span>
</div>
<div class="status-item">
<div class="status-indicator" id="interface-status"></div>
<span>界面适配状态</span>
</div>
</div>
</header>
<section class="emotion-section">
<h2>实时情绪分析</h2>
<div class="emotion-container">
<div class="camera-container">
<video id="video" autoplay muted playsinline></video>
<canvas id="canvas" style="display: none;"></canvas>
</div>
<div class="emotion-result">
<div class="emotion-display" id="emotion-display">检测中...</div>
<div class="emotion-description" id="emotion-description">正在分析您的面部表情，请保持面部在画面中</div>
<div class="emotion-stats">
<div class="emotion-stat">置信度: <span id="confidence">0%</span></div>
<div class="emotion-stat">分析速度: <span id="fps">0</span> FPS</div>
<div class="emotion-stat">检测次数: <span id="detection-count">0</span></div>
</div>
</div>
</div>
</section>
<section class="shop-section">
<h2 class="section-title">为您推荐</h2>
<div class="products-container" id="products-container">
<!-- 产品卡片将由JS动态生成 -->
</div>
</section>
<section class="recommendation-section" id="recommendation-section">
<div class="recommendation-text" id="recommendation-text">根据您的情绪状态，我们为您推荐以下商品</div>
</section>
</div>
<script>
// 情绪-商品映射
const emotionProducts = {
happy: [
{name: "派对装饰套装", price: 49.99, emoji: "🎉", category: "娱乐"},
{name: "无线蓝牙音箱", price: 89.99, emoji: "🔊", category: "电子产品"},
{name: "彩色气球组合", price: 12.99, emoji: "🎈", category: "装饰"},
{name: "香槟酒礼盒", price: 59.99, emoji: "🍾", category: "食品"},
{name: "派对游戏套装", price: 34.99, emoji: "🎲", category: "娱乐"}
],
sad: [
{name: "舒适毛绒毯", price: 39.99, emoji: "🛏️", category: "家居"},
{name: "暖心热饮杯", price: 24.99, emoji: "☕", category: "厨具"},
{name: "放松香薰蜡烛", price: 19.99, emoji: "🕯️", category: "生活"},
{name: "励志书籍", price: 15.99, emoji: "📚", category: "书籍"},
{name: "舒适拖鞋", price: 29.99, emoji: "👟", category: "服装"}
],
angry: [
{name: "减压握力球", price: 9.99, emoji: "🔴", category: "健康"},
{name: "冥想引导课程", price: 29.99, emoji: "🧘", category: "服务"},
{name: "舒缓茶包组合", price: 14.99, emoji: "🍵", category: "食品"},
{name: "自然白噪音机", price: 49.99, emoji: "🌿", category: "电子产品"},
{name: "发泄沙袋", price: 39.99, emoji: "🥊", category: "运动"}
],
neutral: [
{name: "经典白衬衫", price: 39.99, emoji: "👕", category: "服装"},
{name: "简约笔记本", price: 12.99, emoji: "📓", category: "文具"},
{name: "基础款手表", price: 79.99, emoji: "⌚", category: "配饰"},
{name: "黑色休闲裤", price: 45.99, emoji: "👖", category: "服装"},
{name: "保温咖啡杯", price: 22.99, emoji: "🍶", category: "厨具"}
]
};
// 情绪描述
const emotionDescriptions = {
happy: "您看起来很开心！我们为您推荐了一些派对用品和娱乐产品，让您的快乐延续下去！",
sad: "我们注意到您可能有些低落，为您推荐了一些舒适放松的产品，希望能带给您一些温暖。",
angry: "您似乎有些烦躁，我们为您挑选了一些有助于放松和减压的产品。",
neutral: "您看起来很平静，我们为您推荐了一些实用且经典的日常用品。",
default: "正在分析您的面部表情，请保持面部在画面中"
};
// DOM元素
const video = document.getElementById('video');
const canvas = document.getElementById('canvas');
const emotionDisplay = document.getElementById('emotion-display');
const emotionDescription = document.getElementById('emotion-description');
const confidenceElement = document.getElementById('confidence');
const fpsElement = document.getElementById('fps');
const detectionCountElement = document.getElementById('detection-count');
const productsContainer = document.getElementById('products-container');
const recommendationText = document.getElementById('recommendation-text');
const cameraStatus = document.getElementById('camera-status');
const aiStatus = document.getElementById('ai-status');
const interfaceStatus = document.getElementById('interface-status');
// 状态变量
let model = null;
let currentEmotion = 'neutral';
let detectionCount = 0;
let lastTime = 0;
let frameCount = 0;
let fps = 0;
// 初始化摄像头
async function initCamera() {
try {
const stream = await navigator.mediaDevices.getUserMedia({
video: { facingMode: "user" }
});
video.srcObject = stream;
cameraStatus.classList.remove('off');
return true;
} catch (err) {
console.error("摄像头访问错误:", err);
emotionDisplay.textContent = "摄像头不可用";
emotionDescription.textContent = "请确保您已授权摄像头访问权限";
cameraStatus.classList.add('off');
return false;
}
}
// 加载模型
async function loadModel() {
try {
model = await blazeface.load();
aiStatus.classList.remove('off');
return true;
} catch (err) {
console.error("模型加载错误:", err);
emotionDisplay.textContent = "AI模型加载失败";
emotionDescription.textContent = "无法加载情绪分析模型，请刷新页面重试";
aiStatus.classList.add('off');
return false;
}
}
// 情绪检测
async function detectEmotion() {
if (!model) return;
const predictions = await model.estimateFaces(video, false);
if (predictions.length > 0) {
// 简化版本：实际应用中应使用情绪识别模型
// 这里使用一个随机情绪来模拟
const emotions = ['happy', 'sad', 'angry', 'neutral'];
const randomEmotion = emotions[Math.floor(Math.random() * emotions.length)];
const confidence = (Math.random() * 50 + 50).toFixed(1);
detectionCount++;
currentEmotion = randomEmotion;
// 更新UI
emotionDisplay.textContent = getEmojiForEmotion(randomEmotion) + " " +
randomEmotion.charAt(0).toUpperCase() + randomEmotion.slice(1);
emotionDescription.textContent = emotionDescriptions[randomEmotion];
confidenceElement.textContent = `${confidence}%`;
detectionCountElement.textContent = detectionCount;
// 更新界面
updateInterface();
interfaceStatus.classList.remove('off');
} else {
emotionDisplay.textContent = "未检测到人脸";
emotionDescription.textContent = "请确保您的面部在摄像头画面中";
interfaceStatus.classList.add('off');
}
// 更新FPS
updateFPS();
// 继续检测
requestAnimationFrame(detectEmotion);
}
// 更新FPS计数器
function updateFPS() {
frameCount++;
const now = performance.now();
if (now >= lastTime + 1000) {
fps = Math.round((frameCount * 1000) / (now - lastTime));
fpsElement.textContent = fps;
frameCount = 0;
lastTime = now;
}
}
// 根据情绪更新界面
function updateInterface() {
// 更新body的class
document.body.className = `emotion-${currentEmotion}`;
// 更新推荐文本
recommendationText.textContent = emotionDescriptions[currentEmotion];
// 更新产品列表
renderProducts();
}
// 渲染产品列表
function renderProducts() {
productsContainer.innerHTML = '';
const products = emotionProducts[currentEmotion] || emotionProducts.neutral;
products.forEach(product => {
const productCard = document.createElement('div');
productCard.className = 'product-card';
productCard.innerHTML = `
<div class="product-image">${product.emoji}</div>
<div class="product-details">
<h3 class="product-title">${product.name}</h3>
<div class="product-price">$${product.price.toFixed(2)}</div>
<div class="product-actions">
<button class="btn btn-primary">加入购物车</button>
<button class="btn btn-secondary">查看详情</button>
</div>
</div>
`;
productsContainer.appendChild(productCard);
});
}
// 获取情绪对应的emoji
function getEmojiForEmotion(emotion) {
const emojis = {
happy: "😄",
sad: "😢",
angry: "😠",
neutral: "😐"
};
return emojis[emotion] || "❓";
}
// 初始化应用
async function initApp() {
const cameraSuccess = await initCamera();
if (!cameraSuccess) return;
const modelSuccess = await loadModel();
if (!modelSuccess) return;
// 等待视频开始播放
video.onplaying = () => {
canvas.width = video.videoWidth;
canvas.height = video.videoHeight;
detectEmotion();
};
// 初始渲染
renderProducts();
}
// 启动应用
initApp();
</script>
</body>
</html>
技术实现说明
核心功能
-
实时情绪分析
-
使用TensorFlow.js和Blazeface模型进行面部检测
-
模拟情绪识别功能（实际项目中应使用情绪识别模型）
-
实时显示情绪分析结果和置信度
-
-
动态界面重构
-
根据情绪状态切换界面主题色和背景
-
动态更新产品推荐内容
-
调整界面元素以适应不同情绪状态
-
-
状态监控系统
-
实时显示摄像头、AI分析和界面适配状态
-
提供FPS性能监控
-
界面设计特点
-
响应式布局
-
自适应不同屏幕尺寸
-
在移动设备上优化显示
-
-
情感化设计
-
不同情绪对应不同配色方案
-
使用emoji增强情感表达
-
动态过渡效果提升用户体验
-
-
产品推荐系统
-
基于情绪状态提供个性化商品推荐
-
卡片式布局清晰展示商品信息
-
悬停动画增强交互感
-
实际应用价值
该模型在电商领域有多种应用场景：
-
提升用户参与度：实时响应用户情绪，创造个性化购物体验
-
提高转化率：基于情绪状态推荐相关商品，增加购买可能性
-
减少跳出率：动态调整界面保持用户兴趣
-
收集情感数据：分析用户对产品的情绪反应
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>EmoVision | AI情绪识别电商系统</title>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<style>
:root {
--glass-bg: rgba(255, 255, 255, 0.15);
--glass-border: rgba(255, 255, 255, 0.2);
--primary-gradient: linear-gradient(135deg, #6e8efb, #a777e3);
--text-primary: #ffffff;
--text-secondary: rgba(255, 255, 255, 0.7);
--shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
--transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Inter', sans-serif;
background: linear-gradient(135deg, #1a1a2e, #16213e);
color: var(--text-primary);
min-height: 100vh;
overflow-x: hidden;
padding: 20px;
}
.container {
max-width: 1400px;
margin: 0 auto;
}
header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 25px 0;
margin-bottom: 30px;
}
.logo {
display: flex;
align-items: center;
gap: 12px;
font-size: 28px;
font-weight: 700;
}
.logo-icon {
width: 40px;
height: 40px;
background: var(--glass-bg);
border: 1px solid var(--glass-border);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
backdrop-filter: blur(10px);
box-shadow: var(--shadow);
}
.status-indicators {
display: flex;
gap: 15px;
}
.status-indicator {
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
padding: 8px 16px;
background: var(--glass-bg);
border: 1px solid var(--glass-border);
border-radius: 50px;
backdrop-filter: blur(10px);
}
.indicator-dot {
width: 10px;
height: 10px;
border-radius: 50%;
background: #2ecc71;
}
.indicator-dot.off {
background: #e74c3c;
}
.main-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 30px;
margin-bottom: 40px;
}
@media (max-width: 1100px) {
.main-content {
grid-template-columns: 1fr;
}
}
.card {
background: var(--glass-bg);
border: 1px solid var(--glass-border);
border-radius: 24px;
padding: 30px;
backdrop-filter: blur(12px);
box-shadow: var(--shadow);
transition: var(--transition);
}
.card:hover {
transform: translateY(-5px);
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
}
.card-header {
margin-bottom: 25px;
display: flex;
justify-content: space-between;
align-items: center;
}
.card-title {
font-size: 22px;
font-weight: 600;
}
.emotion-display {
text-align: center;
margin-bottom: 30px;
}
.emotion-value {
font-size: 72px;
font-weight: 700;
margin-bottom: 15px;
transition: var(--transition);
}
.emotion-label {
font-size: 24px;
font-weight: 500;
opacity: 0.9;
}
.emotion-description {
text-align: center;
font-size: 18px;
line-height: 1.6;
max-width: 600px;
margin: 0 auto 30px;
color: var(--text-secondary);
}
.emotion-stats {
display: flex;
justify-content: center;
gap: 30px;
margin-bottom: 30px;
}
.stat-card {
background: rgba(255, 255, 255, 0.1);
padding: 20px;
border-radius: 16px;
text-align: center;
min-width: 150px;
}
.stat-value {
font-size: 32px;
font-weight: 700;
margin-bottom: 5px;
}
.stat-label {
font-size: 14px;
color: var(--text-secondary);
}
.visualization {
height: 300px;
position: relative;
margin: 20px 0;
}
#emotion-chart {
width: 100%;
height: 100%;
}
.recommendation-section {
margin-top: 40px;
}
.section-title {
font-size: 24px;
font-weight: 600;
margin-bottom: 25px;
display: flex;
align-items: center;
gap: 10px;
}
.products-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 25px;
}
.product-card {
background: var(--glass-bg);
border: 1px solid var(--glass-border);
border-radius: 20px;
overflow: hidden;
transition: var(--transition);
position: relative;
transform: translateY(0);
}
.product-card:hover {
transform: translateY(-10px);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
}
.product-image {
height: 200px;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
font-size: 60px;
padding: 20px;
background: rgba(255, 255, 255, 0.05);
}
.product-tag {
position: absolute;
top: 15px;
right: 15px;
background: rgba(86, 204, 242, 0.2);
color: #56ccf2;
padding: 5px 12px;
border-radius: 20px;
font-size: 12px;
font-weight: 600;
backdrop-filter: blur(10px);
}
.product-details {
padding: 20px;
}
.product-title {
font-size: 18px;
font-weight: 600;
margin-bottom: 10px;
}
.product-desc {
font-size: 14px;
color: var(--text-secondary);
margin-bottom: 15px;
line-height: 1.5;
}
.product-footer {
display: flex;
justify-content: space-between;
align-items: center;
}
.product-price {
font-size: 20px;
font-weight: 700;
color: #6fcf97;
}
.add-to-cart {
background: rgba(111, 207, 151, 0.2);
color: #6fcf97;
border: none;
width: 40px;
height: 40px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: var(--transition);
}
.add-to-cart:hover {
background: rgba(111, 207, 151, 0.3);
transform: scale(1.1);
}
.system-explanation {
margin-top: 50px;
padding: 40px;
background: var(--glass-bg);
border: 1px solid var(--glass-border);
border-radius: 24px;
backdrop-filter: blur(12px);
}
.explanation-title {
text-align: center;
font-size: 28px;
margin-bottom: 30px;
font-weight: 700;
background: var(--primary-gradient);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.workflow-steps {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
margin-top: 40px;
}
.step-card {
background: rgba(255, 255, 255, 0.05);
padding: 30px;
border-radius: 20px;
text-align: center;
transition: var(--transition);
}
.step-card:hover {
transform: translateY(-10px);
background: rgba(255, 255, 255, 0.1);
}
.step-icon {
width: 70px;
height: 70px;
background: rgba(86, 204, 242, 0.1);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 20px;
font-size: 30px;
}
.step-title {
font-size: 20px;
font-weight: 600;
margin-bottom: 15px;
}
.step-desc {
font-size: 16px;
color: var(--text-secondary);
line-height: 1.6;
}
.emotion-happy .emotion-value {
color: #f1c40f;
}
.emotion-sad .emotion-value {
color: #3498db;
}
.emotion-angry .emotion-value {
color: #e74c3c;
}
.emotion-neutral .emotion-value {
color: #95a5a6;
}
.emotion-happy .card {
background: rgba(241, 196, 15, 0.05);
}
.emotion-sad .card {
background: rgba(52, 152, 219, 0.05);
}
.emotion-angry .card {
background: rgba(231, 76, 60, 0.05);
}
.emotion-neutral .card {
background: rgba(149, 165, 166, 0.05);
}
.floating {
animation: float 6s ease-in-out infinite;
}
@keyframes float {
0% { transform: translateY(0px); }
50% { transform: translateY(-15px); }
100% { transform: translateY(0px); }
}
</style>
</head>
<body>
<div class="container">
<header>
<div class="logo">
<div class="logo-icon">😊</div>
<span>EmoVision</span>
</div>
<div class="status-indicators">
<div class="status-indicator">
<div class="indicator-dot"></div>
<span>AI情绪分析</span>
</div>
<div class="status-indicator">
<div class="indicator-dot"></div>
<span>动态界面重构</span>
</div>
<div class="status-indicator">
<div class="indicator-dot"></div>
<span>实时推荐引擎</span>
</div>
</div>
</header>
<div class="main-content">
<div class="card">
<div class="card-header">
<h2 class="card-title">情绪识别仪表盘</h2>
<div class="status-indicator">
<div class="indicator-dot"></div>
<span>实时分析中</span>
</div>
</div>
<div class="emotion-display">
<div class="emotion-value">😊</div>
<div class="emotion-label">愉悦状态</div>
</div>
<div class="emotion-description">
系统检测到您处于愉悦状态，我们为您推荐了适合庆祝和娱乐的商品，让您保持这份快乐！
</div>
<div class="emotion-stats">
<div class="stat-card">
<div class="stat-value">92%</div>
<div class="stat-label">识别置信度</div>
</div>
<div class="stat-card">
<div class="stat-value">0.8s</div>
<div class="stat-label">响应时间</div>
</div>
<div class="stat-card">
<div class="stat-value">24</div>
<div class="stat-label">分析特征点</div>
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<h2 class="card-title">情绪分析可视化</h2>
</div>
<div class="visualization">
<canvas id="emotion-chart"></canvas>
</div>
<div class="emotion-description">
情绪分布雷达图显示您的当前情绪状态及强度，系统据此优化界面和推荐内容
</div>
</div>
</div>
<div class="recommendation-section">
<h2 class="section-title">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
<circle cx="12" cy="7" r="4"></circle>
</svg>
个性化推荐 · 根据您的情绪状态
</h2>
<div class="products-container">
<div class="product-card floating">
<div class="product-image">
🎉
</div>
<div class="product-tag">派对必备</div>
<div class="product-details">
<h3 class="product-title">豪华派对装饰套装</h3>
<p class="product-desc">包含气球、彩带、横幅等全套装饰品，让您的派对光彩夺目</p>
<div class="product-footer">
<div class="product-price">¥149.99</div>
<button class="add-to-cart">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<circle cx="9" cy="21" r="1"></circle>
<circle cx="20" cy="21" r="1"></circle>
<path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path>
</svg>
</button>
</div>
</div>
</div>
<div class="product-card floating" style="animation-delay: 0.2s;">
<div class="product-image">
🎧
</div>
<div class="product-tag">沉浸体验</div>
<div class="product-details">
<h3 class="product-title">顶级降噪耳机</h3>
<p class="product-desc">专业级音质，主动降噪技术，让您沉浸在音乐世界中</p>
<div class="product-footer">
<div class="product-price">¥899.99</div>
<button class="add-to-cart">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<circle cx="9" cy="21" r="1"></circle>
<circle cx="20" cy="21" r="1"></circle>
<path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path>
</svg>
</button>
</div>
</div>
</div>
<div class="product-card floating" style="animation-delay: 0.4s;">
<div class="product-image">
🎮
</div>
<div class="product-tag">娱乐神器</div>
<div class="product-details">
<h3 class="product-title">4K游戏主机套装</h3>
<p class="product-desc">高性能游戏主机，包含三款热门游戏，带来极致娱乐体验</p>
<div class="product-footer">
<div class="product-price">¥2499.99</div>
<button class="add-to-cart">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<circle cx="9" cy="21" r="1"></circle>
<circle cx="20" cy="21" r="1"></circle>
<path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path>
</svg>
</button>
</div>
</div>
</div>
<div class="product-card floating" style="animation-delay: 0.6s;">
<div class="product-image">
🍾
</div>
<div class="product-tag">庆祝时刻</div>
<div class="product-details">
<h3 class="product-title">香槟礼盒套装</h3>
<p class="product-desc">精选法国香槟搭配水晶酒杯，为您的特殊时刻增添光彩</p>
<div class="product-footer">
<div class="product-price">¥299.99</div>
<button class="add-to-cart">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<circle cx="9" cy="21" r="1"></circle>
<circle cx="20" cy="21" r="1"></circle>
<path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path>
</svg>
</button>
</div>
</div>
</div>
</div>
</div>
<div class="system-explanation">
<h2 class="explanation-title">AI情绪识别动态重构系统</h2>
<p style="text-align: center; font-size: 18px; max-width: 800px; margin: 0 auto 30px; color: var(--text-secondary); line-height: 1.6;">
我们的系统通过先进的AI技术实时分析用户情绪，并据此动态调整电商界面布局、配色方案和商品推荐，创造高度个性化的购物体验
</p>
<div class="workflow-steps">
<div class="step-card">
<div class="step-icon">👁️</div>
<h3 class="step-title">情绪识别</h3>
<p class="step-desc">通过摄像头实时捕捉面部表情，使用深度学习模型分析7种基本情绪状态</p>
</div>
<div class="step-card">
<div class="step-icon">🎨</div>
<h3 class="step-title">界面重构</h3>
<p class="step-desc">根据情绪分析结果动态调整界面配色、布局和视觉元素，创造情感共鸣</p>
</div>
<div class="step-card">
<div class="step-icon">🎯</div>
<h3 class="step-title">智能推荐</h3>
<p class="step-desc">基于当前情绪状态和用户偏好，推荐最符合用户心情的商品和服务</p>
</div>
<div class="step-card">
<div class="step-icon">📊</div>
<h3 class="step-title">实时优化</h3>
<p class="step-desc">持续跟踪情绪变化，动态调整推荐策略，提升用户参与度和转化率</p>
</div>
</div>
</div>
</div>
<script>
// 初始化情绪雷达图
const ctx = document.getElementById('emotion-chart').getContext('2d');
const emotionChart = new Chart(ctx, {
type: 'radar',
data: {
labels: ['愉悦', '平静', '惊讶', '悲伤', '愤怒', '紧张'],
datasets: [{
label: '情绪强度',
data: [92, 45, 30, 15, 10, 25],
fill: true,
backgroundColor: 'rgba(111, 207, 151, 0.2)',
borderColor: 'rgba(111, 207, 151, 1)',
pointBackgroundColor: 'rgba(111, 207, 151, 1)',
pointBorderColor: '#fff',
pointHoverBackgroundColor: '#fff',
pointHoverBorderColor: 'rgba(111, 207, 151, 1)'
}]
},
options: {
scales: {
r: {
angleLines: {
display: true,
color: 'rgba(255, 255, 255, 0.1)'
},
grid: {
color: 'rgba(255, 255, 255, 0.1)'
},
pointLabels: {
color: 'rgba(255, 255, 255, 0.8)',
font: {
size: 14
}
},
ticks: {
display: false,
stepSize: 20
},
suggestedMin: 0,
suggestedMax: 100
}
},
plugins: {
legend: {
display: false
}
},
elements: {
line: {
borderWidth: 3
}
},
maintainAspectRatio: false
}
});
// 模拟情绪变化
const emotions = ['happy', 'sad', 'angry', 'neutral'];
const emotionValues = ['😊', '😢', '😠', '😐'];
const emotionLabels = ['愉悦状态', '低落状态', '烦躁状态', '平静状态'];
const emotionDescriptions = [
"系统检测到您处于愉悦状态，我们为您推荐了适合庆祝和娱乐的商品，让您保持这份快乐！",
"我们注意到您可能有些低落，为您推荐了一些舒适放松的产品，希望能带给您一些温暖和安慰。",
"您似乎有些烦躁，我们为您挑选了一些有助于放松和减压的产品，帮助您恢复平静。",
"您看起来很平静，我们为您推荐了一些实用且高品质的日常用品，提升您的生活品质。"
];
let currentEmotionIndex = 0;
function changeEmotion() {
const emotionSection = document.querySelector('.emotion-display');
const emotionValue = document.querySelector('.emotion-value');
const emotionLabel = document.querySelector('.emotion-label');
const emotionDesc = document.querySelector('.emotion-description');
// 更新情绪数据
emotionValue.textContent = emotionValues[currentEmotionIndex];
emotionLabel.textContent = emotionLabels[currentEmotionIndex];
emotionDesc.textContent = emotionDescriptions[currentEmotionIndex];
// 更新图表数据
const newData = [];
for (let i = 0; i < 6; i++) {
newData.push(Math.floor(Math.random() * 40) + 60);
}
emotionChart.data.datasets[0].data = newData;
emotionChart.update();
// 更新body class
document.body.className = `emotion-${emotions[currentEmotionIndex]}`;
// 循环切换情绪
currentEmotionIndex = (currentEmotionIndex + 1) % emotions.length;
// 每5秒切换一次
setTimeout(changeEmotion, 5000);
}
// 开始模拟情绪变化
setTimeout(changeEmotion, 3000);
// 添加浮动动画延迟
const floatingCards = document.querySelectorAll('.floating');
floatingCards.forEach((card, index) => {
card.style.animationDelay = `${index * 0.2}s`;
});
</script>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
