SamProject/sam-manage
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: [china-tech] DeepSeek 량원펑 4번째 탭 추가

Browse Source 
- 개요&기원, V3 핵심기술 MoE, 비용효율성, 오픈소스 생태계 4개 내부 탭
- MoE 라우팅 인터랙티브 시뮬레이션 데모
- 훈련 비용 비교 Bar 차트 (DeepSeek vs Llama vs GPT-4)
- 내부 탭 네비게이션 ds- 접두사로 외부 충돌 방지
This commit is contained in:
김보곤
2026-03-04 11:00:57 +09:00
parent 3b7e493b19
commit 7ee3c9398a
1 changed files with 380 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

382
resources/views/china-tech/big-tech/index.blade.php
View File

@@ -35,6 +35,16 @@
.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; }
/* 탭3: DeepSeek 스타일 */
.tab-deepseek { background-color: #f8fafc; }
.tab-deepseek .glass-panel { background: rgba(255, 255, 255, 0.8); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.5); }
.tab-deepseek .ds-tab-btn.active { border-bottom: 2px solid #2563eb; color: #2563eb; font-weight: 600; }
.tab-deepseek .expert-node { transition: all 0.3s ease; }
.tab-deepseek .expert-active { background-color: #3b82f6; color: white; transform: scale(1.05); box-shadow: 0 4px 6px -1px rgba(59, 130, 246, 0.5); }
.tab-deepseek .expert-inactive { background-color: #e2e8f0; color: #64748b; opacity: 0.6; }
.tab-deepseek .ds-content-section { display: none; }
.tab-deepseek .ds-content-section.ds-active { display: block; }
</style>
@endpush
@@ -48,7 +58,7 @@
<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" onclick="switchTab(3)">DeepSeek, 량원펑</button>
<button class="bigtech-tab placeholder" disabled>준비 중 (5)</button>
</div>
</div>
@@ -522,6 +532,234 @@
<p class="mt-2 text-xs text-slate-500">Built with HTML, Tailwind CSS, and Chart.js</p>
</footer>
</div>
{{-- ========== 탭 3: DeepSeek 분석 ========== --}}
<div id="tab-content-3" class="tab-content tab-deepseek">
{{-- DeepSeek 내부 네비게이션 --}}
<nav class="sticky top-0 z-30 glass-panel shadow-sm">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between h-16">
<div class="flex items-center">
<span class="text-2xl font-bold text-blue-600 tracking-tighter">DeepSeek<span class="text-slate-800">Analysis</span></span>
</div>
<div class="hidden sm:flex space-x-8 items-center" id="ds-nav-tabs">
<button class="ds-tab-btn active px-1 py-4 text-sm font-medium text-slate-500 hover:text-slate-700 transition-colors" data-target="ds-section-intro">개요 & 기원</button>
<button class="ds-tab-btn px-1 py-4 text-sm font-medium text-slate-500 hover:text-slate-700 transition-colors" data-target="ds-section-tech">V3 핵심 기술 (MoE)</button>
<button class="ds-tab-btn px-1 py-4 text-sm font-medium text-slate-500 hover:text-slate-700 transition-colors" data-target="ds-section-cost">비용 효율성 분석</button>
<button class="ds-tab-btn px-1 py-4 text-sm font-medium text-slate-500 hover:text-slate-700 transition-colors" data-target="ds-section-impact">오픈소스 생태계 영향</button>
</div>
<div class="sm:hidden flex items-center">
<select id="ds-mobile-nav" class="bg-slate-100 border-none text-sm rounded-md focus:ring-blue-500">
<option value="ds-section-intro">개요 & 기원</option>
<option value="ds-section-tech">V3 핵심 기술</option>
<option value="ds-section-cost">비용 분석</option>
<option value="ds-section-impact">생태계 영향</option>
</select>
</div>
</div>
</div>
</nav>
<main class="flex-grow p-4 sm:p-6 lg:p-8 w-full max-w-7xl mx-auto">
{{-- 섹션1: 개요 & 기원 --}}
<section id="ds-section-intro" class="ds-content-section ds-active animate-fade-in">
<div class="mb-10 text-center sm:text-left">
<h1 class="text-3xl sm:text-4xl font-extrabold text-slate-900 mb-4">양적 거래의 정밀함에서 탄생한 AI 혁명</h1>
<p class="text-lg text-slate-600 max-w-3xl leading-relaxed">이 섹션은 딥시크(DeepSeek)의 창업자 량원펑(Liang Wenfeng)과 헤지펀드 High-Flyer의 관계를 탐구합니다. 금융 데이터 처리 인프라가 어떻게 효율적인 AI 개발의 초석이 되었는지 알아봅니다.</p>
</div>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-10 items-center">
<div class="bg-white p-8 rounded-2xl shadow-sm border border-slate-100">
<h2 class="text-2xl font-bold text-slate-800 mb-4">량원펑과 High-Flyer의 연결고리</h2>
<p class="mb-4 text-slate-600 leading-relaxed">
딥시크의 성공 이면에는 중국의 주요 양적 거래(Quantitative Trading) 헤지펀드인 <strong>High-Flyer(幻方量化, 환팡양화)</strong>가 있습니다. 창업자 량원펑은 이 펀드를 이끌며 방대한 시장 데이터를 초고속으로 분석하고 예측하는 인프라를 구축했습니다.
</p>
<ul class="space-y-3 mb-6">
<li class="flex items-start">
<span class="text-blue-500 mr-2">▪</span>
<span class="text-slate-700"><strong>데이터 최적화 DNA:</strong> 금융 시장의 노이즈 속에서 신호를 찾는 기술이 AI 모델의 데이터 정제 능력으로 직결되었습니다.</span>
</li>
<li class="flex items-start">
<span class="text-blue-500 mr-2">▪</span>
<span class="text-slate-700"><strong>인프라의 극한 활용:</strong> 양적 거래를 위해 구축한 대규모 GPU 클러스터를 AI 훈련용으로 전환하며, 하드웨어 활용률을 극한으로 끌어올리는 노하우를 접목했습니다.</span>
</li>
<li class="flex items-start">
<span class="text-blue-500 mr-2">▪</span>
<span class="text-slate-700"><strong>실용주의 철학:</strong> 무조건적인 모델 크기 확장보다, 제한된 자원 내에서 최고의 ROI(투자 대비 수익률)를 내는 금융 공학적 접근이 AI 아키텍처 설계에 반영되었습니다.</span>
</li>
</ul>
</div>
<div class="flex flex-col items-center justify-center p-8 bg-slate-900 rounded-2xl shadow-inner relative overflow-hidden h-full min-h-[300px]">
<div class="absolute inset-0 opacity-10" style="background-image: radial-gradient(#475569 1px, transparent 1px); background-size: 20px 20px;"></div>
<div class="z-10 text-center w-full">
<div class="flex justify-between items-center bg-slate-800 p-4 rounded-lg mb-4 border border-slate-700">
<span class="text-emerald-400 font-mono text-sm">Quant Data Stream</span>
<span class="text-slate-400 text-xl">➔</span>
<span class="text-blue-400 font-mono text-sm">Model Training</span>
</div>
<div class="grid grid-cols-4 gap-2 mb-4">
<div class="h-8 bg-emerald-500/20 rounded border border-emerald-500/50 flex items-center justify-center text-xs text-emerald-400">Node A</div>
<div class="h-8 bg-emerald-500/20 rounded border border-emerald-500/50 flex items-center justify-center text-xs text-emerald-400">Node B</div>
<div class="h-8 bg-emerald-500/20 rounded border border-emerald-500/50 flex items-center justify-center text-xs text-emerald-400">Node C</div>
<div class="h-8 bg-emerald-500/20 rounded border border-emerald-500/50 flex items-center justify-center text-xs text-emerald-400">Node D</div>
</div>
<div class="text-slate-300 text-sm mt-6 p-4 bg-slate-800/80 rounded-lg">
"알고리즘 트레이딩의 인프라 효율성이<br>곧 AI 모델의 학습 효율성으로 전환되다."
</div>
</div>
</div>
</div>
</section>
{{-- 섹션2: V3 핵심 기술 (MoE) --}}
<section id="ds-section-tech" class="ds-content-section">
<div class="mb-10">
<h1 class="text-3xl sm:text-4xl font-extrabold text-slate-900 mb-4">비용 절감의 핵심: MoE 아키텍처</h1>
<p class="text-lg text-slate-600 max-w-3xl leading-relaxed">GPT-4급 성능을 내면서도 비용을 극적으로 낮춘 딥시크-V3의 기술적 비결을 시각적으로 탐색합니다. 가장 중요한 개념인 '전문가 혼합(MoE)' 방식의 작동 원리를 직접 체험해 보세요.</p>
</div>
<div class="bg-white p-6 sm:p-8 rounded-2xl shadow-sm border border-slate-100 mb-8">
<div class="grid grid-cols-1 md:grid-cols-2 gap-8 items-center">
<div>
<h3 class="text-xl font-bold text-slate-800 mb-3">Mixture of Experts (MoE) 란?</h3>
<p class="text-slate-600 mb-4 text-sm leading-relaxed">
기존의 Dense 모델은 하나의 질문에 답하기 위해 모델의 전체 신경망(파라미터)을 모두 작동시킵니다. 이는 전력 소모와 연산 비용을 기하급수적으로 증가시킵니다.
</p>
<p class="text-slate-600 mb-6 text-sm leading-relaxed">
반면 딥시크-V3가 채택한 <strong>MoE 아키텍처</strong>는 모델 내부에 여러 개의 작은 '전문가(Expert)' 네트워크를 둡니다. 사용자의 프롬프트가 들어오면, <strong>라우터(Router)</strong>가 질문의 성격을 분석하여 가장 적합한 소수의 전문가만 활성화합니다. 전체 파라미터는 거대하지만, 활성화되는 파라미터는 적어 연산 비용을 획기적으로 낮춥니다.
</p>
<ul class="text-sm space-y-2 text-slate-700 bg-slate-50 p-4 rounded-lg">
<li>▪ <strong>총 파라미터:</strong> 약 6,710억 개 (지식의 총량)</li>
<li>▪ <strong>활성 파라미터:</strong> 토큰당 약 370억 개 (실제 연산량, 약 5.5%만 사용)</li>
<li>▪ <strong>결과:</strong> 추론 속도 상승, 서버 비용 극적 감소</li>
</ul>
</div>
<div class="bg-slate-50 p-6 rounded-xl border border-slate-200">
<div class="text-center mb-4">
<span class="inline-block bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded font-bold uppercase tracking-wide">Interactive Demo</span>
<h4 class="font-bold text-slate-800 mt-2">MoE 라우팅 시뮬레이션</h4>
</div>
<div class="flex flex-col items-center">
<div class="w-full max-w-sm mb-4">
<input type="text" id="ds-demo-prompt" class="w-full p-3 border border-slate-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none" placeholder="예: 양자역학을 쉽게 설명해줘..." value="복잡한 수학 공식을 파이썬 코드로 변환해줘">
</div>
<button id="ds-btn-simulate" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-6 rounded-lg transition-colors mb-6 shadow-md">
프롬프트 처리 (라우팅)
</button>
<div class="w-full relative">
<div class="text-center text-xs font-bold text-slate-500 mb-2">Router Network</div>
<div class="flex justify-center mb-2 text-slate-400">⬇</div>
<div class="grid grid-cols-4 gap-3" id="ds-expert-grid">
<div class="expert-node expert-inactive h-16 rounded-lg flex items-center justify-center text-xs font-medium text-center p-1">Expert 1<br>(수학)</div>
<div class="expert-node expert-inactive h-16 rounded-lg flex items-center justify-center text-xs font-medium text-center p-1">Expert 2<br>(코딩)</div>
<div class="expert-node expert-inactive h-16 rounded-lg flex items-center justify-center text-xs font-medium text-center p-1">Expert 3<br>(문학)</div>
<div class="expert-node expert-inactive h-16 rounded-lg flex items-center justify-center text-xs font-medium text-center p-1">Expert 4<br>(논리)</div>
<div class="expert-node expert-inactive h-16 rounded-lg flex items-center justify-center text-xs font-medium text-center p-1">Expert 5<br>(역사)</div>
<div class="expert-node expert-inactive h-16 rounded-lg flex items-center justify-center text-xs font-medium text-center p-1">Expert 6<br>(번역)</div>
<div class="expert-node expert-inactive h-16 rounded-lg flex items-center justify-center text-xs font-medium text-center p-1">Expert 7<br>(의학)</div>
<div class="expert-node expert-inactive h-16 rounded-lg flex items-center justify-center text-xs font-medium text-center p-1">Expert 8<br>(일반)</div>
</div>
<div class="mt-4 text-center text-xs text-slate-500" id="ds-demo-result">
버튼을 눌러 전체 네트워크 중 일부만 활성화되는 것을 확인하세요.
</div>
</div>
</div>
</div>
</div>
</div>
<div class="bg-blue-50 border-l-4 border-blue-500 p-4 rounded-r-lg">
<p class="text-sm text-blue-900">
<strong>추가적인 효율성 달성:</strong> MoE 외에도 딥시크-V3는 <strong>FP8 혼합 정밀도 학습</strong>(메모리 대역폭 절감)과 <strong>MLA(Multi-Head Latent Attention)</strong> 아키텍처를 도입하여 키-값 캐시 크기를 대폭 줄여 추론 과정의 병목 현상을 해결했습니다.
</p>
</div>
</section>
{{-- 섹션3: 비용 효율성 분석 --}}
<section id="ds-section-cost" class="ds-content-section">
<div class="mb-10">
<h1 class="text-3xl sm:text-4xl font-extrabold text-slate-900 mb-4">파괴적인 훈련 비용 비교</h1>
<p class="text-lg text-slate-600 max-w-3xl leading-relaxed">업계를 놀라게 한 가장 큰 요인은 성능이 아닌 '가성비'입니다. 타겟 성능을 달성하기 위해 소모된 막대한 컴퓨팅 자원의 차이를 시각적 데이터로 확인합니다.</p>
</div>
<div class="bg-white p-6 sm:p-8 rounded-2xl shadow-sm border border-slate-100">
<div class="text-center mb-6">
<h2 class="text-xl font-bold text-slate-800">프론티어 AI 모델 추정 훈련 비용</h2>
<p class="text-sm text-slate-500 mt-1">(단위: 백만 달러 / 언론 및 공개 자료 추정치 통합)</p>
</div>
<div class="chart-container">
<canvas id="dsCostChart"></canvas>
</div>
<div class="mt-8 grid grid-cols-1 md:grid-cols-3 gap-6">
<div class="bg-slate-50 p-4 rounded-lg">
<div class="text-sm font-bold text-slate-500 mb-1">DeepSeek-V3</div>
<div class="text-2xl font-extrabold text-blue-600">~$5.6M</div>
<p class="text-xs text-slate-600 mt-2">약 2,000개의 H800 GPU로 단 두 달 만에 학습 완료. 효율적인 인프라 클러스터 최적화의 결과.</p>
</div>
<div class="bg-slate-50 p-4 rounded-lg">
<div class="text-sm font-bold text-slate-500 mb-1">Llama 3 (400B+)</div>
<div class="text-2xl font-extrabold text-slate-700">~$50M+</div>
<p class="text-xs text-slate-600 mt-2">수만 개의 GPU를 사용한 대규모 인프라 투자. 메타의 막대한 자본력 반영.</p>
</div>
<div class="bg-slate-50 p-4 rounded-lg">
<div class="text-sm font-bold text-slate-500 mb-1">GPT-4 (추정)</div>
<div class="text-2xl font-extrabold text-slate-700">~$100M+</div>
<p class="text-xs text-slate-600 mt-2">초기 연구 및 수많은 시행착오 비용 포함. 업계 표준을 세우기 위한 선발주자의 거대한 투입.</p>
</div>
</div>
</div>
</section>
{{-- 섹션4: 오픈소스 생태계 영향 --}}
<section id="ds-section-impact" class="ds-content-section">
<div class="mb-10">
<h1 class="text-3xl sm:text-4xl font-extrabold text-slate-900 mb-4">오픈소스 생태계와 AI 시장의 지각변동</h1>
<p class="text-lg text-slate-600 max-w-3xl leading-relaxed">딥시크-V3의 등장은 단순한 모델 하나의 출시를 넘어, 폐쇄형 상업 모델 중심의 AI 시장 구조에 근본적인 질문을 던졌습니다. 그 파급력을 분석합니다.</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="bg-white p-6 rounded-xl border border-t-4 border-t-blue-500 shadow-sm hover:shadow-md transition-shadow">
<div class="flex items-center justify-between mb-4">
<h3 class="text-xl font-bold text-slate-800">1. AI 민주화의 가속 (스타트업/연구자)</h3>
<span class="text-2xl">🌍</span>
</div>
<p class="text-slate-600 text-sm leading-relaxed">
기존에는 막대한 자본을 가진 빅테크만이 GPT-4급 성능을 독점했습니다. 딥시크-V3의 모델 가중치(Weights) 공개는 전 세계 연구자와 자본이 부족한 스타트업들이 최상위 수준의 AI를 즉시 로컬 서버에 구축하고 미세조정(Fine-tuning)할 수 있는 길을 열었습니다. 이는 혁신의 속도를 폭발적으로 증가시킵니다.
</p>
</div>
<div class="bg-white p-6 rounded-xl border border-t-4 border-t-emerald-500 shadow-sm hover:shadow-md transition-shadow">
<div class="flex items-center justify-between mb-4">
<h3 class="text-xl font-bold text-slate-800">2. 빅테크의 가격 인하 압박</h3>
<span class="text-2xl">📉</span>
</div>
<p class="text-slate-600 text-sm leading-relaxed">
거의 무료에 가까운 API 가격(오픈소스 기반)을 제시함에 따라, OpenAI, Google, Anthropic 등 기존 시장 지배자들의 API 요금 정책에 엄청난 하방 압력이 가해졌습니다. 기업 고객들은 수십 배 비싼 폐쇄형 모델 대신 자체 호스팅이 가능한 고성능 오픈소스 모델을 진지하게 대안으로 검토하기 시작했습니다.
</p>
</div>
<div class="bg-white p-6 rounded-xl border border-t-4 border-t-purple-500 shadow-sm hover:shadow-md transition-shadow">
<div class="flex items-center justify-between mb-4">
<h3 class="text-xl font-bold text-slate-800">3. 하드웨어 '스케일링 법칙'의 재고</h3>
<span class="text-2xl">⚙️</span>
</div>
<p class="text-slate-600 text-sm leading-relaxed">
그동안 업계는 "데이터와 컴퓨팅 파워(GPU)를 무조건 많이 투입하면 성능이 좋아진다"는 스케일링 법칙에 의존했습니다. 딥시크는 압도적인 자본 없이도 <strong>알고리즘 최적화와 인프라 효율성</strong>만으로 한계를 돌파할 수 있음을 증명하며, AI 연구의 패러다임을 하드웨어 집중에서 소프트웨어/알고리즘 효율화로 전환시켰습니다.
</p>
</div>
<div class="bg-white p-6 rounded-xl border border-t-4 border-t-amber-500 shadow-sm hover:shadow-md transition-shadow">
<div class="flex items-center justify-between mb-4">
<h3 class="text-xl font-bold text-slate-800">4. 국가 간 AI 경쟁 구도 변화</h3>
<span class="text-2xl">🌐</span>
</div>
<p class="text-slate-600 text-sm leading-relaxed">
미국의 최첨단 AI 칩 수출 통제 속에서, 중국 기업인 딥시크가 구형 칩(H800 등 제한된 자원)만으로 글로벌 선두권 모델을 개발한 것은 큰 충격이었습니다. 이는 수출 통제의 실효성에 대한 논쟁을 점화시켰고, AI 패권 경쟁이 단순히 하드웨어 보유량이 아닌 소프트웨어 엔지니어링 역량의 싸움으로 번지고 있음을 보여줍니다.
</p>
</div>
</div>
</section>
</main>
<footer class="bg-slate-900 text-slate-400 py-6 mt-12 text-center text-sm">
<p>Interactive Analysis Dashboard by DeepSeek-V3 Report Synthesis</p>
</footer>
</div>
</div>
@endsection
@@ -529,7 +767,7 @@
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
// 탭별 차트 초기화 상태 추적
const chartInitialized = { 0: false, 1: false, 2: false };
const chartInitialized = { 0: false, 1: false, 2: false, 3: false };
function switchTab(index) {
// 탭 버튼 활성화
@@ -545,6 +783,7 @@ function switchTab(index) {
if (index === 0) initCambriconCharts();
if (index === 1) initAgibotCharts();
if (index === 2) initKimiCharts();
if (index === 3) initDeepSeekCharts();
chartInitialized[index] = true;
}
// 스크롤 맨 위로
@@ -743,6 +982,145 @@ function initKimiCharts() {
});
}
// ===== DeepSeek 탭 초기화 =====
function initDeepSeekCharts() {
// 내부 탭 네비게이션
const dsTabBtns = document.querySelectorAll('.ds-tab-btn');
const dsSections = document.querySelectorAll('.ds-content-section');
const dsMobileNav = document.getElementById('ds-mobile-nav');
function switchDeepSeekTab(targetId) {
dsSections.forEach(function(sec) {
sec.classList.remove('ds-active', 'animate-fade-in');
});
var targetSec = document.getElementById(targetId);
if (targetSec) {
targetSec.classList.add('ds-active');
setTimeout(function() { targetSec.classList.add('animate-fade-in'); }, 50);
}
if (targetId === 'ds-section-cost' && !window.dsCostChartRendered) {
initDeepSeekCostChart();
window.dsCostChartRendered = true;
}
dsTabBtns.forEach(function(btn) { btn.classList.remove('active'); });
var activeBtn = Array.from(dsTabBtns).find(function(btn) { return btn.getAttribute('data-target') === targetId; });
if (activeBtn) activeBtn.classList.add('active');
if (dsMobileNav && dsMobileNav.value !== targetId) dsMobileNav.value = targetId;
}
dsTabBtns.forEach(function(btn) {
btn.addEventListener('click', function(e) {
switchDeepSeekTab(e.target.getAttribute('data-target'));
});
});
if (dsMobileNav) {
dsMobileNav.addEventListener('change', function(e) {
switchDeepSeekTab(e.target.value);
});
}
// MoE 시뮬레이션
var btnSimulate = document.getElementById('ds-btn-simulate');
var expertNodes = document.querySelectorAll('#ds-expert-grid .expert-node');
var demoResult = document.getElementById('ds-demo-result');
if (btnSimulate) {
btnSimulate.addEventListener('click', function() {
btnSimulate.disabled = true;
btnSimulate.innerHTML = '라우팅 분석 중...';
expertNodes.forEach(function(node) {
node.classList.remove('expert-active');
node.classList.add('expert-inactive');
});
setTimeout(function() {
var indexes = [];
while (indexes.length < 2) {
var r = Math.floor(Math.random() * 8);
if (indexes.indexOf(r) === -1) indexes.push(r);
}
indexes.forEach(function(idx) {
expertNodes[idx].classList.remove('expert-inactive');
expertNodes[idx].classList.add('expert-active');
});
btnSimulate.disabled = false;
btnSimulate.innerHTML = '프롬프트 처리 (라우팅)';
var names = indexes.map(function(i) { return expertNodes[i].innerText.split('\n')[0]; }).join(', ');
demoResult.innerHTML = '<span class="text-blue-600 font-bold">결과:</span> 8개의 전문가 중 <span class="font-bold text-slate-800">단 2개(' + names + ')</span>만 활성화되어 연산 비용을 획기적으로 절약했습니다.';
}, 800);
});
}
}
function initDeepSeekCostChart() {
var ctx = document.getElementById('dsCostChart');
if (!ctx) return;
new Chart(ctx.getContext('2d'), {
type: 'bar',
data: {
labels: ['DeepSeek-V3', 'Llama 3 (400B+ Est.)', 'GPT-4 (Est.)'],
datasets: [{
label: '추정 훈련 비용 (백만 달러, $M)',
data: [5.6, 50, 100],
backgroundColor: [
'rgba(37, 99, 235, 0.8)',
'rgba(148, 163, 184, 0.5)',
'rgba(100, 116, 139, 0.5)'
],
borderColor: [
'rgb(37, 99, 235)',
'rgb(148, 163, 184)',
'rgb(100, 116, 139)'
],
borderWidth: 1,
borderRadius: 6
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: { display: false },
tooltip: {
backgroundColor: 'rgba(15, 23, 42, 0.9)',
titleFont: { size: 14 },
bodyFont: { size: 14 },
padding: 12,
callbacks: {
label: function(context) {
return '비용: $' + context.parsed.y + 'M';
}
}
}
},
scales: {
y: {
beginAtZero: true,
grid: { color: 'rgba(226, 232, 240, 0.5)', borderDash: [5, 5] },
ticks: {
callback: function(value) { return '$' + value + 'M'; }
}
},
x: {
grid: { display: false },
ticks: { font: { weight: 'bold' } }
}
},
animation: {
duration: 1500,
easing: 'easeOutQuart'
}
}
});
}
// 페이지 로드 시 탭 0 차트 초기화
document.addEventListener('DOMContentLoaded', function() {
initCambriconCharts();