feat: [china-tech] 양즈린 Kimi LLM 기술 리서치 탭 추가
- 세 번째 탭: Moonshot AI 양즈린 분석 콘텐츠 - 타임라인 카드 인터랙션, 문맥 길이 바 차트, 투자 도넛 차트
This commit is contained in:
김보곤
@@ -28,6 +28,13 @@
|
||||
.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
|
||||
|
||||
@@ -40,7 +47,7 @@
|
||||
<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 placeholder" disabled>준비 중 (3)</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>
|
||||
@@ -374,6 +381,147 @@
|
||||
<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
|
||||
|
||||
@@ -381,7 +529,7 @@
|
||||
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
||||
<script>
|
||||
// 탭별 차트 초기화 상태 추적
|
||||
const chartInitialized = { 0: false, 1: false };
|
||||
const chartInitialized = { 0: false, 1: false, 2: false };
|
||||
|
||||
function switchTab(index) {
|
||||
// 탭 버튼 활성화
|
||||
@@ -396,6 +544,7 @@ function switchTab(index) {
|
||||
if (!chartInitialized[index]) {
|
||||
if (index === 0) initCambriconCharts();
|
||||
if (index === 1) initAgibotCharts();
|
||||
if (index === 2) initKimiCharts();
|
||||
chartInitialized[index] = true;
|
||||
}
|
||||
// 스크롤 맨 위로
|
||||
@@ -515,6 +664,85 @@ function initAgibotCharts() {
|
||||
});
|
||||
}
|
||||
|
||||
// === 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();
|
||||
|
||||
Reference in New Issue
Block a user