Spaces:
Running
Running
| <html lang="ko"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Efficient VLA Research Dashboard 2025</title> | |
| <!-- Tailwind CSS --> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <!-- React & ReactDOM --> | |
| <script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script> | |
| <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script> | |
| <!-- Babel for JSX --> | |
| <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script> | |
| <style> | |
| body { font-family: 'Inter', sans-serif; background-color: #f8fafc; } | |
| .scrollbar-hide::-webkit-scrollbar { display: none; } | |
| .scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="root"></div> | |
| <script type="text/babel"> | |
| const { useState } = React; | |
| // --- Icons (SVG Components for standalone usage) --- | |
| const Icons = { | |
| Cpu: ({className}) => <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}><rect x="4" y="4" width="16" height="16" rx="2" ry="2"/><rect x="9" y="9" width="6" height="6"/><line x1="9" y1="1" x2="9" y2="4"/><line x1="15" y1="1" x2="15" y2="4"/><line x1="9" y1="20" x2="9" y2="23"/><line x1="15" y1="20" x2="15" y2="23"/><line x1="20" y1="9" x2="23" y2="9"/><line x1="20" y1="14" x2="23" y2="14"/><line x1="1" y1="9" x2="4" y2="9"/><line x1="1" y1="14" x2="4" y2="14"/></svg>, | |
| Zap: ({className}) => <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg>, | |
| Brain: ({className}) => <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}><path d="M9.5 2A2.5 2.5 0 0 1 12 4.5v15a2.5 2.5 0 0 1-4.96.44 2.5 2.5 0 0 1-2.96-3.08 3 3 0 0 1-.34-5.58 2.5 2.5 0 0 1 1.32-4.24 2.5 2.5 0 0 1 1.98-3A2.5 2.5 0 0 1 9.5 2Z"/><path d="M14.5 2A2.5 2.5 0 0 0 12 4.5v15a2.5 2.5 0 0 0 4.96.44 2.5 2.5 0 0 0 2.96-3.08 3 3 0 0 0 .34-5.58 2.5 2.5 0 0 0-1.32-4.24 2.5 2.5 0 0 0-1.98-3A2.5 2.5 0 0 0 14.5 2Z"/></svg>, | |
| Bot: ({className}) => <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}><rect x="3" y="11" width="18" height="10" rx="2"/><circle cx="12" cy="5" r="2"/><path d="M12 7v4"/><line x1="8" y1="16" x2="8" y2="16"/><line x1="16" y1="16" x2="16" y2="16"/></svg>, | |
| Book: ({className}) => <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"/><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"/></svg>, | |
| Radio: ({className}) => <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}><circle cx="12" cy="12" r="2"/><path d="M16.24 7.76a6 6 0 0 1 0 8.49m-8.48-.01a6 6 0 0 1 0-8.49m11.31-2.82a10 10 0 0 1 0 14.14m-14.14 0a10 10 0 0 1 0-14.14"/></svg>, | |
| Search: ({className}) => <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>, | |
| Filter: ({className}) => <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}><polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"/></svg>, | |
| ExternalLink: ({className}) => <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/></svg>, | |
| Layers: ({className}) => <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}><polygon points="12 2 2 7 12 12 22 7 12 2"/><polyline points="2 17 12 22 22 17"/><polyline points="2 12 12 17 22 12"/></svg>, | |
| Gauge: ({className}) => <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}><path d="m12 14 4-4"/><path d="M3.34 19a10 10 0 1 1 17.32 0"/></svg> | |
| }; | |
| const PaperDashboard = () => { | |
| const [filter, setFilter] = useState('All'); | |
| const [searchTerm, setSearchTerm] = useState(''); | |
| // Expanded Paper Data | |
| const papers = [ | |
| { | |
| id: 101, | |
| title: "OpenVLA: An Open-Source 7B VLA Model", | |
| year: "2024.06", | |
| category: "Foundation Model", | |
| icon: <Icons.Bot className="w-6 h-6 text-indigo-600" />, | |
| summary: "Llama 2와 DINOv2를 결합한 강력한 오픈소스 VLA. 7B 파라미터임에도 양자화 시 엣지 구동 가능성 입증.", | |
| keyPoints: ["7B Parameters", "HuGE Dataset Training", "4-bit Quantization Ready"], | |
| impact: "현재 VLA 연구의 기준점(Baseline). 파인튜닝 및 경량화 연구의 핵심 백본.", | |
| tags: ["Open Source", "7B", "Standard"], | |
| link: "https://arxiv.org/abs/2406.09246" | |
| }, | |
| { | |
| id: 102, | |
| title: "RoboMamba: Efficient Robotic Manipulation with SSM", | |
| year: "2024.11", | |
| category: "Edge Model", | |
| icon: <Icons.Zap className="w-6 h-6 text-yellow-500" />, | |
| summary: "Transformer의 연산 비용 문제를 해결하기 위해 State Space Model(Mamba)을 도입한 로봇 제어 모델.", | |
| keyPoints: ["Linear Complexity (선형 복잡도)", "High Inference Speed", "Hybrid Architecture"], | |
| impact: "긴 시퀀스의 로봇 제어 데이터를 엣지에서 실시간 처리할 때 필수적인 아키텍처.", | |
| tags: ["Mamba", "SSM", "High Speed"], | |
| link: "#" | |
| }, | |
| { | |
| id: 6, | |
| title: "NanoVLA: Routing Decoupled Vision-Language Understanding", | |
| year: "2025.10", | |
| category: "Edge Model", | |
| icon: <Icons.Cpu className="w-6 h-6 text-orange-500" />, | |
| summary: "Jetson, 소형 로봇 등 리소스가 극도로 제한된 환경을 위한 '초경량 VLA'.", | |
| keyPoints: ["Vision-Language Decoupling", "Dynamic Routing으로 연산 최적화", "Action Chunking 적용"], | |
| impact: "Jetson Orin Nano급 엣지 디바이스에서 VLA를 구동하기 위한 핵심 레퍼런스.", | |
| tags: ["Nano-sized", "Dynamic Routing", "Jetson"], | |
| link: "#" | |
| }, | |
| { | |
| id: 7, | |
| title: "Evo-1: Lightweight VLA with Preserved Semantic Alignment", | |
| year: "2025.11", | |
| category: "Edge Model", | |
| icon: <Icons.Gauge className="w-6 h-6 text-cyan-500" />, | |
| summary: "0.77B 파라미터 수준의 경량 모델로, 학습/추론 비용을 획기적으로 절감.", | |
| keyPoints: ["0.77B 초경량 파라미터", "Cross-modulated Diffusion Transformer", "Real-time Inference"], | |
| impact: "Meta-World 등 벤치마크에서 입증된 성능. 실시간성이 중요한 로봇에 적합.", | |
| tags: ["0.77B", "Diffusion", "Real-time"], | |
| link: "#" | |
| }, | |
| { | |
| id: 103, | |
| title: "MoE-VLA: Mixture-of-Experts for Scalable Robotics", | |
| year: "2025.02", | |
| category: "Edge Model", | |
| icon: <Icons.Layers className="w-6 h-6 text-pink-500" />, | |
| summary: "모든 파라미터를 사용하지 않고 상황에 맞는 전문가(Expert)만 활성화하여 추론 속도 극대화.", | |
| keyPoints: ["Sparse Activation", "Resource Efficiency", "Multi-task Generalization"], | |
| impact: "성능 저하 없이 추론 FLOPs를 줄여 엣지 디바이스 배터리 수명을 연장.", | |
| tags: ["MoE", "Sparsity", "Efficiency"], | |
| link: "#" | |
| }, | |
| { | |
| id: 4, | |
| title: "AutoNeural: Co-Designing VLMs for NPU Inference", | |
| year: "2025.12", | |
| category: "NPU/Hardware", | |
| icon: <Icons.Brain className="w-6 h-6 text-purple-500" />, | |
| summary: "NPU 친화적으로 처음부터 설계된 VLM. ViT 대신 Depthwise-separable Conv 사용.", | |
| keyPoints: ["NPU 맞춤형 아키텍처 (No ViT)", "정수 양자화 (INT4/8/16) 지원", "메모리/연산 효율 극대화"], | |
| impact: "GPU가 아닌 NPU/SoC 기반 로봇 시스템을 설계할 때 필독해야 할 논문.", | |
| tags: ["NPU Native", "INT8", "Co-design"], | |
| link: "#" | |
| }, | |
| { | |
| id: 1, | |
| title: "LiteVLA: Efficient Vision-Language-Action on CPU", | |
| year: "2025.01", | |
| category: "Edge Model", | |
| icon: <Icons.Cpu className="w-6 h-6 text-blue-500" />, | |
| summary: "Raspberry Pi 5와 같은 초소형 하드웨어에서 CPU 전용으로 구동 가능한 경량 VLA 제안.", | |
| keyPoints: ["Quantization + LoRA 경량화", "ROS 2 통합", "On-device 로봇 제어"], | |
| impact: "라즈베리 파이급 임베디드 로봇 개발 시 필수 참고 자료.", | |
| tags: ["CPU", "Quantization", "Robotics"], | |
| link: "#" | |
| }, | |
| { | |
| id: 2, | |
| title: "SmolVLA: A VLA Model for Affordable Robotics", | |
| year: "2025.03", | |
| category: "Edge Model", | |
| icon: <Icons.Bot className="w-6 h-6 text-indigo-500" />, | |
| summary: "단일 GPU 또는 CPU 환경에서도 작동하도록 설계된 '작고 효율적인' VLA 모델.", | |
| keyPoints: ["저비용 로봇을 위한 최적화", "시뮬레이션 및 실제 환경 테스트", "리소스 제약 극복"], | |
| impact: "고가 장비 없이 VLA를 실험하거나 배포해야 하는 환경에 적합.", | |
| tags: ["Affordable", "Efficiency", "Small Scale"], | |
| link: "#" | |
| }, | |
| { | |
| id: 3, | |
| title: "Efficient VLA Models for Embodied Manipulation: Survey", | |
| year: "2025", | |
| category: "Survey", | |
| icon: <Icons.Book className="w-6 h-6 text-emerald-500" />, | |
| summary: "효율성, 경량화, 엣지 배포 관점에서의 VLA 연구 종합 리뷰.", | |
| keyPoints: ["모델 경량화 및 양자화 기법 정리", "데이터 수집 및 로봇 플랫폼 적용 사례", "최신 연구 트렌드 분석"], | |
| impact: "현재 연구 갭(gap)과 실용적인 구현 방향을 잡는 데 유용한 나침반.", | |
| tags: ["Survey", "Optimization", "Trend"], | |
| link: "#" | |
| }, | |
| { | |
| id: 5, | |
| title: "Evaluating Energy Efficiency of NPU-Accelerated ML", | |
| year: "2025.06", | |
| category: "NPU/Hardware", | |
| icon: <Icons.Radio className="w-6 h-6 text-amber-500" />, | |
| summary: "임베디드 마이크로컨트롤러에서 NPU 가속 시 전력 효율과 성능 평가.", | |
| keyPoints: ["실제 전력 소비 데이터", "응답 속도 벤치마크", "하드웨어 설계 가이드"], | |
| impact: "배터리 기반 로봇이나 저전력 시스템 설계 시 현실적인 데이터 제공.", | |
| tags: ["Energy", "Benchmark", "Embedded"], | |
| link: "#" | |
| }, | |
| { | |
| id: 104, | |
| title: "TinyLlama-Robo: Distilling Giants for Edge Control", | |
| year: "2024.12", | |
| category: "Edge Model", | |
| icon: <Icons.Zap className="w-6 h-6 text-red-500" />, | |
| summary: "1.1B TinyLlama를 베이스로 하여 로봇 제어에 특화시킨 증류(Distillation) 모델.", | |
| keyPoints: ["Knowledge Distillation", "Fast Fine-tuning", "Mobile-class GPU Ready"], | |
| impact: "성능과 크기 사이의 최적의 타협점을 찾는 연구.", | |
| tags: ["Distillation", "1.1B", "Mobile"], | |
| link: "https://github.com/jzhang38/TinyLlama" | |
| } | |
| ]; | |
| const categories = ['All', 'Edge Model', 'Foundation Model', 'Survey', 'NPU/Hardware']; | |
| const filteredPapers = papers.filter(paper => { | |
| const matchesFilter = filter === 'All' || paper.category === filter; | |
| const matchesSearch = paper.title.toLowerCase().includes(searchTerm.toLowerCase()) || | |
| paper.summary.toLowerCase().includes(searchTerm.toLowerCase()); | |
| return matchesFilter && matchesSearch; | |
| }); | |
| return ( | |
| <div className="min-h-screen bg-slate-50 p-6 font-sans text-slate-900"> | |
| {/* Header Section */} | |
| <header className="max-w-7xl mx-auto mb-10"> | |
| <div className="flex flex-col md:flex-row md:items-end justify-between gap-4 mb-2"> | |
| <div> | |
| <h1 className="text-4xl font-extrabold text-slate-800 mb-2 tracking-tight"> | |
| Efficient VLA Research | |
| </h1> | |
| <p className="text-slate-600 text-lg"> | |
| Dec 2025: Edge/NPU Optimization & Lightweight Trends | |
| </p> | |
| </div> | |
| <div className="bg-slate-200 text-slate-600 px-3 py-1 rounded text-sm font-semibold self-start md:self-auto"> | |
| Last Updated: Dec 2025 | |
| </div> | |
| </div> | |
| </header> | |
| {/* Controls Section */} | |
| <div className="max-w-7xl mx-auto mb-8 flex flex-col md:flex-row justify-between items-center gap-4 bg-white p-4 rounded-xl shadow-sm border border-slate-200 sticky top-4 z-10 bg-opacity-95 backdrop-blur-sm"> | |
| {/* Category Filters */} | |
| <div className="flex gap-2 overflow-x-auto pb-2 md:pb-0 w-full md:w-auto scrollbar-hide"> | |
| {categories.map(cat => ( | |
| <button | |
| key={cat} | |
| onClick={() => setFilter(cat)} | |
| className={`px-4 py-2 rounded-full text-sm font-medium transition-all whitespace-nowrap border | |
| ${filter === cat | |
| ? 'bg-slate-800 text-white border-slate-800 shadow-md' | |
| : 'bg-white text-slate-600 border-slate-200 hover:bg-slate-50 hover:border-slate-300'}`} | |
| > | |
| {cat} | |
| </button> | |
| ))} | |
| </div> | |
| {/* Search Bar */} | |
| <div className="relative w-full md:w-80"> | |
| <span className="absolute left-3 top-1/2 transform -translate-y-1/2 text-slate-400"> | |
| <Icons.Search className="w-4 h-4" /> | |
| </span> | |
| <input | |
| type="text" | |
| placeholder="Search papers, keywords..." | |
| value={searchTerm} | |
| onChange={(e) => setSearchTerm(e.target.value)} | |
| className="w-full pl-10 pr-4 py-2 rounded-lg border border-slate-200 focus:outline-none focus:ring-2 focus:ring-slate-400 focus:border-transparent transition-all" | |
| /> | |
| </div> | |
| </div> | |
| {/* Grid Content */} | |
| <div className="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-3 gap-6"> | |
| {filteredPapers.map((paper) => ( | |
| <div key={paper.id} className="bg-white rounded-xl shadow-sm border border-slate-200 hover:shadow-xl transition-all duration-300 hover:-translate-y-1 flex flex-col group"> | |
| {/* Card Header */} | |
| <div className="p-6 pb-4 relative"> | |
| <div className="flex justify-between items-start mb-4"> | |
| <div className="p-2.5 bg-slate-50 rounded-xl border border-slate-100 group-hover:bg-slate-100 transition-colors"> | |
| {paper.icon} | |
| </div> | |
| <div className="flex flex-col items-end gap-1.5"> | |
| <span className={`px-2.5 py-0.5 rounded-full text-[11px] font-bold uppercase tracking-wider | |
| ${paper.category === 'Edge Model' ? 'bg-blue-50 text-blue-700 border border-blue-100' : | |
| paper.category === 'Foundation Model' ? 'bg-indigo-50 text-indigo-700 border border-indigo-100' : | |
| paper.category === 'Survey' ? 'bg-emerald-50 text-emerald-700 border border-emerald-100' : | |
| 'bg-purple-50 text-purple-700 border border-purple-100'}`}> | |
| {paper.category} | |
| </span> | |
| <span className="text-xs text-slate-400 font-mono font-medium">{paper.year}</span> | |
| </div> | |
| </div> | |
| <h3 className="text-lg font-bold text-slate-800 leading-tight mb-2 min-h-[3.5rem] group-hover:text-blue-600 transition-colors"> | |
| {paper.title} | |
| </h3> | |
| </div> | |
| {/* Card Body */} | |
| <div className="px-6 pb-6 flex-grow flex flex-col"> | |
| <div className="mb-5"> | |
| <p className="text-slate-600 text-sm leading-relaxed mb-4"> | |
| {paper.summary} | |
| </p> | |
| <div className="space-y-2"> | |
| {paper.keyPoints.map((point, idx) => ( | |
| <div key={idx} className="flex items-start text-xs text-slate-600 bg-slate-50 p-2 rounded border border-slate-100"> | |
| <span className="mr-2 text-slate-400 mt-0.5">•</span> | |
| {point} | |
| </div> | |
| ))} | |
| </div> | |
| </div> | |
| <div className="mt-auto"> | |
| <div className="pt-4 border-t border-dashed border-slate-200 mb-4"> | |
| <h4 className="text-[11px] font-bold text-rose-500 mb-1.5 flex items-center gap-1 uppercase tracking-wider"> | |
| <Icons.Filter className="w-3 h-3" /> Impact & Usage | |
| </h4> | |
| <p className="text-xs text-slate-600 italic"> | |
| "{paper.impact}" | |
| </p> | |
| </div> | |
| <a href={paper.link} target="_blank" rel="noreferrer" | |
| className="flex items-center justify-center w-full py-2 bg-slate-900 text-white text-sm font-medium rounded-lg hover:bg-blue-600 transition-colors gap-2 group-hover:shadow-md"> | |
| <span>Read Paper</span> | |
| <Icons.ExternalLink className="w-3 h-3" /> | |
| </a> | |
| </div> | |
| </div> | |
| {/* Card Footer (Tags) */} | |
| <div className="px-6 py-3 bg-slate-50 border-t border-slate-200 rounded-b-xl flex flex-wrap gap-2"> | |
| {paper.tags.map(tag => ( | |
| <span key={tag} className="px-2 py-1 bg-white border border-slate-200 rounded text-[10px] text-slate-500 font-bold uppercase tracking-wide"> | |
| #{tag} | |
| </span> | |
| ))} | |
| </div> | |
| </div> | |
| ))} | |
| </div> | |
| {filteredPapers.length === 0 && ( | |
| <div className="text-center py-20"> | |
| <div className="inline-block p-4 rounded-full bg-slate-100 mb-4"> | |
| <Icons.Layers className="w-8 h-8 text-slate-400" /> | |
| </div> | |
| <h3 className="text-lg font-medium text-slate-900">No papers found</h3> | |
| <p className="text-slate-500">Try adjusting your search or filters.</p> | |
| </div> | |
| )} | |
| {/* Footer Info */} | |
| <footer className="max-w-7xl mx-auto mt-16 text-center pb-10 border-t border-slate-200 pt-8"> | |
| <p className="text-slate-500 text-sm font-medium">Efficient Vision-Language-Action Models Trend Analysis (2025)</p> | |
| <p className="mt-2 text-xs text-slate-400">Curated based on latest ArXiv & Conference papers (CVPR, ICRA, CoRL) as of Dec 2025</p> | |
| </footer> | |
| </div> | |
| ); | |
| }; | |
| const root = ReactDOM.createRoot(document.getElementById('root')); | |
| root.render(<PaperDashboard />); | |
| </script> | |
| </body> | |
| </html> |