Files
vf_react/public/htmls/AI手势识别.html
2025-12-05 13:29:18 +08:00

511 lines
31 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="zh-CN" data-theme="night">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AI手势识别 - 深度概念投研报告</title>
<!-- Tailwind CSS & DaisyUI -->
<link href="https://cdn.jsdelivr.net/npm/daisyui@4.10.1/dist/full.min.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.tailwindcss.com"></script>
<!-- Alpine.js -->
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
<!-- ECharts -->
<script src="https://cdn.jsdelivr.net/npm/echarts@5.5.0/dist/echarts.min.js"></script>
<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Orbitron:wght@400;700&display=swap" rel="stylesheet">
<style>
:root {
--glow-color-1: rgba(79, 70, 229, 0.4);
--glow-color-2: rgba(219, 39, 119, 0.3);
--bg-color: #020010;
}
html {
scroll-behavior: smooth;
}
body {
font-family: 'Inter', sans-serif;
background-color: var(--bg-color);
color: #e0e0e0;
overflow-x: hidden;
position: relative;
}
.title-font {
font-family: 'Orbitron', sans-serif;
}
/* Background Glows */
body::before {
content: '';
position: fixed;
top: -20%;
left: -20%;
width: 60vw;
height: 60vh;
background: radial-gradient(circle, var(--glow-color-1) 0%, transparent 70%);
filter: blur(100px);
z-index: -1;
animation: moveGlow1 25s infinite alternate ease-in-out;
}
body::after {
content: '';
position: fixed;
bottom: -20%;
right: -20%;
width: 60vw;
height: 60vh;
background: radial-gradient(circle, var(--glow-color-2) 0%, transparent 70%);
filter: blur(100px);
z-index: -1;
animation: moveGlow2 30s infinite alternate ease-in-out;
}
@keyframes moveGlow1 {
from { transform: translate(-20%, -20%) rotate(0deg); }
to { transform: translate(20%, 20%) rotate(180deg); }
}
@keyframes moveGlow2 {
from { transform: translate(20%, 20%) rotate(0deg); }
to { transform: translate(-20%, -20%) rotate(-180deg); }
}
/* Glassmorphism Card Style */
.glass-card {
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.1);
transition: all 0.3s ease;
}
.glass-card:hover {
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.2);
transform: translateY(-5px);
}
.section-title {
@apply text-2xl font-bold mb-4 text-cyan-300 title-font tracking-widest;
text-shadow: 0 0 8px rgba(0, 255, 255, 0.5);
}
/* Custom Scrollbar */
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: rgba(255, 255, 255, 0.05);
}
::-webkit-scrollbar-thumb {
background: rgba(79, 70, 229, 0.6);
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: rgba(79, 70, 229, 0.8);
}
</style>
</head>
<body class="min-h-screen">
<div class="container mx-auto p-4 sm:p-6 lg:p-8">
<!-- Header -->
<header class="text-center py-12">
<h1 class="text-5xl md:text-7xl font-bold title-font text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 to-fuchsia-500 mb-4">
AI手势识别
</h1>
<p class="text-lg text-gray-400 max-w-3xl mx-auto">
下一代人机交互范式变革的核心驱动力,从二维触控迈向三维空间交互的奇点。
</p>
<div class="mt-4 text-xs text-gray-500">
北京价值前沿科技有限公司 AI投研agent“价小前投研” 进行投研呈现本报告为AI合成数据投资需谨慎。
</div>
</header>
<!-- Bento Grid Layout -->
<main class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-12">
<!-- Insight Core View -->
<section class="lg:col-span-2 glass-card rounded-2xl p-6">
<h2 class="section-title">概念核心观点</h2>
<div class="prose prose-invert max-w-none text-gray-300">
<p>AI手势识别正处在一个由<strong>单一爆品华为Mate 70引爆市场情绪</strong>,并向<strong>多场景、全生态渗透</strong>的关键拐点。其核心驱动力是<strong>下一代人机交互范式的变革需求</strong>,即从二维触控走向三维空间交互。</p>
<p>当前市场处于高度乐观的<strong>主题炒作与基本面验证初期</strong>阶段,长期潜力巨大,但短期需警惕预期过高和技术路线分化的风险。</p>
<div class="mt-4 p-4 border border-indigo-500/30 rounded-lg bg-indigo-900/20">
<h4 class="font-bold text-indigo-300">市场演进路径:</h4>
<ol class="list-decimal list-inside mt-2 space-y-1">
<li><strong>技术标杆:</strong> 苹果Vision Pro定义了“毫米级”手势识别精度树立行业标杆。</li>
<li><strong>市场引爆:</strong> 华为Mate 70以“隔空传送”功能将该技术推向大规模消费市场。</li>
<li><strong>生态渗透:</strong> 未来将融入智能穿戴、XR、智能汽车、人形机器人等全场景。</li>
</ol>
</div>
</div>
</section>
<!-- Market Outlook -->
<section class="glass-card rounded-2xl p-6 flex flex-col justify-center items-center text-center">
<h2 class="section-title">市场前景</h2>
<p class="text-gray-400 text-sm mb-4">报告预计全球手势交互市场规模将超</p>
<div class="text-6xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-green-300 to-cyan-400">
$200亿
</div>
<p class="text-gray-400 text-sm mt-2">至2030年</p>
</section>
<!-- Key Events -->
<section class="lg:col-span-3 glass-card rounded-2xl p-6">
<h2 class="section-title">关键事件与催化剂</h2>
<ul class="timeline timeline-snap-icon max-md:timeline-compact timeline-vertical">
<li>
<div class="timeline-middle">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="h-5 w-5 text-cyan-400"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.06 0l4.001-5.5a.75.75 0 00-.124-.96z" clip-rule="evenodd" /></svg>
</div>
<div class="timeline-start md:text-end mb-10">
<time class="font-mono italic">2024.Q1</time>
<div class="text-lg font-black">苹果Vision Pro发售</div>
以“毫米级”精度和“眼动+手势”的复合操控体系,定义了空间计算交互的行业新高度。
</div>
<hr class="bg-cyan-400/50"/>
</li>
<li>
<hr class="bg-cyan-400/50"/>
<div class="timeline-middle">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="h-5 w-5 text-fuchsia-400"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.06 0l4.001-5.5a.75.75 0 00-.124-.96z" clip-rule="evenodd" /></svg>
</div>
<div class="timeline-end mb-10">
<time class="font-mono italic">2024.Q4 (预期)</time>
<div class="text-lg font-black">华为Mate 70系列发布</div>
预热视频展示“AI隔空传送”将手势识别从小众XR设备带入主流智能手机市场引爆产业链。
</div>
<hr class="bg-fuchsia-400/50"/>
</li>
<li>
<hr class="bg-fuchsia-400/50"/>
<div class="timeline-middle">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="h-5 w-5 text-indigo-400"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.06 0l4.001-5.5a.75.75 0 00-.124-.96z" clip-rule="evenodd" /></svg>
</div>
<div class="timeline-start md:text-end mb-10">
<time class="font-mono italic">2025及以后</time>
<div class="text-lg font-black">多点开花</div>
Meta发布AI眼镜小米推出A1型AI音频眼镜苹果AirPods集成手势识别技术向全场景渗透。
</div>
<hr class="bg-indigo-400/50"/>
</li>
</ul>
</section>
<!-- Industry Chain Chart -->
<section class="lg:col-span-2 glass-card rounded-2xl p-6">
<h2 class="section-title">产业链图谱</h2>
<div id="industry-chain-chart" class="w-full h-80"></div>
</section>
<!-- Key Tech -->
<section class="glass-card rounded-2xl p-6">
<h2 class="section-title">核心技术硬件</h2>
<div class="space-y-4">
<div class="p-3 rounded-lg bg-gray-500/10">
<h4 class="font-bold text-cyan-300">ToF芯片</h4>
<p class="text-sm text-gray-400">实现3D深度感知是隔空手势操作的核心载体。 (代表: 力芯微)</p>
</div>
<div class="p-3 rounded-lg bg-gray-500/10">
<h4 class="font-bold text-fuchsia-300">生物识别滤光片</h4>
<p class="text-sm text-gray-400">华为AI手势识别的关键光学元件。 (代表: 五方光电)</p>
</div>
<div class="p-3 rounded-lg bg-gray-500/10">
<h4 class="font-bold text-indigo-300">深度视觉模组</h4>
<p class="text-sm text-gray-400">结合AI算法实现手势、身份、表情等多维识别。 (代表: 欧菲光)</p>
</div>
</div>
</section>
</main>
<!-- Detailed Insight Section -->
<section class="mb-12 glass-card rounded-2xl p-6" x-data="{ activeTab: 'logic' }">
<div class="tabs tabs-boxed bg-black/20 mb-6">
<a class="tab" :class="{ 'tab-active': activeTab === 'logic' }" @click="activeTab = 'logic'">核心逻辑</a>
<a class="tab" :class="{ 'tab-active': activeTab === 'path' }" @click="activeTab = 'path'">发展路径</a>
<a class="tab" :class="{ 'tab-active': activeTab === 'risk' }" @click="activeTab = 'risk'">潜在风险</a>
</div>
<div class="prose prose-invert max-w-none text-gray-300">
<div x-show="activeTab === 'logic'">
<h3 class="text-xl font-bold text-cyan-300">核心驱动力与市场认知</h3>
<ol>
<li><strong>交互革命的必然性:</strong>随着空间计算XR、万物互联鸿蒙、智能汽车和人形机器人的兴起传统触控交互已显不足。手势识别作为最符合人类直觉的交互方式与语音、眼动追踪共同构成<strong>多模态交互</strong>的基石。</li>
<li><strong>技术成熟度提升:</strong>AI算法的进步如虹软算法与核心硬件的迭代ToF芯片、滤光片共同推动了手势识别的精度和可靠性使其从实验室走向消费级产品。</li>
<li><strong>巨头引领的生态构建:</strong>华为的“AI隔空传送”将手势识别作为打通鸿蒙生态设备壁垒的关键入口表明手势识别不再是单一功能而是生态战略的重要组成部分。</li>
</ol>
<h3 class="text-xl font-bold text-cyan-300 mt-6">预期差分析</h3>
<ul>
<li><strong>技术精度与成本:</strong>市场可能低估了实现苹果Vision Pro“毫米级”精度所需的技术门槛和硬件成本将不同质量的方案混为一谈。</li>
<li><strong>应用场景:</strong>市场普遍聚焦于手机的“隔空操作”但手势识别真正的“杀手级”应用可能在AR/VR的空间计算和人形机器人的实时交互中。</li>
<li><strong>公司业务纯度:</strong>部分关联个股与核心的消费电子手势识别关联度较弱,存在“蹭概念”的嫌疑,市场情绪高涨时可能忽略这种差异。</li>
</ul>
</div>
<div x-show="activeTab === 'path'">
<h3 class="text-xl font-bold text-cyan-300">长期发展路径</h3>
<ul class="steps steps-vertical lg:steps-horizontal w-full">
<li class="step step-primary">
<div class="text-left p-2">
<h4 class="font-bold">第一阶段 (当前-2025)</h4>
<p class="text-sm">单点突破与多点开花。以手机、AI/AR眼镜为主要载体实现基础隔空操控。</p>
</div>
</li>
<li class="step step-primary">
<div class="text-left p-2">
<h4 class="font-bold">第二阶段 (2025-2027)</h4>
<p class="text-sm">生态融合与体验深化。深度融入操作系统,跨设备无缝流转,扩展至智能汽车、家居。</p>
</div>
</li>
<li class="step">
<div class="text-left p-2">
<h4 class="font-bold">第三阶段 (2027以后)</h4>
<p class="text-sm">人机共融与行业普及。成为人形机器人、工业控制等领域的标准交互方式。</p>
</div>
</li>
</ul>
</div>
<div x-show="activeTab === 'risk'">
<h3 class="text-xl font-bold text-cyan-300">潜在风险与挑战</h3>
<div class="grid md:grid-cols-2 gap-4">
<div class="p-4 border border-rose-500/30 rounded-lg bg-rose-900/20">
<h4 class="font-bold text-rose-300">技术风险</h4>
<ul class="list-disc list-inside mt-2 text-sm">
<li><strong>精度与延迟瓶颈:</strong> 除苹果外,多数方案仍为“厘米级”,可能影响用户体验。</li>
<li><strong>环境适应性:</strong> 在暗光、强光、复杂背景下的鲁棒性仍是挑战。</li>
</ul>
</div>
<div class="p-4 border border-amber-500/30 rounded-lg bg-amber-900/20">
<h4 class="font-bold text-amber-300">商业化风险</h4>
<ul class="list-disc list-inside mt-2 text-sm">
<li><strong>“杀手级”应用缺失:</strong> 功能虽新颖,但尚不构成用户“刚需”,可能沦为“炫技”。</li>
<li><strong>成本与功耗:</strong> 高精度硬件会增加设备成本和功耗,限制向中低端普及。</li>
</ul>
</div>
<div class="p-4 border border-sky-500/30 rounded-lg bg-sky-900/20 md:col-span-2">
<h4 class="font-bold text-sky-300">信息交叉验证风险</h4>
<p class="text-sm mt-2">研报数据中对手势识别的直接深入分析较少,大多作为“多模态交互”分支提及。这与当前市场极高热度形成对比,表明<strong>市场情绪可能已大幅领先于产业研究和基本面验证</strong>,这本身是一个显著的风险信号。</p>
</div>
</div>
</div>
</div>
</section>
<!-- Recent Movers -->
<section class="mb-12">
<h2 class="section-title">市场近期异动分析</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<div class="glass-card rounded-2xl p-6">
<div class="flex justify-between items-center mb-2">
<h3 class="font-bold text-xl text-white">杰克股份 <span class="text-sm text-gray-400">603337</span></h3>
<div class="badge badge-error gap-2">+10.01%</div>
</div>
<p class="text-sm text-gray-300"><strong>核心逻辑:</strong> AI缝纫机技术突破。通过摄像头记录和分析操作工人的手势与标准模板匹配为操作改进提供参考并布局人形机器人领域。技术创新应对行业挑战探索新市场机遇。</p>
</div>
<div class="glass-card rounded-2xl p-6">
<div class="flex justify-between items-center mb-2">
<h3 class="font-bold text-xl text-white">合合信息 <span class="text-sm text-gray-400">688615</span></h3>
<div class="badge badge-error gap-2">+6.23%</div>
</div>
<p class="text-sm text-gray-300"><strong>核心逻辑:</strong> AI鉴伪技术获得市场关注。在世界AI大会展示精准识别伪造面容的技术叠加业绩预告表现良好符合市场对AI应用变现的关注点。</p>
</div>
<div class="glass-card rounded-2xl p-6">
<div class="flex justify-between items-center mb-2">
<h3 class="font-bold text-xl text-white">三花智控 <span class="text-sm text-gray-400">002050</span></h3>
<div class="badge badge-error gap-2">+10.00%</div>
</div>
<p class="text-sm text-gray-300"><strong>核心逻辑:</strong> 特斯拉人形机器人核心供应商。作为Optimus旋转关节总成Tier-1在特斯拉AI品牌中国落地、量产预期升温的背景下情绪与业绩弹性共振。</p>
</div>
</div>
</section>
<!-- Associated Companies Table -->
<section>
<h2 class="section-title">相关上市公司梳理</h2>
<div class="overflow-x-auto glass-card rounded-2xl p-2">
<table class="table table-zebra bg-transparent">
<thead>
<tr class="text-cyan-300">
<th>股票名称</th>
<th>股票代码</th>
<th>核心逻辑 / 业务关联</th>
<th>其他标签</th>
</tr>
</thead>
<tbody class="text-gray-300">
<!-- Data will be populated by JS -->
</tbody>
</table>
</div>
</section>
</div>
<script>
document.addEventListener('DOMContentLoaded', function () {
// ECharts - Industry Chain
var industryChartDom = document.getElementById('industry-chain-chart');
var myIndustryChart = echarts.init(industryChartDom, 'dark');
var industryOption = {
backgroundColor: 'transparent',
tooltip: {
trigger: 'item',
triggerOn: 'mousemove'
},
series: [
{
type: 'tree',
data: [{
name: 'AI手势识别产业链',
children: [
{
name: '上游:核心硬件',
collapsed: false,
children: [
{ name: 'ToF芯片 (力芯微)' },
{ name: '生物识别滤光片 (五方光电)' },
{ name: '深度视觉模组 (欧菲光)' },
{ name: '微型摄像头 (炬光科技)' },
{ name: '光学镜头 (联创电子)' }
]
},
{
name: '中游:算法与软件',
collapsed: false,
children: [
{ name: '算法供应商 (虹软科技, 佳创视讯)' },
{ name: '操作系统 (华为鸿蒙, 苹果visionOS)' }
]
},
{
name: '下游:终端应用',
collapsed: false,
children: [
{ name: '智能手机 (华为, 小米)' },
{ name: 'XR/AR/AI设备 (苹果, Meta)' },
{ name: '智能汽车 (小米)' },
{ name: '人形机器人 (小米)' }
]
}
]
}],
top: '5%',
left: '15%',
bottom: '5%',
right: '25%',
symbolSize: 10,
orient: 'RL',
label: {
position: 'right',
verticalAlign: 'middle',
align: 'left',
color: '#e0e0e0',
fontSize: 12
},
leaves: {
label: {
position: 'left',
verticalAlign: 'middle',
align: 'right'
}
},
emphasis: {
focus: 'descendant'
},
expandAndCollapse: true,
animationDuration: 550,
animationDurationUpdate: 750
}
]
};
myIndustryChart.setOption(industryOption);
// Stock Data Processing
const stockData = {
"佳创视讯": { "code": "300264", "reasons": ["自定义手势识别:在默认的点击、拖拽手势之外,研发定制创新手势识别系统,可扩展支持例如指向,触摸虚拟展品等手势识别"], "tags": ["真实流通市值: 23亿"] },
"魅视科技": { "code": "001209", "reasons": ["手势识别最小盘子公司自主研发的“AI体感控制调度技术”融合AI技术实现了通过手势控制大屏进行人机交互将分布式系统人机交互的可视化图形交互升级到人机自然交互", "技术实现手势控制大屏人机交互"], "tags": ["真实流通市值: 8.66亿", "AI手势"] },
"恒信东方": { "code": "300081", "reasons": ["公司目前正在研发基于A1+单目摄像头的动捕方式", "产品支持如手势识别、眼动追踪等"], "tags": ["真实流通市值: 38.1亿"] },
"方直科技": { "code": "300235", "reasons": ["AI课程生产线围绕打造教师超写实AI数字分身解决课程制作中拍摄耗时、更新困难等难题结合AIGC新科技"], "tags": ["真实流通市值: 16.67亿"] },
"创维数字": { "code": "000810", "reasons": ["AI手势公司研发中心下设智慧研究院在人工智能中已积累了计算机视觉CV算法、自然语言处理NLP算法", "有手势识别算法等AI应用技术"], "tags": ["真实流通市值: 63亿"] },
"佳禾智能": { "code": "300793", "reasons": ["手势识别专利", "华为合作商;含手势识别在内专利"], "tags": ["真实流通市值: 41亿", "华为合作商"] },
"星宸科技": { "code": "301536", "reasons": ["公司通过AI技术将手势识别、表情识别等多模态交互功能加入其中为客户提供与设备更灵活自如的交互功能", "视频对讲芯片含手势识别算法"], "tags": ["真实流通市值: 16.9亿"] },
"天键股份": { "code": "301383", "reasons": ["与B端客户进行了定制化开发和手势控制功能的探讨未来将根据市场需求不断开发新的版本。"], "tags": ["真实流通市值: 16.2亿"] },
"同辉信息": { "code": "430090", "reasons": ["支持自定义手势识别技术", "应用端支持用户手势识别、眼球追踪等"], "tags": ["真实流通市值: 15亿"] },
"五方光电": { "code": "002962", "reasons": ["生物识别滤光片为手势识别提供基础", "研发方向应用于手势识别、动作追踪、AR/VR等功能的生物识别滤光片产品供货有华为"], "tags": ["AI手势"] },
"辰奕智能": { "code": "301578", "reasons": ["华为合作商实现10种手势识别技术"], "tags": ["华为合作商"] },
"鸿合科技": { "code": "002955", "reasons": ["华为智能视频服务商,核心技术含手势识别"], "tags": ["华为智能视频服务商"] },
"联创电子": { "code": "002036", "reasons": ["华为Mate系列3D光学镜头供应商"], "tags": ["华为Mate系列3D光学镜头供应商"] },
"东田微": { "code": "301183", "reasons": ["华为手机摄像头滤光片供应商"], "tags": ["华为手机摄像头滤光片供应商"] },
"虹软科技": { "code": "688088", "reasons": ["华为合作商;手势识别上有较强技术"], "tags": ["华为合作商"] },
"汉王科技": { "code": "002362", "reasons": ["华为合作伙伴;拥有手势识别技术"], "tags": ["华为合作伙伴"] },
"华平股份": { "code": "300074", "reasons": ["有识别自定义手势轨迹发明专利"], "tags": [] },
"苏州固锝": { "code": "002079", "reasons": ["惯性传感器研发可用于手势动作获取"], "tags": [] },
"亿道信息": { "code": "001314", "reasons": ["MR新品具备手势识别、眼球追踪"], "tags": [] },
"维海德": { "code": "301318", "reasons": ["实现基于AI的人形检测算法能进行自动跟踪"], "tags": [] },
"拓邦股份": { "code": "002139", "reasons": ["积累AI、触屏手势新交互等技术"], "tags": [] },
"秋田微": { "code": "300939", "reasons": ["公司产品能实现10mm近距离高准确度和高灵敏度的隔空手势识别避免人和触控显示屏的直接接触"], "tags": ["AI手势"] }
};
const tableBody = document.querySelector('tbody');
Object.keys(stockData).forEach(stockName => {
const data = stockData[stockName];
const row = document.createElement('tr');
row.className = 'hover';
// Stock Name
const nameCell = document.createElement('td');
nameCell.textContent = stockName;
row.appendChild(nameCell);
// Stock Code with link
const codeCell = document.createElement('td');
const codeLink = document.createElement('a');
codeLink.href = `https://valuefrontier.cn/company?scode=${data.code}`;
codeLink.textContent = data.code;
codeLink.target = '_blank';
codeLink.className = 'link link-hover text-indigo-400';
codeCell.appendChild(codeLink);
row.appendChild(codeCell);
// Reasons
const reasonCell = document.createElement('td');
reasonCell.className = 'text-sm text-gray-400';
// Join unique reasons
const uniqueReasons = [...new Set(data.reasons)];
reasonCell.textContent = uniqueReasons.join(' | ');
row.appendChild(reasonCell);
// Tags
const tagsCell = document.createElement('td');
const uniqueTags = [...new Set(data.tags)];
uniqueTags.forEach(tag => {
const badge = document.createElement('div');
badge.className = 'badge badge-outline badge-info mr-1 mb-1';
badge.textContent = tag;
tagsCell.appendChild(badge);
});
row.appendChild(tagsCell);
tableBody.appendChild(row);
});
// Resize chart on window resize
window.addEventListener('resize', function() {
myIndustryChart.resize();
});
});
</script>
</body>
</html>