feat: [china-tech] Agibot 휴머노이드 로봇 정보 탭 추가
- 두 번째 탭: Agibot 원정 A1 분석 콘텐츠 - 탭 전환 시 차트 지연 초기화 (lazy init) - 비전 단계별 인터랙티브 UI
This commit is contained in:
김보곤
@@ -5,17 +5,29 @@
|
||||
@push('styles')
|
||||
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700;900&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
.bigtech-body { font-family: 'Noto Sans KR', sans-serif; background-color: #f0fdf4; color: #0f172a; }
|
||||
.bigtech-body { font-family: 'Noto Sans KR', sans-serif; color: #0f172a; }
|
||||
.chart-container { position: relative; width: 100%; max-width: 600px; margin-left: auto; margin-right: auto; height: 320px; max-height: 400px; }
|
||||
@media (min-width: 768px) { .chart-container { height: 380px; } }
|
||||
.gradient-text { background: linear-gradient(to right, #16a34a, #2563eb); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
|
||||
.card-shadow { box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); }
|
||||
|
||||
/* 탭 버튼 스타일 */
|
||||
.bigtech-tab { padding: 0.625rem 1.25rem; border-radius: 0.5rem; font-weight: 600; font-size: 0.875rem; transition: all 0.2s; border: 1px solid #e2e8f0; background: white; color: #64748b; cursor: pointer; }
|
||||
.bigtech-tab:hover { background: #f1f5f9; color: #334155; }
|
||||
.bigtech-tab.active { background: #16a34a; color: white; border-color: #16a34a; box-shadow: 0 2px 8px rgba(22, 163, 74, 0.3); }
|
||||
.bigtech-tab.placeholder { opacity: 0.6; cursor: default; }
|
||||
.tab-content { display: none; }
|
||||
.tab-content.active { display: block; }
|
||||
|
||||
/* 탭0: 캄브리콘 스타일 */
|
||||
.tab-cambricon { background-color: #f0fdf4; }
|
||||
.gradient-text { background: linear-gradient(to right, #16a34a, #2563eb); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
|
||||
.card-shadow { box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); }
|
||||
|
||||
/* 탭1: Agibot 스타일 */
|
||||
.tab-agibot { background-color: #fafaf9; }
|
||||
.vision-tab { transition: all 0.3s ease; }
|
||||
.vision-tab.active { background-color: #4f46e5; color: white; transform: translateY(-2px); box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); }
|
||||
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
|
||||
.animate-fade-in { animation: fadeIn 0.8s ease-out forwards; }
|
||||
</style>
|
||||
@endpush
|
||||
|
||||
@@ -27,7 +39,7 @@
|
||||
<h2 class="text-lg font-bold text-slate-800 mb-3">5대 신흥빅테크</h2>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<button class="bigtech-tab active" onclick="switchTab(0)">천텐스, 캄브리콘 AI 반도체 분석</button>
|
||||
<button class="bigtech-tab placeholder" disabled>준비 중 (2)</button>
|
||||
<button class="bigtech-tab" onclick="switchTab(1)">Agibot 휴머노이드 로봇 정보</button>
|
||||
<button class="bigtech-tab placeholder" disabled>준비 중 (3)</button>
|
||||
<button class="bigtech-tab placeholder" disabled>준비 중 (4)</button>
|
||||
<button class="bigtech-tab placeholder" disabled>준비 중 (5)</button>
|
||||
@@ -35,9 +47,8 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- 탭 콘텐츠 영역 --}}
|
||||
<div id="tab-content-0" class="tab-content">
|
||||
{{-- 캄브리콘 분석 콘텐츠 --}}
|
||||
{{-- ========== 탭 0: 캄브리콘 분석 ========== --}}
|
||||
<div id="tab-content-0" class="tab-content active tab-cambricon">
|
||||
<header class="bg-white border-b-4 border-green-600 shadow-sm">
|
||||
<div class="max-w-7xl mx-auto px-4 py-4 flex justify-between items-center">
|
||||
<h1 class="text-2xl font-black text-slate-800 tracking-tight">CAMBRICON <span class="text-green-600">INSIGHT</span></h1>
|
||||
@@ -51,7 +62,6 @@
|
||||
</header>
|
||||
|
||||
<main class="max-w-7xl mx-auto px-4 py-10">
|
||||
|
||||
<section class="text-center mb-16">
|
||||
<h2 class="text-4xl md:text-5xl font-black mb-4"><span class="gradient-text">캄브리콘 (Cambricon)</span>: 중국 AI 굴기의 핵심</h2>
|
||||
<p class="text-lg md:text-xl text-slate-600 max-w-3xl mx-auto font-medium">
|
||||
@@ -118,7 +128,6 @@
|
||||
<h3 class="text-3xl font-bold text-slate-800 mb-3">최근 주가 급등 원인 분석</h3>
|
||||
<p class="text-slate-600 max-w-2xl mx-auto">미국의 대중국 반도체 수출 제재가 심화됨에 따라, 중국 내 AI 인프라 구축 수요가 캄브리콘으로 집중되고 있습니다.</p>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8 items-center">
|
||||
<div class="space-y-6 lg:col-span-1">
|
||||
<div class="p-4 bg-green-50 rounded-lg border border-green-100">
|
||||
@@ -143,7 +152,6 @@
|
||||
<p class="text-sm text-slate-600">국가 주도의 '동수서산(東數西算)' 데이터센터 인프라 프로젝트 핵심 공급사로 선정.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="lg:col-span-2">
|
||||
<div class="chart-container">
|
||||
<canvas id="stockChart"></canvas>
|
||||
@@ -162,11 +170,9 @@
|
||||
<p class="text-slate-600 mb-6 leading-relaxed">
|
||||
초기 캄브리콘의 성장은 화웨이(Huawei)와의 협력이 결정적이었습니다. 2017년 화웨이의 모바일 AP '기린(Kirin) 970'에 캄브리콘의 NPU IP가 세계 최초로 탑재되었습니다.
|
||||
</p>
|
||||
|
||||
<div class="chart-container" style="height: 250px; max-height: 250px;">
|
||||
<canvas id="revenueChart"></canvas>
|
||||
</div>
|
||||
|
||||
<p class="text-sm text-slate-600 mt-6 bg-slate-50 p-3 rounded border border-slate-100">
|
||||
<strong>피벗 성공:</strong> 화웨이가 자체 AI 아키텍처(Da Vinci)를 개발하며 IP 라이선스 매출이 급감했으나, 캄브리콘은 신속하게 클라우드 및 엣지 서버용 칩셋 제조사로 비즈니스 모델을 전환하여 자립에 성공했습니다.
|
||||
</p>
|
||||
@@ -180,11 +186,9 @@
|
||||
<p class="text-slate-600 mb-6 leading-relaxed">
|
||||
Siyuan(스위안) 590 등 최신 라인업은 엔비디아의 A100 및 중국 수출용 다운그레이드 모델인 H20을 정조준하고 있습니다. 특히 FP32 및 메모리 대역폭에서 경쟁력을 확보하려 노력 중입니다.
|
||||
</p>
|
||||
|
||||
<div class="chart-container" style="height: 280px; max-height: 300px;">
|
||||
<canvas id="performanceChart"></canvas>
|
||||
</div>
|
||||
|
||||
<p class="text-sm text-slate-600 mt-4 bg-slate-50 p-3 rounded border border-slate-100">
|
||||
<strong>성능 평가:</strong> 최상위 칩인 H100에는 미치지 못하지만, 생태계 적응력과 중국 내 안정적 수급이라는 무기를 통해 H20 및 A100의 훌륭한 대체재로 평가받고 있습니다.
|
||||
</p>
|
||||
@@ -202,181 +206,311 @@
|
||||
<span class="px-4 py-2 bg-slate-700 rounded-full text-sm font-semibold">#기술자립</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</main>
|
||||
|
||||
<footer class="bg-slate-900 text-slate-400 py-6 text-center text-sm rounded-b-lg">
|
||||
<p>© 2024 Cambricon Analysis Report. Data presented is synthesized for infographic purposes.</p>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
{{-- ========== 탭 1: Agibot 휴머노이드 로봇 ========== --}}
|
||||
<div id="tab-content-1" class="tab-content tab-agibot">
|
||||
<nav class="bg-stone-50/90 backdrop-blur-md border-b border-stone-200">
|
||||
<div class="max-w-6xl mx-auto px-4 py-4 flex justify-between items-center">
|
||||
<div class="font-bold text-xl text-indigo-700 tracking-tight">🤖 Agibot Insight</div>
|
||||
<div class="hidden md:flex space-x-8">
|
||||
<a href="#agibot-intro" class="text-slate-600 hover:text-indigo-600 text-sm font-medium transition-colors">개요</a>
|
||||
<a href="#agibot-specs" class="text-slate-600 hover:text-indigo-600 text-sm font-medium transition-colors">원정 A1 스펙</a>
|
||||
<a href="#agibot-comparison" class="text-slate-600 hover:text-indigo-600 text-sm font-medium transition-colors">vs 옵티머스</a>
|
||||
<a href="#agibot-vision" class="text-slate-600 hover:text-indigo-600 text-sm font-medium transition-colors">미래 비전</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<main class="max-w-6xl mx-auto px-4 py-10 space-y-24">
|
||||
|
||||
<!-- Hero / Intro -->
|
||||
<section id="agibot-intro" class="text-center space-y-6 animate-fade-in mt-8">
|
||||
<div class="inline-block px-3 py-1 rounded-full bg-indigo-100 text-indigo-800 text-xs font-bold tracking-wider uppercase mb-4">Analysis Report</div>
|
||||
<h1 class="text-4xl md:text-5xl font-extrabold text-slate-900 tracking-tight leading-tight">
|
||||
화웨이 천재 소년의 반격,<br>
|
||||
<span class="text-transparent bg-clip-text bg-gradient-to-r from-indigo-600 to-teal-500">애지봇 '원정 A1'</span>
|
||||
</h1>
|
||||
<p class="max-w-2xl mx-auto text-lg text-slate-600 leading-relaxed">
|
||||
화웨이 '천재 소년' 프로젝트 출신 펑즈후이(Zhihui Jun)가 설립한 애지봇(Agibot)은
|
||||
범용 휴머노이드 로봇 '원정(Yuanzheng) A1'을 통해 로보틱스 시장에 파란을 일으키고 있습니다.
|
||||
이 페이지는 원정 A1의 기술적 역량, 테슬라 옵티머스와의 차별점, 그리고 궁극적인 AI 결합 비전을 탐구합니다.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<!-- 기술 사양 -->
|
||||
<section id="agibot-specs" class="scroll-mt-24 bg-white rounded-3xl p-8 shadow-sm border border-stone-100">
|
||||
<div class="mb-8">
|
||||
<h2 class="text-2xl md:text-3xl font-bold text-slate-800 mb-4">⚙️ 원정 A1 기술 사양 대시보드</h2>
|
||||
<p class="text-slate-600">이 섹션에서는 원정 A1의 핵심 하드웨어 및 소프트웨어 스펙을 시각적으로 탐색합니다. 아래 데이터 카드와 방사형 차트를 통해 로봇의 물리적 특성과 컴퓨팅 능력이 어떻게 균형을 이루고 있는지 확인할 수 있습니다.</p>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div class="bg-stone-50 p-6 rounded-2xl border border-stone-200 hover:border-indigo-300 transition-colors">
|
||||
<div class="text-3xl mb-2">📏</div>
|
||||
<div class="text-sm text-slate-500 font-medium mb-1">신장 / 체중</div>
|
||||
<div class="text-xl font-bold text-slate-800">175cm / 53kg</div>
|
||||
<div class="text-xs text-slate-400 mt-2">인간과 유사한 비율</div>
|
||||
</div>
|
||||
<div class="bg-stone-50 p-6 rounded-2xl border border-stone-200 hover:border-indigo-300 transition-colors">
|
||||
<div class="text-3xl mb-2">🦾</div>
|
||||
<div class="text-sm text-slate-500 font-medium mb-1">자유도 (DOF)</div>
|
||||
<div class="text-xl font-bold text-slate-800">49+</div>
|
||||
<div class="text-xs text-slate-400 mt-2">유연한 관절 모터 제어</div>
|
||||
</div>
|
||||
<div class="bg-stone-50 p-6 rounded-2xl border border-stone-200 hover:border-indigo-300 transition-colors">
|
||||
<div class="text-3xl mb-2">⚡</div>
|
||||
<div class="text-sm text-slate-500 font-medium mb-1">최대 보행 속도</div>
|
||||
<div class="text-xl font-bold text-slate-800">7 km/h</div>
|
||||
<div class="text-xs text-slate-400 mt-2">빠른 기동성 확보</div>
|
||||
</div>
|
||||
<div class="bg-stone-50 p-6 rounded-2xl border border-stone-200 hover:border-indigo-300 transition-colors">
|
||||
<div class="text-3xl mb-2">🧠</div>
|
||||
<div class="text-sm text-slate-500 font-medium mb-1">AI 연산 능력</div>
|
||||
<div class="text-xl font-bold text-slate-800">200 TOPS</div>
|
||||
<div class="text-xs text-slate-400 mt-2">자체 개발 로컬 AI 처리</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col justify-center">
|
||||
<h3 class="text-center text-sm font-semibold text-slate-500 mb-2 uppercase tracking-wider">원정 A1 역량 프로필</h3>
|
||||
<div class="chart-container">
|
||||
<canvas id="capabilityRadarChart"></canvas>
|
||||
</div>
|
||||
<p class="text-center text-xs text-slate-400 mt-4">* 각 지표는 동급 휴머노이드 대비 상대적 평가치입니다.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- vs 옵티머스 비교 -->
|
||||
<section id="agibot-comparison" class="scroll-mt-24">
|
||||
<div class="mb-8 text-center max-w-3xl mx-auto">
|
||||
<h2 class="text-2xl md:text-3xl font-bold text-slate-800 mb-4">🥊 원정 A1 vs 테슬라 옵티머스</h2>
|
||||
<p class="text-slate-600">현재 휴머노이드 업계의 기준점인 테슬라 옵티머스(Optimus Gen 2)와의 비교를 통해 애지봇이 취하고 있는 차별화 전략을 분석합니다.</p>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 lg:grid-cols-5 gap-8 items-start">
|
||||
<div class="lg:col-span-3 bg-white rounded-3xl p-6 shadow-sm border border-stone-100">
|
||||
<div class="grid grid-cols-3 font-bold text-slate-700 border-b border-stone-200 pb-3 mb-3 text-sm md:text-base">
|
||||
<div>비교 항목</div>
|
||||
<div class="text-indigo-600">애지봇 원정 A1</div>
|
||||
<div class="text-slate-500">테슬라 옵티머스</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-3 items-center py-3 border-b border-stone-100 text-sm md:text-base">
|
||||
<div class="font-medium text-slate-600">개발 철학</div>
|
||||
<div>Agile 개발, 오픈소스 생태계, 특화 AI 결합</div>
|
||||
<div>수직 계열화, 대량 양산, 자동차 제조 인프라 활용</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-3 items-center py-3 border-b border-stone-100 text-sm md:text-base">
|
||||
<div class="font-medium text-slate-600">하드웨어 특징</div>
|
||||
<div>PowerFlow 커스텀 모터, 역관절 구조 채택 (경량화)</div>
|
||||
<div>테슬라 자체 설계 액추에이터, 인간과 매우 유사한 관절</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-3 items-center py-3 border-b border-stone-100 text-sm md:text-base">
|
||||
<div class="font-medium text-slate-600">초기 타겟 시장</div>
|
||||
<div>B2B 산업 환경 및 AI 연구 플랫폼</div>
|
||||
<div>테슬라 기가팩토리 내부 투입 후 B2C 확대</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-3 items-center py-3 text-sm md:text-base">
|
||||
<div class="font-medium text-slate-600">핵심 강점</div>
|
||||
<div class="text-indigo-600 font-medium">소프트웨어 혁신 속도, 경량성</div>
|
||||
<div class="text-slate-600 font-medium">제조 단가 절감, 데이터 수집 규모</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="lg:col-span-2 bg-white rounded-3xl p-6 shadow-sm border border-stone-100">
|
||||
<h3 class="text-center text-sm font-semibold text-slate-500 mb-4 uppercase tracking-wider">주요 물리 제원 비교</h3>
|
||||
<div class="chart-container" style="height: 250px;">
|
||||
<canvas id="comparisonBarChart"></canvas>
|
||||
</div>
|
||||
<p class="text-xs text-slate-500 mt-4 leading-relaxed">원정 A1은 옵티머스 대비 약간 더 가벼운 무게(53kg vs 57kg)를 유지하면서도 더 많은 관절 자유도를 통해 복잡한 움직임을 구현하는 데 집중하고 있습니다.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 미래 비전 -->
|
||||
<section id="agibot-vision" class="scroll-mt-24 bg-slate-900 rounded-3xl p-8 md:p-12 shadow-lg text-stone-50">
|
||||
<div class="mb-10 text-center max-w-3xl mx-auto">
|
||||
<div class="inline-block px-3 py-1 rounded-full bg-slate-800 text-indigo-300 text-xs font-bold tracking-wider uppercase mb-4">Future Vision</div>
|
||||
<h2 class="text-2xl md:text-4xl font-bold mb-4">🧠 'AI + 하드웨어' : Embodied AI의 실현</h2>
|
||||
<p class="text-slate-300">펑즈후이가 지향하는 궁극적인 목표는 단순한 자동화 기계가 아닙니다. 소프트웨어 세상에 갇혀 있던 AI에게 물리적 신체를 부여하여 현실 세계와 상호작용하는 <strong>'Embodied AI (구현된 AI)'</strong> 모델을 구축하는 것입니다. 아래 단계를 클릭하여 비전을 확인하세요.</p>
|
||||
</div>
|
||||
<div class="flex flex-col md:flex-row justify-center gap-4 mb-8">
|
||||
<button onclick="updateVision(1)" id="btn-vision-1" class="vision-tab active flex-1 py-4 px-6 rounded-xl bg-slate-800 text-center cursor-pointer border border-slate-700 hover:border-indigo-400">
|
||||
<div class="text-2xl mb-2">🌐</div>
|
||||
<div class="font-bold">1단계: Foundation Model</div>
|
||||
</button>
|
||||
<button onclick="updateVision(2)" id="btn-vision-2" class="vision-tab flex-1 py-4 px-6 rounded-xl bg-slate-800 text-center cursor-pointer border border-slate-700 hover:border-indigo-400">
|
||||
<div class="text-2xl mb-2">🦾</div>
|
||||
<div class="font-bold">2단계: Hardware Integration</div>
|
||||
</button>
|
||||
<button onclick="updateVision(3)" id="btn-vision-3" class="vision-tab flex-1 py-4 px-6 rounded-xl bg-slate-800 text-center cursor-pointer border border-slate-700 hover:border-indigo-400">
|
||||
<div class="text-2xl mb-2">🚀</div>
|
||||
<div class="font-bold">3단계: AGI & Ecosystem</div>
|
||||
</button>
|
||||
</div>
|
||||
<div id="vision-content" class="bg-slate-800 rounded-2xl p-6 md:p-8 min-h-[200px] flex items-center border border-slate-700">
|
||||
<div class="animate-fade-in text-lg leading-relaxed text-slate-200">
|
||||
<h3 class="text-xl font-bold text-indigo-300 mb-3">대규모 언어/시각 모델의 진화</h3>
|
||||
<p>첫 번째 단계는 뛰어난 인지 능력과 추론 능력을 갖춘 AI 파운데이션 모델(Foundation Model)의 활용입니다. 애지봇은 자체적인 200 TOPS 연산 모듈을 통해 클라우드에 의존하지 않고 로컬에서 방대한 시각 데이터와 언어 명령을 실시간으로 처리할 수 있는 '두뇌'를 개발합니다. 이는 로봇이 인간의 언어를 이해하고 시각적으로 환경을 인식하는 핵심 기반이 됩니다.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</main>
|
||||
|
||||
<footer class="bg-stone-100 border-t border-stone-200 py-8 text-center text-slate-500 text-sm">
|
||||
<p>© 2026 Agibot & Robotics Analysis SPA. Generated for educational demonstration.</p>
|
||||
<p class="mt-2 text-xs">Note: Specs are based on publicly available data and estimations.</p>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
|
||||
@push('scripts')
|
||||
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
||||
<script>
|
||||
// 탭별 차트 초기화 상태 추적
|
||||
const chartInitialized = { 0: false, 1: false };
|
||||
|
||||
function switchTab(index) {
|
||||
// 현재는 탭 0만 활성화
|
||||
// 탭 버튼 활성화
|
||||
document.querySelectorAll('.bigtech-tab').forEach((btn, i) => {
|
||||
btn.classList.toggle('active', i === index);
|
||||
});
|
||||
// 탭 콘텐츠 전환
|
||||
document.querySelectorAll('.tab-content').forEach((content, i) => {
|
||||
content.classList.toggle('active', i === index);
|
||||
});
|
||||
// 해당 탭 차트 초기화 (최초 1회)
|
||||
if (!chartInitialized[index]) {
|
||||
if (index === 0) initCambriconCharts();
|
||||
if (index === 1) initAgibotCharts();
|
||||
chartInitialized[index] = true;
|
||||
}
|
||||
// 스크롤 맨 위로
|
||||
window.scrollTo({ top: 0, behavior: 'smooth' });
|
||||
}
|
||||
|
||||
// Chart.js 초기화
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// === Agibot 비전 탭 상호작용 ===
|
||||
const visionData = {
|
||||
1: { title: "대규모 언어/시각 모델의 진화", text: "첫 번째 단계는 뛰어난 인지 능력과 추론 능력을 갖춘 AI 파운데이션 모델(Foundation Model)의 활용입니다. 애지봇은 자체적인 200 TOPS 연산 모듈을 통해 클라우드에 의존하지 않고 로컬에서 방대한 시각 데이터와 언어 명령을 실시간으로 처리할 수 있는 '두뇌'를 개발합니다. 이는 로봇이 인간의 언어를 이해하고 시각적으로 환경을 인식하는 핵심 기반이 됩니다." },
|
||||
2: { title: "소프트웨어의 물리적 체화 (Embodied AI)", text: "두 번째는 원정 A1과 같은 정교한 하드웨어에 AI를 이식하는 것입니다. 'AI + 하드웨어' 모델의 핵심은 AI가 가상 세계를 넘어 현실의 물리 법칙, 중력, 마찰력 등을 경험하며 학습하는 것입니다. 고성능 조인트 모터(PowerFlow)와 49+ 자유도의 결합은 AI의 판단을 정확한 물리적 움직임으로 변환하는 필수적인 브릿지 역할을 합니다." },
|
||||
3: { title: "범용 인공지능(AGI)과 오픈 생태계 구축", text: "마지막으로 펑즈후이는 애지봇 플랫폼을 오픈소스화하여 전 세계 연구자들이 참여하는 생태계를 꿈꿉니다. 특정한 작업만 수행하는 로봇이 아닌, 어떤 환경에서도 적응하고 학습할 수 있는 AGI(범용 인공지능)를 로보틱스를 통해 달성하고자 합니다. 스마트폰이 모바일 생태계를 만든 것처럼, 휴머노이드가 물리적 노동의 플랫폼이 되는 미래입니다." }
|
||||
};
|
||||
|
||||
function updateVision(step) {
|
||||
document.querySelectorAll('.vision-tab').forEach(btn => {
|
||||
btn.classList.remove('active');
|
||||
btn.classList.add('bg-slate-800');
|
||||
});
|
||||
const activeBtn = document.getElementById('btn-vision-' + step);
|
||||
activeBtn.classList.add('active');
|
||||
activeBtn.classList.remove('bg-slate-800');
|
||||
|
||||
const data = visionData[step];
|
||||
document.getElementById('vision-content').innerHTML =
|
||||
'<div class="text-lg leading-relaxed text-slate-200" style="animation: fadeIn 0.5s ease-in-out;">' +
|
||||
'<h3 class="text-xl font-bold text-indigo-300 mb-3">' + data.title + '</h3>' +
|
||||
'<p>' + data.text + '</p></div>';
|
||||
}
|
||||
|
||||
// === 캄브리콘 차트 초기화 ===
|
||||
function initCambriconCharts() {
|
||||
const wrapLabel = (label, max = 16) => {
|
||||
const words = label.split(' ');
|
||||
const lines = [];
|
||||
let currentLine = '';
|
||||
words.forEach(word => {
|
||||
if ((currentLine + word).length > max) {
|
||||
if (currentLine) lines.push(currentLine.trim());
|
||||
currentLine = word + ' ';
|
||||
} else {
|
||||
currentLine += word + ' ';
|
||||
}
|
||||
});
|
||||
if (currentLine) lines.push(currentLine.trim());
|
||||
const lines = []; let cur = '';
|
||||
words.forEach(w => { if ((cur + w).length > max) { if (cur) lines.push(cur.trim()); cur = w + ' '; } else { cur += w + ' '; } });
|
||||
if (cur) lines.push(cur.trim());
|
||||
return lines;
|
||||
};
|
||||
|
||||
const commonTooltip = {
|
||||
callbacks: {
|
||||
title: function(tooltipItems) {
|
||||
const item = tooltipItems[0];
|
||||
let label = item.chart.data.labels[item.dataIndex];
|
||||
if (Array.isArray(label)) {
|
||||
return label.join(' ');
|
||||
} else {
|
||||
return label;
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const commonOptions = {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
plugins: {
|
||||
tooltip: commonTooltip,
|
||||
legend: {
|
||||
labels: { font: { family: "'Noto Sans KR', sans-serif" } }
|
||||
}
|
||||
}
|
||||
};
|
||||
const commonTooltip = { callbacks: { title: function(items) { let l = items[0].chart.data.labels[items[0].dataIndex]; return Array.isArray(l) ? l.join(' ') : l; } } };
|
||||
const commonOpts = { responsive: true, maintainAspectRatio: false, plugins: { tooltip: commonTooltip, legend: { labels: { font: { family: "'Noto Sans KR', sans-serif" } } } } };
|
||||
|
||||
// 주가 차트
|
||||
const stockLabelsRaw = ['2023 Q1 (생성AI 붐)', '2023 Q2', '2023 Q3 (수출규제 강화)', '2023 Q4', '2024 Q1 (대규모 수주)', '2024 Q2', '2024 Q3 (Siyuan 590)'];
|
||||
const stockLabels = stockLabelsRaw.map(lbl => wrapLabel(lbl));
|
||||
|
||||
const ctxStock = document.getElementById('stockChart').getContext('2d');
|
||||
new Chart(ctxStock, {
|
||||
new Chart(document.getElementById('stockChart').getContext('2d'), {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: stockLabels,
|
||||
datasets: [{
|
||||
label: '상대적 주가 지수 추이 (추정)',
|
||||
data: [60, 150, 140, 135, 180, 240, 290],
|
||||
borderColor: '#16a34a',
|
||||
backgroundColor: 'rgba(22, 163, 74, 0.1)',
|
||||
borderWidth: 3,
|
||||
pointBackgroundColor: '#2563eb',
|
||||
pointRadius: 5,
|
||||
fill: true,
|
||||
tension: 0.3
|
||||
}]
|
||||
labels: ['2023 Q1 (생성AI 붐)', '2023 Q2', '2023 Q3 (수출규제 강화)', '2023 Q4', '2024 Q1 (대규모 수주)', '2024 Q2', '2024 Q3 (Siyuan 590)'].map(l => wrapLabel(l)),
|
||||
datasets: [{ label: '상대적 주가 지수 추이 (추정)', data: [60, 150, 140, 135, 180, 240, 290], borderColor: '#16a34a', backgroundColor: 'rgba(22, 163, 74, 0.1)', borderWidth: 3, pointBackgroundColor: '#2563eb', pointRadius: 5, fill: true, tension: 0.3 }]
|
||||
},
|
||||
options: {
|
||||
...commonOptions,
|
||||
scales: {
|
||||
y: { beginAtZero: true, grid: { color: '#e2e8f0' } },
|
||||
x: { grid: { display: false }, ticks: { font: { size: 11 } } }
|
||||
}
|
||||
}
|
||||
options: { ...commonOpts, scales: { y: { beginAtZero: true, grid: { color: '#e2e8f0' } }, x: { grid: { display: false }, ticks: { font: { size: 11 } } } } }
|
||||
});
|
||||
|
||||
// 매출 비중 차트
|
||||
const revLabelsRaw = ['모바일 IP (화웨이 등)', '클라우드/서버 가속기', '엣지 컴퓨팅', '기타 서비스'];
|
||||
const revLabels = revLabelsRaw.map(lbl => wrapLabel(lbl));
|
||||
|
||||
const ctxRev = document.getElementById('revenueChart').getContext('2d');
|
||||
new Chart(ctxRev, {
|
||||
new Chart(document.getElementById('revenueChart').getContext('2d'), {
|
||||
type: 'bar',
|
||||
data: {
|
||||
labels: revLabels,
|
||||
labels: ['모바일 IP (화웨이 등)', '클라우드/서버 가속기', '엣지 컴퓨팅', '기타 서비스'].map(l => wrapLabel(l)),
|
||||
datasets: [
|
||||
{
|
||||
label: '2018년 매출 비중 (%)',
|
||||
data: [95, 2, 0, 3],
|
||||
backgroundColor: '#ef4444',
|
||||
borderRadius: 4
|
||||
},
|
||||
{
|
||||
label: '2023년 매출 비중 (%)',
|
||||
data: [5, 65, 20, 10],
|
||||
backgroundColor: '#3b82f6',
|
||||
borderRadius: 4
|
||||
}
|
||||
{ label: '2018년 매출 비중 (%)', data: [95, 2, 0, 3], backgroundColor: '#ef4444', borderRadius: 4 },
|
||||
{ label: '2023년 매출 비중 (%)', data: [5, 65, 20, 10], backgroundColor: '#3b82f6', borderRadius: 4 }
|
||||
]
|
||||
},
|
||||
options: {
|
||||
...commonOptions,
|
||||
indexAxis: 'y',
|
||||
scales: {
|
||||
x: { stacked: false, beginAtZero: true, max: 100 },
|
||||
y: { stacked: false, ticks: { font: { size: 11 } } }
|
||||
}
|
||||
}
|
||||
options: { ...commonOpts, indexAxis: 'y', scales: { x: { stacked: false, beginAtZero: true, max: 100 }, y: { stacked: false, ticks: { font: { size: 11 } } } } }
|
||||
});
|
||||
|
||||
// 성능 비교 레이더 차트
|
||||
const perfLabelsRaw = ['AI 연산 (INT8 TOPS)', 'AI 연산 (FP32 TFLOPS)', '메모리 대역폭 (GB/s)', '에너지 효율성'];
|
||||
const perfLabels = perfLabelsRaw.map(lbl => wrapLabel(lbl));
|
||||
|
||||
const ctxPerf = document.getElementById('performanceChart').getContext('2d');
|
||||
new Chart(ctxPerf, {
|
||||
// 성능 비교 레이더
|
||||
new Chart(document.getElementById('performanceChart').getContext('2d'), {
|
||||
type: 'radar',
|
||||
data: {
|
||||
labels: perfLabels,
|
||||
labels: ['AI 연산 (INT8 TOPS)', 'AI 연산 (FP32 TFLOPS)', '메모리 대역폭 (GB/s)', '에너지 효율성'].map(l => wrapLabel(l)),
|
||||
datasets: [
|
||||
{
|
||||
label: 'Siyuan 590 (Cambricon)',
|
||||
data: [75, 70, 80, 85],
|
||||
borderColor: '#06b6d4',
|
||||
backgroundColor: 'rgba(6, 182, 212, 0.2)',
|
||||
pointBackgroundColor: '#06b6d4',
|
||||
borderWidth: 2
|
||||
},
|
||||
{
|
||||
label: 'NVIDIA H20 (수출통제용)',
|
||||
data: [70, 65, 85, 75],
|
||||
borderColor: '#f97316',
|
||||
backgroundColor: 'rgba(249, 115, 22, 0.2)',
|
||||
pointBackgroundColor: '#f97316',
|
||||
borderWidth: 2
|
||||
},
|
||||
{
|
||||
label: 'NVIDIA A100',
|
||||
data: [65, 80, 95, 70],
|
||||
borderColor: '#8b5cf6',
|
||||
backgroundColor: 'rgba(139, 92, 246, 0.2)',
|
||||
pointBackgroundColor: '#8b5cf6',
|
||||
borderWidth: 2
|
||||
}
|
||||
{ label: 'Siyuan 590 (Cambricon)', data: [75, 70, 80, 85], borderColor: '#06b6d4', backgroundColor: 'rgba(6, 182, 212, 0.2)', pointBackgroundColor: '#06b6d4', borderWidth: 2 },
|
||||
{ label: 'NVIDIA H20 (수출통제용)', data: [70, 65, 85, 75], borderColor: '#f97316', backgroundColor: 'rgba(249, 115, 22, 0.2)', pointBackgroundColor: '#f97316', borderWidth: 2 },
|
||||
{ label: 'NVIDIA A100', data: [65, 80, 95, 70], borderColor: '#8b5cf6', backgroundColor: 'rgba(139, 92, 246, 0.2)', pointBackgroundColor: '#8b5cf6', borderWidth: 2 }
|
||||
]
|
||||
},
|
||||
options: { ...commonOpts, scales: { r: { angleLines: { color: '#e2e8f0' }, grid: { color: '#e2e8f0' }, pointLabels: { font: { size: 11 }, color: '#475569' }, ticks: { display: false, min: 0, max: 100 } } } }
|
||||
});
|
||||
}
|
||||
|
||||
// === Agibot 차트 초기화 ===
|
||||
function initAgibotCharts() {
|
||||
Chart.defaults.font.family = "'Noto Sans KR', sans-serif";
|
||||
|
||||
// 역량 레이더
|
||||
new Chart(document.getElementById('capabilityRadarChart').getContext('2d'), {
|
||||
type: 'radar',
|
||||
data: {
|
||||
labels: ['인지 능력 (Vision)', '연산/AI (Compute)', '민첩성 (Agility)', '조작 정밀도 (Dexterity)', '적재 하중 (Payload)'],
|
||||
datasets: [{ label: '원정 A1 역량지수', data: [85, 95, 90, 80, 60], backgroundColor: 'rgba(79, 70, 229, 0.2)', borderColor: 'rgba(79, 70, 229, 1)', pointBackgroundColor: 'rgba(79, 70, 229, 1)', pointBorderColor: '#fff', borderWidth: 2 }]
|
||||
},
|
||||
options: {
|
||||
responsive: true, maintainAspectRatio: false,
|
||||
scales: { r: { angleLines: { color: 'rgba(0,0,0,0.05)' }, grid: { color: 'rgba(0,0,0,0.05)' }, pointLabels: { font: { size: 12, weight: '500' }, color: '#475569' }, ticks: { display: false, min: 0, max: 100 } } },
|
||||
plugins: { legend: { display: false }, tooltip: { backgroundColor: 'rgba(15, 23, 42, 0.9)', padding: 12 } }
|
||||
}
|
||||
});
|
||||
|
||||
// 비교 바 차트
|
||||
new Chart(document.getElementById('comparisonBarChart').getContext('2d'), {
|
||||
type: 'bar',
|
||||
data: {
|
||||
labels: ['무게 (Weight, kg)', '자유도 (DOF)'],
|
||||
datasets: [
|
||||
{ label: '애지봇 원정 A1', data: [53, 49], backgroundColor: 'rgba(79, 70, 229, 0.8)', borderRadius: 6 },
|
||||
{ label: '테슬라 옵티머스 (Gen 2)', data: [57, 28], backgroundColor: 'rgba(148, 163, 184, 0.6)', borderRadius: 6 }
|
||||
]
|
||||
},
|
||||
options: {
|
||||
...commonOptions,
|
||||
scales: {
|
||||
r: {
|
||||
angleLines: { color: '#e2e8f0' },
|
||||
grid: { color: '#e2e8f0' },
|
||||
pointLabels: { font: { size: 11 }, color: '#475569' },
|
||||
ticks: { display: false, min: 0, max: 100 }
|
||||
}
|
||||
responsive: true, maintainAspectRatio: false,
|
||||
interaction: { mode: 'index', intersect: false },
|
||||
scales: { y: { beginAtZero: true, grid: { color: 'rgba(0,0,0,0.05)', drawBorder: false } }, x: { grid: { display: false } } },
|
||||
plugins: {
|
||||
legend: { position: 'bottom', labels: { padding: 20, usePointStyle: true, pointStyle: 'circle' } },
|
||||
tooltip: { backgroundColor: 'rgba(15, 23, 42, 0.9)', padding: 12, callbacks: { label: function(ctx) { let l = ctx.dataset.label || ''; if (l) l += ': '; l += ctx.parsed.y + (ctx.dataIndex === 0 ? ' kg' : ' 개'); return l; } } }
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 페이지 로드 시 탭 0 차트 초기화
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
initCambriconCharts();
|
||||
chartInitialized[0] = true;
|
||||
});
|
||||
</script>
|
||||
@endpush
|
||||
|
||||
Reference in New Issue
Block a user