753 lines
55 KiB
PHP
753 lines
55 KiB
PHP
@extends('layouts.app')
|
|
|
|
@section('title', '5대 신흥빅테크')
|
|
|
|
@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; 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; } }
|
|
|
|
/* 탭 버튼 스타일 */
|
|
.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 !important; color: white !important; 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; }
|
|
|
|
/* 탭2: Moonshot/Kimi 스타일 */
|
|
.tab-moonshot { background-color: #f8fafc; }
|
|
.tab-moonshot .moonshot-nav-btn.active-nav { color: #14b8a6; font-weight: 700; border-bottom: 2px solid #14b8a6; }
|
|
.tab-moonshot .timeline-card { transition: all 0.3s ease; }
|
|
.tab-moonshot .timeline-card:hover { transform: translateY(-2px); }
|
|
.fade-in-scroll { opacity: 0; animation: fadeIn 0.8s ease-in-out forwards; }
|
|
</style>
|
|
@endpush
|
|
|
|
@section('content')
|
|
<div class="bigtech-body min-h-screen">
|
|
{{-- 탭 네비게이션 --}}
|
|
<div class="bg-white border-b shadow-sm sticky top-0 z-40">
|
|
<div class="max-w-7xl mx-auto px-4 py-3">
|
|
<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" onclick="switchTab(1)">Agibot 휴머노이드 로봇 정보</button>
|
|
<button class="bigtech-tab" onclick="switchTab(2)">양즈린 Kimi LLM 기술 리서치</button>
|
|
<button class="bigtech-tab placeholder" disabled>준비 중 (4)</button>
|
|
<button class="bigtech-tab placeholder" disabled>준비 중 (5)</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- ========== 탭 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>
|
|
<nav class="hidden md:flex space-x-6 font-semibold text-sm text-slate-600">
|
|
<a href="#founder" class="hover:text-green-600 transition">천텐스 & 철학</a>
|
|
<a href="#market" class="hover:text-green-600 transition">주가 & 시장</a>
|
|
<a href="#huawei" class="hover:text-green-600 transition">화웨이 파트너십</a>
|
|
<a href="#siyuan" class="hover:text-green-600 transition">Siyuan vs NVIDIA</a>
|
|
</nav>
|
|
</div>
|
|
</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">
|
|
천텐스(Chen Tianshi)가 이끄는 캄브리콘은 중국의 대표적인 AI 반도체 기업입니다. 미국의 대중 반도체 수출 통제 속에서 엔비디아(NVIDIA)의 대체재로 급부상하며 폭발적인 성장을 기록하고 있습니다.
|
|
</p>
|
|
</section>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-12">
|
|
<section id="founder" class="bg-white rounded-2xl p-8 card-shadow border-t-4 border-blue-500">
|
|
<div class="flex items-center mb-6">
|
|
<span class="text-4xl mr-4">🧠</span>
|
|
<h3 class="text-2xl font-bold text-slate-800">설립자 천텐스 학술 배경</h3>
|
|
</div>
|
|
<p class="text-slate-600 mb-6 leading-relaxed">
|
|
천텐스(Chen Tianshi)는 1985년생으로, 중국 영재의 산실인 중국과학기술대학(USTC) 소년반 출신입니다. 중국과학원 계산기술연구소(ICT)에서 박사 학위를 취득했으며, 세계 최초의 딥러닝 프로세서 아키텍처 중 하나인 <strong>'Diannao(전뇌)'</strong> 시리즈 연구를 주도했습니다.
|
|
</p>
|
|
<div class="space-y-4">
|
|
<div class="bg-blue-50 p-4 rounded-lg flex items-start border-l-4 border-blue-400">
|
|
<span class="text-xl mr-3">🎓</span>
|
|
<div>
|
|
<h4 class="font-bold text-slate-800">중국과학원(CAS) 연구원</h4>
|
|
<p class="text-sm text-slate-600">컴퓨터 아키텍처 및 인공지능 하드웨어 가속기 분야의 세계적 권위자.</p>
|
|
</div>
|
|
</div>
|
|
<div class="bg-indigo-50 p-4 rounded-lg flex items-start border-l-4 border-indigo-400">
|
|
<span class="text-xl mr-3">🏆</span>
|
|
<div>
|
|
<h4 class="font-bold text-slate-800">ASPLOS 및 ISCA 최우수 논문상</h4>
|
|
<p class="text-sm text-slate-600">국제 최상위 컴퓨터 구조 학회에서 AI 가속기 설계의 기초를 닦은 논문 발표.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="bg-white rounded-2xl p-8 card-shadow border-t-4 border-orange-500">
|
|
<div class="flex items-center mb-6">
|
|
<span class="text-4xl mr-4">⚙️</span>
|
|
<h3 class="text-2xl font-bold text-slate-800">NPU 설계 철학</h3>
|
|
</div>
|
|
<p class="text-slate-600 mb-6 leading-relaxed">
|
|
캄브리콘의 핵심은 범용성과 효율성을 모두 잡는 <strong>DSA (Domain-Specific Architecture)</strong>입니다. 기존 CPU/GPU와 달리, 신경망 연산에 특화된 독자적인 명령어 셋(ISA)을 사용하여 전력 소모를 최소화합니다.
|
|
</p>
|
|
<div class="flex flex-col space-y-2">
|
|
<div class="bg-orange-100 text-orange-800 font-bold p-3 rounded text-center">범용 AI 칩 지향 (General-purpose AI)</div>
|
|
<div class="text-center text-xl text-slate-400">↓</div>
|
|
<div class="grid grid-cols-2 gap-2">
|
|
<div class="bg-slate-100 p-3 rounded text-center border border-slate-200">
|
|
<span class="block font-bold text-slate-700">고효율 연산 유닛</span>
|
|
<span class="text-xs text-slate-500">텐서 처리 최적화</span>
|
|
</div>
|
|
<div class="bg-slate-100 p-3 rounded text-center border border-slate-200">
|
|
<span class="block font-bold text-slate-700">MLUarch 아키텍처</span>
|
|
<span class="text-xs text-slate-500">독자적 신경망 명령어 셋</span>
|
|
</div>
|
|
</div>
|
|
<div class="text-center text-xl text-slate-400">↓</div>
|
|
<div class="bg-orange-500 text-white font-bold p-3 rounded text-center shadow-md">엣지부터 클라우드까지 아우르는 생태계 (Cambricon Neuware)</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
|
|
<section id="market" class="bg-white rounded-2xl p-8 card-shadow mb-12 border-t-4 border-green-500">
|
|
<div class="text-center mb-8">
|
|
<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">
|
|
<div class="flex items-center mb-2">
|
|
<span class="text-2xl mr-2">📈</span>
|
|
<h4 class="font-bold text-slate-800">국산화 대체 (수혜)</h4>
|
|
</div>
|
|
<p class="text-sm text-slate-600">NVIDIA A100/H100의 중국 수출 통제로 인해 'Siyuan' 시리즈에 대한 통신사/국유기업의 대규모 발주 증가.</p>
|
|
</div>
|
|
<div class="p-4 bg-green-50 rounded-lg border border-green-100">
|
|
<div class="flex items-center mb-2">
|
|
<span class="text-2xl mr-2">🤖</span>
|
|
<h4 class="font-bold text-slate-800">생성형 AI 컴퓨팅 수요</h4>
|
|
</div>
|
|
<p class="text-sm text-slate-600">중국 빅테크 기업들의 자체 LLM(대규모 언어 모델) 개발 경쟁으로 인한 클라우드 AI 가속기 수요 폭발.</p>
|
|
</div>
|
|
<div class="p-4 bg-green-50 rounded-lg border border-green-100">
|
|
<div class="flex items-center mb-2">
|
|
<span class="text-2xl mr-2">💰</span>
|
|
<h4 class="font-bold text-slate-800">정부 지원금 및 국책 사업</h4>
|
|
</div>
|
|
<p class="text-sm text-slate-600">국가 주도의 '동수서산(東數西算)' 데이터센터 인프라 프로젝트 핵심 공급사로 선정.</p>
|
|
</div>
|
|
</div>
|
|
<div class="lg:col-span-2">
|
|
<div class="chart-container">
|
|
<canvas id="stockChart"></canvas>
|
|
</div>
|
|
<p class="text-center text-xs text-slate-400 mt-2">* 데이터: 캄브리콘(688256.SS) 최근 주가 추이 (예시 데이터)</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-12">
|
|
<section id="huawei" class="bg-white rounded-2xl p-8 card-shadow border-t-4 border-red-500">
|
|
<div class="flex items-center mb-6">
|
|
<span class="text-4xl mr-4">🤝</span>
|
|
<h3 class="text-2xl font-bold text-slate-800">화웨이와의 협력과 홀로서기</h3>
|
|
</div>
|
|
<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>
|
|
</section>
|
|
|
|
<section id="siyuan" class="bg-white rounded-2xl p-8 card-shadow border-t-4 border-cyan-500">
|
|
<div class="flex items-center mb-6">
|
|
<span class="text-4xl mr-4">⚡</span>
|
|
<h3 class="text-2xl font-bold text-slate-800">엔비디아 대항마: Siyuan 시리즈</h3>
|
|
</div>
|
|
<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>
|
|
</section>
|
|
</div>
|
|
|
|
<section class="bg-slate-800 text-white rounded-2xl p-8 text-center card-shadow">
|
|
<h3 class="text-2xl font-bold mb-4">결론: 캄브리콘의 미래 전망</h3>
|
|
<p class="text-slate-300 max-w-3xl mx-auto mb-6">
|
|
천텐스의 학술적 깊이에서 출발한 캄브리콘은 이제 중국 국가 반도체 안보의 핵심 축이 되었습니다. 하드웨어 성능의 한계와 글로벌 파운드리 제재를 극복하고, 독자적인 'Neuware' 소프트웨어 생태계를 얼마나 견고하게 구축하느냐가 향후 글로벌 AI 반도체 전쟁에서의 생존을 결정지을 것입니다.
|
|
</p>
|
|
<div class="flex justify-center space-x-4">
|
|
<span class="px-4 py-2 bg-slate-700 rounded-full text-sm font-semibold">#AI반도체</span>
|
|
<span class="px-4 py-2 bg-slate-700 rounded-full text-sm font-semibold">#NPU</span>
|
|
<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 gap-8 items-start" style="grid-template-columns: 1fr;">
|
|
<div class="bg-white rounded-3xl p-6 shadow-sm border border-stone-100 overflow-x-auto" style="grid-column: 1 / -1;">
|
|
<div style="display: flex; gap: 2rem; align-items: flex-start;">
|
|
<table class="text-sm" style="flex: 3 1 0; min-width: 500px; border-collapse: collapse;">
|
|
<thead>
|
|
<tr class="font-bold text-slate-700 border-b-2 border-stone-200">
|
|
<th class="py-3 text-left" style="width: 20%; min-width: 90px;">비교 항목</th>
|
|
<th class="py-3 text-left text-indigo-600" style="width: 40%;">애지봇 원정 A1</th>
|
|
<th class="py-3 text-left text-slate-500" style="width: 40%;">테슬라 옵티머스</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr class="border-b border-stone-100">
|
|
<td class="py-3 font-medium text-slate-600">개발 철학</td>
|
|
<td class="py-3">Agile 개발, 오픈소스 생태계, 특화 AI 결합</td>
|
|
<td class="py-3">수직 계열화, 대량 양산, 자동차 제조 인프라 활용</td>
|
|
</tr>
|
|
<tr class="border-b border-stone-100">
|
|
<td class="py-3 font-medium text-slate-600">하드웨어 특징</td>
|
|
<td class="py-3">PowerFlow 커스텀 모터, 역관절 구조 채택 (경량화)</td>
|
|
<td class="py-3">테슬라 자체 설계 액추에이터, 인간과 매우 유사한 관절</td>
|
|
</tr>
|
|
<tr class="border-b border-stone-100">
|
|
<td class="py-3 font-medium text-slate-600">초기 타겟 시장</td>
|
|
<td class="py-3">B2B 산업 환경 및 AI 연구 플랫폼</td>
|
|
<td class="py-3">테슬라 기가팩토리 내부 투입 후 B2C 확대</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="py-3 font-medium text-slate-600">핵심 강점</td>
|
|
<td class="py-3 text-indigo-600 font-medium">소프트웨어 혁신 속도, 경량성</td>
|
|
<td class="py-3 text-slate-600 font-medium">제조 단가 절감, 데이터 수집 규모</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<div style="flex: 2 1 0; min-width: 280px;">
|
|
<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>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 미래 비전 -->
|
|
<section id="agibot-vision" class="scroll-mt-24 bg-indigo-50 rounded-3xl p-8 md:p-12 shadow-lg text-slate-800">
|
|
<div class="mb-10 text-center max-w-3xl mx-auto">
|
|
<div class="inline-block px-3 py-1 rounded-full bg-indigo-100 text-indigo-700 text-xs font-bold tracking-wider uppercase mb-4">Future Vision</div>
|
|
<h2 class="text-2xl md:text-4xl font-bold mb-4 text-slate-900">🧠 'AI + 하드웨어' : Embodied AI의 실현</h2>
|
|
<p class="text-slate-600">펑즈후이가 지향하는 궁극적인 목표는 단순한 자동화 기계가 아닙니다. 소프트웨어 세상에 갇혀 있던 AI에게 물리적 신체를 부여하여 현실 세계와 상호작용하는 <strong class="text-slate-800">'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-white text-center cursor-pointer border border-indigo-200 hover:border-indigo-400 text-slate-700">
|
|
<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-white text-center cursor-pointer border border-indigo-200 hover:border-indigo-400 text-slate-700">
|
|
<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-white text-center cursor-pointer border border-indigo-200 hover:border-indigo-400 text-slate-700">
|
|
<div class="text-2xl mb-2">🚀</div>
|
|
<div class="font-bold">3단계: AGI & Ecosystem</div>
|
|
</button>
|
|
</div>
|
|
<div id="vision-content" class="bg-white rounded-2xl p-6 md:p-8 min-h-[200px] flex items-center border border-indigo-200">
|
|
<div class="animate-fade-in text-lg leading-relaxed text-slate-700">
|
|
<h3 class="text-xl font-bold text-indigo-700 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>
|
|
|
|
{{-- ========== 탭 2: 양즈린 Kimi LLM ========== --}}
|
|
<div id="tab-content-2" class="tab-content tab-moonshot">
|
|
<nav class="bg-white/90 backdrop-blur-md border-b border-slate-200">
|
|
<div class="max-w-6xl mx-auto px-4 py-4 flex justify-between items-center">
|
|
<span class="text-xl font-black text-teal-900 tracking-tighter">MOONSHOT<span class="text-indigo-500">.</span>INSIGHT</span>
|
|
<div class="hidden md:flex space-x-8">
|
|
<button data-moonshot-target="kimi-hero" class="moonshot-nav-btn text-slate-500 hover:text-teal-700 px-3 py-2 text-sm font-medium transition-colors">개요</button>
|
|
<button data-moonshot-target="kimi-founder" class="moonshot-nav-btn text-slate-500 hover:text-teal-700 px-3 py-2 text-sm font-medium transition-colors">양즈린과 연구배경</button>
|
|
<button data-moonshot-target="kimi-technology" class="moonshot-nav-btn text-slate-500 hover:text-teal-700 px-3 py-2 text-sm font-medium transition-colors">핵심 기술: Long Context</button>
|
|
<button data-moonshot-target="kimi-investment" class="moonshot-nav-btn text-slate-500 hover:text-teal-700 px-3 py-2 text-sm font-medium transition-colors">투자 및 시장배경</button>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<main class="max-w-6xl mx-auto px-4 py-10 space-y-24">
|
|
<!-- Hero -->
|
|
<section id="kimi-hero" class="min-h-[60vh] flex items-center justify-center bg-gradient-to-br from-slate-50 to-teal-50 rounded-3xl px-8 py-20 fade-in-scroll">
|
|
<div class="max-w-4xl mx-auto text-center">
|
|
<span class="inline-block py-1 px-3 rounded-full bg-teal-100 text-teal-700 text-xs font-bold tracking-wider mb-6 uppercase">Research Report Analysis</span>
|
|
<h1 class="text-4xl md:text-5xl font-black text-slate-900 leading-tight mb-6">
|
|
문맥의 한계를 돌파하다:<br>
|
|
<span class="text-transparent bg-clip-text bg-gradient-to-r from-teal-500 to-indigo-500">양즈린과 Kimi의 혁신</span>
|
|
</h1>
|
|
<p class="text-lg text-slate-600 mb-10 max-w-3xl mx-auto leading-relaxed">
|
|
칭화대 출신의 천재 연구자 양즈린이 이끄는 Moonshot AI는 어떻게 200만 자의 문맥을 한 번에 처리하는 LLM 'Kimi'를 탄생시켰을까요? 구글과 메타에서의 연구가 현재 기술에 미친 영향, 그리고 알리바바와 텐센트가 천문학적인 투자를 단행한 배경을 심층 분석합니다.
|
|
</p>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 양즈린 연구배경 -->
|
|
<section id="kimi-founder" class="py-16 bg-white rounded-3xl px-8 shadow-sm border border-slate-100">
|
|
<div class="text-center mb-16">
|
|
<h2 class="text-3xl font-bold text-slate-900 mb-4">양즈린(Yang Zhilin): 연구자에서 창업자로</h2>
|
|
<p class="text-slate-600 max-w-2xl mx-auto">양즈린의 학문적 배경과 거대 테크 기업에서의 핵심 연구 성과를 추적합니다. 아래 카드를 클릭하여 그의 과거 연구가 현재 Kimi의 긴 문맥 처리 능력에 어떻게 기술적 토대를 제공했는지 확인하세요.</p>
|
|
</div>
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
|
<div class="timeline-card cursor-pointer group bg-slate-50 rounded-2xl p-8 border border-slate-100 hover:border-teal-300 hover:shadow-xl transition-all duration-300 relative overflow-hidden" data-kimi-id="1">
|
|
<div class="absolute top-0 left-0 w-full h-1 bg-slate-200 group-hover:bg-teal-500 transition-colors"></div>
|
|
<div class="text-4xl mb-4">🎓</div>
|
|
<h3 class="text-xl font-bold text-slate-900 mb-2">칭화대 & 카네기멜런</h3>
|
|
<p class="text-slate-500 text-sm mb-4">컴퓨터 과학의 기초와 언어 모델링의 시작</p>
|
|
<div class="kimi-timeline-content hidden text-sm text-slate-700 mt-4 pt-4 border-t border-slate-200">
|
|
칭화대학교 컴퓨터과학과를 수석급으로 졸업하고, 미국 카네기멜런 대학교(CMU)에서 박사 학위를 취득했습니다. 학창 시절부터 자연어 처리(NLP) 분야에서 두각을 나타내며 딥러닝 기반의 언어 모델 연구에 집중했습니다.
|
|
</div>
|
|
</div>
|
|
<div class="timeline-card cursor-pointer group bg-slate-50 rounded-2xl p-8 border border-slate-100 hover:border-indigo-300 hover:shadow-xl transition-all duration-300 relative overflow-hidden" data-kimi-id="2">
|
|
<div class="absolute top-0 left-0 w-full h-1 bg-slate-200 group-hover:bg-indigo-500 transition-colors"></div>
|
|
<div class="text-4xl mb-4">🔬</div>
|
|
<h3 class="text-xl font-bold text-slate-900 mb-2">Google & Meta 연구원</h3>
|
|
<p class="text-slate-500 text-sm mb-4">Transformer-XL과 XLNet의 탄생</p>
|
|
<div class="kimi-timeline-content hidden text-sm text-slate-700 mt-4 pt-4 border-t border-slate-200">
|
|
구글 브레인과 메타(페이스북) AI 리서치에서 근무하며 기념비적인 논문을 공동 저술했습니다. <b>Transformer-XL</b>은 기존 트랜스포머의 고정된 문맥 길이를 극복하는 순환(Recurrence) 메커니즘을 제안했고, <b>XLNet</b>은 양방향 문맥을 모두 고려하는 순열 언어 모델링 기법을 도입하여 당시 SOTA를 달성했습니다.
|
|
</div>
|
|
</div>
|
|
<div class="timeline-card cursor-pointer group bg-slate-50 rounded-2xl p-8 border border-slate-100 hover:border-teal-300 hover:shadow-xl transition-all duration-300 relative overflow-hidden" data-kimi-id="3">
|
|
<div class="absolute top-0 left-0 w-full h-1 bg-slate-200 group-hover:bg-teal-500 transition-colors"></div>
|
|
<div class="text-4xl mb-4">🚀</div>
|
|
<h3 class="text-xl font-bold text-slate-900 mb-2">Moonshot AI 설립</h3>
|
|
<p class="text-slate-500 text-sm mb-4">초거대 문맥 모델 'Kimi'의 상용화</p>
|
|
<div class="kimi-timeline-content hidden text-sm text-slate-700 mt-4 pt-4 border-t border-slate-200">
|
|
과거의 연구 성과(긴 텍스트의 의존성 학습 및 메모리 효율화)를 발전시켜 2023년 Moonshot AI를 창업했습니다. 그가 주도하여 개발한 Kimi는 수십 권의 책이나 방대한 재무 제표를 한 번에 읽고 분석할 수 있는 'Long Context' 역량에 올인하여 시장의 게임 체인저가 되었습니다.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 핵심 기술: Long Context -->
|
|
<section id="kimi-technology" class="py-16 bg-slate-50 rounded-3xl px-8 border border-slate-200">
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
|
|
<div>
|
|
<h2 class="text-3xl font-bold text-slate-900 mb-6">핵심 기술: Long Context의 압도적 우위</h2>
|
|
<p class="text-slate-700 mb-6 leading-relaxed">
|
|
Kimi의 가장 큰 차별점인 <b>Context Window(문맥 처리 창)</b>의 크기를 시각화하여 보여줍니다. 양즈린의 팀은 과거 Transformer-XL에서 고안했던 메모리 최적화 및 어텐션 메커니즘을 고도화하여 손실 없는 무손실 긴 문맥 처리를 구현했습니다.
|
|
</p>
|
|
<div class="bg-white p-6 rounded-xl border border-slate-200 shadow-sm mb-6">
|
|
<h4 class="font-bold text-slate-900 mb-2 flex items-center"><span class="text-xl mr-2">💡</span> Long Context가 왜 중요한가요?</h4>
|
|
<p class="text-sm text-slate-600">
|
|
기존 LLM은 단기 기억 상실증처럼 긴 글의 앞부분을 잊어버렸습니다. 200만 토큰(약 한글 100만 자)을 한 번에 처리할 수 있다는 것은 RAG(검색 증강 생성)에 의존하지 않고도 전체 PDF 수십 개, 코드 베이스 전체를 프롬프트에 통째로 넣어 즉각적인 교차 분석과 요약이 가능함을 의미합니다.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="bg-white p-6 rounded-2xl shadow-lg border border-slate-100">
|
|
<h3 class="text-center font-bold text-slate-800 mb-4 text-sm uppercase tracking-widest">주요 LLM 문맥 처리 한계 비교 (단위: 토큰)</h3>
|
|
<div class="chart-container" style="max-width: 800px;">
|
|
<canvas id="contextChart"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 투자 배경 -->
|
|
<section id="kimi-investment" class="py-16 bg-white rounded-3xl px-8 shadow-sm border border-slate-100">
|
|
<div class="text-center mb-16">
|
|
<h2 class="text-3xl font-bold text-slate-900 mb-4">투자 배경: 알리바바와 텐센트의 대통합</h2>
|
|
<p class="text-slate-600 max-w-2xl mx-auto">경쟁 관계인 중국의 두 빅테크가 이례적으로 Moonshot AI에 대규모 공동 투자를 단행했습니다. 중국의 '백모델 전쟁(War of the Hundred Models)' 속에서 Moonshot AI가 가지는 전략적 가치를 분석합니다.</p>
|
|
</div>
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
|
|
<div class="flex justify-center">
|
|
<div class="bg-slate-50 p-6 rounded-2xl shadow-inner border border-slate-100 w-full max-w-md">
|
|
<h3 class="text-center font-bold text-slate-800 mb-6">중국 AI 유니콘(신형 4소룡) 기업가치 추정비율</h3>
|
|
<div class="chart-container" style="height: 300px;">
|
|
<canvas id="investmentChart"></canvas>
|
|
</div>
|
|
<p class="text-xs text-center text-slate-400 mt-4">* 추정치 기반 상대적 밸류에이션 비교 (시뮬레이션 데이터)</p>
|
|
</div>
|
|
</div>
|
|
<div class="space-y-6">
|
|
<div class="p-6 border-l-4 border-teal-500 bg-teal-50 rounded-r-xl">
|
|
<h4 class="text-lg font-bold text-slate-900 mb-2">왜 거대 자본이 몰리는가?</h4>
|
|
<p class="text-slate-700 text-sm leading-relaxed">
|
|
미국에 OpenAI, Anthropic이 있다면 중국은 자체적인 AGI 인프라를 구축해야 하는 절박함이 있습니다. 양즈린의 명확한 기술적 강점(Long Context)과 Kimi 챗봇의 폭발적인 B2C 트래픽 성장은 투자자들에게 확실한 마일스톤을 제시했습니다.
|
|
</p>
|
|
</div>
|
|
<div class="p-6 border-l-4 border-indigo-500 bg-indigo-50 rounded-r-xl">
|
|
<h4 class="text-lg font-bold text-slate-900 mb-2">알리바바와 텐센트의 셈법</h4>
|
|
<ul class="text-sm text-slate-700 space-y-3">
|
|
<li class="flex items-start">
|
|
<span class="mr-2 mt-0.5 text-indigo-500 font-bold">✓</span>
|
|
<span><b>클라우드 인프라 선점:</b> 알리바바는 대규모 투자를 통해 자사의 클라우드 서버(Alibaba Cloud) 사용을 유도합니다. AI 연산 비용이 클라우드 매출로 직결됩니다.</span>
|
|
</li>
|
|
<li class="flex items-start">
|
|
<span class="mr-2 mt-0.5 text-indigo-500 font-bold">✓</span>
|
|
<span><b>슈퍼앱 생태계 연동:</b> 텐센트는 위챗(WeChat) 생태계에 강력한 자체 언어 모델을 결합하여 서비스 고도화를 노립니다.</span>
|
|
</li>
|
|
<li class="flex items-start">
|
|
<span class="mr-2 mt-0.5 text-indigo-500 font-bold">✓</span>
|
|
<span><b>리스크 분산:</b> 어느 스타트업이 최후의 승자가 될지 모르는 상황에서 가장 기술력이 뛰어난 Moonshot AI에 양사 모두 발을 걸쳐두는 전략입니다.</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<footer class="bg-slate-900 text-slate-400 py-8 text-center text-sm rounded-b-lg">
|
|
<p>Interactive Analysis SPA based on Moonshot AI & Yang Zhilin Research</p>
|
|
<p class="mt-2 text-xs text-slate-500">Built with HTML, Tailwind CSS, and Chart.js</p>
|
|
</footer>
|
|
</div>
|
|
</div>
|
|
@endsection
|
|
|
|
@push('scripts')
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
|
<script>
|
|
// 탭별 차트 초기화 상태 추적
|
|
const chartInitialized = { 0: false, 1: false, 2: false };
|
|
|
|
function switchTab(index) {
|
|
// 탭 버튼 활성화
|
|
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();
|
|
if (index === 2) initKimiCharts();
|
|
chartInitialized[index] = true;
|
|
}
|
|
// 스크롤 맨 위로
|
|
window.scrollTo({ top: 0, behavior: 'smooth' });
|
|
}
|
|
|
|
// === 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-white');
|
|
});
|
|
const activeBtn = document.getElementById('btn-vision-' + step);
|
|
activeBtn.classList.add('active');
|
|
activeBtn.classList.remove('bg-white');
|
|
|
|
const data = visionData[step];
|
|
document.getElementById('vision-content').innerHTML =
|
|
'<div class="text-lg leading-relaxed text-slate-700" style="animation: fadeIn 0.5s ease-in-out;">' +
|
|
'<h3 class="text-xl font-bold text-indigo-700 mb-3">' + data.title + '</h3>' +
|
|
'<p>' + data.text + '</p></div>';
|
|
}
|
|
|
|
// === 캄브리콘 차트 초기화 ===
|
|
function initCambriconCharts() {
|
|
const wrapLabel = (label, max = 16) => {
|
|
const words = label.split(' ');
|
|
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(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" } } } } };
|
|
|
|
// 주가 차트
|
|
new Chart(document.getElementById('stockChart').getContext('2d'), {
|
|
type: 'line',
|
|
data: {
|
|
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: { ...commonOpts, scales: { y: { beginAtZero: true, grid: { color: '#e2e8f0' } }, x: { grid: { display: false }, ticks: { font: { size: 11 } } } } }
|
|
});
|
|
|
|
// 매출 비중 차트
|
|
new Chart(document.getElementById('revenueChart').getContext('2d'), {
|
|
type: 'bar',
|
|
data: {
|
|
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 }
|
|
]
|
|
},
|
|
options: { ...commonOpts, indexAxis: 'y', scales: { x: { stacked: false, beginAtZero: true, max: 100 }, y: { stacked: false, ticks: { font: { size: 11 } } } } }
|
|
});
|
|
|
|
// 성능 비교 레이더
|
|
new Chart(document.getElementById('performanceChart').getContext('2d'), {
|
|
type: 'radar',
|
|
data: {
|
|
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 }
|
|
]
|
|
},
|
|
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: {
|
|
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; } } }
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
// === Kimi/Moonshot 차트 초기화 ===
|
|
function initKimiCharts() {
|
|
// 문맥 길이 비교 바 차트
|
|
new Chart(document.getElementById('contextChart').getContext('2d'), {
|
|
type: 'bar',
|
|
data: {
|
|
labels: ['GPT-3.5', 'GPT-4 Turbo', 'Claude 3', 'Kimi (초기)', 'Kimi (현재)'],
|
|
datasets: [{
|
|
label: '지원 토큰 수 (Tokens)',
|
|
data: [16000, 128000, 200000, 200000, 2000000],
|
|
backgroundColor: ['#cbd5e1', '#94a3b8', '#64748b', '#2dd4bf', '#0f766e'],
|
|
borderRadius: 6, borderSkipped: false
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: true, maintainAspectRatio: false,
|
|
plugins: {
|
|
legend: { display: false },
|
|
tooltip: { callbacks: { label: function(ctx) { return (ctx.dataset.label || '') + ': ' + new Intl.NumberFormat('ko-KR').format(ctx.parsed.y) + ' 토큰'; } } }
|
|
},
|
|
scales: {
|
|
y: {
|
|
type: 'logarithmic',
|
|
title: { display: true, text: '토큰 수 (Log Scale)', font: { size: 12 } },
|
|
ticks: { callback: function(v) { if (v === 10000 || v === 100000 || v === 1000000 || v === 2000000) return v / 10000 + '만'; return null; } }
|
|
},
|
|
x: { grid: { display: false } }
|
|
}
|
|
}
|
|
});
|
|
|
|
// 투자 도넛 차트
|
|
new Chart(document.getElementById('investmentChart').getContext('2d'), {
|
|
type: 'doughnut',
|
|
data: {
|
|
labels: ['Moonshot AI', 'Zhipu AI', 'Baichuan AI', 'MiniMax'],
|
|
datasets: [{
|
|
data: [35, 25, 20, 20],
|
|
backgroundColor: ['#14b8a6', '#6366f1', '#f59e0b', '#ec4899'],
|
|
borderWidth: 2, borderColor: '#ffffff', hoverOffset: 10
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: true, maintainAspectRatio: false, cutout: '65%',
|
|
plugins: {
|
|
legend: { position: 'bottom', labels: { padding: 20, font: { family: "'Noto Sans KR', sans-serif" } } },
|
|
tooltip: { callbacks: { label: function(ctx) { return '비중: ' + ctx.parsed + '%'; } } }
|
|
}
|
|
}
|
|
});
|
|
|
|
// Kimi 타임라인 카드 클릭 이벤트
|
|
const kimiCards = document.querySelectorAll('[data-kimi-id]');
|
|
kimiCards.forEach(card => {
|
|
card.addEventListener('click', () => {
|
|
const content = card.querySelector('.kimi-timeline-content');
|
|
const isHidden = content.classList.contains('hidden');
|
|
kimiCards.forEach(c => {
|
|
c.querySelector('.kimi-timeline-content').classList.add('hidden');
|
|
c.classList.remove('ring-2', 'ring-teal-500', 'bg-white');
|
|
c.classList.add('bg-slate-50');
|
|
});
|
|
if (isHidden) {
|
|
content.classList.remove('hidden');
|
|
card.classList.add('ring-2', 'ring-teal-500', 'bg-white');
|
|
card.classList.remove('bg-slate-50');
|
|
}
|
|
});
|
|
});
|
|
|
|
// Moonshot 네비 버튼
|
|
document.querySelectorAll('.moonshot-nav-btn').forEach(btn => {
|
|
btn.addEventListener('click', () => {
|
|
const target = document.getElementById(btn.getAttribute('data-moonshot-target'));
|
|
if (target) target.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
|
});
|
|
});
|
|
}
|
|
|
|
// 페이지 로드 시 탭 0 차트 초기화
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
initCambriconCharts();
|
|
chartInitialized[0] = true;
|
|
});
|
|
</script>
|
|
@endpush
|