HCAI Tech | \u591a\u6a21\u6001\u60c5\u611f\u5206\u6790\u6280\u672f<\/title>\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Montserrat:wght@300;400;500;600;700;800&family=Orbitron:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/chart.js\"><\/script>\n <style>\n :root {\n --ai-purple: #5e60ce;\n --neural-blue: #4a90e2;\n --emotion-gold: #ffd166;\n --psych-pink: #ff6b9d;\n --deep-tech: #1a0f2d;\n --dark-space: #0a0e17;\n --text-light: #e0f0ff;\n --text-gray: #a0b8d0;\n --card-bg: rgba(26, 15, 45, 0.7);\n }\n \n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n \n body {\n font-family: 'Montserrat', sans-serif;\n background: linear-gradient(135deg, var(--deep-tech) 0%, #2d1a5f 100%);\n color: var(--text-light);\n min-height: 100vh;\n overflow-x: hidden;\n line-height: 1.6;\n }\n \n .container {\n max-width: 1400px;\n margin: 0 auto;\n padding: 40px 20px;\n }\n \n .tech-header {\n text-align: center;\n padding: 60px 20px 40px;\n position: relative;\n overflow: hidden;\n }\n \n .tech-subtitle {\n font-family: 'Orbitron', sans-serif;\n font-size: 18px;\n color: var(--neural-blue);\n letter-spacing: 4px;\n text-transform: uppercase;\n margin-bottom: 15px;\n }\n \n .tech-title {\n font-family: 'Orbitron', sans-serif;\n font-size: 56px;\n font-weight: 800;\n line-height: 1.1;\n margin-bottom: 25px;\n background: linear-gradient(to right, #e0f0ff, var(--neural-blue), var(--ai-purple));\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n }\n \n .tech-description {\n font-size: 20px;\n color: var(--text-gray);\n max-width: 800px;\n margin: 0 auto 30px;\n line-height: 1.7;\n }\n \n .innovation-highlights {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));\n gap: 30px;\n margin: 50px 0;\n }\n \n .highlight-card {\n background: var(--card-bg);\n border: 1px solid rgba(94, 96, 206, 0.3);\n border-radius: 16px;\n padding: 30px;\n transition: all 0.4s;\n position: relative;\n overflow: hidden;\n backdrop-filter: blur(5px);\n box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);\n }\n \n .highlight-card::before {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 5px;\n background: linear-gradient(90deg, var(--ai-purple), var(--neural-blue));\n }\n \n .highlight-card:hover {\n transform: translateY(-8px);\n box-shadow: 0 12px 35px rgba(94, 96, 206, 0.4);\n }\n \n .highlight-icon {\n width: 70px;\n height: 70px;\n margin-bottom: 20px;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 50%;\n font-size: 28px;\n background: rgba(74, 144, 226, 0.15);\n color: var(--neural-blue);\n }\n \n .highlight-title {\n font-size: 24px;\n margin-bottom: 15px;\n color: var(--text-light);\n }\n \n .highlight-content {\n color: var(--text-gray);\n margin-bottom: 20px;\n font-size: 16px;\n }\n \n .highlight-stats {\n display: flex;\n gap: 12px;\n flex-wrap: wrap;\n }\n \n .stat-badge {\n background: rgba(255, 209, 102, 0.15);\n color: var(--emotion-gold);\n padding: 6px 16px;\n border-radius: 30px;\n font-size: 13px;\n font-weight: 600;\n }\n \n .performance-section {\n margin: 80px 0;\n background: rgba(15, 27, 45, 0.3);\n border-radius: 20px;\n padding: 50px 30px;\n position: relative;\n overflow: hidden;\n border: 1px solid rgba(94, 96, 206, 0.2);\n }\n \n .section-header {\n text-align: center;\n margin-bottom: 50px;\n }\n \n .section-title {\n font-family: 'Orbitron', sans-serif;\n font-size: 36px;\n font-weight: 700;\n margin-bottom: 15px;\n color: var(--text-light);\n }\n \n .section-subtitle {\n font-size: 18px;\n color: var(--text-gray);\n max-width: 700px;\n margin: 0 auto;\n }\n \n .charts-container {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));\n gap: 30px;\n margin-top: 40px;\n }\n \n .chart-card {\n background: var(--card-bg);\n border-radius: 16px;\n padding: 25px;\n box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);\n border: 1px solid rgba(94, 96, 206, 0.3);\n }\n \n .chart-header {\n margin-bottom: 20px;\n }\n \n .chart-title {\n font-size: 22px;\n color: var(--text-light);\n margin-bottom: 8px;\n display: flex;\n align-items: center;\n gap: 10px;\n }\n \n .chart-description {\n color: var(--text-gray);\n font-size: 15px;\n }\n \n .chart-container {\n height: 280px;\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n \n .fallback-content {\n display: none;\n width: 100%;\n height: 100%;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n text-align: center;\n }\n \n .fallback-content.active {\n display: flex;\n }\n \n .fallback-icon {\n font-size: 48px;\n margin-bottom: 20px;\n color: var(--neural-blue);\n }\n \n .fallback-text {\n color: var(--text-gray);\n max-width: 80%;\n margin-bottom: 20px;\n }\n \n .emotion-indicators {\n display: flex;\n justify-content: space-between;\n margin-top: 15px;\n }\n \n .emotion-indicator {\n text-align: center;\n width: 12%;\n }\n \n .emotion-icon {\n font-size: 24px;\n margin-bottom: 5px;\n }\n \n .emotion-label {\n font-size: 12px;\n color: var(--text-gray);\n }\n \n .comparison-table {\n width: 100%;\n border-collapse: collapse;\n margin-top: 40px;\n background: var(--card-bg);\n border-radius: 16px;\n overflow: hidden;\n box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);\n border: 1px solid rgba(94, 96, 206, 0.3);\n }\n \n .comparison-table th {\n background: linear-gradient(90deg, var(--ai-purple), var(--neural-blue));\n color: white;\n text-align: left;\n padding: 16px 20px;\n font-weight: 600;\n font-size: 16px;\n }\n \n .comparison-table td {\n padding: 12px 20px;\n border-bottom: 1px solid rgba(94, 96, 206, 0.2);\n color: var(--text-gray);\n }\n \n .comparison-table tr:last-child td {\n border-bottom: none;\n }\n \n .comparison-table .feature {\n font-weight: 600;\n color: var(--text-light);\n width: 30%;\n }\n \n .comparison-table .hcai {\n color: var(--emotion-gold);\n font-weight: 600;\n }\n \n .comparison-table .competitor {\n color: var(--text-gray);\n }\n \n .benefits-section {\n margin: 80px 0;\n }\n \n .benefits-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));\n gap: 25px;\n margin-top: 40px;\n }\n \n .benefit-card {\n background: var(--card-bg);\n border-radius: 16px;\n padding: 30px;\n text-align: center;\n box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);\n border: 1px solid rgba(94, 96, 206, 0.3);\n transition: all 0.3s;\n }\n \n .benefit-card:hover {\n transform: translateY(-8px);\n box-shadow: 0 12px 35px rgba(94, 96, 206, 0.4);\n }\n \n .benefit-icon {\n width: 70px;\n height: 70px;\n margin: 0 auto 20px;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 50%;\n font-size: 28px;\n background: rgba(74, 144, 226, 0.15);\n color: var(--neural-blue);\n }\n \n .benefit-title {\n font-size: 20px;\n margin-bottom: 12px;\n color: var(--text-light);\n }\n \n .benefit-description {\n color: var(--text-gray);\n font-size: 15px;\n }\n \n .performance-metrics {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n gap: 20px;\n margin-top: 40px;\n }\n \n .metric-card {\n background: rgba(94, 96, 206, 0.15);\n border-radius: 12px;\n padding: 20px;\n text-align: center;\n border: 1px solid rgba(94, 96, 206, 0.3);\n }\n \n .metric-value {\n font-family: 'Orbitron', sans-serif;\n font-size: 32px;\n font-weight: 700;\n margin-bottom: 8px;\n background: linear-gradient(to right, var(--emotion-gold), var(--psych-pink));\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n }\n \n .metric-label {\n color: var(--text-gray);\n font-size: 14px;\n }\n \n .loading-placeholder {\n height: 280px;\n display: flex;\n align-items: center;\n justify-content: center;\n background: rgba(26, 15, 45, 0.5);\n border-radius: 8px;\n }\n \n .loading-spinner {\n width: 50px;\n height: 50px;\n border: 5px solid rgba(74, 144, 226, 0.3);\n border-top: 5px solid var(--neural-blue);\n border-radius: 50%;\n animation: spin 1s linear infinite;\n }\n \n @keyframes spin {\n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n }\n \n .fallback-btn {\n padding: 10px 20px;\n background: rgba(94, 96, 206, 0.3);\n color: var(--text-light);\n border: 1px solid var(--neural-blue);\n border-radius: 30px;\n cursor: pointer;\n transition: all 0.3s;\n font-size: 14px;\n }\n \n .fallback-btn:hover {\n background: rgba(94, 96, 206, 0.5);\n }\n \n @media (max-width: 1024px) {\n .tech-title {\n font-size: 48px;\n }\n \n .section-title {\n font-size: 32px;\n }\n }\n \n @media (max-width: 768px) {\n .tech-title {\n font-size: 36px;\n }\n \n .tech-description {\n font-size: 16px;\n }\n \n .innovation-highlights {\n grid-template-columns: 1fr;\n }\n \n .charts-container {\n grid-template-columns: 1fr;\n }\n \n .section-title {\n font-size: 28px;\n }\n }\n \n @media (max-width: 480px) {\n .tech-title {\n font-size: 32px;\n }\n \n .tech-subtitle {\n font-size: 14px;\n }\n \n .highlight-title, .chart-title, .benefit-title {\n font-size: 18px;\n }\n \n .chart-container {\n height: 250px;\n }\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"container\">\n <header class=\"tech-header\">\n <div class=\"tech-subtitle\">HCAI TECH \u6838\u5fc3\u521b\u65b0<\/div>\n <h1 class=\"tech-title\">\u591a\u6a21\u6001\u60c5\u611f\u5206\u6790\u6280\u672f<\/h1>\n <p class=\"tech-description\">\n \u878d\u5408\u8bed\u97f3\u3001\u89c6\u89c9\u3001\u751f\u7406\u4fe1\u53f7\u4e0e\u6587\u672c\u7684\u8de8\u6a21\u6001\u60c5\u611f\u8bc6\u522b\u7cfb\u7edf\uff0c\u7a81\u7834\u6027\u5b9e\u73b092.3%\u7684\u51c6\u786e\u7387\uff0c\u4e3a\u5fc3\u7406\u5065\u5eb7\u3001\u4eba\u673a\u4ea4\u4e92\u548c\u7528\u6237\u4f53\u9a8c\u9886\u57df\u63d0\u4f9b\u9769\u547d\u6027\u89e3\u51b3\u65b9\u6848\u3002\n <\/p>\n \n <div class=\"performance-metrics\">\n <div class=\"metric-card\">\n <div class=\"metric-value\">92.3%<\/div>\n <div class=\"metric-label\">\u60c5\u611f\u8bc6\u522b\u51c6\u786e\u7387<\/div>\n <\/div>\n <div class=\"metric-card\">\n <div class=\"metric-value\">\u226480ms<\/div>\n <div class=\"metric-label\">\u5b9e\u65f6\u5904\u7406\u5ef6\u8fdf<\/div>\n <\/div>\n <div class=\"metric-card\">\n <div class=\"metric-value\">27+<\/div>\n <div class=\"metric-label\">\u60c5\u7eea\u72b6\u6001\u8bc6\u522b<\/div>\n <\/div>\n <div class=\"metric-card\">\n <div class=\"metric-value\">4<\/div>\n <div class=\"metric-label\">\u591a\u6a21\u6001\u6570\u636e\u6e90<\/div>\n <\/div>\n <\/div>\n <\/header>\n \n <section class=\"innovation-section\">\n <div class=\"innovation-highlights\">\n <div class=\"highlight-card\">\n <div class=\"highlight-icon\">\n <i class=\"fas fa-brain\"><\/i>\n <\/div>\n <h3 class=\"highlight-title\">\u8de8\u6a21\u6001\u6ce8\u610f\u529b\u878d\u5408<\/h3>\n <p class=\"highlight-content\">\n \u52a8\u6001\u52a0\u6743\u6ce8\u610f\u529b\u673a\u5236\u5b9e\u65f6\u5206\u6790\u5404\u6a21\u6001\u4fe1\u53f7\u8d28\u91cf\uff0c\u81ea\u52a8\u8c03\u6574\u878d\u5408\u6743\u91cd\uff0c\u89e3\u51b3\u5355\u4e00\u4fe1\u53f7\u6e90\u504f\u5dee\u95ee\u9898\u3002\n <\/p>\n <div class=\"highlight-stats\">\n <span class=\"stat-badge\">+18% \u51c6\u786e\u7387\u63d0\u5347<\/span>\n <span class=\"stat-badge\">\u5b9e\u65f6\u52a8\u6001\u52a0\u6743<\/span>\n <\/div>\n <\/div>\n \n <div class=\"highlight-card\">\n <div class=\"highlight-icon\">\n <i class=\"fas fa-wave-square\"><\/i>\n <\/div>\n <h3 class=\"highlight-title\">\u5fae\u8868\u60c5\u8bc6\u522b\u5f15\u64ce<\/h3>\n <p class=\"highlight-content\">\n \u65f6\u7a7a\u5377\u79ef\u795e\u7ecf\u7f51\u7edc\u6355\u63491\/25\u79d2\u5fae\u8868\u60c5\u53d8\u5316\uff0c\u8bc6\u522b27\u79cd\u590d\u5408\u60c5\u7eea\u72b6\u6001\uff0c\u7a81\u7834\u4f20\u7edf\u6280\u672f\u74f6\u9888\u3002\n <\/p>\n <div class=\"highlight-stats\">\n <span class=\"stat-badge\">\u6beb\u79d2\u7ea7\u8bc6\u522b<\/span>\n <span class=\"stat-badge\">95%\u68c0\u6d4b\u7cbe\u5ea6<\/span>\n <\/div>\n <\/div>\n \n <div class=\"highlight-card\">\n <div class=\"highlight-icon\">\n <i class=\"fas fa-heartbeat\"><\/i>\n <\/div>\n <h3 class=\"highlight-title\">\u751f\u7406\u4fe1\u53f7\u60c5\u611f\u6620\u5c04<\/h3>\n <p class=\"highlight-content\">\n \u57fa\u4e8eHRV\u548cGSR\u7684\u60c5\u7eea\u72b6\u6001\u6a21\u578b\uff0c\u901a\u8fc7\u8054\u90a6\u5b66\u4e60\u4fdd\u62a4\u9690\u79c1\uff0c\u5b9e\u73b0\u65e0\u4fb5\u5165\u5f0f\u60c5\u611f\u76d1\u6d4b\u3002\n <\/p>\n <div class=\"highlight-stats\">\n <span class=\"stat-badge\">\u975e\u63a5\u89e6\u5f0f\u76d1\u6d4b<\/span>\n <span class=\"stat-badge\">\u9690\u79c1\u4fdd\u62a4<\/span>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n \n <section class=\"performance-section\">\n <div class=\"section-header\">\n <h2 class=\"section-title\">\u6027\u80fd\u8868\u73b0\u4e0e\u6280\u672f\u6307\u6807<\/h2>\n <p class=\"section-subtitle\">\u5728\u884c\u4e1a\u6807\u51c6\u6d4b\u8bd5\u4e2d\u7684\u5353\u8d8a\u8868\u73b0<\/p>\n <\/div>\n \n <div class=\"charts-container\">\n <div class=\"chart-card\">\n <div class=\"chart-header\">\n <h3 class=\"chart-title\"><i class=\"fas fa-chart-line\"><\/i> \u60c5\u611f\u8bc6\u522b\u51c6\u786e\u7387\u5bf9\u6bd4<\/h3>\n <p class=\"chart-description\">\u5728\u6807\u51c6\u60c5\u611f\u6570\u636e\u96c6\u4e0a\u7684\u8868\u73b0\uff088\u79cd\u57fa\u672c\u60c5\u7eea\uff09<\/p>\n <\/div>\n <div class=\"chart-container\">\n <div class=\"loading-placeholder\">\n <div class=\"loading-spinner\"><\/div>\n <\/div>\n <canvas id=\"accuracyChart\"><\/canvas>\n <div class=\"fallback-content\" id=\"accuracyFallback\">\n <div class=\"fallback-icon\">\n <i class=\"fas fa-exclamation-triangle\"><\/i>\n <\/div>\n <p class=\"fallback-text\">\u56fe\u8868\u52a0\u8f7d\u5931\u8d25\uff0c\u8bf7\u5c1d\u8bd5\u5237\u65b0\u9875\u9762\u6216\u67e5\u770b\u4e0b\u65b9\u8868\u683c\u6570\u636e<\/p>\n <button class=\"fallback-btn\" onclick=\"showAccuracyData()\">\u663e\u793a\u6570\u636e\u8868\u683c<\/button>\n <\/div>\n <\/div>\n <div class=\"emotion-indicators\">\n <div class=\"emotion-indicator\">\n <div class=\"emotion-icon\">\ud83d\ude0a<\/div>\n <div class=\"emotion-label\">\u559c\u60a6<\/div>\n <\/div>\n <div class=\"emotion-indicator\">\n <div class=\"emotion-icon\">\ud83d\ude22<\/div>\n <div class=\"emotion-label\">\u60b2\u4f24<\/div>\n <\/div>\n <div class=\"emotion-indicator\">\n <div class=\"emotion-icon\">\ud83d\ude20<\/div>\n <div class=\"emotion-label\">\u6124\u6012<\/div>\n <\/div>\n <div class=\"emotion-indicator\">\n <div class=\"emotion-icon\">\ud83d\ude32<\/div>\n <div class=\"emotion-label\">\u60ca\u8bb6<\/div>\n <\/div>\n <div class=\"emotion-indicator\">\n <div class=\"emotion-icon\">\ud83d\ude28<\/div>\n <div class=\"emotion-label\">\u6050\u60e7<\/div>\n <\/div>\n <div class=\"emotion-indicator\">\n <div class=\"emotion-icon\">\ud83e\udd22<\/div>\n <div class=\"emotion-label\">\u538c\u6076<\/div>\n <\/div>\n <div class=\"emotion-indicator\">\n <div class=\"emotion-icon\">\ud83d\ude10<\/div>\n <div class=\"emotion-label\">\u4e2d\u7acb<\/div>\n <\/div>\n <div class=\"emotion-indicator\">\n <div class=\"emotion-icon\">\ud83d\ude15<\/div>\n <div class=\"emotion-label\">\u56f0\u60d1<\/div>\n <\/div>\n <\/div>\n <\/div>\n \n <div class=\"chart-card\">\n <div class=\"chart-header\">\n <h3 class=\"chart-title\"><i class=\"fas fa-tachometer-alt\"><\/i> \u5b9e\u65f6\u5904\u7406\u6027\u80fd<\/h3>\n <p class=\"chart-description\">\u4e0d\u540c\u786c\u4ef6\u5e73\u53f0\u4e0a\u7684\u5904\u7406\u5ef6\u8fdf\uff08\u6beb\u79d2\uff09<\/p>\n <\/div>\n <div class=\"chart-container\">\n <div class=\"loading-placeholder\">\n <div class=\"loading-spinner\"><\/div>\n <\/div>\n <canvas id=\"performanceChart\"><\/canvas>\n <div class=\"fallback-content\" id=\"performanceFallback\">\n <div class=\"fallback-icon\">\n <i class=\"fas fa-exclamation-triangle\"><\/i>\n <\/div>\n <p class=\"fallback-text\">\u56fe\u8868\u52a0\u8f7d\u5931\u8d25\uff0c\u8bf7\u5c1d\u8bd5\u5237\u65b0\u9875\u9762\u6216\u67e5\u770b\u4e0b\u65b9\u8868\u683c\u6570\u636e<\/p>\n <button class=\"fallback-btn\" onclick=\"showPerformanceData()\">\u663e\u793a\u6570\u636e\u8868\u683c<\/button>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n \n <div class=\"chart-card\" style=\"margin-top: 30px;\">\n <div class=\"chart-header\">\n <h3 class=\"chart-title\"><i class=\"fas fa-microchip\"><\/i> \u8d44\u6e90\u6548\u7387\u5bf9\u6bd4<\/h3>\n <p class=\"chart-description\">\u6a21\u578b\u8ba1\u7b97\u8d44\u6e90\u6d88\u8017\uff08GFLOPS\uff09\u4e0e\u51c6\u786e\u7387\u5e73\u8861<\/p>\n <\/div>\n <div class=\"chart-container\">\n <div class=\"loading-placeholder\">\n <div class=\"loading-spinner\"><\/div>\n <\/div>\n <canvas id=\"efficiencyChart\"><\/canvas>\n <div class=\"fallback-content\" id=\"efficiencyFallback\">\n <div class=\"fallback-icon\">\n <i class=\"fas fa-exclamation-triangle\"><\/i>\n <\/div>\n <p class=\"fallback-text\">\u56fe\u8868\u52a0\u8f7d\u5931\u8d25\uff0c\u8bf7\u5c1d\u8bd5\u5237\u65b0\u9875\u9762\u6216\u67e5\u770b\u4e0b\u65b9\u8868\u683c\u6570\u636e<\/p>\n <button class=\"fallback-btn\" onclick=\"showEfficiencyData()\">\u663e\u793a\u6570\u636e\u8868\u683c<\/button>\n <\/div>\n <\/div>\n <\/div>\n \n <table class=\"comparison-table\">\n <thead>\n <tr>\n <th>\u6280\u672f\u7279\u6027<\/th>\n <th>HCAI Tech<\/th>\n <th>\u4f20\u7edf\u89e3\u51b3\u65b9\u6848<\/th>\n <\/tr>\n <\/thead>\n <tbody>\n <tr>\n <td class=\"feature\">\u591a\u6a21\u6001\u878d\u5408\u673a\u5236<\/td>\n <td class=\"hcai\">\u52a8\u6001\u52a0\u6743\u6ce8\u610f\u529b\u878d\u5408<\/td>\n <td class=\"competitor\">\u56fa\u5b9a\u6743\u91cd\u5e73\u5747\u878d\u5408<\/td>\n <\/tr>\n <tr>\n <td class=\"feature\">\u5fae\u8868\u60c5\u8bc6\u522b\u80fd\u529b<\/td>\n <td class=\"hcai\">\u652f\u63011\/25\u79d2\u5fae\u8868\u60c5<\/td>\n <td class=\"competitor\">\u4ec5\u57fa\u7840\u8868\u60c5\u8bc6\u522b<\/td>\n <\/tr>\n <tr>\n <td class=\"feature\">\u60c5\u7eea\u5206\u7c7b\u7ef4\u5ea6<\/td>\n <td class=\"hcai\">8\u79cd\u57fa\u672c+27\u79cd\u590d\u5408\u60c5\u7eea<\/td>\n <td class=\"competitor\">6-8\u79cd\u57fa\u672c\u60c5\u7eea<\/td>\n <\/tr>\n <tr>\n <td class=\"feature\">\u5b9e\u65f6\u5904\u7406\u5ef6\u8fdf<\/td>\n <td class=\"hcai\">\u226480ms<\/td>\n <td class=\"competitor\">200-500ms<\/td>\n <\/tr>\n <tr>\n <td class=\"feature\">\u9690\u79c1\u4fdd\u62a4\u673a\u5236<\/td>\n <td class=\"hcai\">\u8054\u90a6\u5b66\u4e60+\u8fb9\u7f18\u8ba1\u7b97<\/td>\n <td class=\"competitor\">\u4e2d\u5fc3\u5316\u5904\u7406<\/td>\n <\/tr>\n <\/tbody>\n <\/table>\n <\/section>\n \n <section class=\"benefits-section\">\n <div class=\"section-header\">\n <h2 class=\"section-title\">\u5e94\u7528\u573a\u666f\u4e0e\u4ef7\u503c<\/h2>\n <p class=\"section-subtitle\">\u591a\u6a21\u6001\u60c5\u611f\u5206\u6790\u6280\u672f\u7684\u521b\u65b0\u5e94\u7528\u9886\u57df<\/p>\n <\/div>\n \n <div class=\"benefits-grid\">\n <div class=\"benefit-card\">\n <div class=\"benefit-icon\">\n <i class=\"fas fa-user-md\"><\/i>\n <\/div>\n <h3 class=\"benefit-title\">\u5fc3\u7406\u5065\u5eb7\u76d1\u6d4b<\/h3>\n <p class=\"benefit-description\">\n \u5b9e\u65f6\u76d1\u6d4b\u5fc3\u7406\u72b6\u6001\uff0c\u65e9\u671f\u9884\u8b66\u5fc3\u7406\u5065\u5eb7\u5371\u673a\uff0c\u4e3a\u8fdc\u7a0b\u6cbb\u7597\u63d0\u4f9b\u6570\u636e\u652f\u6301\n <\/p>\n <\/div>\n \n <div class=\"benefit-card\">\n <div class=\"benefit-icon\">\n <i class=\"fas fa-robot\"><\/i>\n <\/div>\n <h3 class=\"benefit-title\">\u667a\u80fd\u4eba\u673a\u4ea4\u4e92<\/h3>\n <p class=\"benefit-description\">\n \u4f7fAI\u7cfb\u7edf\u7406\u89e3\u4eba\u7c7b\u60c5\u611f\u72b6\u6001\uff0c\u5b9e\u73b0\u81ea\u7136\u3001\u5171\u60c5\u7684\u4eba\u673a\u5bf9\u8bdd\u4f53\u9a8c\n <\/p>\n <\/div>\n \n <div class=\"benefit-card\">\n <div class=\"benefit-icon\">\n <i class=\"fas fa-shopping-cart\"><\/i>\n <\/div>\n <h3 class=\"benefit-title\">\u7528\u6237\u4f53\u9a8c\u4f18\u5316<\/h3>\n <p class=\"benefit-description\">\n \u5b9e\u65f6\u5206\u6790\u7528\u6237\u60c5\u7eea\u53cd\u5e94\uff0c\u91cf\u5316\u4f53\u9a8c\u6570\u636e\uff0c\u6307\u5bfc\u4ea7\u54c1\u8bbe\u8ba1\u4e0e\u670d\u52a1\u4f18\u5316\n <\/p>\n <\/div>\n \n <div class=\"benefit-card\">\n <div class=\"benefit-icon\">\n <i class=\"fas fa-graduation-cap\"><\/i>\n <\/div>\n <h3 class=\"benefit-title\">\u667a\u80fd\u6559\u80b2<\/h3>\n <p class=\"benefit-description\">\n \u76d1\u6d4b\u5b66\u4e60\u72b6\u6001\u4e0e\u60c5\u7eea\u53d8\u5316\uff0c\u81ea\u9002\u5e94\u8c03\u6574\u6559\u5b66\u8282\u594f\uff0c\u63d0\u5347\u6559\u80b2\u6548\u679c\n <\/p>\n <\/div>\n <\/div>\n <\/section>\n <\/div>\n\n <script>\n \/\/ \u56fe\u8868\u6570\u636e\n const chartData = {\n accuracy: {\n labels: ['\u559c\u60a6', '\u60b2\u4f24', '\u6124\u6012', '\u60ca\u8bb6', '\u6050\u60e7', '\u538c\u6076', '\u4e2d\u7acb', '\u56f0\u60d1'],\n hcai: [94, 91, 93, 92, 89, 90, 96, 88],\n industry: [85, 82, 80, 78, 76, 79, 88, 70]\n },\n performance: {\n labels: ['\u4e91\u670d\u52a1\u5668', '\u8fb9\u7f18\u8bbe\u5907', '\u79fb\u52a8\u7ec8\u7aef', '\u5d4c\u5165\u5f0f\u7cfb\u7edf', '\u6d4f\u89c8\u5668\u73af\u5883'],\n values: [35, 60, 80, 120, 150]\n },\n efficiency: {\n hcai: {x: 12.5, y: 92.3},\n others: [\n {x: 25.8, y: 82.1},\n {x: 18.2, y: 78.5},\n {x: 32.4, y: 85.7},\n {x: 22.7, y: 80.3},\n {x: 28.3, y: 83.6}\n ]\n }\n };\n \n \/\/ \u521d\u59cb\u5316\u51c6\u786e\u7387\u56fe\u8868\n function initAccuracyChart() {\n try {\n const ctx = document.getElementById('accuracyChart').getContext('2d');\n return new Chart(ctx, {\n type: 'bar',\n data: {\n labels: chartData.accuracy.labels,\n datasets: [{\n label: 'HCAI Tech',\n data: chartData.accuracy.hcai,\n backgroundColor: 'rgba(94, 96, 206, 0.7)',\n borderColor: 'rgba(94, 96, 206, 1)',\n borderWidth: 1\n }, {\n label: '\u884c\u4e1a\u5e73\u5747',\n data: chartData.accuracy.industry,\n backgroundColor: 'rgba(160, 184, 208, 0.7)',\n borderColor: 'rgba(160, 184, 208, 1)',\n borderWidth: 1\n }]\n },\n options: {\n responsive: true,\n maintainAspectRatio: false,\n scales: {\n y: {\n beginAtZero: true,\n max: 100,\n ticks: {\n color: '#a0b8d0',\n callback: function(value) {\n return value + '%';\n }\n },\n grid: {\n color: 'rgba(94, 96, 206, 0.1)'\n }\n },\n x: {\n ticks: {\n color: '#e0f0ff'\n },\n grid: {\n color: 'rgba(94, 96, 206, 0.1)'\n }\n }\n },\n plugins: {\n legend: {\n labels: {\n color: '#e0f0ff',\n font: {\n size: 12\n }\n }\n },\n tooltip: {\n callbacks: {\n label: function(context) {\n return context.dataset.label + ': ' + context.parsed.y + '%';\n }\n }\n }\n }\n }\n });\n } catch (error) {\n console.error('\u51c6\u786e\u7387\u56fe\u8868\u521d\u59cb\u5316\u5931\u8d25:', error);\n document.getElementById('accuracyFallback').classList.add('active');\n return null;\n }\n }\n \n \/\/ \u521d\u59cb\u5316\u6027\u80fd\u56fe\u8868\n function initPerformanceChart() {\n try {\n const ctx = document.getElementById('performanceChart').getContext('2d');\n return new Chart(ctx, {\n type: 'bar',\n data: {\n labels: chartData.performance.labels,\n datasets: [{\n label: '\u5904\u7406\u5ef6\u8fdf (ms)',\n data: chartData.performance.values,\n backgroundColor: [\n 'rgba(74, 144, 226, 0.7)',\n 'rgba(255, 209, 102, 0.7)',\n 'rgba(255, 107, 157, 0.7)',\n 'rgba(94, 96, 206, 0.7)',\n 'rgba(0, 209, 178, 0.7)'\n ],\n borderColor: [\n 'rgba(74, 144, 226, 1)',\n 'rgba(255, 209, 102, 1)',\n 'rgba(255, 107, 157, 1)',\n 'rgba(94, 96, 206, 1)',\n 'rgba(0, 209, 178, 1)'\n ],\n borderWidth: 1\n }]\n },\n options: {\n responsive: true,\n maintainAspectRatio: false,\n scales: {\n y: {\n beginAtZero: true,\n ticks: {\n color: '#a0b8d0'\n },\n grid: {\n color: 'rgba(94, 96, 206, 0.1)'\n }\n },\n x: {\n ticks: {\n color: '#e0f0ff'\n },\n grid: {\n color: 'rgba(94, 96, 206, 0.1)'\n }\n }\n },\n plugins: {\n legend: {\n labels: {\n color: '#e0f0ff',\n font: {\n size: 12\n }\n }\n },\n tooltip: {\n callbacks: {\n label: function(context) {\n return context.parsed.y + ' ms';\n }\n }\n }\n }\n }\n });\n } catch (error) {\n console.error('\u6027\u80fd\u56fe\u8868\u521d\u59cb\u5316\u5931\u8d25:', error);\n document.getElementById('performanceFallback').classList.add('active');\n return null;\n }\n }\n \n \/\/ \u521d\u59cb\u5316\u6548\u7387\u56fe\u8868\n function initEfficiencyChart() {\n try {\n const ctx = document.getElementById('efficiencyChart').getContext('2d');\n return new Chart(ctx, {\n type: 'scatter',\n data: {\n datasets: [{\n label: 'HCAI Tech',\n data: [chartData.efficiency.hcai],\n backgroundColor: 'rgba(94, 96, 206, 0.8)',\n pointRadius: 12,\n pointHoverRadius: 14\n }, {\n label: '\u4f20\u7edf\u6a21\u578b',\n data: chartData.efficiency.others,\n backgroundColor: 'rgba(160, 184, 208, 0.6)',\n pointRadius: 8,\n pointHoverRadius: 10\n }]\n },\n options: {\n responsive: true,\n maintainAspectRatio: false,\n scales: {\n x: {\n title: {\n display: true,\n text: '\u8ba1\u7b97\u8d44\u6e90\u6d88\u8017 (GFLOPS)',\n color: '#a0b8d0'\n },\n min: 10,\n max: 35,\n ticks: {\n color: '#a0b8d0'\n },\n grid: {\n color: 'rgba(94, 96, 206, 0.1)'\n }\n },\n y: {\n title: {\n display: true,\n text: '\u60c5\u611f\u8bc6\u522b\u51c6\u786e\u7387 (%)',\n color: '#a0b8d0'\n },\n min: 75,\n max: 95,\n ticks: {\n color: '#a0b8d0'\n },\n grid: {\n color: 'rgba(94, 96, 206, 0.1)'\n }\n }\n },\n plugins: {\n legend: {\n labels: {\n color: '#e0f0ff',\n font: {\n size: 12\n }\n }\n },\n tooltip: {\n callbacks: {\n label: function(context) {\n const point = context.raw;\n return `${context.dataset.label}: ${point.y.toFixed(1)}% \u51c6\u786e\u7387 @ ${point.x.toFixed(1)} GFLOPS`;\n }\n }\n }\n }\n }\n });\n } catch (error) {\n console.error('\u6548\u7387\u56fe\u8868\u521d\u59cb\u5316\u5931\u8d25:', error);\n document.getElementById('efficiencyFallback').classList.add('active');\n return null;\n }\n }\n \n \/\/ \u663e\u793a\u51c6\u786e\u7387\u6570\u636e\u8868\u683c\n function showAccuracyData() {\n alert('\u60c5\u611f\u8bc6\u522b\u51c6\u786e\u7387\u6570\u636e\uff1a\\n\\n' +\n '\u559c\u60a6: HCAI Tech 94% | \u884c\u4e1a\u5e73\u5747 85%\\n' +\n '\u60b2\u4f24: HCAI Tech 91% | \u884c\u4e1a\u5e73\u5747 82%\\n' +\n '\u6124\u6012: HCAI Tech 93% | \u884c\u4e1a\u5e73\u5747 80%\\n' +\n '\u60ca\u8bb6: HCAI Tech 92% | \u884c\u4e1a\u5e73\u5747 78%\\n' +\n '\u6050\u60e7: HCAI Tech 89% | \u884c\u4e1a\u5e73\u5747 76%\\n' +\n '\u538c\u6076: HCAI Tech 90% | \u884c\u4e1a\u5e73\u5747 79%\\n' +\n '\u4e2d\u7acb: HCAI Tech 96% | \u884c\u4e1a\u5e73\u5747 88%\\n' +\n '\u56f0\u60d1: HCAI Tech 88% | \u884c\u4e1a\u5e73\u5747 70%');\n }\n \n \/\/ \u663e\u793a\u6027\u80fd\u6570\u636e\u8868\u683c\n function showPerformanceData() {\n alert('\u5b9e\u65f6\u5904\u7406\u6027\u80fd\u6570\u636e (ms)\uff1a\\n\\n' +\n '\u4e91\u670d\u52a1\u5668: 35 ms\\n' +\n '\u8fb9\u7f18\u8bbe\u5907: 60 ms\\n' +\n '\u79fb\u52a8\u7ec8\u7aef: 80 ms\\n' +\n '\u5d4c\u5165\u5f0f\u7cfb\u7edf: 120 ms\\n' +\n '\u6d4f\u89c8\u5668\u73af\u5883: 150 ms');\n }\n \n \/\/ \u663e\u793a\u6548\u7387\u6570\u636e\u8868\u683c\n function showEfficiencyData() {\n alert('\u8d44\u6e90\u6548\u7387\u6570\u636e\uff1a\\n\\n' +\n 'HCAI Tech: 92.3% @ 12.5 GFLOPS\\n\\n' +\n '\u4f20\u7edf\u6a21\u578b:\\n' +\n '- 82.1% @ 25.8 GFLOPS\\n' +\n '- 78.5% @ 18.2 GFLOPS\\n' +\n '- 85.7% @ 32.4 GFLOPS\\n' +\n '- 80.3% @ 22.7 GFLOPS\\n' +\n '- 83.6% @ 28.3 GFLOPS');\n }\n \n \/\/ \u9875\u9762\u52a0\u8f7d\u5b8c\u6210\u540e\u521d\u59cb\u5316\n window.addEventListener('DOMContentLoaded', () => {\n \/\/ \u5ef6\u8fdf\u52a0\u8f7d\u56fe\u8868\u4ee5\u63d0\u5347\u6027\u80fd\n setTimeout(() => {\n \/\/ \u79fb\u9664\u52a0\u8f7d\u6307\u793a\u5668\n document.querySelectorAll('.loading-placeholder').forEach(el => {\n el.style.display = 'none';\n });\n \n \/\/ \u521d\u59cb\u5316\u56fe\u8868\n const accuracyChart = initAccuracyChart();\n const performanceChart = initPerformanceChart();\n const efficiencyChart = initEfficiencyChart();\n \n \/\/ \u5982\u679c\u56fe\u8868\u521d\u59cb\u5316\u5931\u8d25\uff0c\u663e\u793a\u5907\u9009\u5185\u5bb9\n if (!accuracyChart) {\n document.getElementById('accuracyFallback').classList.add('active');\n }\n if (!performanceChart) {\n document.getElementById('performanceFallback').classList.add('active');\n }\n if (!efficiencyChart) {\n document.getElementById('efficiencyFallback').classList.add('active');\n }\n }, 1000);\n });\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>HCAI Tech | \u591a\u6a21\u6001\u60c5\u611f\u5206\u6790\u6280\u672f HCAI TECH \u6838\u5fc3\u521b\u65b0 \u591a\u6a21\u6001\u60c5\u611f\u5206\u6790\u6280\u672f \u878d\u5408\u8bed\u97f3\u3001\u89c6\u89c9\u3001 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":424,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-576","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.affectivechain.com\/index.php\/wp-json\/wp\/v2\/pages\/576","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.affectivechain.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.affectivechain.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.affectivechain.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.affectivechain.com\/index.php\/wp-json\/wp\/v2\/comments?post=576"}],"version-history":[{"count":21,"href":"https:\/\/www.affectivechain.com\/index.php\/wp-json\/wp\/v2\/pages\/576\/revisions"}],"predecessor-version":[{"id":789,"href":"https:\/\/www.affectivechain.com\/index.php\/wp-json\/wp\/v2\/pages\/576\/revisions\/789"}],"up":[{"embeddable":true,"href":"https:\/\/www.affectivechain.com\/index.php\/wp-json\/wp\/v2\/pages\/424"}],"wp:attachment":[{"href":"https:\/\/www.affectivechain.com\/index.php\/wp-json\/wp\/v2\/media?parent=576"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":576,"date":"2025-06-09T19:45:26","date_gmt":"2025-06-09T11:45:26","guid":{"rendered":"https:\/\/www.affectivechain.com\/?page_id=576"},"modified":"2025-07-23T11:11:43","modified_gmt":"2025-07-23T03:11:43","slug":"multi-modal-emotion-analysis","status":"publish","type":"page","link":"https:\/\/www.affectivechain.com\/index.php\/heartfamily\/multi-modal-emotion-analysis\/","title":{"rendered":"MULTI-MODAL EMOTION ANALYSIS"},"content":{"rendered":"\n\n\n\n \n \n HCAI Tech | \u591a\u6a21\u6001\u60c5\u611f\u5206\u6790\u6280\u672f<\/title>\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Montserrat:wght@300;400;500;600;700;800&family=Orbitron:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/chart.js\"><\/script>\n <style>\n :root {\n --ai-purple: #5e60ce;\n --neural-blue: #4a90e2;\n --emotion-gold: #ffd166;\n --psych-pink: #ff6b9d;\n --deep-tech: #1a0f2d;\n --dark-space: #0a0e17;\n --text-light: #e0f0ff;\n --text-gray: #a0b8d0;\n --card-bg: rgba(26, 15, 45, 0.7);\n }\n \n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n \n body {\n font-family: 'Montserrat', sans-serif;\n background: linear-gradient(135deg, var(--deep-tech) 0%, #2d1a5f 100%);\n color: var(--text-light);\n min-height: 100vh;\n overflow-x: hidden;\n line-height: 1.6;\n }\n \n .container {\n max-width: 1400px;\n margin: 0 auto;\n padding: 40px 20px;\n }\n \n .tech-header {\n text-align: center;\n padding: 60px 20px 40px;\n position: relative;\n overflow: hidden;\n }\n \n .tech-subtitle {\n font-family: 'Orbitron', sans-serif;\n font-size: 18px;\n color: var(--neural-blue);\n letter-spacing: 4px;\n text-transform: uppercase;\n margin-bottom: 15px;\n }\n \n .tech-title {\n font-family: 'Orbitron', sans-serif;\n font-size: 56px;\n font-weight: 800;\n line-height: 1.1;\n margin-bottom: 25px;\n background: linear-gradient(to right, #e0f0ff, var(--neural-blue), var(--ai-purple));\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n }\n \n .tech-description {\n font-size: 20px;\n color: var(--text-gray);\n max-width: 800px;\n margin: 0 auto 30px;\n line-height: 1.7;\n }\n \n .innovation-highlights {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));\n gap: 30px;\n margin: 50px 0;\n }\n \n .highlight-card {\n background: var(--card-bg);\n border: 1px solid rgba(94, 96, 206, 0.3);\n border-radius: 16px;\n padding: 30px;\n transition: all 0.4s;\n position: relative;\n overflow: hidden;\n backdrop-filter: blur(5px);\n box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);\n }\n \n .highlight-card::before {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 5px;\n background: linear-gradient(90deg, var(--ai-purple), var(--neural-blue));\n }\n \n .highlight-card:hover {\n transform: translateY(-8px);\n box-shadow: 0 12px 35px rgba(94, 96, 206, 0.4);\n }\n \n .highlight-icon {\n width: 70px;\n height: 70px;\n margin-bottom: 20px;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 50%;\n font-size: 28px;\n background: rgba(74, 144, 226, 0.15);\n color: var(--neural-blue);\n }\n \n .highlight-title {\n font-size: 24px;\n margin-bottom: 15px;\n color: var(--text-light);\n }\n \n .highlight-content {\n color: var(--text-gray);\n margin-bottom: 20px;\n font-size: 16px;\n }\n \n .highlight-stats {\n display: flex;\n gap: 12px;\n flex-wrap: wrap;\n }\n \n .stat-badge {\n background: rgba(255, 209, 102, 0.15);\n color: var(--emotion-gold);\n padding: 6px 16px;\n border-radius: 30px;\n font-size: 13px;\n font-weight: 600;\n }\n \n .performance-section {\n margin: 80px 0;\n background: rgba(15, 27, 45, 0.3);\n border-radius: 20px;\n padding: 50px 30px;\n position: relative;\n overflow: hidden;\n border: 1px solid rgba(94, 96, 206, 0.2);\n }\n \n .section-header {\n text-align: center;\n margin-bottom: 50px;\n }\n \n .section-title {\n font-family: 'Orbitron', sans-serif;\n font-size: 36px;\n font-weight: 700;\n margin-bottom: 15px;\n color: var(--text-light);\n }\n \n .section-subtitle {\n font-size: 18px;\n color: var(--text-gray);\n max-width: 700px;\n margin: 0 auto;\n }\n \n .charts-container {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));\n gap: 30px;\n margin-top: 40px;\n }\n \n .chart-card {\n background: var(--card-bg);\n border-radius: 16px;\n padding: 25px;\n box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);\n border: 1px solid rgba(94, 96, 206, 0.3);\n }\n \n .chart-header {\n margin-bottom: 20px;\n }\n \n .chart-title {\n font-size: 22px;\n color: var(--text-light);\n margin-bottom: 8px;\n display: flex;\n align-items: center;\n gap: 10px;\n }\n \n .chart-description {\n color: var(--text-gray);\n font-size: 15px;\n }\n \n .chart-container {\n height: 280px;\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n \n .fallback-content {\n display: none;\n width: 100%;\n height: 100%;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n text-align: center;\n }\n \n .fallback-content.active {\n display: flex;\n }\n \n .fallback-icon {\n font-size: 48px;\n margin-bottom: 20px;\n color: var(--neural-blue);\n }\n \n .fallback-text {\n color: var(--text-gray);\n max-width: 80%;\n margin-bottom: 20px;\n }\n \n .emotion-indicators {\n display: flex;\n justify-content: space-between;\n margin-top: 15px;\n }\n \n .emotion-indicator {\n text-align: center;\n width: 12%;\n }\n \n .emotion-icon {\n font-size: 24px;\n margin-bottom: 5px;\n }\n \n .emotion-label {\n font-size: 12px;\n color: var(--text-gray);\n }\n \n .comparison-table {\n width: 100%;\n border-collapse: collapse;\n margin-top: 40px;\n background: var(--card-bg);\n border-radius: 16px;\n overflow: hidden;\n box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);\n border: 1px solid rgba(94, 96, 206, 0.3);\n }\n \n .comparison-table th {\n background: linear-gradient(90deg, var(--ai-purple), var(--neural-blue));\n color: white;\n text-align: left;\n padding: 16px 20px;\n font-weight: 600;\n font-size: 16px;\n }\n \n .comparison-table td {\n padding: 12px 20px;\n border-bottom: 1px solid rgba(94, 96, 206, 0.2);\n color: var(--text-gray);\n }\n \n .comparison-table tr:last-child td {\n border-bottom: none;\n }\n \n .comparison-table .feature {\n font-weight: 600;\n color: var(--text-light);\n width: 30%;\n }\n \n .comparison-table .hcai {\n color: var(--emotion-gold);\n font-weight: 600;\n }\n \n .comparison-table .competitor {\n color: var(--text-gray);\n }\n \n .benefits-section {\n margin: 80px 0;\n }\n \n .benefits-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));\n gap: 25px;\n margin-top: 40px;\n }\n \n .benefit-card {\n background: var(--card-bg);\n border-radius: 16px;\n padding: 30px;\n text-align: center;\n box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);\n border: 1px solid rgba(94, 96, 206, 0.3);\n transition: all 0.3s;\n }\n \n .benefit-card:hover {\n transform: translateY(-8px);\n box-shadow: 0 12px 35px rgba(94, 96, 206, 0.4);\n }\n \n .benefit-icon {\n width: 70px;\n height: 70px;\n margin: 0 auto 20px;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 50%;\n font-size: 28px;\n background: rgba(74, 144, 226, 0.15);\n color: var(--neural-blue);\n }\n \n .benefit-title {\n font-size: 20px;\n margin-bottom: 12px;\n color: var(--text-light);\n }\n \n .benefit-description {\n color: var(--text-gray);\n font-size: 15px;\n }\n \n .performance-metrics {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n gap: 20px;\n margin-top: 40px;\n }\n \n .metric-card {\n background: rgba(94, 96, 206, 0.15);\n border-radius: 12px;\n padding: 20px;\n text-align: center;\n border: 1px solid rgba(94, 96, 206, 0.3);\n }\n \n .metric-value {\n font-family: 'Orbitron', sans-serif;\n font-size: 32px;\n font-weight: 700;\n margin-bottom: 8px;\n background: linear-gradient(to right, var(--emotion-gold), var(--psych-pink));\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n }\n \n .metric-label {\n color: var(--text-gray);\n font-size: 14px;\n }\n \n .loading-placeholder {\n height: 280px;\n display: flex;\n align-items: center;\n justify-content: center;\n background: rgba(26, 15, 45, 0.5);\n border-radius: 8px;\n }\n \n .loading-spinner {\n width: 50px;\n height: 50px;\n border: 5px solid rgba(74, 144, 226, 0.3);\n border-top: 5px solid var(--neural-blue);\n border-radius: 50%;\n animation: spin 1s linear infinite;\n }\n \n @keyframes spin {\n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n }\n \n .fallback-btn {\n padding: 10px 20px;\n background: rgba(94, 96, 206, 0.3);\n color: var(--text-light);\n border: 1px solid var(--neural-blue);\n border-radius: 30px;\n cursor: pointer;\n transition: all 0.3s;\n font-size: 14px;\n }\n \n .fallback-btn:hover {\n background: rgba(94, 96, 206, 0.5);\n }\n \n @media (max-width: 1024px) {\n .tech-title {\n font-size: 48px;\n }\n \n .section-title {\n font-size: 32px;\n }\n }\n \n @media (max-width: 768px) {\n .tech-title {\n font-size: 36px;\n }\n \n .tech-description {\n font-size: 16px;\n }\n \n .innovation-highlights {\n grid-template-columns: 1fr;\n }\n \n .charts-container {\n grid-template-columns: 1fr;\n }\n \n .section-title {\n font-size: 28px;\n }\n }\n \n @media (max-width: 480px) {\n .tech-title {\n font-size: 32px;\n }\n \n .tech-subtitle {\n font-size: 14px;\n }\n \n .highlight-title, .chart-title, .benefit-title {\n font-size: 18px;\n }\n \n .chart-container {\n height: 250px;\n }\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"container\">\n <header class=\"tech-header\">\n <div class=\"tech-subtitle\">HCAI TECH \u6838\u5fc3\u521b\u65b0<\/div>\n <h1 class=\"tech-title\">\u591a\u6a21\u6001\u60c5\u611f\u5206\u6790\u6280\u672f<\/h1>\n <p class=\"tech-description\">\n \u878d\u5408\u8bed\u97f3\u3001\u89c6\u89c9\u3001\u751f\u7406\u4fe1\u53f7\u4e0e\u6587\u672c\u7684\u8de8\u6a21\u6001\u60c5\u611f\u8bc6\u522b\u7cfb\u7edf\uff0c\u7a81\u7834\u6027\u5b9e\u73b092.3%\u7684\u51c6\u786e\u7387\uff0c\u4e3a\u5fc3\u7406\u5065\u5eb7\u3001\u4eba\u673a\u4ea4\u4e92\u548c\u7528\u6237\u4f53\u9a8c\u9886\u57df\u63d0\u4f9b\u9769\u547d\u6027\u89e3\u51b3\u65b9\u6848\u3002\n <\/p>\n \n <div class=\"performance-metrics\">\n <div class=\"metric-card\">\n <div class=\"metric-value\">92.3%<\/div>\n <div class=\"metric-label\">\u60c5\u611f\u8bc6\u522b\u51c6\u786e\u7387<\/div>\n <\/div>\n <div class=\"metric-card\">\n <div class=\"metric-value\">\u226480ms<\/div>\n <div class=\"metric-label\">\u5b9e\u65f6\u5904\u7406\u5ef6\u8fdf<\/div>\n <\/div>\n <div class=\"metric-card\">\n <div class=\"metric-value\">27+<\/div>\n <div class=\"metric-label\">\u60c5\u7eea\u72b6\u6001\u8bc6\u522b<\/div>\n <\/div>\n <div class=\"metric-card\">\n <div class=\"metric-value\">4<\/div>\n <div class=\"metric-label\">\u591a\u6a21\u6001\u6570\u636e\u6e90<\/div>\n <\/div>\n <\/div>\n <\/header>\n \n <section class=\"innovation-section\">\n <div class=\"innovation-highlights\">\n <div class=\"highlight-card\">\n <div class=\"highlight-icon\">\n <i class=\"fas fa-brain\"><\/i>\n <\/div>\n <h3 class=\"highlight-title\">\u8de8\u6a21\u6001\u6ce8\u610f\u529b\u878d\u5408<\/h3>\n <p class=\"highlight-content\">\n \u52a8\u6001\u52a0\u6743\u6ce8\u610f\u529b\u673a\u5236\u5b9e\u65f6\u5206\u6790\u5404\u6a21\u6001\u4fe1\u53f7\u8d28\u91cf\uff0c\u81ea\u52a8\u8c03\u6574\u878d\u5408\u6743\u91cd\uff0c\u89e3\u51b3\u5355\u4e00\u4fe1\u53f7\u6e90\u504f\u5dee\u95ee\u9898\u3002\n <\/p>\n <div class=\"highlight-stats\">\n <span class=\"stat-badge\">+18% \u51c6\u786e\u7387\u63d0\u5347<\/span>\n <span class=\"stat-badge\">\u5b9e\u65f6\u52a8\u6001\u52a0\u6743<\/span>\n <\/div>\n <\/div>\n \n <div class=\"highlight-card\">\n <div class=\"highlight-icon\">\n <i class=\"fas fa-wave-square\"><\/i>\n <\/div>\n <h3 class=\"highlight-title\">\u5fae\u8868\u60c5\u8bc6\u522b\u5f15\u64ce<\/h3>\n <p class=\"highlight-content\">\n \u65f6\u7a7a\u5377\u79ef\u795e\u7ecf\u7f51\u7edc\u6355\u63491\/25\u79d2\u5fae\u8868\u60c5\u53d8\u5316\uff0c\u8bc6\u522b27\u79cd\u590d\u5408\u60c5\u7eea\u72b6\u6001\uff0c\u7a81\u7834\u4f20\u7edf\u6280\u672f\u74f6\u9888\u3002\n <\/p>\n <div class=\"highlight-stats\">\n <span class=\"stat-badge\">\u6beb\u79d2\u7ea7\u8bc6\u522b<\/span>\n <span class=\"stat-badge\">95%\u68c0\u6d4b\u7cbe\u5ea6<\/span>\n <\/div>\n <\/div>\n \n <div class=\"highlight-card\">\n <div class=\"highlight-icon\">\n <i class=\"fas fa-heartbeat\"><\/i>\n <\/div>\n <h3 class=\"highlight-title\">\u751f\u7406\u4fe1\u53f7\u60c5\u611f\u6620\u5c04<\/h3>\n <p class=\"highlight-content\">\n \u57fa\u4e8eHRV\u548cGSR\u7684\u60c5\u7eea\u72b6\u6001\u6a21\u578b\uff0c\u901a\u8fc7\u8054\u90a6\u5b66\u4e60\u4fdd\u62a4\u9690\u79c1\uff0c\u5b9e\u73b0\u65e0\u4fb5\u5165\u5f0f\u60c5\u611f\u76d1\u6d4b\u3002\n <\/p>\n <div class=\"highlight-stats\">\n <span class=\"stat-badge\">\u975e\u63a5\u89e6\u5f0f\u76d1\u6d4b<\/span>\n <span class=\"stat-badge\">\u9690\u79c1\u4fdd\u62a4<\/span>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n \n <section class=\"performance-section\">\n <div class=\"section-header\">\n <h2 class=\"section-title\">\u6027\u80fd\u8868\u73b0\u4e0e\u6280\u672f\u6307\u6807<\/h2>\n <p class=\"section-subtitle\">\u5728\u884c\u4e1a\u6807\u51c6\u6d4b\u8bd5\u4e2d\u7684\u5353\u8d8a\u8868\u73b0<\/p>\n <\/div>\n \n <div class=\"charts-container\">\n <div class=\"chart-card\">\n <div class=\"chart-header\">\n <h3 class=\"chart-title\"><i class=\"fas fa-chart-line\"><\/i> \u60c5\u611f\u8bc6\u522b\u51c6\u786e\u7387\u5bf9\u6bd4<\/h3>\n <p class=\"chart-description\">\u5728\u6807\u51c6\u60c5\u611f\u6570\u636e\u96c6\u4e0a\u7684\u8868\u73b0\uff088\u79cd\u57fa\u672c\u60c5\u7eea\uff09<\/p>\n <\/div>\n <div class=\"chart-container\">\n <div class=\"loading-placeholder\">\n <div class=\"loading-spinner\"><\/div>\n <\/div>\n <canvas id=\"accuracyChart\"><\/canvas>\n <div class=\"fallback-content\" id=\"accuracyFallback\">\n <div class=\"fallback-icon\">\n <i class=\"fas fa-exclamation-triangle\"><\/i>\n <\/div>\n <p class=\"fallback-text\">\u56fe\u8868\u52a0\u8f7d\u5931\u8d25\uff0c\u8bf7\u5c1d\u8bd5\u5237\u65b0\u9875\u9762\u6216\u67e5\u770b\u4e0b\u65b9\u8868\u683c\u6570\u636e<\/p>\n <button class=\"fallback-btn\" onclick=\"showAccuracyData()\">\u663e\u793a\u6570\u636e\u8868\u683c<\/button>\n <\/div>\n <\/div>\n <div class=\"emotion-indicators\">\n <div class=\"emotion-indicator\">\n <div class=\"emotion-icon\">\ud83d\ude0a<\/div>\n <div class=\"emotion-label\">\u559c\u60a6<\/div>\n <\/div>\n <div class=\"emotion-indicator\">\n <div class=\"emotion-icon\">\ud83d\ude22<\/div>\n <div class=\"emotion-label\">\u60b2\u4f24<\/div>\n <\/div>\n <div class=\"emotion-indicator\">\n <div class=\"emotion-icon\">\ud83d\ude20<\/div>\n <div class=\"emotion-label\">\u6124\u6012<\/div>\n <\/div>\n <div class=\"emotion-indicator\">\n <div class=\"emotion-icon\">\ud83d\ude32<\/div>\n <div class=\"emotion-label\">\u60ca\u8bb6<\/div>\n <\/div>\n <div class=\"emotion-indicator\">\n <div class=\"emotion-icon\">\ud83d\ude28<\/div>\n <div class=\"emotion-label\">\u6050\u60e7<\/div>\n <\/div>\n <div class=\"emotion-indicator\">\n <div class=\"emotion-icon\">\ud83e\udd22<\/div>\n <div class=\"emotion-label\">\u538c\u6076<\/div>\n <\/div>\n <div class=\"emotion-indicator\">\n <div class=\"emotion-icon\">\ud83d\ude10<\/div>\n <div class=\"emotion-label\">\u4e2d\u7acb<\/div>\n <\/div>\n <div class=\"emotion-indicator\">\n <div class=\"emotion-icon\">\ud83d\ude15<\/div>\n <div class=\"emotion-label\">\u56f0\u60d1<\/div>\n <\/div>\n <\/div>\n <\/div>\n \n <div class=\"chart-card\">\n <div class=\"chart-header\">\n <h3 class=\"chart-title\"><i class=\"fas fa-tachometer-alt\"><\/i> \u5b9e\u65f6\u5904\u7406\u6027\u80fd<\/h3>\n <p class=\"chart-description\">\u4e0d\u540c\u786c\u4ef6\u5e73\u53f0\u4e0a\u7684\u5904\u7406\u5ef6\u8fdf\uff08\u6beb\u79d2\uff09<\/p>\n <\/div>\n <div class=\"chart-container\">\n <div class=\"loading-placeholder\">\n <div class=\"loading-spinner\"><\/div>\n <\/div>\n <canvas id=\"performanceChart\"><\/canvas>\n <div class=\"fallback-content\" id=\"performanceFallback\">\n <div class=\"fallback-icon\">\n <i class=\"fas fa-exclamation-triangle\"><\/i>\n <\/div>\n <p class=\"fallback-text\">\u56fe\u8868\u52a0\u8f7d\u5931\u8d25\uff0c\u8bf7\u5c1d\u8bd5\u5237\u65b0\u9875\u9762\u6216\u67e5\u770b\u4e0b\u65b9\u8868\u683c\u6570\u636e<\/p>\n <button class=\"fallback-btn\" onclick=\"showPerformanceData()\">\u663e\u793a\u6570\u636e\u8868\u683c<\/button>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n \n <div class=\"chart-card\" style=\"margin-top: 30px;\">\n <div class=\"chart-header\">\n <h3 class=\"chart-title\"><i class=\"fas fa-microchip\"><\/i> \u8d44\u6e90\u6548\u7387\u5bf9\u6bd4<\/h3>\n <p class=\"chart-description\">\u6a21\u578b\u8ba1\u7b97\u8d44\u6e90\u6d88\u8017\uff08GFLOPS\uff09\u4e0e\u51c6\u786e\u7387\u5e73\u8861<\/p>\n <\/div>\n <div class=\"chart-container\">\n <div class=\"loading-placeholder\">\n <div class=\"loading-spinner\"><\/div>\n <\/div>\n <canvas id=\"efficiencyChart\"><\/canvas>\n <div class=\"fallback-content\" id=\"efficiencyFallback\">\n <div class=\"fallback-icon\">\n <i class=\"fas fa-exclamation-triangle\"><\/i>\n <\/div>\n <p class=\"fallback-text\">\u56fe\u8868\u52a0\u8f7d\u5931\u8d25\uff0c\u8bf7\u5c1d\u8bd5\u5237\u65b0\u9875\u9762\u6216\u67e5\u770b\u4e0b\u65b9\u8868\u683c\u6570\u636e<\/p>\n <button class=\"fallback-btn\" onclick=\"showEfficiencyData()\">\u663e\u793a\u6570\u636e\u8868\u683c<\/button>\n <\/div>\n <\/div>\n <\/div>\n \n <table class=\"comparison-table\">\n <thead>\n <tr>\n <th>\u6280\u672f\u7279\u6027<\/th>\n <th>HCAI Tech<\/th>\n <th>\u4f20\u7edf\u89e3\u51b3\u65b9\u6848<\/th>\n <\/tr>\n <\/thead>\n <tbody>\n <tr>\n <td class=\"feature\">\u591a\u6a21\u6001\u878d\u5408\u673a\u5236<\/td>\n <td class=\"hcai\">\u52a8\u6001\u52a0\u6743\u6ce8\u610f\u529b\u878d\u5408<\/td>\n <td class=\"competitor\">\u56fa\u5b9a\u6743\u91cd\u5e73\u5747\u878d\u5408<\/td>\n <\/tr>\n <tr>\n <td class=\"feature\">\u5fae\u8868\u60c5\u8bc6\u522b\u80fd\u529b<\/td>\n <td class=\"hcai\">\u652f\u63011\/25\u79d2\u5fae\u8868\u60c5<\/td>\n <td class=\"competitor\">\u4ec5\u57fa\u7840\u8868\u60c5\u8bc6\u522b<\/td>\n <\/tr>\n <tr>\n <td class=\"feature\">\u60c5\u7eea\u5206\u7c7b\u7ef4\u5ea6<\/td>\n <td class=\"hcai\">8\u79cd\u57fa\u672c+27\u79cd\u590d\u5408\u60c5\u7eea<\/td>\n <td class=\"competitor\">6-8\u79cd\u57fa\u672c\u60c5\u7eea<\/td>\n <\/tr>\n <tr>\n <td class=\"feature\">\u5b9e\u65f6\u5904\u7406\u5ef6\u8fdf<\/td>\n <td class=\"hcai\">\u226480ms<\/td>\n <td class=\"competitor\">200-500ms<\/td>\n <\/tr>\n <tr>\n <td class=\"feature\">\u9690\u79c1\u4fdd\u62a4\u673a\u5236<\/td>\n <td class=\"hcai\">\u8054\u90a6\u5b66\u4e60+\u8fb9\u7f18\u8ba1\u7b97<\/td>\n <td class=\"competitor\">\u4e2d\u5fc3\u5316\u5904\u7406<\/td>\n <\/tr>\n <\/tbody>\n <\/table>\n <\/section>\n \n <section class=\"benefits-section\">\n <div class=\"section-header\">\n <h2 class=\"section-title\">\u5e94\u7528\u573a\u666f\u4e0e\u4ef7\u503c<\/h2>\n <p class=\"section-subtitle\">\u591a\u6a21\u6001\u60c5\u611f\u5206\u6790\u6280\u672f\u7684\u521b\u65b0\u5e94\u7528\u9886\u57df<\/p>\n <\/div>\n \n <div class=\"benefits-grid\">\n <div class=\"benefit-card\">\n <div class=\"benefit-icon\">\n <i class=\"fas fa-user-md\"><\/i>\n <\/div>\n <h3 class=\"benefit-title\">\u5fc3\u7406\u5065\u5eb7\u76d1\u6d4b<\/h3>\n <p class=\"benefit-description\">\n \u5b9e\u65f6\u76d1\u6d4b\u5fc3\u7406\u72b6\u6001\uff0c\u65e9\u671f\u9884\u8b66\u5fc3\u7406\u5065\u5eb7\u5371\u673a\uff0c\u4e3a\u8fdc\u7a0b\u6cbb\u7597\u63d0\u4f9b\u6570\u636e\u652f\u6301\n <\/p>\n <\/div>\n \n <div class=\"benefit-card\">\n <div class=\"benefit-icon\">\n <i class=\"fas fa-robot\"><\/i>\n <\/div>\n <h3 class=\"benefit-title\">\u667a\u80fd\u4eba\u673a\u4ea4\u4e92<\/h3>\n <p class=\"benefit-description\">\n \u4f7fAI\u7cfb\u7edf\u7406\u89e3\u4eba\u7c7b\u60c5\u611f\u72b6\u6001\uff0c\u5b9e\u73b0\u81ea\u7136\u3001\u5171\u60c5\u7684\u4eba\u673a\u5bf9\u8bdd\u4f53\u9a8c\n <\/p>\n <\/div>\n \n <div class=\"benefit-card\">\n <div class=\"benefit-icon\">\n <i class=\"fas fa-shopping-cart\"><\/i>\n <\/div>\n <h3 class=\"benefit-title\">\u7528\u6237\u4f53\u9a8c\u4f18\u5316<\/h3>\n <p class=\"benefit-description\">\n \u5b9e\u65f6\u5206\u6790\u7528\u6237\u60c5\u7eea\u53cd\u5e94\uff0c\u91cf\u5316\u4f53\u9a8c\u6570\u636e\uff0c\u6307\u5bfc\u4ea7\u54c1\u8bbe\u8ba1\u4e0e\u670d\u52a1\u4f18\u5316\n <\/p>\n <\/div>\n \n <div class=\"benefit-card\">\n <div class=\"benefit-icon\">\n <i class=\"fas fa-graduation-cap\"><\/i>\n <\/div>\n <h3 class=\"benefit-title\">\u667a\u80fd\u6559\u80b2<\/h3>\n <p class=\"benefit-description\">\n \u76d1\u6d4b\u5b66\u4e60\u72b6\u6001\u4e0e\u60c5\u7eea\u53d8\u5316\uff0c\u81ea\u9002\u5e94\u8c03\u6574\u6559\u5b66\u8282\u594f\uff0c\u63d0\u5347\u6559\u80b2\u6548\u679c\n <\/p>\n <\/div>\n <\/div>\n <\/section>\n <\/div>\n\n <script>\n \/\/ \u56fe\u8868\u6570\u636e\n const chartData = {\n accuracy: {\n labels: ['\u559c\u60a6', '\u60b2\u4f24', '\u6124\u6012', '\u60ca\u8bb6', '\u6050\u60e7', '\u538c\u6076', '\u4e2d\u7acb', '\u56f0\u60d1'],\n hcai: [94, 91, 93, 92, 89, 90, 96, 88],\n industry: [85, 82, 80, 78, 76, 79, 88, 70]\n },\n performance: {\n labels: ['\u4e91\u670d\u52a1\u5668', '\u8fb9\u7f18\u8bbe\u5907', '\u79fb\u52a8\u7ec8\u7aef', '\u5d4c\u5165\u5f0f\u7cfb\u7edf', '\u6d4f\u89c8\u5668\u73af\u5883'],\n values: [35, 60, 80, 120, 150]\n },\n efficiency: {\n hcai: {x: 12.5, y: 92.3},\n others: [\n {x: 25.8, y: 82.1},\n {x: 18.2, y: 78.5},\n {x: 32.4, y: 85.7},\n {x: 22.7, y: 80.3},\n {x: 28.3, y: 83.6}\n ]\n }\n };\n \n \/\/ \u521d\u59cb\u5316\u51c6\u786e\u7387\u56fe\u8868\n function initAccuracyChart() {\n try {\n const ctx = document.getElementById('accuracyChart').getContext('2d');\n return new Chart(ctx, {\n type: 'bar',\n data: {\n labels: chartData.accuracy.labels,\n datasets: [{\n label: 'HCAI Tech',\n data: chartData.accuracy.hcai,\n backgroundColor: 'rgba(94, 96, 206, 0.7)',\n borderColor: 'rgba(94, 96, 206, 1)',\n borderWidth: 1\n }, {\n label: '\u884c\u4e1a\u5e73\u5747',\n data: chartData.accuracy.industry,\n backgroundColor: 'rgba(160, 184, 208, 0.7)',\n borderColor: 'rgba(160, 184, 208, 1)',\n borderWidth: 1\n }]\n },\n options: {\n responsive: true,\n maintainAspectRatio: false,\n scales: {\n y: {\n beginAtZero: true,\n max: 100,\n ticks: {\n color: '#a0b8d0',\n callback: function(value) {\n return value + '%';\n }\n },\n grid: {\n color: 'rgba(94, 96, 206, 0.1)'\n }\n },\n x: {\n ticks: {\n color: '#e0f0ff'\n },\n grid: {\n color: 'rgba(94, 96, 206, 0.1)'\n }\n }\n },\n plugins: {\n legend: {\n labels: {\n color: '#e0f0ff',\n font: {\n size: 12\n }\n }\n },\n tooltip: {\n callbacks: {\n label: function(context) {\n return context.dataset.label + ': ' + context.parsed.y + '%';\n }\n }\n }\n }\n }\n });\n } catch (error) {\n console.error('\u51c6\u786e\u7387\u56fe\u8868\u521d\u59cb\u5316\u5931\u8d25:', error);\n document.getElementById('accuracyFallback').classList.add('active');\n return null;\n }\n }\n \n \/\/ \u521d\u59cb\u5316\u6027\u80fd\u56fe\u8868\n function initPerformanceChart() {\n try {\n const ctx = document.getElementById('performanceChart').getContext('2d');\n return new Chart(ctx, {\n type: 'bar',\n data: {\n labels: chartData.performance.labels,\n datasets: [{\n label: '\u5904\u7406\u5ef6\u8fdf (ms)',\n data: chartData.performance.values,\n backgroundColor: [\n 'rgba(74, 144, 226, 0.7)',\n 'rgba(255, 209, 102, 0.7)',\n 'rgba(255, 107, 157, 0.7)',\n 'rgba(94, 96, 206, 0.7)',\n 'rgba(0, 209, 178, 0.7)'\n ],\n borderColor: [\n 'rgba(74, 144, 226, 1)',\n 'rgba(255, 209, 102, 1)',\n 'rgba(255, 107, 157, 1)',\n 'rgba(94, 96, 206, 1)',\n 'rgba(0, 209, 178, 1)'\n ],\n borderWidth: 1\n }]\n },\n options: {\n responsive: true,\n maintainAspectRatio: false,\n scales: {\n y: {\n beginAtZero: true,\n ticks: {\n color: '#a0b8d0'\n },\n grid: {\n color: 'rgba(94, 96, 206, 0.1)'\n }\n },\n x: {\n ticks: {\n color: '#e0f0ff'\n },\n grid: {\n color: 'rgba(94, 96, 206, 0.1)'\n }\n }\n },\n plugins: {\n legend: {\n labels: {\n color: '#e0f0ff',\n font: {\n size: 12\n }\n }\n },\n tooltip: {\n callbacks: {\n label: function(context) {\n return context.parsed.y + ' ms';\n }\n }\n }\n }\n }\n });\n } catch (error) {\n console.error('\u6027\u80fd\u56fe\u8868\u521d\u59cb\u5316\u5931\u8d25:', error);\n document.getElementById('performanceFallback').classList.add('active');\n return null;\n }\n }\n \n \/\/ \u521d\u59cb\u5316\u6548\u7387\u56fe\u8868\n function initEfficiencyChart() {\n try {\n const ctx = document.getElementById('efficiencyChart').getContext('2d');\n return new Chart(ctx, {\n type: 'scatter',\n data: {\n datasets: [{\n label: 'HCAI Tech',\n data: [chartData.efficiency.hcai],\n backgroundColor: 'rgba(94, 96, 206, 0.8)',\n pointRadius: 12,\n pointHoverRadius: 14\n }, {\n label: '\u4f20\u7edf\u6a21\u578b',\n data: chartData.efficiency.others,\n backgroundColor: 'rgba(160, 184, 208, 0.6)',\n pointRadius: 8,\n pointHoverRadius: 10\n }]\n },\n options: {\n responsive: true,\n maintainAspectRatio: false,\n scales: {\n x: {\n title: {\n display: true,\n text: '\u8ba1\u7b97\u8d44\u6e90\u6d88\u8017 (GFLOPS)',\n color: '#a0b8d0'\n },\n min: 10,\n max: 35,\n ticks: {\n color: '#a0b8d0'\n },\n grid: {\n color: 'rgba(94, 96, 206, 0.1)'\n }\n },\n y: {\n title: {\n display: true,\n text: '\u60c5\u611f\u8bc6\u522b\u51c6\u786e\u7387 (%)',\n color: '#a0b8d0'\n },\n min: 75,\n max: 95,\n ticks: {\n color: '#a0b8d0'\n },\n grid: {\n color: 'rgba(94, 96, 206, 0.1)'\n }\n }\n },\n plugins: {\n legend: {\n labels: {\n color: '#e0f0ff',\n font: {\n size: 12\n }\n }\n },\n tooltip: {\n callbacks: {\n label: function(context) {\n const point = context.raw;\n return `${context.dataset.label}: ${point.y.toFixed(1)}% \u51c6\u786e\u7387 @ ${point.x.toFixed(1)} GFLOPS`;\n }\n }\n }\n }\n }\n });\n } catch (error) {\n console.error('\u6548\u7387\u56fe\u8868\u521d\u59cb\u5316\u5931\u8d25:', error);\n document.getElementById('efficiencyFallback').classList.add('active');\n return null;\n }\n }\n \n \/\/ \u663e\u793a\u51c6\u786e\u7387\u6570\u636e\u8868\u683c\n function showAccuracyData() {\n alert('\u60c5\u611f\u8bc6\u522b\u51c6\u786e\u7387\u6570\u636e\uff1a\\n\\n' +\n '\u559c\u60a6: HCAI Tech 94% | \u884c\u4e1a\u5e73\u5747 85%\\n' +\n '\u60b2\u4f24: HCAI Tech 91% | \u884c\u4e1a\u5e73\u5747 82%\\n' +\n '\u6124\u6012: HCAI Tech 93% | \u884c\u4e1a\u5e73\u5747 80%\\n' +\n '\u60ca\u8bb6: HCAI Tech 92% | \u884c\u4e1a\u5e73\u5747 78%\\n' +\n '\u6050\u60e7: HCAI Tech 89% | \u884c\u4e1a\u5e73\u5747 76%\\n' +\n '\u538c\u6076: HCAI Tech 90% | \u884c\u4e1a\u5e73\u5747 79%\\n' +\n '\u4e2d\u7acb: HCAI Tech 96% | \u884c\u4e1a\u5e73\u5747 88%\\n' +\n '\u56f0\u60d1: HCAI Tech 88% | \u884c\u4e1a\u5e73\u5747 70%');\n }\n \n \/\/ \u663e\u793a\u6027\u80fd\u6570\u636e\u8868\u683c\n function showPerformanceData() {\n alert('\u5b9e\u65f6\u5904\u7406\u6027\u80fd\u6570\u636e (ms)\uff1a\\n\\n' +\n '\u4e91\u670d\u52a1\u5668: 35 ms\\n' +\n '\u8fb9\u7f18\u8bbe\u5907: 60 ms\\n' +\n '\u79fb\u52a8\u7ec8\u7aef: 80 ms\\n' +\n '\u5d4c\u5165\u5f0f\u7cfb\u7edf: 120 ms\\n' +\n '\u6d4f\u89c8\u5668\u73af\u5883: 150 ms');\n }\n \n \/\/ \u663e\u793a\u6548\u7387\u6570\u636e\u8868\u683c\n function showEfficiencyData() {\n alert('\u8d44\u6e90\u6548\u7387\u6570\u636e\uff1a\\n\\n' +\n 'HCAI Tech: 92.3% @ 12.5 GFLOPS\\n\\n' +\n '\u4f20\u7edf\u6a21\u578b:\\n' +\n '- 82.1% @ 25.8 GFLOPS\\n' +\n '- 78.5% @ 18.2 GFLOPS\\n' +\n '- 85.7% @ 32.4 GFLOPS\\n' +\n '- 80.3% @ 22.7 GFLOPS\\n' +\n '- 83.6% @ 28.3 GFLOPS');\n }\n \n \/\/ \u9875\u9762\u52a0\u8f7d\u5b8c\u6210\u540e\u521d\u59cb\u5316\n window.addEventListener('DOMContentLoaded', () => {\n \/\/ \u5ef6\u8fdf\u52a0\u8f7d\u56fe\u8868\u4ee5\u63d0\u5347\u6027\u80fd\n setTimeout(() => {\n \/\/ \u79fb\u9664\u52a0\u8f7d\u6307\u793a\u5668\n document.querySelectorAll('.loading-placeholder').forEach(el => {\n el.style.display = 'none';\n });\n \n \/\/ \u521d\u59cb\u5316\u56fe\u8868\n const accuracyChart = initAccuracyChart();\n const performanceChart = initPerformanceChart();\n const efficiencyChart = initEfficiencyChart();\n \n \/\/ \u5982\u679c\u56fe\u8868\u521d\u59cb\u5316\u5931\u8d25\uff0c\u663e\u793a\u5907\u9009\u5185\u5bb9\n if (!accuracyChart) {\n document.getElementById('accuracyFallback').classList.add('active');\n }\n if (!performanceChart) {\n document.getElementById('performanceFallback').classList.add('active');\n }\n if (!efficiencyChart) {\n document.getElementById('efficiencyFallback').classList.add('active');\n }\n }, 1000);\n });\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>HCAI Tech | \u591a\u6a21\u6001\u60c5\u611f\u5206\u6790\u6280\u672f HCAI TECH \u6838\u5fc3\u521b\u65b0 \u591a\u6a21\u6001\u60c5\u611f\u5206\u6790\u6280\u672f \u878d\u5408\u8bed\u97f3\u3001\u89c6\u89c9\u3001 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":424,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-576","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.affectivechain.com\/index.php\/wp-json\/wp\/v2\/pages\/576","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.affectivechain.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.affectivechain.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.affectivechain.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.affectivechain.com\/index.php\/wp-json\/wp\/v2\/comments?post=576"}],"version-history":[{"count":21,"href":"https:\/\/www.affectivechain.com\/index.php\/wp-json\/wp\/v2\/pages\/576\/revisions"}],"predecessor-version":[{"id":789,"href":"https:\/\/www.affectivechain.com\/index.php\/wp-json\/wp\/v2\/pages\/576\/revisions\/789"}],"up":[{"embeddable":true,"href":"https:\/\/www.affectivechain.com\/index.php\/wp-json\/wp\/v2\/pages\/424"}],"wp:attachment":[{"href":"https:\/\/www.affectivechain.com\/index.php\/wp-json\/wp\/v2\/media?parent=576"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}