1048 lines
64 KiB
HTML
1048 lines
64 KiB
HTML
<!--
|
|
注意：将此代码嵌入 WordPress 时：
|
|
1. 建议使用 "Custom HTML" (自定义HTML) 区块。
|
|
2. 确保你的 WordPress 主题允许加载外部脚本 (Tailwind CDN)。
|
|
3. 如果样式冲突，可能需要根据主题调整 z-index 或 padding。
|
|
-->
|
|
|
|
<!-- 引入 Tailwind CSS (如果主题未包含) -->
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
|
|
<!-- Google Fonts -->
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
|
|
|
<script>
|
|
tailwind.config = {
|
|
theme: {
|
|
screens: {
|
|
'sm': '640px',
|
|
'md': '768px',
|
|
'lg': '1024px',
|
|
'xl': '1280px',
|
|
},
|
|
extend: {
|
|
colors: {
|
|
primary: '#3b82f6', // 隼瞻科技蓝
|
|
secondary: '#0E42D2',
|
|
accent: '#4facfe', // 浅蓝渐变色
|
|
},
|
|
fontFamily: {
|
|
inter: ['Inter', 'sans-serif'],
|
|
},
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.glass-panel {
|
|
background: linear-gradient(135deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.3));
|
|
backdrop-filter: blur(16px);
|
|
-webkit-backdrop-filter: blur(16px);
|
|
border: 1px solid rgba(255, 255, 255, 0.8);
|
|
box-shadow: 0 8px 32px -4px rgba(59, 130, 246, 0.1);
|
|
}
|
|
.glass-panel-light {
|
|
background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.6));
|
|
backdrop-filter: blur(20px);
|
|
-webkit-backdrop-filter: blur(20px);
|
|
border: 1px solid rgba(255, 255, 255, 1);
|
|
box-shadow: 0 4px 16px -2px rgba(59, 130, 246, 0.05);
|
|
}
|
|
|
|
#wingsemi-solution-wrapper {
|
|
font-family: 'Inter', sans-serif;
|
|
color: #334155;
|
|
background-color: #f8fafc;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
#wingsemi-solution-wrapper .animate-fade-in {
|
|
opacity: 0;
|
|
transform: translateY(20px);
|
|
transition: opacity 0.6s ease-out, transform 0.6s ease-out;
|
|
}
|
|
|
|
#wingsemi-solution-wrapper .animate-fade-in.visible {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
|
|
#wingsemi-solution-wrapper .gradient-text {
|
|
background-clip: text;
|
|
-webkit-background-clip: text;
|
|
color: transparent;
|
|
background-image: linear-gradient(to right, #2563eb 0%, #06b6d4 100%);
|
|
}
|
|
|
|
#wingsemi-solution-wrapper .card-hover {
|
|
transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
|
}
|
|
|
|
#wingsemi-solution-wrapper .card-hover:hover {
|
|
transform: translateY(-5px);
|
|
box-shadow: 0 20px 40px rgba(59,130,246,0.15);
|
|
background: rgba(255,255,255,0.9);
|
|
border-color: rgba(59, 130, 246, 0.4);
|
|
}
|
|
|
|
/* Roadmap Timeline Styles */
|
|
#wingsemi-solution-wrapper .timeline-connector {
|
|
background: linear-gradient(to right, #f8fafc, #3b82f6, #f8fafc);
|
|
height: 4px;
|
|
width: 100%;
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
z-index: 0;
|
|
opacity: 0.5;
|
|
}
|
|
|
|
#wingsemi-solution-wrapper .roadmap-chart-bg {
|
|
background: linear-gradient(180deg, rgba(59, 130, 246, 0) 0%, rgba(59, 130, 246, 0.05) 50%, rgba(59, 130, 246, 0.15) 100%);
|
|
clip-path: polygon(0 100%, 100% 100%, 100% 20%, 75% 60%, 50% 70%, 25% 85%, 0 90%);
|
|
}
|
|
|
|
#wingsemi-solution-wrapper .compact-list {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
#wingsemi-solution-wrapper .compact-list li {
|
|
margin-bottom: 0.75rem !important;
|
|
line-height: 1.4 !important;
|
|
}
|
|
|
|
#wingsemi-solution-wrapper .compact-list li:last-child {
|
|
margin-bottom: 0 !important;
|
|
}
|
|
|
|
#wingsemi-solution-wrapper .compact-list li p {
|
|
margin: 0.25rem 0 0 0 !important;
|
|
line-height: 1.4 !important;
|
|
}
|
|
|
|
#wingsemi-solution-wrapper .compact-list li h5 {
|
|
margin: 0 0 0.25rem 0 !important;
|
|
line-height: 1.3 !important;
|
|
}
|
|
|
|
@keyframes drawPath {
|
|
0% { stroke-dasharray: 100; stroke-dashoffset: 100; }
|
|
100% { stroke-dasharray: 100; stroke-dashoffset: 0; }
|
|
}
|
|
|
|
.animate-draw-path {
|
|
animation: drawPath 1.5s ease-out forwards;
|
|
stroke-dasharray: 100;
|
|
stroke-dashoffset: 100;
|
|
}
|
|
|
|
/* Hero区域背景动画 - 浅色 */
|
|
#wingsemi-solution-wrapper .hero-bg {
|
|
position: absolute;
|
|
top: 0; left: 0; width: 100%; height: 100%;
|
|
overflow: hidden; z-index: 0;
|
|
}
|
|
|
|
#wingsemi-solution-wrapper .hero-bg::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: -50%; left: -50%;
|
|
width: 200%; height: 200%;
|
|
max-width: 200vw;
|
|
background:
|
|
radial-gradient(circle at 20% 30%, rgba(59, 130, 246, 0.15) 0%, transparent 50%),
|
|
radial-gradient(circle at 80% 70%, rgba(14, 165, 233, 0.1) 0%, transparent 50%),
|
|
radial-gradient(circle at 50% 50%, rgba(99, 102, 241, 0.05) 0%, transparent 70%);
|
|
animation: heroGradient 20s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes heroGradient {
|
|
0%, 100% { transform: translate(0, 0) rotate(0deg); }
|
|
25% { transform: translate(5%, 5%) rotate(5deg); }
|
|
50% { transform: translate(0, 10%) rotate(0deg); }
|
|
75% { transform: translate(-5%, 5%) rotate(-5deg); }
|
|
}
|
|
|
|
/* 网格背景 - 浅色 */
|
|
#wingsemi-solution-wrapper .grid-bg {
|
|
position: absolute;
|
|
top: 0; left: 0; width: 100%; height: 100%;
|
|
background-image:
|
|
linear-gradient(rgba(59, 130, 246, 0.06) 1px, transparent 1px),
|
|
linear-gradient(90deg, rgba(59, 130, 246, 0.06) 1px, transparent 1px);
|
|
background-size: 50px 50px;
|
|
animation: gridMove 30s linear infinite;
|
|
z-index: 0;
|
|
}
|
|
|
|
@keyframes gridMove {
|
|
0% { background-position: 0 0; }
|
|
100% { background-position: 50px 50px; }
|
|
}
|
|
|
|
#wingsemi-solution-wrapper .particles {
|
|
position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; z-index: 1;
|
|
}
|
|
|
|
#wingsemi-solution-wrapper .particle {
|
|
position: absolute; width: 4px; height: 4px; background: rgba(59, 130, 246, 0.4); border-radius: 50%;
|
|
animation: float 15s infinite ease-in-out;
|
|
}
|
|
|
|
@keyframes float {
|
|
0%, 100% { transform: translateY(100vh) scale(0); opacity: 0; }
|
|
10% { opacity: 1; }
|
|
90% { opacity: 1; }
|
|
100% { transform: translateY(-100px) scale(1); opacity: 0; }
|
|
}
|
|
|
|
/* 全局光晕背景 */
|
|
.light-glows {
|
|
position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden;
|
|
}
|
|
.light-glows .glow-1 { position: absolute; top: -10%; left: -10%; width: 50%; height: 50%; border-radius: 50%; background: rgba(191,219,254,0.4); filter: blur(100px); }
|
|
.light-glows .glow-2 { position: absolute; bottom: -10%; right: -10%; width: 40%; height: 40%; border-radius: 50%; background: rgba(186,230,253,0.3); filter: blur(100px); }
|
|
.light-glows .glow-3 { position: absolute; top: 40%; right: 10%; width: 30%; height: 30%; border-radius: 50%; background: rgba(199,210,254,0.4); filter: blur(80px); }
|
|
</style>
|
|
|
|
<div id="wingsemi-solution-wrapper" class="w-full relative bg-slate-50 relative overflow-hidden">
|
|
<div class="light-glows">
|
|
<div class="glow-1"></div>
|
|
<div class="glow-2"></div>
|
|
<div class="glow-3"></div>
|
|
</div>
|
|
|
|
<!-- 头部 Banner -->
|
|
<section id="ai-hero-section" class="relative pt-24 pb-24 bg-gradient-to-br from-white/70 to-slate-100/70 overflow-hidden backdrop-blur-sm border-b border-white">
|
|
<!-- 星座背景Canvas -->
|
|
<canvas id="ai-constellation-canvas" class="absolute top-0 left-0 w-full h-full" style="z-index: 0;"></canvas>
|
|
<div class="hero-bg"></div>
|
|
<div class="grid-bg"></div>
|
|
<div class="particles" id="ai-particles"></div>
|
|
|
|
<div class="absolute top-0 right-0 w-1/2 h-full opacity-[0.05] pointer-events-none" style="z-index: 2;">
|
|
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
|
|
<path fill="#3b82f6" d="M44.7,-76.4C58.9,-69.2,71.8,-59.1,81.6,-46.6C91.4,-34.1,98.1,-19.2,95.8,-5.3C93.5,8.6,82.2,21.5,70.6,32.2C59,42.9,47.1,51.4,34.8,58.3C22.5,65.2,9.8,70.5,-1.9,73.8C-13.6,77.1,-24.3,78.4,-34.4,74.1C-44.5,69.8,-54,59.9,-62.3,49.1C-70.6,38.3,-77.7,26.6,-79.9,14.1C-82.1,1.6,-79.4,-11.7,-73.2,-23.6C-67,-35.5,-57.3,-46,-46.3,-54.6C-35.3,-63.2,-23,-69.9,-10.1,-71.2C2.8,-72.5,29.6,-83.6,44.7,-76.4Z" transform="translate(100 100)" />
|
|
</svg>
|
|
</div>
|
|
|
|
<div class="container mx-auto px-4 relative z-10">
|
|
<div class="max-w-4xl mx-auto text-center">
|
|
<h1 class="text-[clamp(2.5rem,5vw,4.5rem)] font-extrabold text-slate-800 leading-tight mb-6 drop-shadow-sm">
|
|
<span class="gradient-text">智翼端侧AI</span><br> CPU+NPU融合解决方案
|
|
</h1>
|
|
<div class="bg-blue-50/80 inline-block px-6 pt-4 pb-4 rounded-full mb-6 border border-blue-200/50 shadow-sm animate-fade-in backdrop-blur-md">
|
|
<h2 class="text-lg md:text-xl font-bold text-primary">领域专用处理器的自动化敏捷开发新范式</h2>
|
|
</div>
|
|
<p class="text-lg md:text-xl text-slate-600 mb-8 max-w-3xl mx-auto leading-relaxed font-medium">
|
|
基于隼瞻 RISC-V 处理器 IP 和 ArchitStudio 敏捷开发平台，打造从硅前到硅后全周期可重构的端侧 AI 处理器集群方案。
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 1.5. 行业痛点分析 -->
|
|
<section class="py-20 relative overflow-hidden">
|
|
<!-- 背景元素 -->
|
|
<div class="absolute -left-20 top-20 w-64 h-64 bg-red-100 rounded-full blur-3xl pointer-events-none opacity-50"></div>
|
|
<div class="absolute -right-20 bottom-20 w-64 h-64 bg-blue-100 rounded-full blur-3xl pointer-events-none opacity-50"></div>
|
|
|
|
<div class="container mx-auto px-4 relative z-10">
|
|
<div class="text-center mb-16 animate-fade-in">
|
|
<h2 class="text-3xl font-extrabold text-slate-800 mb-6 font-inter">端侧 AI 应用场景的痛点</h2>
|
|
<div class="max-w-4xl mx-auto glass-panel rounded-2xl p-6 border-l-4 border-l-red-500 border-white shadow-md">
|
|
<p class="text-lg md:text-xl text-slate-700 leading-relaxed font-medium">
|
|
<i class="fa fa-exclamation-triangle text-red-500 mr-2"></i>
|
|
AI 应用的多样性以及对算力需求的持续增长，与端侧芯片在功耗面积上的约束是<span class="text-red-500 font-bold">永恒的矛盾</span>。
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-6xl mx-auto">
|
|
<!-- 1. 业务场景 -->
|
|
<div class="glass-panel p-8 rounded-2xl border border-white shadow-lg animate-fade-in hover-card group">
|
|
<div class="flex items-start gap-5">
|
|
<div class="flex-shrink-0 w-14 h-14 bg-orange-50 rounded-xl flex items-center justify-center border border-orange-100 shadow-inner group-hover:scale-110 transition-transform">
|
|
<i class="fa fa-cubes text-orange-500 text-2xl"></i>
|
|
</div>
|
|
<div>
|
|
<h3 class="text-xl font-bold text-slate-800 mb-3">丰富多样的端侧AI应用场景</h3>
|
|
<ul class="space-y-3 text-slate-600 font-medium text-sm">
|
|
<li class="flex items-start"><i class="fa fa-angle-right text-orange-500 mt-1 mr-2 text-lg"></i><span>语音识别、图像识别、视频分析、自然语言处理等</span></li>
|
|
<li class="flex items-start"><i class="fa fa-angle-right text-orange-500 mt-1 mr-2 text-lg"></i><span>场景碎片化，需求多样化</span></li>
|
|
</ul>
|
|
<div class="mt-4 text-xs font-bold text-orange-400 uppercase tracking-wider">Business Scenarios</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 2. AI模型 -->
|
|
<div class="glass-panel p-8 rounded-2xl border border-white shadow-lg animate-fade-in hover-card group" style="transition-delay: 100ms;">
|
|
<div class="flex items-start gap-5">
|
|
<div class="flex-shrink-0 w-14 h-14 bg-blue-50 rounded-xl flex items-center justify-center border border-blue-100 shadow-inner group-hover:scale-110 transition-transform">
|
|
<i class="fa fa-sitemap text-blue-500 text-2xl"></i>
|
|
</div>
|
|
<div>
|
|
<h3 class="text-xl font-bold text-slate-800 mb-3">AI模型种类繁多且持续演进</h3>
|
|
<ul class="space-y-3 text-slate-600 font-medium text-sm">
|
|
<li class="flex items-start"><i class="fa fa-angle-right text-blue-500 mt-1 mr-2 text-lg"></i><span>CNN、RNN、Transformer、轻量化模型等</span></li>
|
|
<li class="flex items-start"><i class="fa fa-angle-right text-blue-500 mt-1 mr-2 text-lg"></i><span>新模型层出不穷，架构复杂度不断提升</span></li>
|
|
</ul>
|
|
<div class="mt-4 text-xs font-bold text-blue-400 uppercase tracking-wider">AI Models</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 3. 硬件资源 -->
|
|
<div class="glass-panel p-8 rounded-2xl border border-white shadow-lg animate-fade-in hover-card group" style="transition-delay: 200ms;">
|
|
<div class="flex items-start gap-5">
|
|
<div class="flex-shrink-0 w-14 h-14 bg-red-50 rounded-xl flex items-center justify-center border border-red-100 shadow-inner group-hover:scale-110 transition-transform">
|
|
<i class="fa fa-microchip text-red-500 text-2xl"></i>
|
|
</div>
|
|
<div>
|
|
<h3 class="text-xl font-bold text-slate-800 mb-3">硬件资源受限是核心挑战</h3>
|
|
<div class="flex flex-wrap gap-2 mb-2">
|
|
<span class="px-3 py-1 bg-red-50 border border-red-200 rounded font-bold text-xs text-red-600 shadow-sm">功耗限制</span>
|
|
<span class="px-3 py-1 bg-red-50 border border-red-200 rounded font-bold text-xs text-red-600 shadow-sm">面积约束</span>
|
|
<span class="px-3 py-1 bg-red-50 border border-red-200 rounded font-bold text-xs text-red-600 shadow-sm">实时性要求</span>
|
|
</div>
|
|
<div class="mt-4 text-xs font-bold text-red-400 uppercase tracking-wider">Core Challenge</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 4. 新数据类型 -->
|
|
<div class="glass-panel p-8 rounded-2xl border border-white shadow-lg animate-fade-in hover-card group" style="transition-delay: 300ms;">
|
|
<div class="flex items-start gap-5">
|
|
<div class="flex-shrink-0 w-14 h-14 bg-slate-100 rounded-xl flex items-center justify-center border border-slate-200 shadow-inner group-hover:scale-110 transition-transform">
|
|
<i class="fa fa-database text-slate-500 text-2xl"></i>
|
|
</div>
|
|
<div>
|
|
<h3 class="text-xl font-bold text-slate-800 mb-3">新数据/算子不断涌现</h3>
|
|
<ul class="space-y-3 text-slate-600 font-medium text-sm">
|
|
<li class="flex items-start"><i class="fa fa-angle-right text-slate-400 mt-1 mr-2 text-lg"></i><span>低比特整型、FP8等等</span></li>
|
|
<li class="flex items-start"><i class="fa fa-angle-right text-slate-400 mt-1 mr-2 text-lg"></i><span>对硬件可编程性和扩展性提出更高要求</span></li>
|
|
</ul>
|
|
<div class="mt-4 text-xs font-bold text-slate-400 uppercase tracking-wider">New Data Types</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 2. "智翼"系列 Roadmap -->
|
|
<section class="py-16 relative">
|
|
<div class="container mx-auto px-4">
|
|
<div class="text-center mb-16 animate-fade-in">
|
|
<h2 class="text-3xl font-extrabold text-slate-800 mb-4">端侧AI融合解决方案 —— “智翼”系列 Roadmap</h2>
|
|
<div class="w-12 h-1 bg-primary mx-auto rounded-full mb-4 opacity-70"></div>
|
|
<p class="text-slate-500 font-medium">从MCU到高性能边缘计算，全场景覆盖</p>
|
|
</div>
|
|
|
|
<!-- Roadmap 布局 -->
|
|
<div class="relative py-20 lg:py-48 overflow-x-auto no-scrollbar">
|
|
<div class="absolute inset-0 top-20 pointer-events-none roadmap-chart-bg hidden lg:block opacity-60"></div>
|
|
<!-- Line -->
|
|
<div class="absolute left-8 right-8 top-[50%] h-1 bg-blue-100 rounded-full z-0 hidden lg:block"></div>
|
|
|
|
<div class="flex flex-nowrap lg:justify-between gap-6 min-w-[1000px] px-4 relative z-10">
|
|
|
|
<!-- 1. 轻翊 -->
|
|
<div class="w-64 flex-shrink-0 animate-fade-in" style="transition-delay: 100ms;">
|
|
<div class="glass-panel-light h-full border border-white rounded-2xl p-7 card-hover relative lg:mt-[-40px]">
|
|
<div class="absolute -top-4 left-6 bg-blue-100 text-blue-700 font-bold text-xs px-4 py-1.5 rounded-full border border-blue-200 shadow-sm">入门级</div>
|
|
<h3 class="text-2xl font-black text-slate-800 mb-1 mt-2">轻翊</h3>
|
|
<p class="text-sm font-semibold text-slate-500 mb-5">AI MCU / 目标识别</p>
|
|
|
|
<div class="space-y-4 text-sm bg-white/50 p-4 rounded-xl border border-white shadow-inner">
|
|
<div>
|
|
<span class="block text-primary font-bold"><i class="fa fa-microchip mr-1"></i> CPU: Wing-M130</span>
|
|
<span class="text-slate-500 text-xs font-medium ml-5">Dhrystone 2.23</span>
|
|
</div>
|
|
<div class="w-full h-px bg-slate-200"></div>
|
|
<div>
|
|
<span class="block text-emerald-500 font-bold"><i class="fa fa-cube mr-1"></i> NPU: N100</span>
|
|
<ul class="text-xs text-slate-600 space-y-1 mt-1 ml-5 font-medium">
|
|
<li>• 算力: 0.1-0.5 TOPS</li>
|
|
<li>• 主频: 500MHz</li>
|
|
<li>• SRAM: 64KB ~ 1.0MB</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="mt-6 flex gap-3 justify-center text-xl text-slate-400">
|
|
<div class="w-10 h-10 bg-white rounded-full flex items-center justify-center shadow-sm"><i class="fa fa-microchip" title="MCU"></i></div>
|
|
<div class="w-10 h-10 bg-white rounded-full flex items-center justify-center shadow-sm"><i class="fa fa-crosshairs" title="目标识别"></i></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 2. 翔风 -->
|
|
<div class="w-64 flex-shrink-0 animate-fade-in" style="transition-delay: 200ms;">
|
|
<div class="glass-panel-light h-full border border-white rounded-2xl p-7 card-hover relative lg:mt-[-80px]">
|
|
<div class="absolute -top-4 left-6 bg-indigo-100 text-indigo-700 font-bold text-xs px-4 py-1.5 rounded-full border border-indigo-200 shadow-sm">中端交互</div>
|
|
<h3 class="text-2xl font-black text-slate-800 mb-1 mt-2">翔风</h3>
|
|
<p class="text-sm font-semibold text-slate-500 mb-5">语音/手势/人脸识别</p>
|
|
|
|
<div class="space-y-4 text-sm bg-white/50 p-4 rounded-xl border border-white shadow-inner">
|
|
<div>
|
|
<span class="block text-primary font-bold"><i class="fa fa-microchip mr-1"></i> CPU: Wing-M510</span>
|
|
<span class="text-slate-500 text-xs font-medium ml-5">Coremark 5.5</span>
|
|
</div>
|
|
<div class="w-full h-px bg-slate-200"></div>
|
|
<div>
|
|
<span class="block text-emerald-500 font-bold"><i class="fa fa-cube mr-1"></i> NPU: P100</span>
|
|
<ul class="text-xs text-slate-600 space-y-1 mt-1 ml-5 font-medium">
|
|
<li>• 算力: 0.5-2 TOPS</li>
|
|
<li>• 主频: 750MHz</li>
|
|
<li>• SRAM: 2.0 - 8.0MB</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="mt-6 flex gap-3 justify-center text-xl text-slate-400">
|
|
<div class="w-10 h-10 bg-white rounded-full flex items-center justify-center shadow-sm"><i class="fa fa-microphone" title="语音识别"></i></div>
|
|
<div class="w-10 h-10 bg-white rounded-full flex items-center justify-center shadow-sm"><i class="fa fa-hand-paper-o" title="手势识别"></i></div>
|
|
<div class="w-10 h-10 bg-white rounded-full flex items-center justify-center shadow-sm"><i class="fa fa-user-circle" title="人脸识别"></i></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 3. 凌云 -->
|
|
<div class="w-64 flex-shrink-0 animate-fade-in" style="transition-delay: 300ms;">
|
|
<div class="glass-panel-light h-full border border-white rounded-2xl p-7 card-hover relative lg:mt-[-120px]">
|
|
<div class="absolute -top-4 left-6 bg-purple-100 text-purple-700 font-bold text-xs px-4 py-1.5 rounded-full border border-purple-200 shadow-sm">高端视觉</div>
|
|
<h3 class="text-2xl font-black text-slate-800 mb-1 mt-2">凌云</h3>
|
|
<p class="text-sm font-semibold text-slate-500 mb-5">机器视觉 / 目标分类</p>
|
|
|
|
<div class="space-y-4 text-sm bg-white/50 p-4 rounded-xl border border-white shadow-inner">
|
|
<div>
|
|
<span class="block text-primary font-bold"><i class="fa fa-microchip mr-1"></i> CPU: Wing-A500</span>
|
|
<span class="text-slate-500 text-xs font-medium ml-5">SPECint2006: 5/GHz</span>
|
|
</div>
|
|
<div class="w-full h-px bg-slate-200"></div>
|
|
<div>
|
|
<span class="block text-emerald-500 font-bold"><i class="fa fa-cube mr-1"></i> NPU: P200</span>
|
|
<ul class="text-xs text-slate-600 space-y-1 mt-1 ml-5 font-medium">
|
|
<li>• 算力: 1-8 TOPS</li>
|
|
<li>• 主频: 1GHz</li>
|
|
<li>• SRAM: 8.0 - 16.0MB</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="mt-6 flex gap-3 justify-center text-xl text-slate-400">
|
|
<div class="w-10 h-10 bg-white rounded-full flex items-center justify-center shadow-sm"><i class="fa fa-camera" title="机器视觉"></i></div>
|
|
<div class="w-10 h-10 bg-white rounded-full flex items-center justify-center shadow-sm"><i class="fa fa-th-large" title="目标分类"></i></div>
|
|
<div class="w-10 h-10 bg-white rounded-full flex items-center justify-center shadow-sm"><i class="fa fa-commenting-o" title="端侧LLM"></i></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 4. 御空 -->
|
|
<div class="w-64 flex-shrink-0 animate-fade-in" style="transition-delay: 400ms;">
|
|
<div class="glass-panel-light h-full bg-blue-50/70 border-2 border-primary/40 rounded-2xl p-7 card-hover relative lg:mt-[-160px] shadow-[0_10px_40px_rgba(59,130,246,0.15)]">
|
|
<div class="absolute -top-4 left-6 bg-primary text-white font-bold text-xs px-4 py-1.5 rounded-full shadow-md">旗舰算力</div>
|
|
<h3 class="text-2xl font-black text-slate-800 mb-1 mt-2">御空</h3>
|
|
<p class="text-sm font-semibold text-slate-500 mb-5">LLM/VLM/本地部署一体机</p>
|
|
|
|
<div class="space-y-4 text-sm bg-white border border-blue-100 p-4 rounded-xl shadow-inner shadow-blue-50">
|
|
<div>
|
|
<span class="block text-primary font-bold"><i class="fa fa-microchip mr-1"></i> CPU: Wing-A900</span>
|
|
<span class="text-slate-500 text-xs font-medium ml-5">SPECint2006: 15/GHz</span>
|
|
</div>
|
|
<div class="w-full h-px bg-slate-200"></div>
|
|
<div>
|
|
<span class="block text-emerald-500 font-bold"><i class="fa fa-cube mr-1"></i> NPU: M100</span>
|
|
<ul class="text-xs text-slate-600 space-y-1 mt-1 ml-5 font-medium">
|
|
<li>• 算力: 4-64 TOPS</li>
|
|
<li>• 主频: 1GHz+</li>
|
|
<li>• 支持各类大模型</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="mt-6 flex gap-3 justify-center text-xl text-blue-500">
|
|
<div class="w-10 h-10 bg-white rounded-full flex items-center justify-center shadow-md border hover:scale-110 transition"><i class="fa fa-desktop" title="超分辨率"></i></div>
|
|
<div class="w-10 h-10 bg-white rounded-full flex items-center justify-center shadow-md border hover:scale-110 transition"><i class="fa fa-cloud" title="VLM"></i></div>
|
|
<div class="w-10 h-10 bg-white rounded-full flex items-center justify-center shadow-md border hover:scale-110 transition"><i class="fa fa-server" title="本地部署"></i></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 3. ArchitStudio 敏捷开发平台 -->
|
|
<section class="py-16">
|
|
<div class="container mx-auto px-4">
|
|
<div class="text-center mb-16 animate-fade-in bg-white/40 glass-panel rounded-3xl p-10 max-w-4xl mx-auto shadow-sm">
|
|
<h2 class="text-3xl font-extrabold text-slate-800 mb-3">领域专用的计算敏捷开发平台</h2>
|
|
<div class="w-16 h-1 bg-primary mx-auto mb-4 rounded-full opacity-80"></div>
|
|
<p class="text-xl text-primary font-bold">ArchitStudio —— 工程师专注于计算融合核心工作</p>
|
|
</div>
|
|
|
|
<div class="flex flex-col lg:flex-row gap-12 items-center max-w-6xl mx-auto">
|
|
<!-- Left: Description and Value -->
|
|
<div class="lg:w-5/12 animate-fade-in">
|
|
<div class="glass-panel p-8 rounded-3xl border border-white relative overflow-hidden group">
|
|
<div class="absolute -top-10 -right-10 w-40 h-40 bg-blue-100/50 rounded-full blur-3xl group-hover:bg-blue-200/50 transition-all duration-500"></div>
|
|
|
|
<h4 class="text-slate-800 text-2xl font-bold mb-8 flex items-center border-l-4 border-primary pl-4">
|
|
核心优势
|
|
</h4>
|
|
<ul class="space-y-6">
|
|
<li class="flex items-start bg-white/60 p-4 rounded-2xl shadow-sm border border-white">
|
|
<div class="flex-shrink-0 w-10 h-10 rounded-xl bg-blue-50 flex items-center justify-center mt-1 mr-4 shadow-inner border border-blue-100 group-hover:scale-110 transition-transform">
|
|
<i class="fa fa-bolt text-primary text-lg"></i>
|
|
</div>
|
|
<div>
|
|
<h5 class="text-slate-800 font-bold mb-1 text-lg">统一、简洁的用户接口</h5>
|
|
<p class="text-slate-600 text-sm font-medium">降低领域专用处理器设计门槛，让软件定义芯片触手可及。</p>
|
|
</div>
|
|
</li>
|
|
<li class="flex items-start bg-white/60 p-4 rounded-2xl shadow-sm border border-white">
|
|
<div class="flex-shrink-0 w-10 h-10 rounded-xl bg-purple-50 flex items-center justify-center mt-1 mr-4 shadow-inner border border-purple-100 group-hover:scale-110 transition-transform">
|
|
<i class="fa fa-gift text-purple-500 text-lg"></i>
|
|
</div>
|
|
<div>
|
|
<h5 class="text-slate-800 font-bold mb-1 text-lg">一键式生成交付包</h5>
|
|
<p class="text-slate-600 text-sm font-medium">自动生成工具链与验证环境，大幅提升交付效率。</p>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Right: Diagram Representation -->
|
|
<div class="lg:w-7/12 animate-fade-in w-full">
|
|
<div class="glass-panel-light p-8 rounded-3xl border border-white relative overflow-hidden shadow-lg">
|
|
<div class="absolute top-0 right-0 bg-blue-50 text-primary text-xs font-bold px-4 py-1.5 rounded-bl-xl border-b border-l border-blue-100 shadow-sm">ArchitStudio Flow</div>
|
|
|
|
<!-- Flow Diagram -->
|
|
<div class="flex flex-col md:flex-row items-center justify-between gap-4 mt-6 relative z-10">
|
|
<!-- Input -->
|
|
<div class="flex flex-col items-center gap-2 group">
|
|
<div class="w-16 h-16 rounded-2xl bg-orange-50 border border-orange-200 flex items-center justify-center shadow-inner group-hover:bg-orange-100 transition-all">
|
|
<i class="fa fa-code text-orange-500 text-2xl"></i>
|
|
</div>
|
|
<div class="bg-orange-100/80 text-orange-700 font-bold text-xs px-3 py-1 rounded-full border border-orange-200">目标程序</div>
|
|
</div>
|
|
|
|
<!-- Arrow with Profiler -->
|
|
<div class="flex-grow flex flex-col items-center px-2 relative min-w-[60px]">
|
|
<div class="text-xs font-bold text-slate-500 mb-1">Profiler</div>
|
|
<div class="h-[2px] w-full bg-slate-300 relative">
|
|
<div class="absolute right-0 top-1/2 transform -translate-y-1/2 -mt-[3px] border-l-[6px] border-l-slate-400 border-t-[4px] border-t-transparent border-b-[4px] border-b-transparent"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Central Hub: RISCAL -->
|
|
<div class="flex flex-col items-center justify-center w-32 h-32 rounded-full border-[6px] border-white bg-blue-50 relative z-10 shadow-lg">
|
|
<div class="text-center">
|
|
<div class="text-primary font-black text-lg">RISCAL</div>
|
|
<div class="text-xs font-bold text-slate-500 mt-1">设计指令</div>
|
|
</div>
|
|
<div class="absolute -right-6 top-1/2 w-6 h-[3px] bg-blue-200 hidden md:block"></div>
|
|
</div>
|
|
|
|
<!-- Branches: SDK & HDK -->
|
|
<div class="flex flex-col gap-4 pl-6 md:border-l-2 md:border-blue-100 border-dashed mt-6 md:mt-0 relative w-full md:w-auto">
|
|
<div class="absolute left-[-2px] inset-y-8 w-0.5 bg-blue-100 hidden md:block"></div>
|
|
<!-- SDK Branch -->
|
|
<div class="flex items-center gap-3 bg-white p-3 rounded-xl border border-slate-100 shadow-sm hover:border-primary transition-colors hover:shadow-md relative">
|
|
<div class="absolute -left-[26px] w-[26px] h-0.5 bg-blue-100 hidden md:block"></div>
|
|
<div class="bg-blue-50 p-2 rounded-lg text-primary font-black text-sm w-12 text-center border border-blue-100 text-shadow-sm">SDK</div>
|
|
<div class="flex flex-col gap-1.5">
|
|
<span class="text-[11px] font-bold bg-slate-100 px-2 py-0.5 rounded text-slate-600">编译器及工具链</span>
|
|
<span class="text-[11px] font-bold bg-slate-100 px-2 py-0.5 rounded text-slate-600">调试器/仿真器</span>
|
|
</div>
|
|
</div>
|
|
<!-- HDK Branch -->
|
|
<div class="flex items-center gap-3 bg-white p-3 rounded-xl border border-slate-100 shadow-sm hover:border-accent transition-colors hover:shadow-md relative">
|
|
<div class="absolute -left-[26px] w-[26px] h-0.5 bg-blue-100 hidden md:block"></div>
|
|
<div class="bg-indigo-50 p-2 rounded-lg text-indigo-600 font-black text-sm w-12 text-center border border-indigo-100 text-shadow-sm">HDK</div>
|
|
<div class="flex flex-col gap-1.5">
|
|
<span class="text-[11px] font-bold bg-slate-100 px-2 py-0.5 rounded text-slate-600">硬件 RTL</span>
|
|
<span class="text-[11px] font-bold bg-slate-100 px-2 py-0.5 rounded text-slate-600">验证环境</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Output -->
|
|
<div class="flex flex-col gap-3 ml-2 md:ml-4 text-center items-center mt-6 md:mt-0">
|
|
<i class="fa fa-long-arrow-right text-slate-300 hidden md:block" style="font-size: 24px;"></i>
|
|
<div class="flex items-center gap-2 bg-gradient-to-r from-blue-50 to-indigo-50 p-3 rounded-xl border border-blue-200 shadow-sm hover:scale-105 transition-transform">
|
|
<i class="fa fa-microchip text-primary text-xl"></i>
|
|
<span class="text-sm font-bold text-slate-800">专用处理器</span>
|
|
</div>
|
|
<div class="text-xs font-bold text-emerald-500 bg-emerald-50 px-3 py-1 rounded-full border border-emerald-100">
|
|
<i class="fa fa-check-circle"></i> 验证完成
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- PPA Feedback Loop -->
|
|
<div class="absolute bottom-4 left-0 right-0 flex justify-center">
|
|
<div class="text-xs font-bold text-slate-400 bg-white/60 px-4 py-1.5 rounded-full border border-white shadow-sm flex items-center gap-2">
|
|
<i class="fa fa-refresh text-primary animate-spin-slow"></i> PPA 优化循环
|
|
</div>
|
|
</div>
|
|
<style>.animate-spin-slow { animation: spin 4s linear infinite; }</style>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 1. 核心价值主张 (Archit Fusion AI) -->
|
|
<section class="py-16">
|
|
<div class="container mx-auto px-4 max-w-6xl">
|
|
<div class="text-center mb-16 animate-fade-in bg-white/40 glass-panel rounded-3xl p-10 shadow-sm max-w-4xl mx-auto">
|
|
<h2 class="text-3xl font-extrabold text-slate-800 mb-4">Archit Fusion AI 统一处理架构</h2>
|
|
<div class="w-16 h-1 bg-primary mx-auto rounded-full"></div>
|
|
<p class="mt-4 text-slate-600 font-medium max-w-2xl mx-auto leading-relaxed">
|
|
通过统一处理架构归一化六大特征算子，极大提高硬件资源利用率，提升面效能效比。
|
|
</p>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
|
|
<div class="relative animate-fade-in hover-card">
|
|
<div class="glass-panel p-10 rounded-3xl border border-white overflow-hidden shadow-lg">
|
|
<div class="grid grid-cols-2 gap-4 mb-10 relative z-10">
|
|
<div class="bg-white/80 p-4 rounded-2xl border border-slate-100 text-center font-bold text-slate-700 shadow-sm hover:-translate-y-1 transition-transform">3D Matrix</div>
|
|
<div class="bg-white/80 p-4 rounded-2xl border border-slate-100 text-center font-bold text-slate-700 shadow-sm hover:-translate-y-1 transition-transform delay-75">Convolution</div>
|
|
<div class="bg-white/80 p-4 rounded-2xl border border-slate-100 text-center font-bold text-slate-700 shadow-sm hover:-translate-y-1 transition-transform delay-100">Normalization</div>
|
|
<div class="bg-white/80 p-4 rounded-2xl border border-slate-100 text-center font-bold text-slate-700 shadow-sm hover:-translate-y-1 transition-transform delay-150">FFT</div>
|
|
</div>
|
|
<div class="flex justify-center mb-6 relative z-0">
|
|
<div class="w-0 h-0 border-l-[80px] border-l-transparent border-r-[80px] border-r-transparent border-t-[100px] border-t-primary/20 blur-md translate-y-[-20px]"></div>
|
|
<i class="fa fa-angle-double-down absolute top-4 text-3xl text-primary animate-bounce"></i>
|
|
</div>
|
|
<div class="text-center bg-blue-50/80 p-6 rounded-2xl border border-blue-100 backdrop-blur-md relative z-10 mt-[-40px]">
|
|
<h3 class="text-3xl font-black text-slate-800 mb-2">Unified Processing</h3>
|
|
<p class="text-primary font-bold text-sm tracking-widest uppercase">Archit Fusion AI</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="space-y-6 animate-fade-in">
|
|
<div class="glass-panel p-6 rounded-2xl border border-white flex items-start gap-4 hover-card">
|
|
<div class="flex-shrink-0 w-14 h-14 bg-blue-50 rounded-xl flex items-center justify-center shadow-inner border border-blue-100">
|
|
<i class="fa fa-cubes text-primary text-2xl"></i>
|
|
</div>
|
|
<div>
|
|
<h4 class="text-xl font-bold text-slate-800 mb-2">归一化算子</h4>
|
|
<p class="text-slate-600 font-medium text-sm leading-relaxed">将复杂的AI算法抽象为 Convolution, Matrix, Normalization, FFT, Softmax 等核心算子，实现硬件层面的统一加速。</p>
|
|
</div>
|
|
</div>
|
|
<div class="glass-panel p-6 rounded-2xl border border-white flex items-start gap-4 hover-card" style="transition-delay: 100ms;">
|
|
<div class="flex-shrink-0 w-14 h-14 bg-indigo-50 rounded-xl flex items-center justify-center shadow-inner border border-indigo-100">
|
|
<i class="fa fa-refresh text-indigo-500 text-2xl"></i>
|
|
</div>
|
|
<div>
|
|
<h4 class="text-xl font-bold text-slate-800 mb-2">硅前/硅后可重构</h4>
|
|
<p class="text-slate-600 font-medium text-sm leading-relaxed">
|
|
<span class="font-bold text-slate-700">硅前：</span>平台级高度模块化，根据场景“乐高”式拼搭；<br>
|
|
<span class="font-bold text-slate-700 mt-1 inline-block">硅后：</span>强可编程性，支持软件定义功能调整，延长芯片生命周期。
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="glass-panel p-6 rounded-2xl border border-white flex items-start gap-4 hover-card" style="transition-delay: 200ms;">
|
|
<div class="flex-shrink-0 w-14 h-14 bg-emerald-50 rounded-xl flex items-center justify-center shadow-inner border border-emerald-100">
|
|
<i class="fa fa-microchip text-emerald-500 text-2xl"></i>
|
|
</div>
|
|
<div>
|
|
<h4 class="text-xl font-bold text-slate-800 mb-2">DSA 架构 + NPU 阵列</h4>
|
|
<p class="text-slate-600 font-medium text-sm leading-relaxed">结合 RISC-V 通用计算与专用 NPU 阵列，“紧耦合”指令处理高频操作，“松耦合”指令调度大规模矩阵运算。</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 4. NPU "瑞士军刀" 一体化工具平台 -->
|
|
<section class="py-20 relative overflow-hidden">
|
|
<div class="container mx-auto px-4 relative z-10 max-w-5xl">
|
|
<div class="text-center mb-20 animate-fade-in">
|
|
<div class="glass-panel inline-block px-10 py-6 rounded-3xl border border-white shadow-lg relative bg-white/60">
|
|
<div class="absolute -top-6 -right-6 w-12 h-12 bg-yellow-100 rounded-full flex items-center justify-center shadow-md border border-yellow-200 rotate-12"><i class="fa fa-wrench text-yellow-500 text-xl"></i></div>
|
|
<h2 class="text-3xl font-black text-slate-800 mb-4">NPU “瑞士军刀” 一体化工具平台</h2>
|
|
<div class="w-16 h-1 bg-primary mx-auto mb-5 rounded-full opacity-80"></div>
|
|
<p class="text-lg text-slate-600 font-medium max-w-2xl mx-auto">
|
|
<i class="fa fa-quote-left text-slate-300 mr-2"></i>
|
|
工具链，决定 NPU 是否‘好用’，而不仅是‘能跑’。
|
|
<i class="fa fa-quote-right text-slate-300 ml-2"></i>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="relative">
|
|
<!-- Vertical Line (Desktop) -->
|
|
<div class="hidden md:block absolute left-1/2 top-4 bottom-8 w-1 bg-slate-200 transform -translate-x-1/2 z-0 rounded-full"></div>
|
|
|
|
<!-- Step 1 -->
|
|
<div class="relative z-10 mb-16 flex flex-col md:flex-row items-center justify-between group animate-fade-in hover:-translate-y-2 transition-all">
|
|
<div class="md:w-5/12 text-center md:text-right md:order-1 order-2 px-4 w-full">
|
|
<h3 class="text-xl font-bold text-primary mb-3">硬件友好性检查</h3>
|
|
<div class="glass-panel p-5 rounded-2xl border border-white shadow-md text-sm transition-colors text-right relative bg-white/70">
|
|
<div class="absolute right-0 top-1/2 -translate-y-1/2 -mr-[21px] w-5 h-0.5 bg-slate-200 hidden md:block"></div>
|
|
<div class="bg-slate-100 rounded-lg px-3 py-2 mb-3 text-slate-700 font-bold border border-slate-200 inline-block">ONNX Model Preparation</div>
|
|
<div class="text-primary text-xl leading-none mb-3 font-bold"><i class="fa fa-arrow-down"></i></div>
|
|
<div class="bg-blue-50 text-primary border border-blue-200 rounded-lg px-3 py-2 font-bold inline-block shadow-inner">Alpha™ Validate</div>
|
|
<div class="mt-3 text-xs text-slate-500 font-medium bg-slate-50 px-2 py-1 rounded inline-block">No → Optimize / Yes → Continue</div>
|
|
</div>
|
|
</div>
|
|
<div class="w-14 h-14 bg-white text-primary font-black text-2xl rounded-full border-4 border-blue-100 flex items-center justify-center mb-4 md:mb-0 md:order-2 order-1 shadow-md z-10 group-hover:bg-primary group-hover:text-white transition-colors group-hover:scale-110">1</div>
|
|
<div class="md:w-5/12 hidden md:block md:order-3"></div>
|
|
</div>
|
|
|
|
<!-- Step 2 -->
|
|
<div class="relative z-10 mb-16 flex flex-col md:flex-row items-center justify-between group animate-fade-in hover:-translate-y-2 transition-all" style="transition-delay: 100ms;">
|
|
<div class="md:w-5/12 hidden md:block md:order-1"></div>
|
|
<div class="w-14 h-14 bg-white text-indigo-500 font-black text-2xl rounded-full border-4 border-indigo-100 flex items-center justify-center mb-4 md:mb-0 md:order-2 shadow-md z-10 group-hover:bg-indigo-500 group-hover:text-white transition-colors group-hover:scale-110">2</div>
|
|
<div class="md:w-5/12 text-center md:text-left md:order-3 px-4 w-full">
|
|
<h3 class="text-xl font-bold text-indigo-600 mb-3">模型量化与编译</h3>
|
|
<div class="glass-panel p-5 rounded-2xl border border-white shadow-md text-left relative bg-white/70">
|
|
<div class="absolute left-0 top-1/2 -translate-y-1/2 -ml-[21px] w-5 h-0.5 bg-slate-200 hidden md:block"></div>
|
|
<div class="font-black text-slate-700 mb-4 border-b border-slate-200 pb-2 text-base flex items-center gap-2">Alpha™ Build <i class="fa fa-cogs text-slate-400"></i></div>
|
|
<div class="flex flex-col gap-3">
|
|
<div class="bg-indigo-50 border border-indigo-100 text-indigo-700 font-bold text-sm py-2 px-4 rounded-xl shadow-sm inline-flex items-center gap-2"><i class="fa fa-compress"></i> Post-Training Quantization (PTQ)</div>
|
|
<div class="bg-blue-500 text-white font-bold text-sm py-2 px-4 rounded-xl shadow-sm inline-flex items-center gap-2"><i class="fa fa-code"></i> Alpha™ Compiler</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Step 3 -->
|
|
<div class="relative z-10 mb-16 flex flex-col md:flex-row items-center justify-between group animate-fade-in hover:-translate-y-2 transition-all" style="transition-delay: 200ms;">
|
|
<div class="md:w-5/12 text-center md:text-right md:order-1 px-4 w-full">
|
|
<h3 class="text-xl font-bold text-slate-800 mb-3 text-emerald-600">一致性仿真与评估</h3>
|
|
<div class="glass-panel p-5 rounded-2xl border border-white shadow-md text-sm text-right relative bg-white/70">
|
|
<div class="absolute right-0 top-1/2 -translate-y-1/2 -mr-[21px] w-5 h-0.5 bg-slate-200 hidden md:block"></div>
|
|
<h4 class="text-xs font-black text-slate-400 mb-3 uppercase tracking-wider">Bit-accurate Simulation</h4>
|
|
<div class="space-y-3 flex flex-col items-end">
|
|
<div class="bg-emerald-50 text-emerald-700 font-bold py-2 px-4 rounded-xl border border-emerald-100 shadow-sm inline-flex items-center gap-2"><i class="fa fa-play-circle-o"></i> Alpha™ Simulate</div>
|
|
<div class="bg-emerald-50 text-emerald-700 font-bold py-2 px-4 rounded-xl border border-emerald-100 shadow-sm inline-flex items-center gap-2"><i class="fa fa-dashboard"></i> Alpha™ Benchmark</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="w-14 h-14 bg-white text-emerald-500 font-black text-2xl rounded-full border-4 border-emerald-100 flex items-center justify-center mb-4 md:mb-0 md:order-2 shadow-md z-10 group-hover:bg-emerald-500 group-hover:text-white transition-colors group-hover:scale-110">3</div>
|
|
<div class="md:w-5/12 hidden md:block md:order-3"></div>
|
|
</div>
|
|
|
|
<!-- Step 4 -->
|
|
<div class="relative z-10 mb-16 flex flex-col md:flex-row items-center justify-between group animate-fade-in hover:-translate-y-2 transition-all" style="transition-delay: 300ms;">
|
|
<div class="md:w-5/12 hidden md:block md:order-1"></div>
|
|
<div class="w-14 h-14 bg-white text-orange-400 font-black text-2xl rounded-full border-4 border-orange-100 flex items-center justify-center mb-4 md:mb-0 md:order-2 shadow-md z-10 group-hover:bg-orange-400 group-hover:text-white transition-colors group-hover:scale-110">4</div>
|
|
<div class="md:w-5/12 text-center md:text-left md:order-3 px-4 w-full">
|
|
<h3 class="text-xl font-bold text-orange-500 mb-3">模型优化服务</h3>
|
|
<div class="glass-panel-light p-5 rounded-2xl border-2 border-orange-200 shadow-md text-sm text-left relative bg-orange-50/50">
|
|
<div class="absolute left-0 top-1/2 -translate-y-1/2 -ml-[21px] w-5 h-0.5 bg-slate-200 hidden md:block"></div>
|
|
<div class="flex items-center justify-center md:justify-start gap-2 mb-2">
|
|
<i class="fa fa-diamond text-orange-500 text-lg"></i>
|
|
<span class="text-orange-600 font-black text-base">Premium Optimization</span>
|
|
</div>
|
|
<p class="text-sm text-slate-600 font-medium">针对未满足需求的模型进行深度定制优化，释放极限潜能。</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Step 5 -->
|
|
<div class="relative z-10 flex flex-col md:flex-row items-center justify-between group animate-fade-in hover:-translate-y-2 transition-all" style="transition-delay: 400ms;">
|
|
<div class="md:w-5/12 text-center md:text-right md:order-1 px-4 w-full">
|
|
<h3 class="text-xl font-bold text-slate-800 mb-3">应用部署</h3>
|
|
<div class="glass-panel bg-white/80 p-5 border-dashed border-2 border-slate-300 rounded-2xl text-slate-600 text-sm font-medium shadow-sm relative">
|
|
<div class="absolute right-0 top-1/2 -translate-y-1/2 -mr-[21px] w-5 h-0.5 bg-slate-200 hidden md:block"></div>
|
|
<span class="block text-slate-800 font-black mb-2 text-base"><i class="fa fa-rocket text-primary mr-1"></i> AI Runtime Software Stack</span>
|
|
<div class="inline-flex flex-wrap justify-end gap-2 text-xs">
|
|
<span class="bg-slate-100 px-2 py-1 rounded">RTL Simulation</span>
|
|
<span class="bg-slate-100 px-2 py-1 rounded">FPGA</span>
|
|
<span class="bg-slate-100 px-2 py-1 rounded">ASIC Deployment</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="w-14 h-14 bg-white text-slate-600 font-black text-2xl rounded-full border-4 border-slate-200 flex items-center justify-center mb-4 md:mb-0 md:order-2 shadow-md z-10 group-hover:bg-slate-600 group-hover:text-white transition-colors group-hover:scale-110">5</div>
|
|
<div class="md:w-5/12 hidden md:block md:order-3"></div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 底部 CTA -->
|
|
<section class="py-20 relative overflow-hidden bg-white/50 border-t border-slate-200 mt-10 backdrop-blur-md">
|
|
<!-- 装饰 -->
|
|
<div class="absolute inset-0 top-0 left-0 w-full h-[2px] bg-gradient-to-r from-transparent via-primary/20 to-transparent"></div>
|
|
<div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-96 h-96 bg-blue-100/40 rounded-full blur-3xl pointer-events-none z-0"></div>
|
|
|
|
<div class="container mx-auto px-4 text-center animate-fade-in relative z-10">
|
|
<h2 class="text-3xl md:text-4xl font-extrabold text-slate-800 mb-6 font-inter tracking-tight">准备好构建您的 <span class="text-primary">AI 芯片</span>了吗？</h2>
|
|
<p class="text-lg text-slate-500 mb-10 max-w-2xl mx-auto font-medium">
|
|
依托隼瞻科技成熟的 RISC-V 核与敏捷开发平台，大幅缩短产品上市周期。
|
|
</p>
|
|
<div class="flex justify-center gap-4 popupbox">
|
|
<button class="px-10 py-4 bg-primary text-white rounded-full font-bold text-lg hover:bg-blue-600 hover:-translate-y-1 transition-all shadow-[0_10px_20px_rgba(59,130,246,0.3)] hover:shadow-[0_15px_30px_rgba(59,130,246,0.4)]">
|
|
<i class="fa fa-envelope-o mr-2"></i>立即咨询
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
</div>
|
|
|
|
<script>
|
|
// 星座背景效果
|
|
class ConstellationBackground {
|
|
constructor(canvasId, sectionId) {
|
|
this.canvas = document.getElementById(canvasId);
|
|
if (!this.canvas) return;
|
|
this.ctx = this.canvas.getContext('2d');
|
|
this.section = document.getElementById(sectionId);
|
|
this.particles = [];
|
|
this.mouse = { x: null, y: null, radius: 150 };
|
|
this.particleCount = 80;
|
|
this.connectionDistance = 150;
|
|
this.mouseInfluenceRadius = 200;
|
|
|
|
this.init();
|
|
this.animate();
|
|
this.addEventListeners();
|
|
}
|
|
|
|
init() {
|
|
this.resize();
|
|
this.createParticles();
|
|
}
|
|
|
|
resize() {
|
|
if (!this.section) return;
|
|
this.canvas.width = this.section.offsetWidth;
|
|
this.canvas.height = this.section.offsetHeight;
|
|
}
|
|
|
|
createParticles() {
|
|
this.particles = [];
|
|
for (let i = 0; i < this.particleCount; i++) {
|
|
this.particles.push({
|
|
x: Math.random() * this.canvas.width,
|
|
y: Math.random() * this.canvas.height,
|
|
vx: (Math.random() - 0.5) * 0.5,
|
|
vy: (Math.random() - 0.5) * 0.5,
|
|
radius: Math.random() * 2 + 1,
|
|
baseRadius: Math.random() * 2 + 1,
|
|
color: this.getRandomColor(),
|
|
pulseSpeed: Math.random() * 0.02 + 0.01,
|
|
pulseOffset: Math.random() * Math.PI * 2
|
|
});
|
|
}
|
|
}
|
|
|
|
getRandomColor() {
|
|
const colors = [
|
|
'rgba(59, 130, 246, 0.4)',
|
|
'rgba(14, 165, 233, 0.3)',
|
|
'rgba(99, 102, 241, 0.3)',
|
|
'rgba(96, 165, 250, 0.4)'
|
|
];
|
|
return colors[Math.floor(Math.random() * colors.length)];
|
|
}
|
|
|
|
addEventListeners() {
|
|
window.addEventListener('resize', () => {
|
|
this.resize();
|
|
this.createParticles();
|
|
});
|
|
|
|
if (this.section) {
|
|
this.section.addEventListener('mousemove', (e) => {
|
|
const rect = this.canvas.getBoundingClientRect();
|
|
this.mouse.x = e.clientX - rect.left;
|
|
this.mouse.y = e.clientY - rect.top;
|
|
});
|
|
|
|
this.section.addEventListener('mouseleave', () => {
|
|
this.mouse.x = null;
|
|
this.mouse.y = null;
|
|
});
|
|
}
|
|
}
|
|
|
|
drawParticle(particle, time) {
|
|
const pulse = Math.sin(time * particle.pulseSpeed + particle.pulseOffset) * 0.5 + 0.5;
|
|
const currentRadius = particle.baseRadius + pulse * 1.5;
|
|
|
|
const gradient = this.ctx.createRadialGradient(
|
|
particle.x, particle.y, 0,
|
|
particle.x, particle.y, currentRadius * 3
|
|
);
|
|
gradient.addColorStop(0, particle.color);
|
|
gradient.addColorStop(0.5, particle.color.replace('0.4', '0.1').replace('0.3', '0.05'));
|
|
gradient.addColorStop(1, 'transparent');
|
|
|
|
this.ctx.beginPath();
|
|
this.ctx.arc(particle.x, particle.y, currentRadius * 3, 0, Math.PI * 2);
|
|
this.ctx.fillStyle = gradient;
|
|
this.ctx.fill();
|
|
|
|
this.ctx.beginPath();
|
|
this.ctx.arc(particle.x, particle.y, currentRadius, 0, Math.PI * 2);
|
|
this.ctx.fillStyle = particle.color;
|
|
this.ctx.fill();
|
|
}
|
|
|
|
drawConnections() {
|
|
for (let i = 0; i < this.particles.length; i++) {
|
|
for (let j = i + 1; j < this.particles.length; j++) {
|
|
const dx = this.particles[i].x - this.particles[j].x;
|
|
const dy = this.particles[i].y - this.particles[j].y;
|
|
const distance = Math.sqrt(dx * dx + dy * dy);
|
|
|
|
if (distance < this.connectionDistance) {
|
|
const opacity = (1 - distance / this.connectionDistance) * 0.3;
|
|
this.ctx.beginPath();
|
|
this.ctx.moveTo(this.particles[i].x, this.particles[i].y);
|
|
this.ctx.lineTo(this.particles[j].x, this.particles[j].y);
|
|
this.ctx.strokeStyle = `rgba(59, 130, 246, ${opacity})`;
|
|
this.ctx.lineWidth = 1;
|
|
this.ctx.stroke();
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
drawMouseConnections() {
|
|
if (this.mouse.x === null || this.mouse.y === null) return;
|
|
|
|
this.particles.forEach(particle => {
|
|
const dx = particle.x - this.mouse.x;
|
|
const dy = particle.y - this.mouse.y;
|
|
const distance = Math.sqrt(dx * dx + dy * dy);
|
|
|
|
if (distance < this.mouseInfluenceRadius) {
|
|
const opacity = (1 - distance / this.mouseInfluenceRadius) * 0.5;
|
|
|
|
this.ctx.beginPath();
|
|
this.ctx.moveTo(this.mouse.x, this.mouse.y);
|
|
this.ctx.lineTo(particle.x, particle.y);
|
|
const gradient = this.ctx.createLinearGradient(
|
|
this.mouse.x, this.mouse.y,
|
|
particle.x, particle.y
|
|
);
|
|
gradient.addColorStop(0, `rgba(99, 102, 241, ${opacity})`);
|
|
gradient.addColorStop(1, `rgba(59, 130, 246, ${opacity * 0.5})`);
|
|
this.ctx.strokeStyle = gradient;
|
|
this.ctx.lineWidth = 1.5;
|
|
this.ctx.stroke();
|
|
}
|
|
});
|
|
|
|
const mouseGlow = this.ctx.createRadialGradient(
|
|
this.mouse.x, this.mouse.y, 0,
|
|
this.mouse.x, this.mouse.y, 40
|
|
);
|
|
mouseGlow.addColorStop(0, 'rgba(59, 130, 246, 0.15)');
|
|
mouseGlow.addColorStop(1, 'transparent');
|
|
|
|
this.ctx.beginPath();
|
|
this.ctx.arc(this.mouse.x, this.mouse.y, 40, 0, Math.PI * 2);
|
|
this.ctx.fillStyle = mouseGlow;
|
|
this.ctx.fill();
|
|
}
|
|
|
|
updateParticles() {
|
|
this.particles.forEach(particle => {
|
|
particle.x += particle.vx;
|
|
particle.y += particle.vy;
|
|
|
|
if (this.mouse.x !== null && this.mouse.y !== null) {
|
|
const dx = this.mouse.x - particle.x;
|
|
const dy = this.mouse.y - particle.y;
|
|
const distance = Math.sqrt(dx * dx + dy * dy);
|
|
|
|
if (distance < this.mouseInfluenceRadius) {
|
|
const force = (this.mouseInfluenceRadius - distance) / this.mouseInfluenceRadius;
|
|
const angle = Math.atan2(dy, dx);
|
|
particle.vx += Math.cos(angle) * force * 0.02;
|
|
particle.vy += Math.sin(angle) * force * 0.02;
|
|
particle.vx += Math.cos(angle + Math.PI / 2) * force * 0.005;
|
|
particle.vy += Math.sin(angle + Math.PI / 2) * force * 0.005;
|
|
}
|
|
}
|
|
|
|
const speed = Math.sqrt(particle.vx * particle.vx + particle.vy * particle.vy);
|
|
if (speed > 2) {
|
|
particle.vx = (particle.vx / speed) * 2;
|
|
particle.vy = (particle.vy / speed) * 2;
|
|
}
|
|
|
|
particle.vx *= 0.99;
|
|
particle.vy *= 0.99;
|
|
particle.vx += (Math.random() - 0.5) * 0.02;
|
|
particle.vy += (Math.random() - 0.5) * 0.02;
|
|
|
|
if (particle.x < -50) particle.x = this.canvas.width + 50;
|
|
if (particle.x > this.canvas.width + 50) particle.x = -50;
|
|
if (particle.y < -50) particle.y = this.canvas.height + 50;
|
|
if (particle.y > this.canvas.height + 50) particle.y = -50;
|
|
});
|
|
}
|
|
|
|
animate() {
|
|
if (!this.canvas) return;
|
|
const time = Date.now() * 0.001;
|
|
this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
|
|
this.drawConnections();
|
|
this.drawMouseConnections();
|
|
this.particles.forEach(particle => this.drawParticle(particle, time));
|
|
this.updateParticles();
|
|
requestAnimationFrame(() => this.animate());
|
|
}
|
|
}
|
|
|
|
// 简单的滚动显现脚本
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
const observerOptions = {
|
|
root: null,
|
|
rootMargin: '0px',
|
|
threshold: 0.1
|
|
};
|
|
|
|
const observer = new IntersectionObserver((entries, observer) => {
|
|
entries.forEach(entry => {
|
|
if (entry.isIntersecting) {
|
|
entry.target.classList.add('visible');
|
|
observer.unobserve(entry.target); // 只触发一次
|
|
}
|
|
});
|
|
}, observerOptions);
|
|
|
|
document.querySelectorAll('#wingsemi-solution-wrapper .animate-fade-in').forEach(el => {
|
|
observer.observe(el);
|
|
});
|
|
|
|
// 初始化星座背景
|
|
new ConstellationBackground('ai-constellation-canvas', 'ai-hero-section');
|
|
|
|
// 粒子效果初始化
|
|
createParticles();
|
|
});
|
|
|
|
// 创建粒子效果
|
|
function createParticles() {
|
|
const particlesContainer = document.getElementById('ai-particles');
|
|
if (!particlesContainer) return;
|
|
|
|
const particleCount = 20;
|
|
for (let i = 0; i < particleCount; i++) {
|
|
const particle = document.createElement('div');
|
|
particle.classList.add('particle');
|
|
particle.style.left = Math.random() * 100 + '%';
|
|
particle.style.animationDelay = Math.random() * 15 + 's';
|
|
particle.style.animationDuration = (Math.random() * 10 + 10) + 's';
|
|
particlesContainer.appendChild(particle);
|
|
}
|
|
}
|
|
</script> |