SamProject/sam-manage
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
7ee3c9398a6f469c7907876dd43a7661a40be299
sam-manage/resources/views/china-tech/big-tech/index.blade.php
김보곤 7ee3c9398a feat: [china-tech] DeepSeek 량원펑 4번째 탭 추가 
- 개요&기원, V3 핵심기술 MoE, 비용효율성, 오픈소스 생태계 4개 내부 탭
- MoE 라우팅 인터랙티브 시뮬레이션 데모
- 훈련 비용 비교 Bar 차트 (DeepSeek vs Llama vs GPT-4)
- 내부 탭 네비게이션 ds- 접두사로 외부 충돌 방지
2026-03-04 11:01:15 +09:00

1131 lines
82 KiB
PHP
Raw Blame History

@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; }
/* 탭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
@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" onclick="switchTab(3)">DeepSeek, 량원펑</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">&darr;</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">&darr;</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>&copy; 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>&copy; 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>
{{-- ========== 탭 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
@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
// 탭별 차트 초기화 상태 추적
const chartInitialized = { 0: false, 1: false, 2: false, 3: 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();
if (index === 3) initDeepSeekCharts();
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' });
});
});
}
// ===== 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();
chartInitialized[0] = true;
});
</script>
@endpush
Reference in New Issue View Git Blame Copy Permalink